@lmc-eu/spirit-web-react - npm Package Compare versions

Comparing version 0.3.0 to 0.4.0

_bundles/components/Button/Button.d.ts

@@ -0,3 +1,5 @@
+import { MouseEvent } from 'react';
+import { WithChildren } from '../../types/main';
 declare type Color = 'primary' | 'secondary' | 'tertiary';
-export interface ButtonProps {
+export interface ButtonProps extends WithChildren {
     /**
@@ -8,9 +10,5 @@ * Emotion color variant.
     /**
-     * Button label.
-     */
-    label: string;
-    /**
      * Function to be called on button click.
      */
-    onClick: () => void;
+    onClick?: (event: MouseEvent) => void;
     /**
@@ -20,10 +18,24 @@ * HTML `type` attribute.
     type: 'button' | 'submit';
+    /**
+     * Block alignment modification
+     */
+    block: boolean;
+    /**
+     * Disabling button
+     */
+    disabled: boolean;
+    /**
+     * Aria label
+     */
+    ariaLabel?: string;
 }
 export declare const Button: {
-    ({ color, label, onClick, type, }: ButtonProps): JSX.Element;
+    ({ color, onClick, type, block, ariaLabel, disabled, ...restAttributes }: ButtonProps): JSX.Element;
     defaultProps: {
         color: string;
         type: string;
+        block: boolean;
+        disabled: boolean;
     };
 };
 export default Button;

_bundles/components/Button/Button.stories.d.ts

@@ -10,5 +10,2 @@ declare const _default: {
         };
-        label: {
-            control: string;
-        };
         onClick: {
@@ -18,2 +15,14 @@ action: string;
         type: string;
+        disabled: {
+            control: string;
+        };
+        block: {
+            control: string;
+        };
+        ariaLabel: {
+            control: string;
+        };
+        children: {
+            control: string;
+        };
     };
@@ -20,0 +29,0 @@ };

