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

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

@@ -0,0 +1,280 @@
+import React from "react";
+import { render } from "@testing-library/react";
+
+import Breadcrumbs from "../Breadcrumbs";
+
+const itemsArr = [
+  { url: "/test1", text: "test1-text" },
+  { text: "test2-test" },
+  { url: "/test3", text: "test3-text" },
+];
+
+const complexItemsArr = [
+  { url: "/home", text: "Domov" },
+  { url: "/products", text: "Produkty" },
+  { url: "/electronics", text: "Elektronika" },
+  { text: "Mobilné telefóny" },
+];
+
+// items array is required
+describe("rendering Breadcrumbs", () => {
+  describe("initial state", () => {
+    it("has default class osk-breadcrumbs", () => {
+      const { getByTestId } = render(
+        <Breadcrumbs items={[]} data-testid="test-id" />,
+      );
+      expect(getByTestId("test-id")).toHaveClass("osk-breadcrumbs");
+    });
+
+    it("ordered list has default class osk-breadcrumbs__container", () => {
+      const { container } = render(<Breadcrumbs items={[]} />);
+      const orderList = container.querySelector("ol");
+      expect(orderList).toBeInTheDocument();
+      expect(orderList).toHaveClass("osk-breadcrumbs__container");
+    });
+
+    it("renders empty breadcrumbs when items array is empty", () => {
+      const { container } = render(<Breadcrumbs items={[]} />);
+      const listItems = container.querySelectorAll("li");
+      expect(listItems).toHaveLength(0);
+    });
+
+    it("renders nav element with proper semantic structure", () => {
+      const { container } = render(<Breadcrumbs items={[]} />);
+      const nav = container.querySelector("nav");
+      const ol = container.querySelector("ol");
+      expect(nav).toBeInTheDocument();
+      expect(ol).toBeInTheDocument();
+      expect(nav).toContainElement(ol);
+    });
+  });
+
+  describe("passed props", () => {
+    it("passes other props", () => {
+      const { getByTestId } = render(
+        <Breadcrumbs data-testid="test" items={[]} />,
+      );
+      expect(getByTestId("test")).toBeInTheDocument();
+    });
+
+    it("has additional class when className is set", () => {
+      const { getByTestId } = render(
+        <Breadcrumbs data-testid="test-id" className="test-class" items={[]} />,
+      );
+      expect(getByTestId("test-id")).toHaveClass("osk-breadcrumbs");
+      expect(getByTestId("test-id")).toHaveClass("test-class");
+    });
+
+    it("nav element has aria-label attribute when label prop is passed", () => {
+      const { container } = render(
+        <Breadcrumbs data-testid="test" items={[]} label="test-label" />,
+      );
+      expect(container.querySelector("nav").getAttribute("aria-label")).toBe(
+        "test-label",
+      );
+    });
+
+    it("has class osk-breadcrumbs--dark when darkMode prop is passed", () => {
+      const { container } = render(<Breadcrumbs items={[]} darkMode />);
+      expect(
+        container.getElementsByClassName("osk-breadcrumbs--dark").length,
+      ).toBe(1);
+    });
+
+    it("combines multiple CSS classes correctly", () => {
+      const { getByTestId } = render(
+        <Breadcrumbs
+          data-testid="test-id"
+          className="custom-class another-class"
+          items={[]}
+        />,
+      );
+      expect(getByTestId("test-id")).toHaveClass("osk-breadcrumbs");
+      expect(getByTestId("test-id")).toHaveClass("custom-class");
+      expect(getByTestId("test-id")).toHaveClass("another-class");
+    });
+
+    it("renders correct number of breadcrumb items", () => {
+      const { container } = render(<Breadcrumbs items={itemsArr} />);
+      const listItems = container.querySelectorAll("li");
+      expect(listItems).toHaveLength(itemsArr.length);
+    });
+
+    itemsArr.map(({ url, text }, index) => {
+      it(`renders BreadcrumbItem with text ${text} ${
+        url ? "inside anchor element with url " + url : ""
+      }`, () => {
+        const { container } = render(<Breadcrumbs items={itemsArr} />);
+        const listElements = container.querySelectorAll("li");
+        expect(listElements[index].textContent).toBe(text);
+        if (url) {
+          expect(listElements[index].children[0].getAttribute("href")).toBe(
+            url,
+          );
+        }
+      });
+    });
+
+    it("if last item renders anchor element, this element has aria-current attribute set to 'page'", () => {
+      const { container } = render(<Breadcrumbs items={itemsArr} />);
+      const listElements = container.querySelectorAll("li");
+      expect(
+        listElements[listElements.length - 1].children[0].getAttribute(
+          "aria-current",
+        ),
+      ).toBe("page");
+    });
+
+    it("marks last item as current page even without URL", () => {
+      const { container } = render(<Breadcrumbs items={complexItemsArr} />);
+      const listElements = container.querySelectorAll("li");
+      const lastItem = listElements[listElements.length - 1];
+
+      // Last item should not have an anchor tag since it has no URL
+      expect(lastItem.querySelector("a")).not.toBeInTheDocument();
+      expect(lastItem.textContent).toBe("Mobilné telefóny");
+    });
+
+    it("renders all items with correct text content", () => {
+      const { container } = render(<Breadcrumbs items={complexItemsArr} />);
+      const listElements = container.querySelectorAll("li");
+
+      complexItemsArr.forEach((item, index) => {
+        expect(listElements[index].textContent).toBe(item.text);
+      });
+    });
+
+    it("renders anchor elements with correct href attributes", () => {
+      const { container } = render(<Breadcrumbs items={complexItemsArr} />);
+      const anchors = container.querySelectorAll("a");
+
+      // Should have 3 anchors (last item has no URL)
+      expect(anchors).toHaveLength(3);
+
+      anchors.forEach((anchor, index) => {
+        expect(anchor.getAttribute("href")).toBe(complexItemsArr[index].url);
+      });
+    });
+
+    it("applies correct CSS classes to anchor elements", () => {
+      const { container } = render(<Breadcrumbs items={complexItemsArr} />);
+      const anchors = container.querySelectorAll("a");
+
+      anchors.forEach((anchor) => {
+        expect(anchor).toHaveClass("osk-breadcrumbs__link");
+      });
+    });
+  });
+
+  describe("accessibility", () => {
+    it("has proper navigation structure", () => {
+      const { container } = render(
+        <Breadcrumbs items={complexItemsArr} label="Navigácia" />,
+      );
+
+      const nav = container.querySelector("nav");
+      const ol = container.querySelector("ol");
+
+      expect(nav).toHaveAttribute("aria-label", "Navigácia");
+      expect(ol).toBeInTheDocument();
+      expect(nav).toContainElement(ol);
+    });
+
+    it('last item has aria-current="page" when it has URL', () => {
+      const itemsWithLastUrl = [
+        { url: "/home", text: "Domov" },
+        { url: "/current", text: "Aktuálna stránka" },
+      ];
+
+      const { container } = render(<Breadcrumbs items={itemsWithLastUrl} />);
+      const listElements = container.querySelectorAll("li");
+      const lastItem = listElements[listElements.length - 1];
+      const lastAnchor = lastItem.querySelector("a");
+
+      expect(lastAnchor).toHaveAttribute("aria-current", "page");
+    });
+
+    it("last item without URL is still marked as current", () => {
+      const { container } = render(<Breadcrumbs items={complexItemsArr} />);
+      const listElements = container.querySelectorAll("li");
+      const lastItem = listElements[listElements.length - 1];
+
+      // Last item should be the current page even without URL
+      expect(lastItem.textContent).toBe("Mobilné telefóny");
+    });
+  });
+
+  describe("edge cases", () => {
+    it("handles single item correctly", () => {
+      const singleItem = [{ text: "Domov" }];
+      const { container } = render(<Breadcrumbs items={singleItem} />);
+
+      const listItems = container.querySelectorAll("li");
+      expect(listItems).toHaveLength(1);
+      expect(listItems[0].textContent).toBe("Domov");
+    });
+
+    it("handles single item with URL correctly", () => {
+      const singleItemWithUrl = [{ url: "/home", text: "Domov" }];
+      const { container } = render(<Breadcrumbs items={singleItemWithUrl} />);
+
+      const listItems = container.querySelectorAll("li");
+      const anchor = container.querySelector("a");
+
+      expect(listItems).toHaveLength(1);
+      expect(anchor).toHaveAttribute("href", "/home");
+      expect(anchor).toHaveAttribute("aria-current", "page");
+    });
+
+    it("handles items with special characters in text", () => {
+      const specialItems = [
+        { url: "/test", text: "Test & More" },
+        { text: "Special: Characters!" },
+      ];
+
+      const { container } = render(<Breadcrumbs items={specialItems} />);
+      const listItems = container.querySelectorAll("li");
+
+      expect(listItems[0].textContent).toBe("Test & More");
+      expect(listItems[1].textContent).toBe("Special: Characters!");
+    });
+
+    it("handles items with empty text gracefully", () => {
+      const emptyTextItems = [
+        { url: "/test", text: "" },
+        { text: "Valid text" },
+      ];
+
+      const { container } = render(<Breadcrumbs items={emptyTextItems} />);
+      const listItems = container.querySelectorAll("li");
+
+      expect(listItems[0].textContent).toBe("");
+      expect(listItems[1].textContent).toBe("Valid text");
+    });
+  });
+
+  describe("interaction", () => {
+    it("anchor elements are clickable", async () => {
+      const { container } = render(<Breadcrumbs items={complexItemsArr} />);
+
+      const anchors = container.querySelectorAll("a");
+      expect(anchors).toHaveLength(3);
+
+      // Test that anchors are focusable
+      for (const anchor of anchors) {
+        expect(anchor).toHaveAttribute("href");
+        expect(anchor).not.toBeDisabled();
+      }
+    });
+
+    it("maintains proper tab order", () => {
+      const { container } = render(<Breadcrumbs items={complexItemsArr} />);
+      const anchors = container.querySelectorAll("a");
+
+      // All anchors should be focusable
+      anchors.forEach((anchor) => {
+        expect(anchor).toHaveAttribute("href");
+      });
+    });
+  });
+});

