pagination

src/components.d.ts

@@ -26,6 +26,7 @@ import {
   LinkBoxVariants,
   LinkVariants,
   MenuType,
+  PaginationItemVariants,
   PersonCardVariants,
   ProcessFlowBoxStepStates,
   ProcessFlowBoxVariants,
@@ -589,6 +590,13 @@ export namespace Components {
      */
     size: SiteLogoSize;
   }
+  interface HyPager {}
+  interface HyPagerItem {
+    itemLabel?: string;
+    itemUrl?: string;
+    scAriaLabel?: string;
+    variant: PaginationItemVariants;
+  }
   interface HyParagraphText {
     headerstyle: string;
     placement: string;
@@ -1068,6 +1076,16 @@ declare global {
     prototype: HTMLHyMenuSidebarElement;
     new (): HTMLHyMenuSidebarElement;
   };
+  interface HTMLHyPagerElement extends Components.HyPager, HTMLStencilElement {}
+  var HTMLHyPagerElement: {
+    prototype: HTMLHyPagerElement;
+    new (): HTMLHyPagerElement;
+  };
+  interface HTMLHyPagerItemElement extends Components.HyPagerItem, HTMLStencilElement {}
+  var HTMLHyPagerItemElement: {
+    prototype: HTMLHyPagerItemElement;
+    new (): HTMLHyPagerItemElement;
+  };
   interface HTMLHyParagraphTextElement extends Components.HyParagraphText, HTMLStencilElement {}
   var HTMLHyParagraphTextElement: {
     prototype: HTMLHyParagraphTextElement;
@@ -1230,6 +1248,8 @@ declare global {
     'hy-menu-level-container': HTMLHyMenuLevelContainerElement;
     'hy-menu-mobile-breadcrumb': HTMLHyMenuMobileBreadcrumbElement;
     'hy-menu-sidebar': HTMLHyMenuSidebarElement;
+    'hy-pager': HTMLHyPagerElement;
+    'hy-pager-item': HTMLHyPagerItemElement;
     'hy-paragraph-text': HTMLHyParagraphTextElement;
     'hy-person-card': HTMLHyPersonCardElement;
     'hy-process': HTMLHyProcessElement;
@@ -1803,6 +1823,13 @@ declare namespace LocalJSX {
      */
     size?: SiteLogoSize;
   }
+  interface HyPager {}
+  interface HyPagerItem {
+    itemLabel?: string;
+    itemUrl?: string;
+    scAriaLabel?: string;
+    variant?: PaginationItemVariants;
+  }
   interface HyParagraphText {
     headerstyle?: string;
     placement?: string;
@@ -2035,6 +2062,8 @@ declare namespace LocalJSX {
     'hy-menu-level-container': HyMenuLevelContainer;
     'hy-menu-mobile-breadcrumb': HyMenuMobileBreadcrumb;
     'hy-menu-sidebar': HyMenuSidebar;
+    'hy-pager': HyPager;
+    'hy-pager-item': HyPagerItem;
     'hy-paragraph-text': HyParagraphText;
     'hy-person-card': HyPersonCard;
     'hy-process': HyProcess;
@@ -2129,6 +2158,8 @@ declare module '@stencil/core' {
       'hy-menu-mobile-breadcrumb': LocalJSX.HyMenuMobileBreadcrumb &
         JSXBase.HTMLAttributes<HTMLHyMenuMobileBreadcrumbElement>;
       'hy-menu-sidebar': LocalJSX.HyMenuSidebar & JSXBase.HTMLAttributes<HTMLHyMenuSidebarElement>;
+      'hy-pager': LocalJSX.HyPager & JSXBase.HTMLAttributes<HTMLHyPagerElement>;
+      'hy-pager-item': LocalJSX.HyPagerItem & JSXBase.HTMLAttributes<HTMLHyPagerItemElement>;
       'hy-paragraph-text': LocalJSX.HyParagraphText & JSXBase.HTMLAttributes<HTMLHyParagraphTextElement>;
       'hy-person-card': LocalJSX.HyPersonCard & JSXBase.HTMLAttributes<HTMLHyPersonCardElement>;
       'hy-process': LocalJSX.HyProcess & JSXBase.HTMLAttributes<HTMLHyProcessElement>;

src/components/icon/readme.md

@@ -39,6 +39,7 @@
 - [hy-menu-level-container](../navigation/menu-level-container)
 - [hy-menu-mobile-breadcrumb](../navigation/menu-mobile-breadcrumb)
 - [hy-menu-sidebar](../navigation/menu-sidebar)
+- [hy-pager-item](../pagination/hy-pager-item)
 - [hy-person-card](../hy-person-card)
 - [hy-quote](../hy-quote)
 - [hy-search-field](../hy-search-field)
@@ -78,6 +79,7 @@ graph TD;
   hy-menu-level-container --> hy-icon
   hy-menu-mobile-breadcrumb --> hy-icon
   hy-menu-sidebar --> hy-icon
+  hy-pager-item --> hy-icon
   hy-person-card --> hy-icon
   hy-quote --> hy-icon
   hy-search-field --> hy-icon

src/components/pagination/hy-pager-item/hy-pager-item.scss

+:host {
+  display: block;
+}
+
+.hy-pager__item {
+  @include font-size(14px, 24px);
+  @include font-weight($bold);
+  align-items: center;
+  background-color: var(--brand-main-light);
+  color: var(--grayscale-white);
+  display: flex;
+  flex-direction: row;
+  font-family: var(--main-font-family);
+  justify-content: center;
+  letter-spacing: -0.4px;
+  margin-bottom: 4px;
+  margin-right: 8px;
+  min-height: 36px;
+  min-width: 36px;
+  text-align: center;
+
+  @include breakpoint($wide) {
+    margin-right: 6px;
+    min-height: 40px;
+    min-width: 40px;
+  }
+
+  a {
+    @include font-size(14px, 24px);
+    @include font-weight($bold);
+    align-items: center;
+    color: var(--grayscale-white);
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    letter-spacing: -0.4px;
+    min-height: 36px;
+    min-width: 36px;
+    text-decoration: none;
+
+    @include breakpoint($wide) {
+      @include font-size(16px, 24px);
+      letter-spacing: -0.5px;
+      min-height: 40px;
+      min-width: 40px;
+    }
+  }
+
+  &__current {
+    background-color: var(--grayscale-white);
+    box-sizing: border-box;
+    border: 2px solid var(--grayscale-black);
+    a {
+      color: var(--brand-main-nearly-black);
+
+      @include breakpoint($wide) {
+        @include font-size(18px, 24px);
+        letter-spacing: -0.56px;
+      }
+    }
+  }
+
+  &__next,
+  &__previous {
+    a {
+      padding: 7px 12px 5px 12px;
+
+      @include breakpoint($wide) {
+        padding: 8px 12px;
+      }
+    }
+
+    .hy-icon-wrapper {
+      margin: 0 4px;
+      @include breakpoint($wide) {
+        margin: 0 6px;
+      }
+
+      svg {
+        fill: var(--grayscale-white);
+      }
+    }
+  }
+}

src/components/pagination/hy-pager-item/hy-pager-item.tsx

+import {Component, h, Prop} from '@stencil/core';
+import {PaginationItemVariants} from '../../../utils/utils';
+
+@Component({
+  tag: 'hy-pager-item',
+  styleUrl: 'hy-pager-item.scss',
+  shadow: true,
+})
+export class HyPagerItem {
+  @Prop() variant: PaginationItemVariants = PaginationItemVariants.default;
+  @Prop() itemLabel?: string;
+  @Prop() itemUrl?: string;
+  @Prop() scAriaLabel?: string;
+
+  render() {
+    let classAttributes = ['hy-pager__item'].join(' ');
+    switch (this.variant) {
+      case PaginationItemVariants.current: {
+        classAttributes = ['hy-pager__item', 'hy-pager__item__current'].join(' ');
+        return (
+          <li class={classAttributes}>
+            <a href={this.itemUrl} aria-current="true">
+              {this.itemLabel}
+            </a>
+          </li>
+        );
+      }
+      case PaginationItemVariants.next: {
+        classAttributes = ['hy-pager__item', 'hy-pager__item__next'].join(' ');
+        const iconClassAttributes = ['link-icon'].join(' ');
+        return (
+          <li class={classAttributes}>
+            <a href={this.itemUrl} aria-label={this.scAriaLabel}>
+              {this.itemLabel}
+              <span class={'hy-icon-wrapper'}>
+                <div class={iconClassAttributes}>
+                  <hy-icon icon={'hy-icon-arrow-to-right'} size={12} />
+                </div>
+              </span>
+            </a>
+          </li>
+        );
+      }
+      case PaginationItemVariants.previous: {
+        classAttributes = ['hy-pager__item', 'hy-pager__item__previous'].join(' ');
+        const iconClassAttributes = ['link-icon'].join(' ');
+        return (
+          <li class={classAttributes}>
+            <a href={this.itemUrl} aria-label={this.scAriaLabel}>
+              <span class={'hy-icon-wrapper'}>
+                <div class={iconClassAttributes}>
+                  <hy-icon icon={'hy-icon-arrow-left'} size={12} />
+                </div>
+              </span>
+              {this.itemLabel}
+            </a>
+          </li>
+        );
+      }
+      case PaginationItemVariants.ellipsis: {
+        classAttributes = ['hy-pager__item', 'hy-pager__item__ellipsis'].join(' ');
+        return <li class={classAttributes}>...</li>;
+      }
+      default: {
+        classAttributes = ['hy-pager__item'].join(' ');
+        return (
+          <li class={classAttributes}>
+            <a href={this.itemUrl} aria-label={this.scAriaLabel}>
+              {this.itemLabel}
+            </a>
+          </li>
+        );
+      }
+    }
+  }
+}

src/components/pagination/hy-pager-item/readme.md

+# hy-pager-item
+
+<!-- Auto Generated Below -->
+
+## Properties
+
+| Property      | Attribute       | Description | Type                                                                                                                                                                    | Default                          |
+| ------------- | --------------- | ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- |
+| `itemLabel`   | `item-label`    |             | `string`                                                                                                                                                                | `undefined`                      |
+| `itemUrl`     | `item-url`      |             | `string`                                                                                                                                                                | `undefined`                      |
+| `scAriaLabel` | `sc-aria-label` |             | `string`                                                                                                                                                                | `undefined`                      |
+| `variant`     | `variant`       |             | `PaginationItemVariants.current \| PaginationItemVariants.default \| PaginationItemVariants.ellipsis \| PaginationItemVariants.next \| PaginationItemVariants.previous` | `PaginationItemVariants.default` |
+
+## Dependencies
+
+### Depends on
+
+- [hy-icon](../../icon)
+
+### Graph
+
+```mermaid
+graph TD;
+  hy-pager-item --> hy-icon
+  style hy-pager-item fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+---
+
+Helsinki University Design System

src/components/pagination/hy-pager/hy-pager.scss

+:host {
+  display: block;
+}
+
+.hy-pager {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  flex-direction: row;
+  flex-wrap: wrap;
+  font-family: var(--main-font-family);
+  list-style: none;
+}

src/components/pagination/hy-pager/hy-pager.tsx

+import {Component, h} from '@stencil/core';
+
+@Component({
+  tag: 'hy-pager',
+  styleUrl: 'hy-pager.scss',
+  shadow: true,
+})
+export class HyPager {
+  render() {
+    const classAttributes = ['hy-pager'].join(' ');
+
+    return (
+      <ul class={classAttributes}>
+        <slot></slot>
+      </ul>
+    );
+  }
+}

src/components/pagination/hy-pager/readme.md

+# hy-pager
+
+<!-- Auto Generated Below -->
+
+---
+
+Helsinki University Design System

src/index.html

@@ -178,6 +178,41 @@
           sc-label="Aria label"
         ></hy-hero>
 
+        <hy-paragraph-text>
+          THIS IS Pagination
+        </hy-paragraph-text>
+        <hy-pager>
+          <hy-pager-item
+            variant="previous"
+            item-label="Previous"
+            item-url="https://helsinki.fi/sv/utbildning/program?page=1"
+          >
+          </hy-pager-item>
+          <hy-pager-item variant="current" item-label="1" item-url="https://helsinki.fi/sv/utbildning/program">
+          </hy-pager-item>
+          <hy-pager-item
+            item-label="2"
+            item-url="https://helsinki.fi/sv/utbildning/program?page=1"
+            sc-aria-label="Go to page 2"
+          >
+          </hy-pager-item>
+          <hy-pager-item
+            item-label="3"
+            item-url="https://helsinki.fi/sv/utbildning/program?page=2"
+            sc-aria-label="Go to page 3"
+          >
+          </hy-pager-item>
+          <hy-pager-item
+            item-label="4"
+            item-url="https://helsinki.fi/sv/utbildning/program?page=3"
+            sc-aria-label="Go to page 4"
+          >
+          </hy-pager-item>
+          <hy-pager-item variant="ellipsis" item-label="..."> </hy-pager-item>
+          <hy-pager-item variant="next" item-label="Next" item-url="https://helsinki.fi/sv/utbildning/program?page=1">
+          </hy-pager-item>
+        </hy-pager>
+
         <hy-paragraph-text>
           THIS IS MAIN CONTENT
         </hy-paragraph-text>

src/utils/utils.ts

@@ -78,6 +78,14 @@ export enum PersonCardVariants {
   searchPanel = 'search-panel',
 }
 
+export enum PaginationItemVariants {
+  default = 'default',
+  current = 'current',
+  previous = 'previous',
+  next = 'next',
+  ellipsis = 'ellipsis',
+}
+
 export enum GridColumnsSm {
   columnsSm1 = '1',
   columnsSm2 = '2',