_bundles/web-react.browser.umd.min.js

 /*! For license information please see web-react.browser.umd.min.js.LICENSE.txt */
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define("webReact",["react"],t):"object"==typeof exports?exports.webReact=t(require("react")):e.webReact=t(e.react)}(self,(function(e){return(()=>{var t={779:(e,t)=>{var r;!function(){"use strict";var o={}.hasOwnProperty;function n(){for(var e=[],t=0;t<arguments.length;t++){var r=arguments[t];if(r){var a=typeof r;if("string"===a||"number"===a)e.push(r);else if(Array.isArray(r)){if(r.length){var u=n.apply(null,r);u&&e.push(u)}}else if("object"===a)if(r.toString===Object.prototype.toString)for(var i in r)o.call(r,i)&&r[i]&&e.push(i);else e.push(r.toString())}}return e.join(" ")}e.exports?(n.default=n,e.exports=n):void 0===(r=function(){return n}.apply(t,[]))||(e.exports=r)}()},937:t=>{"use strict";t.exports=e}},r={};function o(e){var n=r[e];if(void 0!==n)return n.exports;var a=r[e]={exports:{}};return t[e](a,a.exports,o),a.exports}o.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return o.d(t,{a:t}),t},o.d=(e,t)=>{for(var r in t)o.o(t,r)&&!o.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},o.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),o.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var n={};return(()=>{"use strict";o.r(n),o.d(n,{Button:()=>c,Tag:()=>s});var e=o(937),t=o.n(e),r=o(779),a=o.n(r),u=function(e){return"Button--"+e},i=function(e){var r=e.color,o=e.label,n=e.onClick,i=e.type;return t().createElement("button",{className:a()("Button",u(r)),onClick:n,type:i},o)};i.defaultProps={color:"primary",type:"button"};const c=i;var p=function(e,t){return"Tag--"+e+"-"+t},l=function(e){var r=e.color,o=e.theme,n=e.children;return t().createElement("span",{className:a()("Tag",p(r,o))},n)};l.defaultProps={color:"primary",theme:"dark"};const s=l})(),n})()}));
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define("webReact",["react"],t):"object"==typeof exports?exports.webReact=t(require("react")):e.webReact=t(e.react)}(self,(function(e){return(()=>{var t={779:(e,t)=>{var r;!function(){"use strict";var o={}.hasOwnProperty;function n(){for(var e=[],t=0;t<arguments.length;t++){var r=arguments[t];if(r){var a=typeof r;if("string"===a||"number"===a)e.push(r);else if(Array.isArray(r)){if(r.length){var l=n.apply(null,r);l&&e.push(l)}}else if("object"===a)if(r.toString===Object.prototype.toString)for(var i in r)o.call(r,i)&&r[i]&&e.push(i);else e.push(r.toString())}}return e.join(" ")}e.exports?(n.default=n,e.exports=n):void 0===(r=function(){return n}.apply(t,[]))||(e.exports=r)}()},937:t=>{"use strict";t.exports=e}},r={};function o(e){var n=r[e];if(void 0!==n)return n.exports;var a=r[e]={exports:{}};return t[e](a,a.exports,o),a.exports}o.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return o.d(t,{a:t}),t},o.d=(e,t)=>{for(var r in t)o.o(t,r)&&!o.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},o.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),o.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var n={};return(()=>{"use strict";o.r(n),o.d(n,{Button:()=>u,Tag:()=>s});var e=o(937),t=o.n(e),r=o(779),a=o.n(r),l=function(){return(l=Object.assign||function(e){for(var t,r=1,o=arguments.length;r<o;r++)for(var n in t=arguments[r])Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n]);return e}).apply(this,arguments)},i=function(e){return"Button--"+e},c=function(e){var r=e.color,o=e.onClick,n=e.type,c=e.block,u=e.ariaLabel,p=e.disabled,f=function(e,t){var r={};for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&t.indexOf(o)<0&&(r[o]=e[o]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var n=0;for(o=Object.getOwnPropertySymbols(e);n<o.length;n++)t.indexOf(o[n])<0&&Object.prototype.propertyIsEnumerable.call(e,o[n])&&(r[o[n]]=e[o[n]])}return r}(e,["color","onClick","type","block","ariaLabel","disabled"]);return t().createElement("button",l({},f,{className:a()("Button",i(r),{"Button--block":c}),onClick:function(e){p?e.preventDefault():o&&o(e)},type:n,disabled:p,"aria-label":u||void 0}))};c.defaultProps={color:"primary",type:"button",block:!1,disabled:!1};const u=c;var p=function(e,t){return"Tag--"+e+"-"+t},f=function(e){var r=e.color,o=e.theme,n=e.children;return t().createElement("span",{className:a()("Tag",p(r,o))},n)};f.defaultProps={color:"default",theme:"dark"};const s=f})(),n})()}));
 //# sourceMappingURL=web-react.browser.umd.min.js.map

_bundles/web-react.umd.js

@@ -97,2 +97,24 @@ (function webpackUniversalModuleDefinition(root, factory) {
 /* harmony import */ var classnames__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(classnames__WEBPACK_IMPORTED_MODULE_1__);
+var __assign = (undefined && undefined.__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 = (undefined && undefined.__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;
+};
 
@@ -102,4 +124,15 @@
 var Button = function (_a) {
-    var color = _a.color, label = _a.label, onClick = _a.onClick, type = _a.type;
-    return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", { className: classnames__WEBPACK_IMPORTED_MODULE_1___default()('Button', getButtonColorClassname(color)), onClick: onClick, type: type }, label));
+    var color = _a.color, onClick = _a.onClick, type = _a.type, block = _a.block, ariaLabel = _a.ariaLabel, disabled = _a.disabled, restAttributes = __rest(_a, ["color", "onClick", "type", "block", "ariaLabel", "disabled"]);
+    var handleClick = function (event) {
+        if (disabled) {
+            event.preventDefault();
+            return;
+        }
+        if (onClick) {
+            onClick(event);
+        }
+    };
+    return (react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", __assign({}, restAttributes, { className: classnames__WEBPACK_IMPORTED_MODULE_1___default()('Button', getButtonColorClassname(color), {
+            'Button--block': block,
+        }), onClick: handleClick, type: type, disabled: disabled, "aria-label": ariaLabel || undefined })));
 };
