@exivity/ui - npm Package Compare versions

Comparing version 0.5.5 to 0.6.0

Button/Button.js

@@ -5,16 +5,5 @@ 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 styled, { css } from 'styled-components';
 import { Icon } from '../Icon';
-import { defaultStyledProps, fromTheme, hexToString, matchThemeProp } from '../utils/styled';
+import { fromTheme, hexToString, matchThemeProp } from '../utils/styled';
 import { preciseEm } from '../utils/styled/isolated';
@@ -35,3 +24,2 @@ export var Button = styled.button(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  font-family: ", ";\n  font-weight: 500;\n  font-size: ", "px;\n  color: ", ";\n  line-height: ", ";\n\n  text-transform: uppercase;\n  display: inline-flex;\n  position: relative;\n  appearance: none;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  min-width: 2.5em;\n  height: ", "; // 40px = 2.5 * 16\n  padding: 0 ", "em;\n  border: none;\n  border-radius: ", "px;\n  flex: none;\n  user-select: none;\n  white-space: nowrap;\n  text-decoration: none;\n  outline: none;\n\n  background-color: ", ";\n  --focus-color: ", ";\n\n  &:hover {\n    box-shadow: inset 10px 10px 999em rgba(0,0,0,", ");\n  }\n\n  &:focus {\n    box-shadow: inset 0 0 999em rgba(0,0,0,", "),\n      0 0 0 ", "px rgba(var(--focus-color), ", ");\n  }\n\n  &:active,\n  &.active {\n    box-shadow: inset 0 0 999em rgba(0,0,0,", "),\n      0 0 0 ", "px rgba(var(--focus-color), ", ");\n  }\n\n  &:after {\n    display: none;\n    content: \"\";\n    position: absolute;\n    top: -", "px;\n    right: -", "px;\n    bottom: -", "px;\n    left: -", "px;\n    border-radius: inherit;\n    background-color: rgba(255, 255, 255, 0.5);\n  }\n\n  &[disabled] {\n    pointer-events: none;\n    &:after {\n      display: block;\n    }\n  }\n\n  ", "\n\n  ", "\n\n  ", " {\n    font-size: 1.5em;\n    ", "\n  }\n"], ["\n  font-family: ", ";\n  font-weight: 500;\n  font-size: ",
     : preciseEm(2.85, 14)); }, Icon, function (props) { return props.round !== true && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      margin-right: ", "em;\n    "], ["\n      margin-right: ", "em;\n    "])), fromTheme(function (theme) { return theme.global.spacing / 2; })); });
-Button.defaultProps = __assign({}, defaultStyledProps, { primary: true });
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

CHANGELOG.md

@@ -5,2 +5,11 @@ # Change Log
 
+# [0.6.0](https://github.com/exivity/ui/compare/v0.5.5...v0.6.0) (2019-03-08)
+
+
+### Features
+
+* **SelectInput:** add component ([#30](https://github.com/exivity/ui/issues/30)) ([3c424b9](https://github.com/exivity/ui/commit/3c424b9))
+
+
+
 ## [0.5.5](https://github.com/exivity/ui/compare/v0.5.4...v0.5.5) (2019-03-08)
@@ -7,0 +16,0 @@

Checkbox/Checkbox.d.ts

@@ -8,3 +8,3 @@ import * as React from 'react';
 }
-export declare const PlainCheckbox: React.FC<ICheckboxProps>;
-export declare const Checkbox: import("styled-components").StyledComponent<React.FunctionComponent<ICheckboxProps>, any, {}, never>;
+export declare const StyledCheckbox: import("styled-components").StyledComponent<"input", any, {}, never>;
+export declare const Checkbox: React.FC<ICheckboxProps>;

Checkbox/Checkbox.js

@@ -28,7 +28,8 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
 var CheckboxWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    margin: 20px;\n    width: 100px;\n    height: 100px;\n    overflow: hidden;\n\n    ", "\n"], ["\n    margin: 20px;\n    width: 100px;\n    height: 100px;\n    overflow: hidden;\n\n    ",
-    "\n"])), function (props) { return props.checked && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        &:after {\n          position: relative;\n          left: 5px;\n          top: -30px;\n          transform: rotateZ(45deg);\n          border: solid #fff;\n          border-width: 0 3px 3px 0;\n          content: ' ';\n          display: block;\n          width: 6px;\n          height: 12px;\n          cursor: pointer;\n        }\n    "], ["\n        &:after {\n          position: relative;\n          left: 5px;\n          top: -30px;\n          transform: rotateZ(45deg);\n          border: solid #fff;\n          border-width: 0 3px 3px 0;\n          content: ' ';\n          display: block;\n          width: 6px;\n          height: 12px;\n          cursor: pointer;\n        }\n    "]))); });
-export var PlainCheckbox = function (_a) {
+    "\n"])), function (props) { return props.checked && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        &:after {\n          position: relative;\n          left: 5px;\n          top: -30px;\n          transform: rotateZ(45deg);\n          border: solid #fff;\n          border-width: 0 3px 3px 0;\n          content: ' ';\n          display: block;\n          width: 6px;\n          height: 12px;\n          cursor: pointer;\n          pointer-events: none;\n        }\n    "], ["\n        &:after {\n          position: relative;\n          left: 5px;\n          top: -30px;\n          transform: rotateZ(45deg);\n          border: solid #fff;\n          border-width: 0 3px 3px 0;\n          content: ' ';\n          display: block;\n          width: 6px;\n          height: 12px;\n          cursor: pointer;\n          pointer-events: none;\n        }\n    "]))); });
+export var StyledCheckbox = styled.input(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  width: 20px;\n  height: 20px;\n  cursor: pointer;\n  background: ", ";\n  color: black;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  border: none;\n  position: relative;\n  left: -5px;\n  top: -5px;\n\n  :focus {\n    outline:0;\n  }\n"], ["\n  width: 20px;\n  height: 20px;\n  cursor: pointer;\n  background: ", ";\n  color: black;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  border: none;\n  position: relative;\n  left: -5px;\n  top: -5px;\n\n  :focus {\n    outline:0;\n  }\n"])), function (props) { return props.checked ? 'rgba(40,40,40,0.7)' : 'rgba(40,40,40,0.2)'; });
+export var Checkbox = function (_a) {
     var checked = _a.checked, onClick = _a.onClick, className = _a.className, onChange = _a.onChange, props = __rest(_a, ["checked", "onClick", "className", "onChange"]);
     return (React.createElement(CheckboxWrapper, { checked: checked },
-        React.createElement("input", __assign({ className: className, type: 'checkbox', onClick: function (e) {
+        React.createElement(StyledCheckbox, __assign({ className: className, type: 'checkbox', onClick: function (e) {
                 var checked = e.target.checked;
@@ -40,3 +41,2 @@ onClick && onClick(checked);
 };
-export var Checkbox = styled(PlainCheckbox)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  width: 20px;\n  height: 20px;\n  cursor: pointer;\n  background: ", ";\n  color: black;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  border: none;\n  position: relative;\n  left: -5px;\n  top: -5px;\n\n  :focus {\n    outline:0;\n  }\n"], ["\n  width: 20px;\n  height: 20px;\n  cursor: pointer;\n  background: ", ";\n  color: black;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  border: none;\n  position: relative;\n  left: -5px;\n  top: -5px;\n\n  :focus {\n    outline:0;\n  }\n"])), function (props) { return props.checked ? 'rgba(40,40,40,0.7)' : 'rgba(40,40,40,0.2)'; });
 var templateObject_1, templateObject_2, templateObject_3;

Dropdown/Dropdown.d.ts

@@ -6,9 +6,10 @@ import React from 'react';
     className?: string;
-    button: React.ReactNode;
+    triggerComponent: React.ReactNode;
     open: boolean;
     vertical?: Vertical;
     horizontal?: Horizontal;
-    breakDistance: number;
+    breakDistance?: number;
+    useTriggerComponentWidth?: boolean;
 }
 export declare const Dropdown: import("styled-components").StyledComponent<React.FunctionComponent<IDropdownProps>, any, {}, never>;
 export {};

Dropdown/Dropdown.js

@@ -18,4 +18,5 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
 import styled, { css } from 'styled-components';
-var Content = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  position: absolute;\n  background-color: #f9f9f9;\n  min-width: 160px;\n  box-shadow: 0 5px 15px rgba(0,0,0,0.08);\n  padding: 20px;\n  padding-right: 10%;\n  visibility: ", ";\n  ", "\n"], ["\n  position: absolute;\n  background-color: #f9f9f9;\n  min-width: 160px;\n  box-shadow: 0 5px 15px rgba(0,0,0,0.08);\n  padding: 20px;\n  padding-right: 10%;\n  visibility: ", ";\n  ",
-    "\n"])), function (_a) {
+var Content = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  box-sizing: border-box;\n  position: absolute;\n  background-color: #f9f9f9;\n  box-shadow: 0 5px 15px rgba(0,0,0,0.08);\n  padding: 20px;\n\n  min-width: 160px;\n  ", "\n\n  visibility: ", ";\n  ", "\n"], ["\n  box-sizing: border-box;\n  position: absolute;\n  background-color: #f9f9f9;\n  box-shadow: 0 5px 15px rgba(0,0,0,0.08);\n  padding: 20px;\n\n  min-width: 160px;\n  ",
+    "\n\n  visibility: ", ";\n  ",
+    "\n"])), function (props) { return (props.useTriggerComponentWidth && props.width) && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    width: ", ";\n  "], ["\n    width: ", ";\n  "])), props.width); }, function (_a) {
     var open = _a.open;
@@ -25,7 +26,7 @@ return open ? 'visible' : 'hidden';
     var left = _a.left, right = _a.right, top = _a.top, bottom = _a.bottom;
-    return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    ", "\n    ", "\n    ", "\n    ", "\n  "], ["\n    ",
+    return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    ", "\n    ", "\n    ", "\n    ", "\n  "], ["\n    ",
         "\n    ",
         "\n    ",
         "\n    ",
-        "\n  "])), typeof left !== 'undefined' && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      left: ", ";\n    "], ["\n      left: ", ";\n    "])), left), typeof right !== 'undefined' && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      right: ", ";\n    "], ["\n      right: ", ";\n    "])), right), typeof top !== 'undefined' && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      top: ", "px;\n      margin-top: 5px;\n    "], ["\n      top: ", "px;\n      margin-top: 5px;\n    "])), top), typeof bottom !== 'undefined' && css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      bottom: ", "px;\n      margin-bottom: 5px;\n    "], ["\n      bottom: ", "px;\n      margin-bottom: 5px;\n    "])), bottom));
+        "\n  "])), typeof left !== 'undefined' && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      left: ", ";\n    "], ["\n      left: ", ";\n    "])), left), typeof right !== 'undefined' && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      right: ", ";\n    "], ["\n      right: ", ";\n    "])), right), typeof top !== 'undefined' && css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      top: ", "px;\n      margin-top: 5px;\n    "], ["\n      top: ", "px;\n      margin-top: 5px;\n    "])), top), typeof bottom !== 'undefined' && css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      bottom: ", "px;\n      margin-bottom: 5px;\n    "], ["\n      bottom: ", "px;\n      margin-bottom: 5px;\n    "])), bottom));
 });
