@justeat/f-button - npm Package Compare versions

Comparing version 0.4.1 to 0.5.0

CHANGELOG.md

@@ -7,2 +7,20 @@ # Changelog
 
+v0.5.0
+------------------------------
+*January 21, 2021*
+
+### Added
+- `Action` component for standard buttons.
+- `Link` component for links styled as buttons.
+
+
+Latest (add to next release)
+------------------------------
+*December 30, 2020*
+
+### Changed
+- Updated config for latest `sass-loader`.
+- Switches import in `common.scss` in line with fozzie v5-beta.
+
+
 v0.4.1
@@ -27,3 +45,3 @@ ------------------------------
 ### Removed
-- Margins from the button styles 
+- Margins from the button styles
 
@@ -30,0 +48,0 @@

dist/f-button.common.js

@@ -85,3 +85,3 @@ module.exports =
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = "1c25");
+/******/ 	return __webpack_require__(__webpack_require__.s = "fa16");
 /******/ })
@@ -91,43 +91,27 @@ /************************************************************************/
 
-/***/ "1c25":
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
+/***/ "05e9":
+/***/ (function(module, exports) {
 
-"use strict";
-__webpack_require__.r(__webpack_exports__);
+var g;
 
-// CONCATENATED MODULE: /Users/maryia.radchuk/Documents/work/fozzie-components/node_modules/@vue/cli-service/lib/commands/build/setPublicPath.js
-// This file is imported into lib/wc client bundles.
+// This works in non-strict mode
+g = (function() {
+	return this;
+})();
 
-if (typeof window !== 'undefined') {
-  var currentScript = window.document.currentScript
-  if (true) {
-    var getCurrentScript = __webpack_require__("405b")
-    currentScript = getCurrentScript()
-
-    // for backward compatibility, because previously we directly included the polyfill
-    if (!('currentScript' in document)) {
-      Object.defineProperty(document, 'currentScript', { get: getCurrentScript })
-    }
-  }
-
-  var src = currentScript && currentScript.src.match(/(.+\/)[^/]+\.js(\?.*)?$/)
-  if (src) {
-    __webpack_require__.p = src[1] // eslint-disable-line
-  }
+try {
+	// This works if eval is allowed (see CSP)
+	g = g || new Function("return this")();
+} catch (e) {
+	// This works if the window reference is available
+	if (typeof window === "object") g = window;
 }
 
-// Indicate to webpack that this file can be concatenated
-/* harmony default export */ var setPublicPath = (null);
+// g can still be undefined, but nothing to do about it...
+// We return undefined, instead of nothing here, so it's
+// easier to handle this case. if(!global) { ...}
 
-// EXTERNAL MODULE: ./src/index.js
-var src_0 = __webpack_require__("b635");
+module.exports = g;
 
-// CONCATENATED MODULE: /Users/maryia.radchuk/Documents/work/fozzie-components/node_modules/@vue/cli-service/lib/commands/build/entry-lib.js
-/* concated harmony reexport install */__webpack_require__.d(__webpack_exports__, "install", function() { return src_0["b" /* install */]; });
 
-
-/* harmony default export */ var entry_lib = __webpack_exports__["default"] = (src_0["a" /* default */]);
-
-
-
 /***/ }),
@@ -140,4 +124,4 @@
 
-// CONCATENATED MODULE: /Users/maryia.radchuk/Documents/work/fozzie-components/node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"1948a6fc-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=7a3211e5&
-var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('button',{class:[
+// CONCATENATED MODULE: /Users/faye.carter/Documents/fozzie-components/node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"24c0bd0a-vue-loader-template"}!/Users/faye.carter/Documents/fozzie-components/node_modules/@vue/cli-service/node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!/Users/faye.carter/Documents/fozzie-components/node_modules/cache-loader/dist/cjs.js??ref--0-0!/Users/faye.carter/Documents/fozzie-components/node_modules/@vue/cli-service/node_modules/vue-loader/lib??vue-loader-options!./src/components/Button.vue?vue&type=template&id=0e833e8e&
+var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c(_vm.componentType,{tag:"component",class:[
         _vm.$style['o-btn'],
@@ -147,9 +131,16 @@ _vm.$style[("o-btn--" + _vm.buttonType)],
         (_vm.isFullWidth ? _vm.$style['o-btn--fullWidth'] : '')
-    ],attrs:{"data-test-id":"button-component"}},[_vm._t("default")],2)}
+    ],attrs:{"attributes":_vm.$attrs,"action-type":_vm.buttonActionType,"data-test-id":(_vm.componentType + "-component")}},[_vm._t("default")],2)}
 var staticRenderFns = []
 
 
-// CONCATENATED MODULE: ./src/components/Button.vue?vue&type=template&id=7a3211e5&
+// CONCATENATED MODULE: ./src/components/Button.vue?vue&type=template&id=0e833e8e&
 
-// CONCATENATED MODULE: /Users/maryia.radchuk/Documents/work/fozzie-components/node_modules/cache-loader/dist/cjs.js??ref--12-0!/Users/maryia.radchuk/Documents/work/fozzie-components/node_modules/thread-loader/dist/cjs.js!/Users/maryia.radchuk/Documents/work/fozzie-components/node_modules/@vue/cli-plugin-babel/node_modules/babel-loader/lib!/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=script&lang=js&
+// CONCATENATED MODULE: /Users/faye.carter/Documents/fozzie-components/node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"24c0bd0a-vue-loader-template"}!/Users/faye.carter/Documents/fozzie-components/node_modules/@vue/cli-service/node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!/Users/faye.carter/Documents/fozzie-components/node_modules/cache-loader/dist/cjs.js??ref--0-0!/Users/faye.carter/Documents/fozzie-components/node_modules/@vue/cli-service/node_modules/vue-loader/lib??vue-loader-options!./src/components/Action.vue?vue&type=template&id=5adbff37&
+var Actionvue_type_template_id_5adbff37_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('button',{attrs:{"type":_vm.actionType}},[_vm._t("default")],2)}
+var Actionvue_type_template_id_5adbff37_staticRenderFns = []
+
+
+// CONCATENATED MODULE: ./src/components/Action.vue?vue&type=template&id=5adbff37&
+
+// CONCATENATED MODULE: /Users/faye.carter/Documents/fozzie-components/node_modules/cache-loader/dist/cjs.js??ref--12-0!/Users/faye.carter/Documents/fozzie-components/node_modules/thread-loader/dist/cjs.js!/Users/faye.carter/Documents/fozzie-components/node_modules/@vue/cli-plugin-babel/node_modules/babel-loader/lib!/Users/faye.carter/Documents/fozzie-components/node_modules/cache-loader/dist/cjs.js??ref--0-0!/Users/faye.carter/Documents/fozzie-components/node_modules/@vue/cli-service/node_modules/vue-loader/lib??vue-loader-options!./src/components/Action.vue?vue&type=script&lang=js&
 //
@@ -161,45 +152,13 @@ //
 //
