@pareto-engineering/design-system 2.0.0-alpha.6 → 2.0.0-alpha.60

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

@@ -25,7 +25,7 @@ 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',
     },
@@ -34,6 +34,83 @@ export const Base = () => {
       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 (

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

@@ -13,20 +13,21 @@ export default {
     // storyfn => <div className="">{ storyfn() }</div>,
   ],
   argTypes:{
-    backgroundColor:{ control: 'color' },
+    // backgroundColor:{ control: 'color' },
+    booleanValue:{ control: 'boolean' },
   },
 }
 
-export const True = () => (
-  <DotInfo booleanValue />
-)
-export const False = () => (
-  <DotInfo booleanValue={false} />
-)
+const Template = (args) => <DotInfo {...args} />
 
-export const Nullish = () => (
-  <>
-    <DotInfo />
-    <DotInfo booleanValue={null} />
-  </>
-)
+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/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/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'],
+}

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

@@ -14,10 +14,15 @@ export default {
     // storyfn => <div className="">{ storyfn() }</div>,
   ],
   argTypes:{
-    backgroundColor:{ control: 'color' },
+    // 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)
 
@@ -40,13 +45,17 @@ export const Base = () => {
   )
 }
 
-export const Color = () => (
-  <ProgressBar progress={70} color="main1" />
-)
+export const Color = Template.bind({})
+Color.args = {
+  progress:70,
+  color   :'main1',
+}
 
-export const Height = () => (
-  <ProgressBar height="5em" progress={62} />
-)
+export const Height = Template.bind({})
+Height.args = {
+  ...Color.args,
+  height:'5em',
+}
 
 /*
 export const Attached = () => {

package/src/stories/a/Shapes.stories.jsx

@@ -42,6 +42,15 @@ Triangle.args = {
   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',
@@ -123,3 +132,12 @@ RotatedEllipses.args = {
   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/Timestamp.stories.jsx

@@ -15,55 +15,51 @@ export default {
     // storyfn => <div className="">{ storyfn() }</div>,
   ],
   argTypes:{
-    backgroundColor:{ control: 'color' },
+    // 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())
 
-export const Base = () => (
-  <>
-    <Timestamp time={date} />
-  </>
-)
+const Template = (args) => <Timestamp {...args} />
 
-export const DateFormat = () => (
-  <Timestamp
-    time={date}
-    enabledFormats={['date']}
-    dateFormat={'yyyy-MM-dd\' at \'HH:mm'}
-  />
-)
+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 = () => (
-  <Timestamp
-    time={subDays(date, 3)}
-    enabledFormats={['distance', 'date']}
-  />
-)
+export const DistanceFormat = Template.bind({})
+DistanceFormat.args = {
+  time          :subDays(date, 3),
+  enabledFormats:['distance', 'date'],
 
-export const RelativeFormat = () => (
-  <>
-    Click to see relative format.
-    Relative format has not been enabled by default because of chromatic snapshots.
-    <Timestamp
-      time={subDays(date, 5)}
-      enabledFormats={['date', 'relative']}
-    />
-  </>
-)
+}
 
-export const Prefix = () => (
-  <Timestamp
-    time={date}
-    prefix={(
-      <strong>
-        Updated :
-      </strong>
-    )}
-  />
-)
+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 = () => (
 //   <>

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

@@ -14,10 +14,11 @@ export default {
     // storyfn => <div className="">{ storyfn() }</div>,
   ],
   argTypes:{
-    color   :{ control: { type: 'select', options: ALL_COLORS } },
-    disabled:{ control: { type: 'boolean' } },
-    isGhost :{ control: { type: 'boolean' } },
-    isSimple:{ control: { type: 'boolean' } },
+    color     :{ control: { type: 'select', options: ALL_COLORS } },
+    disabled  :{ control: { type: 'boolean' } },
+    isGhost   :{ control: { type: 'boolean' } },
+    isSimple  :{ control: { type: 'boolean' } },
+    isAnimated:{ control: { type: 'boolean' } },
   },
 }
 
@@ -82,3 +83,25 @@ export const Loading = MultipleTemplate.bind({})
 Loading.args = {
   isLoading:true,
 }
+
+export const ArrowLeft = MultipleTemplate.bind({})
+ArrowLeft.args = {
+  arrowDirection:'left',
+}
+
+export const ArrowRight = MultipleTemplate.bind({})
+ArrowRight.args = {
+  arrowDirection:'right',
+}
+
+export const ArrowLeftSimple = MultipleTemplate.bind({})
+ArrowLeftSimple.args = {
+  arrowDirection:'left',
+  isSimple      :true,
+}
+
+export const ArrowRightSimple = MultipleTemplate.bind({})
+ArrowRightSimple.args = {
+  arrowDirection:'right',
+  isSimple      :true,
+}

package/src/stories/b/Logo.stories.jsx

@@ -14,24 +14,33 @@ export default {
     // storyfn => <div className="">{ storyfn() }</div>,
   ],
   argTypes:{
-    backgroundColor:{ control: 'color' },
+    // backgroundColor:{ control: 'color' },
+    square:{ control: 'boolean' },
   },
 }
 
-export const Base = () => (
-  <Logo />
-)
+const SingleTemplate = (args) => <Logo {...args} />
 
-export const Color = () => ALL_COLORS.map((color) => <Logo color={color} key={color} />)
+export const Base = SingleTemplate.bind({})
 
-export const Animated = () => (
-  <Logo animated />
-)
+const MultipleTemplate = (args) => ALL_COLORS
+  .map((color) => <Logo key={color} color={color} {...args} />)
 
-export const Loop = () => (
-  <Logo animated loop />
-)
+export const Color = MultipleTemplate.bind({})
 
-export const Beta = () => (
-  <Logo variant="beta" color="main1" />
-)
+export const Square = MultipleTemplate.bind({})
+Square.args = {
+  square:true,
+}
+
+// export const Animated = () => (
+//   <Logo animated />
+// )
+
+// export const Loop = () => (
+//   <Logo animated loop />
+// )
+
+// export const Beta = () => (
+//   <Logo variant="beta" color="main1" />
+// )

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

@@ -60,7 +60,7 @@ export const WithSections = () => (
 
 export const SectionsWithBackground = () => (
   <Page
-    id="with-sections"
+    id="with-background"
   >
     <Page.Section
       id="s1"
@@ -83,3 +83,27 @@ export const SectionsWithBackground = () => (
     </Page.Section>
   </Page>
 )
+
+export const SectionsWithBackgroundGradient = () => (
+  <Page
+    id="with-background-gradient"
+  >
+    <Page.Section
+      id="s1"
+      backgroundGradient
+      backgroundGradientHeight="50em"
+      className="y-success"
+      style={{
+        height        :'30em',
+        display       :'flex',
+        justifyContent:'center',
+        alignItems    :'center',
+      }}
+    >
+      <Quote author="Austen Spoonts" color="paragraph">
+        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>
+    </Page.Section>
+  </Page>
+)