Skip to content

Commit

Permalink
Style(web-react): Fix docs using makrdown linter
Browse files Browse the repository at this point in the history 
refs #DS-1100
  • Loading branch information
@literat
literat committed Dec 11, 2024
1 parent cf96773 commit 0814b42
Show file tree
Hide file tree
Showing 32 changed files with 267 additions and 256 deletions.
1 change: 0 additions & 1 deletion .remarkignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,4 +11,3 @@ build
docs
form-validations
web-twig
web-react
34 changes: 17 additions & 17 deletions packages/web-react/src/components/Accordion/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -136,12 +136,12 @@ import { AccordionOpenStateType } from '@lmc-eu/spirit-web-react/types';

## Accordion Props

| Name | Type | Default | Required | Description |
| ------------- | --------------------------------- | --------- | -------- | ------------------------------------------------ |
| `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** |
| Name | Type | Default | Required | Description |
| ------------- | ---------------------------------- | --------- | -------- | ------------------------------------------------ |
| `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** |

(\*) Depending on the type of default value, what is set as the default will affect whether one or more will be open at the same time.

Expand All @@ -151,12 +151,12 @@ and [escape hatches][readme-escape-hatches].

## Uncontrolled Accordion Props

| Name | Type | Default | Required | Description |
| ------------- | --------------------------------- | --------- | -------- | ---------------------------------------------- |
| `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 |
| Name | Type | Default | Required | Description |
| ------------- | ---------------------------------- | --------- | -------- | ---------------------------------------------- |
| `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 |

(\*) If this attribute is an array, then the `stayOpen` parameter should also be set.

Expand All @@ -166,11 +166,11 @@ and [escape hatches][readme-escape-hatches].

## AccordionItem Props

