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

package/src/ui/a/OvalIllustration/styles.scss

@@ -1,105 +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-shape-size:45em;
-$default-tablet-shape-size:35em;
-$default-mobile-shape-size:20em;
-$default-clockwise-degree:60deg;
-$default-counter-clockwise-degree:-60deg;
-$default-ellipse-size:30% 43% at 50% 50%;
-
-.#{bem.$base}.oval-illustration {
-  display: flex;
-  justify-content: center;
-  overflow: hidden;
-  position: relative;
-
-  &.left {
-    .oval-background {
-      transform: rotate($default-clockwise-degree);
-    }
-
-    .illustration {
-      transform: rotate($default-counter-clockwise-degree);
-
-      > img {
-        transform: rotate($default-clockwise-degree);
-      }
-    }
-  }
-
-  &.right {
-    .oval-background {
-      transform: rotate($default-counter-clockwise-degree);
-    }
-
-    .illustration {
-      transform: rotate($default-clockwise-degree);
-
-      > img {
-        transform: rotate($default-counter-clockwise-degree);
-      }
-    }
-  }
-
-  .oval-background {
-    background: var(--y);
-    clip-path: ellipse($default-ellipse-size);
-    overflow: hidden;
-    position: absolute;
-    z-index: 0;
-  }
-
-  .illustration {
-    clip-path: ellipse($default-ellipse-size);
-    overflow: hidden;
-
-    > img {
-      height: 100%;
-      object-fit: cover;
-      width: 100%;
-    }
-  }
-
-  // mobile style
-  @include mixins.media($to:$sm-md) {
-    .oval-background {
-      height: $default-mobile-shape-size;
-      width: $default-mobile-shape-size;
-    }
-
-    .illustration {
-      height: $default-mobile-shape-size;
-      width: $default-mobile-shape-size;
-    }
-  }
-
-  // tablet style
-  @include mixins.media($from:$xs-sm, $to:$sm-md) {
-    .oval-background {
-      height: $default-tablet-shape-size;
-      width: $default-tablet-shape-size;
-    }
-
-    .illustration {
-      height: $default-tablet-shape-size;
-      width: $default-tablet-shape-size;
-    }
-  }
-
-  // desktop style
-  @include mixins.media($from:$sm-md) {
-    .oval-background {
-      height: $default-desktop-shape-size;
-      width: $default-desktop-shape-size;
-    }
-
-    .illustration {
-      height: $default-desktop-shape-size;
-      width: $default-desktop-shape-size;
-    }
-  }
-}

package/src/ui/a/Shapes/Shapes.jsx

