src/app/shared/components/v3/checkbox/checkbox.component.scss

@@ -28,7 +28,19 @@ input {
       background-color: $grey-6;
       background-image: url('./check-grey.svg');
     }
-    // transition: background-image 2s ease;
+  }
+
+  &:indeterminate {
+    background-color: $grey-1;
+    background-image: url('./indeterminate.svg');
+    stroke: $white;
+    background-repeat: no-repeat;
+    background-position: center center;
+    background-size: 16px 16px;
+    &:disabled {
+      background-color: $grey-6;
+      background-image: url('./indeterminate-grey.svg');
+    }
   }
 
   &:focus-visible {

src/app/shared/components/v3/checkbox/checkbox.component.ts

@@ -12,6 +12,9 @@ export class CheckboxV3Component {
   /** Checked ? */
   @Input() checked: boolean;
 
+  /** Indeterminate (half-checked) ? */
+  @Input() indeterminate?: boolean;
+
   /** What size should the checkbox be ? */
   @Input() size?: 'small' | 'medium' = 'medium';
 

src/app/shared/components/v3/checkbox/checkbox.stories.ts

@@ -42,6 +42,13 @@ export const CheckboxMediumChecked: Story = {
   },
 };
 
+export const CheckboxMediumIndeterminate: Story = {
+  args: {
+    ...CheckboxMedium.args,
+    indeterminate: true,
+  },
+};
+
 export const DisabledNotChecked: Story = {
   args: {
     disabled: true,
@@ -55,3 +62,10 @@ export const DisabledChecked: Story = {
     checked: true,
   },
 };
+
+export const DisabledIndeterminate: Story = {
+  args: {
+    disabled: true,
+    indeterminate: true,
+  },
+};

src/app/shared/components/v3/checkbox/indeterminate-grey.svg

+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M18 13H6C5.45 13 5 12.55 5 12C5 11.45 5.45 11 6 11H18C18.55 11 19 11.45 19 12C19 12.55 18.55 13 18 13Z"
+        fill="#696969" />
+
+</svg>
\ No newline at end of file

src/app/shared/components/v3/checkbox/indeterminate.svg

+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M18 13H6C5.45 13 5 12.55 5 12C5 11.45 5.45 11 6 11H18C18.55 11 19 11.45 19 12C19 12.55 18.55 13 18 13Z"
+        fill="white" />
+
+</svg>
\ No newline at end of file

src/app/shared/components/v3/collapse/collapse-content/collapse-content.component.ts

+import { AUTO_STYLE, animate, state, style, transition, trigger } from '@angular/animations';
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-collapse-content',
+  template: `<div style="overflow: hidden" [@collapse]="expanded">
+    <ng-content></ng-content>
+  </div>`,
+  animations: [
+    trigger('collapse', [
+      state('false', style({ height: '0px', visibility: 'hidden' })),
+      state('true', style({ height: AUTO_STYLE, visibility: AUTO_STYLE })),
+      transition('true => *', animate('300ms ease-in')),
+      transition('* => true', animate('300ms ease-out')),
+    ]),
+  ],
+})
+export class CollapseContentComponent {
+  expanded = false;
+}

src/app/shared/components/v3/collapse/collapse-header/collapse-header.component.scss

+@import 'color';
+
+.collapse-header {
+  display: flex;
+  justify-content: space-between;
+  cursor: pointer;
+
+  // SIZES
+  &.small {
+    border-radius: 0.25rem;
+    padding-right: 0.75rem;
+  }
+  &.medium {
+    border-radius: 0.5rem;
+    padding-right: 1.5rem;
+  }
+
+  app-svg-icon {
+    transition: all 0.3s;
+    &.expanded {
+      transform: rotate(180deg);
+    }
+  }
+
+  &:focus-visible {
+    outline-offset: 0px;
+    outline: 2px solid $blue-focus;
+  }
+}

src/app/shared/components/v3/collapse/collapse-header/collapse-header.component.ts

+import { Component, EventEmitter, Output } from '@angular/core';
+
+@Component({
+  selector: 'app-collapse-header',
+  template: `<div
+    class="collapse-header"
+    [ngClass]="size"
+    role="button"
+    tabindex="0"
+    (click)="toggle.emit()"
+    (keyup.enter)="toggle.emit()"
+  >
+    <ng-content></ng-content>
+    <app-svg-icon [ngClass]="expanded && 'expanded'" [type]="'ico'" [icon]="'fold'" [iconClass]="'icon-32'" />
+  </div>`,
+  styleUrls: ['collapse-header.component.scss'],
+})
+export class CollapseHeaderComponent {
+  @Output() toggle = new EventEmitter<void>();
+  expanded = false;
+  size: 'small' | 'medium' = 'small';
+}

src/app/shared/components/v3/collapse/collapse.component.scss

