@testgorilla/tgo-ui 2.10.999 → 2.11.1

package/projects/tgo-canopy-ui/components/accordion/accordion.component.scss

@@ -0,0 +1,284 @@
+@use "../../theme/variables" as *;
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap");
+
+$according-side-padding: 32px;
+
+.flex-center {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+:host {
+  ::ng-deep {
+    .mat-expansion-panel-body {
+      background: $tgo-grey;
+      border-radius: 8px;
+      width: calc(100% - $according-side-padding);
+      padding: 0;
+      margin: 0 auto;
+    }
+
+    .mat-expansion-indicator::after {
+      color: $tgo-black !important;
+      margin-top: -6px;
+    }
+  }
+}
+
+.mat-expansion-panel {
+  box-shadow: unset !important;
+  background: transparent;
+}
+
+.accordion-wrapper {
+  &.disabled {
+    opacity: 0.5;
+    pointer-events: none;
+  }
+}
+
+.mat-expansion-panel-header-description {
+  justify-content: end;
+  margin: 0 16px 0 8px;
+
+  .accordion-actions {
+    @extend .flex-center;
+  }
+}
+
+
+.mat-expansion-panel-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 22px 12px 16px;
+  height: 48px !important;
+  border-radius: 8px;
+  z-index: 1;
+  border: 1px solid transparent;
+
+  &:focus {
+    border: 1px dashed $tgo-dark !important;
+  }
+
+  &:hover {
+    background: $tgo-light !important;
+  }
+
+  .accordion-label {
+    @extend .flex-center;
+    font-size: 14px;
+    font-weight: bold;
+    gap: 8px;
+  }
+}
+
+::ng-deep .mat-mdc-tooltip {
+  background-color: $tgo-petrol-60w;
+  font-family: "Open Sans", serif;
+  font-weight: normal;
+  font-size: 12px;
+  border-radius: 4px;
+  overflow: visible;
+  max-width: 248px;
+  padding: 6px 2px;
+  --mdc-plain-tooltip-container-color: none;
+  --mdc-plain-tooltip-supporting-text-color: $tgo-black;
+}
+
+.accordion-wrapper {
+
+  &[theme="dark"], &[theme="light"] {
+    position: relative;
+    border-radius: 10px;
+
+    .mat-expansion-panel-header {
+      border: unset !important;
+
+      &:hover {
+        background: transparent !important;
+      }
+    }
+
+    &.standard {
+      .mat-expansion-panel {
+        &:hover {
+          box-shadow: $box-shadow-hover-state;
+        }
+        ::ng-deep.mat-expansion-panel-body {
+          margin: 0 16px 12px 16px;
+        }
+      }
+    }
+
+    .mat-expansion-panel {
+      background: $tgo-white;
+      border-radius: 10px;
+      border: 1px solid $grayscale-40;
+
+      &:hover {
+        outline: 1px solid $black;
+        border-color: $black;
+      }
+
+      ::ng-deep.mat-expansion-panel-body {
+        background-color: $grayscale-10;
+      }
+
+      * {
+        color: $black;
+        font-weight: 400;
+      }
+
+      ::ng-deep.mat-expansion-indicator::after {
+        color: $black !important;
+      }
+    }
+
+    &:hover {
+      .accordion-label {
+        font-weight: bold !important;
+        text-decoration: underline;
+      }
+    }
+
+    &:focus {
+      outline: unset !important;
+      border-color: unset !important;
+
+      &:after {
+        content: "";
+        position: absolute;
+        top: -3px;
+        left: -3px;
+        display: flex;
+        width: calc(100% + 6px);
+        height: calc(100% + 6px);
+        border: 1px dashed $grayscale-40;
+        border-radius: 10px;
+      }
+
+      .accordion-label {
+        font-weight: bold !important;
+        text-decoration: underline;
+      }
+    }
+    &.filter {
+      .mat-expansion-panel-header {
+        padding-left: 2px;
+        border: 1px dashed transparent!important;
+        border-radius: 10px;
+        box-shadow: none!important;
+      }
+
+      &:focus {
+        &:after {
+          display: none;
+        }
+
+        .mat-expansion-panel-header {
+          border: 1px dashed $grayscale-40!important;
+        }
+      }
+
+      ::ng-deep.mat-expansion-panel-header-description {
+        margin-left: 0;
+      }
+
+      ::ng-deep.mat-expansion-panel-body {
+        background-color: transparent!important;
+        margin: 0;
+        width: 100%;
+
+        div {
+          padding: 0!important;
+        }
+      }
+
+      .mat-expansion-panel {
+        border: unset;
+
+        &:hover {
+          border: unset;
+          outline: unset;
+        }
+      }
+    }
+
+    &.table {
+      .mat-expansion-panel {
+        border-radius: 0;
+        border: unset;
+        outline: unset;
+      }
+
+      &:after {
+        display: none;
+      }
+
+      .mat-expansion-panel-header {
+        border-radius: 0;
+        box-shadow: none!important;
+        height: 64px!important;
+
+        &:hover {
+          background: $brand-10!important;
+        }
+      }
+
+      .accordion-label {
+        font-weight: 400!important;
+        text-decoration: unset;
+      }
+
+      .table-container {
+        display: flex;
+        flex-direction: row;
+      }
+
+      ::ng-deep.mat-expansion-indicator {
+        display: none;
+      }
+
+      .mat-expansion-panel-header {
+        padding: 12px 24px;
+      }
+
+      ::ng-deep.mat-expansion-panel-body {
+        background-color: transparent!important;
+        margin: 0;
+        width: 100%;
+
+        div {
+          padding: 0!important;
+        }
+      }
+
+      ui-icon {
+        border: 1px dashed transparent;
+
+        ::ng-deep mat-icon {
+          transition: transform 0.3s;
+        }
+        margin-right: 16px;
+
+        &.open {
+         ::ng-deep mat-icon {
+            transform: rotateZ(180deg);
+          }
+        }
+      }
+
+      &:focus {
+        .mat-expansion-panel {
+
+        }
+        ui-icon {
+          border-radius: 100%;
+          border: 1px dashed $grayscale-40;
+        }
+      }
+    }
+  }
+}

