chore: remove lion-specific component namings from overview files
This commit is contained in:
parent
4dc169c65f
commit
c7b7881f1f
27 changed files with 35 additions and 39 deletions
|
|
@ -1,6 +1,6 @@
|
|||
# Content >> Accordion >> Overview ||10
|
||||
|
||||
`lion-accordion` is a component used to toggle the display of sections of content.
|
||||
A web component that can be used to toggle the display of sections of content.
|
||||
Its purpose is to reduce the need to scroll when presenting multiple sections of content on a single page. Accordions often allow users to get the big picture before focusing on details.
|
||||
|
||||
```js script
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
# Content >> Collapsible >> Overview ||10
|
||||
|
||||
`lion-collapsible` is a combination of a button (the invoker), a chunk of 'extra content', and can be extended with an animation to disclose the extra content. There are two slots available respectively; `invoker` to specify the collapsible's invoker and `content` for the extra content of the collapsible.
|
||||
A combination of a button (the invoker) and a chunk of 'extra content'. This web component can be extended with an animation to disclose the extra content. There are two slots available respectively; `invoker` to specify the collapsible's invoker and `content` for the extra content of the collapsible.
|
||||
|
||||
```js script
|
||||
import { html } from '@lion/core';
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
# Content >> Progress Indicator >> Overview ||10
|
||||
|
||||
`lion-progress-indicator` implements accessibility requirements for progress indicators.
|
||||
A web component that implements accessibility requirements for progress indicators.
|
||||
|
||||
```html
|
||||
<lion-progress-indicator></lion-progress-indicator>
|
||||
|
|
@ -10,7 +10,7 @@ Note: You don't see a live demo here as it would be empty, since there is no sty
|
|||
|
||||
## Features
|
||||
|
||||
`LionProgressIndicator` is designed to be extended to add visuals.
|
||||
This component is designed to be extended in order to add visuals.
|
||||
|
||||
- Accessibility compliant
|
||||
- Localized "Loading" label
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
# Content >> Tabs >> Overview ||10
|
||||
|
||||
A component to allow users to quickly move between a small number of equally important views.
|
||||
A web component that allows users to quickly move between a small number of equally important views.
|
||||
|
||||
```js script
|
||||
import { LitElement, html } from '@lion/core';
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
# Inputs >> Calendar >> Overview ||10
|
||||
|
||||
`lion-calendar` is a reusable and accessible calendar view.
|
||||
A reusable and accessible calendar view web component.
|
||||
|
||||
```js script
|
||||
import { html, css } from '@lion/core';
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
# Inputs >> Checkbox Group >> Overview ||10
|
||||
|
||||
`lion-checkbox-group` component enhances the functionality of the native `<input type="checkbox">` element.
|
||||
A checkbox group enhances the functionality of the native `<input type="checkbox">` element.
|
||||
Its purpose is to provide a way for users to check **multiple** options amongst a set of choices, or to function as a single toggle.
|
||||
|
||||
> You should use `<lion-checkbox>` elements as the children of the `<lion-checkbox-group>`.
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ import '@lion/input/define';
|
|||
import '@lion/fieldset/define';
|
||||
```
|
||||
|
||||
A fieldset groups multiple input fields or other fieldsets together.
|
||||
A web component that can be used to group multiple input fields or other fieldsets together.
|
||||
|
||||
```js preview-story
|
||||
export const main = () => html`
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ import '@lion/input/define';
|
|||
import '@lion/form/define';
|
||||
```
|
||||
|
||||
We use a form web-component to enhances the functionality of the native `form` component.
|
||||
A web component that enhances the functionality of the native `form` component.
|
||||
It is designed to interact with (instances of) the [form controls](../overview.md).
|
||||
|
||||
```js preview-story
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
# Inputs >> Input Amount >> Overview ||10
|
||||
|
||||
`lion-input-amount` component is based on the generic text input field. Its purpose is to provide a way for users to fill in an amount.
|
||||
A web component based on the generic text input field. Its purpose is to provide a way for users to fill in an amount.
|
||||
|
||||
For formatting, we use [Intl NumberFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat) with some overrides.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
# Inputs >> Input Date >> Overview ||10
|
||||
|
||||
`lion-input-date` component is based on the generic text input field. Its purpose is to provide a way for users to fill in a date.
|
||||
A web component based on the generic text input field. Its purpose is to provide a way for users to fill in a date.
|
||||
|
||||
```js script
|
||||
import { html } from '@lion/core';
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
# Inputs >> Input Datepicker >> Overview ||10
|
||||
|
||||
`lion-input-datepicker` component is based on the date text input field. Its purpose is to provide a way for users to fill in a date with a datepicker.
|
||||
A web component based on the date text input field. Its purpose is to provide a way for users to fill in a date with a datepicker.
|
||||
For an input field with a big range, such as `birthday-input`, a datepicker is not the best choice due to the high variance between possible inputs.
|
||||
We encourage using the standard [lion-input-date](../input-date/overview.md) for this.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
# Inputs >> Input Email >> Overview ||10
|
||||
|
||||
`lion-input-email` component is based on the generic text input field. Its purpose is to provide a way for users to fill in an email.
|
||||
A web component based on the generic text input field. Its purpose is to provide a way for users to fill in an email.
|
||||
|
||||
```js script
|
||||
import { html } from '@lion/core';
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
# Inputs >> Input Iban >> Overview ||10
|
||||
|
||||
`lion-input-iban` component is based on the generic text input field.
|
||||
A web component based on the generic text input field.
|
||||
Its purpose is to provide a way for users to fill in an IBAN (International Bank Account Number).
|
||||
|
||||
```js script
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
# Inputs >> Input Range >> Overview ||10
|
||||
|
||||
`lion-input-range` component is based on the native range input.
|
||||
Its purpose is to provide a way for users to select one value from a range of values.
|
||||
A web component based on the native range input. Its purpose is to provide a way for users to select one value from a range of values.
|
||||
|
||||
```js script
|
||||
import { html } from '@lion/core';
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
# Inputs >> Input Stepper >> Overview ||10
|
||||
|
||||
`lion-input-stepper` enables the user to increase and decrease a numeric value by predefined range. It is a combination of two buttons and a number input field with an optional slot `after` to suffix the extra information.
|
||||
A web component that enables the user to increase and decrease a numeric value by predefined range. It is a combination of two buttons and a number input field with an optional slot `after` to suffix the extra information.
|
||||
|
||||
```js script
|
||||
import { html } from '@lion/core';
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
# Inputs >> Input >> Overview ||10
|
||||
|
||||
`lion-input` component is a webcomponent that enhances the functionality of the native `<input>` element.
|
||||
|
||||
```js script
|
||||
import { html } from '@lion/core';
|
||||
import '@lion/input/define';
|
||||
```
|
||||
|
||||
A web component that enhances the functionality of the native `<input>` element.
|
||||
|
||||
```js preview-story
|
||||
export const main = () => html`<lion-input label="First Name"></lion-input>`;
|
||||
```
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
# Inputs >> Listbox >> Overview ||10
|
||||
|
||||
A listbox widget presents a list of options and allows a user to select one or more of them.
|
||||
A listbox that allows a single option to be chosen is a single-select listbox; one that allows
|
||||
multiple options to be selected is a multi-select listbox.
|
||||
A widget that presents a list of options and allows a user to select one or more of them.
|
||||
A listbox that allows a single option to be chosen is a `single-select listbox`; one that allows
|
||||
multiple options to be selected is a `multi-select listbox`.
|
||||
|
||||
> From [listbox wai-aria best practices](https://www.w3.org/TR/wai-aria-practices/#Listbox)
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
# Inputs >> Radio Group >> Overview ||10
|
||||
|
||||
`lion-radio-group` component is webcomponent that enhances the functionality of the native `<input type="radio">` element. Its purpose is to provide a way for users to check a **single** option amongst a set of choices.
|
||||
A web component that enhances the functionality of the native `<input type="radio">` element. Its purpose is to provide a way for users to check a **single** option amongst a set of choices.
|
||||
|
||||
You should use `<lion-radio>`s inside this element.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,9 +1,8 @@
|
|||
# Inputs >> Select Rich >> Overview ||10
|
||||
|
||||
`lion-select-rich` component is a 'rich' version of the native `<select>` element.
|
||||
It allows providing fully customized options and a fully customized invoker button.
|
||||
The component is meant to be used whenever the native `<select>` doesn't provide enough
|
||||
styling/theming/user interaction opportunities.
|
||||
This web component is a 'rich' version of the native `<select>` element.
|
||||
It allows providing fully customized options and a fully customized invoker button and is meant to be used whenever the native `<select>` doesn't provide enough
|
||||
styling,theming or user interaction opportunities.
|
||||
|
||||
Its implementation is based on the following Design pattern:
|
||||
<https://www.w3.org/TR/wai-aria-practices/examples/listbox/listbox-collapsible.html>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,9 @@
|
|||
# Inputs >> Select >> Overview ||10
|
||||
|
||||
`lion-select` component is a wrapper around the native `select`.
|
||||
A web component that works as a wrapper around the native `select`.
|
||||
|
||||
You cannot use interactive elements inside the options. Avoid very long names to
|
||||
facilitate the understandability and perceivability for screen reader users. Sets of options
|
||||
where each option name starts with the same word or phrase can also significantly degrade
|
||||
usability for keyboard and screen reader users.
|
||||
You cannot use interactive elements inside the options. Avoid very long names to facilitate the understandability and perceivability for screen reader users.
|
||||
Sets of options where each option name starts with the same word or phrase can also significantly degrade usability for keyboard and screen reader users.
|
||||
|
||||
```js script
|
||||
import { html } from '@lion/core';
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
# Inputs >> Textarea >> Overview ||10
|
||||
|
||||
`lion-textarea` is a webcomponent that enhances the functionality of the native `<input type="textarea">` element.
|
||||
A webcomponent that enhances the functionality of the native `<input type="textarea">` element.
|
||||
Its purpose is to provide a way for users to write text that is multiple lines long.
|
||||
|
||||
```js script
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
# Interaction >> Button >> Overview ||10
|
||||
|
||||
`lion-button` provides a button component that is easily stylable and accessible.
|
||||
A button web component that is easily stylable and accessible.
|
||||
|
||||
```js script
|
||||
import { html } from '@lion/core';
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
# Interaction >> Dialog >> Overview ||10
|
||||
|
||||
`lion-dialog` is a component wrapping a modal dialog controller.
|
||||
A web component that wraps a modal dialog controller.
|
||||
Its purpose is to make it easy to use our Overlay System declaratively.
|
||||
|
||||
```js script
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
# Interaction >> Switch >> Overview ||10
|
||||
|
||||
`lion-switch` is a component that is used to toggle a property or feature on or off. Toggling the component on or off should have immediate action and should not require pressing any additional buttons (submit) to confirm what just happened. The Switch is not a Checkbox in disguise and should not be used as part of a form.
|
||||
A web component that is used to toggle a property or feature on or off. Toggling the component on or off should have immediate action and should not require pressing any additional buttons (submit) to confirm what just happened. Switch is not a Checkbox in disguise and should not be used as part of a form.
|
||||
|
||||
```js script
|
||||
import { html } from '@lion/core';
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
# Interaction >> Tooltip >> Overview ||10
|
||||
|
||||
`lion-tooltip` is a component used for basic popups on hover.
|
||||
A web component used for basic popups on hover.
|
||||
Its purpose is to show content appearing when the user hovers over an invoker element with the cursor or with the keyboard, or if the invoker element is focused.
|
||||
|
||||
```js script
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
# Navigation >> Pagination >> Overview ||10
|
||||
|
||||
`lion-pagination` is a component that handles pagination.
|
||||
A web component that handles pagination.
|
||||
|
||||
```js script
|
||||
import { html } from '@lion/core';
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
# Navigation >> Steps >> Overview ||10
|
||||
|
||||
`lion-steps` breaks a single goal down into dependable sub-tasks.
|
||||
A web component that can be used to break a single goal down into dependable sub-tasks.
|
||||
|
||||
```js script
|
||||
import { html } from '@lion/core';
|
||||
|
|
|
|||
Loading…
Reference in a new issue