@pareto-engineering/design-system 4.0.0-alpha.62 → 4.0.0-alpha.64

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pareto-engineering/design-system",
-  "version": "4.0.0-alpha.62",
+  "version": "4.0.0-alpha.64",
   "description": "",
   "main": "dist/cjs/index.js",
   "module": "dist/es/index.js",
@@ -51,7 +51,7 @@
   },
   "dependencies": {
     "@lexical/react": "^0.11.3",
-    "@pareto-engineering/assets": "^4.0.0-alpha.61",
+    "@pareto-engineering/assets": "^4.0.0-alpha.63",
     "@pareto-engineering/bem": "^4.0.0-alpha.20",
     "@pareto-engineering/styles": "^4.0.0-alpha.57",
     "@pareto-engineering/utils": "^4.0.0-alpha.46",
@@ -71,5 +71,5 @@
     "relay-test-utils": "^15.0.0"
   },
   "browserslist": "> 2%",
-  "gitHead": "a400b51ffb829abc0b0ee1bc447c69e7b0723a41"
+  "gitHead": "2664d428449c22570d89c6c4f9e6d65e3c1d51c1"
 }

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

@@ -27,16 +27,12 @@ export default {
     ),
   ],
   argTypes:{
-    label           :{ control: 'text' },
-    labelColor      :{ control: 'text' },
-    description     :{ control: 'text' },
-    defaultValue    :{ control: 'boolean' },
-    disabled        :{ control: 'boolean' },
-    optional        :{ control: 'boolean' },
-    labelSpan       :{ control: 'number' },
-    inputSpan       :{ control: 'number' },
-    desktopLabelSpan:{ control: 'number' },
-    desktopInputSpan:{ control: 'number' },
+    label       :{ control: 'text' },
+    labelColor  :{ control: 'text' },
+    description :{ control: 'text' },
+    defaultValue:{ control: 'boolean' },
+    disabled    :{ control: 'boolean' },
+    optional    :{ control: 'boolean' },
   },
 }
 
@@ -54,7 +50,13 @@ const Template = ({ defaultValue, ...args }) => {
     }, [defaultValue])
 
     return (
-      <div className="grid">
+      <div
+        style={{
+          display      :'flex',
+          flexDirection:'column',
+          gap          :'1rem',
+        }}
+      >
         <Checkbox {...args} />
         <FormDebugger />
       </div>
@@ -98,13 +100,3 @@ Optional.args = {
   ...WithLabel.args,
   optional:true,
 }
-
-export const OnSingleRow = Template.bind({})
-OnSingleRow.args = {
-  ...Base.args,
-  label           :'Urgent',
-  labelSpan       :4,
-  inputSpan       :4,
-  desktopLabelSpan:4,
-  desktopInputSpan:10,
-}

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

@@ -22,15 +22,11 @@ export default {
     ),
   ],
   argTypes:{
-    color           :{ control: 'color' },
-    labelColor      :{ control: 'color' },
-    multiple        :{ control: 'boolean' },
-    disabled        :{ control: 'boolean' },
-    optional        :{ control: 'boolean' },
-    labelSpan       :{ control: 'number' },
-    inputSpan       :{ control: 'number' },
-    desktopLabelSpan:{ control: 'number' },
-    desktopInputSpan:{ control: 'number' },
+    color     :{ control: 'color' },
+    labelColor:{ control: 'color' },
+    multiple  :{ control: 'boolean' },
+    disabled  :{ control: 'boolean' },
+    optional  :{ control: 'boolean' },
   },
 }
 
