@pareto-engineering/design-system 2.0.0-alpha.64 → 2.0.0-alpha.65

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

@@ -90,6 +90,6 @@ Disabled.args = {
 
 export const Optional = Template.bind({})
 Optional.args = {
-  ...Base.args,
+  ...WithLabel.args,
   optional:true,
 }

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

@@ -26,6 +26,7 @@ export default {
     multiple          :{ control: 'boolean' },
     gridColumnsDesktop:{ control: 'number' },
     disabled          :{ control: 'boolean' },
+    optional          :{ control: 'boolean' },
   },
 }
 
@@ -125,6 +126,13 @@ ChoicesWithLabel.args = {
   label:'Select color',
 }
 
+export const Optional = Template.bind({})
+Optional.args = {
+  ...Base.args,
+  label   :'Select color',
+  optional:true,
+}
+
 export const DisabledChoicesInput = Template.bind({})
 DisabledChoicesInput.args = {
   ...ChoicesWithLabel.args,

package/src/stories/f/Label.stories.jsx

@@ -17,6 +17,11 @@ export default {
   },
 }
 
-export const Base = () => (
-  <Label>Sample Label</Label>
-)
+const Template = (args) => <Label {...args}>Sample Label</Label>
+
+export const Base = Template.bind()
+
+export const Optional = Template.bind({})
+Optional.args = {
+  optional:true,
+}

package/src/stories/f/QueryCombobox.stories.jsx

@@ -32,6 +32,7 @@ export default {
     // backgroundColor:{ control: 'color' },
     multiple:{ control: 'boolean' },
     disabled:{ control: 'boolean' },
+    optional:{ control: 'boolean' },
   },
 }
 
@@ -172,6 +173,11 @@ const ResolvedTemplate = ({ defaultFormikState, ...otherProps }) => {
   )
 }
 
