@simplybusiness/mobius 3.3.2 → 3.4.1

package/src/components/Chopin/TradeSelector/TradeInput/TradeInput.tsx

@@ -0,0 +1,94 @@
+import { RefObject, ChangeEvent, MouseEvent } from "react";
+import { AriaLabelingProps, DOMProps } from "@react-types/shared";
+import clsx from "clsx";
+import { useFocusRing } from "@react-aria/focus";
+import { useHover } from "@react-aria/interactions";
+import { Text } from "../../../Text";
+
+export type TradeInputProps = {
+  onChange: (event: ChangeEvent<HTMLInputElement>) => void;
+  inputRef: RefObject<HTMLInputElement>;
+  inputProps?: AriaLabelingProps & DOMProps;
+  value: string;
+  className?: string;
+  label?: string;
+  placeholder: string;
+  initialTrade?: string;
+  onEdit: (event: MouseEvent<HTMLButtonElement>) => void;
+  isEditable: boolean;
+};
+
+export const TradeInput = (props: TradeInputProps) => {
+  const {
+    onChange,
+    onEdit,
+    inputRef,
+    inputProps,
+    value,
+    className,
+    label,
+    placeholder,
+    initialTrade,
+    isEditable,
+    ...otherProps
+  } = props;
+  const selectedTrade = initialTrade && !isEditable;
+  const { isFocusVisible, focusProps } = useFocusRing({
+    within: true,
+  });
+  const { hoverProps, isHovered } = useHover({
+    ...otherProps,
+  });
+  const classes = clsx(
+    "chopin",
+    "chopin/TradeSelectorInput",
+    {
+      "--is-focused": isFocusVisible,
+      "--is-hovered": isHovered,
+    },
+    className,
+  );
+
+  return (
+    <div {...focusProps}>
+      {selectedTrade ? (
+        <Text>
+          You have selected ‘<strong>{initialTrade}</strong>’ as your
+          trade/profession.{" "}
+          <button
+            type="button"
+            className="mobius/Link chopin/TradeSelectorButton"
+            aria-label="Change your selected profession"
+            onClick={onEdit}
+          >
+            Change
+          </button>
+        </Text>
+      ) : (
+        <div className="chopin/TradeSelectorInputContainer">
+          <input
+            {...hoverProps}
+            {...inputProps}
+            type="text"
+            placeholder={placeholder}
+            aria-label={label}
+            className={classes}
+            onChange={onChange}
+            ref={inputRef}
+            value={value}
+          />
+          {isEditable && (
+            <button
+              type="button"
+              className="mobius/Link chopin/TradeSelectorButton"
+              aria-label="Cancel changes"
+              onClick={onEdit}
+            >
+              Cancel
+            </button>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};

package/src/components/Chopin/TradeSelector/TradeInput/index.tsx

@@ -0,0 +1 @@
+export * from "./TradeInput";

package/src/components/Chopin/TradeSelector/TradeSelector.story.mdx

@@ -5,13 +5,10 @@ import { excludeControls } from "../../../utils/excludeControls";
 <Meta
   title="Chopin/TradeSelector"
   component={TradeSelector}
-  argTypes={excludeControls(
-    "className",
-    "elementType",
-    "labels",
-    "urls",
-    "onTradeSelected",
-  )}
+  argTypes={{
+    onTradeSelected: { action: "onTradeSelected" },
+    ...excludeControls("className", "labels", "urls", "onTradeSelected"),
+  }}
 />
 
 # TradeSelector
@@ -32,7 +29,13 @@ import { Chopin } from "@simplybusiness/mobius";
 
 ## Normal
 
-<Story name="Normal" args={{ minInput: 3, apiRequestDebounceInMs: 250 }}>
+<Story
+  name="Normal"
+  args={{
+    minInput: 3,
+    apiRequestDebounceInMs: 250,
+  }}
+>
   {args => <TradeSelector {...args} />}
 </Story>
 
@@ -79,6 +82,27 @@ import { Chopin } from "@simplybusiness/mobius";
 <Chopin.TradeSelector />
 ```
 
+## With Search Scope
+
+<Story
+  name="With Search Scope"
+  args={{
+    minInput: 3,
+    apiRequestDebounceInMs: 250,
+    vertical: "business",
+    searchScope: "current_vertical",
+  }}
+>
+  {args => <TradeSelector {...args} />}
+</Story>
+
+<!-- prettier-ignore -->
+```jsx
+import { Chopin } from "@simplybusiness/mobius";
+
+<Chopin.TradeSelector />
+```
+
 ## Labels
 
 The component has a predefined list of labels:
@@ -116,45 +140,49 @@ The following HTML is rendered for a TradeSelector:
 ### With user input
 
 ```html
-<div class="mobius chopin/TradeSelector">
+<div class="chopin chopin/TradeSelector">
   <label class="mobius mobius/Label chopin/TradeSelectorLabel">
     What is your specific trade/profession?
   </label>
   <p class="mobius mobius/Text caption chopin/TradeSelectorDescription">
     Start typing to choose from over 1,000 options.
   </p>
-  <div class="chopin/ComboBoxInputContainer">
-    <input class="chopin/ComboBoxInput" />
-    <div class="chopin/Popover">
-      <ul class="chopin/ListBox">
-        <li class="chopin/ListBoxSection">
-          <span class="chopin/ListBoxSectionHeading">
-            Exact matches for your search
-          </span>
-          <ul class="chopin/ListBoxSectionList">
-            <li class="chopin/TradeSelectorOption">
-              <span class="chopin/TradeSelectorOptionContent">
-                <strong>Consultant - training</strong>
-              </span>
-            </li>
-          </ul>
+  <div>
+    <div class="chopin/TradeSelectorInputContainer">
+      <input
+        placeholder="e.g. Cleaner, builder, consultant"
+        class="chopin chopin/TradeSelectorInput"
+      />
+    </div>
+  </div>
+  <dialog class="chopin/TradeSelectorResults">
+    <nav>
+      <header class="chopin/TradeSelectorListTitle">
+        Exact matches for your search
+      </header>
+      <ul class="chopin/TradeSelectorList">
+        <li class="chopin/TradeSelectorListItem">
+          <button class="chopin/TradeSelectorButton chopin/TradeSelectorOption">
+            <strong>Swimm</strong>ing pool installers
+          </button>
         </li>
-        <li class="chopin/ListBoxSection">
-          <span class="chopin/ListBoxSectionHeading">
-            Suggested matches for your search
-          </span>
-          <ul class="chopin/ListBoxSectionList">
-            <li class="chopin/TradeSelectorOption">
-              <span class="chopin/TradeSelectorOptionContent">
-                <strong>Training</strong>
-              </span>
-            </li>
-            ...other options...
-          </ul>
+        ...other options...
+      </ul>
+    </nav>
+    <nav>
+      <header class="chopin/TradeSelectorListTitle">
+        Suggested matches for your search
+      </header>
+      <ul class="chopin/TradeSelectorList">
+        <li class="chopin/TradeSelectorListItem">
+          <button class="chopin/TradeSelectorButton chopin/TradeSelectorOption">
+            <strong>Swim</strong> Shop
+          </button>
         </li>
+        ...other options...
       </ul>
-    </div>
-  </div>
+    </nav>
+  </dialog>
   <div class="mobius mobius/ErrorMessage">
     <span class="mobius/ErrorIcon"></span>
     <span class="mobius mobius/Text span mobius/ErrorText">
@@ -167,20 +195,18 @@ The following HTML is rendered for a TradeSelector:
 ### With trade selected
 
 ```html
-<div class="mobius chopin/TradeSelector">
+<div class="chopin chopin/TradeSelector">
   <label class="mobius mobius/Label chopin/TradeSelectorLabel">
     What is your specific trade/profession?
   </label>
-  <p class="mobius mobius/Text p">
-    You have selected ‘<strong>Security - training only</strong>’ as your
-    trade/profession.
-    <button
-      class="mobius/Link chopin/TradeSelectorButton"
-      aria-label="Change your selected profession"
-    >
-      Change
-    </button>
-  </p>
+  <div>
+    <p class="mobius mobius/Text p">
+      You have selected ‘<strong>Security - training only< strong>’ as your trade/profession.
+      <button class="mobius/Link chopin/TradeSelectorButton">
+        Change
+      </button>
+    </p>
+  </div>
 </div>
 ```