@pareto-engineering/design-system 2.0.0-alpha.45 → 2.0.0-alpha.48

package/src/__snapshots__/Storyshots.test.js.snap

@@ -10637,6 +10637,161 @@ exports[`Storyshots f/FormInput Extensible Form Input 1`] = `
 </form>
 `;
 
+exports[`Storyshots f/FormInput With Query Combobox 1`] = `
+<form
+  action="#"
+  onReset={[Function]}
+  onSubmit={[Function]}
+>
+  <div
+    className="base text-input form-input y-background2"
+  >
+    <label
+      className="base label v50 mb-v x-main2"
+      htmlFor="firstName"
+    >
+      What's your first name ?
+    </label>
+    <input
+      className="input"
+      disabled={false}
+      id="firstName"
+      name="firstName"
+      onBlur={[Function]}
+      onChange={[Function]}
+      type="text"
+      value="Test"
+    />
+  </div>
+  <div
+    className="base choices-input form-input x-background2 y-main2"
+    style={
+      Object {
+        "--grid-columns-desktop": 3,
+        "--grid-columns-mobile": 2,
+      }
+    }
+  >
+    <p
+      className="base label x-main2"
+    >
+      What are your favourite colors ?
+    </p>
+    <div
+      className="choices"
+    >
+      <div
+        className="base choice"
+      >
+        <input
+          disabled={false}
+          id="undefined-red"
+          name="colors"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="radio"
+          value="red"
+        />
+        <label
+          htmlFor="undefined-red"
+        >
+          Color Red
+        </label>
+      </div>
+      <div
+        className="base choice"
+      >
+        <input
+          disabled={false}
+          id="undefined-blue"
+          name="colors"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="radio"
+          value="blue"
+        />
+        <label
+          htmlFor="undefined-blue"
+        >
+          Color Blue
+        </label>
+      </div>
+      <div
+        className="base choice"
+      >
+        <input
+          disabled={false}
+          id="undefined-green"
+          name="colors"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="radio"
+          value="green"
+        />
+        <label
+          htmlFor="undefined-green"
+        >
+          Color Green
+        </label>
+      </div>
+    </div>
+  </div>
+  <div
+    className="base combobox form-input y-background2"
+  >
+    <label
+      className="base label x-main2"
+      htmlFor="team"
+      id="downshift-0-label"
+    >
+      Search for a team
+    </label>
+    <div
+      aria-expanded={false}
+      aria-haspopup="listbox"
+      aria-owns="downshift-0-menu"
+      className="input-wrapper"
+      role="combobox"
+    >
+      <input
+        aria-autocomplete="list"
+        aria-controls="downshift-0-menu"
+        aria-labelledby="downshift-0-label"
+        autoComplete="off"
+        className="input"
+        id="downshift-0-input"
+        onBlur={[Function]}
+        onChange={[Function]}
+        onKeyDown={[Function]}
+        value=""
+      />
+    </div>
+    <div
+      className="base popover x-background1 bottom left"
+    >
+      <ul
+        aria-labelledby="downshift-0-label"
+        className="base menu"
+        id="downshift-0-menu"
+        onMouseLeave={[Function]}
+        role="listbox"
+      />
+    </div>
+  </div>
+  <div
+    className="debugger"
+  >
+    <button
+      className="base button x-main2"
+      onClick={[Function]}
+      type="button"
+    >
+      Open FormDebugger
+    </button>
+  </div>
+</form>
+`;
+
 exports[`Storyshots f/common/Description Base 1`] = `
 <div
   className="base description x-metadata"
@@ -11198,38 +11353,39 @@ exports[`Storyshots f/fields/ChoicesInput Multiple With Grid 1`] = `
 </form>
 `;
 
-exports[`Storyshots f/fields/QueryCombobox Single Select 1`] = `
+exports[`Storyshots f/fields/QueryCombobox Multiple Select 1`] = `
 <form
   action="#"
   onReset={[Function]}
   onSubmit={[Function]}
 >
   <div
-    className="base combobox y-background2"
+    className="base multiple-combobox y-background2"
   >
     <label
       className="base label x-main2"
-      htmlFor="team"
-      id="downshift-0-label"
+      htmlFor="teams"
+      id="downshift-3-label"
     >
       Search for a team
     </label>
     <div
       aria-expanded={false}
       aria-haspopup="listbox"
-      aria-owns="downshift-0-menu"
+      aria-owns="downshift-3-menu"
       className="input-wrapper"
       role="combobox"
     >
       <input
         aria-autocomplete="list"
-        aria-controls="downshift-0-menu"
-        aria-labelledby="downshift-0-label"
+        aria-controls="downshift-3-menu"
+        aria-labelledby="downshift-3-label"
         autoComplete="off"
         className="input"
-        id="downshift-0-input"
+        id="downshift-3-input"
         onBlur={[Function]}
         onChange={[Function]}
+        onClick={[Function]}
         onKeyDown={[Function]}
         value=""
       />
@@ -11238,9 +11394,9 @@ exports[`Storyshots f/fields/QueryCombobox Single Select 1`] = `
       className="base popover x-background1 bottom left"
     >
       <ul
