added drill down type button

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

Author: emlimlf

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

@@ -19,7 +19,7 @@ const meta: Meta<ButtonsComponent> = {
   tags: ['autodocs'],
   render: (args) => ({
     template: `
-      <lfx-buttons type="${args.type}" [disabled]="${args.disabled}">
+      <lfx-buttons type="${args.type}" [disabled]="${args.disabled}" [isDrillDown]="${args.isDrillDown}">
         <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>
@@ -34,6 +34,9 @@ const meta: Meta<ButtonsComponent> = {
     disabled: {
       control: 'boolean',
     },
+    isDrillDown: {
+      control: 'boolean',
+    },
   },
   args: {
     type: 'primary' as IButtonType,

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

@@ -1,5 +1,6 @@
 <button
   class="lfx-button lfx-button--{{ type().toLowerCase() }}"
+  [class.lfx-button--drill-down]="isDrillDown()"
   [disabled]="disabled()"
   (click)="onClick()"
 >

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

@@ -66,4 +66,9 @@
       color: $grey-700;
     }
   }
+
+  &.lfx-button--drill-down {
+    border-top-left-radius: $dim-40;
+    border-bottom-left-radius: 0;
+  }
 }

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

@@ -13,6 +13,8 @@ export class ButtonsComponent {
   type = input<IButtonType>('primary');
   disabled = input<boolean>(false);
 
+  isDrillDown = input<boolean>(false);
+
   click = output<void>();
 
   onClick() {