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

package/src/components/Forms/DatePicker/tests/DatePicker.unit.test.js

@@ -0,0 +1,262 @@
+import { render } from "@testing-library/react";
+
+import { DatePicker } from "../DatePicker";
+
+describe("rendering DatePicker", () => {
+  describe("initial state", () => {
+    it("div wrapper has class 'datepicker control-group'", () => {
+      const { container } = render(<DatePicker />);
+      expect(
+        container.querySelector("div.datepicker.control-group"),
+      ).toBeInTheDocument();
+    });
+    it("input field has class 'form-group__item text-input'", () => {
+      const { container } = render(<DatePicker />);
+      expect(
+        container.querySelector("input.form-group__item.text-input"),
+      ).toBeInTheDocument();
+    });
+    it("calendar button has class 'form-group__item btn btn--square'", () => {
+      const { container } = render(<DatePicker />);
+      expect(
+        container.querySelector("button.form-group__item.btn.btn--square"),
+      ).toBeInTheDocument();
+    });
+    it("calendar button icon has class 'icon icon--medium'", () => {
+      const { container } = render(<DatePicker />);
+      expect(
+        container
+          .querySelector("button.form-group__item.btn.btn--square")
+          .querySelector("svg"),
+      ).toHaveClass("icon icon--medium");
+    });
+    it("calendar button has class 'form-group__item btn btn--square'", () => {
+      const { container } = render(<DatePicker />);
+      expect(
+        container.querySelector("button.form-group__item.btn.btn--square"),
+      ).toBeInTheDocument();
+    });
+    it("calendar button has aria-expanded set to false", () => {
+      const { container } = render(<DatePicker />);
+      expect(
+        container
+          .querySelector("button.form-group__item.btn.btn--square")
+          .getAttribute("aria-expanded"),
+      ).toBe("false");
+    });
+    it("calendar button has aria-expanded set to false", () => {
+      const { container } = render(<DatePicker />);
+      expect(
+        container
+          .querySelector("button.form-group__item.btn.btn--square")
+          .getAttribute("aria-expanded"),
+      ).toBe("false");
+    });
+    it("div dialog wrapper has class 'daypickr'", () => {
+      const { container } = render(<DatePicker />);
+      expect(container.querySelector('div[role="dialog"]')).toHaveClass(
+        "daypickr",
+      );
+    });
+    it("div dialog wrapper has hidden attribute", () => {
+      const { container } = render(<DatePicker />);
+      expect(container.querySelector('div[role="dialog"]')).toHaveAttribute(
+        "hidden",
+      );
+    });
+    it('div dialog wrapper has child with class "daypickr__content"', () => {
+      const { container } = render(<DatePicker />);
+      expect(
+        container.querySelector('div[role="dialog"]').firstChild,
+      ).toHaveClass("daypickr__content");
+    });
+    it('div with class "daypickr__content" has child with class "daypcker__header"', () => {
+      const { container } = render(<DatePicker />);
+      expect(
+        container
+          .querySelector("div.daypickr__content")
+          .querySelector("div.daypickr__header"),
+      ).toBeInTheDocument();
+    });
+    it('div with class "daypickr__header" has first child with class "daypickr__year-month-wrapper"', () => {
+      const { container } = render(<DatePicker />);
+      expect(
+        container.querySelector("div.daypickr__header").firstChild,
+      ).toHaveClass("daypickr__year-month-wrapper");
+    });
+    it('div with class "daypickr__header" has last child with class "daypickr__pagination"', () => {
+      const { container } = render(<DatePicker />);
+      expect(
+        container.querySelector("div.daypickr__header").lastChild,
+      ).toHaveClass("daypickr__pagination");
+    });
+    it('div with class "daypickr__pagination" has first button child with class "daypickr__button--pagination-prev btn btn--ghost btn--square btn--small"', () => {
+      const { container } = render(<DatePicker />);
+      expect(
+        container.querySelector("div.daypickr__pagination").firstChild,
+      ).toHaveClass(
+        "daypickr__button--pagination-prev btn btn--ghost btn--square btn--small",
+      );
+    });
+    it('div with class "daypickr__pagination" has last button child with class "daypickr__button--pagination-next btn btn--ghost btn--square btn--small"', () => {
+      const { container } = render(<DatePicker />);
+      expect(
+        container.querySelector("div.daypickr__pagination").lastChild,
+      ).toHaveClass(
+        "daypickr__button--pagination-next btn btn--ghost btn--square btn--small",
+      );
+    });
+    it('div with class "daypickr__content" has table with class "daypickr__calendar" as child', () => {
+      const { container } = render(<DatePicker />);
+      expect(
+        container
+          .querySelector("div.daypickr__content")
+          .querySelector("table.daypickr__calendar"),
+      ).toBeInTheDocument();
+    });
+    it('div with class "daypickr__content" has table with class "daypickr__calendar" as child', () => {
+      const { container } = render(<DatePicker />);
+      expect(
+        container
+          .querySelector("div.daypickr__content")
+          .querySelector("table.daypickr__calendar"),
+      ).toBeInTheDocument();
+    });
+    it('table header has row with class "daypickr__calendar-header-row"', () => {
+      const { container } = render(<DatePicker />);
+      expect(
+        container
+          .querySelector("table.daypickr__calendar")
+          .querySelector("tr.daypickr__calendar-header-row"),
+      ).toBeInTheDocument();
+    });
+    it('cells in table header have class "daypickr__calendar-header-cell"', () => {
+      const { container } = render(<DatePicker />);
+      const cells = container
+        .querySelector("tr.daypickr__calendar-header-row")
+        .querySelectorAll("th");
+      cells.forEach((cell) =>
+        expect(cell).toHaveClass("daypickr__calendar-header-cell"),
+      );
+    });
+    it('table body has rows with class "daypickr__calendar-row"', () => {
+      const { container } = render(<DatePicker />);
+      const rows = container
+        .querySelector("table.daypickr__calendar")
+        .querySelector("tbody")
+        .querySelectorAll("tr");
+      rows.forEach((row) => expect(row).toHaveClass("daypickr__calendar-row"));
+    });
+    it('cells in table body have class "daypickr__calendar-cell"', () => {
+      const { container } = render(<DatePicker />);
+      const cells = container
+        .querySelector("table.daypickr__calendar")
+        .querySelector("tbody")
+        .querySelectorAll("td");
+      cells.forEach((cell) =>
+        expect(cell).toHaveClass("daypickr__calendar-cell"),
+      );
+    });
+    it('cells in table body have button with class "daypickr__day"', () => {
+      const { container } = render(<DatePicker />);
+      const cells = container
+        .querySelector("table.daypickr__calendar")
+        .querySelector("tbody")
+        .querySelectorAll("td");
+      cells.forEach((cell) =>
+        expect(cell.querySelector("button.daypickr__day")).toBeInTheDocument(),
+      );
+    });
+    it('button with current date in table cell has additional class "isToday"', () => {
+      const { container } = render(<DatePicker />);
+      const dayInMonth = new Date().getDate();
+      let current;
+      const cells = container
+        .querySelector("table.daypickr__calendar")
+        .querySelector("tbody")
+        .querySelectorAll("td");
+      for (let cell of cells) {
+        if (cell.querySelector("button.daypickr__day.isToday")) {
+          current = cell.firstChild;
+          break;
+        }
+      }
+      expect(current.lastChild.textContent === dayInMonth.toString()).toBe(
+        true,
+      );
+    });
+  });
+  describe("passed props", () => {
+    it("div wrapper has data-datepicker-id attribute when id prop is passed", () => {
+      const { container } = render(<DatePicker id="test" />);
+      expect(
+        container
+          .querySelector("div.datepicker.control-group")
+          .getAttribute("data-datepicker-id"),
+      ).toBe("test");
+    });
+    it("div wrapper has data-datepicker-name attribute when name prop is passed", () => {
+      const { container } = render(<DatePicker name="test" />);
+      expect(
+        container
+          .querySelector("div.datepicker.control-group")
+          .getAttribute("data-datepicker-name"),
+      ).toBe("test");
+    });
+    it("when id prop is passed input has id {id prop}-input", () => {
+      const { container } = render(<DatePicker id="test" />);
+      expect(
+        container.querySelector("input.form-group__item.text-input").id,
+      ).toBe("test-input");
+    });
+    it("when id prop is passed hidden input has id {id prop}-value", () => {
+      const { container } = render(<DatePicker id="test" />);
+      expect(container.querySelector('input[type="hidden"]').id).toBe(
+        "test-value",
+      );
+    });
+    it("when name prop is passed hidden input has name attribute", () => {
+      const { container } = render(<DatePicker name="test" />);
+      expect(
+        container.querySelector('input[type="hidden"]').getAttribute("name"),
+      ).toBe("test");
+    });
+    it("when id prop is passed calendar button has aria-controls attribute {id prop}-dialog", () => {
+      const { container } = render(<DatePicker id="test" />);
+      expect(
+        container
+          .querySelector("button.form-group__item.btn.btn--square")
+          .getAttribute("aria-controls"),
+      ).toBe("test-dialog");
+    });
+  });
+  describe("passed config prop", () => {
+    it("element class is changed when corresponding property is passed in dayPickrConfig.classes", () => {
+      const { container } = render(
+        <DatePicker
+          dayPickrConfig={{ classes: { input: "test-input-class" } }}
+        />,
+      );
+      expect(
+        container.querySelector("input.test-input-class"),
+      ).toBeInTheDocument();
+    });
+    it("icon class is changed when calendarIcon property is passed in config", () => {
+      const { container } = render(
+        <DatePicker
+          dayPickrConfig={{
+            calendarIcon: {
+              type: "svg",
+              className: "test-icon-class",
+            },
+          }}
+        />,
+      );
+      expect(
+        container
+          .querySelector("button.form-group__item.btn.btn--square")
+          .querySelector("svg"),
+      ).toHaveClass("test-icon-class");
+    });
+  });
+});

