fixup! Feat(web-react): UNSTABLE_Header in React #DS-1524

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';
+
+<UNSTABLE_Header>{/* Content go here */}</UNSTABLE_Header>;
+```
+
+## 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';
+<UNSTABLE_Header>
+  <Link href="/">
+    <ProductLogo>
+      <img src="https://www.example.com/logo.png" width="65" height="24" alt="Spirit" />
+    </ProductLogo>
+  </Link>
+</UNSTABLE_Header>
+```
+
+## Minimal Header
 
-<UNSTABLE_Truncate>{/* Text go here */}</UNSTABLE_Truncate>;
+The `isSimple` modifier can be used to create a minimal header.
+
+```jsx
+<UNSTABLE_Header isSimple>
+  <Link href="/">
+    <ProductLogo>
+      <img src="https://www.example.com/logo.png" width="65" height="24" alt="Spirit" />
+    </ProductLogo>
+  </Link>
+</UNSTABLE_Header>
 ```
 
-## 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
-<UNSTABLE_Truncate lines={2}>{/* Text go here */}</UNSTABLE_Truncate>
+<UNSTABLE_Header isFluid>
+  <Link href="/">
+    <ProductLogo>
+      <img src="https://www.example.com/logo.png" width="65" height="24" alt="Spirit" />
+    </ProductLogo>
+  </Link>
+</UNSTABLE_Header>
 ```
 
 ## 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]