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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/index.js +1 -0
  2. package/package.json +1 -1
  3. package/src/atoms/components/Card/Card.vue +70 -71
  4. package/src/experiences/components/PublishBrandPageModal/PublishBrandPageModal.stories.js +10 -47
  5. package/src/experiences/components/PublishBrandPageModal/PublishBrandPageModal.vue +72 -15
package/index.js CHANGED
@@ -36,6 +36,7 @@ export { default as TextInput } from './src/atoms/components/TextInput/TextInput
36
36
  export { default as TextCopyField } from './src/atoms/components/TextCopyField/TextCopyField.vue';
37
37
  export { default as Textarea } from './src/atoms/components/Textarea/Textarea.vue';
38
38
  export { default as Toggle } from './src/atoms/components/Toggle/Toggle.vue';
39
+ export { default as Card } from './src/atoms/components/Card/Card.vue';
39
40
  export { default as Checkbox } from './src/atoms/components/Checkbox/Checkbox.vue';
40
41
  export { default as ColorPicker } from './src/atoms/components/ColorPicker/ColorPicker.vue';
41
42
  export { default as Carousel } from './src/atoms/components/Carousel/Carousel.vue';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@designcrowd/fe-shared-lib",
3
- "version": "1.0.9-ast-card",
3
+ "version": "1.0.9-ast-card-2",
4
4
  "scripts": {
5
5
  "start": "npm run storybook",
6
6
  "build": "npm run build:css --production",
package/src/atoms/components/Card/Card.vue CHANGED
@@ -1,81 +1,80 @@
1
1
  <template>
2
- <div
3
- class="tw-bg-white tw-border tw-border-grayscale-500 tw-rounded tw-p-4"
4
- >
5
- <div class="tw-flex tw-flex-col md:tw-flex-row tw-items-center">
6
- <div
7
- class="tw-flex tw-flex-col tw-mx-auto tw-max-w-1/3 tw-text-center tw-align-top tw-px-2"
8
- >
9
- <img
10
- :src="imgUrl"
11
- alt="icon"
12
- class="md:tw-max-w-full"
13
- />
14
- </div>
15
- <div class="tw-flex tw-flex-col tw-px-2 tw-w-full">
16
- <div
17
- class="tw-flex tw-flex-col md:tw-flex-row tw-text-center md:tw-text-left tw-items-center"
18
- >
19
- <div
20
- class="tw-flex tw-flex-col tw-w-full md:tw-grow tw-text-center md:tw-text-left"
21
- >
22
- <div>
23
- <h6
24
- class="tw-font-bold"
25
- :class="{ 'tw-text-grayscale-800': isDesignCom }"
2
+ <div class="tw-bg-white tw-border tw-border-grayscale-500 tw-rounded tw-p-4">
3
+ <div class="tw-flex tw-flex-col md:tw-flex-row tw-items-center">
4
+ <div class="tw-flex tw-flex-col tw-mx-auto tw-max-w-1/3 tw-text-center tw-align-top tw-px-2">
5
+ <img :src="imgUrl" alt="icon" class="md:tw-max-w-full" />
6
+ </div>
7
+ <div class="tw-flex tw-flex-col tw-px-2 tw-w-full">
8
+ <div class="tw-flex tw-flex-col md:tw-flex-row tw-text-center md:tw-text-left tw-items-center">
9
+ <div class="tw-flex tw-flex-col tw-w-full md:tw-grow tw-text-center md:tw-text-left">
10
+ <div class="tw-flex tw-flex-col tw-gap-2">
11
+ <p class="tw-font-bold tw-text-sm" :class="{ 'tw-text-grayscale-800': isDesignCom }">
12
+ {{ title }}
13
+ <span
14
+ v-if="showLabel"
15
+ 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"
16
+ >Recommended</span
26
17
  >
27
- {{ title }}
28
- </h6>
29
- <p class="tw-text-grayscale-600">
30
- {{ description }}
31
- </p>
32
- <slot name="slug" />
33
- </div>
34
- </div>
35
-
36
- <div class="tw-w-full md:tw-w-auto md:tw-justify-end md:tw-pl-4">
37
- <button
38
- 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"
39
- @click="onClick"
40
- >
41
- Search
42
- </button>
18
+ </p>
19
+ <p class="tw-text-grayscale-600 tw-text-sm">
20
+ {{ description }}
21
+ </p>
22
+ <slot name="slug" />
43
23
  </div>
44
24
  </div>
25
+ <div v-if="hasSearchButton" class="tw-w-full md:tw-w-auto md:tw-justify-end md:tw-pl-4">
26
+ <button
27
+ 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"
28
+ @click="onClick"
29
+ :class="{
30
+ 'tw-uppercase': !isDesignCom,
31
+ }"
32
+ >
33
+ Search
34
+ </button>
35
+ </div>
45
36
  </div>
