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

package/src/components/Grid/tests/GridCol.unit.test.js

@@ -0,0 +1,223 @@
+/**
+ * GridCol component unit tests
+ *
+ * This test suite verifies the rendering, props, and className logic of the GridCol component.
+ * It checks default rendering, tag rendering, className merging, and all supported props (align, size, etc).
+ * Also includes complex scenarios with various size combinations and responsive behavior.
+ */
+
+import React from "react";
+import { render } from "@testing-library/react";
+import { GridCol } from "../GridCol";
+
+describe("GridCol", () => {
+  it("renders with default class grid__col", () => {
+    const { getByTestId } = render(<GridCol data-testid="test-id" />);
+    expect(getByTestId("test-id")).toHaveClass("grid__col");
+  });
+
+  it("renders with default tag div", () => {
+    const { container } = render(<GridCol />);
+    expect(container.querySelector("div")).toBeTruthy();
+  });
+
+  it("renders children", () => {
+    const { getByText } = render(<GridCol>test</GridCol>);
+    expect(getByText("test")).toBeInTheDocument();
+  });
+
+  it("renders with custom tag", () => {
+    const { container } = render(<GridCol tag="span" />);
+    expect(container.querySelector("span")).toBeTruthy();
+  });
+
+  it("merges additional className", () => {
+    const { getByTestId } = render(
+      <GridCol data-testid="test-id" className="test-class" />,
+    );
+    expect(getByTestId("test-id")).toHaveClass("test-class");
+  });
+
+  ["shrink", "fill", "auto"].forEach((size) => {
+    it(`applies grid__col--${size} class when size is ${size}`, () => {
+      const { getByTestId } = render(
+        <GridCol data-testid="test-id" size={size} />,
+      );
+      expect(getByTestId("test-id")).toHaveClass(`grid__col--${size}`);
+    });
+  });
+
+  ["top", "middle", "bottom", "stretch"].forEach((align) => {
+    it(`applies align-self-${align} class when align is ${align}`, () => {
+      const { getByTestId } = render(
+        <GridCol data-testid="test-id" align={align} />,
+      );
+      expect(getByTestId("test-id")).toHaveClass(`align-self-${align}`);
+    });
+  });
+
+  it("applies grid__col--3 class when size is number 3", () => {
+    const { getByTestId } = render(<GridCol data-testid="test-id" size={3} />);
+    expect(getByTestId("test-id")).toHaveClass("grid__col--3");
+  });
+
+  it("spreads additional props to the rendered element", () => {
+    const { getByTestId } = render(
+      <GridCol data-testid="test-id" id="my-col" data-extra="foo" />,
+    );
+    const el = getByTestId("test-id");
+    expect(el).toHaveAttribute("id", "my-col");
+    expect(el).toHaveAttribute("data-extra", "foo");
+  });
+});
+
+describe("GridCol complex scenarios", () => {
+  it("renders with all numeric sizes from 1 to 12", () => {
+    for (let size = 1; size <= 12; size++) {
+      const { getByTestId } = render(
+        <GridCol data-testid={`test-${size}`} size={size} />,
+      );
+      expect(getByTestId(`test-${size}`)).toHaveClass(`grid__col--${size}`);
+    }
+  });
+
+  it("renders with semantic HTML tags", () => {
+    const semanticTags = [
+      "article",
+      "aside",
+      "section",
+      "header",
+      "footer",
+      "main",
+      "nav",
+    ];
+
+    semanticTags.forEach((tag) => {
+      const { container } = render(<GridCol tag={tag} size={6} />);
+      const element = container.querySelector(tag);
+      expect(element).toBeTruthy();
+      expect(element).toHaveClass("grid__col--6");
+    });
+  });
+
+  it("renders with form elements as tags", () => {
+    const { container } = render(<GridCol tag="label" size="auto" />);
+    const label = container.querySelector("label");
+    expect(label).toBeTruthy();
+    expect(label).toHaveClass("grid__col--auto");
+  });
+
+  it("combines size and alignment props correctly", () => {
+    const { getByTestId } = render(
+      <GridCol
+        data-testid="test-id"
+        size={8}
+        align="top"
+        className="custom-class"
+      />,
+    );
+    const el = getByTestId("test-id");
+    expect(el).toHaveClass("grid__col--8", "align-self-top", "custom-class");
+  });
+
+  it("renders with complex content and styling", () => {
+    const { getByText } = render(
+      <GridCol size="fill" align="middle" className="content-col">
+        <h2>Title</h2>
+        <p>Paragraph content</p>
+        <button>Click me</button>
+      </GridCol>,
+    );
+
+    expect(getByText("Title")).toBeInTheDocument();
+    expect(getByText("Paragraph content")).toBeInTheDocument();
+    expect(getByText("Click me")).toBeInTheDocument();
+  });
+
+  it("renders multiple GridCols with different configurations", () => {
+    const { container } = render(
+      <div>
+        <GridCol size={4} align="top" className="col-1">
+          Column 1
+        </GridCol>
+        <GridCol size="auto" align="middle" className="col-2">
+          Column 2
+        </GridCol>
+        <GridCol size="fill" align="bottom" className="col-3">
+          Column 3
+        </GridCol>
+        <GridCol size="shrink" align="stretch" className="col-4">
+          Column 4
+        </GridCol>
+      </div>,
+    );
+
+    const cols = container.querySelectorAll(".grid__col");
+    expect(cols).toHaveLength(4);
+
+    expect(cols[0]).toHaveClass("grid__col--4", "align-self-top", "col-1");
+    expect(cols[1]).toHaveClass(
+      "grid__col--auto",
+      "align-self-middle",
+      "col-2",
+    );
+    expect(cols[2]).toHaveClass(
+      "grid__col--fill",
+      "align-self-bottom",
+      "col-3",
+    );
+    expect(cols[3]).toHaveClass(
+      "grid__col--shrink",
+      "align-self-stretch",
+      "col-4",
+    );
+  });
+
+  it("renders with inline styles and data attributes", () => {
+    const { getByTestId } = render(
+      <GridCol
+        data-testid="test-id"
+        size={6}
+        data-component="grid-col"
+        data-size="6"
+      />,
+    );
+
+    const el = getByTestId("test-id");
+    expect(el).toHaveAttribute("data-component", "grid-col");
+    expect(el).toHaveAttribute("data-size", "6");
+  });
+
+  it("renders with event handlers", () => {
+    const handleClick = jest.fn();
+    const { getByTestId } = render(
+      <GridCol
+        data-testid="test-id"
+        size={3}
+        onClick={handleClick}
+        onMouseEnter={() => {}}
+      />,
+    );
+
+    const el = getByTestId("test-id");
+    el.click();
+    expect(handleClick).toHaveBeenCalledTimes(1);
+  });
+
+  it("renders with aria attributes for accessibility", () => {
+    const { getByTestId } = render(
+      <GridCol
+        data-testid="test-id"
+        size="auto"
+        role="region"
+        aria-label="Content section"
+        aria-describedby="description"
+      />,
+    );
+
+    const el = getByTestId("test-id");
+    expect(el).toHaveAttribute("role", "region");
+    expect(el).toHaveAttribute("aria-label", "Content section");
+    expect(el).toHaveAttribute("aria-describedby", "description");
+  });
+});

