@designcrowd/fe-shared-lib 1.0.9-ast-card-5 → 1.0.9-ast-card-7

package/index.js

@@ -17,6 +17,7 @@ export { default as SellDomainNameListModal } from './src/experiences/components
 export { default as SellDomainNameList } from './src/experiences/components/SellDomainNameList/SellDomainNameList.vue';
 export { default as SellDomainNameWidget } from './src/experiences/components/SellDomainNameWidget/SellDomainNameWidget.vue';
 export { default as PublishBrandPageModal } from './src/experiences/components/PublishBrandPageModal/PublishBrandPageModal.vue';
+export { default as PublishBrandPageCard } from './src/experiences/components/PublishBrandPageModal/PublishBrandPageCard.vue';
 
 export { default as Button } from './src/atoms/components/Button/Button.vue';
 export { default as ButtonGroup } from './src/atoms/components/ButtonGroup/ButtonGroup.vue';
@@ -36,7 +37,6 @@ export { default as TextInput } from './src/atoms/components/TextInput/TextInput
 export { default as TextCopyField } from './src/atoms/components/TextCopyField/TextCopyField.vue';
 export { default as Textarea } from './src/atoms/components/Textarea/Textarea.vue';
 export { default as Toggle } from './src/atoms/components/Toggle/Toggle.vue';
-export { default as Card } from './src/atoms/components/Card/Card.vue';
 export { default as Checkbox } from './src/atoms/components/Checkbox/Checkbox.vue';
 export { default as ColorPicker } from './src/atoms/components/ColorPicker/ColorPicker.vue';
 export { default as Carousel } from './src/atoms/components/Carousel/Carousel.vue';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@designcrowd/fe-shared-lib",
