@pareto-engineering/design-system 2.0.0-alpha.11 → 2.0.0-alpha.12

package/dist/cjs/a/BackgroundGradient/BackgroundGradient.js

@@ -0,0 +1,77 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var React = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _bem = _interopRequireDefault(require("@pareto-engineering/bem"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+// Local Definitions
+var baseClassName = _bem.default.base;
+var componentClassName = 'background-gradient';
+/**
+ * This is the component description.
+ */
+
+var BackgroundGradient = _ref => {
+  var {
+    id,
+    className: userClassName,
+    style,
+    height // ...otherProps
+
+  } = _ref;
+  (0, React.useLayoutEffect)(() => {
+    Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
+  }, []);
+  return /*#__PURE__*/React.createElement("div", {
+    id: id,
+    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
+    style: _objectSpread(_objectSpread({}, style), {}, {
+      '--gradient-height': height
+    })
+  });
+};
+
+BackgroundGradient.propTypes = {
+  /**
+   * The HTML id for this element
+   */
+  id: _propTypes.default.string,
+
+  /**
+   * The HTML class names for this element
+   */
+  className: _propTypes.default.string,
+
+  /**
+   * The React-written, css properties for this element.
+   */
+  style: _propTypes.default.objectOf(_propTypes.default.string),
+
+  /**
+   * The height of the shape.
+   */
+  height: _propTypes.default.string
+};
+BackgroundGradient.defaultProps = {// someProp: false,
+};
+var _default = BackgroundGradient;
+exports.default = _default;

package/dist/cjs/a/BackgroundGradient/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "BackgroundGradient", {
+  enumerable: true,
+  get: function get() {
+    return _BackgroundGradient.default;
+  }
+});
+
+var _BackgroundGradient = _interopRequireDefault(require("./BackgroundGradient"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/dist/cjs/a/BackgroundGradient/styles.scss

@@ -0,0 +1,18 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+@use "@pareto-engineering/bem";
+
+.#{bem.$base}.background-gradient{
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: var(--vertical-align);
+    width: 100%;
+    height: var(--gradient-height);
+    background-image: linear-gradient(transparent, var(--y) 25%, var(--light-y) 75%, transparent);
+    opacity: .8;
+}
+
+
+

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

@@ -57,6 +57,8 @@ var Shapes = _ref => {
 
   }, shape === 'triangle' && /*#__PURE__*/React.createElement("div", {
     className: "triangle"
+  }), shape === 'inverted-triangle' && /*#__PURE__*/React.createElement("div", {
+    className: "inverted-triangle"
   }), shape === 'half-ellipses' && /*#__PURE__*/React.createElement("div", {
     className: "half-ellipses"
   }, /*#__PURE__*/React.createElement("div", {
@@ -109,6 +111,12 @@ var Shapes = _ref => {
     className: "ellipse-one"
   }), /*#__PURE__*/React.createElement("div", {
     className: "ellipse-two"
+  })), shape === 'intersecting-circles' && /*#__PURE__*/React.createElement("div", {
+    className: "intersecting-circles"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "left"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "right"
   })));
 };
 
@@ -146,7 +154,7 @@ Shapes.propTypes = {
   /**
    * The options of a shape to use
    */
-  shape: _propTypes.default.oneOf(['triangle', 'ellipse', 'half-ellipse', 'half-ellipses', 'spiral', 'diamonds', 'circle', 'half-circle', 'ellipses', 'rectangles', 'rotated-ellipses']),
+  shape: _propTypes.default.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.

package/dist/cjs/a/Shapes/styles.scss

@@ -29,6 +29,14 @@ $default-shapes-opacity:.8;
       width: var(--shape-height, #{$default-triangle-height});
     }
 
+    .inverted-triangle {
+      background-image: linear-gradient(var(--dark-y), transparent);
+      clip-path: polygon(50% 0, 0 100%, 100% 100%);
+      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;
@@ -218,4 +226,30 @@ $default-shapes-opacity:.8;
         clip-path: ellipse(50% 35% at 50% 50%);
       }
     }