-//
-//
-//
-//
-//
-//
-//
-/* harmony default export */ var Buttonvue_type_script_lang_js_ = ({
-  name: 'FButton',
-  components: {},
+/* harmony default export */ var Actionvue_type_script_lang_js_ = ({
   props: {
-    buttonType: {
+    actionType: {
       type: String,
-      default: 'primary'
-    },
-    buttonSize: {
-      type: String,
-      default: 'medium'
-    },
-    isFullWidth: {
-      type: Boolean,
-      default: false
+      required: true
     }
-  },
-  computed: {
-    /**
-     * Converts the buttonSize prop into a normalised classname (that fit with our class naming scheme)
-     */
-    buttonSizeClassname: function buttonSizeClassname() {
-      if (this.buttonSize === 'xsmall') {
-        return this.buttonSize.slice(0, 2).toUpperCase() + this.buttonSize.slice(2); // xsmall -> XSmall
-      }
-
-      return this.buttonSize.charAt(0).toUpperCase() + this.buttonSize.slice(1); // capitalize the first letter of the prop
-    }
   }
 });
-// CONCATENATED MODULE: ./src/components/Button.vue?vue&type=script&lang=js&
- /* harmony default export */ var components_Buttonvue_type_script_lang_js_ = (Buttonvue_type_script_lang_js_); 
-// EXTERNAL MODULE: ./src/components/Button.vue?vue&type=style&index=0&lang=scss&module=true&
-var Buttonvue_type_style_index_0_lang_scss_module_true_ = __webpack_require__("4e4b");
-
-// CONCATENATED MODULE: /Users/maryia.radchuk/Documents/work/fozzie-components/node_modules/@vue/cli-service/node_modules/vue-loader/lib/runtime/componentNormalizer.js
+// CONCATENATED MODULE: ./src/components/Action.vue?vue&type=script&lang=js&
+ /* harmony default export */ var components_Actionvue_type_script_lang_js_ = (Actionvue_type_script_lang_js_); 
+// CONCATENATED MODULE: /Users/faye.carter/Documents/fozzie-components/node_modules/@vue/cli-service/node_modules/vue-loader/lib/runtime/componentNormalizer.js
 /* globals __VUE_SSR_CONTEXT__ */
@@ -304,2 +263,124 @@
 
+// CONCATENATED MODULE: ./src/components/Action.vue
+
+
+
+
+
+/* normalize component */
+
+var component = normalizeComponent(
+  components_Actionvue_type_script_lang_js_,
+  Actionvue_type_template_id_5adbff37_render,
+  Actionvue_type_template_id_5adbff37_staticRenderFns,
+  false,
+  null,
+  null,
+  null
+  
+)
+
+/* harmony default export */ var Action = (component.exports);
+// CONCATENATED MODULE: /Users/faye.carter/Documents/fozzie-components/node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"24c0bd0a-vue-loader-template"}!/Users/faye.carter/Documents/fozzie-components/node_modules/@vue/cli-service/node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!/Users/faye.carter/Documents/fozzie-components/node_modules/cache-loader/dist/cjs.js??ref--0-0!/Users/faye.carter/Documents/fozzie-components/node_modules/@vue/cli-service/node_modules/vue-loader/lib??vue-loader-options!./src/components/Link.vue?vue&type=template&id=1356d3f1&
+var Linkvue_type_template_id_1356d3f1_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('a',[_vm._t("default")],2)}
+var Linkvue_type_template_id_1356d3f1_staticRenderFns = []
+
+
+// CONCATENATED MODULE: ./src/components/Link.vue?vue&type=template&id=1356d3f1&
+
+// CONCATENATED MODULE: ./src/components/Link.vue
+
+var script = {}
+
+
+/* normalize component */
+
+var Link_component = normalizeComponent(
+  script,
+  Linkvue_type_template_id_1356d3f1_render,
+  Linkvue_type_template_id_1356d3f1_staticRenderFns,
+  false,
+  null,
+  null,
+  null
+  
+)
+
+/* harmony default export */ var Link = (Link_component.exports);
+// CONCATENATED MODULE: /Users/faye.carter/Documents/fozzie-components/node_modules/cache-loader/dist/cjs.js??ref--12-0!/Users/faye.carter/Documents/fozzie-components/node_modules/thread-loader/dist/cjs.js!/Users/faye.carter/Documents/fozzie-components/node_modules/@vue/cli-plugin-babel/node_modules/babel-loader/lib!/Users/faye.carter/Documents/fozzie-components/node_modules/cache-loader/dist/cjs.js??ref--0-0!/Users/faye.carter/Documents/fozzie-components/node_modules/@vue/cli-service/node_modules/vue-loader/lib??vue-loader-options!./src/components/Button.vue?vue&type=script&lang=js&
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+
+
+/* harmony default export */ var Buttonvue_type_script_lang_js_ = ({
+  name: 'FButton',
+  components: {
+    ActionButton: Action,
+    LinkButton: Link
+  },
+  props: {
+    buttonType: {
+      type: String,
+      default: 'primary'
+    },
+    buttonSize: {
+      type: String,
+      default: 'medium'
+    },
+    isFullWidth: {
+      type: Boolean,
+      default: false
+    },
+    actionType: {
+      type: String,
+      default: 'button'
+    }
+  },
+  computed: {
+    /**
+     * Converts the buttonSize prop into a normalised classname (that fit with our class naming scheme)
+     */
+    buttonSizeClassname: function buttonSizeClassname() {
+      if (this.buttonSize === 'xsmall') {
+        return this.buttonSize.slice(0, 2).toUpperCase() + this.buttonSize.slice(2); // xsmall -> XSmall
+      }
+
+      return this.buttonSize.charAt(0).toUpperCase() + this.buttonSize.slice(1); // capitalize the first letter of the prop
+    },
+
+    /**
+     * Renders `Link` component if a `href` attribute is applied to the component
+     * Renders `Action` component if no `href` attrivute is applied to the component
+     */
+    componentType: function componentType() {
+      return this.$attrs.href ? 'link-button' : 'action-button';
+    },
+
+    /**
+     * Passes `actionType` prop to action button if no `href` attribute is applied to the component
+     */
+    buttonActionType: function buttonActionType() {
+      return !this.$attrs.href ? this.actionType : null;
+    }
+  }
+});
+// CONCATENATED MODULE: ./src/components/Button.vue?vue&type=script&lang=js&
+ /* harmony default export */ var components_Buttonvue_type_script_lang_js_ = (Buttonvue_type_script_lang_js_); 
+// EXTERNAL MODULE: ./src/components/Button.vue?vue&type=style&index=0&lang=scss&module=true&
+var Buttonvue_type_style_index_0_lang_scss_module_true_ = __webpack_require__("4e4b");
+
 // CONCATENATED MODULE: ./src/components/Button.vue
@@ -322,3 +403,3 @@
 
-var component = normalizeComponent(
+var Button_component = normalizeComponent(
   components_Buttonvue_type_script_lang_js_,
@@ -334,7 +415,18 @@ render,
 
-/* harmony default export */ var Button = __webpack_exports__["a"] = (component.exports);
+/* harmony default export */ var Button = __webpack_exports__["a"] = (Button_component.exports);
 
 /***/ }),
 
-/***/ "405b":
+/***/ "4e4b":
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_8_oneOf_0_0_node_modules_vue_cli_service_node_modules_css_loader_dist_cjs_js_ref_8_oneOf_0_1_node_modules_vue_cli_service_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_0_2_node_modules_sass_loader_dist_cjs_js_ref_8_oneOf_0_3_node_modules_sass_loader_dist_cjs_js_ref_14_0_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_cli_service_node_modules_vue_loader_lib_index_js_vue_loader_options_Button_vue_vue_type_style_index_0_lang_scss_module_true___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("9a8d");
+/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_8_oneOf_0_0_node_modules_vue_cli_service_node_modules_css_loader_dist_cjs_js_ref_8_oneOf_0_1_node_modules_vue_cli_service_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_0_2_node_modules_sass_loader_dist_cjs_js_ref_8_oneOf_0_3_node_modules_sass_loader_dist_cjs_js_ref_14_0_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_cli_service_node_modules_vue_loader_lib_index_js_vue_loader_options_Button_vue_vue_type_style_index_0_lang_scss_module_true___WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_mini_css_extract_plugin_dist_loader_js_ref_8_oneOf_0_0_node_modules_vue_cli_service_node_modules_css_loader_dist_cjs_js_ref_8_oneOf_0_1_node_modules_vue_cli_service_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_0_2_node_modules_sass_loader_dist_cjs_js_ref_8_oneOf_0_3_node_modules_sass_loader_dist_cjs_js_ref_14_0_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_cli_service_node_modules_vue_loader_lib_index_js_vue_loader_options_Button_vue_vue_type_style_index_0_lang_scss_module_true___WEBPACK_IMPORTED_MODULE_0__);
+/* harmony reexport (default from non-harmony) */ __webpack_require__.d(__webpack_exports__, "default", function() { return _node_modules_mini_css_extract_plugin_dist_loader_js_ref_8_oneOf_0_0_node_modules_vue_cli_service_node_modules_css_loader_dist_cjs_js_ref_8_oneOf_0_1_node_modules_vue_cli_service_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_0_2_node_modules_sass_loader_dist_cjs_js_ref_8_oneOf_0_3_node_modules_sass_loader_dist_cjs_js_ref_14_0_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_cli_service_node_modules_vue_loader_lib_index_js_vue_loader_options_Button_vue_vue_type_style_index_0_lang_scss_module_true___WEBPACK_IMPORTED_MODULE_0___default.a; });
+ 
+
+/***/ }),
+
+/***/ "7e10":
 /***/ (function(module, exports, __webpack_require__) {
@@ -424,48 +516,10 @@
 
-/***/ "49a2":
+/***/ "9a8d":
 /***/ (function(module, exports, __webpack_require__) {
 
 // extracted by mini-css-extract-plugin
-module.exports = {"o-btn":"Button_o-btn_1KX8u","o-btnLink":"Button_o-btnLink_MQkN7","is-disabled":"Button_is-disabled_1zPQV","o-btn--primary":"Button_o-btn--primary_NRuBe","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--link":"Button_o-btn--link_2f-eF","o-btn--icon":"Button_o-btn--icon_1k-qM","o-btn--sizeLarge":"Button_o-btn--sizeLarge_3A8Ov","o-btn--sizeSmall":"Button_o-btn--sizeSmall_WNBZx","o-btn--sizeXSmall":"Button_o-btn--sizeXSmall_3KRtq","o-btn--fullWidth":"Button_o-btn--fullWidth_1xkfh"};
+module.exports = {"c-screen-sizer":"Button_c-screen-sizer_aacnl","o-btn":"Button_o-btn_1KX8u","o-btnLink":"Button_o-btnLink_MQkN7","is-disabled":"Button_is-disabled_1zPQV","o-btn--primary":"Button_o-btn--primary_NRuBe","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--link":"Button_o-btn--link_2f-eF","o-btn--icon":"Button_o-btn--icon_1k-qM","o-btn--sizeLarge":"Button_o-btn--sizeLarge_3A8Ov","o-btn--sizeSmall":"Button_o-btn--sizeSmall_WNBZx","o-btn--sizeXSmall":"Button_o-btn--sizeXSmall_3KRtq","o-btn--fullWidth":"Button_o-btn--fullWidth_1xkfh","skeletonGradient":"Button_skeletonGradient_2l0Iq"};
 
 /***/ }),
 
-/***/ "4e4b":
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_8_oneOf_0_0_node_modules_vue_cli_service_node_modules_css_loader_dist_cjs_js_ref_8_oneOf_0_1_node_modules_vue_cli_service_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_0_2_node_modules_sass_loader_dist_cjs_js_ref_8_oneOf_0_3_node_modules_sass_loader_dist_cjs_js_ref_14_0_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_cli_service_node_modules_vue_loader_lib_index_js_vue_loader_options_Button_vue_vue_type_style_index_0_lang_scss_module_true___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("49a2");
-/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_8_oneOf_0_0_node_modules_vue_cli_service_node_modules_css_loader_dist_cjs_js_ref_8_oneOf_0_1_node_modules_vue_cli_service_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_0_2_node_modules_sass_loader_dist_cjs_js_ref_8_oneOf_0_3_node_modules_sass_loader_dist_cjs_js_ref_14_0_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_cli_service_node_modules_vue_loader_lib_index_js_vue_loader_options_Button_vue_vue_type_style_index_0_lang_scss_module_true___WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_mini_css_extract_plugin_dist_loader_js_ref_8_oneOf_0_0_node_modules_vue_cli_service_node_modules_css_loader_dist_cjs_js_ref_8_oneOf_0_1_node_modules_vue_cli_service_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_0_2_node_modules_sass_loader_dist_cjs_js_ref_8_oneOf_0_3_node_modules_sass_loader_dist_cjs_js_ref_14_0_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_cli_service_node_modules_vue_loader_lib_index_js_vue_loader_options_Button_vue_vue_type_style_index_0_lang_scss_module_true___WEBPACK_IMPORTED_MODULE_0__);
-/* harmony reexport (default from non-harmony) */ __webpack_require__.d(__webpack_exports__, "default", function() { return _node_modules_mini_css_extract_plugin_dist_loader_js_ref_8_oneOf_0_0_node_modules_vue_cli_service_node_modules_css_loader_dist_cjs_js_ref_8_oneOf_0_1_node_modules_vue_cli_service_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_0_2_node_modules_sass_loader_dist_cjs_js_ref_8_oneOf_0_3_node_modules_sass_loader_dist_cjs_js_ref_14_0_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_cli_service_node_modules_vue_loader_lib_index_js_vue_loader_options_Button_vue_vue_type_style_index_0_lang_scss_module_true___WEBPACK_IMPORTED_MODULE_0___default.a; });
- 
-
-/***/ }),
-
-/***/ "7d15":
-/***/ (function(module, exports) {
-
-var g;
-
-// This works in non-strict mode
-g = (function() {
-	return this;
-})();
-
-try {
-	// This works if eval is allowed (see CSP)
-	g = g || new Function("return this")();
-} catch (e) {
-	// This works if the window reference is available
-	if (typeof window === "object") g = window;
-}
-
-// g can still be undefined, but nothing to do about it...
-// We return undefined, instead of nothing here, so it's
-// easier to handle this case. if(!global) { ...}
-
-module.exports = g;
-
-
-/***/ }),
-
 /***/ "b635":
