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

package/src/components/Section/Section.mdx

@@ -1,397 +0,0 @@
-import { ComponentDocs } from "@lighting-beetle/lighter-styleguide";
-import { loremIpsum as lipsum } from "lorem-ipsum";
-import Preview, { PreviewSpacing } from "../../styleguide/Preview/";
-import cx from "classnames";
-import Grid, { GridCol } from "../Grid";
-import ToggleButton from "../../docs/utils/ToggleButton";
-import Button from "../Button";
-import { Section } from "./";
-
-# Section
-
-Section is an element that helps to separate page segments with consistent spacing. The content is automatically wrapped in a Container component for consistent layout and spacing.
-
-<Preview>
-  <Section children="This is a section. You can use it to space out certain parts of the page with standardized spaces. The content is wrapped in a Container component." />
-</Preview>
-
-## Structure
-
-Section automatically wraps its content in a Container component, which provides consistent layout constraints and spacing. This ensures that content is properly contained and aligned within the section.
-
-<Preview>
-  <Section>
-    <div style={{ border: "1px dashed #ccc", padding: "10px" }}>
-      This content is wrapped in a Container component
-    </div>
-  </Section>
-</Preview>
-
-## Colors
-
-<Preview>
-  <Section children="Gray Section" color="gray" />
-  <Section children="White (default) Section" />
-  <Section children="Black Section" color="black" />
-  <Section children="Orange Section" color="orange" />
-</Preview>
-
-## HTML Tags
-
-Section can render as different HTML elements using the `tag` prop. This is useful for semantic HTML structure.
-
-<Preview>
-  <Section children="Default div tag" />
-  <Section children="Section tag" tag="section" />
-  <Section children="Article tag" tag="article" />
-  <Section children="Main tag" tag="main" />
-  <Section children="Aside tag" tag="aside" />
-  <Section children="Header tag" tag="header" />
-  <Section children="Footer tag" tag="footer" />
-</Preview>
-
-## Spacing variants and rules
-
-### Default
-
-<PreviewSpacing>
-  <Section children="Default section" />
-</PreviewSpacing>
-
-### Small
-
-A small section has smaller spacing on its top side.
-
-<PreviewSpacing>
-  <Section children="Small section" spacing="small" />
-</PreviewSpacing>
-
-### Extra small
-
-This section has 10 px spacings from both top and bottom.
-
-<PreviewSpacing>
-  <Section children="Extra small section" spacing="xsmall" />
-</PreviewSpacing>
-
-### Rules
-
-First section appearing in a group of sections is always `default`. Following sections of the same color
-are `small`. Following sections of a different color are always `default`.
-
-Default, white, gray, black, and orange sections have these rules applied automatically without specifying the sections's size.
-
-<PreviewSpacing>
-  <Section children="Gray" color="gray" />
-  <Section children="Another gray" color="gray" />
-  <Section children="Black" color="black" />
-  <Section children="White" />
-  <Section children="Another white" />
-</PreviewSpacing>
-
-#### Breaking the rules
-
-Spacing rules can be broken using `section--default` and `section--small` classNames.
-
-<PreviewSpacing>
-  <Section
-    children="Small spacing breaking the rules (first section should be default)"
-    spacing="small"
-  />
-  <Section
-    children="Default spacing breaking the rules (adjacent section of the same color should be small)"
-    spacing="default"
-  />
-</PreviewSpacing>
-
-## Accessibility
-
-Section supports various accessibility features through ARIA attributes and semantic HTML tags. The Container wrapper maintains accessibility while providing consistent layout.
-
-### Semantic HTML
-
-Use appropriate HTML tags for better accessibility:
-
-<Preview>
-  <Section tag="main" aria-label="Main content">
-    <h1>Main Content</h1>
-    <p>
-      This section uses the main tag for semantic meaning and wraps content in a
-      Container.
-    </p>
-  </Section>
-</Preview>
-
-### ARIA Attributes
-
-<Preview>
-  <Section
-    tag="section"
-    aria-labelledby="section-title"
-    aria-describedby="section-description"
-  >
-    <h2 id="section-title">Section Title</h2>
-    <p id="section-description">
-      This section has proper ARIA labeling and Container wrapper.
-    </p>
-  </Section>
-</Preview>
-
-### Interactive Elements
-
-<Preview>
-  <Section>
-    <button type="button" onClick={() => alert("Button clicked!")}>
-      Interactive Button
-    </button>
-    <input type="text" aria-label="Search input" placeholder="Search..." />
-  </Section>
-</Preview>
-
-## Spacing problems and solutions
-
-### 1. Last element
-
-#### Problem:
-
-If there is **just one element at the end** of the section and this element has
-its **own bottom spacing** defined, these spaces would add up and we would lose spacing
-consistency.
-
-<PreviewSpacing>
-  <Section color="gray">
-    <p>
-      Et irure sit ut deserunt irure quis enim amet mollit. Adipisicing ullamco
-      adipisicing.
-    </p>
-    <Button type="primary">Button</Button>
-  </Section>
-</PreviewSpacing>
-
-#### Solution:
-
-1. remove last element spacing
-
-<PreviewSpacing>
-  <Section color="gray">
-    <p>
-      Et irure sit ut deserunt irure quis enim amet mollit. Adipisicing ullamco
-      adipisicing.
-    </p>
-    <Button type="primary" className="mb-none">
-      Button
-    </Button>
-  </Section>
-</PreviewSpacing>
-
-### 2. Stacking elements
-
-#### Problem:
-
-There are **multiple elements** in row at the end of a section and **they define their own
-bottom spacing** (`p` in this case, uses default `medium` margin), because
-they need to stack on smaller devices. The space of the section and elements
-would add up and we would lose spacing consistency.
-
-export const cols1 = [5, 2, 3, 4].map((count) => lipsum({ count }));
-
-<PreviewSpacing>
-  <Section color="gray">
-    <Grid>
-      {cols1.map((content, index, arr) => (
-        <GridCol key={index.toString()} size={{ md: 3 }}>
-          <p>{content}</p>
-        </GridCol>
-      ))}
-    </Grid>
-  </Section>
-</PreviewSpacing>
-
-#### Solution:
-
-Use [Grid row gap](/components/grid#row-gap-size)
-
-<PreviewSpacing>
-  <Section color="gray">
-    <Grid rowGapSize="medium">
-      {cols1.map((content, index, arr) => (
-        <GridCol key={index.toString()} size={{ md: 3 }}>
-          <p>{content}</p>
-        </GridCol>
-      ))}
-    </Grid>
-  </Section>
-</PreviewSpacing>
-
-### 3. Dynamic visibility of a last element
-
-#### Problem
-
-If there is a possibility of **last element** of a section (`<button>` in this case) to disappear,
-spacing of elements above this element would collide with a section spacing and we would lose spacing consistency.
-
-export const cols2 = [1, 2, 3, 4, 5, 6, 7, 8].map((count) => lipsum({ count }));
-
-<PreviewSpacing>
-  <Section color="gray">
-    <Grid>
-      {cols2.map((content, index, arr) => (
-        <GridCol
-          key={index.toString()}
-          size={{ md: 3 }}
-          className={
-            index < arr.length / 2 ? "" : "hidden-problem-element hide"
-          }
-        >
-          <p>{content}</p>
-        </GridCol>
-      ))}
-    </Grid>
-    <ToggleButton
-      className="mb-none"
-      type="primary"
-      data-toggle={JSON.stringify([
-        {
-          target: ".hidden-problem-element.hide",
-          attribute: "class",
-          value: "hide",
-        },
-        {
-          target: "self",
-          attribute: "class",
-          value: "hide",
-        },
-      ])}
-    >
-      Show more
-    </ToggleButton>
-  </Section>
-</PreviewSpacing>
-
-#### Solution:
-
-1. Use [Grid row gap](/components/grid#row-gap-size)
-2. Add additional spacing between grid and button and remove this spacing after
-   showing hidden element
-
-##### Example:
-
-<PreviewSpacing>
-  <Section color="gray">
-    <Grid rowGapSize="medium" className="mb-medium">
-      {cols2.map((content, index, arr) => (
-        <GridCol
-          key={index.toString()}
-          size={{ md: 3 }}
-          className={cx({
-            "hidden-solution-element hide": index >= arr.length / 2,
-          })}
-        >
-          <p>{content}</p>
-        </GridCol>
-      ))}
-    </Grid>
-    <ToggleButton
-      className="mb-none"
-      type="primary"
-      data-toggle={JSON.stringify([
-        {
-          target: ".hidden-solution-element.hide",
-          attribute: "class",
-          value: "hide",
-        },
-        {
-          target: "previous",
-          attribute: "class",
-          value: "mb-medium",
-        },
-        {
-          target: "self",
-          attribute: "class",
-          value: "hide",
-        },
-      ])}
-    >
-      <span>Show more</span>
-    </ToggleButton>
-  </Section>
-</PreviewSpacing>
-
-## Advanced Usage
-
-### Container Integration
-
-The Container wrapper provides consistent layout constraints. You can see this in action with complex content structures:
-
-<Preview>
-  <Section tag="article" color="gray" spacing="small">
-    <header>
-      <h1>Article Title</h1>
-      <time dateTime="2024-01-01">January 1, 2024</time>
-    </header>
-    <main>
-      <p>
-        Article content with <a href="#link">links</a> and{" "}
-        <strong>emphasis</strong>.
-      </p>
-      <blockquote>
-        <p>This is a quote within the section, properly contained.</p>
-      </blockquote>
-    </main>
-    <footer>
-      <p>Article footer with additional information.</p>
-    </footer>
-  </Section>
-</Preview>
-
-### Custom Data Attributes
-
-<Preview>
-  <Section
-    data-testid="custom-section"
-    data-analytics="section-tracking"
-    data-section-type="content"
-  >
-    <p>This section has custom data attributes for testing and analytics.</p>
-  </Section>
-</Preview>
-
-### Event Handling
-
-<Preview>
-  <Section
-    onClick={() => alert("Section clicked!")}
-    onFocus={() => console.log("Section focused")}
-    role="button"
-    tabIndex={0}
-  >
-    <p>This section is clickable and focusable.</p>
-  </Section>
-</Preview>
-
-### Complex Content Structure
-
-<Preview>
-  <Section tag="article" color="gray" spacing="small">
-    <header>
-      <h1>Article Title</h1>
-      <time dateTime="2024-01-01">January 1, 2024</time>
-    </header>
-    <main>
-      <p>
-        Article content with <a href="#link">links</a> and{" "}
-        <strong>emphasis</strong>.
-      </p>
-      <blockquote>
-        <p>This is a quote within the section.</p>
-      </blockquote>
-    </main>
-    <footer>
-      <p>Article footer with additional information.</p>
-    </footer>
-  </Section>
-</Preview>
-
-## Props
-
-<ComponentDocs title="<Section />" component={Section} />

package/src/components/Skeleton/Skeleton.mdx

@@ -1,90 +0,0 @@
-
-import { ComponentDocs, md } from '@lighting-beetle/lighter-styleguide';
-import { Preview } from '../../styleguide/';
-
-import Skeleton from './index';
-import Card, { CardSection } from '../Card';
-import Grid, { GridCol } from '../Grid';
-
-# Skeleton
-
-Basic loading indicator used as placeholder of the loaded component
-
-<Preview>
-  <Skeleton />
-</Preview>
-
-## Usage
-
-Feel free to adjust the size of the skeleton with [Grid component](/components/grid).
-
-<Preview>
-  <Grid>
-    <GridCol size={6}>
-      <Skeleton className="h2" />
-    </GridCol>
-  </Grid>
-  <h2>
-    <Skeleton />
-  </h2>
-</Preview>
-
-To simulate the structure of the component being loaded, mix up some skeletons
-
-<Preview>
-  <Card>
-    <CardSection>
-      <Grid>
-        <GridCol size={8}>
-          <Skeleton className="h2" />
-        </GridCol>
-      </Grid>
-      <Grid>
-        <GridCol><Skeleton /></GridCol>
-        <GridCol><Skeleton /></GridCol>
-        <GridCol><Skeleton /></GridCol>
-        <GridCol><Skeleton /></GridCol>
-        <GridCol size={6}><Skeleton /></GridCol>
-      </Grid>
-    </CardSection>
-  </Card>
-</Preview>
-
-<Preview>
-  <Grid>
-    {[1,2,3].map(item => (
-      <GridCol key={item.toString()} size={{ md: 6, lg: 4}}>
-        <Card>
-          <CardSection>
-            <Grid justifyHeight>
-              <GridCol size={6}>
-                <Skeleton />
-              </GridCol>
-              <GridCol size="auto">
-                <Grid>
-                  <GridCol>
-                    <Skeleton className="h2" />
-                  </GridCol>
-                </Grid>
-                <Grid>
-                  {[1,2,3,4,5,6,7].map(item => (
-                    <GridCol key={item.toString()}><Skeleton /></GridCol>
-                  ))}
-                  <GridCol size={6}><Skeleton /></GridCol>
-                </Grid>
-              </GridCol>
-            </Grid>
-          </CardSection>
-        </Card>
-      </GridCol>
-    ))}
-  </Grid>
-</Preview>
-
-## Props
-
-<ComponentDocs title="<Skeleton />" component={Skeleton} />
-
-## Accessibility
-
-You should announce the loading state using aria-busy in the appropriate live region

package/src/components/SkipLink/SkipLink.mdx

@@ -1,23 +0,0 @@
-import { ComponentDocs } from '@lighting-beetle/lighter-styleguide';
-import { Preview, Code } from '../../styleguide/';
-import SkipLink from './';
-
-# Skip link
-
-Provides keyboard users to skip parts of a webpage. Usually a skip link is used as a first element of a page and points to main content. This allows users to skip main navigation and dive into subject matter of the requested page.
-
-The link is visually hidden until it's focused by keyboard.
-
-## Example
-
-<Preview>
-  <SkipLink href="#example-skip-link-target" />
-
-  <div id="example-skip-link-target">
-    Skip link target element
-  </div>
-</Preview>
-
-## Props
-
-<ComponentDocs component={SkipLink} />

package/src/components/Stepbar/Stepbar.mdx

@@ -1,137 +0,0 @@
-import { ComponentDocs } from '@lighting-beetle/lighter-styleguide';
-import { Preview } from '../../styleguide/';
-
-import Stepbar from './index';
-
-# Stepbar
-
-Stepped navigation for multi step processes.
-
-<Preview>
-  <Stepbar
-    steps={[
-      {
-        title: 'Paušál',
-        href: '#',
-      },
-      {
-        title: 'Internet',
-        href: '#',
-        isCurrent: true,
-      },
-      {
-        title: 'TV (nepovinné)',
-        href: '#',
-      },
-    ]}
-  />
-</Preview>
-
-## Dark variant
-
-<Preview>
-  <div className="section bg-black mb-small">
-    <Stepbar
-      variant="dark"
-      steps={[
-        {
-          title: 'Paušál',
-          href: '#',
-        },
-        {
-          title: 'default behaviour on black background',
-          href: '#',
-          isCurrent: true,
-        },
-        {
-          title: 'TV (nepovinné)',
-          href: '#',
-        },
-      ]}
-    />
-  </div>
-  <Stepbar
-    variant="inverse"
-    steps={[
-      {
-        title: 'Paušál',
-        href: '#',
-      },
-      {
-        title: 'with class .stepbar--inverse',
-        href: '#',
-        isCurrent: true,
-      },
-      {
-        title: 'TV (nepovinné)',
-        href: '#',
-      },
-    ]}
-  />
-</Preview>
-
-## Step links
-
-Previous step links must point to a related part of the stepped process, ideally the first interactive element.
-
-<Preview>
-  <Stepbar
-    steps={[
-      {
-        title: 'Paušál',
-        href: '/components/stepbar#form-element',
-      },
-      {
-        title: 'Internet',
-        href: '#form-element',
-        isCurrent: true,
-      },
-      {
-        title: 'TV (nepovinné)',
-        href: '#',
-      },
-    ]}
-  />
-  <input type="text" id="form-element" placeholder="stepped form input" />
-</Preview>
-
-## Responsive behaviour
-
-On small viewports, steps are displayed as rectangles without titles. As the width of screen increases, the title of the active element is shown, and arrows are added. Finnaly titles of non-active steps can be shown using the responsive `--wide-[md/lg/xl]` modifier.
-
-- xs: item titles are hidden, only numbers are visible.
-- sm: current item title is visible
-- md and larger: optionally show all step titles
-
-<Preview>
-  <Stepbar
-    showTitlesFrom="lg"
-    steps={[
-      {
-        title: 'Paušál',
-        href: '#',
-      },
-      {
-        title: 'Internet',
-        href: '#',
-        isCurrent: true,
-      },
-      {
-        title: 'Televízia',
-        href: '#',
-      },
-      {
-        title: 'Doručenie',
-        href: '#',
-      },
-      {
-        title: 'Platba',
-        href: '#',
-      },
-    ]}
-  />
-</Preview>
-
-## Props
-
-<ComponentDocs title="<Stepbar />" component={Stepbar} />

package/src/components/Sticker/Sticker.mdx

@@ -1,50 +0,0 @@
-import { ComponentDocs, md } from '@lighting-beetle/lighter-styleguide';
-import { Preview } from '../../styleguide/';
-
-import Sticker from './index';
-import { Bar, BarItem } from '../';
-
-# Sticker
-
-<Preview bgTheme="black">
-  <Sticker>Some content inside</Sticker>
-</Preview>
-
-## Variants
-
-### Colors
-
-<Preview bgTheme="black">
-  <Bar>
-    <BarItem>
-      <Sticker>Default sticker</Sticker>
-    </BarItem>
-    <BarItem>
-      <Sticker color="black">Black sticker</Sticker>
-    </BarItem>
-    <BarItem>
-      <Sticker color="orange">Orange sticker</Sticker>
-    </BarItem>
-  </Bar>
-</Preview>
-
-### Sizes
-
-<Preview bgTheme="black">
-  <Bar>
-    <BarItem>
-      <Sticker>Default sticker</Sticker>
-    </BarItem>
-    <BarItem>
-      <Sticker size="small">Small sticker</Sticker>
-    </BarItem>
-  </Bar>
-</Preview>
-
-## Props
-
-<ComponentDocs title="<Sticker />" component={Sticker} />
-
-## Accessibility
-
-Make sure the information in the sticker is presented in logical order with other conent (e.g. if it shows price, make sure it's before the buy button).