todos

apps/core-lib-dev/src/app/app.element.ts

@@ -33,8 +33,7 @@ import '@sebgroup/green-core/components/menu-button/index.js'
 import '@sebgroup/green-core/components/segmented-control/index.js'
 
 import '../components/header'
-import '../components/quicklinks'
-import '../components/news-widget'
+
 import './chlorophyll.scss'
 import './form-validation.element'
 import './datepicker.element'

apps/core-lib-dev/src/app/dashboard/dashboard.element.ts

@@ -22,6 +22,8 @@ import '@sebgroup/green-core/components/icon/icons/arrow-out-of-box.js'
 import '@sebgroup/green-core/components/mask/mask.js'
 import '@sebgroup/green-core/components/icon/icons/chevron-bottom.js'
 import '../../components/jit'
+import '../../components/news-widget'
+import '../../components/todos'
 import './dashboard.css'
 import '../../components/savings-outside'
 import '../../components/savings-goal'
@@ -67,9 +69,10 @@ export class CardExample extends LitElement {
             </gds-button>
           </gds-flex>
         </gds-flex>
-        <gds-grid columns="3" gap="xl">
+        <gds-grid columns="1; s{3}" gap="xl">
           <tp-transactions></tp-transactions>
           <tp-accounts></tp-accounts>
+          <tp-todos></tp-todos>
           <tp-cards></tp-cards>
           <gds-carousel-trans></gds-carousel-trans>
           <gds-flex flex-direction="column" gap="m">

apps/core-lib-dev/src/app/theme-page/theme-page.element.ts

@@ -20,6 +20,7 @@ import '../../components/carousel-pink'
 import '../../components/savings-outside'
 import '../../components/news-widget'
 import '../../components/savings-calculator'
+import '../../components/todos'
 import './style.css'
 import { PageHeader } from './page-header'
 
@@ -76,9 +77,7 @@ export class ThemePage extends LitElement {
               flex-direction="column"
               gap="l"
               >
-              <gds-card variant="notice" height="220px" border="4xs"
-              >Todo</gds-card
-              >
+              <tp-todos></tp-todos>
               <gds-jit></gds-jit>
             </gds-flex>
           </gds-grid>

apps/core-lib-dev/src/components/todos.ts

@@ -0,0 +1,183 @@
+/* eslint-disable @nx/enforce-module-boundaries */
+import {  LitElement } from 'lit'
+import { customElement, property, query } from 'lit/decorators.js'
+
+import {ref} from 'lit/directives/ref.js';
+
+import { html } from '@sebgroup/green-core/scoping'
+
+import '@sebgroup/green-core/components/theme/index.js'
+import '@sebgroup/green-core/components/card/index.js'
+import '@sebgroup/green-core/components/flex/index.js'
+import '@sebgroup/green-core/components/grid/index.js'
+import '@sebgroup/green-core/components/text/index.js'
+import '@sebgroup/green-core/components/link/index.js'
+import '@sebgroup/green-core/components/icon/icons/wallet.js'
+
+import { viewportBreakpoints } from '../../../../libs/core/src/utils/helpers/style-expression-parser'
+import { GdsLink } from '@sebgroup/green-core/components/link/index.js'
+
+type Todo = {
+  text: string
+  url: string
+}
+
+const todos: Todo[] = [
+  {
+    text: 'Todo 1',
+    url: '#',
+  },
+  {
+    text: 'Todo 2',
+    url: '#',
+  },
+  {
+    text: 'Todo 3',
+    url: '#',
+  },
+  {
+    text: 'Todo 1',
+    url: '#',
+  },
+]
+
+
+@customElement('tp-todos')
+export class TpTodos extends LitElement {
+  @property({ type: Boolean })
+  accessor expanded = !window.matchMedia(`(max-width: ${viewportBreakpoints.s})`).matches
+
+  @query(".todo")
+  accessor todo: GdsLink | undefined
+
+  connectedCallback() {
+    super.connectedCallback()
+  }
+
+  renderTodo(todo: Todo) {
+    return html`<gds-card
+      variant="primary; hover: information"
+      width="100%"
+      padding="m"
+      shadow="s"
+    >
+      <gds-flex gap="m" align-items="center">
+        <gds-card class="icon" level="3" variant="tertiary" border-radius="max" padding="s" justify-content="center" align-items="center">
+          <gds-icon-wallet height="20" width="20"></gds-icon-wallet>
+        </gds-card>
+        <gds-text font-size="detail-m" margin="0 auto 0 0">${todo.text}</gds-text>
+        <gds-icon-chevron-right></gds-icon-chevron-right>
+      </gds-flex>
+    </gds-card>`
+  }
+
+  #handleClick(){
+    if(!this.expanded){
+      this.expanded = true
+    }
+  }
+
+  #handleClickButton(){
+    this.expanded = !this.expanded
+  }
+
+  firstUpdated() {
+    setTimeout(() => {
+      this.style.setProperty("--todo-height", `${this.todo.getBoundingClientRect().height}px`)
+  }, 0)
+  }
+
+  onRef(ref?: GdsLink){
+
+    if(ref){
+
+    ref.classList.add("loaded")
+    }
+  }
+
+
+  render() {
+    return html` <style>
+      :host{
+        --duration: 1s;
+        --todo-height: 83px
+      }
+
+      .stack{
+        cursor: pointer;
+        pointer-events: all;
+
+        transition: max-height var(--duration);
+        max-height: 108px; 
+      }
+
+      .stack[aria-expanded='true']{
+        cursor: default;
+        pointer-events: none;
+        max-height: calc(calc(var(--gds-space-m, 0) * ${todos.length -1 }) + calc(var(--todo-height, 0) * ${todos.length }));
+      }
+
+      .todo.loaded{
+        transition: all var(--duration);
+      }
+
+      .todo {
+        height: 100%;
+        width: 100%;
+          z-index: calc(${todos.length} - var(--todo-index));
+          pointer-events: none;
+
+          transform: 
+            translateY(calc(calc(calc(var(--gds-space-m, 0)/ 2) * var(--todo-index, 0) * -1) + calc(var(--todo-height, 0) * var(--todo-index, 0) * -1) )) 
+            scale(calc(1 + calc(var(--todo-index, 0) * -0.01 )))
+            perspective(1500px)
+        }
+
+
+
+        [aria-expanded='true'] .todo{
+          transform: translateY(0) scale(1) perspective(none);
+          pointer-events: all
+        }
+
+        .expand-button{
+          border: none;
+          background: transparent;
+          cursor: pointer
+        }
+
+        .todo:hover .icon{
+          background-color: var(--gds-color-l2-background-primary);
+        }
+      </style>
+      <gds-flex flex-direction="column" gap="m">
+          <gds-flex justify-content="space-between">
+            <gds-text tag="h2" font-size="detail-m">Att göra</gds-text>
+            <button 
+            class="expand-button"
+            @click="${this.#handleClickButton}"><gds-text font-size="detail-m">${this.expanded ? "Visa färre" : "Visa allt"}</gds-text></button>
+          </gds-flex>
+
+          <gds-flex
+            @click="${this.#handleClick}"
+            class="stack"
+            flex-direction="column"
+            gap="m"
+            aria-expanded="${this.expanded}"
+          >
+            ${todos.map(
+              (todo, index) =>
+                html`<gds-link
+                  class="todo"
+                  style="--todo-index: ${index};"
+                  href="${todo.url}"
+                  variant="hidden"
+                  ${ref(this.onRef)}
+                >
+                  ${this.renderTodo(todo)}
+                </gds-link>`,
+            )}</gds-flex
+          >
+        </gds-flex>`
+  }
+}

libs/core/src/components/link/link.styles.ts

@@ -32,6 +32,10 @@ const style = css`
           text-decoration: underline;
         }
       }
+
+      &.hidden {
+        text-decoration: none;
+      }
     }
   }
 `

libs/core/src/components/link/link.ts

@@ -57,7 +57,7 @@ export class GdsLink extends GdsElement {
    * Defines the link variants
    */
   @property()
-  variant: 'default' | 'secondary' = 'default'
+  variant: 'default' | 'secondary' | 'hidden' = 'default'
 
   constructor() {
     super()
@@ -66,6 +66,7 @@ export class GdsLink extends GdsElement {
   render() {
     const CLASSES = {
       secondary: this.variant === 'secondary',
+      hidden: this.variant === 'hidden',
     }
 
     return staticHtml`

libs/core/src/utils/helpers/style-expression-parser.ts

@@ -6,7 +6,7 @@ type BreakpointValues = { sel: string; values: string[] }
 type BreakpointData = { breakpoint: string; values: BreakpointValues[] }
 type BreakpointTree = BreakpointData[]
 
-const viewportBreakpoints: Record<string, string> = {
+export const viewportBreakpoints: Record<string, string> = {
   '0': '0px',
   '2xs': '320px',
   xs: '425px',