Skip to content

Commit f03edb9

Browse files
planktonicplanktonic
committed
- Updating docs
- Linting
1 parent 1205334 commit f03edb9

6 files changed

Lines changed: 65 additions & 120 deletions

File tree

‎scss/bitstyles/organisms/joined-ui/_index.scss‎

Lines changed: 19 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -4,61 +4,25 @@
44
@use '../../tools/custom-property';
55

66
/* stylelint-disable scss/dollar-variable-default */
7-
$button-border-top-left-radius-name: custom-property.get(
8-
$items: (
9-
'button',
10-
'border',
11-
'top',
12-
'left',
13-
'radius',
14-
),
15-
$layer: 'atom',
16-
);
17-
$button-border-top-right-radius-name: custom-property.get(
18-
$items: (
19-
'button',
20-
'border',
21-
'top',
22-
'right',
23-
'radius',
24-
),
25-
$layer: 'atom',
26-
);
27-
$button-border-bottom-right-radius-name: custom-property.get(
28-
$items: (
29-
'button',
30-
'border',
31-
'bottom',
32-
'right',
33-
'radius',
34-
),
35-
$layer: 'atom',
36-
);
37-
$button-border-bottom-left-radius-name: custom-property.get(
38-
$items: (
39-
'button',
40-
'border',
41-
'bottom',
42-
'left',
43-
'radius',
44-
),
45-
$layer: 'atom',
46-
);
47-
$button-border-width-name: custom-property.get(
48-
$items: (
49-
'button',
50-
'border',
51-
'width',
52-
),
53-
$layer: 'atom',
54-
);
55-
$button-box-shadow-name: custom-property.get(
56-
$items: (
57-
'button',
58-
'box-shadow',
59-
),
60-
$layer: 'atom',
61-
);
7+
8+
// prettier-ignore
9+
$button-border-top-left-radius-name: custom-property.get($items: ('button', 'border', 'top', 'left', 'radius'), $layer: 'atom');
10+
11+
// prettier-ignore
12+
$button-border-top-right-radius-name: custom-property.get($items: ('button', 'border', 'top', 'right', 'radius'), $layer: 'atom');
13+
14+
// prettier-ignore
15+
$button-border-bottom-right-radius-name: custom-property.get($items: ('button', 'border', 'bottom', 'right', 'radius'), $layer: 'atom');
16+
17+
// prettier-ignore
18+
$button-border-bottom-left-radius-name: custom-property.get($items: ('button', 'border', 'bottom', 'left', 'radius'), $layer: 'atom');
19+
20+
// prettier-ignore
21+
$button-border-width-name: custom-property.get($items: ('button', 'border', 'width'), $layer: 'atom');
22+
23+
// prettier-ignore
24+
$button-box-shadow-name: custom-property.get($items: ('button', 'box-shadow'), $layer: 'atom');
25+
6226
/* stylelint-enable scss/dollar-variable-default */
6327

6428
#{classname.get($classname-items: 'joined-ui', $layer: 'organism')} {

‎scss/bitstyles/organisms/joined-ui/joined-ui.stories.mdx‎

Lines changed: 6 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,19 @@
11
import { Canvas, Meta, Story } from '@storybook/addon-docs';
22

3-
<Meta title="Organisms/UI group" />
3+
<Meta title="Organisms/Joined UI" />
44

5-
# UI group
5+
# Joined UI
66

77
A collection of interactive elements that are closely-related can be visually bound together.
88

9-
Commonly, this layout is used for buttons.
9+
Commonly, this layout is used for buttons. See [Joined buttons](/docs/ui-buttons-joined-overview--page) for more examples:
1010

