feat(Card): add remaining card features

Also adds new CountBadge and InfoIcon utility components

Author: Neunerlei

src/lib/_style/_fonts.sass

@@ -46,6 +46,10 @@
 =fontColorDark
   color: var(--clr-primary-dark)
 
+
+=fontColorMedium
+  color: var(--clr-primary-medium)
+
 =fontColorLight
   color: var(--clr-primary-white)
 

src/lib/card/Card.module.sass

@@ -1,4 +1,5 @@
 .card
+  position: relative
   border: 1px solid var(--clr-primary-dark-10)
   border-radius: 6px
   padding: 20px
@@ -9,7 +10,6 @@
     outline: 2px solid var(--clr-signal-focused)
     outline-offset: -1px
 
-
   &.link
     cursor: pointer
 
@@ -20,8 +20,25 @@
       border: 1px solid var(--clr-primary-dark-10)
       background: var(--clr-primary-dark-10-faded)
 
-
   &.disabled
     opacity: 0.5
     pointer-events: none
     cursor: not-allowed
+
+.infoIcon
+  position: absolute
+  top: 4px
+  right: 4px
+
+.infoText
+  position: absolute
+  top: 7px
+  right: 12px
+  +fontBody
+  +fontColorMedium
+  +fontSizeXs
+
+.countBadge
+  position: absolute
+  right: 4px
+  bottom: 4px

src/lib/card/Card.stories.svelte

@@ -3,7 +3,6 @@
   import {Card} from '$lib';
   import {defineMeta} from '@storybook/addon-svelte-csf';
 
-
   const {Story} = defineMeta({
     title: 'Handson/Card',
     component: Card,
@@ -18,6 +17,16 @@
 {/snippet}
 <Story name="Generic" args={{children: content}}/>
 <Story name="Disabled" args={{disabled: true, link: 'https://hawk.de', linkTarget: '_blank', children: content}}/>
+<Story name="Info Action"
+       args={{
+         oninfoclick: fn(),
+         infoTitle: 'Get more information',
+         children: content,
+         // Also enable the link, to check if the info icon does not interfere with it
+         link: 'https://hawk.de',
+         linkTarget: '_blank'}}/>
+<Story name="Info Text" args={{infoText: '11:33 Uhr', children: content}}/>
+<Story name="Count" args={{count: 3, countTitle: 'Zahl der neuen Beiträge', children: content}}/>
 
 {#snippet linkCardContent()}
   You can assign a link to a card, which will make it clickable and focusable like a button.

src/lib/card/Card.svelte

@@ -2,6 +2,8 @@
     import type {HTMLAttributes} from 'svelte/elements';
     import style from './Card.module.sass';
     import {mergeProps} from '$lib/util/mergeProps.js';
+    import InfoIcon from '$lib/util/infoIcon/InfoIcon.svelte';
+    import CountBadge from '$lib/util/countBadge/CountBadge.svelte';
 
     export interface Props extends HTMLAttributes<HTMLDivElement> {
         /**
@@ -18,6 +20,37 @@
          * If true, the card will be disabled and not clickable.
          */
         disabled?: boolean;
+
+        /**
+         * If given, an "info" icon will be shown in the top right corner of the card.
+         */
+        oninfoclick?: () => void;
+
+        /**
+         * An optional title to show when hovering the info icon.
+         * This is only relevant if `oninfoclick` is set.
+         */
+        infoTitle?: string;
+
+        /**
+         * An optional text to show in the top right corner of the card.
+         * Note, you can only set either `oninfoclick` or `infoText`, not both.
+         * If both are present, `oninfoclick` will take precedence and `infoText` will be ignored.
+         */
+        infoText?: string;
+
+        /**
+         * An optional count to show in the bottom right corner of the card.
+         * This is useful to show the number of items related to the card.
+         */
+        count?: number;
+
+        /**
+         * An optional title to show when hovering the count badge.
+         * This is useful to provide additional context for the count.
+         * This is only relevant if `count` is set.
+         */
+        countTitle?: string;
     }
 
     let {
@@ -26,6 +59,11 @@
         linkTarget,
         onclick: givenOnClick,
         disabled = false,
+        oninfoclick,
+        infoTitle,
+        infoText,
+        count,
+        countTitle,
         ...restProps
     }: Props = $props();
 
@@ -59,5 +97,24 @@
     },
     restProps
 )}>
