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

package/src/components/Buttons/Buttons.mdx

@@ -0,0 +1,39 @@
+import { ComponentDocs } from '@lighting-beetle/lighter-styleguide';
+
+import { Preview } from '../../styleguide/';
+import { Buttons, Button } from '../';
+
+# Buttons
+
+Help arrange multiple buttons
+
+## Usage
+
+<Preview>
+  <Buttons>
+    <Button>There are example buttons</Button>
+    <Button>They can break into multiple lines</Button>
+    <button className="link">And look fabulous doing it</button>
+  </Buttons>
+</Preview>
+
+## Stack on XS
+
+Buttons can be forced to stack and span the available width only on XS viewport when used on crossroads pages with two available actions. For example:
+
+- Login prompt: "Login" and "Continue as new customer"
+- Upsell/crossel prompt: "Show offer" and "Skip"
+
+Button stacks must not be used in wizards to stack continue/back buttons.
+Button stacks must not be used with only one button. The maximum recommended number of stacked buttons is two.
+
+<Preview>
+  <Buttons isStackedOnXs>
+    <Button type="primary">Log in</Button>
+    <Button>Continue as new customer</Button>
+  </Buttons>
+</Preview>
+
+Button width is always determined by it's content and Button stack scenario is the only exception. If you need vertical navigation, use the [List component](/components/list).
+
+<ComponentDocs title="<Buttons />" component={Buttons} />

package/src/components/Buttons/Buttons.tsx

@@ -0,0 +1,34 @@
+import cx from "classnames";
+
+interface ButtonsProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** On XS viewport, forces buttons to stack vertically and span the available width. */
+  isStackedOnXs?: boolean;
+  className?: string;
+  children?: React.ReactNode;
+}
+
+const CLASS_ROOT = "buttons";
+
+const Buttons: React.FC<ButtonsProps> = ({
+  isStackedOnXs,
+  children,
+  className,
+  ...other
+}) => (
+  <div
+    className={cx(
+      CLASS_ROOT,
+      {
+        [`${CLASS_ROOT}--stack-on-xs`]: isStackedOnXs,
+      },
+      className,
+    )}
+    {...other}
+  >
+    {children}
+  </div>
+);
+
+Buttons.displayName = "Buttons";
+
+export { Buttons };

package/src/components/Buttons/index.ts

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

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

@@ -0,0 +1,3 @@
+@use "../../../styles/tokens/space";
+
+$spacing: space.get("small");

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

@@ -0,0 +1,39 @@
+@use "../../../styles/tokens/breakpoint";
+@use "../../../styles/tokens/space";
+@use "./config";
+
+@mixin layout(
+  $spacing: config.$spacing,
+  $button-selector: ".btn",
+  $link-selector: ".link"
+) {
+  display: flex;
+  flex-flow: row wrap;
+  max-width: calc(100% - #{$spacing});
+  margin: ($spacing * -1) ($spacing * -1) space.get() 0;
+
+  #{$button-selector},
+  #{$button-selector}:last-child,
+  #{$link-selector},
+  #{$link-selector}:last-child,
+  button#{$link-selector},
+  button#{$link-selector}:last-child {
+    margin: $spacing $spacing 0 0;
+  }
+}
+
+@mixin stack-on-xs($spacing: config.$spacing, $button-selector: ".btn") {
+  @include breakpoint.get("xs", "down") {
+    flex-flow: column;
+    max-width: 100%;
+    margin: 0 0 $spacing 0;
+
+    #{$button-selector}:not(:last-child),
+    #{$button-selector}:last-child,
+    button.link:not(:last-child),
+    button.link:last-child {
+      margin-right: 0;
+      margin-bottom: 0;
+    }
+  }
+}

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

@@ -0,0 +1,12 @@
+@use "./config";
+@use "./mixins";
+
+@layer components {
+  .buttons {
+    @include mixins.layout;
+
+    &--stack-on-xs {
+      @include mixins.stack-on-xs;
+    }
+  }
+}

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

