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

package/dist/es/f/fields/ChoicesInput/ChoicesInput.js

@@ -8,7 +8,7 @@ import styleNames from '@pareto-engineering/bem/exports';
 // Local Definitions
 
 import { Choice } from "./common";
-import { FormLabel } from "../../common";
+import { FormDescription, FormLabel } from "../../common";
 const baseClassName = styleNames.base;
 const componentClassName = 'choices-input';
 
@@ -26,10 +26,10 @@ const ChoicesInput = ({
   gridColumnsMobile,
   gridColumnsDesktop,
   color,
-  colorChecked,
   label,
   optional,
-  disabled
+  disabled,
+  description
   // ...otherProps
 }) => {
   useInsertionEffect(() => {
@@ -37,7 +37,7 @@ const ChoicesInput = ({
   }, []);
   return /*#__PURE__*/React.createElement("div", {
     id: id,
-    className: [baseClassName, componentClassName, userClassName, multiple && 'multiple', color && `x-${color}`, colorChecked && `y-${colorChecked}`].filter(e => e).join(' '),
+    className: [baseClassName, componentClassName, userClassName, multiple && 'multiple', color && `x-${color}`].filter(e => e).join(' '),
     style: {
       '--grid-columns-desktop': gridColumnsDesktop,
       '--grid-columns-mobile': gridColumnsMobile,
@@ -50,13 +50,18 @@ const ChoicesInput = ({
   }, label), /*#__PURE__*/React.createElement("div", {
     className: "choices"
   }, options.map(choice => /*#__PURE__*/React.createElement(Choice, _extends({
+    labelClassName: "with-faded-border",
     key: choice.value,
     name: name,
     id: `${name}-${choice.value}`,
     multiple: multiple,
     validate: validate,
     disabled: disabled
-  }, choice)))));
+  }, choice)))), /*#__PURE__*/React.createElement(FormDescription, {
+    className: "v50 mt-v s-1",
+    description: description,
+    name: name
+  }));
 };
 ChoicesInput.propTypes = {
   /**
@@ -117,13 +122,16 @@ ChoicesInput.propTypes = {
   /**
   * Whether the input is optional or not
   */
-  optional: PropTypes.bool
+  optional: PropTypes.bool,
+  /**
+   * The select input description
+   */
+  description: PropTypes.string
 };
 ChoicesInput.defaultProps = {
   gridColumnsMobile: 2,
   gridColumnsDesktop: 3,
-  color: 'background2',
-  colorChecked: 'main2',
+  color: 'main',
   disabled: false
 };
 export default /*#__PURE__*/memo(ChoicesInput);

package/dist/es/f/fields/ChoicesInput/styles.scss

@@ -5,21 +5,18 @@
 @use "@pareto-engineering/styles/src/mixins";
 @use "@pareto-engineering/styles/src/globals" as *;
 
-$default-grid-gap:var(--u, 1em);
-$default-padding:var(--u, 1em);
-$default-transition:all .3s;
+$default-flex-separator:calc(1em / 2) calc(.75em / 2);
+$default-transition:var(--theme-default-transition);
+$default-label-padding: .3em 1em calc(2em - .3em);
+$default-label-height: .5em;
 
 .#{bem.$base}.choices-input {