-  "version": "1.0.9-ast-card-5",
+  "version": "1.0.9-ast-card-7",
   "scripts": {
     "start": "npm run storybook",
     "build": "npm run build:css --production",

package/public/css/tailwind-brandCrowd.css

@@ -2308,9 +2308,6 @@ video {
 .theme-brandCrowd .md\:tw-text-left {
     text-align: left;
   }
-.theme-brandCrowd .md\:tw-text-center {
-    text-align: center;
-  }
 .theme-brandCrowd .md\:tw-text-sm {
     font-size: 0.875rem;
     line-height: 1.25rem;

package/public/css/tailwind-brandPage.css

@@ -1996,9 +1996,6 @@ video {
 .theme-brandPage .md\:tw-text-left {
     text-align: left;
   }
-.theme-brandPage .md\:tw-text-center {
-    text-align: center;
-  }
 .theme-brandPage .md\:tw-text-sm {
     font-size: 0.875rem;
     line-height: 1.25rem;

package/public/css/tailwind-crazyDomains.css

@@ -2308,9 +2308,6 @@ video {
 .theme-crazyDomains .md\:tw-text-left {
     text-align: left;
   }
-.theme-crazyDomains .md\:tw-text-center {
-    text-align: center;
-  }
 .theme-crazyDomains .md\:tw-text-sm {
     font-size: 0.875rem;
     line-height: 1.25rem;

package/public/css/tailwind-designCom.css

@@ -2308,9 +2308,6 @@ video {
 .theme-designCom .md\:tw-text-left {
     text-align: left;
   }
-.theme-designCom .md\:tw-text-center {
-    text-align: center;
-  }
 .theme-designCom .md\:tw-text-sm {
     font-size: 0.875rem;
     line-height: 1.25rem;

package/public/css/tailwind-designCrowd.css

@@ -2308,9 +2308,6 @@ video {
 .theme-designCrowd .md\:tw-text-left {
     text-align: left;
   }
-.theme-designCrowd .md\:tw-text-center {
-    text-align: center;
-  }
 .theme-designCrowd .md\:tw-text-sm {
     font-size: 0.875rem;
     line-height: 1.25rem;

package/src/experiences/components/PublishBrandPageModal/PublishBrandPageCard.vue

@@ -0,0 +1,115 @@
+<template>
+  <div class="tw-bg-white tw-border tw-border-grayscale-500 tw-rounded tw-p-4">
+    <div class="tw-flex tw-flex-row tw-items-center">
+      <div class="tw-flex tw-flex-col tw-mx-auto tw-max-w-1/3 tw-text-center tw-align-top tw-px-2">
+        <img :src="imgUrl" alt="icon" class="md:tw-max-w-full" />
+      </div>
+      <div class="tw-flex tw-flex-col tw-px-2 tw-w-full">
+        <div class="tw-flex tw-flex-col md:tw-flex-row tw-text-center md:tw-text-left tw-items-center">
+          <div class="tw-flex tw-flex-col tw-w-full md:tw-grow tw-text-left">
+            <div class="tw-flex tw-flex-col md:tw-flex-row tw-gap-2">
+              <p class="tw-font-bold tw-text-sm" :class="{ 'tw-text-grayscale-800': isDesignCom }">
+                {{ title }}
+              </p>
+              <span
+                v-if="showLabel"
+                class="tw-text-xs tw-h-4 tw-w-fit tw-text-primary-500 tw-border tw-border-solid tw-border-primary-500 tw-rounded-full tw-px-2 tw-font-sans tw-uppercase"
+              >
+                Recommended
+              </span>
+            </div>
+            <p class="tw-mt-2 md:tw-mt-0 tw-text-grayscale-600 tw-text-sm">
+              {{ description }}
+            </p>
+            <div class="desktop-cta tw-mt-2">
+              <slot name="slug" />
+            </div>
+          </div>
+          <div v-if="hasSearchButton" class="tw-w-full md:tw-w-auto md:tw-justify-end md:tw-pl-4 desktop-cta">
+            <Button
+              label="Search"
+              class="tw-flex tw-items-center tw-justify-center md:tw-ml-2 tw-mt-2 md:tw-mt-0 tw-font-sans tw-font-bold tw-transition-colors tw-duration-300 tw-text-sm tw-w-full tw-rounded tw-cursor-pointer tw-w-full md:tw-w-24"
+              data-test-brand-page-publish-button
+              variant="primary"
+              size="small-medium"
+              @on-click="onClick"
+              :class="{
+                'tw-uppercase': !isDesignCom,
+              }"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="tw-mt-2 tw-px-2 tw-flex tw-flex-col tw-w-full">
+      <div class="mobile-cta">
+        <slot name="slug" />
+      </div>
+      <div v-if="hasSearchButton" class="tw-w-full md:tw-w-auto md:tw-justify-end md:tw-pl-4 mobile-cta tw-mt-2">
+        <Button
+          label="Search"
+          class="tw-flex tw-items-center tw-justify-center md:tw-ml-2 tw-mt-2 md:tw-mt-0 tw-font-sans tw-font-bold tw-transition-colors tw-duration-300 tw-text-sm tw-w-full tw-rounded tw-cursor-pointer tw-w-full md:tw-w-24"
+          data-test-brand-page-search-button
+          variant="primary"
+          size="small-medium"
+          :full-width="true"
+          @on-click="onClick"
+          :class="{
+            'tw-uppercase': !isDesignCom,
+          }"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import Button from '../../../../src/atoms/components/Button/Button.vue';
+
+const props = defineProps({
+  title: {
+    type: String,
+    default: '',
+  },
+  description: {
+    type: String,
+    default: '',
+  },
+  imgUrl: {
+    type: Boolean,
+    default: true,
+  },
+  isDesignCom: {
+    type: Boolean,
+    default: false,
+  },
+  hasSearchButton: {
+    type: Boolean,
+    default: true,
+  },
+  showLabel: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(['on-show-domain-list-modal']);
+const onClick = () => {
+  emit('on-show-domain-list-modal');
+};
+</script>
+
+<style scoped>
+@media (max-width: 640px) {
+  .desktop-cta {
+    display: none;
+    width: 100%;
+  }
+}
+
+@media (min-width: 640px) {
+  .mobile-cta {
+    display: none;
+    width: 100%;
+  }
+}
+</style>

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

@@ -1,4 +1,4 @@
-import Card from '../../../atoms/components/Card/Card.vue';
+import Card from './PublishBrandPageCard.vue';
 import PublishBrandPageModal from './PublishBrandPageModal.vue';
 import { domains } from './__fixtures__/data';
 

package/src/experiences/components/PublishBrandPageModal/PublishBrandPageModal.vue

@@ -48,7 +48,7 @@
             </label>
           </div>
           <div v-if="isNotPublished || isSlugEditMode" class="tw-mt-4">
-            <Card
+            <PublishBrandPageCard
               v-if="!hasPurchasedDomains"
               :imgUrl="iconUrl"
               title="Free Address"
@@ -64,8 +64,8 @@
                       element-classes="tw-mb-0 !tw-rounded-l-none tw-text-md tw-w-1/3"
                       :prefix-text="`${brandPageBaseUrl}/`"
                       :error="!!slugValidationError"
-                      :disabled="isPublishing || domainTypeValue === DOMAIN_TYPES.purchased"
-                      :placeholder="isBrandContact ? 'your-name' : 'your-business-name'"
+                      :disabled="isInputEnabled"
+                      :placeholder="getPlaceHolder(brandPageType)"
                       data-test-brand-page-slug-input
                       :attrs="{ 'data-test-set-url-text-field': '' }"
                       @input="onSlugChanged"
@@ -77,27 +77,30 @@
                       {{ slugErrorMessage }}
                     </div>
                   </div>
-                  <button
-                    class="md:tw-ml-2 tw-mt-2 md:tw-mt-0 tw-font-sans tw-font-bold tw-transition-colors tw-duration-300 tw-text-sm tw-py-2 tw-px-4 tw-w-full tw-rounded tw-cursor-pointer tw-w-full md:tw-w-24 tw-text-white tw-bg-primary-500"
-                    @click="onPublish"
+                  <Button
+                    label="Publish"
+                    :disabled="isPublishAllowed"
+                    class="tw-flex tw-items-center tw-justify-center md:tw-ml-2 tw-mt-2 md:tw-mt-0 tw-font-sans tw-font-bold tw-transition-colors tw-duration-300 tw-text-sm tw-w-full tw-rounded tw-cursor-pointer tw-w-full md:tw-w-24"
                     data-test-brand-page-publish-button
+                    variant="primary"
+                    size="small-medium"
+                    @on-click="onPublish"
+                    :full-width="isMobile"
                     :class="{
-                      'tw-uppercase': !isDesignCom
+                      'tw-uppercase': !isDesignCom,
                     }"
-                  >
-                    Publish
-                  </button>
+                  />
                 </div>
               </template>
-            </Card>
+            </PublishBrandPageCard>
             <div v-else>
               <TextInput
                 v-model="internalSlug"
                 element-classes="tw-mb-0 !tw-rounded-l-none tw-text-lg"
                 :prefix-text="`${brandPageBaseUrl}/`"
                 :error="!!slugValidationError"
-                :disabled="isPublishing || domainTypeValue === DOMAIN_TYPES.purchased"
-                :placeholder="your - brand - name"
+                :disabled="isInputEnabled"
+                :placeholder="getPlaceHolder(brandPageType)"
                 data-test-brand-page-slug-input
                 :attrs="{ 'data-test-set-url-text-field': '' }"
                 @input="onSlugChanged"
@@ -166,7 +169,7 @@
               :label="isSlugEditMode ? 'Set URL' : 'Publish'"
               :variant="isDesignCom ? 'primary' : 'primary-with-icon'"
               icon="chevron-right-wide"
-              :disabled="!allowPublish || isPublishing"
+              :disabled="isPublishAllowed"
               class="tw-my-4"
               :full-width="isMobile"
               data-test-brand-page-publish-button
@@ -242,7 +245,7 @@
 </template>
 <script>
 import Modal from '../../../../src/atoms/components/Modal/Modal.vue';
-import Card from '../../../../src/atoms/components/Card/Card.vue';
+import PublishBrandPageCard from './PublishBrandPageCard.vue';
 import TextInput from '../../../../src/atoms/components/TextInput/TextInput.vue';
 import Dropdown from '../../../../src/atoms/components/Dropdown/Dropdown.vue';
 import DropdownItem from '../../../../src/atoms/components/Dropdown/DropdownItem.vue';
@@ -262,6 +265,9 @@ const DOMAIN_TYPES = {
   purchased: 'purchased',
 };
 
+const DCOM_IMG_FREE = 'https://brandcrowd-cdn.s3.amazonaws.com/public/assets/images/icons/publish/dcom-free-url.svg';
+const BC_IMG_FREE = 'https://brandcrowd-cdn.s3.amazonaws.com/public/assets/images/icons/publish/bc-free-url.svg';
+
 export default {
   components: {
     Modal,
@@ -272,7 +278,7 @@ export default {
     TextCopyField,
     SellDomainNameSearchWithResults,
     SellDomainNameListModal,
-    Card,
+    PublishBrandPageCard,
   },
   mixins: [mediaQueryMixin],
   props: {
@@ -389,8 +395,8 @@ export default {
       required: false,
       default: undefined,
     },
-    isBrandContact: {
-      type: Boolean,
+    brandPageType: {
+      type: String,
       required: true,
       default: false,
     },
@@ -441,9 +447,13 @@ export default {
       return this.isPublished && this.shouldPublish && this.isBrandPageSlugEditMode;
     },
     iconUrl() {
-      return this.isDesignCom
-        ? 'https://brandcrowd-cdn.s3.amazonaws.com/public/assets/images/icons/publish/dcom-free-url.svg'
-        : 'https://brandcrowd-cdn.s3.amazonaws.com/public/assets/images/icons/publish/bc-free-url.svg';
+      return this.isDesignCom ? DCOM_IMG_FREE : BC_IMG_FREE;
+    },
+    isInputEnabled() {
+      return this.isPublishing || this.domainTypeValue === DOMAIN_TYPES.purchased;
+    },
+    isPublishAllowed() {
+      return !this.allowPublish || this.isPublishing;
     },
   },
   watch: {
@@ -546,6 +556,9 @@ export default {
       const cleanedText = inputText.replace(/[^\p{L}\p{N}\-.]+/gu, '');
       return cleanedText.toLowerCase();
     },
+    getPlaceHolder(type) {
+      return type === 'brandContact' ? 'your-name' : 'your-business-name';
+    },
   },
 };
 </script>

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

@@ -1,40 +0,0 @@
-import Card from './Card.vue';
-
-export default {
-  title: 'Components/Card',
-  component: Card,
-};
-
-const data = {
-  components: {
-    Card,
-  },
-};
-
-export const Sample = () => {
-  return {
-    ...data,
-    template: `
-      <Card 
-        :imgUrl="'https://brandcrowd-cdn.s3.amazonaws.com/public/assets/images/icons/publish/dcom-free-url.svg'"
-        title="Purchase Domain"
-        description="Find the perfect domain name for your brand"
-        is-design-com="true"
-      >
-      <template #slug>
-            test
-      </template>
-      </Card>
-
-      <Card
-        imgUrl="https://brandcrowd-cdn.s3.amazonaws.com/public/assets/images/icons/addon/add-ons-domain-name.svg"
-        title="Custom Domain"
-        description="Make it easy for customers to find you with a domain that matches your business"
-        :is-design-com="isDesignCom"
-        :has-search-button="true"
-        :show-label="true"
-        @on-show-domain-list-modal="onShowDomainListModal"
-      />
-    `,
-  };
-};

package/src/atoms/components/Card/Card.vue

@@ -1,114 +0,0 @@
-<template>
-  <div class="tw-bg-white tw-border tw-border-grayscale-500 tw-rounded tw-p-4">
-    <div class="tw-flex tw-flex-row tw-items-center">
-      <div class="tw-flex tw-flex-col tw-mx-auto tw-max-w-1/3 tw-text-center tw-align-top tw-px-2">
-        <img :src="imgUrl" alt="icon" class="md:tw-max-w-full" />
-      </div>
-      <div class="tw-flex tw-flex-col tw-px-2 tw-w-full">
-        <div class="tw-flex tw-flex-col md:tw-flex-row tw-text-center md:tw-text-left tw-items-center">
-          <div class="tw-flex tw-flex-col tw-w-full md:tw-grow tw-text-left">
-            <div class="tw-flex tw-flex-col md:tw-flex-row">
-              <p class="tw-font-bold tw-text-sm" :class="{ 'tw-text-grayscale-800': isDesignCom }">
-                {{ title }}
-              </p>
-              <span
-                v-if="showLabel"
-                class="md:tw-ml-2 tw-text-xs tw-h-4 tw-w-fit tw-text-primary-500 tw-border tw-border-solid tw-border-primary-500 tw-rounded-full tw-px-2 tw-font-sans tw-uppercase"
-                >Recommended</span
-              >
-            </div>
-            <p class="tw-text-grayscale-600 tw-text-sm">
-              {{ description }}
-            </p>
-            <div class="desktop-cta tw-mt-2">
-              <slot name="slug" />
-            </div>
-          </div>
-          <div v-if="hasSearchButton" class="tw-w-full md:tw-w-auto md:tw-justify-end md:tw-pl-4 desktop-cta">
-            <button
-              class="tw-font-sans tw-font-bold tw-transition-colors tw-duration-300 tw-text-sm tw-py-2 tw-px-4 tw-w-full tw-rounded tw-cursor-pointer tw-w-full md:tw-w-24 tw-text-white tw-bg-primary-500"
-              @click="onClick"
-              :class="{
-                'tw-uppercase': !isDesignCom,
-              }"
-            >
-              Search
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="tw-mt-2 tw-px-2 tw-flex tw-flex-col tw-w-full">
-      <div class="mobile-cta">
-        <slot name="slug" />
-      </div>
-      <div v-if="hasSearchButton" class="tw-w-full md:tw-w-auto md:tw-justify-end md:tw-pl-4 mobile-cta tw-mt-2">
-        <button
-          class="tw-font-sans tw-font-bold tw-transition-colors tw-duration-300 tw-text-sm tw-py-2 tw-px-4 tw-w-full tw-rounded tw-cursor-pointer tw-w-full md:tw-w-24 tw-text-white tw-bg-primary-500"
-          @click="onClick"
-          :class="{
-            'tw-uppercase': !isDesignCom,
-          }"
-        >
-          Search
-        </button>
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-import Icon from '../Icon/Icon.vue';
-
-export default {
-  components: {
-    Icon,
-  },
-  props: {
-    title: {
-      type: String,
-      default: '',
-    },
-    description: {
-      type: String,
-      default: '',
-    },
-    imgUrl: {
-      type: Boolean,
-      default: true,
-    },
-    isDesignCom: {
-      type: Boolean,
-      default: false,
-    },
-    hasSearchButton: {
-      type: Boolean,
-      default: true,
-    },
-    showLabel: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  methods: {
-    onClick() {
-      this.$emit('on-show-domain-list-modal');
-    },
-  },
-};
-</script>
-
-<style scoped>
-@media (max-width: 640px) {
-  .desktop-cta {
-    display: none;
-    width: 100%;
-  }
-}
-
-@media (min-width: 640px) {
-  .mobile-cta {
-    display: none;
-    width: 100%;
-  }
-}
-</style>