@pareto-engineering/design-system 2.0.0-alpha.8 → 3.0.0-alpha.18

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

@@ -1,27 +1,21 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 /* @pareto-engineering/generator-front 1.0.0 */
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import styleNames from '@pareto-engineering/bem'; // Local Definitions
+import styleNames from '@pareto-engineering/bem/exports';
 
-import { Shapes } from "../../../../a";
+// Local Definitions
 import usePage from "../../usePage";
 const baseClassName = styleNames.base;
 const componentClassName = 'section';
-
-const Section = ({
-  id: userId,
-  className: userClassName,
-  style,
-  children,
-  backgroundShape,
-  backgroundVerticalAlign,
-  backgroundHorizontalAlign,
-  backgroundHeight,
-  backgroundOverflow,
-  ...otherProps
-}) => {
+const Section = _ref => {
+  let {
+    id: userId,
+    className: userClassName,
+    style,
+    children,
+    ...otherProps
+  } = _ref;
   const {
     id: pageId
   } = usePage();
@@ -30,61 +24,27 @@ const Section = ({
     id: sectionId,
     className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
     style: style
-  }, otherProps), children, backgroundShape && /*#__PURE__*/React.createElement(Shapes, {
-    verticalAlign: backgroundVerticalAlign,
-    horizontalAlign: backgroundHorizontalAlign,
-    backgroundOverflow: backgroundOverflow,
-    height: backgroundHeight,
-    shape: backgroundShape
-  }));
+  }, otherProps), children);
 };
-
 Section.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 background shape to use for this section.
-   */
-  backgroundShape: PropTypes.oneOf(['triangle', 'ellipse', 'half-ellipse', 'half-ellipses', 'spiral', 'diamonds', 'circle', 'half-circle', 'ellipses', 'rectangles']),
-
-  /**
-   * The background vertical alingment to use for if the background shape is set.
-   */
-  backgroundVerticalAlign: PropTypes.oneOf(['flex-start', 'center', 'flex-end']),
-
-  /**
-   * The background horizontal alingment to use for if the background shape is set.
-   */
-  backgroundHorizontalAlign: PropTypes.oneOf(['flex-start', 'center', 'flex-end']),
-
-  /**
-   * The background height to use for if the background shape is set.
-   */
-  backgroundHeight: PropTypes.string,
-
-  /**
-   * The background overflow to use for if the background shape is set.
-   */
-  backgroundOverflow: PropTypes.oneOf(['visible', 'hidden', 'scroll'])
+  children: PropTypes.node
 };