@@ -509,4 +563,47 @@ /***/ (function(module, __webpack_exports__, __webpack_require__) {
 /* harmony default export */ __webpack_exports__["a"] = (_components_Button_vue__WEBPACK_IMPORTED_MODULE_0__[/* default */ "a"]);
-/* WEBPACK VAR INJECTION */}.call(this, __webpack_require__("7d15")))
+/* WEBPACK VAR INJECTION */}.call(this, __webpack_require__("05e9")))
 
+/***/ }),
+
+/***/ "fa16":
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+
+// CONCATENATED MODULE: /Users/faye.carter/Documents/fozzie-components/node_modules/@vue/cli-service/lib/commands/build/setPublicPath.js
+// This file is imported into lib/wc client bundles.
+
+if (typeof window !== 'undefined') {
+  var currentScript = window.document.currentScript
+  if (true) {
+    var getCurrentScript = __webpack_require__("7e10")
+    currentScript = getCurrentScript()
+
+    // for backward compatibility, because previously we directly included the polyfill
+    if (!('currentScript' in document)) {
+      Object.defineProperty(document, 'currentScript', { get: getCurrentScript })
+    }
+  }
+
+  var src = currentScript && currentScript.src.match(/(.+\/)[^/]+\.js(\?.*)?$/)
+  if (src) {
+    __webpack_require__.p = src[1] // eslint-disable-line
+  }
+}
+
+// Indicate to webpack that this file can be concatenated
+/* harmony default export */ var setPublicPath = (null);
+
+// EXTERNAL MODULE: ./src/index.js
+var src_0 = __webpack_require__("b635");
+
+// CONCATENATED MODULE: /Users/faye.carter/Documents/fozzie-components/node_modules/@vue/cli-service/lib/commands/build/entry-lib.js
+/* concated harmony reexport install */__webpack_require__.d(__webpack_exports__, "install", function() { return src_0["b" /* install */]; });
+
+
+/* harmony default export */ var entry_lib = __webpack_exports__["default"] = (src_0["a" /* default */]);
+
+
+
 /***/ })
@@ -513,0 +610,0 @@

dist/f-button.umd.js

@@ -94,3 +94,3 @@ (function webpackUniversalModuleDefinition(root, factory) {
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = "1c25");
+/******/ 	return __webpack_require__(__webpack_require__.s = "fa16");
 /******/ })
@@ -100,43 +100,27 @@ /************************************************************************/
 
