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

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,36 @@
+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";
+
+const CardProductHeader = React.forwardRef<
+  HTMLDivElement,
+  CardProductHeaderProps
+>(({ className, children, image, space, ...other }, ref) => {
+  const classes = cx(
+    `${CLASS_ROOT}-header`,
+    {
+      [`${CLASS_ROOT}-header--space-small`]: space === "small",
+    },
+    className,
+  );
+
+  const contentClasses = `${CLASS_ROOT}-content`;
+
+  return (
+    <div className={classes} ref={ref} {...other}>
+      <div className={contentClasses}>{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"),
+);

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

@@ -0,0 +1,68 @@
+@use "./config";
+@use "../../../styles/tools/generate";
+@use "../../../styles/tools/convert";
+@use "../../../styles/tokens/space";
+@use "../../../styles/tokens/breakpoint";
+
+@mixin card-base($base: config.$card-base) {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+
+  > *:not([class*="mb-"]) {
+    margin-bottom: 0;
+    flex-shrink: 0;
+  }
+
+  .divider {
+    padding: 0;
+  }
+
+  @include generate.css-map($base);
+}
+
+@mixin card-spacing($spacing) {
+  flex: 0 1 auto;
+
+  @if ($spacing == null) {
+    @each $breakpoint, $value in config.$spacing {
+      @include breakpoint.get($breakpoint) {
+        padding: $value;
+      }
+    }
+  } @else {
+    padding: $spacing;
+  }
+}
+
+@mixin card-section($spacing) {
+  @include card-spacing($spacing);
+
+  .btn,
+  button {
+    display: block;
+    width: 100%;
+
+    &:not(:last-child) {
+      margin-bottom: space.get("small");
+    }
+  }
+
+  > *:last-child {
+    margin-bottom: 0;
+  }
+}
+
+@mixin card-section-fill() {
+  flex-grow: 1;
+}
+
+@mixin card-product-header($spacing) {
+  @include card-spacing($spacing);
+}
+
+@mixin card-product-image() {
+  object-fit: cover;
+  object-position: left;
+  max-width: convert.to-rem(125px);
+}

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

@@ -0,0 +1,39 @@
+@use "./mixins";
+@use "../../../styles/tokens/space";
+
+@layer components {
+  .card {
+    @include mixins.card-base;
+
+    &__section {
+      @include mixins.card-section(null);
+
+      &--space-small {
+        @include mixins.card-section(space.get());
+      }
+
+      &--fill {
+        @include mixins.card-section-fill;
+      }
+    }
+
+    &__product {
+      &-header {
+        display: flex;
+        justify-content: space-between;
+
+        > img {
+          @include mixins.card-product-image;
+        }
+      }
+
+      &-content {
+        @include mixins.card-product-header(null);
+      }
+    }
+
+    &__product-header--space-small &__product-content {
+      @include mixins.card-product-header(space.get());
+    }
+  }
+}

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

@@ -0,0 +1,31 @@
+import { render } from "@testing-library/react";
+import { axe } from "jest-axe";
+
+import { Card, CardSection, CardProductHeader } from "../";
+
+const example = (
+  <>
+    <Card>
+      <CardSection>Card example 1</CardSection>
+    </Card>
+    <Card>
+      <CardSection>Card example 2</CardSection>
+      <CardSection>With two section</CardSection>
+    </Card>
+    <Card>
+      <CardProductHeader>Card product header example</CardProductHeader>
+      <CardSection>Card example 3</CardSection>
+      <CardSection>With product header and two section</CardSection>
+    </Card>
+  </>
+);
+
+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/Card/tests/Card.unit.test.js

@@ -0,0 +1,47 @@
+import { render } from "@testing-library/react";
+
+import { Card } from "../Card";
+
+describe("rendering Card", () => {
+  describe("initial state", () => {
+    it("has default class card", () => {
+      const { getByTestId } = render(<Card data-testid="test-id" />);
+      expect(getByTestId("test-id")).toHaveClass("card");
+    });
+  });
+
+  describe("passed props", () => {
+    it("renders children", () => {
+      const { getByText } = render(<Card>test</Card>);
+      expect(getByText("test")).toBeInTheDocument();
+    });
+
+    it("has additional class when className is set", () => {
+      const { getByTestId } = render(
+        <Card data-testid="test-id" className="test-class" />,
+      );
+      expect(getByTestId("test-id")).toHaveClass("card");
+      expect(getByTestId("test-id")).toHaveClass("test-class");
+    });
+
+    it("has class card--bordered when hasBorder is passed", () => {
+      const { getByTestId } = render(<Card data-testid="test-id" hasBorder />);
+      expect(getByTestId("test-id")).toHaveClass("card--bordered");
+    });
+
+    ["black", "orange"].map((color) => {
+      it(`has bg-${color} class when color is ${color}`, () => {
+        const { getByTestId } = render(
+          <Card data-testid="test-id" color={color} />,
+        );
+        expect(getByTestId("test-id")).toHaveClass(`bg-${color}`);
+      });
+    });
+    it(`doesnt have class bg-white class when color is white`, () => {
+      const { getByTestId } = render(
+        <Card data-testid="test-id" color={"white"} />,
+      );
+      expect(getByTestId("test-id")).not.toHaveClass("bg-white");
+    });
+  });
+});