@pareto-engineering/design-system 4.0.0-alpha.4 → 4.0.0-alpha.9

package/src/stories/b/Card/Group.stories.jsx

@@ -0,0 +1,59 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { Card } from 'ui'
+
+export default {
+  title     :'b/Card/Group',
+  component :Card.Group,
+  decorators:[
+    // (storyfn) => <Router>{storyfn()}</Router>,
+  ],
+  argTypes:{
+    type       :{ control: 'select', options: ['vertical-flexbox', 'grid', 'snap-scroller'] },
+    desktopType:{ control: 'select', options: ['vertical-flexbox', 'grid'] },
+  },
+}
+
+const Template = ({ ...args }) => (
+  <Card.Group
+    className="span-8"
+    {...args}
+  >
+    <Card className="span-2">
+      <Card.Section>
+        <h1>
+          Span Two on Grid
+        </h1>
+      </Card.Section>
+    </Card>
+    <Card>
+      <Card.Section>
+        <h1>
+          Card Two
+        </h1>
+      </Card.Section>
+    </Card>
+    <Card>
+      <Card.Section>
+        <h1>
+          Card Three
+        </h1>
+      </Card.Section>
+    </Card>
+  </Card.Group>
+)
+
+export const Base = Template.bind({})
+Base.args = {}
+
+export const CardGroupGridOnDesktop = Template.bind({})
+CardGroupGridOnDesktop.args = {
+  desktopType:'grid',
+}
+
+export const CardGroupNotSnapScroller = Template.bind({})
+CardGroupNotSnapScroller.args = {
+  type       :'vertical-flexbox',
+  desktopType:'vertical-flexbox',
+}

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

@@ -1,7 +1,11 @@
 /* @pareto-engineering/generator-front 1.0.0 */
 import * as React from 'react'
 
