@pareto-engineering/design-system 2.0.0-alpha.4 → 2.0.0-alpha.42

package/src/ui/a/OvalIllustration/OvalIllustration.jsx

@@ -0,0 +1,134 @@
+/* @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 = 'oval-illustration'
+
+/**
+ * This is the component description.
+ */
+const OvalIllustration = ({
+  id,
+  className:userClassName,
+  style,
+  layout,
+  src,
+  alt,
+  ovalBackground,
+  backgroundColor,
+  mobileSize,
+  tabletSize,
+  desktopSize,
+  // ...otherProps
+}) => {
+  useLayoutEffect(() => {
+    import('./styles.scss')
+  }, [])
+
+  return (
+    <div
+      id={id}
+      className={[
+
+        baseClassName,
+
+        componentClassName,
+        userClassName,
+        layout,
+      ]
+        .filter((e) => e)
+        .join(' ')}
+      style={{
+        ...style,
+        '--mobile-size' :mobileSize,
+        '--tablet-size' :tabletSize,
+        '--desktop-size':desktopSize,
+      }}
+      // {...otherProps}
+    >
+      {ovalBackground
+        && <div className={`oval-background y-${backgroundColor}`} />}
+      <div className="illustration">
+        <img src={src} alt={alt} />
+      </div>
+    </div>
+  )
+}
+
+OvalIllustration.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),
+
+  /**
+   * side definition of the illustration
+   */
+  layout:PropTypes.oneOf([
+    'left',
+    'right',
+  ]),
+
+  /**
+   * image url
+   */
+  src:PropTypes.string,
+
+  /**
+   * alt tag for the image
+   */
+  alt:PropTypes.string,
+
+  /**
+   * whether to have a oval shape as background
+   */
+  ovalBackground:PropTypes.bool,
+
+  /**
+   * background color of the oval behind the image
+   */
+  backgroundColor:PropTypes.string,
+
+  /**
+   * size of the oval for mobile screen
+   */
+  mobileSize:PropTypes.string,
+
+  /**
+   * size of the oval for tablet screen
+   */
+  tabletSize:PropTypes.string,
+
+  /**
+   * size of the oval for desktop screen
+   */
+  desktopSize:PropTypes.string,
+}
+
+OvalIllustration.defaultProps = {
+  layout     :'left',
+  mobileSize :'20em',
+  tabletSize :'35em',
+  desktopSize:'45em',
+}
+
+export default OvalIllustration

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

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

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

@@ -0,0 +1,102 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+
+@use "@pareto-engineering/bem";
+@use "@aztlan/stylebook/src/mixins";
+@use "@aztlan/stylebook/src/globals" as *;
+
+$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: var(--mobile-size);
+      width: var(--mobile-size);
+    }
+
+    .illustration {
+      height: var(--mobile-size);
+      width: var(--mobile-size);
+    }
+  }
+
+  // tablet style
+  @include mixins.media($from:$xs-sm, $to:$sm-md) {
+    .oval-background {
+      height: var(--tablet-size);
+      width: var(--tablet-size);
+    }
+
+    .illustration {
+      height: var(--tablet-size);
+      width: var(--tablet-size);
+    }
+  }
+
+  // desktop style
+  @include mixins.media($from:$sm-md) {
+    .oval-background {
+      height: var(--desktop-size);
+      width: var(--desktop-size);
+    }
+
+    .illustration {
+      height: var(--desktop-size);
+      width: var(--desktop-size);
+    }
+  }
+}

package/src/ui/a/Popover/Popover.jsx

