@pareto-engineering/design-system 0.0.1-alpha.60 → 0.0.1-alpha.64

package/src/ui/c/SiteMission/SiteMission.jsx

@@ -1,114 +0,0 @@
-/* @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 { TeamInfo, AnimatedCounter } from 'ui/a'
-
-// Local Definitions
-
-const baseClassName = styleNames.base
-
-const componentClassName = 'mission'
-
-/**
- * This is the component description.
- */
-const SiteMission = ({
-  id,
-  className:userClassName,
-  style,
-  color,
-  teamInfoMap,
-  teamReviewMap,
-  delay,
-  // ...otherProps
-}) => {
-  useLayoutEffect(() => {
-    import('./styles.scss')
-  }, [])
-
-  return (
-    <div
-      id={id}
-      className={[
-        baseClassName,
-        componentClassName,
-        userClassName,
-        'u2',
-        `x-${color}`,
-      ]
-        .filter((e) => e)
-        .join(' ')}
-      style={style}
-      // {...otherProps}
-    >
-
-      <div className="review-content s-1 md-s0">
-        {teamReviewMap.map((review) => (
-          <AnimatedCounter key={review.description} {...review} color={color} delay={delay} />
-        ))}
-      </div>
-      <div className="team-info-content v2 mv-v">
-        {teamInfoMap.map((info) => (
-          <TeamInfo key={info.description} {...info} />
-        ))}
-      </div>
-    </div>
-  )
-}
-
-SiteMission.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 teamReviewMap
-   */
-  teamReviewMap:PropTypes.arrayOf(PropTypes.shape({
-    number     :PropTypes.number.isRequired,
-    unit       :PropTypes.string.isRequired,
-    description:PropTypes.string.isRequired,
-  })).isRequired,
-
-  /**
-   * The color
-   */
-  color:PropTypes.string,
-
-  /**
-   *  The teamInfoMap
-   */
-  teamInfoMap:PropTypes.arrayOf(PropTypes.shape({
-    description:PropTypes.string.isRequired,
-    img        :PropTypes.string.isRequired,
-    name       :PropTypes.string.isRequired,
-    role       :PropTypes.string.isRequired,
-  })).isRequired,
-  /**
-   * Animated counter delay
-   */
-  delay:PropTypes.number,
-}
-
-SiteMission.defaultProps = {
-  color:'main1',
-}
-
-export default SiteMission

package/src/ui/c/SiteMission/index.js

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

package/src/ui/c/SiteMission/styles.scss

@@ -1,30 +0,0 @@
-/* @pareto-engineering/generator-front 1.0.12 */
-
-@use "@pareto-engineering/bem";
-@use "@aztlan/stylebook/src/mixins";
-@use "@aztlan/stylebook/src/globals" as *;
-
-$grid-gap:1em;
-
-
-.#{bem.$base}.mission {
-  height: auto;
-
-  .review-content {
-    display: grid;
-    gap: $grid-gap;
-    grid-template-columns: repeat(auto-fit, minmax(6em, 1fr));
-  }
-
-  .team-info-content {
-    display: grid;
-    gap: $grid-gap;
-    grid-template-columns: repeat(auto-fit, minmax(12em, 1fr));
-  }
-
-  @include mixins.media($to:$sm-md) {
-    padding: var(--u);
-  }
-}
-
-

package/src/ui/c/SiteNavigation/SiteNavigation.jsx

@@ -1,142 +0,0 @@
-/* @pareto-engineering/generator-front 1.0.12 */
-import * as React from 'react'
-
-import { useLayoutEffect, useEffect, useState } from 'react'
-
-import PropTypes from 'prop-types'
-
-import styleNames from '@pareto-engineering/bem'
-
-import { Link, useLocation } from 'react-router-dom'
-
-import { HamburgerButton } from 'ui/a'
-import { Logo } from 'ui/b'
-
-// Local Definitions
-
-const baseClassName = styleNames.base
-
-const componentClassName = 'site-navigation'
-
-/**
- * This is the component description.
- */
-const SiteNavigation = ({
-  id,
-  className:userClassName,
-  style,
-  menu,
-  cta,
-  logoColor,
-  // ...otherProps
-}) => {
-  useLayoutEffect(() => {
-    import('./styles.scss')
-  }, [])
-
-  const [isOpen, setIsOpen] = useState(false)
-  const toggleOpen = () => setIsOpen(!isOpen)
-  const location = useLocation()
-  const activePage = location.pathname
-
-  useEffect(() => {
-    setIsOpen(false)
-  }, [location])
-
-  return (
-    <nav
-      id={id}
-      className={[
-
-        baseClassName,
-        isOpen && 'open',
-        componentClassName,
-        userClassName,
-      ]
-        .filter((e) => e)
-        .join(' ')}
-      style={style}
-      // {...otherProps}
-    >
-      <div className="hamburger">
-        <HamburgerButton className="md-h lg-h" isOpen={isOpen} onClick={toggleOpen} />
-      </div>
-      <div className="wrapper">
-        <div className="title">
-          <Logo
-            color={logoColor}
-            height="2.5em"
-            className="xs-h sm-h"
-          />
-          { isOpen
-          && (
-          <Logo
-            color={logoColor}
-            height="3.2em"
-            className="md-h lg-h"
-          />
-          )}
-        </div>
-        <div className="menu">
-          <ul className="s3 md-s1">
-            { menu.map((item) => (
-              <li
-                key={item.name}
-                className={[activePage === item.link && styleNames.modifierActive].filter((e) => e)
-                  .join(' ')}
-              >
-                <Link to={item.link}>
-                  { item.name }
-                </Link>
-              </li>
-            )) }
-          </ul>
-        </div>
-        <div className="cta">{ cta }</div>
-      </div>
-    </nav>
-  )
-}
-
-SiteNavigation.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 cta as JSX
-   */
-  cta:PropTypes.node,
-
-  /**
-   * The map of menu elements
-   */
-  menu:PropTypes.arrayOf(
-    PropTypes.shape({
-      name:PropTypes.string.isRequired,
-      link:PropTypes.string.isRequired,
-    }),
-  ).isRequired,
-
-  /**
-   * The logo color
-   */
-  logoColor:PropTypes.string,
-}
-
-SiteNavigation.defaultProps = {
-  logoColor:'main1',
-}
-
-export default SiteNavigation

