@ltht-react/button - npm Package Compare versions

Comparing version 0.1.1 to 1.0.0

CHANGELOG.md

@@ -6,14 +6,18 @@ # Change Log
 
-## [0.1.1](https://github.com/ltht-epr/ltht-react/compare/@ltht-react/button@0.0.20...@ltht-react/button@0.1.1) (2021-01-22)
+## [0.0.20](https://github.com/ltht-epr/ltht-react/compare/@ltht-react/button@0.0.18...@ltht-react/button@0.0.20) (2020-11-19)
 
+**Note:** Version bump only for package @ltht-react/button
 
-### Reverts
 
-* Revert "refactor components and fix styles" ([b0c5fd8](https://github.com/ltht-epr/ltht-react/commit/b0c5fd89836aa7c47afe96aeccefd955a06dd50b))
-* Revert "Publish" ([833cdd7](https://github.com/ltht-epr/ltht-react/commit/833cdd729f74c9fee22fa55530a6ec5552f438ea))
 
 
 
+## [0.0.19](https://github.com/ltht-epr/ltht-react/compare/@ltht-react/button@0.0.18...@ltht-react/button@0.0.19) (2020-10-29)
 
+**Note:** Version bump only for package @ltht-react/button
 
+
+
+
+
 ## [0.0.18](https://github.com/ltht-epr/ltht-react/compare/@ltht-react/button@0.0.17...@ltht-react/button@0.0.18) (2020-09-10)
@@ -20,0 +24,0 @@

lib/atoms/button.d.ts

@@ -1,17 +0,10 @@
-/** @jsx jsx */
-import React from 'react';
-export declare const styles: {
-    base: import("@emotion/utils").SerializedStyles;
-    primary: import("@emotion/utils").SerializedStyles;
-    standard: import("@emotion/utils").SerializedStyles;
-    default: import("@emotion/utils").SerializedStyles;
-    workflow: import("@emotion/utils").SerializedStyles;
-};
+import React, { HTMLAttributes } from 'react';
 declare const Button: React.FC<Props>;
 declare type ButtonStyle = 'default' | 'primary' | 'standard' | 'workflow';
+declare type ButtonTypes = 'button' | 'submit' | 'reset';
 interface Props extends ButtonProps {
     buttonStyle?: ButtonStyle;
 }
-export interface ButtonProps {
-    type: 'button' | 'submit' | 'reset';
+export interface ButtonProps extends HTMLAttributes<HTMLButtonElement> {
+    type: ButtonTypes;
     value: string;
@@ -18,0 +11,0 @@ disabled?: boolean;

lib/atoms/button.js

@@ -6,20 +6,56 @@ "use strict";
 };
+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);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.styles = void 0;
+var react_1 = __importDefault(require("react"));
+var styled_1 = __importDefault(require("@emotion/styled"));
 var core_1 = require("@emotion/core");
 var styles_1 = require("@ltht-react/styles");
-exports.styles = {
-    base: core_1.css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    display: block;\n    text-align: center;\n    white-space: nowrap;\n    border: 1px solid transparent;\n    padding: 0.375rem 0.75rem;\n    font-size: 1rem;\n    line-height: 1.5;\n    border-radius: 4px;\n    width: 100%;\n\n    &:hover:not([disabled]) {\n      cursor: pointer;\n    }\n\n    &:disabled {\n      opacity: 0.65;\n    }\n\n    ", " {\n      display: inline-block;\n      vertical-align: middle;\n      width: auto;\n    }\n  "], ["\n    display: block;\n    text-align: center;\n    white-space: nowrap;\n    border: 1px solid transparent;\n    padding: 0.375rem 0.75rem;\n    font-size: 1rem;\n    line-height: 1.5;\n    border-radius: 4px;\n    width: 100%;\n\n    &:hover:not([disabled]) {\n      cursor: pointer;\n    }\n\n    &:disabled {\n      opacity: 0.65;\n    }\n\n    ", " {\n      display: inline-block;\n      vertical-align: middle;\n      width: auto;\n    }\n  "])), styles_1.DESKTOP_MEDIA_QUERY),
-    primary: core_1.css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    color: ", ";\n    background-color: ", ";\n    &:hover {\n      background-color: ", ";\n    }\n\n    &:disabled {\n      background-color: ", ";\n    }\n  "], ["\n    color: ", ";\n    background-color: ", ";\n    &:hover {\n      background-color: ", ";\n    }\n\n    &:disabled {\n      background-color: ", ";\n    }\n  "])), styles_1.BTN_COLOURS.PRIMARY.TEXT, styles_1.BTN_COLOURS.PRIMARY.VALUE, styles_1.BTN_COLOURS.PRIMARY.HOVER, styles_1.BTN_COLOURS.PRIMARY.DISABLED),
-    standard: core_1.css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    color: ", ";\n    background-color: ", ";\n    &:hover {\n      background-color: ", ";\n    }\n\n    &:disabled {\n      background-color: ", ";\n    }\n  "], ["\n    color: ", ";\n    background-color: ", ";\n    &:hover {\n      background-color: ", ";\n    }\n\n    &:disabled {\n      background-color: ", ";\n    }\n  "])), styles_1.BTN_COLOURS.STANDARD.TEXT, styles_1.BTN_COLOURS.STANDARD.VALUE, styles_1.BTN_COLOURS.STANDARD.HOVER, styles_1.BTN_COLOURS.STANDARD.DISABLED),
-    default: core_1.css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    color: ", ";\n    background-color: ", ";\n    &:hover {\n      background-color: ", ";\n    }\n\n    &:disabled {\n      background-color: ", ";\n    }\n  "], ["\n    color: ", ";\n    background-color: ", ";\n    &:hover {\n      background-color: ", ";\n    }\n\n    &:disabled {\n      background-color: ", ";\n    }\n  "])), styles_1.BTN_COLOURS.DEFAULT.TEXT, styles_1.BTN_COLOURS.DEFAULT.VALUE, styles_1.BTN_COLOURS.DEFAULT.HOVER, styles_1.BTN_COLOURS.DEFAULT.DISABLED),
-    workflow: core_1.css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    color: ", ";\n    background-color: ", ";\n    &:hover {\n      background-color: ", ";\n    }\n\n    &:disabled {\n      background-color: ", ";\n    }\n  "], ["\n    color: ", ";\n    background-color: ", ";\n    &:hover {\n      background-color: ", ";\n    }\n\n    &:disabled {\n      background-color: ", ";\n    }\n  "])), styles_1.BTN_COLOURS.WORKFLOW.TEXT, styles_1.BTN_COLOURS.WORKFLOW.VALUE, styles_1.BTN_COLOURS.WORKFLOW.HOVER, styles_1.BTN_COLOURS.WORKFLOW.DISABLED),
+var setColors = function (buttonStyle) {
+    switch (buttonStyle) {
+        case 'primary':
+            return core_1.css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        color: ", ";\n        background-color: ", ";\n        &:hover {\n          background-color: ", ";\n        }\n\n        &:disabled {\n          background-color: ", ";\n        }\n      "], ["\n        color: ", ";\n        background-color: ", ";\n        &:hover {\n          background-color: ", ";\n        }\n\n        &:disabled {\n          background-color: ", ";\n        }\n      "])), styles_1.BTN_COLOURS.PRIMARY.TEXT, styles_1.BTN_COLOURS.PRIMARY.VALUE, styles_1.BTN_COLOURS.PRIMARY.HOVER, styles_1.BTN_COLOURS.PRIMARY.DISABLED);
+        case 'standard':
+            return core_1.css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n        color: ", ";\n        background-color: ", ";\n        &:hover {\n          background-color: ", ";\n        }\n\n        &:disabled {\n          background-color: ", ";\n        }\n      "], ["\n        color: ", ";\n        background-color: ", ";\n        &:hover {\n          background-color: ", ";\n        }\n\n        &:disabled {\n          background-color: ", ";\n        }\n      "])), styles_1.BTN_COLOURS.STANDARD.TEXT, styles_1.BTN_COLOURS.STANDARD.VALUE, styles_1.BTN_COLOURS.STANDARD.HOVER, styles_1.BTN_COLOURS.STANDARD.DISABLED);
+        case 'default':
+            return core_1.css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n        color: ", ";\n        background-color: ", ";\n        &:hover {\n          background-color: ", ";\n        }\n\n        &:disabled {\n          background-color: ", ";\n        }\n      "], ["\n        color: ", ";\n        background-color: ", ";\n        &:hover {\n          background-color: ", ";\n        }\n\n        &:disabled {\n          background-color: ", ";\n        }\n      "])), styles_1.BTN_COLOURS.DEFAULT.TEXT, styles_1.BTN_COLOURS.DEFAULT.VALUE, styles_1.BTN_COLOURS.DEFAULT.HOVER, styles_1.BTN_COLOURS.DEFAULT.DISABLED);
+        case 'workflow':
+            return core_1.css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n        color: ", ";\n        background-color: ", ";\n        &:hover {\n          background-color: ", ";\n        }\n\n        &:disabled {\n          background-color: ", ";\n        }\n      "], ["\n        color: ", ";\n        background-color: ", ";\n        &:hover {\n          background-color: ", ";\n        }\n\n        &:disabled {\n          background-color: ", ";\n        }\n      "])), styles_1.BTN_COLOURS.WORKFLOW.TEXT, styles_1.BTN_COLOURS.WORKFLOW.VALUE, styles_1.BTN_COLOURS.WORKFLOW.HOVER, styles_1.BTN_COLOURS.WORKFLOW.DISABLED);
+        default:
+            return core_1.css(templateObject_5 || (templateObject_5 = __makeTemplateObject([""], [""])));
+    }
 };
+var StyledButton = styled_1.default('button')(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: block;\n  text-align: center;\n  white-space: nowrap;\n  border: 1px solid transparent;\n  padding: 0.375rem 0.75rem;\n  font-size: 1rem;\n  line-height: 1.5;\n  border-radius: 4px;\n  width: 100%;\n\n  &:hover:not([disabled]) {\n    cursor: pointer;\n  }\n\n  &:disabled {\n    opacity: 0.65;\n  }\n\n  ", " {\n    display: inline-block;\n    vertical-align: middle;\n    width: auto;\n  }\n\n  ", "\n"], ["\n  display: block;\n  text-align: center;\n  white-space: nowrap;\n  border: 1px solid transparent;\n  padding: 0.375rem 0.75rem;\n  font-size: 1rem;\n  line-height: 1.5;\n  border-radius: 4px;\n  width: 100%;\n\n  &:hover:not([disabled]) {\n    cursor: pointer;\n  }\n\n  &:disabled {\n    opacity: 0.65;\n  }\n\n  ", " {\n    display: inline-block;\n    vertical-align: middle;\n    width: auto;\n  }\n\n  ", "\n"])), styles_1.DESKTOP_MEDIA_QUERY, function (_a) {
+    var buttonStyle = _a.buttonStyle;
+    return setColors(buttonStyle);
+});
 var Button = function (_a) {
-    var type = _a.type, value = _a.value, _b = _a.buttonStyle, buttonStyle = _b === void 0 ? 'default' : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c;
-    /* eslint-disable react/button-has-type */
-    return (core_1.jsx("button", { type: type, css: [exports.styles.base, exports.styles[buttonStyle]], disabled: disabled }, value));
+    var type = _a.type, value = _a.value, _b = _a.buttonStyle, buttonStyle = _b === void 0 ? 'default' : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, rest = __rest(_a, ["type", "value", "buttonStyle", "disabled"]);
+    return (react_1.default.createElement(StyledButton, __assign({ type: type, buttonStyle: buttonStyle, disabled: disabled }, rest), value));
 };
 exports.default = Button;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
 //# sourceMappingURL=button.js.map

lib/atoms/primary-button.js

@@ -10,5 +10,5 @@ "use strict";
     var type = _a.type, value = _a.value, _b = _a.disabled, disabled = _b === void 0 ? false : _b;
-    return react_1.default.createElement(button_1.default, { type: type, value: value, buttonStyle: "primary", disabled: disabled });
+    return (react_1.default.createElement(button_1.default, { type: type, value: value, buttonStyle: "primary", disabled: disabled }));
 };
 exports.default = PrimaryButton;
 //# sourceMappingURL=primary-button.js.map

package.json

 {
   "name": "@ltht-react/button",
-  "version": "0.1.1",
+  "version": "1.0.0",
   "description": "ltht-react atoms Button component.",
@@ -30,9 +30,9 @@ "author": "LTHT",
     "@emotion/styled": "^10.0.27",
-    "@ltht-react/styles": "^0.2.1",
+    "@ltht-react/styles": "^1.0.0",
     "@ltht-react/types": "^0.0.9",
-    "@ltht-react/utils": "^0.2.1",
+    "@ltht-react/utils": "^1.0.0",
     "emotion": "^10.0.27",
     "react": "^16.12.0"
   },
-  "gitHead": "8ed606fa5eb29a987434481dce1c2fed87966fc7"
+  "gitHead": "ce395cbe99477a620c639ce01b401654510f7f81"
 }

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

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

15762

increased by13.03%

Lines of code

117

increased by32.95%

Number of low quality alerts

1

decreased by-50%

Number of versions

325

increased by0.31%

Published versions last months

10

increased by11.11%

Published versions last two months

13

increased by8.33%

Dependency changes

• + Added@emotion/babel-plugin@11.12.0(transitive)

• + Added@emotion/hash@0.9.2(transitive)

• + Added@emotion/is-prop-valid@1.3.1(transitive)

• + Added@emotion/memoize@0.9.0(transitive)

• + Added@emotion/serialize@1.3.2(transitive)

• + Added@emotion/styled@11.13.0(transitive)

• + Added@emotion/unitless@0.10.0(transitive)

• + Added@emotion/use-insertion-effect-with-fallbacks@1.1.0(transitive)

• + Added@emotion/utils@1.4.1(transitive)

• + Added@ltht-react/styles@1.3.266(transitive)

• + Added@ltht-react/types@1.0.270(transitive)

• + Added@ltht-react/utils@1.1.272(transitive)

• + Addedbabel-plugin-macros@3.1.0(transitive)

• + Addedcosmiconfig@7.1.0(transitive)

• + Addedcsstype@3.1.3(transitive)

• + Addedescape-string-regexp@4.0.0(transitive)

• + Addedstylis@4.2.0(transitive)

• - Removed@ltht-react/styles@0.2.1(transitive)

• - Removed@ltht-react/types@0.1.1(transitive)

• - Removed@ltht-react/utils@0.2.1(transitive)

• Updated@ltht-react/styles@^1.0.0

• Updated@ltht-react/utils@^1.0.0