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

package/src/stories/a/Alert.stories.jsx

@@ -0,0 +1,75 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { Alert } from 'ui'
+
+export default {
+  title        :'a/Alert',
+  component    :Alert,
+  subcomponents:{
+    // Item:Alert.Item
+  },
+  decorators:[
+    // storyfn => <div className="">{ storyfn() }</div>,
+  ],
+  argTypes:{
+    withCloseIcon    :{ control: 'boolean' },
+    primaryPosition  :{ control: 'select', options: ['top', 'bottom', 'center'] },
+    secondaryPosition:{ control: 'select', options: ['left', 'right'] },
+    autoCloseMs      :{ control: 'text' },
+    type             :{ control: 'select', options: ['success', 'warning', 'error'] },
+  },
+}
+
+const Template = (args) => (
+  <Alert {...args}>
+    <div
+      style={{
+        display   :'flex',
+        alignItems:'center',
+      }}
+      className="v1"
+    >
+      <span className="icon mr-v f-icons">g</span>
+      <p>This is the alert content This is the alert content</p>
+    </div>
+  </Alert>
+)
+
+export const Base = Template.bind({})
+Base.args = {
+  type:'error',
+}
+
+export const WithoutCloseIcon = Template.bind({})
+WithoutCloseIcon.args = {
+  ...Base.args,
+  withCloseIcon:false,
+}
+
+export const WithAutoClose = Template.bind({})
+WithAutoClose.args = {
+  ...WithoutCloseIcon.args,
+  withCloseIcon:true,
+  autoCloseMs  :'2000',
+}
+
+export const Centered = Template.bind({})
+Centered.args = {
+  ...Base.args,
+  primaryPosition:'center',
+}
+
+export const TopRight = Template.bind({})
+TopRight.args = {
+  ...Base.args,
+  primaryPosition  :'top',
+  secondaryPosition:'right',
+}
+
+export const BottomLeft = Template.bind({})
+BottomLeft.args = {
+  ...Base.args,
+  primaryPosition  :'bottom',
+  secondaryPosition:'left',
+}

package/src/stories/a/DotInfo.stories.jsx

@@ -13,20 +13,21 @@ export default {
     // storyfn => <div className="">{ storyfn() }</div>,
   ],
   argTypes:{
-    backgroundColor:{ control: 'color' },
+    // backgroundColor:{ control: 'color' },
+    booleanValue:{ control: 'boolean' },
   },
 }
 
-export const True = () => (
-  <DotInfo booleanValue />
-)
-export const False = () => (
-  <DotInfo booleanValue={false} />
-)
+const Template = (args) => <DotInfo {...args} />
 
-export const Nullish = () => (
-  <>
-    <DotInfo />
-    <DotInfo booleanValue={null} />
-  </>
-)
+export const True = Template.bind({})
+True.args = {
+  booleanValue:true,
+}
+
+export const False = Template.bind({})
+False.args = {
+  booleanValue:false,
+}
+
+export const Nullish = Template.bind({})

package/src/stories/a/ProgressBar.stories.jsx

@@ -14,10 +14,15 @@ export default {
     // storyfn => <div className="">{ storyfn() }</div>,
   ],
   argTypes:{
-    backgroundColor:{ control: 'color' },
+    // backgroundColor:{ control: 'color' },
+    progress:{ control: 'number' },
+    color   :{ control: 'text' },
+    height  :{ control: 'text' },
   },
 }
 
+const Template = (args) => <ProgressBar {...args} />
+
 export const Base = () => {
   const [progress, setProgress] = useState(40)
 
@@ -40,13 +45,17 @@ export const Base = () => {
   )
 }
 
-export const Color = () => (
-  <ProgressBar progress={70} color="main1" />
-)
+export const Color = Template.bind({})
+Color.args = {
+  progress:70,
+  color   :'main1',
+}
 