@@ -109,2 +142,4 @@ Button.defaultProps = {
     type: 'button',
+    block: false,
+    disabled: false,
 };
@@ -160,3 +195,3 @@ /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Button);
 Tag.defaultProps = {
-    color: 'primary',
+    color: 'default',
     theme: 'dark',
@@ -163,0 +198,0 @@ };

_bundles/web-react.umd.min.js

 /*! For license information please see web-react.umd.min.js.LICENSE.txt */
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define("webReact",["react"],t):"object"==typeof exports?exports.webReact=t(require("react")):e.webReact=t(e.react)}(self,(function(e){return(()=>{var t={779:(e,t)=>{var r;!function(){"use strict";var o={}.hasOwnProperty;function n(){for(var e=[],t=0;t<arguments.length;t++){var r=arguments[t];if(r){var a=typeof r;if("string"===a||"number"===a)e.push(r);else if(Array.isArray(r)){if(r.length){var u=n.apply(null,r);u&&e.push(u)}}else if("object"===a)if(r.toString===Object.prototype.toString)for(var i in r)o.call(r,i)&&r[i]&&e.push(i);else e.push(r.toString())}}return e.join(" ")}e.exports?(n.default=n,e.exports=n):void 0===(r=function(){return n}.apply(t,[]))||(e.exports=r)}()},937:t=>{"use strict";t.exports=e}},r={};function o(e){var n=r[e];if(void 0!==n)return n.exports;var a=r[e]={exports:{}};return t[e](a,a.exports,o),a.exports}o.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return o.d(t,{a:t}),t},o.d=(e,t)=>{for(var r in t)o.o(t,r)&&!o.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},o.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),o.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var n={};return(()=>{"use strict";o.r(n),o.d(n,{Button:()=>c,Tag:()=>s});var e=o(937),t=o.n(e),r=o(779),a=o.n(r),u=function(e){return"Button--"+e},i=function(e){var r=e.color,o=e.label,n=e.onClick,i=e.type;return t().createElement("button",{className:a()("Button",u(r)),onClick:n,type:i},o)};i.defaultProps={color:"primary",type:"button"};const c=i;var p=function(e,t){return"Tag--"+e+"-"+t},l=function(e){var r=e.color,o=e.theme,n=e.children;return t().createElement("span",{className:a()("Tag",p(r,o))},n)};l.defaultProps={color:"primary",theme:"dark"};const s=l})(),n})()}));
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define("webReact",["react"],t):"object"==typeof exports?exports.webReact=t(require("react")):e.webReact=t(e.react)}(self,(function(e){return(()=>{var t={779:(e,t)=>{var r;!function(){"use strict";var o={}.hasOwnProperty;function n(){for(var e=[],t=0;t<arguments.length;t++){var r=arguments[t];if(r){var a=typeof r;if("string"===a||"number"===a)e.push(r);else if(Array.isArray(r)){if(r.length){var l=n.apply(null,r);l&&e.push(l)}}else if("object"===a)if(r.toString===Object.prototype.toString)for(var i in r)o.call(r,i)&&r[i]&&e.push(i);else e.push(r.toString())}}return e.join(" ")}e.exports?(n.default=n,e.exports=n):void 0===(r=function(){return n}.apply(t,[]))||(e.exports=r)}()},937:t=>{"use strict";t.exports=e}},r={};function o(e){var n=r[e];if(void 0!==n)return n.exports;var a=r[e]={exports:{}};return t[e](a,a.exports,o),a.exports}o.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return o.d(t,{a:t}),t},o.d=(e,t)=>{for(var r in t)o.o(t,r)&&!o.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},o.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),o.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var n={};return(()=>{"use strict";o.r(n),o.d(n,{Button:()=>u,Tag:()=>s});var e=o(937),t=o.n(e),r=o(779),a=o.n(r),l=function(){return(l=Object.assign||function(e){for(var t,r=1,o=arguments.length;r<o;r++)for(var n in t=arguments[r])Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n]);return e}).apply(this,arguments)},i=function(e){return"Button--"+e},c=function(e){var r=e.color,o=e.onClick,n=e.type,c=e.block,u=e.ariaLabel,p=e.disabled,f=function(e,t){var r={};for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&t.indexOf(o)<0&&(r[o]=e[o]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var n=0;for(o=Object.getOwnPropertySymbols(e);n<o.length;n++)t.indexOf(o[n])<0&&Object.prototype.propertyIsEnumerable.call(e,o[n])&&(r[o[n]]=e[o[n]])}return r}(e,["color","onClick","type","block","ariaLabel","disabled"]);return t().createElement("button",l({},f,{className:a()("Button",i(r),{"Button--block":c}),onClick:function(e){p?e.preventDefault():o&&o(e)},type:n,disabled:p,"aria-label":u||void 0}))};c.defaultProps={color:"primary",type:"button",block:!1,disabled:!1};const u=c;var p=function(e,t){return"Tag--"+e+"-"+t},f=function(e){var r=e.color,o=e.theme,n=e.children;return t().createElement("span",{className:a()("Tag",p(r,o))},n)};f.defaultProps={color:"default",theme:"dark"};const s=f})(),n})()}));
 //# sourceMappingURL=web-react.umd.min.js.map