-        aria-labelledby="downshift-0-label"
+        aria-labelledby="downshift-3-label"
         className="base menu"
-        id="downshift-0-menu"
+        id="downshift-3-menu"
         onMouseLeave={[Function]}
         role="listbox"
       />
@@ -11271,13 +11427,143 @@ exports[`Storyshots f/fields/QueryCombobox Single Select 1`] = `
       onClick={[Function]}
       type="button"
     >
-      Replace initial value
+      Add formik values
     </button>
   </div>
 </form>
 `;
 
-exports[`Storyshots f/fields/QueryCombobox Single Select With Default Formik State 1`] = `
+exports[`Storyshots f/fields/QueryCombobox Multiple Select With Default Formik State 1`] = `
+<form
+  action="#"
+  onReset={[Function]}
+  onSubmit={[Function]}
+>
+  <div
+    className="base multiple-combobox y-background2"
+  >
+    <label
+      className="base label x-main2"
+      htmlFor="teams"
+      id="downshift-4-label"
+    >
+      Search for a team
+    </label>
+    <div
+      className="selected-items"
+    >
+      <div
+        className="item"
+        onClick={[Function]}
+        onKeyDown={[Function]}
+        tabIndex={-1}
+      >
+        <button
+          className="base button x-background2 modifierCompact modifierSimple"
+          onClick={[Function]}
+          type="button"
+        >
+          <span
+            className="v25 mr-v"
+          >
+            Apple
+          </span>
+          <span
+            className="f-icons close"
+          >
+            Y
+          </span>
+        </button>
+      </div>
+      <div
+        className="item"
+        onClick={[Function]}
+        onKeyDown={[Function]}
+        tabIndex={-1}
+      >
+        <button
+          className="base button x-background2 modifierCompact modifierSimple"
+          onClick={[Function]}
+          type="button"
+        >
+          <span
+            className="v25 mr-v"
+          >
+            Pear
+          </span>
+          <span
+            className="f-icons close"
+          >
+            Y
+          </span>
+        </button>
+      </div>
+    </div>
+    <div
+      aria-expanded={false}
+      aria-haspopup="listbox"
+      aria-owns="downshift-4-menu"
+      className="input-wrapper"
+      role="combobox"
+    >
+      <input
+        aria-autocomplete="list"
+        aria-controls="downshift-4-menu"
+        aria-labelledby="downshift-4-label"
+        autoComplete="off"
+        className="input"
+        id="downshift-4-input"
+        onBlur={[Function]}
+        onChange={[Function]}
+        onClick={[Function]}
+        onKeyDown={[Function]}
+        value=""
+      />
+    </div>
+    <div
+      className="base popover x-background1 bottom left"
+    >
+      <ul
+        aria-labelledby="downshift-4-label"
+        className="base menu"
+        id="downshift-4-menu"
+        onMouseLeave={[Function]}
+        role="listbox"
+      />
+    </div>
+  </div>
+  <div
+    style={
+      Object {
+        "alignItems": "flex-end",
+        "display": "flex",
+        "flexDirection": "column",
+      }
+    }
+  >
+    <div
+      className="debugger"
+    >
+      <button
+        className="base button x-main2"
+        onClick={[Function]}
+        type="button"
+      >
+        Open FormDebugger
+      </button>
+    </div>
+    <button
+      className="base button x-main1"
+      onClick={[Function]}
+      type="button"
+    >
+      Add formik values
+    </button>
+  </div>
+</form>
+`;
+
+exports[`Storyshots f/fields/QueryCombobox Single Select 1`] = `
 <form
   action="#"
   onReset={[Function]}
