Accounts upcoming

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

@@ -80,9 +80,9 @@ export class AppElement extends LitElement {
 
   private handleKeyDown = (event: KeyboardEvent) => {
     if (event.key === '\\') {
-      const themeElement = this.querySelector('[gds-element="gds-theme"]')
+      const themeElement = this.querySelector('html')
       if (themeElement) {
-        const currentScheme = themeElement.getAttribute('color-scheme')
+        const currentScheme = themeElement.getAttribute('gds-theme')
         themeElement.setAttribute(
           'color-scheme',
           currentScheme === 'light' ? 'dark' : 'light'

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

@@ -3,15 +3,24 @@ import { customElement } from 'lit/decorators.js'
 
 import { html } from '@sebgroup/green-core/scoping'
 
+import '@sebgroup/green-core/components/badge/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/icon/icons/arrow-left-right.js'
 import '@sebgroup/green-core/components/icon/icons/plus-large.js'
 import '@sebgroup/green-core/components/icon/icons/calendar.js'
+import '@sebgroup/green-core/components/icon/icons/chevron-right.js'
+import '@sebgroup/green-core/components/icon/icons/credit-card.js'
+import '@sebgroup/green-core/components/icon/icons/knife-spoon.js'
+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 './dashboard.css'
+import '../../components/accounts'
+import '../../common/card'
+import '../../common/list-item'
 
 @customElement('gds-dashboard')
 export class CardExample extends LitElement {
@@ -48,7 +57,107 @@ export class CardExample extends LitElement {
           </gds-flex>
         </gds-flex>
         <gds-grid columns="3" gap="xl">
-          <gds-card>[CONTENT GOES HERE]</gds-card>
+          <tp-card>
+            <!-- Header -->
+            <gds-text slot="header" font-size="heading-s">Konton</gds-text>
+            <gds-button slot="action" size="small" rank="tertiary">
+              <gds-icon-dot-grid-one-horizontal></gds-icon-dot-grid-one-horizontal>
+            </gds-button>
+            <!-- /Header -->
+            <tp-list-item>
+              <gds-icon-credit-card
+                width="20"
+                height="20"
+                slot="icon"
+              ></gds-icon-credit-card>
+              <gds-flex
+                flex-direction="column"
+                gap="xs"
+                border="0 0 4xs/primary 0"
+                padding="0 0 m 0"
+                flex="1"
+              >
+                <gds-flex align-items="center" justify-content="space-between">
+                  <gds-flex flex-direction="column">
+                    <gds-text font-size="detail-m">John Doe</gds-text>
+                    <gds-text font-size="detail-s" color="secondary">
+                      5896 13 000 20
+                    </gds-text>
+                  </gds-flex>
+                  <gds-flex flex-direction="column" align-items="flex-end">
+                    <gds-text font-size="detail-m">10 000,00</gds-text>
+                    <gds-text font-size="detail-s" color="secondary">
+                      5 december
+                    </gds-text>
+                  </gds-flex>
+                </gds-flex>
+                <gds-badge variant="warning">
+                  Det saknas pengar för nästa dragning.
+                </gds-badge>
+              </gds-flex>
+            </tp-list-item>
+            <tp-list-item>
+              <gds-icon-arrow-out-of-box
+                width="20"
+                height="20"
+                slot="icon"
+              ></gds-icon-arrow-out-of-box>
+              <gds-flex
+                flex-direction="column"
+                gap="xs"
+                border="0 0 4xs/primary 0"
+                padding="0 0 m 0"
+                flex="1"
+              >
+                <gds-flex align-items="center" justify-content="space-between">
+                  <gds-flex flex-direction="column">
+                    <gds-text font-size="detail-m">John Doe</gds-text>
+                    <gds-text font-size="detail-s" color="secondary">
+                      5896 13 000 20
+                    </gds-text>
+                  </gds-flex>
+                  <gds-flex flex-direction="column" align-items="flex-end">
+                    <gds-text font-size="detail-m">47 300,00</gds-text>
+                    <gds-text font-size="detail-s" color="secondary">
+                      5 december
+                    </gds-text>
+                  </gds-flex>
+                </gds-flex>
+              </gds-flex>
+            </tp-list-item>
+            <tp-list-item>
+              <gds-icon-knife-spoon
+                width="20"
+                height="20"
+                slot="icon"
+              ></gds-icon-knife-spoon>
+              <gds-flex
+                flex-direction="column"
+                gap="xs"
+                border="0 0 4xs/primary 0"
+                padding="0 0 m 0"
+                flex="1"
+              >
+                <gds-flex align-items="center" justify-content="space-between">
+                  <gds-flex flex-direction="column">
+                    <gds-text font-size="detail-m">John Doe</gds-text>
+                    <gds-text font-size="detail-s" color="secondary">
+                      5896 13 000 20
+                    </gds-text>
+                  </gds-flex>
+                  <gds-flex flex-direction="column" align-items="flex-end">
+                    <gds-text font-size="detail-m">2 010 000,00</gds-text>
+                    <gds-text font-size="detail-s" color="secondary">
+                      5 december
+                    </gds-text>
+                  </gds-flex>
+                </gds-flex>
+              </gds-flex>
+            </tp-list-item>
+
+            <!-- Footer -->
+            <gds-button slot="footer">Se alla</gds-button>
+          </tp-card>
           <gds-card>[CONTENT GOES HERE]</gds-card>
           <gds-jit></gds-jit>
         </gds-grid>

apps/core-lib-dev/src/common/card.ts

@@ -0,0 +1,36 @@
+import { LitElement } from 'lit'
+import { customElement } from 'lit/decorators.js'
+
+import { html } from '@sebgroup/green-core/scoping'
+
+import '@sebgroup/green-core/components/card/index.js'
+import '@sebgroup/green-core/components/flex/index.js'
+import '@sebgroup/green-core/components/text/index.js'
+import '@sebgroup/green-core/components/button/index.js'
+import '@sebgroup/green-core/components/icon/icons/dot-grid-one-horizontal.js'
+
+@customElement('tp-card')
+export class TPCard extends LitElement {
+  connectedCallback() {
+    super.connectedCallback()
+  }
+
+  render() {
+    return html`
+      <gds-card>
+        <gds-flex flex-direction="column" gap="xl">
+          <gds-flex justify-content="space-between" align-items="center">
+            <slot name="header"></slot>
+            <slot name="action"></slot>
+          </gds-flex>
+          <gds-flex flex-direction="column" gap="m">
+            <slot></slot>
+          </gds-flex>
+          <gds-flex justify-content="flex-start" align-items="center">
+            <slot name="footer"></slot>
+          </gds-flex>
+        </gds-flex>
+      </gds-card>
+    `
+  }
+}

apps/core-lib-dev/src/common/list-item.ts

@@ -0,0 +1,45 @@
+import { LitElement } from 'lit'
+import { customElement } from 'lit/decorators.js'
+
+import { html } from '@sebgroup/green-core/scoping'
+
+import '@sebgroup/green-core/components/card/index.js'
+import '@sebgroup/green-core/components/flex/index.js'
+import '@sebgroup/green-core/components/text/index.js'
+import '@sebgroup/green-core/components/button/index.js'
+import '@sebgroup/green-core/components/icon/icons/dot-grid-one-horizontal.js'
+
+@customElement('tp-list-item')
+export class TPCard extends LitElement {
+  connectedCallback() {
+    super.connectedCallback()
+  }
+
+  render() {
+    return html`
+      <gds-flex gap="s">
+        <gds-flex>
+          <gds-flex
+            level="3"
+            width="40px"
+            height="40px"
+            background="secondary"
+            border-radius="max"
+            align-items="center"
+            justify-content="center"
+          >
+            <slot name="icon"></slot>
+          </gds-flex>
+        </gds-flex>
+        <gds-flex flex="1">
+          <slot></slot>
+        </gds-flex>
+        <gds-flex>
+          <gds-button size="small" rank="tertiary">
+            <gds-icon-chevron-right></gds-icon-chevron-right>
+          </gds-button>
+        </gds-flex>
+      </gds-flex>
+    `
+  }
+}

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

@@ -0,0 +1,30 @@
+import { LitElement } from 'lit'
+import { customElement } from 'lit/decorators.js'
+
+import { html } from '@sebgroup/green-core/scoping'
+
+import '@sebgroup/green-core/components/card/index.js'
+import '@sebgroup/green-core/components/flex/index.js'
+import '@sebgroup/green-core/components/text/index.js'
+import '@sebgroup/green-core/components/button/index.js'
+import '@sebgroup/green-core/components/icon/icons/dot-grid-one-horizontal.js'
+
+@customElement('gds-accounts')
+export class GdsAccounts extends LitElement {
+  connectedCallback() {
+    super.connectedCallback()
+  }
+
+  render() {
+    return html`
+      <gds-card>
+        <gds-flex align-items="center" justify-content="space-between">
+          <gds-text>Konton</gds-text>
+          <gds-button rank="tertiary">
+            <gds-icon-dot-grid-one-horizontal></gds-icon-dot-grid-one-horizontal>
+          </gds-button>
+        </gds-flex>
+      </gds-card>
+    `
+  }
+}