components/Button/Button.d.ts

@@ -0,3 +1,5 @@
+import { MouseEvent } from 'react';
+import { WithChildren } from '../../types/main';
 declare type Color = 'primary' | 'secondary' | 'tertiary';
-export interface ButtonProps {
+export interface ButtonProps extends WithChildren {
     /**
@@ -8,9 +10,5 @@ * Emotion color variant.
     /**
-     * Button label.
-     */
-    label: string;
-    /**
      * Function to be called on button click.
      */
-    onClick: () => void;
+    onClick?: (event: MouseEvent) => void;
     /**
@@ -20,10 +18,24 @@ * HTML `type` attribute.
     type: 'button' | 'submit';
+    /**
+     * Block alignment modification
+     */
+    block: boolean;
+    /**
+     * Disabling button
+     */
+    disabled: boolean;
+    /**
+     * Aria label
+     */
+    ariaLabel?: string;
 }
 export declare const Button: {
-    ({ color, label, onClick, type, }: ButtonProps): JSX.Element;
+    ({ color, onClick, type, block, ariaLabel, disabled, ...restAttributes }: ButtonProps): JSX.Element;
     defaultProps: {
         color: string;
         type: string;
+        block: boolean;
+        disabled: boolean;
     };
 };
 export default Button;

components/Button/Button.js

@@ -0,1 +1,23 @@
+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;
+};
 import React from 'react';
@@ -5,4 +27,15 @@ import classNames from 'classnames';
 export var Button = function (_a) {
-    var color = _a.color, label = _a.label, onClick = _a.onClick, type = _a.type;
-    return (React.createElement("button", { className: classNames('Button', getButtonColorClassname(color)), onClick: onClick, type: type }, label));
+    var color = _a.color, onClick = _a.onClick, type = _a.type, block = _a.block, ariaLabel = _a.ariaLabel, disabled = _a.disabled, restAttributes = __rest(_a, ["color", "onClick", "type", "block", "ariaLabel", "disabled"]);
+    var handleClick = function (event) {
+        if (disabled) {
+            event.preventDefault();
+            return;
+        }
+        if (onClick) {
+            onClick(event);
+        }
+    };
+    return (React.createElement("button", __assign({}, restAttributes, { className: classNames('Button', getButtonColorClassname(color), {
+            'Button--block': block,
+        }), onClick: handleClick, type: type, disabled: disabled, "aria-label": ariaLabel || undefined })));
 };