-/***/ "1c25":
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
+/***/ "05e9":
+/***/ (function(module, exports) {
 
-"use strict";
-__webpack_require__.r(__webpack_exports__);
+var g;
 
-// CONCATENATED MODULE: /Users/maryia.radchuk/Documents/work/fozzie-components/node_modules/@vue/cli-service/lib/commands/build/setPublicPath.js
-// This file is imported into lib/wc client bundles.
+// This works in non-strict mode
+g = (function() {
+	return this;
+})();
 
-if (typeof window !== 'undefined') {
-  var currentScript = window.document.currentScript
-  if (true) {
-    var getCurrentScript = __webpack_require__("405b")
-    currentScript = getCurrentScript()
-
-    // for backward compatibility, because previously we directly included the polyfill
-    if (!('currentScript' in document)) {
-      Object.defineProperty(document, 'currentScript', { get: getCurrentScript })
-    }
-  }
-
-  var src = currentScript && currentScript.src.match(/(.+\/)[^/]+\.js(\?.*)?$/)
-  if (src) {
-    __webpack_require__.p = src[1] // eslint-disable-line
-  }
+try {
+	// This works if eval is allowed (see CSP)
+	g = g || new Function("return this")();
+} catch (e) {
+	// This works if the window reference is available
+	if (typeof window === "object") g = window;
 }
 
-// Indicate to webpack that this file can be concatenated
-/* harmony default export */ var setPublicPath = (null);
+// g can still be undefined, but nothing to do about it...
+// We return undefined, instead of nothing here, so it's
+// easier to handle this case. if(!global) { ...}
 
-// EXTERNAL MODULE: ./src/index.js
-var src_0 = __webpack_require__("b635");
+module.exports = g;
 
-// CONCATENATED MODULE: /Users/maryia.radchuk/Documents/work/fozzie-components/node_modules/@vue/cli-service/lib/commands/build/entry-lib.js
-/* concated harmony reexport install */__webpack_require__.d(__webpack_exports__, "install", function() { return src_0["b" /* install */]; });
 
-
-/* harmony default export */ var entry_lib = __webpack_exports__["default"] = (src_0["a" /* default */]);
-
-
-
 /***/ }),
@@ -149,4 +133,4 @@
 
-// CONCATENATED MODULE: /Users/maryia.radchuk/Documents/work/fozzie-components/node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"1948a6fc-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=7a3211e5&
-var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('button',{class:[
+// CONCATENATED MODULE: /Users/faye.carter/Documents/fozzie-components/node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"24c0bd0a-vue-loader-template"}!/Users/faye.carter/Documents/fozzie-components/node_modules/@vue/cli-service/node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!/Users/faye.carter/Documents/fozzie-components/node_modules/cache-loader/dist/cjs.js??ref--0-0!/Users/faye.carter/Documents/fozzie-components/node_modules/@vue/cli-service/node_modules/vue-loader/lib??vue-loader-options!./src/components/Button.vue?vue&type=template&id=0e833e8e&
+var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c(_vm.componentType,{tag:"component",class:[
         _vm.$style['o-btn'],
@@ -156,9 +140,16 @@ _vm.$style[("o-btn--" + _vm.buttonType)],
         (_vm.isFullWidth ? _vm.$style['o-btn--fullWidth'] : '')
-    ],attrs:{"data-test-id":"button-component"}},[_vm._t("default")],2)}
+    ],attrs:{"attributes":_vm.$attrs,"action-type":_vm.buttonActionType,"data-test-id":(_vm.componentType + "-component")}},[_vm._t("default")],2)}
 var staticRenderFns = []
 
 
-// CONCATENATED MODULE: ./src/components/Button.vue?vue&type=template&id=7a3211e5&
+// CONCATENATED MODULE: ./src/components/Button.vue?vue&type=template&id=0e833e8e&
 
-// CONCATENATED MODULE: /Users/maryia.radchuk/Documents/work/fozzie-components/node_modules/cache-loader/dist/cjs.js??ref--12-0!/Users/maryia.radchuk/Documents/work/fozzie-components/node_modules/thread-loader/dist/cjs.js!/Users/maryia.radchuk/Documents/work/fozzie-components/node_modules/@vue/cli-plugin-babel/node_modules/babel-loader/lib!/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=script&lang=js&
+// CONCATENATED MODULE: /Users/faye.carter/Documents/fozzie-components/node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"24c0bd0a-vue-loader-template"}!/Users/faye.carter/Documents/fozzie-components/node_modules/@vue/cli-service/node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!/Users/faye.carter/Documents/fozzie-components/node_modules/cache-loader/dist/cjs.js??ref--0-0!/Users/faye.carter/Documents/fozzie-components/node_modules/@vue/cli-service/node_modules/vue-loader/lib??vue-loader-options!./src/components/Action.vue?vue&type=template&id=5adbff37&
+var Actionvue_type_template_id_5adbff37_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('button',{attrs:{"type":_vm.actionType}},[_vm._t("default")],2)}
+var Actionvue_type_template_id_5adbff37_staticRenderFns = []
+
+
+// CONCATENATED MODULE: ./src/components/Action.vue?vue&type=template&id=5adbff37&
+
+// CONCATENATED MODULE: /Users/faye.carter/Documents/fozzie-components/node_modules/cache-loader/dist/cjs.js??ref--12-0!/Users/faye.carter/Documents/fozzie-components/node_modules/thread-loader/dist/cjs.js!/Users/faye.carter/Documents/fozzie-components/node_modules/@vue/cli-plugin-babel/node_modules/babel-loader/lib!/Users/faye.carter/Documents/fozzie-components/node_modules/cache-loader/dist/cjs.js??ref--0-0!/Users/faye.carter/Documents/fozzie-components/node_modules/@vue/cli-service/node_modules/vue-loader/lib??vue-loader-options!./src/components/Action.vue?vue&type=script&lang=js&
 //
@@ -170,45 +161,13 @@ //
 //
