feat: add gio banner component

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

@@ -0,0 +1,7 @@
+import { Meta, ArgsTable, PRIMARY_STORY } from '@storybook/addon-docs';
+
+<Meta title="Components / Banner / README" />
+
+# Gio Banner
+
+TODO by :gmaisse-psychédélique:

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

@@ -0,0 +1,36 @@
+<!--
+
+    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
+  class="banner"
+  [class.info]="type === 'info'"
+  [class.error]="type === 'error'"
+  [class.warning]="type === 'warning'"
+  [class.success]="type === 'success'"
+>
+  <div class="banner__icon">
+    <div [ngSwitch]="type">
+      <mat-icon *ngSwitchCase="'info'">info</mat-icon>
+      <mat-icon *ngSwitchCase="'error'">error</mat-icon>
+      <mat-icon *ngSwitchCase="'warning'">warning</mat-icon>
+      <mat-icon *ngSwitchCase="'success'">check_circle</mat-icon>
+    </div>
+  </div>
+  <div class="banner__content">
+    <ng-content></ng-content>
+  </div>
+</div>

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

@@ -0,0 +1,72 @@
+/*
+ * 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.
+ */
+@use 'sass:map';
+@use '@angular/material' as mat;
+
+@use '../../scss' as gio;
+
+$background: map-get(gio.$mat-theme, background);
+
+// Map for palette by type
+$types: (
+  error: gio.$mat-error-palette,
+  info: gio.$mat-info-palette,
+  success: gio.$mat-success-palette,
+  warning: gio.$mat-warning-palette,
+);
+
+:host {
+  display: block;
+  margin: 8px 0px;
+}
+
+.banner {
+  padding: 0 16px;
+  display: flex;
+  align-items: center;
+  border-radius: 4px;
+
+  @each $typeName, $typePalette in $types {
+    &.#{$typeName} {
+      color: mat.get-color-from-palette($typePalette, darker);
+      background-color: mat.get-color-from-palette($background, card);
+      border: 1px solid mat.get-color-from-palette($typePalette, medium);
+
+      box-shadow: 8px 0px 0px 0px mat.get-color-from-palette($typePalette, light, 0.12) inset;
+
+      $typeTarget: &; // current css target
+      // when banner is inside mat-card
+      :host-context(.mat-card) {
+        #{$typeTarget} {
+          box-shadow: none;
+          background-color: mat.get-color-from-palette($typePalette, light, 0.12);
+        }
+      }
+    }
+  }
+
+  &__icon {
+    padding-top: 8px;
+    margin-right: 16px;
+    opacity: 0.9;
+  }
+
+  &__content {
+    flex: 1 1 auto;
+    line-height: normal;
+    padding: 8px 0;
+  }
+}

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

