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

package/src/stories/a/Conversation.stories.jsx

@@ -0,0 +1,123 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { Conversation } from 'ui'
+
+export default {
+  title        :'a/Conversation',
+  component    :Conversation,
+  subcomponents:{
+    'Conversation.Message':Conversation.Message,
+  },
+  decorators:[
+    // storyfn => <div className="">{ storyfn() }</div>,
+  ],
+  argTypes:{
+    backgroundColor:{ control: 'color' },
+  },
+}
+
+export const Base = () => {
+  const conversations = [
+    {
+      message:'Hi Camille, please compile an assesment of top 5 firms/brand providers for the listed fields in the US.',
+      sender :'HUMBL',
+      from   :'theirs',
+    },
+    {
+      message:'Hi Morgan! Here is the database we prepared for you.',
+      sender :'CAMILLE',
+      from   :'ours',
+    },
+    {
+      message:'Hi Camille, please compile an assesment of top 6 firms/brand providers for the listed fields in the US.',
+      sender :'HUMBL',
+      from   :'theirs',
+    },
+    {
+      message:'Hi Morgan! Here is the database we prepared for you.',
+      sender :'CAMILLE',
+      from   :'ours',
+    },
+  ]
+
+  return (
+    <Conversation>
+      {conversations.map((conversation) => (
+        <Conversation.Message key={conversation.message} {...conversation} />
+      ))}
+    </Conversation>
+  )
+}
+
+export const WithTriangle = () => {
+  const conversations = [
+    {
+      message:'Hi Camille, please compile an assesment of top 5 firms/brand providers for the listed fields in the US.',
+      sender :'HUMBL',
+      from   :'theirs',
+    },
+    {
+      message:'Hi Morgan! Here is the database we prepared for you.',
+      sender :'CAMILLE',
+      from   :'ours',
+    },
+    {
+      message:'Hi Camille, please compile an assesment of top 5 firms/brand providers for the listed fields in the US.',
+      sender :'HUMBL',
+      from   :'theirs',
+    },
+    {
+      message:'Hi Morgan! Here is the database we prepared for you.',
+      sender :'CAMILLE',
+      from   :'ours',
+    },
+  ]
+
+  return (
+    <Conversation
+      hasTriangle
+    >
+      {conversations.map((conversation) => (
+        <Conversation.Message key={conversation.message} {...conversation} />
+      ))}
+    </Conversation>
+  )
+}
+
+export const WithAttachment = () => {
+  const conversations = [
+    {
+      message:'Hi Camille, please compile an assesment of top 5 firms/brand providers for the listed fields in the US.',
+      sender :'HUMBL',
+      from   :'theirs',
+    },
+    {
+      message        :'Hi Morgan! Here is the database we prepared for you.',
+      sender         :'CAMILLE',
+      from           :'ours',
+      attachment     :'spreadsheet.xlsx',
+      attachmentColor:'main4',
+    },
+    {
+      message:'Hi Camille, please compile an assesment of top 5 firms/brand providers for the listed fields in the US.',
+      sender :'HUMBL',
+      from   :'theirs',
+    },
+    {
+      message        :'Hi Morgan! Here is the database we prepared for you.',
+      sender         :'CAMILLE',
+      from           :'ours',
+      attachment     :'spreadsheet.xlsx',
+      attachmentColor:'main4',
+    },
+  ]
+
+  return (
+    <Conversation>
+      {conversations.map((conversation) => (
+        <Conversation.Message key={conversation.message} {...conversation} />
+      ))}
+    </Conversation>
+  )
+}

package/src/stories/a/CustomerLogos.stories.jsx

