@dtdot/lego 0.13.5 → 0.14.6

package/build/components/ActionMessage/ActionMessage.component.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
-import { Button, Spacer, SubHeading, Text } from '../..';
+import { Button, Heading, Spacer, Text } from '../..';
 const ActionMessageContainer = styled.div `
   width: 100%;
   padding: 64px 0;
@@ -16,7 +16,7 @@ const ActionMessageContainer = styled.div `
 const ActionMessage = ({ header, info, action, onAction }) => {
     return (React.createElement(ActionMessageContainer, null,
         React.createElement("div", null,
-            React.createElement(SubHeading, null, header)),
+            React.createElement(Heading.SubHeading, null, header)),
         info && (React.createElement(React.Fragment, null,
             React.createElement(Spacer, { size: '1x' }),
             React.createElement(Text, null, info))),

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

@@ -1,12 +1,15 @@
 import React from 'react';
 import { CardSize } from './Card.context';
-export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface CardProps {
     children: React.ReactNode;
     size?: CardSize;
     padded?: boolean;
+    onClick?: () => void;
 }
 declare const Card: {
-    ({ children, padded, size, onClick, ...props }: CardProps): JSX.Element;
+    ({ children, padded, size, onClick }: CardProps): JSX.Element;
+    Actions: ({ children }: import("./_CardActions.component").CardActionsProps) => React.ReactPortal | null;
+    Action: ({ children, onClick }: import("./_CardActions.component").CardActionProps) => JSX.Element;
     Content: ({ children }: import("./_CardContent.component").CardContentProps) => JSX.Element;
     SubContent: ({ children }: import("./_CardSubContent.component").CardSubContentProps) => JSX.Element;
     Media: ({ children }: import("./_CardMedia.component").CardMediaProps) => JSX.Element;

package/build/components/Card/Card.component.js

@@ -1,13 +1,27 @@
-import React from 'react';
-import styled from 'styled-components';
+import { motion } from 'framer-motion';
+import React, { useEffect, useRef, useState } from 'react';
+import styled, { useTheme } from 'styled-components';
 import responsive from '../../responsive/responsive';
 import CardContext from './Card.context';
+import { CardActions, CardAction } from './_CardActions.component';
 import CardContent from './_CardContent.component';
 import CardHeader from './_CardHeader.component';
 import CardMedia from './_CardMedia.component';
 import CardSpacer from './_CardSpacer.component';
 import CardSubContent from './_CardSubContent.component';
-const CardOuter = styled.div `
+const CardActionsContainer = styled.div `
+  position: absolute;
+  top: -32px;
+`;
+const CardInner = styled.div `
+  position: relative;
+  z-index: 1;
+  width: 100%;
+
+  background-color: ${(props) => props.theme.colours.cardBackground};
+  box-shadow: ${(props) => props.theme.shadows.small};
+`;
+const CardOuter = styled(motion.div) `
   ${(props) => {
     switch (props.size) {
         case 'fill':
@@ -46,16 +60,45 @@ const CardOuter = styled.div `
     }
 }}
 
-  cursor: ${(props) => (props.usePointer ? 'cursor' : 'default')};
+  &:hover {
+    z-index: 1;
+  }
 
+  position: relative;
+  cursor: ${(props) => (props.usePointer ? 'pointer' : 'default')};
   padding: ${(props) => (props.padded ? '16px' : 0)};
-  background-color: ${(props) => props.theme.colours.cardBackground};
-  box-shadow: ${(props) => props.theme.shadows.small};
 `;
-const Card = ({ children, padded, size = 'sm', onClick, ...props }) => {
-    return (React.createElement(CardContext.Provider, { value: { size } },
-        React.createElement(CardOuter, Object.assign({ size: size, padded: padded, onClick: onClick, usePointer: !!onClick }, props), children)));
+const Card = ({ children, padded, size = 'sm', onClick }) => {
+    const actionsRef = useRef(null);
+    const [htmlActionsRef, setHtmlActionsRef] = useState();
+    const [showActions, setShowActions] = useState(false);
+    const [hasActions, setHasActions] = useState(false);
+    const theme = useTheme();
+    useEffect(() => {
+        if (actionsRef.current) {
+            setHtmlActionsRef(actionsRef.current);
+        }
+    }, [actionsRef]);
+    const handleClick = (e) => {
+        if (e.isActionClick) {
+            return;
+        }
+        if (onClick) {
+            onClick();
+        }
+    };
+    return (React.createElement(CardContext.Provider, { value: { size, actionsRef: htmlActionsRef, showActions, setHasActions } },
+        React.createElement(CardOuter, { onHoverStart: () => setShowActions(true), onHoverEnd: () => setShowActions(false), key: 'actions-container', transition: { type: 'spring', bounce: 0, duration: 0.6 }, whileHover: hasActions
+                ? {
+                    scale: 1.005,
+                    boxShadow: theme.shadows.xlarge,
+                }
+                : {}, size: size, padded: padded, onClick: handleClick, usePointer: !!onClick },
+            React.createElement(CardActionsContainer, { ref: actionsRef }),
+            React.createElement(CardInner, null, children))));
 };
+Card.Actions = CardActions;
+Card.Action = CardAction;
 Card.Content = CardContent;
 Card.SubContent = CardSubContent;
 Card.Media = CardMedia;

package/build/components/Card/Card.context.d.ts

@@ -2,6 +2,9 @@
 export declare type CardSize = 'fill' | 'xs' | 'sm' | 'md' | 'lg';
 interface CardContextProps {
     size: CardSize;
+    actionsRef?: HTMLDivElement;
+    showActions: boolean;
+    setHasActions: (hasActions: boolean) => void;
 }
 declare const CardContext: import("react").Context<CardContextProps>;
 export default CardContext;

package/build/components/Card/Card.context.js

@@ -1,5 +1,9 @@
 import { createContext } from 'react';
 const CardContext = createContext({
     size: 'lg',
+    actionsRef: undefined,
+    showActions: false,
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    setHasActions: () => { },
 });
 export default CardContext;

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

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

package/build/components/Card/Card.stories.js

@@ -1,5 +1,7 @@
 import React from 'react';
 import { Card, CardGroup, LiveInput, Badge } from '../..';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faPen, faTrash } from '@fortawesome/free-solid-svg-icons';
 export const Standard = () => (React.createElement(CardGroup, null,
     React.createElement(Card, { size: 'sm' },
         React.createElement(Card.Content, null, "Some content"),
@@ -34,6 +36,44 @@ export const CardHeader = () => (React.createElement(CardGroup, null,
         React.createElement(Card.Header, { heading: 'Mario & Luigi', subHeading: 'mario@gmail.com', meta: React.createElement(Badge, { variant: 'success' }, "approved") }),
         React.createElement(Card.Content, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."),
         React.createElement(Card.Content, null, "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."))));
+export const Clickable = () => (React.createElement(CardGroup, null,
+    React.createElement(Card, { size: 'sm', onClick: () => console.log('test') },
+        React.createElement(Card.Content, null, "Some content"),
+        React.createElement(Card.Spacer, null),
+        React.createElement(Card.Content, null, "Some more content..."),
+        React.createElement(Card.Spacer, null),
+        React.createElement(Card.SubContent, null, "Some sub content..."))));
+export const WithActions = () => (React.createElement(React.Fragment, null,
+    React.createElement("br", null),
+    React.createElement("br", null),
+    React.createElement(CardGroup, null,
+        React.createElement(Card, { size: 'sm', onClick: () => console.log('Card Clicked') },
+            React.createElement(Card.Actions, null,
+                React.createElement(Card.Action, { onClick: () => console.log('Edit Clicked') },
+                    React.createElement(FontAwesomeIcon, { icon: faPen })),
+                React.createElement(Card.Action, { onClick: () => console.log('Delete Clicked') },
+                    React.createElement(FontAwesomeIcon, { icon: faTrash }))),
+            React.createElement(Card.Header, { heading: 'Mario & Luigi', subHeading: 'mario@gmail.com', meta: React.createElement(Badge, { variant: 'success' }, "approved") }),
+            React.createElement(Card.Content, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."),
+            React.createElement(Card.Content, null, "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.")),
+        React.createElement(Card, { size: 'sm', onClick: () => console.log('Card Clicked') },
+            React.createElement(Card.Actions, null,
+                React.createElement(Card.Action, { onClick: () => console.log('Edit Clicked') },
+                    React.createElement(FontAwesomeIcon, { icon: faPen })),
+                React.createElement(Card.Action, { onClick: () => console.log('Delete Clicked') },
+                    React.createElement(FontAwesomeIcon, { icon: faTrash }))),
+            React.createElement(Card.Header, { heading: 'Mario & Luigi', subHeading: 'mario@gmail.com', meta: React.createElement(Badge, { variant: 'success' }, "approved") }),
+            React.createElement(Card.Content, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."),
+            React.createElement(Card.Content, null, "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.")),
+        React.createElement(Card, { size: 'sm', onClick: () => console.log('Card Clicked') },
+            React.createElement(Card.Actions, null,
+                React.createElement(Card.Action, { onClick: () => console.log('Edit Clicked') },
+                    React.createElement(FontAwesomeIcon, { icon: faPen })),
+                React.createElement(Card.Action, { onClick: () => console.log('Delete Clicked') },
+                    React.createElement(FontAwesomeIcon, { icon: faTrash }))),
+            React.createElement(Card.Header, { heading: 'Mario & Luigi', subHeading: 'mario@gmail.com', meta: React.createElement(Badge, { variant: 'success' }, "approved") }),
+            React.createElement(Card.Content, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."),
+            React.createElement(Card.Content, null, "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.")))));
 export default {
     title: 'Components/Card',
     component: Card,

package/build/components/Card/_CardActions.component.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export interface CardActionsProps {
+    children: React.ReactNode;
+}
+export declare const CardActions: ({ children }: CardActionsProps) => React.ReactPortal | null;
+export interface CardActionProps {
+    children: React.ReactNode;
+    onClick?: () => void;
+}
+export declare const CardAction: ({ children, onClick }: CardActionProps) => JSX.Element;

package/build/components/Card/_CardActions.component.js

@@ -0,0 +1,56 @@
+import { AnimatePresence, motion } from 'framer-motion';
+import React, { useContext, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import styled from 'styled-components';
+import CardContext from './Card.context';
+const actionsHeight = 32;
+const ActionsContainer = styled(motion.div) `
+  display: flex;
+  padding: 0 8px;
+
+  cursor: default;
+`;
+const ActionContainer = styled.div `
+  height: ${actionsHeight}px;
+  width: 48px;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  color: ${(props) => props.theme.colours.defaultFont};
+  background-color: ${(props) => props.theme.colours.cardBackground};
+  padding: 4px;
+  border-radius: 4px 4px 0 0;
+
+  box-shadow: ${(props) => props.theme.shadows.xlarge};
+
+  margin-right: 8px;
+  cursor: pointer;
+`;
+export const CardActions = ({ children }) => {
+    const { actionsRef, showActions, setHasActions } = useContext(CardContext);
+    useEffect(() => {
+        setHasActions(true);
+        return () => {
+            setHasActions(false);
+        };
+    }, [setHasActions]);
+    if (!showActions) {
+        return null;
+    }
+    if (!actionsRef) {
+        return null;
+    }
+    return createPortal(React.createElement(AnimatePresence, null,
+        React.createElement(ActionsContainer, { key: 'actions-container', initial: { y: actionsHeight }, animate: { y: 0 }, exit: { y: actionsHeight }, transition: { type: 'spring', bounce: 0, duration: 0.6 } }, children)), actionsRef);
+};
+export const CardAction = ({ children, onClick }) => {
+    const handleClick = (e) => {
+        e.isActionClick = true;
+        if (onClick) {
+            onClick();
+        }
+    };
+    return React.createElement(ActionContainer, { onClick: handleClick }, children);
+};

package/build/components/ControlGroup/ControlGroup.component.js

@@ -1,17 +1,21 @@
 import React from 'react';
 import styled from 'styled-components';
 import ButtonContext from '../Button/Button.context';
-import SubHeading from '../SubHeading/SubHeading.component';
+import Heading from '../Heading/Heading.component';
 import ControlGroupSpacer from './_ControlGroupSpacer.component';
 const ComfortableContainer = styled.div `
   display: flex;
   flex-direction: column;
 
-  ${SubHeading} {
+  ${Heading.SubHeading} {
     margin-top: 16px;
     margin-bottom: 16px;
   }
 
+  ${Heading.FormHeading} {
+    margin-top: 32px;
+  }
+
   & > * {
     margin-bottom: 16px;
 

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

@@ -2,5 +2,9 @@ import React from 'react';
 export interface HeadingProps {
     children: React.ReactNode;
 }
-declare const Heading: ({ children }: HeadingProps) => JSX.Element;
+declare const Heading: {
+    ({ children }: HeadingProps): JSX.Element;
+    SubHeading: import("styled-components").StyledComponent<"h3", import("styled-components").DefaultTheme, {}, never>;
+    FormHeading: import("styled-components").StyledComponent<"h3", import("styled-components").DefaultTheme, {}, never>;
+};
 export default Heading;

package/build/components/Heading/Heading.component.js

@@ -1,5 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
+import FormHeading from './_FormHeading.component';
+import SubHeading from './_SubHeading.component';
 const HeadingContainer = styled.h2 `
   font-family: ${(props) => props.theme.fonts.heading.family};
   font-size: ${(props) => props.theme.fonts.heading.size};
@@ -10,4 +12,6 @@ const HeadingContainer = styled.h2 `
   margin: 0;
 `;
 const Heading = ({ children }) => React.createElement(HeadingContainer, null, children);
+Heading.SubHeading = SubHeading;
+Heading.FormHeading = FormHeading;
 export default Heading;

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

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

package/build/components/Heading/Heading.stories.js

@@ -1,6 +1,8 @@
 import React from 'react';
 import { Heading } from '../..';
 export const Standard = () => React.createElement(Heading, null, "A Standard Heading");
+export const SubHeading = () => React.createElement(Heading.SubHeading, null, "A Standard Sub Heading");
+export const FormHeading = () => React.createElement(Heading.FormHeading, null, "A Standard Sub Heading");
 export default {
     title: 'Components/Heading',
     component: Heading,

package/build/components/Heading/_FormHeading.component.d.ts

@@ -0,0 +1,2 @@
+declare const FormHeading: import("styled-components").StyledComponent<"h3", import("styled-components").DefaultTheme, {}, never>;
+export default FormHeading;

package/build/components/Heading/_FormHeading.component.js

@@ -0,0 +1,16 @@
+import styled from 'styled-components';
+import getThemeControlColours from '../../theme/helpers/getThemeControlColours';
+const FormHeading = styled.h3 `
+  font-family: ${(props) => props.theme.fonts.default.family};
+  font-size: ${(props) => props.theme.fonts.default.size};
+  font-weight: ${(props) => props.theme.fonts.default.weight};
+
+  color: ${(props) => props.theme.colours.defaultFont};
+
+  margin: 0;
+
+  border-left: 4px solid ${(props) => getThemeControlColours(props.theme).background};
+  line-height: 48px;
+  padding-left: 16px;
+`;
+export default FormHeading;

package/build/components/{SubHeading/SubHeading.component.d.ts → Heading/_SubHeading.component.d.ts}

@@ -1,2 +1,2 @@
-declare const SubHeading: import("styled-components").StyledComponent<"h2", import("styled-components").DefaultTheme, {}, never>;
+declare const SubHeading: import("styled-components").StyledComponent<"h3", import("styled-components").DefaultTheme, {}, never>;
 export default SubHeading;

package/build/components/{SubHeading/SubHeading.component.js → Heading/_SubHeading.component.js}

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-const SubHeading = styled.h2 `
+const SubHeading = styled.h3 `
   font-family: ${(props) => props.theme.fonts.subHeading.family};
   font-size: ${(props) => props.theme.fonts.subHeading.size};
   font-weight: ${(props) => props.theme.fonts.subHeading.weight};

package/build/components/ImageUpload/ImageUpload.component.js

@@ -9,6 +9,7 @@ const UploadContainer = styled.div `
   position: relative;
   min-height: 144px;
   background-color: ${(props) => props.theme.colours.uploadBackground};
+  border: 1px solid #565656;
 
   height: 100%;
   width: 100%;

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

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { ControlGroup, Heading, Menu, Spacer, Text, FocusLayout, PaddedLayout, Input, Button, menuHelpers, ContentLayout, SubHeading, } from '../..';
+import { ControlGroup, Heading, Menu, Spacer, Text, FocusLayout, PaddedLayout, Input, Button, menuHelpers, ContentLayout, } from '../..';
 import { faCalendarAlt, faCogs, faHamburger } from '@fortawesome/free-solid-svg-icons';
 export const Standard = () => {
     const [route, setRoute] = useState('/eat');
@@ -33,9 +33,9 @@ export const WithPanel = () => {
             React.createElement(Menu.Panel, null,
                 React.createElement(PaddedLayout, null,
                     React.createElement(ControlGroup, { variation: 'comfortable' },
-                        React.createElement(SubHeading, null, "You"),
+                        React.createElement(Heading.SubHeading, null, "You"),
                         React.createElement(Input, { label: 'Income', name: 'name', placeholder: '30,000' }),
-                        React.createElement(SubHeading, null, "Loan"),
+                        React.createElement(Heading.SubHeading, null, "Loan"),
                         React.createElement(Input, { label: 'Deposit', name: 'name', placeholder: '10,000' }),
                         React.createElement(Input, { label: 'Interest Rate', name: 'name', placeholder: '4%' })))),
             React.createElement(Menu.Page, null,

package/build/examples/Form.stories.js

@@ -0,0 +1,19 @@
+import React, { useState } from 'react';
+import { ControlGroup, FocusLayout, Form, Heading, Input, ImageUpload } from '../';
+/* eslint-disable @typescript-eslint/no-empty-function */
+export const Standard = () => {
+    const [value, setValue] = useState({ dragon: '' });
+    return (React.createElement(FocusLayout, null,
+        React.createElement(Form, { value: value, onChange: setValue },
+            React.createElement(ControlGroup, { variation: 'comfortable' },
+                React.createElement(ImageUpload, { name: 'image' }),
+                React.createElement(Input, { name: 'name', placeholder: 'Something tasty..' }),
+                React.createElement(Heading.FormHeading, null, "Components"),
+                React.createElement(Input, { name: 'one', placeholder: 'Ingredient #1' }),
+                React.createElement(Input, { name: 'two', placeholder: 'Ingredient #2' }),
+                React.createElement(Input, { name: 'three', placeholder: 'Ingredient #3' })))));
+};
+export default {
+    title: 'Examples/Forms',
+    component: Form,
+};

package/build/index.d.ts

@@ -22,7 +22,6 @@ export { default as Menu } from './components/Menu/Menu.component';
 export { default as Modal } from './components/Modal/Modal.component';
 export { default as ProfileImage } from './components/ProfileImage/ProfileImage.component';
 export { default as QrCode } from './components/QrCode/QrCode.component';
-export { default as SubHeading } from './components/SubHeading/SubHeading.component';
 export { default as Spacer } from './components/Spacer/Spacer.component';
 export { default as SquareButton } from './components/SquareButton/SquareButton.component';
 export { default as Table } from './components/Table/Table.component';

package/build/index.js

@@ -22,7 +22,6 @@ export { default as Menu } from './components/Menu/Menu.component';
 export { default as Modal } from './components/Modal/Modal.component';
 export { default as ProfileImage } from './components/ProfileImage/ProfileImage.component';
 export { default as QrCode } from './components/QrCode/QrCode.component';
-export { default as SubHeading } from './components/SubHeading/SubHeading.component';
 export { default as Spacer } from './components/Spacer/Spacer.component';
 export { default as SquareButton } from './components/SquareButton/SquareButton.component';
 export { default as Table } from './components/Table/Table.component';

package/build/theme/dark.theme.js

@@ -4,7 +4,7 @@ const darkTheme = {
         background: '#424448',
         overlayBackground: '#a4caf9',
         primary: {
-            main: '#61a4f5',
+            main: '#94b8e3',
             hover: '#83b7f7',
             contrastText: '#191919',
         },
@@ -68,6 +68,8 @@ const darkTheme = {
     shadows: {
         small: '0px 0px 2px rgba(0, 0, 0, 0.15)',
         medium: '0px 0px 4px rgba(0, 0, 0, 0.15)',
+        large: '0px 0px 8px rgba(0, 0, 0, 0.15)',
+        xlarge: '0px 0px 16px rgba(0, 0, 0, 0.25)',
     },
 };
 export default darkTheme;

package/build/theme/default.theme.js

@@ -69,6 +69,8 @@ const defaultTheme = {
     shadows: {
         small: '0px 0px 2px rgba(0, 0, 0, 0.15)',
         medium: '0px 0px 4px rgba(0, 0, 0, 0.15)',
+        large: '0px 0px 8px rgba(0, 0, 0, 0.15)',
+        xlarge: '0px 0px 16px rgba(0, 0, 0, 0.25)',
     },
 };
 export default defaultTheme;

package/package.json

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

package/build/components/SubHeading/SubHeading.stories.js

@@ -1,7 +0,0 @@
-import React from 'react';
-import { SubHeading } from '../..';
-export const Standard = () => React.createElement(SubHeading, null, "A Standard Subheading");
-export default {
-    title: 'Components/SubHeading',
-    component: SubHeading,
-};