Merge pull request #71 from smartive-education/feature/#54-Heading-#53-…

…Mumble fix: #53 #54
ost-cas-fee-adv-22-23 · Jan 7, 2023 · 58e9d6f · 58e9d6f
2 parents e3c66ec + 6818449
commit 58e9d6f
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 8 deletions.
diff --git a/packages/design-system-component-library-yeahyeahyeah/components/User.tsx b/packages/design-system-component-library-yeahyeahyeah/components/User.tsx
@@ -19,10 +19,34 @@ export interface IUserProps {
 export const User: React.FC<IUserProps> = ({
   label = 'Display Name',
   variant = 'small',
-  username = { label: 'Username', href: '#' },
-  timestamp = { label: 'TimeStamp', href: '#' },
-  location = { label: 'Location', href: '#' },
-  joined = { label: 'Joined', href: '#' },
+  username = {
+    label: 'Username',
+    href: '#',
+    fCallBack: () => {
+      return null;
+    },
+  },
+  timestamp = {
+    label: 'TimeStamp',
+    href: '#',
+    fCallBack: () => {
+      return null;
+    },
+  },
+  location = {
+    label: 'Location',
+    href: '#',
+    fCallBack: () => {
+      return null;
+    },
+  },
+  joined = {
+    label: 'Joined',
+    href: '#',
+    fCallBack: () => {
+      return null;
+    },
+  },
   avatar = { src: 'https://i.stack.imgur.com/5xd5n.png', alt: 'Alter Tag' },
   btn = { label: 'Follow' },
 }) => {

diff --git a/packages/design-system-component-library-yeahyeahyeah/components/forms/WriteComponent.tsx b/packages/design-system-component-library-yeahyeahyeah/components/forms/WriteComponent.tsx
@@ -28,6 +28,7 @@ export const WriteComponent: React.FC<IWriteComponentProps> = ({
     username: {
       label: 'Username',
       href: '#',
+      type: 'username',
     },
     avatar: {
       src: 'https://media.giphy.com/media/ZYzt9dXQUjmBa/giphy.gif',

diff --git a/packages/design-system-component-library-yeahyeahyeah/components/mumble/Mumble.tsx b/packages/design-system-component-library-yeahyeahyeah/components/mumble/Mumble.tsx
@@ -38,19 +38,23 @@ export const Mumble: React.FC<IMumbleProps> = ({
     joined: {
       href: '',
       label: 'Joined',
+      type: 'joined',
     },
     label: 'Display Name',
     location: {
       href: '',
       label: 'Location',
+      type: 'location',
     },
     timestamp: {
       href: '',
       label: 'Timestamp',
+      type: 'timestamp',
     },
     username: {
       href: '',
       label: 'Username',
+      type: 'username',
     },
   },
   text = '',
@@ -85,7 +89,7 @@ export const Mumble: React.FC<IMumbleProps> = ({
     <>
       {variant === 'detailpage' && (
         <>
-          <Article>
+          <Article variant={variant}>
             <UserWrapper spacing={'16'}>
               <User
                 btn={user.btn}
@@ -116,7 +120,7 @@ export const Mumble: React.FC<IMumbleProps> = ({
         </>
       )}
       {variant === 'timeline' && (
-        <Article>
+        <Article variant={variant}>
           <UserWrapper spacing={'16'}>
             <User
               avatar={user.avatar}
@@ -174,6 +178,10 @@ interface IRowStyles {
   spacing?: string;
 }
 
+interface IArticleStyles {
+  variant?: string;
+}
+
 const Row = styled.div(({ gap }: IRowStyles) => [
   tw`
     flex
@@ -187,7 +195,7 @@ const Row = styled.div(({ gap }: IRowStyles) => [
   BottomSpacing,
 ]);
 
-const Article = styled.article(() => [
+const Article = styled.article(({ variant }: IArticleStyles) => [
   tw`
     relative
     flex
@@ -200,6 +208,7 @@ const Article = styled.article(() => [
     px-16
     sm:px-48
   `,
+  (variant === 'timeline' || variant === 'detailpage') && tw`rounded-xl`,
 ]);
 
 const AvatarWrapper = styled.div(() => [

diff --git a/packages/design-system-component-library-yeahyeahyeah/components/typography/Heading.tsx b/packages/design-system-component-library-yeahyeahyeah/components/typography/Heading.tsx
@@ -5,7 +5,7 @@ import { BottomSpacing } from '../Spacing';
 export interface IHeadingProps {
   label: string;
   tag: 'h1' | 'h2' | 'h3' | 'h4' | 'span';
-  color: 'light' | 'medium' | 'dark' | 'violet' | 'pink' | 'white';
+  color?: 'light' | 'medium' | 'dark' | 'violet' | 'pink' | 'white';
   size: 'default' | 'xlarge' | 'large' | 'medium' | 'small';
   spacing?: TSpacing;
 }