@@ -11310,7 +11596,7 @@ exports[`Storyshots f/fields/QueryCombobox Single Select With Default Formik Sta
         onBlur={[Function]}
         onChange={[Function]}
         onKeyDown={[Function]}
-        value="Apple"
+        value=""
       />
     </div>
     <div
@@ -11350,7 +11636,86 @@ exports[`Storyshots f/fields/QueryCombobox Single Select With Default Formik Sta
       onClick={[Function]}
       type="button"
     >
-      Replace initial value
+      Replace formik value
+    </button>
+  </div>
+</form>
+`;
+
+exports[`Storyshots f/fields/QueryCombobox Single Select With Default Formik State 1`] = `
+<form
+  action="#"
+  onReset={[Function]}
+  onSubmit={[Function]}
+>
+  <div
+    className="base combobox y-background2"
+  >
+    <label
+      className="base label x-main2"
+      htmlFor="team"
+      id="downshift-2-label"
+    >
+      Search for a team
+    </label>
+    <div
+      aria-expanded={false}
+      aria-haspopup="listbox"
+      aria-owns="downshift-2-menu"
+      className="input-wrapper"
+      role="combobox"
+    >
+      <input
+        aria-autocomplete="list"
+        aria-controls="downshift-2-menu"
+        aria-labelledby="downshift-2-label"
+        autoComplete="off"
+        className="input"
+        id="downshift-2-input"
+        onBlur={[Function]}
+        onChange={[Function]}
+        onKeyDown={[Function]}
+        value="Apple"
+      />
+    </div>
+    <div
+      className="base popover x-background1 bottom left"
+    >
+      <ul
+        aria-labelledby="downshift-2-label"
+        className="base menu"
+        id="downshift-2-menu"
+        onMouseLeave={[Function]}
+        role="listbox"
+      />
+    </div>
+  </div>
+  <div
+    style={
+      Object {
+        "alignItems": "flex-end",
+        "display": "flex",
+        "flexDirection": "column",
+      }
+    }
+  >
+    <div
+      className="debugger"
+    >
+      <button
+        className="base button x-main2"
+        onClick={[Function]}
+        type="button"
+      >
+        Open FormDebugger
+      </button>
+    </div>
+    <button
+      className="base button x-main1"
+      onClick={[Function]}
+      type="button"
+    >
+      Replace formik value
     </button>
   </div>
 </form>

package/src/local.scss

@@ -5,12 +5,12 @@
   --theme-border-style: 1px solid;
   --theme-border-color: var(--paragraph);
   --theme-border: var(--theme-border-style) var(--theme-border-color);
+  --default-gap: 1em;
 }
 
 html {
   font-family: var(--font-default);
   font-size: 18px;
-  font-feature-settings:'liga' on;
+  font-feature-settings: 'liga' on;
   scroll-behavior: smooth;
-}
-
+}

package/src/stories/f/FormInput.stories.jsx

@@ -8,6 +8,15 @@ import {
   FormDebugger,
 } from 'ui'
 
+import { fruits } from '../utils/testData'
+
+import {
+  RelayEnvironmentProvider,
+  mockRelayOperation,
+} from '../utils/relay'
+
+import generateNodeId from '../utils/generateNodeId'
+
 export default {
   title        :'f/FormInput',
   component    :FormInput,
@@ -25,6 +34,11 @@ export default {
         </Form>
       </Formik>
     ),
+    (storyfn) => (
+      <RelayEnvironmentProvider>
+        { storyfn() }
+      </RelayEnvironmentProvider>
+    ),
   ],
   argTypes:{
     backgroundColor:{ control: 'color' },
@@ -99,6 +113,107 @@ export const Base = () => {
   )
 }
 
