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

package/src/components/Modal/tests/ModalBody.unit.test.js

@@ -0,0 +1,39 @@
+import { render } from "@testing-library/react";
+
+import { ModalBody } from "../ModalBody";
+
+describe("rendering ModalBody", () => {
+  describe("initial state", () => {
+    it("renders div with class modal__body", () => {
+      const { getByTestId } = render(<ModalBody data-testid="test-id" />);
+      expect(getByTestId("test-id").tagName).toBe("DIV");
+      expect(getByTestId("test-id")).toHaveClass("modal__body");
+    });
+  });
+  describe("passed props", () => {
+    it("renders children", () => {
+      const { getByText } = render(<ModalBody>test</ModalBody>);
+      expect(getByText("test")).toBeInTheDocument();
+    });
+    [
+      "white",
+      "gray",
+      "orange",
+      "orange-dark",
+      "black",
+      "blue",
+      "green",
+      "pink",
+      "violet",
+      "yellow",
+    ].map((color) => {
+      it(`has classes bg-${color} and modal__body--colorful when color is set to ${color}`, () => {
+        const { getByTestId } = render(
+          <ModalBody color={color} data-testid="test-id" />,
+        );
+        expect(getByTestId("test-id")).toHaveClass(`bg-${color}`);
+        expect(getByTestId("test-id")).toHaveClass("modal__body--colorful");
+      });
+    });
+  });
+});

package/src/components/Modal/tests/ModalCloseButton.unit.test.js

@@ -0,0 +1,84 @@
+import { render } from "@testing-library/react";
+
+import { ModalCloseButton } from "../ModalCloseButton";
+
+describe("rendering ModalCloseButton", () => {
+  describe("initial state", () => {
+    it("renders button with class btn", () => {
+      const { getByTestId } = render(
+        <ModalCloseButton data-testid="test-id" />,
+      );
+      expect(getByTestId("test-id").tagName).toBe("BUTTON");
+      expect(getByTestId("test-id")).toHaveClass("btn");
+    });
+    it("renders icon with class icon--small", () => {
+      const { container } = render(<ModalCloseButton />);
+      expect(container.querySelector("svg")).toBeInTheDocument();
+      expect(container.querySelector("svg")).toHaveClass("icon--small");
+    });
+    it("renders span with class visually-hidden", () => {
+      const { container } = render(<ModalCloseButton>test</ModalCloseButton>);
+      expect(container.querySelector("span")).toBeInTheDocument();
+      expect(container.querySelector("span")).toHaveClass("visually-hidden");
+    });
+    it("icon has class modal__close", () => {
+      const { getByTestId } = render(
+        <ModalCloseButton data-testid="test-id" />,
+      );
+      expect(getByTestId("test-id")).toHaveClass("modal__close");
+    });
+    it("use element inside svg has /sprite.svg#delete xlinkhref", () => {
+      const { container } = render(<ModalCloseButton />);
+      expect(container.querySelector("svg").children.length).toBe(1);
+      expect(container.querySelector("svg").children[0].tagName).toBe("use");
+      expect(
+        container.querySelector("svg").children[0].getAttribute("xlink:href"),
+      ).toBe("/sprite.svg#delete");
+    });
+    it("icon has class icon--small", () => {
+      const { container } = render(<ModalCloseButton />);
+      expect(container.querySelector("svg")).toBeInTheDocument();
+      expect(container.querySelector("svg")).toHaveClass("icon--small");
+    });
+    it("button has class btn--small", () => {
+      const { container } = render(<ModalCloseButton />);
+      expect(container.querySelector("button")).toBeInTheDocument();
+      expect(container.querySelector("button")).toHaveClass("btn--small");
+    });
+    it("button has class btn--square", () => {
+      const { container } = render(<ModalCloseButton />);
+      expect(container.querySelector("button")).toBeInTheDocument();
+      expect(container.querySelector("button")).toHaveClass("btn--square");
+    });
+    it("button has class btn--ghost", () => {
+      const { container } = render(<ModalCloseButton />);
+      expect(container.querySelector("button")).toBeInTheDocument();
+      expect(container.querySelector("button")).toHaveClass("btn--ghost");
+    });
+    it("button has attribute data-a11y-dialog-hide set to true", () => {
+      const { container } = render(<ModalCloseButton />);
+      expect(container.querySelector("button")).toBeInTheDocument();
+      expect(
+        container.querySelector("button").getAttribute("data-a11y-dialog-hide"),
+      ).toBe("true");
+    });
+    it("button has attribute aria-label set to Zatvoriť", () => {
+      const { container } = render(<ModalCloseButton />);
+      expect(container.querySelector("button")).toBeInTheDocument();
+      expect(container.querySelector("button").getAttribute("aria-label")).toBe(
+        "Zatvoriť",
+      );
+    });
+  });
+  describe("passed props", () => {
+    it("renders children", () => {
+      const { getByText } = render(<ModalCloseButton>test</ModalCloseButton>);
+      expect(getByText("test")).toBeInTheDocument();
+    });
+    it("children are rendered inside span element", () => {
+      const { container } = render(<ModalCloseButton>test</ModalCloseButton>);
+      expect(container.querySelector("span")).toBeInTheDocument();
+      expect(container.querySelector("span").textContent).toBe("test");
+    });
+  });
+});

