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

package/src/components/Progress/Progress.mdx

@@ -1,119 +0,0 @@
-import { ComponentDocs } from '@lighting-beetle/lighter-styleguide';
-import Preview from '../../styleguide/Preview';
-
-import Progress from './';
-import Bar, { BarItem } from '../Bar';
-import Icon from '../Icon';
-import { InfoTooltip } from '../Tooltip';
-
-# Progress
-
-Horizontal indicator of a task progress or scalar value.
-
-## Label and value
-
-Authors are required to provide a clear, explanatory Label and textual Value to ensure all users can access the displayed information.
-
-<Preview>
-  <Progress
-    label="Zdieľanie dát: zostavajuce predplatené"
-    value="4.1 GB / 7.9 GB"
-    width={0.8}
-  />
-</Preview>
-
-## Variants
-
-<Preview>
-  {['orange', 'green', 'red', 'blue', 'yellow'].map(color => {
-    const randomWidth = Math.round(Math.random() * 10000) / 10000;
-    return (
-      <Progress
-        label="Example label"
-        key={color}
-        color={color}
-        width={randomWidth}
-        value={`${randomWidth} / 1`}
-      />
-    );
-  })}
-</Preview>
-
-## Complex description of Progress bar
-
-<Preview>
-  <Progress
-    label={
-      <Bar className="justify-content-space-between mb-none" space="small">
-        <BarItem canShrink>
-          <Bar align="start" className="mb-none" space="small" canWrap={false}>
-            <BarItem>
-              <Icon name="data-traffic" />
-            </BarItem>
-            <BarItem canShrink>
-              <p className="text-nowrap mb-none">
-                <span className="text-wrap">Label with icon and tooltip</span>
-                &nbsp;
-                <InfoTooltip>
-                  Tooltip should always be next to label, so we use combination
-                  of .text-nowrap and .text-wrap classes.
-                </InfoTooltip>
-              </p>
-            </BarItem>
-          </Bar>
-        </BarItem>
-        <BarItem>
-          <Bar className="mb-none" space="small">
-            <BarItem>
-              <p className="reset-font-weight mb-none">breaks to left</p>
-            </BarItem>
-            <BarItem>
-              <Icon color="danger" name="error-severe" size="medium" />
-            </BarItem>
-          </Bar>
-        </BarItem>
-      </Bar>
-    }
-    color="red"
-    width={0.4}
-    value={
-      <>
-        <p className="mb-small">
-          <span className="reset-font-weight">Avaible:</span> 4
-          <span className="reset-font-weight"> / 8 GB</span>
-        </p>
-        <Bar align="start" className="mb-none" space="small" canWrap={false}>
-          <BarItem>
-            <Icon name="info" />
-          </BarItem>
-          <BarItem canShrink>
-            <p className="mb-none">
-              <span className="reset-font-weight">
-                Yes we need to use another bar element in label, so icon and
-                text stays on same line. Also this text in
-              </span>{' '}
-              paragraph{' '}
-              <span className="reset-font-weight">
-                {' '}
-                so it has set max-width. If you have label with longer text, you
-                should also use paragraph in there. And one last last think - yes
-                we need to have that many bars in label, so the text doesnt break
-                to newline without icon.
-              </span>
-            </p>
-          </BarItem>
-        </Bar>
-      </>
-    }
-  />
-</Preview>
-
-## Accessibility
-
-Progress component can be used with `role="progressbar"` when it's needed to "indicate that the user's request has been received and the application is making progress toward completing the requested action." [role="progressbar"](https://www.w3.org/TR/wai-aria-1.1/#progressbar).
-
-It's not recommended to use `role="meter"` when the component should represent a scalar value as it's screenreader support is poor.
-
-Since label and textual value are required when using this component, all relevant infomation is provided in an understandable way, not relying on visual representation only. [Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.](https://www.w3.org/TR/WCAG21/#use-of-color)
-
-<ComponentDocs title="<Progress />" component={Progress} />

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