@dtdot/lego 0.15.1 → 0.16.0

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

@@ -1,11 +1,17 @@
 import React from 'react';
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
+import { Status } from '../../theme/theme.types';
 export declare type InlineCardSize = 'fill' | 'xs' | 'sm' | 'md' | 'lg';
+export declare type DragVariant = Status;
 export interface InlineCardProps extends React.HTMLAttributes<HTMLDivElement> {
     children: React.ReactNode;
     size?: InlineCardSize;
+    gestureLeftIcon?: IconProp;
+    gestureLeftVariant?: DragVariant;
+    onGestureLeft?: () => void;
 }
 declare const InlineCard: {
-    ({ children, size, onClick }: InlineCardProps): JSX.Element;
+    ({ children, size, onClick, gestureLeftIcon, gestureLeftVariant, onGestureLeft, }: InlineCardProps): JSX.Element;
     Media: ({ children }: 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

@@ -1,18 +1,15 @@
+import { motion, useMotionValue, useTransform } from 'framer-motion';
 import React from 'react';
-import styled from 'styled-components';
+import styled, { useTheme } from 'styled-components';
 import { responsive } from '../..';
+import getThemeStatusColour from '../../theme/helpers/getThemeStatusColour';
 import InlineCardContent from './_InlineCardContent.component';
 import InlineCardMedia from './_InlineCardMedia.component';
 import InlineCardMeta from './_InlineCardMeta.component';
-const CardOuter = styled.div `
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+const CardWrapper = styled.div `
+  position: relative;
   height: 64px;
-  width: 100%;
-  display: flex;
-
-  cursor: ${(props) => (props.usePointer ? 'pointer' : '')};
-
-  background-color: ${(props) => props.theme.colours.cardBackground};
-  box-shadow: ${(props) => props.theme.shadows.small};
 
   ${(props) => {
     switch (props.size) {
@@ -52,8 +49,46 @@ const CardOuter = styled.div `
     }
 }}
 `;
-const InlineCard = ({ children, size, onClick }) => {
-    return (React.createElement(CardOuter, { size: size, usePointer: !!onClick, onClick: onClick }, children));
+const CardOuter = styled(motion.div) `
+  height: 64px;
+  width: 100%;
+  display: flex;
+
+  cursor: ${(props) => (props.usePointer ? 'pointer' : '')};
+
+  background-color: ${(props) => props.theme.colours.cardBackground};
+  box-shadow: ${(props) => props.theme.shadows.small};
+`;
+const CardActionBackground = styled(motion.div) `
+  position: absolute;
+  width: 100%;
+  height: 100%;
+
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  padding: 8px;
+  padding-right: 16px;
+
+  top: 0;
+  left: 0;
+  pointer-events: none;
+`;
+const InlineCard = ({ children, size, onClick, gestureLeftIcon, gestureLeftVariant, onGestureLeft, }) => {
+    const theme = useTheme();
+    const x = useMotionValue(0);
+    const xInput = [-70, 0];
+    const gestureLeftTheme = getThemeStatusColour(gestureLeftVariant || 'info', theme);
+    const opacity = useTransform(x, xInput, ['1', '0']);
+    const handleDragEnd = (e, panInfo) => {
+        // approx xInputMin * 3
+        if (panInfo.offset.x < -180 && onGestureLeft) {
+            onGestureLeft();
+        }
+    };
+    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, style: { x }, dragConstraints: { left: 0, right: 0 }, usePointer: !!onClick, onClick: onClick }, children)));
 };
 InlineCard.Media = InlineCardMedia;
 InlineCard.Content = InlineCardContent;

package/build/components/InlineCard/InlineCard.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 WithDrag: () => JSX.Element;
 declare const _default: Meta<import("@storybook/react/types-6-0").Args>;
 export default _default;

package/build/components/InlineCard/InlineCard.stories.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { faCheckCircle, faExclamationTriangle, faInfoCircle, faTimes } from '@fortawesome/free-solid-svg-icons';
 import { Badge, InlineCard, InlineCardGroup } from '../..';
 export const Standard = () => (React.createElement(InlineCardGroup, null,
     React.createElement(InlineCard, null,
@@ -13,6 +14,16 @@ export const Standard = () => (React.createElement(InlineCardGroup, null,
         React.createElement(InlineCard.Content, null, "Clickable card"),
         React.createElement(InlineCard.Meta, null,
             React.createElement(Badge, { variant: 'info' }, "Clickable")))));
+export const WithDrag = () => (React.createElement("div", { style: { maxWidth: '400px' } },
+    React.createElement(InlineCardGroup, null,
+        React.createElement(InlineCard, { onGestureLeft: () => console.log('Gesture left triggered'), gestureLeftIcon: faCheckCircle, gestureLeftVariant: 'success' },
+            React.createElement(InlineCard.Content, null, "A success gesture")),
+        React.createElement(InlineCard, { onGestureLeft: () => console.log('Gesture left triggered'), gestureLeftIcon: faInfoCircle, gestureLeftVariant: 'info' },
+            React.createElement(InlineCard.Content, null, "A info gesture")),
+        React.createElement(InlineCard, { onGestureLeft: () => console.log('Gesture left triggered'), gestureLeftIcon: faExclamationTriangle, gestureLeftVariant: 'warn' },
+            React.createElement(InlineCard.Content, null, "A warning gesture")),
+        React.createElement(InlineCard, { onGestureLeft: () => console.log('Gesture left triggered'), gestureLeftIcon: faTimes, gestureLeftVariant: 'danger' },
+            React.createElement(InlineCard.Content, null, "A danger gesture")))));
 export default {
     title: 'Components/InlineCard',
     component: InlineCard,

package/package.json

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