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

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

@@ -0,0 +1,43 @@
+@use '../../../../styles/tools/generate';
+@use '../../../../styles/tools/convert';
+@use './config';
+
+@mixin base($config: config.$layout) {
+  @include generate.css-map($config);
+};
+
+@mixin radiocheck-base() {
+  display: flex;
+
+  > *:last-child {
+    margin-bottom: 0;
+  }
+};
+
+
+@mixin radiocheck-fill() {
+  left: 0;
+  top: 0;
+  width: 100% !important;
+  height: 100% !important;
+}
+
+@mixin description($config: config.$description) {
+  @include generate.css-map($config);
+};
+
+@mixin label {
+  display: inline;
+};
+
+@mixin input-control($config: config.$input-control) {
+  @include generate.css-map($config);
+};
+
+@mixin radiocheck-control($config: config.$radiocheck-control) {
+  @include generate.css-map($config);
+};
+
+@mixin hint($config: config.$hint) {
+  @include generate.css-map($config);
+}

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

@@ -0,0 +1,37 @@
+@use "./mixins";
+
+@layer components {
+  .form-field {
+    $this: &;
+
+    @include mixins.base();
+
+    &__description {
+      @include mixins.description();
+    }
+
+    &__label {
+      @include mixins.label();
+    }
+
+    &__control {
+      @include mixins.input-control();
+    }
+
+    &__hint {
+      @include mixins.hint();
+    }
+
+    &--radiocheck {
+      @include mixins.radiocheck-base();
+
+      #{$this}__control {
+        @include mixins.radiocheck-control();
+      }
+    }
+  }
+
+  .radiocheck--fill {
+    @include mixins.radiocheck-fill();
+  }
+}

package/src/components/Forms/Field/tests/Autocomplete.Field.conformance.test.js

@@ -0,0 +1,52 @@
+import { render } from "@testing-library/react";
+import { axe } from "jest-axe";
+
+import { Field } from "../";
+
+const options = ["option 1", "option 2", "option 3"];
+
+const example = (
+  <>
+    <Field label="Field Label" control={{ type: "autocomplete", options }} />
+    <Field
+      label="Field Label"
+      control={{ type: "autocomplete", options }}
+      tooltip="info tooltip"
+    />
+    <Field
+      label="Field Label"
+      hint="Field hint with long text"
+      control={{ type: "autocomplete", options }}
+    />
+    <Field
+      label="Field Label"
+      control={{ type: "autocomplete", options }}
+      messages={[
+        { type: "info", text: "Info message with lorem ipsum long text ipsum" },
+      ]}
+    />
+    <div id="root-tooltips" />
+  </>
+);
+
+it("is valid html", () => {
+  const { container } = render(example);
+  expect(container).toHTMLValidate({
+    rules: {
+      "no-inline-style": "off",
+      "prefer-native-element": "off",
+      "attribute-boolean-style": "off",
+    },
+  });
+});
+
+it("is accessible", async () => {
+  const { container } = render(example);
+  expect(
+    await axe(container, {
+      rules: {
+        "aria-input-field-name": { enabled: false },
+      },
+    }),
+  ).toHaveNoViolations();
+});

package/src/components/Forms/Field/tests/Checkbox.Field.conformance.test.js

@@ -0,0 +1,43 @@
+import { render } from "@testing-library/react";
+import { axe } from "jest-axe";
+
+import { Field } from "../";
+
+const example = (
+  <>
+    <Field label="Field Label" control={{ type: "checkbox" }} />
+    <Field
+      label="Field Label"
+      control={{ type: "checkbox" }}
+      tooltip="info tooltip"
+    />
+    <Field
+      label="Field Label"
+      hint="Field hint with long text"
+      control={{ type: "checkbox" }}
+    />
+    <Field
+      label="Field Label"
+      control={{ type: "checkbox" }}
+      messages={[
+        { type: "info", text: "Info message with lorem ipsum long text ipsum" },
+      ]}
+    />
+    <div id="root-tooltips" />
+  </>
+);
+
+it("is valid html", () => {
+  const { container } = render(example);
+  expect(container).toHTMLValidate({
+    rules: {
+      "no-inline-style": "off",
+      "attribute-boolean-style": "off",
+    },
+  });
+});
+
+it("is accessible", async () => {
+  const { container } = render(example);
+  expect(await axe(container)).toHaveNoViolations();
+});

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

