@pareto-engineering/design-system 5.2.1 → 5.3.0

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

@@ -24,25 +24,53 @@ $default-width: var(--tooltip-width, 20rem);
     visibility: hidden;
     z-index: 10;
 
-    &.top {
+    &.floating.top {
+      left: var(--mouse-x);
+      position: fixed;
+      top: calc(var(--mouse-y) - $default-block-padding);
+      transform: translate(-50%, -100%);
+    }
+
+    &.floating.right {
+      left: calc(var(--mouse-x) + $default-inline-padding);
+      position: fixed;
+      top: var(--mouse-y);
+      transform: translateY(-50%);
+    }
+
+    &.floating.bottom {
+      left: var(--mouse-x);
+      position: fixed;
+      top: calc(var(--mouse-y) + $default-block-padding);
+      transform: translateX(-50%);
+    }
+
+    &.floating.left {
+      left: calc(var(--mouse-x) - $default-inline-padding);
+      position: fixed;
+      top: var(--mouse-y);
+      transform: translate(-100%, -50%);
+    }
+
+    &:not(.floating).top {
       --horizontal: -50%;
       bottom: calc(100% + $default-block-padding);
       left: 50%;
     }
 
-    &.right {
+    &:not(.floating).right {
       --vertical: 50%;
       bottom: 50%;
       left: calc(100% + $default-inline-padding);
     }
 
-    &.bottom {
+    &:not(.floating).bottom {
       --horizontal: -50%;
       left: 50%;
       top: calc(100% + $default-block-padding);
     }
 
-    &.left {
+    &:not(.floating).left {
       --vertical: 50%;
       bottom: 50%;
       right: calc(100% + $default-inline-padding);

package/src/ui/a/index.js

@@ -31,3 +31,4 @@ export { XMLEditor } from './XMLEditor'
 export { DatePicker } from './DatePicker'
 export { Tooltip } from './Tooltip'
 export { AreaChart, BarChart, PieChart } from './Charts'
+export { ThroughPutIndicator } from './ThroughPutIndicator'

package/src/ui/f/FormInput/FormInput.jsx

@@ -19,6 +19,7 @@ import {
   EditorInput,
   FileUpload,
   LatexPreviewInput,
+  ToggleInput,
 } from '../fields'
 
 import './styles.scss'
@@ -100,6 +101,15 @@ const FormInput = ({
       />
     )
   }
+  if (type === 'toggle') {
+    return (
+      <ToggleInput
+        className={newClassName}
+        disabled={disabled}
+        {...otherProps}
+      />
+    )
+  }
 
   if (type === 'query-choices') {
     return (
@@ -218,6 +228,7 @@ FormInput.propTypes = {
     'url',
     'rating',
     'checkbox',
+    'toggle',
     // to be removed
     'extendedTypeInput',
   ]),

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

@@ -0,0 +1,140 @@
+/* @pareto-engineering/generator-front 1.1.1-alpha.3 */
+import * as React from 'react'
+import PropTypes from 'prop-types'
+import { useField } from 'formik'
+import styleNames from '@pareto-engineering/bem/exports'
+import { ToggleSwitch } from 'ui/a'
+import { FormLabel, FormDescription } from '../../common'
+
+import './styles.scss'
+
+// Local Definitions
+const baseClassName = styleNames.base
+const componentClassName = 'toggle-input'
+
+/**
+ * Toggle input field component that wraps ToggleSwitch for use with Formik
+ */
+const ToggleInput = ({
+  id,
+  className: userClassName,
+  style,
+  name,
+  label,
+  color,
+  labelColor,
+  validate,
+  description,
+  disabled,
+  optional,
+  size,
+  // ...otherProps
+}) => {
+  const [field, , helpers] = useField({ name, validate, type: 'checkbox' })
+
+  const handleChange = () => {
+    helpers.setValue(!field.value)
+  }
+
+  return (
+    <div
+      id={id}
+      className={[
+        baseClassName,
+        componentClassName,
+        userClassName,
+        `y-${color}`,
+      ]
+        .filter((e) => e)
+        .join(' ')}
+      style={style}
+    >
+      <FormLabel
+        name={name}
+        color={labelColor}
+        optional={optional}
+      >
+        {label}
+      </FormLabel>
+      <div className="toggle-wrapper">
+        <ToggleSwitch
+          checked={Boolean(field.value)}
+          handleOnChange={handleChange}
+          inputId={name}
+          size={size}
+          disabled={disabled}
+        />
+      </div>
+      <FormDescription className="s-1" description={description} name={name} />
+    </div>
+  )
+}
+
+ToggleInput.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 input name (html - and Formik state)
+   */
+  name:PropTypes.string.isRequired,
+
+  /**
+   * The input label
+   */
+  label:PropTypes.string.isRequired,
+
+  /**
+   * The input label color
+   */
+  labelColor:PropTypes.string,
+
+  /**
+   * The input field validator function
+   */
+  validate:PropTypes.func,
+
+  /**
+   * Input description
+   */
+  description:PropTypes.string,
+
+  /**
+   * Whether the toggle input should be disabled
+   */
+  disabled:PropTypes.bool,
+
+  /**
+   * The text input color
+   */
+  color:PropTypes.string,
+
+  /**
+   * Whether the input is optional or not
+   */
+  optional:PropTypes.bool,
+
+  /**
+   * The size of the toggle switch
+   */
+  size:PropTypes.string,
+}
+
+ToggleInput.defaultProps = {
+  color   :'paragraph',
+  disabled:false,
+}
+
+export default ToggleInput

package/src/ui/f/fields/ToggleInput/index.js

@@ -0,0 +1,2 @@
+/* @pareto-engineering/generator-front 1.1.1-alpha.3 */
+export { default as ToggleInput } from './ToggleInput'

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

@@ -0,0 +1,22 @@
+/* @pareto-engineering/generator-front 1.1.1-alpha.3 */
+
+@use "@pareto-engineering/bem";
+@use "@pareto-engineering/styles/src/mixins";
+@use "@pareto-engineering/styles/src/globals" as *;
+
+.#{bem.$base}.toggle-input {
+  display: flex;
+  flex-direction: column;
+
+  > .#{bem.$base}.form-label {
+    margin-bottom: var(--gap);
+  }
+
+  > .toggle-wrapper {
+    align-items: center;
+    display: flex;
+    margin-bottom: calc(var(--gap) / 2);
+  }
+}
+
+

package/src/ui/f/fields/index.js

@@ -19,3 +19,4 @@ export {
   getFileType,
   getFileTypeFromUrl,
 } from './FileUpload'
+export { ToggleInput } from './ToggleInput'

package/src/ui/utils/formatting.js

@@ -1,11 +1,12 @@
 export const DATE_FORMATS = {
-  HUMAN_READABLE:'human_readable',
-  TIME          :'time',
-  DATETIME      :'datetime',
-  CHART_DATE    :'chart_date',
-  CHART_TIME    :'chart_time',
-  WEEKDAY_DATE  :'weekday_date',
-  DAY_VIEW      :'day_view',
+  HUMAN_READABLE          :'human_readable',
+  HUMAN_READABLE_WITH_TIME:'human_readable_with_time',
+  TIME                    :'time',
+  DATETIME                :'datetime',
+  CHART_DATE              :'chart_date',
+  CHART_TIME              :'chart_time',
+  WEEKDAY_DATE            :'weekday_date',
+  DAY_VIEW                :'day_view',
 }
 
 const isValidDate = (date) => date instanceof Date && !Number.isNaN(date)
@@ -52,28 +53,6 @@ export const formatTime = (seconds) => {
   return parts.join(' ')
 }
 
-const parseDate = (input) => {
-  if (input instanceof Date) return input
-  if (typeof input === 'number') return new Date(input)
-
-  if (typeof input === 'string') {
-    if (isTimeSliceFormat(input)) {
-      return createTimeFromSlice(input)
-    }
-
-    const parsed = new Date(input)
-    if (isValidDate(parsed)) return parsed
-
-    const timestamp = parseInt(input, 10)
-    if (!Number.isNaN(timestamp)) {
-      const date = new Date(timestamp * 1000)
-      if (isValidDate(date)) return date
-    }
-  }
-
-  return null
-}
-
 const formatStrategies = {
   [DATE_FORMATS.CHART_DATE]:(date) => {
     const monthDay = date.toLocaleDateString('en-US', {
@@ -95,9 +74,39 @@ const formatStrategies = {
     timeZone:'UTC',
   }),
 
+  [DATE_FORMATS.HUMAN_READABLE_WITH_TIME]:(date) => date.toLocaleString('en-US', {
+    year    :'numeric',
+    month   :'short',
+    day     :'numeric',
+    hour    :'2-digit',
+    timeZone:'UTC',
+  }),
+
   default:(date) => date.toISOString(),
 }
 
+export const parseDate = (input) => {
+  if (input instanceof Date) return input
+  if (typeof input === 'number') return new Date(input)
+
+  if (typeof input === 'string') {
+    if (isTimeSliceFormat(input)) {
+      return createTimeFromSlice(input)
+    }
+
+    const parsed = new Date(input)
+    if (isValidDate(parsed)) return parsed
+
+    const timestamp = parseInt(input, 10)
+    if (!Number.isNaN(timestamp)) {
+      const date = new Date(timestamp * 1000)
+      if (isValidDate(date)) return date
+    }
+  }
+
+  return null
+}
+
 export const formatDate = (input, format = DATE_FORMATS.HUMAN_READABLE) => {
   try {
     if (typeof input === 'string' && isTimeSliceFormat(input)) {

package/src/ui/utils/index.js

@@ -1,5 +1,5 @@
 export { useWindowSize, useDynamicPosition, useOutsideClick } from './hooks'
 export {
-  formatTime, formatDate, DATE_FORMATS, snakeCaseToTitleCase,
+  formatTime, formatDate, DATE_FORMATS, parseDate, snakeCaseToTitleCase,
 } from './formatting'
 export { applyCharacterLimit } from './applyCharacterLimit'

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

@@ -14669,6 +14669,7 @@ exports[`Storyshots a/ToggleSwitch Multiple 1`] = `
       type="checkbox"
     />
     <label
+      className=""
       htmlFor="option1"
     />
   </button>,
@@ -14686,6 +14687,7 @@ exports[`Storyshots a/ToggleSwitch Multiple 1`] = `
       type="checkbox"
     />
     <label
+      className=""
       htmlFor="option2"
     />
   </button>,
@@ -14703,6 +14705,7 @@ exports[`Storyshots a/ToggleSwitch Multiple 1`] = `
       type="checkbox"
     />
     <label
+      className=""
       htmlFor="option3"
     />
   </button>,
@@ -14722,7 +14725,9 @@ exports[`Storyshots a/ToggleSwitch Single 1`] = `
   <input
     type="checkbox"
   />
-  <label />
+  <label
+    className=""
+  />
 </button>
 `;
 
@@ -26737,6 +26742,7 @@ exports[`Storyshots b/ThemeSelector Base 1`] = `
         type="checkbox"
       />
       <label
+        className=""
         htmlFor="theme-toggle"
       />
     </button>