@orangesk/orange-design-system 2.0.0-alpha.1 → 2.0.0-alpha.3

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

@@ -0,0 +1,326 @@
+import { render, fireEvent } from "@testing-library/react";
+
+import { Tooltip } from "../Tooltip";
+
+import Base from "./BaseWrapper";
+
+describe("rendering Tooltip", () => {
+  describe("initial state", () => {
+    let tooltip;
+
+    beforeEach(() => {
+      tooltip = render(
+        <Base>
+          <Tooltip data-testid="test-id" />
+        </Base>,
+      );
+    });
+
+    it("default tag is span, therefore it renders 3 elements with tag span", () => {
+      const { container } = tooltip;
+      expect(container.querySelectorAll("span").length).toBe(3);
+    });
+    it("has default class tooltip", () => {
+      const { getByTestId } = tooltip;
+      expect(getByTestId("test-id")).toHaveClass("tooltip");
+    });
+    it("has default role tooltip", () => {
+      const { getByTestId } = tooltip;
+      expect(getByTestId("test-id").getAttribute("role")).toBe("tooltip");
+    });
+    it("has hidden attribute", () => {
+      const { getByTestId } = tooltip;
+      expect(getByTestId("test-id").hidden).toBe(true);
+    });
+    it("has data-tooltip attribute", () => {
+      const { getByTestId } = tooltip;
+      expect(getByTestId("test-id").getAttribute("data-tooltip")).toBe("true");
+    });
+    it("has span with class tooltip__arrow", () => {
+      const { container } = tooltip;
+      expect(container.getElementsByClassName("tooltip__arrow").length).toBe(1);
+      expect(
+        container.getElementsByClassName("tooltip__arrow")[0].tagName,
+      ).toBe("SPAN");
+    });
+    it("has span with class tooltip__dialog", () => {
+      const { container } = tooltip;
+      expect(container.getElementsByClassName("tooltip__dialog").length).toBe(
+        1,
+      );
+      expect(
+        container.getElementsByClassName("tooltip__dialog")[0].tagName,
+      ).toBe("SPAN");
+    });
+    it("has hidden attribute set to true", () => {
+      const { getByTestId } = tooltip;
+      expect(getByTestId("test-id").hidden).toBe(true);
+    });
+    it("renders button with generated aria-describeby", () => {
+      const { container } = tooltip;
+      const pattern = /id-\d+/;
+      expect(container.querySelector("button")).toBeInTheDocument();
+
+      expect(
+        pattern.test(
+          container.querySelector("button").getAttribute("aria-describedby"),
+        ),
+      ).toBeTruthy();
+    });
+    it("renders button with generated aria-owns", () => {
+      const { container } = tooltip;
+      const pattern = /id-\d+/;
+      expect(container.querySelector("button")).toBeInTheDocument();
+      expect(
+        pattern.test(
+          container.querySelector("button").getAttribute("aria-owns"),
+        ),
+      ).toBeTruthy();
+    });
+    it("renders button with data-tooltip-trigger set to true", () => {
+      const { container } = tooltip;
+      expect(container.querySelector("button")).toBeInTheDocument();
+      expect(
+        container.querySelector("button").getAttribute("data-tooltip-trigger"),
+      ).toBe("true");
+    });
+  });
+  describe("passed props", () => {
+    it("when tag  is set to div, renders 5 elements with tag div (3 + 2 root divs defined here)", () => {
+      const { container } = render(
+        <Base>
+          <Tooltip tag="div" />
+        </Base>,
+      );
+      expect(container.querySelectorAll("div").length).toBe(5);
+    });
+    it("renders children", () => {
+      const { getByText } = render(
+        <Base>
+          <Tooltip>test</Tooltip>
+        </Base>,
+      );
+      expect(getByText("test")).toBeInTheDocument();
+    });
+    it("renders dialog", () => {
+      const { getByText } = render(
+        <Base>
+          <Tooltip dialog="test" />
+        </Base>,
+      );
+      expect(getByText("test")).toBeInTheDocument();
+    });
+    it("has additional class when className is set ", () => {
+      const { getByTestId } = render(
+        <Base>
+          <Tooltip data-testid="test-id" className="test-class" />
+        </Base>,
+      );
+      expect(getByTestId("test-id")).toHaveClass("tooltip");
+      expect(getByTestId("test-id")).toHaveClass("test-class");
+    });
+    [
+      "auto",
+      "top",
+      "top-start",
+      "top-end",
+      "bottom",
+      "bottom-start",
+      "bottom-end",
+      "right",
+      "right-start",
+      "right-end",
+      "left",
+      "left-start",
+      "left-end",
+    ].map((placement) => {
+      it(`has data-tooltip-placement set to ${placement} which is passed by placement prop`, () => {
+        const { getByTestId } = render(
+          <Base>
+            <Tooltip data-testid="test-id" placement={placement} />
+          </Base>,
+        );
+        expect(
+          getByTestId("test-id").getAttribute("data-tooltip-placement"),
+        ).toBe(placement);
+      });
+    });
+    it("renders trigger element instead of button", () => {
+      const { container } = render(
+        <Base>
+          <Tooltip
+            data-testid="test-id"
+            renderTrigger={(props) => {
+              return <p {...props} />;
+            }}
+          />
+        </Base>,
+      );
+      expect(container.querySelector("p")).toBeInTheDocument();
+      expect(container.querySelector("button")).not.toBeInTheDocument();
+    });
+    it("trigger element has generated aria-describeby", () => {
+      const { container } = render(
+        <Base>
+          <Tooltip
+            data-testid="test-id"
+            renderTrigger={(props) => {
+              return <p {...props} />;
+            }}
+          />
+        </Base>,
+      );
+      const pattern = /id-\d+/;
+      expect(container.querySelector("p")).toBeInTheDocument();
+
+      expect(
+        pattern.test(
+          container.querySelector("p").getAttribute("aria-describedby"),
+        ),
+      ).toBeTruthy();
+    });
+    it("trigger element has generated aria-owns", () => {
+      const { container } = render(
+        <Base>
+          <Tooltip
+            data-testid="test-id"
+            renderTrigger={(props) => {
+              return <p {...props} />;
+            }}
+          />
+        </Base>,
+      );
+      const pattern = /id-\d+/;
+      expect(container.querySelector("p")).toBeInTheDocument();
+      expect(
+        pattern.test(container.querySelector("p").getAttribute("aria-owns")),
+      ).toBeTruthy();
+    });
+    it("trigger element has data-tooltip-trigger set to true", () => {
+      const { container } = render(
+        <Base>
+          <Tooltip
+            data-testid="test-id"
+            renderTrigger={(props) => {
+              return <p {...props} />;
+            }}
+          />
+        </Base>,
+      );
+      expect(container.querySelector("p")).toBeInTheDocument();
+      expect(
+        container.querySelector("p").getAttribute("data-tooltip-trigger"),
+      ).toBe("true");
+    });
+  });
+  describe("fires events", () => {
+    let tooltip;
+
+    beforeEach(() => {
+      tooltip = render(
+        <Base>
+          <Tooltip data-testid="test-id" />
+        </Base>,
+      );
+    });
+    it("button has class is-active when focused", () => {
+      const { container } = tooltip;
+      fireEvent.focus(container.querySelector("button"));
+      expect(container.querySelector("button")).toHaveClass("is-active");
+    });
+
+    it("tooltip has class is-visible when button is focused", () => {
+      const { container, getByTestId } = tooltip;
+      fireEvent.focus(container.querySelector("button"));
+      expect(getByTestId("test-id")).toHaveClass("is-visible");
+    });
+    it("button has class is-active when mouse enters button", () => {
+      const { container } = tooltip;
+      fireEvent.mouseEnter(container.querySelector("button"));
+      expect(container.querySelector("button")).toHaveClass("is-active");
+    });
+
+    it("tooltip has class is-visible when mouse enters button", () => {
+      const { container, getByTestId } = tooltip;
+      fireEvent.mouseEnter(container.querySelector("button"));
+      expect(getByTestId("test-id")).toHaveClass("is-visible");
+    });
+    it("has hidden attribute set to false after mouse enters button", () => {
+      const { getByTestId, container } = tooltip;
+      fireEvent.mouseEnter(container.querySelector("button"));
+      expect(getByTestId("test-id").hidden).toBe(false);
+    });
+    it("has hidden attribute set to false after button focus", () => {
+      const { getByTestId, container } = tooltip;
+      fireEvent.focus(container.querySelector("button"));
+      expect(getByTestId("test-id").hidden).toBe(false);
+    });
+    it("button losses class is-active after it losses focus", () => {
+      const { container } = tooltip;
+      fireEvent.focus(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", () => {
+      const { container, getByTestId } = tooltip;
+      fireEvent.focus(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", () => {
+      const { container } = tooltip;
+      fireEvent.mouseEnter(container.querySelector("button"));
+      fireEvent.mouseLeave(container.querySelector("button"));
+      expect(container.querySelector("button")).not.toHaveClass("is-active");
+    });
+
+    it("tooltip losses class is-visible after mouse leaves button", () => {
+      const { container, getByTestId } = tooltip;
+      fireEvent.mouseEnter(container.querySelector("button"));
+      fireEvent.mouseLeave(container.querySelector("button"));
+      expect(getByTestId("test-id")).not.toHaveClass("is-visible");
+    });
+    it("has hidden attribute set to true after mouse leaves button", () => {
+      const { getByTestId, container } = tooltip;
+      fireEvent.mouseEnter(container.querySelector("button"));
+      fireEvent.mouseLeave(container.querySelector("button"));
+      expect(getByTestId("test-id").hidden).toBe(true);
+    });
+    it("has hidden attribute set to true after button blur", () => {
+      const { getByTestId, container } = tooltip;
+      fireEvent.focus(container.querySelector("button"));
+      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");
+    });
+    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("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");
+    });
+  });
+});

