diff --git a/packages/web-react/src/components/UNSTABLE_Header/README.md b/packages/web-react/src/components/UNSTABLE_Header/README.md index e09ef09a6d..95b162eb43 100644 --- a/packages/web-react/src/components/UNSTABLE_Header/README.md +++ b/packages/web-react/src/components/UNSTABLE_Header/README.md @@ -1,31 +1,64 @@ -# UNSTABLE Truncate +# UNSTABLE Header > ⚠️ This component is UNSTABLE. It may significantly change at any point in the future. > Please use it with caution. -Truncate is a component that truncates text based on defined number of rows. +```jsx +import { UNSTABLE_Header } from '@lmc-eu/spirit-web-react'; + +{/* Content go here */}; +``` + +## Header + +Without any modifier, Header is ready to contain necessary blocks in a classic +left-to-right layout (in LTR documents). ```jsx -import { UNSTABLE_Truncate } from '@lmc-eu/spirit-web-react'; + + + + Spirit + + + +``` + +## Minimal Header -{/* Text go here */}; +The `isSimple` modifier can be used to create a minimal header. + +```jsx + + + + Spirit + + + ``` -## Lines +## Header Fluid -You can add the number of lines to which you want to truncate the text using `lines` props +The `isFluid` modifier can be used to create a fluid header. ```jsx -{/* Text go here */} + + + + Spirit + + + ``` ## API -| Name | Type | Default | Required | Description | -| ------------- | ----------------------- | ------- | -------- | -------------------------------------------------- | -| `children` | `string` \| `ReactNode` | `null` | ✓ | Content of the Truncate | -| `elementType` | `ElementType` | `span` | ✕ | Type of element used | -| `lines` | `number` | 3 | ✕ | The number of lines on which the text is truncated | +| Name | Type | Default | Required | Description | +| ---------- | ----------------------- | ------- | -------- | -------------------------------------------- | +| `children` | `string` \| `ReactNode` | `null` | ✓ | Content of the UNSTABLE_Header | +| `isFluid` | `boolean` | `false` | ✕ | UNSTABLE_Header without container | +| `isSimple` | `bool` | `false` | ✕ | Shorter, centered version of UNSTABLE_Header | 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]