@pareto-engineering/design-system 2.0.0-alpha.9 → 3.0.0-alpha.22

package/dist/es/f/common/Description/Description.js

@@ -1,68 +1,68 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react';
 import { useLayoutEffect } from 'react';
+import { useField } from 'formik';
 import PropTypes from 'prop-types';
-import styleNames from '@pareto-engineering/bem'; // Local Definitions
+import styleNames from '@pareto-engineering/bem/exports';
+
+// Local Definitions
 
 const baseClassName = styleNames.base;
 const componentClassName = 'description';
+
 /**
  * This is the component description.
  */
-
-const Description = ({
-  id,
-  className: userClassName,
-  style,
-  children,
-  isError,
-  color // ...otherProps
-
-}) => {
+const Description = _ref => {
+  let {
+    id,
+    className: userClassName,
+    style,
+    description,
+    name,
+    color
+    // ...otherProps
+  } = _ref;
   useLayoutEffect(() => {
     import("./styles.scss");
   }, []);
-  return /*#__PURE__*/React.createElement("div", {
-    id: id,
-    className: [baseClassName, componentClassName, userClassName, isError ? 'x-error' : `x-${color}`].filter(e => e).join(' '),
-    style: style // {...otherProps}
-
-  }, children);
+  const [field, meta] = useField(name);
+  if (description || (meta.touched || field.value) && meta.error) {
+    return /*#__PURE__*/React.createElement("div", {
+      id: id,
+      className: [baseClassName, componentClassName, userClassName, meta.error ? 'x-error' : `x-${color}`].filter(e => e).join(' '),
+      style: style
+    }, meta.error || description);
+  }
+  return null;
 };
-
 Description.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 children JSX
-   */
-  children: PropTypes.node,
-
   /**
    * The base color for the description
    */
   color: PropTypes.string,
-
   /**
-   * isError
+   * Input description - extra description to guide a use in filling the input
+   */
+  description: PropTypes.string,
+  /**
+   * The input name (html - and Formik state)
    */
-  isError: PropTypes.bool
+  name: PropTypes.string.isRequired
 };
 Description.defaultProps = {
-  isError: false,
   color: 'metadata'
 };
 export default Description;

package/dist/es/f/common/Label/Label.js

@@ -2,24 +2,28 @@
 import * as React from 'react';
 import { useLayoutEffect } from 'react';
 import PropTypes from 'prop-types';
-import styleNames from '@pareto-engineering/bem'; // Local Definitions
+import styleNames from '@pareto-engineering/bem/exports';
+
+// Local Definitions
 
 const baseClassName = styleNames.base;
-const componentClassName = 'label';
+const componentClassName = 'form-label';
+
 /**
  * This is the component description.
  */
-
-const Label = ({
-  id,
-  className: userClassName,
-  style,
-  children,
-  name,
-  color,
-  as: Wrapper // ...otherProps
-
-}) => {
+const Label = _ref => {
+  let {
+    id,
+    className: userClassName,
+    style,
+    children,
+    name,
+    color,
+    optional,
+    as: Wrapper
+    // ...otherProps
+  } = _ref;
   useLayoutEffect(() => {
     import("./styles.scss");
   }, []);
@@ -27,50 +31,47 @@ const Label = ({
     htmlFor: Wrapper === 'label' ? name : undefined,
     id: id,
     className: [baseClassName, componentClassName, userClassName, `x-${color}`].filter(e => e).join(' '),
-    style: style // {...otherProps}
-
-  }, children);
+    style: style
+    // {...otherProps}
+  }, children, optional && ' (Optional)');
 };
-
 Label.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 children JSX
    */
   children: PropTypes.node,
-
   /**
    *  The name of the input label
    */
   name: PropTypes.string,
-
   /**
    *  The html tag that acts as an input label
    */
   as: PropTypes.node,
-
   /**
    *  The default color of the label
    */
-  color: PropTypes.string
+  color: PropTypes.string,
+  /**
+   * Whether the input should have an optional tag
+   */
+  optional: PropTypes.bool
 };
 Label.defaultProps = {
-  // someProp:false
   as: 'label',
-  color: 'main1'
+  color: 'main2',
+  optional: false
 };
 export default Label;

package/dist/es/f/common/Label/styles.scss

@@ -3,9 +3,6 @@
 @use "@pareto-engineering/bem";
 @use "../../../form.scss";
 
-
-.#{bem.$base}.label {
- color: var(--x);
+.#{bem.$base}.form-label {
+ color: var(--hard-x);
 }
-
-

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

