@designcrowd/fe-shared-lib 1.2.17-ml-currency-3 → 1.2.18-ast-upsell-4

package/Dockerfile

@@ -29,7 +29,7 @@ COPY .npmignore ./
 RUN npm run bundle-translation
 
 RUN mkdir artifacts
-RUN npm publish --otp=810416 || (touch artifacts/npm_publish_failed && exit 1)
+RUN npm publish || (touch artifacts/npm_publish_failed && exit 1)
 RUN cp package.json artifacts/
 
 ENTRYPOINT ["/bin/echo", "Nothing to do."]

package/index.js

@@ -54,3 +54,7 @@ export { default as HashRouteModal } from './src/atoms/components/Modal/HashRout
 export { default as Select } from './src/atoms/components/Select/Select.vue';
 export { default as NumberStepper } from './src/atoms/components/NumberStepper/NumberStepper.vue';
 export { default as CopyToClipboardText } from './src/atoms/components/CopyToClipboardText/CopyToClipboardText.vue';
+export { default as WebDesignSupportUpsell } from './src/atoms/components/Upsell/WebDesignSupport.vue';
+export { default as DigitalBusinessCardUpsell } from './src/atoms/components/Upsell/DigitalBusinessCard.vue';
+export { default as LinkInBioUpsell } from './src/atoms/components/Upsell/LinkInBio.vue';
+export { default as UpgradeWebsiteUpsell } from './src/atoms/components/Upsell/UpgradeWebsite.vue';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@designcrowd/fe-shared-lib",
-  "version": "1.2.17-ml-currency-3",
+  "version": "1.2.18-ast-upsell-4",
   "scripts": {
     "start": "run-p storybook watch:translation",
     "build": "npm run build:css --production",

package/public/css/tailwind-brandCrowd.css

@@ -699,6 +699,9 @@ video {
 .theme-brandCrowd .tw-mb-4 {
   margin-bottom: 1rem;
 }
+.theme-brandCrowd .tw-mb-5 {
+  margin-bottom: 1.25rem;
+}
 .theme-brandCrowd .tw-mb-6 {
   margin-bottom: 1.5rem;
 }
@@ -756,6 +759,9 @@ video {
 .theme-brandCrowd .tw-mt-4 {
   margin-top: 1rem;
 }
+.theme-brandCrowd .tw-mt-5 {
+  margin-top: 1.25rem;
+}
 .theme-brandCrowd .tw-mt-8 {
   margin-top: 2rem;
 }
@@ -923,6 +929,9 @@ video {
 .theme-brandCrowd .tw-max-w-xl {
   max-width: 36rem;
 }
+.theme-brandCrowd .tw-flex-1 {
+  flex: 1 1 0%;
+}
 .theme-brandCrowd .tw-flex-auto {
   flex: 1 1 auto;
 }
@@ -1606,6 +1615,9 @@ video {
 .theme-brandCrowd .tw-p-4 {
   padding: 1rem;
 }
+.theme-brandCrowd .tw-p-5 {
+  padding: 1.25rem;
+}
 .theme-brandCrowd .tw-p-6 {
   padding: 1.5rem;
 }
@@ -1741,6 +1753,9 @@ video {
 .theme-brandCrowd .tw-pt-2 {
   padding-top: 0.5rem;
 }
+.theme-brandCrowd .tw-pt-4 {
+  padding-top: 1rem;
+}
 .theme-brandCrowd .tw-pt-6 {
   padding-top: 1.5rem;
 }
@@ -1966,6 +1981,11 @@ video {
   --tw-drop-shadow: drop-shadow(0 1px 1px rgb(0 0 0 / 0.05));
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
+.theme-brandCrowd .tw-transition-all {
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
 .theme-brandCrowd .tw-transition-colors {
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -2141,10 +2161,20 @@ video {
   outline: 2px solid transparent;
   outline-offset: 2px;
 }
+.theme-brandCrowd .tw-group:hover .group-hover\:tw-scale-105 {
+  --tw-scale-x: 1.05;
+  --tw-scale-y: 1.05;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
 .theme-brandCrowd .tw-group:hover .group-hover\:tw-text-info-500 {
   --tw-text-opacity: 1;
   color: rgb(0 151 215 / var(--tw-text-opacity));
 }
+.theme-brandCrowd .tw-group:hover .group-hover\:tw-shadow {
+  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
 @media (min-width: 640px) {
 .theme-brandCrowd .sm\:tw-absolute {
     position: absolute;

package/public/css/tailwind-brandPage.css

@@ -699,6 +699,9 @@ video {
 .theme-brandPage .tw-mb-4 {
   margin-bottom: 1rem;
 }
+.theme-brandPage .tw-mb-5 {
+  margin-bottom: 1.25rem;
+}
 .theme-brandPage .tw-mb-6 {
   margin-bottom: 1.5rem;
 }
@@ -756,6 +759,9 @@ video {
 .theme-brandPage .tw-mt-4 {
   margin-top: 1rem;
 }
+.theme-brandPage .tw-mt-5 {
+  margin-top: 1.25rem;
+}
 .theme-brandPage .tw-mt-8 {
   margin-top: 2rem;
 }
@@ -923,6 +929,9 @@ video {
 .theme-brandPage .tw-max-w-xl {
   max-width: 36rem;
 }
+.theme-brandPage .tw-flex-1 {
+  flex: 1 1 0%;
+}
 .theme-brandPage .tw-flex-auto {
   flex: 1 1 auto;
 }
@@ -1454,6 +1463,9 @@ video {
 .theme-brandPage .tw-p-4 {
   padding: 1rem;
 }
+.theme-brandPage .tw-p-5 {
+  padding: 1.25rem;
+}
 .theme-brandPage .tw-p-6 {
   padding: 1.5rem;
 }
@@ -1589,6 +1601,9 @@ video {
 .theme-brandPage .tw-pt-2 {
   padding-top: 0.5rem;
 }
+.theme-brandPage .tw-pt-4 {
+  padding-top: 1rem;
+}
 .theme-brandPage .tw-pt-6 {
   padding-top: 1.5rem;
 }
@@ -1754,6 +1769,11 @@ video {
   --tw-drop-shadow: drop-shadow(0 1px 1px rgb(0 0 0 / 0.05));
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
+.theme-brandPage .tw-transition-all {
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
 .theme-brandPage .tw-transition-colors {
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -1829,6 +1849,16 @@ video {
   outline: 2px solid transparent;
   outline-offset: 2px;
 }
+.theme-brandPage .tw-group:hover .group-hover\:tw-scale-105 {
+  --tw-scale-x: 1.05;
+  --tw-scale-y: 1.05;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+.theme-brandPage .tw-group:hover .group-hover\:tw-shadow {
+  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
 @media (min-width: 640px) {
 .theme-brandPage .sm\:tw-absolute {
     position: absolute;

package/public/css/tailwind-crazyDomains.css

@@ -699,6 +699,9 @@ video {
 .theme-crazyDomains .tw-mb-4 {
   margin-bottom: 1rem;
 }
+.theme-crazyDomains .tw-mb-5 {
+  margin-bottom: 1.25rem;
+}
 .theme-crazyDomains .tw-mb-6 {
   margin-bottom: 1.5rem;
 }
@@ -756,6 +759,9 @@ video {
 .theme-crazyDomains .tw-mt-4 {
   margin-top: 1rem;
 }
+.theme-crazyDomains .tw-mt-5 {
+  margin-top: 1.25rem;
+}
 .theme-crazyDomains .tw-mt-8 {
   margin-top: 2rem;
 }
@@ -923,6 +929,9 @@ video {
 .theme-crazyDomains .tw-max-w-xl {
   max-width: 36rem;
 }
+.theme-crazyDomains .tw-flex-1 {
+  flex: 1 1 0%;
+}
 .theme-crazyDomains .tw-flex-auto {
   flex: 1 1 auto;
 }
@@ -1606,6 +1615,9 @@ video {
 .theme-crazyDomains .tw-p-4 {
   padding: 1rem;
 }
+.theme-crazyDomains .tw-p-5 {
+  padding: 1.25rem;
+}
 .theme-crazyDomains .tw-p-6 {
   padding: 1.5rem;
 }
@@ -1741,6 +1753,9 @@ video {
 .theme-crazyDomains .tw-pt-2 {
   padding-top: 0.5rem;
 }
+.theme-crazyDomains .tw-pt-4 {
+  padding-top: 1rem;
+}
 .theme-crazyDomains .tw-pt-6 {
   padding-top: 1.5rem;
 }
@@ -1966,6 +1981,11 @@ video {
   --tw-drop-shadow: drop-shadow(0 1px 1px rgb(0 0 0 / 0.05));
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
+.theme-crazyDomains .tw-transition-all {
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
 .theme-crazyDomains .tw-transition-colors {
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -2141,10 +2161,20 @@ video {
   outline: 2px solid transparent;
   outline-offset: 2px;
 }
+.theme-crazyDomains .tw-group:hover .group-hover\:tw-scale-105 {
+  --tw-scale-x: 1.05;
+  --tw-scale-y: 1.05;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
 .theme-crazyDomains .tw-group:hover .group-hover\:tw-text-info-500 {
   --tw-text-opacity: 1;
   color: rgb(0 161 239 / var(--tw-text-opacity));
 }
+.theme-crazyDomains .tw-group:hover .group-hover\:tw-shadow {
+  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
 @media (min-width: 640px) {
 .theme-crazyDomains .sm\:tw-absolute {
     position: absolute;

package/public/css/tailwind-designCom.css

@@ -699,6 +699,9 @@ video {
 .theme-designCom .tw-mb-4 {
   margin-bottom: 1rem;
 }
+.theme-designCom .tw-mb-5 {
+  margin-bottom: 1.25rem;
+}
 .theme-designCom .tw-mb-6 {
   margin-bottom: 1.5rem;
 }
@@ -756,6 +759,9 @@ video {
 .theme-designCom .tw-mt-4 {
   margin-top: 1rem;
 }
+.theme-designCom .tw-mt-5 {
+  margin-top: 1.25rem;
+}
 .theme-designCom .tw-mt-8 {
   margin-top: 2rem;
 }
@@ -923,6 +929,9 @@ video {
 .theme-designCom .tw-max-w-xl {
   max-width: 36rem;
 }
+.theme-designCom .tw-flex-1 {
+  flex: 1 1 0%;
+}
 .theme-designCom .tw-flex-auto {
   flex: 1 1 auto;
 }
@@ -1606,6 +1615,9 @@ video {
 .theme-designCom .tw-p-4 {
   padding: 1rem;
 }
+.theme-designCom .tw-p-5 {
+  padding: 1.25rem;
+}
 .theme-designCom .tw-p-6 {
   padding: 1.5rem;
 }
@@ -1741,6 +1753,9 @@ video {
 .theme-designCom .tw-pt-2 {
   padding-top: 0.5rem;
 }
+.theme-designCom .tw-pt-4 {
+  padding-top: 1rem;
+}
 .theme-designCom .tw-pt-6 {
   padding-top: 1.5rem;
 }
@@ -1966,6 +1981,11 @@ video {
   --tw-drop-shadow: drop-shadow(0 1px 1px rgb(0 0 0 / 0.05));
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
+.theme-designCom .tw-transition-all {
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
 .theme-designCom .tw-transition-colors {
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -2141,10 +2161,20 @@ video {
   outline: 2px solid transparent;
   outline-offset: 2px;
 }
+.theme-designCom .tw-group:hover .group-hover\:tw-scale-105 {
+  --tw-scale-x: 1.05;
+  --tw-scale-y: 1.05;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
 .theme-designCom .tw-group:hover .group-hover\:tw-text-info-500 {
   --tw-text-opacity: 1;
   color: rgb(63 89 246 / var(--tw-text-opacity));
 }
+.theme-designCom .tw-group:hover .group-hover\:tw-shadow {
+  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
 @media (min-width: 640px) {
 .theme-designCom .sm\:tw-absolute {
     position: absolute;

package/public/css/tailwind-designCrowd.css

@@ -699,6 +699,9 @@ video {
 .theme-designCrowd .tw-mb-4 {
   margin-bottom: 1rem;
 }
+.theme-designCrowd .tw-mb-5 {
+  margin-bottom: 1.25rem;
+}
 .theme-designCrowd .tw-mb-6 {
   margin-bottom: 1.5rem;
 }
@@ -756,6 +759,9 @@ video {
 .theme-designCrowd .tw-mt-4 {
   margin-top: 1rem;
 }
+.theme-designCrowd .tw-mt-5 {
+  margin-top: 1.25rem;
+}
 .theme-designCrowd .tw-mt-8 {
   margin-top: 2rem;
 }
@@ -923,6 +929,9 @@ video {
 .theme-designCrowd .tw-max-w-xl {
   max-width: 36rem;
 }
+.theme-designCrowd .tw-flex-1 {
+  flex: 1 1 0%;
+}
 .theme-designCrowd .tw-flex-auto {
   flex: 1 1 auto;
 }
@@ -1606,6 +1615,9 @@ video {
 .theme-designCrowd .tw-p-4 {
   padding: 1rem;
 }
+.theme-designCrowd .tw-p-5 {
+  padding: 1.25rem;
+}
 .theme-designCrowd .tw-p-6 {
   padding: 1.5rem;
 }
@@ -1741,6 +1753,9 @@ video {
 .theme-designCrowd .tw-pt-2 {
   padding-top: 0.5rem;
 }
+.theme-designCrowd .tw-pt-4 {
+  padding-top: 1rem;
+}
 .theme-designCrowd .tw-pt-6 {
   padding-top: 1.5rem;
 }
@@ -1966,6 +1981,11 @@ video {
   --tw-drop-shadow: drop-shadow(0 1px 1px rgb(0 0 0 / 0.05));
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
+.theme-designCrowd .tw-transition-all {
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
 .theme-designCrowd .tw-transition-colors {
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -2141,10 +2161,20 @@ video {
   outline: 2px solid transparent;
   outline-offset: 2px;
 }
+.theme-designCrowd .tw-group:hover .group-hover\:tw-scale-105 {
+  --tw-scale-x: 1.05;
+  --tw-scale-y: 1.05;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
 .theme-designCrowd .tw-group:hover .group-hover\:tw-text-info-500 {
   --tw-text-opacity: 1;
   color: rgb(17 151 235 / var(--tw-text-opacity));
 }
+.theme-designCrowd .tw-group:hover .group-hover\:tw-shadow {
+  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
 @media (min-width: 640px) {
 .theme-designCrowd .sm\:tw-absolute {
     position: absolute;

package/src/atoms/components/Modal/Modal.vue

@@ -15,7 +15,7 @@
       :class="[
         {
           'tw-w-full': !isImageMode,
-          'tw-p-4': !simple,
+          'tw-p-4': !removeHorizontalPadding && !simple,
           'tw-max-w-md': size === 'md',
           'tw-max-w-xl': size === 'xl',
           'tw-max-w-2xl': !size && !isImageMode,
@@ -91,6 +91,11 @@ export default {
       required: false,
       default: false,
     },
+    removeHorizontalPadding: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
     visible: {
       type: Boolean,
       required: false,

package/src/atoms/components/Price/Price.fixtures.js

@@ -14,72 +14,12 @@ export const audCurrency = {
   abbreviation: 'AU',
 };
 
-export const gbpCurrency = {
-  id: 3,
-  name: 'British Pound',
-  iso4127Code: 'GBP',
-  symbol: '£',
-  abbreviation: 'UK',
-};
-
 export const euroCurrency = {
-  id: 4,
+  id: 999,
   name: 'Euro',
   iso4127Code: 'EUR',
   symbol: '€',
   abbreviation: 'EU',
 };
 
-export const inrCurrency = {
-  id: 5,
-  name: 'Indian Rupee',
-  iso4127Code: 'INR',
-  symbol: '₹',
-  abbreviation: 'IN',
-};
-
-export const phpCurrency = {
-  id: 6,
-  name: 'Philippine Peso',
-  iso4127Code: 'PHP',
-  symbol: '₱',
-  abbreviation: 'PH',
-};
-
-export const brlCurrency = {
-  id: 7,
-  name: 'Brazilian Real',
-  iso4127Code: 'BRL',
-  symbol: 'R$',
-  abbreviation: 'R',
-};
-
-export const mxnCurrency = {
-  id: 8,
-  name: 'Mexican Peso',
-  iso4127Code: 'MXN',
-  symbol: 'MX$',
-  abbreviation: 'MX',
-};
-
-export const zarCurrency = {
-  id: 9,
-  name: 'South African Rand',
-  iso4127Code: 'ZAR',
-  symbol: 'R',
-  abbreviation: 'R',
-};
-
-export const currencies = [
-  usdCurrency,
-  audCurrency,
-  gbpCurrency,
-  euroCurrency,
-  inrCurrency,
-  phpCurrency,
-  brlCurrency,
-  mxnCurrency,
-  zarCurrency,
-];
-
-export const locales = [ 'en-US', 'fr-FR', 'es-ES', 'pt-PT', 'de-DE']
+export const currencies = [usdCurrency, audCurrency, euroCurrency];

package/src/atoms/components/Price/Price.stories.js

@@ -1,8 +1,5 @@
 import Price from './Price.vue';
-import { currencies, locales } from './Price.fixtures';
-import {setSharedLibLocaleAsync} from "../../../useSharedLibTranslate";
-
-await setSharedLibLocaleAsync();
+import { currencies } from './Price.fixtures';
 
 // noinspection JSUnusedGlobalSymbols
 export default {
@@ -10,7 +7,6 @@ export default {
   component: Price,
   args: {
     currencyName: currencies[0].name,
-    locale: locales[0]
   },
   argTypes: {
     amount: {
@@ -20,10 +16,6 @@ export default {
       control: { type: 'select' },
       options: currencies.map((x) => x.name),
     },
-    locale: {
-      control: { type: 'select' },
-      options: locales,
-    },
   },
 };
 
@@ -39,16 +31,12 @@ export const Sample = {
         selectedCurrency() {
           return currencies.find((x) => x.name === this.args.currencyName);
         },
-        selectedLocale() {
-          return locales.find((x) => x === this.args.locale);
-        },
       },
       template: `
       <span>
         <price 
             v-bind="args"
             :currency="selectedCurrency"
-            :locale="selectedLocale"
         />
       </span>
     `,
@@ -71,9 +59,6 @@ export const WithFraction = {
         selectedCurrency() {
           return currencies.find((x) => x.name === this.args.currencyName);
         },
-        selectedLocale() {
-          return locales.find((x) => x === this.args.locale);
-        },
       },
       template: `
       <span>
@@ -81,7 +66,7 @@ export const WithFraction = {
             v-bind="args"
             :currency="selectedCurrency"
             fraction="2"
-            :locale="selectedLocale"
+            :show-abbreviation="true"
         />
       </span>
     `,
@@ -104,9 +89,6 @@ export const AlwaysShowFractionOn = {
         selectedCurrency() {
           return currencies.find((x) => x.name === this.args.currencyName);
         },
-        selectedLocale() {
-          return locales.find((x) => x === this.args.locale);
-        },
       },
       template: `
       <span>
@@ -115,7 +97,7 @@ export const AlwaysShowFractionOn = {
             :always-show-fraction="true"
             :currency="selectedCurrency"
             fraction="2"
-            :locale="selectedLocale"
+            :show-abbreviation="true"
         />
       </span>
     `,
@@ -146,7 +128,7 @@ export const AlwaysShowFractionOff = {
             :always-show-fraction="false"
             :currency="selectedCurrency"
             fraction="2"
-            :locale="selectedLocale"
+            :show-abbreviation="true"
           />
       </span>
     `,
@@ -169,9 +151,6 @@ export const WithSuffix = {
         selectedCurrency() {
           return currencies.find((x) => x.name === this.args.currencyName);
         },
-        selectedLocale() {
-          return locales.find((x) => x === this.args.locale);
-        },
       },
       template: `
       <span>
@@ -180,8 +159,8 @@ export const WithSuffix = {
             :always-show-fraction="true"
             :currency="selectedCurrency"
             fraction="2"
+            :show-abbreviation="true"
             :suffix="suffix"
-            :locale="selectedLocale"
           />
       </span>
     `,
@@ -192,35 +171,3 @@ export const WithSuffix = {
     suffix: '/yr',
   },
 };
-
-export const WithLocale = {
-  render: (args, { argTypes }) => {
-    return {
-      components: { Price },
-      props: Object.keys(argTypes),
-      setup() {
-        return { args };
-      },
-      computed: {
-        selectedCurrency() {
-          return currencies.find((x) => x.name === this.args.currencyName);
-        },
-        selectedLocale() {
-          return locales.find((x) => x === this.args.locale);
-        },
-      },
-      template: `
-      <span>
-        <price
-            v-bind="args"
-            :currency="selectedCurrency"
-            :locale="selectedLocale"
-        />
-      </span>
-    `,
-    };
-  },
-  args: {
-    amount: 22.0,
-  },
-};