@@ -12,4 +45,6 @@ Button.defaultProps = {
     type: 'button',
+    block: false,
+    disabled: false,
 };
 export default Button;
 //# sourceMappingURL=Button.js.map

components/Button/Button.stories.d.ts

@@ -10,5 +10,2 @@ declare const _default: {
         };
-        label: {
-            control: string;
-        };
         onClick: {
@@ -18,2 +15,14 @@ action: string;
         type: string;
+        disabled: {
+            control: string;
+        };
+        block: {
+            control: string;
+        };
+        ariaLabel: {
+            control: string;
+        };
+        children: {
+            control: string;
+        };
     };
@@ -20,0 +29,0 @@ };

components/Button/Button.stories.js

@@ -21,5 +21,10 @@ var __assign = (this && this.__assign) || function () {
         },
-        label: { control: 'text' },
         onClick: { action: 'onClick' },
         type: 'button',
+        disabled: { control: 'boolean' },
+        block: { control: 'boolean' },
+        ariaLabel: { control: 'text' },
+        children: {
+            control: 'text',
+        },
     },
@@ -31,4 +36,6 @@ };
     color: 'primary',
-    label: 'Button',
+    children: 'Button',
+    disabled: false,
+    block: false,
 };
 //# sourceMappingURL=Button.stories.js.map

components/Tag/Tag.js

@@ -11,3 +11,3 @@ import React from 'react';
 Tag.defaultProps = {
-    color: 'primary',
+    color: 'default',
     theme: 'dark',
@@ -14,0 +14,0 @@ };

package.json

 {
   "name": "@lmc-eu/spirit-web-react",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "React implementation of Spirit Design System components",
@@ -24,12 +24,25 @@ "license": "MIT",
   "devDependencies": {
+    "@lmc-eu/eslint-config-base": "^1.0.0",
     "@rollup/plugin-node-resolve": "^13.0.6",
-    "@types/react": "^17.0.19",
+    "@types/react": "^17.0.29",
     "@types/react-dom": "^17.0.9",
+    "@typescript-eslint/eslint-plugin": "^5.4.0",
+    "@typescript-eslint/parser": "^5.4.0",
+    "eslint": "^8.0.1",
+    "eslint-config-airbnb": "^18.2.1",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-import": "^2.25.2",
+    "eslint-plugin-jsx-a11y": "^6.4.1",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-promise": "^5.1.0",
+    "eslint-plugin-react": "^7.26.1",
+    "eslint-plugin-react-hooks": "^4.2.0",
+    "eslint-plugin-standard": "^5.0.0",
     "recast": "^0.20.5",
     "rollup": "^2.60.0",
     "rollup-plugin-terser": "^7.0.2",
-    "ts-loader": "^9.2.5",
+    "ts-loader": "^9.2.6",
     "ts-node": "^10.4.0",
-    "typescript": "^4.4.2",
-    "webpack-bundle-analyzer": "^4.4.2",
+    "typescript": "^4.4.4",
+    "webpack-bundle-analyzer": "^4.5.0",
     "webpack-merge": "^5.8.0"
@@ -56,4 +69,7 @@ },
     "rollup": "rollup -c ./config/rollup.config.js",
-    "resolve": "ts-node-script ./scripts/resolveModuleIds.ts"
+    "resolve": "ts-node-script ./scripts/resolveModuleIds.ts",
+    "lint": "eslint ./",
+    "lint:fix": "yarn lint --fix",
+    "test": "npm-run-all --serial lint types"
   }
 }

README.md

@@ -38,5 +38,5 @@ # @lmc-eu/spirit-web-react
 
-See [examples] for a live demo.
+👀 See [example] for a live demo.
 
 [web-docs]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web/README.md
-[examples]: https://github.com/lmc-eu/spirit-design-system/tree/main/examples/web-react
+[examples]: https://lmc-eu.github.io/spirit-design-system/web-react/

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

384051

increased by8.29%

Lines of code

7118

increased by3.91%

Worsened metrics

Dev dependency count

24

increased by118.18%

No dependency changes