@pareto-engineering/design-system 0.0.1-alpha.9 → 2.0.0-alpha.3

package/src/stories/a/People.stories.jsx

@@ -0,0 +1,72 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { People } from 'ui'
+
+export default {
+  title        :'a/People',
+  component    :People,
+  subcomponents:{
+    'People.Person':People.Person,
+  },
+  decorators:[
+    // storyfn => <div className="">{ storyfn() }</div>,
+  ],
+  argTypes:{
+    backgroundColor:{ control: 'color' },
+  },
+}
+
+export const Base = () => {
+  const peopleMap = [
+    {
+      image:'https://lh3.googleusercontent.com/a-/AOh14GiVivY1C3gxFz1kjHfih0jzpV08rlIIfMIgBvPs',
+      name :'Phoebe Yao',
+      role :'Pareto Founder',
+      color:'main1',
+    },
+    {
+      image:'https://pareto-v1.s3.us-west-2.amazonaws.com/profile-pictures/Lanie-Col-long.png',
+      name :'Lanie Col-long',
+      role :'Pareto Partner',
+      color:'main3',
+    },
+    {
+      image:'https://pareto-v1.s3.us-west-2.amazonaws.com/profile-pictures/Camille-Arigo.jpg',
+      name :'Camillie Arigo',
+      role :'Pareto Partner',
+      color:'background4',
+    },
+  ]
+
+  return (
+    <div className="x-background1 b-x v1 p-v">
+      <People>
+        {peopleMap.map((person) => (
+          <People.Person key={person.name} {...person} />
+        ))}
+      </People>
+    </div>
+  )
+}
+
+export const OnePerson = () => {
+  const peopleMap = [
+    {
+      image:'https://pareto-v1.s3.us-west-2.amazonaws.com/profile-pictures/Camille-Arigo.jpg',
+      name :'Camillie Arigo',
+      role :'Pareto Partner',
+      color:'background4',
+    },
+  ]
+
+  return (
+    <div className="x-background1 b-x v1 p-v">
+      <People>
+        {peopleMap.map((person) => (
+          <People.Person key={person.name} {...person} />
+        ))}
+      </People>
+    </div>
+  )
+}

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

@@ -0,0 +1,75 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+import { useState } from 'react'
+
+import { ProgressBar } from 'ui'
+
+export default {
+  title        :'a/ProgressBar',
+  component    :ProgressBar,
+  subcomponents:{
+    // Item:ProgressBar.Item
+  },
+  decorators:[
+    // storyfn => <div className="">{ storyfn() }</div>,
+  ],
+  argTypes:{
+    backgroundColor:{ control: 'color' },
+  },
+}
+
+export const Base = () => {
+  const [progress, setProgress] = useState(40)
+
+  const reduce = (delta) => setProgress(Math.max(progress - delta, 0))
+
+  const augment = (delta) => {
+    setProgress(Math.min(progress + delta, 100))
+  }
+  return (
+    <>
+      <ProgressBar progress={progress} />
+      <h3>Use the buttons to modify the value</h3>
+      <button onClick={() => reduce(25)} type="button">
+        Less
+      </button>
+      <button onClick={() => augment(25)} type="button">
+        More
+      </button>
+    </>
+  )
+}
+
+export const Color = () => (
+  <ProgressBar progress={70} color="main1" />
+)
+
+export const Height = () => (
+  <ProgressBar height="5em" progress={62} />
+)
+
+/*
+export const Attached = () => {
+
+  const [progress, setProgress] = useState(40)
+
+  const reduce = (delta) => setProgress(Math.max(progress - delta, 0))
+
+  const augment = (delta) => {
+    setProgress(Math.min(progress + delta, 100))
+  }
+  return (
+    <div style={{ border: '2px solid var(--grid)' }}>
+      <ProgressBar attached progress={progress} />
+      <div style={{ padding: '1em' }}>
+        <h3>Use the buttons to modify the value</h3>
+        <button onClick={() => reduce(25)} type="button">
+          Less
+        </button>
+        <button onClick={() => augment(25)} type="button">
+          More
+        </button>
+      </div>
+    </div>
+  )
+} */

package/src/stories/a/Quote.stories.jsx

@@ -0,0 +1,29 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { Quote } from 'ui'
+
+export default {
+  title        :'a/Quote',
+  component    :Quote,
+  subcomponents:{
+    // Item:Quote.Item
+  },
+  decorators:[
+    // storyfn => <div className="">{ storyfn() }</div>,
+  ],
+  argTypes:{
+    backgroundColor:{ control: 'color' },
+  },
+}
+
+export const Base = () => (
+  <div className="y-background1 b-y u1 p-u">
+    <Quote
+      author="Austen Spoonts"
+    >
+      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>
+  </div>
+)

