Merge pull request #1366 from dpc-sdp/feat/sd-384-core-secure-icon

[SD-443] Add `icon-file-secure`
dpc-sdp · Nov 6, 2024 · 6b010d0 · 6b010d0
2 parents 5dd3625 + 5001020
commit 6b010d0
Show file tree

Hide file tree

Showing 6 changed files with 15 additions and 6 deletions.
diff --git a/packages/ripple-tide-api/src/utils/markup-transpiler/cheerio.test.ts b/packages/ripple-tide-api/src/utils/markup-transpiler/cheerio.test.ts
@@ -60,8 +60,8 @@ const fixed = {
     `
 <figure class="rpl-document">
   <a class="rpl-document__link rpl-u-focusable-within" aria-label="Secure document File type: PDF. Size: 139.44 KB." href="https://content.vic.gov.au/system/files/secure/2024-09/file-sample_150kB.pdf" target="_blank">
-    <span class="rpl-document__icon rpl-icon rpl-icon--size-l rpl-icon--colour-default rpl-icon--icon-document-lined">
-      <svg role="presentation"><use xlink:href="#icon-document-lined"></use></svg>
+    <span class="rpl-document__icon rpl-icon rpl-icon--size-l rpl-icon--colour-default rpl-icon--icon-file-secure">
+      <svg role="presentation"><use xlink:href="#icon-file-secure"></use></svg>
     </span>
     <div class="rpl-document__content">
       <span class="rpl-document__name rpl-type-p rpl-type-weight-bold rpl-u-focusable-inline">Secure document</span>

diff --git a/packages/ripple-tide-api/src/utils/markup-transpiler/default-plugins.ts b/packages/ripple-tide-api/src/utils/markup-transpiler/default-plugins.ts
@@ -124,11 +124,15 @@ const pluginDocuments = function (this: any) {
         })
     }
 
+    const mediaIcon = $element.hasClass('embedded-entity--media--secure-file')
+      ? 'file-secure'
+      : 'document-lined'
+
     return $element.replaceWith(`
 <figure class="rpl-document">
   <a class="rpl-document__link rpl-u-focusable-within" aria-label="${label}" href="${link}" target="_blank">
-    <span class="rpl-document__icon rpl-icon rpl-icon--size-l rpl-icon--colour-default rpl-icon--icon-document-lined">
-      <svg role="presentation"><use xlink:href="#icon-document-lined"></use></svg>
+    <span class="rpl-document__icon rpl-icon rpl-icon--size-l rpl-icon--colour-default rpl-icon--icon-${mediaIcon}">
+      <svg role="presentation"><use xlink:href="#icon-${mediaIcon}"></use></svg>
     </span>
     <div class="rpl-document__content">
       <span class="rpl-document__name rpl-type-p rpl-type-weight-bold rpl-u-focusable-inline">${title}</span>

diff --git a/packages/ripple-ui-core/src/assets/icons/core/icon-file-secure.svg b/packages/ripple-ui-core/src/assets/icons/core/icon-file-secure.svg
diff --git a/packages/ripple-ui-core/src/assets/icons/sprite.js b/packages/ripple-ui-core/src/assets/icons/sprite.js
diff --git a/packages/ripple-ui-core/src/assets/icons/sprite.svg b/packages/ripple-ui-core/src/assets/icons/sprite.svg
diff --git a/packages/ripple-ui-core/src/components/icon/constants.ts b/packages/ripple-ui-core/src/components/icon/constants.ts
@@ -54,6 +54,7 @@ export const RplIconGroups = {
     'icon-enlarge',
     'icon-enlarge-square-filled',
     'icon-exclamation-circle-filled',
+    'icon-file-secure',
     'icon-free',
     'icon-home',
     'icon-information-circle-filled',