+export const Optional = ResolvedTemplate.bind({})
+Optional.args = {
+  optional:true,
+}
+
 export const SingleSelect = ResolvedTemplate.bind({})
 SingleSelect.args = {
   multiple:false,

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

@@ -30,6 +30,7 @@ export default {
   argTypes:{
     // backgroundColor:{ control: 'color' },
     isLoading:{ control: 'boolean' },
+    optional :{ control: 'boolean' },
   },
 }
 const statuses = [
@@ -76,7 +77,7 @@ const FETCH_ALL_TASK_STATUSES = graphql`
 `
 
 // eslint-disable-next-line react/prop-types
-const Template = ({ isLoading, defaultFormikState }) => {
+const Template = ({ isLoading, defaultFormikState, ...args }) => {
   if (isLoading) {
     setTimeout(() => {
       mockRelayOperation(allTaskStatusesMockData)
@@ -104,6 +105,7 @@ const Template = ({ isLoading, defaultFormikState }) => {
           value   :'id',
           getLabel:(node) => node.status,
         }}
+        {...args}
       />
       <FormDebugger />
     </>
@@ -133,3 +135,8 @@ export const LoadingOptions = Template.bind({})
 LoadingOptions.args = {
   isLoading:true,
 }
+
+export const Optional = Template.bind({})
+Optional.args = {
+  optional:true,
+}

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

@@ -31,6 +31,7 @@ export default {
     displayRatingsLabel:{ control: 'boolean' },
     labelMax           :{ control: 'text' },
     labelMin           :{ control: 'text' },
+    optional           :{ control: 'boolean' },
   },
 }
 
@@ -48,6 +49,12 @@ Base.args = {
   label      :'Your Rating',
 }
 
+export const Optional = Template.bind({})
+Optional.args = {
+  ...Base.args,
+  optional:true,
+}
+
 export const Numbers = Template.bind({})
 Numbers.args = {
   ...Base.args,

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

@@ -24,6 +24,7 @@ export default {
   argTypes:{
     // backgroundColor:{ control: 'color' },
     disabled:{ control: 'boolean' },
+    optional:{ control: 'boolean' },
   },
 }
 
@@ -46,6 +47,12 @@ Base.args = {
   ],
 }
 
+export const Optional = Template.bind({})
+Optional.args = {
+  ...Base.args,
+  optional:true,
+}
+
 export const StringAndObjects = Template.bind({})
 StringAndObjects.args = {
   ...Base.args,

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

@@ -33,6 +33,7 @@ export default {
     type        :{ control: 'text' },
     name        :{ control: 'text' },
     label       :{ control: 'text' },
+    optional    :{ control: 'boolean' },
   },
 }
 
@@ -50,6 +51,12 @@ Base.args = {
   label:"What's your first name ?",
 }
 
+export const Optional = Template.bind({})
+Optional.args = {
+  ...Base.args,
+  optional:true,
+}
+
 const validate = (value) => {
   let errorMessage = ''
   const isValid = value.length > 3

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

@@ -30,6 +30,7 @@ export default {
     placeholder       :{ control: 'text' },
     disabled          :{ control: 'boolean' },
     labelAsDescription:{ control: 'boolean' },
+    optional          :{ control: 'boolean' },
   },
 }
 
@@ -46,6 +47,12 @@ Base.args = {
   label:'What can we improve on?',
 }
 
+export const Optional = Template.bind({})
+Optional.args = {
+  ...Base.args,
+  optional:true,
+}
+
 export const Placeholder = Template.bind({})
 Placeholder.args = {
   ...Base.args,

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

@@ -23,6 +23,7 @@ const Label = ({
   children,
   name,
   color,
+  optional,
   as:Wrapper,
   // ...otherProps
 }) => {
@@ -46,6 +47,7 @@ const Label = ({
       // {...otherProps}
     >
       {children}
+      {optional && '(Optional)'}
     </Wrapper>
   )
 }
@@ -85,12 +87,16 @@ Label.propTypes = {
    */
   color:PropTypes.string,
 
+  /**
+   * Whether the input should have an optional tag
+   */
+  optional:PropTypes.bool,
 }
 
 Label.defaultProps = {
-  // someProp:false
-  as   :'label',
-  color:'main2',
+  as      :'label',
+  color   :'main2',
+  optional:false,
 }
 
 export default Label

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

@@ -33,6 +33,7 @@ const ChoicesInput = ({
   color,
   colorChecked,
   label,
+  optional,
   disabled,
   // ...otherProps
 }) => {
@@ -63,7 +64,7 @@ const ChoicesInput = ({
       // {...otherProps}
     >
       {label && (
-      <FormLabel as="p">
+      <FormLabel as="p" optional={optional}>
         {label}
       </FormLabel>
       )}
@@ -142,6 +143,11 @@ ChoicesInput.propTypes = {
    * Whether all the Choices inputs should be disabled
    */
   disabled          :PropTypes.bool,
+
+  /**
+  * Whether the input is optional or not
+  */
+  optional:PropTypes.bool,
 }
 
 ChoicesInput.defaultProps = {

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

@@ -25,6 +25,7 @@ const QueryCombobox = ({
   name,
   label,
   color,
+  optional,
   description,
   disabled,
   debounceMs,
@@ -100,6 +101,7 @@ const QueryCombobox = ({
     disabled,
     name,
     label,
+    optional,
     description,
     setValue,
     value,
@@ -215,6 +217,11 @@ QueryCombobox.propTypes = {
    * The query combobox field validator function
    */
   validate:PropTypes.func,
+
+  /*
+  * Whether the input is optional or not
+  */
+  optional:PropTypes.bool,
 }
 
 QueryCombobox.defaultProps = {

package/src/ui/f/fields/QueryCombobox/common/Combobox/Combobox.jsx

@@ -40,6 +40,7 @@ const Combobox = ({
   isFetching,
   transformSearch,
   disabled,
+  optional,
   // ...otherProps
 }) => {
   const {
@@ -97,7 +98,11 @@ const Combobox = ({
       style={style}
       ref={parentRef}
     >
-      <FormLabel {...getLabelProps()} name={name}>
+      <FormLabel
+        {...getLabelProps()}
+        name={name}
+        optional={optional}
+      >
         {label}
       </FormLabel>
 
@@ -209,6 +214,11 @@ Combobox.propTypes = {
    * Whether the input filed shpuld be disabled
    */
   disabled:PropTypes.bool,
+
+  /**
+  * Whether the input is optional or not
+  */
+  optional:PropTypes.bool,
 }
 
 Combobox.defaultProps = {

package/src/ui/f/fields/QueryCombobox/common/MultipleCombobox/MultipleCombobox.jsx

@@ -43,6 +43,7 @@ const MultipleCombobox = ({
   style,
   label,
   name,
+  optional,
   options:items,
   getOptions,
   setValue,
@@ -160,7 +161,11 @@ const MultipleCombobox = ({
       style={style}
     >
 
-      <FormLabel {...getLabelProps()} name={name}>
+      <FormLabel
+        {...getLabelProps()}
+        name={name}
+        optional={optional}
+      >
         {label}
       </FormLabel>
 
@@ -305,6 +310,11 @@ MultipleCombobox.propTypes = {
    * Whether the input filed shpuld be disabled
    */
   disabled:PropTypes.bool,
+
+  /**
+  * Whether the input is optional or not
+  */
+  optional:PropTypes.bool,
 }
 
 MultipleCombobox.defaultProps = {

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

@@ -22,6 +22,7 @@ const QuerySelect = ({
   style,
   name,
   label,
+  optional,
   query,
   variables,
   optionsKeyMap,
@@ -88,6 +89,7 @@ const QuerySelect = ({
       style={style}
       name={name}
       label={label}
+      optional={optional}
       color={color}
       description={description}
       disabled={isFetching || disabled}
@@ -186,6 +188,11 @@ QuerySelect.propTypes = {
    * The query select field validator function
    */
   validate:PropTypes.func,
+
+  /*
+  * Whether the input is optional or not
+  */
+  optional:PropTypes.bool,
 }
 
 QuerySelect.defaultProps = {

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

@@ -31,6 +31,7 @@ const SelectInput = ({
   color,
   options,
   validate,
+  optional,
   description,
   disabled,
   isLoading,
@@ -59,7 +60,7 @@ const SelectInput = ({
       style={style}
       // {...otherProps}
     >
-      <FormLabel name={name}>{label}</FormLabel>
+      <FormLabel name={name} optional={optional}>{label}</FormLabel>
       <div className="select-wrapper">
         <select
           className="input"
@@ -162,6 +163,11 @@ SelectInput.propTypes = {
    * The autoComplete value that the browser should watch for the input
    */
   autoComplete:PropTypes.string,
+
+  /**
+  * Whether the input is optional or not
+  */
+  optional:PropTypes.bool,
 }
 
 SelectInput.defaultProps = {

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

@@ -30,6 +30,7 @@ const TextareaInput = ({
   labelAsDescription,
   textAreaId,
   rows,
+  optional,
   textAreaColor,
   labelColor,
   description,
@@ -67,6 +68,7 @@ const TextareaInput = ({
           .join(' ')}
         name={name}
         color={labelColor}
+        optional={optional}
       >
         { label }
       </FormLabel>
@@ -168,6 +170,11 @@ TextareaInput.propTypes = {
    * Textarea docs - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea
    */
   resize:PropTypes.string,
+
+  /**
+  * Whether the input is optional or not
+  */
+  optional:PropTypes.bool,
 }
 
 TextareaInput.defaultProps = {