-}
+
+    .intersecting-circles {
+      height: var(--shape-height, #{$default-circle-height});
+      opacity: $default-shapes-opacity;
+      width: calc(var(--shape-height, #{$default-circle-height}) * 2);
+      display: grid;
+      grid-template-columns: repeat(7, 1fr);
+      position: relative;
+
+      > * {
+        border-radius: 50%;
+        height: 100%;
+        width: 100%;
+        position: absolute;
+        opacity: .8;
+      }
+
+      .left {
+        background-image: linear-gradient(to right ,var(--dark-y),var(--y), transparent);
+        grid-column: 1 / 5;
+      }
+      .right {
+        background-image: linear-gradient(to left, var(--dark-y), var(--y), transparent);
+        grid-column: 4 / 8;
+      }
+    }
+}

package/dist/cjs/a/index.js

@@ -153,6 +153,12 @@ Object.defineProperty(exports, "OvalIllustration", {
     return _OvalIllustration.OvalIllustration;
   }
 });
+Object.defineProperty(exports, "BackgroundGradient", {
+  enumerable: true,
+  get: function get() {
+    return _BackgroundGradient.BackgroundGradient;
+  }
+});
 
 var _SVG = require("./SVG");
 
@@ -196,4 +202,6 @@ var _Timestamp = require("./Timestamp");
 
 var _Shapes = require("./Shapes");
 
-var _OvalIllustration = require("./OvalIllustration");
+var _OvalIllustration = require("./OvalIllustration");
+
+var _BackgroundGradient = require("./BackgroundGradient");

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

@@ -57,7 +57,7 @@ var Section = _ref => {
   }, otherProps), children, backgroundShape && /*#__PURE__*/React.createElement(_a.Shapes, {
     verticalAlign: backgroundVerticalAlign,
     horizontalAlign: backgroundHorizontalAlign,
-    backgroundOverflow: backgroundOverflow,
+    overflow: backgroundOverflow,
     height: backgroundHeight,
     shape: backgroundShape
   }));

package/dist/es/a/BackgroundGradient/BackgroundGradient.js

@@ -0,0 +1,55 @@
+/* @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 = 'background-gradient';
+/**
+ * This is the component description.
+ */
+
+const BackgroundGradient = ({
+  id,
+  className: userClassName,
+  style,
+  height // ...otherProps
+
+}) => {
+  useLayoutEffect(() => {
+    import("./styles.scss");
+  }, []);
+  return /*#__PURE__*/React.createElement("div", {
+    id: id,
+    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
+    style: { ...style,
+      '--gradient-height': height
+    }
+  });
+};
+
+BackgroundGradient.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
+};
+BackgroundGradient.defaultProps = {// someProp: false,
+};
+export default BackgroundGradient;

package/dist/es/a/BackgroundGradient/index.js

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

package/dist/es/a/BackgroundGradient/styles.scss

@@ -0,0 +1,18 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+@use "@pareto-engineering/bem";
+
+.#{bem.$base}.background-gradient{
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: var(--vertical-align);
+    width: 100%;
+    height: var(--gradient-height);
+    background-image: linear-gradient(transparent, var(--y) 25%, var(--light-y) 75%, transparent);
+    opacity: .8;
+}
+
+
+

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

@@ -36,6 +36,8 @@ const Shapes = ({
 
   }, shape === 'triangle' && /*#__PURE__*/React.createElement("div", {
     className: "triangle"
+  }), shape === 'inverted-triangle' && /*#__PURE__*/React.createElement("div", {
+    className: "inverted-triangle"
   }), shape === 'half-ellipses' && /*#__PURE__*/React.createElement("div", {
     className: "half-ellipses"
   }, /*#__PURE__*/React.createElement("div", {
@@ -88,6 +90,12 @@ const Shapes = ({
     className: "ellipse-one"
   }), /*#__PURE__*/React.createElement("div", {
     className: "ellipse-two"
+  })), shape === 'intersecting-circles' && /*#__PURE__*/React.createElement("div", {
+    className: "intersecting-circles"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "left"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "right"
   })));
 };
 
