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

package/src/components/BodyBanner/BodyBanner.mdx

@@ -1,268 +0,0 @@
----
-title: BodyBanner
-description: A versatile banner component for displaying content with images and call-to-action buttons
----
-
-import { BodyBanner } from './BodyBanner';
-import { BodyBannerClientWrapper } from '../../app/components/body-banner/BodyBannerClientWrapper';
-
-# BodyBanner
-
-The BodyBanner component is a flexible banner that displays content with optional images and call-to-action buttons. It supports different sizes, color schemes, and layouts.
-
-## Props
-
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| `size` | `"small" \| "large"` | Yes | - | Size variant of the banner |
-| `colorScheme` | `"light" \| "dark"` | Yes | - | Color scheme for the entire banner |
-| `color` | `"gray" \| "orange"` | No | - | Background color variant |
-| `className` | `string` | No | - | Additional CSS classes |
-| `imageUrl` | `string` | No | - | URL of the banner image |
-| `title` | `string` | No | - | Banner title |
-| `description` | `string` | No | - | Banner description text |
-| `buttonText` | `string` | No | - | Text for the call-to-action button |
-
-## Size Variants
-
-### Small Banner
-
-The small banner displays content in a compact layout with the image positioned above the text content.
-
-<BodyBannerClientWrapper>
-  <BodyBanner
-    size="small"
-    title="Small Banner Example"
-    description="This is a small banner with compact layout and image positioned above the content."
-    buttonText="Learn More"
-    imageUrl="/images/hero/example-lg.jpg"
-  />
-</BodyBannerClientWrapper>
-
-```jsx
-<BodyBanner
-  size="small"
-  title="Small Banner Example"
-  description="This is a small banner with compact layout and image positioned above the content."
-  buttonText="Learn More"
-  imageUrl="/images/hero/example-lg.jpg"
-/>
-```
-
-### Large Banner
-
-The large banner displays content in a two-column layout with the image positioned beside the text content.
-
-<BodyBannerClientWrapper>
-  <BodyBanner
-    size="large"
-    title="Large Banner Example"
-    description="This is a large banner with two-column layout and image positioned beside the content."
-    buttonText="Get Started"
-    imageUrl="/images/hero/example-lg.jpg"
-  />
-</BodyBannerClientWrapper>
-
-```jsx
-<BodyBanner
-  size="large"
-  title="Large Banner Example"
-  description="This is a large banner with two-column layout and image positioned beside the content."
-  buttonText="Get Started"
-  imageUrl="/images/hero/example-lg.jpg"
-/>
-```
-
-## Color Schemes
-
-### Light Color Scheme
-
-<BodyBannerClientWrapper>
-  <BodyBanner
-    size="small"
-    colorScheme="light"
-    title="Light Banner"
-    description="This banner uses a light color scheme."
-    buttonText="Learn More"
-    imageUrl="/images/hero/example-lg.jpg"
-  />
-</BodyBannerClientWrapper>
-
-```jsx
-<BodyBanner
-  size="small"
-  colorScheme="light"
-  title="Light Banner"
-  description="This banner uses a light color scheme."
-  buttonText="Learn More"
-  imageUrl="/images/hero/example-lg.jpg"
-/>
-```
-
-### Dark Color Scheme
-
-<BodyBannerClientWrapper>
-  <BodyBanner
-    size="small"
-    colorScheme="dark"
-    title="Dark Banner"
-    description="This banner uses a dark color scheme."
-    buttonText="Learn More"
-    imageUrl="/images/hero/example-lg.jpg"
-  />
-</BodyBannerClientWrapper>
-
-```jsx
-<BodyBanner
-  size="small"
-  colorScheme="dark"
-  title="Dark Banner"
-  description="This banner uses a dark color scheme."
-  buttonText="Learn More"
-  imageUrl="/images/hero/example-lg.jpg"
-/>
-```
-
-## Color Variants
-
-### Gray Background
-
-<BodyBannerClientWrapper>
-  <BodyBanner
-    size="small"
-    colorScheme="light"
-    color="gray"
-    title="Gray Banner"
-    description="This banner has a gray background color."
-    buttonText="Learn More"
-    imageUrl="/images/hero/example-lg.jpg"
-  />
-</BodyBannerClientWrapper>
-
-```jsx
-<BodyBanner
-  size="small"
-  colorScheme="light"
-  color="gray"
-  title="Gray Banner"
-  description="This banner has a gray background color."
-  buttonText="Learn More"
-  imageUrl="/images/hero/example-lg.jpg"
-/>
-```
-
-### Orange Background
-
-<BodyBannerClientWrapper>
-  <BodyBanner
-    size="small"
-    colorScheme="light"
-    color="orange"
-    title="Orange Banner"
-    description="This banner has an orange background color."
-    buttonText="Learn More"
-    imageUrl="/images/hero/example-lg.jpg"
-  />
-</BodyBannerClientWrapper>
-
-```jsx
-<BodyBanner
-  size="small"
-  colorScheme="light"
-  color="orange"
-  title="Orange Banner"
-  description="This banner has an orange background color."
-  buttonText="Learn More"
-  imageUrl="/images/hero/example-lg.jpg"
-/>
-```
-
-## Combined Examples
-
-### Large Dark Banner with Orange Background
-
-<BodyBannerClientWrapper>
-  <BodyBanner
-    size="large"
-    colorScheme="dark"
-    color="orange"
-    title="Large Dark Orange Banner"
-    description="This is a large banner with dark color scheme and orange background."
-    buttonText="Get Started"
-    imageUrl="/images/hero/example-lg.jpg"
-  />
-</BodyBannerClientWrapper>
-
-```jsx
-<BodyBanner
-  size="large"
-  colorScheme="dark"
-  color="orange"
-  title="Large Dark Orange Banner"
-  description="This is a large banner with dark color scheme and orange background."
-  buttonText="Get Started"
-  imageUrl="/images/hero/example-lg.jpg"
-/>
-```
-
-### Small Light Banner with Gray Background
-
-<BodyBannerClientWrapper>
-  <BodyBanner
-    size="small"
-    colorScheme="light"
-    color="gray"
-    title="Small Light Gray Banner"
-    description="This is a small banner with light color scheme and gray background."
-    buttonText="Learn More"
-    imageUrl="/images/hero/example-lg.jpg"
-  />
-</BodyBannerClientWrapper>
-
-```jsx
-<BodyBanner
-  size="small"
-  colorScheme="light"
-  color="gray"
-  title="Small Light Gray Banner"
-  description="This is a small banner with light color scheme and gray background."
-  buttonText="Learn More"
-  imageUrl="/images/hero/example-lg.jpg"
-/>
-```
-
-## Banner Without Image
-
-You can also use the BodyBanner without an image:
-
-<BodyBannerClientWrapper>
-  <BodyBanner
-    size="small"
-    colorScheme="light"
-    title="Banner Without Image"
-    description="This banner doesn't include an image, focusing purely on the text content and call-to-action."
-    buttonText="Learn More"
-  />
-</BodyBannerClientWrapper>
-
-```jsx
-<BodyBanner
-  size="small"
-  colorScheme="light"
-  title="Banner Without Image"
-  description="This banner doesn't include an image, focusing purely on the text content and call-to-action."
-  buttonText="Learn More"
-/>
-```
-
-## Usage Guidelines
-
-- Use **small** banners for compact content displays or when space is limited
-- Use **large** banners for prominent content that needs more visual impact
-- The **colorScheme** prop is required and determines the overall color scheme (light/dark)
-- Choose **light** color scheme for better readability on light backgrounds
-- Choose **dark** color scheme for better contrast on dark backgrounds
-- The **color** prop provides additional background color options (gray, orange)
-- Always provide meaningful `alt` text for images through the Image component
-- Ensure button text is clear and actionable
-- Consider the content hierarchy when choosing between title and description text

