Task/controls buttons

.github/workflows/chromatic.yml

@@ -1,24 +1,24 @@
-name: "Chromatic"
+# name: "Chromatic"
 
-on: push
+# on: push
 
-jobs:
-  chromatic:
-    name: Run Chromatic
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v4
-        with:
-          fetch-depth: 0
-      - uses: actions/setup-node@v4
-        with:
-          node-version: 20
-      - name: Install dependencies
-        # ⚠️ See your package manager's documentation for the correct command to install dependencies in a CI environment.
-        run: yarn install
-      - name: Run Chromatic
-        uses: chromaui/action@latest
-        with:
-          # ⚠️ Make sure to configure a `CHROMATIC_PROJECT_TOKEN` repository secret
-          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+# jobs:
+#   chromatic:
+#     name: Run Chromatic
+#     runs-on: ubuntu-latest
+#     steps:
+#       - name: Checkout code
+#         uses: actions/checkout@v4
+#         with:
+#           fetch-depth: 0
+#       - uses: actions/setup-node@v4
+#         with:
+#           node-version: 20
+#       - name: Install dependencies
+#         # ⚠️ See your package manager's documentation for the correct command to install dependencies in a CI environment.
+#         run: yarn install
+#       - name: Run Chromatic
+#         uses: chromaui/action@latest
+#         with:
+#           # ⚠️ Make sure to configure a `CHROMATIC_PROJECT_TOKEN` repository secret
+#           projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}

angular.json

@@ -13,7 +13,7 @@
           "style": "scss"
         },
         "lfx-ng-schematics:lfx-component": {
-          "path": "projects/lfx-component-lib/src/lib/containers"
+          "path": "projects/lfx-component-lib/src/lib"
         }
       },
       "architect": {

package.json

@@ -27,6 +27,7 @@
     "@angular/platform-browser": "^18.0.0",
     "@angular/platform-browser-dynamic": "^18.0.0",
     "@angular/router": "^18.0.0",
+    "lfx-ng-schematics": "^0.0.7",
     "lodash": "^4.17.21",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",

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

@@ -0,0 +1,4 @@
+<script
+  src="https://kit.fontawesome.com/d65f54d9ea.js"
+  crossorigin="anonymous"
+></script>

projects/lfx-component-lib/README.md

@@ -14,7 +14,14 @@ Run `ng generate component component-name --project lfx-component-lib` to genera
 
 ## Scaffolding with Storybook using lfx-ng-schematics (see: https://github.com/linuxfoundation/lfx-ng-schematics for details)
 
-Run `ng g lfx-ng-schematics:lfx-c --name <name of component>`
+Before running the schematics, make sure you have the lfx-ng-schematics working in your local project. This can be done in 2 ways:
+
+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)
+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`)
+
+For more information see this video: https://www.loom.com/share/6f296c0558f348c2a8de911006d2a903?sid=ae32b4e8-a02a-4e22-bd7a-c44fb823584c
+
+After installing the schematics, run `ng g lfx-ng-schematics:lfx-c --name <name of component>`
 
 ## Build
 

projects/lfx-component-lib/documentation.json

@@ -48,7 +48,17 @@
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "Story",
-                "defaultValue": "{\n  render: () => ({\n    template: `\n      <p class=\"text-primary\">This is a paragraph of body text.</p>\n    `,\n  }),\n}"
+                "defaultValue": "{\n  render: () => ({\n    template: `\n      <p class=\"text-default\">This is a paragraph of body text.</p>\n    `,\n  }),\n}"
+            },
+            {
+                "name": "Disabled",
+                "ctype": "miscellaneous",
+                "subtype": "variable",
+                "file": "projects/lfx-component-lib/src/lib/controls/buttons/__docs__/buttons.stories.ts",
+                "deprecated": false,
+                "deprecationMessage": "",
+                "type": "Story",
+                "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}"
             },
             {
                 "name": "Error",
@@ -200,6 +210,16 @@
                 "type": "Meta<ToastComponent>",
                 "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}"
             },