@@ -36,3 +37,3 @@ var elementCrossedEdge = function (absolutePosition, elementDimension, edge) {
 var PlainDropdown = function (_a) {
-    var className = _a.className, button = _a.button, children = _a.children, open = _a.open, _b = _a.horizontal, horizontal = _b === void 0 ? 'auto' : _b, _c = _a.vertical, vertical = _c === void 0 ? 'auto' : _c, _d = _a.breakDistance, breakDistance = _d === void 0 ? 20 : _d;
+    var className = _a.className, triggerComponent = _a.triggerComponent, children = _a.children, open = _a.open, _b = _a.horizontal, horizontal = _b === void 0 ? 'auto' : _b, _c = _a.vertical, vertical = _c === void 0 ? 'auto' : _c, _d = _a.breakDistance, breakDistance = _d === void 0 ? 20 : _d, useTriggerComponentWidth = _a.useTriggerComponentWidth;
     var dropdownRef = useRef(null);
@@ -68,7 +69,10 @@ var dropdownContentRef = useRef(null);
     useLayoutEffect(handlePosition, []);
+    var width = dropdownRef.current
+        ? dropdownRef.current.clientWidth + "px"
+        : undefined;
     return (React.createElement("div", { className: className, "data-test": 'dropdown', ref: dropdownRef },
-        button,
-        React.createElement(Content, __assign({ "data-test": 'dropdown-content', ref: dropdownContentRef }, position, { open: open }), children)));
+        triggerComponent,
+        React.createElement(Content, __assign({ useTriggerComponentWidth: useTriggerComponentWidth, width: width, "data-test": 'dropdown-content', ref: dropdownContentRef }, position, { open: open }), children)));
 };
