From 2793e73c9536232b2fcf5f3922d35fca2b4318d7 Mon Sep 17 00:00:00 2001 From: edlu77 Date: Tue, 27 Aug 2024 15:45:44 -0400 Subject: [PATCH 01/17] Use social media button component in footer --- .../footer/src/lib/footer.component.html | 39 ++++--------------- .../footer/src/lib/footer.component.ts | 16 +++++--- .../lib/social-media-button.component.scss | 3 +- .../src/lib/social-media-button.component.ts | 2 +- tsconfig.base.json | 3 ++ 5 files changed, 24 insertions(+), 39 deletions(-) diff --git a/libs/design-system/footer/src/lib/footer.component.html b/libs/design-system/footer/src/lib/footer.component.html index 26c4f0ed4..d960e0a17 100644 --- a/libs/design-system/footer/src/lib/footer.component.html +++ b/libs/design-system/footer/src/lib/footer.component.html @@ -1,5 +1,5 @@ -
-
+
+
Human Reference Atlas Logo @@ -8,37 +8,14 @@ 2024 CNS at Indiana University
-
+
+
+
diff --git a/libs/design-system/footer/src/lib/footer.component.scss b/libs/design-system/footer/src/lib/footer.component.scss index a8b1ac3cf..fa67254ad 100644 --- a/libs/design-system/footer/src/lib/footer.component.scss +++ b/libs/design-system/footer/src/lib/footer.component.scss @@ -45,7 +45,6 @@ justify-content: space-between; column-gap: 6rem; row-gap: 2rem; - max-width: 57.75rem; margin-bottom: 2rem; .social-media { @@ -57,6 +56,9 @@ } .funded-by { + width: 100%; + max-width: 448px; + span { display: block; font: var(--sys-label-large); @@ -66,11 +68,12 @@ .funded-logo { display: flex; - align-items: center; - gap: 2rem; + justify-content: space-between; - img { + img, + .spacer { height: 3rem; + width: 3rem; } } } @@ -109,4 +112,62 @@ } } } + + @media (max-width: 430px) { + .footer-left { + .footer-left-content { + padding: 2rem max(16px, calc((16 * (100vw - 320px)) / 110 + 16px)); + row-gap: max(16px, calc((8 * (100vw - 320px)) / 110 + 16px)); + } + + .copyright { + font-size: max(14px, calc((2 * (100vw - 320px)) / 110 + 14px)); + line-height: max(21px, calc((3 * (100vw - 320px)) / 110 + 21px)); + } + + img { + width: max(208px, calc((38 * (100vw - 320px)) / 110 + 208px)); + } + } + + .footer-right { + .social-funded { + flex-direction: column; + margin: max(32px, calc((8 * (100vw - 320px)) / 110 + 32px)) max(16px, calc((16 * (100vw - 320px)) / 110 + 16px)) + 0 max(16px, calc((16 * (100vw - 320px)) / 110 + 16px)); + + ::ng-deep hra-social-media-button { + mat-icon, + mat-icon > svg { + height: max(36px, calc((12 * (100vw - 320px)) / 110 + 36px)); + width: max(36px, calc((12 * (100vw - 320px)) / 110 + 36px)); + } + } + + .funded-by { + span { + font-size: max(14px, calc((2 * (100vw - 320px)) / 110 + 14px)); + line-height: max(21px, calc((3 * (100vw - 320px)) / 110 + 21px)); + margin-bottom: max(8px, calc((4 * (100vw - 320px)) / 110 + 8px)); + } + + .funded-logo { + width: 100%; + img, + .spacer { + height: max(36px, calc((12 * (100vw - 320px)) / 110 + 36px)); + width: max(36px, calc((12 * (100vw - 320px)) / 110 + 36px)); + } + } + } + } + + .disclaimer { + margin: max(32px, calc((8 * (100vw - 320px)) / 110 + 32px)) max(16px, calc((16 * (100vw - 320px)) / 110 + 16px)) + max(32px, calc((8 * (100vw - 320px)) / 110 + 32px)) max(16px, calc((16 * (100vw - 320px)) / 110 + 16px)); + font-size: max(14px, calc((2 * (100vw - 320px)) / 110 + 14px)); + line-height: max(21px, calc((3 * (100vw - 320px)) / 110 + 21px)); + } + } + } } From d6a7daaa8c7c92155f5ed3765ae9cfe87c58f4a4 Mon Sep 17 00:00:00 2001 From: edlu77 Date: Tue, 27 Aug 2024 19:15:04 -0400 Subject: [PATCH 04/17] Remove unused code --- .../footer/src/lib/footer.component.ts | 27 +++---------------- 1 file changed, 3 insertions(+), 24 deletions(-) diff --git a/libs/design-system/footer/src/lib/footer.component.ts b/libs/design-system/footer/src/lib/footer.component.ts index bca154438..70544a3b0 100644 --- a/libs/design-system/footer/src/lib/footer.component.ts +++ b/libs/design-system/footer/src/lib/footer.component.ts @@ -1,5 +1,5 @@ import { CommonModule } from '@angular/common'; -import { ChangeDetectionStrategy, Component, HostListener, input } from '@angular/core'; +import { ChangeDetectionStrategy, Component, input } from '@angular/core'; import { MatIconModule } from '@angular/material/icon'; import { AssetUrlPipe } from '@hra-ui/cdk/app-href'; @@ -9,9 +9,6 @@ import { SocialMediaName, } from '../../../social-media-button/src/lib/social-media-button.component'; -/** Below this size, use smaller logo */ -const SMALL_LOGO_THRESHOLD = 768; - /** * Component for footer */ @@ -27,24 +24,6 @@ export class FooterComponent { /** HRA Logo url */ readonly logo = input('assets/logo/hra_logo_contrast.svg'); - /** Use the smaller HRA logo when screen is smaller */ - useSmallerLogo = false; - - socialLinks: SocialMediaName[]; - - /** - * Sets initial values for isExtraSmall and useSmallerLogo - */ - constructor() { - this.onResize(); - this.socialLinks = Object.keys(SOCIAL_LINKS) as SocialMediaName[]; - } - - /** - * Updates isExtraSmall and useSmallerLogo on screen resize - */ - @HostListener('window:resize') - onResize() { - this.useSmallerLogo = window.innerWidth < SMALL_LOGO_THRESHOLD; - } + /** List of social links to use in the footer */ + socialLinks = Object.keys(SOCIAL_LINKS) as SocialMediaName[]; } From 65ec45961fc578e969cbc0da6ba6007834b6adfa Mon Sep 17 00:00:00 2001 From: edlu77 Date: Tue, 27 Aug 2024 19:45:10 -0400 Subject: [PATCH 05/17] Fix build issue --- libs/design-system/footer/src/lib/footer.component.ts | 7 +------ libs/design-system/social-media-button/ng-package.json | 5 +++++ 2 files changed, 6 insertions(+), 6 deletions(-) create mode 100644 libs/design-system/social-media-button/ng-package.json diff --git a/libs/design-system/footer/src/lib/footer.component.ts b/libs/design-system/footer/src/lib/footer.component.ts index 70544a3b0..a7e7ffbe6 100644 --- a/libs/design-system/footer/src/lib/footer.component.ts +++ b/libs/design-system/footer/src/lib/footer.component.ts @@ -2,12 +2,7 @@ import { CommonModule } from '@angular/common'; import { ChangeDetectionStrategy, Component, input } from '@angular/core'; import { MatIconModule } from '@angular/material/icon'; import { AssetUrlPipe } from '@hra-ui/cdk/app-href'; - -import { - SOCIAL_LINKS, - SocialMediaButtonComponent, - SocialMediaName, -} from '../../../social-media-button/src/lib/social-media-button.component'; +import { SOCIAL_LINKS, SocialMediaButtonComponent, SocialMediaName } from '@hra-ui/design-system/social-media-button'; /** * Component for footer diff --git a/libs/design-system/social-media-button/ng-package.json b/libs/design-system/social-media-button/ng-package.json new file mode 100644 index 000000000..c781f0df4 --- /dev/null +++ b/libs/design-system/social-media-button/ng-package.json @@ -0,0 +1,5 @@ +{ + "lib": { + "entryFile": "src/index.ts" + } +} From f52d1682ea5db33a41da494e93cd6d350d367c60 Mon Sep 17 00:00:00 2001 From: edlu77 Date: Wed, 28 Aug 2024 22:33:34 -0400 Subject: [PATCH 06/17] Add breadcrumbs demo --- libs/design-system/breadcrumbs/src/index.ts | 1 + .../breadcrumbs-demo.component.html | 5 +++ .../breadcrumbs-demo.component.scss | 16 +++++++ .../breadcrumbs-demo.component.stories.ts | 42 +++++++++++++++++++ .../breadcrumbs-demo.component.ts | 15 +++++++ .../breadcrumbs-size.directive.ts | 29 +++++++++++++ libs/design-system/button/src/index.ts | 1 + 7 files changed, 109 insertions(+) create mode 100644 libs/design-system/breadcrumbs/src/index.ts create mode 100644 libs/design-system/breadcrumbs/src/lib/breadcrumbs-demo/breadcrumbs-demo.component.html create mode 100644 libs/design-system/breadcrumbs/src/lib/breadcrumbs-demo/breadcrumbs-demo.component.scss create mode 100644 libs/design-system/breadcrumbs/src/lib/breadcrumbs-demo/breadcrumbs-demo.component.stories.ts create mode 100644 libs/design-system/breadcrumbs/src/lib/breadcrumbs-demo/breadcrumbs-demo.component.ts create mode 100644 libs/design-system/breadcrumbs/src/lib/breadcrumbs-size/breadcrumbs-size.directive.ts diff --git a/libs/design-system/breadcrumbs/src/index.ts b/libs/design-system/breadcrumbs/src/index.ts new file mode 100644 index 000000000..864d08075 --- /dev/null +++ b/libs/design-system/breadcrumbs/src/index.ts @@ -0,0 +1 @@ +export * from './lib/breadcrumbs-size/breadcrumbs-size.directive'; diff --git a/libs/design-system/breadcrumbs/src/lib/breadcrumbs-demo/breadcrumbs-demo.component.html b/libs/design-system/breadcrumbs/src/lib/breadcrumbs-demo/breadcrumbs-demo.component.html new file mode 100644 index 000000000..fdaea9c51 --- /dev/null +++ b/libs/design-system/breadcrumbs/src/lib/breadcrumbs-demo/breadcrumbs-demo.component.html @@ -0,0 +1,5 @@ + + + +chevron_right +Create Visualization diff --git a/libs/design-system/breadcrumbs/src/lib/breadcrumbs-demo/breadcrumbs-demo.component.scss b/libs/design-system/breadcrumbs/src/lib/breadcrumbs-demo/breadcrumbs-demo.component.scss new file mode 100644 index 000000000..f5a3afca7 --- /dev/null +++ b/libs/design-system/breadcrumbs/src/lib/breadcrumbs-demo/breadcrumbs-demo.component.scss @@ -0,0 +1,16 @@ +:host { + --mdc-text-button-container-height: 24px; + font: var(--breadcrumbs-font); + display: flex; + align-items: center; + color: #464954; + + a { + height: 1.5rem; + } + + button { + font: var(--breadcrumbs-font); + padding: 2px 4px; + } +} diff --git a/libs/design-system/breadcrumbs/src/lib/breadcrumbs-demo/breadcrumbs-demo.component.stories.ts b/libs/design-system/breadcrumbs/src/lib/breadcrumbs-demo/breadcrumbs-demo.component.stories.ts new file mode 100644 index 000000000..95ddcbb89 --- /dev/null +++ b/libs/design-system/breadcrumbs/src/lib/breadcrumbs-demo/breadcrumbs-demo.component.stories.ts @@ -0,0 +1,42 @@ +import { provideDesignSystem } from '../../../../src/lib/providers'; +import { applicationConfig, moduleMetadata, type Meta, type StoryObj } from '@storybook/angular'; + +import { BreadcrumbsDemoComponent } from './breadcrumbs-demo.component'; +import { BreadcrumbsSizeDirective } from '../breadcrumbs-size/breadcrumbs-size.directive'; + +const meta: Meta = { + title: 'Breadcrumbs', + args: { + size: 'large', + }, + argTypes: { + size: { + control: 'select', + options: ['small', 'medium', 'large'], + }, + }, + parameters: { + design: { + type: 'figma', + url: 'https://www.figma.com/design/BCEJn9KCIbBJ5MzqnojKQp/Design-System-Components?node-id=892-4', + }, + }, + decorators: [ + applicationConfig({ + providers: [provideDesignSystem()], + }), + moduleMetadata({ + imports: [BreadcrumbsDemoComponent, BreadcrumbsSizeDirective], + }), + ], + render: (args) => ({ + props: args, + template: ` + + `, + }), +}; +export default meta; +type Story = StoryObj; + +export const Default: Story = {}; diff --git a/libs/design-system/breadcrumbs/src/lib/breadcrumbs-demo/breadcrumbs-demo.component.ts b/libs/design-system/breadcrumbs/src/lib/breadcrumbs-demo/breadcrumbs-demo.component.ts new file mode 100644 index 000000000..c9a71a8fd --- /dev/null +++ b/libs/design-system/breadcrumbs/src/lib/breadcrumbs-demo/breadcrumbs-demo.component.ts @@ -0,0 +1,15 @@ +import { ChangeDetectionStrategy, Component } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { MatIconModule } from '@angular/material/icon'; +import { ButtonModule } from '@hra-ui/design-system/button'; +import { BreadcrumbsSizeDirective } from '../breadcrumbs-size/breadcrumbs-size.directive'; + +@Component({ + selector: 'hra-breadcrumbs-demo', + standalone: true, + imports: [CommonModule, MatIconModule, ButtonModule, BreadcrumbsSizeDirective], + templateUrl: './breadcrumbs-demo.component.html', + styleUrl: './breadcrumbs-demo.component.scss', + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class BreadcrumbsDemoComponent {} diff --git a/libs/design-system/breadcrumbs/src/lib/breadcrumbs-size/breadcrumbs-size.directive.ts b/libs/design-system/breadcrumbs/src/lib/breadcrumbs-size/breadcrumbs-size.directive.ts new file mode 100644 index 000000000..bd2a1ee11 --- /dev/null +++ b/libs/design-system/breadcrumbs/src/lib/breadcrumbs-size/breadcrumbs-size.directive.ts @@ -0,0 +1,29 @@ +import { computed, Directive, input } from '@angular/core'; + +/** Input options for breadcrumb size */ +export type BreadcrumbSize = 'small' | 'medium' | 'large'; + +/** Record of breadcrumb font sizes */ +const BREADCRUMB_CONFIG: Record = { + small: '--sys-label-small', + medium: '--sys-label-medium', + large: '--sys-label-large', +}; + +/** + * Directive for breadcrumb sizes + */ +@Directive({ + selector: '[hraBreadcrumbSize]', + standalone: true, + host: { + '[style.--breadcrumbs-font]': 'fontVar()', + }, +}) +export class BreadcrumbsSizeDirective { + /** Size of breadcrumbs component */ + readonly size = input.required({ alias: 'hraBreadcrumbSize' }); + + /** Gets the font variable for the current breadcrumbs size */ + protected readonly fontVar = computed(() => `var(${BREADCRUMB_CONFIG[this.size()]})`); +} diff --git a/libs/design-system/button/src/index.ts b/libs/design-system/button/src/index.ts index dae13c798..9e3f8c960 100644 --- a/libs/design-system/button/src/index.ts +++ b/libs/design-system/button/src/index.ts @@ -1,2 +1,3 @@ export * from './lib/button-styles/button-styles.component'; export * from './lib/providers'; +export * from './lib/button.module'; From adc55d110fc883e052bd999786688c489b4e4f2c Mon Sep 17 00:00:00 2001 From: edlu77 Date: Thu, 29 Aug 2024 13:50:26 -0400 Subject: [PATCH 07/17] Adjust padding and height --- .../design-system/breadcrumbs/ng-package.json | 5 +++ .../breadcrumbs-demo.component.scss | 16 -------- .../breadcrumbs-size.directive.ts | 40 +++++++++++++++---- .../breadcrumbs.component.html} | 0 .../breadcrumbs/breadcrumbs.component.scss | 14 +++++++ .../breadcrumbs.component.stories.ts} | 24 +++++------ .../breadcrumbs.component.ts} | 8 ++-- tsconfig.base.json | 3 ++ 8 files changed, 71 insertions(+), 39 deletions(-) create mode 100644 libs/design-system/breadcrumbs/ng-package.json delete mode 100644 libs/design-system/breadcrumbs/src/lib/breadcrumbs-demo/breadcrumbs-demo.component.scss rename libs/design-system/breadcrumbs/src/lib/{breadcrumbs-demo/breadcrumbs-demo.component.html => breadcrumbs/breadcrumbs.component.html} (100%) create mode 100644 libs/design-system/breadcrumbs/src/lib/breadcrumbs/breadcrumbs.component.scss rename libs/design-system/breadcrumbs/src/lib/{breadcrumbs-demo/breadcrumbs-demo.component.stories.ts => breadcrumbs/breadcrumbs.component.stories.ts} (79%) rename libs/design-system/breadcrumbs/src/lib/{breadcrumbs-demo/breadcrumbs-demo.component.ts => breadcrumbs/breadcrumbs.component.ts} (73%) diff --git a/libs/design-system/breadcrumbs/ng-package.json b/libs/design-system/breadcrumbs/ng-package.json new file mode 100644 index 000000000..c781f0df4 --- /dev/null +++ b/libs/design-system/breadcrumbs/ng-package.json @@ -0,0 +1,5 @@ +{ + "lib": { + "entryFile": "src/index.ts" + } +} diff --git a/libs/design-system/breadcrumbs/src/lib/breadcrumbs-demo/breadcrumbs-demo.component.scss b/libs/design-system/breadcrumbs/src/lib/breadcrumbs-demo/breadcrumbs-demo.component.scss deleted file mode 100644 index f5a3afca7..000000000 --- a/libs/design-system/breadcrumbs/src/lib/breadcrumbs-demo/breadcrumbs-demo.component.scss +++ /dev/null @@ -1,16 +0,0 @@ -:host { - --mdc-text-button-container-height: 24px; - font: var(--breadcrumbs-font); - display: flex; - align-items: center; - color: #464954; - - a { - height: 1.5rem; - } - - button { - font: var(--breadcrumbs-font); - padding: 2px 4px; - } -} diff --git a/libs/design-system/breadcrumbs/src/lib/breadcrumbs-size/breadcrumbs-size.directive.ts b/libs/design-system/breadcrumbs/src/lib/breadcrumbs-size/breadcrumbs-size.directive.ts index bd2a1ee11..aeb471246 100644 --- a/libs/design-system/breadcrumbs/src/lib/breadcrumbs-size/breadcrumbs-size.directive.ts +++ b/libs/design-system/breadcrumbs/src/lib/breadcrumbs-size/breadcrumbs-size.directive.ts @@ -3,11 +3,31 @@ import { computed, Directive, input } from '@angular/core'; /** Input options for breadcrumb size */ export type BreadcrumbSize = 'small' | 'medium' | 'large'; -/** Record of breadcrumb font sizes */ -const BREADCRUMB_CONFIG: Record = { - small: '--sys-label-small', - medium: '--sys-label-medium', - large: '--sys-label-large', +interface BreadcrumbConfig { + /** Height of component */ + height: number; + /** Font variable for the component */ + font: string; + padding: number; +} + +/** Breadcrumb size config (numbers in rem) */ +const BREADCRUMB_CONFIG: Record = { + small: { + height: 1.5, + font: '--sys-label-small', + padding: 0.25, + }, + medium: { + height: 2, + font: '--sys-label-medium', + padding: 0.375, + }, + large: { + height: 2.25, + font: '--sys-label-large', + padding: 0.5, + }, }; /** @@ -17,7 +37,9 @@ const BREADCRUMB_CONFIG: Record = { selector: '[hraBreadcrumbSize]', standalone: true, host: { - '[style.--breadcrumbs-font]': 'fontVar()', + '[style.font]': 'fontVar()', + '[style.--mdc-text-button-container-height.rem]': 'buttonHeight()', + '[style.--mat-text-button-horizontal-padding.rem]': 'buttonPadding()', }, }) export class BreadcrumbsSizeDirective { @@ -25,5 +47,9 @@ export class BreadcrumbsSizeDirective { readonly size = input.required({ alias: 'hraBreadcrumbSize' }); /** Gets the font variable for the current breadcrumbs size */ - protected readonly fontVar = computed(() => `var(${BREADCRUMB_CONFIG[this.size()]})`); + protected readonly fontVar = computed(() => `var(${BREADCRUMB_CONFIG[this.size()].font})`); + + protected readonly buttonHeight = computed(() => BREADCRUMB_CONFIG[this.size()].height); + + protected readonly buttonPadding = computed(() => BREADCRUMB_CONFIG[this.size()].padding); } diff --git a/libs/design-system/breadcrumbs/src/lib/breadcrumbs-demo/breadcrumbs-demo.component.html b/libs/design-system/breadcrumbs/src/lib/breadcrumbs/breadcrumbs.component.html similarity index 100% rename from libs/design-system/breadcrumbs/src/lib/breadcrumbs-demo/breadcrumbs-demo.component.html rename to libs/design-system/breadcrumbs/src/lib/breadcrumbs/breadcrumbs.component.html diff --git a/libs/design-system/breadcrumbs/src/lib/breadcrumbs/breadcrumbs.component.scss b/libs/design-system/breadcrumbs/src/lib/breadcrumbs/breadcrumbs.component.scss new file mode 100644 index 000000000..d5de33d26 --- /dev/null +++ b/libs/design-system/breadcrumbs/src/lib/breadcrumbs/breadcrumbs.component.scss @@ -0,0 +1,14 @@ +:host { + display: flex; + align-items: center; + color: #464954; + + button { + --mat-text-button-horizontal-padding: inherit; + font: inherit; + } + + span { + padding: 0 var(--mat-text-button-horizontal-padding); + } +} diff --git a/libs/design-system/breadcrumbs/src/lib/breadcrumbs-demo/breadcrumbs-demo.component.stories.ts b/libs/design-system/breadcrumbs/src/lib/breadcrumbs/breadcrumbs.component.stories.ts similarity index 79% rename from libs/design-system/breadcrumbs/src/lib/breadcrumbs-demo/breadcrumbs-demo.component.stories.ts rename to libs/design-system/breadcrumbs/src/lib/breadcrumbs/breadcrumbs.component.stories.ts index 95ddcbb89..45cd1f790 100644 --- a/libs/design-system/breadcrumbs/src/lib/breadcrumbs-demo/breadcrumbs-demo.component.stories.ts +++ b/libs/design-system/breadcrumbs/src/lib/breadcrumbs/breadcrumbs.component.stories.ts @@ -1,20 +1,11 @@ import { provideDesignSystem } from '../../../../src/lib/providers'; import { applicationConfig, moduleMetadata, type Meta, type StoryObj } from '@storybook/angular'; -import { BreadcrumbsDemoComponent } from './breadcrumbs-demo.component'; +import { BreadcrumbsComponent } from './breadcrumbs.component'; import { BreadcrumbsSizeDirective } from '../breadcrumbs-size/breadcrumbs-size.directive'; const meta: Meta = { title: 'Breadcrumbs', - args: { - size: 'large', - }, - argTypes: { - size: { - control: 'select', - options: ['small', 'medium', 'large'], - }, - }, parameters: { design: { type: 'figma', @@ -26,13 +17,22 @@ const meta: Meta = { providers: [provideDesignSystem()], }), moduleMetadata({ - imports: [BreadcrumbsDemoComponent, BreadcrumbsSizeDirective], + imports: [BreadcrumbsComponent, BreadcrumbsSizeDirective], }), ], + args: { + size: 'large', + }, + argTypes: { + size: { + control: 'select', + options: ['small', 'medium', 'large'], + }, + }, render: (args) => ({ props: args, template: ` - + `, }), }; diff --git a/libs/design-system/breadcrumbs/src/lib/breadcrumbs-demo/breadcrumbs-demo.component.ts b/libs/design-system/breadcrumbs/src/lib/breadcrumbs/breadcrumbs.component.ts similarity index 73% rename from libs/design-system/breadcrumbs/src/lib/breadcrumbs-demo/breadcrumbs-demo.component.ts rename to libs/design-system/breadcrumbs/src/lib/breadcrumbs/breadcrumbs.component.ts index c9a71a8fd..667705547 100644 --- a/libs/design-system/breadcrumbs/src/lib/breadcrumbs-demo/breadcrumbs-demo.component.ts +++ b/libs/design-system/breadcrumbs/src/lib/breadcrumbs/breadcrumbs.component.ts @@ -5,11 +5,11 @@ import { ButtonModule } from '@hra-ui/design-system/button'; import { BreadcrumbsSizeDirective } from '../breadcrumbs-size/breadcrumbs-size.directive'; @Component({ - selector: 'hra-breadcrumbs-demo', + selector: 'hra-breadcrumbs', standalone: true, imports: [CommonModule, MatIconModule, ButtonModule, BreadcrumbsSizeDirective], - templateUrl: './breadcrumbs-demo.component.html', - styleUrl: './breadcrumbs-demo.component.scss', + templateUrl: './breadcrumbs.component.html', + styleUrl: './breadcrumbs.component.scss', changeDetection: ChangeDetectionStrategy.OnPush, }) -export class BreadcrumbsDemoComponent {} +export class BreadcrumbsComponent {} diff --git a/tsconfig.base.json b/tsconfig.base.json index 2fb91e8bc..e0ea18ee5 100644 --- a/tsconfig.base.json +++ b/tsconfig.base.json @@ -74,6 +74,9 @@ "@hra-ui/design-system/brand-logo": [ "libs/design-system/brand-logo/src/index.ts" ], + "@hra-ui/design-system/breadcrumbs": [ + "libs/design-system/breadcrumbs/src/index.ts" + ], "@hra-ui/design-system/button": [ "libs/design-system/button/src/index.ts" ], From ad209c8adae793c2d9035132e48726e7faa0c141 Mon Sep 17 00:00:00 2001 From: edlu77 Date: Thu, 29 Aug 2024 16:58:30 -0400 Subject: [PATCH 08/17] Fix email icon appearance --- libs/design-system/assets/icons/social/email.svg | 5 +---- libs/design-system/assets/icons/social/email_large.svg | 5 +---- 2 files changed, 2 insertions(+), 8 deletions(-) diff --git a/libs/design-system/assets/icons/social/email.svg b/libs/design-system/assets/icons/social/email.svg index f0cba6a82..2368fd287 100644 --- a/libs/design-system/assets/icons/social/email.svg +++ b/libs/design-system/assets/icons/social/email.svg @@ -1,9 +1,6 @@ - - - - + diff --git a/libs/design-system/assets/icons/social/email_large.svg b/libs/design-system/assets/icons/social/email_large.svg index 3b6e47d9f..b1daf23d1 100644 --- a/libs/design-system/assets/icons/social/email_large.svg +++ b/libs/design-system/assets/icons/social/email_large.svg @@ -1,9 +1,6 @@ - - - - + From fdb795c4e7d11ecb641bcb19a54c2ae3a683c4af Mon Sep 17 00:00:00 2001 From: edlu77 Date: Thu, 29 Aug 2024 16:58:53 -0400 Subject: [PATCH 09/17] Refactoring styles --- .../footer/src/lib/footer.component.html | 18 ++--- .../footer/src/lib/footer.component.scss | 77 +++++++++++-------- .../footer/src/lib/footer.component.ts | 2 +- .../src/lib/social-media-button.component.ts | 2 +- 4 files changed, 57 insertions(+), 42 deletions(-) diff --git a/libs/design-system/footer/src/lib/footer.component.html b/libs/design-system/footer/src/lib/footer.component.html index 8156f68d3..ddc5a4b10 100644 --- a/libs/design-system/footer/src/lib/footer.component.html +++ b/libs/design-system/footer/src/lib/footer.component.html @@ -1,19 +1,17 @@
-
- - Human Reference Atlas Logo - - - copyright - 2024 CNS at Indiana University - -
+ + Human Reference Atlas Logo + + + copyright + 2024 CNS at Indiana University +