From ebf1fe89ff53010e72a2c4d351d9cb766d9ad4f2 Mon Sep 17 00:00:00 2001 From: literat Date: Wed, 11 Dec 2024 17:52:38 +0100 Subject: [PATCH] fixup! Style(web-react): Fix docs using makrdown linter --- packages/web-react/CONTRIBUTING.md | 4 +-- packages/web-react/DEPRECATIONS.md | 3 ++ packages/web-react/README.md | 11 +++--- .../src/components/Accordion/README.md | 26 +++++++------- .../web-react/src/components/Alert/README.md | 2 +- .../src/components/Breadcrumbs/README.md | 4 +-- .../web-react/src/components/Button/README.md | 4 +-- .../src/components/ButtonLink/README.md | 2 +- .../src/components/Collapse/README.md | 4 +-- .../src/components/Dropdown/README.md | 36 +++++++++---------- .../src/components/FileUploader/README.md | 8 ++--- .../web-react/src/components/Flex/README.md | 2 +- .../web-react/src/components/Grid/README.md | 20 +++++------ .../web-react/src/components/Icon/README.md | 2 +- .../src/components/Pagination/README.md | 22 ++++++------ 15 files changed, 78 insertions(+), 72 deletions(-) diff --git a/packages/web-react/CONTRIBUTING.md b/packages/web-react/CONTRIBUTING.md index 569bc9f2b4..6cebd6b708 100644 --- a/packages/web-react/CONTRIBUTING.md +++ b/packages/web-react/CONTRIBUTING.md @@ -2,7 +2,7 @@ > Guide for Spirit Web React contributors. -## Adding new component +## Adding New Component Do not forget to export and register new component in all necessary places. @@ -13,7 +13,7 @@ Do not forget to export and register new component in all necessary places. This is an example of a typical file structure of a component: -``` +```text ├── src └── components ├── index.ts — components root diff --git a/packages/web-react/DEPRECATIONS.md b/packages/web-react/DEPRECATIONS.md index 8d04729678..02c3208cd7 100644 --- a/packages/web-react/DEPRECATIONS.md +++ b/packages/web-react/DEPRECATIONS.md @@ -8,6 +8,9 @@ This document lists all deprecations that will be removed in the next major vers 👉 [What are deprecations?][readme-deprecations] + + + ### UncontrolledCollapse `isDisposable` The `hideOnCollapse` prop was removed, please use `isDisposable` instead. diff --git a/packages/web-react/README.md b/packages/web-react/README.md index e3d9ca3c35..a9f8dcc880 100644 --- a/packages/web-react/README.md +++ b/packages/web-react/README.md @@ -1,3 +1,6 @@ + + + # @lmc-eu/spirit-web-react [![minified](https://badgen.net/bundlephobia/min/@lmc-eu/spirit-web-react)](https://bundlephobia.com/package/@lmc-eu/spirit-web-react) @@ -41,7 +44,7 @@ Import React components in your app: import { Button } from '@lmc-eu/spirit-web-react/components/Button'; ``` -### Prefixing CSS classes in components +### 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. @@ -124,7 +127,7 @@ are doing so at your own risk. Please consult additional styling with [web package documentation][web-pkg-rebrand]. -## Controlled vs Uncontrolled components +## Controlled vs Uncontrolled Components - A [Controlled Component][react-controlled] is one that takes its current value through props and notifies changes through callbacks like onChange. @@ -150,7 +153,7 @@ Check your browser console to see if you are using any of the deprecated functio 👉 [See the DEPRECATIONS file][all-deprecations] for the list of all deprecations. -### Warnings in environments +### Warnings in Environments #### Production @@ -180,7 +183,7 @@ afterEach(() => { ## Examples -👀 See [examples] for a live demo. +👀 See [examples][examples] for a live demo. ## License diff --git a/packages/web-react/src/components/Accordion/README.md b/packages/web-react/src/components/Accordion/README.md index 09e3ff3af2..3004455eb7 100644 --- a/packages/web-react/src/components/Accordion/README.md +++ b/packages/web-react/src/components/Accordion/README.md @@ -2,7 +2,7 @@ ## Usage -### Default (Stay open) +### Default (Stay Open) ```javascript import React, { useState } from 'react'; @@ -10,8 +10,8 @@ import { Accordion, AccordionItem, AccordionHeader, AccordionContent } from '@lm import { AccordionOpenStateType } from '@lmc-eu/spirit-web-react/types'; ``` -``` -const [openState, setOpenState] = useState(undefined); +```javascript +const [openState, setOpenState] = useState < AccordionOpenStateType > undefined; ``` ```javascript @@ -52,19 +52,19 @@ const toggle = (id) => { ``` -### Default with opened on init +### Default with Opened on Init -``` -const [openState, setOpenState] = useState(['accordion-item-example-1']); +```javascript +const [openState, setOpenState] = useState < AccordionOpenStateType > ['accordion-item-example-1']; ``` -### Open only one at a time +### Open Only One at a Time -``` -const [openState, setOpenState] = useState(''); +```javascript +const [openState, setOpenState] = useState < AccordionOpenStateType > ''; ``` -### Uncontrolled Accordion (Stay open) +### Uncontrolled Accordion (Stay Open) ```javascript import { @@ -89,7 +89,7 @@ import { AccordionOpenStateType } from '@lmc-eu/spirit-web-react/types'; ``` -### Uncontrolled Accordion with default open value (Stay open) +### Uncontrolled Accordion with Default Open Value (Stay Open) ```javascript @@ -104,7 +104,7 @@ import { AccordionOpenStateType } from '@lmc-eu/spirit-web-react/types'; ``` -### Uncontrolled Accordion with open only one at a time +### Uncontrolled Accordion with Open Only One at a Time ```javascript @@ -119,7 +119,7 @@ import { AccordionOpenStateType } from '@lmc-eu/spirit-web-react/types'; ``` -### Uncontrolled Accordion with open only one at a time and default open value +### Uncontrolled Accordion with Open Only One at a Time and Default Open Value ```javascript diff --git a/packages/web-react/src/components/Alert/README.md b/packages/web-react/src/components/Alert/README.md index 93523132b1..68db611bf3 100644 --- a/packages/web-react/src/components/Alert/README.md +++ b/packages/web-react/src/components/Alert/README.md @@ -15,7 +15,7 @@ import { Alert } from '@lmc-eu/spirit-web-react/components'; Hey! Pay attention! ``` -## Default Icons according to Color Variant +## Default Icons According to Color Variant | Color name | Icon name | | ------------- | ------------- | diff --git a/packages/web-react/src/components/Breadcrumbs/README.md b/packages/web-react/src/components/Breadcrumbs/README.md index 428d2f46ef..f47e489850 100644 --- a/packages/web-react/src/components/Breadcrumbs/README.md +++ b/packages/web-react/src/components/Breadcrumbs/README.md @@ -37,7 +37,7 @@ Simply pass the breadcrumbs array as a prop: ``` -### Custom usage +### Custom Usage Use custom content for the ordered list as component's children instead of passing breadcrumb items array via props: @@ -97,7 +97,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]. -### Dealing with long titles +### 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) + '…'`. diff --git a/packages/web-react/src/components/Button/README.md b/packages/web-react/src/components/Button/README.md index f487188c2e..c035fbf231 100644 --- a/packages/web-react/src/components/Button/README.md +++ b/packages/web-react/src/components/Button/README.md @@ -2,7 +2,7 @@ This is React implementation of the [Button][button]. -### Basic example usage +## Basic Example Usage ```jsx import { Button } from '@lmc-eu/spirit-web-react'; @@ -19,7 +19,7 @@ import { Button } from '@lmc-eu/spirit-web-react'; ``` -### Example usage with third-party component +### Example Usage with Third-Party Component So if you use a third-party component, the Button will take on all of its proper attributes. diff --git a/packages/web-react/src/components/ButtonLink/README.md b/packages/web-react/src/components/ButtonLink/README.md index 8ceb4b2532..1d83036b46 100644 --- a/packages/web-react/src/components/ButtonLink/README.md +++ b/packages/web-react/src/components/ButtonLink/README.md @@ -1,6 +1,6 @@ # ButtonLink -### Basic example usage +## Basic Example Usage ```jsx import { ButtonLink } from '@lmc-eu/spirit-web-react'; diff --git a/packages/web-react/src/components/Collapse/README.md b/packages/web-react/src/components/Collapse/README.md index 7d33c5de23..0dbf27f5d0 100644 --- a/packages/web-react/src/components/Collapse/README.md +++ b/packages/web-react/src/components/Collapse/README.md @@ -20,7 +20,7 @@ const [isOpen, toggle] = useState(true); ``` -### With toggle from hook +### With Toggle From Hook ```javascript import React, { useState} from 'react'; @@ -38,7 +38,7 @@ const { isOpen, toggle } = useCollapse(false); ``` -### With toggle handler from hook +### With Toggle Handler From Hook ```javascript import React, { useState} from 'react'; diff --git a/packages/web-react/src/components/Dropdown/README.md b/packages/web-react/src/components/Dropdown/README.md index 18ceab66f8..3a7b033c8e 100644 --- a/packages/web-react/src/components/Dropdown/README.md +++ b/packages/web-react/src/components/Dropdown/README.md @@ -35,7 +35,7 @@ const onToggle = () => setIsOpen(!isOpen); ; ``` -### Uncontrolled dropdown +### Uncontrolled Dropdown ```jsx import { UncontrolledDropdown, DropdownTrigger, DropdownPopover } from '@lmc-eu/spirit-web-react/components'; @@ -52,15 +52,15 @@ 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`][dropdown-fullwidth-mode] | `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] @@ -89,20 +89,20 @@ 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` | `` | ✕ | 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`][dropdown-fullwidth-mode] | `off` | ✕ | Full-width mode | +| `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 | 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]. [dictionary-placement]: https://github.com/lmc-eu/spirit-design-system/tree/main/docs/DICTIONARIES.md#placement -[dropdownfullwidthmode]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/src/types/dropdown.ts#L19 +[dropdown-fullwidth-mode]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/src/types/dropdown.ts#L19 [item]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/src/components/Item/README.md [readme-additional-attributes]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/README.md#additional-attributes [readme-escape-hatches]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/README.md#escape-hatches diff --git a/packages/web-react/src/components/FileUploader/README.md b/packages/web-react/src/components/FileUploader/README.md index a5648f5b37..e69addea99 100644 --- a/packages/web-react/src/components/FileUploader/README.md +++ b/packages/web-react/src/components/FileUploader/README.md @@ -66,7 +66,7 @@ const { fileQueue, addToQueue, clearQueue, onDismiss } = useFileQueue(); ; ``` -### List with image previews +### List with Image Previews ```javascript ``` -### Input behavior when the queue is filled +### Input Behavior When the Queue Is Filled FileUploaderInput will disappear or disable after reaching the limit for files in the queue. @@ -298,7 +298,7 @@ const resetStateHandler = () => { ; ``` -### Passing additional metadata +### Passing Additional Metadata When you need to send additional data along with the image you can do it with the `meta` argument on `addToQueue` and `updateQueue` callbacks. If any data in `meta` option will be present, the FileUploader adds an additional hidden input with JSON stringified data to the form. @@ -326,7 +326,7 @@ const customUpdate = (_event: MouseEvent, file: File) => { // … ``` -#### Updating Image Preview with cropped image +#### Updating Image Preview with Cropped Image When you are using FileUploader with some kind of image cropper you want to also update the image preview on FileUploaderAttachment when image changes. You can do this by passing a specific object in shape of coordinates (`{ x: number, y: number, cropWidth: number, cropHeight: number, originalWidth: number, originalHeight: number }`) to the `meta` argument. diff --git a/packages/web-react/src/components/Flex/README.md b/packages/web-react/src/components/Flex/README.md index 7a3ca3aa7f..426db17ff5 100644 --- a/packages/web-react/src/components/Flex/README.md +++ b/packages/web-react/src/components/Flex/README.md @@ -174,7 +174,7 @@ If you need more control over the styling of a component, you can use [style pro and [escape hatches][readme-escape-hatches]. [dictionary-alignment]: https://github.com/lmc-eu/spirit-design-system/blob/main/docs/DICTIONARIES.md#alignment -[dictionary-direction]: https://github.com/lmc-eu/spirit-design-system/blob/main/docs/DICTIONARIES.md#direction +[direction-dictionary]: https://github.com/lmc-eu/spirit-design-system/blob/main/docs/DICTIONARIES.md#direction [mdn-display-flex]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flexible_box_layout [mdn-display-grid]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout [readme-additional-attributes]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/README.md#additional-attributes diff --git a/packages/web-react/src/components/Grid/README.md b/packages/web-react/src/components/Grid/README.md index 03056fd802..00d3b1036f 100644 --- a/packages/web-react/src/components/Grid/README.md +++ b/packages/web-react/src/components/Grid/README.md @@ -95,15 +95,15 @@ Responsive horizontal and vertical alignment: ## API -| Name | Type | Default | Required | Description | -| ------------- | ------------------------------------------------------------------- | --------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------- | -| `alignmentX` | [[AlignmentXExtended dictionary][alignment-dictionary] \| `object`] | `stretch` | ✕ | Apply horizontal alignment of items, use object to set responsive values, e.g. `{ mobile: 'left', tablet: 'center', desktop: 'right' }` | -| `alignmentY` | [[AlignmentYExtended dictionary][alignment-dictionary] \| `object`] | `stretch` | ✕ | Apply vertical alignment of items, use object to set responsive values, e.g. `{ mobile: 'top', tablet: 'center', desktop: 'bottom' }` | -| `cols` | \[`1` \| `2` \| `3` \| `4` \| `5` \| `6` \| `12` \| `object`] | — | ✕ | Number of columns to use, use object to set responsive values, e.g. `{ mobile: 1, tablet: 2, desktop: 3 }` | -| `elementType` | HTML element | `div` | ✕ | Element type to use for the Grid | -| `spacing` | \[`SpaceToken` \| `Partial>`] | — | ✕ | Apply [custom spacing](#custom-spacing) in both horizontal and vertical directions between items | -| `spacingX` | \[`SpaceToken` \| `Partial>`] | — | ✕ | Apply horizontal [custom spacing](#custom-spacing) between items | -| `spacingY` | \[`SpaceToken` \| `Partial>`] | — | ✕ | Apply vertical [custom spacing](#custom-spacing) between items | +| Name | Type | Default | Required | Description | +| ------------- | -------------------------------------------------------------------- | --------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------- | +| `alignmentX` | \[[AlignmentXExtended dictionary][alignment-dictionary] \| `object`] | `stretch` | ✕ | Apply horizontal alignment of items, use object to set responsive values, e.g. `{ mobile: 'left', tablet: 'center', desktop: 'right' }` | +| `alignmentY` | \[[AlignmentYExtended dictionary][alignment-dictionary] \| `object`] | `stretch` | ✕ | Apply vertical alignment of items, use object to set responsive values, e.g. `{ mobile: 'top', tablet: 'center', desktop: 'bottom' }` | +| `cols` | \[`1` \| `2` \| `3` \| `4` \| `5` \| `6` \| `12` \| `object`] | — | ✕ | Number of columns to use, use object to set responsive values, e.g. `{ mobile: 1, tablet: 2, desktop: 3 }` | +| `elementType` | HTML element | `div` | ✕ | Element type to use for the Grid | +| `spacing` | \[`SpaceToken` \| `Partial>`] | — | ✕ | Apply [custom spacing](#custom-spacing) in both horizontal and vertical directions between items | +| `spacingX` | \[`SpaceToken` \| `Partial>`] | — | ✕ | Apply horizontal [custom spacing](#custom-spacing) between items | +| `spacingY` | \[`SpaceToken` \| `Partial>`] | — | ✕ | Apply vertical [custom spacing](#custom-spacing) between items | 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] @@ -144,7 +144,7 @@ Basic example usage: ``` -### Responsive example usage: +### Responsive Example Usage Pass an object to props to set different values for different breakpoints. The values will be applied from mobile to desktop and if not set for a breakpoint, the value from the diff --git a/packages/web-react/src/components/Icon/README.md b/packages/web-react/src/components/Icon/README.md index 968596eeec..770d0c971b 100644 --- a/packages/web-react/src/components/Icon/README.md +++ b/packages/web-react/src/components/Icon/README.md @@ -2,7 +2,7 @@ Icons are graphical metaphors or symbols that can be used to complement existing experiences. -## 🚀 Getting started +## 🚀 Getting Started To use this component in your project you need to run the following command using [npm][npm]: diff --git a/packages/web-react/src/components/Pagination/README.md b/packages/web-react/src/components/Pagination/README.md index 501b48b1df..9bb68f8e48 100644 --- a/packages/web-react/src/components/Pagination/README.md +++ b/packages/web-react/src/components/Pagination/README.md @@ -1,6 +1,6 @@ # Pagination -## Example with the current item in the first place +## Example with the Current Item in the First Place ```jsx @@ -17,7 +17,7 @@ ``` -## Example with the current item in the middle +## Example with the Current Item in the Middle ```jsx @@ -41,7 +41,7 @@ ``` -## Example with the current item in the last place +## Example with the Current Item in the Last Place ```jsx @@ -58,7 +58,7 @@ ``` -## Example with the first current item, centered +## Example with the First Current Item, Centered ```jsx @@ -87,7 +87,7 @@ /> ``` -## Pagination props +## Pagination Props | Name | Type | Default | Required | Description | | ----------- | ------------------------- | ------- | -------- | -------------------------------------------------- | @@ -100,7 +100,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]. -## PaginationItem props +## PaginationItem Props | Name | Type | Default | Required | Description | | ---------- | ----------- | ------- | -------- | ------------------- | @@ -112,7 +112,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]. -## PaginationLink props +## PaginationLink Props | Name | Type | Default | Required | Description | | -------------------- | ------------- | ------- | -------- | -------------------------------------- | @@ -125,7 +125,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]. -## PaginationButtonLink props +## PaginationButtonLink Props This component extends the [Button][button] component with directional arrows and a hidden label. @@ -138,7 +138,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]. -## PaginationLinkPrevious props +## PaginationLinkPrevious Props This component extends the `PaginationButtonLink` component. @@ -150,7 +150,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]. -## PaginationLinkNext props +## PaginationLinkNext Props This component extends the `PaginationButtonLink` component. @@ -162,7 +162,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]. -## UncontrolledPagination props +## UncontrolledPagination Props | Name | Type | Default | Required | Description | | ---------------------------- | ------------------------------ | ---------- | -------- | ------------------------------------------------------------------- |