Some redesign fixes (#604)

- Use gap instead of Space in ActionMenuItemContent. - CheckboxMenu popover now longer has blue outline. - Remove unused CSS class in Chip CSS module. - Update font-size and font-weight of Heading level h4-h6 as per design. - Show all Heading variants in overview story. - Pass correct props down to anchor element in MenuButtonLink. - Update icons to Stena icons in NavBar stories. - Update color of nav bar notification button when there are no notifications. - Use Stena icon in notification button, instead of FA. - Notification now has white background, and round corners.
StenaIT · Oct 5, 2023 · 4c7e1ee · 4c7e1ee
1 parent 6318af4
commit 4c7e1ee
Show file tree

Hide file tree

Showing 12 changed files with 66 additions and 71 deletions.
diff --git a/packages/core/src/components/heading/Heading.module.css b/packages/core/src/components/heading/Heading.module.css
@@ -25,17 +25,14 @@
   }
 
   &.h4 {
-    --swui-heading-font-size: 1.6rem;
-    font-weight: var(--swui-font-weight-text-bold);
+    --swui-heading-font-size: 1.8rem;
   }
 
   &.h5 {
-    --swui-heading-font-size: 1.4rem;
-    font-weight: var(--swui-font-weight-text-bold);
+    --swui-heading-font-size: 1.6rem;
   }
 
   &.h6 {
-    --swui-heading-font-size: 1.2rem;
-    font-weight: var(--swui-font-weight-text-bold);
+    --swui-heading-font-size: 1.4rem;
   }
 }
diff --git a/packages/core/src/components/heading/Heading.stories.tsx b/packages/core/src/components/heading/Heading.stories.tsx
@@ -1,15 +1,25 @@
 import * as React from "react";
-import { Heading, HeadingProps } from "./Heading";
+import { Heading, HeadingProps, HeadingVariant } from "./Heading";
 import { Story } from "@storybook/react";
+import { Column } from "../layout/column/Column";
 
 export default {
   title: "core/Text/Heading",
   component: Heading,
 };
 
