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

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

@@ -0,0 +1,45 @@
+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: "select", options }} />
+    <Field
+      label="Field Label"
+      control={{ type: "select", options }}
+      tooltip="info tooltip"
+    />
+    <Field
+      label="Field Label"
+      hint="Field hint with long text"
+      control={{ type: "select", options }}
+    />
+    <Field
+      label="Field Label"
+      control={{ type: "select", 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",
+      "attribute-boolean-style": "off",
+    },
+  });
+});
+
+it("is accessible", async () => {
+  const { container } = render(example);
+  expect(await axe(container)).toHaveNoViolations();
+});

package/src/components/Forms/Field/tests/Text.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: "text" }} />
+    <Field
+      label="Field Label"
+      control={{ type: "text" }}
+      tooltip="info tooltip"
+    />
+    <Field
+      label="Field Label"
+      hint="Field hint with long text"
+      control={{ type: "text" }}
+    />
+    <Field
+      label="Field Label"
+      control={{ type: "text" }}
+      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/Textarea.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: "textarea" }} />
+    <Field
+      label="Field Label"
+      control={{ type: "textarea" }}
+      tooltip="info tooltip"
+    />
+    <Field
+      label="Field Label"
+      hint="Field hint with long text"
+      control={{ type: "textarea" }}
+    />
+    <Field
+      label="Field Label"
+      control={{ type: "textarea" }}
+      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/Tooltip.unit.test.js

@@ -0,0 +1,38 @@
+import { render } from "@testing-library/react";
+
+import { FormTooltip } from "../Tooltip";
+import Base from "../../../Tooltip/tests/BaseWrapper";
+
+//id is required
+describe("rendering Tooltip", () => {
+  let tooltip;
+
+  beforeEach(() => {
+    tooltip = render(
+      <Base>
+        <FormTooltip data-testid="test-id" id="test">
+          test
+        </FormTooltip>
+      </Base>,
+    );
+  });
+  it("renders children", () => {
+    const { getByText } = tooltip;
+    expect(getByText("test")).toBeInTheDocument();
+  });
+  it("has class form-field__tooltip", () => {
+    const { container } = tooltip;
+    expect(container.querySelector("svg")).toBeInTheDocument();
+    expect(container.querySelector("svg")).toHaveClass("form-field__tooltip");
+  });
+  it("has data-tooltip-placement set to right", () => {
+    const { getByTestId } = tooltip;
+    expect(getByTestId("test-id").getAttribute("data-tooltip-placement")).toBe(
+      "right",
+    );
+  });
+  it("has id attribute test-tooltip when id prop is set to test", () => {
+    const { getByTestId } = tooltip;
+    expect(getByTestId("test-id").getAttribute("id")).toBe("test-tooltip");
+  });
+});

package/src/components/Forms/Field/utils.ts

@@ -0,0 +1,36 @@
+import React from "react";
+import generateId from "../../../utils/generateId";
+
+interface Message {
+  // Define the structure of a message if known, otherwise use any
+  [key: string]: any;
+}
+
+export const getDescribedBy = (
+  hint: string | undefined | React.ReactNode,
+  messages: Message[],
+  tooltip: string | undefined | React.ReactNode,
+  id: string,
+): string =>
+  [
+    ...(hint ? [`${id}-hint`] : []), // this spread ensures we don't add an undefined array item
+    ...messages.map((_, i) => `${id}-message-${i}`),
+    ...(tooltip ? [`${id}-tooltip`] : []),
+  ].join(" ");
+
+interface InnerControl {
+  id?: string;
+  [key: string]: any;
+}
+
+interface Control {
+  id?: string;
+  control?: InnerControl;
+  [key: string]: any;
+}
+
+export const getControlId = (control: Control): string => {
+  const { id, control: innerControl } = control;
+
+  return id ?? (innerControl && innerControl.id) ?? generateId();
+};

package/src/components/Forms/Fieldset/Fieldset.mdx

