@tacc/core-styles 2.2.0 → 2.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tacc/core-styles",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "license": "MIT",
   "author": "TACC ACI WMA <wma-portals@gmail.com>",
   "description": "CSS source and processor for TACC Core-CMS and Core-Portal.",

package/src/lib/_imports/components/bootstrap/bootstrap--nav-tabs.hbs

@@ -0,0 +1,26 @@
+<ul class="nav nav-tabs" id="tabs" role="tablist">
+  <li class="nav-item">
+    <a class="nav-link active" id="tab-1" data-toggle="tab" href="#content-1" role="tab" aria-controls="content-1" aria-selected="true">Tab 1</a>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link" id="tab-2" data-toggle="tab" href="#content-2" role="tab" aria-controls="content-2" aria-selected="false">Tab 2</a>
+  </li>
+  <li class="nav-item">
+    <a class="nav-link" id="tab-3" data-toggle="tab" href="#content-3" role="tab" aria-controls="content-3" aria-selected="false">Tab 3</a>
+  </li>
+</ul>
+<div class="tab-content" id="tabs-content">
+  <div class="tab-pane active" id="content-1" role="tabpanel" aria-labelledby="tab-1">
+    <p>Tab Content 1</p>
+    <p>
+      <label>Focuable Element</label>
+      <input type="text" />
+    </p>
+  </div>
+  <div class="tab-pane" id="content-2" role="tabpanel" aria-labelledby="tab-2">
+    <p>Tab Content 2</p>
+  </div>
+  <div class="tab-pane" id="content-3" role="tabpanel" aria-labelledby="tab-3">
+    <p>Tab Content 3</p>
+  </div>
+</div>

package/src/lib/_imports/components/bootstrap/bootstrap--nav-tabs.readme.md

