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

package/src/components/Progress/tests/Progress.unit.test.js

@@ -0,0 +1,108 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import { Progress } from '../Progress';
+
+// value and label props is required
+describe('rendering Progress', () => {
+  describe('initial state', () => {
+    it('has default class progress', () => {
+      const { getByTestId } = render(
+        <Progress value="test-value" label="test-label" data-testid="test-id" />
+      );
+      expect(getByTestId('test-id')).toHaveClass('progress');
+    });
+    it('has default class progress__label', () => {
+      const { container } = render(
+        <Progress value="test-value" label="test-label" />
+      );
+      expect(container.getElementsByClassName('progress__label').length).toBe(
+        1
+      );
+    });
+    it('has default class progress__bar', () => {
+      const { container } = render(
+        <Progress value="test-value" label="test-label" />
+      );
+      expect(container.getElementsByClassName('progress__bar').length).toBe(1);
+    });
+    it('has default class progress__indicator', () => {
+      const { container } = render(
+        <Progress value="test-value" label="test-label" />
+      );
+      expect(
+        container.getElementsByClassName('progress__indicator').length
+      ).toBe(1);
+    });
+    it('has default class progress__value', () => {
+      const { container } = render(
+        <Progress value="test-value" label="test-label" />
+      );
+      expect(container.getElementsByClassName('progress__value').length).toBe(
+        1
+      );
+    });
+  });
+
+  describe('passed props', () => {
+    it('renders value', () => {
+      const { getByText } = render(
+        <Progress value="test-value" label="test-label">
+          test-value
+        </Progress>
+      );
+      expect(getByText('test-value')).toBeInTheDocument();
+    });
+    it('renders label', () => {
+      const { getByText } = render(
+        <Progress value="test-value" label="test-label">
+          test-label
+        </Progress>
+      );
+      expect(getByText('test-label')).toBeInTheDocument();
+    });
+
+    it('has additional class when className is set', () => {
+      const { getByTestId } = render(
+        <Progress
+          value="test-value"
+          label="test-label"
+          data-testid="test-id"
+          className="test-class"
+        />
+      );
+      expect(getByTestId('test-id')).toHaveClass('progress');
+      expect(getByTestId('test-id')).toHaveClass('test-class');
+    });
+
+    ['green', 'yellow', 'red', 'blue'].forEach(color => {
+      it(`has progress__indicator--${color} class when color is ${color}`, () => {
+        const { container } = render(
+          <Progress
+            data-testid="test-id"
+            color={color}
+            value="test-value"
+            label="test-label"
+          />
+        );
+        expect(
+          container.getElementsByClassName(`progress__indicator--${color}`)
+            .length
+        ).toBe(1);
+      });
+    });
+    it(`doesnt have class progress__indicator--orange class when color is orange`, () => {
+      const { container } = render(
+        <Progress
+          data-testid="test-id"
+          color={'orange'}
+          value="test-value"
+          label="test-label"
+        />
+      );
+      expect(
+        container.getElementsByClassName('progress__indicator--orange').length
+      ).toBe(0);
+    });
+  });
+});

package/src/components/PromoBanner/PromoBanner.tsx

