- Add red color to close button icon.

- Add Stena flag SVG in elements. - Add Stena flag in sidebar menu top. - Add state highlight to sidebar menu items when selected (not selected already had highlight). - Make heading text in sidebar menu smaller. - Add aria-expanded to SidebarMenuCollapsible.
StenaIT · Sep 7, 2023 · a4d445d · a4d445d
1 parent d03df17
commit a4d445d
Show file tree

Hide file tree

Showing 8 changed files with 105 additions and 10 deletions.
diff --git a/packages/elements/src/icons/StenaFlag.svg b/packages/elements/src/icons/StenaFlag.svg
diff --git a/packages/elements/src/index.ts b/packages/elements/src/index.ts
@@ -1,3 +1,6 @@
+import { ReactComponent as StenaFlagSvg } from "./icons/StenaFlag.svg";
+
+export const StenaFlag = StenaFlagSvg;
 export * from "./icons/ui/IconsUi";
 export * from "./icons/misc/IconsMisc";
 export * from "./components/ui/banners/banner/Banner";

diff --git a/packages/panels/src/components/sidebar-menu/SidebarMenu.module.css b/packages/panels/src/components/sidebar-menu/SidebarMenu.module.css
@@ -7,7 +7,10 @@
   --swui-sidebar-menu-background-color-hover: var(--lhds-color-ui-400);
   --swui-sidebar-menu-background-color-focus: var(--lhds-color-ui-400);
   --swui-sidebar-menu-background-color-active: var(--lhds-color-ui-300);
-  --swui-sidebar-menu-item-selected: var(--lhds-color-blue-100);
+  --swui-sidebar-menu-background-selected: var(--lhds-color-blue-100);
+  --swui-sidebar-menu-background-selected-hover: var(--lhds-color-blue-200);
+  --swui-sidebar-menu-background-selected-focus: var(--lhds-color-blue-200);
+  --swui-sidebar-menu-background-selected-active: var(--lhds-color-blue-100);
   --swui-sidebar-menu-content-padding: var(--swui-metrics-indent)
     var(--swui-metrics-indent) var(--swui-metrics-indent) 0;
 
@@ -25,7 +28,17 @@
   --current-background-color-active: var(
     --swui-sidebar-menu-background-color-active
   );
-  --current-item-selected: var(--swui-sidebar-menu-item-selected);
+  --current-background-selected: var(--swui-sidebar-menu-background-selected);
+  --current-background-selected-hover: var(
+    --swui-sidebar-menu-background-selected-hover
+  );
+  --current-background-selected-focus: var(
+    --swui-sidebar-menu-background-selected-focus
+  );
+  --current-background-selected-active: var(
+    --swui-sidebar-menu-background-selected-active
+  );
+
   --current-content-padding: var(--swui-sidebar-menu-content-padding);
 
   /* Styling */

diff --git a/packages/panels/src/components/sidebar-menu/SidebarMenuCloseButton.module.css b/packages/panels/src/components/sidebar-menu/SidebarMenuCloseButton.module.css
@@ -61,8 +61,13 @@
   }
 
   .icon {
+    height: 24px;
     path {
-      fill: var(--swui-sidebar-menu-close-button-text-color);
+      fill: var(--lhds-color-red-600);
     }
   }
+
+  .stenaFlag {
+    height: 32px;
+  }
 }
diff --git a/packages/panels/src/components/sidebar-menu/SidebarMenuCloseButton.tsx b/packages/panels/src/components/sidebar-menu/SidebarMenuCloseButton.tsx
@@ -1,8 +1,9 @@
 import * as React from "react";
 import cx from "classnames";
 import styles from "./SidebarMenuCloseButton.module.css";
-import { Box, ButtonElementProps } from "@stenajs-webui/core";
+import { Box, ButtonElementProps, Row } from "@stenajs-webui/core";
 import { ReactComponent as CloseIcon } from "./svg/close.svg";
+import { StenaFlag } from "@stenajs-webui/elements";
 
 export interface SidebarMenuCloseButtonProps extends ButtonElementProps {}
 
@@ -15,9 +16,12 @@ export const SidebarMenuCloseButton: React.FC<SidebarMenuCloseButtonProps> = ({
       onClick={onClick}
       className={cx(styles.sidebarMenuCloseButton, className)}
     >
-      <Box className={styles.iconWrapper}>
-        <CloseIcon className={styles.icon} />
-      </Box>
+      <Row justifyContent={"space-between"} alignItems={"center"} flex={1}>
+        <Box className={styles.iconWrapper}>
+          <CloseIcon className={styles.icon} />
+        </Box>
+        <StenaFlag className={styles.stenaFlag} />
+      </Row>
     </button>
   );
 };
diff --git a/packages/panels/src/components/sidebar-menu/SidebarMenuCollapsible.tsx b/packages/panels/src/components/sidebar-menu/SidebarMenuCollapsible.tsx
@@ -41,7 +41,10 @@ export const SidebarMenuCollapsible: React.FC<SidebarMenuCollapsibleProps> = ({
   };
 
   return (
-    <Box background={"var(--current-background-color)"}>
+    <Box
+      background={"var(--current-background-color)"}
+      aria-expanded={expanded}
+    >
       <Box indent={1} width={"100%"}>
         <Box
           width={"100%"}

diff --git a/packages/panels/src/components/sidebar-menu/SidebarMenuContent.module.css b/packages/panels/src/components/sidebar-menu/SidebarMenuContent.module.css
@@ -43,6 +43,18 @@
   }
 
   &.selected {
-    background: var(--current-item-selected);
+    background: var(--current-background-selected);
+
+    &:hover {
+      background: var(--current-background-selected-hover);
+    }
+
+    &:focus-visible {
+      background: var(--current-background-selected-focus);
+    }
+
+    &:active {
+      background: var(--current-background-selected-active);
+    }
   }
 }
diff --git a/packages/panels/src/components/sidebar-menu/SidebarMenuHeading.tsx b/packages/panels/src/components/sidebar-menu/SidebarMenuHeading.tsx
@@ -29,7 +29,7 @@ export const SidebarMenuHeading: React.FC<SidebarMenuHeadingProps> = ({
         <Text
           variant={"overline"}
           color={"var(--swui-sidebar-menu-heading-text-color)"}
-          size={"small"}
+          size={"smaller"}
           {...textProps}
         >
           {label}