@quoll/ui-components - npm Package Compare versions

Comparing version 0.4.0 to 0.5.0

dist/Modal/ModalActions.d.ts

@@ -8,8 +8,18 @@ import React, { HTMLAttributes } from "react";
 declare type Align = keyof typeof alignMap;
+declare const directionMap: {
+    readonly row: "row";
+    readonly "row-reverse": "row-reverse";
+    readonly column: "column";
+    readonly "column-reverse": "column-reverse";
+};
+declare type Direction = keyof typeof directionMap;
 declare type DivProps = HTMLAttributes<HTMLDivElement>;
 declare type OwnProps = {
+    /** Flex alignment for the children */
     align?: Align;
+    /** Flex direction for the children */
+    direction?: Direction;
 };
 declare type Props = OwnProps & DivProps;
-export declare const ModalActions: ({ align, ...rest }: Props) => React.JSX.Element;
+export declare const ModalActions: ({ align, direction, ...rest }: Props) => React.JSX.Element;
 export {};

dist/ui-components.cjs.development.js

@@ -236,3 +236,3 @@ 'use strict';
 
-var _excluded$2 = ["align"];
+var _excluded$2 = ["align", "direction"];
 
@@ -245,6 +245,13 @@ var _templateObject$8;
 };
+var directionMap = {
+  row: "row",
+  "row-reverse": "row-reverse",
+  column: "column",
+  "column-reverse": "column-reverse"
+};
 
 var _ModalActions = /*#__PURE__*/styled__default.div(function (_ref) {
-  var $align = _ref.$align;
-  return styled.css(_templateObject$8 || (_templateObject$8 = _taggedTemplateLiteralLoose(["\n    display: flex;\n    justify-content: ", ";\n    gap: 10px;\n    margin-top: 15px;\n  "])), alignMap[$align]);
+  var $align = _ref.$align,
+      $direction = _ref.$direction;
+  return styled.css(_templateObject$8 || (_templateObject$8 = _taggedTemplateLiteralLoose(["\n    display: flex;\n    flex-direction: ", ";\n    justify-content: ", ";\n    gap: 10px;\n    margin-top: 15px;\n  "])), directionMap[$direction], alignMap[$align]);
 });
@@ -255,6 +262,9 @@
       align = _ref2$align === void 0 ? "end" : _ref2$align,
+      _ref2$direction = _ref2.direction,
+      direction = _ref2$direction === void 0 ? "row" : _ref2$direction,
       rest = _objectWithoutPropertiesLoose(_ref2, _excluded$2);
 
   return /*#__PURE__*/React.createElement(_ModalActions, Object.assign({
-    "$align": align
+    "$align": align,
+    "$direction": direction
   }, rest));
@@ -284,3 +294,3 @@ };
   var colors = _ref2.theme.colors;
-  return styled.css(_templateObject$9 || (_templateObject$9 = _taggedTemplateLiteralLoose(["\n    margin: 200px 0 0;\n    width: 100%;\n    max-width: 400px;\n    background-color: ", ";\n    outline: none;\n    border-radius: 4px;\n    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);\n\n    &__overlay {\n      position: fixed;\n      top: 0px;\n      left: 0px;\n      right: 0px;\n      bottom: 0px;\n      background-color: rgba(196, 196, 196, 0.5);\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      z-index: 1;\n    }\n\n    /* No scroll on mobile Safari as per https://github.com/reactjs/react-modal/issues/191#issuecomment-302172285 */\n    &__body-open {\n      overflow: hidden;\n      position: fixed;\n      width: 100%;\n      height: 100%;\n    }\n  "])), colors.white);
+  return styled.css(_templateObject$9 || (_templateObject$9 = _taggedTemplateLiteralLoose(["\n    width: 100%;\n    max-width: 400px;\n    background-color: ", ";\n    outline: none;\n    border-radius: 4px;\n    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);\n\n    &__overlay {\n      position: fixed;\n      top: 0px;\n      left: 0px;\n      right: 0px;\n      bottom: 0px;\n      background-color: rgba(196, 196, 196, 0.5);\n      display: flex;\n      flex-direction: column;\n      justify-content: center;\n      align-items: center;\n      z-index: 1;\n    }\n\n    /* No scroll on mobile Safari as per https://github.com/reactjs/react-modal/issues/191#issuecomment-302172285 */\n    &__body-open {\n      overflow: hidden;\n      position: fixed;\n      width: 100%;\n      height: 100%;\n    }\n  "])), colors.white);
 });
