Skip to content

Commit c47a9c2

Browse files
nuke-ellingtondanielleroux
nuke-ellington
and
danielleroux
authored
feat(core/card): add primary variant (#780)
Co-authored-by: Daniel Leroux <daniel.leroux@siemens.com>
1 parent db57be5 commit c47a9c2

File tree

27 files changed

+118
-26
lines changed

27 files changed

+118
-26
lines changed

‎packages/core/component-doc.json

+15-3
Original file line numberDiff line numberDiff line change
@@ -105,7 +105,7 @@
105105
},
106106
{
107107
"name": "variant",
108-
"type": "\"alarm\" | \"critical\" | \"info\" | \"insight\" | \"neutral\" | \"notification\" | \"success\" | \"warning\"",
108+
"type": "\"alarm\" | \"critical\" | \"info\" | \"insight\" | \"neutral\" | \"notification\" | \"primary\" | \"success\" | \"warning\"",
109109
"mutable": false,
110110
"attr": "variant",
111111
"reflectToAttr": false,
@@ -137,6 +137,10 @@
137137
"value": "notification",
138138
"type": "string"
139139
},
140+
{
141+
"value": "primary",
142+
"type": "string"
143+
},
140144
{
141145
"value": "success",
142146
"type": "string"
@@ -1017,7 +1021,7 @@
10171021
"props": [
10181022
{
10191023
"name": "variant",
1020-
"type": "\"alarm\" | \"critical\" | \"info\" | \"insight\" | \"neutral\" | \"notification\" | \"success\" | \"warning\"",
1024+
"type": "\"alarm\" | \"critical\" | \"info\" | \"insight\" | \"neutral\" | \"notification\" | \"primary\" | \"success\" | \"warning\"",
10211025
"mutable": false,
10221026
"attr": "variant",
10231027
"reflectToAttr": false,
@@ -1049,6 +1053,10 @@
10491053
"value": "notification",
10501054
"type": "string"
10511055
},
1056+
{
1057+
"value": "primary",
1058+
"type": "string"
1059+
},
10521060
{
10531061
"value": "success",
10541062
"type": "string"
@@ -8607,7 +8615,7 @@
86078615
},
86088616
{
86098617
"name": "variant",
8610-
"type": "\"alarm\" | \"critical\" | \"info\" | \"insight\" | \"neutral\" | \"notification\" | \"success\" | \"warning\"",
8618+
"type": "\"alarm\" | \"critical\" | \"info\" | \"insight\" | \"neutral\" | \"notification\" | \"primary\" | \"success\" | \"warning\"",
86118619
"mutable": false,
86128620
"attr": "variant",
86138621
"reflectToAttr": false,
@@ -8639,6 +8647,10 @@
86398647
"value": "notification",
86408648
"type": "string"
86418649
},
8650+
{
8651+
"value": "primary",
8652+
"type": "string"
8653+
},
86428654
{
86438655
"value": "success",
86448656
"type": "string"

‎packages/core/src/components/action-card/action-card.scss

+20
Original file line numberDiff line numberDiff line change
@@ -88,6 +88,14 @@
8888
ix-card.card-neutral:active {
8989
--ix-card-background: var(--theme-color-neutral--active);
9090
}
91+
92+
ix-card.card-primary:hover {
93+
--ix-card-background: var(--theme-color-primary--hover);
94+
}
95+
96+
ix-card.card-primary:active {
97+
--ix-card-background: var(--theme-color-primary--active);
98+
}
9199
}
92100

93101
:host(:hover) {
@@ -122,6 +130,10 @@
122130
ix-card.card-neutral:hover {
123131
--ix-card-background: var(--theme-color-neutral--hover);
124132
}
133+
134+
ix-card.card-primary:hover {
135+
--ix-card-background: var(--theme-color-primary--hover);
136+
}
125137
}
126138

127139
:host(:active) {
@@ -156,6 +168,10 @@
156168
ix-card.card-neutral:active {
157169
--ix-card-background: var(--theme-color-neutral--active);
158170
}
171+
172+
ix-card.card-primary:active {
173+
--ix-card-background: var(--theme-color-primary--active);
174+
}
159175
}
160176

161177
:host(.selected) {
@@ -194,4 +210,8 @@
194210
ix-card.card-neutral {
195211
--ix-card-background: var(--theme-color-neutral--active);
196212
}
213+
214+
ix-card.card-primary {
215+
--ix-card-background: var(--theme-color-primary--active);
216+
}
197217
}

‎packages/core/src/components/blind/blind.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ import anime from 'animejs';
2121
import { CardVariant } from '../card/card';
2222
import { a11yBoolean } from '../utils/a11y';
2323

24-
export type BlindVariant = CardVariant | 'primary' | 'outline';
24+
export type BlindVariant = CardVariant | 'outline';
2525

2626
let sequentialInstanceId = 0;
2727

‎packages/core/src/components/card/card.scss

+5
Original file line numberDiff line numberDiff line change
@@ -80,6 +80,11 @@
8080
color: var(--theme-color-neutral--contrast);
8181
}
8282

83+
:host(.card-primary) {
84+
--ix-card-background: var(--theme-color-primary);
85+
color: var(--theme-color-neutral--contrast);
86+
}
87+
8388
:host(:not(.card-insight)) {
8489
--ix-card-border-color: transparent;
8590
}

‎packages/core/src/components/card/card.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,8 @@ export type CardVariant =
88
| 'warning'
99
| 'info'
1010
| 'neutral'
11-
| 'success';
11+
| 'success'
12+
| 'primary';
1213

1314
/**
1415
* @since 1.6.0

‎packages/core/src/components/push-card/push-card.scss

+8
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,10 @@
5656
ix-card.card-neutral:hover {
5757
--ix-card-background: var(--theme-color-neutral--hover);
5858
}
59+
60+
ix-card.card-primary:hover {
61+
--ix-card-background: var(--theme-color-primary--hover);
62+
}
5963
}
6064

6165
:host(:active) {
@@ -90,4 +94,8 @@
9094
ix-card.card-neutral:active {
9195
--ix-card-background: var(--theme-color-neutral--active);
9296
}
97+
98+
ix-card.card-primary:active {
99+
--ix-card-background: var(--theme-color-primary--active);
100+
}
93101
}

‎packages/core/src/tests/action-card/action-card.e2e.ts-snapshots/action-card-basic-should-have-selected-state-1-chromium---theme-classic-dark-linux.png

6.48 KB
Loading

‎packages/core/src/tests/action-card/action-card.e2e.ts-snapshots/action-card-basic-should-have-selected-state-1-chromium---theme-classic-light-linux.png

8.11 KB
Loading

‎packages/core/src/tests/action-card/action-card.e2e.ts-snapshots/action-card-basic-should-not-have-visual-regressions-1-chromium---theme-classic-dark-linux.png

6.35 KB
Loading

‎packages/core/src/tests/action-card/action-card.e2e.ts-snapshots/action-card-basic-should-not-have-visual-regressions-1-chromium---theme-classic-light-linux.png

7.84 KB
Loading

‎packages/core/src/tests/action-card/basic/index.html

+14-8
Original file line numberDiff line numberDiff line change
@@ -21,51 +21,57 @@
2121
<body>
2222
<ix-action-card
2323
icon="refresh"
24-
heading="Scan forn new devices"
24+
heading="Scan for new devices"
2525
subheading="Secondary text"
2626
></ix-action-card>
2727
<ix-action-card
2828
icon="refresh"
29-
heading="Scan forn new devices"
29+
heading="Scan for new devices"
3030
subheading="Secondary text"
3131
variant="notification"
3232
></ix-action-card>
3333
<ix-action-card
3434
icon="refresh"
35-
heading="Scan forn new devices"
35+
heading="Scan for new devices"
3636
subheading="Secondary text"
3737
variant="alarm"
3838
></ix-action-card>
3939
<ix-action-card
4040
icon="refresh"
41-
heading="Scan forn new devices"
41+
heading="Scan for new devices"
4242
subheading="Secondary text"
4343
variant="critical"
4444
></ix-action-card>
4545
<ix-action-card
4646
icon="refresh"
47-
heading="Scan forn new devices"
47+
heading="Scan for new devices"
4848
subheading="Secondary text"
4949
variant="warning"
5050
></ix-action-card>
5151
<ix-action-card
5252
icon="refresh"
53-
heading="Scan forn new devices"
53+
heading="Scan for new devices"
5454
subheading="Secondary text"
5555
variant="info"
5656
></ix-action-card>
5757
<ix-action-card
5858
icon="refresh"
59-
heading="Scan forn new devices"
59+
heading="Scan for new devices"
6060
subheading="Secondary text"
6161
variant="neutral"
6262
></ix-action-card>
6363
<ix-action-card
6464
icon="refresh"
65-
heading="Scan forn new devices"
65+
heading="Scan for new devices"
6666
subheading="Secondary text"
6767
variant="success"
6868
></ix-action-card>
69+
<ix-action-card
70+
icon="refresh"
71+
heading="Scan for new devices"
72+
subheading="Secondary text"
73+
variant="primary"
74+
></ix-action-card>
6975
<ix-action-card>
7076
<div class="d-flex flex-column align-items-center" style="color: #ff00ff">
7177
<ix-icon name="refresh"></ix-icon>

‎packages/core/src/tests/action-card/selected/index.html

+15-8
Original file line numberDiff line numberDiff line change
@@ -22,58 +22,65 @@
2222
<ix-action-card
2323
selected
2424
icon="refresh"
25-
heading="Scan forn new devices"
25+
heading="Scan for new devices"
2626
subheading="Secondary text"
2727
></ix-action-card>
2828
<ix-action-card
2929
selected
3030
icon="refresh"
31-
heading="Scan forn new devices"
31+
heading="Scan for new devices"
3232
subheading="Secondary text"
3333
variant="notification"
3434
></ix-action-card>
3535
<ix-action-card
3636
selected
3737
icon="refresh"
38-
heading="Scan forn new devices"
38+
heading="Scan for new devices"
3939
subheading="Secondary text"
4040
variant="alarm"
4141
></ix-action-card>
4242
<ix-action-card
4343
selected
4444
icon="refresh"
45-
heading="Scan forn new devices"
45+
heading="Scan for new devices"
4646
subheading="Secondary text"
4747
variant="critical"
4848
></ix-action-card>
4949
<ix-action-card
5050
selected
5151
icon="refresh"
52-
heading="Scan forn new devices"
52+
heading="Scan for new devices"
5353
subheading="Secondary text"
5454
variant="warning"
5555
></ix-action-card>
5656
<ix-action-card
5757
selected
5858
icon="refresh"
59-
heading="Scan forn new devices"
59+
heading="Scan for new devices"
6060
subheading="Secondary text"
6161
variant="info"
6262
></ix-action-card>
6363
<ix-action-card
6464
selected
6565
icon="refresh"
66-
heading="Scan forn new devices"
66+
heading="Scan for new devices"
6767
subheading="Secondary text"
6868
variant="neutral"
6969
></ix-action-card>
7070
<ix-action-card
7171
selected
7272
icon="refresh"
73-
heading="Scan forn new devices"
73+
heading="Scan for new devices"
7474
subheading="Secondary text"
7575
variant="success"
7676
></ix-action-card>
77+
<ix-action-card
78+
selected
79+
icon="refresh"
80+
heading="Scan for new devices"
81+
subheading="Secondary text"
82+
variant="primary"
83+
></ix-action-card>
7784
<ix-action-card selected>
7885
<div class="d-flex flex-column align-items-center" style="color: #ff00ff">
7986
<ix-icon name="refresh"></ix-icon>

‎packages/core/src/tests/card-list/basic/index.html

+7
Original file line numberDiff line numberDiff line change
@@ -82,6 +82,13 @@
8282
subheading="Subheading"
8383
variant="neutral"
8484
></ix-push-card>
85+
<ix-push-card
86+
icon="bulb"
87+
notification="99"
88+
heading="Heading content"
89+
subheading="Subheading"
90+
variant="primary"
91+
></ix-push-card>
8592
</ix-card-list>
8693
<script src="http://127.0.0.1:8080/scripts/e2e/load-e2e-runtime.js"></script>
8794
</body>

‎packages/core/src/tests/card-list/card-list.e2e.ts

+9-3
Original file line numberDiff line numberDiff line change
@@ -14,20 +14,26 @@ regressionTest.describe('card-list: basic', () => {
1414
regressionTest('should not have visual regressions', async ({ page }) => {
1515
await page.goto('card-list/basic');
1616
await page.waitForTimeout(1000);
17-
expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();
17+
expect(
18+
await page.screenshot({ fullPage: true, animations: 'disabled' })
19+
).toMatchSnapshot();
1820
});
1921

2022
regressionTest('layout scrolling', async ({ page }) => {
2123
await page.goto('card-list/layout-scroll');
2224
await page.waitForTimeout(1000);
23-
expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();
25+
expect(
26+
await page.screenshot({ fullPage: true, animations: 'disabled' })
27+
).toMatchSnapshot();
2428
});
2529

2630
regressionTest('layout scrolling end', async ({ page }) => {
2731
await page.goto('card-list/layout-scroll');
2832

2933
await page.locator('#end').scrollIntoViewIfNeeded();
3034
await page.waitForTimeout(1000);
31-
expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();
35+
expect(
36+
await page.screenshot({ fullPage: true, animations: 'disabled' })
37+
).toMatchSnapshot();
3238
});
3339
});

‎packages/core/src/tests/card-list/card-list.e2e.ts-snapshots/card-list-basic-layout-scrolling-1-chromium---theme-classic-dark-linux.png

-76 Bytes
Loading

‎packages/core/src/tests/card-list/card-list.e2e.ts-snapshots/card-list-basic-layout-scrolling-1-chromium---theme-classic-light-linux.png

-76 Bytes
Loading

‎packages/core/src/tests/card-list/card-list.e2e.ts-snapshots/card-list-basic-layout-scrolling-end-1-chromium---theme-classic-dark-linux.png

119 Bytes
Loading

‎packages/core/src/tests/card-list/card-list.e2e.ts-snapshots/card-list-basic-layout-scrolling-end-1-chromium---theme-classic-light-linux.png

74 Bytes
Loading

‎packages/core/src/tests/card-list/card-list.e2e.ts-snapshots/card-list-basic-should-not-have-visual-regressions-1-chromium---theme-classic-dark-linux.png

8.19 KB
Loading

‎packages/core/src/tests/card-list/card-list.e2e.ts-snapshots/card-list-basic-should-not-have-visual-regressions-1-chromium---theme-classic-light-linux.png

9.88 KB
Loading

‎packages/core/src/tests/card-list/layout-scroll/index.html

+7
Original file line numberDiff line numberDiff line change
@@ -111,6 +111,13 @@
111111
subheading="Subheading"
112112
variant="success"
113113
></ix-push-card>
114+
<ix-push-card
115+
icon="bulb"
116+
notification="99"
117+
heading="Heading content"
118+
subheading="Subheading"
119+
variant="primary"
120+
></ix-push-card>
114121
</ix-card-list>
115122
<script src="http://127.0.0.1:8080/scripts/e2e/load-e2e-runtime.js"></script>
116123
</body>

‎packages/core/src/tests/push-card/basic/index.html

+9
Original file line numberDiff line numberDiff line change
@@ -104,6 +104,15 @@
104104
>
105105
<ix-topography format="h2">Some Content</ix-topography>
106106
</ix-push-card>
107+
<ix-push-card
108+
icon="bulb"
109+
notification="99"
110+
heading="Heading content"
111+
subheading="Subheading"
112+
variant="primary"
113+
>
114+
<ix-topography format="h2">Some Content</ix-topography>
115+
</ix-push-card>
107116
</div>
108117
<script src="http://127.0.0.1:8080/scripts/e2e/load-e2e-runtime.js"></script>
109118
</body>

‎packages/core/src/tests/push-card/push-card.e2e.ts

+6-2
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,9 @@ import { regressionTest } from '@utils/test';
1313
regressionTest.describe('push-card: basic', () => {
1414
regressionTest('should not have visual regressions', async ({ page }) => {
1515
await page.goto('push-card/basic');
16-
expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();
16+
expect(
17+
await page.screenshot({ fullPage: true, animations: 'disabled' })
18+
).toMatchSnapshot();
1719
});
1820

1921
regressionTest('should click accordion', async ({ page }) => {
@@ -27,6 +29,8 @@ regressionTest.describe('push-card: basic', () => {
2729
// Animation time
2830
await page.waitForTimeout(500);
2931

30-
expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();
32+
expect(
33+
await page.screenshot({ fullPage: true, animations: 'disabled' })
34+
).toMatchSnapshot();
3135
});
3236
});

‎packages/core/src/tests/push-card/push-card.e2e.ts-snapshots/push-card-basic-should-click-accordion-1-chromium---theme-classic-dark-linux.png

13.4 KB
Loading

‎packages/core/src/tests/push-card/push-card.e2e.ts-snapshots/push-card-basic-should-click-accordion-1-chromium---theme-classic-light-linux.png

13.8 KB
Loading

‎packages/core/src/tests/push-card/push-card.e2e.ts-snapshots/push-card-basic-should-not-have-visual-regressions-1-chromium---theme-classic-dark-linux.png

8.15 KB
Loading

‎packages/core/src/tests/push-card/push-card.e2e.ts-snapshots/push-card-basic-should-not-have-visual-regressions-1-chromium---theme-classic-light-linux.png

9.84 KB
Loading

0 commit comments

Comments
 (0)