@pareto-engineering/design-system 4.3.5 → 4.3.7-alpha.2

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

@@ -1,4 +1,4 @@
-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); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react';
 import { useEffect } from 'react';

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

@@ -1,4 +1,4 @@
-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); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react';
 import { memo } from 'react';

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

@@ -1,4 +1,4 @@
-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); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react';
 import { memo } from 'react';

package/dist/es/g/DragAndDrop/DragAndDrop.js

@@ -1,4 +1,4 @@
-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); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react';
 import { useState } from 'react';

package/dist/es/g/DragAndDrop/common/DraggableItem/DraggableItem.js

@@ -1,4 +1,4 @@
-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); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react';
 import { useState } from 'react';

package/dist/es/g/FormBuilder/common/Renderer/Renderer.js

@@ -1,4 +1,4 @@
-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); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 /* @pareto-engineering/generator-front 1.1.1-alpha.2 */
 import * as React from 'react';
 import { useState, useEffect } from 'react';

package/dist/es/g/FormBuilder/common/Renderer/common/Section/Section.js

@@ -1,4 +1,4 @@
-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); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 /* eslint-disable no-alert */
 /* @pareto-engineering/generator-front 1.1.1-alpha.2 */
 import * as React from 'react';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pareto-engineering/design-system",
-  "version": "4.3.5",
+  "version": "4.3.7-alpha.2",
   "description": "",
   "main": "dist/cjs/index.js",
   "module": "dist/es/index.js",
@@ -82,5 +82,5 @@
     "relay-test-utils": "^15.0.0"
   },
   "browserslist": "> 2%",
-  "gitHead": "67b9225b149d2028cb22c5a1698eafc435d6c072"
+  "gitHead": "ce68be790178fb6346bc622a6610c8ccbd7351d6"
 }

package/src/stories/a/Label.stories.jsx

@@ -13,7 +13,7 @@ export default {
     // storyfn => <div className="">{ storyfn() }</div>,
   ],
   argTypes:{
-    color    :{ control: { type: 'select', options: ALL_COLORS } },
+    color    :{ control: { type: 'select' }, options: ALL_COLORS },
     isCompact:{ control: { type: 'boolean' } },
     isGhost  :{ control: { type: 'boolean' } },
   },

package/src/stories/a/Notification.stories.jsx

@@ -0,0 +1,86 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { Notification } from 'ui'
+
+import { ALL_COLORS } from 'stories/colors'
+
+const COLORS_OPTIONS = ['success', 'error', 'blocked', 'in-progress']
+
+export default {
+  title     :'a/Notification',
+  component :Notification,
+  decorators:[
+    // storyfn => <div className="">{ storyfn() }</div>,
+  ],
+  argTypes:{
+    color            :{ control: { type: 'select' }, options: ALL_COLORS },
+    type             :{ control: { type: 'select' }, options: COLORS_OPTIONS },
+    message          :{ control: { type: 'text' } },
+    isVisible        :{ control: { type: 'boolean' } },
+    overrideIsVisible:{ control: { type: 'boolean' } },
+    closeNotification:{ action: 'closeNotification' },
+  },
+}
+
+export const Base = {
+  render:(args) => (
+    <div
+      style={{
+        display       :'flex',
+        justifyContent:'center',
+        alignItems    :'center',
+        height        :'100px',
+      }}
+    >
+      <Notification
+        {...args}
+      />
+    </div>
+  ),
+  args:{
+    message  :'This is a notification with a custom color',
+    color    :'deepblue',
+    isVisible:true,
+  },
+}
+
+export const Error = {
+  ...Base,
+  args:{
+    ...Base.args,
+    message:'This is an error notification',
+    type   :'error',
+    color  :null,
+  },
+}
+
+export const Warning = {
+  ...Base,
+  args:{
+    ...Base.args,
+    message:'This is a warning notification',
+    type   :'warning',
+    color  :null,
+  },
+}
+
+export const Info = {
+  ...Base,
+  args:{
+    ...Base.args,
+    message:'This is an info notification',
+    type   :'info',
+    color  :null,
+  },
+}
+
+export const Success = {
+  ...Base,
+  args:{
+    ...Base.args,
+    message:'This is a success notification',
+    type   :'success',
+    color  :null,
+  },
+}

package/src/stories/a/NotificationStack.stories.jsx

