chore: remove lion-specific component namings from overview files

This commit is contained in:
Konstantinos Norgias 2021-03-22 17:48:22 +01:00 committed by Thomas Allmer
parent 4dc169c65f
commit c7b7881f1f
27 changed files with 35 additions and 39 deletions

View file

@ -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

View file

@ -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';

View file

@ -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

View file

@ -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';

View file

@ -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';

View file

@ -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>`.

View file

@ -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`

View file

@ -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

View file

@ -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.

View file

@ -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';

View file

@ -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.

View file

@ -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';

View file

@ -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

View file

@ -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';

View file

@ -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';

View file

@ -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>`;
```

View file

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

View file

@ -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.

View file

@ -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>

View file

@ -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';

View file

@ -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

View file

@ -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';

View file

@ -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

View file

@ -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';

View file

@ -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

View file

@ -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';

View file

@ -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';