@pareto-engineering/design-system 2.0.0-alpha.3 → 2.0.0-alpha.7

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/Button.stories.jsx

@@ -14,96 +14,71 @@ export default {
     // storyfn => <div className="">{ storyfn() }</div>,
   ],
   argTypes:{
-    isGhost :{ control: 'boolean' },
-    disabled:{ control: 'boolean' },
+    color   :{ control: { type: 'select', options: ALL_COLORS } },
+    disabled:{ control: { type: 'boolean' } },
+    isGhost :{ control: { type: 'boolean' } },
+    isSimple:{ control: { type: 'boolean' } },
   },
 }
 
-export const Base = (props) => <Button {...props}>Sample Button</Button>
+const SingleTemplate = (args) => <Button {...args} />
 
-export const Ghost = (props) => (
-  <Button isGhost {...props}>
-    Sample Button
+export const Base = SingleTemplate.bind({})
+Base.args = {
+  children:'Sample Button',
+}
+
+export const Ghost = SingleTemplate.bind({})
+Ghost.args = {
+  isGhost :true,
+  children:'Sample Button',
+}
+
+const MultipleTemplate = (args) => ALL_COLORS.map((colorName) => (
+  <Button {...args} color={colorName} key={colorName}>
+    This is a
+    {' '}
+    {colorName}
+    {' '}
+    button
   </Button>
-)
+))
 
-export const Simple = (props) => (
-  <>
-    {ALL_COLORS.map((colorName) => (
-      <Button {...props} color={colorName} key={colorName} isSimple>
-        This is a
-        {' '}
-        {colorName}
-        {' '}
-        button
-      </Button>
-    ))}
-  </>
-)
+export const Normal = MultipleTemplate.bind({})
 
-export const Colors = (props) => (
-  <>
-    {ALL_COLORS.map((colorName) => (
-      <Button {...props} color={colorName} key={colorName}>
-        This is a
-        {' '}
-        {colorName}
-        {' '}
-        button
-      </Button>
-    ))}
-  </>
-)
+export const Ghosts = MultipleTemplate.bind({})
+Ghosts.args = {
+  isGhost:true,
+}
 
-export const GhostColors = (props) => (
-  <>
-    {ALL_COLORS.map((colorName) => (
-      <Button {...props} color={colorName} key={colorName} isGhost>
-        This is a
-        {' '}
-        {colorName}
-        {' '}
-        button
-      </Button>
-    ))}
-  </>
-)
+export const Simple = MultipleTemplate.bind({})
+Simple.args = {
+  isSimple:true,
+}
 
-export const Compact = (props) => (
-  <>
-    {ALL_COLORS.map((colorName) => (
-      <Button {...props} color={colorName} key={colorName} isCompact>
-        This is a
-        {' '}
-        {colorName}
-        {' '}
-      </Button>
-    ))}
-  </>
-)
+export const Compact = MultipleTemplate.bind({})
+Compact.args = {
+  isCompact:true,
+}
 
-export const Disabled = (props) => (
-  <>
-    {ALL_COLORS.map((colorName) => (
-      <Button {...props} color={colorName} key={colorName} disabled>
-        This is a
-        {' '}
-        {colorName}
-        {' '}
-      </Button>
-    ))}
-  </>
-)
+export const Disabled = MultipleTemplate.bind({})
+Disabled.args = {
+  disabled:true,
+}
+
+export const GhostDisabled = MultipleTemplate.bind({})
+GhostDisabled.args = {
+  isGhost :true,
+  disabled:true,
+}
 
-export const Loading = (props) => (
-  <>
-    {ALL_COLORS.map((colorName) => (
-      <Button {...props} color={colorName} key={colorName} isLoading>
-        This is a
-        {' '}
-        {colorName}
-        {' '}
-      </Button>
-    ))}
-  </>
-)
+export const SimpleDisabled = MultipleTemplate.bind({})
+SimpleDisabled.args = {
+  isSimple:true,
+  disabled:true,
+}
+
+export const Loading = MultipleTemplate.bind({})
+Loading.args = {
+  isLoading:true,
+}

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>
+)

package/src/ui/a/OvalIllustration/OvalIllustration.jsx

