@pareto-engineering/design-system 2.0.0-alpha.2 → 2.0.0-alpha.23

package/src/stories/b/Button.stories.jsx

@@ -14,65 +14,94 @@ export default {
     // storyfn => <div className="">{ storyfn() }</div>,
   ],
   argTypes:{
-    isGhost :{ control: 'boolean' },
-    disabled:{ control: 'boolean' },
+    color     :{ control: { type: 'select', options: ALL_COLORS } },
+    disabled  :{ control: { type: 'boolean' } },
+    isGhost   :{ control: { type: 'boolean' } },
+    isSimple  :{ control: { type: 'boolean' } },
+    isAnimated:{ control: { type: 'boolean' } },
   },
 }
 
-export const Base = (props) => <Button {...props}>Sample Button</Button>
+const SingleTemplate = (args) => <Button {...args} />
 
-export const Ghost = (props) => (
-  <Button isGhost {...props}>
-    Sample Button
-  </Button>
-)
+export const Base = SingleTemplate.bind({})
+Base.args = {
+  children:'Sample Button',
+}
 
-export const Simple = (props) => (
-  <Button isSimple {...props}>
-    Sample Button
-  </Button>
-)
-
-export const Colors = (props) => (
-  <>
-    {ALL_COLORS.map((colorName) => (
-      <Button {...props} color={colorName} key={colorName}>
-        This is a
-        {' '}
-        {colorName}
-        {' '}
-        button
-      </Button>
-    ))}
-  </>
-)
-
-export const GhostColors = (props) => (
-  <>
-    {ALL_COLORS.map((colorName) => (
-      <Button {...props} color={colorName} key={colorName} isGhost>
-        This is a
-        {' '}
-        {colorName}
-        {' '}
-        button
-      </Button>
-    ))}
-  </>
-)
-
-export const Compact = (props) => (
-  <Button isCompact {...props}>
-    Sample Button
-  </Button>
-)
+export const Ghost = SingleTemplate.bind({})
+Ghost.args = {
+  isGhost :true,
+  children:'Sample Button',
+}
 
-export const Disabled = (props) => (
-  <Button disabled {...props}>
-    Sample Button
+const MultipleTemplate = (args) => ALL_COLORS.map((colorName) => (
+  <Button {...args} color={colorName} key={colorName}>
+    This is a
+    {' '}
+    {colorName}
+    {' '}
+    button
   </Button>
-)
+))
+
+export const Normal = MultipleTemplate.bind({})
+
+export const Ghosts = MultipleTemplate.bind({})
+Ghosts.args = {
+  isGhost:true,
+}
+
+export const Simple = MultipleTemplate.bind({})
+Simple.args = {
+  isSimple:true,
+}
+
+export const Compact = MultipleTemplate.bind({})
+Compact.args = {
+  isCompact:true,
+}
+
+export const Disabled = MultipleTemplate.bind({})
+Disabled.args = {
+  disabled:true,
+}
 
-export const Loading = (props) => (
-  <Button {...props} isLoading />
-)
+export const GhostDisabled = MultipleTemplate.bind({})
+GhostDisabled.args = {
+  isGhost :true,
+  disabled:true,
+}
+
+export const SimpleDisabled = MultipleTemplate.bind({})
+SimpleDisabled.args = {
+  isSimple:true,
+  disabled:true,
+}
+
+export const Loading = MultipleTemplate.bind({})
+Loading.args = {
+  isLoading:true,
+}
+
+export const ArrowLeft = MultipleTemplate.bind({})
+ArrowLeft.args = {
+  arrowDirection:'left',
+}
+
+export const ArrowRight = MultipleTemplate.bind({})
+ArrowRight.args = {
+  arrowDirection:'right',
+}
+
+export const ArrowLeftSimple = MultipleTemplate.bind({})
+ArrowLeftSimple.args = {
+  arrowDirection:'left',
+  isSimple      :true,
+}
+
+export const ArrowRightSimple = MultipleTemplate.bind({})
+ArrowRightSimple.args = {
+  arrowDirection:'right',
+  isSimple      :true,
+}

package/src/stories/b/Metrics.stories.jsx

@@ -0,0 +1,62 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { Metrics } from 'ui'
+
+export default {
+  title        :'b/Metrics',
+  component    :Metrics,
+  subcomponents:{
+    // Item:Metrics.Item
+  },
+  decorators:[
+    // storyfn => <div className="">{ storyfn() }</div>,
+  ],
+  argTypes:{
+    backgroundColor:{ control: 'color' },
+  },
+}
+
+export const Base = () => {
+  const items = [
+    {
+      circleColor:'success',
+      color      :'black',
+      delay      :'2',
+      number     :'75',
+      after      :'%',
+      before     :'+',
+      description:'Merchandise sell-though rate during tour',
+    },
+    {
+      circleColor:'warning',
+      color      :'black',
+      delay      :'2',
+      number     :'250',
+      after      :'K',
+      description:'Stat or metric growth',
+    },
+    {
+      circleColor:'navlink',
+      color      :'black',
+      delay      :'2',
+      number     :'11710',
+      before     :'+',
+      description:'Stat or metric growth',
+    },
+    {
+      circleColor:'error',
+      color      :'black',
+      delay      :'2',
+      number     :'0.28',
+      before     :'$',
+      description:'Merchandise sell-though rate during tour',
+    },
+  ]
+
+  return (
+    <Metrics
+      items={items}
+    />
+  )
+}