package/src/stories/a/SVG.stories.jsx

@@ -0,0 +1,97 @@
+/* @pareto-engineering/generator-front 1.0.7 */
+import * as React from 'react'
+
+import { SVG } from 'ui'
+
+export default {
+  title        :'a/SVG',
+  component    :SVG,
+  subcomponents:{
+    // Item:SVG.Item
+  },
+  decorators:[
+    // storyfn => <div className="">{ storyfn() }</div>,
+  ],
+  argTypes:{
+    backgroundColor:{ control: 'color' },
+  },
+}
+
+export const Base = () => (
+  <SVG
+    height="200"
+    width="200"
+    target="engine"
+    className="x-black"
+  />
+)
+
+export const Logo = () => (
+  <>
+    <p>
+      The logo can be used as a simple SVG, but you are probably looking for
+      {' '}
+      b/Logo
+      {' '}
+      instead.
+    </p>
+    <SVG
+      height="250"
+      width="688"
+      target="logo"
+      sprite="/logo.svg"
+      className="x-green"
+    />
+  </>
+)
+
+export const Stroke = () => (
+  <SVG
+    height="200"
+    width="200"
+    target="engine"
+    className="y-green"
+  />
+)
+
+export const Animated = () => (
+  <>
+    <SVG
+      key="1"
+      height="200"
+      width="200"
+      target="engine"
+      className="y-red"
+      animated
+    />
+    <SVG
+      key="2"
+      height="200"
+      width="200"
+      target="engine"
+      className="y-indigo"
+      animated
+      style={{
+        '--svg-origin-stroke-dashoffset':100, // Origin dash offset
+        '--svg-target-stroke-dashoffset':10000, // Target dash offset
+        '--svg-animation-time'          :'10s', // Duration
+        '--svg-animation-repeats'       :'3', // Repeats
+        '--svg-stroke-width'            :9, // Stroke width
+      }}
+    />
+    <SVG
+      key="3"
+      height="200"
+      width="200"
+      target="engine"
+      className="y-red"
+      style={{
+        '--svg-origin-stroke-dashoffset':5000, // Origin dash offset
+        '--svg-target-stroke-dashoffset':0, // Target dash offset
+        '--svg-animation-time'          :'20s', // Duration
+        '--svg-animation-repeats'       :'infinite', // Repeats
+      }}
+      animated
+    />
+  </>
+)

package/src/stories/a/SiteContext.stories.jsx