-export var Dropdown = styled(PlainDropdown)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"])));
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
+export var Dropdown = styled(PlainDropdown)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;

Field/Field.js

@@ -7,3 +7,3 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
 import { Label } from '../Label';
-import { defaultStyledProps, fromTheme } from '../utils/styled';
+import { fromTheme } from '../utils/styled';
 import { preciseEm } from '../utils/styled/isolated';
@@ -14,10 +14,9 @@ import { Container } from './Container';
 // https://github.com/w3c/csswg-drafts/issues/321
-export var Field = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: ", ";\n  align-items: ", ";\n  flex: 1;\n  white-space: ", ";\n\n  &:not(:last-child) {\n    margin-bottom: ", "em;\n  }\n\n  ", " {\n    padding-bottom: ", ";\n    margin-right: ", ";\n    flex-basis: ", ";\n\n    > ", " {\n      padding-bottom: unset;\n    }\n  }\n\n  ", "\n"], ["\n  display: flex;\n  flex-direction: ", ";\n  align-items: ", ";\n  flex: 1;\n  white-space: ", ";\n\n  &:not(:last-child) {\n    margin-bottom: ", "em;\n  }\n\n  ", " {\n    padding-bottom: ", ";\n    margin-right: ", ";\n    flex-basis: ",
+export var Field = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: ", ";\n  align-items: ", ";\n  flex: 1;\n  white-space: ", ";\n\n  &:not(:last-child) {\n    margin-bottom: ", "em;\n  }\n\n  ", " {\n    padding-bottom: ", ";\n    margin-right: ", ";\n    flex-basis: ", ";\n\n    > ", " {\n      padding-bottom: unset;\n    }\n  }\n\n  ", "\n"], ["\n  display: flex;\n  flex-direction: ", ";\n  align-items: ", ";\n  flex: 1;\n  white-space: ", ";\n\n  &:not(:last-child) {\n    margin-bottom: ", "em;\n  }\n\n  ", " {\n    padding-bottom: ", ";\n    margin-right: ", ";\n    flex-basis: ",
     ";\n\n    > ", " {\n      padding-bottom: unset;\n    }\n  }\n\n  ",
-    "\n"])), function (props) { return props.horizontal ? 'row' : 'column'; }, function (props) { return props.horizontal ? 'center' : 'unset'; }, function (props) { return props.nowrap ? 'nowrap' : 'unset'; }, fromTheme(function (theme) { return theme.global.spacing; }), Label, function (props) { return props.horizontal ? 'unset' : props.theme.global.spacing / 2 + "em"; }, function (props) { return props.horizontal ? props.theme.global.spacing + "em" : 'unset'; }, function (props) { return (props.horizontal && props.align)
+    "\n"])), function (props) { return props.horizontal ? 'row' : 'column'; }, function (props) { return props.horizontal ? 'center' : 'unset'; }, function (props) { return props.nowrap ? 'nowrap' : 'unset'; }, fromTheme(function (theme) { return theme.global.spacing; }), Label, function (props) { return props.horizontal ? 'unset' : css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["", "em"], ["", "em"])), fromTheme(function (theme) { return theme.global.spacing / 2; })); }, function (props) { return props.horizontal ? css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["", "em"], ["", "em"])), fromTheme(function (theme) { return theme.global.spacing; })) : 'unset'; }, function (props) { return (props.horizontal && props.align)
     ? (props.align === true) ? preciseEm(ALIGNED_WIDTH) + "em" : props.align
-    : 'auto'; }, Label, function (props) { return props.horizontal && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    > *:not(", "):not(:last-child) {\n      margin-bottom: ", ";\n    }\n  "], ["\n    > *:not(", "):not(:last-child) {\n      margin-bottom: ", ";\n    }\n  "])), Label, props.theme.global.spacing); });
+    : 'auto'; }, Label, function (props) { return props.horizontal && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    > *:not(", "):not(:last-child) {\n      margin-bottom: ", ";\n    }\n  "], ["\n    > *:not(", "):not(:last-child) {\n      margin-bottom: ", ";\n    }\n  "])), Label, fromTheme(function (theme) { return theme.global.spacing; })); });
 Field.Container = Container;
-Field.defaultProps = defaultStyledProps;
 Field.displayName = 'Field';
-var templateObject_1, templateObject_2;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

Icon/Icon.js

@@ -6,5 +6,3 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
 import styled from 'styled-components';
-import { defaultStyledProps } from '../utils/styled';
 export var Icon = styled.span(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 1em;\n  line-height: 1em;\n  text-transform: none;\n"], ["\n  height: 1em;\n  line-height: 1em;\n  text-transform: none;\n"])));
-Icon.defaultProps = defaultStyledProps;
 var templateObject_1;

Label/Label.js

@@ -6,6 +6,5 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
 import styled, { css } from 'styled-components';
-import { defaultStyledProps, fromTheme, globalFont } from '../utils/styled';
+import { fromTheme, globalFont } from '../utils/styled';
 var secondary = css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: block;\n  font-size: ", "em;\n  color: ", ";\n"], ["\n  display: block;\n  font-size: ", "em;\n  color: ", ";\n"])), fromTheme(function (theme) { return theme.global.sizes.small; }), fromTheme(function (theme) { return theme.global.textColorMuted; }));
 export var Label = styled.label(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n\n  ", "\n\n  & > & {\n    ", "\n  }\n"], ["\n  ", "\n\n  ", "\n\n  & > & {\n    ", "\n  }\n"])), globalFont, function (props) { return props.secondary && secondary; }, secondary);
-Label.defaultProps = defaultStyledProps;
 var templateObject_1, templateObject_2;

package.json

 {
   "name": "@exivity/ui",
-  "version": "0.5.5",
+  "version": "0.6.0",
   "description": "A collection of components to build interfaces",
@@ -95,2 +95,3 @@ "keywords": [
     "@storybook/addon-links": "^5.0.0",
+    "@storybook/addon-storyshots": "^5.0.0",
     "@storybook/addons": "^5.0.0",
@@ -129,2 +130,3 @@ "@storybook/cli": "^5.0.0",
     "react-window": "^1.5.2",
+    "require-context.macro": "^1.0.4",
     "rimraf": "^2.6.2",
@@ -131,0 +133,0 @@ "standard-version": "^5.0.1",

TextArea/TextArea.d.ts

@@ -9,4 +9,6 @@ import React, { TextareaHTMLAttributes, ChangeEvent } from 'react';
 }
-export declare const PlainTextArea: React.FC<TextAreaProps & OmitOnChange>;
-export declare const TextArea: import("styled-components").StyledComponent<React.FunctionComponent<TextAreaProps & Pick<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "form" | "style" | "title" | "color" | "hidden" | "wrap" | "disabled" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "tabIndex" | "inputMode" | "is" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "autoFocus" | "name" | "value" | "autoComplete" | "maxLength" | "minLength" | "readOnly" | "required" | "cols" | "dirName" | "rows">>, any, {}, never>;
+export declare const StyledTextArea: import("styled-components").StyledComponent<"textarea", any, {
+    width?: string | undefined;
+}, never>;
+export declare const TextArea: React.FC<TextAreaProps & OmitOnChange>;
 export {};

TextArea/TextArea.js

@@ -27,10 +27,9 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
 import styled, { css } from 'styled-components';
-import { defaultStyledProps, globalInput } from '../utils/styled';
-export var PlainTextArea = function (_a) {
+import { globalInput } from '../utils/styled';
+export var StyledTextArea = styled('textarea')(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", ";\n\n  ", "\n"], ["\n  ", ";\n\n  ",
+    "\n"])), globalInput, function (props) { return props.width && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    width: ", "\n  "], ["\n    width: ", "\n  "])), props.width); });
+export var TextArea = function (_a) {
     var onChange = _a.onChange, rest = __rest(_a, ["onChange"]);
-    return (React.createElement("textarea", __assign({ onChange: function (event) { return onChange(event.target.value, event); } }, rest)));
+    return (React.createElement(StyledTextArea, __assign({ onChange: function (event) { return onChange(event.target.value, event); } }, rest)));
 };
-export var TextArea = styled(PlainTextArea)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", ";\n\n  ", "\n"], ["\n  ", ";\n\n  ",
-    "\n"])), globalInput, function (props) { return props.width && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    width: ", "\n  "], ["\n    width: ", "\n  "])), props.width); });
-TextArea.defaultProps = __assign({}, defaultStyledProps, { value: '', secondary: true });
 var templateObject_1, templateObject_2;

TextInput/TextInput.d.ts

 import React, { ChangeEvent, InputHTMLAttributes } from 'react';
 import { InputProps } from '../utils/styled';
 import { Omit } from '../utils/types';
-declare type OmitOnChange = Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'>;
-interface TextInputProps extends InputProps {
-    value: string;
+export declare type OmitOnChangeHTMLInputAttributes = Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'>;
+export interface TextInputProps extends InputProps {
+    value?: string;
     onChange: (value: string, event: ChangeEvent<HTMLInputElement>) => void;
 }
-export declare const PlainTextInput: React.FC<TextInputProps & OmitOnChange>;
-export declare const TextInput: import("styled-components").StyledComponent<React.FunctionComponent<TextInputProps & Pick<React.InputHTMLAttributes<HTMLInputElement>, "form" | "style" | "title" | "pattern" | "color" | "height" | "width" | "hidden" | "size" | "multiple" | "disabled" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "tabIndex" | "inputMode" | "is" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "list" | "step" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "type" | "value" | "max" | "min" | "crossOrigin" | "alt" | "src" | "autoComplete" | "accept" | "capture" | "checked" | "maxLength" | "minLength" | "readOnly" | "required">>, any, {}, never>;
-export {};
+export declare const StyledInput: import("styled-components").StyledComponent<"input", any, InputProps & {
+    outlined?: boolean | undefined;
+}, never>;
+export declare const TextInput: React.FC<TextInputProps & OmitOnChangeHTMLInputAttributes>;

TextInput/TextInput.js

@@ -27,9 +27,8 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
 import styled from 'styled-components';
-import { defaultStyledProps, globalInput } from '../utils/styled';
-export var PlainTextInput = function (_a) {
+import { globalInput } from '../utils/styled';
+export var StyledInput = styled.input(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), globalInput);
+export var TextInput = function (_a) {
     var onChange = _a.onChange, rest = __rest(_a, ["onChange"]);
-    return (React.createElement("input", __assign({ type: 'text', onChange: function (event) { return onChange(event.target.value, event); } }, rest)));
+    return (React.createElement(StyledInput, __assign({ type: 'text', onChange: function (event) { return onChange(event.target.value, event); } }, rest)));
 };
-export var TextInput = styled(PlainTextInput)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), globalInput);
-TextInput.defaultProps = __assign({}, defaultStyledProps, { value: '', secondary: true });
 var templateObject_1;

themes/lightTheme.d.ts

@@ -30,2 +30,3 @@ export declare const BASE_SIZE = 16;
             danger: string;
+            default: string;
         };