@@ -0,0 +1,65 @@
+import React from "react";
+import cx from "classnames";
+import { Grid, GridCol } from "../Grid";
+import { Image } from "../Image";
+import { Button } from "../Button";
+
+interface PromoBannerProps {
+  colorScheme?: "light" | "dark";
+  className?: string;
+  title: string;
+  secondaryTitle?: string;
+  description: string;
+  buttonText: string;
+  image?: string;
+}
+
+const CLASS_ROOT = "promo-banner";
+export const PromoBanner = ({
+  title,
+  secondaryTitle,
+  description,
+  buttonText,
+  image,
+  colorScheme,
+  className,
+}: PromoBannerProps) => {
+  const classes = cx(
+    CLASS_ROOT,
+    {
+      "is-light": colorScheme === "light",
+      "is-dark": colorScheme === "dark",
+    },
+    className,
+  );
+  return (
+    <div className={classes}>
+      <Grid>
+        <GridCol
+          size={{ xs: 12, md: image ? 6 : 8 }}
+          className={`${CLASS_ROOT}__item`}
+        >
+          <h2 className="display-3 thin mb-medium">
+            <span
+              className={`${secondaryTitle ? `${CLASS_ROOT}__item-title` : ""}`}
+            >
+              {title}
+            </span>
+            {secondaryTitle && (
+              <span className={`color-orange ml-small`}>{secondaryTitle}</span>
+            )}
+          </h2>
+          <p className={`mb-large ${image ? "show-lg" : ""}`}>{description}</p>
+          <Button type="fill" size="large">
+            {buttonText}
+          </Button>
+        </GridCol>
+        {image && (
+          <GridCol size={{ xs: 12, md: 6 }} className={`${CLASS_ROOT}__image`}>
+            <Image src={image} alt="" className="mb-none" />
+          </GridCol>
+        )}
+      </Grid>
+    </div>
+  );
+};

package/src/components/PromoBanner/index.ts

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

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

@@ -0,0 +1,37 @@
+@use "sass:map";
+@use "sass:math";
+
+@use "./../../../styles/tools/generate";
+@use "./../../../styles/tools/layout";
+@use "./../../../styles/tokens/breakpoint";
+@use "./../../../styles/tokens/space";
+
+@mixin promo-banner-base() {
+  background-color: var(--color-background-primary);
+  color: var(--color-text-default);
+  padding: space.get("xlarge") 70px;
+
+  @include breakpoint.get("lg", "down") {
+    padding: space.get("xlarge") 20px;
+  }
+
+  @include breakpoint.get("sm", "down") {
+    padding: 30px space.get("small");
+  }
+}
+
+@mixin promo-banner-image() {
+  text-align: center;
+  align-self: center;
+}
+
+@mixin promo-banner-item() {
+  padding-right: space.get("xlarge") !important;
+  @include breakpoint.get("lg", "down") {
+    padding-right: 10px !important;
+  }
+}
+
+@mixin promo-banner-item-title() {
+  margin-right: space.get("small") !important;
+}

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

@@ -0,0 +1,23 @@
+@use "../../../styles/tools/layout";
+@use "../../../styles/tokens/space";
+@use "../../../styles/tokens/breakpoint";
+@use "../../../styles/tools/generate";
+@use "./mixins";
+
+@layer components {
+  .promo-banner {
+    @include mixins.promo-banner-base;
+
+    &__image {
+      @include mixins.promo-banner-image;
+    }
+
+    &__item {
+      @include mixins.promo-banner-item;
+
+      &-title {
+        @include mixins.promo-banner-item-title;
+      }
+    }
+  }
+}

package/src/components/PromotionCard/PromotionCard.mdx

