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

package/src/components/Forms/TextArea/TextArea.mdx

@@ -1,109 +0,0 @@
-import { Code, ComponentDocs } from '@lighting-beetle/lighter-styleguide';
-
-import { Preview } from '../../../styleguide/';
-
-import Field from '../Field';
-import TextArea from './';
-
-# TextArea
-
-Textarea field allows users to enter and edit long textual data.
-
-<Field control={{ type: 'textarea' }} label="Example textarea" />
-
-## TextArea Field
-
-A TextArea Field consists of:
-
-1. [**Label**](/components/forms/captions/label) (mandatory)
-2. [**Tooltip**](/components/fomrs/captions/tooltip) (optional)
-3. [**Hint**](/components/forms/captions/hing) (optional)
-4. **TextArea** control itself
-5. [**Messages**](/components/fomrs/captions/messge) (optional)
-
-<Preview>
-  <Field
-    control={{ type: 'textarea' }}
-    label="Example textarea"
-    hint="Hint on what to fill in"
-    messages={[{ type: 'warning', text: 'A validation message' }]}
-  />
-</Preview>
-
-## Control sizes
-
-### Large
-
-<Preview>
-  <TextArea id="size-large" size="large" />
-</Preview>
-
-## Control widths
-
-Control width should correspond with the lenght of the expected answer. Controls always provide horizontal space for [success indicator](#success).
-
-See [fieldset documentation](/components/forms/fieldset) for specific usage
-
-export const widths = {
-  default: {
-    value: 'Default width',
-  },
-  fullwidth: {
-    value: 'Full width input value on the full width of the screen',
-  },
-};
-
-<React.Fragment>
-  {Object.entries(widths).map(([width, { value, type }]) => (
-    <React.Fragment key={width}>
-      <h3 className="mb-none">{width[0].toUpperCase() + width.slice(1)}</h3>
-      <Preview>
-        <TextArea id={width} width={width} defaultValue={value} type={type} />
-      </Preview>
-    </React.Fragment>
-  ))}
-</React.Fragment>
-
-## Control states
-
-### Default
-
-<Preview>
-  <TextArea id="input-example" placeholder="Placeholder text" />
-</Preview>
-
-### Disabled
-
-Cannot be focused, does not receive `click` events and is not submitted with the form. Avoid if possible. Disabled fields are not announced by screenreaders.
-
-<Preview>
-  <TextArea id="disabled" isDisabled />
-</Preview>
-
-### Read only
-
-User cannot change the value of the input, but it remains focusable and is submitted with the form.
-
-<Preview>
-  <TextArea id="readonly" isReadonly />
-</Preview>
-
-### Invalid
-
-Field did no pass validation. Must be accompanied by a meaningfull [Error message](/components/forms/captions/message#error).
-
-<Preview>
-  <TextArea id="invalid" isInvalid />
-</Preview>
-
-### Success
-
-Filed passed inline validation and the user is encouraged to continue.
-
-<Preview>
-  <TextArea id="valid" isValid />
-</Preview>
-
-## Props
-
-<ComponentDocs title="<TextArea />" component={TextArea} />

package/src/components/Forms/TextInput/TextInput.mdx

@@ -1,153 +0,0 @@
-import { Code, ComponentDocs } from '@lighting-beetle/lighter-styleguide';
-
-import { Preview } from '../../../styleguide/';
-
-import Field from '../Field';
-import TextInput from './';
-
-# TextInput
-
-Input field allows users to enter and edit textual data.
-
-<Field control={{ type: 'text' }} label="Example text input" />
-
-## TextInput Field
-
-A TextInput Field consists of:
-
-1. [**Label**](/components/forms/captions/label) (mandatory)
-2. [**Tooltip**](/components/fomrs/captions/tooltip) (optional)
-3. [**Hint**](/components/forms/captions/hing) (optional)
-4. **TextInput** control itself
-5. [**Messages**](/components/fomrs/captions/messge) (optional)
-
-<Preview>
-  <Field
-    control={{ type: 'text' }}
-    label="Example text input"
-    hint="Hint on what to fill in"
-    messages={[{ type: 'warning', text: 'A validation message' }]}
-  />
-</Preview>
-
-## Control Types
-
-Although the **input element** `type` attribute can receive [various values](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#<TextInput>_types), the **TextInput component** is meant for direct text entry and only supports the following types:
-
-- email
-- hidden
-- password
-- search
-- tel
-- text
-- url
-
-<Preview>
-  <TextInput id="type-email" htmlType="email" defaultValue="email" />
-  <br />
-  <TextInput id="type-hidden" htmlType="hidden" defaultValue="hidden" />
-  <br />
-  <TextInput id="type-password" htmlType="password" defaultValue="password" />
-  <br />
-  <TextInput id="type-search" htmlType="search" defaultValue="search" />
-  <br />
-  <TextInput id="type-tel" htmlType="tel" defaultValue="tel" />
-  <br />
-  <TextInput id="type-text" htmlType="text" defaultValue="text" />
-  <br />
-  <TextInput id="type-url" htmlType="url" defaultValue="url" />
-  <br />
-</Preview>
-
-## Recommendations
-
-- Match virtual keyboard with expected data.
-  - `type="email"` when asking for an email address puts the @ sign directly on the main keyboard.
-  - `pattern="[0-9]*" inputmode="numeric"` attributes opens numeric keyboard. avoid using `type="number"` when the requested information is not a pure number that can be incremented (e.g. phone number, ZIP code, etc.). [Why not to use input type="number"](https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-type-for-numbers/)
-
-## Control sizes
-
-### Large
-
-<Preview>
-  <TextInput id="size-large" size="large" />
-</Preview>
-
-## Control widths
-
-Control width should correspond with the lenght of the expected answer. Controls always provide horizontal space for [success indicator](#success).
-
-See [fieldset documentation](/components/forms/fieldset) for specific usage
-
-export const widths = {
-  '3ch': {
-    value: '3ch',
-  },
-  '8ch': {
-    value: '8 chars',
-  },
-  '12ch': {
-    value: '12 characters',
-  },
-  default: {
-    value: 'Default width',
-  },
-  fullwidth: {
-    value: 'Full width input value on the full width of the screen',
-  },
-};
-
-<React.Fragment>
-  {Object.entries(widths).map(([width, { value, type }]) => (
-    <React.Fragment key={width}>
-      <h3 className="mb-none">{width[0].toUpperCase() + width.slice(1)}</h3>
-      <Preview>
-        <TextInput id={width} width={width} defaultValue={value} type={type} />
-      </Preview>
-    </React.Fragment>
-  ))}
-</React.Fragment>
-
-## Control states
-
-### Default
-
-<Preview>
-  <TextInput id="input-example" placeholder="Placeholder text" />
-</Preview>
-
-### Disabled
-
-Cannot be focused, does not receive `click` events and is not submitted with the form. Avoid if possible. Disabled fields are not announced by screenreaders.
-
-<Preview>
-  <TextInput id="disabled" isDisabled />
-</Preview>
-
-### Read only
-
-User cannot change the value of the input, but it remains focusable and is submitted with the form.
-
-<Preview>
-  <TextInput id="readonly" isReadonly />
-</Preview>
-
-### Invalid
-
-Field did no pass validation. Must be accompanied by a meaningfull [Error message](/components/forms/captions/message#error).
-
-<Preview>
-  <TextInput id="invalid" isInvalid />
-</Preview>
-
-### Success
-
-Filed passed inline validation and the user is encouraged to continue.
-
-<Preview>
-  <TextInput id="valid" isValid />
-</Preview>
-
-## Props
-
-<ComponentDocs title="<TextInput />" component={TextInput} />

package/src/components/Gauge/Gauge.mdx

@@ -1,35 +0,0 @@
-import { ComponentDocs } from '@lighting-beetle/lighter-styleguide';
-import { Code, Preview } from '../../styleguide/';
-import Gauge from './';
-import GaugeMaker from './GaugeMaker';
-
-# Gauge
-
-Stylized display of a scalar value within a known range. Often used to compare a single, important value between multiple product versions.
-
-The gauge consists of:
-
-- **Dial**: SVG element, the face of the gauge meter
-- **Display**: Gray denominator of the maximum value
-- **Indicator**: Black "needle" which shows the value
-- **Text**: Textual representation of the value
-
-<Preview>
-  <Gauge percentage={70}>
-    <div className="h1 mb-xsmall">500</div>
-    <div className="bold">
-      Mbit/s <br />
-      sťahovanie
-    </div>
-  </Gauge>
-</Preview>
-
-## Calculating your svg values
-
-Gauge presentaion is done using `svg`. Due to visual complexity, math is needed to display each value correctly. Use the widget below to set your value and copy the code.
-
-<GaugeMaker />
-
-## Props
-
-<ComponentDocs component={Gauge} />

package/src/components/Grid/Grid.mdx

@@ -1,320 +0,0 @@
-import { ComponentDocs, Note, md } from "@lighting-beetle/lighter-styleguide";
-import { Preview } from "../../styleguide/";
-import { Grid, GridCol } from "./index";
-import Table from "../Table";
-import Section from "../Section";
-import { Image } from "../Image";
-import { breakpointsTableData } from "../../docs/breakpoints.mdx";
-import {
-  ContainerHorizontal,
-  ContainerVertical,
-  ColumnVertical,
-} from "../../docs/utils.flexalignment.mdx";
-import spaces from "../../styles/export/space.scss";
-
-# Grid
-
-The main function of the grid is to distribute items to rows and columns.
-
-Our grid has a maximum of 12 columns. Each column can have a [custom size](#columns)
-defined by [breakpoints](#breakpoints).
-
-## Breakpoints
-
-Grid uses the mobile-first definition of [breakpoints](/fundamentals/breakpoints), which means that smallest
-breakpoint defines default size.
-
-## Columns
-
-You can have a maximum of 12 columns in one row. A default column takes all the available
-space.
-
-<Preview className="preview-grid">
-  <Grid>
-    <GridCol>
-      <code>(default) 12</code>
-    </GridCol>
-    <GridCol size={6}>
-      <code>6</code>
-    </GridCol>
-  </Grid>
-  <hr />
-  <Grid>
-    <GridCol size="auto">
-      <code>auto</code>
-    </GridCol>
-    <GridCol size={4}>
-      <code>4</code>
-    </GridCol>
-    <GridCol size={6}>
-      <code>6</code>
-    </GridCol>
-  </Grid>
-  <hr />
-  <Grid>
-    <GridCol size="fill">
-      <code>fill</code>
-    </GridCol>
-    <GridCol size={4}>
-      <code>4</code>
-    </GridCol>
-    <GridCol size={6}>
-      <code>6</code>
-    </GridCol>
-  </Grid>
-  <hr />
-  <Grid>
-    <GridCol size="shrink">
-      <code>shrink</code>
-    </GridCol>
-    <GridCol size={6}>
-      <code>6</code>
-    </GridCol>
-  </Grid>
-</Preview>
-
-### Resizing
-
-There are two ways of resizing a column.
-
-1. `.grid__col--[size]` where `size` is a number 1-12 or one of `[shrink/fill/auto]`
-2. `.grid__col--[breakpoint]-[size]` where `breakpoint` is used as a **minimum display width** to change the column size
-
-<Note title="XS breakpoint size">
-  <p className="mb-none">
-    There is <strong>no need to specify the xs breakpoint size</strong> because
-    it's a default by definition of mobile-first philosophy.
-  </p>
-</Note>
-
-### What is shrink/fill/auto?
-
-- `shrink` column takes **the least amount of space** available
-- `fill` column takes **all the space** available and **does not shrink** to accomodate other columns
-- `auto` takes **all available space**, also tries to **shrink** to fit into one row. This is the **same as** `.grid__col`.
-
-<Preview className="preview-grid">
-  <Grid>
-    <GridCol>
-      <code>(default) 12</code>
-    </GridCol>
-    <GridCol size={4}>
-      <code>4</code>
-    </GridCol>
-    <GridCol size="shrink">
-      <code>shrink</code>
-    </GridCol>
-    <GridCol size="fill">
-      <code>fill</code>
-    </GridCol>
-    <GridCol size="auto">
-      <code>auto</code>
-      Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cum
-      sociis natoque penatibus et magnis dis parturient montes, nascetur
-      ridiculus mus.
-    </GridCol>
-  </Grid>
-</Preview>
-
-### Available combinations
-
-You can use combinations of different size types for one column at once.
-Available types are `[1-12/shrink/fill/auto]` for every breakpoint.
-
-<Preview className="preview-grid">
-  <Grid>
-    <GridCol size={{ sm: 9, md: 6, lg: "fill" }}>
-      <code>(default) 12, sm-9, md-6, lg-fill</code>
-    </GridCol>
-    <GridCol size={{ sm: 3, md: 6, lg: "fill" }}>
-      <code>(default) 12, sm-3, md-6, lg-fill</code>
-    </GridCol>
-  </Grid>
-</Preview>
-
-## How to create a grid
-
-### Using React Components (Recommended)
-
-```tsx
-import { Grid, GridCol } from './components/Grid';
-
-// Basic grid
-<Grid>
-  <GridCol>
-    <code>(default) 12</code>
-  </GridCol>
-  <GridCol size={6}>
-    <code>6</code>
-  </GridCol>
-</Grid>
-
-// Responsive grid
-<Grid>
-  <GridCol size={{ sm: 9, md: 6, lg: 'fill' }}>
-    <code>Responsive column</code>
-  </GridCol>
-  <GridCol size={{ sm: 3, md: 6, lg: 'fill' }}>
-    <code>Another responsive column</code>
-  </GridCol>
-</Grid>
-```
-
-### Using HTML and CSS Classes
-
-1. Start by creating a wrapper with a class of `.grid`
-2. Add child elements with a class beginning with `.grid__col`
-3. If you need, specify size of each with `.grid__col--[size]` or `.grid__col--[breakpoint]-[size]`
-
-```html
-<!-- grid base -->
-<div class="grid">
-  <!-- default grid column (.grid__col--xs-12 by default) -->
-  <div class="grid__col">content</div>
-  <!-- grid column with specific sizes -->
-  <div class="grid__col grid__col--auto grid__col--md-6 grid__col--lg-4">
-    content
-  </div>
-</div>
-```
-
-## Justify content height
-
-Grid with justified content height uses flexbox with an attempt to equalize height of column children
-
-<Preview>
-  <Grid justifyHeight>
-    <GridCol size={6} className="mb-small">
-      <div className="bg-gray">
-        <p>Children of these columns are the same height</p>
-      </div>
-    </GridCol>
-    <GridCol size={6} className="mb-small">
-      <div className="bg-gray">
-        <p>The most high column dictates the height of the row</p>
-        <Image src="https://placehold.co/150x150" alt="" />
-      </div>
-    </GridCol>
-    <GridCol className="mb-small">
-      <div className="bg-gray">
-        <p>Subsequent rows remain unaffected</p>
-      </div>
-    </GridCol>
-  </Grid>
-</Preview>
-
-## Container alignment
-
-### Horizontal
-
-<ContainerHorizontal />
-
-### Vertical
-
-<ContainerVertical />
-
-## Children alignment
-
-### Vertical
-
-<ColumnVertical />
-
-## Column gap size
-
-Add larger space between grid columns or remove them completely
-
-<Preview>
-  {["default", "none"].map((size, index) => (
-    <>
-      <h3>Column gap size {JSON.stringify(size)}</h3>
-      <Grid
-        key={index.toString()}
-        columnGapSize={size === "default" ? null : size}
-        className="mb-large"
-      >
-        {[1, 2, 3].map((key) => (
-          <GridCol key={key.toString()} size={{ md: 4 }}>
-            <code> </code>
-          </GridCol>
-        ))}
-      </Grid>
-    </>
-  ))}
-</Preview>
-
-## Row gap size
-
-Row gap helps to maintain space between grid rows and fixes
-[unwanted spacing problems](/components/section#2-stacking-elements) on the bottom of grid's last row elements by removing their content margins.
-
-There are two ways of adding a row gap.
-
-1. `.grid-row-gap--[size]` where `size` is one of `[medium/xlarge]`
-2. `.grid-row-gap--[breakpoint]-[size]` where `breakpoint` is used as a
-   **minimum display width** to change the gap size
-
-<Preview>
-  {["medium", "large", { xs: "large", md: "xlarge" }].map(
-    (size, index, array) => (
-      <Section key={index.toString()} className="pb-none">
-        <h3 className="mb-2">Row gap size {JSON.stringify(size)}</h3>
-        <Grid key={index.toString()} rowGapSize={size}>
-          {[1, 2, 3, 4, 5, 6].map((key) => (
-            <GridCol key={key.toString()} size={{ md: 6 }}>
-              <code>6</code>
-            </GridCol>
-          ))}
-        </Grid>
-      </Section>
-    ),
-  )}
-</Preview>
-
-## Advanced Examples
-
-### Complex Layout with Alignment
-
-<Preview>
-  <Grid hAlign="center" vAlign="stretch">
-    <GridCol size={3} align="top">
-      <code>top aligned</code>
-    </GridCol>
-    <GridCol size="auto" align="middle">
-      <code>auto middle</code>
-    </GridCol>
-    <GridCol size="fill" align="bottom">
-      <code>fill bottom</code>
-    </GridCol>
-    <GridCol size={2} align="stretch">
-      <code>stretch</code>
-    </GridCol>
-  </Grid>
-</Preview>
-
-### Semantic HTML Tags
-
-<Preview>
-  <Grid tag="section" justifyHeight>
-    <GridCol tag="article" size={8}>
-      <code>main content</code>
-    </GridCol>
-    <GridCol tag="aside" size={4}>
-      <code>sidebar</code>
-    </GridCol>
-  </Grid>
-</Preview>
-
-### All Column Sizes (1-12)
-
-<Preview>
-  <Grid>
-    {Array.from({ length: 12 }, (_, i) => (
-      <GridCol key={i} size={i + 1}>
-        <code>{i + 1}</code>
-      </GridCol>
-    ))}
-  </Grid>
-</Preview>
-
-<ComponentDocs title="<Grid />" component={Grid} />
-<ComponentDocs title="<GridCol />" component={GridCol} />