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

package/src/ui/a/Label/Label.jsx

@@ -1,12 +1,12 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react'
 
-import { useInsertionEffect } from 'react'
-
 import PropTypes from 'prop-types'
 
 import styleNames from '@pareto-engineering/bem/exports'
 
+import './styles.scss'
+
 // Local Definitions
 
 const baseClassName = styleNames.base
@@ -26,31 +26,25 @@ const Label = ({
   isGhost,
   as:Wrapper,
   ...props
-}) => {
-  useInsertionEffect(() => {
-    import('./styles.scss')
-  }, [])
-
-  return (
-    <Wrapper
-      id={id}
-      className={[
-        baseClassName,
-        componentClassName,
-        userClassName,
-        `x-${color}`,
-        isCompact && styleNames.modifierCompact,
-        isGhost && styleNames.modifierGhost,
-      ]
-        .filter((e) => e)
-        .join(' ')}
-      style={style}
-      {...props}
-    >
-      {children}
-    </Wrapper>
-  )
-}
+}) => (
+  <Wrapper
+    id={id}
+    className={[
+      baseClassName,
+      componentClassName,
+      userClassName,
+      `x-${color}`,
+      isCompact && styleNames.modifierCompact,
+      isGhost && styleNames.modifierGhost,
+    ]
+      .filter((e) => e)
+      .join(' ')}
+    style={style}
+    {...props}
+  >
+    {children}
+  </Wrapper>
+)
 
 Label.propTypes = {
   /**

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

@@ -2,11 +2,11 @@
 
 @use "@pareto-engineering/bem";
 
-$default-padding-bottom: .4em;
-$default-padding-side: .7em;
-$default-padding-top: .5em;
+$default-padding-bottom: .6em;
+$default-padding-side: 1.75em;
+$default-padding-top: .75em;
 
-$compact-padding: $default-padding-top*.5 $default-padding-side*.5 $default-padding-bottom*.5;
+$compact-padding: $default-padding-top*.4 $default-padding-side*.4 $default-padding-bottom*.4;
 $default-padding: $default-padding-top $default-padding-side $default-padding-bottom;
 
 $default-color: primary;
@@ -20,9 +20,9 @@ $default-font-size: calc(1em * var(--s-1));
   color: var(--on-x, var(--on-#{$default-color}));
   display: inline-flex;
   font-size: $default-font-size;
+  gap: calc(var(--gap) / 2);
   padding: $default-padding;
   white-space: nowrap;
-
   &.#{bem.$modifier-compact} {
     padding: $compact-padding;
   }

package/src/ui/a/LoadingCircle/LoadingCircle.jsx

@@ -1,12 +1,12 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react'
 
-import { useInsertionEffect } from 'react'
-
 import PropTypes from 'prop-types'
 
 import styleNames from '@pareto-engineering/bem/exports'
 
+import './styles.scss'
+
 // Local Definitions
 
 const baseClassName = styleNames.base
@@ -25,57 +25,51 @@ const LoadingCircle = ({
   animationDuration,
   style,
   // ...otherProps
-}) => {
-  useInsertionEffect(() => {
-    import('./styles.scss')
-  }, [])
-
-  return (
-    <div
+}) => (
+  <div
+    id={id}
+    className={[
+
+      baseClassName,
+
+      componentClassName,
+      userClassName,
+    ]
+      .filter((e) => e)
+      .join(' ')}
+    style={{
+      '--height-width':heightWidth,
+      '--stroke-width':strokeWidth,
+      ...style,
+    }}
+    // {...otherProps}
+  >
+    <svg
+      viewBox="25 25 50 50"
+      className="svg-circle"
       id={id}
-      className={[
-
-        baseClassName,
-
-        componentClassName,
-        userClassName,
-      ]
-        .filter((e) => e)
-        .join(' ')}
+      x="0px"
+      y="0px"
+      xmlSpace="preserve"
+      xmlns="http://www.w3.org/2000/svg"
+      version="1.1"
+      preserveAspectRatio="xMinYMin meet"
       style={{
-        '--height-width':heightWidth,
-        '--stroke-width':strokeWidth,
-        ...style,
+        '--animation-duration':`${animationDuration}s`,
       }}
-      // {...otherProps}
     >
-      <svg
-        viewBox="25 25 50 50"
-        className="svg-circle"
-        id={id}
-        x="0px"
-        y="0px"
-        xmlSpace="preserve"
-        xmlns="http://www.w3.org/2000/svg"
-        version="1.1"
-        preserveAspectRatio="xMinYMin meet"
-        style={{
-          '--animation-duration':`${animationDuration}s`,
-        }}
-      >
-        <circle
-          className="path"
-          cx="50"
-          cy="50"
-          r="20"
-          fill="none"
-          strokeLinecap={strokeLinecap}
-          strokeMiterlimit="10"
-        />
-      </svg>
-    </div>
-  )
-}
+      <circle
+        className="path"
+        cx="50"
+        cy="50"
+        r="20"
+        fill="none"
+        strokeLinecap={strokeLinecap}
+        strokeMiterlimit="10"
+      />
+    </svg>
+  </div>
+)
 
 LoadingCircle.propTypes = {
   /**

package/src/ui/a/MetaCard/MetaCard.jsx

@@ -1,12 +1,12 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react'
 
-import { useInsertionEffect } from 'react'
-
 import PropTypes from 'prop-types'
 
 import styleNames from '@pareto-engineering/bem/exports'
 
+import './styles.scss'
+
 // Local Definitions
 
 const baseClassName = styleNames.base
@@ -22,28 +22,24 @@ const MetaCard = ({
   style,
   children,
   hasBackgroundBlur,
-}) => {
-  useInsertionEffect(() => {
-    import('./styles.scss')
-  }, [])
-
-  return (
-    <div
-      id={id}
-      className={[
-        baseClassName,
-        componentClassName,
-        userClassName,
-        hasBackgroundBlur && styleNames.modifierBlur,
-      ]
-        .filter((e) => e)
-        .join(' ')}
-      style={style}
-    >
-      {children}
-    </div>
-  )
-}
+  spaced,
+}) => (
+  <div
+    id={id}
+    className={[
+      baseClassName,
+      componentClassName,
+      userClassName,
+      hasBackgroundBlur && styleNames.modifierBlur,
+      spaced && styleNames.modifierSpaced,
+    ]
+      .filter((e) => e)
+      .join(' ')}
+    style={style}
+  >
+    {children}
+  </div>
+)
 
 MetaCard.propTypes = {
   /**
@@ -65,6 +61,11 @@ MetaCard.propTypes = {
    * Whether the card has a background blur
    * */
   hasBackgroundBlur:PropTypes.bool,
+
+  /**
+   * Whether to apply a gap to the top and bottom
+   * */
+  spaced:PropTypes.bool,
 }
 
 MetaCard.defaultProps = {

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

@@ -1,9 +1,11 @@
 /* @pareto-engineering/generator-front 1.0.12 */
+/* stylelint-disable selector-max-universal -- exception */
 
 @use "@pareto-engineering/bem";
 @use "@pareto-engineering/styles/src/mixins";
 @use "@pareto-engineering/styles/src/globals" as *;
 
+$default-padding: var(--spacing-2) 0;
 $default-border-radius: 2.25rem;
 $default-border-color: var(--hard-background-cards);
 $default-background: var(--background-cards-50);
@@ -14,6 +16,7 @@ $default-blur: var(--theme-default-blur);
   background: $default-background;
   border: 1px solid $default-border-color;
   border-radius: $default-border-radius;
+  padding: $default-padding;
 
   &.#{bem.$modifier-blur} {
     backdrop-filter: $default-blur;
@@ -23,6 +26,20 @@ $default-blur: var(--theme-default-blur);
     // Temporary solution
     margin-left: calc((var(--gap)) * -1);
     margin-right: calc((var(--gap)) * -1);
-    padding: var(--gap);
+    padding: 0 var(--gap);
+
+    &.#{bem.$modifier-spaced} {
+      padding: var(--gap);
+
+      > * {
+        &:first-child {
+          margin-top: 0;
+        }
+
+        &:last-child {
+          margin-bottom: 0;
+        }
+      }
+    }
   }
 }

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