@@ -0,0 +1,22 @@
+import { render } from "@testing-library/react";
+import { axe } from "jest-axe";
+
+import { Button } from "../../Button";
+import { Buttons } from "../";
+
+const example = (
+  <Buttons>
+    <Button>Button 1</Button>
+    <Button>Button 2</Button>
+  </Buttons>
+);
+
+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/Buttons/tests/Buttons.unit.test.js

@@ -0,0 +1,26 @@
+import { render } from "@testing-library/react";
+
+import { Buttons } from "../Buttons";
+
+describe("rendering Buttons", () => {
+  describe("initial state", () => {
+    it("has default class buttons", () => {
+      const { getByTestId } = render(<Buttons data-testid="test-id" />);
+      expect(getByTestId("test-id")).toHaveClass("buttons");
+    });
+  });
+
+  describe("passed props", () => {
+    it("renders children", () => {
+      const { getByText } = render(<Buttons>test</Buttons>);
+      expect(getByText("test")).toBeInTheDocument();
+    });
+    it("has class buttons--stack-on-xs when isStackedOnXs is passed", () => {
+      const { getByTestId } = render(
+        <Buttons data-testid="test-id" isStackedOnXs />,
+      );
+      expect(getByTestId("test-id")).toHaveClass("buttons");
+      expect(getByTestId("test-id")).toHaveClass("buttons--stack-on-xs");
+    });
+  });
+});

package/src/components/Card/CHANGELOG.md

@@ -0,0 +1,19 @@
+# Changelog for Card Component
+
+## [Unreleased]
+
+### Breaking Changes
+
+- **Removed**: `CardHeader` component has been removed from the Card module.
+- **Added**: `CardProductHeader` component has been introduced as a new header variant for product cards.
+- **Added**: `space` prop to `CardSection` and `CardProductHeader` for small spacing option. When set to `"small"`, applies compact spacing via a modifier class.
+
+### Other Notable Changes
+
+- Card documentation and usage examples updated to use `CardProductHeader` instead of `CardHeader`.
+- Card exports and tests updated to reflect the removal of `CardHeader` and addition of `CardProductHeader`.
+- No changes to the main `Card` or `CardSection` API except for the new `space` prop.
+
+---
+
+**Note:** If you were using `CardHeader`, please migrate to `CardProductHeader` or use `CardSection` for custom header content as needed.

package/src/components/Card/Card.mdx

