Merge branch 'main' into feat/add-select-all-on-dropdown

src/components/Box/Box.tsx

@@ -61,6 +61,7 @@ export interface ExtendedBoxProps extends BoxProps {
   // breakpoints
   sm?: customStyles;
   md?: customStyles;
+  lp?: customStyles;
   lg?: customStyles;
 
   direction?: "row" | "column" | "row-reverse" | "column-reverse";

src/components/Chip/Chip.styles.ts

@@ -69,7 +69,7 @@ const StyledChip = styled.div<{
   padding: 0 ${({theme}) => theme.spacing.xs};
   height: ${({theme, size}) => theme.spacing[size]};
   line-height: ${({theme, size}) => theme.spacing[size]};
-  border-radius: ${({theme}) => theme.borderRadius.minimal};
+  border-radius: ${({theme}) => theme.borderRadius.base};
   color: ${({theme, role, priority}) => propsToColour(theme, role, priority)};
   display: inline-flex;
   justify-content: center;
@@ -81,7 +81,7 @@ const StyledChip = styled.div<{
     props.role === "default" &&
     props.priority === "low" &&
     `
-    border: 1px solid ${props.theme.core.border.borderMedium};
+    border: 1px solid ${props.theme.core.border.borderLight};
   `}
 
   ${(props) => addCustomStyles(props)};

src/components/Dropdown/Dropdown.test.tsx

@@ -126,4 +126,25 @@ describe("Dropdown Component", () => {
       expect(getByText("inline-loading")).toBeInTheDocument();
     });
   });
+
+  it("shows inputvalue in input if provided", async () => {
+    const {getByRole} = render(
+      <Dropdown label="Dropdown" options={options} inputValue="Super cool option" />
+    );
+    const input = getByRole("textbox");
+
+    expect(input).toHaveValue("Super cool option");
+  });
+
+  it("fires event if user types in Input if onInputChange is provided", async () => {
+    const onInputChange = jest.fn();
+    const {getByRole} = render(
+      <Dropdown label="Dropdown" options={options} onInputChange={onInputChange} />
+    );
+    const input = getByRole("textbox");
+
+    fireEvent.change(input, {target: {value: "Super cool option"}});
+
+    expect(onInputChange).toHaveBeenCalledWith(expect.anything());
+  });
 });

src/components/Dropdown/Dropdown.tsx

@@ -10,12 +10,14 @@ import Popover from "../Popover";
 import {ListItem} from "../List";
 import Chip from "../Chip";
 import {faChevronDown, faSearch} from "@fortawesome/pro-regular-svg-icons";
+import {customStyles} from "../../core/styleFunctions";
 
 export interface Option {
   id: string | number;
   text: string;
   selected?: boolean;
   category?: string;
+  startAdornment?: React.ReactNode;
   endAdornment?: React.ReactNode;
 }
 
