@pareto-engineering/design-system 4.0.0-alpha.63 → 4.0.0-alpha.65

package/src/stories/f/QuerySelect.stories.jsx

@@ -28,15 +28,11 @@ export default {
     ),
   ],
   argTypes:{
-    color           :{ control: 'text' },
-    label           :{ control: 'text' },
-    labelColor      :{ control: 'text' },
-    isLoading       :{ control: 'boolean' },
-    optional        :{ control: 'boolean' },
-    labelSpan       :{ control: 'number' },
-    inputSpan       :{ control: 'number' },
-    desktopLabelSpan:{ control: 'number' },
-    desktopInputSpan:{ control: 'number' },
+    color     :{ control: 'text' },
+    label     :{ control: 'text' },
+    labelColor:{ control: 'text' },
+    isLoading :{ control: 'boolean' },
+    optional  :{ control: 'boolean' },
   },
 }
 const statuses = [
@@ -99,7 +95,13 @@ const Template = ({ isLoading, defaultFormikState, ...args }) => {
   }
 
   const Content = () => (
-    <div className="grid">
+    <div
+      style={{
+        display      :'flex',
+        flexDirection:'column',
+        gap          :'1rem',
+      }}
+    >
       <QuerySelect
         name="status"
         label="Select Task Status"
@@ -146,12 +148,3 @@ export const Optional = Template.bind({})
 Optional.args = {
   optional:true,
 }
-
-export const OnSingleRow = Template.bind({})
-OnSingleRow.args = {
-  ...Base.args,
-  labelSpan       :4,
-  inputSpan       :4,
-  desktopLabelSpan:4,
-  desktopInputSpan:10,
-}

package/src/stories/f/RatingsInput.stories.jsx

@@ -33,15 +33,17 @@ export default {
     labelMax           :{ control: 'text' },
     labelMin           :{ control: 'text' },
     optional           :{ control: 'boolean' },
-    labelSpan          :{ control: 'number' },
-    inputSpan          :{ control: 'number' },
-    desktopLabelSpan   :{ control: 'number' },
-    desktopInputSpan   :{ control: 'number' },
   },
 }
 
 const Template = (args) => (
-  <div className="grid">
+  <div
+    style={{
+      display      :'flex',
+      flexDirection:'column',
+      gap          :'1rem',
+    }}
+  >
     <RatingsInput {...args} />
     <FormDebugger />
   </div>
@@ -73,12 +75,3 @@ Labels.args = {
   labelMin           :'not satisfied.',
   displayRatingsLabel:true,
 }
-
-export const OnSingleRow = Template.bind({})
-OnSingleRow.args = {
-  ...Base.args,
-  labelSpan       :4,
-  inputSpan       :4,
-  desktopLabelSpan:4,
-  desktopInputSpan:10,
-}

package/src/stories/f/SelectInput.stories.jsx

@@ -22,20 +22,22 @@ export default {
     ),
   ],
   argTypes:{
-    color           :{ control: 'text' },
-    label           :{ control: 'text' },
-    labelColor      :{ control: 'text' },
-    disabled        :{ control: 'boolean' },
-    optional        :{ control: 'boolean' },
-    labelSpan       :{ control: 'number' },
-    inputSpan       :{ control: 'number' },
-    desktopLabelSpan:{ control: 'number' },
-    desktopInputSpan:{ control: 'number' },
+    color     :{ control: 'text' },
+    label     :{ control: 'text' },
+    labelColor:{ control: 'text' },
+    disabled  :{ control: 'boolean' },
+    optional  :{ control: 'boolean' },
   },
 }
 
 const Template = (args) => (
-  <div className="grid">
+  <div
+    style={{
+      display      :'flex',
+      flexDirection:'column',
+      gap          :'1rem',
+    }}
+  >
     <SelectInput {...args} />
     <FormDebugger />
   </div>
@@ -91,12 +93,3 @@ DisabledWithDescriptionSelectInput.args = {
   disabled   :true,
   description:'This is a description',
 }
-
-export const OnSingleRow = Template.bind({})
-OnSingleRow.args = {
-  ...Base.args,
-  labelSpan       :4,
-  inputSpan       :4,
-  desktopLabelSpan:4,
-  desktopInputSpan:10,
-}

package/src/stories/f/TextInput.stories.jsx

@@ -27,25 +27,27 @@ export default {
   ],
   argTypes:{
     // backgroundColor:{ control: 'color' },
-    placeholder     :{ control: 'text' },
-    autoComplete    :{ control: 'select', options: ['off', 'on'] },
-    disabled        :{ control: 'boolean' },
-    type            :{ control: 'text' },
-    name            :{ control: 'text' },
-    label           :{ control: 'text' },
-    labelColor      :{ control: 'text' },
-    optional        :{ control: 'boolean' },
-    symbol          :{ control: 'text' },
-    labelSpan       :{ control: 'number' },
-    inputSpan       :{ control: 'number' },
-    desktopLabelSpan:{ control: 'number' },
-    desktopInputSpan:{ control: 'number' },
+    placeholder :{ control: 'text' },
+    autoComplete:{ control: 'select', options: ['off', 'on'] },
+    disabled    :{ control: 'boolean' },
+    type        :{ control: 'text' },
+    name        :{ control: 'text' },
+    label       :{ control: 'text' },
+    labelColor  :{ control: 'text' },
+    optional    :{ control: 'boolean' },
+    symbol      :{ control: 'text' },
   },
 }
 
 // eslint-disable-next-line react/prop-types
 const Template = (args) => (
-  <div className="grid">
+  <div
+    style={{
+      display      :'flex',
+      flexDirection:'column',
+      gap          :'1rem',
+    }}
+  >
     <TextInput {...args} />
     <FormDebugger />
   </div>
@@ -116,12 +118,3 @@ HasSymbol.args = {
   ...Base.args,
   symbol:"'$'",
 }
-
-export const OnSingleRow = Template.bind({})
-OnSingleRow.args = {
-  ...Base.args,
-  labelSpan       :4,
-  inputSpan       :4,
-  desktopLabelSpan:4,
-  desktopInputSpan:10,
-}

package/src/stories/f/TextareaInput.stories.jsx

@@ -32,15 +32,17 @@ export default {
     disabled          :{ control: 'boolean' },
     labelAsDescription:{ control: 'boolean' },
     optional          :{ control: 'boolean' },
-    labelSpan         :{ control: 'number' },
-    inputSpan         :{ control: 'number' },
-    desktopLabelSpan  :{ control: 'number' },
-    desktopInputSpan  :{ control: 'number' },
   },
 }
 
 const Template = (args) => (
-  <div className="grid">
+  <div
+    style={{
+      display      :'flex',
+      flexDirection:'column',
+      gap          :'1rem',
+    }}
+  >
     <TextareaInput {...args} />
     <FormDebugger />
   </div>
@@ -103,12 +105,3 @@ DisableResize.args = {
   ...Base.args,
   resize:'none',
 }
-
-export const OnSingleRow = Template.bind({})
-OnSingleRow.args = {
-  ...Base.args,
-  labelSpan       :4,
-  inputSpan       :4,
-  desktopLabelSpan:4,
-  desktopInputSpan:10,
-}

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

@@ -6,28 +6,17 @@ import { memo } from 'react'
 import PropTypes from 'prop-types'
 
 import {
-  TextInput as TextInputV1,
-  TextareaInput as TextareaInputV1,
-  ChoicesInput as ChoicesInputV1,
-  SelectInput as SelectInputV1,
-  QueryCombobox as QueryComboboxV1,
-  QuerySelect as QuerySelectV1,
-  RatingsInput as RatingsInputV1,
-  Checkbox as CheckboxV1,
-  QueryChoices as QueryChoicesV1,
-  LinkInput as LinkInputV1,
-  EditorInput as EditorInputV1,
-  TextInputV2,
-  TextareaInputV2,
-  ChoicesInputV2,
-  SelectInputV2,
-  QueryComboboxV2,
-  QuerySelectV2,
-  RatingsInputV2,
-  CheckboxV2,
-  QueryChoicesV2,
-  LinkInputV2,
-  EditorInputV2,
+  TextInput,
+  TextareaInput,
+  ChoicesInput,
+  SelectInput,
+  QueryCombobox,
+  QuerySelect,
+  RatingsInput,
+  Checkbox,
+  QueryChoices,
+  LinkInput,
+  EditorInput,
 } from '../fields'
 
 import './styles.scss'
@@ -46,7 +35,6 @@ const FormInput = ({
   type,
   extraTypes,
   disabled,
-  isVersionTwo,
   ...otherProps
 }) => {
   const newClassName = [
@@ -54,32 +42,6 @@ const FormInput = ({
     componentClassName,
   ].filter(Boolean).join(' ')
 
-  let TextInput = TextInputV1
-  let TextareaInput = TextareaInputV1
-  let ChoicesInput = ChoicesInputV1
-  let SelectInput = SelectInputV1
-  let QueryCombobox = QueryComboboxV1
-  let QuerySelect = QuerySelectV1
-  let RatingsInput = RatingsInputV1
-  let Checkbox = CheckboxV1
-  let QueryChoices = QueryChoicesV1
-  let LinkInput = LinkInputV1
-  let EditorInput = EditorInputV1
-
-  if (isVersionTwo) {
-    TextInput = TextInputV2
-    TextareaInput = TextareaInputV2
-    ChoicesInput = ChoicesInputV2
-    SelectInput = SelectInputV2
-    QueryCombobox = QueryComboboxV2
-    QuerySelect = QuerySelectV2
-    RatingsInput = RatingsInputV2
-    Checkbox = CheckboxV2
-    QueryChoices = QueryChoicesV2
-    LinkInput = LinkInputV2
-    EditorInput = EditorInputV2
-  }
-
   if (type === 'textarea') {
     return (
       <TextareaInput
@@ -234,17 +196,10 @@ FormInput.propTypes = {
    * Whether the Form input input should be disabled
    */
   disabled  :PropTypes.bool,
-
-  /**
-   * Whethe the Form input is version 2
-   */
-  isVersionTwo:PropTypes.bool,
-
 }
 
 FormInput.defaultProps = {
-  disabled    :false,
-  isVersionTwo:false,
+  disabled:false,
 }
 
 export default memo(FormInput)

package/src/ui/f/common/Description/Description.jsx

@@ -7,10 +7,10 @@ import PropTypes from 'prop-types'
 
 import styleNames from '@pareto-engineering/bem/exports'
 
-import './styles.scss'
-
 // Local Definitions
 
+import './styles.scss'
+
 const baseClassName = styleNames.base
 
 const componentClassName = 'description'

package/src/ui/f/common/Label/Label.jsx

@@ -5,9 +5,8 @@ import PropTypes from 'prop-types'
 
 import styleNames from '@pareto-engineering/bem/exports'
 
-import './styles.scss'
-
 // Local Definitions
+import './styles.scss'
 
 const baseClassName = styleNames.base
 
@@ -25,8 +24,6 @@ const Label = ({
   color,
   optional,
   as:Wrapper,
-  columnSpan,
-  desktopColumnSpan,
   // ...otherProps
 }) => (
   <Wrapper
@@ -40,12 +37,7 @@ const Label = ({
     ]
       .filter((e) => e)
       .join(' ')}
-    style={{
-      ...style,
-      '--column-span'   :columnSpan || 'var(--columns)',
-      '--column-span-md':desktopColumnSpan || 'var(--columns)',
-    }}
-    // {...otherProps}
+    style={style}
   >
     {children}
     {optional && ' (Optional)'}
@@ -91,16 +83,6 @@ Label.propTypes = {
    * Whether the input should have an optional tag
    */
   optional:PropTypes.bool,
-
-  /**
- * How many columns the input should span
- */
-  columnSpan:PropTypes.number,
-
-  /**
-   * How many columns the input should span on desktop
-   */
-  desktopColumnSpan:PropTypes.number,
 }
 
 Label.defaultProps = {

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

@@ -6,9 +6,4 @@
 
 .#{bem.$base}.form-label {
   color: var(--x);
-  grid-column: span var(--column-span);
-
-  @include mixins.media($from: $sm-md) {
-    grid-column: span var(--column-span-md);
-  }
 }

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

@@ -1,6 +1,4 @@
 export { Label as FormLabel } from './Label'
 export { Description as FormDescription } from './Description'
 export { Debugger as FormDebugger } from './Debugger'
-export { InputWrapper } from './InputWrapper'
 export * from './utils'
-export * from './V2'

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

@@ -7,11 +7,10 @@ import styleNames from '@pareto-engineering/bem/exports'
 
 import { useField } from 'formik'
 
-import { FormLabel, FormDescription, InputWrapper } from '../../common'
-
-import './styles.scss'
+import { FormLabel, FormDescription } from '../../common'
 
 // Local Definitions
+import './styles.scss'
 
 const baseClassName = styleNames.base
 
@@ -30,51 +29,41 @@ const Checkbox = ({
   disabled,
   optional,
   labelColor,
-  labelSpan,
-  desktopLabelSpan,
-  inputSpan,
-  desktopInputSpan,
   // ...otherProps
 }) => {
   const [field] = useField({ name, type: 'checkbox' })
 
   return (
-    <>
+    <div
+      id={id}
+      className={[
+        baseClassName,
+        componentClassName,
+        userClassName,
+      ]
+        .filter((e) => e)
+        .join(' ')}
+      style={style}
+    >
       {label && (
         <FormLabel
           name={name}
           color={labelColor}
           optional={optional}
-          columnSpan={labelSpan}
-          desktopColumnSpan={desktopLabelSpan}
         // {...otherProps}
         >
           {label}
         </FormLabel>
       )}
-      <InputWrapper
-        id={id}
-        className={[
-          baseClassName,
-          componentClassName,
-          userClassName,
-        ]
-          .filter((e) => e)
-          .join(' ')}
-        style={style}
-        columnSpan={inputSpan}
-        desktopColumnSpan={desktopInputSpan}
-      >
-        <input
-          id={name}
-          className="input"
-          type="checkbox"
-          disabled={disabled}
-          {...field}
-        />
-        <FormDescription className="s-1" description={description} name={name} />
-      </InputWrapper>
-    </>
+      <input
+        id={name}
+        className="input"
+        type="checkbox"
+        disabled={disabled}
+        {...field}
+      />
+      <FormDescription className="s-1" description={description} name={name} />
+    </div>
   )
 }
 

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

@@ -5,10 +5,12 @@
 @use "@pareto-engineering/styles/src/globals" as *;
 
 .#{bem.$base}.checkbox {
-  &.#{bem.$base}.input-wrapper {
-    align-items: flex-start;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
+  align-items: flex-start;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+
+  > .#{bem.$base}.form-label {
+    margin-bottom: var(--gap);
   }
 }

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

@@ -11,7 +11,7 @@ import styleNames from '@pareto-engineering/bem/exports'
 
 import { Choice } from './common'
 
-import { FormDescription, FormLabel, InputWrapper } from '../../common'
+import { FormDescription, FormLabel } from '../../common'
 
 import './styles.scss'
 
@@ -37,56 +37,45 @@ const ChoicesInput = ({
   disabled,
   description,
   spaceBetween,
-  labelSpan,
-  desktopLabelSpan,
-  inputSpan,
-  desktopInputSpan,
   ...otherProps
 }) => (
-  <>
+  <div
+    id={id}
+    className={[
+      baseClassName,
+      componentClassName,
+      userClassName,
+    ]
+      .filter((e) => e)
+      .join(' ')}
+    style={style}
+  >
     {label && (
-      <FormLabel
-        name={name}
-        color={labelColor}
-        optional={optional}
-        columnSpan={labelSpan}
-        desktopColumnSpan={desktopLabelSpan}
-      // {...otherProps}
-      >
-        {label}
-      </FormLabel>
-    )}
-    <InputWrapper
-      id={id}
-      className={[
-        baseClassName,
-        componentClassName,
-        userClassName,
-      ]
-        .filter((e) => e)
-        .join(' ')}
-      style={style}
-      columnSpan={inputSpan}
-      desktopColumnSpan={desktopInputSpan}
+    <FormLabel
+      name={name}
+      color={labelColor}
+      optional={optional}
     >
-      <div className={['choices', spaceBetween && 'space-between'].filter(Boolean).join(' ')}>
-        { options.map((choice) => (
-          <Choice
-            className={`x-${color}`}
-            key={choice.value}
-            name={name}
-            id={`${name}-${choice.value}`}
-            multiple={multiple}
-            validate={validate}
-            disabled={disabled}
-            {...otherProps}
-            {...choice}
-          />
-        ))}
-      </div>
-      <FormDescription className="s-1" description={description} name={name} />
-    </InputWrapper>
-  </>
+      {label}
+    </FormLabel>
+    )}
+    <div className={['choices', spaceBetween && 'space-between'].filter(Boolean).join(' ')}>
+      { options.map((choice) => (
+        <Choice
+          className={`x-${color}`}
+          key={choice.value}
+          name={name}
+          id={`${name}-${choice.value}`}
+          multiple={multiple}
+          validate={validate}
+          disabled={disabled}
+          {...otherProps}
+          {...choice}
+        />
+      ))}
+    </div>
+    <FormDescription className="s-1" description={description} name={name} />
+  </div>
 )
 
 ChoicesInput.propTypes = {
@@ -122,31 +111,28 @@ ChoicesInput.propTypes = {
   /**
    * If the input should be multiple - checkbox
    */
-  multiple          :PropTypes.bool,
+  multiple         :PropTypes.bool,
   /**
    * how many columns should be displayed on the mobile grid
    */
-  gridColumnsMobile :PropTypes.number,
-  /**
-   * how many columns should be displayed on the desktop grid
-   */
-  gridColumnsDesktop:PropTypes.number,
+  gridColumnsMobile:PropTypes.number,
+
   /**
    * The choice color
    */
-  color             :PropTypes.string,
+  color       :PropTypes.string,
   /**
    * The selected choice color
    */
-  colorChecked      :PropTypes.string,
+  colorChecked:PropTypes.string,
   /**
    * The label of the choices input
    */
-  label             :PropTypes.string,
+  label       :PropTypes.string,
   /**
    * Whether all the Choices inputs should be disabled
    */
-  disabled          :PropTypes.bool,
+  disabled    :PropTypes.bool,
 
   /**
   * Whether the input is optional or not