@pareto-engineering/design-system 0.0.1-alpha.8 → 0.0.4-testing-id.0

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

@@ -0,0 +1,232 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import {
+  ContentSlides,
+  AppContextProvider,
+  Shapes,
+  useContentSlides,
+  Title,
+  Logo,
+  useApp,
+} 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) => (
+      <AppContextProvider config={{
+        APP:{
+          NAME     :'name of my site',
+          CANONICAL:'https://mysite.com',
+        },
+      }}
+      >
+        { storyfn() }
+      </AppContextProvider>
+    ),
+  ],
+  argTypes:{
+    // backgroundColor:{ control: 'color' },
+    isSimple          :{ control: 'boolean' },
+    hasBackgroundShape:{ control: 'boolean' },
+  },
+}
+
+const Template = (args) => {
+  const Main = () => {
+    const { isSimple, hasBackgroundShape } = args || {}
+    const { userTheme } = useApp()
+    const { isLastStep } = useContentSlides()
+
+    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 b-dark-y" steps={steps} simple={isSimple}>
+          {!isSimple && (
+          <ContentSlides.Sidebar
+            header={(
+              <Logo color="paragraph" />
+            )}
+          />
+          )}
+          {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}
+            >
+              <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 Base = Template.bind({})
+
+export const Simple = Template.bind({})
+Simple.args = {
+  isSimple:true,
+}
+
+export const WithBackgroundShape = Template.bind({})
+WithBackgroundShape.args = {
+  ...Simple.args,
+  hasBackgroundShape:true,
+}

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,34 @@
+/* @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' },
+    // limit:{ control: 'number' },
+  },
+}
+
+const Template = (args) => (
+  <Shortener
+    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/colors.js

@@ -1,12 +1,11 @@
 const THEME = [
-  'primary',
-  // 'secondary',
-  'accent1',
-  'accent2',
-  'accent3',
-  'accent4',
+  'main1',
+  'main2',
+  'main3',
+  'main4',
 ]
 
+/*
 const WHEEL = [
   'red',
   'orange',
@@ -19,6 +18,7 @@ const WHEEL = [
   'violet',
   'pink',
 ]
+  */
 
 const MODALS = [
   'success',
@@ -27,7 +27,12 @@ const MODALS = [
 ]
 
 const UI = [
-  'background',
+  'background1',
+  'background2',
+  'background3',
+  'background4',
+  'background5',
+  'background6',
   'heading',
   'paragraph',
   'subtitle',
@@ -54,7 +59,7 @@ const MONOCHROME = [
 const ALL_COLORS = [
   ...THEME,
   ...MODALS,
-  ...WHEEL,
+  // ...WHEEL,
   ...UI,
   ...SM,
   ...MONOCHROME,
@@ -63,7 +68,7 @@ const ALL_COLORS = [
 export {
   THEME,
   MODALS,
-  WHEEL,
+  // WHEEL,
   UI,
   SM,
   MONOCHROME,

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,
+}

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

@@ -0,0 +1,140 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+import { useEffect } from 'react'
+import { ChoicesInput, FormDebugger } from 'ui'
+import { Formik, Form, useField } 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' },
+    multiple          :{ control: 'boolean' },
+    gridColumnsDesktop:{ control: 'number' },
+    disabled          :{ control: 'boolean' },
+    optional          :{ control: 'boolean' },
+  },
+}
+
+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',
+  },
+]
+
+// eslint-disable-next-line react/prop-types
+const Template = ({ defaultValue, ...args }) => {
+  const Content = () => {
+    const [, , helpers] = useField(args.name)
+    const { setValue } = helpers
+
+    useEffect(() => {
+      if (defaultValue) {
+        setValue(defaultValue)
+      }
+    }, [defaultValue])
+
+    return (
+      <>
+        <ChoicesInput {...args} />
+        <FormDebugger />
+      </>
+    )
+  }
+  return <Content />
+}
+
+export const Base = Template.bind({})
+Base.args = {
+  id     :'colors',
+  options:optionsMap,
+  name   :'color',
+}
+
+export const WithDefaultFormikValue = Template.bind({})
+WithDefaultFormikValue.args = {
+  ...Base.args,
+  defaultValue:'red',
+}
+
+export const Multiple = Template.bind({})
+Multiple.args = {
+  ...Base.args,
+  multiple:true,
+}
+
+export const MultipleWithDefaultFormikValue = Template.bind({})
+MultipleWithDefaultFormikValue.args = {
+  ...Base.args,
+  multiple    :true,
+  defaultValue:['brown', 'violet'],
+}
+
+export const MultipleWithGrid = Template.bind({})
+MultipleWithGrid.args = {
+  ...Base.args,
+  multiple          :true,
+  gridColumnsDesktop:2,
+}
+
+export const ChoicesWithLabel = Template.bind({})
+ChoicesWithLabel.args = {
+  ...Base.args,
+  label:'Select color',
+}
+
+export const Optional = Template.bind({})
+Optional.args = {
+  ...Base.args,
+  label   :'Select color',
+  optional:true,
+}
+
+export const DisabledChoicesInput = Template.bind({})
+DisabledChoicesInput.args = {
+  ...ChoicesWithLabel.args,
+  disabled:true,
+}

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

@@ -0,0 +1,40 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { FormDescription as Description } from 'ui'
+
+import { Formik, Form } from 'formik'
+
+export default {
+  title        :'f/common/Description',
+  component    :Description,
+  subcomponents:{
+    // Item:Description.Item
+  },
+  decorators:[
+    (storyfn) => (
+      <Formik
+        initialValues={{ email: '' }}
+      >
+        <Form>
+          { storyfn() }
+        </Form>
+      </Formik>
+    ),
+  ],
+  argTypes:{
+    // backgroundColor:{ control: 'color' },
+    description:{ control: 'text' },
+    name       :{ control: 'text' },
+  },
+}
+
+const Template = (args) => (
+  <Description {...args} />
+)
+
+export const Base = Template.bind({})
+Base.args = {
+  description:'Sample Description',
+  name       :'email',
+}