@@ -0,0 +1,108 @@
+/* @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 = 'oval-illustration'
+
+/**
+ * This is the component description.
+ */
+const OvalIllustration = ({
+  id,
+  className:userClassName,
+  style,
+  layout,
+  src,
+  alt,
+  ovalBackground,
+  backgroundColor,
+  // ...otherProps
+}) => {
+  useLayoutEffect(() => {
+    import('./styles.scss')
+  }, [])
+
+  return (
+    <div
+      id={id}
+      className={[
+
+        baseClassName,
+
+        componentClassName,
+        userClassName,
+        layout,
+      ]
+        .filter((e) => e)
+        .join(' ')}
+      style={style}
+      // {...otherProps}
+    >
+      {ovalBackground
+        && <div className={`oval-background y-${backgroundColor}`} />}
+      <div className="illustration">
+        <img src={src} alt={alt} />
+      </div>
+    </div>
+  )
+}
+
+OvalIllustration.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),
+
+  /**
+   * side definition of the illustration
+   */
+  layout:PropTypes.oneOf([
+    'left',
+    'right',
+  ]),
+
+  /**
+   * image url
+   */
+  src:PropTypes.string,
+
+  /**
+   * alt tag for the image
+   */
+  alt:PropTypes.string,
+
+  /**
+   * whether to have a oval shape as background
+   */
+  ovalBackground:PropTypes.bool,
+
+  /**
+   * background color of the oval behind the image
+   */
+  backgroundColor:PropTypes.string,
+}
+
+OvalIllustration.defaultProps = {
+  layout:'left',
+}
+
+export default OvalIllustration

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

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

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

@@ -0,0 +1,105 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+
+@use "@pareto-engineering/bem";
+@use "@aztlan/stylebook/src/mixins";
+@use "@aztlan/stylebook/src/globals" as *;
+
+$default-desktop-shape-size:45em;
+$default-tablet-shape-size:35em;
+$default-mobile-shape-size:20em;
+$default-clockwise-degree:60deg;
+$default-counter-clockwise-degree:-60deg;
+$default-ellipse-size:30% 43% at 50% 50%;
+
+.#{bem.$base}.oval-illustration {
+  display: flex;
+  justify-content: center;
+  overflow: hidden;
+  position: relative;
+
+  &.left {
+    .oval-background {
+      transform: rotate($default-clockwise-degree);
+    }
+
+    .illustration {
+      transform: rotate($default-counter-clockwise-degree);
+
+      > img {
+        transform: rotate($default-clockwise-degree);
+      }
+    }
+  }
+
+  &.right {
+    .oval-background {
+      transform: rotate($default-counter-clockwise-degree);
+    }
+
+    .illustration {
+      transform: rotate($default-clockwise-degree);
+
+      > img {
+        transform: rotate($default-counter-clockwise-degree);
+      }
+    }
+  }
+
+  .oval-background {
+    background: var(--y);
+    clip-path: ellipse($default-ellipse-size);
+    overflow: hidden;
+    position: absolute;
+    z-index: -100;
+  }
+
+  .illustration {
+    clip-path: ellipse($default-ellipse-size);
+    overflow: hidden;
+
+    > img {
+      height: 100%;
+      object-fit: cover;
+      width: 100%;
+    }
+  }
+
+  // mobile style
+  @include mixins.media($to:$sm-md) {
+    .oval-background {
+      height: $default-mobile-shape-size;
+      width: $default-mobile-shape-size;
+    }
+
+    .illustration {
+      height: $default-mobile-shape-size;
+      width: $default-mobile-shape-size;
+    }
+  }
+
+  // tablet style
+  @include mixins.media($from:$xs-sm, $to:$sm-md) {
+    .oval-background {
+      height: $default-tablet-shape-size;
+      width: $default-tablet-shape-size;
+    }
+
+    .illustration {
+      height: $default-tablet-shape-size;
+      width: $default-tablet-shape-size;
+    }
+  }
+
+  // desktop style
+  @include mixins.media($from:$sm-md) {
+    .oval-background {
+      height: $default-desktop-shape-size;
+      width: $default-desktop-shape-size;
+    }
+
+    .illustration {
+      height: $default-desktop-shape-size;
+      width: $default-desktop-shape-size;
+    }
+  }
+}