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

package/src/local.scss

@@ -2,10 +2,14 @@
 
 :root {
   --font-default: inter, helvetica, helvetica neue, arial, verdana, sans-serif;
+  --theme-border-style: 1px solid;
+  --theme-border-color: var(--paragraph);
+  --theme-border: var(--theme-border-style) var(--theme-border-color);
 }
 
 html {
   font-family: var(--font-default);
   font-size: 18px;
+  font-feature-settings:'liga' on;
 }
 

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

@@ -18,13 +18,17 @@ export default {
 }
 
 export const Base = () => (
-  <AnimatedCounter delay={5} number={100} unit="%" description="graduated from college" />
+  <AnimatedCounter delay={5} number={100.555} after="%" />
 )
 
-export const TopDescription = () => (
-  <AnimatedCounter delay={5} descriptionPosition="top" number={100} unit="%" description="graduated from college" />
+export const Before = () => (
+  <AnimatedCounter delay={5} number={100} before="%" />
 )
 
-export const UnitBefore = () => (
-  <AnimatedCounter delay={5} unitPosition="before" number={100} unit="%" description="graduated from college" />
+export const After = () => (
+  <AnimatedCounter delay={5} number={100} after="%" />
+)
+
+export const BeforeAndAfter = () => (
+  <AnimatedCounter delay={5} number={100} before="%" after="+" />
 )

package/src/stories/a/BackgroundGradient.stories.jsx

@@ -0,0 +1,38 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { BackgroundGradient } from 'ui'
+
+export default {
+  title        :'a/BackgroundGradient',
+  component    :BackgroundGradient,
+  subcomponents:{
+    // Item:BackgroundGradient.Item
+  },
+  decorators:[
+    // storyfn => <div className="">{ storyfn() }</div>,
+  ],
+  argTypes:{
+    height:{ control: 'text' },
+    color :{ control: 'text' },
+  },
+}
+
+// eslint-disable-next-line react/prop-types
+const Template = ({ color, ...rest }) => (
+  <div
+    className={`y-${color}`}
+    style={{
+      position:'relative',
+      height  :'700px',
+    }}
+  >
+    <BackgroundGradient {...rest} />
+  </div>
+)
+
+export const Base = Template.bind({})
+Base.args = {
+  height:'50em',
+  color :'background4',
+}

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

@@ -103,7 +103,7 @@ export const LayoutRight = () => {
 
 export const LayoutCenter = () => (
   <div className="u1 p-u" style={{ backgroundColor: 'green' }}>
-    <ContentCard color="background">
+    <ContentCard color="background1">
       <ContentCard.Section layout="center" className="p-u">
         <p className="content p-u">
           Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit asperiores facilis,

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

@@ -25,7 +25,40 @@ export const Base = () => {
       from   :'theirs',
     },
     {
-      message:'Hi Humbl, please compile an assesment of top 5 firms/brand providers for the listed fields in the US.',
+      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',
     },
@@ -34,6 +67,50 @@ export const Base = () => {
       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 (

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

@@ -23,21 +23,45 @@ export const Base = () => {
       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-background b-x v1 p-v">
+    <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} />

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

@@ -41,7 +41,7 @@ export const Base = () => {
 }
 
 export const Color = () => (
-  <ProgressBar progress={70} color="secondary1" />
+  <ProgressBar progress={70} color="main1" />
 )
 
 export const Height = () => (

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

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

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

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