Skip to content

Commit cb6dd55

Browse files
emlimlfemlimlf
authored
Merge pull request #4 from linuxfoundation/task/controls-buttons
Task/controls buttons
2 parents ceed93a + 27dbf10 commit cb6dd55

18 files changed

+1230
-786
lines changed

‎.github/workflows/chromatic.yml

+22-22
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,24 @@
1-
name: "Chromatic"
1+
# name: "Chromatic"
22

3-
on: push
3+
# on: push
44

5-
jobs:
6-
chromatic:
7-
name: Run Chromatic
8-
runs-on: ubuntu-latest
9-
steps:
10-
- name: Checkout code
11-
uses: actions/checkout@v4
12-
with:
13-
fetch-depth: 0
14-
- uses: actions/setup-node@v4
15-
with:
16-
node-version: 20
17-
- name: Install dependencies
18-
# ⚠️ See your package manager's documentation for the correct command to install dependencies in a CI environment.
19-
run: yarn install
20-
- name: Run Chromatic
21-
uses: chromaui/action@latest
22-
with:
23-
# ⚠️ Make sure to configure a `CHROMATIC_PROJECT_TOKEN` repository secret
24-
projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
5+
# jobs:
6+
# chromatic:
7+
# name: Run Chromatic
8+
# runs-on: ubuntu-latest
9+
# steps:
10+
# - name: Checkout code
11+
# uses: actions/checkout@v4
12+
# with:
13+
# fetch-depth: 0
14+
# - uses: actions/setup-node@v4
15+
# with:
16+
# node-version: 20
17+
# - name: Install dependencies
18+
# # ⚠️ See your package manager's documentation for the correct command to install dependencies in a CI environment.
19+
# run: yarn install
20+
# - name: Run Chromatic
21+
# uses: chromaui/action@latest
22+
# with:
23+
# # ⚠️ Make sure to configure a `CHROMATIC_PROJECT_TOKEN` repository secret
24+
# projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}

