@dtdot/lego 0.17.8 → 0.17.12

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

@@ -6,12 +6,13 @@ export declare type DragVariant = Status;
 export interface InlineCardProps extends React.HTMLAttributes<HTMLDivElement> {
     children: React.ReactNode;
     size?: InlineCardSize;
+    value?: string;
     gestureLeftIcon?: IconProp;
     gestureLeftVariant?: DragVariant;
     onGestureLeft?: () => void;
 }
 declare const InlineCard: {
-    ({ children, size, onClick, gestureLeftIcon, gestureLeftVariant, onGestureLeft, }: InlineCardProps): JSX.Element;
+    ({ children, size, value, onClick, gestureLeftIcon, gestureLeftVariant, onGestureLeft, }: InlineCardProps): JSX.Element;
     Media: ({ children }: import("./_InlineCardMedia.component").InlineCardMediaProps) => JSX.Element;
     Content: ({ children, center }: import("./_InlineCardContent.component").InlineCardContentProps) => JSX.Element;
     Meta: ({ children }: import("./_InlineCardMeta.component").InlineCardMetaProps) => JSX.Element;

package/build/components/InlineCard/InlineCard.component.js

@@ -1,5 +1,5 @@
 import { motion, useMotionValue, useTransform } from 'framer-motion';
-import React, { useState } from 'react';
+import React, { useContext, useState } from 'react';
 import styled, { useTheme } from 'styled-components';
 import useMeasure from 'react-use-measure';
 import { responsive } from '../..';
@@ -8,6 +8,8 @@ import InlineCardContent from './_InlineCardContent.component';
 import InlineCardMedia from './_InlineCardMedia.component';
 import InlineCardMeta from './_InlineCardMeta.component';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import InlineCardSelectionContext from './_InlineCardSelection.context';
+import { faCheck } from '@fortawesome/free-solid-svg-icons';
 const CardWrapper = styled.div `
   position: relative;
   height: 64px;
@@ -75,7 +77,38 @@ const CardActionBackground = styled(motion.div) `
   left: 0;
   pointer-events: none;
 `;
-const InlineCard = ({ children, size, onClick, gestureLeftIcon, gestureLeftVariant, onGestureLeft, }) => {
+const SelectChecked = styled.div `
+  position: absolute;
+  top: 0;
+  right: 0;
+
+  width: 0;
+  height: 0;
+
+  border-bottom: 48px solid transparent;
+  border-right: 48px solid ${(props) => props.theme.colours.statusInfo.main};
+`;
+const SelectIconContainer = styled.div `
+  position: absolute;
+  left: 0;
+  right: 0;
+
+  width: 48px;
+  height: 48px;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  padding-left: 16px;
+  padding-bottom: 16px;
+
+  color: ${(props) => props.theme.colours.statusInfo.contrast};
+`;
+const InlineCard = ({ children, size, value, onClick, gestureLeftIcon, gestureLeftVariant, onGestureLeft, }) => {
+    const { value: selectedValues, onToggle } = useContext(InlineCardSelectionContext);
+    const isSelectable = !!onToggle;
+    const isSelected = selectedValues?.length && value && selectedValues.includes(value);
     const theme = useTheme();
     const x = useMotionValue(0);
     const [ref, bounds] = useMeasure();
@@ -90,9 +123,20 @@ const InlineCard = ({ children, size, onClick, gestureLeftIcon, gestureLeftVaria
             onGestureLeft();
         }
     };
+    const handleClick = (e) => {
+        if (onClick) {
+            onClick(e);
+        }
+        if (onToggle && value) {
+            onToggle(value);
+        }
+    };
     return (React.createElement(CardWrapper, { size: size },
         React.createElement(CardActionBackground, { style: { opacity, backgroundColor: gestureLeftTheme.main } }, gestureLeftIcon && (React.createElement(FontAwesomeIcon, { style: { fontSize: '20px', color: gestureLeftTheme.contrast }, icon: gestureLeftIcon }))),
-        React.createElement(CardOuter, { drag: onGestureLeft ? 'x' : undefined, onDragEnd: handleDragEnd, ref: ref, style: { x }, animate: { x: gestureLeftActivated ? -bounds.width : undefined, opacity: gestureLeftActivated ? 0 : undefined }, dragConstraints: { left: 0, right: 0 }, usePointer: !!onClick, onClick: onClick }, children)));
+        React.createElement(CardOuter, { drag: onGestureLeft ? 'x' : undefined, onDragEnd: handleDragEnd, ref: ref, style: { x }, animate: { x: gestureLeftActivated ? -bounds.width : undefined, opacity: gestureLeftActivated ? 0 : undefined }, dragConstraints: { left: 0, right: 0 }, usePointer: !!onClick || isSelectable, onClick: handleClick }, children),
+        isSelectable && isSelected ? (React.createElement(SelectChecked, null,
+            React.createElement(SelectIconContainer, null,
+                React.createElement(FontAwesomeIcon, { icon: faCheck })))) : null));
 };
 InlineCard.Media = InlineCardMedia;
 InlineCard.Content = InlineCardContent;

package/build/components/InlineCard/InlineCard.stories.d.ts

@@ -2,5 +2,6 @@
 import { Meta } from '@storybook/react/types-6-0';
 export declare const Standard: () => JSX.Element;
 export declare const WithDrag: () => JSX.Element;
+export declare const WithSelection: () => JSX.Element;
 declare const _default: Meta<import("@storybook/react/types-6-0").Args>;
 export default _default;

package/build/components/InlineCard/InlineCard.stories.js

@@ -1,6 +1,7 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { faCheckCircle, faExclamationTriangle, faInfoCircle, faTimes } from '@fortawesome/free-solid-svg-icons';
-import { Badge, InlineCard, InlineCardGroup } from '../..';
+import { Badge, FocusLayout, Form, InlineCard, InlineCardGroup } from '../..';
+import InlineCardSelection from './InlineCardSelection.component';
 export const Standard = () => (React.createElement(InlineCardGroup, null,
     React.createElement(InlineCard, null,
         React.createElement(InlineCard.Content, null, "Some content")),
@@ -14,7 +15,7 @@ export const Standard = () => (React.createElement(InlineCardGroup, null,
         React.createElement(InlineCard.Content, null, "Clickable card"),
         React.createElement(InlineCard.Meta, null,
             React.createElement(Badge, { variant: 'info' }, "Clickable")))));
-export const WithDrag = () => (React.createElement("div", { style: { maxWidth: '400px' } },
+export const WithDrag = () => (React.createElement(FocusLayout, null,
     React.createElement(InlineCardGroup, null,
         React.createElement(InlineCard, { onGestureLeft: () => console.log('Gesture left triggered'), gestureLeftIcon: faCheckCircle, gestureLeftVariant: 'success' },
             React.createElement(InlineCard.Content, null, "A success gesture")),
@@ -24,6 +25,27 @@ export const WithDrag = () => (React.createElement("div", { style: { maxWidth: '
             React.createElement(InlineCard.Content, null, "A warning gesture")),
         React.createElement(InlineCard, { onGestureLeft: () => console.log('Gesture left triggered'), gestureLeftIcon: faTimes, gestureLeftVariant: 'danger' },
             React.createElement(InlineCard.Content, null, "A danger gesture")))));
+export const WithSelection = () => {
+    const [value, setValue] = useState({ animals: ['lama'] });
+    return (React.createElement(FocusLayout, null,
+        React.createElement(Form, { value: value, onChange: setValue },
+            React.createElement(InlineCardSelection, { name: 'animals' },
+                React.createElement(InlineCardGroup, null,
+                    React.createElement(InlineCard, { value: 'camel' },
+                        React.createElement(InlineCard.Media, null,
+                            React.createElement("img", { src: 'http://3.bp.blogspot.com/-m2w1bFhTLMs/Uyh0xlVCluI/AAAAAAAACjw/G4IhU8b0RhY/w1200-h630-p-k-nu/368692.jpg' })),
+                        React.createElement(InlineCard.Content, null, "A cranky camel")),
+                    React.createElement(InlineCard, { value: 'eagle' },
+                        React.createElement(InlineCard.Media, null,
+                            React.createElement("img", { src: 'https://www.hakaimagazine.com/wp-content/uploads/header-bald-eagle-nests.jpg' })),
+                        React.createElement(InlineCard.Content, null, "An eager eagle")),
+                    React.createElement(InlineCard, { value: 'lama' },
+                        React.createElement(InlineCard.Media, null,
+                            React.createElement("img", { src: 'https://external-preview.redd.it/3KAYF01HBUX-QKwcpo89kHPzScRoZPXZN7o02JepX8E.jpg?auto=webp&s=08bbddec975a8af76de43a33001604099fb0168d' })),
+                        React.createElement(InlineCard.Content, null, "A lazy lama")),
+                    React.createElement(InlineCard, { value: 'iguana' },
+                        React.createElement(InlineCard.Content, null, "An invisible iguana")))))));
+};
 export default {
     title: 'Components/InlineCard',
     component: InlineCard,

package/build/components/InlineCard/InlineCardSelection.component.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export interface InlineCardSelectionProps {
+    children: React.ReactNode;
+    name: string;
+    value?: string[];
+    onChange?: (value: string[]) => void;
+}
+declare const InlineCardSelection: ({ children, name, value: propsValue, onChange: propsOnChange, }: InlineCardSelectionProps) => JSX.Element;
+export default InlineCardSelection;

package/build/components/InlineCard/InlineCardSelection.component.js

@@ -0,0 +1,28 @@
+import React, { useCallback } from 'react';
+import useFormNode from '../Form/useFormNode.hook';
+import InlineCardSelectionContext from './_InlineCardSelection.context';
+const InlineCardSelection = ({ children, name, value: propsValue, onChange: propsOnChange, }) => {
+    const { value: contextValue, onChange: contextOnChange } = useFormNode(name);
+    const value = contextValue || propsValue || [];
+    const wrappedOnChange = useCallback((val) => {
+        if (propsOnChange) {
+            propsOnChange(val);
+        }
+        if (contextOnChange) {
+            contextOnChange(val);
+        }
+    }, [propsOnChange, contextOnChange]);
+    const handleToggle = (_value) => {
+        if (!value) {
+            return;
+        }
+        if (value.includes(_value)) {
+            wrappedOnChange(value.filter((val) => val !== _value));
+        }
+        else {
+            wrappedOnChange([...value, _value]);
+        }
+    };
+    return (React.createElement(InlineCardSelectionContext.Provider, { value: { value, onToggle: handleToggle } }, children));
+};
+export default InlineCardSelection;

package/build/components/InlineCard/_InlineCardSelection.context.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export declare type CardSize = 'fill' | 'xs' | 'sm' | 'md' | 'lg';
+interface InlineCardSelectionContextProps {
+    value?: string[];
+    onToggle?: (value: string) => void;
+}
+declare const InlineCardSelectionContext: import("react").Context<InlineCardSelectionContextProps>;
+export default InlineCardSelectionContext;

package/build/components/InlineCard/_InlineCardSelection.context.js

@@ -0,0 +1,6 @@
+import { createContext } from 'react';
+const InlineCardSelectionContext = createContext({
+    value: undefined,
+    onToggle: undefined,
+});
+export default InlineCardSelectionContext;

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

@@ -30,6 +30,8 @@ const MenuMobile = styled.div `
   width: 100%;
   padding: 8px 0;
 
+  z-index: 1;
+
   ${responsive.useStylesFor('desktop').andLarger(`
     display: none;
   `)}

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

@@ -0,0 +1,10 @@
+import React from 'react';
+export interface MinimalMenuProps {
+    children: React.ReactNode;
+}
+declare const MinimalMenu: {
+    ({ children }: MinimalMenuProps): JSX.Element;
+    Item: ({ icon, active, onClick }: import("./_MinimalMenuItem.component").MinimalMenuItemProps) => JSX.Element;
+    Page: ({ children }: import("./_MinimalMenuPage.component").MinimalMenuPageProps) => JSX.Element;
+};
+export default MinimalMenu;

package/build/components/MinimalMenu/MinimalMenu.component.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { useIsScreenSize } from '../../responsive/responsive';
+import DesktopMinimalMenuContainer from './desktop/_DesktopMinimalMenuContainer.component';
+import MobileMinimalMenuContainer from './mobile/_MobileMinimalMenuContainer.component';
+import MinimalMenuItem from './_MinimalMenuItem.component';
+import MinimalMenuPage from './_MinimalMenuPage.component';
+const MinimalMenu = ({ children }) => {
+    const isMobile = useIsScreenSize('mobile');
+    if (isMobile) {
+        return React.createElement(MobileMinimalMenuContainer, null, children);
+    }
+    return React.createElement(DesktopMinimalMenuContainer, null, children);
+};
+MinimalMenu.Item = MinimalMenuItem;
+MinimalMenu.Page = MinimalMenuPage;
+export default MinimalMenu;

package/build/components/MinimalMenu/MinimalMenu.stories.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { Meta } from '@storybook/react/types-6-0';
+export declare const Standard: () => JSX.Element;
+declare const _default: Meta<import("@storybook/react/types-6-0").Args>;
+export default _default;

package/build/components/MinimalMenu/MinimalMenu.stories.js

@@ -0,0 +1,46 @@
+import React, { useState } from 'react';
+import { menuHelpers, MinimalMenu, PaddedLayout, Text } from '../..';
+import { faCalendarAlt, faCogs, faHamburger } from '@fortawesome/free-solid-svg-icons';
+export const Standard = () => {
+    const [route, setRoute] = useState('/eat');
+    return (React.createElement(React.Fragment, null,
+        React.createElement(MinimalMenu, null,
+            React.createElement(MinimalMenu.Item, { icon: faHamburger, active: menuHelpers.isActiveItem([/\/eat/g], route), onClick: () => setRoute('/eat') }),
+            React.createElement(MinimalMenu.Item, { icon: faCalendarAlt, active: menuHelpers.isActiveItem([/\/plan/g], route), onClick: () => setRoute('/plan') }),
+            React.createElement(MinimalMenu.Item, { icon: faCogs, active: menuHelpers.isActiveItem([/\/manage/g], route), onClick: () => setRoute('/manage') })),
+        React.createElement(MinimalMenu.Page, null,
+            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.",
+                    React.createElement("br", null),
+                    React.createElement("br", null),
+                    "Nullam tincidunt mauris ut lectus auctor aliquam. Aenean ornare mi et sollicitudin suscipit. Integer eu nulla at turpis molestie malesuada. Maecenas non consectetur massa. Nunc dui magna, imperdiet placerat bibendum ac, accumsan non lorem. Proin vulputate magna nisl, vel convallis elit iaculis quis. Proin maximus ante non ante vehicula sodales. Aliquam dui nisi, posuere vitae urna in, porta aliquet tellus. Curabitur commodo diam nec erat luctus, quis pharetra diam ultricies. Fusce sagittis libero lorem, convallis tristique mi egestas fermentum. Sed eu erat ut eros porttitor sollicitudin. Vivamus facilisis felis odio, ac tristique enim blandit a. Aliquam tincidunt iaculis sapien, sed vulputate mauris luctus ac. Donec aliquet ullamcorper orci quis tempor. Curabitur ac felis nulla.",
+                    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("br", null),
+                    React.createElement("br", null),
+                    "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nibh lorem, mattis sed dolor ac, malesuada maximus lorem. Proin hendrerit maximus ipsum, eu laoreet erat congue a. Duis pellentesque leo sed nisi mattis, a sollicitudin sapien ornare. Mauris efficitur nulla metus. Etiam felis velit, mollis eget fringilla nec, venenatis non libero. Suspendisse at arcu rhoncus, tristique ex nec, blandit enim. Vivamus rutrum, felis faucibus vulputate vulputate, lacus quam sollicitudin eros, non consequat velit neque in lorem. Ut hendrerit lectus vel quam placerat tincidunt. Ut auctor tortor elit, ac aliquam orci pellentesque efficitur. Morbi eget sollicitudin est. Donec ullamcorper velit ipsum, non dapibus nisi vulputate ac. Proin dapibus, mi ac scelerisque sollicitudin, turpis augue hendrerit metus, eget dignissim justo lectus id urna. Vivamus massa ipsum, posuere eu risus non, ultrices convallis tellus. Mauris et egestas erat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Donec sagittis porttitor nisi a gravida.",
+                    React.createElement("br", null),
+                    React.createElement("br", null),
+                    "Donec mollis nisl quis scelerisque suscipit. Suspendisse eget risus ornare lorem convallis gravida sit amet id nisi. Duis venenatis tortor vitae facilisis auctor. Nulla in pretium odio, et aliquet dui. Sed non venenatis ex. Praesent felis sem, tincidunt et ligula sit amet, vulputate tincidunt tellus. Nam quis eros quis justo aliquet tempus. Nulla imperdiet bibendum velit, eu elementum felis cursus ut. Curabitur eget dui et urna vehicula porttitor sit amet vitae risus. Nulla vitae lacus id quam gravida volutpat at eu elit. Quisque efficitur hendrerit purus, sed viverra elit cursus non. Nunc at scelerisque eros, ut posuere erat. Suspendisse egestas volutpat orci, id ornare nisi aliquet vel.",
+                    React.createElement("br", null),
+                    React.createElement("br", null),
+                    "Donec ultrices lectus lectus, eget mollis nisi venenatis vitae. Morbi cursus quis sapien ut ultrices. Quisque placerat, massa ut accumsan tempor, purus leo sollicitudin leo, eu auctor mauris quam nec nisl. Donec eu dignissim erat. Aenean bibendum blandit leo, sed posuere risus euismod eu. Ut dignissim nisl ex, eget condimentum turpis auctor in. Fusce tristique neque accumsan diam suscipit, vel blandit lorem sodales. Etiam ut tincidunt nisi, ut aliquet felis. Suspendisse vestibulum, velit imperdiet tempor varius, lectus massa consectetur lacus, sagittis scelerisque ante enim non metus. Donec nunc nisl, fermentum scelerisque ornare nec, congue id velit. Praesent vehicula dolor nisl, vel sollicitudin nisl ullamcorper sit amet. Maecenas nec ante eu dui interdum mollis. Maecenas urna enim, maximus et ligula at, aliquet varius arcu. Ut justo arcu, commodo iaculis est ut, ornare posuere arcu.",
+                    React.createElement("br", null),
+                    React.createElement("br", null),
+                    "Curabitur at nunc et erat placerat laoreet aliquet in eros. Proin sagittis dolor libero, ut ultrices elit euismod vitae. Phasellus non tellus tellus. Morbi sit amet auctor lacus. Maecenas commodo sagittis ex nec eleifend. Mauris sit amet augue a sapien vulputate rhoncus. Donec dignissim finibus erat, sit amet suscipit arcu blandit non. Sed pulvinar tincidunt volutpat. Proin pretium leo non enim pretium, vitae porttitor felis pellentesque. Nam tincidunt euismod arcu quis aliquam. Maecenas in lorem et tortor sagittis efficitur. Vestibulum est odio, tristique eget massa vitae, porta tincidunt magna. Curabitur tempus velit ut auctor auctor. Integer ultricies lorem vitae nibh convallis, ac placerat tellus rutrum.",
+                    React.createElement("br", null),
+                    React.createElement("br", null),
+                    "Curabitur ac lorem vitae lorem convallis tincidunt. Aenean luctus, dolor et blandit consectetur, odio risus lacinia ante, non auctor libero turpis accumsan metus. Donec accumsan vitae lacus a varius. Aliquam ac ultricies massa. Praesent vel lacus tempus, interdum nisi eget, varius justo. Pellentesque nec mauris ac dolor fringilla pulvinar. Sed sollicitudin nec lectus nec condimentum. Maecenas molestie blandit ipsum ut finibus. Cras eu nibh congue, porta metus vel, pellentesque tellus.",
+                    React.createElement("br", null),
+                    React.createElement("br", null),
+                    "Morbi feugiat, arcu vel ultricies ultrices, justo odio faucibus purus, vel pharetra augue metus nec purus. Suspendisse sit amet leo ipsum. Vivamus ut velit ut ante consectetur vehicula ut at mi. Nam et ex at nisl ullamcorper maximus nec vel est. Fusce ut est neque. Vivamus dictum, ipsum porta varius tempus, arcu diam sollicitudin risus, in vulputate est orci sit amet ligula. Donec a est vel lacus consectetur dictum.")))));
+};
+export default {
+    title: 'Components/MinimalMenu',
+    component: MinimalMenu,
+    parameters: {
+        layout: 'fullscreen',
+    },
+};

