@designcrowd/fe-shared-lib 1.7.0 → 1.8.0

package/src/experiences/components/UploadYourLogoApplication/UploadYourLogoApplication.stories.js

@@ -1,254 +1,254 @@
-import axios from 'axios';
-import MockAdapter from 'axios-mock-adapter';
-
-import UploadYourLogoApplication from './UploadYourLogoApplication.vue';
-import Events from '../../constants/event-constants';
-import API from '../../constants/api';
-
-export default {
-  title: 'Components/UploadYourLogoApplication',
-  component: UploadYourLogoApplication,
-};
-
-const MOCK_RESPONSE_DELAY = 2000;
-const UPLOAD_SUCCESS_RESPONSE = {
-  templateUploadToken: '6bc3885c-7e5c-4c9e-9b54-21dcd06ca647',
-  logoImageUrl: '/images/logos/coke.jpeg',
-  logoImageDetails: {
-    businessText: 'LOGO TEXT HERE',
-    sloganText: 'Slogan Text Here',
-    textColors: ['#2ab1f8', '#ff0000', '#00ff00', '#0fb0fb', '#87adbb', '#7ef99f'],
-    backgroundColors: ['#041444'],
-  },
-};
-const UPLOAD_SUCCESS_RESPONSE_SVG = {
-  templateUploadToken: '6bc3885c-7e5c-4c9e-9b54-21dcd06ca647',
-  logoImageUrl: 'https://cdn.worldvectorlogo.com/logos/raspberry-pi.svg',
-  logoImageDetails: {
-    businessText: 'LOGO TEXT HERE',
-    textColors: ['#cd003f'],
-    backgroundColors: ['#000000'],
-  },
-};
-
-export const Success = () => {
-  const mock = new MockAdapter(axios, { delayResponse: MOCK_RESPONSE_DELAY });
-  mock.onPost(API.BYO_LOGO_API_URL + API.BYO_LOGO_API_UPLOAD_LOGO_ENDPOINT).reply(200, UPLOAD_SUCCESS_RESPONSE);
-
-  mock.onPost(API.BYO_LOGO_API_URL + API.BYO_LOGO_API_SAVE_ENDPOINT).reply(200, {
-    success: true,
-  });
-
-  return {
-    components: {
-      UploadYourLogoApplication,
-    },
-    template: `
-      <div>
-        <input type="file" @change="onFileInputChange" accept=".png,.svg,.eps" />
-        <UploadYourLogoApplication :use-dropzone="true" @on-finish="onFinish" />
-      </div>
-    `,
-    methods: {
-      onFileInputChange(e) {
-        if (e.target.files.length) {
-          window.dispatchEvent(
-            new CustomEvent(Events.BeginUploadLogoExperience, {
-              detail: { file: e.target.files[0] },
-            }),
-          );
-        }
-      },
-      onFinish(e) {
-        alert('on finish');
-        console.log(e);
-      },
-    },
-  };
-};
-
-export const SuccessNotLoggedIn = () => {
-  const mock = new MockAdapter(axios, { delayResponse: MOCK_RESPONSE_DELAY });
-  mock.onPost(API.BYO_LOGO_API_URL + API.BYO_LOGO_API_UPLOAD_LOGO_ENDPOINT).reply(200, UPLOAD_SUCCESS_RESPONSE);
-
-  mock.onPost(API.BYO_LOGO_API_URL + API.BYO_LOGO_API_SAVE_ENDPOINT).reply(200, {
-    success: true,
-  });
-
-  return {
-    components: {
-      UploadYourLogoApplication,
-    },
-    template: `
-          <div>
-            <UploadYourLogoApplication :active="true" :use-dropzone="true" @on-file-change="onFileChange" />
-          </div>
-        `,
-    methods: {
-      onFileChange(fileInput) {
-        if (fileInput) {
-          window.dispatchEvent(
-            new CustomEvent(Events.BeginUploadLogoExperience, {
-              detail: { file: fileInput },
-            }),
-          );
-        }
-      },
-    },
-  };
-};
-
-export const SuccessSvg = () => {
-  const mock = new MockAdapter(axios, { delayResponse: MOCK_RESPONSE_DELAY });
-  mock.onPost(API.BYO_LOGO_API_URL + API.BYO_LOGO_API_UPLOAD_LOGO_ENDPOINT).reply(200, UPLOAD_SUCCESS_RESPONSE_SVG);
-
-  mock.onPost(API.BYO_LOGO_API_URL + API.BYO_LOGO_API_SAVE_ENDPOINT).reply(200, {
-    success: true,
-  });
-
-  return {
-    components: {
-      UploadYourLogoApplication,
-    },
-    template: `
-      <div>
-        <input type="file" @change="onFileInputChange" accept=".png,.svg,.eps" />
-        <UploadYourLogoApplication :is-user-authenticated="true" @on-finish="onFinish" />
-      </div>
-    `,
-    methods: {
-      onFileInputChange(e) {
-        if (e.target.files.length) {
-          window.dispatchEvent(
-            new CustomEvent(Events.BeginUploadLogoExperience, {
-              detail: { file: e.target.files[0] },
-            }),
-          );
-        }
-      },
-      onFinish(e) {
-        alert('on finish');
-        console.log(e);
-      },
-    },
-  };
-};
-
-export const SuccessWithKeywords = () => {
-  const mock = new MockAdapter(axios, { delayResponse: MOCK_RESPONSE_DELAY, onNoMatch: 'passthrough' });
-  mock.onPost(API.BYO_LOGO_API_URL + API.BYO_LOGO_API_UPLOAD_LOGO_ENDPOINT).reply(200, UPLOAD_SUCCESS_RESPONSE);
-
-  mock.onPost(API.BYO_LOGO_API_URL + API.BYO_LOGO_API_SAVE_ENDPOINT).reply(200, {
-    success: true,
-  });
-
-  mock.onGet(new RegExp(API.KEYWORD_SUGGESTIONS_API_URL)).reply(200, {
-    keywords: ['professional', 'modern'],
-  });
-
-  return {
-    components: {
-      UploadYourLogoApplication,
-    },
-    template: `
-      <div>
-        <input type="file" @change="onFileInputChange" accept=".png,.svg,.eps" />
-        <UploadYourLogoApplication
-          :use-dropzone="true"
-          :show-keywords-step="true"
-          template-type="business card"
-          @on-save-keywords="onSaveKeywords"
-          @on-finish="onFinish"
-        />
-      </div>
-    `,
-    methods: {
-      onFileInputChange(e) {
-        if (e.target.files.length) {
-          window.dispatchEvent(
-            new CustomEvent(Events.BeginUploadLogoExperience, {
-              detail: { file: e.target.files[0] },
-            }),
-          );
-        }
-      },
-      onSaveKeywords(e) {
-        console.log('on-save-keywords', e);
-      },
-      onFinish(e) {
-        alert('on finish');
-        console.log(e);
-      },
-    },
-  };
-};
-
-export const FailOnUpload = () => {
-  const mock = new MockAdapter(axios, { delayResponse: MOCK_RESPONSE_DELAY });
-  mock
-    .onPost(API.BYO_LOGO_API_URL + API.BYO_LOGO_API_UPLOAD_LOGO_ENDPOINT)
-    .reply(500, 'An error occured when extracting details from the image. Please try again.');
-
-  return {
-    components: {
-      UploadYourLogoApplication,
-    },
-    template: `
-      <div>
-        <input type="file" @change="onFileInputChange" accept=".png,.svg,.eps" />
-        <UploadYourLogoApplication @on-finish="onFinish" />
-      </div>
-    `,
-    methods: {
-      onFileInputChange(e) {
-        if (e.target.files.length) {
-          window.dispatchEvent(
-            new CustomEvent(Events.BeginUploadLogoExperience, {
-              detail: { file: e.target.files[0] },
-            }),
-          );
-        }
-      },
-      onFinish(e) {
-        alert('on finish');
-        console.log(e);
-      },
-    },
-  };
-};
-
-export const FailOnCreate = () => {
-  const mock = new MockAdapter(axios, { delayResponse: MOCK_RESPONSE_DELAY });
-  mock.onPost(API.BYO_LOGO_API_URL + API.BYO_LOGO_API_UPLOAD_LOGO_ENDPOINT).reply(200, UPLOAD_SUCCESS_RESPONSE);
-
-  mock
-    .onPost(API.BYO_LOGO_API_URL + API.BYO_LOGO_API_SAVE_ENDPOINT)
-    .reply(500, 'An error occured when creating a logo from the provided details. Please try again.');
-
-  return {
-    components: {
-      UploadYourLogoApplication,
-    },
-    template: `
-      <div>
-        <input type="file" @change="onFileInputChange" accept=".png,.svg,.eps" />
-        <UploadYourLogoApplication :is-user-authenticated="true" @on-finish="onFinish" />
-      </div>
-    `,
-    methods: {
-      onFileInputChange(e) {
-        if (e.target.files.length) {
-          window.dispatchEvent(
-            new CustomEvent(Events.BeginUploadLogoExperience, {
-              detail: { file: e.target.files[0] },
-            }),
-          );
-        }
-      },
-      onFinish(e) {
-        alert('on finish');
-        console.log(e);
-      },
-    },
-  };
-};
+import axios from 'axios';
+import MockAdapter from 'axios-mock-adapter';
+
+import UploadYourLogoApplication from './UploadYourLogoApplication.vue';
+import Events from '../../constants/event-constants';
+import API from '../../constants/api';
+
+export default {
+  title: 'Components/UploadYourLogoApplication',
+  component: UploadYourLogoApplication,
+};
+
+const MOCK_RESPONSE_DELAY = 2000;
+const UPLOAD_SUCCESS_RESPONSE = {
+  templateUploadToken: '6bc3885c-7e5c-4c9e-9b54-21dcd06ca647',
+  logoImageUrl: '/images/logos/coke.jpeg',
+  logoImageDetails: {
+    businessText: 'LOGO TEXT HERE',
+    sloganText: 'Slogan Text Here',
+    textColors: ['#2ab1f8', '#ff0000', '#00ff00', '#0fb0fb', '#87adbb', '#7ef99f'],
+    backgroundColors: ['#041444'],
+  },
+};
+const UPLOAD_SUCCESS_RESPONSE_SVG = {
+  templateUploadToken: '6bc3885c-7e5c-4c9e-9b54-21dcd06ca647',
+  logoImageUrl: 'https://cdn.worldvectorlogo.com/logos/raspberry-pi.svg',
+  logoImageDetails: {
+    businessText: 'LOGO TEXT HERE',
+    textColors: ['#cd003f'],
+    backgroundColors: ['#000000'],
+  },
+};
+
+export const Success = () => {
+  const mock = new MockAdapter(axios, { delayResponse: MOCK_RESPONSE_DELAY });
+  mock.onPost(API.BYO_LOGO_API_URL + API.BYO_LOGO_API_UPLOAD_LOGO_ENDPOINT).reply(200, UPLOAD_SUCCESS_RESPONSE);
+
+  mock.onPost(API.BYO_LOGO_API_URL + API.BYO_LOGO_API_SAVE_ENDPOINT).reply(200, {
+    success: true,
+  });
+
+  return {
+    components: {
+      UploadYourLogoApplication,
+    },
+    template: `
+      <div>
+        <input type="file" @change="onFileInputChange" accept=".png,.svg,.eps" />
+        <UploadYourLogoApplication :use-dropzone="true" @on-finish="onFinish" />
+      </div>
+    `,
+    methods: {
+      onFileInputChange(e) {
+        if (e.target.files.length) {
+          window.dispatchEvent(
+            new CustomEvent(Events.BeginUploadLogoExperience, {
+              detail: { file: e.target.files[0] },
+            }),
+          );
+        }
+      },
+      onFinish(e) {
+        alert('on finish');
+        console.log(e);
+      },
+    },
+  };
+};
+
+export const SuccessNotLoggedIn = () => {
+  const mock = new MockAdapter(axios, { delayResponse: MOCK_RESPONSE_DELAY });
+  mock.onPost(API.BYO_LOGO_API_URL + API.BYO_LOGO_API_UPLOAD_LOGO_ENDPOINT).reply(200, UPLOAD_SUCCESS_RESPONSE);
+
+  mock.onPost(API.BYO_LOGO_API_URL + API.BYO_LOGO_API_SAVE_ENDPOINT).reply(200, {
+    success: true,
+  });
+
+  return {
+    components: {
+      UploadYourLogoApplication,
+    },
+    template: `
+          <div>
+            <UploadYourLogoApplication :active="true" :use-dropzone="true" @on-file-change="onFileChange" />
+          </div>
+        `,
+    methods: {
+      onFileChange(fileInput) {
+        if (fileInput) {
+          window.dispatchEvent(
+            new CustomEvent(Events.BeginUploadLogoExperience, {
+              detail: { file: fileInput },
+            }),
+          );
+        }
+      },
+    },
+  };
+};
+
+export const SuccessSvg = () => {
+  const mock = new MockAdapter(axios, { delayResponse: MOCK_RESPONSE_DELAY });
+  mock.onPost(API.BYO_LOGO_API_URL + API.BYO_LOGO_API_UPLOAD_LOGO_ENDPOINT).reply(200, UPLOAD_SUCCESS_RESPONSE_SVG);
+
+  mock.onPost(API.BYO_LOGO_API_URL + API.BYO_LOGO_API_SAVE_ENDPOINT).reply(200, {
+    success: true,
+  });
+
+  return {
+    components: {
+      UploadYourLogoApplication,
+    },
+    template: `
+      <div>
+        <input type="file" @change="onFileInputChange" accept=".png,.svg,.eps" />
+        <UploadYourLogoApplication :is-user-authenticated="true" @on-finish="onFinish" />
+      </div>
+    `,
+    methods: {
+      onFileInputChange(e) {
+        if (e.target.files.length) {
+          window.dispatchEvent(
+            new CustomEvent(Events.BeginUploadLogoExperience, {
+              detail: { file: e.target.files[0] },
+            }),
+          );
+        }
+      },
+      onFinish(e) {
+        alert('on finish');
+        console.log(e);
+      },
+    },
+  };
+};
+
+export const SuccessWithKeywords = () => {
+  const mock = new MockAdapter(axios, { delayResponse: MOCK_RESPONSE_DELAY, onNoMatch: 'passthrough' });
+  mock.onPost(API.BYO_LOGO_API_URL + API.BYO_LOGO_API_UPLOAD_LOGO_ENDPOINT).reply(200, UPLOAD_SUCCESS_RESPONSE);
+
+  mock.onPost(API.BYO_LOGO_API_URL + API.BYO_LOGO_API_SAVE_ENDPOINT).reply(200, {
+    success: true,
+  });
+
+  mock.onGet(new RegExp(API.KEYWORD_SUGGESTIONS_API_URL)).reply(200, {
+    keywords: ['professional', 'modern'],
+  });
+
+  return {
+    components: {
+      UploadYourLogoApplication,
+    },
+    template: `
+      <div>
+        <input type="file" @change="onFileInputChange" accept=".png,.svg,.eps" />
+        <UploadYourLogoApplication
+          :use-dropzone="true"
+          :show-keywords-step="true"
+          template-type="business card"
+          @on-save-keywords="onSaveKeywords"
+          @on-finish="onFinish"
+        />
+      </div>
+    `,
+    methods: {
+      onFileInputChange(e) {
+        if (e.target.files.length) {
+          window.dispatchEvent(
+            new CustomEvent(Events.BeginUploadLogoExperience, {
+              detail: { file: e.target.files[0] },
+            }),
+          );
+        }
+      },
+      onSaveKeywords(e) {
+        console.log('on-save-keywords', e);
+      },
+      onFinish(e) {
+        alert('on finish');
+        console.log(e);
+      },
+    },
+  };
+};
+
+export const FailOnUpload = () => {
+  const mock = new MockAdapter(axios, { delayResponse: MOCK_RESPONSE_DELAY });
+  mock
+    .onPost(API.BYO_LOGO_API_URL + API.BYO_LOGO_API_UPLOAD_LOGO_ENDPOINT)
+    .reply(500, 'An error occured when extracting details from the image. Please try again.');
+
+  return {
+    components: {
+      UploadYourLogoApplication,
+    },
+    template: `
+      <div>
+        <input type="file" @change="onFileInputChange" accept=".png,.svg,.eps" />
+        <UploadYourLogoApplication @on-finish="onFinish" />
+      </div>
+    `,
+    methods: {
+      onFileInputChange(e) {
+        if (e.target.files.length) {
+          window.dispatchEvent(
+            new CustomEvent(Events.BeginUploadLogoExperience, {
+              detail: { file: e.target.files[0] },
+            }),
+          );
+        }
+      },
+      onFinish(e) {
+        alert('on finish');
+        console.log(e);
+      },
+    },
+  };
+};
+
+export const FailOnCreate = () => {
+  const mock = new MockAdapter(axios, { delayResponse: MOCK_RESPONSE_DELAY });
+  mock.onPost(API.BYO_LOGO_API_URL + API.BYO_LOGO_API_UPLOAD_LOGO_ENDPOINT).reply(200, UPLOAD_SUCCESS_RESPONSE);
+
+  mock
+    .onPost(API.BYO_LOGO_API_URL + API.BYO_LOGO_API_SAVE_ENDPOINT)
+    .reply(500, 'An error occured when creating a logo from the provided details. Please try again.');
+
+  return {
+    components: {
+      UploadYourLogoApplication,
+    },
+    template: `
+      <div>
+        <input type="file" @change="onFileInputChange" accept=".png,.svg,.eps" />
+        <UploadYourLogoApplication :is-user-authenticated="true" @on-finish="onFinish" />
+      </div>
+    `,
+    methods: {
+      onFileInputChange(e) {
+        if (e.target.files.length) {
+          window.dispatchEvent(
+            new CustomEvent(Events.BeginUploadLogoExperience, {
+              detail: { file: e.target.files[0] },
+            }),
+          );
+        }
+      },
+      onFinish(e) {
+        alert('on finish');
+        console.log(e);
+      },
+    },
+  };
+};