@designcrowd/fe-shared-lib 1.0.9-ast-modal → 1.0.9-ast-card-1

package/package.json

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

package/public/css/tailwind-brandCrowd.css

@@ -679,6 +679,9 @@ video {
 .theme-brandCrowd .tw-mb-1 {
   margin-bottom: 0.25rem;
 }
+.theme-brandCrowd .tw-mb-10 {
+  margin-bottom: 2.5rem;
+}
 .theme-brandCrowd .tw-mb-2 {
   margin-bottom: 0.5rem;
 }
@@ -1715,6 +1718,9 @@ video {
 .theme-brandCrowd .tw-text-center {
   text-align: center;
 }
+.theme-brandCrowd .tw-align-top {
+  vertical-align: top;
+}
 .theme-brandCrowd .tw-align-middle {
   vertical-align: middle;
 }
@@ -2209,12 +2215,21 @@ video {
 .theme-brandCrowd .md\:tw-w-10 {
     width: 2.5rem;
   }
+.theme-brandCrowd .md\:tw-w-24 {
+    width: 6rem;
+  }
 .theme-brandCrowd .md\:tw-w-auto {
     width: auto;
   }
 .theme-brandCrowd .md\:tw-w-full {
     width: 100%;
   }
+.theme-brandCrowd .md\:tw-max-w-full {
+    max-width: 100%;
+  }
+.theme-brandCrowd .md\:tw-grow {
+    flex-grow: 1;
+  }
 .theme-brandCrowd .md\:tw-grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
@@ -2236,6 +2251,9 @@ video {
 .theme-brandCrowd .md\:tw-justify-start {
     justify-content: flex-start;
   }
+.theme-brandCrowd .md\:tw-justify-end {
+    justify-content: flex-end;
+  }
 .theme-brandCrowd .md\:tw-justify-center {
     justify-content: center;
   }
@@ -2278,6 +2296,9 @@ video {
     padding-top: 0.5rem;
     padding-bottom: 0.5rem;
   }
+.theme-brandCrowd .md\:tw-pl-4 {
+    padding-left: 1rem;
+  }
 .theme-brandCrowd .md\:tw-pr-2 {
     padding-right: 0.5rem;
   }

package/public/css/tailwind-brandPage.css

@@ -679,6 +679,9 @@ video {
 .theme-brandPage .tw-mb-1 {
   margin-bottom: 0.25rem;
 }
+.theme-brandPage .tw-mb-10 {
+  margin-bottom: 2.5rem;
+}
 .theme-brandPage .tw-mb-2 {
   margin-bottom: 0.5rem;
 }
@@ -1563,6 +1566,9 @@ video {
 .theme-brandPage .tw-text-center {
   text-align: center;
 }
+.theme-brandPage .tw-align-top {
+  vertical-align: top;
+}
 .theme-brandPage .tw-align-middle {
   vertical-align: middle;
 }
@@ -1897,12 +1903,21 @@ video {
 .theme-brandPage .md\:tw-w-10 {
     width: 2.5rem;
   }
+.theme-brandPage .md\:tw-w-24 {
+    width: 6rem;
+  }
 .theme-brandPage .md\:tw-w-auto {
     width: auto;
   }
 .theme-brandPage .md\:tw-w-full {
     width: 100%;
   }
+.theme-brandPage .md\:tw-max-w-full {
+    max-width: 100%;
+  }
+.theme-brandPage .md\:tw-grow {
+    flex-grow: 1;
+  }
 .theme-brandPage .md\:tw-grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
@@ -1924,6 +1939,9 @@ video {
 .theme-brandPage .md\:tw-justify-start {
     justify-content: flex-start;
   }
+.theme-brandPage .md\:tw-justify-end {
+    justify-content: flex-end;
+  }
 .theme-brandPage .md\:tw-justify-center {
     justify-content: center;
   }
@@ -1966,6 +1984,9 @@ video {
     padding-top: 0.5rem;
     padding-bottom: 0.5rem;
   }
+.theme-brandPage .md\:tw-pl-4 {
+    padding-left: 1rem;
+  }
 .theme-brandPage .md\:tw-pr-2 {
     padding-right: 0.5rem;
   }

package/public/css/tailwind-crazyDomains.css

@@ -679,6 +679,9 @@ video {
 .theme-crazyDomains .tw-mb-1 {
   margin-bottom: 0.25rem;
 }
+.theme-crazyDomains .tw-mb-10 {
+  margin-bottom: 2.5rem;
+}
 .theme-crazyDomains .tw-mb-2 {
   margin-bottom: 0.5rem;
 }
@@ -1715,6 +1718,9 @@ video {
 .theme-crazyDomains .tw-text-center {
   text-align: center;
 }
+.theme-crazyDomains .tw-align-top {
+  vertical-align: top;
+}
 .theme-crazyDomains .tw-align-middle {
   vertical-align: middle;
 }
@@ -2209,12 +2215,21 @@ video {
 .theme-crazyDomains .md\:tw-w-10 {
     width: 2.5rem;
   }
+.theme-crazyDomains .md\:tw-w-24 {
+    width: 6rem;
+  }
 .theme-crazyDomains .md\:tw-w-auto {
     width: auto;
   }
 .theme-crazyDomains .md\:tw-w-full {
     width: 100%;
   }
+.theme-crazyDomains .md\:tw-max-w-full {
+    max-width: 100%;
+  }
+.theme-crazyDomains .md\:tw-grow {
+    flex-grow: 1;
+  }
 .theme-crazyDomains .md\:tw-grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
@@ -2236,6 +2251,9 @@ video {
 .theme-crazyDomains .md\:tw-justify-start {
     justify-content: flex-start;
   }
+.theme-crazyDomains .md\:tw-justify-end {
+    justify-content: flex-end;
+  }
 .theme-crazyDomains .md\:tw-justify-center {
     justify-content: center;
   }
@@ -2278,6 +2296,9 @@ video {
     padding-top: 0.5rem;
     padding-bottom: 0.5rem;
   }
+.theme-crazyDomains .md\:tw-pl-4 {
+    padding-left: 1rem;
+  }
 .theme-crazyDomains .md\:tw-pr-2 {
     padding-right: 0.5rem;
   }

package/public/css/tailwind-designCom.css

@@ -679,6 +679,9 @@ video {
 .theme-designCom .tw-mb-1 {
   margin-bottom: 0.25rem;
 }
+.theme-designCom .tw-mb-10 {
+  margin-bottom: 2.5rem;
+}
 .theme-designCom .tw-mb-2 {
   margin-bottom: 0.5rem;
 }
@@ -1715,6 +1718,9 @@ video {
 .theme-designCom .tw-text-center {
   text-align: center;
 }
+.theme-designCom .tw-align-top {
+  vertical-align: top;
+}
 .theme-designCom .tw-align-middle {
   vertical-align: middle;
 }
@@ -2209,12 +2215,21 @@ video {
 .theme-designCom .md\:tw-w-10 {
     width: 2.5rem;
   }
+.theme-designCom .md\:tw-w-24 {
+    width: 6rem;
+  }
 .theme-designCom .md\:tw-w-auto {
     width: auto;
   }
 .theme-designCom .md\:tw-w-full {
     width: 100%;
   }
+.theme-designCom .md\:tw-max-w-full {
+    max-width: 100%;
+  }
+.theme-designCom .md\:tw-grow {
+    flex-grow: 1;
+  }
 .theme-designCom .md\:tw-grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
@@ -2236,6 +2251,9 @@ video {
 .theme-designCom .md\:tw-justify-start {
     justify-content: flex-start;
   }
+.theme-designCom .md\:tw-justify-end {
+    justify-content: flex-end;
+  }
 .theme-designCom .md\:tw-justify-center {
     justify-content: center;
   }
@@ -2278,6 +2296,9 @@ video {
     padding-top: 0.5rem;
     padding-bottom: 0.5rem;
   }
+.theme-designCom .md\:tw-pl-4 {
+    padding-left: 1rem;
+  }
 .theme-designCom .md\:tw-pr-2 {
     padding-right: 0.5rem;
   }

package/public/css/tailwind-designCrowd.css

@@ -679,6 +679,9 @@ video {
 .theme-designCrowd .tw-mb-1 {
   margin-bottom: 0.25rem;
 }
+.theme-designCrowd .tw-mb-10 {
+  margin-bottom: 2.5rem;
+}
 .theme-designCrowd .tw-mb-2 {
   margin-bottom: 0.5rem;
 }
@@ -1715,6 +1718,9 @@ video {
 .theme-designCrowd .tw-text-center {
   text-align: center;
 }
+.theme-designCrowd .tw-align-top {
+  vertical-align: top;
+}
 .theme-designCrowd .tw-align-middle {
   vertical-align: middle;
 }
@@ -2209,12 +2215,21 @@ video {
 .theme-designCrowd .md\:tw-w-10 {
     width: 2.5rem;
   }
+.theme-designCrowd .md\:tw-w-24 {
+    width: 6rem;
+  }
 .theme-designCrowd .md\:tw-w-auto {
     width: auto;
   }
 .theme-designCrowd .md\:tw-w-full {
     width: 100%;
   }
+.theme-designCrowd .md\:tw-max-w-full {
+    max-width: 100%;
+  }
+.theme-designCrowd .md\:tw-grow {
+    flex-grow: 1;
+  }
 .theme-designCrowd .md\:tw-grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
@@ -2236,6 +2251,9 @@ video {
 .theme-designCrowd .md\:tw-justify-start {
     justify-content: flex-start;
   }
+.theme-designCrowd .md\:tw-justify-end {
+    justify-content: flex-end;
+  }
 .theme-designCrowd .md\:tw-justify-center {
     justify-content: center;
   }
@@ -2278,6 +2296,9 @@ video {
     padding-top: 0.5rem;
     padding-bottom: 0.5rem;
   }
+.theme-designCrowd .md\:tw-pl-4 {
+    padding-left: 1rem;
+  }
 .theme-designCrowd .md\:tw-pr-2 {
     padding-right: 0.5rem;
   }

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

@@ -0,0 +1,30 @@
+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>
+    `,
+  };
+};

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

@@ -0,0 +1,80 @@
+<template>
+  <div class="tw-bg-white tw-border tw-border-grayscale-500 tw-rounded tw-p-4">
+    <div class="tw-flex tw-flex-col md: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-center md:tw-text-left">
+            <div class="tw-flex tw-flex-col tw-gap-2">
+              <p class="tw-font-bold tw-text-sm" :class="{ 'tw-text-grayscale-800': isDesignCom }">
+                {{ title }}
+                <span
+                  v-if="showLabel"
+                  class="tw-ml-2 tw-text-xs tw-text-primary-500 tw-border tw-border-primary-500 tw-rounded-full tw-px-2 tw-font-sans tw-uppercase"
+                  >Recommended</span
+                >
+              </p>
+              <p class="tw-text-grayscale-600 tw-text-sm">
+                {{ description }}
+              </p>
+              <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">
+            <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>
+</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>

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

@@ -2,11 +2,10 @@
   <div
     v-show="visible"
     :aria-hidden="visible ? 'false' : 'true'"
-    class="tw-bg-black tw-flex tw-items-center tw-justify-center tw-fixed tw-w-full tw-h-full tw-top-0 tw-left-0 tw-z-50"
+    class="tw-bg-black tw-bg-opacity-75 tw-flex tw-items-center tw-justify-center tw-fixed tw-w-full tw-h-full tw-top-0 tw-left-0 tw-z-50"
     :class="{
       'tw-px-4': fullScreenBreakpoint === undefined && !isImageMode,
       'sm:tw-px-4': fullScreenBreakpoint === 'sm' && !isImageMode,
-      'tw-bg-opacity-75': !darkOverlay,
     }"
     @mousedown.self="close"
   >
@@ -24,7 +23,6 @@
           'tw-rounded-md': fullScreenBreakpoint !== 'sm',
           'modal-bg': !simple && !isImageMode && showModalBackgroundImage,
           'modal-image': isImageMode,
-          'tw-bg-transparent': transparentModal,
         },
         classes,
       ]"
@@ -146,16 +144,6 @@ export default {
       required: false,
       default: false,
     },
-    darkOverlay: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    transparentModal: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
   },
   computed: {
     isImageMode() {

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

@@ -1,3 +1,4 @@
+import Card from '../../../atoms/components/Card/Card.vue';
 import PublishBrandPageModal from './PublishBrandPageModal.vue';
 import { domains } from './__fixtures__/data';
 
@@ -156,6 +157,7 @@ export const Free = () => {
   return {
     components: {
       PublishBrandPageModal,
+      Card,
     },
     data() {
       return {
@@ -186,53 +188,14 @@ export const Free = () => {
         @on-hide-domain-modal="onHideDomainListModal"
       >
         <template #recommended>
-          <div
-            class="tw-bg-white tw-border tw-border-grayscale-500 tw-rounded tw-p-4"
-          >
-            <div class="tw-flex tw-flex-col md:tw-flex-row tw-items-center">
-              <!-- Product image -->
-              <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="https://brandcrowd-cdn.s3.amazonaws.com/public/assets/images/icons/addon/add-ons-domain-name.svg"
-                  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"
-                >
-                  <!-- Product title/description -->
-                  <div
-                    class="tw-flex tw-flex-col tw-w-full md:tw-grow tw-text-center md:tw-text-left"
-                  >
-                    <div>
-                      <h6
-                        class="tw-font-bold"
-                        :class="{ 'tw-text-grayscale-800': isDesignCom }"
-                      >
-                        Purchase a domain
-                      </h6>
-                      <p class="tw-text-grayscale-600">
-                        Find the perfect domain name for your brand for
-                      </p>
-                    </div>
-                  </div>
-                  <!-- CTA -->
-                  <div class="tw-w-full md:tw-w-auto md:tw-justify-end md:tw-pl-4">
-                    <button
-                      class="tw-font-sans tw-border-2 tw-border-solid tw-font-bold tw-text-success-500 tw-uppercase tw-transition-colors tw-duration-300 tw-text-sm tw-py-3 tw-px-4 tw-w-full tw-rounded tw-cursor-pointer tw-border-success-500 tw-bg-white hover:tw-bg-success-100 tw-text-success-500 tw-w-full md:tw-w-24"
-                      @click="onShowDomainListModal"
-                    >
-                      Search
-                    </button>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
+            <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"
+            />
         </template>
       </PublishBrandPageModal>
     `,

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

@@ -24,7 +24,7 @@
         </div>
       </template>
       <template #default>
-        <div v-if="isNotPublished || isSlugEditMode">
+        <div v-if="isNotPublished || isSlugEditMode" :class="{ 'tw-mb-8': !hasPurchasedDomains }">
           <div
             v-if="!isSlugEditMode"
             class="tw-flex tw-items-center tw-mr-2 tw-mb-1"
@@ -40,7 +40,7 @@
               :value="domainTypeValue === DOMAIN_TYPES.slug"
             />
             <label
-              v-if="!isPublished"
+              v-if="!isPublished && hasPurchasedDomains"
               for="domain-type"
               class="tw-font-sans tw-w-full tw-text-grayscale-600 tw-text-sm tw-cursor-pointer tw-ml-2"
             >
@@ -48,19 +48,63 @@
             </label>
           </div>
           <div v-if="isNotPublished || isSlugEditMode" class="tw-mt-4">
-            <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"
-              data-test-brand-page-slug-input
-              :attrs="{ 'data-test-set-url-text-field': '' }"
-              @input="onSlugChanged"
-            />
-            <div v-if="slugErrorMessage" class="tw-mt-2 tw-text-sm tw-text-left tw-text-error-500 tw-font-normal">
-              {{ slugErrorMessage }}
+            <Card
+              v-if="!hasPurchasedDomains"
+              :imgUrl="iconUrl"
+              title="Free Address"
+              description="Choose a free address to publish now. You can always edit the URL later"
+              :is-design-com="isDesignCom"
+              :has-search-button="false"
+            >
+              <template #slug>
+                <div class="tw-flex tw-flex-row tw-justify-between">
+                  <div>
+                    <TextInput
+                      v-model="internalSlug"
+                      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'"
+                      data-test-brand-page-slug-input
+                      :attrs="{ 'data-test-set-url-text-field': '' }"
+                      @input="onSlugChanged"
+                    />
+                    <div
+                      v-if="slugErrorMessage"
+                      class="tw-mt-2 tw-text-sm tw-text-left tw-text-error-500 tw-font-normal"
+                    >
+                      {{ slugErrorMessage }}
+                    </div>
+                  </div>
+                  <button
+                    class="tw-ml-2 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"
+                    data-test-brand-page-publish-button
+                    :class="{
+                      'tw-uppercase': !isDesignCom
+                    }"
+                  >
+                    Publish
+                  </button>
+                </div>
+              </template>
+            </Card>
+            <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"
+                data-test-brand-page-slug-input
+                :attrs="{ 'data-test-set-url-text-field': '' }"
+                @input="onSlugChanged"
+              />
+              <div v-if="slugErrorMessage" class="tw-mt-2 tw-text-sm tw-text-left tw-text-error-500 tw-font-normal">
+                {{ slugErrorMessage }}
+              </div>
             </div>
           </div>
           <div v-if="isNotPublished || !isSlugEditMode" class="tw-mt-4">
@@ -114,6 +158,7 @@
             <slot v-if="!hasPurchasedDomains" name="recommended" />
           </div>
           <div
+            v-if="hasPurchasedDomains"
             class="tw-font-sans tw-text-center"
             :style="isMobile ? 'padding-left: 1.5rem; padding-right: 1.5rem;' : ''"
           >
@@ -197,6 +242,7 @@
 </template>
 <script>
 import Modal from '../../../../src/atoms/components/Modal/Modal.vue';
+import Card from '../../../../src/atoms/components/Card/Card.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';
@@ -226,6 +272,7 @@ export default {
     TextCopyField,
     SellDomainNameSearchWithResults,
     SellDomainNameListModal,
+    Card,
   },
   mixins: [mediaQueryMixin],
   props: {
@@ -342,6 +389,11 @@ export default {
       required: false,
       default: undefined,
     },
+    isBrandContact: {
+      type: Boolean,
+      required: true,
+      default: false,
+    },
   },
   emits: [
     'close-modal',
@@ -388,6 +440,11 @@ export default {
     isSlugEditMode() {
       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';
+    },
   },
   watch: {
     brandPageSlug(slug) {