@@ -82,7 +78,13 @@ const Template = ({ defaultValue, ...args }) => {
     }, [defaultValue])
 
     return (
-      <div className="grid">
+      <div
+        style={{
+          display      :'flex',
+          flexDirection:'column',
+          gap          :'1rem',
+        }}
+      >
         <ChoicesInput {...args} />
         <FormDebugger />
       </div>
@@ -117,13 +119,6 @@ MultipleWithDefaultFormikValue.args = {
   defaultValue:['brown', 'violet'],
 }
 
-export const MultipleWithGrid = Template.bind({})
-MultipleWithGrid.args = {
-  ...Base.args,
-  multiple          :true,
-  gridColumnsDesktop:2,
-}
-
 export const ChoicesWithLabel = Template.bind({})
 ChoicesWithLabel.args = {
   ...Base.args,
@@ -142,13 +137,3 @@ DisabledChoicesInput.args = {
   ...ChoicesWithLabel.args,
   disabled:true,
 }
-
-export const OnSingleRow = Template.bind({})
-OnSingleRow.args = {
-  ...Base.args,
-  label           :'Select color',
-  labelSpan       :4,
-  inputSpan       :4,
-  desktopLabelSpan:4,
-  desktopInputSpan:10,
-}

package/src/stories/f/EditorInput.stories.jsx

@@ -29,16 +29,18 @@ export default {
     disabled          :{ control: 'boolean' },
     labelAsDescription:{ control: 'boolean' },
     optional          :{ control: 'boolean' },
-    labelSpan         :{ control: 'number' },
-    inputSpan         :{ control: 'number' },
-    desktopLabelSpan  :{ control: 'number' },
-    desktopInputSpan  :{ control: 'number' },
     showDebugger      :{ control: 'boolean' },
   },
 }
 
 const Template = (args) => (
-  <div className="grid">
+  <div
+    style={{
+      display      :'flex',
+      flexDirection:'column',
+      gap          :'1rem',
+    }}
+  >
     <EditorInput {...args} />
     <FormDebugger />
   </div>
@@ -77,12 +79,3 @@ Disabled.args = {
   ...Base.args,
   disabled:true,
 }
-
-export const OnSingleRow = Template.bind({})
-OnSingleRow.args = {
-  ...Base.args,
-  labelSpan       :4,
-  inputSpan       :4,
-  desktopLabelSpan:4,
-  desktopInputSpan:10,
-}

package/src/stories/f/LinkInput.stories.jsx

@@ -27,24 +27,26 @@ export default {
   ],
   argTypes:{
     // backgroundColor:{ control: 'color' },
-    placeholder     :{ control: 'text' },
-    autoComplete    :{ control: 'select', options: ['off', 'on'] },
-    disabled        :{ control: 'boolean' },
-    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' },
+    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',
+    }}
+  >
     <LinkInput {...args} />
     <FormDebugger />
   </div>
@@ -89,12 +91,3 @@ WithDisabled.args = {
   ...Base.args,
   disabled:true,
 }
-
-export const OnSingleRow = Template.bind({})
-OnSingleRow.args = {
-  ...Base.args,
-  labelSpan       :4,
-  inputSpan       :4,
-  desktopLabelSpan:4,
-  desktopInputSpan:10,
-}

package/src/stories/f/QueryChoices.stories.jsx

@@ -28,15 +28,11 @@ export default {
     ),
   ],
   argTypes:{
-    color           :{ control: 'color' },
-    labelColor      :{ control: 'color' },
-    multiple        :{ control: 'boolean' },
-    isLoading       :{ control: 'boolean' },
-    optional        :{ control: 'boolean' },
-    labelSpan       :{ control: 'number' },
-    inputSpan       :{ control: 'number' },
-    desktopLabelSpan:{ control: 'number' },
-    desktopInputSpan:{ control: 'number' },
+    color     :{ control: 'color' },
+    labelColor:{ control: 'color' },
+    multiple  :{ control: 'boolean' },
+    isLoading :{ control: 'boolean' },
+    optional  :{ control: 'boolean' },
   },
 }
 
@@ -103,7 +99,13 @@ const Template = ({ isLoading, defaultFormikState, ...args }) => {
   }
 
   const Content = () => (
-    <div className="grid">
+    <div
+      style={{
+        display      :'flex',
+        flexDirection:'column',
+        gap          :'1rem',
+      }}
+    >
       <QueryChoices
         name="status"
         label="Select Status"
@@ -140,12 +142,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/QueryCombobox.stories.jsx

@@ -29,18 +29,14 @@ export default {
     ),
   ],
   argTypes:{
-    disabled        :{ control: 'boolean' },
-    type            :{ control: 'text' },
-    name            :{ control: 'text' },
-    color           :{ control: 'text' },
-    label           :{ control: 'text' },
-    labelColor      :{ control: 'text' },
-    multiple        :{ control: 'boolean' },
-    optional        :{ control: 'boolean' },
-    labelSpan       :{ control: 'number' },
-    inputSpan       :{ control: 'number' },
-    desktopLabelSpan:{ control: 'number' },
-    desktopInputSpan:{ control: 'number' },
+    disabled  :{ control: 'boolean' },
+    type      :{ control: 'text' },
+    name      :{ control: 'text' },
+    color     :{ control: 'text' },
+    label     :{ control: 'text' },
+    labelColor:{ control: 'text' },
+    multiple  :{ control: 'boolean' },
+    optional  :{ control: 'boolean' },
   },
 }
 
