Merge pull request #692 from rtamarasinghe/table-cell-with-pill

Support for inline pill in the oxd-link-with-pill cell type
orangehrm · Apr 21, 2023 · a90d4a5 · a90d4a5
2 parents 77b612f + 42e1f17
commit a90d4a5
Show file tree

Hide file tree

Showing 6 changed files with 73 additions and 6 deletions.
diff --git a/components/src/core/components/CardTable/Cell/LinkWithPill.vue b/components/src/core/components/CardTable/Cell/LinkWithPill.vue
@@ -1,14 +1,10 @@
 <template>
   <oxd-table-cell-default>
     <template #body="{cell, row}">
-      <a
-        :href="link ? row[link] : '#'"
-        :target="target"
-        class="oxd-table-cell-link "
-      >
+      <a :href="link ? row[link] : '#'" :target="target" :class="linkClasses">
         {{ cell }}
       </a>
-      <div v-if="pillProperty" class="oxd-table-cell-pill">
+      <div v-if="pillProperty" :class="pillClasses">
         {{ getPillValue(row) }}
       </div>
     </template>
@@ -58,6 +54,24 @@ export default defineComponent({
       type: [String, Array],
       default: null,
     },
+    pillInline: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  computed: {
+    linkClasses(): object {
+      return {
+        'oxd-table-cell-link': true,
+        ['oxd-table-cell-link--inline-pill']: this.pillInline,
+      };
+    },
+    pillClasses(): object {
+      return {
+        'oxd-table-cell-pill': true,
+        ['oxd-table-cell-pill--inline']: this.pillInline,
+      };
+    },
   },
 });
 </script>

diff --git a/components/src/core/components/CardTable/Cell/__tests__/link-with-pill.spec.ts b/components/src/core/components/CardTable/Cell/__tests__/link-with-pill.spec.ts
@@ -49,6 +49,12 @@ describe('CardTable > Cell > LinkWithPill.vue', () => {
         },
       },
     });
+    expect(wrapper.find('a.oxd-table-cell-link--inline').exists()).toEqual(
+      false,
+    );
+    expect(wrapper.find('div.oxd-table-cell-pill--inline').exists()).toEqual(
+      false,
+    );
 
     expect(wrapper.html()).toMatchSnapshot();
   });
@@ -73,4 +79,34 @@ describe('CardTable > Cell > LinkWithPill.vue', () => {
 
     expect(wrapper.html()).toMatchSnapshot();
   });
+
+  it('should render OXD CardTable > Cell > LinkWithPill Cell - with inline pill', async () => {
+    const wrapper = mount(LinkWithPill, {
+      global: GLOBAL,
+      props: {
+        item: 'This is a link',
+        target: '_parent',
+        link: 'url1',
+        pillProperty: 'tag',
+        pillInline: true,
+        rowItem: {
+          url1: 'https://orangehrm.com',
+          tag: 'external',
+        },
+      },
+    });
+
+    expect(
+      wrapper
+        .find('a.oxd-table-cell-link--inline-pill')
+        .text()
+        .trim(),
+    ).toEqual('This is a link');
+    expect(
+      wrapper
+        .find('div.oxd-table-cell-pill--inline')
+        .text()
+        .trim(),
+    ).toEqual('external');
+  });
 });
diff --git a/components/src/core/components/CardTable/Cell/_variables.scss b/components/src/core/components/CardTable/Cell/_variables.scss
@@ -1,6 +1,7 @@
 $oxd-table-cell-action-gap: 8px !default;
 $oxd-table-header-font-weight: 700 !default;
 
+$oxd-table-cell-link-margin-right-with-inline-pill: 0.5rem !default;
 $oxd-table-cell-pill-padding-left: 0.3125rem !default;
 $oxd-table-cell-pill-padding-right: 0.3125rem !default;
 $oxd-table-cell-pill-margin-right: 0.3125rem !default;

diff --git a/components/src/core/components/CardTable/Cell/link-with-pill.scss b/components/src/core/components/CardTable/Cell/link-with-pill.scss
@@ -8,6 +8,10 @@
     color: $oxd-interface-gray-darken-2-color;
     text-decoration: none;
   }
+
+  &--inline-pill {
+    margin-right: $oxd-table-cell-link-margin-right-with-inline-pill;
+  }
 }
 
 .oxd-table-cell-pill {
@@ -20,4 +24,8 @@
   padding-left: $oxd-table-cell-pill-padding-left;
   padding-right: $oxd-table-cell-pill-padding-right;
   border-radius: $oxd-table-cell-pill-border-radius;
+
+  &--inline {
+    display: inline-block;
+  }
 }
diff --git a/storybook/stories/core/components/List/list-data.json b/storybook/stories/core/components/List/list-data.json
@@ -6,6 +6,7 @@
       "url2": "yahoo.com",
       "candidate": "Venkatanarasimharajuvar Narasimha Rajuvaripet",
       "email": "trevor@o.com",
+      "emailType": "work",
       "contactNumber": "+8552616462",
       "dateOfApplication": "2021-03-11",
       "selectedStage": {
@@ -65,6 +66,7 @@
       "url2": "yahoo.com",
       "candidate": "Lucy Valdez",
       "email": "lucy@o.com",
+      "emailType": "personal",
       "contactNumber": "+8523616462",
       "dateOfApplication": "2021-03-10",
       "selectedStage": {
@@ -277,6 +279,7 @@
       "profilePic": "data:image/jpeg;base64,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",
       "candidate": "Garry White",
       "email": "garrywhite@gmail.com",
+      "emailType": "company",
       "contactNumber": "+1 788-482-1505",
       "dateOfApplication": "2019-04-26",
       "selectedStage": {

diff --git a/storybook/stories/core/components/List/list-with-sidebar/headers.table.list.ts b/storybook/stories/core/components/List/list-with-sidebar/headers.table.list.ts
@@ -37,6 +37,11 @@ const headers = [
     sortField: "email",
     initialSortOrder: "DEFAULT",
     title: "Email",
+    cellType: "oxd-table-cell-link-with-pill",
+    cellProps: {
+      pillProperty: ["emailType"],
+      pillInline: true,
+    },
     style: {
       flex: "5%",
       "min-width": "90px",