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

package/dist/es/g/ExpandableLexicalPreview/ExpandableLexicalPreview.js

@@ -0,0 +1,126 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react';
+import { useState } from 'react';
+import { Formik } from 'formik';
+import PropTypes from 'prop-types';
+import styleNames from '@pareto-engineering/bem/exports';
+
+// Local Definitions
+import { EditorInput } from "../../f";
+import { Button } from "../../b";
+import { NewWindowPortal } from "./common";
+import "./styles.scss";
+const baseClassName = styleNames.base;
+const componentClassName = 'expandable-lexical-preview';
+
+/**
+ * This is the component description.
+ */
+const ExpandableLexicalPreview = ({
+  id,
+  className: userClassName,
+  style,
+  nodes,
+  name,
+  color,
+  resize,
+  pageTitle,
+  onBlock,
+  onOpen,
+  header
+  // ...otherProps
+}) => {
+  const [isCollapsed, setIsCollapsed] = useState(false);
+  const handleButtonClick = () => {
+    setIsCollapsed(!isCollapsed);
+  };
+  return /*#__PURE__*/React.createElement(Formik, {
+    initialValues: {
+      [name]: nodes
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    id: id,
+    className: [baseClassName, componentClassName, userClassName, `y-${color}`, isCollapsed && 'collapsed'].filter(e => e).join(' '),
+    style: style
+  }, typeof header === 'string' ? /*#__PURE__*/React.createElement("p", {
+    className: "title h2"
+  }, header) : header, isCollapsed ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
+    onClick: handleButtonClick,
+    color: "background-far",
+    isCompact: true
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "ai-icon c-x x-paragraph"
+  }, "C")), /*#__PURE__*/React.createElement(NewWindowPortal, {
+    pageTitle: pageTitle,
+    onBlock: () => {
+      onBlock?.();
+      setIsCollapsed(false);
+    },
+    onOpen: () => {
+      onOpen?.();
+      setIsCollapsed(true);
+    }
+  }, /*#__PURE__*/React.createElement(EditorInput, {
+    name: name,
+    resize: resize,
+    disabled: true
+  }))) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(EditorInput, {
+    name: name,
+    resize: resize,
+    disabled: true,
+    id: "the-bad-ass-input"
+  }), /*#__PURE__*/React.createElement(Button, {
+    id: id,
+    className: "expand-button ai-icon",
+    color: "background-far",
+    isCompact: true,
+    onClick: handleButtonClick
+  }, "D"))));
+};
+ExpandableLexicalPreview.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),
+  /**
+   * Color of the text
+   */
+  color: PropTypes.string,
+  /**
+   * The nodes to render in the form of a json string
+   */
+  nodes: PropTypes.string,
+  /**
+   * The resize property of the textarea
+   */
+  resize: PropTypes.string,
+  /**
+   * The header for the preview component.
+   */
+  header: PropTypes.node,
+  /**
+   * The page title for the expanded preview.
+   */
+  pageTitle: PropTypes.string,
+  /**
+   * The name used to acces the nodes
+   */
+  name: PropTypes.string.isRequired,
+  /**
+   * The function to run when a new window portal can be opened
+   */
+  onBlock: PropTypes.func.isRequired
+};
+ExpandableLexicalPreview.defaultProps = {
+  color: 'paragraph',
+  resize: 'vertical'
+};
+export default ExpandableLexicalPreview;

package/dist/es/g/ExpandableLexicalPreview/common/NewWindowPortal/NewWindowPortal.js