package/projects/tgo-canopy-ui/components/accordion/accordion.component.spec.ts

@@ -0,0 +1,37 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AccordionComponent } from './accordion.component';
+
+describe('AccordionComponent', () => {
+  let component: AccordionComponent;
+  let fixture: ComponentFixture<AccordionComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [AccordionComponent]
+    });
+    fixture = TestBed.createComponent(AccordionComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should emit opened event when toggle is called with true', () => {
+    const spy = jest.spyOn(component.opened, 'emit');
+    //@ts-expect-error
+    component.toggle(true);
+    expect(component.open).toBeTruthy();
+    expect(spy).toHaveBeenCalled();
+  });
+
+  it('should emit closed event when toggle is called with false', () => {
+    const spy = jest.spyOn(component.closed, 'emit');
+    //@ts-expect-error
+    component.toggle(false);
+    expect(component.open).toBeFalsy();
+    expect(spy).toHaveBeenCalled();
+  });
+});

package/projects/tgo-canopy-ui/components/accordion/accordion.component.stories.ts

@@ -0,0 +1,176 @@
+import { Meta, moduleMetadata, Story } from '@storybook/angular';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { IconComponentModule } from '../icon/icon.component.module';
+import { AccordionComponent } from './accordion.component';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatExpansionModule } from '@angular/material/expansion';
+import { transformTheme } from '../../utils/transform-theme';
+import { ButtonComponentModule } from '../button/button.component.module';
+import { RadioButtonComponentModule } from '../radio-button/radio-button.component.module';
+
+export default {
+  title: 'Accordion',
+  component: AccordionComponent,
+  decorators: [
+    moduleMetadata({
+      declarations: [AccordionComponent],
+      imports: [IconComponentModule, BrowserAnimationsModule, MatTooltipModule, MatExpansionModule, ButtonComponentModule, RadioButtonComponentModule],
+    }),
+  ],
+} as Meta;
+
+const accordionText = `Accordion is a convenient design element that allows users to organize and structure information on a web page. Comprising headers and corresponding content blocks, the accordion enables the hiding or displaying of additional information with minimal use of space.
+
+The application of an accordion is particularly effective when dealing with a substantial amount of content while maintaining clarity and ease of perception. Users can easily toggle between sections by activating the headers, effectively compartmentalizing information on the page.
+
+Stylish and intuitive, the accordion seamlessly integrates into modern web design, creating an interactive and easily navigable user experience`;
+
+const Template: Story = (args, { globals: { theme } }) => {
+  const _theme = transformTheme(theme);
+  return {
+    props: {
+      applicationTheme: _theme,
+      ...args,
+    },
+  };
+};
+
+
+const excludeParameter = {
+  design: {
+    name: 'Figma design',
+    type: 'figma',
+    url: 'https://www.figma.com/file/FHZJ7ViJv6msJA5lJvPRIG/Component-library?type=design&node-id=12992-58564&mode=design&t=au3JsB1DempLnih9-4',
+  },
+};
+
+export const Default: Story = {
+  render: (args, { globals: { theme } }) => {
+    const _theme = transformTheme(theme);
+    return {
+      template: `
+        <ui-accordion label="Label" applicationTheme="${_theme}">
+            <div style="padding: 20px">
+                 ${accordionText}
+            </div>
+        </ui-accordion>
+      `,
+    };
+  },
+} as Story;
+
+Default.parameters = {
+  ...excludeParameter,
+};
+
+export const Disabled: Story = {
+  render: (args, { globals: { theme } }) => {
+    const _theme = transformTheme(theme);
+    return {
+      template: `
+        <ui-accordion label="Label" disabled="true" open="true"  applicationTheme="${_theme}">
+            <div style="padding: 20px">
+                 ${accordionText}
+            </div>
+        </ui-accordion>
+      `,
+    };
+  },
+} as Story;
+
+Disabled.parameters = {
+  ...excludeParameter,
+};
+
+export const WithCustomActions: Story = {
+  render: (args, { globals: { theme } }) => {
+    const _theme = transformTheme(theme);
+    return {
+      template: `
+        <ui-accordion label="Label" applicationTheme="${_theme}">
+        <div actions><ui-icon applicationTheme="${_theme}" name="${_theme === 'classic' ? 'Premium' : 'Premium-circle'}"></ui-icon></div>
+            <div style="padding: 20px">
+                 ${accordionText}
+            </div>
+        </ui-accordion>
+      `,
+    };
+  },
+} as Story;
+
+WithCustomActions.parameters = {
+  ...excludeParameter,
+};
+
+export const Premium: Story = {
+  render: (args, { globals: { theme } }) => {
+    const _theme = transformTheme(theme);
+    return {
+      template: `
+        <ui-accordion label="Label" [showPremiumIcon]="true" [premiumTooltipText]="'Buy Premium'" applicationTheme="${_theme}">
+        </ui-accordion>
+      `,
+    };
+  },
+} as Story;
+
+Premium.parameters = {
+  ...excludeParameter,
+};
+
+export const RebrandFilter: Story = {
+  render: (args, { globals: { theme } }) => {
+    const _theme = transformTheme(theme);
+    return {
+      template: `
+        <ui-accordion label="Label" labelIcon="Info" variant="filter" [premiumTooltipText]="'Label Icon'" applicationTheme="dark">
+        <div [style]="'display: flex; gap: 10px; flex-direction: column'">
+            <ui-radio-button applicationTheme="${_theme}" [label]="'Option'"></ui-radio-button>
+            <ui-radio-button applicationTheme="${_theme}" [label]="'Option 1'"></ui-radio-button>
+            <ui-radio-button applicationTheme="${_theme}" [label]="'Option 2'"></ui-radio-button>
+            <ui-radio-button applicationTheme="${_theme}" [label]="'Option 3'"></ui-radio-button>
+        </div>
+        </ui-accordion>
+      `,
+    };
+  },
+} as Story;
+
+RebrandFilter.parameters = {
+  ...excludeParameter,
+};
+
+
+export const RebrandTable: Story = {
+  render: (args, { globals: { theme } }) => {
+    const _theme = transformTheme(theme);
+    return {
+      template: `
+        <ui-accordion label="Label" labelIcon="Info" variant="table" [premiumTooltipText]="'Label Icon'" applicationTheme="dark">
+          <div actions style="display: flex; width: 300px;justify-content: space-between; align-items: center">
+            <div>Column info</div>
+            <ui-icon size="24" applicationTheme="${_theme}" name="Delete"></ui-icon>
+          </div>
+          <div [style]="'display: flex; flex-direction: column'">
+          <div style="border-top: 1px solid #D3D3D3; width: 100%; height: 64px; display: flex; align-items: center;">
+            <div style="display: flex;gap: 8px; align-items: center; margin-left: 60px">
+              <ui-icon size="24" applicationTheme="${_theme}" name="Document"></ui-icon>
+              <div>Iternal Label</div>
+            </div>
+          </div>
+          <div style="border-top: 1px solid #D3D3D3; width: 100%; height: 64px; display: flex; align-items: center;">
+            <div style="display: flex;gap: 8px; align-items: center; margin-left: 60px">
+              <ui-icon size="24" applicationTheme="${_theme}" name="Document"></ui-icon>
+              <div>Iternal Label</div>
+            </div>
+          </div>
+          </div>
+        </ui-accordion>
+      `,
+    };
+  },
+} as Story;
+
+RebrandTable.parameters = {
+  ...excludeParameter,
+};