package/build/components/MinimalMenu/_MinimalMenuItem.component.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
+export interface MinimalMenuItemProps {
+    icon?: IconProp;
+    active?: boolean;
+    onClick?: () => void;
+}
+declare const MinimalMenuItem: ({ icon, active, onClick }: MinimalMenuItemProps) => JSX.Element;
+export default MinimalMenuItem;

package/build/components/MinimalMenu/_MinimalMenuItem.component.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { useIsScreenSize } from '../../responsive/responsive';
+import MobileMinimalMenuItem from './mobile/_MobileMinimalMenuItem.component';
+import DesktopMinimalMenuItem from './desktop/_DesktopMinimalMenuItem.component';
+const MinimalMenuItem = ({ icon, active, onClick }) => {
+    const isMobile = useIsScreenSize('mobile');
+    if (isMobile) {
+        return React.createElement(MobileMinimalMenuItem, { icon: icon, active: active, onClick: onClick });
+    }
+    return React.createElement(DesktopMinimalMenuItem, { icon: icon, active: active, onClick: onClick });
+};
+export default MinimalMenuItem;

package/build/components/MinimalMenu/_MinimalMenuPage.component.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export interface MinimalMenuPageProps {
+    children: React.ReactNode;
+}
+declare const MinimalMenuPage: ({ children }: MinimalMenuPageProps) => JSX.Element;
+export default MinimalMenuPage;

