Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@nulogy/components

Package Overview
Dependencies
Maintainers
7
Versions
489
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@nulogy/components - npm Package Compare versions

Comparing version 0.1.4 to 0.1.5

src/Button/QuietButton.js
src/Tables/baseline-delete-24px.svg
src/Tables/baseline-edit-24px.svg

2

dist/main.js

@@ -1,1 +0,1 @@

!function(e,n){if("object"==typeof exports&&"object"==typeof module)module.exports=n(require("styled-components"),require("react"));else if("function"==typeof define&&define.amd)define(["styled-components","react"],n);else{var r="object"==typeof exports?n(require("styled-components"),require("react")):n(e["styled-components"],e.react);for(var t in r)("object"==typeof exports?exports:e)[t]=r[t]}}(window,function(e,n){return function(e){var n={};function r(t){if(n[t])return n[t].exports;var o=n[t]={i:t,l:!1,exports:{}};return e[t].call(o.exports,o,o.exports,r),o.l=!0,o.exports}return r.m=e,r.c=n,r.d=function(e,n,t){r.o(e,n)||Object.defineProperty(e,n,{enumerable:!0,get:t})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,n){if(1&n&&(e=r(e)),8&n)return e;if(4&n&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(r.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&n&&"string"!=typeof e)for(var o in e)r.d(t,o,function(n){return e[n]}.bind(null,o));return t},r.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(n,"a",n),n},r.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},r.p="",r(r.s=17)}([function(e,n,r){"use strict";Object.defineProperty(n,"__esModule",{value:!0});const t=n.borderRadius="3px",o=n.font={family:{regular:"'IBM Plex Sans', sans",mono:"'IBM Plex Mono', monospace"},size:{smaller:12,small:14,medium:16,large:20,larger:24,largest:28,get pageTitle(){return this.largest},get sectionTitle(){return this.larger},get subsectionTitle(){return this.large}},weight:{normal:400,medium:500,bold:700},lineHeight:{smaller:1,regular:1.5}},u=n.space={half:4,x1:8,x2:16,x3:24,x4:32,x6:48,x8:64},a=n.colour={get base(){return a.blue[600]},get success(){return a.green[600]},get warning(){return a.yellow[600]},get error(){return a.red[600]},get white(){return this.neutral[100]},get black(){return this.neutral[900]},neutral:{100:"#FFFFFF",200:"#F7F7F7",300:"#EBEBEB",400:"#C7CED4",500:"#98A9B8",600:"#607180",700:"#475866",800:"#203140",900:"#03101A"},blue:{get base(){return this[600]},200:"#F0F3F5",300:"#DDE8ED",400:"#C2E0F0",500:"#63B5E8",600:"#0E77D2",700:"#054CA3",800:"#1B2B4D"},yellow:{get base(){return this[600]},200:"#F5F3F0",300:"#F2EADA",400:"#FAE5AF",500:"#FCDA7B",600:"#FDCF00",700:"#CEA10C",800:"#B3751E"},green:{get base(){return this[600]},200:"#EBF5F3",300:"#C1E8E0",400:"#8DD6C8",500:"#10B297",600:"#008763",700:"#02613C",800:"#053A1F"},red:{get base(){return this[600]},200:"#F7EEED",300:"#F2CECB",400:"#F2B2AE",500:"#DB807D",600:"#D13D3D",700:"#9E131A",800:"#78060F"}},l=n.radius={small:2,medium:4,large:6};n.shadow={pressed:"0 1px 4px 0 rgba(3,16,26, 0.175);",close:"0 2px 12px 0 rgba(3,16,26, 0.2);",middle:"0 3px 12px 0 rgba(3,16,26, 0.25);",far:"0 6px 15px 0 rgba(3,16,26, 0.33);"};n.default={name:"Nulogy Design System",borderRadius:t,colour:a,font:o,space:u,radius:l}},function(n,r){n.exports=e},function(e,r){e.exports=n},function(e,n,r){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.primaryButtonColours=n.buttonColours=void 0;var t=f(["\n color: ",";\n background-color: ",";\n border-color: ",";\n"],["\n color: ",";\n background-color: ",";\n border-color: ",";\n"]),o=f(["\n ","\n\n &:hover {\n ",";\n };\n\n &:active {\n ","\n }\n\n &:disabled {\n ",";\n border-color: ",";\n }\n "],["\n ","\n\n &:hover {\n ",";\n };\n\n &:active {\n ","\n }\n\n &:disabled {\n ",";\n border-color: ",";\n }\n "]),u=f(["\n ","\n\n &:hover {\n ","\n }\n\n &:active {\n ","\n }\n\n &:disabled {\n ","\n color: ",";\n }\n "],["\n ","\n\n &:hover {\n ","\n }\n\n &:active {\n ","\n }\n\n &:disabled {\n ","\n color: ",";\n }\n "]),a=f(["\n font-size: ","px;\n line-height: ",";\n font-weight: ",";\n padding: ","px ","px;\n "],["\n font-size: ","px;\n line-height: ",";\n font-weight: ",";\n padding: ","px ","px;\n "]),l=f(["\n box-sizing: border-box;\n border-style: solid;\n border-width: ","px;\n appearance: none;\n cursor: pointer;\n display: inline-flex;\n justify-content: center;\n align-items: center;\n border-radius: ","px;\n transition: .1s ease-in-out;\n text-align: left;\n\n ","\n ","\n\n &:hover{\n box-shadow: ",";\n }\n\n &:active {\n border-style: solid;\n box-shadow: none;\n outline: none;\n transform: scale(0.98);\n transition: .05s ease-in;\n }\n\n &:disabled {\n pointer-events: none;\n }\n\n"],["\n box-sizing: border-box;\n border-style: solid;\n border-width: ","px;\n appearance: none;\n cursor: pointer;\n display: inline-flex;\n justify-content: center;\n align-items: center;\n border-radius: ","px;\n transition: .1s ease-in-out;\n text-align: left;\n\n ","\n ","\n\n &:hover{\n box-shadow: ",";\n }\n\n &:active {\n border-style: solid;\n box-shadow: none;\n outline: none;\n transform: scale(0.98);\n transition: .05s ease-in;\n }\n\n &:disabled {\n pointer-events: none;\n }\n\n"]),i=(d(r(2)),r(1)),s=d(i),c=r(0);function d(e){return e&&e.__esModule?e:{default:e}}function f(e,n){return Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(n)}}))}var b=function(e){return e-1},p=function(e){return c.font.lineHeight[e]*c.font.size.medium},v=n.buttonColours=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:c.colour.blue.base;return(0,i.css)(t,e,c.colour.white,e)},g=n.primaryButtonColours=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:c.colour.blue.base;return(0,i.css)(t,c.colour.white,e,e)},m=s.default.button(l,1,c.radius.small,function(e){var n=e.size,r=void 0===n?"medium":n;return{large:(0,i.css)(a,c.font.size.large,p("regular")/c.font.size.large,c.font.weight.medium,b(c.space.x2),c.space.x3),medium:(0,i.css)(a,c.font.size.small,p("smaller")/c.font.size.small,c.font.weight.medium,b(c.space.x1),c.space.x2),small:(0,i.css)(a,c.font.size.smaller,p("smaller")/c.font.size.smaller,c.font.weight.normal,1,c.space.half)}[r]},function(e){var n=e.type,r=void 0===n?"button":n;return{button:(0,i.css)(o,v(),v(c.colour.blue[700]),v(),v(c.colour.neutral[400]),c.colour.neutral[300]),submit:(0,i.css)(u,g(),g(c.colour.blue[700]),g(),g(c.colour.neutral[300]),c.colour.neutral[500])}[r]},c.shadow.close);n.default=m},function(e,n,r){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.Table=n.HeaderCell=n.Body=n.Header=n.Row=n.Cell=void 0;var t=function(){return function(e,n){if(Array.isArray(e))return e;if(Symbol.iterator in Object(e))return function(e,n){var r=[],t=!0,o=!1,u=void 0;try{for(var a,l=e[Symbol.iterator]();!(t=(a=l.next()).done)&&(r.push(a.value),!n||r.length!==n);t=!0);}catch(e){o=!0,u=e}finally{try{!t&&l.return&&l.return()}finally{if(o)throw u}}return r}(e,n);throw new TypeError("Invalid attempt to destructure non-iterable instance")}}(),o=c(["\n padding: 1rem;\n text-align: left;\n border-bottom: ",";\n"],["\n padding: 1rem;\n text-align: left;\n border-bottom: ",";\n"]),u=c([""],[""]),a=c(["\n font-weight: bold;\n border-bottom-width: 2px;\n"],["\n font-weight: bold;\n border-bottom-width: 2px;\n"]),l=c(["\n border-collapse: collapse;\n border-top: ",";\n"],["\n border-collapse: collapse;\n border-top: ",";\n"]),i=(s(r(2)),s(r(1)));function s(e){return e&&e.__esModule?e:{default:e}}function c(e,n){return Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(n)}}))}var d={theme:s(r(0)).default},f=function(e){return"1px solid "+e.theme.colour.neutral[400]},b=n.Cell=i.default.td(o,f);b.defaultProps=d;var p=n.Row=i.default.tr(u),v=n.Header=i.default.thead(u),g=n.Body=i.default.tbody(u),m=n.HeaderCell=(0,i.default)(b.withComponent("th"))(a),y=n.Table=i.default.table(l,f);y.defaultProps=d;var h=(0,i.default)(y)(u);Object.entries({Cell:b,Row:p,Header:v,Body:g,HeaderCell:m}).map(function(e){var n=t(e,2),r=n[0],o=n[1];return h[r]=o}),n.default=h},function(e,n,r){"use strict";Object.defineProperty(n,"__esModule",{value:!0});var t=r(4);Object.keys(t).forEach(function(e){"default"!==e&&"__esModule"!==e&&Object.defineProperty(n,e,{enumerable:!0,get:function(){return t[e]}})})},function(e,n,r){"use strict";e.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"},function(e,n,r){"use strict";var t=function(e){};e.exports=function(e,n,r,o,u,a,l,i){if(t(n),!e){var s;if(void 0===n)s=new Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var c=[r,o,u,a,l,i],d=0;(s=new Error(n.replace(/%s/g,function(){return c[d++]}))).name="Invariant Violation"}throw s.framesToPop=1,s}}},function(e,n,r){"use strict";function t(e){return function(){return e}}var o=function(){};o.thatReturns=t,o.thatReturnsFalse=t(!1),o.thatReturnsTrue=t(!0),o.thatReturnsNull=t(null),o.thatReturnsThis=function(){return this},o.thatReturnsArgument=function(e){return e},e.exports=o},function(e,n,r){"use strict";var t=r(8),o=r(7),u=r(6);e.exports=function(){function e(e,n,r,t,a,l){l!==u&&o(!1,"Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types")}function n(){return e}e.isRequired=e;var r={array:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:n,element:e,instanceOf:n,node:e,objectOf:n,oneOf:n,oneOfType:n,shape:n,exact:n};return r.checkPropTypes=t,r.PropTypes=r,r}},function(e,n,r){e.exports=r(9)()},function(e,n,r){"use strict";Object.defineProperty(n,"__esModule",{value:!0});var t=d(["\n ","\n ","\n"],["\n ","\n ","\n"]),o=d(["\n color: ",";\n\n &:hover{\n color: ",";\n }\n "],["\n color: ",";\n\n &:hover{\n color: ",";\n }\n "]),u=d(["\n text-decoration: ",";\n "],["\n text-decoration: ",";\n "]),a=(c(r(2)),c(r(10))),l=r(1),i=c(l),s=c(r(0));function c(e){return e&&e.__esModule?e:{default:e}}function d(e,n){return Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(n)}}))}var f=i.default.a(t,function(e){var n=e.theme;return(0,l.css)(o,n.colour.blue.base,n.colour.blue[800])},function(e){var n=e.underline,r=void 0===n||n;return(0,l.css)(u,r?"underline":"none")});f.propTypes={underline:a.default.bool},f.defaultProps={theme:s.default},n.default=f},function(e,n,r){"use strict";Object.defineProperty(n,"__esModule",{value:!0});var t=r(11);Object.defineProperty(n,"Link",{enumerable:!0,get:function(){return(e=t,e&&e.__esModule?e:{default:e}).default;var e}})},function(e,n,r){"use strict";Object.defineProperty(n,"__esModule",{value:!0});var t,o,u=(t=["\n ","\n\n background-color: transparent;\n border-color: transparent;\n color: ",";\n padding: ","px;\n\n &:hover {\n ","\n background-color: transparent;\n border-color: transparent;\n box-shadow: none;\n color: ",";\n }\n\n &:active{\n transform: none;\n }\n\n &:disabled{\n background-color: transparent;\n border-color: transparent;\n color: ",";\n }\n\n"],o=["\n ","\n\n background-color: transparent;\n border-color: transparent;\n color: ",";\n padding: ","px;\n\n &:hover {\n ","\n background-color: transparent;\n border-color: transparent;\n box-shadow: none;\n color: ",";\n }\n\n &:active{\n transform: none;\n }\n\n &:disabled{\n background-color: transparent;\n border-color: transparent;\n color: ",";\n }\n\n"],Object.freeze(Object.defineProperties(t,{raw:{value:Object.freeze(o)}}))),a=(c(r(2)),c(r(1))),l=r(0),i=r(3),s=c(i);function c(e){return e&&e.__esModule?e:{default:e}}var d=(0,a.default)(s.default)(u,function(e){var n=e.type,r=void 0===n?"button":n;return{submit:(0,i.buttonColours)({background:l.colour.green.base})}[r]},l.colour.blue.base,l.space.x1,(0,i.buttonColours)({background:l.colour.green[700]}),l.colour.blue[700],l.colour.neutral[400]);n.default=d},function(e,n,r){"use strict";Object.defineProperty(n,"__esModule",{value:!0});var t=f(["\n ","\n \n &:hover {\n ",";\n };\n\n &:active {\n ","\n }\n "],["\n ","\n \n &:hover {\n ",";\n };\n\n &:active {\n ","\n }\n "]),o=f(["\n ","\n\n &:hover {\n ","\n }\n\n &:active {\n ","\n }\n "],["\n ","\n\n &:hover {\n ","\n }\n\n &:active {\n ","\n }\n "]),u=f(["\n ","\n"],["\n ","\n"]),a=(d(r(2)),r(1)),l=d(a),i=r(0),s=r(3),c=d(s);function d(e){return e&&e.__esModule?e:{default:e}}function f(e,n){return Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(n)}}))}var b=(0,l.default)(c.default)(u,function(e){var n=e.type,r=void 0===n?"button":n;return{button:(0,a.css)(t,(0,s.buttonColours)(i.colour.red.base),(0,s.buttonColours)(i.colour.red[700]),(0,s.buttonColours)(i.colour.red.base)),submit:(0,a.css)(o,(0,s.primaryButtonColours)(i.colour.red.base),(0,s.primaryButtonColours)(i.colour.red[700]),(0,s.primaryButtonColours)(i.colour.red.base))}[r]});n.default=b},function(e,n,r){"use strict";Object.defineProperty(n,"__esModule",{value:!0});var t=f(["\n ","\n \n &:hover {\n ",";\n };\n\n &:active {\n ","\n }\n "],["\n ","\n \n &:hover {\n ",";\n };\n\n &:active {\n ","\n }\n "]),o=f(["\n ","\n\n &:hover {\n ","\n }\n\n &:active {\n ","\n }\n "],["\n ","\n\n &:hover {\n ","\n }\n\n &:active {\n ","\n }\n "]),u=f(["\n ","\n"],["\n ","\n"]),a=(d(r(2)),r(1)),l=d(a),i=r(0),s=r(3),c=d(s);function d(e){return e&&e.__esModule?e:{default:e}}function f(e,n){return Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(n)}}))}var b=(0,l.default)(c.default)(u,function(e){var n=e.type,r=void 0===n?"button":n;return{button:(0,a.css)(t,(0,s.buttonColours)(i.colour.green.base),(0,s.buttonColours)(i.colour.green[700]),(0,s.buttonColours)(i.colour.green.base)),submit:(0,a.css)(o,(0,s.primaryButtonColours)(i.colour.green.base),(0,s.primaryButtonColours)(i.colour.green[700]),(0,s.primaryButtonColours)(i.colour.green.base))}[r]});n.default=b},function(e,n,r){"use strict";Object.defineProperty(n,"__esModule",{value:!0});var t=r(3);Object.defineProperty(n,"Button",{enumerable:!0,get:function(){return l(t).default}});var o=r(15);Object.defineProperty(n,"ApprovalButton",{enumerable:!0,get:function(){return l(o).default}});var u=r(14);Object.defineProperty(n,"DangerButton",{enumerable:!0,get:function(){return l(u).default}});var a=r(13);function l(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(n,"LinkButton",{enumerable:!0,get:function(){return l(a).default}})},function(e,n,r){"use strict";Object.defineProperty(n,"__esModule",{value:!0});var t=r(16);Object.keys(t).forEach(function(e){"default"!==e&&"__esModule"!==e&&Object.defineProperty(n,e,{enumerable:!0,get:function(){return t[e]}})});var o=r(12);Object.keys(o).forEach(function(e){"default"!==e&&"__esModule"!==e&&Object.defineProperty(n,e,{enumerable:!0,get:function(){return o[e]}})});var u=r(5);Object.keys(u).forEach(function(e){"default"!==e&&"__esModule"!==e&&Object.defineProperty(n,e,{enumerable:!0,get:function(){return u[e]}})})}])});
!function(n,e){if("object"==typeof exports&&"object"==typeof module)module.exports=e(require("styled-components"),require("react"));else if("function"==typeof define&&define.amd)define(["styled-components","react"],e);else{var t="object"==typeof exports?e(require("styled-components"),require("react")):e(n["styled-components"],n.react);for(var r in t)("object"==typeof exports?exports:n)[r]=t[r]}}(window,function(n,e){return function(n){var e={};function t(r){if(e[r])return e[r].exports;var o=e[r]={i:r,l:!1,exports:{}};return n[r].call(o.exports,o,o.exports,t),o.l=!0,o.exports}return t.m=n,t.c=e,t.d=function(n,e,r){t.o(n,e)||Object.defineProperty(n,e,{enumerable:!0,get:r})},t.r=function(n){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(n,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(n,"__esModule",{value:!0})},t.t=function(n,e){if(1&e&&(n=t(n)),8&e)return n;if(4&e&&"object"==typeof n&&n&&n.__esModule)return n;var r=Object.create(null);if(t.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:n}),2&e&&"string"!=typeof n)for(var o in n)t.d(r,o,function(e){return n[e]}.bind(null,o));return r},t.n=function(n){var e=n&&n.__esModule?function(){return n.default}:function(){return n};return t.d(e,"a",e),e},t.o=function(n,e){return Object.prototype.hasOwnProperty.call(n,e)},t.p="",t(t.s=18)}([function(n,e,t){"use strict";Object.defineProperty(e,"__esModule",{value:!0});const r=e.borderRadius="3px",o=e.font={family:{regular:"'IBM Plex Sans', sans",mono:"'IBM Plex Mono', monospace"},size:{smaller:12,small:14,medium:16,large:20,larger:24,largest:28,get pageTitle(){return this.largest},get sectionTitle(){return this.larger},get subsectionTitle(){return this.large}},weight:{normal:400,medium:500,bold:700},lineHeight:{smaller:1,regular:1.5}},u=e.space={half:4,x1:8,x2:16,x3:24,x4:32,x6:48,x8:64},a=e.colour={get base(){return a.blue[600]},get success(){return a.green[600]},get warning(){return a.yellow[600]},get error(){return a.red[600]},get white(){return this.neutral[100]},get black(){return this.neutral[900]},neutral:{100:"#FFFFFF",200:"#F7F7F7",300:"#EBEBEB",400:"#C7CED4",500:"#98A9B8",600:"#607180",700:"#475866",800:"#203140",900:"#03101A"},blue:{get base(){return this[600]},200:"#F0F3F5",300:"#DDE8ED",400:"#C2E0F0",500:"#63B5E8",600:"#0E77D2",700:"#054CA3",800:"#1B2B4D"},yellow:{get base(){return this[600]},200:"#F5F3F0",300:"#F2EADA",400:"#FAE5AF",500:"#FCDA7B",600:"#FDCF00",700:"#CEA10C",800:"#B3751E"},green:{get base(){return this[600]},200:"#EBF5F3",300:"#C1E8E0",400:"#8DD6C8",500:"#10B297",600:"#008763",700:"#02613C",800:"#053A1F"},red:{get base(){return this[600]},200:"#F7EEED",300:"#F2CECB",400:"#F2B2AE",500:"#DB807D",600:"#D13D3D",700:"#9E131A",800:"#78060F"}},l=e.radius={small:2,medium:4,large:6};e.shadow={pressed:"0 1px 4px 0 rgba(3,16,26, 0.175);",close:"0 2px 12px 0 rgba(3,16,26, 0.2);",middle:"0 3px 12px 0 rgba(3,16,26, 0.25);",far:"0 6px 15px 0 rgba(3,16,26, 0.33);"};e.default={name:"Nulogy Design System",borderRadius:r,colour:a,font:o,space:u,radius:l}},function(e,t){e.exports=n},function(n,t){n.exports=e},function(n,e,t){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.primaryButtonColours=e.buttonColours=e.buttonReset=void 0;var r=p(["\n box-sizing: border-box;\n padding: 0;\n border-width: 0;\n border-style: solid;\n appearance: none;\n outline: none;\n font-size: inherit;\n cursor: pointer;\n"],["\n box-sizing: border-box;\n padding: 0;\n border-width: 0;\n border-style: solid;\n appearance: none;\n outline: none;\n font-size: inherit;\n cursor: pointer;\n"]),o=p(["\n color: ",";\n background-color: ",";\n border-color: ",";\n"],["\n color: ",";\n background-color: ",";\n border-color: ",";\n"]),u=p(["\n ","\n\n &:hover {\n ",";\n };\n\n &:active {\n ","\n }\n\n &:disabled {\n ",";\n border-color: ",";\n }\n "],["\n ","\n\n &:hover {\n ",";\n };\n\n &:active {\n ","\n }\n\n &:disabled {\n ",";\n border-color: ",";\n }\n "]),a=p(["\n ","\n\n &:hover {\n ","\n }\n\n &:active {\n ","\n }\n\n &:disabled {\n ","\n color: ",";\n }\n "],["\n ","\n\n &:hover {\n ","\n }\n\n &:active {\n ","\n }\n\n &:disabled {\n ","\n color: ",";\n }\n "]),l=p(["\n font-size: ","px;\n line-height: ",";\n font-weight: ",";\n padding: ","px ","px;\n "],["\n font-size: ","px;\n line-height: ",";\n font-weight: ",";\n padding: ","px ","px;\n "]),i=p(["\n ","\n border-style: solid;\n border-width: ","px;\n display: inline-flex;\n justify-content: center;\n align-items: center;\n border-radius: ","px;\n transition: .1s ease-in-out;\n text-align: left;\n\n ","\n ","\n\n &:hover{\n box-shadow: ",";\n }\n\n &:active {\n border-style: solid;\n box-shadow: none;\n outline: none;\n transform: scale(0.98);\n transition: .05s ease-in;\n }\n\n &:disabled {\n pointer-events: none;\n }\n\n"],["\n ","\n border-style: solid;\n border-width: ","px;\n display: inline-flex;\n justify-content: center;\n align-items: center;\n border-radius: ","px;\n transition: .1s ease-in-out;\n text-align: left;\n\n ","\n ","\n\n &:hover{\n box-shadow: ",";\n }\n\n &:active {\n border-style: solid;\n box-shadow: none;\n outline: none;\n transform: scale(0.98);\n transition: .05s ease-in;\n }\n\n &:disabled {\n pointer-events: none;\n }\n\n"]),s=(f(t(2)),t(1)),c=f(s),d=t(0);function f(n){return n&&n.__esModule?n:{default:n}}function p(n,e){return Object.freeze(Object.defineProperties(n,{raw:{value:Object.freeze(e)}}))}var b=function(n){return n-1},g=function(n){return d.font.lineHeight[n]*d.font.size.medium},v=e.buttonReset=(0,s.css)(r),h=e.buttonColours=function(){var n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:d.colour.blue.base;return(0,s.css)(o,n,d.colour.white,n)},m=e.primaryButtonColours=function(){var n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:d.colour.blue.base;return(0,s.css)(o,d.colour.white,n,n)},x=c.default.button(i,v,1,d.radius.small,function(n){var e=n.size,t=void 0===e?"medium":e;return{large:(0,s.css)(l,d.font.size.large,g("regular")/d.font.size.large,d.font.weight.medium,b(d.space.x2),d.space.x3),medium:(0,s.css)(l,d.font.size.small,g("smaller")/d.font.size.small,d.font.weight.medium,b(d.space.x1),d.space.x2),small:(0,s.css)(l,d.font.size.smaller,g("smaller")/d.font.size.smaller,d.font.weight.normal,1,d.space.half)}[t]},function(n){var e=n.type,t=void 0===e?"button":e;return{button:(0,s.css)(u,h(),h(d.colour.blue[700]),h(),h(d.colour.neutral[400]),d.colour.neutral[300]),submit:(0,s.css)(a,m(),m(d.colour.blue[700]),m(),m(d.colour.neutral[300]),d.colour.neutral[500])}[t]},d.shadow.close);e.default=x},function(n,e,t){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var r=t(13);Object.defineProperty(e,"Link",{enumerable:!0,get:function(){return(n=r,n&&n.__esModule?n:{default:n}).default;var n}})},function(n,e,t){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var r,o,u=(r=["\n ","\n\n background-color: transparent;\n border-color: transparent;\n color: ",";\n padding: ","px ","px;\n\n &:hover {\n ","\n background-color: transparent;\n border-color: transparent;\n box-shadow: none;\n color: ",";\n }\n\n &:active{\n transform: none;\n }\n\n &:disabled{\n background-color: transparent;\n border-color: transparent;\n color: ",";\n }\n\n"],o=["\n ","\n\n background-color: transparent;\n border-color: transparent;\n color: ",";\n padding: ","px ","px;\n\n &:hover {\n ","\n background-color: transparent;\n border-color: transparent;\n box-shadow: none;\n color: ",";\n }\n\n &:active{\n transform: none;\n }\n\n &:disabled{\n background-color: transparent;\n border-color: transparent;\n color: ",";\n }\n\n"],Object.freeze(Object.defineProperties(r,{raw:{value:Object.freeze(o)}}))),a=(c(t(2)),c(t(1))),l=t(0),i=t(3),s=c(i);function c(n){return n&&n.__esModule?n:{default:n}}var d=(0,a.default)(s.default)(u,function(n){var e=n.type,t=void 0===e?"button":e;return{submit:(0,i.buttonColours)({background:l.colour.green.base})}[t]},l.colour.blue.base,l.space.x1-1,l.space.x1,(0,i.buttonColours)({background:l.colour.green[700]}),l.colour.blue[700],l.colour.neutral[400]);e.default=d},function(n,e,t){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.Table=e.Body=e.TemporaryTextInput=e.CreateRow=e.HeaderCell=e.Header=e.Row=e.Button=e.ActionCell=e.Cell=void 0;var r=x(["\n ","\n"],["\n ","\n"]),o=x(["\n font-size: ","px;\n line-height: ",";\n padding: ","px ","px;\n vertical-align: top;\n &:first-child{\n padding-left: ","px;\n }\n &:last-child{\n padding-right: ","px;\n\n }\n "],["\n font-size: ","px;\n line-height: ",";\n padding: ","px ","px;\n vertical-align: top;\n &:first-child{\n padding-left: ","px;\n }\n &:last-child{\n padding-right: ","px;\n\n }\n "]),u=x(["\n padding-top: ","px;\n padding-bottom: ","px;\n text-align:right;\n white-space: nowrap;\n vertical-align: middle;\n & > button:not(:last-child) {\n margin-right: ","px;\n }\n "],["\n padding-top: ","px;\n padding-bottom: ","px;\n text-align:right;\n white-space: nowrap;\n vertical-align: middle;\n & > button:not(:last-child) {\n margin-right: ","px;\n }\n "]),a=x(["\n padding: ","px;\n border-width: 0;\n border-radius: 50%;\n transition: none;\n &:hover{\n background-color: ",";\n transform: scale(1.25);\n svg{\n transform: scale(0.8);\n }\n }\n "],["\n padding: ","px;\n border-width: 0;\n border-radius: 50%;\n transition: none;\n &:hover{\n background-color: ",";\n transform: scale(1.25);\n svg{\n transform: scale(0.8);\n }\n }\n "]),l=x([""],[""]),i=x(["\n text-align: left;\n"],["\n text-align: left;\n"]),s=x(["\n font-weight: bold;\n vertical-align: bottom;\n "],["\n font-weight: bold;\n vertical-align: bottom;\n "]),c=x(["\n background-color: ",";\n color: ",";\n "," {\n padding-top: ","px;\n padding-bottom: ","px;\n }\n "],["\n background-color: ",";\n color: ",";\n "," {\n padding-top: ","px;\n padding-bottom: ","px;\n }\n "]),d=x(["\n box-sizing: border-box;\n height:32px; // Temporary\n width:100%;\n border: none;\n background: ",";\n font-size: ","px;\n padding: ","px ","px;\n border-radius: ","px;\n &:focus{\n background: ",";\n }\n "],["\n box-sizing: border-box;\n height:32px; // Temporary\n width:100%;\n border: none;\n background: ",";\n font-size: ","px;\n padding: ","px ","px;\n border-radius: ","px;\n &:focus{\n background: ",";\n }\n "]),f=x(["\n ",":nth-of-type(odd){\n background-color: ",";\n }\n "],["\n ",":nth-of-type(odd){\n background-color: ",";\n }\n "]),p=x(["\n border-collapse: collapse;\n width: 100%;\n background-color: ",";\n "],["\n border-collapse: collapse;\n width: 100%;\n background-color: ",";\n "]),b=(m(t(2)),t(1)),g=m(b),v=m(t(0)),h=m(t(5));function m(n){return n&&n.__esModule?n:{default:n}}function x(n,e){return Object.freeze(Object.defineProperties(n,{raw:{value:Object.freeze(e)}}))}var y={theme:v.default},_=e.Cell=g.default.td(r,function(n){var e,t=n.theme;return(0,b.css)(o,t.font.size.small,(e="smaller",function(n){var t=n.theme;return t.font.lineHeight[e]*t.font.size.medium})({theme:t})/t.font.size.small,t.space.x2,t.space.x1,t.space.x2,t.space.x2)});_.defaultProps=y;var O=e.ActionCell=(0,g.default)(_)(r,function(n){var e=n.theme;return(0,b.css)(u,e.space.x1,e.space.x1,e.space.half)});O.defaultProps=y,(e.Button=(0,g.default)(h.default)(r,function(n){var e=n.theme;return(0,b.css)(a,e.space.half,e.colour.blue[300])})).defaultProps=y;var j=e.Row=g.default.tr(l);e.Header=g.default.thead(i);(e.HeaderCell=(0,g.default)(_.withComponent("th"))(r,function(n){n.theme;return(0,b.css)(s)})).defaultProps=y,(e.CreateRow=g.default.tr(r,function(n){var e=n.theme;return(0,b.css)(c,e.colour.blue[800],e.colour.white,O,e.space.x2,e.space.x2)})).defaultProps=y,(e.TemporaryTextInput=g.default.input(r,function(n){var e=n.theme;return(0,b.css)(d,e.colour.blue[300],e.font.size.small,e.space.half,e.space.x1,e.radius.small,e.colour.white)})).defaultProps=y,(e.Body=g.default.tbody(r,function(n){var e=n.theme;return(0,b.css)(f,j,e.colour.blue[200])})).defaultProps=y,(e.Table=g.default.table(r,function(n){var e=n.theme;return(0,b.css)(p,e.colour.white)})).defaultProps=y},function(n,e,t){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var r=t(6);Object.keys(r).forEach(function(n){"default"!==n&&"__esModule"!==n&&Object.defineProperty(e,n,{enumerable:!0,get:function(){return r[n]}})})},function(n,e,t){"use strict";n.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"},function(n,e,t){"use strict";var r=function(n){};n.exports=function(n,e,t,o,u,a,l,i){if(r(e),!n){var s;if(void 0===e)s=new Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var c=[t,o,u,a,l,i],d=0;(s=new Error(e.replace(/%s/g,function(){return c[d++]}))).name="Invariant Violation"}throw s.framesToPop=1,s}}},function(n,e,t){"use strict";function r(n){return function(){return n}}var o=function(){};o.thatReturns=r,o.thatReturnsFalse=r(!1),o.thatReturnsTrue=r(!0),o.thatReturnsNull=r(null),o.thatReturnsThis=function(){return this},o.thatReturnsArgument=function(n){return n},n.exports=o},function(n,e,t){"use strict";var r=t(10),o=t(9),u=t(8);n.exports=function(){function n(n,e,t,r,a,l){l!==u&&o(!1,"Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types")}function e(){return n}n.isRequired=n;var t={array:n,bool:n,func:n,number:n,object:n,string:n,symbol:n,any:n,arrayOf:e,element:n,instanceOf:e,node:n,objectOf:e,oneOf:e,oneOfType:e,shape:e,exact:e};return t.checkPropTypes=r,t.PropTypes=t,t}},function(n,e,t){n.exports=t(11)()},function(n,e,t){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var r=d(["\n ","\n ","\n"],["\n ","\n ","\n"]),o=d(["\n color: ",";\n background-color: transparent;\n &:hover{\n color: ",";\n }\n "],["\n color: ",";\n background-color: transparent;\n &:hover{\n color: ",";\n }\n "]),u=d(["\n text-decoration: ",";\n "],["\n text-decoration: ",";\n "]),a=(c(t(2)),c(t(12))),l=t(1),i=c(l),s=c(t(0));function c(n){return n&&n.__esModule?n:{default:n}}function d(n,e){return Object.freeze(Object.defineProperties(n,{raw:{value:Object.freeze(e)}}))}var f=i.default.a(r,function(n){var e=n.theme;return(0,l.css)(o,e.colour.blue.base,e.colour.blue[800])},function(n){var e=n.underline;return(0,l.css)(u,e?"underline":"none")});f.propTypes={underline:a.default.bool},f.defaultProps={theme:s.default,underline:!0},e.default=f},function(n,e,t){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var r=d(["\n ","\n ","\n"],["\n ","\n ","\n"]),o=d(["\n &:disabled {\n color: ",";\n pointer-events: none;\n }\n "],["\n &:disabled {\n color: ",";\n pointer-events: none;\n }\n "]),u=(c(t(2)),t(1)),a=c(u),l=c(t(0)),i=t(3),s=t(4);function c(n){return n&&n.__esModule?n:{default:n}}function d(n,e){return Object.freeze(Object.defineProperties(n,{raw:{value:Object.freeze(e)}}))}var f=(0,a.default)(s.Link.withComponent("button"))(r,i.buttonReset,function(n){var e=n.theme;return(0,u.css)(o,e.colour.neutral[400])});f.defaultProps={theme:l.default},e.default=f},function(n,e,t){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var r=f(["\n ","\n \n &:hover {\n ",";\n };\n\n &:active {\n ","\n }\n "],["\n ","\n \n &:hover {\n ",";\n };\n\n &:active {\n ","\n }\n "]),o=f(["\n ","\n\n &:hover {\n ","\n }\n\n &:active {\n ","\n }\n "],["\n ","\n\n &:hover {\n ","\n }\n\n &:active {\n ","\n }\n "]),u=f(["\n ","\n"],["\n ","\n"]),a=(d(t(2)),t(1)),l=d(a),i=t(0),s=t(3),c=d(s);function d(n){return n&&n.__esModule?n:{default:n}}function f(n,e){return Object.freeze(Object.defineProperties(n,{raw:{value:Object.freeze(e)}}))}var p=(0,l.default)(c.default)(u,function(n){var e=n.type,t=void 0===e?"button":e;return{button:(0,a.css)(r,(0,s.buttonColours)(i.colour.red.base),(0,s.buttonColours)(i.colour.red[700]),(0,s.buttonColours)(i.colour.red.base)),submit:(0,a.css)(o,(0,s.primaryButtonColours)(i.colour.red.base),(0,s.primaryButtonColours)(i.colour.red[700]),(0,s.primaryButtonColours)(i.colour.red.base))}[t]});e.default=p},function(n,e,t){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var r=f(["\n ","\n \n &:hover {\n ",";\n };\n\n &:active {\n ","\n }\n "],["\n ","\n \n &:hover {\n ",";\n };\n\n &:active {\n ","\n }\n "]),o=f(["\n ","\n\n &:hover {\n ","\n }\n\n &:active {\n ","\n }\n "],["\n ","\n\n &:hover {\n ","\n }\n\n &:active {\n ","\n }\n "]),u=f(["\n ","\n"],["\n ","\n"]),a=(d(t(2)),t(1)),l=d(a),i=t(0),s=t(3),c=d(s);function d(n){return n&&n.__esModule?n:{default:n}}function f(n,e){return Object.freeze(Object.defineProperties(n,{raw:{value:Object.freeze(e)}}))}var p=(0,l.default)(c.default)(u,function(n){var e=n.type,t=void 0===e?"button":e;return{button:(0,a.css)(r,(0,s.buttonColours)(i.colour.green.base),(0,s.buttonColours)(i.colour.green[700]),(0,s.buttonColours)(i.colour.green.base)),submit:(0,a.css)(o,(0,s.primaryButtonColours)(i.colour.green.base),(0,s.primaryButtonColours)(i.colour.green[700]),(0,s.primaryButtonColours)(i.colour.green.base))}[t]});e.default=p},function(n,e,t){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var r=t(3);Object.defineProperty(e,"Button",{enumerable:!0,get:function(){return i(r).default}});var o=t(16);Object.defineProperty(e,"ApprovalButton",{enumerable:!0,get:function(){return i(o).default}});var u=t(15);Object.defineProperty(e,"DangerButton",{enumerable:!0,get:function(){return i(u).default}});var a=t(5);Object.defineProperty(e,"QuietButton",{enumerable:!0,get:function(){return i(a).default}});var l=t(14);function i(n){return n&&n.__esModule?n:{default:n}}Object.defineProperty(e,"LinkButton",{enumerable:!0,get:function(){return i(l).default}})},function(n,e,t){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.Tables=void 0;var r=t(17);Object.keys(r).forEach(function(n){"default"!==n&&"__esModule"!==n&&Object.defineProperty(e,n,{enumerable:!0,get:function(){return r[n]}})});var o=t(4);Object.keys(o).forEach(function(n){"default"!==n&&"__esModule"!==n&&Object.defineProperty(e,n,{enumerable:!0,get:function(){return o[n]}})});var u=function(n){if(n&&n.__esModule)return n;var e={};if(null!=n)for(var t in n)Object.prototype.hasOwnProperty.call(n,t)&&(e[t]=n[t]);return e.default=n,e}(t(7));e.Tables=u}])});

4

package.json
{
"name": "@nulogy/components",
"version": "0.1.4",
"version": "0.1.5",
"description": "Component library for the Nulogy Design System - http://nulogy.design",

@@ -76,3 +76,3 @@ "private": false,

},
"gitHead": "1464f7e486175089a75c273831ae56fe30f32b73"
"gitHead": "576376c9c45848afc10e4f73c010b1ffbc151cab"
}

15

src/Button/Button.js

@@ -13,2 +13,13 @@ import React from 'react';

export const buttonReset = css`
box-sizing: border-box;
padding: 0;
border-width: 0;
border-style: solid;
appearance: none;
outline: none;
font-size: inherit;
cursor: pointer;
`;
export const buttonColours = (mainColour = colour.blue.base, ) => css`

@@ -86,7 +97,5 @@ color: ${mainColour};

const Button = styled.button`
box-sizing: border-box;
${buttonReset}
border-style: solid;
border-width: ${borderWidth}px;
appearance: none;
cursor: pointer;
display: inline-flex;

@@ -93,0 +102,0 @@ justify-content: center;

47

src/Button/Button.story.js
import React from "react";
import { storiesOf } from "@storybook/react";
import { action } from '@storybook/addon-actions';
import Button from "./Button";
import ApprovalButton from "./ApprovalButton";
import DangerButton from "./DangerButton";
import LinkButton from "./LinkButton";
import styled, { css } from 'styled-components';
import { font } from '@nulogy/tokens';
import {
Button,
ApprovalButton,
DangerButton,
QuietButton,
LinkButton
} from "./";
const Text = styled.p`

@@ -63,6 +67,11 @@ font-size: ${font.size.medium}px;

<Title>Quiet Button</Title>
<QuietButton onClick={action('clicked')}>Quiet Button</QuietButton>
<Nbsp />
<QuietButton disabled onClick={action('clicked')}>Disabled Quiet Button</QuietButton>
<Title>Link Button</Title>
<LinkButton onClick={action('clicked')}>Link Button</LinkButton>
<Nbsp />
<LinkButton disabled onClick={action('clicked')}>Disabled Link Button</LinkButton>
<p><LinkButton onClick={action('clicked LinkButton')}>Link Button</LinkButton> looks like a link but is actually a button!</p>
<p><LinkButton underline={false} onClick={action('clicked LinkButton')}>Link Button with no underline</LinkButton> looks like a link but is actually a button!</p>
<p><LinkButton disabled onClick={action('clicked LinkButton')}>Disabled Link Button</LinkButton> looks like a link but is actually a button!</p>
</React.Fragment>

@@ -142,3 +151,12 @@ ))

storiesOf('Buttons / Link Button', module)
storiesOf('Buttons / Quiet Button', module)
.add('Default', () => <QuietButton onClick={action('clicked')}>Default Button</QuietButton>)
.add('Submit', () => <QuietButton type="submit" onClick={action('clicked')}>Submit Button</QuietButton>)
.add('With an icon', () => <QuietButton onClick={action('clicked')}>➕</QuietButton>)
.add('With an icon and text', () => <QuietButton onClick={action('clicked')}>✏️ Edit this thing</QuietButton>)
.add('Disabled', () => <QuietButton disabled onClick={action('clicked')}>Disabled Button</QuietButton>)
.add('Small', () => <QuietButton size="small" onClick={action('clicked')}>Small Button</QuietButton>)
.add('Large', () => <QuietButton size="large" onClick={action('clicked')}>Large Button</QuietButton>)
storiesOf('Buttons / Link Button', module)
.add('Default', () => <LinkButton onClick={action('clicked')}>Default Button</LinkButton>)

@@ -149,5 +167,14 @@ .add('Submit', () => <LinkButton type="submit" onClick={action('clicked')}>Submit Button</LinkButton>)

.add('Disabled', () => <LinkButton disabled onClick={action('clicked')}>Disabled Button</LinkButton>)
.add('Small', () => <LinkButton size="small" onClick={action('clicked')}>Small Button</LinkButton>)
.add('Large', () => <LinkButton size="large" onClick={action('clicked')}>Large Button</LinkButton>)
.add('Small', () => <LinkButton size="small" onClick={action('clicked')}>Small LinkButton doesn't make sense</LinkButton>)
.add('Large', () => <LinkButton size="large" onClick={action('clicked')}>Large LinkButton doesn't make sense</LinkButton>)
storiesOf('Buttons / Link Button without underline', module)
.add('Default', () => <LinkButton underline={false} onClick={action('clicked')}>Default Button</LinkButton>)
.add('Submit', () => <LinkButton underline={false} type="submit" onClick={action('clicked')}>Submit Button</LinkButton>)
.add('With an icon', () => <LinkButton underline={false} onClick={action('clicked')}>➕</LinkButton>)
.add('With an icon and text', () => <LinkButton underline={false} onClick={action('clicked')}>✏️ Edit this thing</LinkButton>)
.add('Disabled', () => <LinkButton underline={false} disabled onClick={action('clicked')}>Disabled Button</LinkButton>)
.add('Small', () => <LinkButton underline={false} size="small" onClick={action('clicked')}>Small LinkButton doesn't make sense</LinkButton>)
.add('Large', () => <LinkButton underline={false} size="large" onClick={action('clicked')}>Large LinkButton doesn't make sense</LinkButton>)
storiesOf('Buttons / Size', module)

@@ -154,0 +181,0 @@ .add('Small', () => <Button size="small" type="submit" onClick={action('clicked')}>Submit</Button>)

42

src/Button/Buttons.test.js

@@ -1,35 +0,17 @@

import {
Button,
ApprovalButton,
DangerButton,
LinkButton,
} from './';
import * as Buttons from './';
describe('Button', () => {
describe('Buttons', () => {
it('matches snapshot', () => {
expect(Button).toBeDefined();
expect(Button).toMatchSnapshot();
expect(Buttons).toBeDefined();
expect(Buttons).toMatchSnapshot();
});
});
describe('ApprovalButton', () => {
it('matches snapshot', () => {
expect(ApprovalButton).toBeDefined();
expect(ApprovalButton).toMatchSnapshot();
});
});
describe('DangerButton', () => {
it('matches snapshot', () => {
expect(DangerButton).toBeDefined();
expect(DangerButton).toMatchSnapshot();
});
});
describe('LinkButton', () => {
it('matches snapshot', () => {
expect(LinkButton).toBeDefined();
expect(LinkButton).toMatchSnapshot();
});
});
Object.keys(Buttons).forEach(name => (
describe(name, () => {
it('matches snapshot', () => {
expect(Buttons[name]).toBeDefined();
expect(Buttons[name]).toMatchSnapshot();
});
})
));

1

src/Button/index.js
export {default as Button} from "./Button";
export {default as ApprovalButton} from "./ApprovalButton";
export {default as DangerButton} from "./DangerButton";
export {default as QuietButton} from "./QuietButton";
export {default as LinkButton} from "./LinkButton";

49

src/Button/LinkButton.js
import React from 'react';
import styled, { css } from 'styled-components';
import { colour, space } from '@nulogy/tokens';
import Button, { buttonColours } from './Button';
import tokens from '@nulogy/tokens';
import { buttonReset } from './Button';
import { Link } from '../Link';
const type = ({ type = 'button' }) => (({
submit: buttonColours({ background: colour.green.base })
})[type]);
const LinkButton = styled(Link.withComponent('button'))`
${buttonReset}
${ ({ theme }) => css`
&:disabled {
color: ${theme.colour.neutral[400]};
pointer-events: none;
}
`}
`;
const LinkButton = styled(Button)`
${ type }
LinkButton.defaultProps = {
theme: tokens
}
background-color: transparent;
border-color: transparent;
color: ${colour.blue.base};
padding: ${space.x1}px;
&:hover {
${buttonColours({ background: colour.green[700] })}
background-color: transparent;
border-color: transparent;
box-shadow: none;
color: ${colour.blue['700']};
}
&:active{
transform: none;
}
&:disabled{
background-color: transparent;
border-color: transparent;
color: ${colour.neutral['400']};
}
`
export default LinkButton;
export default LinkButton;

3

src/index.js

@@ -0,3 +1,4 @@

import * as TableComponents from "./Tables";
export const Tables = TableComponents;
export * from "./Button";
export * from "./Link";
export * from "./Tables";

7

src/Link/Link.js

@@ -9,3 +9,3 @@ import React from 'react';

color: ${theme.colour.blue.base};
background-color: transparent;
&:hover{

@@ -15,3 +15,3 @@ color: ${theme.colour.blue[800]};

`}
${ ({ underline = true }) => css`
${ ({ underline }) => css`
text-decoration: ${underline ? 'underline' : 'none' };

@@ -26,5 +26,6 @@ `}

Link.defaultProps = {
theme: tokens
theme: tokens,
underline: true,
}
export default Link;

126

src/Tables/Table.js
import React from 'react';
import styled from 'styled-components';
import styled, { css } from 'styled-components';
import tokens from '@nulogy/tokens';
import QuietButton from '../Button/QuietButton';
const defaultProps = { theme: tokens };
const borderStyle = ({ theme }) => `1px solid ${theme.colour.neutral[400]}`;
const lineHeight = name => ({ theme }) => theme.font.lineHeight[name] * theme.font.size.medium;
export const Cell = styled.td`
padding: 1rem;
text-align: left;
border-bottom: ${borderStyle};
${ ({ theme }) => css`
font-size: ${theme.font.size.small}px;
line-height: ${lineHeight('smaller')({ theme }) / theme.font.size.small};
padding: ${theme.space.x2}px ${theme.space.x1}px;
vertical-align: top;
&:first-child{
padding-left: ${theme.space.x2}px;
}
&:last-child{
padding-right: ${theme.space.x2}px;
}
`}
`;

@@ -17,30 +28,99 @@

export const ActionCell = styled(Cell)`
${ ({ theme }) => css`
padding-top: ${theme.space.x1}px;
padding-bottom: ${theme.space.x1}px;
text-align:right;
white-space: nowrap;
vertical-align: middle;
& > button:not(:last-child) {
margin-right: ${theme.space.half}px;
}
`}
`;
ActionCell.defaultProps = defaultProps;
export const Button = styled(QuietButton)`
${ ({ theme }) => css`
padding: ${theme.space.half}px;
border-width: 0;
border-radius: 50%;
transition: none;
&:hover{
background-color: ${theme.colour.blue[300]};
transform: scale(1.25);
svg{
transform: scale(0.8);
}
}
`}
`;
Button.defaultProps = defaultProps;
export const Row = styled.tr``;
export const Header = styled.thead``;
export const Header = styled.thead`
text-align: left;
`;
export const Body = styled.tbody``;
export const HeaderCell = styled(Cell.withComponent('th'))`
font-weight: bold;
border-bottom-width: 2px;
${ ({ theme }) => css`
font-weight: bold;
vertical-align: bottom;
`}
`;
export const Table = styled.table`
border-collapse: collapse;
border-top: ${borderStyle};
HeaderCell.defaultProps = defaultProps;
export const CreateRow = styled.tr`
${ ({ theme }) => css`
background-color: ${theme.colour.blue[800]};
color: ${theme.colour.white};
${ ActionCell } {
padding-top: ${theme.space.x2}px;
padding-bottom: ${theme.space.x2}px;
}
`}
`;
Table.defaultProps = defaultProps;
CreateRow.defaultProps = defaultProps;
const DefaultTable = styled(Table)``;
export const TemporaryTextInput = styled.input`
${ ({ theme }) => css`
box-sizing: border-box;
height:32px; // Temporary
width:100%;
border: none;
background: ${theme.colour.blue[300]};
font-size: ${theme.font.size.small}px;
padding: ${theme.space.half}px ${theme.space.x1}px;
border-radius: ${theme.radius.small}px;
&:focus{
background: ${theme.colour.white};
}
`}
`;
Object.entries({
Cell,
Row,
Header,
Body,
HeaderCell,
}).map(([key, val]) => DefaultTable[key] = val);
TemporaryTextInput.defaultProps = defaultProps;
export default DefaultTable;
export const Body = styled.tbody`
${ ({ theme }) => css`
${Row}:nth-of-type(odd){
background-color: ${theme.colour.blue['200']};
}
`}
`;
Body.defaultProps = defaultProps;
export const Table = styled.table`
${ ({ theme }) => css`
border-collapse: collapse;
width: 100%;
background-color: ${theme.colour.white};
`}
`;
Table.defaultProps = defaultProps;

256

src/Tables/Table.story.js
import React from 'react';
import { storiesOf } from '@storybook/react';
import { Table, Row, Cell, Body, Header, HeaderCell } from './';
import { Table, Cell, ActionCell, Row, CreateRow, Body, Header, HeaderCell, Button, TemporaryTextInput } from './';
storiesOf('Table', module)
.add('default', () => (
.add('Read Only', () => (
<Table>
<Header>
<Row>
<HeaderCell>Header Row 1, Header Cell 1</HeaderCell>
<HeaderCell>Header Row 1, Header Cell 2</HeaderCell>
<HeaderCell>Header Row 1, Header Cell 3</HeaderCell>
<HeaderCell>Name</HeaderCell>
<HeaderCell>Key</HeaderCell>
<HeaderCell>Integration Key</HeaderCell>
<HeaderCell></HeaderCell>
</Row>

@@ -17,5 +18,218 @@ </Header>

<Row>
<Cell>Good</Cell>
<Cell>Good</Cell>
<Cell>1</Cell>
<ActionCell></ActionCell>
</Row>
<Row>
<Cell>Quarantined</Cell>
<Cell>Quarantined</Cell>
<Cell>2</Cell>
<ActionCell></ActionCell>
</Row>
<Row>
<Cell>Rejected</Cell>
<Cell>Rejected</Cell>
<Cell>3</Cell>
<ActionCell></ActionCell>
</Row>
</Body>
</Table>
))
.add('Edit Mode', () => (
<Table>
<Header>
<Row>
<HeaderCell>Name</HeaderCell>
<HeaderCell>Key</HeaderCell>
<HeaderCell>Integration Key</HeaderCell>
<HeaderCell></HeaderCell>
</Row>
</Header>
<Body>
<Row>
<Cell>Good</Cell>
<Cell>Good</Cell>
<Cell>1</Cell>
<ActionCell>
<Button>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z" fill="#607180"/>
<path d="M0 0h24v24H0z" fill="none"/>
</svg>
</Button>
<Button>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" fill="#607180"/>
<path d="M0 0h24v24H0z" fill="none"/>
</svg>
</Button>
</ActionCell>
</Row>
<Row>
<Cell>Quarantined</Cell>
<Cell>Quarantined</Cell>
<Cell>2</Cell>
<ActionCell>
<Button>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z" fill="#607180"/>
<path d="M0 0h24v24H0z" fill="none"/>
</svg>
</Button>
<Button>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" fill="#607180"/>
<path d="M0 0h24v24H0z" fill="none"/>
</svg>
</Button>
</ActionCell>
</Row>
<Row>
<Cell>Rejected</Cell>
<Cell>Rejected</Cell>
<Cell>3</Cell>
<ActionCell>
<Button>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z" fill="#607180"/>
<path d="M0 0h24v24H0z" fill="none"/>
</svg>
</Button>
<Button>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" fill="#607180"/>
<path d="M0 0h24v24H0z" fill="none"/>
</svg>
</Button>
</ActionCell>
</Row>
</Body>
</Table>
))
.add('With Create Row', () => (
<Table>
<Header>
<Row>
<HeaderCell>Name</HeaderCell>
<HeaderCell>Key</HeaderCell>
<HeaderCell>Integration Key</HeaderCell>
<HeaderCell></HeaderCell>
</Row>
<CreateRow>
<Cell><TemporaryTextInput></TemporaryTextInput></Cell>
<Cell><TemporaryTextInput></TemporaryTextInput></Cell>
<Cell><TemporaryTextInput></TemporaryTextInput></Cell>
<ActionCell>
<Button>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M0 0h24v24H0z" fill="none"/>
<path d="M17 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V7l-4-4zm-5 16c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm3-10H5V5h10v4z" fill="#EBEBEB"/>
</svg>
</Button>
</ActionCell>
</CreateRow>
</Header>
<Body>
<Row>
<Cell>Good</Cell>
<Cell>Good</Cell>
<Cell>1</Cell>
<ActionCell>
<Button>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z" fill="#607180"/>
<path d="M0 0h24v24H0z" fill="none"/>
</svg>
</Button>
<Button>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" fill="#607180"/>
<path d="M0 0h24v24H0z" fill="none"/>
</svg>
</Button>
</ActionCell>
</Row>
<Row>
<Cell>Quarantined</Cell>
<Cell>Quarantined</Cell>
<Cell>2</Cell>
<ActionCell>
<Button>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z" fill="#607180"/>
<path d="M0 0h24v24H0z" fill="none"/>
</svg>
</Button>
<Button>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" fill="#607180"/>
<path d="M0 0h24v24H0z" fill="none"/>
</svg>
</Button>
</ActionCell>
</Row>
<Row>
<Cell>Rejected</Cell>
<Cell>Rejected</Cell>
<Cell>3</Cell>
<ActionCell>
<Button>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z" fill="#607180"/>
<path d="M0 0h24v24H0z" fill="none"/>
</svg>
</Button>
<Button>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" fill="#607180"/>
<path d="M0 0h24v24H0z" fill="none"/>
</svg>
</Button>
</ActionCell>
</Row>
</Body>
</Table>
)).add('Mixed Content', () => (
<Table>
<Header>
<Row>
<HeaderCell>Name</HeaderCell>
<HeaderCell>Key</HeaderCell>
<HeaderCell>Integration Key</HeaderCell>
<HeaderCell></HeaderCell>
</Row>
<CreateRow>
<Cell><TemporaryTextInput></TemporaryTextInput></Cell>
<Cell><TemporaryTextInput></TemporaryTextInput></Cell>
<Cell>Some text</Cell>
<ActionCell>
<Button>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M0 0h24v24H0z" fill="none"/>
<path d="M17 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V7l-4-4zm-5 16c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm3-10H5V5h10v4z" fill="#EBEBEB"/>
</svg>
</Button>
</ActionCell>
</CreateRow>
</Header>
<Body>
<Row>
<Cell>Row 1, Cell 1</Cell>
<Cell>Row 1, Cell 2</Cell>
<Cell>Row 1, Cell 3</Cell>
<ActionCell>
<Button>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z" fill="#607180"/>
<path d="M0 0h24v24H0z" fill="none"/>
</svg>
</Button>
<Button>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" fill="#607180"/>
<path d="M0 0h24v24H0z" fill="none"/>
</svg>
</Button>
</ActionCell>
</Row>

@@ -26,10 +240,38 @@ <Row>

<Cell>Row 2, Cell 3</Cell>
<ActionCell>
<Button>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z" fill="#607180"/>
<path d="M0 0h24v24H0z" fill="none"/>
</svg>
</Button>
<Button>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" fill="#607180"/>
<path d="M0 0h24v24H0z" fill="none"/>
</svg>
</Button>
</ActionCell>
</Row>
<Row>
<Cell>Row 3, Cell 1</Cell>
<Cell>Row 3, Cell 2</Cell>
<Cell>Aliquam ante augue, ultricies at sodales a, porta ut tellus. Duis lacus lectus, pulvinar in commodo eget, molestie viverra dolor. Curabitur ultrices dignissim auctor. Sed ac ante id tortor suscipit tristique. Donec vitae est id turpis eleifend varius ullamcorper vel magna.</Cell>
<Cell>Row 3, Cell 3</Cell>
<ActionCell>
<Button>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z" fill="#607180"/>
<path d="M0 0h24v24H0z" fill="none"/>
</svg>
</Button>
<Button>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" fill="#607180"/>
<path d="M0 0h24v24H0z" fill="none"/>
</svg>
</Button>
</ActionCell>
</Row>
</Body>
</Table>
));
));
src/__snapshots__/index.test.js.snap

Sorry, the diff of this file is not supported yet

src/Button/__snapshots__/Buttons.test.js.snap

Sorry, the diff of this file is not supported yet

src/Tables/__snapshots__/index.test.js.snap

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc