@dtdot/lego 2.0.0-12 → 2.0.0-13

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

@@ -0,0 +1,7 @@
+import React from 'react';
+export interface ControlLineProps {
+    children: React.ReactNode;
+    variant?: 'action' | 'spaced';
+}
+declare const ControlLine: ({ children, variant }: ControlLineProps) => JSX.Element | null;
+export default ControlLine;

package/build/components/ControlLine/ControlLine.component.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import styled from 'styled-components';
+const ActionContainer = styled.div `
+  display: flex;
+  width: 100%;
+
+  > :first-child {
+    flex-grow: 1;
+    padding-right: 3px;
+  }
+`;
+const SpacedContainer = styled.div `
+  display: flex;
+
+  > * {
+    flex-grow: 1;
+    padding-right: 3px;
+  }
+
+  > *:last-child {
+    padding-right: 0;
+  }
+`;
+const ControlLine = ({ children, variant = 'action' }) => {
+    if (variant === 'action') {
+        return React.createElement(ActionContainer, null, children);
+    }
+    if (variant === 'spaced') {
+        return React.createElement(SpacedContainer, null, children);
+    }
+    return null;
+};
+export default ControlLine;

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

@@ -10,7 +10,7 @@ import { ControlStyles } from '../../shared/ControlStyles';
 import useFormNode, { getValue } from '../Form/useFormNode.hook';
 const InputContainer = styled.div `
   position: relative;
-  margin: 2px 0;
+  border-radius: 2px;
 
   background-color: ${(props) => props.theme.colours.controlBackground};
 `;

package/build/index.d.ts

@@ -12,6 +12,7 @@ export { default as Card } from './components/Card/Card.component';
 export { default as CardGroup } from './components/Card/CardGroup.component';
 export { default as Checklist } from './components/Checklist/Checklist.component';
 export { default as ControlGroup } from './components/ControlGroup/ControlGroup.component';
+export { default as ControlLine } from './components/ControlLine/ControlLine.component';
 export { default as FancyCheckbox } from './components/FancyCheckbox/FancyCheckbox.component';
 export { default as Form } from './components/Form/Form.component';
 export { default as Notification } from './components/Notification/Notification.component';

package/build/index.js

@@ -12,6 +12,7 @@ export { default as Card } from './components/Card/Card.component';
 export { default as CardGroup } from './components/Card/CardGroup.component';
 export { default as Checklist } from './components/Checklist/Checklist.component';
 export { default as ControlGroup } from './components/ControlGroup/ControlGroup.component';
+export { default as ControlLine } from './components/ControlLine/ControlLine.component';
 export { default as FancyCheckbox } from './components/FancyCheckbox/FancyCheckbox.component';
 export { default as Form } from './components/Form/Form.component';
 export { default as Notification } from './components/Notification/Notification.component';

package/build/shared/ControlStyles.js

@@ -16,7 +16,7 @@ export const ControlStyles = css `
   color: ${(props) => getThemeControlColours(props.theme).font};
   background-color: ${(props) => getThemeControlColours(props.theme).background};
 
-  border: 1px solid ${(props) => getThemeControlColours(props.theme).border};
+  border: 1px solid ${(props) => getThemeControlColours(props.theme).background};
   border-radius: 2px;
 
   &:hover {

package/build/theme/dark.theme.js

@@ -35,9 +35,11 @@ const darkTheme = {
         faintBorder: '#cccccc1f',
         controlBackground: '#5e6167',
         controlBackgroundDisabled: '#47494d',
-        controlBorder: '#565656',
+        controlBorder: '#595b5e',
+        // controlBorder: '#565656',
         controlBorderFocus: '#4289de',
-        controlBorderHover: '#4a4949',
+        controlBorderHover: '#686c74',
+        // controlBorderHover: '#4a4949',
         controlPlaceholder: '#949494',
         controlDescriptionColour: '#cbcbcb',
         uploadBackground: '#5e6167',

package/package.json

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