expander component

src/interface/src/styleguide/expander-item/expander-item.component.html

@@ -0,0 +1,20 @@
+<input
+  type="radio"
+  [value]="value"
+  [id]="'layer-' + value"
+  [name]="groupName"
+  [checked]="checked"
+  (click)="optionSelected.emit(value)" />
+<label [for]="'layer-' + value">{{ label }}</label>
+<ng-container *ngIf="showTooltip">
+  <button mat-icon-button class="info" [matMenuTriggerFor]="tooltipMenu">
+    <mat-icon class="material-symbols-outlined info" color="primary">
+      info_outline
+    </mat-icon>
+  </button>
+  <mat-menu #tooltipMenu="matMenu">
+    <div class="tooltip">
+      <ng-content></ng-content>
+    </div>
+  </mat-menu>
+</ng-container>

src/interface/src/styleguide/expander-item/expander-item.component.scss

@@ -0,0 +1,35 @@
+@import "mixins";
+
+:host {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 8px;
+  text-transform: capitalize;
+}
+
+input {
+  margin: 0;
+  width: 20px;
+  cursor: pointer;
+}
+
+label {
+  @include small-paragraph();
+  cursor: pointer;
+}
+
+.info {
+  width: 22px;
+  height: 22px;
+  font-size: 22px;
+  line-height: 0;
+}
+
+button.info {
+  margin-left: auto;
+}
+
+.tooltip {
+  padding: 20px;
+}

src/interface/src/styleguide/expander-item/expander-item.component.spec.ts

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

src/interface/src/styleguide/expander-item/expander-item.component.ts

@@ -0,0 +1,50 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { MatIconModule } from '@angular/material/icon';
+import { MatLegacyButtonModule } from '@angular/material/legacy-button';
+import { MatLegacyMenuModule } from '@angular/material/legacy-menu';
+import { NgIf, NgSwitchCase } from '@angular/common';
+
+/**
+ * This component is used in combination with `<sg-expander-section>`.
+ * It shows a radio button with its label, and additionally a tooltip.
+ * The markup provided in content projection will be used for the tooltip.
+ */
+@Component({
+  selector: 'sg-expander-item',
+  standalone: true,
+  imports: [
+    MatIconModule,
+    MatLegacyButtonModule,
+    MatLegacyMenuModule,
+    NgSwitchCase,
+    NgIf,
+  ],
+  templateUrl: './expander-item.component.html',
+  styleUrl: './expander-item.component.scss',
+})
+export class ExpanderItemComponent {
+  /**
+   * The label for the radio button
+   */
+  @Input() label: string = '';
+  /**
+   * The value for the radio button
+   */
+  @Input() value: string | number = '';
+  /**
+   * The name of the group (the input name) for the radio button
+   */
+  @Input() groupName: string = '';
+  /**
+   * Whether the item is checked (selected)
+   */
+  @Input() checked = false;
+  /**
+   * Whether it shows the tooltip icon
+   */
+  @Input() showTooltip = false;
+  /**
+   * Emitted when the user changes the selected option
+   */
+  @Output() optionSelected = new EventEmitter<string | number>();
+}

src/interface/src/styleguide/expander-section/expander-section.component.html

@@ -0,0 +1,6 @@
+<div class="title" [ngClass]="{ open: isOpen }" (click)="isOpen = !isOpen">
+  {{ title }}
+</div>
+<div class="base-options" *ngIf="isOpen">
+  <ng-content></ng-content>
+</div>

src/interface/src/styleguide/expander-section/expander-section.component.scss

@@ -0,0 +1,30 @@
+@import "mixins";
+
+.title {
+  @include xs-label();
+  border-bottom: 1px solid black;
+  padding: 8px 8px 8px 14px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+
+  &::before {
+    display: block;
+    width: 20px;
+    height: 20px;
+    content: '';
+    background: url('data:image/svg+xml,<svg width="5" height="10" viewBox="0 0 5 10" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.333313 9.16683V0.833496L4.49998 5.00016L0.333313 9.16683Z" fill="black" /></svg>') no-repeat 50% 50%;
+    background-size: 6px;
+  }
+
+  &.open {
+    &::before {
+      transform: rotate(90deg);
+    }
+  }
+}
+
+
+.base-options {
+  padding: 16px 14px;
+}

