@pareto-engineering/design-system 0.0.1-alpha.9 → 0.0.8-testing-id.0

package/src/stories/a/ProgressBar.stories.jsx

@@ -0,0 +1,84 @@
+/* @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' },
+    progress:{ control: 'number' },
+    color   :{ control: 'text' },
+    height  :{ control: 'text' },
+  },
+}
+
+const Template = (args) => <ProgressBar {...args} />
+
+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 = Template.bind({})
+Color.args = {
+  progress:70,
+  color   :'main1',
+}
+
+export const Height = Template.bind({})
+Height.args = {
+  ...Color.args,
+  height:'5em',
+}
+
+/*
+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,143 @@
+/* @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 InvertedTriangle = Template.bind({})
+InvertedTriangle.args = {
+  height         :'30em',
+  verticalAlign  :'flex-end',
+  horizontalAlign:'center',
+  color          :'background6',
+  shape          :'inverted-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',
+}
+
+export const IntersectingCircles = Template.bind({})
+IntersectingCircles.args = {
+  height         :'30em',
+  verticalAlign  :'center',
+  horizontalAlign:'center',
+  color          :'background5',
+  shape          :'intersecting-circles',
+}

package/src/stories/a/SnapScroller.stories.jsx

@@ -0,0 +1,98 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { SnapScroller } from 'ui'
+
+export default {
+  title        :'a/SnapScroller',
+  component    :SnapScroller,
+  subcomponents:{
+    // Item:SnapScroller.Item
+  },
+  decorators:[
+    // storyfn => <div className="">{ storyfn() }</div>,
+  ],
+  argTypes:{
+    backgroundColor:{ control: 'color' },
+  },
+}
+
+export const Base = () => {
+  // eslint-disable-next-line react/prop-types
+  const Card = ({ children }) => (
+    <div
+      className="card"
+      style={{
+        background:'var(--background1)', minWidth:'330px', height:'400px', padding:'var(--u)',
+      }}
+    >
+      { children }
+    </div>
+
+  )
+
+  return (
+    <SnapScroller style={{ background: 'var(--background4)' }} className="u1 pv-u">
+      <Card>
+        Some content here
+      </Card>
+      <Card>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam quis ornare lacus.
+        Maecenas eu mollis erat. Donec pretium blandit vulputate. Fusce scelerisque nibh
+        non euismod condimentum. Aenean non neque sem.
+      </Card>
+      <Card>
+        Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;
+        Phasellus pretium feugiat lorem nec varius.
+      </Card>
+      <Card>
+        Nam quis enim egestas, posuere felis ut, egestas tellus. Nulla facilisi.
+        Pellentesque euismod bibendum ex ac euismod. Etiam rutrum quam nec nisi bibendum,
+        sodales facilisis nunc dapibus. Nullam molestie magna efficitur dapibus pharetra.
+      </Card>
+      <Card>
+        Sed quis lacinia lacus. Nam id faucibus nisi, quis imperdiet erat. Sed ac iaculis elit.
+      </Card>
+    </SnapScroller>
+  )
+}
+
+export const NoScrollOnDesktop = () => {
+  // eslint-disable-next-line react/prop-types
+  const Card = ({ children }) => (
+    <div
+      className="card"
+      style={{
+        background:'var(--background1)', width:'330px', height:'400px', padding:'var(--u)',
+      }}
+    >
+      { children }
+    </div>
+
+  )
+
+  return (
+    <SnapScroller style={{ background: 'var(--background4)' }} className="u1 pv-u" noScrollOnDesktop>
+      <Card>
+        Some content here
+      </Card>
+      <Card>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam quis ornare lacus.
+        Maecenas eu mollis erat. Donec pretium blandit vulputate. Fusce scelerisque nibh
+        non euismod condimentum. Aenean non neque sem.
+      </Card>
+      <Card>
+        Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;
+        Phasellus pretium feugiat lorem nec varius.
+      </Card>
+      <Card>
+        Nam quis enim egestas, posuere felis ut, egestas tellus. Nulla facilisi. Pellentesque
+        euismod bibendum ex ac euismod. Etiam rutrum quam nec nisi bibendum, sodales facilisis
+        nunc dapibus. Nullam molestie magna efficitur dapibus pharetra.
+      </Card>
+      <Card>
+        Sed quis lacinia lacus. Nam id faucibus nisi, quis imperdiet erat. Sed ac iaculis elit.
+      </Card>
+    </SnapScroller>
+  )
+}

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

package/src/stories/a/Timestamp.stories.jsx

@@ -0,0 +1,98 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { Timestamp } from 'ui'
+
+import { subDays } from 'date-fns'
+
+export default {
+  title        :'a/Timestamp',
+  component    :Timestamp,
+  subcomponents:{
+    // Item:Timestamp.Item
+  },
+  decorators:[
+    // storyfn => <div className="">{ storyfn() }</div>,
+  ],
+  argTypes:{
+    // backgroundColor:{ control: 'color' },
+    dateFormat    :{ control: 'select' },
+    enabledFormats:{ control: 'select', options: ['distance', 'date', 'relative'] },
+  },
+}
+
+const date = Date.UTC(2022, 9, 15)
+// const timezoneCorrectedDate = addMinutes(date, date.getTimezoneOffset())
+
+const Template = (args) => <Timestamp {...args} />
+
+export const Base = Template.bind({})
+Base.args = {
+  time:date,
+}
+
+export const DateFormat = Template.bind({})
+DateFormat.args = {
+  ...Base.args,
+  enabledFormats:['date'],
+  dateFormat    :'yyyy-MM-dd\' at \'HH:mm',
+}
+
+export const DistanceFormat = Template.bind({})
+DistanceFormat.args = {
+  time          :subDays(date, 3),
+  enabledFormats:['distance', 'date'],
+
+}
+
+export const RelativeFormat = Template.bind({})
+RelativeFormat.args = {
+  ...DistanceFormat.args,
+  enabledFormats:['date', 'relative'],
+}
+
+export const Prefix = Template.bind({})
+Prefix.args = {
+  ...Base.args,
+  prefix:(
+    <strong>
+      Updated :
+    </strong>
+  ),
+}
+
+// export const DistanceFormatMaxDays = () => (
+//   <>
+//     This should appear as distance
+//     <Timestamp
+//       time={subDays(Date.now(), 3)}
+//       enabledFormats={['distance', 'date']}
+//       distanceMaxDays={4}
+//     />
+//     <br />
+
+//     But this should appear as date
+//     <Timestamp
+//       time={subDays(Date.now(), 5)}
+//       enabledFormats={['distance', 'date']}
+//       distanceMaxDays={4}
+//     />
+//   </>
+// )
+
+// export const RelativeFormatMaxDays = () => (
+//   <>
+//     This should appear as distance
+//     <Timestamp
+//       time={subDays(Date.now(), 3)}
+//       enabledFormats={['relative', 'date']}
+//       relativeMaxDays={4}
+//     />
+//     But this should appear as date
+//     <Timestamp
+//       time={subDays(Date.now(), 5)}
+//       enabledFormats={['relative', 'date']}
+//       relativeMaxDays={4}
+//     />
+//   </>
+// )