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

package/build/components/types/src/components/Hero/HeroPlayground.d.ts

@@ -1,2 +0,0 @@
-import React from "react";
-export declare const HeroPlayground: React.FC;

package/build/components/types/src/components/Megamenu/MegamenuDropdown.d.ts

@@ -1,17 +0,0 @@
-import React from "react";
-interface MegamenuDropdownProps {
-    /** Unique identifier for the dropdown */
-    id: string;
-    /** Title of the dropdown */
-    title: string;
-    /** Icon of the dropdown */
-    icon?: string;
-    /** Additional CSS classes */
-    className?: string;
-    /** Children of the dropdown */
-    children?: React.ReactNode;
-    /** Color scheme of the dropdown */
-    colorScheme?: "light" | "dark";
-}
-declare const MegamenuDropdown: ({ id, title, children, className, icon, colorScheme, }: MegamenuDropdownProps) => React.JSX.Element;
-export default MegamenuDropdown;

package/src/components/Accordion/Accordion.mdx

@@ -1,222 +0,0 @@
-import { CodeBlock, ComponentDocs } from '@lighting-beetle/lighter-styleguide';
-import { loremIpsum } from 'lorem-ipsum';
-
-import { Preview } from '../../styleguide/';
-import BlockAction, {
-  BlockActionControl,
-  BlockActionIndicator,
-} from '../BlockAction';
-import Grid, { GridCol } from '../Grid';
-import Bar, { BarItem } from '../Bar';
-import Icon from '../Icon';
-import Card, { CardSection } from '../Card';
-
-import { Accordion } from './Accordion';
-import { AccordionItem } from './AccordionItem';
-
-export const AccordionHeader = ({ title, currentId, isActive }) => (
-  <BlockAction>
-    <Bar className="accordion__header">
-      <BarItem isFilling>
-        <Grid vAlign="middle">
-          <GridCol size={{ md: 6 }}>
-            <h3 className="mb-small" hasMdxLink={false}>
-              <BlockActionControl>
-                <button
-                  type="button"
-                  aria-expanded={isActive}
-                  className="accordion__button"
-                  aria-controls={`${currentId}-section`}
-                  id={currentId}
-                  data-accordion-toggle
-                >
-                  <span className="accordion__title">{title}</span>
-                </button>
-              </BlockActionControl>
-            </h3>
-            <p className="mb-none">{loremIpsum({ count: 1 })}</p>
-          </GridCol>
-          <GridCol size={{ md: 6 }}>
-            <p className="mb-none">{loremIpsum({ count: 1 })}</p>
-          </GridCol>
-        </Grid>
-      </BarItem>
-      <BarItem>
-        <BlockActionIndicator>
-          <Icon className="accordion__icon" name="chevron-down" size="medium" />
-        </BlockActionIndicator>
-      </BarItem>
-    </Bar>
-  </BlockAction>
-);
-
-# Accordion
-
-Accordion expands and collapses sections of content.
-
-<Preview>
-  <Accordion>
-    <AccordionItem title={loremIpsum({ count: 1 })}>
-      <p>{loremIpsum({ count: 3 })}</p>
-    </AccordionItem>
-    <AccordionItem title={loremIpsum({ count: 1 })}>
-      <p>{loremIpsum({ count: 3 })}</p>
-    </AccordionItem>
-    <AccordionItem title={loremIpsum({ count: 1 })}>
-      <p>{loremIpsum({ count: 3 })}</p>
-    </AccordionItem>
-  </Accordion>
-</Preview>
-
-## Custom heading level
-
-Accordion titles are rendered inside a `h3` element, which can be overriden.
-
-<Preview>
-  <Accordion headingLevel={2}>
-    <AccordionItem title={loremIpsum({ count: 1 })}>
-      <p>{loremIpsum({ count: 3 })}</p>
-    </AccordionItem>
-    <AccordionItem title={loremIpsum({ count: 1 })}>
-      <p>{loremIpsum({ count: 3 })}</p>
-    </AccordionItem>
-    <AccordionItem title={loremIpsum({ count: 1 })}>
-      <p>{loremIpsum({ count: 3 })}</p>
-    </AccordionItem>
-  </Accordion>
-</Preview>
-
-## Size
-
-### Default
-
-<Preview>
-  <Accordion>
-    <AccordionItem title={loremIpsum({ count: 1 })}>
-      <p>{loremIpsum({ count: 3 })}</p>
-    </AccordionItem>
-    <AccordionItem title={loremIpsum({ count: 1 })}>
-      <p>{loremIpsum({ count: 3 })}</p>
-    </AccordionItem>
-    <AccordionItem title={loremIpsum({ count: 1 })}>
-      <p>{loremIpsum({ count: 3 })}</p>
-    </AccordionItem>
-  </Accordion>
-</Preview>
-
-### Large
-
-<Preview>
-  <Accordion size="large">
-    <AccordionItem title={loremIpsum({ count: 1 })}>
-      <p>{loremIpsum({ count: 3 })}</p>
-    </AccordionItem>
-    <AccordionItem title={loremIpsum({ count: 1 })}>
-      <p>{loremIpsum({ count: 3 })}</p>
-    </AccordionItem>
-    <AccordionItem title={loremIpsum({ count: 1 })}>
-      <p>{loremIpsum({ count: 3 })}</p>
-    </AccordionItem>
-  </Accordion>
-</Preview>
-
-## Enclosed accordion
-
-Enclosed accordions are usually placed inside a [Card](/components/card)
-and labelled with a heading element in a separate CardSection.
-
-<Preview bgTheme="gray">
-  <Card>
-    <CardSection>
-      <h2>Enclosed accordion</h2>
-    </CardSection>
-    <Accordion isEnclosed>
-      <AccordionItem title={loremIpsum({ count: 1 })}>
-        <p>{loremIpsum({ count: 3 })}</p>
-      </AccordionItem>
-      <AccordionItem title={loremIpsum({ count: 1 })}>
-        <p>{loremIpsum({ count: 3 })}</p>
-      </AccordionItem>
-      <AccordionItem title={loremIpsum({ count: 1 })}>
-        <p>{loremIpsum({ count: 3 })}</p>
-      </AccordionItem>
-    </Accordion>
-  </Card>
-</Preview>
-
-## Advanced layout using [Block Action](/components/block-action)
-
-<Preview>
-  <Accordion size="large">
-    <AccordionItem
-      title={loremIpsum({ count: 1 })}
-      renderHeader={(title, currentId, isActive) => (
-        <AccordionHeader
-          title={title}
-          currentId={currentId}
-          isActive={isActive}
-        />
-      )}
-    >
-      <p>{loremIpsum({ count: 3 })}</p>
-    </AccordionItem>
-    <AccordionItem
-      title={loremIpsum({ count: 1 })}
-      renderHeader={(title, currentId, isActive) => (
-        <AccordionHeader
-          title={title}
-          currentId={currentId}
-          isActive={isActive}
-        />
-      )}
-    >
-      <p>{loremIpsum({ count: 3 })}</p>
-    </AccordionItem>
-    <AccordionItem
-      title={loremIpsum({ count: 1 })}
-      renderHeader={(title, currentId, isActive) => (
-        <AccordionHeader
-          title={title}
-          currentId={currentId}
-          isActive={isActive}
-        />
-      )}
-    >
-      <p>{loremIpsum({ count: 3 })}</p>
-    </AccordionItem>
-  </Accordion>
-</Preview>
-
-## Props
-
-<ComponentDocs title="<Accordion />" component={Accordion} />
-
-<ComponentDocs title="<AccordionItem />" component={AccordionItem} />
-
-## JS module reference
-
-All elements with `[data-accordion]` will be initialised automatically.
-
-### Custom initialization
-
-```javascript
-const myAccordion = new window.ODS.modules.Accordion(
-  document.getElementById('my-accordion'),
-  config
-);
-```
-
-#### Default config
-
-```javascript
-{
-  buttonSelector: '[data-accordion-toggle]', // element for activating/deactivating accordion sections. also enables roving tabindex navigation.
-}
-```
-
-## Accessibility
-
-Accordion is built according to [WAI-ARIA Authoring Practices 1.1](https://www.w3.org/TR/wai-aria-practices/#accordion).
-Current implementation differs in markup from WAI-ARIA Authoring Practices 1.1 recommended markup. We used unoredered list instead of description list. This shoud not have any implications on accessibility or semantics.
-
-Accordion.static.js provides keyboard navigation via roving tabindex.

package/src/components/Alert/Alert.mdx

@@ -1,141 +0,0 @@
-import { ComponentDocs } from '@lighting-beetle/lighter-styleguide';
-import { Preview } from '../../styleguide/';
-
-import Button from '../Button';
-import LinkDefault from '../Link';
-import IconList from '../IconList';
-
-import Alert from './';
-
-# Alert
-
-If you need to notify user about something specific, or if you want to explain
-something shortly, this is the element to do it.
-
-## Variants
-
-### Title
-
-<Preview>
-  <Alert title="Toto je jednoduchá správa" />
-</Preview>
-
-### Title and Description
-
-<Preview>
-  <Alert
-    title="Dobre vedieť!"
-    description="Popis toho čo by bolo dobré vysvetliť. Aj na viac riadkov. Niekedy veci nie sú samozrejmé, ale ak sa ich pokúsime vysvetliť, tak sa môžme stretnúť s pochopením."
-  />
-</Preview>
-
-### Title and Buttons
-
-<Preview>
-  <Alert
-    title="Prosím prihláste sa."
-    actionButtons={[<Button>Prihlásiť sa</Button>, <Button>Skryť</Button>]}
-  />
-</Preview>
-
-### Title, Description and Buttons
-
-<Preview>
-  <Alert
-    title="Prihlásiť sa je jednoduché a rozumné"
-    description="Napríklad: Prihlásení používatelia vidia krajšie ceny ako neprihlásení. Zváž to, ak máš u nás už účet. Neoľutuješ."
-    actionButtons={<Button>Prihlásiť sa</Button>}
-  />
-</Preview>
-
-## Types
-
-There are four types of alert messages you can choose from.
-
-- [Info](#info)
-- [Success](#success)
-- [Warning](#warning)
-- [Danger](#danger)
-
-### Info
-
-`info` is default type of alert. It's used for simple, not most important,
-messages for the user if something happend.
-
-<Preview>
-  <Alert title="Toto je jednoduchá správa" />
-</Preview>
-
-### Success
-
-Best feeling is when something went well. You can notify the user about successful
-things with `success` type.
-
-<Preview>
-  <Alert type="success" title="Výborne. Všetko prebehlo rýchlo a hladko" />
-</Preview>
-
-### Warning
-
-If you need to warn user about anything use `warning` type.
-
-<Preview>
-  <Alert type="warning" title="Na toto si daj pozor!" />
-</Preview>
-
-### Danger
-
-If warning is not enought and you need to show error message, use `danger` type.
-
-<Preview>
-  <Alert type="danger" title="Stala sa chyba" />
-</Preview>
-
-## Custom title renderer
-
-Alert spacing is quite strict and works 99% of time. In rare cases, the title requires a little more space to breathe. To achieve that, you can render a custom title using the `renderTitle` prop.
-
-<Preview>
-  <Alert
-    title="Prihlásiť sa je jednoduché a rozumné"
-    renderTitle={props => (
-      <h3 className="alert__title mb-medium">{props.title}</h3>
-    )}
-    description={
-      <IconList
-        className="reset-font-weight"
-        items={[
-          {
-            icon: 'tick',
-            content: 'Bonus na nové zariadenie až do 440 €',
-          },
-          {
-            icon: 'tick',
-            content: 'Bezúročné splátky zariadenia',
-          },
-          {
-            icon: 'tick',
-            content: 'Doručenie zadarmo',
-          },
-        ]}
-      />
-    }
-    actionButtons={<Button>Prihlásiť sa</Button>}
-  />
-</Preview>
-
-## Full width
-
-If you need full width Alert, you can use `isFullWidth` prop. Max width on text remamains the same, because of readability.
-
-<Preview>
-  <Alert
-    isFullWidth
-    title="Dobre vedieť!"
-    description="Popis toho čo by bolo dobré vysvetliť. Aj na viac riadkov. Niekedy veci nie sú samozrejmé, ale ak sa ich pokúsime vysvetliť, tak sa môžme stretnúť s pochopením."
-  />
-</Preview>
-
-## Props
-
-<ComponentDocs title="<Alert />" component={Alert} />

package/src/components/Bar/Bar.mdx

@@ -1,203 +0,0 @@
-import { Code, ComponentDocs, md } from '@lighting-beetle/lighter-styleguide';
-
-import { Preview } from '../../styleguide/';
-
-import Bar, { BarItem, BarBreak } from './index';
-
-export const capitalize = s => s.charAt(0).toUpperCase() + s.slice(1);
-export const spaces = ['small', 'default', 'large'];
-export const alignments = ['start', 'center', 'end'];
-
-# Bar
-
-We use bar to create horizontal layouts with predefined spacings between items.
-
-<Preview>
-  <Bar tag="ul">
-    <BarItem tag="li">
-      <div className="l-debug">Item</div>
-    </BarItem>
-    <BarItem tag="li" isFilling>
-      <div className="l-debug">I'm filling good</div>
-    </BarItem>
-    <BarItem tag="li">
-      <div className="l-debug">Item</div>
-    </BarItem>
-  </Bar>
-</Preview>
-
-## Spacing
-
-If you need to adjust space widths between items, it can be done by adjusted with
-`.bar--space-small` and `.bar--space-large` classes.
-
-<Preview>
-  {spaces.map(space => (
-    <Bar key={space} space={space === 'default' ? undefined : space}>
-      <BarItem>
-        <div className="l-debug">space</div>
-      </BarItem>
-      <BarItem>
-        <div className="l-debug">set</div>
-      </BarItem>
-      <BarItem>
-        <div className="l-debug">to</div>
-      </BarItem>
-      <BarItem>
-        <div className="l-debug">
-          <strong>{space}</strong>
-        </div>
-      </BarItem>
-    </Bar>
-  ))}
-</Preview>
-
-## Vertical alignment
-
-You have three options to vertically align all items of the `.bar` component.
-You can use a standard `.align-items-start`, `.align-items-center`,
-`.align-items-end` known as [vertical utility classes](/utilities/flex-alignment#vertical).
-
-<Preview>
-  {alignments.map(align => (
-    <Bar key={align} align={align}>
-      <BarItem>
-        <div className="l-debug">
-          <strong>{capitalize(align)}</strong> alignment
-        </div>
-      </BarItem>
-      <BarItem isFilling>
-        <div className="l-debug">
-          <p>
-            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eaque,
-            ipsum deleniti quia iure similique mollitia quam excepturi
-            laudantium architecto, aperiam magnam exercitationem magni commodi
-            laborum molestiae dolore. Corrupti, officia perferendis?
-          </p>
-        </div>
-      </BarItem>
-      <BarItem>
-        <div className="l-debug">Item</div>
-      </BarItem>
-    </Bar>
-  ))}
-</Preview>
-
-## Vertical bar
-
-Bar can be use to stack elements vertically with `.bar--vertical` class.
-
-<Preview>
-  <Bar isVertical>
-    <BarItem>
-      <div className="l-debug">Item</div>
-    </BarItem>
-    <BarItem isFilling>
-      <div className="l-debug">
-        <p>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi,
-          incidunt veniam minima quasi eligendi amet ullam explicabo laborum
-          aperiam accusantium hic laboriosam doloremque expedita odit ex
-          consequatur voluptas aliquid soluta.
-        </p>
-      </div>
-    </BarItem>
-    <BarItem>
-      <div className="l-debug">Item</div>
-    </BarItem>
-  </Bar>
-</Preview>
-
-## Item filling the space
-
-If one or more items need to fill maximum available space available you can use
-`.bar__item--fill` class to do that.
-
-<Preview>
-  <Bar>
-    <BarItem>
-      <div className="l-debug">Item</div>
-    </BarItem>
-    <BarItem isFilling>
-      <div className="l-debug">I'm filling good</div>
-    </BarItem>
-    <BarItem>
-      <div className="l-debug">Third item</div>
-    </BarItem>
-  </Bar>
-</Preview>
-
-## Item shrinking to fit
-
-If you need an item to shrink where there is lack of space, there is a
-`.bar__item--shrink` class to do that.
-
-<Preview>
-  <Bar>
-    <BarItem>
-      <div className="l-debug">Item</div>
-    </BarItem>
-    <BarItem canShrink>
-      <div className="l-debug">
-        <p>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium
-          deleniti dignissimos recusandae nesciunt perferendis cupiditate
-          perspiciatis harum odit eaque aspernatur dolorem rerum ratione
-          repudiandae qui alias assumenda saepe, atque reiciendis?
-        </p>
-      </div>
-    </BarItem>
-    <BarItem>
-      <div className="l-debug">Third item</div>
-    </BarItem>
-  </Bar>
-</Preview>
-
-## Bar nowrap
-
-`.bar--nowrap` is used to **force bar items to stay in one line** at all times.
-
-<Preview>
-  <Bar canWrap={false}>
-    {[...Array(20)].map((_, i) => (
-      <BarItem key={i.toString()}>
-        <div className="l-debug">Item</div>
-      </BarItem>
-    ))}
-  </Bar>
-</Preview>
-
-## Bar break
-
-`.bar__break` breaks horizontal bar into multiple lines.
-
-Pro tip: use [visibility classes](/utilities/visibility) to show
-and hide the break to adjust layout for different breakpoints.
-
-<Preview>
-  <Bar>
-    <BarItem>
-      <div className="l-debug">Item</div>
-    </BarItem>
-    <BarBreak />
-    <BarItem>
-      <div className="l-debug">Item</div>
-    </BarItem>
-  </Bar>
-</Preview>
-
-## Props
-
-<ComponentDocs title="<Bar />" component={Bar} />
-
-<ComponentDocs title="<BarItem />" component={BarItem} />
-
-## Accessibility
-
-The Bar component is primarily used for layout, and as such, should not have any
-impact on accessibility.
-
-Beware however when you are using it for layouts inside
-[inline elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements)
-such as form labels. `<Bar />` and `<BarItem />` benefit from the tag prop to
-render any html element you want it to.