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

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

@@ -0,0 +1,80 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+import { Tooltip, Button } from 'ui'
+
+export default {
+  title        :'a/Tooltip',
+  component    :Tooltip,
+  subcomponents:{
+    // Item:Tooltip.Item
+  },
+  decorators:[
+    // storyfn => <div className="">{ storyfn() }</div>,
+  ],
+  argTypes:{
+    backgroundColor:{ control: 'color' },
+  },
+}
+
+const ariaDescribedby = 'test-tooltip'
+
+export const Base = {
+  args:{
+    children:(
+      <div>
+        <ul>
+          <li>This is the tooltips content</li>
+          <li>Style it the way you want!</li>
+          <li>It&apos;s a tooltip, no interactive elements please</li>
+        </ul>
+      </div>
+    ),
+    id:ariaDescribedby,
+  },
+  render:(args) => (
+    <div
+      style={{
+        paddingTop   :'10rem',
+        width        :'50%',
+        margin       :'auto',
+        display      :'flex',
+        flexDirection:'column',
+        alignItems   :'center',
+      }}
+    >
+      <div aria-describedby={ariaDescribedby}>
+        <Button>
+          Hover on me!
+        </Button>
+        <Tooltip {...args} />
+      </div>
+      <p>
+        With some more content around
+      </p>
+    </div>
+  ),
+}
+
+export const Left = {
+  ...Base,
+  args:{
+    ...Base.args,
+    position:'left',
+  },
+}
+
+export const Right = {
+  ...Base,
+  args:{
+    ...Base.args,
+    position:'right',
+  },
+}
+
+export const Top = {
+  ...Base,
+  args:{
+    ...Base.args,
+    position:'top',
+  },
+}

package/src/stories/a/XMLEditor.stories.jsx

@@ -14,7 +14,12 @@ export default {
 }
 
 const Template = (args) => (
-  <XMLEditor {...args} />
+  <div>
+    {/* Args as JSON */}
+    <pre>{ JSON.stringify(args, null, 2) }</pre>
+  </div>
+  // TOFIX: Commented out due to issues.
+  // <XMLEditor {...args} />
 )
 
 export const Base = Template.bind({})

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

