added primary button

Signed-off-by: Efren Lim <[email protected]>

Author: emlimlf

projects/lfx-component-lib/documentation.json

@@ -218,7 +218,7 @@
                 "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        <span>Button Text</span>\n      </lfx-buttons>\n    `,\n  }),\n}"
+                "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",
@@ -613,7 +613,7 @@
                     "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        <span>Button Text</span>\n      </lfx-buttons>\n    `,\n  }),\n}"
+                    "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}"
                 }
             ],
             "projects/lfx-component-lib/src/lib/containers/toast/__docs__/toast.stories.ts": [

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"
     }
   }
 }

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

@@ -20,7 +20,9 @@ const meta: Meta<ButtonsComponent> = {
   render: (args) => ({
     template: `
       <lfx-buttons type="primary">
+        <i class="fa-sharp fa-light fa-file-chart-column"></i>
         <span>Button Text</span>
+        <i class="fa-sharp fa-light fa-arrow-right"></i>
       </lfx-buttons>
     `,
   }),

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

@@ -1,4 +1,3 @@
 <button class="lfx-button lfx-button--{{ type().toLowerCase() }}">
-  <i class="fa-solid fa-user"></i>
   <ng-content />
 </button>

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

@@ -1,7 +1,24 @@
+@import "../../styles/constants.scss";
 @import "../../styles/mixins/color-mixins.scss";
 
 .lfx-button {
+  padding: 0.75rem 1.75rem;
+  border: 0;
+  border-radius: $dim-8;
+  display: flex;
+  align-items: center;
+  gap: $dim-4;
+  cursor: pointer;
   &.lfx-button--primary {
     @include primary-color;
+    @include text-white;
+
+    &:hover {
+      background-color: $blue-700;
+    }
+
+    &:active {
+      background-color: $blue-800;
+    }
   }
 }

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

@@ -6,7 +6,8 @@
 @import "./mixins/color-mixins.scss";
 
 //  default text colors
-*,
+html,
+body,
 .text-primary {
   @include text-primary-color;
 }

projects/lfx-component-lib/src/lib/styles/controls.scss

@@ -0,0 +1 @@
+@import "../controls/buttons/buttons.component.scss";

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

@@ -21,6 +21,10 @@ $secondary-text-color: $grey-500;
   color: $secondary-text-color;
 }
 
+@mixin text-white {
+  color: $grey-0;
+}
+
 @mixin message-color-notice {
   color: $primary-color;
 }