@@ -0,0 +1,35 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { CustomerLogos } from 'ui'
+
+export default {
+  title        :'a/CustomerLogos',
+  component    :CustomerLogos,
+  subcomponents:{
+    // Item:CustomerLogos.Item
+  },
+  decorators:[
+    // storyfn => <div className="">{ storyfn() }</div>,
+  ],
+  argTypes:{
+    backgroundColor:{ control: 'color' },
+  },
+}
+
+export const Base = () => {
+  const logosMap = [
+    { img: 'https://pareto-v1.s3-us-west-2.amazonaws.com/community-logos/1517-logo.png', altText: '1517 VC logo' },
+    { img: 'https://pareto-v1.s3-us-west-2.amazonaws.com/community-logos/yc-logo.png', altText: 'YC logo' },
+    { img: 'https://pareto-v1.s3-us-west-2.amazonaws.com/community-logos/stanford-logo.png', altText: 'Stanford University logo' },
+    { img: 'https://pareto-v1.s3-us-west-2.amazonaws.com/community-logos/startx-logo.png', altText: 'StartX logo' },
+    { img: 'https://pareto-v1.s3-us-west-2.amazonaws.com/community-logos/techstars-logo.png', altText: 'Techstars logo' },
+    { img: 'https://pareto-v1.s3-us-west-2.amazonaws.com/community-logos/contrary-logo.png', altText: 'Contrary Capital logo' },
+    { img: 'https://pareto-v1.s3-us-west-2.amazonaws.com/community-logos/alchemist-logo.png', altText: 'Alchemist Accelerator logo' },
+    { img: 'https://pareto-v1.s3-us-west-2.amazonaws.com/community-logos/pear-logo.png', altText: 'Pear logo' },
+  ]
+
+  return (
+    <CustomerLogos logosMap={logosMap} />
+  )
+}

package/src/stories/a/CustomerStat.stories.jsx

@@ -0,0 +1,22 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { CustomerStat } from 'ui'
+
+export default {
+  title        :'a/CustomerStat',
+  component    :CustomerStat,
+  subcomponents:{
+    // Item:AnimatedCounter.Item
+  },
+  decorators:[
+    // storyfn => <div className="">{ storyfn() }</div>,
+  ],
+  argTypes:{
+    backgroundColor:{ control: 'color' },
+  },
+}
+
+export const Base = () => (
+  <CustomerStat description="Company Name" label="Pareto Inc." />
+)

package/src/stories/a/DotInfo.stories.jsx

@@ -0,0 +1,33 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { DotInfo } from 'ui'
+
+export default {
+  title        :'a/DotInfo',
+  component    :DotInfo,
+  subcomponents:{
+    // Item:DotInfo.Item
+  },
+  decorators:[
+    // storyfn => <div className="">{ storyfn() }</div>,
+  ],
+  argTypes:{
+    // backgroundColor:{ control: 'color' },
+    booleanValue:{ control: 'boolean' },
+  },
+}
+
+const Template = (args) => <DotInfo {...args} />
+
+export const True = Template.bind({})
+True.args = {
+  booleanValue:true,
+}
+
+export const False = Template.bind({})
+False.args = {
+  booleanValue:false,
+}
+
+export const Nullish = Template.bind({})

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

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

@@ -0,0 +1,49 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+import { Label } from 'ui'
+import { ALL_COLORS } from 'stories/colors'
+
+export default {
+  title        :'a/Label',
+  component    :Label,
+  subcomponents:{
+    // Item:ColumnLabel.Item
+  },
+  decorators:[
+    // storyfn => <div className="">{ storyfn() }</div>,
+  ],
+  argTypes:{
+    color    :{ control: { type: 'select', options: ALL_COLORS } },
+    isCompact:{ control: { type: 'boolean' } },
+    isGhost  :{ control: { type: 'boolean' } },
+  },
+}
+
+const Template = (args) => <Label {...args} />
+
+export const Base = Template.bind({})
+Base.args = {
+  children:'Label Value',
+}
+
+const MultiTemplate = (args) => ALL_COLORS.map((color) => (
+  <Label {...args} color={color} key={color}>
+    This is a
+    {' '}
+    {color}
+    {' '}
+    label
+  </Label>
+))
+
+export const Normal = MultiTemplate.bind({})
+
+export const Ghost = MultiTemplate.bind({})
+Ghost.args = {
+  isGhost:true,
+}
+
+export const Compact = MultiTemplate.bind({})
+Compact.args = {
+  isCompact:true,
+}

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

