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

package/src/local.scss

@@ -2,6 +2,9 @@
 
 :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 {

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/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

@@ -30,7 +30,7 @@ export const Base = () => {
       from   :'ours',
     },
     {
-      message:'Hi Camille, please compile an assesment of top 5 firms/brand providers for the listed fields in the US.',
+      message:'Hi Camille, please compile an assesment of top 6 firms/brand providers for the listed fields in the US.',
       sender :'HUMBL',
       from   :'theirs',
     },

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/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>

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

@@ -28,9 +28,17 @@ export const Ghost = (props) => (
 )
 
 export const Simple = (props) => (
-  <Button isSimple {...props}>
-    Sample Button
-  </Button>
+  <>
+    {ALL_COLORS.map((colorName) => (
+      <Button {...props} color={colorName} key={colorName} isSimple>
+        This is a
+        {' '}
+        {colorName}
+        {' '}
+        button
+      </Button>
+    ))}
+  </>
 )
 
 export const Colors = (props) => (
@@ -62,17 +70,40 @@ export const GhostColors = (props) => (
 )
 
 export const Compact = (props) => (
-  <Button isCompact {...props}>
-    Sample Button
-  </Button>
+  <>
+    {ALL_COLORS.map((colorName) => (
+      <Button {...props} color={colorName} key={colorName} isCompact>
+        This is a
+        {' '}
+        {colorName}
+        {' '}
+      </Button>
+    ))}
+  </>
 )
 
 export const Disabled = (props) => (
-  <Button disabled {...props}>
-    Sample Button
-  </Button>
+  <>
+    {ALL_COLORS.map((colorName) => (
+      <Button {...props} color={colorName} key={colorName} disabled>
+        This is a
+        {' '}
+        {colorName}
+        {' '}
+      </Button>
+    ))}
+  </>
 )
 
 export const Loading = (props) => (
-  <Button {...props} isLoading />
+  <>
+    {ALL_COLORS.map((colorName) => (
+      <Button {...props} color={colorName} key={colorName} isLoading>
+        This is a
+        {' '}
+        {colorName}
+        {' '}
+      </Button>
+    ))}
+  </>
 )

package/src/stories/b/Metrics.stories.jsx

@@ -0,0 +1,62 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { Metrics } from 'ui'
+
+export default {
+  title        :'b/Metrics',
+  component    :Metrics,
+  subcomponents:{
+    // Item:Metrics.Item
+  },
+  decorators:[
+    // storyfn => <div className="">{ storyfn() }</div>,
+  ],
+  argTypes:{
+    backgroundColor:{ control: 'color' },
+  },
+}
+
+export const Base = () => {
+  const items = [
+    {
+      circleColor:'success',
+      color      :'black',
+      delay      :'2',
+      number     :'75',
+      after      :'%',
+      before     :'+',
+      description:'Merchandise sell-though rate during tour',
+    },
+    {
+      circleColor:'warning',
+      color      :'black',
+      delay      :'2',
+      number     :'250',
+      after      :'K',
+      description:'Stat or metric growth',
+    },
+    {
+      circleColor:'navlink',
+      color      :'black',
+      delay      :'2',
+      number     :'11710',
+      before     :'+',
+      description:'Stat or metric growth',
+    },
+    {
+      circleColor:'error',
+      color      :'black',
+      delay      :'2',
+      number     :'0.28',
+      before     :'$',
+      description:'Merchandise sell-though rate during tour',
+    },
+  ]
+
+  return (
+    <Metrics
+      items={items}
+    />
+  )
+}

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

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

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

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

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

@@ -74,7 +74,7 @@ export const Base = () => {
 
     return (
       <div className={`ui-${userTheme}`} style={{ height: '100%' }}>
-        <ContentSlides className="y-background" steps={steps}>
+        <ContentSlides className="y-background1" steps={steps}>
           <ContentSlides.Sidebar
             header={(
               <Logo color="paragraph" />
@@ -341,7 +341,7 @@ export const Simple = () => {
     )
   }
   return (
-    <ContentSlides className="y-background" steps={steps} simple>
+    <ContentSlides className="y-background1" steps={steps} simple>
       <Main />
     </ContentSlides>
   )

package/src/stories/colors.js

@@ -1,8 +1,8 @@
 const THEME = [
   'main1',
   'main2',
-  'secondary1',
-  'secondary2',
+  'main3',
+  'main4',
 ]
 
 /*
@@ -27,10 +27,12 @@ const MODALS = [
 ]
 
 const UI = [
-  'background',
+  'background1',
   'background2',
   'background3',
   'background4',
+  'background5',
+  'background6',
   'heading',
   'paragraph',
   'subtitle',

package/src/stories/f/CheckboxInput.stories.jsx

@@ -27,7 +27,7 @@ export default {
 }
 
 export const Base = () => (
-  <div className="y-background b-y">
+  <div className="y-background1 b-y">
     <CheckboxInput value="Business to customer" name="businessTypes">Business to customer</CheckboxInput>
     <CheckboxInput value="Business to business" name="businessTypes">Business to business</CheckboxInput>
     <CheckboxInput value="E-commerce" name="businessTypes">E-commerce</CheckboxInput>

package/src/stories/f/TaskRecommendationInput.stories.jsx

@@ -26,7 +26,7 @@ export default {
 }
 
 export const Base = () => (
-  <div className="y-background b-y v2 p-v" style={{ height: '100%' }}>
+  <div className="y-background1 b-y v2 p-v" style={{ height: '100%' }}>
     <TaskRecommendationInput
       name="taskRecommendations"
       value="businessTypes"

package/src/stories/f/TextInput.stories.jsx

@@ -41,19 +41,19 @@ export const Base = () => {
     return errorMessage
   }
   return (
-    <>
+    <div className="y-background1 b-dark-y u2 pb-u">
       <TextInput
         name="firstName"
         label="What's your first name ?"
         validate={validate}
       />
       <FormDebugger />
-    </>
+    </div>
   )
 }
 
 export const DisabledTextInput = () => (
-  <div className="y-background b-y u2 pb-u">
+  <div className="y-background1 b-dark-y u2 pb-u">
     <TextInput
       name="firstName"
       label="What's your first name ?"
@@ -63,7 +63,7 @@ export const DisabledTextInput = () => (
 )
 
 export const DateTime = () => (
-  <div className="y-background b-y">
+  <div className="y-background1 b-dark-y">
     <TextInput
       name="date"
       label="Select date"

package/src/stories/f/TextareaInput.stories.jsx

@@ -29,7 +29,7 @@ export default {
 }
 
 export const Base = () => (
-  <div className="y-background b-y">
+  <div className="y-background1 b-dark-y">
     <TextareaInput
       name="feedBack"
       label="What can we improve on?"
@@ -38,7 +38,7 @@ export const Base = () => (
   </div>
 )
 export const DisabledTextareaInput = () => (
-  <div className="y-background b-y">
+  <div className="y-background1 b-dark-y">
     <TextareaInput
       name="feedBack"
       label="What can we improve on?"

package/src/ui/a/AnimatedCounter/AnimatedCounter.jsx

@@ -1,7 +1,7 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react'
 
-import { useLayoutEffect } from 'react'
+import { useLayoutEffect, useCallback } from 'react'
 
 import CountUp from 'react-countup'
 
@@ -26,10 +26,8 @@ const AnimatedCounter = ({
   style,
   color,
   number,
-  unit,
-  description,
-  descriptionPosition,
-  unitPosition,
+  before,
+  after,
   delay,
   // ...otherProps
 }) => {
@@ -37,6 +35,11 @@ const AnimatedCounter = ({
     import('./styles.scss')
   }, [])
 
+  const countDecimals = useCallback((value) => {
+    if ((value % 1) !== 0) return value.toString().split('.')[1].length
+    return 0
+  }, [])
+
   return (
     <div
       id={id}
@@ -51,19 +54,17 @@ const AnimatedCounter = ({
       style={style}
       // {...otherProps}
     >
-      {descriptionPosition === 'top' && <p className="info top-description uc s-1 md-s0">{description}</p>}
       <div className="count s3">
-        {unitPosition === 'before' && <span>{unit}</span>}
-        <CountUp end={number} delay={delay} redraw>
+        {before && <span>{before}</span>}
+        <CountUp end={number} delay={delay} decimals={countDecimals(number)} redraw>
           {({ countUpRef, start }) => (
             <VisibilitySensor onChange={start} delayedCall>
               <span ref={countUpRef} />
             </VisibilitySensor>
           )}
         </CountUp>
-        {unitPosition === 'after' && <span>{unit}</span>}
+        {after && <span>{after}</span>}
       </div>
-      {descriptionPosition === 'bottom' && <p className="info uc s-1 md-s0 v50 mt-v">{description}</p>}
     </div>
   )
 }
@@ -92,33 +93,26 @@ AnimatedCounter.propTypes = {
   /**
    *  The review count value
    */
-  number             :PropTypes.number,
+  number:PropTypes.number,
+
   /**
-   *  The review count unit
+   *  The unit before the number
    */
-  unit               :PropTypes.string,
+  before:PropTypes.string,
+
   /**
-   *  The review description
+   *  The unit after the number
    */
-  description        :PropTypes.string,
+  after:PropTypes.string,
+
   /**
    *  react counter delay
    */
-  delay              :PropTypes.number,
-  /**
-   *  If the animated counter description should be at the top
-   */
-  descriptionPosition:PropTypes.oneOf(['top', 'bottom']),
-  /**
-   * If the unit should be before or after the animated numbers
-   */
-  unitPosition       :PropTypes.string,
+  delay:PropTypes.number,
 }
 
 AnimatedCounter.defaultProps = {
-  color              :'main1',
-  descriptionPosition:'bottom',
-  unitPosition       :'after',
+  color:'main1',
 }
 
 export default AnimatedCounter

package/src/ui/a/AnimatedCounter/styles.scss

@@ -1,24 +1,16 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 
 @use "@pareto-engineering/bem";
-
+//@use "@aztlan/stylebook/src/mixins";
+//@use "@aztlan/stylebook/src/globals" as *;
 
 .#{bem.$base}.animated-counter {
-  align-items: center;
   display: flex;
-  flex-direction: column;
+  justify-content: center;
 
   .count {
     color: var(--x);
   }
-
-  .top-description {
-    margin-bottom: .5em;
-  }
-
-  .info {
-    color: var(--metadata);
-  }
 }
 
 

package/src/ui/a/Conversation/styles.scss

@@ -7,6 +7,7 @@ $default-padding: var(--u);
 $default-conversation-background: var(--y);
 $default-message-max-width: calc(100% - #{$default-padding});
 $default-message-min-width: 12em;
+$default-message-border: var(--theme-border);
 
 .#{bem.$base}.conversation {
     display: flex;
@@ -26,6 +27,7 @@ $default-message-min-width: 12em;
         border-radius: var(--theme-border-radius);
         background-color: var(--x);
         align-self: flex-start;
+        border: $default-message-border;
 
         .#{bem.$element-content} {
             display: flex;

package/src/ui/a/People/People.jsx

@@ -22,8 +22,9 @@ const People = ({
   id,
   className:userClassName,
   style,
-  imageHeightWidth,
+  imageSize,
   children,
+  columnWidth,
   // ...otherProps
 }) => {
   useLayoutEffect(() => {
@@ -44,8 +45,9 @@ const People = ({
         .filter((e) => e)
         .join(' ')}
       style={{
-        '--image-height-width':imageHeightWidth,
         ...style,
+        '--image-size'  :imageSize,
+        '--column-width':columnWidth,
       }}
       // {...otherProps}
     >
@@ -78,11 +80,17 @@ People.propTypes = {
   /**
    * The height and width of all the person's image
    */
-  imageHeightWidth:PropTypes.string,
+  imageSize:PropTypes.string,
+
+  /**
+   * The width of the a person's column
+   */
+  columnWidth:PropTypes.string,
 }
 
 People.defaultProps = {
-  imageHeightWidth:'3em',
+  imageSize  :'3em',
+  columnWidth:'12em',
 }
 
 People.Person = Person

package/src/ui/a/People/common/Person/Person.jsx

@@ -21,6 +21,7 @@ const Person = ({
   name,
   image,
   role,
+  color,
   // ...otherProps
 }) => (
   <div
@@ -31,6 +32,7 @@ const Person = ({
 
       componentClassName,
       userClassName,
+      `y-${color}`,
     ]
       .filter((e) => e)
       .join(' ')}
@@ -72,10 +74,14 @@ Person.propTypes = {
    *  The person's role
    */
   role :PropTypes.string.isRequired,
+  /**
+   * The base color of the person's component
+   */
+  color:PropTypes.string,
 }
 
 Person.defaultProps = {
-  // someProp:false
+  color:'background2',
 }
 
 export default Person

package/src/ui/a/People/styles.scss

@@ -9,22 +9,26 @@ $default-person-border-radius:2em;
 $default-padding:var(--u);
 $default-horizontal-margin: .5em;
 
+$default-grid-gap: 1em;
+
 .#{bem.$base}.people {
-  display: flex;
-  justify-content: center;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(var(--column-width), 1fr));
+  gap:$default-grid-gap;
+
 
   .person {
     align-items: center;
-    background-color: var(--background2);
+    background-color: var(--y);
     border-radius: $default-person-border-radius;
     display: flex;
-    margin: 0 $default-horizontal-margin;
+
     padding-right: $default-padding;
 
     .image {
       border-radius: $default-border-radius;
-      height: var(--image-height-width);
-      width: var(--image-height-width);
+      height: var(--image-size);
+      width: var(--image-size);
     }
 
     .details {
@@ -34,21 +38,15 @@ $default-horizontal-margin: .5em;
 
       .name {
         margin-bottom: .25em;
+        color: var(--on-y);
       }
 
       .role {
-        color: var(--subtitle);
+        color: var(--on-y);
+        opacity: .5;
       }
     }
   }
-
-  @include mixins.media($to:$sm-md) {
-    flex-direction: column;
-
-    >:not(:last-child) {
-      margin-bottom: var(--u);
-    }
-  }
 }