@@ -0,0 +1,70 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import { createPortal } from 'react-dom';
+import { useState, useEffect, useMemo } from 'react';
+import PropTypes from 'prop-types';
+import styleNames from '@pareto-engineering/bem/exports';
+
+// Local Definitions
+import { useTheme } from "../../../../a";
+import "./styles.scss";
+const baseClassName = styleNames.base;
+const copyStyles = (sourceDocument, targetDocument) => {
+  Array.from(sourceDocument.querySelectorAll('link[rel="stylesheet"], style')).forEach(link => {
+    targetDocument.head.appendChild(link.cloneNode(true));
+  });
+};
+/**
+ * This is the component description.
+ */
+const NewWindowPortal = ({
+  children,
+  pageTitle,
+  onBlock,
+  onOpen
+}) => {
+  const [newWindow, setNewWindow] = useState(null);
+  const container = useMemo(() => document.createElement('div'), []);
+  const {
+    userTheme = 'light'
+  } = useTheme();
+  useEffect(() => {
+    if (!container) return;
+    container.classList.add(baseClassName, 'new-window-portal', `ui-${userTheme}`);
+    const newExternalWindow = window.open('', pageTitle, 'width="100%",height="100%"');
+    if (newExternalWindow) {
+      newExternalWindow.document.title = pageTitle;
+      newExternalWindow.document.body.appendChild(container);
+      setNewWindow(newExternalWindow);
+      onOpen();
+    } else {
+      console.warn('A new window / tab could not be opened. Check your settings and/or extensions, maybe it was blocked.');
+      onBlock();
+    }
+
+    // eslint-disable-next-line consistent-return
+    return () => {
+      container.classList.remove(...container.classList);
+      newExternalWindow?.close();
+    };
+  }, [container, pageTitle, userTheme]);
+  useEffect(() => {
+    if (newWindow) {
+      copyStyles(document, newWindow.document);
+    }
+  }, [newWindow]);
+  return /*#__PURE__*/createPortal(children, container);
+};
+NewWindowPortal.propTypes = {
+  /**
+   *  The children JSX
+   */
+  children: PropTypes.node,
+  /**
+   * The new window page title
+   */
+  pageTitle: PropTypes.string.isRequired
+};
+NewWindowPortal.defaultProps = {
+  // someProp:false
+};
+export default NewWindowPortal;

package/dist/es/g/ExpandableLexicalPreview/common/NewWindowPortal/index.js

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

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

@@ -0,0 +1,9 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+
+@use "@pareto-engineering/bem";
+
+.#{bem.$base}.new-window-portal {
+  background-color: var(--background-far);
+  height: 100%;
+  width: 100%;
+}

package/dist/es/g/ExpandableLexicalPreview/common/index.js

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

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.81",
   "description": "",
   "main": "dist/cjs/index.js",
   "module": "dist/es/index.js",
@@ -59,10 +59,10 @@
     "@lexical/selection": "0.12.2",
     "@lexical/table": "0.12.2",
     "@lexical/utils": "0.12.2",
-    "@pareto-engineering/assets": "^4.0.0-alpha.78",
+    "@pareto-engineering/assets": "^4.0.0-alpha.81",
     "@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.81",
     "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": "b44cdb0922a67109aaf2fa1dce4943882ce3a512"
 }

package/src/stories/a/Tooltip.stories.jsx

@@ -16,11 +16,14 @@ export default {
   },
 }
 
-const ariaDescribedby = 'test-tooltip'
-
 export const Base = {
   args:{
     children:(
+      <Button>
+        Hover on me!
+      </Button>
+    ),
+    content:(
       <div>
         <ul>
           <li>This is the tooltips content</li>
@@ -29,7 +32,7 @@ export const Base = {
         </ul>
       </div>
     ),
-    id:ariaDescribedby,
+    description:'test-tooltip',
   },
   render:(args) => (
     <div
@@ -42,15 +45,7 @@ export const Base = {
         alignItems   :'center',
       }}
     >
-      <div aria-describedby={ariaDescribedby}>
-        <Button>
-          Hover on me!
-        </Button>
-        <Tooltip {...args} />
-      </div>
-      <p>
-        With some more content around
-      </p>
+      <Tooltip {...args} />
     </div>
   ),
 }

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

@@ -1,16 +1,22 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react'
 
