@pareto-engineering/design-system 4.0.0-alpha.5 → 4.0.0-alpha.51

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

@@ -27,11 +27,16 @@ export default {
     ),
   ],
   argTypes:{
-    label       :{ control: 'text' },
-    description :{ control: 'text' },
-    defaultValue:{ control: 'boolean' },
-    disabled    :{ control: 'boolean' },
-    optional    :{ control: 'boolean' },
+    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' },
   },
 }
 
@@ -49,10 +54,10 @@ const Template = ({ defaultValue, ...args }) => {
     }, [defaultValue])
 
     return (
-      <>
+      <div className="grid">
         <Checkbox {...args} />
         <FormDebugger />
-      </>
+      </div>
     )
   }
 
@@ -93,3 +98,13 @@ 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,11 +22,15 @@ export default {
     ),
   ],
   argTypes:{
-    // backgroundColor:{ control: 'color' },
-    multiple          :{ control: 'boolean' },
-    gridColumnsDesktop:{ control: 'number' },
-    disabled          :{ control: 'boolean' },
-    optional          :{ control: 'boolean' },
+    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' },
   },
 }
 
@@ -78,10 +82,10 @@ const Template = ({ defaultValue, ...args }) => {
     }, [defaultValue])
 
     return (
-      <>
+      <div className="grid">
         <ChoicesInput {...args} />
         <FormDebugger />
-      </>
+      </div>
     )
   }
   return <Content />
@@ -138,3 +142,13 @@ 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

@@ -0,0 +1,88 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { Formik, Form } from 'formik'
+
+import { EditorInput, FormDebugger } from 'ui'
+
+export default {
+  title        :'f/fields/EditorInput',
+  component    :EditorInput,
+  subcomponents:{
+    // Item:TextareaInput.Item
+  },
+  decorators:[
+    (storyfn) => (
+      <Formik
+        initialValues={{ instructions: '' }}
+      >
+        <Form>
+          { storyfn() }
+        </Form>
+      </Formik>
+    ),
+  ],
+  argTypes:{
+    name              :{ control: 'text' },
+    label             :{ control: 'text' },
+    labelColor        :{ control: 'text' },
+    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">
+    <EditorInput {...args} />
+    <FormDebugger />
+  </div>
+)
+
+export const Base = Template.bind({})
+Base.args = {
+  name :'instructions',
+  label:'Project Instructions',
+}
+
+export const Optional = Template.bind({})
+Optional.args = {
+  ...Base.args,
+  optional:true,
+}
+
+// const validate = (value) => {
+//   let errorMessage = ''
+//   const isValid = value.length > 3
+
+//   if (!isValid) {
+//     errorMessage = 'Value should be greater than 3 characters'
+//   }
+//   return errorMessage
+// }
+
+// export const Validation = Template.bind({})
+// Validation.args = {
+//   ...Base.args,
+//   validate,
+// }
+
+export const Disabled = Template.bind({})
+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

@@ -0,0 +1,100 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+import { Formik, Form } from 'formik'
+
+import {
+  LinkInput,
+  FormDebugger,
+} from 'ui'
+
+export default {
+  title        :'f/fields/LinkInput',
+  component    :LinkInput,
+  subcomponents:{
+    // Item:TextInput.Item
+  },
+  decorators:[
+    (storyfn) => (
+      <Formik
+        initialValues={{ email: '', name: '', company: '' }}
+      >
+        <Form>
+
+          { storyfn() }
+        </Form>
+      </Formik>
+    ),
+  ],
+  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' },
+  },
+}
+
+// eslint-disable-next-line react/prop-types
+const Template = (args) => (
+  <div className="grid">
+    <LinkInput {...args} />
+    <FormDebugger />
+  </div>
+)
+
+export const Base = Template.bind({})
+Base.args = {
+  name :'link',
+  label:'Spreadsheet Link',
+}
+
+export const Optional = Template.bind({})
+Optional.args = {
+  ...Base.args,
+  optional:true,
+}
+
+const validate = (value) => {
+  let errorMessage = ''
+  const isValid = value.length > 3
+
+  if (!isValid) {
+    errorMessage = 'Value should be greater than 3 characters'
+  }
+  return errorMessage
+}
+
+export const WithValidation = Template.bind({})
+WithValidation.args = {
+  ...Base.args,
+  validate,
+}
+
+export const WithPlaceholder = Template.bind({})
+WithPlaceholder.args = {
+  ...Base.args,
+  placeholder:'Email address',
+}
+
+export const WithDisabled = Template.bind({})
+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,8 +28,15 @@ export default {
     ),
   ],
   argTypes:{
-    isLoading:{ control: 'boolean' },
-    optional :{ control: 'boolean' },
+    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' },
   },
 }
 
@@ -96,7 +103,7 @@ const Template = ({ isLoading, defaultFormikState, ...args }) => {
   }
 
   const Content = () => (
-    <>
+    <div className="grid">
       <QueryChoices
         name="status"
         label="Select Status"
@@ -111,7 +118,7 @@ const Template = ({ isLoading, defaultFormikState, ...args }) => {
         {...args}
       />
       <FormDebugger />
-    </>
+    </div>
   )
 
   const initialValues = defaultFormikState ?? { status: '' }
@@ -133,3 +140,12 @@ 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,10 +29,18 @@ export default {
     ),
   ],
   argTypes:{
-    // backgroundColor:{ control: 'color' },
-    multiple:{ control: 'boolean' },
-    disabled:{ control: 'boolean' },
-    optional:{ control: 'boolean' },
+    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' },
   },
 }
 