package/src/components/Forms/Field/Control.tsx

@@ -8,10 +8,11 @@ import dynamic from "next/dynamic";
 const Autocomplete = dynamic(() =>
   import("../Autocomplete").then((mod) => ({ default: mod.Autocomplete })),
 );
+
 import { Checkbox } from "../Checkbox";
 import ConditionalWrapper from "../../../utils/ConditionalWrapper";
-// import Datepicker from "../DatePicker";
-import FieldsetContext from "../Fieldset/FieldsetContext";
+import { DatePicker } from "../DatePicker";
+import { FieldsetContext } from "../Fieldset/FieldsetContext";
 import { File } from "../File";
 import { Group } from "../Group";
 import { Radio } from "../Radio";
@@ -20,7 +21,7 @@ import { Select } from "../Select";
 import { TextArea } from "../TextArea";
 import { TextInput } from "../TextInput";
 import { InputStepper } from "../InputStepper";
-import FieldContext from "./FieldContext";
+import { FieldContext } from "./FieldContext";
 import { getDescribedBy } from "./utils";
 
 const CLASS_ROOT = "form-field__control";
@@ -57,9 +58,8 @@ const Control: React.FC<ControlProps> = ({ className }) => {
         return <Autocomplete {...props} />;
       case "checkbox":
         return <Checkbox {...props} />;
-      // TODO uncomment when Datepicker is implemented
-      // case "datepicker":
-      //   return <Datepicker {...props} />;
+      case "datepicker":
+        return <DatePicker {...props} />;
       case "file":
         return <File {...props} />;
       case "group":
@@ -126,4 +126,4 @@ const Control: React.FC<ControlProps> = ({ className }) => {
   );
 };
 
