@pareto-engineering/design-system 2.0.0-alpha.8 → 3.0.0-alpha.18

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

package/src/ui/a/ContentCard/common/Section/Section.jsx

@@ -1,79 +0,0 @@
-/* @pareto-engineering/generator-front 1.0.12 */
-import * as React from 'react'
-
-import PropTypes from 'prop-types'
-
-import styleNames from '@pareto-engineering/bem'
-
-// Local Definitions
-
-const baseClassName = styleNames.base
-
-const componentClassName = 'section'
-
-/**
- * This is the component description.
- */
-const Section = ({
-  id,
-  className:userClassName,
-  style,
-  children,
-  layout,
-  contentAfter,
-  // ...otherProps
-}) => (
-  <div
-    id={id}
-    className={[
-      baseClassName,
-      componentClassName,
-      userClassName,
-      layout === 'left' && 'layout-left',
-      layout === 'right' && 'layout-right',
-      layout === 'center' && 'layout-center',
-      contentAfter && 'content-after',
-    ]
-      .filter((e) => e)
-      .join(' ')}
-    style={style}
-  >
-    {children}
-  </div>
-)
-
-Section.propTypes = {
-  /**
-   * The HTML id for this element
-   */
-  id:PropTypes.string,
-
-  /**
-   * The HTML class names for this element
-   */
-  className:PropTypes.string,
-
-  /**
-   * The React-written, css properties for this element.
-   */
-  style:PropTypes.objectOf(PropTypes.string),
-
-  /**
-   *  The children JSX
-   */
-  children    :PropTypes.node,
-  /**
-   * The main content position
-   */
-  layout      :PropTypes.oneOf(['left', 'right', 'center']),
-  /**
-   * Whether content should appear before or after illustration
-   */
-  contentAfter:PropTypes.bool,
-}
-
-Section.defaultProps = {
-  contentAfter:false,
-}
-
-export default Section

package/src/ui/a/ContentCard/common/index.js

@@ -1 +0,0 @@
-export { Section } from './Section'

package/src/ui/a/ContentCard/index.js

@@ -1,2 +0,0 @@
-/* @pareto-engineering/generator-front 1.0.12 */
-export { default as ContentCard } from './ContentCard'

package/src/ui/a/ContentCard/styles.scss

@@ -1,78 +0,0 @@
-/* @pareto-engineering/generator-front 1.0.12 */
-
-@use "@pareto-engineering/bem";
-@use "@aztlan/stylebook/src/mixins";
-@use "@aztlan/stylebook/src/globals" as *;
-
-
-$default-padding:var(--u);
-$default-card-background: var(--y);
-$default-content-width:minmax(350px, 500px);
-
-.#{bem.$base}.content-card {
-  background-color: $default-card-background;
-  border-radius: var(--theme-border-radius);
-
-  .#{bem.$base}.section {
-    column-gap: var(--u);
-    display: grid;
-  }
-
-  .layout-left {
-    grid-template-areas:
-      "content"
-      "illustration";
-  }
-
-  .layout-right {
-    grid-template-areas:
-      "content"
-      "illustration";
-
-    .illustration {
-      margin-bottom: 0;
-    }
-  }
-
-  .layout-center {
-    grid-template-areas:
-      "spacer"
-      "content"
-      "spacer2";
-  }
-
-  .content-after {
-    grid-template-areas:
-      "illustration"
-      "content";
-  }
-
-  .content {
-    grid-area: content;
-  }
-
-  .illustration {
-    grid-area: illustration;
-  }
-
-  .heading {
-    margin-bottom: 0;
-  }
-
-  @include mixins.media($from:$sm-md) {
-    .layout-left {
-      grid-template-areas: "content illustration";
-      grid-template-columns: $default-content-width 1fr;
-    }
-
-    .layout-right {
-      grid-template-areas: "illustration content";
-      grid-template-columns: 1fr $default-content-width;
-    }
-
-    .layout-center {
-      grid-template-areas: "spacer content spacer2";
-      grid-template-columns: 1fr minmax(450px, 650px) 1fr;
-    }
-  }
-}