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

package/src/stories/a/Figure.stories.jsx

@@ -0,0 +1,26 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { Figure } from 'ui'
+
+export default {
+  title        :'a/Figure',
+  component    :Figure,
+  subcomponents:{
+    // Item:Figure.Item
+  },
+  decorators:[
+    // storyfn => <div className="">{ storyfn() }</div>,
+  ],
+  argTypes:{
+    backgroundColor:{ control: 'color' },
+  },
+}
+
+export const Base = () => (
+  <Figure
+    src="https://cdn.mos.cms.futurecdn.net/92keBiQNU4EtZemm4wfw8h.jpg"
+    alt="Hubbub Headquarters"
+    caption="Headquarters of Hubbub"
+  />
+)

package/src/stories/a/HamburgerButton.stories.jsx

@@ -0,0 +1,27 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+import { useState } from 'react'
+
+import { HamburgerButton } from 'ui'
+
+export default {
+  title        :'a/HamburgerButton',
+  component    :HamburgerButton,
+  subcomponents:{
+    // Item:HamburgerButton.Item
+  },
+  decorators:[
+    // storyfn => <div className="">{ storyfn() }</div>,
+  ],
+  argTypes:{
+    backgroundColor:{ control: 'color' },
+  },
+}
+
+export const Base = () => {
+  const [isOpen, setIsOpen] = useState(false)
+  const toggleOpen = () => setIsOpen(!isOpen)
+  return (
+    <HamburgerButton isOpen={isOpen} onClick={toggleOpen} />
+  )
+}

package/src/stories/a/IconList.stories.jsx

@@ -0,0 +1,51 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { IconList } from 'ui'
+
+export default {
+  title        :'a/IconList',
+  component    :IconList,
+  subcomponents:{
+    'IconList.Item':IconList.Item,
+  },
+  decorators:[
+    // storyfn => <div className="">{ storyfn() }</div>,
+  ],
+  argTypes:{
+    // backgroundColor:{ control: 'color' },
+  },
+}
+
+export const Base = () => {
+  const itemsMap = [
+    {
+      key     :'a',
+      children:'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+      icon    :'J',
+    },
+    {
+      key      :'b',
+      children :'(Colors) Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+      className:'x-red xh-orange c-x',
+      icon     :'f',
+    },
+    {
+      key     :'c',
+      children:'(No icon) Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+      // icon    :'',
+    },
+    {
+      key      :'d',
+      children :'(Icon Hover) Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+      icon     :'I',
+      iconHover:'L',
+    },
+  ]
+
+  return (
+    <IconList>
+      { itemsMap.map((item) => <IconList.Item {...item} />) }
+    </IconList>
+  )
+}

package/src/stories/a/LoadingCircle.stories.jsx

@@ -0,0 +1,28 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { LoadingCircle } from 'ui'
+
+export default {
+  title        :'a/LoadingCircle',
+  component    :LoadingCircle,
+  subcomponents:{
+    // Item:LoadingCircle.Item
+  },
+  decorators:[
+    // storyfn => <div className="">{ storyfn() }</div>,
+  ],
+  argTypes:{
+    backgroundColor:{ control: 'color' },
+  },
+}
+
+export const Base = () => (
+  <div className="x-main1 b-x">
+    <LoadingCircle
+      strokeLinecap="square"
+      heightWidth="3em"
+      style={{ '--x': 'var(--on-x)' }}
+    />
+  </div>
+)

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

@@ -0,0 +1,112 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { Shapes } from 'ui'
+
+export default {
+  title        :'a/Shapes',
+  component    :Shapes,
+  subcomponents:{
+    // Item:Shapes.Item
+  },
+  decorators:[
+    // storyfn => <div className="">{ storyfn() }</div>,
+  ],
+  argTypes:{
+    pin   :{ control: 'select' },
+    shape :{ control: 'select' },
+    height:{ control: 'text' },
+    color :{ control: 'text' },
+  },
+}
+
+// eslint-disable-next-line react/prop-types
+const Template = ({ color, ...rest }) => (
+  <div
+    className={`y-${color} b-light-y`}
+    style={{
+      height:'1000px', position:'relative', overflow:'hidden',
+    }}
+  >
+    <Shapes {...rest} />
+  </div>
+)
+
+export const Triangle = Template.bind({})
+Triangle.args = {
+  height:'30em',
+  pin   :'center',
+  color :'background6',
+  shape :'triangle',
+}
+
+export const HalfEllipses = Template.bind({})
+HalfEllipses.args = {
+  height:'25em',
+  pin   :'flex-end',
+  color :'background3',
+  shape :'half-ellipses',
+}
+
+export const Ellipse = Template.bind({})
+Ellipse.args = {
+  height:'30em',
+  pin   :'flex-end',
+  color :'main3',
+  shape :'ellipse',
+}
+
+export const HalfEllipse = Template.bind({})
+HalfEllipse.args = {
+  height:'25em',
+  pin   :'flex-end',
+  color :'background3',
+  shape :'half-ellipse',
+}
+
+export const Diamonds = Template.bind({})
+Diamonds.args = {
+  height:'30em',
+  pin   :'flex-end',
+  color :'background4',
+  shape :'diamonds',
+}
+
+export const Rectangles = Template.bind({})
+Rectangles.args = {
+  height:'30em',
+  pin   :'flex-end',
+  color :'background5',
+  shape :'rectangles',
+}
+
+export const Circle = Template.bind({})
+Circle.args = {
+  height:'30em',
+  pin   :'flex-end',
+  color :'background5',
+  shape :'circle',
+}
+
+export const HalfCircle = Template.bind({})
+HalfCircle.args = {
+  height:'30em',
+  pin   :'flex-end',
+  color :'background4',
+  shape :'half-circle',
+}
+
+export const Ellipses = Template.bind({})
+Ellipses.args = {
+  height:'30em',
+  pin   :'flex-end',
+  color :'background4',
+  shape :'ellipses',
+}
+
+export const Spiral = Template.bind({})
+Spiral.args = {
+  height:'70em',
+  color :'background6',
+  shape :'spiral',
+}

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

@@ -0,0 +1,42 @@
+/* @pareto-engineering/generator-front 1.0.0 */
+import * as React from 'react'
+
+import { SiteContextProvider } from 'ui'
+
+export default {
+  title        :'a/SiteContext',
+  component    :SiteContextProvider,
+  subcomponents:{
+    // Item:SiteContext.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',
+      },
+      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} />
+  )
+}