@@ -0,0 +1,93 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+/* @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/exports';
+import { useField } from 'formik';
+import { FormLabel, FormDescription } from "../../common";
+
+// Local Definitions
+
+const baseClassName = styleNames.base;
+const componentClassName = 'checkbox';
+
+/**
+ * This is the component description.
+ */
+const Checkbox = _ref => {
+  let {
+    id,
+    className: userClassName,
+    style,
+    name,
+    label,
+    description,
+    disabled,
+    optional
+    // ...otherProps
+  } = _ref;
+  useLayoutEffect(() => {
+    import("./styles.scss");
+  }, []);
+  const [field] = useField({
+    name,
+    type: 'checkbox'
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    id: id,
+    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
+    style: style
+    // {...otherProps}
+  }, label && /*#__PURE__*/React.createElement(FormLabel, {
+    name: name,
+    optional: optional
+  }, label), /*#__PURE__*/React.createElement("input", _extends({
+    id: name,
+    className: "input",
+    type: "checkbox",
+    disabled: disabled
+  }, field)), /*#__PURE__*/React.createElement(FormDescription, {
+    className: "v50 mt-v s-1",
+    description: description,
+    name: name
+  }));
+};
+Checkbox.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 input name (html - and Formik state)
+   */
+  name: PropTypes.string.isRequired,
+  /**
+   * The Input description to guide the user if it's not obvious
+   */
+  description: PropTypes.string,
+  /**
+   * Whether the input should be disabled
+   */
+  disabled: PropTypes.bool,
+  /**
+   * The input label
+   */
+  label: PropTypes.string,
+  /**
+   * Whether the input should have an optional tag
+   */
+  optional: PropTypes.bool
+};
+Checkbox.defaultProps = {
+  disabled: false
+};
+export default Checkbox;

package/dist/es/{a/TeamInfo → f/fields/Checkbox}/index.js

@@ -1,2 +1,2 @@
 /* @pareto-engineering/generator-front 1.0.12 */
-export { default as TeamInfo } from "./TeamInfo";
+export { default as Checkbox } from "./Checkbox";

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

@@ -0,0 +1,14 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+@use "@pareto-engineering/bem";
+
+$default-margin: 1em;
+
+.#{bem.$base}.checkbox {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+
+    .#{bem.$base}.label {
+        margin-bottom: $default-margin
+    }
+}

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

@@ -1,35 +1,38 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react';
 import { useLayoutEffect, memo } from 'react';
 import PropTypes from 'prop-types';
-import styleNames from '@pareto-engineering/bem'; // Local Definitions
+import styleNames from '@pareto-engineering/bem/exports';
+
+// Local Definitions
 
 import { Choice } from "./common";
 import { FormLabel } from "../../common";
 const baseClassName = styleNames.base;
 const componentClassName = 'choices-input';
+
 /**
  * This is the component description.
  */
-
-const ChoicesInput = ({
-  id,
-  className: userClassName,
-  style,
-  name,
-  validate,
-  options,
-  multiple,
-  gridColumnsMobile,
-  gridColumnsDesktop,
-  color,
-  colorChecked,
-  label,
-  disabled // ...otherProps
-
-}) => {
+const ChoicesInput = _ref => {
+  let {
+    id,
+    className: userClassName,
+    style,
+    name,
+    validate,
+    options,
+    multiple,
+    gridColumnsMobile,
+    gridColumnsDesktop,
+    color,
+    colorChecked,
+    label,
+    optional,
+    disabled
+    // ...otherProps
+  } = _ref;
   useLayoutEffect(() => {
     import("./styles.scss");
   }, []);
@@ -40,48 +43,43 @@ const ChoicesInput = ({
       '--grid-columns-desktop': gridColumnsDesktop,
       '--grid-columns-mobile': gridColumnsMobile,
       ...style
-    } // {...otherProps}
-
+    }
+    // {...otherProps}
   }, label && /*#__PURE__*/React.createElement(FormLabel, {
-    as: "p"
+    as: "p",
+    optional: optional
   }, label), /*#__PURE__*/React.createElement("div", {
     className: "choices"
   }, options.map(choice => /*#__PURE__*/React.createElement(Choice, _extends({
     key: choice.value,
     name: name,
-    id: `${id}-${choice.value}`,
+    id: `${name}-${choice.value}`,
     multiple: multiple,
     validate: validate,
     disabled: disabled
   }, choice)))));
 };
-
 ChoicesInput.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 choices name
    */
   name: PropTypes.string.isRequired,
-
   /**
    * The input field validator function
    */
   validate: PropTypes.string,
-
   /**
    * The choices input options
    */
@@ -89,47 +87,44 @@ ChoicesInput.propTypes = {
     value: PropTypes.string,
     label: PropTypes.string
   })),