@@ -0,0 +1,8 @@
+To override and extend [Bootstrap Nav Tabs](https://getbootstrap.com/docs/4.3/components/navs/#tabs).
+
+<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>

package/src/lib/_imports/components/bootstrap/config.yml

@@ -7,6 +7,8 @@ variants:
     status: ready
   - name: modal
     status: prototype
+  - name: nav-tabs
+    status: prototype
   - name: form
     label: (Portal) Form
     status: prototype

package/src/lib/_imports/components/bootstrap.nav-tabs.css

@@ -0,0 +1,35 @@
+@import url("../tools/x-tabs.skin.css");
+
+.nav-tabs,
+.tab-pane {
+  @extend .x-tabs--custom-properties;
+}
+
+.nav-tabs {
+  @extend .x-tabs;
+}
+ul.nav-tabs {
+  margin-bottom: 0; /* overwrite core-styles.base.css */
+}
+
+.tab-pane {
+  @extend .x-tabs__content;
+}
+.nav-tabs .nav-link {
+  @extend .x-tabs__tab;
+
+  /* To overwrite Bootstrap _nav.scss border */
+  border-top: none;
+  border-inline: none;
+  border-radius: 0;
+}
+.nav-tabs .nav-link:hover {
+  @extend .x-tabs__tab--hover;
+}
+
+.nav-tabs .nav-link.active {
+  @extend .x-tabs__tab--active;
+}
+.nav-tabs .nav-link:not(.active) {
+  @extend .x-tabs__tab--not-active;
+}

package/src/lib/_imports/components/pymdownx/config.yml

@@ -0,0 +1,10 @@
+label: PyMdown Extensions
+context:
+  shouldSkipPattern: false
+  📝 shouldSkipPattern: because core-styles.docs.css is not loaded
+  shouldLoadDocs: false
+  📝 shouldLoadDocs: because core-styles.docs.css loads conflicting CSS
+variants:
+  - name: default
+    label: (Overview)
+  - name: tabbed

package/src/lib/_imports/components/pymdownx/pymdownx--tabbed.hbs

@@ -0,0 +1,25 @@
+<div class="tabbed-set">
+
+  <input id="__tabbed_1_1" name="__tabbed_1" type="radio" checked="checked">
+  <label for="__tabbed_1_1">Tab 1</label>
+  <div class="tabbed-content">
+    <p>Tab Content 1</p>
+    <p>
+      <label>Focuable Element</label>
+      <input type="text" />
+    </p>
+  </div>
+
+  <input id="__tabbed_1_2" name="__tabbed_1" type="radio">
+  <label for="__tabbed_1_2">Tab 2</label>
+  <div class="tabbed-content">
+    <p>Tab Content 2</p>
+  </div>
+
+  <input id="__tabbed_1_3" name="__tabbed_1" type="radio">
+  <label for="__tabbed_1_3">Tab 3</label>
+  <div class="tabbed-content">
+    <p>Tab Content 3</p>
+  </div>
+
+</div>

package/src/lib/_imports/components/pymdownx/pymdownx--tabbed.readme.md

@@ -0,0 +1,7 @@
+To style [Python-Markdown Tabbed Extension](https://facelessuser.github.io/pymdown-extensions/extensions/tabbed/).
+
+> **♿ Accessibility Extras**
+>
+> 1. Focus on tab container. Verify it **has** focus outline.
+> 2. While focused on tab container, press <kbd>←</kbd> and <kbd>→</kbd>. Verify tab switches.
+> 3. While on tab 1, focus on input field within. Verify tab container has **no** focus outline.

package/src/lib/_imports/components/pymdownx/pymdownx.hbs

@@ -0,0 +1,6 @@
+<dl>
+    <dt>TACC Usage</dt>
+    <dd>TACC Docs uses these components.</dd>
+    <dt>More Information</dt>
+    <dd>See "Notes" tab.<dd>
+</dl>

package/src/lib/_imports/components/pymdownx/pymdownx.readme.md

@@ -0,0 +1,8 @@
+Styles for markup with classes from [PyMdown Extensions](https://facelessuser.github.io/pymdown-extensions/).
+
+<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>

package/src/lib/_imports/components/pymdownx--tabbed.css

@@ -0,0 +1,63 @@
+@import url("../tools/x-tabs.css");
+
+.tabbed-set {
+  @extend .x-tabs;
+  @extend .x-tabs--custom-properties;
+}
+
+.tabbed-set > input {
+  @extend .x-tabs__toggle;
+}
+.tabbed-set > .tabbed-content {
+  @extend .x-tabs__content;
+}
+.tabbed-set > label {
+  @extend .x-tabs__tab;
+}
+.tabbed-set > label:hover {
+  @extend .x-tabs__tab--hover;
+}
+
+.tabbed-set > input:checked + label {
+  @extend .x-tabs__tab--active;
+}
+.tabbed-set > input:not(:checked) + label {
+  @extend .x-tabs__tab--not-active;
+}
+
+@media screen {
+  .tabbed-set > input:checked + label + .tabbed-content {
+    @extend .x-tabs__content--active;
+  }
+}
+@media print {
+  .tabbed-content {
+    @extend .x-tabs__content--force-active;
+  }
+}
+
+
+
+/* To show focus on container ONLY if a toggle has VISIBLE focus */
+/* NOTE: Simple version shows outline even if browser would not do so for inputs
+
+.tabbed-set:focus-within {
+  @extend .x-tabs--focus-within;
+}
+
+*/
+@media screen {
+  @supports selector(:has(*)) {
+    /* FAQ: The `:where(.tabbed-set > *)` prevents tabs focus UI
+            when focusing on an element within the content */
+    .tabbed-set:has(input:focus-visible:where(.tabbed-set > *)) {
+      @extend .x-tabs--focus-within;
+    }
+  }
+
+  @supports not selector(:has(*)) {
+    .tabbed-set:focus-within {
+      @extend .x-tabs--focus-within;
+    }
+  }
+}

package/src/lib/_imports/components/pymdownx.css

@@ -0,0 +1 @@
+@import url("./pymdownx--tabbed.css");

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

@@ -30,6 +30,7 @@
 @import url("./components/bootstrap.container.css");
 @import url("./components/bootstrap.figure.css");
 @import url("./components/bootstrap.modal.css");
+@import url("./components/bootstrap.nav-tabs.css");
 @import url("./components/c-button.css");
 @import url("./components/c-callout.css");
 @import url("./components/c-data-list.css");

package/src/lib/_imports/core-styles.docs.css

@@ -22,6 +22,7 @@
 /* (none) */
 
 /* COMPONENTS */
+@import url("./components/pymdownx--tabbed.css");
 @import url("./components/admonition.css");
 @import url("./components/align.css");
 @import url("./components/tacc-docs.css");

package/src/lib/_imports/tools/x-tabs/config.yml

@@ -0,0 +1,3 @@
+context:
+  shouldSkipPattern: false
+  📝 shouldSkipPattern: because core-styles.….css does not import this

package/src/lib/_imports/tools/x-tabs/demo.css

@@ -0,0 +1,5 @@
+/* This CSS is ONLY for the pattern library. It is NOT part of the pattern. */
+
+.x-tabs label {
+  cursor: default; /* to suggest tabs are not functional */
+}

package/src/lib/_imports/tools/x-tabs/readme.md

@@ -0,0 +1,22 @@
+Mixins for tab components e.g. [Bootstrap Nav Tabs]({{path './bootstrap--nav-tabs' }}), [Python-Markdown Tabbed Extension]({{path './pymdownx--tabbed' }}).
+
+| Mixin | Description
+| - | -
+| `.x-tabs`                        | container of tab elements
+| `.x-tabs--custom-properties`     | custom properties for tab elements
+| `.x-tabs--focus-within`          | container on interactive element focus
+| `.x-tabs__toggle`                | interactive element that toggles visibility
+| `.x-tabs__tab`                   | a tab
+| `.x-tabs__tab--hover`            | a tab over which user hovers
+| `.x-tabs__tab--active`           | the tab of the visible content
+| `.x-tabs__tab--not-active`       | a tab of not visible content
+| `.x-tabs__content`               | content of the tabs
+| `.x-tabs__content--active`       | visible content
+| `.x-tabs__content--force-active` | to force content to be visible
+
+<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>

package/src/lib/_imports/tools/x-tabs/x-tabs.hbs

@@ -0,0 +1,14 @@
+<div class="x-tabs x-tabs--custom-properties">
+
+  <input class="x-tabs__toggle" type="radio">
+  <label class="x-tabs__tab x-tabs__tab--active">Tab (Active)</label>
+  <label class="x-tabs__tab x-tabs__tab--hover">Tab (Hover)</label>
+  <label class="x-tabs__tab x-tabs__tab--not-active">Tab (Not Active)</label>
+  <div class="x-tabs__content x-tabs__content--active">
+    <p>Content (Active)</p>
+  </div>
+  <div class="x-tabs__content">
+    <p>Content (Not Active)</p>
+  </div>
+
+</div>

package/src/lib/_imports/tools/x-tabs.css

@@ -0,0 +1,2 @@
+@import url("./x-tabs.structure.css");
+@import url("./x-tabs.skin.css");

package/src/lib/_imports/tools/x-tabs.skin.css

@@ -0,0 +1,45 @@
+.x-tabs {
+  /* FAQ: To avoid @extend error */
+}
+.x-tabs--custom-properties {
+  --buffer: 20px;
+}
+.x-tabs--focus-within {
+  outline: 5px auto; /* to mimic browser outline */
+}
+
+.x-tabs__tab {
+  padding-block: 1.25em 0.75em;
+  padding-inline: 0.875em;
+  margin-inline: var(--buffer);
+
+  border-bottom: var(--global-border-width--x-thick) solid transparent;
+
+  font-size: var(--global-font-size--medium);
+  font-weight: var(--medium);
+}
+.x-tabs__tab:is(a) {
+  text-decoration: none;
+}
+.x-tabs__tab--hover {
+  border-color: var(--global-color-primary--dark);
+}
+.x-tabs__tab--not-active {
+  color: var(--global-color-primary--dark);
+}
+.x-tabs__tab--active {
+  color: var(--global-color-accent--normal);
+  border-color: var(--global-color-accent--normal);
+}
+
+.x-tabs__content {
+  padding-inline: var(--buffer);
+
+  border-top: var(--global-border-width--normal) solid var(--global-color-primary--dark);
+}
+.x-tabs__content > *:first-child {
+  margin-top: var(--buffer);
+}
+.x-tabs__content > *:last-child {
+  margin-bottom: var(--buffer);
+}

package/src/lib/_imports/tools/x-tabs.structure.css

@@ -0,0 +1,29 @@
+.x-tabs {
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.x-tabs__toggle {
+  /* FAQ: If `display: none` were used, keyboard accessibility would break */
+  position: absolute;
+  top: -100vh;
+  opacity: 0;
+}
+
+.x-tabs__tab {
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.x-tabs__content {
+  width: 100%;
+  display: none;
+}
+.x-tabs__content--active {
+  order: 99;
+  display: block;
+}
+.x-tabs__content--force-active {
+  display: contents;
+}