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

package/src/components/BlockAction/BlockAction.mdx

@@ -1,244 +0,0 @@
-import { useRef, useEffect } from 'react';
-import { ComponentDocs, DocsTable } from '@lighting-beetle/lighter-styleguide';
-import { Preview } from '../../styleguide/';
-
-import { useStatic } from '../../utils/hooks';
-import Toggle from '../../scripts/modules/Toggle';
-import Accordion, { AccordionItem } from '../Accordion';
-import Bar, { BarItem } from '../Bar';
-import Button from '../Button';
-import Card, { CardSection } from '../Card';
-import Icon from '../Icon';
-import Link from '../Link';
-import BlockAction, {
-  BlockActionControl,
-  BlockActionOverride,
-  BlockActionIndicator,
-} from './';
-
-export const ToggleButton = props => {
-  let [buttonRef] = useStatic(Toggle);
-  return <button ref={buttonRef} {...props} />;
-};
-
-# BlockAction
-
-Utility component that makes whole blocks clickable.
-
-Although it is possible to wrap even complex layouts in an `<a />` and even use flexbox layout in `<button />`s, this results in verbose screenreader output. BlockAction solves this issue and even allows for an override - a separate clickable element inside a clickable block, and an indicator - a non-interactive element that can indicate the block action is being hovered.
-
-## Anatomy
-
-BlockAction is a utility component. It does not render any elements. It's sole purpose is to assign classNames to it's children components/elements.
-
-- **BlockAction** / `.block-action`<br />
-  Wrapper around the whole clickable block. Enables positioning.
-  - **BlockActionControl** / `.block-action__control`<br />
-    Interactive element (button or anchor) that receives a click event fired anywhere inside BlockAction. It has a pseudo element that spans the whole BlockAction wrapper. **Only one** control element allowed per BlockAction.
-  - **BlockActionOverride** / `.block-action__override`<br />
-    Another interactive element that can be clicked without firing a click event on BlockActionControl. This is achieved by it's own stacking context. BlockAction can contain multiple overrides (max. 2 recommended).
-  - **BlockActionIndicator** / `.block-action__indicator`<br />
-    Shows basic hover styles, indicates that the control element is heing hovered. Usually an [Icon](/components/icon).
-
-## Examples
-
-### Card
-
-The following example shows a BlockAction [Card](/components/card). It's Control element is a [Link](/components/link) inside a heading. When hovering over the Card, the cursor changes to pointer and the Link element enters it's hover state. This is done via a pseudo element that spans the whole BlockAction wrapper. The Override element can be interated with separately as it has it's own staciking context. Clicking it does not activate the Control element.
-
-<Preview>
-  <BlockAction>
-    <Card hasBorder>
-      <CardSection>
-        <h2 hasMdxLink={false}>
-          <Bar tag="span">
-            <BarItem isFilling tag="span">
-              <BlockActionControl>
-                <Link href="#">Control anchor</Link>
-              </BlockActionControl>
-            </BarItem>
-            <BarItem tag="span">
-              <BlockActionIndicator>
-                <Icon name="chevron-right" size="medium" />
-              </BlockActionIndicator>
-            </BarItem>
-          </Bar>
-        </h2>
-        <p>Aenean lacinia bibendum nulla sed consectetur.</p>
-        <BlockActionOverride>
-          <Button>Override button</Button>
-        </BlockActionOverride>
-      </CardSection>
-    </Card>
-  </BlockAction>
-</Preview>
-
-### Accordion
-
-The following example shows an [Accordion](/components/accordion) with a [Button](/components/button) performing a separate action. It's Control element is an accordion button, which serves for opening and closing the accordion item and is placed inside a [Bar](/components/bar) layout. Since the accordion icon sits outsite the accordion button to make room for the override button, it's active class must be manually controlled using [Toggle](/js-modules/toggle) via `[data-toggle]` attribute. The icon is also being used as an Indicator element which changes the icon color when the Control element is being hovered.
-
-<Preview>
-  <Accordion>
-    {[1, 2, 3].map(item => (
-      <AccordionItem
-        key={item.toString()}
-        title={`Block action accordion ${item}`}
-        renderHeader={(title, id) => (
-          <BlockAction>
-            <Bar canWrap={false} className="accordion__header">
-              <BarItem isFilling>
-                <h3 className="accordion__header" hasMdxLink={false}>
-                  <BlockActionControl>
-                    <ToggleButton
-                      type="button"
-                      aria-expanded="false"
-                      className={`accordion__button`}
-                      aria-controls={`${id}-section`}
-                      id={id}
-                      data-accordion-toggle
-                      data-toggle={JSON.stringify([
-                        {
-                          target: `#manual-accordion-icon-${item}`,
-                          attribute: 'class',
-                          value: 'is-active',
-                        },
-                      ])}
-                    >
-                      <span className="accordion__title">{title}</span>
-                    </ToggleButton>
-                  </BlockActionControl>
-                </h3>
-              </BarItem>
-              <BarItem>
-                <BlockActionOverride>
-                  <Button size="small">Override {item}</Button>
-                </BlockActionOverride>
-              </BarItem>
-              <BarItem>
-                <BlockActionIndicator>
-                  <Icon
-                    id={`manual-accordion-icon-${item}`}
-                    className={`accordion__icon`}
-                    name="chevron-down"
-                    size="medium"
-                  />
-                </BlockActionIndicator>
-              </BarItem>
-            </Bar>
-          </BlockAction>
-        )}
-      >
-        <p>
-          Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
-          ridiculus mus. Curabitur blandit tempus porttitor.
-        </p>
-      </AccordionItem>
-    ))}
-  </Accordion>
-</Preview>
-
-### Color reset
-
-Use class `.block-action__indicator--color-reset` if you don't want text color change when BlockAction is being hovered.
-
-<Preview>
-  <BlockAction>
-    <BlockActionIndicator className="block-action__indicator--color-reset">
-      <div className="card border border--gray border-radius--medium">
-        <div className="card__section">
-          <BlockActionControl>
-            <Button>Control</Button>
-          </BlockActionControl>
-          <p>With class .block-action__indicator--color-reset</p>
-        </div>
-      </div>
-    </BlockActionIndicator>
-  </BlockAction>
-</Preview>
-
-## JS module reference
-
-Javascript is required when using an Indicator element.
-
-All elements with `[data-block-action]` attribute are initialized automatically.
-
-When a Block action contains a control and at least one indicator, the JS module adds mouseenter and mouseleave listeners to the control element and manages toggling a classname on the indicator elements.
-
-### Custom init
-
-```js
-const instance = new window.ODS.modules.BlockAction(
-  document.getElementByUd('my-block-action'),
-  config
-);
-```
-
-### Config
-
-<DocsTable
-  data={[
-    {
-      prop: 'controlSelector',
-      type: 'string',
-      default: '.block-action__control',
-      description: 'Selector for looking up the control element',
-    },
-    {
-      prop: 'indicatorSelector',
-      type: 'string',
-      default: '.block-action__indicator',
-      description: 'Selector for looking up indicator element(s).',
-    },
-    {
-      prop: 'activeClass',
-      type: 'string',
-      default: 'is-indicating',
-      description:
-        'CSS class name toggled on indicator elements(s) when the control element is being hovered.',
-    },
-  ]}
-/>
-
-### Methods
-
-```js
-const instance = document.querySelector(elementSelector).ODS_BlockAction;
-instance.method();
-```
-
-<DocsTable
-  data={[
-    {
-      prop: 'init',
-      type: 'func',
-      default: '() => {}',
-      description:
-        'Initialize an instance. Called automatically on `new BlockAction(el, config)`',
-    },
-    {
-      prop: 'destroy',
-      type: 'func',
-      default: '() => {}',
-      description: 'Destroy the instance - removes all listeners',
-    },
-    {
-      prop: 'update',
-      type: 'func',
-      default: '() => {}',
-      description: 'Destroys the instance and calls a fresh init().',
-    },
-  ]}
-/>
-
-## Props
-
-All components clone their children and assign them the required classNames.
-
-<ComponentDocs component={BlockAction} />
-<ComponentDocs component={BlockActionControl} />
-<ComponentDocs component={BlockActionIndicator} />
-<ComponentDocs component={BlockActionOverride} />
-
-## Notes
-
-Based on [Inclusive Components - Cards](https://inclusive-components.design/cards/)

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