From 96b9b5f7fd471c5ce3d1b3152652d426fde2b5fe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A9mi=20PAILHAREY?= <rpailharey@grandlyon.com>
Date: Tue, 14 Nov 2023 16:00:57 +0000
Subject: [PATCH] chore(ui): mobile button
---
src/app/shared/components/index.ts | 2 +
.../v3/button/button.component.scss | 6 +++
.../components/v3/button/button.component.ts | 2 +-
.../button/icon-button/IconButton.stories.ts | 53 +++++++++++++++++++
.../icon-button/icon-button.component.html | 3 ++
.../icon-button/icon-button.component.ts | 31 +++++++++++
6 files changed, 96 insertions(+), 1 deletion(-)
create mode 100644 src/app/shared/components/v3/button/icon-button/IconButton.stories.ts
create mode 100644 src/app/shared/components/v3/button/icon-button/icon-button.component.html
create mode 100644 src/app/shared/components/v3/button/icon-button/icon-button.component.ts
diff --git a/src/app/shared/components/index.ts b/src/app/shared/components/index.ts
index 04859a36d..fc1c59438 100644
--- a/src/app/shared/components/index.ts
+++ b/src/app/shared/components/index.ts
@@ -21,6 +21,7 @@ import { SvgIconComponent } from './svg-icon/svg-icon.component';
import { TextInputModalComponent } from './text-input-modal/text-input-modal.component';
import { TrainingTypePickerComponent } from './training-type-picker/training-type-picker.component';
import { ButtonV3Component } from './v3/button/button.component';
+import { IconButtonV3Component } from './v3/button/icon-button/icon-button.component';
import { CheckboxV3Component } from './v3/checkbox/checkbox.component';
import { InputV3Component } from './v3/input/input.component';
import { LabelCheckboxV3Component } from './v3/label-checkbox/label-checkbox.component';
@@ -67,6 +68,7 @@ export const SharedComponents = [
CheckboxV3Component,
CustomModalComponent,
HourPickerComponent,
+ IconButtonV3Component,
InformationStepComponent,
InputV3Component,
LabelCheckboxV3Component,
diff --git a/src/app/shared/components/v3/button/button.component.scss b/src/app/shared/components/v3/button/button.component.scss
index 12a8f80d3..0e3721e3e 100644
--- a/src/app/shared/components/v3/button/button.component.scss
+++ b/src/app/shared/components/v3/button/button.component.scss
@@ -40,6 +40,12 @@ button {
}
// VARIANT
+ &.icon-only {
+ height: 32px;
+ width: 32px;
+ padding-inline: 12px;
+ }
+
&.primary {
background-color: $red;
color: $white;
diff --git a/src/app/shared/components/v3/button/button.component.ts b/src/app/shared/components/v3/button/button.component.ts
index 8aa6f10d8..643e2ecd7 100644
--- a/src/app/shared/components/v3/button/button.component.ts
+++ b/src/app/shared/components/v3/button/button.component.ts
@@ -32,7 +32,7 @@ export class ButtonV3Component {
@Input() iconFolder: string = 'ico';
/** Icon name */
- @Input() iconName: string;
+ @Input() iconName?: string;
/** Click handler */
@Output() action = new EventEmitter<Event>();
diff --git a/src/app/shared/components/v3/button/icon-button/IconButton.stories.ts b/src/app/shared/components/v3/button/icon-button/IconButton.stories.ts
new file mode 100644
index 000000000..e84392a86
--- /dev/null
+++ b/src/app/shared/components/v3/button/icon-button/IconButton.stories.ts
@@ -0,0 +1,53 @@
+import { CommonModule } from '@angular/common';
+import type { Meta, StoryObj } from '@storybook/angular';
+import { moduleMetadata } from '@storybook/angular';
+import { SvgIconComponent } from '../../../svg-icon/svg-icon.component';
+import { ButtonTypeV3 } from '../button.type';
+import { IconButtonV3Component } from './icon-button.component';
+
+// More on how to set up stories at: https://storybook.js.org/docs/angular/writing-stories/introduction
+const meta: Meta<IconButtonV3Component> = {
+ title: 'Components/IconButton',
+ component: IconButtonV3Component,
+ tags: ['autodocs'],
+ decorators: [
+ moduleMetadata({
+ declarations: [SvgIconComponent],
+ imports: [CommonModule],
+ }),
+ ],
+ argTypes: {},
+};
+
+export default meta;
+type Story = StoryObj<IconButtonV3Component>;
+
+export const Primary: Story = {
+ args: {
+ variant: ButtonTypeV3.PrimaryBlack,
+ disabled: false,
+ iconFolder: 'form',
+ iconName: 'chevronRight',
+ },
+};
+
+export const Secondary: Story = {
+ args: {
+ ...Primary.args,
+ variant: ButtonTypeV3.Secondary,
+ },
+};
+
+export const Tertiary: Story = {
+ args: {
+ ...Primary.args,
+ variant: ButtonTypeV3.Tertiary,
+ },
+};
+
+export const PrimaryDisabled: Story = {
+ args: {
+ ...Primary.args,
+ disabled: true,
+ },
+};
diff --git a/src/app/shared/components/v3/button/icon-button/icon-button.component.html b/src/app/shared/components/v3/button/icon-button/icon-button.component.html
new file mode 100644
index 000000000..eeed31fa7
--- /dev/null
+++ b/src/app/shared/components/v3/button/icon-button/icon-button.component.html
@@ -0,0 +1,3 @@
+<button [type]="type" [ngClass]="classes" [disabled]="disabled" (click)="action.emit($event)">
+ <app-svg-icon [type]="iconFolder" [icon]="iconName" [iconColor]="'currentColor'" [iconClass]="'icon-20'" />
+</button>
diff --git a/src/app/shared/components/v3/button/icon-button/icon-button.component.ts b/src/app/shared/components/v3/button/icon-button/icon-button.component.ts
new file mode 100644
index 000000000..36db43ed0
--- /dev/null
+++ b/src/app/shared/components/v3/button/icon-button/icon-button.component.ts
@@ -0,0 +1,31 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { ButtonTypeV3 } from '../button.type';
+
+@Component({
+ selector: 'app-v3-icon-button',
+ templateUrl: './icon-button.component.html',
+ styleUrls: ['../button.component.scss'],
+})
+export class IconButtonV3Component {
+ /** HTML type of the button */
+ @Input() type: 'submit' | 'button' | 'reset' = 'button';
+
+ /** What variant should the button be ? */
+ @Input() variant?: ButtonTypeV3 = ButtonTypeV3.Primary;
+
+ /** Should the button be disabled ? */
+ @Input() disabled?: boolean = false;
+
+ /** Folder of the icon ex: assets/ico */
+ @Input() iconFolder: string = 'ico';
+
+ /** Icon name */
+ @Input() iconName: string;
+
+ /** Click handler */
+ @Output() action = new EventEmitter<Event>();
+
+ public get classes(): string[] {
+ return ['icon-only', this.variant];
+ }
+}
--
GitLab