@pareto-engineering/design-system 2.0.0-alpha.53 → 2.0.0-alpha.56

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

@@ -38,13 +38,17 @@ export default {
     ),
   ],
   argTypes:{
-    backgroundColor:{ control: 'color' },
+    // backgroundColor:{ control: 'color' },
+    isSimple          :{ control: 'boolean' },
+    hasBackgroundShape:{ control: 'boolean' },
   },
 }
 
-export const Base = () => {
+const Template = (args) => {
   const Main = () => {
+    const { isSimple, hasBackgroundShape } = args || {}
     const { userTheme } = useApp()
+    const { isLastStep } = useContentSlides()
 
     const steps = [
       {
@@ -75,13 +79,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 +218,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/c/Shortener.stories.jsx

@@ -13,16 +13,22 @@ export default {
     // storyfn => <div className="">{ storyfn() }</div>,
   ],
   argTypes:{
-    backgroundColor:{ control: 'color' },
+    // backgroundColor:{ control: 'color' },
+    // limit:{ control: 'number' },
   },
 }
 
-export const Base = () => (
+const Template = (args) => (
   <Shortener
-    limit={10}
     style={{ maxWidth: '300px' }}
+    {...args}
   >
     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
     incididunt ut labore et dolore magna aliqua.
   </Shortener>
 )
+
+export const Base = Template.bind({})
+Base.args = {
+  limit:10,
+}

package/src/stories/c/SocialMediaShareButton.stories.jsx

@@ -13,13 +13,21 @@ export default {
     (storyfn) => <Router>{storyfn()}</Router>,
   ],
   argTypes:{
-    backgroundColor:{ control: 'color' },
+    // backgroundColor:{ control: 'color' },
+    type:{ control: 'select', options: ['twitter', 'facebook'] },
   },
 }
 
-export const Base = () => (
-  <div>
-    <SocialMediaShareButton type="facebook" />
-    <SocialMediaShareButton type="twitter" />
-  </div>
+const Template = (args) => (
+  <SocialMediaShareButton {...args} />
 )
+
+export const Facebook = Template.bind({})
+Facebook.args = {
+  type:'facebook',
+}
+
+export const Twitter = Template.bind({})
+Twitter.args = {
+  type:'twitter',
+}

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

@@ -22,147 +22,83 @@ export default {
     ),
   ],
   argTypes:{
-    backgroundColor:{ control: 'color' },
+    // backgroundColor:{ control: 'color' },
+    multiple          :{ control: 'boolean' },
+    gridColumnsDesktop:{ control: 'number' },
+    disabled          :{ control: 'boolean' },
   },
 }
 
-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,13 +12,29 @@ export default {
     // Item:Description.Item
   },
   decorators:[
-    // storyfn => <div className="">{ storyfn() }</div>,
+    (storyfn) => (
+      <Formik
+        initialValues={{ email: '' }}
+      >
+        <Form>
+          { storyfn() }
+        </Form>
+      </Formik>
+    ),
   ],
   argTypes:{
-    backgroundColor:{ control: 'color' },
+    // backgroundColor:{ control: 'color' },
+    description:{ control: 'text' },
+    name       :{ control: 'text' },
   },
 }
 
-export const Base = () => (
-  <Description>Sample Description</Description>
+const Template = (args) => (
+  <Description {...args} />
 )
+
+export const Base = Template.bind({})
+Base.args = {
+  description:'Sample Description',
+  name       :'email',
+}

package/src/stories/f/QueryCombobox.stories.jsx

@@ -29,7 +29,8 @@ export default {
     ),
   ],
   argTypes:{
-    backgroundColor:{ control: 'color' },
+    // backgroundColor:{ control: 'color' },
+    multiple:{ control: 'boolean' },
   },
 }
 

package/src/stories/f/QuerySelect.stories.jsx

@@ -28,7 +28,8 @@ export default {
     ),
   ],
   argTypes:{
-    backgroundColor:{ control: 'color' },
+    // backgroundColor:{ control: 'color' },
+    isLoading:{ control: 'boolean' },
   },
 }
 const statuses = [