chore(ui): mobile button

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,

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;

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>();

src/app/shared/components/v3/button/icon-button/IconButton.stories.ts

+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,
+  },
+};

src/app/shared/components/v3/button/icon-button/icon-button.component.html

+<button [type]="type" [ngClass]="classes" [disabled]="disabled" (click)="action.emit($event)">
+  <app-svg-icon [type]="iconFolder" [icon]="iconName" [iconColor]="'currentColor'" [iconClass]="'icon-20'" />
+</button>

src/app/shared/components/v3/button/icon-button/icon-button.component.ts

+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];
+  }
+}