diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml index 5892ebd..f13422f 100644 --- a/.github/workflows/main.yml +++ b/.github/workflows/main.yml @@ -13,14 +13,14 @@ jobs: permissions: contents: write steps: - - uses: actions/checkout@v4 + - uses: actions/checkout@v7 - - uses: pnpm/action-setup@v4 + - uses: pnpm/action-setup@v6 with: - version: 10 - - uses: actions/setup-node@v4 + version: 12 + - uses: actions/setup-node@v7 with: - node-version: 22 + node-version: 26 cache: pnpm - name: Install & Build run: | @@ -37,7 +37,7 @@ jobs: force_orphan: true - name: Deploy to Vercel - uses: amondnet/vercel-action@v25 + uses: amondnet/vercel-action@v42.3.0 if: ${{ env.VERCEL_TOKEN && env.VERCEL_ORG_ID && env.VERCEL_PROJECT_ID }} with: vercel-token: ${{ secrets.VERCEL_TOKEN }} diff --git a/document/source/components/Calendar/MonthCalender.mdx b/document/source/components/Calendar/MonthCalender.mdx deleted file mode 100644 index d36d1c6..0000000 --- a/document/source/components/Calendar/MonthCalender.mdx +++ /dev/null @@ -1,99 +0,0 @@ ---- -layout: docs -title: Month calendar -description: -group: Components ---- - -import { MonthCalendar } from 'boot-cell/source/Calendar/MonthCalendar'; -import { formatDate } from 'web-utility/source/date'; - -import { Example } from '../../../../source/component/Example'; - -## Default calendar - - - - - -```TSX -import { render, createCell } from 'web-cell'; -import { MonthCalendar } from 'boot-cell/source/Calendar/MonthCalendar'; - -render( - -); -``` - -## Custom Date captions - - - - - -```TSX -import { render, createCell } from 'web-cell'; -import { MonthCalendar } from 'boot-cell/source/Calendar/MonthCalendar'; - -render( - -); -``` - -## Custom Date cell - - - ( - - {date.getDate()} - - )} - /> - - -```TSX -import { render, createCell } from 'web-cell'; -import { MonthCalendar } from 'boot-cell/source/Calendar/MonthCalendar'; -import { formatDate } from 'web-utility/source/date'; - -render( - ( - - {date.getDate()} - - )} - /> -); -``` diff --git a/document/source/components/Content/Card.mdx b/document/source/components/Content/Card.mdx deleted file mode 100644 index 0d4283f..0000000 --- a/document/source/components/Content/Card.mdx +++ /dev/null @@ -1,391 +0,0 @@ ---- -layout: docs -title: Card -description: Bootstrap’s cards provide a flexible and extensible content container with multiple variants and options. -group: Components ---- - -import { Card, CardHeader, CardFooter } from 'boot-cell/source/Content/Card'; -import { Button } from 'boot-cell/source/Form/Button'; -import { NavLink } from 'boot-cell/source/Navigator/Nav'; - -import { Example } from '../../../../source/component/Example'; - -## About - -A **card** is a flexible and extensible content container. It includes options for headers and footers, -a wide variety of content, contextual background colors, and powerful display options. -If you’re familiar with Bootstrap 3, cards replace our old panels, wells, and thumbnails. -Similar functionality to those components is available as modifier classes for cards. - -## Example - -Cards are built with as little markup and styles as possible, -but still manage to deliver a ton of control and customization. - -Below is an example of a basic card with mixed content and a fixed width. -Cards have no fixed width to start, so they’ll naturally fill the full width of its parent element. -This is easily customized with our various [sizing options](#sizing). - - - - - - - -```TSX -import { render, createCell } from 'web-cell'; -import { Card } from 'boot-cell/source/Content/Card'; -import { Button } from 'boot-cell/source/Form/Button'; - -render( - - - -); -``` - -## Content types - -Cards support a wide variety of content, including images, text, list groups, links, and more. -Below are examples of what’s supported. - -### Body - -The building block of a card is the `.card-body`. Use it whenever you need a padded section within a card. - - - - - -```TSX -import { render, createCell } from 'web-cell'; -import { Card } from 'boot-cell/source/Content/Card'; - -render( - -); -``` - -### Titles, text, and links - -Card titles are used by adding `.card-title` to a `` tag. In the same way, -links are added and placed next to each other by adding `.card-link` to an `` tag. - - - - - Card link - - - Another link - - - - -```TSX -import { render, createCell } from 'web-cell'; -import { Card } from 'boot-cell/source/Content/Card'; - -render( - - - Card link - - - Another link - - -); -``` - -### Images - -`image` property places an image to the top of the card. With `text` property, text can be added to the card. - - - - - -```TSX -import { render, createCell } from 'web-cell'; -import { Card } from 'boot-cell/source/Content/Card'; - -render( - -); -``` - -### Header and footer - -Add an optional header and/or footer within a card. - - - - Featured - - - - -```TSX -import { render, createCell } from 'web-cell'; -import { Card, CardHeader } from 'boot-cell/source/Content/Card'; -import { Button } from 'boot-cell/source/Form/Button'; - -render( - - Featured - - -); -``` - - - - Quote -
-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer - posuere erat a ante. -