@@ -0,0 +1,191 @@
+import { ComponentDocs } from '@lighting-beetle/lighter-styleguide';
+import Preview from '../../styleguide/Preview';
+import Image from '../../components/Image';
+
+import PromotionCard, {
+  PromotionCardContent,
+  PromotionCardImageWrapper,
+  PromotionCardSection,
+  PromotionCardTitle,
+} from './';
+import { Button } from '../index';
+import Divider from '../Divider';
+import Pagination from '../Pagination';
+
+import phones from '../../assets/images/developers/phones.png';
+import Grid, { GridCol } from '../Grid';
+
+export const getItems = (count = 10, current = Math.ceil(count / 2)) =>
+  [
+    ...Array(count)
+      .fill('')
+      .map((_, i) => i + 1),
+  ].map(n => ({
+    label: `${n}`,
+    ariaLabel: `Strana ${n}`,
+    href: `/?page=${n}`,
+    ...(current === n ? { isActive: true } : {}),
+  }));
+
+export const label = 'Výber stránok';
+
+export const DefaultPromotionsCard = () => (
+  <PromotionCard>
+    <PromotionCardSection>
+      <PromotionCardContent>
+        <PromotionCardTitle>
+          <h2>Online ochrana pre váš digitálny svet</h2>
+        </PromotionCardTitle>
+        <p className="mb-none">
+          Orange je tu, aby ste mohli používať internet bezpečne a bez obáv.
+        </p>
+      </PromotionCardContent>
+      <Button href="#">Zistiť viac</Button>
+    </PromotionCardSection>
+    <PromotionCardImageWrapper>
+      <Image src={phones} alt="iPhone image" />
+    </PromotionCardImageWrapper>
+  </PromotionCard>
+);
+
+export const DarkPromotionsCard = () => (
+  <PromotionCard colorScheme="dark">
+    <PromotionCardSection>
+      <PromotionCardContent>
+        <PromotionCardTitle>
+          <h2>Online ochrana pre váš digitálny svet</h2>
+        </PromotionCardTitle>
+        <p className="mb-none">
+          Orange je tu, aby ste mohli používať internet bezpečne a bez obáv.
+        </p>
+      </PromotionCardContent>
+      <Button href="#">Zistiť viac</Button>
+    </PromotionCardSection>
+    <PromotionCardImageWrapper>
+      <Image src={phones} alt="iPhone image" />
+    </PromotionCardImageWrapper>
+  </PromotionCard>
+);
+
+export const InversePromotionsCard = () => (
+  <PromotionCard colorScheme="dark">
+    <PromotionCardSection isInverse>
+      <PromotionCardContent>
+        <PromotionCardTitle>
+          <h2>Online ochrana pre váš digitálny svet</h2>
+        </PromotionCardTitle>
+        <p className="mb-none">
+          Orange je tu, aby ste mohli používať internet bezpečne a bez obáv.
+        </p>
+      </PromotionCardContent>
+      <Button href="#">Zistiť viac</Button>
+    </PromotionCardSection>
+    <PromotionCardImageWrapper>
+      <Image src={phones} alt="iPhone image" />
+    </PromotionCardImageWrapper>
+  </PromotionCard>
+);
+
+# Promotion card
+
+Karta, ktorá propaguje produkt alebo službu. Komponent Promotion card je adaptáciou [Card komponentu](/components/card).
+
+## Príklady
+
+### Základný
+
+<Preview>
+  <Grid>
+    <GridCol size={{ default: 12, xxl: 8 }}>
+      <DefaultPromotionsCard />
+    </GridCol>
+  </Grid>
+</Preview>
+
+### Tmavý variant
+
+<Preview>
+  <Grid>
+    <GridCol size={{ default: 12, xxl: 8 }}>
+      <DarkPromotionsCard />
+    </GridCol>
+  </Grid>
+</Preview>
+
+### Inverzný variant
+
+<Preview>
+  <Grid>
+    <GridCol size={{ default: 12, xxl: 8 }}>
+      <InversePromotionsCard />
+    </GridCol>
+  </Grid>
+</Preview>
+
+### Viacero kariet
+
+<Preview>
+  <Grid>
+    <GridCol size={{ default: 12, xxl: 8 }}>
+      <DefaultPromotionsCard />
+      <DarkPromotionsCard />
+      <DefaultPromotionsCard />
+    </GridCol>
+  </Grid>
+</Preview>
+
+## Použitie
+
+### Grid
+
+Šírka karty na väčších obrazovkách je obmedzená gridom. Pozri príklad kódu nižšie:
+
+<Preview>
+  <Grid>
+    <GridCol size={{ default: 12, xxl: 8 }}>
+      <p className="mb-small">
+        <b>Nové</b>
+      </p>
+      <Divider
+        thinLine
+        className="pr-none pb-none pl-none pt-none mb-medium mb-md-none"
+      />
+      <DefaultPromotionsCard />
+      <p className="mb-small">
+        <b>Staršie</b>
+      </p>
+      <Divider
+        thinLine
+        className="pr-none pb-none pl-none pt-none mb-medium mb-md-none"
+      />
+      <DarkPromotionsCard />
+      <DefaultPromotionsCard />
+      <InversePromotionsCard />
+      <Pagination label={label} items={getItems(10, 1)} isCompact />
+    </GridCol>
+  </Grid>
+</Preview>
+
+## Props
+
+<ComponentDocs title="<PromotionCard />" component={PromotionCard} />
+
+<ComponentDocs
+  title="<PromotionCardSection />"
+  component={PromotionCardSection}
+/>
+
+<ComponentDocs
+  title="<PromotionCardContent />"
+  component={PromotionCardContent}
+/>
+
+<ComponentDocs
+  title="<PromotionCardTitle />"
+  component={PromotionCardTitle}
+/>
+
+<ComponentDocs
+  title="<PromotionCardImageWrapper />"
+  component={PromotionCardImageWrapper}
+/>