package/build/components/MinimalMenu/_MinimalMenuPage.component.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { useIsScreenSize } from '../../responsive/responsive';
+import MobileMinimalMenuPage from './mobile/_MobileMinimalMenuPage.component';
+import DesktopMinimalMenuPage from './desktop/_DesktopMinimalMenuPage.component';
+const MinimalMenuPage = ({ children }) => {
+    const isMobile = useIsScreenSize('mobile');
+    if (isMobile) {
+        return React.createElement(MobileMinimalMenuPage, null, children);
+    }
+    return React.createElement(DesktopMinimalMenuPage, null, children);
+};
+export default MinimalMenuPage;

package/build/components/MinimalMenu/desktop/_DesktopMinimalMenuContainer.component.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export interface DesktopMinimalMenuContainerProps {
+    children: React.ReactNode;
+}
+declare const DesktopMinimalMenuContainer: ({ children }: DesktopMinimalMenuContainerProps) => JSX.Element;
+export default DesktopMinimalMenuContainer;

package/build/components/MinimalMenu/desktop/_DesktopMinimalMenuContainer.component.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import styled from 'styled-components';
+const DesktopMinimalMenuOuter = styled.div `
+  position: fixed;
+  top: 0;
+  left: 0;
+
+  width: 64px;
+  height: 100%;
+  z-index: 10;
+
+  background-color: ${(props) => props.theme.colours.cardBackground};
+`;
+const DesktopMinimalMenuContainer = ({ children }) => {
+    return React.createElement(DesktopMinimalMenuOuter, null, children);
+};
+export default DesktopMinimalMenuContainer;

