@pareto-engineering/design-system 1.0.3 → 2.0.0-alpha.5

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

@@ -0,0 +1,84 @@
+/* @pareto-engineering/generator-front 0.2.4 */
+import * as React from 'react'
+
+import { Button } from 'ui'
+import { ALL_COLORS } from 'stories/colors'
+
+export default {
+  title        :'b/Button',
+  component    :Button,
+  subcomponents:{
+    // Item:Button.Item
+  },
+  decorators:[
+    // storyfn => <div className="">{ storyfn() }</div>,
+  ],
+  argTypes:{
+    color   :{ control: { type: 'select', options: ALL_COLORS } },
+    disabled:{ control: { type: 'boolean' } },
+    isGhost :{ control: { type: 'boolean' } },
+    isSimple:{ control: { type: 'boolean' } },
+  },
+}
+
+const SingleTemplate = (args) => <Button {...args} />
+
+export const Base = SingleTemplate.bind({})
+Base.args = {
+  children:'Sample Button',
+}
+
+export const Ghost = SingleTemplate.bind({})
+Ghost.args = {
+  isGhost :true,
+  children:'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 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,
+}

package/src/stories/b/Card.stories.jsx

@@ -0,0 +1,36 @@
+/* @pareto-engineering/generator-front 0.2.4 */
+import * as React from 'react'
+
+import { Card } from 'ui'
+
+export default {
+  title        :'b/Card',
+  component    :Card,
+  subcomponents:{
+    'Card.Group':Card.Group,
+  },
+  decorators:[
+    // storyfn => <div className="">{ storyfn() }</div>,
+  ],
+  argTypes:{
+    backgroundColor:{ control: 'color' },
+  },
+}
+
+export const Base = () => <Card>Sample Card</Card>
+
+export const Group = () => (
+  <Card.Group>
+    <Card>Card1</Card>
+    <Card>Card2</Card>
+    <Card>Card3</Card>
+  </Card.Group>
+)
+
+export const GhostGroup = () => (
+  <Card.Group isGhost>
+    <Card>Card1</Card>
+    <Card>Card2</Card>
+    <Card>Card3</Card>
+  </Card.Group>
+)

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

@@ -0,0 +1,84 @@
+/* @pareto-engineering/generator-front 1.0.0 */
+import * as React from 'react'
+
+import { Page, Quote } from 'ui'
+
+export default {
+  title        :'b/Page',
+  component    :Page,
+  subcomponents:{
+    'Page.Helmet' :Page.Helmet,
+    'Page.Section':Page.Section,
+  },
+  decorators:[
+    // storyfn => <div className="">{ storyfn() }</div>,
+  ],
+  argTypes:{
+    id      :{ control: 'text' },
+    as      :{ control: 'text' },
+    itemType:{ control: 'text' },
+  },
+}
+
+export const Base = () => (
+  <Page id="default">
+    Inspect source for details.
+  </Page>
+)
+
+export const ItemType = () => (
+  <Page
+    id="itemtype"
+    itemType="https://schema.org/Movie"
+    helmetProps={{
+      title    :'The title of the page',
+      canonical:'https://mysite.com/movie',
+    }}
+  >
+    Inspect source for details.
+    Please note that when itemType is provided,
+    {' '}
+    <code>helmetProps.canonical</code>
+    {' '}
+    needs to be provided as well.
+  </Page>
+)
+
+export const WithSections = () => (
+  <Page
+    id="with-sections"
+  >
+    <Page.Section id="s1">
+      Section 1
+    </Page.Section>
+    <Page.Section id="s2">
+      Section 2.
+      Inspect source for details.
+    </Page.Section>
+  </Page>
+)
+
+export const SectionsWithBackground = () => (
+  <Page
+    id="with-sections"
+  >
+    <Page.Section
+      id="s1"
+      backgroundShape="triangle"
+      backgroundHeight="30em"
+      backgroundPin="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>
+)

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

