feat: c-pill

dist/components/c-pill.selectors.css

@@ -0,0 +1 @@
+/*! @tacc/core-styles 2.17.5+ | MIT | github.com/TACC/Core-Styles */

src/lib/_imports/components/c-pill.css

@@ -0,0 +1,64 @@
+@import url("./c-pill.selectors.css");
+
+/* Base */
+
+:--c-pill {
+  font-weight: var(--medium);
+  font-size: var(--global-font-size--x-small);
+
+  display: inline-block; /* FAQ: Supports `min/max-width` */
+  box-sizing: border-box; /* override browser */
+  padding-inline: 0.75em;
+  min-width: 6.5em;
+
+  line-height: 1.4;
+  text-align: center;
+  text-transform: none; /* avoid inheritance form context e.g. <h1> */
+  border-radius: 0.5em;
+  color: var(--global-color-primary--xx-dark);
+}
+
+
+
+/* Modifiers */
+
+/* Modifiers - Structure */
+
+/* CAVEAT: This alone may not trigger truncation */
+/* SEE: https://confluence.tacc.utexas.edu/x/sAoFDg */
+:--c-pill--should-truncate {
+  max-width: 100%;
+
+  overflow: hidden;
+  text-overflow: ellipsis;
+  /* white-space: nowrap; */ /* FAQ: Let client decide */
+
+  /* Keep alignment that is changed by `overflow: hidden;` */
+  /* SEE: https://stackoverflow.com/q/25818199 */
+  vertical-align: bottom;
+}
+
+
+
+/* Modifiers */
+
+/* Modifiers - Skin */
+
+:--c-pill--is-danger {
+  background-color: var(--global-color-danger--light);
+}
+:--c-pill--is-success {
+  background-color: var(--global-color-success--normal);
+}
+:--c-pill--is-warning {
+  background-color: var(--global-color-warning--normal);
+}
+:--c-pill--is-normal {
+  background-color: var(--global-color-extra--light);
+}
+:--c-pill--is-fixed {
+  background-color: var(--global-color-primary--light);
+}
+:--c-pill--is-updated {
+  background-color: #FFF500;
+}

src/lib/_imports/components/c-pill.selectors.css

@@ -0,0 +1,28 @@
+@import url("../tools/selectors.css");
+
+@custom-selector :--c-pill
+    .c-pill,
+    [class*="pill--"];
+
+@custom-selector :--c-pill--should-truncate
+    .c-pill--should-truncate,
+    [class*="pill--truncate"];
+
+@custom-selector :--c-pill--is-danger
+    .c-pill--is-danger,
+    [class*="pill--danger"];
+@custom-selector :--c-pill--is-success
+    .c-pill--is-success,
+    [class*="pill--success"];
+@custom-selector :--c-pill--is-warning
+    .c-pill--is-warning,
+    [class*="pill--warning"];
+@custom-selector :--c-pill--is-normal
+    .c-pill--is-normal,
+    [class*="pill--normal"];
+@custom-selector :--c-pill--is-fixed
+    .c-pill--is-fixed,
+    [class*="pill--fixed"];
+@custom-selector :--c-pill--is-updated
+    .c-pill--is-updated,
+    [class*="pill--updated"];

src/lib/_imports/components/c-pill/01-c-pill--types.hbs

@@ -0,0 +1,10 @@
+<dl>
+  <dt>Standard</dt>
+  <dd class="demo-list">
+    {{#each types}}{{> @c-pill type=this name=this }}{{/each}}
+  </dd>
+  <dt>Custom</dt>
+  <dd>
+    Avoid custom pills. Interfaces ideally have a limited number of statuses.
+  </dd>
+</dl>

src/lib/_imports/components/c-pill/02-c-pill--features.hbs

@@ -0,0 +1,6 @@
+<dl class="demo-truncate">
+  <dt>Truncate</dt>
+  <dd>
+    {{> @c-pill type="normal" name="very long tag name" should-truncate=true }}
+  </dd>
+</dl>

src/lib/_imports/components/c-pill/03-c-pill--html-elements.hbs

@@ -0,0 +1 @@
+{{> @inline-element-samples class="c-pill" name="pill" }}

src/lib/_imports/components/c-pill/c-pill.hbs

@@ -0,0 +1 @@
+<span class="c-pill c-pill--is-{{ type }}{{#should-truncate}} c-pill--should-truncate{{/should-truncate}}">{{ name }}</span>

src/lib/_imports/components/c-pill/config.yml

@@ -0,0 +1,13 @@
+context:
+  types:
+    - danger
+    - success
+    - warning
+    - normal
+    - fixed
+    - updated
+variants:
+  - name: default
+    hidden: true
+  - name: html-elements
+    label: HTML Elements

src/lib/_imports/components/c-pill/demo.css

@@ -0,0 +1,18 @@
+/* This CSS is ONLY for the pattern library. It is NOT part of the pattern. */
+
+.demo-truncate .c-pill {
+  white-space: nowrap;
+  max-width: 10em;
+}
+
+.demo-list {
+  display: flex;
+  flex-wrap: wrap;
+  list-style-type: none;
+  padding-left: 0;
+  gap: 1em;
+}
+
+.c-pill:not([class*="c-pill--"]) {
+  background-color: var(--global-color-primary--x-light);
+}

src/lib/_imports/components/c-pill/readme.md

@@ -0,0 +1,18 @@
+To label the status of something.
+
+| Class (Std.)               | Class (Alt.)             | Description
+| - | - | - |
+| `.c-pill`                  | `.pill`                  | space, shape, and size
+| `.c-pill--should-truncate` | `.pill--truncate`        | truncate text*
+| `.c-pill--is-danger`       | `.pill--danger`          | for a "danger" status
+| `.c-pill--is-success`      | `.pill--success`         | for a "success" status
+| `.c-pill--is-...`          | `.pill--...`             | for a "..." status
+
+<small>* Requires client styles, because [truncation can be context-dependent](https://confluence.tacc.utexas.edu/x/sAoFDg).</small>
+
+<script>
+/* To open external links in new window */
+Array.from(document.links)
+  .filter(link => link.hostname != window.location.hostname)
+  .forEach(link => link.target = '_blank');
+</script>

src/lib/_imports/core-styles.base.css

@@ -40,6 +40,7 @@
 @import url("./components/c-island.css");
 @import url("./components/c-nav.css");
 @import url("./components/c-page.css");
+@import url("./components/c-pill.css");
 @import url("./components/c-see-all-link.css");
 @import url("./components/c-tag.css");