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

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

@@ -21,7 +21,7 @@ $default-shapes-opacity:.8;
     width: 100%;
 
     .triangle {
-      background-image: linear-gradient(var(--light-y), var(--dark-y));
+      background-image: linear-gradient(transparent, var(--dark-y));
       clip-path: polygon(0 0, 50% 100%, 100% 0);
       height: calc(var(--shape-height, #{$default-triangle-height}) * 0.86);
       opacity: $default-shapes-opacity;

package/dist/cjs/a/index.js

@@ -141,6 +141,12 @@ Object.defineProperty(exports, "Timestamp", {
     return _Timestamp.Timestamp;
   }
 });
+Object.defineProperty(exports, "Shapes", {
+  enumerable: true,
+  get: function get() {
+    return _Shapes.Shapes;
+  }
+});
 
 var _SVG = require("./SVG");
 
@@ -180,4 +186,6 @@ var _ContentCard = require("./ContentCard");
 
 var _DotInfo = require("./DotInfo");
 
-var _Timestamp = require("./Timestamp");
+var _Timestamp = require("./Timestamp");
+
+var _Shapes = require("./Shapes");

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

@@ -11,9 +11,11 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _bem = _interopRequireDefault(require("@pareto-engineering/bem"));
 
+var _a = require("../../../../a");
+
 var _usePage = _interopRequireDefault(require("../../usePage"));
 
-var _excluded = ["id", "className", "style", "children"];
+var _excluded = ["id", "className", "style", "children", "backgroundShape", "backgroundPin", "backgroundHeight"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -27,7 +29,6 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
-// Local Definitions
 var baseClassName = _bem.default.base;
 var componentClassName = 'section';
 
@@ -36,7 +37,10 @@ var Section = _ref => {
     id: userId,
     className: userClassName,
     style,
-    children
+    children,
+    backgroundShape,
+    backgroundPin,
+    backgroundHeight
   } = _ref,
       otherProps = _objectWithoutProperties(_ref, _excluded);
 
@@ -48,7 +52,11 @@ var Section = _ref => {
     id: sectionId,
     className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
     style: style
-  }, otherProps), children);
+  }, otherProps), children, backgroundShape && /*#__PURE__*/React.createElement(_a.Shapes, {
+    pin: backgroundPin,
+    height: backgroundHeight,
+    shape: backgroundShape
+  }));
 };
 
 Section.propTypes = {
@@ -70,7 +78,22 @@ Section.propTypes = {
   /**
    *  The children JSX
    */
-  children: _propTypes.default.node
+  children: _propTypes.default.node,
+
+  /**
+   * The background shape to use for this section.
+   */
+  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.
+   */
+  backgroundPin: _propTypes.default.oneOf(['flex-start', 'center', 'flex-end']),
+
+  /**
+   * The background height to use for if the background shape is set.
+   */
+  backgroundHeight: _propTypes.default.string
 };
 Section.defaultProps = {// someProp:false
 };

package/dist/cjs/b/Page/styles.scss

@@ -2,9 +2,15 @@
 
 @use "@pareto-engineering/bem";
 
-/*
+
 .#{bem.$base}.page{
+    .#{bem.$base}.section {
+        position: relative;
 
-} */
+        > *:not(:last-child) {
+            z-index: 1;
+        }
+    }
+}
 
 

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