| Name | Type | Default | Required | Description |
| ------------- | --------------------------------- | --------- | -------- | ----------------------------------------------- |
| `children` | `ReactNode` | — | ✓ | Item children node |
| `elementType` | [`article` \| `section` \| `div`] | `article` | ✕ | Type of element used as wrapper for single item |
| `id` | `string` | — | ✓ | Item id |
| Name | Type | Default | Required | Description |
| ------------- | ---------------------------------- | --------- | -------- | ----------------------------------------------- |
| `children` | `ReactNode` | — | ✓ | Item children node |
| `elementType` | \[`article` \| `section` \| `div`] | `article` | ✕ | Type of element used as wrapper for single item |
| `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/Checkbox/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ On top of the API options, the components accept [additional attributes][readme-
If you need more control over the styling of a component, you can use [style props][readme-style-props]
and [escape hatches][readme-escape-hatches].

## Custom component
## Custom Component

Text field classes are fabricated using `useCheckboxStyleProps` hook. You can use it to create your own custom Checkbox component.

Expand Down
18 changes: 9 additions & 9 deletions packages/web-react/src/components/Collapse/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,13 +76,13 @@ const [isOpen, toggle] = useState<boolean>(true);

## API

| Name | Type | Default | Required | Description |
| ------------------------- | ----------------------------------- | ------- | -------- | ------------------------------------------- |
| `collapsibleToBreakpoint` | [`mobile` \| `tablet` \| `desktop`] | — | ✕ | Handle for responsive breakpoint |
| `elementType` | [`span` \| `div`] | `div` | ✕ | Type of element used as wrapper and content |
| `id` | `string` | — | ✓ | Component id |
| `isOpen` | `bool` | — | ✕ | Is open on initialization |
| `transitionDuration` | `number` | `250` | ✕ | Transition duration in miliseconds |
| Name | Type | Default | Required | Description |
| ------------------------- | ------------------------------------ | ------- | -------- | ------------------------------------------- |
| `collapsibleToBreakpoint` | \[`mobile` \| `tablet` \| `desktop`] | — | ✕ | Handle for responsive breakpoint |
| `elementType` | \[`span` \| `div`] | `div` | ✕ | Type of element used as wrapper and content |
| `id` | `string` | — | ✓ | Component id |
| `isOpen` | `bool` | — | ✕ | Is open on initialization |
| `transitionDuration` | `number` | `250` | ✕ | Transition duration in miliseconds |

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 Expand Up @@ -129,8 +129,8 @@ import { Button, UncontrolledCollapse } from '@lmc-eu/spirit-web-react/component

| Name | Type | Default | Required | Description |
| ------------------------- | -------------------------------------------- | ------- | -------- | -------------------------------------------------------------------------------------------------------- |
| `collapsibleToBreakpoint` | [`mobile` \| `tablet` \| `desktop`] | — | ✕ | Handle for responsive breakpoint |
| `elementType` | [`span` \| `div`] | `div` | ✕ | Type of element used as wrapper and content |
| `collapsibleToBreakpoint` | \[`mobile` \| `tablet` \| `desktop`] | — | ✕ | Handle for responsive breakpoint |
| `elementType` | \[`span` \| `div`] | `div` | ✕ | Type of element used as wrapper and content |
| `hideOnCollapse` | `bool` | `false` | ✕ | [**DEPRECATED**][readme-deprecations] in favor of `isDisposable`; Hides button when content is displayed |
| `id` | `string` | — | ✓ | Component id |
| `isDisposable` | `bool` | `false` | ✕ | Hides trigger when content is displayed |
Expand Down
46 changes: 23 additions & 23 deletions packages/web-react/src/components/Dropdown/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,50 +52,50 @@ import { UncontrolledDropdown, DropdownTrigger, DropdownPopover } from '@lmc-eu/

### Dropdown

| Name | Type | Default | Required | Description |
| ----------------- | ------------------------------------------------ | -------------- | -------- | ---------------------------------------------- |
| `enableAutoClose` | `bool` | `true` | ✕ | Enables close on click outside of Dropdown |
| `fullWidthMode` | [`DropdownFullwidthMode`][dropdownfullwidthmode] | `off` | ✕ | Full-width mode |
| `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 |
| `placement` | [Placement dictionary][dictionary-placement] | `bottom-start` | ✕ | Alignment of the component |
| Name | Type | Default | Required | Description |
| ----------------- | ------------------------------------------------- | -------------- | -------- | ---------------------------------------------- |
| `enableAutoClose` | `bool` | `true` | ✕ | Enables close on click outside of Dropdown |
| `fullWidthMode` | \[`DropdownFullwidthMode`][dropdownfullwidthmode] | `off` | ✕ | Full-width mode |
| `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 |
| `placement` | [Placement dictionary][dictionary-placement] | `bottom-start` | ✕ | Alignment of the component |

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]
and [escape hatches][readme-escape-hatches].

### DropdownTrigger

| Name | Type | Default | Required | Description |
| ------------- | ------------------------- | -------- | -------- | -------------------------------- |
| `children` | [`string` \| `ReactNode`] | — | ✓ | Content of trigger element |
| `elementType` | [`string` \| `ReactNode`] | `button` | ✕ | Element type of dropdown trigger |
| Name | Type | Default | Required | Description |
| ------------- | -------------------------- | -------- | -------- | -------------------------------- |
| `children` | \[`string` \| `ReactNode`] | — | ✓ | Content of trigger element |
| `elementType` | \[`string` \| `ReactNode`] | `button` | ✕ | Element type of dropdown trigger |

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]
and [escape hatches][readme-escape-hatches].

### DropdownPopover

| Name | Type | Default | Required | Description |
| ---------- | ------------------------- | ------- | -------- | -------------------------- |
| `children` | [`string` \| `ReactNode`] | — | ✓ | Content of trigger element |
| Name | Type | Default | Required | Description |
| ---------- | -------------------------- | ------- | -------- | -------------------------- |
| `children` | \[`string` \| `ReactNode`] | — | ✓ | Content of trigger element |

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]
and [escape hatches][readme-escape-hatches].

### UncontrolledDropdown

| Name | Type | Default | Required | Description |
| ----------------- | ------------------------------------------------ | -------------- | -------- | ---------------------------------------------- |
| `enableAutoClose` | `bool` | `true` | ✕ | Enables close on click outside of Dropdown |
| `fullWidthMode` | [`DropdownFullwidthMode`][dropdownfullwidthmode] | `off` | ✕ | Full-width mode |
| `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 |
| Name | Type | Default | Required | Description |
| ----------------- | ------------------------------------------------- | -------------- | -------- | ---------------------------------------------- |
| `enableAutoClose` | `bool` | `true` | ✕ | Enables close on click outside of Dropdown |
| `fullWidthMode` | \[`DropdownFullwidthMode`][dropdownfullwidthmode] | `off` | ✕ | Full-width mode |
| `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 |

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
12 changes: 6 additions & 6 deletions packages/web-react/src/components/Field/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,11 +31,11 @@ When displaying text dynamically, set [`role="alert"`][aria-alert-role] on the `

### API

| Name | Type | Default | Required | Description |
| ---------------- | ------------------------ | ------- | -------- | ---------------------------------------------------------------------------------------------- |
| `className` | `string` | — | ✓ | Wrapper custom class name |
| `elementType` | [`span` \| `div`] | `div` | ✕ | Type of element used as main wrapper (applied only for single validation text, otherwise `ul`) |
| `role` | `string` | - | ✕ | The role attribute that describes the role of an element |
| `validationText` | [`string` \| `string[]`] | — | ✕ | Validation text, only visible if validationState is set |
| Name | Type | Default | Required | Description |
| ---------------- | ------------------------- | ------- | -------- | ---------------------------------------------------------------------------------------------- |
| `className` | `string` | — | ✓ | Wrapper custom class name |
| `elementType` | \[`span` \| `div`] | `div` | ✕ | Type of element used as main wrapper (applied only for single validation text, otherwise `ul`) |
| `role` | `string` | - | ✕ | The role attribute that describes the role of an element |
| `validationText` | \[`string` \| `string[]`] | — | ✕ | Validation text, only visible if validationState is set |

[aria-alert-role]: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/alert_role
Loading

0 comments on commit 0814b42

Please sign in to comment.