@pareto-engineering/design-system 1.0.2 → 2.0.0-alpha.4

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

@@ -0,0 +1,348 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import {
+  ContentSlides,
+  SiteContextProvider,
+  useContentSlides,
+  Title,
+  Logo,
+  useSite,
+} from 'ui'
+
+// import Router from 'stories/utils/Router'
+import Router from '../utils/Router'
+
+export default {
+  title        :'c/ContentSlides',
+  component    :ContentSlides,
+  subcomponents:{
+    'ContentSlides.Sidebar'       :ContentSlides.Sidebar,
+    'ContentSlides.HorizontalMenu':ContentSlides.HorizontalMenu,
+    'ContentSlides.Slide'         :ContentSlides.Slide,
+    'ContentSlides.Navigator'     :ContentSlides.Navigator,
+  },
+  decorators:[
+    (storyfn) => <Router>{ storyfn() }</Router>,
+    (storyfn) => (
+      <SiteContextProvider config={{
+        SITE:{
+          NAME     :'name of my site',
+          CANONICAL:'https://mysite.com',
+        },
+      }}
+      >
+        { storyfn() }
+      </SiteContextProvider>
+    ),
+  ],
+  argTypes:{
+    backgroundColor:{ control: 'color' },
+  },
+}
+
+export const Base = () => {
+  const Main = () => {
+    const { userTheme } = useSite()
+
+    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',
+      },
+    ]
+
+    return (
+      <div className={`ui-${userTheme}`} style={{ height: '100%' }}>
+        <ContentSlides className="y-background1" steps={steps}>
+          <ContentSlides.Sidebar
+            header={(
+              <Logo color="paragraph" />
+            )}
+          />
+          <ContentSlides.HorizontalMenu />
+          <main>
+            <ContentSlides.Slide
+              index={0}
+            >
+              <Title
+                heading="Welcome"
+                headingAs="h1"
+                subtitle="Welcome to this site. We hope you will have an amazing experience here."
+                headingClassName="small"
+              />
+              <ContentSlides.Navigator />
+            </ContentSlides.Slide
+      >
+            <ContentSlides.Slide
+              index={1}
+            >
+              <Title
+                heading="Part 2"
+                headingAs="h1"
+                subtitle="Welcome to this site. We hope you will have an amazing experience here."
+                headingClassName="small"
+              />
+              <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.
+              </p>
+              <p>
+                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.
+                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.
+              </p>
+              <p>
+                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.
+                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>
+                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.
+                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>
+                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.
+                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"
+                subtitle="Welcome to this site. We hope you will have an amazing experience here."
+              />
+              <ContentSlides.Navigator />
+            </ContentSlides.Slide>
+          </main>
+        </ContentSlides>
+      </div>
+    )
+  }
+  return (
+    <Main />
+  )
+}
+
+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>
+
+            <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>
+  )
+}

package/src/stories/c/Hero.stories.jsx

@@ -0,0 +1,46 @@
+/* @pareto-engineering/generator-front 1.0.9 */
+import * as React from 'react'
+
+import {
+  SVG, Button, Hero, Title,
+} from 'ui'
+
+export default {
+  title        :'c/Hero',
+  component    :Hero,
+  subcomponents:{
+    // Item:Hero.Item
+  },
+  decorators:[
+    // storyfn => <div className="">{ storyfn() }</div>,
+  ],
+  argTypes:{
+    backgroundColor:{ control: 'color' },
+  },
+}
+
+export const Base = () => (
+  <Hero
+    title={(
+      <Title
+        heading={(
+          <>
+            Say no to busywork.
+            <br />
+            Get back to changing the world
+          </>
+)}
+        subtitle="Send us the repetitive tasks you don't have time for. Focus on the critical tasks only you can do."
+      />
+    )}
+    illustration={(
+      <SVG />
+    )}
+    cta={(
+      <>
+        <Button className="x-primary">Free trial</Button>
+        <p className="s-1 v1 mt-v">No credit card required. Cancel anytime.</p>
+      </>
+)}
+  />
+)

