@pareto-engineering/design-system 0.0.1-alpha.9 → 0.0.4-testing-id.0

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

@@ -0,0 +1,108 @@
+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 { useApp } from "../../a";
+
+// 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'
+  }
+};
+
+/**
+ * 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 = _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 || 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

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

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

@@ -0,0 +1,49 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+
+@use "@pareto-engineering/bem";
+@use "@aztlan/stylebook/src/mixins";
+@use "@aztlan/stylebook/src/globals" as *;
+
+$default-dimensions: 2em;
+$mobile-dimensions: 2.75em;
+
+.#{bem.$base}.social-media-button {
+  appearance: none;
+  background: var(--y, var(--heading));
+  border: 0;
+  border-radius: 3em;
+  color: var(--on-y, var(--on-heading));
+  cursor: pointer;
+  font-family: "icons", sans-serif;
+  height: $default-dimensions;
+  transition: all .3s;
+  width: $default-dimensions;
+
+  @include mixins.media($to:$sm-md) {
+    height: $mobile-dimensions;
+    width: $mobile-dimensions;
+  }
+
+  &:hover {
+    background: var(--x);
+  }
+
+  &:focus {
+    background: var(--light-x);
+  }
+
+  &.#{bem.$modifier-transparent} {
+    background: transparent;
+    color: var(--y, var(--heading));
+
+    &:hover {
+      color: var(--x);
+    }
+  
+    &:focus {
+      color: var(--light-x);
+    }
+  }
+}
+
+

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

@@ -0,0 +1,83 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react';
+import { useLayoutEffect, useCallback } from 'react';
+import PropTypes from 'prop-types';
+import styleNames from '@pareto-engineering/bem';
+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
+
+    themes,
+    iconMap
+  } = _ref;
+  const {
+    userTheme,
+    setPreferredTheme
+  } = useApp();
+  useLayoutEffect(() => {
+    import("./styles.scss");
+  }, []);
+  const loopThemes = useCallback(() => {
+    const current = themes.indexOf(userTheme);
+    setPreferredTheme(themes[(current + 1) % themes.length]);
+  }, [userTheme]);
+  return /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
+    id: id,
+    style: style,
+    onClick: loopThemes
+  }, /*#__PURE__*/React.createElement("span", {
+    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
+   */
+  // children: PropTypes.node,
+
+  /**
+   * 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.
+   */
+  iconMap: PropTypes.objectOf(PropTypes.string)
+};
+ThemeSelector.defaultProps = {
+  themes: ['light', 'dark'],
+  iconMap: {
+    dark: 'n',
+    // sun,
+    light: 'm' // moon,
+  }
+};
+
+export default ThemeSelector;

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

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

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

@@ -0,0 +1,14 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+
+@use "@pareto-engineering/bem";
+
+$default-color:var(--x, var(--contrast));
+
+.#{bem.$base}.theme-selector {
+  background: transparent;
+  border: none;
+  color: $default-color;
+  cursor: pointer;
+}
+
+

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

@@ -1,118 +1,107 @@
-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 0.3.1 */
 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';
 
-import("./styles.scss"); // Helper Definition
+// Component-level imports
+import("./styles.scss");
 