+    {#if oninfoclick}
+        <InfoIcon
+                class={style.infoIcon}
+                onclick={(e) => {
+                    e.stopPropagation();
+                    oninfoclick();
+                }}
+                onkeydown={(e) => e.stopPropagation()}
+                title={infoTitle}/>
+    {:else if infoText}
+        <span class={style.infoText}>
+            {infoText}
+        </span>
+    {/if}
+
     {@render children?.()}
+
+    {#if count}
+        <CountBadge count={count} class={style.countBadge} title={countTitle}/>
+    {/if}
 </div>

src/lib/index.ts

@@ -28,3 +28,5 @@ export {default as Card} from '$lib/card/Card.svelte';
 export {default as CardWithImage} from '$lib/card/CardWithImage.svelte';
 export {default as CardRadioGroup} from '$lib/radio-card/RadioCardGroup.svelte';
 export {default as CardRadio} from '$lib/radio-card/RadioCard.svelte';
+export {default as CountBadge} from '$lib/util/countBadge/CountBadge.svelte';
+export {default as InfoIcon} from '$lib/util/infoIcon/InfoIcon.svelte';

src/lib/input/InputPassword.stories.svelte

@@ -1,6 +1,6 @@
 <script module>
     import {defineMeta} from '@storybook/addon-svelte-csf';
-    import InputPassword from './InputPassword.svelte';
+    import {InputPassword} from '$lib';
 
     const {Story} = defineMeta({
         title: 'Handson/InputPassword',

src/lib/util/countBadge/CountBadge.module.sass

@@ -0,0 +1,11 @@
+.badge
+  display: inline-block
+  width: fit-content
+  +fontBody
+  +fontSizeXs
+  +fontColorLight
+  padding: 2px 6px
+  background: var(--count-badge-gradient, linear-gradient(90deg, var(--clr-gradient-start) 0%, var(--clr-gradient-end) 100%))
+  border-radius: 20px
+  height: 18px
+  line-height: 15px

src/lib/util/countBadge/CountBadge.stories.svelte

@@ -0,0 +1,22 @@
+<script module>
+    import {defineMeta} from '@storybook/addon-svelte-csf';
+    import {CountBadge} from '$lib';
+
+    const {Story} = defineMeta({
+        title: 'Handson/Util/CountBadge',
+        component: CountBadge,
+        tags: ['autodocs'],
+        argTypes: {},
+        args: {}
+    });
+</script>
+
+<Story name="Generic" args={{}} parameters={{controls: {disable: true}}}>
+    <div style="display: flex; gap: 1rem; flex-direction: column">
+        <CountBadge count={5}/>
+        <CountBadge count={-3}/>
+        <CountBadge count={0}/>
+        <CountBadge count={100}/>
+        <CountBadge count={10000}/>
+    </div>
+</Story>

src/lib/util/countBadge/CountBadge.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+    import type {HTMLAttributes} from 'svelte/elements';
+    import {mergeProps} from '$lib/util/mergeProps.js';
+    import style from 'CountBadge.module.sass';
+
+    interface Props extends HTMLAttributes<HTMLSpanElement> {
+        /**
+         * The count to display in the badge.
+         */
+        count: number;
+    }
+
+    const {
+        count = 0,
+        ...restProps
+    }: Props = $props();
+
+    const countFormatted = $derived.by(() => {
+        const absCount = Math.abs(count);
+        return absCount >= 1000 ? absCount.toLocaleString() : absCount.toString();
+    });
+</script>
+
+<span {...mergeProps(
+    {
+        class: [style.badge]
+    },
+    restProps
+)}>{countFormatted}</span>

src/lib/util/infoIcon/InfoIcon.module.sass

@@ -0,0 +1,15 @@
+.button
+  display: inline-block
+  padding: 0
+  margin: 0
+  background: none
+  border: 0
+  outline: 0
+  cursor: pointer
+
+  &:focus
+    .icon
+      color: var(--info-icon-color-focus, var(--clr-signal-focused))
+
+.icon
+  color: var(--info-icon-color, var(--clr-primary-medium))