@@ -0,0 +1,11 @@
+import { render, screen } from "@testing-library/react";
+
+import { Field } from "../Field";
+
+//legend is required
+describe("rendering Field", () => {
+  it("passes className to control element", () => {
+    render(<Field control={{ className: "custom-class" }} />);
+    expect(screen.getByRole("textbox")).toHaveClass("custom-class");
+  });
+});

package/src/components/Forms/Field/tests/File.Field.conformance.test.js

@@ -0,0 +1,47 @@
+import { render } from "@testing-library/react";
+import { axe } from "jest-axe";
+
+import { Field } from "..";
+
+const example = (
+  <>
+    <Field label="Field Label" control={{ type: "file" }} />
+    <Field
+      label="Field Label"
+      control={{ type: "file" }}
+      tooltip="info tooltip"
+    />
+    <Field
+      label="Field Label"
+      hint="Field hint with long text"
+      control={{ type: "file" }}
+    />
+    <Field
+      label="Field Label"
+      control={{ type: "file" }}
+      messages={[
+        { type: "info", text: "Info message with lorem ipsum long text ipsum" },
+      ]}
+    />
+    <div id="root-tooltips" />
+  </>
+);
+
+beforeAll(() => {
+  global.DataTransfer = jest.fn(() => ({ files: undefined }));
+});
+
+it("is valid html", () => {
+  const { container } = render(example);
+  expect(container).toHTMLValidate({
+    rules: {
+      "no-inline-style": "off",
+      "attribute-boolean-style": "off",
+    },
+  });
+});
+
+it("is accessible", async () => {
+  const { container } = render(example);
+  expect(await axe(container)).toHaveNoViolations();
+});

package/src/components/Forms/Field/tests/Group.Field.conformance.test.js

@@ -0,0 +1,47 @@
+import { render } from "@testing-library/react";
+import { axe } from "jest-axe";
+
+import { Button } from "../../../Button";
+import { Field } from "..";
+
+const controlConfig = {
+  type: "group",
+  prefix: "€",
+  suffix: ["kg", <Button key="test">Send</Button>],
+  control: { type: "text" },
+};
+
+const example = (
+  <>
+    <Field label="Field Label" control={controlConfig} />
+    <Field label="Field Label" control={controlConfig} tooltip="info tooltip" />
+    <Field
+      label="Field Label"
+      hint="Field hint with long text"
+      control={controlConfig}
+    />
+    <Field
+      label="Field Label"
+      control={controlConfig}
+      messages={[
+        { type: "info", text: "Info message with lorem ipsum long text ipsum" },
+      ]}
+    />
+    <div id="root-tooltips" />
+  </>
+);
+
+it("is valid html", () => {
+  const { container } = render(example);
+  expect(container).toHTMLValidate({
+    rules: {
+      "no-inline-style": "off",
+      "attribute-boolean-style": "off",
+    },
+  });
+});
+
+it("is accessible", async () => {
+  const { container } = render(example);
+  expect(await axe(container)).toHaveNoViolations();
+});

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

