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

package/dist/cjs/a/Shapes/Shapes.js

@@ -35,9 +35,11 @@ var Shapes = _ref => {
     id,
     className: userClassName,
     style,
-    pin,
     shape,
-    height // ...otherProps
+    height,
+    overflow,
+    verticalAlign,
+    horizontalAlign // ...otherProps
 
   } = _ref;
   (0, React.useLayoutEffect)(() => {
@@ -47,8 +49,10 @@ var Shapes = _ref => {
     id: id,
     className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
     style: _objectSpread(_objectSpread({}, style), {}, {
-      '--pin': pin,
-      '--shape-height': height
+      '--shape-height': height,
+      '--overflow': overflow,
+      '--vertical-align': verticalAlign,
+      '--horizontal-align': horizontalAlign
     }) // {...otherProps}
 
   }, shape === 'triangle' && /*#__PURE__*/React.createElement("div", {
@@ -99,6 +103,12 @@ var Shapes = _ref => {
     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"
   })));
 };
 
@@ -124,18 +134,30 @@ Shapes.propTypes = {
   height: _propTypes.default.string,
 
   /**
-   * Where to pin the shapes
+   * The vertical alignment of the shape.
+   */
+  verticalAlign: _propTypes.default.oneOf(['flex-start', 'center', 'flex-end']),
+
+  /**
+   * The horizontal alignment of the shape.
    */
-  pin: _propTypes.default.oneOf(['flex-start', 'center', 'flex-end']),
+  horizontalAlign: _propTypes.default.oneOf(['flex-start', 'center', 'flex-end']),
 
   /**
    * The options of a shape to use
    */
-  shape: _propTypes.default.oneOf(['triangle', 'ellipse', 'half-ellipse', 'half-ellipses', 'spiral', 'diamonds', 'circle', 'half-circle', 'ellipses', 'rectangles'])
+  shape: _propTypes.default.oneOf(['triangle', 'ellipse', 'half-ellipse', 'half-ellipses', 'spiral', 'diamonds', 'circle', 'half-circle', 'ellipses', 'rectangles', 'rotated-ellipses']),
+
+  /**
+   * The overflow of the shape.
+   */
+  overflow: _propTypes.default.oneOf(['hidden', 'visible'])
 };
 Shapes.defaultProps = {
-  pin: 'center',
-  shape: 'triangle'
+  verticalAlign: 'center',
+  horizontalAlign: 'center',
+  shape: 'triangle',
+  overflow: 'hidden'
 };
 var _default = Shapes;
 exports.default = _default;

package/dist/cjs/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,14 +35,14 @@ $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%;
       }
     }
@@ -109,8 +110,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 +175,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/cjs/b/Page/common/Section/Section.js

@@ -15,7 +15,7 @@ var _a = require("../../../../a");
 
 var _usePage = _interopRequireDefault(require("../../usePage"));
 
-var _excluded = ["id", "className", "style", "children", "backgroundShape", "backgroundPin", "backgroundHeight"];
+var _excluded = ["id", "className", "style", "children", "backgroundShape", "backgroundVerticalAlign", "backgroundHorizontalAlign", "backgroundHeight", "backgroundOverflow"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -39,8 +39,10 @@ var Section = _ref => {
     style,
     children,
     backgroundShape,
-    backgroundPin,
-    backgroundHeight
+    backgroundVerticalAlign,
+    backgroundHorizontalAlign,
+    backgroundHeight,
+    backgroundOverflow
   } = _ref,
       otherProps = _objectWithoutProperties(_ref, _excluded);
 
@@ -53,7 +55,9 @@ var Section = _ref => {
     className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
     style: style
   }, otherProps), children, backgroundShape && /*#__PURE__*/React.createElement(_a.Shapes, {
-    pin: backgroundPin,
+    verticalAlign: backgroundVerticalAlign,
+    horizontalAlign: backgroundHorizontalAlign,
+    backgroundOverflow: backgroundOverflow,
     height: backgroundHeight,
     shape: backgroundShape
   }));
@@ -86,14 +90,24 @@ Section.propTypes = {
   backgroundShape: _propTypes.default.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.default.oneOf(['flex-start', 'center', 'flex-end']),
+  backgroundVerticalAlign: _propTypes.default.oneOf(['flex-start', 'center', 'flex-end']),
+
+  /**
+   * The background horizontal alingment to use for if the background shape is set.
+   */
+  backgroundHorizontalAlign: _propTypes.default.oneOf(['flex-start', 'center', 'flex-end']),
 
   /**
    * The background height to use for if the background shape is set.
    */
-  backgroundHeight: _propTypes.default.string
+  backgroundHeight: _propTypes.default.string,
+
+  /**
+   * The background overflow to use for if the background shape is set.
+   */
+  backgroundOverflow: _propTypes.default.oneOf(['visible', 'hidden', 'scroll'])
 };
 Section.defaultProps = {// someProp:false
 };

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,14 +35,14 @@ $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%;
       }
     }
@@ -109,8 +110,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 +175,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/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.6",
   "description": "",
   "main": "dist/cjs/index.js",
   "module": "dist/es/index.js",

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

@@ -1161,8 +1161,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 +1190,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 +1229,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 +1258,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 +1294,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 +1323,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 +1352,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 +1388,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 +1412,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 +1463,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 +1505,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 +6399,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/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',

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,14 +35,14 @@ $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%;
       }
     }
@@ -109,8 +110,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 +175,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/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 = {