Skip to content

Commit 0ba3e9c

Browse files
bigfishdesign13bigfishdesign13
authored
Merge pull request #1839 from NYPL/DSD-2075/story-headers-chakra-exports
DSD-2075: updated story headers for Chakra Exports
2 parents 3b68717 + 16becf5 commit 0ba3e9c

File tree

5 files changed

+53
-28
lines changed

5 files changed

+53
-28
lines changed

‎src/components/Chakra/Box.mdx

Lines changed: 17 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,19 @@ import { Box } from "@chakra-ui/react";
22
import { Meta } from "@storybook/blocks";
33

44
import VideoPlayer from "../VideoPlayer/VideoPlayer";
5+
import ComponentDocsHeader from "../../utils/components/ComponentDocsHeader";
56

67
<Meta title="Components/Chakra Exports/Layout/Box" />
78

8-
# Box
9+
<ComponentDocsHeader
10+
category="Chakra exports"
11+
componentName="Box"
12+
summary="An abstracted styling component that provides an easy way to apply styles"
13+
versionAdded="0.24.0"
14+
versionLatest="0.24.0"
15+
/>
916

10-
| Component Version | DS Version |
11-
| ----------------- | ---------- |
12-
| Added | `0.24.0` |
17+
## Overview
1318

1419
Note: This needs the use of the `DSProvider` component. See the
1520
[Chakra UI docs](../?path=/docs/chakra-ui--docs#dsprovider) for more information.
@@ -21,16 +26,18 @@ a `div` but can render another element using the `as` prop.
2126
All available props can be found on the [Style Props](https://chakra-ui.com/docs/features/style-props)
2227
guide on the Chakra UI site.
2328

24-
In the following example, the padding, background color, and text color are
25-
updated with the `p`, `bg`, and `color` props respectively.
26-
2729
{
2830

29-
<Box p="s" mb="s" bg="brand.primary" color="ui.white">
30-
This text is inside a `Box` component.
31+
<Box borderWidth="2px" padding="s" borderRadius="lg" overflow="hidden">
32+
<Box p="s" bg="brand.primary" color="ui.white">
33+
This text is inside a `Box` component.
34+
</Box>
3135
</Box>
3236
}
3337

38+
In the example above, the padding, background color, and text color are
39+
updated with the `p`, `bg`, and `color` props respectively.
40+
3441
## With VideoPlayer Component Example
3542

3643
In this example, the props added to the `Box` component are `borderWidth`,
@@ -39,7 +46,7 @@ In this example, the props added to the `Box` component are `borderWidth`,
3946

4047
{
4148

42-
<Box borderWidth="3px" padding="s" borderRadius="lg" overflow="hidden">
49+
<Box borderWidth="2px" padding="s" borderRadius="lg" overflow="hidden">
4350
<VideoPlayer
4451
videoId="nm-dD2tx6bk"
4552
videoType="youtube"

‎src/components/Chakra/Center.mdx

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,19 @@ import { Meta } from "@storybook/blocks";
33

44
import Icon from "../Icons/Icon";
55
import Image from "../Image/Image";
6+
import ComponentDocsHeader from "../../utils/components/ComponentDocsHeader";
67

78
<Meta title="Components/Chakra Exports/Layout/Center, Circle, Square" />
89

9-
# Center, Circle, Square
10+
<ComponentDocsHeader
11+
category="Chakra exports"
12+
componentName="Center, Circle, Square"
13+
summary="Basic layout and formatting components"
14+
versionAdded="0.24.0"
15+
versionLatest="0.24.0"
16+
/>
1017

11-
| Component Version | DS Version |
12-
| ----------------- | ---------- |
13-
| Added | `0.24.0` |
18+
## Overview
1419

1520
Note: This needs the use of the `DSProvider` component. See the
1621
[Chakra UI docs](../?path=/docs/chakra-ui--docs#dsprovider) for more information.

‎src/components/Chakra/Flex.mdx

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,19 @@ import { Meta, Source } from "@storybook/blocks";
33

44
import Heading from "../Heading/Heading";
55
import Link from "../Link/Link";
6+
import ComponentDocsHeader from "../../utils/components/ComponentDocsHeader";
67

78
<Meta title="Components/Chakra Exports/Layout/Flex" />
89

9-
# Flex
10+
<ComponentDocsHeader
11+
category="Chakra exports"
12+
componentName="Flex"
13+
summary="Container used to manage flex layouts"
14+
versionAdded="0.25.10"
15+
versionLatest="0.25.10"
16+
/>
1017

11-
| Component Version | DS Version |
12-
| ----------------- | ---------- |
13-
| Added | `0.25.10` |
14-
| Latest | `0.25.10` |
18+
## Overview
1519

1620
Note: This needs the use of the `DSProvider` component. See the
1721
[Chakra UI docs](../?path=/docs/chakra-ui--docs#dsprovider) for more information.

‎src/components/Chakra/Grid.mdx

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,18 @@
11
import { Box, Grid, GridItem } from "@chakra-ui/react";
22
import { Meta, Source } from "@storybook/blocks";
3+
import ComponentDocsHeader from "../../utils/components/ComponentDocsHeader";
34

45
<Meta title="Components/Chakra Exports/Layout/Grid" />
56

6-
# Grid
7+
<ComponentDocsHeader
8+
category="Chakra exports"
9+
componentName="Grid"
10+
summary="Container used to manage grid layouts"
11+
versionAdded="0.25.1"
12+
versionLatest="0.25.1"
13+
/>
714

8-
| Component Version | DS Version |
9-
| ----------------- | ---------- |
10-
| Added | `0.25.1` |
11-
| Latest | `0.25.1` |
15+
## Overview
1216

1317
Note: This needs the use of the `DSProvider` component. See the
1418
[Chakra UI docs](../?path=/docs/chakra-ui--docs#dsprovider) for more information.

‎src/components/Chakra/Stack.mdx

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,19 @@ import { Box, Stack, HStack, VStack, Circle } from "@chakra-ui/react";
22
import { Meta } from "@storybook/blocks";
33

44
import Icon from "../Icons/Icon";
5+
import ComponentDocsHeader from "../../utils/components/ComponentDocsHeader";
56

67
<Meta title="Components/Chakra Exports/Layout/Stack, HStack, VStack" />
78

8-
# Stack, HStack, VStack
9+
<ComponentDocsHeader
10+
category="Chakra exports"
11+
componentName="Stack, HStack, VStack"
12+
summary="Containers used to render children in a vertical or horizontal stack"
13+
versionAdded="0.24.0"
14+
versionLatest="0.24.0"
15+
/>
916

10-
| Component Version | DS Version |
11-
| ----------------- | ---------- |
12-
| Added | `0.24.0` |
17+
## Overview
1318

1419
Note: This needs the use of the `DSProvider` component. See the
1520
[Chakra UI docs](../?path=/docs/chakra-ui--docs#dsprovider) for more information.

0 commit comments

Comments
 (0)