-
- Someone famous in Source Title -
-
- - - -```TSX -import { render, createCell } from 'web-cell'; -import { Card, CardHeader } from 'boot-cell/source/Content/Card'; - -render( - - Quote -
-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer - posuere erat a ante. -

-
- Someone famous in Source Title -
-
- -); -``` - - - - Featured - - 2 days ago - - - -```TSX -import { render, createCell } from 'web-cell'; -import { Card, CardHeader, CardFooter } from 'boot-cell/source/Content/Card'; -import { Button } from 'boot-cell/source/Form/Button'; - -render( - - Featured - - 2 days ago - -); -``` - -## Navigation - -Add some navigation to a card’s header (or block) with BootCell’s [`` components][1]. - - - - - Active - Link - Disabled - - - - - -```TSX -import { render, createCell } from 'web-cell'; -import { Card, CardHeader } from 'boot-cell/source/Content/Card'; -import { NavLink } from 'boot-cell/source/Navigator/Nav'; -import { Button } from 'boot-cell/source/Form/Button'; - -render( - - - Active - Link - Disabled - - - -); -``` - - - - - Active - Link - Disabled - - - - - -```TSX -import { render, createCell } from 'web-cell'; -import { Card, CardHeader } from 'boot-cell/source/Content/Card'; -import { NavLink } from 'boot-cell/source/Navigator/Nav'; -import { Button } from 'boot-cell/source/Form/Button'; - -render( - - - Active - Link - Disabled - - - -); -``` - -## Images - -### Image overlays - -Turn an image into a card background and overlay your card’s text. -Depending on the image, you may or may not need additional styles or utilities. - - - - - - - -```TSX -import { render, createCell } from 'web-cell'; -import { Card } from 'boot-cell/source/Content/Card'; - -render( - - - -); -``` - -> Note that content should not be larger than the height of the image. -> If content is larger than the image the content will be displayed outside the image. - -## Horizontal - -Using a combination of grid and utility classes, cards can be made horizontal in a mobile-friendly and responsive way. -Further adjustments may be needed depending on your card content. - - - - Last updated 3 mins ago - - - -```TSX -import { render, createCell } from 'web-cell'; -import { Card } from 'boot-cell/source/Content/Card'; - -render( - - Last updated 3 mins ago - -); -``` - -[1]: components/navigator/nav diff --git a/document/source/components/Content/Collapse.mdx b/document/source/components/Content/Collapse.mdx deleted file mode 100644 index 26a0df9..0000000 --- a/document/source/components/Content/Collapse.mdx +++ /dev/null @@ -1,114 +0,0 @@ ---- -layout: docs -title: Collapse -description: Toggle the visibility of content across your project with our Web components. -group: Components -toc: true ---- - -import { Fragment } from 'web-cell'; -import { Accordion, AccordionPanel } from 'boot-cell/source/Content/Accordion'; -import { Button } from 'boot-cell/source/Form/Button'; - -import { Example } from '../../../../source/component/Example'; - -## How it works - -The `` component is used to show and hide content. -Collapsing an element will animate the `height` from its current value to `0`. - -In addition, `` uses [`ResizeObserver`][1] to detect **Content resizing**, so a polyfill may be required: - -```HTML - -``` - -## Example - - - - console.log(type)} - onClose={({ type }) => console.log(type)} - > - Web Components engine based on JSX & TypeScript - - - -```TSX -import { render, createCell, Fragment } from 'web-cell'; -import 'boot-cell/source/Content/Collapse'; -import { Button } from 'boot-cell/source/Form/Button'; - -render( - <> - - console.log(type)} - onClose={({ type }) => console.log(type)} - > - Web Components engine based on JSX & TypeScript - - -); -``` - -## Accordion - - - - - Web Components engine based on JSX & TypeScript - - - Decorator based Router component framework, powered by WebCell - - - Web Components UI library based on WebCell v2, BootStrap v4 & - FontAwesome v5 - - - - -```TSX -import { render, createCell } from 'web-cell'; -import { Accordion, AccordionPanel } from 'boot-cell/source/Content/Accordion'; - -render( - - - Web Components engine based on JSX & TypeScript - - - Decorator based Router component framework, powered by WebCell - - - Web Components UI library based on WebCell v2, BootStrap v4 & - FontAwesome v5 - - -); -``` - -[1]: https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver diff --git a/document/source/components/Content/SplitView.mdx b/document/source/components/Content/SplitView.mdx deleted file mode 100644 index ea388af..0000000 --- a/document/source/components/Content/SplitView.mdx +++ /dev/null @@ -1,55 +0,0 @@ ---- -layout: docs -title: Split view -description: -group: Components ---- - -import { SplitView } from 'boot-cell/source/Content/SplitView'; -import { Embed } from 'boot-cell/source/Media/Embed'; - -import { Example } from '../../../../source/component/Example'; - -This component is built on the top of [Iterator Observer][1], the dependency below should be installed: - -```Shell -npm install iterable-observer -``` - - - - - - - - -```TSX -import { render, createCell } from 'web-cell'; -import { SplitView } from 'boot-cell/source/Content/SplitView'; -import { Embed } from 'boot-cell/source/Content/Embed'; - -render( - - - - -); -``` - -[1]: https://github.com/EasyWebApp/iterable-observer diff --git a/document/source/components/Content/TabView.mdx b/document/source/components/Content/TabView.mdx deleted file mode 100644 index fbc45d7..0000000 --- a/document/source/components/Content/TabView.mdx +++ /dev/null @@ -1,540 +0,0 @@ ---- -layout: docs -title: Tab view -description: Built based on Nav, List group & Stepper components -group: Components ---- - -import { TabView, TabPanel } from 'boot-cell/source/Content/TabView'; -import { NavLink } from 'boot-cell/source/Navigator/Nav'; -import { ListItem } from 'boot-cell/source/Content/ListGroup'; -import { Step } from 'boot-cell/source/Navigator/Stepper'; - -import { FormField } from 'boot-cell/source/Form/FormField'; -import { Button } from 'boot-cell/source/Form/Button'; -import { Icon } from 'boot-cell/source/Reminder/Icon'; - -import { Example } from '../../../../source/component/Example'; - -Tab view is built on CSS of Bootstrap & [bs-stepper][1]. - -## Tabs mode - -`mode="tabs"` is built based on [Nav][2]. - -Dynamic tabbed interfaces, as described in the -[WAI ARIA Authoring Practices][2], -require `role="tablist"`, `role="tab"`, `role="tabpanel"`, and additional `aria-` attributes in order to convey their structure, -functionality and current state to users of assistive technologies (such as screen readers). - -Note that dynamic tabbed interfaces should not contain dropdown menus, -as this causes both usability and accessibility issues. -From a usability perspective, the fact that the currently displayed tab’s trigger element is not immediately visible -(as it’s inside the closed dropdown menu) can cause confusion. -From an accessibility point of view, there is currently no sensible way to map this sort of construct to a standard WAI ARIA pattern, -meaning that it cannot be easily made understandable to users of assistive technologies. - - - - WebCell - Web Components engine based on JSX & TypeScript - Cell Router - - Decorator based Router component framework, powered by WebCell - - BootCell - - Web Components UI library based on WebCell v2, BootStrap v4 & - FontAwesome v5 - - KoAJAX - HTTP Client based on Koa-like middlewares - - - -```TSX -import { render, createCell } from 'web-cell'; -import { TabView, TabPanel } from 'boot-cell/source/Content/TabView'; -import { NavLink } from 'boot-cell/source/Navigator/Nav'; - -render( - - WebCell - Web Components engine based on JSX & TypeScript - Cell Router - - Decorator based Router component framework, powered by WebCell - - BootCell - - Web Components UI library based on WebCell v2, BootStrap v4 & - FontAwesome v5 - - KoAJAX - HTTP Client based on Koa-like middlewares - -); -``` - -## Pills mode - -`mode="pills"` is built based on [Nav][2]. - - - - WebCell - Web Components engine based on JSX & TypeScript - Cell Router - - Decorator based Router component framework, powered by WebCell - - BootCell - - Web Components UI library based on WebCell v2, BootStrap v4 & - FontAwesome v5 - - KoAJAX - HTTP Client based on Koa-like middlewares - - - -```TSX -import { render, createCell } from 'web-cell'; -import { TabView, TabPanel } from 'boot-cell/source/Content/TabView'; -import { NavLink } from 'boot-cell/source/Navigator/Nav'; - -render( - - WebCell - Web Components engine based on JSX & TypeScript - Cell Router - - Decorator based Router component framework, powered by WebCell - - BootCell - - Web Components UI library based on WebCell v2, BootStrap v4 & - FontAwesome v5 - - KoAJAX - HTTP Client based on Koa-like middlewares - -); -``` - - - - WebCell - Web Components engine based on JSX & TypeScript - Cell Router - - Decorator based Router component framework, powered by WebCell - - BootCell - - Web Components UI library based on WebCell v2, BootStrap v4 & - FontAwesome v5 - - KoAJAX - HTTP Client based on Koa-like middlewares - - - -```TSX -import { render, createCell } from 'web-cell'; -import { TabView, TabPanel } from 'boot-cell/source/Content/TabView'; -import { NavLink } from 'boot-cell/source/Navigator/Nav'; - -render( - - WebCell - Web Components engine based on JSX & TypeScript - Cell Router - - Decorator based Router component framework, powered by WebCell - - BootCell - - Web Components UI library based on WebCell v2, BootStrap v4 & - FontAwesome v5 - - KoAJAX - HTTP Client based on Koa-like middlewares - -); -``` - -## Masthead mode - -`mode="masthead"` is built based on [Nav][2]. - - - - WebCell - Web Components engine based on JSX & TypeScript - Cell Router - - Decorator based Router component framework, powered by WebCell - - BootCell - - Web Components UI library based on WebCell v2, BootStrap v4 & - FontAwesome v5 - - KoAJAX - HTTP Client based on Koa-like middlewares - - - -```TSX -import { render, createCell } from 'web-cell'; -import { TabView, TabPanel } from 'boot-cell/source/Content/TabView'; -import { NavLink } from 'boot-cell/source/Navigator/Nav'; - -render( - - WebCell - Web Components engine based on JSX & TypeScript - Cell Router - - Decorator based Router component framework, powered by WebCell - - BootCell - - Web Components UI library based on WebCell v2, BootStrap v4 & - FontAwesome v5 - - KoAJAX - HTTP Client based on Koa-like middlewares - -); -``` - -## List mode - -`mode="list"` is built based on [List group](components/content/listgroup). - - - - WebCell - Web Components engine based on JSX & TypeScript - Cell Router - - Decorator based Router component framework, powered by WebCell - - BootCell - - Web Components UI library based on WebCell v2, BootStrap v4 & - FontAwesome v5 - - KoAJAX - HTTP Client based on Koa-like middlewares - - - -```TSX -import { render, createCell } from 'web-cell'; -import { TabView, TabPanel } from 'boot-cell/source/Content/TabView'; -import { ListItem } from 'boot-cell/source/Content/ListGroup'; - -render( - - WebCell - Web Components engine based on JSX & TypeScript - Cell Router - - Decorator based Router component framework, powered by WebCell - - BootCell - - Web Components UI library based on WebCell v2, BootStrap v4 & - FontAwesome v5 - - KoAJAX - HTTP Client based on Koa-like middlewares - -); -``` - -## Step mode - -`mode="step"` is built based on [bs-stepper][1]. - -### Linear - - - - Email - -
event.preventDefault()}> - - - -
- Password - -
event.preventDefault()}> - - - - -
- Validate - -
event.preventDefault()} - > - - -
- - - - -```TSX -import { render, createCell } from 'web-cell'; -import { TabView, TabPanel } from 'boot-cell/source/Content/TabView'; -import { Step } from 'boot-cell/source/Navigator/Stepper'; -import { FormField } from 'boot-cell/source/Form/FormField'; -import { Button } from 'boot-cell/source/Form/Button'; - -render( - - Email - -
event.preventDefault()}> - - - -
- Password - -
event.preventDefault()}> - - - - -
- Validate - -
event.preventDefault()} - > - - -
- - -); -``` - -### Non linear - - - - }>Name - -
event.preventDefault()}> - - - -
- }>Address - -
event.preventDefault()}> - - - -
- }>Submit - -
event.preventDefault()} - > - -
- - - - -```TSX -import { render, createCell } from 'web-cell'; -import { TabView, TabPanel } from 'boot-cell/source/Content/TabView'; -import { Step } from 'boot-cell/source/Navigator/Stepper'; -import { Icon } from 'boot-cell/source/Reminder/Icon'; -import { FormField } from 'boot-cell/source/Form/FormField'; -import { Button } from 'boot-cell/source/Form/Button'; - -render( - - }>Name - -
event.preventDefault()}> - - - -
- }>Address - -
event.preventDefault()}> - - - -
- }>Submit - -
event.preventDefault()} - > - -
- - -); -``` - -### Vertical linear - - - - Email - -
event.preventDefault()}> - - - -
- Password - -
event.preventDefault()}> - - - - -
- Validate - -
event.preventDefault()} - > - - -
- - - - -```TSX -import { render, createCell } from 'web-cell'; -import { TabView, TabPanel } from 'boot-cell/source/Content/TabView'; -import { Step } from 'boot-cell/source/Navigator/Stepper'; -import { FormField } from 'boot-cell/source/Form/FormField'; -import { Button } from 'boot-cell/source/Form/Button'; - -render( - - Email - -
event.preventDefault()}> - - - -
- Password - -
event.preventDefault()}> - - - - -
- Validate - -
event.preventDefault()} - > - - -
- - -); -``` - -[1]: https://johann-s.github.io/bs-stepper/ -[2]: components/navigator/nav -[3]: https://www.w3.org/TR/wai-aria-practices/#tabpanel diff --git a/document/source/components/Content/Table.mdx b/document/source/components/Content/Table.mdx deleted file mode 100644 index ea94dd5..0000000 --- a/document/source/components/Content/Table.mdx +++ /dev/null @@ -1,1076 +0,0 @@ ---- -layout: docs -title: Table -description: -group: Components -toc: true ---- - -import { Table, TableRow, InputCell } from 'boot-cell/source/Content/Table'; - -import { Example } from '../../../../source/component/Example'; - -## Examples - -**All table styles are inherited in Bootstrap 4**, -meaning any nested tables will be styled in the same manner as the parent. - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#FirstLastHandle1MarkOtto@mdo2JacobThornton@fat3Larrythe Bird@twitter
- - -```TSX -import { render, createCell } from 'web-cell'; -import { Table, TableRow } from 'boot-cell/source/Content/Table'; - -render( - - - - - - - - - - - - - - - - - - - - - - - - - -
#FirstLastHandle1MarkOtto@mdo2JacobThornton@fat3Larrythe Bird@twitter
-); -``` - -You can also invert the colors — with light text on dark backgrounds — with `theme` property. - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#FirstLastHandle1MarkOtto@mdo2JacobThornton@fat3Larrythe Bird@twitter
- - -```TSX -import { render, createCell } from 'web-cell'; -import { Table, TableRow } from 'boot-cell/source/Content/Table'; - -render( - - - - - - - - - - - - - - - - - - - - - - - - - -
#FirstLastHandle1MarkOtto@mdo2JacobThornton@fat3Larrythe Bird@twitter
-); -``` - -## Striped rows - -Use `striped` property to add zebra-striping to any table row within the ``. - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#FirstLastHandle1MarkOtto@mdo2JacobThornton@fat3Larrythe Bird@twitter
- - -```TSX -import { render, createCell } from 'web-cell'; -import { Table, TableRow } from 'boot-cell/source/Content/Table'; - -render( - - - - - - - - - - - - - - - - - - - - - - - - - -
#FirstLastHandle1MarkOtto@mdo2JacobThornton@fat3Larrythe Bird@twitter
-); -``` - - - - - - - - - - - - - - - - - - - - - - - - - - - -
#FirstLastHandle1MarkOtto@mdo2JacobThornton@fat3Larrythe Bird@twitter
- - -```TSX -import { render, createCell } from 'web-cell'; -import { Table, TableRow } from 'boot-cell/source/Content/Table'; - -render( - - - - - - - - - - - - - - - - - - - - - - - - - -
#FirstLastHandle1MarkOtto@mdo2JacobThornton@fat3Larrythe Bird@twitter
-); -``` - -## Bordered table - -Add `border` property for borders on all sides of the table and cells. - - - - - - - - - - - - - - - - - - - - - - - - - - -
#FirstLastHandle1MarkOtto@mdo2JacobThornton@fat3Larry the Bird@twitter
- - -```TSX -import { render, createCell } from 'web-cell'; -import { Table, TableRow } from 'boot-cell/source/Content/Table'; - -render( - - - - - - - - - - - - - - - - - - - - - - - - -
#FirstLastHandle1MarkOtto@mdo2JacobThornton@fat3Larry the Bird@twitter
-); -``` - - - - - - - - - - - - - - - - - - - - - - - - - - -
#FirstLastHandle1MarkOtto@mdo2JacobThornton@fat3Larry the Bird@twitter
- - -```TSX -import { render, createCell } from 'web-cell'; -import { Table, TableRow } from 'boot-cell/source/Content/Table'; - -render( - - - - - - - - - - - - - - - - - - - - - - - - -
#FirstLastHandle1MarkOtto@mdo2JacobThornton@fat3Larry the Bird@twitter
-); -``` - -## Borderless table - -Add `border={false}` for a table without borders. - - - - - - - - - - - - - - - - - - - - - - - - - - -
#FirstLastHandle1MarkOtto@mdo2JacobThornton@fat3Larry the Bird@twitter
- - -```TSX -import { render, createCell } from 'web-cell'; -import { Table, TableRow } from 'boot-cell/source/Content/Table'; - -render( - - - - - - - - - - - - - - - - - - - - - - - - -
#FirstLastHandle1MarkOtto@mdo2JacobThornton@fat3Larry the Bird@twitter
-); -``` - -`border={false}` can also be used on dark tables. - - - - - - - - - - - - - - - - - - - - - - - - - - -
#FirstLastHandle1MarkOtto@mdo2JacobThornton@fat3Larry the Bird@twitter
- - -```TSX -import { render, createCell } from 'web-cell'; -import { Table, TableRow } from 'boot-cell/source/Content/Table'; - -render( - - - - - - - - - - - - - - - - - - - - - - - - -
#FirstLastHandle1MarkOtto@mdo2JacobThornton@fat3Larry the Bird@twitter
-); -``` - -## Hoverable rows - -Add `hover` property to enable a hover state on table rows within a ``. - - - - - - - - - - - - - - - - - - - - - - - - - - -
#FirstLastHandle1MarkOtto@mdo2JacobThornton@fat3Larry the Bird@twitter
- - -```TSX -import { render, createCell } from 'web-cell'; -import { Table, TableRow } from 'boot-cell/source/Content/Table'; - -render( - - - - - - - - - - - - - - - - - - - - - - - - -
#FirstLastHandle1MarkOtto@mdo2JacobThornton@fat3Larry the Bird@twitter
-); -``` - - - - - - - - - - - - - - - - - - - - - - - - - - -
#FirstLastHandle1MarkOtto@mdo2JacobThornton@fat3Larry the Bird@twitter
- - -```TSX -import { render, createCell } from 'web-cell'; -import { Table, TableRow } from 'boot-cell/source/Content/Table'; - -render( - - - - - - - - - - - - - - - - - - - - - - - - -
#FirstLastHandle1MarkOtto@mdo2JacobThornton@fat3Larry the Bird@twitter
-); -``` - -## Small table - -Add `small` property to make tables more compact by cutting cell padding in half. - - - - - - - - - - - - - - - - - - - - - - - - - - -
#FirstLastHandle1MarkOtto@mdo2JacobThornton@fat3Larry the Bird@twitter
- - -```TSX -import { render, createCell } from 'web-cell'; -import { Table, TableRow } from 'boot-cell/source/Content/Table'; - -render( - - - - - - - - - - - - - - - - - - - - - - - - -
#FirstLastHandle1MarkOtto@mdo2JacobThornton@fat3Larry the Bird@twitter
-); -``` - - - - - - - - - - - - - - - - - - - - - - - - - - -
#FirstLastHandle1MarkOtto@mdo2JacobThornton@fat3Larry the Bird@twitter
- - -```TSX -import { render, createCell } from 'web-cell'; -import { Table, TableRow } from 'boot-cell/source/Content/Table'; - -render( - - - - - - - - - - - - - - - - - - - - - - - - -
#FirstLastHandle1MarkOtto@mdo2JacobThornton@fat3Larry the Bird@twitter
-); -``` - -> ##### Conveying meaning to assistive technologies -> -> Using color to add meaning only provides a visual indication, -> which will not be conveyed to users of assistive technologies – such as screen readers. -> Ensure that information denoted by the color is either obvious from -> the content itself (e.g. the visible text), or is included through alternative means, -> such as additional text hidden with the `.sr-only` class. - -Assign `sm`, `md`, `lg` or `xl` to `responsive` property, -making the table scroll horizontally at each `max-width` breakpoint of up to (but not including) -576px, 768px, 992px, and 1120px, respectively. - -> Note that since browsers do not currently support [range context queries][1], -> we work around the limitations of [min- and max- prefixes][2] and viewports with fractional widths -> (which can occur under certain conditions on high-dpi devices, for instance) -> by using values with higher precision for these comparisons. - -## Responsive tables - -Responsive tables allow tables to be scrolled horizontally with ease. - -> ##### Vertical clipping/truncation -> -> Responsive tables make use of `overflow-y: hidden`, which clips off any content that goes beyond the bottom or top edges of the table. -> In particular, this can clip off dropdown menus and other third-party widgets. - -### Always responsive - -`` is responsive & horizontally scrollable defaultly. - - -
- - - {[1, 2, 3, 4, 5, 6, 7, 8, 9].map(() => ( - - ))} - - {[1, 2, 3].map(index => ( - - - {[1, 2, 3, 4, 5, 6, 7, 8, 9].map(() => ( - - ))} - - ))} -
#Heading{index}Cell
- - -```TSX -import { render, createCell } from 'web-cell'; -import { Table, TableRow } from 'boot-cell/source/Content/Table'; - -render( - - - - {[1, 2, 3, 4, 5, 6, 7, 8, 9].map(() => ( - - ))} - - {[1, 2, 3].map(index => ( - - - {[1, 2, 3, 4, 5, 6, 7, 8, 9].map(() => ( - - ))} - - ))} -
#Heading{index}Cell
-); -``` - -### Breakpoint specific - -Use `responsive={'sm'|'md'|'lg'|'xl'}` as needed to create responsive tables up to a particular breakpoint. -From that breakpoint and up, the table will behave normally and not scroll horizontally. - -**These tables may appear broken until their responsive styles apply at specific viewport widths.** - - - - - - {[1, 2, 3, 4, 5, 6, 7, 8, 9].map(() => ( - - ))} - - {[1, 2, 3].map(index => ( - - - {[1, 2, 3, 4, 5, 6, 7, 8, 9].map(() => ( - - ))} - - ))} -
#Heading{index}Cell
- - -```TSX -import { render, createCell } from 'web-cell'; -import { Table, TableRow } from 'boot-cell/source/Content/Table'; - -render( - - - - {[1, 2, 3, 4, 5, 6, 7, 8, 9].map(() => ( - - ))} - - {[1, 2, 3].map(index => ( - - - {[1, 2, 3, 4, 5, 6, 7, 8, 9].map(() => ( - - ))} - - ))} -
#Heading{index}Cell
-); -``` - - - - - - {[1, 2, 3, 4, 5, 6, 7, 8, 9].map(() => ( - - ))} - - {[1, 2, 3].map(index => ( - - - {[1, 2, 3, 4, 5, 6, 7, 8, 9].map(() => ( - - ))} - - ))} -
#Heading{index}Cell
- - -```TSX -import { render, createCell } from 'web-cell'; -import { Table, TableRow } from 'boot-cell/source/Content/Table'; - -render( - - - - {[1, 2, 3, 4, 5, 6, 7, 8, 9].map(() => ( - - ))} - - {[1, 2, 3].map(index => ( - - - {[1, 2, 3, 4, 5, 6, 7, 8, 9].map(() => ( - - ))} - - ))} -
#Heading{index}Cell
-); -``` - - - - - - {[1, 2, 3, 4, 5, 6, 7, 8, 9].map(() => ( - - ))} - - {[1, 2, 3].map(index => ( - - - {[1, 2, 3, 4, 5, 6, 7, 8, 9].map(() => ( - - ))} - - ))} -
#Heading{index}Cell
- - -```TSX -import { render, createCell } from 'web-cell'; -import { Table, TableRow } from 'boot-cell/source/Content/Table'; - -render( - - - - {[1, 2, 3, 4, 5, 6, 7, 8, 9].map(() => ( - - ))} - - {[1, 2, 3].map(index => ( - - - {[1, 2, 3, 4, 5, 6, 7, 8, 9].map(() => ( - - ))} - - ))} -
#Heading{index}Cell
-); -``` - - - - - - {[1, 2, 3, 4, 5, 6, 7, 8, 9].map(() => ( - - ))} - - {[1, 2, 3].map(index => ( - - - {[1, 2, 3, 4, 5, 6, 7, 8, 9].map(() => ( - - ))} - - ))} -
#Heading{index}Cell
- - -```TSX -import { render, createCell } from 'web-cell'; -import { Table, TableRow } from 'boot-cell/source/Content/Table'; - -render( - - - - {[1, 2, 3, 4, 5, 6, 7, 8, 9].map(() => ( - - ))} - - {[1, 2, 3].map(index => ( - - - {[1, 2, 3, 4, 5, 6, 7, 8, 9].map(() => ( - - ))} - - ))} -
#Heading{index}Cell
-); -``` - -## Input cells - - - - - - - - - - - - - - - -
NumberSelectMultiple lines
- - -```TSX -import { render, createCell } from 'web-cell'; -import { Table, TableRow, InputCell } from 'boot-cell/source/Content/Table'; - -render( - - - - - - - - - - - - - -
NumberSelectMultiple lines
-); -``` - -[1]: https://www.w3.org/TR/mediaqueries-4/#range-context -[2]: https://www.w3.org/TR/mediaqueries-4/#mq-min-max diff --git a/document/source/components/Form/Button.mdx b/document/source/components/Form/Button.mdx deleted file mode 100644 index dbbb551..0000000 --- a/document/source/components/Form/Button.mdx +++ /dev/null @@ -1,423 +0,0 @@ ---- -layout: docs -title: Button -description: Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more. -group: Components ---- - -import { Fragment } from 'web-cell'; - -import { Button, IconButton } from 'boot-cell/source/Form/Button'; -import { ToggleGroup } from 'boot-cell/source/Form/ToggleField'; - -import { Example } from '../../../../source/component/Example'; - -## Examples - -Bootstrap includes several predefined button styles, each serving its own semantic purpose, -with a few extras thrown in for more control. - - - {[ - 'primary', - 'secondary', - 'success', - 'danger', - 'warning', - 'info', - 'light', - 'dark', - 'link' - ].map(color => ( - - ))} - - -```TSX -import { render, createCell } from 'web-cell'; -import { Button } from 'boot-cell/source/Form/Button'; - -render([ - 'primary', - 'secondary', - 'success', - 'danger', - 'warning', - 'info', - 'light', - 'dark', - 'link' -].map(color => ( - -))); -``` - -> ##### Conveying meaning to assistive technologies -> -> Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – -> such as screen readers. Ensure that information denoted by the color is either obvious from the content itself -> (e.g. the visible text), or is included through alternative means, such as additional text hidden with the `.sr-only` class. - -## Disable text wrapping - -If you don’t want the button text to wrap, you can add the `.text-nowrap` class to the button. -In Sass, you can set `$btn-white-space: nowrap` to disable text wrapping for each button. - -## Button tags - -When using ` - - - - - - -```TSX -import { render, createCell, Fragment } from 'web-cell'; -import { Button } from 'boot-cell/source/Form/Button'; - -render( - <> - - - - - - -); -``` - -## Outline buttons - -In need of a button, but not the hefty background colors they bring? -Use `outline` property with `color=""` property to remove all background images and colors on any button. - - - {[ - 'primary', - 'secondary', - 'success', - 'danger', - 'warning', - 'info', - 'light', - 'dark', - 'link' - ].map(color => ( - - ))} - - -```TSX -import { render, createCell } from 'web-cell'; -import { Button } from 'boot-cell/source/Form/Button'; - -render([ - 'primary', - 'secondary', - 'success', - 'danger', - 'warning', - 'info', - 'light', - 'dark', - 'link' -].map(color => ( - -))); -``` - -## Sizes - -Fancy larger or smaller buttons? Add `size="lg"` or `size="sm"` for additional sizes. - - - - - - -```TSX -import { render, createCell, Fragment } from 'web-cell'; -import { Button } from 'boot-cell/source/Form/Button'; - -render( - <> - - - -); -``` - - - - - - -```TSX -import { render, createCell, Fragment } from 'web-cell'; -import { Button } from 'boot-cell/source/Form/Button'; - -render( - <> - - - -); -``` - -Create block level buttons — those that span the full width of a parent—by adding `block` property. - - - - - - -```TSX -import { render, createCell, Fragment } from 'web-cell'; -import { Button } from 'boot-cell/source/Form/Button'; - -render( - <> - - - -); -``` - -## Active state - -Buttons will appear pressed (with a darker background, darker border, and inset shadow) when active. -**There’s no need to add a class to ` - - - -```TSX -import { render, createCell, Fragment } from 'web-cell'; -import { Button } from 'boot-cell/source/Form/Button'; - -render( - <> - - - -); -``` - -## Disabled state - -Make buttons look inactive by adding the `disabled` boolean property to any ` - - - -```TSX -import { render, createCell, Fragment } from 'web-cell'; -import { Button } from 'boot-cell/source/Form/Button'; - -render( - <> - - - -); -``` - - - - - - -```TSX -import { render, createCell, Fragment } from 'web-cell'; -import { Button } from 'boot-cell/source/Form/Button'; - -render( - <> - - - -); -``` - -## Toggle Button - -Do more with buttons. Control button states or create groups of buttons for more components like toolbars. - -### Checkbox and radio buttons - -**Note that you can create single input-powered buttons or groups of them.** -The checked state for these buttons is **only updated via `click` event** on the button. - - - - - -```TSX -import { render, createCell } from 'web-cell'; -import { ToggleGroup } from 'boot-cell/source/Form/ToggleField'; - -render( - -); -``` - - - - - -```TSX -import { render, createCell } from 'web-cell'; -import { ToggleGroup } from 'boot-cell/source/Form/ToggleField'; - -render( - -); -``` - -## Icon Button - -`` component is built on [``][1]. - - - - - -```TSX -import { render, createCell } from 'web-cell'; -import { IconButton } from 'boot-cell/source/Form/Button'; - -render( - -); -``` - -[1]: components/reminder/icon diff --git a/document/source/components/Form/FormField.mdx b/document/source/components/Form/FormField.mdx deleted file mode 100644 index 369f6e8..0000000 --- a/document/source/components/Form/FormField.mdx +++ /dev/null @@ -1,1539 +0,0 @@ ---- -layout: docs -title: Form field -description: Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms. -group: Components ---- - -import { FormField } from 'boot-cell/source/Form/FormField'; -import { ToggleField } from 'boot-cell/source/Form/ToggleField'; -import { Button } from 'boot-cell/source/Form/Button'; -import { Form } from 'boot-cell/source/Form/Form'; -import { Field } from 'boot-cell/source/Form/Field'; -import { InputGroup } from 'boot-cell/source/Form/InputGroup'; -import { ScoreRange } from 'boot-cell/source/Form/ScoreRange'; -import { FileInput } from 'boot-cell/source/Form/FileInput'; - -import { Example } from '../../../../source/component/Example'; - -## Overview - -Bootstrap’s form controls expand on [our Rebooted form styles][1] with classes. -Use these classes to opt into their customized displays for a more consistent rendering across browsers and devices. - -Be sure to use an appropriate `type` attribute on all inputs -(e.g., `email` for email address or `number` for numerical information) -to take advantage of newer input controls like email verification, number selection, and more. - -Here’s a quick example to demonstrate Bootstrap’s form styles. -Keep reading for documentation on required properties, form layout, and more. - - -
- - - - Check me output - - - -
 - -```TSX -import { render, createCell } from 'web-cell'; -import { FormField } from 'boot-cell/source/Form/FormField'; -import { Button } from 'boot-cell/source/Form/Button'; - -render( -
- - - - Check me output - - - -); -``` - -## Form controls - -Textual form controls — like ``s, `