@pareto-engineering/design-system 2.0.0-alpha.9 → 3.0.0-alpha.18

package/src/stories/b/SocialMediaButton.stories.jsx

@@ -1,7 +1,7 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react'
 
-import { SiteContextProvider, SocialMediaButton } from 'ui'
+import { AppContextProvider, SocialMediaButton } from 'ui'
 
 export default {
   title        :'b/SocialMediaButton',
@@ -13,61 +13,44 @@ export default {
     // storyfn => <div className="">{ storyfn() }</div>,
   ],
   argTypes:{
-    backgroundColor:{ control: 'color' },
+    // backgroundColor:{ control: 'color' },
+    isTransparent:{ control: 'boolean' },
   },
 }
 
-export const Base = () => (
-  <SiteContextProvider
-    config={{
-      SITE:{
-        NAME         :'Pareto',
-        CANONICAL    :'https://hellopareto.com',
-        SUPPORT_EMAIL:'support@hellopareto.com',
-        TITLE_SUFFIX :'| Pareto',
-      },
-      SOCIAL:{
-        FACEBOOK :'https://www.facebook.com/hellopareto',
-        INSTAGRAM:'https://www.instagram.com/hellopareto',
-        TWITTER  :'https://www.twitter.com/hellopareto',
-        LINKEDIN :'https://www.linkedin.com/company/hellopareto',
-      },
-      EXTRA:{
-        SURVEY:'https://survey.hellopareto.com',
-      },
-    }}
-
-  >
-    <SocialMediaButton type="facebook" />
-    <SocialMediaButton type="twitter" />
-    <SocialMediaButton type="instagram" />
-    <SocialMediaButton type="linkedin" />
-  </SiteContextProvider>
+// eslint-disable-next-line react/prop-types
+const Template = ({ isTransparent = false, ...rest }) => (
+  <AppContextProvider {...rest}>
+    <SocialMediaButton type="facebook" isTransparent={isTransparent} />
+    <SocialMediaButton type="twitter" isTransparent={isTransparent} />
+    <SocialMediaButton type="instagram" isTransparent={isTransparent} />
+    <SocialMediaButton type="linkedin" isTransparent={isTransparent} />
+  </AppContextProvider>
 )
 
-export const Transparent = () => (
-  <SiteContextProvider
-    config={{
-      SITE:{
-        NAME         :'Pareto',
-        CANONICAL    :'https://hellopareto.com',
-        SUPPORT_EMAIL:'support@hellopareto.com',
-        TITLE_SUFFIX :'| Pareto',
-      },
-      SOCIAL:{
-        FACEBOOK :'https://www.facebook.com/hellopareto',
-        INSTAGRAM:'https://www.instagram.com/hellopareto',
-        TWITTER  :'https://www.twitter.com/hellopareto',
-      },
-      EXTRA:{
-        SURVEY:'https://survey.hellopareto.com',
-      },
-    }}
+export const Base = Template.bind({})
+Base.args = {
+  config:{
+    SITE:{
+      NAME         :'Pareto',
+      CANONICAL    :'https://hellopareto.com',
+      SUPPORT_EMAIL:'support@hellopareto.com',
+      TITLE_SUFFIX :'| Pareto',
+    },
+    SOCIAL:{
+      FACEBOOK :'https://www.facebook.com/hellopareto',
+      INSTAGRAM:'https://www.instagram.com/hellopareto',
+      TWITTER  :'https://www.twitter.com/hellopareto',
+      LINKEDIN :'https://www.linkedin.com/company/hellopareto',
+    },
+    EXTRA:{
+      SURVEY:'https://survey.hellopareto.com',
+    },
+  },
+}
 
-  >
-    <SocialMediaButton type="facebook" isTransparent />
-    <SocialMediaButton type="twitter" isTransparent />
-    <SocialMediaButton type="instagram" isTransparent />
-    <SocialMediaButton type="linkedin" isTransparent />
-  </SiteContextProvider>
-)
+export const Transparent = Template.bind({})
+Transparent.args = {
+  ...Base.args,
+  isTransparent:true,
+}

package/src/stories/b/ThemeSelector.stories.jsx

@@ -1,7 +1,7 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react'
 
-import { useSite, SiteContextProvider, ThemeSelector } from 'ui'
+import { useApp, AppContextProvider, ThemeSelector } from 'ui'
 
 export default {
   title        :'b/ThemeSelector',
@@ -11,15 +11,15 @@ export default {
   },
   decorators:[
     (storyfn) => (
-      <SiteContextProvider config={{
-        SITE:{
+      <AppContextProvider config={{
+        APP:{
           NAME     :'name of my site',
           CANONICAL:'https://mysite.com',
         },
       }}
       >
         { storyfn() }
-      </SiteContextProvider>
+      </AppContextProvider>
     ),
   ],
   argTypes:{
@@ -29,7 +29,7 @@ export default {
 
 export const Base = () => {
   const ChildCo = () => {
-    const { userTheme } = useSite()
+    const { userTheme } = useApp()
     return (
       <div
         className={

package/src/stories/b/Title.stories.jsx

@@ -13,30 +13,28 @@ export default {
     // storyfn => <div className="">{ storyfn() }</div>,
   ],
   argTypes:{
-    // heading :{ control: 'string' },
-    // subtitle:{ control: 'string' },
+    heading :{ control: 'text' },
+    subtitle:{ control: 'text' },
   },
 }
 
-export const Base = (props) => (
-  <Title
-    heading="Test"
-    {...props}
-  />
-)
+const Template = (args) => <Title {...args} />
 
-export const WithSubtitle = (props) => (
-  <Title
-    heading="Test"
-    subtitle="This will appear as the subtitle"
-    {...props}
-  />
-)
+export const Base = Template.bind({})
+Base.args = {
+  heading:'Test',
+}
+
+export const WithSubtitle = Template.bind({})
+WithSubtitle.args = {
+  heading :'Test',
+  subtitle:'This will appear as the subtitle',
+}
 
 export const Sizes = (props) => (
   ['h1', 'h2', 'h3', 'h4', 'h5'].map((size) => (
     <div className="u2 pv-u" key={size}>
-      <div className="y-background2 b-dark-y">
+      <div className="y-background2 b-hard-y">
         <Title
           heading={`This is a title in ${size}`}
           headingAs={size}

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

@@ -3,11 +3,11 @@ import * as React from 'react'
 
 import {
   ContentSlides,
-  SiteContextProvider,
+  AppContextProvider,
   useContentSlides,
   Title,
   Logo,
-  useSite,
+  useApp,
 } from 'ui'
 
 // import Router from 'stories/utils/Router'
@@ -25,25 +25,27 @@ 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:{
-    backgroundColor:{ control: 'color' },
+    isSimple:{ control: 'boolean' },
   },
 }
 
-export const Base = () => {
+const Template = (args) => {
   const Main = () => {
-    const { userTheme } = useSite()
+    const { isSimple } = args || {}
+    const { userTheme } = useApp()
+    const { isLastStep } = useContentSlides()
 
     const steps = [
       {
@@ -74,13 +76,15 @@ export const Base = () => {
 
     return (
       <div className={`ui-${userTheme}`} style={{ height: '100%' }}>
-        <ContentSlides className="y-background1" steps={steps}>
+        <ContentSlides className="y-background1 b-dark-y" steps={steps} simple={isSimple}>
+          {!isSimple && (
           <ContentSlides.Sidebar
             header={(
               <Logo color="paragraph" />
             )}
           />
-          <ContentSlides.HorizontalMenu />
+          )}
+          <ContentSlides.HorizontalMenu hideBackIcon={isLastStep} />
           <main>
             <ContentSlides.Slide
               index={0}
@@ -202,147 +206,9 @@ 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()
+export const Base = Template.bind({})
 
-    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-background1" steps={steps} simple>
-      <Main />
-    </ContentSlides>
-  )
+export const Simple = Template.bind({})
+Simple.args = {
+  isSimple:true,
 }

package/src/stories/c/Modal.stories.jsx

@@ -0,0 +1,67 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { useState } from 'react'
+
+import { Button, Modal } from 'ui'
+
+import { ALL_COLORS } from 'stories/colors'
+
+export default {
+  title        :'c/Modal',
+  component    :Modal,
+  subcomponents:{
+    // Item:ModalButton.Item
+  },
+  decorators:[
+    // (storyfn) => <ModalContextProvider>{storyfn()}</ModalContextProvider>,
+  ],
+  argTypes:{
+    children:{ control: { type: 'text' } },
+    color   :{ control: { type: 'select', options: ALL_COLORS } },
+    title   :{ control: { type: 'text' } },
+  },
+}
+
+const Template = (args) => {
+  const { children } = args
+
+  return (
+    <Modal {...args}>
+      {children}
+    </Modal>
+  )
+}
+
+const FunctionalTemplate = (args) => {
+  const { children } = args
+  const [isOpen, setOpen] = useState(false)
+
+  return (
+    <>
+      <Button onClick={() => setOpen(!isOpen)} color="anchor">
+        Click to open modal
+      </Button>
+      {isOpen && (
+        <Modal {...args} close={() => setOpen(false)}>
+          {children}
+        </Modal>
+      )}
+    </>
+  )
+}
+
+export const Base = Template.bind({})
+Base.args = {
+  children:<div>This is a modal.</div>,
+  color   :'anchor',
+  title   :'Modal Title',
+  close   :() => console.log('You clicked the close button!'),
+}
+
+export const FunctionalModal = FunctionalTemplate.bind({})
+FunctionalModal.args = {
+  color   :'anchor',
+  title   :'Modal Title',
+  children:<div>This is a modal.</div>,
+}

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

@@ -0,0 +1,33 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+import { SocialMediaShareButton } from 'ui'
+import Router from '../utils/Router'
+
+export default {
+  title        :'c/SocialMediaShareButton',
+  component    :SocialMediaShareButton,
+  subcomponents:{
+    // Item:SocialMediaShareButton.Item
+  },
+  decorators:[
+    (storyfn) => <Router>{storyfn()}</Router>,
+  ],
+  argTypes:{
+    // backgroundColor:{ control: 'color' },
+    type:{ control: 'select', options: ['twitter', 'facebook'] },
+  },
+}
+
+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/Checkbox.stories.jsx

@@ -0,0 +1,95 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { useEffect } from 'react'
+
+import { Formik, Form, useField } from 'formik'
+
+import { Checkbox, FormDebugger } from 'ui'
+
+export default {
+  title        :'f/fields/Checkbox',
+  component    :Checkbox,
+  subcomponents:{
+    // Item:Checkbox.Item
+  },
+  decorators:[
+    // storyfn => <div className="">{ storyfn() }</div>,
+    (storyfn) => (
+      <Formik
+        initialValues={{}}
+      >
+        <Form>
+
+          { storyfn() }
+        </Form>
+      </Formik>
+    ),
+  ],
+  argTypes:{
+    label       :{ control: 'text' },
+    description :{ control: 'text' },
+    defaultValue:{ control: 'boolean' },
+    disabled    :{ control: 'boolean' },
+    optional    :{ control: 'boolean' },
+  },
+}
+
+// eslint-disable-next-line react/prop-types
+const Template = ({ defaultValue, ...args }) => {
+  const Content = () => {
+    const { name } = args
+    const [, , helpers] = useField(name)
+    const { setValue } = helpers
+
+    useEffect(() => {
+      if (defaultValue) {
+        setValue(defaultValue)
+      }
+    }, [defaultValue])
+
+    return (
+      <>
+        <Checkbox {...args} />
+        <FormDebugger />
+      </>
+    )
+  }
+
+  return <Content />
+}
+
+export const Base = Template.bind({})
+Base.args = {
+  name:'urgent',
+}
+
+export const WithLabel = Template.bind({})
+WithLabel.args = {
+  ...Base.args,
+  label:'Urgent',
+}
+
+export const WithDescription = Template.bind({})
+WithDescription.args = {
+  ...Base.args,
+  description:'Click on the checkbox',
+}
+
+export const WithDefaultFormikValue = Template.bind({})
+WithDefaultFormikValue.args = {
+  ...Base.args,
+  defaultValue:true,
+}
+
+export const Disabled = Template.bind({})
+Disabled.args = {
+  ...Base.args,
+  disabled:true,
+}
+
+export const Optional = Template.bind({})
+Optional.args = {
+  ...WithLabel.args,
+  optional:true,
+}