@pareto-engineering/design-system 2.0.0-alpha.9 → 3.0.0-alpha.22

package/src/stories/a/DashboardNavbar.stories.jsx

@@ -1,57 +0,0 @@
-/* @pareto-engineering/generator-front 0.2.3 */
-import * as React from 'react'
-
-import { DashboardNavbar } from 'ui'
-
-export default {
-  title        :'a/DashboardNavbar',
-  // component: DashboardNavbar,
-  subcomponents:{
-    // Item:DashboardNavbar.Item
-  },
-  decorators:[
-    // storyfn => <div className="">{ storyfn() }</div>,
-  ],
-  argTypes:{
-    backgroundColor:{ control: 'color' },
-  },
-}
-
-export const Base = () => {
-  let navMap
-  /*
-  const navMap = [
-    {
-      name: 'home',
-      url: '/home',
-      emoji: 'home',
-    },
-    {
-      name: 'tasks',
-      url: '/tasks',
-      emoji: 'tasks',
-    },
-    {
-      name: 'settings',
-      url: '/settings',
-      emoji: 'setting-wheel',
-      children: [
-        {
-          name: 'general',
-          url: '/settings#general',
-        },
-        {
-          name: 'notifications',
-          url: '/settings#notifications',
-        },
-      ],
-    },
-  ] */
-  return (
-    <DashboardNavbar navMap={navMap}>
-      <DashboardNavbar.Item>Home</DashboardNavbar.Item>
-      <DashboardNavbar.Item>Tasks</DashboardNavbar.Item>
-      <DashboardNavbar.Item>Profile</DashboardNavbar.Item>
-    </DashboardNavbar>
-  )
-}

package/src/stories/a/FeaturedOn.stories.jsx

@@ -1,33 +0,0 @@
-/* @pareto-engineering/generator-front 1.0.12 */
-import * as React from 'react'
-
-import { FeaturedOn } from 'ui'
-
-export default {
-  title        :'a/FeaturedOn',
-  component    :FeaturedOn,
-  subcomponents:{
-    // Item:FeaturedOn.Item
-  },
-  decorators:[
-    // storyfn => <div className="">{ storyfn() }</div>,
-  ],
-  argTypes:{
-    backgroundColor:{ control: 'color' },
-  },
-}
-
-export const Base = () => {
-  const featuresMap = [
-    { img: 'https://pareto-v1.s3-us-west-2.amazonaws.com/publication-logos/bloomberg.png', altText: 'Bloomberg logo', link: 'https://www.bloomberg.com/press-releases/2020-12-30/thiel-foundation-announces-2020-thiel-fellows' },
-    { img: 'https://pareto-v1.s3-us-west-2.amazonaws.com/publication-logos/marginal_revolution.png', altText: 'Marginal Revolution logo', link: 'https://marginalrevolution.com/marginalrevolution/2020/05/tuesday-assorted-links-261.html' },
-    { img: 'https://pareto-v1.s3-us-west-2.amazonaws.com/publication-logos/lysten_network.png', altText: 'Lysten Network logo', link: 'https://lystennetwork.com/3-things-to-consider-when-hiring-and-why-good-hiring-is-important/' },
-    { img: 'https://pareto-v1.s3-us-west-2.amazonaws.com/publication-logos/the_new_yorker.png', altText: 'New Yorker logo', link: 'https://www.newyorker.com/magazine/2020/12/07/what-if-you-could-outsource-your-to-do-list' },
-    { img: 'https://pareto-v1.s3-us-west-2.amazonaws.com/publication-logos/product_hunt.png', altText: 'Product Hunt logo', link: 'https://www.producthunt.com/posts/pareto' },
-    { img: 'https://pareto-v1.s3-us-west-2.amazonaws.com/publication-logos/stanford_daily.png', altText: 'Stanford Daily logo', link: 'https://www.stanforddaily.com/2020/04/28/stanford-startups-stay-strong-during-covid-19-crisis/' },
-  ]
-
-  return (
-    <FeaturedOn featuresMap={featuresMap} />
-  )
-}

package/src/stories/a/OvalIllustration.stories.jsx

