@designcrowd/fe-shared-lib 1.0.9-ast-card-2 → 1.0.9-ast-card-4

package/package.json

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

package/public/css/tailwind-brandCrowd.css

@@ -838,6 +838,9 @@ video {
 .theme-brandCrowd .tw-max-h-screen {
   max-height: 100vh;
 }
+.theme-brandCrowd .tw-w-1\/3 {
+  width: 33.333333%;
+}
 .theme-brandCrowd .tw-w-10 {
   width: 2.5rem;
 }

package/public/css/tailwind-brandPage.css

@@ -838,6 +838,9 @@ video {
 .theme-brandPage .tw-max-h-screen {
   max-height: 100vh;
 }
+.theme-brandPage .tw-w-1\/3 {
+  width: 33.333333%;
+}
 .theme-brandPage .tw-w-10 {
   width: 2.5rem;
 }

package/public/css/tailwind-crazyDomains.css

@@ -838,6 +838,9 @@ video {
 .theme-crazyDomains .tw-max-h-screen {
   max-height: 100vh;
 }
+.theme-crazyDomains .tw-w-1\/3 {
+  width: 33.333333%;
+}
 .theme-crazyDomains .tw-w-10 {
   width: 2.5rem;
 }

package/public/css/tailwind-designCom.css

@@ -838,6 +838,9 @@ video {
 .theme-designCom .tw-max-h-screen {
   max-height: 100vh;
 }
+.theme-designCom .tw-w-1\/3 {
+  width: 33.333333%;
+}
 .theme-designCom .tw-w-10 {
   width: 2.5rem;
 }

package/public/css/tailwind-designCrowd.css

@@ -838,6 +838,9 @@ video {
 .theme-designCrowd .tw-max-h-screen {
   max-height: 100vh;
 }
+.theme-designCrowd .tw-w-1\/3 {
+  width: 33.333333%;
+}
 .theme-designCrowd .tw-w-10 {
   width: 2.5rem;
 }

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

@@ -25,6 +25,16 @@ export const Sample = () => {
             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,28 +1,31 @@
 <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-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">
+          <div class="tw-flex tw-flex-col tw-w-full md:tw-grow tw-text-left md:tw-text-center">
+            <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 }}
-                <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>
+
+              <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">
               <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">
+          <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"
@@ -36,6 +39,22 @@
         </div>
       </div>
     </div>
+    <div class="tw-mt-2 tw-px-2">
+      <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">
+        <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>
@@ -78,3 +97,19 @@ export default {
   },
 };
 </script>
+
+<style scoped>
+@media (max-width: 640px) {
+  .desktop-cta {
+    display: none;
+    width: 100%;
+  }
+}
+
+@media (min-width: 640px) {
+  .mobile-cta {
+    display: none;
+    width: 100%;
+  }
+}
+</style>