Skip to content

Commit 226706f

Browse files
emlimlfemlimlf
committed
added stories for all 3 types of buttons
Signed-off-by: Efren Lim <[email protected]>
1 parent b9945ed commit 226706f

File tree

8 files changed

+172
-32
lines changed

8 files changed

+172
-32
lines changed

‎projects/lfx-component-lib/documentation.json‎

Lines changed: 40 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -41,24 +41,24 @@
4141
"defaultValue": "{\n render: () => ({\n template: `\n <p>This is a paragraph of body text. It uses Open Sans, sans-serif font with a size of 0.875rem (14px) and line height of 1rem (16px).</p>\n `,\n }),\n}"
4242
},
4343
{
44-
"name": "Default",
44+
"name": "DefaultText",
4545
"ctype": "miscellaneous",
4646
"subtype": "variable",
47-
"file": "projects/lfx-component-lib/src/lib/controls/buttons/__docs__/buttons.stories.ts",
47+
"file": "projects/lfx-component-lib/src/lib/themes/text-colors.stories.ts",
4848
"deprecated": false,
4949
"deprecationMessage": "",
5050
"type": "Story",
51-
"defaultValue": "{\n args: {},\n}"
51+
"defaultValue": "{\n render: () => ({\n template: `\n <p class=\"text-default\">This is a paragraph of body text.</p>\n `,\n }),\n}"
5252
},
5353
{
54-
"name": "DefaultText",
54+
"name": "Disabled",
5555
"ctype": "miscellaneous",
5656
"subtype": "variable",
57-
"file": "projects/lfx-component-lib/src/lib/themes/text-colors.stories.ts",
57+
"file": "projects/lfx-component-lib/src/lib/controls/buttons/__docs__/buttons.stories.ts",
5858
"deprecated": false,
5959
"deprecationMessage": "",
6060
"type": "Story",
61-
"defaultValue": "{\n render: () => ({\n template: `\n <p class=\"text-primary\">This is a paragraph of body text.</p>\n `,\n }),\n}"
61+
"defaultValue": "{\n args: {\n disabled: true,\n },\n render: (args) => ({\n template: `\n <lfx-buttons type=\"primary\" [disabled]=\"true\">\n <i class=\"fa-sharp fa-light fa-file-chart-column\"></i>\n <span>Button Text</span>\n <i class=\"fa-sharp fa-light fa-arrow-right\"></i>\n </lfx-buttons>\n `,\n }),\n parameters: {\n design: {\n type: 'figspec',\n url: 'https://www.figma.com/file/nj8rOxBtzQCa7KrvBxF4aF/Coherence-Design-System?node-id=772-5198&t=zfHib1d5XSXabYJp-4',\n },\n },\n play: async ({ canvasElement }) => {\n const element = getElement(canvasElement);\n await expect(element.querySelector('button')?.disabled).toBeTruthy();\n },\n}"
6262
},
6363
{
6464
"name": "Error",
@@ -240,6 +240,16 @@
240240
"type": "Preview",
241241
"defaultValue": "{\n parameters: {\n controls: {\n matchers: {\n color: /(background|color)$/i,\n date: /Date$/i,\n },\n },\n },\n}"
242242
},
243+
{
244+
"name": "Primary",
245+
"ctype": "miscellaneous",
246+
"subtype": "variable",
247+
"file": "projects/lfx-component-lib/src/lib/controls/buttons/__docs__/buttons.stories.ts",
248+
"deprecated": false,
249+
"deprecationMessage": "",
250+
"type": "Story",
251+
"defaultValue": "{\n args: {},\n}"
252+
},
243253
{
244254
"name": "SecondaryText",
245255
"ctype": "miscellaneous",
@@ -429,7 +439,7 @@
429439
"deprecated": false,
430440
"deprecationMessage": "",
431441
"type": "Story",
432-
"defaultValue": "{\n render: () => ({\n template: `\n <p class=\"text-primary\">This is a paragraph of body text.</p>\n `,\n }),\n}"
442+
"defaultValue": "{\n render: () => ({\n template: `\n <p class=\"text-default\">This is a paragraph of body text.</p>\n `,\n }),\n}"
433443
},
434444
{
435445
"name": "LinkText",
@@ -596,14 +606,14 @@
596606
],
597607
"projects/lfx-component-lib/src/lib/controls/buttons/__docs__/buttons.stories.ts": [
598608
{
599-
"name": "Default",
609+
"name": "Disabled",
600610
"ctype": "miscellaneous",
601611
"subtype": "variable",
602612
"file": "projects/lfx-component-lib/src/lib/controls/buttons/__docs__/buttons.stories.ts",
603613
"deprecated": false,
604614
"deprecationMessage": "",
605615
"type": "Story",
606-
"defaultValue": "{\n args: {},\n}"
616+
"defaultValue": "{\n args: {\n disabled: true,\n },\n render: (args) => ({\n template: `\n <lfx-buttons type=\"primary\" [disabled]=\"true\">\n <i class=\"fa-sharp fa-light fa-file-chart-column\"></i>\n <span>Button Text</span>\n <i class=\"fa-sharp fa-light fa-arrow-right\"></i>\n </lfx-buttons>\n `,\n }),\n parameters: {\n design: {\n type: 'figspec',\n url: 'https://www.figma.com/file/nj8rOxBtzQCa7KrvBxF4aF/Coherence-Design-System?node-id=772-5198&t=zfHib1d5XSXabYJp-4',\n },\n },\n play: async ({ canvasElement }) => {\n const element = getElement(canvasElement);\n await expect(element.querySelector('button')?.disabled).toBeTruthy();\n },\n}"
607617
},
608618
{
609619
"name": "meta",
@@ -614,6 +624,16 @@
614624
"deprecationMessage": "",
615625
"type": "Meta<ButtonsComponent>",
616626
"defaultValue": "{\n title: 'LFX Components/Controls/Buttons',\n component: ButtonsComponent,\n tags: ['autodocs'],\n render: (args) => ({\n template: `\n <lfx-buttons type=\"primary\">\n <i class=\"fa-sharp fa-light fa-file-chart-column\"></i>\n <span>Button Text</span>\n <i class=\"fa-sharp fa-light fa-arrow-right\"></i>\n </lfx-buttons>\n `,\n }),\n}"
627+
},
628+
{
629+
"name": "Primary",
630+
"ctype": "miscellaneous",
631+
"subtype": "variable",
632+
"file": "projects/lfx-component-lib/src/lib/controls/buttons/__docs__/buttons.stories.ts",
633+
"deprecated": false,
634+
"deprecationMessage": "",
635+
"type": "Story",
636+
"defaultValue": "{\n args: {},\n}"
617637
}
618638
],
619639
"projects/lfx-component-lib/src/lib/containers/toast/__docs__/toast.stories.ts": [
@@ -946,7 +966,7 @@
946966
"type": "variable",
947967
"linktype": "miscellaneous",
948968
"linksubtype": "variable",
949-
"name": "Default",
969+
"name": "Disabled",
950970
"coveragePercent": 0,
951971
"coverageCount": "0/1",
952972
"status": "low"
@@ -961,6 +981,16 @@
961981
"coverageCount": "0/1",
962982
"status": "low"
963983
},
984+
{
985+
"filePath": "projects/lfx-component-lib/src/lib/controls/buttons/__docs__/buttons.stories.ts",
986+
"type": "variable",
987+
"linktype": "miscellaneous",
988+
"linksubtype": "variable",
989+
"name": "Primary",
990+
"coveragePercent": 0,
991+
"coverageCount": "0/1",
992+
"status": "low"
993+
},
964994
{
965995
"filePath": "projects/lfx-component-lib/src/lib/themes/text-colors.stories.ts",
966996
"type": "variable",

‎projects/lfx-component-lib/src/lib/controls/buttons/__docs__/buttons.stories.ts‎

Lines changed: 67 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22
// SPDX-License-Identifier: MIT
33

44
import { Meta, StoryObj } from '@storybook/angular';
5-
import { within } from '@storybook/test';
6-
import { ButtonsComponent } from '../buttons.component';
5+
import { expect, within } from '@storybook/test';
6+
import { ButtonsComponent, IButtonType } from '../buttons.component';
77

88
type Story = StoryObj<ButtonsComponent>;
99

@@ -19,17 +19,80 @@ const meta: Meta<ButtonsComponent> = {
1919
tags: ['autodocs'],
2020
render: (args) => ({
2121
template: `
22-
<lfx-buttons type="primary">
22+
<lfx-buttons type="${args.type}" [disabled]="${args.disabled}">
2323
<i class="fa-sharp fa-light fa-file-chart-column"></i>
2424
<span>Button Text</span>
2525
<i class="fa-sharp fa-light fa-arrow-right"></i>
2626
</lfx-buttons>
2727
`,
2828
}),
29+
argTypes: {
30+
type: {
31+
control: 'select',
32+
options: ['primary', 'secondary', 'tertiary'] as IButtonType[],
33+
},
34+
disabled: {
35+
control: 'boolean',
36+
},
37+
},
38+
args: {
39+
type: 'primary' as IButtonType,
40+
},
2941
};
3042

3143
export default meta;
3244

33-
export const Default: Story = {
45+
export const Primary: Story = {
3446
args: {},
3547
};
48+
49+
export const Secondary: Story = {
50+
args: {
51+
type: 'secondary' as IButtonType,
52+
},
53+
argTypes: {
54+
disabled: {
55+
control: 'boolean',
56+
},
57+
},
58+
render: (args) => ({
59+
template: `
60+
<lfx-buttons type="secondary" [disabled]="${args.disabled}">
61+
<i class="fa-sharp fa-light fa-file-chart-column"></i>
62+
<span>Button Text</span>
63+
<i class="fa-sharp fa-light fa-arrow-right"></i>
64+
</lfx-buttons>
65+
`,
66+
}),
67+
play: async ({ canvasElement }) => {
68+
const element = getElement(canvasElement);
69+
await expect(
70+
element
71+
.querySelector('button')
72+
?.classList.contains('lfx-button--secondary'),
73+
).toBeTruthy();
74+
},
75+
};
76+
77+
export const Tertiary: Story = {
78+
args: {
79+
type: 'tertiary' as IButtonType,
80+
},
81+
render: (args) => ({
82+
template: `
83+
<lfx-buttons type="tertiary" [disabled]="${args.disabled}">
84+
<i class="fa-sharp fa-light fa-file-chart-column"></i>
85+
<span>Button Text</span>
86+
<i class="fa-sharp fa-light fa-arrow-right"></i>
87+
</lfx-buttons>
88+
`,
89+
}),
90+
play: async ({ canvasElement }) => {
91+
const element = getElement(canvasElement);
92+
await expect(
93+
element
94+
.querySelector('button')
95+
?.classList.contains('lfx-button--tertiary'),
96+
).toBeTruthy();
97+
},
98+
};

‎projects/lfx-component-lib/src/lib/controls/buttons/buttons.component.html‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1-
<button class="lfx-button lfx-button--{{ type().toLowerCase() }}">
1+
<button
2+
class="lfx-button lfx-button--{{ type().toLowerCase() }}"
3+
[disabled]="disabled()"
4+
>
25
<ng-content />
36
</button>

‎projects/lfx-component-lib/src/lib/controls/buttons/buttons.component.scss‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,5 +20,50 @@
2020
&:active {
2121
background-color: $blue-800;
2222
}
23+
24+
&:disabled {
25+
background-color: $grey-300;
26+
cursor: not-allowed;
27+
color: $grey-700;
28+
}
29+
}
30+
31+
&.lfx-button--secondary {
32+
@include secondary-color;
33+
color: $text-primary-color;
34+
35+
&:hover {
36+
color: $blue-700;
37+
}
38+
39+
&:active {
40+
color: $blue-800;
41+
}
42+
43+
&:disabled {
44+
background-color: $grey-300;
45+
cursor: not-allowed;
46+
color: $grey-700;
47+
}
48+
}
49+
50+
&.lfx-button--tertiary {
51+
@include secondary-color;
52+
color: $text-primary-color;
53+
padding: 0.5rem 0.75rem;
54+
55+
&:hover {
56+
color: $blue-700;
57+
}
58+
59+
&:active {
60+
color: $blue-800;
61+
}
62+
63+
&:disabled {
64+
background-color: $grey-300;
65+
cursor: not-allowed;
66+
color: $grey-700;
67+
}
2368
}
2469
}