@@ -1,181 +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'
-
-// Local Definitions
-
-const baseClassName = styleNames.base
-
-const componentClassName = 'shapes'
-
-/**
- * This is the component description.
- */
-const Shapes = ({
-  id,
-  className:userClassName,
-  style,
-  shape,
-  height,
-  overflow,
-  verticalAlign,
-  horizontalAlign,
-  // ...otherProps
-}) => {
-  useLayoutEffect(() => {
-    import('./styles.scss')
-  }, [])
-
-  return (
-    <div
-      id={id}
-      className={[
-
-        baseClassName,
-
-        componentClassName,
-        userClassName,
-      ]
-        .filter((e) => e)
-        .join(' ')}
-      style={{
-        ...style,
-        '--shape-height'    :height,
-        '--overflow'        :overflow,
-        '--vertical-align'  :verticalAlign,
-        '--horizontal-align':horizontalAlign,
-      }}
-      // {...otherProps}
-    >
-      { shape === 'triangle'
-        && <div className="triangle" />}
-      { shape === 'half-ellipses'
-        && (
-          <div className="half-ellipses">
-            <div className="up" />
-            <div className="down" />
-          </div>
-        )}
-      { shape === 'ellipse' && <div className="ellipse" />}
-      { shape === 'diamonds' && (
-      <div className="diamonds">
-        <div className="top-right" />
-        <div className="bottom-left" />
-        <div className="bottom-right" />
-      </div>
-      )}
-      { shape === 'rectangles' && (
-      <div className="rectangles">
-        <div className="top" />
-        <div className="center" />
-        <div className="bottom" />
-      </div>
-      )}
-      { shape === 'half-ellipse' && (
-      <div className="half-ellipse" />
-      )}
-      { shape === 'circle' && (
-      <div className="circle" />
-      )}
-      { shape === 'half-circle' && (
-      <div className="half-circle" />
-      )}
-      { shape === 'ellipses' && (
-        <div className="ellipses">
-          <div className="first" />
-          <div className="second" />
-        </div>
-      )}
-      {shape === 'spiral' && (
-      <div className="spiral">
-        <div className="circle-one" />
-        <div className="circle-two" />
-        <div className="circle-three" />
-        <div className="circle-four" />
-      </div>
-      )}
-      {shape === 'rotated-ellipses' && (
-      <div className="rotated-ellipses">
-        <div className="ellipse-one" />
-        <div className="ellipse-two" />
-      </div>
-      )}
-    </div>
-  )
-}
-
-Shapes.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 height of the shape.
-   */
-  height:PropTypes.string,
-
-  /**
-   * The vertical alignment of the shape.
-   */
-  verticalAlign:PropTypes.oneOf([
-    'flex-start',
-    'center',
-    'flex-end',
-  ]),
-
-  /**
-   * The horizontal alignment of the shape.
-   */
-  horizontalAlign:PropTypes.oneOf([
-    'flex-start',
-    'center',
-    'flex-end',
-  ]),
-
-  /**
-   * The options of a shape to use
-   */
-  shape:PropTypes.oneOf([
-    'triangle',
-    'ellipse',
-    'half-ellipse',
-    'half-ellipses',
-    'spiral',
-    'diamonds',
-    'circle',
-    'half-circle',
-    'ellipses',
-    'rectangles',
-    'rotated-ellipses',
-  ]),
-
-  /**
-   * The overflow of the shape.
-   */
-  overflow:PropTypes.oneOf(['hidden', 'visible']),
-}
-
-Shapes.defaultProps = {
-  verticalAlign  :'center',
-  horizontalAlign:'center',
-  shape          :'triangle',
-  overflow       :'hidden',
-}
-
-export default Shapes

package/src/ui/a/Shapes/styles.scss

