From 71f286c701a8503c9f97ffd6ff9c4d733cf35636 Mon Sep 17 00:00:00 2001 From: Daniel Bolin Date: Wed, 24 Apr 2024 14:09:07 -0400 Subject: [PATCH 01/33] Remove duplicate jest preset file --- apps/humanatlas.io/jest.config.ts | 2 +- jest.preset.cjs | 15 --------------- 2 files changed, 1 insertion(+), 16 deletions(-) delete mode 100644 jest.preset.cjs diff --git a/apps/humanatlas.io/jest.config.ts b/apps/humanatlas.io/jest.config.ts index a938e410b..1bbf075e8 100644 --- a/apps/humanatlas.io/jest.config.ts +++ b/apps/humanatlas.io/jest.config.ts @@ -1,6 +1,6 @@ export default { displayName: 'humanatlas.io', - preset: '../../jest.preset.cjs', + preset: '../../jest.preset.js', coverageDirectory: '../../coverage/apps/humanatlas.io', setupFilesAfterEnv: ['/src/test-setup.ts'], globals: {}, diff --git a/jest.preset.cjs b/jest.preset.cjs deleted file mode 100644 index 508d9144c..000000000 --- a/jest.preset.cjs +++ /dev/null @@ -1,15 +0,0 @@ -const nxPreset = require('@nx/jest/preset').default; - -module.exports = { - ...nxPreset, - collectCoverage: true, - coveragePathIgnorePatterns: ['/node_modules/', 'index.ts', '.*-routing.module.ts'], - coverageThreshold: { - global: { - branches: 85, - functions: 85, - lines: 85, - statements: 85, - }, - }, -}; From f130cd034da343bad7dcb35c8843ba9d1a1694bc Mon Sep 17 00:00:00 2001 From: Daniel Bolin Date: Wed, 24 Apr 2024 14:09:52 -0400 Subject: [PATCH 02/33] Update lint staged config --- .eslintrc.json | 6 +++--- .lintstagedrc.mjs | 7 +++++++ package.json | 4 ---- 3 files changed, 10 insertions(+), 7 deletions(-) create mode 100644 .lintstagedrc.mjs diff --git a/.eslintrc.json b/.eslintrc.json index 13e9fb069..1dd7255d6 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -4,7 +4,7 @@ "plugins": ["@nx"], "overrides": [ { - "files": ["*.ts", "*.tsx", "*.js", "*.jsx"], + "files": ["*.ts", "*.tsx", "*.js", "*.mjs", "*.cjs", "*.jsx"], "rules": { "@nx/enforce-module-boundaries": [ "error", @@ -74,12 +74,12 @@ } }, { - "files": ["*.js", "*.jsx"], + "files": ["*.js", "*.mjs", "*.cjs", "*.jsx"], "extends": ["plugin:@nx/javascript"], "rules": {} }, { - "files": ["*.spec.ts", "*.spec.tsx", "*.spec.js", "*.spec.jsx"], + "files": ["*.spec.ts", "*.spec.tsx", "*.spec.js", "*.spec.mjs", "*.spec.cjs", "*.spec.jsx"], "env": { "jest": true }, diff --git a/.lintstagedrc.mjs b/.lintstagedrc.mjs new file mode 100644 index 000000000..08d780bea --- /dev/null +++ b/.lintstagedrc.mjs @@ -0,0 +1,7 @@ +const lint = 'npx nx affected:lint --uncommited --fix true'; +const format = 'npx nx format:write --uncommited'; + +export default { + '*.{js,mjs,cjs,ts,html,scss,css}': [lint, format], + '*.{md,json,yml,yaml}': format, +}; diff --git a/package.json b/package.json index cc5b4da7a..41356ce95 100644 --- a/package.json +++ b/package.json @@ -197,9 +197,5 @@ "typescript": "5.4.5", "webpack": "^5.90.1", "zod-to-json-schema": "^3.22.3" - }, - "lint-staged": { - "*.{js,ts}": "eslint --cache --cache-location \"node_modules/.cache/.eslintcache\" --fix", - "*.{js,ts,css,scss,md,html}": "prettier --write" } } From 61a1e7857f14a780f54706aa3b89b0cfe7f2b48f Mon Sep 17 00:00:00 2001 From: Bhushan Khope Date: Mon, 29 Jul 2024 14:08:29 -0400 Subject: [PATCH 03/33] add brand logo in story book --- libs/design-system/.storybook/preview.ts | 14 ++++++ .../assets/logo/hra-brand-logo.svg | 10 ++++ libs/design-system/logos/brand/README.md | 3 ++ .../design-system/logos/brand/ng-package.json | 5 ++ libs/design-system/logos/brand/src/index.ts | 1 + .../logos/brand/src/lib/brand.component.html | 4 ++ .../logos/brand/src/lib/brand.component.scss | 39 +++++++++++++++ .../brand/src/lib/brand.component.spec.ts | 12 +++++ .../brand/src/lib/brand.component.stories.ts | 47 +++++++++++++++++++ .../logos/brand/src/lib/brand.component.ts | 19 ++++++++ libs/design-system/project.json | 2 + tsconfig.base.json | 3 ++ 12 files changed, 159 insertions(+) create mode 100644 libs/design-system/assets/logo/hra-brand-logo.svg create mode 100644 libs/design-system/logos/brand/README.md create mode 100644 libs/design-system/logos/brand/ng-package.json create mode 100644 libs/design-system/logos/brand/src/index.ts create mode 100644 libs/design-system/logos/brand/src/lib/brand.component.html create mode 100644 libs/design-system/logos/brand/src/lib/brand.component.scss create mode 100644 libs/design-system/logos/brand/src/lib/brand.component.spec.ts create mode 100644 libs/design-system/logos/brand/src/lib/brand.component.stories.ts create mode 100644 libs/design-system/logos/brand/src/lib/brand.component.ts diff --git a/libs/design-system/.storybook/preview.ts b/libs/design-system/.storybook/preview.ts index f5530e186..4e88b0147 100644 --- a/libs/design-system/.storybook/preview.ts +++ b/libs/design-system/.storybook/preview.ts @@ -2,6 +2,20 @@ import { Preview } from '@storybook/angular'; const preview: Preview = { tags: ['autodocs'], + parameters: { + backgrounds: { + values: [ + { + name: 'light', + value: '#ffffff', + }, + { + name: 'dark', + value: '#4b4b5e', + }, + ], + }, + }, }; export default preview; diff --git a/libs/design-system/assets/logo/hra-brand-logo.svg b/libs/design-system/assets/logo/hra-brand-logo.svg new file mode 100644 index 000000000..902d7b87d --- /dev/null +++ b/libs/design-system/assets/logo/hra-brand-logo.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/libs/design-system/logos/brand/README.md b/libs/design-system/logos/brand/README.md new file mode 100644 index 000000000..5201ac599 --- /dev/null +++ b/libs/design-system/logos/brand/README.md @@ -0,0 +1,3 @@ +# @hra-ui/design-system/logos + +Secondary entry point of `@hra-ui/design-system`. It can be used by importing from `@hra-ui/design-system/logos`. diff --git a/libs/design-system/logos/brand/ng-package.json b/libs/design-system/logos/brand/ng-package.json new file mode 100644 index 000000000..c781f0df4 --- /dev/null +++ b/libs/design-system/logos/brand/ng-package.json @@ -0,0 +1,5 @@ +{ + "lib": { + "entryFile": "src/index.ts" + } +} diff --git a/libs/design-system/logos/brand/src/index.ts b/libs/design-system/logos/brand/src/index.ts new file mode 100644 index 000000000..ed1d33228 --- /dev/null +++ b/libs/design-system/logos/brand/src/index.ts @@ -0,0 +1 @@ +export * from './lib/brand.component'; diff --git a/libs/design-system/logos/brand/src/lib/brand.component.html b/libs/design-system/logos/brand/src/lib/brand.component.html new file mode 100644 index 000000000..21e2e6bed --- /dev/null +++ b/libs/design-system/logos/brand/src/lib/brand.component.html @@ -0,0 +1,4 @@ + + + Human Reference Atlas + diff --git a/libs/design-system/logos/brand/src/lib/brand.component.scss b/libs/design-system/logos/brand/src/lib/brand.component.scss new file mode 100644 index 000000000..5e7250404 --- /dev/null +++ b/libs/design-system/logos/brand/src/lib/brand.component.scss @@ -0,0 +1,39 @@ +:host { + a { + display: flex; + align-items: center; + max-width: 15.375rem; + text-decoration: none; + + &.small { + max-width: 7.25rem; + + img { + height: 3rem; + width: 3rem; + margin-right: 0.375rem; + } + + span { + max-width: 3.625rem; + font-size: 0.75rem; + line-height: 1.125rem; + } + } + + img { + height: 6.375rem; + width: 6.375rem; + margin-right: 0.75rem; + } + + span { + display: block; + font-size: 1.5625rem; + line-height: 2.25rem; + font-weight: 400; + letter-spacing: 0.1px; + max-width: 8rem; + } + } +} diff --git a/libs/design-system/logos/brand/src/lib/brand.component.spec.ts b/libs/design-system/logos/brand/src/lib/brand.component.spec.ts new file mode 100644 index 000000000..5e55c650b --- /dev/null +++ b/libs/design-system/logos/brand/src/lib/brand.component.spec.ts @@ -0,0 +1,12 @@ +import { render, screen } from '@testing-library/angular'; +import { BrandComponent } from './brand.component'; + +describe('BrandComponent', () => { + beforeEach(async () => { + await render(BrandComponent); + }); + + it('should create', () => { + expect(screen.getByText('Human Reference Atlas')).toBeInTheDocument(); + }); +}); diff --git a/libs/design-system/logos/brand/src/lib/brand.component.stories.ts b/libs/design-system/logos/brand/src/lib/brand.component.stories.ts new file mode 100644 index 000000000..eab5fa67e --- /dev/null +++ b/libs/design-system/logos/brand/src/lib/brand.component.stories.ts @@ -0,0 +1,47 @@ +import type { Meta, StoryObj } from '@storybook/angular'; +import { BrandComponent } from './brand.component'; +const meta: Meta = { + component: BrandComponent, + title: 'BrandComponent', + parameters: { + design: { + type: 'figma', + url: 'https://www.figma.com/design/gQEMLugLjweDvbsNNUVffD/Design-System-Repository?node-id=5097-23013&t=mdJDmeklbfjt0jbX-4', + }, + }, +}; +export default meta; +type Story = StoryObj; + +export const Primary: Story = { + args: {}, +}; + +export const PrimaryWhite: Story = { + args: { + color: '#FFFFFF', + }, + parameters: { + backgrounds: { + default: 'dark', + }, + }, +}; + +export const Small: Story = { + args: { + small: true, + }, +}; + +export const SmallWhite: Story = { + args: { + small: true, + color: '#FFFFFF', + }, + parameters: { + backgrounds: { + default: 'dark', + }, + }, +}; diff --git a/libs/design-system/logos/brand/src/lib/brand.component.ts b/libs/design-system/logos/brand/src/lib/brand.component.ts new file mode 100644 index 000000000..538f9217c --- /dev/null +++ b/libs/design-system/logos/brand/src/lib/brand.component.ts @@ -0,0 +1,19 @@ +import { booleanAttribute, ChangeDetectionStrategy, Component, input } from '@angular/core'; +import { CommonModule } from '@angular/common'; + +/** Brand Logo Component */ +@Component({ + selector: 'hra-brand', + standalone: true, + imports: [CommonModule], + templateUrl: './brand.component.html', + styleUrl: './brand.component.scss', + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class BrandComponent { + /** Flag to check if the Logo is small */ + readonly small = input(false, { transform: booleanAttribute }); + + /** Text color of the brand name */ + readonly color = input('#201E3D'); +} diff --git a/libs/design-system/project.json b/libs/design-system/project.json index 3728d6539..9c1d19c62 100644 --- a/libs/design-system/project.json +++ b/libs/design-system/project.json @@ -68,6 +68,7 @@ "configDir": "libs/design-system/.storybook", "browserTarget": "design-system:build-storybook", "compodoc": false, + "assets": [{ "input": "libs/design-system/assets", "glob": "**/*", "output": "./assets" }], "styles": ["libs/design-system/.storybook/preview-styles/index.scss"] }, "configurations": { @@ -84,6 +85,7 @@ "configDir": "libs/design-system/.storybook", "browserTarget": "design-system:build-storybook", "compodoc": false, + "assets": [{ "input": "libs/design-system/assets", "glob": "**/*", "output": "./assets" }], "styles": ["libs/design-system/.storybook/preview-styles/index.scss"] }, "configurations": { diff --git a/tsconfig.base.json b/tsconfig.base.json index 713de66d8..992525867 100644 --- a/tsconfig.base.json +++ b/tsconfig.base.json @@ -62,6 +62,9 @@ "@hra-ui/design-system/footer": [ "libs/design-system/footer/src/index.ts" ], + "@hra-ui/design-system/logos": [ + "libs/design-system/logos/src/index.ts" + ], "@hra-ui/design-system/tooltip-card": [ "libs/design-system/tooltip-card/src/index.ts" ], From 8ae97a51f30d17bec83f2b919d8e126e0bfff8a5 Mon Sep 17 00:00:00 2001 From: edlu77 Date: Mon, 29 Jul 2024 18:57:16 -0400 Subject: [PATCH 04/33] Set up brandmark component --- .../assets/logo/brandmark_black.svg | 10 +++++++++ .../assets/logo/brandmark_default.svg | 10 +++++++++ .../assets/logo/brandmark_white.svg | 10 +++++++++ .../brandmark/brandmark.component.html | 3 +++ .../brandmark/brandmark.component.scss | 3 +++ .../brandmark/brandmark.component.spec.ts | 21 +++++++++++++++++++ .../brandmark/brandmark.component.stories.ts | 13 ++++++++++++ .../brandmark/brandmark.component.ts | 14 +++++++++++++ libs/design-system/src/index.ts | 2 ++ 9 files changed, 86 insertions(+) create mode 100644 libs/design-system/.storybook/assets/logo/brandmark_black.svg create mode 100644 libs/design-system/.storybook/assets/logo/brandmark_default.svg create mode 100644 libs/design-system/.storybook/assets/logo/brandmark_white.svg create mode 100644 libs/design-system/brandmark/brandmark.component.html create mode 100644 libs/design-system/brandmark/brandmark.component.scss create mode 100644 libs/design-system/brandmark/brandmark.component.spec.ts create mode 100644 libs/design-system/brandmark/brandmark.component.stories.ts create mode 100644 libs/design-system/brandmark/brandmark.component.ts diff --git a/libs/design-system/.storybook/assets/logo/brandmark_black.svg b/libs/design-system/.storybook/assets/logo/brandmark_black.svg new file mode 100644 index 000000000..dd97d68ad --- /dev/null +++ b/libs/design-system/.storybook/assets/logo/brandmark_black.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/libs/design-system/.storybook/assets/logo/brandmark_default.svg b/libs/design-system/.storybook/assets/logo/brandmark_default.svg new file mode 100644 index 000000000..2b9daf503 --- /dev/null +++ b/libs/design-system/.storybook/assets/logo/brandmark_default.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/libs/design-system/.storybook/assets/logo/brandmark_white.svg b/libs/design-system/.storybook/assets/logo/brandmark_white.svg new file mode 100644 index 000000000..218c39463 --- /dev/null +++ b/libs/design-system/.storybook/assets/logo/brandmark_white.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/libs/design-system/brandmark/brandmark.component.html b/libs/design-system/brandmark/brandmark.component.html new file mode 100644 index 000000000..2915fc054 --- /dev/null +++ b/libs/design-system/brandmark/brandmark.component.html @@ -0,0 +1,3 @@ +< +

brandmark works!

+> diff --git a/libs/design-system/brandmark/brandmark.component.scss b/libs/design-system/brandmark/brandmark.component.scss new file mode 100644 index 000000000..5d4e87f30 --- /dev/null +++ b/libs/design-system/brandmark/brandmark.component.scss @@ -0,0 +1,3 @@ +:host { + display: block; +} diff --git a/libs/design-system/brandmark/brandmark.component.spec.ts b/libs/design-system/brandmark/brandmark.component.spec.ts new file mode 100644 index 000000000..64c34a027 --- /dev/null +++ b/libs/design-system/brandmark/brandmark.component.spec.ts @@ -0,0 +1,21 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { BrandmarkComponent } from './brandmark.component'; + +describe('BrandmarkComponent', () => { + let component: BrandmarkComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [BrandmarkComponent], + }).compileComponents(); + + fixture = TestBed.createComponent(BrandmarkComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/libs/design-system/brandmark/brandmark.component.stories.ts b/libs/design-system/brandmark/brandmark.component.stories.ts new file mode 100644 index 000000000..4a21cc55b --- /dev/null +++ b/libs/design-system/brandmark/brandmark.component.stories.ts @@ -0,0 +1,13 @@ +import type { Meta, StoryObj } from '@storybook/angular'; +import { BrandmarkComponent } from './brandmark.component'; + +const meta: Meta = { + component: BrandmarkComponent, + title: 'BrandmarkComponent', +}; +export default meta; +type Story = StoryObj; + +export const Default: Story = { + args: {}, +}; diff --git a/libs/design-system/brandmark/brandmark.component.ts b/libs/design-system/brandmark/brandmark.component.ts new file mode 100644 index 000000000..3f0fe1512 --- /dev/null +++ b/libs/design-system/brandmark/brandmark.component.ts @@ -0,0 +1,14 @@ +import { ChangeDetectionStrategy, Component, input } from '@angular/core'; +import { CommonModule } from '@angular/common'; + +@Component({ + selector: 'hra-brandmark', + standalone: true, + imports: [CommonModule], + templateUrl: './brandmark.component.html', + styleUrl: './brandmark.component.scss', + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class BrandmarkComponent { + readonly color = input('red'); +} diff --git a/libs/design-system/src/index.ts b/libs/design-system/src/index.ts index a5e4055f7..e6521f9cc 100644 --- a/libs/design-system/src/index.ts +++ b/libs/design-system/src/index.ts @@ -1 +1,3 @@ export * from './lib/design-system/design-system.component'; + +export * from './../brandmark/brandmark.component'; From 112306ffd3cc39f0ead35611e64b69e0d81c85a9 Mon Sep 17 00:00:00 2001 From: edlu77 Date: Tue, 30 Jul 2024 13:30:15 -0400 Subject: [PATCH 05/33] Create brandmark component --- .../assets/logo/brandmark_small.svg | 15 ++++++++++++ .../brandmark/brandmark.component.html | 4 +--- .../brandmark/brandmark.component.stories.ts | 23 +++++++++++++++++-- .../brandmark/brandmark.component.ts | 19 ++++++++++++--- 4 files changed, 53 insertions(+), 8 deletions(-) create mode 100644 libs/design-system/.storybook/assets/logo/brandmark_small.svg diff --git a/libs/design-system/.storybook/assets/logo/brandmark_small.svg b/libs/design-system/.storybook/assets/logo/brandmark_small.svg new file mode 100644 index 000000000..680396838 --- /dev/null +++ b/libs/design-system/.storybook/assets/logo/brandmark_small.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/libs/design-system/brandmark/brandmark.component.html b/libs/design-system/brandmark/brandmark.component.html index 2915fc054..616e4f5fc 100644 --- a/libs/design-system/brandmark/brandmark.component.html +++ b/libs/design-system/brandmark/brandmark.component.html @@ -1,3 +1 @@ -< -

brandmark works!

-> +Human Reference Atlas brandmark diff --git a/libs/design-system/brandmark/brandmark.component.stories.ts b/libs/design-system/brandmark/brandmark.component.stories.ts index 4a21cc55b..e20237177 100644 --- a/libs/design-system/brandmark/brandmark.component.stories.ts +++ b/libs/design-system/brandmark/brandmark.component.stories.ts @@ -1,6 +1,7 @@ -import type { Meta, StoryObj } from '@storybook/angular'; import { BrandmarkComponent } from './brandmark.component'; +import type { Meta, StoryObj } from '@storybook/angular'; + const meta: Meta = { component: BrandmarkComponent, title: 'BrandmarkComponent', @@ -8,6 +9,24 @@ const meta: Meta = { export default meta; type Story = StoryObj; -export const Default: Story = { +export const DefaultSmall: Story = { + args: { + small: true, + }, +}; + +export const DefaultLarge: Story = { args: {}, }; + +export const WhiteLarge: Story = { + args: { + color: 'white', + }, +}; + +export const BlackLarge: Story = { + args: { + color: 'black', + }, +}; diff --git a/libs/design-system/brandmark/brandmark.component.ts b/libs/design-system/brandmark/brandmark.component.ts index 3f0fe1512..79b28c6bf 100644 --- a/libs/design-system/brandmark/brandmark.component.ts +++ b/libs/design-system/brandmark/brandmark.component.ts @@ -1,14 +1,27 @@ -import { ChangeDetectionStrategy, Component, input } from '@angular/core'; import { CommonModule } from '@angular/common'; +import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core'; +import { AssetUrlPipe } from '@hra-ui/cdk/app-href'; +/** + * HRA brandmark component + */ @Component({ selector: 'hra-brandmark', standalone: true, - imports: [CommonModule], + imports: [CommonModule, AssetUrlPipe], templateUrl: './brandmark.component.html', styleUrl: './brandmark.component.scss', changeDetection: ChangeDetectionStrategy.OnPush, }) export class BrandmarkComponent { - readonly color = input('red'); + /** Brandmark color variant */ + readonly color = input('default'); + + /** Brandmark size to use */ + readonly small = input(false); + + /** Path to SVG */ + readonly svgPath = computed(() => { + return `logo/brandmark_${this.small() ? 'small' : this.color()}.svg`; + }); } From e66f4aaaba388078aa94c10e518aa2fd67dfa91d Mon Sep 17 00:00:00 2001 From: edlu77 Date: Tue, 30 Jul 2024 13:36:57 -0400 Subject: [PATCH 06/33] Fix build --- libs/design-system/brandmark/src/index.ts | 1 + .../brandmark/{ => src/lib}/brandmark.component.html | 0 .../brandmark/{ => src/lib}/brandmark.component.scss | 0 .../brandmark/{ => src/lib}/brandmark.component.spec.ts | 0 .../brandmark/{ => src/lib}/brandmark.component.stories.ts | 0 .../brandmark/{ => src/lib}/brandmark.component.ts | 0 libs/design-system/src/index.ts | 2 -- 7 files changed, 1 insertion(+), 2 deletions(-) create mode 100644 libs/design-system/brandmark/src/index.ts rename libs/design-system/brandmark/{ => src/lib}/brandmark.component.html (100%) rename libs/design-system/brandmark/{ => src/lib}/brandmark.component.scss (100%) rename libs/design-system/brandmark/{ => src/lib}/brandmark.component.spec.ts (100%) rename libs/design-system/brandmark/{ => src/lib}/brandmark.component.stories.ts (100%) rename libs/design-system/brandmark/{ => src/lib}/brandmark.component.ts (100%) diff --git a/libs/design-system/brandmark/src/index.ts b/libs/design-system/brandmark/src/index.ts new file mode 100644 index 000000000..fb3880248 --- /dev/null +++ b/libs/design-system/brandmark/src/index.ts @@ -0,0 +1 @@ +export * from './lib/brandmark.component'; diff --git a/libs/design-system/brandmark/brandmark.component.html b/libs/design-system/brandmark/src/lib/brandmark.component.html similarity index 100% rename from libs/design-system/brandmark/brandmark.component.html rename to libs/design-system/brandmark/src/lib/brandmark.component.html diff --git a/libs/design-system/brandmark/brandmark.component.scss b/libs/design-system/brandmark/src/lib/brandmark.component.scss similarity index 100% rename from libs/design-system/brandmark/brandmark.component.scss rename to libs/design-system/brandmark/src/lib/brandmark.component.scss diff --git a/libs/design-system/brandmark/brandmark.component.spec.ts b/libs/design-system/brandmark/src/lib/brandmark.component.spec.ts similarity index 100% rename from libs/design-system/brandmark/brandmark.component.spec.ts rename to libs/design-system/brandmark/src/lib/brandmark.component.spec.ts diff --git a/libs/design-system/brandmark/brandmark.component.stories.ts b/libs/design-system/brandmark/src/lib/brandmark.component.stories.ts similarity index 100% rename from libs/design-system/brandmark/brandmark.component.stories.ts rename to libs/design-system/brandmark/src/lib/brandmark.component.stories.ts diff --git a/libs/design-system/brandmark/brandmark.component.ts b/libs/design-system/brandmark/src/lib/brandmark.component.ts similarity index 100% rename from libs/design-system/brandmark/brandmark.component.ts rename to libs/design-system/brandmark/src/lib/brandmark.component.ts diff --git a/libs/design-system/src/index.ts b/libs/design-system/src/index.ts index e6521f9cc..a5e4055f7 100644 --- a/libs/design-system/src/index.ts +++ b/libs/design-system/src/index.ts @@ -1,3 +1 @@ export * from './lib/design-system/design-system.component'; - -export * from './../brandmark/brandmark.component'; From b701b97aed6292dbde934de312de7dd8cc825f65 Mon Sep 17 00:00:00 2001 From: edlu77 Date: Tue, 30 Jul 2024 14:18:17 -0400 Subject: [PATCH 07/33] Update testing --- .../src/lib/brandmark.component.spec.ts | 34 +++++++++++-------- 1 file changed, 20 insertions(+), 14 deletions(-) diff --git a/libs/design-system/brandmark/src/lib/brandmark.component.spec.ts b/libs/design-system/brandmark/src/lib/brandmark.component.spec.ts index 64c34a027..abeef323f 100644 --- a/libs/design-system/brandmark/src/lib/brandmark.component.spec.ts +++ b/libs/design-system/brandmark/src/lib/brandmark.component.spec.ts @@ -1,21 +1,27 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { render, screen } from '@testing-library/angular'; + import { BrandmarkComponent } from './brandmark.component'; describe('BrandmarkComponent', () => { - let component: BrandmarkComponent; - let fixture: ComponentFixture; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - imports: [BrandmarkComponent], - }).compileComponents(); - - fixture = TestBed.createComponent(BrandmarkComponent); - component = fixture.componentInstance; - fixture.detectChanges(); + it('should render a large logo', async () => { + await render(BrandmarkComponent, { + componentInputs: { + small: false, + }, + }); + const logo = screen.getByAltText('Human Reference Atlas brandmark'); + expect(logo).toBeInTheDocument(); + expect(logo).toHaveAttribute('src', 'logo/brandmark_default.svg'); }); - it('should create', () => { - expect(component).toBeTruthy(); + it('should render a small logo', async () => { + await render(BrandmarkComponent, { + componentInputs: { + small: true, + }, + }); + const logo = screen.getByAltText('Human Reference Atlas brandmark'); + expect(logo).toBeInTheDocument(); + expect(logo).toHaveAttribute('src', 'logo/brandmark_small.svg'); }); }); From 16778de69b0bb5dcb176908e072c554e18b8c2a6 Mon Sep 17 00:00:00 2001 From: edlu77 Date: Tue, 30 Jul 2024 14:18:33 -0400 Subject: [PATCH 08/33] Add link to figma --- .../brandmark/src/lib/brandmark.component.stories.ts | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/libs/design-system/brandmark/src/lib/brandmark.component.stories.ts b/libs/design-system/brandmark/src/lib/brandmark.component.stories.ts index e20237177..fbc4d06ea 100644 --- a/libs/design-system/brandmark/src/lib/brandmark.component.stories.ts +++ b/libs/design-system/brandmark/src/lib/brandmark.component.stories.ts @@ -5,6 +5,12 @@ import type { Meta, StoryObj } from '@storybook/angular'; const meta: Meta = { component: BrandmarkComponent, title: 'BrandmarkComponent', + parameters: { + design: { + type: 'figma', + url: 'https://www.figma.com/design/BCEJn9KCIbBJ5MzqnojKQp/Design-System-Components?node-id=82-776', + }, + }, }; export default meta; type Story = StoryObj; From 2508bec9411d4d7f0222e3d2116eb275623c1297 Mon Sep 17 00:00:00 2001 From: Bhushan Khope Date: Wed, 31 Jul 2024 16:16:56 -0400 Subject: [PATCH 09/33] use inline svg for brand logo storybook --- .../.storybook/preview-styles/index.scss | 1 + .../assets/logo/hra-brand-logo.svg | 11 ++++-- .../{logos/brand => brand-logo}/README.md | 0 .../brand => brand-logo}/ng-package.json | 0 libs/design-system/brand-logo/src/index.ts | 1 + .../src/lib/brand-logo.component.html | 10 +++++ .../src/lib/brand-logo.component.scss | 15 +++++++ .../src/lib/brand-logo.component.spec.ts} | 0 .../src/lib/brand-logo.component.stories.ts} | 10 ++--- .../src/lib/brand-logo.component.ts} | 14 +++++-- libs/design-system/logos/brand/src/index.ts | 1 - .../logos/brand/src/lib/brand.component.html | 4 -- .../logos/brand/src/lib/brand.component.scss | 39 ------------------- 13 files changed, 49 insertions(+), 57 deletions(-) rename libs/design-system/{logos/brand => brand-logo}/README.md (100%) rename libs/design-system/{logos/brand => brand-logo}/ng-package.json (100%) create mode 100644 libs/design-system/brand-logo/src/index.ts create mode 100644 libs/design-system/brand-logo/src/lib/brand-logo.component.html create mode 100644 libs/design-system/brand-logo/src/lib/brand-logo.component.scss rename libs/design-system/{logos/brand/src/lib/brand.component.spec.ts => brand-logo/src/lib/brand-logo.component.spec.ts} (100%) rename libs/design-system/{logos/brand/src/lib/brand.component.stories.ts => brand-logo/src/lib/brand-logo.component.stories.ts} (77%) rename libs/design-system/{logos/brand/src/lib/brand.component.ts => brand-logo/src/lib/brand-logo.component.ts} (50%) delete mode 100644 libs/design-system/logos/brand/src/index.ts delete mode 100644 libs/design-system/logos/brand/src/lib/brand.component.html delete mode 100644 libs/design-system/logos/brand/src/lib/brand.component.scss diff --git a/libs/design-system/.storybook/preview-styles/index.scss b/libs/design-system/.storybook/preview-styles/index.scss index 7c8924031..f333adea7 100644 --- a/libs/design-system/.storybook/preview-styles/index.scss +++ b/libs/design-system/.storybook/preview-styles/index.scss @@ -1,5 +1,6 @@ @use '@fontsource/metropolis'; @use '@fontsource/metropolis/500.css' as Metropolis500; +@use '@fontsource/metropolis/400.css' as Metropolis400; @use '@fontsource/nunito-sans'; html { diff --git a/libs/design-system/assets/logo/hra-brand-logo.svg b/libs/design-system/assets/logo/hra-brand-logo.svg index 902d7b87d..9d8b0096e 100644 --- a/libs/design-system/assets/logo/hra-brand-logo.svg +++ b/libs/design-system/assets/logo/hra-brand-logo.svg @@ -1,8 +1,11 @@ - - - + + + + + + - + diff --git a/libs/design-system/logos/brand/README.md b/libs/design-system/brand-logo/README.md similarity index 100% rename from libs/design-system/logos/brand/README.md rename to libs/design-system/brand-logo/README.md diff --git a/libs/design-system/logos/brand/ng-package.json b/libs/design-system/brand-logo/ng-package.json similarity index 100% rename from libs/design-system/logos/brand/ng-package.json rename to libs/design-system/brand-logo/ng-package.json diff --git a/libs/design-system/brand-logo/src/index.ts b/libs/design-system/brand-logo/src/index.ts new file mode 100644 index 000000000..a05ee2478 --- /dev/null +++ b/libs/design-system/brand-logo/src/index.ts @@ -0,0 +1 @@ +export * from './lib/brand-logo.component'; diff --git a/libs/design-system/brand-logo/src/lib/brand-logo.component.html b/libs/design-system/brand-logo/src/lib/brand-logo.component.html new file mode 100644 index 000000000..f568f6329 --- /dev/null +++ b/libs/design-system/brand-logo/src/lib/brand-logo.component.html @@ -0,0 +1,10 @@ + + diff --git a/libs/design-system/brand-logo/src/lib/brand-logo.component.scss b/libs/design-system/brand-logo/src/lib/brand-logo.component.scss new file mode 100644 index 000000000..3b63e9acb --- /dev/null +++ b/libs/design-system/brand-logo/src/lib/brand-logo.component.scss @@ -0,0 +1,15 @@ +:host { + display: block; + // color: var(--hra-brand-logo-color, red); + a { + display: block; + color: inherit; + max-height: 6.375rem; + max-width: 15.375rem; + + &.small { + height: 3rem; + width: 7.25rem; + } + } +} diff --git a/libs/design-system/logos/brand/src/lib/brand.component.spec.ts b/libs/design-system/brand-logo/src/lib/brand-logo.component.spec.ts similarity index 100% rename from libs/design-system/logos/brand/src/lib/brand.component.spec.ts rename to libs/design-system/brand-logo/src/lib/brand-logo.component.spec.ts diff --git a/libs/design-system/logos/brand/src/lib/brand.component.stories.ts b/libs/design-system/brand-logo/src/lib/brand-logo.component.stories.ts similarity index 77% rename from libs/design-system/logos/brand/src/lib/brand.component.stories.ts rename to libs/design-system/brand-logo/src/lib/brand-logo.component.stories.ts index eab5fa67e..b8c6a0b6b 100644 --- a/libs/design-system/logos/brand/src/lib/brand.component.stories.ts +++ b/libs/design-system/brand-logo/src/lib/brand-logo.component.stories.ts @@ -1,8 +1,8 @@ import type { Meta, StoryObj } from '@storybook/angular'; -import { BrandComponent } from './brand.component'; -const meta: Meta = { - component: BrandComponent, - title: 'BrandComponent', +import { BrandLogoComponent } from './brand-logo.component'; +const meta: Meta = { + component: BrandLogoComponent, + title: 'BrandLogoComponent', parameters: { design: { type: 'figma', @@ -11,7 +11,7 @@ const meta: Meta = { }, }; export default meta; -type Story = StoryObj; +type Story = StoryObj; export const Primary: Story = { args: {}, diff --git a/libs/design-system/logos/brand/src/lib/brand.component.ts b/libs/design-system/brand-logo/src/lib/brand-logo.component.ts similarity index 50% rename from libs/design-system/logos/brand/src/lib/brand.component.ts rename to libs/design-system/brand-logo/src/lib/brand-logo.component.ts index 538f9217c..c8874852d 100644 --- a/libs/design-system/logos/brand/src/lib/brand.component.ts +++ b/libs/design-system/brand-logo/src/lib/brand-logo.component.ts @@ -1,19 +1,25 @@ import { booleanAttribute, ChangeDetectionStrategy, Component, input } from '@angular/core'; import { CommonModule } from '@angular/common'; +import { AssetUrlPipe } from '@hra-ui/cdk/app-href'; +import { InlineSVGModule, SVGScriptEvalMode } from 'ng-inline-svg-2'; +import { HttpClientModule } from '@angular/common/http'; /** Brand Logo Component */ @Component({ selector: 'hra-brand', standalone: true, - imports: [CommonModule], - templateUrl: './brand.component.html', - styleUrl: './brand.component.scss', + imports: [CommonModule, AssetUrlPipe, InlineSVGModule, HttpClientModule], + templateUrl: './brand-logo.component.html', + styleUrl: './brand-logo.component.scss', changeDetection: ChangeDetectionStrategy.OnPush, }) -export class BrandComponent { +export class BrandLogoComponent { /** Flag to check if the Logo is small */ readonly small = input(false, { transform: booleanAttribute }); /** Text color of the brand name */ readonly color = input('#201E3D'); + + /** SVG script eval mode */ + readonly NEVER_EVAL_SCRIPTS = SVGScriptEvalMode.NEVER; } diff --git a/libs/design-system/logos/brand/src/index.ts b/libs/design-system/logos/brand/src/index.ts deleted file mode 100644 index ed1d33228..000000000 --- a/libs/design-system/logos/brand/src/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './lib/brand.component'; diff --git a/libs/design-system/logos/brand/src/lib/brand.component.html b/libs/design-system/logos/brand/src/lib/brand.component.html deleted file mode 100644 index 21e2e6bed..000000000 --- a/libs/design-system/logos/brand/src/lib/brand.component.html +++ /dev/null @@ -1,4 +0,0 @@ - - - Human Reference Atlas - diff --git a/libs/design-system/logos/brand/src/lib/brand.component.scss b/libs/design-system/logos/brand/src/lib/brand.component.scss deleted file mode 100644 index 5e7250404..000000000 --- a/libs/design-system/logos/brand/src/lib/brand.component.scss +++ /dev/null @@ -1,39 +0,0 @@ -:host { - a { - display: flex; - align-items: center; - max-width: 15.375rem; - text-decoration: none; - - &.small { - max-width: 7.25rem; - - img { - height: 3rem; - width: 3rem; - margin-right: 0.375rem; - } - - span { - max-width: 3.625rem; - font-size: 0.75rem; - line-height: 1.125rem; - } - } - - img { - height: 6.375rem; - width: 6.375rem; - margin-right: 0.75rem; - } - - span { - display: block; - font-size: 1.5625rem; - line-height: 2.25rem; - font-weight: 400; - letter-spacing: 0.1px; - max-width: 8rem; - } - } -} From 39a5221697d0cc6324c2d82386710d70b8a252de Mon Sep 17 00:00:00 2001 From: Bhushan Khope Date: Wed, 31 Jul 2024 16:21:22 -0400 Subject: [PATCH 10/33] fix tsconfig.base.json file --- tsconfig.base.json | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/tsconfig.base.json b/tsconfig.base.json index 992525867..5e08097f5 100644 --- a/tsconfig.base.json +++ b/tsconfig.base.json @@ -62,8 +62,8 @@ "@hra-ui/design-system/footer": [ "libs/design-system/footer/src/index.ts" ], - "@hra-ui/design-system/logos": [ - "libs/design-system/logos/src/index.ts" + "@hra-ui/design-system/brand-logo": [ + "libs/design-system/brand-logo/src/index.ts" ], "@hra-ui/design-system/tooltip-card": [ "libs/design-system/tooltip-card/src/index.ts" @@ -128,4 +128,4 @@ "node_modules", "tmp" ] -} \ No newline at end of file +} From 2e837c455ac1351bcdd64e0ef51ee34c5066332d Mon Sep 17 00:00:00 2001 From: Bhushan Khope Date: Wed, 31 Jul 2024 16:33:49 -0400 Subject: [PATCH 11/33] fix lint error --- libs/design-system/package.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/libs/design-system/package.json b/libs/design-system/package.json index d6de533f4..144512b81 100644 --- a/libs/design-system/package.json +++ b/libs/design-system/package.json @@ -5,7 +5,8 @@ "@angular/common": "18.0.7", "@angular/core": "18.0.7", "@hra-ui/cdk": "0.0.1", - "@angular/material": "18.0.6" + "@angular/material": "18.0.6", + "ng-inline-svg-2": "^15.0.1" }, "dependencies": {}, "sideEffects": false From 6bcbe25f199d9f8a8f1f1da9c65f08d98fde32db Mon Sep 17 00:00:00 2001 From: Bhushan Khope Date: Wed, 31 Jul 2024 16:43:17 -0400 Subject: [PATCH 12/33] fix tests for brand logo --- .../brand-logo/src/lib/brand-logo.component.spec.ts | 9 +++++---- tsconfig.base.json | 8 ++++---- 2 files changed, 9 insertions(+), 8 deletions(-) diff --git a/libs/design-system/brand-logo/src/lib/brand-logo.component.spec.ts b/libs/design-system/brand-logo/src/lib/brand-logo.component.spec.ts index 5e55c650b..d24e0964c 100644 --- a/libs/design-system/brand-logo/src/lib/brand-logo.component.spec.ts +++ b/libs/design-system/brand-logo/src/lib/brand-logo.component.spec.ts @@ -1,12 +1,13 @@ import { render, screen } from '@testing-library/angular'; -import { BrandComponent } from './brand.component'; +import { BrandLogoComponent } from './brand-logo.component'; -describe('BrandComponent', () => { +describe('BrandLogoComponent', () => { beforeEach(async () => { - await render(BrandComponent); + await render(BrandLogoComponent); }); it('should create', () => { - expect(screen.getByText('Human Reference Atlas')).toBeInTheDocument(); + const brandLink = screen.getByRole('link'); + expect(brandLink).toBeInTheDocument(); }); }); diff --git a/tsconfig.base.json b/tsconfig.base.json index c6b2183b2..993c724c9 100644 --- a/tsconfig.base.json +++ b/tsconfig.base.json @@ -62,12 +62,12 @@ "@hra-ui/design-system": [ "libs/design-system/src/index.ts" ], - "@hra-ui/design-system/footer": [ - "libs/design-system/footer/src/index.ts" - ], "@hra-ui/design-system/brand-logo": [ "libs/design-system/brand-logo/src/index.ts" ], + "@hra-ui/design-system/footer": [ + "libs/design-system/footer/src/index.ts" + ], "@hra-ui/design-system/scrolling": [ "libs/design-system/scrolling/src/index.ts" ], @@ -134,4 +134,4 @@ "node_modules", "tmp" ] -} +} \ No newline at end of file From 5cf79291daa247b725111bdc9f63f93fde38c65c Mon Sep 17 00:00:00 2001 From: Bhushan Khope Date: Wed, 31 Jul 2024 16:59:18 -0400 Subject: [PATCH 13/33] fix eui carousel wrap bug --- apps/ccf-eui/src/app/app.component.html | 1 + 1 file changed, 1 insertion(+) diff --git a/apps/ccf-eui/src/app/app.component.html b/apps/ccf-eui/src/app/app.component.html index 242927ef0..fa4e221fa 100644 --- a/apps/ccf-eui/src/app/app.component.html +++ b/apps/ccf-eui/src/app/app.component.html @@ -163,6 +163,7 @@ [organList]="$any(scene.referenceOrgans$ | async)" (organsChanged)="scene.setSelectedReferenceOrgans($event)" [selectedOrgans]="$any(scene.selectedReferenceOrgans$ | async)" + [expanded]="selector.expanded" > From c4adecd90865f6ba8761de444ad0630a7ee30a0f Mon Sep 17 00:00:00 2001 From: Daniel Bolin Date: Wed, 31 Jul 2024 18:15:58 -0400 Subject: [PATCH 14/33] feat(design-system): Initial theming setup (colors WIP) --- libs/design-system/ng-package.json | 2 +- libs/design-system/package.json | 17 +++ libs/design-system/styles/_fonts.scss | 2 + libs/design-system/styles/_icons.scss | 25 ++++ libs/design-system/styles/_light-theme.scss | 135 ++++++++++++++++++++ libs/design-system/styles/_resets.scss | 12 ++ libs/design-system/styles/_typography.scss | 100 +++++++++++++++ 7 files changed, 292 insertions(+), 1 deletion(-) create mode 100644 libs/design-system/styles/_fonts.scss create mode 100644 libs/design-system/styles/_icons.scss create mode 100644 libs/design-system/styles/_light-theme.scss create mode 100644 libs/design-system/styles/_resets.scss create mode 100644 libs/design-system/styles/_typography.scss diff --git a/libs/design-system/ng-package.json b/libs/design-system/ng-package.json index 6e00bbff5..f1848c89b 100644 --- a/libs/design-system/ng-package.json +++ b/libs/design-system/ng-package.json @@ -4,5 +4,5 @@ "lib": { "entryFile": "src/index.ts" }, - "assets": ["./assets"] + "assets": ["./assets", "./styles"] } diff --git a/libs/design-system/package.json b/libs/design-system/package.json index 091ebeb77..d0a90b95e 100644 --- a/libs/design-system/package.json +++ b/libs/design-system/package.json @@ -1,6 +1,23 @@ { "name": "@hra-ui/design-system", "version": "0.0.1", + "exports": { + "./styles/fonts": { + "sass": "./styles/_fonts.scss" + }, + "./styles/material-icons": { + "sass": "./styles/_icons.scss" + }, + "./styles/resets": { + "sass": "./styles/_resets.scss" + }, + "./styles/typography": { + "sass": "./styles/_typography.scss" + }, + "./styles/themes/light": { + "sass": "./styles/_light-theme.scss" + } + }, "peerDependencies": { "@angular/common": "18.0.7", "@angular/core": "18.0.7", diff --git a/libs/design-system/styles/_fonts.scss b/libs/design-system/styles/_fonts.scss new file mode 100644 index 000000000..be3627599 --- /dev/null +++ b/libs/design-system/styles/_fonts.scss @@ -0,0 +1,2 @@ +@use '@fontsource/metropolis/500.css' as metropolis-500; +@use '@fontsource/nunito-sans/400.css' as nunito-sans-400; diff --git a/libs/design-system/styles/_icons.scss b/libs/design-system/styles/_icons.scss new file mode 100644 index 000000000..30698effd --- /dev/null +++ b/libs/design-system/styles/_icons.scss @@ -0,0 +1,25 @@ +@use '@fontsource/material-symbols-outlined'; +@use '@fontsource/material-symbols-rounded'; + +/* As per https://fontsource.org/docs/getting-started/material-symbols */ +.material-symbols-outlined, +.material-symbols-rounded { + font-weight: 300; + font-style: normal; + font-size: 1.5rem; + display: inline-block; + line-height: 1; + text-transform: none; + letter-spacing: normal; + word-wrap: normal; + white-space: nowrap; + direction: ltr; +} + +.material-symbols-outlined { + font-family: 'Material Symbols Outlined'; +} + +.material-symbols-rounded { + font-family: 'Material Symbols Rounded'; +} diff --git a/libs/design-system/styles/_light-theme.scss b/libs/design-system/styles/_light-theme.scss new file mode 100644 index 000000000..bcc2aea85 --- /dev/null +++ b/libs/design-system/styles/_light-theme.scss @@ -0,0 +1,135 @@ +@use 'sass:map'; +@use '@angular/material' as mat; +@use './typography' as typo; + +$_palettes: ( + primary: ( + 0: #000000, + 10: #1a1b25, + 20: #2f2f3b, + 25: #3a3a46, + 30: #464652, + 35: #51515d, + 40: #5d5d6a, + 50: #767683, + 60: #908f9d, + 70: #abaab8, + 80: #c7c5d3, + 90: #e3e1f0, + 95: #f1effe, + 98: #fbf8ff, + 99: #fffbff, + 100: #ffffff, + ), + secondary: ( + 0: #000000, + 10: #1a1836, + 20: #2f2d4d, + 25: #3a3858, + 30: #454364, + 35: #514f71, + 40: #5d5b7d, + 50: #767397, + 60: #908db2, + 70: #aba7ce, + 80: #c6c2ea, + 90: #e3dfff, + 95: #f3eeff, + 98: #fcf8ff, + 99: #fffbff, + 100: #ffffff, + ), + tertiary: ( + 0: #000000, + 10: #40000a, + 20: #680015, + 25: #7d001c, + 30: #920022, + 35: #a80029, + 40: #bf0030, + 50: #ed003e, + 60: #ff5261, + 70: #ff888c, + 80: #ffb3b3, + 90: #ffdad9, + 95: #ffedec, + 98: #fff8f7, + 99: #fffbff, + 100: #ffffff, + ), + neutral: ( + 0: #000000, + 10: #1c1b1b, + 20: #313030, + 25: #3c3b3b, + 30: #484646, + 35: #535252, + 40: #5f5e5e, + 50: #787776, + 60: #929090, + 70: #adaaaa, + 80: #c9c6c5, + 90: #e5e2e1, + 95: #f4f0ef, + 98: #fcf8f8, + 99: #f6feff, + 100: #ffffff, + ), + neutral-variant: ( + 0: #000000, + 10: #1b1b1c, + 20: #303031, + 25: #3c3b3c, + 30: #474647, + 35: #535253, + 40: #5f5e5e, + 50: #787777, + 60: #929091, + 70: #adabab, + 80: #c8c6c6, + 90: #e5e2e2, + 95: #f3f0f0, + 98: #fcf9f9, + 99: #fffbfc, + 100: #ffffff, + ), + error: ( + 0: #000000, + 10: #410002, + 20: #690005, + 25: #7e0007, + 30: #93000a, + 35: #a80710, + 40: #ba1a1a, + 50: #de3730, + 60: #ff5449, + 70: #ff897d, + 80: #ffb4ab, + 90: #ffdad6, + 95: #ffedea, + 98: #fff8f7, + 99: #fffbff, + 100: #ffffff, + ), +); + +$_rest: ( + secondary: map.get($_palettes, secondary), + neutral: map.get($_palettes, neutral), + neutral-variant: map.get($_palettes, neutral-variant), + error: map.get($_palettes, error), +); +$_primary: map.merge(map.get($_palettes, primary), $_rest); +$_tertiary: map.merge(map.get($_palettes, tertiary), $_rest); + +$theme: mat.define-theme( + ( + color: ( + theme-type: light, + primary: $_primary, + tertiary: $_tertiary, + use-system-variables: true, + ), + typography: typo.$typography, + ) +); diff --git a/libs/design-system/styles/_resets.scss b/libs/design-system/styles/_resets.scss new file mode 100644 index 000000000..312256dda --- /dev/null +++ b/libs/design-system/styles/_resets.scss @@ -0,0 +1,12 @@ +@use 'normalize.css/normalize.css'; + +// Box sizing reset +html { + box-sizing: border-box; +} + +*, +*:before, +*:after { + box-sizing: inherit; +} diff --git a/libs/design-system/styles/_typography.scss b/libs/design-system/styles/_typography.scss new file mode 100644 index 000000000..1adcdb260 --- /dev/null +++ b/libs/design-system/styles/_typography.scss @@ -0,0 +1,100 @@ +$_brand: 'Metropolis'; +$_plain: 'Nunito Sans'; + +$typography: ( + brand-family: $_brand, + plain-family: $_plain, + medium-weight: 500, + regular-weight: 400, + use-system-variables: true, +); + +$overrides: ( + display-large: 500 2.625rem / 3.9375rem $_brand, + display-large-line-height: 3.9375rem, + display-large-size: 2.625rem, + display-large-tracking: -0.0781rem, + display-large-weight: 500, + + display-medium: 500 2.375rem / 3.5625rem $_brand, + display-medium-line-height: 3.5625rem, + display-medium-size: 2.375rem, + display-medium-tracking: -0.1094rem, + display-medium-weight: 500, + + display-small: 500 2rem / 3rem $_brand, + display-small-line-height: 3rem, + display-small-size: 2rem, + display-small-tracking: -0.0781rem, + display-small-weight: 500, + + headline-large: 500 2rem / 3rem $_brand, + headline-large-line-height: 3rem, + headline-large-size: 2rem, + headline-large-tracking: 0rem, + headline-large-weight: 500, + + headline-medium: 500 1.75rem / 2.625rem $_brand, + headline-medium-line-height: 2.625rem, + headline-medium-size: 1.75rem, + headline-medium-tracking: 0rem, + headline-medium-weight: 500, + + headline-small: 500 1.5rem / 2rem $_brand, + headline-small-line-height: 2rem, + headline-small-size: 1.5rem, + headline-small-tracking: 0rem, + headline-small-weight: 500, + + title-large: 500 1.5rem / 2rem $_brand, + title-large-font: $_brand, + title-large-line-height: 2rem, + title-large-size: 1.5rem, + title-large-tracking: 0rem, + title-large-weight: 500, + + title-medium: 500 1.25rem / 1.875rem $_brand, + title-medium-font: $_brand, + title-medium-line-height: 1.875rem, + title-medium-size: 1.25rem, + title-medium-tracking: 0rem, + title-medium-weight: 500, + + title-small: 500 1rem / 1.5rem $_brand, + title-small-font: $_brand, + title-small-line-height: 1.5rem, + title-small-size: 1rem, + title-small-tracking: 0rem, + title-small-weight: 500, + + body-large-tracking: 0.0313rem, + + body-medium: 500 0.875rem / 1.3125rem $_plain, + body-medium-line-height: 1.3125rem, + body-medium-tracking: 0.0313rem, + + body-small: 500 0.75rem / 1.125rem $_plain, + body-small-line-height: 1.125rem, + body-small-tracking: 0.0313rem, + + label-large: 500 1rem / 1.5rem $_brand, + label-large-font: $_brand, + label-large-line-height: 1.5rem, + label-large-size: 1rem, + label-large-tracking: 0rem, + label-large-weight: 500, + + label-medium: 500 0.875rem / 1.3125rem $_brand, + label-medium-font: $_brand, + label-medium-line-height: 1.3125rem, + label-medium-size: 0.875rem, + label-medium-tracking: 0rem, + label-medium-weight: 500, + + label-small: 500 0.75rem / 1.125rem $_brand, + label-small-font: $_brand, + label-small-line-height: 1.125rem, + label-small-size: 0.75rem, + label-small-tracking: 0rem, + label-small-weight: 500, +); From ac1da7a37c123d978846f60497cfad5c58ae09bc Mon Sep 17 00:00:00 2001 From: Daniel Bolin Date: Wed, 31 Jul 2024 18:16:46 -0400 Subject: [PATCH 15/33] refactor(design-system): Move storybook files around --- libs/design-system/.storybook/main.ts | 2 +- .../.storybook/manager-head.html | 9 ----- libs/design-system/.storybook/manager.ts | 37 ++++++++++++++++++- .../.storybook/preview-styles/index.scss | 7 ---- .../.storybook/styles/manager.css | 9 +++++ .../.storybook/styles/preview.scss | 15 ++++++++ libs/design-system/.storybook/theme.ts | 34 ----------------- libs/design-system/project.json | 4 +- 8 files changed, 62 insertions(+), 55 deletions(-) delete mode 100644 libs/design-system/.storybook/manager-head.html delete mode 100644 libs/design-system/.storybook/preview-styles/index.scss create mode 100644 libs/design-system/.storybook/styles/manager.css create mode 100644 libs/design-system/.storybook/styles/preview.scss delete mode 100644 libs/design-system/.storybook/theme.ts diff --git a/libs/design-system/.storybook/main.ts b/libs/design-system/.storybook/main.ts index 97ea4ed14..8dbe6ff0d 100644 --- a/libs/design-system/.storybook/main.ts +++ b/libs/design-system/.storybook/main.ts @@ -13,7 +13,7 @@ const config: StorybookConfig = { name: '@storybook/angular', options: {}, }, - staticDirs: ['./assets'], + staticDirs: [{ from: './assets', to: 'assets' }], core: { disableTelemetry: true, }, diff --git a/libs/design-system/.storybook/manager-head.html b/libs/design-system/.storybook/manager-head.html deleted file mode 100644 index 8eb33738d..000000000 --- a/libs/design-system/.storybook/manager-head.html +++ /dev/null @@ -1,9 +0,0 @@ - diff --git a/libs/design-system/.storybook/manager.ts b/libs/design-system/.storybook/manager.ts index b997bebbf..7b8bb3d44 100644 --- a/libs/design-system/.storybook/manager.ts +++ b/libs/design-system/.storybook/manager.ts @@ -1,6 +1,39 @@ -import '@fontsource/metropolis'; import { addons } from '@storybook/manager-api'; -import theme from './theme'; +import { create } from '@storybook/theming/create'; +import './styles/manager.css'; + +const theme = create({ + base: 'light', + + fontBase: 'Metropolis', + + brandTitle: 'HRA Design System', + brandUrl: 'https://humanatlas.io', + brandImage: 'assets/logo/hra_logo.svg', + brandTarget: '_self', + + colorPrimary: '#e00d3a', + colorSecondary: '#e00d3a', + + appBg: '#fcfcfc', + appContentBg: '#ffffff', + appPreviewBg: '#fffff', + appBorderColor: '#d5dbe3', + appBorderRadius: 8, + + textColor: '#201e3d', + textInverseColor: '#ffffff', + + barTextColor: '#4b4b5e', + barSelectedColor: '#e00d3a', + barHoverColor: '#b20a2f', + barBg: '#fcfcfc', + + inputBg: '#ffffff', + inputBorder: '#10162F', + inputTextColor: '#10162F', + inputBorderRadius: 2, +}); addons.setConfig({ theme, diff --git a/libs/design-system/.storybook/preview-styles/index.scss b/libs/design-system/.storybook/preview-styles/index.scss deleted file mode 100644 index 7c8924031..000000000 --- a/libs/design-system/.storybook/preview-styles/index.scss +++ /dev/null @@ -1,7 +0,0 @@ -@use '@fontsource/metropolis'; -@use '@fontsource/metropolis/500.css' as Metropolis500; -@use '@fontsource/nunito-sans'; - -html { - font-family: Metropolis; -} diff --git a/libs/design-system/.storybook/styles/manager.css b/libs/design-system/.storybook/styles/manager.css new file mode 100644 index 000000000..24bc9ada4 --- /dev/null +++ b/libs/design-system/.storybook/styles/manager.css @@ -0,0 +1,9 @@ +@import '@fontsource/metropolis'; + +* { + line-height: 1.5; +} + +div.sidebar-item:not([data-selected='true']) svg { + color: #4b4b5e; +} diff --git a/libs/design-system/.storybook/styles/preview.scss b/libs/design-system/.storybook/styles/preview.scss new file mode 100644 index 000000000..640129a65 --- /dev/null +++ b/libs/design-system/.storybook/styles/preview.scss @@ -0,0 +1,15 @@ +@use '@angular/material' as mat; +@use '../../styles/resets'; +@use '../../styles/fonts'; +@use '../../styles/icons'; +@use '../../styles/light-theme'; +@use '../../styles/typography'; +@use 'sass:map'; + +@include mat.core(); + +html { + @include mat.system-level-colors(light-theme.$theme); + @include mat.system-level-typography(light-theme.$theme, $overrides: typography.$overrides); + @include mat.all-component-themes(light-theme.$theme); +} diff --git a/libs/design-system/.storybook/theme.ts b/libs/design-system/.storybook/theme.ts deleted file mode 100644 index 0fd99f5d1..000000000 --- a/libs/design-system/.storybook/theme.ts +++ /dev/null @@ -1,34 +0,0 @@ -import { create } from '@storybook/theming/create'; - -export default create({ - base: 'light', - - fontBase: 'Metropolis', - - brandTitle: 'HRA Design System', - brandUrl: 'https://humanatlas.io', - brandImage: 'logo/hra_logo.svg', - brandTarget: '_self', - - colorPrimary: '#e00d3a', - colorSecondary: '#e00d3a', - - appBg: '#fcfcfc', - appContentBg: '#ffffff', - appPreviewBg: '#fffff', - appBorderColor: '#d5dbe3', - appBorderRadius: 8, - - textColor: '#201e3d', - textInverseColor: '#ffffff', - - barTextColor: '#4b4b5e', - barSelectedColor: '#e00d3a', - barHoverColor: '#b20a2f', - barBg: '#fcfcfc', - - inputBg: '#ffffff', - inputBorder: '#10162F', - inputTextColor: '#10162F', - inputBorderRadius: 2, -}); diff --git a/libs/design-system/project.json b/libs/design-system/project.json index 9c1d19c62..b7d2f6aa4 100644 --- a/libs/design-system/project.json +++ b/libs/design-system/project.json @@ -69,7 +69,7 @@ "browserTarget": "design-system:build-storybook", "compodoc": false, "assets": [{ "input": "libs/design-system/assets", "glob": "**/*", "output": "./assets" }], - "styles": ["libs/design-system/.storybook/preview-styles/index.scss"] + "styles": ["libs/design-system/.storybook/styles/preview.scss"] }, "configurations": { "ci": { @@ -86,7 +86,7 @@ "browserTarget": "design-system:build-storybook", "compodoc": false, "assets": [{ "input": "libs/design-system/assets", "glob": "**/*", "output": "./assets" }], - "styles": ["libs/design-system/.storybook/preview-styles/index.scss"] + "styles": ["libs/design-system/.storybook/styles/preview.scss"] }, "configurations": { "ci": { From 769aeb775c5267e9cbab67e7d6699c8de0589138 Mon Sep 17 00:00:00 2001 From: Daniel Bolin Date: Wed, 31 Jul 2024 18:17:22 -0400 Subject: [PATCH 16/33] refactor(design-system): Update tooltip card to use theming --- .../src/lib/tooltip-card.component.html | 8 ++--- .../src/lib/tooltip-card.component.scss | 33 ++++++++++--------- .../src/lib/tooltip-card.component.ts | 4 +-- 3 files changed, 24 insertions(+), 21 deletions(-) diff --git a/libs/design-system/tooltip-card/src/lib/tooltip-card.component.html b/libs/design-system/tooltip-card/src/lib/tooltip-card.component.html index ef2bdb071..1999f408f 100644 --- a/libs/design-system/tooltip-card/src/lib/tooltip-card.component.html +++ b/libs/design-system/tooltip-card/src/lib/tooltip-card.component.html @@ -1,8 +1,8 @@ @for (item of content(); track item) { -
+
@if (item.title) { -
{{ item.title }}
+

{{ item.title }}

} -
{{ item.description }}
-
+

{{ item.description }}

+ } diff --git a/libs/design-system/tooltip-card/src/lib/tooltip-card.component.scss b/libs/design-system/tooltip-card/src/lib/tooltip-card.component.scss index ff765e954..73ed64a0f 100644 --- a/libs/design-system/tooltip-card/src/lib/tooltip-card.component.scss +++ b/libs/design-system/tooltip-card/src/lib/tooltip-card.component.scss @@ -1,27 +1,30 @@ :host { display: block; - color: #4c4c58; - font-weight: 500; max-width: 28rem; padding: 0.75rem 1rem; border-radius: 0.5rem; box-shadow: 0 0.3125rem 1rem 0 #201e3d3d; - font-size: 1rem; - line-height: 1.5; + font: var(--sys-label-large); + letter-spacing: var(--sys-label-large-tracking); - &.small { - max-width: 21rem; - font-size: 0.875rem; - line-height: 1.3125rem; + .title { + margin: 0; + font-weight: inherit; + color: var(--sys-secondary); } - .tooltip { - &:not(:last-child) { - margin-bottom: 1rem; - } + .description { + margin: 0 0 1rem; + color: var(--sys-primary); + } - .title { - color: #201e3d; - } + .section:last-child .description { + margin: 0; + } + + &.small { + max-width: 21rem; + font: var(--sys-label-medium); + letter-spacing: var(--sys-label-medium-tracking); } } diff --git a/libs/design-system/tooltip-card/src/lib/tooltip-card.component.ts b/libs/design-system/tooltip-card/src/lib/tooltip-card.component.ts index c3933ef14..3022f213b 100644 --- a/libs/design-system/tooltip-card/src/lib/tooltip-card.component.ts +++ b/libs/design-system/tooltip-card/src/lib/tooltip-card.component.ts @@ -1,5 +1,5 @@ -import { booleanAttribute, ChangeDetectionStrategy, Component, input } from '@angular/core'; import { CommonModule } from '@angular/common'; +import { booleanAttribute, ChangeDetectionStrategy, Component, input } from '@angular/core'; /** Interface for Tooltip Card Content */ export interface TooltipContent { @@ -25,7 +25,7 @@ export interface TooltipContent { }) export class TooltipCardComponent { /** Input for the card */ - content = input.required(); + readonly content = input.required(); /** Flag to decide whether the card is small */ readonly small = input(false, { transform: booleanAttribute }); From cc5ba3add858971a8e9dcd6f9c0754db67e450d8 Mon Sep 17 00:00:00 2001 From: edlu77 Date: Wed, 31 Jul 2024 21:47:42 -0400 Subject: [PATCH 17/33] Improve responsiveness of filter popup --- .../filters-content.component.scss | 4 +- .../filters-popover.component.html | 7 +-- .../filters-popover.component.scss | 4 +- .../filters-popover.component.ts | 50 ++++++++++++++++--- .../checkbox/checkbox.component.scss | 13 ++--- 5 files changed, 53 insertions(+), 25 deletions(-) diff --git a/apps/ccf-eui/src/app/modules/filters/filters-content/filters-content.component.scss b/apps/ccf-eui/src/app/modules/filters/filters-content/filters-content.component.scss index a95c201f5..dc46f4897 100644 --- a/apps/ccf-eui/src/app/modules/filters/filters-content/filters-content.component.scss +++ b/apps/ccf-eui/src/app/modules/filters/filters-content/filters-content.component.scss @@ -9,10 +9,12 @@ } ::ng-deep ccf-checkbox { + min-width: fit-content; + display: block; + .options-container { position: relative; left: -0.5rem; - width: calc(100% + 0.5rem); .mdc-checkbox { padding: 0.5rem; diff --git a/apps/ccf-eui/src/app/modules/filters/filters-popover/filters-popover.component.html b/apps/ccf-eui/src/app/modules/filters/filters-popover/filters-popover.component.html index f6c8a821b..271f76514 100644 --- a/apps/ccf-eui/src/app/modules/filters/filters-popover/filters-popover.component.html +++ b/apps/ccf-eui/src/app/modules/filters/filters-popover/filters-popover.component.html @@ -7,12 +7,7 @@ -
+
(); + @ViewChild('container', { static: false }) containerRef!: ElementRef; + /** * Keeps track of whether or not the filters popover box is visible or not */ filtersVisible = false; + containerWidth?: number; + + get defaultHeight(): number { + return Math.ceil(this.technologyFilters.length / 5) * 32 + Math.ceil(this.providerFilters.length / 3) * 32 + 289; + } + /** * Calculate the popup height based on length of spatial search list */ - get popupHeight(): string { - if (!this.filtersVisible) { - return '0rem'; - } else { - return `${this.spatialSearchFilters.length > 0 ? 44 + this.spatialSearchFilters.length * 3 : 41}rem`; + get spatialHeight(): number { + return this.spatialSearchFilters.length > 0 ? (this.spatialSearchFilters.length + 1) * 48 : 0; + } + + ngOnChanges(changes: SimpleChanges) { + if (this.containerRef && 'spatialSearchFilters' in changes) { + const el = this.containerRef.nativeElement as HTMLElement; + el.style.transition = 'unset'; + el.style.height = `${this.defaultHeight + this.spatialHeight}px`; } } @@ -76,7 +98,21 @@ export class FiltersPopoverComponent { */ @Dispatch() toggleFilterVisible(): SetExecuteSearchOnGenerate { + const el = this.containerRef.nativeElement as HTMLElement; this.filtersVisible = !this.filtersVisible; + if (!this.filtersVisible) { + el.style.transition = 'all 0.2s ease-in-out 0.3s'; + } else { + el.style.transition = 'all 0.2s ease-in-out 0s'; + setTimeout(() => { + el.style.height = `${this.defaultHeight + this.spatialHeight}px`; + if (!this.containerWidth) { + this.containerWidth = el.clientWidth; + } + + el.style.width = `${this.containerWidth}px`; + }, 200); + } return new SetExecuteSearchOnGenerate(false); } diff --git a/apps/ccf-eui/src/app/shared/components/checkbox/checkbox.component.scss b/apps/ccf-eui/src/app/shared/components/checkbox/checkbox.component.scss index 9416492e7..b6762be38 100644 --- a/apps/ccf-eui/src/app/shared/components/checkbox/checkbox.component.scss +++ b/apps/ccf-eui/src/app/shared/components/checkbox/checkbox.component.scss @@ -5,24 +5,21 @@ } .options-container { - display: flex; - flex-wrap: wrap; + display: grid; .option { display: flex; height: 2rem; align-items: center; + min-width: 8rem; + width: min-content; } &.three { - .option { - width: 16.375rem; - } + grid-template-columns: auto auto auto; } &.five { - .option { - width: 20%; - } + grid-template-columns: auto auto auto auto auto; } } From b7dd35ab00cd414f88f9a927e5ef79171d237fd8 Mon Sep 17 00:00:00 2001 From: Daniel Bolin Date: Thu, 1 Aug 2024 10:53:16 -0400 Subject: [PATCH 18/33] refactor(design-system): Update theme colors --- libs/design-system/styles/_light-theme.scss | 48 ++++++++++----------- 1 file changed, 24 insertions(+), 24 deletions(-) diff --git a/libs/design-system/styles/_light-theme.scss b/libs/design-system/styles/_light-theme.scss index bcc2aea85..a797f09c9 100644 --- a/libs/design-system/styles/_light-theme.scss +++ b/libs/design-system/styles/_light-theme.scss @@ -5,48 +5,48 @@ $_palettes: ( primary: ( 0: #000000, - 10: #1a1b25, + 10: #201e3d, 20: #2f2f3b, 25: #3a3a46, 30: #464652, 35: #51515d, - 40: #5d5d6a, + 40: #4c4c58, 50: #767683, 60: #908f9d, 70: #abaab8, 80: #c7c5d3, - 90: #e3e1f0, - 95: #f1effe, - 98: #fbf8ff, - 99: #fffbff, + 90: #ffffff, + 95: #ffffff, + 98: #ffffff, + 99: #ffffff, 100: #ffffff, ), secondary: ( 0: #000000, - 10: #1a1836, + 10: #4c4c58, 20: #2f2d4d, 25: #3a3858, 30: #454364, 35: #514f71, - 40: #5d5b7d, + 40: #201e3d, 50: #767397, 60: #908db2, 70: #aba7ce, 80: #c6c2ea, - 90: #e3dfff, - 95: #f3eeff, + 90: #fcfcfc, + 95: #fcfcfc, 98: #fcf8ff, 99: #fffbff, 100: #ffffff, ), tertiary: ( 0: #000000, - 10: #40000a, + 10: #3b080d, 20: #680015, 25: #7d001c, - 30: #920022, + 30: #733336, 35: #a80029, - 40: #bf0030, + 40: #e00d3a, 50: #ed003e, 60: #ff5261, 70: #ff888c, @@ -59,8 +59,8 @@ $_palettes: ( ), neutral: ( 0: #000000, - 10: #1c1b1b, - 20: #313030, + 10: #171d1e, + 20: #2b3133, 25: #3c3b3b, 30: #484646, 35: #535252, @@ -69,9 +69,9 @@ $_palettes: ( 60: #929090, 70: #adaaaa, 80: #c9c6c5, - 90: #e5e2e1, - 95: #f4f0ef, - 98: #fcf8f8, + 90: #dee3e5, + 95: #ecf2f3, + 98: #f5fafb, 99: #f6feff, 100: #ffffff, ), @@ -80,13 +80,13 @@ $_palettes: ( 10: #1b1b1c, 20: #303031, 25: #3c3b3c, - 30: #474647, + 30: #41474d, 35: #535253, 40: #5f5e5e, - 50: #787777, + 50: #72787e, 60: #929091, 70: #adabab, - 80: #c8c6c6, + 80: #c1c7ce, 90: #e5e2e2, 95: #f3f0f0, 98: #fcf9f9, @@ -95,17 +95,17 @@ $_palettes: ( ), error: ( 0: #000000, - 10: #410002, + 10: #2f1400, 20: #690005, 25: #7e0007, 30: #93000a, 35: #a80710, - 40: #ba1a1a, + 40: #bc4f00, 50: #de3730, 60: #ff5449, 70: #ff897d, 80: #ffb4ab, - 90: #ffdad6, + 90: #ffdcc4, 95: #ffedea, 98: #fff8f7, 99: #fffbff, From 6211d5f517ed87ad508dd3884c6c502f8321ff21 Mon Sep 17 00:00:00 2001 From: edlu77 Date: Thu, 1 Aug 2024 12:36:12 -0400 Subject: [PATCH 19/33] Disable filter and datasource settings --- apps/ccf-eui/src/index.html | 4 ---- 1 file changed, 4 deletions(-) diff --git a/apps/ccf-eui/src/index.html b/apps/ccf-eui/src/index.html index 93269a8bd..bc8805010 100644 --- a/apps/ccf-eui/src/index.html +++ b/apps/ccf-eui/src/index.html @@ -12,10 +12,6 @@ From be18d8ed7d3a23cc03d62f04c6a174f14dc54438 Mon Sep 17 00:00:00 2001 From: edlu77 Date: Thu, 1 Aug 2024 12:36:37 -0400 Subject: [PATCH 20/33] Cleanup and documentation --- .../filters-popover.component.scss | 7 +++- .../filters-popover.component.ts | 38 ++++++++++++++----- 2 files changed, 33 insertions(+), 12 deletions(-) diff --git a/apps/ccf-eui/src/app/modules/filters/filters-popover/filters-popover.component.scss b/apps/ccf-eui/src/app/modules/filters/filters-popover/filters-popover.component.scss index 29932ea21..37f3f6306 100644 --- a/apps/ccf-eui/src/app/modules/filters/filters-popover/filters-popover.component.scss +++ b/apps/ccf-eui/src/app/modules/filters/filters-popover/filters-popover.component.scss @@ -20,11 +20,14 @@ top: 1.2rem; left: 1.48rem; box-shadow: 0.2rem 0.2rem 1rem 0rem #00000058; + transition-property: all; + transition-duration: 0.2s; + transition-timing-function: ease-in-out; &.visible { border-width: 1px; padding: 2rem; - transition: all 0.2s ease-in-out 0s; + transition-delay: 0s; .popup-body { opacity: 1; @@ -37,7 +40,7 @@ padding: 0; width: 0 !important; height: 0 !important; - transition: all 0.2s ease-in-out 0.3s; + transition-delay: 0.3s; .popup-body { opacity: 0; diff --git a/apps/ccf-eui/src/app/modules/filters/filters-popover/filters-popover.component.ts b/apps/ccf-eui/src/app/modules/filters/filters-popover/filters-popover.component.ts index 41b0e2173..941322388 100644 --- a/apps/ccf-eui/src/app/modules/filters/filters-popover/filters-popover.component.ts +++ b/apps/ccf-eui/src/app/modules/filters/filters-popover/filters-popover.component.ts @@ -65,6 +65,9 @@ export class FiltersPopoverComponent implements OnChanges { */ @Output() readonly spatialSearchRemoved = new EventEmitter(); + /** + * Popup container element ref + */ @ViewChild('container', { static: false }) containerRef!: ElementRef; /** @@ -72,44 +75,59 @@ export class FiltersPopoverComponent implements OnChanges { */ filtersVisible = false; + /** + * Width of popup container + */ containerWidth?: number; + /** + * Height of popup in px (minus spatial search list) + */ get defaultHeight(): number { return Math.ceil(this.technologyFilters.length / 5) * 32 + Math.ceil(this.providerFilters.length / 3) * 32 + 289; } /** - * Calculate the popup height based on length of spatial search list + * Height of spatial search list in px */ get spatialHeight(): number { return this.spatialSearchFilters.length > 0 ? (this.spatialSearchFilters.length + 1) * 48 : 0; } + /** + * Total popup height css value + */ + get popupHeight(): string { + return `${this.defaultHeight + this.spatialHeight}px`; + } + + /** + * Updates popup height when spatial search filters changes + * @param changes Changes + */ ngOnChanges(changes: SimpleChanges) { if (this.containerRef && 'spatialSearchFilters' in changes) { const el = this.containerRef.nativeElement as HTMLElement; - el.style.transition = 'unset'; - el.style.height = `${this.defaultHeight + this.spatialHeight}px`; + el.style.transitionDuration = '0s'; // Temporarily disable height transition + el.style.height = this.popupHeight; } } /** - * Toggles filter visible + * Toggles filter popup visibility */ @Dispatch() toggleFilterVisible(): SetExecuteSearchOnGenerate { const el = this.containerRef.nativeElement as HTMLElement; + el.style.transitionDuration = '0.2s'; this.filtersVisible = !this.filtersVisible; - if (!this.filtersVisible) { - el.style.transition = 'all 0.2s ease-in-out 0.3s'; - } else { - el.style.transition = 'all 0.2s ease-in-out 0s'; + if (this.filtersVisible) { setTimeout(() => { - el.style.height = `${this.defaultHeight + this.spatialHeight}px`; + // Save the popup width once it has expanded the first time if (!this.containerWidth) { this.containerWidth = el.clientWidth; } - + el.style.height = this.popupHeight; el.style.width = `${this.containerWidth}px`; }, 200); } From 8fd7bfb58934e1e3b9f1358fc781c54089d2e20f Mon Sep 17 00:00:00 2001 From: edlu77 Date: Thu, 1 Aug 2024 14:46:08 -0400 Subject: [PATCH 21/33] Enable filter flyout scrolling on zoom --- .../filters-popover.component.scss | 5 ++ .../filters-popover.component.ts | 47 +++++-------------- 2 files changed, 18 insertions(+), 34 deletions(-) diff --git a/apps/ccf-eui/src/app/modules/filters/filters-popover/filters-popover.component.scss b/apps/ccf-eui/src/app/modules/filters/filters-popover/filters-popover.component.scss index 37f3f6306..94a7d55b0 100644 --- a/apps/ccf-eui/src/app/modules/filters/filters-popover/filters-popover.component.scss +++ b/apps/ccf-eui/src/app/modules/filters/filters-popover/filters-popover.component.scss @@ -23,6 +23,8 @@ transition-property: all; transition-duration: 0.2s; transition-timing-function: ease-in-out; + max-height: 80vh; + max-width: 60vw; &.visible { border-width: 1px; @@ -32,6 +34,9 @@ .popup-body { opacity: 1; transition: opacity 0.2s ease-in-out 0.3s; + width: fit-content; + display: flex; + flex-direction: column; } } diff --git a/apps/ccf-eui/src/app/modules/filters/filters-popover/filters-popover.component.ts b/apps/ccf-eui/src/app/modules/filters/filters-popover/filters-popover.component.ts index 941322388..fccddbb00 100644 --- a/apps/ccf-eui/src/app/modules/filters/filters-popover/filters-popover.component.ts +++ b/apps/ccf-eui/src/app/modules/filters/filters-popover/filters-popover.component.ts @@ -75,32 +75,6 @@ export class FiltersPopoverComponent implements OnChanges { */ filtersVisible = false; - /** - * Width of popup container - */ - containerWidth?: number; - - /** - * Height of popup in px (minus spatial search list) - */ - get defaultHeight(): number { - return Math.ceil(this.technologyFilters.length / 5) * 32 + Math.ceil(this.providerFilters.length / 3) * 32 + 289; - } - - /** - * Height of spatial search list in px - */ - get spatialHeight(): number { - return this.spatialSearchFilters.length > 0 ? (this.spatialSearchFilters.length + 1) * 48 : 0; - } - - /** - * Total popup height css value - */ - get popupHeight(): string { - return `${this.defaultHeight + this.spatialHeight}px`; - } - /** * Updates popup height when spatial search filters changes * @param changes Changes @@ -109,7 +83,10 @@ export class FiltersPopoverComponent implements OnChanges { if (this.containerRef && 'spatialSearchFilters' in changes) { const el = this.containerRef.nativeElement as HTMLElement; el.style.transitionDuration = '0s'; // Temporarily disable height transition - el.style.height = this.popupHeight; + el.style.height = 'fit-content'; + setTimeout(() => { + el.style.height = `${el.clientHeight}px`; + }, 1); } } @@ -121,15 +98,17 @@ export class FiltersPopoverComponent implements OnChanges { const el = this.containerRef.nativeElement as HTMLElement; el.style.transitionDuration = '0.2s'; this.filtersVisible = !this.filtersVisible; + if (!this.filtersVisible) { + el.style.overflow = 'hidden'; + } if (this.filtersVisible) { + el.style.overflow = 'auto'; + el.style.height = 'fit-content'; + el.style.width = 'fit-content'; setTimeout(() => { - // Save the popup width once it has expanded the first time - if (!this.containerWidth) { - this.containerWidth = el.clientWidth; - } - el.style.height = this.popupHeight; - el.style.width = `${this.containerWidth}px`; - }, 200); + el.style.height = `${el.clientHeight}px`; + el.style.width = `${el.clientWidth}px`; + }, 225); } return new SetExecuteSearchOnGenerate(false); } From b1d778dc1db141d0e9714c9ab89109ea6c11cea8 Mon Sep 17 00:00:00 2001 From: edlu77 Date: Thu, 1 Aug 2024 15:13:30 -0400 Subject: [PATCH 22/33] More tweaks --- .../filters-popover.component.scss | 6 ++-- .../filters-popover.component.ts | 28 ++++++++++++------- 2 files changed, 21 insertions(+), 13 deletions(-) diff --git a/apps/ccf-eui/src/app/modules/filters/filters-popover/filters-popover.component.scss b/apps/ccf-eui/src/app/modules/filters/filters-popover/filters-popover.component.scss index 94a7d55b0..bcec160d1 100644 --- a/apps/ccf-eui/src/app/modules/filters/filters-popover/filters-popover.component.scss +++ b/apps/ccf-eui/src/app/modules/filters/filters-popover/filters-popover.component.scss @@ -24,12 +24,14 @@ transition-duration: 0.2s; transition-timing-function: ease-in-out; max-height: 80vh; - max-width: 60vw; + max-width: 80vw; &.visible { border-width: 1px; padding: 2rem; transition-delay: 0s; + height: fit-content !important; + width: fit-content !important; .popup-body { opacity: 1; @@ -43,8 +45,6 @@ &.hidden { border-width: 0; padding: 0; - width: 0 !important; - height: 0 !important; transition-delay: 0.3s; .popup-body { diff --git a/apps/ccf-eui/src/app/modules/filters/filters-popover/filters-popover.component.ts b/apps/ccf-eui/src/app/modules/filters/filters-popover/filters-popover.component.ts index fccddbb00..eea539220 100644 --- a/apps/ccf-eui/src/app/modules/filters/filters-popover/filters-popover.component.ts +++ b/apps/ccf-eui/src/app/modules/filters/filters-popover/filters-popover.component.ts @@ -1,4 +1,5 @@ import { + AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, @@ -23,7 +24,7 @@ import { SetExecuteSearchOnGenerate } from '../../../core/store/spatial-search-u styleUrls: ['./filters-popover.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush, }) -export class FiltersPopoverComponent implements OnChanges { +export class FiltersPopoverComponent implements OnChanges, AfterViewInit { /** * Allows the filters to be set from outside the component, and still render / function normally */ @@ -75,6 +76,12 @@ export class FiltersPopoverComponent implements OnChanges { */ filtersVisible = false; + ngAfterViewInit() { + const el = this.containerRef.nativeElement as HTMLElement; + el.style.height = `0px`; + el.style.width = `0px`; + } + /** * Updates popup height when spatial search filters changes * @param changes Changes @@ -98,17 +105,18 @@ export class FiltersPopoverComponent implements OnChanges { const el = this.containerRef.nativeElement as HTMLElement; el.style.transitionDuration = '0.2s'; this.filtersVisible = !this.filtersVisible; - if (!this.filtersVisible) { - el.style.overflow = 'hidden'; - } if (this.filtersVisible) { - el.style.overflow = 'auto'; - el.style.height = 'fit-content'; - el.style.width = 'fit-content'; setTimeout(() => { - el.style.height = `${el.clientHeight}px`; - el.style.width = `${el.clientWidth}px`; - }, 225); + el.style.overflow = 'auto'; + }, 200); + } else { + el.style.overflow = 'hidden'; + el.style.height = `${el.clientHeight}px`; + el.style.width = `${el.clientWidth}px`; + setTimeout(() => { + el.style.height = `0px`; + el.style.width = `0px`; + }, 1); } return new SetExecuteSearchOnGenerate(false); } From 802067b84abdf74b1d9a875f237d11ac98db4ad8 Mon Sep 17 00:00:00 2001 From: edlu77 Date: Thu, 1 Aug 2024 21:46:40 -0400 Subject: [PATCH 23/33] Updates to brandmark storybook --- .../assets/logo/brandmark_black.svg | 10 ------- .../assets/logo/brandmark_small.svg | 15 ---------- ...randmark_default.svg => hra_brandmark.svg} | 2 +- ...k_white.svg => hra_brandmark_contrast.svg} | 0 .../src/lib/brandmark.component.html | 2 +- .../src/lib/brandmark.component.scss | 2 +- .../src/lib/brandmark.component.stories.ts | 30 +++++++------------ .../brandmark/src/lib/brandmark.component.ts | 15 ++++------ 8 files changed, 20 insertions(+), 56 deletions(-) delete mode 100644 libs/design-system/.storybook/assets/logo/brandmark_black.svg delete mode 100644 libs/design-system/.storybook/assets/logo/brandmark_small.svg rename libs/design-system/.storybook/assets/logo/{brandmark_default.svg => hra_brandmark.svg} (99%) rename libs/design-system/.storybook/assets/logo/{brandmark_white.svg => hra_brandmark_contrast.svg} (100%) diff --git a/libs/design-system/.storybook/assets/logo/brandmark_black.svg b/libs/design-system/.storybook/assets/logo/brandmark_black.svg deleted file mode 100644 index dd97d68ad..000000000 --- a/libs/design-system/.storybook/assets/logo/brandmark_black.svg +++ /dev/null @@ -1,10 +0,0 @@ - - - - - - - - - - diff --git a/libs/design-system/.storybook/assets/logo/brandmark_small.svg b/libs/design-system/.storybook/assets/logo/brandmark_small.svg deleted file mode 100644 index 680396838..000000000 --- a/libs/design-system/.storybook/assets/logo/brandmark_small.svg +++ /dev/null @@ -1,15 +0,0 @@ - - - - - - - - - - - - - - - diff --git a/libs/design-system/.storybook/assets/logo/brandmark_default.svg b/libs/design-system/.storybook/assets/logo/hra_brandmark.svg similarity index 99% rename from libs/design-system/.storybook/assets/logo/brandmark_default.svg rename to libs/design-system/.storybook/assets/logo/hra_brandmark.svg index 2b9daf503..d19436e5b 100644 --- a/libs/design-system/.storybook/assets/logo/brandmark_default.svg +++ b/libs/design-system/.storybook/assets/logo/hra_brandmark.svg @@ -1,5 +1,5 @@ - + diff --git a/libs/design-system/.storybook/assets/logo/brandmark_white.svg b/libs/design-system/.storybook/assets/logo/hra_brandmark_contrast.svg similarity index 100% rename from libs/design-system/.storybook/assets/logo/brandmark_white.svg rename to libs/design-system/.storybook/assets/logo/hra_brandmark_contrast.svg diff --git a/libs/design-system/brandmark/src/lib/brandmark.component.html b/libs/design-system/brandmark/src/lib/brandmark.component.html index 616e4f5fc..b3730ff2c 100644 --- a/libs/design-system/brandmark/src/lib/brandmark.component.html +++ b/libs/design-system/brandmark/src/lib/brandmark.component.html @@ -1 +1 @@ -Human Reference Atlas brandmark +
diff --git a/libs/design-system/brandmark/src/lib/brandmark.component.scss b/libs/design-system/brandmark/src/lib/brandmark.component.scss index 5d4e87f30..1cd97bf90 100644 --- a/libs/design-system/brandmark/src/lib/brandmark.component.scss +++ b/libs/design-system/brandmark/src/lib/brandmark.component.scss @@ -1,3 +1,3 @@ :host { - display: block; + color: var(--hra-brandmark-color, var(--sys-tertiary)); } diff --git a/libs/design-system/brandmark/src/lib/brandmark.component.stories.ts b/libs/design-system/brandmark/src/lib/brandmark.component.stories.ts index fbc4d06ea..067091778 100644 --- a/libs/design-system/brandmark/src/lib/brandmark.component.stories.ts +++ b/libs/design-system/brandmark/src/lib/brandmark.component.stories.ts @@ -1,6 +1,7 @@ -import { BrandmarkComponent } from './brandmark.component'; +import { provideHttpClient } from '@angular/common/http'; +import { applicationConfig, Meta, StoryObj } from '@storybook/angular'; -import type { Meta, StoryObj } from '@storybook/angular'; +import { BrandmarkComponent } from './brandmark.component'; const meta: Meta = { component: BrandmarkComponent, @@ -11,28 +12,19 @@ const meta: Meta = { url: 'https://www.figma.com/design/BCEJn9KCIbBJ5MzqnojKQp/Design-System-Components?node-id=82-776', }, }, + decorators: [ + applicationConfig({ + providers: [provideHttpClient()], + }), + ], }; export default meta; type Story = StoryObj; -export const DefaultSmall: Story = { - args: { - small: true, - }, -}; - -export const DefaultLarge: Story = { - args: {}, -}; - -export const WhiteLarge: Story = { - args: { - color: 'white', - }, -}; +export const Default: Story = {}; -export const BlackLarge: Story = { +export const Contrast: Story = { args: { - color: 'black', + contrast: true, }, }; diff --git a/libs/design-system/brandmark/src/lib/brandmark.component.ts b/libs/design-system/brandmark/src/lib/brandmark.component.ts index 79b28c6bf..853a4b3c7 100644 --- a/libs/design-system/brandmark/src/lib/brandmark.component.ts +++ b/libs/design-system/brandmark/src/lib/brandmark.component.ts @@ -1,6 +1,6 @@ import { CommonModule } from '@angular/common'; import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core'; -import { AssetUrlPipe } from '@hra-ui/cdk/app-href'; +import { InlineSVGModule } from 'ng-inline-svg-2'; /** * HRA brandmark component @@ -8,20 +8,17 @@ import { AssetUrlPipe } from '@hra-ui/cdk/app-href'; @Component({ selector: 'hra-brandmark', standalone: true, - imports: [CommonModule, AssetUrlPipe], + imports: [CommonModule, InlineSVGModule], templateUrl: './brandmark.component.html', styleUrl: './brandmark.component.scss', changeDetection: ChangeDetectionStrategy.OnPush, }) export class BrandmarkComponent { - /** Brandmark color variant */ - readonly color = input('default'); - - /** Brandmark size to use */ - readonly small = input(false); - /** Path to SVG */ readonly svgPath = computed(() => { - return `logo/brandmark_${this.small() ? 'small' : this.color()}.svg`; + return `assets/logo/hra_brandmark${this.contrast() ? '_contrast' : ''}.svg`; }); + + /** Whether to use the contrast brandmark */ + readonly contrast = input(false); } From 47682923e1ebe79cd02db9fceb07a388d5230dd9 Mon Sep 17 00:00:00 2001 From: edlu77 Date: Thu, 1 Aug 2024 22:03:01 -0400 Subject: [PATCH 24/33] Fix linting --- libs/design-system/package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/libs/design-system/package.json b/libs/design-system/package.json index d0a90b95e..bc222571b 100644 --- a/libs/design-system/package.json +++ b/libs/design-system/package.json @@ -23,6 +23,7 @@ "@angular/core": "18.0.7", "@hra-ui/cdk": "0.0.1", "@angular/material": "18.0.6", + "ng-inline-svg-2": "^15.0.1", "ngx-scrollbar": "^15.1.0", "rxjs": "7.8.0" }, From 4e76d90d26b02d31bcfc2a0a345dba0b680fa429 Mon Sep 17 00:00:00 2001 From: edlu77 Date: Thu, 1 Aug 2024 22:59:32 -0400 Subject: [PATCH 25/33] Update testing --- .../src/lib/brandmark.component.html | 2 +- .../src/lib/brandmark.component.spec.ts | 20 +++++++++---------- 2 files changed, 11 insertions(+), 11 deletions(-) diff --git a/libs/design-system/brandmark/src/lib/brandmark.component.html b/libs/design-system/brandmark/src/lib/brandmark.component.html index b3730ff2c..b13201352 100644 --- a/libs/design-system/brandmark/src/lib/brandmark.component.html +++ b/libs/design-system/brandmark/src/lib/brandmark.component.html @@ -1 +1 @@ -
+
diff --git a/libs/design-system/brandmark/src/lib/brandmark.component.spec.ts b/libs/design-system/brandmark/src/lib/brandmark.component.spec.ts index abeef323f..3167a7d8a 100644 --- a/libs/design-system/brandmark/src/lib/brandmark.component.spec.ts +++ b/libs/design-system/brandmark/src/lib/brandmark.component.spec.ts @@ -1,27 +1,27 @@ +import { provideHttpClient } from '@angular/common/http'; import { render, screen } from '@testing-library/angular'; import { BrandmarkComponent } from './brandmark.component'; describe('BrandmarkComponent', () => { - it('should render a large logo', async () => { + it('should render a normal logo', async () => { await render(BrandmarkComponent, { - componentInputs: { - small: false, - }, + providers: [provideHttpClient()], }); - const logo = screen.getByAltText('Human Reference Atlas brandmark'); + const logo = screen.getByTestId('brandmark'); expect(logo).toBeInTheDocument(); - expect(logo).toHaveAttribute('src', 'logo/brandmark_default.svg'); + expect(logo).toHaveAttribute('ng-reflect-inline-s-v-g', 'assets/logo/hra_brandmark.svg'); }); - it('should render a small logo', async () => { + it('should render a contrast logo', async () => { await render(BrandmarkComponent, { componentInputs: { - small: true, + contrast: true, }, + providers: [provideHttpClient()], }); - const logo = screen.getByAltText('Human Reference Atlas brandmark'); + const logo = screen.getByTestId('brandmark'); expect(logo).toBeInTheDocument(); - expect(logo).toHaveAttribute('src', 'logo/brandmark_small.svg'); + expect(logo).toHaveAttribute('ng-reflect-inline-s-v-g', 'assets/logo/hra_brandmark_cont'); }); }); From 3ab7d3a30b21e3fff8b8b88087c9c938fe065294 Mon Sep 17 00:00:00 2001 From: Bhushan Khope Date: Fri, 2 Aug 2024 09:34:39 -0400 Subject: [PATCH 26/33] resolve PR comments --- .../brand-logo/src/lib/brand-logo.component.html | 5 ++--- .../brand-logo/src/lib/brand-logo.component.scss | 2 +- .../brand-logo/src/lib/brand-logo.component.stories.ts | 6 +----- .../brand-logo/src/lib/brand-logo.component.ts | 3 --- 4 files changed, 4 insertions(+), 12 deletions(-) diff --git a/libs/design-system/brand-logo/src/lib/brand-logo.component.html b/libs/design-system/brand-logo/src/lib/brand-logo.component.html index f568f6329..fbbd5a973 100644 --- a/libs/design-system/brand-logo/src/lib/brand-logo.component.html +++ b/libs/design-system/brand-logo/src/lib/brand-logo.component.html @@ -1,10 +1,9 @@ diff --git a/libs/design-system/brand-logo/src/lib/brand-logo.component.scss b/libs/design-system/brand-logo/src/lib/brand-logo.component.scss index 3b63e9acb..46866b69c 100644 --- a/libs/design-system/brand-logo/src/lib/brand-logo.component.scss +++ b/libs/design-system/brand-logo/src/lib/brand-logo.component.scss @@ -1,6 +1,6 @@ :host { display: block; - // color: var(--hra-brand-logo-color, red); + color: var(--sys-on-surface); a { display: block; color: inherit; diff --git a/libs/design-system/brand-logo/src/lib/brand-logo.component.stories.ts b/libs/design-system/brand-logo/src/lib/brand-logo.component.stories.ts index b8c6a0b6b..4e3ea04eb 100644 --- a/libs/design-system/brand-logo/src/lib/brand-logo.component.stories.ts +++ b/libs/design-system/brand-logo/src/lib/brand-logo.component.stories.ts @@ -6,7 +6,7 @@ const meta: Meta = { parameters: { design: { type: 'figma', - url: 'https://www.figma.com/design/gQEMLugLjweDvbsNNUVffD/Design-System-Repository?node-id=5097-23013&t=mdJDmeklbfjt0jbX-4', + url: 'https://www.figma.com/design/BCEJn9KCIbBJ5MzqnojKQp/Design-System-Components?node-id=84-802', }, }, }; @@ -18,9 +18,6 @@ export const Primary: Story = { }; export const PrimaryWhite: Story = { - args: { - color: '#FFFFFF', - }, parameters: { backgrounds: { default: 'dark', @@ -37,7 +34,6 @@ export const Small: Story = { export const SmallWhite: Story = { args: { small: true, - color: '#FFFFFF', }, parameters: { backgrounds: { diff --git a/libs/design-system/brand-logo/src/lib/brand-logo.component.ts b/libs/design-system/brand-logo/src/lib/brand-logo.component.ts index c8874852d..9b2dc4b04 100644 --- a/libs/design-system/brand-logo/src/lib/brand-logo.component.ts +++ b/libs/design-system/brand-logo/src/lib/brand-logo.component.ts @@ -17,9 +17,6 @@ export class BrandLogoComponent { /** Flag to check if the Logo is small */ readonly small = input(false, { transform: booleanAttribute }); - /** Text color of the brand name */ - readonly color = input('#201E3D'); - /** SVG script eval mode */ readonly NEVER_EVAL_SCRIPTS = SVGScriptEvalMode.NEVER; } From b1dd432a2fadc585ab43dcf9f84d3f58f8b32b5c Mon Sep 17 00:00:00 2001 From: Bhushan Khope Date: Fri, 2 Aug 2024 12:15:50 -0400 Subject: [PATCH 27/33] use css variable to set text color --- ...ra-brand-logo.svg => hra-logo-regular.svg} | 0 .../assets/logo/hra-logo-small.svg | 18 +++++++++++++++ .../src/lib/brand-logo.component.html | 5 ++-- .../src/lib/brand-logo.component.scss | 7 +++--- .../src/lib/brand-logo.component.spec.ts | 5 +++- .../src/lib/brand-logo.component.stories.ts | 23 ++++++++++++++++++- .../src/lib/brand-logo.component.ts | 12 ++++++---- 7 files changed, 58 insertions(+), 12 deletions(-) rename libs/design-system/assets/logo/{hra-brand-logo.svg => hra-logo-regular.svg} (100%) create mode 100644 libs/design-system/assets/logo/hra-logo-small.svg diff --git a/libs/design-system/assets/logo/hra-brand-logo.svg b/libs/design-system/assets/logo/hra-logo-regular.svg similarity index 100% rename from libs/design-system/assets/logo/hra-brand-logo.svg rename to libs/design-system/assets/logo/hra-logo-regular.svg diff --git a/libs/design-system/assets/logo/hra-logo-small.svg b/libs/design-system/assets/logo/hra-logo-small.svg new file mode 100644 index 000000000..affd38c36 --- /dev/null +++ b/libs/design-system/assets/logo/hra-logo-small.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/libs/design-system/brand-logo/src/lib/brand-logo.component.html b/libs/design-system/brand-logo/src/lib/brand-logo.component.html index fbbd5a973..c378ea0c1 100644 --- a/libs/design-system/brand-logo/src/lib/brand-logo.component.html +++ b/libs/design-system/brand-logo/src/lib/brand-logo.component.html @@ -1,9 +1,10 @@ diff --git a/libs/design-system/brand-logo/src/lib/brand-logo.component.scss b/libs/design-system/brand-logo/src/lib/brand-logo.component.scss index 46866b69c..82404c3e5 100644 --- a/libs/design-system/brand-logo/src/lib/brand-logo.component.scss +++ b/libs/design-system/brand-logo/src/lib/brand-logo.component.scss @@ -1,11 +1,12 @@ :host { display: block; - color: var(--sys-on-surface); + color: var(--hra-brand-logo-text-color, var(--sys-on-surface)); + a { display: block; color: inherit; - max-height: 6.375rem; - max-width: 15.375rem; + height: 6.375rem; + width: 15.375rem; &.small { height: 3rem; diff --git a/libs/design-system/brand-logo/src/lib/brand-logo.component.spec.ts b/libs/design-system/brand-logo/src/lib/brand-logo.component.spec.ts index d24e0964c..e22ded870 100644 --- a/libs/design-system/brand-logo/src/lib/brand-logo.component.spec.ts +++ b/libs/design-system/brand-logo/src/lib/brand-logo.component.spec.ts @@ -1,9 +1,12 @@ import { render, screen } from '@testing-library/angular'; import { BrandLogoComponent } from './brand-logo.component'; +import { provideHttpClient } from '@angular/common/http'; describe('BrandLogoComponent', () => { beforeEach(async () => { - await render(BrandLogoComponent); + await render(BrandLogoComponent, { + providers: [provideHttpClient()], + }); }); it('should create', () => { diff --git a/libs/design-system/brand-logo/src/lib/brand-logo.component.stories.ts b/libs/design-system/brand-logo/src/lib/brand-logo.component.stories.ts index 4e3ea04eb..4ac4a67de 100644 --- a/libs/design-system/brand-logo/src/lib/brand-logo.component.stories.ts +++ b/libs/design-system/brand-logo/src/lib/brand-logo.component.stories.ts @@ -1,5 +1,7 @@ -import type { Meta, StoryObj } from '@storybook/angular'; +import { Meta, StoryObj, applicationConfig } from '@storybook/angular'; import { BrandLogoComponent } from './brand-logo.component'; +import { provideHttpClient } from '@angular/common/http'; + const meta: Meta = { component: BrandLogoComponent, title: 'BrandLogoComponent', @@ -9,15 +11,33 @@ const meta: Meta = { url: 'https://www.figma.com/design/BCEJn9KCIbBJ5MzqnojKQp/Design-System-Components?node-id=84-802', }, }, + decorators: [ + applicationConfig({ + providers: [provideHttpClient()], + }), + ], }; + export default meta; type Story = StoryObj; +function renderWithColor(color: string): Story['render'] { + return (args) => ({ + props: args, + styles: [ + `hra-brand-logo { + --hra-brand-logo-text-color: ${color}; + }`, + ], + }); +} + export const Primary: Story = { args: {}, }; export const PrimaryWhite: Story = { + render: renderWithColor('#ffffff'), parameters: { backgrounds: { default: 'dark', @@ -35,6 +55,7 @@ export const SmallWhite: Story = { args: { small: true, }, + render: renderWithColor('#ffffff'), parameters: { backgrounds: { default: 'dark', diff --git a/libs/design-system/brand-logo/src/lib/brand-logo.component.ts b/libs/design-system/brand-logo/src/lib/brand-logo.component.ts index 9b2dc4b04..f25407325 100644 --- a/libs/design-system/brand-logo/src/lib/brand-logo.component.ts +++ b/libs/design-system/brand-logo/src/lib/brand-logo.component.ts @@ -1,14 +1,13 @@ -import { booleanAttribute, ChangeDetectionStrategy, Component, input } from '@angular/core'; +import { booleanAttribute, ChangeDetectionStrategy, Component, computed, input } from '@angular/core'; import { CommonModule } from '@angular/common'; import { AssetUrlPipe } from '@hra-ui/cdk/app-href'; import { InlineSVGModule, SVGScriptEvalMode } from 'ng-inline-svg-2'; -import { HttpClientModule } from '@angular/common/http'; /** Brand Logo Component */ @Component({ - selector: 'hra-brand', + selector: 'hra-brand-logo', standalone: true, - imports: [CommonModule, AssetUrlPipe, InlineSVGModule, HttpClientModule], + imports: [CommonModule, AssetUrlPipe, InlineSVGModule], templateUrl: './brand-logo.component.html', styleUrl: './brand-logo.component.scss', changeDetection: ChangeDetectionStrategy.OnPush, @@ -17,6 +16,9 @@ export class BrandLogoComponent { /** Flag to check if the Logo is small */ readonly small = input(false, { transform: booleanAttribute }); + /** Computed logo path based on the logo size */ + protected readonly logoPath = computed(() => `assets/logo/hra-logo-${this.small() ? 'small' : 'regular'}.svg`); + /** SVG script eval mode */ - readonly NEVER_EVAL_SCRIPTS = SVGScriptEvalMode.NEVER; + protected readonly NEVER_EVAL_SCRIPTS = SVGScriptEvalMode.NEVER; } From a6194aa728d5f210de9ed9a74a44562a57c7e783 Mon Sep 17 00:00:00 2001 From: Bhushan Khope Date: Fri, 2 Aug 2024 14:09:29 -0400 Subject: [PATCH 28/33] improve test coverage --- .../src/lib/brand-logo.component.spec.ts | 26 ++++++++++++++----- .../src/lib/brand-logo.component.ts | 2 +- 2 files changed, 20 insertions(+), 8 deletions(-) diff --git a/libs/design-system/brand-logo/src/lib/brand-logo.component.spec.ts b/libs/design-system/brand-logo/src/lib/brand-logo.component.spec.ts index e22ded870..a0a2d3870 100644 --- a/libs/design-system/brand-logo/src/lib/brand-logo.component.spec.ts +++ b/libs/design-system/brand-logo/src/lib/brand-logo.component.spec.ts @@ -1,16 +1,28 @@ -import { render, screen } from '@testing-library/angular'; -import { BrandLogoComponent } from './brand-logo.component'; import { provideHttpClient } from '@angular/common/http'; +import { render, RenderComponentOptions, screen } from '@testing-library/angular'; +import { BrandLogoComponent } from './brand-logo.component'; describe('BrandLogoComponent', () => { - beforeEach(async () => { - await render(BrandLogoComponent, { - providers: [provideHttpClient()], + async function setup(options?: RenderComponentOptions) { + return render(BrandLogoComponent, { + providers: [provideHttpClient(), ...(options?.providers ?? [])], + ...options, }); - }); + } - it('should create', () => { + it('should create', async () => { + await setup(); const brandLink = screen.getByRole('link'); expect(brandLink).toBeInTheDocument(); }); + + it('should select small image if input small is true', async () => { + const { fixture } = await setup({ + componentInputs: { + small: true, + }, + }); + + expect(fixture.componentInstance.logoPath()).toEqual('assets/logo/hra-logo-small.svg'); + }); }); diff --git a/libs/design-system/brand-logo/src/lib/brand-logo.component.ts b/libs/design-system/brand-logo/src/lib/brand-logo.component.ts index f25407325..8af73e717 100644 --- a/libs/design-system/brand-logo/src/lib/brand-logo.component.ts +++ b/libs/design-system/brand-logo/src/lib/brand-logo.component.ts @@ -17,7 +17,7 @@ export class BrandLogoComponent { readonly small = input(false, { transform: booleanAttribute }); /** Computed logo path based on the logo size */ - protected readonly logoPath = computed(() => `assets/logo/hra-logo-${this.small() ? 'small' : 'regular'}.svg`); + readonly logoPath = computed(() => `assets/logo/hra-logo-${this.small() ? 'small' : 'regular'}.svg`); /** SVG script eval mode */ protected readonly NEVER_EVAL_SCRIPTS = SVGScriptEvalMode.NEVER; From 63916a131ad3c5fc9375b156450cee8ba7c45075 Mon Sep 17 00:00:00 2001 From: Daniel Bolin Date: Fri, 2 Aug 2024 15:55:40 -0400 Subject: [PATCH 29/33] feat(design-system): Add scrollbar stories --- .../scroll-overflow-fade.directive.stories.ts | 38 +------- .../scrolling/src/lib/scrolling.stories.ts | 95 +++++++++++++++++++ 2 files changed, 100 insertions(+), 33 deletions(-) create mode 100644 libs/design-system/scrolling/src/lib/scrolling.stories.ts diff --git a/libs/design-system/scrolling/src/lib/scroll-overflow-fade/scroll-overflow-fade.directive.stories.ts b/libs/design-system/scrolling/src/lib/scroll-overflow-fade/scroll-overflow-fade.directive.stories.ts index f39708953..e7b82c3d3 100644 --- a/libs/design-system/scrolling/src/lib/scroll-overflow-fade/scroll-overflow-fade.directive.stories.ts +++ b/libs/design-system/scrolling/src/lib/scroll-overflow-fade/scroll-overflow-fade.directive.stories.ts @@ -1,13 +1,7 @@ -import { applicationConfig, moduleMetadata, type Meta, type StoryObj } from '@storybook/angular'; -import { ScrollingModule, provideScrolling } from '../scrolling.module'; +import { type Meta, type StoryObj } from '@storybook/angular'; +import { utils } from '../scrolling.stories'; import { ScrollOverflowFadeDirective } from './scroll-overflow-fade.directive'; -function generateContent(length: number): string { - const content = `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tortor odio, aliquet eget velit ut, suscipit ultrices ipsum. Nunc consequat, felis quis dignissim tincidunt, mauris eros scelerisque turpis, sed feugiat ex est eu felis. In hac habitasse platea dictumst. Donec volutpat orci id sapien hendrerit, eget consequat leo faucibus. Quisque euismod dolor lacus. Aliquam malesuada lacus eu nulla interdum aliquam. Proin consectetur nibh sed mi gravida ornare. Donec sit amet scelerisque turpis. Maecenas felis libero, rutrum eget lobortis eu, lacinia ac libero. Cras nec nibh sed justo commodo faucibus.`; - const paragraph = `

${content}

`; - return Array(length).fill(paragraph).join('\n'); -} - const meta: Meta = { component: ScrollOverflowFadeDirective, title: 'ScrollOverflowFade', @@ -17,37 +11,15 @@ const meta: Meta = { url: 'https://www.figma.com/design/BCEJn9KCIbBJ5MzqnojKQp/Design-System-Components?node-id=214-1697', }, }, - decorators: [ - applicationConfig({ - providers: [provideScrolling()], - }), - moduleMetadata({ - imports: [ScrollingModule], - }), - ], + decorators: [...utils.sharedDecorators], render: (args) => ({ props: args, template: ` -
-

Scroll Me!

- ${generateContent(5)} -
+ ${utils.sharedContentTemplate} `, - styles: [ - `ng-scrollbar { - --scrollbar-offset: 4; - border: 1px solid black; - border-radius: 4px; - width: 332px; - height: 400px; - }`, - `.content { - width: 300px; - padding: 16px; - }`, - ], + styles: [...utils.sharedStyles], }), }; export default meta; diff --git a/libs/design-system/scrolling/src/lib/scrolling.stories.ts b/libs/design-system/scrolling/src/lib/scrolling.stories.ts new file mode 100644 index 000000000..6e3027435 --- /dev/null +++ b/libs/design-system/scrolling/src/lib/scrolling.stories.ts @@ -0,0 +1,95 @@ +import { applicationConfig, moduleMetadata, type Meta, type StoryObj } from '@storybook/angular'; +import { NgScrollbar } from 'ngx-scrollbar'; +import { ScrollingModule, provideScrolling } from './scrolling.module'; + +const loremIpsum = ` +Lorem ipsum dolor sit amet, consectetur adipiscing elit. +Etiam tortor odio, aliquet eget velit ut, suscipit ultrices ipsum. +Nunc consequat, felis quis dignissim tincidunt, mauris eros scelerisque turpis, sed feugiat ex est eu felis. +In hac habitasse platea dictumst. +Donec volutpat orci id sapien hendrerit, eget consequat leo faucibus. +Quisque euismod dolor lacus. +Aliquam malesuada lacus eu nulla interdum aliquam. +Proin consectetur nibh sed mi gravida ornare. +Donec sit amet scelerisque turpis. +Maecenas felis libero, rutrum eget lobortis eu, lacinia ac libero. +Cras nec nibh sed justo commodo faucibus.`; + +function generateContent(length: number): string { + const paragraph = `

${loremIpsum}

`; + return Array(length).fill(paragraph).join('\n'); +} + +export const utils = { + generateContent, + sharedContentTemplate: ` +
+

Scroll Me!

+ ${generateContent(5)} +
+ `, + sharedDecorators: [ + applicationConfig({ + providers: [provideScrolling()], + }), + moduleMetadata({ + imports: [ScrollingModule], + }), + ], + sharedStyles: [ + `ng-scrollbar { + --scrollbar-offset: 4; + border: 1px solid black; + border-radius: 4px; + width: 332px; + height: 400px; + }`, + `.content { + width: 300px; + padding: 16px; + }`, + ], +} as const; + +const meta: Meta = { + component: NgScrollbar, + title: 'Scrollbar', + excludeStories: ['utils'], + parameters: { + design: { + type: 'figma', + url: 'https://www.figma.com/design/BCEJn9KCIbBJ5MzqnojKQp/Design-System-Components?node-id=214-1253', + }, + }, + decorators: [...utils.sharedDecorators], +}; + +export default meta; +type Story = StoryObj; + +function renderWithThickness(thickness: number): Story['render'] { + return (args) => ({ + props: args, + template: ` + + ${utils.sharedContentTemplate} + + `, + styles: [ + ...utils.sharedStyles, + `ng-scrollbar { + --scrollbar-thickness: ${thickness}; + }`, + ], + }); +} + +export const Default: Story = { + args: {}, + render: renderWithThickness(8), +}; + +export const Large: Story = { + args: {}, + render: renderWithThickness(12), +}; From 50de9e00e1e2d80787f5b5042b740fc4c64470e5 Mon Sep 17 00:00:00 2001 From: Daniel Bolin Date: Fri, 2 Aug 2024 16:13:01 -0400 Subject: [PATCH 30/33] refactor: Replace references to duplicated jest config --- apps/cde-visualization-wc/jest.config.ts | 2 +- apps/dashboard-ui/jest.config.ts | 2 +- libs/cde-visualization/jest.config.ts | 2 +- libs/dashboard/jest.config.ts | 2 +- libs/design-system/jest.config.ts | 2 +- libs/shared/webcomponents/jest.config.ts | 2 +- 6 files changed, 6 insertions(+), 6 deletions(-) diff --git a/apps/cde-visualization-wc/jest.config.ts b/apps/cde-visualization-wc/jest.config.ts index 3d144b142..a83d79616 100644 --- a/apps/cde-visualization-wc/jest.config.ts +++ b/apps/cde-visualization-wc/jest.config.ts @@ -1,7 +1,7 @@ /* eslint-disable */ export default { displayName: 'cde-visualization-wc', - preset: '../../jest.preset.cjs', + preset: '../../jest.preset.js', setupFilesAfterEnv: ['/src/test-setup.ts'], coverageDirectory: '../../coverage/apps/cde-visualization-wc', transform: { diff --git a/apps/dashboard-ui/jest.config.ts b/apps/dashboard-ui/jest.config.ts index 915d0db06..4f7dfc8b8 100644 --- a/apps/dashboard-ui/jest.config.ts +++ b/apps/dashboard-ui/jest.config.ts @@ -1,7 +1,7 @@ /* eslint-disable */ export default { displayName: 'dashboard-ui', - preset: '../../jest.preset.cjs', + preset: '../../jest.preset.js', setupFilesAfterEnv: ['/src/test-setup.ts'], coverageDirectory: '../../coverage/apps/dashboard-ui', transform: { diff --git a/libs/cde-visualization/jest.config.ts b/libs/cde-visualization/jest.config.ts index b32b4fc45..1bd8a0e24 100644 --- a/libs/cde-visualization/jest.config.ts +++ b/libs/cde-visualization/jest.config.ts @@ -1,7 +1,7 @@ /* eslint-disable */ export default { displayName: 'cde-visualization', - preset: '../../jest.preset.cjs', + preset: '../../jest.preset.js', setupFilesAfterEnv: ['/src/test-setup.ts'], coverageDirectory: '../../coverage/libs/cde-visualization', transform: { diff --git a/libs/dashboard/jest.config.ts b/libs/dashboard/jest.config.ts index 2c586658c..9ddf80607 100644 --- a/libs/dashboard/jest.config.ts +++ b/libs/dashboard/jest.config.ts @@ -1,7 +1,7 @@ /* eslint-disable */ export default { displayName: 'dashboard', - preset: '../../jest.preset.cjs', + preset: '../../jest.preset.js', setupFilesAfterEnv: ['/src/test-setup.ts'], coverageDirectory: '../../coverage/libs/dashboard', transform: { diff --git a/libs/design-system/jest.config.ts b/libs/design-system/jest.config.ts index bdd240883..4972c3581 100644 --- a/libs/design-system/jest.config.ts +++ b/libs/design-system/jest.config.ts @@ -1,7 +1,7 @@ /* eslint-disable */ export default { displayName: 'design-system', - preset: '../../jest.preset.cjs', + preset: '../../jest.preset.js', setupFilesAfterEnv: ['/src/test-setup.ts', '@testing-library/jest-dom'], coverageDirectory: '../../coverage/libs/design-system', transform: { diff --git a/libs/shared/webcomponents/jest.config.ts b/libs/shared/webcomponents/jest.config.ts index 8ab270129..b4953e206 100644 --- a/libs/shared/webcomponents/jest.config.ts +++ b/libs/shared/webcomponents/jest.config.ts @@ -1,7 +1,7 @@ /* eslint-disable */ export default { displayName: 'webcomponents', - preset: '../../../jest.preset.cjs', + preset: '../../../jest.preset.js', setupFilesAfterEnv: ['/src/test-setup.ts'], coverageDirectory: '../../../coverage/libs/shared/webcomponents', transform: { From b76eb8af4a86b575179ef190ff9e922a15c598ab Mon Sep 17 00:00:00 2001 From: edlu77 Date: Mon, 5 Aug 2024 13:19:41 -0400 Subject: [PATCH 31/33] Tweaks --- .../brandmark/src/lib/brandmark.component.spec.ts | 14 +++++--------- .../brandmark/src/lib/brandmark.component.ts | 6 +++--- 2 files changed, 8 insertions(+), 12 deletions(-) diff --git a/libs/design-system/brandmark/src/lib/brandmark.component.spec.ts b/libs/design-system/brandmark/src/lib/brandmark.component.spec.ts index 3167a7d8a..147e56ea3 100644 --- a/libs/design-system/brandmark/src/lib/brandmark.component.spec.ts +++ b/libs/design-system/brandmark/src/lib/brandmark.component.spec.ts @@ -1,27 +1,23 @@ import { provideHttpClient } from '@angular/common/http'; -import { render, screen } from '@testing-library/angular'; +import { render } from '@testing-library/angular'; import { BrandmarkComponent } from './brandmark.component'; describe('BrandmarkComponent', () => { it('should render a normal logo', async () => { - await render(BrandmarkComponent, { + const { fixture } = await render(BrandmarkComponent, { providers: [provideHttpClient()], }); - const logo = screen.getByTestId('brandmark'); - expect(logo).toBeInTheDocument(); - expect(logo).toHaveAttribute('ng-reflect-inline-s-v-g', 'assets/logo/hra_brandmark.svg'); + expect(fixture.componentInstance.svgPath()).toEqual('assets/logo/hra_brandmark.svg'); }); it('should render a contrast logo', async () => { - await render(BrandmarkComponent, { + const { fixture } = await render(BrandmarkComponent, { componentInputs: { contrast: true, }, providers: [provideHttpClient()], }); - const logo = screen.getByTestId('brandmark'); - expect(logo).toBeInTheDocument(); - expect(logo).toHaveAttribute('ng-reflect-inline-s-v-g', 'assets/logo/hra_brandmark_cont'); + expect(fixture.componentInstance.svgPath()).toEqual('assets/logo/hra_brandmark_contrast.svg'); }); }); diff --git a/libs/design-system/brandmark/src/lib/brandmark.component.ts b/libs/design-system/brandmark/src/lib/brandmark.component.ts index 853a4b3c7..0754aa292 100644 --- a/libs/design-system/brandmark/src/lib/brandmark.component.ts +++ b/libs/design-system/brandmark/src/lib/brandmark.component.ts @@ -14,11 +14,11 @@ import { InlineSVGModule } from 'ng-inline-svg-2'; changeDetection: ChangeDetectionStrategy.OnPush, }) export class BrandmarkComponent { + /** Whether to use the contrast brandmark */ + readonly contrast = input(false); + /** Path to SVG */ readonly svgPath = computed(() => { return `assets/logo/hra_brandmark${this.contrast() ? '_contrast' : ''}.svg`; }); - - /** Whether to use the contrast brandmark */ - readonly contrast = input(false); } From cf6aed9f16ef0027b2969872fa996805de8d8f4f Mon Sep 17 00:00:00 2001 From: edlu77 Date: Tue, 6 Aug 2024 11:42:27 -0400 Subject: [PATCH 32/33] Add material symbols storybook --- .../assets/icons/settings_alert.svg | 3 + .../assets/icons/social/email.svg | 9 +++ .../assets/icons/social/email_large.svg | 9 +++ .../assets/icons/social/facebook.svg | 17 +++++ .../assets/icons/social/facebook_large.svg | 17 +++++ .../assets/icons/social/instagram.svg | 11 +++ .../assets/icons/social/instagram_large.svg | 11 +++ .../assets/icons/social/linkedin.svg | 7 ++ .../assets/icons/social/linkedin_large.svg | 7 ++ libs/design-system/assets/icons/social/x.svg | 4 ++ .../assets/icons/social/x_large.svg | 4 ++ .../assets/icons/social/youtube.svg | 12 ++++ .../assets/icons/social/youtube_large.svg | 5 ++ libs/design-system/assets/icons/upload.svg | 15 ++++ .../src/lib/material-symbols.stories.ts | 72 +++++++++++++++++++ 15 files changed, 203 insertions(+) create mode 100644 libs/design-system/assets/icons/settings_alert.svg create mode 100644 libs/design-system/assets/icons/social/email.svg create mode 100644 libs/design-system/assets/icons/social/email_large.svg create mode 100644 libs/design-system/assets/icons/social/facebook.svg create mode 100644 libs/design-system/assets/icons/social/facebook_large.svg create mode 100644 libs/design-system/assets/icons/social/instagram.svg create mode 100644 libs/design-system/assets/icons/social/instagram_large.svg create mode 100644 libs/design-system/assets/icons/social/linkedin.svg create mode 100644 libs/design-system/assets/icons/social/linkedin_large.svg create mode 100644 libs/design-system/assets/icons/social/x.svg create mode 100644 libs/design-system/assets/icons/social/x_large.svg create mode 100644 libs/design-system/assets/icons/social/youtube.svg create mode 100644 libs/design-system/assets/icons/social/youtube_large.svg create mode 100644 libs/design-system/assets/icons/upload.svg create mode 100644 libs/design-system/src/lib/material-symbols.stories.ts diff --git a/libs/design-system/assets/icons/settings_alert.svg b/libs/design-system/assets/icons/settings_alert.svg new file mode 100644 index 000000000..34e27bc8d --- /dev/null +++ b/libs/design-system/assets/icons/settings_alert.svg @@ -0,0 +1,3 @@ + + + diff --git a/libs/design-system/assets/icons/social/email.svg b/libs/design-system/assets/icons/social/email.svg new file mode 100644 index 000000000..523485ac7 --- /dev/null +++ b/libs/design-system/assets/icons/social/email.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/libs/design-system/assets/icons/social/email_large.svg b/libs/design-system/assets/icons/social/email_large.svg new file mode 100644 index 000000000..7624a60fe --- /dev/null +++ b/libs/design-system/assets/icons/social/email_large.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/libs/design-system/assets/icons/social/facebook.svg b/libs/design-system/assets/icons/social/facebook.svg new file mode 100644 index 000000000..c2683f86d --- /dev/null +++ b/libs/design-system/assets/icons/social/facebook.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/libs/design-system/assets/icons/social/facebook_large.svg b/libs/design-system/assets/icons/social/facebook_large.svg new file mode 100644 index 000000000..bf4bfdc43 --- /dev/null +++ b/libs/design-system/assets/icons/social/facebook_large.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/libs/design-system/assets/icons/social/instagram.svg b/libs/design-system/assets/icons/social/instagram.svg new file mode 100644 index 000000000..ab3cd1360 --- /dev/null +++ b/libs/design-system/assets/icons/social/instagram.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/libs/design-system/assets/icons/social/instagram_large.svg b/libs/design-system/assets/icons/social/instagram_large.svg new file mode 100644 index 000000000..0bb67b58e --- /dev/null +++ b/libs/design-system/assets/icons/social/instagram_large.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/libs/design-system/assets/icons/social/linkedin.svg b/libs/design-system/assets/icons/social/linkedin.svg new file mode 100644 index 000000000..40994c344 --- /dev/null +++ b/libs/design-system/assets/icons/social/linkedin.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/libs/design-system/assets/icons/social/linkedin_large.svg b/libs/design-system/assets/icons/social/linkedin_large.svg new file mode 100644 index 000000000..6a60bb43b --- /dev/null +++ b/libs/design-system/assets/icons/social/linkedin_large.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/libs/design-system/assets/icons/social/x.svg b/libs/design-system/assets/icons/social/x.svg new file mode 100644 index 000000000..d0f6c2043 --- /dev/null +++ b/libs/design-system/assets/icons/social/x.svg @@ -0,0 +1,4 @@ + + + + diff --git a/libs/design-system/assets/icons/social/x_large.svg b/libs/design-system/assets/icons/social/x_large.svg new file mode 100644 index 000000000..fe9d7ea23 --- /dev/null +++ b/libs/design-system/assets/icons/social/x_large.svg @@ -0,0 +1,4 @@ + + + + diff --git a/libs/design-system/assets/icons/social/youtube.svg b/libs/design-system/assets/icons/social/youtube.svg new file mode 100644 index 000000000..92a33b819 --- /dev/null +++ b/libs/design-system/assets/icons/social/youtube.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/libs/design-system/assets/icons/social/youtube_large.svg b/libs/design-system/assets/icons/social/youtube_large.svg new file mode 100644 index 000000000..305cacd97 --- /dev/null +++ b/libs/design-system/assets/icons/social/youtube_large.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/libs/design-system/assets/icons/upload.svg b/libs/design-system/assets/icons/upload.svg new file mode 100644 index 000000000..5a238de7f --- /dev/null +++ b/libs/design-system/assets/icons/upload.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/libs/design-system/src/lib/material-symbols.stories.ts b/libs/design-system/src/lib/material-symbols.stories.ts new file mode 100644 index 000000000..a11b6d468 --- /dev/null +++ b/libs/design-system/src/lib/material-symbols.stories.ts @@ -0,0 +1,72 @@ +import { provideHttpClient } from '@angular/common/http'; +import { MatIconModule } from '@angular/material/icon'; +import { provideIcons } from '@hra-ui/cdk/icons'; +import { applicationConfig, Meta, moduleMetadata, StoryObj } from '@storybook/angular'; + +const meta: Meta = { + title: 'MaterialSymbols', + decorators: [ + applicationConfig({ + providers: [ + provideHttpClient(), + provideIcons({ + fontIcons: { + defaultClasses: ['material-symbols-rounded'], + }, + }), + ], + }), + moduleMetadata({ + imports: [MatIconModule], + }), + ], +}; +export default meta; +type Story = StoryObj; + +export const BuiltinSymbols: Story = { + args: { + name: 'search', + }, + argTypes: { + name: { + type: 'string', + description: 'Icon name', + }, + }, + render: (args) => ({ + props: args, + template: `${args['name']}`, + }), +}; + +export const CustomSymbols: Story = { + args: { + name: 'social:email', + }, + argTypes: { + name: { + control: 'select', + options: [ + 'upload', + 'settings_alert', + 'social:email', + 'social:email_large', + 'social:facebook', + 'social:facebook_large', + 'social:instagram', + 'social:instagram_large', + 'social:linkedin', + 'social:linkedin_large', + 'social:x', + 'social:x_large', + 'social:youtube', + 'social:youtube_large', + ], + }, + }, + render: (args) => ({ + props: args, + template: ``, + }), +}; From e1255d64cc9110d6c16ef84e9df8e1db9de9b098 Mon Sep 17 00:00:00 2001 From: Daniel Bolin Date: Tue, 6 Aug 2024 13:41:26 -0400 Subject: [PATCH 33/33] fix: :adhesive_bandage: Fix misspelled option in lint staged commands --- .lintstagedrc.mjs | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.lintstagedrc.mjs b/.lintstagedrc.mjs index 08d780bea..5c2f69518 100644 --- a/.lintstagedrc.mjs +++ b/.lintstagedrc.mjs @@ -1,5 +1,5 @@ -const lint = 'npx nx affected:lint --uncommited --fix true'; -const format = 'npx nx format:write --uncommited'; +const lint = 'npx nx affected:lint --uncommitted --fix true'; +const format = 'npx nx format:write --uncommitted'; export default { '*.{js,mjs,cjs,ts,html,scss,css}': [lint, format],