-
   /**
    * If the input should be multiple - checkbox
    */
   multiple: PropTypes.bool,
-
   /**
    * how many columns should be displayed on the mobile grid
    */
   gridColumnsMobile: PropTypes.number,
-
   /**
    * how many columns should be displayed on the desktop grid
    */
   gridColumnsDesktop: PropTypes.number,
-
   /**
    * The choice color
    */
   color: PropTypes.string,
-
   /**
    * The selected choice color
    */
   colorChecked: PropTypes.string,
-
   /**
    * The label of the choices input
    */
   label: PropTypes.string,
-
   /**
    * Whether all the Choices inputs should be disabled
    */
-  disabled: PropTypes.bool
+  disabled: PropTypes.bool,
+  /**
+  * Whether the input is optional or not
+  */
+  optional: PropTypes.bool
 };
 ChoicesInput.defaultProps = {
   gridColumnsMobile: 2,
   gridColumnsDesktop: 3,
   color: 'background2',
-  colorChecked: 'main1',
+  colorChecked: 'main2',
   disabled: false
 };
 export default /*#__PURE__*/memo(ChoicesInput);

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

@@ -1,39 +1,43 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react';
-import PropTypes from 'prop-types'; // Local Definitions
+import PropTypes from 'prop-types';
 
+// Local Definitions
 import { useField } from 'formik';
-import styleNames from '@pareto-engineering/bem';
+import styleNames from '@pareto-engineering/bem/exports';
 const baseClassName = styleNames.base;
 const componentClassName = 'choice';
+
 /**
  * This is the component description.
  */
-
-const Choice = ({
-  id,
-  className: userClassName,
-  style,
-  name,
-  label,
-  labelClassName,
-  labelStyle,
-  value,
-  multiple,
-  validate,
-  disabled
-}) => {
+const Choice = _ref => {
+  let {
+    id,
+    className: userClassName,
+    style,
+    name,
+    label,
+    labelClassName,
+    labelStyle,
+    value,
+    multiple,
+    validate,
+    disabled
+  } = _ref;
+  const type = multiple ? 'checkbox' : 'radio';
   const [field] = useField({
     name,
-    validate
+    validate,
+    type,
+    value
   });
   return /*#__PURE__*/React.createElement("div", {
     className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
     style: style
   }, /*#__PURE__*/React.createElement("input", _extends({
-    type: multiple ? 'checkbox' : 'radio',
+    type: type,
     id: id,
     name: name
   }, field, {
@@ -45,58 +49,47 @@ const Choice = ({
     style: labelStyle
   }, label));
 };
-
 Choice.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 input name.
    */
   name: PropTypes.string.isRequired,
-
   /**
    * The input label.
    */
   label: PropTypes.string.isRequired,
-
   /**
    * The input label class name.
    */
   labelClassName: PropTypes.string,
-
   /**
    * The input label styles.
    */
   labelStyle: PropTypes.objectOf(PropTypes.string),
-
   /**
    * The input value.
    */
   value: PropTypes.string.isRequired,
-
   /**
    * If the input should be multiple - checkbox
    */
   multiple: PropTypes.bool,
-
   /**
    * The input field validator function
    */
   validate: PropTypes.func,
-
   /**
    * Whether the radio or checkbox choice should be disabled
    */

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

@@ -1,8 +1,8 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 
 @use "@pareto-engineering/bem";
-@use "@aztlan/stylebook/src/mixins";
-@use "@aztlan/stylebook/src/globals" as *;
+@use "@pareto-engineering/styles/src/mixins";
+@use "@pareto-engineering/styles/src/globals" as *;
 
 $default-grid-gap:var(--u, 1em);
 $default-padding:var(--u, 1em);
@@ -29,10 +29,21 @@ $default-transition:all .3s;
         z-index: -1;
       }
 
+      input:disabled + label {
+        background-color: var(--hard-x);
+      }
+
+      input:not(:disabled) + label {
+        &:hover {
+          border-color: var(--soft-y);
+        }
+      }
+
       label {
-        background: var(--x);
-        border-radius: var(--theme-border-radius);
+        border: var(--theme-border-style) var(--hard-x);
+        background: var(--soft-x);
         color: var(--on-x);
+        border-radius: var(--theme-border-radius);
         display: block;
         height: 100%;
         padding: $default-padding;
@@ -44,6 +55,10 @@ $default-transition:all .3s;
       input:checked + label {
         background: var(--y);
         color: var(--on-y);
+
+        &:hover {
+          border-color: var(--y);
+        }
       }
     }
   }