Skip to content

Commit 7b00d97

Browse files
author
AlexD
authored
Merge pull request #11 from sir-alex/chromatic/test1
Chromatic test 1
2 parents 4f0e021 + 23b6a1b commit 7b00d97

File tree

4 files changed

+102
-31
lines changed

4 files changed

+102
-31
lines changed

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
"test": "ng test",
1515
"storybook": "ng run lfx-component-lib:storybook",
1616
"build-storybook": "ng run lfx-component-lib:build-storybook",
17-
"chromatic": "npx chromatic --project-token=chpt_ed305b726444f74"
17+
"chromatic": "npx chromatic --project-token=chpt_92f26893ce6e479"
1818
},
1919
"dependencies": {
2020
"@angular/animations": "^18.0.0",

‎projects/lfx-component-lib/.storybook/preview.ts

-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ setCompodocJson(docJson);
66

77
const preview: Preview = {
88
parameters: {
9-
actions: { argTypesRegex: '^on[A-Z].*' },
109
controls: {
1110
matchers: {
1211
color: /(background|color)$/i,

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

+100-28
Original file line numberDiff line numberDiff line change
@@ -18,27 +18,27 @@
1818
"deprecated": false,
1919
"deprecationMessage": "",
2020
"type": "Story",
21-
"defaultValue": "{\n args: {\n type: 'error' as IType,\n },\n parameters: {\n design: {\n type: \"figspec\",\n url: \"https://www.figma.com/design/nj8rOxBtzQCa7KrvBxF4aF/Coherence-Design-System?node-id=772-5210&t=zfHib1d5XSXabYJp-4\",\n },\n },\n}"
21+
"defaultValue": "{\n args: {\n type: 'error' as IType,\n },\n parameters: {\n design: {\n type: \"figspec\",\n url: \"https://www.figma.com/design/nj8rOxBtzQCa7KrvBxF4aF/Coherence-Design-System?node-id=772-5210&t=zfHib1d5XSXabYJp-4\",\n },\n },\n play: async ( {canvasElement} ) => {\n const element = getElement(canvasElement);\n await expect(element.classList).toContain('error');\n }\n}"
2222
},
2323
{
2424
"name": "meta",
2525
"ctype": "miscellaneous",
2626
"subtype": "variable",
27-
"file": "projects/lfx-component-lib/src/lib/containers/toast/__docs__/toast.stories.ts",
27+
"file": "projects/lfx-component-lib/src/lib/containers/sections/__docs__/sections.stories.ts",
2828
"deprecated": false,
2929
"deprecationMessage": "",
30-
"type": "Meta<ToastComponent>",
31-
"defaultValue": "{\n title: 'LFX Components/Containers/Toast',\n component: ToastComponent,\n tags: ['autodocs'],\n render: (args) => ({\n template: `\n <lfx-toast type=\"${args.type}\">\n <h1>Title</h1>\n <p>Body paragraph</p>\n </lfx-toast>\n `,\n }),\n argTypes: {\n type: {\n control: 'select',\n options: ['notice', 'warning', 'success', 'error'] as IType[],\n },\n },\n args: {\n type: 'notice' as IType,\n },\n}"
30+
"type": "Meta<SectionsComponent>",
31+
"defaultValue": "{\n title: 'LFX Components/Containers/Sections',\n component: SectionsComponent,\n tags: ['autodocs'],\n argTypes: {\n backgroundColor: {\n control: 'color',\n },\n },\n parameters: {\n backgrounds: { default: 'dark' },\n },\n}"
3232
},
3333
{
3434
"name": "meta",
3535
"ctype": "miscellaneous",
3636
"subtype": "variable",
37-
"file": "projects/lfx-component-lib/src/lib/containers/sections/__docs__/sections.stories.ts",
37+
"file": "projects/lfx-component-lib/src/lib/containers/toast/__docs__/toast.stories.ts",
3838
"deprecated": false,
3939
"deprecationMessage": "",
40-
"type": "Meta<SectionsComponent>",
41-
"defaultValue": "{\n title: 'LFX Components/Containers/Sections',\n component: SectionsComponent,\n tags: ['autodocs'],\n argTypes: {\n backgroundColor: {\n control: 'color',\n },\n },\n parameters: {\n backgrounds: { default: 'dark' },\n },\n}"
40+
"type": "Meta<ToastComponent>",
41+
"defaultValue": "{\n title: 'LFX Components/Containers/Toast',\n component: ToastComponent,\n tags: ['autodocs'],\n render: (args) => ({\n template: `\n <lfx-toast type=\"${args.type}\">\n <h1>Title</h1>\n <p>Body paragraph</p>\n </lfx-toast>\n `,\n }),\n argTypes: {\n type: {\n control: 'select',\n options: ['notice', 'warning', 'success', 'error'] as IType[],\n },\n },\n args: {\n type: 'notice' as IType,\n },\n}"
4242
},
4343
{
4444
"name": "Notice",
@@ -48,7 +48,7 @@
4848
"deprecated": false,
4949
"deprecationMessage": "",
5050
"type": "Story",
51-
"defaultValue": "{\n args: {\n type: 'notice' as IType,\n },\n parameters: {\n design: {\n type: \"figspec\",\n url: \"https://www.figma.com/design/nj8rOxBtzQCa7KrvBxF4aF/Coherence-Design-System?node-id=772-5198&t=zfHib1d5XSXabYJp-4\",\n },\n },\n play: async ( {canvasElement} ) => {\n const canvas = within(canvasElement);\n const toastElement = canvas.getByTestId('lfx-toast-container');\n await expect(toastElement.classList).toContain('notice');\n // get current class of the toast in canvas var and check if it is the correct one in expect()\n }\n}"
51+
"defaultValue": "{\n args: {\n type: 'notice' as IType,\n },\n parameters: {\n design: {\n type: \"figspec\",\n url: \"https://www.figma.com/design/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.classList).toContain('notice');\n }\n}"
5252
},
5353
{
5454
"name": "preview",
@@ -58,7 +58,7 @@
5858
"deprecated": false,
5959
"deprecationMessage": "",
6060
"type": "Preview",
61-
"defaultValue": "{\n parameters: {\n actions: { argTypesRegex: '^on[A-Z].*' },\n controls: {\n matchers: {\n color: /(background|color)$/i,\n date: /Date$/i,\n },\n },\n },\n}"
61+
"defaultValue": "{\n parameters: {\n controls: {\n matchers: {\n color: /(background|color)$/i,\n date: /Date$/i,\n },\n },\n },\n}"
6262
},
6363
{
6464
"name": "Section",
@@ -78,7 +78,7 @@
7878
"deprecated": false,
7979
"deprecationMessage": "",
8080
"type": "Story",
81-
"defaultValue": "{\n args: {\n type: 'success' as IType,\n },\n parameters: {\n design: {\n type: \"figspec\",\n url: \"https://www.figma.com/design/nj8rOxBtzQCa7KrvBxF4aF/Coherence-Design-System?node-id=772-5207&t=zfHib1d5XSXabYJp-4\",\n },\n },\n}"
81+
"defaultValue": "{\n args: {\n type: 'success' as IType,\n },\n parameters: {\n design: {\n type: \"figspec\",\n url: \"https://www.figma.com/design/nj8rOxBtzQCa7KrvBxF4aF/Coherence-Design-System?node-id=772-5207&t=zfHib1d5XSXabYJp-4\",\n },\n },\n play: async ( {canvasElement} ) => {\n const element = getElement(canvasElement);\n await expect(element.classList).toContain('success');\n }\n}"
8282
},
8383
{
8484
"name": "Warning",
@@ -88,17 +88,47 @@
8888
"deprecated": false,
8989
"deprecationMessage": "",
9090
"type": "Story",
91-
"defaultValue": "{\n args: {\n type: 'warning' as IType,\n },\n parameters: {\n design: {\n type: \"figspec\",\n url: \"https://www.figma.com/design/nj8rOxBtzQCa7KrvBxF4aF/Coherence-Design-System?node-id=772-5205&t=zfHib1d5XSXabYJp-4\",\n },\n },\n}"
91+
"defaultValue": "{\n args: {\n type: 'warning' as IType,\n },\n parameters: {\n design: {\n type: \"figspec\",\n url: \"https://www.figma.com/design/nj8rOxBtzQCa7KrvBxF4aF/Coherence-Design-System?node-id=772-5205&t=zfHib1d5XSXabYJp-4\",\n },\n },\n play: async ( {canvasElement} ) => {\n const element = getElement(canvasElement);\n await expect(element.classList).toContain('warning');\n }\n}"
92+
}
93+
],
94+
"functions": [
95+
{
96+
"name": "getElement",
97+
"file": "projects/lfx-component-lib/src/lib/containers/toast/__docs__/toast.stories.ts",
98+
"ctype": "miscellaneous",
99+
"subtype": "function",
100+
"deprecated": false,
101+
"deprecationMessage": "",
102+
"description": "",
103+
"args": [
104+
{
105+
"name": "canvasElement",
106+
"type": "HTMLElement",
107+
"deprecated": false,
108+
"deprecationMessage": ""
109+
}
110+
],
111+
"returnType": "HTMLElement",
112+
"jsdoctags": [
113+
{
114+
"name": "canvasElement",
115+
"type": "HTMLElement",
116+
"deprecated": false,
117+
"deprecationMessage": "",
118+
"tagName": {
119+
"text": "param"
120+
}
121+
}
122+
]
92123
}
93124
],
94-
"functions": [],
95125
"typealiases": [
96126
{
97127
"name": "Story",
98128
"ctype": "miscellaneous",
99129
"subtype": "typealias",
100-
"rawtype": "StoryObj<ToastComponent>",
101-
"file": "projects/lfx-component-lib/src/lib/containers/toast/__docs__/toast.stories.ts",
130+
"rawtype": "StoryObj<SectionsComponent>",
131+
"file": "projects/lfx-component-lib/src/lib/containers/sections/__docs__/sections.stories.ts",
102132
"deprecated": false,
103133
"deprecationMessage": "",
104134
"description": "",
@@ -108,8 +138,8 @@
108138
"name": "Story",
109139
"ctype": "miscellaneous",
110140
"subtype": "typealias",
111-
"rawtype": "StoryObj<SectionsComponent>",
112-
"file": "projects/lfx-component-lib/src/lib/containers/sections/__docs__/sections.stories.ts",
141+
"rawtype": "StoryObj<ToastComponent>",
142+
"file": "projects/lfx-component-lib/src/lib/containers/toast/__docs__/toast.stories.ts",
113143
"deprecated": false,
114144
"deprecationMessage": "",
115145
"description": "",
@@ -127,7 +157,7 @@
127157
"deprecated": false,
128158
"deprecationMessage": "",
129159
"type": "Story",
130-
"defaultValue": "{\n args: {\n type: 'error' as IType,\n },\n parameters: {\n design: {\n type: \"figspec\",\n url: \"https://www.figma.com/design/nj8rOxBtzQCa7KrvBxF4aF/Coherence-Design-System?node-id=772-5210&t=zfHib1d5XSXabYJp-4\",\n },\n },\n}"
160+
"defaultValue": "{\n args: {\n type: 'error' as IType,\n },\n parameters: {\n design: {\n type: \"figspec\",\n url: \"https://www.figma.com/design/nj8rOxBtzQCa7KrvBxF4aF/Coherence-Design-System?node-id=772-5210&t=zfHib1d5XSXabYJp-4\",\n },\n },\n play: async ( {canvasElement} ) => {\n const element = getElement(canvasElement);\n await expect(element.classList).toContain('error');\n }\n}"
131161
},
132162
{
133163
"name": "meta",
@@ -147,7 +177,7 @@
147177
"deprecated": false,
148178
"deprecationMessage": "",
149179
"type": "Story",
150-
"defaultValue": "{\n args: {\n type: 'notice' as IType,\n },\n parameters: {\n design: {\n type: \"figspec\",\n url: \"https://www.figma.com/design/nj8rOxBtzQCa7KrvBxF4aF/Coherence-Design-System?node-id=772-5198&t=zfHib1d5XSXabYJp-4\",\n },\n },\n play: async ( {canvasElement} ) => {\n const canvas = within(canvasElement);\n const toastElement = canvas.getByTestId('lfx-toast-container');\n await expect(toastElement.classList).toContain('notice');\n // get current class of the toast in canvas var and check if it is the correct one in expect()\n }\n}"
180+
"defaultValue": "{\n args: {\n type: 'notice' as IType,\n },\n parameters: {\n design: {\n type: \"figspec\",\n url: \"https://www.figma.com/design/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.classList).toContain('notice');\n }\n}"
151181
},
152182
{
153183
"name": "Success",
@@ -157,7 +187,7 @@
157187
"deprecated": false,
158188
"deprecationMessage": "",
159189
"type": "Story",
160-
"defaultValue": "{\n args: {\n type: 'success' as IType,\n },\n parameters: {\n design: {\n type: \"figspec\",\n url: \"https://www.figma.com/design/nj8rOxBtzQCa7KrvBxF4aF/Coherence-Design-System?node-id=772-5207&t=zfHib1d5XSXabYJp-4\",\n },\n },\n}"
190+
"defaultValue": "{\n args: {\n type: 'success' as IType,\n },\n parameters: {\n design: {\n type: \"figspec\",\n url: \"https://www.figma.com/design/nj8rOxBtzQCa7KrvBxF4aF/Coherence-Design-System?node-id=772-5207&t=zfHib1d5XSXabYJp-4\",\n },\n },\n play: async ( {canvasElement} ) => {\n const element = getElement(canvasElement);\n await expect(element.classList).toContain('success');\n }\n}"
161191
},
162192
{
163193
"name": "Warning",
@@ -167,7 +197,7 @@
167197
"deprecated": false,
168198
"deprecationMessage": "",
169199
"type": "Story",
170-
"defaultValue": "{\n args: {\n type: 'warning' as IType,\n },\n parameters: {\n design: {\n type: \"figspec\",\n url: \"https://www.figma.com/design/nj8rOxBtzQCa7KrvBxF4aF/Coherence-Design-System?node-id=772-5205&t=zfHib1d5XSXabYJp-4\",\n },\n },\n}"
200+
"defaultValue": "{\n args: {\n type: 'warning' as IType,\n },\n parameters: {\n design: {\n type: \"figspec\",\n url: \"https://www.figma.com/design/nj8rOxBtzQCa7KrvBxF4aF/Coherence-Design-System?node-id=772-5205&t=zfHib1d5XSXabYJp-4\",\n },\n },\n play: async ( {canvasElement} ) => {\n const element = getElement(canvasElement);\n await expect(element.classList).toContain('warning');\n }\n}"
171201
}
172202
],
173203
"projects/lfx-component-lib/src/lib/containers/sections/__docs__/sections.stories.ts": [
@@ -201,33 +231,65 @@
201231
"deprecated": false,
202232
"deprecationMessage": "",
203233
"type": "Preview",
204-
"defaultValue": "{\n parameters: {\n actions: { argTypesRegex: '^on[A-Z].*' },\n controls: {\n matchers: {\n color: /(background|color)$/i,\n date: /Date$/i,\n },\n },\n },\n}"
234+
"defaultValue": "{\n parameters: {\n controls: {\n matchers: {\n color: /(background|color)$/i,\n date: /Date$/i,\n },\n },\n },\n}"
235+
}
236+
]
237+
},
238+
"groupedFunctions": {
239+
"projects/lfx-component-lib/src/lib/containers/toast/__docs__/toast.stories.ts": [
240+
{
241+
"name": "getElement",
242+
"file": "projects/lfx-component-lib/src/lib/containers/toast/__docs__/toast.stories.ts",
243+
"ctype": "miscellaneous",
244+
"subtype": "function",
245+
"deprecated": false,
246+
"deprecationMessage": "",
247+
"description": "",
248+
"args": [
249+
{
250+
"name": "canvasElement",
251+
"type": "HTMLElement",
252+
"deprecated": false,
253+
"deprecationMessage": ""
254+
}
255+
],
256+
"returnType": "HTMLElement",
257+
"jsdoctags": [
258+
{
259+
"name": "canvasElement",
260+
"type": "HTMLElement",
261+
"deprecated": false,
262+
"deprecationMessage": "",
263+
"tagName": {
264+
"text": "param"
265+
}
266+
}
267+
]
205268
}
206269
]
207270
},
208-
"groupedFunctions": {},
209271
"groupedEnumerations": {},
210272
"groupedTypeAliases": {
211-
"projects/lfx-component-lib/src/lib/containers/toast/__docs__/toast.stories.ts": [
273+
"projects/lfx-component-lib/src/lib/containers/sections/__docs__/sections.stories.ts": [
212274
{
213275
"name": "Story",
214276
"ctype": "miscellaneous",
215277
"subtype": "typealias",
216-
"rawtype": "StoryObj<ToastComponent>",
217-
"file": "projects/lfx-component-lib/src/lib/containers/toast/__docs__/toast.stories.ts",
278+
"rawtype": "StoryObj<SectionsComponent>",
279+
"file": "projects/lfx-component-lib/src/lib/containers/sections/__docs__/sections.stories.ts",
218280
"deprecated": false,
219281
"deprecationMessage": "",
220282
"description": "",
221283
"kind": 183
222284
}
223285
],
224-
"projects/lfx-component-lib/src/lib/containers/sections/__docs__/sections.stories.ts": [
286+
"projects/lfx-component-lib/src/lib/containers/toast/__docs__/toast.stories.ts": [
225287
{
226288
"name": "Story",
227289
"ctype": "miscellaneous",
228290
"subtype": "typealias",
229-
"rawtype": "StoryObj<SectionsComponent>",
230-
"file": "projects/lfx-component-lib/src/lib/containers/sections/__docs__/sections.stories.ts",
291+
"rawtype": "StoryObj<ToastComponent>",
292+
"file": "projects/lfx-component-lib/src/lib/containers/toast/__docs__/toast.stories.ts",
231293
"deprecated": false,
232294
"deprecationMessage": "",
233295
"description": "",
@@ -271,6 +333,16 @@
271333
"coverageCount": "0/1",
272334
"status": "low"
273335
},
336+
{
337+
"filePath": "projects/lfx-component-lib/src/lib/containers/toast/__docs__/toast.stories.ts",
338+
"type": "function",
339+
"linktype": "miscellaneous",
340+
"linksubtype": "function",
341+
"name": "getElement",
342+
"coveragePercent": 0,
343+
"coverageCount": "0/1",
344+
"status": "low"
345+
},
274346
{
275347
"filePath": "projects/lfx-component-lib/src/lib/containers/toast/__docs__/toast.stories.ts",
276348
"type": "variable",

‎projects/lfx-component-lib/src/lib/containers/toast/toast.component.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,6 @@
2222
}
2323
&.error {
2424
background-color: $red-50;
25-
border-left-color: $red-200;
25+
border-left-color: $red-500;
2626
}
2727
}

0 commit comments

Comments
 (0)