@orangesk/orange-design-system 2.0.0-beta.0 → 2.0.0-beta.10

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/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/)
-
----

package/src/components/Link/Link.mdx

@@ -1,224 +0,0 @@
-import { ComponentDocs } from '@lighting-beetle/lighter-styleguide';
-
-import { Preview } from '../../styleguide/';
-import Icon from '../Icon';
-
-import Link from './Link';
-
-# Link
-
-Links are basic navigation elements that provide interactive text-based navigation. They are always underlined and have consistent styling across the application. Standalone links are bold by default, but when used inline with other text, they inherit the font weight from their parent element.
-
-## Basic Usage
-
-<Preview>
-  <a href="/" className="">
-    Standalone link
-  </a>
-  <p>
-    Links in text{' '}
-    <a href="/" className="">
-      inherit font weight
-    </a>
-  </p>
-  <p>
-    Links in text that are{' '}
-    <a href="/" className="">
-      way too long and need to wrap at the end of the line so it will not break
-      the paragraph of text
-    </a>
-  </p>
-</Preview>
-
-## Link Class Behavior
-
-Default Link styling is automatically applied to all `<a>` elements except those with specific classes: `.btn`, `.list__control`, `.tab-list__tab`, `.stepbar__link`, `.osk-breadcrumbs__link`, `.skip-link`, `.dropdown__item`, `.carousel-promotions__slide`, and elements within `.osk-footer` or `.mm-header`. To force Link styling on these elements, use the `.link` class.
-
-<Preview>
-  <div className="mm-header">
-    <a href="/" className="">
-      Link in megamenu (no styling)
-    </a>
-    <br />
-    <Link href="/">Link with class .link in megamenu</Link>
-  </div>
-</Preview>
-
-## Color Variants
-
-### Default (Black)
-
-The standard link color that works on light backgrounds.
-
-<Preview>
-  <a href="/" className="">
-    Default Link
-  </a>
-</Preview>
-
-### Orange
-
-**Accessibility Warning**: Orange links on white background do not meet [Success Criterion 1.4.3: Contrast (Minimum)](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html) due to insufficient contrast between white and orange brand colors.
-
-<Preview>
-  <a className="link--orange" href="/">
-    Orange Link
-  </a>
-</Preview>
-
-### Inverse (White)
-
-For use on dark backgrounds.
-
-<Preview bgTheme="black">
-  <div className="bg-black">
-    <a href="/">Inverse link without class .link--is-inverse</a>
-  </div>
-  <a className="link--is-inverse" href="/">
-    Inverse Link
-  </a>
-  <div className="bg-black">
-    <a className="link--orange" href="/">
-      Orange Inverse link without class .link--is-inverse
-    </a>
-  </div>
-  <a className="link--is-inverse link--orange" href="/">
-    Orange Inverse Link
-  </a>
-</Preview>
-
-### Black
-
-Link stays black even during focus and hover. Should be used on orange backgrounds.
-
-<Preview>
-  <div className="bg-orange">
-    <a className="link--black" href="/">
-      Black Link
-    </a>
-  </div>
-</Preview>
-
-### Default Important
-
-When white background is used inside black background, links automatically use inverse styling and become white (invisible). Use `.link--default` class to force default black styling.
-
-<Preview bgTheme="black">
-  <div className="bg-black">
-    <div className="bg-white">
-      <div className="d-block">
-        <a href="/">I don't have class link--default {':('}</a>
-        <a className="color-black">{"<-- there's a link"}</a>
-      </div>
-      <a className="link--default" href="/">
-        I do have class link--default {':)'}
-      </a>
-    </div>
-  </div>
-</Preview>
-
-## Icon Integration
-
-### With Icons
-
-Links can include icons positioned to the left or right of the text.
-
-<Preview>
-  <a href="/">
-    <Icon name="chevron-left" className="link__icon-left" />
-    Back
-  </a>
-  <br />
-  <a href="/">
-    Next
-    <Icon name="chevron-right" className="link__icon-right" />
-  </a>
-  <br />
-  <br />
-  <a href="/">
-    <Icon name="chevron-left" size="large" className="link__icon-left" />
-    Back
-  </a>
-  <br />
-  <a href="/">
-    Next
-    <Icon name="chevron-right" size="large" className="link__icon-right" />
-  </a>
-</Preview>
-
-## Element Types
-
-### Render as Button
-
-When a Link doesn't navigate but controls the document (e.g., opens a modal), it can be rendered as a `button` element.
-
-<Preview>
-  <Link tag="button">Perform click action</Link>
-</Preview>
-
-## Use Cases
-
-### 1. Navigation Links
-- **Primary navigation**: Main menu items, breadcrumbs
-- **Secondary navigation**: Footer links, sidebar navigation
-- **Inline navigation**: Links within content text
-
-### 2. Action Links
-- **Modal triggers**: Opening dialogs, popups, or overlays
-- **Form submissions**: Submit buttons styled as links
-- **Toggle actions**: Show/hide content, expand/collapse sections
-
-### 3. External Links
-- **Social media**: Links to external platforms
-- **Documentation**: Links to help pages, guides
-- **Partner sites**: Affiliate or partner website links
-
-### 4. Download Links
-- **File downloads**: PDFs, documents, media files
-- **Software downloads**: Applications, tools, utilities
-
-### 5. Email Links
-- **Contact information**: Email addresses with mailto: protocol
-- **Support links**: Direct email to support teams
-
-### 6. Phone Links
-- **Contact numbers**: Phone numbers with tel: protocol
-- **Support hotlines**: Direct calling to support
-
-### 7. Back/Forward Navigation
-- **Breadcrumb navigation**: Previous page links
-- **Wizard steps**: Next/previous step navigation
-- **Pagination**: Page navigation controls
-
-### 8. Contextual Links
-- **Related content**: "See also" links
-- **Reference links**: Citations, sources, footnotes
-- **Cross-references**: Links to related sections
-
-### 9. Call-to-Action Links
-- **Primary CTAs**: "Get Started", "Learn More", "Sign Up"
-- **Secondary CTAs**: "Cancel", "Back", "Skip"
-
-### 10. Accessibility Links
-- **Skip links**: Jump to main content
-- **Accessibility help**: Screen reader support links
-
-## Accessibility
-
-### Color Contrast
-Orange links on white background do not meet [Success Criterion 1.4.3: Contrast (Minimum)](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html) due to insufficient contrast between white and orange brand colors.
-
-### Focus States
-All links have visible focus states with proper contrast and outline styling.
-
-### Screen Reader Support
-- Links are properly announced to screen readers
-- Icon-only links should include descriptive text
-- External links should indicate they open in new windows
-
-### Keyboard Navigation
-- All links are keyboard accessible
-- Focus order follows logical document flow
-- Focus indicators are clearly visible
-
-<ComponentDocs component={Link} />