@pareto-engineering/design-system 2.0.0-alpha.51 → 2.0.0-alpha.54

package/src/stories/c/ContentSlides.stories.jsx

@@ -3,12 +3,12 @@ import * as React from 'react'
 
 import {
   ContentSlides,
-  SiteContextProvider,
+  AppContextProvider,
   Shapes,
   useContentSlides,
   Title,
   Logo,
-  useSite,
+  useApp,
 } from 'ui'
 
 // import Router from 'stories/utils/Router'
@@ -26,15 +26,15 @@ export default {
   decorators:[
     (storyfn) => <Router>{ storyfn() }</Router>,
     (storyfn) => (
-      <SiteContextProvider config={{
-        SITE:{
+      <AppContextProvider config={{
+        APP:{
           NAME     :'name of my site',
           CANONICAL:'https://mysite.com',
         },
       }}
       >
         { storyfn() }
-      </SiteContextProvider>
+      </AppContextProvider>
     ),
   ],
   argTypes:{
@@ -42,9 +42,11 @@ export default {
   },
 }
 
-export const Base = () => {
+const Template = (args) => {
   const Main = () => {
-    const { userTheme } = useSite()
+    const { isSimple, hasBackgroundShape } = args || {}
+    const { userTheme } = useApp()
+    const { isLastStep } = useContentSlides()
 
     const steps = [
       {
@@ -75,13 +77,24 @@ export const Base = () => {
 
     return (
       <div className={`ui-${userTheme}`} style={{ height: '100%' }}>
-        <ContentSlides className="y-background1 b-dark-y" steps={steps}>
+        <ContentSlides className="y-background1 b-dark-y" steps={steps} simple={isSimple}>
+          {!isSimple && (
           <ContentSlides.Sidebar
             header={(
               <Logo color="paragraph" />
             )}
           />
-          <ContentSlides.HorizontalMenu />
+          )}
+          {hasBackgroundShape && (
+          <Shapes
+            className="y-background4 b-light-y"
+            height="65em"
+            verticalAlign="center"
+            horizontalAlign="flex-start"
+            shape="spiral"
+          />
+          )}
+          <ContentSlides.HorizontalMenu hideBackIcon={isLastStep} />
           <main>
             <ContentSlides.Slide
               index={0}
@@ -203,298 +216,15 @@ export const Base = () => {
   )
 }
 
-export const Simple = () => {
-  const steps = [
-    {
-      id      :'welcome',
-      title   :'Welcome',
-      progress:40,
-      location:'welcome',
-    },
-    {
-      id      :'plan',
-      title   :'Choose your plan',
-      progress:60,
-      location:'select-plan',
-    },
-    {
-      id      :'details',
-      title   :'Personal details',
-      progress:70,
-      location:'personal-details',
-    },
-    {
-      id      :'payment',
-      title   :'Payment',
-      progress:90,
-      location:'payment',
-    },
-  ]
-
-  const Main = () => {
-    const { isLastStep } = useContentSlides()
-
-    return (
-      <>
-        <ContentSlides.HorizontalMenu hideBackIcon={isLastStep} />
-        {' '}
-        <main>
-          <ContentSlides.Slide
-            index={0}
-          >
-            <Title
-              heading="Welcome"
-              headingAs="h1"
-              headingClassName="small"
-              subtitle="Welcome to this site. We hope you will have an amazing experience here."
-            />
-            <ContentSlides.Navigator />
-          </ContentSlides.Slide
-      >
-          <ContentSlides.Slide
-            index={1}
-          >
-            <Title
-              heading="Part 2"
-              headingAs="h1"
-              headingClassName="small"
-              subtitle="Welcome to this site. We hope you will have an amazing experience here."
-            />
-            <p>
-              In ut sollicitudin elit. Maecenas tempor ex aliquet enim egestas,
-              non sollicitudin mi tempor. Pellentesque fermentum, massa in cursus faucibus,
-              enim tortor fringilla ligula, sit amet tincidunt neque orci et tellus.
-              Nam dignissim tristique justo. Cras nulla sem, dictum pellentesque libero eget,
-              porta placerat leo.
-              Donec scelerisque enim risus, in pharetra purus fringilla eu.
-              Cras placerat ac enim viverra rhoncus.
-              Cras sagittis euismod orci eget aliquam. Nulla et mi non enim aliquam consequat.
-              Cras volutpat porta convallis. Mauris ullamcorper vitae sapien ac rhoncus.
-              Nullam vel porttitor mi, ut vestibulum arcu.
-              {' '}
-            </p>
-            <p>
-              In ut sollicitudin elit. Maecenas tempor ex aliquet enim egestas,
-              non sollicitudin mi tempor. Pellentesque fermentum, massa in cursus faucibus,
-              enim tortor fringilla ligula, sit amet tincidunt neque orci et tellus.
-              Nam dignissim tristique justo. Cras nulla sem, dictum pellentesque libero eget,
-              porta placerat leo.
-              Donec scelerisque enim risus, in pharetra purus fringilla eu.
-              Cras placerat ac enim viverra rhoncus.
-              Cras sagittis euismod orci eget aliquam. Nulla et mi non enim aliquam consequat.
-              Cras volutpat porta convallis. Mauris ullamcorper vitae sapien ac rhoncus.
-              Nullam vel porttitor mi, ut vestibulum arcu.
-              {' '}
-            </p>
-            <p>
-              In ut sollicitudin elit. Maecenas tempor ex aliquet enim egestas,
-              non sollicitudin mi tempor. Pellentesque fermentum, massa in cursus faucibus,
-              enim tortor fringilla ligula, sit amet tincidunt neque orci et tellus.
-              Nam dignissim tristique justo. Cras nulla sem, dictum pellentesque libero eget,
-              porta placerat leo.
-              Donec scelerisque enim risus, in pharetra purus fringilla eu.
-              Cras placerat ac enim viverra rhoncus.
-              Cras sagittis euismod orci eget aliquam. Nulla et mi non enim aliquam consequat.
-              Cras volutpat porta convallis. Mauris ullamcorper vitae sapien ac rhoncus.
-              Nullam vel porttitor mi, ut vestibulum arcu.
-              {' '}
-            </p>
-            <p>
-              In ut sollicitudin elit. Maecenas tempor ex aliquet enim egestas,
-              non sollicitudin mi tempor. Pellentesque fermentum, massa in cursus faucibus,
-              enim tortor fringilla ligula, sit amet tincidunt neque orci et tellus.
-              Nam dignissim tristique justo. Cras nulla sem, dictum pellentesque libero eget,
-              porta placerat leo.
-              Donec scelerisque enim risus, in pharetra purus fringilla eu.
-              Cras placerat ac enim viverra rhoncus.
-              Cras sagittis euismod orci eget aliquam. Nulla et mi non enim aliquam consequat.
-              Cras volutpat porta convallis. Mauris ullamcorper vitae sapien ac rhoncus.
-              Nullam vel porttitor mi, ut vestibulum arcu.
-              {' '}
-            </p>
+export const Base = Template.bind({})
 
-            <ContentSlides.Navigator />
-          </ContentSlides.Slide>
-          <ContentSlides.Slide
-            index={2}
-          >
-            <Title
-              heading="Part 3"
-              headingAs="h1"
-              headingClassName="small"
-              subtitle="Welcome to this site. We hope you will have an amazing experience here."
-            />
-            <ContentSlides.Navigator />
-          </ContentSlides.Slide>
-          <ContentSlides.Slide
-            index={3}
-          >
-            <Title
-              heading="Part 4"
-              headingAs="h1"
-              headingClassName="small"
-              subtitle="Welcome to this site. We hope you will have an amazing experience here."
-            />
-            <ContentSlides.Navigator />
-          </ContentSlides.Slide>
-        </main>
-      </>
-    )
-  }
-  return (
-    <ContentSlides className="y-background1 b-dark-y" steps={steps} simple>
-      <Main />
-    </ContentSlides>
-  )
+export const Simple = Template.bind({})
+Simple.args = {
+  isSimple:true,
 }
 
-export const WithBackgroundShape = () => {
-  const steps = [
-    {
-      id      :'welcome',
-      title   :'Welcome',
-      progress:40,
-      location:'welcome',
-    },
-    {
-      id      :'plan',
-      title   :'Choose your plan',
-      progress:60,
-      location:'select-plan',
-    },
-    {
-      id      :'details',
-      title   :'Personal details',
-      progress:70,
-      location:'personal-details',
-    },
-    {
-      id      :'payment',
-      title   :'Payment',
-      progress:90,
-      location:'payment',
-    },
-  ]
-
-  const Main = () => {
-    const { isLastStep } = useContentSlides()
-
-    return (
-      <>
-        <ContentSlides.HorizontalMenu hideBackIcon={isLastStep} />
-        {' '}
-        <main>
-          <ContentSlides.Slide
-            index={0}
-          >
-            <Title
-              heading="Welcome"
-              headingAs="h1"
-              headingClassName="small"
-              subtitle="Welcome to this site. We hope you will have an amazing experience here."
-            />
-            <ContentSlides.Navigator />
-          </ContentSlides.Slide
-      >
-          <ContentSlides.Slide
-            index={1}
-          >
-            <Title
-              heading="Part 2"
-              headingAs="h1"
-              headingClassName="small"
-              subtitle="Welcome to this site. We hope you will have an amazing experience here."
-            />
-            <p>
-              In ut sollicitudin elit. Maecenas tempor ex aliquet enim egestas,
-              non sollicitudin mi tempor. Pellentesque fermentum, massa in cursus faucibus,
-              enim tortor fringilla ligula, sit amet tincidunt neque orci et tellus.
-              Nam dignissim tristique justo. Cras nulla sem, dictum pellentesque libero eget,
-              porta placerat leo.
-              Donec scelerisque enim risus, in pharetra purus fringilla eu.
-              Cras placerat ac enim viverra rhoncus.
-              Cras sagittis euismod orci eget aliquam. Nulla et mi non enim aliquam consequat.
-              Cras volutpat porta convallis. Mauris ullamcorper vitae sapien ac rhoncus.
-              Nullam vel porttitor mi, ut vestibulum arcu.
-              {' '}
-            </p>
-            <p>
-              In ut sollicitudin elit. Maecenas tempor ex aliquet enim egestas,
-              non sollicitudin mi tempor. Pellentesque fermentum, massa in cursus faucibus,
-              enim tortor fringilla ligula, sit amet tincidunt neque orci et tellus.
-              Nam dignissim tristique justo. Cras nulla sem, dictum pellentesque libero eget,
-              porta placerat leo.
-              Donec scelerisque enim risus, in pharetra purus fringilla eu.
-              Cras placerat ac enim viverra rhoncus.
-              Cras sagittis euismod orci eget aliquam. Nulla et mi non enim aliquam consequat.
-              Cras volutpat porta convallis. Mauris ullamcorper vitae sapien ac rhoncus.
-              Nullam vel porttitor mi, ut vestibulum arcu.
-              {' '}
-            </p>
-            <p>
-              In ut sollicitudin elit. Maecenas tempor ex aliquet enim egestas,
-              non sollicitudin mi tempor. Pellentesque fermentum, massa in cursus faucibus,
-              enim tortor fringilla ligula, sit amet tincidunt neque orci et tellus.
-              Nam dignissim tristique justo. Cras nulla sem, dictum pellentesque libero eget,
-              porta placerat leo.
-              Donec scelerisque enim risus, in pharetra purus fringilla eu.
-              Cras placerat ac enim viverra rhoncus.
-              Cras sagittis euismod orci eget aliquam. Nulla et mi non enim aliquam consequat.
-              Cras volutpat porta convallis. Mauris ullamcorper vitae sapien ac rhoncus.
-              Nullam vel porttitor mi, ut vestibulum arcu.
-              {' '}
-            </p>
-            <p>
-              In ut sollicitudin elit. Maecenas tempor ex aliquet enim egestas,
-              non sollicitudin mi tempor. Pellentesque fermentum, massa in cursus faucibus,
-              enim tortor fringilla ligula, sit amet tincidunt neque orci et tellus.
-              Nam dignissim tristique justo. Cras nulla sem, dictum pellentesque libero eget,
-              porta placerat leo.
-              Donec scelerisque enim risus, in pharetra purus fringilla eu.
-              Cras placerat ac enim viverra rhoncus.
-              Cras sagittis euismod orci eget aliquam. Nulla et mi non enim aliquam consequat.
-              Cras volutpat porta convallis. Mauris ullamcorper vitae sapien ac rhoncus.
-              Nullam vel porttitor mi, ut vestibulum arcu.
-              {' '}
-            </p>
-
-            <ContentSlides.Navigator />
-          </ContentSlides.Slide>
-          <ContentSlides.Slide
-            index={2}
-          >
-            <Title
-              heading="Part 3"
-              headingAs="h1"
-              headingClassName="small"
-              subtitle="Welcome to this site. We hope you will have an amazing experience here."
-            />
-            <ContentSlides.Navigator />
-          </ContentSlides.Slide>
-          <ContentSlides.Slide
-            index={3}
-          >
-            <Title
-              heading="Part 4"
-              headingAs="h1"
-              headingClassName="small"
-              subtitle="Welcome to this site. We hope you will have an amazing experience here."
-            />
-            <ContentSlides.Navigator />
-          </ContentSlides.Slide>
-        </main>
-      </>
-    )
-  }
-  return (
-    <ContentSlides className="y-background4 b-light-y" steps={steps} simple>
-      <Shapes
-        height="65em"
-        verticalAlign="center"
-        horizontalAlign="flex-start"
-        shape="spiral"
-      />
-      <Main />
-    </ContentSlides>
-  )
+export const WithBackgroundShape = Template.bind({})
+WithBackgroundShape.args = {
+  ...Simple.args,
+  hasBackgroundShape:true,
 }

package/src/stories/f/ChoicesInput.stories.jsx

@@ -26,143 +26,76 @@ export default {
   },
 }
 
-export const Base = () => {
-  const optionsMap = [
-    {
-      value:'red',
-      label:'Color Red',
-    },
-    {
-      value:'blue',
-      label:'Color Blue',
-    },
-    {
-      value:'green',
-      label:'Color Green',
-    },
-  ]
+const Template = (args) => (
+  <>
+    <ChoicesInput {...args} />
+    <FormDebugger />
+  </>
+)
 
-  return (
+export const Base = Template.bind({})
+const optionsMap = [
+  {
+    value:'red',
+    label:'Color Red',
+  },
+  {
+    value:'blue',
+    label:'Color Blue',
+  },
+  {
+    value:'green',
+    label:'Color Green',
+  },
+  {
+    value:'yellow',
+    label:'Color Yellow',
+  },
+  {
+    value:'oarnge',
+    label:'Color Orange',
+  },
+  {
+    value:'violet',
+    label:'Color Violet',
+  },
+  {
+    value:'brown',
+    label:'Color Brown',
+  },
+  {
+    value:'black',
+    label:'Color Black',
+  },
+]
 
-    <>
-      <ChoicesInput id="colors" options={optionsMap} name="color" />
-      <FormDebugger />
-    </>
-  )
+Base.args = {
+  id     :'colors',
+  options:optionsMap,
+  name   :'color',
 }
 
-export const Multiple = () => {
-  const optionsMap = [
-    {
-      value:'red',
-      label:'Color Red',
-    },
-    {
-      value:'blue',
-      label:'Color Blue',
-    },
-    {
-      value:'green',
-      label:'Color Green',
-    },
-  ]
-
-  return (
-    <>
-      <ChoicesInput id="colors" options={optionsMap} name="color" multiple />
-      <FormDebugger />
-    </>
-  )
+export const Multiple = Template.bind({})
+Multiple.args = {
+  ...Base.args,
+  multiple:true,
 }
 
-export const MultipleWithGrid = () => {
-  const optionsMap = [
-    {
-      value:'red',
-      label:'Color Red',
-    },
-    {
-      value:'blue',
-      label:'Color Blue',
-    },
-    {
-      value:'green',
-      label:'Color Green',
-    },
-    {
-      value:'yellow',
-      label:'Color Yellow',
-    },
-    {
-      value:'oarnge',
-      label:'Color Orange',
-    },
-    {
-      value:'violet',
-      label:'Color Violet',
-    },
-    {
-      value:'brown',
-      label:'Color Brown',
-    },
-    {
-      value:'black',
-      label:'Color Black',
-    },
-  ]
-
-  return (
-    <>
-      <ChoicesInput id="colors" options={optionsMap} name="color" multiple gridColumnsDesktop={2} />
-      <FormDebugger />
-    </>
-  )
+export const MultipleWithGrid = Template.bind({})
+MultipleWithGrid.args = {
+  ...Base.args,
+  multiple          :true,
+  gridColumnsDesktop:2,
 }
 
-export const ChoicesWithLabel = () => {
-  const optionsMap = [
-    {
-      value:'triangle',
-      label:'Triangle',
-    },
-    {
-      value:'square',
-      label:'Square',
-    },
-    {
-      value:'rectangle',
-      label:'Rectangle',
-    },
-  ]
-
-  return (
-    <>
-      <ChoicesInput id="shapes" options={optionsMap} name="shape" label="Geometric Shapes" />
-      <FormDebugger />
-    </>
-  )
+export const ChoicesWithLabel = Template.bind({})
+ChoicesWithLabel.args = {
+  ...Base.args,
+  label:'Select color',
 }
 
-export const DisabledChoicesInput = () => {
-  const optionsMap = [
-    {
-      value:'triangle',
-      label:'Triangle',
-    },
-    {
-      value:'square',
-      label:'Square',
-    },
-    {
-      value:'rectangle',
-      label:'Rectangle',
-    },
-  ]
-
-  return (
-    <>
-      <ChoicesInput id="shapes" options={optionsMap} name="shape" label="Geometric Shapes" disabled />
-      <FormDebugger />
-    </>
-  )
+export const DisabledChoicesInput = Template.bind({})
+DisabledChoicesInput.args = {
+  ...ChoicesWithLabel.args,
+  disabled:true,
 }

package/src/stories/f/Description.stories.jsx

@@ -3,6 +3,8 @@ import * as React from 'react'
 
 import { FormDescription as Description } from 'ui'
 
+import { Formik, Form } from 'formik'
+
 export default {
   title        :'f/common/Description',
   component    :Description,
@@ -10,7 +12,15 @@ export default {
     // Item:Description.Item
   },
   decorators:[
-    // storyfn => <div className="">{ storyfn() }</div>,
+    (storyfn) => (
+      <Formik
+        initialValues={{ email: '' }}
+      >
+        <Form>
+          { storyfn() }
+        </Form>
+      </Formik>
+    ),
   ],
   argTypes:{
     backgroundColor:{ control: 'color' },
@@ -18,5 +28,5 @@ export default {
 }
 
 export const Base = () => (
-  <Description>Sample Description</Description>
+  <Description description="Sample Description" name="email" />
 )

package/src/stories/f/RatingsInput.stories.jsx

@@ -27,31 +27,30 @@ export default {
   },
 }
 
-export const Base = () => (
+const Template = (args) => (
   <>
-    <RatingsInput ratingCount={5} name="ratings" label="Your Rating" />
+    <RatingsInput {...args} />
     <FormDebugger />
   </>
 )
 
-export const Numbers = () => (
-  <>
-    <RatingsInput ratingCount={10} name="ratings" showRatingValue label="Your Rating" />
-    <FormDebugger />
-  </>
-)
+export const Base = Template.bind({})
+Base.args = {
+  ratingCount:5,
+  name       :'ratings',
+  label      :'Your Rating',
+}
 
-export const Labels = () => (
-  <>
-    <RatingsInput
-      label="Your Rating"
-      labelMax="very satisfied."
-      labelMin="not satisfied."
-      ratingCount={10}
-      name="ratings"
-      showRatingValue
-      displayRatingsLabel
-    />
-    <FormDebugger />
-  </>
-)
+export const Numbers = Template.bind({})
+Numbers.args = {
+  ...Base.args,
+  showRatingValue:true,
+}
+
+export const Labels = Template.bind({})
+Labels.args = {
+  ...Numbers.args,
+  labelMax           :'very satisfied.',
+  labelMin           :'not satisfied.',
+  displayRatingsLabel:true,
+}