package/src/components/Modal/tests/ModalTitle.unit.test.js

@@ -0,0 +1,25 @@
+import React from "react";
+import { render } from "@testing-library/react";
+
+import { ModalTitle } from "../ModalTitle";
+
+describe("rendering Title", () => {
+  describe("passed props", () => {
+    it("renders children", () => {
+      const { getByText } = render(<ModalTitle>test</ModalTitle>);
+      expect(getByText("test")).toBeInTheDocument();
+    });
+    it("has class display-3 when size is set to large", () => {
+      const { getByTestId } = render(
+        <ModalTitle data-testid="test-id" size="large" />,
+      );
+      expect(getByTestId("test-id")).toHaveClass("display-3");
+    });
+    it("has class h3 when size is set to small", () => {
+      const { getByTestId } = render(
+        <ModalTitle data-testid="test-id" size="small" />,
+      );
+      expect(getByTestId("test-id")).toHaveClass("h2");
+    });
+  });
+});

package/src/components/Section/Section.mdx

@@ -0,0 +1,397 @@
+import { ComponentDocs } from "@lighting-beetle/lighter-styleguide";
+import { loremIpsum as lipsum } from "lorem-ipsum";
+import Preview, { PreviewSpacing } from "../../styleguide/Preview/";
+import cx from "classnames";
+import Grid, { GridCol } from "../Grid";
+import ToggleButton from "../../docs/utils/ToggleButton";
+import Button from "../Button";
+import { Section } from "./";
+
+# Section
+
+Section is an element that helps to separate page segments with consistent spacing. The content is automatically wrapped in a Container component for consistent layout and spacing.
+
+<Preview>
+  <Section children="This is a section. You can use it to space out certain parts of the page with standardized spaces. The content is wrapped in a Container component." />
+</Preview>
+
+## Structure
+
+Section automatically wraps its content in a Container component, which provides consistent layout constraints and spacing. This ensures that content is properly contained and aligned within the section.
+
+<Preview>
+  <Section>
+    <div style={{ border: "1px dashed #ccc", padding: "10px" }}>
+      This content is wrapped in a Container component
+    </div>
+  </Section>
+</Preview>
+
+## Colors
+
+<Preview>
+  <Section children="Gray Section" color="gray" />
+  <Section children="White (default) Section" />
+  <Section children="Black Section" color="black" />
+  <Section children="Orange Section" color="orange" />
+</Preview>
+
+## HTML Tags
+
+Section can render as different HTML elements using the `tag` prop. This is useful for semantic HTML structure.
+
+<Preview>
+  <Section children="Default div tag" />
+  <Section children="Section tag" tag="section" />
+  <Section children="Article tag" tag="article" />
+  <Section children="Main tag" tag="main" />
+  <Section children="Aside tag" tag="aside" />
+  <Section children="Header tag" tag="header" />
+  <Section children="Footer tag" tag="footer" />
+</Preview>
+
+## Spacing variants and rules
+
+### Default
+
+<PreviewSpacing>
+  <Section children="Default section" />
+</PreviewSpacing>
+
+### Small
+
+A small section has smaller spacing on its top side.
+
+<PreviewSpacing>
+  <Section children="Small section" spacing="small" />
+</PreviewSpacing>
+
+### Extra small
+
+This section has 10 px spacings from both top and bottom.
+
+<PreviewSpacing>
+  <Section children="Extra small section" spacing="xsmall" />
+</PreviewSpacing>
+
+### Rules
+
+First section appearing in a group of sections is always `default`. Following sections of the same color
+are `small`. Following sections of a different color are always `default`.
+
+Default, white, gray, black, and orange sections have these rules applied automatically without specifying the sections's size.
+
+<PreviewSpacing>
+  <Section children="Gray" color="gray" />
+  <Section children="Another gray" color="gray" />
+  <Section children="Black" color="black" />
+  <Section children="White" />
+  <Section children="Another white" />
+</PreviewSpacing>
+
+#### Breaking the rules
+
+Spacing rules can be broken using `section--default` and `section--small` classNames.
+
+<PreviewSpacing>
+  <Section
+    children="Small spacing breaking the rules (first section should be default)"
+    spacing="small"
+  />
+  <Section
+    children="Default spacing breaking the rules (adjacent section of the same color should be small)"
+    spacing="default"
+  />
+</PreviewSpacing>
+
+## Accessibility
+
+Section supports various accessibility features through ARIA attributes and semantic HTML tags. The Container wrapper maintains accessibility while providing consistent layout.
+
+### Semantic HTML
+
+Use appropriate HTML tags for better accessibility:
+
+<Preview>
+  <Section tag="main" aria-label="Main content">
+    <h1>Main Content</h1>
+    <p>
+      This section uses the main tag for semantic meaning and wraps content in a
+      Container.
+    </p>
+  </Section>
+</Preview>
+
+### ARIA Attributes
+
+<Preview>
+  <Section
+    tag="section"
+    aria-labelledby="section-title"
+    aria-describedby="section-description"
+  >
+    <h2 id="section-title">Section Title</h2>
+    <p id="section-description">
+      This section has proper ARIA labeling and Container wrapper.
+    </p>
+  </Section>
+</Preview>
+
+### Interactive Elements
+
+<Preview>
+  <Section>
+    <button type="button" onClick={() => alert("Button clicked!")}>
+      Interactive Button
+    </button>
+    <input type="text" aria-label="Search input" placeholder="Search..." />
+  </Section>
+</Preview>
+
+## Spacing problems and solutions
+
+### 1. Last element
+
+#### Problem:
+
+If there is **just one element at the end** of the section and this element has
+its **own bottom spacing** defined, these spaces would add up and we would lose spacing
+consistency.
+
+<PreviewSpacing>
+  <Section color="gray">
+    <p>
+      Et irure sit ut deserunt irure quis enim amet mollit. Adipisicing ullamco
+      adipisicing.
+    </p>
+    <Button type="primary">Button</Button>
+  </Section>
+</PreviewSpacing>
+
+#### Solution:
+
+1. remove last element spacing
+
+<PreviewSpacing>
+  <Section color="gray">
+    <p>
+      Et irure sit ut deserunt irure quis enim amet mollit. Adipisicing ullamco
+      adipisicing.
+    </p>
+    <Button type="primary" className="mb-none">
+      Button
+    </Button>
+  </Section>
+</PreviewSpacing>
+
+### 2. Stacking elements
+
+#### Problem:
+
+There are **multiple elements** in row at the end of a section and **they define their own
+bottom spacing** (`p` in this case, uses default `medium` margin), because
+they need to stack on smaller devices. The space of the section and elements
+would add up and we would lose spacing consistency.
+
+export const cols1 = [5, 2, 3, 4].map((count) => lipsum({ count }));
+
+<PreviewSpacing>
+  <Section color="gray">
+    <Grid>
+      {cols1.map((content, index, arr) => (
+        <GridCol key={index.toString()} size={{ md: 3 }}>
+          <p>{content}</p>
+        </GridCol>
+      ))}
+    </Grid>
+  </Section>
+</PreviewSpacing>
+
+#### Solution:
+
+Use [Grid row gap](/components/grid#row-gap-size)
+
+<PreviewSpacing>
+  <Section color="gray">
+    <Grid rowGapSize="medium">
+      {cols1.map((content, index, arr) => (
+        <GridCol key={index.toString()} size={{ md: 3 }}>
+          <p>{content}</p>
+        </GridCol>
+      ))}
+    </Grid>
+  </Section>
+</PreviewSpacing>
+
+### 3. Dynamic visibility of a last element
+
+#### Problem
+
+If there is a possibility of **last element** of a section (`<button>` in this case) to disappear,
+spacing of elements above this element would collide with a section spacing and we would lose spacing consistency.
+
+export const cols2 = [1, 2, 3, 4, 5, 6, 7, 8].map((count) => lipsum({ count }));
+
+<PreviewSpacing>
+  <Section color="gray">
+    <Grid>
+      {cols2.map((content, index, arr) => (
+        <GridCol
+          key={index.toString()}
+          size={{ md: 3 }}
+          className={
+            index < arr.length / 2 ? "" : "hidden-problem-element hide"
+          }
+        >
+          <p>{content}</p>
+        </GridCol>
+      ))}
+    </Grid>
+    <ToggleButton
+      className="mb-none"
+      type="primary"
+      data-toggle={JSON.stringify([
+        {
+          target: ".hidden-problem-element.hide",
+          attribute: "class",
+          value: "hide",
+        },
+        {
+          target: "self",
+          attribute: "class",
+          value: "hide",
+        },
+      ])}
+    >
+      Show more
+    </ToggleButton>
+  </Section>
+</PreviewSpacing>
+
+#### Solution:
+
+1. Use [Grid row gap](/components/grid#row-gap-size)
+2. Add additional spacing between grid and button and remove this spacing after
+   showing hidden element
+
+##### Example:
+
+<PreviewSpacing>
+  <Section color="gray">
+    <Grid rowGapSize="medium" className="mb-medium">
+      {cols2.map((content, index, arr) => (
+        <GridCol
+          key={index.toString()}
+          size={{ md: 3 }}
+          className={cx({
+            "hidden-solution-element hide": index >= arr.length / 2,
+          })}
+        >
+          <p>{content}</p>
+        </GridCol>
+      ))}
+    </Grid>
+    <ToggleButton
+      className="mb-none"
+      type="primary"
+      data-toggle={JSON.stringify([
+        {
+          target: ".hidden-solution-element.hide",
+          attribute: "class",
+          value: "hide",
+        },
+        {
+          target: "previous",
+          attribute: "class",
+          value: "mb-medium",
+        },
+        {
+          target: "self",
+          attribute: "class",
+          value: "hide",
+        },
+      ])}
+    >
+      <span>Show more</span>
+    </ToggleButton>
+  </Section>
+</PreviewSpacing>
+
+## Advanced Usage
+
+### Container Integration
+
+The Container wrapper provides consistent layout constraints. You can see this in action with complex content structures:
+
+<Preview>
+  <Section tag="article" color="gray" spacing="small">
+    <header>
+      <h1>Article Title</h1>
+      <time dateTime="2024-01-01">January 1, 2024</time>
+    </header>
+    <main>
+      <p>
+        Article content with <a href="#link">links</a> and{" "}
+        <strong>emphasis</strong>.
+      </p>
+      <blockquote>
+        <p>This is a quote within the section, properly contained.</p>
+      </blockquote>
+    </main>
+    <footer>
+      <p>Article footer with additional information.</p>
+    </footer>
+  </Section>
+</Preview>
+
+### Custom Data Attributes
+
+<Preview>
+  <Section
+    data-testid="custom-section"
+    data-analytics="section-tracking"
+    data-section-type="content"
+  >
+    <p>This section has custom data attributes for testing and analytics.</p>
+  </Section>
+</Preview>
+
+### Event Handling
+
+<Preview>
+  <Section
+    onClick={() => alert("Section clicked!")}
+    onFocus={() => console.log("Section focused")}
+    role="button"
+    tabIndex={0}
+  >
+    <p>This section is clickable and focusable.</p>
+  </Section>
+</Preview>
+
+### Complex Content Structure
+
+<Preview>
+  <Section tag="article" color="gray" spacing="small">
+    <header>
+      <h1>Article Title</h1>
+      <time dateTime="2024-01-01">January 1, 2024</time>
+    </header>
+    <main>
+      <p>
+        Article content with <a href="#link">links</a> and{" "}
+        <strong>emphasis</strong>.
+      </p>
+      <blockquote>
+        <p>This is a quote within the section.</p>
+      </blockquote>
+    </main>
+    <footer>
+      <p>Article footer with additional information.</p>
+    </footer>
+  </Section>
+</Preview>
+
+## Props
+
+<ComponentDocs title="<Section />" component={Section} />

package/src/components/Section/Section.tsx

@@ -0,0 +1,54 @@
+import React from "react";
+import cx from "classnames";
+import Container from "../Container";
+
+export type SectionColor = "white" | "gray" | "black" | "orange";
+export type SectionSpacing = "default" | "small" | "xsmall";
+
+export interface SectionProps {
+  /** Background color of section */
+  color?: SectionColor;
+  /**
+   * Spacing between sections
+   *
+   * if two sections with different color meet
+   * use default (larger) spacing, if two section have same color
+   * use small spacing on second one. Use xsmall for specific
+   * cases e.g. as part of Megamenu
+   */
+  spacing?: SectionSpacing;
+  /** Rendered HTML element */
+  tag?: React.ElementType;
+  /** Additional CSS classes */
+  className?: string;
+  /** Section content */
+  children?: React.ReactNode;
+}
+
+const CLASS_ROOT = "section";
+
+export const Section: React.FC<SectionProps> = ({
+  className,
+  color = "white",
+  spacing,
+  tag: Tag = "div",
+  children,
+  ...other
+}) => {
+  const classes = cx(
+    CLASS_ROOT,
+    {
+      [`${CLASS_ROOT}--${spacing}`]: spacing,
+      [`bg-${color}`]: color !== "white",
+    },
+    className,
+  );
+
+  return (
+    <Tag className={classes} {...other}>
+      <Container>{children}</Container>
+    </Tag>
+  );
+};
+
+Section.displayName = "Section";

package/src/components/Section/index.ts

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

package/src/components/Section/styles/config.scss

@@ -0,0 +1,38 @@
+@use '../../../styles/tokens/space';
+@use '../../../styles/tokens/color';
+
+$spacing: (
+  default: (
+    default: (
+      padding-top: space.get('large'),
+      padding-bottom: space.get('large'),
+    ),
+    md: (
+      padding-top: space.get('xlarge'),
+      padding-bottom: space.get('xlarge'),
+    )
+  ),
+  small: (
+    default: (
+      padding-top: space.get(),
+    ),
+    md: (
+      padding-top: space.get('large'),
+    )
+  ),
+  xsmall: (
+    default: (
+      padding-top: space.get('small'),
+      padding-bottom: space.get('small'),
+    ),
+    md: (
+      padding-top: space.get('small'),
+      padding-bottom: space.get('small'),
+    )
+  ),
+);
+
+$stuck-image-spacing: (
+  default: #{space.get('large') * -1},
+  md: #{space.get('xlarge') * -1},
+);

package/src/components/Section/styles/mixins.scss

@@ -0,0 +1,30 @@
+@use 'sass:map' as sassmap;
+@use '../../../styles/tokens/breakpoint';
+@use '../../../styles/tools/generate';
+@use '../../../styles/tools/map';
+@use './config';
+
+@mixin spacing($variant, $config: config.$spacing) {
+  @include generate.responsive-css-map(sassmap.get($config, $variant));
+}
+
+@mixin spacing-rules($config: config.$spacing) {
+  &:not([class*='bg-']) + &:not([class*='bg-']),
+  &[class~='bg-black'] + &[class~='bg-black'],
+  &[class~='bg-white'] + &[class~='bg-white'],
+  &[class~='bg-orange'] + &[class~='bg-orange'],
+  &[class~='bg-gray'] + &[class~='bg-gray'] {
+    &:not(.section--default) {
+      @include spacing('small');
+    }
+  }
+}
+
+
+@mixin image-stuck-to-bottom($config: config.$stuck-image-spacing) {
+  @each $breakpoint, $value in $config {
+    @include breakpoint.get($breakpoint) {
+      margin-bottom: $value;
+    }
+  }
+}