@dtdot/lego 0.14.11 → 0.15.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/build/components/ActionMessage/ActionMessage.stories.js +1 -2
  2. package/build/components/Menu/Menu.component.d.ts +3 -3
  3. package/build/components/Menu/Menu.component.js +63 -5
  4. package/build/components/Menu/Menu.stories.js +3 -6
  5. package/build/components/Menu/_MenuContent.component.js +12 -1
  6. package/build/components/Menu/_MenuHeading.component.d.ts +4 -1
  7. package/build/components/Menu/_MenuHeading.component.js +20 -2
  8. package/build/components/Notifications/Notifications.stories.js +3 -6
  9. package/package.json +1 -1
package/build/components/ActionMessage/ActionMessage.stories.js CHANGED
@@ -6,8 +6,7 @@ export const Standard = () => (React.createElement(React.Fragment, null,
6
6
  console.log('testing');
7
7
  } })));
8
8
  export const InPanel = () => (React.createElement(React.Fragment, null,
9
- React.createElement(Menu, null,
10
- React.createElement(Menu.Heading, null, "Action Message")),
9
+ React.createElement(Menu, { heading: 'Action Message' }),
11
10
  React.createElement(Menu.Content, null,
12
11
  React.createElement(Menu.Panel, { panelSize: 'sm' },
13
12
  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: () => {
package/build/components/Menu/Menu.component.d.ts CHANGED
@@ -1,11 +1,11 @@
1
1
  import React from 'react';
2
2
  export interface MenuProps {
3
- children: React.ReactNode;
3
+ children?: React.ReactNode;
4
+ heading: string;
4
5
  }
5
6
  declare const Menu: {
6
- ({ children }: MenuProps): JSX.Element;
7
+ ({ children, heading }: MenuProps): JSX.Element;
7
8
  Page: ({ children, scrollable }: import("./_MenuPage.component").MenuPageProps) => JSX.Element;
8
- Heading: ({ children }: import("./_MenuHeading.component").MenuHeadingProps) => JSX.Element;
9
9
  Item: ({ children, icon, active, onClick }: import("./_MenuItem.component").MenuItemProps) => JSX.Element;
10
10
  Content: ({ children }: import("./_MenuContent.component").MenuContentProps) => JSX.Element;
11
11
  Panel: ({ children, scrollable, panelSize }: import("./_MenuPanel.component").MenuPanelProps) => JSX.Element;
package/build/components/Menu/Menu.component.js CHANGED
@@ -1,11 +1,13 @@
1
- import React from 'react';
1
+ import { AnimatePresence, motion } from 'framer-motion';
2
+ import React, { useState } from 'react';
2
3
  import styled from 'styled-components';
4
+ import responsive from '../../responsive/responsive';
3
5
  import MenuContent from './_MenuContent.component';
4
6
  import MenuHeading from './_MenuHeading.component';
5
7
  import MenuItem from './_MenuItem.component';
6
8
  import MenuPage from './_MenuPage.component';
7
9
  import MenuPanel from './_MenuPanel.component';
8
- const MenuOuter = styled.div `
10
+ const MenuDesktop = styled.div `
9
11
  position: fixed;
10
12
  top: 0;
11
13
  left: 0;
@@ -14,12 +16,68 @@ const MenuOuter = styled.div `
14
16
  width: 250px;
15
17
  background-color: ${(props) => props.theme.colours.cardBackground};
16
18
  padding: 8px 0;
19
+
20
+ ${responsive.useStylesFor('tablet').andSmaller(`
21
+ display: none;
22
+ `)}
23
+ `;
24
+ const MenuMobile = styled.div `
25
+ position: fixed;
26
+ top: 0;
27
+ left: 0;
28
+
29
+ height: 64px;
30
+ width: 100%;
31
+ padding: 8px 0;
32
+
33
+ ${responsive.useStylesFor('desktop').andLarger(`
34
+ display: none;
35
+ `)}
36
+ `;
37
+ const MobileMenuNavContainer = styled(motion.div) `
38
+ position: fixed;
39
+ top: 0;
40
+ left: 0;
41
+ z-index: 1000;
42
+ height: 100vh;
43
+ width: 250px;
44
+
45
+ padding: 8px 0;
46
+
47
+ cursor: default;
48
+ background-color: ${(props) => props.theme.colours.cardBackground};
17
49
  `;
18
- const Menu = ({ children }) => {
19
- return React.createElement(MenuOuter, null, children);
50
+ const MenuShadow = styled(motion.div) `
51
+ position: fixed;
52
+ top: 0;
53
+ left: 0;
54
+ width: 100vw;
55
+ height: 100vh;
56
+ z-index: 999;
57
+ opacity: 0.7;
58
+
59
+ background-color: ${(props) => props.theme.colours.cardBackground};
60
+ `;
61
+ const AnimatedMenuShadow = ({ onClick }) => (React.createElement(MenuShadow, { onClick: onClick, key: 'mobile-menu-shadow', initial: { opacity: 0 }, animate: { opacity: 0.7 }, exit: { opacity: 0 }, transition: { type: 'spring', bounce: 0, duration: 0.6 } }));
62
+ const MobileMenuNav = ({ children }) => {
63
+ return (React.createElement(MobileMenuNavContainer, { key: 'mobile-menu-nav', initial: { x: -300 }, animate: { x: 0 }, exit: { x: -300 }, transition: { type: 'spring', bounce: 0, duration: 0.6 } }, children));
64
+ };
65
+ const Menu = ({ children, heading }) => {
66
+ const [open, setOpen] = useState(false);
67
+ return (React.createElement(React.Fragment, null,
68
+ React.createElement(MenuDesktop, null,
69
+ React.createElement(MenuHeading, null, heading),
70
+ children),
71
+ React.createElement(MenuMobile, null,
72
+ React.createElement(MenuHeading, { onOpen: () => setOpen(true) }, heading)),
73
+ React.createElement(AnimatePresence, null, open && (React.createElement(React.Fragment, null,
74
+ React.createElement(MobileMenuNav, null,
75
+ React.createElement(MenuHeading, { isOpen: open, onClose: () => setOpen(false) }, heading),
76
+ children),
77
+ React.createElement(AnimatedMenuShadow, { onClick: () => setOpen(false) }))))));
20
78
  };
21
79
  Menu.Page = MenuPage;
22
- Menu.Heading = MenuHeading;
80
+ // Menu.Heading = MenuHeading;
23
81
  Menu.Item = MenuItem;
24
82
  Menu.Content = MenuContent;
25
83
  Menu.Panel = MenuPanel;
package/build/components/Menu/Menu.stories.js CHANGED
@@ -4,8 +4,7 @@ import { faCalendarAlt, faCogs, faHamburger } from '@fortawesome/free-solid-svg-
4
4
  export const Standard = () => {
5
5
  const [route, setRoute] = useState('/eat');
6
6
  return (React.createElement(React.Fragment, null,
7
- React.createElement(Menu, null,
8
- React.createElement(Menu.Heading, null, "Something Tasty"),
7
+ React.createElement(Menu, { heading: 'Something Tasty' },
9
8
  React.createElement(Menu.Item, { icon: faHamburger, active: menuHelpers.isActiveItem([/\/eat/g], route), onClick: () => setRoute('/eat') }, "Eat"),
10
9
  React.createElement(Menu.Item, { icon: faCalendarAlt, active: menuHelpers.isActiveItem([/\/plan/g], route), onClick: () => setRoute('/plan') }, "Plan"),
11
10
  React.createElement(Menu.Item, { icon: faCogs, active: menuHelpers.isActiveItem([/\/manage/g], route), onClick: () => setRoute('/manage') }, "Manage")),
@@ -24,8 +23,7 @@ export const Standard = () => {
24
23
  export const WithPanel = () => {
25
24
  const [route, setRoute] = useState('/eat');
26
25
  return (React.createElement(React.Fragment, null,
27
- React.createElement(Menu, null,
28
- React.createElement(Menu.Heading, null, "Something Tasty"),
26
+ React.createElement(Menu, { heading: 'Something Tasty' },
29
27
  React.createElement(Menu.Item, { icon: faHamburger, active: menuHelpers.isActiveItem([/\/eat/g], route), onClick: () => setRoute('/eat') }, "Eat"),
30
28
  React.createElement(Menu.Item, { icon: faCalendarAlt, active: menuHelpers.isActiveItem([/\/plan/g], route), onClick: () => setRoute('/plan') }, "Plan"),
31
29
  React.createElement(Menu.Item, { icon: faCogs, active: menuHelpers.isActiveItem([/\/manage/g], route), onClick: () => setRoute('/manage') }, "Manage")),
@@ -52,8 +50,7 @@ export const WithPanel = () => {
52
50
  export const IndependentScrolling = () => {
53
51
  const [route, setRoute] = useState('/eat');
54
52
  return (React.createElement(React.Fragment, null,
55
- React.createElement(Menu, null,
56
- React.createElement(Menu.Heading, null, "Something Tasty"),
53
+ React.createElement(Menu, { heading: 'Something Tasty' },
57
54
  React.createElement(Menu.Item, { icon: faHamburger, active: menuHelpers.isActiveItem([/\/eat/g], route), onClick: () => setRoute('/eat') }, "Eat"),
58
55
  React.createElement(Menu.Item, { icon: faCalendarAlt, active: menuHelpers.isActiveItem([/\/plan/g], route), onClick: () => setRoute('/plan') }, "Plan"),
59
56
  React.createElement(Menu.Item, { icon: faCogs, active: menuHelpers.isActiveItem([/\/manage/g], route), onClick: () => setRoute('/manage') }, "Manage")),
package/build/components/Menu/_MenuContent.component.js CHANGED
@@ -12,9 +12,20 @@ const MenuContentOuter = styled.div `
12
12
 
13
13
  ${responsive.useStylesFor('tablet').andSmaller(`
14
14
  flex-direction: column;
15
+ margin-left: 0;
16
+ `)}
17
+ `;
18
+ const TopFiller = styled.div `
19
+ height: 64px;
20
+ background-color: ${(props) => props.theme.colours.cardBackground};
21
+
22
+ ${responsive.useStylesFor('desktop').andLarger(`
23
+ display: none;
15
24
  `)}
16
25
  `;
17
26
  const MenuContent = ({ children }) => {
18
- return React.createElement(MenuContentOuter, null, children);
27
+ return (React.createElement(MenuContentOuter, null,
28
+ React.createElement(TopFiller, null),
29
+ children));
19
30
  };
20
31
  export default MenuContent;
package/build/components/Menu/_MenuHeading.component.d.ts CHANGED
@@ -1,6 +1,9 @@
1
1
  import React from 'react';
2
2
  export interface MenuHeadingProps {
3
3
  children: React.ReactNode;
4
+ onOpen?: () => void;
5
+ onClose?: () => void;
6
+ isOpen?: boolean;
4
7
  }
5
- declare const MenuHeading: ({ children }: MenuHeadingProps) => JSX.Element;
8
+ declare const MenuHeading: ({ children, onOpen, onClose, isOpen }: MenuHeadingProps) => JSX.Element;
6
9
  export default MenuHeading;
package/build/components/Menu/_MenuHeading.component.js CHANGED
@@ -1,11 +1,15 @@
1
+ import { faBars } from '@fortawesome/free-solid-svg-icons';
2
+ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
1
3
  import React from 'react';
2
4
  import styled from 'styled-components';
5
+ import responsive from '../../responsive/responsive';
3
6
  const MenuHeadingDiv = styled.div `
4
7
  padding-right: 32px;
5
8
  margin-bottom: 16px;
6
9
 
7
10
  width: 100%;
8
11
  text-align: center;
12
+ max-width: 450px;
9
13
  `;
10
14
  const MenuHeadingInner = styled.div `
11
15
  background-color: ${(props) => props.theme.colours.primary.main};
@@ -22,6 +26,20 @@ const MenuHeadingInner = styled.div `
22
26
  color: ${(props) => props.theme.colours.primary.contrastText};
23
27
  font-size: 20px;
24
28
  `;
25
- const MenuHeading = ({ children }) => (React.createElement(MenuHeadingDiv, null,
26
- React.createElement(MenuHeadingInner, null, children)));
29
+ const MenuToggle = styled.div `
30
+ margin-right: 16px;
31
+ cursor: pointer;
32
+ color: ${(props) => props.theme.colours.primary.contrastText};
33
+ fill: ${(props) => props.theme.colours.primary.contrastText};
34
+
35
+ ${responsive.useStylesFor('desktop').andLarger(`
36
+ display: none;
37
+ `)}
38
+ `;
39
+ const MenuHeading = ({ children, onOpen, onClose, isOpen }) => (React.createElement(MenuHeadingDiv, null,
40
+ React.createElement(MenuHeadingInner, null,
41
+ isOpen ? (React.createElement(MenuToggle, { onClick: onClose },
42
+ React.createElement(FontAwesomeIcon, { icon: faBars }))) : (React.createElement(MenuToggle, { onClick: onOpen },
43
+ React.createElement(FontAwesomeIcon, { icon: faBars }))),
44
+ children)));
27
45
  export default MenuHeading;
package/build/components/Notifications/Notifications.stories.js CHANGED
@@ -16,8 +16,7 @@ export const Standard = () => {
16
16
  ];
17
17
  return (React.createElement(React.Fragment, null,
18
18
  React.createElement(Notifications, { notifications: notifications }),
19
- React.createElement(Menu, null,
20
- React.createElement(Menu.Heading, null, "Something Tasty")),
19
+ React.createElement(Menu, { heading: 'Something Tasty' }),
21
20
  React.createElement(Menu.Page, null,
22
21
  React.createElement(FocusLayout, null,
23
22
  React.createElement(Text, null, "Content...")))));
@@ -52,8 +51,7 @@ export const Interactive = () => {
52
51
  };
53
52
  return (React.createElement(React.Fragment, null,
54
53
  React.createElement(Notifications, { notifications: notifications }),
55
- React.createElement(Menu, null,
56
- React.createElement(Menu.Heading, null, "Something Tasty")),
54
+ React.createElement(Menu, { heading: 'Something Tasty' }),
57
55
  React.createElement(Menu.Page, null,
58
56
  React.createElement(FocusLayout, null,
59
57
  React.createElement(Button, { onClick: () => addNotification(successNotification) }, "Save user"),
@@ -79,8 +77,7 @@ export const OverModal = () => {
79
77
  ];
80
78
  return (React.createElement(React.Fragment, null,
81
79
  React.createElement(Notifications, { notifications: notifications }),
82
- React.createElement(Menu, null,
83
- React.createElement(Menu.Heading, null, "Something Tasty")),
80
+ React.createElement(Menu, { heading: 'Something Tasty' }),
84
81
  React.createElement(Menu.Page, null,
85
82
  React.createElement(Modal, { onClose: () => {
86
83
  console.log('close..');
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dtdot/lego",
3
- "version": "0.14.11",
3
+ "version": "0.15.1",
4
4
  "description": "Some reusable components for building my applications",
5
5
  "main": "build/index.js",
6
6
  "scripts": {