@dtdot/lego 1.4.3 → 1.6.0

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

@@ -8,6 +8,7 @@ export interface CardProps {
 }
 declare const Card: {
     ({ children, padded, size, onClick }: CardProps): JSX.Element;
+    ToggleSection: ({ heading, enabled, setEnabled, children }: import("./_CardToggleSection.component").CardToggleSectionProps) => JSX.Element;
     Actions: ({ children }: import("./_CardActions.component").CardActionsProps) => React.ReactPortal | null;
     Action: ({ children, onClick }: import("./_CardActions.component").CardActionProps) => JSX.Element;
     Content: ({ children }: import("./_CardContent.component").CardContentProps) => JSX.Element;

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

@@ -9,6 +9,7 @@ import CardHeader from './_CardHeader.component';
 import CardMedia from './_CardMedia.component';
 import CardSpacer from './_CardSpacer.component';
 import CardSubContent from './_CardSubContent.component';
+import CardToggleSection from './_CardToggleSection.component';
 const CardActionsContainer = styled.div `
   position: absolute;
   top: -32px;
@@ -97,6 +98,7 @@ const Card = ({ children, padded, size = 'sm', onClick }) => {
             React.createElement(CardActionsContainer, { ref: actionsRef }),
             React.createElement(CardInner, null, children))));
 };
+Card.ToggleSection = CardToggleSection;
 Card.Actions = CardActions;
 Card.Action = CardAction;
 Card.Content = CardContent;

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

@@ -0,0 +1,9 @@
+import React from 'react';
+export interface CardToggleSectionProps {
+    children: React.ReactNode;
+    heading: string;
+    enabled: boolean;
+    setEnabled: (enabled: boolean) => void;
+}
+declare const CardToggleSection: ({ heading, enabled, setEnabled, children }: CardToggleSectionProps) => JSX.Element;
+export default CardToggleSection;

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

@@ -0,0 +1,24 @@
+import React from 'react';
+import styled from 'styled-components';
+import Text from '../Text/Text.component';
+import Toggle from '../Toggle/Toggle.component';
+const ToggleHeaderContainer = styled.div `
+  height: 48px;
+  width: 100%;
+  padding: 8px 16px;
+
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  cursor: pointer;
+
+  background-color: ${(props) => props.theme.colours.cardBackgroundSecondary};
+`;
+const CardToggleSection = ({ heading, enabled, setEnabled, children }) => {
+    return (React.createElement(React.Fragment, null,
+        React.createElement(ToggleHeaderContainer, { onClick: () => setEnabled(!enabled) },
+            React.createElement(Text, null, heading),
+            React.createElement(Toggle, { value: enabled, onChange: setEnabled })),
+        enabled && React.createElement("div", null, children)));
+};
+export default CardToggleSection;

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

@@ -13,7 +13,7 @@ export interface InlineCardProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 declare const InlineCard: {
     ({ children, size, value, onClick, gestureLeftIcon, gestureLeftVariant, onGestureLeft, }: InlineCardProps): JSX.Element;
-    Media: ({ children }: import("./_InlineCardMedia.component").InlineCardMediaProps) => 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/_InlineCardMedia.component.d.ts

@@ -1,6 +1,8 @@
 import React from 'react';
+export type InlineCardMediaVariant = 'rectangle' | 'square';
 export interface InlineCardMediaProps {
     children: React.ReactNode;
+    variant?: InlineCardMediaVariant;
 }
-declare const InlineCardMedia: ({ children }: InlineCardMediaProps) => JSX.Element;
+declare const InlineCardMedia: ({ children, variant }: InlineCardMediaProps) => JSX.Element;
 export default InlineCardMedia;

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

@@ -1,8 +1,17 @@
 import React from 'react';
 import styled from 'styled-components';
+const getMediaWidth = (variant) => {
+    switch (variant) {
+        case 'square':
+            return '64px';
+        case 'rectangle':
+        default:
+            return '128px';
+    }
+};
 const MediaContainer = styled.div `
-  width: 128px;
-  min-width: 128px;
+  width: ${(props) => getMediaWidth(props.variant)};
+  min-width: ${(props) => getMediaWidth(props.variant)};
   height: 64px;
 
   img {
@@ -11,7 +20,7 @@ const MediaContainer = styled.div `
     object-fit: cover;
   }
 `;
-const InlineCardMedia = ({ children }) => {
-    return React.createElement(MediaContainer, null, children);
+const InlineCardMedia = ({ children, variant = 'rectangle' }) => {
+    return React.createElement(MediaContainer, { variant: variant }, children);
 };
 export default InlineCardMedia;

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export interface ToggleProps {
+    value: boolean;
+    onChange: (value: boolean) => void;
+}
+declare const Toggle: ({ value, onChange }: ToggleProps) => JSX.Element;
+export default Toggle;

package/build/components/Toggle/Toggle.component.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import styled from 'styled-components';
+import darkTheme from '../../theme/dark.theme';
+const ToggleOuter = styled(motion.div) `
+  width: 42px;
+  height: 24px;
+  border-radius: 12px;
+
+  background-color: ${(props) => props.theme.colours.controlBackground};
+  cursor: pointer;
+
+  display: flex;
+  align-items: center;
+`;
+const ToggleDot = styled(motion.div) `
+  height: 16px;
+  width: 16px;
+  border-radius: 16px;
+  background-color: ${(props) => props.theme.colours.defaultFont};
+
+  transform: translateX(4px);
+`;
+const toggleOuterVariants = {
+    off: { backgroundColor: darkTheme.colours.controlBackground },
+    on: { backgroundColor: darkTheme.colours.statusSuccess.dull },
+};
+const toggleDotVariants = {
+    off: { transform: 'translateX(4px)' },
+    on: { transform: 'translateX(22px)' },
+};
+const Toggle = ({ value, onChange }) => {
+    return (React.createElement(ToggleOuter, { animate: value ? 'on' : 'off', variants: toggleOuterVariants, transition: { type: 'spring', duration: 0.3 }, onClick: () => onChange(!value) },
+        React.createElement(ToggleDot, { animate: value ? 'on' : 'off', variants: toggleDotVariants, transition: { type: 'spring', duration: 0.3 } })));
+};
+export default Toggle;

package/build/theme/dark.theme.js

@@ -32,21 +32,26 @@ const darkTheme = {
         uploadBackground: '#5e6167',
         uploadIcon: '#e2e2e2',
         cardBackground: '#494b50',
+        cardBackgroundSecondary: '#525459',
         statusInfo: {
             main: '#83bfff',
             contrast: '#191919',
+            dull: '#0070e8',
         },
         statusSuccess: {
             main: '#8ddaa9',
             contrast: '#191919',
+            dull: '#35a35d',
         },
         statusWarn: {
             main: '#f1a374',
             contrast: '#191919',
+            dull: '#c35514',
         },
         statusDanger: {
             main: '#e87a7a',
             contrast: '#191919',
+            dull: '#b51f1f',
         },
     },
     fonts: {

package/build/theme/default.theme.js

@@ -33,21 +33,26 @@ const defaultTheme = {
         uploadBackground: colours.grey20,
         uploadIcon: colours.grey10,
         cardBackground: colours.white,
+        cardBackgroundSecondary: colours.white,
         statusInfo: {
             main: colours.blue,
             contrast: colours.blue,
+            dull: colours.blue,
         },
         statusSuccess: {
             main: colours.green,
             contrast: colours.green,
+            dull: colours.green,
         },
         statusWarn: {
             main: colours.yellow,
             contrast: colours.yellow,
+            dull: colours.yellow,
         },
         statusDanger: {
             main: colours.red,
             contrast: colours.red,
+            dull: colours.red,
         },
     },
     fonts: {

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

@@ -8,6 +8,7 @@ export interface IPalette {
 export interface IStatus {
     main: string;
     contrast: string;
+    dull: string;
 }
 export interface IFont {
     family: string;
@@ -36,6 +37,7 @@ export interface LegoTheme {
         uploadBackground: string;
         uploadIcon: string;
         cardBackground: string;
+        cardBackgroundSecondary: string;
         statusInfo: IStatus;
         statusSuccess: IStatus;
         statusWarn: IStatus;

package/package.json

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