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

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

@@ -1,6 +1,7 @@
 /* @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
 
@@ -14,20 +15,25 @@ const Description = ({
   id,
   className: userClassName,
   style,
-  children,
-  isError,
+  description,
+  name,
   color // ...otherProps
 
 }) => {
   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}
+  const [field, meta] = useField(name);
 
-  }, children);
+  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 = {
@@ -47,22 +53,21 @@ Description.propTypes = {
   style: PropTypes.objectOf(PropTypes.string),
 
   /**
-   *  The children JSX
+   * The base color for the description
    */
-  children: PropTypes.node,
+  color: PropTypes.string,
 
   /**
-   * The base color for the description
+   * Input description - extra description to guide a use in filling the input
    */
-  color: PropTypes.string,
+  description: PropTypes.string,
 
   /**
-   * isError
+   * 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

@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import styleNames from '@pareto-engineering/bem'; // Local Definitions
 
 const baseClassName = styleNames.base;
-const componentClassName = 'label';
+const componentClassName = 'form-label';
 /**
  * This is the component description.
  */
@@ -17,6 +17,7 @@ const Label = ({
   children,
   name,
   color,
+  optional,
   as: Wrapper // ...otherProps
 
 }) => {
@@ -29,7 +30,7 @@ const Label = ({
     className: [baseClassName, componentClassName, userClassName, `x-${color}`].filter(e => e).join(' '),
     style: style // {...otherProps}
 
-  }, children);
+  }, children, optional && ' (Optional)');
 };
 
 Label.propTypes = {
@@ -66,11 +67,16 @@ Label.propTypes = {
   /**
    *  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(--dark-x);
 }
-
-

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

@@ -0,0 +1,99 @@
+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); }
+
+/* @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';
+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 = ({
+  id,
+  className: userClassName,
+  style,
+  name,
+  label,
+  description,
+  disabled,
+  optional // ...otherProps
+
+}) => {
+  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/f/fields/Checkbox/index.js

@@ -0,0 +1,2 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+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

@@ -27,6 +27,7 @@ const ChoicesInput = ({
   color,
   colorChecked,
   label,
+  optional,
   disabled // ...otherProps
 
 }) => {
@@ -43,13 +44,14 @@ const ChoicesInput = ({
     } // {...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
@@ -123,13 +125,18 @@ ChoicesInput.propTypes = {
   /**
    * 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

@@ -25,15 +25,18 @@ const Choice = ({
   validate,
   disabled
 }) => {
+  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, {

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

@@ -29,10 +29,21 @@ $default-transition:all .3s;
         z-index: -1;
       }
 
+      input:disabled + label {
+        background-color: var(--dark-x);
+      }
+
+      input:not(:disabled) + label {
+        &:hover {
+          border-color: var(--light-y);
+        }
+      }
+
       label {
-        background: var(--x);
-        border-radius: var(--theme-border-radius);
+        border: var(--theme-border-style) var(--dark-x);
+        background: var(--light-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);
+        }
       }
     }
   }

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

@@ -0,0 +1,137 @@
+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); }
+
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react';
+import { useEffect, useState } from 'react';
+import { useRelayEnvironment, fetchQuery } from 'react-relay';
+import { useField } from 'formik';
+import PropTypes from 'prop-types';
+import { ChoicesInput } from "../ChoicesInput";
+/**
+ * This is the component description.
+ */
+
+const QueryChoices = ({
+  name,
+  optionsKeyMap,
+  query,
+  variables,
+  validate,
+  loadingOption,
+  extraVariables,
+  ...otherProps
+}) => {
+  const [,, helpers] = useField({
+    name,
+    validate
+  });
+  const {
+    setError
+  } = helpers;
+  const environment = useRelayEnvironment();
+  const [isFetching, setIsFetching] = useState(false);
+  const [options, setOptions] = useState([loadingOption]);
+  const {
+    graphql,
+    accessor
+  } = query;
+
+  const getOptions = () => {
+    if (isFetching) return;
+    let searchVariables = variables;
+
+    if (extraVariables) {
+      searchVariables = { ...variables,
+        ...extraVariables
+      };
+    }
+
+    fetchQuery(environment, graphql, searchVariables).subscribe({
+      start: () => {
+        setIsFetching(true);
+      },
+      complete: () => {
+        setIsFetching(false);
+      },
+      error: fetchError => {
+        setIsFetching(false);
+        if (setError) setError(fetchError.message);
+      },
+      next: data => {
+        setOptions([...data[accessor].edges.map(({
+          node
+        }) => ({
+          value: node[optionsKeyMap.value],
+          label: optionsKeyMap.getLabel(node)
+        }))]);
+      }
+    });
+  };
+
+  useEffect(() => {
+    getOptions();
+  }, [variables]);
+  return /*#__PURE__*/React.createElement(ChoicesInput, _extends({
+    name: name,
+    validate: validate,
+    options: options
+  }, otherProps));
+};
+
+QueryChoices.propTypes = {
+  /**
+   * The choices name
+   */
+  name: PropTypes.string.isRequired,
+
+  /**
+  *  The select option keys to be used to map the data to the select options.
+  * i.e `{ value: 'id', label: 'name' }`
+  */
+  optionsKeyMap: PropTypes.shape({
+    value: PropTypes.string.isRequired,
+    getLabel: PropTypes.func.isRequired
+  }).isRequired,
+
+  /**
+  * The graphql query to fetch the options and the accessor to destructure the results from
+  */
+  query: PropTypes.shape({
+    accessor: PropTypes.string,
+    graphql: PropTypes.oneOfType([PropTypes.string, PropTypes.object]).isRequired
+  }),
+
+  /**
+   *  The variables that might be required to be used in the query to fetch
+   *  select options.
+   */
+  variables: PropTypes.objectOf(PropTypes.string),
+
+  /**
+  * The option to displayed when the select options are being fetched
+  */
+  loadingOption: PropTypes.shape({
+    value: PropTypes.string.isRequired,
+    label: PropTypes.string.isRequired,
+    disabled: PropTypes.bool.isRequired
+  }),
+
+  /**
+   * The input field validator function
+   */
+  validate: PropTypes.string,
+
+  /**
+   *  The extra variables that might be required to be used in the query to fetch
+   *  select options.
+   */
+  extraVariables: PropTypes.objectOf(PropTypes.string)
+};
+QueryChoices.defaultProps = {
+  loadingOption: {
+    value: '',
+    label: 'Fetching Options',
+    disabled: true
+  }
+};
+export default QueryChoices;

package/dist/es/f/fields/QueryChoices/index.js

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