-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/.storybook/stories/KvAccordionItem.stories.js b/.storybook/stories/KvAccordionItem.stories.js
index 5fcf96cda0..3a28f4b96f 100644
--- a/.storybook/stories/KvAccordionItem.stories.js
+++ b/.storybook/stories/KvAccordionItem.stories.js
@@ -1,4 +1,4 @@
-import KvAccordionItem from '@/components/Kv/KvAccordionItem';
+import KvAccordionItem from '#src/components/Kv/KvAccordionItem';
export default {
title: 'Kv/KvAccordionItem',
diff --git a/.storybook/stories/KvActivityRow.stories.js b/.storybook/stories/KvActivityRow.stories.js
index a3d72b1f18..992653b6ab 100644
--- a/.storybook/stories/KvActivityRow.stories.js
+++ b/.storybook/stories/KvActivityRow.stories.js
@@ -1,20 +1,21 @@
-import KvActivityRow from '@/components/Kv/KvActivityRow.vue';
+import KvActivityRow from '#src/components/Kv/KvActivityRow.vue';
export default {
- title: 'Kv/KvActivityRow',
- component: KvActivityRow,
+ title: 'Kv/KvActivityRow',
+ component: KvActivityRow,
};
const activity = {
- lenderName: 'Stephanie',
- lenderImage: 'https://www.development.kiva.org/img/s100/26e15431f51b540f31cd9f011cc54f31.jpg',
- text: 'Stephanie lent $25',
+ lenderName: 'Stephanie',
+ lenderImage: 'https://www.development.kiva.org/img/s100/26e15431f51b540f31cd9f011cc54f31.jpg',
+ text: 'Stephanie lent $25',
};
const story = (args) => {
const template = (_args, { argTypes }) => ({
props: Object.keys(argTypes),
components: { KvActivityRow },
+ setup() { return args; },
template: ` ({
data() {
return {
...commonData,
+ value: '',
};
},
template: `
@@ -31,6 +32,7 @@ export const Default = () => ({
type="text"
name="baseInput"
:validation="{}"
+ v-model="value"
>
Base input
@@ -38,6 +40,7 @@ export const Default = () => ({
type="text"
name="baseInputError"
:validation="vuelidateObject"
+ v-model="value"
>
Base input with error
diff --git a/.storybook/stories/KvButton.stories.js b/.storybook/stories/KvButton.stories.js
index 755525a5be..0102de4f7f 100644
--- a/.storybook/stories/KvButton.stories.js
+++ b/.storybook/stories/KvButton.stories.js
@@ -1,4 +1,4 @@
-import KvButton from '@/components/Kv/KvButton';
+import KvButton from '#src/components/Kv/KvButton';
export default {
title: 'KV/KvButton',
diff --git a/.storybook/stories/KvCarousel.stories.js b/.storybook/stories/KvCarousel.stories.js
index 92106003e1..36e6331a98 100644
--- a/.storybook/stories/KvCarousel.stories.js
+++ b/.storybook/stories/KvCarousel.stories.js
@@ -1,8 +1,9 @@
-import KvCarousel from '@/components/Kv/KvCarousel';
-import KvCarouselSlide from '@/components/Kv/KvCarouselSlide';
-import KvCauseSelector from '@/components/Kv/KvCauseSelector';
-import KvLoadingSpinner from '@/components/Kv/KvLoadingSpinner';
-import KvResponsiveImage from '@/components/Kv/KvResponsiveImage';
+import KvCarousel from '#src/components/Kv/KvCarousel';
+import KvCarouselSlide from '#src/components/Kv/KvCarouselSlide';
+import KvCauseSelector from '#src/components/Kv/KvCauseSelector';
+import KvLoadingSpinner from '#src/components/Kv/KvLoadingSpinner';
+import KvResponsiveImage from '#src/components/Kv/KvResponsiveImage';
+import { metaGlobReader } from '#src/util/importHelpers';
import causeList from '../mock-data/cause-selector-data-mock';
@@ -26,7 +27,7 @@ const defaultCarouselSlides = `
export default {
title: 'Kv/KvCarousel',
component: KvCarousel,
- };
+};
export const Default = () => ({
components: {
@@ -316,7 +317,9 @@ export const loanCardExample = () => ({
}
});
-const slidesImageRequire = require.context('@/assets/images/possibilities-banners/kivan-slider', true);
+const slidesImageGlob = import.meta.glob('/src/assets/images/possibilities-banners/kivan-slider/*.*', { eager: true });
+const slidesImageRequire = metaGlobReader(slidesImageGlob, '/src/assets/images/possibilities-banners/kivan-slider/');
+
export const KivanSlider = () => ({
components: {
KvCarousel,
@@ -330,32 +333,32 @@ export const KivanSlider = () => ({
return [
{
left: [
- ['small', slidesImageRequire('./kivan-1a-std.jpg')],
- ['small retina', slidesImageRequire('./kivan-1a-retina.jpg')]
+ ['small', slidesImageRequire('kivan-1a-std.jpg')],
+ ['small retina', slidesImageRequire('kivan-1a-retina.jpg')]
],
right: [
- ['small', slidesImageRequire('./kivan-1b-std.jpg')],
- ['small retina', slidesImageRequire('./kivan-1b-retina.jpg')],
+ ['small', slidesImageRequire('kivan-1b-std.jpg')],
+ ['small retina', slidesImageRequire('kivan-1b-retina.jpg')],
]
},
{
left: [
- ['small', slidesImageRequire('./kivan-2a-std.jpg')],
+ ['small', slidesImageRequire('kivan-2a-std.jpg')],
['small retina', slidesImageRequire('./kivan-2a-retina.jpg')],
],
right: [
- ['small', slidesImageRequire('./kivan-2b-std.jpg')],
- ['small retina', slidesImageRequire('./kivan-2b-retina.jpg')],
+ ['small', slidesImageRequire('kivan-2b-std.jpg')],
+ ['small retina', slidesImageRequire('kivan-2b-retina.jpg')],
]
},
{
left: [
- ['small', slidesImageRequire('./kivan-3a-std.jpg')],
- ['small retina', slidesImageRequire('./kivan-3a-retina.jpg')],
+ ['small', slidesImageRequire('kivan-3a-std.jpg')],
+ ['small retina', slidesImageRequire('kivan-3a-retina.jpg')],
],
right: [
- ['small', slidesImageRequire('./kivan-3b-std.jpg')],
- ['small retina', slidesImageRequire('./kivan-3b-retina.jpg')]
+ ['small', slidesImageRequire('kivan-3b-std.jpg')],
+ ['small retina', slidesImageRequire('kivan-3b-retina.jpg')]
]
}
]
@@ -386,7 +389,9 @@ export const KivanSlider = () => ({
`,
});
-const imageRequire = require.context('@/assets/images/hero-slideshow/', true);
+const imageGlob = import.meta.glob('/src/assets/images/hero-slideshow/*.*', { eager: true });
+const imageRequire = metaGlobReader(imageGlob, '/src/assets/images/hero-slideshow/');
+
export const ImagesOnlyLazyLoadLikeHomepage = () => ({
components: {
KvCarousel,
@@ -408,16 +413,16 @@ export const ImagesOnlyLazyLoadLikeHomepage = () => ({
},
heroImages(number) {
return [
- ['small', imageRequire(`./hero-${number}-sm-std.jpg`)],
- ['small retina', imageRequire(`./hero-${number}-sm-retina.jpg`)],
- ['medium', imageRequire(`./hero-${number}-med-std.jpg`)],
- ['medium retina', imageRequire(`./hero-${number}-med-retina.jpg`)],
- ['large', imageRequire(`./hero-${number}-lg-std.jpg`)],
- ['large retina', imageRequire(`./hero-${number}-lg-retina.jpg`)],
- ['xga', imageRequire(`./hero-${number}-xga-std.jpg`)],
- ['xga retina', imageRequire(`./hero-${number}-xga-retina.jpg`)],
- ['wxga', imageRequire(`./hero-${number}-wxga-std.jpg`)],
- ['wxga retina', imageRequire(`./hero-${number}-wxga-retina.jpg`)],
+ ['small', imageRequire(`hero-${number}-sm-std.jpg`)],
+ ['small retina', imageRequire(`hero-${number}-sm-retina.jpg`)],
+ ['medium', imageRequire(`hero-${number}-med-std.jpg`)],
+ ['medium retina', imageRequire(`hero-${number}-med-retina.jpg`)],
+ ['large', imageRequire(`hero-${number}-lg-std.jpg`)],
+ ['large retina', imageRequire(`hero-${number}-lg-retina.jpg`)],
+ ['xga', imageRequire(`hero-${number}-xga-std.jpg`)],
+ ['xga retina', imageRequire(`hero-${number}-xga-retina.jpg`)],
+ ['wxga', imageRequire(`hero-${number}-wxga-std.jpg`)],
+ ['wxga retina', imageRequire(`hero-${number}-wxga-retina.jpg`)],
];
},
},
diff --git a/.storybook/stories/KvCauseSelector.stories.js b/.storybook/stories/KvCauseSelector.stories.js
index 7201174d7d..c8a34f0328 100644
--- a/.storybook/stories/KvCauseSelector.stories.js
+++ b/.storybook/stories/KvCauseSelector.stories.js
@@ -1,4 +1,4 @@
-import KvCauseSelector from '@/components/Kv/KvCauseSelector';
+import KvCauseSelector from '#src/components/Kv/KvCauseSelector';
import causeList from '../mock-data/cause-selector-data-mock';
@@ -16,8 +16,8 @@ export default {
cause: {
control: {
type: 'select',
- options: causeList,
- }
+ },
+ options: causeList,
},
},
};
@@ -32,6 +32,7 @@ export const Default = (args, { argTypes }) => ({
console.log(`Changed to ${val}`);
}
},
+ setup() { return args; },
template: `
({
components: {
@@ -22,7 +22,7 @@ export const Default = () => ({
Option 1
@@ -30,14 +30,14 @@ export const Default = () => ({
Option 2
Option 3
@@ -60,14 +60,14 @@ export const Checked = () => ({
True by default
False by default
diff --git a/.storybook/stories/KvCheckboxList.stories.js b/.storybook/stories/KvCheckboxList.stories.js
index db616138d6..e35f6b1ebb 100644
--- a/.storybook/stories/KvCheckboxList.stories.js
+++ b/.storybook/stories/KvCheckboxList.stories.js
@@ -1,29 +1,16 @@
-import KvCheckboxList from '@/components/Kv/KvCheckboxList';
+import KvCheckboxList from '#src/components/Kv/KvCheckboxList';
export default {
title: 'Kv/Form Elements/KvCheckboxList',
component: KvCheckboxList,
};
-const story = (args) => {
- const template = (_args, { argTypes }) => ({
- props: Object.keys(argTypes),
- components: { KvCheckboxList },
- template: ` ({
@@ -20,6 +22,40 @@ export const ImageSet = (args, { argTypes }) => ({
components: {
KvContentfulImg
},
+ setup() {
+ return {
+ ...args,
+ crop: '&fit=fill&f=face',
+ sourceSizes: [
+ {
+ width: 1920,
+ height: 650,
+ media: 'min-width: 1441px',
+ },
+ {
+ width: 1440,
+ height: 620,
+ media: 'min-width: 1025px',
+ },
+ {
+ width: 1024,
+ height: 441,
+ media: 'min-width: 1024px',
+ },
+ {
+ width: 680,
+ height: 372,
+ media: 'min-width: 734px',
+ },
+ {
+ width: 480,
+ height: 540,
+ media: 'min-width: 0px',
+ },
+ ],
+ contentfulSrc: 'https://images.ctfassets.net/j0p9a6ql0rn7/7mY5ZujL9UfbluRkVkHgkX/5ec83a74e7c1dc387f3fa35af34f5243/mg-hppromo-1-wxga-retina.jpg'
+ };
+ },
template: `
({
/>
`,
});
-ImageSet.args = {
- crop: '&fit=fill&f=face',
- sourceSizes: [
- {
- width: 1920,
- height: 650,
- media: 'min-width: 1441px',
- },
- {
- width: 1440,
- height: 620,
- media: 'min-width: 1025px',
- },
- {
- width: 1024,
- height: 441,
- media: 'min-width: 1024px',
- },
- {
- width: 680,
- height: 372,
- media: 'min-width: 734px',
- },
- {
- width: 480,
- height: 540,
- media: 'min-width: 0px',
- },
- ],
- contentfulSrc: 'https://images.ctfassets.net/j0p9a6ql0rn7/7mY5ZujL9UfbluRkVkHgkX/5ec83a74e7c1dc387f3fa35af34f5243/mg-hppromo-1-wxga-retina.jpg'
-};
export const Default = (args, { argTypes }) => ({
props: Object.keys(argTypes),
components: {
KvContentfulImg
},
+ setup() { return args; },
template: `
({
});
export const WithValidation = () => ({
- mixins: [validationMixin],
- validations: {
+ validations() {
+ return {
amount: {
required,
minValue: minValue(5),
maxValue: maxValue(10000)
- },
- },
- components: {
- KvCurrencyInput
- },
- data() {
- return {
- amount: 25,
}
- },
- template: `
-
- `
- });
+ }
+ },
+ components: {
+ KvCurrencyInput
+ },
+ data() {
+ return {
+ amount: 25,
+ }
+ },
+ setup() { return { v$: useVuelidate() }; },
+ template: `
+
+ `
+});
diff --git a/.storybook/stories/KvExpandableQuestion.stories.js b/.storybook/stories/KvExpandableQuestion.stories.js
index d64cea3b24..9201651f8b 100644
--- a/.storybook/stories/KvExpandableQuestion.stories.js
+++ b/.storybook/stories/KvExpandableQuestion.stories.js
@@ -1,17 +1,14 @@
-import Vue from 'vue'
-import KvExpandableQuestion from '@/components/Kv/KvExpandableQuestion';
+import KvExpandableQuestion from '#src/components/Kv/KvExpandableQuestion';
-// import plugins
-import kivaPlugins from '@/plugins';
-Vue.use(kivaPlugins)
+const args = {
+ title: 'Can I cancel anytime?',
+ content: '
@@ -125,14 +83,4 @@ export const AllCountries = (args, { argTypes }) => ({
AllCountries.argTypes = {
country: { control: { disable: true } },
- inlineSvg: { control: { disable: true } }
-}
-
-export const AllCountriesInlineSvg = AllCountries.bind({});
-AllCountriesInlineSvg.args = {
- ...AllCountries.args,
- inlineSvg: true
-}
-AllCountriesInlineSvg.argTypes = {
- ...AllCountries.argTypes,
}
diff --git a/.storybook/stories/KvFormKitchenSink.stories.js b/.storybook/stories/KvFormKitchenSink.stories.js
index 7c5c661ec7..a0a738a7cc 100644
--- a/.storybook/stories/KvFormKitchenSink.stories.js
+++ b/.storybook/stories/KvFormKitchenSink.stories.js
@@ -1,13 +1,13 @@
-import KvBaseInput from '@/components/Kv/KvBaseInput';
-import KvCheckbox from '@/components/Kv/KvCheckbox';
-import KvCurrencyInput from '@/components/Kv/KvCurrencyInput';
-import KvSelect from '@/components/Kv/KvSelect';
-import KvPhoneInput from '@/components/Kv/KvPhoneInput';
-import KvPillToggle from '@/components/Kv/KvPillToggle';
-import KvRadio from '@/components/Kv/KvRadio';
-import KvRangeSlider from '@/components/Kv/KvRangeSlider';
-import KvToggle from '@/components/Kv/KvToggle';
-import KvVerificationCodeInput from '@/components/Kv/KvVerificationCodeInput';
+import KvBaseInput from '#src/components/Kv/KvBaseInput';
+import KvCheckbox from '#src/components/Kv/KvCheckbox';
+import KvCurrencyInput from '#src/components/Kv/KvCurrencyInput';
+import KvSelect from '#src/components/Kv/KvSelect';
+import KvPhoneInput from '#src/components/Kv/KvPhoneInput';
+import KvPillToggle from '#src/components/Kv/KvPillToggle';
+import KvRadio from '#src/components/Kv/KvRadio';
+import KvRangeSlider from '#src/components/Kv/KvRangeSlider';
+import KvToggle from '#src/components/Kv/KvToggle';
+import KvVerificationCodeInput from '#src/components/Kv/KvVerificationCodeInput';
export default {
title: 'Kv/Form Elements',
@@ -82,7 +82,8 @@ export const KitchenSink = () => ({
kvToggle1: true,
kvToggle2: false,
kvToggle3: true,
- KvVerificationCodeInput: 123456
+ KvVerificationCodeInput: 123456,
+ kvBaseInputValue: '',
}
},
template: `
@@ -285,6 +286,7 @@ export const KitchenSink = () => ({
type="text"
name="baseInput"
:validation="{}"
+ v-model="kvBaseInputValue"
>
Base input
@@ -292,6 +294,7 @@ export const KitchenSink = () => ({
type="text"
name="baseInputError"
:validation="kvBaseInputError"
+ v-model="kvBaseInputValue"
>
Base input with error
diff --git a/.storybook/stories/KvFrequentlyAskedQuestions.stories.js b/.storybook/stories/KvFrequentlyAskedQuestions.stories.js
index 7e3b8c696e..9e2555ce2c 100644
--- a/.storybook/stories/KvFrequentlyAskedQuestions.stories.js
+++ b/.storybook/stories/KvFrequentlyAskedQuestions.stories.js
@@ -1,52 +1,54 @@
-import SectionWithBackgroundClassic from '@/components/Contentful/SectionWithBackgroundClassic';
-import KvFrequentlyAskedQuestions from '@/components/Kv/KvFrequentlyAskedQuestions';
-import KvPageContainer from '~/@kiva/kv-components/vue/KvPageContainer';
+import SectionWithBackgroundClassic from '#src/components/Contentful/SectionWithBackgroundClassic';
+import KvFrequentlyAskedQuestions from '#src/components/Kv/KvFrequentlyAskedQuestions';
+import KvPageContainer from '@kiva/kv-components/vue/KvPageContainer';
-export default {
- title: 'Kv/KvFrequentlyAskedQuestions',
- component: KvFrequentlyAskedQuestions,
- args: {
- frequentlyAskedQuestionsHeadline: 'Questions',
- frequentlyAskedQuestions: [{
- name: 'First Question',
- richText: {
- "nodeType": "paragraph", // Can be paragraphs, images, lists, embedded entries
+const args = {
+ frequentlyAskedQuestionsHeadline: 'Questions',
+ frequentlyAskedQuestions: [{
+ name: 'First Question',
+ richText: {
+ "nodeType": "paragraph", // Can be paragraphs, images, lists, embedded entries
+ "data": {},
+ "content": [{
+ "nodeType": "text",
+ "value": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mollis nunc sed id semper risus in hendrerit. Pharetra diam sit amet nisl suscipit adipiscing bibendum. Interdum varius sit amet mattis vulputate enim. Maecenas pharetra convallis posuere morbi leo urna molestie. Duis ut diam quam nulla porttitor. Elit ullamcorper dignissim cras tincidunt lobortis feugiat vivamus at augue. Elit pellentesque habitant morbi tristique senectus et netus. Fringilla phasellus faucibus scelerisque eleifend donec pretium vulputate. Non quam lacus suspendisse faucibus interdum posuere lorem. Magnis dis parturient montes nascetur ridiculus. Et tortor consequat id porta nibh venenatis cras sed felis. Dui ut ornare lectus sit amet est placerat. Eu non diam phasellus vestibulum lorem. Dignissim convallis aenean et tortor at.",
"data": {},
- "content": [{
- "nodeType": "text",
- "value": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mollis nunc sed id semper risus in hendrerit. Pharetra diam sit amet nisl suscipit adipiscing bibendum. Interdum varius sit amet mattis vulputate enim. Maecenas pharetra convallis posuere morbi leo urna molestie. Duis ut diam quam nulla porttitor. Elit ullamcorper dignissim cras tincidunt lobortis feugiat vivamus at augue. Elit pellentesque habitant morbi tristique senectus et netus. Fringilla phasellus faucibus scelerisque eleifend donec pretium vulputate. Non quam lacus suspendisse faucibus interdum posuere lorem. Magnis dis parturient montes nascetur ridiculus. Et tortor consequat id porta nibh venenatis cras sed felis. Dui ut ornare lectus sit amet est placerat. Eu non diam phasellus vestibulum lorem. Dignissim convallis aenean et tortor at.",
- "data": {},
- "marks": []
- }]
- }
- },{
- name: 'Second Question',
- richText: {
- "nodeType": "paragraph", // Can be paragraphs, images, lists, embedded entries
+ "marks": []
+ }]
+ }
+ }, {
+ name: 'Second Question',
+ richText: {
+ "nodeType": "paragraph", // Can be paragraphs, images, lists, embedded entries
+ "data": {},
+ "content": [{
+ "nodeType": "text",
+ "value": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mollis nunc sed id semper risus in hendrerit. Pharetra diam sit amet nisl suscipit adipiscing bibendum. Interdum varius sit amet mattis vulputate enim. Maecenas pharetra convallis posuere morbi leo urna molestie. Duis ut diam quam nulla porttitor. Elit ullamcorper dignissim cras tincidunt lobortis feugiat vivamus at augue. Elit pellentesque habitant morbi tristique senectus et netus. Fringilla phasellus faucibus scelerisque eleifend donec pretium vulputate. Non quam lacus suspendisse faucibus interdum posuere lorem. Magnis dis parturient montes nascetur ridiculus. Et tortor consequat id porta nibh venenatis cras sed felis. Dui ut ornare lectus sit amet est placerat. Eu non diam phasellus vestibulum lorem. Dignissim convallis aenean et tortor at.",
"data": {},
- "content": [{
- "nodeType": "text",
- "value": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mollis nunc sed id semper risus in hendrerit. Pharetra diam sit amet nisl suscipit adipiscing bibendum. Interdum varius sit amet mattis vulputate enim. Maecenas pharetra convallis posuere morbi leo urna molestie. Duis ut diam quam nulla porttitor. Elit ullamcorper dignissim cras tincidunt lobortis feugiat vivamus at augue. Elit pellentesque habitant morbi tristique senectus et netus. Fringilla phasellus faucibus scelerisque eleifend donec pretium vulputate. Non quam lacus suspendisse faucibus interdum posuere lorem. Magnis dis parturient montes nascetur ridiculus. Et tortor consequat id porta nibh venenatis cras sed felis. Dui ut ornare lectus sit amet est placerat. Eu non diam phasellus vestibulum lorem. Dignissim convallis aenean et tortor at.",
- "data": {},
- "marks": []
- }]
- }
- },{
- name: 'Third Question',
- richText: {
- "nodeType": "paragraph", // Can be paragraphs, images, lists, embedded entries
+ "marks": []
+ }]
+ }
+ }, {
+ name: 'Third Question',
+ richText: {
+ "nodeType": "paragraph", // Can be paragraphs, images, lists, embedded entries
+ "data": {},
+ "content": [{
+ "nodeType": "text",
+ "value": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mollis nunc sed id semper risus in hendrerit. Pharetra diam sit amet nisl suscipit adipiscing bibendum. Interdum varius sit amet mattis vulputate enim. Maecenas pharetra convallis posuere morbi leo urna molestie. Duis ut diam quam nulla porttitor. Elit ullamcorper dignissim cras tincidunt lobortis feugiat vivamus at augue. Elit pellentesque habitant morbi tristique senectus et netus. Fringilla phasellus faucibus scelerisque eleifend donec pretium vulputate. Non quam lacus suspendisse faucibus interdum posuere lorem. Magnis dis parturient montes nascetur ridiculus. Et tortor consequat id porta nibh venenatis cras sed felis. Dui ut ornare lectus sit amet est placerat. Eu non diam phasellus vestibulum lorem. Dignissim convallis aenean et tortor at.",
"data": {},
- "content": [{
- "nodeType": "text",
- "value": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mollis nunc sed id semper risus in hendrerit. Pharetra diam sit amet nisl suscipit adipiscing bibendum. Interdum varius sit amet mattis vulputate enim. Maecenas pharetra convallis posuere morbi leo urna molestie. Duis ut diam quam nulla porttitor. Elit ullamcorper dignissim cras tincidunt lobortis feugiat vivamus at augue. Elit pellentesque habitant morbi tristique senectus et netus. Fringilla phasellus faucibus scelerisque eleifend donec pretium vulputate. Non quam lacus suspendisse faucibus interdum posuere lorem. Magnis dis parturient montes nascetur ridiculus. Et tortor consequat id porta nibh venenatis cras sed felis. Dui ut ornare lectus sit amet est placerat. Eu non diam phasellus vestibulum lorem. Dignissim convallis aenean et tortor at.",
- "data": {},
- "marks": []
- }]
- }
- }],
- verticalPadding: {},
- background: {}
- },
+ "marks": []
+ }]
+ }
+ }],
+ verticalPadding: {},
+ background: {}
+};
+
+export default {
+ title: 'Kv/KvFrequentlyAskedQuestions',
+ component: KvFrequentlyAskedQuestions,
+ args,
};
export const Default = (args, { argTypes }) => ({
@@ -54,6 +56,7 @@ export const Default = (args, { argTypes }) => ({
components: {
SectionWithBackgroundClassic, KvFrequentlyAskedQuestions, KvPageContainer
},
+ setup() { return args; },
template: `
{
+ return Object.keys(r).map((filename) => {
let str = filename;
- str = str.substring(2); // remove ./
+ str = str.substring(str.lastIndexOf('/') + 1); // remove leading path
str = str.substring(0, str.length - 4); // remove .svg
return str;
});
@@ -12,7 +12,7 @@ function getFilenames(r) {
export default {
title: 'Kv/KvIcon',
component: KvIcon,
- };
+};
export const Default = () => ({
components: {
@@ -25,13 +25,15 @@ export const Default = () => ({
`,
});
+const iconGlob = import.meta.glob('/src/assets/icons/inline/*.*', { eager: true });
+
export const inlined = () => ({
components: {
KvIcon
},
data() {
return {
- iconNames: getFilenames(require.context('@/assets/icons/inline/', true, /\.svg$/))
+ iconNames: getFilenames(iconGlob)
}
},
template: `
@@ -59,13 +61,15 @@ export const inlined = () => ({
`,
});
+const spriteGlob = import.meta.glob('/src/assets/icons/sprite/*.*', { eager: true });
+
export const fromSprite = () => ({
components: {
KvIcon
},
data() {
return {
- iconNames: getFilenames(require.context('@/assets/icons/sprite/', true, /\.svg$/))
+ iconNames: getFilenames(spriteGlob)
}
},
template: `
diff --git a/.storybook/stories/KvIconButton.stories.js b/.storybook/stories/KvIconButton.stories.js
index 6c2106bf86..19639b5095 100644
--- a/.storybook/stories/KvIconButton.stories.js
+++ b/.storybook/stories/KvIconButton.stories.js
@@ -1,5 +1,5 @@
-import KvIcon from '@/components/Kv/KvIcon';
-import KvIconButton from '@/components/Kv/KvIconButton';
+import KvIcon from '#src/components/Kv/KvIcon';
+import KvIconButton from '#src/components/Kv/KvIconButton';
export default {
title: 'KV/KvIconButton',
diff --git a/.storybook/stories/KvLightbox.stories.js b/.storybook/stories/KvLightbox.stories.js
index edbf6a4de4..dd5cb61660 100644
--- a/.storybook/stories/KvLightbox.stories.js
+++ b/.storybook/stories/KvLightbox.stories.js
@@ -1,5 +1,5 @@
-import KvLightbox from '@/components/Kv/KvLightbox';
-import KvButton from '@/components/Kv/KvButton';
+import KvLightbox from '#src/components/Kv/KvLightbox';
+import KvButton from '#src/components/Kv/KvButton';
const loremIpsum = `
({
export const Inverted = Default.bind({});
Inverted.args = {
+ ...args,
inverted: true,
};
export const PreventClose = Default.bind({});
PreventClose.args = {
+ ...args,
preventClose: true,
};
export const Padding = Default.bind({});
Padding.args = {
+ ...args,
noPaddingTop: true,
noPaddingBottom: true,
noPaddingSides: true,
};
-export const SmallContent = (args, { argTypes }) => ({
+export const SmallContent = (_, { argTypes }) => ({
components: { KvLightbox, KvButton },
props: Object.keys(argTypes),
+ setup() { return args; },
template: `
({
`,
});
-export const WithControls = (args, { argTypes }) => ({
+export const WithControls = (_, { argTypes }) => ({
components: { KvLightbox, KvButton },
props: Object.keys(argTypes),
+ setup() { return args; },
template: `
({
`,
});
-export const WithFoundationGrid = (args, { argTypes }) => ({
+export const WithFoundationGrid = (_, { argTypes }) => ({
components: { KvLightbox, KvButton },
props: Object.keys(argTypes),
+ setup() { return args; },
template: `
({
`,
});
-export const CustomTitleColor = (args, { argTypes }) => ({
+export const CustomTitleColor = (_, { argTypes }) => ({
components: { KvLightbox },
props: Object.keys(argTypes),
+ setup() { return args; },
template: `
({
components: { KvLoadingParagraph },
props: Object.keys(argTypes),
+ setup() { return args; },
template: ' {
const template = (_args, { argTypes }) => ({
props: Object.keys(argTypes),
components: { KvPagination },
+ setup() { return args; },
template: ` ({
`,
});
-export const UsingEventsAndValue = (args, { argTypes }) => ({
+export const UsingEvents = (args, { argTypes }) => ({
props: Object.keys(argTypes),
components: {
KvPhoneInput
},
+ data() {
+ return {
+ myCoolPhoneNumber: '828-479-5482'
+ }
+ },
template: `
`,
methods: {
diff --git a/.storybook/stories/KvPillToggle.stories.js b/.storybook/stories/KvPillToggle.stories.js
index 86d69d89e4..c7d7a6e64d 100644
--- a/.storybook/stories/KvPillToggle.stories.js
+++ b/.storybook/stories/KvPillToggle.stories.js
@@ -1,4 +1,4 @@
-import KvPillToggle from '@/components/Kv/KvPillToggle';
+import KvPillToggle from '#src/components/Kv/KvPillToggle';
export default {
title: 'Kv/Form Elements/KvPillToggle',
diff --git a/.storybook/stories/KvProgressBar.stories.js b/.storybook/stories/KvProgressBar.stories.js
index b1cd8e0b2a..5c8c3d3279 100644
--- a/.storybook/stories/KvProgressBar.stories.js
+++ b/.storybook/stories/KvProgressBar.stories.js
@@ -1,29 +1,22 @@
-import KvProgressBar from '@/components/Kv/KvProgressBar';
+import KvProgressBar from '#src/components/Kv/KvProgressBar';
+
+const args = {
+ value: '20',
+ max: '100',
+};
export default {
title: 'Kv/KvProgressBar',
component: KvProgressBar,
- args: {
- value: '20',
- max: '100',
- },
- argTypes: {
- value: {
- control: 'range',
- options: {
- min: 0,
- max: 100,
- step: 1,
- }
- }
- }
+ args,
};
-export const Default = (args, { argTypes }) => ({
+export const Default = (_, { argTypes }) => ({
props: Object.keys(argTypes),
components: {
KvProgressBar
},
+ setup() { return args; },
template: `
({
`,
});
-export const Styled = (args, { argTypes }) => ({
+export const Styled = (_, { argTypes }) => ({
props: Object.keys(argTypes),
components: {
KvProgressBar
},
+ setup() { return args; },
template: `
{
const template = (_args, { argTypes }) => ({
props: Object.keys(argTypes),
components: { KvProgressCampaign },
+ setup() { return args; },
template: `
{
};
export const Default = story({
- daysLeft: 29, totalAmount: 4000, fundedAmount: 462,
+ daysLeft: '29', totalAmount: 4000, fundedAmount: 462,
});
export const MinimalStats = story({
- daysLeft: 29, totalAmount: 4000, fundedAmount: 462, minimalStats: true
+ daysLeft: '29', totalAmount: 4000, fundedAmount: 462, minimalStats: true
});
diff --git a/.storybook/stories/KvProgressCircle.stories.js b/.storybook/stories/KvProgressCircle.stories.js
index 4987bf81b5..08485ed122 100644
--- a/.storybook/stories/KvProgressCircle.stories.js
+++ b/.storybook/stories/KvProgressCircle.stories.js
@@ -1,15 +1,17 @@
-import KvProgressCircle from '@/components/Kv/KvProgressCircle';
+import KvProgressCircle from '#src/components/Kv/KvProgressCircle';
+
+const args = {
+ value: 10,
+ strokeWidth: 8,
+ showNumber: false,
+ arcScale: 1,
+ rotate: 0,
+};
export default {
title: 'Kv/KvProgressCircle',
component: KvProgressCircle,
- args: {
- value: 10,
- strokeWidth: 8,
- showNumber: false,
- arcScale: 1,
- rotate: 0,
- },
+ args,
argTypes: {
value: {
control: 'range',
@@ -22,11 +24,12 @@ export default {
}
};
-export const Default = (args, { argTypes }) => ({
+export const Default = (otherArgs, { argTypes }) => ({
props: Object.keys(argTypes),
components: {
KvProgressCircle
},
+ setup() { return { ...args, ...otherArgs }; },
template: `
({
`,
});
-export const Styled = (args, { argTypes }) => ({
+export const Styled = (_, { argTypes }) => ({
props: Object.keys(argTypes),
components: {
KvProgressCircle
},
+ setup() { return args; },
template: `
({
export const CShape = Default.bind({});
-CShape.args = {
+CShape.otherArgs = {
arcScale: .8,
rotate: 36,
}
diff --git a/.storybook/stories/KvRadio.stories.js b/.storybook/stories/KvRadio.stories.js
index fad03a6087..0ad7e18e82 100644
--- a/.storybook/stories/KvRadio.stories.js
+++ b/.storybook/stories/KvRadio.stories.js
@@ -1,4 +1,4 @@
-import KvRadio from '@/components/Kv/KvRadio';
+import KvRadio from '#src/components/Kv/KvRadio';
export default {
title: 'Kv/Form Elements/KvRadio',
diff --git a/.storybook/stories/KvRangeMinMaxSlider.stories.js b/.storybook/stories/KvRangeMinMaxSlider.stories.js
index 85773b2023..60f52b231e 100644
--- a/.storybook/stories/KvRangeMinMaxSlider.stories.js
+++ b/.storybook/stories/KvRangeMinMaxSlider.stories.js
@@ -1,4 +1,4 @@
-import KvRangeMinMaxSlider from '@/components/Kv/KvRangeMinMaxSlider';
+import KvRangeMinMaxSlider from '#src/components/Kv/KvRangeMinMaxSlider';
export default {
title: 'Kv/Form Elements/KvRangeMinMaxSlider',
@@ -9,6 +9,7 @@ const story = (args) => {
const template = (_args, { argTypes }) => ({
props: Object.keys(argTypes),
components: { KvRangeMinMaxSlider },
+ setup() { return args; },
template: `
{
const template = (_args, { argTypes }) => ({
props: Object.keys(argTypes),
components: { KvResultsPerPage },
+ setup() { return args; },
template: ` {
`,
})
- template.args = args;
return template;
};
diff --git a/.storybook/stories/KvSelect.stories.js b/.storybook/stories/KvSelect.stories.js
index f8f4a40494..847c445500 100644
--- a/.storybook/stories/KvSelect.stories.js
+++ b/.storybook/stories/KvSelect.stories.js
@@ -1,4 +1,4 @@
-import KvSelect from '@/components/Kv/KvSelect';
+import KvSelect from '#src/components/Kv/KvSelect';
export default {
title: 'Kv/Form Elements/KvSelect',
diff --git a/.storybook/stories/KvSelectBox.stories.js b/.storybook/stories/KvSelectBox.stories.js
index 0207764359..2ad737028c 100644
--- a/.storybook/stories/KvSelectBox.stories.js
+++ b/.storybook/stories/KvSelectBox.stories.js
@@ -1,4 +1,4 @@
-import KvSelectBox from '@/components/Kv/KvSelectBox';
+import KvSelectBox from '#src/components/Kv/KvSelectBox';
export default {
title: 'Kv/Form Elements/KvSelectBox',
@@ -14,6 +14,7 @@ const story = (args) => {
data: () => ({
myCoolModel: '',
}),
+ setup() { return args; },
template: `
diff --git a/.storybook/stories/KvSettingsCard.stories.js b/.storybook/stories/KvSettingsCard.stories.js
index 77e74c9863..2c40946c77 100644
--- a/.storybook/stories/KvSettingsCard.stories.js
+++ b/.storybook/stories/KvSettingsCard.stories.js
@@ -1,4 +1,11 @@
-import KvSettingsCard from '@/components/Kv/KvSettingsCard';
+import KvSettingsCard from '#src/components/Kv/KvSettingsCard';
+
+
+const args = {
+ disabled: false,
+ title: 'Settings Card Title',
+ cardContent: 'This is the content of the settings card. Insert anything here. The card can accommodate very tall or short content. The card should be used on a page that does not have a white background.',
+};
export default {
title: 'Kv/KvSettingsCard',
@@ -8,18 +15,15 @@ export default {
default: 'kiva-bg-lightgray',
},
},
- args: {
- disabled: false,
- title: 'Settings Card Title',
- cardContent: 'This is the content of the settings card. Insert anything here. The card can accommodate very tall or short content. The card should be used on a page that does not have a white background.',
- }
+ args,
};
-export const Default = (args, { argTypes }) => ({
+export const Default = (_, { argTypes }) => ({
components: {
KvSettingsCard,
},
props: Object.keys(argTypes),
+ setup() { return args; },
template: `
diff --git a/.storybook/stories/KvSocialShareButton.stories.js b/.storybook/stories/KvSocialShareButton.stories.js
index fa2b402d7d..5f31246ab9 100644
--- a/.storybook/stories/KvSocialShareButton.stories.js
+++ b/.storybook/stories/KvSocialShareButton.stories.js
@@ -1,17 +1,19 @@
-import KvSocialShareButton from '@/components/Kv/KvSocialShareButton';
+import KvSocialShareButton from '#src/components/Kv/KvSocialShareButton';
import apolloStoryMixin from '../mixins/apollo-story-mixin';
+const args = {
+ modalTitle: 'This is the share modal title',
+ shareMessage: `Kiva is an easy way to make a real difference in someone's life.`,
+ shareUrl: '/test',
+ variant: 'caution',
+ utmCampaign: 'social_share_campaign',
+ utmContent: 'testuser123',
+};
+
export default {
title: 'Kv/KvSocialShareButton',
component: KvSocialShareButton,
- args: {
- modalTitle: 'This is the share modal title',
- shareMessage: `Kiva is an easy way to make a real difference in someone's life.`,
- shareUrl: '/test',
- variant: 'caution',
- utmCampaign: 'social_share_campaign',
- utmContent: 'testuser123',
- },
+ args,
argTypes: {
variant: {
control: {
@@ -23,12 +25,13 @@ export default {
};
-export const Default = (args, { argTypes }) => ({
+export const Default = (_, { argTypes }) => ({
props: Object.keys(argTypes),
components: {
KvSocialShareButton,
},
mixins: [apolloStoryMixin()],
+ setup() { return args; },
template: `
({
props: Object.keys(argTypes),
mixins: [cookieStoreStoryMixin(), apolloStoryMixin()],
components: { ListLoanCard },
+ setup() { return args; },
template: ` {
const template = (_args, { argTypes }) => ({
props: Object.keys(argTypes),
components: { ChallengeHeader },
- template: `
She is requesting a loan to develop her business by buying a large number of bags of cassava flour and rice.
She wants to satisfy her customers and earn some money for her family.", lenderRepaymentTerm: 7, + description: "Atsupe is a young, 27-year-old woman who is married and has 3 children. She sells food and gets her supplies at the market.
She is requesting a loan to develop her business by buying a large number of bags of cassava flour and rice.
She wants to satisfy her customers and earn some money for her family.", lenderRepaymentTerm: 7, anonymizationLevel: "none", geocode: { city: "Tokoin", @@ -97,10 +97,16 @@ export const SpotlightLoanLoading = (args, { argTypes }) => ({ props: Object.keys(argTypes), mixins: [apolloStoryMixin({ loading: true }), cookieStoreStoryMixin()], components: { LoanSpotlight }, + setup() { + return { + categorySlug: 'recommended-by-lenders', + fallbackCategorySlug: 'women' + }; + }, template: `
{{ teamTooltipData.lendersForTeamMessage }} @@ -102,9 +100,11 @@ diff --git a/src/components/Checkout/BasketItem.vue b/src/components/Checkout/BasketItem.vue index da3c6e0a83..2768032660 100644 --- a/src/components/Checkout/BasketItem.vue +++ b/src/components/Checkout/BasketItem.vue @@ -116,15 +116,15 @@ diff --git a/src/components/Checkout/DonateRepaymentsToggle.vue b/src/components/Checkout/DonateRepaymentsToggle.vue index d86792662a..68aa1c5a28 100644 --- a/src/components/Checkout/DonateRepaymentsToggle.vue +++ b/src/components/Checkout/DonateRepaymentsToggle.vue @@ -62,10 +62,10 @@ import _get from 'lodash/get'; import _filter from 'lodash/filter'; import _forEach from 'lodash/forEach'; import numeral from 'numeral'; -import initializeCheckout from '@/graphql/query/checkout/initializeCheckout.graphql'; -import updateLoanReservationDonateRepayments from '@/graphql/mutation/updateLoanReservationDonateRepayments.graphql'; -import KvLightbox from '~/@kiva/kv-components/vue/KvLightbox'; -import KvCheckbox from '~/@kiva/kv-components/vue/KvCheckbox'; +import initializeCheckout from '#src/graphql/query/checkout/initializeCheckout.graphql'; +import updateLoanReservationDonateRepayments from '#src/graphql/mutation/updateLoanReservationDonateRepayments.graphql'; +import KvLightbox from '@kiva/kv-components/vue/KvLightbox'; +import KvCheckbox from '@kiva/kv-components/vue/KvCheckbox'; export default { name: 'DonateRepaymentsToggle', @@ -188,7 +188,7 @@ export default { diff --git a/src/components/Checkout/DonationItem.vue b/src/components/Checkout/DonationItem.vue index d17b23817b..493d477f64 100644 --- a/src/components/Checkout/DonationItem.vue +++ b/src/components/Checkout/DonationItem.vue @@ -1,119 +1,118 @@
Yes. Auto deposits can be canceled or edited at any time. To do so, go to your subscription settings.
' +}; export default { title: 'Kv/KvExpandableQuestion', component: KvExpandableQuestion, - args: { - title: 'Can I cancel anytime?', - content: 'Yes. Auto deposits can be canceled or edited at any time. To do so, go to your subscription settings.
' - }, + args, }; export const Default = (args, { argTypes }) => ({ @@ -19,12 +16,13 @@ export const Default = (args, { argTypes }) => ({ components: { KvExpandableQuestion }, + setup() { return args; }, template: `
-
- .circular {
- border-radius: 50%;
- overflow: hidden;
- border: 1px solid #ccc;
- box-sizing: content-box;
- }
-
-
- `,
-});
-Circular.args = {
- aspectRatio: '1x1'
+ isSquare: true,
};
-export const CircularInlineSvg = Circular.bind({});
-CircularInlineSvg.args = {
- ...Circular.args,
- inlineSvg: true
-}
-
export const AllCountries = (args, { argTypes }) => ({
props: Object.keys(argTypes),
components: {
@@ -114,8 +74,6 @@ export const AllCountries = (args, { argTypes }) => ({
{{ country.code }} - {{ country.name }}
@@ -16,18 +16,20 @@ const loremIpsum = `
`; +const args = { + visible: true, + preventClose: false, + title: 'Test Title', + inverted: false, + noPaddingTop: false, + noPaddingBottom: false, + noPaddingSides: false, +}; + export default { title: 'Kv/KvLightbox', component: KvLightbox, - args: { - visible: true, - preventClose: false, - title: 'Test Title', - inverted: false, - noPaddingTop: false, - noPaddingBottom: false, - noPaddingSides: false, - }, + args, }; export const Default = (args, { argTypes }) => ({ @@ -44,6 +46,7 @@ export const Default = (args, { argTypes }) => ({ this.lightboxVisible = false; } }, + setup() { return args; }, template: `
-
`,
+
+
`,
})
template.args = args;
return template;
diff --git a/.storybook/stories/KvLoanCards.stories.js b/.storybook/stories/KvLoanCards.stories.js
index dbeb7977f1..fc0a75f30c 100644
--- a/.storybook/stories/KvLoanCards.stories.js
+++ b/.storybook/stories/KvLoanCards.stories.js
@@ -1,4 +1,4 @@
-import NewHomePageLoanCard from '@/components/LoanCards/NewHomePageLoanCard';
+import NewHomePageLoanCard from '#src/components/LoanCards/NewHomePageLoanCard';
import apolloStoryMixin from '../mixins/apollo-story-mixin';
import cookieStoreStoryMixin from '../mixins/cookie-store-story-mixin';
diff --git a/.storybook/stories/KvMap.stories.js b/.storybook/stories/KvMap.stories.js
index 6d5f81cb04..380cfa6220 100644
--- a/.storybook/stories/KvMap.stories.js
+++ b/.storybook/stories/KvMap.stories.js
@@ -1,4 +1,4 @@
-import KvMap from '@/components/Kv/KvMap';
+import KvMap from '#src/components/Kv/KvMap';
export default {
title: 'Kv/KvMap',
@@ -19,6 +19,7 @@ export default {
const Template = (args, { argTypes }) => ({
props: Object.keys(argTypes),
components: { KvMap },
+ setup() { return args; },
template: `
+
-
`,
-
+ setup() { return args; },
+ template: `
+
`,
+
});
- template.args = args;
return template;
};
const teamData = {
- name: "LOTUS: Lend Out To Uplift Self-sufficiency",
- image: {
- url: "https://www-0.development.kiva.org/img/s100/6c2c7e2306275173dff001306158bf4d.jpg"
- },
+ name: "LOTUS: Lend Out To Uplift Self-sufficiency",
+ image: {
+ url: "https://www-0.development.kiva.org/img/s100/6c2c7e2306275173dff001306158bf4d.jpg"
+ },
};
const challengeData = {
- name: "New Year’s Challenge",
- description: "Let's get 2024 off to a great start with a team challenge! If we can fully fund all of these loans as a team by Feb 16, 2024 we'll unlock the surprise reward!",
- descriptionAuthor: {
- name: "Ronan",
- image: {
- url: "https://www-0.development.kiva.org/img/s100/ed413098ef247db85e2c7ae4b2fd9552.jpg",
- }
- },
- participation: {
- totalCount: 2,
- values: [
- {
- amountLent: 100,
- lender: {
- id: 1234,
- name: "Roger",
- image: {
- url: "https://www-0.development.kiva.org/img/s100/4d844ac2c0b77a8a522741b908ea5c32.jpg",
- }
- }
- },
- {
- amountLent: 50,
- lender: {
- id: 12351,
- name: "Casey",
- image: {
- url: "https://www-0.development.kiva.org/img/s100/251d0b45d19ba768b8180ab281aa5224.jpg",
- }
- }
- }
- ]
- },
- startDate: "2024-01-22T17:00:00.000Z",
- endDate: "2024-04-15T07:59:00.000Z",
+ name: "New Year’s Challenge",
+ description: "Let's get 2024 off to a great start with a team challenge! If we can fully fund all of these loans as a team by Feb 16, 2024 we'll unlock the surprise reward!",
+ descriptionAuthor: {
+ name: "Ronan",
+ image: {
+ url: "https://www-0.development.kiva.org/img/s100/ed413098ef247db85e2c7ae4b2fd9552.jpg",
+ }
+ },
+ participation: {
+ totalCount: 2,
+ values: [
+ {
+ amountLent: 100,
+ lender: {
+ id: 1234,
+ name: "Roger",
+ image: {
+ url: "https://www-0.development.kiva.org/img/s100/4d844ac2c0b77a8a522741b908ea5c32.jpg",
+ }
+ }
+ },
+ {
+ amountLent: 50,
+ lender: {
+ id: 12351,
+ name: "Casey",
+ image: {
+ url: "https://www-0.development.kiva.org/img/s100/251d0b45d19ba768b8180ab281aa5224.jpg",
+ }
+ }
+ }
+ ]
+ },
+ startDate: "2024-01-22T17:00:00.000Z",
+ endDate: "2024-04-15T07:59:00.000Z",
}
export const Default = story({ challengeData, teamData });
diff --git a/.storybook/stories/LoanSearchCheckboxListFilter.stories.js b/.storybook/stories/LoanSearchCheckboxListFilter.stories.js
index 1663beeedc..acd2b31ee1 100644
--- a/.storybook/stories/LoanSearchCheckboxListFilter.stories.js
+++ b/.storybook/stories/LoanSearchCheckboxListFilter.stories.js
@@ -1,4 +1,4 @@
-import LoanSearchCheckboxListFilter from '@/components/Lend/LoanSearch/LoanSearchCheckboxListFilter';
+import LoanSearchCheckboxListFilter from '#src/components/Lend/LoanSearch/LoanSearchCheckboxListFilter';
export default {
title: 'Loan Search/Loan Search Checkbox List Filter',
@@ -9,9 +9,9 @@ const story = (args = {}) => {
const template = (_, { argTypes }) => ({
props: Object.keys(argTypes),
components: { LoanSearchCheckboxListFilter },
+ setup() { return args; },
template: 'She is requesting a loan to develop her business by buying a large number of bags of cassava flour and rice.
She wants to satisfy her customers and earn some money for her family.", lenderRepaymentTerm: 7, + description: "Atsupe is a young, 27-year-old woman who is married and has 3 children. She sells food and gets her supplies at the market.
She is requesting a loan to develop her business by buying a large number of bags of cassava flour and rice.
She wants to satisfy her customers and earn some money for her family.", lenderRepaymentTerm: 7, anonymizationLevel: "none", geocode: { city: "Tokoin", @@ -97,10 +97,16 @@ export const SpotlightLoanLoading = (args, { argTypes }) => ({ props: Object.keys(argTypes), mixins: [apolloStoryMixin({ loading: true }), cookieStoreStoryMixin()], components: { LoanSpotlight }, + setup() { + return { + categorySlug: 'recommended-by-lenders', + fallbackCategorySlug: 'women' + }; + }, template: `
@@ -164,24 +194,30 @@ export const SpotlightLoanDoubleAverage = (args, { argTypes }) => ({
});
-export const SpotlightLoanInsideGrid= (args, { argTypes }) => ({
+export const SpotlightLoanInsideGrid = (args, { argTypes }) => ({
props: Object.keys(argTypes),
mixins: [apolloStoryMixin({ queryResult: getLoan(loanAverage) }), cookieStoreStoryMixin()],
- components: { LoanSpotlight, KvGrid, KvPageContainer },
+ components: { LoanSpotlight, KvGrid, KvPageContainer },
+ setup() {
+ return {
+ categorySlug: 'recommended-by-lenders',
+ fallbackCategorySlug: 'women'
+ };
+ },
template: `
-
-
-
-
+
+
+
+
`,
});
diff --git a/.storybook/stories/MainCategoryTile.stories.js b/.storybook/stories/MainCategoryTile.stories.js
index cf56a4b695..35f5e5fc2a 100644
--- a/.storybook/stories/MainCategoryTile.stories.js
+++ b/.storybook/stories/MainCategoryTile.stories.js
@@ -1,120 +1,122 @@
-import MainCategoryTile from '@/components/Categories/MainCategoryTile';
-import KvGrid from '~/@kiva/kv-components/vue/KvGrid';
-import KvPageContainer from '~/@kiva/kv-components/vue/KvPageContainer';
+import MainCategoryTile from '#src/components/Categories/MainCategoryTile';
+import KvGrid from '@kiva/kv-components/vue/KvGrid';
+import KvPageContainer from '@kiva/kv-components/vue/KvPageContainer';
export default {
- title: 'Components/Main Category Tile',
- component: MainCategoryTile,
- args: {
- tileSize: 'small',
+ title: 'Components/Main Category Tile',
+ component: MainCategoryTile,
+ args: {
+ tileSize: 'small',
numberTiles: 3
- },
- argTypes: {
- tileSize: {
- control: {
- type: 'select',
- options: [
- 'small', 'medium', 'large'
- ],
- }
- },
- },
+ },
+ argTypes: {
+ tileSize: {
+ control: {
+ type: 'select',
+ },
+ options: [
+ 'small', 'medium', 'large'
+ ],
+ },
+ },
};
const story = (args = {}) => {
- const template = (_args, { argTypes }) => ({
- props: Object.keys(argTypes),
- components: { MainCategoryTile, KvGrid, KvPageContainer },
- template: `
-
-
-
-
+ const template = (_args, { argTypes }) => ({
+ props: Object.keys(argTypes),
+ components: { MainCategoryTile, KvGrid, KvPageContainer },
+ setup() { return args; },
+ template: `
+
+
+
+
`,
- })
- template.args = args;
- return template;
+ })
+ template.args = args;
+ return template;
};
const manyCategoriesStory = (args = {}) => {
- const template = (_args, { argTypes }) => ({
- props: Object.keys(argTypes),
- components: { MainCategoryTile, KvGrid, KvPageContainer },
- template: `
-
-
-
-
+ const template = (_args, { argTypes }) => ({
+ props: Object.keys(argTypes),
+ components: { MainCategoryTile, KvGrid, KvPageContainer },
+ setup() { return args; },
+ template: `
+
+
+
+
`,
- })
- template.args = args;
- return template;
+ })
+ template.args = args;
+ return template;
};
export const Default = story({
- tileSize: 'small',
- categoryName: 'Food',
- categoryDescription: "These borrowers are fueling their communities with food (and love) at markets, small grocery stores and restaurants.",
- numberLoans: 1913,
- image: "https://www-dev-kiva-org-0.freetls.fastly.net/img/w313h176/ad03fb699615d7ea3061dd80220100c2.jpg",
- retinaImage: "https://www-dev-kiva-org-0.freetls.fastly.net/img/w626h352/2b5c9493edddac4fe3210cddb930ec47.jpg",
- categoryUrl: "/lend-by-category/food"
+ tileSize: 'small',
+ categoryName: 'Food',
+ categoryDescription: "These borrowers are fueling their communities with food (and love) at markets, small grocery stores and restaurants.",
+ numberLoans: 1913,
+ image: "https://www-dev-kiva-org-0.freetls.fastly.net/img/w313h176/ad03fb699615d7ea3061dd80220100c2.jpg",
+ retinaImage: "https://www-dev-kiva-org-0.freetls.fastly.net/img/w626h352/2b5c9493edddac4fe3210cddb930ec47.jpg",
+ categoryUrl: "/lend-by-category/food"
});
export const Large = story({
- tileSize: 'large',
- categoryName: 'Women',
- categoryDescription: "Worldwide, women have much less economic opportunity, security, and freedom. Support women starting their own businesses, going to school, and investing in the health of their communities and families.",
- numberLoans: 6216,
- image: "https://www-dev-kiva-org-0.freetls.fastly.net/img/w313h176/bd25843149e68a42a681f4bc00a660b8.jpg",
- retinaImage: "https://www-dev-kiva-org-0.freetls.fastly.net/img/w626h352/59b6320c2bb65324522c35619bc57932.jpg",
- categoryUrl: "/lend-by-category/women"
+ tileSize: 'large',
+ categoryName: 'Women',
+ categoryDescription: "Worldwide, women have much less economic opportunity, security, and freedom. Support women starting their own businesses, going to school, and investing in the health of their communities and families.",
+ numberLoans: 6216,
+ image: "https://www-dev-kiva-org-0.freetls.fastly.net/img/w313h176/bd25843149e68a42a681f4bc00a660b8.jpg",
+ retinaImage: "https://www-dev-kiva-org-0.freetls.fastly.net/img/w626h352/59b6320c2bb65324522c35619bc57932.jpg",
+ categoryUrl: "/lend-by-category/women"
});
export const Medium = story({
- tileSize: 'medium',
- categoryName: 'Livestock',
- categoryDescription: "Cows, pigs and other animals have the potential to dramatically increase farming incomes, but the initial cost can be a barrier. Help farmers invest in their futures.",
- numberLoans: 118,
- image: "https://www-dev-kiva-org-0.freetls.fastly.net/img/w313h176/4c354e77bb8686416b8e0938884fe3d5.jpg",
- retinaImage: "https://www-dev-kiva-org-0.freetls.fastly.net/img/w626h352/4b28a0879c81077484e0ed28a18eba23.jpg",
- categoryUrl: "/lend-by-category/livestock"
+ tileSize: 'medium',
+ categoryName: 'Livestock',
+ categoryDescription: "Cows, pigs and other animals have the potential to dramatically increase farming incomes, but the initial cost can be a barrier. Help farmers invest in their futures.",
+ numberLoans: 118,
+ image: "https://www-dev-kiva-org-0.freetls.fastly.net/img/w313h176/4c354e77bb8686416b8e0938884fe3d5.jpg",
+ retinaImage: "https://www-dev-kiva-org-0.freetls.fastly.net/img/w626h352/4b28a0879c81077484e0ed28a18eba23.jpg",
+ categoryUrl: "/lend-by-category/livestock"
});
export const Small = story({
- tileSize: 'small',
- categoryName: 'Health',
- categoryDescription: "Help families and communities access the medicine, surgeries and healthcare services they need.",
- numberLoans: 79,
- image: "https://www-dev-kiva-org-0.freetls.fastly.net/img/w313h176/4682bd972ac323a6ba8cdc55ea75bd99.jpg",
- retinaImage: "https://www-dev-kiva-org-0.freetls.fastly.net/img/w626h352/3b1616d297b2fd575934568882068ace.jpg",
- categoryUrl: "/lend-by-category/health"
- });
+ tileSize: 'small',
+ categoryName: 'Health',
+ categoryDescription: "Help families and communities access the medicine, surgeries and healthcare services they need.",
+ numberLoans: 79,
+ image: "https://www-dev-kiva-org-0.freetls.fastly.net/img/w313h176/4682bd972ac323a6ba8cdc55ea75bd99.jpg",
+ retinaImage: "https://www-dev-kiva-org-0.freetls.fastly.net/img/w626h352/3b1616d297b2fd575934568882068ace.jpg",
+ categoryUrl: "/lend-by-category/health"
+});
export const ManyCategories = manyCategoriesStory({
tileSize: 'small',
categoryName: 'Livestock',
- categoryDescription: "Cows, pigs and other animals have the potential to dramatically increase farming incomes, but the initial cost can be a barrier. Help farmers invest in their futures.",
- numberLoans: 118,
- image: "https://www-dev-kiva-org-0.freetls.fastly.net/img/w313h176/4c354e77bb8686416b8e0938884fe3d5.jpg",
- retinaImage: "https://www-dev-kiva-org-0.freetls.fastly.net/img/w626h352/4b28a0879c81077484e0ed28a18eba23.jpg",
+ categoryDescription: "Cows, pigs and other animals have the potential to dramatically increase farming incomes, but the initial cost can be a barrier. Help farmers invest in their futures.",
+ numberLoans: 118,
+ image: "https://www-dev-kiva-org-0.freetls.fastly.net/img/w313h176/4c354e77bb8686416b8e0938884fe3d5.jpg",
+ retinaImage: "https://www-dev-kiva-org-0.freetls.fastly.net/img/w626h352/4b28a0879c81077484e0ed28a18eba23.jpg",
categoryUrl: "/lend-by-category/livestock",
numberTiles: 3
});
diff --git a/.storybook/stories/MonthlyGoodSelector.stories.js b/.storybook/stories/MonthlyGoodSelector.stories.js
index 13ef123438..36ad8cf5d6 100644
--- a/.storybook/stories/MonthlyGoodSelector.stories.js
+++ b/.storybook/stories/MonthlyGoodSelector.stories.js
@@ -1,6 +1,6 @@
-import MonthlyGoodSelectorDesktop from '@/components/MonthlyGood/MonthlyGoodSelectorDesktop';
-import MonthlyGoodSelectorMobile from '@/components/MonthlyGood/MonthlyGoodSelectorMobile';
-import loanGroupCategoriesMixin from '@/plugins/loan-group-categories';
+import MonthlyGoodSelectorDesktop from '#src/components/MonthlyGood/MonthlyGoodSelectorDesktop';
+import MonthlyGoodSelectorMobile from '#src/components/MonthlyGood/MonthlyGoodSelectorMobile';
+import loanGroupCategoriesMixin from '#src/plugins/loan-group-categories';
const lendingCategories = loanGroupCategoriesMixin.data().lendingCategories;
diff --git a/.storybook/stories/MonthlyGoodUpdateForm.stories.js b/.storybook/stories/MonthlyGoodUpdateForm.stories.js
index ffb2e91b60..d6734acdfc 100644
--- a/.storybook/stories/MonthlyGoodUpdateForm.stories.js
+++ b/.storybook/stories/MonthlyGoodUpdateForm.stories.js
@@ -1,4 +1,4 @@
-import MonthlyGoodUpdateForm from '@/components/Forms/MonthlyGoodUpdateForm';
+import MonthlyGoodUpdateForm from '#src/components/Forms/MonthlyGoodUpdateForm';
export default {
title: 'Forms/MonthlyGoodUpdateForm',
@@ -27,6 +27,7 @@ export const Default = (args, { argTypes }) => ({
components: {
MonthlyGoodUpdateForm
},
+ setup() { return args; },
template: `
({
+export const Default = (args, { argTypes }) => ({
components: {
MultiAmountSelector
},
@@ -38,7 +38,6 @@ export const multiAmountSelector = (args, { argTypes }) => ({
}
],
amountSelected: '25',
- customAmount: 5,
};
},
props: Object.keys(argTypes),
@@ -47,19 +46,18 @@ export const multiAmountSelector = (args, { argTypes }) => ({
id="amount-selector"
:options="amountOptions"
:selected="amountSelected"
- @pill-toggled="pillToggled"
+ @pill-toggled="handlePillToggled"
:min-custom-amount="minCustomAmount"
:max-custom-amount="maxCustomAmount"
- @custom-amount-updated="customAmountUpdated"
+ @custom-amount-updated="handleCustomAmountUpdated"
:split-pills="true"
+ :custom-amount="25"
/>
`,
methods: {
// Implementation Required in Parent Component
// Enables tracking of selected option/key
- pillToggled(value) {
- console.log('select-amount');
- console.log(value);
+ handlePillToggled(value) {
if (value === 'custom') {
this.amountSelected = 'custom';
} else {
@@ -68,10 +66,7 @@ export const multiAmountSelector = (args, { argTypes }) => ({
},
// Implementation Required in Parent Component
// Enables tracking of selected option/key associated value
- customAmountUpdated(value) {
- console.log('custom-amount-updated');
- console.log(value);
- }
+ handleCustomAmountUpdated(value) { }
}
});
diff --git a/.storybook/stories/PortfolioKivaCreditStats.stories.js b/.storybook/stories/PortfolioKivaCreditStats.stories.js
index 5273e2ce26..fc5e320398 100644
--- a/.storybook/stories/PortfolioKivaCreditStats.stories.js
+++ b/.storybook/stories/PortfolioKivaCreditStats.stories.js
@@ -1,6 +1,6 @@
-import KvGrid from '~/@kiva/kv-components/vue/KvGrid';
-import KvPageContainer from '~/@kiva/kv-components/vue/KvPageContainer';
-import KivaCreditStats from '@/pages/Portfolio/ImpactDashboard/KivaCreditStats';
+import KvGrid from '@kiva/kv-components/vue/KvGrid';
+import KvPageContainer from '@kiva/kv-components/vue/KvPageContainer';
+import KivaCreditStats from '#src/pages/Portfolio/ImpactDashboard/KivaCreditStats';
import apolloStoryMixin from '../mixins/apollo-story-mixin';
import cookieStoreStoryMixin from '../mixins/cookie-store-story-mixin';
diff --git a/.storybook/stories/PromoCreditBanner.stories.js b/.storybook/stories/PromoCreditBanner.stories.js
index ae2eace784..8914cc0209 100644
--- a/.storybook/stories/PromoCreditBanner.stories.js
+++ b/.storybook/stories/PromoCreditBanner.stories.js
@@ -1,59 +1,55 @@
-import Vue from 'vue'
-import PromoCreditBanner from '@/components/WwwFrame/PromotionalBanner/Banners/PromoCreditBanner.vue';
+import PromoCreditBanner from '#src/components/WwwFrame/PromotionalBanner/Banners/PromoCreditBanner.vue';
-// import plugins
-import kivaPlugins from '@/plugins';
-Vue.use(kivaPlugins);
-
-export default {
- title: 'WwwFrame/Banners/PromoCreditBanner',
- component: PromoCreditBanner,
- args: {
- basketState: {
- shop: {
- nonTrivialItemCount: 1,
- basket: {
- id: 12,
- hasFreeCredits: true,
- credits: {
- values: {
+const args = {
+ basketState: {
+ shop: {
+ nonTrivialItemCount: 1,
+ basket: {
+ id: 12,
+ hasFreeCredits: true,
+ credits: {
+ values: {
+ id: 12,
+ available: true,
+ creditType: 'bonus_credit',
+ promoFund: {
id: 12,
- available: true,
- creditType: 'bonus_credit',
- promoFund: {
- id: 12,
- displayName: 'test',
- }
+ displayName: 'test',
}
- },
- totals: {
- bonusAvailableTotal: 124312.23,
- freeTrialAvailableTotal: 2432.342,
- redemptionCodeAvailableTotal: 24.241,
- universalCodeAvailableTotal: 234
}
-
+ },
+ totals: {
+ bonusAvailableTotal: 124312.23,
+ freeTrialAvailableTotal: 2432.342,
+ redemptionCodeAvailableTotal: 24.241,
+ universalCodeAvailableTotal: 234
}
+
+ }
+ },
+ my: {
+ userAccount: {
+ id: 1017469,
+ balance: "0.00",
+ promoBalance: "10.00",
},
- my: {
- userAccount: {
- id: 1017469,
- balance: "0.00",
- promoBalance: "10.00",
+ lender: {
+ image: {
+ id: 726677,
+ url: "https://www-dev-kiva-org.freetls.fastly.net/img/s140/726677.jpg",
},
- lender: {
- image: {
- id: 726677,
- url: "https://www-dev-kiva-org.freetls.fastly.net/img/s140/726677.jpg",
- },
- },
- isBorrower: false,
- mostRecentBorrowedLoan: null,
- trustee: null,
- }
+ },
+ isBorrower: false,
+ mostRecentBorrowedLoan: null,
+ trustee: null,
}
}
+};
+export default {
+ title: 'WwwFrame/Banners/PromoCreditBanner',
+ component: PromoCreditBanner,
+ args,
};
export const Default = (args, { argTypes }) => ({
@@ -61,6 +57,7 @@ export const Default = (args, { argTypes }) => ({
components: {
PromoCreditBanner
},
+ setup() { return args; },
template: `
({
components: {
TheFooter
},
+ setup() { return args; },
template: `
({
components: {
TheFooterCorporate
},
+ setup() { return args; },
template: `
({
`,
});
-export const Visitor = Default.bind({});
+export const Visitor = Default.bind(args);
-export const VisitorItemInCart = (args, { argTypes }) => ({
+export const VisitorItemInCart = (_, { argTypes }) => ({
props: Object.keys(argTypes),
components: {
TheHeader,
@@ -215,12 +215,13 @@ export const VisitorItemInCart = (args, { argTypes }) => ({
provide: {
apollo: provideMockedApollo(itemInCart),
},
+ setup() { return args; },
template: `
({
+export const Default = (otherArgs, { argTypes }) => ({
props: Object.keys(argTypes),
components: {
WwwPageCorporate
},
mixins: [apolloStoryMixin(), cookieStoreStoryMixin(), kvAuth0StoryMixin],
+ setup() { return { ...args, ...otherArgs } },
template: `
({
WwwPageMinimal
},
mixins: [apolloStoryMixin(), cookieStoreStoryMixin(), kvAuth0StoryMixin],
+ setup() { return args; },
template: `
{
-
- const newConfig = {
- ...config,
- devtool: false,
- optimization: {
- minimize: false,
- minimizer: [],
- },
- resolve: {
- ...config.resolve,
- alias: {
- ...config.resolve.alias,
- ...kvWebpackConfig.resolve.alias
- }
- },
- module: {
- ...config.module,
- rules: [
- {
- test: /\.stories\.jsx?$/,
- loaders: [require.resolve('@storybook/source-loader')],
- enforce: 'pre',
- },
- {
- test: /\.vue$/,
- loader: 'vue-docgen-loader', // necessary for storybook prop tables
- enforce: 'post',
- },
- ...kvWebpackConfig.module.rules,
- ]
- },
- plugins: [
- ...config.plugins,
- // minify and combine svg icons
- new SvgStorePlugin({
- svg: {
- 'xmlns': 'http://www.w3.org/2000/svg',
- 'xmlns:xlink': 'http://www.w3.org/1999/xlink',
- 'style': 'display:none;',
- },
- svgoOptions: {
- floatPrecision: 3,
- },
- prefix: 'icon-',
- }),
- ]
- };
-
- return newConfig;
-};
diff --git a/.stylelintrc b/.stylelintrc
index 2bc3f11328..3012f4ded0 100644
--- a/.stylelintrc
+++ b/.stylelintrc
@@ -1,27 +1,35 @@
{
- "plugins": [ "stylelint-scss" ],
- "extends": "stylelint-config-standard",
- "rules": {
- "color-hex-case": null,
- "indentation": "tab",
- "at-rule-no-unknown": null,
- "scss/at-rule-no-unknown": [
- true,
- {
- "ignoreAtRules": [
- "tailwind",
- "apply",
- "variants",
- "responsive",
- "screen"
- ]
- }
+ "extends": [
+ "stylelint-config-standard-scss",
+ "stylelint-config-standard-vue/scss"
],
- "at-rule-empty-line-before": null,
- "no-empty-source": null,
- "unit-allowed-list": ["em", "rem", "%", "px", "deg", "vh", "vw", "ms", "s", "fr"],
- "selector-pseudo-element-no-unknown": [true, {
- "ignorePseudoElements": ["v-deep"]
- }]
- }
+ "rules": {
+ "at-rule-no-unknown": null,
+ "scss/at-rule-no-unknown": [
+ true,
+ {
+ "ignoreAtRules": [
+ "tailwind",
+ "apply",
+ "variants",
+ "responsive",
+ "screen"
+ ]
+ }
+ ],
+ "at-rule-empty-line-before": null,
+ "no-empty-source": null,
+ "unit-allowed-list": ["em", "rem", "%", "px", "deg", "vh", "vw", "ms", "s", "fr"],
+ "keyframes-name-pattern": null,
+ "scss/dollar-variable-pattern": null,
+ "selector-class-pattern": null,
+ "selector-id-pattern": null,
+ "selector-attribute-quotes": "never",
+ "scss/at-mixin-argumentless-call-parentheses": "always",
+ "number-max-precision": null,
+ "scss/comment-no-empty": null,
+ "scss/at-extend-no-missing-placeholder": null,
+ "scss/operator-no-newline-after": null,
+ "scss/operator-no-unspaced": null
+ }
}
diff --git a/Caddyfile b/Caddyfile
index 2e5714a398..8eaf3e5139 100644
--- a/Caddyfile
+++ b/Caddyfile
@@ -5,3 +5,7 @@
kiva-ui.local {
reverse_proxy localhost:8888
}
+
+kiva-ui.local:24679 {
+ reverse_proxy localhost:24678
+}
diff --git a/babel.config.js b/babel.config.cjs
similarity index 94%
rename from babel.config.js
rename to babel.config.cjs
index 84395f2f3f..3f8f101154 100644
--- a/babel.config.js
+++ b/babel.config.cjs
@@ -34,6 +34,7 @@ module.exports = {
'@babel/preset-env'
],
plugins: [
+ 'babel-plugin-transform-import-meta',
'@babel/plugin-transform-modules-commonjs',
'@babel/plugin-syntax-dynamic-import',
'@babel/plugin-syntax-import-meta',
diff --git a/server/.eslintrc.js b/build/.eslintrc.cjs
similarity index 52%
rename from server/.eslintrc.js
rename to build/.eslintrc.cjs
index ce922cdd53..40b2f6f113 100644
--- a/server/.eslintrc.js
+++ b/build/.eslintrc.cjs
@@ -1,5 +1,6 @@
module.exports = {
rules: {
'no-console': 'off',
+ 'import/extensions': [2, 'ignorePackages'],
}
-}
+};
diff --git a/build/assets-path.js b/build/assets-path.js
deleted file mode 100644
index e3bec88295..0000000000
--- a/build/assets-path.js
+++ /dev/null
@@ -1,6 +0,0 @@
-var path = require('path');
-var config = require('../config');
-
-module.exports = function (_path) {
- return path.posix.join(config.build.assetsSubDirectory, _path)
-};
diff --git a/build/build.js b/build/build.js
deleted file mode 100644
index e3d6b16ac1..0000000000
--- a/build/build.js
+++ /dev/null
@@ -1,33 +0,0 @@
-require('./check-versions')()
-
-process.env.NODE_ENV = 'production'
-
-var ora = require('ora')
-var rm = require('rimraf')
-// var path = require('path')
-var chalk = require('chalk')
-var webpack = require('webpack')
-var config = require('../config')
-var webpackClientConfig = require('./webpack.client.prod.conf')
-var webpackServerConfig = require('./webpack.server.conf')
-
-var spinner = ora('building for production...')
-spinner.start()
-
-//path.join(config.build.assetsRoot, config.build.assetsSubDirectory)
-rm(config.build.assetsRoot, err => {
- if (err) throw err
- webpack([webpackClientConfig, webpackServerConfig], function (err, stats) {
- spinner.stop()
- if (err) throw err
- process.stdout.write(stats.toString({
- colors: true,
- modules: false,
- children: false,
- chunks: false,
- chunkModules: false
- }) + '\n\n')
-
- console.log(chalk.cyan(' Build complete.\n'))
- })
-})
diff --git a/build/build.report.js b/build/build.report.js
deleted file mode 100644
index 0325fde640..0000000000
--- a/build/build.report.js
+++ /dev/null
@@ -1,27 +0,0 @@
-require('./check-versions')()
-
-process.env.NODE_ENV = 'production'
-
-var ora = require('ora')
-var rm = require('rimraf')
-var chalk = require('chalk')
-var webpack = require('webpack')
-var config = require('../config')
-var webpackClientConfig = require('./webpack.client.report.conf')
-
-var spinner = ora('building for production...')
-spinner.start()
-
-rm(config.build.assetsRoot, err => {
- if (err) throw err
- // NOTE this only runs on the client config
- webpack([webpackClientConfig], function (err, stats) {
- spinner.stop()
- if (err) throw err
- process.stdout.write(stats.toString({
- colors: true
- }) + '\n\n')
-
- console.log(chalk.cyan(' Build complete.\n'))
- })
-})
diff --git a/build/check-versions.js b/build/check-versions.js
deleted file mode 100644
index 49a3119bc1..0000000000
--- a/build/check-versions.js
+++ /dev/null
@@ -1,48 +0,0 @@
-var chalk = require('chalk')
-var semver = require('semver')
-var packageConfig = require('../package.json')
-var shell = require('shelljs')
-function exec (cmd) {
- return require('child_process').execSync(cmd).toString().trim()
-}
-
-var versionRequirements = [
- {
- name: 'node',
- currentVersion: semver.clean(process.version),
- versionRequirement: packageConfig.engines.node
- },
-]
-
-if (shell.which('npm')) {
- versionRequirements.push({
- name: 'npm',
- currentVersion: exec('npm --version'),
- versionRequirement: packageConfig.engines.npm
- })
-}
-
-module.exports = function () {
- var warnings = []
- for (var i = 0; i < versionRequirements.length; i++) {
- var mod = versionRequirements[i]
- if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
- warnings.push(mod.name + ': ' +
- chalk.red(mod.currentVersion) + ' should be ' +
- chalk.green(mod.versionRequirement)
- )
- }
- }
-
- if (warnings.length) {
- console.log('')
- console.log(chalk.yellow('To use this template, you must update following to modules:'))
- console.log()
- for (var i = 0; i < warnings.length; i++) {
- var warning = warnings[i]
- console.log(' ' + warning)
- }
- console.log()
- process.exit(1)
- }
-}
diff --git a/build/fetch-schema.js b/build/fetch-schema.js
index 6ff348d9ff..fb8a8ea97f 100644
--- a/build/fetch-schema.js
+++ b/build/fetch-schema.js
@@ -1,9 +1,16 @@
-const { join } = require('path');
-const { readFile, writeFile } = require('fs');
-const { extendSchema, parse, printSchema } = require('graphql');
-const getRemoteGqlSchema = require('../server/util/getRemoteGqlSchema');
-const argv = require('minimist')(process.argv.slice(2));
-const config = require('../config/selectConfig')(argv.config);
+import { join, dirname } from 'path';
+import { fileURLToPath } from 'url';
+import { readFile, writeFile } from 'fs';
+import { extendSchema, parse, printSchema } from 'graphql';
+import minimist from 'minimist';
+import getRemoteGqlSchema from '../server/util/getRemoteGqlSchema.js';
+import selectConfig from '../config/selectConfig.js';
+
+const argv = minimist(process.argv.slice(2));
+const config = await selectConfig(argv.config);
+
+// eslint-disable-next-line no-underscore-dangle
+const __dirname = dirname(fileURLToPath(import.meta.url));
// Return an AST made from local schema
function getLocalAST(schemaPath) {
diff --git a/build/no-op.js b/build/no-op.js
index 37d7332f73..2d1ec23827 100644
--- a/build/no-op.js
+++ b/build/no-op.js
@@ -1 +1 @@
-module.exports = function () {}
+export default () => {};
diff --git a/build/promise.js b/build/promise.js
index 11cfee0700..4b598d2709 100644
--- a/build/promise.js
+++ b/build/promise.js
@@ -1,2 +1 @@
-// Export native Promise
-module.exports = typeof window !== 'undefined' && window.Promise || Promise;
+export default (typeof window !== 'undefined' && window.Promise) ?? Promise;
diff --git a/build/template-string-loader.js b/build/template-string-loader.js
index e489de1d8f..00ab646734 100644
--- a/build/template-string-loader.js
+++ b/build/template-string-loader.js
@@ -3,11 +3,13 @@
* Based on https://github.com/bradbenvenuti/template-string-loader
* TODO: switch to using html-loader once v1 is released
*/
-var htmlMinifier = require('html-minifier');
+import * as htmlMinifier from 'html-minifier';
-module.exports = function(content) {
- this.cacheable && this.cacheable();
- content = htmlMinifier.minify(content, {
+export default function templateStringLoader(content) {
+ if (typeof this.cacheable === 'function') {
+ this.cacheable();
+ }
+ const minifiedContent = htmlMinifier.minify(content, {
removeComments: true,
removeCommentsFromCDATA: true,
removeCDATASectionsFromCDATA: true,
@@ -18,5 +20,5 @@ module.exports = function(content) {
removeScriptTypeAttributes: true,
removeStyleTypeAttributes: true,
});
- return 'module.exports = function (context) { with(context) { return `' + content + '`; } };';
+ return `module.exports = function (context) { with(context) { return \`${minifiedContent}\`; } };`;
}
diff --git a/build/webpack.base.conf.js b/build/webpack.base.conf.js
deleted file mode 100644
index 340bdd39df..0000000000
--- a/build/webpack.base.conf.js
+++ /dev/null
@@ -1,335 +0,0 @@
-const path = require('path');
-const assetsPath = require('./assets-path');
-const config = require('../config');
-const VueLoaderPlugin = require('vue-loader').VueLoaderPlugin;
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const FilterWarningsPlugin = require('webpack-filter-warnings-plugin');
-const webpack = require('webpack');
-const GitRevisionPlugin = require('git-revision-webpack-plugin');
-const HardSourceWebpackPlugin = require('hard-source-webpack-plugin-fixed-hashbug');
-const gitRevisionPlugin = new GitRevisionPlugin({
- branch: true,
- lightweightTags: true,
-});
-
-const isProd = process.env.NODE_ENV === 'production';
-const isNode = typeof document === 'undefined';
-
-function resolve (dir) {
- return path.join(__dirname, '..', dir);
-}
-
-// When webpack encounters an .SVG in one of these directories, it will inline it as a vue component using vue-svg-loader
-const inlineSvgDirs = [
- resolve('src/assets/icons/inline/'),
- resolve('src/assets/inline-svgs/'),
- resolve('node_modules/flag-icon-css/flags/4x3/'),
- resolve('node_modules/flag-icon-css/flags/1x1/')
-];
-
-module.exports = {
- mode: 'none',
- output: {
- path: config.build.assetsRoot,
- // This Pushes JS Files to the /js sub-folder inside /static
- filename: assetsPath('js/[name].[hash].js'),
- chunkFilename: assetsPath('js/[name].[chunkhash].js'),
- publicPath: '/',
- },
- resolve: {
- extensions: ['.mjs', '.js', '.vue', '.json'],
- alias: {
- '~': resolve('node_modules'),
- '@': resolve('src'),
- 'foundation': 'foundation-sites/js',
- // alias promise module to handle timesync calling require('promise')
- 'promise': resolve('build/promise.js'),
- // required for src/components/Contentful/DynamicRichText.vue
- 'vue$': 'vue/dist/vue.esm.js'
- }
- },
- module: {
- rules: [
- {
- test: /\.vue$/,
- loader: 'vue-loader',
- options: {
- transformAssetUrls: {
- video: 'src',
- source: 'src',
- img: 'src',
- image: 'xlink:href'
- }
- }
- },
- {
- test: /(manifest\.webmanifest|manifest\.json|browserconfig\.xml)$/,
- use: [
- {
- loader: "file-loader",
- options: {
- name: assetsPath('manifest/[name].[hash:7].[ext]'),
- }
- },
- {
- loader: "app-manifest-loader",
- }
- ],
- },
- {
- test: /\.css$/,
- exclude: [resolve('src/assets/scss/tailwind')],
- use: [
- { loader: 'thread-loader' },
- { loader: 'vue-style-loader' }, // Inject styles as
diff --git a/src/api/Auth0Link.js b/src/api/Auth0Link.js
index a72594bddd..28764de555 100644
--- a/src/api/Auth0Link.js
+++ b/src/api/Auth0Link.js
@@ -1,4 +1,4 @@
-import { setContext } from '@apollo/client/link/context';
+import { setContext } from '@apollo/client/link/context/index';
// Add the user info to the context and add the access token to the authorization header
function getAuthContext(context, user, token) {
diff --git a/src/api/BasketLink.js b/src/api/BasketLink.js
index e2966d0efc..c015331582 100644
--- a/src/api/BasketLink.js
+++ b/src/api/BasketLink.js
@@ -1,6 +1,6 @@
import _get from 'lodash/get';
import _set from 'lodash/set';
-import { ApolloLink } from '@apollo/client/core';
+import { ApolloLink } from '@apollo/client/core/index';
export default ({ cookieStore }) => {
return new ApolloLink((operation, forward) => {
diff --git a/src/api/ContentfulPreviewLink.js b/src/api/ContentfulPreviewLink.js
index 329023bc71..1ad3c218cd 100644
--- a/src/api/ContentfulPreviewLink.js
+++ b/src/api/ContentfulPreviewLink.js
@@ -1,4 +1,4 @@
-import { ApolloLink } from '@apollo/client/core';
+import { ApolloLink } from '@apollo/client/core/index';
export default ({ cookieStore }) => {
return new ApolloLink((operation, forward) => {
diff --git a/src/api/ExperimentIdLink.js b/src/api/ExperimentIdLink.js
index 750949a918..faf70fbaec 100644
--- a/src/api/ExperimentIdLink.js
+++ b/src/api/ExperimentIdLink.js
@@ -1,6 +1,6 @@
-import { setContext } from '@apollo/client/link/context';
-import experimentVersionFragment from '@/graphql/fragments/experimentVersion.graphql';
-// import { UIAB_COOKIE_NAME } from '@/util/experiment/experimentUtils';
+import { setContext } from '@apollo/client/link/context/index';
+import experimentVersionFragment from '#src/graphql/fragments/experimentVersion.graphql';
+// import { UIAB_COOKIE_NAME } from '#src/util/experiment/experimentUtils';
// Experiment assignments that will be passed in the X-Experiment Header
const targetIds = [
diff --git a/src/api/HttpLink.js b/src/api/HttpLink.js
index 897b2b47ce..202a2d6a37 100644
--- a/src/api/HttpLink.js
+++ b/src/api/HttpLink.js
@@ -1,5 +1,5 @@
-import { BatchHttpLink } from '@apollo/client/link/batch-http';
-import { HttpLink } from '@apollo/client/link/http';
+import { BatchHttpLink } from '@apollo/client/link/batch-http/index';
+import { HttpLink } from '@apollo/client/link/http/index';
export default ({
uri = '',
diff --git a/src/api/NetworkErrorLoggingLink.js b/src/api/NetworkErrorLoggingLink.js
index 73889d1a6b..3b421b1f24 100644
--- a/src/api/NetworkErrorLoggingLink.js
+++ b/src/api/NetworkErrorLoggingLink.js
@@ -1,5 +1,5 @@
-import { onError } from '@apollo/client/link/error';
-import logFormatter from '@/util/logFormatter';
+import { onError } from '@apollo/client/link/error/index';
+import logFormatter from '#src/util/logFormatter';
export default () => {
return onError(({
diff --git a/src/api/NetworkErrorRetryLink.js b/src/api/NetworkErrorRetryLink.js
index 18b8c4f69f..afe656fdf3 100644
--- a/src/api/NetworkErrorRetryLink.js
+++ b/src/api/NetworkErrorRetryLink.js
@@ -1,4 +1,4 @@
-import { RetryLink } from '@apollo/client/link/retry';
+import { RetryLink } from '@apollo/client/link/retry/index';
export default ({
activateRetry = false,
diff --git a/src/api/SnowplowSessionLink.js b/src/api/SnowplowSessionLink.js
index 6ca4367399..d7d525ac21 100644
--- a/src/api/SnowplowSessionLink.js
+++ b/src/api/SnowplowSessionLink.js
@@ -1,4 +1,4 @@
-import { setContext } from '@apollo/client/link/context';
+import { setContext } from '@apollo/client/link/context/index';
import _set from 'lodash/set';
function getSPCookieSession(cookieStore) {
diff --git a/src/api/apollo.js b/src/api/apollo.js
index 7c723742ef..ffbaba6d33 100644
--- a/src/api/apollo.js
+++ b/src/api/apollo.js
@@ -1,4 +1,4 @@
-import { ApolloLink, ApolloClient, InMemoryCache } from '@apollo/client/core';
+import { ApolloLink, ApolloClient, InMemoryCache } from '@apollo/client/core/index';
import Auth0LinkCreator from './Auth0Link';
import BasketLinkCreator from './BasketLink';
import ContentfulPreviewLink from './ContentfulPreviewLink';
diff --git a/src/api/localResolvers/activeLoan.js b/src/api/localResolvers/activeLoan.js
index 342761987d..d0810da863 100644
--- a/src/api/localResolvers/activeLoan.js
+++ b/src/api/localResolvers/activeLoan.js
@@ -1,4 +1,4 @@
-import query from '@/graphql/query/activeLoanClient.graphql';
+import query from '#src/graphql/query/activeLoanClient.graphql';
/*
* Active loan resolvers
diff --git a/src/api/localResolvers/addToBasketInterstitial.js b/src/api/localResolvers/addToBasketInterstitial.js
index 78e3cfaaa5..91c1546fc6 100644
--- a/src/api/localResolvers/addToBasketInterstitial.js
+++ b/src/api/localResolvers/addToBasketInterstitial.js
@@ -1,4 +1,4 @@
-import query from '@/graphql/query/basketAddInterstitialClient.graphql';
+import query from '#src/graphql/query/basketAddInterstitialClient.graphql';
/*
* Add to Basket Interstitial resolvers
*/
diff --git a/src/api/localResolvers/autolending.js b/src/api/localResolvers/autolending.js
index 283fc6e36e..c0195fd89a 100644
--- a/src/api/localResolvers/autolending.js
+++ b/src/api/localResolvers/autolending.js
@@ -1,20 +1,19 @@
-/* eslint-disable no-underscore-dangle */
import _get from 'lodash/get';
import _mergeWith from 'lodash/mergeWith';
-import logFormatter from '@/util/logFormatter';
-import bothProfilesQuery from '@/graphql/query/autolending/bothProfiles.graphql';
-import loanCountQuery from '@/graphql/query/loanCount.graphql';
-import serverProfileQuery from '@/graphql/query/autolending/profileFromServer.graphql';
-import updateServerProfile from '@/graphql/mutation/autolending/updateServerProfile.graphql';
+import logFormatter from '#src/util/logFormatter';
+import bothProfilesQuery from '#src/graphql/query/autolending/bothProfiles.graphql';
+import loanCountQuery from '#src/graphql/query/loanCount.graphql';
+import serverProfileQuery from '#src/graphql/query/autolending/profileFromServer.graphql';
+import updateServerProfile from '#src/graphql/mutation/autolending/updateServerProfile.graphql';
import AutolendProfile, {
getCacheableProfile,
getInputProfile,
profilesAreEqual,
-} from '@/api/fixtures/AutolendProfile';
+} from '#src/api/fixtures/AutolendProfile';
import LoanSearchCriteria, {
criteriaAreEqual,
getSearchableCriteria,
-} from '@/api/fixtures/LoanSearchCriteria';
+} from '#src/api/fixtures/LoanSearchCriteria';
// Helper function for writing autolending data to the cache
function writeAutolendingData(cache, { currentProfile, savedProfile, ...fields }) {
diff --git a/src/api/localResolvers/experiment.js b/src/api/localResolvers/experiment.js
index 4930e91594..b625d04151 100644
--- a/src/api/localResolvers/experiment.js
+++ b/src/api/localResolvers/experiment.js
@@ -7,9 +7,9 @@ import {
getLoginId,
getCookieAssignments,
setCookieAssignments,
-} from '@/util/experiment/experimentUtils';
-import Experiment from '@/api/fixtures/Experiment';
-import logFormatter from '@/util/logFormatter';
+} from '#src/util/experiment/experimentUtils';
+import Experiment from '#src/api/fixtures/Experiment';
+import logFormatter from '#src/util/logFormatter';
/**
* Local resolvers for experiment assignment
diff --git a/src/api/localResolvers/loan.js b/src/api/localResolvers/loan.js
index 096d8b1c9d..c7a033875e 100644
--- a/src/api/localResolvers/loan.js
+++ b/src/api/localResolvers/loan.js
@@ -6,8 +6,8 @@ import {
differenceInMilliseconds,
} from 'date-fns';
import numeral from 'numeral';
-import logFormatter from '@/util/logFormatter';
-import getLoanUse from '@/util/loanUse';
+import logFormatter from '#src/util/logFormatter';
+import getLoanUse from '#src/util/loanUse';
// Return true if the given loan object is missing the given field.
// Logs an error to the console if the field is missing.
diff --git a/src/api/localResolvers/loanSearch.js b/src/api/localResolvers/loanSearch.js
index 374710528e..6258cee3d2 100644
--- a/src/api/localResolvers/loanSearch.js
+++ b/src/api/localResolvers/loanSearch.js
@@ -1,4 +1,4 @@
-import loanSearchStateQuery from '@/graphql/query/loanSearchState.graphql';
+import loanSearchStateQuery from '#src/graphql/query/loanSearchState.graphql';
// eslint-disable-next-line no-underscore-dangle
const __typename = 'LoanSearchState';
diff --git a/src/api/localResolvers/my.js b/src/api/localResolvers/my.js
index 04b8edc5d6..a61cae4c9e 100644
--- a/src/api/localResolvers/my.js
+++ b/src/api/localResolvers/my.js
@@ -1,4 +1,4 @@
-import hasEverLoggedInQuery from '@/graphql/query/shared/hasEverLoggedIn.graphql';
+import hasEverLoggedInQuery from '#src/graphql/query/shared/hasEverLoggedIn.graphql';
export default ({ cookieStore, kvAuth0 }) => {
return {
diff --git a/src/api/localResolvers/tipMessage.js b/src/api/localResolvers/tipMessage.js
index dd5327e471..9c12601f7f 100644
--- a/src/api/localResolvers/tipMessage.js
+++ b/src/api/localResolvers/tipMessage.js
@@ -1,4 +1,4 @@
-import tipMessageDataQuery from '@/graphql/query/tipMessage/tipMessageData.graphql';
+import tipMessageDataQuery from '#src/graphql/query/tipMessage/tipMessageData.graphql';
/*
* TipMessage resolvers
diff --git a/src/api/localResolvers/usingTouch.js b/src/api/localResolvers/usingTouch.js
index 9c87e56e23..67c65ff477 100644
--- a/src/api/localResolvers/usingTouch.js
+++ b/src/api/localResolvers/usingTouch.js
@@ -1,4 +1,4 @@
-import query from '@/graphql/query/shared/usingTouchClient.graphql';
+import query from '#src/graphql/query/shared/usingTouchClient.graphql';
/*
* UsingTouch resolvers
*/
diff --git a/src/api/localResolvers/verificationLightbox.js b/src/api/localResolvers/verificationLightbox.js
index bd955b6217..63738a9f04 100644
--- a/src/api/localResolvers/verificationLightbox.js
+++ b/src/api/localResolvers/verificationLightbox.js
@@ -1,4 +1,4 @@
-import { gql } from '@apollo/client';
+import { gql } from 'graphql-tag';
/*
* VerificationLightbox resolvers
diff --git a/src/api/localState.js b/src/api/localState.js
index 063a6f3cb4..f833f4ffcc 100644
--- a/src/api/localState.js
+++ b/src/api/localState.js
@@ -1,20 +1,20 @@
import _merge from 'lodash/merge';
// require each local state resolver
-const requireLocalResolver = require.context('./localResolvers', true, /\.js$/);
+const requireLocalResolver = import.meta.glob('./localResolvers/*.js', { eager: true });
const initState = options => {
// init each resolver with the given options and merge all the results together
- return requireLocalResolver.keys().reduce((result, key) => {
- const module = requireLocalResolver(key).default;
+ return Object.keys(requireLocalResolver).reduce((result, key) => {
+ const module = requireLocalResolver[key].default;
return _merge(result, module(options));
}, {});
};
const setLocalState = (options, cache) => {
// Call defaults function for each local resolver
- return requireLocalResolver.keys().forEach(value => {
- const module = requireLocalResolver(value).default;
+ return Object.keys(requireLocalResolver).forEach(key => {
+ const module = requireLocalResolver[key].default;
const { defaults } = module(options);
if (defaults) {
defaults(cache);
diff --git a/src/assets/iconLoader.js b/src/assets/iconLoader.js
deleted file mode 100644
index 16a43a226b..0000000000
--- a/src/assets/iconLoader.js
+++ /dev/null
@@ -1,6 +0,0 @@
-import svgXhr from 'webpack-svgstore-plugin/src/helpers/svgxhr';
-
-// inject svg icons as a sprite sheet
-// eslint-disable-next-line no-underscore-dangle
-const __svgsprite__ = { path: './icons/sprite/*.svg', name: './static/icons.[hash].svg' };
-svgXhr(__svgsprite__);
diff --git a/src/assets/scss/_math.scss b/src/assets/scss/_math.scss
index f244f20849..8c95d845b0 100644
--- a/src/assets/scss/_math.scss
+++ b/src/assets/scss/_math.scss
@@ -2,6 +2,7 @@
Numerical methods for Power, Factorial, Pi, Sine, Cosine and Tangent
from "TRIGONOMETRY IN SASS" by Daniel Perez Alvarez (https://unindented.org/articles/trigonometry-in-sass/)
*/
+@use 'sass:math';
@function pow($number, $exp) {
$value: 1;
@@ -9,8 +10,7 @@
@for $i from 1 through $exp {
$value: $value * $number;
}
- }
- @else if $exp < 0 {
+ } @else if $exp < 0 {
@for $i from 1 through -$exp {
$value: $value / $number;
}
@@ -33,8 +33,9 @@
}
@function rad($angle) {
- $unit: unit($angle);
+ $unit: math.unit($angle);
$unitless: $angle / ($angle * 0 + 1);
+
// If the angle has 'deg' as unit, convert to radians.
@if $unit == deg {
$unitless: $unitless / 180 * pi();
@@ -45,6 +46,7 @@
@function sin($angle) {
$sin: 0;
$angle: rad($angle);
+
// Iterate a bunch of times.
@for $i from 0 through 10 {
$sin: $sin + pow(-1, $i) * pow($angle, (2 * $i + 1)) / fact(2 * $i + 1);
@@ -55,6 +57,7 @@
@function cos($angle) {
$cos: 0;
$angle: rad($angle);
+
// Iterate a bunch of times.
@for $i from 0 through 10 {
$cos: $cos + pow(-1, $i) * pow($angle, 2 * $i) / fact(2 * $i);
diff --git a/src/assets/scss/_settings.scss b/src/assets/scss/_settings.scss
index 919797d405..489f70e544 100644
--- a/src/assets/scss/_settings.scss
+++ b/src/assets/scss/_settings.scss
@@ -61,7 +61,9 @@
// 56. Xy Grid
// 57. Navbar
-@import 'node_modules/foundation-sites/scss/util/util.scss';
+@use 'sass:color';
+@use 'sass:math';
+@import 'node_modules/foundation-sites/scss/util/util';
// 1. Global
// ---------
@@ -134,14 +136,13 @@ $kiva-glyph-grey-primary: $magnemite;
$kiva-glyph-primary-black: $umbreon;
// social media icon colors
-$facebook-hover-color: #3b5998;
-$pinterest-hover-color: #bd081c;
-$twitter-hover-color: #55acee;
-$yelp-hover-color: #bd081c;
-$youtube-hover-color: #cd201f;
-$linkedin-hover-color: #0077b5;
-$instagram-hover-color: #0a0b09;
-
+$facebook-hover-color: #3b5998;
+$pinterest-hover-color: #bd081c;
+$twitter-hover-color: #55acee;
+$yelp-hover-color: #bd081c;
+$youtube-hover-color: #cd201f;
+$linkedin-hover-color: #0077b5;
+$instagram-hover-color: #0a0b09;
$foundation-palette: (
primary: $blue,
secondary: $white,
@@ -149,9 +150,9 @@ $foundation-palette: (
warning: $vivid-yellow,
alert: $red,
);
-@include add-foundation-colors;
-$print-hrefs: true;
+@include add-foundation-colors ();
+$print-hrefs: true;
$body-background: $white;
$body-font-color: $kiva-text-dark;
$body-font-family: 'PostGrotesk', 'Arial', 'Helvetica', sans-serif;
@@ -211,30 +212,30 @@ $header-lineheight: 1.4;
$header-margin-bottom: 0.5rem;
$header-styles: (
small: (
- 'h1': ('font-size': rem-calc(28), 'line-height': rem-calc(36) / rem-calc(28)),
- 'h2': ('font-size': rem-calc(22), 'line-height': rem-calc(30) / rem-calc(22)),
+ 'h1': ('font-size': rem-calc(28), 'line-height': math.div(rem-calc(36), rem-calc(28))),
+ 'h2': ('font-size': rem-calc(22), 'line-height': math.div(rem-calc(30), rem-calc(22))),
'h3': ('font-size': rem-calc(18)),
'h4': ('font-size': rem-calc(16)),
),
medium: (
- 'h1': ('font-size': rem-calc(30), 'line-height': rem-calc(38) / rem-calc(30)),
- 'h2': ('font-size': rem-calc(28), 'line-height': rem-calc(36) / rem-calc(28)),
+ 'h1': ('font-size': rem-calc(30), 'line-height': math.div(rem-calc(38), rem-calc(30))),
+ 'h2': ('font-size': rem-calc(28), 'line-height': math.div(rem-calc(36), rem-calc(28))),
'h3': ('font-size': rem-calc(18)),
'h4': ('font-size': rem-calc(16)),
),
large: (
- 'h1': ('font-size': rem-calc(36), 'line-height': rem-calc(44) / rem-calc(36)),
- 'h2': ('font-size': rem-calc(28), 'line-height': rem-calc(36) / rem-calc(28)),
+ 'h1': ('font-size': rem-calc(36), 'line-height': math.div(rem-calc(44), rem-calc(36))),
+ 'h2': ('font-size': rem-calc(28), 'line-height': math.div(rem-calc(36), rem-calc(28))),
'h3': ('font-size': rem-calc(18)),
'h4': ('font-size': rem-calc(16)),
),
);
-$header-text-rendering: optimizeLegibility;
+$header-text-rendering: optimizelegibility;
$small-font-size: 80%;
$header-small-font-color: $medium-gray;
$paragraph-lineheight: 1.75; // 1.75rem;
$paragraph-margin-bottom: 1rem;
-$paragraph-text-rendering: optimizeLegibility;
+$paragraph-text-rendering: optimizelegibility;
$anchor-color: $kiva-textlink;
$anchor-color-hover: $kiva-textlink-hover;
$anchor-text-decoration: none;
@@ -259,24 +260,18 @@ $normal-text-font-size: 1rem; // because the global "100% isn't useful for all
$small-text-font-size: 0.875rem;
$small-text-line-height: 1.357rem;
-
$medium-text-font-size: 1.25rem;
$medium-text-line-height: 1.35;
-
$featured-text-font-size: 1.5rem;
$featured-text-line-height: 2.25rem;
-
$large-text-font-size: 2.25rem;
$large-text-line-height: 1.222222;
-
$big-text-font-size: rem-calc(28);
$big-text-line-height: rem-calc(36);
-
$impact-text-font-size: rem-calc(32);
$impact-text-line-height: rem-calc(40);
$impact-text-font-size-medium: rem-calc(44);
$impact-text-line-height-medium: rem-calc(50);
-
$huge-headline-font-size: rem-calc(52);
$huge-headline-line-height: rem-calc(58);
$huge-headline-font-size-medium: rem-calc(64);
@@ -445,6 +440,7 @@ $breadcrumbs-item-uppercase: true;
$breadcrumbs-item-separator: true;
$breadcrumbs-item-separator-item: '\002F';
$breadcrumbs-item-separator-item-rtl: '\005C';
+
// The following values are from the 6.5.1 release of foundation-sites we may want a different divider...
// $breadcrumbs-item-separator-item: '/';
// $breadcrumbs-item-separator-item-rtl: '\\';
@@ -699,7 +695,7 @@ $input-background-focus: $white;
$input-background-disabled: $light-gray;
$input-border: 1px solid $light-gray;
$input-border-focus: 1px solid $gray;
-$input-padding: $form-spacing / 2;
+$input-padding: math.div($form-spacing, 2);
$input-shadow: inset 0 1px 2px rgba($black, 0.1);
$input-shadow-focus: 0 0 5px $medium-gray;
$input-cursor-disabled: not-allowed;
@@ -927,8 +923,8 @@ $prototype-separator-margin-top: $global-margin;
// --------------------
$prototype-shadow-breakpoints: $global-prototype-breakpoints;
-$prototype-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16),
- 0 2px 10px 0 rgba(0, 0, 0, 0.12);
+$prototype-box-shadow: 0 2px 5px 0 rgb(0 0 0 / 16%),
+ 0 2px 10px 0 rgb(0 0 0 / 12%);
// 41. Prototype Sizing
// --------------------
@@ -1036,15 +1032,15 @@ $table-color-scale: 5%;
$table-border: 1px solid smart-scale($table-background, $table-color-scale);
$table-padding: rem-calc(8 10 10);
$table-hover-scale: 2%;
-$table-row-hover: darken($table-background, $table-hover-scale);
-$table-row-stripe-hover: darken($table-background, $table-color-scale + $table-hover-scale);
+$table-row-hover: color.adjust($table-background, $lightness: -$table-hover-scale);
+$table-row-stripe-hover: color.adjust($table-background, $lightness: -($table-color-scale + $table-hover-scale));
$table-is-striped: true;
$table-striped-background: smart-scale($table-background, $table-color-scale);
$table-stripe: even;
-$table-head-background: smart-scale($table-background, $table-color-scale / 2);
-$table-head-row-hover: darken($table-head-background, $table-hover-scale);
+$table-head-background: smart-scale($table-background, math.div($table-color-scale, 2));
+$table-head-row-hover: color.adjust($table-head-background, $lightness: -$table-hover-scale);
$table-foot-background: smart-scale($table-background, $table-color-scale);
-$table-foot-row-hover: darken($table-foot-background, $table-hover-scale);
+$table-foot-row-hover: color.adjust($table-foot-background, $lightness: -$table-hover-scale);
$table-head-font-color: $body-font-color;
$table-foot-font-color: $body-font-color;
$show-header-for-stacked: false;
@@ -1131,4 +1127,4 @@ $xy-block-grid-max: 8;
// 57. Xy Grid
// -----------
-$navbar-shadow: 0 0 0.5rem 0 rgba(0, 0, 0, 0.15);
+$navbar-shadow: 0 0 0.5rem 0 rgb(0 0 0 / 15%);
diff --git a/src/assets/scss/app.scss b/src/assets/scss/app.scss
index 625a684a13..97b7ecca57 100644
--- a/src/assets/scss/app.scss
+++ b/src/assets/scss/app.scss
@@ -1,13 +1,14 @@
// import all the variables
@import 'settings';
-@import 'foundation';
+@import 'node_modules/foundation-sites/scss/foundation';
// import global foundation components
-@include foundation-flex-classes;
-@include foundation-flex-grid;
-@include foundation-visibility-classes;
+@include foundation-flex-classes ();
+@include foundation-flex-grid ();
+@include foundation-visibility-classes ();
// import global styles
+/* stylelint-disable no-invalid-position-at-import-rule */
@import 'global/fonts';
@import 'global/page-layout';
@import 'global/line-breaks';
diff --git a/src/assets/scss/components/15-years/15-years.scss b/src/assets/scss/components/15-years/15-years.scss
index ffaba4048a..1241760bfd 100644
--- a/src/assets/scss/components/15-years/15-years.scss
+++ b/src/assets/scss/components/15-years/15-years.scss
@@ -84,10 +84,12 @@ $offwhite: #F8F8F8;
text-decoration: underline;
color: $twilight;
+
// white-space: nowrap;
&:hover {
text-decoration: none;
+
// background-color: $twilight;
// color: $offwhite;
cursor: pointer;
diff --git a/src/assets/scss/components/loan-cards/hover-loan-card.scss b/src/assets/scss/components/loan-cards/hover-loan-card.scss
index e5d03abef6..29115213e3 100644
--- a/src/assets/scss/components/loan-cards/hover-loan-card.scss
+++ b/src/assets/scss/components/loan-cards/hover-loan-card.scss
@@ -1,4 +1,4 @@
-@import 'settings';
+@import '#src/assets/scss/settings';
// Reference
$small-default-hover-image-width: rem-calc(480);
diff --git a/src/assets/scss/global/drop-in.scss b/src/assets/scss/global/drop-in.scss
index 4f6fce102c..cb1f92f3a6 100644
--- a/src/assets/scss/global/drop-in.scss
+++ b/src/assets/scss/global/drop-in.scss
@@ -1,4 +1,4 @@
-@import 'settings';
+@import '#src/assets/scss/settings';
// Global styles related to the braintree drop-in payment wrappers.
diff --git a/src/assets/scss/global/fonts.scss b/src/assets/scss/global/fonts.scss
index 2d43aeac92..e9bf5ce567 100644
--- a/src/assets/scss/global/fonts.scss
+++ b/src/assets/scss/global/fonts.scss
@@ -1,31 +1,31 @@
@font-face {
- font-family: "PostGrotesk";
+ font-family: PostGrotesk;
font-weight: 400;
font-style: normal;
font-display: swap;
- src: url("~@/assets/fonts/PostGrotesk-Medium.woff2") format('woff2');
+ src: url("/src/assets/fonts/PostGrotesk-Medium.woff2") format('woff2');
}
@font-face {
- font-family: "PostGrotesk";
+ font-family: PostGrotesk;
font-weight: 400;
font-style: italic;
font-display: swap;
- src: url("~@/assets/fonts/PostGrotesk-MediumItalic.woff2") format('woff2');
+ src: url("/src/assets/fonts/PostGrotesk-MediumItalic.woff2") format('woff2');
}
@font-face {
- font-family: "PostGrotesk";
+ font-family: PostGrotesk;
font-weight: 300;
font-style: normal;
font-display: swap;
- src: url("~@/assets/fonts/PostGrotesk-Book.woff2") format('woff2');
+ src: url("/src/assets/fonts/PostGrotesk-Book.woff2") format('woff2');
}
@font-face {
- font-family: "PostGrotesk";
+ font-family: PostGrotesk;
font-weight: 300;
font-style: italic;
font-display: swap;
- src: url("~@/assets/fonts/PostGrotesk-BookItalic.woff2") format('woff2');
+ src: url("/src/assets/fonts/PostGrotesk-BookItalic.woff2") format('woff2');
}
diff --git a/src/assets/scss/global/forms.scss b/src/assets/scss/global/forms.scss
index f39ef66dcc..3fa69e16e9 100644
--- a/src/assets/scss/global/forms.scss
+++ b/src/assets/scss/global/forms.scss
@@ -1,4 +1,4 @@
-@import "settings";
+@import "#src/assets/scss/settings";
// Form validation
label.error {
diff --git a/src/assets/scss/global/line-breaks.scss b/src/assets/scss/global/line-breaks.scss
index 46a144257c..c16493407d 100644
--- a/src/assets/scss/global/line-breaks.scss
+++ b/src/assets/scss/global/line-breaks.scss
@@ -1,4 +1,4 @@
-@import 'settings';
+@import '#src/assets/scss/settings';
// screen-width-specific line breaks
br.so,
diff --git a/src/assets/scss/global/print.scss b/src/assets/scss/global/print.scss
index 5f16503881..19671565ae 100644
--- a/src/assets/scss/global/print.scss
+++ b/src/assets/scss/global/print.scss
@@ -1,7 +1,6 @@
@media print {
* {
// Remove all css transitions
- -webkit-transition: none !important;
transition: none !important;
}
diff --git a/src/client-entry.js b/src/client-entry.js
old mode 100755
new mode 100644
index 2a76d211c1..7dec00b36f
--- a/src/client-entry.js
+++ b/src/client-entry.js
@@ -1,202 +1,260 @@
-/* eslint-disable no-underscore-dangle, vue/multi-word-component-names */
-import '@babel/polyfill';
-import { getUserLocale } from 'get-user-locale';
-import _dropWhile from 'lodash/dropWhile';
-import _get from 'lodash/get';
-import Bowser from 'bowser';
-import CookieStore from '@/util/cookieStore';
-import KvAuth0, { MockKvAuth0 } from '@/util/KvAuth0';
-import userIdQuery from '@/graphql/query/userId.graphql';
-import usingTouchMutation from '@/graphql/mutation/updateUsingTouch.graphql';
-import showTipMessage from '@/graphql/mutation/tipMessage/showTipMessage.graphql';
-
-import { preFetchAll } from '@/util/apolloPreFetch';
-import { authenticationGuard } from '@/util/authenticationGuard';
-import { contentfulPreviewCookie } from '@/util/contentfulPreviewCookie';
-import collectWebVitals from '@/util/webVitals';
-
-import createApp from '@/main';
-import '@/assets/iconLoader';
-
-import { fetch } from 'whatwg-fetch';
+/* global UI_TAG */
+/* eslint-disable no-underscore-dangle, vue/require-name-property */
+import '#src/assets/scss/tailwind/tailwind.css';
+import '#src/assets/scss/app.scss';
+
+// Facilitate using sprite icon SVGs in KvIcon
+// eslint-disable-next-line import/no-unresolved
+import 'virtual:svg-store';
const config = window.__KV_CONFIG__ || {};
// Set webpack public asset path based on configuration
-__webpack_public_path__ = config.publicPath || '/'; // eslint-disable-line
-
-// Create cookie store instance
-const cookieStore = new CookieStore();
-
-// Create auth instance
-let kvAuth0;
-if (config.auth0.enable) {
- kvAuth0 = new KvAuth0({
- audience: config.auth0.apiAudience,
- checkFakeAuth: config.auth0.checkFakeAuth,
- clientID: config.auth0.browserClientID,
- cookieStore,
- domain: config.auth0.domain,
- mfaAudience: config.auth0.mfaAudience,
- redirectUri: config.auth0.browserCallbackUri,
- scope: config.auth0.scope,
- });
-} else {
- kvAuth0 = MockKvAuth0;
+// __webpack_public_path__ = config.publicPath || '/'; // eslint-disable-line
+
+async function getCookieStore() {
+ const { default: CookieStore } = await import('#src/util/cookieStore');
+ return new CookieStore();
}
-// Get device information
-const { userAgent } = window.navigator;
-const device = userAgent ? Bowser.getParser(userAgent).parse().parsedResult : null;
-
-// Create the App instance
-const {
- app,
- router,
- apolloClient,
-} = createApp({
- name: '',
- appConfig: config,
- apollo: {
- uri: config.graphqlUri,
- types: config.graphqlPossibleTypes,
- },
- cookieStore,
- device,
- kvAuth0,
- locale: getUserLocale(),
- fetch,
- url: window?.location?.href,
-});
-
-// Show a tip message when there is an unhandled auth0 error
-kvAuth0.onError(({ eventId, user }) => {
- let message = 'We\'re sorry, something went wrong.';
- if (user) {
- message = `${message} Please log out and try again.`;
- } else {
- message = `${message} Please clear your cookies and try again.`;
+async function getKvAuth0(cookieStore) {
+ const { default: KvAuth0, MockKvAuth0 } = await import('#src/util/KvAuth0');
+ if (config.auth0.enable) {
+ return new KvAuth0({
+ audience: config.auth0.apiAudience,
+ checkFakeAuth: config.auth0.checkFakeAuth,
+ clientID: config.auth0.browserClientID,
+ cookieStore,
+ domain: config.auth0.domain,
+ mfaAudience: config.auth0.mfaAudience,
+ redirectUri: config.auth0.browserCallbackUri,
+ scope: config.auth0.scope,
+ });
}
- if (eventId) {
- message = `${message} (event id: ${eventId})`;
+ return MockKvAuth0;
+}
+
+async function getDevice() {
+ const { userAgent } = window.navigator;
+ if (!userAgent) {
+ return null;
}
- apolloClient.mutate({
- mutation: showTipMessage,
- variables: {
- message,
- type: 'error',
- persist: true,
- },
- });
-});
+ const { default: Bowser } = await import('bowser');
+ return Bowser.getParser(userAgent).parse().parsedResult;
+}
-// Apply Server state to Client Store
-if (window.__APOLLO_STATE__) {
- apolloClient.cache.restore(window.__APOLLO_STATE__);
+async function getLocale() {
+ const { getUserLocale } = await import('get-user-locale');
+ return getUserLocale();
}
-// Extract user id from apollo cache
-let userId = null;
-try {
- const data = apolloClient.readQuery({
- query: userIdQuery,
- variables: {
- basketId: cookieStore.get('kvbskt'),
- },
+async function getFetch() {
+ const { fetch } = await import('whatwg-fetch');
+ return fetch;
+}
+
+async function getUserId(apolloClient) {
+ const { default: userIdQuery } = await import('#src/graphql/query/userId.graphql');
+ const result = await apolloClient.query({ query: userIdQuery });
+ return result?.data?.my?.userAccount?.id ?? null;
+}
+
+async function setupAuthErrorHandling(kvAuth0, apolloClient) {
+ const { default: showTipMessage } = await import('#src/graphql/mutation/tipMessage/showTipMessage.graphql');
+ // Show a tip message when there is an unhandled auth0 error
+ kvAuth0.onError(({ eventId, user }) => {
+ let message = 'We\'re sorry, something went wrong.';
+ if (user) {
+ message = `${message} Please log out and try again.`;
+ } else {
+ message = `${message} Please clear your cookies and try again.`;
+ }
+ if (eventId) {
+ message = `${message} (event id: ${eventId})`;
+ }
+ apolloClient.mutate({
+ mutation: showTipMessage,
+ variables: {
+ message,
+ type: 'error',
+ persist: true,
+ },
+ });
});
- userId = _get(data, 'my.userAccount.id');
-} catch (e) {
- // do nothing (leave user id as null)
}
-// setup global analytics configuration + data
-app.$setKvAnalyticsData(userId).then(() => {
- let latestUserId = userId;
- // Use Apollo cached userid or check for user id from Auth0
- latestUserId = userId || (kvAuth0?.user?.['https://www.kiva.org/kiva_id'] ?? '');
- // Check for cookie next
- if (latestUserId === '') {
- const kvls = cookieStore.get('kvls');
- latestUserId = kvls === 'o' || kvls === 'deleted' ? null : kvls;
- }
- // Update Snowplow user id
- if (typeof snowplow !== 'undefined' && latestUserId && latestUserId !== '') {
- window.snowplow('setUserId', latestUserId);
- }
- // fire server rendered pageview
+async function setupTouchDetection(apolloClient) {
+ const { default: usingTouchMutation } = await import('#src/graphql/mutation/updateUsingTouch.graphql');
+ // Setup adding touch info to the state
+ window.addEventListener('touchstart', function onFirstTouch() {
+ apolloClient.mutate({
+ mutation: usingTouchMutation,
+ variables: { usingTouch: true }
+ });
+ window.removeEventListener('touchstart', onFirstTouch);
+ });
+}
+
+async function setupAnalytics(app, apolloClient) {
+ const userId = await getUserId(apolloClient);
+ await app.$setKvAnalyticsData(userId);
app.$fireServerPageView();
app.$fireQueuedEvents();
+ const { default: collectWebVitals } = await import('#src/util/webVitals');
collectWebVitals(app.$kvTrackEvent);
-});
+}
-// Setup adding touch info to the state
-window.addEventListener('touchstart', function onFirstTouch() {
- apolloClient.mutate({
- mutation: usingTouchMutation,
- variables: { usingTouch: true }
+async function setupSentry(app, router) {
+ const Sentry = await import('@sentry/vue');
+ Sentry.init({
+ app,
+ trackComponents: true,
+ dsn: config.sentryURI,
+ integrations: [
+ new Sentry.BrowserTracing({
+ routingInstrumentation: Sentry.vueRouterInstrumentation(router),
+ tracingOrigins: [config.host],
+ }),
+ ],
+ release: UI_TAG,
+ // Set tracesSampleRate to 1.0 to capture 100%
+ // of transactions for performance monitoring.
+ // We recommend adjusting this value in production
+ tracesSampleRate: config?.sentryTraceSampleRate,
+ beforeSend(event) {
+ // make sentry colleted event easy to compare to
+ const eventAsString = JSON.stringify(event);
+ // match specific 3rd party events for exclusion
+ // Skip sending failed to fetch error caused by unhandled promise rejection in google ads
+ // Sentry Event Link: https://kiva.sentry.io/issues/4413252219/events/726c65f507684f43b748e913d4793518/
+ // This url is unreachable: https://pagead2.googlesyndication.com/pagead/buyside_topics/set/
+ if (eventAsString.indexOf('Failed to fetch') !== -1
+ && eventAsString.indexOf('pagead') !== -1) {
+ return false;
+ }
+ // Skip sending failed loads of pX
+ if (eventAsString.indexOf("Cannot set property 'PX1065' of undefined") !== -1) {
+ return false;
+ }
+ // Skip sending errors from CefSharp
+ // https://forum.sentry.io/t/unhandledrejection-non-error-promise-rejection-captured-with-value/14062/20
+ if (eventAsString.indexOf('Object Not Found Matching Id') !== -1) {
+ return false;
+ }
+ // return event otherwise
+ return event;
+ },
});
- window.removeEventListener('touchstart', onFirstTouch);
-});
+}
-// Wait until router has resolved all async before hooks and async components
-router.onReady(() => {
+function setupClientRouting({
+ app, apolloClient, cookieStore, kvAuth0, router
+}) {
// Add router hook for handling asyncData.
// Doing it after initial route is resolved so that we don't double-fetch
// the data that we already have. Using router.beforeResolve() so that all
// async components are resolved.
- router.beforeResolve((to, from, next) => {
- // get newly activated components
- const matched = router.getMatchedComponents(to);
- const prevMatched = router.getMatchedComponents(from);
- const areRoutesTheSame = JSON.stringify(to?.matched?.[0]?.path) === JSON.stringify(from?.matched?.[0]?.path);
- const areParamsTheSame = JSON.stringify(to?.params) === JSON.stringify(from?.params);
- let activated;
- /** if route is the same but params are different, do not drop matched components this prevents buggy
- * navigation when client side navigating from route to same route with different params
- */
- if (areRoutesTheSame && !areParamsTheSame) {
- activated = matched;
- } else {
- activated = _dropWhile(matched, (c, i) => prevMatched[i] === c);
- }
+ router.beforeResolve(async (to, from, next) => {
+ const [{ contentfulPreviewCookie }, { authenticationGuard }, { preFetchAll }] = await Promise.all([
+ import('#src/util/contentfulPreviewCookie'),
+ import('#src/util/authenticationGuard'),
+ import('#src/util/apolloPreFetch'),
+ ]);
+
+ const { matched } = to;
+ const prevMatched = from.matched;
+ const activated = matched.filter((c, i) => prevMatched[i] !== c);
contentfulPreviewCookie({ route: to, cookieStore });
- authenticationGuard({ route: to, apolloClient, kvAuth0 })
- .then(() => {
- // Pre-fetch graphql queries from activated components
- return preFetchAll(activated, apolloClient, {
- cookieStore,
- kvAuth0,
- route: to,
- device
- });
- }).then(next).catch(next);
+ try {
+ await authenticationGuard({ route: to, apolloClient, kvAuth0 });
+ // Pre-fetch graphql queries from activated components
+ await preFetchAll(activated, apolloClient, {
+ cookieStore,
+ kvAuth0,
+ route: to,
+ });
+ next();
+ } catch {
+ next();
+ }
});
router.beforeEach((to, from, next) => {
- app.$Progress.start(6500);
-
- // if no routes match our path, force a page refresh to that path
- const matched = router.getMatchedComponents(to);
- if (!matched.length) {
- window.location = to.fullPath;
- } else {
- next();
- }
+ app.config.globalProperties.$Progress.start(6500);
+ next();
});
router.afterEach((to, from) => {
// finish loading
- app.$Progress.finish();
+ app.config.globalProperties.$Progress.finish();
- if (!to?.params?.noAnalytics) {
+ if (to?.query?.noAnalytics?.toLowerCase() !== 'true') {
// fire pageview
- app.$fireAsyncPageView(to, from);
+ app.config.globalProperties.$fireAsyncPageView(to, from);
}
});
- router.onError(() => app.$Progress.fail());
+ router.onError(() => app.config.globalProperties.$Progress.fail());
+}
+
+async function initApp() {
+ const [{ default: createApp }, cookieStore, device, locale, fetch] = await Promise.all([
+ import('#src/main'),
+ getCookieStore(),
+ getDevice(),
+ getLocale(),
+ getFetch(),
+ ]);
+ const kvAuth0 = await getKvAuth0(cookieStore);
+
+ // Create the App instance
+ const {
+ app,
+ router,
+ apolloClient,
+ } = createApp({
+ appConfig: config,
+ apollo: {
+ uri: config.graphqlUri,
+ types: config.graphqlPossibleTypes,
+ },
+ cookieStore,
+ device,
+ kvAuth0,
+ locale,
+ fetch,
+ });
+
+ // Apply Server state to Client Store
+ if (window.__APOLLO_STATE__) {
+ apolloClient.cache.restore(window.__APOLLO_STATE__);
+ }
+
+ setupAuthErrorHandling(kvAuth0, apolloClient);
+ setupTouchDetection(apolloClient);
+
+ if (config.enableSentry) {
+ setupSentry(app, router);
+ }
+
+ if (config.enableAnalytics) {
+ setupAnalytics(app, apolloClient);
+ }
+
+ // Wait until router has resolved all async before hooks and async components
+ await router.isReady();
+ setupClientRouting({
+ app, apolloClient, cookieStore, kvAuth0, router
+ });
// Mount app in DOM
- app.$mount('#app');
-});
+ app.mount('#app');
+}
+
+// Start application once browser is idle
+if ('requestIdleCallback' in window) {
+ requestIdleCallback(initApp, { timeout: 2000 });
+} else {
+ setTimeout(initApp, 500);
+}
diff --git a/src/components/15Years/15YearsButton.vue b/src/components/15Years/15YearsButton.vue
index b97828f78c..a98405c5e3 100644
--- a/src/components/15Years/15YearsButton.vue
+++ b/src/components/15Years/15YearsButton.vue
@@ -1,7 +1,9 @@
diff --git a/src/components/BorrowerProfile/SupporterDetails.vue b/src/components/BorrowerProfile/SupporterDetails.vue
index ccc12ea08d..69c4671a32 100644
--- a/src/components/BorrowerProfile/SupporterDetails.vue
+++ b/src/components/BorrowerProfile/SupporterDetails.vue
@@ -20,7 +20,7 @@
style="line-height: 0; /* global property affects images within anchors - override required */"
>
@@ -93,7 +91,7 @@
:controller="toolTipId"
:data-testid="`tooltip-id-${toolTipId}`"
theme="dark"
- v-if="teamTooltipData && !this.isMobile"
+ v-if="teamTooltipData && !isMobile"
>
{{ teamTooltipData.category }}
-
-
- Other Content
-
-
+
+
+ Other Content
+
+
-
-
+
+
-
-
+
+
-
- `,
-});
-
-export const Compact = (args, { argTypes }) => ({
- components: {
- PromoGridLoanCard,
- },
- props: Object.keys(argTypes),
- template: `
-
-
-
-
- `,
-});
-
-export const GridView = (args, { argTypes }) => ({
- components: {
- PromoGridLoanCard,
- },
- props: Object.keys(argTypes),
- template: `
-
-
-
-
- `,
-});
diff --git a/.storybook/stories/RecommendedLoanCard.stories.js b/.storybook/stories/RecommendedLoanCard.stories.js
index 9271ac8097..d105691482 100644
--- a/.storybook/stories/RecommendedLoanCard.stories.js
+++ b/.storybook/stories/RecommendedLoanCard.stories.js
@@ -1,4 +1,4 @@
-import RecommendedLoanCard from '@/components/LoanCards/RecommendedLoanCard';
+import RecommendedLoanCard from '#src/components/LoanCards/RecommendedLoanCard';
import apolloStoryMixin from '../mixins/apollo-story-mixin';
import cookieStoreStoryMixin from '../mixins/cookie-store-story-mixin';
diff --git a/.storybook/stories/SecuritySettings.stories.js b/.storybook/stories/SecuritySettings.stories.js
index 2f697415a1..6a74387fe0 100644
--- a/.storybook/stories/SecuritySettings.stories.js
+++ b/.storybook/stories/SecuritySettings.stories.js
@@ -1,15 +1,9 @@
-import Vue from 'vue'
-
-// import plugins
-import kivaPlugins from '@/plugins';
-Vue.use(kivaPlugins)
-
import apolloStoryMixin from '../mixins/apollo-story-mixin';
import cookieStoreStoryMixin from '../mixins/cookie-store-story-mixin';
import kvAuth0StoryMixin from '../mixins/kv-auth0-story-mixin';
-import SecuritySettingsPage from '@/pages/Settings/SecuritySettings';
-import TwoStepVerificationPage from '@/pages/Settings/TwoStepVerificationPage';
+import SecuritySettingsPage from '#src/pages/Settings/SecuritySettings';
+import TwoStepVerificationPage from '#src/pages/Settings/TwoStepVerificationPage';
export default {
title: 'Page/Security Settings',
diff --git a/.storybook/stories/ShareChallenge.stories.js b/.storybook/stories/ShareChallenge.stories.js
index 5a660052f8..26aec92630 100644
--- a/.storybook/stories/ShareChallenge.stories.js
+++ b/.storybook/stories/ShareChallenge.stories.js
@@ -1,4 +1,4 @@
-import ShareChallenge from '@/components/Thanks/ShareChallenge';
+import ShareChallenge from '#src/components/Thanks/ShareChallenge';
import apolloStoryMixin from "../mixins/apollo-story-mixin";
export default {
@@ -7,14 +7,14 @@ export default {
};
const socialSharingMixin = () => ({
- methods: {
- handleFacebookResponse: () => {},
- showSharePopUp: () => {},
- twitterShareUrl: () => {},
- facebookShareUrl: () => {},
- linkedInShareUrl: () => {},
- copyLink: () => {}
- }
+ methods: {
+ handleFacebookResponse: () => { },
+ showSharePopUp: () => { },
+ twitterShareUrl: () => { },
+ facebookShareUrl: () => { },
+ linkedInShareUrl: () => { },
+ copyLink: () => { }
+ }
});
const story = (args = {}) => {
@@ -22,10 +22,10 @@ const story = (args = {}) => {
props: Object.keys(argTypes),
components: { ShareChallenge },
mixins: [apolloStoryMixin(), socialSharingMixin()],
+ setup() { return args; },
template:
'
-
-
-
-
-
-
-
-
- 
+ ![]()
+ {{ teamTooltipData.lendersForTeamMessage }} @@ -102,9 +100,11 @@ diff --git a/src/components/Checkout/BasketItem.vue b/src/components/Checkout/BasketItem.vue index da3c6e0a83..2768032660 100644 --- a/src/components/Checkout/BasketItem.vue +++ b/src/components/Checkout/BasketItem.vue @@ -116,15 +116,15 @@ diff --git a/src/components/Checkout/DonateRepaymentsToggle.vue b/src/components/Checkout/DonateRepaymentsToggle.vue index d86792662a..68aa1c5a28 100644 --- a/src/components/Checkout/DonateRepaymentsToggle.vue +++ b/src/components/Checkout/DonateRepaymentsToggle.vue @@ -62,10 +62,10 @@ import _get from 'lodash/get'; import _filter from 'lodash/filter'; import _forEach from 'lodash/forEach'; import numeral from 'numeral'; -import initializeCheckout from '@/graphql/query/checkout/initializeCheckout.graphql'; -import updateLoanReservationDonateRepayments from '@/graphql/mutation/updateLoanReservationDonateRepayments.graphql'; -import KvLightbox from '~/@kiva/kv-components/vue/KvLightbox'; -import KvCheckbox from '~/@kiva/kv-components/vue/KvCheckbox'; +import initializeCheckout from '#src/graphql/query/checkout/initializeCheckout.graphql'; +import updateLoanReservationDonateRepayments from '#src/graphql/mutation/updateLoanReservationDonateRepayments.graphql'; +import KvLightbox from '@kiva/kv-components/vue/KvLightbox'; +import KvCheckbox from '@kiva/kv-components/vue/KvCheckbox'; export default { name: 'DonateRepaymentsToggle', @@ -188,7 +188,7 @@ export default { diff --git a/src/components/Checkout/DonationItem.vue b/src/components/Checkout/DonationItem.vue index d17b23817b..493d477f64 100644 --- a/src/components/Checkout/DonationItem.vue +++ b/src/components/Checkout/DonationItem.vue @@ -1,119 +1,118 @@
-
-
-
-
- ![donation line item image]()
-
+
+
+
-
+ ![donation line item image]()
+
-
-
-
-
@@ -14,8 +14,8 @@
diff --git a/src/components/CorporateCampaign/LoanSearch/GenderFilter.vue b/src/components/CorporateCampaign/LoanSearch/GenderFilter.vue
index 08bcd509de..4fea4b5371 100644
--- a/src/components/CorporateCampaign/LoanSearch/GenderFilter.vue
+++ b/src/components/CorporateCampaign/LoanSearch/GenderFilter.vue
@@ -18,7 +18,7 @@
diff --git a/src/components/CorporateCampaign/LoanSearch/SortOrder.vue b/src/components/CorporateCampaign/LoanSearch/SortOrder.vue
index b9b6856997..e1610ce729 100644
--- a/src/components/CorporateCampaign/LoanSearch/SortOrder.vue
+++ b/src/components/CorporateCampaign/LoanSearch/SortOrder.vue
@@ -20,7 +20,7 @@
diff --git a/src/components/Forms/GuestAccountCreation.vue b/src/components/Forms/GuestAccountCreation.vue
index 77e8561475..8e806d3270 100644
--- a/src/components/Forms/GuestAccountCreation.vue
+++ b/src/components/Forms/GuestAccountCreation.vue
@@ -8,7 +8,7 @@
class="data-hj-suppress tw-mb-2"
type="text"
v-model.trim="firstName"
- :validation="$v.firstName"
+ :validation="v$.firstName"
>
First name
@@ -20,7 +20,7 @@
class="data-hj-suppress tw-mb-2"
type="text"
v-model.trim="lastName"
- :validation="$v.lastName"
+ :validation="v$.lastName"
>
Last name
@@ -40,12 +40,12 @@
diff --git a/src/components/Homepage/HomeExp/KivaMultiCategoryGrid.vue b/src/components/Homepage/HomeExp/KivaMultiCategoryGrid.vue
index 4168e06b94..16bfcb6217 100644
--- a/src/components/Homepage/HomeExp/KivaMultiCategoryGrid.vue
+++ b/src/components/Homepage/HomeExp/KivaMultiCategoryGrid.vue
@@ -25,10 +25,10 @@
diff --git a/src/components/Kv/KvFrequentlyAskedQuestions.vue b/src/components/Kv/KvFrequentlyAskedQuestions.vue
index 7998050a80..b93e345352 100644
--- a/src/components/Kv/KvFrequentlyAskedQuestions.vue
+++ b/src/components/Kv/KvFrequentlyAskedQuestions.vue
@@ -11,7 +11,7 @@
:key="index"
:title="question.name"
:content="convertFromRichTextToHtml(question.richText)"
- :id="question.name | changeCase('paramCase')"
+ :id="$filters.changeCase(question.name, 'paramCase')"
:active="isActive(question.name)"
@toggle="setActiveAccordion"
/>
@@ -20,9 +20,9 @@
diff --git a/src/components/Kv/KvMap.vue b/src/components/Kv/KvMap.vue
index bc19a014bc..ad0a9eee75 100644
--- a/src/components/Kv/KvMap.vue
+++ b/src/components/Kv/KvMap.vue
@@ -1,7 +1,7 @@
-
import numeral from 'numeral';
-import { myFTDQuery, formatTransactionData } from '@/util/checkoutUtils';
-import { isCCPage } from '@/util/urlUtils';
-import checkoutUtils from '@/plugins/checkout-utils-mixin';
-import CheckoutDropInPaymentWrapper from '@/components/Checkout/CheckoutDropInPaymentWrapper';
-import KivaCreditPayment from '@/components/Checkout/KivaCreditPayment';
-import KivaCreditGuestPayment from '@/components/Checkout/KivaCreditGuestPayment';
-import KvLoadingOverlay from '@/components/Kv/KvLoadingOverlay';
-import BasketItemsList from '@/components/Checkout/BasketItemsList';
-import OrderTotals from '@/components/Checkout/OrderTotals';
-import KvIcon from '@/components/Kv/KvIcon';
-import KvButton from '~/@kiva/kv-components/vue/KvButton';
-import KvGrid from '~/@kiva/kv-components/vue/KvGrid';
+import { myFTDQuery, formatTransactionData } from '#src/util/checkoutUtils';
+import { isCCPage } from '#src/util/urlUtils';
+import checkoutUtils from '#src/plugins/checkout-utils-mixin';
+import CheckoutDropInPaymentWrapper from '#src/components/Checkout/CheckoutDropInPaymentWrapper';
+import KivaCreditPayment from '#src/components/Checkout/KivaCreditPayment';
+import KivaCreditGuestPayment from '#src/components/Checkout/KivaCreditGuestPayment';
+import KvLoadingOverlay from '#src/components/Kv/KvLoadingOverlay';
+import BasketItemsList from '#src/components/Checkout/BasketItemsList';
+import OrderTotals from '#src/components/Checkout/OrderTotals';
+import KvIcon from '#src/components/Kv/KvIcon';
+import KvButton from '@kiva/kv-components/vue/KvButton';
+import KvGrid from '@kiva/kv-components/vue/KvGrid';
export default {
name: 'InContextCheckout',
@@ -338,7 +338,7 @@ export default {
diff --git a/src/components/Contentful/DynamicRichText.vue b/src/components/Contentful/DynamicRichText.vue
index 139f2b09ae..d65e69d8b1 100644
--- a/src/components/Contentful/DynamicRichText.vue
+++ b/src/components/Contentful/DynamicRichText.vue
@@ -1,8 +1,9 @@
@@ -88,6 +88,7 @@ export default {
.story-card {
// Remove background set in StoryCard
background: none;
+
// Remove extra padding between bottom of story card and the carousel controls
padding-bottom: 0;
@@ -99,7 +100,7 @@ export default {
}
// When a slide is not active, hide every element that isn't an image in the DynamicRichText blocks in the slide
- [role="group"][aria-current="false"] {
+ [role=group][aria-current=false] {
.story-card .dynamic-rich-text {
& > * {
opacity: 0;
diff --git a/src/components/Contentful/TestimonialCards.vue b/src/components/Contentful/TestimonialCards.vue
index ae25ff05ec..941f15930b 100644
--- a/src/components/Contentful/TestimonialCards.vue
+++ b/src/components/Contentful/TestimonialCards.vue
@@ -61,11 +61,11 @@
diff --git a/src/components/CorporateCampaign/LoanSearch/AttributeFilter.vue b/src/components/CorporateCampaign/LoanSearch/AttributeFilter.vue
index 7305d3fb0a..00a94f5aaf 100644
--- a/src/components/CorporateCampaign/LoanSearch/AttributeFilter.vue
+++ b/src/components/CorporateCampaign/LoanSearch/AttributeFilter.vue
@@ -6,7 +6,7 @@
key="attributes"
:items="attributesWithSelected"
:use-columns="true"
- @change="onChange"
+ @update="onChange"
/>
-
import numeral from 'numeral';
import { mdiPencil, mdiArrowRight } from '@mdi/js';
-import updateDonation from '@/graphql/mutation/updateDonation.graphql';
-import HowKivaUsesDonation from '@/components/Checkout/HowKivaUsesDonation';
-import DonationNudgeLightbox from '@/components/Checkout/DonationNudge/DonationNudgeLightbox';
-import DonateRepayments from '@/components/Checkout/DonateRepaymentsToggle';
-import KvMaterialIcon from '~/@kiva/kv-components/vue/KvMaterialIcon';
-import KvTextInput from '~/@kiva/kv-components/vue/KvTextInput';
-import KvButton from '~/@kiva/kv-components/vue/KvButton';
-import KvLightbox from '~/@kiva/kv-components/vue/KvLightbox';
-
-const imageRequire = require.context('@/assets/images/', true);
+import updateDonation from '#src/graphql/mutation/updateDonation.graphql';
+import HowKivaUsesDonation from '#src/components/Checkout/HowKivaUsesDonation';
+import DonationNudgeLightbox from '#src/components/Checkout/DonationNudge/DonationNudgeLightbox';
+import DonateRepayments from '#src/components/Checkout/DonateRepaymentsToggle';
+import KvMaterialIcon from '@kiva/kv-components/vue/KvMaterialIcon';
+import KvTextInput from '@kiva/kv-components/vue/KvTextInput';
+import KvButton from '@kiva/kv-components/vue/KvButton';
+import KvLightbox from '@kiva/kv-components/vue/KvLightbox';
+import leafHeartUrl from '#src/assets/images/leaf_heart.svg?url';
export default {
name: 'DonationItem',
@@ -270,8 +267,8 @@ export default {
loanHistoryCount: null,
donationDetailsLink: 'Learn how Kiva uses your donation',
mdiPencil,
- imageRequire,
- mdiArrowRight
+ mdiArrowRight,
+ leafHeartUrl,
};
},
created() {
@@ -392,7 +389,7 @@ export default {
diff --git a/src/components/Checkout/InContext/InContextCheckout.vue b/src/components/Checkout/InContext/InContextCheckout.vue
index 86c247032b..6ea8517d35 100644
--- a/src/components/Checkout/InContext/InContextCheckout.vue
+++ b/src/components/Checkout/InContext/InContextCheckout.vue
@@ -19,10 +19,10 @@
name="piggy-bank"
/>
- {{ promoName }} has given you ${{ promoFund.promoPrice | numeral }} in credit.
+ {{ promoName }} has given you {{ $filters.numeral(promoFund.promoPrice, '$0,0[.]00') }} in credit.
- You have been given ${{ promoFund.promoPrice | numeral }} in credit.
+ You have been given {{ $filters.numeral(promoFund.promoPrice, '$0,0[.]00') }} in credit.
We've suggested a borrower to lend your remaining ${{ lcaLoanPrice }} credit to.
@@ -31,7 +31,7 @@
-
- - {{ basketDonationHeader }} -
-
+
+
-
-
+
+
+
-
-
+
-
+
+ + {{ basketDonationHeader }} +
+
+
+
-
-
- ![donation line item image]()
+ name="pencil"
+ :icon="mdiPencil"
+ />
+
-
+
+
+ ![donation line item image]()
-
- - {{ basketDonationTagline }} -
-
+
+
+
- {{ donationDetailsLink }}
-
+
-
+
-
+
+
-
-
-
-
- Update
-
-
-
-
+
+ Update
+
+
+
diff --git a/src/components/Kv/KvRadio.vue b/src/components/Kv/KvRadio.vue
index f83f64e905..51cf30467a 100644
--- a/src/components/Kv/KvRadio.vue
+++ b/src/components/Kv/KvRadio.vue
@@ -5,8 +5,8 @@
type="radio"
:id="id"
:value="radioValue"
+ :checked="isChecked"
v-model="inputValue"
- v-on="inputListeners"
v-bind="$attrs"
>
+
-
-
-
-
-
-
diff --git a/src/pages/Lend/AlgoliaPaginationWrapper.vue b/src/pages/Lend/AlgoliaPaginationWrapper.vue
deleted file mode 100644
index 123f1dc271..0000000000
--- a/src/pages/Lend/AlgoliaPaginationWrapper.vue
+++ /dev/null
@@ -1,44 +0,0 @@
-
-
-
-
-
-
diff --git a/src/pages/Lend/AlgoliaSearchBox.vue b/src/pages/Lend/AlgoliaSearchBox.vue
deleted file mode 100644
index b444c7179a..0000000000
--- a/src/pages/Lend/AlgoliaSearchBox.vue
+++ /dev/null
@@ -1,87 +0,0 @@
-
-
-
-
-
-
-
-
-
diff --git a/src/pages/Lend/Filter/FilterSections/FilterSectionCategories.vue b/src/pages/Lend/Filter/FilterSections/FilterSectionCategories.vue
deleted file mode 100644
index 2916634277..0000000000
--- a/src/pages/Lend/Filter/FilterSections/FilterSectionCategories.vue
+++ /dev/null
@@ -1,67 +0,0 @@
-
-
-
- {{ name }}
-
-
-
-
-
diff --git a/src/pages/Lend/Filter/FilterSections/FilterSectionLocation.vue b/src/pages/Lend/Filter/FilterSections/FilterSectionLocation.vue
deleted file mode 100644
index ecf61de386..0000000000
--- a/src/pages/Lend/Filter/FilterSections/FilterSectionLocation.vue
+++ /dev/null
@@ -1,59 +0,0 @@
-
-
-
-
-
-
-
-
diff --git a/src/pages/Lend/Filter/FilterSections/FilterSectionSectors.vue b/src/pages/Lend/Filter/FilterSections/FilterSectionSectors.vue
deleted file mode 100644
index 6724a867ad..0000000000
--- a/src/pages/Lend/Filter/FilterSections/FilterSectionSectors.vue
+++ /dev/null
@@ -1,73 +0,0 @@
-
-
-
-
-
-
-
-
-
diff --git a/src/pages/Lend/Filter/FilterSections/FilterSectionSort.vue b/src/pages/Lend/Filter/FilterSections/FilterSectionSort.vue
deleted file mode 100644
index c7babe16cf..0000000000
--- a/src/pages/Lend/Filter/FilterSections/FilterSectionSort.vue
+++ /dev/null
@@ -1,44 +0,0 @@
-
-
-
-
-
-
-
-
diff --git a/src/pages/Lend/Filter/FilterSections/FilterSectionTags.vue b/src/pages/Lend/Filter/FilterSections/FilterSectionTags.vue
deleted file mode 100644
index 7453e7e534..0000000000
--- a/src/pages/Lend/Filter/FilterSections/FilterSectionTags.vue
+++ /dev/null
@@ -1,73 +0,0 @@
-
-
-
-
-
-
-
-
-
diff --git a/src/pages/Lend/Filter/FilterSections/Gender/FilterSectionGender.vue b/src/pages/Lend/Filter/FilterSections/Gender/FilterSectionGender.vue
deleted file mode 100644
index 27bf87e856..0000000000
--- a/src/pages/Lend/Filter/FilterSections/Gender/FilterSectionGender.vue
+++ /dev/null
@@ -1,40 +0,0 @@
-
-
-
-
-
diff --git a/src/pages/Lend/Filter/FilterSections/Gender/PillToggleWrapper.vue b/src/pages/Lend/Filter/FilterSections/Gender/PillToggleWrapper.vue
deleted file mode 100644
index b64bea1008..0000000000
--- a/src/pages/Lend/Filter/FilterSections/Gender/PillToggleWrapper.vue
+++ /dev/null
@@ -1,61 +0,0 @@
-
-
-
-
-
-
diff --git a/src/pages/Lend/Filter/FilterSections/LoanDetails/RangeSliderWrapper.vue b/src/pages/Lend/Filter/FilterSections/LoanDetails/RangeSliderWrapper.vue
deleted file mode 100644
index 96990c54ea..0000000000
--- a/src/pages/Lend/Filter/FilterSections/LoanDetails/RangeSliderWrapper.vue
+++ /dev/null
@@ -1,90 +0,0 @@
-
-
-
-
-
-
diff --git a/src/pages/Lend/Filter/FilterSections/LocationMulti/FilterSectionLocationMulti.vue b/src/pages/Lend/Filter/FilterSections/LocationMulti/FilterSectionLocationMulti.vue
deleted file mode 100644
index cd6abf6854..0000000000
--- a/src/pages/Lend/Filter/FilterSections/LocationMulti/FilterSectionLocationMulti.vue
+++ /dev/null
@@ -1,134 +0,0 @@
-
-
-
-
-
-
-
-
diff --git a/src/pages/Lend/Filter/FilterSections/LocationMulti/FindNewCountry.vue b/src/pages/Lend/Filter/FilterSections/LocationMulti/FindNewCountry.vue
deleted file mode 100644
index 37c438dab0..0000000000
--- a/src/pages/Lend/Filter/FilterSections/LocationMulti/FindNewCountry.vue
+++ /dev/null
@@ -1,151 +0,0 @@
-
-
- Find a loan in a new country
-
-
-
-
diff --git a/src/pages/Lend/Filter/FilterSections/LocationMulti/LocationMultiRefinements.vue b/src/pages/Lend/Filter/FilterSections/LocationMulti/LocationMultiRefinements.vue
deleted file mode 100644
index 18f59b9d63..0000000000
--- a/src/pages/Lend/Filter/FilterSections/LocationMulti/LocationMultiRefinements.vue
+++ /dev/null
@@ -1,234 +0,0 @@
-
-
-
-
-
-
-
-
diff --git a/src/pages/Lend/LendHeader.vue b/src/pages/Lend/LendHeader.vue
deleted file mode 100644
index a37c0dde8c..0000000000
--- a/src/pages/Lend/LendHeader.vue
+++ /dev/null
@@ -1,117 +0,0 @@
-
- 
+ ![]()
Advanced filters
-
-
-
-
-
-
diff --git a/src/pages/Lend/AlgoliaPaginationStats.vue b/src/pages/Lend/AlgoliaPaginationStats.vue
deleted file mode 100644
index 587834c868..0000000000
--- a/src/pages/Lend/AlgoliaPaginationStats.vue
+++ /dev/null
@@ -1,48 +0,0 @@
-
-
- Loans per page
-
-
-
-
- {{ nbHits | numeral('0,0') }} loans
-
-
-
-
-
-
-
-
-
-
diff --git a/src/pages/Lend/Filter/FilterComponents/AlgoliaState.vue b/src/pages/Lend/Filter/FilterComponents/AlgoliaState.vue
deleted file mode 100644
index 023c825dc9..0000000000
--- a/src/pages/Lend/Filter/FilterComponents/AlgoliaState.vue
+++ /dev/null
@@ -1,24 +0,0 @@
-
- {{ stateData.index }}
-
-
-
diff --git a/src/pages/Lend/Filter/FilterComponents/AlgoliaTrackState.vue b/src/pages/Lend/Filter/FilterComponents/AlgoliaTrackState.vue
deleted file mode 100644
index 6b37a2fd4d..0000000000
--- a/src/pages/Lend/Filter/FilterComponents/AlgoliaTrackState.vue
+++ /dev/null
@@ -1,55 +0,0 @@
-
- Showing {{ stateDataHits.length }} Results
-
-
-
diff --git a/src/pages/Lend/Filter/FilterComponents/ClearAllRefinements.vue b/src/pages/Lend/Filter/FilterComponents/ClearAllRefinements.vue
deleted file mode 100644
index dc4e499328..0000000000
--- a/src/pages/Lend/Filter/FilterComponents/ClearAllRefinements.vue
+++ /dev/null
@@ -1,20 +0,0 @@
-
-
-
-
-
diff --git a/src/pages/Lend/Filter/FilterComponents/FilterMenuSection.vue b/src/pages/Lend/Filter/FilterComponents/FilterMenuSection.vue
deleted file mode 100644
index ea6e190ac2..0000000000
--- a/src/pages/Lend/Filter/FilterComponents/FilterMenuSection.vue
+++ /dev/null
@@ -1,126 +0,0 @@
-
-
-
-
-
-
-
diff --git a/src/pages/Lend/Filter/FilterComponents/FilterRangeSlider.vue b/src/pages/Lend/Filter/FilterComponents/FilterRangeSlider.vue
deleted file mode 100644
index 9f3c9664c5..0000000000
--- a/src/pages/Lend/Filter/FilterComponents/FilterRangeSlider.vue
+++ /dev/null
@@ -1,160 +0,0 @@
-
-
-
-
- {{ title }}
-
-
-
- ({{ rangeLabel }})
-
-
-
-
-
-
-
-
-
-
diff --git a/src/pages/Lend/Filter/FilterComponents/HierarchicalMenuList.vue b/src/pages/Lend/Filter/FilterComponents/HierarchicalMenuList.vue
deleted file mode 100644
index 6badb0bd3e..0000000000
--- a/src/pages/Lend/Filter/FilterComponents/HierarchicalMenuList.vue
+++ /dev/null
@@ -1,82 +0,0 @@
-
-
-
-
-
-
-
diff --git a/src/pages/Lend/Filter/FilterComponents/LendFilterMenu.vue b/src/pages/Lend/Filter/FilterComponents/LendFilterMenu.vue
deleted file mode 100644
index daa6fb481c..0000000000
--- a/src/pages/Lend/Filter/FilterComponents/LendFilterMenu.vue
+++ /dev/null
@@ -1,412 +0,0 @@
-
-
-
-
-
-
-
diff --git a/src/pages/Lend/Filter/FilterComponents/SelectedRefinements.vue b/src/pages/Lend/Filter/FilterComponents/SelectedRefinements.vue
deleted file mode 100644
index 8a5c192cd6..0000000000
--- a/src/pages/Lend/Filter/FilterComponents/SelectedRefinements.vue
+++ /dev/null
@@ -1,279 +0,0 @@
-
-
-
-
-
- {{ title }}
-
-
- ({{ rangeLabel }})
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/src/pages/Lend/Filter/FilterSections/FilterSectionAttributes.vue b/src/pages/Lend/Filter/FilterSections/FilterSectionAttributes.vue
deleted file mode 100644
index bf2ffb3689..0000000000
--- a/src/pages/Lend/Filter/FilterSections/FilterSectionAttributes.vue
+++ /dev/null
@@ -1,82 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
- {{ item.label }} ({{ item.count }}) - -
-
-
-
- -
-
-
-
- {{ item.label }} ({{ item.count }}) - -
-
-
-
- - - -
-
-
-
-
- {{ item.label }} ({{ item.count }}) - -
-
-
-
-
-
-
-
-
-
-
-
diff --git a/src/pages/Lend/Filter/LendFilterPage.vue b/src/pages/Lend/Filter/LendFilterPage.vue
deleted file mode 100644
index 1ff65ab139..0000000000
--- a/src/pages/Lend/Filter/LendFilterPage.vue
+++ /dev/null
@@ -1,446 +0,0 @@
-
-
-
- {{ item.label }} ({{ item.count }})
-
-
-
-
-
-
-
-
-
-
- Beta
-
- - Welcome to Kiva's new filter page! Take it for a spin below, or - at any time. -
-
-
-
-
-
-
-
-
-
-
-
diff --git a/src/pages/Lend/LendPage.vue b/src/pages/Lend/LendPage.vue
index 0da1103038..6ad93dff89 100644
--- a/src/pages/Lend/LendPage.vue
+++ b/src/pages/Lend/LendPage.vue
@@ -43,11 +43,11 @@ import _map from 'lodash/map';
import _mapValues from 'lodash/mapValues';
import _merge from 'lodash/merge';
import numeral from 'numeral';
-import loanCardQuery from '@/graphql/query/loanCardData.graphql';
-import WwwPage from '@/components/WwwFrame/WwwPage';
-import LoanCardController from '@/components/LoanCards/LoanCardController';
-import KvPagination from '@/components/Kv/KvPagination';
-import KvLoadingOverlay from '@/components/Kv/KvLoadingOverlay';
+import loanCardQuery from '#src/graphql/query/loanCardData.graphql';
+import WwwPage from '#src/components/WwwFrame/WwwPage';
+import LoanCardController from '#src/components/LoanCards/LoanCardController';
+import KvPagination from '#src/components/Kv/KvPagination';
+import KvLoadingOverlay from '#src/components/Kv/KvLoadingOverlay';
const loansPerPage = 12;
@@ -86,7 +86,7 @@ export default {
KvLoadingOverlay,
},
inject: ['apollo', 'cookieStore'],
- metaInfo: {
+ head: {
title: 'Fundraising loans'
},
data() {
@@ -112,7 +112,8 @@ export default {
query: loanCardQuery,
preFetch: true,
preFetchVariables({ route }) {
- return _merge({ limit: loansPerPage }, fromUrlParams(route.query));
+ const currentRoute = route?.value ?? route;
+ return _merge({ limit: loansPerPage }, fromUrlParams(currentRoute?.query));
},
variables() {
return {
diff --git a/src/pages/Lend/LoanChannelCategoryControl.vue b/src/pages/Lend/LoanChannelCategoryControl.vue
index 115b4bf9e6..e7b96c1b7a 100644
--- a/src/pages/Lend/LoanChannelCategoryControl.vue
+++ b/src/pages/Lend/LoanChannelCategoryControl.vue
@@ -12,7 +12,7 @@
class="tw-text-action tw-flex tw-items-center tw-float-right"
@click.native="trackAdvancedFilters"
>
-
-
- - Make a loan, change a life -
-- Each Kiva loan helps people build a better future for themselves and their families. -
-
+
@@ -60,7 +60,7 @@
class="tw-relative tw-mx-auto tw-px-2.5 md:tw-px-4 lg:tw-px-8"
style="max-width: 1200px;"
>
-
+
@@ -48,14 +48,8 @@
- Heads up! You have {{ balance | numeral('$0') }} available to lend.
+ Heads up! You have {{ $filters.numeral(balance, '$0') }} available to lend.
- Each month on the
-
+
+ Each month on the
-
+
@@ -101,7 +98,7 @@
-
-
+
@@ -145,7 +145,7 @@