@pareto-engineering/design-system 5.3.0 → 5.4.0

package/dist/es/b/Page/common/index.js

@@ -1,2 +0,0 @@
-export { PageHelmet } from "./PageHelmet";
-export { Section } from "./Section";

package/dist/es/b/Page/index.js

@@ -1,4 +0,0 @@
-/* @pareto-engineering/generator-front 1.0.0 */
-export { default as Page } from "./Page";
-export { default as usePage } from "./usePage";
-export { default as PageContext } from "./Context";

package/dist/es/b/Page/styles.scss

@@ -1,38 +0,0 @@
-/* @pareto-engineering/generator-front 1.0.0 */
-/* stylelint-disable selector-max-universal -- exception */
-
-@use "@pareto-engineering/bem";
-@use "@pareto-engineering/styles/src/mixins";
-@use "@pareto-engineering/styles/src/globals" as *;
-
-.#{bem.$base}.page {
-  position: relative;
-
-  > .background {
-    position: fixed;
-    z-index: -1;
-  }
-
-  > .#{bem.$base}.section {
-    position: relative;
-
-    &.padded {
-      padding-left: var(--gap);
-      padding-right: var(--gap);
-    }
-
-    > *:not(:last-child) {
-      z-index: 1;
-    }
-
-    &.#{bem.$modifier-spaced} {
-      padding-bottom: var(--theme-default-section-spacing);
-      padding-top: var(--theme-default-section-spacing);
-
-      @include mixins.media($from: $sm-md) {
-        padding-bottom: var(--theme-desktop-section-spacing);
-        padding-top: var(--theme-desktop-section-spacing);
-      }
-    }
-  }
-}

package/dist/es/b/Page/usePage.js

@@ -1,3 +0,0 @@
-import { useContext } from 'react';
-import Context from "./Context";
-export default () => useContext(Context);

package/dist/es/b/SocialMediaButton/SocialMediaButton.js

@@ -1,108 +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.12 */
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import styleNames from '@pareto-engineering/bem/exports';
-import { useApp } from "../../a";
-import "./styles.scss";
-
-// Local Definitions
-
-const baseClassName = styleNames.base;
-const componentClassName = 'social-media-button';
-const defaultsMap = {
-  facebook: {
-    icon: 'f',
-    link: 'FACEBOOK'
-  },
-  instagram: {
-    icon: 'i',
-    link: 'INSTAGRAM'
-  },
-  twitter: {
-    icon: 't',
-    link: 'TWITTER'
-  },
-  linkedin: {
-    icon: 'l',
-    link: 'LINKEDIN'
-  },
-  threads: {
-    icon: 'u',
-    link: 'THREADS'
-  }
-};
-
-/**
- * This is the component description.
- * This component takes `y` as the default color and `x` as the hover color.
- * This components needs to be wrapped within a `AppContextProvider`.
- */
-const SocialMediaButton = ({
-  id,
-  className: userClassName,
-  style,
-  type,
-  icon,
-  link,
-  color,
-  isTransparent,
-  ...otherProps
-}) => {
-  const applicationContext = useApp();
-  const content = type && defaultsMap[type];
-  const href = link || applicationContext?.SOCIAL?.[content?.link];
-  return /*#__PURE__*/React.createElement("a", {
-    href: href,
-    target: "_blank",
-    rel: "noreferrer"
-  }, /*#__PURE__*/React.createElement("button", _extends({
-    id: id,
-    className: [baseClassName, `x-${color || type}`, isTransparent && styleNames.modifierTransparent, componentClassName, userClassName].filter(e => e).join(' '),
-    style: style,
-    type: "button"
-  }, otherProps), icon || content.icon));
-};
-SocialMediaButton.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 Social Media to Target.
-   * If blank, you need to provide both an icon letter (from glyphter) and a link.
-   */
-  type: PropTypes.oneOf(['twitter', 'facebook', 'instagram', 'linkedin']),
-  /**
-   * The icon of the social media
-   */
-  icon: PropTypes.string,
-  /**
-   * The link to the social media
-   */
-  link: PropTypes.string,
-  /**
-   * The button color
-   */
-  color: PropTypes.string,
-  /**
-   * Whether the button is transparent
-   */
-  isTransparent: PropTypes.bool
-};
-SocialMediaButton.defaultProps = {
-  // someProp:false
-};
-export default SocialMediaButton;

package/dist/es/b/SocialMediaButton/index.js

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

package/dist/es/b/SocialMediaButton/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-dimensions: 2em;
-$mobile-dimensions: 2.75em;
-
-.#{bem.$base}.social-media-button {
-  appearance: none;
-  border: 0;
-  cursor: pointer;
-  font-family: "icons", sans-serif;
-  transition: all .3s;
-
-  &:focus {
-    background: var(--soft-x);
-  }
-
-  &.#{bem.$modifier-clear} {
-    background: transparent;
-    color: var(--y, var(--heading));
-
-    &:hover {
-      color: var(--x);
-    }
-
-    &:focus {
-      color: var(--soft-x);
-    }
-  }
-}
-
-

