@pareto-engineering/design-system 4.0.0-alpha.78 → 4.0.0-alpha.81

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

@@ -10355,21 +10355,6 @@ exports[`Storyshots a/Label Normal 1`] = `
 ]
 `;
 
-exports[`Storyshots a/LexicalPreview Base 1`] = `
-<div
-  className="base lexical-preview y-paragraph"
->
-  <div
-    aria-autocomplete="none"
-    aria-readonly={true}
-    className="content-editable"
-    contentEditable={false}
-    role="textbox"
-    spellCheck={true}
-  />
-</div>
-`;
-
 exports[`Storyshots a/LoadingCircle Base 1`] = `
 <div
   className="x-main1 b-x"
@@ -11655,16 +11640,21 @@ exports[`Storyshots a/Tooltip Base 1`] = `
   }
 >
   <div
-    aria-describedby="test-tooltip"
+    className="base tooltip x-background-cards"
   >
-    <button
-      className="base button x-main"
-      type="button"
+    <div
+      aria-describedby="test-tooltip"
+      className="tooltip-trigger-wrapper"
     >
-      Hover on me!
-    </button>
+      <button
+        className="base button x-main"
+        type="button"
+      >
+        Hover on me!
+      </button>
+    </div>
     <div
-      className="base tooltip bottom x-background-cards"
+      className="tooltip-content bottom"
       id="test-tooltip"
       role="tooltip"
     >
@@ -11683,9 +11673,6 @@ exports[`Storyshots a/Tooltip Base 1`] = `
       </div>
     </div>
   </div>
-  <p>
-    With some more content around
-  </p>
 </div>
 `;
 
@@ -11703,16 +11690,21 @@ exports[`Storyshots a/Tooltip Left 1`] = `
   }
 >
   <div
-    aria-describedby="test-tooltip"
+    className="base tooltip x-background-cards"
   >
-    <button
-      className="base button x-main"
-      type="button"
+    <div
+      aria-describedby="test-tooltip"
+      className="tooltip-trigger-wrapper"
     >
-      Hover on me!
-    </button>
+      <button
+        className="base button x-main"
+        type="button"
+      >
+        Hover on me!
+      </button>
+    </div>
     <div
-      className="base tooltip left x-background-cards"
+      className="tooltip-content left"
       id="test-tooltip"
       role="tooltip"
     >
@@ -11731,9 +11723,6 @@ exports[`Storyshots a/Tooltip Left 1`] = `
       </div>
     </div>
   </div>
-  <p>
-    With some more content around
-  </p>
 </div>
 `;
 
@@ -11751,16 +11740,21 @@ exports[`Storyshots a/Tooltip Right 1`] = `
   }
 >
   <div
-    aria-describedby="test-tooltip"
+    className="base tooltip x-background-cards"
   >
-    <button
-      className="base button x-main"
-      type="button"
+    <div
+      aria-describedby="test-tooltip"
+      className="tooltip-trigger-wrapper"
     >
-      Hover on me!
-    </button>
+      <button
+        className="base button x-main"
+        type="button"
+      >
+        Hover on me!
+      </button>
+    </div>
     <div
-      className="base tooltip right x-background-cards"
+      className="tooltip-content right"
       id="test-tooltip"
       role="tooltip"
     >
@@ -11779,9 +11773,6 @@ exports[`Storyshots a/Tooltip Right 1`] = `
       </div>
     </div>
   </div>
-  <p>
-    With some more content around
-  </p>
 </div>
 `;
 
@@ -11799,16 +11790,21 @@ exports[`Storyshots a/Tooltip Top 1`] = `
   }
 >
   <div
-    aria-describedby="test-tooltip"
+    className="base tooltip x-background-cards"
   >
-    <button
-      className="base button x-main"
-      type="button"
+    <div
+      aria-describedby="test-tooltip"
+      className="tooltip-trigger-wrapper"
     >
-      Hover on me!
-    </button>
+      <button
+        className="base button x-main"
+        type="button"
+      >
+        Hover on me!
+      </button>
+    </div>
     <div
-      className="base tooltip top x-background-cards"
+      className="tooltip-content top"
       id="test-tooltip"
       role="tooltip"
     >
@@ -11827,9 +11823,6 @@ exports[`Storyshots a/Tooltip Top 1`] = `
       </div>
     </div>
   </div>
