@exivity/ui - npm Package Compare versions

Comparing version 0.7.5 to 0.8.0

CHANGELOG.md

@@ -5,2 +5,11 @@ # Change Log
 
+# [0.8.0](https://github.com/exivity/ui/compare/v0.7.5...v0.8.0) (2019-03-18)
+
+
+### Features
+
+* modal ([#37](https://github.com/exivity/ui/issues/37)) ([b263836](https://github.com/exivity/ui/commit/b263836))
+
+
+
 ## [0.7.5](https://github.com/exivity/ui/compare/v0.7.4...v0.7.5) (2019-03-15)
@@ -7,0 +16,0 @@

Modal/Modal.d.ts

@@ -5,5 +5,5 @@ import React, { FC } from 'react';
     children: React.ReactNode;
-    buttons: React.ReactElement[];
+    buttons: JSX.Element[];
 }
 export declare const Modal: FC<ModalProps>;
 export {};

Modal/Modal.js

@@ -5,2 +5,13 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
 };
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 import React from 'react';
@@ -10,6 +21,8 @@ import styled from 'styled-components';
 import { Button } from '../Button';
-var Overlay = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100vw;\n  height: 100vh;\n  background-color: rgba(0,0,0,0.1);\n  position: absolute;\n"], ["\n  width: 100vw;\n  height: 100vh;\n  background-color: rgba(0,0,0,0.1);\n  position: absolute;\n"])));
+import { Heading } from '../Heading';
+var Overlay = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100vw;\n  height: 100vh;\n  background-color: rgba(0,0,0,0.1);\n  position: absolute;\n  z-index: ", ";\n"], ["\n  width: 100vw;\n  height: 100vh;\n  background-color: rgba(0,0,0,0.1);\n  position: absolute;\n  z-index: ", ";\n"])), fromTheme(function (theme) { return theme.global.zPriority.three; }));
 var ModalWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: absolute;\n  width: 600px;\n  background-color: ", ";\n  left: calc((100vw - 600px) / 2);\n  top: 50px;\n"], ["\n  position: absolute;\n  width: 600px;\n  background-color: ", ";\n  left: calc((100vw - 600px) / 2);\n  top: 50px;\n"])), fromTheme(function (theme) { return theme.colours.white; }));
-var Body = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  padding: ", "em;\n  max-height: 400px;\n  border-top: solid 1px ", ";\n  border-bottom: solid 1px ", ";\n  overflow-y: auto;\n"], ["\n  padding: ", "em;\n  max-height: 400px;\n  border-top: solid 1px ", ";\n  border-bottom: solid 1px ", ";\n  overflow-y: auto;\n"])), fromTheme(function (theme) { return theme.global.spacing * 1.5; }), fromTheme(function (theme) { return theme.colours.gray; }), fromTheme(function (theme) { return theme.colours.gray; }));
-var Footer = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  padding: ", "em ", "em;\n  color: ", ";\n  display: flex;\n  flex-direction: row-reverse;\n  ", " {\n    margin-left: 20px;\n  }\n"], ["\n  padding: ", "em ", "em;\n  color: ", ";\n  display: flex;\n  flex-direction: row-reverse;\n  ", " {\n    margin-left: 20px;\n  }\n"])), fromTheme(function (theme) { return theme.global.spacing; }), fromTheme(function (theme) { return theme.global.spacing * 2; }), fromTheme(function (theme) { return theme.colours.gray; }), Button);
+var Header = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  padding: ", "em ", "em;\n"], ["\n  padding: ", "em ", "em;\n"])), fromTheme(function (theme) { return theme.global.spacing; }), fromTheme(function (theme) { return theme.global.spacing * 1.5; }));
+var Body = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  padding: ", "em;\n  max-height: 400px;\n  border-top: solid 1px ", ";\n  border-bottom: solid 1px ", ";\n  overflow-y: auto;\n"], ["\n  padding: ", "em;\n  max-height: 400px;\n  border-top: solid 1px ", ";\n  border-bottom: solid 1px ", ";\n  overflow-y: auto;\n"])), fromTheme(function (theme) { return theme.global.spacing * 1.5; }), fromTheme(function (theme) { return theme.colours.gray; }), fromTheme(function (theme) { return theme.colours.gray; }));
+var Footer = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  padding: ", "em ", "em;\n  color: ", ";\n  display: flex;\n  flex-direction: row-reverse;\n  ", " {\n    margin-left: 20px;\n  }\n"], ["\n  padding: ", "em ", "em;\n  color: ", ";\n  display: flex;\n  flex-direction: row-reverse;\n  ", " {\n    margin-left: 20px;\n  }\n"])), fromTheme(function (theme) { return theme.global.spacing; }), fromTheme(function (theme) { return theme.global.spacing * 2; }), fromTheme(function (theme) { return theme.colours.gray; }), Button);
 export var Modal = function (_a) {
@@ -19,5 +32,7 @@ var title = _a.title, children = _a.children, _b = _a.buttons, buttons = _b === void 0 ? [] : _b;
         React.createElement(ModalWrapper, null,
+            React.createElement(Header, null,
+                React.createElement(Heading, null, title)),
             React.createElement(Body, null, children),
-            React.createElement(Footer, null, buttons))));
+            React.createElement(Footer, null, React.Children.map(buttons, function (child, index) { return React.cloneElement(child, __assign({}, child.props, { key: index })); })))));
 };
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package.json

 {
   "name": "@exivity/ui",
-  "version": "0.7.5",
+  "version": "0.8.0",
   "description": "A collection of components to build interfaces",
@@ -5,0 +5,0 @@ "keywords": [

themes/lightTheme.d.ts

@@ -40,2 +40,7 @@ export declare const BASE_SIZE = 16;
         };
+        zPriority: {
+            one: number;
+            two: number;
+            three: number;
+        };
     };
@@ -42,0 +47,0 @@ colours: {

themes/lightTheme.js

@@ -58,2 +58,7 @@ var __assign = (this && this.__assign) || function () {
             huge: preciseEm(1.5) // 24px
+        },
+        zPriority: {
+            one: 1,
+            two: 2,
+            three: 3
         }
@@ -60,0 +65,0 @@ },

utils/styled/index.d.ts

@@ -49,2 +49,7 @@ import { Theme } from '../../themes';
             };
+            zPriority: {
+                one: number;
+                two: number;
+                three: number;
+            };
         };
@@ -51,0 +56,0 @@ colours: {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

109805

increased by0.34%

Lines of code

1775

increased by1.37%

Worsened metrics

Number of package files

137

decreased by-1.44%

No dependency changes