@pareto-engineering/design-system 4.0.0-alpha.4 → 4.0.0-alpha.41

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

@@ -21,63 +21,32 @@ 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',
+      sender :'Humbl',
       from   :'theirs',
     },
     {
       message:'Hi Morgan! Here is the database we prepared for you.',
-      sender :'CAMILLE',
+      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',
+      message:'That looks amazing',
+      sender :'Humbl',
       from   :'theirs',
     },
     {
-      message:'Hi Morgan! Here is the spreadsheet 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 6 firms/brand providers for the listed fields in the US.',
-      sender :'HUMBL',
+      message:'Thank you for the great work, can we also get this information in a spreadsheet?',
       from   :'theirs',
     },
     {
       message:'Hi Morgan! Here is the spreadsheet we prepared for you.',
-      sender :'CAMILLE',
+      sender :'Camille',
       from   :'ours',
     },
   ]
 
   return (
-    <Conversation
-      hasTriangle
-    >
+    <Conversation>
       {conversations.map((conversation) => (
         <Conversation.Message key={conversation.message} {...conversation} />
       ))}
@@ -89,24 +58,24 @@ 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',
+      sender :'Humbl',
       from   :'theirs',
     },
     {
       message        :'Hi Morgan! Here is the database we prepared for you.',
-      sender         :'CAMILLE',
+      sender         :'Camille',
       from           :'ours',
       attachment     :'spreadsheet.xlsx',
       attachmentColor:'main4',
     },
     {
       message:'Hi Camille, please compile an assesment of top 6 firms/brand providers for the listed fields in the US.',
-      sender :'HUMBL',
+      sender :'Humbl',
       from   :'theirs',
     },
     {
       message        :'Hi Morgan! Here is the spreadsheet we prepared for you.',
-      sender         :'CAMILLE',
+      sender         :'Camille',
       from           :'ours',
       attachment     :'spreadsheet.xlsx',
       attachmentColor:'main4',

package/src/stories/a/MetaCard.stories.jsx

@@ -0,0 +1,35 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { MetaCard } from 'ui'
+
+export default {
+  title        :'a/MetaCard',
+  component    :MetaCard,
+  subcomponents:{},
+  decorators   :[],
+  controls     :{
+    hasBackgroundBlur:{ type: 'boolean' },
+  },
+}
+
+const Template = (args) => (
+  <div style={{ backgroundImage: 'linear-gradient(purple, white)', padding: '1em' }}>
+    <MetaCard {...args}>
+      <h3 style={{ gridColumn: '2/-1' }}>
+        Column 2
+      </h3>
+      <p style={{ gridColumn: '3/-1' }}>
+        Column 3
+      </p>
+    </MetaCard>
+  </div>
+)
+
+export const Base = Template.bind({})
+Base.args = {}
+
+export const WithBlur = Template.bind({})
+WithBlur.args = {
+  hasBackgroundBlur:true,
+}

package/src/stories/a/People.stories.jsx

@@ -40,7 +40,7 @@ export const Base = () => {
   ]
 
   return (
-    <div className="x-background1 b-x v1 p-v">
+    <div className="x-background-far b-x v1 p-v">
       <People>
         {peopleMap.map((person) => (
           <People.Person key={person.name} {...person} />
@@ -61,7 +61,27 @@ export const OnePerson = () => {
   ]
 
   return (
-    <div className="x-background1 b-x v1 p-v">
+    <div className="x-background-far b-x v1 p-v">
+      <People>
+        {peopleMap.map((person) => (
+          <People.Person key={person.name} {...person} />
+        ))}
+      </People>
+    </div>
+  )
+}
+
+export const WithoutRole = () => {
+  const peopleMap = [
+    {
+      image:'https://pareto-v1.s3.us-west-2.amazonaws.com/profile-pictures/Camille-Arigo.jpg',
+      name :'Camillie Arigo',
+      color:'background4',
+    },
+  ]
+
+  return (
+    <div className="x-background-far b-x v1 p-v">
       <People>
         {peopleMap.map((person) => (
           <People.Person key={person.name} {...person} />

package/src/stories/a/Quote.stories.jsx

@@ -18,7 +18,7 @@ export default {
 }
 
 export const Base = () => (
-  <div className="y-background1 b-y u1 p-u">
+  <div className="y-background-far b-y u1 p-u">
     <Quote
       author="Austen Spoonts"
     >

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

@@ -23,7 +23,7 @@ export const Base = () => {
     <div
       className="card"
       style={{
-        background:'var(--background1)', minWidth:'330px', height:'400px', padding:'var(--u)',
+        background:'var(--background-far)', minWidth:'330px', height:'400px', padding:'var(--u)',
       }}
     >
       { children }
@@ -63,7 +63,7 @@ export const NoScrollOnDesktop = () => {
     <div
       className="card"
       style={{
-        background:'var(--background1)', width:'330px', height:'400px', padding:'var(--u)',
+        background:'var(--background-far)', width:'330px', height:'400px', padding:'var(--u)',
       }}
     >
       { children }

package/src/stories/a/Spinner.stories.jsx

@@ -18,7 +18,7 @@ export default {
 }
 
 export const Base = () => (
-  <div className="y-background1 b-y">
+  <div className="y-background-far b-y">
 
     <Spinner />
   </div>

package/src/stories/a/TextSteps.stories.jsx

@@ -0,0 +1,19 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { TextSteps } from 'ui'
+
+export default {
+  title    :'a/TextSteps',
+  component:TextSteps,
+}
+
+const items = [
+  'Join Pareto in minutes. Share your business goals to match with a Project Partner.',
+  'Receive initial output in 24 hours. Give feedback to fine-tune results and level up your Pareto team.',
+  'Tap into economies of scale with tried and true playbooks: Benefit from strategic project recommendations. Enjoy continuous workflow improvement and documented learnings.',
+]
+
+export const Base = () => (
+  <div className="grid span-8 md-span-14"><TextSteps items={items} /></div>
+)

package/src/stories/a/Tip.stories.jsx

@@ -0,0 +1,28 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { Tip } from 'ui'
+
+export default {
+  title        :'a/Tip',
+  component    :Tip,
+  subcomponents:{
+    // Item:Quote.Item
+  },
+  decorators:[
+    // storyfn => <div className="">{ storyfn() }</div>,
+  ],
+  argTypes:{
+    color:{ control: 'color' },
+  },
+}
+
+const Template = (args) => (
+  <Tip {...args} />
+)
+
+export const Base = Template.bind({})
+Base.args = {
+  children:'Remember to wash your vegetables before eating them.',
+  color   :'main',
+}

package/src/stories/b/{Button.stories.jsx → Button/Button.stories.jsx}

@@ -19,6 +19,7 @@ export default {
     isGhost   :{ control: { type: 'boolean' } },
     isSimple  :{ control: { type: 'boolean' } },
     isAnimated:{ control: { type: 'boolean' } },
+    isGradient:{ control: { type: 'boolean' } },
   },
 }
 
@@ -57,6 +58,11 @@ Simple.args = {
   isSimple:true,
 }
 
+export const Gradient = MultipleTemplate.bind({})
+Gradient.args = {
+  isGradient:true,
+}
+
 export const Compact = MultipleTemplate.bind({})
 Compact.args = {
   isCompact:true,
@@ -105,3 +111,15 @@ ArrowRightSimple.args = {
   arrowDirection:'right',
   isSimple      :true,
 }
+
+export const DisabledArrowLeft = MultipleTemplate.bind({})
+DisabledArrowLeft.args = {
+  arrowDirection:'left',
+  disabled      :true,
+}
+
+export const DisabledArrowRight = MultipleTemplate.bind({})
+DisabledArrowRight.args = {
+  arrowDirection:'right',
+  disabled      :true,
+}

package/src/stories/b/Button/Group.stories.jsx

@@ -0,0 +1,35 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { Button } from 'ui'
+
+import { ALL_COLORS } from 'stories/colors'
+
+export default {
+  title     :'b/Button/Group',
+  component :Button.Group,
+  decorators:[
+    // (storyfn) => <Router>{storyfn()}</Router>,
+  ],
+  argTypes:{
+  },
+}
+
+const Template = (args) => (
+  <Button.Group {...args}>
+    {
+      ALL_COLORS.map((colorName) => (
+        <Button {...args} color={colorName} key={colorName}>
+          This is a
+          {' '}
+          {colorName}
+          {' '}
+          button
+        </Button>
+      ))
+    }
+  </Button.Group>
+)
+
+export const Base = Template.bind({})
+Base.args = {}

package/src/stories/b/Card/Card.stories.jsx

@@ -0,0 +1,59 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { Card } from 'ui'
+
+export default {
+  title        :'b/Card',
+  component    :Card,
+  subcomponents:{
+    'Card.Section':Card.Section,
+    'Card.Group'  :Card.Group,
+  },
+  decorators:[
+    // (storyfn) => <Router>{storyfn()}</Router>,
+  ],
+  argTypes:{
+    progress:{ control: 'number' },
+  },
+}
+
+const Template = ({ isImage, ...args }) => (
+  <Card
+    {...args}
+  >
+    { isImage && (
+      <Card.Section isImage>
+        <img src="https://miro.medium.com/max/1124/1*v9We8Bevk2FFA5YadZNwcQ.jpeg" alt="test" />
+      </Card.Section>
+    )}
+    <Card.Section>
+      <h1>
+        Section One
+      </h1>
+    </Card.Section>
+    <Card.Section>
+      <h2>
+        Section Two
+      </h2>
+    </Card.Section>
+    <Card.Section>
+      <h3>
+        Section Three
+      </h3>
+    </Card.Section>
+  </Card>
+)
+
+export const Base = Template.bind({})
+Base.args = {}
+
+export const CardWithProgress = Template.bind({})
+CardWithProgress.args = {
+  progress:50,
+}
+
+export const CardWithImageSection = Template.bind({})
+CardWithImageSection.args = {
+  isImage:true,
+}

package/src/stories/b/Card/Group.stories.jsx

@@ -0,0 +1,59 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { Card } from 'ui'
+
+export default {
+  title     :'b/Card/Group',
+  component :Card.Group,
+  decorators:[
+    // (storyfn) => <Router>{storyfn()}</Router>,
+  ],
+  argTypes:{
+    type       :{ control: 'select', options: ['vertical-flexbox', 'grid', 'snap-scroller'] },
+    desktopType:{ control: 'select', options: ['vertical-flexbox', 'grid'] },
+  },
+}
+
+const Template = ({ ...args }) => (
+  <Card.Group
+    className="span-8"
+    {...args}
+  >
+    <Card className="span-2">
+      <Card.Section>
+        <h1>
+          Span Two on Grid
+        </h1>
+      </Card.Section>
+    </Card>
+    <Card>
+      <Card.Section>
+        <h1>
+          Card Two
+        </h1>
+      </Card.Section>
+    </Card>
+    <Card>
+      <Card.Section>
+        <h1>
+          Card Three
+        </h1>
+      </Card.Section>
+    </Card>
+  </Card.Group>
+)
+
+export const Base = Template.bind({})
+Base.args = {}
+
+export const CardGroupGridOnDesktop = Template.bind({})
+CardGroupGridOnDesktop.args = {
+  desktopType:'grid',
+}
+
+export const CardGroupNotSnapScroller = Template.bind({})
+CardGroupNotSnapScroller.args = {
+  type       :'vertical-flexbox',
+  desktopType:'vertical-flexbox',
+}

package/src/stories/b/Page.stories.jsx

@@ -1,7 +1,11 @@
 /* @pareto-engineering/generator-front 1.0.0 */
 import * as React from 'react'
 
-import { Page } from 'ui'
+import {
+  Page,
+  // AnimatedGradient,
+  // AnimatedBlobs,
+} from 'ui'
 import { HelmetProvider } from 'react-helmet-async'
 
 export default {
@@ -52,9 +56,21 @@ export const WithSections = () => (
     <Page.Section id="s1">
       Section 1
     </Page.Section>
-    <Page.Section id="s2">
+    <Page.Section id="s2" spaced className="x-main b-x">
       Section 2.
-      Inspect source for details.
+      This section is spaced
     </Page.Section>
   </Page>
 )
+
+// Story is commented out due to snapshots and animations
+// export const WithAnimatedBlobsBackground = () => (
+//   <Page
+//     id="with-sections"
+//     Background={AnimatedBlobs}
+//   >
+//     <Page.Section id="s1">
+//       Section 1
+//     </Page.Section>
+//   </Page>
+// )

package/src/stories/b/ThemeSelector.stories.jsx

@@ -35,7 +35,7 @@ export const Base = () => {
         className={
          [
            `ui-${userTheme}`,
-           'y-background1 b-y',
+           'y-background-far b-y',
          ].filter((e) => e).join(' ')
        }
       >

package/src/stories/b/Title.stories.jsx

@@ -34,7 +34,7 @@ WithSubtitle.args = {
 export const Sizes = (props) => (
   ['h1', 'h2', 'h3', 'h4', 'h5'].map((size) => (
     <div className="u2 pv-u" key={size}>
-      <div className="y-background2 b-hard-y">
+      <div className="y-background-far b-hard-y">
         <Title
           heading={`This is a title in ${size}`}
           headingAs={size}

package/src/stories/c/ContentSlides.stories.jsx

@@ -76,7 +76,7 @@ const Template = (args) => {
 
     return (
       <div className={`ui-${userTheme}`} style={{ height: '100%' }}>
-        <ContentSlides className="y-background1 b-dark-y" steps={steps} simple={isSimple}>
+        <ContentSlides className="y-background-far b-dark-y" steps={steps} simple={isSimple}>
           {!isSimple && (
           <ContentSlides.Sidebar
             header={(

package/src/stories/colors.js

@@ -1,8 +1,11 @@
 const THEME = [
-  'main1',
+  'main',
+  'main-80',
+  'main-50',
   'main2',
-  'main3',
-  'main4',
+  'interactive',
+  'interactive-icons',
+  'shadow',
 ]
 
 /*
@@ -24,21 +27,30 @@ const MODALS = [
   'success',
   'warning',
   'error',
+  'blocked',
+  'backlog',
+  'in-progress',
+  'in-review',
+  'requested',
+  'completed',
 ]
 
 const UI = [
-  'background1',
-  'background2',
-  'background3',
-  'background4',
-  'background5',
-  'background6',
+  'background-far',
+  'background-near',
+  'background-cards',
+  'background-cards-80',
+  'background-cards-50',
+  'background-inputs',
+  'background-mesh',
   'heading',
   'paragraph',
   'subtitle',
   'metadata',
   'link',
-  'navlink',
+  'transparent',
+  'highlighted',
+  'disabled',
 ]
 
 const SM = [

package/src/stories/f/Checkbox.stories.jsx

@@ -27,11 +27,16 @@ export default {
     ),
   ],
   argTypes:{
-    label       :{ control: 'text' },
-    description :{ control: 'text' },
-    defaultValue:{ control: 'boolean' },
-    disabled    :{ control: 'boolean' },
-    optional    :{ control: 'boolean' },
+    label           :{ control: 'text' },
+    labelColor      :{ control: 'text' },
+    description     :{ control: 'text' },
+    defaultValue    :{ control: 'boolean' },
+    disabled        :{ control: 'boolean' },
+    optional        :{ control: 'boolean' },
+    labelSpan       :{ control: 'number' },
+    inputSpan       :{ control: 'number' },
+    desktopLabelSpan:{ control: 'number' },
+    desktopInputSpan:{ control: 'number' },
   },
 }
 
@@ -49,10 +54,10 @@ const Template = ({ defaultValue, ...args }) => {
     }, [defaultValue])
 
     return (
-      <>
+      <div className="grid">
         <Checkbox {...args} />
         <FormDebugger />
-      </>
+      </div>
     )
   }
 
@@ -93,3 +98,13 @@ Optional.args = {
   ...WithLabel.args,
   optional:true,
 }
+
+export const OnSingleRow = Template.bind({})
+OnSingleRow.args = {
+  ...Base.args,
+  label           :'Urgent',
+  labelSpan       :4,
+  inputSpan       :4,
+  desktopLabelSpan:4,
+  desktopInputSpan:10,
+}

package/src/stories/f/ChoicesInput.stories.jsx

@@ -22,11 +22,15 @@ export default {
     ),
   ],
   argTypes:{
-    // backgroundColor:{ control: 'color' },
-    multiple          :{ control: 'boolean' },
-    gridColumnsDesktop:{ control: 'number' },
-    disabled          :{ control: 'boolean' },
-    optional          :{ control: 'boolean' },
+    color           :{ control: 'color' },
+    labelColor      :{ control: 'color' },
+    multiple        :{ control: 'boolean' },
+    disabled        :{ control: 'boolean' },
+    optional        :{ control: 'boolean' },
+    labelSpan       :{ control: 'number' },
+    inputSpan       :{ control: 'number' },
+    desktopLabelSpan:{ control: 'number' },
+    desktopInputSpan:{ control: 'number' },
   },
 }
 
@@ -78,10 +82,10 @@ const Template = ({ defaultValue, ...args }) => {
     }, [defaultValue])
 
     return (
-      <>
+      <div className="grid">
         <ChoicesInput {...args} />
         <FormDebugger />
-      </>
+      </div>
     )
   }
   return <Content />
@@ -138,3 +142,13 @@ DisabledChoicesInput.args = {
   ...ChoicesWithLabel.args,
   disabled:true,
 }
+
+export const OnSingleRow = Template.bind({})
+OnSingleRow.args = {
+  ...Base.args,
+  label           :'Select color',
+  labelSpan       :4,
+  inputSpan       :4,
+  desktopLabelSpan:4,
+  desktopInputSpan:10,
+}