diff --git a/src/features/Common/Radio/index.tsx b/src/features/Common/Radio/index.tsx index 7ef499cf..cd95ecbc 100644 --- a/src/features/Common/Radio/index.tsx +++ b/src/features/Common/Radio/index.tsx @@ -19,7 +19,7 @@ type TCheckbox = Pick, ( export const Radio = ({ checked, id, - label, + label = '', name, onChange, value, diff --git a/src/features/Register/AdditionalSubscription/index.tsx b/src/features/Register/AdditionalSubscription/index.tsx new file mode 100644 index 00000000..43640193 --- /dev/null +++ b/src/features/Register/AdditionalSubscription/index.tsx @@ -0,0 +1,27 @@ +import React from 'react' + +import { Checkbox } from 'features/Common' + +import { Price } from '../Price' +import { + PriceItemTitle, + PriceItem, + PriceItemCol, +} from './styled' + +type TAdditionalSubscription = { + price: number, + title: string, +} + +export const AdditionalSubscription = ({ price, title }: TAdditionalSubscription) => ( + + + + + + {title} + + + +) diff --git a/src/features/Register/AdditionalSubscription/styled.tsx b/src/features/Register/AdditionalSubscription/styled.tsx new file mode 100644 index 00000000..c73bbb30 --- /dev/null +++ b/src/features/Register/AdditionalSubscription/styled.tsx @@ -0,0 +1,29 @@ +import styled from 'styled-components/macro' + +export const PriceItem = styled.div` + position: relative; + width: 288px; + height: 176px; + padding: 24px 25px 40px; + margin: 0; + display: flex; + flex-direction: row; + background: #3F3F3F; + box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4); + border-radius: 2px; +` + +export const PriceItemTitle = styled.span` + font-style: normal; + font-weight: bold; + font-size: 18px; + line-height: 24px; + color: ${({ theme: { colors } }) => colors.text}; + margin: 3px 5px 0 0; +` + +export const PriceItemCol = styled.div` + display: flex; + flex-direction: column; + justify-content: space-between; +` diff --git a/src/features/Register/CheckboxSubscription/index.tsx b/src/features/Register/CheckboxSubscription/index.tsx deleted file mode 100644 index 11c64b3a..00000000 --- a/src/features/Register/CheckboxSubscription/index.tsx +++ /dev/null @@ -1,3 +0,0 @@ -// import React from 'react' - -export {} diff --git a/src/features/Register/MainSubscription/index.tsx b/src/features/Register/MainSubscription/index.tsx new file mode 100644 index 00000000..9685a56f --- /dev/null +++ b/src/features/Register/MainSubscription/index.tsx @@ -0,0 +1,27 @@ +import React from 'react' + +import { Radio } from 'features/Common' + +import { Price } from '../Price' +import { + SubscriptionWrapper, + SubscriptionTitle, + Row, +} from '../Steps/Subscriptions/styled' + +type TMainSubscription = { + price: number, + title: string, +} + +export const MainSubscription = ({ price, title }: TMainSubscription) => ( + + + + {title} + + + + + +) diff --git a/src/features/Register/Price/index.tsx b/src/features/Register/Price/index.tsx index 23058f4b..d5f23214 100644 --- a/src/features/Register/Price/index.tsx +++ b/src/features/Register/Price/index.tsx @@ -6,9 +6,19 @@ import { PriceDetails, } from './styled' -export const Price = () => ( +type TPrice = { + amount: number, + currency?: string, + perPeriod?: string, +} + +export const Price = ({ + amount, + currency = '₽', + perPeriod = 'мес', +}: TPrice) => ( - 1999 - ₽ / мес + {amount} + {currency} / {perPeriod} ) diff --git a/src/features/Register/Price/styled.tsx b/src/features/Register/Price/styled.tsx index fd060f00..cdd64c3d 100644 --- a/src/features/Register/Price/styled.tsx +++ b/src/features/Register/Price/styled.tsx @@ -20,4 +20,5 @@ export const PriceDetails = styled.span` font-size: 18px; line-height: 21px; color: ${({ theme: { colors } }) => colors.text}; + text-transform: uppercase; ` diff --git a/src/features/Register/Steps/Subscriptions/Subscription.tsx b/src/features/Register/Steps/Subscriptions/Subscription.tsx deleted file mode 100644 index 57e522cd..00000000 --- a/src/features/Register/Steps/Subscriptions/Subscription.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import React from 'react' - -import { Price } from '../../Price' -import { - SubscriptionWrapper, - Radio, - SubscriptionTitle, - Row, -} from './styled' - -export const Subscription = () => ( - - - - Бесплатная - - - - - -) diff --git a/src/features/Register/Steps/Subscriptions/index.tsx b/src/features/Register/Steps/Subscriptions/index.tsx index ea7263d9..ba620420 100644 --- a/src/features/Register/Steps/Subscriptions/index.tsx +++ b/src/features/Register/Steps/Subscriptions/index.tsx @@ -1,13 +1,11 @@ import React, { Fragment } from 'react' -import { Checkbox } from 'features/Common/Checkbox' import { ButtonSolid } from 'features/Common/Button' import { ArrowLeft, ArrowRight } from 'features/Common/Arrows' import { ButtonsBlock } from 'features/Login/styled' -import { Price } from 'features/Register/Price' - -import { Subscription } from './Subscription' +import { MainSubscription } from 'features/Register/MainSubscription' +import { AdditionalSubscription } from 'features/Register/AdditionalSubscription' import { SubscriptionsBlock, @@ -16,9 +14,6 @@ import { SubscriptionList, SubscriptionListItem, PricesBlock, - PriceItemTitle, - PriceItem, - PriceItemCol, TotalInfoBlock, TotalInfoText, TotalPriceAmmount, @@ -31,10 +26,10 @@ export const SubscriptionStep = () => ( Выбор подписки - + - + @@ -42,42 +37,10 @@ export const SubscriptionStep = () => ( Дополнительно - - - - - - Российская премьер-лига - - - - - - - - - Primera División - - - - - - - - - Manchester United - - - - - - - - - Василий Березуцкий - - - + + + + diff --git a/src/features/Register/Steps/Subscriptions/stories.tsx b/src/features/Register/Steps/Subscriptions/stories.tsx deleted file mode 100644 index bd09293a..00000000 --- a/src/features/Register/Steps/Subscriptions/stories.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import React from 'react' - -import { Subscription as SubscriptionComponent } from './Subscription' - -export default { - title: 'Subscription', -} - -export const Subscription = () => ( - -) - -export const AdditionalSubscription = () => ( - -) diff --git a/src/features/Register/Steps/Subscriptions/styled.tsx b/src/features/Register/Steps/Subscriptions/styled.tsx index 6776c5ed..ebb1aba6 100644 --- a/src/features/Register/Steps/Subscriptions/styled.tsx +++ b/src/features/Register/Steps/Subscriptions/styled.tsx @@ -43,7 +43,6 @@ export const SubscriptionWrapper = styled.div` ` export const SubscriptionTitle = styled.span` - margin-left: 22px; font-style: normal; font-weight: bold; font-size: 18px; @@ -64,13 +63,6 @@ export const Row = styled.div` bottom: ${({ bottom }) => bottom}px; ` -export const Radio = styled.div` - width: 26px; - height: 26px; - background-image: url(/images/radioChecked.svg); - background-position: center; -` - export const PricesBlock = styled.div` width: 1200px; display: flex; @@ -78,25 +70,6 @@ export const PricesBlock = styled.div` position: relative; ` -export const PriceItem = styled(SubscriptionWrapper)` - height: 176px; - display: flex; - flex-direction: row; - margin: 0; - padding: 24px 25px 40px; -` - -export const PriceItemTitle = styled(SubscriptionTitle)` - margin: 3px 5px 0 0; - line-height: 24px; -` - -export const PriceItemCol = styled.div` - display: flex; - flex-direction: column; - justify-content: space-between; -` - export const TotalInfoBlock = styled.div` width: 201px; position: absolute;