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

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

@@ -5,8 +5,6 @@
     position: absolute;
     top: 0;
     left: 0;
-    display: flex;
-    flex-direction: column;
     justify-content: var(--vertical-align);
     width: 100%;
     height: var(--gradient-height);

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", "backgroundVerticalAlign", "backgroundHorizontalAlign", "backgroundHeight", "backgroundOverflow"];
+var _excluded = ["id", "className", "style", "children", "backgroundShape", "backgroundGradient", "backgroundGradientHeight", "backgroundVerticalAlign", "backgroundHorizontalAlign", "backgroundHeight", "backgroundOverflow"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -39,6 +39,8 @@ var Section = _ref => {
     style,
     children,
     backgroundShape,
+    backgroundGradient,
+    backgroundGradientHeight,
     backgroundVerticalAlign,
     backgroundHorizontalAlign,
     backgroundHeight,
@@ -60,6 +62,8 @@ var Section = _ref => {
     overflow: backgroundOverflow,
     height: backgroundHeight,
     shape: backgroundShape
+  }), backgroundGradient && /*#__PURE__*/React.createElement(_a.BackgroundGradient, {
+    height: backgroundGradientHeight
   }));
 };
 
@@ -107,7 +111,17 @@ Section.propTypes = {
   /**
    * The background overflow to use for if the background shape is set.
    */
-  backgroundOverflow: _propTypes.default.oneOf(['visible', 'hidden', 'scroll'])
+  backgroundOverflow: _propTypes.default.oneOf(['visible', 'hidden', 'scroll']),
+
+  /**
+   * The background gradient to use for if the background gradient is set.
+   */
+  backgroundGradient: _propTypes.default.bool,
+
+  /**
+   * The background gradient height to use for if the background gradient is set.
+   */
+  backgroundGradientHeight: _propTypes.default.string
 };
 Section.defaultProps = {// someProp:false
 };

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

@@ -5,8 +5,6 @@
     position: absolute;
     top: 0;
     left: 0;
-    display: flex;
-    flex-direction: column;
     justify-content: var(--vertical-align);
     width: 100%;
     height: var(--gradient-height);

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

@@ -5,7 +5,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import styleNames from '@pareto-engineering/bem'; // Local Definitions
 
-import { Shapes } from "../../../../a";
+import { Shapes, BackgroundGradient } from "../../../../a";
 import usePage from "../../usePage";
 const baseClassName = styleNames.base;
 const componentClassName = 'section';
@@ -16,6 +16,8 @@ const Section = ({
   style,
   children,
   backgroundShape,
+  backgroundGradient,
+  backgroundGradientHeight,
   backgroundVerticalAlign,
   backgroundHorizontalAlign,
   backgroundHeight,
@@ -36,6 +38,8 @@ const Section = ({
     overflow: backgroundOverflow,
     height: backgroundHeight,
     shape: backgroundShape
+  }), backgroundGradient && /*#__PURE__*/React.createElement(BackgroundGradient, {
+    height: backgroundGradientHeight
   }));
 };
 
@@ -83,7 +87,17 @@ Section.propTypes = {
   /**
    * The background overflow to use for if the background shape is set.
    */
-  backgroundOverflow: PropTypes.oneOf(['visible', 'hidden', 'scroll'])
+  backgroundOverflow: PropTypes.oneOf(['visible', 'hidden', 'scroll']),
+
+  /**
+   * The background gradient to use for if the background gradient is set.
+   */
+  backgroundGradient: PropTypes.bool,
+
+  /**
+   * The background gradient height to use for if the background gradient is set.
+   */
+  backgroundGradientHeight: PropTypes.string
 };
 Section.defaultProps = {// someProp:false
 };

package/package.json

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

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

@@ -7656,11 +7656,11 @@ exports[`Storyshots b/Page Item Type 1`] = `
 exports[`Storyshots b/Page Sections With Background 1`] = `
 <main
   className="base page"
-  id="with-sections"
+  id="with-background"
 >
   <section
     className="base section y-success b-light-y"
-    id="with-sections_s1"
+    id="with-background_s1"
     style={
       Object {
         "alignItems": "center",
@@ -7709,6 +7709,55 @@ exports[`Storyshots b/Page Sections With Background 1`] = `
 </main>
 `;
 
+exports[`Storyshots b/Page Sections With Background Gradient 1`] = `
+<main
+  className="base page"
+  id="with-background-gradient"
+>
+  <section
+    className="base section y-success"
+    id="with-background-gradient_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 background-gradient"
+      style={
+        Object {
+          "--gradient-height": "50em",
+        }
+      }
+    />
+  </section>
+</main>
+`;
+
 exports[`Storyshots b/Page With Sections 1`] = `
 <main
   className="base page"

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

@@ -34,7 +34,6 @@ const Template = ({ color, ...rest }) => (
 
 export const Base = Template.bind({})
 Base.args = {
-  height       :'50em',
-  verticalAlign:'center',
-  color        :'background4',
+  height:'50em',
+  color :'background4',
 }

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

@@ -60,7 +60,7 @@ export const WithSections = () => (
 
 export const SectionsWithBackground = () => (
   <Page
-    id="with-sections"
+    id="with-background"
   >
     <Page.Section
       id="s1"
@@ -83,3 +83,27 @@ export const SectionsWithBackground = () => (
     </Page.Section>
   </Page>
 )
+
+export const SectionsWithBackgroundGradient = () => (
+  <Page
+    id="with-background-gradient"
+  >
+    <Page.Section
+      id="s1"
+      backgroundGradient
+      backgroundGradientHeight="50em"
+      className="y-success"
+      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/BackgroundGradient/styles.scss

@@ -5,8 +5,6 @@
     position: absolute;
     top: 0;
     left: 0;
-    display: flex;
-    flex-direction: column;
     justify-content: var(--vertical-align);
     width: 100%;
     height: var(--gradient-height);

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

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types'
 import styleNames from '@pareto-engineering/bem'
 
 // Local Definitions
-import { Shapes } from 'ui/a'
+import { Shapes, BackgroundGradient } from 'ui/a'
 import usePage from '../../usePage'
 
 const baseClassName = styleNames.base
@@ -16,6 +16,8 @@ const Section = ({
   style,
   children,
   backgroundShape,
+  backgroundGradient,
+  backgroundGradientHeight,
   backgroundVerticalAlign,
   backgroundHorizontalAlign,
   backgroundHeight,
@@ -50,6 +52,11 @@ const Section = ({
           shape={backgroundShape}
         />
       )}
+      {backgroundGradient && (
+      <BackgroundGradient
+        height={backgroundGradientHeight}
+      />
+      )}
     </section>
   )
 }
@@ -109,6 +116,16 @@ Section.propTypes = {
    * The background overflow to use for if the background shape is set.
    */
   backgroundOverflow:PropTypes.oneOf(['visible', 'hidden', 'scroll']),
+
+  /**
+   * The background gradient to use for if the background gradient is set.
+   */
+  backgroundGradient:PropTypes.bool,
+
+  /**
+   * The background gradient height to use for if the background gradient is set.
+   */
+  backgroundGradientHeight:PropTypes.string,
 }
 
 Section.defaultProps = {