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

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/a/ContentTree/ContentTree.jsx

@@ -77,7 +77,7 @@ ContentTree.propTypes = {
    */
   target:PropTypes.oneOfType([
     PropTypes.func,
-    PropTypes.shape({ current: PropTypes.instanceOf(Element) }),
+    PropTypes.shape({ current: PropTypes.instanceOf(String) }),
   ]),
 }
 

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

@@ -13,6 +13,8 @@ import { FormLabel, FormDescription } from 'ui/f'
 
 import { Popover, LoadingCircle } from 'ui/a'
 
+import { Button } from 'ui/b'
+
 // Local Definitions
 
 import { Menu } from '../Menu'
@@ -40,12 +42,15 @@ const Combobox = ({
   isFetching,
   transformSearch,
   disabled,
+  optional,
   // ...otherProps
 }) => {
   const {
     isOpen,
     selectItem,
     selectedItem,
+    inputValue,
+    setInputValue,
     getLabelProps,
     getMenuProps,
     getInputProps,
@@ -56,8 +61,8 @@ const Combobox = ({
     items,
     initialSelectedItem:value,
     itemToString       :(item) => (item ? item.label : ''),
-    onInputValueChange :({ inputValue }) => {
-      const transformedInput = transformSearch(inputValue)
+    onInputValueChange :({ inputValue:searchInputValue }) => {
+      const transformedInput = transformSearch(searchInputValue)
       if (transformedInput.length > minLength) {
         getOptions(transformedInput)
       }
@@ -81,6 +86,8 @@ const Combobox = ({
 
   const parentRef = useRef(null)
 
+  const resetInputValue = () => setInputValue('')
+
   return (
     <div
       id={id}
@@ -97,7 +104,11 @@ const Combobox = ({
       style={style}
       ref={parentRef}
     >
-      <FormLabel {...getLabelProps()} name={name}>
+      <FormLabel
+        {...getLabelProps()}
+        name={name}
+        optional={optional}
+      >
         {label}
       </FormLabel>
 
@@ -106,6 +117,13 @@ const Combobox = ({
         {isFetching && (
         <LoadingCircle className="x-main2" />
         )}
+        {inputValue.length > minLength && !isFetching && (
+          <Button isSimple isCompact color="main2" onClick={resetInputValue}>
+            <span className="f-icons">
+              Y
+            </span>
+          </Button>
+        )}
       </div>
 
       <Popover
@@ -209,6 +227,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,
@@ -83,6 +84,8 @@ const MultipleCombobox = ({
     getComboboxProps,
     highlightedIndex,
     getItemProps,
+    inputValue,
+    setInputValue,
   } = useCombobox({
     searchInputValue,
     defaultHighlightedIndex:0, // after selection, highlight the first item.
@@ -144,6 +147,8 @@ const MultipleCombobox = ({
 
   const parentRef = useRef(null)
 
+  const resetInputValue = () => setInputValue('')
+
   return (
     <div
       id={id}
@@ -160,7 +165,11 @@ const MultipleCombobox = ({
       style={style}
     >
 
-      <FormLabel {...getLabelProps()} name={name}>
+      <FormLabel
+        {...getLabelProps()}
+        name={name}
+        optional={optional}
+      >
         {label}
       </FormLabel>
 
@@ -199,6 +208,18 @@ const MultipleCombobox = ({
         {isFetching && (
         <LoadingCircle className="x-main2" />
         )}
+        {inputValue.length > minLength && !isFetching && (
+          <Button
+            isSimple
+            isCompact
+            color="main2"
+            onClick={resetInputValue}
+          >
+            <span className="f-icons">
+              Y
+            </span>
+          </Button>
+        )}
       </div>
 
       <Popover
@@ -305,6 +326,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/QueryCombobox/styles.scss

@@ -38,7 +38,8 @@ $default-loading-circle-displacement: 1em;
     >.input-wrapper {
         position: relative;
 
-        >.#{bem.$base}.loading-circle {
+        >.#{bem.$base}.loading-circle,
+        >.#{bem.$base}.button {
             position: absolute;
             top: $default-loading-circle-displacement;
             right: $default-loading-circle-displacement;

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