package/build/components/MinimalMenu/desktop/_DesktopMinimalMenuItem.component.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
+export interface DesktopMinimalMenuItemProps {
+    icon?: IconProp;
+    active?: boolean;
+    onClick?: () => void;
+}
+declare const DesktopMinimalMenuItem: ({ icon, active, onClick }: DesktopMinimalMenuItemProps) => JSX.Element;
+export default DesktopMinimalMenuItem;

package/build/components/MinimalMenu/desktop/_DesktopMinimalMenuItem.component.js

@@ -0,0 +1,42 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { motion } from 'framer-motion';
+import React, { useMemo } from 'react';
+import styled, { useTheme } from 'styled-components';
+const ItemContainer = styled(motion.div) `
+  position: relative;
+
+  color: ${(props) => props.theme.colours.defaultFont};
+  font-size: 28px;
+  cursor: pointer;
+
+  width: 64px;
+  height: 64px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+const MenuIconBar = styled(motion.div) `
+  position: absolute;
+  top: 2px;
+  left: 2px;
+
+  height: 60px;
+`;
+const iconContainerVariants = {
+    // hover: { x: 2 },
+    active: { x: 2 },
+    hoverActive: { x: 2 },
+};
+const DesktopMinimalMenuItem = ({ icon, active, onClick }) => {
+    const theme = useTheme();
+    const barVariants = useMemo(() => ({
+        hover: { opacity: 1, backgroundColor: theme.colours.defaultBorder, width: 4 },
+        active: { opacity: 1, backgroundColor: theme.colours.primary.main, width: 4 },
+        hoverActive: { opacity: 1, backgroundColor: theme.colours.primary.main, width: 4 },
+    }), [theme]);
+    return (React.createElement(ItemContainer, { whileHover: active ? 'hoverActive' : 'hover', animate: active ? 'active' : undefined, onClick: onClick },
+        React.createElement(MenuIconBar, { style: { backgroundColor: theme.colours.cardBackground, opacity: 0 }, variants: barVariants, transition: { type: 'spring', duration: 0.3 } }),
+        icon && (React.createElement(motion.div, { variants: iconContainerVariants },
+            React.createElement(FontAwesomeIcon, { icon: icon })))));
+};
+export default DesktopMinimalMenuItem;

package/build/components/MinimalMenu/desktop/_DesktopMinimalMenuPage.component.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export interface DesktopMinimalMenuPageProps {
+    children: React.ReactNode;
+}
+declare const DesktopMinimalMenuPage: ({ children }: DesktopMinimalMenuPageProps) => JSX.Element;
+export default DesktopMinimalMenuPage;

package/build/components/MinimalMenu/desktop/_DesktopMinimalMenuPage.component.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import styled from 'styled-components';
+const PageOuter = styled.div `
+  padding-left: 64px;
+`;
+const DesktopMinimalMenuPage = ({ children }) => {
+    return React.createElement(PageOuter, null, children);
+};
+export default DesktopMinimalMenuPage;

package/build/components/MinimalMenu/mobile/_MobileMenu.constants.d.ts

@@ -0,0 +1,5 @@
+export declare const mobileMenuDefaultTransition: {
+    type: string;
+    duration: number;
+    bounce: number;
+};

package/build/components/MinimalMenu/mobile/_MobileMenu.constants.js

@@ -0,0 +1 @@
+export const mobileMenuDefaultTransition = { type: 'spring', duration: 0.2, bounce: 0 };

package/build/components/MinimalMenu/mobile/_MobileMenuBump.component.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const MobileMenuBump: () => JSX.Element;
+export default MobileMenuBump;

package/build/components/MinimalMenu/mobile/_MobileMenuBump.component.js

@@ -0,0 +1,4 @@
+import React from 'react';
+const MobileMenuBump = () => (React.createElement("svg", { width: '86', height: '24', viewBox: '0 0 86 24', fill: 'none', xmlns: 'http://www.w3.org/2000/svg' },
+    React.createElement("path", { d: 'M86 19C86 26.6902 62.4543 22.5 41.5 22.5C22 22 0 25.1902 0 19C9 18.1902 9.91176 16.75 17.5 10.5C25.0882 4.25 31.6176 0.0597534 43 0.0597534C54.3824 0.0597534 61.4118 4.75 69 11C76.5882 17.25 79.5 18.1902 86 19Z' })));
+export default MobileMenuBump;

package/build/components/MinimalMenu/mobile/_MobileMenuBump.context.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export interface MobileMenuBumpContextProps {
+    setBumpX: (offset?: number) => void;
+}
+declare const MobileMenuBumpContext: import("react").Context<MobileMenuBumpContextProps>;
+export default MobileMenuBumpContext;

package/build/components/MinimalMenu/mobile/_MobileMenuBump.context.js

@@ -0,0 +1,6 @@
+import { createContext } from 'react';
+const MobileMenuBumpContext = createContext({
+    // eslint-disable-next-line
+    setBumpX: (offset) => { },
+});
+export default MobileMenuBumpContext;

package/build/components/MinimalMenu/mobile/_MobileMinimalMenuContainer.component.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export interface MobileMinimalMenuContainerProps {
+    children: React.ReactNode;
+}
+declare const MobileMinimalMenuContainer: ({ children }: MobileMinimalMenuContainerProps) => JSX.Element;
+export default MobileMinimalMenuContainer;

package/build/components/MinimalMenu/mobile/_MobileMinimalMenuContainer.component.js

@@ -0,0 +1,41 @@
+import { motion } from 'framer-motion';
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import { mobileMenuDefaultTransition } from './_MobileMenu.constants';
+import MobileMenuBump from './_MobileMenuBump.component';
+import MobileMenuBumpContext from './_MobileMenuBump.context';
+const MobileMinimalMenuOuter = styled.div `
+  position: fixed;
+  bottom: 0;
+  left: 0;
+
+  width: 100%;
+  height: 48px;
+  z-index: 10;
+
+  display: flex;
+  justify-content: space-evenly;
+
+  background-color: ${(props) => props.theme.colours.cardBackground};
+`;
+const AnimatedMenuBumpContainer = styled(motion.div) `
+  position: fixed;
+  bottom: 46px;
+  left: 0;
+
+  width: 86px;
+  height: 24px;
+
+  svg {
+    fill: ${(props) => props.theme.colours.cardBackground};
+  }
+`;
+const MobileMinimalMenuContainer = ({ children }) => {
+    const [bumpX, setBumpX] = useState(0);
+    return (React.createElement(MobileMenuBumpContext.Provider, { value: { setBumpX } },
+        React.createElement(MobileMinimalMenuOuter, null,
+            React.createElement(AnimatedMenuBumpContainer, { animate: { opacity: bumpX ? 1 : 0, x: bumpX ? bumpX - 86 / 2 : undefined, y: bumpX ? 0 : 100 }, transition: mobileMenuDefaultTransition },
+                React.createElement(MobileMenuBump, null)),
+            children)));
+};
+export default MobileMinimalMenuContainer;

package/build/components/MinimalMenu/mobile/_MobileMinimalMenuItem.component.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
+export interface MobileMinimalMenuItemProps {
+    icon?: IconProp;
+    active?: boolean;
+    onClick?: () => void;
+}
+declare const MobileMinimalMenuItem: ({ icon, active, onClick }: MobileMinimalMenuItemProps) => JSX.Element;
+export default MobileMinimalMenuItem;

package/build/components/MinimalMenu/mobile/_MobileMinimalMenuItem.component.js

@@ -0,0 +1,42 @@
+import React, { useContext, useEffect, useRef } from 'react';
+import styled from 'styled-components';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { motion } from 'framer-motion';
+import MobileMenuBumpContext from './_MobileMenuBump.context';
+import { mobileMenuDefaultTransition } from './_MobileMenu.constants';
+import useWindowDimensions from '../../../hooks/useWindowDimensions';
+const ItemContainer = styled.div `
+  position: relative;
+
+  color: ${(props) => props.theme.colours.defaultFont};
+  cursor: pointer;
+
+  width: 48px;
+  height: 48px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+const iconContainerVariants = {
+    active: { fontSize: '28px', y: -8 },
+};
+const MobileMinimalMenuItem = ({ icon, active, onClick }) => {
+    const { width } = useWindowDimensions();
+    const { setBumpX } = useContext(MobileMenuBumpContext);
+    const itemRef = useRef(null);
+    useEffect(() => {
+        if (active && width > 0) {
+            const left = itemRef.current?.offsetLeft;
+            const center = left ? left + 48 / 2 : undefined;
+            setBumpX(center);
+        }
+        return () => {
+            if (active) {
+                setBumpX(undefined);
+            }
+        };
+    }, [active, setBumpX, width]);
+    return (React.createElement(ItemContainer, { onClick: onClick, ref: itemRef }, icon && (React.createElement(motion.div, { animate: active ? 'active' : undefined, style: { fontSize: '20px' }, variants: iconContainerVariants, transition: mobileMenuDefaultTransition },
+        React.createElement(FontAwesomeIcon, { icon: icon })))));
+};
+export default MobileMinimalMenuItem;

