Apply new styles for both Storybook and actual component, per button-…

…div differences
curology · Jul 16, 2020 · d615b7a · d615b7a
1 parent 18030b6
commit d615b7a
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 27 deletions.
diff --git a/src/shared-components/optionButton/__snapshots__/test.tsx.snap b/src/shared-components/optionButton/__snapshots__/test.tsx.snap
@@ -10,6 +10,8 @@ exports[`<OptionButton /> UI snapshots checkbox selected, without custom icon 1`
   transition: box-shadow 200ms;
   padding: 1.5rem;
   margin-bottom: 1rem;
+  width: 100%;
+  text-align: left;
 }
 
 .emotion-8:hover {
@@ -131,6 +133,8 @@ exports[`<OptionButton /> UI snapshots radio unselected, with icon node prop 1`]
   transition: box-shadow 200ms;
   padding: 1.5rem;
   margin-bottom: 1rem;
+  width: 100%;
+  text-align: left;
 }
 
 .emotion-8:hover {

diff --git a/src/shared-components/optionButton/style.ts b/src/shared-components/optionButton/style.ts
@@ -41,6 +41,8 @@ export const ClickableContainer = styled.button<{
   ${({ containerType }) => containerStyles(containerType)};
   padding: ${SPACER.large};
   margin-bottom: ${SPACER.medium};
+  width: 100%;
+  text-align: left;
 
   :focus {
     outline: none;

diff --git a/stories/optionButton/index.tsx b/stories/optionButton/index.tsx
@@ -11,10 +11,13 @@ import { OptionButton, Typography } from 'src/shared-components';
 import { SPACER } from 'src/constants';
 
 import OptionButtonExample from './optionButtonExample';
+import { ExampleContainer } from './style';
 
 const MainContainer = styled.div`
   text-align: left;
+
   > h2 {
+    margin-top: ${SPACER.large};
     margin-bottom: ${SPACER.large};
   }
 `;
@@ -27,7 +30,7 @@ const FlexContainer = styled.div`
 `;
 
 const OptionsContainer = styled.div`
-  > div {
+  > button {
     width: 350px;
   }
 `;
@@ -125,23 +128,33 @@ stories.add(
       <Typography.Heading>With Knobs:</Typography.Heading>
       <FlexContainer>
         <OptionsContainer>
-          <OptionButton
-            text={text('text', 'Helper text')}
-            subtext={text('subtext', 'subtext')}
-            onClick={noop}
-            optionType={select('optionType', ['radio', 'checkbox'], 'checkbox')}
-            buttonType={select('type', ['primary', 'secondary'], 'primary')}
-            selected={boolean('selected', false)}
-          />
-          <OptionButton
-            text={text('text', 'Helper text')}
-            subtext={text('subtext', 'subtext')}
-            onClick={noop}
-            optionType={select('optionType', ['radio', 'checkbox'], 'checkbox')}
-            buttonType={select('type', ['primary', 'secondary'], 'primary')}
-            selected={boolean('selected', false)}
-            icon={<AcneGlyph width={32} height={32} />}
-          />
+          <ExampleContainer>
+            <OptionButton
+              text={text('text', 'Helper text')}
+              subtext={text('subtext', 'subtext')}
+              onClick={noop}
+              optionType={select(
+                'optionType',
+                ['radio', 'checkbox'],
+                'checkbox',
+              )}
+              buttonType={select('type', ['primary', 'secondary'], 'primary')}
+              selected={boolean('selected', false)}
+            />
+            <OptionButton
+              text={text('text', 'Helper text')}
+              subtext={text('subtext', 'subtext')}
+              onClick={noop}
+              optionType={select(
+                'optionType',
+                ['radio', 'checkbox'],
+                'checkbox',
+              )}
+              buttonType={select('type', ['primary', 'secondary'], 'primary')}
+              selected={boolean('selected', false)}
+              icon={<AcneGlyph width={32} height={32} />}
+            />
+          </ExampleContainer>
         </OptionsContainer>
       </FlexContainer>
     </MainContainer>

diff --git a/stories/optionButton/optionButtonExample.tsx b/stories/optionButton/optionButtonExample.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
-import { css } from '@emotion/core';
 import { OptionButton } from 'src/shared-components';
 import PlusIcon from 'src/svgs/icons/plus-icon.svg';
 import MinusIcon from 'src/svgs/icons/minus-icon.svg';
+import { ExampleContainer } from './style';
 
 class OptionButtonExample extends React.Component {
   state = {
@@ -19,13 +19,7 @@ class OptionButtonExample extends React.Component {
     const { active } = this.state;
 
     return (
-      <div
-        css={css`
-          margin: 0 auto;
-          max-width: 350px;
-          padding-top: 40px;
-        `}
-      >
+      <ExampleContainer>
         <OptionButton
           selected={active === 'improving'}
           text="Improving"
@@ -44,7 +38,7 @@ class OptionButtonExample extends React.Component {
           buttonType="primary"
           icon={<MinusIcon />}
         />
-      </div>
+      </ExampleContainer>
     );
   }
 }

diff --git a/stories/optionButton/style.ts b/stories/optionButton/style.ts
@@ -0,0 +1,6 @@
+import styled from '@emotion/styled';
+
+export const ExampleContainer = styled.div`
+  margin: 0 auto;
+  max-width: 350px;
+`;