Merge pull request #108 from cloudblue/feat/LITE-31805

LITE-31805: Fix important QoL issues in Card and inputs

Author: arnaugiralt

components/src/stories/Card.stories.js

@@ -22,12 +22,9 @@ export const Component = {
     },
     template: `
     <ui-card v-bind="args" style="width: 400px">
-      <div slot="default">
+      <div>
         {{ args.content }}
       </div>
-      <div slot="actions">
-        <button>Action!</button>
-      </div>
     </ui-card>`,
   }),
 
@@ -37,3 +34,27 @@ export const Component = {
     content: 'Card Content',
   },
 };
+
+export const ComponentWithAllSlots = {
+  render: (args) => ({
+    setup() {
+      return { args };
+    },
+    template: `
+      <ui-card v-bind="args" style="width: 400px">
+        <div>
+          {{ args.content }}
+        </div>
+        <a slot="title" style="" href="#">Custom title, link</a>
+        <p slot="subtitle">My <span style="font-weight:bold">custom</span> subtitle :)</p>
+        <div slot="actions">
+          <button>Action!</button>
+        </div>
+      </ui-card>`,
+  }),
+
+  args: {
+    title: 'Card title',
+    content: 'Card Content',
+  },
+};

components/src/widgets/card/widget.vue

@@ -2,18 +2,16 @@
   <div class="c-card">
     <div class="c-card__header">
       <div class="c-card__title-container">
-        <p
-          v-if="title"
-          class="c-card__title"
-        >
-          {{ title }}
-        </p>
-        <p
-          v-if="subtitle"
-          class="c-card__subtitle"
-        >
-          {{ subtitle }}
-        </p>
+        <div class="c-card__title">
+          <slot name="title">
+            <p v-if="title">{{ title }}</p>
+          </slot>
+        </div>
+        <div class="c-card__subtitle">
+          <slot name="subtitle">
+            <p v-if="subtitle">{{ subtitle }}</p>
+          </slot>
+        </div>
       </div>
       <div class="c-card__actions">
         <slot name="actions" />
