feat(tile): accented tile CSS pattern demo (#1721)

* feat(tile): add accented tile CSS pattern demo * feat(tile): add accented tile CSS pattern demo * feat(tile) unnesting CSS * feat(tile) adding border-width token to accented tile demo * feat(tile) removing nested CSS on custom props demo * docs(tile): adding accented tile pattern docs * feat(tile) moving accent tile pattern cta --------- Co-authored-by: Steven Spriggs <[email protected]>
RedHat-UX · Aug 7, 2024 · 5e37821 · 5e37821
1 parent 9870e52
commit 5e37821
Show file tree

Hide file tree

Showing 3 changed files with 156 additions and 1 deletion.
diff --git a/docs/patterns/tile/index.md b/docs/patterns/tile/index.md
@@ -0,0 +1,89 @@
+---
+title: Tile
+layout: layouts/pages/basic.njk
+hasToc: true
+order: 120
+tags:
+  - pattern
+importElements:
+  - rh-tile
+  - rh-cta
+  - rh-surface
+  - rh-code-block
+---
+
+<link rel="stylesheet" href="{{ '/assets/packages/@rhds/elements/elements/rh-table/rh-table-lightdom.css' | url }}">
+<link rel="stylesheet" href="{{ '/styles/samp.css' | url }}">
+
+<style>
+  .grid + rh-cta {
+    margin-block-start: var(--rh-space-lg, 16px);
+  }
+
+  rh-tile {
+    width: 320px;
+  }
+
+  rh-tile.accented-tile {
+    position: relative;
+    overflow: hidden;
+    border-radius: var(--rh-border-radius-default, 3px);
+  }
+
+  rh-tile.accented-tile::before {
+    content: '';
+    position: absolute;
+    z-index: 2;
+    display: block;
+    inset-block-start: 0;
+    inset-inline: 0;
+    border-block-start-color: var(--rh-color-brand-red-on-light, #ee0000);
+    border-block-start-width: var(--rh-border-width-lg, 3px);
+    border-block-start-style: solid;
+    pointer-events: none;
+  }
+</style>
+
+## Overview
+
+Tiles are flexible layouts with clickable and contained surfaces.
+
+
+## Accented tile
+
+The accented tile pattern should be used to draw attention to a specifc tile or set of tiles. Be careful not to apply the accented tile pattern to all tiles within a page, otherwise the accent effect will be lost. After all, "if everything is special, then nothing is special."
+
+<div id="rhds-help-grid" class="grid sm-two-columns">
+  <div class="sample">
+    <h3>Example</h3>
+    <uxdot-example width-adjustment="752px">
+      <rh-tile class="accented-tile">
+        <h2 slot="headline"><a href="#top">Link</a></h2>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+      </rh-tile>
+    </uxdot-example>
+  </div>
+  <div class="sample-code">
+    <h3>CSS</h3>
+    <rh-code-block>
+      <script type="text/css">rh-tile.accented-tile {
+  position: relative;
+  overflow: hidden;
+  border-radius: var(--rh-border-radius-default, 3px);
+}
+rh-tile.accented-tile::before {
+  content: '';
+  position: absolute;
+  z-index: 2;
+  display: block;
+  inset-block-start: 0;
+  inset-inline: 0;
+  border-block-start-color: var(--rh-color-brand-red-on-light, #ee0000);
+  border-block-start-width: var(--rh-border-width-lg, 3px);
+  border-block-start-style: solid;
+  pointer-events: none;
+}</script>
+    </rh-code-block>
+  </div>
+</div>
+<rh-cta><a href="/elements/tile/demos/#demo-accented-tiles">View accented tile demo</a></rh-cta>
diff --git a/docs/patterns/video-thumbnail/index.md b/docs/patterns/video-thumbnail/index.md
@@ -1,6 +1,6 @@
 ---
 title: Video thumbnail
-order: 120
+order: 130
 hasToc: true
 tags:
   - pattern

diff --git a/elements/rh-tile/demo/accented-tiles.html b/elements/rh-tile/demo/accented-tiles.html
@@ -0,0 +1,66 @@
+<rh-context-demo>
+  <rh-tile-group>
+    <rh-tile class="accented-tile">
+      <h2 slot="headline"><a href="#top">Link</a></h2>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+    </rh-tile>
+
+    <rh-tile class="accented-tile">
+      <h2 slot="headline"><a href="#top">Link 2</a></h2>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+    </rh-tile>
+
+    <rh-tile class="accented-tile">
+      <h2 slot="headline"><a href="#top">Link 2</a></h2>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+    </rh-tile>
+  </rh-tile-group>
+</rh-context-demo>
+
+<script type="module">
+  import '@rhds/elements/rh-tile/rh-tile.js';
+  import '@rhds/elements/lib/elements/rh-context-demo/rh-context-demo.js';
+</script>
+
+<link rel="stylesheet" href="../rh-tile-lightdom.css">
+
+<style>
+  rh-context-demo::part(demo) {
+    display: flex;
+    align-items: top;
+    flex-wrap: wrap;
+    gap: var(--rh-space-2xl, 32px);
+  }
+
+  rh-tile-group {
+    display: flex;
+    align-items: top;
+    flex-wrap: wrap;
+    column-gap: var(--rh-space-2xl, 32px);
+    row-gap: var(--rh-space-2xl, 32px);
+    margin-inline-end: var(--rh-space-md, 8px);
+  }
+
+  rh-tile {
+    width: 320px;
+  }
+
+  rh-tile.accented-tile {
+    position: relative;
+    overflow: hidden;
+    border-radius: var(--rh-border-radius-default, 3px);
+  }
+
+  rh-tile.accented-tile::before {
+    content: '';
+    position: absolute;
+    z-index: 2;
+    display: block;
+    inset-block-start: 0;
+    inset-inline: 0;
+    border-block-start-color: var(--rh-color-brand-red-on-light, #ee0000);
+    border-block-start-width: var(--rh-border-width-lg, 3px);
+    border-block-start-style: solid;
+    pointer-events: none;
+  }
+</style>