From 853dbecc9a8aefaa3ce67349f25dc7c07f95d11b Mon Sep 17 00:00:00 2001 From: Bhushan Khope Date: Thu, 17 Oct 2024 16:06:06 -0400 Subject: [PATCH 1/9] create expansion panel --- libs/design-system/expansion-panel/README.md | 3 ++ .../expansion-panel/ng-package.json | 5 ++ .../expansion-panel/src/index.ts | 1 + .../src/lib/expansion-panel.component.html | 33 +++++++++++++ .../src/lib/expansion-panel.component.scss | 25 ++++++++++ .../src/lib/expansion-panel.component.spec.ts | 21 +++++++++ .../lib/expansion-panel.component.stories.ts | 46 ++++++++++++++++++ .../src/lib/expansion-panel.component.ts | 47 +++++++++++++++++++ tsconfig.base.json | 3 ++ 9 files changed, 184 insertions(+) create mode 100644 libs/design-system/expansion-panel/README.md create mode 100644 libs/design-system/expansion-panel/ng-package.json create mode 100644 libs/design-system/expansion-panel/src/index.ts create mode 100644 libs/design-system/expansion-panel/src/lib/expansion-panel.component.html create mode 100644 libs/design-system/expansion-panel/src/lib/expansion-panel.component.scss create mode 100644 libs/design-system/expansion-panel/src/lib/expansion-panel.component.spec.ts create mode 100644 libs/design-system/expansion-panel/src/lib/expansion-panel.component.stories.ts create mode 100644 libs/design-system/expansion-panel/src/lib/expansion-panel.component.ts diff --git a/libs/design-system/expansion-panel/README.md b/libs/design-system/expansion-panel/README.md new file mode 100644 index 000000000..c10db6c90 --- /dev/null +++ b/libs/design-system/expansion-panel/README.md @@ -0,0 +1,3 @@ +# @hra-ui/design-system/expansion-panel + +Secondary entry point of `@hra-ui/design-system`. It can be used by importing from `@hra-ui/design-system/expansion-panel`. diff --git a/libs/design-system/expansion-panel/ng-package.json b/libs/design-system/expansion-panel/ng-package.json new file mode 100644 index 000000000..c781f0df4 --- /dev/null +++ b/libs/design-system/expansion-panel/ng-package.json @@ -0,0 +1,5 @@ +{ + "lib": { + "entryFile": "src/index.ts" + } +} diff --git a/libs/design-system/expansion-panel/src/index.ts b/libs/design-system/expansion-panel/src/index.ts new file mode 100644 index 000000000..927a692d6 --- /dev/null +++ b/libs/design-system/expansion-panel/src/index.ts @@ -0,0 +1 @@ +export * from './lib/expansion-panel.component'; diff --git a/libs/design-system/expansion-panel/src/lib/expansion-panel.component.html b/libs/design-system/expansion-panel/src/lib/expansion-panel.component.html new file mode 100644 index 000000000..b00c793cc --- /dev/null +++ b/libs/design-system/expansion-panel/src/lib/expansion-panel.component.html @@ -0,0 +1,33 @@ + + +
+ @if (!disabled()) { + + } + + + {{ title() }} + + + + + +
+ + + +
+
+ +
+ + diff --git a/libs/design-system/expansion-panel/src/lib/expansion-panel.component.scss b/libs/design-system/expansion-panel/src/lib/expansion-panel.component.scss new file mode 100644 index 000000000..43e100d51 --- /dev/null +++ b/libs/design-system/expansion-panel/src/lib/expansion-panel.component.scss @@ -0,0 +1,25 @@ +:host { + display: block; + + .header { + display: flex; + align-items: center; + font: var(--sys-label-large); + color: var(--sys-secondary); + } + + .filler { + flex-grow: 1; + } + + .content { + font: var(--sys-label-large); + height: 0; + overflow: hidden; + transition: height 0.2s ease-in-out; + + &.expanded { + height: 2rem; + } + } +} diff --git a/libs/design-system/expansion-panel/src/lib/expansion-panel.component.spec.ts b/libs/design-system/expansion-panel/src/lib/expansion-panel.component.spec.ts new file mode 100644 index 000000000..49d99307d --- /dev/null +++ b/libs/design-system/expansion-panel/src/lib/expansion-panel.component.spec.ts @@ -0,0 +1,21 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { ExpansionPanelComponent } from './expansion-panel.component'; + +describe('ExpansionPanelComponent', () => { + let component: ExpansionPanelComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [ExpansionPanelComponent], + }).compileComponents(); + + fixture = TestBed.createComponent(ExpansionPanelComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/libs/design-system/expansion-panel/src/lib/expansion-panel.component.stories.ts b/libs/design-system/expansion-panel/src/lib/expansion-panel.component.stories.ts new file mode 100644 index 000000000..4843a3fb6 --- /dev/null +++ b/libs/design-system/expansion-panel/src/lib/expansion-panel.component.stories.ts @@ -0,0 +1,46 @@ +import { MatButtonModule } from '@angular/material/button'; +import { MatIconModule } from '@angular/material/icon'; +import { moduleMetadata, type Meta, type StoryObj } from '@storybook/angular'; +import { + ExpansionPanelActionsComponent, + ExpansionPanelComponent, + ExpansionPanelHeaderContentComponent, +} from './expansion-panel.component'; + +const meta: Meta = { + title: 'ExpansionPanel', + decorators: [ + moduleMetadata({ + imports: [ + MatButtonModule, + MatIconModule, + MatButtonModule, + ExpansionPanelActionsComponent, + ExpansionPanelComponent, + ExpansionPanelHeaderContentComponent, + ], + }), + ], + render: (args) => ({ + props: args, + template: ` + + + + + + Additional Actions + + Actual Content + + `, + }), +}; +export default meta; +type Story = StoryObj; + +export const Default: Story = {}; diff --git a/libs/design-system/expansion-panel/src/lib/expansion-panel.component.ts b/libs/design-system/expansion-panel/src/lib/expansion-panel.component.ts new file mode 100644 index 000000000..103570d14 --- /dev/null +++ b/libs/design-system/expansion-panel/src/lib/expansion-panel.component.ts @@ -0,0 +1,47 @@ +import { booleanAttribute, ChangeDetectionStrategy, Component, input } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { CdkAccordionModule } from '@angular/cdk/accordion'; +import { IconButtonSizeDirective } from '@hra-ui/design-system/icon-button'; +import { MatIconModule } from '@angular/material/icon'; +import { MatIconButton } from '@angular/material/button'; + +let idCounter = 0; + +@Component({ + selector: 'hra-expansion-panel-actions', + standalone: true, + template: '', + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class ExpansionPanelActionsComponent {} + +@Component({ + selector: 'hra-expansion-panel-header-content', + standalone: true, + template: '', + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class ExpansionPanelHeaderContentComponent {} + +@Component({ + selector: 'hra-expansion-panel', + standalone: true, + imports: [ + CommonModule, + CdkAccordionModule, + IconButtonSizeDirective, + MatIconButton, + MatIconModule, + ExpansionPanelActionsComponent, + ], + templateUrl: './expansion-panel.component.html', + styleUrl: './expansion-panel.component.scss', + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class ExpansionPanelComponent { + readonly title = input.required(); + readonly disabled = input(false, { transform: booleanAttribute }); + + protected readonly id = idCounter++; + protected readonly titleId = `expansion-panel-title-${this.id}`; +} diff --git a/tsconfig.base.json b/tsconfig.base.json index ef6854d28..0f716a9a0 100644 --- a/tsconfig.base.json +++ b/tsconfig.base.json @@ -92,6 +92,9 @@ "@hra-ui/design-system/error-indicator": [ "libs/design-system/error-indicator/src/index.ts" ], + "@hra-ui/design-system/expansion-panel": [ + "libs/design-system/expansion-panel/src/index.ts" + ], "@hra-ui/design-system/footer": [ "libs/design-system/footer/src/index.ts" ], From 9a2283ca20cf225bb23842edcc7fc186c6f6b81e Mon Sep 17 00:00:00 2001 From: Bhushan Khope Date: Fri, 18 Oct 2024 12:17:48 -0400 Subject: [PATCH 2/9] add animation to expansion panel --- .../src/lib/expansion-panel-animations.ts | 16 +++++ .../src/lib/expansion-panel.component.html | 19 +++-- .../src/lib/expansion-panel.component.scss | 8 +-- .../lib/expansion-panel.component.stories.ts | 19 ++--- .../src/lib/expansion-panel.component.ts | 69 +++++++++++++++---- .../src/lib/expansion-panel.module.ts | 13 ++++ libs/design-system/src/lib/providers.ts | 2 + 7 files changed, 116 insertions(+), 30 deletions(-) create mode 100644 libs/design-system/expansion-panel/src/lib/expansion-panel-animations.ts create mode 100644 libs/design-system/expansion-panel/src/lib/expansion-panel.module.ts diff --git a/libs/design-system/expansion-panel/src/lib/expansion-panel-animations.ts b/libs/design-system/expansion-panel/src/lib/expansion-panel-animations.ts new file mode 100644 index 000000000..d1a5e4de5 --- /dev/null +++ b/libs/design-system/expansion-panel/src/lib/expansion-panel-animations.ts @@ -0,0 +1,16 @@ +import { animate, AnimationTriggerMetadata, state, style, transition, trigger } from '@angular/animations'; + +/** Animation for the expansion panel */ +export const EXPANSION_PANEL_ANIMATION_TIMING = '225ms cubic-bezier(0.4,0.0,0.2,1)'; + +/** Animation declaration for the expansion panel */ +export const matExpansionAnimations: { + readonly bodyExpansion: AnimationTriggerMetadata; +} = { + /** Animation that expands and collapses the panel content. */ + bodyExpansion: trigger('bodyExpansion', [ + state('collapsed, void', style({ height: '0px', visibility: 'hidden' })), + state('expanded', style({ height: '*', visibility: '' })), + transition('expanded <=> collapsed, void => collapsed', animate(EXPANSION_PANEL_ANIMATION_TIMING)), + ]), +}; diff --git a/libs/design-system/expansion-panel/src/lib/expansion-panel.component.html b/libs/design-system/expansion-panel/src/lib/expansion-panel.component.html index b00c793cc..2bf385fa5 100644 --- a/libs/design-system/expansion-panel/src/lib/expansion-panel.component.html +++ b/libs/design-system/expansion-panel/src/lib/expansion-panel.component.html @@ -3,7 +3,7 @@ #accordionItem="cdkAccordionItem" tabindex="0" [attr.aria-expanded]="accordionItem.expanded" - [attr.aria-controls]="titleId" + [attr.aria-controls]="bodyId" >
@if (!disabled()) { @@ -14,7 +14,7 @@ } - + {{ title() }} @@ -26,8 +26,19 @@
-
- +
+
+ +
diff --git a/libs/design-system/expansion-panel/src/lib/expansion-panel.component.scss b/libs/design-system/expansion-panel/src/lib/expansion-panel.component.scss index 43e100d51..3510c146e 100644 --- a/libs/design-system/expansion-panel/src/lib/expansion-panel.component.scss +++ b/libs/design-system/expansion-panel/src/lib/expansion-panel.component.scss @@ -14,12 +14,8 @@ .content { font: var(--sys-label-large); - height: 0; - overflow: hidden; - transition: height 0.2s ease-in-out; - - &.expanded { - height: 2rem; + &[style*='visibility: hidden'] * { + visibility: hidden !important; } } } diff --git a/libs/design-system/expansion-panel/src/lib/expansion-panel.component.stories.ts b/libs/design-system/expansion-panel/src/lib/expansion-panel.component.stories.ts index 4843a3fb6..85a8218d8 100644 --- a/libs/design-system/expansion-panel/src/lib/expansion-panel.component.stories.ts +++ b/libs/design-system/expansion-panel/src/lib/expansion-panel.component.stories.ts @@ -1,6 +1,7 @@ -import { MatButtonModule } from '@angular/material/button'; import { MatIconModule } from '@angular/material/icon'; -import { moduleMetadata, type Meta, type StoryObj } from '@storybook/angular'; +import { provideDesignSystem } from '@hra-ui/design-system'; +import { ButtonModule } from '@hra-ui/design-system/button'; +import { applicationConfig, moduleMetadata, type Meta, type StoryObj } from '@storybook/angular'; import { ExpansionPanelActionsComponent, ExpansionPanelComponent, @@ -12,14 +13,16 @@ const meta: Meta = { decorators: [ moduleMetadata({ imports: [ - MatButtonModule, MatIconModule, - MatButtonModule, + ButtonModule, ExpansionPanelActionsComponent, ExpansionPanelComponent, ExpansionPanelHeaderContentComponent, ], }), + applicationConfig({ + providers: [provideDesignSystem()], + }), ], render: (args) => ({ props: args, @@ -27,10 +30,10 @@ const meta: Meta = { + + more_vert + + Additional Actions diff --git a/libs/design-system/expansion-panel/src/lib/expansion-panel.component.ts b/libs/design-system/expansion-panel/src/lib/expansion-panel.component.ts index 103570d14..3fc88d07e 100644 --- a/libs/design-system/expansion-panel/src/lib/expansion-panel.component.ts +++ b/libs/design-system/expansion-panel/src/lib/expansion-panel.component.ts @@ -1,12 +1,27 @@ -import { booleanAttribute, ChangeDetectionStrategy, Component, input } from '@angular/core'; -import { CommonModule } from '@angular/common'; +import { AnimationEvent } from '@angular/animations'; import { CdkAccordionModule } from '@angular/cdk/accordion'; -import { IconButtonSizeDirective } from '@hra-ui/design-system/icon-button'; -import { MatIconModule } from '@angular/material/icon'; +import { CommonModule } from '@angular/common'; +import { + ANIMATION_MODULE_TYPE, + booleanAttribute, + ChangeDetectionStrategy, + Component, + computed, + ElementRef, + inject, + input, + Renderer2, + viewChild, +} from '@angular/core'; import { MatIconButton } from '@angular/material/button'; +import { MatIconModule } from '@angular/material/icon'; +import { IconButtonSizeDirective } from '@hra-ui/design-system/icon-button'; +import { matExpansionAnimations } from './expansion-panel-animations'; +/** Counter to keep track of distinct panels */ let idCounter = 0; +/** Expansion panel actions component */ @Component({ selector: 'hra-expansion-panel-actions', standalone: true, @@ -15,6 +30,7 @@ let idCounter = 0; }) export class ExpansionPanelActionsComponent {} +/** Expansion panel header content component */ @Component({ selector: 'hra-expansion-panel-header-content', standalone: true, @@ -23,25 +39,54 @@ export class ExpansionPanelActionsComponent {} }) export class ExpansionPanelHeaderContentComponent {} +/** Expansion panel component */ @Component({ selector: 'hra-expansion-panel', standalone: true, - imports: [ - CommonModule, - CdkAccordionModule, - IconButtonSizeDirective, - MatIconButton, - MatIconModule, - ExpansionPanelActionsComponent, - ], + imports: [CommonModule, CdkAccordionModule, IconButtonSizeDirective, MatIconButton, MatIconModule], + animations: [matExpansionAnimations.bodyExpansion], templateUrl: './expansion-panel.component.html', styleUrl: './expansion-panel.component.scss', changeDetection: ChangeDetectionStrategy.OnPush, }) export class ExpansionPanelComponent { + /** Title of the expansion panel */ readonly title = input.required(); + /** Flag to denote panel as disabled */ readonly disabled = input(false, { transform: booleanAttribute }); + /** Increments the counter on every declaration */ protected readonly id = idCounter++; + + /** Id attribute for title based on current id counter */ protected readonly titleId = `expansion-panel-title-${this.id}`; + + /** Id attribute for body based on current id counter */ + protected readonly bodyId = `expansion-panel-body-${this.id}`; + + /** Instance of renderer */ + private readonly renderer = inject(Renderer2); + + /** Instance of body element */ + private readonly bodyElementRef = viewChild.required>('body'); + + /** Actual body element */ + private readonly body = computed(() => this.bodyElementRef().nativeElement); + + /** Disable animations based on module type */ + private readonly animationsDisabled = inject(ANIMATION_MODULE_TYPE) === 'NoopAnimations'; + + /** Sets attribute based on event state */ + protected animationStart(event: AnimationEvent): void { + if (event.fromState !== 'void' && !this.animationsDisabled) { + this.renderer.setAttribute(this.body(), 'inert', ''); + } + } + + /** Removes attribute based on event state */ + protected animationDone(event: AnimationEvent): void { + if (event.fromState !== 'void' && !this.animationsDisabled) { + this.renderer.removeAttribute(this.body(), 'inert'); + } + } } diff --git a/libs/design-system/expansion-panel/src/lib/expansion-panel.module.ts b/libs/design-system/expansion-panel/src/lib/expansion-panel.module.ts new file mode 100644 index 000000000..987ab421c --- /dev/null +++ b/libs/design-system/expansion-panel/src/lib/expansion-panel.module.ts @@ -0,0 +1,13 @@ +import { NgModule } from '@angular/core'; +import { + ExpansionPanelActionsComponent, + ExpansionPanelComponent, + ExpansionPanelHeaderContentComponent, +} from './expansion-panel.component'; + +/** Expansion panel module */ +@NgModule({ + imports: [ExpansionPanelActionsComponent, ExpansionPanelHeaderContentComponent, ExpansionPanelComponent], + exports: [ExpansionPanelActionsComponent, ExpansionPanelHeaderContentComponent, ExpansionPanelComponent], +}) +export class ExpansionPanelModule {} diff --git a/libs/design-system/src/lib/providers.ts b/libs/design-system/src/lib/providers.ts index a09335d83..e005fd380 100644 --- a/libs/design-system/src/lib/providers.ts +++ b/libs/design-system/src/lib/providers.ts @@ -10,6 +10,7 @@ import { provideTable } from '@hra-ui/design-system/table'; import { provideSelect } from '@hra-ui/design-system/select'; import { provideInput } from '@hra-ui/design-system/input'; import { provideButtonToggle } from '@hra-ui/design-system/button-toggle'; +import { provideAnimations } from '@angular/platform-browser/animations'; /** * Returns design system providers @@ -17,6 +18,7 @@ import { provideButtonToggle } from '@hra-ui/design-system/button-toggle'; export function provideDesignSystem(): EnvironmentProviders { return makeEnvironmentProviders([ provideHttpClient(), + provideAnimations(), provideIcons({ fontIcons: { defaultClasses: ['material-symbols-rounded'], From eede495c718783749eaf1d64cea98d1029ef9b6e Mon Sep 17 00:00:00 2001 From: Bhushan Khope Date: Fri, 18 Oct 2024 12:18:17 -0400 Subject: [PATCH 3/9] update peer deps --- libs/design-system/package.json | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/libs/design-system/package.json b/libs/design-system/package.json index dcd7c9d93..13c0a53d7 100644 --- a/libs/design-system/package.json +++ b/libs/design-system/package.json @@ -31,7 +31,9 @@ "ngx-scrollbar": "^15.1.0", "ngx-color-picker": "^17.0.0", "@angular/router": "18.2.1", - "@angular/cdk": "18.2.1" + "@angular/cdk": "18.2.1", + "@angular/animations": "18.2.1", + "@angular/platform-browser": "18.2.1" }, "dependencies": {}, "sideEffects": false From 465e11943ed6f41fe65a560a3eb87b4420061e0a Mon Sep 17 00:00:00 2001 From: Bhushan Khope Date: Tue, 22 Oct 2024 12:47:35 -0400 Subject: [PATCH 4/9] improve test coverage --- .../button-toggle-size.directive.spec.ts | 20 ++++++++ .../button-toggle-size.directive.ts | 3 -- .../src/lib/expansion-panel.component.html | 6 ++- .../src/lib/expansion-panel.component.spec.ts | 50 ++++++++++++++----- .../src/lib/expansion-panel.component.ts | 4 ++ 5 files changed, 65 insertions(+), 18 deletions(-) create mode 100644 libs/design-system/button-toggle/src/lib/button-toggle-size/button-toggle-size.directive.spec.ts diff --git a/libs/design-system/button-toggle/src/lib/button-toggle-size/button-toggle-size.directive.spec.ts b/libs/design-system/button-toggle/src/lib/button-toggle-size/button-toggle-size.directive.spec.ts new file mode 100644 index 000000000..8c50ea6da --- /dev/null +++ b/libs/design-system/button-toggle/src/lib/button-toggle-size/button-toggle-size.directive.spec.ts @@ -0,0 +1,20 @@ +import { Component } from '@angular/core'; +import { render, screen } from '@testing-library/angular'; +import { ToggleButtonSizeDirective } from './button-toggle-size.directive'; + +describe('ButtonToggleSizeDirective', () => { + it('should apply the styles based on the directive', async () => { + @Component({ + template: `
`, + imports: [ToggleButtonSizeDirective], + standalone: true, + }) + class ButtonToggleComponent {} + + await render(ButtonToggleComponent); + + const directive = screen.getByTestId('dir'); + expect(directive.getAttribute('hrabuttontogglesize')).toBe('large'); + expect(directive.style.font).toBe('var(--sys-label-large)'); + }); +}); diff --git a/libs/design-system/button-toggle/src/lib/button-toggle-size/button-toggle-size.directive.ts b/libs/design-system/button-toggle/src/lib/button-toggle-size/button-toggle-size.directive.ts index b2597f08e..fb34ec3ca 100644 --- a/libs/design-system/button-toggle/src/lib/button-toggle-size/button-toggle-size.directive.ts +++ b/libs/design-system/button-toggle/src/lib/button-toggle-size/button-toggle-size.directive.ts @@ -43,9 +43,6 @@ export class ToggleButtonSizeDirective { /** Size of icon button to use */ readonly size = input.required({ alias: 'hraButtonToggleSize' }); - /** Gets size of button in rem */ - protected readonly buttonSize = computed(() => BUTTON_CONFIG[this.size()]); - /** Gets the font variable for the current button size */ protected readonly fontVar = computed(() => `var(${BUTTON_CONFIG[this.size()].font})`); diff --git a/libs/design-system/expansion-panel/src/lib/expansion-panel.component.html b/libs/design-system/expansion-panel/src/lib/expansion-panel.component.html index 2bf385fa5..473b82f36 100644 --- a/libs/design-system/expansion-panel/src/lib/expansion-panel.component.html +++ b/libs/design-system/expansion-panel/src/lib/expansion-panel.component.html @@ -4,11 +4,12 @@ tabindex="0" [attr.aria-expanded]="accordionItem.expanded" [attr.aria-controls]="bodyId" + [expanded]="expanded" >
@if (!disabled()) { - @@ -35,6 +36,7 @@ [@bodyExpansion]="accordionItem.expanded ? 'expanded' : 'collapsed'" (@bodyExpansion.start)="animationStart($event)" (@bodyExpansion.done)="animationDone($event)" + data-testid="body" >
diff --git a/libs/design-system/expansion-panel/src/lib/expansion-panel.component.spec.ts b/libs/design-system/expansion-panel/src/lib/expansion-panel.component.spec.ts index 49d99307d..bcc14d4aa 100644 --- a/libs/design-system/expansion-panel/src/lib/expansion-panel.component.spec.ts +++ b/libs/design-system/expansion-panel/src/lib/expansion-panel.component.spec.ts @@ -1,21 +1,45 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { AnimationDriver } from '@angular/animations/browser'; +import { MockAnimationDriver, MockAnimationPlayer } from '@angular/animations/browser/testing'; +import { provideDesignSystem } from '@hra-ui/design-system'; +import { render, RenderComponentOptions, screen } from '@testing-library/angular'; +import { userEvent } from '@testing-library/user-event'; import { ExpansionPanelComponent } from './expansion-panel.component'; describe('ExpansionPanelComponent', () => { - let component: ExpansionPanelComponent; - let fixture: ComponentFixture; + async function setup(options?: RenderComponentOptions) { + return render(ExpansionPanelComponent, { + ...options, + inputs: { + title: 'Test Title', + ...options?.inputs, + }, + providers: [ + provideDesignSystem(), + { + provide: AnimationDriver, + useClass: MockAnimationDriver, + }, + ], + }); + } - beforeEach(async () => { - await TestBed.configureTestingModule({ - imports: [ExpansionPanelComponent], - }).compileComponents(); - - fixture = TestBed.createComponent(ExpansionPanelComponent); - component = fixture.componentInstance; - fixture.detectChanges(); + it('should render the expansion panel', async () => { + await setup(); + const title = screen.getByText('Test Title'); + expect(title).toBeInTheDocument(); }); - it('should create', () => { - expect(component).toBeTruthy(); + it('should set inert attribute on body element when animation starts', async () => { + await setup(); + + const button = screen.getByTestId('toggle'); + await userEvent.click(button); + + const player = MockAnimationDriver.log.pop() as MockAnimationPlayer; + const element = player.element as HTMLElement; + + expect(element).toHaveAttribute('inert'); + player.finish(); + expect(element).not.toHaveAttribute('inert'); }); }); diff --git a/libs/design-system/expansion-panel/src/lib/expansion-panel.component.ts b/libs/design-system/expansion-panel/src/lib/expansion-panel.component.ts index 3fc88d07e..d124a796b 100644 --- a/libs/design-system/expansion-panel/src/lib/expansion-panel.component.ts +++ b/libs/design-system/expansion-panel/src/lib/expansion-panel.component.ts @@ -52,6 +52,10 @@ export class ExpansionPanelHeaderContentComponent {} export class ExpansionPanelComponent { /** Title of the expansion panel */ readonly title = input.required(); + + /** Flag to check if the body is expanded */ + readonly expanded = input(true, { transform: booleanAttribute }); + /** Flag to denote panel as disabled */ readonly disabled = input(false, { transform: booleanAttribute }); From 5bbbe9a31f87ef86149675b00db38ee253c718fd Mon Sep 17 00:00:00 2001 From: Bhushan Khope Date: Tue, 22 Oct 2024 12:57:44 -0400 Subject: [PATCH 5/9] add height check in tests for expansion panel --- .../expansion-panel/src/lib/expansion-panel.component.spec.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/libs/design-system/expansion-panel/src/lib/expansion-panel.component.spec.ts b/libs/design-system/expansion-panel/src/lib/expansion-panel.component.spec.ts index bcc14d4aa..4cb864c0f 100644 --- a/libs/design-system/expansion-panel/src/lib/expansion-panel.component.spec.ts +++ b/libs/design-system/expansion-panel/src/lib/expansion-panel.component.spec.ts @@ -41,5 +41,7 @@ describe('ExpansionPanelComponent', () => { expect(element).toHaveAttribute('inert'); player.finish(); expect(element).not.toHaveAttribute('inert'); + expect(element.style.height).toBe('0px'); + expect(element.style.visibility).toBe('hidden'); }); }); From 74e8a3093d686491616adb76a8cfb4498827a1d3 Mon Sep 17 00:00:00 2001 From: Bhushan Khope Date: Tue, 22 Oct 2024 13:26:26 -0400 Subject: [PATCH 6/9] update icon button size and styles in the design system --- .../lib/components/cell-types/cell-types.component.html | 2 +- .../dialog/src/lib/notice/notice.component.html | 2 +- .../lib/icon-button-size/icon-button-size.directive.ts | 4 +--- .../icon-button-styles/icon-button-styles.component.scss | 4 ++-- .../icon-button/src/lib/icon-button.stories.ts | 8 +------- .../menu/src/lib/menu-demo/menu-demo.component.stories.ts | 4 ++-- .../menu/src/lib/menu-demo/menu-demo.component.ts | 2 +- 7 files changed, 9 insertions(+), 17 deletions(-) diff --git a/libs/cde-visualization/src/lib/components/cell-types/cell-types.component.html b/libs/cde-visualization/src/lib/components/cell-types/cell-types.component.html index ecce419ad..7c2335eb4 100644 --- a/libs/cde-visualization/src/lib/components/cell-types/cell-types.component.html +++ b/libs/cde-visualization/src/lib/components/cell-types/cell-types.component.html @@ -4,7 +4,7 @@ mat-icon-button [matMenuTriggerFor]="menu" hraMicroTooltip="More" - hraIconButtonSize="medium" + hraIconButtonSize="large" data-testid="trigger" > more_vert diff --git a/libs/design-system/dialog/src/lib/notice/notice.component.html b/libs/design-system/dialog/src/lib/notice/notice.component.html index 43c56b774..0f097e777 100644 --- a/libs/design-system/dialog/src/lib/notice/notice.component.html +++ b/libs/design-system/dialog/src/lib/notice/notice.component.html @@ -2,7 +2,7 @@
{{ data.title }}
-
diff --git a/libs/design-system/icon-button/src/lib/icon-button-size/icon-button-size.directive.ts b/libs/design-system/icon-button/src/lib/icon-button-size/icon-button-size.directive.ts index 8a9fe3c4d..8659767fa 100644 --- a/libs/design-system/icon-button/src/lib/icon-button-size/icon-button-size.directive.ts +++ b/libs/design-system/icon-button/src/lib/icon-button-size/icon-button-size.directive.ts @@ -1,19 +1,17 @@ import { computed, Directive, input } from '@angular/core'; /** Input options for icon button size */ -export type IconButtonSize = 'small' | 'medium' | 'large'; +export type IconButtonSize = 'small' | 'large'; /** Record of button sizes (number in rem) */ const BUTTON_SIZES: Record = { small: 1.5, - medium: 2.25, large: 2.5, }; /** Record of icon sizes (number in rem) */ const ICON_SIZES: Record = { small: 1.25, - medium: 1.5, large: 1.5, }; diff --git a/libs/design-system/icon-button/src/lib/icon-button-styles/icon-button-styles.component.scss b/libs/design-system/icon-button/src/lib/icon-button-styles/icon-button-styles.component.scss index cef4ccc64..9b7b8959a 100644 --- a/libs/design-system/icon-button/src/lib/icon-button-styles/icon-button-styles.component.scss +++ b/libs/design-system/icon-button/src/lib/icon-button-styles/icon-button-styles.component.scss @@ -1,6 +1,6 @@ button[mat-icon-button] { - --mat-icon-button-hover-state-layer-opacity: 0.04; - --mat-icon-button-pressed-state-layer-opacity: 0.08; + --mat-icon-button-hover-state-layer-opacity: 0.08; + --mat-icon-button-pressed-state-layer-opacity: 0.16; --mat-icon-color: var(--sys-secondary); --mat-icon-button-state-layer-color: var(--sys-secondary); --mat-icon-button-focus-state-layer-opacity: 0; diff --git a/libs/design-system/icon-button/src/lib/icon-button.stories.ts b/libs/design-system/icon-button/src/lib/icon-button.stories.ts index d9660aeaf..3ce95a556 100644 --- a/libs/design-system/icon-button/src/lib/icon-button.stories.ts +++ b/libs/design-system/icon-button/src/lib/icon-button.stories.ts @@ -18,7 +18,7 @@ const meta: Meta = { }, size: { control: 'select', - options: ['small', 'medium', 'large'], + options: ['small', 'large'], }, }, decorators: [ @@ -59,12 +59,6 @@ export const Small: Story = { }, }; -export const Medium: Story = { - args: { - size: 'medium', - }, -}; - export const Large: Story = { args: { size: 'large', diff --git a/libs/design-system/menu/src/lib/menu-demo/menu-demo.component.stories.ts b/libs/design-system/menu/src/lib/menu-demo/menu-demo.component.stories.ts index 8d6525338..c5b5bf350 100644 --- a/libs/design-system/menu/src/lib/menu-demo/menu-demo.component.stories.ts +++ b/libs/design-system/menu/src/lib/menu-demo/menu-demo.component.stories.ts @@ -66,11 +66,11 @@ const meta: Meta = { argTypes: { size: { control: 'select', - options: ['small', 'medium', 'large'], + options: ['small', 'large'], }, }, args: { - size: 'medium', + size: 'small', menuOptions: exampleOptions, }, }; diff --git a/libs/design-system/menu/src/lib/menu-demo/menu-demo.component.ts b/libs/design-system/menu/src/lib/menu-demo/menu-demo.component.ts index 4c1995039..3b6c14b6e 100644 --- a/libs/design-system/menu/src/lib/menu-demo/menu-demo.component.ts +++ b/libs/design-system/menu/src/lib/menu-demo/menu-demo.component.ts @@ -29,7 +29,7 @@ export interface MenuDemoOption { }) export class MenuDemoComponent { /** Menu size */ - readonly size = input('medium'); + readonly size = input('small'); /** List of menu options */ readonly menuOptions = input([]); From 4f311b6d9f315085694309ce7f9eab61145f1ab8 Mon Sep 17 00:00:00 2001 From: Bhushan Khope Date: Tue, 22 Oct 2024 13:46:13 -0400 Subject: [PATCH 7/9] update design file in the icon button stories --- .../icon-button/src/lib/icon-button.stories.ts | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/libs/design-system/icon-button/src/lib/icon-button.stories.ts b/libs/design-system/icon-button/src/lib/icon-button.stories.ts index 3ce95a556..de5fab9d0 100644 --- a/libs/design-system/icon-button/src/lib/icon-button.stories.ts +++ b/libs/design-system/icon-button/src/lib/icon-button.stories.ts @@ -8,6 +8,12 @@ import { provideIconButtons } from './providers'; const meta: Meta = { title: 'IconButton', + parameters: { + design: { + type: 'figma', + url: 'https://www.figma.com/design/BCEJn9KCIbBJ5MzqnojKQp/HRA-Components?node-id=24-876', + }, + }, args: { icon: 'search', size: 'large', From 6626b8adc07de0a48f39d2db960f6fde43b1f3f9 Mon Sep 17 00:00:00 2001 From: Bhushan Khope Date: Wed, 23 Oct 2024 11:27:56 -0400 Subject: [PATCH 8/9] refactor animation code --- .../button-toggle-size.directive.spec.ts | 21 +++++++++++-------- .../src/lib/expansion-panel-animations.ts | 19 +++++++---------- .../src/lib/expansion-panel.component.html | 2 +- .../src/lib/expansion-panel.component.ts | 4 ++-- 4 files changed, 22 insertions(+), 24 deletions(-) diff --git a/libs/design-system/button-toggle/src/lib/button-toggle-size/button-toggle-size.directive.spec.ts b/libs/design-system/button-toggle/src/lib/button-toggle-size/button-toggle-size.directive.spec.ts index 8c50ea6da..f421dce41 100644 --- a/libs/design-system/button-toggle/src/lib/button-toggle-size/button-toggle-size.directive.spec.ts +++ b/libs/design-system/button-toggle/src/lib/button-toggle-size/button-toggle-size.directive.spec.ts @@ -2,19 +2,22 @@ import { Component } from '@angular/core'; import { render, screen } from '@testing-library/angular'; import { ToggleButtonSizeDirective } from './button-toggle-size.directive'; +@Component({ + template: `
`, + imports: [ToggleButtonSizeDirective], + standalone: true, +}) +class ButtonToggleComponent {} + describe('ButtonToggleSizeDirective', () => { it('should apply the styles based on the directive', async () => { - @Component({ - template: `
`, - imports: [ToggleButtonSizeDirective], - standalone: true, - }) - class ButtonToggleComponent {} - await render(ButtonToggleComponent); const directive = screen.getByTestId('dir'); - expect(directive.getAttribute('hrabuttontogglesize')).toBe('large'); - expect(directive.style.font).toBe('var(--sys-label-large)'); + const styles = window.getComputedStyle(directive); + const lineHeight = styles.getPropertyValue('--mat-standard-button-toggle-height'); + const font = styles.getPropertyValue('font'); + expect(font).toBe('var(--sys-label-large)'); + expect(lineHeight).toBe('24px'); }); }); diff --git a/libs/design-system/expansion-panel/src/lib/expansion-panel-animations.ts b/libs/design-system/expansion-panel/src/lib/expansion-panel-animations.ts index d1a5e4de5..5fa236396 100644 --- a/libs/design-system/expansion-panel/src/lib/expansion-panel-animations.ts +++ b/libs/design-system/expansion-panel/src/lib/expansion-panel-animations.ts @@ -1,16 +1,11 @@ -import { animate, AnimationTriggerMetadata, state, style, transition, trigger } from '@angular/animations'; +import { animate, state, style, transition, trigger } from '@angular/animations'; /** Animation for the expansion panel */ export const EXPANSION_PANEL_ANIMATION_TIMING = '225ms cubic-bezier(0.4,0.0,0.2,1)'; -/** Animation declaration for the expansion panel */ -export const matExpansionAnimations: { - readonly bodyExpansion: AnimationTriggerMetadata; -} = { - /** Animation that expands and collapses the panel content. */ - bodyExpansion: trigger('bodyExpansion', [ - state('collapsed, void', style({ height: '0px', visibility: 'hidden' })), - state('expanded', style({ height: '*', visibility: '' })), - transition('expanded <=> collapsed, void => collapsed', animate(EXPANSION_PANEL_ANIMATION_TIMING)), - ]), -}; +/** Animation for Body Expansion */ +export const BODY_EXPANSION = trigger('bodyExpansion', [ + state('collapsed, void', style({ height: '0px', visibility: 'hidden' })), + state('expanded', style({ height: '*', visibility: '' })), + transition('expanded <=> collapsed, void => collapsed', animate(EXPANSION_PANEL_ANIMATION_TIMING)), +]); diff --git a/libs/design-system/expansion-panel/src/lib/expansion-panel.component.html b/libs/design-system/expansion-panel/src/lib/expansion-panel.component.html index 473b82f36..318e80d9e 100644 --- a/libs/design-system/expansion-panel/src/lib/expansion-panel.component.html +++ b/libs/design-system/expansion-panel/src/lib/expansion-panel.component.html @@ -9,7 +9,7 @@
@if (!disabled()) { diff --git a/libs/design-system/expansion-panel/src/lib/expansion-panel.component.ts b/libs/design-system/expansion-panel/src/lib/expansion-panel.component.ts index d124a796b..b1384703c 100644 --- a/libs/design-system/expansion-panel/src/lib/expansion-panel.component.ts +++ b/libs/design-system/expansion-panel/src/lib/expansion-panel.component.ts @@ -16,7 +16,7 @@ import { import { MatIconButton } from '@angular/material/button'; import { MatIconModule } from '@angular/material/icon'; import { IconButtonSizeDirective } from '@hra-ui/design-system/icon-button'; -import { matExpansionAnimations } from './expansion-panel-animations'; +import { BODY_EXPANSION } from './expansion-panel-animations'; /** Counter to keep track of distinct panels */ let idCounter = 0; @@ -44,7 +44,7 @@ export class ExpansionPanelHeaderContentComponent {} selector: 'hra-expansion-panel', standalone: true, imports: [CommonModule, CdkAccordionModule, IconButtonSizeDirective, MatIconButton, MatIconModule], - animations: [matExpansionAnimations.bodyExpansion], + animations: [BODY_EXPANSION], templateUrl: './expansion-panel.component.html', styleUrl: './expansion-panel.component.scss', changeDetection: ChangeDetectionStrategy.OnPush, From f24b335fbed5f694ccca95d2fd2f14f4c3ade071 Mon Sep 17 00:00:00 2001 From: Edward Lu <36934022+edlu77@users.noreply.github.com> Date: Wed, 23 Oct 2024 17:01:56 -0400 Subject: [PATCH 9/9] Cde nav header updates (#778) * Update app logos component * Add sidenav to nav header and update landing page * Add product logos to design system * Update nav header with product logo DS component * Rename App Logos to Nav Header Buttons * Add software status indicator * Updates to nav header components * Small changes to nav header styles * Adjust header styling * Remove duplication * Software status indicator updates * Updates to sidenav demo * Sidenav updates * Tweaks * Testing and documentation * Fix testing --- .../create-visualization-page.component.html | 5 +- .../create-visualization-page.component.scss | 3 +- .../create-visualization-page.component.ts | 102 +++++++++- .../landing-page/landing-page.component.html | 8 +- .../landing-page/landing-page.component.scss | 2 + .../landing-page.component.spec.ts | 2 + .../landing-page/landing-page.component.ts | 10 +- libs/design-system/app-logos/src/index.ts | 1 - .../src/lib/app-logos.component.html | 19 -- .../src/lib/app-logos.component.scss | 93 --------- .../src/lib/app-logos.component.spec.ts | 39 ---- .../src/lib/app-logos.component.stories.ts | 47 ----- .../app-logos/src/lib/app-logos.component.ts | 33 --- .../assets/icons/products/3d_organ_models.svg | 22 ++ .../icons/products/3d_organ_models_large.svg | 22 ++ .../assets/icons/products/api.svg | 12 ++ .../assets/icons/products/api_large.svg | 12 ++ .../assets/icons/products/app_library.svg | 24 +++ .../icons/products/app_library_large.svg | 24 +++ .../assets/icons/products/asctb_reporter.svg | 21 ++ .../products/asctb_reporter_large.svg} | 0 .../assets/icons/products/cde.svg | 20 ++ .../products/cde_large.svg} | 0 .../icons/products/cell_population_graphs.svg | 13 ++ .../products/cell_population_graphs_large.svg | 13 ++ .../assets/icons/products/cpp.svg | 20 ++ .../assets/icons/products/cpp_large.svg | 20 ++ .../assets/icons/products/dashboards.svg | 12 ++ .../products/dashboards_large.svg} | 0 .../assets/icons/products/design_system.svg | 18 ++ .../icons/products/design_system_large.svg | 18 ++ .../assets/icons/products/dev_portal.svg | 18 ++ .../icons/products/dev_portal_large.svg | 18 ++ .../assets/icons/products/eui.svg | 16 ++ .../eui.svg => icons/products/eui_large.svg} | 0 .../assets/icons/products/ftu.svg | 14 ++ .../products/ftu_large.svg} | 0 .../icons/products/human_atlas_stories.svg | 18 ++ .../products/human_atlas_stories_large.svg | 18 ++ .../assets/icons/products/millitome.svg | 21 ++ .../assets/icons/products/millitome_large.svg | 21 ++ .../assets/icons/products/omaps.svg | 14 ++ .../assets/icons/products/omaps_large.svg | 14 ++ .../assets/icons/products/organ_gallery.svg | 13 ++ .../icons/products/organ_gallery_large.svg | 13 ++ .../assets/icons/products/rui.svg | 12 ++ .../products/rui_large.svg} | 0 .../assets/icons/products/top.svg | 23 +++ .../assets/icons/products/top_large.svg | 23 +++ .../assets/icons/products/vccf.svg | 37 ++++ .../assets/icons/products/vccf_large.svg | 37 ++++ .../assets/icons/products/web_components.svg | 21 ++ .../icons/products/web_components_large.svg | 21 ++ .../{app-logos => brandmark}/ng-package.json | 0 .../src/lib/brandmark.component.scss | 9 + .../nav-header-buttons/ng-package.json | 5 + .../nav-header-buttons/src/index.ts | 1 + .../src/lib/nav-header-buttons.component.html | 29 +++ .../src/lib/nav-header-buttons.component.scss | 50 +++++ .../lib/nav-header-buttons.component.spec.ts | 28 +++ .../nav-header-buttons.component.stories.ts | 66 ++++++ .../src/lib/nav-header-buttons.component.ts | 45 +++++ .../src/lib/nav-header.component.html | 53 ++++- .../src/lib/nav-header.component.scss | 91 ++++++++- .../src/lib/nav-header.component.spec.ts | 17 +- .../src/lib/nav-header.component.stories.ts | 164 +++++++++++++-- .../src/lib/nav-header.component.ts | 48 ++++- .../product-logo/ng-package.json | 5 + libs/design-system/product-logo/src/index.ts | 1 + .../src/lib/product-logo.component.html | 1 + .../src/lib/product-logo.component.scss | 11 + .../src/lib/product-logo.component.ts | 28 +++ .../src/lib/product-logo.stories.ts | 61 ++++++ .../software-status-indicator/ng-package.json | 5 + .../software-status-indicator/src/index.ts | 1 + ...oftware-status-indicator-size.directive.ts | 29 +++ .../software-status-indicator.component.html | 8 + .../software-status-indicator.component.scss | 12 ++ ...ware-status-indicator.component.stories.ts | 38 ++++ .../software-status-indicator.component.ts | 36 ++++ .../apps-sidenav-demo.component.html | 37 ++-- .../apps-sidenav-demo.component.scss | 71 +++++-- .../apps-sidenav-demo.component.ts | 190 +++++++++--------- libs/design-system/styles/_typography.scss | 8 + tsconfig.base.json | 15 +- 85 files changed, 1739 insertions(+), 431 deletions(-) delete mode 100644 libs/design-system/app-logos/src/index.ts delete mode 100644 libs/design-system/app-logos/src/lib/app-logos.component.html delete mode 100644 libs/design-system/app-logos/src/lib/app-logos.component.scss delete mode 100644 libs/design-system/app-logos/src/lib/app-logos.component.spec.ts delete mode 100644 libs/design-system/app-logos/src/lib/app-logos.component.stories.ts delete mode 100644 libs/design-system/app-logos/src/lib/app-logos.component.ts create mode 100644 libs/design-system/assets/icons/products/3d_organ_models.svg create mode 100644 libs/design-system/assets/icons/products/3d_organ_models_large.svg create mode 100644 libs/design-system/assets/icons/products/api.svg create mode 100644 libs/design-system/assets/icons/products/api_large.svg create mode 100644 libs/design-system/assets/icons/products/app_library.svg create mode 100644 libs/design-system/assets/icons/products/app_library_large.svg create mode 100644 libs/design-system/assets/icons/products/asctb_reporter.svg rename libs/design-system/assets/{logo/asctb-reporter.svg => icons/products/asctb_reporter_large.svg} (100%) create mode 100644 libs/design-system/assets/icons/products/cde.svg rename libs/design-system/assets/{logo/cde_logo.svg => icons/products/cde_large.svg} (100%) create mode 100644 libs/design-system/assets/icons/products/cell_population_graphs.svg create mode 100644 libs/design-system/assets/icons/products/cell_population_graphs_large.svg create mode 100644 libs/design-system/assets/icons/products/cpp.svg create mode 100644 libs/design-system/assets/icons/products/cpp_large.svg create mode 100644 libs/design-system/assets/icons/products/dashboards.svg rename libs/design-system/assets/{logo/dashboards_logo.svg => icons/products/dashboards_large.svg} (100%) create mode 100644 libs/design-system/assets/icons/products/design_system.svg create mode 100644 libs/design-system/assets/icons/products/design_system_large.svg create mode 100644 libs/design-system/assets/icons/products/dev_portal.svg create mode 100644 libs/design-system/assets/icons/products/dev_portal_large.svg create mode 100644 libs/design-system/assets/icons/products/eui.svg rename libs/design-system/assets/{logo/eui.svg => icons/products/eui_large.svg} (100%) create mode 100644 libs/design-system/assets/icons/products/ftu.svg rename libs/design-system/assets/{logo/ftu_logo.svg => icons/products/ftu_large.svg} (100%) create mode 100644 libs/design-system/assets/icons/products/human_atlas_stories.svg create mode 100644 libs/design-system/assets/icons/products/human_atlas_stories_large.svg create mode 100644 libs/design-system/assets/icons/products/millitome.svg create mode 100644 libs/design-system/assets/icons/products/millitome_large.svg create mode 100644 libs/design-system/assets/icons/products/omaps.svg create mode 100644 libs/design-system/assets/icons/products/omaps_large.svg create mode 100644 libs/design-system/assets/icons/products/organ_gallery.svg create mode 100644 libs/design-system/assets/icons/products/organ_gallery_large.svg create mode 100644 libs/design-system/assets/icons/products/rui.svg rename libs/design-system/assets/{logo/atlas_apps.svg => icons/products/rui_large.svg} (100%) create mode 100644 libs/design-system/assets/icons/products/top.svg create mode 100644 libs/design-system/assets/icons/products/top_large.svg create mode 100644 libs/design-system/assets/icons/products/vccf.svg create mode 100644 libs/design-system/assets/icons/products/vccf_large.svg create mode 100644 libs/design-system/assets/icons/products/web_components.svg create mode 100644 libs/design-system/assets/icons/products/web_components_large.svg rename libs/design-system/{app-logos => brandmark}/ng-package.json (100%) create mode 100644 libs/design-system/nav-header-buttons/ng-package.json create mode 100644 libs/design-system/nav-header-buttons/src/index.ts create mode 100644 libs/design-system/nav-header-buttons/src/lib/nav-header-buttons.component.html create mode 100644 libs/design-system/nav-header-buttons/src/lib/nav-header-buttons.component.scss create mode 100644 libs/design-system/nav-header-buttons/src/lib/nav-header-buttons.component.spec.ts create mode 100644 libs/design-system/nav-header-buttons/src/lib/nav-header-buttons.component.stories.ts create mode 100644 libs/design-system/nav-header-buttons/src/lib/nav-header-buttons.component.ts create mode 100644 libs/design-system/product-logo/ng-package.json create mode 100644 libs/design-system/product-logo/src/index.ts create mode 100644 libs/design-system/product-logo/src/lib/product-logo.component.html create mode 100644 libs/design-system/product-logo/src/lib/product-logo.component.scss create mode 100644 libs/design-system/product-logo/src/lib/product-logo.component.ts create mode 100644 libs/design-system/product-logo/src/lib/product-logo.stories.ts create mode 100644 libs/design-system/software-status-indicator/ng-package.json create mode 100644 libs/design-system/software-status-indicator/src/index.ts create mode 100644 libs/design-system/software-status-indicator/src/lib/software-status-indicator-size.directive.ts create mode 100644 libs/design-system/software-status-indicator/src/lib/software-status-indicator.component.html create mode 100644 libs/design-system/software-status-indicator/src/lib/software-status-indicator.component.scss create mode 100644 libs/design-system/software-status-indicator/src/lib/software-status-indicator.component.stories.ts create mode 100644 libs/design-system/software-status-indicator/src/lib/software-status-indicator.component.ts diff --git a/apps/cde-ui/src/app/pages/create-visualization-page/create-visualization-page.component.html b/apps/cde-ui/src/app/pages/create-visualization-page/create-visualization-page.component.html index 52bebf107..974426d74 100644 --- a/apps/cde-ui/src/app/pages/create-visualization-page/create-visualization-page.component.html +++ b/apps/cde-ui/src/app/pages/create-visualization-page/create-visualization-page.component.html @@ -1,8 +1,9 @@
diff --git a/apps/cde-ui/src/app/pages/create-visualization-page/create-visualization-page.component.scss b/apps/cde-ui/src/app/pages/create-visualization-page/create-visualization-page.component.scss index ccd079f51..55f8c81dc 100644 --- a/apps/cde-ui/src/app/pages/create-visualization-page/create-visualization-page.component.scss +++ b/apps/cde-ui/src/app/pages/create-visualization-page/create-visualization-page.component.scss @@ -4,10 +4,11 @@ background: url('../../../assets/backgrounds/create-visualization-page-background.png') no-repeat; background-position: center; background-size: cover; + position: relative; + top: 4.5rem; hra-nav-header { border-bottom: 1px solid var(--sys-outline); - height: 5rem; } ::ng-deep .app-logo .app-description { diff --git a/apps/cde-ui/src/app/pages/create-visualization-page/create-visualization-page.component.ts b/apps/cde-ui/src/app/pages/create-visualization-page/create-visualization-page.component.ts index 77f2a3974..258d18603 100644 --- a/apps/cde-ui/src/app/pages/create-visualization-page/create-visualization-page.component.ts +++ b/apps/cde-ui/src/app/pages/create-visualization-page/create-visualization-page.component.ts @@ -26,7 +26,7 @@ import { BreadcrumbsComponent } from '@hra-ui/design-system/breadcrumbs'; import { ButtonModule } from '@hra-ui/design-system/button'; import { ToggleButtonSizeDirective } from '@hra-ui/design-system/button-toggle'; import { FooterComponent } from '@hra-ui/design-system/footer'; -import { NavHeaderComponent } from '@hra-ui/design-system/nav-header'; +import { CardData, NavHeaderComponent } from '@hra-ui/design-system/nav-header'; import { SelectSizeDirective } from '@hra-ui/design-system/select'; import { StepIndicatorComponent } from '@hra-ui/design-system/step-indicator'; import { TooltipCardComponent, TooltipContent } from '@hra-ui/design-system/tooltip-card'; @@ -34,11 +34,105 @@ import { ParseError } from 'papaparse'; import { MarkEmptyFormControlDirective } from '../../components/empty-form-control/empty-form-control.directive'; import { FileLoadError, FileUploadComponent } from '../../components/file-upload/file-upload.component'; -import { HeaderComponent } from '../../components/header/header.component'; import { VisualizationDataService } from '../../services/visualization-data-service/visualization-data.service'; import { validateInteger } from '../../shared/form-validators/is-integer'; import { OrganEntry } from '../../shared/resolvers/organs/organs.resolver'; +/** HuBMAP cards data */ +export const HUBMAP_CARDS_DATA: CardData[] = [ + { + category: 'About', + cards: [ + { + name: 'HuBMAP Consortium', + icon: 'assets/logo/hubmap.svg', + title: 'HuBMAP Consortium', + description: + 'HuBMAP all access: Learn about us, our policies, data, and tools. Explore our publications and how to work with us.', + link: 'https://hubmapconsortium.org/', + }, + ], + }, + { + category: 'Data', + cards: [ + { + name: 'HubMAP Data Portal', + icon: 'assets/logo/data_portal.svg', + title: 'HuBMAP Data Portal', + description: + 'Explore, visualize and download consortium-generated spatial and single cell data for the human body.', + link: 'https://portal.hubmapconsortium.org/', + }, + { + name: 'Data Portal Workspaces', + icon: 'assets/logo/data_portal.svg', + title: 'Data Portal Workspaces', + description: + 'Access HuBMAP data in a lightweight exploration platform and perform analyses directly within the portal.', + link: 'https://portal.hubmapconsortium.org/workspaces', + }, + ], + }, + { + category: 'Atlas', + cards: [ + { + name: 'Human Reference Atlas', + icon: 'assets/logo/hra_small.svg', + title: 'Human Reference Atlas', + description: + 'Use the HRA Portal to access atlas data, explore atlas functionality, and contribute to the Human Reference Atlas.', + link: 'https://humanatlas.io/', + }, + { + name: 'Exploration User Interface', + icon: 'assets/logo/eui.svg', + title: 'Exploration User Interface', + description: + 'Explore and validate spatially registered single-cell datasets in three-dimensions across organs.', + link: 'https://apps.humanatlas.io/eui/', + }, + { + name: 'ASCT+B Reporter', + icon: 'assets/logo/asctb-reporter.svg', + title: 'ASCT+B Reporter', + description: + 'Explore and compare ASCT+B tables and construct validated panels for multiplexed antibody-based imaging (OMAPs) tables.', + link: 'https://hubmapconsortium.github.io/ccf-asct-reporter/', + }, + ], + }, + { + category: 'Analytics Tools', + cards: [ + { + name: 'Azimuth', + icon: 'assets/logo/azimuth.svg', + title: 'Azimuth', + description: + 'Azimuth uses a reference dataset to process, analyze, and interpret single-cell RNA-seq or ATAC-seq experiments.', + link: 'https://azimuth.hubmapconsortium.org/', + }, + { + name: 'FUSION', + icon: 'assets/logo/fusion.svg', + title: 'FUSION', + description: 'Functional Unit State Identification and Navigation with WSI.', + link: 'http://fusion.hubmapconsortium.org/?utm_source=hubmap', + }, + { + name: 'Antibody Validation Reports', + icon: 'assets/logo/antibody-validation-reports.svg', + title: 'Antibody Validation Reports', + description: + 'Provide antibody details for multiplex imaging assays and capture data requested by journals for manuscript submission.', + link: 'https://avr.hubmapconsortium.org/', + }, + ], + }, +]; + /** Error when missing required columns in uploaded csv */ export interface MissingKeyError { /** Error type */ @@ -78,7 +172,6 @@ function optionalValue(): T | null { ButtonModule, FileUploadComponent, FooterComponent, - HeaderComponent, MarkEmptyFormControlDirective, NavHeaderComponent, OverlayModule, @@ -95,6 +188,9 @@ export class CreateVisualizationPageComponent { /** Organ entries */ readonly organs = input.required(); + /** Data for sidenav cards */ + readonly sideNavData = HUBMAP_CARDS_DATA; + /** Node data upload component */ private readonly nodesFileUpload = viewChild.required('nodesFileUpload'); /** Color map upload component */ diff --git a/apps/cde-ui/src/app/pages/landing-page/landing-page.component.html b/apps/cde-ui/src/app/pages/landing-page/landing-page.component.html index ce6403f67..c69ed5ca9 100644 --- a/apps/cde-ui/src/app/pages/landing-page/landing-page.component.html +++ b/apps/cde-ui/src/app/pages/landing-page/landing-page.component.html @@ -1,4 +1,10 @@ - +
diff --git a/apps/cde-ui/src/app/pages/landing-page/landing-page.component.scss b/apps/cde-ui/src/app/pages/landing-page/landing-page.component.scss index 759cf552b..0f6354591 100644 --- a/apps/cde-ui/src/app/pages/landing-page/landing-page.component.scss +++ b/apps/cde-ui/src/app/pages/landing-page/landing-page.component.scss @@ -4,6 +4,8 @@ } display: block; background-color: rgba(252, 252, 252, 1); + position: relative; + top: 4.5rem; .create-and-explore { max-width: 18rem; diff --git a/apps/cde-ui/src/app/pages/landing-page/landing-page.component.spec.ts b/apps/cde-ui/src/app/pages/landing-page/landing-page.component.spec.ts index c71a94a35..76d916d15 100644 --- a/apps/cde-ui/src/app/pages/landing-page/landing-page.component.spec.ts +++ b/apps/cde-ui/src/app/pages/landing-page/landing-page.component.spec.ts @@ -4,6 +4,8 @@ import { provideIcons } from '@hra-ui/cdk/icons'; import { render, screen } from '@testing-library/angular'; import { LandingPageComponent } from './landing-page.component'; +jest.mock('vega-embed', () => ({ default: jest.fn() })); + describe('LandingPageComponent', () => { const providers = [provideHttpClient(), provideHttpClientTesting(), provideIcons()]; diff --git a/apps/cde-ui/src/app/pages/landing-page/landing-page.component.ts b/apps/cde-ui/src/app/pages/landing-page/landing-page.component.ts index 03919b196..4355ec960 100644 --- a/apps/cde-ui/src/app/pages/landing-page/landing-page.component.ts +++ b/apps/cde-ui/src/app/pages/landing-page/landing-page.component.ts @@ -3,11 +3,12 @@ import { ChangeDetectionStrategy, Component, input } from '@angular/core'; import { MatButtonModule } from '@angular/material/button'; import { MatIconModule } from '@angular/material/icon'; import { YouTubePlayerModule } from '@angular/youtube-player'; - import { AssetUrlPipe } from '@hra-ui/cdk/app-href'; import { FooterComponent } from '@hra-ui/design-system/footer'; -import { HeaderComponent } from '../../components/header/header.component'; +import { NavHeaderComponent } from '@hra-ui/design-system/nav-header'; + import { VisualCard, VisualCardComponent } from '../../components/visual-card/visual-card.component'; +import { HUBMAP_CARDS_DATA } from '../create-visualization-page/create-visualization-page.component'; /** * Landing Page Component @@ -21,9 +22,9 @@ import { VisualCard, VisualCardComponent } from '../../components/visual-card/vi MatIconModule, MatButtonModule, YouTubePlayerModule, - HeaderComponent, FooterComponent, AssetUrlPipe, + NavHeaderComponent, ], templateUrl: './landing-page.component.html', styleUrl: './landing-page.component.scss', @@ -32,4 +33,7 @@ import { VisualCard, VisualCardComponent } from '../../components/visual-card/vi export class LandingPageComponent { /** Visual cards to display on the landing page */ readonly cards = input([]); + + /** Data for sidenav cards */ + readonly sideNavData = HUBMAP_CARDS_DATA; } diff --git a/libs/design-system/app-logos/src/index.ts b/libs/design-system/app-logos/src/index.ts deleted file mode 100644 index 7bfeda6a6..000000000 --- a/libs/design-system/app-logos/src/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './lib/app-logos.component'; diff --git a/libs/design-system/app-logos/src/lib/app-logos.component.html b/libs/design-system/app-logos/src/lib/app-logos.component.html deleted file mode 100644 index 6cb449e7e..000000000 --- a/libs/design-system/app-logos/src/lib/app-logos.component.html +++ /dev/null @@ -1,19 +0,0 @@ - - diff --git a/libs/design-system/app-logos/src/lib/app-logos.component.scss b/libs/design-system/app-logos/src/lib/app-logos.component.scss deleted file mode 100644 index 0db5eb1d8..000000000 --- a/libs/design-system/app-logos/src/lib/app-logos.component.scss +++ /dev/null @@ -1,93 +0,0 @@ -:host { - display: flex; - height: 3rem; - - > a { - display: inline-block; - } - - .hra-logo, - .app-logo { - display: inline-flex; - color: var(--sys-secondary); - } - - .hra-logo { - width: 7.25rem; - margin-right: 0.5rem; - - .hra-logo-text { - font: var(--sys-label-small); - letter-spacing: var(--sys-label-small-tracking); - line-height: 0.875rem; - width: min-content; - align-self: center; - margin: 0 auto; - } - } - - .app-logo { - span { - display: flex; - flex-direction: column; - justify-content: center; - } - - img { - margin-right: 0.75rem; - } - - .app-label { - font: var(--sys-title-medium); - letter-spacing: var(--sys-title-medium-tracking); - } - - .app-description { - font: var(--sys-label-medium); - letter-spacing: var(--sys-label-medium-tracking); - color: var(--sys-on-secondary-fixed); - } - } - - @media (max-width: 1012px) { - &[variant='default'] { - height: 2.375rem; - - .hra-logo { - width: fit-content; - margin-right: 0.25rem; - - .hra-logo-text { - display: none; - } - } - - .app-logo { - img { - margin-right: 0.5rem; - } - - .app-label { - font: var(--sys-title-small); - letter-spacing: var(--sys-title-small-tracking); - } - - .app-description { - font: var(--sys-label-small); - letter-spacing: var(--sys-label-small-tracking); - } - } - } - } - - &[variant='fixed'] { - .hra-logo { - width: fit-content; - margin-right: 0.25rem; - - .hra-logo-text { - display: none; - } - } - } -} diff --git a/libs/design-system/app-logos/src/lib/app-logos.component.spec.ts b/libs/design-system/app-logos/src/lib/app-logos.component.spec.ts deleted file mode 100644 index bf6edd19b..000000000 --- a/libs/design-system/app-logos/src/lib/app-logos.component.spec.ts +++ /dev/null @@ -1,39 +0,0 @@ -import { provideHttpClient } from '@angular/common/http'; -import { provideHttpClientTesting } from '@angular/common/http/testing'; -import { provideIcons } from '@hra-ui/cdk/icons'; -import { render, screen } from '@testing-library/angular'; - -import { AppLogosComponent } from './app-logos.component'; - -describe('AppLogosComponent', () => { - const globalProviders = [provideHttpClient(), provideHttpClientTesting(), provideIcons()]; - - beforeEach(async () => { - await render(AppLogosComponent, { - providers: globalProviders, - componentInputs: { - appLink: 'https://apps.humanatlas.io/ftu-explorer/#/', - appIcon: 'assets/logo/ftu_logo.svg', - appTitle: 'FTU Explorer', - appDescription: 'HRA Preview Application', - }, - }); - }); - - it('should render the Human Reference Atlas logo', async () => { - const logo = screen.getByAltText('HRA logo'); - expect(logo).toBeInTheDocument(); - expect(logo).toHaveAttribute('src', 'assets/logo/hra_small.svg'); - }); - - it('should render the app logo', async () => { - const appLogo = screen.getByAltText('FTU Explorer logo'); - expect(appLogo).toBeInTheDocument(); - expect(appLogo).toHaveAttribute('src', 'assets/logo/ftu_logo.svg'); - }); - - it('should display the app title and description', async () => { - expect(screen.getByText('FTU Explorer')).toBeInTheDocument(); - expect(screen.getByText('HRA Preview Application')).toBeInTheDocument(); - }); -}); diff --git a/libs/design-system/app-logos/src/lib/app-logos.component.stories.ts b/libs/design-system/app-logos/src/lib/app-logos.component.stories.ts deleted file mode 100644 index 64b52899d..000000000 --- a/libs/design-system/app-logos/src/lib/app-logos.component.stories.ts +++ /dev/null @@ -1,47 +0,0 @@ -import { AppLogosComponent } from './app-logos.component'; - -import type { Meta, StoryObj } from '@storybook/angular'; -const meta: Meta = { - component: AppLogosComponent, - title: 'AppLogosComponent', - parameters: { - design: { - type: 'figma', - url: 'https://www.figma.com/design/BCEJn9KCIbBJ5MzqnojKQp/Design-System-Components?node-id=75-4', - }, - }, - argTypes: { - appLink: { - control: 'select', - options: [ - 'https://apps.humanatlas.io/ftu-explorer/#/', - 'https://apps.humanatlas.io/cde/', - 'https://apps.humanatlas.io/dashboard/', - ], - }, - appIcon: { - control: 'select', - options: ['assets/logo/ftu_logo.svg', 'assets/logo/cde_logo.svg', 'assets/logo/dashboards_logo.svg'], - }, - appTitle: { - control: 'select', - options: ['FTU Explorer', 'Cell Distance Explorer', 'Dashboards'], - }, - }, - args: { - appLink: 'https://apps.humanatlas.io/ftu-explorer/#/', - appIcon: 'assets/logo/ftu_logo.svg', - appTitle: 'FTU Explorer', - appDescription: 'HRA Preview Application', - }, -}; -export default meta; -type Story = StoryObj; - -export const Default: Story = {}; - -export const Fixed: Story = { - args: { - variant: 'fixed', - }, -}; diff --git a/libs/design-system/app-logos/src/lib/app-logos.component.ts b/libs/design-system/app-logos/src/lib/app-logos.component.ts deleted file mode 100644 index c3174eaff..000000000 --- a/libs/design-system/app-logos/src/lib/app-logos.component.ts +++ /dev/null @@ -1,33 +0,0 @@ -import { CommonModule } from '@angular/common'; -import { ChangeDetectionStrategy, Component, input } from '@angular/core'; -import { AssetUrlPipe } from '@hra-ui/cdk/app-href'; - -export type AppLogosVariant = 'default' | 'fixed'; - -/** - * Logo buttons used in webpage navigation headers, side navigation menus, and application header toolbars. - */ -@Component({ - selector: 'hra-app-logos', - standalone: true, - imports: [CommonModule, AssetUrlPipe], - templateUrl: './app-logos.component.html', - styleUrl: './app-logos.component.scss', - changeDetection: ChangeDetectionStrategy.OnPush, - host: { - '[attr.variant]': 'variant()', - }, -}) -export class AppLogosComponent { - /** Variant of logo component */ - readonly variant = input('default'); - - /** Link to app home page */ - readonly appLink = input.required(); - /** Src url for app icon */ - readonly appIcon = input.required(); - /** App title */ - readonly appTitle = input.required(); - /** Description of app */ - readonly appDescription = input(); -} diff --git a/libs/design-system/assets/icons/products/3d_organ_models.svg b/libs/design-system/assets/icons/products/3d_organ_models.svg new file mode 100644 index 000000000..a6cf2459f --- /dev/null +++ b/libs/design-system/assets/icons/products/3d_organ_models.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/libs/design-system/assets/icons/products/3d_organ_models_large.svg b/libs/design-system/assets/icons/products/3d_organ_models_large.svg new file mode 100644 index 000000000..3964f3946 --- /dev/null +++ b/libs/design-system/assets/icons/products/3d_organ_models_large.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/libs/design-system/assets/icons/products/api.svg b/libs/design-system/assets/icons/products/api.svg new file mode 100644 index 000000000..22e58040a --- /dev/null +++ b/libs/design-system/assets/icons/products/api.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/libs/design-system/assets/icons/products/api_large.svg b/libs/design-system/assets/icons/products/api_large.svg new file mode 100644 index 000000000..5f3eed911 --- /dev/null +++ b/libs/design-system/assets/icons/products/api_large.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/libs/design-system/assets/icons/products/app_library.svg b/libs/design-system/assets/icons/products/app_library.svg new file mode 100644 index 000000000..7cae0a922 --- /dev/null +++ b/libs/design-system/assets/icons/products/app_library.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/libs/design-system/assets/icons/products/app_library_large.svg b/libs/design-system/assets/icons/products/app_library_large.svg new file mode 100644 index 000000000..8add0727a --- /dev/null +++ b/libs/design-system/assets/icons/products/app_library_large.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/libs/design-system/assets/icons/products/asctb_reporter.svg b/libs/design-system/assets/icons/products/asctb_reporter.svg new file mode 100644 index 000000000..a97bd29f2 --- /dev/null +++ b/libs/design-system/assets/icons/products/asctb_reporter.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/libs/design-system/assets/logo/asctb-reporter.svg b/libs/design-system/assets/icons/products/asctb_reporter_large.svg similarity index 100% rename from libs/design-system/assets/logo/asctb-reporter.svg rename to libs/design-system/assets/icons/products/asctb_reporter_large.svg diff --git a/libs/design-system/assets/icons/products/cde.svg b/libs/design-system/assets/icons/products/cde.svg new file mode 100644 index 000000000..5b9fa89b6 --- /dev/null +++ b/libs/design-system/assets/icons/products/cde.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/libs/design-system/assets/logo/cde_logo.svg b/libs/design-system/assets/icons/products/cde_large.svg similarity index 100% rename from libs/design-system/assets/logo/cde_logo.svg rename to libs/design-system/assets/icons/products/cde_large.svg diff --git a/libs/design-system/assets/icons/products/cell_population_graphs.svg b/libs/design-system/assets/icons/products/cell_population_graphs.svg new file mode 100644 index 000000000..66f162478 --- /dev/null +++ b/libs/design-system/assets/icons/products/cell_population_graphs.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/libs/design-system/assets/icons/products/cell_population_graphs_large.svg b/libs/design-system/assets/icons/products/cell_population_graphs_large.svg new file mode 100644 index 000000000..aff6555f5 --- /dev/null +++ b/libs/design-system/assets/icons/products/cell_population_graphs_large.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/libs/design-system/assets/icons/products/cpp.svg b/libs/design-system/assets/icons/products/cpp.svg new file mode 100644 index 000000000..1821f165f --- /dev/null +++ b/libs/design-system/assets/icons/products/cpp.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/libs/design-system/assets/icons/products/cpp_large.svg b/libs/design-system/assets/icons/products/cpp_large.svg new file mode 100644 index 000000000..e789e30b4 --- /dev/null +++ b/libs/design-system/assets/icons/products/cpp_large.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/libs/design-system/assets/icons/products/dashboards.svg b/libs/design-system/assets/icons/products/dashboards.svg new file mode 100644 index 000000000..f63f66293 --- /dev/null +++ b/libs/design-system/assets/icons/products/dashboards.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/libs/design-system/assets/logo/dashboards_logo.svg b/libs/design-system/assets/icons/products/dashboards_large.svg similarity index 100% rename from libs/design-system/assets/logo/dashboards_logo.svg rename to libs/design-system/assets/icons/products/dashboards_large.svg diff --git a/libs/design-system/assets/icons/products/design_system.svg b/libs/design-system/assets/icons/products/design_system.svg new file mode 100644 index 000000000..b9a298175 --- /dev/null +++ b/libs/design-system/assets/icons/products/design_system.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/libs/design-system/assets/icons/products/design_system_large.svg b/libs/design-system/assets/icons/products/design_system_large.svg new file mode 100644 index 000000000..51b6d5dc0 --- /dev/null +++ b/libs/design-system/assets/icons/products/design_system_large.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/libs/design-system/assets/icons/products/dev_portal.svg b/libs/design-system/assets/icons/products/dev_portal.svg new file mode 100644 index 000000000..ffd2b9819 --- /dev/null +++ b/libs/design-system/assets/icons/products/dev_portal.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/libs/design-system/assets/icons/products/dev_portal_large.svg b/libs/design-system/assets/icons/products/dev_portal_large.svg new file mode 100644 index 000000000..dc2d57ae9 --- /dev/null +++ b/libs/design-system/assets/icons/products/dev_portal_large.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/libs/design-system/assets/icons/products/eui.svg b/libs/design-system/assets/icons/products/eui.svg new file mode 100644 index 000000000..2581b48c8 --- /dev/null +++ b/libs/design-system/assets/icons/products/eui.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/libs/design-system/assets/logo/eui.svg b/libs/design-system/assets/icons/products/eui_large.svg similarity index 100% rename from libs/design-system/assets/logo/eui.svg rename to libs/design-system/assets/icons/products/eui_large.svg diff --git a/libs/design-system/assets/icons/products/ftu.svg b/libs/design-system/assets/icons/products/ftu.svg new file mode 100644 index 000000000..cc28743f4 --- /dev/null +++ b/libs/design-system/assets/icons/products/ftu.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/libs/design-system/assets/logo/ftu_logo.svg b/libs/design-system/assets/icons/products/ftu_large.svg similarity index 100% rename from libs/design-system/assets/logo/ftu_logo.svg rename to libs/design-system/assets/icons/products/ftu_large.svg diff --git a/libs/design-system/assets/icons/products/human_atlas_stories.svg b/libs/design-system/assets/icons/products/human_atlas_stories.svg new file mode 100644 index 000000000..76edfca40 --- /dev/null +++ b/libs/design-system/assets/icons/products/human_atlas_stories.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/libs/design-system/assets/icons/products/human_atlas_stories_large.svg b/libs/design-system/assets/icons/products/human_atlas_stories_large.svg new file mode 100644 index 000000000..dced4bb30 --- /dev/null +++ b/libs/design-system/assets/icons/products/human_atlas_stories_large.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/libs/design-system/assets/icons/products/millitome.svg b/libs/design-system/assets/icons/products/millitome.svg new file mode 100644 index 000000000..250514a61 --- /dev/null +++ b/libs/design-system/assets/icons/products/millitome.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/libs/design-system/assets/icons/products/millitome_large.svg b/libs/design-system/assets/icons/products/millitome_large.svg new file mode 100644 index 000000000..1c26b6949 --- /dev/null +++ b/libs/design-system/assets/icons/products/millitome_large.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/libs/design-system/assets/icons/products/omaps.svg b/libs/design-system/assets/icons/products/omaps.svg new file mode 100644 index 000000000..e9a04205c --- /dev/null +++ b/libs/design-system/assets/icons/products/omaps.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/libs/design-system/assets/icons/products/omaps_large.svg b/libs/design-system/assets/icons/products/omaps_large.svg new file mode 100644 index 000000000..3fc395dd3 --- /dev/null +++ b/libs/design-system/assets/icons/products/omaps_large.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/libs/design-system/assets/icons/products/organ_gallery.svg b/libs/design-system/assets/icons/products/organ_gallery.svg new file mode 100644 index 000000000..cc6a0cdf7 --- /dev/null +++ b/libs/design-system/assets/icons/products/organ_gallery.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/libs/design-system/assets/icons/products/organ_gallery_large.svg b/libs/design-system/assets/icons/products/organ_gallery_large.svg new file mode 100644 index 000000000..030dbac8f --- /dev/null +++ b/libs/design-system/assets/icons/products/organ_gallery_large.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/libs/design-system/assets/icons/products/rui.svg b/libs/design-system/assets/icons/products/rui.svg new file mode 100644 index 000000000..43889319a --- /dev/null +++ b/libs/design-system/assets/icons/products/rui.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/libs/design-system/assets/logo/atlas_apps.svg b/libs/design-system/assets/icons/products/rui_large.svg similarity index 100% rename from libs/design-system/assets/logo/atlas_apps.svg rename to libs/design-system/assets/icons/products/rui_large.svg diff --git a/libs/design-system/assets/icons/products/top.svg b/libs/design-system/assets/icons/products/top.svg new file mode 100644 index 000000000..5f35c86b6 --- /dev/null +++ b/libs/design-system/assets/icons/products/top.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/libs/design-system/assets/icons/products/top_large.svg b/libs/design-system/assets/icons/products/top_large.svg new file mode 100644 index 000000000..5e147c8c5 --- /dev/null +++ b/libs/design-system/assets/icons/products/top_large.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/libs/design-system/assets/icons/products/vccf.svg b/libs/design-system/assets/icons/products/vccf.svg new file mode 100644 index 000000000..7f6de1bda --- /dev/null +++ b/libs/design-system/assets/icons/products/vccf.svg @@ -0,0 +1,37 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/libs/design-system/assets/icons/products/vccf_large.svg b/libs/design-system/assets/icons/products/vccf_large.svg new file mode 100644 index 000000000..5d3a8a7d2 --- /dev/null +++ b/libs/design-system/assets/icons/products/vccf_large.svg @@ -0,0 +1,37 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/libs/design-system/assets/icons/products/web_components.svg b/libs/design-system/assets/icons/products/web_components.svg new file mode 100644 index 000000000..6a02e898f --- /dev/null +++ b/libs/design-system/assets/icons/products/web_components.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/libs/design-system/assets/icons/products/web_components_large.svg b/libs/design-system/assets/icons/products/web_components_large.svg new file mode 100644 index 000000000..6de6a67e7 --- /dev/null +++ b/libs/design-system/assets/icons/products/web_components_large.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/libs/design-system/app-logos/ng-package.json b/libs/design-system/brandmark/ng-package.json similarity index 100% rename from libs/design-system/app-logos/ng-package.json rename to libs/design-system/brandmark/ng-package.json diff --git a/libs/design-system/brandmark/src/lib/brandmark.component.scss b/libs/design-system/brandmark/src/lib/brandmark.component.scss index 1cd97bf90..621681a2c 100644 --- a/libs/design-system/brandmark/src/lib/brandmark.component.scss +++ b/libs/design-system/brandmark/src/lib/brandmark.component.scss @@ -1,3 +1,12 @@ :host { color: var(--hra-brandmark-color, var(--sys-tertiary)); + + .hra-brandmark { + height: 100%; + + ::ng-deep svg { + height: 100%; + width: min-content; + } + } } diff --git a/libs/design-system/nav-header-buttons/ng-package.json b/libs/design-system/nav-header-buttons/ng-package.json new file mode 100644 index 000000000..c781f0df4 --- /dev/null +++ b/libs/design-system/nav-header-buttons/ng-package.json @@ -0,0 +1,5 @@ +{ + "lib": { + "entryFile": "src/index.ts" + } +} diff --git a/libs/design-system/nav-header-buttons/src/index.ts b/libs/design-system/nav-header-buttons/src/index.ts new file mode 100644 index 000000000..622f8ac9f --- /dev/null +++ b/libs/design-system/nav-header-buttons/src/index.ts @@ -0,0 +1 @@ +export * from './lib/nav-header-buttons.component'; diff --git a/libs/design-system/nav-header-buttons/src/lib/nav-header-buttons.component.html b/libs/design-system/nav-header-buttons/src/lib/nav-header-buttons.component.html new file mode 100644 index 000000000..940065840 --- /dev/null +++ b/libs/design-system/nav-header-buttons/src/lib/nav-header-buttons.component.html @@ -0,0 +1,29 @@ +@if (brandmark()) { + +} + + + + @if (variant() === 'sidenav') { + + {{ appTitle() }} + + } @else { + + {{ appTitle() }} + + } + @if (appStatus()) { + + } + diff --git a/libs/design-system/nav-header-buttons/src/lib/nav-header-buttons.component.scss b/libs/design-system/nav-header-buttons/src/lib/nav-header-buttons.component.scss new file mode 100644 index 000000000..13da7e285 --- /dev/null +++ b/libs/design-system/nav-header-buttons/src/lib/nav-header-buttons.component.scss @@ -0,0 +1,50 @@ +:host { + display: flex; + height: 2.5rem; + + > a { + display: inline-block; + } + + .hra-logo, + .app-logo { + display: inline-flex; + color: var(--sys-secondary); + } + + .hra-logo { + margin-right: 0.25rem; + } + + .app-logo { + margin-right: 0.125rem; + } + + .logos-text { + display: flex; + flex-direction: column; + justify-content: center; + .app-label { + font: var(--sys-label-large); + letter-spacing: var(--sys-label-large-tracking); + } + } + + .app-name { + margin-left: 0.5rem; + color: var(--sys-secondary); + } + + mat-button-toggle { + --mat-standard-button-toggle-height: 1.25rem; + + ::ng-deep .mat-button-toggle-button { + display: flex; + align-items: center; + } + } + + hra-software-status-indicator { + margin-left: 0.5rem; + } +} diff --git a/libs/design-system/nav-header-buttons/src/lib/nav-header-buttons.component.spec.ts b/libs/design-system/nav-header-buttons/src/lib/nav-header-buttons.component.spec.ts new file mode 100644 index 000000000..9945ba2cb --- /dev/null +++ b/libs/design-system/nav-header-buttons/src/lib/nav-header-buttons.component.spec.ts @@ -0,0 +1,28 @@ +import { provideHttpClient } from '@angular/common/http'; +import { provideHttpClientTesting } from '@angular/common/http/testing'; +import { provideIcons } from '@hra-ui/cdk/icons'; +import { render, screen } from '@testing-library/angular'; + +import { NavHeaderButtonsComponent } from './nav-header-buttons.component'; + +describe('NavHeaderButtonsComponent', () => { + const globalProviders = [provideHttpClient(), provideHttpClientTesting(), provideIcons()]; + + beforeEach(async () => { + await render(NavHeaderButtonsComponent, { + providers: globalProviders, + componentInputs: { + appLink: 'https://apps.humanatlas.io/ftu-explorer/#/', + app: 'ftu', + appTitle: 'FTU Explorer', + appStatus: 'Beta', + variant: 'basic', + }, + }); + }); + + it('should display the app title and status', async () => { + expect(screen.getByText('FTU Explorer')).toBeInTheDocument(); + expect(screen.getByText('Beta')).toBeInTheDocument(); + }); +}); diff --git a/libs/design-system/nav-header-buttons/src/lib/nav-header-buttons.component.stories.ts b/libs/design-system/nav-header-buttons/src/lib/nav-header-buttons.component.stories.ts new file mode 100644 index 000000000..d555706a4 --- /dev/null +++ b/libs/design-system/nav-header-buttons/src/lib/nav-header-buttons.component.stories.ts @@ -0,0 +1,66 @@ +import { NavHeaderButtonsComponent } from './nav-header-buttons.component'; + +import { applicationConfig, moduleMetadata, type Meta, type StoryObj } from '@storybook/angular'; +import { provideDesignSystem } from '@hra-ui/design-system'; +import { ButtonModule } from '@hra-ui/design-system/button'; + +const meta: Meta = { + component: NavHeaderButtonsComponent, + title: 'NavHeaderButtonsComponent', + decorators: [ + applicationConfig({ + providers: [provideDesignSystem()], + }), + moduleMetadata({ + imports: [ButtonModule], + }), + ], + parameters: { + design: { + type: 'figma', + url: 'https://www.figma.com/design/BCEJn9KCIbBJ5MzqnojKQp/Design-System-Components?node-id=75-4', + }, + }, + argTypes: { + appLink: { + control: 'select', + options: [ + 'https://apps.humanatlas.io/ftu-explorer/#/', + 'https://apps.humanatlas.io/cde/', + 'https://apps.humanatlas.io/dashboard/', + ], + }, + app: { + control: 'select', + options: ['ftu', 'cde', 'dashboards'], + }, + appTitle: { + control: 'select', + options: ['FTU Explorer', 'Cell Distance Explorer', 'Dashboards'], + }, + variant: { + control: 'select', + options: ['basic', 'sidenav'], + }, + brandmark: { + control: 'boolean', + options: [true, false], + }, + appStatus: { + control: 'select', + options: ['Beta', 'Alpha', 'Preview', undefined], + }, + }, +}; +export default meta; +type Story = StoryObj; + +export const Default: Story = { + args: { + variant: 'sidenav', + brandmark: true, + appLink: 'https://apps.humanatlas.io/ftu-explorer/#/', + app: 'ftu', + appTitle: 'FTU Explorer', + }, +}; diff --git a/libs/design-system/nav-header-buttons/src/lib/nav-header-buttons.component.ts b/libs/design-system/nav-header-buttons/src/lib/nav-header-buttons.component.ts new file mode 100644 index 000000000..e94c10a7d --- /dev/null +++ b/libs/design-system/nav-header-buttons/src/lib/nav-header-buttons.component.ts @@ -0,0 +1,45 @@ +import { CommonModule } from '@angular/common'; +import { ChangeDetectionStrategy, Component, input } from '@angular/core'; +import { AssetUrlPipe } from '@hra-ui/cdk/app-href'; +import { BrandmarkComponent } from '@hra-ui/design-system/brandmark'; +import { ButtonModule, ButtonSizeDirective, NavigationCategoryButtonDirective } from '@hra-ui/design-system/button'; +import { ProductLogoComponent } from '@hra-ui/design-system/product-logo'; +import { SoftwareStatus, SoftwareStatusIndicatorComponent } from '@hra-ui/design-system/software-status-indicator'; + +/** Variant of nav header button */ +export type NavHeaderButtonsVariant = 'basic' | 'sidenav'; + +/** + * Logo buttons used in webpage navigation headers, side navigation menus, and application header toolbars. + */ +@Component({ + selector: 'hra-nav-header-buttons', + standalone: true, + imports: [ + CommonModule, + AssetUrlPipe, + BrandmarkComponent, + NavigationCategoryButtonDirective, + ButtonSizeDirective, + ButtonModule, + ProductLogoComponent, + SoftwareStatusIndicatorComponent, + ], + templateUrl: './nav-header-buttons.component.html', + styleUrl: './nav-header-buttons.component.scss', + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class NavHeaderButtonsComponent { + /** Variant of logo component */ + readonly variant = input('basic'); + /** App software status */ + readonly appStatus = input(); + /** Whether to show the HRA brandmark */ + readonly brandmark = input(true); + /** Current app */ + readonly app = input.required(); + /** Link to app home page */ + readonly appLink = input.required(); + /** App title */ + readonly appTitle = input.required(); +} diff --git a/libs/design-system/nav-header/src/lib/nav-header.component.html b/libs/design-system/nav-header/src/lib/nav-header.component.html index 2f9649a64..ffa82c75c 100644 --- a/libs/design-system/nav-header/src/lib/nav-header.component.html +++ b/libs/design-system/nav-header/src/lib/nav-header.component.html @@ -1,11 +1,42 @@ - -
- + + +
+ HuBMAP Tools & Applications +
+ +
+ + @for (item of navigationCategories(); track item) { +
+
{{ item.category }}
+ @for (card of item.cards; track card) { + + } +
+ } + + + + +
+ +
+ +
+ + diff --git a/libs/design-system/nav-header/src/lib/nav-header.component.scss b/libs/design-system/nav-header/src/lib/nav-header.component.scss index 9cc8ec87e..3e9e94b20 100644 --- a/libs/design-system/nav-header/src/lib/nav-header.component.scss +++ b/libs/design-system/nav-header/src/lib/nav-header.component.scss @@ -1,11 +1,86 @@ :host { - display: flex; - align-items: center; - height: 4.5rem; - padding: 0 0.75rem 0 1rem; - background-color: var(--sys-surface-container); - - .filler { - flex-grow: 1; + display: block; + color: var(--sys-secondary); + width: 100%; + z-index: 2; + --mat-sidenav-content-background-color: transparent; + position: fixed; + height: 100vh; + pointer-events: none; + top: 0; + + .container { + height: 100%; + font: var(--sys-headline-small); + letter-spacing: var(--sys-headline-small-tracking); + } + + .header { + display: flex; + align-items: center; + font: var(--sys-title-small); + height: 4.5rem; + padding-right: 0.5rem; + padding-left: 1rem; + + .sidenav-title { + vertical-align: text-bottom; + color: var(--sys-secondary); + } + } + + ng-scrollbar { + --scrollbar-offset: 4; + height: calc(100% - 4.5rem); + } + + mat-sidenav-content { + overflow: hidden; + + .main { + display: flex; + align-items: center; + background-color: var(--sys-surface-container-high); + height: 4.5rem; + padding: 0 0.5rem 0 0.75rem; + pointer-events: all; + border-bottom: 1px solid #acb5c3; + } + } + + .mat-drawer-container-has-open { + pointer-events: all; + } + + .apps-sidenav { + --mat-sidenav-container-width: 35.25rem; + border-radius: 0; + background-color: var(--sys-surface-container-high); + pointer-events: all; + + .category { + padding-top: 1rem; + padding-bottom: 1rem; + display: flex; + flex-direction: column; + gap: 0.5rem; + border-top: 1px solid var(--sys-outline); + } + + .card-category { + font: var(--sys-title-small); + letter-spacing: var(--sys-title-small-tracking); + color: var(--sys-primary-fixed); + } + + .card-category, + hra-apps-card { + padding-left: 1rem; + padding-right: 1rem; + } + } + + ::ng-deep .mat-drawer-inner-container { + overflow: hidden; } } diff --git a/libs/design-system/nav-header/src/lib/nav-header.component.spec.ts b/libs/design-system/nav-header/src/lib/nav-header.component.spec.ts index 0536257d9..75f21af39 100644 --- a/libs/design-system/nav-header/src/lib/nav-header.component.spec.ts +++ b/libs/design-system/nav-header/src/lib/nav-header.component.spec.ts @@ -1,18 +1,25 @@ import { render, screen } from '@testing-library/angular'; import { NavHeaderComponent } from './nav-header.component'; +import { provideHttpClient } from '@angular/common/http'; +import { provideHttpClientTesting } from '@angular/common/http/testing'; +import { provideIcons } from '@hra-ui/cdk/icons'; describe('NavHeaderComponent', () => { + const globalProviders = [provideHttpClient(), provideHttpClientTesting(), provideIcons()]; + const link = 'example.com'; - const icon = 'icon.svg'; + const app = 'hra'; const title = 'test title'; beforeEach(async () => { await render(NavHeaderComponent, { + providers: globalProviders, componentInputs: { link: link, - icon: icon, + app: app, title: title, - description: 'Test Description', + status: 'Beta', + navigationCategories: [], }, }); }); @@ -21,7 +28,7 @@ describe('NavHeaderComponent', () => { expect(screen.getByText('test title')).toBeInTheDocument(); }); - it('should render description', () => { - expect(screen.getByText('Test Description')).toBeInTheDocument(); + it('should render app status', () => { + expect(screen.getByText('Beta')).toBeInTheDocument(); }); }); diff --git a/libs/design-system/nav-header/src/lib/nav-header.component.stories.ts b/libs/design-system/nav-header/src/lib/nav-header.component.stories.ts index 03757c9a0..38c053b3b 100644 --- a/libs/design-system/nav-header/src/lib/nav-header.component.stories.ts +++ b/libs/design-system/nav-header/src/lib/nav-header.component.stories.ts @@ -1,35 +1,125 @@ +import { importProvidersFrom } from '@angular/core'; +import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { applicationConfig, Meta, StoryObj } from '@storybook/angular'; -import { provideDesignSystem } from '../../../src/index'; + +import { provideDesignSystem } from '../../../src'; import { NavHeaderComponent } from './nav-header.component'; -const APP_DESCRIPTION = 'HRA Preview Application'; const apps: Record = { 'Cell Distance Explorer': { title: 'Cell Distance Explorer', - icon: 'assets/logo/cde_logo.svg', + app: 'cde', link: 'https://apps.humanatlas.io/cde/', - description: APP_DESCRIPTION, + variant: 'basic', }, 'FTU Explorer': { title: 'FTU Explorer', - icon: 'assets/logo/ftu_logo.svg', - link: 'https://apps.humanatlas.io/cde/', - description: APP_DESCRIPTION, + app: 'ftu', + link: 'https://apps.humanatlas.io/ftu-explorer/', + variant: 'basic', }, Dashboards: { title: 'Dashboards', - icon: 'assets/logo/dashboards_logo.svg', + app: 'dashboards', link: 'https://apps.humanatlas.io/dashboard-ui/', - description: APP_DESCRIPTION, - }, - 'Atlas Applications': { - title: 'Atlas Applications', - icon: 'assets/logo/atlas_apps.svg', - link: 'https://apps.humanatlas.io/', - description: APP_DESCRIPTION, + variant: 'sidenav', }, }; +const sidenavData = [ + { + category: 'About', + cards: [ + { + name: 'HuBMAP Consortium', + icon: 'assets/logo/hubmap.svg', + title: 'HuBMAP Consortium', + description: + 'HuBMAP all access: Learn about us, our policies, data, and tools. Explore our publications and how to work with us.', + link: 'https://hubmapconsortium.org/', + }, + ], + }, + { + category: 'Data', + cards: [ + { + name: 'HubMAP Data Portal', + icon: 'assets/logo/data_portal.svg', + title: 'HuBMAP Data Portal', + description: + 'Explore, visualize and download consortium-generated spatial and single cell data for the human body.', + link: 'https://portal.hubmapconsortium.org/', + }, + { + name: 'Data Portal Workspaces', + icon: 'assets/logo/data_portal.svg', + title: 'Data Portal Workspaces', + description: + 'Access HuBMAP data in a lightweight exploration platform and perform analyses directly within the portal.', + link: 'https://portal.hubmapconsortium.org/workspaces', + }, + ], + }, + { + category: 'Atlas', + cards: [ + { + name: 'Human Reference Atlas', + icon: 'assets/logo/hra_small.svg', + title: 'Human Reference Atlas', + description: + 'Use the HRA Portal to access atlas data, explore atlas functionality, and contribute to the Human Reference Atlas.', + link: 'https://humanatlas.io/', + }, + { + name: 'Exploration User Interface', + icon: 'assets/logo/eui.svg', + title: 'Exploration User Interface', + description: + 'Explore and validate spatially registered single-cell datasets in three-dimensions across organs.', + link: 'https://apps.humanatlas.io/eui/', + }, + { + name: 'ASCT+B Reporter', + icon: 'assets/logo/asctb-reporter.svg', + title: 'ASCT+B Reporter', + description: + 'Explore and compare ASCT+B tables and construct validated panels for multiplexed antibody-based imaging (OMAPs) tables.', + link: 'https://hubmapconsortium.github.io/ccf-asct-reporter/', + }, + ], + }, + { + category: 'Analytics Tools', + cards: [ + { + name: 'Azimuth', + icon: 'assets/logo/azimuth.svg', + title: 'Azimuth', + description: + 'Azimuth uses a reference dataset to process, analyze, and interpret single-cell RNA-seq or ATAC-seq experiments.', + link: 'https://azimuth.hubmapconsortium.org/', + }, + { + name: 'FUSION', + icon: 'assets/logo/fusion.svg', + title: 'FUSION', + description: 'Functional Unit State Identification and Navigation with WSI.', + link: 'http://fusion.hubmapconsortium.org/?utm_source=hubmap', + }, + { + name: 'Antibody Validation Reports', + icon: 'assets/logo/antibody-validation-reports.svg', + title: 'Antibody Validation Reports', + description: + 'Provide antibody details for multiplex imaging assays and capture data requested by journals for manuscript submission.', + link: 'https://avr.hubmapconsortium.org/', + }, + ], + }, +]; + const meta: Meta = { component: NavHeaderComponent, title: 'NavHeaderComponent', @@ -41,25 +131,55 @@ const meta: Meta = { }, decorators: [ applicationConfig({ - providers: [provideDesignSystem()], + providers: [provideDesignSystem(), importProvidersFrom(BrowserAnimationsModule)], }), ], argTypes: { app: { + control: 'select', + options: ['cde', 'ftu', 'dashboards'], + }, + variant: { + control: 'select', + options: ['basic', 'sidenav'], + }, + link: { + control: 'select', + options: [ + 'https://apps.humanatlas.io/cde/', + 'https://apps.humanatlas.io/ftu-explorer/', + 'https://apps.humanatlas.io/dashboard-ui/', + ], + }, + title: { control: 'select', options: Object.keys(apps), - mapping: apps, }, - }, - args: { - app: apps['Cell Distance Explorer'], + status: { + control: 'select', + options: ['Beta', 'Alpha', 'Preview', undefined], + }, }, render: (args) => ({ - props: args['app'], + props: args, + styles: [ + `hra-nav-header { + position: relative; + }`, + ], }), }; export default meta; type Story = StoryObj; -export const Primary: Story = {}; +export const Primary: Story = { + args: { + app: 'cde', + variant: 'basic', + link: 'https://apps.humanatlas.io/cde/', + title: 'Cell Distance Explorer', + status: undefined, + navigationCategories: sidenavData, + }, +}; diff --git a/libs/design-system/nav-header/src/lib/nav-header.component.ts b/libs/design-system/nav-header/src/lib/nav-header.component.ts index a0a9b8554..c63ca9535 100644 --- a/libs/design-system/nav-header/src/lib/nav-header.component.ts +++ b/libs/design-system/nav-header/src/lib/nav-header.component.ts @@ -2,8 +2,31 @@ import { CommonModule } from '@angular/common'; import { ChangeDetectionStrategy, Component, input } from '@angular/core'; import { MatButtonModule } from '@angular/material/button'; import { MatIconModule } from '@angular/material/icon'; +import { MatSidenavModule } from '@angular/material/sidenav'; +import { AppsCardComponent } from '@hra-ui/design-system/apps-card'; import { IconButtonSizeDirective } from '@hra-ui/design-system/icon-button'; -import { AppLogosComponent, AppLogosVariant } from '@hra-ui/design-system/app-logos'; +import { NavHeaderButtonsComponent, NavHeaderButtonsVariant } from '@hra-ui/design-system/nav-header-buttons'; +import { ScrollingModule } from '@hra-ui/design-system/scrolling'; +import { SoftwareStatus } from '@hra-ui/design-system/software-status-indicator'; + +/** Sidenav card data */ +export interface CardData { + /** Name of card category */ + category: string; + /** Info for apps in category */ + cards: { + /** Name of app */ + name: string; + /** Icon path */ + icon: string; + /** App title */ + title: string; + /** App description */ + description: string; + /** Link to app */ + link: string; + }[]; +} /** * Navigation Header Component @@ -11,20 +34,31 @@ import { AppLogosComponent, AppLogosVariant } from '@hra-ui/design-system/app-lo @Component({ selector: 'hra-nav-header', standalone: true, - imports: [CommonModule, MatButtonModule, MatIconModule, AppLogosComponent, IconButtonSizeDirective], + imports: [ + CommonModule, + MatButtonModule, + MatIconModule, + NavHeaderButtonsComponent, + IconButtonSizeDirective, + MatSidenavModule, + AppsCardComponent, + ScrollingModule, + ], templateUrl: './nav-header.component.html', styleUrl: './nav-header.component.scss', changeDetection: ChangeDetectionStrategy.OnPush, }) export class NavHeaderComponent { /** Variant of the header */ - readonly variant = input('default'); + readonly variant = input('basic'); /** Link to the app */ readonly link = input.required(); - /** Icon for the app */ - readonly icon = input.required(); + /** Current app */ + readonly app = input.required(); /** Name of the app */ readonly title = input.required(); - /** Description of the app */ - readonly description = input(); + /** Status of the app */ + readonly status = input(); + /** Data to display in sidenav */ + readonly navigationCategories = input.required(); } diff --git a/libs/design-system/product-logo/ng-package.json b/libs/design-system/product-logo/ng-package.json new file mode 100644 index 000000000..c781f0df4 --- /dev/null +++ b/libs/design-system/product-logo/ng-package.json @@ -0,0 +1,5 @@ +{ + "lib": { + "entryFile": "src/index.ts" + } +} diff --git a/libs/design-system/product-logo/src/index.ts b/libs/design-system/product-logo/src/index.ts new file mode 100644 index 000000000..375943ec8 --- /dev/null +++ b/libs/design-system/product-logo/src/index.ts @@ -0,0 +1 @@ +export * from './lib/product-logo.component'; diff --git a/libs/design-system/product-logo/src/lib/product-logo.component.html b/libs/design-system/product-logo/src/lib/product-logo.component.html new file mode 100644 index 000000000..86074ae5e --- /dev/null +++ b/libs/design-system/product-logo/src/lib/product-logo.component.html @@ -0,0 +1 @@ + diff --git a/libs/design-system/product-logo/src/lib/product-logo.component.scss b/libs/design-system/product-logo/src/lib/product-logo.component.scss new file mode 100644 index 000000000..90cfa5374 --- /dev/null +++ b/libs/design-system/product-logo/src/lib/product-logo.component.scss @@ -0,0 +1,11 @@ +:host { + mat-icon { + width: 5rem; + height: 5rem; + + &.small { + width: 2.5rem; + height: 2.5rem; + } + } +} diff --git a/libs/design-system/product-logo/src/lib/product-logo.component.ts b/libs/design-system/product-logo/src/lib/product-logo.component.ts new file mode 100644 index 000000000..d6d74297e --- /dev/null +++ b/libs/design-system/product-logo/src/lib/product-logo.component.ts @@ -0,0 +1,28 @@ +import { CommonModule } from '@angular/common'; +import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core'; +import { MatIconModule } from '@angular/material/icon'; + +/** Button size type */ +export type ProductLogoSize = 'small' | 'large'; + +/** + * HRA product logos + */ +@Component({ + selector: 'hra-product-logo', + standalone: true, + imports: [CommonModule, MatIconModule], + templateUrl: './product-logo.component.html', + styleUrl: './product-logo.component.scss', + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class ProductLogoComponent { + /** Button name */ + readonly name = input.required(); + + /** Button size */ + readonly size = input.required(); + + /** Icon to display */ + protected readonly icon = computed(() => `products:${this.name()}${this.size() === 'large' ? '_large' : ''}`); +} diff --git a/libs/design-system/product-logo/src/lib/product-logo.stories.ts b/libs/design-system/product-logo/src/lib/product-logo.stories.ts new file mode 100644 index 000000000..df7a3e6ec --- /dev/null +++ b/libs/design-system/product-logo/src/lib/product-logo.stories.ts @@ -0,0 +1,61 @@ +import { provideHttpClient } from '@angular/common/http'; +import { provideIcons } from '@hra-ui/cdk/icons'; +import { applicationConfig, Meta, StoryObj } from '@storybook/angular'; + +import { ProductLogoComponent } from './product-logo.component'; + +const meta: Meta = { + component: ProductLogoComponent, + title: 'ProductLogoComponent', + parameters: { + design: { + type: 'figma', + url: 'https://www.figma.com/design/BCEJn9KCIbBJ5MzqnojKQp/HRA-Components?node-id=1409-4', + }, + }, + decorators: [ + applicationConfig({ + providers: [provideHttpClient(), provideIcons()], + }), + ], +}; +export default meta; +type Story = StoryObj; + +export const Default: Story = { + args: { + name: 'design_system', + size: 'large', + }, + argTypes: { + name: { + control: 'select', + options: [ + '3d_organ_models', + 'api', + 'app_library', + 'asctb_reporter', + 'cde', + 'cell_population_graphs', + 'cpp', + 'dashboards', + 'design_system', + 'dev_portal', + 'eui', + 'ftu', + 'human_atlas_stories', + 'millitome', + 'omaps', + 'organ_gallery', + 'rui', + 'top', + 'vccf', + 'web_components', + ], + }, + size: { + control: 'select', + options: ['small', 'large'], + }, + }, +}; diff --git a/libs/design-system/software-status-indicator/ng-package.json b/libs/design-system/software-status-indicator/ng-package.json new file mode 100644 index 000000000..c781f0df4 --- /dev/null +++ b/libs/design-system/software-status-indicator/ng-package.json @@ -0,0 +1,5 @@ +{ + "lib": { + "entryFile": "src/index.ts" + } +} diff --git a/libs/design-system/software-status-indicator/src/index.ts b/libs/design-system/software-status-indicator/src/index.ts new file mode 100644 index 000000000..dc56d095e --- /dev/null +++ b/libs/design-system/software-status-indicator/src/index.ts @@ -0,0 +1 @@ +export * from './lib/software-status-indicator.component'; diff --git a/libs/design-system/software-status-indicator/src/lib/software-status-indicator-size.directive.ts b/libs/design-system/software-status-indicator/src/lib/software-status-indicator-size.directive.ts new file mode 100644 index 000000000..6c4de07af --- /dev/null +++ b/libs/design-system/software-status-indicator/src/lib/software-status-indicator-size.directive.ts @@ -0,0 +1,29 @@ +import { computed, Directive, input } from '@angular/core'; + +/** Input options for Software status size */ +export type SoftwareStatusSize = 'small' | 'medium' | 'large'; + +/** Record of button fonts */ +const STATUS_FONTS: Record = { + small: 'var(--sys-label-micro)', + medium: 'var(--sys-label-medium)', + large: 'var(--sys-label-large)', +}; + +/** + * Directive for icon buttons + */ +@Directive({ + selector: '[hraSoftwareStatusSize]', + standalone: true, + host: { + '[style.font]': 'font()', + }, +}) +export class SoftwareStatusSizeDirective { + /** Size of icon button to use */ + readonly size = input.required({ alias: 'hraSoftwareStatusSize' }); + + /** Font */ + protected readonly font = computed(() => STATUS_FONTS[this.size()]); +} diff --git a/libs/design-system/software-status-indicator/src/lib/software-status-indicator.component.html b/libs/design-system/software-status-indicator/src/lib/software-status-indicator.component.html new file mode 100644 index 000000000..5fe743e7d --- /dev/null +++ b/libs/design-system/software-status-indicator/src/lib/software-status-indicator.component.html @@ -0,0 +1,8 @@ +
+ {{ status() }} +
diff --git a/libs/design-system/software-status-indicator/src/lib/software-status-indicator.component.scss b/libs/design-system/software-status-indicator/src/lib/software-status-indicator.component.scss new file mode 100644 index 000000000..c65fb69a5 --- /dev/null +++ b/libs/design-system/software-status-indicator/src/lib/software-status-indicator.component.scss @@ -0,0 +1,12 @@ +:host { + .app-description { + font: var(--sys-label-micro); + letter-spacing: var(--sys-label-micro-tracking); + border-radius: 0.125rem; + width: fit-content; + padding: 0.125rem 0.25rem; + color: var(--sys-on-tertiary-fixed); + background: rgb(from var(--sys-on-tertiary-container) r g b / 0.08); + cursor: default; + } +} diff --git a/libs/design-system/software-status-indicator/src/lib/software-status-indicator.component.stories.ts b/libs/design-system/software-status-indicator/src/lib/software-status-indicator.component.stories.ts new file mode 100644 index 000000000..e6f0263ec --- /dev/null +++ b/libs/design-system/software-status-indicator/src/lib/software-status-indicator.component.stories.ts @@ -0,0 +1,38 @@ +import { provideDesignSystem } from '@hra-ui/design-system'; +import { applicationConfig, type Meta, type StoryObj } from '@storybook/angular'; + +import { SoftwareStatusIndicatorComponent } from './software-status-indicator.component'; + +const meta: Meta = { + component: SoftwareStatusIndicatorComponent, + title: 'SoftwareStatusIndicatorComponent', + decorators: [ + applicationConfig({ + providers: [provideDesignSystem()], + }), + ], + parameters: { + design: { + type: 'figma', + url: 'https://www.figma.com/design/BCEJn9KCIbBJ5MzqnojKQp/HRA-Components?node-id=1409-13182', + }, + }, + args: { + status: 'Beta', + size: 'medium', + }, + argTypes: { + status: { + control: 'select', + options: ['Beta', 'Alpha', 'Preview'], + }, + size: { + control: 'select', + options: ['small', 'medium', 'large'], + }, + }, +}; +export default meta; +type Story = StoryObj; + +export const Default: Story = {}; diff --git a/libs/design-system/software-status-indicator/src/lib/software-status-indicator.component.ts b/libs/design-system/software-status-indicator/src/lib/software-status-indicator.component.ts new file mode 100644 index 000000000..63ddf63ad --- /dev/null +++ b/libs/design-system/software-status-indicator/src/lib/software-status-indicator.component.ts @@ -0,0 +1,36 @@ +import { CommonModule } from '@angular/common'; +import { ChangeDetectionStrategy, Component, input } from '@angular/core'; +import { MicroTooltipDirective } from '@hra-ui/design-system/micro-tooltip'; +import { SoftwareStatusSizeDirective } from './software-status-indicator-size.directive'; + +/** Software status options */ +export type SoftwareStatus = 'Preview' | 'Alpha' | 'Beta'; + +/** Software status size options */ +export type SoftwareStatusSize = 'small' | 'medium' | 'large'; + +/** + * Indicator to display software status in nav header + */ +@Component({ + selector: 'hra-software-status-indicator', + standalone: true, + imports: [CommonModule, MicroTooltipDirective, SoftwareStatusSizeDirective], + templateUrl: './software-status-indicator.component.html', + styleUrl: './software-status-indicator.component.scss', + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class SoftwareStatusIndicatorComponent { + /** Current status of app */ + readonly status = input.required(); + + /** Size of indicator */ + readonly size = input('medium'); + + /** Tooltips corresponding to software status */ + readonly tooltips: Record = { + Preview: 'Earliest development stage: Core features are under construction and evolving.', + Alpha: 'Early testing stage: Features may change. Expect bugs and incomplete functionality.', + Beta: 'Near-final stage: Most features are ready, fewer bugs, and more feedback is needed.', + }; +} diff --git a/libs/design-system/src/lib/apps-sidenav-demo/apps-sidenav-demo.component.html b/libs/design-system/src/lib/apps-sidenav-demo/apps-sidenav-demo.component.html index 293ed3823..9a9b0b56e 100644 --- a/libs/design-system/src/lib/apps-sidenav-demo/apps-sidenav-demo.component.html +++ b/libs/design-system/src/lib/apps-sidenav-demo/apps-sidenav-demo.component.html @@ -1,24 +1,25 @@ - + +
+ HuBMAP Tools & Applications +
+ +
-
- HuBMAP Tools & Applications -
- -
- @for (item of data; track item) { -
{{ item.category }}
- @for (card of item.cards; track card) { - - } +
+
{{ item.category }}
+ @for (card of item.cards; track card) { + + } +
} diff --git a/libs/design-system/src/lib/apps-sidenav-demo/apps-sidenav-demo.component.scss b/libs/design-system/src/lib/apps-sidenav-demo/apps-sidenav-demo.component.scss index f20d26e74..ec6203d03 100644 --- a/libs/design-system/src/lib/apps-sidenav-demo/apps-sidenav-demo.component.scss +++ b/libs/design-system/src/lib/apps-sidenav-demo/apps-sidenav-demo.component.scss @@ -1,46 +1,79 @@ :host { display: block; + color: var(--sys-secondary); .container { - width: 40rem; - height: auto; + height: calc(100vh - 3rem); font: var(--sys-headline-small); letter-spacing: var(--sys-headline-small-tracking); - --mat-sidenav-content-background-color: #ffffff; - --mat-sidenav-container-background-color: var(--mat-sidenav-content-background-color); - height: calc(100vh - 3rem); + } - .header { - display: flex; - align-items: center; + .header { + display: flex; + align-items: center; + font: var(--sys-title-small); + height: 4.5rem; + padding-right: 0.5rem; + padding-left: 1rem; - .sidenav-title { - vertical-align: text-bottom; - color: var(--sys-secondary); - } + .sidenav-title { + vertical-align: text-bottom; + color: var(--sys-secondary); } } - .mat-sidenav-content { + ng-scrollbar { + --scrollbar-offset: 4; + height: calc(100% - 4.5rem); + } + + mat-sidenav-content { overflow: hidden; - margin: 1rem; .main { display: flex; align-items: center; + background-color: var(--sys-surface-container-high); + height: 4.5rem; + padding: 0 0.5rem 0 0.75rem; + pointer-events: all; + border-bottom: 1px solid #acb5c3; } } + .mat-drawer-container-has-open { + pointer-events: all; + } + .apps-sidenav { --mat-sidenav-container-width: 35.25rem; - padding: 1rem; border-radius: 0; + background-color: var(--sys-surface-container-high); + pointer-events: all; + + .category { + padding-top: 1rem; + padding-bottom: 1rem; + display: flex; + flex-direction: column; + gap: 0.5rem; + border-top: 1px solid var(--sys-outline); + } .card-category { - font: var(--sys-title-medium); - letter-spacing: var(--sys-title-medium-tracking); - margin-top: 1rem; - color: var(--sys-secondary); + font: var(--sys-title-small); + letter-spacing: var(--sys-title-small-tracking); + color: var(--sys-primary-fixed); } + + .card-category, + hra-apps-card { + padding-left: 1rem; + padding-right: 1rem; + } + } + + ::ng-deep .mat-drawer-inner-container { + overflow: hidden; } } diff --git a/libs/design-system/src/lib/apps-sidenav-demo/apps-sidenav-demo.component.ts b/libs/design-system/src/lib/apps-sidenav-demo/apps-sidenav-demo.component.ts index 3a812d0d9..646b4509e 100644 --- a/libs/design-system/src/lib/apps-sidenav-demo/apps-sidenav-demo.component.ts +++ b/libs/design-system/src/lib/apps-sidenav-demo/apps-sidenav-demo.component.ts @@ -5,101 +5,7 @@ import { MatIconModule } from '@angular/material/icon'; import { MatSidenavModule } from '@angular/material/sidenav'; import { AppsCardComponent } from '../../../apps-card/src/index'; import { ScrollingModule } from '@hra-ui/design-system/scrolling'; - -/** HuBMAP cards data */ -export const HUBMAP_CARDS_DATA = [ - { - category: 'About', - cards: [ - { - name: 'HuBMAP Consortium', - icon: 'assets/logo/hubmap.svg', - title: 'HuBMAP Consortium', - description: - 'HuBMAP all access: Learn about us, our policies, data, and tools. Explore our publications and how to work with us.', - link: 'https://hubmapconsortium.org/', - }, - ], - }, - { - category: 'Data', - cards: [ - { - name: 'HubMAP Data Portal', - icon: 'assets/logo/data_portal.svg', - title: 'HuBMAP Data Portal', - description: - 'Explore, visualize and download consortium-generated spatial and single cell data for the human body.', - link: 'https://portal.hubmapconsortium.org/', - }, - { - name: 'Data Portal Workspaces', - icon: 'assets/logo/data_portal.svg', - title: 'Data Portal Workspaces', - description: - 'Access HuBMAP data in a lightweight exploration platform and perform analyses directly within the portal.', - link: 'https://portal.hubmapconsortium.org/workspaces', - }, - ], - }, - { - category: 'Atlas', - cards: [ - { - name: 'Human Reference Atlas', - icon: 'assets/logo/hra_small.svg', - title: 'Human Reference Atlas', - description: - 'Use the HRA Portal to access atlas data, explore atlas functionality, and contribute to the Human Reference Atlas.', - link: 'https://humanatlas.io/', - }, - { - name: 'Exploration User Interface', - icon: 'assets/logo/eui.svg', - title: 'Exploration User Interface', - description: - 'Explore and validate spatially registered single-cell datasets in three-dimensions across organs.', - link: 'https://apps.humanatlas.io/eui/', - }, - { - name: 'ASCT+B Reporter', - icon: 'assets/logo/asctb-reporter.svg', - title: 'ASCT+B Reporter', - description: - 'Explore and compare ASCT+B tables and construct validated panels for multiplexed antibody-based imaging (OMAPs) tables.', - link: 'https://hubmapconsortium.github.io/ccf-asct-reporter/', - }, - ], - }, - { - category: 'Analytics Tools', - cards: [ - { - name: 'Azimuth', - icon: 'assets/logo/azimuth.svg', - title: 'Azimuth', - description: - 'Azimuth uses a reference dataset to process, analyze, and interpret single-cell RNA-seq or ATAC-seq experiments.', - link: 'https://azimuth.hubmapconsortium.org/', - }, - { - name: 'FUSION', - icon: 'assets/logo/fusion.svg', - title: 'FUSION', - description: 'Functional Unit State Identification and Navigation with WSI.', - link: 'http://fusion.hubmapconsortium.org/?utm_source=hubmap', - }, - { - name: 'Antibody Validation Reports', - icon: 'assets/logo/antibody-validation-reports.svg', - title: 'Antibody Validation Reports', - description: - 'Provide antibody details for multiplex imaging assays and capture data requested by journals for manuscript submission.', - link: 'https://avr.hubmapconsortium.org/', - }, - ], - }, -]; +import { CardData } from '@hra-ui/design-system/nav-header'; /** Apps Sidenav component */ @Component({ @@ -112,5 +18,97 @@ export const HUBMAP_CARDS_DATA = [ }) export class AppsSidenavDemoComponent { /** data to render the cards inside the sidenav */ - readonly data = HUBMAP_CARDS_DATA; + readonly data: CardData[] = [ + { + category: 'About', + cards: [ + { + name: 'HuBMAP Consortium', + icon: 'assets/logo/hubmap.svg', + title: 'HuBMAP Consortium', + description: + 'HuBMAP all access: Learn about us, our policies, data, and tools. Explore our publications and how to work with us.', + link: 'https://hubmapconsortium.org/', + }, + ], + }, + { + category: 'Data', + cards: [ + { + name: 'HubMAP Data Portal', + icon: 'assets/logo/data_portal.svg', + title: 'HuBMAP Data Portal', + description: + 'Explore, visualize and download consortium-generated spatial and single cell data for the human body.', + link: 'https://portal.hubmapconsortium.org/', + }, + { + name: 'Data Portal Workspaces', + icon: 'assets/logo/data_portal.svg', + title: 'Data Portal Workspaces', + description: + 'Access HuBMAP data in a lightweight exploration platform and perform analyses directly within the portal.', + link: 'https://portal.hubmapconsortium.org/workspaces', + }, + ], + }, + { + category: 'Atlas', + cards: [ + { + name: 'Human Reference Atlas', + icon: 'assets/logo/hra_small.svg', + title: 'Human Reference Atlas', + description: + 'Use the HRA Portal to access atlas data, explore atlas functionality, and contribute to the Human Reference Atlas.', + link: 'https://humanatlas.io/', + }, + { + name: 'Exploration User Interface', + icon: 'assets/logo/eui.svg', + title: 'Exploration User Interface', + description: + 'Explore and validate spatially registered single-cell datasets in three-dimensions across organs.', + link: 'https://apps.humanatlas.io/eui/', + }, + { + name: 'ASCT+B Reporter', + icon: 'assets/logo/asctb-reporter.svg', + title: 'ASCT+B Reporter', + description: + 'Explore and compare ASCT+B tables and construct validated panels for multiplexed antibody-based imaging (OMAPs) tables.', + link: 'https://hubmapconsortium.github.io/ccf-asct-reporter/', + }, + ], + }, + { + category: 'Analytics Tools', + cards: [ + { + name: 'Azimuth', + icon: 'assets/logo/azimuth.svg', + title: 'Azimuth', + description: + 'Azimuth uses a reference dataset to process, analyze, and interpret single-cell RNA-seq or ATAC-seq experiments.', + link: 'https://azimuth.hubmapconsortium.org/', + }, + { + name: 'FUSION', + icon: 'assets/logo/fusion.svg', + title: 'FUSION', + description: 'Functional Unit State Identification and Navigation with WSI.', + link: 'http://fusion.hubmapconsortium.org/?utm_source=hubmap', + }, + { + name: 'Antibody Validation Reports', + icon: 'assets/logo/antibody-validation-reports.svg', + title: 'Antibody Validation Reports', + description: + 'Provide antibody details for multiplex imaging assays and capture data requested by journals for manuscript submission.', + link: 'https://avr.hubmapconsortium.org/', + }, + ], + }, + ]; } diff --git a/libs/design-system/styles/_typography.scss b/libs/design-system/styles/_typography.scss index 7905af7fa..2f0538842 100644 --- a/libs/design-system/styles/_typography.scss +++ b/libs/design-system/styles/_typography.scss @@ -122,4 +122,12 @@ $overrides: ( --sys-wordmark-small-size: 0.75rem; --sys-wordmark-small-tracking: 0rem; --sys-wordmark-small-weight: 400; + + // Micro label + --sys-label-micro: 500 0.625rem / 1rem #{$_brand}; + --sys-label-micro-font: #{$_brand}; + --sys-label-micro-line-height: 1rem; + --sys-label-micro-size: 0.625rem; + --sys-label-micro-tracking: 0rem; + --sys-label-micro-weight: 500; } diff --git a/tsconfig.base.json b/tsconfig.base.json index 0f716a9a0..679aee034 100644 --- a/tsconfig.base.json +++ b/tsconfig.base.json @@ -65,15 +65,15 @@ "@hra-ui/design-system": [ "libs/design-system/src/index.ts" ], - "@hra-ui/design-system/app-logos": [ - "libs/design-system/app-logos/src/index.ts" - ], "@hra-ui/design-system/apps-card": [ "libs/design-system/apps-card/src/index.ts" ], "@hra-ui/design-system/brand-logo": [ "libs/design-system/brand-logo/src/index.ts" ], + "@hra-ui/design-system/brandmark": [ + "libs/design-system/brandmark/src/index.ts" + ], "@hra-ui/design-system/breadcrumbs": [ "libs/design-system/breadcrumbs/src/index.ts" ], @@ -113,6 +113,12 @@ "@hra-ui/design-system/nav-header": [ "libs/design-system/nav-header/src/index.ts" ], + "@hra-ui/design-system/nav-header-buttons": [ + "libs/design-system/nav-header-buttons/src/index.ts" + ], + "@hra-ui/design-system/product-logo": [ + "libs/design-system/product-logo/src/index.ts" + ], "@hra-ui/design-system/scrolling": [ "libs/design-system/scrolling/src/index.ts" ], @@ -128,6 +134,9 @@ "@hra-ui/design-system/social-media-button": [ "libs/design-system/social-media-button/src/index.ts" ], + "@hra-ui/design-system/software-status-indicator": [ + "libs/design-system/software-status-indicator/src/index.ts" + ], "@hra-ui/design-system/step-indicator": [ "libs/design-system/step-indicator/src/index.ts" ],