@@ -0,0 +1,64 @@
+/*
+ * 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 { Component, Input } from '@angular/core';
+
+export type GioBannerTypes = 'error' | 'info' | 'success' | 'warning';
+
+@Component({
+  selector: 'gio-banner',
+  templateUrl: './gio-banner.component.html',
+  styleUrls: ['./gio-banner.component.scss'],
+})
+export class GioBannerComponent {
+  @Input()
+  type: GioBannerTypes = 'info';
+}
+
+@Component({
+  selector: 'gio-banner-error',
+  templateUrl: './gio-banner.component.html',
+  styleUrls: ['./gio-banner.component.scss'],
+})
+export class GioBannerErrorComponent extends GioBannerComponent {
+  type = 'error' as GioBannerTypes;
+}
+
+@Component({
+  selector: 'gio-banner-info',
+  templateUrl: './gio-banner.component.html',
+  styleUrls: ['./gio-banner.component.scss'],
+})
+export class GioBannerInfoComponent extends GioBannerComponent {
+  type = 'info' as GioBannerTypes;
+}
+
+@Component({
+  selector: 'gio-banner-success',
+  templateUrl: './gio-banner.component.html',
+  styleUrls: ['./gio-banner.component.scss'],
+})
+export class GioBannerSuccessComponent extends GioBannerComponent {
+  type = 'success' as GioBannerTypes;
+}
+
+@Component({
+  selector: 'gio-banner-warning',
+  templateUrl: './gio-banner.component.html',
+  styleUrls: ['./gio-banner.component.scss'],
+})
+export class GioBannerWarningComponent extends GioBannerComponent {
+  type = 'warning' as GioBannerTypes;
+}

ui-particles-angular/projects/ui-particles-angular/src/lib/gio-banner/gio-banner.module.spec.ts

@@ -0,0 +1,37 @@
+/*
+ * 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 { ComponentFixture, TestBed } from '@angular/core/testing';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+
+import { GioBannerComponent } from './gio-banner.component';
+import { GioBannerModule } from './gio-banner.module';
+
+describe('GioBannerComponent', () => {
+  let fixture: ComponentFixture<GioBannerComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [NoopAnimationsModule, GioBannerModule],
+    });
+    fixture = TestBed.createComponent(GioBannerComponent);
+  });
+
+  it('should display error banner', () => {
+    fixture.componentInstance.type = 'error';
+    fixture.detectChanges();
+    expect(fixture.nativeElement.querySelector('.banner.error')).toBeDefined();
+  });
+});

ui-particles-angular/projects/ui-particles-angular/src/lib/gio-banner/gio-banner.module.ts

@@ -0,0 +1,40 @@
+/*
+ * 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 { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { MatIconModule } from '@angular/material/icon';
+
+import {
+  GioBannerComponent,
+  GioBannerErrorComponent,
+  GioBannerInfoComponent,
+  GioBannerSuccessComponent,
+  GioBannerWarningComponent,
+} from './gio-banner.component';
+
+@NgModule({
+  imports: [CommonModule, MatIconModule],
+  declarations: [GioBannerComponent, GioBannerErrorComponent, GioBannerInfoComponent, GioBannerSuccessComponent, GioBannerWarningComponent],
+  exports: [GioBannerComponent, GioBannerErrorComponent, GioBannerInfoComponent, GioBannerSuccessComponent, GioBannerWarningComponent],
+  entryComponents: [
+    GioBannerComponent,
+    GioBannerErrorComponent,
+    GioBannerInfoComponent,
+    GioBannerSuccessComponent,
+    GioBannerWarningComponent,
+  ],
+})
+export class GioBannerModule {}

ui-particles-angular/projects/ui-particles-angular/src/lib/gio-banner/gio-banner.stories.ts

@@ -0,0 +1,81 @@
+/*
+ * 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 { Meta, moduleMetadata } from '@storybook/angular';
+import { Story } from '@storybook/angular/dist/ts3.9/client/preview/types-7-0';
+import { MatCardModule } from '@angular/material/card';
+
+import { GioBannerModule } from './gio-banner.module';
+import { GioBannerComponent } from './gio-banner.component';
+
+export default {
+  title: 'Components / Banner',
+  component: GioBannerComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [GioBannerModule, MatCardModule],
+    }),
+  ],
+  render: () => ({}),
+} as Meta;
+
+export const All: Story = {
+  render: () => ({
+    template: `
+    <gio-banner-error>Error <br> Second line <br> Wow another one</gio-banner-error>
+    <br>
+    <gio-banner-info>This is an info banner!</gio-banner-info>
+    <br>
+    <gio-banner-success>This is a success banner!</gio-banner-success>
+    <br>
+    <gio-banner-warning>This is a warning banner!</gio-banner-warning>
+    `,
+  }),
+};
+
+export const AllInMatCard: Story = {
+  render: () => ({
+    template: `
+    <mat-card>
+      <gio-banner-error>Error <br> Second line <br> Wow another one</gio-banner-error>
+      <br>
+      <gio-banner-info>This is an info banner!</gio-banner-info>
+      <br>
+      <gio-banner-success>This is a success banner!</gio-banner-success>
+      <br>
+      <gio-banner-warning>This is a warning banner!</gio-banner-warning>
+    </mat-card>`,
+  }),
+};
+
+export const AllWithTypeInput: Story = {
+  render: () => ({
+    template: `
+    <gio-banner type="error">Error <br> Second line <br> Wow another one</gio-banner>
+    <br>
+    <gio-banner type="info">This is an info banner!</gio-banner>
+    <br>
+    <gio-banner type="success">This is a success banner!</gio-banner>
+    <br>
+    <gio-banner type="warning">This is a warning banner!</gio-banner>
+    `,
+  }),
+};
+
+export const Default: Story = {
+  render: () => ({
+    template: `<gio-banner>This is an Default banner!</gio-banner>`,
+  }),
+};

ui-particles-angular/projects/ui-particles-angular/src/lib/public-api.ts

@@ -20,3 +20,6 @@
 export * from './gio-save-bar/gio-save-bar.component';
 export * from './gio-save-bar/gio-save-bar.module';
 export * from './gio-save-bar/gio-save-bar.harness';
+
+export * from './gio-banner/gio-banner.component';
+export * from './gio-banner/gio-banner.module';