@pareto-engineering/design-system 0.0.1-alpha.9 → 0.0.4-testing-id.0

package/dist/es/c/index.js

@@ -1 +1,4 @@
-export { TeamGallery } from "./TeamGallery";
+export { Hero } from "./Hero";
+export { ContentSlides, useContentSlides } from "./ContentSlides";
+export { Shortener } from "./Shortener";
+export { SocialMediaShareButton } from "./SocialMediaShareButton";

package/dist/es/f/FormInput/FormInput.js

@@ -0,0 +1,106 @@
+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 { memo, useLayoutEffect } from 'react';
+import PropTypes from 'prop-types';
+import { TextInput, TextareaInput, ChoicesInput, SelectInput, QueryCombobox, QuerySelect, RatingsInput, Checkbox } from "../fields";
+
+// Local Definitions
+
+// const baseClassName = styleNames.base
+
+const componentClassName = 'form-input';
+
+/**
+ * This is the component description.
+ */
+const FormInput = _ref => {
+  let {
+    className,
+    type,
+    extraTypes,
+    disabled,
+    ...otherProps
+  } = _ref;
+  useLayoutEffect(() => {
+    import("./styles.scss");
+  }, []);
+  const newClassName = [className, componentClassName].filter(Boolean).join(' ');
+  if (type === 'textarea') {
+    return /*#__PURE__*/React.createElement(TextareaInput, _extends({
+      className: newClassName,
+      disabled: disabled
+    }, otherProps));
+  }
+  if (type === 'choices') {
+    return /*#__PURE__*/React.createElement(ChoicesInput, _extends({
+      className: newClassName,
+      disabled: disabled
+    }, otherProps));
+  }
+  if (type === 'select') {
+    return /*#__PURE__*/React.createElement(SelectInput, _extends({
+      className: newClassName,
+      disabled: disabled
+    }, otherProps));
+  }
+  if (type === 'query-combobox') {
+    return /*#__PURE__*/React.createElement(QueryCombobox, _extends({
+      className: newClassName,
+      disabled: disabled
+    }, otherProps));
+  }
+  if (type === 'query-select') {
+    return /*#__PURE__*/React.createElement(QuerySelect, _extends({
+      className: newClassName,
+      disabled: disabled
+    }, otherProps));
+  }
+  if (type === 'rating') {
+    return /*#__PURE__*/React.createElement(RatingsInput, _extends({
+      className: newClassName
+    }, otherProps));
+  }
+  if (type === 'checkbox') {
+    return /*#__PURE__*/React.createElement(Checkbox, _extends({
+      className: newClassName,
+      disabled: disabled
+    }, otherProps));
+  }
+  if (extraTypes?.[type]) {
+    const Component = extraTypes[type];
+    return /*#__PURE__*/React.createElement(Component, _extends({
+      className: newClassName,
+      disabled: disabled
+    }, otherProps));
+  }
+  return /*#__PURE__*/React.createElement(TextInput, _extends({
+    className: newClassName,
+    disabled: disabled,
+    type: type
+  }, otherProps));
+};
+FormInput.propTypes = {
+  /**
+   * The HTML class names for this element
+   */
+  className: PropTypes.string,
+  /**
+   * The HTML class names for this element
+   */
+  type: PropTypes.oneOf(['text', 'email', 'password', 'number', 'date', 'datetime', 'month', 'tel', 'hidden', 'select', 'choices', 'textarea', 'query-combobox', 'url', 'rating',
+  // to be removed
+  'extendedTypeInput']),
+  /**
+   * The object with external Input types that would make the form input extensible
+   */
+  extraTypes: PropTypes.objectOf(PropTypes.func),
+  /**
+   * Whether the Form input input should be disabled
+   */
+  disabled: PropTypes.bool
+};
+FormInput.defaultProps = {
+  disabled: false
+};
+export default /*#__PURE__*/memo(FormInput);

package/dist/es/f/FormInput/index.js

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

package/dist/es/f/FormInput/styles.scss

@@ -0,0 +1,11 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+
+@use "@pareto-engineering/bem";
+
+$default-margin: 1em;
+
+.#{bem.$base}.form-input {
+    &+& {
+        margin-top: $default-margin;
+    }
+}

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

