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

package/src/components/Grid/Grid.mdx

@@ -1,320 +0,0 @@
-import { ComponentDocs, Note, md } from "@lighting-beetle/lighter-styleguide";
-import { Preview } from "../../styleguide/";
-import { Grid, GridCol } from "./index";
-import Table from "../Table";
-import Section from "../Section";
-import { Image } from "../Image";
-import { breakpointsTableData } from "../../docs/breakpoints.mdx";
-import {
-  ContainerHorizontal,
-  ContainerVertical,
-  ColumnVertical,
-} from "../../docs/utils.flexalignment.mdx";
-import spaces from "../../styles/export/space.scss";
-
-# Grid
-
-The main function of the grid is to distribute items to rows and columns.
-
-Our grid has a maximum of 12 columns. Each column can have a [custom size](#columns)
-defined by [breakpoints](#breakpoints).
-
-## Breakpoints
-
-Grid uses the mobile-first definition of [breakpoints](/fundamentals/breakpoints), which means that smallest
-breakpoint defines default size.
-
-## Columns
-
-You can have a maximum of 12 columns in one row. A default column takes all the available
-space.
-
-<Preview className="preview-grid">
-  <Grid>
-    <GridCol>
-      <code>(default) 12</code>
-    </GridCol>
-    <GridCol size={6}>
-      <code>6</code>
-    </GridCol>
-  </Grid>
-  <hr />
-  <Grid>
-    <GridCol size="auto">
-      <code>auto</code>
-    </GridCol>
-    <GridCol size={4}>
-      <code>4</code>
-    </GridCol>
-    <GridCol size={6}>
-      <code>6</code>
-    </GridCol>
-  </Grid>
-  <hr />
-  <Grid>
-    <GridCol size="fill">
-      <code>fill</code>
-    </GridCol>
-    <GridCol size={4}>
-      <code>4</code>
-    </GridCol>
-    <GridCol size={6}>
-      <code>6</code>
-    </GridCol>
-  </Grid>
-  <hr />
-  <Grid>
-    <GridCol size="shrink">
-      <code>shrink</code>
-    </GridCol>
-    <GridCol size={6}>
-      <code>6</code>
-    </GridCol>
-  </Grid>
-</Preview>
-
-### Resizing
-
-There are two ways of resizing a column.
-
-1. `.grid__col--[size]` where `size` is a number 1-12 or one of `[shrink/fill/auto]`
-2. `.grid__col--[breakpoint]-[size]` where `breakpoint` is used as a **minimum display width** to change the column size
-
-<Note title="XS breakpoint size">
-  <p className="mb-none">
-    There is <strong>no need to specify the xs breakpoint size</strong> because
-    it's a default by definition of mobile-first philosophy.
-  </p>
-</Note>
-
-### What is shrink/fill/auto?
-
-- `shrink` column takes **the least amount of space** available
-- `fill` column takes **all the space** available and **does not shrink** to accomodate other columns
-- `auto` takes **all available space**, also tries to **shrink** to fit into one row. This is the **same as** `.grid__col`.
-
-<Preview className="preview-grid">
-  <Grid>
-    <GridCol>
-      <code>(default) 12</code>
-    </GridCol>
-    <GridCol size={4}>
-      <code>4</code>
-    </GridCol>
-    <GridCol size="shrink">
-      <code>shrink</code>
-    </GridCol>
-    <GridCol size="fill">
-      <code>fill</code>
-    </GridCol>
-    <GridCol size="auto">
-      <code>auto</code>
-      Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cum
-      sociis natoque penatibus et magnis dis parturient montes, nascetur
-      ridiculus mus.
-    </GridCol>
-  </Grid>
-</Preview>
-
-### Available combinations
-
-You can use combinations of different size types for one column at once.
-Available types are `[1-12/shrink/fill/auto]` for every breakpoint.
-
-<Preview className="preview-grid">
-  <Grid>
-    <GridCol size={{ sm: 9, md: 6, lg: "fill" }}>
-      <code>(default) 12, sm-9, md-6, lg-fill</code>
-    </GridCol>
-    <GridCol size={{ sm: 3, md: 6, lg: "fill" }}>
-      <code>(default) 12, sm-3, md-6, lg-fill</code>
-    </GridCol>
-  </Grid>
-</Preview>
-
-## How to create a grid
-
-### Using React Components (Recommended)
-
-```tsx
-import { Grid, GridCol } from './components/Grid';
-
-// Basic grid
-<Grid>
-  <GridCol>
-    <code>(default) 12</code>
-  </GridCol>
-  <GridCol size={6}>
-    <code>6</code>
-  </GridCol>
-</Grid>
-
-// Responsive grid
-<Grid>
-  <GridCol size={{ sm: 9, md: 6, lg: 'fill' }}>
-    <code>Responsive column</code>
-  </GridCol>
-  <GridCol size={{ sm: 3, md: 6, lg: 'fill' }}>
-    <code>Another responsive column</code>
-  </GridCol>
-</Grid>
-```
-
-### Using HTML and CSS Classes
-
-1. Start by creating a wrapper with a class of `.grid`
-2. Add child elements with a class beginning with `.grid__col`
-3. If you need, specify size of each with `.grid__col--[size]` or `.grid__col--[breakpoint]-[size]`
-
-```html
-<!-- grid base -->
-<div class="grid">
-  <!-- default grid column (.grid__col--xs-12 by default) -->
-  <div class="grid__col">content</div>
-  <!-- grid column with specific sizes -->
-  <div class="grid__col grid__col--auto grid__col--md-6 grid__col--lg-4">
-    content
-  </div>
-</div>
-```
-
-## Justify content height
-
-Grid with justified content height uses flexbox with an attempt to equalize height of column children
-
-<Preview>
-  <Grid justifyHeight>
-    <GridCol size={6} className="mb-small">
-      <div className="bg-gray">
-        <p>Children of these columns are the same height</p>
-      </div>
-    </GridCol>
-    <GridCol size={6} className="mb-small">
-      <div className="bg-gray">
-        <p>The most high column dictates the height of the row</p>
-        <Image src="https://placehold.co/150x150" alt="" />
-      </div>
-    </GridCol>
-    <GridCol className="mb-small">
-      <div className="bg-gray">
-        <p>Subsequent rows remain unaffected</p>
-      </div>
-    </GridCol>
-  </Grid>
-</Preview>
-
-## Container alignment
-
-### Horizontal
-
-<ContainerHorizontal />
-
-### Vertical
-
-<ContainerVertical />
-
-## Children alignment
-
-### Vertical
-
-<ColumnVertical />
-
-## Column gap size
-
-Add larger space between grid columns or remove them completely
-
-<Preview>
-  {["default", "none"].map((size, index) => (
-    <>
-      <h3>Column gap size {JSON.stringify(size)}</h3>
-      <Grid
-        key={index.toString()}
-        columnGapSize={size === "default" ? null : size}
-        className="mb-large"
-      >
-        {[1, 2, 3].map((key) => (
-          <GridCol key={key.toString()} size={{ md: 4 }}>
-            <code> </code>
-          </GridCol>
-        ))}
-      </Grid>
-    </>
-  ))}
-</Preview>
-
-## Row gap size
-
-Row gap helps to maintain space between grid rows and fixes
-[unwanted spacing problems](/components/section#2-stacking-elements) on the bottom of grid's last row elements by removing their content margins.
-
-There are two ways of adding a row gap.
-
-1. `.grid-row-gap--[size]` where `size` is one of `[medium/xlarge]`
-2. `.grid-row-gap--[breakpoint]-[size]` where `breakpoint` is used as a
-   **minimum display width** to change the gap size
-
-<Preview>
-  {["medium", "large", { xs: "large", md: "xlarge" }].map(
-    (size, index, array) => (
-      <Section key={index.toString()} className="pb-none">
-        <h3 className="mb-2">Row gap size {JSON.stringify(size)}</h3>
-        <Grid key={index.toString()} rowGapSize={size}>
-          {[1, 2, 3, 4, 5, 6].map((key) => (
-            <GridCol key={key.toString()} size={{ md: 6 }}>
-              <code>6</code>
-            </GridCol>
-          ))}
-        </Grid>
-      </Section>
-    ),
-  )}
-</Preview>
-
-## Advanced Examples
-
-### Complex Layout with Alignment
-
-<Preview>
-  <Grid hAlign="center" vAlign="stretch">
-    <GridCol size={3} align="top">
-      <code>top aligned</code>
-    </GridCol>
-    <GridCol size="auto" align="middle">
-      <code>auto middle</code>
-    </GridCol>
-    <GridCol size="fill" align="bottom">
-      <code>fill bottom</code>
-    </GridCol>
-    <GridCol size={2} align="stretch">
-      <code>stretch</code>
-    </GridCol>
-  </Grid>
-</Preview>
-
-### Semantic HTML Tags
-
-<Preview>
-  <Grid tag="section" justifyHeight>
-    <GridCol tag="article" size={8}>
-      <code>main content</code>
-    </GridCol>
-    <GridCol tag="aside" size={4}>
-      <code>sidebar</code>
-    </GridCol>
-  </Grid>
-</Preview>
-
-### All Column Sizes (1-12)
-
-<Preview>
-  <Grid>
-    {Array.from({ length: 12 }, (_, i) => (
-      <GridCol key={i} size={i + 1}>
-        <code>{i + 1}</code>
-      </GridCol>
-    ))}
-  </Grid>
-</Preview>
-
-<ComponentDocs title="<Grid />" component={Grid} />
-<ComponentDocs title="<GridCol />" component={GridCol} />

package/src/components/Hero/Hero.mdx

@@ -1,168 +0,0 @@
-import queryString from 'query-string';
-import { ComponentDocs } from '@lighting-beetle/lighter-styleguide';
-
-import { Preview } from '../../styleguide/';
-import HeroIframePreview from './IframePreview';
-
-import Alert from '../Alert';
-
-import Hero from './';
-
-# Hero
-
-## Composition
-
-Hero combines Container, Grid, Button and Sticker together with it's built in responsive styles to create a modular component. Height is determined by its content and image, which means that too much text can overflow the image. Copywriters and designers must test that their images and text fit on each breakpoint.
-
-### Title
-
-- Required.
-- Must be shorter than 45 characters.
-- Medium (`.display-2`) and large (`.display-1`) variants must match with medium and large description size. Medium title can only be used with medium description and large title with large description.
-
-### Description
-
-- Optional.
-- Must be shorter than 120 characters.
-- Medium (`.h5`) and large (`.h4`) variants must match with medium and large title size. Medium description can only be used with medium title and large description with large title.
-
-### Price
-
-- Optional.
-- All price wording and numbers must be the same size.
-- Must not contain conditions (e.g. asterisk and explanation).
-
-### Button
-
-- Optional.
-- Points to the main actionable section of the page.
-- Copy should reflect the desired action. Instead of "Read more", try and match the button text with the actionable section.
-
-### Sticker
-
-- Optional.
-- Can contain an icon or text.
-
-### Image
-
-- Always aligned to the right and vertically centered.
-- [**Fullwidth**](#fullwidth-photo-all-features) image dimensions:
-  - **xs**: 768 x 540
-  - **sm, md**: 768 x 540 + hidpi version
-  - **lg**: 1024 x 540 + hidpi version
-  - **xl**: 1280 x 540 + hidpi version
-  - **xxl**: 1400 x 540 + hidpi version
-- [**Half width**](#half-width-photo) image dimensions:
-  - **xs**: 768 x 540
-  - **sm, md**: 768 x 540 + hidpi version
-  - **lg**: 470 x 540 + hidpi version
-  - **xl**: 590 x 540 + hidpi version
-  - **xxl**: 650 x 540 + hidpi version
-- [**Single size**](#with-single-image-size) half width image dimensions:
-  - **xs**: 626 x 540 + hidpi version
-- [**Vendor logo**](#with-vendor-logo) height and position
-  the logo size is constrained by its height and must be placed inside the image by a graphic designer.
-  - **xs**: 30px, 10px from top, 10px from left
-  - **sm, md**: 50px, 30px from top, 20px from left
-  - **lg**: 50px, 50px from top, 30px from right
-  - **xl**: 60px, 60px from top, 30px from right
-  - **xxl**: 60px, 60px from top, 50px from right
-
-### Gradient overlay
-
-- Optional.
-- Makes sure text is readable on full width images.
-
-## Variants
-
-### Build your own!
-
-[Visit the playground](/pages/hero-playground.html) to build your own Hero
-
-### Fullwidth photo all features
-
-<HeroIframePreview
-  textSize="large"
-  background="black"
-  title="Ušetrite až 100&nbsp;€ pri kúpe hernej konzoly"
-  description="Nezmeškajte štedrú ponuku od Orangeu a získajte od nás k internetu hernú konzolu so zľavou až 100&nbsp;."
-  price="od 10&nbsp;€/mes."
-  sticker={{ children: 'Lorem ipsum' }}
-  image={{
-    default: '/images/hero/photo.jpg',
-    xxl: '/images/hero/photo-xxl.jpg, /images/hero/photo-xxl-2x.jpg 2x',
-    xl: '/images/hero/photo-xl.jpg, /images/hero/photo-xl-2x.jpg 2x',
-    lg: '/images/hero/photo-lg.jpg, /images/hero/photo-lg-2x.jpg 2x',
-    sm: '/images/hero/photo.jpg, /images/hero/photo-2x.jpg 2x',
-  }}
-  button={{ children: 'Chcem zľavu na hernú konzolu' }}
-  hasGradientOverlay={true}
-  hasFullwidthImage={true}
-/>
-
-### Half width photo
-
-<HeroIframePreview
-  background="gray"
-  title="Vyberte si vašu dvojičku s OPPO"
-  textSize="large"
-  description="Vyberte si dvojicu smartfónov OPPO. Druhý len za 1 € a bez viazanosti."
-  image={{
-    default: '/images/hero/example.jpg',
-    xxl: '/images/hero/example-xxl.jpg, /images/hero/example-xxl@2x.jpg 2x',
-    xl: '/images/hero/example-xl.jpg, /images/hero/example-xl@2x.jpg 2x',
-    lg: '/images/hero/example-lg.jpg, /images/hero/example-lg@2x.jpg 2x',
-    sm: '/images/hero/example.jpg, /images/hero/example@2x.jpg 2x',
-  }}
-  sticker={{ children: 'Získajte druhý telefón za 1 €' }}
-  hasGradientOverlay
-/>
-
-### With single image size
-
-<HeroIframePreview
-  background="black"
-  title="Byť v Orangei, znamená byť v dobrých rukách"
-  textSize="large"
-  description="Jednoducho sa to oplatí. Ako operátor s maximálnym pokrytím stále myslíme na našich zákazníkov a zdokonaľujeme naše služby. Nechajte sa prekvapiť."
-  image={{
-    src: '/images/hero/single.png',
-    srcSet: '/images/hero/single.png 1x, /images/hero/single@2x.png 2x',
-  }}
-/>
-
-### With vendor logo
-
-<HeroIframePreview
-  background="gray"
-  title="Samsung Galaxy Z Fold4 | Z Flip4"
-  textSize="large"
-  description="Objednajte si jeden z telefónov už teraz."
-  image={{
-    default: '/images/hero/vendor.png',
-    xxl: '/images/hero/vendor-xxl.png, /images/hero/vendor-xxl@2x.png 2x',
-    xl: '/images/hero/vendor-xl.png, /images/hero/vendor-xl@2x.png 2x',
-    lg: '/images/hero/vendor-lg.png, /images/hero/vendor-lg@2x.png 2x',
-    sm: '/images/hero/vendor.png, /images/hero/vendor@2x.png 2x',
-  }}
-/>
-
-### With other vendor logo style
-
-<HeroIframePreview
-  background="black"
-  title="Samsung Galaxy S21 | S21+ | S21 Ultra 5G"
-  textSize="medium"
-  description="Objednajte si jeden z telefónov už teraz."
-  image={{
-    default: '/images/hero/old-vendor.jpg',
-    xxl: '/images/hero/old-vendor-xxl.jpg, /images/hero/old-vendor-xxl-2x.jpg 2x',
-    xl: '/images/hero/old-vendor-xl.jpg, /images/hero/old-vendor-xl-2x.jpg 2x',
-    lg: '/images/hero/old-vendor-lg.jpg, /images/hero/old-vendor-lg-2x.jpg 2x',
-    sm: '/images/hero/old-vendor.jpg, /images/hero/old-vendor-2x.jpg 2x',
-  }}
-/>
-
-## Props
-
-<ComponentDocs title="<Hero />" component={Hero} />