Skip to content

Commit

Permalink
Docs(web-twig): Document all allowed HTML attributes in all components
Browse files Browse the repository at this point in the history
  • Loading branch information
@adamkudrna
adamkudrna committed Aug 17, 2023
1 parent 470fefd commit 02b1dac
Show file tree
Hide file tree
Showing 17 changed files with 58 additions and 47 deletions.
3 changes: 2 additions & 1 deletion packages/web-twig/src/Resources/components/Button/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,11 +37,12 @@ Without lexer:
| Prop name | Type | Default | Required | Description |
| ------------ | ----------------------------------------------------------------------------------------- | --------- | -------- | -------------------------------------------------------------------------- |
| `color` | [Action Color dictionary][dictionary-color], [Emotion Color dictionary][dictionary-color] | `primary` | no | Color variant |
| `formtarget` | `string` | `null` | no | Submit button target |
| `isBlock` | `bool` | `false` | no | Span the element to the full width of its parent |
| `isDisabled` | `bool` | `false` | no | If true, Button is disabled |
| `isLoading` | `bool` | `false` | no | If true, Button is in a loading state, disabled and the Spinner is visible |
| `isSquare` | `bool` | `false` | no | If true, Button is square, usually only with an Icon |
| `name` | `string` | `null` | no | For use a button as a form data reference |
| `name` | `string` | `null` | no | Submit button name |
| `size` | [Size dictionary][dictionary-size] | `medium` | no | Size variant |
| `type` | `string` | `button` | no | Type of the Button |

Expand Down
5 changes: 1 addition & 4 deletions packages/web-twig/src/Resources/components/ButtonLink/ButtonLink.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,10 +20,7 @@
{# Miscellaneous #}
{%- set _styleProps = useStyleProps(props) -%}
{%- set _classNames = [ _rootClassName, _rootColorClassName, _rootBlockClassName, _rootDisabledClassName, _rootLoadingClassName, _rootSizeClassName, _rootSquareClassName, _styleProps.className ] -%}
{%- set _allowedAttributes = [
'title',
'target',
] -%}
{%- set _allowedAttributes = [ 'target', 'title' ] -%}

<a
{{ mainProps(props, _allowedAttributes) }}
Expand Down
2 changes: 1 addition & 1 deletion packages/web-twig/src/Resources/components/ButtonLink/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ Without lexer:
| `isDisabled` | `bool` | `false` | no | If true, ButtonLink is disabled |
| `isLoading` | `bool` | `false` | no | If true, ButtonLink is in a loading state, disabled and the Spinner is visible |
| `isSquare` | `bool` | `false` | no | If true, ButtonLink is square, usually only with an Icon |
| `target` | `string` | `null` | no | Link target |
| `target` | `string` | `null` | no | Browsing context for the link |
| `title` | `string` | `null` | no | Optional title to display on hover |

You can add `id`, `data-*` or `aria-*` attributes to further extend component's
Expand Down
2 changes: 1 addition & 1 deletion packages/web-twig/src/Resources/components/FieldGroup/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -99,8 +99,8 @@ When validated on server:

| Prop name | Type | Default | Required | Description |
| ----------------------- | ---------------------------------------------- | ------- | -------- | ------------------------------------------ |
| `helperText` | `string` | `null` | no\*\* | Custom helper text |
| `form` | `string` | `null` | no | Parent form ID |
| `helperText` | `string` | `null` | no\*\* | Custom helper text |
| `id` | `string` | — | yes | Group and label identification |
| `isDisabled` | `bool` | `false` | no | If true, the group is disabled |
| `isLabelHidden` | `bool` | `false` | no | If true, label is hidden |
Expand Down
2 changes: 2 additions & 0 deletions packages/web-twig/src/Resources/components/FileUploader/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -183,6 +183,7 @@ To mark the input as disabled, simply add the `isDisabled` attribute:

| Prop name | Type | Default | Required | Description |
| ----------------------- | ---------------------------------------------- | ----------------------- | -------- | --------------------------------------------------------------------- |
| `accept` | `string` | `null` | no | Allowed file types |
| `dragAndDropText` | `string` | `or drag and drop here` | no | Text shown in the drop zone if drag-and-drop is enabled on the device |
| `helperText` | `string` | `null` | no\*\* | Custom helper text |
| `iconName` | `string` | `upload` | no | Icon used in the drop zone |
Expand All @@ -193,6 +194,7 @@ To mark the input as disabled, simply add the `isDisabled` attribute:
| `label` | `string` | `null` | no\* | Label text |
| `maxFileSize` | `number` | `1000000` | no | The maximum size of the uploaded file in bytes |
| `maxUploadedFiles` | `number` | `10` | no | Maximum file upload queue size |
| `multiple` | `bool` | `false` | no | If true, multiple files can be selected |
| `name` | `string` | `null` | no | Input name |
| `pickAFileText` | `string` | `Upload your file` | no | Text shown in the drop zone |
| `queueLimitBehavior` | `'hide', 'disable', 'none'` | `none` | no | Input behavior when the file queue is filled |
Expand Down
20 changes: 10 additions & 10 deletions packages/web-twig/src/Resources/components/Header/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -245,11 +245,11 @@ There is no API for HeaderNavItem.

##### HeaderLink API

| Prop name | Type | Default | Required | Description |
| ----------- | --------- | ------- | -------- | ----------------------- |
| `href` | `string` | — | yes | Link URL |
| `isCurrent` | `boolean` | `false` | no | Mark link as current |
| `target` | `string` | `null` | no | HTML `target` attribute |
| Prop name | Type | Default | Required | Description |
| ----------- | --------- | ------- | -------- | ----------------------------- |
| `href` | `string` | — | yes | Link URL |
| `isCurrent` | `boolean` | `false` | no | Mark link as current |
| `target` | `string` | `null` | no | Browsing context for the link |

##### HeaderButton API

Expand Down Expand Up @@ -385,11 +385,11 @@ There is no API for HeaderDialogNavItem.

##### HeaderDialogLink API

| Prop name | Type | Default | Required | Description |
| ----------- | --------- | ------- | -------- | ----------------------- |
| `href` | `string` | — | yes | Link URL |
| `isCurrent` | `boolean` | `false` | no | Mark link as current |
| `target` | `string` | `null` | no | HTML `target` attribute |
| Prop name | Type | Default | Required | Description |
| ----------- | --------- | ------- | -------- | ----------------------------- |
| `href` | `string` | — | yes | Link URL |
| `isCurrent` | `boolean` | `false` | no | Mark link as current |
| `target` | `string` | `null` | no | Browsing context for the link |

##### HeaderDialogButton API

Expand Down
4 changes: 1 addition & 3 deletions packages/web-twig/src/Resources/components/Header/_abstracts/Link.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,7 @@

{# Miscellaneous #}
{%- set _classNames = [ _rootClassName, _rootCurrentClassName, _class ] -%}
{%- set _allowedAttributes = [
'target',
] -%}
{%- set _allowedAttributes = [ 'target' ] -%}

<a
{{ mainProps(props, _allowedAttributes) }}
Expand Down
9 changes: 5 additions & 4 deletions packages/web-twig/src/Resources/components/Heading/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,10 +28,11 @@ Without lexer:

## API

| Prop name | Type | Default | Required | Description |
| ------------- | ------------------------------------------- | -------- | -------- | ------------------ |
| `size` | [Size Extended dictionary][dictionary-size] | `medium` | no | Size of the text |
| `elementType` | `string` | `div` | no | HTML tag to render |
| Prop name | Type | Default | Required | Description |
| ------------- | ------------------------------------------- | -------- | -------- | -------------------------------------------------------------- |
| `size` | [Size Extended dictionary][dictionary-size] | `medium` | no | Size of the text |
| `elementType` | `string` | `div` | no | HTML tag to render |
| `translate` | [`yes`, `no`] | `null` | no | Set to `no` to disable machine translation of the text content |

You can add `id`, `data-*` or `aria-*` attributes to further extend component's
descriptiveness and accessibility. Also, UNSAFE styling props are available,
Expand Down
5 changes: 1 addition & 4 deletions packages/web-twig/src/Resources/components/Link/Link.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,10 +13,7 @@
{# Miscellaneous #}
{%- set _styleProps = useStyleProps(props) -%}
{%- set _classNames = [ _colorClassName, _rootDisabledClassName, _rootUnderlinedClassName, _styleProps.className ] -%}
{%- set _allowedAttributes = [
'title',
'target',
] -%}
{%- set _allowedAttributes = [ 'target', 'title' ] -%}

<a
{{ mainProps(props, _allowedAttributes) }}
Expand Down
2 changes: 1 addition & 1 deletion packages/web-twig/src/Resources/components/Link/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ Without lexer:
| `href` | `string` | — | yes | Link URL |
| `isDisabled` | `bool` | `false` | no | If true, Link is disabled |
| `isUnderlined` | `bool` | `false` | no | If true, Link is underlined |
| `target` | `string` | `null` | no | Link target |
| `target` | `string` | `null` | no | Browsing context for the link |
| `title` | `string` | `null` | no | Optional title to display on hover |

You can add `id`, `data-*` or `aria-*` attributes to further extend component's
Expand Down
26 changes: 18 additions & 8 deletions packages/web-twig/src/Resources/components/Modal/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,18 +57,27 @@ footer of the dialog.

### API

| Prop name | Type | Default | Required | Description |
| ----------------------------- | --------- | --------- | -------- | ------------------------------------------------------------------------------------------------------ |
| `elementType` | `string` | `article` | no | HTML tag to render |
| `isExpandedOnMobile` | `boolean` | `true` | no | If the ModalDialog should expand on mobile. Overrides any height defined by `preferredHeightOnMobile`. |
| `maxHeightFromTabletUp` | `string` | `null` | no | Max height of the modal. Accepts any valid CSS value. |
| `preferredHeightOnMobile` | `string` | `null` | no | Preferred height of the modal on mobile. Accepts any valid CSS value. |
| `preferredHeightFromTabletUp` | `string` | `null` | no | Preferred height of the modal on tablet and larger. Accepts any valid CSS value. |
| Prop name | Type | Default | Required | Description |
| ----------------------------- | ------------------------- | --------- | -------- | ------------------------------------------------------------------------------------------------------- |
| `accept-charset` | `string` | `null` | no | `elementType="form"` only: Character encodings to use for form submission (intentionally in kebab-case) |
| `action` | `string` | `null` | no | `elementType="form"` only: URL to use for form submission |
| `autocomplete` | `string` | `null` | no | `elementType="form"` only: [Automated assistance in filling][autocomplete-attr] |
| `elementType` | `string` | `article` | no | HTML tag to render |
| `enctype` | `string` | `null` | no | `elementType="form"` only: Encoding to use for form submission |
| `isExpandedOnMobile` | `boolean` | `true` | no | If the ModalDialog should expand on mobile. Overrides any height defined by `preferredHeightOnMobile`. |
| `maxHeightFromTabletUp` | `string` | `null` | no | Max height of the modal. Accepts any valid CSS value. |
| `method` | [`get`, `post`, `dialog`] | `null` | no | `elementType="form"` only: HTTP method to use for form submission |
| `name` | `string` | `null` | no | `elementType="form"` only: Name of the form |
| `novalidate` | `boolean` | `false` | no | `elementType="form"` only: If the dialog should have validation disabled |
| `preferredHeightOnMobile` | `string` | `null` | no | Preferred height of the modal on mobile. Accepts any valid CSS value. |
| `preferredHeightFromTabletUp` | `string` | `null` | no | Preferred height of the modal on tablet and larger. Accepts any valid CSS value. |
| `rel` | `string` | `null` | no | `elementType="form"` only: Relationship between the current document and the linked resource |
| `target` | `string` | `null` | no | `elementType="form"` only: Browsing context for form submission |

On top of the API options, you can add `data-*` or `aria-*` attributes to
further extend component's descriptiveness and accessibility. Also, UNSAFE styling props are available,
see the [Escape hatches][escape-hatches] section in README to learn how and when to use them.
These attributes will be passed to the topmost HTML element of the component. Also all `form` attributes
These attributes will be passed to the topmost HTML element of the component. Also, all `form` attributes
are allowed when the `elementType` is set to `form`.

### Forms in Modal
Expand Down Expand Up @@ -221,5 +230,6 @@ When you put it all together:

[modal]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web/src/scss/components/Modal
[mdn-dialog-form]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog#usage_notes
[autocomplete-attr]: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete
[dictionary-alignment]: https://github.com/lmc-eu/spirit-design-system/blob/main/docs/DICTIONARIES.md#alignment
[escape-hatches]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web-twig/README.md#escape-hatches
4 changes: 2 additions & 2 deletions packages/web-twig/src/Resources/components/Pagination/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -102,7 +102,7 @@ These attributes will be passed to the topmost HTML element of the component.
| `href` | `string` | `null` | no | URL target of a link |
| `isCurrent` | `boolean` | `false` | no | Mark link as current |
| `pageNumber` | `string` | `null` | yes | Page number, hidden for screen readers |
| `target` | `string` | `null` | no | HTML `target` attribute |
| `target` | `string` | `null` | no | Browsing context for the link |

You can add `data-*` or `aria-*` attributes to further extend component's
descriptiveness and accessibility. Also, UNSAFE styling props are available,
Expand Down Expand Up @@ -142,7 +142,7 @@ These attributes will be passed to the topmost HTML element of the component.
| -------------------- | -------- | -------------------- | -------- | --------------------------------- |
| `accessibilityLabel` | `string` | `Next` or `Previous` | no | Accessibility label of the button |
| `href` | `string` | — | no | Link URL |
| `target` | `string` | `null` | no | HTML `target` attribute |
| `target` | `string` | `null` | no | Browsing context for the link |

You can add `data-*` or `aria-*` attributes to further extend component's
descriptiveness and accessibility. Also, UNSAFE styling props are available,
Expand Down
Loading

0 comments on commit 02b1dac

Please sign in to comment.