+// 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));
-
+const Title = _ref => {
+  let {
+    id,
+    className: userClassName,
+    style,
+    // children,
+    heading,
+    headingAs: HeadingWrapper,
+    headingClassName,
+    headingStyle,
+    headingProps,
+    subtitle,
+    subtitleAs: SubtitleWrapper,
+    subtitleClassName,
+    subtitleStyle,
+    subtitleProps
+    // ...otherProps
+  } = _ref;
+  return /*#__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'

package/dist/es/b/index.js

@@ -3,4 +3,8 @@ export { Segment } from "./Segment";
 export { Card } from "./Card";
 export { Title } from "./Title";
 export { Page } from "./Page";
-export { QuestionDropdown } from "./QuestionDropdown";
+export { QuestionDropdown } from "./QuestionDropdown";
+export { ThemeSelector } from "./ThemeSelector";
+export { Logo } from "./Logo";
+export { SocialMediaButton } from "./SocialMediaButton";
+export { Metrics } from "./Metrics";

package/dist/es/c/ContentSlides/ContentSlides.js

@@ -0,0 +1,165 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react';
+import { useLayoutEffect, useReducer } from 'react';
+import PropTypes from 'prop-types';
+import { useHistory } from 'react-router-dom';
+import styleNames from '@pareto-engineering/bem';
+import ContentSlidesContext from "./Context";
+import { Slide, HorizontalMenu, Sidebar, Navigator } from "./common";
+
+// Local Definitions
+
+const baseClassName = styleNames.base;
+const componentClassName = 'content-slides';
+const reducer = (state, action) => {
+  switch (action.type) {
+    case 'SET_STEP_INDEX':
+      return {
+        ...state,
+        currentStepIndex: action.payload
+      };
+    case 'SET_CURRENT_STEP':
+      return {
+        ...state,
+        ...action.payload
+      };
+    case 'SET_EXTRA_CONTEXT':
+      return {
+        ...state,
+        ...action.payload
+      };
+    default:
+      return state;
+  }
+};
+
+/**
+ * This is the component description.
+ * Colors :
+ * `y` : the background of the content
+ */
+const ContentSlides = _ref => {
+  let {
+    id,
+    className: userClassName,
+    style,
+    children,
+    steps,
+    simple,
+    isDebug
+    // ...otherProps
+  } = _ref;
+  useLayoutEffect(() => {
+    import("./styles.scss");
+  }, []);
+  const history = useHistory();
+  const [state, dispatch] = useReducer(reducer, {
+    currentStepIndex: 0
+  });
+  const {
+    // currentSlide,
+    currentStepIndex,
+    isFirstStep,
+    isLastStep
+  } = state;
+  const setNextStepIndex = function () {
+    let step = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
+    if (!isLastStep) {
+      dispatch({
+        type: 'SET_STEP_INDEX',
+        payload: currentStepIndex + step
+      });
+    }
+  };
+  const setPrevStepIndex = function () {
+    let step = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
+    if (!isFirstStep) {
+      dispatch({
+        type: 'SET_STEP_INDEX',
+        payload: currentStepIndex - step
+      });
+    }
+  };
+  const setStepIndex = index => {
+    dispatch({
+      type: 'SET_STEP_INDEX',
+      payload: index
+    });
+  };
+  const setCurrentStep = index => {
+    const newStep = steps[index];
+    if (newStep.location) {
+      history.push(newStep.location);
+    }
+    dispatch({
+      type: 'SET_CURRENT_STEP',
+      payload: {
+        currentStep: steps[index],
+        isFirstStep: index === 0,
+        isLastStep: index === steps.length - 1
+      }
+    });
+  };
+  useLayoutEffect(() => {
+    setCurrentStep(currentStepIndex);
+  }, [currentStepIndex]);
+  return /*#__PURE__*/React.createElement(ContentSlidesContext.Provider, {
+    value: {
+      steps,
+      setNextStepIndex,
+      setPrevStepIndex,
+      setStepIndex,
+      dispatch,
+      isDebug,
+      ...state
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    id: id,
+    className: [baseClassName, componentClassName, userClassName, simple && 'simple', 'u1 md-u2'].filter(e => e).join(' '),
+    style: style
+  }, children));
+};
+ContentSlides.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 slides properties
+  */
+  steps: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.string.isRequired,
+    title: PropTypes.string.isRequired,
+    progress: PropTypes.number.isRequired,
+    location: PropTypes.string.isRequired
+  })),
+  /**
+   * Whether this shouldn't use a sidebar on desktop
+   */
+  simple: PropTypes.bool,
+  /**
+   * Whether the debug mode is enabled
+   */
+  isDebug: PropTypes.bool
+};
+ContentSlides.defaultProps = {
+  simple: false,
+  isDebug: false
+};
+ContentSlides.Sidebar = Sidebar;
+ContentSlides.HorizontalMenu = HorizontalMenu;
+ContentSlides.Slide = Slide;
+ContentSlides.Navigator = Navigator;
+export default ContentSlides;

package/dist/es/c/ContentSlides/Context.js

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export default /*#__PURE__*/React.createContext({});