@pareto-engineering/design-system 2.0.0-alpha.60 → 2.0.0-alpha.61

package/dist/cjs/{experimental/GradientBackground/GradientBackground.js → a/ColumnLabel/ColumnLabel.js}

@@ -25,46 +25,39 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 // Local Definitions
 var baseClassName = _bem.default.base;
-var componentClassName = 'gradient-background';
+var componentClassName = 'column-label';
 /**
  * This is the component description.
  */
 
-var GradientBackground = _ref => {
+var ColumnLabel = _ref => {
   var {
     id,
     className: userClassName,
     style,
-    pin,
-    shape // ...otherProps
-
+    value,
+    color: FontColor,
+    getColor,
+    image
   } = _ref;
   (0, React.useLayoutEffect)(() => {
     Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
   }, []);
+  var color = getColor ? getColor(value) : FontColor;
   return /*#__PURE__*/React.createElement("div", {
     id: id,
     className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
     style: _objectSpread(_objectSpread({}, style), {}, {
-      '--pin': pin
-    }) // {...otherProps}
-
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "shapes"
-  }, shape === 'triangle' && /*#__PURE__*/React.createElement("div", {
-    className: "triangle"
-  }), shape === 'ellipses' && /*#__PURE__*/React.createElement("div", {
-    className: "ellipses"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "up"
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "down"
-  })), shape === 'ellipse' && /*#__PURE__*/React.createElement("div", {
-    className: "ellipse"
-  })));
+      color
+    })
+  }, image && /*#__PURE__*/React.createElement("img", {
+    className: "image v50 mr-v",
+    src: image,
+    alt: "".concat(value)
+  }), value);
 };
 
