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

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

@@ -0,0 +1,272 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import { Hero } from '../';
+
+const image = {
+  default: 'test-img',
+  sm: 'test-img-sm',
+  lg: 'test-img-lg',
+  xl: 'test-img-xl',
+  xxl: 'test-img-xxl',
+};
+
+// title is required
+describe('rendering Hero', () => {
+  describe('initial state', () => {
+    it('has default class hero', () => {
+      const { container } = render(<Hero title="test-title" />);
+      expect(container.getElementsByClassName('hero').length).toBe(1);
+    });
+    it('has default class justify-content-space-between', () => {
+      const { container } = render(<Hero title="test-title" />);
+      expect(
+        container.getElementsByClassName('justify-content-space-between').length
+      ).toBe(1);
+    });
+    it('has default class hero__content', () => {
+      const { container } = render(<Hero title="test-title" />);
+      expect(container.getElementsByClassName('hero__content').length).toBe(1);
+    });
+    it('has default class h2', () => {
+      const { container } = render(<Hero title="test-title" />);
+      expect(container.getElementsByClassName('h2').length).toBe(1);
+    });
+  });
+
+  describe('passed title and description props', () => {
+    it('has class hero__description when description is set', () => {
+      const { container } = render(
+        <Hero description="test-description" title="test-title" />
+      );
+      expect(container.getElementsByClassName('hero__description').length).toBe(
+        1
+      );
+    });
+    it('has class bold when description is set', () => {
+      const { container } = render(
+        <Hero description="test-description" title="test-title" />
+      );
+      expect(container.getElementsByClassName('bold').length).toBe(1);
+    });
+    it('has class h1 when textSize is set to large', () => {
+      const { container } = render(
+        <Hero textSize="large" title="test-title" />
+      );
+      expect(container.getElementsByClassName('h1').length).toBe(1);
+    });
+    it('has class large bold when description is set and textSize is set to large', () => {
+      const { container } = render(
+        <Hero
+          description="test-description"
+          textSize="large"
+          title="test-title"
+        />
+      );
+      expect(container.getElementsByClassName('large').length).toBe(1);
+      expect(container.getElementsByClassName('bold').length).toBe(1);
+    });
+    it('renders title', () => {
+      const { getByText } = render(<Hero title="test-title" />);
+      expect(getByText('test-title')).toBeInTheDocument();
+    });
+    it('renders description', () => {
+      const { getByText } = render(
+        <Hero description="test-description" title="test-title" />
+      );
+      expect(getByText('test-description')).toBeInTheDocument();
+    });
+  });
+  describe('passed price prop', () => {
+    it('has classes h2 & hero__price when price is set', () => {
+      const { container } = render(
+        <Hero price="test-price" title="test-title" />
+      );
+      expect(container.getElementsByClassName('h2').length).toBe(2); // title + price
+      expect(container.getElementsByClassName('hero__price').length).toBe(1);
+    });
+    it('renders price when price is string', () => {
+      const { getByText } = render(
+        <Hero price="test-price" title="test-title" />
+      );
+      expect(getByText('test-price')).toBeInTheDocument();
+    });
+    it('renders price when price is object', () => {
+      const { getByText } = render(
+        <Hero
+          price={{
+            amount: 10.99,
+            prefix: 'test-prefix',
+            suffix: 'test-suffix',
+          }}
+          title="test-title"
+        />
+      );
+      expect(getByText('test-prefix10,99 €test-suffix')).toBeInTheDocument();
+    });
+  });
+  describe('passed button prop', () => {
+    it('renders button element when button prop is set', () => {
+      const { container } = render(
+        <Hero button={{ children: 'btn-test' }} title="test-title" />
+      );
+      expect(container.getElementsByClassName('btn').length).toBe(1);
+    });
+    it("button's children are rendered", () => {
+      const { getByText } = render(
+        <Hero button={{ children: 'btn-test' }} title="test-title" />
+      );
+      expect(getByText('btn-test')).toBeInTheDocument();
+    });
+    it('button has is-light class when background prop is set to black', () => {
+      const { container } = render(
+        <Hero
+          button={{ children: 'btn-test' }}
+          title="test-title"
+          colorScheme="black"
+        />
+      );
+      expect(container.getElementsByClassName('is-light').length).toBe(1);
+    });
+  });
+  describe('passed sticker prop', () => {
+    it('renders sticker element when sticker prop is set', () => {
+      const { container } = render(
+        <Hero sticker={{ children: 'sticker-test' }} title="test-title" />
+      );
+      expect(container.getElementsByClassName('sticker').length).toBe(1);
+    });
+    it("sticker's children are rendered", () => {
+      const { getByText } = render(
+        <Hero sticker={{ children: 'sticker-test' }} title="test-title" />
+      );
+      expect(getByText('sticker-test')).toBeInTheDocument();
+    });
+    it('sticker has class hero__sticker', () => {
+      const { container } = render(
+        <Hero sticker={{ children: 'sticker-test' }} title="test-title" />
+      );
+      expect(container.getElementsByClassName('hero__sticker').length).toBe(1);
+    });
+    it('sticker has additional class when set in sticker prop', () => {
+      const { container } = render(
+        <Hero
+          sticker={{
+            children: 'sticker-test',
+            className: 'sticker-test-class',
+          }}
+          title="test-title"
+        />
+      );
+      expect(container.getElementsByClassName('hero__sticker').length).toBe(1);
+      expect(
+        container.getElementsByClassName('sticker-test-class').length
+      ).toBe(1);
+    });
+    ['black', 'orange'].map(color => {
+      it(`sticker has sticker--${color} class when sticker.color is set to ${color}`, () => {
+        const { container } = render(
+          <Hero
+            sticker={{ children: 'btn-test', color: color }}
+            title="test-title"
+            colorScheme="black"
+          />
+        );
+        expect(
+          container.getElementsByClassName(`sticker--${color}`).length
+        ).toBe(1);
+      });
+    });
+  });
+  describe('passed image prop', () => {
+    it('renders image element when image prop is set', () => {
+      const { container } = render(<Hero image={image} title="test-title" />);
+      expect(container.getElementsByClassName('img').length).toBe(1);
+    });
+    it('image has additional class hero__image', () => {
+      const { container } = render(<Hero image={image} title="test-title" />);
+      expect(container.getElementsByClassName('hero__image').length).toBe(1);
+    });
+    it('image has additional class hero__image--single if single size image is used', () => {
+      const { container } = render(
+        <Hero image={{ src: 'text-img-single' }} title="test-title" />
+      );
+      expect(
+        container.getElementsByClassName('hero__image--single').length
+      ).toBe(1);
+    });
+    it('image has additional class hero__image--fullwidth if prop hasFullwidthImage is passed', () => {
+      const { container } = render(
+        <Hero image={image} hasFullwidthImage title="test-title" />
+      );
+      expect(
+        container.getElementsByClassName('hero__image--fullwidth').length
+      ).toBe(1);
+    });
+    it("image's attribute src is set to image.default", () => {
+      const { container } = render(<Hero image={image} title="test-title" />);
+      expect(container.querySelector('img').getAttribute('src')).toBe(
+        'test-img'
+      );
+    });
+    it("image's attribute src is set to image.src if passed as single image", () => {
+      const { container } = render(
+        <Hero image={{ src: 'test-img-single' }} title="test-title" />
+      );
+      expect(container.querySelector('img').getAttribute('src')).toBe(
+        'test-img-single'
+      );
+    });
+    ['test-img-xxl', 'test-img-xl', 'test-img-lg', 'test-img-sm'].map(
+      (size, index) => {
+        it(`${
+          index + 1
+        }. source element has attribute srcSet is set to ${size}`, () => {
+          const { container } = render(
+            <Hero image={image} title="test-title" />
+          );
+          expect(
+            container.querySelectorAll('source')[index].getAttribute('srcSet')
+          ).toBe(size);
+        });
+      }
+    );
+    it('image wrapper with class hero__image-wrapper is rendered', () => {
+      const { container } = render(<Hero image={image} title="test-title" />);
+      expect(
+        container.getElementsByClassName('hero__image-wrapper').length
+      ).toBe(1);
+    });
+    it('image has additional class hero__image--gradient when prop hasGradientOverlay is passed', () => {
+      const { container } = render(
+        <Hero hasGradientOverlay image={image} title="test-title" />
+      );
+      expect(
+        container.getElementsByClassName('hero__image--gradient').length
+      ).toBe(1);
+    });
+    it('image has additional class hero__image--gradient-halfwidth when prop hasGradientOverlay is passed', () => {
+      const { container } = render(
+        <Hero hasGradientOverlay image={image} title="test-title" />
+      );
+      expect(
+        container.getElementsByClassName('hero__image--gradient-halfwidth')
+          .length
+      ).toBe(1);
+    });
+    it("image doesn't have class hero__image--gradient-halfwidth when prop hasFullwidthImage is also passed", () => {
+      const { container } = render(
+        <Hero
+          hasGradientOverlay
+          hasFullwidthImage
+          image={image}
+          title="test-title"
+        />
+      );
+      expect(
+        container.getElementsByClassName('hero__image--gradient-halfwidth')
+          .length
+      ).toBe(0);
+    });
+  });
+});

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

