Added storybook stories (#29)

* Added carousel stories

* Added many stories

* Added knobs

* fixed lock file

Co-authored-by: Mark Brocato <[email protected]>

.storybook/main.js

@@ -0,0 +1,3 @@
+module.exports = {
+  addons: ['@storybook/addon-knobs/register'],
+}

.storybook/stories/Accordion.stories.js

@@ -0,0 +1,19 @@
+import React from 'react'
+import ExpandableSection from '../../src/ExpandableSection'
+import Accordion from '../../src/Accordion'
+
+export default { title: 'Accordion' }
+
+export const defaults = () => (
+  <Accordion>
+    <ExpandableSection title="First">
+      <div>The first section</div>
+    </ExpandableSection>
+    <ExpandableSection title="Second">
+      <div>The second section</div>
+    </ExpandableSection>
+    <ExpandableSection title="Third">
+      <div>The third section</div>
+    </ExpandableSection>
+  </Accordion>
+)

.storybook/stories/ActionButton.stories.js

@@ -0,0 +1,9 @@
+import React from 'react'
+import { withKnobs, text, boolean, number } from '@storybook/addon-knobs'
+import ActionButton from '../../src/ActionButton'
+
+export default { title: 'ActionButton', decorators: [withKnobs] }
+
+export const options = () => (
+  <ActionButton label={text('Label', 'Sort')} value={text('Value', 'Lowest Price')} />
+)

.storybook/stories/AutoScrollToNewChildren.stories.js

@@ -0,0 +1,31 @@
+import React, { useState } from 'react'
+import AutoScrollToNewChildren from '../../src/AutoScrollToNewChildren'
+
+export default { title: 'AutoScrollToNewChildren' }
+
+const styles = {
+  background: '#7f8fa6',
+  color: '#f5f6fa',
+  fontSize: 30,
+  fontFamily: 'monospace',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  height: 700,
+  marginBottom: 5,
+}
+
+export const defaults = () => {
+  const [count, setCount] = useState(1)
+  return (
+    <AutoScrollToNewChildren>
+      {Array(count)
+        .fill(0)
+        .map((e, i) => (
+          <div onClick={() => setCount(count + 1)} style={styles}>
+            Click Me ({i})
+          </div>
+        ))}
+    </AutoScrollToNewChildren>
+  )
+}

.storybook/stories/BackToTop.stories.js

@@ -0,0 +1,33 @@
+import React from 'react'
+import { Pets } from '@material-ui/icons'
+import { withKnobs, select } from '@storybook/addon-knobs'
+import BackToTop from '../../src/BackToTop'
+
+export default { title: 'BackToTop', decorators: [withKnobs] }
+
+const styles = {
+  background: '#7f8fa6',
+  color: '#f5f6fa',
+  fontSize: 30,
+  fontFamily: 'monospace',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  height: 1500,
+}
+
+export const sizes = () => (
+  <div>
+    <div style={styles}>Please scroll down</div>
+    <BackToTop
+      size={select('Size', { small: 'small', medium: 'medium', large: 'large' }, 'medium')}
+    />
+  </div>
+)
+
+export const customIcon = () => (
+  <div>
+    <div style={styles}>Please scroll down</div>
+    <BackToTop Icon={Pets} />
+  </div>
+)

.storybook/stories/Breadcrumbs.stories.js

@@ -0,0 +1,15 @@
+import React from 'react'
+import Breadcrumbs from '../../src/Breadcrumbs'
+
+export default { title: 'Breadcrumbs' }
+
+export const defaults = () => (
+  <Breadcrumbs
+    items={[
+      { text: 'one', href: '/one' },
+      { text: 'two', href: '/two' },
+      { text: 'three', href: '/three' },
+      { text: 'four', href: '/four' },
+    ]}
+  />
+)

.storybook/stories/Carousel.stories.js

@@ -0,0 +1,33 @@
+import React from 'react'
+import { withKnobs, boolean, number, select } from '@storybook/addon-knobs'
+import Carousel from '../../src/carousel/Carousel'
+
+export default { title: 'Carousel', decorators: [withKnobs] }
+
+const slideStyle = {
+  width: '100%',
+  height: 300,
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  fontFamily: 'monospace',
+  fontSize: 32,
+  color: 'white',
+}
+
+const slides = [
+  <div style={{ ...slideStyle, background: '#eb3b5a' }}>Red</div>,
+  <div style={{ ...slideStyle, background: '#2d98da' }}>Blue</div>,
+  <div style={{ ...slideStyle, background: '#26de81' }}>Green</div>,
+]
+
+export const options = () => (
+  <Carousel
+    indicators={boolean('Indicators', true)}
+    autoplay={boolean('Autoplay')}
+    interval={number('Interval', 1000)}
+    arrows={select('Arrows', { None: false, Desktop: 'desktop', All: 'all' }, 'all')}
+  >
+    {slides}
+  </Carousel>
+)

.storybook/stories/CartButton.stories.js

@@ -0,0 +1,6 @@
+import React from 'react'
+import CartButton from '../../src/CartButton'
+
+export default { title: 'CartButton' }
+
+export const defaults = () => <CartButton href="/cart" quantity={1} />

.storybook/stories/CheckboxFilterGroup.stories.js

@@ -0,0 +1,13 @@
+import React from 'react'
+import CheckboxFilterGroup from '../../src/plp/CheckboxFilterGroup'
+import SearchResultsContext from '../../src/plp/SearchResultsContext'
+
+export default { title: 'CheckboxFilterGroup' }
+
+export const defaults = () => (
+  <SearchResultsContext.Provider value={{ pageData: { filters: [] }, actions: {} }}>
+    <CheckboxFilterGroup group={{ options: [{ name: 'red', matches: 2 }] }} />
+    <CheckboxFilterGroup group={{ options: [{ name: 'blue', matches: 1 }] }} />
+    <CheckboxFilterGroup group={{ options: [{ name: 'green', matches: 3 }] }} />
+  </SearchResultsContext.Provider>
+)

.storybook/stories/ExpandableSection.stories.js

@@ -1,17 +1,16 @@
 import React from 'react'
+import { withKnobs, text, boolean } from '@storybook/addon-knobs'
 import ExpandableSection from '../../src/ExpandableSection'
 import { Typography } from '@material-ui/core'
 
-export default { title: 'ExpandableSection' }
+export default { title: 'ExpandableSection', decorators: [withKnobs] }
 
-export const collapsed = () => (
-  <ExpandableSection title="Help" caption="Click here for more info">
-    <Typography>This is a help section</Typography>
-  </ExpandableSection>
-)
-
-export const expanded = () => (
-  <ExpandableSection title="Help" caption="Click here for more info" expanded={true}>
-    <Typography>This is a help section</Typography>
+export const options = () => (
+  <ExpandableSection
+    title={text('Title', 'Help')}
+    caption={text('Caption', 'Click here for more info')}
+    expanded={boolean('Expanded', true)}
+  >
+    <Typography>{text('Content', 'This is a help section')}</Typography>
   </ExpandableSection>
 )

.storybook/stories/Image.stories.js

@@ -0,0 +1,30 @@
+import React from 'react'
+import Image from '../../src/Image'
+
+export default { title: 'Image' }
+
+const styles = {
+  display: 'flex',
+  justifyContent: 'center',
+  marginTop: 500,
+}
+
+export const lazy = () => (
+  <div style={{ fontSize: 30, textAlign: 'center' }}>
+    Please scroll down
+    <div>
+      <div style={styles}>
+        <Image src="//placehold.it/300?text=1" lazy />
+      </div>
+      <div style={styles}>
+        <Image src="//placehold.it/300?text=2" lazy />
+      </div>
+      <div style={styles}>
+        <Image src="//placehold.it/300?text=3" lazy />
+      </div>
+      <div style={styles}>
+        <Image src="//placehold.it/300?text=4" lazy />
+      </div>
+    </div>
+  </div>
+)

.storybook/stories/Lazy.stories.js

@@ -0,0 +1,36 @@
+import React from 'react'
+import Lazy from '../../src/Lazy'
+import PWAContext from '../../src/PWAContext'
+
+export default { title: 'Lazy' }
+
+const styles = {
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  marginTop: 200,
+  background: '#7f8fa6',
+  height: 500,
+}
+
+export const lazy = () => (
+  <PWAContext.Provider value={{}}>
+    <div style={{ fontSize: 30, textAlign: 'center' }}>
+      Please scroll down
+      <div>
+        <Lazy>
+          <div style={styles}>Hello</div>
+        </Lazy>
+        <Lazy>
+          <div style={styles}>Hello</div>
+        </Lazy>
+        <Lazy>
+          <div style={styles}>Hello</div>
+        </Lazy>
+        <Lazy>
+          <div style={styles}>Hello</div>
+        </Lazy>
+      </div>
+    </div>
+  </PWAContext.Provider>
+)

.storybook/stories/MediaCarousel.stories.js

@@ -0,0 +1,64 @@
+import React from 'react'
+import { createMuiTheme, MuiThemeProvider } from '@material-ui/core/styles'
+import MediaCarousel from '../../src/carousel/MediaCarousel'
+
+export default { title: 'MediaCarousel' }
+
+const theme = createMuiTheme({
+  margins: {
+    container: 16,
+  },
+})
+
+const media = {
+  full: [
+    { src: '//placehold.it/400?text=1', alt: 'One', type: 'image' },
+    { src: '//placehold.it/400?text=2', alt: 'Two', type: 'image' },
+    { src: '//placehold.it/400?text=3', alt: 'Three', type: 'image' },
+  ],
+  thumbnails: [
+    { src: '//placehold.it/200?text=1', alt: 'One', type: 'image' },
+    { src: '//placehold.it/200?text=2', alt: 'Two', type: 'image' },
+    { src: '//placehold.it/200?text=3', alt: 'Three', type: 'image' },
+  ],
+  thumbnail: {
+    src: '//placehold.it/200?text=1',
+    alt: 'One',
+  },
+}
+
+const slideStyle = {
+  width: '100%',
+  height: 300,
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  fontFamily: 'monospace',
+  fontSize: 32,
+  color: 'white',
+  background: 'grey',
+}
+
+const Test = props => {
+  return (
+    <MuiThemeProvider theme={theme}>
+      <MediaCarousel media={media} {...props} />
+    </MuiThemeProvider>
+  )
+}
+
+export const defaults = () => <Test />
+
+export const customMediaComponent = () => (
+  <Test MediaComponent={({ src }) => <div style={{ ...slideStyle }}>{src}</div>} />
+)
+
+export const customThumbnailsComponent = () => (
+  <Test
+    CarouselThumbnailsComponent={({ selected }) => {
+      return <div style={{ ...slideStyle }}>{selected}</div>
+    }}
+  />
+)
+
+export const noThumbnails = () => <Test thumbnails={false} />

.storybook/stories/NavTabs.stories.js

@@ -0,0 +1,13 @@
+import React from 'react'
+import NavTab from '../../src/nav/NavTab'
+
+export default { title: 'NavTabs' }
+
+export const defaults = () => (
+  <div>
+    <NavTab href="/c/[categoryId]" as="/c/shirts" label="Shirts"></NavTab>
+    <NavTab href="/c/[categoryId]" as="/c/pants" label="Pants"></NavTab>
+    <NavTab href="/c/[categoryId]" as="/c/socks" label="Socks"></NavTab>
+    <NavTab href="/c/[categoryId]" as="/c/jackets" label="Jackets"></NavTab>
+  </div>
+)

.storybook/stories/Offline.stories.js

@@ -0,0 +1,14 @@
+import React from 'react'
+import { Pets } from '@material-ui/icons'
+import { withKnobs, text } from '@storybook/addon-knobs'
+import Offline from '../../src/Offline'
+
+export default { title: 'Offline', decorators: [withKnobs] }
+
+export const options = () => (
+  <Offline
+    heading={text('Heading', 'This is a heading')}
+    message={text('Message', 'This is a message')}
+  />
+)
+export const customIcon = () => <Offline Icon={Pets} />

.storybook/stories/ProductOptionSelector.stories.js

@@ -1,5 +1,6 @@
 import React, { useState } from 'react'
 import ProductOptionSelector from '../../src/option/ProductOptionSelector'
+import SwatchProductOption from '../../src/option/SwatchProductOption'
 
 export default { title: 'ProductOptionSelector' }
 
@@ -38,10 +39,23 @@ const colors = [
   },
 ]
 
-export const basic = () => {
+export const swatch = () => {
   const [color, setColor] = useState(colors[0])
 
   return (
     <ProductOptionSelector options={colors} value={color} onChange={color => setColor(color)} />
   )
 }
+
+export const text = () => {
+  const [color, setColor] = useState(colors[0])
+
+  return (
+    <ProductOptionSelector
+      options={colors}
+      value={color}
+      onChange={color => setColor(color)}
+      variant="text"
+    />
+  )
+}