package/build/components/MinimalMenu/mobile/_MobileMinimalMenuPage.component.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export interface MobileMinimalMenuPageProps {
+    children: React.ReactNode;
+}
+declare const MobileMinimalMenuPage: ({ children }: MobileMinimalMenuPageProps) => JSX.Element;
+export default MobileMinimalMenuPage;

package/build/components/MinimalMenu/mobile/_MobileMinimalMenuPage.component.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import styled from 'styled-components';
+const PageOuter = styled.div `
+  padding-bottom: 64px;
+`;
+const MobileMinimalMenuPage = ({ children }) => {
+    return React.createElement(PageOuter, null, children);
+};
+export default MobileMinimalMenuPage;

package/build/hooks/useWindowDimensions.d.ts

@@ -0,0 +1,4 @@
+export default function useWindowDimensions(): {
+    width: number;
+    height: number;
+};

package/build/hooks/useWindowDimensions.js

@@ -0,0 +1,19 @@
+import { useState, useEffect } from 'react';
+function getWindowDimensions() {
+    const { innerWidth: width, innerHeight: height } = window;
+    return {
+        width,
+        height,
+    };
+}
+export default function useWindowDimensions() {
+    const [windowDimensions, setWindowDimensions] = useState(getWindowDimensions());
+    useEffect(() => {
+        function handleResize() {
+            setWindowDimensions(getWindowDimensions());
+        }
+        window.addEventListener('resize', handleResize);
+        return () => window.removeEventListener('resize', handleResize);
+    }, []);
+    return windowDimensions;
+}