@@ -0,0 +1,334 @@
+import { ComponentDocs } from "@lighting-beetle/lighter-styleguide";
+
+import { Preview } from "../../styleguide/";
+
+import Card, { CardHeader, CardSection } from "./";
+import { headerColors } from "../Card/CardHeader";
+import Divider from "../Divider";
+import Button from "../Button";
+import { Image } from "../Image";
+import Grid, { GridCol } from "../Grid";
+
+export const GrayPreview = (props) => <Preview bgTheme="gray" {...props} />;
+
+export const DefaultSection = ({
+  title = "Section",
+  content = "Content",
+  ...props
+}) => (
+  <CardSection {...props}>
+    <h3>{title}</h3>
+    <p>{content}</p>
+  </CardSection>
+);
+
+# Card
+
+A card serves as an entry point to more detailed information. Cards may contain
+rich content, such as photos, text, link, list, tables, you name it.
+
+## Example
+
+Card (without border) should be used **on non-white background** to stand out.
+
+<GrayPreview>
+  <Card>
+    <CardSection>
+      <h2>Card with one section</h2>
+      <p>Content can be whatever you choose it to be</p>
+    </CardSection>
+  </Card>
+</GrayPreview>
+
+## Bordered and shadowed
+
+If you need to use white card **on white background** you can eighter use card border or shadow.
+
+<Preview>
+  <Grid>
+    <GridCol size={{ md: 6 }}>
+      <Card hasBorder>
+        <CardSection>
+          <h2>Card with border</h2>
+          <p>Use bordered card on white background</p>
+        </CardSection>
+      </Card>
+    </GridCol>
+    <GridCol size={{ md: 6 }}>
+      <Card hasShadow>
+        <CardSection>
+          <h2>Card with shadow</h2>
+          <p>Use card with shadow on white background</p>
+        </CardSection>
+      </Card>
+    </GridCol>
+  </Grid>
+</Preview>
+
+## Background colors
+
+Colors can be changed on:
+
+- `.card__section` (preferred) level
+  - if you need just specific section to have a custom color
+- `.card` level
+  - if you need to change color of all sections, with no custom sections
+
+Default `.card` color is white.
+
+Every `.card__section` inherits from `.card`.
+
+To change default color use `.bg-[color]` class from
+[background color utilities](/utilities/color#background-color).
+
+<GrayPreview>
+  <Grid>
+    <GridCol size={{ md: "auto" }}>
+      <h2 className="h4">Black section</h2>
+      <Card>
+        <DefaultSection
+          color="black"
+          content="Just this section changed color"
+        />
+        {[1, 2].map((i) => (
+          <DefaultSection
+            key={i.toString()}
+            content="Color inherited from card"
+          />
+        ))}
+      </Card>
+    </GridCol>
+    <GridCol size={{ md: "auto" }}>
+      <h2 className="h4">Black card</h2>
+      <Card color="black">
+        {[1, 2, 3].map((i) => (
+          <DefaultSection
+            key={i.toString()}
+            content="Color inherited from card"
+          />
+        ))}
+      </Card>
+    </GridCol>
+  </Grid>
+</GrayPreview>
+
+## Height
+
+In `flex` environment, card sections can fill out remaining space with
+`.card__section--fill` class.
+
+<GrayPreview>
+  <Grid justifyHeight>
+    <GridCol size={{ md: 4 }}>
+      <Card>
+        <CardSection isFilling>
+          <h2>Filling good</h2>
+          <p>Adjusting by filling the space</p>
+        </CardSection>
+        <Divider />
+        <CardSection isFilling>
+          <h2>Filling good</h2>
+          <p>Adjusting by filling the space</p>
+        </CardSection>
+      </Card>
+    </GridCol>
+    <GridCol size={{ md: 4 }}>
+      <Card>
+        <CardSection isFilling>
+          <h2>I fill for you</h2>
+        </CardSection>
+        <Divider />
+        <CardSection>
+          <h2>I don't fill good</h2>
+          <p>Someone turned my fillings off</p>
+        </CardSection>
+      </Card>
+    </GridCol>
+    <GridCol size={{ md: 4 }}>
+      <Card>
+        <CardSection isFilling>
+          <h2>Tall helper card</h2>
+          <p>
+            This card is here just to stretch the vertical space and force the
+            other cards to fill their remaining space.
+          </p>
+          <p>
+            Ipsum consequat esse eu ullamco deserunt veniam exercitation
+            officia. In eu voluptate Lorem ut nisi veniam nulla Lorem ipsum.
+            Enim excepteur adipisicing esse id est. Deserunt adipisicing
+            excepteur sunt occaecat consectetur dolor deserunt excepteur ut enim
+            ullamco Lorem. Enim aliquip laboris sint consequat culpa tempor
+            exercitation. Laborum labore amet do ullamco excepteur anim tempor
+            pariatur pariatur.
+          </p>
+        </CardSection>
+      </Card>
+    </GridCol>
+  </Grid>
+</GrayPreview>
+
+## Header
+
+Header is used to display extra info for the card.
+
+<p>
+  You can choose a black, orange, or gray-400 color for background, default is{" "}
+  {headerColors[0]}.
+</p>
+
+If you need empty header use non breaking space instead of empty string (`\xa0` or `&nbsp;`), but this in not required and you can have thinner header if you keep it empty.
+
+By default, longer texts in the header are truncated. If you want the header text to be wrapped, use the `.card__header--wrap` class.
+
+<GrayPreview>
+  <Card className="bold">
+    <div className="card__header"></div>
+    <DefaultSection />
+  </Card>
+  {headerColors.map((color) => (
+    <Card key={color} className="bold">
+      <CardHeader
+        title={color === "black" ? "" : "Header title"}
+        color={color}
+      />
+      <DefaultSection />
+    </Card>
+  ))}
+  <Card className="bold">
+    <div className="card__header card__header--wrap">
+      Indonesia (+ Sumatra, Java, Borneo, Bali, Sulawesi) (+62)
+    </div>
+    <DefaultSection />
+  </Card>
+</GrayPreview>
+
+## Divider
+
+If you need to divide the card with a visible element, use the [Divider](/components/divider) component
+in between sections. You can use option with icon or without icon.
+
+<GrayPreview>
+  <Card {...props}>
+    <CardSection>
+      <h2>Dividers</h2>
+    </CardSection>
+    <Divider />
+    <DefaultSection />
+    <Divider icon="add" />
+    <DefaultSection />
+  </Card>
+</GrayPreview>
+
+## Image
+
+You can use images in cards. You can use it inside sections or outside to fill
+the width of the card.
+
+export const PlaceholderImage = ({ title, ...props }) => (
+  <Image
+    src={`https://placehold.co/600x330/000000/FFFFFF?text=${title}`}
+    alt=""
+    {...props}
+  />
+);
+
+<GrayPreview>
+  <Grid>
+    <GridCol size={{ md: 6 }}>
+      <Card>
+        <CardSection>
+          <PlaceholderImage title="Image inside of a section" />
+          <h3>Section</h3>
+          <p>Content</p>
+        </CardSection>
+      </Card>
+    </GridCol>
+    <GridCol size={{ md: 6 }}>
+      <Card>
+        <CardSection>
+          <h3>Section</h3>
+          <p>Content</p>
+          <PlaceholderImage title="Image inside of a section" />
+        </CardSection>
+      </Card>
+    </GridCol>
+    <GridCol size={{ md: 6 }}>
+      <Card>
+        <PlaceholderImage
+          className="mb-none"
+          title="Image outside of a section"
+        />
+        <DefaultSection />
+      </Card>
+    </GridCol>
+    <GridCol size={{ md: 6 }}>
+      <Card>
+        <DefaultSection />
+        <PlaceholderImage
+          className="mb-none"
+          title="Image outside of a section"
+        />
+      </Card>
+    </GridCol>
+  </Grid>
+</GrayPreview>
+
+## Real-world example
+
+export const products = [
+  {
+    title: "Internet",
+    description:
+      "Od najrýchlejšej optiky po bezdrôtové 4G, nájdeme vám najlepšie pripojenie, aké môžete mať.",
+    badge: "Najpredávanejší",
+    price: 10,
+  },
+  {
+    title: "Televízia",
+    description:
+      "Správy, šport, večerná zábava, detské alebo dokumentárne kanálov... Máme pre vás všetko. Archív, nahrávanie a špičkový obraz sú s Orange TV samozrejmosťou.",
+    price: 10,
+  },
+];
+
+<GrayPreview>
+  <Grid justifyHeight>
+    {products.map((product, index, array) => (
+      <GridCol key={product.title} size={{ md: Math.round(12 / array.length) }}>
+        <Card>
+          <CardHeader title={product.badge} />
+          <CardSection isFilling>
+            <h2>{product.title}</h2>
+            <p className="bold large">{product.description}</p>
+          </CardSection>
+          <CardSection>
+            <div className="bold mb-small">
+              <div className="h1 mb-small color-orange">
+                od {product.price} €/mes.
+              </div>
+              <div className="small">Viazanosť 24 mesiacov</div>
+              <div>+ 19,90 € poplatok za inštaláciu</div>
+            </div>
+            <a href="#" className="btn btn--primary">
+              Vybrať
+            </a>
+          </CardSection>
+        </Card>
+      </GridCol>
+    ))}
+  </Grid>
+</GrayPreview>
+
+## Props
+
+<ComponentDocs title="<Card />" component={Card} />
+
+<ComponentDocs title="<CardSection />" component={CardSection} />
+
+<ComponentDocs title="<CardHeader />" component={CardHeader} />
+
+## Accessibility
+
+The `<Card />` component is purely presentational and does not carry any
+semantic meaning. The only thing you should care about is the usage of correct
+heading level in `<CardSection />`

package/src/components/Card/Card.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+import cx from "classnames";
+
+export const cardColors = ["white", "black", "orange"] as const;
+export type CardColor = (typeof cardColors)[number];
+
+export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Custom background color */
+  color?: CardColor;
+  /** Add border */
+  hasBorder?: boolean;
+  hasShadow?: boolean;
+}
+
+export const CLASS_ROOT = "card";
+
+const Card = React.forwardRef<HTMLDivElement, CardProps>(
+  ({ className, color = "white", hasBorder, hasShadow, ...other }, ref) => {
+    const classes = cx(
+      CLASS_ROOT,
+      {
+        [`bg-${color}`]: color !== "white",
+        [`${CLASS_ROOT}--bordered`]: hasBorder,
+        [`${CLASS_ROOT}--shadow`]: hasShadow,
+      },
+      className,
+    );
+
+    return <div className={classes} ref={ref} {...other} />;
+  },
+);
+
+Card.displayName = "Card";
+
+export { Card };

