@pareto-engineering/design-system 2.0.0-alpha.60 → 2.0.0-alpha.62

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

@@ -0,0 +1,49 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+import { Label } from 'ui'
+import { ALL_COLORS } from 'stories/colors'
+
+export default {
+  title        :'a/Label',
+  component    :Label,
+  subcomponents:{
+    // Item:ColumnLabel.Item
+  },
+  decorators:[
+    // storyfn => <div className="">{ storyfn() }</div>,
+  ],
+  argTypes:{
+    color    :{ control: { type: 'select', options: ALL_COLORS } },
+    isCompact:{ control: { type: 'boolean' } },
+    isGhost  :{ control: { type: 'boolean' } },
+  },
+}
+
+const Template = (args) => <Label {...args} />
+
+export const Base = Template.bind({})
+Base.args = {
+  children:'Label Value',
+}
+
+const MultiTemplate = (args) => ALL_COLORS.map((color) => (
+  <Label {...args} color={color} key={color}>
+    This is a
+    {' '}
+    {color}
+    {' '}
+    label
+  </Label>
+))
+
+export const Normal = MultiTemplate.bind({})
+
+export const Ghost = MultiTemplate.bind({})
+Ghost.args = {
+  isGhost:true,
+}
+
+export const Compact = MultiTemplate.bind({})
+Compact.args = {
+  isCompact:true,
+}

package/src/stories/f/Checkbox.stories.jsx

@@ -0,0 +1,95 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { useEffect } from 'react'
+
+import { Formik, Form, useField } from 'formik'
+
+import { Checkbox, FormDebugger } from 'ui'
+
+export default {
+  title        :'f/fields/Checkbox',
+  component    :Checkbox,
+  subcomponents:{
+    // Item:Checkbox.Item
+  },
+  decorators:[
+    // storyfn => <div className="">{ storyfn() }</div>,
+    (storyfn) => (
+      <Formik
+        initialValues={{}}
+      >
+        <Form>
+
+          { storyfn() }
+        </Form>
+      </Formik>
+    ),
+  ],
+  argTypes:{
+    label       :{ control: 'text' },
+    description :{ control: 'text' },
+    defaultValue:{ control: 'boolean' },
+    disabled    :{ control: 'boolean' },
+    optional    :{ control: 'boolean' },
+  },
+}
+
+// eslint-disable-next-line react/prop-types
+const Template = ({ defaultValue, ...args }) => {
+  const Content = () => {
+    const { name } = args
+    const [, , helpers] = useField(name)
+    const { setValue } = helpers
+
+    useEffect(() => {
+      if (defaultValue) {
+        setValue(defaultValue)
+      }
+    }, [defaultValue])
+
+    return (
+      <>
+        <Checkbox {...args} />
+        <FormDebugger />
+      </>
+    )
+  }
+
+  return <Content />
+}
+
+export const Base = Template.bind({})
+Base.args = {
+  name:'urgent',
+}
+
+export const WithLabel = Template.bind({})
+WithLabel.args = {
+  ...Base.args,
+  label:'Urgent',
+}
+
+export const WithDescription = Template.bind({})
+WithDescription.args = {
+  ...Base.args,
+  description:'Click on the checkbox',
+}
+
+export const WithDefaultFormikValue = Template.bind({})
+WithDefaultFormikValue.args = {
+  ...Base.args,
+  defaultValue:true,
+}
+
+export const Disabled = Template.bind({})
+Disabled.args = {
+  ...Base.args,
+  disabled:true,
+}
+
+export const Optional = Template.bind({})
+Optional.args = {
+  ...Base.args,
+  optional:true,
+}

package/src/stories/f/ChoicesInput.stories.jsx

@@ -1,8 +1,8 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react'
-import { useEffect } from 'react'
+
 import { ChoicesInput, FormDebugger } from 'ui'
-import { Formik, Form, useField } from 'formik'
+import { Formik, Form } from 'formik'
 
 export default {
   title        :'f/fields/ChoicesInput',
@@ -29,6 +29,14 @@ export default {
   },
 }
 
