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

package/src/components/Accordion/tests/data.js

@@ -0,0 +1,18 @@
+export default [
+  {
+    title: 'Sed posuere consectetur est at lobortis.',
+    children:
+      'Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.',
+  },
+  {
+    title: 'Donec sed odio dui.',
+    children:
+      'Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vestibulum id ligula porta felis euismod semper. Donec ullamcorper nulla non metus auctor fringilla. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Maecenas faucibus mollis interdum.',
+  },
+  {
+    title:
+      'Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.',
+    children:
+      'Donec id elit non mi porta gravida at eget metus. Nulla vitae elit libero, a pharetra augue. Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas faucibus mollis interdum.',
+  },
+];

package/src/components/Alert/Alert.mdx

@@ -0,0 +1,141 @@
+import { ComponentDocs } from '@lighting-beetle/lighter-styleguide';
+import { Preview } from '../../styleguide/';
+
+import Button from '../Button';
+import LinkDefault from '../Link';
+import IconList from '../IconList';
+
+import Alert from './';
+
+# Alert
+
+If you need to notify user about something specific, or if you want to explain
+something shortly, this is the element to do it.
+
+## Variants
+
+### Title
+
+<Preview>
+  <Alert title="Toto je jednoduchá správa" />
+</Preview>
+
+### Title and Description
+
+<Preview>
+  <Alert
+    title="Dobre vedieť!"
+    description="Popis toho čo by bolo dobré vysvetliť. Aj na viac riadkov. Niekedy veci nie sú samozrejmé, ale ak sa ich pokúsime vysvetliť, tak sa môžme stretnúť s pochopením."
+  />
+</Preview>
+
+### Title and Buttons
+
+<Preview>
+  <Alert
+    title="Prosím prihláste sa."
+    actionButtons={[<Button>Prihlásiť sa</Button>, <Button>Skryť</Button>]}
+  />
+</Preview>
+
+### Title, Description and Buttons
+
+<Preview>
+  <Alert
+    title="Prihlásiť sa je jednoduché a rozumné"
+    description="Napríklad: Prihlásení používatelia vidia krajšie ceny ako neprihlásení. Zváž to, ak máš u nás už účet. Neoľutuješ."
+    actionButtons={<Button>Prihlásiť sa</Button>}
+  />
+</Preview>
+
+## Types
+
+There are four types of alert messages you can choose from.
+
+- [Info](#info)
+- [Success](#success)
+- [Warning](#warning)
+- [Danger](#danger)
+
+### Info
+
+`info` is default type of alert. It's used for simple, not most important,
+messages for the user if something happend.
+
+<Preview>
+  <Alert title="Toto je jednoduchá správa" />
+</Preview>
+
+### Success
+
+Best feeling is when something went well. You can notify the user about successful
+things with `success` type.
+
+<Preview>
+  <Alert type="success" title="Výborne. Všetko prebehlo rýchlo a hladko" />
+</Preview>
+
+### Warning
+
+If you need to warn user about anything use `warning` type.
+
+<Preview>
+  <Alert type="warning" title="Na toto si daj pozor!" />
+</Preview>
+
+### Danger
+
+If warning is not enought and you need to show error message, use `danger` type.
+
+<Preview>
+  <Alert type="danger" title="Stala sa chyba" />
+</Preview>
+
+## Custom title renderer
+
+Alert spacing is quite strict and works 99% of time. In rare cases, the title requires a little more space to breathe. To achieve that, you can render a custom title using the `renderTitle` prop.
+
+<Preview>
+  <Alert
+    title="Prihlásiť sa je jednoduché a rozumné"
+    renderTitle={props => (
+      <h3 className="alert__title mb-medium">{props.title}</h3>
+    )}
+    description={
+      <IconList
+        className="reset-font-weight"
+        items={[
+          {
+            icon: 'tick',
+            content: 'Bonus na nové zariadenie až do 440 €',
+          },
+          {
+            icon: 'tick',
+            content: 'Bezúročné splátky zariadenia',
+          },
+          {
+            icon: 'tick',
+            content: 'Doručenie zadarmo',
+          },
+        ]}
+      />
+    }
+    actionButtons={<Button>Prihlásiť sa</Button>}
+  />
+</Preview>
+
+## Full width
+
+If you need full width Alert, you can use `isFullWidth` prop. Max width on text remamains the same, because of readability.
+
+<Preview>
+  <Alert
+    isFullWidth
+    title="Dobre vedieť!"
+    description="Popis toho čo by bolo dobré vysvetliť. Aj na viac riadkov. Niekedy veci nie sú samozrejmé, ale ak sa ich pokúsime vysvetliť, tak sa môžme stretnúť s pochopením."
+  />
+</Preview>
+
+## Props
+
+<ComponentDocs title="<Alert />" component={Alert} />

package/src/components/Alert/Alert.tsx

@@ -0,0 +1,120 @@
+import React, { JSX } from "react";
+import cx from "classnames";
+
+import { Icon } from "../Icon";
+import { Buttons } from "../Buttons";
+import ConditionalWrapper from "../../utils/ConditionalWrapper";
+
+import data from "./data";
+
+export type AlertType = "warning" | "info" | "danger" | "success";
+
+interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Additional action buttons to add interactivity */
+  actionButtons?: React.ReactNode;
+  /** Description of the alert */
+  description?: React.ReactNode;
+  /** Level of the heading in heading hierarchy */
+  headingLevel?: number;
+  /** Sets Alert to full width */
+  isFullWidth?: boolean;
+  /** Callback function when close button is clicked */
+  onClose?: () => void;
+  /** Custom title renderer. Passes props as function parameter. */
+  renderTitle?: (props: AlertProps) => React.ReactNode;
+  /** Main text message */
+  title?: string;
+  /** Type of alert, sets icon and color */
+  type?: AlertType;
+  className?: string;
+  /** Sets Alert to use specific color scheme */
+  colorScheme?: "dark" | "light";
+}
+
+const CLASS_ROOT = "alert";
+
+const Alert: React.FC<AlertProps> = ({
+  className,
+  type = "info",
+  title,
+  renderTitle,
+  description,
+  headingLevel = 3,
+  actionButtons,
+  isFullWidth,
+  colorScheme,
+  onClose,
+  ...other
+}) => {
+  const HEADINGTAG = `h${headingLevel}` as keyof JSX.IntrinsicElements;
+  const classes = cx(
+    CLASS_ROOT,
+    {
+      [`${CLASS_ROOT}--${type}`]: type,
+      [`${CLASS_ROOT}--full-width`]: isFullWidth,
+      "is-dark": colorScheme === "dark",
+      "is-light": colorScheme === "light",
+    },
+    className,
+  );
+
+  const alertTitle =
+    (renderTitle &&
+      renderTitle({
+        className,
+        type,
+        title,
+        renderTitle,
+        description,
+        headingLevel,
+        actionButtons,
+        isFullWidth,
+        colorScheme,
+        onClose,
+        ...other,
+      })) ||
+    (title &&
+      React.createElement(
+        HEADINGTAG,
+        { className: `${CLASS_ROOT}__title` },
+        title,
+      ));
+
+  return (
+    <div className={classes} {...other}>
+      <div className={`${CLASS_ROOT}__icon`}>
+        <Icon name={data[type]} color={type} size="medium" />
+      </div>
+      <div className={`${CLASS_ROOT}__content`}>
+        {alertTitle}
+        {description && (
+          <ConditionalWrapper
+            condition={typeof description === "string"}
+            wrapper={<p />}
+          >
+            {description}
+          </ConditionalWrapper>
+        )}
+        {actionButtons && (
+          <ConditionalWrapper
+            condition={React.Children.count(actionButtons) > 1}
+            wrapper={<Buttons />}
+          >
+            {React.Children.map(actionButtons, (button) => button)}
+          </ConditionalWrapper>
+        )}
+      </div>
+      {onClose && (
+        <div className={`${CLASS_ROOT}__close`}>
+          <button onClick={onClose}>
+            <Icon name="close" size="medium" />
+          </button>
+        </div>
+      )}
+    </div>
+  );
+};
+
+Alert.displayName = "Alert";
+
+export { Alert };

package/src/components/Alert/CHANGELOG.md

@@ -0,0 +1,66 @@
+# Alert Component Changelog
+
+## July 1, 2025
+
+### Added
+
+- Added `onClose` callback prop to the `AlertProps` interface
+  - Type: `() => void`
+  - Purpose: Provides callback functionality when the close button is clicked
+  - Documented with JSDoc comment: `/** Callback function when close button is clicked */`
+
+### Changed
+
+- Made the close button conditionally render based on the presence of the `onClose` prop
+
+  - Before: Close button was always rendered but had no functionality
+  - After: Close button only renders when an `onClose` callback is provided
+  - Implementation: `{onClose && (<div className="alert__close">...</div>)}`
+
+- Connected the `onClick` event of the close button to the `onClose` callback
+
+  - Before: `<button><Icon name="close" size="medium" /></button>`
+  - After: `<button onClick={onClose}><Icon name="close" size="medium" /></button>`
+
+- Updated the `renderTitle` function parameters to include the new `onClose` prop
+  - Ensures custom title renderers have access to the close functionality
+
+### Benefits
+
+- Improved user experience by only showing interactive elements when they have associated functionality
+- Enhanced component API by providing a clear way to handle dismissal of alerts
+- Follows the principle of "If it's not clickable, don't make it look clickable"
+- Maintains backward compatibility with existing implementations
+
+## July 11, 2025
+
+### Changed
+
+- Refactored color palette logic: Alert now uses CSS variables for all color styling, inheriting from global theme or local modifier.
+- Moved color variant logic into `mixins.alert-variants` for better modularity and maintainability.
+- Improved support for dark mode via global `.is-dark` parent class and `colorScheme` prop.
+- Updated tests to cover palette switching behavior.
+
+### Benefits
+
+- More flexible theming: Alerts can be light or dark regardless of parent theme.
+- Cleaner, more maintainable codebase with modular SCSS mixins.
+- Improved test coverage for new palette features.
+
+## July 16, 2025
+
+### Changed
+
+- Removed `isInverse` and `isLight` props from the `Alert` component.
+- Removed `--inverse` and `--light` modifier classes.
+- Added `colorScheme` prop to the `Alert` component to support palette overrides.
+  - `colorScheme`: Accepts `'light'` or `'dark'` to force palette regardless of parent theme.
+- Updated modifier classes: `is-light` and `is-dark` are now applied based on `colorScheme` prop.
+- Updated tests to cover new `colorScheme` prop and palette switching behavior.
+- Updated global styles to handle light and dark theme CSS variables at the root and via `.is-light`/`.is-dark` classes.
+
+### Benefits
+
+- More flexible theming: Alerts can be light or dark regardless of parent theme using a single prop.
+- Cleaner, more maintainable codebase with modular SCSS and simplified API.
+- Improved test coverage for new palette features.

package/src/components/Alert/data.ts

@@ -0,0 +1,8 @@
+const alertData = {
+  warning: "warning-important",
+  info: "info",
+  danger: "error-severe",
+  success: "checked",
+};
+
+export default alertData;

package/src/components/Alert/index.ts

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

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

@@ -0,0 +1,19 @@
+@use "../../../styles/tokens/space";
+@use "../../../styles/tokens/color";
+@use "../../../styles/tools/convert";
+@use "sass:math";
+
+$base: (
+  max-width: convert.to-rem(590px),
+  margin-bottom: space.get(),
+  padding: space.get("medium"),
+  background: var(--color-fill-information),
+  border: 1px solid var(--color-border-information),
+  border-radius: convert.to-rem(5px),
+);
+
+$title: (
+  font-size: convert.to-rem(18px),
+  line-height: math.div(20, 18),
+  margin-bottom: space.get("small"),
+);

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

@@ -0,0 +1,66 @@
+@use "./../../../styles/tokens/space";
+@use "./../../../styles/tokens/breakpoint";
+@use "./../../../styles/tokens/color";
+@use "./../../../styles/tools/generate";
+@use "./../../../styles/tools/convert";
+@use "./../../../styles/typography/config" as typography;
+@use "sass:map" as sass-map;
+@use "./config";
+
+@mixin alert-base($config: config.$base) {
+  display: flex;
+
+  @include generate.css-map($config);
+}
+
+@mixin alert-variants() {
+  border-color: var(--color-border-information);
+  background-color: var(--color-fill-information);
+
+  &--success {
+    border-color: var(--color-border-positive);
+    background-color: var(--color-fill-positive);
+  }
+  &--info {
+    border-color: var(--color-border-information);
+    background-color: var(--color-fill-information);
+  }
+  &--warning {
+    border-color: var(--color-border-warning);
+    background-color: var(--color-fill-warning);
+  }
+  &--danger {
+    border-color: var(--color-border-negative);
+    background-color: var(--color-fill-negative);
+  }
+}
+
+@mixin alert-icon {
+  margin-right: space.get("small");
+  line-height: 1;
+}
+
+@mixin alert-content {
+  flex-shrink: 1;
+  flex-grow: 1;
+  margin-top: convert.to-rem(2px);
+
+  p {
+    @include generate.css-map(typography.$body-text, "small");
+  }
+
+  > :last-child {
+    margin-bottom: space.get("xsmall");
+  }
+}
+
+@mixin alert-close {
+}
+
+@mixin alert-title($config: config.$title) {
+  @include generate.css-map($config);
+}
+
+@mixin buttons-after-title() {
+  margin-top: space.get("small");
+}

package/src/components/Alert/styles/style.scss

@@ -0,0 +1,36 @@
+@use "../../../styles/tools/generate";
+@use "./config";
+@use "./mixins";
+@use "../../../styles/tokens/color";
+
+@layer components {
+  .alert {
+    @include mixins.alert-base();
+    @include mixins.alert-variants();
+
+    &__icon {
+      @include mixins.alert-icon();
+    }
+
+    &__content {
+      @include mixins.alert-content();
+    }
+
+    &__close {
+      @include mixins.alert-close();
+    }
+
+    &__title {
+      @include mixins.alert-title();
+    }
+
+    &__title + .buttons,
+    &__title + .btn {
+      @include mixins.buttons-after-title();
+    }
+
+    &--full-width {
+      max-width: 100%;
+    }
+  }
+}

package/src/components/Alert/tests/Alert.conformance.test.js

@@ -0,0 +1,30 @@
+import { render } from "@testing-library/react";
+import { axe } from "jest-axe";
+
+import { Alert } from "../";
+import { Link } from "../../Link";
+
+const example = (
+  <Alert
+    title="Donec id elit non mi porta gravida at eget metus."
+    description="Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Sed posuere consectetur est at lobortis. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit."
+    actionButtons={[
+      <Link key="button-1" tag="button" type="button">
+        Prihlásiť sa
+      </Link>,
+      <Link key="button-2" tag="button" type="button">
+        Skryť
+      </Link>,
+    ]}
+  />
+);
+
+it("is valid html", () => {
+  const { container } = render(example);
+  expect(container).toHTMLValidate();
+});
+
+it("is accessible", async () => {
+  const { container } = render(example);
+  expect(await axe(container)).toHaveNoViolations();
+});

package/src/components/Alert/tests/Alert.test.js

@@ -0,0 +1,113 @@
+import { render, fireEvent } from "@testing-library/react";
+
+import { Alert } from "../";
+
+describe("rendering", () => {
+  describe("initial state", () => {
+    it("has default className alert", () => {
+      const { getByTestId } = render(<Alert data-testid="test" />);
+      expect(getByTestId("test")).toHaveClass("alert");
+    });
+  });
+
+  describe("passed props", () => {
+    it("renders title", () => {
+      const { getByText } = render(<Alert title="Title" />);
+      expect(getByText("Title")).toBeInTheDocument();
+    });
+
+    it("renders renderTitle prior to title", () => {
+      const { getByText } = render(
+        <Alert title="Title" renderTitle={() => <h1>Title</h1>} />,
+      );
+      expect(getByText("Title").tagName).toBe("H1");
+    });
+
+    it("renders description", () => {
+      const { getByText } = render(<Alert description="Description" />);
+      expect(getByText("Description")).toBeInTheDocument();
+    });
+
+    it("renders actionButtons", () => {
+      const { getByText } = render(
+        <Alert actionButtons={<button>button</button>} />,
+      );
+      expect(getByText("button")).toBeInTheDocument();
+    });
+
+    it("renders headingLevel", () => {
+      const { getByText } = render(<Alert headingLevel={1} title="Title" />);
+      expect(getByText("Title").tagName).toBe("H1");
+    });
+
+    ["warning", "info", "danger", "success"].map((type) => {
+      it(`should have alert--${type}`, () => {
+        const { getByTestId } = render(
+          <Alert data-testid="test" type={type} />,
+        );
+        expect(getByTestId("test")).toHaveClass(`alert--${type}`);
+      });
+    });
+
+    it("renders isFullLength", () => {
+      const { getByTestId } = render(
+        <Alert data-testid="test" title="Title" isFullWidth={true} />,
+      );
+      expect(getByTestId("test")).toHaveClass(`alert--full-width`);
+    });
+
+    it("passes other props", () => {
+      const { getByTestId } = render(<Alert data-testid="test" />);
+      expect(getByTestId("test")).toBeInTheDocument();
+    });
+
+    it("does not render close button when onClose is not provided", () => {
+      const { container } = render(<Alert title="Title" />);
+      expect(container.querySelector(".alert__close")).toBeNull();
+    });
+
+    it("renders close button when onClose is provided", () => {
+      const { container } = render(<Alert title="Title" onClose={() => {}} />);
+      expect(container.querySelector(".alert__close")).toBeInTheDocument();
+    });
+
+    it("calls onClose when close button is clicked", () => {
+      const handleClose = jest.fn();
+      const { container } = render(
+        <Alert title="Title" onClose={handleClose} />,
+      );
+
+      const closeButton = container.querySelector(".alert__close button");
+      expect(closeButton).toBeInTheDocument();
+
+      fireEvent.click(closeButton);
+      expect(handleClose).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe("palette and theme logic", () => {
+    it("should have is-dark class when colorScheme is 'dark'", () => {
+      const { getByTestId } = render(
+        <Alert data-testid="test" colorScheme="dark" />,
+      );
+      expect(getByTestId("test")).toHaveClass("is-dark");
+    });
+
+    it("should have is-light class when colorScheme is 'light'", () => {
+      const { getByTestId } = render(
+        <Alert data-testid="test" colorScheme="light" />,
+      );
+      expect(getByTestId("test")).toHaveClass("is-light");
+    });
+
+    it("should inherit color variables from parent theme", () => {
+      const { getByTestId } = render(
+        <div className="is-dark">
+          <Alert data-testid="test" />
+        </div>,
+      );
+      expect(getByTestId("test")).toHaveClass("alert");
+      // This test assumes CSS variables are set by parent; actual color checks require e2e or visual regression
+    });
+  });
+});