@pareto-engineering/design-system 1.0.2 → 2.0.0-alpha.4

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,59 @@
+/* @pareto-engineering/generator-front 1.0.0 */
+import * as React from 'react'
+
+import { Page } 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>
+)

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>
+  ))
+)