package/src/stories/b/Page.stories.jsx

@@ -1,7 +1,7 @@
 /* @pareto-engineering/generator-front 1.0.0 */
 import * as React from 'react'
 
-import { Page } from 'ui'
+import { Page, Quote } from 'ui'
 
 export default {
   title        :'b/Page',
@@ -57,3 +57,53 @@ export const WithSections = () => (
     </Page.Section>
   </Page>
 )
+
+export const SectionsWithBackground = () => (
+  <Page
+    id="with-background"
+  >
+    <Page.Section
+      id="s1"
+      backgroundShape="triangle"
+      backgroundHeight="30em"
+      backgroundVerticalAlign="flex-end"
+      backgroundHorizontalAlign="center"
+      className="y-success b-light-y"
+      style={{
+        height        :'30em',
+        display       :'flex',
+        justifyContent:'center',
+        alignItems    :'center',
+      }}
+    >
+      <Quote author="Austen Spoonts" color="paragraph">
+        Pareto was like having a full-time employee without having to hire somebody.
+        That’s how I would explain it. An on-call, on-demand full-time employee.
+      </Quote>
+    </Page.Section>
+  </Page>
+)
+
+export const SectionsWithBackgroundGradient = () => (
+  <Page
+    id="with-background-gradient"
+  >
+    <Page.Section
+      id="s1"
+      backgroundGradient
+      backgroundGradientHeight="50em"
+      className="y-success"
+      style={{
+        height        :'30em',
+        display       :'flex',
+        justifyContent:'center',
+        alignItems    :'center',
+      }}
+    >
+      <Quote author="Austen Spoonts" color="paragraph">
+        Pareto was like having a full-time employee without having to hire somebody.
+        That’s how I would explain it. An on-call, on-demand full-time employee.
+      </Quote>
+    </Page.Section>
+  </Page>
+)

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

@@ -35,7 +35,7 @@ export const Base = () => {
         className={
          [
            `ui-${userTheme}`,
-           'y-background b-y',
+           'y-background1 b-y',
          ].filter((e) => e).join(' ')
        }
       >

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

@@ -36,7 +36,7 @@ export const WithSubtitle = (props) => (
 export const Sizes = (props) => (
   ['h1', 'h2', 'h3', 'h4', 'h5'].map((size) => (
     <div className="u2 pv-u" key={size}>
-      <div className="y-background b-dark-y">
+      <div className="y-background2 b-dark-y">
         <Title
           heading={`This is a title in ${size}`}
           headingAs={size}

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

@@ -4,6 +4,7 @@ import * as React from 'react'
 import {
   ContentSlides,
   SiteContextProvider,
+  Shapes,
   useContentSlides,
   Title,
   Logo,
@@ -74,7 +75,7 @@ export const Base = () => {
 
     return (
       <div className={`ui-${userTheme}`} style={{ height: '100%' }}>
-        <ContentSlides className="y-background" steps={steps}>
+        <ContentSlides className="y-background1 b-dark-y" steps={steps}>
           <ContentSlides.Sidebar
             header={(
               <Logo color="paragraph" />
@@ -341,7 +342,158 @@ export const Simple = () => {
     )
   }
   return (
-    <ContentSlides className="y-background" steps={steps} simple>
+    <ContentSlides className="y-background1 b-dark-y" steps={steps} simple>
+      <Main />
+    </ContentSlides>
+  )
+}
+
+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>
   )

package/src/stories/colors.js

@@ -1,8 +1,8 @@
 const THEME = [
   'main1',
   'main2',
-  'secondary1',
-  'secondary2',
+  'main3',
+  'main4',
 ]
 
 /*
@@ -27,10 +27,12 @@ const MODALS = [
 ]
 
 const UI = [
-  'background',
+  'background1',
   'background2',
   'background3',
   'background4',
+  'background5',
+  'background6',
   'heading',
   'paragraph',
   'subtitle',

package/src/stories/f/SelectInput.stories.jsx

@@ -13,10 +13,9 @@ export default {
   decorators:[
     (storyfn) => (
       <Formik
-        initialValues={{ workType: 'Work' }}
+        initialValues={{ workType: '' }}
       >
         <Form>
-
           { storyfn() }
         </Form>
       </Formik>
@@ -32,18 +31,46 @@ export const Base = () => (
     <SelectInput
       name="workType"
       label="Work Type"
-      options={['Work', 'Managing', 'Training']}
+      options={[{ value: '', label: 'Select an option', disabled: true }, 'Work', 'Managing', 'Training']}
     />
     <FormDebugger />
   </>
 )
 
+export const RequiredSelect = () => {
+  const requiredInput = (inputValue) => {
+    let error = ''
+
+    if (!inputValue || !inputValue?.length === 0) {
+      error = 'This information is required'
+    }
+    return error
+  }
+
+  return (
+    <>
+      <SelectInput
+        validate={requiredInput}
+        name="activity"
+        label="Activity Type"
+        options={[
+          { value: '', label: 'Select an option', disabled: true },
+          { value: 'review', label: 'Review' },
+          { value: 'Approve', label: 'Approve' },
+        ]}
+      />
+      <FormDebugger />
+    </>
+  )
+}
+
 export const Objects = () => (
   <>
     <SelectInput
       name="workType"
       label="Work Type"
       options={[
+        { value: '', label: 'Select an option', disabled: true },
         { value: '20th Aug 2020 to 19th Sept, 2020', label: '20th Aug 2020 to 19th Sept, 2020' },
         { value: '20th Sept 2020 to 19th Oct, 2020', label: '20th Sept 2020 to 19th Oct, 2020' },
       ]}
@@ -57,7 +84,9 @@ export const StringAndObjects = () => (
     <SelectInput
       name="workType"
       label="Work Type"
-      options={['Work', 'Managing', 'Training',
+      options={[
+        { value: '', label: 'Select an option', disabled: true },
+        'Work', 'Managing', 'Training',
         { value: '20th Aug 2020 to 19th Sept, 2020', label: '20th Aug 2020 to 19th Sept, 2020' },
         { value: '20th Sept 2020 to 19th Oct, 2020', label: '20th Sept 2020 to 19th Oct, 2020' },
       ]}
@@ -70,7 +99,9 @@ export const DisabledSelectInput = () => (
     <SelectInput
       name="workType"
       label="Work Type"
-      options={['Work', 'Managing', 'Training',
+      options={[
+        { value: '', label: 'Select an option', disabled: true },
+        'Work', 'Managing', 'Training',
         { value: '20th Aug 2020 to 19th Sept, 2020', label: '20th Aug 2020 to 19th Sept, 2020' },
         { value: '20th Sept 2020 to 19th Oct, 2020', label: '20th Sept 2020 to 19th Oct, 2020' },
       ]}

package/src/stories/f/TextInput.stories.jsx

@@ -41,19 +41,30 @@ export const Base = () => {
     return errorMessage
   }
   return (
-    <>
+    <div className=" u2 pb-u">
       <TextInput
         name="firstName"
         label="What's your first name ?"
         validate={validate}
       />
       <FormDebugger />
-    </>
+    </div>
   )
 }
 
-export const DisabledTextInput = () => (
-  <div className="y-background b-y u2 pb-u">
+export const Placeholder = () => (
+  <div className="u2 pb-u">
+    <TextInput
+      name="firstName"
+      label="What's your first name ?"
+      placeholder="First Name"
+    />
+    <FormDebugger />
+  </div>
+)
+
+export const Disabled = () => (
+  <div className="u2 pb-u">
     <TextInput
       name="firstName"
       label="What's your first name ?"
@@ -63,7 +74,7 @@ export const DisabledTextInput = () => (
 )
 
 export const DateTime = () => (
-  <div className="y-background b-y">
+  <div>
     <TextInput
       name="date"
       label="Select date"

package/src/stories/f/TextareaInput.stories.jsx

@@ -14,7 +14,7 @@ export default {
   decorators:[
     (storyfn) => (
       <Formik
-        initialValues={{ feedBack: '' }}
+        initialValues={{ feedback: '' }}
       >
         <Form>
 
@@ -29,18 +29,54 @@ export default {
 }
 
 export const Base = () => (
-  <div className="y-background b-y">
+  <div>
     <TextareaInput
-      name="feedBack"
+      name="feedback"
       label="What can we improve on?"
     />
     <FormDebugger />
   </div>
 )
-export const DisabledTextareaInput = () => (
-  <div className="y-background b-y">
+
+export const Placeholder = () => (
+  <div>
+    <TextareaInput
+      name="feedback"
+      label="What can we improve on?"
+      placeholder="Type your feedback here..."
+    />
+    <FormDebugger />
+  </div>
+)
+
+export const Validation = () => {
+  const validate = (value) => {
+    let errorMessage = ''
+    const isValid = value.length > 3
+
+    if (!isValid) {
+      errorMessage = 'Value should be greater than 3 characters'
+    }
+    return errorMessage
+  }
+
+  return (
+    <div>
+      <TextareaInput
+        name="feedback"
+        label="What can we improve on?"
+        placeholder="Type your feedback here..."
+        validate={validate}
+      />
+      <FormDebugger />
+    </div>
+  )
+}
+
+export const Disabled = () => (
+  <div>
     <TextareaInput
-      name="feedBack"
+      name="feedback"
       label="What can we improve on?"
       disabled
     />