Skip to content

Commit b6fb040

Browse files
ramonmuliapregno
ramonmulia
and
pregno
authored
feat: Adding inset prop in Container (#471)
Co-authored-by: Andrea Pregnolato <[email protected]>
1 parent 7d5e0de commit b6fb040

File tree

7 files changed

+176
-24
lines changed

7 files changed

+176
-24
lines changed

‎apps/docs/content/3-components/2-library/container.mdx

+52-6
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,58 @@ libraries:
1717

1818
## Usage
1919

20+
### Classes guidelines
21+
22+
- `gi-layout-container`: Default container with Tailwind's container behaviour from md breakpoint.
23+
- `gi-layout-container-max-xl`: Container capped at 1280px for optimal readability.
24+
- `gi-layout-container-full-width`: Full-width container capped at 2xl (1536px).
25+
26+
### Container Props
27+
28+
- **children** (required): A React node representing the content to be rendered inside the container.
29+
- **id** (optional): A string to uniquely identify the container, useful for testing or targeting specific containers in styles or scripts.
30+
- **insetTop** (optional): Defines the top padding of the container. Options are `none`, `md`, `lg`, and `xl`.
31+
- **insetBottom** (optional): Defines the bottom padding of the container. Options are `none`, `md`, `lg`, and `xl`.
32+
33+
### Responsive Inset Values
34+
35+
<table>
36+
<thead>
37+
<tr>
38+
<th>Inset value</th>
39+
<th>Desktop</th>
40+
<th>Tablet</th>
41+
<th>Mobile</th>
42+
</tr>
43+
</thead>
44+
<tbody>
45+
<tr>
46+
<td>none</td>
47+
<td>***0px***</td>
48+
<td>***0px***</td>
49+
<td>***0px***</td>
50+
</tr>
51+
<tr>
52+
<td>md</td>
53+
<td>***32px***</td>
54+
<td>***24px***</td>
55+
<td>***16px***</td>
56+
</tr>
57+
<tr>
58+
<td>lg</td>
59+
<td>***48px***</td>
60+
<td>***36px***</td>
61+
<td>***24px***</td>
62+
</tr>
63+
<tr>
64+
<td>xl</td>
65+
<td>***64px***</td>
66+
<td>***48px***</td>
67+
<td>***32px***</td>
68+
</tr>
69+
</tbody>
70+
</table>
71+
2072
### Best Practices
2173

2274
### When to use this component
@@ -32,12 +84,6 @@ Avoid using the container component if you need a flexible or dynamic layout tha
3284
This component is not suitable for scenarios where you need to override the maximum width or margins frequently, or when the content needs to be fluid across the full width of the viewport.
3385
If your content does not require centralised alignment or if the predefined styles conflict with the specific requirements of your design, consider using a custom container or a different layout component that offers greater flexibility.
3486

35-
### Classes guidelines
36-
37-
- `gi-layout-container`: Default container with Tailwind's container behaviour from md breakpoint.
38-
- `gi-layout-container-max-xl`: Container capped at 1280px for optimal readability.
39-
- `gi-layout-container-full-width`: Full-width container capped at 2xl (1536px).
40-
4187
## Status
4288

4389
<ComponentStatusBlock componentId="container" />

‎apps/docs/dictionary.txt

+3-1
Original file line numberDiff line numberDiff line change
@@ -122,4 +122,6 @@ xs
122122
currentStepIndex
123123
completeAll
124124
StepItem
125-
defaultOpen
125+
defaultOpen
126+
insetTop
127+
insetBottom

‎packages/design/tailwind/css/components.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -1338,7 +1338,7 @@ input[type='file' i] {
13381338
}
13391339

13401340
.gi-progress-stepper[data-orientation='vertical'] {
1341-
@apply gi-flex-col gi-gap-14 gi-w-fit;
1341+
@apply gi-flex-col gi-gap-14 gi-w-full;
13421342
}
13431343

13441344
.gi-progress-stepper > div:last-child {

‎packages/design/tailwind/css/layout.css

+32
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,38 @@
66
@apply gi-w-full gi-px-4 md:gi-container md:gi-mx-auto;
77
}
88

9+
.gi-layout-container-inset {
10+
@apply gi-w-full gi-container gi-mx-auto;
11+
}
12+
13+
.gi-layout-container-inset[data-inset-top='none'] {
14+
@apply gi-pt-0;
15+
}
16+
.gi-layout-container-inset[data-inset-bottom='none'] {
17+
@apply gi-pt-0;
18+
}
19+
20+
.gi-layout-container-inset[data-inset-top='md'] {
21+
@apply lg:gi-pt-8 md:gi-pt-6 gi-pt-4;
22+
}
23+
.gi-layout-container-inset[data-inset-bottom='md'] {
24+
@apply lg:gi-pb-8 md:gi-pb-6 gi-pb-4;
25+
}
26+
27+
.gi-layout-container-inset[data-inset-top='lg'] {
28+
@apply lg:gi-pt-12 md:gi-pt-9 gi-pt-6;
29+
}
30+
.gi-layout-container-inset[data-inset-bottom='lg'] {
31+
@apply lg:gi-pb-12 md:gi-pb-9 gi-pb-6;
32+
}
33+
34+
.gi-layout-container-inset[data-inset-top='xl'] {
35+
@apply lg:gi-pt-16 md:gi-pt-12 gi-pt-8;
36+
}
37+
.gi-layout-container-inset[data-inset-bottom='xl'] {
38+
@apply lg:gi-pb-16 md:gi-pb-12 gi-pb-8;
39+
}
40+
941
/* Similar to gi-container class but limited to max-width to 1280px */
1042
.gi-layout-container-max-xl {
1143
@apply gi-w-full gi-px-6 lg:gi-px-8 gi-mx-auto sm:gi-max-w-[640px] md:gi-max-w-[768px] lg:gi-max-w-[1024px] xl:gi-max-w-[1280px] md:gi-mx-auto;

‎packages/react/ds/src/container/container.stories.tsx

+45-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import type { Meta, StoryObj } from '@storybook/react';
2-
import { Container } from './container.js';
2+
import { Container, ContainerInsetSizeEnum } from './container.js';
33

44
const meta = {
55
title: 'Layout/Container',
@@ -24,8 +24,52 @@ export const Default: Story = {
2424
description:
2525
'HTML content or other components to be rendered inside the container.',
2626
},
27+
insetTop: {
28+
control: 'select',
29+
options: Object.values(ContainerInsetSizeEnum),
30+
description:
31+
'Defines the top padding of the container. Options are `none`, `md`, `lg`, and `xl`.',
32+
},
33+
insetBottom: {
34+
control: 'select',
35+
options: Object.values(ContainerInsetSizeEnum),
36+
description:
37+
'Defines the bottom padding of the container. Options are `none`, `md`, `lg`, and `xl`.',
38+
},
2739
},
2840
args: {
2941
children: `Paragraph`,
3042
},
3143
};
44+
45+
export const WithNoneInset: Story = {
46+
args: {
47+
children: 'Paragraph',
48+
insetBottom: ContainerInsetSizeEnum.None,
49+
insetTop: ContainerInsetSizeEnum.None,
50+
},
51+
};
52+
53+
export const WithMediumInset: Story = {
54+
args: {
55+
children: 'Paragraph',
56+
insetTop: ContainerInsetSizeEnum.Medium,
57+
insetBottom: ContainerInsetSizeEnum.Medium,
58+
},
59+
};
60+
61+
export const WithLargeInset: Story = {
62+
args: {
63+
children: 'Paragraph',
64+
insetTop: ContainerInsetSizeEnum.Large,
65+
insetBottom: ContainerInsetSizeEnum.Large,
66+
},
67+
};
68+
69+
export const WithExtraLargeInset: Story = {
70+
args: {
71+
children: 'Paragraph',
72+
insetTop: ContainerInsetSizeEnum.ExtraLarge,
73+
insetBottom: ContainerInsetSizeEnum.ExtraLarge,
74+
},
75+
};

‎packages/react/ds/src/container/container.tsx

+33-5
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,40 @@
1+
import { cn } from '../cn.js';
2+
3+
export const ContainerInsetSizeEnum = {
4+
None: 'none',
5+
Medium: 'md',
6+
Large: 'lg',
7+
ExtraLarge: 'xl',
8+
} as const;
9+
10+
export type ContainerInsetSizeType =
11+
(typeof ContainerInsetSizeEnum)[keyof typeof ContainerInsetSizeEnum];
12+
13+
type ContainerProps = {
14+
children: React.ReactNode;
15+
id?: string;
16+
insetTop?: ContainerInsetSizeType;
17+
insetBottom?: ContainerInsetSizeType;
18+
};
19+
120
export function Container({
221
children,
322
id,
4-
}: {
5-
children: React.ReactNode;
6-
id?: string;
7-
}) {
23+
insetBottom,
24+
insetTop,
25+
}: ContainerProps) {
26+
const hasInset = insetTop || insetBottom;
827
return (
9-
<div data-testid="govie-container" className="gi-layout-container" id={id}>
28+
<div
29+
data-testid="govie-container"
30+
data-inset-top={insetTop}
31+
data-inset-bottom={insetBottom}
32+
className={cn({
33+
'gi-layout-container': !hasInset,
34+
'gi-layout-container-inset': hasInset,
35+
})}
36+
id={id}
37+
>
1038
{children}
1139
</div>
1240
);

‎packages/react/ds/src/progress-stepper/progress-stepper.stories.tsx

+10-10
Original file line numberDiff line numberDiff line change
@@ -199,7 +199,7 @@ export const WithFormContentStepVertical: Story = {
199199
raising.
200200
</Paragraph>
201201
<FormField
202-
className="gi-w-[450px]"
202+
className="lg:gi-w-[450px] gi-w-full"
203203
label={{
204204
text: 'Category',
205205
}}
@@ -209,7 +209,7 @@ export const WithFormContentStepVertical: Story = {
209209
</Select>
210210
</FormField>
211211
<FormField
212-
className="gi-w-[450px]"
212+
className="lg:gi-w-[450px] gi-w-full"
213213
label={{
214214
text: 'Customer Type',
215215
}}
@@ -219,7 +219,7 @@ export const WithFormContentStepVertical: Story = {
219219
</Select>
220220
</FormField>
221221
<FormField
222-
className="gi-w-[450px]"
222+
className="lg:gi-w-[450px] gi-w-full"
223223
label={{
224224
text: 'Related Topic',
225225
}}
@@ -238,7 +238,7 @@ export const WithFormContentStepVertical: Story = {
238238
details below. If it's about yourself, enter your own details.
239239
</Paragraph>
240240
<FormField
241-
className="gi-w-[450px]"
241+
className="lg:gi-w-[450px] gi-w-full"
242242
label={{
243243
htmlFor: 'fullname-text-id',
244244
text: 'Full name',
@@ -247,7 +247,7 @@ export const WithFormContentStepVertical: Story = {
247247
<TextInput id="fullname-text-id" />
248248
</FormField>
249249
<FormField
250-
className="gi-w-[450px]"
250+
className="lg:gi-w-[450px] gi-w-full"
251251
label={{
252252
htmlFor: 'pps-number-text-id',
253253
text: 'PPS Number',
@@ -256,7 +256,7 @@ export const WithFormContentStepVertical: Story = {
256256
<TextInput id="pps-number-text-id" />
257257
</FormField>
258258
<FormField
259-
className="gi-w-[450px]"
259+
className="lg:gi-w-[450px] gi-w-full"
260260
hint={{
261261
text: `Don't know your school number? Find a school application.`,
262262
}}
@@ -268,7 +268,7 @@ export const WithFormContentStepVertical: Story = {
268268
<TextInput id="school-roll-number-text-id" />
269269
</FormField>
270270
<FormField
271-
className="gi-w-[450px]"
271+
className="lg:gi-w-[450px] gi-w-full"
272272
hint={{
273273
text: `(Max 1'000 words)`,
274274
}}
@@ -301,7 +301,7 @@ export const WithFormContentStepVertical: Story = {
301301
receive the updates.
302302
</Paragraph>
303303
<FormField
304-
className="gi-w-[450px]"
304+
className="lg:gi-w-[450px] gi-w-full"
305305
hint={{
306306
text: '(to be used for communications relating to this query)',
307307
}}
@@ -313,7 +313,7 @@ export const WithFormContentStepVertical: Story = {
313313
<TextInput id="contact-fullname-text-id" />
314314
</FormField>
315315
<FormField
316-
className="gi-w-[450px]"
316+
className="lg:gi-w-[450px] gi-w-full"
317317
hint={{
318318
text: '(to be used for communications relating to this query)',
319319
}}
@@ -325,7 +325,7 @@ export const WithFormContentStepVertical: Story = {
325325
<TextInput id="phone-number-text-id" />
326326
</FormField>
327327
<FormField
328-
className="gi-w-[450px]"
328+
className="lg:gi-w-[450px] gi-w-full"
329329
hint={{
330330
text: '(to be used for communications relating to this query)',
331331
}}

0 commit comments

Comments
 (0)