From dbd429df3a6786fdd8dc987a869e21e748f66ae9 Mon Sep 17 00:00:00 2001 From: Thomas Schallert Date: Tue, 21 Feb 2023 12:58:43 +0100 Subject: [PATCH] fix: improve User, Navigation and UserRecommended --- packages/app/pages/hashtag.tsx | 1 - packages/app/pages/profilepage.tsx | 16 +++-- .../components/navigation/Navigation.tsx | 13 +--- .../navigation/NavigationStyles.tsx | 6 +- .../components/navigation/index.ts | 1 + .../components/user/User.tsx | 54 ++++++++-------- .../components/user/UserRecommended.tsx | 16 +++-- .../components/user/UserStyles.tsx | 6 +- .../stories/navigation/Navigation.stories.tsx | 15 ++--- .../stories/user/User.stories.tsx | 63 +++---------------- .../stories/user/UserRecommended.stories.tsx | 46 ++++++++++++++ 11 files changed, 116 insertions(+), 121 deletions(-) create mode 100644 packages/design-system-component-library-yeahyeahyeah/stories/user/UserRecommended.stories.tsx diff --git a/packages/app/pages/hashtag.tsx b/packages/app/pages/hashtag.tsx index a50b55c0..97f7fb98 100644 --- 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 index 73ff1763..3b21e9e0 100644 --- 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) => (
- + + +
)); diff --git a/packages/design-system-component-library-yeahyeahyeah/components/navigation/Navigation.tsx b/packages/design-system-component-library-yeahyeahyeah/components/navigation/Navigation.tsx index 7a7b371c..e719c134 100644 --- 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 ( - {children} + {children} ); @@ -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/packages/design-system-component-library-yeahyeahyeah/components/navigation/NavigationStyles.tsx b/packages/design-system-component-library-yeahyeahyeah/components/navigation/NavigationStyles.tsx index 24e1a38d..b92f1dad 100644 --- a/packages/design-system-component-library-yeahyeahyeah/components/navigation/NavigationStyles.tsx +++ b/packages/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 index 95e14a93..67e31081 100644 --- 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 index 9ef78589..9a66865b 100644 --- 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; children?: React.ReactNode; @@ -27,52 +27,52 @@ export const User: React.FC = ({ return ( <> {variant === 'small' && ( - + - + - {children} - - + {children} + + )} {variant === 'medium' && ( - + - {children} - + {children} + )} {variant === 'large' && ( - + - {children} - + {children} + )} {variant === 'xlarge' && ( - - + + - - {children} - + + {children} + )} {variant === 'inline' && ( - + - + - {children} - - + {children} + + )} {variant === 'write' && ( - - + + - - + + )} ); diff --git a/packages/design-system-component-library-yeahyeahyeah/components/user/UserRecommended.tsx b/packages/design-system-component-library-yeahyeahyeah/components/user/UserRecommended.tsx index 8e0e64d7..8b05edaa 100644 --- 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; btn?: { label: string; onClick?: () => void }; children?: React.ReactNode; @@ -27,15 +25,15 @@ export const UserRecommended: React.FC = ({ children, }) => { return ( -
- + + - + - +
{children}
{btn &&
+ + ); }; diff --git a/packages/design-system-component-library-yeahyeahyeah/components/user/UserStyles.tsx b/packages/design-system-component-library-yeahyeahyeah/components/user/UserStyles.tsx index b1e8547d..819e8d32 100644 --- 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/packages/design-system-component-library-yeahyeahyeah/stories/navigation/Navigation.stories.tsx b/packages/design-system-component-library-yeahyeahyeah/stories/navigation/Navigation.stories.tsx index a983366f..39485800 100644 --- a/packages/design-system-component-library-yeahyeahyeah/stories/navigation/Navigation.stories.tsx +++ b/packages/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 = (args) => { return !open ? ( - - - + + +
Logo
+ = (args) => { passHref={true} linkComponent={Link} /> - - - + + + ) : ( diff --git a/packages/design-system-component-library-yeahyeahyeah/stories/user/User.stories.tsx b/packages/design-system-component-library-yeahyeahyeah/stories/user/User.stories.tsx index 9b259b2f..0eec6cb0 100644 --- a/packages/design-system-component-library-yeahyeahyeah/stories/user/User.stories.tsx +++ b/packages/design-system-component-library-yeahyeahyeah/stories/user/User.stories.tsx @@ -3,6 +3,8 @@ import { ComponentStory, ComponentMeta } from '@storybook/react'; import { User } from '../../components/user/User'; import { action } from '@storybook/addon-actions'; import UserReadme from '../../docs/User.md'; +import { IconLink } from '../../index'; +import Link from 'next/link'; export default { title: 'User/User', @@ -14,29 +16,6 @@ export default { variant: { control: 'select', }, - username: { - control: 'object', - }, - timestamp: { - control: { - type: 'object', - }, - }, - location: { - control: { - type: 'object', - }, - }, - joined: { - control: { - type: 'object', - }, - }, - btn: { - control: { - type: 'object', - }, - }, avatar: { control: { type: 'object', @@ -51,33 +30,6 @@ export default { label: 'Display Name', variant: 'small', type: 'edit', - username: { - label: 'Username', - href: '', - fCallBack: action('username clicked'), - type: 'username', - }, - timestamp: { - label: 'Timestamp', - href: '', - fCallBack: action('timestamp clicked'), - type: 'timestamp', - }, - location: { - label: 'Location', - href: '', - fCallBack: action('location clicked'), - type: 'location', - }, - joined: { - label: 'Joined', - href: '', - fCallBack: action('joined clicked'), - type: 'joined', - }, - settings: { - fCallBack: action('settings clicked'), - }, avatar: { src: 'https://media.giphy.com/media/cfuL5gqFDreXxkWQ4o/giphy.gif', alt: 'Alter Tag', @@ -91,13 +43,16 @@ export default { }, } as ComponentMeta; -const Template: ComponentStory = (args) => ; +const Template: ComponentStory = (args) => ( + + + + +); export const UserStory = Template.bind({}); -UserStory.args = { - variant: 'recommended', -}; +UserStory.args = {}; UserStory.parameters = { docs: { diff --git a/packages/design-system-component-library-yeahyeahyeah/stories/user/UserRecommended.stories.tsx b/packages/design-system-component-library-yeahyeahyeah/stories/user/UserRecommended.stories.tsx new file mode 100644 index 00000000..5a9365ee --- /dev/null +++ b/packages/design-system-component-library-yeahyeahyeah/stories/user/UserRecommended.stories.tsx @@ -0,0 +1,46 @@ +import React from 'react'; +import { ComponentStory, ComponentMeta } from '@storybook/react'; +import { UserRecommended } from '../../components/user/UserRecommended'; +import UserReadme from '../../docs/User.md'; +import { IconLink } from '../../index'; +import Link from 'next/link'; + +export default { + title: 'User/User', + component: UserRecommended, + argTypes: { + label: { + control: 'text', + }, + }, + args: { + label: 'Display Name', + avatar: { + alt: 'Alter Tag', + onImageClick: () => console.log('image clicked'), + src: 'https://media.giphy.com/media/cfuL5gqFDreXxkWQ4o/giphy.gif', + }, + btn: { label: 'Follow', onClick: () => console.log('btn clicked') }, + }, +} as ComponentMeta; + +const Template: ComponentStory = (args) => ( + + + +); + +export const UserRecommendedStory = Template.bind({}); + +UserRecommendedStory.args = {}; + +UserRecommendedStory.parameters = { + docs: { + source: { type: 'dynamic' }, + description: { + component: UserReadme, + }, + }, +}; + +UserRecommendedStory.storyName = 'UserRecommended';