package/build/index.d.ts

@@ -14,12 +14,14 @@ export { default as Notifications } from './components/Notifications/Notificatio
 export { default as ImageUpload } from './components/ImageUpload/ImageUpload.component';
 export { default as InlineCard } from './components/InlineCard/InlineCard.component';
 export { default as InlineCardGroup } from './components/InlineCard/InlineCardGroup.component';
+export { default as InlineCardSelection } from './components/InlineCard/InlineCardSelection.component';
 export { default as Input } from './components/Input/Input.component';
 export { default as Heading } from './components/Heading/Heading.component';
 export { default as LiveInput } from './components/LiveInput/LiveInput.component';
 export { default as LiveList } from './components/LiveList/LiveList.component';
 export { default as Loader } from './components/Loader/Loader.component';
 export { default as Menu } from './components/Menu/Menu.component';
+export { default as MinimalMenu } from './components/MinimalMenu/MinimalMenu.component';
 export { default as Modal } from './components/Modal/Modal.component';
 export { default as PageHeader } from './components/PageHeader/PageHeader.component';
 export { default as ProfileImage } from './components/ProfileImage/ProfileImage.component';

package/build/index.js

@@ -14,12 +14,14 @@ export { default as Notifications } from './components/Notifications/Notificatio
 export { default as ImageUpload } from './components/ImageUpload/ImageUpload.component';
 export { default as InlineCard } from './components/InlineCard/InlineCard.component';
 export { default as InlineCardGroup } from './components/InlineCard/InlineCardGroup.component';
