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

package/src/components/Button/Button.mdx

@@ -1,273 +0,0 @@
-import { ComponentDocs, Code } from '@lighting-beetle/lighter-styleguide';
-
-import { Preview } from '../../styleguide/';
-import { Grid, GridCol, Icon, Bar, BarItem } from '../';
-
-import Button from './Button';
-import IconButton from './IconButton';
-
-export const buttonVariants = ['default', 'primary', 'fill', 'ghost'];
-
-# Button
-
-Buttons are control elements used for navigating and operating a page and form submission.
-
-## Example
-
-<Button>Button</Button>
-
-## Elements
-
-The `<Button />` component can render as `<a>` or `<button>`. Take care to always use the appropriate element:
-
-- `<a>` if it takes you somewhere (on page or elsewhere)
-- `<button>` if it does something (controls a section, submits a form, etc.)
-
-[Additional resources](#additional-resources)
-
-<Preview>
-  <Button>Button</Button>
-  <br />
-  <Button href="#">Anchor</Button>
-</Preview>
-
-## Arrangement
-
-The Button component implements right and bottom margin to ensure horizontal flow between multiple button elements and vertical flow with regular text. In case your buttons might break into multiple lines, use the [Buttons component](/components/buttons). The following example shows, that buttons flow nicely between paragraphs and the non-ideal case when they break into multiple lines.
-
-<Preview>
-  <p>
-    Buttons sit next to each other and provide necessary spacing when used in
-    regular text
-  </p>
-  <Button>Button 1</Button>
-  <Button>Button 2</Button>
-  <p>This paragraph is offset byt the bottom margin of preceeding buttons</p>
-  <Button>Don't do this</Button>
-  <br />
-  <Button href="/components/buttons">Wrap us in Buttons</Button>
-  <p>
-    When buttons might break into multiple lines, wrap them usng{' '}
-    <a href="/components/buttons">Buttons component</a> for better vertical
-    spacing.
-  </p>
-</Preview>
-
-## Variants
-
-<React.Fragment>
-  {buttonVariants.map(variant => {
-    const variantProp = variant === 'default' ? undefined : variant;
-    const variantName = variant.charAt(0).toUpperCase() + variant.slice(1);
-    return (
-      <React.Fragment key={variant}>
-        <h3>{variantName}</h3>
-        <Preview>
-          <Button type={variantProp}>{variantName}</Button>
-          <Button type={variantProp} isActive>
-            {variantName} active
-          </Button>
-          <Button type={variantProp} isDisabled>
-            {variantName} disabled
-          </Button>
-        </Preview>
-      </React.Fragment>
-    );
-  })}
-</React.Fragment>
-<React.Fragment>
-  {buttonVariants.map(variant => {
-    const variantProp = variant === 'default' ? undefined : variant;
-    const variantName = variant.charAt(0).toUpperCase() + variant.slice(1);
-    return (
-      <React.Fragment key={variant}>
-        <h3>{variantName} inverse </h3>
-        <Preview bgTheme="black">
-          <Button isInverse type={variantProp}>
-            {variantName} inverse
-          </Button>
-          <Button isInverse type={variantProp} isActive>
-            {variantName} inverse active
-          </Button>
-          <Button isInverse type={variantProp} isDisabled>
-            {variantName} inverse disabled
-          </Button>
-        </Preview>
-      </React.Fragment>
-    );
-  })}
-</React.Fragment>
-
-## Default important
-
-When white background is used inside black background, button uses style defined for black one and therefore has incorrect colour scheme. For this case we have class .btn--default that forces button to use default styles.
-
-<Preview
-  code={
-    <div className="bg-black">
-      <div className="bg-white">
-        <Button isDefault>button</Button>
-        <Button>button</Button>
-      </div>
-    </div>
-  }
->
-  <div className="bg-black" style={{ padding: '15px', paddingTop: '30px' }}>
-    <div className="bg-white">
-      <Bar>
-        <BarItem>
-          <Button isDefault>button</Button>
-        </BarItem>
-        <BarItem>{'<-- button with btn--default class'}</BarItem>
-      </Bar>
-      <Bar className="mb-none">
-        <BarItem>
-          <Button>button</Button>
-        </BarItem>
-        <BarItem>{"<-- there's a button"}</BarItem>
-      </Bar>
-    </div>
-  </div>
-</Preview>
-
-## Sizes
-
-<Preview>
-  <Button size="large">Large</Button>
-  <Button>Default</Button>
-  <Button size="small">Small</Button>
-</Preview>
-
-## Square
-
-Square buttons maintain their shape, no matter what you throw inside. They should be used for [icons](#icon-only).
-
-<Preview>
-  <Button isSquare size="small">
-    A
-  </Button>
-  <Button isSquare>A</Button>
-  <Button isSquare size="large">
-    A
-  </Button>
-  <br />
-  <Button isSquare size="small">
-    Overflow
-  </Button>
-  <Button isSquare>Overflow</Button>
-  <Button isSquare size="large">
-    Overflow
-  </Button>
-</Preview>
-
-## Icons
-
-### Icon only
-
-<Preview>
-  <IconButton size="small" isSquare iconName="settings">
-    Settings
-  </IconButton>
-  <IconButton isSquare iconName="settings">
-    Settings
-  </IconButton>
-  <IconButton size="large" isSquare iconName="settings">
-    Settings
-  </IconButton>
-  <br />
-  <IconButton type="ghost" size="small" isSquare iconName="settings">
-    Settings
-  </IconButton>
-  <IconButton type="ghost" isSquare iconName="settings">
-    Settings
-  </IconButton>
-  <IconButton type="ghost" size="large" isSquare iconName="settings">
-    Settings
-  </IconButton>
-</Preview>
-
-### Icon and text
-
-<Preview>
-  <IconButton type="primary" size="small" iconName="add">
-    Pridať
-  </IconButton>
-  <IconButton type="primary" iconName="add">
-    Pridať
-  </IconButton>
-  <IconButton type="primary" size="large" iconName="add">
-    Pridať
-  </IconButton>
-  <br />
-  <IconButton size="small" iconName="chevron-down" iconPosition="right">
-    Vybrať
-  </IconButton>
-  <IconButton iconName="chevron-down" iconPosition="right">
-    Vybrať
-  </IconButton>
-  <IconButton size="large" iconName="chevron-down" iconPosition="right">
-    Vybrať
-  </IconButton>
-  <br />
-  <IconButton
-    type="ghost"
-    size="small"
-    iconName="chevron-right"
-    iconPosition="right"
-  >
-    Ďalej
-  </IconButton>
-  <IconButton type="ghost" iconName="chevron-right" iconPosition="right">
-    Ďalej
-  </IconButton>
-  <IconButton
-    type="ghost"
-    size="large"
-    iconName="chevron-right"
-    iconPosition="right"
-  >
-    Ďalej
-  </IconButton>
-</Preview>
-
-## Props
-
-<ComponentDocs title="<Button />" component={Button} />
-<ComponentDocs title="<IconButton />" component={IconButton} />
-
-## Accessibility
-
-The `<Button />` component can render as `<a>` or `<button>`. Take care to always use the appropriate element. The rule of thumb is to use `<a>` if it takes you somewhere, `<button>` if it does something and `<button type="submit/rest">` if it's used as a form control. Check the [articles below](#additional-resources) for more information.
-
-### Color contrast
-
-Buttons 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.
-
-[Technique G145](https://www.w3.org/WAI/WCAG21/Techniques/general/G145) describes that increasing font size is sufficient to meet [Success Criterion 1.4.3: Contrast (Minimum)](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html), but a business decision has been made not to follow this for aesthetics reasons.
-
-### Don't disable buttons
-
-Especially form submit buttons. A disabled button is not keyboard focusable. Instead of using the `[disabled]` attribute, it's advised to rather use `[aria-disabled=true]` - it still remains focusable, and a screenreader can find it and announce it's contents, along with the information that it's disabled.
-
-Users should be able to submit incomplete and invalid forms, and should get relevant validation feedback, which explains what went wrong and how to fix it. It's considered a bad practice to let the user figure out thier errors themselves.
-
-### Icons
-
-While it's recommended to always show a textual label acompanying an icon, this rule can't be always followed. When this happens, always make sure there is a textual alternative readable by assistive technology. There are three options:
-
-- alt attribute on the icon OR
-- `[aria-label]` on the button element OR
-- a visually visually hidden but accessible element (e.g. `.sr-only`)
-
-### Additional resources
-
-- [When Is A Button Not A Button?](https://www.smashingmagazine.com/2019/02/buttons-interfaces/)
-- [Anchors, Buttons, And Accessibility](https://formidable.com/blog/2014/05/08/anchors-buttons-and-accessibility/)
-
-## Aliases
-
-```
-<ButtonPrimary /> === <Button type="primary" />
-<ButtonFill /> === <Button type="fill" />
-<ButtonGhost /> === <Button type="ghost" />
-```

package/src/components/Buttons/Buttons.mdx

@@ -1,39 +0,0 @@
-import { ComponentDocs } from '@lighting-beetle/lighter-styleguide';
-
-import { Preview } from '../../styleguide/';
-import { Buttons, Button } from '../';
-
-# Buttons
-
-Help arrange multiple buttons
-
-## Usage
-
-<Preview>
-  <Buttons>
-    <Button>There are example buttons</Button>
-    <Button>They can break into multiple lines</Button>
-    <button className="link">And look fabulous doing it</button>
-  </Buttons>
-</Preview>
-
-## Stack on XS
-
-Buttons can be forced to stack and span the available width only on XS viewport when used on crossroads pages with two available actions. For example:
-
-- Login prompt: "Login" and "Continue as new customer"
-- Upsell/crossel prompt: "Show offer" and "Skip"
-
-Button stacks must not be used in wizards to stack continue/back buttons.
-Button stacks must not be used with only one button. The maximum recommended number of stacked buttons is two.
-
-<Preview>
-  <Buttons isStackedOnXs>
-    <Button type="primary">Log in</Button>
-    <Button>Continue as new customer</Button>
-  </Buttons>
-</Preview>
-
-Button width is always determined by it's content and Button stack scenario is the only exception. If you need vertical navigation, use the [List component](/components/list).
-
-<ComponentDocs title="<Buttons />" component={Buttons} />

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