@pareto-engineering/design-system 2.0.0-alpha.9 → 3.0.0-alpha.22

package/src/ui/a/Label/index.js

@@ -0,0 +1,2 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+export { default as Label } from './Label'

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

@@ -0,0 +1,34 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+@use "@pareto-engineering/bem";
+
+$default-padding-bottom: .4em;
+$default-padding-side: .7em;
+$default-padding-top: .5em;
+
+$compact-padding: $default-padding-top*.8 $default-padding-side*.8 $default-padding-bottom*.8;
+$default-padding: $default-padding-top $default-padding-side $default-padding-bottom;
+
+$default-color: primary;
+$default-image-size: 2em;
+$default-font-size: calc(1em * var(--s-1));
+
+.#{bem.$base}.label {
+    align-items: center;
+    background: var(--x, var(--#{$default-color}));
+    border-radius: 3em;
+    color: var(--on-x, var(--on-#{$default-color}));
+    display: inline-flex;
+    font-size: $default-font-size;
+    padding: $default-padding;
+    white-space: nowrap;
+
+    &.#{bem.$modifier-compact} {
+        padding: $compact-padding;
+    }
+
+    &.#{bem.$modifier-ghost} {
+        background: transparent;
+        border: 1px solid var(--x, var(--#{$default-color}));
+        color: var(--x, var(--#{$default-color}));
+    }
+}

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

@@ -5,7 +5,7 @@ import { useLayoutEffect } from 'react'
 
 import PropTypes from 'prop-types'
 
-import styleNames from '@pareto-engineering/bem'
+import styleNames from '@pareto-engineering/bem/exports'
 
 // Local Definitions
 

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

@@ -5,7 +5,7 @@ import { useLayoutEffect } from 'react'
 
 import PropTypes from 'prop-types'
 
-import styleNames from '@pareto-engineering/bem'
+import styleNames from '@pareto-engineering/bem/exports'
 
 // Local Definitions
 

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

@@ -3,7 +3,7 @@ import * as React from 'react'
 
 import PropTypes from 'prop-types'
 
-import styleNames from '@pareto-engineering/bem'
+import styleNames from '@pareto-engineering/bem/exports'
 
 // Local Definitions
 
@@ -40,8 +40,8 @@ const Person = ({
   >
     <img className="image v50 mr-v" src={image} alt={`${name}, ${role}`} />
     <div className="details">
-      <p className="name s-1">{name}</p>
-      <p className="role s-2">{role}</p>
+      <p className="name">{name}</p>
+      <p className="role">{role}</p>
     </div>
   </div>
 )

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

@@ -1,8 +1,9 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 
 @use "@pareto-engineering/bem";
-@use "@aztlan/stylebook/src/mixins";
-@use "@aztlan/stylebook/src/globals" as *;
+@use "@pareto-engineering/styles/src/mixins";
+@use "@pareto-engineering/styles/src/globals" as *;
+@use "@aztlan/swatch/src/collections/palettes/monochrome";
 
 $default-border-radius:50%;
 $default-person-border-radius:2em;
@@ -10,6 +11,7 @@ $default-padding:var(--u);
 $default-horizontal-margin: .5em;
 
 $default-grid-gap: 1em;
+$default-image-padding: 1.5rem;
 
 .#{bem.$base}.people {
   display: grid;
@@ -19,7 +21,6 @@ $default-grid-gap: 1em;
 
   .person {
     align-items: center;
-    background-color: var(--y);
     border-radius: $default-person-border-radius;
     display: flex;
 
@@ -29,20 +30,21 @@ $default-grid-gap: 1em;
       border-radius: $default-border-radius;
       height: var(--image-size);
       width: var(--image-size);
+      margin-right: $default-image-padding;
     }
 
     .details {
       align-items: flex-start;
       display: flex;
       flex-direction: column;
+      color: var(--grey);
 
       .name {
-        margin-bottom: .25em;
-        color: var(--on-y);
+        margin-bottom: .1em;
+        color: var(--grey);
       }
 
       .role {
-        color: var(--on-y);
         opacity: .5;
       }
     }

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

@@ -0,0 +1,157 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { useRef, useLayoutEffect } from 'react'
+
+import PropTypes from 'prop-types'
+
+import styleNames from '@pareto-engineering/bem/exports'
+
+// Local Definitions
+import { useDynamicPosition } from 'ui/utils'
+
+const baseClassName = styleNames.base
+
+const componentClassName = 'popover'
+
+/**
+ * This is the component description.
+ */
+const Popover = ({
+  id,
+  className:userClassName,
+  style,
+  color,
+  children,
+  isOpen,
+  parentRef,
+  preferredPrimaryOrder,
+  preferredSecondaryOrder,
+  offsetXPx,
+  offsetYPx,
+  // ...otherProps
+}) => {
+  useLayoutEffect(() => {
+    import('./styles.scss')
+  }, [])
+
+  const popoverRef = useRef(null)
+  const {
+    primaryPosition,
+    secondaryPosition,
+  } = useDynamicPosition({
+    preferredPrimaryOrder,
+    preferredSecondaryOrder,
+    elementRef:popoverRef,
+    parentRef,
+    offsetXPx,
+    offsetYPx,
+  })
+
+  return (
+    <div
+      id={id}
+      className={[
+        baseClassName,
+        componentClassName,
+        userClassName,
+        isOpen && 'open',
+        `x-${color}`,
+        primaryPosition,
+        secondaryPosition,
+      ]
+        .filter((e) => e)
+        .join(' ')}
+      style={style}
+      ref={popoverRef}
+      // {...otherProps}
+    >
+      {children}
+    </div>
+  )
+}
+
+Popover.propTypes = {
+  /**
+   * The HTML id for this element
+   */
+  id:PropTypes.string,
+
+  /**
+   * The HTML class names for this element
+   */
+  className:PropTypes.string,
+
+  /**
+   * The React-written, css properties for this element.
+   */
+  style:PropTypes.objectOf(PropTypes.string),
+
+  /**
+   *  The children JSX
+   */
+  children:PropTypes.node,
+
+  /**
+   * The base color of the popover
+   */
+  color:PropTypes.string,
+
+  /**
+   * Whether the popover should be visible or not
+   */
+  isOpen:PropTypes.bool,
+
+  /**
+   * The preferred primary position order of the popover
+   */
+  preferredPrimaryOrder:PropTypes.arrayOf(
+    PropTypes.oneOf([
+      'bottom',
+      'top',
+      'right',
+      'left',
+    ]),
+  ),
+
+  /**
+   * The preferred secondary position order of the popover
+   */
+  preferredSecondaryOrder:PropTypes.arrayOf(
+    PropTypes.oneOf([
+      'left',
+      'right',
+      'bottom',
+      'top',
+    ]),
+  ),
+
+  /**
+   * The horizonal offset in pixels from the anchor point to the popover
+   */
+  offsetXPx:PropTypes.number,
+
+  /**
+   * The vertical offset in pixels from the anchor point to the popover
+   */
+  offsetYPx:PropTypes.number,
+
+  /**
+   * The reference to the parent element
+   */
+  parentRef:PropTypes.oneOfType([
+    PropTypes.func,
+    PropTypes.shape({ current: PropTypes.instanceOf(Element) }),
+  ]),
+}
+
+Popover.defaultProps = {
+  color                  :'background1',
+  isOpen                 :false,
+  preferredPrimaryOrder  :['bottom', 'top', 'right', 'left'],
+  preferredSecondaryOrder:['left', 'right', 'bottom', 'top'],
+  offsetXPx              :16,
+  offsetYPx              :0,
+}
+
+export default Popover

package/src/ui/a/Popover/index.js

@@ -0,0 +1,2 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+export { default as Popover } from './Popover'

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

@@ -0,0 +1,33 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+@use "@pareto-engineering/bem";
+
+$default-border: var(--theme-border-style) var(--metadata);
+
+.#{bem.$base}.popover {
+  position: absolute;
+  z-index: 1;
+  background-color: var(--x);
+  border: $default-border;
+
+  &:not(.open) {
+    display: none;
+  }
+
+  &.bottom {
+    top: 100%;
+    // bottom: 0;
+  }
+
+  &.left {
+    left: 0;
+  }
+
+  &.right {
+    right: 0;
+  }
+
+  &.top {
+    bottom: 100%;
+    top: auto;
+  }
+}

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

@@ -5,7 +5,7 @@ import { useLayoutEffect } from 'react'
 
 import PropTypes from 'prop-types'
 
-import styleNames from '@pareto-engineering/bem'
+import styleNames from '@pareto-engineering/bem/exports'
 
 // Local Definitions
 

package/src/ui/a/Quote/Quote.jsx

@@ -5,7 +5,7 @@ import { useLayoutEffect } from 'react'
 
 import PropTypes from 'prop-types'
 
-import styleNames from '@pareto-engineering/bem'
+import styleNames from '@pareto-engineering/bem/exports'
 
 // Local Definitions
 

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

@@ -1,7 +1,7 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 @use "@pareto-engineering/bem";
-@use "@aztlan/stylebook/src/mixins";
-@use "@aztlan/stylebook/src/globals" as *;
+@use "@pareto-engineering/styles/src/mixins";
+@use "@pareto-engineering/styles/src/globals" as *;
 
 
 .#{bem.$base}.quote{

package/src/ui/a/SVG/SVG.jsx

@@ -3,7 +3,7 @@ import * as React from 'react'
 import { useLayoutEffect, useMemo } from 'react'
 import PropTypes from 'prop-types'
 
-import styleNames from '@pareto-engineering/bem'
+import styleNames from '@pareto-engineering/bem/exports'
 
 import { UseSVG } from './common'
 

package/src/ui/a/{ContentCard/ContentCard.jsx → SnapScroller/SnapScroller.jsx}

@@ -5,26 +5,23 @@ import { useLayoutEffect } from 'react'
 
 import PropTypes from 'prop-types'
 
-import styleNames from '@pareto-engineering/bem'
+import styleNames from '@pareto-engineering/bem/exports'
 
 // Local Definitions
 
-import { Section } from './common'
-
 const baseClassName = styleNames.base
 
-const componentClassName = 'content-card'
+const componentClassName = 'snap-scroller'
 
 /**
  * This is the component description.
  */
-const ContentCard = ({
+const SnapScroller = ({
   id,
   className:userClassName,
   style,
-  color,
   children,
-  // messages,
+  noScrollOnDesktop,
   // ...otherProps
 }) => {
   useLayoutEffect(() => {
@@ -35,22 +32,24 @@ const ContentCard = ({
     <div
       id={id}
       className={[
+
         baseClassName,
+
         componentClassName,
         userClassName,
-        `y-${color}`,
-        'u1',
+        noScrollOnDesktop && 'desktop-no-scroll',
       ]
         .filter((e) => e)
         .join(' ')}
       style={style}
+      // {...otherProps}
     >
       {children}
     </div>
   )
 }
 
-ContentCard.propTypes = {
+SnapScroller.propTypes = {
   /**
    * The HTML id for this element
    */
@@ -64,21 +63,21 @@ ContentCard.propTypes = {
   /**
    * The React-written, css properties for this element.
    */
-  style   :PropTypes.objectOf(PropTypes.string),
-  /**
-  * Base color
- */
-  color   :PropTypes.string,
+  style:PropTypes.objectOf(PropTypes.string),
+
   /**
-   * The children jsx
+   *  The children JSX
    */
   children:PropTypes.node,
-}
 
-ContentCard.defaultProps = {
-  color:'background2',
+  /**
+   * Whether to snap scroll on desktop (false will enable a flexbox)
+   */
+  noScrollOnDesktop:PropTypes.bool,
 }
 
-ContentCard.Section = Section
+SnapScroller.defaultProps = {
+  noScrollOnDesktop:false,
+}
 
-export default ContentCard
+export default SnapScroller

package/src/ui/a/SnapScroller/index.js

@@ -0,0 +1,2 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+export { default as SnapScroller } from './SnapScroller'

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

@@ -0,0 +1,38 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+
+@use "@pareto-engineering/bem";
+@use "@pareto-engineering/styles/src/mixins";
+@use "@pareto-engineering/styles/src/globals" as *;
+
+$default-spacing:var(--spacing, var(--u));
+
+.#{bem.$base}.snap-scroller {
+  display: flex;
+  -ms-overflow-style: none; /* for Internet Explorer, Edge */
+  overflow-x: auto;
+  scroll-padding: calc(#{$default-spacing} *2);
+  scroll-snap-type: x mandatory;
+  scrollbar-width: none;
+
+
+  > * {
+    &:first-child {
+      margin-left: $default-spacing;
+    }
+    display: inline-block;
+    margin-right: $default-spacing;
+    scroll-snap-align: start;
+  }
+
+
+  @include mixins.media($from:$sm-md) {
+    &.desktop-no-scroll {
+      overflow: auto;
+      -ms-overflow-style: unset; /* for Internet Explorer, Edge */
+      scroll-snap-type: none;
+      scrollbar-width: unset;
+    }
+  }
+}
+
+

package/src/ui/a/Spinner/Spinner.jsx

@@ -5,7 +5,7 @@ import { useLayoutEffect } from 'react'
 
 import PropTypes from 'prop-types'
 
-import styleNames from '@pareto-engineering/bem'
+import styleNames from '@pareto-engineering/bem/exports'
 
 // Local Definitions
 

package/src/ui/a/Timestamp/Timestamp.jsx

@@ -7,7 +7,7 @@ import {
 
 import PropTypes from 'prop-types'
 
-import styleNames from '@pareto-engineering/bem'
+import styleNames from '@pareto-engineering/bem/exports'
 
 import {
   format, differenceInDays, formatDistance, formatRelative,

package/src/ui/a/index.js

@@ -1,27 +1,20 @@
-export { SVG } from './SVG'
-export { DashboardNavbar } from './DashboardNavbar'
-export { IconList } from './IconList'
-export {
-  SiteContext,
-  SiteContextProvider,
-  useSite,
-  useTheme,
-} from './SiteContext'
-export { ProgressBar } from './ProgressBar'
-export { TeamInfo } from './TeamInfo'
 export { AnimatedCounter } from './AnimatedCounter'
-export { CustomerLogos } from './CustomerLogos'
-export { FeaturedOn } from './FeaturedOn'
-export { Spinner } from './Spinner'
+export {
+  AppContext, AppContextProvider, useApp, useTheme,
+} from './AppContext'
+export { ContentTree } from './ContentTree'
+export { Conversation } from './Conversation'
+export { DotInfo } from './DotInfo'
+export { Figure } from './Figure'
 export { HamburgerButton } from './HamburgerButton'
+export { IconList } from './IconList'
+export { Label } from './Label'
 export { LoadingCircle } from './LoadingCircle'
 export { People } from './People'
-export { Figure } from './Figure'
-export { Conversation } from './Conversation'
-export { CustomerStat } from './CustomerStat'
+export { Popover } from './Popover'
+export { ProgressBar } from './ProgressBar'
 export { Quote } from './Quote'
-export { ContentCard } from './ContentCard'
-export { DotInfo } from './DotInfo'
+export { SVG } from './SVG'
+export { SnapScroller } from './SnapScroller'
+export { Spinner } from './Spinner'
 export { Timestamp } from './Timestamp'
-export { Shapes } from './Shapes'
-export { OvalIllustration } from './OvalIllustration'

package/src/ui/b/Button/Button.jsx

@@ -4,7 +4,7 @@ import { useLayoutEffect } from 'react'
 import PropTypes from 'prop-types'
 
 // Package-level Imports
-import styleNames from '@pareto-engineering/bem'
+import styleNames from '@pareto-engineering/bem/exports'
 import { LoadingCircle } from 'ui'
 // Component-level imports
 import('./styles.scss')
@@ -23,6 +23,7 @@ const Button = ({
   isCompact,
   isGhost,
   isSimple,
+  arrowDirection,
   ...otherProps
 }) => {
   useLayoutEffect(() => {
@@ -40,6 +41,7 @@ const Button = ({
         isGhost && styleNames.modifierGhost,
         isCompact && styleNames.modifierCompact,
         isSimple && styleNames.modifierSimple,
+        arrowDirection && `arrow-${arrowDirection}`,
       ]
         .filter((e) => e)
         .join(' ')}
@@ -98,11 +100,17 @@ Button.propTypes = {
   /**
    * The button color
    */
-  color    :PropTypes.string,
+  color:PropTypes.string,
+
   /**
    * Button loading state
    */
   isLoading:PropTypes.bool,
+
+  /**
+   * The direction of the arrow if the button has one
+   */
+  arrowDirection:PropTypes.string,
 }
 
 Button.defaultProps = {