Skip to content

Commit 309cc06

Browse files
veekaysveekays
committed
feat(utility-classes): add CSS helper classes
1 parent dc7e6b3 commit 309cc06

File tree

12 files changed

+2422
-227
lines changed

12 files changed

+2422
-227
lines changed

‎core/components/css-utilities/Border/Border.story.tsx‎

Lines changed: 164 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -1,101 +1,95 @@
11
import * as React from 'react';
2-
import { Heading, Paragraph, Card, Table, Text } from '@/index';
2+
import { Heading, Paragraph, Card, Table } from '@/index';
33
import utilitiesSchema from '../Schema';
44

55
export const border = () => {
66
const data = [
77
{
88
className: 'border',
9-
properties: 'border: var(--border) ;',
9+
properties: 'border: var(--border);',
1010
},
1111
{
1212
className: 'border-top',
13-
properties: ' border-top: var(--border) ;',
13+
properties: 'border-top: var(--border);',
1414
},
1515
{
1616
className: 'border-bottom',
17-
properties: 'border-bottom: var(--border) ;',
17+
properties: 'border-bottom: var(--border);',
1818
},
1919
{
2020
className: 'border-right',
21-
properties: 'border-right: var(--border) ;',
21+
properties: 'border-right: var(--border);',
2222
},
2323
{
2424
className: 'border-left',
25-
properties: 'border-left: var(--border) ;',
25+
properties: 'border-left: var(--border);',
2626
},
2727
{
2828
className: 'border-0',
29-
properties: 'border: 0 ;',
29+
properties: 'border: 0;',
3030
},
3131
{
3232
className: 'border-top-0',
33-
properties: ' border-top: 0 ;',
33+
properties: 'border-top: 0;',
3434
},
3535
{
3636
className: 'border-bottom-0',
37-
properties: 'border-bottom: 0 ;',
37+
properties: 'border-bottom: 0;',
3838
},
3939
{
4040
className: 'border-right-0',
41-
properties: 'border-right: 0 ;',
41+
properties: 'border-right: 0;',
4242
},
4343
{
4444
className: 'border-left-0',
45-
properties: 'border-left: 0 ;',
45+
properties: 'border-left: 0;',
4646
},
4747
];
4848

4949
const radiusData = [
5050
{
5151
className: 'rounded-2-5',
52-
properties: 'border-radius: 1px ;',
52+
properties: 'border-radius: var(--border-radius-2-5); /* 1px */',
5353
},
5454
{
5555
className: 'rounded-05',
56-
properties: 'border-radius: 2px ;',
56+
properties: 'border-radius: var(--border-radius-05); /* 2px */',
5757
},
5858
{
5959
className: 'rounded-10',
60-
properties: 'border-radius: 4px ;',
60+
properties: 'border-radius: var(--border-radius-10); /* 4px */',
6161
},
6262
{
6363
className: 'rounded-15',
64-
properties: 'border-radius: 6px ;',
64+
properties: 'border-radius: var(--border-radius-15); /* 6px */',
6565
},
6666
{
6767
className: 'rounded-20',
68-
properties: 'border-radius: 8px ;',
68+
properties: 'border-radius: var(--border-radius-20); /* 8px */',
6969
},
7070
{
7171
className: 'rounded-30',
72-
properties: 'border-radius: 12px ;',
72+
properties: 'border-radius: var(--border-radius-30); /* 12px */',
7373
},
7474
{
7575
className: 'rounded-40',
76-
properties: 'border-radius: 16px ;',
76+
properties: 'border-radius: var(--border-radius-40); /* 16px */',
7777
},
7878
{
7979
className: 'rounded-full',
80-
properties: 'border-radius: 9999px ;',
80+
properties: 'border-radius: var(--border-radius-full); /* 9999px */',
8181
},
8282
];
8383

8484
return (
85-
<div>
86-
<Heading size="xxl">Border</Heading>
85+
<div className="p-4">
86+
<Heading size="xxl">Border Utilities</Heading>
8787
<br />
88-
&nbsp;
89-
<Text weight="strong">
90-
Use border utilities to add or remove an element’s borders. Choose from all borders or one at a time.
91-
</Text>
92-
&nbsp;
93-
<div
94-
style={{
95-
height: '250px',
96-
}}
97-
className="mt-5 mb-8"
98-
>
88+
<Paragraph appearance="default">
89+
Use border utilities to add or remove an element's borders. Choose from all borders or one at a time.
90+
</Paragraph>
91+
92+
<div className="mt-8 mb-8">
9993
<Card className="h-100">
10094
<Table
10195
data={data}
@@ -108,15 +102,15 @@ export const border = () => {
108102
/>
109103
</Card>
110104
</div>
111-
<br />
112-
<Heading size="m">Border Radius</Heading>
113-
<br />
114-
<div
115-
style={{
116-
height: '250px',
117-
}}
118-
className="mt-5 mb-8"
119-
>
105+
106+
<Heading size="m" className="mt-8">
107+
Border Radius
108+
</Heading>
109+
<Paragraph appearance="default">
110+
Use these utilities to apply different levels of border-radius to your elements.
111+
</Paragraph>
112+
113+
<div className="mt-8 mb-8">
120114
<Card className="h-100">
121115
<Table
122116
data={radiusData}
@@ -129,50 +123,138 @@ export const border = () => {
129123
/>
130124
</Card>
131125
</div>
132-
<br />
133-
<Heading size="m">Examples</Heading>
134-
<Paragraph>Here are some representative examples of these classes:</Paragraph>
135-
&nbsp;
136-
<div className="pl-10 h-25 bg-light w-50">
137-
<span className="border bg-secondary-lightest p-8 d-inline-block mr-6">border</span>
138-
<span className="border-top bg-secondary-lightest p-8 d-inline-block mr-6">top</span>
139-
<span className="border-right bg-secondary-lightest p-8 d-inline-block mr-6">right</span>
140-
<span className="border-bottom bg-secondary-lightest p-8 d-inline-block mr-6">bottom</span>
141-
<span className="border-left bg-secondary-lightest p-8 d-inline-block">left</span>
142-
</div>
143-
&nbsp;
144-
<div className="DocPage-codeBlock w-50 pl-10">
145-
{'<span className="border bg-secondary-lightest p-8 d-inline-block mr-6">border</span>'}
146-
<br />
147-
{'<span className="border-top bg-secondary-lightest p-8 d-inline-block mr-6">top</span>'}
148-
<br />
149-
{'<span className="border-right bg-secondary-lightest p-8 d-inline-block mr-6">right</span>'}
150-
<br />
151-
{'<span className="border-bottom bg-secondary-lightest p-8 d-inline-block mr-6">bottom</span>'}
152-
<br />
153-
{'<span className="border-left bg-secondary-lightest p-8 d-inline-block">left</span>'}
126+
127+
{/* Examples section */}
128+
<Heading size="m" className="mt-8">
129+
Examples
130+
</Heading>
131+
<Paragraph appearance="default">Here are examples of these border utilities in action:</Paragraph>
132+
133+
{/* Border examples */}
134+
<div className="mt-8 mb-8">
135+
<Heading size="s" className="mb-3">
136+
Border Placement
137+
</Heading>
138+
<div className="mb-4 d-flex flex-wrap gap-5">
139+
<div>
140+
<div className="text-center mb-2">border</div>
141+
<div className="border w-30 h-30 bg-stone-lightest d-flex align-items-center justify-content-center">
142+
All sides
143+
</div>
144+
</div>
145+
<div>
146+
<div className="text-center mb-2">border-top</div>
147+
<div className="border-top w-30 h-30 bg-jal-lightest d-flex align-items-center justify-content-center">
148+
Top only
149+
</div>
150+
</div>
151+
<div>
152+
<div className="text-center mb-2">border-right</div>
153+
<div className="border-right w-30 h-30 bg-neem-lightest d-flex align-items-center justify-content-center">
154+
Right only
155+
</div>
156+
</div>
157+
<div>
158+
<div className="text-center mb-2">border-bottom</div>
159+
<div className="border-bottom w-30 h-30 bg-haldi-lightest d-flex align-items-center justify-content-center">
160+
Bottom only
161+
</div>
162+
</div>
163+
<div>
164+
<div className="text-center mb-2">border-left</div>
165+
<div className="border-left w-30 h-30 bg-jamun-lightest d-flex align-items-center justify-content-center">
166+
Left only
167+
</div>
168+
</div>
169+
</div>
170+
<div className="mb-2 color-text-subtle font-size-xs">
171+
These classes allow you to add borders to specific sides of an element.
172+
</div>
154173
</div>
155-
&nbsp;
156-
<div className="pl-10 h-25 bg-light w-50">
157-
<span className="border border-0 bg-secondary-lightest p-8 d-inline-block mr-6">border-0</span>
158-
<span className="border border-top-0 bg-secondary-lightest p-8 d-inline-block mr-6">top-0</span>
159-
<span className="border border-right-0 bg-secondary-lightest p-8 d-inline-block mr-6">right-0</span>
160-
<span className="border border-bottom-0 bg-secondary-lightest p-8 d-inline-block mr-6">bottom-0</span>
161-
<span className="border border-left-0 bg-secondary-lightest p-8 d-inline-block">left-0</span>
174+
175+
{/* Border removal examples */}
176+
<div className="mt-8 mb-8">
177+
<Heading size="s" className="mb-3">
178+
Border Removal
179+
</Heading>
180+
<div className="mb-4 d-flex flex-wrap gap-5">
181+
<div>
182+
<div className="text-center mb-2">border border-0</div>
183+
<div className="border border-0 w-30 h-30 bg-stone-lightest d-flex align-items-center justify-content-center">
184+
No borders
185+
</div>
186+
</div>
187+
<div>
188+
<div className="text-center mb-2">border border-top-0</div>
189+
<div className="border border-top-0 w-30 h-30 bg-jal-lightest d-flex align-items-center justify-content-center">
190+
No top border
191+
</div>
192+
</div>
193+
<div>
194+
<div className="text-center mb-2">border border-right-0</div>
195+
<div className="border border-right-0 w-30 h-30 bg-neem-lightest d-flex align-items-center justify-content-center">
196+
No right border
197+
</div>
198+
</div>
199+
<div>
200+
<div className="text-center mb-2">border border-bottom-0</div>
201+
<div className="border border-bottom-0 w-30 h-30 bg-haldi-lightest d-flex align-items-center justify-content-center">
202+
No bottom border
203+
</div>
204+
</div>
205+
<div>
206+
<div className="text-center mb-2">border border-left-0</div>
207+
<div className="border border-left-0 w-30 h-30 bg-jamun-lightest d-flex align-items-center justify-content-center">
208+
No left border
209+
</div>
210+
</div>
211+
</div>
212+
<div className="mb-2 color-text-subtle font-size-xs">
213+
These utilities let you remove borders from specific sides of an element.
214+
</div>
162215
</div>
163-
&nbsp;
164-
<div className="DocPage-codeBlock w-50 pl-10">
165-
{'<span className="border border-0 bg-secondary-lightest p-8 d-inline-block mr-6">border-0</span>'}
166-
<br />
167-
{'<span className="border border-top-0 bg-secondary-lightest p-8 d-inline-block mr-6">top-0</span>'}
168-
<br />
169-
{'<span className="border border-right-0 bg-secondary-lightest p-8 d-inline-block mr-6">right-0</span>'}
170-
<br />
171-
{'<span className="border border-bottom-0 bg-secondary-lightest p-8 d-inline-block mr-6">bottom-0</span>'}
172-
<br />
173-
{'<span className="border border-left-0 bg-secondary-lightest p-8 d-inline-block">left-0</span>'}
216+
217+
{/* Border radius examples */}
218+
<div className="mt-8 mb-8">
219+
<Heading size="s" className="mb-3">
220+
Border Radius
221+
</Heading>
222+
<div className="mb-4 d-flex flex-wrap gap-5">
223+
<div>
224+
<div className="text-center mb-2">rounded-2-5</div>
225+
<div className="border rounded-2-5 w-30 h-30 bg-stone-lightest d-flex align-items-center justify-content-center">
226+
1px radius
227+
</div>
228+
</div>
229+
<div>
230+
<div className="text-center mb-2">rounded-05</div>
231+
<div className="border rounded-05 w-30 h-30 bg-jal-lightest d-flex align-items-center justify-content-center">
232+
2px radius
233+
</div>
234+
</div>
235+
<div>
236+
<div className="text-center mb-2">rounded-10</div>
237+
<div className="border rounded-10 w-30 h-30 bg-neem-lightest d-flex align-items-center justify-content-center">
238+
4px radius
239+
</div>
240+
</div>
241+
<div>
242+
<div className="text-center mb-2">rounded-20</div>
243+
<div className="border rounded-20 w-30 h-30 bg-haldi-lightest d-flex align-items-center justify-content-center">
244+
8px radius
245+
</div>
246+
</div>
247+
<div>
248+
<div className="text-center mb-2">rounded-full</div>
249+
<div className="border rounded-full w-30 h-30 bg-jamun-lightest d-flex align-items-center justify-content-center">
250+
Full radius
251+
</div>
252+
</div>
253+
</div>
254+
<div className="mb-2 color-text-subtle font-size-xs">
255+
These utilities help you apply different border radius values to your elements.
256+
</div>
174257
</div>
175-
&nbsp;
176258
</div>
177259
);
178260
};

0 commit comments

Comments
 (0)