Merge pull request #263 from smartive-education/feature/hashtags2

feat: add more colors and text styles to hashtags
ost-cas-fee-adv-22-23 · Apr 1, 2023 · 257ea79 · 257ea79
2 parents 685f645 + b24936f
commit 257ea79
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 9 deletions.
diff --git a/packages/design-system-component-library-yeahyeahyeah/components/typography/Hashtag.tsx b/packages/design-system-component-library-yeahyeahyeah/components/typography/Hashtag.tsx
@@ -5,7 +5,8 @@ import { Link, LinkProps } from '../link/Link';
 export type HashtagProps<T> = {
   label?: string;
   fCallBack?: (e: MouseEvent<HTMLAnchorElement>) => void;
-  size: 'small' | 'medium' | 'large';
+  size: 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge';
+  color?: 'slate' | 'slate-300' | 'violet' | 'pink' | 'white';
 } & LinkProps<T>;
 
 export const Hashtag = <
@@ -17,6 +18,7 @@ export const Hashtag = <
   label,
   fCallBack,
   size,
+  color,
   newTab = false,
   ...props
 }: HashtagProps<T>) => {
@@ -27,24 +29,32 @@ export const Hashtag = <
 
   return !fCallBack ? (
     <Link {...(props as any)} {...(newTab ? { target: '_blank', rel: 'noreferrer' } : {})}>
-      <StyledHashtag title={label} size={size}>
+      <StyledHashtag title={label} size={size} color={color}>
         #{label}
       </StyledHashtag>
     </Link>
   ) : (
-    <StyledHashtag onClick={handleClick} title={label} size={size}>
+    <StyledHashtag onClick={handleClick} title={label} size={size} color={color}>
       #{label}
     </StyledHashtag>
   );
 };
 
 interface IHashtagStyleProps {
-  size: string;
+  size: 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge';
+  color?: 'slate' | 'slate-300' | 'violet' | 'pink' | 'white';
 }
 
-const StyledHashtag = styled.a(({ size }: IHashtagStyleProps) => [
-  tw`transition cursor-pointer`,
-  size === 'small' && tw`text-violet-600 hover:text-violet-500 text-base [font-weight:500] hover:underline`,
-  size === 'medium' && tw`text-violet-600 hover:text-violet-500 text-lg [font-weight:500] hover:underline`,
-  size === 'large' && tw`text-slate-white hover:text-slate-white text-4xl [font-weight:700] hover:underline`,
+const StyledHashtag = styled.a(({ size, color }: IHashtagStyleProps) => [
+  tw`transition cursor-pointer hover:underline break-words`,
+  size === 'small' && tw`text-violet-600 hover:text-violet-500 text-base [font-weight:500]`,
+  size === 'medium' && tw`text-violet-600 hover:text-violet-500 text-md [font-weight:500]`,
+  size === 'large' && tw`text-violet-600 hover:text-violet-500 text-lg [font-weight:500]`,
+  size === 'xlarge' && tw`text-slate-white hover:text-slate-white text-2xl [font-weight:700]`,
+  size === 'xxlarge' && tw`text-slate-white hover:text-slate-white text-4xl [font-weight:700]`,
+  color === 'slate' && tw`text-slate-500 hover:text-slate-400`,
+  color === 'slate-300' && tw`text-slate-300 hover:text-slate-200`,
+  color === 'violet' && tw`text-violet-600 hover:text-violet-500`,
+  color === 'pink' && tw`text-pink-600 hover:text-pink-500`,
+  color === 'white' && tw`text-slate-white  hover:text-slate-white`,
 ]);
diff --git a/packages/design-system-component-library-yeahyeahyeah/stories/typography/Hashtag.stories.tsx b/packages/design-system-component-library-yeahyeahyeah/stories/typography/Hashtag.stories.tsx
@@ -14,6 +14,9 @@ export default {
     size: {
       control: 'select',
     },
+    color: {
+      control: 'select',
+    },
     fCallBack: {
       control: false,
       table: {
@@ -25,6 +28,7 @@ export default {
   args: {
     label: 'Mumble',
     size: 'small',
+    color: 'pink',
   },
 } as ComponentMeta<typeof Hashtag>;