package/projects/tgo-canopy-ui/components/accordion/accordion.component.ts

@@ -0,0 +1,97 @@
+import { booleanAttribute, Component, EventEmitter, Inject, Input, Optional, Output } from '@angular/core';
+import { ApplicationTheme } from '../../models/application-theme.model';
+import { AccordionVariant } from './accordion.model';
+import { IconName } from '../icon/icon.model';
+
+@Component({
+  selector: 'ui-accordion',
+  templateUrl: './accordion.component.html',
+  styleUrls: ['./accordion.component.scss'],
+})
+export class AccordionComponent {
+  /**
+   * The label displayed for the accordion.
+   * @type {string}
+   * @required
+   * @memberof AccordionComponent
+   */
+  @Input({ required: true }) label: string;
+
+  /**
+   * Determines whether the accordion is initially open.
+   * @type {boolean}
+   * @default false
+   * @memberof AccordionComponent
+   */
+  @Input({ transform: booleanAttribute }) open = false;
+
+  /**
+   * Disables the accordion if set to true.
+   * @type {boolean}
+   * @default false
+   * @memberof AccordionComponent
+   */
+  @Input({ transform: booleanAttribute }) disabled = false;
+
+  /**
+   * Indicates whether to show a premium icon.
+   * @type {boolean}
+   * @default false
+   * @memberof AccordionComponent
+   */
+  @Input({ transform: booleanAttribute }) showPremiumIcon = false;
+
+  /**
+   * The tooltip text for the premium icon.
+   * @type {string}
+   * @default ''
+   * @memberof AccordionComponent
+   */
+  @Input() premiumTooltipText = '';
+
+  /**
+   *
+   * Defines the application theme where accordion is used
+   *
+   * @type {ApplicationTheme}
+   * @memberof AccordionComponent
+   */
+  @Input() applicationTheme: ApplicationTheme = 'light';
+
+  /**
+   *
+   * Changed premium icon on this icon
+   *
+   * @type {IconName}
+   * @memberof AccordionComponent
+   */
+  @Input() labelIcon: IconName;
+
+  /**
+   *
+   * Select accordion variant. Don`t work on Classic theme
+   *
+   * @type {AccordionVariant}
+   * @memberof AccordionComponent
+   */
+  @Input() variant: AccordionVariant = 'standard';
+
+  @Output() closed = new EventEmitter<void>();
+  @Output() opened = new EventEmitter<void>();
+
+  constructor(@Optional() @Inject('CANOPYUI_DEFAULT_APPLICATION_THEME') private readonly defaultAppTheme: ApplicationTheme) {
+    if (defaultAppTheme) {
+      this.applicationTheme = defaultAppTheme;
+    }
+  }
+
+  protected toggle(open: boolean): void {
+    this.open = open;
+
+    if (this.open) {
+      this.opened.emit();
+    } else {
+      this.closed.emit();
+    }
+  }
+}

