Skip to content

Commit aec9d82

Browse files
tedqgovtedqgov
authored
Merge pull request qld-gov-au#32 from qld-gov-au/QOLOE-13-Button
QOLOE-13 Merge Buttons branch into develop
2 parents 6b91bee + b09e39f commit aec9d82

File tree

6 files changed

+251
-63
lines changed

6 files changed

+251
-63
lines changed

‎src/components/bs5/button/button.data.json

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
{
2-
"classes": "btn-outline-secondary",
3-
"isbutton": false,
2+
"variantClass": "btn-primary",
43
"islink": true,
4+
"isdisabled": false,
5+
"iconClass": "fa-solid fa-arrow-up-right-from-square",
56
"href": "https://google.com",
67
"label": "Call to action",
78
"target": "_blank"

‎src/components/bs5/button/button.hbs

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,12 @@
11
<!-- // QGDS Component: Button -->
22
<!-- // https://getbootstrap.com/docs/5.3/components/buttons -->
33

4-
{{#if isButton}}
5-
<button class="btn {{classes}}" onclick="{{{onclick}}}">
6-
{{label}}
4+
{{#unless islink}}
5+
<button class="btn {{variantClass}}" onclick="{{{onclick}}}" {{#if isdisabled}}disabled{{/if}}>
6+
{{#if iconClass}}<span class="btn-icon {{iconClass}}"></span>{{/if}}{{label}}
77
</button>
8-
{{/if }}
9-
10-
{{#if islink}}
11-
<a class="btn {{classes}}" href="{{href}}" target="{{target}}">
12-
{{label}}
8+
{{else}}
9+
<a class="btn {{variantClass}} {{#if isdisabled}}disabled" aria-disabled="true{{/if}}" href="{{href}}" target="{{target}}">
10+
{{#if iconClass}}<span class="btn-icon {{iconClass}}"></span>{{/if}}{{label}}
1311
</a>
14-
{{/if }}
12+
{{/unless }}

‎src/components/bs5/button/button.scss

Lines changed: 184 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,82 +1,226 @@
1-
// Buttons: https://getbootstrap.com/docs/5.2/components/buttons/#variables
2-
// #{$prefix} defined in main.scss
3-
4-
// CSS Scoped Variables
5-
// --#{$prefix}{component}-{property}
6-
71
.btn {
82
--#{$prefix}btn-padding-x: 1rem;
93
--#{$prefix}btn-padding-y: 0.75rem;
104
--#{$prefix}btn-font-family: #{$font-family-sans-serif};
115
--#{$prefix}btn-border-width: 3px;
6+
--#{$prefix}btn-active-border-color: transparent;
127
--#{$prefix}btn-border-radius: 0.25rem;
13-
--#{$prefix}btn-box-shadow: 0 4px 8px 3px rgba(0,0,0, 0.1);
14-
--#{$prefix}btn-disabled-opacity: 0.5;
158
--#{$prefix}btn-focus-box-shadow: 0 1px 2px 0 rgba(0,0,0, 0.2);
9+
--#{$prefix}btn-disabled-opacity: 0.5;
1610

1711
&-primary {
18-
--#{$prefix}btn-hover-bg: #003E7D;
19-
--#{$prefix}btn-active-bg: #{$qld-extra-light-grey};
20-
--#{$prefix}btn-disabled-bg: #E8E8E8;
21-
--#{$prefix}btn-disabled-color: #636363;
12+
--#{$prefix}btn-bg: var(--#{$prefix}sapphire-blue);
13+
--#{$prefix}btn-hover-bg: var(--#{$prefix}button-dark-blue);
14+
--#{$prefix}btn-active-bg: var(--#{$prefix}extra-light-grey);
15+
--#{$prefix}btn-active-color: var(--#{$prefix}text-dark-blue);
16+
--#{$prefix}btn-disabled-bg: var(--#{$prefix}light-grey-alt);
17+
--#{$prefix}btn-disabled-color: var(--#{$prefix}dark-grey-muted);
2218
--#{$prefix}btn-disabled-opacity: 1;
2319
--#{$prefix}btn-disabled-border-color: transparent;
2420
}
2521
&-secondary,
2622
&-outline-secondary {
27-
--#{$prefix}btn-border-color: #008635;
28-
--#{$prefix}btn-hover-color: #{$primary};
29-
--#{$prefix}btn-hover-bg: #FFF;
30-
--#{$prefix}btn-hover-border-color: #005B23;
31-
--#{$prefix}btn-active-color: #03213F;
32-
--#{$prefix}btn-active-bg: #{$qld-extra-light-grey};
33-
--#{$prefix}btn-active-border-color: #{$qld-extra-light-grey} ;
23+
--#{$prefix}btn-bg: transparent;
24+
--#{$prefix}btn-color: var(--#{$prefix}sapphire-blue);
25+
--#{$prefix}btn-border-color: var(--#{$prefix}dark-green);
26+
--#{$prefix}btn-hover-color: var(--#{$prefix}sapphire-blue);
27+
--#{$prefix}btn-hover-bg: transparent;
28+
--#{$prefix}btn-hover-border-color: var(--#{$prefix}alt-button-hover);
29+
--#{$prefix}btn-active-color: var(--#{$prefix}text-dark-blue);
30+
--#{$prefix}btn-active-bg: var(--#{$prefix}extra-light-grey);
31+
--#{$prefix}btn-active-border-color: var(--#{$prefix}extra-light-grey);
3432
--#{$prefix}btn-active-shadow: none;
3533
--#{$prefix}btn-disabled-bg: transparent;
36-
--#{$prefix}btn-disabled-color: #636363;
34+
--#{$prefix}btn-disabled-color: var(--#{$prefix}dark-grey-muted);
3735
--#{$prefix}btn-disabled-opacity: 1;
38-
--#{$prefix}btn-disabled-border-color:#E8E8E8;
36+
--#{$prefix}btn-disabled-border-color: var(--#{$prefix}light-grey-alt);
3937
--#{$prefix}gradient: none;
4038
}
41-
4239
&-tertiary {
40+
--#{$prefix}btn-color: #{$primary};
4341
--#{$prefix}btn-border-color: transparent;
4442
--#{$prefix}btn-hover-color: #{$primary};
45-
--#{$prefix}btn-hover-bg: #{$qld-extra-light-grey};
43+
--#{$prefix}btn-hover-bg: var(--#{$prefix}extra-light-grey);
4644
--#{$prefix}btn-hover-border-color: transparent;
47-
--#{$prefix}btn-active-color: #03213F;
45+
--#{$prefix}btn-active-color: var(--#{$prefix}light-text-heading);
4846
--#{$prefix}btn-active-bg: transparent;
49-
--#{$prefix}btn-active-border-color: transparent;
5047
--#{$prefix}btn-active-shadow: none;
5148
--#{$prefix}btn-disabled-bg: transparent;
52-
--#{$prefix}btn-disabled-color: #636363;
49+
--#{$prefix}btn-disabled-color: var(--#{$prefix}dark-grey-muted);
5350
--#{$prefix}btn-disabled-opacity: 1;
5451
--#{$prefix}btn-disabled-border-color: transparent;
5552
--#{$prefix}gradient: none;
5653
}
57-
}
58-
59-
[data-theme="dark"] {
60-
.btn {
61-
//...
54+
.dark &, .dark-alt & {
55+
&-primary {
56+
--#{$prefix}btn-bg: var(--#{$prefix}dark-green-dark);
57+
--#{$prefix}btn-border-color: var(--#{$prefix}dark-green-dark);
58+
--#{$prefix}btn-color: var(--#{$prefix}text-darkest);
59+
--#{$prefix}btn-hover-color: var(--#{$prefix}text-darkest);
60+
--#{$prefix}btn-hover-bg: var(--#{$prefix}light-green-dark);
61+
--#{$prefix}btn-hover-border-color: var(--#{$prefix}light-green-dark);
62+
--#{$prefix}btn-active-color: var(--#{$prefix}light-text-heading);
63+
--#{$prefix}btn-active-bg: var(--#{$prefix}extra-light-grey);
64+
--#{$prefix}btn-disabled-bg: rgba(224, 224, 224, 0.1);
65+
--#{$prefix}btn-disabled-color: var(--#{$prefix}text-light-blue-dark);
66+
--#{$prefix}btn-disabled-border-color: transparent;
67+
}
68+
&-secondary,
69+
&-outline-secondary {
70+
--#{$prefix}btn-border-color: var(--#{$prefix}golden-yellow);
71+
--#{$prefix}btn-color: var(--#{$prefix}white);
72+
--#{$prefix}btn-hover-border-color: var(--#{$prefix}light-yellow);
73+
--#{$prefix}btn-hover-bg: transparent;
74+
--#{$prefix}btn-hover-color: var(--#{$prefix}white);
75+
--#{$prefix}btn-active-bg: var(--#{$prefix}extra-light-grey);
76+
--#{$prefix}btn-active-color: var(--#{$prefix}light-text-heading);
77+
--#{$prefix}btn-disabled-bg: transparent;
78+
--#{$prefix}btn-disabled-color: var(--#{$prefix}text-light-blue-dark);
79+
--#{$prefix}btn-disabled-border-color: rgba(224, 224, 224, 0.1);
80+
}
81+
&-tertiary {
82+
--#{$prefix}btn-color: var(--#{$prefix}white);
83+
--#{$prefix}btn-bg: transparent;
84+
--#{$prefix}btn-hover-color: var(--#{$prefix}white);
85+
--#{$prefix}btn-hover-bg: var(--#{$prefix}dark-background);
86+
--#{$prefix}btn-active-bg: transparent;
87+
--#{$prefix}btn-active-border-color: transparent;
88+
--#{$prefix}btn-active-color: var(--#{$prefix}white);
89+
--#{$prefix}btn-focus-bg: var(--#{$prefix}dark-background);
90+
--#{$prefix}btn-disabled-bg: transparent;
91+
--#{$prefix}btn-disabled-color: var(--#{$prefix}text-light-blue-dark);
92+
--#{$prefix}btn-disabled-border-color: transparent;
93+
}
6294
}
6395
}
64-
65-
66-
.btn {
67-
96+
a.btn, .btn {
6897
white-space: nowrap;
69-
7098
span[class^=icon-],
7199
span[class^=fa-] {
72100
margin-right: 0.5rem;
73101
}
74-
75-
//Hover state for all .btn
76-
&:hover {
102+
.btn-icon {
103+
margin-right: 0.5em;
104+
}
105+
&:hover, &:visited, &:focus {
106+
color: var(--#{$prefix}btn-color);
77107
text-decoration: underline;
78-
text-underline-offset: 3px;
108+
text-underline-offset: 0.3em;
109+
}
110+
&:active {
111+
color: var(--#{$prefix}btn-active-color);
79112
}
113+
&:focus {
114+
outline: var(--#{$prefix}light-blue) solid 3px;
115+
outline-offset: 2px;
116+
}
117+
&:visited {
118+
color: var(--#{$prefix}btn-color);
119+
}
120+
&:disabled,
121+
&.disabled {
122+
color: var(--#{$prefix}btn-disabled-color);
123+
}
124+
&-primary {
125+
box-shadow: 0px 4px 8px 3px rgba(0, 0, 0, 0.1), 0px 1px 3px rgba(0, 0, 0, 0.2);
80126

127+
&:hover {
128+
box-shadow: 7px 6px 13px rgba(0, 0, 0, 0.02), 0px 2px 5px rgba(0, 0, 0, 0.1), 0px 13px 20px rgba(0, 0, 0, 0.1);
129+
130+
}
131+
&:active {
132+
box-shadow: 0px 1px 2px rgba(0,0,0,.2),0px 1px 3px 1px rgba(0,0,0,.1);
133+
text-decoration: none;
134+
}
135+
&:focus {
136+
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3), 0px 2px 6px 2px rgba(0, 0, 0, 0.15);
137+
}
138+
&:disabled,
139+
&.disabled {
140+
box-shadow: none;
141+
}
142+
}
143+
&-secondary,
144+
&-outline-secondary {
145+
.btn-icon {
146+
color: var(--#{$prefix}btn-border-color);
147+
}
148+
&:hover .btn-icon {
149+
color: var(--#{$prefix}btn-hover-border-color);
150+
}
151+
152+
&:focus {
153+
text-decoration: underline;
154+
text-underline-offset: 0.3em;
155+
.btn-icon {
156+
color: var(--#{$prefix}btn-hover-border-color);
157+
}
158+
}
159+
&:active {
160+
text-decoration: none;
161+
.btn-icon {
162+
color: var(--#{$prefix}btn-active-color);
163+
}
164+
}
165+
&:disabled, &.disabled {
166+
.btn-icon {
167+
color: var(--#{$prefix}btn-disabled-color);
168+
169+
}
170+
}
171+
}
172+
&-tertiary {
173+
text-decoration: underline;
174+
text-underline-offset: 0.3em;
175+
.btn-icon {
176+
color: var(--#{$prefix}dark-green);
177+
}
178+
&:hover, &:focus {
179+
.btn-icon {
180+
color: var(--#{$prefix}alt-button-hover);
181+
}
182+
}
183+
&:active {
184+
text-decoration: none;
185+
color: var(--#{$prefix}btn-active-color);
186+
.btn-icon {
187+
color: var(--#{$prefix}btn-active-color);
188+
}
189+
}
190+
&:disabled,
191+
&.disabled {
192+
text-decoration: none;
193+
.btn-icon {
194+
color: var(--#{$prefix}btn-disabled-color);
195+
}
196+
}
197+
}
198+
.dark &, .dark-alt & {
199+
&:focus {
200+
outline: var(--#{$prefix}dark-focus) solid 3px;
201+
outline-offset: 2px;
202+
}
203+
&-secondary,
204+
&-outline-secondary {
205+
color: var(--#{$prefix}btn-disabled-color);
206+
}
207+
208+
&-tertiary {
209+
.btn-icon {
210+
color: var(--#{$prefix}golden-yellow);
211+
}
212+
&:active {
213+
text-decoration: none;
214+
.btn-icon {
215+
color: var(--#{$prefix}btn-active-color);
216+
}
217+
}
218+
&:disabled, &.disabled {
219+
.btn-icon {
220+
color: var(--#{$prefix}btn-disabled-color);
221+
}
222+
}
223+
}
224+
}
81225
}
82226

‎src/components/bs5/button/button.stories.js

Lines changed: 42 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -5,27 +5,35 @@ import defaultdata from './button.data.json';
55
export default {
66
tags: ['autodocs'],
77
title: 'Components/Button',
8-
render: (args) => new Button(args).html,
8+
render: (args) => {
9+
return `
10+
${new Button(args).html}
11+
${new Button({...args, isdisabled: true}).html}
12+
`//expand arguments, specifically turn isdisabled into true
13+
},
914

10-
//https://storybook.js.org/docs/api/arg-types
15+
//https://storybook.js.org/docs/api/arg-types
1116
argTypes: {
12-
classes: {
13-
name: "Classes",
14-
description: `Settable classes for the component`,
17+
isdisabled: {
18+
table: {
19+
disable: true,
20+
},
21+
},
22+
variantClass: {
23+
name: "Variants",
24+
description: `Settable variant for the component`,
1525
control: {
1626
type: "radio",
1727
labels: {
1828
"btn-primary": "Primary",
1929
"btn-secondary": "Secondary",
20-
"btn-outline-primary": "Primary outline",
21-
"btn-outline-secondary": "Secondary outline",
30+
"btn-tertiary": "Tertiary",
2231
},
2332
},
2433
options: [
2534
"btn-primary",
2635
"btn-secondary",
27-
"btn-outline-primary",
28-
"btn-outline-secondary",
36+
"btn-tertiary",
2937
],
3038
},
3139
},
@@ -38,7 +46,6 @@ export default {
3846
},
3947
docs: {
4048
controls: {
41-
//exclude: ["headers", "rows", "footer"],
4249
},
4350
},
4451
},
@@ -50,3 +57,28 @@ export default {
5057
export const Default = {
5158
args: defaultdata,
5259
};
60+
61+
/**
62+
* Dark Breadcrumbs story
63+
* */
64+
export const Dark = {
65+
66+
args: defaultdata,
67+
parameters: {
68+
backgrounds: {
69+
default: 'Dark',
70+
values: [
71+
{ name: 'Dark', value: 'var(--qld-sapphire-blue)' },
72+
],
73+
},
74+
},
75+
decorators: [
76+
(Story) => {
77+
return `
78+
<div class="dark">
79+
${Story()}
80+
</div>
81+
`;
82+
},
83+
],
84+
};

‎src/main.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,8 @@
99
$font-family-sans-serif: "Noto Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
1010

1111
//Icons
12-
// @import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.css");
13-
// @import "~@fortawesome/fontawesome-free/scss/fontawesome.scss";
12+
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.css");
13+
@import "~@fortawesome/fontawesome-free/scss/fontawesome.scss";
1414

1515

1616
//Prefix to namespace design-system classes

0 commit comments

Comments
 (0)