@designcrowd/fe-shared-lib 1.2.0 → 1.2.1-ml-input-changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@designcrowd/fe-shared-lib",
-  "version": "1.2.0",
+  "version": "1.2.1-ml-input-changes",
   "scripts": {
     "start": "npm run storybook",
     "build": "npm run build:css --production",

package/public/css/tailwind-brandCrowd.css

@@ -827,6 +827,10 @@ video {
 .theme-brandCrowd .tw-h-auto {
   height: auto;
 }
+.theme-brandCrowd .tw-h-fit {
+  height: -moz-fit-content;
+  height: fit-content;
+}
 .theme-brandCrowd .tw-h-full {
   height: 100%;
 }

package/public/css/tailwind-brandPage.css

@@ -827,6 +827,10 @@ video {
 .theme-brandPage .tw-h-auto {
   height: auto;
 }
+.theme-brandPage .tw-h-fit {
+  height: -moz-fit-content;
+  height: fit-content;
+}
 .theme-brandPage .tw-h-full {
   height: 100%;
 }

package/public/css/tailwind-crazyDomains.css

@@ -827,6 +827,10 @@ video {
 .theme-crazyDomains .tw-h-auto {
   height: auto;
 }
+.theme-crazyDomains .tw-h-fit {
+  height: -moz-fit-content;
+  height: fit-content;
+}
 .theme-crazyDomains .tw-h-full {
   height: 100%;
 }

package/public/css/tailwind-designCom.css

@@ -827,6 +827,10 @@ video {
 .theme-designCom .tw-h-auto {
   height: auto;
 }
+.theme-designCom .tw-h-fit {
+  height: -moz-fit-content;
+  height: fit-content;
+}
 .theme-designCom .tw-h-full {
   height: 100%;
 }

package/public/css/tailwind-designCrowd.css

@@ -827,6 +827,10 @@ video {
 .theme-designCrowd .tw-h-auto {
   height: auto;
 }
+.theme-designCrowd .tw-h-fit {
+  height: -moz-fit-content;
+  height: fit-content;
+}
 .theme-designCrowd .tw-h-full {
   height: 100%;
 }

package/src/atoms/components/Button/Button.vue

@@ -84,6 +84,7 @@
 <script>
 import ButtonOutline from './variants/ButtonOutline.vue';
 import ButtonPrimary from './variants/ButtonPrimary.vue';
+import ButtonOutlinePrimary from './variants/ButtonOutlinePrimary.vue';
 import ButtonWarning from './variants/ButtonWarning.vue';
 import ButtonSecondary from './variants/ButtonSecondary.vue';
 import ButtonInfoFilled from './variants/ButtonInfoFilled.vue';
@@ -107,6 +108,7 @@ export default {
   name: 'Button',
   components: {
     'button-crazyDomains-primary': ButtonCrazyDomainsPrimary,
+    'button-crazyDomains-outline-primary': ButtonOutlinePrimary,
     'button-crazyDomains-outline': ButtonCrazyDomainsOutline,
     'button-crazyDomains-secondary': ButtonSecondary,
     'button-crazyDomains-primary-with-icon': ButtonPrimaryWithIcon,
@@ -118,6 +120,7 @@ export default {
     'button-crazyDomains-pill': ButtonPill,
 
     'button-brandCrowd-primary': ButtonPrimary,
+    'button-brandCrowd-outline-primary': ButtonOutlinePrimary,
     'button-brandCrowd-warning': ButtonWarning,
     'button-brandCrowd-info-filled': ButtonInfoFilled,
     'button-brandCrowd-outline': ButtonOutline,

package/src/atoms/components/Button/Buttons.stories.js

@@ -278,6 +278,30 @@ export const PrimarySamples = (args, { argTypes }) => {
 PrimarySamples.args = controlArgs;
 PrimarySamples.argTypes = controlArgTypes;
 
+export const OutlinePrimarySamples = (args, { argTypes }) => {
+  return {
+    components: {
+      StorybookButtonComponent,
+    },
+    props: Object.keys(argTypes),
+    data() {
+      return {
+        variants: generateSampleButtonVariants('outline-primary'),
+      };
+    },
+    template: `
+      <StorybookButtonComponent
+          :disabled="disabled"
+          :full-width="fullWidth"
+          :grey-out-left="greyOutLeft"
+          :justify="justify"
+          :variants="variants"/>
+    `,
+  };
+};
+OutlinePrimarySamples.args = controlArgs;
+OutlinePrimarySamples.argTypes = controlArgTypes;
+
 export const SecondarySamples = (args, { argTypes }) => {
   return {
     components: {

package/src/atoms/components/Button/variants/ButtonAi.vue

@@ -2,7 +2,7 @@
   <button
     v-if="!url"
     style="box-shadow: rgba(151, 65, 252, 0.2) 0 15px 30px -5px;"
-    class="tw-font-sans tw-bg-gradient-to-t tw-from-[#d946ef] tw-to-[#8b5cf6] tw-border-0 tw-font-bold tw-rounded-xl tw-p-1 tw-text-white tw-duration-300 hover:tw-brightness-[0.85]"
+    class="tw-font-sans tw-bg-gradient-to-t tw-from-[#d946ef] tw-to-[#8b5cf6] tw-border-0 tw-font-bold tw-p-1 tw-text-white tw-duration-300 hover:tw-brightness-[0.85]"
     :class="[
       classes,
       {
@@ -25,7 +25,7 @@
   <a
     v-else
     :href="computedUrl"
-    class="tw-font-sans tw-inline-flex tw-justify-center tw-rounded-xl tw-bg-gradient-to-t tw-from-[#d946ef] tw-to-[#8b5cf6] tw-border-0 tw-font-bold tw-text-white"
+    class="tw-font-sans tw-inline-flex tw-justify-center tw-bg-gradient-to-t tw-from-[#d946ef] tw-to-[#8b5cf6] tw-border-0 tw-font-bold tw-text-white"
     :class="[
       commonUrlButtonClasses,
       classes,

package/src/atoms/components/Button/variants/ButtonOutlinePrimary.vue

@@ -0,0 +1,53 @@
+<template>
+  <button
+    v-if="!url"
+    class="tw-font-sans tw-border-2 tw-border-solid tw-font-bold tw-text-primary-500 tw-uppercase tw-transition-colors tw-duration-300"
+    :class="[
+      classes,
+      computedClasses,
+      {
+        'tw-border-grayscale-500 tw-bg-grayscale-400 tw-text-grayscale-600 tw-cursor-not-allowed': disabled,
+        'tw-cursor-pointer': !disabled,
+        'tw-border-primary-500 tw-bg-white hover:tw-bg-primary-100 tw-text-primary-500': !isBusy && !disabled,
+        'tw-border-grayscale-500 tw-bg-grayscale-400 hover:tw-bg-grayscale-300 hover:tw-border-grayscale-400 tw-text-grayscale-600':
+          isBusy,
+      },
+    ]"
+    :disabled="disabled"
+    :type="type"
+    v-bind="attrs"
+    @click="onClick"
+  >
+    <slot />
+  </button>
+  <a
+    v-else
+    :href="computedUrl"
+    class="tw-justify-center tw-font-sans tw-inline-flex tw-border-2 tw-border-solid tw-font-bold tw-uppercase tw-transition-colors tw-duration-300"
+    :class="[
+      commonUrlButtonClasses,
+      classes,
+      computedClasses,
+      {
+        'tw-cursor-wait': disabled,
+        'tw-cursor-pointer': !disabled,
+        'tw-border-primary-500 tw-bg-white hover:tw-bg-primary-100 tw-text-primary-500': !isBusy,
+        'tw-border-grayscale-500 tw-bg-grayscale-400 hover:tw-bg-grayscale-300 hover:tw-border-grayscale-400 tw-text-grayscale-600':
+          isBusy,
+      },
+    ]"
+    :download="download"
+    v-bind="attrs"
+    :target="target"
+    @click="onClick"
+  >
+    <slot />
+  </a>
+</template>
+<script>
+import ButtonVariant from '../ButtonVariant.mixin.vue';
+
+export default {
+  mixins: [ButtonVariant],
+};
+</script>

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

@@ -18,11 +18,11 @@ export const Sample = () => {
     data() {
       return {
         show: true,
-      }
+      };
     },
     template: `
       <div class="tw-font-sans tw-w-1/4">
-        <Dropdown menu-align="right" v-model:show="show" @update:show="(visible) => show = visible">
+        <Dropdown menu-align="right" v-model:show="show" @update:show="(visible) => show = visible" menu-element-classes="tw-w-full">
           <DropdownItem @click="() => show = false">
             <span class="tw-grow">Menu item 1</span>
             <Pill class="tw-text-white" :style="{ background: 'blue' }">Blue</Pill>
@@ -45,7 +45,7 @@ export const Disabled = () => {
     },
     template: `
       <div class="tw-font-sans tw-w-1/4">
-        <Dropdown menu-align="right" disabled>
+        <Dropdown menu-align="right" disabled menu-element-classes="tw-w-full">
           <DropdownItem>
             <span>Menu item 1</span>
           </DropdownItem>
@@ -67,7 +67,7 @@ export const LongListFixedHeight = () => {
     },
     template: `
       <div class="tw-font-sans tw-w-1/4">
-        <Dropdown menu-align="right" menu-element-classes="tw-h-40 tw-overflow-y-auto">
+        <Dropdown menu-align="right" menu-element-classes="tw-h-40 tw-overflow-y-auto tw-w-full">
           <DropdownItem v-for="(item, i) in items" :key="i">
             <span class="tw-grow">{{ item.display }}</span>
           </DropdownItem>
@@ -123,7 +123,7 @@ export const SampleElementClasses = () => {
     },
     template: `
       <div class="tw-flex tw-gap-2 tw-m-4">
-        <Dropdown menu-align="right" element-classes="tw-h-12">
+        <Dropdown menu-align="right" element-classes="tw-h-12" menu-element-classes="tw-w-full">
           <DropdownItem>
             <span class="tw-grow">Menu item 1</span>
             <Pill class="tw-text-white" :style="{ background: 'blue' }">Blue</Pill>

package/src/atoms/components/FormControl/FormControl.mixin.js

@@ -97,11 +97,17 @@ export default {
       required: false,
       default: false,
     },
+    requiredMessage: {
+      type: String,
+      required: true,
+      default: 'Please fill in this field.',
+    },
   },
   methods: {
-    input(modelValue) {
+    input(modelValue, event) {
       this.$emit('update:modelValue', modelValue);
       this.$emit('input', modelValue);
+      event.target.setCustomValidity('');
     },
     keyup(modelValue) {
       this.$emit('keyup', modelValue);

package/src/atoms/components/TextInput/TextInput.vue

@@ -73,6 +73,8 @@
             },
           ]"
           class="tw-text-grayscale-600 tw-box-border tw-w-full tw-text-base tw-px-4 tw-border tw-border-solid focus:tw-outline-none tw-transition-colors tw-duration-300 tw-ease-out tw-shadow-inner"
+          @invalid="setValidationMessage"
+          @input="clearValidationMessage"
           @input.stop="input($event.target.value)"
           @keyup.stop="keyup($event.target.value)"
           @keydown.stop="keydown($event.target.value, $event)"
@@ -151,6 +153,9 @@ export default {
         this.$emit('on-clear-confirmation');
       }
     },
+    setValidationMessage(event) {
+      event.target.setCustomValidity(this.requiredMessage);
+    },
   },
 };
 </script>

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

@@ -138,6 +138,7 @@
                   :element-classes="{
                     'tw-h-12': true,
                   }"
+                  menu-element-classes="tw-w-full"
                   :disabled="domainTypeValue === DOMAIN_TYPES.slug"
                   :class="{
                     'tw-text-grayscale-600 tw-font-normal': !selectedCustomDomain,