@@ -0,0 +1,62 @@
+/* @pareto-engineering/generator-front 0.2.7 */
+import * as React from 'react'
+
+import { QuestionDropdown } from 'ui'
+
+export default {
+  title        :'b/QuestionDropdown',
+  component    :QuestionDropdown,
+  subcomponents:{
+    // Item:QuestionDropdown.Item
+  },
+  decorators:[
+    // storyfn => <div className="">{ storyfn() }</div>,
+  ],
+  argTypes:{
+  },
+}
+
+export const Base = () => (
+  <QuestionDropdown question="What is Pareto?">
+    <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 = () => (
+  <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 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>
+)

package/src/stories/b/Segment.stories.jsx

@@ -0,0 +1,34 @@
+/* @pareto-engineering/generator-front 0.2.4 */
+import * as React from 'react'
+
+import { Segment } from 'ui'
+
+export default {
+  title        :'b/Segment',
+  component    :Segment,
+  subcomponents:{
+    // Item:Segment.Item
+  },
+  decorators:[
+    // storyfn => <div className="">{ storyfn() }</div>,
+  ],
+  argTypes:{
+    title:{ control: 'text' },
+  },
+}
+
+export const Base = (props) => (
+  <Segment title="Default title" {...props}>
+    Sample Segment
+  </Segment>
+)
+
+export const WithFooter = (props) => (
+  <Segment
+    title="This is a segment with a footer"
+    footer="This should appear in the footer"
+    {...props}
+  >
+    Sample Segment
+  </Segment>
+)

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

@@ -0,0 +1,73 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { SiteContextProvider, SocialMediaButton } from 'ui'
+
+export default {
+  title        :'b/SocialMediaButton',
+  component    :SocialMediaButton,
+  subcomponents:{
+    // Item:SocialMediaButton.Item
+  },
+  decorators:[
+    // storyfn => <div className="">{ storyfn() }</div>,
+  ],
+  argTypes:{
+    backgroundColor:{ control: 'color' },
+  },
+}
+
+export const Base = () => (
+  <SiteContextProvider
+    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" />
+  </SiteContextProvider>
+)
+
+export const Transparent = () => (
+  <SiteContextProvider
+    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',
+      },
+      EXTRA:{
+        SURVEY:'https://survey.hellopareto.com',
+      },
+    }}
+
+  >
+    <SocialMediaButton type="facebook" isTransparent />
+    <SocialMediaButton type="twitter" isTransparent />
+    <SocialMediaButton type="instagram" isTransparent />
+    <SocialMediaButton type="linkedin" isTransparent />
+  </SiteContextProvider>
+)

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

@@ -0,0 +1,53 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { useSite, SiteContextProvider, ThemeSelector } from 'ui'
+
+export default {
+  title        :'b/ThemeSelector',
+  component    :ThemeSelector,
+  subcomponents:{
+    // Item:ThemeSelector.Item
+  },
+  decorators:[
+    (storyfn) => (
+      <SiteContextProvider config={{
+        SITE:{
+          NAME     :'name of my site',
+          CANONICAL:'https://mysite.com',
+        },
+      }}
+      >
+        { storyfn() }
+      </SiteContextProvider>
+    ),
+  ],
+  argTypes:{
+    // backgroundColor:{ control: 'color' },
+  },
+}
+
+export const Base = () => {
+  const ChildCo = () => {
+    const { userTheme } = useSite()
+    return (
+      <div
+        className={
+         [
+           `ui-${userTheme}`,
+           'y-background1 b-y',
+         ].filter((e) => e).join(' ')
+       }
+      >
+        <p>
+          Theme :
+          { userTheme }
+        </p>
+        <ThemeSelector />
+      </div>
+    )
+  }
+  return (
+    <ChildCo />
+  )
+}

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

@@ -0,0 +1,49 @@
+/* @pareto-engineering/generator-front 1.0.0 */
+import * as React from 'react'
+
+import { Title } from 'ui'
+
+export default {
+  title        :'b/Title',
+  component    :Title,
+  subcomponents:{
+    // Item:Title.Item
+  },
+  decorators:[
+    // storyfn => <div className="">{ storyfn() }</div>,
+  ],
+  argTypes:{
+    // heading :{ control: 'string' },
+    // subtitle:{ control: 'string' },
+  },
+}
+
+export const Base = (props) => (
+  <Title
+    heading="Test"
+    {...props}
+  />
+)
+
+export const WithSubtitle = (props) => (
+  <Title
+    heading="Test"
+    subtitle="This will appear as the subtitle"
+    {...props}
+  />
+)
+
+export const Sizes = (props) => (
+  ['h1', 'h2', 'h3', 'h4', 'h5'].map((size) => (
+    <div className="u2 pv-u" key={size}>
+      <div className="y-background2 b-dark-y">
+        <Title
+          heading={`This is a title in ${size}`}
+          headingAs={size}
+          subtitle="Here goes the subtitle"
+          {...props}
+        />
+      </div>
+    </div>
+  ))
+)