- Remove all usage of FA icons in components, except for sort order (…

…we don't have equivalent Stena icons yet). - Update peer dependencies to FA to be `@fortawesome/fontawesome-svg-core` instead of the icon library packages. - Fix gap and width of month picker and year picker, no longer too narrow for increased width of the buttons. - Update bread crumbs as per design. Icon stenaLineSlash is not correct, but fixed icon is not included in this update. - Horizontal padding in buttons is now 24px if they only have a label, 16px otherwise. - Fixed height of standard size button, is now 32px. - Checkbox and Radiobutton now uses modern-blue instead of core-blue, as per design. - Update PageHeader with new design, which is aligned with NavBar. - Inputs now have border radius 4px, as per design.
StenaIT · Oct 2, 2023 · 207ab4a · 207ab4a
1 parent a74c3bb
commit 207ab4a
Show file tree

Hide file tree

Showing 46 changed files with 287 additions and 230 deletions.
diff --git a/packages/calendar/src/components/input-types/date-range-input/DateRangeInput.tsx b/packages/calendar/src/components/input-types/date-range-input/DateRangeInput.tsx
@@ -12,8 +12,11 @@ import {
   defaultCalendarTheme,
 } from "../../calendar/CalendarTheme";
 import { useDateRangeInput } from "./hooks/UseDateRangeInput";
-import { Icon, stenaCalendar } from "@stenajs-webui/elements";
-import { faLongArrowAltRight } from "@fortawesome/free-solid-svg-icons/faLongArrowAltRight";
+import {
+  Icon,
+  stenaArrowWideRight,
+  stenaCalendar,
+} from "@stenajs-webui/elements";
 import { CalendarWithMonthSwitcher } from "../../../features/month-switcher/CalendarWithMonthSwitcher";
 import { CalendarPanelType } from "../../../features/calendar-with-month-year-pickers/CalendarPanelType";
 import { Popover } from "@stenajs-webui/tooltip";
@@ -154,7 +157,7 @@ export function DateRangeInput<T>({
         />
         <Space />
         <Icon
-          icon={faLongArrowAltRight}
+          icon={stenaArrowWideRight}
           color={cssColor("--lhds-color-ui-500")}
           size={14}
         />

diff --git a/packages/calendar/src/features/month-picker/MonthPicker.tsx b/packages/calendar/src/features/month-picker/MonthPicker.tsx
@@ -22,9 +22,9 @@ export const MonthPicker: React.FC<MonthPickerProps> = ({
   locale = enGB,
 }) => {
   return (
-    <Column>
+    <Column gap={1}>
       {monthMatrix.map((monthRow) => (
-        <Row key={monthRow[0]}>
+        <Row key={monthRow[0]} gap={1}>
           {monthRow.map((month) => (
             <MonthPickerCell
               key={month}

diff --git a/packages/calendar/src/features/month-picker/MonthPickerCell.tsx b/packages/calendar/src/features/month-picker/MonthPickerCell.tsx
@@ -24,7 +24,7 @@ export const MonthPickerCell: React.FC<Props> = ({
   }, [locale, month]);
 
   return (
-    <Row width={"64px"} justifyContent={"center"} spacing={0.5} indent={0.5}>
+    <Row justifyContent={"center"}>
       {value === month ? (
         <PrimaryButton
           label={label}

diff --git a/packages/calendar/src/features/month-switcher/CalendarWithMonthSwitcher.tsx b/packages/calendar/src/features/month-switcher/CalendarWithMonthSwitcher.tsx
@@ -83,30 +83,20 @@ export function CalendarWithMonthSwitcher<T>({
               <Row alignItems={"center"}>
                 {!hideYearPagination && (
                   <FlatButton
-                    size={"small"}
                     onClick={prevYear}
                     leftIcon={stenaAngleLeftDouble}
                   />
                 )}
                 <Space />
-                <FlatButton
-                  size={"small"}
-                  onClick={prevMonth}
-                  leftIcon={stenaAngleLeft}
-                />
+                <FlatButton onClick={prevMonth} leftIcon={stenaAngleLeft} />
               </Row>
             }
             headerRightContent={
               <Row alignItems={"center"}>
-                <FlatButton
-                  size={"small"}
-                  onClick={nextMonth}
-                  leftIcon={stenaAngleRight}
-                />
+                <FlatButton onClick={nextMonth} leftIcon={stenaAngleRight} />
                 <Space />
                 {!hideYearPagination && (
                   <FlatButton
-                    size={"small"}
                     onClick={nextYear}
                     leftIcon={stenaAngleRightDouble}
                   />

diff --git a/packages/calendar/src/features/month-switcher/MonthSwitcherBelow.tsx b/packages/calendar/src/features/month-switcher/MonthSwitcherBelow.tsx
@@ -2,13 +2,13 @@ import { Indent, Row, Space } from "@stenajs-webui/core";
 import {
   FlatButton,
   stenaAngleLeft,
+  stenaAngleLeftDouble,
   stenaAngleRight,
+  stenaAngleRightDouble,
 } from "@stenajs-webui/elements";
 import * as React from "react";
-import { CalendarTheme } from "../../components/calendar/CalendarTheme";
-import { faAngleDoubleLeft } from "@fortawesome/free-solid-svg-icons/faAngleDoubleLeft";
-import { faAngleDoubleRight } from "@fortawesome/free-solid-svg-icons/faAngleDoubleRight";
 import { ReactNode } from "react";
+import { CalendarTheme } from "../../components/calendar/CalendarTheme";
 
 export interface WithMonthSwitcherBelowProps {
   theme: CalendarTheme;
@@ -30,13 +30,13 @@ export const WithMonthSwitcherBelow: React.FC<WithMonthSwitcherBelowProps> = ({
     {children}
     <Indent>
       <Row>
-        <FlatButton onClick={prevYear} leftIcon={faAngleDoubleLeft} />
+        <FlatButton onClick={prevYear} leftIcon={stenaAngleLeftDouble} />
         <Space />
         <FlatButton onClick={prevMonth} leftIcon={stenaAngleLeft} />
         <Indent num={2} />
         <FlatButton onClick={nextMonth} leftIcon={stenaAngleRight} />
         <Space />
-        <FlatButton onClick={nextYear} leftIcon={faAngleDoubleRight} />
+        <FlatButton onClick={nextYear} leftIcon={stenaAngleRightDouble} />
       </Row>
     </Indent>
     <Space />

diff --git a/packages/calendar/src/features/year-picker/YearPicker.tsx b/packages/calendar/src/features/year-picker/YearPicker.tsx
@@ -3,9 +3,11 @@ import { useEffect, useMemo, useState } from "react";
 import { ValueAndOnValueChangeProps } from "@stenajs-webui/forms";
 import { Column, Row } from "@stenajs-webui/core";
 import { YearPickerCell } from "./YearPickerCell";
-import { FlatButton } from "@stenajs-webui/elements";
-import { faCaretLeft } from "@fortawesome/free-solid-svg-icons/faCaretLeft";
-import { faCaretRight } from "@fortawesome/free-solid-svg-icons/faCaretRight";
+import {
+  FlatButton,
+  stenaArrowLeft,
+  stenaArrowRight,
+} from "@stenajs-webui/elements";
 import { chunk, range } from "lodash";
 
 export interface YearPickerProps extends ValueAndOnValueChangeProps<number> {
@@ -37,13 +39,13 @@ export const YearPicker: React.FC<YearPickerProps> = ({
     <Row>
       <Column justifyContent={"center"}>
         <FlatButton
-          leftIcon={faCaretLeft}
+          leftIcon={stenaArrowLeft}
           onClick={() => setLastYear(lastYear - 3)}
         />
       </Column>
-      <Column>
+      <Column gap={1}>
         {yearRows.map((yearRow) => (
-          <Row key={yearRow[0]}>
+          <Row key={yearRow[0]} gap={1}>
             {yearRow.map((year) => (
               <YearPickerCell
                 key={year}
@@ -57,7 +59,7 @@ export const YearPicker: React.FC<YearPickerProps> = ({
       </Column>
       <Column justifyContent={"center"}>
         <FlatButton
-          leftIcon={faCaretRight}
+          leftIcon={stenaArrowRight}
           onClick={() => setLastYear(lastYear + 3)}
         />
       </Column>

diff --git a/packages/calendar/src/features/year-picker/YearPickerCell.tsx b/packages/calendar/src/features/year-picker/YearPickerCell.tsx
@@ -14,7 +14,7 @@ export const YearPickerCell: React.FC<Props> = ({
 }) => {
   const label = String(year);
   return (
-    <Row width={"64px"} justifyContent={"center"} spacing={0.5} indent={0.5}>
+    <Row justifyContent={"center"}>
       {value === year ? (
         <PrimaryButton label={label} onClick={() => onValueChange?.(year)} />
       ) : (

diff --git a/packages/elements/src/components/ui/action-menu/ActionMenu.stories.tsx b/packages/elements/src/components/ui/action-menu/ActionMenu.stories.tsx
@@ -1,4 +1,3 @@
-import { faSave } from "@fortawesome/free-solid-svg-icons/faSave";
 import { useBoolean, useTimeoutState } from "@stenajs-webui/core";
 import { action } from "@storybook/addon-actions";
 import { ActionMenuItem } from "./ActionMenuItem";
@@ -144,7 +143,7 @@ export const Standard = () => (
 );
 
 export const Outlined = () => (
-  <ActionMenu width={200}>
+  <ActionMenu width={220}>
     <ActionMenuItem
       id={"action-menu-item-open"}
       label={"Open"}
@@ -201,15 +200,15 @@ export const AsyncItem = () => {
   };
 
   return (
-    <ActionMenu width={200}>
+    <ActionMenu width={220}>
       <ActionMenuItem
         id={"action-menu-item-open"}
         label={"Open"}
         onClick={action("Opened")}
       />
       <ActionMenuItem
         label={saved ? "Saved" : loading ? "Saving..." : "Save"}
-        leftIcon={faSave}
+        leftIcon={stenaSave}
         onClick={start}
       />
       <ActionMenuItem
@@ -220,7 +219,7 @@ export const AsyncItem = () => {
             ? "Saving with danger..."
             : "Save dangerously"
         }
-        leftIcon={isDangerOn ? faSave : faSadCry}
+        leftIcon={isDangerOn ? stenaSave : faSadCry}
         onClick={startDanger}
         variant={"danger"}
         disabled={!isDangerOn}
@@ -240,7 +239,7 @@ export const AsyncItem = () => {
             ? "Saving with success..."
             : "Save successfully"
         }
-        leftIcon={isSuccessOn ? faSave : faSadCry}
+        leftIcon={isSuccessOn ? stenaSave : faSadCry}
         onClick={startSuccess}
         disabled={!isSuccessOn}
       />

diff --git a/packages/elements/src/components/ui/bread-crumbs/BreadCrumbs.tsx b/packages/elements/src/components/ui/bread-crumbs/BreadCrumbs.tsx
@@ -2,7 +2,7 @@ import { Indent, Row } from "@stenajs-webui/core";
 import { cssColor } from "@stenajs-webui/theme";
 import * as React from "react";
 import { Children, ReactNode } from "react";
-import { stenaArrowRight } from "../../../icons/ui/IconsUi";
+import { stenaLineSlash } from "../../../icons/ui/IconsUi";
 import { Icon } from "../icon/Icon";
 
 export interface BreadCrumbsProps {
@@ -19,7 +19,7 @@ export const BreadCrumbs: React.FC<BreadCrumbsProps> = ({ children }) => {
               {index > 0 && (
                 <Indent num={2}>
                   <Icon
-                    icon={stenaArrowRight}
+                    icon={stenaLineSlash}
                     size={8}
                     color={cssColor("--lhds-color-ui-700")}
                   />

diff --git a/packages/elements/src/components/ui/bread-crumbs/Crumb.module.css b/packages/elements/src/components/ui/bread-crumbs/Crumb.module.css
@@ -1,10 +1,10 @@
 .crumb {
-  font-size: 1rem;
+  font-size: 1.2rem;
   font-family: var(--swui-font-primary);
   font-weight: var(--swui-font-weight-text-bold);
   letter-spacing: 0.1rem;
   text-decoration: none;
-  color: var(--swui-text-action-color);
+  color: var(--lhds-color-ui-500);
 
   &:not(:last-of-type) {
     cursor: pointer;

diff --git a/packages/elements/src/components/ui/buttons/Button.module.css b/packages/elements/src/components/ui/buttons/Button.module.css
@@ -6,8 +6,11 @@
   --swui-button-text-color: var(--swui-white);
   --swui-button-text-decoration: none;
   --swui-button-letter-spacing: var(--swui-field-letter-spacing);
-  --swui-button-padding-vertical: calc(var(--swui-metrics-spacing) - 3px);
-  --swui-button-padding-horizontal: calc(var(--swui-metrics-spacing) * 3 - 1px);
+  --swui-button-padding-vertical: calc(var(--swui-metrics-spacing) - 1px);
+  --swui-button-padding-horizontal: calc(var(--swui-metrics-spacing) * 2 - 1px);
+  --swui-button-padding-horizontal-label-only: calc(
+    var(--swui-metrics-spacing) * 3 - 1px
+  );
 
   /* Text */
   --swui-button-text-color-focus: var(--swui-button-text-color);
@@ -154,6 +157,11 @@
   align-items: center;
   justify-content: center;
 
+  &.labelOnly {
+    padding: var(--swui-button-padding-vertical)
+      var(--swui-button-padding-horizontal-label-only);
+  }
+
   &.iconButton {
     --current-icon-height: var(--swui-button-icon-height-medium-icon-only);
 
@@ -193,6 +201,9 @@
     --current-line-height: 1.6rem;
     --swui-button-padding-vertical: calc(var(--swui-metrics-space) / 2 - 1px);
     --swui-button-padding-horizontal: calc(var(--swui-metrics-space) - 1px);
+    --swui-button-padding-horizontal-label-only: calc(
+      var(--swui-metrics-space) * 2 - 1px
+    );
     --current-text-size: 1.2rem;
     --current-icon-height: var(--swui-button-icon-height-small);
 
@@ -203,8 +214,11 @@
 
   &.large {
     --current-line-height: 2.4rem;
-    --swui-button-padding-vertical: calc(var(--swui-metrics-space) * 2 - 4px);
+    --swui-button-padding-vertical: calc(var(--swui-metrics-space) * 2 - 5px);
     --swui-button-padding-horizontal: calc(var(--swui-metrics-space) * 3 - 1px);
+    --swui-button-padding-horizontal-label-only: calc(
+      var(--swui-metrics-space) * 3 - 1px
+    );
     --current-text-size: 1.8rem;
     --current-icon-height: var(--swui-button-icon-height-large);
 
@@ -216,6 +230,9 @@
   &.larger {
     --swui-button-padding-vertical: 24px;
     --swui-button-padding-horizontal: calc(var(--swui-metrics-space) * 6 - 1px);
+    --swui-button-padding-horizontal-label-only: calc(
+      var(--swui-metrics-space) * 6 - 1px
+    );
 
     --current-text-size: 2rem;
     --current-line-height: 2.4rem;

diff --git a/packages/elements/src/components/ui/buttons/PrimaryButton.tsx b/packages/elements/src/components/ui/buttons/PrimaryButton.tsx
@@ -56,6 +56,8 @@ export const PrimaryButton = forwardRef<HTMLButtonElement, PrimaryButtonProps>(
         (loading && loadingLabel)
     );
 
+    const labelOnly = hasLabel && !left && !leftIcon && !right && !rightIcon;
+
     return (
       <Button
         ref={ref}
@@ -65,6 +67,7 @@ export const PrimaryButton = forwardRef<HTMLButtonElement, PrimaryButtonProps>(
           styles[size],
           styles[variant],
           !hasLabel && styles.iconButton,
+          labelOnly && styles.labelOnly,
           className
         )}
         disabled={disabled}

diff --git a/packages/elements/src/components/ui/buttons/menu-button/MenuButton.stories.tsx b/packages/elements/src/components/ui/buttons/menu-button/MenuButton.stories.tsx
@@ -3,11 +3,11 @@ import { MenuButtonLink } from "./MenuButtonLink";
 import { MenuButtonGroupBox } from "./MenuButtonGroupBox";
 import { Column, Text, useBoolean } from "@stenajs-webui/core";
 import * as React from "react";
-import {
-  faChartBar,
-  faExternalLinkAlt,
-} from "@fortawesome/free-solid-svg-icons";
 import cx from "classnames";
+import {
+  stenaExternalLink,
+  stenaStatisticsBar,
+} from "../../../../icons/ui/IconsUi";
 
 export default {
   title: "elements/MenuButton",
@@ -23,7 +23,7 @@ export const Overview = () => {
     <Column width={"230px"} gap>
       <MenuButton label={"Just a button"} />
 
-      <MenuButton label={"I have icon"} leftIcon={faChartBar} />
+      <MenuButton label={"I have icon"} leftIcon={stenaStatisticsBar} />
 
       <MenuButton label={"I am selected"} selected />
 
@@ -35,22 +35,22 @@ export const Overview = () => {
         label={"Link to google"}
         href={"https://www.google.com"}
         target={"_blank"}
-        leftIcon={faExternalLinkAlt}
+        leftIcon={stenaExternalLink}
       />
 
       <MenuButtonLink
         label={"Selected link"}
         href={"https://www.google.com"}
         target={"_blank"}
         selected
-        leftIcon={faExternalLinkAlt}
+        leftIcon={stenaExternalLink}
       />
 
       <MenuButtonLink
         label={"I am custom link"}
         href={"https://www.google.com"}
         target={"_blank"}
-        leftIcon={faExternalLinkAlt}
+        leftIcon={stenaExternalLink}
         renderLink={({ className, children, ...anchorProps }) => (
           <a
             {...anchorProps}
@@ -66,7 +66,7 @@ export const Overview = () => {
         label={"I am custom selected"}
         href={"https://www.google.com"}
         target={"_blank"}
-        leftIcon={faExternalLinkAlt}
+        leftIcon={stenaExternalLink}
         renderLink={(
           { className, children, ...anchorProps },
           activeClassName