1111
<Canvas>
12-
<Story name="UI group - buttons">
13-
{`
14-
<ul class="o-joined-ui u-flex u-list-none">
15-
<li>
16-
<button type="button" class="a-button a-button--secondary u-border-radius-0-tr u-border-radius-0-br">First</button>
17-
</li>
18-
<li>
19-
<button type="button" class="a-button a-button--secondary u-border-radius-0">Middle</button>
20-
</li>
21-
<li>
22-
<button type="button" class="a-button a-button--secondary u-border-radius-0-tl u-border-radius-0-bl">Last</button>
23-
</li>
24-
</ul>
25-
`}
26-
</Story>
12+
<Story id="ui-buttons-joined--pagination-outline" />
2713
</Canvas>
2814

29-
The `joined-ui` is also used for grouping inputs & buttons:
15+
The `joined-ui` is also used for grouping closely-related inputs & buttons. See [Filtering](/docs/ui-data-filtering--filter-by-free-text) for more examples:
3016

3117
<Canvas>
32-
<Story name="UI group - input & button">
33-
{`
34-
<ul class="o-joined-ui u-flex u-list-none">
35-
<li class="u-flex">
36-
<label for="search_users" class="u-sr-only">Search users</label>
37-
<input type="search" id="search_users" class="u-border-radius-0-tr u-border-radius-0-br" />
38-
</li>
39-
<li class="u-flex">
40-
<button type="button" class="a-button a-button--secondary u-border-radius-0-tl u-border-radius-0-bl">Search</button>
41-
</li>
42-
</ul>
43-
`}
44-
</Story>
18+
<Story id="ui-data-filtering--filter-by-free-text" />
4519
</Canvas>

‎scss/bitstyles/ui/app-layouts.stories.mdx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -230,10 +230,10 @@ Sidebar, header, and content that uses all available space.
230230
<ul class="o-joined-ui u-flex u-list-none">
231231
<li class="u-flex">
232232
<label for="search_users" class="u-sr-only">Filter users by email</label>
233-
<input type="search" id="search_users" class="u-border-radius-0-tr u-border-radius-0-br" placeholder="Filter by email…" />
233+
<input type="search" id="search_users" placeholder="Filter by email…" />
234234
</li>
235235
<li class="u-flex u-relative">
236-
<button type="button" class="a-button a-button--secondary u-border-radius-0-tl u-border-radius-0-bl">
236+
<button type="button" class="a-button a-button--secondary">
237237
Filter
238238
</button>
239239
</li>
@@ -483,10 +483,10 @@ Sidebar, header, and content that uses all available space.
483483
<ul class="o-joined-ui u-flex u-list-none">
484484
<li class="u-flex">
485485
<label for="search_users" class="u-sr-only">Filter users by email</label>
486-
<input type="search" id="search_users" class="u-border-radius-0-tr u-border-radius-0-br" placeholder="Filter by email…" />
486+
<input type="search" id="search_users" placeholder="Filter by email…" />
487487
</li>
488488
<li class="u-flex u-relative">
489-
<button type="button" class="a-button a-button--secondary u-border-radius-0-tl u-border-radius-0-bl">
489+
<button type="button" class="a-button a-button--secondary">
490490
Filter
491491
</button>
492492
</li>