package/src/components/PromotionCard/PromotionCard.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import cx from 'classnames';
+
+import { Card } from '../Card';
+
+import { CLASS_ROOT } from './constants';
+
+export interface PromotionCardProps {
+  /** Inverse colors */
+  colorScheme?: 'light' | 'dark';
+  className?: string;
+  children?: React.ReactNode;
+  [key: string]: any;
+}
+
+export const PromotionCard: React.FC<PromotionCardProps> = ({ 
+  colorScheme = 'light', 
+  className, 
+  children, 
+  ...other 
+}) => {
+  const classes = cx(CLASS_ROOT, className);
+  const color = colorScheme === 'dark' ? 'black' : 'white';
+  return (
+    <Card className={classes} color={color} {...other}>
+      {children}
+    </Card>
+  );
+};
+
+PromotionCard.displayName = 'PromotionCard';

package/src/components/PromotionCard/PromotionCardContent.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import cx from 'classnames';
+
+import { CLASS_CONTENT } from './constants';
+
+interface PromotionCardContentProps {
+  className?: string;
+  children?: React.ReactNode;
+  [key: string]: any;
+}
+
+export const PromotionCardContent: React.FC<PromotionCardContentProps> = ({ 
+  className, 
+  children, 
+  ...other 
+}) => {
+  const classes = cx(CLASS_CONTENT, className);
+  return (
+    <div className={classes} {...other}>
+      {children}
+    </div>
+  );
+};
+
+PromotionCardContent.displayName = 'PromotionCardContent';

package/src/components/PromotionCard/PromotionCardImageWrapper.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import cx from 'classnames';
+
+import { CLASS_IMAGE_WRAPPER } from './constants';
+
+interface PromotionCardImageWrapperProps {
+  className?: string;
+  children?: React.ReactNode;
+  [key: string]: any;
+}
+
+export const PromotionCardImageWrapper: React.FC<PromotionCardImageWrapperProps> = ({ 
+  className, 
+  children, 
+  ...other 
+}) => {
+  const classes = cx(CLASS_IMAGE_WRAPPER, className);
+  return (
+    <div className={classes} {...other}>
+      {children}
+    </div>
+  );
+};
+
+PromotionCardImageWrapper.displayName = 'PromotionCardImageWrapper';

package/src/components/PromotionCard/PromotionCardSection.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import cx from "classnames";
+
+import { CardSection } from "../Card";
+
+import { CLASS_SECTION } from "./constants";
+
+export interface PromotionCardSectionProps {
+  /** Inverse colors */
+  isInverse?: boolean;
+  className?: string;
+  children?: React.ReactNode;
+  [key: string]: any;
+}
+
+export const PromotionCardSection: React.FC<PromotionCardSectionProps> = ({
+  className,
+  children,
+  ...other
+}) => {
+  const classes = cx(CLASS_SECTION, className);
+  return (
+    <CardSection className={classes} {...other}>
+      {children}
+    </CardSection>
+  );
+};
+
+PromotionCardSection.displayName = "PromotionCardSection";