+const Template = (args) => (
+  <>
+    <ChoicesInput {...args} />
+    <FormDebugger />
+  </>
+)
+
+export const Base = Template.bind({})
 const optionsMap = [
   {
     value:'red',
@@ -64,52 +72,18 @@ const optionsMap = [
   },
 ]
 
-// eslint-disable-next-line react/prop-types
-const Template = ({ defaultValue, ...args }) => {
-  const Content = () => {
-    const [, , helpers] = useField(args.name)
-    const { setValue } = helpers
-
-    useEffect(() => {
-      setValue(defaultValue)
-    }, [])
-
-    return (
-      <>
-        <ChoicesInput {...args} />
-        <FormDebugger />
-      </>
-    )
-  }
-  return <Content />
-}
-
-export const Base = Template.bind({})
 Base.args = {
   id     :'colors',
   options:optionsMap,
   name   :'color',
 }
 
-export const WithDefaultFormikValue = Template.bind({})
-WithDefaultFormikValue.args = {
-  ...Base.args,
-  defaultValue:'red',
-}
-
 export const Multiple = Template.bind({})
 Multiple.args = {
   ...Base.args,
   multiple:true,
 }
 
-export const MultipleWithDefaultFormikValue = Template.bind({})
-MultipleWithDefaultFormikValue.args = {
-  ...Base.args,
-  multiple    :true,
-  defaultValue:['brown', 'violet'],
-}
-
 export const MultipleWithGrid = Template.bind({})
 MultipleWithGrid.args = {
   ...Base.args,

package/src/stories/f/FormInput.stories.jsx

@@ -62,6 +62,11 @@ export const Base = () => {
       name :'description',
       label:'Describe yourself in a few sentences',
     },
+    {
+      type :'checkbox',
+      name :'urgent',
+      label:'Urgent',
+    },
     {
       type   :'choices',
       name   :'colors',

package/src/ui/a/Label/Label.jsx

@@ -0,0 +1,93 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { useLayoutEffect } from 'react'
+
+import PropTypes from 'prop-types'
+
+import styleNames from '@pareto-engineering/bem'
+
+// Local Definitions
+
+const baseClassName = styleNames.base
+
+const componentClassName = 'label'
+
+/**
+ * This is the component description.
+ */
+const Label = ({
+  id,
+  className:userClassName,
+  style,
+  children,
+  color,
+  isCompact,
+  isGhost,
+}) => {
+  useLayoutEffect(() => {
+    import('./styles.scss')
+  }, [])
+
+  return (
+    <div
+      id={id}
+      className={[
+        baseClassName,
+        componentClassName,
+        userClassName,
+        `x-${color}`,
+        isCompact && styleNames.modifierCompact,
+        isGhost && styleNames.modifierGhost,
+      ]
+        .filter((e) => e)
+        .join(' ')}
+      style={style}
+    >
+      {children}
+    </div>
+  )
+}
+
+Label.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),
+
+  /**
+   * Whether the button has the ghost style
+   */
+  isGhost:PropTypes.bool,
+
+  /**
+   * Whether the button is compact
+   */
+  isCompact:PropTypes.bool,
+
+  /**
+   *  The default font color to display for the label
+   */
+  color:PropTypes.string,
+
+  /**
+   *  The children JSX
+   */
+  children:PropTypes.node,
+}
+
+Label.defaultProps = {
+  color:'main1',
+}
+
+export default Label

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

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

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

@@ -0,0 +1,34 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+@use "@pareto-engineering/bem";
+
+$default-padding-bottom: .4em;
+$default-padding-side: .7em;
+$default-padding-top: .5em;
+
+$compact-padding: $default-padding-top*.8 $default-padding-side*.8 $default-padding-bottom*.8;
+$default-padding: $default-padding-top $default-padding-side $default-padding-bottom;
+
+$default-color: primary;
+$default-image-size: 2em;
+$default-font-size: calc(1 em * var(--s-1));
+
+.#{bem.$base}.label{
+    align-items: center;
+    background: var(--x, var(--#{$default-color}));
+    border-radius: 3em;
+    color: var(--on-x, var(--on-#{$default-color}));
+    display: inline-flex;
+    font-size: $default-font-size;
+    padding: $default-padding;
+    white-space: nowrap;
+
+    &.#{bem.$modifier-compact} {
+        padding: $compact-padding;
+    }
+
+    &.#{bem.$modifier-ghost} {
+        background: transparent;
+        border: 1px solid var(--x, var(--#{$default-color}));
+        color: var(--x, var(--#{$default-color}));
+    }
+}

package/src/ui/a/index.js

@@ -30,3 +30,4 @@ export { BackgroundGradient } from './BackgroundGradient'
 export { ContentTree } from './ContentTree'
 export { Popover } from './Popover'
 export { Alert } from './Alert'
+export { Label } from './Label'

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

@@ -13,6 +13,7 @@ import {
   QueryCombobox,
   QuerySelect,
   RatingsInput,
+  Checkbox,
 } from '../fields'
 
 // Local Definitions
@@ -94,6 +95,16 @@ const FormInput = ({
       />
     )
   }
+
+  if (type === 'checkbox') {
+    return (
+      <Checkbox
+        className={newClassName}
+        {...otherProps}
+      />
+    )
+  }
+
   if (extraTypes?.[type]) {
     const Component = extraTypes[type]
     return (

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

@@ -0,0 +1,118 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { useLayoutEffect } from 'react'
+
+import PropTypes from 'prop-types'
+
+import styleNames from '@pareto-engineering/bem'
+
+import { useField } from 'formik'
+
+import { FormLabel, FormDescription } from '../../common'
+
+// Local Definitions
+
+const baseClassName = styleNames.base
+
+const componentClassName = 'checkbox'
+
+/**
+ * This is the component description.
+ */
+const Checkbox = ({
+  id,
+  className:userClassName,
+  style,
+  name,
+  label,
+  description,
+  disabled,
+  optional,
+  // ...otherProps
+}) => {
+  useLayoutEffect(() => {
+    import('./styles.scss')
+  }, [])
+
+  const [field] = useField({ name, type: 'checkbox' })
+
+  return (
+    <div
+      id={id}
+      className={[
+
+        baseClassName,
+
+        componentClassName,
+        userClassName,
+      ]
+        .filter((e) => e)
+        .join(' ')}
+      style={style}
+      // {...otherProps}
+    >
+      {label && (
+      <FormLabel name={name} optional={optional}>
+        {label}
+      </FormLabel>
+      )}
+      <input
+        id={name}
+        className="input"
+        type="checkbox"
+        disabled={disabled}
+        {...field}
+      />
+      <FormDescription className="v50 mt-v s-1" description={description} name={name} />
+    </div>
+  )
+}
+
+Checkbox.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 description to guide the user if it's not obvious
+   */
+  description:PropTypes.string,
+
+  /**
+   * Whether the input should be disabled
+   */
+  disabled:PropTypes.bool,
+
+  /**
+   * The input label
+   */
+  label:PropTypes.string,
+
+  /**
+   * Whether the input should have an optional tag
+   */
+  optional:PropTypes.bool,
+}
+
+Checkbox.defaultProps = {
+  disabled:false,
+}
+
+export default Checkbox

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

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

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

@@ -0,0 +1,14 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+@use "@pareto-engineering/bem";
+
+$default-margin: 1em;
+
+.#{bem.$base}.checkbox {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+
+    .#{bem.$base}.label {
+        margin-bottom: $default-margin
+    }
+}

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

@@ -72,7 +72,7 @@ const ChoicesInput = ({
           <Choice
             key={choice.value}
             name={name}
-            id={`${name}-${choice.value}`}
+            id={`${id}-${choice.value}`}
             multiple={multiple}
             validate={validate}
             disabled={disabled}

package/src/ui/f/fields/ChoicesInput/common/Choice/Choice.jsx

@@ -28,15 +28,7 @@ const Choice = ({
   validate,
   disabled,
 }) => {
-  const type = multiple ? 'checkbox' : 'radio'
-
-  const [field] = useField({
-    name,
-    validate,
-    type,
-    value,
-  })
-
+  const [field] = useField({ name, validate })
   return (
     <div
       className={[
@@ -51,7 +43,7 @@ const Choice = ({
       style={style}
     >
       <input
-        type={type}
+        type={multiple ? 'checkbox' : 'radio'}
         id={id}
         name={name}
         {...field}

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

@@ -5,3 +5,4 @@ export { TextareaInput } from './TextareaInput'
 export { RatingsInput } from './RatingsInput'
 export { QueryCombobox } from './QueryCombobox'
 export { QuerySelect } from './QuerySelect'
+export { Checkbox } from './Checkbox'