@designcrowd/fe-shared-lib 1.5.6-mason-1 → 1.5.7-eng-3522

package/src/experiences/components/AuthFlow/AuthCrazyDomains.stories.js

@@ -1,60 +1,60 @@
-import SignIn from './SignIn.vue';
-import AuthLegal from './AuthLegal.vue';
-import themes from './Auth.fixtures';
-
-export default {
-  title: 'Components/SignIn/Crazy Domains',
-  component: SignIn,
-};
-
-export const SignInSample = () => {
-  return {
-    components: {
-      SignIn,
-    },
-    data() {
-      return {
-        themes,
-      };
-    },
-    template: `
-        <div class="tw-container tw-w-1/2 tw-font-sans">
-            <SignIn
-                sign-up-text="New to BrandCrowd?"
-                sign-up-url="#"
-                login-with-google-url="#"
-                login-with-facebook-url="https://www.facebook.com"
-                terms-of-use-url=""
-                privacy-policy-url=""
-                forgot-password-url="#"
-                anti-forgery-token="#"
-                :theme="themes.CRAZY_DOMAINS"
-                :available-themes="themes"
-            />
-        </div>
-    `,
-  };
-};
-
-export const AuthLegalCrazyDomainsSample = () => {
-  return {
-    components: {
-      AuthLegal,
-    },
-    data() {
-      return {
-        themes,
-      };
-    },
-    template: `
-        <div class="tw-container tw-max-w-xl tw-font-sans">
-          <AuthLegal
-            :terms-of-use-url="termsOfUseUrl"
-            :privacy-policy-url="privacyPolicyUrl"
-            theme="crazyDomains"
-            :available-themes="themes"
-          />
-        </div>
-    `,
-  };
-};
+import SignIn from './SignIn.vue';
+import AuthLegal from './AuthLegal.vue';
+import themes from './Auth.fixtures';
+
+export default {
+  title: 'Components/SignIn/Crazy Domains',
+  component: SignIn,
+};
+
+export const SignInSample = () => {
+  return {
+    components: {
+      SignIn,
+    },
+    data() {
+      return {
+        themes,
+      };
+    },
+    template: `
+        <div class="tw-container tw-w-1/2 tw-font-sans">
+            <SignIn
+                sign-up-text="New to BrandCrowd?"
+                sign-up-url="#"
+                login-with-google-url="#"
+                login-with-facebook-url="https://www.facebook.com"
+                terms-of-use-url=""
+                privacy-policy-url=""
+                forgot-password-url="#"
+                anti-forgery-token="#"
+                :theme="themes.CRAZY_DOMAINS"
+                :available-themes="themes"
+            />
+        </div>
+    `,
+  };
+};
+
+export const AuthLegalCrazyDomainsSample = () => {
+  return {
+    components: {
+      AuthLegal,
+    },
+    data() {
+      return {
+        themes,
+      };
+    },
+    template: `
+        <div class="tw-container tw-max-w-xl tw-font-sans">
+          <AuthLegal
+            :terms-of-use-url="termsOfUseUrl"
+            :privacy-policy-url="privacyPolicyUrl"
+            theme="crazyDomains"
+            :available-themes="themes"
+          />
+        </div>
+    `,
+  };
+};

package/src/experiences/components/AuthFlow/AuthLegal.vue