-Section.defaultProps = {// someProp:false
+Section.defaultProps = {
+  // someProp:false
 };
 export default Section;

package/dist/es/b/QuestionDropdown/QuestionDropdown.js

@@ -1,37 +1,39 @@
 /* @pareto-engineering/generator-front 0.2.7 */
 import * as React from 'react';
 import { useState, useLayoutEffect } from 'react';
-import PropTypes from 'prop-types'; // Package-level Imports
+import PropTypes from 'prop-types';
 
-import styleNames from '@pareto-engineering/bem'; // Component-level imports
+// Package-level Imports
+import styleNames from '@pareto-engineering/bem/exports';
+
+// Component-level imports
 // import('./styles.scss')
-// Helper Definition
 
+// Helper Definition
 const baseClassName = styleNames.base;
 const componentClassName = 'question-dropdown';
+
 /**
  * The question dropdown is used for the FAQ section. <br />
  * If `isFAQSchema=true`, make sure to remember to add the appropriate itemscope and
  * itemtype attributes to the root of the page that includes the FAQ component
  */
-
-const QuestionDropdown = ({
-  id,
-  className: userClassName,
-  style,
-  question,
-  children,
-  isFAQSchema,
-  defaultIsOpen // ...otherProps
-
-}) => {
+const QuestionDropdown = _ref => {
+  let {
+    id,
+    className: userClassName,
+    style,
+    question,
+    children,
+    isFAQSchema,
+    defaultIsOpen
+    // ...otherProps
+  } = _ref;
   useLayoutEffect(() => {
     import("./styles.scss");
   }, []);
   const [isOpen, setIsOpen] = useState(defaultIsOpen);
-
   const toggleOpen = () => setIsOpen(!isOpen);
-
   return /*#__PURE__*/React.createElement("div", {
     id: id,
     className: [baseClassName, componentClassName, userClassName, isOpen && 'open'].filter(e => e).join(' '),
@@ -39,8 +41,8 @@ const QuestionDropdown = ({
     itemScope: isFAQSchema // if isFAQSchema is false, should be undefined
     ,
     itemProp: isFAQSchema && 'mainEntity',
-    itemType: isFAQSchema && 'http://schema.org/Question' // {...otherProps}
-
+    itemType: isFAQSchema && 'http://schema.org/Question'
+    // {...otherProps}
   }, /*#__PURE__*/React.createElement("div", {
     tabIndex: 0,
     role: "button",
@@ -61,38 +63,31 @@ const QuestionDropdown = ({
     itemProp: isFAQSchema && 'text'
   }, children)));
 };
-
 QuestionDropdown.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),
-
   /**
    *  Any children of the question, such as answer blocks
    */
   children: PropTypes.node.isRequired,
-
   /**
    *  Question to be answered
    */
   question: PropTypes.string.isRequired,
-
   /**
    *  Whether element is part of SEO schema
    */
   isFAQSchema: PropTypes.bool,
-
   /**
    * Whether the question drop down should be opened by default
    */

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

@@ -4,10 +4,10 @@
 
 //make all colors as vars
 
-$border-color: var(--dark-background1);
+$border-color: var(--hard-background1);
 $border-width: 2px;
 $button-background-color: transparent;
-$button-background-color-hover: var(--light-accent3);
+$button-background-color-hover: var(--soft-accent3);
 $caret-font-size: 1.2em;
 $question-color: var(--heading);
 $question-font-weight: 700;

package/dist/es/b/Segment/Segment.js

@@ -1,61 +1,62 @@
 /* @pareto-engineering/generator-front 0.2.4 */
 import * as React from 'react';
-import PropTypes from 'prop-types'; // Package-level Imports
+import PropTypes from 'prop-types';
 
-import styleNames from '@pareto-engineering/bem'; // Component-level imports
+// Package-level Imports
+import styleNames from '@pareto-engineering/bem/exports';
 
-import("./styles.scss"); // Helper Definition
+// Component-level imports
+import("./styles.scss");
 
+// Helper Definition
 const baseClassName = styleNames.base;
 const componentClassName = 'segment';
-
-const Segment = ({
-  id,
-  className: userClassName,
-  style,
-  children,
-  title,
-  footer // ...otherProps
-
-}) => /*#__PURE__*/React.createElement("div", {
-  id: id,
-  className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
-  style: style
-}, /*#__PURE__*/React.createElement("header", null, /*#__PURE__*/React.createElement("p", {
-  className: "s1 title"
-}, title)), /*#__PURE__*/React.createElement("main", null, children), footer && /*#__PURE__*/React.createElement("footer", null, footer));
-
+const Segment = _ref => {
+  let {
+    id,
+    className: userClassName,
+    style,
+    children,
+    title,
+    footer
+
+    // ...otherProps
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", {
+    id: id,
+    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
+    style: style
+  }, /*#__PURE__*/React.createElement("header", null, /*#__PURE__*/React.createElement("p", {
+    className: "s1 title"
+  }, title)), /*#__PURE__*/React.createElement("main", null, children), footer && /*#__PURE__*/React.createElement("footer", null, footer));
+};
 Segment.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 of the segment
    */
   title: PropTypes.string.isRequired,
-
   /**
    * The optional footer of the segment.
    */
   footer: PropTypes.node
 };
-Segment.defaultProps = {// someProp:false
+Segment.defaultProps = {
+  // someProp:false
 };
 export default Segment;

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

@@ -1,11 +1,12 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react';
 import { useLayoutEffect } from 'react';
 import PropTypes from 'prop-types';
-import styleNames from '@pareto-engineering/bem';
-import { useSite } from "../../a"; // Local Definitions
+import styleNames from '@pareto-engineering/bem/exports';
+import { useApp } from "../../a";
+
+// Local Definitions
 
 const baseClassName = styleNames.base;
 const componentClassName = 'social-media-button';
@@ -27,31 +28,30 @@ const defaultsMap = {
     link: 'LINKEDIN'
   }
 };
+
 /**
  * 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 `SiteContextProvider`.
+ * This components needs to be wrapped within a `AppContextProvider`.
  */
-
-const SocialMediaButton = ({
-  id,
-  className: userClassName,
-  style,
-  type,
-  icon,
-  link,
-  color,
-  isTransparent,
-  ...otherProps
-}) => {
-  var _siteContext$SOCIAL;
-
-  const siteContext = useSite();
+const SocialMediaButton = _ref => {
+  let {
+    id,
+    className: userClassName,
+    style,
+    type,
+    icon,
+    link,
+    color,
+    isTransparent,
+    ...otherProps
+  } = _ref;
+  const applicationContext = useApp();
   useLayoutEffect(() => {
     import("./styles.scss");
   }, []);
   const content = type && defaultsMap[type];
-  const href = link || (siteContext === null || siteContext === void 0 ? void 0 : (_siteContext$SOCIAL = siteContext.SOCIAL) === null || _siteContext$SOCIAL === void 0 ? void 0 : _siteContext$SOCIAL[content.link]);
+  const href = link || applicationContext?.SOCIAL?.[content.link];
   return /*#__PURE__*/React.createElement("a", {
     href: href,
     target: "_blank",
@@ -63,54 +63,46 @@ const SocialMediaButton = ({
     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
+SocialMediaButton.defaultProps = {
+  // someProp:false
 };
 export default SocialMediaButton;

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

@@ -1,8 +1,8 @@
 /* @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 *;
 
 $default-dimensions: 2em;
 $mobile-dimensions: 2.75em;
@@ -29,7 +29,7 @@ $mobile-dimensions: 2.75em;
   }
 
   &:focus {
-    background: var(--light-x);
+    background: var(--soft-x);
   }
 
   &.#{bem.$modifier-transparent} {
@@ -41,7 +41,7 @@ $mobile-dimensions: 2.75em;
     }
   
     &:focus {
-      color: var(--light-x);
+      color: var(--soft-x);
     }
   }
 }

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

@@ -2,27 +2,31 @@
 import * as React from 'react';
 import { useLayoutEffect, useCallback } from 'react';
 import PropTypes from 'prop-types';
-import styleNames from '@pareto-engineering/bem';
-import { useSite } from "../../a"; // Local Definitions
+import styleNames from '@pareto-engineering/bem/exports';
+import { useApp } from "../../a";
+
+// Local Definitions
 
 const baseClassName = styleNames.base;
 const componentClassName = 'theme-selector';
+
 /**
  * This is the component description.
  */
+const ThemeSelector = _ref => {
+  let {
+    id,
+    className: userClassName,
+    style,
+    // children
 
-const ThemeSelector = ({
-  id,
-  className: userClassName,
-  style,
-  // children
-  themes,
-  iconMap
-}) => {
+    themes,
+    iconMap
+  } = _ref;
   const {
     userTheme,
     setPreferredTheme
-  } = useSite();
+  } = useApp();
   useLayoutEffect(() => {
     import("./styles.scss");
   }, []);
@@ -40,23 +44,19 @@ const ThemeSelector = ({
     className: "v0 m-v icon"
   }, iconMap[userTheme]), /*#__PURE__*/React.createElement("span", null, userTheme));
 };
-
 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 children JSX
    */
@@ -66,7 +66,6 @@ ThemeSelector.propTypes = {
    * The themes and the order in which they appear
    */
   themes: PropTypes.arrayOf(PropTypes.string),
-
   /**
    * A map of the theme names with the icons that represent them. Uses the default font icon.
    */
@@ -78,7 +77,7 @@ ThemeSelector.defaultProps = {
     dark: 'n',
     // sun,
     light: 'm' // moon,
-
   }
 };
+
 export default ThemeSelector;