package/src/stories/c/Shortener.stories.jsx

@@ -0,0 +1,28 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { Shortener } from 'ui'
+
+export default {
+  title        :'c/Shortener',
+  component    :Shortener,
+  subcomponents:{
+    // Item:Shortener.Item
+  },
+  decorators:[
+    // storyfn => <div className="">{ storyfn() }</div>,
+  ],
+  argTypes:{
+    backgroundColor:{ control: 'color' },
+  },
+}
+
+export const Base = () => (
+  <Shortener
+    limit={10}
+    style={{ maxWidth: '300px' }}
+  >
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+    incididunt ut labore et dolore magna aliqua.
+  </Shortener>
+)

package/src/stories/colors.js

@@ -0,0 +1,76 @@
+const THEME = [
+  'main1',
+  'main2',
+  'main3',
+  'main4',
+]
+
+/*
+const WHEEL = [
+  'red',
+  'orange',
+  'yellow',
+  'olive',
+  'green',
+  'indigo',
+  'azure',
+  'blue',
+  'violet',
+  'pink',
+]
+  */
+
+const MODALS = [
+  'success',
+  'warning',
+  'error',
+]
+
+const UI = [
+  'background1',
+  'background2',
+  'background3',
+  'background4',
+  'background5',
+  'background6',
+  'heading',
+  'paragraph',
+  'subtitle',
+  'metadata',
+  'link',
+  'navlink',
+]
+
+const SM = [
+  'twitter',
+  'facebook',
+  'instagram',
+  'google',
+]
+
+const MONOCHROME = [
+  'black',
+  'anchor',
+  'grey',
+  'pearl',
+  'white',
+]
+
+const ALL_COLORS = [
+  ...THEME,
+  ...MODALS,
+  // ...WHEEL,
+  ...UI,
+  ...SM,
+  ...MONOCHROME,
+]
+
+export {
+  THEME,
+  MODALS,
+  // WHEEL,
+  UI,
+  SM,
+  MONOCHROME,
+  ALL_COLORS,
+}

package/src/stories/f/CheckboxInput.stories.jsx

@@ -0,0 +1,37 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+import { Formik, Form } from 'formik'
+
+import { CheckboxInput, FormDebugger } from 'ui'
+
+export default {
+  title        :'f/fields/CheckboxInput',
+  component    :CheckboxInput,
+  subcomponents:{
+    // Item:CheckboxInput.Item
+  },
+  decorators:[
+    (storyfn) => (
+      <Formik
+        initialValues={{ businessTypes: [] }}
+      >
+        <Form>
+          { storyfn() }
+        </Form>
+      </Formik>
+    ),
+  ],
+  argTypes:{
+    backgroundColor:{ control: 'color' },
+  },
+}
+
+export const Base = () => (
+  <div className="y-background1 b-y">
+    <CheckboxInput value="Business to customer" name="businessTypes">Business to customer</CheckboxInput>
+    <CheckboxInput value="Business to business" name="businessTypes">Business to business</CheckboxInput>
+    <CheckboxInput value="E-commerce" name="businessTypes">E-commerce</CheckboxInput>
+    <CheckboxInput value="Marketplace" name="businessTypes">Marketplace</CheckboxInput>
+    <FormDebugger />
+  </div>
+)

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

@@ -0,0 +1,168 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { ChoicesInput, FormDebugger } from 'ui'
+import { Formik, Form } from 'formik'
+
+export default {
+  title        :'f/fields/ChoicesInput',
+  component    :ChoicesInput,
+  subcomponents:{
+    // Item:ChoicesInput.Item
+  },
+  decorators:[
+    (storyfn) => (
+      <Formik
+        initialValues={{}}
+      >
+        <Form>
+          { storyfn() }
+        </Form>
+      </Formik>
+    ),
+  ],
+  argTypes:{
+    backgroundColor:{ control: 'color' },
+  },
+}
+
+export const Base = () => {
+  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" />
+      <FormDebugger />
+    </>
+  )
+}
+
+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 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 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 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 />
+    </>
+  )
+}