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

package/src/components/PromotionCard/PromotionCard.mdx

@@ -1,191 +0,0 @@
-import { ComponentDocs } from '@lighting-beetle/lighter-styleguide';
-import Preview from '../../styleguide/Preview';
-import Image from '../../components/Image';
-
-import PromotionCard, {
-  PromotionCardContent,
-  PromotionCardImageWrapper,
-  PromotionCardSection,
-  PromotionCardTitle,
-} from './';
-import { Button } from '../index';
-import Divider from '../Divider';
-import Pagination from '../Pagination';
-
-import phones from '../../assets/images/developers/phones.png';
-import Grid, { GridCol } from '../Grid';
-
-export const getItems = (count = 10, current = Math.ceil(count / 2)) =>
-  [
-    ...Array(count)
-      .fill('')
-      .map((_, i) => i + 1),
-  ].map(n => ({
-    label: `${n}`,
-    ariaLabel: `Strana ${n}`,
-    href: `/?page=${n}`,
-    ...(current === n ? { isActive: true } : {}),
-  }));
-
-export const label = 'Výber stránok';
-
-export const DefaultPromotionsCard = () => (
-  <PromotionCard>
-    <PromotionCardSection>
-      <PromotionCardContent>
-        <PromotionCardTitle>
-          <h2>Online ochrana pre váš digitálny svet</h2>
-        </PromotionCardTitle>
-        <p className="mb-none">
-          Orange je tu, aby ste mohli používať internet bezpečne a bez obáv.
-        </p>
-      </PromotionCardContent>
-      <Button href="#">Zistiť viac</Button>
-    </PromotionCardSection>
-    <PromotionCardImageWrapper>
-      <Image src={phones} alt="iPhone image" />
-    </PromotionCardImageWrapper>
-  </PromotionCard>
-);
-
-export const DarkPromotionsCard = () => (
-  <PromotionCard colorScheme="dark">
-    <PromotionCardSection>
-      <PromotionCardContent>
-        <PromotionCardTitle>
-          <h2>Online ochrana pre váš digitálny svet</h2>
-        </PromotionCardTitle>
-        <p className="mb-none">
-          Orange je tu, aby ste mohli používať internet bezpečne a bez obáv.
-        </p>
-      </PromotionCardContent>
-      <Button href="#">Zistiť viac</Button>
-    </PromotionCardSection>
-    <PromotionCardImageWrapper>
-      <Image src={phones} alt="iPhone image" />
-    </PromotionCardImageWrapper>
-  </PromotionCard>
-);
-
-export const InversePromotionsCard = () => (
-  <PromotionCard colorScheme="dark">
-    <PromotionCardSection isInverse>
-      <PromotionCardContent>
-        <PromotionCardTitle>
-          <h2>Online ochrana pre váš digitálny svet</h2>
-        </PromotionCardTitle>
-        <p className="mb-none">
-          Orange je tu, aby ste mohli používať internet bezpečne a bez obáv.
-        </p>
-      </PromotionCardContent>
-      <Button href="#">Zistiť viac</Button>
-    </PromotionCardSection>
-    <PromotionCardImageWrapper>
-      <Image src={phones} alt="iPhone image" />
-    </PromotionCardImageWrapper>
-  </PromotionCard>
-);
-
-# Promotion card
-
-Karta, ktorá propaguje produkt alebo službu. Komponent Promotion card je adaptáciou [Card komponentu](/components/card).
-
-## Príklady
-
-### Základný
-
-<Preview>
-  <Grid>
-    <GridCol size={{ default: 12, xxl: 8 }}>
-      <DefaultPromotionsCard />
-    </GridCol>
-  </Grid>
-</Preview>
-
-### Tmavý variant
-
-<Preview>
-  <Grid>
-    <GridCol size={{ default: 12, xxl: 8 }}>
-      <DarkPromotionsCard />
-    </GridCol>
-  </Grid>
-</Preview>
-
-### Inverzný variant
-
-<Preview>
-  <Grid>
-    <GridCol size={{ default: 12, xxl: 8 }}>
-      <InversePromotionsCard />
-    </GridCol>
-  </Grid>
-</Preview>
-
-### Viacero kariet
-
-<Preview>
-  <Grid>
-    <GridCol size={{ default: 12, xxl: 8 }}>
-      <DefaultPromotionsCard />
-      <DarkPromotionsCard />
-      <DefaultPromotionsCard />
-    </GridCol>
-  </Grid>
-</Preview>
-
-## Použitie
-
-### Grid
-
-Šírka karty na väčších obrazovkách je obmedzená gridom. Pozri príklad kódu nižšie:
-
-<Preview>
-  <Grid>
-    <GridCol size={{ default: 12, xxl: 8 }}>
-      <p className="mb-small">
-        <b>Nové</b>
-      </p>
-      <Divider
-        thinLine
-        className="pr-none pb-none pl-none pt-none mb-medium mb-md-none"
-      />
-      <DefaultPromotionsCard />
-      <p className="mb-small">
-        <b>Staršie</b>
-      </p>
-      <Divider
-        thinLine
-        className="pr-none pb-none pl-none pt-none mb-medium mb-md-none"
-      />
-      <DarkPromotionsCard />
-      <DefaultPromotionsCard />
-      <InversePromotionsCard />
-      <Pagination label={label} items={getItems(10, 1)} isCompact />
-    </GridCol>
-  </Grid>
-</Preview>
-
-## Props
-
-<ComponentDocs title="<PromotionCard />" component={PromotionCard} />
-
-<ComponentDocs
-  title="<PromotionCardSection />"
-  component={PromotionCardSection}
-/>
-
-<ComponentDocs
-  title="<PromotionCardContent />"
-  component={PromotionCardContent}
-/>
-
-<ComponentDocs
-  title="<PromotionCardTitle />"
-  component={PromotionCardTitle}
-/>
-
-<ComponentDocs
-  title="<PromotionCardImageWrapper />"
-  component={PromotionCardImageWrapper}
-/>

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