@@ -1,36 +0,0 @@
-/* @pareto-engineering/generator-front 1.0.12 */
-import * as React from 'react'
-
-import { OvalIllustration } from 'ui'
-
-export default {
-  title        :'a/OvalIllustration',
-  component    :OvalIllustration,
-  subcomponents:{
-    // Item:OvalIllustration.Item
-  },
-  decorators:[
-    // storyfn => <div className="">{ storyfn() }</div>,
-  ],
-  argTypes:{
-    backgroundColor:{ control: 'color' },
-  },
-}
-
-export const WithBackground = () => (
-  <OvalIllustration
-    backgroundColor="background3"
-    src="https://www.azernews.az/media/pictures/company_picture.jpg"
-    alt="illustration"
-    ovalBackground
-    layout="right"
-  />
-)
-
-export const WithoutBackground = () => (
-  <OvalIllustration
-    src="https://www.azernews.az/media/pictures/company_picture.jpg"
-    alt="illustration"
-    layout="left"
-  />
-)

package/src/stories/a/Shapes.stories.jsx

@@ -1,125 +0,0 @@
-/* @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:{
-    verticalAlign  :{ control: 'select' },
-    horizontalAlign:{ 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',
-  verticalAlign  :'flex-end',
-  horizontalAlign:'center',
-  color          :'background6',
-  shape          :'triangle',
-}
-
-export const HalfEllipses = Template.bind({})
-HalfEllipses.args = {
-  height       :'25em',
-  verticalAlign:'flex-end',
-  color        :'background3',
-  shape        :'half-ellipses',
-}
-
-export const Ellipse = Template.bind({})
-Ellipse.args = {
-  height       :'30em',
-  verticalAlign:'flex-end',
-  color        :'main3',
-  shape        :'ellipse',
-}
-
-export const HalfEllipse = Template.bind({})
-HalfEllipse.args = {
-  height       :'25em',
-  verticalAlign:'flex-end',
-  color        :'background3',
-  shape        :'half-ellipse',
-}
-
-export const Diamonds = Template.bind({})
-Diamonds.args = {
-  height       :'30em',
-  verticalAlign:'flex-end',
-  color        :'background4',
-  shape        :'diamonds',
-}
-
-export const Rectangles = Template.bind({})
-Rectangles.args = {
-  height       :'30em',
-  verticalAlign:'flex-end',
-  color        :'background5',
-  shape        :'rectangles',
-}
-
-export const Circle = Template.bind({})
-Circle.args = {
-  height       :'30em',
-  verticalAlign:'flex-end',
-  color        :'background5',
-  shape        :'circle',
-}
-
-export const HalfCircle = Template.bind({})
-HalfCircle.args = {
-  height       :'30em',
-  verticalAlign:'flex-end',
-  color        :'background4',
-  shape        :'half-circle',
-}
-
-export const Ellipses = Template.bind({})
-Ellipses.args = {
-  height       :'30em',
-  verticalAlign:'flex-end',
-  color        :'background4',
-  shape        :'ellipses',
-}
-
-export const Spiral = Template.bind({})
-Spiral.args = {
-  height         :'100em',
-  verticalAlign  :'center',
-  horizontalAlign:'center',
-  color          :'background6',
-  shape          :'spiral',
-}
-
-export const RotatedEllipses = Template.bind({})
-RotatedEllipses.args = {
-  height         :'60em',
-  verticalAlign  :'center',
-  horizontalAlign:'center',
-  color          :'background5',
-  shape          :'rotated-ellipses',
-}

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

@@ -1,31 +0,0 @@
-/* @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/b/Card.stories.jsx

@@ -1,36 +0,0 @@
-/* @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/Metrics.stories.jsx

@@ -1,62 +0,0 @@
-/* @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

@@ -1,62 +0,0 @@
-/* @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

@@ -1,34 +0,0 @@
-/* @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/c/Hero.stories.jsx

@@ -1,46 +0,0 @@
-/* @pareto-engineering/generator-front 1.0.9 */
-import * as React from 'react'
-
-import {
-  SVG, Button, Hero, Title,
-} from 'ui'
-
-export default {
-  title        :'c/Hero',
-  component    :Hero,
-  subcomponents:{
-    // Item:Hero.Item
-  },
-  decorators:[
-    // storyfn => <div className="">{ storyfn() }</div>,
-  ],
-  argTypes:{
-    backgroundColor:{ control: 'color' },
-  },
-}
-
-export const Base = () => (
-  <Hero
-    title={(
-      <Title
-        heading={(
-          <>
-            Say no to busywork.
-            <br />
-            Get back to changing the world
-          </>
-)}
-        subtitle="Send us the repetitive tasks you don't have time for. Focus on the critical tasks only you can do."
-      />
-    )}
-    illustration={(
-      <SVG />
-    )}
-    cta={(
-      <>
-        <Button className="x-primary">Free trial</Button>
-        <p className="s-1 v1 mt-v">No credit card required. Cancel anytime.</p>
-      </>
-)}
-  />
-)

