feat(client): add storybook layout decorator, add appbar placement fo…

…r mobile
Jozwiaczek · Mar 22, 2021 · 7d36870 · 7d36870
1 parent 3aee8d6
commit 7d36870
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 12 deletions.
diff --git a/packages/client/.storybook/decorators/LayoutDecorator.jsx b/packages/client/.storybook/decorators/LayoutDecorator.jsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const MockLayout = styled.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+const LayoutDecorator = (StoryFn) => (
+  <MockLayout>
+    <StoryFn />
+  </MockLayout>
+);
+
+export default LayoutDecorator;
diff --git a/packages/client/.storybook/decorators/index.js b/packages/client/.storybook/decorators/index.js
@@ -1,2 +1,3 @@
 export { default as ThemeDecorator } from './ThemeDecorator';
 export { default as I18nDecorator } from './I18nDecorator';
+export { default as LayoutDecorator } from './LayoutDecorator';
diff --git a/packages/client/.storybook/preview.js b/packages/client/.storybook/preview.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { ThemeDecorator, I18nDecorator } from './decorators';
+import { ThemeDecorator, I18nDecorator, LayoutDecorator } from './decorators';
 import { withTests } from '@storybook/addon-jest';
 
 import testResults from '../src/jest-test-results.json';
@@ -38,6 +38,7 @@ export const globalTypes = {
 };
 
 export const decorators = [
+  LayoutDecorator,
   ThemeDecorator,
   I18nDecorator,
   withTests({

diff --git a/packages/client/src/elements/AppBar/AppBar.styled.ts b/packages/client/src/elements/AppBar/AppBar.styled.ts
@@ -12,6 +12,8 @@ export const Wrapper = styled.div<{ orientation: TabsOrientation }>(
 );
 
 export const TabsWrapper = styled.div<{ orientation?: TabsOrientation }>`
+  position: fixed;
+  bottom: 0;
   width: 100%;
   height: 90px;
   background: ${({ theme }) => theme.palette.background.paper};

diff --git a/packages/client/src/elements/AppBar/index.tsx b/packages/client/src/elements/AppBar/index.tsx
@@ -8,7 +8,7 @@ import { TabsWrapper, Wrapper } from './AppBar.styled';
 
 const AppBar = () => {
   const [activeTab, setActiveTab] = useState<number>(1);
-  const { isTablet } = useMediaDevice();
+  const { isMobile } = useMediaDevice();
 
   const handleChange = (event: MouseEvent, newValue: number) => setActiveTab(newValue);
 
@@ -32,18 +32,26 @@ const AppBar = () => {
     },
   ];
 
-  const orientation = isTablet ? 'horizontal' : 'vertical';
+  const orientation = isMobile ? 'horizontal' : 'vertical';
 
   return (
     <Wrapper data-testid="appBar" orientation={orientation}>
+      <TabbedLayout.TabPanel value={activeTab} index={0}>
+        <p>History panel</p>
+      </TabbedLayout.TabPanel>
+
+      <TabbedLayout.TabPanel value={activeTab} index={1}>
+        <p>Dashboard</p>
+      </TabbedLayout.TabPanel>
+
       <TabsWrapper orientation={orientation}>
         <TabbedLayout.Tabs
           value={activeTab}
           onChange={handleChange}
           options={{
             indicatorPosition: 'top',
             indicatorWidth: 80,
-            variant: isTablet ? 'fullWidth' : 'default',
+            variant: isMobile ? 'fullWidth' : 'default',
             orientation,
           }}
         >
@@ -52,14 +60,6 @@ const AppBar = () => {
           ))}
         </TabbedLayout.Tabs>
       </TabsWrapper>
-
-      <TabbedLayout.TabPanel value={activeTab} index={0}>
-        <p>History panel</p>
-      </TabbedLayout.TabPanel>
-
-      <TabbedLayout.TabPanel value={activeTab} index={1}>
-        <p>Dashboard</p>
-      </TabbedLayout.TabPanel>
     </Wrapper>
   );
 };