@@ -0,0 +1,163 @@
+import { render } from "@testing-library/react";
+
+import { FieldContext } from "../FieldContext";
+import { FieldLabel } from "../Label";
+
+// htmlFor is required, therefore controlId is required
+describe("rendering Label", () => {
+  describe("renders label", () => {
+    it("label is rendered when control.type is not equal 'range'", () => {
+      const { container } = render(
+        <FieldContext.Provider
+          value={{ controlId: "id", control: "not-range" }}
+        >
+          <FieldLabel />
+        </FieldContext.Provider>,
+      );
+      expect(container.querySelector("label")).toBeInTheDocument();
+    });
+    it("label has classes label and form-field__label", () => {
+      const { container } = render(
+        <FieldContext.Provider
+          value={{ controlId: "id", control: "not-range" }}
+        >
+          <FieldLabel />
+        </FieldContext.Provider>,
+      );
+      expect(container.querySelector("label")).toHaveClass("label");
+      expect(container.querySelector("label")).toHaveClass("form-field__label");
+    });
+    it("label has id id-label when controlId is set to 'id'", () => {
+      const { container } = render(
+        <FieldContext.Provider
+          value={{ controlId: "id", control: "not-range" }}
+        >
+          <FieldLabel />
+        </FieldContext.Provider>,
+      );
+      expect(container.querySelector("label")).toHaveClass("label");
+      expect(container.querySelector("label")).toHaveClass("form-field__label");
+    });
+    it("has htmlFor seto to id when when controlId is set to 'id'", () => {
+      const { container } = render(
+        <FieldContext.Provider
+          value={{ controlId: "id", control: "not-range" }}
+        >
+          <FieldLabel />
+        </FieldContext.Provider>,
+      );
+      expect(container.querySelector("label").htmlFor).toBe("id");
+    });
+    it("renders label value provided by FieldContext.Provider inside label element", () => {
+      const { container } = render(
+        <FieldContext.Provider
+          value={{ controlId: "id", control: "not-range", label: "test" }}
+        >
+          <FieldLabel />
+        </FieldContext.Provider>,
+      );
+      expect(container.querySelector("label").textContent).toBe("test");
+    });
+  });
+  describe("control.type is set to 'range'", () => {
+    it("span is rendered when control.type is not equal 'range'", () => {
+      const { container } = render(
+        <FieldContext.Provider
+          value={{ controlId: "id", control: { type: "range" } }}
+        >
+          <FieldLabel />
+        </FieldContext.Provider>,
+      );
+      expect(container.querySelector("span")).toBeInTheDocument();
+    });
+    it("span has classes label and form-field__label", () => {
+      const { container } = render(
+        <FieldContext.Provider
+          value={{ controlId: "id", control: { type: "range" } }}
+        >
+          <FieldLabel />
+        </FieldContext.Provider>,
+      );
+      expect(container.querySelector("span")).toHaveClass("label");
+      expect(container.querySelector("span")).toHaveClass("form-field__label");
+    });
+    it("span has id id-label when controlId is set to 'id'", () => {
+      const { container } = render(
+        <FieldContext.Provider
+          value={{ controlId: "id", control: { type: "range" } }}
+        >
+          <FieldLabel />
+        </FieldContext.Provider>,
+      );
+      expect(container.querySelector("span")).toHaveClass("label");
+      expect(container.querySelector("span")).toHaveClass("form-field__label");
+    });
+    it("renders label value provided by FieldContext.Provider inside span element", () => {
+      const { container } = render(
+        <FieldContext.Provider
+          value={{ controlId: "id", control: { type: "range" }, label: "test" }}
+        >
+          <FieldLabel />
+        </FieldContext.Provider>,
+      );
+      expect(container.querySelector("span").textContent).toBe("test");
+    });
+  });
+  describe("labelAfter is set", () => {
+    it("renders div wrapper with class form-field__label", () => {
+      const { container } = render(
+        <FieldContext.Provider
+          value={{ controlId: "id", control: "not-range", labelAfter: "test" }}
+        >
+          <FieldLabel />
+        </FieldContext.Provider>,
+      );
+      expect(container.querySelector("div")).toBeInTheDocument();
+      expect(container.querySelector("div")).toHaveClass("form-field__label");
+    });
+    it("renders labelAfter value", () => {
+      const { getByText } = render(
+        <FieldContext.Provider
+          value={{ controlId: "id", control: "not-range", labelAfter: "test" }}
+        >
+          <FieldLabel />
+        </FieldContext.Provider>,
+      );
+      expect(getByText("test")).toBeInTheDocument();
+    });
+    it("label doesnt have class form-field__label when labelAfter is set", () => {
+      const { container } = render(
+        <FieldContext.Provider
+          value={{
+            controlId: "id",
+            control: "not-range",
+            labelAfter: "test",
+          }}
+        >
+          <FieldLabel />
+        </FieldContext.Provider>,
+      );
+      expect(container.querySelector("label")).toHaveClass("label");
+      expect(container.querySelector("label")).not.toHaveClass(
+        "form-field__label",
+      );
+    });
+    it("span doesnt have class form-field__label when labelAfter is set", () => {
+      const { container } = render(
+        <FieldContext.Provider
+          value={{
+            controlId: "id",
+            control: { type: "range" },
+            labelAfter: "test",
+          }}
+        >
+          <FieldLabel />
+        </FieldContext.Provider>,
+      );
+      expect(container.querySelector("span")).toHaveClass("label");
+      expect(container.querySelector("span")).not.toHaveClass(
+        "form-field__label",
+      );
+    });
+  });
+});

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

