DANG-1754/update input Label (#369)

* update input label

* rename Label files for consistency

* remove withNestedInput story, unused functionality

* improve LobLabel stories

* change font type to small-700 per design

* add tooltipPosition leading/trailing option

* fix Label relative paths after renaming the file

* update tests

* add tooltip info to mdx doc

* add trailing position w flex reverse that came to me in my sleep

* adjust tooltip content width with w-max and max-w

* classes lint

* package version & changelog

Co-authored-by: Myrtle <[email protected]>

CHANGELOG.md

@@ -1,5 +1,11 @@
 # CHANGELOG
 
+## v2.0.0-beta.10
+
+### Features
+
+Updates the styles of the `Label` component
+
 ## v2.0.0-beta.9
 
 No changes

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lob/ui-components",
-  "version": "2.0.0-beta.9",
+  "version": "2.0.0-beta.10",
   "engines": {
     "node": ">=14.18.2",
     "npm": ">=8.3.0"

src/components/Dropdown/Dropdown.stories.js

@@ -1,7 +1,7 @@
 import Dropdown from './Dropdown.vue';
 import mdx from './Dropdown.mdx';
 
-import LobLabel from '@/components/LobLabel/LobLabel.vue';
+import LobLabel from '@/components/Label/Label.vue';
 import Tooltip from '@/components/Tooltip/Tooltip.vue';
 import { Eye } from '@/components/Icons';
 

src/components/Dropdown/Dropdown.vue

@@ -129,7 +129,7 @@ import { ChevronDown, ChevronUp } from '@/components/Icons';
 import DropdownItemGroup from './DropdownItemGroup';
 import DropdownItem from './DropdownItem';
 import { findLastIndex, shallowEquals } from '@/utils';
-import LobLabel from '../LobLabel/LobLabel.vue';
+import LobLabel from '../Label/Label.vue';
 
 if (!Array.prototype.findLastIndex) {
   Array.prototype.findLastIndex = findLastIndex; //eslint-disable-line

src/components/LobLabel/LobLabel.mdx → src/components/Label/Label.mdx

@@ -1,5 +1,10 @@
-import { Preview, Story, ArgsTable, PRIMARY_STORY } from '@storybook/addon-docs';
-import LobLabel from './LobLabel.vue';
+import {
+  Preview,
+  Story,
+  ArgsTable,
+  PRIMARY_STORY,
+} from "@storybook/addon-docs";
+import LobLabel from "./Label.vue";
 
 # Lob Label
 
@@ -17,13 +22,16 @@ If the field is required, you can pass in the `required` prop to show the asteri
 
 You can hide the label by setting the `srOnlyLabel` to true (it will still be read by a screen reader).
 
+A tooltip can be added with the `tooltipContent` prop (String).
+By default it will show on the left of the label ('leading'). If `tooltipPosition="trailing"` is passed, the tooltip will render on the right end of the label.
+
 ```html
-  <lob-label  
-    :label="label"
-    :labelFor="labelFor"
-    :required="required"
-    :srOnlyLabel="srOnlyLabel"
-  />
+<lob-label
+  :label="label"
+  :labelFor="labelFor"
+  :required="required"
+  :srOnlyLabel="srOnlyLabel"
+/>
 ```
 
 ## Props

src/components/LobLabel/LobLabel.stories.js → src/components/Label/Label.stories.js

@@ -1,5 +1,5 @@
-import LobLabel from './LobLabel.vue';
-import mdx from './LobLabel.mdx';
+import LobLabel from './Label.vue';
+import mdx from './Label.mdx';
 
 import { Info } from '@/components/Icons';
 import Tooltip from '@/components/Tooltip/Tooltip.vue';
@@ -17,37 +17,32 @@ export default {
       control: {
         type: 'text'
       }
+    },
+    tooltipContent: {
+      control: {
+        type: 'text'
+      }
+    },
+    tooltipPosition: {
+      control: {
+        options: ['leading', 'trailing'],
+        type: 'select'
+      }
     }
   }
 };
 
-const WithTooltipTemplate = (args, { argTypes }) => ({
+const PrimaryTemplate = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
-  components: { LobLabel, Info, Tooltip },
+  components: { LobLabel },
   setup: () => ({ args }),
-  template: `
-    <lob-label v-bind="args">
-      <template v-slot:tooltip>
-        <Tooltip position="left">
-          <template #trigger>
-            <Info class="w-5 h-5" />
-          </template>
-          <template #content>
-            Cat
-          </template>
-        </Tooltip>
-      </template>
-    </lob-label>
-    <input class="border rounded p-2 text-gray-500" />
-  `
+  template: '<lob-label v-bind="args"/>'
 });
 
-export const WithTooltip = WithTooltipTemplate.bind({});
-WithTooltip.args = {
+export const Primary = PrimaryTemplate.bind({});
+Primary.args = {
   label: 'Name',
-  labelFor: 'Name',
-  required: true,
-  tooltipContent: 'Tooltip Content'
+  labelFor: 'Name'
 };
 
 const WithInputTemplate = (args, { argTypes }) => ({
@@ -62,25 +57,60 @@ const WithInputTemplate = (args, { argTypes }) => ({
 
 export const WithInput = WithInputTemplate.bind({});
 WithInput.args = {
+  label: 'Name',
+  labelFor: 'Name'
+};
+
+const RequiredFieldTemplate = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { LobLabel },
+  setup: () => ({ args }),
+  template: `
+    <lob-label v-bind="args"/>
+    <input class="border rounded p-2 text-gray-500" />
+  `
+});
+
+export const RequiredField = RequiredFieldTemplate.bind({});
+RequiredField.args = {
   label: 'Name',
   labelFor: 'Name',
   required: true
 };
 
-const WithNestedInputTemplate = (args, { argTypes }) => ({
+const WithTooltipTemplate = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
-  components: { LobLabel },
+  components: { LobLabel, Info, Tooltip },
   setup: () => ({ args }),
   template: `
     <lob-label v-bind="args">
-    <input class="border rounded p-2 text-gray-500" />
+      <template v-slot:tooltip>
+        <Tooltip position="bottom">
+          <template #trigger>
+            <Info class="w-5 h-5" />
+          </template>
+          <template #content>
+            {{ args.tooltipContent }}
+          </template>
+        </Tooltip>
+      </template>
     </lob-label>
+    <input class="border rounded p-2 text-gray-500" />
   `
 });
 
-export const WithNestedInput = WithNestedInputTemplate.bind({});
-WithNestedInput.args = {
+export const WithTooltipLeading = WithTooltipTemplate.bind({});
+WithTooltipLeading.args = {
   label: 'Name',
   labelFor: 'Name',
-  required: true
+  tooltipContent: 'Tooltip Content'
+};
+
+export const WithTooltipTrailing = WithTooltipTemplate.bind({});
+WithTooltipTrailing.args = {
+  label: 'Name',
+  labelFor: 'Name',
+  tooltipContent: 'Tooltip Content to include some more information about this input field',
+  tooltipPosition: 'trailing'
 };
+

src/components/LobLabel/LobLabel.vue → src/components/Label/Label.vue

@@ -3,32 +3,35 @@
     <label
       :for="labelFor"
       :class="[
-        {'flex items-center justify-between mb-2 text-sm text-gray-500': !srOnlyLabel},
-        { 'sr-only': srOnlyLabel }
+        readOnly ? 'text-gray-300' : 'text-gray-800',
+        srOnlyLabel ? 'sr-only' : 'flex items-center mb-1 type-small-700',
+        { 'justify-between flex-row-reverse': tooltipPosition === 'trailing' }
       ]"
     >
-      <span>
-        {{ label }}
-        <span
-          v-if="required"
-          class="text-sm text-error"
-        >
-          *
-        </span>
-      </span>
       <Tooltip
         v-if="tooltipContent"
-        position="left"
+        position="bottom"
+        :class="{ 'mr-1': tooltipPosition === 'leading' }"
+        :data-testid="tooltipPosition === 'trailing' ? 'tooltip-trailing' : 'tooltip-leading'"
       >
         <template #trigger>
-          <Info class="w-5 h-5" />
+          <Info class="w-4 h-4 text-gray-500" />
         </template>
         <template #content>
-          <p class="w-48">
+          <p class="w-max max-w-[200px]">
             {{ tooltipContent }}
           </p>
         </template>
       </Tooltip>
+      <span>
+        {{ label }}
+        <span
+          v-if="required"
+          class="ml-1 text-small-700 text-red-500"
+        >
+          *
+        </span>
+      </span>
     </label>
     <slot />
   </span>
@@ -50,7 +53,12 @@ export default defineComponent({
     labelFor: { type: String, required: true },
     required: { type: Boolean, default: false },
     srOnlyLabel: { type: Boolean, default: false },
-    tooltipContent: { type: String, default: null }
+    tooltipContent: { type: String, default: null },
+    tooltipPosition: { type: String, default: 'leading',
+      validator: function (value) {
+        return ['leading', 'trailing'].includes(value);
+      } },
+    readOnly: { type: Boolean, default: false }
   },
   computed: {
     tooltip () {

src/components/Label/__tests__/LobLabel.spec.js

@@ -0,0 +1,58 @@
+import '@testing-library/jest-dom';
+import { render } from '@testing-library/vue';
+import LobLabel from '../Label.vue';
+
+const initialProps = {
+  id: 'test',
+  label: 'test',
+  labelFor: 'test'
+};
+
+describe('LobLabel', () => {
+
+  it('renders correctly', () => {
+    const props = initialProps;
+    const { getByText } = render(LobLabel, { props });
+
+    const label = getByText(props.label);
+    expect(label).toBeInTheDocument();
+  });
+
+  it('shows the asterisk when the required prop is true', () => {
+    const props = {
+      ...initialProps,
+      required: true
+    };
+
+    const { getByText } = render(LobLabel, { props  });
+    const label = getByText(props.label);
+    const asterisk = getByText('*');
+    expect(label).toContainElement(asterisk);
+  });
+
+  describe('if a tooltip is added', () => {
+
+    it('the tooltip shows on the left by default', () => {
+      const props = { ...initialProps, tooltipContent: 'magic tooltip' };
+      const { getByText, getByTestId } = render(LobLabel, { props });
+
+      const tooltip = getByTestId('tooltip-leading');
+      expect(tooltip).toBeInTheDocument();
+      const label = getByText(props.label);
+      expect(label.parentElement).not.toHaveClass('justify-between');
+    });
+
+    it('the tooltip shows on the right if tooltipPosition:trailing is added', () => {
+      const props = { ...initialProps, tooltipContent: 'magic tooltip', tooltipPosition: 'trailing' };
+      const { getByText, getByTestId } = render(LobLabel, { props });
+
+      const tooltip = getByTestId('tooltip-trailing');
+      expect(tooltip).toBeInTheDocument();
+      const label = getByText(props.label);
+      expect(label.parentElement).toHaveClass('justify-between flex-row-reverse');
+    });
+
+  });
+
+});
+

src/components/TextInput/TextInput.stories.js

@@ -1,7 +1,7 @@
 import TextInput from './TextInput.vue';
 import mdx from './TextInput.mdx';
 
-import LobLabel from '@/components/LobLabel/LobLabel.vue';
+import LobLabel from '@/components/Label/Label.vue';
 import Tooltip from '@/components/Tooltip/Tooltip.vue';
 import { Search, Info, Upload } from '@/components/Icons';
 

src/components/TextInput/TextInput.vue

@@ -131,7 +131,7 @@
 </template>
 
 <script>
-import LobLabel from '../LobLabel/LobLabel.vue';
+import LobLabel from '../Label/Label.vue';
 import Check  from '../Icons/Check.vue';
 import Close  from '../Icons/Close.vue';