@@ -0,0 +1,157 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { useRef, useLayoutEffect } from 'react'
+
+import PropTypes from 'prop-types'
+
+import styleNames from '@pareto-engineering/bem'
+
+// Local Definitions
+import { useDynamicPosition } from 'ui/utils'
+
+const baseClassName = styleNames.base
+
+const componentClassName = 'popover'
+
+/**
+ * This is the component description.
+ */
+const Popover = ({
+  id,
+  className:userClassName,
+  style,
+  color,
+  children,
+  isOpen,
+  parentRef,
+  preferredPrimaryOrder,
+  preferredSecondaryOrder,
+  offsetXPx,
+  offsetYPx,
+  // ...otherProps
+}) => {
+  useLayoutEffect(() => {
+    import('./styles.scss')
+  }, [])
+
+  const popoverRef = useRef(null)
+  const {
+    primaryPosition,
+    secondaryPosition,
+  } = useDynamicPosition({
+    preferredPrimaryOrder,
+    preferredSecondaryOrder,
+    elementRef:popoverRef,
+    parentRef,
+    offsetXPx,
+    offsetYPx,
+  })
+
+  return (
+    <div
+      id={id}
+      className={[
+        baseClassName,
+        componentClassName,
+        userClassName,
+        isOpen && 'open',
+        `x-${color}`,
+        primaryPosition,
+        secondaryPosition,
+      ]
+        .filter((e) => e)
+        .join(' ')}
+      style={style}
+      ref={popoverRef}
+      // {...otherProps}
+    >
+      {children}
+    </div>
+  )
+}
+
+Popover.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 base color of the popover
+   */
+  color:PropTypes.string,
+
+  /**
+   * Whether the popover should be visible or not
+   */
+  isOpen:PropTypes.bool,
+
+  /**
+   * The preferred primary position order of the popover
+   */
+  preferredPrimaryOrder:PropTypes.arrayOf(
+    PropTypes.oneOf([
+      'bottom',
+      'top',
+      'right',
+      'left',
+    ]),
+  ),
+
+  /**
+   * The preferred secondary position order of the popover
+   */
+  preferredSecondaryOrder:PropTypes.arrayOf(
+    PropTypes.oneOf([
+      'left',
+      'right',
+      'bottom',
+      'top',
+    ]),
+  ),
+
+  /**
+   * The horizonal offset in pixels from the anchor point to the popover
+   */
+  offsetXPx:PropTypes.number,
+
+  /**
+   * The vertical offset in pixels from the anchor point to the popover
+   */
+  offsetYPx:PropTypes.number,
+
+  /**
+   * The reference to the parent element
+   */
+  parentRef:PropTypes.oneOfType([
+    PropTypes.func,
+    PropTypes.shape({ current: PropTypes.instanceOf(Element) }),
+  ]),
+}
+
+Popover.defaultProps = {
+  color                  :'background1',
+  isOpen                 :false,
+  preferredPrimaryOrder  :['bottom', 'top', 'right', 'left'],
+  preferredSecondaryOrder:['left', 'right', 'bottom', 'top'],
+  offsetXPx              :16,
+  offsetYPx              :0,
+}
+
+export default Popover

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

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

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

@@ -0,0 +1,43 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+@use "@pareto-engineering/bem";
+
+$default-padding: 1em;
+$default-margin: 1em;
+$default-border: var(--theme-border-style) var(--metadata);
+
+.#{bem.$base}.popover{
+    position: absolute;
+    z-index: 1;
+    background-color: var(--x);
+    padding: $default-padding;
+    border: $default-border;
+
+     &:not(.open) {
+        display: none;
+    }
+
+    > *:not(:last-child) {
+        margin-bottom: $default-margin / 2;
+    }
+
+  &.bottom {
+    top: 100%;
+    // bottom: 0;
+  }
+
+  &.left {
+    left: 0;
+  }
+
+  &.right {
+    right: 0;
+  }
+
+  &.top {
+    bottom: 100%;
+    top: auto;
+  }
+}
+
+
+

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

@@ -0,0 +1,191 @@
+/* @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 === 'inverted-triangle'
+        && <div className="inverted-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>
+      )}
+      {shape === 'intersecting-circles' && (
+      <div className="intersecting-circles">
+        <div className="left" />
+        <div className="right" />
+      </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',
+    'inverted-triangle',
+    'intersecting-circles',
+  ]),
+
+  /**
+   * 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/index.js

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