@pareto-engineering/design-system 4.0.0-alpha.9 → 4.0.0

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

@@ -0,0 +1,96 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { useState } from 'react'
+
+import { DatePicker } from 'ui'
+
+export default {
+  title     :'a/DatePicker',
+  component :DatePicker,
+  decorators:[
+    // storyfn => <div className="">{ storyfn() }</div>,
+  ],
+  argTypes:{
+    mode:{
+      control:{
+        type   :'select',
+        options:['single', 'multiple', 'range'],
+      },
+    },
+    dateFormat:{
+      control:{
+        type:'text',
+      },
+    },
+    showDebugger:{
+      control:{
+        type:'boolean',
+      },
+    },
+  },
+}
+
+const today = new Date('2024-03-01T12:00:00Z')
+
+const Template = (args) => {
+  const [value, setValue] = useState()
+
+  return (
+    <DatePicker
+      selected={value}
+      setSelection={setValue}
+      {...args}
+      today={today}
+    />
+  )
+}
+
+const TimeTemplate = ({ timeMode, ...args }) => {
+  const [value, setValue] = useState()
+  const [timeFrom, setTimeFrom] = useState('00:00')
+  const [timeTo, setTimeTo] = useState('23:59')
+
+  return (
+    <DatePicker
+      selected={value}
+      setSelection={setValue}
+      timeFrom={timeFrom}
+      setTimeFrom={setTimeFrom}
+      timeTo={timeMode === 'multiple' ? timeTo : undefined}
+      setTimeTo={timeMode === 'multiple' ? setTimeTo : undefined}
+      today={today}
+      {...args}
+    />
+  )
+}
+
+export const Base = Template.bind({})
+Base.args = {}
+
+export const MultipleSelection = Template.bind({})
+MultipleSelection.args = {
+  mode:'multiple',
+}
+
+export const RangeSelection = Template.bind({})
+RangeSelection.args = {
+  mode:'range',
+}
+
+export const TimeSelection = TimeTemplate.bind({})
+TimeSelection.args = {
+  mode    :'single',
+  timeMode:'single',
+}
+
+export const TimeRangeSelection = TimeTemplate.bind({})
+TimeRangeSelection.args = {
+  mode    :'range',
+  timeMode:'multiple',
+}
+
+export const WithCustomFooter = Template.bind({})
+WithCustomFooter.args = {
+  customFooter:<div>Custom footer</div>,
+}

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

@@ -48,7 +48,7 @@ export const Base = () => {
 export const Color = Template.bind({})
 Color.args = {
   progress:70,
-  color   :'main1',
+  color   :'main',
 }
 
 export const Height = Template.bind({})

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

@@ -13,17 +13,37 @@ export default {
     // storyfn => <div className="">{ storyfn() }</div>,
   ],
   argTypes:{
-    backgroundColor:{ control: 'color' },
+    children:{
+      control:{
+        type:'text',
+      },
+    },
+    source:{
+      control:{
+        type:'text',
+      },
+    },
+    author:{
+      control:{
+        type:'text',
+      },
+    },
+    color:{
+      control:{
+        type:'text',
+      },
+    },
   },
 }
 
-export const Base = () => (
-  <div className="y-background1 b-y u1 p-u">
-    <Quote
-      author="Austen Spoonts"
-    >
-      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>
-  </div>
+const Template = (args) => (
+  <Quote {...args} />
 )
+
+export const Base = Template.bind({})
+Base.args = {
+  children:'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.',
+  source  :'https://example.com',
+  author  :'John Doe',
+  color   :'highlighted',
+}

package/src/stories/a/Removable.stories.jsx

@@ -0,0 +1,22 @@
+/* @pareto-engineering/generator-front 1.1.1-alpha.1 */
+import * as React from 'react'
+
+import { Removable } from 'ui'
+
+export default {
+  title        :'a/Removable',
+  component    :Removable,
+  subcomponents:{
+    // Item:Removable.Item
+  },
+  decorators:[
+    // storyfn => <div className="">{ storyfn() }</div>,
+  ],
+  argTypes:{
+    backgroundColor:{ control: 'color' },
+  },
+}
+
+export const Base = () => (
+  <Removable>Sample Removable</Removable>
+)

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

@@ -13,7 +13,8 @@ export default {
     // storyfn => <div className="">{ storyfn() }</div>,
   ],
   argTypes:{
-    color:{ control: 'color' },
+    color          :{ control: 'text' },
+    backgroundColor:{ control: 'text' },
   },
 }
 
