chore: adapt to new Heading props

kiwicom · Nov 14, 2024 · b531377 · b531377
1 parent 9a2a2aa
commit b531377
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 15 deletions.
diff --git a/packages/orbit-components/.storybook/orbitDecorator.tsx b/packages/orbit-components/.storybook/orbitDecorator.tsx
@@ -45,7 +45,7 @@ const OrbitDecorator: Decorator = (storyFn, context) => {
   return (
     <OrbitProvider useId={React.useId} theme={{ ...defaultTheme }}>
       <div style={{ padding: "20px" }}>
-        <Heading spaceAfter="medium" inverted={inverted}>
+        <Heading as="h1" spaceAfter="medium" inverted={inverted}>
           {context.kind}
         </Heading>
         <Text spaceAfter="largest" type={inverted ? "white" : "primary"}>

diff --git a/packages/orbit-components/src/Card/README.md b/packages/orbit-components/src/Card/README.md
@@ -18,20 +18,20 @@ After adding import into your project you can use it simply like:
 
 Table below contains all types of the props available in the Card component.
 
-| Name        | Type                         | Default | Description                                                                                                            |
-| :---------- | :--------------------------- | :------ | :--------------------------------------------------------------------------------------------------------------------- |
-| actions     | `React.Node`                 |         | Optional prop for Action components in header of Card                                                                  |
-| children    | `React.Node`                 |         | The content of the Card. You can use only [CardSection](#cardsection)                                                  |
-| dataTest    | `string`                     |         | Optional prop for testing purposes                                                                                     |
-| id          | `string`                     |         | Set `id` for `Card`                                                                                                    |
-| description | `React.Node`                 |         | The description of the Card                                                                                            |
-| header      | `React.Node`                 |         | The header of the Card. Useful when you need a different layout than the combination of e.g. `title` and `description` |
-| loading     | `boolean`                    |         | If `true` `Loading` will be rendered                                                                                   |
-| onClose     | `() => void \| Promise`      |         | Callback that is triggered when Card is closing                                                                        |
-| title       | `React.Node`                 |         | The title of the Card                                                                                                  |
-| titleAs     | [`enum`](#enum)              | `"h2"`  | The element used for the root node of the title of Card.                                                               |
-| margin      | `string \| number \| Object` |         | Utility prop to set margin.                                                                                            |
-| labelClose  | `string`                     | `Close` | Property for passing translation string to close Button.                                                               |
+| Name        | Type                         | Default | Description                                                                                                             |
+| :---------- | :--------------------------- | :------ | :---------------------------------------------------------------------------------------------------------------------- |
+| actions     | `React.Node`                 |         | Optional prop for Action components in header of Card.                                                                  |
+| children    | `React.Node`                 |         | The content of the Card. You can use only [CardSection](#cardsection).                                                  |
+| dataTest    | `string`                     |         | Optional prop for testing purposes.                                                                                     |
+| id          | `string`                     |         | Set `id` for `Card`.                                                                                                    |
+| description | `React.Node`                 |         | The description of the Card.                                                                                            |
+| header      | `React.Node`                 |         | The header of the Card. Useful when you need a different layout than the combination of e.g. `title` and `description`. |
+| loading     | `boolean`                    |         | If `true`, a loading animation will be rendered.                                                                        |
+| onClose     | `() => void \| Promise`      |         | Callback that is triggered when Card is closing.                                                                        |
+| title       | `React.Node`                 |         | The title of the Card.                                                                                                  |
+| titleAs     | [`enum`](#enum)              | `"h2"`  | The element used for the root node of the title of Card. It **does not** impact the visual style of the title.          |
+| margin      | `string \| number \| Object` |         | Utility prop to set margin.                                                                                             |
+| labelClose  | `string`                     | `Close` | Property for passing translation string to close Button.                                                                |
 
 ### CardSection
 

diff --git a/packages/orbit-components/src/Card/components/Header.tsx b/packages/orbit-components/src/Card/components/Header.tsx
@@ -51,6 +51,7 @@ const Header = ({
             <Heading
               type={isSection ? "title4" : "title3"}
               as={titleAs}
+              role={undefined} // To avoid requiring the `level` prop
               dataA11ySection={dataA11ySection}
             >
               {title}