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

package/src/ui/a/Quote/Quote.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,36 +25,33 @@ const Quote = ({
   author,
   color,
   // ...otherProps
-}) => {
-  useInsertionEffect(() => {
-    import('./styles.scss')
-  }, [])
-
-  return (
-    <figure
-      id={id}
-      className={[
-        baseClassName,
-        componentClassName,
-        userClassName,
-        `x-${color}`,
-      ]
-        .filter((e) => e)
-        .join(' ')}
-      style={style}
-      // {...otherProps}
-    >
-      <blockquote cite={source} className="blockquote uc">
-        <p className="quotation c-x md-s0 s-1">
-          {children}
-        </p>
-      </blockquote>
-      <figcaption className="figcaption">
-        <cite>{author}</cite>
-      </figcaption>
-    </figure>
-  )
-}
+}) => (
+  <figure
+    id={id}
+    className={[
+      baseClassName,
+      componentClassName,
+      userClassName,
+      `x-${color}`,
+    ]
+      .filter((e) => e)
+      .join(' ')}
+    style={style}
+    // {...otherProps}
+  >
+    <blockquote cite={source} className="blockquote">
+      <p className="quotation h2">
+        <span className="c-x">&ldquo;</span>
+        <span className="c-x">{children}</span>
+        <span className="c-x">&rdquo;</span>
+      </p>
+    </blockquote>
+    <figcaption className="figcaption">
+      <span className="x-metadata c-x">-</span>
+      <cite className="x-metadata c-x">{author}</cite>
+    </figcaption>
+  </figure>
+)
 
 Quote.propTypes = {
   /**
@@ -70,27 +67,31 @@ Quote.propTypes = {
   /**
    * The React-written, css properties for this element.
    */
-  style   :PropTypes.objectOf(PropTypes.string),
+  style:PropTypes.objectOf(PropTypes.string),
+
   /**
    * The children jsx
    */
   children:PropTypes.node.isRequired,
+
   /**
    * A URL for the source of the quotation
    */
-  source  :PropTypes.string,
+  source:PropTypes.string,
+
   /**
    * text representation of the source
    */
-  author  :PropTypes.string,
+  author:PropTypes.string,
+
   /**
    * The color of the quotation text
    */
-  color   :PropTypes.string,
+  color:PropTypes.string,
 }
 
 Quote.defaultProps = {
-  color:'main1',
+  color:'highlighted',
 }
 
 export default Quote

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

@@ -4,53 +4,32 @@
 @use "@pareto-engineering/styles/src/mixins";
 @use "@pareto-engineering/styles/src/globals" as *;
 
+$default-gap: 3rem;
 
 .#{bem.$base}.quote {
-  align-items: center;
+  border-left: 3px solid var(--x);
   display: flex;
   flex-direction: column;
 
-  .blockquote {
+  > .blockquote {
     margin: 0;
-    padding: 0;
-  }
-
-  .figcaption {
-    padding: 0;
-  }
 
-  @include mixins.media($from:$sm-md) {
-    .blockquote {
-      .quotation {
-        display: inline;
-      }
-
-      &::before {
-        color: transparent;
-        content: "\201C";
-        font-size: 4em;
-        line-height: 0;
-        opacity: inherit;
-        position: static;
-        -webkit-text-stroke: 1px var(--x);
-        vertical-align: -.4em;
-      }
-
-      &::after {
-        color: transparent;
-        content: "\201D";
-        font-size: 4em;
-        line-height: 0;
-        margin-left: -.1em;
-        -webkit-text-stroke: 1px var(--x);
-        vertical-align: -.6em;
-      }
+    > .h2 {
+      margin-left: 0;
+      margin-top: 0;
     }
 
-    .figcaption {
-      margin: 0;
+    > .quotation {
+      margin-left: $default-gap;
     }
   }
-}
 
+  > .figcaption {
+    margin-left: $default-gap;
+    padding: 0;
 
+    > cite {
+      font-style: normal;
+    }
+  }
+}

package/src/ui/a/Removable/Removable.jsx

@@ -0,0 +1,78 @@
+/* @pareto-engineering/generator-front 1.1.1-alpha.1 */
+import * as React from 'react'
+
+import PropTypes from 'prop-types'
+
+import styleNames from '@pareto-engineering/bem/exports'
+import './styles.scss'
+
+// Local Definitions
+
+const baseClassName = styleNames.base
+
+const componentClassName = 'removable'
+
+/**
+ * This is a wrapper component that adds a close button to its children.
+ */
+const Removable = ({
+  id,
+  className:userClassName,
+  style,
+  handleClose,
+  children,
+  // ...otherProps
+}) => (
+  <div
+    id={id}
+    className={[
+
+      baseClassName,
+
+      componentClassName,
+      userClassName,
+    ]
+      .filter((e) => e)
+      .join(' ')}
+    style={style}
+    // {...otherProps}
+  >
+    {children}
+    <button type="button" className="close-button" onClick={handleClose || (() => null)}>
+      <span className="icon">Y</span>
+    </button>
+  </div>
+)
+
+Removable.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 function to call when the close button is clicked
+   */
+  handleClose:PropTypes.func,
+
+  /**
+   *  The children JSX
+   */
+  children:PropTypes.node,
+}
+
+Removable.defaultProps = {
+  // someProp:false
+}
+
+export default Removable

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

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

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

