@hashicorp/design-system-components 1.5.2 → 1.6.1

package/app/styles/components/pagination.scss

@@ -0,0 +1,194 @@
+//
+// PAGINATION
+//
+
+@use "../mixins/focus-ring" as *;
+
+// custom breakpoint for the pagination, swapping between horizontal and stacked layout
+// notice: the value is based on where the component layout potentially breaks down
+
+$pagination-layout-breakpoint: 1000px;
+
+
+// * Pagination Parent (wrapper) component
+// -------------------------------------------------------------------
+
+.hds-pagination {
+  display: grid;
+  grid-template-areas: "info nav selector";
+  grid-template-rows: auto;
+  grid-template-columns: 1fr auto 1fr;
+  align-items: center;
+  margin: 0 auto;
+
+  @media screen and (max-width: $pagination-layout-breakpoint) {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+  }
+}
+
+
+// * Sub-component: Info
+// ---------------------------------------
+
+.hds-pagination-info {
+  grid-area: info;
+  justify-self: flex-start;
+  margin-right: var(--token-pagination-child-spacing-horizontal);
+  white-space: nowrap;
+
+  @media screen and (max-width: $pagination-layout-breakpoint) {
+    margin-top: var(--token-pagination-child-spacing-vertical);
+    margin-left: var(--token-pagination-child-spacing-horizontal);
+  }
+}
+
+
+// * Sub-components: Arrow/Number/Ellipsis (aka "navigation controls")
+// -------------------------------------------------------------------
+
+.hds-pagination-nav {
+  display: flex;
+  grid-area: nav;
+
+  @media screen and (max-width: $pagination-layout-breakpoint) {
+    justify-content: center;
+    order: -1;
+    // Force nav to occupy a full row so other components will wrap:
+    width: 100%;
+  }
+}
+
+.hds-pagination-nav__page-list {
+  display: flex;
+  margin: 0;
+  padding: 0;
+}
+
+.hds-pagination-nav__page-item { list-style-type: none; }
+
+// "controls" are "prev/next" (`arrow`) and "page" numbers (`number`)
+.hds-pagination-nav__control {
+  display: flex;
+  align-items: center;
+  height: var(--token-pagination-nav-control-height);
+  // border width is subtracted from padding:
+  padding: 0 calc(var(--token-pagination-nav-control-padding-horizontal) - 1px);
+  color: var(--token-color-foreground-primary);
+  text-decoration: none;
+  background-color: transparent;
+  border: 1px solid transparent;
+
+  @include hds-focus-ring-with-pseudo-element(
+    $top: var(--token-pagination-nav-control-focus-inset),
+    $right: var(--token-pagination-nav-control-focus-inset),
+    $bottom: var(--token-pagination-nav-control-focus-inset),
+    $left: var(--token-pagination-nav-control-focus-inset),
+  );
+
+  &:hover,
+  &.mock-hover {
+    color: var(--token-color-foreground-action-hover);
+  }
+
+  &:active,
+  &.mock-active {
+    color: var(--token-color-foreground-action-active);
+  }
+}
+
+// only the "Previous" & "Next" (`Arrow`) controls can be disabled
+.hds-pagination-nav__arrow {
+  // notice: when `@disabled={{true}}` is applied, the code always renders a `<button>` element
+  // so no need to add the [disabled] selector here (elsewhere it's done to cover the `a[disabled]` case)
+  &:disabled,
+  &.mock-disabled {
+    color: var(--token-color-foreground-disabled);
+    cursor: not-allowed;
+  }
+}
+
+.hds-pagination-nav__arrow--direction-prev {
+  flex-direction: row;
+  justify-content: flex-start;
+
+  .hds-pagination-nav__arrow-label {
+    margin-left: var(--token-pagination-nav-control-icon-spacing);
+  }
+}
+
+.hds-pagination-nav__arrow--direction-next {
+  flex-direction: row-reverse;
+  justify-content: flex-end;
+
+  .hds-pagination-nav__arrow-label {
+    margin-right: 6px;
+  }
+}
+
+.hds-pagination-nav__number--is-selected {
+  position: relative;
+  color: var(--token-color-foreground-action);
+
+  &:hover {
+    color: var(--token-color-foreground-action-hover);
+  }
+
+  &:active {
+    color: var(--token-color-foreground-action-active);
+  }
+
+  // indicator underline
+  // notice: in all these calculations we have to take in account that there's a 1px transparent border
+  &::after { // notice: we use the `::before` for the focus
+    position: absolute;
+    right: calc(var(--token-pagination-nav-indicator-spacing) - 1px);
+    bottom: -1px;
+    left: calc(var(--token-pagination-nav-indicator-spacing) - 1px);
+    height: var(--token-pagination-nav-indicator-height);
+    margin: 0 auto;
+    background-color: currentColor;
+    border-radius: 2px;
+    content: "";
+  }
+}
+
+.hds-pagination-nav__ellipsis {
+  display: flex;
+  align-items: center;
+  height: var(--token-pagination-nav-control-height);
+  padding: 0 var(--token-pagination-nav-control-padding-horizontal);
+  color: var(--token-color-foreground-faint);
+}
+
+
+// * Sub-component: SizeSelector
+// -------------------------------------------------------------------
+
+.hds-pagination-size-selector {
+  display: flex;
+  grid-area: selector;
+  align-items: center;
+  justify-self: flex-end;
+  margin-left: var(--token-pagination-child-spacing-horizontal);
+
+  @media screen and (max-width: $pagination-layout-breakpoint) {
+    margin-top: var(--token-pagination-child-spacing-vertical);
+    margin-right: var(--token-pagination-child-spacing-horizontal);
+  }
+
+  > label { white-space: nowrap; }
+
+  // notice: this is an `Form::Select::Base` component, slightly customized
+  > select {
+    height: 28px;
+    margin-left: 12px;
+    padding: 0 24px 0 8px;
+    // font styles for this select differ from standard `Form::Select::Base` styles
+    font-size: var(--token-typography-body-100-font-size);
+    font-family: var(--token-typography-body-100-font-family);
+    line-height: var(--token-typography-body-100-line-height);
+    background-position: center right 5px;
+  }
+}

