@dtdot/lego 1.8.0 → 1.8.2

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

@@ -1,13 +1,17 @@
 import React from 'react';
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import { Status } from '../../theme/theme.types';
 interface BadgeSpanProps {
     variant: BadgeVariant;
+    useHover: boolean;
 }
 export declare const BadgeSpan: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, BadgeSpanProps, never>;
 export type BadgeVariant = Status;
 export interface BadgeProps {
     children: React.ReactNode;
     variant: BadgeVariant;
+    actionIcon?: IconProp;
+    onAction?: () => void;
 }
-declare const Badge: ({ children, variant }: BadgeProps) => JSX.Element;
+declare const Badge: ({ children, variant, actionIcon, onAction }: BadgeProps) => JSX.Element;
 export default Badge;

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

@@ -1,3 +1,4 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import React from 'react';
 import styled from 'styled-components';
 import getThemeStatusColour from '../../theme/helpers/getThemeStatusColour';
@@ -11,10 +12,27 @@ export const BadgeSpan = styled.span `
   font-family: ${(props) => props.theme.fonts.default.family};
   font-size: ${(props) => props.theme.fonts.default.size};
   font-weight: ${(props) => props.theme.fonts.default.weight};
+  line-height: ${(props) => props.theme.fonts.default.size};
 
   text-transform: lowercase;
+
+  &:hover {
+    background-color: ${(props) => props.useHover && getThemeStatusColour(props.variant, props.theme).hover};
+  }
+`;
+const ActionSpan = styled.span `
+  vertical-align: middle;
+  padding: 3px 7px;
+  margin: -3px -7px -3px 0;
+  cursor: pointer;
+  user-select: none;
+
+  font-size: ${(props) => props.theme.fonts.default.size};
 `;