@@ -21,7 +21,7 @@ $default-shapes-opacity:.8;
     width: 100%;
 
     .triangle {
-      background-image: linear-gradient(var(--light-y), var(--dark-y));
+      background-image: linear-gradient(transparent, var(--dark-y));
       clip-path: polygon(0 0, 50% 100%, 100% 0);
       height: calc(var(--shape-height, #{$default-triangle-height}) * 0.86);
       opacity: $default-shapes-opacity;

package/dist/es/a/index.js

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

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

@@ -3,9 +3,10 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 /* @pareto-engineering/generator-front 1.0.0 */
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import styleNames from '@pareto-engineering/bem';
-import usePage from "../../usePage"; // Local Definitions
+import styleNames from '@pareto-engineering/bem'; // Local Definitions
 
+import { Shapes } from "../../../../a";
+import usePage from "../../usePage";
 const baseClassName = styleNames.base;
 const componentClassName = 'section';
 
@@ -14,6 +15,9 @@ const Section = ({
   className: userClassName,
   style,
   children,
+  backgroundShape,
+  backgroundPin,
+  backgroundHeight,
   ...otherProps
 }) => {
   const {
@@ -24,7 +28,11 @@ const Section = ({
     id: sectionId,
     className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
     style: style
-  }, otherProps), children);
+  }, otherProps), children, backgroundShape && /*#__PURE__*/React.createElement(Shapes, {
+    pin: backgroundPin,
+    height: backgroundHeight,
+    shape: backgroundShape
+  }));
 };
 
 Section.propTypes = {
@@ -46,7 +54,22 @@ Section.propTypes = {
   /**
    *  The children JSX
    */
-  children: PropTypes.node
+  children: PropTypes.node,
+
+  /**
+   * The background shape to use for this section.
+   */
+  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.
+   */
+  backgroundPin: PropTypes.oneOf(['flex-start', 'center', 'flex-end']),
+
+  /**
+   * The background height to use for if the background shape is set.
+   */
+  backgroundHeight: PropTypes.string
 };
 Section.defaultProps = {// someProp:false
 };

package/dist/es/b/Page/styles.scss

@@ -2,9 +2,15 @@
 
 @use "@pareto-engineering/bem";
 
-/*
+
 .#{bem.$base}.page{
+    .#{bem.$base}.section {
+        position: relative;
 
-} */
+        > *:not(:last-child) {
+            z-index: 1;
+        }
+    }
+}
 
 

package/package.json

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

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

@@ -1146,6 +1146,323 @@ exports[`Storyshots a/SVG Stroke 1`] = `
 </svg>
 `;
 
