@tacc/core-styles 2.39.3 → 2.40.0

package/src/lib/_imports/components/c-page/c-page.hbs

@@ -0,0 +1,273 @@
+<!-- Single Page -->
+<nav class="c-page-list">
+  <button class="c-page-end" disabled type="button">
+    &lt; Previous
+  </button>
+  <button
+    class="c-page-item c-page-item--is-active c-page-link"
+    disabled
+    type="button"
+  >
+    1
+  </button>
+  <button class="c-page-end" disabled type="button">
+    Next &gt;
+  </button>
+</nav>
+
+<!-- Few Pages (Current: 2 of 4) -->
+<nav class="c-page-list">
+  <button class="c-page-end" type="button">
+    &lt; Previous
+  </button>
+  <button
+    class="c-page-item c-page-link"
+    type="button"
+  >
+    1
+  </button>
+  <button
+    class="c-page-item c-page-item--is-active c-page-link"
+    type="button"
+  >
+    2
+  </button>
+  <button
+    class="c-page-item c-page-link"
+    type="button"
+  >
+    3
+  </button>
+  <button
+    class="c-page-item c-page-link"
+    type="button"
+  >
+    4
+  </button>
+  <button class="c-page-end" type="button">
+    Next &gt;
+  </button>
+</nav>
+
+<!-- Few Pages (Current: Last) -->
+<nav class="c-page-list">
+  <button class="c-page-end" type="button">
+    &lt; Previous
+  </button>
+  <button
+    class="c-page-item c-page-link"
+    type="button"
+  >
+    1
+  </button>
+  <button
+    class="c-page-item c-page-link"
+    type="button"
+  >
+    2
+  </button>
+  <button
+    class="c-page-item c-page-link"
+    type="button"
+  >
+    3
+  </button>
+  <button
+    class="c-page-item c-page-item--is-active c-page-link"
+    type="button"
+  >
+    4
+  </button>
+  <button class="c-page-end" disabled type="button">
+    Next &gt;
+  </button>
+</nav>
+
+<!-- Many Pages - Near Start (Current: 3 of 20) -->
+<nav class="c-page-list">
+  <button class="c-page-end" type="button">
+    &lt; Previous
+  </button>
+  <button
+    class="c-page-item c-page-link"
+    type="button"
+  >
+    1
+  </button>
+  <button
+    class="c-page-item c-page-link"
+    type="button"
+  >
+    2
+  </button>
+  <button
+    class="c-page-item c-page-item--is-active c-page-link"
+    type="button"
+  >
+    3
+  </button>
+  <button
+    class="c-page-item c-page-link"
+    type="button"
+  >
+    4
+  </button>
+  <button
+    class="c-page-item c-page-link"
+    type="button"
+  >
+    5
+  </button>
+  <span class="c-page-item--etcetera">...</span>
+  <button
+    class="c-page-item c-page-link"
+    type="button"
+  >
+    20
+  </button>
+  <button class="c-page-end" type="button">
+    Next &gt;
+  </button>
+</nav>
+
+<!-- Many Pages - Middle (Current: 10 of 20) -->
+<nav class="c-page-list">
+  <button class="c-page-end" type="button">
+    &lt; Previous
+  </button>
+  <button
+    class="c-page-item c-page-link"
+    type="button"
+  >
+    1
+  </button>
+  <span class="c-page-item--etcetera">...</span>
+  <button
+    class="c-page-item c-page-link"
+    type="button"
+  >
+    8
+  </button>
+  <button
+    class="c-page-item c-page-link"
+    type="button"
+  >
+    9
+  </button>
+  <button
+    class="c-page-item c-page-item--is-active c-page-link"
+    type="button"
+  >
+    10
+  </button>
+  <button
+    class="c-page-item c-page-link"
+    type="button"
+  >
+    11
+  </button>
+  <button
+    class="c-page-item c-page-link"
+    type="button"
+  >
+    12
+  </button>
+  <span class="c-page-item--etcetera">...</span>
+  <button
+    class="c-page-item c-page-link"
+    type="button"
+  >
+    20
+  </button>
+  <button class="c-page-end" type="button">
+    Next &gt;
+  </button>
+</nav>
+
+<!-- Many Pages - Near End (Current: 18 of 20) -->
+<nav class="c-page-list">
+  <button class="c-page-end" type="button">
+    &lt; Previous
+  </button>
+  <button
+    class="c-page-item c-page-link"
+    type="button"
+  >
+    1
+  </button>
+  <span class="c-page-item--etcetera">...</span>
+  <button
+    class="c-page-item c-page-link"
+    type="button"
+  >
+    16
+  </button>
+  <button
+    class="c-page-item c-page-link"
+    type="button"
+  >
+    17
+  </button>
+  <button
+    class="c-page-item c-page-item--is-active c-page-link"
+    type="button"
+  >
+    18
+  </button>
+  <button
+    class="c-page-item c-page-link"
+    type="button"
+  >
+    19
+  </button>
+  <button
+    class="c-page-item c-page-link"
+    type="button"
+  >
+    20
+  </button>
+  <button class="c-page-end" type="button">
+    Next &gt;
+  </button>
+</nav>
+
+<!-- Example with Disabled Link -->
+<nav class="c-page-list">
+  <button class="c-page-end" type="button">
+    &lt; Previous
+  </button>
+  <button
+    class="c-page-item c-page-link"
+    type="button"
+  >
+    1
+  </button>
+  <button
+    class="c-page-item c-page-link"
+    type="button"
+  >
+    2
+  </button>
+  <button
+    class="c-page-item c-page-item--is-active c-page-link"
+    type="button"
+  >
+    3
+  </button>
+  <button
+    class="c-page-item c-page-link"
+    disabled
+    type="button"
+  >
+    4
+  </button>
+  <button
+    class="c-page-item c-page-link"
+    type="button"
+  >
+    5
+  </button>
+  <button class="c-page-end" type="button">
+    Next &gt;
+  </button>
+</nav>