@@ -121,7 +129,7 @@ const ResolvedTemplate = ({ defaultFormikState, ...otherProps }) => {
     }
 
     return (
-      <>
+      <div className="grid">
         <QueryCombobox
           label="Search for a team"
           optionsKeyMap={{
@@ -136,13 +144,7 @@ const ResolvedTemplate = ({ defaultFormikState, ...otherProps }) => {
           searchVariable="name_Icontains"
           {...otherProps}
         />
-        <div
-          style={{
-            display      :'flex',
-            alignItems   :'flex-end',
-            flexDirection:'column',
-          }}
-        >
+        <div className="container">
           <FormDebugger />
           <Button
             onClick={updateFormikState}
@@ -150,7 +152,7 @@ const ResolvedTemplate = ({ defaultFormikState, ...otherProps }) => {
             {multiple ? 'Add formik values' : 'Replace formik value'}
           </Button>
         </div>
-      </>
+      </div>
     )
   }
 
@@ -217,6 +219,16 @@ 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,9 +28,15 @@ export default {
     ),
   ],
   argTypes:{
-    // backgroundColor:{ control: 'color' },
-    isLoading:{ control: 'boolean' },
-    optional :{ control: 'boolean' },
+    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' },
   },
 }
 const statuses = [
@@ -93,7 +99,7 @@ const Template = ({ isLoading, defaultFormikState, ...args }) => {
   }
 
   const Content = () => (
-    <>
+    <div className="grid">
       <QuerySelect
         name="status"
         label="Select Task Status"
@@ -108,7 +114,7 @@ const Template = ({ isLoading, defaultFormikState, ...args }) => {
         {...args}
       />
       <FormDebugger />
-    </>
+    </div>
   )
 
   const initialValues = defaultFormikState ?? { status: '' }
@@ -140,3 +146,12 @@ 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

@@ -27,19 +27,24 @@ export default {
     ratingCount        :{ control: 'number' },
     name               :{ control: 'text' },
     label              :{ control: 'text' },
+    labelColor         :{ control: 'text' },
     showRatingValue    :{ control: 'boolean' },
     displayRatingsLabel:{ control: 'boolean' },
     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">
     <RatingsInput {...args} />
     <FormDebugger />
-  </>
+  </div>
 )
 
 export const Base = Template.bind({})
@@ -68,3 +73,12 @@ 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,17 +22,23 @@ export default {
     ),
   ],
   argTypes:{
-    // backgroundColor:{ control: 'color' },
-    disabled:{ control: 'boolean' },
-    optional:{ control: 'boolean' },
+    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' },
   },
 }
 
 const Template = (args) => (
-  <>
+  <div className="grid">
     <SelectInput {...args} />
     <FormDebugger />
-  </>
+  </div>
 )
 
 export const Base = Template.bind({})
@@ -78,3 +84,19 @@ DisabledSelectInput.args = {
   ...Base.args,
   disabled:true,
 }
+
+export const DisabledWithDescriptionSelectInput = Template.bind({})
+DisabledWithDescriptionSelectInput.args = {
+  ...Base.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

@@ -16,7 +16,7 @@ export default {
   decorators:[
     (storyfn) => (
       <Formik
-        initialValues={{ firstName: '', date: '', time: '' }}
+        initialValues={{ email: '', name: '', company: '' }}
       >
         <Form>
 
@@ -27,19 +27,25 @@ 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' },
-    optional    :{ control: 'boolean' },
+    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' },
   },
 }
 
 // eslint-disable-next-line react/prop-types
 const Template = (args) => (
-  <div className=" u2 pb-u">
+  <div className="grid">
     <TextInput {...args} />
     <FormDebugger />
   </div>
@@ -47,8 +53,8 @@ const Template = (args) => (
 
 export const Base = Template.bind({})
 Base.args = {
-  name :'firstName',
-  label:"What's your first name ?",
+  name :'email',
+  label:'How can we reach you ?',
 }
 
 export const Optional = Template.bind({})
@@ -76,7 +82,7 @@ WithValidation.args = {
 export const WithPlaceholder = Template.bind({})
 WithPlaceholder.args = {
   ...Base.args,
-  placeholder:'First Name',
+  placeholder:'Email address',
 }
 
 export const WithAutoCompleteOff = Template.bind({})
@@ -104,3 +110,18 @@ Time.args = {
   name :'time',
   label:'Select time',
 }
+
+export const HasSymbol = Template.bind({})
+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

@@ -27,18 +27,23 @@ export default {
     // backgroundColor:{ control: 'color' },
     name              :{ control: 'text' },
     label             :{ control: 'text' },
+    labelColor        :{ control: 'text' },
     placeholder       :{ control: 'text' },
     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">
     <TextareaInput {...args} />
     <FormDebugger />
-  </>
+  </div>
 )
 
 export const Base = Template.bind({})
@@ -98,3 +103,12 @@ DisableResize.args = {
   ...Base.args,
   resize:'none',
 }
+
+export const OnSingleRow = Template.bind({})
+OnSingleRow.args = {
+  ...Base.args,
+  labelSpan       :4,
+  inputSpan       :4,
+  desktopLabelSpan:4,
+  desktopInputSpan:10,
+}