@pareto-engineering/design-system 5.2.1 → 5.4.0

package/dist/es/a/People/styles.scss

@@ -1,60 +0,0 @@
-/* @pareto-engineering/generator-front 1.0.12 */
-
-@use "@pareto-engineering/bem";
-@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;
-$default-padding:var(--u);
-$default-horizontal-margin: .5em;
-
-$default-grid-gap: 1em;
-$default-margin: 1em;
-$default-image-margin: var(--default-image-margin, #{$default-margin});
-$default-color: var(--default-color, var(--paragraph));
-
-.#{bem.$base}.people {
-  display: grid;
-  gap: $default-grid-gap;
-  grid-template-columns: repeat(auto-fill, minmax(var(--column-width), 1fr));
-
-
-  .person {
-    align-items: center;
-    border-radius: $default-person-border-radius;
-    display: flex;
-
-    padding-right: $default-padding;
-
-    .image {
-      border-radius: $default-border-radius;
-      height: var(--image-size);
-      margin-right: $default-image-margin;
-      width: var(--image-size);
-    }
-
-    .details {
-      align-items: flex-start;
-      color: $default-color;
-      display: flex;
-      flex-direction: column;
-
-      p:only-child {
-        margin: 0;
-      }
-
-      .name {
-        color: $default-color;
-        margin-bottom: .1em;
-      }
-
-      .role {
-        opacity: .5;
-      }
-    }
-  }
-}
-
-

package/dist/es/a/Popover/Popover.js

@@ -1,106 +0,0 @@
-/* @pareto-engineering/generator-front 1.0.12 */
-import * as React from 'react';
-import { useRef } from 'react';
-import PropTypes from 'prop-types';
-import styleNames from '@pareto-engineering/bem/exports';
-
-// Local Definitions
-import { useDynamicPosition } from "../../utils";
-import "./styles.scss";
-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
-}) => {
-  const popoverRef = useRef(null);
-  const {
-    primaryPosition,
-    secondaryPosition
-  } = useDynamicPosition({
-    preferredPrimaryOrder,
-    preferredSecondaryOrder,
-    elementRef: popoverRef,
-    parentRef,
-    offsetXPx,
-    offsetYPx
-  });
-  return /*#__PURE__*/React.createElement("div", {
-    id: id,
-    className: [baseClassName, componentClassName, userClassName, isOpen && 'open', `x-${color}`, primaryPosition, secondaryPosition].filter(e => e).join(' '),
-    style: style,
-    ref: popoverRef
-    // {...otherProps}
-  }, children);
-};
-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.node
-  })])
-};
-Popover.defaultProps = {
-  color: 'background-near',
-  isOpen: false,
-  preferredPrimaryOrder: ['bottom', 'top', 'right', 'left'],
-  preferredSecondaryOrder: ['left', 'right', 'bottom', 'top'],
-  offsetXPx: 16,
-  offsetYPx: 0
-};
-export default Popover;

package/dist/es/a/Popover/index.js

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

package/dist/es/a/Popover/styles.scss

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

package/dist/es/a/ProgressBar/ProgressBar.js

@@ -1,69 +0,0 @@
-/* @pareto-engineering/generator-front 1.0.12 */
-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 = 'progress-bar';
-
-/**
- * This is the component description. This takes the color x = indigo.
- */
-const ProgressBar = ({
-  id,
-  className: userClassName,
-  style,
-  attached,
-  color,
-  progress,
-  height,
-  rounded
-  // ...otherProps
-}) => /*#__PURE__*/React.createElement("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 = {
-  /**
-   * 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 color of the logo
-   */
-  color: PropTypes.string,
-  /**
-   *  Whether the progress bar is attached to another element
-   */
-  attached: PropTypes.bool,
-  /**
-   * The current progress
-   */
-  progress: PropTypes.number.isRequired,
-  /**
-   * The height of the progress bar as a CSS value. 1em by default.
-   */
-  height: PropTypes.string
-};
-ProgressBar.defaultProps = {
-  attached: false
-};
-export default ProgressBar;

package/dist/es/a/ProgressBar/index.js

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

package/dist/es/a/ProgressBar/styles.scss

@@ -1,47 +0,0 @@
-/* @pareto-engineering/generator-front 1.0.12 */
-
-@use "@pareto-engineering/bem";
-
-$default-height:var(--height, 1em);
-$default-border:none;//2px solid var(--grid);
-$default-transition-duration:.5s;
-$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;
-
-  &::after {
-    background: $default-color;
-    content: " ";
-    font-size: 1px;
-    height: 100%;
-    left: 0;
-    line-height: 1px;
-    outline: $default-border;
-    position: absolute;
-    top: 0;
-    transition: width $default-transition-duration ease-in-out;
-    white-space: pre;
-    width: calc(var(--progress) * 1%);
-    z-index: 1;
-  }
-
-  &.rounded {
-    border-radius: $default-border-radius;
-
-    &::after {
-      border-radius: $default-border-radius;
-    }
-  }
-
-  &.#{bem.$modifier-attached} {
-    border: unset;
-    border-bottom: $default-border;
-  }
-}
-
-

package/dist/es/a/Quote/Quote.js