package/src/stories/f/CheckboxInput.stories.jsx

@@ -1,37 +0,0 @@
-/* @pareto-engineering/generator-front 1.0.12 */
-import * as React from 'react'
-import { Formik, Form } from 'formik'
-
-import { CheckboxInput, FormDebugger } from 'ui'
-
-export default {
-  title        :'f/fields/CheckboxInput',
-  component    :CheckboxInput,
-  subcomponents:{
-    // Item:CheckboxInput.Item
-  },
-  decorators:[
-    (storyfn) => (
-      <Formik
-        initialValues={{ businessTypes: [] }}
-      >
-        <Form>
-          { storyfn() }
-        </Form>
-      </Formik>
-    ),
-  ],
-  argTypes:{
-    backgroundColor:{ control: 'color' },
-  },
-}
-
-export const Base = () => (
-  <div className="y-background1 b-y">
-    <CheckboxInput value="Business to customer" name="businessTypes">Business to customer</CheckboxInput>
-    <CheckboxInput value="Business to business" name="businessTypes">Business to business</CheckboxInput>
-    <CheckboxInput value="E-commerce" name="businessTypes">E-commerce</CheckboxInput>
-    <CheckboxInput value="Marketplace" name="businessTypes">Marketplace</CheckboxInput>
-    <FormDebugger />
-  </div>
-)

package/src/stories/f/RadioInput.stories.jsx

@@ -1,37 +0,0 @@
-/* @pareto-engineering/generator-front 1.0.12 */
-import * as React from 'react'
-import { Formik, Form } from 'formik'
-
-import { RadioInput, FormDebugger } from 'ui'
-
-export default {
-  title        :'f/fields/RadioInput',
-  component    :RadioInput,
-  subcomponents:{
-    // Item:RadioInput.Item
-  },
-  decorators:[
-    (storyfn) => (
-      <Formik
-        initialValues={{ companySize: '' }}
-      >
-        <Form>
-          { storyfn() }
-        </Form>
-      </Formik>
-    ),
-  ],
-  argTypes:{
-    backgroundColor:{ control: 'color' },
-  },
-}
-
-export const Base = () => (
-  <>
-    <RadioInput value="1-3" name="companySize">1-3</RadioInput>
-    <RadioInput value="4-7" name="companySize">4-7</RadioInput>
-    <RadioInput value="8-10" name="companySize">8-10</RadioInput>
-    <RadioInput value="11-20" name="companySize">11-20</RadioInput>
-    <FormDebugger />
-  </>
-)

package/src/stories/f/TaskRecommendationInput.stories.jsx

@@ -1,38 +0,0 @@
-/* @pareto-engineering/generator-front 1.0.12 */
-import * as React from 'react'
-import { Formik, Form } from 'formik'
-import { TaskRecommendationInput } from 'ui'
-
-export default {
-  title        :'f/fields/TaskRecommendationInput',
-  component    :TaskRecommendationInput,
-  subcomponents:{
-    // Item:TaskRecommendation.Item
-  },
-  decorators:[
-    (storyfn) => (
-      <Formik
-        initialValues={{ taskRecommendations: [] }}
-      >
-        <Form>
-          { storyfn() }
-        </Form>
-      </Formik>
-    ),
-  ],
-  argTypes:{
-    backgroundColor:{ control: 'color' },
-  },
-}
-
-export const Base = () => (
-  <div className="y-background1 b-y v2 p-v" style={{ height: '100%' }}>
-    <TaskRecommendationInput
-      name="taskRecommendations"
-      value="businessTypes"
-      oneLiner="Build a list of contacts at businesses based on my criteria for potential customers"
-      label="Find potential business customers"
-      image="/Fundraising.svg"
-    />
-  </div>
-)