@@ -0,0 +1,40 @@
+export const singleImage = {
+  src: 'https://placehold.co/626x540',
+  srcSet: 'https://placehold.co/626x540, https://placehold.co/1252x1080 2x',
+};
+
+export const halfImages = {
+  default: 'https://placehold.co/768x540',
+  sm: 'https://placehold.co/768x540, https://placehold.co/1536x1080 2x',
+  md: 'https://placehold.co/768x510, https://placehold.co/1536x1080 2x',
+  lg: 'https://placehold.co/470x540, https://placehold.co/940x1080 2x',
+  xl: 'https://placehold.co/590x540, https://placehold.co/1180x1080 2x',
+  xxl: 'https://placehold.co/650x540, https://placehold.co/1300x1080 2x',
+};
+
+export const halfImagesDark = {
+  default: 'https://placehold.co/768x540/222/666',
+  sm: 'https://placehold.co/768x540/222/666, https://placehold.co/1536x1080/222/666 2x',
+  md: 'https://placehold.co/768x510/222/666, https://placehold.co/1536x1080/222/666 2x',
+  lg: 'https://placehold.co/470x540/222/666, https://placehold.co/940x1080/222/666 2x',
+  xl: 'https://placehold.co/590x540/222/666, https://placehold.co/1180x1080/222/666 2x',
+  xxl: 'https://placehold.co/650x540/222/666, https://placehold.co/1300x1080/222/666 2x',
+};
+
+export const fullwidthImages = {
+  default: 'https://placehold.co/768x540',
+  sm: 'https://placehold.co/768x540, https://placehold.co/1536x1080 2x',
+  md: 'https://placehold.co/768x510, https://placehold.co/1536x1080 2x',
+  lg: 'https://placehold.co/1024x540, https://placehold.co/2048x1080 2x',
+  xl: 'https://placehold.co/1280x540, https://placehold.co/2520x1080 2x',
+  xxl: 'https://placehold.co/1400x540, https://placehold.co/2800x1080 2x',
+};
+
+export const fullwidthImagesDark = {
+  default: 'https://placehold.co/768x540/222/666',
+  sm: 'https://placehold.co/768x540/222/666, https://placehold.co/1536x1080/222/666 2x',
+  md: 'https://placehold.co/768x510/222/666, https://placehold.co/1536x1080/222/666 2x',
+  lg: 'https://placehold.co/1024x540/222/666, https://placehold.co/2048x1080/222/666 2x',
+  xl: 'https://placehold.co/1280x540/222/666, https://placehold.co/2520x1080/222/666 2x',
+  xxl: 'https://placehold.co/1400x540/222/666, https://placehold.co/2800x1080/222/666 2x',
+};