+const allTeamsMockData = {
+  PageInfo() {
+    return {
+      hasNextPage    :true,
+      hasPreviousPage:true,
+    }
+  },
+  TeamNodeConnection:(args) => {
+    const edges = fruits.map((fruit) => ({
+      node:{
+        id  :generateNodeId('TeamNode'),
+        name:fruit,
+      },
+    }))
+
+    // eslint-disable-next-line camelcase
+    const { name_Icontains } = args?.args || {}
+
+    return ({
+      pageInfo:{
+        hasNextPage    :true,
+        hasPreviousPage:true,
+      },
+      // eslint-disable-next-line camelcase
+      edges:name_Icontains?.trim()
+        ? edges.filter(({ node }) => node.name
+          .toLowerCase()
+          .includes(name_Icontains.toLowerCase()))
+        : [],
+    })
+  },
+}
+
+const FETCH_TEAMS_QUERY = graphql`
+  query FormInputAllTeamsQuery($name_Icontains: String) {
+    allTeams(name_Icontains: $name_Icontains) {
+      edges {
+        node {
+          id
+          name
+        }
+      }
+    }
+  }
+`
+
+export const WithQueryCombobox = () => {
+  const inputMap = [
+    {
+      type :'text',
+      name :'firstName',
+      label:"What's your first name ?",
+    },
+    {
+      type   :'choices',
+      name   :'colors',
+      label  :'What are your favourite colors ?',
+      options:[
+        {
+          value:'red',
+          label:'Color Red',
+        },
+        {
+          value:'blue',
+          label:'Color Blue',
+        },
+        {
+          value:'green',
+          label:'Color Green',
+        },
+      ],
+    },
+    {
+      type         :'query-combobox',
+      name         :'team',
+      query        :FETCH_TEAMS_QUERY,
+      label        :'Search for a team',
+      optionsKeyMap:{
+        value:'id',
+        label:'name',
+      },
+      graphQlNode   :'allTeams',
+      searchVariable:'name_Icontains',
+    },
+  ]
+
+  mockRelayOperation(allTeamsMockData)
+  mockRelayOperation(allTeamsMockData)
+  mockRelayOperation(allTeamsMockData)
+
+  return (
+    <>
+      {
+        inputMap.map((input) => <FormInput {...input} key={input.name} />)
+        }
+      <FormDebugger />
+
+    </>
+  )
+}
+
 export const ExtensibleFormInput = () => {
   const ExtendedTextInput = (props) => (
     <TextInput

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

@@ -80,7 +80,7 @@ const FETCH_TEAMS_QUERY = graphql`
 `
 
 // eslint-disable-next-line react/prop-types
-const ResolvedTemplate = ({ multiple, defaultFormikState = {} }) => {
+const ResolvedTemplate = ({ multiple, defaultFormikState }) => {
   mockRelayOperation(allTeamsMockData)
   mockRelayOperation(allTeamsMockData)
   mockRelayOperation(allTeamsMockData)
@@ -88,15 +88,31 @@ const ResolvedTemplate = ({ multiple, defaultFormikState = {} }) => {
   const Content = () => {
     const name = multiple ? 'teams' : 'team'
 
-    const [, , helpers] = useField(name)
+    const [, meta, helpers] = useField(name)
+
+    const { value } = meta
 
     const { setValue } = helpers
 
     const updateFormikState = () => {
-      setValue({
-        value:'VGVhbU5vZGU6MDAxZTIyOGEtYzA5My00MGI0LWE1MTUtYTNkMTM1NTE1MDNk',
-        label:'Kafagoho',
-      })
+      if (multiple) {
+        setValue([
+          ...(value || []),
+          {
+            value:'VGVhbU5vZGU6MDAxZTIyOGEtYzA5My00MGI0LWE1MTUtYTNkMTM1NTE1MDNk',
+            label:'Matomoko',
+          },
+          {
+            value:'VGVhbU5vZGU6MDAxZTIyOGEtYzA5My00MGI0LWE1MTUtYTNkMTM1NTE1MDNp',
+            label:'Chungwa',
+          },
+        ])
+      } else {
+        setValue({
+          value:'VGVhbU5vZGU6MDAxZTIyOGEtYzA5My00MGI0LWE1MTUtYTNkMTM1NTE1MDNk',
+          label:'Kafagoho',
+        })
+      }
     }
 
     return (
@@ -124,16 +140,24 @@ const ResolvedTemplate = ({ multiple, defaultFormikState = {} }) => {
           <Button
             onClick={updateFormikState}
           >
-            {multiple ? 'Add more initial values' : 'Replace initial value'}
+            {multiple ? 'Add formik values' : 'Replace formik value'}
           </Button>
         </div>
       </>
     )
   }
 
+  let initialValues = defaultFormikState
+
+  if (!defaultFormikState && multiple) {
+    initialValues = []
+  } else if (!defaultFormikState && !multiple) {
+    initialValues = {}
+  }
+
   return (
     <Formik
-      initialValues={defaultFormikState}
+      initialValues={initialValues}
     >
       <Form>
         <Content />
@@ -158,6 +182,29 @@ SingleSelectWithDefaultFormikState.args = {
   },
 }
 
+export const MultipleSelect = ResolvedTemplate.bind({})
+MultipleSelect.args = {
+  multiple          :true,
+  defaultFormikState:{ teams: [] },
+}
+
+export const MultipleSelectWithDefaultFormikState = ResolvedTemplate.bind({})
+MultipleSelectWithDefaultFormikState.args = {
+  multiple          :true,
+  defaultFormikState:{
+    teams:[
+      {
+        value:'VGVhbU5vZGU6MDAxZTIyOGEtYzA5My00MGI0LWE1MTUtYTNkMTM1NTE1MDNl',
+        label:'Apple',
+      },
+      {
+        value:'VGVhbU5vZGU6MDA0N2U4MzktODY0Zi00N2U5LTg3ZjgtZGUwMmM2Yzg1YWJm',
+        label:'Pear',
+      },
+    ],
+  },
+}
+
 // eslint-disable-next-line react/prop-types
 // const RejectedTemplate = ({ multiple }) => {
 //   const Content = () => {