fix(MumbleLogo): refactoring

ost-cas-fee-adv-22-23 · Feb 21, 2023 · 4e16d24 · 4e16d24
1 parent d37f6c1
commit 4e16d24
Show file tree

Hide file tree

Showing 11 changed files with 71 additions and 211 deletions.
diff --git 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() {
         <Link href="./hashtag">Hashtag</Link>
       </div>
       <div tw="w-full mb-32">
-        <Navigation logo={MumbleLogo} title="Mumble Logo" onLogoClick={handleLogoClick}>
+        <Navigation title="Mumble Logo">
           <NaviButton
             label="Profile"
             variant="profile"

diff --git a/packages/design-system-component-library-yeahyeahyeah/components/branding/MumbleLogo.tsx b/packages/design-system-component-library-yeahyeahyeah/components/branding/MumbleLogo.tsx
diff --git a/packages/design-system-component-library-yeahyeahyeah/components/branding/index.ts b/packages/design-system-component-library-yeahyeahyeah/components/branding/index.ts
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,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<T> = {
+export type NavigationProps = {
   title: 'Mumble Logo';
-  onLogoClick?: () => void;
-  logo: FC<T>;
   children?: React.ReactNode;
 };
 
-export const Navigation = ({ title, logo: Logo, children, onLogoClick }: NavigationProps<any>) => {
+export const Navigation = ({ children }: NavigationProps) => {
   return (
     <HeaderStyles>
       <NavigationStyles>
-        <Container>
-          <Column>
-            <Logo title={title} onLogoClick={onLogoClick} />
-            <Row>{children}</Row>
-          </Column>
-        </Container>
+        <Container>{children}</Container>
       </NavigationStyles>
     </HeaderStyles>
   );
@@ -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/...s/design-system-component-library-yeahyeahyeah/components/navigation/NavigationStyles.tsx b/...s/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
diff --git 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
@@ -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';
 
 <Meta title="Welcome" />
 

diff --git 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/...ages/design-system-component-library-yeahyeahyeah/stories/branding/MumbleLogo.stories.tsx b/...ages/design-system-component-library-yeahyeahyeah/stories/branding/MumbleLogo.stories.tsx
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,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<typeof Navigation> = (args) => {
   };
 
   return !open ? (
-    <Navigation {...args} logo={MumbleLogo} title="Mumble Logo">
-      <NaviButton
-        label="Profile"
-        variant="profile"
-        href="/profilepage"
-        legacyBehavior={true}
-        passHref={true}
-        linkComponent={Link}
-      >
-        <Avatar alt="Small Avatar" src="https://media.giphy.com/media/cfuL5gqFDreXxkWQ4o/giphy.gif" variant="small" />
-      </NaviButton>
-      <NaviButton
-        label="Settings"
-        variant="default"
-        icon="settings"
-        href="/"
-        legacyBehavior={true}
-        passHref={true}
-        linkComponent={Link}
-      />
-      <NaviButton
-        label="Logout"
-        variant="default"
-        icon="logout"
-        href="/detailview"
-        legacyBehavior={true}
-        passHref={true}
-        linkComponent={Link}
-      />
+    <Navigation {...args} title="Mumble Logo">
+      <Container layout="plain">
+        <Column>
+          <Row>
+            <NaviButton
+              label="Profile"
+              variant="profile"
+              href="/profilepage"
+              legacyBehavior={true}
+              passHref={true}
+              linkComponent={Link}
+            >
+              <Avatar alt="Small Avatar" src="https://media.giphy.com/media/cfuL5gqFDreXxkWQ4o/giphy.gif" variant="small" />
+            </NaviButton>
+            <NaviButton
+              label="Settings"
+              variant="default"
+              icon="settings"
+              href="/"
+              legacyBehavior={true}
+              passHref={true}
+              linkComponent={Link}
+            />
+            <NaviButton
+              label="Logout"
+              variant="default"
+              icon="logout"
+              href="/detailview"
+              legacyBehavior={true}
+              passHref={true}
+              linkComponent={Link}
+            />
+          </Row>
+        </Column>
+      </Container>
     </Navigation>
   ) : (
     <Modal label="Settings" isOpen={open} onClose={handleClose}>
@@ -58,7 +62,7 @@ const Template: ComponentStory<typeof Navigation> = (args) => {
   );
 };
 
-export const NavigationStory = Template.bind({});
+export const NavigationStory = Template;
 
 NavigationStory.parameters = {
   docs: {