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

package/dist/es/a/Shapes/Shapes.js

@@ -14,9 +14,11 @@ const Shapes = ({
   id,
   className: userClassName,
   style,
-  pin,
   shape,
-  height // ...otherProps
+  height,
+  overflow,
+  verticalAlign,
+  horizontalAlign // ...otherProps
 
 }) => {
   useLayoutEffect(() => {
@@ -26,8 +28,10 @@ const Shapes = ({
     id: id,
     className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
     style: { ...style,
-      '--pin': pin,
-      '--shape-height': height
+      '--shape-height': height,
+      '--overflow': overflow,
+      '--vertical-align': verticalAlign,
+      '--horizontal-align': horizontalAlign
     } // {...otherProps}
 
   }, shape === 'triangle' && /*#__PURE__*/React.createElement("div", {
@@ -78,6 +82,12 @@ const Shapes = ({
     className: "circle-three"
   }), /*#__PURE__*/React.createElement("div", {
     className: "circle-four"
+  })), shape === 'rotated-ellipses' && /*#__PURE__*/React.createElement("div", {
+    className: "rotated-ellipses"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "ellipse-one"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "ellipse-two"
   })));
 };
 
@@ -103,17 +113,29 @@ 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(['flex-start', 'center', 'flex-end']),
+  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'])
+  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 = {
-  pin: 'center',
-  shape: 'triangle'
+  verticalAlign: 'center',
+  horizontalAlign: 'center',
+  shape: 'triangle',
+  overflow: 'hidden'
 };
 export default Shapes;

package/dist/es/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/dist/es/a/index.js

@@ -18,4 +18,5 @@ export { Quote } from "./Quote";
 export { ContentCard } from "./ContentCard";
 export { DotInfo } from "./DotInfo";
 export { Timestamp } from "./Timestamp";
-export { Shapes } from "./Shapes";
+export { Shapes } from "./Shapes";
+export { OvalIllustration } from "./OvalIllustration";

package/dist/es/b/Page/common/Section/Section.js

@@ -16,8 +16,10 @@ const Section = ({
   style,
   children,
   backgroundShape,
-  backgroundPin,
+  backgroundVerticalAlign,
+  backgroundHorizontalAlign,
   backgroundHeight,
+  backgroundOverflow,
   ...otherProps
 }) => {
   const {
@@ -29,7 +31,9 @@ const Section = ({
     className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
     style: style
   }, otherProps), children, backgroundShape && /*#__PURE__*/React.createElement(Shapes, {
-    pin: backgroundPin,
+    verticalAlign: backgroundVerticalAlign,
+    horizontalAlign: backgroundHorizontalAlign,
+    backgroundOverflow: backgroundOverflow,
     height: backgroundHeight,
     shape: backgroundShape
   }));
@@ -62,14 +66,24 @@ Section.propTypes = {
   backgroundShape: PropTypes.oneOf(['triangle', 'ellipse', 'half-ellipse', 'half-ellipses', 'spiral', 'diamonds', 'circle', 'half-circle', 'ellipses', 'rectangles']),
 
   /**
-   * 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
+  backgroundHeight: PropTypes.string,
+
+  /**
+   * The background overflow to use for if the background shape is set.
+   */
+  backgroundOverflow: PropTypes.oneOf(['visible', 'hidden', 'scroll'])
 };
 Section.defaultProps = {// someProp:false
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pareto-engineering/design-system",
-  "version": "2.0.0-alpha.5",
+  "version": "2.0.0-alpha.9",
   "description": "",
   "main": "dist/cjs/index.js",
   "module": "dist/es/index.js",
@@ -81,7 +81,7 @@
   "dependencies": {
     "@pareto-engineering/assets": "^2.0.0-alpha.3",
     "@pareto-engineering/bem": "^0.1.5",
-    "@pareto-engineering/styles": "^2.0.0-alpha.4",
+    "@pareto-engineering/styles": "^2.0.0-alpha.6",
     "date-fns": "^2.22.1",
     "formik": "^2.2.9",
     "hamburgers": "^1.1.3",

package/src/__snapshots__/Storyshots.test.js.snap

@@ -783,6 +783,39 @@ exports[`Storyshots a/LoadingCircle Base 1`] = `
 </div>
 `;
 
+exports[`Storyshots a/OvalIllustration With Background 1`] = `
+<div
+  className="base oval-illustration right"
+>
+  <div
+    className="oval-background y-background3"
+  />
+  <div
+    className="illustration"
+  >
+    <img
+      alt="illustration"
+      src="https://www.azernews.az/media/pictures/company_picture.jpg"
+    />
+  </div>
+</div>
+`;
+
+exports[`Storyshots a/OvalIllustration Without Background 1`] = `
+<div
+  className="base oval-illustration left"
+>
+  <div
+    className="illustration"
+  >
+    <img
+      alt="illustration"
+      src="https://www.azernews.az/media/pictures/company_picture.jpg"
+    />
+  </div>
+</div>
+`;
+
 exports[`Storyshots a/People Base 1`] = `
 <div
   className="x-background1 b-x v1 p-v"
@@ -1161,8 +1194,10 @@ exports[`Storyshots a/Shapes Circle 1`] = `
     className="base shapes"
     style={
       Object {
-        "--pin": "flex-end",
+        "--horizontal-align": "center",
+        "--overflow": "hidden",
         "--shape-height": "30em",
+        "--vertical-align": "flex-end",
       }
     }
   >
@@ -1188,8 +1223,10 @@ exports[`Storyshots a/Shapes Diamonds 1`] = `
     className="base shapes"
     style={
       Object {
-        "--pin": "flex-end",
+        "--horizontal-align": "center",
+        "--overflow": "hidden",
         "--shape-height": "30em",
+        "--vertical-align": "flex-end",
       }
     }
   >
@@ -1225,8 +1262,10 @@ exports[`Storyshots a/Shapes Ellipse 1`] = `
     className="base shapes"
     style={
       Object {
-        "--pin": "flex-end",
+        "--horizontal-align": "center",
+        "--overflow": "hidden",
         "--shape-height": "30em",
+        "--vertical-align": "flex-end",
       }
     }
   >
@@ -1252,8 +1291,10 @@ exports[`Storyshots a/Shapes Ellipses 1`] = `
     className="base shapes"
     style={
       Object {
-        "--pin": "flex-end",
+        "--horizontal-align": "center",
+        "--overflow": "hidden",
         "--shape-height": "30em",
+        "--vertical-align": "flex-end",
       }
     }
   >
@@ -1286,8 +1327,10 @@ exports[`Storyshots a/Shapes Half Circle 1`] = `
     className="base shapes"
     style={
       Object {
-        "--pin": "flex-end",
+        "--horizontal-align": "center",
+        "--overflow": "hidden",
         "--shape-height": "30em",
+        "--vertical-align": "flex-end",
       }
     }
   >
@@ -1313,8 +1356,10 @@ exports[`Storyshots a/Shapes Half Ellipse 1`] = `
     className="base shapes"
     style={
       Object {
-        "--pin": "flex-end",
+        "--horizontal-align": "center",
+        "--overflow": "hidden",
         "--shape-height": "25em",
+        "--vertical-align": "flex-end",
       }
     }
   >
@@ -1340,8 +1385,10 @@ exports[`Storyshots a/Shapes Half Ellipses 1`] = `
     className="base shapes"
     style={
       Object {
-        "--pin": "flex-end",
+        "--horizontal-align": "center",
+        "--overflow": "hidden",
         "--shape-height": "25em",
+        "--vertical-align": "flex-end",
       }
     }
   >
@@ -1374,8 +1421,10 @@ exports[`Storyshots a/Shapes Rectangles 1`] = `
     className="base shapes"
     style={
       Object {
-        "--pin": "flex-end",
+        "--horizontal-align": "center",
+        "--overflow": "hidden",
         "--shape-height": "30em",
+        "--vertical-align": "flex-end",
       }
     }
   >
@@ -1396,6 +1445,42 @@ exports[`Storyshots a/Shapes Rectangles 1`] = `
 </div>
 `;
 
+exports[`Storyshots a/Shapes Rotated Ellipses 1`] = `
+<div
+  className="y-background5 b-light-y"
+  style={
+    Object {
+      "height": "1000px",
+      "overflow": "hidden",
+      "position": "relative",
+    }
+  }
+>
+  <div
+    className="base shapes"
+    style={
+      Object {
+        "--horizontal-align": "center",
+        "--overflow": "hidden",
+        "--shape-height": "60em",
+        "--vertical-align": "center",
+      }
+    }
+  >
+    <div
+      className="rotated-ellipses"
+    >
+      <div
+        className="ellipse-one"
+      />
+      <div
+        className="ellipse-two"
+      />
+    </div>
+  </div>
+</div>
+`;
+
 exports[`Storyshots a/Shapes Spiral 1`] = `
 <div
   className="y-background6 b-light-y"
@@ -1411,8 +1496,10 @@ exports[`Storyshots a/Shapes Spiral 1`] = `
     className="base shapes"
     style={
       Object {
-        "--pin": "center",
-        "--shape-height": "70em",
+        "--horizontal-align": "center",
+        "--overflow": "hidden",
+        "--shape-height": "100em",
+        "--vertical-align": "center",
       }
     }
   >
@@ -1451,8 +1538,10 @@ exports[`Storyshots a/Shapes Triangle 1`] = `
     className="base shapes"
     style={
       Object {
-        "--pin": "center",
+        "--horizontal-align": "center",
+        "--overflow": "hidden",
         "--shape-height": "30em",
+        "--vertical-align": "flex-end",
       }
     }
   >
@@ -6343,8 +6432,10 @@ exports[`Storyshots b/Page Sections With Background 1`] = `
       className="base shapes"
       style={
         Object {
-          "--pin": "center",
+          "--horizontal-align": "center",
+          "--overflow": "hidden",
           "--shape-height": "30em",
+          "--vertical-align": "flex-end",
         }
       }
     >

package/src/stories/a/OvalIllustration.stories.jsx

@@ -0,0 +1,36 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { OvalIllustration } from 'ui'
+
+export default {
+  title        :'a/OvalIllustration',
+  component    :OvalIllustration,
+  subcomponents:{
+    // Item:OvalIllustration.Item
+  },
+  decorators:[
+    // storyfn => <div className="">{ storyfn() }</div>,
+  ],
+  argTypes:{
+    backgroundColor:{ control: 'color' },
+  },
+}
+
+export const WithBackground = () => (
+  <OvalIllustration
+    backgroundColor="background3"
+    src="https://www.azernews.az/media/pictures/company_picture.jpg"
+    alt="illustration"
+    ovalBackground
+    layout="right"
+  />
+)
+
+export const WithoutBackground = () => (
+  <OvalIllustration
+    src="https://www.azernews.az/media/pictures/company_picture.jpg"
+    alt="illustration"
+    layout="left"
+  />
+)

package/src/stories/a/Shapes.stories.jsx

@@ -13,10 +13,11 @@ export default {
     // storyfn => <div className="">{ storyfn() }</div>,
   ],
   argTypes:{
-    pin   :{ control: 'select' },
-    shape :{ control: 'select' },
-    height:{ control: 'text' },
-    color :{ control: 'text' },
+    verticalAlign  :{ control: 'select' },
+    horizontalAlign:{ control: 'select' },
+    shape          :{ control: 'select' },
+    height         :{ control: 'text' },
+    color          :{ control: 'text' },
   },
 }
 
@@ -34,79 +35,91 @@ const Template = ({ color, ...rest }) => (
 
 export const Triangle = Template.bind({})
 Triangle.args = {
-  height:'30em',
-  pin   :'center',
-  color :'background6',
-  shape :'triangle',
+  height         :'30em',
+  verticalAlign  :'flex-end',
+  horizontalAlign:'center',
+  color          :'background6',
+  shape          :'triangle',
 }
 
 export const HalfEllipses = Template.bind({})
 HalfEllipses.args = {
-  height:'25em',
-  pin   :'flex-end',
-  color :'background3',
-  shape :'half-ellipses',
+  height       :'25em',
+  verticalAlign:'flex-end',
+  color        :'background3',
+  shape        :'half-ellipses',
 }
 
 export const Ellipse = Template.bind({})
 Ellipse.args = {
-  height:'30em',
-  pin   :'flex-end',
-  color :'main3',
-  shape :'ellipse',
+  height       :'30em',
+  verticalAlign:'flex-end',
+  color        :'main3',
+  shape        :'ellipse',
 }
 
 export const HalfEllipse = Template.bind({})
 HalfEllipse.args = {
-  height:'25em',
-  pin   :'flex-end',
-  color :'background3',
-  shape :'half-ellipse',
+  height       :'25em',
+  verticalAlign:'flex-end',
+  color        :'background3',
+  shape        :'half-ellipse',
 }
 
 export const Diamonds = Template.bind({})
 Diamonds.args = {
-  height:'30em',
-  pin   :'flex-end',
-  color :'background4',
-  shape :'diamonds',
+  height       :'30em',
+  verticalAlign:'flex-end',
+  color        :'background4',
+  shape        :'diamonds',
 }
 
 export const Rectangles = Template.bind({})
 Rectangles.args = {
-  height:'30em',
-  pin   :'flex-end',
-  color :'background5',
-  shape :'rectangles',
+  height       :'30em',
+  verticalAlign:'flex-end',
+  color        :'background5',
+  shape        :'rectangles',
 }
 
 export const Circle = Template.bind({})
 Circle.args = {
-  height:'30em',
-  pin   :'flex-end',
-  color :'background5',
-  shape :'circle',
+  height       :'30em',
+  verticalAlign:'flex-end',
+  color        :'background5',
+  shape        :'circle',
 }
 
 export const HalfCircle = Template.bind({})
 HalfCircle.args = {
-  height:'30em',
-  pin   :'flex-end',
-  color :'background4',
-  shape :'half-circle',
+  height       :'30em',
+  verticalAlign:'flex-end',
+  color        :'background4',
+  shape        :'half-circle',
 }
 
 export const Ellipses = Template.bind({})
 Ellipses.args = {
-  height:'30em',
-  pin   :'flex-end',
-  color :'background4',
-  shape :'ellipses',
+  height       :'30em',
+  verticalAlign:'flex-end',
+  color        :'background4',
+  shape        :'ellipses',
 }
 
 export const Spiral = Template.bind({})
 Spiral.args = {
-  height:'70em',
-  color :'background6',
-  shape :'spiral',
+  height         :'100em',
+  verticalAlign  :'center',
+  horizontalAlign:'center',
+  color          :'background6',
+  shape          :'spiral',
+}
+
+export const RotatedEllipses = Template.bind({})
+RotatedEllipses.args = {
+  height         :'60em',
+  verticalAlign  :'center',
+  horizontalAlign:'center',
+  color          :'background5',
+  shape          :'rotated-ellipses',
 }

package/src/stories/b/Page.stories.jsx

@@ -66,7 +66,8 @@ export const SectionsWithBackground = () => (
       id="s1"
       backgroundShape="triangle"
       backgroundHeight="30em"
-      backgroundPin="center"
+      backgroundVerticalAlign="flex-end"
+      backgroundHorizontalAlign="center"
       className="y-success b-light-y"
       style={{
         height        :'30em',