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

package/src/components/Card/Card.mdx

@@ -1,334 +0,0 @@
-import { ComponentDocs } from "@lighting-beetle/lighter-styleguide";
-
-import { Preview } from "../../styleguide/";
-
-import Card, { CardHeader, CardSection } from "./";
-import { headerColors } from "../Card/CardHeader";
-import Divider from "../Divider";
-import Button from "../Button";
-import { Image } from "../Image";
-import Grid, { GridCol } from "../Grid";
-
-export const GrayPreview = (props) => <Preview bgTheme="gray" {...props} />;
-
-export const DefaultSection = ({
-  title = "Section",
-  content = "Content",
-  ...props
-}) => (
-  <CardSection {...props}>
-    <h3>{title}</h3>
-    <p>{content}</p>
-  </CardSection>
-);
-
-# Card
-
-A card serves as an entry point to more detailed information. Cards may contain
-rich content, such as photos, text, link, list, tables, you name it.
-
-## Example
-
-Card (without border) should be used **on non-white background** to stand out.
-
-<GrayPreview>
-  <Card>
-    <CardSection>
-      <h2>Card with one section</h2>
-      <p>Content can be whatever you choose it to be</p>
-    </CardSection>
-  </Card>
-</GrayPreview>
-
-## Bordered and shadowed
-
-If you need to use white card **on white background** you can eighter use card border or shadow.
-
-<Preview>
-  <Grid>
-    <GridCol size={{ md: 6 }}>
-      <Card hasBorder>
-        <CardSection>
-          <h2>Card with border</h2>
-          <p>Use bordered card on white background</p>
-        </CardSection>
-      </Card>
-    </GridCol>
-    <GridCol size={{ md: 6 }}>
-      <Card hasShadow>
-        <CardSection>
-          <h2>Card with shadow</h2>
-          <p>Use card with shadow on white background</p>
-        </CardSection>
-      </Card>
-    </GridCol>
-  </Grid>
-</Preview>
-
-## Background colors
-
-Colors can be changed on:
-
-- `.card__section` (preferred) level
-  - if you need just specific section to have a custom color
-- `.card` level
-  - if you need to change color of all sections, with no custom sections
-
-Default `.card` color is white.
-
-Every `.card__section` inherits from `.card`.
-
-To change default color use `.bg-[color]` class from
-[background color utilities](/utilities/color#background-color).
-
-<GrayPreview>
-  <Grid>
-    <GridCol size={{ md: "auto" }}>
-      <h2 className="h4">Black section</h2>
-      <Card>
-        <DefaultSection
-          color="black"
-          content="Just this section changed color"
-        />
-        {[1, 2].map((i) => (
-          <DefaultSection
-            key={i.toString()}
-            content="Color inherited from card"
-          />
-        ))}
-      </Card>
-    </GridCol>
-    <GridCol size={{ md: "auto" }}>
-      <h2 className="h4">Black card</h2>
-      <Card color="black">
-        {[1, 2, 3].map((i) => (
-          <DefaultSection
-            key={i.toString()}
-            content="Color inherited from card"
-          />
-        ))}
-      </Card>
-    </GridCol>
-  </Grid>
-</GrayPreview>
-
-## Height
-
-In `flex` environment, card sections can fill out remaining space with
-`.card__section--fill` class.
-
-<GrayPreview>
-  <Grid justifyHeight>
-    <GridCol size={{ md: 4 }}>
-      <Card>
-        <CardSection isFilling>
-          <h2>Filling good</h2>
-          <p>Adjusting by filling the space</p>
-        </CardSection>
-        <Divider />
-        <CardSection isFilling>
-          <h2>Filling good</h2>
-          <p>Adjusting by filling the space</p>
-        </CardSection>
-      </Card>
-    </GridCol>
-    <GridCol size={{ md: 4 }}>
-      <Card>
-        <CardSection isFilling>
-          <h2>I fill for you</h2>
-        </CardSection>
-        <Divider />
-        <CardSection>
-          <h2>I don't fill good</h2>
-          <p>Someone turned my fillings off</p>
-        </CardSection>
-      </Card>
-    </GridCol>
-    <GridCol size={{ md: 4 }}>
-      <Card>
-        <CardSection isFilling>
-          <h2>Tall helper card</h2>
-          <p>
-            This card is here just to stretch the vertical space and force the
-            other cards to fill their remaining space.
-          </p>
-          <p>
-            Ipsum consequat esse eu ullamco deserunt veniam exercitation
-            officia. In eu voluptate Lorem ut nisi veniam nulla Lorem ipsum.
-            Enim excepteur adipisicing esse id est. Deserunt adipisicing
-            excepteur sunt occaecat consectetur dolor deserunt excepteur ut enim
-            ullamco Lorem. Enim aliquip laboris sint consequat culpa tempor
-            exercitation. Laborum labore amet do ullamco excepteur anim tempor
-            pariatur pariatur.
-          </p>
-        </CardSection>
-      </Card>
-    </GridCol>
-  </Grid>
-</GrayPreview>
-
-## Header
-
-Header is used to display extra info for the card.
-
-<p>
-  You can choose a black, orange, or gray-400 color for background, default is{" "}
-  {headerColors[0]}.
-</p>
-
-If you need empty header use non breaking space instead of empty string (`\xa0` or `&nbsp;`), but this in not required and you can have thinner header if you keep it empty.
-
-By default, longer texts in the header are truncated. If you want the header text to be wrapped, use the `.card__header--wrap` class.
-
-<GrayPreview>
-  <Card className="bold">
-    <div className="card__header"></div>
-    <DefaultSection />
-  </Card>
-  {headerColors.map((color) => (
-    <Card key={color} className="bold">
-      <CardHeader
-        title={color === "black" ? "" : "Header title"}
-        color={color}
-      />
-      <DefaultSection />
-    </Card>
-  ))}
-  <Card className="bold">
-    <div className="card__header card__header--wrap">
-      Indonesia (+ Sumatra, Java, Borneo, Bali, Sulawesi) (+62)
-    </div>
-    <DefaultSection />
-  </Card>
-</GrayPreview>
-
-## Divider
-
-If you need to divide the card with a visible element, use the [Divider](/components/divider) component
-in between sections. You can use option with icon or without icon.
-
-<GrayPreview>
-  <Card {...props}>
-    <CardSection>
-      <h2>Dividers</h2>
-    </CardSection>
-    <Divider />
-    <DefaultSection />
-    <Divider icon="add" />
-    <DefaultSection />
-  </Card>
-</GrayPreview>
-
-## Image
-
-You can use images in cards. You can use it inside sections or outside to fill
-the width of the card.
-
-export const PlaceholderImage = ({ title, ...props }) => (
-  <Image
-    src={`https://placehold.co/600x330/000000/FFFFFF?text=${title}`}
-    alt=""
-    {...props}
-  />
-);
-
-<GrayPreview>
-  <Grid>
-    <GridCol size={{ md: 6 }}>
-      <Card>
-        <CardSection>
-          <PlaceholderImage title="Image inside of a section" />
-          <h3>Section</h3>
-          <p>Content</p>
-        </CardSection>
-      </Card>
-    </GridCol>
-    <GridCol size={{ md: 6 }}>
-      <Card>
-        <CardSection>
-          <h3>Section</h3>
-          <p>Content</p>
-          <PlaceholderImage title="Image inside of a section" />
-        </CardSection>
-      </Card>
-    </GridCol>
-    <GridCol size={{ md: 6 }}>
-      <Card>
-        <PlaceholderImage
-          className="mb-none"
-          title="Image outside of a section"
-        />
-        <DefaultSection />
-      </Card>
-    </GridCol>
-    <GridCol size={{ md: 6 }}>
-      <Card>
-        <DefaultSection />
-        <PlaceholderImage
-          className="mb-none"
-          title="Image outside of a section"
-        />
-      </Card>
-    </GridCol>
-  </Grid>
-</GrayPreview>
-
-## Real-world example
-
-export const products = [
-  {
-    title: "Internet",
-    description:
-      "Od najrýchlejšej optiky po bezdrôtové 4G, nájdeme vám najlepšie pripojenie, aké môžete mať.",
-    badge: "Najpredávanejší",
-    price: 10,
-  },
-  {
-    title: "Televízia",
-    description:
-      "Správy, šport, večerná zábava, detské alebo dokumentárne kanálov... Máme pre vás všetko. Archív, nahrávanie a špičkový obraz sú s Orange TV samozrejmosťou.",
-    price: 10,
-  },
-];
-
-<GrayPreview>
-  <Grid justifyHeight>
-    {products.map((product, index, array) => (
-      <GridCol key={product.title} size={{ md: Math.round(12 / array.length) }}>
-        <Card>
-          <CardHeader title={product.badge} />
-          <CardSection isFilling>
-            <h2>{product.title}</h2>
-            <p className="bold large">{product.description}</p>
-          </CardSection>
-          <CardSection>
-            <div className="bold mb-small">
-              <div className="h1 mb-small color-orange">
-                od {product.price} €/mes.
-              </div>
-              <div className="small">Viazanosť 24 mesiacov</div>
-              <div>+ 19,90 € poplatok za inštaláciu</div>
-            </div>
-            <a href="#" className="btn btn--primary">
-              Vybrať
-            </a>
-          </CardSection>
-        </Card>
-      </GridCol>
-    ))}
-  </Grid>
-</GrayPreview>
-
-## Props
-
-<ComponentDocs title="<Card />" component={Card} />
-
-<ComponentDocs title="<CardSection />" component={CardSection} />
-
-<ComponentDocs title="<CardHeader />" component={CardHeader} />
-
-## Accessibility
-
-The `<Card />` component is purely presentational and does not carry any
-semantic meaning. The only thing you should care about is the usage of correct
-heading level in `<CardSection />`

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