@@ -1,8 +1,6 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react'
 
-import { useInsertionEffect } from 'react'
-
 import PropTypes from 'prop-types'
 
 import styleNames from '@pareto-engineering/bem/exports'
@@ -11,6 +9,8 @@ import styleNames from '@pareto-engineering/bem/exports'
 
 import { Person } from './common'
 
+import './styles.scss'
+
 const baseClassName = styleNames.base
 
 const componentClassName = 'people'
@@ -26,35 +26,29 @@ const People = ({
   children,
   columnWidth,
   // ...otherProps
-}) => {
-  useInsertionEffect(() => {
-    import('./styles.scss')
-  }, [])
-
-  return (
-    <div
-      id={id}
-      className={[
-
-        baseClassName,
-
-        componentClassName,
-        userClassName,
-        'u1',
-      ]
-        .filter((e) => e)
-        .join(' ')}
-      style={{
-        ...style,
-        '--image-size'  :imageSize,
-        '--column-width':columnWidth,
-      }}
-      // {...otherProps}
-    >
-      {children}
-    </div>
-  )
-}
+}) => (
+  <div
+    id={id}
+    className={[
+
+      baseClassName,
+
+      componentClassName,
+      userClassName,
+      'u1',
+    ]
+      .filter((e) => e)
+      .join(' ')}
+    style={{
+      ...style,
+      '--image-size'  :imageSize,
+      '--column-width':columnWidth,
+    }}
+    // {...otherProps}
+  >
+    {children}
+  </div>
+)
 
 People.propTypes = {
   /**

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

@@ -23,28 +23,40 @@ const Person = ({
   role,
   color,
   // ...otherProps
-}) => (
-  <div
-    id={id}
-    className={[
+}) => {
+  const handleImageSrcError = (e) => {
+    e.target.onerror = null
+    e.target.src = '/default-avatar.svg'
+  }
 
-      baseClassName,
+  return (
+    <div
+      id={id}
+      className={[
 
-      componentClassName,
-      userClassName,
-      `y-${color}`,
-    ]
-      .filter((e) => e)
-      .join(' ')}
-    style={style}
-  >
-    <img className="image v50 mr-v" src={image} alt={`${name}, ${role}`} />
-    <div className="details">
-      <p className="name">{name}</p>
-      <p className="role">{role}</p>
+        baseClassName,
+
+        componentClassName,
+        userClassName,
+        `y-${color}`,
+      ]
+        .filter((e) => e)
+        .join(' ')}
+      style={style}
+    >
+      <img
+        className="image v50 mr-v"
+        src={image || '/default-avatar.svg'}
+        alt={`${name}, ${role}`}
+        onError={handleImageSrcError}
+      />
+      <div className="details">
+        {name && <p className="name">{name}</p>}
+        { role && <p className="role">{role}</p>}
+      </div>
     </div>
-  </div>
-)
+  )
+}
 
 Person.propTypes = {
   /**
@@ -69,11 +81,11 @@ Person.propTypes = {
   /**
    *  The person's name
    */
-  name :PropTypes.string.isRequired,
+  name :PropTypes.string,
   /**
    *  The person's role
    */
-  role :PropTypes.string.isRequired,
+  role :PropTypes.string,
   /**
    * The base color of the person's component
    */
@@ -81,7 +93,7 @@ Person.propTypes = {
 }
 
 Person.defaultProps = {
-  color:'background2',
+  color:'background-far',
 }
 
 export default Person

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

@@ -11,7 +11,9 @@ $default-padding:var(--u);
 $default-horizontal-margin: .5em;
 
 $default-grid-gap: 1em;
-$default-image-padding: 1.5rem;
+$default-margin: 1em;
+$default-image-margin: var(--default-image-margin, #{$default-margin});
+$default-color: var(--default-color, var(--paragraph));
 
 .#{bem.$base}.people {
   display: grid;
@@ -29,18 +31,22 @@ $default-image-padding: 1.5rem;
     .image {
       border-radius: $default-border-radius;
       height: var(--image-size);
-      margin-right: $default-image-padding;
+      margin-right: $default-image-margin;
       width: var(--image-size);
     }
 
     .details {
       align-items: flex-start;
-      color: var(--grey);
+      color: $default-color;
       display: flex;
       flex-direction: column;
 
+      p:only-child {
+        margin: 0;
+      }
+
       .name {
-        color: var(--grey);
+        color: $default-color;
         margin-bottom: .1em;
       }
 

package/src/ui/a/Popover/Popover.jsx

@@ -1,7 +1,7 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react'
 
-import { useRef, useInsertionEffect } from 'react'
+import { useRef } from 'react'
 
 import PropTypes from 'prop-types'
 
@@ -10,6 +10,8 @@ import styleNames from '@pareto-engineering/bem/exports'
 // Local Definitions
 import { useDynamicPosition } from 'ui/utils'
 
+import './styles.scss'
+
 const baseClassName = styleNames.base
 
 const componentClassName = 'popover'
@@ -31,10 +33,6 @@ const Popover = ({
   offsetYPx,
   // ...otherProps
 }) => {
-  useInsertionEffect(() => {
-    import('./styles.scss')
-  }, [])
-
   const popoverRef = useRef(null)
   const {
     primaryPosition,
@@ -146,7 +144,7 @@ Popover.propTypes = {
 }
 
 Popover.defaultProps = {
-  color                  :'background1',
+  color                  :'background-near',
   isOpen                 :false,
   preferredPrimaryOrder  :['bottom', 'top', 'right', 'left'],
   preferredSecondaryOrder:['left', 'right', 'bottom', 'top'],

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

@@ -2,7 +2,7 @@
 
 @use "@pareto-engineering/bem";
 
-$default-border: var(--theme-border-style) var(--metadata);
+$default-border: var(--theme-default-border-style) var(--metadata);
 
 .#{bem.$base}.popover {
   background-color: var(--x);

package/src/ui/a/ProgressBar/ProgressBar.jsx

@@ -1,12 +1,12 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react'
 
-import { useInsertionEffect } from 'react'
-
 import PropTypes from 'prop-types'
 
 import styleNames from '@pareto-engineering/bem/exports'
 
+import './styles.scss'
+
 // Local Definitions
 
 const baseClassName = styleNames.base
@@ -24,36 +24,32 @@ const ProgressBar = ({
   color,
   progress,
   height,
+  rounded,
   // ...otherProps
-}) => {
-  useInsertionEffect(() => {
-    import('./styles.scss')
-  }, [])
-
-  return (
-    <div
-      id={id}
-      className={[
-
-        baseClassName,
-
-        componentClassName,
-        attached && styleNames.modifierAttached,
-        color && `x-${color}`,
-        userClassName,
-      ]
-        .filter((e) => e)
-        .join(' ')}
-      style={{
-        '--progress':progress,
-        '--height'  :height,
-        ...style,
-      }}
-      data-length="50%"
-      // {...otherProps}
-    />
-  )
-}
+}) => (
+  <div
+    id={id}
+    className={[
+
+      baseClassName,
+
+      componentClassName,
+      attached && styleNames.modifierAttached,
+      color && `x-${color}`,
+      userClassName,
+      rounded && 'rounded',
+    ]
+      .filter((e) => e)
+      .join(' ')}
+    style={{
+      '--progress':progress,
+      '--height'  :height,
+      ...style,
+    }}
+    data-length="50%"
+    // {...otherProps}
+  />
+)
 
 ProgressBar.propTypes = {
   /**

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

@@ -5,9 +5,11 @@
 $default-height:var(--height, 1em);
 $default-border:none;//2px solid var(--grid);
 $default-transition-duration:.5s;
-$default-color:var(--x, var(--main1));
+$default-color:var(--x, var(--main));
+$default-border-radius:var(--theme-border-radius, 1.875rem);
 
 .#{bem.$base}.progress-bar {
+  background-color: var(--progress-bar-background-color);
   border: $default-border;
   height: $default-height;
   position: relative;
@@ -28,6 +30,14 @@ $default-color:var(--x, var(--main1));
     z-index: 1;
   }
 
+  &.rounded {
+    border-radius: $default-border-radius;
+
+    &::after {
+      border-radius: $default-border-radius;
+    }
+  }
+
   &.#{bem.$modifier-attached} {
     border: unset;
     border-bottom: $default-border;