@pareto-engineering/design-system 2.0.0-alpha.49 → 2.0.0-alpha.51

package/dist/cjs/c/SocialMediaShareButton/SocialMediaShareButton.js

@@ -38,16 +38,22 @@ var SocialMediaShareButton = _ref => {
     Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
   }, []);
   var isServer = typeof window === 'undefined';
-  var title = isServer ? '' : document.title;
-  var link = isServer ? '' : window.location.href;
+  var link = isServer ? '' : window.location.href; // We can pass additional text to the social media share buttons such as the title.
+  // See commented code below for an example on how to pass text.
+  // It is important we encode the text with the encodeURIComponent function to pass
+  // special characters (such as |, &, etc.) properly through the URL.
+  // const title = isServer ? '' : encodeURIComponent(document.title)
+
   var defaultsMap = {
     facebook: {
       icon: 'f',
-      link: "https://www.facebook.com/sharer/sharer.php?u=".concat(link, "&quote=").concat(title)
+      link: "https://www.facebook.com/sharer/sharer.php?u=".concat(link) // link: `https://www.facebook.com/sharer/sharer.php?u=${link}&quote=${title}`,
+
     },
     twitter: {
       icon: 't',
-      link: "https://twitter.com/intent/tweet?text=".concat(title, "&url=").concat(link)
+      link: "https://twitter.com/intent/tweet?url=".concat(link) // link: `https://twitter.com/intent/tweet?text=${title}&url=${link}`,
+
     }
   };
   return /*#__PURE__*/React.createElement("a", {

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

@@ -98,7 +98,7 @@ var QueryCombobox = _ref => {
           } = _ref2;
           return {
             value: node[optionsKeyMap.value],
-            label: node[optionsKeyMap.label]
+            label: optionsKeyMap.getLabel(node)
           };
         }));
       }
@@ -193,7 +193,7 @@ QueryCombobox.propTypes = {
    */
   optionsKeyMap: _propTypes.default.shape({
     value: _propTypes.default.string.isRequired,
-    label: _propTypes.default.string.isRequired
+    getLabel: _propTypes.default.func.isRequired
   }),
 
   /**
@@ -224,7 +224,7 @@ QueryCombobox.propTypes = {
 QueryCombobox.defaultProps = {
   optionsKeyMap: {
     value: 'id',
-    label: 'name'
+    getLabel: node => node.name
   },
   multiple: false,
   color: 'background2',

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

@@ -77,7 +77,7 @@ var QuerySelect = _ref => {
           } = _ref2;
           return {
             value: node[optionsKeyMap.value],
-            label: node[optionsKeyMap.label]
+            label: optionsKeyMap.getLabel(node)
           };
         })]);
       }
@@ -162,8 +162,8 @@ QuerySelect.propTypes = {
    */
   optionsKeyMap: _propTypes.default.shape({
     value: _propTypes.default.string.isRequired,
-    label: _propTypes.default.string.isRequired
-  }),
+    getLabel: _propTypes.default.func.isRequired
+  }).isRequired,
 
   /**
    * The default select option for the query select

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/c/SocialMediaShareButton/SocialMediaShareButton.js

@@ -23,16 +23,22 @@ const SocialMediaShareButton = ({
     import("./styles.scss");
   }, []);
   const isServer = typeof window === 'undefined';
-  const title = isServer ? '' : document.title;
-  const link = isServer ? '' : window.location.href;
+  const link = isServer ? '' : window.location.href; // We can pass additional text to the social media share buttons such as the title.
+  // See commented code below for an example on how to pass text.
+  // It is important we encode the text with the encodeURIComponent function to pass
+  // special characters (such as |, &, etc.) properly through the URL.
+  // const title = isServer ? '' : encodeURIComponent(document.title)
+
   const defaultsMap = {
     facebook: {
       icon: 'f',
-      link: `https://www.facebook.com/sharer/sharer.php?u=${link}&quote=${title}`
+      link: `https://www.facebook.com/sharer/sharer.php?u=${link}` // link: `https://www.facebook.com/sharer/sharer.php?u=${link}&quote=${title}`,
+
     },
     twitter: {
       icon: 't',
-      link: `https://twitter.com/intent/tweet?text=${title}&url=${link}`
+      link: `https://twitter.com/intent/tweet?url=${link}` // link: `https://twitter.com/intent/tweet?text=${title}&url=${link}`,
+
     }
   };
   return /*#__PURE__*/React.createElement("a", {

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

@@ -77,7 +77,7 @@ const QueryCombobox = ({
           node
         }) => ({
           value: node[optionsKeyMap.value],
-          label: node[optionsKeyMap.label]
+          label: optionsKeyMap.getLabel(node)
         })));
       }
     });