@@ -287,0 +297,0 @@ Modal.Inner = ModalInner;

dist/ui-components.cjs.production.min.js

@@ -1,2 +0,2 @@
-"use strict";function n(n){return n&&"object"==typeof n&&"default"in n?n.default:n}Object.defineProperty(exports,"__esModule",{value:!0});var e,t,o,r=require("@quoll/ui-primitives"),i=require("styled-components"),a=n(i),l=require("polished"),s=n(require("react-calendar")),c=n(require("react")),u=require("react-icons/md"),d=n(require("react-modal"));function p(){return(p=Object.assign?Object.assign.bind():function(n){for(var e=1;e<arguments.length;e++){var t=arguments[e];for(var o in t)Object.prototype.hasOwnProperty.call(t,o)&&(n[o]=t[o])}return n}).apply(this,arguments)}function f(n,e){if(null==n)return{};var t,o,r={},i=Object.keys(n);for(o=0;o<i.length;o++)e.indexOf(t=i[o])>=0||(r[t]=n[t]);return r}function m(n,e){return e||(e=n.slice(0)),n.raw=e,n}var b,x={default:{colors:r.colorPalette,font:{family:"Roboto, sans-serif",color:r.colorPalette.mineShaft},media:p({},r.breakpoints,{breakpointBetweenAny:function(n,e){return function(t){return i.css(o||(o=m(["\n    @media (min-width: ","px) and (max-width: ","px) {\n      ",";\n    }\n  "])),n,e-1,t)}},breakpointUp:function(n){return function(t){return i.css(e||(e=m(["\n  @media (min-width: ","px) {\n    ",";\n  }\n"])),n,t)}},breakpointDown:function(n){return function(e){return i.css(t||(t=m(["\n  @media (max-width: ","px) {\n    ",";\n  }\n"])),n-1,e)}}})}},g=function(n){var e=n.fontFamily,t=n.fontColor,o=n.backgroundColor,r=n.bold,a=n.disabled,s=n.noHitbox;return i.css(b||(b=m(["\n  border: none;\n  border-radius: 4px;\n\n  font-family: ",";\n  font-size: 14px;\n  font-weight: ",";\n\n  height: ",";\n  min-width: ",";\n  padding: ",";\n\n  background-color: ",";\n  color: ",";\n  cursor: ",";\n\n  &:hover {\n    background-color: ",";\n  }\n"])),e,r?500:null,s?"unset":"36px",s?"unset":"120px",s?0:"0 15px",a?l.lighten(.1,o):o,a?l.lighten(.4,t):t,a?"unset":"pointer",!a&&l.darken(.05,o))},h=a.button((function(n){var e=n.theme,t=e.font;return g({fontFamily:t.family,fontColor:t.color,backgroundColor:e.colors.whiteSmoke,disabled:n.disabled})}));h.displayName="Button";var v=a.button((function(n){var e=n.theme,t=e.font;return g({fontFamily:t.family,fontColor:t.color,backgroundColor:e.colors.mediumAquamarine,disabled:n.disabled})}));v.displayName="ButtonPrimary";var y,w=a.button((function(n){var e=n.theme,t=e.font;return g({fontFamily:t.family,fontColor:t.color,backgroundColor:e.colors.transparent,bold:!0,disabled:n.disabled,noHitbox:!0})}));w.displayName="ButtonPlain";var k,C,j,N,E,O,q,z,M=a(s)((function(n){var e=n.theme.font;return i.css(y||(y=m(["\n    &.react-calendar {\n      border: none;\n      max-width: 300px;\n\n      * {\n        font-family: ",";\n      }\n    }\n  "])),e.family)})),_=a.div(k||(k=m(["\n  position: relative;\n  height: 4px;\n"]))),B=a.div((function(n){var e=n.theme.colors;return i.css(C||(C=m(["\n    position: absolute;\n    width: 10%;\n    height: 100%;\n    background-color: ",";\n    animation: 1s linear 0s slide infinite;\n\n    @keyframes slide {\n      from {\n        left: 0;\n      }\n      to {\n        left: 100%;\n        width: 50%;\n        transform: translateX(-100%);\n      }\n    }\n  "])),e.mediumAquamarine)})),P={Close:u.MdClose,Help:u.MdHelp,Map:u.MdMap,Next:u.MdNavigateNext,Previous:u.MdNavigateBefore,Settings:u.MdSettings},A=Object.keys(P),H=function(n){var e=n.size;return c.createElement(P[n.icon],{size:void 0===e?40:e})},S=["icon","size"],F=a.button((function(n){var e=n.theme.colors,t=n.disabled;return i.css(j||(j=m(["\n    display: block;\n    border: none;\n    background: transparent;\n    padding: 0;\n    color: ",";\n    cursor: ",";\n  "])),t?e.grey:"unset",t?"unset":"pointer")})),I=function(n){var e=n.icon,t=n.size,o=f(n,S);return c.createElement(F,Object.assign({},o),c.createElement(H,{icon:e,size:t}))},$=["onChange"],D=a.input((function(n){var e=n.theme;return i.css(N||(N=m(["\n    font-family: ",";\n    font-size: 14px;\n    color: ",";\n    border: 1px solid ",";\n    border-radius: 4px;\n    padding: 8px;\n    width: 100%;\n  "])),e.font.family,e.font.color,e.colors.grey)})),L=a.div(E||(E=m(["\n  padding: 20px;\n"]))),R=a.div(O||(O=m(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n"]))),U=["align"],X={start:"flex-start",center:"center",end:"flex-end"},G=a.div((function(n){var e=n.$align;return i.css(q||(q=m(["\n    display: flex;\n    justify-content: ",";\n    gap: 10px;\n    margin-top: 15px;\n  "])),X[e])})),J=["className"],K=function(n){var e=n.className,t=f(n,J);return c.createElement(d,Object.assign({className:e,overlayClassName:e+"__overlay",bodyOpenClassName:e+"__body-open"},t))};K.setAppElement=function(n){return d.setAppElement(n)};var Q=a(K)((function(n){var e=n.theme.colors;return i.css(z||(z=m(["\n    margin: 200px 0 0;\n    width: 100%;\n    max-width: 400px;\n    background-color: ",";\n    outline: none;\n    border-radius: 4px;\n    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);\n\n    &__overlay {\n      position: fixed;\n      top: 0px;\n      left: 0px;\n      right: 0px;\n      bottom: 0px;\n      background-color: rgba(196, 196, 196, 0.5);\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      z-index: 1;\n    }\n\n    /* No scroll on mobile Safari as per https://github.com/reactjs/react-modal/issues/191#issuecomment-302172285 */\n    &__body-open {\n      overflow: hidden;\n      position: fixed;\n      width: 100%;\n      height: 100%;\n    }\n  "])),e.white)}));Q.Inner=L,Q.Header=function(n){var e="onClose"in n?n.onClose:null;return c.createElement(R,null,"children"in n?n.children:null,c.createElement("div",null),e&&c.createElement(I,{icon:"Close",size:30,onClick:e}))},Q.Actions=function(n){var e=n.align,t=void 0===e?"end":e,o=f(n,U);return c.createElement(G,Object.assign({$align:t},o))},exports.Button=h,exports.ButtonPlain=w,exports.ButtonPrimary=v,exports.Calendar=M,exports.HorizontalLoader=function(){return c.createElement(_,null,c.createElement(B,null))},exports.Icon=H,exports.IconButton=I,exports.Input=function(n){var e=n.onChange,t=f(n,$);return c.createElement(D,Object.assign({onChange:function(n){e(n.target.value)},type:"text"},t))},exports.Modal=Q,exports.iconNames=A,exports.themes=x;
+"use strict";function n(n){return n&&"object"==typeof n&&"default"in n?n.default:n}Object.defineProperty(exports,"__esModule",{value:!0});var e,t,o,r=require("@quoll/ui-primitives"),i=require("styled-components"),a=n(i),l=require("polished"),s=n(require("react-calendar")),c=n(require("react")),u=require("react-icons/md"),d=n(require("react-modal"));function f(){return(f=Object.assign?Object.assign.bind():function(n){for(var e=1;e<arguments.length;e++){var t=arguments[e];for(var o in t)Object.prototype.hasOwnProperty.call(t,o)&&(n[o]=t[o])}return n}).apply(this,arguments)}function p(n,e){if(null==n)return{};var t,o,r={},i=Object.keys(n);for(o=0;o<i.length;o++)e.indexOf(t=i[o])>=0||(r[t]=n[t]);return r}function m(n,e){return e||(e=n.slice(0)),n.raw=e,n}var b,x={default:{colors:r.colorPalette,font:{family:"Roboto, sans-serif",color:r.colorPalette.mineShaft},media:f({},r.breakpoints,{breakpointBetweenAny:function(n,e){return function(t){return i.css(o||(o=m(["\n    @media (min-width: ","px) and (max-width: ","px) {\n      ",";\n    }\n  "])),n,e-1,t)}},breakpointUp:function(n){return function(t){return i.css(e||(e=m(["\n  @media (min-width: ","px) {\n    ",";\n  }\n"])),n,t)}},breakpointDown:function(n){return function(e){return i.css(t||(t=m(["\n  @media (max-width: ","px) {\n    ",";\n  }\n"])),n-1,e)}}})}},g=function(n){var e=n.fontFamily,t=n.fontColor,o=n.backgroundColor,r=n.bold,a=n.disabled,s=n.noHitbox;return i.css(b||(b=m(["\n  border: none;\n  border-radius: 4px;\n\n  font-family: ",";\n  font-size: 14px;\n  font-weight: ",";\n\n  height: ",";\n  min-width: ",";\n  padding: ",";\n\n  background-color: ",";\n  color: ",";\n  cursor: ",";\n\n  &:hover {\n    background-color: ",";\n  }\n"])),e,r?500:null,s?"unset":"36px",s?"unset":"120px",s?0:"0 15px",a?l.lighten(.1,o):o,a?l.lighten(.4,t):t,a?"unset":"pointer",!a&&l.darken(.05,o))},h=a.button((function(n){var e=n.theme,t=e.font;return g({fontFamily:t.family,fontColor:t.color,backgroundColor:e.colors.whiteSmoke,disabled:n.disabled})}));h.displayName="Button";var v=a.button((function(n){var e=n.theme,t=e.font;return g({fontFamily:t.family,fontColor:t.color,backgroundColor:e.colors.mediumAquamarine,disabled:n.disabled})}));v.displayName="ButtonPrimary";var y,w=a.button((function(n){var e=n.theme,t=e.font;return g({fontFamily:t.family,fontColor:t.color,backgroundColor:e.colors.transparent,bold:!0,disabled:n.disabled,noHitbox:!0})}));w.displayName="ButtonPlain";var k,C,j,N,E,O,q,z,M=a(s)((function(n){var e=n.theme.font;return i.css(y||(y=m(["\n    &.react-calendar {\n      border: none;\n      max-width: 300px;\n\n      * {\n        font-family: ",";\n      }\n    }\n  "])),e.family)})),_=a.div(k||(k=m(["\n  position: relative;\n  height: 4px;\n"]))),B=a.div((function(n){var e=n.theme.colors;return i.css(C||(C=m(["\n    position: absolute;\n    width: 10%;\n    height: 100%;\n    background-color: ",";\n    animation: 1s linear 0s slide infinite;\n\n    @keyframes slide {\n      from {\n        left: 0;\n      }\n      to {\n        left: 100%;\n        width: 50%;\n        transform: translateX(-100%);\n      }\n    }\n  "])),e.mediumAquamarine)})),P={Close:u.MdClose,Help:u.MdHelp,Map:u.MdMap,Next:u.MdNavigateNext,Previous:u.MdNavigateBefore,Settings:u.MdSettings},A=Object.keys(P),H=function(n){var e=n.size;return c.createElement(P[n.icon],{size:void 0===e?40:e})},S=["icon","size"],F=a.button((function(n){var e=n.theme.colors,t=n.disabled;return i.css(j||(j=m(["\n    display: block;\n    border: none;\n    background: transparent;\n    padding: 0;\n    color: ",";\n    cursor: ",";\n  "])),t?e.grey:"unset",t?"unset":"pointer")})),I=function(n){var e=n.icon,t=n.size,o=p(n,S);return c.createElement(F,Object.assign({},o),c.createElement(H,{icon:e,size:t}))},$=["onChange"],D=a.input((function(n){var e=n.theme;return i.css(N||(N=m(["\n    font-family: ",";\n    font-size: 14px;\n    color: ",";\n    border: 1px solid ",";\n    border-radius: 4px;\n    padding: 8px;\n    width: 100%;\n  "])),e.font.family,e.font.color,e.colors.grey)})),L=a.div(E||(E=m(["\n  padding: 20px;\n"]))),R=a.div(O||(O=m(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n"]))),U=["align","direction"],X={start:"flex-start",center:"center",end:"flex-end"},G={row:"row","row-reverse":"row-reverse",column:"column","column-reverse":"column-reverse"},J=a.div((function(n){var e=n.$align,t=n.$direction;return i.css(q||(q=m(["\n    display: flex;\n    flex-direction: ",";\n    justify-content: ",";\n    gap: 10px;\n    margin-top: 15px;\n  "])),G[t],X[e])})),K=["className"],Q=function(n){var e=n.className,t=p(n,K);return c.createElement(d,Object.assign({className:e,overlayClassName:e+"__overlay",bodyOpenClassName:e+"__body-open"},t))};Q.setAppElement=function(n){return d.setAppElement(n)};var T=a(Q)((function(n){var e=n.theme.colors;return i.css(z||(z=m(["\n    width: 100%;\n    max-width: 400px;\n    background-color: ",";\n    outline: none;\n    border-radius: 4px;\n    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);\n\n    &__overlay {\n      position: fixed;\n      top: 0px;\n      left: 0px;\n      right: 0px;\n      bottom: 0px;\n      background-color: rgba(196, 196, 196, 0.5);\n      display: flex;\n      flex-direction: column;\n      justify-content: center;\n      align-items: center;\n      z-index: 1;\n    }\n\n    /* No scroll on mobile Safari as per https://github.com/reactjs/react-modal/issues/191#issuecomment-302172285 */\n    &__body-open {\n      overflow: hidden;\n      position: fixed;\n      width: 100%;\n      height: 100%;\n    }\n  "])),e.white)}));T.Inner=L,T.Header=function(n){var e="onClose"in n?n.onClose:null;return c.createElement(R,null,"children"in n?n.children:null,c.createElement("div",null),e&&c.createElement(I,{icon:"Close",size:30,onClick:e}))},T.Actions=function(n){var e=n.align,t=void 0===e?"end":e,o=n.direction,r=void 0===o?"row":o,i=p(n,U);return c.createElement(J,Object.assign({$align:t,$direction:r},i))},exports.Button=h,exports.ButtonPlain=w,exports.ButtonPrimary=v,exports.Calendar=M,exports.HorizontalLoader=function(){return c.createElement(_,null,c.createElement(B,null))},exports.Icon=H,exports.IconButton=I,exports.Input=function(n){var e=n.onChange,t=p(n,$);return c.createElement(D,Object.assign({onChange:function(n){e(n.target.value)},type:"text"},t))},exports.Modal=T,exports.iconNames=A,exports.themes=x;
 //# sourceMappingURL=ui-components.cjs.production.min.js.map

dist/ui-components.esm.js

@@ -229,3 +229,3 @@ import { colorPalette, breakpoints } from '@quoll/ui-primitives';
 
-var _excluded$2 = ["align"];
+var _excluded$2 = ["align", "direction"];
 
@@ -238,6 +238,13 @@ var _templateObject$8;
 };
+var directionMap = {
+  row: "row",
+  "row-reverse": "row-reverse",
+  column: "column",
+  "column-reverse": "column-reverse"
+};
 
 var _ModalActions = /*#__PURE__*/styled.div(function (_ref) {
-  var $align = _ref.$align;
-  return css(_templateObject$8 || (_templateObject$8 = _taggedTemplateLiteralLoose(["\n    display: flex;\n    justify-content: ", ";\n    gap: 10px;\n    margin-top: 15px;\n  "])), alignMap[$align]);
+  var $align = _ref.$align,
+      $direction = _ref.$direction;
+  return css(_templateObject$8 || (_templateObject$8 = _taggedTemplateLiteralLoose(["\n    display: flex;\n    flex-direction: ", ";\n    justify-content: ", ";\n    gap: 10px;\n    margin-top: 15px;\n  "])), directionMap[$direction], alignMap[$align]);
 });
@@ -248,6 +255,9 @@
       align = _ref2$align === void 0 ? "end" : _ref2$align,
+      _ref2$direction = _ref2.direction,
+      direction = _ref2$direction === void 0 ? "row" : _ref2$direction,
       rest = _objectWithoutPropertiesLoose(_ref2, _excluded$2);
 
   return /*#__PURE__*/React.createElement(_ModalActions, Object.assign({
-    "$align": align
+    "$align": align,
+    "$direction": direction
   }, rest));
@@ -277,3 +287,3 @@ };
   var colors = _ref2.theme.colors;
-  return css(_templateObject$9 || (_templateObject$9 = _taggedTemplateLiteralLoose(["\n    margin: 200px 0 0;\n    width: 100%;\n    max-width: 400px;\n    background-color: ", ";\n    outline: none;\n    border-radius: 4px;\n    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);\n\n    &__overlay {\n      position: fixed;\n      top: 0px;\n      left: 0px;\n      right: 0px;\n      bottom: 0px;\n      background-color: rgba(196, 196, 196, 0.5);\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      z-index: 1;\n    }\n\n    /* No scroll on mobile Safari as per https://github.com/reactjs/react-modal/issues/191#issuecomment-302172285 */\n    &__body-open {\n      overflow: hidden;\n      position: fixed;\n      width: 100%;\n      height: 100%;\n    }\n  "])), colors.white);
+  return css(_templateObject$9 || (_templateObject$9 = _taggedTemplateLiteralLoose(["\n    width: 100%;\n    max-width: 400px;\n    background-color: ", ";\n    outline: none;\n    border-radius: 4px;\n    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);\n\n    &__overlay {\n      position: fixed;\n      top: 0px;\n      left: 0px;\n      right: 0px;\n      bottom: 0px;\n      background-color: rgba(196, 196, 196, 0.5);\n      display: flex;\n      flex-direction: column;\n      justify-content: center;\n      align-items: center;\n      z-index: 1;\n    }\n\n    /* No scroll on mobile Safari as per https://github.com/reactjs/react-modal/issues/191#issuecomment-302172285 */\n    &__body-open {\n      overflow: hidden;\n      position: fixed;\n      width: 100%;\n      height: 100%;\n    }\n  "])), colors.white);
 });
@@ -280,0 +290,0 @@ Modal.Inner = ModalInner;

package.json

 {
   "name": "@quoll/ui-components",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "UI components for the web apps",
@@ -84,3 +84,3 @@ "main": "dist/index.js",
   ],
-  "gitHead": "d267f762546548120ece157477d0bbed6fa517f8"
+  "gitHead": "06628c005f6bd51200d3ea58801ac4af0c4be2b9"
 }

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

112912

increased by3.53%

Lines of code

1364

increased by3.33%

No dependency changes