Linked badges (#2132)

* Linked badges

* Add rel attribute support

Author: tylersticka

.changeset/giant-sheep-bake.md

@@ -0,0 +1,5 @@
+---
+'@cloudfour/patterns': minor
+---
+
+Badges can now be links

src/components/badge/badge.scss

@@ -1,7 +1,13 @@
+@use '../../compiled/tokens/scss/brightness';
+@use '../../compiled/tokens/scss/color';
+@use '../../compiled/tokens/scss/ease';
 @use '../../compiled/tokens/scss/font-weight';
 @use '../../compiled/tokens/scss/line-height';
 @use '../../compiled/tokens/scss/size';
+@use '../../compiled/tokens/scss/transition';
 @use '../../mixins/ms';
+@use '../../mixins/theme';
+@use 'sass:color' as sasscolor;
 @use 'sass:math';
 
 ///
@@ -23,10 +29,31 @@
   font-weight: font-weight.$medium;
   line-height: line-height.$tighter;
   padding: 0 math.div(size.$padding-cell-horizontal, 2); // 2
+  text-decoration: none;
+  transition: filter transition.$slow ease.$out;
   vertical-align: middle;
   white-space: nowrap;
 }
 
+///
+/// When badges are links, we want to saturate their appearance a bit and add
+/// some basic pointer effects.
+///
+a.c-badge {
+  // I just wasn't happy with the light gray on its own, but I didn't think this
+  // color was versatile enough to make available as a token.
+  background-color: sasscolor.change(color.$brand-primary-lighter, $alpha: 0.2);
+  color: var(--theme-color-text-action);
+
+  &:hover {
+    filter: brightness(brightness.$control-brighten);
+  }
+
+  &:active {
+    filter: brightness(brightness.$control-dim);
+  }
+}
+
 .c-badge__content {
   &:first-child {
     padding-inline-start: math.div(size.$padding-cell-horizontal, 2);

src/components/badge/badge.stories.mdx

@@ -12,6 +12,7 @@ const badgeStory = (args) => {
   title="Components/Badge"
   argTypes={{
     label: { type: { name: 'string' } },
+    href: { type: { name: 'string' } },
     icon: {
       options: ['', 'check', 'heart', 'pencil'],
       type: { name: 'string' },
@@ -34,17 +35,37 @@ Badges help provide just a smidge more context to repetitive or serialized conte
 
 ## With icon
 
+An icon may be used to visually support the meaning of the badge.
+
 <Canvas>
   <Story name="With icon" args={{ icon: 'check', label: 'Verified' }}>
     {(args) => badgeStory(args)}
   </Story>
 </Canvas>
 
+## Linked
+
+Badges may link to other content. For example, a badge representing an article's category might link to a list of all articles in that category.
+
+Avoid using badges for critical links: Their appearance is too subtle to rely on for important calls to action.
+
+<Canvas>
+  <Story
+    name="Linked"
+    args={{ icon: 'paperclip', label: 'Attachment', href: '#', rel: 'tag' }}
+  >
+    {(args) => badgeStory(args)}
+  </Story>
+</Canvas>
+
 ## Template Properties
 
 - `class` (string)
+- `href` (string, optional): A URL for the badge to link to.
 - `icon` (string, optional): The name of one of [our icons](/docs/design-icons--page) to display.
 - `message` (string, default `'Label'`)
+- `rel` (string, optional): Specify the relationship of the linked URL.
+- `tag_name` (string, default `'span'` or `'a'` depending on presence of `href`)
 
 ## Template Blocks
 

src/components/badge/badge.twig

@@ -1,3 +1,5 @@
+{% set _tag_name = tag_name|default(href ? 'a' : 'span') %}
+
 {% set _extra_content %}
   {% block extra %}
     {% if icon %}
@@ -8,7 +10,12 @@
   {% endblock %}
 {% endset %}
 
-<span class="c-badge{% if class %} {{class}}{% endif %}">
+<{{_tag_name}}
+  class="c-badge{% if class %} {{class}}{% endif %}"
+  {%- if _tag_name == 'a' %}
+    href="{{href|default('#')}}"
+    {% if rel %}rel="{{rel}}"{% endif %}
+  {% endif -%}>
   {% if _extra_content|trim %}
     <span class="c-badge__extra">
       {{_extra_content}}
@@ -19,4 +26,4 @@
       {{label|default('Label')}}
     {% endblock %}
   </span>
-</span>
+</{{_tag_name}}>