@@ -0,0 +1,178 @@
+import { ComponentDocs } from '@lighting-beetle/lighter-styleguide';
+
+import { Preview } from '../../../styleguide/';
+import Bar, { BarItem } from '../../Bar';
+import Field from '../Field';
+
+import Fieldset from './';
+
+import {
+  deliveryFields,
+  deliveryValues,
+  inlineDateFields,
+  separateMessages,
+  inlineErrorFields,
+  deliveryStateFields,
+} from './docsData';
+
+# Fieldset
+
+Related inputs should be wrapped by a fieldset. For example when asking for address, the fields are closely related and should be grouped together.
+
+The legend element **must** be the first descendant of the fieldset.
+
+export const DeliveryFields = ({ items }) => (
+  <>
+    {items.map(item => (
+      <Field {...item} key={item.label} />
+    ))}
+  </>
+);
+
+<Preview>
+  <Fieldset legend="Adresa doručenia">
+    <DeliveryFields items={deliveryFields} />
+  </Fieldset>
+</Preview>
+
+## Fieldset main error
+
+In case of whole fieldset problem, we define main fieldset error above fieldset itself.
+
+<Preview>
+  <Fieldset
+    legend="Adresa doručenia"
+    messages={[
+      {
+        type: 'error',
+        isMain: true,
+        text: 'Adresa doručenia je prázdna. Vypíšte polia adresy doručenia.',
+      },
+    ]}
+  >
+    <DeliveryFields items={deliveryFields} />
+  </Fieldset>
+</Preview>
+
+## Block field errors
+
+In case of only separate field problems, we show field errors under corresponding
+field as usual.
+
+<Preview>
+  <Fieldset legend="Adresa doručenia">
+    <DeliveryFields items={deliveryStateFields} />
+  </Fieldset>
+</Preview>
+
+## Known date with description
+
+Manual entry date fields are used when users knows or can look up the date
+without using a calendar (e.g. birthday, document validity dates).
+
+A fieldset can be described by referencing the describing element via
+`aria-describedby` on the `fieldset` element.
+
+export const description = (
+  <p id="birthday-description">Napríklad 29. 8. 1944</p>
+);
+
+export const Fields = ({ items }) => (
+  <Bar className="mb-none">
+    {items.map(item => (
+      <BarItem key={item.label}>
+        <Field {...item} />
+      </BarItem>
+    ))}
+  </Bar>
+);
+
+<Preview>
+  <Fieldset
+    legend="Deň narodenia"
+    legendProps={{ className: 'mb-small' }}
+    aria-describedby="birthday-description"
+    description={description}
+  >
+    <Fields items={inlineDateFields} />
+  </Fieldset>
+</Preview>
+
+## Fieldset main error
+
+In case of whole fieldset problem, we define main fieldset error above fieldset itself.
+
+<Preview>
+  <Fieldset
+    legend="Dátum narodenia"
+    legendProps={{ className: 'mb-small' }}
+    aria-describedby="birthday-description"
+    messages={[
+      {
+        type: 'error',
+        isMain: true,
+        text: 'Vypíšte "Dátum narodenia".',
+      },
+    ]}
+    description={description}
+  >
+    <Fields items={inlineDateFields} />
+  </Fieldset>
+</Preview>
+
+## Inline fields errors
+
+In case of separate field problems, inline field errors are stacked under the
+fieldset in order of the fields and fields style changes to error state style.
+
+<Preview>
+  <Fieldset
+    legend="Deň narodenia"
+    legendProps={{ className: 'mb-small' }}
+    aria-describedby="birthday-description"
+    messages={separateMessages}
+    description={description}
+  >
+    <Fields items={inlineErrorFields} />
+  </Fieldset>
+</Preview>
+
+## Legend as h1
+
+When a form is the only element on the page, the first level heading can be placed inside the legend.
+
+<Preview>
+  <Fieldset legend={<h1>Kam to bude?</h1>}>
+    <Field label="Mesto" control={{ type: 'text' }} />
+  </Fieldset>
+</Preview>
+
+## Complex layouts
+
+The [HTML5 spec defines](https://html.spec.whatwg.org/#the-legend-element) dictates, that a `legend` can only be used as the first child of a fieldset element. Moreover, `fieldset` and `legend` are [replaced elements](https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element), making them very difficult to style (for example flexbox does not work here).
+
+Fortunately, this can be solved using ARIA. The `fieldset`s implicit role is `group`, while `legend` serves as a label.
+
+<Preview>
+  <div role="group" aria-labelledby="group-label">
+    <Bar>
+      <BarItem>
+        <div id="group-label">Sort by: </div>
+      </BarItem>
+      <BarItem>
+        <Field label="Price" control={{ type: 'radio', name: 'filter' }} />
+      </BarItem>
+      <BarItem>
+        <Field label="Alphabet" control={{ type: 'radio', name: 'filter' }} />
+      </BarItem>
+    </Bar>
+  </div>
+</Preview>
+
+## Props
+
+<ComponentDocs title="<Fieldset />" component={Fieldset} />
+
+## Accessibility
+
+Fieldsets group inputs into logic parts of a form. A screenreader usually announces the filedset legend along with the label of each nested input, which helps users stay in context when tabbing through different inputs within a fieldset. For example a color switch would consist of radio buttons wrapped in a fieldset, with a legend reading "Color". A screenreader would then read each input's label prefixed with the legend contnets (e.g. Color blue, color red, color green...).

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

@@ -0,0 +1,62 @@
+import React, { ReactNode } from "react";
+import cx from "classnames";
+
+import { Messages } from "../Field/Messages";
+
+import { FieldsetContext } from "./FieldsetContext";
+
+export interface FieldsetMessage {
+  [key: string]: any;
+}
+
+export interface FieldsetProps
+  extends React.FieldsetHTMLAttributes<HTMLFieldSetElement> {
+  /** Required `<legend />` for fieldset */
+  legend: ReactNode;
+  /** Additional legend props */
+  legendProps?: React.HTMLAttributes<HTMLLegendElement>;
+  description?: ReactNode;
+  messages?: FieldsetMessage[];
+  className?: string;
+  children?: ReactNode;
+}
+
+const CLASS_ROOT = "fieldset";
+
+const Fieldset: React.FC<FieldsetProps> = ({
+  legend,
+  legendProps,
+  description,
+  className,
+  children,
+  messages,
+  ...other
+}) => {
+  const classes = cx(CLASS_ROOT, className);
+
+  return (
+    <fieldset className={classes} {...other}>
+      <legend {...legendProps}>{legend}</legend>
+      {description}
+      {messages ? (
+        <FieldsetContext.Provider
+          value={{
+            // @ts-expect-error wrong type declarations
+            messages,
+          }}
+        >
+          <Messages isMain />
+
+          {children}
+          <Messages />
+        </FieldsetContext.Provider>
+      ) : (
+        children
+      )}
+    </fieldset>
+  );
+};
+
+Fieldset.displayName = "Fieldset";
+
+export { Fieldset };

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

@@ -0,0 +1,13 @@
+"use client";
+
+import { createContext } from "react";
+import type { MessageType } from "../Field/Messages";
+
+export interface FieldsetContextType {
+  controlId?: string;
+  messages?: MessageType[];
+}
+
+const FieldsetContext = createContext<FieldsetContextType | null>(null);
+
+export { FieldsetContext };

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

@@ -0,0 +1,75 @@
+export const deliveryFields = [
+  { label: "Adresa", control: { type: "text" } },
+  { label: "Mesto", control: { type: "text" } },
+  { label: "PSČ", control: { type: "text" } },
+  { label: "Štát", control: { type: "text" } },
+];
+
+export const deliveryValues = ["Gunduličová 4", "Bratislava", "81105", ""];
+
+export const inlineDateFields = [
+  {
+    label: "Deň",
+    control: { type: "text", width: "12ch" },
+    pattern: "[0-9]*",
+    inputMode: "numeric",
+  },
+  {
+    label: "Mesiac",
+    control: { type: "text", width: "12ch" },
+    pattern: "[0-9]*",
+    inputMode: "numeric",
+  },
+  {
+    label: "Rok",
+    control: { type: "text", width: "12ch" },
+    pattern: "[0-9]*",
+    inputMode: "numeric",
+  },
+];
+
+export const separateMessages = [
+  {
+    type: "error",
+    fieldLabel: "Deň",
+    text: `Políčko "Deň" je prázdne. Vypíšte "Deň".`,
+  },
+  {
+    type: "error",
+    fieldLabel: "Mesiac",
+    text: `Políčko "Mesiac" je prázdne. Vypíšte "Mesiac".`,
+  },
+];
+
+export const inlineErrorFields = inlineDateFields.map((f) =>
+  separateMessages.find((m) => m.type === "error" && m.fieldLabel === f.label)
+    ? { ...f, control: { ...f.control, isInvalid: true } }
+    : { ...f, control: { ...f.control, defaultValue: "2020", isValid: true } },
+);
+
+export const deliveryStateFields = deliveryFields
+  .map((df, i) => ({
+    ...df,
+    control: {
+      ...df.control,
+      defaultValue: deliveryValues[i],
+    },
+  }))
+  .map((df) => ({
+    ...df,
+    ...(!df?.control?.defaultValue
+      ? {
+          messages: [
+            {
+              type: "error",
+              text: `Políčko "${df.label}" je prázdne. Vypíšte políčko "${df.label}".`,
+            },
+          ],
+        }
+      : {
+          control: {
+            ...df.control,
+            isValid: true,
+          },
+        }),
+  }));

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

@@ -0,0 +1,3 @@
+import "./styles/style.scss";
+
+export { Fieldset } from "./Fieldset";

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

@@ -0,0 +1,6 @@
+@use '../../../../styles/tokens/space';
+
+@mixin legend-base {
+  font-weight: bold;
+  margin-bottom: space.get();
+};

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

@@ -0,0 +1,10 @@
+@use "./mixins";
+
+@layer components {
+  legend {
+    @include mixins.legend-base();
+    > * {
+      margin-bottom: 0;
+    }
+  }
+}

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

@@ -0,0 +1,63 @@
+import { render } from "@testing-library/react";
+
+import { Fieldset } from "../Fieldset";
+
+//legend is required
+describe("rendering Fieldset", () => {
+  describe("initial state", () => {
+    it("has default class fieldset", () => {
+      const { getByTestId } = render(
+        <Fieldset data-testid="test-id" legend="test" />,
+      );
+      expect(getByTestId("test-id")).toHaveClass("fieldset");
+    });
+  });
+  describe("passed props", () => {
+    const messages = [
+      { type: "info", text: "message-1", isMain: true },
+      { type: "info", text: "message-2" },
+    ];
+    it("has additional class when className is set", () => {
+      const { getByTestId } = render(
+        <Fieldset data-testid="test-id" legend="test" className="test-class" />,
+      );
+      expect(getByTestId("test-id")).toHaveClass("fieldset");
+      expect(getByTestId("test-id")).toHaveClass("test-class");
+    });
+    it("renders legend", () => {
+      const { container } = render(<Fieldset legend="test" />);
+      expect(container.querySelector("legend")).toBeInTheDocument();
+      expect(container.querySelector("legend").textContent).toBe("test");
+    });
+    it("renders children", () => {
+      const { getByText } = render(
+        <Fieldset legend="test">test-child</Fieldset>,
+      );
+      expect(getByText("test-child")).toBeInTheDocument();
+    });
+    it("renders description", () => {
+      const { getByText } = render(
+        <Fieldset legend="test" description="test-description" />,
+      );
+      expect(getByText("test-description")).toBeInTheDocument();
+    });
+    it("passes props to legend", () => {
+      const { container } = render(
+        <Fieldset legend="test" legendProps={{ id: "test" }} />,
+      );
+      expect(container.querySelector("legend")).toBeInTheDocument();
+      expect(container.querySelector("legend").id).toBe("test");
+    });
+    it("renders messages", () => {
+      const { container } = render(
+        <Fieldset legend="test" messages={messages} />,
+      );
+      expect(container.getElementsByClassName("message").length).toBe(2);
+      for (let i in messages) {
+        expect(container.getElementsByClassName("message")[i].textContent).toBe(
+          `message-${parseInt(i) + 1}`,
+        );
+      }
+    });
+  });
+});