-//
-//
-//
-//
-//
-//
-//
-/* harmony default export */ var Buttonvue_type_script_lang_js_ = ({
-  name: 'FButton',
-  components: {},
+/* harmony default export */ var Actionvue_type_script_lang_js_ = ({
   props: {
-    buttonType: {
+    actionType: {
       type: String,
-      default: 'primary'
-    },
-    buttonSize: {
-      type: String,
-      default: 'medium'
-    },
-    isFullWidth: {
-      type: Boolean,
-      default: false
+      required: true
     }
-  },
-  computed: {
-    /**
-     * Converts the buttonSize prop into a normalised classname (that fit with our class naming scheme)
-     */
-    buttonSizeClassname: function buttonSizeClassname() {
-      if (this.buttonSize === 'xsmall') {
-        return this.buttonSize.slice(0, 2).toUpperCase() + this.buttonSize.slice(2); // xsmall -> XSmall
-      }
-
-      return this.buttonSize.charAt(0).toUpperCase() + this.buttonSize.slice(1); // capitalize the first letter of the prop
-    }
   }
 });
-// CONCATENATED MODULE: ./src/components/Button.vue?vue&type=script&lang=js&
- /* harmony default export */ var components_Buttonvue_type_script_lang_js_ = (Buttonvue_type_script_lang_js_); 
-// EXTERNAL MODULE: ./src/components/Button.vue?vue&type=style&index=0&lang=scss&module=true&
-var Buttonvue_type_style_index_0_lang_scss_module_true_ = __webpack_require__("4e4b");
-
-// CONCATENATED MODULE: /Users/maryia.radchuk/Documents/work/fozzie-components/node_modules/@vue/cli-service/node_modules/vue-loader/lib/runtime/componentNormalizer.js
+// CONCATENATED MODULE: ./src/components/Action.vue?vue&type=script&lang=js&
+ /* harmony default export */ var components_Actionvue_type_script_lang_js_ = (Actionvue_type_script_lang_js_); 
+// CONCATENATED MODULE: /Users/faye.carter/Documents/fozzie-components/node_modules/@vue/cli-service/node_modules/vue-loader/lib/runtime/componentNormalizer.js
 /* globals __VUE_SSR_CONTEXT__ */
@@ -313,2 +272,124 @@
 
+// CONCATENATED MODULE: ./src/components/Action.vue
+
+
+
+
+
+/* normalize component */
+
+var component = normalizeComponent(
+  components_Actionvue_type_script_lang_js_,
+  Actionvue_type_template_id_5adbff37_render,
+  Actionvue_type_template_id_5adbff37_staticRenderFns,
+  false,
+  null,
+  null,
+  null
+  
+)
+
+/* harmony default export */ var Action = (component.exports);
+// CONCATENATED MODULE: /Users/faye.carter/Documents/fozzie-components/node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"24c0bd0a-vue-loader-template"}!/Users/faye.carter/Documents/fozzie-components/node_modules/@vue/cli-service/node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!/Users/faye.carter/Documents/fozzie-components/node_modules/cache-loader/dist/cjs.js??ref--0-0!/Users/faye.carter/Documents/fozzie-components/node_modules/@vue/cli-service/node_modules/vue-loader/lib??vue-loader-options!./src/components/Link.vue?vue&type=template&id=1356d3f1&
+var Linkvue_type_template_id_1356d3f1_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('a',[_vm._t("default")],2)}
+var Linkvue_type_template_id_1356d3f1_staticRenderFns = []
+
+
+// CONCATENATED MODULE: ./src/components/Link.vue?vue&type=template&id=1356d3f1&
+
+// CONCATENATED MODULE: ./src/components/Link.vue
+
+var script = {}
+
+
+/* normalize component */
+
+var Link_component = normalizeComponent(
+  script,
+  Linkvue_type_template_id_1356d3f1_render,
+  Linkvue_type_template_id_1356d3f1_staticRenderFns,
+  false,
+  null,
+  null,
+  null
+  
+)
+
+/* harmony default export */ var Link = (Link_component.exports);
+// CONCATENATED MODULE: /Users/faye.carter/Documents/fozzie-components/node_modules/cache-loader/dist/cjs.js??ref--12-0!/Users/faye.carter/Documents/fozzie-components/node_modules/thread-loader/dist/cjs.js!/Users/faye.carter/Documents/fozzie-components/node_modules/@vue/cli-plugin-babel/node_modules/babel-loader/lib!/Users/faye.carter/Documents/fozzie-components/node_modules/cache-loader/dist/cjs.js??ref--0-0!/Users/faye.carter/Documents/fozzie-components/node_modules/@vue/cli-service/node_modules/vue-loader/lib??vue-loader-options!./src/components/Button.vue?vue&type=script&lang=js&
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+
+
+/* harmony default export */ var Buttonvue_type_script_lang_js_ = ({
+  name: 'FButton',
+  components: {
+    ActionButton: Action,
+    LinkButton: Link
+  },
+  props: {
+    buttonType: {
+      type: String,
+      default: 'primary'
+    },
+    buttonSize: {
+      type: String,
+      default: 'medium'
+    },
+    isFullWidth: {
+      type: Boolean,
+      default: false
+    },
+    actionType: {
+      type: String,
+      default: 'button'
+    }
+  },
+  computed: {
+    /**
+     * Converts the buttonSize prop into a normalised classname (that fit with our class naming scheme)
+     */
+    buttonSizeClassname: function buttonSizeClassname() {
+      if (this.buttonSize === 'xsmall') {
+        return this.buttonSize.slice(0, 2).toUpperCase() + this.buttonSize.slice(2); // xsmall -> XSmall
+      }
+
+      return this.buttonSize.charAt(0).toUpperCase() + this.buttonSize.slice(1); // capitalize the first letter of the prop
+    },
+
+    /**
+     * Renders `Link` component if a `href` attribute is applied to the component
+     * Renders `Action` component if no `href` attrivute is applied to the component
+     */
+    componentType: function componentType() {
+      return this.$attrs.href ? 'link-button' : 'action-button';
+    },
+
+    /**
+     * Passes `actionType` prop to action button if no `href` attribute is applied to the component
+     */
+    buttonActionType: function buttonActionType() {
+      return !this.$attrs.href ? this.actionType : null;
+    }
+  }
+});
+// CONCATENATED MODULE: ./src/components/Button.vue?vue&type=script&lang=js&
+ /* harmony default export */ var components_Buttonvue_type_script_lang_js_ = (Buttonvue_type_script_lang_js_); 
+// EXTERNAL MODULE: ./src/components/Button.vue?vue&type=style&index=0&lang=scss&module=true&
+var Buttonvue_type_style_index_0_lang_scss_module_true_ = __webpack_require__("4e4b");
+
 // CONCATENATED MODULE: ./src/components/Button.vue
@@ -331,3 +412,3 @@
 
-var component = normalizeComponent(
+var Button_component = normalizeComponent(
   components_Buttonvue_type_script_lang_js_,
@@ -343,7 +424,18 @@ render,
 
-/* harmony default export */ var Button = __webpack_exports__["a"] = (component.exports);
+/* harmony default export */ var Button = __webpack_exports__["a"] = (Button_component.exports);
 
 /***/ }),
 
-/***/ "405b":
+/***/ "4e4b":
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_8_oneOf_0_0_node_modules_vue_cli_service_node_modules_css_loader_dist_cjs_js_ref_8_oneOf_0_1_node_modules_vue_cli_service_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_0_2_node_modules_sass_loader_dist_cjs_js_ref_8_oneOf_0_3_node_modules_sass_loader_dist_cjs_js_ref_14_0_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_cli_service_node_modules_vue_loader_lib_index_js_vue_loader_options_Button_vue_vue_type_style_index_0_lang_scss_module_true___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("9a8d");
+/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_8_oneOf_0_0_node_modules_vue_cli_service_node_modules_css_loader_dist_cjs_js_ref_8_oneOf_0_1_node_modules_vue_cli_service_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_0_2_node_modules_sass_loader_dist_cjs_js_ref_8_oneOf_0_3_node_modules_sass_loader_dist_cjs_js_ref_14_0_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_cli_service_node_modules_vue_loader_lib_index_js_vue_loader_options_Button_vue_vue_type_style_index_0_lang_scss_module_true___WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_mini_css_extract_plugin_dist_loader_js_ref_8_oneOf_0_0_node_modules_vue_cli_service_node_modules_css_loader_dist_cjs_js_ref_8_oneOf_0_1_node_modules_vue_cli_service_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_0_2_node_modules_sass_loader_dist_cjs_js_ref_8_oneOf_0_3_node_modules_sass_loader_dist_cjs_js_ref_14_0_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_cli_service_node_modules_vue_loader_lib_index_js_vue_loader_options_Button_vue_vue_type_style_index_0_lang_scss_module_true___WEBPACK_IMPORTED_MODULE_0__);
+/* harmony reexport (default from non-harmony) */ __webpack_require__.d(__webpack_exports__, "default", function() { return _node_modules_mini_css_extract_plugin_dist_loader_js_ref_8_oneOf_0_0_node_modules_vue_cli_service_node_modules_css_loader_dist_cjs_js_ref_8_oneOf_0_1_node_modules_vue_cli_service_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_0_2_node_modules_sass_loader_dist_cjs_js_ref_8_oneOf_0_3_node_modules_sass_loader_dist_cjs_js_ref_14_0_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_cli_service_node_modules_vue_loader_lib_index_js_vue_loader_options_Button_vue_vue_type_style_index_0_lang_scss_module_true___WEBPACK_IMPORTED_MODULE_0___default.a; });
+ 
+
+/***/ }),
+
+/***/ "7e10":
 /***/ (function(module, exports, __webpack_require__) {
@@ -433,48 +525,10 @@
 
-/***/ "49a2":
+/***/ "9a8d":
 /***/ (function(module, exports, __webpack_require__) {
 
 // extracted by mini-css-extract-plugin
-module.exports = {"o-btn":"Button_o-btn_1KX8u","o-btnLink":"Button_o-btnLink_MQkN7","is-disabled":"Button_is-disabled_1zPQV","o-btn--primary":"Button_o-btn--primary_NRuBe","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--link":"Button_o-btn--link_2f-eF","o-btn--icon":"Button_o-btn--icon_1k-qM","o-btn--sizeLarge":"Button_o-btn--sizeLarge_3A8Ov","o-btn--sizeSmall":"Button_o-btn--sizeSmall_WNBZx","o-btn--sizeXSmall":"Button_o-btn--sizeXSmall_3KRtq","o-btn--fullWidth":"Button_o-btn--fullWidth_1xkfh"};
+module.exports = {"c-screen-sizer":"Button_c-screen-sizer_aacnl","o-btn":"Button_o-btn_1KX8u","o-btnLink":"Button_o-btnLink_MQkN7","is-disabled":"Button_is-disabled_1zPQV","o-btn--primary":"Button_o-btn--primary_NRuBe","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--link":"Button_o-btn--link_2f-eF","o-btn--icon":"Button_o-btn--icon_1k-qM","o-btn--sizeLarge":"Button_o-btn--sizeLarge_3A8Ov","o-btn--sizeSmall":"Button_o-btn--sizeSmall_WNBZx","o-btn--sizeXSmall":"Button_o-btn--sizeXSmall_3KRtq","o-btn--fullWidth":"Button_o-btn--fullWidth_1xkfh","skeletonGradient":"Button_skeletonGradient_2l0Iq"};
 
 /***/ }),
 
-/***/ "4e4b":
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_8_oneOf_0_0_node_modules_vue_cli_service_node_modules_css_loader_dist_cjs_js_ref_8_oneOf_0_1_node_modules_vue_cli_service_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_0_2_node_modules_sass_loader_dist_cjs_js_ref_8_oneOf_0_3_node_modules_sass_loader_dist_cjs_js_ref_14_0_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_cli_service_node_modules_vue_loader_lib_index_js_vue_loader_options_Button_vue_vue_type_style_index_0_lang_scss_module_true___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("49a2");
-/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_8_oneOf_0_0_node_modules_vue_cli_service_node_modules_css_loader_dist_cjs_js_ref_8_oneOf_0_1_node_modules_vue_cli_service_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_0_2_node_modules_sass_loader_dist_cjs_js_ref_8_oneOf_0_3_node_modules_sass_loader_dist_cjs_js_ref_14_0_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_cli_service_node_modules_vue_loader_lib_index_js_vue_loader_options_Button_vue_vue_type_style_index_0_lang_scss_module_true___WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_mini_css_extract_plugin_dist_loader_js_ref_8_oneOf_0_0_node_modules_vue_cli_service_node_modules_css_loader_dist_cjs_js_ref_8_oneOf_0_1_node_modules_vue_cli_service_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_0_2_node_modules_sass_loader_dist_cjs_js_ref_8_oneOf_0_3_node_modules_sass_loader_dist_cjs_js_ref_14_0_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_cli_service_node_modules_vue_loader_lib_index_js_vue_loader_options_Button_vue_vue_type_style_index_0_lang_scss_module_true___WEBPACK_IMPORTED_MODULE_0__);
-/* harmony reexport (default from non-harmony) */ __webpack_require__.d(__webpack_exports__, "default", function() { return _node_modules_mini_css_extract_plugin_dist_loader_js_ref_8_oneOf_0_0_node_modules_vue_cli_service_node_modules_css_loader_dist_cjs_js_ref_8_oneOf_0_1_node_modules_vue_cli_service_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_0_2_node_modules_sass_loader_dist_cjs_js_ref_8_oneOf_0_3_node_modules_sass_loader_dist_cjs_js_ref_14_0_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_cli_service_node_modules_vue_loader_lib_index_js_vue_loader_options_Button_vue_vue_type_style_index_0_lang_scss_module_true___WEBPACK_IMPORTED_MODULE_0___default.a; });
- 
-
-/***/ }),
-
-/***/ "7d15":
-/***/ (function(module, exports) {
-
-var g;
-
-// This works in non-strict mode
-g = (function() {
-	return this;
-})();
-
-try {
-	// This works if eval is allowed (see CSP)
-	g = g || new Function("return this")();
-} catch (e) {
-	// This works if the window reference is available
-	if (typeof window === "object") g = window;
-}
-
-// g can still be undefined, but nothing to do about it...
-// We return undefined, instead of nothing here, so it's
-// easier to handle this case. if(!global) { ...}
-
-module.exports = g;
-
-
-/***/ }),
-
 /***/ "b635":
