Skip to content

Commit

Permalink
Style(web-react): Fix documentation content according to the textlint…
Browse files Browse the repository at this point in the history 
… rules
  • Loading branch information
@literat
literat committed Sep 12, 2024
1 parent 8ace5fb commit 5cc636f
Show file tree
Hide file tree
Showing 22 changed files with 67 additions and 67 deletions.
12 changes: 6 additions & 6 deletions packages/web-react/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ import { Button } from '@lmc-eu/spirit-web-react/components/Button';

### Prefixing CSS classes in components

If you want to prefix the component classes with your own namespace, you can use the `ClassNamePrefixProvider` context to provide a prefix to all components in your app.
To prefix the component classes with your own namespace, you can use the `ClassNamePrefixProvider` context to provide a prefix to all components in your app.

Check [`spirit-web` docs][web-pkg-prefixes] to learn how to prefix CSS class names.

Expand All @@ -61,19 +61,19 @@ All components accept additional attributes that are passed down to the root ele
This is useful for adding custom event handlers, accessibility attributes, or other attributes that
are not supported by the component API.

ℹ️ If you need to pass down event handlers to the native form elements in our form components,
ℹ️ To pass down event handlers to the native form elements in our form components,
you can use the `inputProps` prop.

Supported attributes are:

- `on*` (eg. `onclick`)
- `on*` (for example `onclick`)
- `data-*`
- `aria-*`
- `id`

If the component sets a value for any of these attributes, the value passed in will be overwritten.

Most components also accept native HTML attributes based on the component's element type.
Most components also accept native HTML attributes based on the component’s element type.

## Styling

Expand All @@ -94,7 +94,7 @@ All Spirit components accept a set of props that can be used to control their ou
- `marginX`
- `marginY`

These props accept a spacing token (eg. `space-100`), `auto` or an object with breakpoint keys and spacing token
These props accept a spacing token (for example `space-100`), `auto` or an object with breakpoint keys and spacing token
values or `auto`. We use these props to set global CSS utility classes on the root element of the component.

