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

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

@@ -5,11 +5,11 @@ import { memo } from 'react';
 import PropTypes from 'prop-types';
 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;
 const componentClassName = 'text-input';
 
@@ -31,10 +31,6 @@ const TextInput = ({
   placeholder,
   optional,
   autoComplete,
-  labelSpan,
-  desktopLabelSpan,
-  inputSpan,
-  desktopInputSpan,
   symbol,
   ...otherProps
 }) => {
@@ -45,34 +41,34 @@ const TextInput = ({
   const symbolStyle = symbol ? {
     '--symbol': symbol
   } : {};
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FormLabel, {
-    name: name,
-    color: labelColor,
-    optional: optional,
-    columnSpan: labelSpan,
-    desktopColumnSpan: desktopLabelSpan
-    // {...otherProps}
-  }, label), /*#__PURE__*/React.createElement(InputWrapper, {
+  const InputWrapper = symbol ? 'div' : React.Fragment;
+  const inputWrapperProps = symbol ? {
+    className: 'input-wrapper'
+  } : {};
+  return /*#__PURE__*/React.createElement("div", {
     id: id,
     className: [baseClassName, componentClassName, userClassName, `y-${color} ${symbol ? 'has-symbol' : ''}`].filter(e => e).join(' '),
     style: {
       ...symbolStyle,
       ...style
-    },
-    columnSpan: inputSpan,
-    desktopColumnSpan: desktopInputSpan
-  }, /*#__PURE__*/React.createElement("input", _extends({
+    }
+  }, /*#__PURE__*/React.createElement(FormLabel, {
+    name: name,
+    color: labelColor,
+    optional: optional
+    // {...otherProps}
+  }, label), /*#__PURE__*/React.createElement(InputWrapper, inputWrapperProps, /*#__PURE__*/React.createElement("input", _extends({
     id: name,
     className: "input",
     type: type,
     disabled: disabled,
     placeholder: placeholder,
     autoComplete: autoComplete
-  }, field, otherProps)), /*#__PURE__*/React.createElement(FormDescription, {
+  }, field, otherProps))), /*#__PURE__*/React.createElement(FormDescription, {
     className: "s-1",
     description: description,
     name: name
-  })));
+  }));
 };
 TextInput.propTypes = {
   /**
@@ -136,22 +132,6 @@ TextInput.propTypes = {
    * `https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete`
    */
   autoComplete: PropTypes.string,
-  /**
-   * The number of columns the label should span
-   */
-  labelSpan: PropTypes.number,
-  /**
-   * The number of columns the input should span
-   */
-  inputSpan: PropTypes.number,
-  /**
-   * The number of columns the label should span on desktop
-   */
-  desktopLabelSpan: PropTypes.number,
-  /**
-   * The number of columns the input should span on desktop
-   */
-  desktopInputSpan: PropTypes.number,
   /**
    * A symbol to be set inside the input field
    */

package/dist/es/f/fields/TextInput/styles.scss

@@ -19,12 +19,18 @@ $default-background: var(--background-inputs);
 $disabled-background: var(--background-inputs-30);
 
 .#{bem.$base}.text-input {
-  &.#{bem.$base}.input-wrapper {
-    display: flex;
-    flex-direction: column;
-    position: relative;
+  display: flex;
+  flex-direction: column;
+
+  > .#{bem.$base}.form-label {
+    margin-bottom: var(--gap);
+  }
+
+
+  &.has-symbol {
+    > .input-wrapper {
+      position: relative;
 
-    &.has-symbol {
       &::before {
         color: var(--y);
         content: var(--symbol);
@@ -33,39 +39,40 @@ $disabled-background: var(--background-inputs-30);
         top: 50%;
         transform: translate(-50%, -50%);
       }
+    }
 
-      input {
-        padding: $default-padding-with-symbol;
-      }
+    input {
+      padding: $default-padding-with-symbol;
     }
+  }
 
-    > input {
-      background-color: $default-background;
-      border: $default-border;
-      border-radius: $default-input-border-radius;
-      color: var(--y);
-      outline: none;
-      padding: $default-padding;
-      width: 100%;
+  .input {
+    background-color: $default-background;
+    border: $default-border;
+    border-radius: $default-input-border-radius;
+    color: var(--y);
+    outline: none;
+    padding: $default-padding;
+    width: 100%;
 
-      &::placeholder {
-        color: var(--metadata);
-      }
+    &::placeholder {
+      color: var(--metadata);
+    }
 
-      &:disabled {
-        background-color: $disabled-background;
-      }
+    &:disabled {
+      background-color: $disabled-background;
+    }
 
-      &:not(:disabled) {
-        &:hover,
-        &:active {
-          border: $hover-border;
-        }
+    &:not(:disabled) {
+      &:hover,
+      &:active {
+        border: $hover-border;
+      }
 
-        &:focus {
-          border: $focus-border;
-        }
+      &:focus {
+        border: $focus-border;
       }
     }
   }
 }
+

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

@@ -8,8 +8,8 @@ import { useField } from 'formik';
 
 // Local Definitions
 
-import { FormLabel, FormDescription, InputWrapper } from "../../common";
 import "./styles.scss";
+import { FormLabel, FormDescription } from "../../common";
 const baseClassName = styleNames.base;
 const componentClassName = 'text-area-input';
 
@@ -31,31 +31,23 @@ const TextareaInput = ({
   disabled,
   placeholder,
   autoComplete,
-  resize,
-  labelSpan,
-  desktopLabelSpan,
-  inputSpan,
-  desktopInputSpan
+  resize
   // ...otherProps
 }) => {
   const [field] = useField({
     name,
     validate
   });
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FormLabel, {
+  return /*#__PURE__*/React.createElement("div", {
+    id: id,
+    className: [baseClassName, componentClassName, userClassName, `y-${color}`].filter(e => e).join(' '),
+    style: style
+  }, /*#__PURE__*/React.createElement(FormLabel, {
     name: name,
     color: labelColor,
-    optional: optional,
-    columnSpan: labelSpan,
-    desktopColumnSpan: desktopLabelSpan
+    optional: optional
     // {...otherProps}
-  }, label), /*#__PURE__*/React.createElement(InputWrapper, {
-    id: id,
-    className: [baseClassName, componentClassName, userClassName, `y-${color}`].filter(e => e).join(' '),
-    style: style,
-    columnSpan: inputSpan,
-    desktopColumnSpan: desktopInputSpan
-  }, /*#__PURE__*/React.createElement("textarea", _extends({
+  }, label), /*#__PURE__*/React.createElement("textarea", _extends({
     id: name,
     className: "textarea"
   }, field, {
@@ -70,7 +62,7 @@ const TextareaInput = ({
     className: "s-1",
     description: description,
     name: name
-  })));
+  }));
 };
 TextareaInput.propTypes = {
   /**
@@ -141,23 +133,7 @@ TextareaInput.propTypes = {
   /**
   * Whether the input is optional or not
   */
-  optional: PropTypes.bool,
-  /**
-  * The number of columns the label should span
-  */
-  labelSpan: PropTypes.number,
-  /**
-   * The number of columns the input should span
-   */
-  inputSpan: PropTypes.number,
-  /**
-   * The number of columns the label should span on desktop
-   */
-  desktopLabelSpan: PropTypes.number,
-  /**
-   * The number of columns the input should span on desktop
-   */
-  desktopInputSpan: PropTypes.number
+  optional: PropTypes.bool
 };
 TextareaInput.defaultProps = {
   rows: 10,

package/dist/es/f/fields/TextareaInput/styles.scss

@@ -14,36 +14,39 @@ $default-background: var(--background-inputs);
 $disabled-background: var(--background-inputs-30);
 
 .#{bem.$base}.text-area-input {
-  &.#{bem.$base}.input-wrapper {
-    display: flex;
-    flex-direction: column;
-
-    > .textarea {
-      background: $default-background;
-      border: $default-border;
-      border-radius: $default-input-border-radius;
-      color: var(--y);
-      outline: none;
-      padding: $default-padding;
-      width: 100%;
-
-      &::placeholder {
-        color: var(--metadata);
-      }
+  display: flex;
+  flex-direction: column;
 
-      &:disabled {
-        background-color: $disabled-background;
-      }
+  > .#{bem.$base}.form-label {
+    margin-bottom: var(--gap);
+  }
+
+
+  > .textarea {
+    background: $default-background;
+    border: $default-border;
+    border-radius: $default-input-border-radius;
+    color: var(--y);
+    outline: none;
+    padding: $default-padding;
+    width: 100%;
 
-      &:not(:disabled) {
-        &:hover,
-        &:active {
-          border: $hover-border;
-        }
+    &::placeholder {
+      color: var(--metadata);
+    }
+
+    &:disabled {
+      background-color: $disabled-background;
+    }
+
+    &:not(:disabled) {
+      &:hover,
+      &:active {
+        border: $hover-border;
+      }
 
-        &:focus {
-          border: $focus-border;
-        }
+      &:focus {
+        border: $focus-border;
       }
     }
   }

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

@@ -8,5 +8,4 @@ export { QuerySelect } from "./QuerySelect";
 export { Checkbox } from "./Checkbox";
 export { QueryChoices } from "./QueryChoices";
 export { LinkInput } from "./LinkInput";
-export { EditorInput } from "./EditorInput";
-export * from "./V2";
+export { EditorInput } from "./EditorInput";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pareto-engineering/design-system",
-  "version": "4.0.0-alpha.63",
+  "version": "4.0.0-alpha.65",
   "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.63",
+    "@pareto-engineering/assets": "^4.0.0-alpha.65",
     "@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": "d150baeb18c0f279e529ba46a7248fdb16180853"
+  "gitHead": "daa9532989bb08c3a7adfa33d2356499c27333e2"
 }

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 = () => {