@dtdot/lego 0.17.19 → 0.17.20

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

@@ -1,5 +1,9 @@
 import React from 'react';
 import { Status } from '../../theme/theme.types';
+interface BadgeSpanProps {
+    variant: BadgeVariant;
+}
+export declare const BadgeSpan: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, BadgeSpanProps, never>;
 export declare type BadgeVariant = Status;
 export interface BadgeProps {
     children: React.ReactNode;

package/build/components/Badge/Badge.component.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 import getThemeStatusColour from '../../theme/helpers/getThemeStatusColour';
-const BadgeSpan = styled.span `
+export const BadgeSpan = styled.span `
   padding: 4px 8px;
   border-radius: 2px;
 

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

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { BadgeVariant } from '../Badge/Badge.component';
+export interface BadgeSelectorOption {
+    value: string;
+    name: string;
+    variant: BadgeVariant;
+}
+export interface BadgeSelectorProps {
+    options: BadgeSelectorOption[];
+    value: string[];
+    onChange: (val: string[]) => void;
+}
+declare const BadgeSelector: ({ options, value, onChange }: BadgeSelectorProps) => JSX.Element;
+export default BadgeSelector;

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

@@ -0,0 +1,25 @@
+import React from 'react';
+import styled from 'styled-components';
+import getThemeVariantColours from '../../theme/helpers/getThemeVariantColours';
+import { BadgeSpan } from '../Badge/Badge.component';
+const InteractiveBadge = styled(BadgeSpan) `
+  cursor: pointer;
+
+  ${(props) => props.inactive &&
+    `
+    background-color: ${getThemeVariantColours('tertiary', props.theme).main};
+    color: ${getThemeVariantColours('tertiary', props.theme).contrastText};
+  `}
+`;
+const BadgeSelectorOuter = styled.div `
+  ${InteractiveBadge} {
+    margin-right: 8px;
+  }
+`;
+const BadgeSelector = ({ options, value, onChange }) => {
+    const handleClick = (_value) => {
+        onChange([_value]);
+    };
+    return (React.createElement(BadgeSelectorOuter, null, options.map((option) => (React.createElement(InteractiveBadge, { key: option.value, variant: option.variant, inactive: !value.includes(option.value), onClick: () => handleClick(option.value) }, option.name)))));
+};
+export default BadgeSelector;

package/build/components/BadgeSelector/BadgeSelector.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/BadgeSelector/BadgeSelector.stories.js

@@ -0,0 +1,33 @@
+import React, { useState } from 'react';
+import { BadgeSelector } from '../..';
+/* eslint-disable @typescript-eslint/no-empty-function */
+const options = [
+    {
+        value: 'pending',
+        name: 'Pending',
+        variant: 'info',
+    },
+    {
+        value: 'accepted',
+        name: 'Accepted',
+        variant: 'success',
+    },
+    {
+        value: 'expired',
+        name: 'Expired',
+        variant: 'warn',
+    },
+    {
+        value: 'rejected',
+        name: 'Rejected',
+        variant: 'danger',
+    },
+];
+export const Standard = () => {
+    const [value, setValue] = useState(['pending']);
+    return React.createElement(BadgeSelector, { options: options, value: value, onChange: setValue });
+};
+export default {
+    title: 'Components/BadgeSelector',
+    component: BadgeSelector,
+};

package/build/index.d.ts

@@ -2,6 +2,7 @@ export { default as BodyStyle } from './global/BodyStyle.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';
+export { default as BadgeSelector } from './components/BadgeSelector/BadgeSelector.component';
 export { default as Button } from './components/Button/Button.component';
 export { default as ButtonGroup } from './components/ButtonGroup/ButtonGroup.component';
 export { default as Card } from './components/Card/Card.component';

package/build/index.js

@@ -2,6 +2,7 @@ export { default as BodyStyle } from './global/BodyStyle.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';
+export { default as BadgeSelector } from './components/BadgeSelector/BadgeSelector.component';
 export { default as Button } from './components/Button/Button.component';
 export { default as ButtonGroup } from './components/ButtonGroup/ButtonGroup.component';
 export { default as Card } from './components/Card/Card.component';

package/package.json

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