‎angular.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
"style": "scss"
1414
},
1515
"lfx-ng-schematics:lfx-component": {
16-
"path": "projects/lfx-component-lib/src/lib/containers"
16+
"path": "projects/lfx-component-lib/src/lib"
1717
}
1818
},
1919
"architect": {

‎package-lock.json

+13
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@
2727
"@angular/platform-browser": "^18.0.0",
2828
"@angular/platform-browser-dynamic": "^18.0.0",
2929
"@angular/router": "^18.0.0",
30+
"lfx-ng-schematics": "^0.0.7",
3031
"lodash": "^4.17.21",
3132
"rxjs": "~7.8.0",
3233
"tslib": "^2.3.0",

‎projects/lfx-component-lib/.storybook/preview-head.html

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
<script
2+
src="https://kit.fontawesome.com/d65f54d9ea.js"
3+
crossorigin="anonymous"
4+
></script>

‎projects/lfx-component-lib/README.md

+8-1
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,14 @@ Run `ng generate component component-name --project lfx-component-lib` to genera
1414
1515
## Scaffolding with Storybook using lfx-ng-schematics (see: https://github.com/linuxfoundation/lfx-ng-schematics for details)
1616

17-
Run `ng g lfx-ng-schematics:lfx-c --name <name of component>`
17+
Before running the schematics, make sure you have the lfx-ng-schematics working in your local project. This can be done in 2 ways:
18+
19+
1. Install lfx-ng-schematics in your local project: `npm install @linuxfoundation/lfx-ng-schematics` (Note: this has to be deployed to the npm registry first, if not then go to step 2)
20+
2. Clone the lfx-ng-schematics repo and install the plugins then run `yarn verdaccio` to start the local npm registry. Add the local registry to your npm client: `ng add lfx-ng-schematics --registry=http://localhost:4873` (to verify it's installed run `schematics lfx-ng-schematics: --list-schematics`)
21+
22+
For more information see this video: https://www.loom.com/share/6f296c0558f348c2a8de911006d2a903?sid=ae32b4e8-a02a-4e22-bd7a-c44fb823584c
23+
24+
After installing the schematics, run `ng g lfx-ng-schematics:lfx-c --name <name of component>`
1825

1926
## Build
2027

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

+188-2
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,17 @@
4848
"deprecated": false,
4949
"deprecationMessage": "",
5050
"type": "Story",
51-
"defaultValue": "{\n render: () => ({\n template: `\n <p class=\"text-primary\">This is a paragraph of body text.</p>\n `,\n }),\n}"
51+
"defaultValue": "{\n render: () => ({\n template: `\n <p class=\"text-default\">This is a paragraph of body text.</p>\n `,\n }),\n}"
52+
},
53+
{
54+
"name": "Disabled",
55+
"ctype": "miscellaneous",
56+
"subtype": "variable",
57+
"file": "projects/lfx-component-lib/src/lib/controls/buttons/__docs__/buttons.stories.ts",
58+
"deprecated": false,
59+
"deprecationMessage": "",
60+
"type": "Story",
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}"
5262
},
5363
{
5464
"name": "Error",
@@ -200,6 +210,16 @@
200210
"type": "Meta<ToastComponent>",
201211
"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}"
202212
},
213+
{
214+
"name": "meta",
215+
"ctype": "miscellaneous",
216+
"subtype": "variable",
217+
"file": "projects/lfx-component-lib/src/lib/controls/buttons/__docs__/buttons.stories.ts",
218+
"deprecated": false,
219+
"deprecationMessage": "",
220+
"type": "Meta<ButtonsComponent>",
221+
"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}"
222+
},
203223
{
204224
"name": "Notice",
205225
"ctype": "miscellaneous",
@@ -220,6 +240,16 @@
220240
"type": "Preview",
221241
"defaultValue": "{\n parameters: {\n controls: {\n matchers: {\n color: /(background|color)$/i,\n date: /Date$/i,\n },\n },\n },\n}"
222242
},
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+
},
223253
{
224254
"name": "SecondaryText",
225255
"ctype": "miscellaneous",
@@ -300,6 +330,35 @@
300330
}
301331
}
302332
]
333+
},
334+
{
335+
"name": "getElement",
336+
"file": "projects/lfx-component-lib/src/lib/controls/buttons/__docs__/buttons.stories.ts",
337+
"ctype": "miscellaneous",
338+
"subtype": "function",
339+
"deprecated": false,
340+
"deprecationMessage": "",
341+
"description": "",
342+
"args": [
343+
{
344+
"name": "canvasElement",
345+
"type": "HTMLElement",
346+
"deprecated": false,
347+
"deprecationMessage": ""
348+
}
349+
],
350+
"returnType": "HTMLElement",
351+
"jsdoctags": [
352+
{
353+
"name": "canvasElement",
354+
"type": "HTMLElement",
355+
"deprecated": false,
356+
"deprecationMessage": "",
357+
"tagName": {
358+
"text": "param"
359+
}
360+
}
361+
]
303362
}
304363
],
305364
"typealiases": [
@@ -346,6 +405,17 @@
346405
"deprecationMessage": "",
347406
"description": "",
348407
"kind": 183
408+
},
409+
{
410+
"name": "Story",
411+
"ctype": "miscellaneous",
412+
"subtype": "typealias",
413+
"rawtype": "StoryObj<ButtonsComponent>",
414+
"file": "projects/lfx-component-lib/src/lib/controls/buttons/__docs__/buttons.stories.ts",
415+
"deprecated": false,
416+
"deprecationMessage": "",
417+
"description": "",
418+
"kind": 183
349419
}
350420
],
351421
"enumerations": [],
@@ -369,7 +439,7 @@
369439
"deprecated": false,
370440
"deprecationMessage": "",
371441
"type": "Story",
372-
"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}"
373443
},
374444
{
375445
"name": "LinkText",
@@ -534,6 +604,38 @@
534604
"defaultValue": "{\n render: () => ({\n template: `\n <small>This is small text, also known as body2 in Figma. It uses Open Sans, sans-serif font with a size of 0.875rem (14px).</small>\n `,\n }),\n}"
535605
}
536606
],
607+
"projects/lfx-component-lib/src/lib/controls/buttons/__docs__/buttons.stories.ts": [
608+
{
609+
"name": "Disabled",
610+
"ctype": "miscellaneous",
611+
"subtype": "variable",
612+
"file": "projects/lfx-component-lib/src/lib/controls/buttons/__docs__/buttons.stories.ts",
613+
"deprecated": false,
614+
"deprecationMessage": "",
615+
"type": "Story",
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}"
617+
},
618+
{
619+
"name": "meta",
620+
"ctype": "miscellaneous",
621+
"subtype": "variable",
622+
"file": "projects/lfx-component-lib/src/lib/controls/buttons/__docs__/buttons.stories.ts",
623+
"deprecated": false,
624+
"deprecationMessage": "",
625+
"type": "Meta<ButtonsComponent>",
626+
"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}"
637+
}
638+
],
537639
"projects/lfx-component-lib/src/lib/containers/toast/__docs__/toast.stories.ts": [
538640
{
539641
"name": "Error",
@@ -652,6 +754,37 @@
652754
}
653755
]
654756
}
757+
],
758+
"projects/lfx-component-lib/src/lib/controls/buttons/__docs__/buttons.stories.ts": [
759+
{
760+
"name": "getElement",
761+
"file": "projects/lfx-component-lib/src/lib/controls/buttons/__docs__/buttons.stories.ts",
762+
"ctype": "miscellaneous",
763+
"subtype": "function",
764+
"deprecated": false,
765+
"deprecationMessage": "",
766+
"description": "",
767+
"args": [
768+
{
769+
"name": "canvasElement",
770+
"type": "HTMLElement",
771+
"deprecated": false,
772+
"deprecationMessage": ""
773+
}
774+
],
775+
"returnType": "HTMLElement",
776+
"jsdoctags": [
777+
{
778+
"name": "canvasElement",
779+
"type": "HTMLElement",
780+
"deprecated": false,
781+
"deprecationMessage": "",
782+
"tagName": {
783+
"text": "param"
784+
}
785+
}
786+
]
787+
}
655788
]
656789
},
657790
"groupedEnumerations": {},
@@ -707,6 +840,19 @@
707840
"description": "",
708841
"kind": 183
709842
}
843+
],
844+
"projects/lfx-component-lib/src/lib/controls/buttons/__docs__/buttons.stories.ts": [
845+
{
846+
"name": "Story",
847+
"ctype": "miscellaneous",
848+
"subtype": "typealias",
849+
"rawtype": "StoryObj<ButtonsComponent>",
850+
"file": "projects/lfx-component-lib/src/lib/controls/buttons/__docs__/buttons.stories.ts",
851+
"deprecated": false,
852+
"deprecationMessage": "",
853+
"description": "",
854+
"kind": 183
855+
}
710856
]
711857
}
712858
},
@@ -805,6 +951,46 @@
805951
"coverageCount": "0/1",
806952
"status": "low"
807953
},
954+
{
955+
"filePath": "projects/lfx-component-lib/src/lib/controls/buttons/__docs__/buttons.stories.ts",
956+
"type": "function",
957+
"linktype": "miscellaneous",
958+
"linksubtype": "function",
959+
"name": "getElement",
960+
"coveragePercent": 0,
961+
"coverageCount": "0/1",
962+
"status": "low"
963+
},
964+
{
965+
"filePath": "projects/lfx-component-lib/src/lib/controls/buttons/__docs__/buttons.stories.ts",
966+
"type": "variable",
967+
"linktype": "miscellaneous",
968+
"linksubtype": "variable",
969+
"name": "Disabled",
970+
"coveragePercent": 0,
971+
"coverageCount": "0/1",
972+
"status": "low"
973+
},
974+
{
975+
"filePath": "projects/lfx-component-lib/src/lib/controls/buttons/__docs__/buttons.stories.ts",
976+
"type": "variable",
977+
"linktype": "miscellaneous",
978+
"linksubtype": "variable",
979+
"name": "meta",
980+
"coveragePercent": 0,
981+
"coverageCount": "0/1",
982+
"status": "low"
983+
},
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+
},
808994
{
809995
"filePath": "projects/lfx-component-lib/src/lib/themes/text-colors.stories.ts",
810996
"type": "variable",

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

+6
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,12 @@
3232
},
3333
"./colors": {
3434
"sass": "./styles/colors.scss"
35+
},
36+
"./controls": {
37+
"sass": "./styles/controls.scss"
38+
},
39+
"./all": {
40+
"sass": "./styles/index.scss"
3541
}
3642
}
3743
}

0 commit comments

Comments
 (0)