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

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

@@ -23,6 +23,7 @@ const SelectInput = ({
   labelColor,
   color,
   options,
+  hasDefault,
   validate,
   optional,
   description,
@@ -40,6 +41,7 @@ const SelectInput = ({
     labelColor,
     color,
     options,
+    hasDefault,
     validate,
     optional,
     description,
@@ -124,10 +126,15 @@ SelectInput.propTypes = {
   /**
    * The placeholder of the select input
    */
-  placeholder: PropTypes.string
+  placeholder: PropTypes.string,
+  /**
+   * Whether this select input has a default value(s)
+   */
+  hasDefault: PropTypes.bool
 };
 SelectInput.defaultProps = {
   disabled: false,
-  multiple: false
+  multiple: false,
+  hasDefault: false
 };
 export default /*#__PURE__*/memo(SelectInput);

package/dist/es/f/fields/SelectInput/common/Single/Single.js

@@ -1,6 +1,7 @@
 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 { useEffect } from 'react';
 import { useField } from 'formik';
 import PropTypes from 'prop-types';
 import styleNames from '@pareto-engineering/bem/exports';
@@ -24,6 +25,7 @@ const Single = ({
   labelColor,
   color,
   options,
+  hasDefault,
   validate,
   optional,
   description,
@@ -32,10 +34,19 @@ const Single = ({
   autoComplete
   // ...otherProps
 }) => {
-  const [field] = useField({
+  const [field,, helpers] = useField({
     name,
     validate
   });
+  const {
+    setValue
+  } = helpers;
+  useEffect(() => {
+    if (hasDefault && !field.value) {
+      const defaultOption = options.find(option => option.isDefault);
+      setValue(defaultOption?.value);
+    }
+  }, [hasDefault]);
   return /*#__PURE__*/React.createElement("div", {
     id: id,
     className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),

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

@@ -83,7 +83,7 @@ $default-gap: var(--gap);
 
           /* stylelint-disable-next-line max-nesting-depth -- required */
           &:disabled {
-            opacity: 0%;
+            background: transparent;
           }
         }
       }

package/dist/es/{b → g}/ExpandableLexicalPreview/ExpandableLexicalPreview.js

@@ -1,23 +1,17 @@
 /* @pareto-engineering/generator-front 1.0.12 */
-/* eslint-disable import/no-extraneous-dependencies -- required here */
 import * as React from 'react';
-import { useState, useMemo } from 'react';
-import { LexicalComposer } from '@lexical/react/LexicalComposer';
-import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin';
-import { ContentEditable } from '@lexical/react/LexicalContentEditable';
-import { AutoLinkNode, LinkNode } from '@lexical/link';
-import { ListItemNode, ListNode } from '@lexical/list';
+import { useState } from 'react';
+import { Formik } from 'formik';
 import PropTypes from 'prop-types';
 import styleNames from '@pareto-engineering/bem/exports';
-import { Button } from "../Button";
-import "./styles.scss";
-import { ExpandButton } from "./common";
 
 // Local Definitions
-
+import { EditorInput } from "../../f";
+import { Button } from "../../b";
+import { ExpandButton } from "./common";
+import "./styles.scss";
 const baseClassName = styleNames.base;
 const componentClassName = 'expandable-lexical-preview';
-
 /**
  * This is the component description.
  */
@@ -26,57 +20,43 @@ const ExpandableLexicalPreview = ({
   className: userClassName,
   style,
   nodes,
+  name,
   color,
   resize,
   title
   // ...otherProps
 }) => {
-  const initialConfig = {
-    nameSpace: id,
-    editable: false,
-    editorState: nodes,
-    theme: {
-      text: {
-        italic: 'italic',
-        strikethrough: 'strikethrough',
-        underline: 'underlined'
-      }
-    },
-    nodes: [AutoLinkNode, LinkNode, ListNode, ListItemNode]
-  };
+  const [editorState, setEditorState] = useState();
   const [isExpanded, setIsExpanded] = useState(false);
   const handleButtonClick = () => {
     setIsExpanded(!isExpanded);
   };
-  const Content = useMemo(() => /*#__PURE__*/React.createElement("div", {
-    className: "lexical-content"
-  }, /*#__PURE__*/React.createElement(RichTextPlugin, {
-    contentEditable: /*#__PURE__*/React.createElement(ContentEditable, {
-      id: id,
-      className: "content-editable"
-    })
-  }), /*#__PURE__*/React.createElement(ExpandButton, {
-    title: title,
-    onResolve: handleButtonClick
-  })), [id]);
-  return /*#__PURE__*/React.createElement(LexicalComposer, {
-    initialConfig: initialConfig
+  return /*#__PURE__*/React.createElement(Formik, {
+    initialValues: {
+      [name]: nodes
+    }
   }, /*#__PURE__*/React.createElement("div", {
     id: id,
     className: [baseClassName, componentClassName, userClassName, `y-${color}`, isExpanded && 'collapsed'].filter(e => e).join(' '),
-    style: {
-      '--resize': resize,
-      ...style
-    }
+    style: style
   }, typeof title === 'string' ? /*#__PURE__*/React.createElement("p", {
     className: "title h2"
-  }, title) : title, isExpanded && /*#__PURE__*/React.createElement(Button, {
+  }, title) : title, isExpanded ? /*#__PURE__*/React.createElement(Button, {
     onClick: handleButtonClick,
     color: "background-far",
     isCompact: true
   }, /*#__PURE__*/React.createElement("span", {
     className: "ai-icon c-x x-paragraph"
-  }, "C")), !isExpanded && Content));
+  }, "C")) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(EditorInput, {
+    name: name,
+    setEditorState: setEditorState,
+    resize: resize,
+    disabled: true
+  }), /*#__PURE__*/React.createElement(ExpandButton, {
+    title: title,
+    onResolve: handleButtonClick,
+    editorState: editorState
+  }))));
 };
 ExpandableLexicalPreview.propTypes = {
   /**
@@ -106,7 +86,11 @@ ExpandableLexicalPreview.propTypes = {
   /**
    * The title for the preview.
    */
-  title: PropTypes.string
+  title: PropTypes.string,
+  /**
+   * The name used to acces the nodes
+   */
+  name: PropTypes.string.isRequired
 };
 ExpandableLexicalPreview.defaultProps = {
   color: 'paragraph',

package/dist/es/{b → g}/ExpandableLexicalPreview/common/ExpandButton/ExpandButton.js

@@ -2,10 +2,9 @@
 /* eslint-disable import/no-extraneous-dependencies -- required here */
 import * as React from 'react';
 import { $generateHtmlFromNodes } from '@lexical/html';
-import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
 import PropTypes from 'prop-types';
 import styleNames from '@pareto-engineering/bem/exports';
-import { Button } from "../../../Button";
+import { Button } from "../../../../b";
 
 // Local Definitions
 
@@ -20,21 +19,20 @@ const ExpandButton = ({
   className: userClassName,
   style,
   onResolve,
-  title
+  title,
+  editorState
   // ...otherProps
-}) => {
-  const [editor] = useLexicalComposerContext();
-  return /*#__PURE__*/React.createElement(Button, {
-    id: id,
-    className: [baseClassName, componentClassName, userClassName, 'ai-icon'].filter(e => e).join(' '),
-    style: style,
-    color: "background-far",
-    isCompact: true,
-    onClick: () => {
-      editor.getEditorState().read(() => {
-        const rawHtml = $generateHtmlFromNodes(editor);
-        const preview = window.open('', '_blank', 'width=600,height=600');
-        preview.document.write(`<html>
+}) => /*#__PURE__*/React.createElement(Button, {
+  id: id,
+  className: [baseClassName, componentClassName, userClassName, 'ai-icon'].filter(e => e).join(' '),
+  style: style,
+  color: "background-far",
+  isCompact: true,
+  onClick: () => {
+    editorState.getEditorState().read(() => {
+      const rawHtml = $generateHtmlFromNodes(editorState);
+      const preview = window.open('', '_blank', 'width=600,height=600');
+      preview.document.write(`<html>
             <title>${title || 'Preview'}</title>
             <style>
               li:has(ol, ul) {
@@ -76,11 +74,10 @@ const ExpandButton = ({
             ${rawHtml}
             <button onclick="window.close()">Close Preview</button>
             </body></html>`);
-      });
-      onResolve();
-    }
-  }, "D");
-};
+    });
+    onResolve();
+  }
+}, "D");
 ExpandButton.propTypes = {
   /**
      * The HTML id for this element

package/dist/es/g/ExpandableLexicalPreview/styles.scss

@@ -0,0 +1,34 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+
+@use "@pareto-engineering/bem";
+
+.#{bem.$base}.expandable-lexical-preview {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  gap: var(--gap);
+  position: relative;
+  width: 100%;
+
+
+  &.collapsed {
+    flex-direction: row;
+  }
+
+  > .title {
+    margin: 0;
+  }
+
+  > .#{bem.$base}.button {
+    align-items: center;
+    border: 1px solid var(--outline-inputs);
+    display: flex;
+  }
+
+  > .#{bem.$base}.expand-button {
+    border: 1px solid var(--outline-inputs);
+    position: absolute;
+    right: 1em;
+    top: 5.5rem;
+  }
+}

package/dist/es/g/index.js

@@ -0,0 +1 @@
+export { ExpandableLexicalPreview } from "./ExpandableLexicalPreview";

package/dist/es/index.js

@@ -3,5 +3,6 @@ export * from "./b";
 export * from "./c";
 export * from "./d";
 export * from "./f";
+export * from "./g";
 export * from "./utils";
 export * from "./test";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pareto-engineering/design-system",
-  "version": "4.0.0-alpha.78",
+  "version": "4.0.0-alpha.79",
   "description": "",
   "main": "dist/cjs/index.js",
   "module": "dist/es/index.js",
@@ -62,7 +62,7 @@
     "@pareto-engineering/assets": "^4.0.0-alpha.78",
     "@pareto-engineering/bem": "^4.0.0-alpha.20",
     "@pareto-engineering/styles": "^4.0.0-alpha.73",
-    "@pareto-engineering/utils": "^4.0.0-alpha.73",
+    "@pareto-engineering/utils": "^4.0.0-alpha.79",
     "codemirror": "^6.0.1",
     "date-fns": "^2.29.3",
     "downshift": "^6.1.12",
@@ -82,5 +82,5 @@
     "relay-test-utils": "^15.0.0"
   },
   "browserslist": "> 2%",
-  "gitHead": "2232d74831fee703583d210b9d083f357440b21a"
+  "gitHead": "593a12393a1966a555d50ede309f2acfee44f48d"
 }

package/src/stories/f/SelectInput.stories.jsx

@@ -11,9 +11,9 @@ export default {
     // Item:SelectInput.Item
   },
   decorators:[
-    (storyfn) => (
+    (storyfn, { args }) => (
       <Formik
-        initialValues={{ workType: '' }}
+        initialValues={{ workType: args?.testOverride ? 'Training' : '' }}
       >
         <Form>
           { storyfn() }
@@ -108,3 +108,19 @@ Multiple.args = {
   placeholder:'Type to search',
   multiple   :true,
 }
+
+export const WithDefault = {
+  args:{
+    ...Base.args,
+    hasDefault:true,
+    options   :[...Base.args.options.map((e, i) => (i === 2 ? { ...e, isDefault: true } : e))],
+  },
+}
+
+export const WithDefaultNoOverride = {
+  ...WithDefault,
+  args:{
+    ...WithDefault.args,
+    testOverride:true,
+  },
+}

package/src/stories/{b → g}/ExpandableLexicalPreview.stories.jsx

@@ -4,7 +4,7 @@ import * as React from 'react'
 import { ExpandableLexicalPreview } from 'ui'
 
 export default {
-  title        :'b/ExpandableLexicalPreview',
+  title        :'g/ExpandableLexicalPreview',
   component    :ExpandableLexicalPreview,
   subcomponents:{
     // Item:TextareaInput.Item
@@ -25,5 +25,6 @@ const Template = (args) => (
 export const Base = Template.bind({})
 Base.args = {
   nodes,
+  name :'taskDescription',
   title:'Task Instructions',
 }

package/src/ui/a/Quote/styles.scss

@@ -4,7 +4,7 @@
 @use "@pareto-engineering/styles/src/mixins";
 @use "@pareto-engineering/styles/src/globals" as *;
 
-$default-gap: 1.5rem;
+$default-gap: 3rem;
 
 .#{bem.$base}.quote {
   border-left: 3px solid var(--x);

package/src/ui/a/Tooltip/styles.scss

@@ -11,10 +11,12 @@ $default-width: var(--tooltip-width, 20rem);
   border: var(--theme-default-border-style) var(--ui-lines);
   border-radius: calc(var(--theme-default-border-radius) / 2);
   opacity: 0;
+  overflow: hidden;
   padding: $default-block-padding $default-inline-padding;
   position: absolute;
   transform: translateX(var(--horizontal, 0)) translateY(var(--vertical, 0));
   transition: opacity .2s ease, transform .2s ease;
+  visibility: hidden;
   width: $default-width;
   z-index: 10;
 
@@ -24,6 +26,7 @@ $default-width: var(--tooltip-width, 20rem);
     &:is(:hover, :focus-visible, :active) > .#{bem.$base}.tooltip {
       opacity: 1;
       transition-delay: 200ms;
+      visibility: visible;
     }
   }
 

package/src/ui/a/index.js

@@ -26,6 +26,5 @@ export { TextSteps } from './TextSteps'
 export { Removable } from './Removable'
 export { ToggleSwitch } from './ToggleSwitch'
 export { XMLEditor } from './XMLEditor'
-export { LexicalPreview } from './LexicalPreview'
 export { DatePicker } from './DatePicker'
 export { Tooltip } from './Tooltip'

package/src/ui/b/Page/common/PageHelmet/PageHelmet.jsx

@@ -172,6 +172,7 @@ const helmetMap = [
 ]
 
 const PageHelmet = ({
+  jsonld,
   ...props
 }) => {
   // const intl = useIntl()
@@ -217,6 +218,11 @@ const PageHelmet = ({
   return (
     <Helmet key={props.title}>
       { HelmetContent }
+      { jsonld && (
+        <script type="application/ld+json">
+          {`${JSON.stringify(jsonld)}`}
+        </script>
+      )}
     </Helmet>
   )
 }

package/src/ui/b/index.js

@@ -5,4 +5,3 @@ export { SocialMediaButton } from './SocialMediaButton'
 export { ThemeSelector } from './ThemeSelector'
 export { Title } from './Title'
 export { Card } from './Card'
-export { ExpandableLexicalPreview } from './ExpandableLexicalPreview'

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

@@ -1,7 +1,7 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 /* eslint-disable import/no-extraneous-dependencies -- required here */
 import * as React from 'react'
-import { memo } from 'react'
+import { memo, useEffect } from 'react'
 import { useFormikContext } from 'formik'
 import { LexicalComposer } from '@lexical/react/LexicalComposer'
 import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin'
@@ -18,6 +18,7 @@ import { ListItemNode, ListNode } from '@lexical/list'
 import { CheckListPlugin } from '@lexical/react/LexicalCheckListPlugin'
 import { HeadingNode, QuoteNode } from '@lexical/rich-text'
 import { CodeHighlightNode, CodeNode } from '@lexical/code'
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
 
 import PropTypes from 'prop-types'
 import styleNames from '@pareto-engineering/bem/exports'
@@ -32,6 +33,15 @@ import './styles.scss'
 const baseClassName = styleNames.base
 const componentClassName = 'editor-input'
 
+const ExposeEditorStatePlugin = ({ setEditorState }) => {
+  const [editor] = useLexicalComposerContext()
+  useEffect(() => {
+    setEditorState(editor)
+  }, [editor])
+
+  return null
+}
+
 /**
  * This is the component description.
  */
@@ -51,12 +61,14 @@ const EditorInput = ({
   disabled,
   showDebugger,
   stopPropagationKeys,
+  setEditorState,
   // ...otherProps
 }) => {
   const formik = useFormikContext()
 
   const setInitialValue = () => {
     const value = formik.values[name]
+
     try {
       JSON.parse(value)
       return value
@@ -175,6 +187,7 @@ const EditorInput = ({
         <LinkPlugin />
         <LexicalClickableLinkPlugin />
         <TabIndentationPlugin />
+        {setEditorState && <ExposeEditorStatePlugin setEditorState={setEditorState} />}
         <HistoryPlugin />
         { stopPropagationKeys && (
           <StopPropagationPlugin stopPropagationKeys={stopPropagationKeys} />

package/src/ui/f/fields/EditorInput/styles.scss

@@ -32,6 +32,11 @@ $default-check-mark-dimensions: 1rem;
         border: $focus-border;
       }
     }
+
+    > .content-editable {
+      border-bottom-left-radius: $default-input-border-radius;
+      border-bottom-right-radius: $default-input-border-radius;
+    }
   }
 
   &.disabled {
@@ -40,6 +45,10 @@ $default-check-mark-dimensions: 1rem;
       color: var(--metadata);
       cursor: not-allowed;
     }
+
+    > .content-editable {
+      border-radius: $default-input-border-radius;
+    }
   }
 
   .color-menu-button {
@@ -70,8 +79,6 @@ $default-check-mark-dimensions: 1rem;
   > .content-editable {
     background: $default-background;
     border: $default-border;
-    border-bottom-left-radius: $default-input-border-radius;
-    border-bottom-right-radius: $default-input-border-radius;
     color: var(--y);
     height: var(--rows);
     outline: none;

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

@@ -29,6 +29,7 @@ const SelectInput = ({
   labelColor,
   color,
   options,
+  hasDefault,
   validate,
   optional,
   description,
@@ -46,6 +47,7 @@ const SelectInput = ({
     labelColor,
     color,
     options,
+    hasDefault,
     validate,
     optional,
     description,
@@ -162,11 +164,17 @@ SelectInput.propTypes = {
    * The placeholder of the select input
    */
   placeholder:PropTypes.string,
+
+  /**
+   * Whether this select input has a default value(s)
+   */
+  hasDefault:PropTypes.bool,
 }
 
 SelectInput.defaultProps = {
-  disabled:false,
-  multiple:false,
+  disabled  :false,
+  multiple  :false,
+  hasDefault:false,
 }
 
 export default memo(SelectInput)

package/src/ui/f/fields/SelectInput/common/Single/Single.jsx

@@ -1,6 +1,8 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react'
 
+import { useEffect } from 'react'
+
 import { useField } from 'formik'
 
 import PropTypes from 'prop-types'
@@ -29,6 +31,7 @@ const Single = ({
   labelColor,
   color,
   options,
+  hasDefault,
   validate,
   optional,
   description,
@@ -37,7 +40,16 @@ const Single = ({
   autoComplete,
   // ...otherProps
 }) => {
-  const [field] = useField({ name, validate })
+  const [field, , helpers] = useField({ name, validate })
+
+  const { setValue } = helpers
+
+  useEffect(() => {
+    if (hasDefault && !field.value) {
+      const defaultOption = options.find((option) => option.isDefault)
+      setValue(defaultOption?.value)
+    }
+  }, [hasDefault])
 
   return (
     <div

package/src/ui/f/fields/SelectInput/styles.scss

@@ -83,7 +83,7 @@ $default-gap: var(--gap);
 
           /* stylelint-disable-next-line max-nesting-depth -- required */
           &:disabled {
-            opacity: 0%;
+            background: transparent;
           }
         }
       }