-export const Height = () => (
-  <ProgressBar height="5em" progress={62} />
-)
+export const Height = Template.bind({})
+Height.args = {
+  ...Color.args,
+  height:'5em',
+}
 
 /*
 export const Attached = () => {

package/src/stories/a/Timestamp.stories.jsx

@@ -15,55 +15,51 @@ export default {
     // storyfn => <div className="">{ storyfn() }</div>,
   ],
   argTypes:{
-    backgroundColor:{ control: 'color' },
+    // backgroundColor:{ control: 'color' },
+    dateFormat    :{ control: 'select' },
+    enabledFormats:{ control: 'select', options: ['distance', 'date', 'relative'] },
   },
 }
 
 const date = Date.UTC(2022, 9, 15)
 // const timezoneCorrectedDate = addMinutes(date, date.getTimezoneOffset())
 
-export const Base = () => (
-  <>
-    <Timestamp time={date} />
-  </>
-)
+const Template = (args) => <Timestamp {...args} />
 
-export const DateFormat = () => (
-  <Timestamp
-    time={date}
-    enabledFormats={['date']}
-    dateFormat={'yyyy-MM-dd\' at \'HH:mm'}
-  />
-)
+export const Base = Template.bind({})
+Base.args = {
+  time:date,
+}
+
+export const DateFormat = Template.bind({})
+DateFormat.args = {
+  ...Base.args,
+  enabledFormats:['date'],
+  dateFormat    :'yyyy-MM-dd\' at \'HH:mm',
+}
 
-export const DistanceFormat = () => (
-  <Timestamp
-    time={subDays(date, 3)}
-    enabledFormats={['distance', 'date']}
-  />
-)
+export const DistanceFormat = Template.bind({})
+DistanceFormat.args = {
+  time          :subDays(date, 3),
+  enabledFormats:['distance', 'date'],
 
-export const RelativeFormat = () => (
-  <>
-    Click to see relative format.
-    Relative format has not been enabled by default because of chromatic snapshots.
-    <Timestamp
-      time={subDays(date, 5)}
-      enabledFormats={['date', 'relative']}
-    />
-  </>
-)
+}
 
-export const Prefix = () => (
-  <Timestamp
-    time={date}
-    prefix={(
-      <strong>
-        Updated :
-      </strong>
-    )}
-  />
-)
+export const RelativeFormat = Template.bind({})
+RelativeFormat.args = {
+  ...DistanceFormat.args,
+  enabledFormats:['date', 'relative'],
+}
+
+export const Prefix = Template.bind({})
+Prefix.args = {
+  ...Base.args,
+  prefix:(
+    <strong>
+      Updated :
+    </strong>
+  ),
+}
 
 // export const DistanceFormatMaxDays = () => (
 //   <>

package/src/stories/b/Logo.stories.jsx

@@ -14,23 +14,24 @@ export default {
     // storyfn => <div className="">{ storyfn() }</div>,
   ],
   argTypes:{
-    backgroundColor:{ control: 'color' },
+    // backgroundColor:{ control: 'color' },
+    square:{ control: 'boolean' },
   },
 }
 
-export const Base = () => (
-  <Logo />
-)
+const SingleTemplate = (args) => <Logo {...args} />
 
-export const Color = () => ALL_COLORS.map((color) => <Logo color={color} key={color} />)
+export const Base = SingleTemplate.bind({})
 
-export const Square = () => ALL_COLORS.map((color) => (
-  <Logo
-    square
-    color={color}
-    key={color}
-  />
-))
+const MultipleTemplate = (args) => ALL_COLORS
+  .map((color) => <Logo key={color} color={color} {...args} />)
+
+export const Color = MultipleTemplate.bind({})
+
+export const Square = MultipleTemplate.bind({})
+Square.args = {
+  square:true,
+}
 
 // export const Animated = () => (
 //   <Logo animated />

package/src/stories/b/QuestionDropdown.stories.jsx

@@ -13,11 +13,14 @@ export default {
     // storyfn => <div className="">{ storyfn() }</div>,
   ],
   argTypes:{
+    question     :{ control: 'text' },
+    isFAQSchema  :{ control: 'boolean' },
+    defaultIsOpen:{ control: 'boolean' },
   },
 }
 
-export const Base = () => (
-  <QuestionDropdown question="What is Pareto?">
+const Template = (args) => (
+  <QuestionDropdown question="What is Pareto?" {...args}>
     <p>
       Pareto is a female-owned and operated virtual workforce helping startups and
       small businesses automate day-to-day data processing, sales outreach,
@@ -31,32 +34,19 @@ export const Base = () => (
   </QuestionDropdown>
 )
 
-export const withSEO = () => (
-  <QuestionDropdown question="What is Pareto?" isFAQSchema>
-    <p>
-      Pareto is a female-owned and operated virtual workforce helping startups and
-      small businesses automate day-to-day data processing, sales outreach,
-      product research, and admin operations. We combine the quality and care of
-      real people with the efficiency of machine automation to get the job done.
-    </p>
-    <p>
-      At the same time, we’re a WBENC-certified business,
-      empowering women in developing countries with meaningful economic opportunities.
-    </p>
-  </QuestionDropdown>
-)
+export const Base = Template.bind({})
+Base.args = {
+  question:'What is Pareto?',
+}
 
-export const OpenQuestionDropdown = () => (
-  <QuestionDropdown question="What is Pareto?" defaultIsOpen>
-    <p>
-      Pareto is a female-owned and operated virtual workforce helping startups and
-      small businesses automate day-to-day data processing, sales outreach,
-      product research, and admin operations. We combine the quality and care of
-      real people with the efficiency of machine automation to get the job done.
-    </p>
-    <p>
-      At the same time, we’re a WBENC-certified business,
-      empowering women in developing countries with meaningful economic opportunities.
-    </p>
-  </QuestionDropdown>
-)
+export const withSEO = Template.bind({})
+withSEO.args = {
+  ...Base.args,
+  isFAQSchema:true,
+}
+
+export const OpenQuestionDropdown = Template.bind({})
+OpenQuestionDropdown.args = {
+  ...Base.args,
+  defaultIsOpen:true,
+}

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

@@ -13,61 +13,44 @@ export default {
     // storyfn => <div className="">{ storyfn() }</div>,
   ],
   argTypes:{
-    backgroundColor:{ control: 'color' },
+    // backgroundColor:{ control: 'color' },
+    isTransparent:{ control: 'boolean' },
   },
 }
 
-export const Base = () => (
-  <AppContextProvider
-    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" />
+// 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 = () => (
-  <AppContextProvider
-    config={{
-      APP:{
-        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 />
-  </AppContextProvider>
-)
+export const Transparent = Template.bind({})
+Transparent.args = {
+  ...Base.args,
+  isTransparent:true,
+}

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

@@ -13,25 +13,23 @@ 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) => (