Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@rei/cdr-button
Advanced tools
@rei/cdr-button - npm Package Compare versions
Comparing version 1.0.0-beta.0 to 1.0.0
@@ -1,5 +0,11 @@ | ||
| <a name="0.1.0-alpha.0"></a> | ||
| # 0.1.0-alpha.0 (2018-07-11) | ||
| <a name="1.0.0"></a> | ||
| # 1.0.0 (2018-07-25) | ||
| ### Bug Fixes | ||
| * **button:** bump version to match alpha ([3439b98](https://github.com/rei/rei-cedar/commit/3439b98)) | ||
| * **button cta:** import cdr-icon css for components packaged with an icon ([6bb2233](https://github.com/rei/rei-cedar/commit/6bb2233)) | ||
| ### Chores | ||
@@ -6,0 +12,0 @@ |
@@ -1,1 +0,1 @@ | ||
| !function(t,n){"object"==typeof exports&&"object"==typeof module?module.exports=n(require("@rei/cdr-icon"),require("@rei/cdr-icon/dist/cdr-icon.css")):"function"==typeof define&&define.amd?define("CdrButton",["@rei/cdr-icon","@rei/cdr-icon/dist/cdr-icon.css"],n):"object"==typeof exports?exports.CdrButton=n(require("@rei/cdr-icon"),require("@rei/cdr-icon/dist/cdr-icon.css")):t.CdrButton=n(t["@rei/cdr-icon"],t["@rei/cdr-icon/dist/cdr-icon.css"])}("undefined"!=typeof self?self:this,function(t,n){return function(t){var n={};function e(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return t[r].call(o.exports,o,o.exports,e),o.l=!0,o.exports}return e.m=t,e.c=n,e.d=function(t,n,r){e.o(t,n)||Object.defineProperty(t,n,{configurable:!1,enumerable:!0,get:r})},e.n=function(t){var n=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(n,"a",n),n},e.o=function(t,n){return Object.prototype.hasOwnProperty.call(t,n)},e.p="/",e(e.s=13)}([function(t,n,e){"use strict";var r=e(14),o=e(2),s=e(18),i=e(1);var u=Object(i.a)(o.a,r.a,r.b,!1,function(t){this.$style=s.default.locals||s.default},null,null);n.a=u.exports},function(t,n,e){"use strict";n.a=function(t,n,e,r,o,s,i,u){var a,c="function"==typeof t?t.options:t;n&&(c.render=n,c.staticRenderFns=e,c._compiled=!0);r&&(c.functional=!0);s&&(c._scopeId="data-v-"+s);i?(a=function(t){(t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),o&&o.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(i)},c._ssrRegister=a):o&&(a=u?function(){o.call(this,this.$root.$options.shadowRoot)}:o);if(a)if(c.functional){c._injectStyles=a;var l=c.render;c.render=function(t,n){return a.call(n),l(t,n)}}else{var d=c.beforeCreate;c.beforeCreate=d?[].concat(d,a):[a]}return{exports:t,options:c}}},function(t,n,e){"use strict";var r=e(3);n.a=r.a},function(t,n,e){"use strict";var r=e(16),o=e(17);n.a={name:"CdrButton",mixins:[r.a,o.a],props:{size:{type:String,default:"medium",validator:function(t){return["small","medium","large"].indexOf(t)>=0||!1}},responsiveSize:{type:Array},iconOnly:{type:Boolean,default:!1},onDark:{type:Boolean,default:!1}},computed:{baseClass:function(){return"cdr-button"},sizeClass:function(){return this.iconOnly?null:this.modifyClassName(this.baseClass,this.size)},responsiveClass:function(){var t=this,n=[];return this.responsiveSize&&!this.iconOnly&&this.responsiveSize.forEach(function(e){n.push(t.modifyClassName(t.baseClass,e))}),n.join(" ")},iconClass:function(){var t=[];return this.$slots.default&&this.$slots.default.length>1&&t.push(this.modifyClassName(this.baseClass,"has-icon")),this.iconOnly&&(t.push(this.modifyClassName(this.baseClass,"icon-only")),this.onDark&&t.push(this.modifyClassName(this.baseClass,"on-dark"))),t.join(" ")}}}},function(t,n){t.exports={"cdr-button":"cdr-button_1.0.0-beta.0","cdr-button--secondary":"cdr-button--secondary_1.0.0-beta.0","cdr-button--large":"cdr-button--large_1.0.0-beta.0","cdr-button--has-icon":"cdr-button--has-icon_1.0.0-beta.0","cdr-button--medium":"cdr-button--medium_1.0.0-beta.0","cdr-button--small":"cdr-button--small_1.0.0-beta.0","cdr-button--full-width":"cdr-button--full-width_1.0.0-beta.0","cdr-button--icon-only":"cdr-button--icon-only_1.0.0-beta.0","cdr-button--on-dark":"cdr-button--on-dark_1.0.0-beta.0","cdr-button--small@xs":"cdr-button--small@xs_1.0.0-beta.0","cdr-button--medium@xs":"cdr-button--medium@xs_1.0.0-beta.0","cdr-button--large@xs":"cdr-button--large@xs_1.0.0-beta.0","cdr-button--small@sm":"cdr-button--small@sm_1.0.0-beta.0","cdr-button--medium@sm":"cdr-button--medium@sm_1.0.0-beta.0","cdr-button--large@sm":"cdr-button--large@sm_1.0.0-beta.0","cdr-button--small@md":"cdr-button--small@md_1.0.0-beta.0","cdr-button--medium@md":"cdr-button--medium@md_1.0.0-beta.0","cdr-button--large@md":"cdr-button--large@md_1.0.0-beta.0","cdr-button--small@lg":"cdr-button--small@lg_1.0.0-beta.0","cdr-button--medium@lg":"cdr-button--medium@lg_1.0.0-beta.0","cdr-button--large@lg":"cdr-button--large@lg_1.0.0-beta.0"}},function(t,n,e){"use strict";var r=e(6);n.a=r.a},function(t,n,e){"use strict";var r=e(7),o=(e.n(r),e(8)),s=(e.n(o),e(0));n.a={name:"CdrCloseButton",components:{IconXLg:r.IconXLg,CdrButton:s.a},extends:s.a}},function(n,e){n.exports=t},function(t,e){t.exports=n},function(t,n){},function(t,n,e){"use strict";var r=e(11);n.a=r.a},function(t,n,e){"use strict";var r=e(7),o=(e.n(r),e(8)),s=(e.n(o),e(0));n.a={name:"CdrPlayButton",components:{IconPlay:r.IconPlay,CdrButton:s.a},extends:s.a}},function(t,n){},function(t,n,e){"use strict";Object.defineProperty(n,"__esModule",{value:!0});var r=e(0);e.d(n,"CdrButton",function(){return r.a});var o=e(19);e.d(n,"CdrCloseButton",function(){return o.a});var s=e(23);e.d(n,"CdrPlayButton",function(){return s.a})},function(t,n,e){"use strict";var r=e(15);e.d(n,"a",function(){return r.a}),e.d(n,"b",function(){return r.b})},function(t,n,e){"use strict";e.d(n,"a",function(){return r}),e.d(n,"b",function(){return o});var r=function(){var t=this,n=t.$createElement;return(t._self._c||n)(t.tag,{tag:"component",class:[t.modifierClass,t.sizeClass,t.fullWidthClass,t.responsiveClass,t.iconClass],attrs:{type:"button"===t.tag?t.type:null},on:{click:t.onClick}},[t._t("icon"),t._v(" "),t._t("default")],2)},o=[]},function(t,n,e){"use strict";n.a={props:{tag:{type:String,default:"button",validator:function(t){return["button","a"].indexOf(t)>=0||!1}},type:{type:String,default:"button",validator:function(t){return["button","submit","reset"].indexOf(t)>=0||!1}},onClick:{type:Function,default:function(){return function(){return null}}},fullWidth:{type:Boolean,default:!1,validator:function(t){return"boolean"==typeof t}}},computed:{fullWidthClass:function(){return this.fullWidth&&!this.iconOnly?this.modifyClassName(this.baseClass,"full-width"):null}}}},function(t,n,e){"use strict";n.a={props:{modifier:String},computed:{modifierClass:function(){var t=this,n=this.baseClass,e=this.modifier?this.modifier.split(" "):[],r=[];return this.$style?(r.push(this.moduleClass(n)),r=r.concat(e.map(function(e){return t.modifyClassName(n,e)}))):(r.push(""+n),r=r.concat(e.map(function(e){return t.modifyClassName(n,e)}))),r.join(" ")}},methods:{moduleClass:function(t){return this.$style[""+t]},modifyClassName:function(t,n){return this.$style?this.moduleClass(t+"--"+n):t+"--"+n}}}},function(t,n,e){"use strict";var r=e(4),o=e.n(r);n.default=o.a},function(t,n,e){"use strict";var r=e(20),o=e(5),s=(e(22),e(1)),i=Object(s.a)(o.a,r.a,r.b,!1,null,null,null);n.a=i.exports},function(t,n,e){"use strict";var r=e(21);e.d(n,"a",function(){return r.a}),e.d(n,"b",function(){return r.b})},function(t,n,e){"use strict";e.d(n,"a",function(){return r}),e.d(n,"b",function(){return o});var r=function(){var t=this.$createElement,n=this._self._c||t;return n("cdr-button",{attrs:{"icon-only":!0,"on-dark":this.onDark,"aria-label":"Close"}},[[n("icon-x-lg",{staticClass:"cdr-button__icon"})]],2)},o=[]},function(t,n,e){"use strict";var r=e(9);e.n(r).a},function(t,n,e){"use strict";var r=e(24),o=e(10),s=(e(26),e(1)),i=Object(s.a)(o.a,r.a,r.b,!1,null,null,null);n.a=i.exports},function(t,n,e){"use strict";var r=e(25);e.d(n,"a",function(){return r.a}),e.d(n,"b",function(){return r.b})},function(t,n,e){"use strict";e.d(n,"a",function(){return r}),e.d(n,"b",function(){return o});var r=function(){var t=this.$createElement,n=this._self._c||t;return n("cdr-button",{attrs:{"icon-only":!0,"on-dark":this.onDark,"aria-label":"Play"}},[[n("icon-play",{staticClass:"cdr-button__icon"})]],2)},o=[]},function(t,n,e){"use strict";var r=e(12);e.n(r).a}])}); | ||
| !function(t,n){"object"==typeof exports&&"object"==typeof module?module.exports=n(require("@rei/cdr-icon"),require("@rei/cdr-icon/dist/cdr-icon.css")):"function"==typeof define&&define.amd?define("CdrButton",["@rei/cdr-icon","@rei/cdr-icon/dist/cdr-icon.css"],n):"object"==typeof exports?exports.CdrButton=n(require("@rei/cdr-icon"),require("@rei/cdr-icon/dist/cdr-icon.css")):t.CdrButton=n(t["@rei/cdr-icon"],t["@rei/cdr-icon/dist/cdr-icon.css"])}("undefined"!=typeof self?self:this,function(t,n){return function(t){var n={};function r(e){if(n[e])return n[e].exports;var o=n[e]={i:e,l:!1,exports:{}};return t[e].call(o.exports,o,o.exports,r),o.l=!0,o.exports}return r.m=t,r.c=n,r.d=function(t,n,e){r.o(t,n)||Object.defineProperty(t,n,{configurable:!1,enumerable:!0,get:e})},r.n=function(t){var n=t&&t.__esModule?function(){return t.default}:function(){return t};return r.d(n,"a",n),n},r.o=function(t,n){return Object.prototype.hasOwnProperty.call(t,n)},r.p="/",r(r.s=13)}([function(t,n,r){"use strict";var e=r(14),o=r(2),s=r(18),i=r(1);var u=Object(i.a)(o.a,e.a,e.b,!1,function(t){this.$style=s.default.locals||s.default},null,null);n.a=u.exports},function(t,n,r){"use strict";n.a=function(t,n,r,e,o,s,i,u){var c,a="function"==typeof t?t.options:t;n&&(a.render=n,a.staticRenderFns=r,a._compiled=!0);e&&(a.functional=!0);s&&(a._scopeId="data-v-"+s);i?(c=function(t){(t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),o&&o.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(i)},a._ssrRegister=c):o&&(c=u?function(){o.call(this,this.$root.$options.shadowRoot)}:o);if(c)if(a.functional){a._injectStyles=c;var l=a.render;a.render=function(t,n){return c.call(n),l(t,n)}}else{var d=a.beforeCreate;a.beforeCreate=d?[].concat(d,c):[c]}return{exports:t,options:a}}},function(t,n,r){"use strict";var e=r(3);n.a=e.a},function(t,n,r){"use strict";var e=r(16),o=r(17);n.a={name:"CdrButton",mixins:[e.a,o.a],props:{size:{type:String,default:"medium",validator:function(t){return["small","medium","large"].indexOf(t)>=0||!1}},responsiveSize:{type:Array},iconOnly:{type:Boolean,default:!1},onDark:{type:Boolean,default:!1}},computed:{baseClass:function(){return"cdr-button"},sizeClass:function(){return this.iconOnly?null:this.modifyClassName(this.baseClass,this.size)},responsiveClass:function(){var t=this,n=[];return this.responsiveSize&&!this.iconOnly&&this.responsiveSize.forEach(function(r){n.push(t.modifyClassName(t.baseClass,r))}),n.join(" ")},iconClass:function(){var t=[];return this.$slots.default&&this.$slots.default.length>1&&t.push(this.modifyClassName(this.baseClass,"has-icon")),this.iconOnly&&(t.push(this.modifyClassName(this.baseClass,"icon-only")),this.onDark&&t.push(this.modifyClassName(this.baseClass,"on-dark"))),t.join(" ")}}}},function(t,n){t.exports={"cdr-button":"cdr-button_1.0.0","cdr-button--secondary":"cdr-button--secondary_1.0.0","cdr-button--large":"cdr-button--large_1.0.0","cdr-button--has-icon":"cdr-button--has-icon_1.0.0","cdr-button--medium":"cdr-button--medium_1.0.0","cdr-button--small":"cdr-button--small_1.0.0","cdr-button--full-width":"cdr-button--full-width_1.0.0","cdr-button--icon-only":"cdr-button--icon-only_1.0.0","cdr-button--on-dark":"cdr-button--on-dark_1.0.0","cdr-button--small@xs":"cdr-button--small@xs_1.0.0","cdr-button--medium@xs":"cdr-button--medium@xs_1.0.0","cdr-button--large@xs":"cdr-button--large@xs_1.0.0","cdr-button--small@sm":"cdr-button--small@sm_1.0.0","cdr-button--medium@sm":"cdr-button--medium@sm_1.0.0","cdr-button--large@sm":"cdr-button--large@sm_1.0.0","cdr-button--small@md":"cdr-button--small@md_1.0.0","cdr-button--medium@md":"cdr-button--medium@md_1.0.0","cdr-button--large@md":"cdr-button--large@md_1.0.0","cdr-button--small@lg":"cdr-button--small@lg_1.0.0","cdr-button--medium@lg":"cdr-button--medium@lg_1.0.0","cdr-button--large@lg":"cdr-button--large@lg_1.0.0"}},function(t,n,r){"use strict";var e=r(6);n.a=e.a},function(t,n,r){"use strict";var e=r(7),o=(r.n(e),r(8)),s=(r.n(o),r(0));n.a={name:"CdrCloseButton",components:{IconXLg:e.IconXLg,CdrButton:s.a},extends:s.a}},function(n,r){n.exports=t},function(t,r){t.exports=n},function(t,n){},function(t,n,r){"use strict";var e=r(11);n.a=e.a},function(t,n,r){"use strict";var e=r(7),o=(r.n(e),r(8)),s=(r.n(o),r(0));n.a={name:"CdrPlayButton",components:{IconPlay:e.IconPlay,CdrButton:s.a},extends:s.a}},function(t,n){},function(t,n,r){"use strict";Object.defineProperty(n,"__esModule",{value:!0});var e=r(0);r.d(n,"CdrButton",function(){return e.a});var o=r(19);r.d(n,"CdrCloseButton",function(){return o.a});var s=r(23);r.d(n,"CdrPlayButton",function(){return s.a})},function(t,n,r){"use strict";var e=r(15);r.d(n,"a",function(){return e.a}),r.d(n,"b",function(){return e.b})},function(t,n,r){"use strict";r.d(n,"a",function(){return e}),r.d(n,"b",function(){return o});var e=function(){var t=this,n=t.$createElement;return(t._self._c||n)(t.tag,{tag:"component",class:[t.modifierClass,t.sizeClass,t.fullWidthClass,t.responsiveClass,t.iconClass],attrs:{type:"button"===t.tag?t.type:null},on:{click:t.onClick}},[t._t("icon"),t._v(" "),t._t("default")],2)},o=[]},function(t,n,r){"use strict";n.a={props:{tag:{type:String,default:"button",validator:function(t){return["button","a"].indexOf(t)>=0||!1}},type:{type:String,default:"button",validator:function(t){return["button","submit","reset"].indexOf(t)>=0||!1}},onClick:{type:Function,default:function(){return function(){return null}}},fullWidth:{type:Boolean,default:!1,validator:function(t){return"boolean"==typeof t}}},computed:{fullWidthClass:function(){return this.fullWidth&&!this.iconOnly?this.modifyClassName(this.baseClass,"full-width"):null}}}},function(t,n,r){"use strict";n.a={props:{modifier:String},computed:{modifierClass:function(){var t=this,n=this.baseClass,r=this.modifier?this.modifier.split(" "):[],e=[];return this.$style?(e.push(this.moduleClass(n)),e=e.concat(r.map(function(r){return t.modifyClassName(n,r)}))):(e.push(""+n),e=e.concat(r.map(function(r){return t.modifyClassName(n,r)}))),e.join(" ")}},methods:{moduleClass:function(t){return this.$style[""+t]},modifyClassName:function(t,n){return this.$style?this.moduleClass(t+"--"+n):t+"--"+n}}}},function(t,n,r){"use strict";var e=r(4),o=r.n(e);n.default=o.a},function(t,n,r){"use strict";var e=r(20),o=r(5),s=(r(22),r(1)),i=Object(s.a)(o.a,e.a,e.b,!1,null,null,null);n.a=i.exports},function(t,n,r){"use strict";var e=r(21);r.d(n,"a",function(){return e.a}),r.d(n,"b",function(){return e.b})},function(t,n,r){"use strict";r.d(n,"a",function(){return e}),r.d(n,"b",function(){return o});var e=function(){var t=this.$createElement,n=this._self._c||t;return n("cdr-button",{attrs:{"icon-only":!0,"on-dark":this.onDark,"aria-label":"Close"}},[[n("icon-x-lg",{staticClass:"cdr-button__icon"})]],2)},o=[]},function(t,n,r){"use strict";var e=r(9);r.n(e).a},function(t,n,r){"use strict";var e=r(24),o=r(10),s=(r(26),r(1)),i=Object(s.a)(o.a,e.a,e.b,!1,null,null,null);n.a=i.exports},function(t,n,r){"use strict";var e=r(25);r.d(n,"a",function(){return e.a}),r.d(n,"b",function(){return e.b})},function(t,n,r){"use strict";r.d(n,"a",function(){return e}),r.d(n,"b",function(){return o});var e=function(){var t=this.$createElement,n=this._self._c||t;return n("cdr-button",{attrs:{"icon-only":!0,"on-dark":this.onDark,"aria-label":"Play"}},[[n("icon-play",{staticClass:"cdr-button__icon"})]],2)},o=[]},function(t,n,r){"use strict";var e=r(12);r.n(e).a}])}); |
@@ -1,1 +0,1 @@ | ||
| !function(t,n){"object"==typeof exports&&"object"==typeof module?module.exports=n():"function"==typeof define&&define.amd?define("CdrButton",[],n):"object"==typeof exports?exports.CdrButton=n():t.CdrButton=n()}("undefined"!=typeof self?self:this,function(){return function(t){var n={};function e(o){if(n[o])return n[o].exports;var s=n[o]={i:o,l:!1,exports:{}};return t[o].call(s.exports,s,s.exports,e),s.l=!0,s.exports}return e.m=t,e.c=n,e.d=function(t,n,o){e.o(t,n)||Object.defineProperty(t,n,{configurable:!1,enumerable:!0,get:o})},e.n=function(t){var n=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(n,"a",n),n},e.o=function(t,n){return Object.prototype.hasOwnProperty.call(t,n)},e.p="/",e(e.s=3)}([function(t,n,e){"use strict";var o=e(1);n.a=o.a},function(t,n,e){"use strict";var o=e(7),s=e(8);n.a={name:"CdrButton",mixins:[o.a,s.a],props:{size:{type:String,default:"medium",validator:function(t){return["small","medium","large"].indexOf(t)>=0||!1}},responsiveSize:{type:Array},iconOnly:{type:Boolean,default:!1},onDark:{type:Boolean,default:!1}},computed:{baseClass:function(){return"cdr-button"},sizeClass:function(){return this.iconOnly?null:this.modifyClassName(this.baseClass,this.size)},responsiveClass:function(){var t=this,n=[];return this.responsiveSize&&!this.iconOnly&&this.responsiveSize.forEach(function(e){n.push(t.modifyClassName(t.baseClass,e))}),n.join(" ")},iconClass:function(){var t=[];return this.$slots.default&&this.$slots.default.length>1&&t.push(this.modifyClassName(this.baseClass,"has-icon")),this.iconOnly&&(t.push(this.modifyClassName(this.baseClass,"icon-only")),this.onDark&&t.push(this.modifyClassName(this.baseClass,"on-dark"))),t.join(" ")}}}},function(t,n){t.exports={"cdr-button":"cdr-button_1.0.0-beta.0","cdr-button--secondary":"cdr-button--secondary_1.0.0-beta.0","cdr-button--large":"cdr-button--large_1.0.0-beta.0","cdr-button--has-icon":"cdr-button--has-icon_1.0.0-beta.0","cdr-button--medium":"cdr-button--medium_1.0.0-beta.0","cdr-button--small":"cdr-button--small_1.0.0-beta.0","cdr-button--full-width":"cdr-button--full-width_1.0.0-beta.0","cdr-button--icon-only":"cdr-button--icon-only_1.0.0-beta.0","cdr-button--on-dark":"cdr-button--on-dark_1.0.0-beta.0","cdr-button--small@xs":"cdr-button--small@xs_1.0.0-beta.0","cdr-button--medium@xs":"cdr-button--medium@xs_1.0.0-beta.0","cdr-button--large@xs":"cdr-button--large@xs_1.0.0-beta.0","cdr-button--small@sm":"cdr-button--small@sm_1.0.0-beta.0","cdr-button--medium@sm":"cdr-button--medium@sm_1.0.0-beta.0","cdr-button--large@sm":"cdr-button--large@sm_1.0.0-beta.0","cdr-button--small@md":"cdr-button--small@md_1.0.0-beta.0","cdr-button--medium@md":"cdr-button--medium@md_1.0.0-beta.0","cdr-button--large@md":"cdr-button--large@md_1.0.0-beta.0","cdr-button--small@lg":"cdr-button--small@lg_1.0.0-beta.0","cdr-button--medium@lg":"cdr-button--medium@lg_1.0.0-beta.0","cdr-button--large@lg":"cdr-button--large@lg_1.0.0-beta.0"}},function(t,n,e){"use strict";Object.defineProperty(n,"__esModule",{value:!0});var o=e(4);function s(t){t.component("cdr-button",o.a)}"undefined"!=typeof window&&window.Vue&&window.Vue.use(s),n.default=s},function(t,n,e){"use strict";var o=e(5),s=e(0),r=e(9),i=e(10);var u=Object(i.a)(s.a,o.a,o.b,!1,function(t){this.$style=r.default.locals||r.default},null,null);n.a=u.exports},function(t,n,e){"use strict";var o=e(6);e.d(n,"a",function(){return o.a}),e.d(n,"b",function(){return o.b})},function(t,n,e){"use strict";e.d(n,"a",function(){return o}),e.d(n,"b",function(){return s});var o=function(){var t=this,n=t.$createElement;return(t._self._c||n)(t.tag,{tag:"component",class:[t.modifierClass,t.sizeClass,t.fullWidthClass,t.responsiveClass,t.iconClass],attrs:{type:"button"===t.tag?t.type:null},on:{click:t.onClick}},[t._t("icon"),t._v(" "),t._t("default")],2)},s=[]},function(t,n,e){"use strict";n.a={props:{tag:{type:String,default:"button",validator:function(t){return["button","a"].indexOf(t)>=0||!1}},type:{type:String,default:"button",validator:function(t){return["button","submit","reset"].indexOf(t)>=0||!1}},onClick:{type:Function,default:function(){return function(){return null}}},fullWidth:{type:Boolean,default:!1,validator:function(t){return"boolean"==typeof t}}},computed:{fullWidthClass:function(){return this.fullWidth&&!this.iconOnly?this.modifyClassName(this.baseClass,"full-width"):null}}}},function(t,n,e){"use strict";n.a={props:{modifier:String},computed:{modifierClass:function(){var t=this,n=this.baseClass,e=this.modifier?this.modifier.split(" "):[],o=[];return this.$style?(o.push(this.moduleClass(n)),o=o.concat(e.map(function(e){return t.modifyClassName(n,e)}))):(o.push(""+n),o=o.concat(e.map(function(e){return t.modifyClassName(n,e)}))),o.join(" ")}},methods:{moduleClass:function(t){return this.$style[""+t]},modifyClassName:function(t,n){return this.$style?this.moduleClass(t+"--"+n):t+"--"+n}}}},function(t,n,e){"use strict";var o=e(2),s=e.n(o);n.default=s.a},function(t,n,e){"use strict";n.a=function(t,n,e,o,s,r,i,u){var a,l="function"==typeof t?t.options:t;n&&(l.render=n,l.staticRenderFns=e,l._compiled=!0);o&&(l.functional=!0);r&&(l._scopeId="data-v-"+r);i?(a=function(t){(t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),s&&s.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(i)},l._ssrRegister=a):s&&(a=u?function(){s.call(this,this.$root.$options.shadowRoot)}:s);if(a)if(l.functional){l._injectStyles=a;var d=l.render;l.render=function(t,n){return a.call(n),d(t,n)}}else{var c=l.beforeCreate;l.beforeCreate=c?[].concat(c,a):[a]}return{exports:t,options:l}}}])}); | ||
| !function(t,n){"object"==typeof exports&&"object"==typeof module?module.exports=n():"function"==typeof define&&define.amd?define("CdrButton",[],n):"object"==typeof exports?exports.CdrButton=n():t.CdrButton=n()}("undefined"!=typeof self?self:this,function(){return function(t){var n={};function e(o){if(n[o])return n[o].exports;var s=n[o]={i:o,l:!1,exports:{}};return t[o].call(s.exports,s,s.exports,e),s.l=!0,s.exports}return e.m=t,e.c=n,e.d=function(t,n,o){e.o(t,n)||Object.defineProperty(t,n,{configurable:!1,enumerable:!0,get:o})},e.n=function(t){var n=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(n,"a",n),n},e.o=function(t,n){return Object.prototype.hasOwnProperty.call(t,n)},e.p="/",e(e.s=3)}([function(t,n,e){"use strict";var o=e(1);n.a=o.a},function(t,n,e){"use strict";var o=e(7),s=e(8);n.a={name:"CdrButton",mixins:[o.a,s.a],props:{size:{type:String,default:"medium",validator:function(t){return["small","medium","large"].indexOf(t)>=0||!1}},responsiveSize:{type:Array},iconOnly:{type:Boolean,default:!1},onDark:{type:Boolean,default:!1}},computed:{baseClass:function(){return"cdr-button"},sizeClass:function(){return this.iconOnly?null:this.modifyClassName(this.baseClass,this.size)},responsiveClass:function(){var t=this,n=[];return this.responsiveSize&&!this.iconOnly&&this.responsiveSize.forEach(function(e){n.push(t.modifyClassName(t.baseClass,e))}),n.join(" ")},iconClass:function(){var t=[];return this.$slots.default&&this.$slots.default.length>1&&t.push(this.modifyClassName(this.baseClass,"has-icon")),this.iconOnly&&(t.push(this.modifyClassName(this.baseClass,"icon-only")),this.onDark&&t.push(this.modifyClassName(this.baseClass,"on-dark"))),t.join(" ")}}}},function(t,n){t.exports={"cdr-button":"cdr-button_1.0.0","cdr-button--secondary":"cdr-button--secondary_1.0.0","cdr-button--large":"cdr-button--large_1.0.0","cdr-button--has-icon":"cdr-button--has-icon_1.0.0","cdr-button--medium":"cdr-button--medium_1.0.0","cdr-button--small":"cdr-button--small_1.0.0","cdr-button--full-width":"cdr-button--full-width_1.0.0","cdr-button--icon-only":"cdr-button--icon-only_1.0.0","cdr-button--on-dark":"cdr-button--on-dark_1.0.0","cdr-button--small@xs":"cdr-button--small@xs_1.0.0","cdr-button--medium@xs":"cdr-button--medium@xs_1.0.0","cdr-button--large@xs":"cdr-button--large@xs_1.0.0","cdr-button--small@sm":"cdr-button--small@sm_1.0.0","cdr-button--medium@sm":"cdr-button--medium@sm_1.0.0","cdr-button--large@sm":"cdr-button--large@sm_1.0.0","cdr-button--small@md":"cdr-button--small@md_1.0.0","cdr-button--medium@md":"cdr-button--medium@md_1.0.0","cdr-button--large@md":"cdr-button--large@md_1.0.0","cdr-button--small@lg":"cdr-button--small@lg_1.0.0","cdr-button--medium@lg":"cdr-button--medium@lg_1.0.0","cdr-button--large@lg":"cdr-button--large@lg_1.0.0"}},function(t,n,e){"use strict";Object.defineProperty(n,"__esModule",{value:!0});var o=e(4);function s(t){t.component("cdr-button",o.a)}"undefined"!=typeof window&&window.Vue&&window.Vue.use(s),n.default=s},function(t,n,e){"use strict";var o=e(5),s=e(0),r=e(9),i=e(10);var u=Object(i.a)(s.a,o.a,o.b,!1,function(t){this.$style=r.default.locals||r.default},null,null);n.a=u.exports},function(t,n,e){"use strict";var o=e(6);e.d(n,"a",function(){return o.a}),e.d(n,"b",function(){return o.b})},function(t,n,e){"use strict";e.d(n,"a",function(){return o}),e.d(n,"b",function(){return s});var o=function(){var t=this,n=t.$createElement;return(t._self._c||n)(t.tag,{tag:"component",class:[t.modifierClass,t.sizeClass,t.fullWidthClass,t.responsiveClass,t.iconClass],attrs:{type:"button"===t.tag?t.type:null},on:{click:t.onClick}},[t._t("icon"),t._v(" "),t._t("default")],2)},s=[]},function(t,n,e){"use strict";n.a={props:{tag:{type:String,default:"button",validator:function(t){return["button","a"].indexOf(t)>=0||!1}},type:{type:String,default:"button",validator:function(t){return["button","submit","reset"].indexOf(t)>=0||!1}},onClick:{type:Function,default:function(){return function(){return null}}},fullWidth:{type:Boolean,default:!1,validator:function(t){return"boolean"==typeof t}}},computed:{fullWidthClass:function(){return this.fullWidth&&!this.iconOnly?this.modifyClassName(this.baseClass,"full-width"):null}}}},function(t,n,e){"use strict";n.a={props:{modifier:String},computed:{modifierClass:function(){var t=this,n=this.baseClass,e=this.modifier?this.modifier.split(" "):[],o=[];return this.$style?(o.push(this.moduleClass(n)),o=o.concat(e.map(function(e){return t.modifyClassName(n,e)}))):(o.push(""+n),o=o.concat(e.map(function(e){return t.modifyClassName(n,e)}))),o.join(" ")}},methods:{moduleClass:function(t){return this.$style[""+t]},modifyClassName:function(t,n){return this.$style?this.moduleClass(t+"--"+n):t+"--"+n}}}},function(t,n,e){"use strict";var o=e(2),s=e.n(o);n.default=s.a},function(t,n,e){"use strict";n.a=function(t,n,e,o,s,r,i,u){var a,l="function"==typeof t?t.options:t;n&&(l.render=n,l.staticRenderFns=e,l._compiled=!0);o&&(l.functional=!0);r&&(l._scopeId="data-v-"+r);i?(a=function(t){(t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),s&&s.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(i)},l._ssrRegister=a):s&&(a=u?function(){s.call(this,this.$root.$options.shadowRoot)}:s);if(a)if(l.functional){l._injectStyles=a;var d=l.render;l.render=function(t,n){return a.call(n),d(t,n)}}else{var c=l.beforeCreate;l.beforeCreate=c?[].concat(c,a):[a]}return{exports:t,options:l}}}])}); |
| { | ||
| "name": "@rei/cdr-button", | ||
| "version": "1.0.0-beta.0", | ||
| "version": "1.0.0", | ||
| "author": "REI Software Engineering", | ||
@@ -5,0 +5,0 @@ "description": "REI Cedar Style Framework - Vue Component for Button", |
257
README.md
@@ -1,45 +0,152 @@ | ||
| ## <span class="usage">Usage</span> | ||
| # CdrButton | ||
| ## Properties | ||
| | Name | Type | Default | | ||
| |:-----|:-------|:--------| | ||
| | tag | string | button | | ||
| | Render CdrButton as a `<button>` or `<a>` element. When using a value of a, this element renders as an anchor link. Possible values: { button, a } | | ||
| | Name | Type | Default | | ||
| |:-----|:-------|:--------| | ||
| | type| string | button | | ||
| | Set the button type. Possible values: { button, submit, reset} | | ||
| | Name | Type | Default | | ||
| |:-----|:-------|:--------| | ||
| | onClick | function | return null | | ||
| | Add custom click actions. | | ||
| | Name | Type | Default | | ||
| |:-----|:-------|:--------| | ||
| | fullWidth | boolean | false | | ||
| | Set button width to 100%. Setting it to true will set the button width to 100% of the parent container. Use the full-width prop with the size prop to control top and bottom padding. | | ||
| | Name | Type | Default | | ||
| |:-----|:-------|:--------| | ||
| | size | string | medium | | ||
| | Set the button size. Possible values: { small, medium, large } | | ||
| | Name | Type | Default | | ||
| |:-----|:-------|:--------| | ||
| | responsiveSize | array | n/a | | ||
| | Set the button size at different responsive breakpoints. Breakpoints are expressed as t-shirt sizing with values: `xs`, `sm`, `md`, and `lg`. Example: [‘large@xs’, ‘small@lg’] | | ||
| | Name | Type | Default | | ||
| |:-----|:-------|:--------| | ||
| | iconOnly | boolean | false | | ||
| | Renders an icon-only button. Overrides size and responsiveSize props. | | ||
| | Name | Type | Default | | ||
| |:-----|:-------|:--------| | ||
| | onDark | boolean | false | | ||
| | Renders an icon-only button with a light fill color for use on dark backgrounds. iconOnly must also be true. | | ||
| ## Slots | ||
| All CdrButton components have two slots. | ||
| | Name | Notes | | ||
| |:-----|:-------| | ||
| | Default | Slot for button text. Leave empty if icon-only | | ||
| | icon | Slot for the icon | | ||
| ## Additional Properties | ||
| | Name | Type | Value | | ||
| |:-----|:-------|:--------| | ||
| | modifier | string | Allows style variants to be defined. | | ||
| ## Modifiers | ||
| Following are modifiers for `cdrButton` component: | ||
| - Secondary | ||
| ## Installation | ||
| Resources are available within the [cdr-button package:](https://www.npmjs.com/search?q=cdr-button) | ||
| | Name | Type | Description | | ||
| |:-----|:-------|:--------| | ||
| | `@rei/cdr-button` | Node module package | Import the component into your project | | ||
| | `cdr-button.css` | Style sheet | Component specific styles | | ||
| To incorporate the required assets for a component, use the following steps: | ||
| ### 1. Install using NPM | ||
| Install the `cdr-button` package using `npm` in your terminal: | ||
| _Terminal_ | ||
| ```terminal | ||
| npm i -s @rei/cdr-button | ||
| ``` | ||
| <cdr-button | ||
| type="button" | ||
| @onClick="myFunction" | ||
| >Button</cdr-button> | ||
| ### 2. Import dependencies | ||
| _main.js_ | ||
| ```javascript | ||
| // import your required css. | ||
| import "@rei/cdr-link/dist/cdr-button.css"; | ||
| ``` | ||
| ### <span class="variants">Variants</span> | ||
| ### 3. Add component to a template | ||
| #### <span class="anchor">Anchor</span> | ||
| In this example we’ll create a medium-sized primary button, which is the default. | ||
| `cdr-button` can render as either a button or an anchor element with the same styling; button is the default. | ||
| _local.vue_ | ||
| ``` | ||
| ```vue | ||
| <template> | ||
| <cdr-button | ||
| tag="a" | ||
| href="https://rei.com" | ||
| >REI</cdr-button> | ||
| type="button" | ||
| > | ||
| Add to cart | ||
| </cdr-button> | ||
| </template> | ||
| <script> | ||
| import { CdrButton } from '@rei/cdr-button'; | ||
| export default { | ||
| ... | ||
| components: { | ||
| CdrButton | ||
| } | ||
| } | ||
| </script> | ||
| ``` | ||
| #### <span class="secondary">Secondary</span> | ||
| ## Usage | ||
| Adding a `modifier` attribute with a value of `secondary` will render the secondary button style. | ||
| ### Size, responsive size, and full-width sizing props | ||
| ``` | ||
| The below example uses both the `size` and `responsive-size` props. This button’s size is small, but it will become a large button at the `xs` and `sm` breakpoints. | ||
| ```vue | ||
| <template> | ||
| <cdr-button | ||
| modifier="secondary" | ||
| @onClick="myFunction" | ||
| >Secondary</cdr-button> | ||
| size="small" | ||
| :responsive-size="[‘large@xs’, ‘large@sm’]" | ||
| > | ||
| Add to cart | ||
| </cdr-button> | ||
| </template> | ||
| ``` | ||
| #### <span class="">Composing with Icons</span> | ||
| ### Composing with icons | ||
| The default slot in `cdr-button` can be used to include an icon. `cdr-button` does not include `cdr-icon` as a dependency, so you will need to import it into your composition. If you are trying to create an icon-only button (i.e. no text), there's a separate component for that: `@rei/cdr-icon-only-button`. | ||
| `cdr-button` can be used with the icon component from the @rei/cdr-icon package. | ||
| ``` | ||
| import { CdrIcon } from '@rei/cdr-icon' | ||
| ### Text and Icon | ||
| <cdr-button | ||
| size="large" | ||
| modifier="secondary" | ||
| > | ||
| To scale Cedar icons appropriately, include the `cdr-button__icon` class with any icon component. The `size` prop scales both the icon and button. | ||
| In the below example, a Download button is rendered as a button with icon and text using `cdr-icon` and the icon sprite. | ||
| ```vue | ||
| <template> | ||
| <cdr-button> | ||
| <template name="icon"> | ||
@@ -49,41 +156,99 @@ <cdr-icon | ||
| use="#download" | ||
| modifier="inherit-color" | ||
| /> | ||
| </template> | ||
| Button and Icon | ||
| Download | ||
| </cdr-button> | ||
| </template> | ||
| <script> | ||
| import { CdrButton } from '@rei/cdr-button'; | ||
| import { CdrIcon } from '@rei/cdr-icon; | ||
| export default { | ||
| ... | ||
| components: { | ||
| CdrButton, | ||
| CdrIcon, | ||
| } | ||
| } | ||
| </script> | ||
| ``` | ||
| You can also use single icon components. Per design guidelines, icons should always display to the left of text. | ||
| ### Icon Only | ||
| ``` | ||
| import { IconCheckLg } from '@rei/cdr-icon' | ||
| Use the following props to modify `cdr-button`: | ||
| <cdr-button> | ||
| - Default slot must be empty. If text is present in default slot, the text will render | ||
| - `Size` prop is disable when `icon-only` prop is true | ||
| - For the SVG files: | ||
| - If the `fill` color is dark, assign true to the `on-dark` prop | ||
| - `On-dark` prop only works if `icon-only` prop is also true | ||
| - Add `aria-label` text to describe the button’s action when clicked or tapped | ||
| ```vue | ||
| <template> | ||
| <cdr-button | ||
| :icon-only="true" | ||
| :on-dark="true" | ||
| aria-label="Complete this step" | ||
| > | ||
| <template name="icon"> | ||
| <icon-check-lg | ||
| class="cdr-button__icon" | ||
| /> | ||
| <icon-check-lg class="cdr-button__icon" /> | ||
| </template> | ||
| Medium and Icon | ||
| </cdr-button> | ||
| </template> | ||
| ``` | ||
| The `cdr-button__icon` class needs to be added to the icon element inside of `cdr-button`. This allows `cdr-button` to dictate some icon styling across modularized CSS. | ||
| ### Click Actions | ||
| ## <span class="accessibility">Accessibility</span> | ||
| Use the `on-click` prop to attach custom actions and event handling. | ||
| Since `cdr-button` can render as a button or an anchor, users should focus on what the semantically correct element would be. It will always look like a button, so as long as the correct semantic choice is made, the default ARIA context should suffice. | ||
| ```vue | ||
| <template> | ||
| <cdr-button | ||
| :on-click="greet" | ||
| > | ||
| Greet | ||
| </cdr-button> | ||
| </template> | ||
| ## <span class="">Installation</span> | ||
| <script> | ||
| export default { | ||
| ... | ||
| methods: { | ||
| greet() { | ||
| console.log(‘Hello there’); | ||
| } | ||
| } | ||
| } | ||
| </script> | ||
| ``` | ||
| Import the component to use it in your application. | ||
| ### CdrCloseButton & CdrPlayButton | ||
| The cdr-button package includes two specific icon-only variants. CdrCloseButton and CdrPlayButton include their respective icons and aria-label text for accessibility. | ||
| ```vue | ||
| <template> | ||
| <cdr-close-button /> | ||
| </template> | ||
| <script> | ||
| import { CdrCloseButton } from '@rei/cdr-button'; | ||
| export default { | ||
| ... | ||
| components: { | ||
| CdrCloseButton | ||
| } | ||
| } | ||
| </script> | ||
| ``` | ||
| npm i @rei/cdr-button | ||
| ``` | ||
| ## <span class="">Contributing</span> | ||
| ## Accessibility | ||
| ### Request an an enhancement | ||
| Join us on Slack at [#design-systems](https://rei.slack.com/messages/CA58YCGN4). | ||
| - Cdr-button renders as a button or anchor: | ||
| - Select the semantically correct element, which will ensure that screen readers have correct instructions for how to interact with the component | ||
| - Use cdr-link to make a button that looks like a link | ||
| - Do not use div or input elements | ||
| - Do not add role=”button” to cdr-button | ||
| - Icon-only buttons require aria-label text since only the icon is visible |
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Deprecated
MaintenanceThe maintainer of the package marked it as deprecated. This could indicate that a single version should not be used, or that the package is no longer maintained and any new vulnerabilities will not be fixed.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
New author
Supply chain riskA new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.
Found 1 instance in 1 package
No v1
QualityPackage 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
- increased by9.13%
38183
- Number of low quality alerts
- decreased by-50%
1
- Number of lines in readme file
- increased by184.27%
253
- Number of medium supply chain risk alerts
- decreased by-50%
1
Worsened metrics
- Number of medium maintenance alerts
- increased byInfinity%
1
No dependency changes