src/interface/src/styleguide/expander-section/expander-section.component.spec.ts

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

src/interface/src/styleguide/expander-section/expander-section.component.ts

@@ -0,0 +1,22 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { NgClass, NgForOf, NgIf } from '@angular/common';
+
+/**
+ * The expander section component shows a title with a control to expand and collapse
+ * inner content.
+ * This component accepts html via content projection.
+ * Its content can be any arbitrary html, or you can provide `<sg-expander-item>` to display
+ * a list of radio buttons with optional tooltips.
+ */
+@Component({
+  selector: 'sg-expander-section',
+  standalone: true,
+  imports: [NgForOf, NgIf, NgClass],
+  templateUrl: './expander-section.component.html',
+  styleUrl: './expander-section.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ExpanderSectionComponent {
+  @Input() isOpen?: boolean;
+  @Input() title: string = '';
+}

src/interface/src/styleguide/expander-section/expander-section.stories.ts

@@ -0,0 +1,79 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+import {
+  applicationConfig,
+  argsToTemplate,
+  moduleMetadata,
+} from '@storybook/angular';
+import { ExpanderSectionComponent } from '@styleguide';
+import { provideAnimations } from '@angular/platform-browser/animations';
+import { ExpanderItemComponent } from '../expander-item/expander-item.component';
+
+const meta: Meta<ExpanderSectionComponent> = {
+  title: 'Components/Expander Section',
+  component: ExpanderSectionComponent,
+  decorators: [
+    applicationConfig({
+      providers: [provideAnimations()],
+    }),
+    moduleMetadata({ imports: [ExpanderItemComponent] }),
+  ],
+  tags: ['autodocs'],
+  render: (args) => ({
+    props: args,
+    template: `<sg-expander-section ${argsToTemplate(args)}>
+      <sg-expander-item label='Red' value='1' groupName='options' [checked]='true'></sg-expander-item>
+      <sg-expander-item label='Green' value='2' groupName='options'></sg-expander-item>
+      <sg-expander-item label='Blue' value='3' groupName='options'></sg-expander-item>
+</sg-expander-section>`,
+  }),
+};
+
+export default meta;
+type Story = StoryObj<ExpanderSectionComponent>;
+
+export const Default: Story = {
+  args: {
+    title: 'Pick your color',
+  },
+};
+
+export const Open: Story = {
+  args: {
+    title: 'Pick your color',
+    isOpen: true,
+  },
+};
+
+export const WithTooltips: Story = {
+  args: {
+    title: 'Pick your size',
+    isOpen: true,
+  },
+  render: (args) => ({
+    props: args,
+    template: `<sg-expander-section ${argsToTemplate(args)}>
+      <sg-expander-item label='Small' value='1' groupName='sizes' [showTooltip]='true'>
+      Some tooltip content
+</sg-expander-item>
+      <sg-expander-item label='Medium' value='2' groupName='sizes' [showTooltip]='true'>
+      Another tooltip content
+</sg-expander-item>
+      <sg-expander-item label='Large' value='3' groupName='sizes' [showTooltip]='true'>
+      This can be <strong>html</strong>
+</sg-expander-item>
+</sg-expander-section>`,
+  }),
+};
+
+export const AnyContent: Story = {
+  args: {
+    title: 'Pick your size',
+    isOpen: true,
+  },
+  render: (args) => ({
+    props: args,
+    template: `<sg-expander-section ${argsToTemplate(args)}>
+     This can actually be whatever content we want.
+</sg-expander-section>`,
+  }),
+};

src/interface/src/styleguide/index.ts

@@ -4,3 +4,4 @@ export * from './input/input-field.component';
 export * from './status-chip/status-chip.component';
 export * from './filter-dropdown/filter-dropdown.component';
 export * from './paginator/paginator.component';
+export * from './expander-section/expander-section.component';