@pareto-engineering/design-system 0.0.1-alpha.8 → 2.0.0-alpha.2

package/src/local.scss

@@ -1,13 +1,9 @@
 @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap");
 
 :root {
-  --border-radius: .4em;
   --font-default: inter, helvetica, helvetica neue, arial, verdana, sans-serif;
-  --primary-color: #8990b3;
-  --theme-border: 1px solid var(--metadata);
 }
 
-
 html {
   font-family: var(--font-default);
   font-size: 18px;

package/src/stories/StyleGuide/colors.stories.mdx

@@ -2,7 +2,6 @@ import { Meta, ColorItem, ColorPalette } from '@storybook/addon-docs/blocks';
 
 import { 
   brandMap, 
-  wheelMap, 
   modalsMap, 
   uiMap ,
   smMap,
@@ -29,15 +28,6 @@ Color are collections of colors that put together, make a UI theme.
      />
    ) }
  </ColorPalette>
- <ColorPalette>
-   {
-     wheelMap.map((e,i) =>
-       <ColorItem
-         key={i}
-         { ...e }
-       />
-     ) }
- </ColorPalette>
  <ColorPalette>
    { modalsMap.map((e,i) =>
      <ColorItem

package/src/stories/StyleGuide/cssClasses.stories.mdx

@@ -0,0 +1,16 @@
+import { Meta} from '@storybook/addon-docs/blocks';
+
+<Meta title="StyleGuide/CSSClasses" />
+
+# CSS Classes
+
+The CSS classes are defined in [@pareto-engineering/styles/src/swatch](https://github.com/HelloPareto/styles/tree/main/src/swatch) and make use of the open source library [@aztlan/swatch](https://github.com/AztlanEngineering/swatch).
+
+## Font Sizes
+
+Color are collections of colors that put together, make a UI theme.
+
+## Padding / Margin
+
+Color are collections of colors that put together, make a UI theme.
+

package/src/stories/StyleGuide/helpers.js

@@ -1,6 +1,6 @@
 import {
   THEME,
-  WHEEL,
+  // WHEEL,
   MODALS,
   UI,
   SM,
@@ -23,18 +23,26 @@ const getColorMap = (prefix, list) => {
 }
 
 const brandMap = getColorMap('colorschemes.light.brand', THEME)
-const wheelMap = getColorMap('colorschemes.light.wheel', WHEEL)
+// const wheelMap = getColorMap('colorschemes.light.wheel', WHEEL)
 const modalsMap = getColorMap('colorschemes.light.modals', MODALS)
 const uiMap = getColorMap('colorschemes.light.ui', UI)
 
 const smMap = getColorMap('palettes.social-media', SM)
 const monochromeMap = getColorMap('palettes.momochrome', MONOCHROME)
 
+const charList = [' ', '!', '"', '#', '$', '%', '&', '\'', '(', ')', '*', '+', ',', '-', '.', '/',
+  '0', '1', '2', '3', '4', '5', '6', '7', '8', '9', ':', ';', '<', '=', '>', '?',
+  '@', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P',
+  'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', '[', '\\', ']', '^', '_', '`',
+  'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't',
+  'u', 'v', 'w', 'x', 'y', 'z', '{', '|', '}', '~']
+
 export {
   brandMap,
-  wheelMap,
+  // wheelMap,
   modalsMap,
   uiMap,
   smMap,
   monochromeMap,
+  charList,
 }

package/src/stories/StyleGuide/icons.stories.mdx

@@ -0,0 +1,29 @@
+import { Meta, IconGallery, IconItems } from '@storybook/addon-docs/blocks';
+
+import { 
+  charList
+} from './helpers';
+
+<Meta title="StyleGuide/Icons" />
+
+
+# Icons                                                                                                                             
+                                                                                                                                    
+The icons are defined in [@pareto-engineering/assets/fonts/icons.woff](https://github.com/HelloPareto/assets/tree/master/fonts),              
+imported in [@pareto-engineering/styles/src/stylebook.scss](https://github.com/HelloPareto/styles/blob/master/src/stylebook.scss).            
+                                                                                                                                    
+To add more fonts, connect to [glyphter](https://glyphter.com).                                                                     
+                                                                                                                                    
+<div style={{ display:'grid', 'grid-template-columns':'repeat(auto-fill, minmax(100px, 150px))' }}>                                 
+{ charList.map(letter =>                                                                                                          
+<div>                                                                                                                               
+<div style={{ textAlign:'center', padding:'.5em', fontWeight:'bold', outline:'1px solid #DCDCDC', color:'#ACACAC' }}>               
+{ letter }                                                                                                                          
+</div>                                                                                                                              
+<div style={{ outline:'1px solid #DCDCDC', padding:'2em', 'text-align':'center', 'font-family':'icons', 'font-size':'2em' }}>       
+{ letter }                                                                                                                          
+</div>                                                                                                                              
+</div>                                                                                                                              
+) }                                                                                                                                 
+</div>
+

package/src/stories/a/AnimatedCounter.stories.jsx

@@ -0,0 +1,30 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { AnimatedCounter } from 'ui'
+
+export default {
+  title        :'a/AnimatedCounter',
+  component    :AnimatedCounter,
+  subcomponents:{
+    // Item:AnimatedCounter.Item
+  },
+  decorators:[
+    // storyfn => <div className="">{ storyfn() }</div>,
+  ],
+  argTypes:{
+    backgroundColor:{ control: 'color' },
+  },
+}
+
+export const Base = () => (
+  <AnimatedCounter delay={5} number={100} unit="%" description="graduated from college" />
+)
+
+export const TopDescription = () => (
+  <AnimatedCounter delay={5} descriptionPosition="top" number={100} unit="%" description="graduated from college" />
+)
+
+export const UnitBefore = () => (
+  <AnimatedCounter delay={5} unitPosition="before" number={100} unit="%" description="graduated from college" />
+)

package/src/stories/a/ContentCard.stories.jsx

@@ -0,0 +1,158 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { Title, Conversation, ContentCard } from 'ui'
+
+export default {
+  title        :'a/ContentCard',
+  component    :ContentCard,
+  subcomponents:{
+    'ContentCard.Section':ContentCard.Section,
+  },
+  decorators:[
+    // storyfn => <div className="">{ storyfn() }</div>,
+  ],
+  argTypes:{
+    backgroundColor:{ control: 'color' },
+  },
+}
+
+export const LayoutLeft = () => {
+  const conversations = [
+    {
+      message:'Hi Camille, please compile an assesment of top 5 firms/brand providers for the listed fields in the US.',
+      sender :'Camille',
+      from   :'ours',
+    },
+    {
+      message:'Hi Camille, please compile an assesment of top 4 firms/brand providers for the listed fields in the US.',
+      sender :'HUMBL',
+      from   :'theirs',
+    },
+    {
+      message:'Hi Camille, please compile an assesment of top 3 firms/brand providers for the listed fields in the US.',
+      sender :'Camille',
+      from   :'ours',
+    },
+  ]
+
+  return (
+    <div className="u1 p-u" style={{ backgroundColor: 'green' }}>
+      <ContentCard>
+        <ContentCard.Section layout="left" className="p-u">
+          <Title
+            heading="Task Followup"
+            className="content p-u"
+            headingAs="p"
+            headingClassName="heading h1"
+            subtitle="Camille shows Humbl the initial progress to verify that the work aligns with the needs. She shares the document populated with one hour of work"
+            subtitleClassName="subtitle"
+          />
+          <Conversation className="illustration">
+            {conversations.map((conversation) => (
+              <Conversation.Message key={conversation.message} {...conversation} />
+            ))}
+          </Conversation>
+        </ContentCard.Section>
+      </ContentCard>
+    </div>
+  )
+}
+
+export const LayoutRight = () => {
+  const conversations = [
+    {
+      message:'Hi Camille, please compile an assesment of top 5 firms/brand providers for the listed fields in the US.',
+      sender :'Camille',
+      from   :'ours',
+    },
+    {
+      message:'Hi Camille, please compile an assesment of top 4 firms/brand providers for the listed fields in the US.',
+      sender :'HUMBL',
+      from   :'theirs',
+    },
+    {
+      message:'Hi Camille, please compile an assesment of top 3 firms/brand providers for the listed fields in the US.',
+      sender :'Camille',
+      from   :'ours',
+    },
+  ]
+
+  return (
+    <div className="u1 p-u" style={{ backgroundColor: 'green' }}>
+      <ContentCard>
+        <ContentCard.Section layout="right" className="p-u">
+          <Title
+            heading="Task Followup"
+            className="content p-u"
+            headingAs="p"
+            headingClassName="heading h1"
+            subtitle="Camille shows Humbl the initial progress to verify that the work aligns with the needs. She shares the document populated with one hour of work"
+            subtitleClassName="subtitle"
+          />
+          <Conversation className="illustration">
+            {conversations.map((conversation) => (
+              <Conversation.Message key={conversation.message} {...conversation} />
+            ))}
+          </Conversation>
+        </ContentCard.Section>
+      </ContentCard>
+    </div>
+  )
+}
+
+export const LayoutCenter = () => (
+  <div className="u1 p-u" style={{ backgroundColor: 'green' }}>
+    <ContentCard color="background">
+      <ContentCard.Section layout="center" className="p-u">
+        <p className="content p-u">
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit asperiores facilis,
+          praesentium porro accusantium id ducimus adipisci repudiandae ab totam, sit provident.
+          Quisquam aliquam facere delectus est vel illo nobis?
+        </p>
+      </ContentCard.Section>
+    </ContentCard>
+  </div>
+)
+
+export const ContentAfter = () => {
+  const conversations = [
+    {
+      message:'Hi Camille, please compile an assesment of top 5 firms/brand providers for the listed fields in the US.',
+      sender :'Camille',
+      from   :'ours',
+    },
+    {
+      message:'Hi Camille, please compile an assesment of top 4 firms/brand providers for the listed fields in the US.',
+      sender :'HUMBL',
+      from   :'theirs',
+    },
+    {
+      message:'Hi Camille, please compile an assesment of top 3 firms/brand providers for the listed fields in the US.',
+      sender :'Camille',
+      from   :'ours',
+    },
+  ]
+
+  return (
+    <div className="u1 p-u" style={{ backgroundColor: 'green' }}>
+      <ContentCard>
+        <ContentCard.Section layout="right" className="p-u" contentAfter>
+          <Title
+            heading="Task Followup"
+            className="content p-u"
+            headingAs="p"
+            headingClassName="heading h1"
+            subtitle="Camille shows Humbl the initial progress to verify that the work aligns with the needs. She shares the document populated with one hour of work"
+            subtitleClassName="subtitle"
+          />
+          <Conversation className="illustration">
+            {conversations.map((conversation) => (
+              <Conversation.Message key={conversation.message} {...conversation} />
+            ))}
+          </Conversation>
+        </ContentCard.Section>
+      </ContentCard>
+    </div>
+  )
+}

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

@@ -0,0 +1,46 @@
+/* @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 Humbl, please compile an assesment of top 5 firms/brand providers for the listed fields in the US.',
+      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',
+    },
+  ]
+
+  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,32 @@
+/* @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' },
+  },
+}
+
+export const True = () => (
+  <DotInfo booleanValue />
+)
+export const False = () => (
+  <DotInfo booleanValue={false} />
+)
+
+export const Nullish = () => (
+  <>
+    <DotInfo />
+    <DotInfo booleanValue={null} />
+  </>
+)

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/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,48 @@
+/* @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',
+    },
+    {
+      image:'https://pareto-v1.s3.us-west-2.amazonaws.com/profile-pictures/Lanie-Col-long.png',
+      name :'Lanie Col-long',
+      role :'Pareto Partner',
+    },
+    {
+      image:'https://pareto-v1.s3.us-west-2.amazonaws.com/profile-pictures/Camille-Arigo.jpg',
+      name :'Camillie Arigo',
+      role :'Pareto Partner',
+    },
+  ]
+
+  return (
+    <div className="x-background b-x v1 p-v">
+      <People>
+        {peopleMap.map((person) => (
+          <People.Person key={person.name} {...person} />
+        ))}
+      </People>
+    </div>
+  )
+}