@orangesk/orange-design-system 2.0.0-beta.36 → 2.0.0-beta.37

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

@@ -1,4 +1,4 @@
-import { render, fireEvent, waitFor } from "@testing-library/react";
+import { fireEvent, render } from "@testing-library/react";
 
 import { Tooltip } from "../Tooltip";
 
@@ -223,79 +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("keeps hidden attribute unset after mouse leaves button", async () => {
+    it("hides on blur after being opened by click", () => {
       const { getByTestId, container } = tooltip;
-      fireEvent.mouseEnter(container.querySelector("button"));
-      fireEvent.mouseLeave(container.querySelector("button"));
-      await waitFor(() => {
-        expect(getByTestId("test-id").hidden).toBe(false);
-      });
+      fireEvent.click(container.querySelector("button"));
+      fireEvent.blur(container.querySelector("button"));
+      expect(getByTestId("test-id")).not.toHaveClass("is-visible");
     });
-    it("keeps hidden attribute unset after button blur", async () => {
+    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"));
-      await waitFor(() => {
-        expect(getByTestId("test-id").hidden).toBe(false);
-      });
+      expect(getByTestId("test-id")).toHaveClass("is-visible");
+    });
+    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("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, 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,65 +35,64 @@ import {
 } from "./Dropdown";
 import { Expander } from "./Expander/Expander";
 import { FeatureAccordion, FeatureAccordionItem } from "./FeatureAccordion";
-import { Card, CardSection, CardProductHeader } from "./Card";
-import { Icon, Pictogram, SpritePathContext, SpritePathProvider } 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 { List, ListItem } from "./List";
 import { Loader } from "./Loader";
 import { Megamenu, MegamenuBlog } from "./Megamenu";
 import {
   Modal,
   ModalBody,
   ModalCloseButton,
-  ModalTitle,
-  ModalProductHeader,
   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 { SocialButton } from "./SocialButton";
+import { Tile } from "./Tile";
+import { InfoTooltip, Tooltip } from "./Tooltip";
 
 export {
   Accordion,
@@ -166,8 +166,6 @@ export {
   ModalTitle,
   Pagination,
   Pictogram,
-  SpritePathContext,
-  SpritePathProvider,
   Pill,
   Progress,
   PromoBanner,
@@ -183,6 +181,8 @@ export {
   Skeleton,
   SkipLink,
   SocialButton,
+  SpritePathContext,
+  SpritePathProvider,
   Stepbar,
   Sticker,
   Tab,

package/src/styles/base/globals.scss

@@ -32,7 +32,21 @@ body {
   padding: 0;
   margin: 0;
   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 {
@@ -40,6 +54,8 @@ body {
   background-color: base.$background;
   font-family: #{base.$font-family};
   color: base.$text-color;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
 * {

package/src/styles/export/breakpoint.ts

@@ -1,12 +1,12 @@
 // Export breakpoints from SCSS tokens
 // TODO: Remove this file and use the SCSS module instead but now is best solution this one
 const breakpoints = {
-  xs: '0px',
-  sm: '480px',
-  md: '768px',
-  lg: '992px',
-  xl: '1240px',
-  xxl: '1380px',
+  xs: "0px",
+  sm: "480px",
+  md: "768px",
+  lg: "992px",
+  xl: "1240px",
+  xxl: "1380px",
 };
 
-export default breakpoints; 
+export default breakpoints;