@@ -20,9 +20,22 @@ export default {
 export const Base = () => (
   <SiteContextProvider
     config={{
-      SITE_NAME     :'My site',
-      SITE_CANONICAL:'https://mysite.com',
+      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',
+      },
+      EXTRA:{
+        SURVEY:'https://survey.hellopareto.com',
+      },
     }}
+
   >
     Sample SiteContext
   </SiteContextProvider>

package/src/stories/a/Spinner.stories.jsx

@@ -0,0 +1,25 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { Spinner } from 'ui'
+
+export default {
+  title        :'a/Spinner',
+  component    :Spinner,
+  subcomponents:{
+    // Item:Spinner.Item
+  },
+  decorators:[
+    // storyfn => <div className="">{ storyfn() }</div>,
+  ],
+  argTypes:{
+    backgroundColor:{ control: 'color' },
+  },
+}
+
+export const Base = () => (
+  <div className="y-background1 b-y">
+
+    <Spinner />
+  </div>
+)

package/src/stories/a/TeamInfo.stories.jsx

@@ -0,0 +1,31 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { TeamInfo } from 'ui'
+
+export default {
+  title        :'a/TeamInfo',
+  component    :TeamInfo,
+  subcomponents:{
+    // Item:TeamInfo.Item
+  },
+  decorators:[
+    // storyfn => <div className="">{ storyfn() }</div>,
+  ],
+  argTypes:{
+    backgroundColor:{ control: 'color' },
+  },
+}
+
+export const Base = () => {
+  const teamInfo = {
+    description:'Working at Pareto constantly allows me to learn something new. The team gives everyone a strong support system and never leaves anyone behind, especially when tasks get difficult.',
+    img        :'https://pareto-v1.s3.us-west-2.amazonaws.com/profile-pictures/Lanie-Col-long.png',
+    name       :'Lanie Col-long',
+    role       :'Partner',
+  }
+
+  return (
+    <TeamInfo {...teamInfo} />
+  )
+}

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

@@ -0,0 +1,102 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { Timestamp } from 'ui'
+
+import { subDays } from 'date-fns'
+
+export default {
+  title        :'a/Timestamp',
+  component    :Timestamp,
+  subcomponents:{
+    // Item:Timestamp.Item
+  },
+  decorators:[
+    // storyfn => <div className="">{ storyfn() }</div>,
+  ],
+  argTypes:{
+    backgroundColor:{ control: 'color' },
+  },
+}
+
+const date = Date.UTC(2022, 9, 15)
+// const timezoneCorrectedDate = addMinutes(date, date.getTimezoneOffset())
+
+export const Base = () => (
+  <>
+    <Timestamp time={date} />
+  </>
+)
+
+export const DateFormat = () => (
+  <Timestamp
+    time={date}
+    enabledFormats={['date']}
+    dateFormat={'yyyy-MM-dd\' at \'HH:mm'}
+  />
+)
+
+export const DistanceFormat = () => (
+  <Timestamp
+    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 DistanceFormatMaxDays = () => (
+//   <>
+//     This should appear as distance
+//     <Timestamp
+//       time={subDays(Date.now(), 3)}
+//       enabledFormats={['distance', 'date']}
+//       distanceMaxDays={4}
+//     />
+//     <br />
+
+//     But this should appear as date
+//     <Timestamp
+//       time={subDays(Date.now(), 5)}
+//       enabledFormats={['distance', 'date']}
+//       distanceMaxDays={4}
+//     />
+//   </>
+// )
+
+// export const RelativeFormatMaxDays = () => (
+//   <>
+//     This should appear as distance
+//     <Timestamp
+//       time={subDays(Date.now(), 3)}
+//       enabledFormats={['relative', 'date']}
+//       relativeMaxDays={4}
+//     />
+//     But this should appear as date
+//     <Timestamp
+//       time={subDays(Date.now(), 5)}
+//       enabledFormats={['relative', 'date']}
+//       relativeMaxDays={4}
+//     />
+//   </>
+// )

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

@@ -27,10 +27,24 @@ export const Ghost = (props) => (
   </Button>
 )
 
+export const Simple = (props) => (
+  <>
+    {ALL_COLORS.map((colorName) => (
+      <Button {...props} color={colorName} key={colorName} isSimple>
+        This is a
+        {' '}
+        {colorName}
+        {' '}
+        button
+      </Button>
+    ))}
+  </>
+)
+
 export const Colors = (props) => (
   <>
     {ALL_COLORS.map((colorName) => (
-      <Button className={`x-${colorName}`} key={colorName} {...props}>
+      <Button {...props} color={colorName} key={colorName}>
         This is a
         {' '}
         {colorName}
@@ -41,8 +55,55 @@ export const Colors = (props) => (
   </>
 )
 
+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) => (
+  <>
+    {ALL_COLORS.map((colorName) => (
+      <Button {...props} color={colorName} key={colorName} isCompact>
+        This is a
+        {' '}
+        {colorName}
+        {' '}
+      </Button>
+    ))}
+  </>
+)
+
 export const Disabled = (props) => (
-  <Button disabled {...props}>
-    Sample Button
-  </Button>
+  <>
+    {ALL_COLORS.map((colorName) => (
+      <Button {...props} color={colorName} key={colorName} disabled>
+        This is a
+        {' '}
+        {colorName}
+        {' '}
+      </Button>
+    ))}
+  </>
+)
+
+export const Loading = (props) => (
+  <>
+    {ALL_COLORS.map((colorName) => (
+      <Button {...props} color={colorName} key={colorName} isLoading>
+        This is a
+        {' '}
+        {colorName}
+        {' '}
+      </Button>
+    ))}
+  </>
 )

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

@@ -0,0 +1,37 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { Logo } from 'ui'
+import { ALL_COLORS } from 'stories/colors'
+
+export default {
+  title        :'b/Logo',
+  component    :Logo,
+  subcomponents:{
+    // Item:Logo.Item
+  },
+  decorators:[
+    // storyfn => <div className="">{ storyfn() }</div>,
+  ],
+  argTypes:{
+    backgroundColor:{ control: 'color' },
+  },
+}
+
+export const Base = () => (
+  <Logo />
+)
+
+export const Color = () => ALL_COLORS.map((color) => <Logo color={color} key={color} />)
+
+export const Animated = () => (
+  <Logo animated />
+)
+
+export const Loop = () => (
+  <Logo animated loop />
+)
+
+export const Beta = () => (
+  <Logo variant="beta" color="main1" />
+)

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/QuestionDropdown.stories.jsx

@@ -45,3 +45,18 @@ export const withSEO = () => (
     </p>
   </QuestionDropdown>
 )
+
+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>
+)