‎scss/bitstyles/ui/filter.stories.mdx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@ When a user wants to filter a list of objects by fields which have a limited num
7474
<li class="u-relative u-margin-s4-right">
7575
<button
7676
type="button"
77-
class="a-button a-button--secondary"
77+
class="a-button a-button--outline"
7878
title="Filter by category"
7979
aria-controls="dropdown-1"
8080
@click="dropdownOpen = !dropdownOpen"
@@ -128,7 +128,7 @@ When a user wants to filter a list of objects by fields which have a limited num
128128
<li class="u-relative" x-data="{ dropdownOpen: false }">
129129
<button
130130
type="button"
131-
class="a-button a-button--secondary"
131+
class="a-button a-button--outline"
132132
title="Add filter"
133133
aria-controls="dropdown-2" @click="dropdownOpen = !dropdownOpen"
134134
:aria-expanded="dropdownOpen"
@@ -199,12 +199,12 @@ Some fields such as names and emails will need to be filtered by user-entered fr
199199
<ul class="o-joined-ui u-flex u-list-none">
200200
<li class="u-flex">
201201
<label for="search_users" class="u-sr-only">Search users</label>
202-
<input type="search" id="search_users" class="u-border-radius-0-tr u-border-radius-0-br" placeholder="Search users…" />
202+
<input type="search" id="search_users" placeholder="Search users…" />
203203
</li>
204204
<li class="u-flex u-relative" x-data="{ dropdownOpen: false }">
205205
<button
206206
type="button"
207-
class="a-button a-button--secondary u-border-radius-0-tl u-border-radius-0-bl"
207+
class="a-button a-button--outline"
208208
aria-controls="dropdown-1"
209209
@click="dropdownOpen = !dropdownOpen"
210210
:aria-expanded="dropdownOpen"
@@ -269,12 +269,12 @@ When giving the user filters by category and free text, place the free text sear
269269
<ul class="o-joined-ui u-flex u-list-none">
270270
<li class="u-flex">
271271
<label for="search_users" class="u-sr-only">Search users</label>
272-
<input type="search" id="search_users" class="u-border-radius-0-tr u-border-radius-0-br" placeholder="Search users…" />
272+
<input type="search" id="search_users" placeholder="Search users…" />
273273
</li>
274274
<li class="u-flex u-relative" x-data="{ dropdownOpen: false }">
275275
<button
276276
type="button"
277-
class="a-button a-button--secondary u-border-radius-0-tl u-border-radius-0-bl"
277+
class="a-button a-button--outline"
278278
aria-controls="dropdown-1"
279279
@click="dropdownOpen = !dropdownOpen"
280280
:aria-expanded="dropdownOpen"
@@ -316,7 +316,7 @@ When giving the user filters by category and free text, place the free text sear
316316
<li class="u-relative" x-data="{ dropdownOpen: false }">
317317
<button
318318
type="button"
319-
class="a-button a-button--secondary"
319+
class="a-button a-button--outline"
320320
title="Filter by category"
321321
aria-controls="dropdown-2"
322322
@click="dropdownOpen = !dropdownOpen"

