Merge pull request #229 from smartive-education/feature/component-lib…

…rary-refactoring fix: improve User, Navigation and UserRecommended
ost-cas-fee-adv-22-23 · Feb 21, 2023 · 5588cf5 · 5588cf5
2 parents 4624e40 + dbd429d
commit 5588cf5
Show file tree

Hide file tree

Showing 11 changed files with 116 additions and 121 deletions.
diff --git a/packages/app/pages/hashtag.tsx b/packages/app/pages/hashtag.tsx
@@ -36,7 +36,6 @@ export default function HashtagComponent() {
 
   const recommendedProps: UserRecommendedProps = {
     label: 'Display Name',
-    variant: 'small',
     btn: {
       label: 'Follow',
       onClick: () => console.log('clicked'),

diff --git a/packages/app/pages/profilepage.tsx b/packages/app/pages/profilepage.tsx
@@ -6,13 +6,15 @@ import {
   Container,
   Heading,
   TextBox,
-  User,
-  UserProps,
   UploadForm,
   BottomSpacing,
+  UserRecommendedProps,
+  UserRecommended,
+  IconLink,
 } from '@smartive-education/design-system-component-library-yeahyeahyeah';
 import debounce from 'lodash.debounce';
 import { FileRejection } from 'react-dropzone';
+import Link from 'next/link';
 
 export default function Profilepage() {
   const [posts, setPosts] = useState(['']);
@@ -65,21 +67,23 @@ export default function Profilepage() {
     setShowModal(true);
   };
 
-  const props: UserProps = {
+  const props: UserRecommendedProps = {
+    label: 'Display Name',
     avatar: {
       alt: 'Alter Tag',
       onImageClick: () => console.log('image clicked'),
       src: 'https://media.giphy.com/media/cfuL5gqFDreXxkWQ4o/giphy.gif',
     },
-    label: 'Display Name',
-    variant: 'recommended',
+    btn: { label: 'Follow', onClick: () => console.log('btn clicked') },
   };
 
   const users = Array(12)
     .fill('user')
     .map((u, i) => (
       <div tw="flex-[30%]" key={i}>
-        <User {...props} />
+        <UserRecommended {...props}>
+          <IconLink label="User" type="username" color="violet" href="/" legacyBehavior passHref linkComponent={Link} />
+        </UserRecommended>
       </div>
     ));
 

diff --git a/packages/design-system-component-library-yeahyeahyeah/components/navigation/Navigation.tsx b/packages/design-system-component-library-yeahyeahyeah/components/navigation/Navigation.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 import tw from 'twin.macro';
+import { NavigationContainer } from './NavigationStyles';
 
 export type NavigationProps = {
   title: 'Mumble Logo';
@@ -11,7 +12,7 @@ export const Navigation = ({ children }: NavigationProps) => {
   return (
     <HeaderStyles>
       <NavigationStyles>
-        <Container>{children}</Container>
+        <NavigationContainer>{children}</NavigationContainer>
       </NavigationStyles>
     </HeaderStyles>
   );
@@ -21,16 +22,6 @@ const HeaderStyles = tw.header`
   w-full
 `;
 
-const Container = tw.div`
-  flex
-  flex-col
-  sm:flex-row
-  justify-center
-  items-center
-  container
-  px-16
-`;
-
 const NavigationStyles = styled.nav(() => [
   tw`
     flex

diff --git a/...s/design-system-component-library-yeahyeahyeah/components/navigation/NavigationStyles.tsx b/...s/design-system-component-library-yeahyeahyeah/components/navigation/NavigationStyles.tsx
@@ -1,6 +1,6 @@
 import tw from 'twin.macro';
 
-export const Container = tw.div`
+export const NavigationContainer = tw.div`
   flex
   flex-col
   sm:flex-row
@@ -10,14 +10,14 @@ export const Container = tw.div`
   px-16
 `;
 
-export const Column = tw.div`
+export const NavigationColumn = tw.div`
   flex
   justify-between
   items-center
   w-full
 `;
 
-export const Row = tw.div`
+export const NavigationRow = tw.div`
   flex
   flex-row
   justify-between

diff --git a/packages/design-system-component-library-yeahyeahyeah/components/navigation/index.ts b/packages/design-system-component-library-yeahyeahyeah/components/navigation/index.ts
@@ -1 +1,2 @@
 export * from './Navigation';
+export * from './NavigationStyles';
diff --git a/packages/design-system-component-library-yeahyeahyeah/components/user/User.tsx b/packages/design-system-component-library-yeahyeahyeah/components/user/User.tsx
@@ -1,11 +1,11 @@
 import React from 'react';
 import { Heading } from '../typography/Heading';
 import { Avatar, AvatarProps } from './Avatar';
-import { Column, HeadingWrapper, Row } from './UserStyles';
+import { UserColumn, HeadingWrapper, UserRow } from './UserStyles';
 
 export interface UserProps {
   label: string;
-  variant: 'small' | 'medium' | 'large' | 'xlarge' | 'recommended' | 'write' | 'inline';
+  variant: 'small' | 'medium' | 'large' | 'xlarge' | 'write' | 'inline';
   type?: 'edit' | 'view';
   avatar?: AvatarProps<any>;
   children?: React.ReactNode;
@@ -27,52 +27,52 @@ export const User: React.FC<UserProps> = ({
   return (
     <>
       {variant === 'small' && (
-        <Row gap="small">
+        <UserRow gap="small">
           <Avatar {...avatar} variant="small" />
-          <Column variant={variant}>
+          <UserColumn variant={variant}>
             <Heading tag="h4" color="dark" size="medium" label={label} />
-            <Row>{children}</Row>
-          </Column>
-        </Row>
+            <UserRow>{children}</UserRow>
+          </UserColumn>
+        </UserRow>
       )}
       {variant === 'medium' && (
-        <Column>
+        <UserColumn>
           <Heading tag="h4" color="dark" size="large" label={label} />
-          <Row>{children}</Row>
-        </Column>
+          <UserRow>{children}</UserRow>
+        </UserColumn>
       )}
       {variant === 'large' && (
-        <Column>
+        <UserColumn>
           <Heading tag="h4" color="dark" size="xlarge" label={label} />
-          <Row>{children}</Row>
-        </Column>
+          <UserRow>{children}</UserRow>
+        </UserColumn>
       )}
       {variant === 'xlarge' && (
-        <Column>
-          <Row type={type}>
+        <UserColumn>
+          <UserRow type={type}>
             <Heading tag="h3" color="dark" size="default" label={label} />
-          </Row>
-          <Row>{children}</Row>
-        </Column>
+          </UserRow>
+          <UserRow>{children}</UserRow>
+        </UserColumn>
       )}
       {variant === 'inline' && (
-        <Row gap="small">
+        <UserRow gap="small">
           <Avatar {...avatar} variant="small" />
-          <Column variant={variant}>
+          <UserColumn variant={variant}>
             <Heading tag="h4" color="dark" size="default" label={label} />
-            <Row>{children}</Row>
-          </Column>
-        </Row>
+            <UserRow>{children}</UserRow>
+          </UserColumn>
+        </UserRow>
       )}
       {variant === 'write' && (
-        <Row gap="small">
-          <Column variant={variant}>
+        <UserRow gap="small">
+          <UserColumn variant={variant}>
             <Avatar {...avatar} variant="medium" />
             <HeadingWrapper>
               <Heading tag="h4" color="dark" size="default" label={label} />
             </HeadingWrapper>
-          </Column>
-        </Row>
+          </UserColumn>
+        </UserRow>
       )}
     </>
   );

diff --git a/packages/design-system-component-library-yeahyeahyeah/components/user/UserRecommended.tsx b/packages/design-system-component-library-yeahyeahyeah/components/user/UserRecommended.tsx
@@ -3,12 +3,10 @@ import tw from 'twin.macro';
 import { Heading } from '../typography/Heading';
 import { Button } from '../button/Button';
 import { Avatar, AvatarProps } from './Avatar';
-import { Article, Column, Row } from './UserStyles';
+import { UserArticle, UserColumn, UserRow } from './UserStyles';
 
 export interface UserRecommendedProps {
   label: string;
-  variant: 'small' | 'medium' | 'large' | 'xlarge' | 'recommended' | 'write' | 'inline';
-  type?: 'edit' | 'view';
   avatar?: AvatarProps<any>;
   btn?: { label: string; onClick?: () => void };
   children?: React.ReactNode;
@@ -27,15 +25,15 @@ export const UserRecommended: React.FC<UserRecommendedProps> = ({
   children,
 }) => {
   return (
-    <Article>
-      <Column variant="recommended">
+    <UserArticle>
+      <UserColumn variant="recommended">
         <Avatar {...avatar} variant="large" />
-        <Row spacing={tw`mb-8`}>
+        <UserRow spacing={tw`mb-8`}>
           <Heading tag="h4" color="dark" size="large" label={label} />
-        </Row>
+        </UserRow>
         <div tw="mb-16">{children}</div>
         {btn && <Button {...btn} icon="logo" size="small" type="button" width="large" color="violet" />}
-      </Column>
-    </Article>
+      </UserColumn>
+    </UserArticle>
   );
 };
diff --git a/packages/design-system-component-library-yeahyeahyeah/components/user/UserStyles.tsx b/packages/design-system-component-library-yeahyeahyeah/components/user/UserStyles.tsx
@@ -10,7 +10,7 @@ export interface RowStyles {
   type?: string;
 }
 
-export const Column = styled.div(({ variant }: UserStyles) => [
+export const UserColumn = styled.div(({ variant }: UserStyles) => [
   tw`
     flex
     flex-col
@@ -26,7 +26,7 @@ export const Column = styled.div(({ variant }: UserStyles) => [
   `,
 ]);
 
-export const Row = styled.div(({ gap, spacing, type }: RowStyles) => [
+export const UserRow = styled.div(({ gap, spacing, type }: RowStyles) => [
   tw`
     flex
     flex-row
@@ -39,7 +39,7 @@ export const Row = styled.div(({ gap, spacing, type }: RowStyles) => [
   type === 'edit' && tw`w-fit gap-0`,
 ]);
 
-export const Article = styled.article(() => [tw`flex flex-col p-16 bg-slate-white rounded-16`]);
+export const UserArticle = styled.article(() => [tw`flex flex-col p-16 bg-slate-white rounded-16`]);
 
 export const HeadingWrapper = tw.div`
   ml-12

diff --git a/...es/design-system-component-library-yeahyeahyeah/stories/navigation/Navigation.stories.tsx b/...es/design-system-component-library-yeahyeahyeah/stories/navigation/Navigation.stories.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 import NavigationReadme from '../../docs/Navigation.md';
-import { Avatar, Container, NaviButton, Navigation, Column, Row, Modal } from '../../index';
+import { Avatar, NaviButton, Navigation, Modal, NavigationContainer, NavigationColumn, NavigationRow } from '../../index';
 import Link from 'next/link';
 
 export default {
@@ -20,9 +20,10 @@ const Template: ComponentStory<typeof Navigation> = (args) => {
 
   return !open ? (
     <Navigation {...args} title="Mumble Logo">
-      <Container layout="plain">
-        <Column>
-          <Row>
+      <NavigationContainer>
+        <NavigationColumn>
+          <div tw="text-slate-white">Logo</div>
+          <NavigationRow>
             <NaviButton
               label="Profile"
               variant="profile"
@@ -51,9 +52,9 @@ const Template: ComponentStory<typeof Navigation> = (args) => {
               passHref={true}
               linkComponent={Link}
             />
-          </Row>
-        </Column>
-      </Container>
+          </NavigationRow>
+        </NavigationColumn>
+      </NavigationContainer>
     </Navigation>
   ) : (
     <Modal label="Settings" isOpen={open} onClose={handleClose}>
Original file line number	Diff line number	Diff line change
		@@ -1 +1,2 @@
		export * from './Navigation';
		export * from './NavigationStyles';