-export default Control;
+export { Control };

package/src/components/Forms/Field/Description.tsx

@@ -2,9 +2,9 @@
 
 import React from "react";
 import { Hint } from "../Hint";
-import FieldLabel from "./Label";
-import Tooltip from "./Tooltip";
-import FieldContext from "./FieldContext";
+import { FieldLabel } from "./Label";
+import { FormTooltip } from "./Tooltip";
+import { FieldContext } from "./FieldContext";
 
 const CLASS_ROOT = "form-field__description";
 
@@ -26,7 +26,7 @@ const Description: React.FC<DescriptionProps> = ({
       {!hideLabel ? (
         <>
           <FieldLabel />
-          <Tooltip id={controlId}>{tooltip}</Tooltip>
+          <FormTooltip id={controlId}>{tooltip}</FormTooltip>
         </>
       ) : null}
       <Hint id={`${controlId}-hint`} className="form-field__hint">
@@ -37,4 +37,4 @@ const Description: React.FC<DescriptionProps> = ({
   );
 };
 
-export default Description;
+export { Description };

package/src/components/Forms/Field/Field.tsx

@@ -1,12 +1,14 @@
+"use client";
+
 import React from "react";
 import cx from "classnames";
 import { Bar, BarBreak, BarItem } from "../../Bar";
-import Label from "./Label";
-import Tooltip from "./Tooltip";
-import Messages from "./Messages";
-import Control from "./Control";
-import Description from "./Description";
-import FieldContext, { FieldContextType } from "./FieldContext";
+import { FieldLabel } from "./Label";
+import { FormTooltip } from "./Tooltip";
+import { Messages } from "./Messages";
+import { Control } from "./Control";
+import { Description } from "./Description";
+import { FieldContext, FieldContextType } from "./FieldContext";
 import { getControlId } from "./utils";
 
 export interface InputFieldProps {
@@ -64,8 +66,8 @@ const Field: React.FC<InputFieldProps> = ({
                       <Control className="mr-none" />
                     </BarItem>
                     <BarItem canShrink={true}>
-                      <Label />
-                      <Tooltip id={controlId}>{tooltip}</Tooltip>
+                      <FieldLabel />
+                      <FormTooltip id={controlId}>{tooltip}</FormTooltip>
                     </BarItem>
                   </Bar>
                 </BarItem>

package/src/components/Forms/Field/FieldContext.tsx

@@ -21,4 +21,4 @@ export interface FieldContextType {
 
 const FieldContext = createContext<FieldContextType | null>(null);
 
-export default FieldContext;
+export { FieldContext };

package/src/components/Forms/Field/Label.tsx

@@ -4,7 +4,7 @@ import React from "react";
 import cx from "classnames";
 
 import { Label } from "../Label";
-import FieldContext, { FieldContextType } from "./FieldContext";
+import { FieldContext, FieldContextType } from "./FieldContext";
 
 const CLASS_ROOT = "form-field__label";
 
@@ -68,4 +68,4 @@ const FieldLabel: React.FC = () => {
   );
 };
 
-export default FieldLabel;
+export { FieldLabel };

package/src/components/Forms/Field/Messages.tsx

@@ -2,8 +2,8 @@
 
 import React from "react";
 import { Message } from "../Message";
-import FieldsetContext from "../Fieldset/FieldsetContext";
-import FieldContext from "./FieldContext";
+import { FieldsetContext } from "../Fieldset/FieldsetContext";
+import { FieldContext } from "./FieldContext";
 import type { MessageType as MessageTypeEnum } from "../Message/Message";
 
 export interface MessageType {
@@ -33,4 +33,4 @@ const Messages: React.FC<MessagesProps> = ({ isMain }) => {
     ));
 };
 
-export default Messages;
+export { Messages };

package/src/components/Forms/Field/Tooltip.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React from "react";
 import { InfoTooltip } from "../../Tooltip/InfoTooltip";
 import type { TooltipPlacement } from "../../Tooltip/Tooltip";
@@ -32,4 +34,4 @@ const FormTooltip: React.FC<FormTooltipProps> = ({
 
 FormTooltip.displayName = "FormTooltip";
 
-export default FormTooltip;
+export { FormTooltip };

package/src/components/Forms/Field/tests/Label.unit.test.js

@@ -1,7 +1,7 @@
 import { render } from "@testing-library/react";
 
-import FieldContext from "../FieldContext";
-import Label from "../Label";
+import { FieldContext } from "../FieldContext";
+import { FieldLabel } from "../Label";
 
 // htmlFor is required, therefore controlId is required
 describe("rendering Label", () => {
@@ -11,7 +11,7 @@ describe("rendering Label", () => {
         <FieldContext.Provider
           value={{ controlId: "id", control: "not-range" }}
         >
-          <Label />
+          <FieldLabel />
         </FieldContext.Provider>,
       );
       expect(container.querySelector("label")).toBeInTheDocument();
@@ -21,7 +21,7 @@ describe("rendering Label", () => {
         <FieldContext.Provider
           value={{ controlId: "id", control: "not-range" }}
         >
-          <Label />
+          <FieldLabel />
         </FieldContext.Provider>,
       );
       expect(container.querySelector("label")).toHaveClass("label");
@@ -32,7 +32,7 @@ describe("rendering Label", () => {
         <FieldContext.Provider
           value={{ controlId: "id", control: "not-range" }}
         >
-          <Label />
+          <FieldLabel />
         </FieldContext.Provider>,
       );
       expect(container.querySelector("label")).toHaveClass("label");
@@ -43,7 +43,7 @@ describe("rendering Label", () => {
         <FieldContext.Provider
           value={{ controlId: "id", control: "not-range" }}
         >
-          <Label />
+          <FieldLabel />
         </FieldContext.Provider>,
       );
       expect(container.querySelector("label").htmlFor).toBe("id");
@@ -53,7 +53,7 @@ describe("rendering Label", () => {
         <FieldContext.Provider
           value={{ controlId: "id", control: "not-range", label: "test" }}
         >
-          <Label />
+          <FieldLabel />
         </FieldContext.Provider>,
       );
       expect(container.querySelector("label").textContent).toBe("test");
@@ -65,7 +65,7 @@ describe("rendering Label", () => {
         <FieldContext.Provider
           value={{ controlId: "id", control: { type: "range" } }}
         >
-          <Label />
+          <FieldLabel />
         </FieldContext.Provider>,
       );
       expect(container.querySelector("span")).toBeInTheDocument();
@@ -75,7 +75,7 @@ describe("rendering Label", () => {
         <FieldContext.Provider
           value={{ controlId: "id", control: { type: "range" } }}
         >
-          <Label />
+          <FieldLabel />
         </FieldContext.Provider>,
       );
       expect(container.querySelector("span")).toHaveClass("label");
@@ -86,7 +86,7 @@ describe("rendering Label", () => {
         <FieldContext.Provider
           value={{ controlId: "id", control: { type: "range" } }}
         >
-          <Label />
+          <FieldLabel />
         </FieldContext.Provider>,
       );
       expect(container.querySelector("span")).toHaveClass("label");
@@ -97,7 +97,7 @@ describe("rendering Label", () => {
         <FieldContext.Provider
           value={{ controlId: "id", control: { type: "range" }, label: "test" }}
         >
-          <Label />
+          <FieldLabel />
         </FieldContext.Provider>,
       );
       expect(container.querySelector("span").textContent).toBe("test");
@@ -109,7 +109,7 @@ describe("rendering Label", () => {
         <FieldContext.Provider
           value={{ controlId: "id", control: "not-range", labelAfter: "test" }}
         >
-          <Label />
+          <FieldLabel />
         </FieldContext.Provider>,
       );
       expect(container.querySelector("div")).toBeInTheDocument();
@@ -120,7 +120,7 @@ describe("rendering Label", () => {
         <FieldContext.Provider
           value={{ controlId: "id", control: "not-range", labelAfter: "test" }}
         >
-          <Label />
+          <FieldLabel />
         </FieldContext.Provider>,
       );
       expect(getByText("test")).toBeInTheDocument();
@@ -134,7 +134,7 @@ describe("rendering Label", () => {
             labelAfter: "test",
           }}
         >
-          <Label />
+          <FieldLabel />
         </FieldContext.Provider>,
       );
       expect(container.querySelector("label")).toHaveClass("label");
@@ -151,7 +151,7 @@ describe("rendering Label", () => {
             labelAfter: "test",
           }}
         >
-          <Label />
+          <FieldLabel />
         </FieldContext.Provider>,
       );
       expect(container.querySelector("span")).toHaveClass("label");

package/src/components/Forms/Field/tests/Messages.unit.test.js

@@ -1,8 +1,8 @@
 import { render } from "@testing-library/react";
 
-import FieldsetContext from "../../Fieldset/FieldsetContext";
-import FieldContext from "../FieldContext";
-import Messages from "../Messages";
+import { FieldsetContext } from "../../Fieldset/FieldsetContext";
+import { FieldContext } from "../FieldContext";
+import { Messages } from "../Messages";
 
 describe("rendering Messages", () => {
   const values = {

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

@@ -1,6 +1,6 @@
 import { render } from "@testing-library/react";
 
-import Tooltip from "../Tooltip";
+import { FormTooltip } from "../Tooltip";
 import Base from "../../../Tooltip/tests/BaseWrapper";
 
 //id is required
@@ -10,9 +10,9 @@ describe("rendering Tooltip", () => {
   beforeEach(() => {
     tooltip = render(
       <Base>
-        <Tooltip data-testid="test-id" id="test">
+        <FormTooltip data-testid="test-id" id="test">
           test
-        </Tooltip>
+        </FormTooltip>
       </Base>,
     );
   });

package/src/components/Forms/Fieldset/Fieldset.tsx

@@ -1,9 +1,9 @@
 import React, { ReactNode } from "react";
 import cx from "classnames";
 
-import Messages from "../Field/Messages";
+import { Messages } from "../Field/Messages";
 
-import FieldsetContext from "./FieldsetContext";
+import { FieldsetContext } from "./FieldsetContext";
 
 export interface FieldsetMessage {
   [key: string]: any;

package/src/components/Forms/Fieldset/FieldsetContext.ts

@@ -10,4 +10,4 @@ export interface FieldsetContextType {
 
 const FieldsetContext = createContext<FieldsetContextType | null>(null);
 
-export default FieldsetContext;
+export { FieldsetContext };

package/src/components/Forms/Group/styles/mixins.scss

@@ -29,10 +29,6 @@
     margin-right: 0;
   }
 
-  input {
-    border-radius: 0;
-  }
-
   button,
   .btn {
     border-top-left-radius: 0;

package/src/components/Forms/Message/Message.tsx

@@ -36,13 +36,7 @@ const Message: React.FC<MessageProps> = ({
   type = "info",
   ...other
 }) => {
-  const classes = cx(
-    CLASS_ROOT,
-    {
-      [`${CLASS_ROOT}--error`]: type === "error",
-    },
-    className,
-  );
+  const classes = cx(CLASS_ROOT, className);
 
   return (
     <p className={classes} {...other}>

package/src/components/Forms/Message/styles/config.scss

@@ -13,9 +13,3 @@ $icon: (
   margin-top: convert.to-rem(-3px),
   margin-right: space.get("xsmall"),
 );
-
-$states: (
-  error: (
-    color: var(--color-border-negative),
-  ),
-);

package/src/components/Forms/Message/styles/mixins.scss

@@ -10,11 +10,3 @@
 
   flex-shrink: 0;
 }
-
-@mixin states($states: config.$states) {
-  @each $state, $values in $states {
-    &#{generate.variant-name($state)} {
-      @include generate.css-map($values);
-    }
-  }
-}

package/src/components/Forms/Message/styles/style.scss

@@ -3,7 +3,6 @@
 @layer components {
   .message {
     @include mixins.base();
-    @include mixins.states();
 
     &__icon {
       @include mixins.icon();