Skip to content

Commit 82be871

Browse files
authoredFeb 14, 2022
docs(aspect-ratio): update aspect ratio docs for v11 (#10636)
* docs(grid): scope storybook styles * docs(aspect-ratio): update aspect ratio docs for v11 * docs(react): update storybook classes for next
1 parent 9cadb15 commit 82be871

File tree

4 files changed

+117
-11
lines changed

4 files changed

+117
-11
lines changed
 

‎packages/react/src/components/AspectRatio/AspectRatio-story.scss

+2-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,8 @@
55
// LICENSE file in the root directory of this source tree.
66
//
77

8-
.aspect-ratio-story .bx--aspect-ratio {
8+
.aspect-ratio-story .bx--aspect-ratio,
9+
.aspect-ratio-story .cds--aspect-ratio {
910
background: #f7f1ff;
1011
padding: 1rem;
1112
}
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
/**
2+
* Copyright IBM Corp. 2016, 2018
3+
*
4+
* This source code is licensed under the Apache-2.0 license found in the
5+
* LICENSE file in the root directory of this source tree.
6+
*/
7+
8+
import '../AspectRatio-story.scss';
9+
10+
import React from 'react';
11+
import { Grid, Column } from '../../Grid';
12+
import { AspectRatio } from '../';
13+
import mdx from '../AspectRatio.mdx';
14+
15+
export default {
16+
title: 'Components/AspectRatio',
17+
component: AspectRatio,
18+
decorators: [
19+
(Story) => (
20+
<div className="aspect-ratio-story">
21+
<Story />
22+
</div>
23+
),
24+
],
25+
parameters: {
26+
docs: {
27+
page: mdx,
28+
},
29+
},
30+
};
31+
32+
export const AspectRatioStory = () => {
33+
return (
34+
<Grid>
35+
<Column sm={1} md={2} lg={4}>
36+
<AspectRatio ratio="1x1">Content</AspectRatio>
37+
</Column>
38+
<Column sm={1} md={2} lg={4}>
39+
<AspectRatio ratio="1x1">Content</AspectRatio>
40+
</Column>
41+
<Column sm={1} md={2} lg={4}>
42+
<AspectRatio ratio="1x1">Content</AspectRatio>
43+
</Column>
44+
<Column sm={1} md={2} lg={4}>
45+
<AspectRatio ratio="1x1">Content</AspectRatio>
46+
</Column>
47+
</Grid>
48+
);
49+
};
50+
51+
AspectRatioStory.storyName = 'AspectRatio';
52+
53+
export const Playground = {
54+
argTypes: {
55+
as: {
56+
control: {
57+
type: null,
58+
},
59+
},
60+
children: {
61+
control: {
62+
type: null,
63+
},
64+
},
65+
className: {
66+
control: {
67+
type: null,
68+
},
69+
},
70+
ratio: {
71+
control: {
72+
type: 'select',
73+
},
74+
defaultValue: '1x1',
75+
options: ['16x9', '9x16', '2x1', '1x2', '4x3', '3x4', '1x1'],
76+
},
77+
},
78+
render: ({ ratio }) => {
79+
return (
80+
<Grid>
81+
<Column sm={1} md={2} lg={4}>
82+
<AspectRatio ratio={ratio}>Content</AspectRatio>
83+
</Column>
84+
<Column sm={1} md={2} lg={4}>
85+
<AspectRatio ratio={ratio}>Content</AspectRatio>
86+
</Column>
87+
<Column sm={1} md={2} lg={4}>
88+
<AspectRatio ratio={ratio}>Content</AspectRatio>
89+
</Column>
90+
<Column sm={1} md={2} lg={4}>
91+
<AspectRatio ratio={ratio}>Content</AspectRatio>
92+
</Column>
93+
</Grid>
94+
);
95+
},
96+
};

‎packages/react/src/components/Grid/next/Grid.stories.js

+9
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,15 @@ export default {
2626
page: mdx,
2727
},
2828
},
29+
decorators: [
30+
(Story) => {
31+
return (
32+
<div className="sb-css-grid-container">
33+
<Story />
34+
</div>
35+
);
36+
},
37+
],
2938
};
3039

3140
export const Wide = () => {

‎packages/react/src/components/Grid/next/Grid.stories.scss

+10-10
Original file line numberDiff line numberDiff line change
@@ -2,45 +2,45 @@
22
@use '@carbon/styles/scss/type' as *;
33

44
// Grid modes
5-
.cds--css-grid {
5+
.sb-css-grid-container .cds--css-grid {
66
background-color: $blue-20;
77
outline: 1px dashed $blue-40;
88
}
99

10-
.cds--css-grid p {
10+
.sb-css-grid-container .cds--css-grid p {
1111
@include type-style('code-02');
1212
}
1313

14-
.cds--css-grid p:first-of-type {
14+
.sb-css-grid-container .cds--css-grid p:first-of-type {
1515
//messing up progress indicator stories
1616
margin-top: 0;
1717
}
1818

19-
.cds--css-grid.cds--css-grid--condensed {
19+
.sb-css-grid-container .cds--css-grid.cds--css-grid--condensed {
2020
background-color: $purple-20;
2121
outline: 1px dashed $purple-40;
2222
}
2323

2424
// Only use background for subgrid example, not other subgrids in "mixed modes" story or others
25-
.cds--subgrid.example {
25+
.sb-css-grid-container .cds--subgrid.example {
2626
background-color: $green-20;
2727
}
2828

2929
// Columns
30-
.cds--css-grid > [class*='col'],
31-
.cds--subgrid > [class*='col'] {
30+
.sb-css-grid-container .cds--css-grid > [class*='col'],
31+
.sb-css-grid-container .cds--subgrid > [class*='col'] {
3232
min-height: 80px;
3333
}
3434

35-
.cds--css-grid > [class*='col'] {
35+
.sb-css-grid-container .cds--css-grid > [class*='col'] {
3636
background: $blue-10;
3737
}
3838

39-
.cds--subgrid > [class*='col'] {
39+
.sb-css-grid-container .cds--subgrid > [class*='col'] {
4040
background: $green-10;
4141
outline: 1px dashed $green-30;
4242
}
4343

44-
.cds--css-grid.cds--css-grid--condensed > [class*='col'] {
44+
.sb-css-grid-container.cds--css-grid.cds--css-grid--condensed > [class*='col'] {
4545
background: $purple-10;
4646
}

0 commit comments

Comments
 (0)
Please sign in to comment.