@@ -24,5 +25,5 @@ const Template = (args) => (
 export const Base = Template.bind({})
 Base.args = {
   children:'Remember to wash your vegetables before eating them.',
-  color   :'main',
+  color   :'interactive',
 }

package/src/stories/a/ToggleSwitch.stories.jsx

@@ -0,0 +1,22 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { ToggleSwitch } from 'ui'
+
+export default {
+  title        :'a/ToggleSwitch',
+  component    :ToggleSwitch,
+  subcomponents:{
+    // Item:ToggleSwitch.Item
+  },
+  decorators:[
+    // storyfn => <div className="">{ storyfn() }</div>,
+  ],
+  argTypes:{
+    size:{ control: 'string' },
+  },
+}
+
+export const Base = () => (
+  <ToggleSwitch />
+)

package/src/stories/a/Tooltip.stories.jsx

@@ -0,0 +1,75 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+import { Tooltip, Button } from 'ui'
+
+export default {
+  title        :'a/Tooltip',
+  component    :Tooltip,
+  subcomponents:{
+    // Item:Tooltip.Item
+  },
+  decorators:[
+    // storyfn => <div className="">{ storyfn() }</div>,
+  ],
+  argTypes:{
+    backgroundColor:{ control: 'color' },
+  },
+}
+
+export const Base = {
+  args:{
+    children:(
+      <Button>
+        Hover on me!
+      </Button>
+    ),
+    content:(
+      <div>
+        <ul>
+          <li>This is the tooltips content</li>
+          <li>Style it the way you want!</li>
+          <li>It&apos;s a tooltip, no interactive elements please</li>
+        </ul>
+      </div>
+    ),
+    description:'test-tooltip',
+  },
+  render:(args) => (
+    <div
+      style={{
+        paddingTop   :'10rem',
+        width        :'50%',
+        margin       :'auto',
+        display      :'flex',
+        flexDirection:'column',
+        alignItems   :'center',
+      }}
+    >
+      <Tooltip {...args} />
+    </div>
+  ),
+}
+
+export const Left = {
+  ...Base,
+  args:{
+    ...Base.args,
+    position:'left',
+  },
+}
+
+export const Right = {
+  ...Base,
+  args:{
+    ...Base.args,
+    position:'right',
+  },
+}
+
+export const Top = {
+  ...Base,
+  args:{
+    ...Base.args,
+    position:'top',
+  },
+}

package/src/stories/a/XMLEditor.stories.jsx

@@ -0,0 +1,26 @@
+import * as React from 'react'
+
+import { XMLEditor } from 'ui'
+
+export default {
+  title     :'a/XMLEditor',
+  component :XMLEditor,
+  decorators:[
+    // storyfn => <div className="">{ storyfn() }</div>,
+  ],
+  argTypes:{},
+  controls:{
+  },
+}
+
+const Template = (args) => (
+  <div>
+    {/* Args as JSON */}
+    <pre>{ JSON.stringify(args, null, 2) }</pre>
+  </div>
+  // TOFIX: Commented out due to issues.
+  // <XMLEditor {...args} />
+)
+
+export const Base = Template.bind({})
+Base.args = {}

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

@@ -25,6 +25,7 @@ const Template = ({ isTransparent = false, ...rest }) => (
     <SocialMediaButton type="twitter" isTransparent={isTransparent} />
     <SocialMediaButton type="instagram" isTransparent={isTransparent} />
     <SocialMediaButton type="linkedin" isTransparent={isTransparent} />
+    <SocialMediaButton type="threads" isTransparent={isTransparent} />
   </AppContextProvider>
 )
 
@@ -33,7 +34,7 @@ Base.args = {
   config:{
     SITE:{
       NAME         :'Pareto',
-      CANONICAL    :'https://hellopareto.com',
+      CANONICAL    :'https://pareto.ai',
       SUPPORT_EMAIL:'support@hellopareto.com',
       TITLE_SUFFIX :'| Pareto',
     },
@@ -42,9 +43,10 @@ Base.args = {
       INSTAGRAM:'https://www.instagram.com/hellopareto',
       TWITTER  :'https://www.twitter.com/hellopareto',
       LINKEDIN :'https://www.linkedin.com/company/hellopareto',
+      THREADS  :'https://www.threads.net/@hellopareto',
     },
     EXTRA:{
-      SURVEY:'https://survey.hellopareto.com',
+      SURVEY:'https://survey.pareto.ai',
     },
   },
 }

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

@@ -35,14 +35,10 @@ export const Base = () => {
         className={
          [
            `ui-${userTheme}`,
-           'y-background1 b-y',
+           'y-background-far b-y',
          ].filter((e) => e).join(' ')
        }
       >
-        <p>
-          Theme :
-          { userTheme }
-        </p>
         <ThemeSelector />
       </div>
     )

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}