+exports[`Storyshots a/Shapes Circle 1`] = `
+<div
+  className="y-background5 b-light-y"
+  style={
+    Object {
+      "height": "1000px",
+      "overflow": "hidden",
+      "position": "relative",
+    }
+  }
+>
+  <div
+    className="base shapes"
+    style={
+      Object {
+        "--pin": "flex-end",
+        "--shape-height": "30em",
+      }
+    }
+  >
+    <div
+      className="circle"
+    />
+  </div>
+</div>
+`;
+
+exports[`Storyshots a/Shapes Diamonds 1`] = `
+<div
+  className="y-background4 b-light-y"
+  style={
+    Object {
+      "height": "1000px",
+      "overflow": "hidden",
+      "position": "relative",
+    }
+  }
+>
+  <div
+    className="base shapes"
+    style={
+      Object {
+        "--pin": "flex-end",
+        "--shape-height": "30em",
+      }
+    }
+  >
+    <div
+      className="diamonds"
+    >
+      <div
+        className="top-right"
+      />
+      <div
+        className="bottom-left"
+      />
+      <div
+        className="bottom-right"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots a/Shapes Ellipse 1`] = `
+<div
+  className="y-main3 b-light-y"
+  style={
+    Object {
+      "height": "1000px",
+      "overflow": "hidden",
+      "position": "relative",
+    }
+  }
+>
+  <div
+    className="base shapes"
+    style={
+      Object {
+        "--pin": "flex-end",
+        "--shape-height": "30em",
+      }
+    }
+  >
+    <div
+      className="ellipse"
+    />
+  </div>
+</div>
+`;
+
+exports[`Storyshots a/Shapes Ellipses 1`] = `
+<div
+  className="y-background4 b-light-y"
+  style={
+    Object {
+      "height": "1000px",
+      "overflow": "hidden",
+      "position": "relative",
+    }
+  }
+>
+  <div
+    className="base shapes"
+    style={
+      Object {
+        "--pin": "flex-end",
+        "--shape-height": "30em",
+      }
+    }
+  >
+    <div
+      className="ellipses"
+    >
+      <div
+        className="first"
+      />
+      <div
+        className="second"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots a/Shapes Half Circle 1`] = `
+<div
+  className="y-background4 b-light-y"
+  style={
+    Object {
+      "height": "1000px",
+      "overflow": "hidden",
+      "position": "relative",
+    }
+  }
+>
+  <div
+    className="base shapes"
+    style={
+      Object {
+        "--pin": "flex-end",
+        "--shape-height": "30em",
+      }
+    }
+  >
+    <div
+      className="half-circle"
+    />
+  </div>
+</div>
+`;
+
+exports[`Storyshots a/Shapes Half Ellipse 1`] = `
+<div
+  className="y-background3 b-light-y"
+  style={
+    Object {
+      "height": "1000px",
+      "overflow": "hidden",
+      "position": "relative",
+    }
+  }
+>
+  <div
+    className="base shapes"
+    style={
+      Object {
+        "--pin": "flex-end",
+        "--shape-height": "25em",
+      }
+    }
+  >
+    <div
+      className="half-ellipse"
+    />
+  </div>
+</div>
+`;
+
+exports[`Storyshots a/Shapes Half Ellipses 1`] = `
+<div
+  className="y-background3 b-light-y"
+  style={
+    Object {
+      "height": "1000px",
+      "overflow": "hidden",
+      "position": "relative",
+    }
+  }
+>
+  <div
+    className="base shapes"
+    style={
+      Object {
+        "--pin": "flex-end",
+        "--shape-height": "25em",
+      }
+    }
+  >
+    <div
+      className="half-ellipses"
+    >
+      <div
+        className="up"
+      />
+      <div
+        className="down"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots a/Shapes Rectangles 1`] = `
+<div
+  className="y-background5 b-light-y"
+  style={
+    Object {
+      "height": "1000px",
+      "overflow": "hidden",
+      "position": "relative",
+    }
+  }
+>
+  <div
+    className="base shapes"
+    style={
+      Object {
+        "--pin": "flex-end",
+        "--shape-height": "30em",
+      }
+    }
+  >
+    <div
+      className="rectangles"
+    >
+      <div
+        className="top"
+      />
+      <div
+        className="center"
+      />
+      <div
+        className="bottom"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots a/Shapes Spiral 1`] = `
+<div
+  className="y-background6 b-light-y"
+  style={
+    Object {
+      "height": "1000px",
+      "overflow": "hidden",
+      "position": "relative",
+    }
+  }
+>
+  <div
+    className="base shapes"
+    style={
+      Object {
+        "--pin": "center",
+        "--shape-height": "70em",
+      }
+    }
+  >
+    <div
+      className="spiral"
+    >
+      <div
+        className="circle-one"
+      />
+      <div
+        className="circle-two"
+      />
+      <div
+        className="circle-three"
+      />
+      <div
+        className="circle-four"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots a/Shapes Triangle 1`] = `
+<div
+  className="y-background6 b-light-y"
+  style={
+    Object {
+      "height": "1000px",
+      "overflow": "hidden",
+      "position": "relative",
+    }
+  }
+>
+  <div
+    className="base shapes"
+    style={
+      Object {
+        "--pin": "center",
+        "--shape-height": "30em",
+      }
+    }
+  >
+    <div
+      className="triangle"
+    />
+  </div>
+</div>
+`;
+
 exports[`Storyshots a/SiteContext Base 1`] = `"Sample SiteContext"`;
 
 exports[`Storyshots a/Spinner Base 1`] = `
@@ -5985,6 +6302,60 @@ exports[`Storyshots b/Page Item Type 1`] = `
 </main>
 `;
 
+exports[`Storyshots b/Page Sections With Background 1`] = `
+<main
+  className="base page"
+  id="with-sections"
+>
+  <section
+    className="base section y-success b-light-y"
+    id="with-sections_s1"
+    style={
+      Object {
+        "alignItems": "center",
+        "display": "flex",
+        "height": "30em",
+        "justifyContent": "center",
+      }
+    }
+  >
+    <figure
+      className="base quote x-paragraph"
+    >
+      <blockquote
+        className="blockquote uc"
+      >
+        <p
+          className="quotation c-x md-s0 s-1"
+        >
+          Pareto was like having a full-time employee without having to hire somebody. That’s how I would explain it. An on-call, on-demand full-time employee.
+        </p>
+      </blockquote>
+      <figcaption
+        className="figcaption"
+      >
+        <cite>
+          Austen Spoonts
+        </cite>
+      </figcaption>
+    </figure>
+    <div
+      className="base shapes"
+      style={
+        Object {
+          "--pin": "center",
+          "--shape-height": "30em",
+        }
+      }
+    >
+      <div
+        className="triangle"
+      />
+    </div>
+  </section>
+</main>
+`;
+
 exports[`Storyshots b/Page With Sections 1`] = `
 <main
   className="base page"

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

