@dtdot/lego 0.17.22 → 0.17.23

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { ColourVariant } from '../../theme/theme.types';
+export interface ActionMenuProps {
+    variant?: ColourVariant;
+}
+declare const ActionMenu: ({ variant }: ActionMenuProps) => JSX.Element;
+export default ActionMenu;

package/build/components/ActionMenu/ActionMenu.component.js

@@ -0,0 +1,13 @@
+import { faEllipsisV } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import React from 'react';
+import styled from 'styled-components';
+import Button from '../Button/Button.component';
+const StyledIcon = styled(FontAwesomeIcon) `
+  font-size: 18px;
+`;
+const ActionMenu = ({ variant }) => {
+    return (React.createElement(Button, { variant: variant },
+        React.createElement(StyledIcon, { icon: faEllipsisV })));
+};
+export default ActionMenu;

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

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

package/build/components/ActionMenu/ActionMenu.stories.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { ActionMenu } from '../..';
+/* eslint-disable @typescript-eslint/no-empty-function */
+export const Standard = () => React.createElement(ActionMenu, null);
+export const Variants = () => (React.createElement(React.Fragment, null,
+    React.createElement(ActionMenu, { variant: 'primary' }),
+    React.createElement("br", null),
+    React.createElement("br", null),
+    React.createElement(ActionMenu, { variant: 'secondary' }),
+    React.createElement("br", null),
+    React.createElement("br", null),
+    React.createElement(ActionMenu, { variant: 'tertiary' })));
+export default {
+    title: 'Components/ActionMenu',
+    component: ActionMenu,
+};

package/build/components/BadgeSelector/BadgeSelector.component.js

@@ -4,6 +4,7 @@ import getThemeVariantColours from '../../theme/helpers/getThemeVariantColours';
 import { BadgeSpan } from '../Badge/Badge.component';
 const InteractiveBadge = styled(BadgeSpan) `
   cursor: pointer;
+  margin-bottom: 8px;
 
   ${(props) => props.inactive &&
     `
@@ -12,6 +13,9 @@ const InteractiveBadge = styled(BadgeSpan) `
   `}
 `;
 const BadgeSelectorOuter = styled.div `
+  display: flex;
+  flex-wrap: wrap;
+
   ${InteractiveBadge} {
     margin-right: 8px;
   }

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

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

package/build/components/BadgeSelector/BadgeSelector.stories.js

@@ -27,6 +27,67 @@ export const Standard = () => {
     const [value, setValue] = useState(['pending']);
     return React.createElement(BadgeSelector, { options: options, value: value, onChange: setValue });
 };
+const options2 = [
+    {
+        value: 'one',
+        name: 'one',
+        variant: 'info',
+    },
+    {
+        value: 'two',
+        name: 'two',
+        variant: 'info',
+    },
+    {
+        value: 'three',
+        name: 'three',
+        variant: 'info',
+    },
+    {
+        value: 'four',
+        name: 'four',
+        variant: 'info',
+    },
+    {
+        value: 'five',
+        name: 'five',
+        variant: 'info',
+    },
+    {
+        value: 'six',
+        name: 'six',
+        variant: 'info',
+    },
+    {
+        value: 'seven',
+        name: 'seven',
+        variant: 'info',
+    },
+    {
+        value: 'eight',
+        name: 'eight',
+        variant: 'info',
+    },
+    {
+        value: 'nine',
+        name: 'nine',
+        variant: 'info',
+    },
+    {
+        value: 'ten',
+        name: 'ten',
+        variant: 'info',
+    },
+    {
+        value: 'eleven',
+        name: 'eleven',
+        variant: 'info',
+    },
+];
+export const LotsOfBadges = () => {
+    const [value, setValue] = useState(['one']);
+    return React.createElement(BadgeSelector, { options: options2, value: value, onChange: setValue });
+};
 export default {
     title: 'Components/BadgeSelector',
     component: BadgeSelector,

package/build/index.d.ts

@@ -1,4 +1,5 @@
 export { default as BodyStyle } from './global/BodyStyle.component';
+export { default as ActionMenu } from './components/ActionMenu/ActionMenu.component';
 export { default as ActionMessage } from './components/ActionMessage/ActionMessage.component';
 export { default as Alert } from './components/Alert/Alert.component';
 export { default as Badge } from './components/Badge/Badge.component';

package/build/index.js

@@ -1,4 +1,5 @@
 export { default as BodyStyle } from './global/BodyStyle.component';
+export { default as ActionMenu } from './components/ActionMenu/ActionMenu.component';
 export { default as ActionMessage } from './components/ActionMessage/ActionMessage.component';
 export { default as Alert } from './components/Alert/Alert.component';
 export { default as Badge } from './components/Badge/Badge.component';

package/package.json

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