@orangesk/orange-design-system 2.0.0-beta.45 → 2.0.0-beta.47

package/src/components/Tabs/Tabs.tsx

@@ -8,10 +8,6 @@ import { Tab } from "./Tab";
 import type { TabPanelProps } from "./TabPanel";
 import TabsStatic from "./Tabs.static";
 
-export const variants = ["standard", "light"] as const;
-
-export type TabsVariant = (typeof variants)[number];
-
 interface TabsProps extends React.HTMLAttributes<HTMLUListElement> {
   /** Active Tab index */
   activeTabIndex?: number;
@@ -23,8 +19,6 @@ interface TabsProps extends React.HTMLAttributes<HTMLUListElement> {
   isFullWidth?: boolean;
   /** Tabs behave as links rather than tabs */
   isLink?: boolean;
-  /** Visual variant of the tabs */
-  variant?: TabsVariant;
   /** Tab panels as children */
   children: React.ReactElement<TabPanelProps>[];
 }
@@ -36,7 +30,6 @@ const Tabs: React.FC<TabsProps> = ({
   isFullWidth,
   isLink,
   hasEqualTabWidth,
-  variant = "standard",
   children,
   ...other
 }) => {
@@ -46,80 +39,82 @@ const Tabs: React.FC<TabsProps> = ({
     CLASS_TABNAV,
     { [`${CLASS_TABNAV}--equal`]: hasEqualTabWidth },
     { [`${CLASS_TABNAV}--fullwidth`]: isFullWidth },
-    { [`${CLASS_TABNAV}--light`]: variant === "light" },
     classesTabNav,
     className,
   );
 
   const [tabListRef] = useStatic(TabsStatic);
 
-  function getTabs() {
-    return children
-      .filter((tabPanel) => tabPanel && React.isValidElement(tabPanel))
-      .map((tabPanel, i) => {
-        const isActive = i === activeTabIndex;
-        const props = tabPanel.props || {};
-        const {
-          renderTab = undefined,
-          id,
-          isDisabled,
-          tab,
-          href,
-        } = props as TabPanelProps;
-
-        // Generate ID if not provided
-        const tabId = id || `tab-${i}`;
-
-        if (!renderTab) {
-          return (
-            <Tab
-              key={tabId}
-              controls={!href ? tabId : ""}
-              href={href}
-              isDisabled={isDisabled}
-              isActive={isActive}
-            >
-              {tab}
-            </Tab>
-          );
-        }
+  const tabPanels = React.Children.toArray(children).filter(
+    (tabPanel): tabPanel is React.ReactElement<TabPanelProps> =>
+      React.isValidElement(tabPanel),
+  );
 
-        const renderedTab = renderTab(props as TabPanelProps);
-        return React.cloneElement(renderedTab, {
-          key: tabId,
-          isActive,
-        } as React.HTMLAttributes<HTMLElement>);
-      });
+  function getTabs() {
+    return tabPanels.map((tabPanel, i) => {
+      const isActive = i === activeTabIndex;
+      const props = tabPanel.props || {};
+      const {
+        renderTab = undefined,
+        id,
+        isDisabled,
+        tab,
+        href,
+      } = props as TabPanelProps;
+
+      // Generate ID if not provided
+      const tabId = id || `tab-${i}`;
+
+      if (!renderTab) {
+        return (
+          <Tab
+            key={tabId}
+            controls={!href ? tabId : ""}
+            href={href}
+            isDisabled={isDisabled}
+            isActive={isActive}
+          >
+            {tab}
+          </Tab>
+        );
+      }
+
+      const renderedTab = renderTab(props as TabPanelProps);
+      return React.cloneElement(renderedTab, {
+        key: tabId,
+        isActive,
+      } as React.HTMLAttributes<HTMLElement>);
+    });
   }
 
   function getPanels() {
-    return children
-      .filter((tabPanel) => tabPanel && React.isValidElement(tabPanel))
-      .map((tabPanel, i) => {
-        const isActive = i === activeTabIndex;
-        const props = tabPanel.props || {};
-        const { id } = props;
-        const tabId = id || `tab-${i}`;
-        return React.cloneElement(tabPanel, {
-          key: tabId,
-          isActive,
-          tab: undefined,
-        } as Partial<TabPanelProps>);
-      });
+    return tabPanels.map((tabPanel, i) => {
+      const isActive = i === activeTabIndex;
+      const props = tabPanel.props || {};
+      const { id } = props;
+      const tabId = id || `tab-${i}`;
+      return React.cloneElement(tabPanel, {
+        key: tabId,
+        isActive,
+        tab: undefined,
+      } as Partial<TabPanelProps>);
+    });
   }
 
   return (
     <>
-      <ul
-        className={tabNavClasses}
-        role={isLink ? "navigation" : "tablist"}
-        ref={tabListRef}
-        data-tabs={isLink ? undefined : "true"}
-        {...other}
-      >
-        {getTabs()}
-        {isFullWidth && <li role="presentation" className="tab-list__hr" />}
-      </ul>
+      <div className="tab-list__viewport">
+        <ul
+          className={tabNavClasses}
+          role={isLink ? "navigation" : "tablist"}
+          ref={tabListRef}
+          data-tabs={isLink ? undefined : "true"}
+          {...other}
+        >
+          {getTabs()}
+          {isFullWidth && <li role="presentation" className="tab-list__hr" />}
+        </ul>
+      </div>
       {!isLink ? getPanels() : null}
     </>
   );

package/src/components/Tabs/styles/config.scss

@@ -1,8 +1,12 @@
+@use "../../../styles/tokens/base";
 @use "../../../styles/tokens/space";
 @use "../../../styles/tools/convert";
 
 $outline-width: convert.to-rem(2px);
-$negative-outline-width: $outline-width * -1;
+$focusring-space: convert.to-rem(
+  base.$focusring-width + base.$focusring-offset
+);
+$negative-outline-width: $focusring-space * -1;
 
 $tablist-spacing: (
   margin: $negative-outline-width $negative-outline-width
@@ -10,50 +14,39 @@ $tablist-spacing: (
       space.get() + $negative-outline-width,
     )
     $negative-outline-width,
-  padding: $outline-width,
+  padding: $focusring-space,
 );
 
 $tab: (
   default: (
     color: var(--color-text-default),
-    box-shadow: inset 0 -2px 0 0 var(--color-border-contrast),
+    background-color: transparent,
+    box-shadow: inset 0 -1px 0 0 var(--color-surface-moderate),
   ),
   active: (
-    color: var(--color-text-accent),
+    color: var(--color-text-default),
+    background-color: var(--color-fill-moderate),
     box-shadow: (
-      inset -2px 0 0 0 var(--color-border-contrast),
-      inset 0 2px 0 0 var(--color-border-contrast),
-      inset 2px 0 0 0 var(--color-border-contrast),
+      inset 0 4px 0 0 var(--color-border-accent),
+      inset 0 -1px 0 0 var(--color-fill-moderate),
     ),
   ),
   hover: (
     color: var(--color-text-accent),
+    background-color: transparent,
+    box-shadow: inset 0 -1px 0 0 var(--color-surface-moderate),
   ),
   disabled: (
-    color: var(--color-surface-moderate),
-  ),
-);
-
-$tab-light: (
-  default: (
-    box-shadow: none "!important",
-  ),
-  active: (
-    box-shadow: inset 0 -4px 0 0 var(--color-border-accent) "!important",
-  ),
-  hover: (
-    box-shadow: none "!important",
-  ),
-  disabled: (
-    box-shadow: none "!important",
+    color: var(--color-text-disabled),
+    background-color: transparent,
   ),
 );
 
 $tab-sizes: (
   default: (
-    padding: space.get("small") space.get(),
+    padding: convert.to-rem(15px) convert.to-rem(20px),
   ),
   large: (
-    padding: space.get("small") space.get(),
+    padding: convert.to-rem(20px),
   ),
 );

package/src/components/Tabs/styles/mixins.scss

@@ -1,10 +1,61 @@
 @use "./config";
 @use "../../../styles/tokens/base";
 @use "../../../styles/tokens/space";
+@use "../../../styles/tools/convert";
 @use "../../../styles/tools/generate";
 
-@mixin list-base($spacing: config.$tablist-spacing) {
+$tab-focus-radius: convert.to-rem(5px);
+$tab-focusring-space: convert.to-rem(
+  base.$focusring-width + base.$focusring-offset
+);
+$tab-overflow-fade-width: convert.to-rem(72px);
+
+@mixin list-viewport {
   position: relative;
+  overflow: hidden;
+  padding: $tab-focusring-space $tab-focusring-space 0;
+
+  &::before,
+  &::after {
+    z-index: 2;
+    width: $tab-overflow-fade-width;
+    content: "";
+    position: absolute;
+    top: 0;
+    height: 100%;
+    pointer-events: none;
+    opacity: 0;
+    transition: opacity 0.2s ease;
+  }
+
+  &::before {
+    left: 0;
+    background: linear-gradient(
+      to left,
+      transparent 0%,
+      var(--color-background-primary) 100%
+    );
+  }
+
+  &::after {
+    right: 0;
+    background: linear-gradient(
+      to right,
+      transparent 0%,
+      var(--color-background-primary) 100%
+    );
+  }
+
+  &.has-left-overflow::before {
+    opacity: 1;
+  }
+
+  &.has-right-overflow::after {
+    opacity: 1;
+  }
+}
+
+@mixin list-base($spacing: config.$tablist-spacing) {
   display: flex;
   overflow-x: auto;
   overflow-y: visible;
@@ -16,6 +67,10 @@
 
 @mixin list-equal {
   flex-grow: 1;
+
+  .tab-list__tab {
+    text-align: center;
+  }
 }
 
 @mixin list-item {
@@ -28,54 +83,68 @@
   flex: 1 1 auto;
   display: flex;
   flex-flow: column;
+  justify-content: center;
   height: initial;
   position: relative;
-  font-weight: 600;
+  font-weight: 700;
   background: transparent;
   border-width: 0;
   text-align: left;
+  white-space: nowrap;
+  cursor: pointer;
+
+  &::after {
+    content: "";
+    position: absolute;
+    inset: $tab-focusring-space * -1;
+    border: base.$focus-outline;
+    border-radius: calc(#{$tab-focus-radius} + #{$tab-focusring-space});
+    opacity: 0;
+    pointer-events: none;
+  }
 
   &:focus {
     z-index: 1;
+    outline-width: 0;
+    outline-color: transparent;
   }
 
-  @include base.focusring-flush;
-}
+  &:focus::after {
+    opacity: 1;
+  }
 
-@mixin color-variant($config: config.$tab) {
-  @include generate.css-map($config, "default");
+  &:focus-visible {
+    outline-width: 0;
+    outline-color: transparent;
+  }
 
-  &[aria-selected="true"] {
-    @include generate.css-map($config, "active");
+  &:focus-visible::after {
+    opacity: 1;
   }
 
-  &:hover {
-    @include generate.css-map(config.$tab, "hover");
+  &:focus:not(:focus-visible)::after {
+    opacity: 0;
   }
 
-  &[aria-disabled="true"] {
-    @include generate.css-map(config.$tab, "disabled");
+  &[aria-selected="true"] {
+    z-index: 1;
   }
 }
 
-@mixin tab-light {
-  @include generate.css-map(config.$tab-light, "default");
-
-  &:hover {
-    @include generate.css-map(config.$tab-light, "hover");
-  }
+@mixin color-variant($config: config.$tab) {
+  @include generate.css-map($config, "default");
 
   &[aria-selected="true"] {
-    @include generate.css-map(config.$tab-light, "active");
+    @include generate.css-map($config, "active");
   }
 
-  &[aria-disabled="true"] {
-    @include generate.css-map(config.$tab-light, "disabled");
+  &:hover:not([aria-selected="true"]):not([aria-disabled="true"]) {
+    @include generate.css-map(config.$tab, "hover");
   }
-}
 
-@mixin tab-centered {
-  align-items: center;
+  &[aria-disabled="true"]:not([aria-selected="true"]) {
+    @include generate.css-map(config.$tab, "disabled");
+  }
 }
 
 @mixin tab-size($size, $config: config.$tab-sizes) {
@@ -85,10 +154,6 @@
 @mixin underline {
   flex: 1 1 auto;
   max-width: none;
-  box-shadow: inset 0 -2px 0 0 var(--color-border-contrast);
-}
-
-@mixin underline-light {
   box-shadow: inset 0 -1px 0 0 var(--color-surface-moderate);
 }
 

package/src/components/Tabs/styles/style.scss

@@ -5,6 +5,10 @@
 @use "../../../styles/typography/mixins" as typography;
 
 @layer components {
+  .tab-list__viewport {
+    @include mixins.list-viewport;
+  }
+
   .tab-list {
     $this: &;
 
@@ -21,10 +25,6 @@
       #{$this}--equal & {
         @include mixins.list-equal-item;
       }
-
-      #{$this}--light & {
-        @include mixins.underline-light;
-      }
     }
 
     &__tab {
@@ -36,21 +36,10 @@
           @include mixins.tab-size($size);
         }
       }
-      #{$this}--light & {
-        @include mixins.tab-light;
-      }
-
-      #{$this}--light#{$this}--equal & {
-        @include mixins.tab-centered;
-      }
     }
 
     &__hr {
       @include mixins.underline;
-
-      #{$this}--light & {
-        @include mixins.underline-light;
-      }
     }
   }
 }

package/src/components/Tabs/tests/Tabs.unit.test.jsx

@@ -2,6 +2,7 @@ import { fireEvent, render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { TabPanel } from "../TabPanel";
 import { Tabs } from "../Tabs";
+import TabsStatic from "../Tabs.static";
 
 const arr = [1, 2, 3, 4];
 
@@ -98,6 +99,116 @@ describe("rendering Tabs", () => {
         }
       }
     });
+
+    it("toggles left and right overflow classes based on scroll position", () => {
+      const { getByTestId } = render(<TabsExample />);
+      const tabList = getByTestId("test-id");
+      const viewport = tabList.parentElement;
+      const tabsStatic = TabsStatic.getInstance(tabList);
+
+      let scrollLeft = 0;
+      Object.defineProperty(tabList, "clientWidth", {
+        configurable: true,
+        value: 200,
+      });
+      Object.defineProperty(tabList, "scrollWidth", {
+        configurable: true,
+        value: 500,
+      });
+      Object.defineProperty(tabList, "scrollLeft", {
+        configurable: true,
+        get: () => scrollLeft,
+        set: (value) => {
+          scrollLeft = value;
+        },
+      });
+
+      tabsStatic?.update();
+
+      expect(viewport).not.toHaveClass("has-left-overflow");
+      expect(viewport).toHaveClass("has-right-overflow");
+
+      scrollLeft = 300;
+      fireEvent.scroll(tabList);
+
+      expect(viewport).toHaveClass("has-left-overflow");
+      expect(viewport).not.toHaveClass("has-right-overflow");
+    });
+
+    it("centers clicked active tab inside the scroll container", () => {
+      const { getByTestId, container } = render(<TabsExample />);
+      const tabList = getByTestId("test-id");
+      const secondTab = container.querySelector(
+        'button[aria-controls="tabpanel-2"]',
+      );
+      const scrollToSpy = vi.fn();
+
+      Object.defineProperty(tabList, "clientWidth", {
+        configurable: true,
+        value: 200,
+      });
+      Object.defineProperty(tabList, "scrollWidth", {
+        configurable: true,
+        value: 600,
+      });
+      Object.defineProperty(tabList, "scrollLeft", {
+        configurable: true,
+        value: 180,
+        writable: true,
+      });
+      Object.defineProperty(tabList, "getBoundingClientRect", {
+        configurable: true,
+        value: () => ({
+          top: 0,
+          bottom: 0,
+          left: 0,
+          right: 200,
+          width: 200,
+          height: 0,
+          x: 0,
+          y: 0,
+          toJSON: () => ({}),
+        }),
+      });
+      Object.defineProperty(secondTab, "getBoundingClientRect", {
+        configurable: true,
+        value: () => ({
+          top: 0,
+          bottom: 0,
+          left: 40,
+          right: 120,
+          width: 80,
+          height: 0,
+          x: 40,
+          y: 0,
+          toJSON: () => ({}),
+        }),
+      });
+      tabList.scrollTo = scrollToSpy;
+
+      fireEvent.click(secondTab);
+
+      expect(scrollToSpy).toHaveBeenCalledWith({
+        left: 160,
+        behavior: "smooth",
+      });
+    });
+
+    it("does not center on pointer-style focus before click activation", () => {
+      const { getByTestId, container } = render(<TabsExample />);
+      const tabList = getByTestId("test-id");
+      const secondTab = container.querySelector(
+        'button[aria-controls="tabpanel-2"]',
+      );
+      const scrollToSpy = vi.fn();
+
+      secondTab.matches = vi.fn((selector) => selector !== ":focus-visible");
+      tabList.scrollTo = scrollToSpy;
+
+      fireEvent.focus(secondTab);
+
+      expect(scrollToSpy).not.toHaveBeenCalled();
+    });
   });
   describe("checking fireEvents", () => {
     it("click in disabled tab button doesnt cause change", () => {

package/src/styles/base/globals.scss

@@ -106,6 +106,8 @@ button:not(:disabled) {
 
 a {
   text-decoration: none;
+  text-underline-offset: 2px;
+  text-decoration-thickness: auto;
 }
 
 // stylelint-disable-next-line no-descending-specificity

package/src/styles/shame.scss

@@ -1,8 +1,8 @@
 @layer utilities {
   /**
-* Resets for megamenu and footer
-* This reset is required due to default list spacing in ods 1 and will be removed once megamenu and footer components are migrated to 1.
-**/
+  * Resets for megamenu and footer
+  * This reset is required due to default list spacing in ods 1 and will be removed once megamenu and footer components are migrated to 1.
+  **/
   .osk-footer-menu,
   .mm-header ul,
   .megamenu-header ul {
@@ -14,4 +14,17 @@
       margin-bottom: 0;
     }
   }
+
+  /**
+  * Fixes for header and megamenu when modal is open
+  * This is required to prevent the header and megamenu from shifting when a modal is open due to scrollbar disappearance.
+  * This is a temporary fix and will be removed once the header and megamenu components are migrated to ods2
+  **/
+  body.has-modal {
+    .mm-header.is-sticky,
+    .megamenu-header.is-sticky,
+    [data-megamenu].is-sticky:not(.megamenu) {
+      padding-right: var(--ods-modal-scrollbar-width, 0px);
+    }
+  }
 }

package/src/styles/tools/convert.scss

@@ -3,10 +3,18 @@
 @use "../tokens/base";
 
 @function to-em($size, $font-size: base.$font-size) {
+  @if $size == 0 {
+    @return 0;
+  }
+
   @return math.div($size, $font-size) * 1em;
 }
 
 @function to-rem($size, $base: base.$font-size) {
+  @if $size == 0 {
+    @return 0;
+  }
+
   @return math.div($size, $base) * 1rem;
 }
 

package/src/styles/utilities/horizontal-scroll.scss

@@ -15,14 +15,16 @@
 
     @supports selector(::-webkit-scrollbar) {
       &::-webkit-scrollbar {
-        height: convert.to-rem(6px);
+        height: convert.to-rem(8px);
         appearance: none;
-        background-color: var(--color-surface-moderate);
+        background-color: transparent;
         border-radius: 99px;
       }
 
       &::-webkit-scrollbar-track {
+        border: convert.to-rem(1px) solid transparent;
         background-color: var(--color-surface-moderate);
+        background-clip: content-box;
         border-radius: 99px;
       }
 
@@ -30,12 +32,15 @@
         opacity: 1;
         background-color: var(--color-fill-contrast);
         border-radius: 99px;
+        border: convert.to-rem(1px) solid transparent;
+        background-clip: content-box;
       }
 
       &:hover::-webkit-scrollbar-thumb,
       &:active::-webkit-scrollbar-thumb,
       &::-webkit-scrollbar-thumb:hover,
       &::-webkit-scrollbar-thumb:active {
+        border-width: 0;
         background-color: var(--color-fill-secondary) !important;
       }
     }

package/src/styles/utilities/text.scss

@@ -29,7 +29,6 @@
 
   .underline {
     text-decoration: underline !important;
-    text-underline-offset: 0.1em !important;
   }
 
   .no-underline {