@@ -518,4 +572,47 @@ /***/ (function(module, __webpack_exports__, __webpack_require__) {
 /* harmony default export */ __webpack_exports__["a"] = (_components_Button_vue__WEBPACK_IMPORTED_MODULE_0__[/* default */ "a"]);
-/* WEBPACK VAR INJECTION */}.call(this, __webpack_require__("7d15")))
+/* WEBPACK VAR INJECTION */}.call(this, __webpack_require__("05e9")))
 
+/***/ }),
+
+/***/ "fa16":
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+
+// CONCATENATED MODULE: /Users/faye.carter/Documents/fozzie-components/node_modules/@vue/cli-service/lib/commands/build/setPublicPath.js
+// This file is imported into lib/wc client bundles.
+
+if (typeof window !== 'undefined') {
+  var currentScript = window.document.currentScript
+  if (true) {
+    var getCurrentScript = __webpack_require__("7e10")
+    currentScript = getCurrentScript()
+
+    // for backward compatibility, because previously we directly included the polyfill
+    if (!('currentScript' in document)) {
+      Object.defineProperty(document, 'currentScript', { get: getCurrentScript })
+    }
+  }
+
+  var src = currentScript && currentScript.src.match(/(.+\/)[^/]+\.js(\?.*)?$/)
+  if (src) {
+    __webpack_require__.p = src[1] // eslint-disable-line
+  }
+}
+
+// Indicate to webpack that this file can be concatenated
+/* harmony default export */ var setPublicPath = (null);
+
+// EXTERNAL MODULE: ./src/index.js
+var src_0 = __webpack_require__("b635");
+
+// CONCATENATED MODULE: /Users/faye.carter/Documents/fozzie-components/node_modules/@vue/cli-service/lib/commands/build/entry-lib.js
+/* concated harmony reexport install */__webpack_require__.d(__webpack_exports__, "install", function() { return src_0["b" /* install */]; });
+
+
+/* harmony default export */ var entry_lib = __webpack_exports__["default"] = (src_0["a" /* default */]);
+
+
+
 /***/ })
@@ -522,0 +619,0 @@

dist/f-button.umd.min.js