-import { ExpandableLexicalPreview } from 'ui'
+import { ExpandableLexicalPreview, AppContextProvider } from 'ui'
 
 export default {
-  title        :'b/ExpandableLexicalPreview',
+  title        :'g/ExpandableLexicalPreview',
   component    :ExpandableLexicalPreview,
   subcomponents:{
     // Item:TextareaInput.Item
   },
-  decorators:[],
-  argTypes  :{
+  decorators:[
+    (storyfn) => (
+      <AppContextProvider>
+        { storyfn() }
+      </AppContextProvider>
+    ),
+  ],
+  argTypes:{
     color:{ control: 'text' },
   },
 }
@@ -25,5 +31,7 @@ const Template = (args) => (
 export const Base = Template.bind({})
 Base.args = {
   nodes,
-  title:'Task Instructions',
+  name     :'taskDescription',
+  pageTitle:'Task Instructions',
+  header   :'Task Instructions',
 }

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

@@ -20,9 +20,9 @@ $default-font-size: calc(1em * var(--s-1));
   color: var(--on-x, var(--on-#{$default-color}));
   display: inline-flex;
   font-size: $default-font-size;
+  gap: calc(var(--gap) / 2);
   padding: $default-padding;
   white-space: nowrap;
-
   &.#{bem.$modifier-compact} {
     padding: $compact-padding;
   }

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/Tooltip.jsx

@@ -22,6 +22,8 @@ const Tooltip = ({
   style,
   position,
   color,
+  description,
+  content,
   children,
   // ...otherProps
 }) => (
@@ -31,15 +33,26 @@ const Tooltip = ({
       baseClassName,
       componentClassName,
       userClassName,
-      position,
       `x-${color}`,
     ]
       .filter((e) => e)
       .join(' ')}
     style={style}
-    role="tooltip"
+
   >
-    {children}
+    <div
+      className="tooltip-trigger-wrapper"
+      aria-describedby={description}
+    >
+      {children}
+    </div>
+    <div
+      className={`tooltip-content ${position}`}
+      role="tooltip"
+      id={description}
+    >
+      {content}
+    </div>
   </div>
 )
 
@@ -60,10 +73,20 @@ Tooltip.propTypes = {
   style:PropTypes.objectOf(PropTypes.string),
 
   /**
-   *  The children JSX
+   *  The children JSX where the tooltip will be applied
    */
   children:PropTypes.node.isRequired,
 
+  /**
+   *  The content JSX that renders the tooltip content
+   */
+  content:PropTypes.node.isRequired,
+
+  /**
+   *  The text description  to identify the element that describes the tooltip
+   */
+  description:PropTypes.string.isRequired,
+
   /**
    * The position of the tooltip with respect to the trigger element
    */

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

@@ -7,47 +7,55 @@ $default-inline-padding: var(--theme-default-padding);
 $default-width: var(--tooltip-width, 20rem);
 
 .#{bem.$base}.tooltip {
-  background: var(--x);
-  border: var(--theme-default-border-style) var(--ui-lines);
-  border-radius: calc(var(--theme-default-border-radius) / 2);
-  opacity: 0;
-  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;
-  width: $default-width;
-  z-index: 10;
-
-  :has(> &) {
-    position: relative;
-
-    &:is(:hover, :focus-visible, :active) > .#{bem.$base}.tooltip {
-      opacity: 1;
-      transition-delay: 200ms;
+  display: inline-block;
+  position: relative;
+
+  > .tooltip-content {
+    background: var(--x);
+    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;
+
+    &.top {
+      --horizontal: -50%;
+      bottom: calc(100% + $default-block-padding);
+      left: 50%;
     }
-  }
 
-  &.top {
-    --horizontal: -50%;
-    bottom: calc(100% + $default-block-padding);
-    left: 50%;
-  }
+    &.right {
+      --vertical: 50%;
+      bottom: 50%;
+      left: calc(100% + $default-inline-padding);
+    }
 
-  &.right {
-    --vertical: 50%;
-    bottom: 50%;
-    left: calc(100% + $default-inline-padding);
-  }
+    &.bottom {
+      --horizontal: -50%;
+      left: 50%;
+      top: calc(100% + $default-block-padding);
+    }
 
-  &.bottom {
-    --horizontal: -50%;
-    left: 50%;
-    top: calc(100% + $default-block-padding);
+    &.left {
+      --vertical: 50%;
+      bottom: 50%;
+      right: calc(100% + $default-inline-padding);
+    }
   }
 
-  &.left {
-    --vertical: 50%;
-    bottom: 50%;
-    right: calc(100% + $default-inline-padding);
+  > .tooltip-trigger-wrapper {
+    cursor: pointer;
+
+    &:is(:hover, :focus-visible, :active) + .tooltip-content {
+      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} />