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

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.

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