@@ -1,2 +0,2 @@
-(function(t,e){"object"===typeof exports&&"object"===typeof module?module.exports=e():"function"===typeof define&&define.amd?define([],e):"object"===typeof exports?exports["f-button"]=e():t["f-button"]=e()})("undefined"!==typeof self?self:this,(function(){return function(t){var e={};function n(o){if(e[o])return e[o].exports;var r=e[o]={i:o,l:!1,exports:{}};return t[o].call(r.exports,r,r.exports,n),r.l=!0,r.exports}return n.m=t,n.c=e,n.d=function(t,e,o){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:o})},n.r=function(t){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"===typeof t&&t&&t.__esModule)return t;var o=Object.create(null);if(n.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var r in t)n.d(o,r,function(e){return t[e]}.bind(null,r));return o},n.n=function(t){var e=t&&t.__esModule?function(){return t["default"]}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s="1c25")}({"1c25":function(t,e,n){"use strict";if(n.r(e),"undefined"!==typeof window){var o=window.document.currentScript,r=n("405b");o=r(),"currentScript"in document||Object.defineProperty(document,"currentScript",{get:r});var i=o&&o.src.match(/(.+\/)[^/]+\.js(\?.*)?$/);i&&(n.p=i[1])}var u=n("b635");n.d(e,"install",(function(){return u["b"]}));e["default"]=u["a"]},"2a7d":function(t,e,n){"use strict";var o=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("button",{class:[t.$style["o-btn"],t.$style["o-btn--"+t.buttonType],t.$style["o-btn--size"+t.buttonSizeClassname],t.isFullWidth?t.$style["o-btn--fullWidth"]:""],attrs:{"data-test-id":"button-component"}},[t._t("default")],2)},r=[],i={name:"FButton",components:{},props:{buttonType:{type:String,default:"primary"},buttonSize:{type:String,default:"medium"},isFullWidth:{type:Boolean,default:!1}},computed:{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)}}},u=i,c=n("4e4b");function s(t,e,n,o,r,i,u,c){var s,a="function"===typeof t?t.options:t;if(e&&(a.render=e,a.staticRenderFns=n,a._compiled=!0),o&&(a.functional=!0),i&&(a._scopeId="data-v-"+i),u?(s=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__),r&&r.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(u)},a._ssrRegister=s):r&&(s=c?function(){r.call(this,(a.functional?this.parent:this).$root.$options.shadowRoot)}:r),s)if(a.functional){a._injectStyles=s;var l=a.render;a.render=function(t,e){return s.call(e),l(t,e)}}else{var f=a.beforeCreate;a.beforeCreate=f?[].concat(f,s):[s]}return{exports:t,options:a}}function a(t){this["$style"]=c["default"].locals||c["default"]}var l=s(u,o,r,!1,a,null,null);e["a"]=l.exports},"405b":function(t,e,n){var o,r,i;(function(n,u){r=[],o=u,i="function"===typeof o?o.apply(e,r):o,void 0===i||(t.exports=i)})("undefined"!==typeof self&&self,(function(){function t(){var e=Object.getOwnPropertyDescriptor(document,"currentScript");if(!e&&"currentScript"in document&&document.currentScript)return document.currentScript;if(e&&e.get!==t&&document.currentScript)return document.currentScript;try{throw new Error}catch(p){var n,o,r,i=/.*at [^(]*\((.*):(.+):(.+)\)$/gi,u=/@([^@]*):(\d+):(\d+)\s*$/gi,c=i.exec(p.stack)||u.exec(p.stack),s=c&&c[1]||!1,a=c&&c[2]||!1,l=document.location.href.replace(document.location.hash,""),f=document.getElementsByTagName("script");s===l&&(n=document.documentElement.outerHTML,o=new RegExp("(?:[^\\n]+?\\n){0,"+(a-2)+"}[^<]*<script>([\\d\\D]*?)<\\/script>[\\d\\D]*","i"),r=n.replace(o,"$1").trim());for(var d=0;d<f.length;d++){if("interactive"===f[d].readyState)return f[d];if(f[d].src===s)return f[d];if(s===l&&f[d].innerHTML&&f[d].innerHTML.trim()===r)return f[d]}return null}}return t}))},"49a2":function(t,e,n){t.exports={"o-btn":"Button_o-btn_1KX8u","o-btnLink":"Button_o-btnLink_MQkN7","is-disabled":"Button_is-disabled_1zPQV","o-btn--primary":"Button_o-btn--primary_NRuBe","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--link":"Button_o-btn--link_2f-eF","o-btn--icon":"Button_o-btn--icon_1k-qM","o-btn--sizeLarge":"Button_o-btn--sizeLarge_3A8Ov","o-btn--sizeSmall":"Button_o-btn--sizeSmall_WNBZx","o-btn--sizeXSmall":"Button_o-btn--sizeXSmall_3KRtq","o-btn--fullWidth":"Button_o-btn--fullWidth_1xkfh"}},"4e4b":function(t,e,n){"use strict";var o=n("49a2"),r=n.n(o);n.d(e,"default",(function(){return r.a}))},"7d15":function(t,e){var n;n=function(){return this}();try{n=n||new Function("return this")()}catch(o){"object"===typeof window&&(n=window)}t.exports=n},b635:function(t,e,n){"use strict";(function(t){n.d(e,"b",(function(){return r}));var o=n("2a7d");function r(t){r.installed||(r.installed=!0,t.component("FButton",o["a"]))}var i={install:r},u=null;"undefined"!==typeof window?u=window.Vue:"undefined"!==typeof t&&(u=t.Vue),u&&u.use(i),e["a"]=o["a"]}).call(this,n("7d15"))}})}));
+(function(t,e){"object"===typeof exports&&"object"===typeof module?module.exports=e():"function"===typeof define&&define.amd?define([],e):"object"===typeof exports?exports["f-button"]=e():t["f-button"]=e()})("undefined"!==typeof self?self:this,(function(){return function(t){var e={};function n(o){if(e[o])return e[o].exports;var r=e[o]={i:o,l:!1,exports:{}};return t[o].call(r.exports,r,r.exports,n),r.l=!0,r.exports}return n.m=t,n.c=e,n.d=function(t,e,o){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:o})},n.r=function(t){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"===typeof t&&t&&t.__esModule)return t;var o=Object.create(null);if(n.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var r in t)n.d(o,r,function(e){return t[e]}.bind(null,r));return o},n.n=function(t){var e=t&&t.__esModule?function(){return t["default"]}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s="fa16")}({"05e9":function(t,e){var n;n=function(){return this}();try{n=n||new Function("return this")()}catch(o){"object"===typeof window&&(n=window)}t.exports=n},"2a7d":function(t,e,n){"use strict";var o=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n(t.componentType,{tag:"component",class:[t.$style["o-btn"],t.$style["o-btn--"+t.buttonType],t.$style["o-btn--size"+t.buttonSizeClassname],t.isFullWidth?t.$style["o-btn--fullWidth"]:""],attrs:{attributes:t.$attrs,"action-type":t.buttonActionType,"data-test-id":t.componentType+"-component"}},[t._t("default")],2)},r=[],i=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("button",{attrs:{type:t.actionType}},[t._t("default")],2)},u=[],c={props:{actionType:{type:String,required:!0}}},a=c;function s(t,e,n,o,r,i,u,c){var a,s="function"===typeof t?t.options:t;if(e&&(s.render=e,s.staticRenderFns=n,s._compiled=!0),o&&(s.functional=!0),i&&(s._scopeId="data-v-"+i),u?(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__),r&&r.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(u)},s._ssrRegister=a):r&&(a=c?function(){r.call(this,(s.functional?this.parent:this).$root.$options.shadowRoot)}:r),a)if(s.functional){s._injectStyles=a;var l=s.render;s.render=function(t,e){return a.call(e),l(t,e)}}else{var f=s.beforeCreate;s.beforeCreate=f?[].concat(f,a):[a]}return{exports:t,options:s}}var l=s(a,i,u,!1,null,null,null),f=l.exports,d=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("a",[t._t("default")],2)},p=[],b={},_=s(b,d,p,!1,null,null,null),y=_.exports,m={name:"FButton",components:{ActionButton:f,LinkButton:y},props:{buttonType:{type:String,default:"primary"},buttonSize:{type:String,default:"medium"},isFullWidth:{type:Boolean,default:!1},actionType:{type:String,default:"button"}},computed:{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":"action-button"},buttonActionType:function(){return this.$attrs.href?null:this.actionType}}},h=m,v=n("4e4b");function S(t){this["$style"]=v["default"].locals||v["default"]}var g=s(h,o,r,!1,S,null,null);e["a"]=g.exports},"4e4b":function(t,e,n){"use strict";var o=n("9a8d"),r=n.n(o);n.d(e,"default",(function(){return r.a}))},"7e10":function(t,e,n){var o,r,i;(function(n,u){r=[],o=u,i="function"===typeof o?o.apply(e,r):o,void 0===i||(t.exports=i)})("undefined"!==typeof self&&self,(function(){function t(){var e=Object.getOwnPropertyDescriptor(document,"currentScript");if(!e&&"currentScript"in document&&document.currentScript)return document.currentScript;if(e&&e.get!==t&&document.currentScript)return document.currentScript;try{throw new Error}catch(p){var n,o,r,i=/.*at [^(]*\((.*):(.+):(.+)\)$/gi,u=/@([^@]*):(\d+):(\d+)\s*$/gi,c=i.exec(p.stack)||u.exec(p.stack),a=c&&c[1]||!1,s=c&&c[2]||!1,l=document.location.href.replace(document.location.hash,""),f=document.getElementsByTagName("script");a===l&&(n=document.documentElement.outerHTML,o=new RegExp("(?:[^\\n]+?\\n){0,"+(s-2)+"}[^<]*<script>([\\d\\D]*?)<\\/script>[\\d\\D]*","i"),r=n.replace(o,"$1").trim());for(var d=0;d<f.length;d++){if("interactive"===f[d].readyState)return f[d];if(f[d].src===a)return f[d];if(a===l&&f[d].innerHTML&&f[d].innerHTML.trim()===r)return f[d]}return null}}return t}))},"9a8d":function(t,e,n){t.exports={"c-screen-sizer":"Button_c-screen-sizer_aacnl","o-btn":"Button_o-btn_1KX8u","o-btnLink":"Button_o-btnLink_MQkN7","is-disabled":"Button_is-disabled_1zPQV","o-btn--primary":"Button_o-btn--primary_NRuBe","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--link":"Button_o-btn--link_2f-eF","o-btn--icon":"Button_o-btn--icon_1k-qM","o-btn--sizeLarge":"Button_o-btn--sizeLarge_3A8Ov","o-btn--sizeSmall":"Button_o-btn--sizeSmall_WNBZx","o-btn--sizeXSmall":"Button_o-btn--sizeXSmall_3KRtq","o-btn--fullWidth":"Button_o-btn--fullWidth_1xkfh",skeletonGradient:"Button_skeletonGradient_2l0Iq"}},b635:function(t,e,n){"use strict";(function(t){n.d(e,"b",(function(){return r}));var o=n("2a7d");function r(t){r.installed||(r.installed=!0,t.component("FButton",o["a"]))}var i={install:r},u=null;"undefined"!==typeof window?u=window.Vue:"undefined"!==typeof t&&(u=t.Vue),u&&u.use(i),e["a"]=o["a"]}).call(this,n("05e9"))},fa16:function(t,e,n){"use strict";if(n.r(e),"undefined"!==typeof window){var o=window.document.currentScript,r=n("7e10");o=r(),"currentScript"in document||Object.defineProperty(document,"currentScript",{get:r});var i=o&&o.src.match(/(.+\/)[^/]+\.js(\?.*)?$/);i&&(n.p=i[1])}var u=n("b635");n.d(e,"install",(function(){return u["b"]}));e["default"]=u["a"]}})}));
 //# sourceMappingURL=f-button.umd.min.js.map

