@orangesk/orange-design-system 2.0.0-beta.8 → 2.0.0

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

@@ -1,9 +1,9 @@
-@use 'sass:math' as math;
-@use '../../../styles/tokens/base';
-@use '../../../styles/tools/generate';
-@use '../../../styles/tools/convert';
-@use '../../../styles/tools/layout';
-@use './config';
+@use "sass:math" as math;
+@use "../../../styles/tokens/base";
+@use "../../../styles/tools/generate";
+@use "../../../styles/tools/convert";
+@use "../../../styles/tools/layout";
+@use "./config";
 
 @mixin tooltip($config: config.$layout, $offset: config.$offset) {
   position: absolute;
@@ -18,7 +18,7 @@
   }
 
   @each $direction, $opposite in config.$direction-opposites {
-    &[data-popper-placement^='#{$direction}'] {
+    &[data-popper-placement^="#{$direction}"] {
       padding-#{$opposite}: $offset;
     }
   }
@@ -42,13 +42,14 @@
   $size-unitless: convert.strip-units($size);
   $hypotenuse: math.sqrt(
       math.pow($size-unitless, 2) + math.pow($size-unitless, 2)
-    ) * 1rem;
+    ) *
+    1rem;
   $arrow-position: $offset - math.div($hypotenuse, 4);
 
   display: block;
 
   &::before {
-    content: '';
+    content: "";
     display: block;
     width: $size;
     height: $size;
@@ -59,13 +60,13 @@
   }
 
   @each $direction, $opposite in config.$direction-opposites {
-    [data-popper-placement^='#{$direction}'] & {
+    [data-popper-placement^="#{$direction}"] & {
       #{$opposite}: $arrow-position;
     }
   }
 
   @each $direction, $reset-directions in config.$direction-border-color-reset {
-    [data-popper-placement^='#{$direction}'] &:before {
+    [data-popper-placement^="#{$direction}"] &:before {
       @each $reset-direction in $reset-directions {
         border-#{$reset-direction}-color: transparent;
       }
@@ -80,7 +81,7 @@
   @include base.focusring-round;
 
   &::before {
-    content: '';
+    content: "";
     position: absolute;
     top: convert.to-rem(-10px);
     left: convert.to-rem(-10px);
@@ -91,4 +92,4 @@
 
 @mixin info-tooltip-active-icon {
   color: config.$icon-active-color;
-}
+}

package/src/components/Tooltip/tests/{Tooltip.conformance.test.js → Tooltip.conformance.test.jsx}

@@ -1,5 +1,5 @@
 import { render } from "@testing-library/react";
-import { axe } from "jest-axe";
+import { axe } from "vitest-axe";
 
 import { Button } from "../../Button";
 import { Tooltip } from "../";
@@ -34,7 +34,11 @@ const example = (
 it("is valid html", () => {
   const { container } = render(example);
   expect(container).toHTMLValidate({
-    rules: { "no-inline-style": "off", "attribute-boolean-style": "off" },
+    rules: {
+      "no-inline-style": "off",
+      "attribute-boolean-style": "off",
+      "attribute-empty-style": "off",
+    },
   });
 });
 

package/src/components/Tooltip/tests/{Tooltip.unit.test.js → Tooltip.unit.test.jsx}

@@ -1,4 +1,4 @@
-import { render, fireEvent } from "@testing-library/react";
+import { fireEvent, render } from "@testing-library/react";
 
 import { Tooltip } from "../Tooltip";
 
@@ -223,104 +223,88 @@ describe("rendering Tooltip", () => {
         </Base>,
       );
     });
-    it("button has class is-active when focused", () => {
+    it("button does not get class is-active when focused", () => {
       const { container } = tooltip;
       fireEvent.focus(container.querySelector("button"));
-      expect(container.querySelector("button")).toHaveClass("is-active");
+      expect(container.querySelector("button")).not.toHaveClass("is-active");
     });
 
-    it("tooltip has class is-visible when button is focused", () => {
+    it("tooltip is not visible when button is focused", () => {
       const { container, getByTestId } = tooltip;
       fireEvent.focus(container.querySelector("button"));
-      expect(getByTestId("test-id")).toHaveClass("is-visible");
+      expect(getByTestId("test-id")).not.toHaveClass("is-visible");
     });
-    it("button has class is-active when mouse enters button", () => {
+    it("button has class is-active when clicked", () => {
       const { container } = tooltip;
-      fireEvent.mouseEnter(container.querySelector("button"));
+      fireEvent.click(container.querySelector("button"));
       expect(container.querySelector("button")).toHaveClass("is-active");
     });
 
-    it("tooltip has class is-visible when mouse enters button", () => {
+    it("tooltip has class is-visible when button is clicked", () => {
       const { container, getByTestId } = tooltip;
-      fireEvent.mouseEnter(container.querySelector("button"));
+      fireEvent.click(container.querySelector("button"));
       expect(getByTestId("test-id")).toHaveClass("is-visible");
     });
-    it("has hidden attribute set to false after mouse enters button", () => {
+    it("has hidden attribute set to false after button click", () => {
       const { getByTestId, container } = tooltip;
-      fireEvent.mouseEnter(container.querySelector("button"));
+      fireEvent.click(container.querySelector("button"));
       expect(getByTestId("test-id").hidden).toBe(false);
     });
-    it("has hidden attribute set to false after button focus", () => {
+    it("keeps hidden attribute set to true after button focus", () => {
       const { getByTestId, container } = tooltip;
       fireEvent.focus(container.querySelector("button"));
-      expect(getByTestId("test-id").hidden).toBe(false);
+      expect(getByTestId("test-id").hidden).toBe(true);
     });
-    it("button losses class is-active after it losses focus", () => {
+    it("button loses class is-active after blur", () => {
       const { container } = tooltip;
-      fireEvent.focus(container.querySelector("button"));
+      fireEvent.click(container.querySelector("button"));
       fireEvent.blur(container.querySelector("button"));
       expect(container.querySelector("button")).not.toHaveClass("is-active");
     });
 
-    it("tooltip losses class is-visible after button losses focus", () => {
+    it("tooltip loses class is-visible after blur", () => {
       const { container, getByTestId } = tooltip;
-      fireEvent.focus(container.querySelector("button"));
+      fireEvent.click(container.querySelector("button"));
       fireEvent.blur(container.querySelector("button"));
       expect(getByTestId("test-id")).not.toHaveClass("is-visible");
     });
-    it("button losses class is-active after mouse leave event", () => {
+    it("button loses class is-active after second click", () => {
       const { container } = tooltip;
-      fireEvent.mouseEnter(container.querySelector("button"));
-      fireEvent.mouseLeave(container.querySelector("button"));
+      fireEvent.click(container.querySelector("button"));
+      fireEvent.click(container.querySelector("button"));
       expect(container.querySelector("button")).not.toHaveClass("is-active");
     });
 
-    it("tooltip losses class is-visible after mouse leaves button", () => {
+    it("tooltip loses class is-visible after second click", () => {
       const { container, getByTestId } = tooltip;
-      fireEvent.mouseEnter(container.querySelector("button"));
-      fireEvent.mouseLeave(container.querySelector("button"));
+      fireEvent.click(container.querySelector("button"));
+      fireEvent.click(container.querySelector("button"));
       expect(getByTestId("test-id")).not.toHaveClass("is-visible");
     });
-    it("has hidden attribute set to true after mouse leaves button", () => {
+    it("hides on blur after being opened by click", () => {
       const { getByTestId, container } = tooltip;
-      fireEvent.mouseEnter(container.querySelector("button"));
-      fireEvent.mouseLeave(container.querySelector("button"));
-      expect(getByTestId("test-id").hidden).toBe(true);
+      fireEvent.click(container.querySelector("button"));
+      fireEvent.blur(container.querySelector("button"));
+      expect(getByTestId("test-id")).not.toHaveClass("is-visible");
     });
-    it("has hidden attribute set to true after button blur", () => {
+    it("stays visible when tooltip content is clicked", () => {
       const { getByTestId, container } = tooltip;
-      fireEvent.focus(container.querySelector("button"));
+      fireEvent.click(container.querySelector("button"));
+      fireEvent.mouseDown(getByTestId("test-id"));
       fireEvent.blur(container.querySelector("button"));
-      expect(getByTestId("test-id").hidden).toBe(true);
-    });
-  });
-  describe("colorScheme prop", () => {
-    it("should have is-dark class when colorScheme is 'dark'", () => {
-      const { getByTestId } = render(
-        <Base>
-          <Tooltip data-testid="test-id" colorScheme="dark" />
-        </Base>,
-      );
-      expect(getByTestId("test-id")).toHaveClass("is-dark");
-      expect(getByTestId("test-id")).not.toHaveClass("is-light");
+      expect(getByTestId("test-id")).toHaveClass("is-visible");
     });
-    it("should have is-light class when colorScheme is 'light'", () => {
-      const { getByTestId } = render(
-        <Base>
-          <Tooltip data-testid="test-id" colorScheme="light" />
-        </Base>,
-      );
-      expect(getByTestId("test-id")).toHaveClass("is-light");
-      expect(getByTestId("test-id")).not.toHaveClass("is-dark");
+    it("hides when clicking outside tooltip and trigger", () => {
+      const { getByTestId, container } = tooltip;
+      fireEvent.click(container.querySelector("button"));
+      fireEvent.click(document.body);
+      expect(getByTestId("test-id")).not.toHaveClass("is-visible");
     });
-    it("should not have is-dark or is-light class by default", () => {
-      const { getByTestId } = render(
-        <Base>
-          <Tooltip data-testid="test-id" />
-        </Base>,
-      );
-      expect(getByTestId("test-id")).not.toHaveClass("is-dark");
-      expect(getByTestId("test-id")).not.toHaveClass("is-light");
+    it("hides on Escape key press", () => {
+      const { getByTestId, container } = tooltip;
+      fireEvent.click(container.querySelector("button"));
+      fireEvent.keyDown(container.querySelector("button"), { key: "Escape" });
+      expect(getByTestId("test-id")).not.toHaveClass("is-visible");
     });
   });
 });

package/src/components/index.ts

@@ -1,7 +1,6 @@
 import { Accordion, AccordionItem } from "./Accordion";
 import { Alert } from "./Alert";
 import { AnchorNavigation } from "./AnchorNavigation";
-import { Tag, TagButton } from "./Tag";
 import { Bar, BarBreak, BarItem } from "./Bar";
 import {
   BlockAction,
@@ -19,12 +18,14 @@ import {
   IconButton,
 } from "./Button";
 import { Buttons } from "./Buttons";
+import { Card, CardProductHeader, CardSection } from "./Card";
 import { Carousel } from "./Carousel";
-import { CarouselHero } from "./CarouselHero";
+import { CarouselHero, CarouselHeroItem } from "./CarouselHero";
 import { CarouselPromotions } from "./CarouselPromotions";
 import { CartTable } from "./CartTable";
 import { Container } from "./Container";
 import { Controls } from "./Controls";
+import { Cover } from "./Cover";
 import { Divider } from "./Divider";
 import {
   Dropdown,
@@ -34,62 +35,64 @@ import {
 } from "./Dropdown";
 import { Expander } from "./Expander/Expander";
 import { FeatureAccordion, FeatureAccordionItem } from "./FeatureAccordion";
-import { Card, CardSection, CardProductHeader } from "./Card";
-import { Icon, Pictogram } from "./Icon";
+import {
+  Autocomplete,
+  Checkbox,
+  Field,
+  Fieldset,
+  File,
+  Group,
+  Hint,
+  InputStepper,
+  Label,
+  Message,
+  Radio,
+  RangeSlider,
+  Select,
+  TextArea,
+  TextInput,
+} from "./Forms";
 import { Gauge } from "./Gauge";
 import { Grid, GridCol } from "./Grid";
+import { Hero } from "./Hero";
+import { Icon, Pictogram, SpritePathContext, SpritePathProvider } from "./Icon";
+import { IconList, Item } from "./IconList";
 import { Image } from "./Image";
 import { Link } from "./Link";
-import { Loader } from "./Loader";
+import { List, ListItem } from "./List";
+import { Loader, LoaderFullscreen } from "./Loader";
+import { Megamenu, MegamenuBlog } from "./Megamenu";
 import {
   Modal,
   ModalBody,
   ModalCloseButton,
-  ModalTitle,
+  ModalProductFooter,
   ModalProductHeader,
+  ModalTitle,
 } from "./Modal";
-import { Section } from "./Section";
-import { Sticker } from "./Sticker";
-import { SkipLink } from "./SkipLink";
-import { List, ListItem } from "./List";
-import { Progress } from "./Progress";
 import { Pagination } from "./Pagination";
+import { Pill } from "./Pill";
+import { Progress } from "./Progress";
 import { PromoBanner } from "./PromoBanner";
 import {
   PromotionCard,
-  PromotionCardSection,
   PromotionCardContent,
-  PromotionCardTitle,
   PromotionCardImageWrapper,
+  PromotionCardSection,
+  PromotionCardTitle,
 } from "./PromotionCard";
-import {
-  Autocomplete,
-  Select,
-  TextInput,
-  TextArea,
-  RangeSlider,
-  Message,
-  Label,
-  Hint,
-  Radio,
-  Checkbox,
-  File,
-  InputStepper,
-  Group,
-  Fieldset,
-  Field,
-} from "./Forms";
+import { Section } from "./Section";
 import { Skeleton } from "./Skeleton";
-import { Pill } from "./Pill";
+import { SkipLink } from "./SkipLink";
+import { SocialButton } from "./SocialButton";
 import { Stepbar } from "./Stepbar";
-import { Tab, TabPanel, Tabs } from "./Tabs";
+import { Sticker } from "./Sticker";
 import { Table } from "./Table";
-import { Tile } from "./Tile";
-import { Tooltip, InfoTooltip } from "./Tooltip";
-import { Cover } from "./Cover";
+import { Tab, TabPanel, Tabs } from "./Tabs";
+import { Tag, TagButton } from "./Tag";
 import { Testimonial } from "./Testimonial";
-import { Hero } from "./Hero";
-import { IconList, Item } from "./IconList";
+import { Tile } from "./Tile";
+import { InfoTooltip, Tooltip } from "./Tooltip";
 
 export {
   Accordion,
@@ -116,6 +119,7 @@ export {
   CardSection,
   Carousel,
   CarouselHero,
+  CarouselHeroItem,
   CarouselPromotions,
   CartTable,
   Checkbox,
@@ -151,10 +155,14 @@ export {
   List,
   ListItem,
   Loader,
+  LoaderFullscreen,
+  Megamenu,
+  MegamenuBlog,
   Message,
   Modal,
   ModalBody,
   ModalCloseButton,
+  ModalProductFooter,
   ModalProductHeader,
   ModalTitle,
   Pagination,
@@ -173,6 +181,9 @@ export {
   Select,
   Skeleton,
   SkipLink,
+  SocialButton,
+  SpritePathContext,
+  SpritePathProvider,
   Stepbar,
   Sticker,
   Tab,

package/src/styles/base/globals-forms.scss

@@ -1,3 +1,5 @@
+@use "../tokens/color";
+
 button,
 input,
 optgroup,
@@ -13,3 +15,9 @@ fieldset {
   padding: 0;
   border: 0;
 }
+
+::placeholder {
+  color: color.$gray-700;
+  font-weight: normal;
+  opacity: 1;
+}

package/src/styles/base/globals.scss

@@ -1,42 +1,47 @@
 @use "../tokens/base";
 @use "../tokens/space";
-@use "../tokens/color";
+@use "../tokens/color-vars";
 
-// Consider to add more conditions for light and dark themes
 :root,
-.is-light,
-.bg-white,
-#root.is-light,
-#root-modals.is-light,
-#root-tooltips.is-light,
-#root-dropdowns.is-light {
-  @each $name, $value in color.$colors-light {
-    --color-#{$name}: #{$value};
-  }
-  color: var(--color-text-default);
-}
-
-.is-dark,
-.bg-black,
-#root.is-dark,
-#root-modals.is-dark,
-#root-tooltips.is-dark,
-#root-dropdowns.is-dark {
-  @each $name, $value in color.$colors-dark {
-    --color-#{$name}: #{$value};
-  }
-  color: var(--color-text-default);
-}
-
-:root {
+:host {
   --extra-scroll-margin: 0;
   --header-height: 80px;
 }
 
 @media screen and (min-width: 992px) {
-  :root {
+  :root,
+  :host {
     --header-height: 120px;
   }
+
+  html:has(
+    .megamenu.is-sticky:not(.top-hidden)
+      .megamenu__nav-logo
+      > [data-megamenu-brand-mark]
+      + span
+  ) {
+    --header-height: 107px;
+  }
+
+  html:has(
+      .megamenu.is-sticky:not(.top-hidden)
+        .megamenu__nav-logo
+        > [data-megamenu-brand-mark]
+    ):not(
+      :has(
+        .megamenu.is-sticky:not(.top-hidden)
+          .megamenu__nav-logo
+          > [data-megamenu-brand-mark]
+          + span
+      )
+    ) {
+    --header-height: 147px;
+  }
+
+  html:has(.megamenu.is-sticky.top-hidden),
+  html:has(.megamenu.is-sticky + .megamenu-spacer--small) {
+    --header-height: 80px;
+  }
 }
 
 :target {
@@ -48,14 +53,30 @@
 html {
   font-size: base.$font-size;
   scroll-padding-top: unset;
+  overflow-x: hidden;
 }
 
 html,
 body {
   padding: 0;
   margin: 0;
+  -webkit-text-size-adjust: 100%;
   text-size-adjust: 100%;
-  -webkit-font-smoothing: initial;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  html:focus-within {
+    scroll-behavior: auto;
+  }
+
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
 }
 
 body {
@@ -63,6 +84,8 @@ body {
   background-color: base.$background;
   font-family: #{base.$font-family};
   color: base.$text-color;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
 * {
@@ -112,6 +135,8 @@ button:not(:disabled) {
 
 a {
   text-decoration: none;
+  text-underline-offset: 2px;
+  text-decoration-thickness: auto;
 }
 
 // stylelint-disable-next-line no-descending-specificity
@@ -156,7 +181,7 @@ table {
 }
 
 blockquote {
-  margin: 0 0 space.get("medium") 0;
+  margin: 0 0 space.get("large") 0;
 }
 
 th {
@@ -172,3 +197,16 @@ button[aria-expanded="true"] .expand-icon {
 [hidden] {
   display: none !important;
 }
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-weight: 300;
+}
+
+figure {
+  margin: 0;
+}

package/src/styles/base/styleguide.scss

@@ -1,21 +1,21 @@
-@use '../tokens/color';
-@use '../tokens/space';
-@use '../tools/convert';
-@use '../tools/text';
-@use '../tools/generate';
-@use '../tools/layout';
-@use '../typography/config' as typographyConfig;
-@use 'sass:map' as sassmap;
+@use "../tokens/color";
+@use "../tokens/space";
+@use "../tools/convert";
+@use "../tools/text";
+@use "../tools/generate";
+@use "../tools/layout";
+@use "../typography/config" as typographyConfig;
+@use "sass:map" as sassmap;
 
 main {
   min-height: 100vh;
-  padding-top: 80px !important;
+  padding-top: var(--header-height, 80px) !important;
 }
 
 .l-debug {
-  padding: space.get('small');
-  background-color: color.$gray-300;
-  border: 1px solid color.$gray-400;
+  padding: space.get("small");
+  background-color: var(--color-surface-subtle);
+  border: 1px solid var(--color-border-strong);
 
   @include layout.reset-last-child-margin-bottom;
 }
@@ -29,7 +29,8 @@ main {
 }
 
 .code-wrapper {
-  border: 1px solid color.$gray-400;
+  border: 1px solid var(--color-border-strong);
+  margin-bottom: 30px;
 
   pre {
     margin-bottom: 0 !important;
@@ -57,17 +58,17 @@ main {
     width: convert.to-rem(220px);
     min-height: convert.to-rem(40px);
     margin-bottom: space.get();
-    margin-right: space.get('xsmall');
+    margin-right: space.get("xsmall");
     overflow-wrap: anywhere;
 
     .icon {
       cursor: pointer;
       flex-shrink: 0;
-      margin-right: space.get('small');
+      margin-right: space.get("small");
     }
 
     .icon:hover {
-      color: color.$orange;
+      color: var(--color-text-accent);
     }
   }
 }
@@ -122,7 +123,9 @@ main > div {
   }
 
   > h4 {
-    @include generate.css-map(typographyConfig.$body-text, 'large');
+    @include generate.responsive-css-map(
+      sassmap.get(typographyConfig.$body-text, "large")
+    );
   }
 }
 
@@ -130,5 +133,7 @@ main > div {
 main > div > h1 + p,
 main > div > h1 + p + p,
 main > div > h1 + p + p + p {
-  @include generate.css-map(typographyConfig.$body-text, 'large');
+  @include generate.responsive-css-map(
+    sassmap.get(typographyConfig.$body-text, "large")
+  );
 }

package/src/styles/export/base.js

@@ -2,13 +2,13 @@
 // Do not edit this file directly - edit the SCSS source instead
 
 export const exports = {
-  "font-family": "OrangeSK Neue, Helvetica Neue, helvetica, arial, sans-serif",
+  "font-family": "OrangeSK Neue, Helvetica Neue, Helvetica, Arial, sans-serif",
   "font-size": "16px",
   "line-height": "1.25",
   "background": "var(--color-background-primary)",
   "text-color": "var(--color-text-default)",
   "focus-outline": "2px solid var(--color-border-contrast)",
-  "selection-background": "rgba(241, 110, 0, 0.9)"
+  "selection-background": "rgba(241, 94, 0, 0.9)"
 };
 
 export default exports;

package/src/styles/export/breakpoint.scss

@@ -1,5 +1,5 @@
 @use "sass:string";
-@use '../tokens/breakpoint';
+@use "../tokens/breakpoint";
 
 :export {
   @each $key, $value in breakpoint.$map {