From 80313b1a5f5d71fd5e6af6496959a5568d9f6980 Mon Sep 17 00:00:00 2001 From: webrooster Date: Tue, 21 Feb 2023 09:29:56 +0100 Subject: [PATCH 1/3] fix(MumbleLogo): refactoring WIP --- .../components/branding/MumbleLogo.tsx | 137 +++--------------- .../stories/branding/MumbleLogo.stories.tsx | 29 ++-- 2 files changed, 41 insertions(+), 125 deletions(-) diff --git a/packages/design-system-component-library-yeahyeahyeah/components/branding/MumbleLogo.tsx b/packages/design-system-component-library-yeahyeahyeah/components/branding/MumbleLogo.tsx index 5dcebece..61453e3a 100644 --- a/packages/design-system-component-library-yeahyeahyeah/components/branding/MumbleLogo.tsx +++ b/packages/design-system-component-library-yeahyeahyeah/components/branding/MumbleLogo.tsx @@ -1,124 +1,35 @@ -import React, { useState } from 'react'; -import tw, { styled, TwStyle } from 'twin.macro'; -import { MumbleText, MumbleGradient, LogoMumble as Logo } from '../icon/index'; +import React, { LinkHTMLAttributes } from 'react'; +import tw, { styled } from 'twin.macro'; +import { Link, LinkProps } from '../link/Link'; -export interface IMumbleLogoProps { +export type MumbleLogoProps = { title: string; - color: 'violet' | 'gradient' | 'white'; - alignment: 'horizontal' | 'vertical'; + src: string; + alt: string; onLogoClick?: () => void; - isNavigation?: boolean; -} - -export const MumbleLogo: React.FC = ({ +} & LinkProps; + +export const MumbleLogo = < + T extends { + rel?: string; + target?: string; + } = LinkHTMLAttributes +>({ title = 'Mumble Logo', - color = 'white', - alignment = 'horizontal', - onLogoClick, - isNavigation = true, -}) => { - const [hover, setHover] = useState(false); - + src = '', + alt = 'asdfasdfsaf', + newTab = false, + ...props +}: MumbleLogoProps) => { return ( - setHover(true)} - onMouseLeave={() => setHover(false)} - > - - - - {color !== 'gradient' ? ( - - ) : ( - - )} - - + + {alt} + ); }; -type IStyled = { - hover: boolean; - navigation: boolean; - color: 'violet' | 'gradient' | 'white'; - alignment: 'horizontal' | 'vertical'; -}; - -type IMumbleLogoStyledDiv = Pick; - -const MumbleLogoStyledDiv = styled.div(({ alignment }: IMumbleLogoStyledDiv) => [ +const Image = styled.img(() => [ tw` - flex - justify-between - items-center - p-0 - cursor-pointer - w-[130px] - sm:w-auto + w-full `, - alignment === 'vertical' && tw`flex-col`, - alignment === 'horizontal' && tw`flex-row`, -]); - -const MumbleLogoStyledLink = styled.a(() => [ - tw` - cursor-pointer - `, -]); - -type IStyledLogoMumble = Pick; - -const StyledLogoMumble = styled(Logo)(({ color, hover, navigation }: IStyledLogoMumble) => [ - tw`fill-violet-600`, - navigation === true ? tw`w-48 h-48` : tw`w-64 h-64 `, - IconColor(color, hover), -]); - -type IStyledMumbleText = Pick; - -const StyledMumbleText = styled(MumbleText)(({ alignment, navigation, color, hover }: IStyledMumbleText) => [ - navigation === true ? tw`h-[30px] w-[154px]` : tw`h-[48px] w-[246px]`, - TextSvgStyles(alignment, navigation), - IconColor(color, hover), -]); - -type IStyledMumbleGradient = Pick; - -const StyledMumbleGradient = styled(MumbleGradient)(({ alignment, navigation }: IStyledMumbleGradient) => [ - navigation === true ? tw`h-[30px] w-[154px]` : tw`h-[48px] w-[246px]`, - TextSvgStyles(alignment, navigation), ]); - -const IconColor = (color: string, hover: boolean) => { - let hoverColor: TwStyle; - let defaultColor: TwStyle; - - switch (color) { - case 'violet': - defaultColor = tw`fill-violet-600`; - hoverColor = tw`fill-slate-white`; - return hover === true ? hoverColor : defaultColor; - case 'gradient': - defaultColor = tw`fill-violet-600`; - hoverColor = tw`fill-slate-white`; - return hover === true ? hoverColor : defaultColor; - case 'white': - defaultColor = tw`fill-slate-white`; - hoverColor = tw`fill-slate-300`; - return hover === true ? hoverColor : defaultColor; - } - return null; -}; - -const TextSvgStyles = (alignment: string, navigation: boolean) => { - switch (alignment) { - case 'horizontal': - return navigation === true ? (tw`ml-8 sm:ml-16` as TwStyle) : (tw`ml-8 sm:ml-16 ` as TwStyle); - case 'vertical': - return navigation === true ? (tw`mt-8` as TwStyle) : (tw`mt-16` as TwStyle); - } - return null; -}; diff --git a/packages/design-system-component-library-yeahyeahyeah/stories/branding/MumbleLogo.stories.tsx b/packages/design-system-component-library-yeahyeahyeah/stories/branding/MumbleLogo.stories.tsx index fcd3f6ea..3187e8d0 100644 --- a/packages/design-system-component-library-yeahyeahyeah/stories/branding/MumbleLogo.stories.tsx +++ b/packages/design-system-component-library-yeahyeahyeah/stories/branding/MumbleLogo.stories.tsx @@ -13,25 +13,30 @@ export default { href: { control: 'text', }, - alignment: { - control: 'select', + src: { + control: 'text', }, - color: { - control: 'select', + alt: { + control: 'text', }, - fCallBack: { - action: () => 'handleClick', + newTab: { + control: false, + table: { + disable: true, + }, }, - isNavigation: { - control: 'boolean', + linkComponent: { + control: false, + table: { + disable: true, + }, }, }, args: { title: 'Homepage', - href: '#', - alignment: 'vertical', - color: 'violet', - isNavigation: false, + href: '/', + src: 'https://raw.githubusercontent.com/smartive-education/design-system-component-library-yeahyeahyeah/master/packages/design-system-component-library-yeahyeahyeah/stories/assets/mumble-logo.svg', + alt: 'Logo description', }, } as ComponentMeta; From 43c984f0fe7a0d507cc320fc2b918e3d17716dba Mon Sep 17 00:00:00 2001 From: webrooster Date: Tue, 21 Feb 2023 11:09:40 +0100 Subject: [PATCH 2/3] fix(MumbleLogo): add image comp --- .../components/branding/MumbleLogo.tsx | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/packages/design-system-component-library-yeahyeahyeah/components/branding/MumbleLogo.tsx b/packages/design-system-component-library-yeahyeahyeah/components/branding/MumbleLogo.tsx index 61453e3a..b483465c 100644 --- a/packages/design-system-component-library-yeahyeahyeah/components/branding/MumbleLogo.tsx +++ b/packages/design-system-component-library-yeahyeahyeah/components/branding/MumbleLogo.tsx @@ -1,6 +1,7 @@ import React, { LinkHTMLAttributes } from 'react'; import tw, { styled } from 'twin.macro'; import { Link, LinkProps } from '../link/Link'; +import { Image, ImageProps } from '../image/Image'; export type MumbleLogoProps = { title: string; @@ -23,13 +24,11 @@ export const MumbleLogo = < }: MumbleLogoProps) => { return ( - {alt} + {alt} ); }; -const Image = styled.img(() => [ - tw` - w-full - `, -]); +const ImageStyles = { + img: tw`w-full h-auto`, +}; From 4e16d248942e4f0d4b7bf56f9e9871d2daf51b45 Mon Sep 17 00:00:00 2001 From: webrooster Date: Tue, 21 Feb 2023 11:59:34 +0100 Subject: [PATCH 3/3] fix(MumbleLogo): refactoring --- packages/app/pages/includes/navi.tsx | 9 +-- .../components/branding/MumbleLogo.tsx | 34 --------- .../components/branding/index.ts | 1 - .../components/navigation/Navigation.tsx | 32 ++------- .../navigation/NavigationStyles.tsx | 28 ++++++++ .../docs/MumbleLogo.md | 47 ------------- .../docs/Navigation.md | 1 - .../docs/Welcome.stories.mdx | 1 - .../index.ts | 1 - .../stories/branding/MumbleLogo.stories.tsx | 58 --------------- .../stories/navigation/Navigation.stories.tsx | 70 ++++++++++--------- 11 files changed, 71 insertions(+), 211 deletions(-) delete mode 100644 packages/design-system-component-library-yeahyeahyeah/components/branding/MumbleLogo.tsx delete mode 100644 packages/design-system-component-library-yeahyeahyeah/components/branding/index.ts create mode 100644 packages/design-system-component-library-yeahyeahyeah/components/navigation/NavigationStyles.tsx delete mode 100644 packages/design-system-component-library-yeahyeahyeah/docs/MumbleLogo.md delete mode 100644 packages/design-system-component-library-yeahyeahyeah/stories/branding/MumbleLogo.stories.tsx diff --git a/packages/app/pages/includes/navi.tsx b/packages/app/pages/includes/navi.tsx index 0cf72980..c290e868 100644 --- a/packages/app/pages/includes/navi.tsx +++ b/packages/app/pages/includes/navi.tsx @@ -1,11 +1,6 @@ import React from 'react'; import Link from 'next/link'; -import { - Avatar, - NaviButton, - Navigation, - MumbleLogo, -} from '@smartive-education/design-system-component-library-yeahyeahyeah'; +import { Avatar, NaviButton, Navigation } from '@smartive-education/design-system-component-library-yeahyeahyeah'; import { useRouter } from 'next/router'; export default function Navi() { @@ -25,7 +20,7 @@ export default function Navi() { Hashtag
- + = { - title: string; - src: string; - alt: string; - onLogoClick?: () => void; -} & LinkProps; - -export const MumbleLogo = < - T extends { - rel?: string; - target?: string; - } = LinkHTMLAttributes ->({ - title = 'Mumble Logo', - src = '', - alt = 'asdfasdfsaf', - newTab = false, - ...props -}: MumbleLogoProps) => { - return ( - - {alt} - - ); -}; - -const ImageStyles = { - img: tw`w-full h-auto`, -}; diff --git a/packages/design-system-component-library-yeahyeahyeah/components/branding/index.ts b/packages/design-system-component-library-yeahyeahyeah/components/branding/index.ts deleted file mode 100644 index 90e4bac1..00000000 --- a/packages/design-system-component-library-yeahyeahyeah/components/branding/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './MumbleLogo'; 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 d33a97e1..7a7b371c 100644 --- a/packages/design-system-component-library-yeahyeahyeah/components/navigation/Navigation.tsx +++ b/packages/design-system-component-library-yeahyeahyeah/components/navigation/Navigation.tsx @@ -1,24 +1,17 @@ -import React, { FC } from 'react'; +import React from 'react'; import styled from 'styled-components'; import tw from 'twin.macro'; -export type NavigationProps = { +export type NavigationProps = { title: 'Mumble Logo'; - onLogoClick?: () => void; - logo: FC; children?: React.ReactNode; }; -export const Navigation = ({ title, logo: Logo, children, onLogoClick }: NavigationProps) => { +export const Navigation = ({ children }: NavigationProps) => { return ( - - - - {children} - - + {children} ); @@ -38,23 +31,6 @@ const Container = tw.div` px-16 `; -const Column = tw.div` - flex - justify-between - items-center - w-full -`; - -const Row = tw.div` - flex - flex-row - justify-between - items-center - - gap-0 - sm:gap-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 new file mode 100644 index 00000000..24e1a38d --- /dev/null +++ b/packages/design-system-component-library-yeahyeahyeah/components/navigation/NavigationStyles.tsx @@ -0,0 +1,28 @@ +import tw from 'twin.macro'; + +export const Container = tw.div` + flex + flex-col + sm:flex-row + justify-center + items-center + container + px-16 +`; + +export const Column = tw.div` + flex + justify-between + items-center + w-full +`; + +export const Row = tw.div` + flex + flex-row + justify-between + items-center + + gap-0 + sm:gap-16 +`; diff --git a/packages/design-system-component-library-yeahyeahyeah/docs/MumbleLogo.md b/packages/design-system-component-library-yeahyeahyeah/docs/MumbleLogo.md deleted file mode 100644 index f70a2423..00000000 --- a/packages/design-system-component-library-yeahyeahyeah/docs/MumbleLogo.md +++ /dev/null @@ -1,47 +0,0 @@ -![GitHub release (latest SemVer)](https://img.shields.io/github/v/release/smartive-education/design-system-component-library-yeahyeahyeah) -# MumbleLogo -## MumbleLogo properties -| Property|Description| -|-|-| -|alignment|Choose *horizontal* for integration in *navbar*. Futher details see [Navigation](./?path=/docs/navigation-navigation--navigation-story)| -|color|*White* is the preferred color for *navbar* integration.| -|fCallBack|JS-Callback function.| -|href|Link to *homepage*. Relative or absolute path is possible.| -|title|Link title. Not visible. Only in DOM.| - -## Include MumbleLogo from the component library in your App - -```js -// index.tsx, index.js, index.jsx - -import { MumbleLogo } from "@smartive-education/design-system-component-library-yeahyeahyeah" - -``` - -### MumbleLogo *navigation* snippet -```js - - console.log('logo clicked')} - href="#" - title="Homepage" -/> - -``` - -### MumbleLogo *vertical*, *violet* example. For demonstration purpose only -```js - - console.log('logo clicked')} - href="#" - title="Homepage" -/> - -``` \ No newline at end of file diff --git a/packages/design-system-component-library-yeahyeahyeah/docs/Navigation.md b/packages/design-system-component-library-yeahyeahyeah/docs/Navigation.md index c54db564..3fbc9445 100644 --- a/packages/design-system-component-library-yeahyeahyeah/docs/Navigation.md +++ b/packages/design-system-component-library-yeahyeahyeah/docs/Navigation.md @@ -3,7 +3,6 @@ ## Navigation properties | Property|Description| |-|-| -|logo|Include **mumbleLogo**. See details on [MumbleLogo](./?path=/docs/medias-logo--logo-variants)| |avatar|Include **avatar**. See details on [Avatar](./?path=/docs/user--avatar-story). For **navigation** always choose **small** variant.| |settings|JS-Callback function. Example: **open** [Modal](./?path=/story/modal-modal--modal-story).| |logout|JS-Callback function. Close session.| diff --git a/packages/design-system-component-library-yeahyeahyeah/docs/Welcome.stories.mdx b/packages/design-system-component-library-yeahyeahyeah/docs/Welcome.stories.mdx index 2732d4ef..766f40ce 100644 --- a/packages/design-system-component-library-yeahyeahyeah/docs/Welcome.stories.mdx +++ b/packages/design-system-component-library-yeahyeahyeah/docs/Welcome.stories.mdx @@ -2,7 +2,6 @@ import tw from 'twin.macro'; import { Meta, ColorPalette, ColorItem } from '@storybook/addon-docs'; import { Heading } from '../components/typography/Heading.tsx'; import { Paragraph } from '../components/typography/Paragraph.tsx'; -import { MumbleLogo } from '../components/branding/MumbleLogo.tsx'; diff --git a/packages/design-system-component-library-yeahyeahyeah/index.ts b/packages/design-system-component-library-yeahyeahyeah/index.ts index 914ad2ec..881bc2ea 100644 --- a/packages/design-system-component-library-yeahyeahyeah/index.ts +++ b/packages/design-system-component-library-yeahyeahyeah/index.ts @@ -1,4 +1,3 @@ -export * from './components/branding'; export * from './components/button'; export * from './components/form'; export * from './components/icon'; diff --git a/packages/design-system-component-library-yeahyeahyeah/stories/branding/MumbleLogo.stories.tsx b/packages/design-system-component-library-yeahyeahyeah/stories/branding/MumbleLogo.stories.tsx deleted file mode 100644 index 3187e8d0..00000000 --- a/packages/design-system-component-library-yeahyeahyeah/stories/branding/MumbleLogo.stories.tsx +++ /dev/null @@ -1,58 +0,0 @@ -import { ComponentStory, ComponentMeta } from '@storybook/react'; -import { MumbleLogo } from '../../components/branding/MumbleLogo'; -import React from 'react'; -import MumbleLogoReadme from '../../docs/MumbleLogo.md'; - -export default { - title: 'Medias/Logo', - component: MumbleLogo, - argTypes: { - title: { - control: 'text', - }, - href: { - control: 'text', - }, - src: { - control: 'text', - }, - alt: { - control: 'text', - }, - newTab: { - control: false, - table: { - disable: true, - }, - }, - linkComponent: { - control: false, - table: { - disable: true, - }, - }, - }, - args: { - title: 'Homepage', - href: '/', - src: 'https://raw.githubusercontent.com/smartive-education/design-system-component-library-yeahyeahyeah/master/packages/design-system-component-library-yeahyeahyeah/stories/assets/mumble-logo.svg', - alt: 'Logo description', - }, -} as ComponentMeta; - -const Template: ComponentStory = (args) => { - return ; -}; - -export const LogoVariants = Template.bind({}); - -LogoVariants.parameters = { - docs: { - source: { type: 'dynamic' }, - description: { - component: MumbleLogoReadme, - }, - }, -}; - -LogoVariants.storyName = 'Logo'; 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 7d9f0ca9..a983366f 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,9 +1,7 @@ import React, { useState } from 'react'; import { ComponentStory, ComponentMeta } from '@storybook/react'; -import { Navigation } from '../../components/navigation/Navigation'; -import { Modal } from '../../components/modal/Modal'; import NavigationReadme from '../../docs/Navigation.md'; -import { Avatar, MumbleLogo, NaviButton } from '../../index'; +import { Avatar, Container, NaviButton, Navigation, Column, Row, Modal } from '../../index'; import Link from 'next/link'; export default { @@ -21,35 +19,41 @@ const Template: ComponentStory = (args) => { }; return !open ? ( - - - - - - + + + + + + + + + + + + ) : ( @@ -58,7 +62,7 @@ const Template: ComponentStory = (args) => { ); }; -export const NavigationStory = Template.bind({}); +export const NavigationStory = Template; NavigationStory.parameters = { docs: {