Examples:
Expand All @@ -108,7 +108,7 @@ If you need even more control over the component styling, use [escape hatches](#

### Escape Hatches

While we encourage teams to utilize Spirit design as it is, we do realize that sometimes product specific customizations
While we encourage teams to use Spirit design as it is, we do realize that sometimes product specific customizations
may be needed. In these cases, we encourage you or your designers to **talk to us**. We may be able to suggest
an alternative implementation strategy, or perhaps your design can help propose future Spirit additions.

Expand Down
6 changes: 3 additions & 3 deletions packages/web-react/src/components/Accordion/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -138,7 +138,7 @@ import { AccordionOpenStateType } from '@lmc-eu/spirit-web-react/types';

| Name | Type | Default | Required | Description |
| ------------- | --------------------------------- | --------- | -------- | ------------------------------------------------ |
| `children` | `ReactNode` | — | ✓ | Accordion children's nodes |
| `children` | `ReactNode` | — | ✓ | Accordion children’s nodes |
| `elementType` | [`section` \| `article` \| `div`] | `section` | ✕ | Type of element used as wrapper |
| `open` | [`string` \| `string[]`] | — | ✕ | Open item or list of open items \* |
| `toggle` | `(id: string) => void` | — | ✕ | A generic handler for a single **AccordionItem** |
Expand All @@ -153,7 +153,7 @@ and [escape hatches][readme-escape-hatches].

| Name | Type | Default | Required | Description |
| ------------- | --------------------------------- | --------- | -------- | ---------------------------------------------- |
| `children` | `ReactNode` | — | ✓ | Accordion children's nodes |
| `children` | `ReactNode` | — | ✓ | Accordion children’s nodes |
| `defaultOpen` | [`string` \| `string[]`] | — | ✕ | Default open item(s) \* |
| `elementType` | [`section` \| `article` \| `div`] | `section` | ✕ | Type of element used as wrapper |
| `stayOpen` | `bool` | — | ✕ | Item stay open when another one is also opened |
Expand All @@ -170,7 +170,7 @@ and [escape hatches][readme-escape-hatches].
| ------------- | --------------------------------- | --------- | -------- | ----------------------------------------------- |
| `children` | `ReactNode` | — | ✓ | Item children node |
| `elementType` | [`article` \| `section` \| `div`] | `article` | ✕ | Type of element used as wrapper for single item |
| `id` | `string` | — | ✓ | Item id |
| `id` | `string` | — | ✓ | Item ID |

On top of the API options, the components accept [additional attributes][readme-additional-attributes].
If you need more control over the styling of a component, you can use [style props][readme-style-props]
Expand Down
2 changes: 1 addition & 1 deletion packages/web-react/src/components/Alert/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ and [escape hatches][readme-escape-hatches].

For detailed information see [Alert][alert] component.

⚠️ Please pay attention to the accessibility setting when Alert is dynamically displayed. In case you need to use the component as an information that requires the user's immediate attention,
⚠️ Please pay attention to the accessibility setting when Alert is dynamically displayed. In case you need to use the component as an information that requires the user’s immediate attention,
you can set `role="alert"` as an [additional attribute][readme-additional-attributes].

[alert]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web/src/scss/components/Alert/README.md
Expand Down
8 changes: 4 additions & 4 deletions packages/web-react/src/components/Breadcrumbs/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ Simply pass the breadcrumbs array as a prop:

### Custom usage

Use custom content for the ordered list as component's children instead of passing breadcrumb items array via props:
Use custom content for the ordered list as component’s children instead of passing breadcrumb items array via props:

```jsx
<Breadcrumbs>
Expand All @@ -59,7 +59,7 @@ Use custom content for the ordered list as component's children instead of passi
| ------------- | ------------------- | ------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `children` | `ReactNode` | — | ✕ | Custom content to override items rendering from array |
| `elementType` | `ElementType` | `nav` | ✕ | Type of element used as wrapper |
| `goBackTitle` | `string` | — | ✕ | Title/translation for back link to previous page on mobile. It's essential to be set along with items. If items property is not passed, the back link is to be created within children property. |
| `goBackTitle` | `string` | — | ✕ | Title/translation for back link to previous page on mobile. It’s essential to be set along with items. If items property is not passed, the back link is to be created within children property. |
| `items` | `BreadcrumbsItem[]` | — | ✕ | Navigation menu items |

On top of the API options, the components accept [additional attributes][readme-additional-attributes].
Expand All @@ -68,7 +68,7 @@ and [escape hatches][readme-escape-hatches].

## BreadcrumbsItem

Use the `BreadcrumbsItem` component for the ordered list as the component's children instead of passing the breadcrumb items array via props:
Use the `BreadcrumbsItem` component for the ordered list as the component’s children instead of passing the breadcrumb items array via props:

```jsx
<Breadcrumbs>
Expand Down Expand Up @@ -100,7 +100,7 @@ and [escape hatches][readme-escape-hatches].
### Dealing with long titles

When you need to shorten the title of the BreadcrumbsItem the preferred way is to use platform native helpers.
There are multiple ways in JavaScript which will truncate a string for you like `.slice` or `.substring`, e.g. `str.slice(0, num) + '…'`.
There are multiple ways in JavaScript which will truncate a string for you like `.slice` or `.substring`, for example `str.slice(0, num) + '…'`.

Additional option is to use helper class `text-truncate` with defined width.

Expand Down
4 changes: 2 additions & 2 deletions packages/web-react/src/components/Collapse/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@ const [isOpen, toggle] = useState<boolean>(true);
| ------------------------- | ----------------------------------- | ------- | -------- | ------------------------------------------- |
| `collapsibleToBreakpoint` | [`mobile` \| `tablet` \| `desktop`] | — | ✕ | Handle for responsive breakpoint |
| `elementType` | [`span` \| `div`] | `div` | ✕ | Type of element used as wrapper and content |
| `id` | `string` | — | ✓ | Component id |
| `id` | `string` | — | ✓ | Component ID |
| `isOpen` | `bool` | — | ✕ | Is open on initialization |
| `transitionDuration` | `number` | `250` | ✕ | Transition duration in miliseconds |

Expand Down Expand Up @@ -131,7 +131,7 @@ import { Button, UncontrolledCollapse } from '@lmc-eu/spirit-web-react/component
| ------------------------- | -------------------------------------------- | ------- | -------- | ------------------------------------------- |
| `collapsibleToBreakpoint` | [`mobile` \| `tablet` \| `desktop`] | — | ✕ | Handle for responsive breakpoint |
| `elementType` | [`span` \| `div`] | `div` | ✕ | Type of element used as wrapper and content |
| `id` | `string` | — | ✓ | Component id |
| `id` | `string` | — | ✓ | Component ID |
| `isOpen` | `bool` | — | ✕ | Is open on initialization |
| `hideOnCollapse` | `bool` | — | ✕ | Hides button when content is displayed |
| `renderTrigger` | `(render: CollapseRenderProps) => ReactNode` | — | ✕ | Properties for trigger render |
Expand Down
4 changes: 2 additions & 2 deletions packages/web-react/src/components/Dropdown/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ import { UncontrolledDropdown, DropdownTrigger, DropdownPopover } from '@lmc-eu/
| ----------------- | ------------------------------------------------ | -------------- | -------- | ---------------------------------------------- |
| `enableAutoClose` | `bool` | `true` | ✕ | Enables close on click outside of Dropdown |
| `fullWidthMode` | [`DropdownFullwidthMode`][dropdownfullwidthmode] | `off` | ✕ | Full-width mode |
| `id` | `string` | — | ✓ | Component id |
| `id` | `string` | — | ✓ | Component ID |
| `isOpen` | `bool` | `false` | ✓ | Open state |
| `onAutoClose` | `(event: Event) => void` | — | ✕ | Callback on close on click outside of Dropdown |
| `onToggle` | `() => void` | — | ✓ | Function for toggle open state of dropdown |
Expand Down Expand Up @@ -93,7 +93,7 @@ and [escape hatches][readme-escape-hatches].
| ----------------- | ------------------------------------------------ | -------------- | -------- | ---------------------------------------------- |
| `enableAutoClose` | `bool` | `true` | ✕ | Enables close on click outside of Dropdown |
| `fullWidthMode` | [`DropdownFullwidthMode`][dropdownfullwidthmode] | `off` | ✕ | Full-width mode |
| `id` | `string` | `<random>` | ✕ | Component id |
| `id` | `string` | `<random>` | ✕ | Component ID |
| `onAutoClose` | `(event: Event) => void` | — | ✕ | Callback on close on click outside of Dropdown |
| `placement` | [Placement dictionary][dictionary-placement] | `bottom-start` | ✕ | Alignment of the component |

Expand Down
Loading

0 comments on commit 5cc636f

Please sign in to comment.