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

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

@@ -783,6 +783,39 @@ exports[`Storyshots a/LoadingCircle Base 1`] = `
 </div>
 `;
 
+exports[`Storyshots a/OvalIllustration With Background 1`] = `
+<div
+  className="base oval-illustration right"
+>
+  <div
+    className="oval-background y-background3"
+  />
+  <div
+    className="illustration"
+  >
+    <img
+      alt="illustration"
+      src="https://www.azernews.az/media/pictures/company_picture.jpg"
+    />
+  </div>
+</div>
+`;
+
+exports[`Storyshots a/OvalIllustration Without Background 1`] = `
+<div
+  className="base oval-illustration left"
+>
+  <div
+    className="illustration"
+  >
+    <img
+      alt="illustration"
+      src="https://www.azernews.az/media/pictures/company_picture.jpg"
+    />
+  </div>
+</div>
+`;
+
 exports[`Storyshots a/People Base 1`] = `
 <div
   className="x-background1 b-x v1 p-v"
@@ -1146,6 +1179,379 @@ 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 {
+        "--horizontal-align": "center",
+        "--overflow": "hidden",
+        "--shape-height": "30em",
+        "--vertical-align": "flex-end",
+      }
+    }
+  >
+    <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 {
+        "--horizontal-align": "center",
+        "--overflow": "hidden",
+        "--shape-height": "30em",
+        "--vertical-align": "flex-end",
+      }
+    }
+  >
+    <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 {
+        "--horizontal-align": "center",
+        "--overflow": "hidden",
+        "--shape-height": "30em",
+        "--vertical-align": "flex-end",
+      }
+    }
+  >
+    <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 {
+        "--horizontal-align": "center",
+        "--overflow": "hidden",
+        "--shape-height": "30em",
+        "--vertical-align": "flex-end",
+      }
+    }
+  >
+    <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 {
+        "--horizontal-align": "center",
+        "--overflow": "hidden",
+        "--shape-height": "30em",
+        "--vertical-align": "flex-end",
+      }
+    }
+  >
+    <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 {
+        "--horizontal-align": "center",
+        "--overflow": "hidden",
+        "--shape-height": "25em",
+        "--vertical-align": "flex-end",
+      }
+    }
+  >
+    <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 {
+        "--horizontal-align": "center",
+        "--overflow": "hidden",
+        "--shape-height": "25em",
+        "--vertical-align": "flex-end",
+      }
+    }
+  >
+    <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 {
+        "--horizontal-align": "center",
+        "--overflow": "hidden",
+        "--shape-height": "30em",
+        "--vertical-align": "flex-end",
+      }
+    }
+  >
+    <div
+      className="rectangles"
+    >
+      <div
+        className="top"
+      />
+      <div
+        className="center"
+      />
+      <div
+        className="bottom"
+      />
+    </div>
+  </div>
+</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"
+  style={
+    Object {
+      "height": "1000px",
+      "overflow": "hidden",
+      "position": "relative",
+    }
+  }
+>
+  <div
+    className="base shapes"
+    style={
+      Object {
+        "--horizontal-align": "center",
+        "--overflow": "hidden",
+        "--shape-height": "100em",
+        "--vertical-align": "center",
+      }
+    }
+  >
+    <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 {
+        "--horizontal-align": "center",
+        "--overflow": "hidden",
+        "--shape-height": "30em",
+        "--vertical-align": "flex-end",
+      }
+    }
+  >
+    <div
+      className="triangle"
+    />
+  </div>
+</div>
+`;
+
 exports[`Storyshots a/SiteContext Base 1`] = `"Sample SiteContext"`;
 
 exports[`Storyshots a/Spinner Base 1`] = `
@@ -5985,6 +6391,62 @@ 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 {
+          "--horizontal-align": "center",
+          "--overflow": "hidden",
+          "--shape-height": "30em",
+          "--vertical-align": "flex-end",
+        }
+      }
+    >
+      <div
+        className="triangle"
+      />
+    </div>
+  </section>
+</main>
+`;
+
 exports[`Storyshots b/Page With Sections 1`] = `
 <main
   className="base page"

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

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

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

@@ -0,0 +1,125 @@
+/* @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:{
+    verticalAlign  :{ control: 'select' },
+    horizontalAlign:{ 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',
+  verticalAlign  :'flex-end',
+  horizontalAlign:'center',
+  color          :'background6',
+  shape          :'triangle',
+}
+
+export const HalfEllipses = Template.bind({})
+HalfEllipses.args = {
+  height       :'25em',
+  verticalAlign:'flex-end',
+  color        :'background3',
+  shape        :'half-ellipses',
+}
+
+export const Ellipse = Template.bind({})
+Ellipse.args = {
+  height       :'30em',
+  verticalAlign:'flex-end',
+  color        :'main3',
+  shape        :'ellipse',
+}
+
+export const HalfEllipse = Template.bind({})
+HalfEllipse.args = {
+  height       :'25em',
+  verticalAlign:'flex-end',
+  color        :'background3',
+  shape        :'half-ellipse',
+}
+
+export const Diamonds = Template.bind({})
+Diamonds.args = {
+  height       :'30em',
+  verticalAlign:'flex-end',
+  color        :'background4',
+  shape        :'diamonds',
+}
+
+export const Rectangles = Template.bind({})
+Rectangles.args = {
+  height       :'30em',
+  verticalAlign:'flex-end',
+  color        :'background5',
+  shape        :'rectangles',
+}
+
+export const Circle = Template.bind({})
+Circle.args = {
+  height       :'30em',
+  verticalAlign:'flex-end',
+  color        :'background5',
+  shape        :'circle',
+}
+
+export const HalfCircle = Template.bind({})
+HalfCircle.args = {
+  height       :'30em',
+  verticalAlign:'flex-end',
+  color        :'background4',
+  shape        :'half-circle',
+}
+
+export const Ellipses = Template.bind({})
+Ellipses.args = {
+  height       :'30em',
+  verticalAlign:'flex-end',
+  color        :'background4',
+  shape        :'ellipses',
+}
+
+export const Spiral = Template.bind({})
+Spiral.args = {
+  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

@@ -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,29 @@ export const WithSections = () => (
     </Page.Section>
   </Page>
 )
+
+export const SectionsWithBackground = () => (
+  <Page
+    id="with-sections"
+  >
+    <Page.Section
+      id="s1"
+      backgroundShape="triangle"
+      backgroundHeight="30em"
+      backgroundVerticalAlign="flex-end"
+      backgroundHorizontalAlign="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>
+)