@@ -32,0 +33,0 @@ sizes: {

themes/lightTheme.js

@@ -48,3 +48,4 @@ var __assign = (this && this.__assign) || function () {
             success: palette.green,
-            danger: palette.red
+            danger: palette.red,
+            default: palette.blue
         },
@@ -51,0 +52,0 @@ sizes: {

useExpandable/stories/seed.js

@@ -1,6 +0,5 @@
-import Faker from 'faker';
 var lvl1 = new Array(100).fill(null)
     .map(function (item, index) { return ({
     key: String(index + 1),
-    value: Faker.name.firstName(),
+    value: 'FakeName ' + String(index + 1),
     attributes: {
@@ -16,3 +15,3 @@ level: 1
             key: String(index + 101),
-            value: Faker.name.firstName(),
+            value: 'FakeName ' + String(index + 101),
             attributes: {
@@ -27,3 +26,3 @@ level: 2
             key: String(index + 101),
-            value: Faker.name.firstName(),
+            value: 'FakeName ' + String(index + 101),
             attributes: {
@@ -41,3 +40,3 @@ level: 2
             key: String(index + 301),
-            value: Faker.name.firstName(),
+            value: 'FakeName ' + String(index + 301),
             attributes: {
@@ -52,3 +51,3 @@ level: 3
             key: String(index + 301),
-            value: Faker.name.firstName(),
+            value: 'FakeName ' + String(index + 301),
             attributes: {
@@ -55,0 +54,0 @@ level: 3

utils/styled/index.d.ts

@@ -8,3 +8,3 @@ import { Theme } from '../../themes';
 export interface StyledProps {
-    theme: Theme;
+    theme?: Theme;
 }
@@ -40,2 +40,3 @@ export declare const defaultStyledProps: {
                 danger: string;
+                default: string;
             };
@@ -72,3 +73,3 @@ sizes: {
 export declare const fromTheme: (themeResolver: ThemeResolver) => (props: StyledProps) => any;
-export declare const matchThemeProp: (themeResolver: ThemeResolver, options?: ThemeHelperOptions) => (props: StyledProps) => any;
+export declare const matchThemeProp: (themeResolver: ThemeResolver, options?: ThemeHelperOptions) => (props: any) => any;
 export declare const hexToString: (hex: string) => string;
@@ -75,0 +76,0 @@ export declare const globalFont: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;

utils/styled/index.js

@@ -10,3 +10,3 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
 export var fromTheme = function (themeResolver) { return function (props) {
-    return themeResolver(props.theme);
+    return props.theme ? themeResolver(props.theme) : themeResolver(lightTheme);
 }; };
@@ -18,9 +18,22 @@ export var matchThemeProp = function (themeResolver, options) {
         var match = Object.keys(props)
-            .find(function (propKey) { return themeObject[propKey]; });
-        if (!match) {
-            return options.defaultValue;
+            .find(function (propKey) {
+            var prop = props[propKey];
+            if (prop !== undefined) {
+                return themeObject[propKey];
+            }
+        });
+        if (!match && options.defaultValue) {
+            match = options.defaultValue;
         }
-        return options.modifier
-            ? options.modifier(themeObject[match])
-            : themeObject[match];
+        if (!match && !options.defaultValue && themeObject.default) {
+            match = themeObject.default;
+        }
+        if (!match)
+            return null;
+        if (themeObject[match]) {
+            return options.modifier
+                ? options.modifier(themeObject[match])
+                : themeObject[match];
+        }
+        return match;
     };
@@ -37,9 +50,13 @@ };
 export var globalFont = css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  font-family: ", ";\n  font-weight: normal;\n  font-size: ", "px;\n  color: ", ";\n  line-height: ", ";\n"], ["\n  font-family: ", ";\n  font-weight: normal;\n  font-size: ", "px;\n  color: ", ";\n  line-height: ", ";\n"])), fromTheme(function (theme) { return theme.global.fontFamily; }), fromTheme(function (theme) { return theme.global.baseSize; }), fromTheme(function (theme) { return theme.global.textColor; }), fromTheme(function (theme) { return theme.global.lineHeight; }));
-export var globalInput = css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  ", ";\n\n  font-size: ", "px;\n\n  display: block;\n  box-sizing: border-box;\n  width: 100%;\n  padding: calc(0.5em - ", "px) 0.5em; // subtract border to get a height of exactly 2.5em for single line items\n\n  border-radius: ", "px;\n  outline: 0;\n  border: 0;\n\n  --focus-color: ", ";\n\n  ", "\n\n  --focus-color: ", ";\n\n  &::placeholder {\n    color: currentcolor;\n    opacity: 0.5;\n  }\n\n  &[disabled] {\n    cursor: not-allowed;\n    box-shadow: inset 0 0 999em rgba(128, 128, 128, 0.2);\n  }\n"], ["\n  ", ";\n\n  font-size: ",
-    "px;\n\n  display: block;\n  box-sizing: border-box;\n  width: 100%;\n  padding: calc(0.5em - ", "px) 0.5em; // subtract border to get a height of exactly 2.5em for single line items\n\n  border-radius: ", "px;\n  outline: 0;\n  border: 0;\n\n  --focus-color: ", ";\n\n  ",
-    "\n\n  --focus-color: ", ";\n\n  &::placeholder {\n    color: currentcolor;\n    opacity: 0.5;\n  }\n\n  &[disabled] {\n    cursor: not-allowed;\n    box-shadow: inset 0 0 999em rgba(128, 128, 128, 0.2);\n  }\n"])), globalFont, matchThemeProp(function (theme) { return theme.global.sizes; }, {
+export var globalInput = css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  ", ";\n\n  font-size: ", "px;\n\n  display: block;\n  box-sizing: border-box;\n  width: 100%;\n  padding: calc(0.5em - ", "px) 0.5em; // subtract border to get a height of exactly 2.5em for single line items\n\n  border-radius: ", "px;\n  outline: 0;\n  border: 0;\n\n  ", "\n\n  --focus-color: ", ";\n\n  &::placeholder {\n    color: currentcolor;\n    opacity: 0.5;\n  }\n\n  &[disabled] {\n    cursor: not-allowed;\n    box-shadow: inset 0 0 999em rgba(128, 128, 128, 0.2);\n  }\n"], ["\n  ", ";\n\n  font-size: ",
+    "px;\n\n  display: block;\n  box-sizing: border-box;\n  width: 100%;\n  padding: calc(0.5em - ", "px) 0.5em; // subtract border to get a height of exactly 2.5em for single line items\n\n  border-radius: ", "px;\n  outline: 0;\n  border: 0;\n\n  ",
+    "\n\n  --focus-color: ",
+    ";\n\n  &::placeholder {\n    color: currentcolor;\n    opacity: 0.5;\n  }\n\n  &[disabled] {\n    cursor: not-allowed;\n    box-shadow: inset 0 0 999em rgba(128, 128, 128, 0.2);\n  }\n"])), globalFont, matchThemeProp(function (theme) { return theme.global.sizes; }, {
     modifier: function (em) { return em * 16; },
     defaultValue: 16
-}), fromTheme(function (theme) { return theme.global.borderWidth; }), fromTheme(function (theme) { return theme.global.borderRadius; }), matchThemeProp(function (theme) { return theme.global.purposes; }, { modifier: hexToString }), function (props) { return props.outlined
-    ? css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      border: ", "px solid ", ";\n      background-color: unset;\n\n      &:hover {\n        border: ", "px solid ", ";\n      }\n\n      &:focus {\n        border: ", "px solid ", ";\n      }\n    "], ["\n      border: ", "px solid ", ";\n      background-color: unset;\n\n      &:hover {\n        border: ", "px solid ", ";\n      }\n\n      &:focus {\n        border: ", "px solid ", ";\n      }\n    "])), fromTheme(function (theme) { return theme.global.borderWidth; }), matchThemeProp(function (theme) { return theme.global.purposes; }), fromTheme(function (theme) { return theme.global.borderWidth; }), fromTheme(function (theme) { return theme.colours.gray; }), fromTheme(function (theme) { return theme.global.borderWidth; }), fromTheme(function (theme) { return theme.colours.dark; })) : css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      border: ", "px solid ", ";\n      background-color: ", ";\n\n      &:hover {\n        border-bottom: ", "px solid rgba(var(--focus-color), 0.5);\n      }\n\n      &:focus {\n        border-bottom: ", "px solid rgba(var(--focus-color), 1);\n      }\n    "], ["\n      border: ", "px solid ", ";\n      background-color: ", ";\n\n      &:hover {\n        border-bottom: ", "px solid rgba(var(--focus-color), 0.5);\n      }\n\n      &:focus {\n        border-bottom: ", "px solid rgba(var(--focus-color), 1);\n      }\n    "])), fromTheme(function (theme) { return theme.global.borderWidth; }), fromTheme(function (theme) { return theme.colours.lightGray; }), fromTheme(function (theme) { return theme.colours.lightGray; }), fromTheme(function (theme) { return theme.global.borderWidth; }), fromTheme(function (theme) { return theme.global.borderWidth; })); }, matchThemeProp(function (theme) { return theme.global.purposes; }, { modifier: hexToString }));
+}), fromTheme(function (theme) { return theme.global.borderWidth; }), fromTheme(function (theme) { return theme.global.borderRadius; }), function (props) { return props.outlined
+    ? css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      border: ", "px solid\n        ", ";\n      background-color: unset;\n\n      &:hover {\n        border: ", "px solid ", ";\n      }\n\n      &:focus {\n        border: ", "px solid ", ";\n      }\n    "], ["\n      border: ", "px solid\n        ", ";\n      background-color: unset;\n\n      &:hover {\n        border: ", "px solid ", ";\n      }\n\n      &:focus {\n        border: ", "px solid ", ";\n      }\n    "])), fromTheme(function (theme) { return theme.global.borderWidth; }), matchThemeProp(function (theme) { return theme.global.purposes; }, { defaultValue: 'primary' }), fromTheme(function (theme) { return theme.global.borderWidth; }), fromTheme(function (theme) { return theme.colours.gray; }), fromTheme(function (theme) { return theme.global.borderWidth; }), fromTheme(function (theme) { return theme.colours.dark; })) : css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      border: ", "px solid ", ";\n      background-color: ", ";\n\n      &:hover {\n        border-bottom: ", "px solid rgba(var(--focus-color), 0.5);\n      }\n\n      &:focus {\n        border-bottom: ", "px solid rgba(var(--focus-color), 1);\n      }\n    "], ["\n      border: ", "px solid ", ";\n      background-color: ", ";\n\n      &:hover {\n        border-bottom: ", "px solid rgba(var(--focus-color), 0.5);\n      }\n\n      &:focus {\n        border-bottom: ", "px solid rgba(var(--focus-color), 1);\n      }\n    "])), fromTheme(function (theme) { return theme.global.borderWidth; }), fromTheme(function (theme) { return theme.colours.lightGray; }), fromTheme(function (theme) { return theme.colours.lightGray; }), fromTheme(function (theme) { return theme.global.borderWidth; }), fromTheme(function (theme) { return theme.global.borderWidth; })); }, matchThemeProp(function (theme) { return theme.global.purposes; }, {
+    modifier: hexToString,
+    defaultValue: 'primary'
+}));
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