@@ -0,0 +1,59 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { NotificationStack } from 'ui'
+
+export default {
+  title     :'a/NotificationStack',
+  component :NotificationStack,
+  decorators:[
+    // storyfn => <div className="">{ storyfn() }</div>,
+  ],
+  argTypes:{
+    notifications   :{ control: { type: 'object' } },
+    maxNotifications:{ control: { type: 'number' } },
+  },
+}
+
+const notifications = [
+  {
+    message  :'This is an error notification',
+    type     :'error',
+    isVisible:true,
+  },
+  {
+    message  :'This is a warning notification',
+    type     :'warning',
+    isVisible:true,
+  },
+  {
+    message  :'This is an info notification',
+    type     :'info',
+    isVisible:true,
+  },
+  {
+    message  :'This is a success notification',
+    type     :'success',
+    isVisible:true,
+  },
+]
+
+export const Base = {
+  render:(args) => (
+    <div
+      style={{
+        display       :'flex',
+        justifyContent:'center',
+        alignItems    :'center',
+        height        :'500px',
+      }}
+    >
+      <NotificationStack
+        {...args}
+      />
+    </div>
+  ),
+  args:{
+    notifications,
+  },
+}

package/src/stories/b/Button/Button.stories.jsx

@@ -14,7 +14,7 @@ export default {
     // storyfn => <div className="">{ storyfn() }</div>,
   ],
   argTypes:{
-    color     :{ control: { type: 'select', options: ALL_COLORS } },
+    color     :{ control: { type: 'select' }, options: ALL_COLORS },
     disabled  :{ control: { type: 'boolean' } },
     isGhost   :{ control: { type: 'boolean' } },
     isSimple  :{ control: { type: 'boolean' } },

package/src/stories/c/Modal.stories.jsx

@@ -18,7 +18,7 @@ export default {
   ],
   argTypes:{
     children:{ control: { type: 'text' } },
-    color   :{ control: { type: 'select', options: ALL_COLORS } },
+    color   :{ control: { type: 'select' }, options: ALL_COLORS },
     title   :{ control: { type: 'text' } },
   },
 }

package/src/ui/a/Notification/Notification.jsx

@@ -0,0 +1,142 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { useState } from 'react'
+
+import PropTypes from 'prop-types'
+
+import styleNames from '@pareto-engineering/bem/exports'
+
+import { Button } from 'ui'
+
+// Local Definitions
+
+import './styles.scss'
+
+const baseClassName = styleNames.base
+
+const componentClassName = 'notification'
+
+const iconsMap = {
+  success:'I',
+  error  :'g',
+  warning:'x',
+  info   :'h',
+}
+
+const COLORS_MAP = {
+  success:'success',
+  error  :'error',
+  warning:'blocked',
+  info   :'in-progress',
+}
+
+const Notification = ({
+  id,
+  className:userClassName,
+  style,
+  color,
+  message,
+  type,
+  isVisible,
+  overrideIsVisible,
+  closeNotification,
+  ...otherProps
+}) => {
+  const [isVisibleState, setIsVisibleState] = useState(isVisible)
+  if (!isVisibleState && !overrideIsVisible) {
+    return null
+  }
+
+  return (
+    <div
+      id={id}
+      className={[
+        baseClassName,
+        componentClassName,
+        userClassName,
+        `x-${color || COLORS_MAP[type]}`,
+      ]
+        .filter((e) => e)
+        .join(' ')}
+      style={style}
+      {...otherProps}
+    >
+      <div className="message-container">
+        <span className="icon">{iconsMap[type]}</span>
+        <span className="message">
+          {message}
+        </span>
+      </div>
+
+      <Button
+        className="close"
+        isCompact
+        color={color || COLORS_MAP[type]}
+        onClick={() => {
+          if (closeNotification) closeNotification()
+          setIsVisibleState(false)
+        }}
+      >
+        <span className="icon">
+          Y
+        </span>
+      </Button>
+    </div>
+  )
+}
+
+Notification.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),
+
+  /**
+   * The color of the notification
+   */
+  color:PropTypes.string,
+
+  /**
+   * The message of the notification
+   */
+  message:PropTypes.string,
+
+  /**
+   * The type of the notification
+   */
+  type:PropTypes.oneOf(['success', 'error', 'warning', 'info']),
+
+  /**
+   * The visibility of the notification
+   */
+  isVisible:PropTypes.bool,
+
+  /**
+   * Override the visibility of the notification
+   */
+  overrideIsVisible:PropTypes.bool,
+
+  /**
+  * The action to close the notification
+  */
+  closeNotification:PropTypes.func,
+}
+
+Notification.defaultProps = {
+  isVisible        :true,
+  overrideIsVisible:false,
+  type             :'error',
+}
+
+export default Notification

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

