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

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

@@ -0,0 +1,108 @@
+/* @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,
+  // ...otherProps
+}) => {
+  useLayoutEffect(() => {
+    import('./styles.scss')
+  }, [])
+
+  return (
+    <div
+      id={id}
+      className={[
+
+        baseClassName,
+
+        componentClassName,
+        userClassName,
+        layout,
+      ]
+        .filter((e) => e)
+        .join(' ')}
+      style={style}
+      // {...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,
+}
+
+OvalIllustration.defaultProps = {
+  layout:'left',
+}
+
+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,105 @@
+/* @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

@@ -20,9 +20,11 @@ const Shapes = ({
   id,
   className:userClassName,
   style,
-  pin,
   shape,
   height,
+  overflow,
+  verticalAlign,
+  horizontalAlign,
   // ...otherProps
 }) => {
   useLayoutEffect(() => {
@@ -43,8 +45,10 @@ const Shapes = ({
         .join(' ')}
       style={{
         ...style,
-        '--pin'         :pin,
-        '--shape-height':height,
+        '--shape-height'    :height,
+        '--overflow'        :overflow,
+        '--vertical-align'  :verticalAlign,
+        '--horizontal-align':horizontalAlign,
       }}
       // {...otherProps}
     >
@@ -95,6 +99,12 @@ const Shapes = ({
         <div className="circle-four" />
       </div>
       )}
+      {shape === 'rotated-ellipses' && (
+      <div className="rotated-ellipses">
+        <div className="ellipse-one" />
+        <div className="ellipse-two" />
+      </div>
+      )}
     </div>
   )
 }
@@ -121,9 +131,18 @@ Shapes.propTypes = {
   height:PropTypes.string,
 
   /**
-   * Where to pin the shapes
+   * The vertical alignment of the shape.
+   */
+  verticalAlign:PropTypes.oneOf([
+    'flex-start',
+    'center',
+    'flex-end',
+  ]),
+
+  /**
+   * The horizontal alignment of the shape.
    */
-  pin:PropTypes.oneOf([
+  horizontalAlign:PropTypes.oneOf([
     'flex-start',
     'center',
     'flex-end',
@@ -143,12 +162,20 @@ Shapes.propTypes = {
     'half-circle',
     'ellipses',
     'rectangles',
+    'rotated-ellipses',
   ]),
+
+  /**
+   * The overflow of the shape.
+   */
+  overflow:PropTypes.oneOf(['hidden', 'visible']),
 }
 
 Shapes.defaultProps = {
-  pin  :'center',
-  shape:'triangle',
+  verticalAlign  :'center',
+  horizontalAlign:'center',
+  shape          :'triangle',
+  overflow       :'hidden',
 }
 
 export default Shapes

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

@@ -15,8 +15,9 @@ $default-shapes-opacity:.8;
     left: 0;
     display: flex;
     flex-direction: column;
-    justify-content: var(--pin);
-    align-items: center;
+    overflow: var(--overflow);
+    justify-content: var(--vertical-align);
+    align-items: var(--horizontal-align);
     height: 100%;
     width: 100%;
 
@@ -34,24 +35,23 @@ $default-shapes-opacity:.8;
       width: calc(var(--shape-height, #{$default-ellipse-height}) * 2);
 
       .up {
-        background-image: linear-gradient(var(--light-y), var(--y));
-        clip-path: ellipse(40% 100% at 50% 0%);
+        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: linear-gradient(to top, var(--light-y), var(--y));
-        clip-path: ellipse(40% 100% at 50% 100%);
+        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(to top left, var(--dark-y), var(--light-y), var(--dark-y));
-      clip-path: ellipse(50% 25% at 50% 50%);
+      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;
-      transform: rotate3d(0, 0, -1, 10deg);
       width: calc(var(--shape-height, #{$default-ellipse-height}) * 2);
     }
 
@@ -109,8 +109,8 @@ $default-shapes-opacity:.8;
     }
 
     .half-ellipse {
-      background-image: linear-gradient(var(--light-y), var(--dark-y));
-      clip-path: ellipse(50% 50% at 50% 0);
+      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);
@@ -174,26 +174,48 @@ $default-shapes-opacity:.8;
 
        .circle-one {
         transform: rotate(45deg);
-        height: 55%;
-        width: 55%;
+        height:calc(var(--shape-height, #{$default-ellipse-height})* 0.4);
+        width: calc(var(--shape-height, #{$default-ellipse-height})* 0.4);
       }
 
        .circle-two {
-        height: 70%;
-        width: 70%;
+        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: 85%;
-        width: 85%;
+        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: 100%;
-        width: 100%;
+        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/index.js

@@ -24,3 +24,4 @@ export { ContentCard } from './ContentCard'
 export { DotInfo } from './DotInfo'
 export { Timestamp } from './Timestamp'
 export { Shapes } from './Shapes'
+export { OvalIllustration } from './OvalIllustration'

package/src/ui/b/Page/common/Section/Section.jsx

@@ -16,8 +16,10 @@ const Section = ({
   style,
   children,
   backgroundShape,
-  backgroundPin,
+  backgroundVerticalAlign,
+  backgroundHorizontalAlign,
   backgroundHeight,
+  backgroundOverflow,
   ...otherProps
 }) => {
   const {
@@ -40,7 +42,13 @@ const Section = ({
     >
       {children}
       {backgroundShape && (
-        <Shapes pin={backgroundPin} height={backgroundHeight} shape={backgroundShape} />
+        <Shapes
+          verticalAlign={backgroundVerticalAlign}
+          horizontalAlign={backgroundHorizontalAlign}
+          backgroundOverflow={backgroundOverflow}
+          height={backgroundHeight}
+          shape={backgroundShape}
+        />
       )}
     </section>
   )
@@ -84,14 +92,23 @@ Section.propTypes = {
   ]),
 
   /**
-   * The background pin to use for if the background shape is set.
+   * The background vertical alingment to use for if the background shape is set.
    */
-  backgroundPin:PropTypes.oneOf(['flex-start', 'center', 'flex-end']),
+  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']),
 }
 
 Section.defaultProps = {