Icon button variations

libs/design-system/footer/src/lib/footer.component.stories.ts

@@ -1,14 +1,14 @@
-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<FooterComponent> = {
   component: FooterComponent,
   title: 'FooterComponent',
   decorators: [
     applicationConfig({
-      providers: [provideHttpClient(), provideIcons()],
+      providers: [provideDesignSystem()],
     }),
   ],
 };

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';

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);
+  }
 }

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<IconButtonVariant>('dark', { alias: 'hraIconButtonVariant' });
+}

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',
+  },
+};

libs/design-system/social-media-button/src/lib/social-media-button.component.html

@@ -1,7 +1,14 @@
-<a [href]="link()" target="_blank" rel="noopener noreferrer">
+<a
+  mat-icon-button
+  [hraIconButtonVariant]="variant()"
+  [hraIconButtonSize]="size()"
+  [href]="link()"
+  target="_blank"
+  rel="noopener noreferrer"
+>
   @if (name() === 'email') {
-    <mat-icon [class.small]="size() === 'small'">email</mat-icon>
+    <mat-icon>email</mat-icon>
   } @else {
-    <mat-icon [class.small]="size() === 'small'" [svgIcon]="icon()"></mat-icon>
+    <mat-icon [svgIcon]="icon()"></mat-icon>
   }
 </a>

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);
     }
   });
 });

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<SocialMediaName, string> = {
@@ -14,8 +19,8 @@ export const SOCIAL_LINKS: Record<SocialMediaName, string> = {
   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:[email protected]',
   github: 'https://github.com/hubmapconsortium/hra-ui',
+  email: 'mailto:[email protected]',
 };
 
 /**
@@ -24,17 +29,19 @@ export const SOCIAL_LINKS: Record<SocialMediaName, string> = {
 @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 {
   /** Button name */
   readonly name = input.required<SocialMediaName>();
 
   /** Button size */
-  readonly size = input.required<SocialMediaButtonSize>();
+  readonly size = input<IconButtonSize>('large');
+
+  /** Button variant */
+  readonly variant = input<IconButtonVariant>('dark');
 
   /** Icon to display */
   protected icon = computed(() => `social:${this.name()}`);