+            {
+                "name": "meta",
+                "ctype": "miscellaneous",
+                "subtype": "variable",
+                "file": "projects/lfx-component-lib/src/lib/controls/buttons/__docs__/buttons.stories.ts",
+                "deprecated": false,
+                "deprecationMessage": "",
+                "type": "Meta<ButtonsComponent>",
+                "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}"
+            },
             {
                 "name": "Notice",
                 "ctype": "miscellaneous",
@@ -220,6 +240,16 @@
                 "type": "Preview",
                 "defaultValue": "{\n  parameters: {\n    controls: {\n      matchers: {\n        color: /(background|color)$/i,\n        date: /Date$/i,\n      },\n    },\n  },\n}"
             },
+            {
+                "name": "Primary",
+                "ctype": "miscellaneous",
+                "subtype": "variable",
+                "file": "projects/lfx-component-lib/src/lib/controls/buttons/__docs__/buttons.stories.ts",
+                "deprecated": false,
+                "deprecationMessage": "",
+                "type": "Story",
+                "defaultValue": "{\n  args: {},\n}"
+            },
             {
                 "name": "SecondaryText",
                 "ctype": "miscellaneous",
@@ -300,6 +330,35 @@
                         }
                     }
                 ]
+            },
+            {
+                "name": "getElement",
+                "file": "projects/lfx-component-lib/src/lib/controls/buttons/__docs__/buttons.stories.ts",
+                "ctype": "miscellaneous",
+                "subtype": "function",
+                "deprecated": false,
+                "deprecationMessage": "",
+                "description": "",
+                "args": [
+                    {
+                        "name": "canvasElement",
+                        "type": "HTMLElement",
+                        "deprecated": false,
+                        "deprecationMessage": ""
+                    }
+                ],
+                "returnType": "HTMLElement",
+                "jsdoctags": [
+                    {
+                        "name": "canvasElement",
+                        "type": "HTMLElement",
+                        "deprecated": false,
+                        "deprecationMessage": "",
+                        "tagName": {
+                            "text": "param"
+                        }
+                    }
+                ]
             }
         ],
         "typealiases": [
@@ -346,6 +405,17 @@
                 "deprecationMessage": "",
                 "description": "",
                 "kind": 183
+            },
+            {
+                "name": "Story",
+                "ctype": "miscellaneous",
+                "subtype": "typealias",
+                "rawtype": "StoryObj<ButtonsComponent>",
+                "file": "projects/lfx-component-lib/src/lib/controls/buttons/__docs__/buttons.stories.ts",
+                "deprecated": false,
+                "deprecationMessage": "",
+                "description": "",
+                "kind": 183
             }
         ],
         "enumerations": [],
@@ -369,7 +439,7 @@
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "Story",
-                    "defaultValue": "{\n  render: () => ({\n    template: `\n      <p class=\"text-primary\">This is a paragraph of body text.</p>\n    `,\n  }),\n}"
+                    "defaultValue": "{\n  render: () => ({\n    template: `\n      <p class=\"text-default\">This is a paragraph of body text.</p>\n    `,\n  }),\n}"
                 },
                 {
                     "name": "LinkText",
@@ -534,6 +604,38 @@
                     "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}"
                 }
             ],
+            "projects/lfx-component-lib/src/lib/controls/buttons/__docs__/buttons.stories.ts": [
+                {
+                    "name": "Disabled",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "projects/lfx-component-lib/src/lib/controls/buttons/__docs__/buttons.stories.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "Story",
+                    "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}"
+                },
+                {
+                    "name": "meta",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "projects/lfx-component-lib/src/lib/controls/buttons/__docs__/buttons.stories.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "Meta<ButtonsComponent>",
+                    "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}"
+                },
+                {
+                    "name": "Primary",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "projects/lfx-component-lib/src/lib/controls/buttons/__docs__/buttons.stories.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "Story",
+                    "defaultValue": "{\n  args: {},\n}"
+                }
+            ],
             "projects/lfx-component-lib/src/lib/containers/toast/__docs__/toast.stories.ts": [
                 {
                     "name": "Error",
@@ -652,6 +754,37 @@
                         }
                     ]
                 }