@@ -0,0 +1,112 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { Shapes } from 'ui'
+
+export default {
+  title        :'a/Shapes',
+  component    :Shapes,
+  subcomponents:{
+    // Item:Shapes.Item
+  },
+  decorators:[
+    // storyfn => <div className="">{ storyfn() }</div>,
+  ],
+  argTypes:{
+    pin   :{ control: 'select' },
+    shape :{ control: 'select' },
+    height:{ control: 'text' },
+    color :{ control: 'text' },
+  },
+}
+
+// eslint-disable-next-line react/prop-types
+const Template = ({ color, ...rest }) => (
+  <div
+    className={`y-${color} b-light-y`}
+    style={{
+      height:'1000px', position:'relative', overflow:'hidden',
+    }}
+  >
+    <Shapes {...rest} />
+  </div>
+)
+
+export const Triangle = Template.bind({})
+Triangle.args = {
+  height:'30em',
+  pin   :'center',
+  color :'background6',
+  shape :'triangle',
+}
+
+export const HalfEllipses = Template.bind({})
+HalfEllipses.args = {
+  height:'25em',
+  pin   :'flex-end',
+  color :'background3',
+  shape :'half-ellipses',
+}
+
+export const Ellipse = Template.bind({})
+Ellipse.args = {
+  height:'30em',
+  pin   :'flex-end',
+  color :'main3',
+  shape :'ellipse',
+}
+
+export const HalfEllipse = Template.bind({})
+HalfEllipse.args = {
+  height:'25em',
+  pin   :'flex-end',
+  color :'background3',
+  shape :'half-ellipse',
+}
+
+export const Diamonds = Template.bind({})
+Diamonds.args = {
+  height:'30em',
+  pin   :'flex-end',
+  color :'background4',
+  shape :'diamonds',
+}
+
+export const Rectangles = Template.bind({})
+Rectangles.args = {
+  height:'30em',
+  pin   :'flex-end',
+  color :'background5',
+  shape :'rectangles',
+}
+
+export const Circle = Template.bind({})
+Circle.args = {
+  height:'30em',
+  pin   :'flex-end',
+  color :'background5',
+  shape :'circle',
+}
+
+export const HalfCircle = Template.bind({})
+HalfCircle.args = {
+  height:'30em',
+  pin   :'flex-end',
+  color :'background4',
+  shape :'half-circle',
+}
+
+export const Ellipses = Template.bind({})
+Ellipses.args = {
+  height:'30em',
+  pin   :'flex-end',
+  color :'background4',
+  shape :'ellipses',
+}
+
+export const Spiral = Template.bind({})
+Spiral.args = {
+  height:'70em',
+  color :'background6',
+  shape :'spiral',
+}

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

@@ -1,7 +1,7 @@
 /* @pareto-engineering/generator-front 1.0.0 */
 import * as React from 'react'
 