@@ -0,0 +1,33 @@
+/* @pareto-engineering/generator-front 1.1.1-alpha.1 */
+
+@use "@pareto-engineering/bem";
+
+$default-padding: .5rem;
+
+.#{bem.$base}.removable {
+  align-items: center;
+  background-color: var(--background-inputs);
+  border: var(--theme-default-border-style) var(--main2);
+  border-radius: $default-padding;
+  display: flex;
+  justify-content: space-between;
+  padding: $default-padding;
+
+  > :first-child {
+    flex-grow: 1;
+  }
+
+  .close-button {
+    background-color: transparent;
+    border: none;
+    color: var(--metadata);
+    cursor: pointer;
+    margin-left: var(--gap);
+
+    &:hover {
+      color: var(--hard-metadata);
+    }
+  }
+}
+
+

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

@@ -1,12 +1,14 @@
 /* @pareto-engineering/generator-front 1.0.3 */
 import * as React from 'react'
-import { useInsertionEffect, useMemo } from 'react'
+import { useMemo } from 'react'
 import PropTypes from 'prop-types'
 
 import styleNames from '@pareto-engineering/bem/exports'
 
 import { UseSVG } from './common'
 
+import './styles.scss'
+
 // Local Definitions
 
 const baseClassName = styleNames.base
