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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@designcrowd/fe-shared-lib",
-  "version": "1.0.9-ast-modal",
+  "version": "1.0.9-ast-card",
   "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,81 @@
+<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>
+                <h6
+                  class="tw-font-bold"
+                  :class="{ 'tw-text-grayscale-800': isDesignCom }"
+                >
+                  {{ title }}
+                </h6>
+                <p class="tw-text-grayscale-600">
+                  {{ description }}
+                </p>
+                <slot name="slug" />
+              </div>
+            </div>
+
+            <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="onClick"
+              >
+                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,
+      },
+    },
+    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.vue

@@ -54,7 +54,7 @@
               :prefix-text="`${brandPageBaseUrl}/`"
               :error="!!slugValidationError"
               :disabled="isPublishing || domainTypeValue === DOMAIN_TYPES.purchased"
-              placeholder="your-brand-name"
+              :placeholder="your-brand-name"
               data-test-brand-page-slug-input
               :attrs="{ 'data-test-set-url-text-field': '' }"
               @input="onSlugChanged"