+export { default as InlineCardSelection } from './components/InlineCard/InlineCardSelection.component';
 export { default as Input } from './components/Input/Input.component';
 export { default as Heading } from './components/Heading/Heading.component';
 export { default as LiveInput } from './components/LiveInput/LiveInput.component';
 export { default as LiveList } from './components/LiveList/LiveList.component';
 export { default as Loader } from './components/Loader/Loader.component';
 export { default as Menu } from './components/Menu/Menu.component';
+export { default as MinimalMenu } from './components/MinimalMenu/MinimalMenu.component';
 export { default as Modal } from './components/Modal/Modal.component';
 export { default as PageHeader } from './components/PageHeader/PageHeader.component';
 export { default as ProfileImage } from './components/ProfileImage/ProfileImage.component';

package/build/responsive/responsive.d.ts

@@ -6,6 +6,7 @@ export interface IStyleBoundFunctions {
 }
 declare function useStylesFor(screenSize: ScreenSize): IStyleBoundFunctions;
 declare function getWidthFor(screenSize: ScreenSize): string;
+export declare function useIsScreenSize(screenSize: ScreenSize): boolean;
 declare const _default: {
     useStylesFor: typeof useStylesFor;
     getWidthFor: typeof getWidthFor;

package/build/responsive/responsive.js

@@ -1,3 +1,4 @@
+import useWindowDimensions from '../hooks/useWindowDimensions';
 const responsiveScreens = {
     mobile: {
         min: 0,
@@ -60,4 +61,15 @@ function getWidthFor(screenSize) {
     }
     return `${screenDefinition.max}px`;
 }
+export function useIsScreenSize(screenSize) {
+    const { width } = useWindowDimensions();
+    if (!screenSize) {
+        return false;
+    }
+    const screenDefinition = responsiveScreens[screenSize];
+    if (!screenDefinition) {
+        return false;
+    }
+    return width >= screenDefinition.min && width <= screenDefinition.max;
+}
 export default { useStylesFor, getWidthFor };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dtdot/lego",
-  "version": "0.17.8",
+  "version": "0.17.12",
   "description": "Some reusable components for building my applications",
   "main": "build/index.js",
   "scripts": {
@@ -40,6 +40,7 @@
     "eslint-plugin-prettier": "^3.4.1",
     "eslint-plugin-react": "^7.28.0",
     "eslint-plugin-react-hooks": "^4.3.0",
+    "framer-motion": "^6.2.6",
     "prettier": "^2.5.1",
     "prettier-eslint": "^12.0.0",
     "react": "^17.0.2",
@@ -49,6 +50,7 @@
     "typescript": "^4.5.5"
   },
   "peerDependencies": {
+    "framer-motion": "^6.2.6",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "styled-components": "^5.2.1"
@@ -57,7 +59,6 @@
     "@fortawesome/fontawesome-svg-core": "^1.2.32",
     "@fortawesome/free-solid-svg-icons": "^5.15.4",
     "@fortawesome/react-fontawesome": "^0.1.13",
-    "framer-motion": "^6.2.6",
     "identicon.js": "^2.3.3",
     "qrcode": "^1.5.0",
     "react-use-measure": "^2.1.1",