package/src/components/Button/Button.mdx

@@ -0,0 +1,273 @@
+import { ComponentDocs, Code } from '@lighting-beetle/lighter-styleguide';
+
+import { Preview } from '../../styleguide/';
+import { Grid, GridCol, Icon, Bar, BarItem } from '../';
+
+import Button from './Button';
+import IconButton from './IconButton';
+
+export const buttonVariants = ['default', 'primary', 'fill', 'ghost'];
+
+# Button
+
+Buttons are control elements used for navigating and operating a page and form submission.
+
+## Example
+
+<Button>Button</Button>
+
+## Elements
+
+The `<Button />` component can render as `<a>` or `<button>`. Take care to always use the appropriate element:
+
+- `<a>` if it takes you somewhere (on page or elsewhere)
+- `<button>` if it does something (controls a section, submits a form, etc.)
+
+[Additional resources](#additional-resources)
+
+<Preview>
+  <Button>Button</Button>
+  <br />
+  <Button href="#">Anchor</Button>
+</Preview>
+
+## Arrangement
+
+The Button component implements right and bottom margin to ensure horizontal flow between multiple button elements and vertical flow with regular text. In case your buttons might break into multiple lines, use the [Buttons component](/components/buttons). The following example shows, that buttons flow nicely between paragraphs and the non-ideal case when they break into multiple lines.
+
+<Preview>
+  <p>
+    Buttons sit next to each other and provide necessary spacing when used in
+    regular text
+  </p>
+  <Button>Button 1</Button>
+  <Button>Button 2</Button>
+  <p>This paragraph is offset byt the bottom margin of preceeding buttons</p>
+  <Button>Don't do this</Button>
+  <br />
+  <Button href="/components/buttons">Wrap us in Buttons</Button>
+  <p>
+    When buttons might break into multiple lines, wrap them usng{' '}
+    <a href="/components/buttons">Buttons component</a> for better vertical
+    spacing.
+  </p>
+</Preview>
+
+## Variants
+
+<React.Fragment>
+  {buttonVariants.map(variant => {
+    const variantProp = variant === 'default' ? undefined : variant;
+    const variantName = variant.charAt(0).toUpperCase() + variant.slice(1);
+    return (
+      <React.Fragment key={variant}>
+        <h3>{variantName}</h3>
+        <Preview>
+          <Button type={variantProp}>{variantName}</Button>
+          <Button type={variantProp} isActive>
+            {variantName} active
+          </Button>
+          <Button type={variantProp} isDisabled>
+            {variantName} disabled
+          </Button>
+        </Preview>
+      </React.Fragment>
+    );
+  })}
+</React.Fragment>
+<React.Fragment>
+  {buttonVariants.map(variant => {
+    const variantProp = variant === 'default' ? undefined : variant;
+    const variantName = variant.charAt(0).toUpperCase() + variant.slice(1);
+    return (
+      <React.Fragment key={variant}>
+        <h3>{variantName} inverse </h3>
+        <Preview bgTheme="black">
+          <Button isInverse type={variantProp}>
+            {variantName} inverse
+          </Button>
+          <Button isInverse type={variantProp} isActive>
+            {variantName} inverse active
+          </Button>
+          <Button isInverse type={variantProp} isDisabled>
+            {variantName} inverse disabled
+          </Button>
+        </Preview>
+      </React.Fragment>
+    );
+  })}
+</React.Fragment>
+
+## Default important
+
+When white background is used inside black background, button uses style defined for black one and therefore has incorrect colour scheme. For this case we have class .btn--default that forces button to use default styles.
+
+<Preview
+  code={
+    <div className="bg-black">
+      <div className="bg-white">
+        <Button isDefault>button</Button>
+        <Button>button</Button>
+      </div>
+    </div>
+  }
+>
+  <div className="bg-black" style={{ padding: '15px', paddingTop: '30px' }}>
+    <div className="bg-white">
+      <Bar>
+        <BarItem>
+          <Button isDefault>button</Button>
+        </BarItem>
+        <BarItem>{'<-- button with btn--default class'}</BarItem>
+      </Bar>
+      <Bar className="mb-none">
+        <BarItem>
+          <Button>button</Button>
+        </BarItem>
+        <BarItem>{"<-- there's a button"}</BarItem>
+      </Bar>
+    </div>
+  </div>
+</Preview>
+
+## Sizes
+
+<Preview>
+  <Button size="large">Large</Button>
+  <Button>Default</Button>
+  <Button size="small">Small</Button>
+</Preview>
+
+## Square
+
+Square buttons maintain their shape, no matter what you throw inside. They should be used for [icons](#icon-only).
+
+<Preview>
+  <Button isSquare size="small">
+    A
+  </Button>
+  <Button isSquare>A</Button>
+  <Button isSquare size="large">
+    A
+  </Button>
+  <br />
+  <Button isSquare size="small">
+    Overflow
+  </Button>
+  <Button isSquare>Overflow</Button>
+  <Button isSquare size="large">
+    Overflow
+  </Button>
+</Preview>
+
+## Icons
+
+### Icon only
+
+<Preview>
+  <IconButton size="small" isSquare iconName="settings">
+    Settings
+  </IconButton>
+  <IconButton isSquare iconName="settings">
+    Settings
+  </IconButton>
+  <IconButton size="large" isSquare iconName="settings">
+    Settings
+  </IconButton>
+  <br />
+  <IconButton type="ghost" size="small" isSquare iconName="settings">
+    Settings
+  </IconButton>
+  <IconButton type="ghost" isSquare iconName="settings">
+    Settings
+  </IconButton>
+  <IconButton type="ghost" size="large" isSquare iconName="settings">
+    Settings
+  </IconButton>
+</Preview>
+
+### Icon and text
+
+<Preview>
+  <IconButton type="primary" size="small" iconName="add">
+    Pridať
+  </IconButton>
+  <IconButton type="primary" iconName="add">
+    Pridať
+  </IconButton>
+  <IconButton type="primary" size="large" iconName="add">
+    Pridať
+  </IconButton>
+  <br />
+  <IconButton size="small" iconName="chevron-down" iconPosition="right">
+    Vybrať
+  </IconButton>
+  <IconButton iconName="chevron-down" iconPosition="right">
+    Vybrať
+  </IconButton>
+  <IconButton size="large" iconName="chevron-down" iconPosition="right">
+    Vybrať
+  </IconButton>
+  <br />
+  <IconButton
+    type="ghost"
+    size="small"
+    iconName="chevron-right"
+    iconPosition="right"
+  >
+    Ďalej
+  </IconButton>
+  <IconButton type="ghost" iconName="chevron-right" iconPosition="right">
+    Ďalej
+  </IconButton>
+  <IconButton
+    type="ghost"
+    size="large"
+    iconName="chevron-right"
+    iconPosition="right"
+  >
+    Ďalej
+  </IconButton>
+</Preview>
+
+## Props
+
+<ComponentDocs title="<Button />" component={Button} />
+<ComponentDocs title="<IconButton />" component={IconButton} />
+
+## Accessibility
+
+The `<Button />` component can render as `<a>` or `<button>`. Take care to always use the appropriate element. The rule of thumb is to use `<a>` if it takes you somewhere, `<button>` if it does something and `<button type="submit/rest">` if it's used as a form control. Check the [articles below](#additional-resources) for more information.
+
+### Color contrast
+
+Buttons do not meet [Success Criterion 1.4.3: Contrast (Minimum)](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html) due to insufficient contrast between white and orange brand colors.
+
+[Technique G145](https://www.w3.org/WAI/WCAG21/Techniques/general/G145) describes that increasing font size is sufficient to meet [Success Criterion 1.4.3: Contrast (Minimum)](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html), but a business decision has been made not to follow this for aesthetics reasons.
+
+### Don't disable buttons
+
+Especially form submit buttons. A disabled button is not keyboard focusable. Instead of using the `[disabled]` attribute, it's advised to rather use `[aria-disabled=true]` - it still remains focusable, and a screenreader can find it and announce it's contents, along with the information that it's disabled.
+
+Users should be able to submit incomplete and invalid forms, and should get relevant validation feedback, which explains what went wrong and how to fix it. It's considered a bad practice to let the user figure out thier errors themselves.
+
+### Icons
+
+While it's recommended to always show a textual label acompanying an icon, this rule can't be always followed. When this happens, always make sure there is a textual alternative readable by assistive technology. There are three options:
+
+- alt attribute on the icon OR
+- `[aria-label]` on the button element OR
+- a visually visually hidden but accessible element (e.g. `.sr-only`)
+
+### Additional resources
+
+- [When Is A Button Not A Button?](https://www.smashingmagazine.com/2019/02/buttons-interfaces/)
+- [Anchors, Buttons, And Accessibility](https://formidable.com/blog/2014/05/08/anchors-buttons-and-accessibility/)
+
+## Aliases
+
+```
+<ButtonPrimary /> === <Button type="primary" />
+<ButtonFill /> === <Button type="fill" />
+<ButtonGhost /> === <Button type="ghost" />
+```

package/src/components/Button/Button.tsx

@@ -0,0 +1,105 @@
+import React from "react";
+import cx from "classnames";
+
+export type ButtonSize = "small" | "large";
+export type ButtonType = "primary" | "fill" | "ghost";
+
+interface CommonProps {
+  elemRef?: React.Ref<any>;
+  htmlType?: "button" | "submit" | "reset";
+  isActive?: boolean;
+  isDefault?: boolean;
+  isDisabled?: boolean;
+  isInverse?: boolean;
+  isSquare?: boolean;
+  size?: ButtonSize;
+  type?: ButtonType;
+  className?: string;
+  children?: React.ReactNode;
+}
+
+type AnchorProps = CommonProps &
+  Omit<
+    React.AnchorHTMLAttributes<HTMLAnchorElement>,
+    keyof CommonProps | "type" | "ref"
+  > & {
+    href: string;
+  };
+
+type NativeButtonProps = CommonProps &
+  Omit<
+    React.ButtonHTMLAttributes<HTMLButtonElement>,
+    keyof CommonProps | "href" | "ref"
+  > & {
+    href?: undefined;
+  };
+
+export type ButtonProps = AnchorProps | NativeButtonProps;
+
+const CLASS_ROOT = "btn";
+
+const Button = React.forwardRef<any, ButtonProps>((props, ref) => {
+  const {
+    className,
+    children,
+    htmlType = "button",
+    href,
+    isActive,
+    isDefault,
+    isDisabled,
+    isInverse,
+    size,
+    isSquare,
+    type,
+    elemRef,
+    ...other
+  } = props;
+
+  const classes = cx(
+    CLASS_ROOT,
+    {
+      [`${CLASS_ROOT}--square`]: isSquare,
+      [`${CLASS_ROOT}--${size}`]: size,
+      [`${CLASS_ROOT}--${type}`]: type,
+      [`${CLASS_ROOT}--default`]: isDefault,
+      [`${CLASS_ROOT}--inverse`]: isInverse,
+      "is-active": isActive,
+    },
+    className,
+  );
+
+  if (href) {
+    // Anchor element
+    const anchorProps = other as React.AnchorHTMLAttributes<HTMLAnchorElement>;
+    return (
+      <a
+        href={href}
+        className={classes}
+        aria-disabled={isDisabled ? "true" : undefined}
+        ref={elemRef || ref}
+        {...anchorProps}
+      >
+        {children}
+      </a>
+    );
+  } else {
+    // Button element
+    const buttonProps = other as React.ButtonHTMLAttributes<HTMLButtonElement>;
+    return (
+      <button
+        type={htmlType}
+        className={classes}
+        disabled={isDisabled ? true : undefined}
+        aria-disabled={isDisabled ? "true" : undefined}
+        ref={elemRef || ref}
+        {...buttonProps}
+      >
+        {children}
+      </button>
+    );
+  }
+});
+
+Button.displayName = "Button";
+
+export { Button };