refactor(ott-37): added main and additional subs component

src/features/Common/Radio/index.tsx

@@ -19,7 +19,7 @@ type TCheckbox = Pick<InputHTMLAttributes<HTMLInputElement>, (
 export const Radio = ({
   checked,
   id,
-  label,
+  label = '',
   name,
   onChange,
   value,

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) => (
+  <PriceItem>
+    <PriceItemCol>
+      <Checkbox name='additionalSubscription' id={title} />
+    </PriceItemCol>
+    <PriceItemCol>
+      <PriceItemTitle>{title}</PriceItemTitle>
+      <Price amount={price} />
+    </PriceItemCol>
+  </PriceItem>
+)

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;
+`

src/features/Register/CheckboxSubscription/index.tsx

@@ -1,3 +0,0 @@
-// import React from 'react'
-
-export {}

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) => (
+  <SubscriptionWrapper>
+    <Row>
+      <Radio name='mainSubscription' id={title} />
+      <SubscriptionTitle>{title}</SubscriptionTitle>
+    </Row>
+    <Row left={70} bottom={100}>
+      <Price amount={price} />
+    </Row>
+  </SubscriptionWrapper>
+)

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) => (
   <PriceWrapper>
-    <PriceAmount>1999</PriceAmount>
-    <PriceDetails>₽ / мес</PriceDetails>
+    <PriceAmount>{amount}</PriceAmount>
+    <PriceDetails>{currency} / {perPeriod}</PriceDetails>
   </PriceWrapper>
 )

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;
 `

src/features/Register/Steps/Subscriptions/Subscription.tsx

@@ -1,21 +0,0 @@
-import React from 'react'
-
-import { Price } from '../../Price'
-import {
-  SubscriptionWrapper,
-  Radio,
-  SubscriptionTitle,
-  Row,
-} from './styled'
-
-export const Subscription = () => (
-  <SubscriptionWrapper>
-    <Row>
-      <Radio />
-      <SubscriptionTitle>Бесплатная</SubscriptionTitle>
-    </Row>
-    <Row left={70} bottom={100}>
-      <Price />
-    </Row>
-  </SubscriptionWrapper>
-)

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 = () => (
       <BlockTitle>Выбор подписки</BlockTitle>
       <SubscriptionList>
         <SubscriptionListItem>
-          <Subscription />
+          <MainSubscription title='Бесплатная' price={0} />
         </SubscriptionListItem>
         <SubscriptionListItem>
-          <Subscription />
+          <MainSubscription title='Базовая' price={1999} />
         </SubscriptionListItem>
       </SubscriptionList>
     </SubscriptionsBlock>
@@ -42,42 +37,10 @@ export const SubscriptionStep = () => (
       <AdditionalBlockTitle>Дополнительно</AdditionalBlockTitle>
       <PricesBlock>
         <ArrowLeft />
-        <PriceItem>
-          <PriceItemCol>
-            <Checkbox />
-          </PriceItemCol>
-          <PriceItemCol>
-            <PriceItemTitle>Российская премьер-лига</PriceItemTitle>
-            <Price />
-          </PriceItemCol>
-        </PriceItem>
-        <PriceItem>
-          <PriceItemCol>
-            <Checkbox />
-          </PriceItemCol>
-          <PriceItemCol>
-            <PriceItemTitle>Primera División</PriceItemTitle>
-            <Price />
-          </PriceItemCol>
-        </PriceItem>
-        <PriceItem>
-          <PriceItemCol>
-            <Checkbox />
-          </PriceItemCol>
-          <PriceItemCol>
-            <PriceItemTitle>Manchester United</PriceItemTitle>
-            <Price />
-          </PriceItemCol>
-        </PriceItem>
-        <PriceItem>
-          <PriceItemCol>
-            <Checkbox />
-          </PriceItemCol>
-          <PriceItemCol>
-            <PriceItemTitle>Василий Березуцкий</PriceItemTitle>
-            <Price />
-          </PriceItemCol>
-        </PriceItem>
+        <AdditionalSubscription title='Российская премьер-лига' price={1999} />
+        <AdditionalSubscription title='Primera División' price={1999} />
+        <AdditionalSubscription title='Manchester United' price={999} />
+        <AdditionalSubscription title='Василий Березуцкий' price={299} />
         <ArrowRight />
       </PricesBlock>
     </SubscriptionsBlock>

src/features/Register/Steps/Subscriptions/stories.tsx

@@ -1,15 +0,0 @@
-import React from 'react'
-
-import { Subscription as SubscriptionComponent } from './Subscription'
-
-export default {
-  title: 'Subscription',
-}
-
-export const Subscription = () => (
-  <SubscriptionComponent />
-)
-
-export const AdditionalSubscription = () => (
-  <SubscriptionComponent />
-)

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<TRow>`
   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;