@@ -171,7 +171,7 @@ QueryCombobox.propTypes = {
    */
   optionsKeyMap: PropTypes.shape({
     value: PropTypes.string.isRequired,
-    label: PropTypes.string.isRequired
+    getLabel: PropTypes.func.isRequired
   }),
 
   /**
@@ -202,7 +202,7 @@ QueryCombobox.propTypes = {
 QueryCombobox.defaultProps = {
   optionsKeyMap: {
     value: 'id',
-    label: 'name'
+    getLabel: node => node.name
   },
   multiple: false,
   color: 'background2',

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

@@ -57,7 +57,7 @@ const QuerySelect = ({
           node
         }) => ({
           value: node[optionsKeyMap.value],
-          label: node[optionsKeyMap.label]
+          label: optionsKeyMap.getLabel(node)
         }))]);
       }
     });
@@ -141,8 +141,8 @@ QuerySelect.propTypes = {
    */
   optionsKeyMap: PropTypes.shape({
     value: PropTypes.string.isRequired,
-    label: PropTypes.string.isRequired
-  }),
+    getLabel: PropTypes.func.isRequired
+  }).isRequired,
 
   /**
    * The default select option for the query select

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.49",
+  "version": "2.0.0-alpha.51",
   "description": "",
   "main": "dist/cjs/index.js",
   "module": "dist/es/index.js",

package/src/__snapshots__/Storyshots.test.js.snap

@@ -10195,7 +10195,7 @@ exports[`Storyshots c/SocialMediaShareButton Base 1`] = `
 <div>
   <a
     className="base social-media-share-button x-facebook"
-    href="https://www.facebook.com/sharer/sharer.php?u=http://localhost/#/welcome&quote="
+    href="https://www.facebook.com/sharer/sharer.php?u=http://localhost/#/welcome"
     rel="noreferrer"
     target="_blank"
   >
@@ -10207,7 +10207,7 @@ exports[`Storyshots c/SocialMediaShareButton Base 1`] = `
   </a>
   <a
     className="base social-media-share-button x-twitter"
-    href="https://twitter.com/intent/tweet?text=&url=http://localhost/#/welcome"
+    href="https://twitter.com/intent/tweet?url=http://localhost/#/welcome"
     rel="noreferrer"
     target="_blank"
   >

package/src/stories/f/FormInput.stories.jsx

@@ -194,8 +194,8 @@ export const WithQueryCombobox = () => {
       },
       label        :'Search for a team',
       optionsKeyMap:{
-        value:'id',
-        label:'name',
+        value   :'id',
+        getLabel:(node) => node.name,
       },
       searchVariable:'name_Icontains',
     },
@@ -208,8 +208,8 @@ export const WithQueryCombobox = () => {
       },
       label        :'Search for teams',
       optionsKeyMap:{
-        value:'id',
-        label:'name',
+        value   :'id',
+        getLabel:(node) => node.name,
       },
       searchVariable:'name_Icontains',
       multiple      :true,
@@ -311,8 +311,8 @@ export const WithPrefetchedQuerySelect = () => {
       },
       label        :'Select Task Status',
       optionsKeyMap:{
-        value:'id',
-        label:'status',
+        value   :'id',
+        getLabel:(node) => node.status,
       },
     },
   ]

package/src/stories/f/QueryCombobox.stories.jsx

@@ -120,8 +120,8 @@ const ResolvedTemplate = ({ multiple, defaultFormikState }) => {
         <QueryCombobox
           label="Search for a team"
           optionsKeyMap={{
-            value:'id',
-            label:'name',
+            value   :'id',
+            getLabel:(node) => node.name,
           }}
           query={{
             graphql :FETCH_TEAMS_QUERY,

package/src/stories/f/QuerySelect.stories.jsx

@@ -100,8 +100,8 @@ const Template = ({ isLoading, defaultFormikState }) => {
           accessor:'allTaskStatuses',
         }}
         optionsKeyMap={{
-          value:'id',
-          label:'status',
+          value   :'id',
+          getLabel:(node) => node.status,
         }}
       />
       <FormDebugger />

package/src/ui/c/SocialMediaShareButton/SocialMediaShareButton.jsx

@@ -31,17 +31,25 @@ const SocialMediaShareButton = ({
 
   const isServer = typeof window === 'undefined'
 
-  const title = isServer ? '' : document.title
   const link = isServer ? '' : window.location.href
 
+  // We can pass additional text to the social media share buttons such as the title.
+  // See commented code below for an example on how to pass text.
+  // It is important we encode the text with the encodeURIComponent function to pass
+  // special characters (such as |, &, etc.) properly through the URL.
+
+  // const title = isServer ? '' : encodeURIComponent(document.title)
+
   const defaultsMap = {
     facebook:{
       icon:'f',
-      link:`https://www.facebook.com/sharer/sharer.php?u=${link}&quote=${title}`,
+      link:`https://www.facebook.com/sharer/sharer.php?u=${link}`,
+      // link: `https://www.facebook.com/sharer/sharer.php?u=${link}&quote=${title}`,
     },
     twitter:{
       icon:'t',
-      link:`https://twitter.com/intent/tweet?text=${title}&url=${link}`,
+      link:`https://twitter.com/intent/tweet?url=${link}`,
+      // link: `https://twitter.com/intent/tweet?text=${title}&url=${link}`,
     },
   }
 

package/src/ui/f/fields/QueryCombobox/QueryCombobox.jsx

@@ -84,7 +84,7 @@ const QueryCombobox = ({
         next:(data) => {
           setOptions(data[accessor].edges.map(({ node }) => ({
             value:node[optionsKeyMap.value],
-            label:node[optionsKeyMap.label],
+            label:optionsKeyMap.getLabel(node),
           })))
         },
       })
@@ -182,8 +182,8 @@ QueryCombobox.propTypes = {
    * i.e `{ value: 'id', label: 'name' }`
    */
   optionsKeyMap:PropTypes.shape({
-    value:PropTypes.string.isRequired,
-    label:PropTypes.string.isRequired,
+    value   :PropTypes.string.isRequired,
+    getLabel:PropTypes.func.isRequired,
   }),
 
   /**
@@ -214,8 +214,8 @@ QueryCombobox.propTypes = {
 
 QueryCombobox.defaultProps = {
   optionsKeyMap:{
-    value:'id',
-    label:'name',
+    value   :'id',
+    getLabel:(node) => node.name,
   },
   multiple       :false,
   color          :'background2',

package/src/ui/f/fields/QuerySelect/QuerySelect.jsx

@@ -69,7 +69,7 @@ const QuerySelect = ({
             defaultOption,
             ...data[accessor].edges.map(({ node }) => ({
               value:node[optionsKeyMap.value],
-              label:node[optionsKeyMap.label],
+              label:optionsKeyMap.getLabel(node),
             })),
           ])
         },
@@ -159,9 +159,9 @@ QuerySelect.propTypes = {
    * i.e `{ value: 'id', label: 'name' }`
    */
   optionsKeyMap:PropTypes.shape({
-    value:PropTypes.string.isRequired,
-    label:PropTypes.string.isRequired,
-  }),
+    value   :PropTypes.string.isRequired,
+    getLabel:PropTypes.func.isRequired,
+  }).isRequired,
 
   /**
    * The default select option for the query select

package/dist/cjs/a/GradientBackground/GradientBackground.js

@@ -1,140 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var React = _interopRequireWildcard(require("react"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _bem = _interopRequireDefault(require("@pareto-engineering/bem"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return 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); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-// Local Definitions
-var baseClassName = _bem.default.base;
-var componentClassName = 'gradient-background';
-/**
- * This is the component description.
- */
-
-var GradientBackground = _ref => {
-  var {
-    id,
-    className: userClassName,
-    style,
-    pin,
-    shape,
-    height,
-    width // ...otherProps
-
-  } = _ref;
-  (0, React.useLayoutEffect)(() => {
-    Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
-  }, []);
-  return /*#__PURE__*/React.createElement("div", {
-    id: id,
-    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
-    style: _objectSpread(_objectSpread({}, style), {}, {
-      '--pin': pin,
-      '--height': height,
-      '--width': width
-    }) // {...otherProps}
-
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "shapes"
-  }, shape === 'triangle' && /*#__PURE__*/React.createElement("div", {
-    className: "triangle"
-  }), shape === 'half-ellipses' && /*#__PURE__*/React.createElement("div", {
-    className: "half-ellipses"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "up"
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "down"
-  })), shape === 'ellipse' && /*#__PURE__*/React.createElement("div", {
-    className: "ellipse"
-  }), shape === 'diamonds' && /*#__PURE__*/React.createElement("div", {
-    className: "diamonds"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "top-right"
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "bottom-left"
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "bottom-right"
-  })), shape === 'rectangles' && /*#__PURE__*/React.createElement("div", {
-    className: "rectangles"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "top"
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "center"
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "bottom"
-  })), shape === 'half-ellipse' && /*#__PURE__*/React.createElement("div", {
-    className: "half-ellipse"
-  }), shape === 'circle' && /*#__PURE__*/React.createElement("div", {
-    className: "circle"
-  }), shape === 'half-circle' && /*#__PURE__*/React.createElement("div", {
-    className: "half-circle"
-  }), shape === 'ellipses' && /*#__PURE__*/React.createElement("div", {
-    className: "ellipses"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "first"
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "second"
-  })), shape === 'spiral' && /*#__PURE__*/React.createElement("div", {
-    className: "spiral"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "quater-circle-one"
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "quater-circle-two"
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "quater-circle-three"
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "quater-circle-four"
-  }))));
-};
-
-GradientBackground.propTypes = {
-  /**
-   * The HTML id for this element
-   */
-  id: _propTypes.default.string,
-
-  /**
-   * The HTML class names for this element
-   */
-  className: _propTypes.default.string,
-
-  /**
-   * The React-written, css properties for this element.
-   */
-  style: _propTypes.default.objectOf(_propTypes.default.string),
-
-  /**
-   * Where to pin the shapes
-   */
-  pin: _propTypes.default.oneOf(['flex-start', 'center', 'flex-end']),
-
-  /**
-   * The options of a shape to use
-   */
-  shape: _propTypes.default.oneOf(['triangle', 'ellipse', 'half-ellipse', 'half-ellipses', 'spiral', 'diamonds', 'circle', 'half-circle', 'ellipses', 'rectangles'])
-};
-GradientBackground.defaultProps = {
-  pin: 'center',
-  shape: 'triangle'
-};
-var _default = GradientBackground;
-exports.default = _default;

package/dist/cjs/a/GradientBackground/index.js

@@ -1,15 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "GradientBackground", {
-  enumerable: true,
-  get: function get() {
-    return _GradientBackground.default;
-  }
-});
-
-var _GradientBackground = _interopRequireDefault(require("./GradientBackground"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }