diff --git a/packages/web-react/README.md b/packages/web-react/README.md index 64721067d2..fc64ad0eb3 100644 --- a/packages/web-react/README.md +++ b/packages/web-react/README.md @@ -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. @@ -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 @@ -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: @@ -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. diff --git a/packages/web-react/src/components/Accordion/README.md b/packages/web-react/src/components/Accordion/README.md index bd502b93a0..a9174d50fe 100644 --- a/packages/web-react/src/components/Accordion/README.md +++ b/packages/web-react/src/components/Accordion/README.md @@ -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** | @@ -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 | @@ -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] diff --git a/packages/web-react/src/components/Alert/README.md b/packages/web-react/src/components/Alert/README.md index 93523132b1..6c04ebf1c4 100644 --- a/packages/web-react/src/components/Alert/README.md +++ b/packages/web-react/src/components/Alert/README.md @@ -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 diff --git a/packages/web-react/src/components/Breadcrumbs/README.md b/packages/web-react/src/components/Breadcrumbs/README.md index 95fbc2a832..bc8cf5d6cd 100644 --- a/packages/web-react/src/components/Breadcrumbs/README.md +++ b/packages/web-react/src/components/Breadcrumbs/README.md @@ -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 @@ -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]. @@ -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 @@ -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. diff --git a/packages/web-react/src/components/Collapse/README.md b/packages/web-react/src/components/Collapse/README.md index c92ee2c1c3..45ac61df07 100644 --- a/packages/web-react/src/components/Collapse/README.md +++ b/packages/web-react/src/components/Collapse/README.md @@ -80,7 +80,7 @@ const [isOpen, toggle] = useState(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 | @@ -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 | diff --git a/packages/web-react/src/components/Dropdown/README.md b/packages/web-react/src/components/Dropdown/README.md index 5da5e24ce7..f26c588521 100644 --- a/packages/web-react/src/components/Dropdown/README.md +++ b/packages/web-react/src/components/Dropdown/README.md @@ -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 | @@ -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` | `` | ✕ | Component id | +| `id` | `string` | `` | ✕ | 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 | diff --git a/packages/web-react/src/components/FileUploader/README.md b/packages/web-react/src/components/FileUploader/README.md index 45c5da639e..cb042281c5 100644 --- a/packages/web-react/src/components/FileUploader/README.md +++ b/packages/web-react/src/components/FileUploader/README.md @@ -353,7 +353,7 @@ const customUpdate = (_event: MouseEvent, file: File) => { | `errorMessages.errorMaxUploadedFiles` | `string` | — | ✕ | Translation for the error message: Maximum number of uploaded files | | `fileQueue` | `FileQueueMapType` | — | ✓ | Queue of items to upload | | `findInQueue` | `(key: string) => FileQueueMapType` | — | ✓ | A callback to find a particular item in the queue | -| `id` | `string` | — | ✓ | FileUploader id | +| `id` | `string` | — | ✓ | FileUploader ID | | `isFluid` | `bool` | — | ✕ | When the field is supposed to be fluid | | `onDismiss` | `(key: string) => FileQueueMapType` | — | ✓ | A callback to delete a particular item from the queue | | `updateQueue` | `(key: string, file: File, meta?: FileMetadata) => FileQueueMapType` | — | ✓ | A callback to update a particular item in the queue | @@ -372,7 +372,7 @@ and [escape hatches][readme-escape-hatches]. | `dropZoneRef` | `MutableRefObject` | — | ✕ | Drop zone element reference | | `helperText` | `string` | — | ✕ | Custom helper text | | `iconName` | `string` | `upload` | ✕ | Icon used in the drop zone | -| `id` | `string` | — | ✓ | FileUploaderInput id | +| `id` | `string` | — | ✓ | FileUploaderInput ID | | `inputRef` | `MutableRefObject` | — | ✕ | Input element reference | | `isDisabled` | `bool` | — | ✕ | Whether is field disabled | | `isLabelHidden` | `bool` | — | ✕ | Whether is input label hidden | @@ -395,7 +395,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]. -> ⚠️ We don't use the `required` attribute on the input element. This is because it triggers the browser's default validation, which can block form submission. +> ⚠️ We don’t use the `required` attribute on the input element. This is because it triggers the browser’s default validation, which can block form submission. > Instead, the `FileUploaderInput` component is used to open the system file dialog, and the component itself manages the file(s). > Please note, the validation for required files is not automatically handled. Developers need to implement this validation independently. This approach provides more flexibility and customization to meet specific validation requirements. @@ -405,7 +405,7 @@ and [escape hatches][readme-escape-hatches]. | --------------------- | -------- | ------- | -------- | --------------------------------------------- | | `attachmentComponent` | `string` | — | ✓ | A component for rendering a single attachment | | `hasImagePreview` | `bool` | false | ✕ | Show image preview in the list | -| `id` | `string` | — | ✓ | FileUploaderList id | +| `id` | `string` | — | ✓ | FileUploaderList ID | | `inputName` | `string` | — | ✓ | The name of the input field | | `label` | `string` | — | ✕ | Label for the list | @@ -423,7 +423,7 @@ and [escape hatches][readme-escape-hatches]. | `file` | `File` | — | ✓ | Attachment file object | | `hasImagePreview` | `bool` | false | ✕ | Show image preview | | `iconName` | `string` | `file` | ✕ | Icon shown along the file | -| `id` | `string` | — | ✓ | FileUploaderAttachment id | +| `id` | `string` | — | ✓ | FileUploaderAttachment ID | | `imageObjectFit` | [`cover` \| `contain`] | `cover` | ✕ | Defines FileUploaderAttachment image fit in container | | `label` | `string` | — | ✓ | File name | | `name` | `string` | — | ✓ | Input field name | @@ -474,8 +474,8 @@ via `inputProps` and `listProps`. | `attachmentComponent` | `string` | — | ✓ | A component for rendering a single attachment | | `helperText` | `string` | — | ✕ | Custom helper text | | `iconName` | `string` | `upload` | ✓ | Icon used in the UncontrolledFileUploader drop zone | -| `id` | `string` | — | ✓ | UncontrolledFileUploader id | -| `inputId` | `string` | — | ✓ | FileUploaderInput id | +| `id` | `string` | — | ✓ | UncontrolledFileUploader ID | +| `inputId` | `string` | — | ✓ | FileUploaderInput ID | | `inputLabel` | `string` | — | ✓ | FileUploaderInput label | | `inputName` | `string` | — | ✓ | FileUploaderInput name | | `inputProps` | `Partial` | — | ✕ | Rest of FileUploaderInput props | @@ -486,7 +486,7 @@ via `inputProps` and `listProps`. | `isRequired` | `bool` | — | ✕ | Whether is field marked as required | | `labelText` | `string` | — | ✕ | Label for input in Drop zone | | `linkText` | `string` | — | ✕ | Link text in input in Drop zone | -| `listId` | `string` | — | ✓ | FileUploaderList id | +| `listId` | `string` | — | ✓ | FileUploaderList ID | | `listProps` | `Partial` | — | ✕ | Rest of FileUploaderList props | | `maxFileSize` | `number` | 1000000 | ✕ | The maximum size of the uploaded file in bytes | | `maxUploadedFiles` | `number` | 10 | ✕ | Maximum file upload queue size | diff --git a/packages/web-react/src/components/Grid/README.md b/packages/web-react/src/components/Grid/README.md index b137b932fa..e9b127fc49 100644 --- a/packages/web-react/src/components/Grid/README.md +++ b/packages/web-react/src/components/Grid/README.md @@ -18,7 +18,7 @@ Use Grid to build multiple column layouts. This Grid works on twelve column syst ## Custom Spacing You can use the `spacing` prop to apply custom spacing between items in both horizontal and vertical directions. The prop -accepts either a spacing token (e.g. `space-100`) or an object with breakpoint keys and spacing token values. +accepts either a spacing token (for example `space-100`) or an object with breakpoint keys and spacing token values. You can set custom spacing in the horizontal (x-axis) and vertical (y-axis) direction separately using the `spacingX` and `spacingY` props. @@ -117,14 +117,14 @@ Grid Item is a wrapper for Grid items. It allows you to configure your Grid stru as you wish. Use props to set a column and rows where the Grid Item should start or end. Numeric values are used as a coordinates in the grid. -If you want to set how to item should span over columns or rows, set the value as `span X` +To set how to item should span over columns or rows, set the value as `span X` where X is the number of columns or rows the item should span, like this `columnStart="span 2"` or `rowEnd="span 3"`. Span could be used with responsive props as well and for both start and end. To understand how to use `span` read one of many articles about CSS Grid, -eg. [CSS Grid Layout: The Span Keyword][digitalocean-span]. +for example [CSS Grid Layout: The Span Keyword][digitalocean-span]. -If you need to set a layout with repetitive columns, you can set this on the `Grid` -component itself using the [`cols` prop](#api) and might not need to set columns on the items. Eg. article +To set a layout with repetitive columns, you can set this on the `Grid` +component itself using the [`cols` prop](#api) and might not need to set columns on the items. For example article listing with 3 columns is easier to set using `cols="3"` on the `Grid` component than setting `columnStart` and `columnEnd` on each `GridItem`. diff --git a/packages/web-react/src/components/Header/README.md b/packages/web-react/src/components/Header/README.md index eb79af1a14..7bf4c5f93d 100644 --- a/packages/web-react/src/components/Header/README.md +++ b/packages/web-react/src/components/Header/README.md @@ -25,7 +25,7 @@ The Header is a composition of several subcomponents: 👉 The animation effect of this component is dependent on the `prefers-reduced-motion` media query. -🌍 Although we don't need it yet, this component experimentally supports RTL +🌍 Although we don’t need it yet, this component experimentally supports RTL languages (because just a single line had to be added to make it all work 🎉). ## Minimal Header @@ -140,7 +140,7 @@ and [escape hatches][readme-escape-hatches]. As the name suggests, desktop-only actions are intended to display on desktop screens only. They generally work as flex containers that define vertical alignment and spacing. -If you need to align actions to the end of the Header, use the `isAtEnd` prop. +To align actions to the end of the Header, use the `isAtEnd` prop. 👉 It is critical to **make sure all your actions fit the Header on the desktop breakpoint**. Spirit intentionally does not provide any overflow @@ -275,7 +275,7 @@ and [escape hatches][readme-escape-hatches]. ## Header Dialog -Header Dialog is Spirit's solution for responsive navigation and selected use +Header Dialog is Spirit’s solution for responsive navigation and selected use cases such as the user menu. Please note Header Dialog is not intended to be used for second-level navigation in general. diff --git a/packages/web-react/src/components/Icon/README.md b/packages/web-react/src/components/Icon/README.md index 968596eeec..6a7a74ea29 100644 --- a/packages/web-react/src/components/Icon/README.md +++ b/packages/web-react/src/components/Icon/README.md @@ -22,7 +22,7 @@ yarn add @lmc-eu/spirit-icons So it will not be automatically installed with `@lmc-eu/spirit-web-react`. - [`@lmc-eu/spirit-icons`][icons-package] - Spirit Icons package -- [`html-react-parser`][html-react-parser-package] - HTML to React parser (avoid usage of `dangerouslySetInnerHTML` on the server side) +- [`html-react-parser`][html-react-parser-package] - HTML to React parser (avoid usage of `dangerouslySetInnerHTML` on the server-side) ## 📝 Usage diff --git a/packages/web-react/src/components/Link/README.md b/packages/web-react/src/components/Link/README.md index 39cd6d0409..d76a270c92 100644 --- a/packages/web-react/src/components/Link/README.md +++ b/packages/web-react/src/components/Link/README.md @@ -52,7 +52,7 @@ The underline is never visible, even when the link is hovered over. | -------------- | ------------------------------------------------ | --------- | -------- | ------------------------------------------------------------------------------------ | | `color` | [Action Link Color dictionary][dictionary-color] | `primary` | ✕ | Color of the link | | `elementType` | `ElementType` | `a` | ✕ | Type of element used as | -| `href` | `string` | — | ✕ | Link's href attribute | +| `href` | `string` | — | ✕ | Link’s href attribute | | `isDisabled` | `bool` | `false` | ✕ | Whether is the link disabled | | `isUnderlined` | `bool` | `false` | ✕ | [**DEPRECATED**][deprecated] in favor of `underline`; Whether is the link underlined | | `ref` | `ForwardedRef` | — | ✕ | Link element reference | diff --git a/packages/web-react/src/components/Modal/README.md b/packages/web-react/src/components/Modal/README.md index c2d7bfdee4..53a624bd0a 100644 --- a/packages/web-react/src/components/Modal/README.md +++ b/packages/web-react/src/components/Modal/README.md @@ -98,7 +98,7 @@ the state of the form and closing the dialog. ### Dropdowns in Modal -Dropdowns can be safely used inside **non-scrollable** Modals so that the Dropdown popover is not clipped by the Modal's +Dropdowns can be safely used inside **non-scrollable** Modals so that the Dropdown popover is not clipped by the Modal’s boundaries. 👉 See the [Scrolling Long Content](#scrolling-long-content) section for more information on scroll control of Modals. @@ -153,8 +153,8 @@ and allows users to easily close it. ### Hidden Title -Even in cases where you don't need the title to be visible you should provide an -accessible name for the dialog, e.g. using the `aria-label` attribute on +Even in cases where you don’t need the title to be visible you should provide an +accessible name for the dialog, for example using the `aria-label` attribute on `` component: ```jsx @@ -270,7 +270,7 @@ and [escape hatches][readme-escape-hatches]. ## Opening the Modal -Use a hook to open your Modal, e.g.: +Use a hook to open your Modal, for example: ```jsx const [isOpen, setOpen] = useState(false); @@ -284,7 +284,7 @@ const handleClose = () => setOpen(false); ## Scrolling Long Content -In case the content is longer than user's viewport or device, the ModalBody will expand to fit the height of its content +In case the content is longer than user’s viewport or device, the ModalBody will expand to fit the height of its content and the whole ModalDialog will scroll. ### Enable Scrolling Inside ModalDialog @@ -298,7 +298,7 @@ Scrolling inside ModalDialog can be turned on by adding the `isScrollable` prop: ### Scrolling with ScrollView To make content overflow more obvious to users, you can wrap the `ModalBody` content in a [ScrollView][scroll-view] that -takes over the responsibility for scrolling and provides visual overflow decorators, e.g.: +takes over the responsibility for scrolling and provides visual overflow decorators, for example: ```jsx @@ -321,7 +321,7 @@ The prop accepts any valid CSS length value, either as a string or an object wit The height property falls back to the previous breakpoint using the mobile-first approach. For example, if you set `height={{ tablet: '500px' }}` while not setting the `desktop` breakpoint, the value will be used for both tablet and desktop screens. The single non-object value will be used for all breakpoints. -This is useful for Modals with dynamic content, e.g. a list of items that can be added or removed, or a multistep wizard. +This is useful for Modals with dynamic content, for example a list of items that can be added or removed, or a multistep wizard. ```jsx @@ -361,7 +361,7 @@ both tablet and desktop screens. The single non-object value will be used for al ⚠️ This feature is only available for ModalDialogs with the `isScrollable` prop. -👉 If a [custom height](#custom-height) is set, the custom max height is only applied if it's smaller than the custom +👉 If a [custom height](#custom-height) is set, the custom max height is only applied if it’s smaller than the custom height. ## Stacking Modals diff --git a/packages/web-react/src/components/ScrollView/README.md b/packages/web-react/src/components/ScrollView/README.md index 596b1d4f01..1d0d0b4d18 100644 --- a/packages/web-react/src/components/ScrollView/README.md +++ b/packages/web-react/src/components/ScrollView/README.md @@ -3,7 +3,7 @@ ## Usage To make scrolling and scroll overflow decorators function correctly, the parent -container's height must be limited. In our examples, we set this height +container’s height must be limited. In our examples, we set this height limit using inline styles for demonstration purposes only. ### Default (Vertical) @@ -67,7 +67,7 @@ Or both: | Name | Type | Default | Required | Description | | --------------------- | ---------------------------------- | ---------- | -------- | ---------------------------------- | -| `children` | `ReactNode` | — | ✓ | ScrollView children's nodes | +| `children` | `ReactNode` | — | ✓ | ScrollView children’s nodes | | `direction` | [`horizontal` \| `vertical`] | `vertical` | ✕ | Direction of the wrapper | | `isScrollbarDisabled` | `bool` | `false` | ✕ | If true, the Scrollbar is disabled | | `overflowDecorators` | [`borders` \| `shadows` \| `both`] | `shadows` | ✕ | ScrollView overflow decorators | diff --git a/packages/web-react/src/components/Stack/README.md b/packages/web-react/src/components/Stack/README.md index e82c4e360d..c8120aa9e9 100644 --- a/packages/web-react/src/components/Stack/README.md +++ b/packages/web-react/src/components/Stack/README.md @@ -31,7 +31,7 @@ Advanced example usage: ## Custom Spacing You can use the `spacing` prop to apply custom spacing between items. The prop -accepts either a spacing token (e.g. `space-100`) or an object with breakpoint keys and spacing token values. +accepts either a spacing token (for example `space-100`) or an object with breakpoint keys and spacing token values. Default spacing: diff --git a/packages/web-react/src/components/Tabs/README.md b/packages/web-react/src/components/Tabs/README.md index b23aaffb16..dd175d6de3 100644 --- a/packages/web-react/src/components/Tabs/README.md +++ b/packages/web-react/src/components/Tabs/README.md @@ -65,7 +65,7 @@ const selectTab = useCallback((id) => { ## Custom Spacing You can use the `spacing` prop to apply custom spacing between items. The prop -accepts either a spacing token (e.g. `space-100`) or an object with breakpoint keys and spacing token values. +accepts either a spacing token (for example `space-100`) or an object with breakpoint keys and spacing token values. Default spacing: diff --git a/packages/web-react/src/components/Toast/README.md b/packages/web-react/src/components/Toast/README.md index eda3fd157f..79d7190cb8 100644 --- a/packages/web-react/src/components/Toast/README.md +++ b/packages/web-react/src/components/Toast/README.md @@ -78,7 +78,7 @@ Example: Positioning becomes trickier on mobile screens due to the presence of notches, rounded corners, and the virtual keyboard. The Toast component tries to find the best position to be visible using the following detection mechanisms: -1. On **devices with rounded displays and/or notches** (e.g. iPhone X and newer), the Toast component is pushed inwards +1. On **devices with rounded displays and/or notches** (for example iPhone X and newer), the Toast component is pushed inwards to avoid the rounded corners. The `viewport-fit="cover"` meta tag is required for this feature to work: ```html @@ -130,7 +130,7 @@ set the `isCollapsible` prop to `false`. 👉 Please note only the _visible_ ToastBar components are scrollable. Collapsed items are not accessible until visible items are dismissed. -👉 For the sake of simplicity, the collapsible items limit cannot be configured at the moment. +👉 For the sake of simplicity, the collapsible items limit cannot be configured now. ### API @@ -232,7 +232,7 @@ Usage example: | `children` | `ReactNode` | — | ✓ | Content of the ToastBarLink | | `color` | [Action Link Color dictionary][dictionary-color] | `inverted` | ✕ | Color of the link | | `elementType` | `ElementType` | `a` | ✕ | Type of element used as | -| `href` | `string` | — | ✕ | ToastBarLink's href attribute | +| `href` | `string` | — | ✕ | ToastBarLink’s href attribute | | `isDisabled` | `bool` | `false` | ✕ | Whether is the link disabled | | `isUnderlined` | `bool` | `true` | ✕ | Whether is the link underlined | | `ref` | `ForwardedRef` | — | ✕ | Link element reference | @@ -243,7 +243,7 @@ and [escape hatches][readme-escape-hatches]. 👉 **Do not put any important actions** like "Undo" in the ToastBar component (unless there are other means to perform said action), as it is very hard (if not impossible) to reach for users with assistive technologies. Read more about -[Toast accessibility][scott-o-hara-toast] at Scott O'Hara's blog. +[Toast accessibility][scott-o-hara-toast] at Scott O’Hara's blog. ### Colors @@ -262,7 +262,7 @@ import { ToastBarMessage } from '@lmc-eu/spirit-web-react/components'; ### Opening the ToastBar -Set `isOpen` prop to `true` to open a Toast **that is present in the DOM,** e.g.: +Set `isOpen` prop to `true` to open a Toast **that is present in the DOM,** for example: ```jsx diff --git a/packages/web-react/src/components/Tooltip/README.md b/packages/web-react/src/components/Tooltip/README.md index 6de7da70bb..3aeb0fa9b5 100644 --- a/packages/web-react/src/components/Tooltip/README.md +++ b/packages/web-react/src/components/Tooltip/README.md @@ -33,7 +33,7 @@ const [open, setOpen] = React.useState(false); ### Trigger You can choose whether you want to open the tooltip on `click` and/or `hover`. -By default, both options are active, e.g., `trigger={['click', 'hover']}`. +By default, both options are active, for example, `trigger={['click', 'hover']}`. If you only want the `click` trigger, you need to specify the trigger, as shown in the example below. This setup might be preferable when you have a link in your tooltip, for example. @@ -59,14 +59,14 @@ const [open, setOpen] = React.useState(false); | Attribute | Type | Default | Required | Description | | ------------------------------- | ---------------------------------------------------------------- | ------------------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `children` | `ReactNode` | — | ✓ | Tooltip children's nodes - `TooltipTrigger` and `TooltipPopover` | +| `children` | `ReactNode` | — | ✓ | Tooltip children’s nodes - `TooltipTrigger` and `TooltipPopover` | | `enableFlipping` | `bool` | true | ✕ | Enables [flipping][floating-ui-flip] of the element’s placement when it starts to overflow its boundary area. For example `top` can be flipped to `bottom`. | | `enableFlippingCrossAxis` | `bool` | true | ✕ | Enables flipping on the [cross axis][floating-ui-flip-cross-axis], the axis perpendicular to main axis. For example `top-end` can be flipped to the `top-start`. | | `enableShifting` | `bool` | true | ✕ | Enables [shifting][floating-ui-shift] of the element to keep it inside the boundary area by adjusting its position. | | `enableSizing` | `bool` | true | ✕ | Enables [sizing][floating-ui-size] of the element to keep it inside the boundary area by setting the max width. | | `flipFallbackAxisSideDirection` | [`none` \| `start` \| `end`] | "none" | ✕ | Whether to allow [fallback to the opposite axis][floating-ui-flip-fallback-axis-side-direction] if no placements along the preferred placement axis fit, and if so, which side direction along that axis to choose. If necessary, it will fallback to the other direction. | | `flipFallbackPlacements` | `string` | - | ✕ | This describes a list of [explicit placements][floating-ui-flip-fallback-placements] to try if the initial placement doesn’t fit on the axes in which overflow is checked. For example you can set `"top, right, bottom"` | -| `id` | `string` | - | ✓ | Tooltip id | +| `id` | `string` | - | ✓ | Tooltip ID | | `isDismissible` | `bool` | false | ✕ | Make tooltip dismissible | | `isOpen` | `bool` | - | ✓ | Open state | | `onToggle` | `() => void` | - | ✓ | Function for toggle open state of dropdown | diff --git a/packages/web-react/src/components/UNSTABLE_Avatar/README.md b/packages/web-react/src/components/UNSTABLE_Avatar/README.md index 305d242775..e6157193fc 100644 --- a/packages/web-react/src/components/UNSTABLE_Avatar/README.md +++ b/packages/web-react/src/components/UNSTABLE_Avatar/README.md @@ -3,7 +3,7 @@ > ⚠️ This component is UNSTABLE. It may significantly change at any point in the future. > Please use it with caution. -The `UNSTABLE_Avatar` component is used to display a user's profile picture or initials. +The `UNSTABLE_Avatar` component is used to display a user’s profile picture or initials. ```jsx import { UNSTABLE_Avatar } from '@lmc-eu/spirit-web-react'; @@ -62,7 +62,7 @@ Add an Icon with correct size. ``` -ℹ️ Don't forget to add the `aria-label` attribute for accessible title. +ℹ️ Don’t forget to add the `aria-label` attribute for accessible title. ### Image @@ -74,7 +74,7 @@ Add an image, it will be resized to fit the avatar. ``` -ℹ️ Don't forget to add the `aria-label` attribute for accessible title. +ℹ️ Don’t forget to add the `aria-label` attribute for accessible title. The image should have an `alt` attribute set and can be aria-hidden, because the `aria-label` attribute is set on the container. @@ -90,7 +90,7 @@ take care of the text length and case. The rest is handled by the component. ``` -ℹ️ Don't forget to add the `aria-label` attribute for accessible title, especially when +ℹ️ Don’t forget to add the `aria-label` attribute for accessible title, especially when using an abbreviation. The `aria-hidden` attribute is set on the text span, because the `aria-label` attribute is set on the container and the abbreviation is not useful for screen readers. diff --git a/packages/web-react/src/components/UNSTABLE_PartnerLogo/README.md b/packages/web-react/src/components/UNSTABLE_PartnerLogo/README.md index f4bea048b3..f01c93a03f 100644 --- a/packages/web-react/src/components/UNSTABLE_PartnerLogo/README.md +++ b/packages/web-react/src/components/UNSTABLE_PartnerLogo/README.md @@ -3,7 +3,7 @@ > ⚠️ This component is UNSTABLE. It may significantly change at any point in the future. > Please use it with caution. -PartnerLogo is a component designed to display the partner's logo (e.g. advertiser, business partner, etc.). +PartnerLogo is a component designed to display the partner’s logo (for example advertiser, business partner, etc.). ```jsx import { UNSTABLE_PartnerLogo } from '@lmc-eu/spirit-web-react'; @@ -51,7 +51,7 @@ The content of the PartnerLogo component can be an image or svg. ``` -ℹ️ Don't forget to add the `aria-label` attribute for accessible title. +ℹ️ Don’t forget to add the `aria-label` attribute for accessible title. The image should have an `alt` attribute set and can be aria-hidden, because the `aria-label` attribute is set on the container. @@ -65,7 +65,7 @@ attribute is set on the container. ``` -ℹ️ Don't forget to add the `aria-label` attribute for accessible title. +ℹ️ Don’t forget to add the `aria-label` attribute for accessible title. ## API diff --git a/packages/web-react/src/components/UNSTABLE_ProductLogo/README.md b/packages/web-react/src/components/UNSTABLE_ProductLogo/README.md index a0e6c61fac..598cb7bcf2 100644 --- a/packages/web-react/src/components/UNSTABLE_ProductLogo/README.md +++ b/packages/web-react/src/components/UNSTABLE_ProductLogo/README.md @@ -38,7 +38,7 @@ The content of the ProductLogo component can be an image or svg. ``` -ℹ️ Don't forget to add the `aria-label` attribute for accessible title. +ℹ️ Don’t forget to add the `aria-label` attribute for accessible title. The image should have an `alt` attribute set and can be aria-hidden, because the `aria-label` attribute is set on the container. To reduce the unexpected layout shifts, it is strongly recommended to specify the `height` and `width` of the embedded image. @@ -53,7 +53,7 @@ to specify the `height` and `width` of the embedded image. ``` -ℹ️ Don't forget to add the `aria-label` attribute for accessible title. +ℹ️ Don’t forget to add the `aria-label` attribute for accessible title. ## API diff --git a/packages/web-react/src/components/UNSTABLE_Toggle/README.md b/packages/web-react/src/components/UNSTABLE_Toggle/README.md index a7a2aa549c..f547af8b76 100644 --- a/packages/web-react/src/components/UNSTABLE_Toggle/README.md +++ b/packages/web-react/src/components/UNSTABLE_Toggle/README.md @@ -18,7 +18,7 @@ import { UNSTABLE_Toggle } from '@lmc-eu/spirit-web-react/components'; ## Indicators -If you need to indicate the state of the toggle, you can add the `hasIndicators` prop. This will add a visual indicators to the toggle switch. +To indicate the state of the toggle, you can add the `hasIndicators` prop. This will add a visual indicators to the toggle switch. ```jsx diff --git a/packages/web-react/src/components/VisuallyHidden/README.md b/packages/web-react/src/components/VisuallyHidden/README.md index cfc6c195e7..922d1b1ecb 100644 --- a/packages/web-react/src/components/VisuallyHidden/README.md +++ b/packages/web-react/src/components/VisuallyHidden/README.md @@ -1,6 +1,6 @@ # VisuallyHidden -The VisuallyHidden component helps improve web accessibility by rendering its content in a way that it's hidden visually but still accessible to screen readers. +The VisuallyHidden component helps improve web accessibility by rendering its content in a way that it’s hidden visually but still accessible to screen readers. ```jsx import { VisuallyHidden } from '@lmc-eu/spirit-web-react/components';