@pareto-engineering/design-system 0.0.1-alpha.8 → 0.0.4-testing-id.0

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

@@ -14,35 +14,94 @@ export default {
     // storyfn => <div className="">{ storyfn() }</div>,
   ],
   argTypes:{
-    isGhost :{ control: 'boolean' },
-    disabled:{ control: 'boolean' },
+    color     :{ control: { type: 'select', options: ALL_COLORS } },
+    disabled  :{ control: { type: 'boolean' } },
+    isGhost   :{ control: { type: 'boolean' } },
+    isSimple  :{ control: { type: 'boolean' } },
+    isAnimated:{ control: { type: 'boolean' } },
   },
 }
 
-export const Base = (props) => <Button {...props}>Sample Button</Button>
+const SingleTemplate = (args) => <Button {...args} />
 
-export const Ghost = (props) => (
-  <Button isGhost {...props}>
-    Sample Button
-  </Button>
-)
-
-export const Colors = (props) => (
-  <>
-    {ALL_COLORS.map((colorName) => (
-      <Button className={`x-${colorName}`} key={colorName} {...props}>
-        This is a
-        {' '}
-        {colorName}
-        {' '}
-        button
-      </Button>
-    ))}
-  </>
-)
-
-export const Disabled = (props) => (
-  <Button disabled {...props}>
-    Sample Button
+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,
+}
+
+export const ArrowLeft = MultipleTemplate.bind({})
+ArrowLeft.args = {
+  arrowDirection:'left',
+}
+
+export const ArrowRight = MultipleTemplate.bind({})
+ArrowRight.args = {
+  arrowDirection:'right',
+}
+
+export const ArrowLeftSimple = MultipleTemplate.bind({})
+ArrowLeftSimple.args = {
+  arrowDirection:'left',
+  isSimple      :true,
+}
+
+export const ArrowRightSimple = MultipleTemplate.bind({})
+ArrowRightSimple.args = {
+  arrowDirection:'right',
+  isSimple      :true,
+}

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

@@ -0,0 +1,46 @@
+/* @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' },
+    square:{ control: 'boolean' },
+  },
+}
+
+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 />
+// )
+
+// 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

@@ -1,7 +1,7 @@
 /* @pareto-engineering/generator-front 1.0.0 */
 import * as React from 'react'
 
-import { Page } from 'ui'
+import { Page, Quote } from 'ui'
 
 export default {
   title        :'b/Page',
@@ -57,3 +57,53 @@ export const WithSections = () => (
     </Page.Section>
   </Page>
 )
+
+export const SectionsWithBackground = () => (
+  <Page
+    id="with-background"
+  >
+    <Page.Section
+      id="s1"
+      backgroundShape="triangle"
+      backgroundHeight="30em"
+      backgroundVerticalAlign="flex-end"
+      backgroundHorizontalAlign="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>
+)
+
+export const SectionsWithBackgroundGradient = () => (
+  <Page
+    id="with-background-gradient"
+  >
+    <Page.Section
+      id="s1"
+      backgroundGradient
+      backgroundGradientHeight="50em"
+      className="y-success"
+      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

@@ -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,17 +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 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

@@ -0,0 +1,56 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { AppContextProvider, SocialMediaButton } from 'ui'
+
+export default {
+  title        :'b/SocialMediaButton',
+  component    :SocialMediaButton,
+  subcomponents:{
+    // Item:SocialMediaButton.Item
+  },
+  decorators:[
+    // storyfn => <div className="">{ storyfn() }</div>,
+  ],
+  argTypes:{
+    // backgroundColor:{ control: 'color' },
+    isTransparent:{ control: 'boolean' },
+  },
+}
+
+// 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 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',
+    },
+  },
+}
+
+export const Transparent = Template.bind({})
+Transparent.args = {
+  ...Base.args,
+  isTransparent:true,
+}

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

@@ -0,0 +1,53 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { useApp, AppContextProvider, ThemeSelector } from 'ui'
+
+export default {
+  title        :'b/ThemeSelector',
+  component    :ThemeSelector,
+  subcomponents:{
+    // Item:ThemeSelector.Item
+  },
+  decorators:[
+    (storyfn) => (
+      <AppContextProvider config={{
+        APP:{
+          NAME     :'name of my site',
+          CANONICAL:'https://mysite.com',
+        },
+      }}
+      >
+        { storyfn() }
+      </AppContextProvider>
+    ),
+  ],
+  argTypes:{
+    // backgroundColor:{ control: 'color' },
+  },
+}
+
+export const Base = () => {
+  const ChildCo = () => {
+    const { userTheme } = useApp()
+    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

@@ -13,30 +13,28 @@ 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) => (
     <div className="u2 pv-u" key={size}>
-      <div className="y-background b-dark-y">
+      <div className="y-background2 b-dark-y">
         <Title
           heading={`This is a title in ${size}`}
           headingAs={size}