@justeat/f-button
Advanced tools
Comparing version 3.0.2 to 3.2.0
@@ -7,2 +7,29 @@ # Changelog | ||
v3.2.0 | ||
------------------------------ | ||
*October 25, 2021* | ||
### Changed | ||
- Button border style definition moved to button types. Introduced `background-color()` mixin to apply the same colour for the background and for the border colour. | ||
- Each button size vertical padding reduced by 1px to make button height 56px/48px/40px/32px instead of 58px/50px/42px/34px. | ||
### Removed | ||
- Outline css styles as focus styles applied with `box-shadow`. | ||
v3.1.0 | ||
------------------------------ | ||
*October 22, 2021* | ||
### Changed | ||
- Add spacing to buttons following a paragraph tag. This matches the current behaviour in Fozzie. | ||
- Removed the background from the link button in disabled state. | ||
- `f-vue-icons` package version bump. | ||
- Button story now shows all the types and sizes of the button component (primary, secondary, outline and ghost). | ||
- Changed knobs to controls for switching button props. | ||
- Separate Demo story to still show one button in isolation. | ||
- Separate story for Link Button to be able to run tests properly. | ||
- Updated the tests in line with the changes. | ||
v3.0.2 | ||
@@ -9,0 +36,0 @@ ------------------------------ |
@@ -122,3 +122,3 @@ module.exports = | ||
// CONCATENATED MODULE: /Users/maryia.radchuk/Documents/work/fozzie-components/node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"03bd7195-vue-loader-template"}!/Users/maryia.radchuk/Documents/work/fozzie-components/node_modules/@vue/cli-service/node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!/Users/maryia.radchuk/Documents/work/fozzie-components/node_modules/cache-loader/dist/cjs.js??ref--0-0!/Users/maryia.radchuk/Documents/work/fozzie-components/node_modules/@vue/cli-service/node_modules/vue-loader/lib??vue-loader-options!./src/components/Button.vue?vue&type=template&id=81d1b1b4& | ||
// CONCATENATED MODULE: /Users/maryia.radchuk/Documents/work/fozzie-components/node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"03bd7195-vue-loader-template"}!/Users/maryia.radchuk/Documents/work/fozzie-components/node_modules/@vue/cli-service/node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!/Users/maryia.radchuk/Documents/work/fozzie-components/node_modules/cache-loader/dist/cjs.js??ref--0-0!/Users/maryia.radchuk/Documents/work/fozzie-components/node_modules/@vue/cli-service/node_modules/vue-loader/lib??vue-loader-options!./src/components/Button.vue?vue&type=template&id=c210f3ae& | ||
var render = function () { | ||
@@ -134,3 +134,3 @@ var _obj, _obj$1; | ||
// CONCATENATED MODULE: ./src/components/Button.vue?vue&type=template&id=81d1b1b4& | ||
// CONCATENATED MODULE: ./src/components/Button.vue?vue&type=template&id=c210f3ae& | ||
@@ -432,3 +432,3 @@ // CONCATENATED MODULE: /Users/maryia.radchuk/Documents/work/fozzie-components/node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"03bd7195-vue-loader-template"}!/Users/maryia.radchuk/Documents/work/fozzie-components/node_modules/@vue/cli-service/node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!/Users/maryia.radchuk/Documents/work/fozzie-components/node_modules/cache-loader/dist/cjs.js??ref--0-0!/Users/maryia.radchuk/Documents/work/fozzie-components/node_modules/@vue/cli-service/node_modules/vue-loader/lib??vue-loader-options!./src/components/Action.vue?vue&type=template&id=5e41886b& | ||
* Renders `RouterLink` component if a `to` attribute is applied to the component, avoids page reload compared to Link with `href` | ||
* Renders `Action` component if no `href` attrivute is applied to the component | ||
* Renders `Action` component if no `href` attribute is applied to the component | ||
*/ | ||
@@ -489,3 +489,3 @@ componentType: function componentType() { | ||
if (!VALID_BUTTON_ICON_POSITION.includes(this.hasIcon)) { | ||
throw new TypeError("hasIcon is set to \"".concat(this.hasIcon, "\", but it can only be one of the following buttonSizes: \"").concat(VALID_BUTTON_ICON_POSITION.join('", "'), "\"")); | ||
throw new TypeError("hasIcon is set to \"".concat(this.hasIcon, "\", but it can only be one of the following button icon positions: \"").concat(VALID_BUTTON_ICON_POSITION.join('", "'), "\"")); | ||
} | ||
@@ -632,3 +632,3 @@ } | ||
// extracted by mini-css-extract-plugin | ||
module.exports = {"c-screen-sizer":"Button_c-screen-sizer_aacnl","c-spinner-wrapper":"Button_c-spinner-wrapper_16dYe","c-spinner":"Button_c-spinner_16ib0","spin":"Button_spin_1l7_1","o-btn":"Button_o-btn_1KX8u","o-btn--link":"Button_o-btn--link_2f-eF","o-button-content":"Button_o-button-content_3Ow1e","o-btn-content--hidden":"Button_o-btn-content--hidden_1592m","o-btn-icon":"Button_o-btn-icon_rKd_B","o-btn-icon--leading":"Button_o-btn-icon--leading_2MkiQ","o-btn-icon--trailing":"Button_o-btn-icon--trailing_R6HPj","o-btn--primary":"Button_o-btn--primary_NRuBe","o-btn--icon":"Button_o-btn--icon_1k-qM","o-btn--loading":"Button_o-btn--loading_2up-7","o-btn--sizeSmall":"Button_o-btn--sizeSmall_WNBZx","o-btn--sizeXSmall":"Button_o-btn--sizeXSmall_3KRtq","o-btn--secondary":"Button_o-btn--secondary_1KBR1","o-btn--outline":"Button_o-btn--outline_3TR6n","o-btn--ghost":"Button_o-btn--ghost_1hnGu","o-btn--ghostTertiary":"Button_o-btn--ghostTertiary_2F6ho","o-btn--inverse":"Button_o-btn--inverse_1uhdX","o-btn--ghostInverse":"Button_o-btn--ghostInverse_2oPMZ","o-btn--sizeLarge":"Button_o-btn--sizeLarge_3A8Ov","o-btn--sizeMedium":"Button_o-btn--sizeMedium_2uSln","o-btn--fullWidth":"Button_o-btn--fullWidth_1xkfh","is-disabled":"Button_is-disabled_1zPQV","skeletonGradient":"Button_skeletonGradient_2l0Iq"}; | ||
module.exports = {"c-screen-sizer":"Button_c-screen-sizer_aacnl","c-spinner-wrapper":"Button_c-spinner-wrapper_16dYe","c-spinner":"Button_c-spinner_16ib0","spin":"Button_spin_1l7_1","o-btn":"Button_o-btn_1KX8u","o-button-content":"Button_o-button-content_3Ow1e","o-btn-content--hidden":"Button_o-btn-content--hidden_1592m","o-btn-icon":"Button_o-btn-icon_rKd_B","o-btn-icon--leading":"Button_o-btn-icon--leading_2MkiQ","o-btn-icon--trailing":"Button_o-btn-icon--trailing_R6HPj","o-btn--primary":"Button_o-btn--primary_NRuBe","o-btn--icon":"Button_o-btn--icon_1k-qM","o-btn--loading":"Button_o-btn--loading_2up-7","o-btn--sizeSmall":"Button_o-btn--sizeSmall_WNBZx","o-btn--sizeXSmall":"Button_o-btn--sizeXSmall_3KRtq","o-btn--secondary":"Button_o-btn--secondary_1KBR1","o-btn--outline":"Button_o-btn--outline_3TR6n","o-btn--ghost":"Button_o-btn--ghost_1hnGu","o-btn--ghostTertiary":"Button_o-btn--ghostTertiary_2F6ho","o-btn--inverse":"Button_o-btn--inverse_1uhdX","o-btn--ghostInverse":"Button_o-btn--ghostInverse_2oPMZ","o-btn--link":"Button_o-btn--link_2f-eF","o-btn--sizeLarge":"Button_o-btn--sizeLarge_3A8Ov","o-btn--sizeMedium":"Button_o-btn--sizeMedium_2uSln","o-btn--fullWidth":"Button_o-btn--fullWidth_1xkfh","is-disabled":"Button_is-disabled_1zPQV","skeletonGradient":"Button_skeletonGradient_2l0Iq"}; | ||
@@ -635,0 +635,0 @@ /***/ }), |
@@ -131,3 +131,3 @@ (function webpackUniversalModuleDefinition(root, factory) { | ||
// CONCATENATED MODULE: /Users/maryia.radchuk/Documents/work/fozzie-components/node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"03bd7195-vue-loader-template"}!/Users/maryia.radchuk/Documents/work/fozzie-components/node_modules/@vue/cli-service/node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!/Users/maryia.radchuk/Documents/work/fozzie-components/node_modules/cache-loader/dist/cjs.js??ref--0-0!/Users/maryia.radchuk/Documents/work/fozzie-components/node_modules/@vue/cli-service/node_modules/vue-loader/lib??vue-loader-options!./src/components/Button.vue?vue&type=template&id=81d1b1b4& | ||
// CONCATENATED MODULE: /Users/maryia.radchuk/Documents/work/fozzie-components/node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"03bd7195-vue-loader-template"}!/Users/maryia.radchuk/Documents/work/fozzie-components/node_modules/@vue/cli-service/node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!/Users/maryia.radchuk/Documents/work/fozzie-components/node_modules/cache-loader/dist/cjs.js??ref--0-0!/Users/maryia.radchuk/Documents/work/fozzie-components/node_modules/@vue/cli-service/node_modules/vue-loader/lib??vue-loader-options!./src/components/Button.vue?vue&type=template&id=c210f3ae& | ||
var render = function () { | ||
@@ -143,3 +143,3 @@ var _obj, _obj$1; | ||
// CONCATENATED MODULE: ./src/components/Button.vue?vue&type=template&id=81d1b1b4& | ||
// CONCATENATED MODULE: ./src/components/Button.vue?vue&type=template&id=c210f3ae& | ||
@@ -441,3 +441,3 @@ // CONCATENATED MODULE: /Users/maryia.radchuk/Documents/work/fozzie-components/node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"03bd7195-vue-loader-template"}!/Users/maryia.radchuk/Documents/work/fozzie-components/node_modules/@vue/cli-service/node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!/Users/maryia.radchuk/Documents/work/fozzie-components/node_modules/cache-loader/dist/cjs.js??ref--0-0!/Users/maryia.radchuk/Documents/work/fozzie-components/node_modules/@vue/cli-service/node_modules/vue-loader/lib??vue-loader-options!./src/components/Action.vue?vue&type=template&id=5e41886b& | ||
* Renders `RouterLink` component if a `to` attribute is applied to the component, avoids page reload compared to Link with `href` | ||
* Renders `Action` component if no `href` attrivute is applied to the component | ||
* Renders `Action` component if no `href` attribute is applied to the component | ||
*/ | ||
@@ -498,3 +498,3 @@ componentType: function componentType() { | ||
if (!VALID_BUTTON_ICON_POSITION.includes(this.hasIcon)) { | ||
throw new TypeError("hasIcon is set to \"".concat(this.hasIcon, "\", but it can only be one of the following buttonSizes: \"").concat(VALID_BUTTON_ICON_POSITION.join('", "'), "\"")); | ||
throw new TypeError("hasIcon is set to \"".concat(this.hasIcon, "\", but it can only be one of the following button icon positions: \"").concat(VALID_BUTTON_ICON_POSITION.join('", "'), "\"")); | ||
} | ||
@@ -641,3 +641,3 @@ } | ||
// extracted by mini-css-extract-plugin | ||
module.exports = {"c-screen-sizer":"Button_c-screen-sizer_aacnl","c-spinner-wrapper":"Button_c-spinner-wrapper_16dYe","c-spinner":"Button_c-spinner_16ib0","spin":"Button_spin_1l7_1","o-btn":"Button_o-btn_1KX8u","o-btn--link":"Button_o-btn--link_2f-eF","o-button-content":"Button_o-button-content_3Ow1e","o-btn-content--hidden":"Button_o-btn-content--hidden_1592m","o-btn-icon":"Button_o-btn-icon_rKd_B","o-btn-icon--leading":"Button_o-btn-icon--leading_2MkiQ","o-btn-icon--trailing":"Button_o-btn-icon--trailing_R6HPj","o-btn--primary":"Button_o-btn--primary_NRuBe","o-btn--icon":"Button_o-btn--icon_1k-qM","o-btn--loading":"Button_o-btn--loading_2up-7","o-btn--sizeSmall":"Button_o-btn--sizeSmall_WNBZx","o-btn--sizeXSmall":"Button_o-btn--sizeXSmall_3KRtq","o-btn--secondary":"Button_o-btn--secondary_1KBR1","o-btn--outline":"Button_o-btn--outline_3TR6n","o-btn--ghost":"Button_o-btn--ghost_1hnGu","o-btn--ghostTertiary":"Button_o-btn--ghostTertiary_2F6ho","o-btn--inverse":"Button_o-btn--inverse_1uhdX","o-btn--ghostInverse":"Button_o-btn--ghostInverse_2oPMZ","o-btn--sizeLarge":"Button_o-btn--sizeLarge_3A8Ov","o-btn--sizeMedium":"Button_o-btn--sizeMedium_2uSln","o-btn--fullWidth":"Button_o-btn--fullWidth_1xkfh","is-disabled":"Button_is-disabled_1zPQV","skeletonGradient":"Button_skeletonGradient_2l0Iq"}; | ||
module.exports = {"c-screen-sizer":"Button_c-screen-sizer_aacnl","c-spinner-wrapper":"Button_c-spinner-wrapper_16dYe","c-spinner":"Button_c-spinner_16ib0","spin":"Button_spin_1l7_1","o-btn":"Button_o-btn_1KX8u","o-button-content":"Button_o-button-content_3Ow1e","o-btn-content--hidden":"Button_o-btn-content--hidden_1592m","o-btn-icon":"Button_o-btn-icon_rKd_B","o-btn-icon--leading":"Button_o-btn-icon--leading_2MkiQ","o-btn-icon--trailing":"Button_o-btn-icon--trailing_R6HPj","o-btn--primary":"Button_o-btn--primary_NRuBe","o-btn--icon":"Button_o-btn--icon_1k-qM","o-btn--loading":"Button_o-btn--loading_2up-7","o-btn--sizeSmall":"Button_o-btn--sizeSmall_WNBZx","o-btn--sizeXSmall":"Button_o-btn--sizeXSmall_3KRtq","o-btn--secondary":"Button_o-btn--secondary_1KBR1","o-btn--outline":"Button_o-btn--outline_3TR6n","o-btn--ghost":"Button_o-btn--ghost_1hnGu","o-btn--ghostTertiary":"Button_o-btn--ghostTertiary_2F6ho","o-btn--inverse":"Button_o-btn--inverse_1uhdX","o-btn--ghostInverse":"Button_o-btn--ghostInverse_2oPMZ","o-btn--link":"Button_o-btn--link_2f-eF","o-btn--sizeLarge":"Button_o-btn--sizeLarge_3A8Ov","o-btn--sizeMedium":"Button_o-btn--sizeMedium_2uSln","o-btn--fullWidth":"Button_o-btn--fullWidth_1xkfh","is-disabled":"Button_is-disabled_1zPQV","skeletonGradient":"Button_skeletonGradient_2l0Iq"}; | ||
@@ -644,0 +644,0 @@ /***/ }), |
@@ -1,2 +0,2 @@ | ||
(function(t,n){"object"===typeof exports&&"object"===typeof module?module.exports=n():"function"===typeof define&&define.amd?define([],n):"object"===typeof exports?exports["f-button"]=n():t["f-button"]=n()})("undefined"!==typeof self?self:this,(function(){return function(t){var n={};function e(o){if(n[o])return n[o].exports;var i=n[o]={i:o,l:!1,exports:{}};return t[o].call(i.exports,i,i.exports,e),i.l=!0,i.exports}return e.m=t,e.c=n,e.d=function(t,n,o){e.o(t,n)||Object.defineProperty(t,n,{enumerable:!0,get:o})},e.r=function(t){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},e.t=function(t,n){if(1&n&&(t=e(t)),8&n)return t;if(4&n&&"object"===typeof t&&t&&t.__esModule)return t;var o=Object.create(null);if(e.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:t}),2&n&&"string"!=typeof t)for(var i in t)e.d(o,i,function(n){return t[n]}.bind(null,i));return 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="fa16")}({"05e9":function(t,n){var e;e=function(){return this}();try{e=e||new Function("return this")()}catch(o){"object"===typeof window&&(e=window)}t.exports=e},"2a7d":function(t,n,e){"use strict";var o=function(){var t,n,e=this,o=e.$createElement,i=e._self._c||o;return i(e.componentType,e._g(e._b({tag:"component",class:[e.$style["o-btn"],e.$style["o-btn--"+e.buttonType],e.$style["o-btn--size"+e.buttonSizeClassname],(t={},t[e.$style["o-btn--icon"]]=e.isIcon,t[e.$style["o-btn--fullWidth"]]=e.isFullWidth,t[e.$style["o-btn--loading"]]=e.isLoading,t)],attrs:{"action-type":e.buttonActionType,"data-test-id":e.componentType+"-component","aria-live":e.getAriaLive,"aria-busy":e.isLoading}},"component",e.$attrs,!1),!e.isLoading&&e.$listeners),[e.hasNestedContent?[e.isLoading?i("span",{class:e.$style["c-spinner"],attrs:{"data-test-id":e.componentType+"-spinner"}}):e._e(),i("span",{class:[e.$style["o-button-content"],(n={},n[e.$style["o-btn-content--hidden"]]=e.isLoading,n)]},[e.hasLeadingIcon?i("span",{class:[e.$style["o-btn-icon"],e.$style["o-btn-icon--leading"]],attrs:{"data-test-id":"button-leading-icon"}},[e._t("leading-icon")],2):e._e(),e._t("default"),e.hasTrailingIcon?i("span",{class:[e.$style["o-btn-icon"],e.$style["o-btn-icon--trailing"]],attrs:{"data-test-id":"button-trailing-icon"}},[e._t("trailing-icon")],2):e._e()],2)]:[e._t("default")]],2)},i=[],r=function(){var t=this,n=t.$createElement,e=t._self._c||n;return e("button",t._g({attrs:{type:t.actionType}},t.$listeners),[t._t("default")],2)},s=[],u={props:{actionType:{type:String,required:!0}}},a=u;function c(t,n,e,o,i,r,s,u){var a,c="function"===typeof t?t.options:t;if(n&&(c.render=n,c.staticRenderFns=e,c._compiled=!0),o&&(c.functional=!0),r&&(c._scopeId="data-v-"+r),s?(a=function(t){t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,t||"undefined"===typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),i&&i.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(s)},c._ssrRegister=a):i&&(a=u?function(){i.call(this,(c.functional?this.parent:this).$root.$options.shadowRoot)}:i),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}}var l=c(a,r,s,!1,null,null,null),d=l.exports,p=function(){var t=this,n=t.$createElement,e=t._self._c||n;return e("a",t._g({},t.$listeners),[t._t("default")],2)},f=[],b={},h=c(b,p,f,!1,null,null,null),_=h.exports,y={iconButton:["primary","secondary","ghost","ghostTertiary","inverse","ghostInverse"],button:["primary","secondary","outline","ghost","link"]},g=["xsmall","small","medium","large"],m=["leading","trailing",!1],v={name:"FButton",components:{ActionButton:d,LinkButton:_},props:{buttonType:{type:String,default:"primary"},buttonSize:{type:String,default:"medium"},isFullWidth:{type:Boolean,default:!1},actionType:{type:String,default:"button"},isIcon:{type:Boolean,default:!1},isLoading:{type:Boolean,default:!1},hasIcon:{type:[Boolean,String],default:!1}},computed:{buttonActionType:function(){return this.$attrs.href||this.$attrs.to?null:this.actionType},buttonSizeClassname:function(){return"xsmall"===this.buttonSize?this.buttonSize.slice(0,2).toUpperCase()+this.buttonSize.slice(2):this.buttonSize.charAt(0).toUpperCase()+this.buttonSize.slice(1)},componentType:function(){return this.$attrs.href?"link-button":this.$attrs.to?"router-link":"action-button"},getAriaLive:function(){return this.isLoading?"polite":"off"},hasTrailingIcon:function(){return this.hasIcon&&"trailing"===this.hasIcon},hasLeadingIcon:function(){return this.hasIcon&&"leading"===this.hasIcon},hasNestedContent:function(){return this.isLoading||this.hasLeadingIcon||this.hasTrailingIcon}},watch:{$props:{immediate:!0,handler:function(){this.validateProps()}}},methods:{validateProps:function(){var t=this.isIcon?"iconButton":"button",n=y[t];if(!n.includes(this.buttonType))throw new TypeError("".concat(t,' is set to have buttonType="').concat(this.buttonType,'", but it can only be one of the following buttonTypes: "').concat(n.join('", "'),'"'));if(!g.includes(this.buttonSize))throw new TypeError('buttonSize is set to "'.concat(this.buttonSize,'", but it can only be one of the following buttonSizes: "').concat(g.join('", "'),'"'));if(!m.includes(this.hasIcon))throw new TypeError('hasIcon is set to "'.concat(this.hasIcon,'", but it can only be one of the following buttonSizes: "').concat(m.join('", "'),'"'))}}},S=v,B=e("4e4b");function T(t){this["$style"]=B["default"].locals||B["default"]}var $=c(S,o,i,!1,T,null,null);n["a"]=$.exports},"4e4b":function(t,n,e){"use strict";var o=e("9a8d"),i=e.n(o);e.d(n,"default",(function(){return i.a}))},"7e10":function(t,n,e){var o,i,r;(function(e,s){i=[],o=s,r="function"===typeof o?o.apply(n,i):o,void 0===r||(t.exports=r)})("undefined"!==typeof self&&self,(function(){function t(){var n=Object.getOwnPropertyDescriptor(document,"currentScript");if(!n&&"currentScript"in document&&document.currentScript)return document.currentScript;if(n&&n.get!==t&&document.currentScript)return document.currentScript;try{throw new Error}catch(f){var e,o,i,r=/.*at [^(]*\((.*):(.+):(.+)\)$/gi,s=/@([^@]*):(\d+):(\d+)\s*$/gi,u=r.exec(f.stack)||s.exec(f.stack),a=u&&u[1]||!1,c=u&&u[2]||!1,l=document.location.href.replace(document.location.hash,""),d=document.getElementsByTagName("script");a===l&&(e=document.documentElement.outerHTML,o=new RegExp("(?:[^\\n]+?\\n){0,"+(c-2)+"}[^<]*<script>([\\d\\D]*?)<\\/script>[\\d\\D]*","i"),i=e.replace(o,"$1").trim());for(var p=0;p<d.length;p++){if("interactive"===d[p].readyState)return d[p];if(d[p].src===a)return d[p];if(a===l&&d[p].innerHTML&&d[p].innerHTML.trim()===i)return d[p]}return null}}return t}))},"9a8d":function(t,n,e){t.exports={"c-screen-sizer":"Button_c-screen-sizer_aacnl","c-spinner-wrapper":"Button_c-spinner-wrapper_16dYe","c-spinner":"Button_c-spinner_16ib0",spin:"Button_spin_1l7_1","o-btn":"Button_o-btn_1KX8u","o-btn--link":"Button_o-btn--link_2f-eF","o-button-content":"Button_o-button-content_3Ow1e","o-btn-content--hidden":"Button_o-btn-content--hidden_1592m","o-btn-icon":"Button_o-btn-icon_rKd_B","o-btn-icon--leading":"Button_o-btn-icon--leading_2MkiQ","o-btn-icon--trailing":"Button_o-btn-icon--trailing_R6HPj","o-btn--primary":"Button_o-btn--primary_NRuBe","o-btn--icon":"Button_o-btn--icon_1k-qM","o-btn--loading":"Button_o-btn--loading_2up-7","o-btn--sizeSmall":"Button_o-btn--sizeSmall_WNBZx","o-btn--sizeXSmall":"Button_o-btn--sizeXSmall_3KRtq","o-btn--secondary":"Button_o-btn--secondary_1KBR1","o-btn--outline":"Button_o-btn--outline_3TR6n","o-btn--ghost":"Button_o-btn--ghost_1hnGu","o-btn--ghostTertiary":"Button_o-btn--ghostTertiary_2F6ho","o-btn--inverse":"Button_o-btn--inverse_1uhdX","o-btn--ghostInverse":"Button_o-btn--ghostInverse_2oPMZ","o-btn--sizeLarge":"Button_o-btn--sizeLarge_3A8Ov","o-btn--sizeMedium":"Button_o-btn--sizeMedium_2uSln","o-btn--fullWidth":"Button_o-btn--fullWidth_1xkfh","is-disabled":"Button_is-disabled_1zPQV",skeletonGradient:"Button_skeletonGradient_2l0Iq"}},b635:function(t,n,e){"use strict";(function(t){e.d(n,"b",(function(){return i}));var o=e("2a7d");function i(t){i.installed||(i.installed=!0,t.component("FButton",o["a"]))}var r={install:i},s=null;"undefined"!==typeof window?s=window.Vue:"undefined"!==typeof t&&(s=t.Vue),s&&s.use(r),n["a"]=o["a"]}).call(this,e("05e9"))},fa16:function(t,n,e){"use strict";if(e.r(n),e.d(n,"install",(function(){return s["b"]})),"undefined"!==typeof window){var o=window.document.currentScript,i=e("7e10");o=i(),"currentScript"in document||Object.defineProperty(document,"currentScript",{get:i});var r=o&&o.src.match(/(.+\/)[^/]+\.js(\?.*)?$/);r&&(e.p=r[1])}var s=e("b635");n["default"]=s["a"]}})})); | ||
(function(t,n){"object"===typeof exports&&"object"===typeof module?module.exports=n():"function"===typeof define&&define.amd?define([],n):"object"===typeof exports?exports["f-button"]=n():t["f-button"]=n()})("undefined"!==typeof self?self:this,(function(){return function(t){var n={};function e(o){if(n[o])return n[o].exports;var i=n[o]={i:o,l:!1,exports:{}};return t[o].call(i.exports,i,i.exports,e),i.l=!0,i.exports}return e.m=t,e.c=n,e.d=function(t,n,o){e.o(t,n)||Object.defineProperty(t,n,{enumerable:!0,get:o})},e.r=function(t){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},e.t=function(t,n){if(1&n&&(t=e(t)),8&n)return t;if(4&n&&"object"===typeof t&&t&&t.__esModule)return t;var o=Object.create(null);if(e.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:t}),2&n&&"string"!=typeof t)for(var i in t)e.d(o,i,function(n){return t[n]}.bind(null,i));return 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="fa16")}({"05e9":function(t,n){var e;e=function(){return this}();try{e=e||new Function("return this")()}catch(o){"object"===typeof window&&(e=window)}t.exports=e},"2a7d":function(t,n,e){"use strict";var o=function(){var t,n,e=this,o=e.$createElement,i=e._self._c||o;return i(e.componentType,e._g(e._b({tag:"component",class:[e.$style["o-btn"],e.$style["o-btn--"+e.buttonType],e.$style["o-btn--size"+e.buttonSizeClassname],(t={},t[e.$style["o-btn--icon"]]=e.isIcon,t[e.$style["o-btn--fullWidth"]]=e.isFullWidth,t[e.$style["o-btn--loading"]]=e.isLoading,t)],attrs:{"action-type":e.buttonActionType,"data-test-id":e.componentType+"-component","aria-live":e.getAriaLive,"aria-busy":e.isLoading}},"component",e.$attrs,!1),!e.isLoading&&e.$listeners),[e.hasNestedContent?[e.isLoading?i("span",{class:e.$style["c-spinner"],attrs:{"data-test-id":e.componentType+"-spinner"}}):e._e(),i("span",{class:[e.$style["o-button-content"],(n={},n[e.$style["o-btn-content--hidden"]]=e.isLoading,n)]},[e.hasLeadingIcon?i("span",{class:[e.$style["o-btn-icon"],e.$style["o-btn-icon--leading"]],attrs:{"data-test-id":"button-leading-icon"}},[e._t("leading-icon")],2):e._e(),e._t("default"),e.hasTrailingIcon?i("span",{class:[e.$style["o-btn-icon"],e.$style["o-btn-icon--trailing"]],attrs:{"data-test-id":"button-trailing-icon"}},[e._t("trailing-icon")],2):e._e()],2)]:[e._t("default")]],2)},i=[],r=function(){var t=this,n=t.$createElement,e=t._self._c||n;return e("button",t._g({attrs:{type:t.actionType}},t.$listeners),[t._t("default")],2)},s=[],u={props:{actionType:{type:String,required:!0}}},a=u;function c(t,n,e,o,i,r,s,u){var a,c="function"===typeof t?t.options:t;if(n&&(c.render=n,c.staticRenderFns=e,c._compiled=!0),o&&(c.functional=!0),r&&(c._scopeId="data-v-"+r),s?(a=function(t){t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,t||"undefined"===typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),i&&i.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(s)},c._ssrRegister=a):i&&(a=u?function(){i.call(this,(c.functional?this.parent:this).$root.$options.shadowRoot)}:i),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}}var l=c(a,r,s,!1,null,null,null),d=l.exports,p=function(){var t=this,n=t.$createElement,e=t._self._c||n;return e("a",t._g({},t.$listeners),[t._t("default")],2)},f=[],b={},h=c(b,p,f,!1,null,null,null),_=h.exports,y={iconButton:["primary","secondary","ghost","ghostTertiary","inverse","ghostInverse"],button:["primary","secondary","outline","ghost","link"]},g=["xsmall","small","medium","large"],m=["leading","trailing",!1],v={name:"FButton",components:{ActionButton:d,LinkButton:_},props:{buttonType:{type:String,default:"primary"},buttonSize:{type:String,default:"medium"},isFullWidth:{type:Boolean,default:!1},actionType:{type:String,default:"button"},isIcon:{type:Boolean,default:!1},isLoading:{type:Boolean,default:!1},hasIcon:{type:[Boolean,String],default:!1}},computed:{buttonActionType:function(){return this.$attrs.href||this.$attrs.to?null:this.actionType},buttonSizeClassname:function(){return"xsmall"===this.buttonSize?this.buttonSize.slice(0,2).toUpperCase()+this.buttonSize.slice(2):this.buttonSize.charAt(0).toUpperCase()+this.buttonSize.slice(1)},componentType:function(){return this.$attrs.href?"link-button":this.$attrs.to?"router-link":"action-button"},getAriaLive:function(){return this.isLoading?"polite":"off"},hasTrailingIcon:function(){return this.hasIcon&&"trailing"===this.hasIcon},hasLeadingIcon:function(){return this.hasIcon&&"leading"===this.hasIcon},hasNestedContent:function(){return this.isLoading||this.hasLeadingIcon||this.hasTrailingIcon}},watch:{$props:{immediate:!0,handler:function(){this.validateProps()}}},methods:{validateProps:function(){var t=this.isIcon?"iconButton":"button",n=y[t];if(!n.includes(this.buttonType))throw new TypeError("".concat(t,' is set to have buttonType="').concat(this.buttonType,'", but it can only be one of the following buttonTypes: "').concat(n.join('", "'),'"'));if(!g.includes(this.buttonSize))throw new TypeError('buttonSize is set to "'.concat(this.buttonSize,'", but it can only be one of the following buttonSizes: "').concat(g.join('", "'),'"'));if(!m.includes(this.hasIcon))throw new TypeError('hasIcon is set to "'.concat(this.hasIcon,'", but it can only be one of the following button icon positions: "').concat(m.join('", "'),'"'))}}},B=v,S=e("4e4b");function T(t){this["$style"]=S["default"].locals||S["default"]}var $=c(B,o,i,!1,T,null,null);n["a"]=$.exports},"4e4b":function(t,n,e){"use strict";var o=e("9a8d"),i=e.n(o);e.d(n,"default",(function(){return i.a}))},"7e10":function(t,n,e){var o,i,r;(function(e,s){i=[],o=s,r="function"===typeof o?o.apply(n,i):o,void 0===r||(t.exports=r)})("undefined"!==typeof self&&self,(function(){function t(){var n=Object.getOwnPropertyDescriptor(document,"currentScript");if(!n&&"currentScript"in document&&document.currentScript)return document.currentScript;if(n&&n.get!==t&&document.currentScript)return document.currentScript;try{throw new Error}catch(f){var e,o,i,r=/.*at [^(]*\((.*):(.+):(.+)\)$/gi,s=/@([^@]*):(\d+):(\d+)\s*$/gi,u=r.exec(f.stack)||s.exec(f.stack),a=u&&u[1]||!1,c=u&&u[2]||!1,l=document.location.href.replace(document.location.hash,""),d=document.getElementsByTagName("script");a===l&&(e=document.documentElement.outerHTML,o=new RegExp("(?:[^\\n]+?\\n){0,"+(c-2)+"}[^<]*<script>([\\d\\D]*?)<\\/script>[\\d\\D]*","i"),i=e.replace(o,"$1").trim());for(var p=0;p<d.length;p++){if("interactive"===d[p].readyState)return d[p];if(d[p].src===a)return d[p];if(a===l&&d[p].innerHTML&&d[p].innerHTML.trim()===i)return d[p]}return null}}return t}))},"9a8d":function(t,n,e){t.exports={"c-screen-sizer":"Button_c-screen-sizer_aacnl","c-spinner-wrapper":"Button_c-spinner-wrapper_16dYe","c-spinner":"Button_c-spinner_16ib0",spin:"Button_spin_1l7_1","o-btn":"Button_o-btn_1KX8u","o-button-content":"Button_o-button-content_3Ow1e","o-btn-content--hidden":"Button_o-btn-content--hidden_1592m","o-btn-icon":"Button_o-btn-icon_rKd_B","o-btn-icon--leading":"Button_o-btn-icon--leading_2MkiQ","o-btn-icon--trailing":"Button_o-btn-icon--trailing_R6HPj","o-btn--primary":"Button_o-btn--primary_NRuBe","o-btn--icon":"Button_o-btn--icon_1k-qM","o-btn--loading":"Button_o-btn--loading_2up-7","o-btn--sizeSmall":"Button_o-btn--sizeSmall_WNBZx","o-btn--sizeXSmall":"Button_o-btn--sizeXSmall_3KRtq","o-btn--secondary":"Button_o-btn--secondary_1KBR1","o-btn--outline":"Button_o-btn--outline_3TR6n","o-btn--ghost":"Button_o-btn--ghost_1hnGu","o-btn--ghostTertiary":"Button_o-btn--ghostTertiary_2F6ho","o-btn--inverse":"Button_o-btn--inverse_1uhdX","o-btn--ghostInverse":"Button_o-btn--ghostInverse_2oPMZ","o-btn--link":"Button_o-btn--link_2f-eF","o-btn--sizeLarge":"Button_o-btn--sizeLarge_3A8Ov","o-btn--sizeMedium":"Button_o-btn--sizeMedium_2uSln","o-btn--fullWidth":"Button_o-btn--fullWidth_1xkfh","is-disabled":"Button_is-disabled_1zPQV",skeletonGradient:"Button_skeletonGradient_2l0Iq"}},b635:function(t,n,e){"use strict";(function(t){e.d(n,"b",(function(){return i}));var o=e("2a7d");function i(t){i.installed||(i.installed=!0,t.component("FButton",o["a"]))}var r={install:i},s=null;"undefined"!==typeof window?s=window.Vue:"undefined"!==typeof t&&(s=t.Vue),s&&s.use(r),n["a"]=o["a"]}).call(this,e("05e9"))},fa16:function(t,n,e){"use strict";if(e.r(n),e.d(n,"install",(function(){return s["b"]})),"undefined"!==typeof window){var o=window.document.currentScript,i=e("7e10");o=i(),"currentScript"in document||Object.defineProperty(document,"currentScript",{get:i});var r=o&&o.src.match(/(.+\/)[^/]+\.js(\?.*)?$/);r&&(e.p=r[1])}var s=e("b635");n["default"]=s["a"]}})})); | ||
//# sourceMappingURL=f-button.umd.min.js.map |
{ | ||
"name": "@justeat/f-button", | ||
"description": "Fozzie Button – The generic button component", | ||
"version": "3.0.2", | ||
"version": "3.2.0", | ||
"main": "dist/f-button.umd.min.js", | ||
@@ -55,3 +55,3 @@ "maxBundleSize": "5kB", | ||
"devDependencies": { | ||
"@justeat/f-vue-icons": "2.5.0", | ||
"@justeat/f-vue-icons": "2.8.0", | ||
"@justeat/f-wdio-utils": "0.3.0", | ||
@@ -58,0 +58,0 @@ "@samhammer/vue-cli-plugin-stylelint": "2.0.1", |
@@ -10,4 +10,2 @@ const Page = require('@justeat/f-wdio-utils/src/page.object'); | ||
get linkComponent () { return $('[data-test-id="link-button-component"]'); } | ||
open (url) { | ||
@@ -17,8 +15,4 @@ super.open(url); | ||
load (type = 'action') { | ||
if (type === 'action') { | ||
super.load(this.actionComponent); | ||
} else { | ||
super.load(this.linkComponent); | ||
} | ||
load () { | ||
super.load(this.actionComponent); | ||
} | ||
@@ -29,3 +23,3 @@ | ||
* Sets the data for the button component. | ||
* | ||
* | ||
* @param {Object} button | ||
@@ -35,10 +29,3 @@ * @param {String} button.type | ||
*/ | ||
// open (button) { | ||
// const type = `&knob-Button%20Type=${button.type}`; | ||
// const url = button.type === 'link' ? `&knob-href=link` : ''; | ||
// const size = `&knob-Button%20Size=${button.size}`; | ||
// browser.url(`/iframe.html?id=components-atoms-f-button--button-component${type}${url}${size}`) | ||
// } | ||
waitForActionComponent () { | ||
@@ -48,13 +35,5 @@ super.waitForComponent(this.actionComponent); | ||
waitForLinkComponent () { | ||
super.waitForComponent(this.linkComponent); | ||
} | ||
isActionComponentDisplayed () { | ||
return this.actionComponent.isDisplayed(); | ||
} | ||
isLinkComponentDisplayed () { | ||
return this.linkComponent.isDisplayed(); | ||
} | ||
}; |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
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
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
256749
14
1355