+@import 'color';
+
+.collapse {
+  transition: all 300ms ease-in;
+  border: 1px solid $grey-4;
+
+  // SIZES
+  &.small {
+    border-radius: 0.25rem;
+  }
+  &.medium {
+    border-radius: 0.5rem;
+  }
+
+  // VARIANTS
+  &.collapse-warning {
+    border: 1px solid $info-warning;
+  }
+
+  &.expanded {
+    &.boxShadow {
+      box-shadow: 0px 12px 24px 0px rgba(0, 0, 0, 0.1);
+    }
+    &:not(.collapse-warning) {
+      border: 1px solid $grey-1;
+    }
+  }
+}

src/app/shared/components/v3/collapse/collapse.component.ts

+import { AfterContentInit, Component, ContentChild, Input } from '@angular/core';
+import { CollapseContentComponent } from './collapse-content/collapse-content.component';
+import { CollapseHeaderComponent } from './collapse-header/collapse-header.component';
+import { CollapseType } from './collapse.type';
+
+@Component({
+  selector: 'app-collapse',
+  template: `<div class="collapse" [ngClass]="classes">
+    <ng-content></ng-content>
+  </div>`,
+  styleUrls: ['collapse.component.scss'],
+})
+export class CollapseComponent implements AfterContentInit {
+  @ContentChild(CollapseHeaderComponent) title: CollapseHeaderComponent;
+  @ContentChild(CollapseContentComponent) content: CollapseContentComponent;
+  @Input() variant?: CollapseType = CollapseType.Regular;
+  /** Adapts border-radius and right padding */
+  @Input() size?: 'small' | 'medium' = 'small';
+  /** Box-shadow when expanded? */
+  @Input() boxShadow? = false;
+  /** Default expanded value */
+  @Input() expanded? = false;
+
+  ngAfterContentInit(): void {
+    this.title.size = this.size;
+    this.title.expanded = this.expanded;
+    this.content.expanded = this.expanded;
+    this.title.toggle.subscribe(() => this.toggle());
+  }
+
+  private toggle(): void {
+    this.expanded = !this.expanded;
+    this.title.expanded = this.expanded;
+    this.content.expanded = this.expanded;
+  }
+
+  public get classes(): string[] {
+    return [this.variant, this.size, this.expanded ? 'expanded' : '', this.boxShadow ? 'boxShadow' : ''];
+  }
+}

src/app/shared/components/v3/collapse/collapse.stories.ts

+import { CommonModule } from '@angular/common';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import type { Meta, StoryObj } from '@storybook/angular';
+import { moduleMetadata } from '@storybook/angular';
+import { SvgIconComponent } from '../../svg-icon/svg-icon.component';
+import { CollapseContentComponent } from './collapse-content/collapse-content.component';
+import { CollapseHeaderComponent } from './collapse-header/collapse-header.component';
+import { CollapseComponent } from './collapse.component';
+
+// More on how to set up stories at: https://storybook.js.org/docs/angular/writing-stories/introduction
+const meta: Meta<CollapseComponent> = {
+  title: 'Components/Collapse',
+  component: CollapseComponent,
+  tags: ['autodocs'],
+  decorators: [
+    moduleMetadata({
+      declarations: [SvgIconComponent, CollapseHeaderComponent, CollapseContentComponent],
+      imports: [CommonModule, BrowserAnimationsModule],
+    }),
+  ],
+  argTypes: {},
+};
+
+export default meta;
+type Story = StoryObj<CollapseComponent>;
+
+const collapseChildren = `
+    <app-collapse-header>
+      <div style="padding:0.5rem;">
+      <p style="margin:0;">Contenu de l'en-tête</p>
+      </div>
+    </app-collapse-header>
+    <app-collapse-content>
+      <div style="padding:0.5rem;border-top:1px solid #e9e9e9;">
+        <p>Premier élément</p>
+        <p>Deuxième élément</p>
+        <p>Troisième élément</p>
+        <p>Quatrième élément</p>
+      </div>
+    </app-collapse-content>
+`;
+
+export const CollapseSmall: Story = {
+  render: () => ({
+    template: `
+      <app-collapse>
+        ${collapseChildren}
+      </app-collapse>`,
+  }),
+};
+
+export const CollapseSmallExpanded: Story = {
+  render: () => ({
+    template: `
+      <app-collapse [expanded]="true">
+        ${collapseChildren}
+      </app-collapse>`,
+  }),
+};
+
+export const CollapseMedium: Story = {
+  render: () => ({
+    template: `
+      <app-collapse [size]="'medium'">
+        ${collapseChildren}
+      </app-collapse>`,
+  }),
+};
+
+export const CollapseMediumBoxShadow: Story = {
+  render: () => ({
+    template: `
+      <app-collapse [size]="'medium'" [boxShadow]="true">
+        ${collapseChildren}
+      </app-collapse>`,
+  }),
+};
+
+export const CollapseMediumWarning: Story = {
+  render: () => ({
+    template: `
+      <app-collapse [size]="'medium'" [variant]="'collapse-warning'">
+        ${collapseChildren}
+      </app-collapse>`,
+  }),
+};

src/app/shared/components/v3/collapse/collapse.type.ts