@@ -1,80 +0,0 @@
-/* @pareto-engineering/generator-front 1.0.12 */
-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 = 'quote';
-
-/**
- * This is the component description.
- */
-const Quote = ({
-  id,
-  className: userClassName,
-  style,
-  children,
-  source,
-  author,
-  color
-  // ...otherProps
-}) => /*#__PURE__*/React.createElement("figure", {
-  id: id,
-  className: [baseClassName, componentClassName, userClassName, `x-${color}`].filter(e => e).join(' '),
-  style: style
-  // {...otherProps}
-}, /*#__PURE__*/React.createElement("blockquote", {
-  cite: source,
-  className: "blockquote"
-}, /*#__PURE__*/React.createElement("p", {
-  className: "quotation h2"
-}, /*#__PURE__*/React.createElement("span", {
-  className: "c-x"
-}, "\u201C"), /*#__PURE__*/React.createElement("span", {
-  className: "c-x"
-}, children), /*#__PURE__*/React.createElement("span", {
-  className: "c-x"
-}, "\u201D"))), /*#__PURE__*/React.createElement("figcaption", {
-  className: "figcaption"
-}, /*#__PURE__*/React.createElement("span", {
-  className: "x-metadata c-x"
-}, "-"), /*#__PURE__*/React.createElement("cite", {
-  className: "x-metadata c-x"
-}, author)));
-Quote.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.isRequired,
-  /**
-   * A URL for the source of the quotation
-   */
-  source: PropTypes.string,
-  /**
-   * text representation of the source
-   */
-  author: PropTypes.string,
-  /**
-   * The color of the quotation text
-   */
-  color: PropTypes.string
-};
-Quote.defaultProps = {
-  color: 'highlighted'
-};
-export default Quote;

package/dist/es/a/Quote/index.js

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

package/dist/es/a/Quote/styles.scss

@@ -1,35 +0,0 @@
-/* @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-gap: 3rem;
-
-.#{bem.$base}.quote {
-  border-left: 3px solid var(--x);
-  display: flex;
-  flex-direction: column;
-
-  > .blockquote {
-    margin: 0;
-
-    > .h2 {
-      margin-left: 0;
-      margin-top: 0;
-    }
-
-    > .quotation {
-      margin-left: $default-gap;
-    }
-  }
-
-  > .figcaption {
-    margin-left: $default-gap;
-    padding: 0;
-
-    > cite {
-      font-style: normal;
-    }
-  }
-}

package/dist/es/a/Removable/Removable.js

@@ -1,59 +0,0 @@
-/* @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
-}) => /*#__PURE__*/React.createElement("div", {
-  id: id,
-  className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
-  style: style
-  // {...otherProps}
-}, children, /*#__PURE__*/React.createElement("button", {
-  type: "button",
-  className: "close-button",
-  onClick: handleClose || (() => null)
-}, /*#__PURE__*/React.createElement("span", {
-  className: "icon"
-}, "Y")));
-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/dist/es/a/Removable/index.js

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

package/dist/es/a/Removable/styles.scss

@@ -1,33 +0,0 @@
-/* @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/dist/es/a/SVG/SVG.js

@@ -1,125 +0,0 @@
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-/* @pareto-engineering/generator-front 1.0.3 */
-import * as React 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;
-const componentClassName = 'svg';
-const SVG = ({
-  id,
-  className: userClassName,
-  style,
-  width,
-  height,
-  viewBox,
-  preserveAspectRatio,
-  useClassName,
-  sprite,
-  target,
-  targets,
-  source,
-  strokeWidth,
-  animated,
-  ...otherProps
-}) => {
-  const useSVGProps = useMemo(() => ({
-    className: useClassName,
-    source,
-    target,
-    sprite,
-    strokeWidth
-  }), [useClassName, source, target, strokeWidth, sprite]);
-  return /*#__PURE__*/React.createElement("svg", _extends({
-    className: [baseClassName, componentClassName, userClassName, animated && styleNames.modifierAnimated].filter(e => e).join(' '),
-    id: id,
-    style: style,
-    xmlns: "http://www.w3.org/2000/svg",
-    version: "1.1",
-    preserveAspectRatio: preserveAspectRatio,
-    width: width || (!height ? '512' : undefined),
-    height: height || (!width ? '512' : undefined),
-    viewBox: viewBox
-  }, otherProps), targets ? targets.map(targetProps => /*#__PURE__*/React.createElement(UseSVG, _extends({}, useSVGProps, targetProps, {
-    key: targetProps.target
-  }))) : /*#__PURE__*/React.createElement(UseSVG, useSVGProps));
-};
-SVG.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.oneOfType([PropTypes.string, PropTypes.number])),
-  /**
-   * The height of the element
-   */
-  height: PropTypes.string,
-  /**
-   * The width of the element
-   */
-  width: PropTypes.string,
-  /**
-   * The viewBox property of the svg html container
-   */
-  viewBox: PropTypes.string,
-  /**
-   * The class to apply to the target's use tag
-   */
-  useClassName: PropTypes.string,
-  /**
-   *  The preserverveAspectRatio property of the svg html container
-   */
-  preserveAspectRatio: PropTypes.string,
-  /**
-   * The url to the sprite
-   */
-  sprite: PropTypes.string,
-  /**
-   * The id of the target in the sprite
-   */
-  target: PropTypes.string,
-  /**
-   * In case this is not a sprite but a standalone svg.
-   * Not recommended here, better use Figure.
-   * The only reason you would wanna use this instead of target
-   * is in the case you need to dynamically pass css classes
-   * to the inner svg components
-   * TODO remove and also from UseSVG
-   */
-  source: PropTypes.string,
-  /**
-   * An array of targets
-   */
-  targets: PropTypes.arrayOf(PropTypes.shape({
-    target: PropTypes.string,
-    className: PropTypes.number,
-    stroke: PropTypes.boolean,
-    strokeWidth: PropTypes.number
-  })),
-  /**
-   * The SVG property stroke-width to apply in case of a single target
-   */
-  strokeWidth: PropTypes.number,
-  /**
-   * Whether to apply an animation class (C.anim)
-   */
-  animated: PropTypes.bool
-};
-SVG.defaultProps = {
-  preserveAspectRatio: 'xMinYMin meet',
-  viewBox: '0 0 512 512',
-  sprite: '/sprite.svg'
-};
-export default SVG;