package.json

 {
   "name": "@justeat/f-button",
   "description": "Fozzie Button – The generic button component",
-  "version": "0.4.1",
+  "version": "0.5.0",
   "main": "dist/f-button.umd.min.js",
@@ -31,3 +31,2 @@ "files": [
     "build": "vue-cli-service build --target lib --name f-button ./src/index.js",
-    "demo": "vue serve --port 8080 ./src/demo/Index.vue",
     "lint": "vue-cli-service lint",
@@ -38,7 +37,11 @@ "lint:fix": "yarn lint --fix",
     "test": "vue-cli-service test:unit",
-    "test-component:chrome": "run-p --race demo webdriver:delay:chrome",
-    "test:wait-for-server": "node ../../test/infrastructure/healthcheck.js",
-    "webdriver:delay:chrome": "yarn test:wait-for-server && yarn webdriver:start:chrome",
-    "webdriver:start:chrome": "wdio ../../wdio.conf.js"
+    "test-component:chrome": "wdio ../../../../wdio.conf.js --suite component",
+    "test-a11y:chrome": "wdio ../../../../wdio.conf.js --suite a11y"
   },
+  "scriptsInfo": {
+    "test-component:chrome": "Runs the functional test suite against Chrome.",
+    "test:wait-for-server": "Waits for Storybook to be served.",
+    "webdriver:delay:chrome": "Waits for Storybook to start before running the Chrome webdriver to prevent a race condition. Not for direct use.",
+    "webdriver:start:chrome": "Runs the Chrome webdriver. Not for direct use."
+  },
   "browserslist": [
@@ -45,0 +48,0 @@ "extends @justeat/browserslist-config-fozzie"

README.md

@@ -5,3 +5,3 @@
 
-  <img width="125" alt="Fozzie Bear" src="../../bear.png" />
+  <img width="125" alt="Fozzie Bear" src="../../../../bear.png" />
 
@@ -21,65 +21,108 @@ <p>The generic button component</p>
 
-1.  Install the module using NPM or Yarn:
+### Installation
 
-    ```bash
-    yarn add @justeat/f-button
-    ```
+This package can be installed using npm or yarn:
 
-    ```bash
-    npm install @justeat/f-button
-    ```
+```sh
+yarn add @justeat/f-button
+```
 
-2.  Import the component
+```sh
+npm install @justeat/f-button
+```
 
-    You can import it in your Vue SFC like this (please note that styles have to be imported separately):
+### Vue Applications
 
-    ```
-    import FButton from '@justeat/f-button';
-    import '@justeat/f-button/dist/f-button.css';
+You can import it in your Vue SFC like this (please note that styles have to be imported separately):
 
-    export default {
-        components: {
-            FButton
-        }
+
+```js
+import FButton from '@justeat/f-button';
+import '@justeat/f-button/dist/f-button.css';
+
+export default {
+    components: {
+        FButton
     }
-    ```
+}
+```
 
-    If you are using Webpack, you can import the component dynamically to separate the `f-button` bundle from the main `bundle.client.js`:
+If you are using Webpack, you can import the component dynamically to separate the `f-button` bundle from the main `bundle.client.js`:
 
-    ```
-    import '@justeat/f-button/dist/f-button.css';
+```js
+import '@justeat/f-button/dist/f-button.css';
 
-    export default {
-        components: {
-            ...
-            FButton: () => import(/* webpackChunkName: "f-button" */ '@justeat/f-button')
-        }
+export default {
+    components: {
+        ...
+        FButton: () => import(/* webpackChunkName: "f-button" */ '@justeat/f-button')
     }
+}
 
-    ```
+```
 
-3.  Call the component in your template:
+Call the component in your template:
 
-    ```
-    <f-button buttonType="secondary" buttonSize="small" isFullWidth />
-    ```
+```js
+<f-button buttonType="secondary" buttonSize="small">Button Text</f-button>
+```
 
-    Accepted properties:
-    - buttonType - primary, secondary, outline, ghost, link, icon, default is primary
-    - buttonSize - large, medium, small, xsmall, default is medium
-    - isFullWidth - true/false, default is false
+## Configuration
 
+### Props
+
+`f-button` has a number of props that allow you to customise its functionality.
+
+The props that can be defined are as follows:
+
+| Prop  | Type  | Required | Default | Description |
+| ----- | ----- | -------- |------- | ----------- |
+| `buttonType` | `String` | No |`primary` | Sets the modifier theme for styling. Options: `primary`, `secondary`, `outline`, `ghost`, `link`, `icon`. |
+| `buttonSize` | `String` | No |`medium` | Sets the size `large`, `medium`, `small`, `xsmall` |
+| `isFullWidth` | `Boolean` | No |  `false` | Controls whether or not to apply fullWidth modifier class |
+
+### CSS Classes
+
+`f-button` has its own styles which are scoped to the component using CSS modules to prevent conflicts with existing styles on the page.
+
+### Events
+
+You can use the `.native` modifier for `v-on` to listen directly to a native event on the root element.
+
+```js
+<f-button @click.native="myMethod">Button Text</f-button>
+```
+
 ## Development
 
-Running below `yarn` commands from the component folder, starts a development
-server displaying a preview example of the component implementation.
+Start by cloning the repository and installing the required dependencies:
 
-```bash
-# cd /packages/f-button
-yarn install
+```sh
+$ git clone [e-mail]:justeat/fozzie-components.git
+$ cd fozzie-components
+$ yarn
+```
 
-# followed by
-yarn demo
+Change directory to the `f-button` package:
+
+```sh
+$ cd packages/components/atoms/f-button
 ```
 
-## Documentation to be completed once module is in stable state.
+### Running storybook
+
+Storybook can be used to develop new and existing components.
+
+To start storybook:
+
+> Please ensure you are in the f-button directory as outlined in the above instructions.
+
+```sh
+# cd to the storybook package
+$ cd ../../../storybook
+
+# Run storybook
+$ yarn storybook:serve
+```
+
+This will build and serve storybook at [http://localhost:8080](http://localhost:8080).

test-utils/component-objects/f-button.component.js

@@ -1,2 +0,2 @@
-const buttonComponent = () => $('[data-test-id="button-component"]');
+const buttonComponent = () => $('[data-test-id="action-button-component"]');
 
@@ -3,0 +3,0 @@ exports.waitForButtonComponent = () => buttonComponent().waitForExist();

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

172815

increased by19.37%

Lines of code

1059

increased by17.93%

Number of lines in readme file

127

increased by51.19%

No dependency changes