@@ -0,0 +1,59 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { OvalIllustration } from 'ui'
+import { ALL_COLORS } from 'stories/colors'
+
+export default {
+  title        :'a/OvalIllustration',
+  component    :OvalIllustration,
+  subcomponents:{
+    // Item:OvalIllustration.Item
+  },
+  decorators:[
+    // storyfn => <div className="">{ storyfn() }</div>,
+  ],
+  argTypes:{
+    mobileSize     :{ control: 'text' },
+    tabletSize     :{ control: 'text' },
+    desktopSize    :{ control: 'text' },
+    ovalBackground :{ control: 'boolean' },
+    backgroundColor:{ control: { type: 'select', options: ALL_COLORS } },
+    src            :{ control: 'text' },
+    alt            :{ control: 'text' },
+    layout         :{
+      options:['right', 'left'],
+      control:{ type: 'select' },
+    },
+  },
+}
+
+const Template = ({ ...rest }) => (
+  <OvalIllustration {...rest} />
+)
+
+export const WithBackground = Template.bind({})
+WithBackground.args = {
+  ovalBackground :'true',
+  backgroundColor:'background3',
+  src            :'https://www.azernews.az/media/pictures/company_picture.jpg',
+  alt            :'illustration',
+  layout         :'right',
+}
+
+export const WithoutBackground = Template.bind({})
+WithoutBackground.args = {
+  src   :'https://www.azernews.az/media/pictures/company_picture.jpg',
+  alt   :'illustration',
+  layout:'right',
+}
+
+export const ChangableSizes = Template.bind({})
+ChangableSizes.args = {
+  mobileSize :'15em',
+  tabletSize :'20em',
+  desktopSize:'25em',
+  src        :'https://www.azernews.az/media/pictures/company_picture.jpg',
+  alt        :'illustration',
+  layout     :'right',
+}

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

@@ -0,0 +1,106 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { useState, useRef } from 'react'
+
+import { Popover } from 'ui'
+
+import lorem from '../utils/lorem'
+
+export default {
+  title     :'a/Popover',
+  component :Popover,
+  // subcomponents:{
+  //   Item   :Popover.Item,
+  // },
+  decorators:[
+    // storyfn => <div className="">{ storyfn() }</div>,
+  ],
+  argTypes:{
+    preferredPrimaryOrder:{
+      options:['bottom', 'top', 'left', 'right'],
+      control:{ type: 'object' },
+    },
+    preferredSecondaryOrder:{
+      options:['left', 'right'],
+      control:{ type: 'object' },
+    },
+  },
+}
+
+const Template = ({ ...props }) => {
+  const parentRef = useRef(null)
+  const [isOpen, setIsOpen] = useState(false)
+
+  const handleClick = () => {
+    setIsOpen(!isOpen)
+  }
+
+  return (
+    <main
+      className="u1 ph-u"
+    >
+      <div>
+        {lorem}
+        {lorem}
+      </div>
+
+      <div
+        style={{
+          position :'relative',
+          textAlign:'center',
+          width    :'min-content',
+          margin   :'0 auto',
+        }}
+        ref={parentRef}
+      >
+        <button
+          type="button"
+          onClick={handleClick}
+        >
+          { isOpen ? 'Close Popover' : 'Open Popover'}
+        </button>
+        <Popover
+          isOpen={isOpen}
+          parentRef={parentRef}
+          {...props}
+        >
+          <ul>
+            <li>Company</li>
+            <li>Pareto Engineers</li>
+            <li>Pareto Core Team</li>
+          </ul>
+        </Popover>
+      </div>
+
+      <div>
+        {lorem}
+        {lorem}
+      </div>
+    </main>
+  )
+}
+
+export const BottomLeft = Template.bind({})
+BottomLeft.args = {
+  preferredPrimaryOrder  :['bottom', 'top', 'left', 'right'],
+  preferredSecondaryOrder:['left', 'right', 'bottom', 'top'],
+}
+
+export const BottomRight = Template.bind({})
+BottomRight.args = {
+  preferredPrimaryOrder  :['bottom', 'top', 'left', 'right'],
+  preferredSecondaryOrder:['right', 'left', 'bottom', 'top'],
+}
+
+export const TopLeft = Template.bind({})
+TopLeft.args = {
+  preferredPrimaryOrder  :['top', 'bottom', 'left', 'right'],
+  preferredSecondaryOrder:['left', 'right', 'top', 'bottom'],
+}
+
+export const TopRight = Template.bind({})
+TopRight.args = {
+  preferredPrimaryOrder  :['top', 'bottom', 'left', 'right'],
+  preferredSecondaryOrder:['right', 'left', 'top', 'bottom'],
+}