-import { Page } from 'ui'
+import { Page, Quote } from 'ui'
 
 export default {
   title        :'b/Page',
@@ -57,3 +57,28 @@ export const WithSections = () => (
     </Page.Section>
   </Page>
 )
+
+export const SectionsWithBackground = () => (
+  <Page
+    id="with-sections"
+  >
+    <Page.Section
+      id="s1"
+      backgroundShape="triangle"
+      backgroundHeight="30em"
+      backgroundPin="center"
+      className="y-success b-light-y"
+      style={{
+        height        :'30em',
+        display       :'flex',
+        justifyContent:'center',
+        alignItems    :'center',
+      }}
+    >
+      <Quote author="Austen Spoonts" color="paragraph">
+        Pareto was like having a full-time employee without having to hire somebody.
+        That’s how I would explain it. An on-call, on-demand full-time employee.
+      </Quote>
+    </Page.Section>
+  </Page>
+)

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

@@ -0,0 +1,154 @@
+/* @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,
+  pin,
+  shape,
+  height,
+  // ...otherProps
+}) => {
+  useLayoutEffect(() => {
+    import('./styles.scss')
+  }, [])
+
+  return (
+    <div
+      id={id}
+      className={[
+
+        baseClassName,
+
+        componentClassName,
+        userClassName,
+      ]
+        .filter((e) => e)
+        .join(' ')}
+      style={{
+        ...style,
+        '--pin'         :pin,
+        '--shape-height':height,
+      }}
+      // {...otherProps}
+    >
+      { shape === 'triangle'
+        && <div className="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>
+      )}
+    </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,
+
+  /**
+   * Where to pin the shapes
+   */
+  pin: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',
+  ]),
+}
+
+Shapes.defaultProps = {
+  pin  :'center',
+  shape:'triangle',
+}
+
+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'

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