@@ -0,0 +1,102 @@
+import { render } from "@testing-library/react";
+
+import { FieldsetContext } from "../../Fieldset/FieldsetContext";
+import { FieldContext } from "../FieldContext";
+import { Messages } from "../Messages";
+
+describe("rendering Messages", () => {
+  const values = {
+    controlId: "id",
+    messages: [
+      { type: "info", text: "message-1" },
+      { type: "info", text: "message-2" },
+    ],
+  };
+  const values2 = {
+    controlId: "id",
+    messages: [
+      { type: "info", text: "message-1", isMain: true },
+      { type: "info", text: "message-2" },
+    ],
+  };
+  describe("passes props", () => {
+    it("renders number of messages equal to length of messages array provided by FieldContext.Provided", () => {
+      const { container } = render(
+        <FieldContext.Provider value={values}>
+          <Messages />
+        </FieldContext.Provider>,
+      );
+      expect(container.getElementsByClassName("message").length).toBe(2);
+    });
+    it("renders number of messages equal to length of messages array provided by FieldsetContext.Provided", () => {
+      const { container } = render(
+        <FieldsetContext.Provider value={values}>
+          <Messages />
+        </FieldsetContext.Provider>,
+      );
+      expect(container.getElementsByClassName("message").length).toBe(2);
+    });
+    it("messages have id {controlId}-message-{index} where controlId is passed by provider and index is index of message", () => {
+      const { container } = render(
+        <FieldsetContext.Provider value={values}>
+          <Messages />
+        </FieldsetContext.Provider>,
+      );
+      expect(container.getElementsByClassName("message").length).toBe(2);
+      for (let i in values.messages) {
+        expect(
+          container.getElementsByClassName("message")[i].getAttribute("id"),
+        ).toBe(`id-message-${i}`);
+      }
+    });
+    it("messages have icons with classes based on type passed from messages array by provider", () => {
+      const { container } = render(
+        <FieldsetContext.Provider value={values}>
+          <Messages />
+        </FieldsetContext.Provider>,
+      );
+      expect(container.getElementsByClassName("message").length).toBe(2);
+      for (let i in values.messages) {
+        expect(
+          container.getElementsByClassName("message")[i].querySelector("svg"),
+        ).toHaveClass("icon--info");
+      }
+    });
+    it("messages have children passed from messages array by provider", () => {
+      const { container } = render(
+        <FieldsetContext.Provider value={values}>
+          <Messages />
+        </FieldsetContext.Provider>,
+      );
+      expect(container.getElementsByClassName("message").length).toBe(2);
+      for (let i in values.messages) {
+        expect(container.getElementsByClassName("message")[i].textContent).toBe(
+          `message-${parseInt(i) + 1}`,
+        );
+      }
+    });
+
+    it("renders only messages with isMain attribute set to true when isMain prop is passed", () => {
+      const { container } = render(
+        <FieldsetContext.Provider value={values2}>
+          <Messages isMain />
+        </FieldsetContext.Provider>,
+      );
+      expect(container.getElementsByClassName("message").length).toBe(1);
+      expect(container.getElementsByClassName("message")[0].textContent).toBe(
+        "message-1",
+      );
+    });
+    it("renders messages with isMain atrribute not set when isMain prop not is passed", () => {
+      const { container } = render(
+        <FieldsetContext.Provider value={values2}>
+          <Messages />
+        </FieldsetContext.Provider>,
+      );
+      expect(container.getElementsByClassName("message").length).toBe(1);
+      expect(container.getElementsByClassName("message")[0].textContent).toBe(
+        "message-2",
+      );
+    });
+  });
+});