+            ],
+            "projects/lfx-component-lib/src/lib/controls/buttons/__docs__/buttons.stories.ts": [
+                {
+                    "name": "getElement",
+                    "file": "projects/lfx-component-lib/src/lib/controls/buttons/__docs__/buttons.stories.ts",
+                    "ctype": "miscellaneous",
+                    "subtype": "function",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "description": "",
+                    "args": [
+                        {
+                            "name": "canvasElement",
+                            "type": "HTMLElement",
+                            "deprecated": false,
+                            "deprecationMessage": ""
+                        }
+                    ],
+                    "returnType": "HTMLElement",
+                    "jsdoctags": [
+                        {
+                            "name": "canvasElement",
+                            "type": "HTMLElement",
+                            "deprecated": false,
+                            "deprecationMessage": "",
+                            "tagName": {
+                                "text": "param"
+                            }
+                        }
+                    ]
+                }
             ]
         },
         "groupedEnumerations": {},
@@ -707,6 +840,19 @@
                     "description": "",
                     "kind": 183
                 }
+            ],
+            "projects/lfx-component-lib/src/lib/controls/buttons/__docs__/buttons.stories.ts": [
+                {
+                    "name": "Story",
+                    "ctype": "miscellaneous",
+                    "subtype": "typealias",
+                    "rawtype": "StoryObj<ButtonsComponent>",
+                    "file": "projects/lfx-component-lib/src/lib/controls/buttons/__docs__/buttons.stories.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "description": "",
+                    "kind": 183
+                }
             ]
         }
     },
@@ -805,6 +951,46 @@
                 "coverageCount": "0/1",
                 "status": "low"
             },
+            {
+                "filePath": "projects/lfx-component-lib/src/lib/controls/buttons/__docs__/buttons.stories.ts",
+                "type": "function",
+                "linktype": "miscellaneous",
+                "linksubtype": "function",
+                "name": "getElement",
+                "coveragePercent": 0,
+                "coverageCount": "0/1",
+                "status": "low"
+            },
+            {
+                "filePath": "projects/lfx-component-lib/src/lib/controls/buttons/__docs__/buttons.stories.ts",
+                "type": "variable",
+                "linktype": "miscellaneous",
+                "linksubtype": "variable",
+                "name": "Disabled",
+                "coveragePercent": 0,
+                "coverageCount": "0/1",
+                "status": "low"
+            },
+            {
+                "filePath": "projects/lfx-component-lib/src/lib/controls/buttons/__docs__/buttons.stories.ts",
+                "type": "variable",
+                "linktype": "miscellaneous",
+                "linksubtype": "variable",
+                "name": "meta",
+                "coveragePercent": 0,
+                "coverageCount": "0/1",
+                "status": "low"
+            },
+            {
+                "filePath": "projects/lfx-component-lib/src/lib/controls/buttons/__docs__/buttons.stories.ts",
+                "type": "variable",
+                "linktype": "miscellaneous",
+                "linksubtype": "variable",
+                "name": "Primary",
+                "coveragePercent": 0,
+                "coverageCount": "0/1",
+                "status": "low"
+            },
             {
                 "filePath": "projects/lfx-component-lib/src/lib/themes/text-colors.stories.ts",
                 "type": "variable",

projects/lfx-component-lib/package.json

@@ -32,6 +32,12 @@
     },
     "./colors": {
       "sass": "./styles/colors.scss"
+    },
+    "./controls": {
+      "sass": "./styles/controls.scss"
+    },
+    "./all": {
+      "sass": "./styles/index.scss"
     }
   }
 }