Skip to content

Commit

Permalink
chore(Heading): fix the documentation
Browse files Browse the repository at this point in the history
  • Loading branch information
@domihustinova
domihustinova committed Feb 17, 2025
1 parent 63db99d commit 8a214d1
Showing 1 changed file with 22 additions and 20 deletions.
42 changes: 22 additions & 20 deletions packages/orbit-components/src/Heading/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,24 +16,24 @@ After adding import to your project you can use it simply like:

The table below contains all types of props available in the Heading component.

| Name | Type | Default | Description |
| :-------------- | :------------------------- | :--------- | :--------------------------------------------------------------------------------------------------------- |
| as | [`enum`](#enum) | `"div"` | The element used for the root node. |
| role | `"heading"` | | The role attribute of the element. Can only be defined if `as="div"`. If defined, `level` must be defined. |
| level | `number` | | The level of the Heading. Required if `role` is defined as `"heading"`. |
| children | `React.Node` | | The content of the Heading. |
| dataTest | `string` | | Optional prop for testing purposes. |
| align | [`enum`](#enum) | `left` | `text-align` of `Heading` component. |
| dataA11ySection | `string` | | ID for a `<SkipNavigation>` component. |
| id | `string` | | Adds `id` HTML attribute to an element. Expects a unique ID. |
| inverted | `boolean` | | The `true`, the Heading color will be white. |
| spaceAfter | `enum` | | Additional `margin-bottom` after component. |
| **type** | [`enum`](#enum) | `"title1"` | The size type of Heading. |
| mediumMobile | [`Object`](#media-queries) | | Object for setting up properties for the mediumMobile viewport. [See Media queries](#media-queries) |
| largeMobile | [`Object`](#media-queries) | | Object for setting up properties for the largeMobile viewport. [See Media queries](#media-queries) |
| tablet | [`Object`](#media-queries) | | Object for setting up properties for the tablet viewport. [See Media queries](#media-queries) |
| desktop | [`Object`](#media-queries) | | Object for setting up properties for the desktop viewport. [See Media queries](#media-queries) |
| largeDesktop | [`Object`](#media-queries) | | Object for setting up properties for the largeDesktop viewport. [See Media queries](#media-queries) |
| Name | Type | Default | Description |
| :-------------- | :------------------------- | :--------- | :-------------------------------------------------------------------------------------------------------------------------------- |
| as | [`enum`](#enum) | `"div"` | Defines the HTML element to be rendered. See Accessibility tab. |
| role | `"heading"` | | The role attribute of the element. Can only be defined if `as="div"`. If defined, `level` must be defined. See Accessibility tab. |
| level | `number` | | The level of the Heading. Required if `role` is defined as `"heading"`. See Accessibility tab. |
| children | `React.Node` | | The content of the Heading. |
| dataTest | `string` | | Optional prop for testing purposes. |
| align | [`enum`](#enum) | `start` | `text-align` of the Heading component. |
| dataA11ySection | `string` | | ID for a SkipNavigation component. See Accessibility tab. |
| id | `string` | | Adds `id` HTML attribute to an element. Expects a unique ID. |
| inverted | `boolean` | | If `true`, the Heading color will be white. |
| spaceAfter | `enum` | | Additional `margin-bottom` after component. |
| type | [`enum`](#enum) | `"title0"` | The size type of the Heading. |
| mediumMobile | [`Object`](#media-queries) | | Object for setting up properties for the mediumMobile viewport. [See Media queries](#media-queries) |
| largeMobile | [`Object`](#media-queries) | | Object for setting up properties for the largeMobile viewport. [See Media queries](#media-queries) |
| tablet | [`Object`](#media-queries) | | Object for setting up properties for the tablet viewport. [See Media queries](#media-queries) |
| desktop | [`Object`](#media-queries) | | Object for setting up properties for the desktop viewport. [See Media queries](#media-queries) |
| largeDesktop | [`Object`](#media-queries) | | Object for setting up properties for the largeDesktop viewport. [See Media queries](#media-queries) |

### enum

Expand All @@ -52,9 +52,11 @@ The table below contains all types of props available in the Heading component.
### Media Queries

To make Heading responsive you can use props `mediumMobile`, `largeMobile`, `tablet`, `desktop` and `largeDesktop`,
which match the [mediaQueries](https://github.com/kiwicom/orbit/tree/master/packages/orbit-components/src/utils/mediaQuery) functions and contain the following properties:
which match
the [mediaQueries](https://github.com/kiwicom/orbit/tree/master/packages/orbit-components/src/utils/mediaQuery)
functions and contain the following properties:

| Name | Type | Default | Description |
| :--------- | :-------------- | :--------- | :------------------------------------------ |
| **type** | [`enum`](#enum) | `"title1"` | The size type of Heading. |
| type | [`enum`](#enum) | `"title0"` | The size type of Heading. |
| spaceAfter | `enum` | | Additional `margin-bottom` after component. |

0 comments on commit 8a214d1

Please sign in to comment.