feat(tile): link styles (#1860)

* feat(tile): private link

Closes #1470

* fix(tile): private icon

* feat(tile): link="external"

.changeset/chilly-shrimps-call.md

@@ -0,0 +1,7 @@
+---
+"@rhds/elements": minor
+---
+`<rh-tile>`: add `link="private"` attribute, indicating that the link is
+private, which changes the link icon from an arrow to a padlock, and
+`link="external"` attribute, which changes the link icon to the "external link"
+icon

elements/rh-tile/demo/link-types.html

@@ -0,0 +1,30 @@
+<rh-tile link="private"
+         icon="bank-safe"
+         icon-set="standard">
+  <div slot="title">Title</div>
+  <h2 slot="headline"><a href="#super-secret-section">Link</a></h2>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+  <div slot="footer">Suspendisse eu turpis elementum</div>
+</rh-tile>
+
+<rh-tile link="external"
+         icon="globe-abstract"
+         icon-set="standard">
+  <div slot="title">Title</div>
+  <h2 slot="headline"><a href="#super-public-section">Link</a></h2>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+  <div slot="footer">Suspendisse eu turpis elementum</div>
+</rh-tile>
+
+<script type="module">
+  import '@rhds/elements/rh-tile/rh-tile.js';
+</script>
+
+<link rel="stylesheet" href="../rh-tile-lightdom.css">
+
+<style>
+  rh-tile {
+    width: 375px;
+    margin: var(--rh-space-md, 8px);
+  }
+</style>

elements/rh-tile/rh-tile.css

@@ -5,7 +5,6 @@
   line-height: var(--rh-line-height-body-text, 1.5);
 }
 
-:host([hidden]),
 [hidden] {
   display: none !important;
 }
@@ -242,20 +241,23 @@ input[type='radio'] {
   flex: 0 0 auto;
 }
 
-rh-icon[icon='arrow-right'] {
-  color: var(--_interactive-color);
-  width: var(--rh-space-xl, 24px);
-  height: var(--rh-space-xl, 24px);
+rh-icon {
   pointer-events: none;
-  translate: 0 0;
-  transition: translate var(--_trans);
+  color: var(--_interactive-color);
+
+  &[icon='arrow-right'] {
+    width: var(--rh-space-xl, 24px);
+    height: var(--rh-space-xl, 24px);
+    translate: 0 0;
+    transition: translate var(--_trans);
 
-  --_trans:
-    var(--rh-animation-speed, 0.3s)
-    var(--rh-animation-timing, cubic-bezier(0.465, 0.183, 0.153, 0.946));
+    --_trans:
+      var(--rh-animation-speed, 0.3s)
+      var(--rh-animation-timing, cubic-bezier(0.465, 0.183, 0.153, 0.946));
+  }
 }
 
-:host(:hover) #footer rh-icon {
+:host(:hover) #footer rh-icon[icon='arrow-right'] {
   translate: 3px 0;
 }
 

elements/rh-tile/rh-tile.ts

@@ -135,6 +135,8 @@ export class RhTile extends LitElement {
   @colorContextProvider()
   @property({ reflect: true, attribute: 'color-palette' }) colorPalette?: ColorPalette;
 
+  /** When set to "private", the icon representing the link changes from an arrow to a padlock */
+  @property() link?: 'private' | 'public' | 'external';
   /**
    * Sets color theme based on parent context
    */
@@ -230,16 +232,28 @@ export class RhTile extends LitElement {
             </div>
             <slot id="body"></slot>
             <div id="footer">
-              <slot id="footer-text" name="footer"></slot>${!this.checkable && !this.disabled ? html`
-              <rh-icon icon="arrow-right" set="ui"></rh-icon>` : !this.checkable ? html`
-              <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><g id="uuid-0fd9e805-a455-40ef-9171-f2f334832bf2"><rect width="48" height="48" fill="none"/></g><g id="uuid-48f9e284-0601-4fcd-bbe7-8b444234ac6c"><path d="m24,7c-9.37,0-17,7.63-17,17s7.63,17,17,17,17-7.63,17-17S33.37,7,24,7Zm15,17c0,3.52-1.23,6.76-3.27,9.32L14.68,12.27c2.56-2.04,5.8-3.27,9.32-3.27,8.27,0,15,6.73,15,15Zm-30,0c0-4.03,1.61-7.69,4.2-10.38l21.18,21.18c-2.7,2.6-6.35,4.2-10.38,4.2-8.27,0-15-6.73-15-15Z"/></g></svg>` : ''}
+              <slot id="footer-text" name="footer"></slot>${this.#renderLinkIcon()}
             </div>
           </div>
         </div>
       </div>
     `;
   }
 
+  #renderLinkIcon() {
+    if (this.checkable) {
+      return '';
+    } else if (this.disabled) {
+      return html`<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><g id="uuid-0fd9e805-a455-40ef-9171-f2f334832bf2"><rect width="48" height="48" fill="none"/></g><g id="uuid-48f9e284-0601-4fcd-bbe7-8b444234ac6c"><path d="m24,7c-9.37,0-17,7.63-17,17s7.63,17,17,17,17-7.63,17-17S33.37,7,24,7Zm15,17c0,3.52-1.23,6.76-3.27,9.32L14.68,12.27c2.56-2.04,5.8-3.27,9.32-3.27,8.27,0,15,6.73,15,15Zm-30,0c0-4.03,1.61-7.69,4.2-10.38l21.18,21.18c-2.7,2.6-6.35,4.2-10.38,4.2-8.27,0-15-6.73-15-15Z"/></g></svg>`;
+    } else if (this.link === 'private') {
+      return html`<rh-icon set="ui" icon="lock"></rh-icon>`;
+    } else if (this.link === 'external') {
+      return html`<rh-icon set="microns" icon="external-link"></rh-icon>`;
+    } else {
+      return html`<rh-icon set="ui" icon="arrow-right"></rh-icon>`;
+    }
+  }
+
   async formDisabledCallback() {
     await this.updateComplete;
     this.requestUpdate();