package/src/components/Icon/Icon.tsx

@@ -4,7 +4,7 @@ import React, { useContext } from "react";
 import cx from "classnames";
 import { SpritePathContext } from "./SpritePathContext";
 
-export type IconColor = "info" | "success" | "warning" | "danger";
+export type IconColor = "info" | "success" | "warning" | "danger" | "orange";
 export type IconSize =
   | "small"
   | "medium"
@@ -13,7 +13,7 @@ export type IconSize =
   | "xxlarge"
   | "huge";
 
-interface IconProps extends React.SVGAttributes<SVGSVGElement> {
+export interface IconProps extends React.SVGAttributes<SVGSVGElement> {
   /** Accessible label for the icon. */
   alt?: string;
   /** Icon color. */

package/src/components/Icon/IconSearch.jsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { useEffect, useState, useRef } from "react";
 import cx from "classnames";
 

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

@@ -19,9 +19,9 @@ $sizes: (
 );
 
 $colors: (
-  info: sass-map.get(color.$colors-light, icon-information),
-  success: sass-map.get(color.$colors-light, icon-positive),
-  warning: sass-map.get(color.$colors-light, icon-warning),
-  danger: sass-map.get(color.$colors-light, icon-negative),
-  "orange": sass-map.get(color.$colors-light, icon-brand),
+  info: var(--color-icon-information),
+  success: var(--color-icon-positive),
+  warning: var(--color-icon-warning),
+  danger: var(--color-icon-negative),
+  "orange": var(--color-icon-brand),
 );

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

@@ -1,13 +1,15 @@
-@use './mixins';
-@use '../../../styles/tools/convert';
-@use '../../../styles/tokens/space';
+@use "./mixins";
+@use "../../../styles/tools/convert";
+@use "../../../styles/tokens/space";
 
-.icon {
-  @include mixins.base;
-  @include mixins.sizes;
-  @include mixins.colors;
-}
+@layer components {
+  .icon {
+    @include mixins.base;
+    @include mixins.sizes;
+    @include mixins.colors;
+  }
 
-use {
-  pointer-events: none;
+  use {
+    pointer-events: none;
+  }
 }

package/src/components/IconList/IconList.mdx

@@ -0,0 +1,53 @@
+import { ComponentDocs } from '@lighting-beetle/lighter-styleguide';
+
+import { Preview } from '../../styleguide/';
+
+import IconList from './IconList';
+
+# IconList
+
+Unordered list with icons instead of default bullet styles. Great for describing features of a product.
+
+## Example
+
+<Preview>
+  <IconList
+    items={[
+      {
+        icon: 'call',
+        content: '0,10 €/min.',
+      },
+      {
+        icon: 'messages',
+        content: 'Nekonečné SMS/MMS',
+      },
+      {
+        icon: 'internet-usage',
+        content: '5 GB mesačne',
+      },
+    ]}
+  />
+</Preview>
+
+## With tooltip
+
+Tooltips in icon lists should be placed on the right. This way they do not overlap other items and improve scannability.
+
+<Preview>
+  <IconList
+    items={[
+      {
+        icon: 'internet-usage',
+        content: '2 GB mesačne',
+      },
+      {
+        icon: 'mobile-applications',
+        content: 'Nonstop dátový balík Čet',
+        tooltip:
+          'Dáta z týchto aplikácií sa neodpočítajú z vášho predplateného objemu dát: Messenger, WhatsApp, Viber, Telegram, Skype, Správy, Pokec, Samsung Messages.',
+      },
+    ]}
+  />
+</Preview>
+
+<ComponentDocs title="<IconList />" component={IconList} />

package/src/components/IconList/IconList.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import cx from 'classnames';
+
+import { Item } from './Item';
+
+interface IconListItem {
+  icon: string;
+  content: React.ReactNode;
+  tooltip?: React.ReactNode;
+}
+
+interface IconListProps {
+  items: IconListItem[];
+  className?: string;
+  [key: string]: any;
+}
+
+const CLASS_ROOT = 'icon-list';
+
+export const IconList: React.FC<IconListProps> = ({ items, className, ...other }) => (
+  <ul className={cx(CLASS_ROOT, className)} {...other}>
+    {items.map(({ content, ...other }, index) => (
+      <Item key={index.toString()} {...other}>
+        {content}
+      </Item>
+    ))}
+  </ul>
+);
+
+IconList.displayName = 'IconList';

package/src/components/IconList/Item.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import cx from 'classnames';
+
+import { Icon } from '../Icon';
+import { InfoTooltip } from '../Tooltip';
+import ConditionalWrapper from '../../utils/ConditionalWrapper';
+
+interface ItemProps {
+  icon: string;
+  children: React.ReactNode;
+  tooltip?: React.ReactNode;
+  [key: string]: any;
+}
+
+const CLASS_ROOT = 'icon-list';
+
+export const Item: React.FC<ItemProps> = ({ icon, children, tooltip, ...other }) => (
+  <li {...other}>
+    <Icon name={icon} size="medium" className={`${CLASS_ROOT}__icon`} />
+    <div className={cx(`${CLASS_ROOT}__content`, { 'text-nowrap': tooltip })}>
+      <ConditionalWrapper
+        condition={!!tooltip}
+        wrapper={
+          <span className={`${CLASS_ROOT}__content-text`}>{children}</span>
+        }
+      >
+        {children}
+      </ConditionalWrapper>
+      {tooltip && '\xa0'}
+      {tooltip && (
+        <InfoTooltip className="bold" placement="right">
+          {tooltip}
+        </InfoTooltip>
+      )}
+    </div>
+  </li>
+);
+
+Item.displayName = 'IconListItem';

package/src/components/IconList/index.ts

@@ -0,0 +1,4 @@
+import './styles/style.scss';
+
+export { IconList } from './IconList';
+export { Item } from './Item';

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

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

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

@@ -0,0 +1,33 @@
+@use '../../../styles/tokens/space';
+@use '../../../styles/tools/convert';
+@use "../../../styles/typography/mixins" as typoMixins;
+@use './config';
+
+@mixin base() {
+  @include typoMixins.list-unstyled;
+  @include typoMixins.text-readable;
+
+  margin: 0 0 space.get() 0;
+  padding: 0;
+  font-weight: bold;
+}
+
+@mixin item($spacing: config.$spacing) {
+  display: flex;
+  flex-flow: row;
+  margin-bottom: space.get('small');
+}
+
+@mixin icon($spacing: config.$spacing) {
+  flex: 0 0 auto;
+  margin-right: $spacing;
+}
+
+@mixin content() {
+  flex: 1 0 1px;
+  margin-top: convert.to-rem(2px);
+}
+
+@mixin content-text() {
+  white-space: normal;
+}

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

@@ -0,0 +1,21 @@
+@use './mixins';
+
+.icon-list {
+  @include mixins.base();
+
+  > li {
+    @include mixins.item();
+  }
+
+  &__icon {
+    @include mixins.icon();
+  }
+
+  &__content {
+    @include mixins.content();
+
+    &-text {
+      @include mixins.content-text();
+    }
+  }
+}

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

@@ -0,0 +1,55 @@
+import React from "react";
+import { render } from "@testing-library/react";
+import { axe } from "jest-axe";
+
+// Mock Tooltip komponent
+jest.mock("../../Tooltip", () => ({
+  InfoTooltip: ({ children, placement, ...props }) => (
+    <span className="tooltip" data-tooltip-placement={placement} {...props}>
+      <svg className="bold" />
+      {children}
+    </span>
+  ),
+}));
+
+import { IconList } from "../IconList";
+
+const example = (
+  <>
+    <div id="root">
+      <IconList
+        items={[
+          {
+            icon: "accessibility",
+            content: "Icon list example",
+          },
+          {
+            icon: "internet-usage",
+            content: "2 GB mesačne",
+          },
+          {
+            icon: "mobile-applications",
+            content: "Nonstop dátový balík Čet",
+            tooltip:
+              "Dáta z týchto aplikácií sa neodpočítajú z vášho predplateného objemu dát: Messenger, WhatsApp, Viber, Telegram, Skype, Správy, Pokec, Samsung Messages.",
+          },
+        ]}
+      />
+    </div>
+    <div id="root-tooltips" />
+  </>
+);
+
+it("is valid html", () => {
+  const { container } = render(example);
+  expect(container).toHTMLValidate({
+    rules: {
+      "no-inline-style": "off",
+    },
+  });
+});
+
+it("is accessible", async () => {
+  const { container } = render(example);
+  expect(await axe(container)).toHaveNoViolations();
+});