@@ -1,108 +1,108 @@
-<template>
-  <div v-if="showKeypathTermsAndConditions" class="tw-text-center tw-text-sm tw-mt-4 tw-mb-2 tw-text-grayscale-600">
-    <i18n-t :keypath="termsAndConditionsContentKeyPath">
-      <template #termsOfUseLabel>
-        <a
-          :href="termsAndConditionsLink"
-          target="_blank"
-          class="tw-text-info-500"
-          :class="{ 'hover:tw-underline': isDesignCom }"
-        >
-          {{ termsOfUseLabel }}
-        </a>
-      </template>
-      <template #privacyPolicyLabel>
-        <a
-          :href="privacyPolicyLink"
-          target="_blank"
-          class="tw-text-info-500"
-          :class="{ 'hover:tw-underline': isDesignCom }"
-        >
-          {{ privacyPolicyLabel }}
-        </a>
-      </template>
-    </i18n-t>
-  </div>
-  <p v-else class="tw-text-center tw-text-sm tw-mt-4 tw-mb-2 tw-text-grayscale-600">
-    <span v-if="isPartnerTheme">
-      {{ legal.BY_PROCEEDING_TEXT[theme] }}
-      <a :href="termsAndConditionsLink" target="_blank" :class="legal.LINK_CLASSES[theme]">
-        {{ legal.TERMS_AND_CONDITIONS_TEXT[theme] }}
-      </a>
-      and
-      <a :href="privacyPolicyLink" target="_blank" :class="legal.LINK_CLASSES[theme]">
-        {{ legal.PRIVACY_POLICY_TEXT[theme] }}
-      </a>
-    </span>
-    <span v-if="isPartnerTheme"> and BrandCrowd's </span>
-    <span v-else>By proceeding you accept our </span>
-    <a :href="termsOfUseUrl" target="_blank" class="tw-text-info-500" :class="{ 'hover:tw-underline': isDesignCom }"
-      >Terms of Use</a
-    >
-    and
-    <a :href="privacyPolicyUrl" target="_blank" class="tw-text-info-500" :class="{ 'hover:tw-underline': isDesignCom }"
-      >Privacy Policy</a
-    >
-    <span> and agree to receive future updates from {{ isDesignCom ? 'Design.com' : 'BrandCrowd' }}.</span>
-  </p>
-</template>
-
-<script>
-import themeMixin from '../../mixins/themeMixin';
-import { LEGAL } from '../../constants/partner-dictionary-constants';
-
-export default {
-  mixins: [themeMixin],
-  props: {
-    termsOfUseUrl: {
-      type: String,
-      required: true,
-    },
-    privacyPolicyUrl: {
-      type: String,
-      required: true,
-    },
-    isDesignCom: {
-      type: Boolean,
-      default: false,
-    },
-    termsAndConditions: {
-      type: Object,
-      required: false,
-      default: undefined,
-    },
-    termsAndConditionsContentKeyPath: {
-      type: String,
-      required: false,
-      default: undefined,
-    },
-  },
-  data() {
-    return {
-      legal: LEGAL,
-      termsAndConditionsLabel:
-        this.termsAndConditions?.label ??
-        'By proceeding you accept our {termsOfUseLabel} and {privacyPolicyLabel} and agree to receive future updates from',
-      termsOfUseLabel: this.termsAndConditions?.termsOfUseLabel ?? 'Terms of Use',
-      privacyPolicyLabel: this.termsAndConditions?.privacyPolicyLabel ?? 'Privacy Policy',
-    };
-  },
-  computed: {
-    termsAndConditionsLink() {
-      if (this.isPartnerTheme) {
-        return LEGAL.TERMS_AND_CONDITIONS_LINK[this.theme];
-      }
-      return this.termsOfUseUrl;
-    },
-    privacyPolicyLink() {
-      if (this.isPartnerTheme) {
-        return LEGAL.PRIVACY_POLICY_LINK[this.theme];
-      }
-      return this.privacyPolicyUrl;
-    },
-    showKeypathTermsAndConditions() {
-      return !this.isPartnerTheme && !!this.termsAndConditionsContentKeyPath && !!this.termsAndConditions
-    },
-  },
-};
-</script>
+<template>
+  <div v-if="showKeypathTermsAndConditions" class="tw-text-center tw-text-sm tw-mt-4 tw-mb-2 tw-text-grayscale-600">
+    <i18n-t :keypath="termsAndConditionsContentKeyPath">
+      <template #termsOfUseLabel>
+        <a
+          :href="termsAndConditionsLink"
+          target="_blank"
+          class="tw-text-info-500"
+          :class="{ 'hover:tw-underline': isDesignCom }"
+        >
+          {{ termsOfUseLabel }}
+        </a>
+      </template>
+      <template #privacyPolicyLabel>
+        <a
+          :href="privacyPolicyLink"
+          target="_blank"
+          class="tw-text-info-500"
+          :class="{ 'hover:tw-underline': isDesignCom }"
+        >
+          {{ privacyPolicyLabel }}
+        </a>
+      </template>
+    </i18n-t>
+  </div>
+  <p v-else class="tw-text-center tw-text-sm tw-mt-4 tw-mb-2 tw-text-grayscale-600">
+    <span v-if="isPartnerTheme">
+      {{ legal.BY_PROCEEDING_TEXT[theme] }}
+      <a :href="termsAndConditionsLink" target="_blank" :class="legal.LINK_CLASSES[theme]">
+        {{ legal.TERMS_AND_CONDITIONS_TEXT[theme] }}
+      </a>
+      and
+      <a :href="privacyPolicyLink" target="_blank" :class="legal.LINK_CLASSES[theme]">
+        {{ legal.PRIVACY_POLICY_TEXT[theme] }}
+      </a>
+    </span>
+    <span v-if="isPartnerTheme"> and BrandCrowd's </span>
+    <span v-else>By proceeding you accept our </span>
+    <a :href="termsOfUseUrl" target="_blank" class="tw-text-info-500" :class="{ 'hover:tw-underline': isDesignCom }"
+      >Terms of Use</a
+    >
+    and
+    <a :href="privacyPolicyUrl" target="_blank" class="tw-text-info-500" :class="{ 'hover:tw-underline': isDesignCom }"
+      >Privacy Policy</a
+    >
+    <span> and agree to receive future updates from {{ isDesignCom ? 'Design.com' : 'BrandCrowd' }}.</span>
+  </p>
+</template>
+
+<script>
+import themeMixin from '../../mixins/themeMixin';
+import { LEGAL } from '../../constants/partner-dictionary-constants';
+
+export default {
+  mixins: [themeMixin],
+  props: {
+    termsOfUseUrl: {
+      type: String,
+      required: true,
+    },
+    privacyPolicyUrl: {
+      type: String,
+      required: true,
+    },
+    isDesignCom: {
+      type: Boolean,
+      default: false,
+    },
+    termsAndConditions: {
+      type: Object,
+      required: false,
+      default: undefined,
+    },
+    termsAndConditionsContentKeyPath: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+  },
+  data() {
+    return {
+      legal: LEGAL,
+      termsAndConditionsLabel:
+        this.termsAndConditions?.label ??
+        'By proceeding you accept our {termsOfUseLabel} and {privacyPolicyLabel} and agree to receive future updates from',
+      termsOfUseLabel: this.termsAndConditions?.termsOfUseLabel ?? 'Terms of Use',
+      privacyPolicyLabel: this.termsAndConditions?.privacyPolicyLabel ?? 'Privacy Policy',
+    };
+  },
+  computed: {
+    termsAndConditionsLink() {
+      if (this.isPartnerTheme) {
+        return LEGAL.TERMS_AND_CONDITIONS_LINK[this.theme];
+      }
+      return this.termsOfUseUrl;
+    },
+    privacyPolicyLink() {
+      if (this.isPartnerTheme) {
+        return LEGAL.PRIVACY_POLICY_LINK[this.theme];
+      }
+      return this.privacyPolicyUrl;
+    },
+    showKeypathTermsAndConditions() {
+      return !this.isPartnerTheme && !!this.termsAndConditionsContentKeyPath && !!this.termsAndConditions
+    },
+  },
+};
+</script>