@@ -13,7 +13,7 @@ $default-horizontal-margin: .5em;
 $default-grid-gap: 1em;
 $default-margin: 1.5rem;
 $default-image-margin: var(--default-image-margin, #{$default-margin});
-$default-color: var(--default-color, var(--grey));
+$default-color: var(--default-color, var(--paragraph));
 
 .#{bem.$base}.people {
   display: grid;

package/src/ui/a/Quote/Quote.jsx

@@ -39,13 +39,16 @@ const Quote = ({
     style={style}
     // {...otherProps}
   >
-    <blockquote cite={source} className="blockquote uc">
-      <p className="quotation c-x md-s0 s-1">
-        {children}
+    <blockquote cite={source} className="blockquote">
+      <p className="quotation h2">
+        <span className="c-x">&ldquo;</span>
+        <span className="c-x">{children}</span>
+        <span className="c-x">&rdquo;</span>
       </p>
     </blockquote>
     <figcaption className="figcaption">
-      <cite>{author}</cite>
+      <span className="x-metadata c-x">-</span>
+      <cite className="x-metadata c-x">{author}</cite>
     </figcaption>
   </figure>
 )
@@ -64,27 +67,31 @@ Quote.propTypes = {
   /**
    * The React-written, css properties for this element.
    */
-  style   :PropTypes.objectOf(PropTypes.string),
+  style:PropTypes.objectOf(PropTypes.string),
+
   /**
    * The children jsx
    */
   children:PropTypes.node.isRequired,
+
   /**
    * A URL for the source of the quotation
    */
-  source  :PropTypes.string,
+  source:PropTypes.string,
+
   /**
    * text representation of the source
    */
-  author  :PropTypes.string,
+  author:PropTypes.string,
+
   /**
    * The color of the quotation text
    */
-  color   :PropTypes.string,
+  color:PropTypes.string,
 }
 
 Quote.defaultProps = {
-  color:'main1',
+  color:'highlighted',
 }
 
 export default Quote

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

@@ -4,53 +4,32 @@
 @use "@pareto-engineering/styles/src/mixins";
 @use "@pareto-engineering/styles/src/globals" as *;
 
+$default-gap: 1.5rem;
 
 .#{bem.$base}.quote {
-  align-items: center;
+  border-left: 3px solid var(--x);
   display: flex;
   flex-direction: column;
 
-  .blockquote {
+  > .blockquote {
     margin: 0;
-    padding: 0;
-  }
-
-  .figcaption {
-    padding: 0;
-  }
 
-  @include mixins.media($from:$sm-md) {
-    .blockquote {
-      .quotation {
-        display: inline;
-      }
-
-      &::before {
-        color: transparent;
-        content: "\201C";
-        font-size: 4em;
-        line-height: 0;
-        opacity: inherit;
-        position: static;
-        -webkit-text-stroke: 1px var(--x);
-        vertical-align: -.4em;
-      }
-
-      &::after {
-        color: transparent;
-        content: "\201D";
-        font-size: 4em;
-        line-height: 0;
-        margin-left: -.1em;
-        -webkit-text-stroke: 1px var(--x);
-        vertical-align: -.6em;
-      }
+    > .h2 {
+      margin-left: 0;
+      margin-top: 0;
     }
 
-    .figcaption {
-      margin: 0;
+    > .quotation {
+      margin-left: $default-gap;
     }
   }
-}
 
+  > .figcaption {
+    margin-left: $default-gap;
+    padding: 0;
 
+    > cite {
+      font-style: normal;
+    }
+  }
+}

package/src/ui/a/Tooltip/Tooltip.jsx

@@ -0,0 +1,83 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import PropTypes from 'prop-types'
+
+import styleNames from '@pareto-engineering/bem/exports'
+
+import './styles.scss'
+
+// Local Definitions
+
+const baseClassName = styleNames.base
+
+const componentClassName = 'tooltip'
+
+/**
+ * This is the component description.
+ */
+const Tooltip = ({
+  id,
+  className:userClassName,
+  style,
+  position,
+  color,
+  children,
+  // ...otherProps
+}) => (
+  <div
+    id={id}
+    className={[
+      baseClassName,
+      componentClassName,
+      userClassName,
+      position,
+      `x-${color}`,
+    ]
+      .filter((e) => e)
+      .join(' ')}
+    style={style}
+    role="tooltip"
+  >
+    {children}
+  </div>
+)
+
+Tooltip.propTypes = {
+  /**
+   * The HTML id for this element
+   */
+  id:PropTypes.string.isRequired,
+
+  /**
+   * The HTML class names for this element
+   */
+  className:PropTypes.string,
+
+  /**
+   * The React-written, css properties for this element.
+   */
+  style:PropTypes.objectOf(PropTypes.string),
+
+  /**
+   *  The children JSX
+   */
+  children:PropTypes.node.isRequired,
+
+  /**
+   * The position of the tooltip with respect to the trigger element
+   */
+  position:PropTypes.oneOf(['top', 'bottom', 'left', 'right']),
+
+  /**
+   * The base color of the tooltip
+   */
+  color:PropTypes.string,
+}
+
+Tooltip.defaultProps = {
+  position:'bottom',
+  color   :'background-cards',
+}
+
+export default Tooltip

package/src/ui/a/Tooltip/index.js

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

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

@@ -0,0 +1,53 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+
+@use "@pareto-engineering/bem";
+
+$default-block-padding: calc(var(--theme-default-padding) / 2);
+$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;
+    }
+  }
+
+  &.top {
+    --horizontal: -50%;
+    bottom: calc(100% + $default-block-padding);
+    left: 50%;
+  }
+
+  &.right {
+    --vertical: 50%;
+    bottom: 50%;
+    left: calc(100% + $default-inline-padding);
+  }
+
+  &.bottom {
+    --horizontal: -50%;
+    left: 50%;
+    top: calc(100% + $default-block-padding);
+  }
+
+  &.left {
+    --vertical: 50%;
+    bottom: 50%;
+    right: calc(100% + $default-inline-padding);
+  }
+}

