Merge pull request #895 from dpc-sdp/fix/r20-1571-contact-us-default

[R20-1571] Only render icon if item has text or url
dpc-sdp · Oct 17, 2023 · c31de49 · c31de49
2 parents 5b135dc + e2ad244
commit c31de49
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 30 deletions.
diff --git a/packages/ripple-ui-core/src/components/contact-us/RplContactUs.stories.mdx b/packages/ripple-ui-core/src/components/contact-us/RplContactUs.stories.mdx
@@ -71,6 +71,11 @@ export const SingleTemplate = (args) => ({
           text: '@instagramhandle',
           url: 'https://i',
           icon: 'icon-instagram'
+        },
+        {
+          text: '',
+          url: '',
+          icon: 'icon-browser'
         }
       ]
     }}

diff --git a/packages/ripple-ui-core/src/components/list/RplList.vue b/packages/ripple-ui-core/src/components/list/RplList.vue
@@ -62,44 +62,44 @@ const handleClick = (item: IRplListItemArray, index: number) => {
     :class="['rpl-list__items', containerClass ? containerClass : null]"
     :data-depth="depth"
   >
-    <li
-      v-for="(item, index) of items"
-      :key="index"
-      :class="['rpl-list__item', itemClass ? itemClass : null]"
-    >
-      <RplTextLink
-        v-if="item.url"
-        :id="withLinkIds ? item.id : undefined"
-        :url="item.url"
-        class="rpl-list__link"
-        @click="() => handleClick(item, index)"
+    <template v-for="(item, index) of items" :key="index">
+      <li
+        v-if="item.url || item.text"
+        :class="['rpl-list__item', itemClass ? itemClass : null]"
       >
+        <RplTextLink
+          v-if="item.url"
+          :id="withLinkIds ? item.id : undefined"
+          :url="item.url"
+          class="rpl-list__link"
+          @click="() => handleClick(item, index)"
+        >
+          <RplListContent
+            :icon-name="item?.icon"
+            :icon-colour="item?.iconColour"
+            :icon-placement="iconPlacement"
+            :depth="depth"
+          >
+            {{ item.text }}
+          </RplListContent>
+        </RplTextLink>
         <RplListContent
+          v-else
           :icon-name="item?.icon"
           :icon-colour="item?.iconColour"
           :icon-placement="iconPlacement"
           :depth="depth"
         >
           {{ item.text }}
         </RplListContent>
-      </RplTextLink>
-      <RplListContent
-        v-else
-        :icon-name="item?.icon"
-        :icon-colour="item?.iconColour"
-        :icon-placement="iconPlacement"
-        :depth="depth"
-      >
-        {{ item.text }}
-      </RplListContent>
-      <RplList
-        v-if="shouldRenderChildren && item.items"
-        :key="`${depth}-${index}`"
-        :items="item.items"
-        :item-class="itemClass"
-        container-class="rpl-list__items--sub"
-        :depth="depth + 1"
-      ></RplList>
-    </li>
+        <RplList
+          v-if="shouldRenderChildren && item.items"
+          :key="`${depth}-${index}`"
+          :items="item.items"
+          :item-class="itemClass"
+          container-class="rpl-list__items--sub"
+          :depth="depth + 1"
+        ></RplList></li
+    ></template>
   </component>
 </template>