@@ -129,7 +125,13 @@ const ResolvedTemplate = ({ defaultFormikState, ...otherProps }) => {
     }
 
     return (
-      <div className="grid">
+      <div
+        style={{
+          display      :'flex',
+          flexDirection:'column',
+          gap          :'1rem',
+        }}
+      >
         <QueryCombobox
           label="Search for a team"
           optionsKeyMap={{
@@ -144,7 +146,7 @@ const ResolvedTemplate = ({ defaultFormikState, ...otherProps }) => {
           searchVariable="name_Icontains"
           {...otherProps}
         />
-        <div className="container">
+        <div>
           <FormDebugger />
           <Button
             onClick={updateFormikState}
@@ -237,16 +239,6 @@ MultipleSelectWithDefaultFormikState.args = {
   },
 }
 
-export const OnSingleRow = ResolvedTemplate.bind({})
-OnSingleRow.args = {
-  multiple          :true,
-  defaultFormikState:{ teams: [] },
-  labelSpan         :4,
-  inputSpan         :4,
-  desktopLabelSpan  :4,
-  desktopInputSpan  :10,
-}
-
 // eslint-disable-next-line react/prop-types
 // const RejectedTemplate = ({ multiple }) => {
 //   const Content = () => {

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/common/Description/Description.jsx

@@ -1,14 +1,14 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react'
 
+import { useInsertionEffect } from 'react'
+
 import { useField } from 'formik'
 
 import PropTypes from 'prop-types'
 
 import styleNames from '@pareto-engineering/bem/exports'
 
-import './styles.scss'
-
 // Local Definitions
 
 const baseClassName = styleNames.base
@@ -27,6 +27,10 @@ const Description = ({
   color,
   // ...otherProps
 }) => {
+  useInsertionEffect(() => {
+    import('./styles.scss')
+  }, [])
+
   const [, meta] = useField(name)
   const hasError = meta.touched && meta.error
 

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

@@ -1,12 +1,12 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react'
 
+import { useInsertionEffect } from 'react'
+
 import PropTypes from 'prop-types'
 
 import styleNames from '@pareto-engineering/bem/exports'
 
-import './styles.scss'
-
 // Local Definitions
 
 const baseClassName = styleNames.base
@@ -25,32 +25,32 @@ const Label = ({
   color,
   optional,
   as:Wrapper,
-  columnSpan,
-  desktopColumnSpan,
   // ...otherProps
-}) => (
-  <Wrapper
-    htmlFor={Wrapper === 'label' ? name : undefined}
-    id={id}
-    className={[
-      baseClassName,
-      componentClassName,
-      userClassName,
-      `x-${color}`,
-    ]
-      .filter((e) => e)
-      .join(' ')}
-    style={{
-      ...style,
-      '--column-span'   :columnSpan || 'var(--columns)',
-      '--column-span-md':desktopColumnSpan || 'var(--columns)',
-    }}
-    // {...otherProps}
-  >
-    {children}
-    {optional && ' (Optional)'}
-  </Wrapper>
-)
+}) => {
+  useInsertionEffect(() => {
+    import('./styles.scss')
+  }, [])
+
+  return (
+    <Wrapper
+      htmlFor={Wrapper === 'label' ? name : undefined}
+      id={id}
+      className={[
+        baseClassName,
+        componentClassName,
+        userClassName,
+        `x-${color}`,
+      ]
+        .filter((e) => e)
+        .join(' ')}
+      style={style}
+      // {...otherProps}
+    >
+      {children}
+      {optional && ' (Optional)'}
+    </Wrapper>
+  )
+}
 
 Label.propTypes = {
   /**
@@ -91,16 +91,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 = {