package/src/components/Breadcrumbs/Breadcrumbs.mdx

@@ -1,84 +0,0 @@
-import { ComponentDocs, md, Dos, Donts } from '@lighting-beetle/lighter-styleguide';
-import { Preview } from '../../styleguide/';
-
-import Breadcrumbs from './index';
-import Grid, { GridCol } from '../Grid';
-
-export const breadcrumbsItems = [
-  {
-    text: 'Home',
-    url: '/styleguide',
-  },
-  {
-    text: 'Components',
-    url: '/components',
-  },
-  {
-    text: 'Breadcrumbs',
-    url: '#main',
-  },
-];
-
-# Breadcrumbs
-
-Help users understand where they are within a website’s structure and move between levels. 
-
-<Preview>
-  <Breadcrumbs label="Breadcrumbs" items={breadcrumbsItems} />
-</Preview>
-
-<Grid>
-  <GridCol size={{ md: 6 }}>
-    <Dos>
-      <p>
-        Use the breadcrumbs component on every page, where you need to help
-        users understand and move between the multiple levels of a website.
-        That means virtually every page except the homepage and checkout.
-      </p>
-      <p>Include the current page to indicate current location.</p>
-    </Dos>
-  </GridCol>
-  <GridCol size={{ md: 6 }}>
-    <Donts>
-      <p>
-        Don’t use the breadcrumbs to show progress through a linear journey or
-        transaction.
-      </p>
-    </Donts>
-  </GridCol>
-</Grid>
-
-## Higlighting current page to screen readers
-
-If your application implements HTML5 landmarks (it should if possible), breadcrumbs should not be a part of the main region, current page hyperlink should point to the main region and be identified with `aria-current="page"` attribute. Otherwise, current page should not be a hyperlink and the `aria-current="page"` is applied to its wrapping `<li />`.
-
-### Current page item as hyperlink
-
-<Preview>
-  <Breadcrumbs label="Breadcrumbs" items={breadcrumbsItems} />
-</Preview>
-
-### Current page item without hyperlink
-
-<Preview>
-  <Breadcrumbs label="Breadcrumbs" items={[ breadcrumbsItems[0], breadcrumbsItems[1], { text: 'Breadcrumbs'} ]} />
-</Preview>
-
-## Dark mode
-
-<Preview>
-  <Breadcrumbs darkMode label="Breadcrumbs" items={breadcrumbsItems} />
-</Preview>
-
-## Props
-
-<ComponentDocs title="<Breadcrumbs />" component={Breadcrumbs} />
-
-## Accessibility
-
-The breadcrumb component is built according to [WAI-ARIA authoring practices 1.1](https://www.w3.org/TR/wai-aria-practices-1.1/#breadcrumb).
-
-## Notes
-
-* On small screens, breadcrumbs collapse and show only the parent page of the current location to provide a simple back button. 
-* This component can be used as a separate package. The only asset required for proper use is a stylesheet, located in `lib/breadcrumbs.css`.

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