package/src/components/index.ts

@@ -1,7 +1,17 @@
 import "../styles/before-components.scss";
 
+import { Accordion, AccordionItem } from "./Accordion";
 import { Alert } from "./Alert";
-import { Badge } from "./Badge";
+import { Tag, TagButton } from "./Tag";
+import { Bar, BarBreak, BarItem } from "./Bar";
+import {
+  BlockAction,
+  BlockActionControl,
+  BlockActionIndicator,
+  BlockActionOverride,
+} from "./BlockAction";
+import { BodyBanner } from "./BodyBanner";
+import { Breadcrumbs } from "./Breadcrumbs";
 import {
   Button,
   ButtonFill,
@@ -10,29 +20,163 @@ import {
   IconButton,
 } from "./Button";
 import { Buttons } from "./Buttons";
+import { Carousel } from "./Carousel";
+import { CarouselPromotions } from "./CarouselPromotions";
+import { CartTable } from "./CartTable";
+import { Container } from "./Container";
+import { Controls } from "./Controls";
+import { Divider } from "./Divider";
+import {
+  Dropdown,
+  DropdownDivider,
+  DropdownItem,
+  DropdownToggleButton,
+} from "./Dropdown";
+import { Expander } from "./Expander/Expander";
+import { FeatureAccordion, FeatureAccordionItem } from "./FeatureAccordion";
+import { Footer } from "./Footer";
+import { Card, CardSection, CardProductHeader } from "./Card";
 import { Icon } from "./Icon";
+import { Gauge } from "./Gauge";
+import { Grid, GridCol } from "./Grid";
+import { Image } from "./Image";
+import { Link } from "./Link";
+import { Loader } from "./Loader";
 import { Modal, ModalBody, ModalCloseButton, 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 { PromoBanner } from "./PromoBanner";
+import {
+  PromotionCard,
+  PromotionCardSection,
+  PromotionCardContent,
+  PromotionCardTitle,
+  PromotionCardImageWrapper,
+} from "./PromotionCard";
+
+import {
+  Autocomplete,
+  Select,
+  TextInput,
+  TextArea,
+  RangeSlider,
+  Message,
+  Label,
+  Hint,
+  Radio,
+  Checkbox,
+  File,
+  InputStepper,
+  Group,
+  Fieldset,
+  Field,
+} from "./Forms";
+import { Skeleton } from "./Skeleton";
+import { Stepbar } from "./Stepbar";
 import { Tab, TabPanel, Tabs } from "./Tabs";
+import { Table } from "./Table";
+import { Tile } from "./Tile";
+import { Tooltip, InfoTooltip } from "./Tooltip";
 
 import "../styles/after-components.scss";
+import { Cover } from "./Cover";
+import { Testimonial } from "./Testimonial";
+import { Hero } from "./Hero";
+import { IconList, Item } from "./IconList";
 
 export {
+  Accordion,
+  AccordionItem,
   Alert,
-  Badge,
+  Autocomplete,
+  Bar,
+  BarBreak,
+  BarItem,
+  BlockAction,
+  BlockActionControl,
+  BlockActionIndicator,
+  BlockActionOverride,
+  BodyBanner,
+  Breadcrumbs,
   Button,
   ButtonFill,
   ButtonGhost,
   ButtonPrimary,
   Buttons,
-  IconButton,
+  Card,
+  CardProductHeader,
+  CardSection,
+  Carousel,
+  CarouselPromotions,
+  CartTable,
+  Checkbox,
+  Container,
+  Controls,
+  Cover,
+  Divider,
+  Dropdown,
+  DropdownDivider,
+  DropdownItem,
+  DropdownToggleButton,
+  Expander,
+  FeatureAccordion,
+  FeatureAccordionItem,
+  Field,
+  Fieldset,
+  File,
+  Footer,
+  Gauge,
+  Grid,
+  GridCol,
+  Group,
+  Hint,
+  PromoBanner,
   Icon,
+  IconButton,
+  IconList,
+  Item,
+  Image,
+  InfoTooltip,
+  InputStepper,
+  Label,
+  Link,
+  Hero,
+  Loader,
+  List,
+  ListItem,
+  Message,
   Modal,
   ModalBody,
   ModalCloseButton,
   ModalTitle,
+  Pagination,
+  Progress,
+  PromotionCard,
+  PromotionCardSection,
+  PromotionCardContent,
+  PromotionCardTitle,
+  PromotionCardImageWrapper,
+  Radio,
+  RangeSlider,
   Section,
+  Select,
+  Skeleton,
+  SkipLink,
+  Stepbar,
+  Sticker,
   Tab,
+  Table,
   TabPanel,
   Tabs,
+  Tag,
+  TagButton,
+  Testimonial,
+  TextArea,
+  TextInput,
+  Tile,
+  Tooltip,
 };

package/src/components/static.ts

@@ -1 +1 @@
-import "../scripts/index.js";
+import "../scripts/index";

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

@@ -1,15 +1,17 @@
-button,
-input,
-optgroup,
-select,
-textarea {
-  font-family: inherit;
-  font-size: inherit;
-  line-height: inherit;
-}
+@layer base {
+  button,
+  input,
+  optgroup,
+  select,
+  textarea {
+    font-family: inherit;
+    font-size: inherit;
+    line-height: inherit;
+  }
 
-fieldset {
-  margin: 0;
-  padding: 0;
-  border: 0;
+  fieldset {
+    margin: 0;
+    padding: 0;
+    border: 0;
+  }
 }