package/src/components/Card/CardProductHeader.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+import cx from "classnames";
+
+interface CardProductHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+  image?: React.ReactNode;
+  /** Use small spacing */
+  space?: "small";
+}
+
+export const CLASS_ROOT = "card__product-header";
+
+const CardProductHeader = React.forwardRef<
+  HTMLDivElement,
+  CardProductHeaderProps
+>(({ className, children, image, space, ...other }, ref) => {
+  const classes = cx(
+    CLASS_ROOT,
+    {
+      [`${CLASS_ROOT}--space-small`]: space === "small",
+    },
+    className,
+  );
+
+  return (
+    <div className={classes} ref={ref} {...other}>
+      <div>{children}</div>
+      {image}
+    </div>
+  );
+});
+
+CardProductHeader.displayName = "CardProductHeader";
+
+export { CardProductHeader };

package/src/components/Card/CardSection.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+import cx from "classnames";
+
+export const cardSectionColors = [
+  "orange",
+  "gray",
+  "blue",
+  "green",
+  "pink",
+  "yellow",
+  "violet",
+] as const;
+export type CardSectionColor = (typeof cardSectionColors)[number];
+
+interface CardSectionProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Custom background color */
+  color?: CardSectionColor;
+  /** Fill available space using flexbox */
+  isFilling?: boolean;
+  /** Use small spacing */
+  space?: "small";
+}
+
+export const CLASS_ROOT = "card__section";
+
+const CardSection = React.forwardRef<HTMLDivElement, CardSectionProps>(
+  ({ className, color, isFilling, space, ...other }, ref) => {
+    const classes = cx(
+      CLASS_ROOT,
+      {
+        [`bg-${color}`]: color,
+        [`${CLASS_ROOT}--fill`]: isFilling,
+        [`${CLASS_ROOT}--space-small`]: space === "small",
+      },
+      className,
+    );
+
+    return <div className={classes} ref={ref} {...other} />;
+  },
+);
+
+CardSection.displayName = "CardSection";
+
+export { CardSection };

package/src/components/Card/index.ts

@@ -0,0 +1,5 @@
+import "./styles/style.scss";
+
+export { Card } from "./Card";
+export { CardSection } from "./CardSection";
+export { CardProductHeader } from "./CardProductHeader";

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

@@ -0,0 +1,16 @@
+@use "../../../styles/tokens/color";
+@use "../../../styles/tokens/space";
+@use "../../../styles/tools/convert";
+
+$card-base: (
+  background-color: var(--color-surface-primary),
+  margin-bottom: space.get(),
+  border-radius: convert.to-rem(10px),
+  border: 1px solid var(--color-border-subtle),
+  overflow: hidden,
+);
+
+$spacing: (
+  default: space.get(),
+  md: space.get("large"),
+);