package/src/ui/a/index.js

@@ -28,3 +28,4 @@ export { ToggleSwitch } from './ToggleSwitch'
 export { XMLEditor } from './XMLEditor'
 export { LexicalPreview } from './LexicalPreview'
 export { DatePicker } from './DatePicker'
+export { Tooltip } from './Tooltip'

package/src/ui/b/ExpandableLexicalPreview/ExpandableLexicalPreview.jsx

@@ -10,7 +10,7 @@ import { ListItemNode, ListNode } from '@lexical/list'
 
 import PropTypes from 'prop-types'
 import styleNames from '@pareto-engineering/bem/exports'
-import { Button } from '@pareto-engineering/design-system'
+import { Button } from '../Button'
 import './styles.scss'
 import { ExpandButton } from './common'
 

package/src/ui/b/ExpandableLexicalPreview/common/ExpandButton/ExpandButton.jsx

@@ -6,7 +6,7 @@ import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext
 
 import PropTypes from 'prop-types'
 import styleNames from '@pareto-engineering/bem/exports'
-import { Button } from '@pareto-engineering/design-system'
+import { Button } from '../../../Button'
 
 // Local Definitions
 

package/src/ui/f/common/Description/styles.scss

@@ -5,6 +5,5 @@
 
 .#{bem.$base}.description {
   color: var(--x);
+  height: 0;
 }
-
-

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

@@ -9,10 +9,15 @@ import { ContentEditable } from '@lexical/react/LexicalContentEditable'
 import { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin'
 import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin'
 import { LinkPlugin } from '@lexical/react/LexicalLinkPlugin'
+import LexicalClickableLinkPlugin from '@lexical/react/LexicalClickableLinkPlugin'
 import { ListPlugin } from '@lexical/react/LexicalListPlugin'
+import LexicalErrorBoundary from '@lexical/react/LexicalErrorBoundary'
 import { TabIndentationPlugin } from '@lexical/react/LexicalTabIndentationPlugin'
 import { AutoLinkNode, LinkNode } from '@lexical/link'
 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 PropTypes from 'prop-types'
 import styleNames from '@pareto-engineering/bem/exports'
@@ -20,7 +25,7 @@ import styleNames from '@pareto-engineering/bem/exports'
 // Local Definitions
 
 import { FormLabel, FormDescription } from '../../common'
-import { Toolbar, TreeViewPlugin, StopPropagationPlugin } from './common'
+import { ToolbarPlugin, TreeViewPlugin, StopPropagationPlugin } from './common'
 
 import './styles.scss'
 
@@ -107,8 +112,17 @@ const EditorInput = ({
         strikethrough:'strikethrough',
         underline    :'underlined',
       },
+      list:{
+        listitemChecked  :'lexical-list-item-checked',
+        listitemUnchecked:'lexical-list-item-unchecked',
+      },
+      code:'lexical-code',
     },
     nodes:[
+      HeadingNode,
+      QuoteNode,
+      CodeNode,
+      CodeHighlightNode,
       AutoLinkNode,
       LinkNode,
       ListNode,
@@ -145,18 +159,21 @@ const EditorInput = ({
           {label}
         </FormLabel>
 
-        { !disabled && <Toolbar /> }
+        { !disabled && <ToolbarPlugin /> }
         <RichTextPlugin
           contentEditable={(
             <ContentEditable
-              id={name}
               className="content-editable"
+              id={name}
             />
           )}
+          ErrorBoundary={LexicalErrorBoundary}
         />
+        <ListPlugin />
+        <CheckListPlugin />
         <OnChangePlugin onChange={onChange} />
         <LinkPlugin />
-        <ListPlugin />
+        <LexicalClickableLinkPlugin />
         <TabIndentationPlugin />
         <HistoryPlugin />
         { stopPropagationKeys && (