From 823dfd99fa433325752525ac42ead2f4ec68d4bf Mon Sep 17 00:00:00 2001 From: rebalv Date: Wed, 22 Oct 2025 11:32:26 +0200 Subject: [PATCH 01/16] #1076 - feat: first simple version of card --- packages/lib/components/card/card.stories.ts | 41 ++++ packages/lib/components/card/card.ts | 203 +++++++++++++++++++ 2 files changed, 244 insertions(+) create mode 100644 packages/lib/components/card/card.stories.ts create mode 100644 packages/lib/components/card/card.ts diff --git a/packages/lib/components/card/card.stories.ts b/packages/lib/components/card/card.stories.ts new file mode 100644 index 0000000..92ab6eb --- /dev/null +++ b/packages/lib/components/card/card.stories.ts @@ -0,0 +1,41 @@ +import type { Meta, StoryObj } from '@storybook/web-components'; +import { html } from 'lit'; +import './card.js'; + +const meta: Meta = { + title: 'Components/Card', + component: 'cx-card', + parameters: { + layout: 'centered', + }, + argTypes: { + title: { control: 'text' }, + subtitle1: { control: 'text' }, + subtitle2: { control: 'text' }, + image: { control: 'text' }, + imageAlt: { control: 'text' }, + }, +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + args: { + title: 'Title', + subtitle1: '14:00 - 16:00', + subtitle2: 'Oslo, Norway', + image: 'https://picsum.photos/500/220', + imageAlt: 'Image', + }, + render: (args) => html` + + + `, +}; \ No newline at end of file diff --git a/packages/lib/components/card/card.ts b/packages/lib/components/card/card.ts new file mode 100644 index 0000000..7040edb --- /dev/null +++ b/packages/lib/components/card/card.ts @@ -0,0 +1,203 @@ +import { LitElement, html, css } from 'lit'; +import { customElement, property } from 'lit/decorators.js'; + +@customElement('cx-card') +export class Card extends LitElement { + static styles = css` + :host { + display: block; + } + + .card { + position: relative; + height: 440px; + width: 100%; + max-width: 500px; + border-radius: 24px; + overflow: hidden; + padding: 0; + border: none; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); + } + + .card-image { + width: 100%; + height: 50%; + position: relative; + } + + .card-image img, + .card-image ::slotted(img) { + width: 100%; + height: 100%; + object-fit: cover; + transition: filter 0.3s ease; + } + + .card-image::after { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + mix-blend-mode: multiply; + background: var(--cx-color-background-accent-5, #4a90e2); + opacity: 0; + transition: opacity 0.3s ease; + pointer-events: none; + } + + .card-info-wrapper { + position: absolute; + width: 100%; + bottom: -74px; + padding: var(--cx-spacing-6, 24px); + color: var(--cx-color-text-primary, #333); + transition: bottom 0.3s ease; + background-color: var(--cx-color-background-accent-1-soft, rgba(255, 255, 255, 0.9)); + } + + .card-info { + display: flex; + flex-direction: column; + } + + .card-metadata { + display: flex; + flex-wrap: wrap; + color: var(--cx-color-text-less-important, #666); + gap: var(--cx-spacing-2, 8px); + margin-bottom: var(--cx-spacing-4, 16px); + } + + .card-metadata-section { + display: inline-flex; + flex: 1 1 100%; + align-items: center; + gap: var(--cx-spacing-2, 8px); + } + + .card-title { + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; + line-clamp: 2; + max-height: 65px; + min-height: 65px; + overflow: hidden; + font-size: 24px; + font-weight: 400; + margin: 0; + line-height: 2rem; + align-content: center; + color: var(--cx-color-text-primary, #333); + } + + .card:hover .card-image img, + .card:hover .card-image ::slotted(img) { + filter: grayscale(1); + } + + .card:hover .card-image::after { + opacity: 1; + } + + .card:hover .card-info-wrapper { + bottom: 0; + } + + @media (max-width: 750px) { + .card { + display: flex; + flex-direction: row; + justify-content: flex-end; + width: 100%; + max-width: 343px; + height: auto; + min-height: unset; + max-height: unset; + } + + .card-image { + flex: 0 0 35%; + height: auto; + } + + .card-info-wrapper { + position: relative; + width: 65%; + bottom: unset; + align-self: flex-end; + padding: var(--cx-spacing-4, 16px); + } + + .card-info { + flex-direction: column-reverse; + gap: var(--cx-spacing-2, 8px); + } + + .card-metadata-section { + font-size: 12px; + } + + .card-title { + margin-top: unset; + min-height: unset; + font-size: 18px; + } + } + `; + + @property({ type: String, reflect: true }) + title = ''; + + @property({ type: String, reflect: true }) + subtitle1 = ''; + + @property({ type: String, reflect: true }) + subtitle2 = ''; + + @property({ type: String, reflect: true }) + image = ''; + + @property({ type: String, reflect: true }) + imageAlt = 'Card image'; + + render() { + return html` +
+
+ ${this.image ? html` + ${this.imageAlt} + ` : html` + + `} +
+
+
+
+ ${this.subtitle1 ? html` +
+ ${this.subtitle1} +
+ ` : ''} + ${this.subtitle2 ? html` +
+ ${this.subtitle2} +
+ ` : ''} +
+ ${this.title ? html`

${this.title}

` : ''} +
+
+
+ `; + } +} + +declare global { + interface HTMLElementTagNameMap { + 'cx-card': Card; + } +} \ No newline at end of file From 38c65fab720afaae1d1d06d0ac2df29070ca587e Mon Sep 17 00:00:00 2001 From: rebalv Date: Thu, 23 Oct 2025 12:10:42 +0200 Subject: [PATCH 02/16] #1067 - feat: added slots for other and subtitle + new css --- packages/lib/components/card/card.stories.ts | 16 +-- packages/lib/components/card/card.ts | 119 ++++++++----------- 2 files changed, 53 insertions(+), 82 deletions(-) diff --git a/packages/lib/components/card/card.stories.ts b/packages/lib/components/card/card.stories.ts index 92ab6eb..e646304 100644 --- a/packages/lib/components/card/card.stories.ts +++ b/packages/lib/components/card/card.stories.ts @@ -10,10 +10,7 @@ const meta: Meta = { }, argTypes: { title: { control: 'text' }, - subtitle1: { control: 'text' }, - subtitle2: { control: 'text' }, image: { control: 'text' }, - imageAlt: { control: 'text' }, }, }; @@ -23,19 +20,12 @@ type Story = StoryObj; export const Default: Story = { args: { title: 'Title', - subtitle1: '14:00 - 16:00', - subtitle2: 'Oslo, Norway', image: 'https://picsum.photos/500/220', - imageAlt: 'Image', }, render: (args) => html` - + + 14:00 - 16:00 • Oslo, Norway + Other content `, }; \ No newline at end of file diff --git a/packages/lib/components/card/card.ts b/packages/lib/components/card/card.ts index 7040edb..cfd43f5 100644 --- a/packages/lib/components/card/card.ts +++ b/packages/lib/components/card/card.ts @@ -15,25 +15,28 @@ export class Card extends LitElement { max-width: 500px; border-radius: 24px; overflow: hidden; - padding: 0; - border: none; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); + display: flex; + flex-direction: column; } .card-image { width: 100%; height: 50%; position: relative; + flex-shrink: 0; } .card-image img, - .card-image ::slotted(img) { + .card-image ::slotted(img), + .card-image ::slotted(video), + .card-image ::slotted(*) { width: 100%; height: 100%; object-fit: cover; transition: filter 0.3s ease; } + /* Blue filter on img for hover */ .card-image::after { content: ""; position: absolute; @@ -42,40 +45,30 @@ export class Card extends LitElement { width: 100%; height: 100%; mix-blend-mode: multiply; - background: var(--cx-color-background-accent-5, #4a90e2); + background: var(--cx-color-background-accent-5); opacity: 0; transition: opacity 0.3s ease; - pointer-events: none; } .card-info-wrapper { - position: absolute; - width: 100%; - bottom: -74px; - padding: var(--cx-spacing-6, 24px); - color: var(--cx-color-text-primary, #333); - transition: bottom 0.3s ease; - background-color: var(--cx-color-background-accent-1-soft, rgba(255, 255, 255, 0.9)); + flex: 1; + padding: var(--cx-spacing-6); + color: var(--cx-color-text-primary); + background-color: var(--cx-color-background-accent-1-soft); } .card-info { display: flex; flex-direction: column; + height: 100%; } - .card-metadata { + .card-subtitle { display: flex; flex-wrap: wrap; - color: var(--cx-color-text-less-important, #666); - gap: var(--cx-spacing-2, 8px); - margin-bottom: var(--cx-spacing-4, 16px); - } - - .card-metadata-section { - display: inline-flex; - flex: 1 1 100%; - align-items: center; - gap: var(--cx-spacing-2, 8px); + color: var(--cx-color-text-less-important); + gap: var(--cx-spacing-2); + margin-bottom: var(--cx-spacing-4); } .card-title { @@ -88,14 +81,23 @@ export class Card extends LitElement { overflow: hidden; font-size: 24px; font-weight: 400; - margin: 0; + margin-bottom: var(--cx-spacing-2); line-height: 2rem; align-content: center; - color: var(--cx-color-text-primary, #333); } + .card-other { + display: flex; + gap: var(--cx-spacing-2); + flex-wrap: wrap; + margin-top: auto; + } + + /* Hover effects - only on image */ .card:hover .card-image img, - .card:hover .card-image ::slotted(img) { + .card:hover .card-image ::slotted(img), + .card:hover .card-image ::slotted(video), + .card:hover .card-image ::slotted(*) { filter: grayscale(1); } @@ -103,41 +105,29 @@ export class Card extends LitElement { opacity: 1; } - .card:hover .card-info-wrapper { - bottom: 0; - } - @media (max-width: 750px) { .card { - display: flex; - flex-direction: row; - justify-content: flex-end; - width: 100%; - max-width: 343px; + flex-direction: column; height: auto; - min-height: unset; - max-height: unset; + max-width: 343px; } .card-image { - flex: 0 0 35%; - height: auto; + width: 100%; + height: 242px; } .card-info-wrapper { - position: relative; - width: 65%; - bottom: unset; - align-self: flex-end; - padding: var(--cx-spacing-4, 16px); + width: 100%; + padding: var(--cx-spacing-4); } .card-info { flex-direction: column-reverse; - gap: var(--cx-spacing-2, 8px); + gap: var(--cx-spacing-2); } - .card-metadata-section { + .card-subtitle { font-size: 12px; } @@ -152,43 +142,34 @@ export class Card extends LitElement { @property({ type: String, reflect: true }) title = ''; - @property({ type: String, reflect: true }) - subtitle1 = ''; - - @property({ type: String, reflect: true }) - subtitle2 = ''; - @property({ type: String, reflect: true }) image = ''; - @property({ type: String, reflect: true }) - imageAlt = 'Card image'; - render() { return html`
${this.image ? html` - ${this.imageAlt} + ` : html` `}
-
- ${this.subtitle1 ? html` -
- ${this.subtitle1} -
- ` : ''} - ${this.subtitle2 ? html` -
- ${this.subtitle2} -
- ` : ''} +
+ +
+ ${this.title ? html` +
${this.title}
+ ` : html` +
+ +
+ `} +
+
- ${this.title ? html`

${this.title}

` : ''}
From d045465d68cfb10a1e135bf57c27d3802f4e6e48 Mon Sep 17 00:00:00 2001 From: rebalv Date: Thu, 23 Oct 2025 12:25:34 +0200 Subject: [PATCH 03/16] #1067 - feat: parameter for href clickable cards --- packages/lib/components/card/card.stories.ts | 3 +- packages/lib/components/card/card.ts | 59 ++++++++++++-------- 2 files changed, 39 insertions(+), 23 deletions(-) diff --git a/packages/lib/components/card/card.stories.ts b/packages/lib/components/card/card.stories.ts index e646304..5629300 100644 --- a/packages/lib/components/card/card.stories.ts +++ b/packages/lib/components/card/card.stories.ts @@ -11,6 +11,7 @@ const meta: Meta = { argTypes: { title: { control: 'text' }, image: { control: 'text' }, + href: { control: 'text' }, }, }; @@ -23,7 +24,7 @@ export const Default: Story = { image: 'https://picsum.photos/500/220', }, render: (args) => html` - + 14:00 - 16:00 • Oslo, Norway Other content diff --git a/packages/lib/components/card/card.ts b/packages/lib/components/card/card.ts index cfd43f5..1be6372 100644 --- a/packages/lib/components/card/card.ts +++ b/packages/lib/components/card/card.ts @@ -19,6 +19,10 @@ export class Card extends LitElement { flex-direction: column; } + .card.clickable { + cursor: pointer; + } + .card-image { width: 100%; height: 50%; @@ -145,35 +149,46 @@ export class Card extends LitElement { @property({ type: String, reflect: true }) image = ''; + @property({ type: String, reflect: true }) + href = ''; + render() { - return html` -
-
- ${this.image ? html` - + const cardContent = html` +
+ ${this.image ? html` + + ` : html` + + `} +
+
+
+
+ +
+ ${this.title ? html` +
${this.title}
` : html` - - `} -
-
-
-
- -
- ${this.title ? html` -
${this.title}
- ` : html` -
- -
- `} -
- +
+
+ `} +
+
`; + + return this.href ? html` + + ${cardContent} + + ` : html` +
+ ${cardContent} +
+ `; } } From 15816c2b2ad4791921e32e53adc87a2b06cf2673 Mon Sep 17 00:00:00 2001 From: rebalv Date: Thu, 23 Oct 2025 12:29:50 +0200 Subject: [PATCH 04/16] #1067 - chore: avoid link lines under the text --- packages/lib/components/card/card.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/lib/components/card/card.ts b/packages/lib/components/card/card.ts index 1be6372..383f337 100644 --- a/packages/lib/components/card/card.ts +++ b/packages/lib/components/card/card.ts @@ -17,6 +17,8 @@ export class Card extends LitElement { overflow: hidden; display: flex; flex-direction: column; + text-decoration: none; + color: inherit; } .card.clickable { From 930c247b4787593d0f228398b7fb8fdff9dd3e93 Mon Sep 17 00:00:00 2001 From: rebalv Date: Thu, 23 Oct 2025 13:21:54 +0200 Subject: [PATCH 05/16] #1067 - chore: improved css for card --- packages/lib/components/card/card.ts | 256 +++++++++++++-------------- 1 file changed, 120 insertions(+), 136 deletions(-) diff --git a/packages/lib/components/card/card.ts b/packages/lib/components/card/card.ts index 383f337..c1b5951 100644 --- a/packages/lib/components/card/card.ts +++ b/packages/lib/components/card/card.ts @@ -4,146 +4,132 @@ import { customElement, property } from 'lit/decorators.js'; @customElement('cx-card') export class Card extends LitElement { static styles = css` - :host { - display: block; - } + .card { + position: relative; + height: 440px; + width: 100%; + max-width: 500px; + border-radius: 24px; + overflow: hidden; + display: flex; + flex-direction: column; + text-decoration: none; + color: inherit; + } - .card { - position: relative; - height: 440px; - width: 100%; - max-width: 500px; - border-radius: 24px; - overflow: hidden; - display: flex; - flex-direction: column; - text-decoration: none; - color: inherit; - } + .card.clickable { + cursor: pointer; + } - .card.clickable { - cursor: pointer; - } + .card-image { + width: 100%; + height: 50%; + position: relative; + flex-shrink: 0; + } - .card-image { - width: 100%; - height: 50%; - position: relative; - flex-shrink: 0; - } + .card-image img { + width: 100%; + height: 100%; + object-fit: cover; + transition: filter 0.3s ease; + } - .card-image img, - .card-image ::slotted(img), - .card-image ::slotted(video), - .card-image ::slotted(*) { - width: 100%; - height: 100%; - object-fit: cover; - transition: filter 0.3s ease; - } + /* Blue filter on img for hover */ + .card-image::after { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + mix-blend-mode: multiply; + background: var(--cx-color-background-accent-5); + opacity: 0; + transition: opacity 0.3s ease; + } - /* Blue filter on img for hover */ - .card-image::after { - content: ""; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - mix-blend-mode: multiply; - background: var(--cx-color-background-accent-5); - opacity: 0; - transition: opacity 0.3s ease; - } + .card-info { + flex: 1; + padding: var(--cx-spacing-6); + color: var(--cx-color-text-primary); + background-color: var(--cx-color-background-accent-1-soft); + display: flex; + flex-direction: column; + height: 100%; + box-sizing: border-box; + } - .card-info-wrapper { - flex: 1; - padding: var(--cx-spacing-6); - color: var(--cx-color-text-primary); - background-color: var(--cx-color-background-accent-1-soft); - } + .card-subtitle { + display: flex; + flex-wrap: wrap; + color: var(--cx-color-text-less-important); + gap: var(--cx-spacing-2); + margin-bottom: var(--cx-spacing-4); + } - .card-info { - display: flex; - flex-direction: column; - height: 100%; - } + .card-title { + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; + line-clamp: 2; + max-height: 65px; + min-height: 65px; + overflow: hidden; + font-size: 24px; + font-weight: 400; + line-height: 2rem; + margin-bottom: var(--cx-spacing-2); + align-content: center; + } - .card-subtitle { - display: flex; - flex-wrap: wrap; - color: var(--cx-color-text-less-important); - gap: var(--cx-spacing-2); - margin-bottom: var(--cx-spacing-4); - } + .card-other { + display: flex; + gap: var(--cx-spacing-2); + flex-wrap: wrap; + margin-top: auto; + } - .card-title { - display: -webkit-box; - -webkit-box-orient: vertical; - -webkit-line-clamp: 2; - line-clamp: 2; - max-height: 65px; - min-height: 65px; - overflow: hidden; - font-size: 24px; - font-weight: 400; - margin-bottom: var(--cx-spacing-2); - line-height: 2rem; - align-content: center; + /* Hover effects - only on image */ + .card:hover .card-image img { + filter: grayscale(1); + } + + .card:hover .card-image::after { + opacity: 1; + } + + @media (max-width: 750px) { + .card { + flex-direction: column; + height: auto; + max-width: 343px; } - .card-other { - display: flex; - gap: var(--cx-spacing-2); - flex-wrap: wrap; - margin-top: auto; + .card-image { + width: 100%; + height: 242px; } - /* Hover effects - only on image */ - .card:hover .card-image img, - .card:hover .card-image ::slotted(img), - .card:hover .card-image ::slotted(video), - .card:hover .card-image ::slotted(*) { - filter: grayscale(1); + .card-info { + width: 100%; + padding: var(--cx-spacing-4); + flex-direction: column-reverse; + gap: var(--cx-spacing-2); + box-sizing: border-box; } - .card:hover .card-image::after { - opacity: 1; + .card-subtitle { + font-size: 12px; } - @media (max-width: 750px) { - .card { - flex-direction: column; - height: auto; - max-width: 343px; - } - - .card-image { - width: 100%; - height: 242px; - } - - .card-info-wrapper { - width: 100%; - padding: var(--cx-spacing-4); - } - - .card-info { - flex-direction: column-reverse; - gap: var(--cx-spacing-2); - } - - .card-subtitle { - font-size: 12px; - } - - .card-title { - margin-top: unset; - min-height: unset; - font-size: 18px; - } + .card-title { + margin-top: unset; + min-height: unset; + font-size: 18px; } - `; + } +`; @property({ type: String, reflect: true }) title = ''; @@ -163,21 +149,19 @@ export class Card extends LitElement { `}
-
-
-
- -
- ${this.title ? html` -
${this.title}
- ` : html` -
- -
- `} -
- +
+
+ +
+ ${this.title ? html` +
${this.title}
+ ` : html` +
+
+ `} +
+
`; From eda1755e7f32dbfbc2b4dcb79c3ea5a45a2de695 Mon Sep 17 00:00:00 2001 From: rebalv Date: Thu, 23 Oct 2025 15:54:01 +0200 Subject: [PATCH 06/16] #1067 - feat: added documentation file for card --- packages/lib/components/card/Overview.mdx | 37 +++++++++++++++++++++++ 1 file changed, 37 insertions(+) create mode 100644 packages/lib/components/card/Overview.mdx diff --git a/packages/lib/components/card/Overview.mdx b/packages/lib/components/card/Overview.mdx new file mode 100644 index 0000000..1aa8d2b --- /dev/null +++ b/packages/lib/components/card/Overview.mdx @@ -0,0 +1,37 @@ +import { Canvas, Meta, Source, Subtitle, Title } from "@storybook/blocks"; + +import * as stories from "./card.stories"; + + + + +<Subtitle> + A card is used to display content and actions on a single topic. They provide a flexible and extensible content container that groups related information in an easily scannable format. +</Subtitle> + +## How to get started +Start by importing the component. Once imported, the `<cx-card>` component is ready to use. +``` ts +// Web component +import '@computas/designsystem/card'; + +// React +import { CxCard } from '@computas/designsystem/card/react'; +``` + +## Default +A card can consist of an **image**, **title**, **subtitle** and **other**. The **title** and **image** can be set as properties, while **subtitle** and **other** use slots for maximum flexibility. To make a card clickable, provide an `href` property which will wrap the entire card in a link. +<Canvas of={stories.Default} /> + +## Content slots +The card supports several content slots for customization: + +- **`subtitle`** - For metadata like time, location, or categories +- **`other`** - For additional content like buttons, tags, or other actions + +<Source + code={`<cx-card image="https://example.com/image.jpg" title="Card Title"> + <span slot="subtitle">14:00 - 16:00 • Oslo, Norway</span> + <button slot="other" class="cx-btn__secondary">Learn more</button> +</cx-card>`} +/> \ No newline at end of file From 1c9ee31eb62fa85530d91c7aa837bb8e239dfcf2 Mon Sep 17 00:00:00 2001 From: rebalv <rebekka.alvsvaag@computas.com> Date: Thu, 30 Oct 2025 10:50:18 +0100 Subject: [PATCH 07/16] #1067 - fix: linting --- packages/lib/components/card/card.stories.ts | 2 +- packages/lib/components/card/card.ts | 28 +++++++++++++------- 2 files changed, 20 insertions(+), 10 deletions(-) diff --git a/packages/lib/components/card/card.stories.ts b/packages/lib/components/card/card.stories.ts index 5629300..f35895c 100644 --- a/packages/lib/components/card/card.stories.ts +++ b/packages/lib/components/card/card.stories.ts @@ -29,4 +29,4 @@ export const Default: Story = { <span slot="other">Other content</span> </cx-card> `, -}; \ No newline at end of file +}; diff --git a/packages/lib/components/card/card.ts b/packages/lib/components/card/card.ts index c1b5951..55011ea 100644 --- a/packages/lib/components/card/card.ts +++ b/packages/lib/components/card/card.ts @@ -143,34 +143,44 @@ export class Card extends LitElement { render() { const cardContent = html` <div class="card-image"> - ${this.image ? html` + ${ + this.image + ? html` <img src="${this.image}" alt="" /> - ` : html` + ` + : html` <slot name="image"></slot> - `} + ` + } </div> <div class="card-info"> <div class="card-subtitle"> <slot name="subtitle"></slot> </div> - ${this.title ? html` + ${ + this.title + ? html` <div class="card-title">${this.title}</div> - ` : html` + ` + : html` <div class="card-title"> <slot name="title"></slot> </div> - `} + ` + } <div class="card-other"> <slot name="other"></slot> </div> </div> `; - return this.href ? html` + return this.href + ? html` <a href="${this.href}" class="card clickable"> ${cardContent} </a> - ` : html` + ` + : html` <div class="card"> ${cardContent} </div> @@ -182,4 +192,4 @@ declare global { interface HTMLElementTagNameMap { 'cx-card': Card; } -} \ No newline at end of file +} From e4d39173041d5f96d799a9ae07c2371ff4111082 Mon Sep 17 00:00:00 2001 From: rebalv <rebekka.alvsvaag@computas.com> Date: Thu, 30 Oct 2025 22:28:45 +0100 Subject: [PATCH 08/16] #1067 - feat: egne tokens for title og tekst --- packages/lib/global-css/typography.css | 196 +++++++++++++++++-------- 1 file changed, 133 insertions(+), 63 deletions(-) diff --git a/packages/lib/global-css/typography.css b/packages/lib/global-css/typography.css index c3704aa..ca965e3 100644 --- a/packages/lib/global-css/typography.css +++ b/packages/lib/global-css/typography.css @@ -1,5 +1,75 @@ @import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap"); +:root { + /* Title tokens */ + --cx-title-1-font-size: 2.75rem; + --cx-title-1-font-weight: 400; + --cx-title-1-line-height: 1.6; + + --cx-title-2-font-size: 2.25rem; + --cx-title-2-font-weight: 600; + --cx-title-2-line-height: 1.6; + + --cx-title-3-font-size: 1.75rem; + --cx-title-3-font-weight: 600; + --cx-title-3-line-height: 1.6; + + --cx-title-4-font-size: 1.5rem; + --cx-title-4-font-weight: 600; + --cx-title-4-line-height: 1.6; + + --cx-title-5-font-size: 1.125rem; + --cx-title-5-font-weight: 600; + --cx-title-5-line-height: 1.125; + + /* Text tokens */ + --cx-text-1-font-size: 1.5rem; + --cx-text-1-font-weight: 400; + --cx-text-1-line-height: 1.6; + + --cx-text-2-font-size: 1.125rem; + --cx-text-2-font-weight: 400; + --cx-text-2-line-height: 1.6; + + --cx-text-3-font-size: 1rem; + --cx-text-3-font-weight: 400; + --cx-text-3-line-height: 1.6; + + --cx-text-4-font-size: 0.875rem; + --cx-text-4-font-weight: 400; + --cx-text-4-line-height: 1.6; + + --cx-text-micro-font-size: 0.75rem; + --cx-text-micro-font-weight: 400; + --cx-text-micro-line-height: 1.6; + + --cx-text-jumbo-font-size: 3.75rem; + --cx-text-jumbo-font-weight: 900; + --cx-text-jumbo-line-height: 1.6; + + /* Text variant tokens */ + --cx-text-2-strong-font-weight: 600; + --cx-text-2-light-font-weight: 300; + --cx-text-3-strong-font-weight: 600; + --cx-text-3-light-font-weight: 300; + --cx-text-4-strong-font-weight: 600; + --cx-text-4-light-font-weight: 300; + --cx-text-micro-strong-font-weight: 600; + + /* Clickable text tokens */ + --cx-text-clickable-1-font-size: 1.125rem; + --cx-text-clickable-1-font-weight: 500; + --cx-text-clickable-1-line-height: 1; + + --cx-text-clickable-2-font-size: 1rem; + --cx-text-clickable-2-font-weight: 500; + --cx-text-clickable-2-line-height: 1; + + --cx-text-clickable-3-font-size: 0.875rem; + --cx-text-clickable-3-font-weight: 500; + --cx-text-clickable-3-line-height: 1; +} + body { font-family: "Open Sans", Arial, sans-serif; color: var(--cx-color-text-primary); @@ -20,33 +90,33 @@ button { } .cx-title-1 { - font-weight: 400; - font-size: 2.75rem; - line-height: 1.6; + font-weight: var(--cx-title-1-font-weight); + font-size: var(--cx-title-1-font-size); + line-height: var(--cx-title-1-line-height); } .cx-title-2 { - font-weight: 600; - font-size: 2.25rem; - line-height: 1.6; + font-weight: var(--cx-title-2-font-weight); + font-size: var(--cx-title-2-font-size); + line-height: var(--cx-title-2-line-height); } .cx-title-3 { - font-weight: 600; - font-size: 1.75rem; - line-height: 1.6; + font-weight: var(--cx-title-3-font-weight); + font-size: var(--cx-title-3-font-size); + line-height: var(--cx-title-3-line-height); } .cx-title-4 { - font-weight: 600; - font-size: 1.5rem; - line-height: 1.6; + font-weight: var(--cx-title-4-font-weight); + font-size: var(--cx-title-4-font-size); + line-height: var(--cx-title-4-line-height); } .cx-title-5 { - font-weight: 600; - font-size: 1.125rem; - line-height: 1.125; + font-weight: var(--cx-title-5-font-weight); + font-size: var(--cx-title-5-font-size); + line-height: var(--cx-title-5-line-height); } :is(p):where(.cx-text-1, .cx-text-2, .cx-text-3, .cx-text-4, .cx-text-micro) { @@ -56,99 +126,99 @@ button { } .cx-text-1 { - font-weight: 400; - font-size: 1.5rem; - line-height: 1.6; + font-weight: var(--cx-text-1-font-weight); + font-size: var(--cx-text-1-font-size); + line-height: var(--cx-text-1-line-height); } .cx-text-2 { - font-weight: 400; - font-size: 1.125rem; - line-height: 1.6; + font-weight: var(--cx-text-2-font-weight); + font-size: var(--cx-text-2-font-size); + line-height: var(--cx-text-2-line-height); } .cx-text-2-strong { - font-weight: 600; - font-size: 1.125rem; - line-height: 1.6; + font-weight: var(--cx-text-2-strong-font-weight); + font-size: var(--cx-text-2-font-size); + line-height: var(--cx-text-2-line-height); } .cx-text-2-light { - font-weight: 300; - font-size: 1.125rem; - line-height: 1.6; + font-weight: var(--cx-text-2-light-font-weight); + font-size: var(--cx-text-2-font-size); + line-height: var(--cx-text-2-line-height); } .cx-text-3 { - font-weight: 400; - font-size: 1rem; - line-height: 1.6; + font-weight: var(--cx-text-3-font-weight); + font-size: var(--cx-text-3-font-size); + line-height: var(--cx-text-3-line-height); } .cx-text-3-strong { - font-weight: 600; - font-size: 1rem; - line-height: 1.6; + font-weight: var(--cx-text-3-strong-font-weight); + font-size: var(--cx-text-3-font-size); + line-height: var(--cx-text-3-line-height); } .cx-text-3-light { - font-weight: 300; - font-size: 1rem; - line-height: 1.6; + font-weight: var(--cx-text-3-light-font-weight); + font-size: var(--cx-text-3-font-size); + line-height: var(--cx-text-3-line-height); } .cx-text-4 { - font-weight: 400; - font-size: 0.875rem; - line-height: 1.6; + font-weight: var(--cx-text-4-font-weight); + font-size: var(--cx-text-4-font-size); + line-height: var(--cx-text-4-line-height); } .cx-text-4-strong { - font-weight: 600; - font-size: 0.875rem; - line-height: 1.6; + font-weight: var(--cx-text-4-strong-font-weight); + font-size: var(--cx-text-4-font-size); + line-height: var(--cx-text-4-line-height); } .cx-text-4-light { - font-weight: 300; - font-size: 0.875rem; - line-height: 1.6; + font-weight: var(--cx-text-4-light-font-weight); + font-size: var(--cx-text-4-font-size); + line-height: var(--cx-text-4-line-height); } .cx-text-jumbo { - font-weight: 900; - font-size: 3.75rem; - line-height: 1.6; + font-weight: var(--cx-text-jumbo-font-weight); + font-size: var(--cx-text-jumbo-font-size); + line-height: var(--cx-text-jumbo-line-height); } .cx-text-micro { - font-weight: 400; - font-size: 0.75rem; - line-height: 1.6; + font-weight: var(--cx-text-micro-font-weight); + font-size: var(--cx-text-micro-font-size); + line-height: var(--cx-text-micro-line-height); } .cx-text-micro-strong { - font-weight: 600; - font-size: 0.75rem; - line-height: 1.6; + font-weight: var(--cx-text-micro-strong-font-weight); + font-size: var(--cx-text-micro-font-size); + line-height: var(--cx-text-micro-line-height); } .cx-text-clickable-1 { - font-weight: 500; - font-size: 1.125rem; - line-height: 1; + font-weight: var(--cx-text-clickable-1-font-weight); + font-size: var(--cx-text-clickable-1-font-size); + line-height: var(--cx-text-clickable-1-line-height); } .cx-text-clickable-2 { - font-weight: 500; - font-size: 1rem; - line-height: 1; + font-weight: var(--cx-text-clickable-2-font-weight); + font-size: var(--cx-text-clickable-2-font-size); + line-height: var(--cx-text-clickable-2-line-height); } .cx-text-clickable-3 { - font-weight: 500; - font-size: 0.875rem; - line-height: 1; + font-weight: var(--cx-text-clickable-3-font-weight); + font-size: var(--cx-text-clickable-3-font-size); + line-height: var(--cx-text-clickable-3-line-height); } .cx-overflow-ellipsis { From 3e85a17b1f690e5d5592fec8ab1ea297701b2ea3 Mon Sep 17 00:00:00 2001 From: rebalv <rebekka.alvsvaag@computas.com> Date: Thu, 30 Oct 2025 22:29:22 +0100 Subject: [PATCH 09/16] #1067 - chore: ta i bruk tokens for titles --- packages/lib/components/card/card.ts | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/packages/lib/components/card/card.ts b/packages/lib/components/card/card.ts index 55011ea..3df1734 100644 --- a/packages/lib/components/card/card.ts +++ b/packages/lib/components/card/card.ts @@ -76,9 +76,9 @@ export class Card extends LitElement { max-height: 65px; min-height: 65px; overflow: hidden; - font-size: 24px; - font-weight: 400; - line-height: 2rem; + font-size: var(--cx-text-1-font-size); + font-weight: var(--cx-text-1-font-weight); + line-height: var(--cx-text-1-line-height); margin-bottom: var(--cx-spacing-2); align-content: center; } @@ -120,7 +120,9 @@ export class Card extends LitElement { } .card-subtitle { - font-size: 12px; + font-size: var(--cx-text-4-font-size); + font-weight: var(--cx-text-4-font-weight); + line-height: var(--cx-text-4-line-height); } .card-title { From 539a6cf4e15e22f2401e3c21dcdcab6415a041c6 Mon Sep 17 00:00:00 2001 From: rebalv <rebekka.alvsvaag@computas.com> Date: Fri, 31 Oct 2025 09:38:11 +0100 Subject: [PATCH 10/16] #1067 - chore: la til mer font styling for mobil og desktop text --- packages/lib/components/card/card.ts | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/packages/lib/components/card/card.ts b/packages/lib/components/card/card.ts index 3df1734..b9fb017 100644 --- a/packages/lib/components/card/card.ts +++ b/packages/lib/components/card/card.ts @@ -66,6 +66,9 @@ export class Card extends LitElement { color: var(--cx-color-text-less-important); gap: var(--cx-spacing-2); margin-bottom: var(--cx-spacing-4); + font-size: var(--cx-text-4-font-size); + font-weight: var(--cx-text-4-font-weight); + line-height: var(--cx-text-4-line-height); } .card-title { @@ -73,8 +76,6 @@ export class Card extends LitElement { -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; - max-height: 65px; - min-height: 65px; overflow: hidden; font-size: var(--cx-text-1-font-size); font-weight: var(--cx-text-1-font-weight); @@ -120,15 +121,17 @@ export class Card extends LitElement { } .card-subtitle { - font-size: var(--cx-text-4-font-size); - font-weight: var(--cx-text-4-font-weight); - line-height: var(--cx-text-4-line-height); + font-size: var(--cx-text-micro-font-size); + font-weight: var(--cx-text-micro-font-weight); + line-height: var(--cx-text-micro-line-height); } .card-title { margin-top: unset; min-height: unset; - font-size: 18px; + font-size: var(--cx-text-2-font-size); + font-weight: var(--cx-text-2-font-weight); + line-height: var(--cx-text-2-line-height); } } `; From 5ef59e47dc60d8171e8b55ca53572e47416aadca Mon Sep 17 00:00:00 2001 From: rebalv <rebekka.alvsvaag@computas.com> Date: Fri, 31 Oct 2025 11:54:14 +0100 Subject: [PATCH 11/16] #1067 - chore: linting --- packages/lib/components/card/card.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/lib/components/card/card.ts b/packages/lib/components/card/card.ts index b9fb017..3130d6b 100644 --- a/packages/lib/components/card/card.ts +++ b/packages/lib/components/card/card.ts @@ -1,4 +1,4 @@ -import { LitElement, html, css } from 'lit'; +import { LitElement, css, html } from 'lit'; import { customElement, property } from 'lit/decorators.js'; @customElement('cx-card') From 00dd855b29b0ef3fcd0c2e02774f56222f066b7e Mon Sep 17 00:00:00 2001 From: rebalv <rebekka.alvsvaag@computas.com> Date: Thu, 6 Nov 2025 10:24:49 +0100 Subject: [PATCH 12/16] #1067 - chore: 100% height of cards and spesific height for images --- packages/lib/components/card/card.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/lib/components/card/card.ts b/packages/lib/components/card/card.ts index 3130d6b..1e8befe 100644 --- a/packages/lib/components/card/card.ts +++ b/packages/lib/components/card/card.ts @@ -6,7 +6,7 @@ export class Card extends LitElement { static styles = css` .card { position: relative; - height: 440px; + height: 100%; width: 100%; max-width: 500px; border-radius: 24px; @@ -23,7 +23,7 @@ export class Card extends LitElement { .card-image { width: 100%; - height: 50%; + height: 192px; position: relative; flex-shrink: 0; } @@ -109,7 +109,7 @@ export class Card extends LitElement { .card-image { width: 100%; - height: 242px; + height: 125px; } .card-info { From 81a79eb20c51f60fe1fce15f17afd5b4d47a73b9 Mon Sep 17 00:00:00 2001 From: rebalv <rebekka.alvsvaag@computas.com> Date: Thu, 6 Nov 2025 15:24:21 +0100 Subject: [PATCH 13/16] #1067 - feat: separate css files for typography classes --- packages/lib/components/card/card.ts | 61 ++++++------------- packages/lib/global-css/typography/text-1.css | 17 ++++++ packages/lib/global-css/typography/text-2.css | 29 +++++++++ packages/lib/global-css/typography/text-3.css | 29 +++++++++ packages/lib/global-css/typography/text-4.css | 23 +++++++ .../lib/global-css/typography/text-jumbo.css | 11 ++++ .../lib/global-css/typography/text-micro.css | 11 ++++ .../lib/global-css/typography/title-1.css | 6 ++ .../lib/global-css/typography/title-2.css | 6 ++ .../lib/global-css/typography/title-3.css | 6 ++ .../lib/global-css/typography/title-4.css | 6 ++ .../lib/global-css/typography/title-5.css | 6 ++ 12 files changed, 167 insertions(+), 44 deletions(-) create mode 100644 packages/lib/global-css/typography/text-1.css create mode 100644 packages/lib/global-css/typography/text-2.css create mode 100644 packages/lib/global-css/typography/text-3.css create mode 100644 packages/lib/global-css/typography/text-4.css create mode 100644 packages/lib/global-css/typography/text-jumbo.css create mode 100644 packages/lib/global-css/typography/text-micro.css create mode 100644 packages/lib/global-css/typography/title-1.css create mode 100644 packages/lib/global-css/typography/title-2.css create mode 100644 packages/lib/global-css/typography/title-3.css create mode 100644 packages/lib/global-css/typography/title-4.css create mode 100644 packages/lib/global-css/typography/title-5.css diff --git a/packages/lib/components/card/card.ts b/packages/lib/components/card/card.ts index 1e8befe..b963ead 100644 --- a/packages/lib/components/card/card.ts +++ b/packages/lib/components/card/card.ts @@ -1,9 +1,14 @@ -import { LitElement, css, html } from 'lit'; +import { LitElement, css, html, unsafeCSS } from 'lit'; import { customElement, property } from 'lit/decorators.js'; +import text1CSS from '../../global-css/typography/text-1.css?inline'; +import text4CSS from '../../global-css/typography/text-4.css?inline'; @customElement('cx-card') export class Card extends LitElement { - static styles = css` + static styles = [ + unsafeCSS(text1CSS), + unsafeCSS(text4CSS), + css` .card { position: relative; height: 100%; @@ -66,9 +71,6 @@ export class Card extends LitElement { color: var(--cx-color-text-less-important); gap: var(--cx-spacing-2); margin-bottom: var(--cx-spacing-4); - font-size: var(--cx-text-4-font-size); - font-weight: var(--cx-text-4-font-weight); - line-height: var(--cx-text-4-line-height); } .card-title { @@ -77,9 +79,6 @@ export class Card extends LitElement { -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; - font-size: var(--cx-text-1-font-size); - font-weight: var(--cx-text-1-font-weight); - line-height: var(--cx-text-1-line-height); margin-bottom: var(--cx-spacing-2); align-content: center; } @@ -119,22 +118,8 @@ export class Card extends LitElement { gap: var(--cx-spacing-2); box-sizing: border-box; } - - .card-subtitle { - font-size: var(--cx-text-micro-font-size); - font-weight: var(--cx-text-micro-font-weight); - line-height: var(--cx-text-micro-line-height); - } - - .card-title { - margin-top: unset; - min-height: unset; - font-size: var(--cx-text-2-font-size); - font-weight: var(--cx-text-2-font-weight); - line-height: var(--cx-text-2-line-height); - } } -`; +`]; @property({ type: String, reflect: true }) title = ''; @@ -148,31 +133,19 @@ export class Card extends LitElement { render() { const cardContent = html` <div class="card-image"> - ${ - this.image - ? html` - <img src="${this.image}" alt="" /> - ` - : html` - <slot name="image"></slot> - ` - } + ${this.image + ? html`<img src="${this.image}" alt="" />` + : html`<slot name="image"></slot>` + } </div> <div class="card-info"> - <div class="card-subtitle"> + <div class="card-subtitle cx-text-4"> <slot name="subtitle"></slot> </div> - ${ - this.title - ? html` - <div class="card-title">${this.title}</div> - ` - : html` - <div class="card-title"> - <slot name="title"></slot> - </div> - ` - } + ${this.title + ? html`<div class="card-title cx-text-1">${this.title}</div>` + : html`<div class="card-title cx-text-1"><slot name="title"></slot></div>` + } <div class="card-other"> <slot name="other"></slot> </div> diff --git a/packages/lib/global-css/typography/text-1.css b/packages/lib/global-css/typography/text-1.css new file mode 100644 index 0000000..d064f19 --- /dev/null +++ b/packages/lib/global-css/typography/text-1.css @@ -0,0 +1,17 @@ +.cx-text-1 { + font-size: 1.5rem; + font-weight: 400; + line-height: 1.6; +} + +:is(p).cx-text-1 { + max-width: 65ch; + text-wrap: pretty; + word-break: auto-phrase; +} + +.cx-text-clickable-1 { + font-weight: 500; + font-size: 1.125rem; + line-height: 1; +} diff --git a/packages/lib/global-css/typography/text-2.css b/packages/lib/global-css/typography/text-2.css new file mode 100644 index 0000000..7f3de62 --- /dev/null +++ b/packages/lib/global-css/typography/text-2.css @@ -0,0 +1,29 @@ +.cx-text-2 { + font-size: 1.125rem; + font-weight: 400; + line-height: 1.6; +} + +:is(p).cx-text-2 { + max-width: 65ch; + text-wrap: pretty; + word-break: auto-phrase; +} + +.cx-text-2-strong { + font-weight: 600; + font-size: 1.125rem; + line-height: 1.6; +} + +.cx-text-2-light { + font-weight: 300; + font-size: 1.125rem; + line-height: 1.6; +} + +.cx-text-clickable-2 { + font-weight: 500; + font-size: 1rem; + line-height: 1; +} \ No newline at end of file diff --git a/packages/lib/global-css/typography/text-3.css b/packages/lib/global-css/typography/text-3.css new file mode 100644 index 0000000..4907769 --- /dev/null +++ b/packages/lib/global-css/typography/text-3.css @@ -0,0 +1,29 @@ +.cx-text-3 { + font-size: 1rem; + font-weight: 400; + line-height: 1.6; +} + +:is(p).cx-text-3 { + max-width: 65ch; + text-wrap: pretty; + word-break: auto-phrase; +} + +.cx-text-3-strong { + font-weight: 600; + font-size: 1rem; + line-height: 1.6; +} + +.cx-text-3-light { + font-weight: 300; + font-size: 1rem; + line-height: 1.6; +} + +.cx-text-clickable-3 { + font-weight: 500; + font-size: 0.875rem; + line-height: 1; +} \ No newline at end of file diff --git a/packages/lib/global-css/typography/text-4.css b/packages/lib/global-css/typography/text-4.css new file mode 100644 index 0000000..110b17f --- /dev/null +++ b/packages/lib/global-css/typography/text-4.css @@ -0,0 +1,23 @@ +.cx-text-4 { + font-size: 0.875rem; + font-weight: 400; + line-height: 1.6; +} + +:is(p).cx-text-4 { + max-width: 65ch; + text-wrap: pretty; + word-break: auto-phrase; +} + +.cx-text-4-strong { + font-weight: 600; + font-size: 0.875rem; + line-height: 1.6; +} + +.cx-text-4-light { + font-weight: 300; + font-size: 0.875rem; + line-height: 1.6; +} \ No newline at end of file diff --git a/packages/lib/global-css/typography/text-jumbo.css b/packages/lib/global-css/typography/text-jumbo.css new file mode 100644 index 0000000..28f07b8 --- /dev/null +++ b/packages/lib/global-css/typography/text-jumbo.css @@ -0,0 +1,11 @@ +.cx-text-jumbo { + font-weight: 700; + font-size: 3.75rem; + line-height: 1.6; +} + +.cx-text-jumbo-mobile { + font-weight: 700; + font-size: 2rem; + line-height: 1.4; +} \ No newline at end of file diff --git a/packages/lib/global-css/typography/text-micro.css b/packages/lib/global-css/typography/text-micro.css new file mode 100644 index 0000000..b6e4f86 --- /dev/null +++ b/packages/lib/global-css/typography/text-micro.css @@ -0,0 +1,11 @@ +.cx-text-micro { + font-size: 0.75rem; + font-weight: 400; + line-height: 1.6; +} + +:is(p).cx-text-micro { + max-width: 65ch; + text-wrap: pretty; + word-break: auto-phrase; +} \ No newline at end of file diff --git a/packages/lib/global-css/typography/title-1.css b/packages/lib/global-css/typography/title-1.css new file mode 100644 index 0000000..ecf418f --- /dev/null +++ b/packages/lib/global-css/typography/title-1.css @@ -0,0 +1,6 @@ +.cx-title-1 { + font-weight: 400; + font-size: 2.75rem; + line-height: 1.6; + text-wrap: balance; +} \ No newline at end of file diff --git a/packages/lib/global-css/typography/title-2.css b/packages/lib/global-css/typography/title-2.css new file mode 100644 index 0000000..99c9c80 --- /dev/null +++ b/packages/lib/global-css/typography/title-2.css @@ -0,0 +1,6 @@ +.cx-title-2 { + font-weight: 600; + font-size: 2.25rem; + line-height: 1.6; + text-wrap: balance; +} \ No newline at end of file diff --git a/packages/lib/global-css/typography/title-3.css b/packages/lib/global-css/typography/title-3.css new file mode 100644 index 0000000..e3eda2a --- /dev/null +++ b/packages/lib/global-css/typography/title-3.css @@ -0,0 +1,6 @@ +.cx-title-3 { + font-weight: 600; + font-size: 1.75rem; + line-height: 1.6; + text-wrap: balance; +} \ No newline at end of file diff --git a/packages/lib/global-css/typography/title-4.css b/packages/lib/global-css/typography/title-4.css new file mode 100644 index 0000000..c68f187 --- /dev/null +++ b/packages/lib/global-css/typography/title-4.css @@ -0,0 +1,6 @@ +.cx-title-4 { + font-weight: 600; + font-size: 1.5rem; + line-height: 1.6; + text-wrap: balance; +} \ No newline at end of file diff --git a/packages/lib/global-css/typography/title-5.css b/packages/lib/global-css/typography/title-5.css new file mode 100644 index 0000000..372f74c --- /dev/null +++ b/packages/lib/global-css/typography/title-5.css @@ -0,0 +1,6 @@ +.cx-title-5 { + font-weight: 600; + font-size: 1.125rem; + line-height: 1.125; + text-wrap: balance; +} \ No newline at end of file From c6d8baf09df0d091af32277b91b665758378a08c Mon Sep 17 00:00:00 2001 From: rebalv <rebekka.alvsvaag@computas.com> Date: Thu, 6 Nov 2025 16:17:13 +0100 Subject: [PATCH 14/16] #1067 - feat: added typography classes to global styles --- packages/lib/components/card/card.ts | 17 +- packages/lib/global-css/typography.css | 220 ------------------ packages/lib/global-css/typography/text-2.css | 2 +- packages/lib/global-css/typography/text-3.css | 2 +- packages/lib/global-css/typography/text-4.css | 2 +- .../lib/global-css/typography/text-jumbo.css | 2 +- .../lib/global-css/typography/text-micro.css | 2 +- .../lib/global-css/typography/title-1.css | 2 +- .../lib/global-css/typography/title-2.css | 2 +- .../lib/global-css/typography/title-3.css | 2 +- .../lib/global-css/typography/title-4.css | 2 +- .../lib/global-css/typography/title-5.css | 2 +- packages/lib/global-styles.css | 10 + 13 files changed, 28 insertions(+), 239 deletions(-) diff --git a/packages/lib/components/card/card.ts b/packages/lib/components/card/card.ts index b963ead..fe4359e 100644 --- a/packages/lib/components/card/card.ts +++ b/packages/lib/components/card/card.ts @@ -119,7 +119,8 @@ export class Card extends LitElement { box-sizing: border-box; } } -`]; +`, + ]; @property({ type: String, reflect: true }) title = ''; @@ -133,19 +134,17 @@ export class Card extends LitElement { render() { const cardContent = html` <div class="card-image"> - ${this.image - ? html`<img src="${this.image}" alt="" />` - : html`<slot name="image"></slot>` - } + ${this.image ? html`<img src="${this.image}" alt="" />` : html`<slot name="image"></slot>`} </div> <div class="card-info"> <div class="card-subtitle cx-text-4"> <slot name="subtitle"></slot> </div> - ${this.title - ? html`<div class="card-title cx-text-1">${this.title}</div>` - : html`<div class="card-title cx-text-1"><slot name="title"></slot></div>` - } + ${ + this.title + ? html`<div class="card-title cx-text-1">${this.title}</div>` + : html`<div class="card-title cx-text-1"><slot name="title"></slot></div>` + } <div class="card-other"> <slot name="other"></slot> </div> diff --git a/packages/lib/global-css/typography.css b/packages/lib/global-css/typography.css index 61f14e1..785e3eb 100644 --- a/packages/lib/global-css/typography.css +++ b/packages/lib/global-css/typography.css @@ -1,79 +1,5 @@ @import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap"); -:root { - /* Title tokens */ - --cx-title-1-font-size: 2.75rem; - --cx-title-1-font-weight: 400; - --cx-title-1-line-height: 1.6; - - --cx-title-2-font-size: 2.25rem; - --cx-title-2-font-weight: 600; - --cx-title-2-line-height: 1.6; - - --cx-title-3-font-size: 1.75rem; - --cx-title-3-font-weight: 600; - --cx-title-3-line-height: 1.6; - - --cx-title-4-font-size: 1.5rem; - --cx-title-4-font-weight: 600; - --cx-title-4-line-height: 1.6; - - --cx-title-5-font-size: 1.125rem; - --cx-title-5-font-weight: 600; - --cx-title-5-line-height: 1.125; - - /* Text tokens */ - --cx-text-1-font-size: 1.5rem; - --cx-text-1-font-weight: 400; - --cx-text-1-line-height: 1.6; - - --cx-text-2-font-size: 1.125rem; - --cx-text-2-font-weight: 400; - --cx-text-2-line-height: 1.6; - - --cx-text-3-font-size: 1rem; - --cx-text-3-font-weight: 400; - --cx-text-3-line-height: 1.6; - - --cx-text-4-font-size: 0.875rem; - --cx-text-4-font-weight: 400; - --cx-text-4-line-height: 1.6; - - --cx-text-micro-font-size: 0.75rem; - --cx-text-micro-font-weight: 400; - --cx-text-micro-line-height: 1.6; - - --cx-text-jumbo-font-size: 3.75rem; - --cx-text-jumbo-font-weight: 700; - --cx-text-jumbo-line-height: 1.6; - - --cx-text-jumbo-mobile-font-size: 2rem; - --cx-text-jumbo-mobile-font-weight: 700; - --cx-text-jumbo-mobile-line-height: 1.4; - - /* Text variant tokens */ - --cx-text-2-strong-font-weight: 600; - --cx-text-2-light-font-weight: 300; - --cx-text-3-strong-font-weight: 600; - --cx-text-3-light-font-weight: 300; - --cx-text-4-strong-font-weight: 600; - --cx-text-4-light-font-weight: 300; - --cx-text-micro-strong-font-weight: 600; - - /* Clickable text tokens */ - --cx-text-clickable-1-font-size: 1.125rem; - --cx-text-clickable-1-font-weight: 500; - --cx-text-clickable-1-line-height: 1; - - --cx-text-clickable-2-font-size: 1rem; - --cx-text-clickable-2-font-weight: 500; - --cx-text-clickable-2-line-height: 1; - - --cx-text-clickable-3-font-size: 0.875rem; - --cx-text-clickable-3-font-weight: 500; - --cx-text-clickable-3-line-height: 1; -} - body { font-family: "Open Sans", Arial, sans-serif; color: var(--cx-color-text-primary); @@ -85,152 +11,6 @@ button { font-family: inherit; } -.cx-title-1, -.cx-title-2, -.cx-title-3, -.cx-title-4, -.cx-title-5 { - text-wrap: balance; -} - -.cx-title-1 { - font-weight: var(--cx-title-1-font-weight); - font-size: var(--cx-title-1-font-size); - line-height: var(--cx-title-1-line-height); -} - -.cx-title-2 { - font-weight: var(--cx-title-2-font-weight); - font-size: var(--cx-title-2-font-size); - line-height: var(--cx-title-2-line-height); -} - -.cx-title-3 { - font-weight: var(--cx-title-3-font-weight); - font-size: var(--cx-title-3-font-size); - line-height: var(--cx-title-3-line-height); -} - -.cx-title-4 { - font-weight: var(--cx-title-4-font-weight); - font-size: var(--cx-title-4-font-size); - line-height: var(--cx-title-4-line-height); -} - -.cx-title-5 { - font-weight: var(--cx-title-5-font-weight); - font-size: var(--cx-title-5-font-size); - line-height: var(--cx-title-5-line-height); -} - -:is(p):where(.cx-text-1, .cx-text-2, .cx-text-3, .cx-text-4, .cx-text-micro) { - max-width: 65ch; - text-wrap: pretty; - word-break: auto-phrase; -} - -.cx-text-1 { - font-weight: var(--cx-text-1-font-weight); - font-size: var(--cx-text-1-font-size); - line-height: var(--cx-text-1-line-height); -} - -.cx-text-2 { - font-weight: var(--cx-text-2-font-weight); - font-size: var(--cx-text-2-font-size); - line-height: var(--cx-text-2-line-height); -} - -.cx-text-2-strong { - font-weight: var(--cx-text-2-strong-font-weight); - font-size: var(--cx-text-2-font-size); - line-height: var(--cx-text-2-line-height); -} - -.cx-text-2-light { - font-weight: var(--cx-text-2-light-font-weight); - font-size: var(--cx-text-2-font-size); - line-height: var(--cx-text-2-line-height); -} - -.cx-text-3 { - font-weight: var(--cx-text-3-font-weight); - font-size: var(--cx-text-3-font-size); - line-height: var(--cx-text-3-line-height); -} - -.cx-text-3-strong { - font-weight: var(--cx-text-3-strong-font-weight); - font-size: var(--cx-text-3-font-size); - line-height: var(--cx-text-3-line-height); -} - -.cx-text-3-light { - font-weight: var(--cx-text-3-light-font-weight); - font-size: var(--cx-text-3-font-size); - line-height: var(--cx-text-3-line-height); -} - -.cx-text-4 { - font-weight: var(--cx-text-4-font-weight); - font-size: var(--cx-text-4-font-size); - line-height: var(--cx-text-4-line-height); -} - -.cx-text-4-strong { - font-weight: var(--cx-text-4-strong-font-weight); - font-size: var(--cx-text-4-font-size); - line-height: var(--cx-text-4-line-height); -} - -.cx-text-4-light { - font-weight: var(--cx-text-4-light-font-weight); - font-size: var(--cx-text-4-font-size); - line-height: var(--cx-text-4-line-height); -} - -.cx-text-jumbo { - font-weight: var(--cx-text-jumbo-font-weight); - font-size: var(--cx-text-jumbo-font-size); - line-height: var(--cx-text-jumbo-line-height); -} - -.cx-text-jumbo-mobile { - font-weight: var(--cx-text-jumbo-mobile-font-weight); - font-size: var(--cx-text-jumbo-mobile-font-size); - line-height: var(--cx-text-jumbo-mobile-line-height); -} - -.cx-text-micro { - font-weight: var(--cx-text-micro-font-weight); - font-size: var(--cx-text-micro-font-size); - line-height: var(--cx-text-micro-line-height); -} - -.cx-text-micro-strong { - font-weight: var(--cx-text-micro-strong-font-weight); - font-size: var(--cx-text-micro-font-size); - line-height: var(--cx-text-micro-line-height); -} - -.cx-text-clickable-1 { - font-weight: var(--cx-text-clickable-1-font-weight); - font-size: var(--cx-text-clickable-1-font-size); - line-height: var(--cx-text-clickable-1-line-height); -} - -.cx-text-clickable-2 { - font-weight: var(--cx-text-clickable-2-font-weight); - font-size: var(--cx-text-clickable-2-font-size); - line-height: var(--cx-text-clickable-2-line-height); -} - -.cx-text-clickable-3 { - font-weight: var(--cx-text-clickable-3-font-weight); - font-size: var(--cx-text-clickable-3-font-size); - line-height: var(--cx-text-clickable-3-line-height); -} - .cx-overflow-ellipsis { white-space: nowrap; text-overflow: ellipsis; diff --git a/packages/lib/global-css/typography/text-2.css b/packages/lib/global-css/typography/text-2.css index 7f3de62..455721b 100644 --- a/packages/lib/global-css/typography/text-2.css +++ b/packages/lib/global-css/typography/text-2.css @@ -26,4 +26,4 @@ font-weight: 500; font-size: 1rem; line-height: 1; -} \ No newline at end of file +} diff --git a/packages/lib/global-css/typography/text-3.css b/packages/lib/global-css/typography/text-3.css index 4907769..b20722f 100644 --- a/packages/lib/global-css/typography/text-3.css +++ b/packages/lib/global-css/typography/text-3.css @@ -26,4 +26,4 @@ font-weight: 500; font-size: 0.875rem; line-height: 1; -} \ No newline at end of file +} diff --git a/packages/lib/global-css/typography/text-4.css b/packages/lib/global-css/typography/text-4.css index 110b17f..24e6ff5 100644 --- a/packages/lib/global-css/typography/text-4.css +++ b/packages/lib/global-css/typography/text-4.css @@ -20,4 +20,4 @@ font-weight: 300; font-size: 0.875rem; line-height: 1.6; -} \ No newline at end of file +} diff --git a/packages/lib/global-css/typography/text-jumbo.css b/packages/lib/global-css/typography/text-jumbo.css index 28f07b8..88ec97b 100644 --- a/packages/lib/global-css/typography/text-jumbo.css +++ b/packages/lib/global-css/typography/text-jumbo.css @@ -8,4 +8,4 @@ font-weight: 700; font-size: 2rem; line-height: 1.4; -} \ No newline at end of file +} diff --git a/packages/lib/global-css/typography/text-micro.css b/packages/lib/global-css/typography/text-micro.css index b6e4f86..5557763 100644 --- a/packages/lib/global-css/typography/text-micro.css +++ b/packages/lib/global-css/typography/text-micro.css @@ -8,4 +8,4 @@ max-width: 65ch; text-wrap: pretty; word-break: auto-phrase; -} \ No newline at end of file +} diff --git a/packages/lib/global-css/typography/title-1.css b/packages/lib/global-css/typography/title-1.css index ecf418f..6ef86ab 100644 --- a/packages/lib/global-css/typography/title-1.css +++ b/packages/lib/global-css/typography/title-1.css @@ -3,4 +3,4 @@ font-size: 2.75rem; line-height: 1.6; text-wrap: balance; -} \ No newline at end of file +} diff --git a/packages/lib/global-css/typography/title-2.css b/packages/lib/global-css/typography/title-2.css index 99c9c80..f2822d4 100644 --- a/packages/lib/global-css/typography/title-2.css +++ b/packages/lib/global-css/typography/title-2.css @@ -3,4 +3,4 @@ font-size: 2.25rem; line-height: 1.6; text-wrap: balance; -} \ No newline at end of file +} diff --git a/packages/lib/global-css/typography/title-3.css b/packages/lib/global-css/typography/title-3.css index e3eda2a..7d86741 100644 --- a/packages/lib/global-css/typography/title-3.css +++ b/packages/lib/global-css/typography/title-3.css @@ -3,4 +3,4 @@ font-size: 1.75rem; line-height: 1.6; text-wrap: balance; -} \ No newline at end of file +} diff --git a/packages/lib/global-css/typography/title-4.css b/packages/lib/global-css/typography/title-4.css index c68f187..04954ee 100644 --- a/packages/lib/global-css/typography/title-4.css +++ b/packages/lib/global-css/typography/title-4.css @@ -3,4 +3,4 @@ font-size: 1.5rem; line-height: 1.6; text-wrap: balance; -} \ No newline at end of file +} diff --git a/packages/lib/global-css/typography/title-5.css b/packages/lib/global-css/typography/title-5.css index 372f74c..649db25 100644 --- a/packages/lib/global-css/typography/title-5.css +++ b/packages/lib/global-css/typography/title-5.css @@ -3,4 +3,4 @@ font-size: 1.125rem; line-height: 1.125; text-wrap: balance; -} \ No newline at end of file +} diff --git a/packages/lib/global-styles.css b/packages/lib/global-styles.css index d537c55..eaff636 100644 --- a/packages/lib/global-styles.css +++ b/packages/lib/global-styles.css @@ -13,6 +13,16 @@ @import "global-css/a11y.css"; @import "global-css/margins.css"; @import "global-css/typography.css"; +@import "global-css/typography/title-1.css"; +@import "global-css/typography/title-2.css"; +@import "global-css/typography/title-3.css"; +@import "global-css/typography/title-4.css"; +@import "global-css/typography/title-5.css"; +@import "global-css/typography/text-1.css"; +@import "global-css/typography/text-2.css"; +@import "global-css/typography/text-3.css"; +@import "global-css/typography/text-4.css"; +@import "global-css/typography/text-micro.css"; @import "global-css/animations.css"; /* Components */ From b03d8befe025e0827d3852aeb78671ee1548e399 Mon Sep 17 00:00:00 2001 From: rebalv <rebekka.alvsvaag@computas.com> Date: Thu, 6 Nov 2025 16:21:27 +0100 Subject: [PATCH 15/16] #1067 - chore: removed max width for the cards --- packages/lib/components/card/card.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/lib/components/card/card.ts b/packages/lib/components/card/card.ts index fe4359e..e024537 100644 --- a/packages/lib/components/card/card.ts +++ b/packages/lib/components/card/card.ts @@ -13,7 +13,6 @@ export class Card extends LitElement { position: relative; height: 100%; width: 100%; - max-width: 500px; border-radius: 24px; overflow: hidden; display: flex; @@ -103,7 +102,6 @@ export class Card extends LitElement { .card { flex-direction: column; height: auto; - max-width: 343px; } .card-image { From bf2f81ba908c1a3dca9483d124fb574380d5239a Mon Sep 17 00:00:00 2001 From: rebalv <rebekka.alvsvaag@computas.com> Date: Tue, 11 Nov 2025 12:47:45 +0100 Subject: [PATCH 16/16] #1067 - feat: removed href and changed naming --- packages/lib/components/card/Overview.mdx | 6 +-- packages/lib/components/card/card.stories.ts | 9 ++-- packages/lib/components/card/card.ts | 51 +++++++------------- 3 files changed, 25 insertions(+), 41 deletions(-) diff --git a/packages/lib/components/card/Overview.mdx b/packages/lib/components/card/Overview.mdx index 1aa8d2b..7b10c51 100644 --- a/packages/lib/components/card/Overview.mdx +++ b/packages/lib/components/card/Overview.mdx @@ -20,18 +20,18 @@ import { CxCard } from '@computas/designsystem/card/react'; ``` ## Default -A card can consist of an **image**, **title**, **subtitle** and **other**. The **title** and **image** can be set as properties, while **subtitle** and **other** use slots for maximum flexibility. To make a card clickable, provide an `href` property which will wrap the entire card in a link. +A card can consist of an **image**, **title**, **subtitle** and **body content**. The **title** and **image** can be set as properties, while **subtitle** and **body** use slots for maximum flexibility. <Canvas of={stories.Default} /> ## Content slots The card supports several content slots for customization: - **`subtitle`** - For metadata like time, location, or categories -- **`other`** - For additional content like buttons, tags, or other actions +- **`body`** - For additional content like buttons, tags, or other actions <Source code={`<cx-card image="https://example.com/image.jpg" title="Card Title"> <span slot="subtitle">14:00 - 16:00 • Oslo, Norway</span> - <button slot="other" class="cx-btn__secondary">Learn more</button> + <button slot="body" class="cx-btn__secondary">Learn more</button> </cx-card>`} /> \ No newline at end of file diff --git a/packages/lib/components/card/card.stories.ts b/packages/lib/components/card/card.stories.ts index f35895c..c23f181 100644 --- a/packages/lib/components/card/card.stories.ts +++ b/packages/lib/components/card/card.stories.ts @@ -11,7 +11,6 @@ const meta: Meta = { argTypes: { title: { control: 'text' }, image: { control: 'text' }, - href: { control: 'text' }, }, }; @@ -20,13 +19,15 @@ type Story = StoryObj; export const Default: Story = { args: { - title: 'Title', + title: 'Card Title', image: 'https://picsum.photos/500/220', }, render: (args) => html` - <cx-card title="${args.title}" image="${args.image}" href="${args.href || ''}"> + <cx-card title="${args.title}" image="${args.image}"> <span slot="subtitle">14:00 - 16:00 • Oslo, Norway</span> - <span slot="other">Other content</span> + <div slot="body"> + <p>Additional body content</p> + </div> </cx-card> `, }; diff --git a/packages/lib/components/card/card.ts b/packages/lib/components/card/card.ts index e024537..9c49917 100644 --- a/packages/lib/components/card/card.ts +++ b/packages/lib/components/card/card.ts @@ -21,10 +21,6 @@ export class Card extends LitElement { color: inherit; } - .card.clickable { - cursor: pointer; - } - .card-image { width: 100%; height: 192px; @@ -82,7 +78,7 @@ export class Card extends LitElement { align-content: center; } - .card-other { + .card-body { display: flex; gap: var(--cx-spacing-2); flex-wrap: wrap; @@ -126,40 +122,27 @@ export class Card extends LitElement { @property({ type: String, reflect: true }) image = ''; - @property({ type: String, reflect: true }) - href = ''; - render() { - const cardContent = html` - <div class="card-image"> - ${this.image ? html`<img src="${this.image}" alt="" />` : html`<slot name="image"></slot>`} - </div> - <div class="card-info"> - <div class="card-subtitle cx-text-4"> - <slot name="subtitle"></slot> + return html` + <div class="card"> + <div class="card-image"> + ${this.image ? html`<img src="${this.image}" alt="" />` : html`<slot name="image"></slot>`} </div> - ${ - this.title - ? html`<div class="card-title cx-text-1">${this.title}</div>` - : html`<div class="card-title cx-text-1"><slot name="title"></slot></div>` - } - <div class="card-other"> - <slot name="other"></slot> + <div class="card-info"> + <div class="card-subtitle cx-text-4"> + <slot name="subtitle"></slot> + </div> + ${ + this.title + ? html`<div class="card-title cx-text-1">${this.title}</div>` + : html`<div class="card-title cx-text-1"><slot name="title"></slot></div>` + } + <div class="card-body"> + <slot name="body"></slot> + </div> </div> </div> `; - - return this.href - ? html` - <a href="${this.href}" class="card clickable"> - ${cardContent} - </a> - ` - : html` - <div class="card"> - ${cardContent} - </div> - `; } }