package/src/components/Hero/Hero.mdx

@@ -0,0 +1,168 @@
+import queryString from 'query-string';
+import { ComponentDocs } from '@lighting-beetle/lighter-styleguide';
+
+import { Preview } from '../../styleguide/';
+import HeroIframePreview from './IframePreview';
+
+import Alert from '../Alert';
+
+import Hero from './';
+
+# Hero
+
+## Composition
+
+Hero combines Container, Grid, Button and Sticker together with it's built in responsive styles to create a modular component. Height is determined by its content and image, which means that too much text can overflow the image. Copywriters and designers must test that their images and text fit on each breakpoint.
+
+### Title
+
+- Required.
+- Must be shorter than 45 characters.
+- Medium (`.display-2`) and large (`.display-1`) variants must match with medium and large description size. Medium title can only be used with medium description and large title with large description.
+
+### Description
+
+- Optional.
+- Must be shorter than 120 characters.
+- Medium (`.h5`) and large (`.h4`) variants must match with medium and large title size. Medium description can only be used with medium title and large description with large title.
+
+### Price
+
+- Optional.
+- All price wording and numbers must be the same size.
+- Must not contain conditions (e.g. asterisk and explanation).
+
+### Button
+
+- Optional.
+- Points to the main actionable section of the page.
+- Copy should reflect the desired action. Instead of "Read more", try and match the button text with the actionable section.
+
+### Sticker
+
+- Optional.
+- Can contain an icon or text.
+
+### Image
+
+- Always aligned to the right and vertically centered.
+- [**Fullwidth**](#fullwidth-photo-all-features) image dimensions:
+  - **xs**: 768 x 540
+  - **sm, md**: 768 x 540 + hidpi version
+  - **lg**: 1024 x 540 + hidpi version
+  - **xl**: 1280 x 540 + hidpi version
+  - **xxl**: 1400 x 540 + hidpi version
+- [**Half width**](#half-width-photo) image dimensions:
+  - **xs**: 768 x 540
+  - **sm, md**: 768 x 540 + hidpi version
+  - **lg**: 470 x 540 + hidpi version
+  - **xl**: 590 x 540 + hidpi version
+  - **xxl**: 650 x 540 + hidpi version
+- [**Single size**](#with-single-image-size) half width image dimensions:
+  - **xs**: 626 x 540 + hidpi version
+- [**Vendor logo**](#with-vendor-logo) height and position
+  the logo size is constrained by its height and must be placed inside the image by a graphic designer.
+  - **xs**: 30px, 10px from top, 10px from left
+  - **sm, md**: 50px, 30px from top, 20px from left
+  - **lg**: 50px, 50px from top, 30px from right
+  - **xl**: 60px, 60px from top, 30px from right
+  - **xxl**: 60px, 60px from top, 50px from right
+
+### Gradient overlay
+
+- Optional.
+- Makes sure text is readable on full width images.
+
+## Variants
+
+### Build your own!
+
+[Visit the playground](/pages/hero-playground.html) to build your own Hero
+
+### Fullwidth photo all features
+
+<HeroIframePreview
+  textSize="large"
+  background="black"
+  title="Ušetrite až 100&nbsp;€ pri kúpe hernej konzoly"
+  description="Nezmeškajte štedrú ponuku od Orangeu a získajte od nás k internetu hernú konzolu so zľavou až 100&nbsp;."
+  price="od 10&nbsp;€/mes."
+  sticker={{ children: 'Lorem ipsum' }}
+  image={{
+    default: '/images/hero/photo.jpg',
+    xxl: '/images/hero/photo-xxl.jpg, /images/hero/photo-xxl-2x.jpg 2x',
+    xl: '/images/hero/photo-xl.jpg, /images/hero/photo-xl-2x.jpg 2x',
+    lg: '/images/hero/photo-lg.jpg, /images/hero/photo-lg-2x.jpg 2x',
+    sm: '/images/hero/photo.jpg, /images/hero/photo-2x.jpg 2x',
+  }}
+  button={{ children: 'Chcem zľavu na hernú konzolu' }}
+  hasGradientOverlay={true}
+  hasFullwidthImage={true}
+/>
+
+### Half width photo
+
+<HeroIframePreview
+  background="gray"
+  title="Vyberte si vašu dvojičku s OPPO"
+  textSize="large"
+  description="Vyberte si dvojicu smartfónov OPPO. Druhý len za 1 € a bez viazanosti."
+  image={{
+    default: '/images/hero/example.jpg',
+    xxl: '/images/hero/example-xxl.jpg, /images/hero/example-xxl@2x.jpg 2x',
+    xl: '/images/hero/example-xl.jpg, /images/hero/example-xl@2x.jpg 2x',
+    lg: '/images/hero/example-lg.jpg, /images/hero/example-lg@2x.jpg 2x',
+    sm: '/images/hero/example.jpg, /images/hero/example@2x.jpg 2x',
+  }}
+  sticker={{ children: 'Získajte druhý telefón za 1 €' }}
+  hasGradientOverlay
+/>
+
+### With single image size
+
+<HeroIframePreview
+  background="black"
+  title="Byť v Orangei, znamená byť v dobrých rukách"
+  textSize="large"
+  description="Jednoducho sa to oplatí. Ako operátor s maximálnym pokrytím stále myslíme na našich zákazníkov a zdokonaľujeme naše služby. Nechajte sa prekvapiť."
+  image={{
+    src: '/images/hero/single.png',
+    srcSet: '/images/hero/single.png 1x, /images/hero/single@2x.png 2x',
+  }}
+/>
+
+### With vendor logo
+
+<HeroIframePreview
+  background="gray"
+  title="Samsung Galaxy Z Fold4 | Z Flip4"
+  textSize="large"
+  description="Objednajte si jeden z telefónov už teraz."
+  image={{
+    default: '/images/hero/vendor.png',
+    xxl: '/images/hero/vendor-xxl.png, /images/hero/vendor-xxl@2x.png 2x',
+    xl: '/images/hero/vendor-xl.png, /images/hero/vendor-xl@2x.png 2x',
+    lg: '/images/hero/vendor-lg.png, /images/hero/vendor-lg@2x.png 2x',
+    sm: '/images/hero/vendor.png, /images/hero/vendor@2x.png 2x',
+  }}
+/>
+
+### With other vendor logo style
+
+<HeroIframePreview
+  background="black"
+  title="Samsung Galaxy S21 | S21+ | S21 Ultra 5G"
+  textSize="medium"
+  description="Objednajte si jeden z telefónov už teraz."
+  image={{
+    default: '/images/hero/old-vendor.jpg',
+    xxl: '/images/hero/old-vendor-xxl.jpg, /images/hero/old-vendor-xxl-2x.jpg 2x',
+    xl: '/images/hero/old-vendor-xl.jpg, /images/hero/old-vendor-xl-2x.jpg 2x',
+    lg: '/images/hero/old-vendor-lg.jpg, /images/hero/old-vendor-lg-2x.jpg 2x',
+    sm: '/images/hero/old-vendor.jpg, /images/hero/old-vendor-2x.jpg 2x',
+  }}
+/>
+
+## Props
+
+<ComponentDocs title="<Hero />" component={Hero} />

package/src/components/Hero/Hero.tsx

@@ -0,0 +1,182 @@
+import React from "react";
+import cx from "classnames";
+
+import { formatPrice } from "../../utils/helpers";
+import { Button } from "../Button";
+import { Container } from "../Container";
+import { Grid, GridCol } from "../Grid";
+import { Image } from "../Image";
+import { Sticker } from "../Sticker";
+
+export type HeroBackground = "white" | "black" | "gray";
+export type HeroTextSize = "medium" | "large";
+export type StickerColor = "black" | "orange";
+
+export interface HeroImageSrc {
+  src: string;
+  srcSet?: string;
+}
+
+export interface HeroImageResponsive {
+  default: string;
+  sm?: string;
+  lg?: string;
+  xl?: string;
+  xxl?: string;
+  [key: string]: string | undefined;
+}
+
+export type HeroImage = HeroImageSrc | HeroImageResponsive;
+
+export interface HeroPriceObject {
+  amount: number;
+  prefix?: React.ReactNode;
+  suffix?: React.ReactNode;
+}
+
+export type HeroPrice = string | HeroPriceObject;
+
+export interface HeroButtonProps {
+  children: React.ReactNode;
+  [key: string]: any;
+}
+
+export interface HeroStickerProps {
+  color?: StickerColor;
+  children?: React.ReactNode;
+  className?: string;
+}
+
+export interface HeroProps {
+  /** Background spanning whole viewport width */
+  colorScheme?: HeroBackground;
+  /** Action button props */
+  button?: HeroButtonProps;
+  /** Main text */
+  description?: React.ReactNode;
+  hasFullwidthImage?: boolean;
+  /** Gradient overlay ensures proper text readability */
+  hasGradientOverlay?: boolean;
+  /** Use svg illustrations, png for product images and jpg for photos */
+  image?: HeroImage;
+  price?: HeroPrice;
+  sticker?: HeroStickerProps;
+  /** Adjust title and description size. Medium sets display-2 title and 18px text, large uses display-1 title and 20px text.  */
+  textSize?: HeroTextSize;
+  /** Hero title */
+  title: string;
+}
+
+const textSizes = {
+  medium: {
+    title: "h2",
+    description: "bold",
+  },
+  large: {
+    title: "h1",
+    description: "large bold",
+  },
+} as const;
+
+export const Hero: React.FC<HeroProps> = ({
+  button,
+  colorScheme = "white",
+  description,
+  hasGradientOverlay,
+  image,
+  hasFullwidthImage,
+  price,
+  sticker,
+  title,
+  textSize = "medium",
+}) => {
+  const hasSingleImage = image
+    ? ("src" in image && !!image.src) ||
+      ("default" in image && image.default && Object.keys(image).length === 1)
+    : false;
+
+  const className = cx("hero", {
+    "is-dark": colorScheme === "black",
+    "is-light": colorScheme === "white",
+    "is-gray": colorScheme === "gray",
+  });
+  return (
+    <div className={className}>
+      <Container>
+        <Grid className="justify-content-space-between">
+          <GridCol
+            size={{
+              sm: 10,
+              md: 9,
+              lg: 5,
+            }}
+            className="hero__content"
+          >
+            <h1 className={textSizes[textSize].title}>{title}</h1>
+            {description && (
+              <p
+                className={cx(
+                  textSizes[textSize].description,
+                  "hero__description",
+                )}
+              >
+                {description}
+              </p>
+            )}
+            {price && (
+              <p className="h2 hero__price">
+                {typeof price === "string" && price}
+                {typeof price === "object" && (
+                  <>
+                    {price.prefix}
+                    {formatPrice(price.amount)}
+                    {price.suffix}
+                  </>
+                )}
+              </p>
+            )}
+            {button && (
+              <Button
+                type="primary"
+                colorScheme={colorScheme === "black" ? "light" : "light"}
+                {...button}
+              />
+            )}
+          </GridCol>
+          {sticker && (
+            <GridCol
+              size={{
+                md: 3,
+                lg: 2,
+              }}
+              className="hero__content show-md"
+            >
+              <Sticker
+                {...sticker}
+                className={cx("hero__sticker", sticker.className)}
+              />
+            </GridCol>
+          )}
+          {image && (
+            <div className="hero__image-wrapper">
+              <Image
+                src={"src" in image ? { default: image.src } : (image as any)}
+                srcSet={"src" in image ? image.srcSet : undefined}
+                alt=""
+                className={cx("hero__image", {
+                  "hero__image--fullwidth": hasFullwidthImage,
+                  "hero__image--single": hasSingleImage,
+                  "hero__image--gradient": hasGradientOverlay,
+                  "hero__image--gradient-halfwidth":
+                    hasGradientOverlay && !hasFullwidthImage,
+                })}
+              />
+            </div>
+          )}
+        </Grid>
+      </Container>
+    </div>
+  );
+};
+
+Hero.displayName = "Hero";