@dtdot/lego 2.0.0-28 → 2.0.0-29

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

@@ -16,6 +16,7 @@ export interface IInputProps {
     'data-testid'?: string;
     'suggestions'?: SelectOption[];
     'loading'?: boolean;
+    'loadingVariant'?: 'default' | 'background';
 }
 declare const Input: React.ForwardRefExoticComponent<IInputProps & React.RefAttributes<HTMLInputElement>>;
 export default Input;

package/build/components/Input/Input.component.js

@@ -74,7 +74,7 @@ const messageVariants = {
     errorFocus: { opacity: 1, y: -4 },
 };
 const Input = React.forwardRef(function ForwardRefInput(props, ref) {
-    const { label, name, description, placeholder, disabled, type = 'text', autoFocus, value, 'error': propsError, onChange, onFocus, onBlur, 'data-testid': dataTestId, suggestions, loading, } = props;
+    const { label, name, description, placeholder, disabled, type = 'text', autoFocus, value, 'error': propsError, onChange, onFocus, onBlur, 'data-testid': dataTestId, suggestions, loading, loadingVariant, } = props;
     const [isOpen, setIsOpen] = useState(false);
     const [isFocused, setIsFocused] = useState(false);
     const [referenceElement, setReferenceElement] = useState();
@@ -124,7 +124,7 @@ const Input = React.forwardRef(function ForwardRefInput(props, ref) {
                     React.createElement(FontAwesomeIcon, { icon: faExclamationCircle }))),
             error && (React.createElement(ErrorMessage, { style: { opacity: 0, y: 0 }, animate: animationVariant, variants: messageVariants, transition: { type: 'spring', duration: 0.3 }, "data-testid": 'error-message' }, error)),
             loading && (React.createElement(LoadingContainer, null,
-                React.createElement(Loader, { size: 'sm' })))),
+                React.createElement(Loader, { size: 'sm', variant: loadingVariant })))),
         splitDescription && (React.createElement(ControlDescription, null, splitDescription.map((line, index) => (React.createElement("span", { key: index },
             index !== 0 && React.createElement("br", null),
             line))))),

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

@@ -1,9 +1,10 @@
 /// <reference types="react" />
 export interface BaseLoaderProps {
+    variant?: 'default' | 'background';
     size: 'sm' | 'md';
 }
 export interface LoaderProps {
-    variant?: 'page-loader' | 'default';
+    variant?: 'page-loader' | 'default' | 'background';
     size?: 'sm' | 'md';
 }
 declare const Loader: ({ variant, size }: LoaderProps) => JSX.Element;

package/build/components/Loader/Loader.component.js

@@ -47,15 +47,16 @@ const loadingCircleTransition = {
     repeatType: 'reverse',
     ease: 'easeInOut',
 }; // Framer motion isn't accepting 'repeatType' but animation breaks without it
-const BaseLoader = ({ size }) => {
+const BaseLoader = ({ size, variant }) => {
     const loadingCircleWithSize = useMemo(() => {
         const sizePx = size === 'md' ? '10px' : '5px';
         return {
             ...loadingCircle,
             width: sizePx,
             height: sizePx,
+            backgroundColor: variant === 'default' ? colours.grey30 : colours.grey50,
         };
-    }, [size]);
+    }, [size, variant]);
     const loadingContainerWithSize = useMemo(() => {
         const widthPx = size === 'md' ? '40px' : '20px';
         const heightPx = size === 'md' ? '26px' : '13px';
@@ -75,6 +76,6 @@ const Loader = ({ variant = 'default', size = 'md' }) => {
         return (React.createElement(PageLoaderContainer, null,
             React.createElement(BaseLoader, { size: size })));
     }
-    return React.createElement(BaseLoader, { size: size });
+    return React.createElement(BaseLoader, { size: size, variant: variant });
 };
 export default Loader;

package/package.json

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