refactor(sortable): updates sortable item handle prop name and tests

Kajabi · May 10, 2024 · 74e572f · 74e572f
1 parent 9b2d7c3
commit 74e572f
Show file tree

Hide file tree

Showing 8 changed files with 31 additions and 31 deletions.
diff --git a/libs/core/src/components.d.ts b/libs/core/src/components.d.ts
@@ -590,7 +590,7 @@ export namespace Components {
           * Determines whether `sortable-item` should have a handle.
           * @defaultValue false
          */
-        "handle": boolean;
+        "showHandle": boolean;
     }
     interface PdsSwitch {
         /**
@@ -1805,7 +1805,7 @@ declare namespace LocalJSX {
           * Determines whether `sortable-item` should have a handle.
           * @defaultValue false
          */
-        "handle"?: boolean;
+        "showHandle"?: boolean;
     }
     interface PdsSwitch {
         /**

diff --git a/libs/core/src/components/pds-sortable/docs/pds-sortable.mdx b/libs/core/src/components/pds-sortable/docs/pds-sortable.mdx
@@ -87,25 +87,25 @@ When `dividers` is set to `true`, a border will display between items.
 
 ### Handle
 
-When `handle` is set to `true` on a `pds-sortable-item` a handle icon will be displayed within an item.
+When `show-handle` is set to `true` on a `pds-sortable-item`, a handle icon will be displayed within an item.
 
 <DocCanvas client:only mdxSource={{
   react: `<PdsSortable componentId="handle" handleType="row">
-  <PdsSortableItem handle={true}>Item 1</PdsSortableItem>
-  <PdsSortableItem handle={true}>Item 2</PdsSortableItem>
-  <PdsSortableItem handle={true}>Item 3</PdsSortableItem>
+  <PdsSortableItem showHandle={true}>Item 1</PdsSortableItem>
+  <PdsSortableItem showHandle={true}>Item 2</PdsSortableItem>
+  <PdsSortableItem showHandle={true}>Item 3</PdsSortableItem>
 </PdsSortable>
   `,
   webComponent: `<pds-sortable component-id="handle" handle-type="row">
-  <pds-sortable-item handle="true">Item 1</pds-sortable-item>
-  <pds-sortable-item handle="true">Item 2</pds-sortable-item>
-  <pds-sortable-item handle="true">Item 3</pds-sortable-item>
+  <pds-sortable-item show-handle="true">Item 1</pds-sortable-item>
+  <pds-sortable-item show-handle="true">Item 2</pds-sortable-item>
+  <pds-sortable-item show-handle="true">Item 3</pds-sortable-item>
 </pds-sortable>
 `}}>
   <pds-sortable component-id="handle" handle-type="row">
-    <pds-sortable-item handle="true">Item 1</pds-sortable-item>
-    <pds-sortable-item handle="true">Item 2</pds-sortable-item>
-    <pds-sortable-item handle="true">Item 3</pds-sortable-item>
+    <pds-sortable-item show-handle="true">Item 1</pds-sortable-item>
+    <pds-sortable-item show-handle="true">Item 2</pds-sortable-item>
+    <pds-sortable-item show-handle="true">Item 3</pds-sortable-item>
   </pds-sortable>
 </DocCanvas>
 

diff --git a/libs/core/src/components/pds-sortable/pds-sortable-item/pds-sortable-item.tsx b/libs/core/src/components/pds-sortable/pds-sortable-item/pds-sortable-item.tsx
@@ -1,6 +1,6 @@
 import { Component, Element, Host, h, Prop } from '@stencil/core';
 
-import { handle } from '@pine-ds/icons/icons';
+import { handle as handleIcon } from '@pine-ds/icons/icons';
 /**
  * @slot sortable-item-actions - Content is placed within the `pds-sortable-item__actions` element as children. This slot is only rendered if `actions` is set to `true`.
  */
@@ -27,24 +27,24 @@ export class PdsSortableItem {
    * Determines whether `sortable-item` should have a handle.
    * @defaultValue false
    */
-  @Prop({ mutable: true }) handle = false;
+  @Prop({ mutable: true }) showHandle = false;
 
   componentWillRender() {
     // When the parent sortable has a type of 'handle', the sortable items
-    // will automatically set handle to 'true'.
+    // will automatically set showHandle to 'true'.
     this.sortableRef = this.el.closest('pds-sortable') as HTMLPdsSortableElement;
 
     if (this.sortableRef && this.sortableRef.handleType === 'handle') {
-      this.handle = true;
+      this.showHandle = true;
     }
   }
 
   render() {
     return (
       <Host class="pds-sortable-item" id={this.componentId}>
-        {this.handle && (
+        {this.showHandle && (
           <div class="pds-sortable-item__handle">
-            <pds-icon icon={handle}></pds-icon>
+            <pds-icon icon={handleIcon}></pds-icon>
           </div>
         )}
         <slot></slot>

diff --git a/libs/core/src/components/pds-sortable/pds-sortable-item/readme.md b/libs/core/src/components/pds-sortable/pds-sortable-item/readme.md
@@ -11,7 +11,7 @@
 | --------------- | ---------------- | ------------------------------------------------------------------ | --------- | ----------- |
 | `componentId`   | `component-id`   | A unique identifier used for the sortable item `id` attribute.     | `string`  | `undefined` |
 | `enableActions` | `enable-actions` | Determines whether `sortable-item-actions` slot should be enabled. | `boolean` | `false`     |
-| `handle`        | `handle`         | Determines whether `sortable-item` should have a handle.           | `boolean` | `false`     |
+| `showHandle`    | `show-handle`    | Determines whether `sortable-item` should have a handle.           | `boolean` | `false`     |
 
 
 ## Slots

diff --git a/libs/core/src/components/pds-sortable/pds-sortable-item/stories/pds-sortable-item.stories.js b/libs/core/src/components/pds-sortable/pds-sortable-item/stories/pds-sortable-item.stories.js
@@ -11,7 +11,7 @@ const BaseTemplate = (args) => html`
 <pds-sortable-item
   action="${args.enableActions}"
   component-id="${args.componentId}"
-  handle="${args.handle}"
+  show-handle="${args.showHandle}"
 >
   Item
 </pds-sortable-item>`;
@@ -20,5 +20,5 @@ export const Default = BaseTemplate.bind();
 Default.args = {
   componentId: 'default',
   enableActions: false,
-  handle: false,
+  showHandle: false,
 };
diff --git a/libs/core/src/components/pds-sortable/pds-sortable-item/test/pds-sortable-item.spec.tsx b/libs/core/src/components/pds-sortable/pds-sortable-item/test/pds-sortable-item.spec.tsx
@@ -1,7 +1,7 @@
 import { newSpecPage } from '@stencil/core/testing';
 import { PdsSortableItem } from '../pds-sortable-item';
 
-import { handle } from '@pine-ds/icons/icons';
+import { handle as handleIcon } from '@pine-ds/icons/icons';
 
 describe('pds-sortable-item', () => {
   it('renders', async () => {
@@ -27,19 +27,19 @@ describe('pds-sortable-item', () => {
     `);
   });
 
-  it('renders with handle when prop is set', async () => {
+  it('renders with handle icon when prop is set', async () => {
     const page = await newSpecPage({
       components: [PdsSortableItem],
       html: `
-        <pds-sortable-item handle="true">
+        <pds-sortable-item show-handle="true">
         </pds-sortable-item>
       `,
     });
 
     expect(page.root).toEqualHtml(`
-      <pds-sortable-item class="pds-sortable-item" handle="true">
+      <pds-sortable-item class="pds-sortable-item" show-handle="true">
         <div class="pds-sortable-item__handle">
-          <pds-icon icon="${handle}"></pds-icon>
+          <pds-icon icon="${handleIcon}"></pds-icon>
         </div>
       </pds-sortable-item>
     `);

diff --git a/libs/core/src/components/pds-sortable/stories/pds-sortable.stories.js b/libs/core/src/components/pds-sortable/stories/pds-sortable.stories.js
@@ -52,7 +52,7 @@ const ActionsTemplate = (args) => html`
 
 const FullDemoTemplate = (args) => html`
 <pds-sortable border="${args.border}" component-id="${args.componentId}" dividers="${args.dividers}" handle-type="${args.handleType}">
-  <pds-sortable-item enable-actions handle>
+  <pds-sortable-item enable-actions>
     <div>
       <div><strong>Item 1</strong></div>
       <div>Item 1 description copy text</div>
@@ -61,7 +61,7 @@ const FullDemoTemplate = (args) => html`
       <pds-link href="#" variant="plain">action</pds-link>
     </div>
   </pds-sortable-item>
-  <pds-sortable-item enable-actions handle>
+  <pds-sortable-item enable-actions>
     <div>
       <div><strong>Item 2</strong></div>
       <div>Item 2 description copy text</div>
@@ -70,7 +70,7 @@ const FullDemoTemplate = (args) => html`
       <pds-link href="#" variant="plain">action</pds-link>
     </div>
   </pds-sortable-item>
-  <pds-sortable-item enable-actions handle>
+  <pds-sortable-item enable-actions>
     <div>
       <div><strong>Item 3</strong></div>
       <div>Item 3 description copy text</div>

diff --git a/libs/core/src/components/pds-sortable/test/pds-sortable.e2e.ts b/libs/core/src/components/pds-sortable/test/pds-sortable.e2e.ts
@@ -9,7 +9,7 @@ describe('pds-sortable', () => {
     expect(element).toHaveClass('hydrated');
   });
 
-  it('sets sortable item handle prop to true when handleType is set to "handle"', async () => {
+  it('sets sortable item show-handle prop to true when handleType is set to "handle"', async () => {
     const page = await newE2EPage();
 
     await page.setContent(`
@@ -20,7 +20,7 @@ describe('pds-sortable', () => {
       </pds-sortable>`);
 
     const item = await page.find('.pds-sortable-item');
-    expect(await item.getProperty('handle')).toBe(true);
+    expect(await item.getProperty('showHandle')).toBe(true);
   })
 
   it('reorders items when an item is dragged and dropped', async () => {