@@ -31,6 +33,9 @@ export interface DropdownProps {
   hasClearSelection?: boolean;
   hasSelectAll?: boolean;
   hasSearch?: boolean;
+  inputValue?: string;
+  onInputChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  endAdornment?: React.ReactNode;
   onChange?: (selectedValue: any, previouslySelected: boolean) => void;
   onClearSelection?: () => void;
   onSelectAll?: () => void;
@@ -39,6 +44,7 @@ export interface DropdownProps {
   "data-cy"?: string;
   loadingIndicator?: React.ReactNode;
   selectedIndicator?: React.ReactNode;
+  cs?: customStyles;
 }
 
 /**
@@ -60,6 +66,9 @@ const Dropdown = ({
   hasClearSelection = false,
   hasSelectAll = false,
   hasSearch = false,
+  inputValue,
+  onInputChange,
+  endAdornment,
   onChange = () => {},
   onClearSelection = () => {},
   onSelectAll = () => {},
@@ -68,11 +77,11 @@ const Dropdown = ({
   "data-cy": dataCy,
   loadingIndicator,
   selectedIndicator,
+  cs,
 }: DropdownProps) => {
   const popRef = useRef<any>(null);
   const [showPopover, setShowPopover] = useState(false);
   // eslint-disable-next-line
-  const [value, setValue] = useState(defaultValue);
   const [searchTerm, setSearchTerm] = useState("");
   const selectedCount = [
     ...new Set(
@@ -105,59 +114,64 @@ const Dropdown = ({
         setShowPopover(false);
       }}
     >
-      <Box>
+      <Box cs={cs}>
         <Input
           data-testid={dataTestId}
           data-cy={dataCy}
           error={error}
+          onChange={onInputChange}
           onClick={() => {
             setShowPopover(true);
           }}
           endAdornment={
-            <Box
-              cs={{
-                display: "inline-flex",
-                gap: "spacing.xs",
-                alignItems: "center",
-                paddingLeft: "spacing.sm",
-                background: "white",
-              }}
-            >
-              {hasSelectedCount ? (
-                !notSelectedCount ? (
-                  // needed to disable because eslint is looking for aria attribute role
-                  // eslint-disable-next-line
-                  <Chip priority="low" role="primary" size="md">
-                    ALL
-                  </Chip>
-                ) : selectedCount ? (
-                  // needed to disable because eslint is looking for aria attribute role
-                  // eslint-disable-next-line
-                  <Chip priority="low" role="primary" size="md">
-                    {selectedCount}
-                  </Chip>
-                ) : null
-              ) : null}
-              <SvgIcon
-                icon={faChevronDown}
-                onClick={() => {
-                  setShowPopover(true);
+            endAdornment || (
+              <Box
+                cs={{
+                  display: "inline-flex",
+                  gap: "spacing.xs",
+                  alignItems: "center",
+                  paddingLeft: "spacing.sm",
+                  background: "white",
                 }}
-              />
-            </Box>
+              >
+                {hasSelectedCount ? (
+                  !notSelectedCount ? (
+                    // needed to disable because eslint is looking for aria attribute role
+                    // eslint-disable-next-line
+                    <Chip priority="low" role="primary" size="md">
+                      ALL
+                    </Chip>
+                  ) : selectedCount ? (
+                    // needed to disable because eslint is looking for aria attribute role
+                    // eslint-disable-next-line
+                    <Chip priority="low" role="primary" size="md">
+                      {selectedCount}
+                    </Chip>
+                  ) : null
+                ) : null}
+                <SvgIcon
+                  icon={faChevronDown}
+                  onClick={() => {
+                    setShowPopover(true);
+                  }}
+                />
+              </Box>
+            )
           }
           fullWidth
           ref={popRef}
           label={label}
           placeholder={placeholder}
           value={
-            multipleSelect
+            typeof inputValue === "string"
+              ? inputValue
+              : multipleSelect
               ? selectedCount
                 ? label
                 : ""
               : options?.find((item: any) => item?.id === defaultValue)?.text || ""
           }
-          readOnly={true}
+          readOnly={typeof inputValue !== "string"}
         />
         {showPopover ? (
           <Popover
@@ -239,6 +253,7 @@ const Dropdown = ({
                                   data-testid={`dropdown-option-item-${x?.id || idx}`}
                                   data-cy={`dropdown-option-item-${x?.id || idx}`}
                                   button
+                                  startAdornment={x?.startAdornment}
                                   endAdornment={
                                     x?.endAdornment ||
                                     ((multipleSelect && x?.selected) ||

src/core/styleFunctions/index.tsx

@@ -38,14 +38,16 @@ type ShorthandCSS = {
 type breakpoints = {
   sm?: CSS.Properties | ShorthandCSS;
   md?: CSS.Properties | ShorthandCSS;
+  lp?: CSS.Properties | ShorthandCSS;
   lg?: CSS.Properties | ShorthandCSS;
 };
 
-type keysTypes = "sm" | "md" | "lg";
+type keysTypes = "sm" | "md" | "lp" | "lg";
 
-const values: {sm: number; md: number; lg: number} = {
-  sm: 0, // tablet
-  md: 600, // small laptop
+const values: {sm: number; md: number; lp: number; lg: number} = {
+  sm: 0, // mobile
+  md: 600, // tablet
+  lp: 960, // small laptop
   lg: 1360, // desktop 1360
 };
 
@@ -106,7 +108,7 @@ const numberToSpacingMap = {
 export type customStyles = CSS.Properties | breakpoints | ShorthandCSS;
 
 const defaultBreakpoints = {
-  keys: ["sm", "md", "lg"],
+  keys: ["sm", "md", "lp", "lg"],
   up: (key: keysTypes) => `@media (min-width:${values[key]}px)`,
 };