@dtdot/lego 0.14.8 → 0.14.9

package/build/components/ActionMessage/ActionMessage.stories.js

@@ -8,8 +8,8 @@ export const Standard = () => (React.createElement(React.Fragment, null,
 export const InPanel = () => (React.createElement(React.Fragment, null,
     React.createElement(Menu, null,
         React.createElement(Menu.Heading, null, "Action Message")),
-    React.createElement(Menu.Content, { panelSize: 'sm' },
-        React.createElement(Menu.Panel, null,
+    React.createElement(Menu.Content, null,
+        React.createElement(Menu.Panel, { panelSize: 'sm' },
             React.createElement(ActionMessage, { header: 'Create an asset', info: "It looks like you don't have any assets, create one to get started", action: 'Create', onAction: () => {
                     console.log('testing');
                 } })),

package/build/components/Menu/Menu.component.d.ts

@@ -4,10 +4,10 @@ export interface MenuProps {
 }
 declare const Menu: {
     ({ children }: MenuProps): JSX.Element;
-    Page: ({ children }: import("./_MenuPage.component").MenuPageProps) => JSX.Element;
+    Page: ({ children, scrollable }: import("./_MenuPage.component").MenuPageProps) => JSX.Element;
     Heading: ({ children }: import("./_MenuHeading.component").MenuHeadingProps) => JSX.Element;
     Item: ({ children, icon, active, onClick }: import("./_MenuItem.component").MenuItemProps) => JSX.Element;
-    Content: ({ panelSize, independentScroll, children }: import("./_MenuContent.component").MenuContentProps) => JSX.Element;
-    Panel: ({ children }: import("./_MenuPanel.component").MenuPanelProps) => JSX.Element;
+    Content: ({ children }: import("./_MenuContent.component").MenuContentProps) => JSX.Element;
+    Panel: ({ children, scrollable, panelSize }: import("./_MenuPanel.component").MenuPanelProps) => JSX.Element;
 };
 export default Menu;

package/build/components/Menu/Menu.stories.js

@@ -29,8 +29,8 @@ export const WithPanel = () => {
             React.createElement(Menu.Item, { icon: faHamburger, active: menuHelpers.isActiveItem([/\/eat/g], route), onClick: () => setRoute('/eat') }, "Eat"),
             React.createElement(Menu.Item, { icon: faCalendarAlt, active: menuHelpers.isActiveItem([/\/plan/g], route), onClick: () => setRoute('/plan') }, "Plan"),
             React.createElement(Menu.Item, { icon: faCogs, active: menuHelpers.isActiveItem([/\/manage/g], route), onClick: () => setRoute('/manage') }, "Manage")),
-        React.createElement(Menu.Content, { panelSize: 'md' },
-            React.createElement(Menu.Panel, null,
+        React.createElement(Menu.Content, null,
+            React.createElement(Menu.Panel, { panelSize: 'md' },
                 React.createElement(PaddedLayout, null,
                     React.createElement(ControlGroup, { variation: 'comfortable' },
                         React.createElement(Heading.SubHeading, null, "You"),
@@ -57,8 +57,8 @@ export const IndependentScrolling = () => {
             React.createElement(Menu.Item, { icon: faHamburger, active: menuHelpers.isActiveItem([/\/eat/g], route), onClick: () => setRoute('/eat') }, "Eat"),
             React.createElement(Menu.Item, { icon: faCalendarAlt, active: menuHelpers.isActiveItem([/\/plan/g], route), onClick: () => setRoute('/plan') }, "Plan"),
             React.createElement(Menu.Item, { icon: faCogs, active: menuHelpers.isActiveItem([/\/manage/g], route), onClick: () => setRoute('/manage') }, "Manage")),
-        React.createElement(Menu.Content, { panelSize: 'sm', independentScroll: true },
-            React.createElement(Menu.Panel, null,
+        React.createElement(Menu.Content, null,
+            React.createElement(Menu.Panel, { panelSize: 'sm', scrollable: true },
                 React.createElement(PaddedLayout, null,
                     React.createElement(Text, null,
                         "Suspendisse sit amet pellentesque nisi. Quisque eget velit sit amet mauris tincidunt dictum id et ex. Integer pulvinar tellus id viverra finibus. Cras dapibus diam a ante eleifend, ac ultrices ligula vestibulum. Nulla gravida ante nec mi tristique, vel elementum arcu volutpat. Nunc in lorem id ligula sodales tincidunt non ut ipsum. Fusce risus eros, dapibus sed lacus et, faucibus auctor purus. Nulla sed rhoncus ligula, at porttitor tellus. Aliquam vitae gravida quam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque quis tempus risus.",
@@ -68,7 +68,7 @@ export const IndependentScrolling = () => {
                         React.createElement("br", null),
                         React.createElement("br", null),
                         "Aenean vestibulum aliquam purus ut fringilla. Maecenas aliquet a nunc eget scelerisque. Mauris varius dignissim velit, vitae faucibus massa posuere sit amet. Nulla rutrum enim tellus, eget interdum massa ultricies sed. Proin pulvinar odio non lectus scelerisque, et varius nisl blandit. Donec nisl ante, ultricies eu volutpat ut, dapibus sed ex. Aliquam risus ex, porttitor vel commodo in, convallis laoreet dolor. Proin pretium neque pretium, laoreet dolor ultrices, vulputate sapien. Aenean rutrum lorem non mauris egestas accumsan."))),
-            React.createElement(Menu.Page, null,
+            React.createElement(Menu.Page, { scrollable: true },
                 React.createElement(ContentLayout, null,
                     React.createElement(ContentLayout.Content, { size: 'sm' },
                         React.createElement(Text, null,

package/build/components/Menu/_MenuContent.component.d.ts

@@ -1,10 +1,6 @@
 import React from 'react';
-export declare type PanelSize = 'sm' | 'md';
-export declare const getMaxSize: (size: PanelSize) => "tablet" | "desktop";
 export interface MenuContentProps {
     children: React.ReactNode;
-    panelSize?: PanelSize;
-    independentScroll?: boolean;
 }
-declare const MenuContent: ({ panelSize, independentScroll, children }: MenuContentProps) => JSX.Element;
+declare const MenuContent: ({ children }: MenuContentProps) => JSX.Element;
 export default MenuContent;

package/build/components/Menu/_MenuContent.component.js

@@ -1,16 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
 import responsive from '../../responsive/responsive';
-import MenuContentContext from './_MenuContent.context';
-export const getMaxSize = (size) => {
-    switch (size) {
-        case 'sm':
-            return 'tablet';
-        case 'md':
-        default:
-            return 'desktop';
-    }
-};
 const MenuContentOuter = styled.div `
   display: flex;
 
@@ -20,12 +10,11 @@ const MenuContentOuter = styled.div `
   min-height: 100vh;
   padding: 8px;
 
-  ${(props) => responsive.useStylesFor(getMaxSize(props.panelSize)).andSmaller(`
+  ${responsive.useStylesFor('tablet').andSmaller(`
     flex-direction: column;
   `)}
 `;
-const MenuContent = ({ panelSize = 'md', independentScroll = false, children }) => {
-    return (React.createElement(MenuContentContext.Provider, { value: { panelSize, independentScroll } },
-        React.createElement(MenuContentOuter, { panelSize: panelSize }, children)));
+const MenuContent = ({ children }) => {
+    return React.createElement(MenuContentOuter, null, children);
 };
 export default MenuContent;

package/build/components/Menu/_MenuPage.component.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 export interface MenuPageProps {
     children: React.ReactNode;
+    scrollable?: boolean;
 }
-declare const MenuPage: ({ children }: MenuPageProps) => JSX.Element;
+declare const MenuPage: ({ children, scrollable }: MenuPageProps) => JSX.Element;
 export default MenuPage;

package/build/components/Menu/_MenuPage.component.js

@@ -1,20 +1,18 @@
-import React, { useContext } from 'react';
+import React from 'react';
 import styled from 'styled-components';
 import responsive from '../../responsive/responsive';
-import { getMaxSize } from './_MenuContent.component';
-import MenuContentContext from './_MenuContent.context';
 const MenuPageInner = styled.div `
   background-color: ${(props) => props.theme.colours.background};
   border-radius: 2px;
   min-height: calc(100vh - 16px);
   flex-grow: 1;
 
-  ${(props) => responsive.useStylesFor(getMaxSize(props.panelSize)).andSmaller(`
+  ${responsive.useStylesFor('tablet').andSmaller(`
     min-height: unset;
   `)}
 
-  ${(props) => props.independentScroll &&
-    `
+  ${(props) => responsive.useStylesFor('desktop').andLarger(props.scrollable
+    ? `
     max-height: calc(100vh - 16px);
     overflow-y: auto;
 
@@ -30,10 +28,10 @@ const MenuPageInner = styled.div `
     &::-webkit-scrollbar-track {
       box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
     }
-  `}
+  `
+    : ``)}
 `;
-const MenuPage = ({ children }) => {
-    const { panelSize, independentScroll } = useContext(MenuContentContext);
-    return (React.createElement(MenuPageInner, { panelSize: panelSize, independentScroll: independentScroll }, children));
+const MenuPage = ({ children, scrollable }) => {
+    return React.createElement(MenuPageInner, { scrollable: scrollable }, children);
 };
 export default MenuPage;

package/build/components/Menu/_MenuPanel.component.d.ts

@@ -1,6 +1,9 @@
 import React from 'react';
+export declare type PanelSize = 'sm' | 'md';
 export interface MenuPanelProps {
     children: React.ReactNode;
+    scrollable?: boolean;
+    panelSize: PanelSize;
 }
-declare const MenuPanel: ({ children }: MenuPanelProps) => JSX.Element;
+declare const MenuPanel: ({ children, scrollable, panelSize }: MenuPanelProps) => JSX.Element;
 export default MenuPanel;

package/build/components/Menu/_MenuPanel.component.js

@@ -1,8 +1,6 @@
-import React, { useContext } from 'react';
+import React from 'react';
 import styled from 'styled-components';
 import responsive from '../../responsive/responsive';
-import { getMaxSize } from './_MenuContent.component';
-import MenuContentContext from './_MenuContent.context';
 const MenuPanelDiv = styled.div `
   background-color: ${(props) => props.theme.colours.background};
   border-radius: 2px;
@@ -27,7 +25,7 @@ const MenuPanelDiv = styled.div `
     }
 }}
 
-  ${(props) => responsive.useStylesFor(getMaxSize(props.panelSize)).andSmaller(`
+  ${responsive.useStylesFor('tablet').andSmaller(`
     max-width: unset;
     min-width: unset;
     min-height: unset;
@@ -36,9 +34,9 @@ const MenuPanelDiv = styled.div `
     margin-bottom: 8px;
   `)}
 
-  ${(props) => props.independentScroll &&
-    `
-    max-height: calc(100vh - 16px);
+${(props) => responsive.useStylesFor('desktop').andLarger(props.scrollable
+    ? `
+        max-height: calc(100vh - 16px);
     overflow-y: auto;
 
     &::-webkit-scrollbar {
@@ -53,10 +51,10 @@ const MenuPanelDiv = styled.div `
     &::-webkit-scrollbar-track {
       box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
     }
-  `}
+        `
+    : ``)}
 `;
-const MenuPanel = ({ children }) => {
-    const { panelSize, independentScroll } = useContext(MenuContentContext);
-    return (React.createElement(MenuPanelDiv, { panelSize: panelSize, independentScroll: independentScroll }, children));
+const MenuPanel = ({ children, scrollable, panelSize = 'sm' }) => {
+    return (React.createElement(MenuPanelDiv, { panelSize: panelSize, scrollable: scrollable }, children));
 };
 export default MenuPanel;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dtdot/lego",
-  "version": "0.14.8",
+  "version": "0.14.9",
   "description": "Some reusable components for building my applications",
   "main": "build/index.js",
   "scripts": {

package/build/components/Menu/_MenuContent.context.d.ts

@@ -1,7 +0,0 @@
-/// <reference types="react" />
-export interface MenuContentContextProps {
-    panelSize: 'sm' | 'md';
-    independentScroll: boolean;
-}
-declare const MenuContentContext: import("react").Context<MenuContentContextProps>;
-export default MenuContentContext;

package/build/components/Menu/_MenuContent.context.js

@@ -1,6 +0,0 @@
-import { createContext } from 'react';
-const MenuContentContext = createContext({
-    panelSize: 'md',
-    independentScroll: false,
-});
-export default MenuContentContext;