+/** values will be used for css selectors */
+export enum CollapseType {
+  Regular = 'collapse-regular',
+  Warning = 'collapse-warning',
+}

src/app/shared/components/v3/input/input.component.html

@@ -6,17 +6,17 @@
     [type]="type"
     [id]="id"
     [disabled]="disabled"
-    [ngClass]="status"
-    [value]="value"
-    (keydown)="onValueChange($event)"
+    [ngClass]="classes"
+    [ngModel]="ngModelValue"
+    (ngModelChange)="ngModelValueChange.emit($event)"
   />
-  <div *ngIf="status && statusText" class="status" [ngClass]="status">
+  <div *ngIf="status && getStatusText()" class="status" [ngClass]="status">
     <img *ngIf="status === 'error'" src="assets/ico/error-rounded.svg" alt="" />
     <img *ngIf="status === 'success'" src="assets/ico/success-rounded.svg" alt="" />
     <img *ngIf="status === 'info'" src="assets/ico/info-rounded.svg" alt="" />
     <img *ngIf="status === 'warning'" src="assets/ico/warning.svg" alt="" />
     <span class="statusText" [ngClass]="status">
-      {{ statusText }}
+      {{ getStatusText() }}
     </span>
   </div>
 </div>

src/app/shared/components/v3/input/input.component.scss

@@ -34,7 +34,6 @@
 
   input {
     margin-top: 8px;
-    height: 32px;
     box-sizing: border-box;
     max-width: 300px;
     border-radius: 4px;
@@ -43,6 +42,11 @@
     font-size: $font-size-small;
     transition: all 0.3s ease-in-out;
 
+    height: 32px;
+    &.large {
+      height: 40px;
+    }
+
     &:focus {
       outline: none;
       border-color: $grey-1;

src/app/shared/components/v3/input/input.component.ts

@@ -16,6 +16,8 @@ export class InputV3Component {
   /** Label for the radio */
   @Input() label?: string;
 
+  @Input() size?: 'small' | 'large';
+
   /** Additional label description */
   @Input() description?: string;
 
@@ -25,12 +27,24 @@ export class InputV3Component {
   /** Additional text to display */
   @Input() statusText?: string;
 
-  /** Value */
-  @Input() value = '';
+  @Input() ngModelValue: string;
+
+  @Output() ngModelValueChange = new EventEmitter<string>();
 
-  @Output() valueChange = new EventEmitter<Event>();
+  public get classes(): string {
+    return [this.size, this.status].join(' ');
+  }
 
-  public onValueChange(event: Event): void {
-    this.valueChange.emit(event);
+  getStatusText(): string {
+    if (this.statusText) return this.statusText;
+
+    switch (this.status) {
+      case 'success':
+        return `${this.label} valide`;
+      case 'error':
+        return `${this.label} invalide`;
+      default:
+        break;
+    }
   }
 }

src/app/shared/components/v3/input/input.stories.ts

@@ -24,7 +24,6 @@ export const Input: Story = {
   args: {
     id: 'input1',
     label: 'Label',
-    value: '',
   },
 };
 

src/app/shared/components/v3/label-checkbox/label-checkbox.component.html

 <div>
   <div class="row">
-    <app-v3-checkbox [id]="for" [size]="'small'" [checked]="checked" (action)="action.emit($event)" />
+    <app-v3-checkbox
+      [id]="for"
+      [size]="size"
+      [checked]="checked"
+      [indeterminate]="indeterminate"
+      (action)="action.emit($event)"
+    />
     <label [for]="for">{{ label }}</label>
   </div>
 

src/app/shared/components/v3/label-checkbox/label-checkbox.component.scss

@@ -3,6 +3,7 @@
 
 .row {
   display: flex;
+  align-items: center;
   gap: 8px;
   &:nth-child(3) {
     margin-top: 12px;

src/app/shared/components/v3/label-checkbox/label-checkbox.component.ts

@@ -12,8 +12,13 @@ export class LabelCheckboxV3Component {
   /** HTML for that will control checkbox */
   @Input() for: string;
 
+  /** What size should the checkbox be ? */
+  @Input() size?: 'small' | 'medium' = 'small';
+
   @Input() checked: boolean;
 
+  @Input() indeterminate?: boolean;
+
   /** Additional label description */
   @Input() description?: string;
 

src/app/shared/components/v3/tag/tag-item/tag-item.component.scss

@@ -22,8 +22,8 @@ button {
     padding-inline: 12px;
   }
 
-  // STATE EFFECTS / COLORS
-  &.clickable {
+  // COLORS
+  &.white {
     background-color: $white;
     border-color: $grey-5;
     color: $grey-1;
@@ -52,10 +52,18 @@ button {
     }
   }
 
-  &.unclickable {
-    cursor: default;
+  &.red {
+    color: $red-darker;
+    background-color: $red-light;
+  }
+
+  &.black {
+    color: $white;
     background-color: $grey-1;
     border-color: $grey-1;
-    color: $white;
+  }
+
+  &.unclickable {
+    cursor: default;
   }
 }