@orangesk/orange-design-system 2.0.0-beta.8 → 2.0.0

package/src/components/Icon/Icon.mdx

@@ -1,172 +0,0 @@
-import { ComponentDocs, md } from '@lighting-beetle/lighter-styleguide';
-
-import { Preview } from '../../styleguide/';
-import Icon from './Icon';
-import Grid, { GridCol } from '../Grid';
-import Bar, { BarItem } from './../Bar';
-import Table from './../Table';
-import SpritePathContext from './SpritePathContext';
-import IconSearch, { IconList } from './IconSearch';
-
-import sizes from './styles/export/size.scss';
-import colors from './styles/export/color.scss';
-import base from '../../styles/export/base.scss';
-
-<!-- Used in code examples to only show icons, not layout -->
-
-export const iconCodeExample = icons =>
-  icons.map(({ name, ...other }) => <Icon key={name} name={name} {...other} />);
-
-<!-- Convert rem size back to pixels -->
-
-export const getPixelSize = size =>
-  size ? parseFloat(size) * parseInt(base['font-size']) + 'px' : '';
-
-<!-- Filter out size names without breakpoints -->
-
-export const sizesWithoutBreakpoints = Object.keys(sizes).filter(
-  name => name.indexOf('-') === -1
-);
-
-<!-- Preview wrapper with simplified code example -->
-
-export const IconVariantPreview = ({ icons, ...other }) => (
-  <Preview
-    code={iconCodeExample(icons)}
-    codeJSXOptions={{ filterProps: ['key'] }}
-    {...other}
-  >
-    <IconList icons={icons} isWide={false} />
-  </Preview>
-);
-
-# Icon
-
-ODS uses SVG icons, which load from a sprite file. [How to add new icons?](#icon-contribution).
-
-<Preview>
-  <Icon name="le-vote" alt="done and done" />
-</Preview>
-
-## Sizes
-
-<Table
-  isCompact
-  headers={[
-    { key: 'name', label: 'Name' },
-    { key: 'size', label: 'Size' },
-    { key: 'sizemd', label: 'Breakpoint MD+' },
-  ]}
-  rows={sizesWithoutBreakpoints.map(size => ({
-    name: size,
-    size: getPixelSize(sizes[size]),
-    sizemd: getPixelSize(sizes[`${size}-md`]),
-  }))}
-/>
-
-<IconVariantPreview
-  icons={sizesWithoutBreakpoints.map(size => ({
-    name: 'money-box',
-    description: size,
-    size: size,
-  }))}
-/>
-
-## Colors
-
-Colors should be only used to provide feedback, e.g. in form validation and alerts
-
-<IconVariantPreview
-  icons={Object.keys(colors).map(color => ({
-    name: 'money-box',
-    size: 'large',
-    description: color,
-    color,
-  }))}
-  id="preview-colors"
-/>
-
-## Sprite path
-
-Default path is `/sprite.svg`. You can define different path either by using spritePath prop or by context SpritePathContext. When both are set, path from spritePath is preffered.
-
-<Preview>
-  <Grid>
-    <GridCol size={3}>
-      <Bar>
-        <BarItem>
-          <Icon name="plus" alt="plus" spritePath="/sprite-sg.svg" />
-        </BarItem>
-        <BarItem>path from SpritePath</BarItem>
-      </Bar>
-    </GridCol>
-    <GridCol size={3}>
-      <Bar>
-        <BarItem>
-          <SpritePathContext.Provider value={'/sprite-sg.svg'}>
-            <Icon name="plus" alt="plus" />
-          </SpritePathContext.Provider>
-        </BarItem>
-        <BarItem>path from context</BarItem>
-      </Bar>
-    </GridCol>
-    <GridCol size={6}>
-      <Bar>
-        <BarItem>
-          <SpritePathContext.Provider value={'/sprite.svg'}>
-            <Icon name="plus" alt="plus" spritePath="/sprite-sg.svg" />
-          </SpritePathContext.Provider>
-        </BarItem>
-        <BarItem>path from SpritePath when context is also set</BarItem>
-      </Bar>
-    </GridCol>
-  </Grid>
-</Preview>
-
-## All icons
-
-You can copy svg by clicking on the icon and paste directly into Figma.
-
-<Preview>
-  <IconSearch />
-</Preview>
-
-## Props
-
-<ComponentDocs title="<Icon />" component={Icon} />
-
-## Icon contribution
-
-- **Download** your desired icons from the [Icon Library](https://design.orange.com/libraries/icons-library). You'll get a PSD and a PNG file for each icon. The PSD either contains:
-  - a vector path, which can be directly exported from Photoshop as SVG
-  - a smart object, which you can open in Illustrator and save it as SVG
-  - if you don't have Photoshop, use [Photopea](https://www.photopea.com/) to export the paths to SVG
-- **Rename** the icon file to be lowercase and dash delimited. The library does not employ a naming pattern - there are capitals, dashes, underscores spaces..., but we do! Never change the name of the icon to match the context you're using it in. We need to stay in sync with the file names in the library.
-- **Optimize** the SVGs. Use a tool like [Jake Archibald's SVGOMG](https://jakearchibald.github.io/svgomg/) and use the precision setting to get the smallest file size possible, while still maintaing proper display of the icon.
-- **Drop the files to `src/assets/icons` folder**. They will be built into `build/sprite.svg`.
-- **Open a pull request.** A reviewer will check if all requirements are met. The icons will be included in the next release.
-- **Use them in your project immediately.** You don't need to wait for the next release. When the pull request is closed, you are safe to create your own build with an updated sprite and use it.
-
-### Why such a complicated process?
-
-To make sure we stay in sync with the group icon library, honor a naming pattern and prevent errors.
-
-- We need to stay in sync with the brand icon library, as it is our source of truth. We neeed to check if the icon we want add is not already being used.
-- We need to optimize the icons, so that we can deliver them to the user as fast as possible. The photoshop export is represents the true interpretation of the icon paths. Otimization algorithms can safely remove around 50-80% of the code, just by rounding some numbers, removing unnecesasry attributes and recalculating the shapes. Smaller file size means faster loading time.
-- We need to review newly added icons to eliminate human errrors
-
-### Some of my icons don't work
-
-Just before this process was documented, there was a request for quick addition of several icons. Unfortunatelly, we introduced some duplicates and naming pattern violations. To fix your project, please rename the following icons:
-
-- Collective_class_training -> collective-class-training
-- Love_Logo -> love-logo
-- Social_network -> social-network
-- Team_connect -> team-connect
-- My_Orange -> my-orange
-- Family_Place -> family-place
-- showroom_mobile_pro -> showroom-mobile-pro
-- home-live -> homelive
-- medical-app-phone -> medial-app
-- mobile-data-toggle -> mobile-network-coverage
-- home-new -> home

package/src/components/IconList/IconList.mdx

@@ -1,53 +0,0 @@
-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/tests/IconList.unit.test.js

@@ -1,79 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-
-// Mock Tooltip komponent
-jest.mock('../../Tooltip', () => ({
-  InfoTooltip: ({ children, ...props }) => <div data-testid="info-tooltip" {...props}>{children}</div>,
-}));
-
-import { IconList } from '../IconList';
-
-const items = [
-  {
-    icon: 'test-icon',
-    content: <p>test-content</p>,
-    tooltip: <p>test-tooltip</p>,
-  },
-];
-
-describe('rendering IconList', () => {
-  describe('initial state', () => {
-    it('div has default class icon-list', () => {
-      const { getByTestId } = render(
-        <>
-          <div id="root">
-            <IconList data-testid="test-id" items={[]} />
-          </div>
-          <div id="root-tooltips" />
-        </>
-      );
-      expect(getByTestId('test-id')).toHaveClass('icon-list');
-    });
-  });
-
-  describe('passed props', () => {
-    let iconList;
-
-    beforeEach(() => {
-      iconList = render(
-        <>
-          <div id="root">
-            <IconList
-              data-testid="test-id"
-              items={items}
-              className="test-class"
-            />
-          </div>
-          <div id="root-tooltips" />
-        </>
-      );
-    });
-    it('has additional class when className is set', () => {
-      const { getByTestId } = iconList;
-      expect(getByTestId('test-id')).toHaveClass('icon-list');
-      expect(getByTestId('test-id')).toHaveClass('test-class');
-    });
-    it('renders items[index].content inside Item component', () => {
-      const { container } = render(
-        <>
-          <div id="root">
-            <IconList data-testid="test-id" items={items} />
-          </div>
-          <div id="root-tooltips" />
-        </>
-      );
-      const item = container.querySelector('li').querySelector('div');
-      expect(item).toHaveClass('icon-list__content');
-      expect(item.querySelector('p').textContent).toBe('test-content');
-    });
-    it('renders icon with /sprite.svg#test-icon xlinkhref when icon prop is set to test-icon', () => {
-      const { container } = iconList;
-      const use = container.querySelector('li').querySelector('use');
-      expect(use.getAttribute('xlink:href')).toEqual('/sprite.svg#test-icon');
-    });
-    it('renders items[index].tooltip', () => {
-      const { getByText } = iconList;
-      expect(getByText('test-tooltip')).toBeInTheDocument();
-    });
-  });
-});

package/src/components/Image/Image.mdx

@@ -1,175 +0,0 @@
-import { Code, Preview } from "../../styleguide/";
-import { ComponentDocs, Note, md } from "@lighting-beetle/lighter-styleguide";
-import Grid, { GridCol } from "../Grid/";
-import { Image } from "./index";
-import Icon from "../Icon/index";
-
-import handsImage from "../../assets/images/developers/hands-with-phones.svg";
-
-# Image
-
-Komponenta `<Image />` umožňuje vkladať obrázky s podporou responzivity, rôznych breakpointov, SVG, retina obrázkov a accessibility best practices.
-
----
-
-## Rýchly prehľad možností
-
-- **Jednoduchý obrázok:** `src` je string
-- **Responzívny obrázok:** `src` je objekt s kľúčmi pre breakpointy
-- **Retina obrázky:** `srcSet` v rámci hodnoty pre breakpoint
-- **SVG:** podporované
-- **Dodatočné props:** className, id, data-testid, atď.
-- **Accessibility:** povinný `alt` atribút
-- **Edge cases:** prázdny objekt, chýbajúci default, vlastné breakpointy
-
----
-
-## `<img/>` element
-
-Jednoduchý obrázok, ktorý sa hodí kdekoľvek.
-
-<Preview>
-  <Image src="https://placehold.co/320x320" alt="Gray square with dimensions" />
-</Preview>
-
-## `<picture />` element
-
-Rôzne obrázky pre rôzne veľkosti displeja.
-
-<Preview>
-  <Image
-    src={{
-      default: "https://placehold.co/150x150?text=150x150+on+XS",
-      xxxl: "https://placehold.co/450x450?text=450x450+on+XXXL",
-      xxl: "https://placehold.co/400x400?text=400x400+on+XXL",
-      xl: "https://placehold.co/350x350?text=350x350+on+XL",
-      lg: "https://placehold.co/300x300?text=300x300+on+LG",
-      md: "https://placehold.co/250x250?text=250x250+on+MD",
-      sm: "https://placehold.co/200x200?text=200x200+on+SM",
-    }}
-    alt="Gray square with dimensions"
-  />
-</Preview>
-
-### Príklad s vlastnými breakpointami
-
-<Preview>
-  <Image
-    src={{
-      default: "https://placehold.co/150x150?text=default",
-      custom: "https://placehold.co/200x200?text=custom",
-      another: "https://placehold.co/250x250?text=another",
-    }}
-    alt="Obrázok s vlastnými breakpointami"
-  />
-</Preview>
-
-### Príklad s dodatočnými props
-
-<Preview>
-  <Image
-    src="https://placehold.co/320x320"
-    alt="Obrázok s custom className a id"
-    className="custom-image-class"
-    id="unique-image-id"
-    data-testid="test-image"
-    loading="lazy"
-  />
-</Preview>
-
-### Edge cases
-
-- **Len default:**
-
-  <Preview>
-    <Image
-      src={{ default: "https://placehold.co/150x150?text=default-only" }}
-      alt="Len default"
-    />
-  </Preview>
-
-- **Chýbajúci default:**
-
-  <Preview>
-    <Image
-      src={{
-        xl: "https://placehold.co/350x350?text=xl",
-        lg: "https://placehold.co/300x300?text=lg",
-      }}
-      alt="Chýba default"
-    />
-  </Preview>
-
-- **Prázdny objekt:**
-
-  <Preview>
-    <Image src={{}} alt="Prázdny objekt" />
-  </Preview>
-
----
-
-### Breakpoint order
-
-While ODS uses mobile first breakpoints, they **MUST** be ordered **from
-largest to smallest** v tomto prípade, pretože sa používajú na renderovanie `<source />` elementov.
-
-`<source />` elements are evaluated first to last, which means larger rules need to be specified first.
-
-> If the source's media condition evaluates to false, the browser skips it and evaluates the next element inside picture
->
-> [The Picture element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture#The_media_attribute) on MDN
-
-```
-  default: '/path/to/default/image', // default image to load (fallback)
-  // order from largest to smallest
-  xxxl: '/path/to/xxxl/image',
-  xxl: '/path/to/xxl/image',
-  xl: '/path/to/xl/image',
-  lg: '/path/to/lg/image',
-  md: '/path/to/md/image',
-  sm: '/path/to/sm/image',
-  xs: '/path/to/xs/image',
-```
-
----
-
-### Retina images
-
-[The srcset attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture#The_srcset_attribute) akceptuje zoznam obrázkov pre rôzne hustoty pixelov.
-
-<Preview>
-  <Image
-    src={{
-      default: "https://placehold.co/300x300?text=1x-pixel-density",
-      xs: "https://placehold.co/300x300?text=1x-pixel-density, https://placehold.co/600x600?text=2x-pixel-density 2x",
-    }}
-    alt="Gray square with dimensions"
-    isRounded
-  />
-</Preview>
-
----
-
-## SVG
-
-Oba `<img />` aj `<picture />` podporujú SVG ako zdroj obrázka. Pre správne škálovanie v Internet Exploreri musí SVG obsahovať `viewBox` a `<img />` musí mať nastavený `width` alebo `height`.
-
-<Preview>
-  <Image src={handsImage} alt="Four hands with holding phones" />
-</Preview>
-
----
-
-## Props
-
-<ComponentDocs title="<Image />" component={Image} />
-
----
-
-## Accessibility
-
-- **Vždy používajte `alt` atribút** – popíšte význam obrázka, alebo nechajte prázdny pre dekoratívne obrázky.
-- **Nepoužívajte obrázky na prenášanie dôležitých informácií bez textovej alternatívy.**
-- Viac info: [How to write alternative texts](https://webaim.org/techniques/alttext/)
-
----