package/dist/es/b/ThemeSelector/ThemeSelector.js

@@ -1,64 +0,0 @@
-/* @pareto-engineering/generator-front 1.0.12 */
-import * as React from 'react';
-import { useCallback } from 'react';
-import PropTypes from 'prop-types';
-import styleNames from '@pareto-engineering/bem/exports';
-import { useApp, ToggleSwitch } from "../../a";
-import "./styles.scss";
-
-// Local Definitions
-
-const baseClassName = styleNames.base;
-const componentClassName = 'theme-selector';
-
-/**
- * This is the component description.
- */
-const ThemeSelector = ({
-  id,
-  className: userClassName,
-  style,
-  themes
-}) => {
-  const {
-    userTheme,
-    setPreferredTheme
-  } = useApp();
-  const loopThemes = useCallback(() => {
-    const current = themes.indexOf(userTheme);
-    setPreferredTheme(themes[(current + 1) % themes.length]);
-  }, [userTheme]);
-  return /*#__PURE__*/React.createElement("div", {
-    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
-    id: id,
-    style: style
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "c-x x-paragraph"
-  }, userTheme && userTheme[0].toUpperCase() + userTheme.slice(1), ' ', "Theme"), /*#__PURE__*/React.createElement(ToggleSwitch, {
-    checked: userTheme === 'dark',
-    handleOnChange: loopThemes,
-    inputId: "theme-toggle"
-  }));
-};
-ThemeSelector.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 themes and the order in which they appear
-   */
-  themes: PropTypes.arrayOf(PropTypes.string)
-};
-ThemeSelector.defaultProps = {
-  themes: ['light', 'dark']
-};
-export default ThemeSelector;

package/dist/es/b/ThemeSelector/index.js

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

package/dist/es/b/ThemeSelector/styles.scss

@@ -1,52 +0,0 @@
-/* @pareto-engineering/generator-front 1.0.12 */
-
-@use "@pareto-engineering/bem";
-
-$default-border-radius: var(--theme-default-border-radius);
-$default-size: 1.2em;
-
-.#{bem.$base}.theme-selector {
-  align-items: center;
-  display: flex;
-  gap: var(--gap);
-
-  > button {
-    background: transparent;
-    border: none;
-    cursor: pointer;
-    display: flex;
-
-    >input {
-      height: 0;
-      visibility: hidden;
-      width: 0;
-    }
-
-    >label {
-      background: var(--interactive);
-      border-radius: $default-border-radius;
-      cursor: pointer;
-      display: block;
-      height: $default-size;
-      position: relative;
-      width: calc($default-size * 2);
-
-      &::after {
-        background: var(--background-far);
-        border: 1px solid var(--ui-lines);
-        border-radius: $default-border-radius;
-        content: "";
-        height: $default-size;
-        left: 0;
-        position: absolute;
-        top: 0;
-        transition: .3s;
-        width: $default-size;
-      }
-    }
-
-    >input:checked + label::after {
-      left: $default-size;
-    }
-  }
-}

package/dist/es/b/Title/Title.js

@@ -1,102 +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 0.3.1 */
-import * as React from 'react';
-import PropTypes from 'prop-types';
-
-// Package-level Imports
-import styleNames from '@pareto-engineering/bem/exports';
-
-// Helper Definition
-const baseClassName = styleNames.base;
-const componentClassName = 'title';
-const Title = ({
-  id,
-  className: userClassName,
-  style,
-  // children,
-  heading,
-  headingAs: HeadingWrapper,
-  headingClassName,
-  headingStyle,
-  headingProps,
-  subtitle,
-  subtitleAs: SubtitleWrapper,
-  subtitleClassName,
-  subtitleStyle,
-  subtitleProps
-  // ...otherProps
-}) => /*#__PURE__*/React.createElement("div", {
-  id: id,
-  className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
-  style: style
-}, /*#__PURE__*/React.createElement(HeadingWrapper, _extends({
-  className: [headingClassName, styleNames.heading].filter(e => e).join(' '),
-  style: headingStyle
-}, headingProps), heading), subtitle && /*#__PURE__*/React.createElement(SubtitleWrapper, _extends({
-  className: [subtitleClassName, styleNames.subtitle].filter(e => e).join(' '),
-  style: subtitleStyle
-}, subtitleProps), subtitle));
-Title.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 heading
-   */
-  heading: PropTypes.node.isRequired,
-  /**
-  * The node to display the heading with
-  */
-  headingAs: PropTypes.node,
-  /**
-  * The heading html class
-  */
-  headingClassName: PropTypes.string,
-  /**
-  * The JSX-Written, css styles to apply to the element.
-  */
-  headingStyle: PropTypes.objectOf(PropTypes.string),
-  /**
-   * Extra props to pass to the heading
-   */
-  /* eslint-disable react/forbid-prop-types -- Does not apply to a full prop object */
-  headingProps: PropTypes.object,
-  /* eslint-enable react/forbid-prop-types */
-
-  /**
-   *  The subtitle
-   */
-  subtitle: PropTypes.node,
-  /**
-   * The node to display the heading with
-   */
-  subtitleAs: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
-  /**
-   * The subtitle html class
-   */
-  subtitleClassName: PropTypes.string,
-  /**
-   * The JSX-Written, css styles to apply to the element.
-   */
-  subtitleStyle: PropTypes.objectOf(PropTypes.string),
-  /**
-   * Extra props to pass to the subtitle
-   */
-  /* eslint-disable react/forbid-prop-types -- Does not apply to a full prop object */
-  subtitleProps: PropTypes.object
-  /* eslint-enable react/forbid-prop-types */
-};
-Title.defaultProps = {
-  headingAs: 'h1',
-  subtitleAs: 'p'
-};
-export default Title;