@@ -125,7 +133,7 @@ Shapes.propTypes = {
   /**
    * 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']),
+  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.

package/dist/es/a/Shapes/styles.scss

@@ -29,6 +29,14 @@ $default-shapes-opacity:.8;
       width: var(--shape-height, #{$default-triangle-height});
     }
 
+    .inverted-triangle {
+      background-image: linear-gradient(var(--dark-y), transparent);
+      clip-path: polygon(50% 0, 0 100%, 100% 100%);
+      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;
@@ -218,4 +226,30 @@ $default-shapes-opacity:.8;
         clip-path: ellipse(50% 35% at 50% 50%);
       }
     }
-}
+
+    .intersecting-circles {
+      height: var(--shape-height, #{$default-circle-height});
+      opacity: $default-shapes-opacity;
+      width: calc(var(--shape-height, #{$default-circle-height}) * 2);
+      display: grid;
+      grid-template-columns: repeat(7, 1fr);
+      position: relative;
+
+      > * {
+        border-radius: 50%;
+        height: 100%;
+        width: 100%;
+        position: absolute;
+        opacity: .8;
+      }
+
+      .left {
+        background-image: linear-gradient(to right ,var(--dark-y),var(--y), transparent);
+        grid-column: 1 / 5;
+      }
+      .right {
+        background-image: linear-gradient(to left, var(--dark-y), var(--y), transparent);
+        grid-column: 4 / 8;
+      }
+    }
+}

package/dist/es/a/index.js

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

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

@@ -33,7 +33,7 @@ const Section = ({
   }, otherProps), children, backgroundShape && /*#__PURE__*/React.createElement(Shapes, {
     verticalAlign: backgroundVerticalAlign,
     horizontalAlign: backgroundHorizontalAlign,
-    backgroundOverflow: backgroundOverflow,
+    overflow: backgroundOverflow,
     height: backgroundHeight,
     shape: backgroundShape
   }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pareto-engineering/design-system",
-  "version": "2.0.0-alpha.11",
+  "version": "2.0.0-alpha.12",
   "description": "",
   "main": "dist/cjs/index.js",
   "module": "dist/es/index.js",

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

@@ -63,6 +63,27 @@ exports[`Storyshots a/AnimatedCounter Before And After 1`] = `
 </div>
 `;
 
+exports[`Storyshots a/BackgroundGradient Base 1`] = `
+<div
+  className="y-background4"
+  style={
+    Object {
+      "height": "700px",
+      "position": "relative",
+    }
+  }
+>
+  <div
+    className="base background-gradient"
+    style={
+      Object {
+        "--gradient-height": "50em",
+      }
+    }
+  />
+</div>
+`;
+
 exports[`Storyshots a/ContentCard Content After 1`] = `
 <div
   className="u1 p-u"
@@ -1442,6 +1463,71 @@ exports[`Storyshots a/Shapes Half Ellipses 1`] = `
 </div>
 `;
 
+exports[`Storyshots a/Shapes Intersecting Circles 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": "30em",
+        "--vertical-align": "center",
+      }
+    }
+  >
+    <div
+      className="intersecting-circles"
+    >
+      <div
+        className="left"
+      />
+      <div
+        className="right"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots a/Shapes Inverted Triangle 1`] = `
+<div
+  className="y-background6 b-light-y"
+  style={
+    Object {
+      "height": "1000px",
+      "overflow": "hidden",
+      "position": "relative",
+    }
+  }
+>
+  <div
+    className="base shapes"
+    style={
+      Object {
+        "--horizontal-align": "center",
+        "--overflow": "hidden",
+        "--shape-height": "30em",
+        "--vertical-align": "flex-end",
+      }
+    }
+  >
+    <div
+      className="inverted-triangle"
+    />
+  </div>
+</div>
+`;
+
 exports[`Storyshots a/Shapes Rectangles 1`] = `
 <div
   className="y-background5 b-light-y"

package/src/stories/a/BackgroundGradient.stories.jsx

@@ -0,0 +1,40 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { BackgroundGradient } from 'ui'
+
+export default {
+  title        :'a/BackgroundGradient',
+  component    :BackgroundGradient,
+  subcomponents:{
+    // Item:BackgroundGradient.Item
+  },
+  decorators:[
+    // storyfn => <div className="">{ storyfn() }</div>,
+  ],
+  argTypes:{
+    verticalAlign:{ control: 'select' },
+    height       :{ control: 'text' },
+    color        :{ control: 'text' },
+  },
+}
+
+// eslint-disable-next-line react/prop-types
+const Template = ({ color, ...rest }) => (
+  <div
+    className={`y-${color}`}
+    style={{
+      position:'relative',
+      height  :'700px',
+    }}
+  >
+    <BackgroundGradient {...rest} />
+  </div>
+)
+
+export const Base = Template.bind({})
+Base.args = {
+  height       :'50em',
+  verticalAlign:'center',
+  color        :'background4',
+}

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

@@ -42,6 +42,15 @@ Triangle.args = {
   shape          :'triangle',
 }
 