package/projects/tgo-canopy-ui/components/alert-banner/__snapshots__/alert-banner.component.spec.ts.snap

@@ -0,0 +1,42 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AlertBannerComponent should render correctly 1`] = `
+<ui-alert-banner
+  _message=""
+  alertType={[Function String]}
+  alertVariant={[Function String]}
+  applicationTheme={[Function String]}
+  cssClass={[Function String]}
+  defaultAppTheme="null"
+  domSanitizer={[Function _DomSanitizerImpl]}
+  fixed={[Function Boolean]}
+  fullWidth={[Function Boolean]}
+  iconName={[Function String]}
+  includeDismissButton={[Function Boolean]}
+  linkTarget={[Function String]}
+  linkText=""
+  position={[Function String]}
+  shadow="false"
+  visible={[Function Boolean]}
+>
+  <div
+    class="alert-container ng-trigger ng-trigger-openClose success static full-width banner ng-animating"
+    theme="light"
+  >
+    <div
+      class="alert-text"
+    >
+      <ui-icon
+        class="left-icon"
+        size="24"
+      />
+      <span />
+    </div>
+    <ui-icon
+      applicationtheme="light"
+      class="right-icon"
+      style=""
+    />
+  </div>
+</ui-alert-banner>
+`;

package/projects/tgo-canopy-ui/components/alert-banner/alert-banner.component.html

@@ -0,0 +1,22 @@
+<div [ngClass]="cssClass" [@openClose] *ngIf="visible" class="alert-container" [attr.theme]="applicationTheme" [class.shadow]="alertVariant === 'callout' && shadow ? true : false">
+  <div class="alert-text">
+    <ui-icon class="left-icon" [name]="iconName" size="24" [applicationTheme]="applicationTheme"></ui-icon>
+    <span [innerHTML]="_message"></span>
+    <a *ngIf="!!linkText" [target]="linkTarget" [href]="linkUrl">{{ linkText }}</a>
+  </div>
+  <ui-button
+    *ngIf="includeDismissButton && applicationTheme === 'classic'"
+    variant="text"
+    [justIcon]="true"
+    class="close"
+    iconName="Close"
+    (buttonClickEvent)="dismissClick()"
+  ></ui-button>
+  <ui-icon
+    class="right-icon"
+    *ngIf="includeDismissButton && applicationTheme !== 'classic'"
+    applicationTheme='light'
+    [name]="'Close'"
+    (click)="dismissClick()"
+  ></ui-icon>
+</div>

package/projects/tgo-canopy-ui/components/alert-banner/alert-banner.component.module.ts

@@ -0,0 +1,12 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { ButtonComponentModule } from '../button/button.component.module';
+import { IconComponentModule } from '../icon/icon.component.module';
+import { AlertBannerComponent } from './alert-banner.component';
+
+@NgModule({
+  declarations: [AlertBannerComponent],
+  imports: [CommonModule, ButtonComponentModule, IconComponentModule],
+  exports: [AlertBannerComponent],
+})
+export class AlertBannerComponentModule {}