package/src/components/Forms/Field/tests/Radio.Field.conformance.test.js

@@ -0,0 +1,43 @@
+import { render } from "@testing-library/react";
+import { axe } from "jest-axe";
+
+import { Field } from "../";
+
+const example = (
+  <>
+    <Field label="Field Label" control={{ type: "radio", name: "radio-1" }} />
+    <Field
+      label="Field Label"
+      control={{ type: "radio", name: "radio-1" }}
+      tooltip="info tooltip"
+    />
+    <Field
+      label="Field Label"
+      hint="Field hint with long text"
+      control={{ type: "radio", name: "radio-1" }}
+    />
+    <Field
+      label="Field Label"
+      control={{ type: "radio", name: "radio-1" }}
+      messages={[
+        { type: "info", text: "Info message with lorem ipsum long text ipsum" },
+      ]}
+    />
+    <div id="root-tooltips" />
+  </>
+);
+
+it("is valid html", () => {
+  const { container } = render(example);
+  expect(container).toHTMLValidate({
+    rules: {
+      "no-inline-style": "off",
+      "attribute-boolean-style": "off",
+    },
+  });
+});
+
+it("is accessible", async () => {
+  const { container } = render(example);
+  expect(await axe(container)).toHaveNoViolations();
+});

package/src/components/Forms/Field/tests/Rangeslider.Field.test.js

@@ -0,0 +1,60 @@
+import { render } from "@testing-library/react";
+import { axe } from "jest-axe";
+
+import { Field } from "../";
+
+const getConfig = () => ({
+  connect: [true, false],
+  range: {
+    max: 50,
+    min: 0,
+  },
+  start: [0],
+  handleAttributes: [{ "aria-label": "Handle" }],
+});
+
+const example = (
+  <>
+    <Field
+      id="range-1"
+      label="Field Label"
+      control={{ type: "range", config: getConfig("range-1-label") }}
+    />
+    <Field
+      id="range-2"
+      label="Field Label"
+      control={{ type: "range", config: getConfig("range-2-label") }}
+      tooltip="info tooltip"
+    />
+    <Field
+      id="range-3"
+      label="Field Label"
+      hint="Field hint with long text"
+      control={{ type: "range", config: getConfig("range-3-label") }}
+    />
+    <Field
+      id="range-4"
+      label="Field Label"
+      control={{ type: "range", config: getConfig("range-4-label") }}
+      messages={[
+        { type: "info", text: "Info message with lorem ipsum long text ipsum" },
+      ]}
+    />
+    <div id="root-tooltips" />
+  </>
+);
+
+it("is valid html", () => {
+  const { container } = render(example);
+  expect(container).toHTMLValidate({
+    rules: {
+      "no-inline-style": "off",
+      "attribute-boolean-style": "off",
+    },
+  });
+});
+
+it("is accessible", async () => {
+  const { container } = render(example);
+  expect(await axe(container)).toHaveNoViolations();
+});