@sarasanalytics-com/design-system 0.0.41 → 0.0.43

package/package.json

@@ -1,25 +1,80 @@
 {
   "name": "@sarasanalytics-com/design-system",
-  "version": "0.0.41",
-  "peerDependencies": {
-    "@angular/common": "^17.2.0",
-    "@angular/core": "^17.2.0"
+  "version": "0.0.43",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build",
+    "watch": "ng build --watch --configuration development",
+    "test": "ng test",
+    "start-storybook": "ng run sadlc:storybook",
+    "build-storybook": "ng run sadlc:build-storybook",
+    "chromatic": "npx chromatic --project-token chpt_c15abbd7dcf38ca",
+    "generate-public-api": "node generate-public-api.js",
+    "build-component-library": "ng build component-library && npm run copy-styles",
+    "lint": "ng lint",
+    "copy-styles": "copyfiles -u 1 src/styles.css dist/component-library/styles"
   },
+  "private": false,
   "dependencies": {
-    "tslib": "^2.3.0"
+    "@angular/animations": "^17.1.0",
+    "@angular/cdk": "^17.3.6",
+    "@angular/common": "^17.1.0",
+    "@angular/compiler": "^17.1.0",
+    "@angular/core": "^17.1.0",
+    "@angular/forms": "^17.1.0",
+    "@angular/material": "^17.3.6",
+    "@angular/platform-browser": "^17.1.0",
+    "@angular/platform-browser-dynamic": "^17.1.0",
+    "@angular/router": "^17.1.0",
+    "@fontsource/material-icons": "^5.0.18",
+    "@fontsource/roboto": "^5.0.13",
+    "@material-ui/core": "^4.12.4",
+    "@mui/icons-material": "^5.15.17",
+    "@mui/material": "^5.15.17",
+    "@ng-select/ng-select": "^12.0.7",
+    "@ngx-formly/core": "^6.3.0",
+    "ag-grid-angular": "^31.2.0",
+    "ag-grid-community": "^31.2.0",
+    "rxjs": "~7.8.0",
+    "tslib": "^2.3.0",
+    "zone.js": "~0.14.3"
   },
-  "sideEffects": false,
-  "module": "fesm2022/sarasanalytics-com-design-system.mjs",
-  "typings": "index.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./index.d.ts",
-      "esm2022": "./esm2022/sarasanalytics-com-design-system.mjs",
-      "esm": "./esm2022/sarasanalytics-com-design-system.mjs",
-      "default": "./fesm2022/sarasanalytics-com-design-system.mjs"
-    }
+  "devDependencies": {
+    "@angular-devkit/build-angular": "^17.1.3",
+    "@angular-eslint/builder": "17.3.0",
+    "@angular-eslint/eslint-plugin": "17.3.0",
+    "@angular-eslint/eslint-plugin-template": "17.3.0",
+    "@angular-eslint/schematics": "17.3.0",
+    "@angular-eslint/template-parser": "17.3.0",
+    "@angular/cli": "^17.1.3",
+    "@angular/compiler-cli": "^17.1.0",
+    "@chromatic-com/storybook": "^1.2.18",
+    "@compodoc/compodoc": "^1.1.23",
+    "@mdx-js/react": "^3.0.1",
+    "@storybook/addon-actions": "^8.1.4",
+    "@storybook/addon-docs": "^8.1.3",
+    "@storybook/addon-essentials": "^8.0.0",
+    "@storybook/addon-interactions": "^8.0.0",
+    "@storybook/addon-links": "^8.0.0",
+    "@storybook/angular": "^8.0.0",
+    "@storybook/blocks": "^8.0.0",
+    "@storybook/test": "^8.0.0",
+    "@types/jasmine": "~5.1.0",
+    "@typescript-eslint/eslint-plugin": "^7.2.0",
+    "@typescript-eslint/parser": "^7.2.0",
+    "chromatic": "^11.0.8",
+    "copyfiles": "^2.4.1",
+    "eslint": "^8.57.0",
+    "eslint-plugin-angular": "^4.1.0",
+    "jasmine-core": "~5.1.0",
+    "karma": "~6.4.0",
+    "karma-chrome-launcher": "~3.2.0",
+    "karma-coverage": "~2.2.0",
+    "karma-jasmine": "~5.1.0",
+    "karma-jasmine-html-reporter": "~2.1.0",
+    "ng-packagr": "^17.2.0",
+    "storybook": "^8.0.0",
+    "typescript": "~5.3.2"
   }
 }

