feat: add gio save bar component

ui-particles-angular/package.json

@@ -18,10 +18,12 @@
   },
   "dependencies": {
     "@angular/animations": "~12.2.0",
+    "@angular/cdk": "~12.2.0",
     "@angular/common": "~12.2.0",
     "@angular/compiler": "~12.2.0",
     "@angular/core": "~12.2.0",
     "@angular/forms": "~12.2.0",
+    "@angular/material": "~12.2.0",
     "@angular/platform-browser": "~12.2.0",
     "@angular/platform-browser-dynamic": "~12.2.0",
     "@angular/router": "~12.2.0",

ui-particles-angular/projects/ui-particles-angular/package.json

@@ -9,8 +9,12 @@
     "tslib": "^2.3.0"
   },
   "peerDependencies": {
+    "@angular/animations": "^12.2.0",
+    "@angular/cdk": "^12.2.0",
     "@angular/common": "^12.2.0",
-    "@angular/core": "^12.2.0"
+    "@angular/core": "^12.2.0",
+    "@angular/forms": "^12.2.0",
+    "@angular/material": "^12.2.0"
   },
   "publishConfig": {
     "registry": "https://npm.pkg.github.com"

ui-particles-angular/projects/ui-particles-angular/src/lib/gio-save-bar/README.stories.mdx

@@ -0,0 +1,10 @@
+import { Meta, ArgsTable, PRIMARY_STORY } from '@storybook/addon-docs';
+
+import { GioSaveBarComponent } from './gio-save-bar.component';
+import * as stories from './gio-save-bar.stories';
+
+<Meta title="Components / Save Bar / README" />
+
+# Gio Save Bar
+
+TODO by :gmaisse-psychédélique:

ui-particles-angular/projects/ui-particles-angular/src/lib/gio-save-bar/gio-save-bar.component.html

@@ -0,0 +1,38 @@
+<!--
+
+    Copyright (C) 2015 The Gravitee team (http://gravitee.io)
+
+    Licensed under the Apache License, Version 2.0 (the "License");
+    you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+
+            http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing, software
+    distributed under the License is distributed on an "AS IS" BASIS,
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+    See the License for the specific language governing permissions and
+    limitations under the License.
+
+-->
+
+<div *ngIf="isOpen()" [@slideUpDown] [@.disabled]="creationMode" class="save-bar" [class.save-bar-sticky]="!creationMode">
+  <mat-card class="save-bar__content" [class.mat-elevation-z3]="creationMode" [class.mat-elevation-z6]="!creationMode">
+    <div class="save-bar__content__label">Please note you have unsaved modifications.</div>
+    <div>
+      <button *ngIf="!creationMode" class="save-bar__content__reset-button" mat-stroked-button type="button" (click)="onResetClicked()">
+        Reset
+      </button>
+      <button
+        class="save-bar__content__submit-button"
+        [class.invalid]="(form && form.invalid) || invalidState"
+        mat-flat-button
+        color="primary"
+        [type]="form ? 'submit' : 'button'"
+        (click)="onSubmitClicked()"
+      >
+        {{ creationMode ? 'Create' : 'Save Changes' }}
+      </button>
+    </div>
+  </mat-card>
+</div>

ui-particles-angular/projects/ui-particles-angular/src/lib/gio-save-bar/gio-save-bar.component.scss

@@ -0,0 +1,51 @@
+@use 'sass:map';
+@use '@angular/material' as mat;
+
+@use '../../scss' as gio;
+
+$typography: map.get(gio.$mat-theme, typography);
+
+.save-bar-sticky {
+  position: sticky;
+  bottom: 0;
+  margin-left: -16px;
+  margin-right: -16px;
+}
+
+.save-bar {
+  margin-top: 32px;
+  height: 50px;
+  z-index: 1000;
+
+  &__content {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 12px 32px;
+    height: 100%;
+
+    &__label {
+      @include mat.typography-level($typography, body-2);
+    }
+
+    &__reset-button {
+      margin-right: 16px;
+    }
+
+    &__submit-button {
+      background-color: mat.get-color-from-palette(gio.$mat-success-palette, 'medium');
+
+      &:hover:enabled {
+        background-color: mat.get-color-from-palette(gio.$mat-success-palette, 'dark');
+      }
+
+      &.invalid {
+        background-color: mat.get-color-from-palette(gio.$mat-success-palette, 'light');
+
+        &:hover:enabled {
+          background-color: mat.get-color-from-palette(gio.$mat-success-palette, 'medium');
+        }
+      }
+    }
+  }
+}

ui-particles-angular/projects/ui-particles-angular/src/lib/gio-save-bar/gio-save-bar.component.ts

@@ -0,0 +1,94 @@
+/*
+ * Copyright (C) 2015 The Gravitee team (http://gravitee.io)
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *         http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { animate, style, transition, trigger } from '@angular/animations';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+
+@Component({
+  selector: 'gio-save-bar',
+  templateUrl: './gio-save-bar.component.html',
+  styleUrls: ['./gio-save-bar.component.scss'],
+  animations: [
+    trigger('slideUpDown', [
+      transition(':enter', [
+        style({ transform: 'translateY(40vh)', opacity: '0' }),
+        animate('300ms cubic-bezier(0.4, 0.0, 0.2, 1)', style({ transform: 'translateY(0)', opacity: '1' })),
+      ]),
+      transition(':leave', [
+        style({ transform: 'translateY(0)', opacity: '1' }),
+        animate('300ms cubic-bezier(0.4, 0.0, 0.2, 1)', style({ transform: 'translateY(40vh)', opacity: '0' })),
+      ]),
+    ]),
+  ],
+})
+export class GioSaveBarComponent {
+  @Input()
+  opened = false;
+
+  /**
+   * When true, the submit button have invalidate display
+   * And on submit clicked the output event is emit on submitInvalidState (and not on submit)
+   */
+  @Input()
+  invalidState?: boolean = false;
+
+  @Input()
+  creationMode = false;
+
+  @Input()
+  form?: FormGroup;
+
+  @Input()
+  formInitialValues?: unknown;
+
+  @Output()
+  resetClicked = new EventEmitter<void>();
+
+  @Output()
+  submitted = new EventEmitter<void>();
+
+  @Output()
+  submittedInvalidState = new EventEmitter();
+
+  isOpen() {
+    if (this.creationMode) {
+      return true;
+    }
+
+    if (this.form) {
+      return this.form.dirty;
+    }
+    return this.opened;
+  }
+
+  onResetClicked(): void {
+    if (this.form) {
+      this.form.reset(this.formInitialValues);
+      this.form.markAsPristine();
+    }
+    this.resetClicked.emit();
+  }
+
+  onSubmitClicked(): void {
+    if ((this.form && this.form.invalid) || this.invalidState) {
+      this.form?.markAllAsTouched();
+      this.submittedInvalidState.emit();
+      return;
+    }
+
+    this.submitted.emit();
+  }
+}

ui-particles-angular/projects/ui-particles-angular/src/lib/gio-save-bar/gio-save-bar.harness.ts

@@ -0,0 +1,52 @@
+/*
+ * Copyright (C) 2015 The Gravitee team (http://gravitee.io)
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *         http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { ComponentHarness } from '@angular/cdk/testing';
+
+export class GioSaveBarHarness extends ComponentHarness {
+  static hostSelector = 'gio-save-bar';
+
+  private readonly resetButtonSelector = '.save-bar__content__reset-button';
+  private readonly submitButtonSelector = '.save-bar__content__submit-button';
+
+  protected getSubmitButton = this.locatorFor(this.submitButtonSelector);
+  protected getResetButton = this.locatorFor(this.resetButtonSelector);
+
+  async isVisible(): Promise<boolean> {
+    const submitButton = await this.locatorForOptional(this.submitButtonSelector)();
+    return submitButton !== null;
+  }
+
+  async clickSubmit(): Promise<void> {
+    const submitButton = await this.getSubmitButton();
+    return submitButton.click();
+  }
+
+  async isSubmitButtonInvalid(): Promise<boolean> {
+    const submitButton = await this.getSubmitButton();
+    return submitButton.hasClass('invalid');
+  }
+
+  async isResetButtonVisible(): Promise<boolean> {
+    const submitButton = await this.locatorForOptional(this.resetButtonSelector)();
+    return submitButton !== null;
+  }
+
+  async clickReset(): Promise<void> {
+    const resetButton = await this.getResetButton();
+    return resetButton.click();
+  }
+}