[Component] Improved Button (now supports icon)

louiiuol · Oct 17, 2024 · 2886294 · 2886294
1 parent 4a2baf8
commit 2886294
Show file tree

Hide file tree

Showing 9 changed files with 111 additions and 30 deletions.
diff --git a/README.md b/README.md
@@ -16,6 +16,7 @@
 | [rxjs](https://rxjs.dev/api) | `~7.8.0` |
 | [tailwind](https://tailwindcss.com/docs/screens) | `^3.4.13` |
 | [typescript](https://www.typescriptlang.org/) | `~5.5.2` |
+| [ngdoc](https://ng-doc.com/) | `18.2.0` |
 
 > More dependencies can be found inside [package.json](https://github.com/louiiuol/ngx-lib/blob/main/package.json).
 
@@ -28,10 +29,8 @@
 | `npm run start` | Serves application locally to <https://localhost:4200> |
 | `npm run build` | Builds application in production mode to `dist/ngx-lib/browser` |
 | `npm run watch` | Builds application in development mode and watch for file change |
-| `npm run test` | Launch unit tests with Jest runner |
-| `npm run test:watch` | Launch unit tests and watch for files change |
 | `npm run lint` | Lint repository with eslint & prettier. |
 
 ## Versions 🔖
 
-> A complete changelog can be found in [dedicated markdown](https://github.com/louiiuol/ngx-lib/blob/main/CHANGELOG.md). Which resume current progress. You can also found what is in the current development inside [TODO](https://github.com/louiiuol/ngx-lib/blob/main/TODO.md) markdown.
+> A complete changelog can be found in [dedicated markdown](https://louiiuol.github.io/ngx-lib/versions/changelog). Which resume current progress. You can also found what is in the current development inside [TODO](https://louiiuol.github.io/ngx-lib/versions/todo) markdown.
diff --git a/src/app/components/atoms/button/button.component.scss b/src/app/components/atoms/button/button.component.scss
@@ -1,12 +1,15 @@
 :host {
   --button-color: #fff;
-  &[data-appearance="flat"] {
+  &[data-appearance="flat"],
+  &[data-appearance="fab"] {
     background-color: var(--button-background);
     color: var(--button-color);
   }
 
   &[data-appearance="basic"],
-  &[data-appearance="stroked"] {
+  &[data-appearance="stroked"],
+  &[data-appearance="icon"] ,
+  &[data-appearance="icon-stroked"] {
     background-color: transparent;
     color: var(--button-background);
     &:hover:before {
@@ -16,7 +19,8 @@
     }
   }
 
-  &[data-appearance="stroked"] {
+  &[data-appearance="stroked"],
+  &[data-appearance="icon-stroked"] {
     border: 1px solid currentColor;
   }
 
@@ -33,24 +37,47 @@
   }
 
   &[data-size="small"] {
-    @apply px-3 py-1;
+    &:not([data-appearance="icon"]), &:not([data-appearance="icon-stroked"]), &:not([data-appearance="fab"]) {
+      @apply px-3 py-1 text-sm;
+    }
+    &[data-appearance="icon"], &[data-appearance="icon-stroked"], &[data-appearance="fab"] {
+      @apply p-1;
+    }
+    &[data-rounded="true"] {
+      @apply rounded-lg;
+    }
   }
 
   &[data-size="medium"] {
-    @apply px-6 py-3 text-lg;
+    &:not([data-appearance="icon"]), &:not([data-appearance="icon-stroked"]), &:not([data-appearance="fab"]) {
+      @apply px-6 py-3;
+    }
+    &[data-appearance="icon"], &[data-appearance="icon-stroked"], &[data-appearance="fab"]  {
+      @apply p-3;
+    }
+
+    &[data-rounded="true"] {
+      @apply rounded-2xl;
+    }
   }
 
   &[data-size="large"] {
-    @apply px-7 py-4 text-xl;
+    &:not([data-appearance="icon"]), &:not([data-appearance="icon-stroked"]), &:not([data-appearance="fab"]) {
+      @apply px-7 py-4 text-xl;
+    }
+    &[data-appearance="icon"], &[data-appearance="icon-stroked"], &[data-appearance="fab"]  {
+      @apply p-4;
+    }
+    &[data-rounded="true"] {
+      @apply rounded-2xl;
+    }
   }
 
   &[data-full="true"] {
     @apply w-full;
   }
 
-  &[data-rounded="true"] {
-    border-radius: 24px;
-  }
+
 
   &[data-disabled="true"] {
     opacity: 0.5;

diff --git a/src/app/components/atoms/button/button.component.ts b/src/app/components/atoms/button/button.component.ts
@@ -1,4 +1,5 @@
 import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { IconMaterialComponent } from '../icon-material/icon-material.component';
 
 /**
  * Simple button component with multiple styles.
@@ -10,15 +11,16 @@ import { ChangeDetectionStrategy, Component, input } from '@angular/core';
   standalone: true,
   host: {
     class:
-      'inline-flex justify-center items-center rounded-md cursor-pointer overflow-hidden relative border-transparent border',
+      'inline-flex justify-center gap-2 items-center rounded-md cursor-pointer overflow-hidden relative border-transparent border m-2',
     '[attr.data-color]': 'color()',
     '[attr.data-size]': 'size()',
     '[attr.data-rounded]': 'rounded()',
     '[attr.data-disabled]': 'disabled()',
     '[attr.data-appearance]': 'appearance()',
-    '[attr.data-full]': 'full()',
+    '[class.w-full]': 'full()',
   },
-  template: `<ng-content />`,
+  template: ` <ng-content /> `,
+  imports: [IconMaterialComponent],
   styleUrls: ['./button.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
@@ -43,7 +45,7 @@ export class ButtonComponent {
 
   /**
    * Whether the button should have rounded corners.
-   * @default false
+   * @default true
    */
   rounded = input(true);
 
@@ -56,7 +58,7 @@ export class ButtonComponent {
 
   /**
    * Appearance of the button.
-   * @default 'raised'
+   * @default 'flat'
    */
-  appearance = input<'basic' | 'flat' | 'stroked'>('flat');
+  appearance = input<'basic' | 'flat' | 'stroked' | 'icon' | 'icon-stroked' | 'fab'>('flat');
 }
diff --git a/src/app/components/atoms/button/demos/demo-button.component.ts b/src/app/components/atoms/button/demos/demo-button.component.ts
@@ -0,0 +1,38 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { IconMaterialComponent } from '../../icon-material/icon-material.component';
+import { ButtonComponent } from '../button.component';
+
+@Component({
+  selector: 'lib-button-demo',
+  template: `
+  <div class="p-6">
+    <p>Simple button</p>
+      <lib-button (click)="notify()">My button</lib-button>
+      <hr />
+      <p>Button with text and icon</p>
+      <lib-button (click)="notify()">
+        <lib-icon-material name="favorite" />
+        My button
+        </lib-button>
+        <hr />
+        <p>Button with icon</p>
+        <lib-button appearance="fab">
+        <lib-icon-material name="favorite" />
+        </lib-button>
+        <lib-button appearance="icon" color="accent">
+        <lib-icon-material name="favorite" />
+        </lib-button>
+        <lib-button appearance="icon-stroked">
+        <lib-icon-material name="favorite" />
+        </lib-button>
+  </div>
+  `,
+  standalone: true,
+  imports: [ButtonComponent, IconMaterialComponent],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ButtonDemoComponent {
+  notify(): void {
+    alert('Hello!');
+  }
+}
diff --git a/src/app/components/atoms/button/index.md b/src/app/components/atoms/button/index.md
@@ -1,7 +1,19 @@
 > A button is an interface element that allows the user to perform a specific action when clicked.
 
+
+{{ NgDocActions.demo("ButtonDemoComponent") }}
+
+
 ## Playground 🕹️
 
 {{ NgDocActions.playground("ButtonPlayground") }}
 
 <div id="end"></div>
+
+## Sources
+
+```typescript file="./button.component.ts"
+
+```
+
+
diff --git a/src/app/components/atoms/button/ng-doc.page.ts b/src/app/components/atoms/button/ng-doc.page.ts
@@ -1,10 +1,12 @@
 import type { NgDocPage } from '@ng-doc/core';
 import { ButtonComponent } from 'src/app/components/atoms/button/button.component';
 import ComponentsCategory from 'src/app/components/ng-doc.category';
+import { ButtonDemoComponent } from './demos/demo-button.component';
 
 const Button: NgDocPage = {
   title: `Button`,
   mdFile: './index.md',
+  demos: {ButtonDemoComponent},
   playgrounds: {
     ButtonPlayground: {
       target: ButtonComponent,

diff --git a/src/app/components/atoms/icon-material/index.md b/src/app/components/atoms/icon-material/index.md
@@ -3,6 +3,13 @@ Simple component to display an icon from material-symbols-outlined font.
 * Refer to the material-symbols-outlined font for the list of available icons.
 * <https://fonts.google.com/icons>
 
+
+## Playground 🕹️
+
+{{ NgDocActions.playground("IconMaterialPlayground", {inputs: {name: "home"} }) }}
+
+<div id="end"></div>
+
 ## Pre requirements
 
 In order to use this component in your application, you must follow these steps:
@@ -32,9 +39,3 @@ Simply add this selector to your `style.scss` file. Adapt this settings to match
 ### That's it 🎉
 
 You can now start importing this component in your application !
-
-## Playground 🕹️
-
-{{ NgDocActions.playground("IconMaterialPlayground", {inputs: {name: "home"} }) }}
-
-<div id="end"></div>
diff --git a/src/app/components/atoms/icon/index.md b/src/app/components/atoms/icon/index.md
@@ -4,6 +4,12 @@ keyword: IconPage
 
 Simple component to display an icon as SVG tag from an svg file located in  your `assets/icons` folder.
 
+## Playground 🕹️
+
+{{ NgDocActions.playground("IconPlayground", {inputs: {name: "logo"} }) }}
+
+<div id="end"></div>
+
 ## Pre requirements
 
 In order to use this component in your application, you must follow these steps:
@@ -27,8 +33,4 @@ You can now start importing this component in your application !
 
 > By following these guidelines, you can effectively use the `lib-icon` component in your Angular application.
 
-## Playground 🕹️
 
-{{ NgDocActions.playground("IconPlayground", {inputs: {name: "logo"} }) }}
-
-<div id="end"></div>
diff --git a/src/docs/versions/todo/index.md b/src/docs/versions/todo/index.md
@@ -1,5 +1,3 @@
-# Current development ⏰
-
 > Tasks on development scope (more tasks can be found in this repository using TODO Tree -vscode extensions)
 
 ## Init application 🎉