package/projects/component-library/README.md

@@ -0,0 +1,24 @@
+# TestLibrary
+
+This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 17.2.0.
+
+## Code scaffolding
+
+Run `ng generate component component-name --project component-library` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project component-library`.
+> Note: Don't forget to add `--project component-library` or else it will be added to the default project in your `angular.json` file. 
+
+## Build
+
+Run `ng build component-library` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Publishing
+
+After building your library with `ng build component-library`, go to the dist folder `cd dist/component-library` and run `npm publish`.
+
+## Running unit tests
+
+Run `ng test component-library` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.

package/projects/component-library/ng-package.json

@@ -0,0 +1,8 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/component-library",
+  "assets": ["./assets"],
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}

package/projects/component-library/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "@sarasanalytics-com/design-system",
+  "version": "0.0.43",
+  "peerDependencies": {
+    "@angular/common": "^17.2.0",
+    "@angular/core": "^17.2.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false
+}

package/projects/component-library/src/interfaces/avatar-interface.ts

@@ -0,0 +1,6 @@
+export interface AvatarInterface {
+    id: string | number,
+    size: string,
+    imagePath: string,
+    altText: string
+}

package/projects/component-library/src/interfaces/button-interface.ts

@@ -0,0 +1,37 @@
+export interface ButtonInterface {
+    id: string | number,
+    text: string,
+    type: string,
+    size: ButtonSize,
+    state: string,
+    imagePath?: string,
+    iconPosition?: ButtonIconPosition,
+    href?: string,
+    hrefTarget?: string,
+    isSubmit?: boolean,
+}
+
+export const buttonSizes = [
+    'small', 'medium', 'large'
+] as const;
+
+type PredefinedButtonSizes = typeof buttonSizes[number];
+
+export type ButtonSize = PredefinedButtonSizes | string;
+
+export const buttonPosition = [
+    'left', 'right', 'both'
+] as const;
+
+type PredefinedButtonPositions = typeof buttonPosition[number]
+
+export type ButtonIconPosition = PredefinedButtonPositions | string;
+
+
+export const buttonType = [
+    'primary', 'outline', 'transparent'
+] as const;
+
+type PredefinedButtonType = typeof buttonType[number]
+
+export type ButtonType = PredefinedButtonType | string;

package/{interfaces/card-carousel-interface.d.ts → projects/component-library/src/interfaces/card-carousel-interface.ts}

@@ -1,4 +1,5 @@
 import { IconName } from "./icon-interface";
+
 export interface CardCarousel {
     id: number;
     avatarIcon: IconName;
@@ -6,4 +7,4 @@ export interface CardCarousel {
     subtitle: string;
     logoIcon: IconName;
     body: string;
-}
+}

package/projects/component-library/src/interfaces/chip-interface.ts

@@ -0,0 +1,11 @@
+export interface ChipInterface {
+    id: string | number,
+    text: string,
+    type: string,
+    state: string,
+    filling: string,
+    iconPosition?: string,
+    iconPath?: string,
+    largeStateIcon?: string,
+    largeStateText?: string
+}

package/projects/component-library/src/interfaces/grid-interface.ts

@@ -0,0 +1,24 @@
+import { ButtonInterface } from "./button-interface";
+import { ChipInterface } from "./chip-interface";
+import { AvatarInterface } from "./avatar-interface";
+export interface GridInterface {
+  cellType: string,
+  viewText: boolean,
+  viewLeadingIcon: boolean,
+  viewTrailingIcon: boolean,
+  viewButton: boolean,
+  viewChip: boolean,
+  viewAvatar: boolean,
+  iconPath?: string,
+  chipConfig?: ChipInterface[],
+  buttonConfig?: ButtonInterface,
+  avatarConfig?: AvatarInterface,
+  text?: string | number,
+  subText?: string | number,
+  interactiveLink?: string,
+  interactiveLinkTarget?: string,
+  chipClicked?(evt: any): any,
+  linkClicked?(evt: any): any,
+  buttonClicked?(evt: any): any,
+  avatarClicked?(evt: any): any
+}

package/projects/component-library/src/interfaces/icon-interface.ts

@@ -0,0 +1,21 @@
+export const iconNames = [
+    'analysis', 'arrowRightOutlined', 'avatar',
+    'businessStatsFilled', 'chatHelpOutlined', 'checkCircleFilled',
+    'checkCircleOutlined', 'checkOutlined', 'circleFilled',
+    'closeBlueOutlined', 'closeCircleFilled', 'closeOutlined',
+    'doubleDownOutlined', 'eyeFilled',
+    'eyeOutlined', 'formDetailsOutlined', 'gridViewOutlined',
+    'homeOutlined', 'infoCircleOutlined', 'infoTriangleFilled',
+    'infoTriangleOutlined', 'innosupps', 'locationOutlined',
+    'mailOutlined', 'multiConnectionHub', 'personOutlined',
+    'rightChevronOutlined', 'sarasWhite', 'settingsOutlined',
+    'sourcesOutlined', 'targetScanOutlined', 'upwardTriangleFilled',
+    'headsetOutlined', 'sarasFullLogo', 'leftChevronCircle', 'rightChevronCircle', 'errorCircleOutlined',
+    'errorCrossOutlined', 'downChevronOutlined'
+] as const;
+
+// Define a type for the predefined icon names
+type PredefinedIconName = typeof iconNames[number];
+
+// Define IconName as a union of PredefinedIconName and string
+export type IconName = PredefinedIconName | string;

package/projects/component-library/src/interfaces/select-interface.ts

@@ -0,0 +1,20 @@
+import { FormlyFieldProps } from "@ngx-formly/core"
+interface SelectSubInterface {
+    label: string,
+    supportText: string,
+    dropIcon: string,
+    dropIconPosition: string,
+    multiple: boolean,
+    iconPath: string,
+    type: string,
+    text?: string,
+    state: string,
+    filling: string,
+    iconPosition: string,
+}
+
+export interface SelectInterface extends FormlyFieldProps {
+    options: any,
+    disabled: boolean,
+    params: SelectSubInterface
+}

package/projects/component-library/src/interfaces/tab-interface.ts

@@ -0,0 +1,6 @@
+export interface TabInterface {
+    tabName: string,
+    tabIcon?: string,
+    iconPosition?: string,
+    badgeContent?: string,
+}

package/{interfaces/toast-interface.d.ts → projects/component-library/src/interfaces/toast-interface.ts}

@@ -9,4 +9,4 @@ export interface IToast {
     closable?: boolean;
     filled?: boolean;
     width?: number | string;
-}
+}

package/projects/component-library/src/lib/accordion/accordion.component.css

@@ -0,0 +1,188 @@
+.accordion-cards-container {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, 37.875rem);
+    gap: 1.75rem 2rem;
+    max-width: -webkit-fill-available;
+}
+
+.advancedAccordion .accordion-cards-container {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, 37.6rem);
+    gap: 1.75rem 2rem;
+    max-width: -webkit-fill-available;
+}
+
+.accordion-container .panel-title {
+    color: var(--text-highemphasis, #1C1B20);
+    font-family: var(--font-family, Roboto);
+    font-size: var(--small-16px);
+    font-style: normal;
+    font-weight: 400;
+    line-height: var(--medium-24px);
+    letter-spacing: 0.5px;
+}
+
+.panel-container {
+    display: flex;
+    gap: var(--small-8px, 8px);
+}
+
+.tooltip-icon {
+    display: flex;
+    align-items: center;
+}
+
+::ng-deep .accordion-container.mat-accordion>.mat-expansion-panel-spacing:last-child,
+.mat-accordion>*:last-child:not(.mat-expansion-panel) .mat-expansion-panel-spacing {
+    width: -webkit-fill-available;
+    display: flex;
+    flex-direction: column;
+}
+
+::ng-deep .accordion-container .mat-expansion-panel-body {
+    display: flex;
+    flex-direction: column;
+    gap: var(--medium-20px);
+}
+
+::ng-deep .accordion-container .mat-expansion-panel-header {
+    display: flex;
+    height: var(--large-56px, 56px);
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--small-16px);
+    flex-shrink: 0;
+}
+
+::ng-deep .card-selected .sa-card-accordion-wrapper {
+    border-radius: var(--small-4px, 4px);
+    border: 1px solid var(--primary-500);
+    background: var(--structural-white);
+}
+
+.accordion-container .custom-divider {
+    width: 100%;
+    height: 0.063rem;
+    background-color: var(--grey-100);
+}
+
+.accordion-container .chip {
+    background-color: red;
+}
+
+::ng-deep.accordion-container .panel-container .small {
+    --chip-height: var(--medium-24px);
+}
+
+.advancedAccordion.mat-expansion-panel:not([class*=mat-elevation-z]) {
+    box-shadow: none;
+    border: none;
+}
+
+::ng-deep.accordion-container .advancedAccordion .mat-expansion-panel-header {
+    padding: var(--small-16px) var(--small-16px) var(--small-16px) var(--small-16px);
+}
+
+.advancedAccordion .disclaimer-container {
+    display: flex;
+    gap: var(--small-8px);
+    height: 2.875rem;
+    padding: var(--small-12px) var(--small-16px);
+    align-items: center;
+    border-radius: var(--small-8px);
+    border: 1px solid var(--grey-100);
+    background: var(--structural-neutral3);
+}
+
+.advancedAccordion .disclaimer-style {
+    color: var(--text-mediumemphasis);
+
+    /* Roboto/Body/Medium */
+    font-family: var(--font);
+    font-size: var(--small-14px);
+    font-style: normal;
+    font-weight: 400;
+    line-height: var(--medium-20px);
+    letter-spacing: 0.25px;
+}
+
+.accordion-advanced-container {
+    display: flex;
+    flex-direction: column;
+    gap: var(--small-16px);
+}
+
+.d-flex {
+    display: flex;
+}
+
+::ng-deep.disabled-card .sa-card-accordion-wrapper {
+    cursor: auto;
+}
+
+.advancedAccordion.mat-expansion-panel:not(.mat-expanded) .mat-expansion-panel-header:not([aria-disabled=true]):hover {
+    background: none;
+}
+
+.advanced-title {
+    color: var(--primary-500);
+    font-family: var(--font);
+    font-size: var(--small-14px);
+    font-style: normal;
+    font-weight: 400;
+    line-height: 1.375rem;
+    letter-spacing: 0.25px;
+}
+
+.align-center {
+    align-items: center;
+}
+
+::ng-deep.advancedAccordion .mat-expansion-panel-header-title {
+    color: var(--primary-500);
+}
+
+.advancedAccordion .panel-container .material-icons {
+    font-size: 1.375rem;
+}
+
+.disabled-icon {
+    padding: 0.563rem var(--small-8px) var(--small-8px) var(--small-8px);
+}
+
+.advancedAccordion .chip-container {
+    margin-left: auto;
+}
+
+.accordions-container {
+    display: flex;
+    flex-direction: column;
+    gap: var(--medium-24px);
+}
+
+::ng-deep .accordion-container .mat-expansion-panel:not([class*=mat-elevation-z]) {
+    border: 1px solid var(--grey-100);
+    background: var(--structural-white);
+    box-shadow: none;
+}
+
+::ng-deep .accordion-container.mat-accordion .mat-expansion-panel:first-of-type {
+    border-radius: var(--small-8px);
+}
+
+/* hiding hovering background */
+::ng-deep .accordion-container .mat-expansion-panel:not(.mat-expanded) .mat-expansion-panel-header:not([aria-disabled=true]):hover {
+    background: none;
+}
+
+::ng-deep .advancedAccordion .mat-expansion-panel-body {
+    padding-left: 0;
+    padding-right: 0;
+}
+
+.disclaimer-buttons-container {
+    display: flex;
+    margin-left: auto;
+    align-items: center;
+    gap: var(--small-12px);
+}

package/projects/component-library/src/lib/accordion/accordion.component.html

@@ -0,0 +1,151 @@
+<mat-accordion class="accordion-container">
+
+    <mat-expansion-panel hideToggle [expanded]="props?.['accordionExpanded'] || 'false'" (opened)="onAccordionOpened()"
+        (closed)="onAccordionClosed()">
+        <mat-expansion-panel-header>
+            <mat-panel-title>
+                <div class="panel-container">
+                    hey {{props?.['accordionExpanded']}}
+                    @if(props?.['accordionExpanded']){
+                    <span class="d-flex align-center">
+                        <sa-icon [icon]="props?.['expandedIcon']" class="d-flex" size="16"></sa-icon>
+                    </span>
+                    }@else{
+                    <span class="d-flex align-center">
+                        <sa-icon [icon]="props?.['collapsedIcon']" class="d-flex" size="20"></sa-icon>
+                    </span>
+                    }
+                    <span class="panel-title">{{props?.['panelTitle']}} hey {{props?.['accordionExpanded']}}</span>
+                    <div>
+                        <!-- <sa-chip *ngIf="props?.['titleChip']" [type]="props['titleChip']?.['type']"
+                            [state]="props['titleChip']?.['state']" [filling]="props['titleChip']?.['filling']"
+                            [text]="getChipText()"></sa-chip> -->
+                    </div>
+                </div>
+            </mat-panel-title>
+        </mat-expansion-panel-header>
+        <div class="custom-divider"></div>
+        <div class="accordion-cards-container">
+            <div *ngFor="let subFeature of props?.['featuresList']">
+                <sa-card [column]="false" [showCardHeader]="true" [showCardBody]="false"
+                    [width]="props?.['featureCardWidth'] || '632px'" [showHeaderBodyDivider]="false"
+                    [customWrapperClass]="props?.['customWrapperClass']" (click)="onCardClick(subFeature)"
+                    class="{{subFeature?.['disabled'] && subFeature?.['isSelected'] ? 'card-selected' : ''}}{{subFeature?.['disabled'] ? 'disabled-card': ''}}">
+                    <sa-card-title-header>
+                        <div class="sa-card-accordion-title-container">
+                            @if(subFeature?.['disabled']){
+                            <span class="disabled-icon">
+                                <sa-icon icon="disabledCheckboxFilled"
+                                    customClass="auto-dimensions disabled-checkbox-icon" class="d-flex"></sa-icon>
+                            </span>
+                            }@else{
+                            <mat-checkbox class="checkbox-style" [(ngModel)]="subFeature.isSelected"
+                                (click)="onCheckboxClick(subFeature)"></mat-checkbox>
+                            }
+                            <div class="sa-card-title-icon-container">
+                                <div class="sa-card-custom-title">
+                                    {{subFeature?.title}}
+                                </div>
+                                @if(subFeature?.tooltip){
+                                <span class="tooltip-container">
+                                    <sa-icon [icon]="props?.['tooltipIcon'] || 'infoCircleOutlined'"
+                                        customClass="accordion-info-icon" [matTooltip]="subFeature?.tooltip"
+                                        matTooltipClass="custom-tooltip" class="tooltip-icon"></sa-icon>
+                                </span>
+                                }
+                            </div>
+                        </div>
+                    </sa-card-title-header>
+                </sa-card>
+            </div>
+        </div>
+        <!-- Advanced Features accordion -->
+        <div *ngIf="props?.['advancedFeatures'] && props['advancedFeatures'].length > 0"
+            class="advanced-features-section">
+            <mat-expansion-panel hideToggle [expanded]="props?.['advancedFeaturesExpanded'] || 'false'"
+                (opened)="onAdvancedFeaturesOpened()" (closed)="onAdvancedFeaturesClosed()" class="advancedAccordion">
+                <mat-expansion-panel-header>
+                    <mat-panel-title>
+                        <div class="panel-container">
+                            @if(!props?.['advancedFeaturesExpanded']){
+                            <span class="d-flex align-center">
+                                <sa-icon icon="sourcesOutlined" class="d-flex" customClass="colored-icon"
+                                    size="16"></sa-icon>
+                            </span>
+                            }@else{
+                            <span class="material-icons">
+                                expand_more
+                            </span>
+                            }
+                            <span class="advanced-title">{{ props?.['advancedFeaturesExpanded'] ?
+                                props?.['advancedFeatureToggleTitle'] :
+                                props?.['advancedFeatureTitle'] }}</span>
+                        </div>
+                    </mat-panel-title>
+                </mat-expansion-panel-header>
+                <div class="accordion-advanced-container">
+                    <div class="disclaimer-container">
+                        <span class="tooltip-container">
+                            <sa-icon icon="infoCircleOutlined" customClass="accordion-info-icon"
+                                class="tooltip-icon"></sa-icon>
+                        </span>
+                        <span class="disclaimer-style">{{props?.['advancedFeatureDisclaimer']}}</span>
+                        @if(props?.['advancedFeatureDisclaimerButtons']) {
+                        <div class="disclaimer-buttons-container">
+                            <ng-container *ngFor="let button of props['advancedFeatureDisclaimerButtons']">
+                                <sa-button [text]="button.text" [type]="button.type" [size]="button.size"
+                                    [state]="button.state" [iconPosition]="button.iconPosition" [icon]="button.icon"
+                                    [buttonIconSize]="button.buttonIconSize"
+                                    (click)="actionHandler(button, $event)"></sa-button>
+                            </ng-container>
+                        </div>
+                        }
+                    </div>
+                    <div class="accordion-cards-container">
+                        <div *ngFor="let subFeature of props?.['advancedFeatures']">
+                            <sa-card [column]="false" [showCardHeader]="true" [showCardBody]="false"
+                                [width]="props?.['advancedFeatureCardWidth'] || '632px'" [showHeaderBodyDivider]="false"
+                                [customWrapperClass]="props?.['customWrapperClass']" (click)="onCardClick(subFeature)"
+                                class="{{!subFeature?.['disabled'] && subFeature?.['isSelected'] ? 'card-selected' : ''}}{{subFeature?.['disabled'] ? 'disabled-card': ''}}">
+                                <sa-card-title-header>
+                                    <div class="sa-card-accordion-title-container">
+                                        @if(subFeature?.['disabled']){
+                                        <span class="disabled-icon">
+                                            <sa-icon icon="disabledCheckboxFilled"
+                                                customClass="auto-dimensions disabled-checkbox-icon"
+                                                class="d-flex"></sa-icon>
+                                        </span>
+                                        }@else{
+                                        <mat-checkbox class="checkbox-style" [(ngModel)]="subFeature.isSelected"
+                                            (click)="onCheckboxClick(subFeature)"></mat-checkbox>
+                                        }
+                                        <div class="sa-card-title-icon-container">
+                                            <div class="sa-card-custom-title">
+                                                {{subFeature?.title}}
+                                            </div>
+                                            @if(subFeature?.tooltip){
+                                            <span class="tooltip-container">
+                                                <sa-icon [icon]="props?.['advancedTooltipIcon'] || 'infoCircleOutlined'"
+                                                    customClass="accordion-info-icon" [matTooltip]="subFeature?.tooltip"
+                                                    matTooltipClass="custom-tooltip" class="tooltip-icon"></sa-icon>
+                                            </span>
+                                            }
+                                        </div>
+                                        @if(subFeature?.featureChip){
+                                        <div class="chip-container">
+                                            <sa-chip [type]="subFeature.featureChip?.['type']"
+                                                [state]="subFeature.featureChip?.['state']"
+                                                [filling]="subFeature.featureChip?.['filling']"
+                                                [text]="subFeature.featureChip?.['label']"></sa-chip>
+                                        </div>
+                                        }
+                                    </div>
+                                </sa-card-title-header>
+                            </sa-card>
+                        </div>
+                    </div>
+                </div>
+            </mat-expansion-panel>
+        </div>
+    </mat-expansion-panel>
+</mat-accordion>

package/projects/component-library/src/lib/accordion/accordion.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AccordionComponent } from './accordion.component';
+
+describe('AccordionComponent', () => {
+  let component: AccordionComponent;
+  let fixture: ComponentFixture<AccordionComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [AccordionComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(AccordionComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});