‎scss/bitstyles/ui/forms.stories.mdx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -305,8 +305,8 @@ The `role="search"` attribute highlights this functionality for screenreader use
305305
{`
306306
<form role="search" action="" method="POST" class="u-flex o-joined-ui">
307307
<label for="search" class="u-sr-only">Search users</label>
308-
<input type="search" id="search" placeholder="Username or email…" class="u-flex-grow-1 u-border-radius-0-tr u-border-radius-0-br" />
309-
<button type="submit" class="a-button a-button--secondary o-joined-ui__last u-border-radius-0-tl u-border-radius-0-bl">Search</button>
308+
<input type="search" id="search" placeholder="Username or email…" class="u-flex-grow-1" />
309+
<button type="submit" class="a-button a-button--outline">Search</button>
310310
</form>
311311
`}
312312
</Story>
@@ -317,8 +317,8 @@ The `role="search"` attribute highlights this functionality for screenreader use
317317
{`
318318
<form role="search" action="" method="POST" class="u-flex o-joined-ui">
319319
<label for="search" class="u-sr-only">Search users</label>
320-
<input type="search" id="search" placeholder="Username or email…" class="u-flex-grow-1 u-border-radius-0-tr u-border-radius-0-br" />
321-
<button type="submit" class="a-button a-button--secondary o-joined-ui__last u-border-radius-0-tl u-border-radius-0-bl" title="Search users">
320+
<input type="search" id="search" placeholder="Username or email…" class="u-flex-grow-1" />
321+
<button type="submit" class="a-button a-button--outline" title="Search users">
322322
<svg width="18" height="18" class="a-icon" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
323323
<use xlink:href="${icons}#icon-search"></use>
324324
</svg>
@@ -349,7 +349,7 @@ The heights of selects, inputs, and buttons should all match, allowing them to b
349349
</select>
350350
</li>
351351
<li>
352-
<button type="submit" class="a-button a-button--secondary">Search</button>
352+
<button type="submit" class="a-button a-button--outline">Search</button>
353353
</li>
354354
</ul>
355355
</form>

‎scss/bitstyles/ui/joined-buttons.stories.js‎

Lines changed: 24 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,10 @@ export const PlusMinusIconsOutline = () =>
2525
}),
2626
],
2727
});
28+
PlusMinusIconsOutline.parameters = {
29+
zeplinLink:
30+
'https://app.zeplin.io/styleguide/63079b90d0bf4a646c46c227/components?coid=633d89776b2afa2c51aa8842',
31+
};
2832

2933
export const PlusMinusIconsOutlinePressed = () =>
3034
JoinedButtons({
@@ -42,6 +46,10 @@ export const PlusMinusIconsOutlinePressed = () =>
4246
}),
4347
],
4448
});
49+
PlusMinusIconsOutlinePressed.parameters = {
50+
zeplinLink:
51+
'https://app.zeplin.io/styleguide/63079b90d0bf4a646c46c227/components?coid=6362711154efc5b0ee1a934e',
52+
};
4553

4654
export const NextPreviousIconsOutline = () =>
4755
JoinedButtons({
@@ -144,6 +152,10 @@ export const PaginationOutline = () =>
144152
}),
145153
],
146154
});
155+
PaginationOutline.parameters = {
156+
zeplinLink:
157+
'https://app.zeplin.io/styleguide/63079b90d0bf4a646c46c227/components?coid=63623b8da0d8f5b71d20c6f7',
158+
};
147159

148160
export const PaginationOutlinePressed = () =>
149161
JoinedButtons({
@@ -181,6 +193,10 @@ export const PaginationOutlinePressed = () =>
181193
}),
182194
],
183195
});
196+
PaginationOutlinePressed.parameters = {
197+
zeplinLink:
198+
'https://app.zeplin.io/styleguide/63079b90d0bf4a646c46c227/components?coid=636270724ff7c8b244910027',
199+
};
184200

185201
export const PaginationSecondary = () =>
186202
JoinedButtons({
@@ -290,6 +306,10 @@ export const PaginationTransparent = () =>
290306
}),
291307
],
292308
});
309+
PaginationTransparent.parameters = {
310+
zeplinLink:
311+
'https://app.zeplin.io/styleguide/63079b90d0bf4a646c46c227/components?coid=633d9edd6beac62dc519bd9c',
312+
};
293313

294314
export const PaginationTransparentPressed = () =>
295315
JoinedButtons({
@@ -327,20 +347,7 @@ export const PaginationTransparentPressed = () =>
327347
}),
328348
],
329349
});
330-
331-
// PlusMinusIconsSecondary.parameters = {
332-
// zeplinLink: [
333-
// {
334-
// name: 'base',
335-
// link: 'https://app.zeplin.io/styleguide/63079b90d0bf4a646c46c227/components?coid=6363da7dc51a6528e9b45875',
336-
// },
337-
// {
338-
// name: 'hover',
339-
// link: 'https://app.zeplin.io/styleguide/63079b90d0bf4a646c46c227/components?coid=6363da7e29f7bb28f410993f',
340-
// },
341-
// {
342-
// name: 'active',
343-
// link: 'https://app.zeplin.io/styleguide/63079b90d0bf4a646c46c227/components?coid=6363da791e853730fcd23c66',
344-
// },
345-
// ],
346-
// };
350+
PaginationTransparentPressed.parameters = {
351+
zeplinLink:
352+
'https://app.zeplin.io/styleguide/63079b90d0bf4a646c46c227/components?coid=633d9ede3fb3ec2b14f61aa4',
353+
};

0 commit comments

Comments
 (0)