package/dist/es/b/Title/index.js

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

package/dist/es/b/index.js

@@ -1,7 +0,0 @@
-export { Button } from "./Button";
-export { Logo } from "./Logo";
-export { Page } from "./Page";
-export { SocialMediaButton } from "./SocialMediaButton";
-export { ThemeSelector } from "./ThemeSelector";
-export { Title } from "./Title";
-export { Card } from "./Card";

package/dist/es/c/Modal/Modal.js

@@ -1,70 +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 { ModalHeader } from "./common";
-import "./styles.scss";
-
-// Local Definitions
-
-const baseClassName = styleNames.base;
-const componentClassName = 'modal';
-
-/**
- * This is the component description.
- */
-const Modal = ({
-  id,
-  className: userClassName,
-  style,
-  children,
-  title,
-  color,
-  close
-  // ...otherProps
-}) => /*#__PURE__*/React.createElement("div", {
-  id: id,
-  className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
-  style: style
-  // {...otherProps}
-}, /*#__PURE__*/React.createElement(ModalHeader, {
-  title: title,
-  close: close,
-  color: color
-}), /*#__PURE__*/React.createElement("div", {
-  className: "modal-body"
-}, children));
-Modal.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 title to pass to the header
-   */
-  title: PropTypes.string.isRequired,
-  /**
-   *  The color for the header button
-   */
-  color: PropTypes.string,
-  /**
-   *  The function to run upon closing the modal, if any
-   */
-  close: PropTypes.func
-};
-Modal.defaultProps = {
-  color: 'heading'
-};
-export default Modal;

package/dist/es/c/Modal/common/ModalHeader/ModalHeader.js

@@ -1,64 +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 { Button } from "../../../..";
-
-// Local Definitions
-
-const baseClassName = styleNames.base;
-const componentClassName = 'modal-header';
-
-/**
- * This is the component description.
- */
-const ModalHeader = ({
-  id,
-  className: userClassName,
-  style,
-  title,
-  close,
-  color
-  // ...otherProps
-}) => /*#__PURE__*/React.createElement("div", {
-  id: id,
-  className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
-  style: style
-}, /*#__PURE__*/React.createElement("p", null, title), /*#__PURE__*/React.createElement(Button, {
-  color: color,
-  onClick: () => close(),
-  isCompact: true,
-  className: "close-button"
-}, /*#__PURE__*/React.createElement("span", {
-  className: "icon"
-}, "Y")));
-ModalHeader.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
-     */
-  title: PropTypes.string,
-  /**
-   *  The close modal function
-   */
-  close: PropTypes.func,
-  /**
-   *  The color for the button to open and close the modal
-   */
-  color: PropTypes.string.isRequired
-};
-ModalHeader.defaultProps = {
-  // someProp:false
-};
-export default ModalHeader;

package/dist/es/c/Modal/common/ModalHeader/index.js

@@ -1 +0,0 @@
-export { default as ModalHeader } from "./ModalHeader";

package/dist/es/c/Modal/common/index.js

@@ -1 +0,0 @@
-export { ModalHeader } from "./ModalHeader";

package/dist/es/c/Modal/index.js

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

package/dist/es/c/Modal/styles.scss

@@ -1,44 +0,0 @@
-/* @pareto-engineering/generator-front 1.0.12 */
-
-@use "@pareto-engineering/bem";
-@use "sass:math";
-
-$default-background: var(--background-cards);
-$default-border: var(--theme-default-border-style) var(--metadata);
-/* stylelint-disable-next-line color-named -- needed for rgba function */
-$default-box-shadow: 0 10px 20px rgba(black, .2);
-$default-padding: math.div(1em, 2);
-$default-margin: 2em;
-
-.#{bem.$base}.modal {
-  background: $default-background;
-  box-shadow: $default-box-shadow;
-  display: flex;
-  flex-direction: column;
-  left: 50%;
-  overflow: auto;
-  position: absolute;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  z-index: 100;
-
-  .modal-header {
-    background: $default-background;
-    border-bottom: $default-border;
-    display: flex;
-    font-size: calc(var(--theme-heading-font-size-multiplier, 1) * var(--s1) * 1em);
-    justify-content: space-between;
-    position: sticky;
-    top: 0;
-    z-index: 2;
-
-    > p {
-      margin: 0;
-      padding: $default-padding;
-    }
-
-    .close-button {
-      display: block;
-    }
-  }
-}