@testgorilla/tgo-ui 2.10.1 → 2.10.2

package/projects/tgo-canopy-ui/__mocks__/alert-bar.mock.ts

@@ -1,18 +0,0 @@
-export const AlertBarsMock = {
-  type: {
-    success: 'success',
-    error: 'error',
-    info: 'info',
-    warning: 'warning',
-  },
-  position: {
-    static: 'static',
-    fixed: 'fixed',
-  },
-  icon: {
-    info: 'Info',
-    warning: 'Warning',
-    error: 'Error',
-  },
-  fullWidth: 'full-width',
-};

package/projects/tgo-canopy-ui/__mocks__/button.mock.ts

@@ -1,34 +0,0 @@
-export const ButtonMock = {
-  size: {
-    small: 'small',
-    big: 'big',
-  },
-  type: {
-    primary: 'primary',
-    secondary: 'secondary',
-    outlined: 'outlined',
-    destructive: 'destructive',
-    tertiary: 'tertiary',
-    link: 'link',
-    tab: 'tab',
-    text: 'text',
-    menuCell: 'menuCell',
-    menuTrigger: 'menuTrigger',
-  },
-  iconPosition: {
-    left: 'left',
-    right: 'right',
-  },
-  justIcon: {
-    cssClass: 'only-icon',
-  },
-  icon: {
-    cssClass: 'icon',
-  },
-  loading: {
-    cssClass: 'spinner-wrapper',
-  },
-  fullWidth: {
-    cssClass: 'full-width',
-  },
-};

package/projects/tgo-canopy-ui/__mocks__/field.mock.ts

@@ -1,10 +0,0 @@
-export const FieldMock = {
-  type: {
-    text: 'text',
-    password: 'password',
-    email: 'email',
-    numberType: 'number',
-    tel: 'tel',
-    search: 'search',
-  },
-};

package/projects/tgo-canopy-ui/__mocks__/icon.mock.ts

@@ -1,14 +0,0 @@
-export const IconMock = {
-  size: {
-    small: 'size-16',
-    big: 'size-24',
-  },
-  cssClass: 'testing',
-  color: {
-    black: 'black',
-    dark: 'dark',
-    petrol: 'petrol',
-    teal: 'teal',
-    white: 'white',
-  }
-};

package/projects/tgo-canopy-ui/__mocks__/tag.mock.ts

@@ -1,9 +0,0 @@
-export const TagMock = {
-  color: {
-    teal: 'teal',
-    petrol: 'petrol',
-    grey: 'grey',
-    red: 'red',
-    gold: 'gold',
-  },
-};

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

@@ -1,35 +0,0 @@
-<mat-accordion class="accordion-wrapper" [class.disabled]="disabled" [ngClass]="variant" [tabIndex]="0" [attr.theme]="applicationTheme">
-  <mat-expansion-panel [expanded]="open"
-                       (opened)="toggle(true)"
-                       (closed)="toggle(false)">
-    <mat-expansion-panel-header >
-      <mat-panel-title>
-        <div *ngIf="variant === 'table' && applicationTheme !== 'classic'; else default" class="table-container">
-          <ui-icon [size]="'24'" [ngClass]="{ open }" [name]="'Arrow-chevron-down-filled'"></ui-icon>
-          <div class="accordion-label">
-            {{ label }}
-          </div>
-        </div>
-        <ng-template #default>
-          <div class="accordion-label">
-            {{ label }}
-            <ng-content select="[subHeader]"></ng-content>
-            <ui-icon
-              [matTooltipClass]="applicationTheme"
-              [matTooltip]="premiumTooltipText"
-              [applicationTheme]="applicationTheme"
-              [name]="labelIcon ? labelIcon : applicationTheme === 'classic' ? 'Premium' : 'Premium-circle-in-line'"
-              *ngIf="showPremiumIcon || labelIcon"
-            ></ui-icon>
-          </div>
-        </ng-template>
-      </mat-panel-title>
-      <mat-panel-description>
-        <div class="accordion-actions">
-          <ng-content select="[actions]"></ng-content>
-        </div>
-      </mat-panel-description>
-    </mat-expansion-panel-header>
-    <ng-content></ng-content>
-  </mat-expansion-panel>
-</mat-accordion>

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

@@ -1,26 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { AccordionComponent } from './accordion.component';
-import { IconComponentModule } from "../icon/icon.component.module";
-import { ButtonComponentModule } from "../button/button.component.module";
-import { MatTooltipModule } from "@angular/material/tooltip";
-import { MatExpansionModule } from "@angular/material/expansion";
-
-
-
-@NgModule({
-    declarations: [
-        AccordionComponent
-    ],
-    exports: [
-        AccordionComponent
-    ],
-    imports: [
-        CommonModule,
-        IconComponentModule,
-        ButtonComponentModule,
-        MatTooltipModule,
-        MatExpansionModule
-    ]
-})
-export class AccordionComponentModule { }

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

@@ -1,284 +0,0 @@
-@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

@@ -1,37 +0,0 @@
-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

@@ -1,176 +0,0 @@
-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,
-};