From 0994db325a258a2822abdc8f44da062f368bba6a Mon Sep 17 00:00:00 2001
From: webrooster <roland.vonaesch@fhnw.ch>
Date: Sat, 7 Jan 2023 19:06:16 +0100
Subject: [PATCH] feat(Container): new component container

---
 .../components/Container.tsx                  | 28 ++++++++++
 .../components/Navigation.tsx                 | 53 ++++++++++---------
 .../stories/Container.stories.tsx             | 27 ++++++++++
 3 files changed, 84 insertions(+), 24 deletions(-)
 create mode 100644 packages/design-system-component-library-yeahyeahyeah/components/Container.tsx
 create mode 100644 packages/design-system-component-library-yeahyeahyeah/stories/Container.stories.tsx

diff --git a/packages/design-system-component-library-yeahyeahyeah/components/Container.tsx b/packages/design-system-component-library-yeahyeahyeah/components/Container.tsx
new file mode 100644
index 00000000..3e7890d7
--- /dev/null
+++ b/packages/design-system-component-library-yeahyeahyeah/components/Container.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import styled from 'styled-components';
+import tw from 'twin.macro';
+
+export interface IContainerProps {
+  children?: React.ReactNode;
+  layout: 'plain' | 'box';
+}
+
+export const Container: React.FC<IContainerProps> = (props: IContainerProps) => {
+  const { layout = 'colored', children } = props;
+
+  return <SectionWrapper layout={layout}>{children}</SectionWrapper>;
+};
+
+interface ContainerStyles {
+  layout: string;
+}
+
+const SectionWrapper = styled.section(({ layout }: ContainerStyles) => [
+  tw`
+    container
+    mx-4
+    sm:mx-auto
+  `,
+  layout === 'box' && tw`bg-slate-white rounded-lg py-8 mx-4`,
+  layout === 'plain' && tw`bg-none px-4 bg-violet-400`,
+]);
diff --git a/packages/design-system-component-library-yeahyeahyeah/components/Navigation.tsx b/packages/design-system-component-library-yeahyeahyeah/components/Navigation.tsx
index 784b46c6..f15030b3 100644
--- a/packages/design-system-component-library-yeahyeahyeah/components/Navigation.tsx
+++ b/packages/design-system-component-library-yeahyeahyeah/components/Navigation.tsx
@@ -2,7 +2,6 @@ import styled from 'styled-components';
 import tw from 'twin.macro';
 import { MumbleLogo, IMumbleLogoProps } from './branding/MumbleLogo';
 import { NaviButton, INaviButtonProps } from './buttons/NaviButton';
-
 export interface INavigationProps {
   logo: IMumbleLogoProps;
   avatar: INaviButtonProps;
@@ -45,34 +44,40 @@ export const Navigation: React.FC<INavigationProps> = ({
 }) => {
   return (
     <>
-      <NavigationStyles>
-        <Container>
-          <Column>
-            <MumbleLogo
-              title={logo.title}
-              href={logo.href}
-              variant="white"
-              alignment="horizontal"
-              fCallBack={logo.fCallBack}
-              isNavigation={true}
-            />
-            <Row>
-              <NaviButton variant={avatar.variant} label={avatar.label} fCallBack={avatar.fCallBack} src={avatar.src} />
-              <NaviButton
-                icon={settings.icon}
-                label={settings.label}
-                variant={settings.variant}
-                fCallBack={settings.fCallBack}
+      <HeaderStyles>
+        <NavigationStyles>
+          <Container>
+            <Column>
+              <MumbleLogo
+                title={logo.title}
+                href={logo.href}
+                variant="white"
+                alignment="horizontal"
+                fCallBack={logo.fCallBack}
+                isNavigation={true}
               />
-              <NaviButton icon={logout.icon} label={logout.label} variant={logout.variant} fCallBack={logout.fCallBack} />
-            </Row>
-          </Column>
-        </Container>
-      </NavigationStyles>
+              <Row>
+                <NaviButton variant={avatar.variant} label={avatar.label} fCallBack={avatar.fCallBack} src={avatar.src} />
+                <NaviButton
+                  icon={settings.icon}
+                  label={settings.label}
+                  variant={settings.variant}
+                  fCallBack={settings.fCallBack}
+                />
+                <NaviButton icon={logout.icon} label={logout.label} variant={logout.variant} fCallBack={logout.fCallBack} />
+              </Row>
+            </Column>
+          </Container>
+        </NavigationStyles>
+      </HeaderStyles>
     </>
   );
 };
 
+const HeaderStyles = tw.header`
+  w-full
+`;
+
 const Container = tw.div`
   flex
   flex-col
diff --git a/packages/design-system-component-library-yeahyeahyeah/stories/Container.stories.tsx b/packages/design-system-component-library-yeahyeahyeah/stories/Container.stories.tsx
new file mode 100644
index 00000000..b5f4181d
--- /dev/null
+++ b/packages/design-system-component-library-yeahyeahyeah/stories/Container.stories.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { Container } from '../components/Container';
+
+export default {
+  title: 'Wireframes/Container',
+  component: Container,
+  argTypes: {
+    layout: {
+      control: 'select',
+      table: {
+        defaultValue: {
+          summary: 'plain',
+        },
+      },
+    },
+  },
+  args: {
+    layout: 'box',
+  },
+} as ComponentMeta<typeof Container>;
+
+const Template: ComponentStory<typeof Container> = (args) => <Container {...args} />;
+
+export const ContainerStory = Template.bind({});
+
+ContainerStory.storyName = 'Container';