@dtdot/lego 0.17.15 → 0.17.19

package/build/components/Button/Button.component.js

@@ -3,7 +3,6 @@ import styled, { keyframes } from 'styled-components';
 import getThemeVariantColours from '../../theme/helpers/getThemeVariantColours';
 import ButtonContext from './Button.context';
 const StyledButton = styled.button `
-  height: 48px;
   outline: none;
   box-shadow: none;
   border: none;
@@ -21,6 +20,7 @@ const StyledButton = styled.button `
   border-radius: 2px;
 
   // Props defined by the context
+  height: ${(props) => props.height || '48px'};
   width: ${(props) => props.width};
   align-self: ${(props) => props.alignSelf};
   margin-top: ${(props) => props.marginTop};
@@ -54,7 +54,7 @@ const ButtonSpinner = styled.div `
   }
 `;
 const Button = ({ children, loading, variant = 'primary', type, onClick }) => {
-    const { width, alignSelf, marginTop } = useContext(ButtonContext);
-    return (React.createElement(StyledButton, { width: width, alignSelf: alignSelf, marginTop: marginTop, variant: variant, type: type, onClick: onClick }, loading ? React.createElement(ButtonSpinner, { variant: variant }) : children));
+    const { width, height, alignSelf, marginTop } = useContext(ButtonContext);
+    return (React.createElement(StyledButton, { width: width, height: height, alignSelf: alignSelf, marginTop: marginTop, variant: variant, type: type, onClick: onClick }, loading ? React.createElement(ButtonSpinner, { variant: variant }) : children));
 };
 export default Button;

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

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 export interface ButtonContextProps {
     width?: string;
+    height?: string;
     alignSelf?: string;
     marginTop?: string;
 }

package/build/components/Button/Button.context.js

@@ -1,6 +1,7 @@
 import { createContext } from 'react';
 const ButtonContext = createContext({
     width: undefined,
+    height: undefined,
     alignSelf: undefined,
     marginTop: undefined,
 });

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

@@ -12,5 +12,6 @@ declare const Table: {
     ({ children, variant }: TableProps): JSX.Element;
     Row: ({ children }: import("./_TableRow.component").TableRowProps) => JSX.Element;
     Cell: import("styled-components").StyledComponent<"td", import("styled-components").DefaultTheme, TableCellProps, never>;
+    Action: ({ text, onClick }: import("./_TableAction").TableActionProps) => JSX.Element;
 };
 export default Table;

package/build/components/Table/Table.component.js

@@ -1,6 +1,8 @@
 import React from 'react';
 import styled from 'styled-components';
+import ButtonContext from '../Button/Button.context';
 import TableContext from './_Table.context';
+import TableAction from './_TableAction';
 import TableRow from './_TableRow.component';
 const StyledTable = styled.table `
   width: 100%;
@@ -17,8 +19,10 @@ const TableCell = styled.td `
 `;
 const Table = ({ children, variant = 'regular' }) => {
     return (React.createElement(TableContext.Provider, { value: { variant } },
-        React.createElement(StyledTable, null, children)));
+        React.createElement(ButtonContext.Provider, { value: { height: '24px' } },
+            React.createElement(StyledTable, null, children))));
 };
 Table.Row = TableRow;
 Table.Cell = TableCell;
+Table.Action = TableAction;
 export default Table;

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

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

package/build/components/Table/Table.stories.js

@@ -1,5 +1,36 @@
 import React from 'react';
 import { Card, ProfileImage, Table } from '../..';
+/* eslint-disable @typescript-eslint/no-empty-function */
+const fakeData = [
+    {
+        count: 57,
+        name: 'Hungry Caterpillar',
+    },
+    {
+        count: 32,
+        name: 'Fainting Lama',
+    },
+    {
+        count: 53,
+        name: 'Hungry Bear',
+    },
+    {
+        count: 24,
+        name: 'Panicking Squirrel',
+    },
+    {
+        count: 12,
+        name: 'High Hedgehog',
+    },
+    {
+        count: 76,
+        name: 'Lazy Tiger',
+    },
+    {
+        count: 34,
+        name: 'Wild Antelope',
+    },
+];
 export const Standard = () => (React.createElement(Table, null,
     React.createElement(Table.Row, null,
         React.createElement(Table.Cell, { variant: 'tight' },
@@ -11,6 +42,11 @@ export const Standard = () => (React.createElement(Table, null,
             React.createElement(ProfileImage, { name: 'Fainting Lama' })),
         React.createElement(Table.Cell, { width: '100%' }, "Fainting Lama"),
         React.createElement(Table.Cell, null, "Pending"))));
+export const WithActions = () => (React.createElement(Table, null, fakeData.map((data) => (React.createElement(Table.Row, { key: data.name },
+    React.createElement(Table.Cell, null, data.count),
+    React.createElement(Table.Cell, null, data.name),
+    React.createElement(Table.Cell, null,
+        React.createElement(Table.Action, { onClick: () => { }, text: 'filter' })))))));
 export const InCard = () => (React.createElement(Card, { padded: true, size: 'sm' },
     React.createElement(Table, null,
         React.createElement(Table.Row, null,

package/build/components/Table/_TableAction.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export interface TableActionProps {
+    text: string;
+    onClick: () => void;
+}
+declare const TableAction: ({ text, onClick }: TableActionProps) => JSX.Element;
+export default TableAction;

package/build/components/Table/_TableAction.js

@@ -0,0 +1,6 @@
+import React from 'react';
+import Button from '../Button/Button.component';
+const TableAction = ({ text, onClick }) => {
+    return (React.createElement(Button, { variant: 'tertiary', onClick: onClick }, text));
+};
+export default TableAction;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dtdot/lego",
-  "version": "0.17.15",
+  "version": "0.17.19",
   "description": "Some reusable components for building my applications",
   "main": "build/index.js",
   "scripts": {
@@ -40,7 +40,6 @@
     "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",
@@ -50,7 +49,6 @@
     "typescript": "^4.5.5"
   },
   "peerDependencies": {
-    "framer-motion": "^6.2.6",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "styled-components": "^5.2.1"
@@ -59,6 +57,7 @@
     "@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.8",
     "identicon.js": "^2.3.3",
     "qrcode": "^1.5.0",
     "react-use-measure": "^2.1.1",