@react-ui-org/react-ui 0.52.0 → 0.53.0

package/src/lib/components/Grid/README.mdx

@@ -1,299 +0,0 @@
----
-name: Grid
-menu: 'Layouts'
-route: /components/grid
----
-
-# Grid
-
-import {
-  Playground,
-  Props,
-} from 'docz'
-import { Placeholder } from '../../../docs/_components/Placeholder/Placeholder'
-import {
-  Grid,
-  GridSpan,
-} from '../..'
-
-The responsive Grid layout aligns content into an organized grid.
-
-## Basic Usage
-
-To implement the Grid component, you need to import it first:
-
-```js
-import { Grid } from '@react-ui-org/react-ui';
-```
-
-And use it:
-
-<Playground>
-  <Grid>
-    <Placeholder bordered>Grid item</Placeholder>
-    <Placeholder bordered>Grid item</Placeholder>
-    <Placeholder bordered>Grid item</Placeholder>
-  </Grid>
-</Playground>
-
-See [API](#api) for all available options.
-
-## General Guidelines
-
-- This component implements the native [CSS grid layout][grid-layout], a
-  powerful tool for two-dimensional layouts. You may use any value accepted by
-  [grid-template-columns], [grid-template-rows], [grid-auto-flow],
-  [align-content], [align-items], [justify-content], [justify-items], and CSS
-  properties in corresponding API options of the component.
-
-- To align your items in the grid, **simply wrap** them with the Grid
-  component. Unlike other grid frameworks and UI libraries, **no additional
-  markup** like GridItem or Cell is necessary for your items. But it's there
-  when you really need it—see [Advanced Layouts](#advanced-layouts).
-
-- For forms, use rather the [FormLayout](/components/form-layout) component
-  which is designed specifically for that purpose.
-
-- The Grid component is so powerful that it enables you to build even very
-  advanced layouts **without** having to write **a single line of custom CSS.**
-  See [Advanced Layouts](#advanced-layouts) for more.
-
-👉 Vertical margin of items inside Grid is reset to zero.
-
-## Columns
-
-Stack is the default outcome of Grid. Use the `columns` option to organize your
-items into a grid.
-
-<Playground>
-  <Grid columns="1fr 1fr 1fr">
-    <Placeholder bordered>Grid item</Placeholder>
-    <Placeholder bordered>Grid item</Placeholder>
-    <Placeholder bordered>Grid item</Placeholder>
-    <Placeholder bordered>Grid item</Placeholder>
-    <Placeholder bordered>Grid item</Placeholder>
-    <Placeholder bordered>Grid item</Placeholder>
-  </Grid>
-</Playground>
-
-You can use the [`repeat()`][repeat] function to specify a recurring pattern.
-
-<Playground>
-  <Grid columns="repeat(3, 1fr)">
-    <Placeholder bordered>Grid item</Placeholder>
-    <Placeholder bordered>Grid item</Placeholder>
-    <Placeholder bordered>Grid item</Placeholder>
-    <Placeholder bordered>Grid item</Placeholder>
-    <Placeholder bordered>Grid item</Placeholder>
-    <Placeholder bordered>Grid item</Placeholder>
-  </Grid>
-</Playground>
-
-Combine `repeat()` with `auto-fit` and [`minmax()`][minmax] to build automatic
-responsive layouts.
-
-📐 Try resizing the playground to see it in action.
-
-<Playground>
-  <Grid columns="repeat(auto-fit, minmax(200px, auto))">
-    <Placeholder bordered>Grid item</Placeholder>
-    <Placeholder bordered>Grid item</Placeholder>
-    <Placeholder bordered>Grid item</Placeholder>
-    <Placeholder bordered>Grid item</Placeholder>
-    <Placeholder bordered>Grid item</Placeholder>
-    <Placeholder bordered>Grid item</Placeholder>
-  </Grid>
-</Playground>
-
-👉 If you need your items to have **equal height** even with the content of
-varying lengths, it may be necessary to set `height: 100%` on them.
-
-## Rows
-
-Use `columns` and `rows` to specify a more complicated grid layout.
-
-<Playground>
-  <Grid columns="1fr 2fr" rows="auto 200px auto">
-    <Placeholder bordered>Grid item</Placeholder>
-    <Placeholder bordered>Grid item</Placeholder>
-    <Placeholder bordered>Grid item</Placeholder>
-    <Placeholder bordered>Grid item</Placeholder>
-    <Placeholder bordered>Grid item</Placeholder>
-    <Placeholder bordered>Grid item</Placeholder>
-  </Grid>
-</Playground>
-
-## Gaps
-
-Both column and row gaps can be customized. The value must correspond to any of
-[available spacings](/foundation/spacing).
-
-<Playground>
-  <Grid columns="repeat(3, 1fr)" columnGap={2} rowGap={6}>
-    <Placeholder bordered>Grid item</Placeholder>
-    <Placeholder bordered>Grid item</Placeholder>
-    <Placeholder bordered>Grid item</Placeholder>
-    <Placeholder bordered>Grid item</Placeholder>
-    <Placeholder bordered>Grid item</Placeholder>
-    <Placeholder bordered>Grid item</Placeholder>
-  </Grid>
-</Playground>
-
-## Alignment
-
-Individual items and the entire grid content can be aligned along both axes.
-
-<Playground>
-  <Grid
-    columns="repeat(3, 10em)"
-    alignItems="center"
-    justifyItems="center"
-    justifyContent="center"
-  >
-    <Placeholder bordered>Grid item</Placeholder>
-    <Placeholder bordered>Grid item<br /> with two lines</Placeholder>
-    <Placeholder bordered>Grid item</Placeholder>
-    <Placeholder bordered>Grid item</Placeholder>
-    <Placeholder bordered>Grid item</Placeholder>
-    <Placeholder bordered>Grid item</Placeholder>
-  </Grid>
-</Playground>
-
-## Custom HTML Tag
-
-To render as a list, for example, just change the output `tag` to `ul` or `ol`
-and wrap your items with `<li>`.
-
-<Playground>
-  <Grid tag="ul">
-    <li>
-      <Placeholder bordered>List item</Placeholder>
-    </li>
-    <li>
-      <Placeholder bordered>List item</Placeholder>
-    </li>
-    <li>
-      <Placeholder bordered>List item</Placeholder>
-    </li>
-  </Grid>
-</Playground>
-
-## Media Queries
-
-If you need to build more complicated layouts, you have full control over the
-grid definition. Just specify your grid layout for
-[breakpoints](/foundation/breakpoints) where a change of layout is needed.
-The Grid component is written with the mobile-first approach so values for small
-breakpoints are used until they're overridden by a bigger breakpoint.
-
-👉 With this syntax there are no defaults for individual breakpoints.
-
-📐 Try resizing your browser to see how it works.
-
-<Playground>
-  <Grid
-    columns={{
-      xs: '1fr',
-      md: '1fr 2fr',
-    }}
-    columnGap={{
-      xs: 4,
-      md: 2,
-      lg: 4,
-    }}
-    rows={{
-      xs: 'auto auto 200px 200px',
-      md: 'auto 200px auto',
-    }}
-    rowGap={{
-      xs: 3,
-      md: 4,
-    }}
-  >
-    <Placeholder bordered>Grid item</Placeholder>
-    <Placeholder bordered>Grid item</Placeholder>
-    <Placeholder bordered>Grid item</Placeholder>
-    <Placeholder bordered>Grid item</Placeholder>
-    <Placeholder bordered>Grid item</Placeholder>
-    <Placeholder bordered>Grid item</Placeholder>
-  </Grid>
-</Playground>
-
-## Advanced Layouts
-
-Wrap your content with the GridSpan component to span it over multiple
-columns or rows. Use the `autoFlow` option to control the layout when combined
-with responsive columns and rows.
-
-<Playground>
-  <Grid
-    autoFlow={{
-      xs: 'row dense',
-      sm: 'column',
-    }}
-    columns={{
-      xs: 'repeat(2, 1fr)',
-      sm: 'repeat(4, 1fr)',
-    }}
-    rows={{
-      xs: 'repeat(8, 50px)',
-      sm: 'auto 100px auto auto',
-    }}
-  >
-    <Placeholder bordered>Grid item 1</Placeholder>
-    <Placeholder bordered>Grid item 2</Placeholder>
-    <Placeholder bordered>Grid item 3</Placeholder>
-    <Placeholder bordered>Grid item 4</Placeholder>
-    <Placeholder bordered>Grid item 5</Placeholder>
-    <GridSpan columns={2} rows={2}>
-      <Placeholder bordered height="100%">
-        Grid item spanning over two lines and two rows
-      </Placeholder>
-    </GridSpan>
-    <Placeholder bordered>Grid item 6</Placeholder>
-    <Placeholder bordered>Grid item 7</Placeholder>
-    <Placeholder bordered>Grid item 8</Placeholder>
-    <Placeholder bordered>Grid item 9</Placeholder>
-    <Placeholder bordered>Grid item 10</Placeholder>
-    <Placeholder bordered>Grid item 11</Placeholder>
-    <Placeholder bordered>Grid item 12</Placeholder>
-  </Grid>
-</Playground>
-
-👉 `autoFlow` (used in the example above) implements the `grid-auto-flow` CSS
-property. Check [MDN][grid-auto-flow] to fully understand available options.
-
-## Forwarding HTML Attributes
-
-In addition to the options below in the [component's API](#api) section, you
-can specify [React synthetic events] or **any HTML attribute you like.** All
-attributes that don't interfere with the API are forwarded to the HTML element
-of your choice provided by `tag`, which is `<div>` by default. It enables making
-the component interactive and helps to improve its accessibility.
-
-👉 Refer to the MDN reference for the full list of supported attributes of the
-[div] element or [any other][all-html-elements] element of your choice.
-
-## API
-
-<Props table of={Grid} />
-
-### GridSpan API
-
-Wrapper for content that should span multiple rows or columns.
-
-<Props table of={GridSpan} />
-
-[grid-layout]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
-[grid-template-columns]: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns
-[grid-template-rows]: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows
-[grid-auto-flow]: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow
-[align-content]: https://developer.mozilla.org/en-US/docs/Web/CSS/align-content
-[align-items]: https://developer.mozilla.org/en-US/docs/Web/CSS/align-items
-[justify-content]: https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content
-[justify-items]: https://developer.mozilla.org/en-US/docs/Web/CSS/justify-items
-[repeat]: https://developer.mozilla.org/en-US/docs/Web/CSS/repeat
-[minmax]: https://developer.mozilla.org/en-US/docs/Web/CSS/minmax
-[React synthetic events]: https://reactjs.org/docs/events.html
-[div]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div#attributes
-[all-html-elements]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element