package/src/ui/c/SiteNavigation/index.js

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

package/src/ui/c/SiteNavigation/styles.scss

@@ -1,118 +0,0 @@
-/* @pareto-engineering/generator-front 1.0.12 */
-
-@use "@pareto-engineering/bem";
-@use "@aztlan/stylebook/src/mixins";
-@use "@aztlan/stylebook/src/globals" as *;
-
-$default-desktop-padding:1em;
-
-.#{bem.$base}.site-navigation {
-  //background: var(--secondary2);
-  position: sticky;
-  top: 0;//TODO
-
-  .#{bem.$modifier-active} {
-    text-decoration: underline;
-  }
-
-  @include mixins.media($to:$sm-md) {
-    cursor: pointer;
-
-    .wrapper {
-      display: none;
-    }
-
-    &.open {
-      display: flex;
-      flex-direction: column;
-
-      height: 100%;
-      position: fixed;
-      width: 100%;
-
-      .wrapper {
-        display: flex;
-        flex-direction: column;
-        height: 100%;
-        justify-content: space-between;
-
-        .title,
-        .menu,
-        .cta {
-          padding: var(--u);
-          text-align: center;
-        }
-
-        .menu {
-          ul {
-            list-style: none;
-            padding: 0;
-            /* stylelint-disable selector-max-compound-selectors -- required */
-            /* stylelint-disable max-nesting-depth -- required */
-            li {
-              + li {
-                margin-top: 2em;
-              }
-            }
-            /* stylelint-enable selector-max-compound-selectors */
-            /* stylelint-enable max-nesting-depth  */
-          }
-        }
-      }
-    }
-  }
-  @include mixins.media($from:$sm-md) {
-    .hamburger {
-      display: none;
-    }
-
-    .wrapper {
-      display: grid;
-      grid-template-areas: "title menu cta";
-      grid-template-columns: 200px 1fr 200px;
-    }
-
-    .title {
-      //background: var(--main1);
-      grid-area: title;
-      justify-content: flex-start;
-    }
-
-    .menu {
-      //background: var(--main2);
-      grid-area: menu;
-
-      ul {
-        display: flex;
-        justify-content: center;
-        list-style: none;
-        padding: 0;
-        width: 100%;
-
-        /* stylelint-disable selector-max-compound-selectors -- required */
-        li {
-          + li {
-            margin-left: 2em;
-          }
-        }
-        /* stylelint-enable selector-max-compound-selectors */
-      }
-    }
-
-    .cta {
-      //background: var(--secondary1);
-      grid-area: cta;
-      justify-content: flex-end;
-    }
-
-    .title,
-    .menu,
-    .cta {
-      align-items: center;
-      display: flex;
-      padding: $default-desktop-padding/2 $default-desktop-padding;
-    }
-  }
-}
-
-

package/src/ui/c/SiteOnboardingStep/SiteOnboardingStep.jsx

@@ -1,107 +0,0 @@
-/* @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 { SVG } from 'ui/a'
-
-// Local Definitions
-
-const baseClassName = styleNames.base
-
-const componentClassName = 'onboarding-step'
-
-/**
- * This is the component description.
- */
-const SiteOnboardingStep = ({
-  id,
-  className:userClassName,
-  style,
-  color,
-  stepMap,
-  // ...otherProps
-}) => {
-  useLayoutEffect(() => {
-    import('./styles.scss')
-  }, [])
-
-  return (
-    <div
-      id={id}
-      className={[
-        baseClassName,
-        componentClassName,
-        userClassName,
-        `y-${color}`,
-        'u2',
-      ]
-        .filter((e) => e)
-        .join(' ')}
-      style={style}
-      // {...otherProps}
-    >
-      {stepMap.map((step) => (
-        <div key={step.index} className="y-background b-y content s0 md-s1 v1">
-          <SVG
-            className="m-v"
-            height="10em"
-            target={step.svgTarget}
-            sprite="/illustrations.sprite.svg"
-          />
-          <span className="index uc mb-v">{step.index}</span>
-          <span className="title uc mb-v">
-            <strong>
-              {step.title}
-            </strong>
-          </span>
-          <p className="description uc">
-            {step.description}
-          </p>
-        </div>
-      ))}
-    </div>
-  )
-}
-
-SiteOnboardingStep.propTypes = {
-  /**
-   * The HTML id for this element
-   */
-  id:PropTypes.string,
-
-  /**
-   * The HTML class names for this element
-   */
-  className:PropTypes.string,
-
-  /**
-   * The background color
-   */
-  color:PropTypes.string,
-
-  /**
-   * The React-written, css properties for this element.
-   */
-  style:PropTypes.objectOf(PropTypes.string),
-
-  /**
-   *  The children JSX
-   */
-  stepMap:PropTypes.arrayOf(PropTypes.shape({
-    svgTarget  :PropTypes.string.isRequired,
-    index      :PropTypes.string.isRequired,
-    title      :PropTypes.string.isRequired,
-    description:PropTypes.string.isRequired,
-  })).isRequired,
-}
-
-SiteOnboardingStep.defaultProps = {
-  color:'secondary1',
-}
-
-export default SiteOnboardingStep