‎projects/lfx-component-lib/src/lib/controls/buttons/buttons.component.ts‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,6 @@
11
import { Component, input } from '@angular/core';
22

3-
enum ButtonType {
4-
PRIMARY = 'primary',
5-
SECONDARY = 'secondary',
6-
TERTIARY = 'tertiary',
7-
}
3+
export type IButtonType = 'primary' | 'secondary' | 'tertiary';
84

95
@Component({
106
selector: 'lfx-buttons',
@@ -14,5 +10,6 @@ enum ButtonType {
1410
styleUrl: './buttons.component.scss',
1511
})
1612
export class ButtonsComponent {
17-
type = input<ButtonType>(ButtonType.PRIMARY);
13+
type = input<IButtonType>('primary');
14+
disabled = input<boolean>(false);
1815
}

‎projects/lfx-component-lib/src/lib/styles/colors.scss‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,12 @@
88
// default text colors
99
html,
1010
body,
11-
.text-primary {
12-
@include text-primary-color;
11+
.text-default {
12+
@include text-default-color;
1313
}
1414

1515
.text-secondary {
16-
@include text-secondary-color;
16+
@include text-light-color;
1717
}
1818

1919
// background colors
@@ -28,7 +28,7 @@ body,
2828
a,
2929
.link-text {
3030
cursor: pointer;
31-
@include primary-color;
31+
color: $primary-color;
3232
&:hover {
3333
@include link-hover-color;
3434
}

‎projects/lfx-component-lib/src/lib/styles/mixins/color-mixins.scss‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,10 @@
22

33
$primary-color: $blue-500;
44
$secondary-color: $blue-50;
5-
$primary-text-color: $grey-1000;
6-
$secondary-text-color: $grey-500;
5+
$text-primary-color: $blue-500;
6+
$text-secondary-color: $blue-50;
7+
$default-text-color: $grey-1000;
8+
$light-text-color: $grey-500;
79

810
@mixin primary-color {
911
background-color: $primary-color;
@@ -13,12 +15,12 @@ $secondary-text-color: $grey-500;
1315
background-color: $secondary-color;
1416
}
1517

16-
@mixin text-primary-color {
17-
color: $primary-text-color;
18+
@mixin text-default-color {
19+
color: $default-text-color;
1820
}
1921

20-
@mixin text-secondary-color {
21-
color: $secondary-text-color;
22+
@mixin text-light-color {
23+
color: $light-text-color;
2224
}
2325

2426
@mixin text-white {

‎projects/lfx-component-lib/src/lib/themes/text-colors.stories.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ type Story = StoryObj;
1111
export const DefaultText: Story = {
1212
render: () => ({
1313
template: `
14-
<p class="text-primary">This is a paragraph of body text.</p>
14+
<p class="text-default">This is a paragraph of body text.</p>
1515
`,
1616
}),
1717
};

0 commit comments

Comments
 (0)