From d48a66e2155bcbdc0580513c82b4cea3602d8c72 Mon Sep 17 00:00:00 2001 From: edlu77 Date: Mon, 13 Jan 2025 17:01:44 -0500 Subject: [PATCH 1/2] Add new social media icons to design system --- .../assets/icons/social/email.svg | 6 ------ .../assets/icons/social/email_large.svg | 6 ------ .../assets/icons/social/facebook.svg | 18 ++---------------- .../assets/icons/social/facebook_large.svg | 17 ----------------- .../assets/icons/social/github.svg | 3 +++ .../assets/icons/social/instagram.svg | 12 ++---------- .../assets/icons/social/instagram_large.svg | 11 ----------- .../assets/icons/social/linkedin.svg | 8 ++------ .../assets/icons/social/linkedin_large.svg | 7 ------- libs/design-system/assets/icons/social/x.svg | 5 ++--- .../assets/icons/social/x_large.svg | 4 ---- .../assets/icons/social/youtube.svg | 13 ++----------- .../assets/icons/social/youtube_large.svg | 5 ----- .../src/lib/social-media-button.component.ts | 6 +++--- .../src/lib/social-media-button.stories.ts | 4 ++-- .../src/lib/material-symbols.stories.ts | 10 ++-------- 16 files changed, 20 insertions(+), 115 deletions(-) delete mode 100644 libs/design-system/assets/icons/social/email.svg delete mode 100644 libs/design-system/assets/icons/social/email_large.svg delete mode 100644 libs/design-system/assets/icons/social/facebook_large.svg create mode 100644 libs/design-system/assets/icons/social/github.svg delete mode 100644 libs/design-system/assets/icons/social/instagram_large.svg delete mode 100644 libs/design-system/assets/icons/social/linkedin_large.svg delete mode 100644 libs/design-system/assets/icons/social/x_large.svg delete mode 100644 libs/design-system/assets/icons/social/youtube_large.svg diff --git a/libs/design-system/assets/icons/social/email.svg b/libs/design-system/assets/icons/social/email.svg deleted file mode 100644 index 2368fd287..000000000 --- a/libs/design-system/assets/icons/social/email.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - diff --git a/libs/design-system/assets/icons/social/email_large.svg b/libs/design-system/assets/icons/social/email_large.svg deleted file mode 100644 index b1daf23d1..000000000 --- a/libs/design-system/assets/icons/social/email_large.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - diff --git a/libs/design-system/assets/icons/social/facebook.svg b/libs/design-system/assets/icons/social/facebook.svg index 0521eda1d..42e2744fd 100644 --- a/libs/design-system/assets/icons/social/facebook.svg +++ b/libs/design-system/assets/icons/social/facebook.svg @@ -1,17 +1,3 @@ - - - - - - - - - - - - - - - - + + diff --git a/libs/design-system/assets/icons/social/facebook_large.svg b/libs/design-system/assets/icons/social/facebook_large.svg deleted file mode 100644 index 270715fc5..000000000 --- a/libs/design-system/assets/icons/social/facebook_large.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - - - - - - - - - - - - - - diff --git a/libs/design-system/assets/icons/social/github.svg b/libs/design-system/assets/icons/social/github.svg new file mode 100644 index 000000000..9a22bdd99 --- /dev/null +++ b/libs/design-system/assets/icons/social/github.svg @@ -0,0 +1,3 @@ + + + diff --git a/libs/design-system/assets/icons/social/instagram.svg b/libs/design-system/assets/icons/social/instagram.svg index d95bcccb1..87cc30ed9 100644 --- a/libs/design-system/assets/icons/social/instagram.svg +++ b/libs/design-system/assets/icons/social/instagram.svg @@ -1,11 +1,3 @@ - - - - - - - - - - + + diff --git a/libs/design-system/assets/icons/social/instagram_large.svg b/libs/design-system/assets/icons/social/instagram_large.svg deleted file mode 100644 index 12b49348d..000000000 --- a/libs/design-system/assets/icons/social/instagram_large.svg +++ /dev/null @@ -1,11 +0,0 @@ - - - - - - - - - - - diff --git a/libs/design-system/assets/icons/social/linkedin.svg b/libs/design-system/assets/icons/social/linkedin.svg index 5e005c103..c5512f8ff 100644 --- a/libs/design-system/assets/icons/social/linkedin.svg +++ b/libs/design-system/assets/icons/social/linkedin.svg @@ -1,7 +1,3 @@ - - - - - - + + diff --git a/libs/design-system/assets/icons/social/linkedin_large.svg b/libs/design-system/assets/icons/social/linkedin_large.svg deleted file mode 100644 index 5bfb5070d..000000000 --- a/libs/design-system/assets/icons/social/linkedin_large.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - - - - diff --git a/libs/design-system/assets/icons/social/x.svg b/libs/design-system/assets/icons/social/x.svg index 9de329fdf..502e143f5 100644 --- a/libs/design-system/assets/icons/social/x.svg +++ b/libs/design-system/assets/icons/social/x.svg @@ -1,4 +1,3 @@ - - - + + diff --git a/libs/design-system/assets/icons/social/x_large.svg b/libs/design-system/assets/icons/social/x_large.svg deleted file mode 100644 index 1a3baafdf..000000000 --- a/libs/design-system/assets/icons/social/x_large.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/libs/design-system/assets/icons/social/youtube.svg b/libs/design-system/assets/icons/social/youtube.svg index 2ca223cad..b044cda31 100644 --- a/libs/design-system/assets/icons/social/youtube.svg +++ b/libs/design-system/assets/icons/social/youtube.svg @@ -1,12 +1,3 @@ - - - - - - - - - - - + + diff --git a/libs/design-system/assets/icons/social/youtube_large.svg b/libs/design-system/assets/icons/social/youtube_large.svg deleted file mode 100644 index 77b5b5492..000000000 --- a/libs/design-system/assets/icons/social/youtube_large.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - 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 c19bb4e34..c1e30df74 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 @@ -3,7 +3,7 @@ import { ChangeDetectionStrategy, Component, computed, input } from '@angular/co import { MatIconModule } from '@angular/material/icon'; /** Social media name type */ -export type SocialMediaName = 'x' | 'facebook' | 'instagram' | 'youtube' | 'linkedin' | 'email'; +export type SocialMediaName = 'x' | 'facebook' | 'instagram' | 'youtube' | 'linkedin' | 'github'; /** Button size type */ export type SocialMediaButtonSize = 'small' | 'large'; @@ -14,7 +14,7 @@ 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', }; /** @@ -36,7 +36,7 @@ export class SocialMediaButtonComponent { readonly size = input.required(); /** Icon to display */ - protected icon = computed(() => `social:${this.name()}${this.size() === 'large' ? '_large' : ''}`); + protected icon = computed(() => `social:${this.name()}`); /** External link for button */ protected link = computed(() => SOCIAL_LINKS[this.name()]); diff --git a/libs/design-system/social-media-button/src/lib/social-media-button.stories.ts b/libs/design-system/social-media-button/src/lib/social-media-button.stories.ts index add310d8a..50aeb52f6 100644 --- a/libs/design-system/social-media-button/src/lib/social-media-button.stories.ts +++ b/libs/design-system/social-media-button/src/lib/social-media-button.stories.ts @@ -24,13 +24,13 @@ type Story = StoryObj; export const Default: Story = { args: { - name: 'email', + name: 'github', size: 'large', }, argTypes: { name: { control: 'select', - options: ['email', 'facebook', 'instagram', 'linkedin', 'x', 'youtube'], + options: ['github', 'facebook', 'instagram', 'linkedin', 'x', 'youtube'], }, size: { control: 'select', diff --git a/libs/design-system/src/lib/material-symbols.stories.ts b/libs/design-system/src/lib/material-symbols.stories.ts index d65ab6091..5ed6530b8 100644 --- a/libs/design-system/src/lib/material-symbols.stories.ts +++ b/libs/design-system/src/lib/material-symbols.stories.ts @@ -35,7 +35,7 @@ export const BuiltinSymbols: Story = { export const CustomSymbols: Story = { args: { - name: 'social:email', + name: 'social:github', }, argTypes: { name: { @@ -43,18 +43,12 @@ export const CustomSymbols: Story = { options: [ 'upload', 'settings_alert', - 'social:email', - 'social:email_large', + 'social:github', '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', ], }, }, From d4f95aef678f3c76ce148a4d6355c865eaca94df Mon Sep 17 00:00:00 2001 From: edlu77 Date: Tue, 14 Jan 2025 14:57:36 -0500 Subject: [PATCH 2/2] Add email back as social option --- .../src/lib/social-media-button.component.html | 6 +++++- .../src/lib/social-media-button.component.scss | 2 ++ .../src/lib/social-media-button.component.ts | 3 ++- .../src/lib/social-media-button.stories.ts | 7 +++---- 4 files changed, 12 insertions(+), 6 deletions(-) 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 97fd42920..5eef1e2e2 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,3 +1,7 @@ - + @if (name() === '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 index 8551c25bc..c1d702d28 100644 --- 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 @@ -6,11 +6,13 @@ 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 { 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 c1e30df74..b064ba4d8 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 @@ -3,7 +3,7 @@ import { ChangeDetectionStrategy, Component, computed, input } from '@angular/co import { MatIconModule } from '@angular/material/icon'; /** Social media name type */ -export type SocialMediaName = 'x' | 'facebook' | 'instagram' | 'youtube' | 'linkedin' | 'github'; +export type SocialMediaName = 'x' | 'facebook' | 'instagram' | 'youtube' | 'linkedin' | 'email' | 'github'; /** Button size type */ export type SocialMediaButtonSize = 'small' | 'large'; @@ -14,6 +14,7 @@ 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', }; diff --git a/libs/design-system/social-media-button/src/lib/social-media-button.stories.ts b/libs/design-system/social-media-button/src/lib/social-media-button.stories.ts index 50aeb52f6..2b512a4ab 100644 --- a/libs/design-system/social-media-button/src/lib/social-media-button.stories.ts +++ b/libs/design-system/social-media-button/src/lib/social-media-button.stories.ts @@ -1,5 +1,4 @@ -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 { SocialMediaButtonComponent } from './social-media-button.component'; @@ -15,7 +14,7 @@ const meta: Meta = { }, decorators: [ applicationConfig({ - providers: [provideHttpClient(), provideIcons()], + providers: [provideDesignSystem()], }), ], }; @@ -30,7 +29,7 @@ export const Default: Story = { argTypes: { name: { control: 'select', - options: ['github', 'facebook', 'instagram', 'linkedin', 'x', 'youtube'], + options: ['email', 'github', 'facebook', 'instagram', 'linkedin', 'x', 'youtube'], }, size: { control: 'select',