Added: OSS::Tag htmlSafe option

upfluence · Feb 5, 2024 · d232384 · d232384
1 parent f99e6bb
commit d232384
Show file tree

Hide file tree

Showing 6 changed files with 1,124 additions and 1,131 deletions.
diff --git a/addon/components/o-s-s/tag.hbs b/addon/components/o-s-s/tag.hbs
@@ -4,12 +4,16 @@
   {{/if}}
 
   {{#if @label}}
-    <div class="text-style-semibold fx-row">
-      {{#if @hasEllipsis}}
-        <span>{{@label}}</span>
-      {{else}}
-        {{@label}}
-      {{/if}}
-    </div>
+    {{#if @htmlSafe}}
+      {{this.safeLabel}}
+    {{else}}
+      <div class="text-style-semibold fx-row">
+        {{#if @hasEllipsis}}
+          <span>{{@label}}</span>
+        {{else}}
+          {{@label}}
+        {{/if}}
+      </div>
+    {{/if}}
   {{/if}}
-</div>
+</div>
diff --git a/addon/components/o-s-s/tag.stories.js b/addon/components/o-s-s/tag.stories.js
@@ -70,6 +70,16 @@ export default {
       control: {
         type: 'boolean'
       }
+    },
+    htmlSafe: {
+      description: "Allows html code to be passed in the @label argument. Bypasses the tag's default styling.",
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' }
+      },
+      control: {
+        type: 'boolean'
+      }
     }
   }
 };
@@ -78,12 +88,15 @@ const defaultArgs = {
   skin: 'primary',
   label: 'Label',
   icon: 'far fa-thumbs-up',
-  hasEllipsis: false
+  hasEllipsis: false,
+  plain: false,
+  htmlSafe: false
 };
 
 const Template = (args) => ({
   template: hbs`
-    <OSS::Tag @skin={{this.skin}} @label={{this.label}} @icon={{this.icon}} @hasEllipsis={{this.hasEllipsis}}/>
+    <OSS::Tag @skin={{this.skin}} @label={{this.label}} @icon={{this.icon}} @hasEllipsis={{this.hasEllipsis}}
+              @plain={{this.plain}} @htmlsafe={{this.htmlSafe}} />
   `,
   context: args
 });

diff --git a/addon/components/o-s-s/tag.ts b/addon/components/o-s-s/tag.ts
@@ -1,5 +1,7 @@
 import Component from '@glimmer/component';
 import { assert } from '@ember/debug';
+import { htmlSafe } from '@ember/template';
+import type { SafeString } from '@ember/template/-private/handlebars';
 
 export type SkinType =
   | 'primary'
@@ -43,6 +45,7 @@ interface OSSTagArgs {
   icon?: string;
   hasEllipsis?: boolean;
   plain?: boolean;
+  htmlSafe?: boolean;
 }
 
 export default class OSSTag extends Component<OSSTagArgs> {
@@ -73,4 +76,8 @@ export default class OSSTag extends Component<OSSTagArgs> {
 
     return classes.join(' ');
   }
+
+  get safeLabel(): SafeString {
+    return htmlSafe(this.args.label ?? '');
+  }
 }