@orangesk/orange-design-system 2.0.0-beta.2 → 2.0.0-beta.20

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