@@ -53,26 +51,38 @@ export default {
   text-decoration: inherit;
   color: inherit;
 
-  &__header{
+  &__header {
     display: flex;
-    margin-bottom: 26px;
+    margin-bottom: 24px;
     align-items: start;
     flex-grow: 1;
     justify-content: space-between;
   }
 
   &__title {
-    line-height: 25px;
-    font-size: 20px;
+    line-height: 24px;
+    font-size: 18px;
+    font-weight: 500;
     margin: 0;
+
+    p,
+    & ::slotted(p) {
+      margin: 0;
+    }
   }
 
   &__subtitle {
+    margin-top: 8px;
     font-size: 14px;
+    font-weight: 400;
     line-height: 20px;
     color: #707070;
-    margin: 0;
     white-space: pre-wrap;
+
+    p,
+    & ::slotted(p) {
+      margin: 0;
+    }
   }
 
   &__title-container {

components/src/widgets/menu/widget.spec.js

@@ -19,6 +19,15 @@ describe('Menu component', () => {
 
         expect(wrapper.vm.showMenu).toBe(false);
       });
+
+      it('does not toggle menu if disabled is true', async () => {
+        const wrapper = mount(Menu);
+        wrapper.vm.showMenu = true;
+        await wrapper.setProps({ disabled: true });
+        wrapper.vm.toggle(wrapper.vm.showMenu);
+
+        expect(wrapper.vm.showMenu).toBe(true);
+      });
     });
 
     describe('#handleClickOutside', () => {

components/src/widgets/menu/widget.vue

@@ -42,6 +42,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const emit = defineEmits(['opened', 'closed']);
@@ -56,6 +60,8 @@ const alignmentClass = computed(() =>
 const fullWidthClass = computed(() => (props.fullWidth ? 'menu-content_full-width' : ''));
 
 const toggle = () => {
+  if (props.disabled) return;
+
   showMenu.value = !showMenu.value;
   emit(showMenu.value ? 'opened' : 'closed');
 };

components/src/widgets/select/widget.spec.js

@@ -40,6 +40,16 @@ describe('Select', () => {
       expect(wrapper.get('.select-input__label').text()).toEqual('My select');
     });
 
+    it('adds the disabled class if disabled is true', async () => {
+      await wrapper.setProps({
+        disabled: true,
+      });
+
+      expect(wrapper.get('.select-input__selected').classes()).toContain(
+        'select-input__selected_disabled',
+      );
+    });
+
     it('renders a complex array of objects', async () => {
       await wrapper.setProps({
         options: [

components/src/widgets/select/widget.vue

@@ -14,12 +14,14 @@
     </div>
     <ui-menu
       v-bind="menuProps"
+      :disabled="disabled"
       @opened="isFocused = true"
       @closed="isFocused = false"
     >
       <div
         slot="trigger"
         class="select-input__selected"
+        :class="{ 'select-input__selected_disabled': disabled }"
       >
         <slot name="selected">
           <span v-if="model">{{ getDisplayText(selectedOption) }}</span>
@@ -134,6 +136,10 @@ const props = defineProps({
     type: String,
     default: 'Nothing was found',
   },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const emit = defineEmits(['valueChange']);
@@ -206,6 +212,12 @@ watch(
       border-color: #FF6A6A;
       outline: 1px solid #FF6A6A;
     }
+
+    &_disabled {
+      border-style: dashed;
+      cursor: default;
+      color: #BDBDBD;
+    }
   }
 
   &__menu {

components/src/widgets/textarea/widget.vue

@@ -19,13 +19,14 @@
       v-model="localValue"
       class="textarea-field__input"
       :class="inputClasses"
+      :disabled="disabled"
       :placeholder="placeholder"
       :readonly="props.readonly"
       :rows="rows"
       name="textarea"
       @focus="setFocus"
       @input.stop
-    ></textarea>
+    />
     <div
       v-if="hint || !isValid"
       class="textarea-field__hint"
@@ -92,6 +93,10 @@ const props = defineProps({
     type: Array,
     default: () => [],
   },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const localValue = ref('');
@@ -117,6 +122,8 @@ const removeFocus = () => {
 };
 
 const setFocus = () => {
+  if (props.disabled) return;
+
   txtarea.value.focus();
   isFocused.value = true;
 };
@@ -125,12 +132,14 @@ const computedClasses = computed(() => ({
   'textarea-field_focused': isFocused.value,
   'textarea-field_invalid': !isValid.value,
   'textarea-field_optional': !props.required,
+  'textarea-field_disabled': props.disabled,
 }));
 
 const inputClasses = computed(() => ({
   'textarea-field__input_no-resize': props.autoGrow,
   'textarea-field__input_no-border': props.noBorder,
   'textarea-field__input_monospace': props.monospace,
+  'textarea-field__input_disabled': props.disabled,
 }));
 
 onMounted(() => {
@@ -188,6 +197,13 @@ watch(localValue, async (newValue) => {
     &_monospace {
       font-family: monospace;
     }
+
+    &[disabled],
+    :disabled,
+    &_disabled {
+      border-style: dashed;
+      cursor: default;
+    }
   }
 
   &__label {

components/src/widgets/textfield/widget.spec.js

@@ -60,6 +60,14 @@ describe('Textfield widget', () => {
 
       expect(wrapper.get('.text-field label').text()).toEqual('My input');
     });
+
+    it('adds the disabled class if disabled is true', () => {
+      wrapper = mount(Textfield, {
+        props: { disabled: true },
+      });
+
+      expect(wrapper.get('.text-field').classes()).toContain('text-field_disabled');
+    });
   });
 
   describe('validation', () => {

components/src/widgets/textfield/widget.vue

@@ -21,10 +21,11 @@
           v-model="localValue"
           class="text-field__input"
           :class="{ 'text-field__input_right': suffix }"
+          :autocomplete="browserAutocomplete ? 'on' : 'off'"
+          :disabled="disabled"
           :placeholder="placeholder"
           name="textfield"
           type="text"
-          :autocomplete="browserAutocomplete ? 'on' : 'off'"
           @focus="setFocus"
           @input.stop
         />
@@ -92,6 +93,10 @@ const props = defineProps({
     type: Boolean,
     default: true,
   },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const emit = defineEmits(['input']);
@@ -107,10 +112,13 @@ const computedClasses = computed(() => ({
   'text-field_focused': isFocused.value,
   'text-field_invalid': !isValid.value,
   'text-field_no-borders': props.noBorders,
+  'text-field_disabled': props.disabled,
 }));
 
 const removeFocus = () => (isFocused.value = false);
 const setFocus = () => {
+  if (props.disabled) return;
+
   isFocused.value = true;
   inputEl.value.focus();
 };

package.json

@@ -19,7 +19,8 @@
     "test:coverage": "vitest run --coverage.enabled",
     "test:watch": "vitest watch",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
+    "build-storybook": "storybook build",
+    "precommit": "npm run test && npm run lint:fix && npm run format && npm run build"
   },
   "dependencies": {
     "@cloudblueconnect/material-svg": "^1.0.43",