From a31a7d89ea3fa3941b6d1d04fe923e46935eac1e Mon Sep 17 00:00:00 2001 From: webrooster Date: Tue, 21 Feb 2023 20:26:00 +0100 Subject: [PATCH 01/10] feat(MumbleLogo): add logo --- .../components/image/MumbleLogo.tsx | 122 ++++++++++++++++++ .../components/image/index.ts | 1 + .../stories/image/MumbleLogo.stories.tsx | 41 ++++++ .../stories/navigation/Navigation.stories.tsx | 15 ++- 4 files changed, 177 insertions(+), 2 deletions(-) create mode 100644 packages/design-system-component-library-yeahyeahyeah/components/image/MumbleLogo.tsx create mode 100644 packages/design-system-component-library-yeahyeahyeah/stories/image/MumbleLogo.stories.tsx diff --git a/packages/design-system-component-library-yeahyeahyeah/components/image/MumbleLogo.tsx b/packages/design-system-component-library-yeahyeahyeah/components/image/MumbleLogo.tsx new file mode 100644 index 0000000..3f301a9 --- /dev/null +++ b/packages/design-system-component-library-yeahyeahyeah/components/image/MumbleLogo.tsx @@ -0,0 +1,122 @@ +import React, { useState } from 'react'; +import tw, { styled, TwStyle } from 'twin.macro'; +import { MumbleText, MumbleGradient, LogoMumble as Logo } from '../icon/index'; + +export interface MumbleLogoProps { + color: 'violet' | 'gradient' | 'white'; + alignment: 'horizontal' | 'vertical'; + isNavigation?: boolean; + onLogoClick?: () => void; +} + +export const MumbleLogo: React.FC = ({ + color = 'white', + alignment = 'horizontal', + isNavigation = true, + onLogoClick, +}) => { + const [hover, setHover] = useState(false); + + return ( + setHover(true)} + onMouseLeave={() => setHover(false)} + onClick={onLogoClick} + > + + + {color !== 'gradient' ? ( + + ) : ( + + )} + + ); +}; + +type IStyled = { + hover: 'true' | 'false'; + color: 'violet' | 'gradient' | 'white'; + alignment: 'horizontal' | 'vertical'; + navigation: 'true' | 'false'; +}; + +type IMumbleLogoStyledDiv = Pick; + +const MumbleLogoStyledDiv = styled.div(({ alignment }: IMumbleLogoStyledDiv) => [ + tw` + flex + justify-between + items-center + p-0 + cursor-pointer + w-[130px] + sm:w-auto + `, + alignment === 'vertical' && tw`flex-col`, + alignment === 'horizontal' && tw`flex-row`, +]); + +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: string) => { + 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: string) => { + 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/components/image/index.ts b/packages/design-system-component-library-yeahyeahyeah/components/image/index.ts index 34d542e..ad17302 100644 --- a/packages/design-system-component-library-yeahyeahyeah/components/image/index.ts +++ b/packages/design-system-component-library-yeahyeahyeah/components/image/index.ts @@ -1,2 +1,3 @@ export * from './Image'; export * from './ImageContainer'; +export * from './MumbleLogo'; diff --git a/packages/design-system-component-library-yeahyeahyeah/stories/image/MumbleLogo.stories.tsx b/packages/design-system-component-library-yeahyeahyeah/stories/image/MumbleLogo.stories.tsx new file mode 100644 index 0000000..0f5e7d1 --- /dev/null +++ b/packages/design-system-component-library-yeahyeahyeah/stories/image/MumbleLogo.stories.tsx @@ -0,0 +1,41 @@ +import { ComponentStory, ComponentMeta } from '@storybook/react'; +import { MumbleLogo } from '../../components/image/MumbleLogo'; +import React from 'react'; + +export default { + title: 'Medias/Logo', + component: MumbleLogo, + argTypes: { + alignment: { + control: 'select', + }, + color: { + control: 'select', + }, + isNavigation: { + control: 'boolean', + }, + onLogoClick: { + action: () => 'handleClick', + }, + }, + args: { + alignment: 'vertical', + color: 'violet', + isNavigation: false, + }, +} as ComponentMeta; + +const Template: ComponentStory = (args) => { + return ; +}; + +export const LogoVariants = Template; + +LogoVariants.parameters = { + docs: { + source: { type: 'dynamic' }, + }, +}; + +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 3948580..88cb772 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,16 @@ import React, { useState } from 'react'; import { ComponentStory, ComponentMeta } from '@storybook/react'; import NavigationReadme from '../../docs/Navigation.md'; -import { Avatar, NaviButton, Navigation, Modal, NavigationContainer, NavigationColumn, NavigationRow } from '../../index'; +import { + Avatar, + NaviButton, + Navigation, + Modal, + MumbleLogo, + NavigationContainer, + NavigationColumn, + NavigationRow, +} from '../../index'; import Link from 'next/link'; export default { @@ -22,7 +31,9 @@ const Template: ComponentStory = (args) => { -
Logo
+ + + Date: Tue, 21 Feb 2023 20:44:16 +0100 Subject: [PATCH 02/10] fix(MumbleLogo): add target --- .../stories/navigation/Navigation.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 88cb772..bdbba0d 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 @@ -31,7 +31,7 @@ const Template: ComponentStory = (args) => { - + From 93244b4a244bf48abf964b6b549d7b8e18d019d8 Mon Sep 17 00:00:00 2001 From: webrooster Date: Tue, 21 Feb 2023 20:57:12 +0100 Subject: [PATCH 03/10] fix(MumbleLogo): add/update docs --- .../docs/MumbleLogo.md | 42 +++++++++++++++++++ .../stories/image/MumbleLogo.stories.tsx | 6 ++- 2 files changed, 47 insertions(+), 1 deletion(-) create mode 100644 packages/design-system-component-library-yeahyeahyeah/docs/MumbleLogo.md diff --git a/packages/design-system-component-library-yeahyeahyeah/docs/MumbleLogo.md b/packages/design-system-component-library-yeahyeahyeah/docs/MumbleLogo.md new file mode 100644 index 0000000..c5e1ac8 --- /dev/null +++ b/packages/design-system-component-library-yeahyeahyeah/docs/MumbleLogo.md @@ -0,0 +1,42 @@ +![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.| +|isNavigation|A optimized size for MumbleNavigation.| +|onLogoClick|JS-Callback function.| + +## 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 + + {}} +/> + +``` + +### MumbleLogo *vertical*, *gradient* example. Can be integrated on *landingpages* +```js + + {}} +/> + +``` \ No newline at end of file diff --git a/packages/design-system-component-library-yeahyeahyeah/stories/image/MumbleLogo.stories.tsx b/packages/design-system-component-library-yeahyeahyeah/stories/image/MumbleLogo.stories.tsx index 0f5e7d1..a6a57b0 100644 --- a/packages/design-system-component-library-yeahyeahyeah/stories/image/MumbleLogo.stories.tsx +++ b/packages/design-system-component-library-yeahyeahyeah/stories/image/MumbleLogo.stories.tsx @@ -1,6 +1,7 @@ +import React from 'react'; import { ComponentStory, ComponentMeta } from '@storybook/react'; import { MumbleLogo } from '../../components/image/MumbleLogo'; -import React from 'react'; +import MumbleLogoReadme from '../../docs/MumbleLogo.md'; export default { title: 'Medias/Logo', @@ -35,6 +36,9 @@ export const LogoVariants = Template; LogoVariants.parameters = { docs: { source: { type: 'dynamic' }, + description: { + component: MumbleLogoReadme, + }, }, }; From a72b8b152325f65875327dfefa450b5ec53c4295 Mon Sep 17 00:00:00 2001 From: webrooster Date: Tue, 21 Feb 2023 21:46:40 +0100 Subject: [PATCH 04/10] fix(Navi): update navigation --- packages/app/pages/includes/navi.tsx | 79 ++++++++++++++++++---------- 1 file changed, 50 insertions(+), 29 deletions(-) diff --git a/packages/app/pages/includes/navi.tsx b/packages/app/pages/includes/navi.tsx index c290e86..2fb8cdd 100644 --- a/packages/app/pages/includes/navi.tsx +++ b/packages/app/pages/includes/navi.tsx @@ -1,6 +1,14 @@ import React from 'react'; import Link from 'next/link'; -import { Avatar, NaviButton, Navigation } from '@smartive-education/design-system-component-library-yeahyeahyeah'; +import { + Avatar, + MumbleLogo, + NaviButton, + Navigation, + NavigationContainer, + NavigationColumn, + NavigationRow, +} from '@smartive-education/design-system-component-library-yeahyeahyeah'; import { useRouter } from 'next/router'; export default function Navi() { @@ -21,34 +29,47 @@ export default function Navi() {
- - - - - + + + + + + + + + + + + + +
From 213d8e6550ef3bed35b12286e816317ebabdb18e Mon Sep 17 00:00:00 2001 From: webrooster Date: Tue, 21 Feb 2023 21:59:23 +0100 Subject: [PATCH 05/10] fix(Navigation): remove obsolete title --- packages/app/pages/includes/navi.tsx | 2 +- .../components/navigation/Navigation.tsx | 1 - .../stories/navigation/Navigation.stories.tsx | 3 +-- 3 files changed, 2 insertions(+), 4 deletions(-) diff --git a/packages/app/pages/includes/navi.tsx b/packages/app/pages/includes/navi.tsx index 2fb8cdd..88a2731 100644 --- a/packages/app/pages/includes/navi.tsx +++ b/packages/app/pages/includes/navi.tsx @@ -28,7 +28,7 @@ export default function Navi() { Hashtag
- + 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 e719c13..cd3411e 100644 --- a/packages/design-system-component-library-yeahyeahyeah/components/navigation/Navigation.tsx +++ b/packages/design-system-component-library-yeahyeahyeah/components/navigation/Navigation.tsx @@ -4,7 +4,6 @@ import tw from 'twin.macro'; import { NavigationContainer } from './NavigationStyles'; export type NavigationProps = { - title: 'Mumble Logo'; children?: React.ReactNode; }; 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 bdbba0d..fc3af27 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 @@ -17,7 +17,6 @@ export default { title: 'Navigation/Navigation', component: Navigation, parameters: { actions: { argTypesRegex: '^on.*' } }, - argTypes: {}, } as ComponentMeta; const Template: ComponentStory = (args) => { @@ -28,7 +27,7 @@ const Template: ComponentStory = (args) => { }; return !open ? ( - + From d2edd857fe0e5c32836ab5d6105cdf2646869f9e Mon Sep 17 00:00:00 2001 From: webrooster Date: Tue, 21 Feb 2023 22:14:42 +0100 Subject: [PATCH 06/10] fix(Navigation): add mbSpacing --- .../components/navigation/Navigation.tsx | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) 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 cd3411e..8df8062 100644 --- a/packages/design-system-component-library-yeahyeahyeah/components/navigation/Navigation.tsx +++ b/packages/design-system-component-library-yeahyeahyeah/components/navigation/Navigation.tsx @@ -1,15 +1,18 @@ import React from 'react'; import styled from 'styled-components'; import tw from 'twin.macro'; +import type { TmbSpacing } from '../../types/types'; +import { BottomSpacing } from '../../styles/Spacing'; import { NavigationContainer } from './NavigationStyles'; export type NavigationProps = { children?: React.ReactNode; + mbSpacing?: TmbSpacing; }; -export const Navigation = ({ children }: NavigationProps) => { +export const Navigation = ({ children, mbSpacing }: NavigationProps) => { return ( - + {children} @@ -17,9 +20,12 @@ export const Navigation = ({ children }: NavigationProps) => { ); }; -const HeaderStyles = tw.header` - w-full -`; +const HeaderStyles = styled.header(() => [ + tw` + w-full + `, + BottomSpacing, +]); const NavigationStyles = styled.nav(() => [ tw` From c65e62eed376e1a878eacbe046e4e14f28bcc30f Mon Sep 17 00:00:00 2001 From: webrooster Date: Tue, 21 Feb 2023 22:19:53 +0100 Subject: [PATCH 07/10] Update: navi styles --- packages/app/pages/includes/navi.tsx | 86 +++++++++---------- .../navigation/NavigationStyles.tsx | 4 +- 2 files changed, 45 insertions(+), 45 deletions(-) diff --git a/packages/app/pages/includes/navi.tsx b/packages/app/pages/includes/navi.tsx index 88a2731..cd584bc 100644 --- a/packages/app/pages/includes/navi.tsx +++ b/packages/app/pages/includes/navi.tsx @@ -27,51 +27,49 @@ export default function Navi() { Textbox Hashtag
-
- - - - - - - - - - - + + + + + + + + - - - - - -
+ + + + + + + ); } 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 b92f1da..958c392 100644 --- a/packages/design-system-component-library-yeahyeahyeah/components/navigation/NavigationStyles.tsx +++ b/packages/design-system-component-library-yeahyeahyeah/components/navigation/NavigationStyles.tsx @@ -7,7 +7,9 @@ export const NavigationContainer = tw.div` justify-center items-center container - px-16 + px-0 + pl-8 + sm:(px-16 pl-0) `; export const NavigationColumn = tw.div` From 95cbc382762b3d56b1de48d776e804529dabf81d Mon Sep 17 00:00:00 2001 From: webrooster Date: Wed, 22 Feb 2023 09:13:43 +0100 Subject: [PATCH 08/10] MumbleLogo: add transient, fix boolean bug --- .../components/image/MumbleLogo.tsx | 93 +++++++++---------- 1 file changed, 44 insertions(+), 49 deletions(-) diff --git a/packages/design-system-component-library-yeahyeahyeah/components/image/MumbleLogo.tsx b/packages/design-system-component-library-yeahyeahyeah/components/image/MumbleLogo.tsx index 3f301a9..48d9e02 100644 --- a/packages/design-system-component-library-yeahyeahyeah/components/image/MumbleLogo.tsx +++ b/packages/design-system-component-library-yeahyeahyeah/components/image/MumbleLogo.tsx @@ -2,53 +2,42 @@ import React, { useState } from 'react'; import tw, { styled, TwStyle } from 'twin.macro'; import { MumbleText, MumbleGradient, LogoMumble as Logo } from '../icon/index'; -export interface MumbleLogoProps { +export interface IMumbleLogoProps { + title: string; color: 'violet' | 'gradient' | 'white'; alignment: 'horizontal' | 'vertical'; - isNavigation?: boolean; onLogoClick?: () => void; + isNavigation?: boolean; } -export const MumbleLogo: React.FC = ({ +export const MumbleLogo: React.FC = ({ color = 'white', alignment = 'horizontal', - isNavigation = true, onLogoClick, + isNavigation = true, }) => { const [hover, setHover] = useState(false); return ( - setHover(true)} - onMouseLeave={() => setHover(false)} - onClick={onLogoClick} - > - - - {color !== 'gradient' ? ( - - ) : ( - - )} - + setHover(true)} onMouseLeave={() => setHover(false)}> + + + + {color !== 'gradient' ? ( + + ) : ( + + )} + + ); }; type IStyled = { - hover: 'true' | 'false'; + $hover: boolean; + $navigation: boolean; color: 'violet' | 'gradient' | 'white'; alignment: 'horizontal' | 'vertical'; - navigation: 'true' | 'false'; }; type IMumbleLogoStyledDiv = Pick; @@ -67,30 +56,36 @@ const MumbleLogoStyledDiv = styled.div(({ alignment }: IMumbleLogoStyledDiv) => alignment === 'horizontal' && tw`flex-row`, ]); -type IStyledLogoMumble = Pick; +const MumbleLogoStyledLink = styled.a(() => [ + tw` + cursor-pointer + `, +]); + +type IStyledLogoMumble = Pick; -const StyledLogoMumble = styled(Logo)(({ color, hover, navigation }: IStyledLogoMumble) => [ +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), + $navigation === true ? tw`w-48 h-48` : tw`w-64 h-64 `, + IconColor(color, $hover), ]); -type IStyledMumbleText = Pick; +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), +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; +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 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: string) => { +const IconColor = (color: string, $hover: boolean) => { let hoverColor: TwStyle; let defaultColor: TwStyle; @@ -98,25 +93,25 @@ const IconColor = (color: string, hover: string) => { case 'violet': defaultColor = tw`fill-violet-600`; hoverColor = tw`fill-slate-white`; - return hover === 'true' ? hoverColor : defaultColor; + return $hover === true ? hoverColor : defaultColor; case 'gradient': defaultColor = tw`fill-violet-600`; hoverColor = tw`fill-slate-white`; - return hover === 'true' ? hoverColor : defaultColor; + return $hover === true ? hoverColor : defaultColor; case 'white': defaultColor = tw`fill-slate-white`; hoverColor = tw`fill-slate-300`; - return hover === 'true' ? hoverColor : defaultColor; + return $hover === true ? hoverColor : defaultColor; } return null; }; -const TextSvgStyles = (alignment: string, navigation: string) => { +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); + 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 $navigation === true ? (tw`mt-8` as TwStyle) : (tw`mt-16` as TwStyle); } return null; }; From ef8576c99a2e2d349a1ead9c5cb1deb453591957 Mon Sep 17 00:00:00 2001 From: webrooster Date: Wed, 22 Feb 2023 09:19:56 +0100 Subject: [PATCH 09/10] MumbleLogo: remove link --- .../components/image/MumbleLogo.tsx | 32 ++++++++----------- 1 file changed, 14 insertions(+), 18 deletions(-) diff --git a/packages/design-system-component-library-yeahyeahyeah/components/image/MumbleLogo.tsx b/packages/design-system-component-library-yeahyeahyeah/components/image/MumbleLogo.tsx index 48d9e02..b175f4d 100644 --- a/packages/design-system-component-library-yeahyeahyeah/components/image/MumbleLogo.tsx +++ b/packages/design-system-component-library-yeahyeahyeah/components/image/MumbleLogo.tsx @@ -3,7 +3,6 @@ import tw, { styled, TwStyle } from 'twin.macro'; import { MumbleText, MumbleGradient, LogoMumble as Logo } from '../icon/index'; export interface IMumbleLogoProps { - title: string; color: 'violet' | 'gradient' | 'white'; alignment: 'horizontal' | 'vertical'; onLogoClick?: () => void; @@ -19,17 +18,20 @@ export const MumbleLogo: React.FC = ({ const [hover, setHover] = useState(false); return ( - setHover(true)} onMouseLeave={() => setHover(false)}> - - - - {color !== 'gradient' ? ( - - ) : ( - - )} - - + setHover(true)} + onMouseLeave={() => setHover(false)} + > + + + {color !== 'gradient' ? ( + + ) : ( + + )} + ); }; @@ -56,12 +58,6 @@ const MumbleLogoStyledDiv = styled.div(({ alignment }: IMumbleLogoStyledDiv) => alignment === 'horizontal' && tw`flex-row`, ]); -const MumbleLogoStyledLink = styled.a(() => [ - tw` - cursor-pointer - `, -]); - type IStyledLogoMumble = Pick; const StyledLogoMumble = styled(Logo)(({ color, $hover, $navigation }: IStyledLogoMumble) => [ From 7d9b9fe0506679332ff774333e73a14798ce38cb Mon Sep 17 00:00:00 2001 From: Thomas Schallert Date: Wed, 22 Feb 2023 09:57:32 +0100 Subject: [PATCH 10/10] fix: remove NavigationColumn cause its used inside the component --- packages/app/pages/includes/navi.tsx | 79 +++++++++++++--------------- 1 file changed, 36 insertions(+), 43 deletions(-) diff --git a/packages/app/pages/includes/navi.tsx b/packages/app/pages/includes/navi.tsx index cd584bc..9845458 100644 --- a/packages/app/pages/includes/navi.tsx +++ b/packages/app/pages/includes/navi.tsx @@ -5,7 +5,6 @@ import { MumbleLogo, NaviButton, Navigation, - NavigationContainer, NavigationColumn, NavigationRow, } from '@smartive-education/design-system-component-library-yeahyeahyeah'; @@ -27,48 +26,42 @@ export default function Navi() { Textbox Hashtag - - - - - - - - - - - - - - - + + + + + + + + + + + + + );