-import { Page } from 'ui'
+import {
+  Page,
+  // AnimatedGradient,
+  // AnimatedBlobs,
+} from 'ui'
 import { HelmetProvider } from 'react-helmet-async'
 
 export default {
@@ -52,9 +56,21 @@ export const WithSections = () => (
     <Page.Section id="s1">
       Section 1
     </Page.Section>
-    <Page.Section id="s2">
+    <Page.Section id="s2" spaced className="x-main b-x">
       Section 2.
-      Inspect source for details.
+      This section is spaced
     </Page.Section>
   </Page>
 )
+
+// Story is commented out due to snapshots and animations
+// export const WithAnimatedBlobsBackground = () => (
+//   <Page
+//     id="with-sections"
+//     Background={AnimatedBlobs}
+//   >
+//     <Page.Section id="s1">
+//       Section 1
+//     </Page.Section>
+//   </Page>
+// )

package/src/stories/f/SelectInput.stories.jsx

@@ -78,3 +78,10 @@ DisabledSelectInput.args = {
   ...Base.args,
   disabled:true,
 }
+
+export const DisabledWithDescriptionSelectInput = Template.bind({})
+DisabledWithDescriptionSelectInput.args = {
+  ...Base.args,
+  disabled   :true,
+  description:'This is a description',
+}

package/src/stories/f/TextInput.stories.jsx

@@ -16,7 +16,7 @@ export default {
   decorators:[
     (storyfn) => (
       <Formik
-        initialValues={{ firstName: '', date: '', time: '' }}
+        initialValues={{ email: '', name: '', company: '' }}
       >
         <Form>
 
@@ -47,8 +47,8 @@ const Template = (args) => (
 
 export const Base = Template.bind({})
 Base.args = {
-  name :'firstName',
-  label:"What's your first name ?",
+  name :'email',
+  label:'How can we reach you ?',
 }
 
 export const Optional = Template.bind({})
@@ -76,7 +76,7 @@ WithValidation.args = {
 export const WithPlaceholder = Template.bind({})
 WithPlaceholder.args = {
   ...Base.args,
-  placeholder:'First Name',
+  placeholder:'Email address',
 }
 
 export const WithAutoCompleteOff = Template.bind({})

package/src/ui/a/AnimatedBlobs/AnimatedBlobs.jsx

@@ -0,0 +1,102 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { useInsertionEffect } from 'react'
+
+import PropTypes from 'prop-types'
+
+import styleNames from '@pareto-engineering/bem/exports'
+
+// Local Definitions
+
+const baseClassName = styleNames.base
+
+const componentClassName = 'animated-blobs'
+
+/**
+ * This is the component description.
+ */
+const AnimatedBlobs = ({
+  id,
+  className: userClassName,
+  color,
+  style,
+  height,
+  width,
+  opacity,
+  // ...otherProps
+}) => {
+  useInsertionEffect(() => {
+    import('./styles.scss')
+  }, [])
+
+  return (
+    <div
+      id={id}
+      className={[
+        baseClassName,
+        componentClassName,
+        userClassName,
+      ]
+        .filter((e) => e)
+        .join(' ')}
+      style={{
+        ...style,
+        '--blob-color':`var(--${color})`,
+        '--height'    :height,
+        '--opacity'   :opacity,
+        '--width'     :width,
+      }}
+    >
+      <div className="shape-blob" />
+      <div className="shape-blob one" />
+      <div className="shape-blob two" />
+    </div>
+  )
+}
+
+AnimatedBlobs.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 color of the blobs
+   */
+  color:PropTypes.string,
+
+  /**
+   * The height of the blobs
+   */
+  height:PropTypes.string,
+
+  /**
+   * The width of the blobs
+   */
+  width:PropTypes.string,
+
+  /**
+   * The opacity of the blobs
+   */
+  opacity:PropTypes.string,
+}
+
+AnimatedBlobs.defaultProps = {
+  color  :'background-mesh',
+  height :'200px',
+  width  :'200px',
+  opacity:'0.7',
+}
+
+export default AnimatedBlobs

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

@@ -0,0 +1 @@
+export { default as AnimatedBlobs } from './AnimatedBlobs'

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

@@ -0,0 +1,87 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+
+@use "@pareto-engineering/bem";
+
+@keyframes transform {
+  0%,
+  100% {
+    border-radius: 33% 67% 70% 30% / 30% 30% 70% 70%;
+  }
+
+  20% {
+    border-radius: 37% 63% 51% 49% / 37% 65% 35% 63%;
+  }
+
+  40% {
+    border-radius: 36% 64% 64% 36% / 64% 48% 52% 36%;
+  }
+
+  60% {
+    border-radius: 37% 63% 51% 49% / 30% 30% 70% 70%;
+  }
+
+  80% {
+    border-radius: 40% 60% 42% 58% / 41% 51% 49% 59%;
+  }
+}
+@keyframes movement_one {
+  0%,
+  100% {
+    transform: none;
+  }
+
+  50% {
+    transform: translate(50%, 20%) rotateY(10deg) scale(1.2);
+  }
+}
+@keyframes movement_two {
+  0%,
+  500% {
+    transform: none;
+  }
+
+  50% {
+    transform: translate(50%, 20%) rotate(-200deg) scale(1.2);
+  }
+}
+
+.#{bem.$base}.animated-blobs {
+  height: 100%;
+  left: 0;
+  top: 0;
+  width: 100%;
+
+  > .shape-blob {
+    animation:
+      transform 20s ease-in-out infinite both alternate,
+      movement_one 40s ease-in-out infinite both;
+    background: var(--blob-color);
+    border-radius: 30% 50% 20% 40%;
+    height: var(--height);
+    left: 70%;
+    opacity: var(--opacity);
+    position: absolute;
+    top: 50%;
+    width: var(--width);
+  }
+
+  > .shape-blob.one {
+    animation: transform 30s ease-in-out infinite both alternate,
+      movement_two 60s ease-in-out infinite both;
+    height: calc(var(--height) * 2.5);
+    left: -200px;
+    top: -150px;
+    transform: rotate(-180deg);
+    width: calc(var(--width) * 2.5);
+  }
+
+  > .shape-blob.two {
+    animation: transform 30s ease-in-out infinite both alternate,
+      movement_two 60s ease-in-out infinite both;
+    height: calc(var(--height) * 1.75);
+    left: 500px;
+    top: -150px;
+    transform: rotate(-180deg);
+    width: calc(var(--width) * 1.75);
+  }
+}

package/src/ui/a/AnimatedGradient/AnimatedGradient.jsx

@@ -0,0 +1,69 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import {
+  useEffect,
+  useInsertionEffect,
+} from 'react'
+
+import PropTypes from 'prop-types'
+
+import styleNames from '@pareto-engineering/bem/exports'
+
+import { Gradient } from './webGIRenderer'
+
+// Local Definitions
+
+const baseClassName = styleNames.base
+
+const componentClassName = 'animated-gradient'
+
+/**
+ * This is the component description.
+ */
+const AnimatedGradient = ({
+  className: userClassName,
+  // ...otherProps
+}) => {
+  useInsertionEffect(() => {
+    import('./styles.scss')
+  }, [])
+
+  const isClient = typeof window !== 'undefined'
+
+  useEffect(() => {
+    // Only initialize the Gradient if we're in the browser
+    if (isClient) {
+      const gradient = new Gradient()
+      gradient.initGradient('#gradient-canvas')
+    }
+  }, [])
+
+  return (
+    <canvas
+      id="gradient-canvas"
+      data-transition-in
+      className={[
+        baseClassName,
+        componentClassName,
+        userClassName,
+      ]
+        .filter((e) => e)
+        .join(' ')}
+        // {...otherProps}
+    />
+  )
+}
+
+AnimatedGradient.propTypes = {
+  /**
+  * The HTML class names for this element
+  */
+  className:PropTypes.string,
+}
+
+AnimatedGradient.defaultProps = {
+  // primaryColor:'black',
+}
+
+export default AnimatedGradient

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

@@ -0,0 +1 @@
+export { default as AnimatedGradient } from './AnimatedGradient'

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

@@ -0,0 +1,14 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+
+@use "@pareto-engineering/bem";
+
+.#{bem.$base}.animated-gradient {
+  --gradient-color-1: var(--background-mesh);
+  --gradient-color-2: var(--soft-background-mesh);
+  --gradient-color-3: var(--background-mesh);
+  --gradient-color-4: var(--soft-background-mesh);
+  height: 100%;
+  left: 0;
+  top: 0;
+  width: 100%;
+}