-GradientBackground.propTypes = {
+ColumnLabel.propTypes = {
   /**
    * The HTML id for this element
    */
@@ -81,18 +74,27 @@ GradientBackground.propTypes = {
   style: _propTypes.default.objectOf(_propTypes.default.string),
 
   /**
-   * Where to pin the shapes
+   *  The value to display for the label
+   */
+  value: _propTypes.default.string,
+
+  /**
+   *  The default font color to display for the label
+   */
+  color: _propTypes.default.string,
+
+  /**
+   * The function passed to decide the color of the label
    */
-  pin: _propTypes.default.oneOf(['flex-start', 'center', 'flex-end']),
+  getColor: _propTypes.default.func,
 
   /**
-   *
+   * The image to be displayed if passed
    */
-  shape: _propTypes.default.oneOf(['triangle', 'ellipse', 'spiral', 'diamonds', 'circles', 'ellipses'])
+  image: _propTypes.default.string
 };
-GradientBackground.defaultProps = {
-  pin: 'center',
-  shape: 'triangle'
+ColumnLabel.defaultProps = {
+  color: 'var(--on-x)'
 };
-var _default = GradientBackground;
+var _default = ColumnLabel;
 exports.default = _default;

package/dist/cjs/{c/SiteMission → a/ColumnLabel}/index.js

@@ -3,13 +3,13 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "SiteMission", {
+Object.defineProperty(exports, "ColumnLabel", {
   enumerable: true,
   get: function get() {
-    return _SiteMission.default;
+    return _ColumnLabel.default;
   }
 });
 
-var _SiteMission = _interopRequireDefault(require("./SiteMission"));
+var _ColumnLabel = _interopRequireDefault(require("./ColumnLabel"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/dist/cjs/a/ColumnLabel/styles.scss

@@ -0,0 +1,22 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+@use "@pareto-engineering/bem";
+
+$default-image-size: 2em;
+$default-font-size: calc(1 em * var(--s-1));
+$default-padding: .5em;
+
+.#{bem.$base}.column-label{
+    align-items: center;
+    background: var(--x);
+    border-radius: 3em;
+    display: inline-flex;
+    font-size: $default-font-size;
+    padding: $default-padding;
+    white-space: nowrap;
+
+    img {
+        border-radius: 50%;
+        height: $default-image-size;
+        width: $default-image-size;
+    }
+}

package/dist/cjs/{c/BlogPostsList/BlogPostsList.js → a/Label/Label.js}

@@ -11,8 +11,6 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _bem = _interopRequireDefault(require("@pareto-engineering/bem"));
 
-var _common = require("./common");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -21,31 +19,32 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 // Local Definitions
 var baseClassName = _bem.default.base;
-var componentClassName = 'blog-posts-list';
+var componentClassName = 'label';
 /**
  * This is the component description.
  */
 
-var BlogPostsList = _ref => {
+var Label = _ref => {
   var {
     id,
     className: userClassName,
     style,
-    children // ...otherProps
-
+    children,
+    color,
+    isCompact,
+    isGhost
   } = _ref;
   (0, React.useLayoutEffect)(() => {
     Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
   }, []);
   return /*#__PURE__*/React.createElement("div", {
     id: id,
-    className: [baseClassName, componentClassName, userClassName, 'u1'].filter(e => e).join(' '),
-    style: style // {...otherProps}
-
+    className: [baseClassName, componentClassName, userClassName, "x-".concat(color), isCompact && _bem.default.modifierCompact, isGhost && _bem.default.modifierGhost].filter(e => e).join(' '),
+    style: style
   }, children);
 };
 
-BlogPostsList.propTypes = {
+Label.propTypes = {
   /**
    * The HTML id for this element
    */
@@ -61,13 +60,28 @@ BlogPostsList.propTypes = {
    */
   style: _propTypes.default.objectOf(_propTypes.default.string),
 
+  /**
+   * Whether the button has the ghost style
+   */
+  isGhost: _propTypes.default.bool,
+
+  /**
+   * Whether the button is compact
+   */
+  isCompact: _propTypes.default.bool,
+
+  /**
+   *  The default font color to display for the label
+   */
+  color: _propTypes.default.string,
+
   /**
    *  The children JSX
    */
   children: _propTypes.default.node
 };
-BlogPostsList.defaultProps = {// someProp:false
+Label.defaultProps = {
+  color: 'main1'
 };
-BlogPostsList.Card = _common.Card;
-var _default = BlogPostsList;
+var _default = Label;
 exports.default = _default;

package/dist/cjs/a/{Popover/common/Item → Label}/index.js

@@ -3,13 +3,13 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "Item", {
+Object.defineProperty(exports, "Label", {
   enumerable: true,
   get: function get() {
-    return _Item.default;
+    return _Label.default;
   }
 });
 
-var _Item = _interopRequireDefault(require("./Item"));
+var _Label = _interopRequireDefault(require("./Label"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/dist/cjs/a/Label/styles.scss

@@ -0,0 +1,34 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+@use "@pareto-engineering/bem";
+
+$default-padding-bottom: .4em;
+$default-padding-side: .7em;
+$default-padding-top: .5em;
+
+$compact-padding: $default-padding-top*.8 $default-padding-side*.8 $default-padding-bottom*.8;
+$default-padding: $default-padding-top $default-padding-side $default-padding-bottom;
+
+$default-color: primary;
+$default-image-size: 2em;
+$default-font-size: calc(1 em * var(--s-1));
+
+.#{bem.$base}.label{
+    align-items: center;
+    background: var(--x, var(--#{$default-color}));
+    border-radius: 3em;
+    color: var(--on-x, var(--on-#{$default-color}));
+    display: inline-flex;
+    font-size: $default-font-size;
+    padding: $default-padding;
+    white-space: nowrap;
+
+    &.#{bem.$modifier-compact} {
+        padding: $compact-padding;
+    }
+
+    &.#{bem.$modifier-ghost} {
+        background: transparent;
+        border: 1px solid var(--x, var(--#{$default-color}));
+        color: var(--x, var(--#{$default-color}));
+    }
+}

package/dist/cjs/a/index.js

@@ -183,6 +183,12 @@ Object.defineProperty(exports, "Alert", {
     return _Alert.Alert;
   }
 });
+Object.defineProperty(exports, "Label", {
+  enumerable: true,
+  get: function get() {
+    return _Label.Label;
+  }
+});
 
 var _SVG = require("./SVG");
 
@@ -236,4 +242,6 @@ var _ContentTree = require("./ContentTree");
 
 var _Popover = require("./Popover");
 
-var _Alert = require("./Alert");
+var _Alert = require("./Alert");
+
+var _Label = require("./Label");

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

@@ -70,7 +70,7 @@ var ChoicesInput = _ref => {
   }, options.map(choice => /*#__PURE__*/React.createElement(_common.Choice, _extends({
     key: choice.value,
     name: name,
-    id: "".concat(name, "-").concat(choice.value),
+    id: "".concat(id, "-").concat(choice.value),
     multiple: multiple,
     validate: validate,
     disabled: disabled

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

@@ -41,18 +41,15 @@ var Choice = _ref => {
     validate,
     disabled
   } = _ref;
-  var type = multiple ? 'checkbox' : 'radio';
   var [field] = (0, _formik.useField)({
     name,
-    validate,
-    type,
-    value
+    validate
   });
   return /*#__PURE__*/React.createElement("div", {
     className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
     style: style
   }, /*#__PURE__*/React.createElement("input", _extends({
-    type: type,
+    type: multiple ? 'checkbox' : 'radio',
     id: id,
     name: name
   }, field, {

package/dist/cjs/f/fields/TaskRecommendationInput/TaskRecommendationInput.js

@@ -60,7 +60,7 @@ var TaskRecommendationInput = _ref => {
   }, /*#__PURE__*/React.createElement("div", {
     className: "v1 p-v task"
   }, /*#__PURE__*/React.createElement(_common.FormLabel, {
-    className: "uc mb-v ".concat(isOptionSelected ? _bem.default.modifierActive : ''),
+    className: "uc mb-v ".concat(isOptionSelected ? 'c-on-x' : 'c-x'),
     name: name
   }, label), /*#__PURE__*/React.createElement("input", _extends({}, field, {
     value: value,

package/dist/cjs/f/fields/TaskRecommendationInput/styles.scss

@@ -16,10 +16,6 @@
       align-items: center;
       height: 100%;
 
-      .#{bem.$modifier-active} {
-        color: var(--on-x);
-      }
-
       .input {
         appearance: none;
         position: absolute;

package/dist/es/a/ColumnLabel/ColumnLabel.js

@@ -0,0 +1,78 @@
+/* @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 = 'column-label';
+/**
+ * This is the component description.
+ */
+
+const ColumnLabel = ({
+  id,
+  className: userClassName,
+  style,
+  value,
+  color: FontColor,
+  getColor,
+  image
+}) => {
+  useLayoutEffect(() => {
+    import("./styles.scss");
+  }, []);
+  const color = getColor ? getColor(value) : FontColor;
+  return /*#__PURE__*/React.createElement("div", {
+    id: id,
+    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
+    style: { ...style,
+      color
+    }
+  }, image && /*#__PURE__*/React.createElement("img", {
+    className: "image v50 mr-v",
+    src: image,
+    alt: `${value}`
+  }), value);
+};
+
+ColumnLabel.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 value to display for the label
+   */
+  value: PropTypes.string,
+
+  /**
+   *  The default font color to display for the label
+   */
+  color: PropTypes.string,
+
+  /**
+   * The function passed to decide the color of the label
+   */
+  getColor: PropTypes.func,
+
+  /**
+   * The image to be displayed if passed
+   */
+  image: PropTypes.string
+};
+ColumnLabel.defaultProps = {
+  color: 'var(--on-x)'
+};
+export default ColumnLabel;

package/dist/es/a/ColumnLabel/index.js

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

package/dist/es/a/ColumnLabel/styles.scss

@@ -0,0 +1,22 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+@use "@pareto-engineering/bem";
+
+$default-image-size: 2em;
+$default-font-size: calc(1 em * var(--s-1));
+$default-padding: .5em;
+
+.#{bem.$base}.column-label{
+    align-items: center;
+    background: var(--x);
+    border-radius: 3em;
+    display: inline-flex;
+    font-size: $default-font-size;
+    padding: $default-padding;
+    white-space: nowrap;
+
+    img {
+        border-radius: 50%;
+        height: $default-image-size;
+        width: $default-image-size;
+    }
+}

package/dist/es/{c/BlogPostsList/BlogPostsList.js → a/Label/Label.js}

@@ -2,34 +2,34 @@
 import * as React from 'react';
 import { useLayoutEffect } from 'react';
 import PropTypes from 'prop-types';
-import styleNames from '@pareto-engineering/bem';
-import { Card } from "./common"; // Local Definitions
+import styleNames from '@pareto-engineering/bem'; // Local Definitions
 
 const baseClassName = styleNames.base;
-const componentClassName = 'blog-posts-list';
+const componentClassName = 'label';
 /**
  * This is the component description.
  */
 
-const BlogPostsList = ({
+const Label = ({
   id,
   className: userClassName,
   style,
-  children // ...otherProps
-
+  children,
+  color,
+  isCompact,
+  isGhost
 }) => {
   useLayoutEffect(() => {
     import("./styles.scss");
   }, []);
   return /*#__PURE__*/React.createElement("div", {
     id: id,
-    className: [baseClassName, componentClassName, userClassName, 'u1'].filter(e => e).join(' '),
-    style: style // {...otherProps}
-
+    className: [baseClassName, componentClassName, userClassName, `x-${color}`, isCompact && styleNames.modifierCompact, isGhost && styleNames.modifierGhost].filter(e => e).join(' '),
+    style: style
   }, children);
 };
 
-BlogPostsList.propTypes = {
+Label.propTypes = {
   /**
    * The HTML id for this element
    */
@@ -45,12 +45,27 @@ BlogPostsList.propTypes = {
    */
   style: PropTypes.objectOf(PropTypes.string),
 
+  /**
+   * Whether the button has the ghost style
+   */
+  isGhost: PropTypes.bool,
+
+  /**
+   * Whether the button is compact
+   */
+  isCompact: PropTypes.bool,
+
+  /**
+   *  The default font color to display for the label
+   */
+  color: PropTypes.string,
+
   /**
    *  The children JSX
    */
   children: PropTypes.node
 };
-BlogPostsList.defaultProps = {// someProp:false
+Label.defaultProps = {
+  color: 'main1'
 };
-BlogPostsList.Card = Card;
-export default BlogPostsList;
+export default Label;

package/dist/es/{c/BlogPostsList/common/Card → a/Label}/index.js

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

package/dist/es/a/Label/styles.scss

@@ -0,0 +1,34 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+@use "@pareto-engineering/bem";
+
+$default-padding-bottom: .4em;
+$default-padding-side: .7em;
+$default-padding-top: .5em;
+
+$compact-padding: $default-padding-top*.8 $default-padding-side*.8 $default-padding-bottom*.8;
+$default-padding: $default-padding-top $default-padding-side $default-padding-bottom;
+
+$default-color: primary;
+$default-image-size: 2em;
+$default-font-size: calc(1 em * var(--s-1));
+
+.#{bem.$base}.label{
+    align-items: center;
+    background: var(--x, var(--#{$default-color}));
+    border-radius: 3em;
+    color: var(--on-x, var(--on-#{$default-color}));
+    display: inline-flex;
+    font-size: $default-font-size;
+    padding: $default-padding;
+    white-space: nowrap;
+
+    &.#{bem.$modifier-compact} {
+        padding: $compact-padding;
+    }
+
+    &.#{bem.$modifier-ghost} {
+        background: transparent;
+        border: 1px solid var(--x, var(--#{$default-color}));
+        color: var(--x, var(--#{$default-color}));
+    }
+}

package/dist/es/a/index.js

@@ -24,4 +24,5 @@ export { SnapScroller } from "./SnapScroller";
 export { BackgroundGradient } from "./BackgroundGradient";
 export { ContentTree } from "./ContentTree";
 export { Popover } from "./Popover";
-export { Alert } from "./Alert";
+export { Alert } from "./Alert";
+export { Label } from "./Label";

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

@@ -49,7 +49,7 @@ const ChoicesInput = ({
   }, options.map(choice => /*#__PURE__*/React.createElement(Choice, _extends({
     key: choice.value,
     name: name,
-    id: `${name}-${choice.value}`,
+    id: `${id}-${choice.value}`,
     multiple: multiple,
     validate: validate,
     disabled: disabled

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

@@ -25,18 +25,15 @@ const Choice = ({
   validate,
   disabled
 }) => {
-  const type = multiple ? 'checkbox' : 'radio';
   const [field] = useField({
     name,
-    validate,
-    type,
-    value
+    validate
   });
   return /*#__PURE__*/React.createElement("div", {
     className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
     style: style
   }, /*#__PURE__*/React.createElement("input", _extends({
-    type: type,
+    type: multiple ? 'checkbox' : 'radio',
     id: id,
     name: name
   }, field, {

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

@@ -43,7 +43,7 @@ const TaskRecommendationInput = ({
   }, /*#__PURE__*/React.createElement("div", {
     className: "v1 p-v task"
   }, /*#__PURE__*/React.createElement(FormLabel, {
-    className: `uc mb-v ${isOptionSelected ? styleNames.modifierActive : ''}`,
+    className: `uc mb-v ${isOptionSelected ? 'c-on-x' : 'c-x'}`,
     name: name
   }, label), /*#__PURE__*/React.createElement("input", _extends({}, field, {
     value: value,

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

@@ -16,10 +16,6 @@
       align-items: center;
       height: 100%;
 
-      .#{bem.$modifier-active} {
-        color: var(--on-x);
-      }
-
       .input {
         appearance: none;
         position: absolute;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pareto-engineering/design-system",
-  "version": "2.0.0-alpha.60",
+  "version": "2.0.0-alpha.61",
   "description": "",
   "main": "dist/cjs/index.js",
   "module": "dist/es/index.js",