-  .choices {
-    display: grid;
-    gap: $default-grid-gap;
-    grid-template-columns: repeat(var(--grid-columns-mobile), 1fr);
+  >.choices {
+    display: flex;
+    flex-wrap: wrap;
+    gap: $default-flex-separator;
 
-    @include mixins.media($from:$sm-md) {
-      grid-template-columns: repeat(var(--grid-columns-desktop), 1fr);
-    }
-
-    .choice {
+    >.choice {
       display: flex;
 
       input {
@@ -33,35 +30,26 @@ $default-transition:all .3s;
         background-color: var(--hard-x);
       }
 
-      input:not(:disabled) + label {
-        &:hover {
-          border-color: var(--soft-y);
-        }
-      }
-
       label {
-        background: var(--soft-x);
-        border: var(--theme-border-style) var(--hard-x);
-        border-radius: var(--theme-border-radius);
-        color: var(--on-x);
+        background-color: var(--background-inputs);
+        border-radius: var(--theme-default-border-radius);
         cursor: pointer;
         display: block;
-        height: 100%;
-        padding: $default-padding;
+        height: $default-label-height;
+        max-width: 100%;
+        padding: $default-label-padding;
+        position: relative;
         transition: $default-transition;
-        width: 100%;
-      }
-
-      input:checked + label {
-        background: var(--y);
-        color: var(--on-y);
 
         &:hover {
-          border-color: var(--y);
+          box-shadow: var(--theme-default-input-box-shadow);
         }
       }
+
+      input:checked + label {
+        background: var(--x);
+        color: var(--on-x);
+      }
     }
   }
 }
-
-

package/dist/es/f/fields/SelectInput/SelectInput.js

@@ -48,7 +48,7 @@ const SelectInput = ({
     name: name,
     optional: optional
   }, label), /*#__PURE__*/React.createElement("div", {
-    className: "select-wrapper"
+    className: "select-wrapper with-faded-border"
   }, /*#__PURE__*/React.createElement("select", _extends({
     className: "input"
   }, field, {
@@ -135,6 +135,6 @@ SelectInput.propTypes = {
 };
 SelectInput.defaultProps = {
   disabled: false,
-  color: 'background2'
+  color: 'interactive'
 };
 export default /*#__PURE__*/memo(SelectInput);

package/dist/es/f/fields/SelectInput/styles.scss

@@ -5,20 +5,32 @@
 @use "../../../form.scss";
 
 
+$default-spacing-size: 1em;
 $default-padding: .75em;
-$default-margin: 1em;
+$default-bg-gradient: var(--background-far);
+$default-input-border-radius: var(--theme-default-input-border-radius);
 
 .#{bem.$base}.select-input {
   display: flex;
   flex-direction: column;
 
   .#{bem.$base}.label {
-    margin-bottom: $default-margin;
+    margin-bottom: $default-spacing-size;
   }
 
-  .select-wrapper {
+  >.select-wrapper {
+    background-color: var(--background-inputs);
+    border-radius: $default-input-border-radius;
+    padding: $default-padding;
     position: relative;
 
+    &::after {
+      border-radius: $default-input-border-radius;
+    }
+
+    &:not(:disabled):hover {
+      box-shadow: var(--default-input-box-shadow);
+    }
     >.#{bem.$base}.loading-circle {
       position: absolute;
       right: 0;
@@ -26,24 +38,22 @@ $default-margin: 1em;
       transform: translateY(-50%);
     }
 
-    >.input {
-      background: var(--soft-y);
-      border: var(--theme-border-style) var(--hard-y);
-      color: var(--on-y);
-      padding: $default-padding;
-      width: 100%;
-
-      &:not(:disabled):hover {
-        border: var(--theme-border-style) var(--soft-background4);
-      }
-
-      &:disabled {
-        appearance: none;
-        background-color: var(--hard-y);
-      }
-
-      &:focus {
-        background: var(--y);
+    select {
+      appearance: none;
+      background-color: inherit;
+      background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAyMCAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE5IDEuNUwxMCAxMC41TDEgMS41IiBzdHJva2U9IiM0QzRENTMiIHN0cm9rZS13aWR0aD0iMiIvPgo8L3N2Zz4=");
+      background-position: calc(100% - $default-spacing-size);
+      background-repeat: no-repeat;
+      background-size: $default-spacing-size;
+      padding-right: $default-spacing-size;
+
+      &.input {
+        width: 100%;
+
+        &:disabled {
+          appearance: none;
+          opacity: 35%;
+        }
       }
     }
   }

package/dist/es/f/fields/TextInput/TextInput.js

@@ -50,14 +50,16 @@ const TextInput = ({
     name: name,
     color: labelColor,
     optional: optional
-  }, label), /*#__PURE__*/React.createElement("input", _extends({
+  }, label), /*#__PURE__*/React.createElement("div", {
+    className: "input-wrapper with-faded-border"
+  }, /*#__PURE__*/React.createElement("input", _extends({
     id: name,
     className: "input",
     type: type,
     disabled: disabled,
     placeholder: placeholder,
     autoComplete: autoComplete
-  }, field)), /*#__PURE__*/React.createElement(FormDescription, {
+  }, field))), /*#__PURE__*/React.createElement(FormDescription, {
     className: "v50 mt-v s-1",
     description: description,
     name: name

package/dist/es/f/fields/TextInput/styles.scss

@@ -4,31 +4,40 @@
 @use "../../../form.scss";
 
 $default-padding: .75em .75em .55em;
+$default-input-border-radius: var(--theme-default-input-border-radius);
+
 
 .#{bem.$base}.text-input {
   display: flex;
   flex-direction: column;
 
-  .input {
-    background: var(--soft-y);
-    border: var(--theme-border-style) var(--hard-y);
-    color: var(--on-y);
-    padding: $default-padding;
-
-    &::placeholder {
-      color: var(--metadata);
-    }
-
-    &:not(:disabled):hover {
-      border: var(--theme-border-style) var(--soft-background4);
-    }
+  >.input-wrapper {
+    position: relative;
 
-    &:disabled {
-      background-color: var(--hard-y);
+    &::after {
+      border-radius: $default-input-border-radius;
     }
 
-    &:focus {
-      background: var(--soft-background4);
+    > input {
+      background-color: var(--background-inputs);
+      border-radius: $default-input-border-radius;
+      color: var(--x);
+      height: 100%;
+      padding: $default-padding;
+      width: 100%;
+
+      &::placeholder {
+        color: var(--metadata);
+      }
+
+      &:disabled {
+        background-color: var(--hard-x);
+      }
+
+      &:not(:disabled):hover {
+        border-radius: $default-input-border-radius;
+        box-shadow: var(--theme-default-input-box-shadow);
+      }
     }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pareto-engineering/design-system",
-  "version": "4.0.0-alpha.5",
+  "version": "4.0.0-alpha.9",
   "description": "",
   "main": "dist/cjs/index.js",
   "module": "dist/es/index.js",
@@ -32,27 +32,27 @@
     "@babel/cli": "^7.21.0",
     "@pareto-engineering/eslint-config": "*",
     "@pareto-engineering/stylelint-config": "*",
-    "@storybook/addon-essentials": "^7.0.0-rc.3",
-    "@storybook/addon-interactions": "^7.0.0-rc.3",
-    "@storybook/addon-links": "^7.0.0-rc.3",
-    "@storybook/addon-storyshots": "^7.0.0-rc.3",
-    "@storybook/blocks": "^7.0.0-rc.3",
-    "@storybook/react": "^7.0.0-rc.3",
-    "@storybook/react-webpack5": "^7.0.0-rc.3",
-    "@storybook/testing-library": "^0.0.14-next.1",
+    "@storybook/addon-essentials": "^7.0.6",
+    "@storybook/addon-interactions": "^7.0.6",
+    "@storybook/addon-links": "^7.0.6",
+    "@storybook/addon-storyshots": "^7.0.6",
+    "@storybook/blocks": "^7.0.6",
+    "@storybook/react": "^7.0.6",
+    "@storybook/react-webpack5": "^7.0.6",
+    "@storybook/testing-library": "^0.1.0",
     "babel-plugin-relay": "^15.0.0",
     "copyfiles": "^2.4.1",
     "css-loader": "^6.7.3",
     "identity-obj-proxy": "^3.0.0",
     "jest-environment-jsdom": "^29.5.0",
-    "sass-loader": "^13.2.0",
-    "storybook": "^7.0.0-rc.3",
+    "sass-loader": "^13.2.2",
+    "storybook": "^7.0.6",
     "style-loader": "^3.3.2"
   },
   "dependencies": {
-    "@pareto-engineering/assets": "^4.0.0-alpha.3",
-    "@pareto-engineering/bem": "^4.0.0-alpha.5",
-    "@pareto-engineering/styles": "^4.0.0-alpha.5",
+    "@pareto-engineering/assets": "^4.0.0-alpha.9",
+    "@pareto-engineering/bem": "^4.0.0-alpha.9",
+    "@pareto-engineering/styles": "^4.0.0-alpha.9",
     "date-fns": "^2.29.3",
     "downshift": "^6.1.12",
     "formik": "^2.2.9",
@@ -67,5 +67,5 @@
     "relay-test-utils": "^15.0.0"
   },
   "browserslist": "> 2%",
-  "gitHead": "dd704a71588b078c1c13bc1aa54b26474df3d311"
+  "gitHead": "2101215054a810e3f9d8d82c9ff475a07e54c670"
 }

package/src/stories/a/MetaCard.stories.jsx

@@ -0,0 +1,35 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { MetaCard } from 'ui'
+
+export default {
+  title        :'a/MetaCard',
+  component    :MetaCard,
+  subcomponents:{},
+  decorators   :[],
+  controls     :{
+    hasBackgroundBlur:{ type: 'boolean' },
+  },
+}
+
+const Template = (args) => (
+  <div style={{ backgroundImage: 'linear-gradient(purple, white)', padding: '1em' }}>
+    <MetaCard {...args}>
+      <h3 style={{ gridColumn: '2/-1' }}>
+        Column 2
+      </h3>
+      <p style={{ gridColumn: '3/-1' }}>
+        Column 3
+      </p>
+    </MetaCard>
+  </div>
+)
+
+export const Base = Template.bind({})
+Base.args = {}
+
+export const WithBlur = Template.bind({})
+WithBlur.args = {
+  hasBackgroundBlur:true,
+}

package/src/stories/a/TextSteps.stories.jsx

@@ -0,0 +1,19 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { TextSteps } from 'ui'
+
+export default {
+  title    :'a/TextSteps',
+  component:TextSteps,
+}
+
+const items = [
+  'Join Pareto in minutes. Share your business goals to match with a Project Partner.',
+  'Receive initial output in 24 hours. Give feedback to fine-tune results and level up your Pareto team.',
+  'Tap into economies of scale with tried and true playbooks: Benefit from strategic project recommendations. Enjoy continuous workflow improvement and documented learnings.',
+]
+
+export const Base = () => (
+  <div className="grid span-8 md-span-14"><TextSteps items={items} /></div>
+)

package/src/stories/a/Tip.stories.jsx

@@ -0,0 +1,28 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { Tip } from 'ui'
+
+export default {
+  title        :'a/Tip',
+  component    :Tip,
+  subcomponents:{
+    // Item:Quote.Item
+  },
+  decorators:[
+    // storyfn => <div className="">{ storyfn() }</div>,
+  ],
+  argTypes:{
+    color:{ control: 'color' },
+  },
+}
+
+const Template = (args) => (
+  <Tip {...args} />
+)
+
+export const Base = Template.bind({})
+Base.args = {
+  children:'Remember to wash your vegetables before eating them.',
+  color   :'main',
+}

package/src/stories/b/Card/Card.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',
+  component    :Card,
+  subcomponents:{
+    'Card.Section':Card.Section,
+    'Card.Group'  :Card.Group,
+  },
+  decorators:[
+    // (storyfn) => <Router>{storyfn()}</Router>,
+  ],
+  argTypes:{
+    progress:{ control: 'number' },
+  },
+}
+
+const Template = ({ isImage, ...args }) => (
+  <Card
+    {...args}
+  >
+    { isImage && (
+      <Card.Section isImage>
+        <img src="https://miro.medium.com/max/1124/1*v9We8Bevk2FFA5YadZNwcQ.jpeg" alt="test" />
+      </Card.Section>
+    )}
+    <Card.Section>
+      <h1>
+        Section One
+      </h1>
+    </Card.Section>
+    <Card.Section>
+      <h2>
+        Section Two
+      </h2>
+    </Card.Section>
+    <Card.Section>
+      <h3>
+        Section Three
+      </h3>
+    </Card.Section>
+  </Card>
+)
+
+export const Base = Template.bind({})
+Base.args = {}
+
+export const CardWithProgress = Template.bind({})
+CardWithProgress.args = {
+  progress:50,
+}
+
+export const CardWithImageSection = Template.bind({})
+CardWithImageSection.args = {
+  isImage:true,
+}

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({})