feat(recurring buy): design updates, adding more components to storybook

packages/blockchain-info-components/index.d.ts

@@ -16,6 +16,7 @@ import { Props as FlyoutHeaderPropsType } from './src/Flyouts/Header'
 import { Props as AmountSubHeaderPropsType } from './src/Flyouts/AmountSubHeader'
 import { Props as FlyoutFooterPropsType } from './src/Flyouts/'
 import { Props as CheckoutRowPropsType } from './src/Rows/CheckoutRow'
+import { Props as OptionRightActionRowType } from './src/Rows/OptionRightAction'
 
 type AllCoinsType = WalletCurrencyType | 'STX'
 
@@ -28,6 +29,7 @@ export const FlyoutHeader: FunctionComponent<FlyoutHeaderPropsType>
 export const AmountSubHeader: FunctionComponent<AmountSubHeaderPropsType>
 export const FlyoutFooter: FunctionComponent<FlyoutFooterPropsType>
 export const CheckoutRow: FunctionComponent<CheckoutRowPropsType>
+export const OptionRightActionRow: FunctionComponent<OptionRightActionRowType>
 export const BlockchainLoader: FunctionComponent<{
   width?: string
   height?: string

packages/blockchain-info-components/src/Rows/OptionRightAction.tsx

@@ -0,0 +1,45 @@
+import React, { memo } from 'react'
+import styled from 'styled-components'
+
+import { Icon } from '../Icons'
+
+const Row = styled.div`
+  padding: 16px 40px;
+  box-sizing: border-box;
+  border-top: 1px solid ${(props) => props.theme.grey000};
+  &:last-child {
+    border-bottom: 1px solid ${(props) => props.theme.grey000};
+  }
+`
+const FlexWrapper = styled(Row)`
+  display: flex;
+  flex: 1;
+  justify-content: space-between;
+  align-items: center;
+  padding-top: 0;
+  padding-bottom: 0;
+  cursor: pointer;
+
+  & > div {
+    height: 5rem;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+`
+
+const OptionRightActionRow = ({ children, onClick }: Props) => {
+  return (
+    <FlexWrapper role='button' onClick={onClick}>
+      <div>{children}</div>
+      <Icon name='chevron-right' size='25px' color='grey400' />
+    </FlexWrapper>
+  )
+}
+
+type Props = {
+  children: React.ReactChild
+  onClick: () => void
+}
+
+export default OptionRightActionRow

packages/blockchain-info-components/src/index.js

@@ -39,6 +39,7 @@ export { TabMenu, TabMenuItem } from './Menus'
 export { Modal, ModalBody, ModalFooter, ModalHeader } from './Modals'
 export { Pagination, PaginationItem } from './Paginations'
 export { default as CheckoutRow } from './Rows/CheckoutRow'
+export { default as OptionRightActionRow } from './Rows/OptionRightAction'
 export { Separator } from './Separators'
 export { SkeletonCircle, SkeletonRectangle } from './Skeletons'
 export { SimpleSlider } from './Sliders'

packages/blockchain-info-components/stories/chapters/flyoutAmountSubHeader.stories.tsx

@@ -5,11 +5,13 @@ import { AmountSubHeader } from '../../src'
 export default {
   title: 'Flyouts/AmountSubHeader',
   component: AmountSubHeader,
-  args: {
-    'data-e2e': 'foooo',
-    title: '10.0000 BTC',
-    subTitle: '$100'
-  },
 }
 
-export const Default = (args) => <AmountSubHeader {...args} />
+const Template = (args) => <AmountSubHeader {...args} />
+
+export const Default = Template.bind({})
+Default.args = {
+  'data-e2e': 'foooo',
+  title: '10.0000 BTC',
+  subTitle: '$100'
+}

packages/blockchain-info-components/stories/chapters/flyoutCheckoutConfirm.stories.tsx

@@ -0,0 +1,74 @@
+import React from 'react'
+
+import {
+  FlyoutContainer,
+  FlyoutContent,
+  FlyoutFooter,
+  FlyoutHeader,
+  AmountSubHeader,
+  Button,
+  CheckoutRow,
+  Text,
+  TextGroup,
+  Link
+} from '../../src'
+
+export default {
+  title: 'Flyouts/CheckoutConfirm',
+  args: {
+    'data-e2e': 'foooo',
+    title: '10.0000 BTC',
+    subTitle: '$100'
+  },
+}
+
+export const Default = (args) => (
+  <FlyoutContainer>
+    <FlyoutHeader
+      data-e2e="foooo"
+      mode="back"
+      onClick={() => {}}
+    >
+      Buy Bitcoin
+    </FlyoutHeader>
+    <FlyoutContent mode='top'>
+      <AmountSubHeader {...args} />
+      <CheckoutRow
+        title={'Exchange Rate'}
+        text={'$30,000 / BTC'}
+        toolTip={(
+          <>Blockchain.com provides the best market price we receive and applies a spread.</>
+        )}
+      />
+      <CheckoutRow
+        title={'Exchange Rate'}
+        text={'$30,000 / BTC'}
+        toolTip={(
+          <>Blockchain.com provides the best market price we receive and applies a spread.</>
+        )}
+      />
+      <CheckoutRow
+        title={'Exchange Rate'}
+        text={'$30,000 / BTC'}
+        toolTip={(
+          <>Blockchain.com provides the best market price we receive and applies a spread.</>
+        )}
+      />
+      <CheckoutRow
+        title={'Exchange Rate'}
+        text={'$30,000 / BTC'}
+        toolTip={(
+          <>Blockchain.com provides the best market price we receive and applies a spread.</>
+        )}
+      />
+    </FlyoutContent>
+    <FlyoutFooter>
+      <Button
+        fullwidth
+        nature="primary"
+      >
+        Continue
+      </Button>
+    </FlyoutFooter>
+  </FlyoutContainer>
+)

packages/blockchain-info-components/stories/chapters/flyoutFrequencySelection.stories.tsx

@@ -0,0 +1,58 @@
+import React from 'react'
+
+import {
+  FlyoutContainer,
+  FlyoutContent,
+  FlyoutHeader,
+  Text,
+  OptionRightActionRow
+} from '../../src'
+
+export default {
+  title: 'Flyouts/FrequencySelection',
+}
+
+export const Default = (args) => (
+  <FlyoutContainer>
+    <FlyoutHeader data-e2e='fooooooo' mode='back' onClick={close}>
+      Buy $100 of BTC
+    </FlyoutHeader>
+    <FlyoutContent mode='top'>
+      <OptionRightActionRow onClick={() => {}}>
+        <Text weight={600} size='16px' color='grey900'>
+          Daily
+        </Text>
+      </OptionRightActionRow>
+      <OptionRightActionRow onClick={() => {}}>
+        <>
+          <Text weight={600} size='16px' color='grey900'>
+            Weekly
+          </Text>
+          <Text weight={500} size='14px' color='grey600'>
+            On Mondays
+          </Text>
+        </>
+      </OptionRightActionRow>
+      <OptionRightActionRow onClick={() => {}}>
+        <>
+          <Text weight={600} size='16px' color='grey900'>
+            Monthly
+          </Text>
+          <Text weight={500} size='14px' color='grey600'>
+            On the 14th
+          </Text>
+        </>
+      </OptionRightActionRow>
+      <OptionRightActionRow onClick={() => {}}>
+        <>
+          <Text weight={600} size='16px' color='grey900'>
+            Twice a Month
+          </Text>
+          <Text weight={500} size='14px' color='grey600'>
+            On the 14th and 28th
+          </Text>
+        </>
+      </OptionRightActionRow>
+    </FlyoutContent>
+  </FlyoutContainer>
+)

packages/blockchain-info-components/stories/chapters/optionRightActionRow.stories.tsx

@@ -0,0 +1,22 @@
+import React from 'react'
+
+import { OptionRightActionRow, Text } from '../../src'
+
+export default {
+  title: 'Rows/OptionRightActionRow',
+  component: OptionRightActionRow,
+}
+
+export const Default = (args) => (
+  <OptionRightActionRow {...args}>
+    <>
+      <Text weight={600} size='16px' color='grey900'>
+        Daily
+      </Text>
+      <Text weight={500} size='14px' color='grey600'>
+        at 9am
+      </Text>
+    </>
+  </OptionRightActionRow>
+)
+

packages/blockchain-wallet-v4-frontend/src/modals/RecurringBuys/Frequency/index.tsx

@@ -3,15 +3,21 @@ import { FormattedMessage } from 'react-intl'
 import { connect, ConnectedProps } from 'react-redux'
 import { bindActionCreators, Dispatch } from 'redux'
 
-import { FlyoutHeader, Text } from 'blockchain-info-components'
+import {
+  FlyoutContainer,
+  FlyoutContent,
+  FlyoutHeader,
+  OptionRightActionRow,
+  Text
+} from 'blockchain-info-components'
 import { SBOrderType } from 'core/types'
 import { actions, selectors } from 'data'
 import { getBaseAmount } from 'data/components/simpleBuy/model'
 import { RootState } from 'data/rootReducer'
 import { RecurringBuyPeriods, RecurringBuyStepType } from 'data/types'
 
 import { Props as _P } from '..'
-import { getPeriodSubTitleText, getPeriodTitleText, OptionRightActionRow } from './model'
+import { getPeriodSubTitleText, getPeriodTitleText } from './model'
 
 const Frequency = ({ close, order, recurringBuyActions }: Props) => {
   const amount = getBaseAmount(order)
@@ -26,27 +32,29 @@ const Frequency = ({ close, order, recurringBuyActions }: Props) => {
   }
 
   return (
-    <>
+    <FlyoutContainer>
       <FlyoutHeader data-e2e='closeRecurringBuyModalFrequencyStep' mode='back' onClick={close}>
         <FormattedMessage
           id='modals.recurringbuys.get_started.buy_amount_of_currency'
           defaultMessage='Buy {amount} of {currency}'
           values={{ amount, currency }}
         />
       </FlyoutHeader>
-      {periods.map((period) => (
-        <OptionRightActionRow key={period} onClick={setPeriod(period)}>
-          <>
-            <Text weight={600} size='16px' color='grey900'>
-              {getPeriodTitleText(period)}
-            </Text>
-            <Text weight={500} size='14px' color='grey600'>
-              {getPeriodSubTitleText(period)}
-            </Text>
-          </>
-        </OptionRightActionRow>
-      ))}
-    </>
+      <FlyoutContent mode='top'>
+        {periods.map((period) => (
+          <OptionRightActionRow key={period} onClick={setPeriod(period)}>
+            <>
+              <Text weight={600} size='16px' color='grey900'>
+                {getPeriodTitleText(period)}
+              </Text>
+              <Text weight={500} size='14px' color='grey600'>
+                {getPeriodSubTitleText(period)}
+              </Text>
+            </>
+          </OptionRightActionRow>
+        ))}
+      </FlyoutContent>
+    </FlyoutContainer>
   )
 }
 

packages/blockchain-wallet-v4-frontend/src/modals/RecurringBuys/Frequency/model.tsx

@@ -62,28 +62,4 @@ const getPeriodSubTitleText = (period: RecurringBuyPeriods): React.ReactNode =>
   return text
 }
 
-const FlexWrapper = styled(Row)`
-  display: flex;
-  flex: 1;
-  justify-content: space-between;
-  align-items: center;
-  vertical-align: center;
-  padding-top: 0;
-  padding-bottom: 0;
-  height: 80px;
-  cursor: pointer;
-`
-type OptionRightActionRowType = {
-  children: React.ReactChild
-  onClick: () => void
-}
-const OptionRightActionRow = ({ children, onClick }: OptionRightActionRowType) => {
-  return (
-    <FlexWrapper role='button' onClick={onClick}>
-      <div>{children}</div>
-      <Icon name='chevron-right' size='25px' color='grey400' />
-    </FlexWrapper>
-  )
-}
-
-export { getPeriodSubTitleText, getPeriodTitleText, OptionRightActionRow }
+export { getPeriodSubTitleText, getPeriodTitleText }