From 2886294bbe140674eed9a9c88c2aa6412536cd8b Mon Sep 17 00:00:00 2001 From: louiiuol Date: Thu, 17 Oct 2024 21:52:54 +0200 Subject: [PATCH] [Component] Improved Button (now supports icon) --- README.md | 5 +-- .../atoms/button/button.component.scss | 45 +++++++++++++++---- .../atoms/button/button.component.ts | 14 +++--- .../button/demos/demo-button.component.ts | 38 ++++++++++++++++ src/app/components/atoms/button/index.md | 12 +++++ .../components/atoms/button/ng-doc.page.ts | 2 + .../components/atoms/icon-material/index.md | 13 +++--- src/app/components/atoms/icon/index.md | 10 +++-- src/docs/versions/todo/index.md | 2 - 9 files changed, 111 insertions(+), 30 deletions(-) create mode 100644 src/app/components/atoms/button/demos/demo-button.component.ts diff --git a/README.md b/README.md index 2bb3cd9..d8615b6 100644 --- 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 | | `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 index 754b4f8..3362e08 100644 --- 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 index 5d8d075..fbf3e04 100644 --- 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: ``, + template: ` `, + 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 new file mode 100644 index 0000000..6366ddd --- /dev/null +++ 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: ` +
+

Simple button

+ My button +
+

Button with text and icon

+ + + My button + +
+

Button with icon

+ + + + + + + + + +
+ `, + 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 index 9304f7b..2026313 100644 --- 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") }}
+ +## 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 index f724cc6..c286c83 100644 --- 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 index 9033614..45bbaf7 100644 --- 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. * + +## Playground 🕹ī¸ + +{{ NgDocActions.playground("IconMaterialPlayground", {inputs: {name: "home"} }) }} + +
+ ## 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"} }) }} - -
diff --git a/src/app/components/atoms/icon/index.md b/src/app/components/atoms/icon/index.md index daa7b04..bf48e19 100644 --- 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"} }) }} + +
+ ## 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"} }) }} - -
diff --git a/src/docs/versions/todo/index.md b/src/docs/versions/todo/index.md index 5bc9a55..92417b1 100644 --- 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 🎉