@@ -34,10 +36,6 @@ const SVG = ({
   animated,
   ...otherProps
 }) => {
-  useInsertionEffect(() => {
-    import('./styles.scss')
-  })
-
   const useSVGProps = useMemo(() => ({
     className:useClassName,
     source,

package/src/ui/a/SnapScroller/SnapScroller.jsx

@@ -1,11 +1,12 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react'
 
-import { useInsertionEffect } from 'react'
+import { useState, useRef } from 'react'
 
 import PropTypes from 'prop-types'
 
 import styleNames from '@pareto-engineering/bem/exports'
+import './styles.scss'
 
 // Local Definitions
 
@@ -24,17 +25,34 @@ const SnapScroller = ({
   noScrollOnDesktop,
   // ...otherProps
 }) => {
-  useInsertionEffect(() => {
-    import('./styles.scss')
-  }, [])
+  const [isDragging, setIsDragging] = useState(false)
+  const [startX, setStartX] = useState(0)
+  const [startScrollX, setStartScrollX] = useState(0)
+  const ref = useRef(null)
+
+  const onMouseDown = (e) => {
+    setIsDragging(true)
+    setStartX(e.clientX)
+    setStartScrollX(ref.current.scrollLeft)
+  }
+
+  const onMouseUp = () => {
+    setIsDragging(false)
+  }
+
+  const onMouseMove = (e) => {
+    if (isDragging) {
+      const deltaX = e.clientX - startX
+      ref.current.scrollLeft = startScrollX - deltaX
+    }
+  }
 
   return (
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
     <div
       id={id}
       className={[
-
         baseClassName,
-
         componentClassName,
         userClassName,
         noScrollOnDesktop && 'desktop-no-scroll',
@@ -42,6 +60,10 @@ const SnapScroller = ({
         .filter((e) => e)
         .join(' ')}
       style={style}
+      ref={ref}
+      onMouseDown={noScrollOnDesktop ? null : onMouseDown}
+      onMouseUp={noScrollOnDesktop ? null : onMouseUp}
+      onMouseMove={noScrollOnDesktop ? null : onMouseMove}
       // {...otherProps}
     >
       {children}

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

@@ -5,7 +5,7 @@
 @use "@pareto-engineering/styles/src/mixins";
 @use "@pareto-engineering/styles/src/globals" as *;
 
-$default-spacing: var(--gap, 1em);
+$default-spacing: var(--gap);
 
 .#{bem.$base}.snap-scroller {
   display: flex;
@@ -21,7 +21,6 @@ $default-spacing: var(--gap, 1em);
   }
 
   >* {
-    display: inline-block;
     scroll-snap-align: start;
 
     &:first-child {
@@ -29,19 +28,49 @@ $default-spacing: var(--gap, 1em);
     }
   }
 
+  &:not(.desktop-no-scroll) {
+    >* {
+      &:nth-child(2) {
+        margin-left: $default-spacing;
+      }
+    }
+  }
+
+  &::after {
+    content: "";
+    min-width: calc($default-spacing / 2);
+  }
+
   @include mixins.media($from: $sm-md) {
+    scroll-snap-type: none;
+
     &.desktop-no-scroll {
       overflow: auto;
       -ms-overflow-style: unset;
-      scroll-snap-type: none;
       scrollbar-width: unset;
 
+      &::after {
+        display: none;
+      }
+
       >* {
         min-width: unset;
 
         &:first-child {
           margin-left: unset;
         }
+
+        &:last-child {
+          margin-right: unset;
+        }
+      }
+    }
+
+    &:not(.desktop-no-scroll) {
+      >* {
+        &:nth-child(2) {
+          margin-left: unset;
+        }
       }
     }
   }

package/src/ui/a/Spinner/Spinner.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,29 +22,23 @@ const Spinner = ({
   style,
   color,
   // ...otherProps
-}) => {
-  useInsertionEffect(() => {
-    import('./styles.scss')
-  }, [])
-
-  return (
-    <div
-      id={id}
-      className={[
-        baseClassName,
-        componentClassName,
-        userClassName,
-        `x-${color}`,
-      ]
-        .filter((e) => e)
-        .join(' ')}
-      style={style}
-      // {...otherProps}
-    >
-      <div className="loader" />
-    </div>
-  )
-}
+}) => (
+  <div
+    id={id}
+    className={[
+      baseClassName,
+      componentClassName,
+      userClassName,
+      `x-${color}`,
+    ]
+      .filter((e) => e)
+      .join(' ')}
+    style={style}
+    // {...otherProps}
+  >
+    <div className="loader" />
+  </div>
+)
 
 Spinner.propTypes = {
   /**

package/src/ui/a/TextSteps/TextSteps.jsx

@@ -1,60 +1,53 @@
 import * as React from 'react'
 
-import { useLayoutEffect } from 'react'
-
 import PropTypes from 'prop-types'
 
 import styleNames from '@pareto-engineering/bem/exports'
+import './styles.scss'
 
 // Local Definitions
 
 const baseClassName = styleNames.base
 
-const componentClassName = 'steps'
+const componentClassName = 'text-steps'
 
 /**
  * This is the component description.
  */
-const Steps = ({
+const TextSteps = ({
   id,
   className:userClassName,
   style,
   items,
   title,
-}) => {
-  useLayoutEffect(() => {
-    import('./styles.scss')
-  }, [])
-
-  return (
-    <div
-      id={id}
-      className={[
-        baseClassName,
-        componentClassName,
-        userClassName,
-        'grid',
-      ]
-        .filter((e) => e)
-        .join(' ')}
-      style={style}
-    >
-      {title && (
-      <p className="title h4">
-        {title}
-      </p>
-      )}
-      {items.map((item, i) => (
-        <>
-          <div className=" number h3 start-1 span-2 md-start-1 md-span-2"><p>{i + 1}</p></div>
-          <div className=" description"><p>{item}</p></div>
-        </>
-      ))}
-    </div>
-  )
-}
+}) => (
+  <div
+    id={id}
+    className={[
+      baseClassName,
+      componentClassName,
+      userClassName,
+      'grid',
+    ]
+      .filter((e) => e)
+      .join(' ')}
+    style={style}
+  >
+    {title && (
+    <p className="title h4">
+      {title}
+    </p>
+    )}
+    {items.map((item, i) => (
+      <>
+        <div className=" number h3 start-1 span-2 md-start-1 md-span-2"><p>{i + 1}</p></div>
+        <div className=" description"><p>{item}</p></div>
+      </>
+    ))}
+  </div>
+)
 
-Steps.propTypes = {
+TextSteps.propTypes = {
   /**
    * The HTML id for this element
    */
@@ -84,4 +77,4 @@ Steps.propTypes = {
   title:PropTypes.string,
 }
 
-export default Steps
+export default TextSteps

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

@@ -6,7 +6,7 @@
 
 $default-padding: 1em;
 
-.#{bem.$base}.steps {
+.#{bem.$base}.text-steps {
   grid-column: 1 / -1;
   grid-template-columns: repeat(var(--columns), 1fr);
   padding: $default-padding 0;

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

@@ -2,17 +2,19 @@
 import * as React from 'react'
 
 import {
-  useInsertionEffect, useMemo, useCallback, useState,
+  useMemo, useCallback, useState,
 } from 'react'
 
 import PropTypes from 'prop-types'
 
-import styleNames from '@pareto-engineering/bem/exports'
-
 import {
   format, differenceInDays, formatDistance, formatRelative,
 } from 'date-fns'
 
+import styleNames from '@pareto-engineering/bem/exports'
+
+import './styles.scss'
+
 // Local Definitions
 
 const baseClassName = styleNames.base
@@ -36,10 +38,6 @@ const Timestamp = ({
   // ...otherProps
   as:Element,
 }) => {
-  useInsertionEffect(() => {
-    import('./styles.scss')
-  }, [])
-
   const [currentDisplay, setCurrentDisplay] = useState(enabledFormats[0])
 
   const formatMap = useMemo(() => ({