Merge pull request #699 from City-of-Helsinki/feature/pagination-core

Feature/pagination core

packages/core/src/components/all.css

@@ -8,6 +8,7 @@
 @import "./link/link.css";
 @import "./loading-spinner/loading-spinner.css";
 @import "./notification/notification.css";
+@import "./pagination/pagination.css";
 @import "./radio-button/radio-button.css";
 @import "./search-input/search-input.css";
 @import "./selection-group/selection-group.css";

packages/core/src/components/button/button.css

@@ -472,8 +472,8 @@ input[type="submit"].hds-button--small {
 
   --border-color: transparent;
   --border-color-hover: transparent;
-  --border-color-focus: var(--color-black);
-  --border-color-hover-focus: var(--color-black);
+  --border-color-focus: var(--color-coat-of-arms);
+  --border-color-hover-focus: var(--color-coat-of-arms-dark);
 
   --color: var(--color-black);
   --color-hover: var(--color-black);

packages/core/src/components/pagination/pagination.css

@@ -0,0 +1,94 @@
+.hds-pagination-container {
+  text-align: center;
+}
+
+.hds-pagination {
+  font-size: var(--fontsize-body-m);
+  font-weight: bold;
+  display: inline-block; /* Allows centering */
+  position: relative; /* Enables position absolute for btn--next */
+  line-height: var(--lineheight-l);
+  transform: scaleY(-1); /* Trick for flipping the list float direction from bottom to up */
+  --active-page-background-color: var(--color-black);
+  --link-height: 40px;
+}
+
+/* Invisible, floated pseudo-element for reserving space for the hds-pagination__button-next,
+we can not use this position for the actual button as it's in incorrect source order for tabbing */
+.hds-pagination::before {
+  content: attr(data-next); /* Trick to keep floating element same size as btn--next */
+  content: attr(data-next) / ''; /* Removes this pseudo-element from screen readers where supported */
+  display: block;
+  float: right; /* Floated pseudo-element wraps the inline ul around it */
+  speak: never; /* Removes this pseudo-element from screen readers where supported */
+  visibility: hidden;
+  padding-left: 80px;
+  line-height: 56px;
+}
+
+.hds-pagination .hds-pagination__button-prev {
+  float: left;
+  transform: scaleY(-1); /* Flip the element back from upside down */
+  white-space: nowrap;
+  margin-right: 8px;
+}
+
+.hds-pagination .hds-pagination__button-next {
+  position: absolute;
+  right: 0;
+  top: 0; /* Remember that the position is flipped upside down, so this means actually bottom */
+  transform: scaleY(-1); /* Flip the element back from upside down */
+  white-space: nowrap;
+}
+
+.hds-pagination__pages {
+  display: inline-flex; /* inline-flex allows floating it based on floated buttons when there is no more space */
+  flex-wrap: wrap; /* Allow wrapping of the li-elements */
+  justify-content: center; /* Center the li-elements */
+  transform: scaleY(-1); /* Flip the element back from upside down */
+  margin-bottom: 0;
+  padding: 0;
+  list-style: none;
+  margin-top: 8px;
+  gap: var(--spacing-2-xs);
+}
+
+.hds-pagination__item-link {
+  border-radius: 21px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-decoration: none;
+  color: var(--color-black-90);
+  height: var(--link-height);
+  min-width: 32px;
+  padding-left: var(--spacing-3-xs);
+  padding-right: var(--spacing-3-xs);
+}
+
+.hds-pagination__item-link:hover {
+  text-decoration: underline;
+}
+
+.hds-pagination__item-link:focus, .hds-pagination__item-link:active {
+  outline: solid var(--color-coat-of-arms) 3px;
+  outline-offset: 1px;
+}
+
+.hds-pagination__item-link.hds-pagination__item-link--active {
+  color: var(--color-white);
+  background-color: var(--active-page-background-color);
+}
+
+.hds-pagination__item-link.hds-pagination__item-link--active:hover {
+  text-decoration: none;
+}
+
+.hds-pagination__item-ellipsis {
+  height: var(--link-height);
+  width: 24px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: var(--color-black-90);
+}