@dtdot/lego 0.14.3 → 0.14.5

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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dtdot/lego",
-  "version": "0.14.3",
+  "version": "0.14.5",
   "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,
-};