@dtdot/lego 2.0.0-18 → 2.0.0-19

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

@@ -1,13 +1,14 @@
 import React from 'react';
 import { CardSize } from './Card.context';
 export interface CardProps {
-    children: React.ReactNode;
-    size?: CardSize;
-    padded?: boolean;
-    onClick?: () => void;
+    'children': React.ReactNode;
+    'size'?: CardSize;
+    'padded'?: boolean;
+    'onClick'?: () => void;
+    'data-testid'?: string;
 }
 declare const Card: {
-    ({ children, padded, size, onClick }: CardProps): JSX.Element;
+    ({ children, padded, size, onClick, "data-testid": dataTestId }: CardProps): JSX.Element;
     ToggleSection: ({ heading, enabled, setEnabled, children, "data-testid": dataTestId, }: import("./_CardToggleSection.component").CardToggleSectionProps) => JSX.Element;
     Actions: ({ children }: import("./_CardActions.component").CardActionsProps) => React.ReactPortal | null;
     Action: ({ children, onClick }: import("./_CardActions.component").CardActionProps) => JSX.Element;

package/build/components/Card/Card.component.js

@@ -69,7 +69,7 @@ const CardOuter = styled(motion.div) `
   cursor: ${(props) => (props.usePointer ? 'pointer' : 'default')};
   padding: ${(props) => (props.padded ? '16px' : 0)};
 `;
-const Card = ({ children, padded, size = 'sm', onClick }) => {
+const Card = ({ children, padded, size = 'sm', onClick, 'data-testid': dataTestId }) => {
     const actionsRef = useRef(null);
     const [htmlActionsRef, setHtmlActionsRef] = useState();
     const [showActions, setShowActions] = useState(false);
@@ -94,7 +94,7 @@ const Card = ({ children, padded, size = 'sm', onClick }) => {
                     scale: 1.005,
                     boxShadow: theme.shadows.xlarge,
                 }
-                : {}, size: size, padded: padded, onClick: handleClick, usePointer: !!onClick, "data-testid": 'card' },
+                : {}, size: size, padded: padded, onClick: handleClick, usePointer: !!onClick, "data-testid": dataTestId || 'card' },
             React.createElement(CardActionsContainer, { ref: actionsRef }),
             React.createElement(CardInner, null, children))));
 };

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

@@ -4,15 +4,16 @@ import { Status } from '../../theme/theme.types';
 export type InlineCardSize = 'fill' | 'xs' | 'sm' | 'md' | 'lg';
 export type DragVariant = Status;
 export interface InlineCardProps extends React.HTMLAttributes<HTMLDivElement> {
-    children: React.ReactNode;
-    size?: InlineCardSize;
-    value?: string;
-    gestureLeftIcon?: IconProp;
-    gestureLeftVariant?: DragVariant;
-    onGestureLeft?: () => void;
+    'children': React.ReactNode;
+    'size'?: InlineCardSize;
+    'value'?: string;
+    'gestureLeftIcon'?: IconProp;
+    'gestureLeftVariant'?: DragVariant;
+    'onGestureLeft'?: () => void;
+    'data-testid'?: string;
 }
 declare const InlineCard: {
-    ({ children, size, value, onClick, gestureLeftIcon, gestureLeftVariant, onGestureLeft, }: InlineCardProps): JSX.Element;
+    ({ children, size, value, onClick, gestureLeftIcon, gestureLeftVariant, onGestureLeft, "data-testid": dataTestId, }: InlineCardProps): JSX.Element;
     Media: ({ children, variant }: import("./_InlineCardMedia.component").InlineCardMediaProps) => JSX.Element;
     Content: ({ children, center }: import("./_InlineCardContent.component").InlineCardContentProps) => JSX.Element;
     Meta: ({ children }: import("./_InlineCardMeta.component").InlineCardMetaProps) => JSX.Element;

package/build/components/InlineCard/InlineCard.component.js

@@ -105,7 +105,7 @@ const SelectIconContainer = styled.div `
 
   color: ${(props) => props.theme.colours.statusInfo.contrast};
 `;
-const InlineCard = ({ children, size, value, onClick, gestureLeftIcon, gestureLeftVariant, onGestureLeft, }) => {
+const InlineCard = ({ children, size, value, onClick, gestureLeftIcon, gestureLeftVariant, onGestureLeft, 'data-testid': dataTestId, }) => {
     const { value: selectedValues, onToggle } = useContext(InlineCardSelectionContext);
     const isSelectable = !!onToggle;
     const isSelected = selectedValues?.length && value && selectedValues.includes(value);
@@ -136,7 +136,7 @@ const InlineCard = ({ children, size, value, onClick, gestureLeftIcon, gestureLe
     };
     return (React.createElement(CardWrapper, { size: size },
         React.createElement(CardActionBackground, { style: { opacity, backgroundColor: gestureLeftTheme.main } }, gestureLeftIcon && (React.createElement(FontAwesomeIcon, { style: { fontSize: '20px', color: gestureLeftTheme.contrast }, icon: gestureLeftIcon }))),
-        React.createElement(CardOuter, { drag: onGestureLeft ? 'x' : undefined, onDragEnd: handleDragEnd, ref: ref, style: { x }, animate: { x: gestureLeftActivated ? -bounds.width : undefined, opacity: gestureLeftActivated ? 0 : undefined }, dragConstraints: { left: 0, right: 0 }, usePointer: !!onClick || isSelectable, onClick: handleClick, "data-testid": 'inline-card' }, children),
+        React.createElement(CardOuter, { drag: onGestureLeft ? 'x' : undefined, onDragEnd: handleDragEnd, ref: ref, style: { x }, animate: { x: gestureLeftActivated ? -bounds.width : undefined, opacity: gestureLeftActivated ? 0 : undefined }, dragConstraints: { left: 0, right: 0 }, usePointer: !!onClick || isSelectable, onClick: handleClick, "data-testid": dataTestId || 'inline-card' }, children),
         isSelectable && isSelected ? (React.createElement(SelectChecked, null,
             React.createElement(SelectIconContainer, null,
                 React.createElement(FontAwesomeIcon, { icon: faCheck })))) : null));

package/package.json

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