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

package/src/components/Carousel/Carousel.mdx

@@ -1,159 +0,0 @@
-import cx from "classnames";
-import { ComponentDocs, DocsTable } from "@lighting-beetle/lighter-styleguide";
-
-import { Preview } from "../../styleguide/";
-import breakpoint from "../../styles/export/breakpoint.scss";
-import Image from "../Image/";
-import Container from "../Container";
-
-import Carousel from "./";
-
-import { defaultConfig } from "./Carousel.static.js";
-
-export const SlideExample = ({ num, ...props }) => (
-  <React.Fragment {...props}>
-    <Image
-      className="mb-small"
-      src="https://placehold.co/800x300?text=Placeholder"
-      alt="image with desc example"
-    />
-    <h3 className="mb-none">Slide {num + 1}</h3>
-    <p>lorem ipsum dolor</p>
-  </React.Fragment>
-);
-
-export const imageItems = Array(13)
-  .fill()
-  .map((_, index) => <SlideExample key={index.toString()} num={index} />);
-
-# Carousel
-
-Slideshow for cycling through image, text or combined elements.
-
-## 🧭 Navigation
-
-Carousel uses directional buttons to enable slide by slide progression and pagination dots for quickly jumping to desired slide. Directional buttons and pagination dots are visible for `md` and larger viewports.
-
-On smaller viewports, the navigation elements are hidden and element is controlled using native horizontal scrolling.
-
-Directional buttons of a fullwidth carousel can overflow page content if there is enough space. [See example](#breakout-directional-buttons).
-
-## ↔️ Slide width
-
-Carousel shows 1.2 slides by default. This behavior is necessary for basic usability on small viewports, where directional buttons and pagination dots [are hidden](#navigation).
-
-Although this behavior [can be overriden](#custom-options) per breakpoint, it should be preserved for small viewports in order to provide a visual cue that there is content available to the sides.
-
-## 🚫💪 Hero content not allowed
-
-Do not use Carousel for cycling hero banners or any other fullwidth banners. User research has clearly shown that a single (personalised) banner performs better than multiple different banners.
-
-<Preview>
-  <Carousel id="carousel-default" items={imageItems} />
-</Preview>
-
-## Dark background
-
-<Preview bgTheme="black">
-  <Carousel isInverse id="carousel-dark" items={imageItems} />
-</Preview>
-
-## Breakout directional buttons
-
-When a Carousel is a direct descendant of a [Container](/styleguide/components/container), directional buttons can break outside the content column in order to align the slides with other fullwidth elements.
-
-Such situation can occur on `md`, `lg`, `xl` and `xxl` breakpoints, when the viewport is large enough to accomodate directional buttons outside the container.
-
-Please note that preview size does not represent viewport size and directional buttons will overflow the preview area. TODO: use test case iframe to show real behaviour in preview.
-
-<Preview>
-  <Container>
-    <p>Example container content</p>
-    <Carousel id="carousel-default" items={imageItems} />
-    <p>Example container content</p>
-  </Container>
-</Preview>
-
-## Custom options
-
-Carousel [default configuration](#default-config) can be overriden before initialization using `data-swiper-options` attribute. The attribute accepts a JSON string representing a [Swiper.js options object](https://swiperjs.com/swiper-api#parameters)
-
-<Preview>
-  <Carousel
-    id="carousel-custom-options"
-    items={imageItems}
-    swiperOptions={{
-      slidesPerView: 2.2,
-      breakpoints: {
-        [parseInt(breakpoint.md)]: {
-          slidesPerView: 3,
-        },
-      },
-    }}
-  />
-</Preview>
-
-## JS module reference
-
-All elements with `data-carousel` are initialized on `window.DOMContentLoaded` event.
-
-### Custom initialization example:
-
-```js
-const myCarousel = new window.ODS.modules.Carousel(element, config);
-```
-
-### Default config
-
-export const descriptions = {
-  arrows: "Arrows selectors for navigation",
-  dots: "Dots selector",
-  skipTrack: "Skip additional wrapper for slides (track wrapper)",
-};
-
-<DocsTable
-  data={Object.keys(defaultConfig).map((key) => ({
-    prop: key,
-    type: typeof defaultConfig[key],
-    default: JSON.stringify(defaultConfig[key]),
-    description: descriptions[key],
-  }))}
-/>
-
-### Swiper.js methods
-
-Swiper.js has it's own methods which are well documented at [Swiper.js docs](https://swiperjs.com/swiper-api#methods--properties)
-
-Carousel component has it's own two important methods to destroy and update instance.
-
-```js
-const instance = document.querySelector(el).ODS_Carousel;
-/*
-  instance.method();
-*/
-```
-
-<DocsTable
-  data={[
-    {
-      prop: "destroy",
-      type: "func",
-      default: `() => {
-  this.instance.destroy(); // Swiper.js method
-}`,
-      description: "Destroy the instance - removes all listeners",
-    },
-    {
-      prop: "update",
-      type: "func",
-      default: `() => {
-  this.instance.update(); // Swiper.js method
-}`,
-      description: "Updates an instance.",
-    },
-  ]}
-/>
-
-## Props
-
-<ComponentDocs title="<Carousel />" component={Carousel} />

package/src/components/CarouselPromotions/CarouselPromotions.mdx

@@ -1,246 +0,0 @@
-import cx from 'classnames';
-import { ComponentDocs, DocsTable } from '@lighting-beetle/lighter-styleguide';
-
-import { Preview } from '../../styleguide/';
-import breakpoint from '../../styles/export/breakpoint.scss';
-import Image from '../Image/';
-import Container from '../Container';
-
-import CarouselPromotions from './';
-import CarouselPromotionsItem from './CarouselPromotionsItem';
-
-import phones from '../../assets/images/developers/phones.png';
-
-import { defaultConfig } from './CarouselPromotions.static.js';
-import Icon from '../Icon';
-
-export const SlideExample = ({ ...props }) => (
-  <CarouselPromotionsItem
-    {...props}
-    image={<Image src={phones} alt="Two phones" />}
-    title="Online ochrana pre váš digitálny svet"
-    subtitle="Orange je tu, aby ste mohli používať internet bezpečne a bez obáv."
-  />
-);
-
-export const SlideExamplePictureTag = ({ num, ...props }) => (
-  <CarouselPromotionsItem
-    {...props}
-    image={
-      <Image
-        src={{
-          default: phones,
-          lg: phones,
-        }}
-        alt="Two phones"
-      />
-    }
-    title="Online ochrana pre váš digitálny svet"
-    subtitle="Orange je tu, aby ste mohli používať internet bezpečne a bez obáv."
-  />
-);
-
-export const imageItems = Array(4)
-  .fill()
-  .map((_, index) => (
-    <SlideExample
-      key={index.toString()}
-      num={index}
-      color={index === 0 && 'black'}
-    />
-  ));
-
-export const imageDarkItems = Array(4)
-  .fill()
-  .map((_, index) => (
-    <SlideExample key={index.toString()} color={index === 0 && 'black'} />
-  ));
-
-export const imageItemsWithHref = Array(4)
-  .fill()
-  .map((_, index) => (
-    <SlideExample
-      key={index.toString()}
-      num={index}
-      href={'#carousel-for-promotions'}
-      color={index === 0 && 'black'}
-    />
-  ));
-
-export const imageItemsWithPicture = Array(4)
-  .fill()
-  .map((_, index) => (
-    <SlideExamplePictureTag
-      key={index.toString()}
-      color={index === 0 && 'black'}
-    />
-  ));
-
-# Carousel for promotions
-
-## Light background
-
-<Preview>
-  <CarouselPromotions id="carousel-light">{imageItems}</CarouselPromotions>
-</Preview>
-
-## Dark background
-
-<Preview>
-  <CarouselPromotions isInverse id="carousel-dark">
-    {imageDarkItems}
-  </CarouselPromotions>
-</Preview>
-
-## With links
-
-You can specify a hyperlink for each slide by using the anchor tag with the `carousel-promotions__slide` class.
-
-<Preview>
-  <CarouselPromotions id="carousel-href">
-    {imageItemsWithHref}
-  </CarouselPromotions>
-</Preview>
-
-## Autoplay
-
-You can specify autoplay interval by setting the `data-interval` attribute to a value in milliseconds. The minimum value is 1000ms. If no value is provided, or the provided value is 0, null or undefined, the autoplay is disabled.
-
-Due to the nature of Glider.js and requirements for animations, each dot has an SVG automatically rendered in it's innerHTML. This happens only if the autoplay is enabled.
-When window size changes, Glider.js re-renders the whole pagination and the SVGs are re-rendered as well. This causes the countdown timer to reset.
-
-<Preview>
-  <CarouselPromotions id="carousel-autoplay" data-interval={5000}>
-    {imageItems}
-  </CarouselPromotions>
-  <br />
-  <br />
-  <CarouselPromotions isInverse id="carousel-autoplay" data-interval={5000}>
-    {imageItems}
-  </CarouselPromotions>
-</Preview>
-
-## With picture tag
-
-The carousel accepts a picture tag as a source for the image. For more information please refer to [Image component documentation](/components/image#picture-element).
-
-<Preview>
-  <CarouselPromotions id="carousel-picture-tag">
-    {imageItemsWithPicture}
-  </CarouselPromotions>
-</Preview>
-
-## Custom options
-
-Carousel [default configuration](#default-config) can be overriden before initialization using `data-glider-options` attribute. The attribute accepts a JSON string representing a [Glider.js options object](https://nickpiscitelli.github.io/Glider.js/#settings),
-with an additional property `interval` which represents the scroll interval in milliseconds.
-
-<Preview>
-  <CarouselPromotions
-    id="carousel-custom-options"
-    gliderOptions={{
-      slidesToShow: 1,
-      responsive: [
-        {
-          breakpoint: parseInt(breakpoint.md),
-          settings: {
-            slidesToShow: 1.1,
-            slidesToScroll: 1,
-          },
-        },
-      ],
-    }}
-  >
-    {imageItems}
-  </CarouselPromotions>
-</Preview>
-
-## JS module reference
-
-All elements with `data-carousel-promotions` are initialized on `window.DOMContentLoaded` event.
-
-### Custom initialization example:
-
-```js
-const myCarousel = new window.ODS.modules.CarouselPromotions(element, config);
-```
-
-With autoplay:
-
-```js
-const myCarousel = new window.ODS.modules.CarouselPromotions(element, {
-  ...config,
-  interval: 5000,
-});
-```
-
-### Default config
-
-export const descriptions = {
-  arrows: 'Arrows selectors for navigation',
-  dots: 'Dots selector',
-  rewind:
-    'Allows to rewind the slider to the first slide, when the last slide is reached',
-  slidesToShow: 'Number of slides to show',
-  skipTrack: 'Skip additional wrapper for slides (track wrapper)',
-  interval:
-    'Interval for automatic slide change in milliseconds. When set to 0, null or undefined - automatic slide change is disabled. Minimum value is 1000ms.',
-};
-
-<DocsTable
-  data={Object.keys(defaultConfig).map(key => ({
-    prop: key,
-    type: typeof defaultConfig[key],
-    default: JSON.stringify(defaultConfig[key]),
-    description: descriptions[key],
-  }))}
-/>
-
-### Glider.js methods
-
-Glider.js has it's own methods which are well documented at [Glider.js docs](https://nickpiscitelli.github.io/Glider.js/)
-
-Carousel component has it's own two important methods to destroy and update instance.
-
-```js
-const instance = document.querySelector(el).ODS_CarouselPromotions;
-/*
-  instance.method();
-*/
-```
-
-<DocsTable
-  data={[
-    {
-      prop: 'destroy',
-      type: 'func',
-      default: `() => {
-  this.instance.destroy(); // Glider.js method
-}`,
-      description: 'Destroy the instance - removes all listeners',
-    },
-    {
-      prop: 'update',
-      type: 'func',
-      default: `() => {
-  this.instance.refresh(); // Glider.js method
-}`,
-      description: 'Updates an instance.',
-    },
-  ]}
-/>
-
-## Props
-
-<ComponentDocs title="<CarouselPromotions />" component={CarouselPromotions} />
-
-## Notes
-
-Because of lack of time, we did not implement recommended a11y corrections:
-
-- carousel dots should have [minimum 24px clickable area](https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html) (currently 8px)
-- autoplay is not good UX and a11y pattern according to [this](https://shouldiuseacarousel.com/)
-
-### Missing
-
-- Screenshot tests

package/src/components/CartTable/CartTable.mdx

@@ -1,129 +0,0 @@
-import { ComponentDocs } from '@lighting-beetle/lighter-styleguide';
-import { Preview } from '../../styleguide/';
-
-import CartTable from './';
-import data, {
-  discountVisible,
-  internetItems,
-  optionalItem,
-  deviceItem,
-  generateTotal,
-  largeItems,
-  router,
-} from './data';
-
-# CartTable
-
-## Example
-
-<Preview>
-  <CartTable items={data} />
-</Preview>
-
-## Usage
-
-### Editable
-
-Items in editable cart table are removable.
-
-<Preview>
-  <CartTable items={data} isEditable />
-</Preview>
-
-### Mandatory (non-removeable) items
-
-Some items should not have remove button because they are mandatory to complete the checkout.
-
-<Preview>
-  <CartTable items={internetItems} isEditable />
-</Preview>
-
-### Optional items
-
-Upsell good deals the customer gets with together with an existing cart item.
-
-<Preview>
-  <CartTable items={[...internetItems, optionalItem]} isEditable />
-</Preview>
-
-### Footer
-
-Label with/without tooltip can be added to single row footer.
-In case of footer with multiple rows with discounts, first row with upfront paynment can be hidden.
-
-<Preview>
-  <CartTable
-    items={data}
-    footer={{ name: 'Spolu', tooltip: 'Celková suma ktorú zaplatíte.' }}
-  />
-</Preview>
-
-### Monthly generated total
-
-Total is calculated automatically as sum of all items. In some cases, you might
-need to break down total prices into multiple rows by months. If you define
-`monthsFree` or `discount.monthsCount` in your data, cart table will use these
-to generate multiple rows with proper discounts calculated for different periods.
-
-<Preview>
-  <CartTable items={generateTotal} />
-</Preview>
-
-### Primary Discount
-
-When `price` is not defined and discount is, it takes place of price. Additionaly if `discount.monthsCount` is defined,
-description with duration of discount is displayed. And at last, when `price` and `discount` have the same value, free Label
-is shown.
-
-<Preview>
-  <CartTable items={discountVisible} />
-</Preview>
-
-### Hide first footer row
-
-If it's required we can hide first row of multiline footer.
-
-<Preview>
-  <CartTable items={discountVisible} footer={{ hideFirst: true }} />
-</Preview>
-
-### Simple pricing
-
-When the products sold do not require combined (upfront + monthly) payments, only relevant columns should be displayed.
-
-<Preview>
-  <CartTable
-    items={internetItems.map(({ price, ...other }) => ({
-      price: {
-        monthly: price.monthly,
-      },
-      ...other,
-    }))}
-  />
-</Preview>
-
-This default behaviour can be modified by removing of `.hide` class from hidden column.
-
-<Preview>
-  <CartTable
-    items={internetItems.map(({ price, ...other }) => ({
-      price: {
-        monthly: price.monthly,
-      },
-      ...other,
-    }))}
-    hideEmpty={false}
-  />
-</Preview>
-
-### Size
-
-Large cart table was designed for simple flat structure (no subitems), without icons/images, no edit buttons or optional items.
-
-<Preview>
-  <CartTable items={largeItems} size="large" />
-</Preview>
-
-## Props
-
-<ComponentDocs title="<CartTable />" component={CartTable} />

package/src/components/Container/Container.mdx

@@ -1,73 +0,0 @@
-import { ComponentDocs, Code } from '@lighting-beetle/lighter-styleguide';
-
-import { Preview } from '../../styleguide/';
-import Container from './';
-
-# Container
-
-Container is a base layout component that keeps page content offset from viewport edges and applies max width on larger viewports.
-
-## Basic Usage
-
-<Preview>
-  <Container>
-    <p>I'm in a container. I will never touch the edges of the viewport.</p>
-  </Container>
-</Preview>
-
-## Responsive Behavior
-
-Container automatically adapts to different screen sizes:
-
-- **XS/SM**: Fluid width (100% - padding)
-- **MD (768px+)**: Maximum width 744px
-- **LG (992px+)**: Maximum width 960px  
-- **XL (1240px+)**: Maximum width 1200px
-- **XXL (1380px+)**: Maximum width 1320px
-
-<Preview>
-  <div style={{ border: '1px solid #ccc', padding: '1rem', marginBottom: '1rem' }}>
-    <h4>XS/SM screen (fluid)</h4>
-    <Container style={{ backgroundColor: '#f0f0f0', padding: '1rem' }}>
-      <p>Fluid width - adapts to screen width</p>
-    </Container>
-  </div>
-  
-  <div style={{ border: '1px solid #ccc', padding: '1rem', marginBottom: '1rem' }}>
-    <h4>MD+ screen (max-width)</h4>
-    <Container style={{ backgroundColor: '#e0f0ff', padding: '1rem' }}>
-      <p>Maximum width with centering</p>
-    </Container>
-  </div>
-</Preview>
-
-## With Content
-
-Container can contain any content - text, images, forms, or other components:
-
-<Preview>
-  <Container>
-    <h2>Page Title</h2>
-    <p>This is the main page content. Container ensures that content is properly aligned and won't touch the screen edges.</p>
-    
-    <div style={{ backgroundColor: '#f5f5f5', padding: '1rem', borderRadius: '4px' }}>
-      <h3>Subsection</h3>
-      <p>Even nested elements are properly aligned within the container.</p>
-    </div>
-  </Container>
-</Preview>
-
-## With Custom Classes
-
-Container supports adding custom CSS classes via the `className` prop:
-
-<Preview>
-  <Container className="bg-orange color-white" style={{ padding: '2rem' }}>
-    <h3>Container with custom styles</h3>
-    <p>This container has custom CSS classes applied for background and text color.</p>
-  </Container>
-</Preview>
-
-## Props
-
-<ComponentDocs title="<Container />" component={Container} />