Merge pull request #228 from smartive-education/feature/MumbleLogo

Feature/mumble logo: refactoring

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"

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

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
+`;

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.|

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" />
 

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';