diff --git a/libs/design-system/footer/src/lib/footer.component.stories.ts b/libs/design-system/footer/src/lib/footer.component.stories.ts index cd02b4e57..6be2e62bb 100644 --- a/libs/design-system/footer/src/lib/footer.component.stories.ts +++ b/libs/design-system/footer/src/lib/footer.component.stories.ts @@ -1,6 +1,6 @@ -import { provideHttpClient } from '@angular/common/http'; -import { provideIcons } from '@hra-ui/cdk/icons'; +import { provideDesignSystem } from '@hra-ui/design-system'; import { applicationConfig, Meta, StoryObj } from '@storybook/angular'; + import { FooterComponent } from './footer.component'; const meta: Meta = { @@ -8,7 +8,7 @@ const meta: Meta = { title: 'FooterComponent', decorators: [ applicationConfig({ - providers: [provideHttpClient(), provideIcons()], + providers: [provideDesignSystem()], }), ], }; diff --git a/libs/design-system/icon-button/src/index.ts b/libs/design-system/icon-button/src/index.ts index 4649fc711..851987dc2 100644 --- a/libs/design-system/icon-button/src/index.ts +++ b/libs/design-system/icon-button/src/index.ts @@ -1,2 +1,3 @@ export * from './lib/icon-button-size/icon-button-size.directive'; +export * from './lib/icon-button-variant/icon-button-variant.directive'; export * from './lib/providers'; diff --git a/libs/design-system/icon-button/src/lib/icon-button-styles/icon-button-styles.component.scss b/libs/design-system/icon-button/src/lib/icon-button-styles/icon-button-styles.component.scss index d1ce81e29..d9675c36b 100644 --- a/libs/design-system/icon-button/src/lib/icon-button-styles/icon-button-styles.component.scss +++ b/libs/design-system/icon-button/src/lib/icon-button-styles/icon-button-styles.component.scss @@ -1,16 +1,32 @@ -button[mat-icon-button] { +button[mat-icon-button], +a[mat-icon-button] { --mat-icon-button-hover-state-layer-opacity: 0.08; - --mat-icon-button-pressed-state-layer-opacity: 0.16; - --mat-icon-button-state-layer-color: var(--sys-secondary); + --mat-icon-button-pressed-state-layer-opacity: 0.12; --mat-icon-button-focus-state-layer-opacity: 0; - &:focus-visible { - outline: 2px solid var(--sys-tertiary); - } - mat-icon { height: var(--mdc-icon-button-icon-size); width: var(--mdc-icon-button-icon-size); font-size: var(--mdc-icon-button-icon-size); } + + &.icon-button-variant-light { + --mdc-icon-button-icon-color: var(--sys-on-primary); + --mat-icon-button-state-layer-color: var(--sys-on-primary); + } + + &.icon-button-variant-dark { + --mdc-icon-button-icon-color: var(--sys-secondary); + --mat-icon-button-state-layer-color: var(--sys-secondary); + } + + &.icon-button-variant-color { + --mdc-icon-button-icon-color: var(--sys-on-tertiary-fixed); + --mat-icon-button-state-layer-color: var(--sys-on-tertiary-fixed); + } + + &:focus-visible { + --mdc-icon-button-icon-color: var(--sys-secondary); + outline: 2px solid var(--sys-tertiary); + } } diff --git a/libs/design-system/icon-button/src/lib/icon-button-variant/icon-button-variant.directive.ts b/libs/design-system/icon-button/src/lib/icon-button-variant/icon-button-variant.directive.ts new file mode 100644 index 000000000..5f8f7019a --- /dev/null +++ b/libs/design-system/icon-button/src/lib/icon-button-variant/icon-button-variant.directive.ts @@ -0,0 +1,19 @@ +import { Directive, input } from '@angular/core'; + +/** Input options for icon button color */ +export type IconButtonVariant = 'light' | 'dark' | 'color'; + +/** + * Directive for icon button variants (color) + */ +@Directive({ + selector: '[hraIconButtonVariant]', + standalone: true, + host: { + '[class]': '"icon-button-variant-" + variant()', + }, +}) +export class IconButtonVariantDirective { + /** Input for icon button color variant */ + readonly variant = input('dark', { alias: 'hraIconButtonVariant' }); +} diff --git a/libs/design-system/icon-button/src/lib/icon-button.stories.ts b/libs/design-system/icon-button/src/lib/icon-button.stories.ts index de5fab9d0..e2f7a5b63 100644 --- a/libs/design-system/icon-button/src/lib/icon-button.stories.ts +++ b/libs/design-system/icon-button/src/lib/icon-button.stories.ts @@ -1,10 +1,10 @@ -import { provideHttpClient } from '@angular/common/http'; import { MatButtonModule } from '@angular/material/button'; import { MatIconModule } from '@angular/material/icon'; -import { provideIcons } from '@hra-ui/cdk/icons'; -import { applicationConfig, moduleMetadata, type Meta, type StoryObj } from '@storybook/angular'; +import { provideDesignSystem } from '@hra-ui/design-system'; +import { applicationConfig, Meta, moduleMetadata, StoryObj } from '@storybook/angular'; + import { IconButtonSizeDirective } from './icon-button-size/icon-button-size.directive'; -import { provideIconButtons } from './providers'; +import { IconButtonVariantDirective } from './icon-button-variant/icon-button-variant.directive'; const meta: Meta = { title: 'IconButton', @@ -29,18 +29,10 @@ const meta: Meta = { }, decorators: [ applicationConfig({ - providers: [ - provideHttpClient(), - provideIcons({ - fontIcons: { - defaultClasses: ['material-symbols-rounded'], - }, - }), - provideIconButtons(), - ], + providers: [provideDesignSystem()], }), moduleMetadata({ - imports: [MatButtonModule, MatIconModule, IconButtonSizeDirective], + imports: [MatButtonModule, MatIconModule, IconButtonSizeDirective, IconButtonVariantDirective], }), ], render: (args) => ({ @@ -70,3 +62,21 @@ export const Large: Story = { size: 'large', }, }; + +export const Dark: Story = { + args: { + variant: 'dark', + }, +}; + +export const Light: Story = { + args: { + variant: 'light', + }, +}; + +export const Color: Story = { + args: { + variant: 'color', + }, +}; diff --git a/libs/design-system/social-media-button/src/lib/social-media-button.component.html b/libs/design-system/social-media-button/src/lib/social-media-button.component.html index 5eef1e2e2..0839505dc 100644 --- a/libs/design-system/social-media-button/src/lib/social-media-button.component.html +++ b/libs/design-system/social-media-button/src/lib/social-media-button.component.html @@ -1,7 +1,14 @@ - + @if (name() === 'email') { - email + email } @else { - + } diff --git a/libs/design-system/social-media-button/src/lib/social-media-button.component.scss b/libs/design-system/social-media-button/src/lib/social-media-button.component.scss deleted file mode 100644 index c1d702d28..000000000 --- a/libs/design-system/social-media-button/src/lib/social-media-button.component.scss +++ /dev/null @@ -1,57 +0,0 @@ -:host { - --mat-icon-color: var(--sys-tertiary); - line-height: 0; - - mat-icon { - border-radius: 100%; - width: 3rem; - height: 3rem; - font-size: 3rem; - outline-color: transparent; - - &.small { - width: 2.25rem; - height: 2.25rem; - font-size: 2.25rem; - } - - &:hover { - color: rgb(from var(--mat-icon-color) r g b / 0.92); - } - &:active { - color: rgb(from var(--mat-icon-color) r g b / 0.84); - } - } - - ::ng-deep a:focus-visible { - --mat-icon-color: var(--sys-on-tertiary); - outline: none; - - mat-icon { - border: 0.25rem solid var(--sys-tertiary); - - svg { - position: relative; - height: 3rem; - width: 3rem; - right: 0.25rem; - bottom: 0.25rem; - } - } - - mat-icon.small { - border: 0.125rem solid var(--sys-tertiary); - - svg { - height: 2.25rem; - width: 2.25rem; - right: 0.125rem; - bottom: 0.125rem; - } - } - - .fill-contrast { - fill: var(--sys-secondary); - } - } -} diff --git a/libs/design-system/social-media-button/src/lib/social-media-button.component.spec.ts b/libs/design-system/social-media-button/src/lib/social-media-button.component.spec.ts index a1d746920..1f3a70250 100644 --- a/libs/design-system/social-media-button/src/lib/social-media-button.component.spec.ts +++ b/libs/design-system/social-media-button/src/lib/social-media-button.component.spec.ts @@ -13,9 +13,9 @@ describe('SocialMediaButtonComponent', () => { providers: [provideIcons(), provideHttpClient()], }); const link = screen.getByRole('link'); - const icon = link.querySelector('mat-icon'); + const icon = link.querySelector('a'); if (icon) { - expect(icon.classList.contains('small')).toBeTruthy(); + expect(icon.clientHeight).toBe(24); } }); @@ -28,9 +28,9 @@ describe('SocialMediaButtonComponent', () => { providers: [provideIcons(), provideHttpClient()], }); const link = screen.getByRole('link'); - const icon = link.querySelector('mat-icon'); + const icon = link.querySelector('a'); if (icon) { - expect(icon.classList.contains('small')).not.toBeTruthy(); + expect(icon.clientHeight).toBe(40); } }); }); diff --git a/libs/design-system/social-media-button/src/lib/social-media-button.component.ts b/libs/design-system/social-media-button/src/lib/social-media-button.component.ts index b064ba4d8..041d6873b 100644 --- a/libs/design-system/social-media-button/src/lib/social-media-button.component.ts +++ b/libs/design-system/social-media-button/src/lib/social-media-button.component.ts @@ -1,11 +1,16 @@ import { CommonModule } from '@angular/common'; import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core'; +import { MatButtonModule } from '@angular/material/button'; import { MatIconModule } from '@angular/material/icon'; +import { + IconButtonSize, + IconButtonSizeDirective, + IconButtonVariant, + IconButtonVariantDirective, +} from '@hra-ui/design-system/icon-button'; /** Social media name type */ export type SocialMediaName = 'x' | 'facebook' | 'instagram' | 'youtube' | 'linkedin' | 'email' | 'github'; -/** Button size type */ -export type SocialMediaButtonSize = 'small' | 'large'; /** All CNS links */ export const SOCIAL_LINKS: Record = { @@ -14,8 +19,8 @@ export const SOCIAL_LINKS: Record = { instagram: 'https://www.instagram.com/cns_at_iu/', youtube: 'https://www.youtube.com/@CNSCenter/', linkedin: 'https://www.linkedin.com/company/cns-indiana-university-bloomington', - email: 'mailto:infoccf@iu.edu', github: 'https://github.com/hubmapconsortium/hra-ui', + email: 'mailto:infoccf@iu.edu', }; /** @@ -24,9 +29,8 @@ export const SOCIAL_LINKS: Record = { @Component({ selector: 'hra-social-media-button', standalone: true, - imports: [CommonModule, MatIconModule], + imports: [CommonModule, MatButtonModule, MatIconModule, IconButtonVariantDirective, IconButtonSizeDirective], templateUrl: './social-media-button.component.html', - styleUrl: './social-media-button.component.scss', changeDetection: ChangeDetectionStrategy.OnPush, }) export class SocialMediaButtonComponent { @@ -34,7 +38,10 @@ export class SocialMediaButtonComponent { readonly name = input.required(); /** Button size */ - readonly size = input.required(); + readonly size = input('large'); + + /** Button variant */ + readonly variant = input('dark'); /** Icon to display */ protected icon = computed(() => `social:${this.name()}`);