package/src/experiences/components/AuthFlow/AuthModal.vue

@@ -1,39 +1,39 @@
-<template>
-  <div
-    class="tw-relative tw-h-auto tw-bg-white lg:tw-rounded tw-shadow-md tw-w-full lg:tw-max-w-xl tw-flex-col tw-pt-12"
-  >
-    <button
-      v-if="showCancelButton"
-      class="tw-absolute tw-top-0 tw-right-0 tw-pt-6 tw-pr-6 tw-cursor-pointer"
-      @click="cancel"
-    >
-      <Icon name="close" size="sm" />
-    </button>
-    <div class="tw-flex tw-items-center tw-justify-center tw-flex-col tw-text-center tw-h-auto">
-      <div class="lg:tw-flex tw-items-start tw-justify-center tw-flex-col">
-        <slot name="content" />
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-import Icon from '../../../atoms/components/Icon/Icon.vue';
-
-export default {
-  components: {
-    Icon,
-  },
-  props: {
-    showCancelButton: {
-      type: Boolean,
-      required: false,
-      default: true,
-    },
-  },
-  methods: {
-    cancel() {
-      this.$emit('on-cancel');
-    },
-  },
-};
-</script>
+<template>
+  <div
+    class="tw-relative tw-h-auto tw-bg-white lg:tw-rounded tw-shadow-md tw-w-full lg:tw-max-w-xl tw-flex-col tw-pt-12"
+  >
+    <button
+      v-if="showCancelButton"
+      class="tw-absolute tw-top-0 tw-right-0 tw-pt-6 tw-pr-6 tw-cursor-pointer"
+      @click="cancel"
+    >
+      <Icon name="close" size="sm" />
+    </button>
+    <div class="tw-flex tw-items-center tw-justify-center tw-flex-col tw-text-center tw-h-auto">
+      <div class="lg:tw-flex tw-items-start tw-justify-center tw-flex-col">
+        <slot name="content" />
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import Icon from '../../../atoms/components/Icon/Icon.vue';
+
+export default {
+  components: {
+    Icon,
+  },
+  props: {
+    showCancelButton: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+  },
+  methods: {
+    cancel() {
+      this.$emit('on-cancel');
+    },
+  },
+};
+</script>