expanded panel modal

src/interface/src/styleguide/expanded-panel/expanded-panel.component.html

@@ -0,0 +1,13 @@
+<section class="header">
+  <div class="header-title">
+    <ng-content select="[modalBodyTitle]"></ng-content>
+  </div>
+  <div class="title-buttons">
+    <button mat-icon-button (click)="handleCloseButton()" aria-label="close">
+      <mat-icon class="close-btn">close_fullscreen</mat-icon>
+    </button>
+  </div>
+</section>
+<main class="modal-body">
+  <ng-content select="[modalBodyContent]"></ng-content>
+</main>

src/interface/src/styleguide/expanded-panel/expanded-panel.component.scss

@@ -0,0 +1,64 @@
+@import 'colors';
+@import 'mixins';
+
+:host {
+  display: flex;
+  flex-direction: column;
+  width: 500px;
+  background-color: white;
+  max-height: 700px;
+  border-radius: 4px;
+  justify-content: space-between;
+}
+
+.header {
+  @include h4();
+  display: flex;
+  flex-shrink: 0;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  font-family: 'Public Sans';
+  font-size: 18px;
+  font-weight: 600;
+  line-height: 32px;
+  text-align: left;
+  padding: 10px 16px;
+  border-bottom: 1px solid $color-soft-gray;
+  height: 64px;
+
+
+}
+
+
+.title-buttons {
+
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  gap: 16px;
+
+  .button-icon {
+    width: 20px;
+    height: 20px;
+  }
+
+  button {
+    background: none;
+    border: none;
+    padding: 6px;
+    margin: 0;
+    line-height: 0;
+    cursor: pointer;
+    height: auto;
+    width: auto;
+  }
+}
+
+.header-title {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  gap: 16px;
+}

src/interface/src/styleguide/expanded-panel/expanded-panel.component.spec.ts

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

src/interface/src/styleguide/expanded-panel/expanded-panel.component.ts

@@ -0,0 +1,30 @@
+import { Component } from '@angular/core';
+import { CommonModule, NgIf } from '@angular/common';
+import { MatIconModule } from '@angular/material/icon';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatDialogModule } from '@angular/material/dialog';
+import { ButtonComponent } from '@styleguide';
+import { MatButtonModule } from '@angular/material/button';
+
+@Component({
+  selector: 'sg-expanded-panel',
+  templateUrl: './expanded-panel.component.html',
+  styleUrls: ['./expanded-panel.component.scss'],
+  standalone: true,
+  imports: [
+    CommonModule,
+    NgIf,
+    MatDialogModule,
+    ButtonComponent,
+    MatIconModule,
+    MatDividerModule,
+    MatMenuModule,
+    MatButtonModule,
+  ],
+})
+export class ExpandedPanelComponent {
+  constructor() {}
+
+  handleCloseButton(): void {}
+}

src/interface/src/styleguide/expanded-panel/expanded-panel.stories.ts

@@ -0,0 +1,53 @@
+import {
+  argsToTemplate,
+  Meta,
+  moduleMetadata,
+  StoryObj,
+} from '@storybook/angular';
+import {
+  MAT_DIALOG_DATA,
+  MatDialogModule,
+  MatDialogRef,
+} from '@angular/material/dialog';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { ModalInfoComponent } from '../modal-info-box/modal-info.component';
+import { ExpandedPanelComponent } from './expanded-panel.component';
+
+const meta: Meta<ExpandedPanelComponent> = {
+  title: 'Components/Expanded Panel',
+  component: ExpandedPanelComponent,
+  tags: ['autodocs'],
+  decorators: [
+    moduleMetadata({
+      imports: [MatDialogModule, BrowserAnimationsModule, ModalInfoComponent],
+      providers: [
+        { provide: MAT_DIALOG_DATA, useValue: {} },
+        { provide: MatDialogRef, useValue: {} },
+      ],
+    }),
+  ],
+};
+
+export default meta;
+
+type Story = StoryObj<ExpandedPanelComponent>;
+
+const containerStyle = `style="background-color: gray;
+    height: 400px;
+    align-content: center;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;"`;
+
+export const Default: Story = {
+  args: {},
+  render: (args) => ({
+    props: args,
+    template: `<div ${containerStyle}>
+      <sg-expanded-panel ${argsToTemplate(args)}>
+        <div modalBodyTitle>The title</div>
+        <div modalBodyContent>Just a basic expaded panel</div>
+      </sg-expanded-panel><div>`,
+  }),
+};