Merge pull request #921 from equinor/fix/disabled-styling-optiondrawer

fix/disabled-styling-optiondrawer
equinor · Dec 20, 2024 · c81654f · c81654f
2 parents 46f9774 + 191900e
commit c81654f
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 14 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@equinor/amplify-component-lib",
-  "version": "8.18.0",
+  "version": "8.18.1",
   "description": "Frontend Typescript components for the Amplify team",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

diff --git a/src/molecules/OptionDrawer/OptionDrawer.styles.ts b/src/molecules/OptionDrawer/OptionDrawer.styles.ts
@@ -34,16 +34,29 @@ const StyledOptionWrapper = styled.div<StyledOptionProps>`
       : 'none'};
 `;
 
-const StyledOption = styled.div<StyledOptionProps>`
+const StyledOption = styled.button<StyledOptionProps>`
   position: relative;
   display: flex;
   flex: 1;
   align-items: center;
   cursor: pointer;
   transition: background-color 0.1s ease-in;
-  &:hover {
+  font-family: 'Equinor', sans-serif;
+  font-size: 1rem;
+  color: ${colors.text.static_icons__default.rgba};
+  &:hover:not(:disabled) {
     background-color: ${colors.interactive.primary__hover_alt.rgba};
   }
+  &:disabled {
+    cursor: not-allowed;
+    color: ${colors.interactive.disabled__text.rgba};
+    > button {
+      cursor: not-allowed;
+    }
+  }
+  > span::before {
+    display: none;
+  }
 
   svg {
     fill: ${colors.interactive.primary__resting.rgba};

diff --git a/src/molecules/OptionDrawer/OptionDrawer.test.tsx b/src/molecules/OptionDrawer/OptionDrawer.test.tsx
@@ -15,6 +15,7 @@ import {
 interface FakeType {
   id: string;
   label: string;
+  disabled?: boolean;
   children?: FakeType[];
 }
 
@@ -355,7 +356,13 @@ test("Doesn't call onToggle if disabled", async () => {
   const props = fakeProps();
   const onToggle = vi.fn();
 
-  render(<OptionDrawer {...props} onToggle={onToggle} disabled />);
+  render(
+    <OptionDrawer
+      {...props}
+      item={{ ...props.item, disabled: true }}
+      onToggle={onToggle}
+    />
+  );
 
   await user.click(screen.getByText(props.item.label));
 

diff --git a/src/molecules/OptionDrawer/OptionDrawer.tsx b/src/molecules/OptionDrawer/OptionDrawer.tsx
@@ -74,7 +74,13 @@ export interface ToggleEventProps<T> {
 }
 
 export interface OptionDrawerProps<
-  T extends { id: string; label: string; parentId?: string; children?: T[] },
+  T extends {
+    id: string;
+    label: string;
+    disabled?: boolean;
+    parentId?: string;
+    children?: T[];
+  },
 > {
   item: T;
   onToggle: ({ items, toggle, event }: ToggleEventProps<T>) => void;
@@ -88,11 +94,16 @@ export interface OptionDrawerProps<
   openAll?: boolean;
   showIntermediateParent?: boolean;
   parentHasNestedItems?: boolean;
-  disabled?: boolean;
 }
 
 export const OptionDrawer = <
-  T extends { id: string; label: string; parentId?: string; children?: T[] },
+  T extends {
+    id: string;
+    label: string;
+    disabled?: boolean;
+    parentId?: string;
+    children?: T[];
+  },
 >({
   item,
   onToggle,
@@ -106,7 +117,6 @@ export const OptionDrawer = <
   openAll,
   showIntermediateParent = false,
   parentHasNestedItems = false,
-  disabled = false,
 }: OptionDrawerProps<T>) => {
   const [open, setOpen] = useState(false);
   const [status, setStatus] = useState<StatusType>(
@@ -129,7 +139,7 @@ export const OptionDrawer = <
   }, [openAll]);
 
   const handleClick = (e: MouseEvent) => {
-    if (disabled) return;
+    if (item.disabled) return;
 
     if (item.children && item.children.length !== 0) {
       setOpen((o) => !o);
@@ -232,23 +242,28 @@ export const OptionDrawer = <
             <StyledIcon data={open ? chevron_down : chevron_right} />
           </Button>
         )}
-        <StyledOption $section={section} onClick={handleClick}>
+        <StyledOption
+          $section={section}
+          onClick={handleClick}
+          disabled={!!item.disabled}
+        >
           <Checkbox
             indeterminate={status === 'INTERMEDIATE'}
             checked={status === 'CHECKED'}
             color="secondary"
+            disabled={!!item.disabled}
           />
           {item.label}
         </StyledOption>
       </StyledOptionItem>
       {open &&
-        item.children?.map((i) => (
+        item.children?.map((child) => (
           <OptionDrawer<T>
-            key={`OptionDrawer-${i.id}`}
+            key={`OptionDrawer-${child.id}`}
             section={section + 1}
             onToggle={onToggle}
             selectedItems={selectedItems}
-            item={i}
+            item={child}
             singleSelect={singleSelect}
             siblings={item.children?.length}
             animateCheck={animateCheck}
@@ -257,7 +272,6 @@ export const OptionDrawer = <
             openAll={openAll}
             showIntermediateParent={showIntermediateParent}
             parentHasNestedItems
-            disabled={disabled}
           />
         ))}
     </StyledOptionWrapper>

diff --git a/src/molecules/OptionDrawer/stories/data.ts b/src/molecules/OptionDrawer/stories/data.ts
@@ -1,6 +1,7 @@
 export interface ValueType {
   id: string;
   label: string;
+  disabled?: boolean;
   children?: ValueType[];
   value: number;
 }
@@ -15,11 +16,13 @@ export const items: ValueType[] = [
         id: '11',
         value: 11,
         label: 'First',
+        disabled: true,
         children: [
           {
             id: '111',
             value: 111,
             label: 'Uno',
+            disabled: true,
           },
           {
             id: '112',
@@ -30,6 +33,7 @@ export const items: ValueType[] = [
                 id: '1121',
                 value: 1121,
                 label: 'En',
+                disabled: true,
               },
               {
                 id: '1122',