@@ -1,221 +0,0 @@
-/* @pareto-engineering/generator-front 1.0.12 */
-
-@use "@pareto-engineering/bem";
-
-$default-ellipse-height:50em;
-$default-diamond-height:40em;
-$default-circle-height:50em;
-$default-triangle-height:40em;
-$default-rectangle-height:50em;
-$default-shapes-opacity:.8;
-
-.#{bem.$base}.shapes {
-    position: absolute;
-    top: 0;
-    left: 0;
-    display: flex;
-    flex-direction: column;
-    overflow: var(--overflow);
-    justify-content: var(--vertical-align);
-    align-items: var(--horizontal-align);
-    height: 100%;
-    width: 100%;
-
-    .triangle {
-      background-image: linear-gradient(transparent, var(--dark-y));
-      clip-path: polygon(0 0, 50% 100%, 100% 0);
-      height: calc(var(--shape-height, #{$default-triangle-height}) * 0.86);
-      opacity: $default-shapes-opacity;
-      width: var(--shape-height, #{$default-triangle-height});
-    }
-
-    .half-ellipses {
-      height: var(--shape-height, #{$default-ellipse-height});
-      opacity: $default-shapes-opacity;
-      width: calc(var(--shape-height, #{$default-ellipse-height}) * 2);
-
-      .up {
-        background-image: radial-gradient(ellipse at center bottom, var(--y) 5%, transparent 65%);
-        clip-path: ellipse(35% 100% at 50% 0%);
-        height: 50%;
-      }
-
-      .down {
-        background-image: radial-gradient(ellipse at center top, var(--y) 5%, transparent 65%);
-        clip-path: ellipse(35% 100% at 50% 100%);
-        height: 50%;
-      }
-    }
-
-    .ellipse {
-      background-image: linear-gradient(var(--dark-y), var(--light-y));
-      clip-path: ellipse(50% 50% at 50% 50%);
-      height: var(--shape-height, #{$default-ellipse-height});
-      opacity: $default-shapes-opacity;
-      width: calc(var(--shape-height, #{$default-ellipse-height}) * 2);
-    }
-
-    .diamonds {
-      height: var(--shape-height, #{$default-diamond-height});
-      opacity: $default-shapes-opacity;
-      position: relative;
-      width: var(--shape-height, #{$default-diamond-height});
-
-      .top-right {
-        background-image: linear-gradient(to right, var(--dark-y), var(--y));
-        clip-path: polygon(100% 100%, 0 0, 100% 0);
-        height: 100%;
-        position: absolute;
-        width: 100%;
-      }
-
-      .bottom-left {
-        background-image: linear-gradient(to left, var(--dark-y), var(--y));
-        clip-path: polygon(0 100%, 0 0, 100% 100%);
-        height: 100%;
-        opacity: .95;
-        position: absolute;
-        width: 100%;
-        z-index: 1;
-      }
-
-      .bottom-right {
-        background-image: linear-gradient(to bottom, var(--dark-y), var(--y));
-        clip-path: polygon(100% 100%, 100% 0, 0 100%);
-        height: 100%;
-        position: absolute;
-        width: 100%;
-      }
-    }
-
-    .rectangles {
-      display: grid;
-      grid-template-rows: repeat(3, 1fr);
-      height: var(--shape-height, #{$default-rectangle-height});
-      opacity: $default-shapes-opacity;
-      width: var(--shape-height, #{$default-rectangle-height});
-
-      .top {
-        background-image: linear-gradient(to right, var(--dark-y), var(--y));
-      }
-
-      .center {
-        background-image: linear-gradient(to left, var(--dark-y), var(--y));
-      }
-
-      .bottom {
-        background-image: linear-gradient(to right, var(--dark-y), var(--y));
-      }
-    }
-
-    .half-ellipse {
-      background-image: radial-gradient(ellipse at center bottom, var(--y) 10%, transparent 65%);
-      clip-path: ellipse(60% 100% at 50% 0%);
-      height: var(--shape-height, #{$default-ellipse-height});
-      opacity: $default-shapes-opacity;
-      width: calc(var(--shape-height, #{$default-ellipse-height}) * 2);
-    }
-
-    .circle {
-      background-image: linear-gradient(var(--light-y), var(--dark-y));
-      clip-path: circle(50% at 50% 50%);
-      height: var(--shape-height, #{$default-circle-height});
-      opacity: $default-shapes-opacity;
-      width: var(--shape-height, #{$default-circle-height});
-    }
-
-    .half-circle {
-      background: linear-gradient(var(--light-y) 30%, var(--dark-y) 100%);
-      clip-path: circle(50% at 50% 100%);
-      height: var(--shape-height, #{$default-circle-height});
-      opacity: $default-shapes-opacity;
-      width: calc(var(--shape-height, #{$default-circle-height}) * 2);
-    }
-
-    .ellipses {
-      height: var(--shape-height, #{$default-ellipse-height});
-      opacity: $default-shapes-opacity;
-      position: relative;
-      width: var(--shape-height, #{$default-ellipse-height});
-
-      .first {
-        background-image: linear-gradient(to top, var(--dark-y), var(--y), var(--light-y) 50%, transparent);
-        clip-path: ellipse(50% 20% at 50% 60%);
-        height: 100%;
-        position: absolute;
-        width: 100%;
-        z-index: 1;
-      }
-
-      .second {
-        background-image: linear-gradient(to bottom,var(--dark-y), var(--y), var(--light-y) 45%, transparent);
-        clip-path: ellipse(50% 20% at 50% 40%);
-        height: 100%;
-        position: absolute;
-        width: 100%;
-      }
-    }
-
-    .spiral {
-      height: var(--shape-height, #{$default-ellipse-height});
-      width: var(--shape-height, #{$default-ellipse-height});
-      opacity: $default-shapes-opacity;
-      position: relative;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-
-      > * {
-        border-radius: 50%;
-        background: radial-gradient(ellipse at center bottom ,var(--dark-y) 10%, transparent 60%);
-        position: absolute;
-        opacity: .5;
-      }
-
-       .circle-one {
-        transform: rotate(45deg);
-        height:calc(var(--shape-height, #{$default-ellipse-height})* 0.4);
-        width: calc(var(--shape-height, #{$default-ellipse-height})* 0.4);
-      }
-
-       .circle-two {
-        height: calc(var(--shape-height, #{$default-ellipse-height})* 0.6);
-        width: calc(var(--shape-height, #{$default-ellipse-height})* 0.6);
-      }
-
-       .circle-three {
-        transform: rotate(-45deg);
-        height: calc(var(--shape-height, #{$default-ellipse-height})* 0.8);
-        width: calc(var(--shape-height, #{$default-ellipse-height})* 0.8);
-      }
-
-       .circle-four {
-        transform: rotate(-90deg);
-        height: calc(var(--shape-height, #{$default-ellipse-height})* 1);
-        width: calc(var(--shape-height, #{$default-ellipse-height})* 1);
-      }
-    }
-    .rotated-ellipses {
-      height: var(--shape-height, #{$default-ellipse-height});
-      opacity: $default-shapes-opacity;
-      width: var(--shape-height, #{$default-ellipse-height});
-      display: flex;
-
-      > *{
-        width: 100%;
-        height: 100%;
-      }
-
-      .ellipse-one {
-        background-image: radial-gradient(ellipse at bottom left, var(--y) 30%, transparent 65%);
-        transform: rotate(-15deg);
-        clip-path: ellipse(50% 35% at 50% 50%);
-      }
-
-      .ellipse-two {
-        background-image: radial-gradient(ellipse at top right, var(--y) 30%, transparent 65%);
-        transform: rotate(-15deg);
-        clip-path: ellipse(50% 35% at 50% 50%);
-      }
-    }
-}

package/src/ui/a/SiteContext/index.js

@@ -1,5 +0,0 @@
-/* @pareto-engineering/generator-front 0.2.3 */
-export { default as SiteContext } from './Context'
-export { default as SiteContextProvider } from './ContextProvider'
-export { default as useSite } from './useSite'
-export { default as useTheme } from './useTheme'

package/src/ui/a/TeamInfo/TeamInfo.jsx

@@ -1,99 +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'
-
-// Local Definitions
-
-const baseClassName = styleNames.base
-
-const componentClassName = 'team-info'
-
-/**
- * This is the component description.
- */
-const SiteTeamInfo = ({
-  id,
-  className:userClassName,
-  style,
-  description,
-  img,
-  name,
-  role,
-  // ...otherProps
-}) => {
-  useLayoutEffect(() => {
-    import('./styles.scss')
-  }, [])
-
-  return (
-    <div
-      id={id}
-      className={[
-        baseClassName,
-        componentClassName,
-        userClassName,
-        'u1',
-      ]
-        .filter((e) => e)
-        .join(' ')}
-      style={style}
-      // {...otherProps}
-    >
-      <p className="description s-1 md-s0">
-        {description}
-      </p>
-      <div className="content">
-        <img className="img mr-u" src={img} alt={`${name}, ${role} at Pareto`} />
-        <div className="team-member">
-          <span className="name s-1">{name}</span>
-          <span className="role s-2">{role}</span>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-SiteTeamInfo.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 team description
-   */
-  description:PropTypes.string.isRequired,
-  /**
-   *  The team member image
-   */
-  img        :PropTypes.string.isRequired,
-  /**
-   *  The team member name
-   */
-  name       :PropTypes.string.isRequired,
-  /**
-   *  The team member role
-   */
-  role       :PropTypes.string.isRequired,
-}
-
-SiteTeamInfo.defaultProps = {
-  // someProp:false
-}
-
-export default SiteTeamInfo

package/src/ui/a/TeamInfo/index.js

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

package/src/ui/a/TeamInfo/styles.scss

@@ -1,58 +0,0 @@
-/* @pareto-engineering/generator-front 1.0.12 */
-
-@use "@pareto-engineering/bem";
-@use "@aztlan/stylebook/src/mixins";
-@use "@aztlan/stylebook/src/globals" as *;
-
-$team-info-padding:var(--u);
-$img-height-width: 3.5em;
-$img-border-radius: var(--theme-border-radius);
-$p-h4-color:var(--subtitle);
-$role-color:var(--metadata);
-$default-name-color:var(--main1);
-$box-shadow:0 .45em 1em 0 var(--background1);
-
-.#{bem.$base}.team-info {
-  align-items: flex-start;
-  background: var(--light-y, var(--light-background1));
-  box-shadow: $box-shadow;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  padding: $team-info-padding;
-  width: 100%;
-
-
-  .description {
-    color: $p-h4-color;
-  }
-
-  .content {
-    display: flex;
-    width: 100%;
-
-    .img {
-      border-radius: $img-border-radius;
-      height: $img-height-width;
-      object-fit: cover;
-      width: $img-height-width;
-    }
-
-    .team-member {
-      display: flex;
-      flex-direction: column;
-      justify-content: space-around;
-
-      .name {
-        color: $default-name-color;
-      }
-
-      .role {
-        color: $role-color;
-        margin: 0;
-      }
-    }
-  }
-}
-
-