package/blueprints/hds-component/files/app/styles/components/__name__.scss

@@ -2,3 +2,6 @@
 // <%= folderizedModuleName %>
 //
 
+.hds-<%= kebabizedModuleName %> {
+  // add the component styles here
+}

package/blueprints/hds-component-test/files/tests/dummy/app/templates/components/__name__.hbs

@@ -2,58 +2,6 @@
 
 <h2 class="dummy-h2"><%= columnizedModuleName %></h2>
 
-{{! ADD YOUR CONTENT BELOW }}
-{{! Please follow as much as possible what it's already done in other components. }}
-{{! You can start by copy&pasting it, if you want, and then adapt it according to your needs. }}
-{{! Once done, please remove these comments (they're created by the generator). }}
-
-<section>
-  <h3 class="dummy-h3" id="overview"><a href="#overview" class="dummy-link-section">§</a> Overview</h3>
-
-  {{! ADD YOUR CONTENT HERE }}
-
-</section>
-
-<section>
-  <h3 class="dummy-h3" id="component-api"><a href="#component-api" class="dummy-link-section">§</a> Component API</h3>
-  <p class="dummy-paragraph" id="component-api-<%= kebabizedModuleName %>">
-    Here is the API for the component:
-  </p>
-  <dl class="dummy-component-props" aria-labelledby="component-api-<%= kebabizedModuleName %>">
-
-    {{! ADD YOUR CONTENT HERE }}
-
-  </dl>
-</section>
-
-<section>
-  <h3 class="dummy-h3" id="how-to-use"><a href="#how-to-use" class="dummy-link-section">§</a> How to use</h3>
-
-  {{! ADD YOUR CONTENT HERE }}
-
-</section>
-
-<section>
-  <h3 class="dummy-h3" id="design-guidelines"><a href="#design-guidelines" class="dummy-link-section">§</a> Design guidelines</h3>
-  {{! UNCOMMENT THIS BLOCK (once the link and/or the image are available) }}
-  {{!
-  <div class="dummy-design-guidelines">
-    <p class="dummy-paragraph">
-      <a href="[ADD THE LINK TO THE FIGMA FILE/PAGE HERE!]" target="_blank" rel="noopener noreferrer">Figma UI Kit</a>
-    </p>
-    <br />
-    <img class="dummy-figma-docs" src="/assets/images/<%= kebabizedModuleName %>-design-usage.png" alt="" role="none" />
-  </div>
-  }}
-</section>
-
-<section>
-  <h3 class="dummy-h3" id="accessibility"><a href="#accessibility" class="dummy-link-section">§</a> Accessibility</h3>
-
-  {{! ADD YOUR CONTENT HERE }}
-
-</section>
-
 <section data-test-percy>
   <h3 class="dummy-h3" id="showcase"><a href="#showcase" class="dummy-link-section">§</a> Showcase</h3>
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hashicorp/design-system-components",
-  "version": "1.5.2",
+  "version": "1.6.1",
   "description": "Helios Design System Components",
   "keywords": [
     "hashicorp",
@@ -37,7 +37,7 @@
     "test:ember:percy": "percy exec ember test"
   },
   "dependencies": {
-    "@hashicorp/design-system-tokens": "^1.3.1",
+    "@hashicorp/design-system-tokens": "^1.4.0",
     "@hashicorp/ember-flight-icons": "^3.0.2",
     "dialog-polyfill": "^0.5.6",
     "ember-auto-import": "^2.4.2",
@@ -59,11 +59,10 @@
     "@embroider/test-setup": "^1.8.3",
     "@glimmer/component": "^1.1.2",
     "@glimmer/tracking": "^1.1.2",
-    "@percy/cli": "^1.17.0",
-    "@percy/ember": "^4.0.0",
+    "@percy/cli": "^1.18.0",
+    "@percy/ember": "^4.1.0",
     "babel-eslint": "^10.1.0",
     "broccoli-asset-rev": "^3.0.0",
-    "ember-a11y-refocus": "^2.1.0",
     "ember-a11y-testing": "^5.0.0",
     "ember-cli": "~4.7.0",
     "ember-cli-clipboard": "^1.0.0",
@@ -78,8 +77,8 @@
     "ember-load-initializers": "^2.1.2",
     "ember-page-title": "^7.0.0",
     "ember-power-select": "^6.0.0",
-    "ember-prism": "^0.12.0",
-    "ember-qunit": "^5.1.5",
+    "ember-prism": "^0.13.0",
+    "ember-qunit": "^6.1.1",
     "ember-resolver": "^8.0.3",
     "ember-source": "~4.8.1",
     "ember-source-channel-url": "^3.0.0",