package/src/lib/_imports/components/c-page/config.yml

@@ -0,0 +1 @@
+status: ready

package/src/lib/_imports/components/c-page/demo.css

@@ -0,0 +1,3 @@
+nav + nav {
+  padding-top: 20px;
+}

package/src/lib/_imports/components/c-page/readme.md

@@ -0,0 +1,14 @@
+Pagination component for navigating through multiple pages of content.
+
+> **⚠️ Warning**
+>
+> Naming does **not** _accurately_ reflect [BEM](https://getbem.com/).
+
+| Class                   | Description
+| - | - |
+| `.c-page-list`         | container for pagination controls
+| `.c-page-end`          | previous/next navigation buttons
+| `.c-page-item`         | individual page number button
+| `.c-page-link`         | clickable page number link
+| `.c-page-item--etcetera` | ellipsis between page numbers
+| `.c-button--is-active` | indicates current page

package/src/lib/_imports/components/c-page.css

@@ -1,96 +1,45 @@
-/*
-Pagination
+@import url("../tools/x-pagination.css");
 
-A navigation list of sequential page toggles with end cap links.
-
-Markup: c-page.html
-
-Styleguide Components.Pagination
-*/
-@import url('../components/c-button.selectors.css');
-
-
-
-/* Pagination: Variables */
-
-.c-page-list {
-  --item-width: 2em;
-  --item-buffer: 3px;
-  --item-border: var(--global-border-width--normal); /* WARNING: assumption */
-}
-
-
-
-/* Pagination: List */
+/* FAQ: Core-Components Paginator module expects these classes */
+/* https://github.com/TACC/Core-Components/blob/v0.0.4/src/lib/Paginator/Paginator.module.css */
 
 .c-page-list {
-  display: flex;
-  flex-direction: row;
-  align-items: baseline;
-  list-style: none;
-
-  font-size: 14px; /* TEMPORARY: Should be 14px and have commented rem value */
-}
-ul.c-page-list {
-  list-style: none;
+  @mixin pagination;
 }
 
-/* Pagination: List: Constant Hover */
+.c-page-end {
+  @mixin pagination__end-item;
+  @mixin pagination__end-link;
 
-.c-page-link--always-click {
-  position: relative;
-  box-sizing: content-box;
+  margin-inline: 12px;
 }
-.c-page-link--always-click::before,
-.c-page-link--always-click::after {
-  --width: var(--item-buffer);
-  --vert-offset: calc( -1 * var(--item-border) );
-  --horz-offset: calc( 100% + var(--item-border) );
 
-  content: '';
-  width: var(--width);
-  position: absolute;
-  top: var(--vert-offset);
-  bottom: var(--vert-offset);
+.c-page-item {
+  @mixin pagination__page-item;
 }
-.c-page-link--always-click:--c-button {
-  overflow: visible; /* overwrite `.c-button` so pseudo elements show */
+.c-page-item--is-active {
+  @mixin pagination__active-item;
 }
-.c-page-link--always-click::before { right: var(--horz-offset) }
-.c-page-link--always-click::after { left: var(--horz-offset) }
-
 
+.c-page-link {
+  @mixin pagination__page-link;
 
+  &:disabled {
+    @mixin pagination__page-link--disabled;
+  }
 
-
-/* Pagination: Item */
-
-.c-page-item              { margin-inline: var(--item-buffer) }
-.c-page-item:first-child  { margin-left: 0 }
-.c-page-item:last-child   { margin-right: 0 }
-
-/* Pagination: Item: Truncated */
+  &.c-page-link--is-active,
+  &.c-page-item--is-active,
+  .c-page-item--is-active & {
+    @mixin pagination__page-link--active;
+  }
+}
 
 .c-page-item--etcetera {
-  min-width: var(--item-width);
-  margin-inline: 2px;
-  text-align: center;
-
-  cursor: default;
+  @mixin pagination__skipped-item;
+  @mixin pagination__skipped-link;
 }
 
-
-
-/* Pagination: End */
-
-.c-page-end { padding: 4px 12px }
-
-
-
-/* Pagination: Link */
-
-.c-page-link {
-  padding: 5px 0;
-  min-width: var(--item-width);
-  line-height: 1.2;
+.c-button--is-active {
+  @mixin pagination__page-link--active;
 }

package/src/lib/_imports/djangocms-blog/README.md

@@ -0,0 +1,6 @@
+# Django CMS Blog
+
+Known Clients
+- [TACC/Core-CMS]
+
+[tacc/core-cms]: https://github.com/TACC/Core-CMS

package/src/lib/_imports/djangocms-blog/cms-pagination/cms-pagination.hbs

@@ -0,0 +1,41 @@
+<!-- Single Page -->
+<nav class="pagination">
+  <a>&lt; Previous</a>
+  <span class="current">Page 1 of 1</span>
+  <a>Next &gt;</a>
+</nav>
+
+<!-- Few Pages (Current: 2 of 4) -->
+<nav class="pagination">
+  <a href="?page=1">&lt; Previous</a>
+  <span class="current">Page 2 of 4</span>
+  <a href="?page=3">Next &gt;</a>
+</nav>
+
+<!-- Few Pages (Current: Last) -->
+<nav class="pagination">
+  <a href="?page=3">&lt; Previous</a>
+  <span class="current">Page 4 of 4</span>
+  <a>Next &gt;</a>
+</nav>
+
+<!-- Many Pages - Near Start (Current: 3 of 20) -->
+<nav class="pagination">
+  <a href="?page=2">&lt; Previous</a>
+  <span class="current">Page 3 of 20</span>
+  <a href="?page=4">Next &gt;</a>
+</nav>
+
+<!-- Many Pages - Middle (Current: 10 of 20) -->
+<nav class="pagination">
+  <a href="?page=9">&lt; Previous</a>
+  <span class="current">Page 10 of 20</span>
+  <a href="?page=11">Next &gt;</a>
+</nav>
+
+<!-- Many Pages - Near End (Current: 18 of 20) -->
+<nav class="pagination">
+  <a href="?page=17">&lt; Previous</a>
+  <span class="current">Page 18 of 20</span>
+  <a href="?page=19">Next &gt;</a>
+</nav>

package/src/lib/_imports/djangocms-blog/cms-pagination/config.yml

@@ -0,0 +1,13 @@
+label: Pagination
+variants:
+  - name: default
+    label: Unstyled
+    status: reference
+    context:
+      shouldSkipBase: true
+  - name: tacc-cms
+    label: TACC (CMS)
+    status: ready
+    context:
+      shouldSkipPattern: false
+      shouldLoadCMS: true

package/src/lib/_imports/djangocms-blog/cms-pagination/readme.md

@@ -0,0 +1,3 @@
+To style [Django CMS Blog](https://github.com/nephila/djangocms-blog/blob/1.1.1/djangocms_blog/templates/djangocms_blog/post_list.html) pagination.
+
+<script src="{{path '/assets/_utils/js/open-ext-links-in-new-window.js'}}" />

package/src/lib/_imports/djangocms-blog/cms-pagination.css

@@ -0,0 +1,20 @@
+@import url("../tools/x-pagination.css");
+
+.pagination {
+  @mixin pagination;
+
+  margin-block: var(--global-space--x-large);
+
+  width: fit-content;
+  margin-inline: auto;
+}
+.pagination a {
+  @mixin pagination__end-item;
+
+  padding-block: 0;
+}
+.pagination span {
+  @mixin pagination__page-item;
+
+  padding-block: 0;
+}

package/src/lib/_imports/djangocms-blog/config.yml

@@ -0,0 +1,3 @@
+label: Django CMS Blog
+context:
+  subdir: "djangocms-blog"

package/src/lib/_imports/elements/links.css

@@ -2,15 +2,15 @@
 @import url("../tools/selectors.css");
 @import url('../tools/x-link.css');
 
-a:not(:--c-button) {
+a:where(:not(:--c-button)) {
   @mixin link;
 }
-a:not([href]) {
+a:where(:not([href])) {
   @mixin link--disabled;
 }
-a:not(:--c-button):hover {
+a:where(:not(:--c-button)):hover {
   @mixin link--hover;
 }
-a:not(:--c-button):active {
+a:where(:not(:--c-button)):active {
   @mixin link--active;
 }

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

@@ -0,0 +1 @@
+status: ready

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

@@ -0,0 +1,3 @@
+nav + nav {
+  padding-top: 20px;
+}

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

@@ -0,0 +1,16 @@
+Mixins for creating consistent pagination components.
+
+| Mixin | Description
+| - | -
+| `pagination` | Base styles for pagination container
+| `pagination__end-item` | Styles for previous/next items
+| `pagination__page-item` | Styles for numbered page items
+| `pagination__skipped-item` | Styles for ellipsis/skip items
+| `pagination__active-item` | Styles for current page item
+| `pagination__disabled-item` | Styles for disabled items
+| `pagination__link` | Base styles for pagination links
+| `pagination__page-link` | Styles for numbered page links
+| `pagination__end-link` | Styles for previous/next links
+| `pagination__skipped-link` | Styles for ellipsis/skip indicators
+| `pagination__page-link--active` | Styles for current page link
+| `pagination__page-link--disabled` | Styles for disabled links