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

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

@@ -17,16 +17,16 @@ export default {
   },
 }
 
-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

@@ -18,6 +18,8 @@ export default {
   },
 }
 
+const Template = (args) => <ProgressBar {...args} />
+
 export const Base = () => {
   const [progress, setProgress] = useState(40)
 
@@ -40,13 +42,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

@@ -22,48 +22,42 @@ export default {
 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

@@ -18,19 +18,19 @@ export default {
   },
 }
 
-export const Base = () => (
-  <Logo />
-)
-
-export const Color = () => ALL_COLORS.map((color) => <Logo color={color} key={color} />)
-
-export const Square = () => ALL_COLORS.map((color) => (
-  <Logo
-    square
-    color={color}
-    key={color}
-  />
-))
+const SingleTemplate = (args) => <Logo {...args} />
+
+export const Base = SingleTemplate.bind({})
+
+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

@@ -16,8 +16,8 @@ export default {
   },
 }
 
-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 +31,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

@@ -17,57 +17,39 @@ export default {
   },
 }
 
-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

@@ -18,20 +18,18 @@ export default {
   },
 }
 
-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) => (