-export const Overview: Story<HeadingProps> = (props) => (
-  <Heading {...props}>The five boxing wizards jump quickly.</Heading>
-);
+export const Overview: Story<HeadingProps> = () => {
+  const headings: Array<HeadingVariant> = ["h1", "h2", "h3", "h4", "h5", "h6"];
+  return (
+    <Column gap={4}>
+      {headings.map((variant) => (
+        <Heading variant={variant}>
+          {variant} The five boxing wizards jump quickly.
+        </Heading>
+      ))}
+    </Column>
+  );
+};
 
 export const H1 = () => (
   <Heading variant={"h1"}>The five boxing wizards jump quickly.</Heading>

diff --git a/packages/elements/src/components/ui/action-menu/ActionMenu.stories.tsx b/packages/elements/src/components/ui/action-menu/ActionMenu.stories.tsx
@@ -159,7 +159,7 @@ export const AsyncItem = () => {
   const [loading, setLoading, clearLoading] = useBoolean(false);
   const [loadingDanger, setLoadingDanger, clearLoadingDanger] =
     useBoolean(false);
-  const [loadingSucess, setLoadingSuccess, clearLoadingSuccess] =
+  const [loadingSuccess, setLoadingSuccess, clearLoadingSuccess] =
     useBoolean(false);
 
   const [saved, setSaved] = useTimeoutState(false, 2000);
@@ -236,7 +236,7 @@ export const AsyncItem = () => {
         label={
           savedSuccess
             ? "Saved with success"
-            : loadingSucess
+            : loadingSuccess
             ? "Saving with success..."
             : "Save successfully"
         }

diff --git a/packages/elements/src/components/ui/action-menu/ActionMenuItemContent.tsx b/packages/elements/src/components/ui/action-menu/ActionMenuItemContent.tsx
@@ -1,11 +1,4 @@
-import {
-  Column,
-  DivProps,
-  Indent,
-  Row,
-  Space,
-  Spacing,
-} from "@stenajs-webui/core";
+import { Column, DivProps, Indent, Row, Spacing } from "@stenajs-webui/core";
 import * as React from "react";
 import { forwardRef, ReactNode } from "react";
 
@@ -46,6 +39,7 @@ export const ActionMenuItemContent = forwardRef<
   return (
     <>
       <Column
+        gap={1}
         {...props}
         minHeight={"var(--swui-default-item-height)"}
         justifyContent={"center"}
@@ -54,26 +48,18 @@ export const ActionMenuItemContent = forwardRef<
         onKeyDown={onKeyDown}
         aria-disabled={disabled}
       >
-        <Row justifyContent={"space-between"} alignItems={"center"}>
+        <Row justifyContent={"space-between"} alignItems={"center"} gap={1}>
           <MenuButtonContent label={label} leftIcon={leftIcon} />
-          {right && (
-            <>
-              <Space />
-              {right}
-            </>
-          )}
+          {right}
         </Row>
 
         {bottom && (
-          <>
-            <Space />
-            <Row>
-              {!fullWidthBottomContent && leftIcon && <Indent num={2} />}
-              <Row alignItems={"center"} width={"100%"}>
-                {bottom}
-              </Row>
+          <Row>
+            {!fullWidthBottomContent && leftIcon && <Indent num={2} />}
+            <Row alignItems={"center"} width={"100%"}>
+              {bottom}
             </Row>
-          </>
+          </Row>
         )}
       </Column>
       <Spacing />

diff --git a/packages/elements/src/components/ui/buttons/menu-button/MenuButtonLink.tsx b/packages/elements/src/components/ui/buttons/menu-button/MenuButtonLink.tsx
@@ -74,9 +74,11 @@ export const MenuButtonLink = forwardRef<
     className
   );
 
+  const { renderLink, selected, ...anchorProps } = linkProps;
+
   const link = renderLinkProps?.renderLink?.(
     {
-      ...linkProps,
+      ...anchorProps,
       className: linkClassName,
       href: disabled ? undefined : href,
       children: innerChildren,
@@ -87,7 +89,7 @@ export const MenuButtonLink = forwardRef<
       className={linkClassName}
       href={disabled ? undefined : href}
       ref={ref}
-      {...linkProps}
+      {...anchorProps}
     >
       {innerChildren}
     </a>

diff --git a/packages/elements/src/components/ui/chip/Chip.module.css b/packages/elements/src/components/ui/chip/Chip.module.css
@@ -73,9 +73,6 @@
     }
   }
 
-  .clickable {
-  }
-
   .close {
     padding-left: var(--swui-metrics-space);
     padding-right: var(--swui-metrics-space);

diff --git a/packages/panels/src/components/checkbox-menu/CheckboxMenu.tsx b/packages/panels/src/components/checkbox-menu/CheckboxMenu.tsx
@@ -34,7 +34,6 @@ export const CheckboxMenu: React.FC<CheckboxMenuProps> = ({
         ) : undefined
       }
       placement={"bottom-start"}
-      variant={"outlined"}
     >
       <Box display={"inline-block"}>
         <Row

diff --git a/packages/panels/src/components/nav-bar/NavBar.stories.tsx b/packages/panels/src/components/nav-bar/NavBar.stories.tsx
@@ -18,6 +18,8 @@ import {
   FlatButton,
   Icon,
   PrimaryButton,
+  stenaCog,
+  stenaSignOut,
   WithBadge,
 } from "@stenajs-webui/elements";
 import * as React from "react";
@@ -48,8 +50,6 @@ import {
 import { faAngleDoubleLeft } from "@fortawesome/free-solid-svg-icons/faAngleDoubleLeft";
 import { faThumbtack } from "@fortawesome/free-solid-svg-icons/faThumbtack";
 import { NavBarUserButton } from "./NavBarUserButton";
-import { faCog } from "@fortawesome/free-solid-svg-icons/faCog";
-import { faSignOutAlt } from "@fortawesome/free-solid-svg-icons/faSignOutAlt";
 import { NavBarNotificationButton } from "./NavBarNotificationButton";
 import { NavBarSearchField } from "./NavBarSearchField";
 
@@ -253,8 +253,8 @@ export const UserButton = () => (
             <>
               <ActionMenuItemContent label={"[email protected]"} />
               <ActionMenuSeparator />
-              <ActionMenuItem leftIcon={faCog} label={"Manage account"} />
-              <ActionMenuItem leftIcon={faSignOutAlt} label={"Logout"} />
+              <ActionMenuItem leftIcon={stenaCog} label={"Manage account"} />
+              <ActionMenuItem leftIcon={stenaSignOut} label={"Logout"} />
             </>
           )}
         />
@@ -268,8 +268,8 @@ export const UserButton = () => (
             <>
               <ActionMenuItemContent label={"[email protected]"} />
               <ActionMenuSeparator />
-              <ActionMenuItem leftIcon={faCog} label={"Manage account"} />
-              <ActionMenuItem leftIcon={faSignOutAlt} label={"Logout"} />
+              <ActionMenuItem leftIcon={stenaCog} label={"Manage account"} />
+              <ActionMenuItem leftIcon={stenaSignOut} label={"Logout"} />
             </>
           )}
         />

diff --git a/packages/panels/src/components/nav-bar/NavBarNotificationButton.module.css b/packages/panels/src/components/nav-bar/NavBarNotificationButton.module.css
@@ -1,9 +1,7 @@
 .navBarNotificationButton {
   /* Theme vars */
   --swui-nav-bar-notification-button-text-color: var(--lhds-color-ui-50);
-  --swui-nav-bar-notification-button-background-color: var(
-    --lhds-color-blue-700
-  );
+  --swui-nav-bar-notification-button-background-color: var(--lhds-color-ui-400);
   --swui-nav-bar-notification-button-background-color-hover: var(
     --lhds-color-blue-900
   );

diff --git a/packages/panels/src/components/nav-bar/NavBarNotificationButton.tsx b/packages/panels/src/components/nav-bar/NavBarNotificationButton.tsx
@@ -1,9 +1,12 @@
-import { FlatButton, FlatButtonProps } from "@stenajs-webui/elements";
+import {
+  FlatButton,
+  FlatButtonProps,
+  stenaBellFilled,
+} from "@stenajs-webui/elements";
 import * as React from "react";
 import cx from "classnames";
 import styles from "./NavBarNotificationButton.module.css";
 import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
-import { stenaBell } from "@stenajs-webui/elements";
 
 export interface NavBarNotificationButtonProps
   extends Omit<FlatButtonProps, "leftIcon" | "rightIcon" | "label"> {
@@ -20,7 +23,7 @@ export const NavBarNotificationButton: React.FC<
   className,
   labelClassName,
   iconClassName,
-  icon = stenaBell,
+  icon = stenaBellFilled,
   ...buttonProps
 }) => {
   const hasCount = count > 0;
@@ -30,8 +33,8 @@ export const NavBarNotificationButton: React.FC<
       {...buttonProps}
       leftIcon={icon}
       className={cx(
-        { [styles.unread]: unread },
-        { [styles.hasCount]: hasCount },
+        unread && styles.unread,
+        hasCount && styles.hasCount,
         styles.navBarNotificationButton,
         className
       )}

diff --git a/packages/panels/src/components/notifications/Notification.stories.tsx b/packages/panels/src/components/notifications/Notification.stories.tsx
@@ -44,7 +44,7 @@ export default {
 };
 
 export const Overview: Story<NotificationProps> = (props) => (
-  <Box width={300} background={cssColor("--lhds-color-ui-50")}>
+  <Box width={300}>
     <Notification {...props} />
   </Box>
 );
@@ -66,13 +66,13 @@ Overview.args = {
 };
 
 export const Minimal = () => (
-  <Box width={300} background={cssColor("--lhds-color-ui-50")}>
+  <Box width={300}>
     <Notification text={"You need at least some text"} />
   </Box>
 );
 
 export const Icon = () => (
-  <Box width={300} background={cssColor("--lhds-color-ui-50")}>
+  <Box width={300}>
     <Notification
       text={"Hey, listen!"}
       icon={stenaInfoMegaphone}
@@ -82,7 +82,7 @@ export const Icon = () => (
 );
 
 export const IconColour = () => (
-  <Box width={300} background={cssColor("--lhds-color-ui-50")}>
+  <Box width={300}>
     <Notification
       text={"Hey, listen!"}
       icon={stenaInfoMegaphone}
@@ -93,7 +93,7 @@ export const IconColour = () => (
 );
 
 export const LongText = () => (
-  <Box width={300} background={cssColor("--lhds-color-ui-50")}>
+  <Box width={300}>
     <Notification
       text={
         "Try to keep the text short but if it should need several rows it wraps like this"
@@ -105,7 +105,7 @@ export const LongText = () => (
 );
 
 export const Timestamp = () => (
-  <Box width={300} background={cssColor("--lhds-color-ui-50")}>
+  <Box width={300}>
     <Notification
       text={"Hey, listen!"}
       icon={stenaInfoMegaphone}
@@ -116,7 +116,7 @@ export const Timestamp = () => (
 );
 
 export const LeftContent = () => (
-  <Box width={300} background={cssColor("--lhds-color-ui-50")}>
+  <Box width={300}>
     <Notification
       text={"Custom content"}
       contentLeft={
@@ -131,7 +131,7 @@ export const LeftContent = () => (
 );
 
 export const RightContent = () => (
-  <Box width={300} background={cssColor("--lhds-color-ui-50")}>
+  <Box width={300}>
     <Notification
       text={"24 nov 06:10"}
       icon={stenaCalendarManage}
@@ -142,7 +142,7 @@ export const RightContent = () => (
 );
 
 export const Content = () => (
-  <Box width={300} background={cssColor("--lhds-color-ui-50")}>
+  <Box width={300}>
     <Notification
       text={"24 nov 06:10"}
       icon={stenaCalendarManage}
@@ -173,7 +173,7 @@ export const CloseFunction = () => {
 
   return (
     showNotification && (
-      <Box width={300} background={cssColor("--lhds-color-ui-50")}>
+      <Box width={300}>
         <Notification
           text={"Temporary timetable changes"}
           timestamp={`${formatDistance(new Date(), new Date())} ago`}

diff --git a/packages/panels/src/components/notifications/Notification.tsx b/packages/panels/src/components/notifications/Notification.tsx
@@ -1,20 +1,23 @@
-import { BoxProps, Column, Space } from "@stenajs-webui/core";
+import { Column, Space } from "@stenajs-webui/core";
 import * as React from "react";
+import { ReactNode } from "react";
 import {
   NotificationHeader,
   NotificationHeaderProps,
 } from "./NotificationHeader";
 
-export interface NotificationProps
-  extends Pick<BoxProps, "children" | "background">,
-    NotificationHeaderProps {}
+export interface NotificationProps extends NotificationHeaderProps {
+  children?: ReactNode;
+}
 
 export const Notification: React.FC<NotificationProps> = ({
   children,
-  background,
   ...headerProps
 }) => (
-  <Column background={background}>
+  <Column
+    background={"var(--lhds-color-ui-50)"}
+    borderRadius={"var(--swui-border-radius)"}
+  >
     <NotificationHeader {...headerProps} />
     {children && (
       <Column indent={3}>