utils/tests/shallowWithTheme.js

@@ -0,3 +1,3 @@
+import * as React from 'react';
 import { shallow } from 'enzyme';
-import * as React from 'react';
 import { ThemeProvider } from 'styled-components';
@@ -4,0 +4,0 @@ import { lightTheme } from '../../themes';

Widget/Widget.d.ts

@@ -10,4 +10,4 @@ import * as React from 'react';
 }
-export declare const PlainWidget: React.FC<WidgetProps>;
-export declare const Widget: import("styled-components").StyledComponent<React.FunctionComponent<WidgetProps>, any, {}, never>;
+export declare const StyledWidget: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Widget: React.FC<WidgetProps>;
 export {};

Widget/Widget.js

@@ -10,5 +10,6 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
 var WidgetSubTitle = styled.span(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  color: ", ";\n  font-size: 0.8em;\n  padding-left: 10px;\n  font-weight: 500;\n"], ["\n  color: ", ";\n  font-size: 0.8em;\n  padding-left: 10px;\n  font-weight: 500;\n"])), function (props) { return props.theme.colours.gray; });
-export var PlainWidget = function (_a) {
+export var StyledWidget = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background: white;\n  box-shadow: 2px 2px 0 lightblue;\n  padding: 20px 20px 100px;\n  position: relative;\n  box-sizing: border-box;\n  border-radius: 3px;\n  width: 100%;\n"], ["\n  background: white;\n  box-shadow: 2px 2px 0 lightblue;\n  padding: 20px 20px 100px;\n  position: relative;\n  box-sizing: border-box;\n  border-radius: 3px;\n  width: 100%;\n"])));
+export var Widget = function (_a) {
     var className = _a.className, children = _a.children, title = _a.title, subTitle = _a.subTitle;
-    return (React.createElement("div", { className: className },
+    return (React.createElement(StyledWidget, { className: className },
         title &&
@@ -20,3 +21,2 @@ React.createElement(WidgetTitle, null,
 };
-export var Widget = styled(PlainWidget)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background: white;\n  box-shadow: 2px 2px 0 lightblue;\n  padding: 20px 20px 100px;\n  position: relative;\n  box-sizing: border-box;\n  border-radius: 3px;\n  width: 100%;\n"], ["\n  background: white;\n  box-shadow: 2px 2px 0 lightblue;\n  padding: 20px 20px 100px;\n  position: relative;\n  box-sizing: border-box;\n  border-radius: 3px;\n  width: 100%;\n"])));
 var templateObject_1, templateObject_2, templateObject_3;

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

78246

increased by0.16%

Number of package files

101

increased by16.09%

Lines of code

1243

increased by9.32%

Worsened metrics

Dev dependency count

43

increased by4.88%

No dependency changes