TokenPairSelector storybook

src/components/OrderForm/index.tsx

@@ -12,9 +12,10 @@ const Wrapper = styled.div`
   height: 100%;
   border-right: 0.1rem solid var(--color-border);
 `
+
 export const OrderForm: React.FC = () => (
   <Wrapper>
-    <TokenPairSelector />
+    <TokenPairSelector selectedPair="ETH/USDC" selectLabel="Select Pair" />
   </Wrapper>
 )
 

src/components/TokenPairSelector/TokenPairSelector.stories.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+
+// also exported from '@storybook/react' if you can deal with breaking changes in 6.1
+import { Meta } from '@storybook/react/types-6-0'
+
+import GlobalStyles from 'components/layout/GenericLayout/GlobalStyles'
+import { RouterDecorator } from 'storybook/RouterDecorator'
+import { TokenPairSelector } from 'components/TokenPairSelector'
+
+export default {
+  title: 'component/TokenPairSelector',
+  component: TokenPairSelector,
+  decorators: [RouterDecorator],
+} as Meta
+
+export const Normal: React.FC = () => (
+  <div>
+    <GlobalStyles />
+    <TokenPairSelector selectedPair="ETH/USDC" selectLabel="Select Pair" />
+  </div>
+)

src/components/TokenPairSelector/index.tsx

@@ -1,67 +1,18 @@
 import React from 'react'
-import styled from 'styled-components'
 
+import { TokenPairSelectorStyled as Wrapper } from './tokenPairSelector.styled'
 import { TokenPairSelectorList } from 'components/TokenPairSelectorList'
 
-import ArrowWhite from 'assets/img/arrow-white.svg'
+type selectorProps = {
+  selectedPair: string
+  selectLabel: string
+}
 
-const Wrapper = styled.div`
-  display: flex;
-  width: 100%;
-
-  > button {
-    width: 100%;
-    height: var(--height-bar-default);
-    background: var(--color-primary);
-    color: var(--color-text-secondary1);
-    appearance: none;
-    border: 0;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 0 1.6rem;
-    box-sizing: border-box;
-    border-bottom: 0.1rem solid var(--color-border);
-    outline: 0;
-    cursor: pointer;
-    transition: color 0.3s ease-in-out;
-
-    &:hover {
-      color: var(--color-text-primary);
-    }
-  }
-
-  > button > b {
-    font-size: 1.5rem;
-    letter-spacing: 0.03rem;
-  }
-
-  > button > i {
-    font-size: 1.2rem;
-    font-style: normal;
-    display: flex;
-    flex-flow: row nowrap;
-    justify-content: center;
-    align-items: center;
-    font-weight: var(--font-weight-medium);
-
-    &::after {
-      display: block;
-      height: 1.2rem;
-      width: 1.2rem;
-      content: '';
-      background: url(${ArrowWhite}) no-repeat center/contain;
-      transform: rotate(90deg);
-      margin: 0 0 0 0.7rem;
-    }
-  }
-`
-
-export const TokenPairSelector: React.FC = () => (
+export const TokenPairSelector: React.FC<selectorProps> = ({ selectedPair, selectLabel }) => (
   <Wrapper>
     <button>
-      <b>ETH/USDC</b>
-      <i>Select Pair</i>
+      <b>{selectedPair}</b>
+      <i>{selectLabel}</i>
       <TokenPairSelectorList />
     </button>
   </Wrapper>

src/components/TokenPairSelector/tokenPairSelector.styled.ts

@@ -0,0 +1,54 @@
+import styled from 'styled-components'
+import ArrowWhite from 'assets/img/arrow-white.svg'
+
+export const TokenPairSelectorStyled = styled.div`
+  display: flex;
+  width: 100%;
+
+  > button {
+    width: 100%;
+    height: var(--height-bar-default);
+    background: var(--color-primary);
+    color: var(--color-text-secondary1);
+    appearance: none;
+    border: 0;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 1.6rem;
+    box-sizing: border-box;
+    border-bottom: 0.1rem solid var(--color-border);
+    outline: 0;
+    cursor: pointer;
+    transition: color 0.3s ease-in-out;
+
+    &:hover {
+      color: var(--color-text-primary);
+    }
+  }
+
+  > button > b {
+    font-size: 1.5rem;
+    letter-spacing: 0.03rem;
+  }
+
+  > button > i {
+    font-size: 1.2rem;
+    font-style: normal;
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: center;
+    align-items: center;
+    font-weight: var(--font-weight-medium);
+
+    &::after {
+      display: block;
+      height: 1.2rem;
+      width: 1.2rem;
+      content: '';
+      background: url(${ArrowWhite}) no-repeat center/contain;
+      transform: rotate(90deg);
+      margin: 0 0 0 0.7rem;
+    }
+  }
+`