Expand dropdown component to use inner classes

and used that for correct BEM naming of facet line dropdowns

Author: spaceo

src/stories/Library/dropdown/Dropdown.tsx

@@ -1,3 +1,5 @@
+import clsx from "clsx";
+
 export type DropdownItem = {
   title: string;
   href?: string;
@@ -9,13 +11,15 @@ export type DropdownProps = {
   ariaLabel: string;
   arrowIcon: "triangles" | "chevron";
   classNames?: string;
+  innerClassNames?: { select?: string; option?: string; arrowWrapper?: string };
 };
 
 export const Dropdown: React.FC<DropdownProps> = ({
   arrowIcon,
   ariaLabel,
   list,
   classNames,
+  innerClassNames,
 }) => {
   const Icon = () => {
     if (arrowIcon === "triangles") {
@@ -48,21 +52,28 @@ export const Dropdown: React.FC<DropdownProps> = ({
     return null;
   };
 
+  const classes = {
+    root: clsx("dropdown", classNames),
+    select: clsx("dropdown__select", innerClassNames?.select),
+    option: clsx("dropdown__option", innerClassNames?.option),
+    arrowWrapper: clsx("dropdown__arrows", innerClassNames?.arrowWrapper),
+  };
+
   return (
-    <div className={`dropdown ${classNames || ""}`}>
-      <select className="dropdown__select" aria-label={ariaLabel}>
+    <div className={classes.root}>
+      <select className={classes.select} aria-label={ariaLabel}>
         {list.map(({ title, disabled }, index) => (
           <option
             key={index}
-            className="dropdown__option"
+            className={classes.option}
             value={title}
             disabled={disabled !== undefined ? disabled : false}
           >
             {title}
           </option>
         ))}
       </select>
-      <div className="dropdown__arrows">
+      <div className={classes.arrowWrapper}>
         <Icon />
       </div>
     </div>

src/stories/Library/dropdown/dropdown.scss

@@ -52,3 +52,14 @@
   margin-top: 4px;
   transform: rotateZ(180deg);
 }
+
+.dropdown__select--inline {
+  @extend %text-tags;
+  height: 100%;
+  padding: $s-sm $s-md;
+  min-width: 200px;
+}
+
+.dropdown__arrows--inline {
+  height: 100%;
+}

src/stories/Library/search-result-page/FacetLine.tsx

@@ -34,6 +34,10 @@ const FacetLine: FC<FacetLineProps> = ({ items }) => {
                 list={[{ title }, ...terms]}
                 arrowIcon="chevron"
                 classNames="dropdown--grey-borders"
+                innerClassNames={{
+                  select: "dropdown__select--inline",
+                  arrowWrapper: "dropdown__arrows--inline ",
+                }}
               />
             </li>
           );