-const Badge = ({ children, variant }) => {
-    return (React.createElement(BadgeSpan, { variant: variant, "data-cy": 'badge' }, children));
+const Badge = ({ children, variant, actionIcon, onAction }) => {
+    return (React.createElement(BadgeSpan, { variant: variant, useHover: !!actionIcon, "data-cy": 'badge' },
+        children,
+        actionIcon && (React.createElement(ActionSpan, { onClick: onAction },
+            React.createElement(FontAwesomeIcon, { icon: actionIcon })))));
 };
 export default Badge;

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

@@ -24,6 +24,6 @@ const BadgeSelector = ({ options, value, onChange }) => {
     const handleClick = (_value) => {
         onChange([_value]);
     };
-    return (React.createElement(BadgeSelectorOuter, { "data-cy": 'badge-selector' }, options.map((option) => (React.createElement(InteractiveBadge, { key: option.value, variant: option.variant, inactive: !value.includes(option.value), onClick: () => handleClick(option.value), "data-cy": value.includes(option.value) ? 'badge-selected' : 'badge' }, option.name)))));
+    return (React.createElement(BadgeSelectorOuter, { "data-cy": 'badge-selector' }, options.map((option) => (React.createElement(InteractiveBadge, { useHover: false, key: option.value, variant: option.variant, inactive: !value.includes(option.value), onClick: () => handleClick(option.value), "data-cy": value.includes(option.value) ? 'badge-selected' : 'badge' }, option.name)))));
 };
 export default BadgeSelector;

package/build/components/Select/Select.component.js

@@ -1,4 +1,6 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import React, { useState } from 'react';
+import { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons';
 import { motion } from 'framer-motion';
 import styled, { useTheme } from 'styled-components';
 import ControlDescription from '../../shared/ControlDescription';
@@ -18,6 +20,15 @@ const TextContainer = styled.div `
   align-items: center;
   height: 100%;
 `;
+const IconContainer = styled.div `
+  position: absolute;
+  right: 0;
+  top: 0;
+  height: 48px;
+  padding: 0 16px;
+  display: flex;
+  align-items: center;
+`;
 const PlaceholderText = styled.div `
   color: ${(props) => getThemeControlColours(props.theme).placeholder};
 `;
@@ -29,10 +40,12 @@ const OptionsContainer = styled.div `
   position: absolute;
   background-color: ${(props) => props.theme.colours.controlBackground};
   z-index: 10000;
+
+  box-shadow: ${(props) => props.theme.shadows.small};
 `;
 const Option = styled(motion.div) `
   color: ${(props) => getThemeControlColours(props.theme).font};
-  background-color: ${(props) => props.theme.colours.controlBackground};
+  background-color: ${(props) => props.theme.colours.controlBackgroundDisabled};
   height: 36px;
   display: flex;
   align-items: center;
@@ -62,7 +75,9 @@ const Select = (props) => {
             React.createElement(SelectControl, { "data-cy": dataCy, onClick: () => setIsOpen(!isOpen) },
                 React.createElement(TextContainer, null,
                     !value && placeholder && React.createElement(PlaceholderText, null, placeholder),
-                    value && React.createElement(ValueText, null, valueLabel))),
+                    value && React.createElement(ValueText, null, valueLabel)),
+                React.createElement(IconContainer, null,
+                    React.createElement(FontAwesomeIcon, { icon: isOpen ? faChevronUp : faChevronDown }))),
             isOpen && (React.createElement(OptionsContainer, null, options.map((option) => (React.createElement(Option, { whileHover: { backgroundColor: theme.colours.controlBorder }, transition: { type: 'spring', duration: 0.2 }, key: option.value, onClick: () => selectValue(option) }, option.label)))))),
         splitDescription && (React.createElement(ControlDescription, null, splitDescription.map((line, index) => (React.createElement(React.Fragment, null,
             index !== 0 && React.createElement("br", null),

package/build/theme/dark.theme.js

@@ -38,21 +38,25 @@ const darkTheme = {
             main: '#83bfff',
             contrast: '#191919',
             dull: '#0070e8',
+            hover: '#8fc5ff',
         },
         statusSuccess: {
             main: '#8ddaa9',
             contrast: '#191919',
             dull: '#35a35d',
+            hover: '#98deb2',
         },
         statusWarn: {
             main: '#f1a374',
             contrast: '#191919',
             dull: '#c35514',
+            hover: '#f2ac82',
         },
         statusDanger: {
             main: '#e87a7a',
             contrast: '#191919',
             dull: '#b51f1f',
+            hover: '#ea8787',
         },
     },
     fonts: {

package/build/theme/default.theme.js

@@ -39,21 +39,25 @@ const defaultTheme = {
             main: colours.blue,
             contrast: colours.blue,
             dull: colours.blue,
+            hover: colours.blue,
         },
         statusSuccess: {
             main: colours.green,
             contrast: colours.green,
             dull: colours.green,
+            hover: colours.green,
         },
         statusWarn: {
             main: colours.yellow,
             contrast: colours.yellow,
             dull: colours.yellow,
+            hover: colours.yellow,
         },
         statusDanger: {
             main: colours.red,
             contrast: colours.red,
             dull: colours.red,
+            hover: colours.red,
         },
     },
     fonts: {

package/build/theme/theme.types.d.ts

@@ -9,6 +9,7 @@ export interface IStatus {
     main: string;
     contrast: string;
     dull: string;
+    hover: string;
 }
 export interface IFont {
     family: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dtdot/lego",
-  "version": "1.8.0",
+  "version": "1.8.2",
   "description": "Some reusable components for building my applications",
   "main": "build/index.js",
   "scripts": {
@@ -15,8 +15,15 @@
   "author": "Simon Pratt <19920260+simonpratt@users.noreply.github.com>",
   "license": "ISC",
   "files": [
-    "build"
+    "build",
+    "README.md",
+    "LICENSE"
   ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/simonpratt/lego.git"
+  },
+  "homepage": "https://dtdot-lego.pages.dev/",
   "devDependencies": {
     "@babel/cli": "^7.20.7",
     "@babel/core": "^7.20.7",
@@ -56,7 +63,7 @@
   "peerDependencies": {
     "react": "16 - 18",
     "react-dom": "16 - 18",
-    "styled-components": "5.x"
+    "styled-components": ">= 5"
   },
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^6.2.1",