@@ -0,0 +1 @@
+export { default as Notification } from './Notification'

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

@@ -0,0 +1,57 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+
+@use "@pareto-engineering/bem";
+@use "@pareto-engineering/styles/src/mixins";
+@use "@pareto-engineering/styles/src/globals" as *;
+
+$default-padding: 1em;
+$default-margin: 1em;
+$default-border-radius: 1.5em;
+$default-width: clamp(var(--min-width, 30em), var(--width, 50%), var(--max-width, 100%));
+$default-height: clamp(var(--min-height, 3em), var(--height, 5em), var(--max-height, 10em));
+
+.#{bem.$base}.notification {
+  align-items: center;
+  background-color: var(--x);
+  border-radius: $default-border-radius $default-border-radius 0 0;
+  bottom: 0;
+  color: var(--on-x);
+  display: flex;
+  height: $default-height;
+  justify-content: space-between;
+  overflow: hidden;
+  padding: $default-padding calc($default-padding * 2);
+  position: absolute;
+  right: 0;
+  width: $default-width;
+  z-index: 9999;
+
+  &.stacked {
+    position: relative;
+  }
+
+  > .message-container {
+    align-items: center;
+    display: flex;
+    overflow: auto;
+
+    > .message {
+      font-size: calc(var(--s0) * 1em);
+      margin-left: calc($default-margin / 2);
+    }
+
+    > span {
+      font-size: calc(var(--s2) * 1em);
+    }
+  }
+
+  .#{bem.$base}.button {
+    padding: calc($default-padding / 2);
+
+    &:focus {
+      background-color: transparent;
+    }
+  }
+}
+
+

package/src/ui/a/NotificationStack/NotificationStack.jsx

@@ -0,0 +1,90 @@
+/* @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 { Notification } from '../Notification'
+
+// Local Definitions
+
+import './styles.scss'
+
+const baseClassName = styleNames.base
+
+const componentClassName = 'notification-stack'
+
+const NotificationStack = ({
+  id,
+  className:userClassName,
+  style,
+  notifications,
+  maxNotifications,
+  ...otherProps
+}) => {
+  const notificationsToDisplay = notifications.slice(0, maxNotifications)
+
+  return (
+    <div
+      id={id}
+      className={[
+        baseClassName,
+        componentClassName,
+        userClassName,
+      ]
+        .filter((e) => e)
+        .join(' ')}
+      style={style}
+      {...otherProps}
+    >
+      {notificationsToDisplay.map((notification) => (
+        <Notification
+          className="stacked"
+          key={notification?.id || notification.message}
+          {...notification}
+        />
+      ))}
+    </div>
+  )
+}
+
+NotificationStack.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),
+
+  /**
+   * The list of notifications to display
+   */
+  notifications:PropTypes.arrayOf(PropTypes.shape({
+    id               :PropTypes.string,
+    color            :PropTypes.string,
+    message          :PropTypes.string,
+    type             :PropTypes.string,
+    isVisible        :PropTypes.bool,
+    closeNotification:PropTypes.func,
+  })),
+
+  /**
+   * The maximum number of notifications to display
+   */
+  maxNotifications:PropTypes.number,
+}
+
+NotificationStack.defaultProps = {
+  maxNotifications:5,
+}
+
+export default NotificationStack

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

@@ -0,0 +1 @@
+export { default as NotificationStack } from './NotificationStack'

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

@@ -0,0 +1,17 @@
+@use "@pareto-engineering/bem";
+@use "@pareto-engineering/styles/src/mixins";
+@use "@pareto-engineering/styles/src/globals" as *;
+
+$default-padding: 1em;
+
+.#{bem.$base}.notification-stack {
+  align-items: center;
+  bottom: 0;
+  display: flex;
+  flex-direction: column;
+  padding: $default-padding calc($default-padding * 2);
+  position: fixed;
+  right: 0;
+  row-gap: $default-padding;
+  z-index: 9999;
+}

package/src/ui/a/index.js

@@ -10,6 +10,8 @@ export { HamburgerButton } from './HamburgerButton'
 export { IconList } from './IconList'
 export { Label } from './Label'
 export { LoadingCircle } from './LoadingCircle'
+export { Notification } from './Notification'
+export { NotificationStack } from './NotificationStack'
 export { People } from './People'
 export { Popover } from './Popover'
 export { ProgressBar } from './ProgressBar'