@@ -0,0 +1,61 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react';
+import { useState, useLayoutEffect, useContext } from 'react';
+import PropTypes from 'prop-types';
+import { Button } from "../../../b";
+import { FormikContext } from 'formik';
+
+// Local Definitions
+
+const componentClassName = 'debugger';
+
+/**
+ * This is the component description.
+ */
+const Debugger = _ref => {
+  let {
+    id,
+    className: userClassName,
+    style,
+    initialIsOpen
+    // ...otherProps
+  } = _ref;
+  useLayoutEffect(() => {
+    import("./styles.scss");
+  }, []);
+  const [isOpen, setIsOpen] = useState(initialIsOpen);
+  const toggleDebugger = () => setIsOpen(!isOpen);
+  const formikContext = useContext(FormikContext);
+  return /*#__PURE__*/React.createElement("div", {
+    id: id,
+    className: [componentClassName, userClassName].filter(e => e).join(' '),
+    style: style
+  }, /*#__PURE__*/React.createElement(Button, {
+    onClick: toggleDebugger,
+    color: "main2"
+  }, isOpen ? 'Close FormDebugger' : 'Open FormDebugger'), isOpen && /*#__PURE__*/React.createElement("pre", {
+    className: "debuger-content"
+  }, JSON.stringify(formikContext, null, 2)));
+};
+Debugger.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),
+  /**
+   * state to control the opening and closing of the debugger
+   */
+  initialIsOpen: PropTypes.bool
+};
+Debugger.defaultProps = {
+  initialIsOpen: false
+};
+export default Debugger;

package/dist/es/f/common/Debugger/index.js

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

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

@@ -0,0 +1,12 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+
+@use "@pareto-engineering/bem";
+
+.#{bem.$base}.debuger {
+  .debuger-content {
+    font-size: calc(var(--s-1) * 1em);
+    white-space: pre;
+  }
+}
+
+

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

@@ -0,0 +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
+
+const baseClassName = styleNames.base;
+const componentClassName = 'description';
+
+/**
+ * This is the component description.
+ */
+const Description = _ref => {
+  let {
+    id,
+    className: userClassName,
+    style,
+    description,
+    name,
+    color
+    // ...otherProps
+  } = _ref;
+  useLayoutEffect(() => {
+    import("./styles.scss");
+  }, []);
+  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 base color for the description
+   */
+  color: PropTypes.string,
+  /**
+   * Input description - extra description to guide a use in filling the input
+   */
+  description: PropTypes.string,
+  /**
+   * The input name (html - and Formik state)
+   */
+  name: PropTypes.string.isRequired
+};
+Description.defaultProps = {
+  color: 'metadata'
+};
+export default Description;

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

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

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

@@ -0,0 +1,10 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+
+@use "@pareto-engineering/bem";
+
+
+.#{bem.$base}.description {
+  color: var(--x);
+}
+
+

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

@@ -0,0 +1,77 @@
+/* @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 = 'form-label';
+
+/**
+ * This is the component description.
+ */
+const Label = _ref => {
+  let {
+    id,
+    className: userClassName,
+    style,
+    children,
+    name,
+    color,
+    optional,
+    as: Wrapper
+    // ...otherProps
+  } = _ref;
+  useLayoutEffect(() => {
+    import("./styles.scss");
+  }, []);
+  return /*#__PURE__*/React.createElement(Wrapper, {
+    htmlFor: Wrapper === 'label' ? name : undefined,
+    id: id,
+    className: [baseClassName, componentClassName, userClassName, `x-${color}`].filter(e => e).join(' '),
+    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,
+  /**
+   * Whether the input should have an optional tag
+   */
+  optional: PropTypes.bool
+};
+Label.defaultProps = {
+  as: 'label',
+  color: 'main2',
+  optional: false
+};
+export default Label;

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

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

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

@@ -0,0 +1,8 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+
+@use "@pareto-engineering/bem";
+@use "../../../form.scss";
+
+.#{bem.$base}.form-label {
+ color: var(--dark-x);
+}

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

@@ -0,0 +1,3 @@
+export { Label as FormLabel } from "./Label";
+export { Description as FormDescription } from "./Description";
+export { Debugger as FormDebugger } from "./Debugger";

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';
+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/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

@@ -0,0 +1,130 @@
+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 { Choice } from "./common";
+import { FormLabel } from "../../common";
+const baseClassName = styleNames.base;
+const componentClassName = 'choices-input';
+
+/**
+ * This is the component description.
+ */
+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");
+  }, []);
+  return /*#__PURE__*/React.createElement("div", {
+    id: id,
+    className: [baseClassName, componentClassName, userClassName, multiple && 'multiple', color && `x-${color}`, colorChecked && `y-${colorChecked}`].filter(e => e).join(' '),
+    style: {
+      '--grid-columns-desktop': gridColumnsDesktop,
+      '--grid-columns-mobile': gridColumnsMobile,
+      ...style
+    }
+    // {...otherProps}
+  }, label && /*#__PURE__*/React.createElement(FormLabel, {
+    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: `${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
+   */
+  options: PropTypes.arrayOf(PropTypes.shape({
+    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,
+  /**
+  * Whether the input is optional or not
+  */
+  optional: PropTypes.bool
+};
+ChoicesInput.defaultProps = {
+  gridColumnsMobile: 2,
+  gridColumnsDesktop: 3,
+  color: 'background2',
+  colorChecked: 'main2',
+  disabled: false
+};
+export default /*#__PURE__*/memo(ChoicesInput);