@@ -0,0 +1,199 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+
+@use "@pareto-engineering/bem";
+
+$default-ellipse-height:50em;
+$default-diamond-height:40em;
+$default-circle-height:50em;
+$default-triangle-height:40em;
+$default-rectangle-height:50em;
+$default-shapes-opacity:.8;
+
+.#{bem.$base}.shapes {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: var(--pin);
+    align-items: center;
+    height: 100%;
+    width: 100%;
+
+    .triangle {
+      background-image: linear-gradient(transparent, var(--dark-y));
+      clip-path: polygon(0 0, 50% 100%, 100% 0);
+      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;
+      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%);
+        height: 50%;
+      }
+
+      .down {
+        background-image: linear-gradient(to top, var(--light-y), var(--y));
+        clip-path: ellipse(40% 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%);
+      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);
+    }
+
+    .diamonds {
+      height: var(--shape-height, #{$default-diamond-height});
+      opacity: $default-shapes-opacity;
+      position: relative;
+      width: var(--shape-height, #{$default-diamond-height});
+
+      .top-right {
+        background-image: linear-gradient(to right, var(--dark-y), var(--y));
+        clip-path: polygon(100% 100%, 0 0, 100% 0);
+        height: 100%;
+        position: absolute;
+        width: 100%;
+      }
+
+      .bottom-left {
+        background-image: linear-gradient(to left, var(--dark-y), var(--y));
+        clip-path: polygon(0 100%, 0 0, 100% 100%);
+        height: 100%;
+        opacity: .95;
+        position: absolute;
+        width: 100%;
+        z-index: 1;
+      }
+
+      .bottom-right {
+        background-image: linear-gradient(to bottom, var(--dark-y), var(--y));
+        clip-path: polygon(100% 100%, 100% 0, 0 100%);
+        height: 100%;
+        position: absolute;
+        width: 100%;
+      }
+    }
+
+    .rectangles {
+      display: grid;
+      grid-template-rows: repeat(3, 1fr);
+      height: var(--shape-height, #{$default-rectangle-height});
+      opacity: $default-shapes-opacity;
+      width: var(--shape-height, #{$default-rectangle-height});
+
+      .top {
+        background-image: linear-gradient(to right, var(--dark-y), var(--y));
+      }
+
+      .center {
+        background-image: linear-gradient(to left, var(--dark-y), var(--y));
+      }
+
+      .bottom {
+        background-image: linear-gradient(to right, var(--dark-y), var(--y));
+      }
+    }
+
+    .half-ellipse {
+      background-image: linear-gradient(var(--light-y), var(--dark-y));
+      clip-path: ellipse(50% 50% at 50% 0);
+      height: var(--shape-height, #{$default-ellipse-height});
+      opacity: $default-shapes-opacity;
+      width: calc(var(--shape-height, #{$default-ellipse-height}) * 2);
+    }
+
+    .circle {
+      background-image: linear-gradient(var(--light-y), var(--dark-y));
+      clip-path: circle(50% at 50% 50%);
+      height: var(--shape-height, #{$default-circle-height});
+      opacity: $default-shapes-opacity;
+      width: var(--shape-height, #{$default-circle-height});
+    }
+
+    .half-circle {
+      background: linear-gradient(var(--light-y) 30%, var(--dark-y) 100%);
+      clip-path: circle(50% at 50% 100%);
+      height: var(--shape-height, #{$default-circle-height});
+      opacity: $default-shapes-opacity;
+      width: calc(var(--shape-height, #{$default-circle-height}) * 2);
+    }
+
+    .ellipses {
+      height: var(--shape-height, #{$default-ellipse-height});
+      opacity: $default-shapes-opacity;
+      position: relative;
+      width: var(--shape-height, #{$default-ellipse-height});
+
+      .first {
+        background-image: linear-gradient(to top, var(--dark-y), var(--y), var(--light-y) 50%, transparent);
+        clip-path: ellipse(50% 20% at 50% 60%);
+        height: 100%;
+        position: absolute;
+        width: 100%;
+        z-index: 1;
+      }
+
+      .second {
+        background-image: linear-gradient(to bottom,var(--dark-y), var(--y), var(--light-y) 45%, transparent);
+        clip-path: ellipse(50% 20% at 50% 40%);
+        height: 100%;
+        position: absolute;
+        width: 100%;
+      }
+    }
+
+    .spiral {
+      height: var(--shape-height, #{$default-ellipse-height});
+      width: var(--shape-height, #{$default-ellipse-height});
+      opacity: $default-shapes-opacity;
+      position: relative;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      > * {
+        border-radius: 50%;
+        background: radial-gradient(ellipse at center bottom ,var(--dark-y) 10%, transparent 60%);
+        position: absolute;
+        opacity: .5;
+      }
+
+       .circle-one {
+        transform: rotate(45deg);
+        height: 55%;
+        width: 55%;
+      }
+
+       .circle-two {
+        height: 70%;
+        width: 70%;
+      }
+
+       .circle-three {
+        transform: rotate(-45deg);
+        height: 85%;
+        width: 85%;
+      }
+
+       .circle-four {
+        transform: rotate(-90deg);
+        height: 100%;
+        width: 100%;
+      }
+    }
+
+}

package/src/ui/a/index.js

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

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

@@ -3,9 +3,10 @@ import * as React from 'react'
 import PropTypes from 'prop-types'
 import styleNames from '@pareto-engineering/bem'
 
+// Local Definitions
+import { Shapes } from 'ui/a'
 import usePage from '../../usePage'
 
-// Local Definitions
 const baseClassName = styleNames.base
 const componentClassName = 'section'
 
@@ -14,6 +15,9 @@ const Section = ({
   className:userClassName,
   style,
   children,
+  backgroundShape,
+  backgroundPin,
+  backgroundHeight,
   ...otherProps
 }) => {
   const {
@@ -21,7 +25,6 @@ const Section = ({
   } = usePage()
 
   const sectionId = userId && `${pageId}_${userId}`
-
   return (
     <section
       id={sectionId}
@@ -36,6 +39,9 @@ const Section = ({
       {...otherProps}
     >
       {children}
+      {backgroundShape && (
+        <Shapes pin={backgroundPin} height={backgroundHeight} shape={backgroundShape} />
+      )}
     </section>
   )
 }
@@ -60,6 +66,32 @@ Section.propTypes = {
    *  The children JSX
    */
   children:PropTypes.node,
+
+  /**
+   * The background shape to use for this section.
+   */
+  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.
+   */
+  backgroundPin:PropTypes.oneOf(['flex-start', 'center', 'flex-end']),
+
+  /**
+   * The background height to use for if the background shape is set.
+   */
+  backgroundHeight:PropTypes.string,
 }
 
 Section.defaultProps = {

package/src/ui/b/Page/styles.scss

@@ -2,9 +2,15 @@
 
 @use "@pareto-engineering/bem";
 
-/*
+
 .#{bem.$base}.page{
+    .#{bem.$base}.section {
+        position: relative;
 
-} */
+        > *:not(:last-child) {
+            z-index: 1;
+        }
+    }
+}