+export const InvertedTriangle = Template.bind({})
+InvertedTriangle.args = {
+  height         :'30em',
+  verticalAlign  :'flex-end',
+  horizontalAlign:'center',
+  color          :'background6',
+  shape          :'inverted-triangle',
+}
+
 export const HalfEllipses = Template.bind({})
 HalfEllipses.args = {
   height       :'25em',
@@ -123,3 +132,12 @@ RotatedEllipses.args = {
   color          :'background5',
   shape          :'rotated-ellipses',
 }
+
+export const IntersectingCircles = Template.bind({})
+IntersectingCircles.args = {
+  height         :'30em',
+  verticalAlign  :'center',
+  horizontalAlign:'center',
+  color          :'background5',
+  shape          :'intersecting-circles',
+}

package/src/ui/a/BackgroundGradient/BackgroundGradient.jsx

@@ -0,0 +1,76 @@
+/* @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 = 'background-gradient'
+
+/**
+ * This is the component description.
+ */
+const BackgroundGradient = ({
+  id,
+  className:userClassName,
+  style,
+  height,
+  // ...otherProps
+}) => {
+  useLayoutEffect(() => {
+    import('./styles.scss')
+  }, [])
+
+  return (
+    <div
+      id={id}
+      className={[
+
+        baseClassName,
+
+        componentClassName,
+        userClassName,
+      ]
+        .filter((e) => e)
+        .join(' ')}
+      style={{
+        ...style,
+        '--gradient-height':height,
+      }}
+    />
+  )
+}
+
+BackgroundGradient.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,
+}
+
+BackgroundGradient.defaultProps = {
+  // someProp: false,
+}
+
+export default BackgroundGradient

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

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

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

@@ -0,0 +1,18 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+@use "@pareto-engineering/bem";
+
+.#{bem.$base}.background-gradient{
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: var(--vertical-align);
+    width: 100%;
+    height: var(--gradient-height);
+    background-image: linear-gradient(transparent, var(--y) 25%, var(--light-y) 75%, transparent);
+    opacity: .8;
+}
+
+
+

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

@@ -54,6 +54,8 @@ const Shapes = ({
     >
       { shape === 'triangle'
         && <div className="triangle" />}
+      { shape === 'inverted-triangle'
+        && <div className="inverted-triangle" />}
       { shape === 'half-ellipses'
         && (
           <div className="half-ellipses">
@@ -105,6 +107,12 @@ const Shapes = ({
         <div className="ellipse-two" />
       </div>
       )}
+      {shape === 'intersecting-circles' && (
+      <div className="intersecting-circles">
+        <div className="left" />
+        <div className="right" />
+      </div>
+      )}
     </div>
   )
 }
@@ -163,6 +171,8 @@ Shapes.propTypes = {
     'ellipses',
     'rectangles',
     'rotated-ellipses',
+    'inverted-triangle',
+    'intersecting-circles',
   ]),
 
   /**

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

@@ -29,6 +29,14 @@ $default-shapes-opacity:.8;
       width: var(--shape-height, #{$default-triangle-height});
     }
 
+    .inverted-triangle {
+      background-image: linear-gradient(var(--dark-y), transparent);
+      clip-path: polygon(50% 0, 0 100%, 100% 100%);
+      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;
@@ -218,4 +226,30 @@ $default-shapes-opacity:.8;
         clip-path: ellipse(50% 35% at 50% 50%);
       }
     }
-}
+
+    .intersecting-circles {
+      height: var(--shape-height, #{$default-circle-height});
+      opacity: $default-shapes-opacity;
+      width: calc(var(--shape-height, #{$default-circle-height}) * 2);
+      display: grid;
+      grid-template-columns: repeat(7, 1fr);
+      position: relative;
+
+      > * {
+        border-radius: 50%;
+        height: 100%;
+        width: 100%;
+        position: absolute;
+        opacity: .8;
+      }
+
+      .left {
+        background-image: linear-gradient(to right ,var(--dark-y),var(--y), transparent);
+        grid-column: 1 / 5;
+      }
+      .right {
+        background-image: linear-gradient(to left, var(--dark-y), var(--y), transparent);
+        grid-column: 4 / 8;
+      }
+    }
+}

package/src/ui/a/index.js

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

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

@@ -45,7 +45,7 @@ const Section = ({
         <Shapes
           verticalAlign={backgroundVerticalAlign}
           horizontalAlign={backgroundHorizontalAlign}
-          backgroundOverflow={backgroundOverflow}
+          overflow={backgroundOverflow}
           height={backgroundHeight}
           shape={backgroundShape}
         />