-  <p>
-    With some more content around
-  </p>
 </div>
 `;
 
@@ -21285,42 +21278,6 @@ exports[`Storyshots b/Card/Group Card Group Not Snap Scroller 1`] = `
 </div>
 `;
 
-exports[`Storyshots b/ExpandableLexicalPreview Base 1`] = `
-<div
-  className="base expandable-lexical-preview y-paragraph"
-  style={
-    {
-      "--resize": "vertical",
-    }
-  }
->
-  <p
-    className="title h2"
-  >
-    Task Instructions
-  </p>
-  <div
-    className="lexical-content"
-  >
-    <div
-      aria-autocomplete="none"
-      aria-readonly={true}
-      className="content-editable"
-      contentEditable={false}
-      role="textbox"
-      spellCheck={true}
-    />
-    <button
-      className="base button base expand-button ai-icon x-background-far modifierCompact"
-      onClick={[Function]}
-      type="button"
-    >
-      D
-    </button>
-  </div>
-</div>
-`;
-
 exports[`Storyshots b/Logo Base 1`] = `
 <svg
   className="base svg base logo x-paragraph y-transparent"
@@ -26746,9 +26703,9 @@ exports[`Storyshots f/fields/EditorInput Base 1`] = `
                       className="rcp-saturation-cursor"
                       style={
                         {
-                          "backgroundColor": "rgb(0 0 0)",
+                          "backgroundColor": "rgb(255 255 255)",
                           "left": 0,
-                          "top": 200,
+                          "top": 0,
                         }
                       }
                     />
@@ -26786,7 +26743,7 @@ exports[`Storyshots f/fields/EditorInput Base 1`] = `
                         className="rcp-alpha"
                         style={
                           {
-                            "background": "linear-gradient(to right, rgb(0 0 0 / 0), rgb(0 0 0 / 1)) top left / auto auto,
+                            "background": "linear-gradient(to right, rgb(255 255 255 / 0), rgb(255 255 255 / 1)) top left / auto auto,
                       conic-gradient(#666 0.25turn, #999 0.25turn 0.5turn, #666 0.5turn 0.75turn, #999 0.75turn) top left / 12px 12px
                       repeat",
                           }
@@ -26796,7 +26753,7 @@ exports[`Storyshots f/fields/EditorInput Base 1`] = `
                           className="rcp-alpha-cursor"
                           style={
                             {
-                              "background": "linear-gradient(to right, rgb(0 0 0 / 1), rgb(0 0 0 / 1)) top left / auto auto,
+                              "background": "linear-gradient(to right, rgb(255 255 255 / 1), rgb(255 255 255 / 1)) top left / auto auto,
                         conic-gradient(#666 0.25turn, #999 0.25turn 0.5turn, #666 0.5turn 0.75turn, #999 0.75turn) -5px 2px / 12px 12px
                         repeat",
                               "left": 1,
@@ -27224,9 +27181,9 @@ exports[`Storyshots f/fields/EditorInput Optional 1`] = `
                       className="rcp-saturation-cursor"
                       style={
                         {
-                          "backgroundColor": "rgb(0 0 0)",
+                          "backgroundColor": "rgb(255 255 255)",
                           "left": 0,
-                          "top": 200,
+                          "top": 0,
                         }
                       }
                     />
@@ -27264,7 +27221,7 @@ exports[`Storyshots f/fields/EditorInput Optional 1`] = `
                         className="rcp-alpha"
                         style={
                           {
-                            "background": "linear-gradient(to right, rgb(0 0 0 / 0), rgb(0 0 0 / 1)) top left / auto auto,
+                            "background": "linear-gradient(to right, rgb(255 255 255 / 0), rgb(255 255 255 / 1)) top left / auto auto,
                       conic-gradient(#666 0.25turn, #999 0.25turn 0.5turn, #666 0.5turn 0.75turn, #999 0.75turn) top left / 12px 12px
                       repeat",
                           }
@@ -27274,7 +27231,7 @@ exports[`Storyshots f/fields/EditorInput Optional 1`] = `
                           className="rcp-alpha-cursor"
                           style={
                             {
-                              "background": "linear-gradient(to right, rgb(0 0 0 / 1), rgb(0 0 0 / 1)) top left / auto auto,
+                              "background": "linear-gradient(to right, rgb(255 255 255 / 1), rgb(255 255 255 / 1)) top left / auto auto,
                         conic-gradient(#666 0.25turn, #999 0.25turn 0.5turn, #666 0.5turn 0.75turn, #999 0.75turn) -5px 2px / 12px 12px
                         repeat",
                               "left": 1,
@@ -30260,6 +30217,128 @@ exports[`Storyshots f/fields/SelectInput String And Objects 1`] = `
 </form>
 `;
 
+exports[`Storyshots f/fields/SelectInput With Default 1`] = `
+<form
+  action="#"
+  onReset={[Function]}
+  onSubmit={[Function]}
+>
+  <div
+    className="base select-input"
+  >
+    <div
+      className="base single"
+    >
+      <label
+        className="base form-label x-paragraph"
+        htmlFor="workType"
+      >
+        Work Type
+      </label>
+      <div
+        className="select-wrapper"
+      >
+        <select
+          className="input y-paragraph"
+          disabled={false}
+          id="workType"
+          name="workType"
+          onBlur={[Function]}
+          onChange={[Function]}
+          value=""
+        >
+          <option
+            disabled={true}
+            value=""
+          >
+            Select an option
+          </option>
+          <option
+            disabled={false}
+            value="Work"
+          >
+            Work
+          </option>
+          <option
+            disabled={false}
+            value="Managing"
+          >
+            Managing
+          </option>
+          <option
+            disabled={false}
+            value="Training"
+          >
+            Training
+          </option>
+        </select>
+      </div>
+    </div>
+  </div>
+</form>
+`;
+
+exports[`Storyshots f/fields/SelectInput With Default No Override 1`] = `
+<form
+  action="#"
+  onReset={[Function]}
+  onSubmit={[Function]}
+>
+  <div
+    className="base select-input"
+  >
+    <div
+      className="base single"
+    >
+      <label
+        className="base form-label x-paragraph"
+        htmlFor="workType"
+      >
+        Work Type
+      </label>
+      <div
+        className="select-wrapper"
+      >
+        <select
+          className="input y-paragraph"
+          disabled={false}
+          id="workType"
+          name="workType"
+          onBlur={[Function]}
+          onChange={[Function]}
+          value="Training"
+        >
+          <option
+            disabled={true}
+            value=""
+          >
+            Select an option
+          </option>
+          <option
+            disabled={false}
+            value="Work"
+          >
+            Work
+          </option>
+          <option
+            disabled={false}
+            value="Managing"
+          >
+            Managing
+          </option>
+          <option
+            disabled={false}
+            value="Training"
+          >
+            Training
+          </option>
+        </select>
+      </div>
+    </div>
+  </div>
+</form>
+`;
+
 exports[`Storyshots f/fields/TextInput Base 1`] = `
 <form
   action="#"
@@ -31170,6 +31249,49 @@ exports[`Storyshots f/fields/TextareaInput Vertical Resize 1`] = `
 </form>
 `;
 
+exports[`Storyshots g/ExpandableLexicalPreview Base 1`] = `
+<div
+  className="base expandable-lexical-preview y-paragraph"
+>
+  <p
+    className="title h2"
+  >
+    Task Instructions
+  </p>
+  <div
+    className="base editor-input y-paragraph disabled"
+    id="the-bad-ass-input"
+    style={
+      {
+        "--resize": "vertical",
+        "--rows": "10em",
+      }
+    }
+  >
+    <label
+      className="base form-label x-paragraph"
+      htmlFor="taskDescription"
+    />
+    <div
+      aria-autocomplete="none"
+      aria-readonly={true}
+      className="content-editable"
+      contentEditable={false}
+      id="taskDescription"
+      role="textbox"
+      spellCheck={true}
+    />
+  </div>
+  <button
+    className="base button expand-button ai-icon x-background-far modifierCompact"
+    onClick={[Function]}
+    type="button"
+  >
+    D
+  </button>
+</div>
+`;
+
 exports[`Storyshots r/SwitchRouteMap Base 1`] = `"This component does not need a visual test."`;
 
 exports[`Storyshots r/common/PrivateRoute Base 1`] = `"This component does not need a visual test."`;

package/dist/cjs/a/LexicalPreview/LexicalPreview.js

@@ -1,90 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var React = _interopRequireWildcard(require("react"));
-var _LexicalComposer = require("@lexical/react/LexicalComposer");
-var _LexicalRichTextPlugin = require("@lexical/react/LexicalRichTextPlugin");
-var _LexicalContentEditable = require("@lexical/react/LexicalContentEditable");
-var _link = require("@lexical/link");
-var _list = require("@lexical/list");
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _exports = _interopRequireDefault(require("@pareto-engineering/bem/exports"));
-require("./styles.scss");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-/* @pareto-engineering/generator-front 1.0.12 */
-/* eslint-disable import/no-extraneous-dependencies -- required here */
-
-// Local Definitions
-
-const baseClassName = _exports.default.base;
-const componentClassName = 'lexical-preview';
-
-/**
- * This is the component description.
- */
-const LexicalPreview = _ref => {
-  let {
-    id,
-    className: userClassName,
-    style,
-    nodes,
-    color
-    // ...otherProps
-  } = _ref;
-  const initialConfig = {
-    nameSpace: id,
-    editable: false,
-    editorState: nodes,
-    theme: {
-      text: {
-        italic: 'italic',
-        strikethrough: 'strikethrough',
-        underline: 'underlined'
-      }
-    },
-    nodes: [_link.AutoLinkNode, _link.LinkNode, _list.ListNode, _list.ListItemNode]
-  };
-  return /*#__PURE__*/React.createElement(_LexicalComposer.LexicalComposer, {
-    initialConfig: initialConfig
-  }, /*#__PURE__*/React.createElement("div", {
-    id: id,
-    className: [baseClassName, componentClassName, userClassName, `y-${color}`].filter(e => e).join(' '),
-    style: style
-  }, /*#__PURE__*/React.createElement(_LexicalRichTextPlugin.RichTextPlugin, {
-    contentEditable: /*#__PURE__*/React.createElement(_LexicalContentEditable.ContentEditable, {
-      id: id,
-      className: "content-editable"
-    })
-  })));
-};
-LexicalPreview.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),
-  /**
-   * Color of the text
-   */
-  color: _propTypes.default.string,
-  /**
-   * The nodes to render in the form of a json string
-   */
-  nodes: _propTypes.default.string
-};
-LexicalPreview.defaultProps = {
-  color: 'paragraph'
-};
-var _default = exports.default = LexicalPreview;

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

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

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

@@ -1,46 +0,0 @@
-/* @pareto-engineering/generator-front 1.0.12 */
-
-@use "@pareto-engineering/bem";
-@use "@pareto-engineering/styles/src/mixins";
-@use "@pareto-engineering/styles/src/globals" as *;
-
-.#{bem.$base}.lexical-preview {
-  > .content-editable {
-    color: var(--y);
-    overflow: auto;
-
-    li:has(ol, ul) {
-      list-style-type: none;
-    }
-
-    p,
-    span,
-    strong,
-    em,
-    li {
-      &.underlined {
-        text-decoration: underline;
-
-        &.strikethrough {
-          text-decoration: underline line-through;
-        }
-      }
-
-      &.strikethrough {
-        text-decoration: line-through;
-      }
-
-      &.italic {
-        font-style: italic;
-      }
-    }
-
-    :first-child {
-      margin-top: 0;
-    }
-
-    &::placeholder {
-      color: var(--metadata);
-    }
-  }
-}