package/src/components/PromotionCard/PromotionCardTitle.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import cx from 'classnames';
+
+import { CLASS_TITLE } from './constants';
+
+interface PromotionCardTitleProps {
+  className?: string;
+  children: React.ReactElement;
+  [key: string]: any;
+}
+
+export const PromotionCardTitle: React.FC<PromotionCardTitleProps> = ({ 
+  className, 
+  children, 
+  ...other 
+}) => {
+  const classes = cx(CLASS_TITLE, className);
+  return React.cloneElement(children, { 
+    className: classes, 
+    ...other 
+  } as React.HTMLAttributes<HTMLElement>);
+};
+
+PromotionCardTitle.displayName = 'PromotionCardTitle';

package/src/components/PromotionCard/constants.ts

@@ -0,0 +1,5 @@
+export const CLASS_ROOT = 'promotion-card';
+export const CLASS_SECTION = `${CLASS_ROOT}__section`;
+export const CLASS_CONTENT = `${CLASS_ROOT}__content`;
+export const CLASS_IMAGE_WRAPPER = `${CLASS_ROOT}__image-wrapper`;
+export const CLASS_TITLE = `${CLASS_ROOT}__title`; 

package/src/components/PromotionCard/index.ts

@@ -0,0 +1,7 @@
+import "./styles/style.scss";
+
+export { PromotionCard } from "./PromotionCard";
+export { PromotionCardContent } from "./PromotionCardContent";
+export { PromotionCardImageWrapper } from "./PromotionCardImageWrapper";
+export { PromotionCardSection } from "./PromotionCardSection";
+export { PromotionCardTitle } from "./PromotionCardTitle";

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

@@ -0,0 +1,4 @@
+@use '../../../styles/tokens/color';
+@use '../../../styles/tokens/space';
+
+

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

@@ -0,0 +1,89 @@
+@use "sass:math";
+@use "../../../styles/tokens/space";
+@use "../../../styles/tokens/color";
+@use "../../../styles/tools/generate";
+@use "../../../styles/tokens/breakpoint";
+@use "../../../styles/tools/convert";
+@use "./../../../styles/typography/config" as typography;
+@use "./config";
+
+@mixin base {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--color-border-subtle);
+
+  &.bg-black {
+    border: 1px solid var(--color-icon-default);
+  }
+
+  @include breakpoint.get("md") {
+    flex-direction: row !important;
+    margin: space.get("medium") 0;
+    justify-content: space-between;
+  }
+}
+
+@mixin section {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: space.get("medium");
+
+  .btn,
+  button {
+    display: block;
+    width: initial !important;
+  }
+
+  @include breakpoint.get("md") {
+    flex: 0 60%;
+    max-width: 500px;
+    min-width: 0;
+  }
+}
+
+@mixin content {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 10px;
+}
+
+@mixin image-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  picture {
+    display: inline;
+  }
+
+  img {
+    width: convert.to-rem(260px);
+    height: convert.to-rem(260px);
+    object-fit: cover;
+    object-position: center;
+    margin-bottom: 0;
+  }
+
+  @include breakpoint.get("md") {
+    justify-content: left;
+    padding-right: convert.to-rem(50px);
+
+    img {
+      width: convert.to-rem(176px);
+      height: convert.to-rem(176px);
+    }
+  }
+}
+
+@mixin title {
+  margin-bottom: 0;
+  font-size: convert.to-rem(24px);
+  line-height: convert.to-rem(math.round(24px * 1.1));
+  max-width: convert.to-rem(580px);
+
+  @include breakpoint.get("md") {
+    display: inline-block;
+  }
+}