46
37
  </div>
47
38
  </div>
48
- </template>
49
- <script>
50
- import Icon from '../Icon/Icon.vue';
51
-
52
- export default {
53
- components: {
54
- Icon,
39
+ </div>
40
+ </template>
41
+ <script>
42
+ import Icon from '../Icon/Icon.vue';
43
+
44
+ export default {
45
+ components: {
46
+ Icon,
47
+ },
48
+ props: {
49
+ title: {
50
+ type: String,
51
+ default: '',
52
+ },
53
+ description: {
54
+ type: String,
55
+ default: '',
56
+ },
57
+ imgUrl: {
58
+ type: Boolean,
59
+ default: true,
60
+ },
61
+ isDesignCom: {
62
+ type: Boolean,
63
+ default: false,
64
+ },
65
+ hasSearchButton: {
66
+ type: Boolean,
67
+ default: true,
55
68
  },
56
- props: {
57
- title: {
58
- type: String,
59
- default: '',
60
- },
61
- description: {
62
- type: String,
63
- default: '',
64
- },
65
- imgUrl: {
66
- type: Boolean,
67
- default: true,
68
- },
69
- isDesignCom: {
70
- type: Boolean,
71
- default: false,
72
- },
69
+ showLabel: {
70
+ type: Boolean,
71
+ default: false,
73
72
  },
74
- methods: {
75
- onClick() {
76
- this.$emit('on-show-domain-list-modal');
77
- },
73
+ },
74
+ methods: {
75
+ onClick() {
76
+ this.$emit('on-show-domain-list-modal');
78
77
  },
79
- };
80
- </script>
81
-
78
+ },
79
+ };
80
+ </script>
package/src/experiences/components/PublishBrandPageModal/PublishBrandPageModal.stories.js CHANGED
@@ -1,3 +1,4 @@
1
+ import Card from '../../../atoms/components/Card/Card.vue';
1
2
  import PublishBrandPageModal from './PublishBrandPageModal.vue';
2
3
  import { domains } from './__fixtures__/data';
3
4
 
@@ -156,6 +157,7 @@ export const Free = () => {
156
157
  return {
157
158
  components: {
158
159
  PublishBrandPageModal,
160
+ Card,
159
161
  },
160
162
  data() {
161
163
  return {
@@ -186,53 +188,14 @@ export const Free = () => {
186
188
  @on-hide-domain-modal="onHideDomainListModal"
187
189
  >
188
190
  <template #recommended>
189
- <div
190
- class="tw-bg-white tw-border tw-border-grayscale-500 tw-rounded tw-p-4"
191
- >
192
- <div class="tw-flex tw-flex-col md:tw-flex-row tw-items-center">
193
- <!-- Product image -->
194
- <div
195
- class="tw-flex tw-flex-col tw-mx-auto tw-max-w-1/3 tw-text-center tw-align-top tw-px-2"
196
- >
197
- <img
198
- src="https://brandcrowd-cdn.s3.amazonaws.com/public/assets/images/icons/addon/add-ons-domain-name.svg"
199
- alt="icon"
200
- class="md:tw-max-w-full"
201
- />
202
- </div>
203
- <div class="tw-flex tw-flex-col tw-px-2 tw-w-full">
204
- <div
205
- class="tw-flex tw-flex-col md:tw-flex-row tw-text-center md:tw-text-left tw-items-center"
206
- >
207
- <!-- Product title/description -->
208
- <div
209
- class="tw-flex tw-flex-col tw-w-full md:tw-grow tw-text-center md:tw-text-left"
210
- >
211
- <div>
212
- <h6
213
- class="tw-font-bold"
214
- :class="{ 'tw-text-grayscale-800': isDesignCom }"
215
- >
216
- Purchase a domain
217
- </h6>
218
- <p class="tw-text-grayscale-600">
219
- Find the perfect domain name for your brand for
220
- </p>
221
- </div>
222
- </div>
223
- <!-- CTA -->
224
- <div class="tw-w-full md:tw-w-auto md:tw-justify-end md:tw-pl-4">
225
- <button
226
- 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"
227
- @click="onShowDomainListModal"
228
- >
229
- Search
230
- </button>
231
- </div>
232
- </div>
233
- </div>
234
- </div>
235
- </div>
191
+ <Card
192
+ :imgUrl="'https://brandcrowd-cdn.s3.amazonaws.com/public/assets/images/icons/addon/add-ons-domain-name.svg'"
193
+ title="Custom Domain"
194
+ description="Make it easy for customers to find you with a domain that matches your business"
195
+ :is-design-com="isDesignCom"
196
+ :has-search-button="true"
197
+ :show-label="true"
198
+ />
236
199
  </template>
237
200
  </PublishBrandPageModal>
238
201
  `,
package/src/experiences/components/PublishBrandPageModal/PublishBrandPageModal.vue CHANGED
@@ -24,7 +24,7 @@
24
24
  </div>
25
25
  </template>
26
26
  <template #default>
27
- <div v-if="isNotPublished || isSlugEditMode">
27
+ <div v-if="isNotPublished || isSlugEditMode" :class="{ 'tw-mb-8': !hasPurchasedDomains }">
28
28
  <div
29
29
  v-if="!isSlugEditMode"
30
30
  class="tw-flex tw-items-center tw-mr-2 tw-mb-1"
@@ -40,7 +40,7 @@
40
40
  :value="domainTypeValue === DOMAIN_TYPES.slug"
41
41
  />
42
42
  <label
43
- v-if="!isPublished"
43
+ v-if="!isPublished && hasPurchasedDomains"
44
44
  for="domain-type"
45
45
  class="tw-font-sans tw-w-full tw-text-grayscale-600 tw-text-sm tw-cursor-pointer tw-ml-2"
46
46
  >
@@ -48,19 +48,63 @@
48
48
  </label>
49
49
  </div>
50
50
  <div v-if="isNotPublished || isSlugEditMode" class="tw-mt-4">
51
- <TextInput
52
- v-model="internalSlug"
53
- element-classes="tw-mb-0 !tw-rounded-l-none tw-text-lg"
54
- :prefix-text="`${brandPageBaseUrl}/`"
55
- :error="!!slugValidationError"
56
- :disabled="isPublishing || domainTypeValue === DOMAIN_TYPES.purchased"
57
- :placeholder="your-brand-name"
58
- data-test-brand-page-slug-input
59
- :attrs="{ 'data-test-set-url-text-field': '' }"
60
- @input="onSlugChanged"
61
- />
62
- <div v-if="slugErrorMessage" class="tw-mt-2 tw-text-sm tw-text-left tw-text-error-500 tw-font-normal">
63
- {{ slugErrorMessage }}
51
+ <Card
52
+ v-if="!hasPurchasedDomains"
53
+ :imgUrl="iconUrl"
54
+ title="Free Address"
55
+ description="Choose a free address to publish now. You can always edit the URL later"
56
+ :is-design-com="isDesignCom"
57
+ :has-search-button="false"
58
+ >
59
+ <template #slug>
60
+ <div class="tw-flex tw-flex-row tw-justify-between">
61
+ <div>
62
+ <TextInput
63
+ v-model="internalSlug"
64
+ element-classes="tw-mb-0 !tw-rounded-l-none tw-text-md tw-w-1/3"
65
+ :prefix-text="`${brandPageBaseUrl}/`"
66
+ :error="!!slugValidationError"
67
+ :disabled="isPublishing || domainTypeValue === DOMAIN_TYPES.purchased"
68
+ :placeholder="isBrandContact ? 'your-name' : 'your-business-name'"
69
+ data-test-brand-page-slug-input
70
+ :attrs="{ 'data-test-set-url-text-field': '' }"
71
+ @input="onSlugChanged"
72
+ />
73
+ <div
74
+ v-if="slugErrorMessage"
75
+ class="tw-mt-2 tw-text-sm tw-text-left tw-text-error-500 tw-font-normal"
76
+ >
77
+ {{ slugErrorMessage }}
78
+ </div>
79
+ </div>
80
+ <button
81
+ 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"
82
+ @click="onPublish"
83
+ data-test-brand-page-publish-button
84
+ :class="{
85
+ 'tw-uppercase': !isDesignCom
86
+ }"
87
+ >
88
+ Publish
89
+ </button>
90
+ </div>
91
+ </template>
92
+ </Card>
93
+ <div v-else>
94
+ <TextInput
95
+ v-model="internalSlug"
96
+ element-classes="tw-mb-0 !tw-rounded-l-none tw-text-lg"
97
+ :prefix-text="`${brandPageBaseUrl}/`"
98
+ :error="!!slugValidationError"
99
+ :disabled="isPublishing || domainTypeValue === DOMAIN_TYPES.purchased"
100
+ :placeholder="your - brand - name"
101
+ data-test-brand-page-slug-input
102
+ :attrs="{ 'data-test-set-url-text-field': '' }"
103
+ @input="onSlugChanged"
104
+ />
105
+ <div v-if="slugErrorMessage" class="tw-mt-2 tw-text-sm tw-text-left tw-text-error-500 tw-font-normal">
106
+ {{ slugErrorMessage }}
107
+ </div>
64
108
  </div>
65
109
  </div>
66
110
  <div v-if="isNotPublished || !isSlugEditMode" class="tw-mt-4">
@@ -114,6 +158,7 @@
114
158
  <slot v-if="!hasPurchasedDomains" name="recommended" />
115
159
  </div>
116
160
  <div
161
+ v-if="hasPurchasedDomains"
117
162
  class="tw-font-sans tw-text-center"
118
163
  :style="isMobile ? 'padding-left: 1.5rem; padding-right: 1.5rem;' : ''"
119
164
  >
@@ -197,6 +242,7 @@
197
242
  </template>
198
243
  <script>
199
244
  import Modal from '../../../../src/atoms/components/Modal/Modal.vue';
245
+ import Card from '../../../../src/atoms/components/Card/Card.vue';
200
246
  import TextInput from '../../../../src/atoms/components/TextInput/TextInput.vue';
201
247
  import Dropdown from '../../../../src/atoms/components/Dropdown/Dropdown.vue';
202
248
  import DropdownItem from '../../../../src/atoms/components/Dropdown/DropdownItem.vue';
@@ -226,6 +272,7 @@ export default {
226
272
  TextCopyField,
227
273
  SellDomainNameSearchWithResults,
228
274
  SellDomainNameListModal,
275
+ Card,
229
276
  },
230
277
  mixins: [mediaQueryMixin],
231
278
  props: {
@@ -342,6 +389,11 @@ export default {
342
389
  required: false,
343
390
  default: undefined,
344
391
  },
392
+ isBrandContact: {
393
+ type: Boolean,
394
+ required: true,
395
+ default: false,
396
+ },
345
397
  },
346
398
  emits: [
347
399
  'close-modal',
@@ -388,6 +440,11 @@ export default {
388
440
  isSlugEditMode() {
389
441
  return this.isPublished && this.shouldPublish && this.isBrandPageSlugEditMode;
390
442
  },
443
+ iconUrl() {
444
+ return this.isDesignCom
445
+ ? 'https://brandcrowd-cdn.s3.amazonaws.com/public/assets/images/icons/publish/dcom-free-url.svg'
446
+ : 'https://brandcrowd-cdn.s3.amazonaws.com/public/assets/images/icons/publish/bc-free-url.svg';
447
+ },
391
448
  },
392
449
  watch: {
393
450
  brandPageSlug(slug) {