From 6f783cc88767fb943ac266a5b38d67e63192ab50 Mon Sep 17 00:00:00 2001 From: frideska Date: Tue, 17 Dec 2024 14:28:23 +0100 Subject: [PATCH 01/12] feat(link): link component --- packages/lib/components/link/Overview.mdx | 15 +++++++ packages/lib/components/link/link.css | 43 ++++++++++++++++++++ packages/lib/components/link/link.stories.ts | 19 +++++++++ packages/lib/global-styles.css | 31 +++++++------- 4 files changed, 93 insertions(+), 15 deletions(-) create mode 100644 packages/lib/components/link/Overview.mdx create mode 100644 packages/lib/components/link/link.css create mode 100644 packages/lib/components/link/link.stories.ts diff --git a/packages/lib/components/link/Overview.mdx b/packages/lib/components/link/Overview.mdx new file mode 100644 index 0000000..29b6615 --- /dev/null +++ b/packages/lib/components/link/Overview.mdx @@ -0,0 +1,15 @@ +import { Canvas, Meta, Title } from '@storybook/blocks'; + +import * as linkStories from './link.stories'; + + + +Link + +### Link sizes + + + +### Inline link + + diff --git a/packages/lib/components/link/link.css b/packages/lib/components/link/link.css new file mode 100644 index 0000000..dbf8928 --- /dev/null +++ b/packages/lib/components/link/link.css @@ -0,0 +1,43 @@ +.cx-link { + --underline-height: 6px; + color: var(--cx-color-text-primary); + line-height: 1.125rem; + font-size: 1.125rem; + font-weight: 600; + + text-decoration-thickness: 2px; + text-decoration-line: underline; + text-decoration-skip-ink: none; + text-underline-offset: 0.3rem; + text-underline-position: from-font; + text-decoration-color: transparent; + user-select: none; + text-decoration-color: var(--cx-color-border-primary); + + &:hover { + text-decoration-style: wavy; + text-decoration-color: var(--cx-color-border-accent-1); + transition: text-decoration-color 200ms ease; + } + + &:active { + text-underline-offset: 0.4rem; + } + + &.cx-link--small { + line-height: 0.875rem; + font-size: 0.875rem; + font-weight: 600; + } + + &.cx-link--inline { + line-height: inherit; + font-size: inherit; + font-weight: 600; + text-underline-offset: 0.175rem; + + &:active { + text-underline-offset: 0.25rem; + } + } +} diff --git a/packages/lib/components/link/link.stories.ts b/packages/lib/components/link/link.stories.ts new file mode 100644 index 0000000..a3e8e70 --- /dev/null +++ b/packages/lib/components/link/link.stories.ts @@ -0,0 +1,19 @@ +import type { Meta, StoryObj } from '@storybook/web-components'; +import { html } from 'lit'; + +export default { + title: 'Components/Link', +} satisfies Meta; + +export const Link: StoryObj = { + render: () => html` +Medium link +Small link + `, +}; + +export const InlineLink: StoryObj = { + render: () => html` +
Lorem ipsum dolor sit amet Inline link consectetur. Justo orci pellentesque magna quis. Lorem ipsum dolor sit amet consectetur. Justo orci pellentesque magna quis.
+ `, +}; diff --git a/packages/lib/global-styles.css b/packages/lib/global-styles.css index 94b0054..3311666 100644 --- a/packages/lib/global-styles.css +++ b/packages/lib/global-styles.css @@ -1,23 +1,24 @@ -@import "https://unpkg.com/open-props/easings.min.css"; +@import 'https://unpkg.com/open-props/easings.min.css'; /* Import CSS reset first */ -@import "global-css/css-reset.css"; +@import 'global-css/css-reset.css'; /* Tokens */ -@import "global-css/base-color-tokens.css"; -@import "global-css/purpose-color-tokens.css"; -@import "global-css/spacing-tokens.css"; -@import "global-css/radius-tokens.css"; +@import 'global-css/base-color-tokens.css'; +@import 'global-css/purpose-color-tokens.css'; +@import 'global-css/spacing-tokens.css'; +@import 'global-css/radius-tokens.css'; /* Utilities */ -@import "global-css/a11y.css"; -@import "global-css/margins.css"; -@import "global-css/typography.css"; -@import "global-css/animations.css"; +@import 'global-css/a11y.css'; +@import 'global-css/margins.css'; +@import 'global-css/typography.css'; +@import 'global-css/animations.css'; /* Components */ -@import "components/button/button.css"; -@import "components/chips/chip.css"; -@import "components/form-field/form-field.css"; -@import "components/input/input.css"; -@import "components/tabs/tab.css"; +@import 'components/button/button.css'; +@import 'components/chips/chip.css'; +@import 'components/form-field/form-field.css'; +@import 'components/input/input.css'; +@import 'components/link/link.css'; +@import 'components/tabs/tab.css'; From 31e1ada29605b528faa04b152b8e24c14e224b62 Mon Sep 17 00:00:00 2001 From: frideska Date: Tue, 17 Dec 2024 15:22:12 +0100 Subject: [PATCH 02/12] feat(links): with icons --- packages/lib/components/link/Overview.mdx | 4 ++++ packages/lib/components/link/link.css | 22 ++++++++++++++++---- packages/lib/components/link/link.stories.ts | 9 +++++++- 3 files changed, 30 insertions(+), 5 deletions(-) diff --git a/packages/lib/components/link/Overview.mdx b/packages/lib/components/link/Overview.mdx index 29b6615..221e3af 100644 --- a/packages/lib/components/link/Overview.mdx +++ b/packages/lib/components/link/Overview.mdx @@ -13,3 +13,7 @@ import * as linkStories from './link.stories'; ### Inline link + +### Link with icon + + diff --git a/packages/lib/components/link/link.css b/packages/lib/components/link/link.css index dbf8928..7f37c8f 100644 --- a/packages/lib/components/link/link.css +++ b/packages/lib/components/link/link.css @@ -4,15 +4,17 @@ line-height: 1.125rem; font-size: 1.125rem; font-weight: 600; + display: inline-flex; + align-items: center; + gap: var(--cx-spacing-2); text-decoration-thickness: 2px; + text-decoration-color: var(--cx-color-border-primary); text-decoration-line: underline; text-decoration-skip-ink: none; text-underline-offset: 0.3rem; text-underline-position: from-font; - text-decoration-color: transparent; user-select: none; - text-decoration-color: var(--cx-color-border-primary); &:hover { text-decoration-style: wavy; @@ -24,10 +26,22 @@ text-underline-offset: 0.4rem; } - &.cx-link--small { + .cx-link__icon { + --icon-size: var(--cx-spacing-6); + > * { + width: var(--icon-size); + height: var(--icon-size); + fill: currentColor; + } + } + + &.cx-link--sm { line-height: 0.875rem; font-size: 0.875rem; - font-weight: 600; + } + + &.cx-link--sm .cx-link__icon { + --icon-size: var(--cx-spacing-5); } &.cx-link--inline { diff --git a/packages/lib/components/link/link.stories.ts b/packages/lib/components/link/link.stories.ts index a3e8e70..8df7397 100644 --- a/packages/lib/components/link/link.stories.ts +++ b/packages/lib/components/link/link.stories.ts @@ -8,7 +8,7 @@ export default { export const Link: StoryObj = { render: () => html` Medium link -Small link +Small link `, }; @@ -17,3 +17,10 @@ export const InlineLink: StoryObj = {
Lorem ipsum dolor sit amet Inline link consectetur. Justo orci pellentesque magna quis. Lorem ipsum dolor sit amet consectetur. Justo orci pellentesque magna quis.
`, }; + +export const IconLink: StoryObj = { + render: () => html` +Link med ikon +Link med ikon + `, +}; From 37b2a5419b81651a370ca013e76454c353c21875 Mon Sep 17 00:00:00 2001 From: frideska Date: Wed, 18 Dec 2024 09:21:20 +0100 Subject: [PATCH 03/12] fix linting --- packages/lib/components/link/link.css | 110 +++++++++++++------------- packages/lib/global-styles.css | 32 ++++---- 2 files changed, 71 insertions(+), 71 deletions(-) diff --git a/packages/lib/components/link/link.css b/packages/lib/components/link/link.css index 7f37c8f..b6bb5ac 100644 --- a/packages/lib/components/link/link.css +++ b/packages/lib/components/link/link.css @@ -1,57 +1,57 @@ .cx-link { - --underline-height: 6px; - color: var(--cx-color-text-primary); - line-height: 1.125rem; - font-size: 1.125rem; - font-weight: 600; - display: inline-flex; - align-items: center; - gap: var(--cx-spacing-2); - - text-decoration-thickness: 2px; - text-decoration-color: var(--cx-color-border-primary); - text-decoration-line: underline; - text-decoration-skip-ink: none; - text-underline-offset: 0.3rem; - text-underline-position: from-font; - user-select: none; - - &:hover { - text-decoration-style: wavy; - text-decoration-color: var(--cx-color-border-accent-1); - transition: text-decoration-color 200ms ease; - } - - &:active { - text-underline-offset: 0.4rem; - } - - .cx-link__icon { - --icon-size: var(--cx-spacing-6); - > * { - width: var(--icon-size); - height: var(--icon-size); - fill: currentColor; - } - } - - &.cx-link--sm { - line-height: 0.875rem; - font-size: 0.875rem; - } - - &.cx-link--sm .cx-link__icon { - --icon-size: var(--cx-spacing-5); - } - - &.cx-link--inline { - line-height: inherit; - font-size: inherit; - font-weight: 600; - text-underline-offset: 0.175rem; - - &:active { - text-underline-offset: 0.25rem; - } - } + --underline-height: 6px; + color: var(--cx-color-text-primary); + line-height: 1.125rem; + font-size: 1.125rem; + font-weight: 600; + display: inline-flex; + align-items: center; + gap: var(--cx-spacing-2); + + text-decoration-thickness: 2px; + text-decoration-color: var(--cx-color-border-primary); + text-decoration-line: underline; + text-decoration-skip-ink: none; + text-underline-offset: 0.3rem; + text-underline-position: from-font; + user-select: none; + + &:hover { + text-decoration-style: wavy; + text-decoration-color: var(--cx-color-border-accent-1); + transition: text-decoration-color 200ms ease; + } + + &:active { + text-underline-offset: 0.4rem; + } + + .cx-link__icon { + --icon-size: var(--cx-spacing-6); + > * { + width: var(--icon-size); + height: var(--icon-size); + fill: currentColor; + } + } + + &.cx-link--sm { + line-height: 0.875rem; + font-size: 0.875rem; + } + + &.cx-link--sm .cx-link__icon { + --icon-size: var(--cx-spacing-5); + } + + &.cx-link--inline { + line-height: inherit; + font-size: inherit; + font-weight: 600; + text-underline-offset: 0.175rem; + + &:active { + text-underline-offset: 0.25rem; + } + } } diff --git a/packages/lib/global-styles.css b/packages/lib/global-styles.css index 3311666..298ac4c 100644 --- a/packages/lib/global-styles.css +++ b/packages/lib/global-styles.css @@ -1,24 +1,24 @@ -@import 'https://unpkg.com/open-props/easings.min.css'; +@import "https://unpkg.com/open-props/easings.min.css"; /* Import CSS reset first */ -@import 'global-css/css-reset.css'; +@import "global-css/css-reset.css"; /* Tokens */ -@import 'global-css/base-color-tokens.css'; -@import 'global-css/purpose-color-tokens.css'; -@import 'global-css/spacing-tokens.css'; -@import 'global-css/radius-tokens.css'; +@import "global-css/base-color-tokens.css"; +@import "global-css/purpose-color-tokens.css"; +@import "global-css/spacing-tokens.css"; +@import "global-css/radius-tokens.css"; /* Utilities */ -@import 'global-css/a11y.css'; -@import 'global-css/margins.css'; -@import 'global-css/typography.css'; -@import 'global-css/animations.css'; +@import "global-css/a11y.css"; +@import "global-css/margins.css"; +@import "global-css/typography.css"; +@import "global-css/animations.css"; /* Components */ -@import 'components/button/button.css'; -@import 'components/chips/chip.css'; -@import 'components/form-field/form-field.css'; -@import 'components/input/input.css'; -@import 'components/link/link.css'; -@import 'components/tabs/tab.css'; +@import "components/button/button.css"; +@import "components/chips/chip.css"; +@import "components/form-field/form-field.css"; +@import "components/input/input.css"; +@import "components/link/link.css"; +@import "components/tabs/tab.css"; From e4b6e967124ef2bc6218a2c4f3066d0772640718 Mon Sep 17 00:00:00 2001 From: frideska Date: Wed, 8 Jan 2025 10:13:13 +0100 Subject: [PATCH 04/12] feat(link): link component --- .../lib/components/link/link-squiggle.svg | 3 + packages/lib/components/link/link.css | 140 +++++++++++------- packages/lib/components/link/link.stories.ts | 8 +- 3 files changed, 94 insertions(+), 57 deletions(-) create mode 100644 packages/lib/components/link/link-squiggle.svg diff --git a/packages/lib/components/link/link-squiggle.svg b/packages/lib/components/link/link-squiggle.svg new file mode 100644 index 0000000..5527c58 --- /dev/null +++ b/packages/lib/components/link/link-squiggle.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/lib/components/link/link.css b/packages/lib/components/link/link.css index b6bb5ac..d7cb46a 100644 --- a/packages/lib/components/link/link.css +++ b/packages/lib/components/link/link.css @@ -1,57 +1,87 @@ +@keyframes waveline { + to { + background-position: 150px; + } +} + .cx-link { - --underline-height: 6px; - color: var(--cx-color-text-primary); - line-height: 1.125rem; - font-size: 1.125rem; - font-weight: 600; - display: inline-flex; - align-items: center; - gap: var(--cx-spacing-2); - - text-decoration-thickness: 2px; - text-decoration-color: var(--cx-color-border-primary); - text-decoration-line: underline; - text-decoration-skip-ink: none; - text-underline-offset: 0.3rem; - text-underline-position: from-font; - user-select: none; - - &:hover { - text-decoration-style: wavy; - text-decoration-color: var(--cx-color-border-accent-1); - transition: text-decoration-color 200ms ease; - } - - &:active { - text-underline-offset: 0.4rem; - } - - .cx-link__icon { - --icon-size: var(--cx-spacing-6); - > * { - width: var(--icon-size); - height: var(--icon-size); - fill: currentColor; - } - } - - &.cx-link--sm { - line-height: 0.875rem; - font-size: 0.875rem; - } - - &.cx-link--sm .cx-link__icon { - --icon-size: var(--cx-spacing-5); - } - - &.cx-link--inline { - line-height: inherit; - font-size: inherit; - font-weight: 600; - text-underline-offset: 0.175rem; - - &:active { - text-underline-offset: 0.25rem; - } - } + --line-height: 1.5rem; + --underline-height: 2px; + --underline-squiggle-height: 7px; + --underline-offset: calc( + var(--line-height) + + ((var(--underline-squiggle-height) - var(--underline-height)) / 2) + ); + --underline-squiggle-offset: var(--line-height); + + color: var(--cx-color-text-primary); + line-height: var(--line-height); + font-size: 1.125rem; + font-weight: 600; + display: inline-flex; + align-items: center; + gap: var(--cx-spacing-2); + text-decoration: none; + position: relative; + + cx-icon { + width: var(--cx-spacing-6); + height: var(--cx-spacing-6); + } + + &::before { + background: var(--cx-color-border-primary); + height: var(--underline-height); + top: var(--underline-offset); + } + + &::after { + opacity: 0; + animation: waveline 6s linear infinite; + background: url(link-squiggle.svg) repeat-x; + height: var(--underline-squiggle-height); + top: var(--underline-squiggle-offset); + } + + &::after, + &::before { + position: absolute; + content: ''; + left: 0; + width: 100%; + background-size: 1rem; + background-position: 0; + transition: all ease 0.5s; + } + + &:hover::before { + opacity: 0; + } + + &:hover::after { + opacity: 1; + } + + &.cx-link--sm { + --line-height: 1.25rem; + font-size: 0.875rem; + + cx-icon { + width: var(--cx-spacing-5); + height: var(--cx-spacing-5); + } + } + + &.cx-link--inline { + line-height: inherit; + font-size: inherit; + font-weight: 600; + + &::before { + top: calc(var(--underline-offset) - 6px); + } + &::after { + top: calc(var(--underline-squiggle-offset) - 6px); + } + } } diff --git a/packages/lib/components/link/link.stories.ts b/packages/lib/components/link/link.stories.ts index 8df7397..007d75f 100644 --- a/packages/lib/components/link/link.stories.ts +++ b/packages/lib/components/link/link.stories.ts @@ -1,5 +1,9 @@ import type { Meta, StoryObj } from '@storybook/web-components'; import { html } from 'lit'; +import { addIcons } from '../icon'; +import { edit } from '../icon/iconRegistry'; + +addIcons(edit); export default { title: 'Components/Link', @@ -20,7 +24,7 @@ export const InlineLink: StoryObj = { export const IconLink: StoryObj = { render: () => html` -Link med ikon -Link med ikon +Link med ikon +Link med ikon `, }; From 48d0de06c19d3fb4664bedd7e4a92bab42a6c1e1 Mon Sep 17 00:00:00 2001 From: frideska Date: Wed, 8 Jan 2025 10:28:37 +0100 Subject: [PATCH 05/12] fix(linting)... --- packages/lib/components/link/link.css | 142 +++++++++++++------------- 1 file changed, 71 insertions(+), 71 deletions(-) diff --git a/packages/lib/components/link/link.css b/packages/lib/components/link/link.css index d7cb46a..081aa9f 100644 --- a/packages/lib/components/link/link.css +++ b/packages/lib/components/link/link.css @@ -1,87 +1,87 @@ @keyframes waveline { - to { - background-position: 150px; - } + to { + background-position: 150px; + } } .cx-link { - --line-height: 1.5rem; - --underline-height: 2px; - --underline-squiggle-height: 7px; - --underline-offset: calc( - var(--line-height) + - ((var(--underline-squiggle-height) - var(--underline-height)) / 2) - ); - --underline-squiggle-offset: var(--line-height); + --line-height: 1.5rem; + --underline-height: 2px; + --underline-squiggle-height: 7px; + --underline-offset: calc( + var(--line-height) + + ((var(--underline-squiggle-height) - var(--underline-height)) / 2) + ); + --underline-squiggle-offset: var(--line-height); - color: var(--cx-color-text-primary); - line-height: var(--line-height); - font-size: 1.125rem; - font-weight: 600; - display: inline-flex; - align-items: center; - gap: var(--cx-spacing-2); - text-decoration: none; - position: relative; + color: var(--cx-color-text-primary); + line-height: var(--line-height); + font-size: 1.125rem; + font-weight: 600; + display: inline-flex; + align-items: center; + gap: var(--cx-spacing-2); + text-decoration: none; + position: relative; - cx-icon { - width: var(--cx-spacing-6); - height: var(--cx-spacing-6); - } + cx-icon { + width: var(--cx-spacing-6); + height: var(--cx-spacing-6); + } - &::before { - background: var(--cx-color-border-primary); - height: var(--underline-height); - top: var(--underline-offset); - } + &::before { + background: var(--cx-color-border-primary); + height: var(--underline-height); + top: var(--underline-offset); + } - &::after { - opacity: 0; - animation: waveline 6s linear infinite; - background: url(link-squiggle.svg) repeat-x; - height: var(--underline-squiggle-height); - top: var(--underline-squiggle-offset); - } + &::after { + opacity: 0; + animation: waveline 6s linear infinite; + background: url(link-squiggle.svg) repeat-x; + height: var(--underline-squiggle-height); + top: var(--underline-squiggle-offset); + } - &::after, - &::before { - position: absolute; - content: ''; - left: 0; - width: 100%; - background-size: 1rem; - background-position: 0; - transition: all ease 0.5s; - } + &::after, + &::before { + position: absolute; + content: ""; + left: 0; + width: 100%; + background-size: 1rem; + background-position: 0; + transition: all ease 0.5s; + } - &:hover::before { - opacity: 0; - } + &:hover::before { + opacity: 0; + } - &:hover::after { - opacity: 1; - } + &:hover::after { + opacity: 1; + } - &.cx-link--sm { - --line-height: 1.25rem; - font-size: 0.875rem; + &.cx-link--sm { + --line-height: 1.25rem; + font-size: 0.875rem; - cx-icon { - width: var(--cx-spacing-5); - height: var(--cx-spacing-5); - } - } + cx-icon { + width: var(--cx-spacing-5); + height: var(--cx-spacing-5); + } + } - &.cx-link--inline { - line-height: inherit; - font-size: inherit; - font-weight: 600; + &.cx-link--inline { + line-height: inherit; + font-size: inherit; + font-weight: 600; - &::before { - top: calc(var(--underline-offset) - 6px); - } - &::after { - top: calc(var(--underline-squiggle-offset) - 6px); - } - } + &::before { + top: calc(var(--underline-offset) - 6px); + } + &::after { + top: calc(var(--underline-squiggle-offset) - 6px); + } + } } From d911f18b991a25b07a01cfb6ff43f649cff31baa Mon Sep 17 00:00:00 2001 From: frideska Date: Thu, 9 Jan 2025 13:49:23 +0100 Subject: [PATCH 06/12] refactor(link): squiggle svg encoded --- packages/lib/components/link/link-squiggle.svg | 3 --- packages/lib/components/link/link.css | 3 ++- 2 files changed, 2 insertions(+), 4 deletions(-) delete mode 100644 packages/lib/components/link/link-squiggle.svg diff --git a/packages/lib/components/link/link-squiggle.svg b/packages/lib/components/link/link-squiggle.svg deleted file mode 100644 index 5527c58..0000000 --- a/packages/lib/components/link/link-squiggle.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/packages/lib/components/link/link.css b/packages/lib/components/link/link.css index 081aa9f..aee02c3 100644 --- a/packages/lib/components/link/link.css +++ b/packages/lib/components/link/link.css @@ -38,7 +38,8 @@ &::after { opacity: 0; animation: waveline 6s linear infinite; - background: url(link-squiggle.svg) repeat-x; + background-image: url('data:image/svg+xml,'); + background-repeat: repeat-x; height: var(--underline-squiggle-height); top: var(--underline-squiggle-offset); } From 300149943766f36a98f620d5c8d13c4c5d7838fe Mon Sep 17 00:00:00 2001 From: frideska Date: Fri, 10 Jan 2025 10:19:25 +0100 Subject: [PATCH 07/12] refactor(link): inline is now default link --- packages/lib/components/link/Overview.mdx | 10 +++---- packages/lib/components/link/link.css | 28 +++++++------------- packages/lib/components/link/link.stories.ts | 15 +++-------- 3 files changed, 16 insertions(+), 37 deletions(-) diff --git a/packages/lib/components/link/Overview.mdx b/packages/lib/components/link/Overview.mdx index 221e3af..5c61038 100644 --- a/packages/lib/components/link/Overview.mdx +++ b/packages/lib/components/link/Overview.mdx @@ -6,14 +6,10 @@ import * as linkStories from './link.stories'; Link -### Link sizes +### Basic link -### Inline link +### Standalone link - - -### Link with icon - - + diff --git a/packages/lib/components/link/link.css b/packages/lib/components/link/link.css index aee02c3..935de84 100644 --- a/packages/lib/components/link/link.css +++ b/packages/lib/components/link/link.css @@ -15,8 +15,8 @@ --underline-squiggle-offset: var(--line-height); color: var(--cx-color-text-primary); - line-height: var(--line-height); - font-size: 1.125rem; + line-height: inherit; + font-size: inherit; font-weight: 600; display: inline-flex; align-items: center; @@ -32,7 +32,7 @@ &::before { background: var(--cx-color-border-primary); height: var(--underline-height); - top: var(--underline-offset); + top: calc(var(--underline-offset) - 6px); } &::after { @@ -41,7 +41,7 @@ background-image: url('data:image/svg+xml,'); background-repeat: repeat-x; height: var(--underline-squiggle-height); - top: var(--underline-squiggle-offset); + top: calc(var(--underline-squiggle-offset) - 6px); } &::after, @@ -63,26 +63,16 @@ opacity: 1; } - &.cx-link--sm { - --line-height: 1.25rem; - font-size: 0.875rem; - - cx-icon { - width: var(--cx-spacing-5); - height: var(--cx-spacing-5); - } - } - - &.cx-link--inline { - line-height: inherit; - font-size: inherit; + &.cx-link--standalone { + line-height: var(--line-height); + font-size: 1.125rem; font-weight: 600; &::before { - top: calc(var(--underline-offset) - 6px); + top: var(--underline-offset); } &::after { - top: calc(var(--underline-squiggle-offset) - 6px); + top: var(--underline-squiggle-offset); } } } diff --git a/packages/lib/components/link/link.stories.ts b/packages/lib/components/link/link.stories.ts index 007d75f..5ab9076 100644 --- a/packages/lib/components/link/link.stories.ts +++ b/packages/lib/components/link/link.stories.ts @@ -11,20 +11,13 @@ export default { export const Link: StoryObj = { render: () => html` -Medium link -Small link +
Lorem ipsum dolor sit amet basic link consectetur. Justo orci pellentesque magna quis. Lorem ipsum dolor sit amet consectetur. Justo orci pellentesque magna quis.
`, }; -export const InlineLink: StoryObj = { +export const StandaloneLink: StoryObj = { render: () => html` -
Lorem ipsum dolor sit amet Inline link consectetur. Justo orci pellentesque magna quis. Lorem ipsum dolor sit amet consectetur. Justo orci pellentesque magna quis.
- `, -}; - -export const IconLink: StoryObj = { - render: () => html` -Link med ikon -Link med ikon +Standalone link +Standalone link with icon `, }; From c6b3f1bd9592be84358dada1201f8b42a69ac0de Mon Sep 17 00:00:00 2001 From: frideska Date: Fri, 10 Jan 2025 15:35:55 +0100 Subject: [PATCH 08/12] fix(link): animation improved --- packages/lib/components/link/link.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/lib/components/link/link.css b/packages/lib/components/link/link.css index 935de84..2f8aaec 100644 --- a/packages/lib/components/link/link.css +++ b/packages/lib/components/link/link.css @@ -1,6 +1,6 @@ @keyframes waveline { to { - background-position: 150px; + background-position: 16px; } } @@ -37,7 +37,7 @@ &::after { opacity: 0; - animation: waveline 6s linear infinite; + animation: waveline 0.5s linear infinite; background-image: url('data:image/svg+xml,'); background-repeat: repeat-x; height: var(--underline-squiggle-height); From fe8580f24a7558d7162f8dc7d00b08e10369fcf9 Mon Sep 17 00:00:00 2001 From: frideska Date: Fri, 10 Jan 2025 16:34:35 +0100 Subject: [PATCH 09/12] refactor(tabs): Added underline-wave for tabs --- packages/lib/components/tabs/tab.css | 72 ++++++++++++++++++---------- 1 file changed, 46 insertions(+), 26 deletions(-) diff --git a/packages/lib/components/tabs/tab.css b/packages/lib/components/tabs/tab.css index e0bd342..25af7e2 100644 --- a/packages/lib/components/tabs/tab.css +++ b/packages/lib/components/tabs/tab.css @@ -1,22 +1,27 @@ +@keyframes waveline { + to { + background-position: 16px; + } +} + .cx-tab { + --line-height: 1.5rem; + --underline-squiggle-height: 7px; --underline-height: 6px; + --underline-squiggle-offset: calc( + var(--line-height) + + (var(--cx-spacing-1) * 2) + + (var(--underline-height) / 2) + ); + display: inline-flex; position: relative; padding: 7px 0px calc(var(--cx-spacing-1) + var(--underline-height)); - color: var(--cx-color-text-primary); - line-height: 1rem; + line-height: var(--line-height); font-size: 1rem; font-weight: 500; - - text-decoration-thickness: 2px; - text-decoration-style: wavy; - text-decoration-line: underline; - text-decoration-skip-ink: none; - text-underline-offset: 0.125rem; - text-underline-position: from-font; - text-decoration-color: transparent; - transition: text-decoration-color 100ms ease, text-underline-offset 100ms ease; + text-decoration: none; user-select: none; &:hover { @@ -24,29 +29,44 @@ text-decoration-color: var(--cx-color-text-primary); } - &:active { - text-underline-offset: 0.5rem; + &::before { + content: ""; + position: absolute; + inset: auto 0 0; + transition: background-color 0.3s ease; + height: var(--underline-height); + background: transparent; + border-radius: var(--cx-radius-mini) var(--cx-radius-mini) 0px 0px; } -} -.cx-tab::before { - content: ""; - position: absolute; - inset: auto 0 0; - transition: background-color 0.3s ease; - height: var(--underline-height); - background: transparent; - border-radius: var(--cx-radius-mini) var(--cx-radius-mini) 0px 0px; -} + &::after { + position: absolute; + opacity: 0; + content: ""; + top: calc(var(--underline-squiggle-offset)); + left: 0; + width: 100%; + height: var(--underline-squiggle-height); + background-size: 1rem; + background-position: 0; + animation: waveline 0.5s linear infinite; + transition: all ease 0.5s; + background-image: url('data:image/svg+xml,'); + background-repeat: repeat-x; + } -.cx-tab--active { - &:hover { - text-decoration-color: transparent; + &:hover::after { + opacity: 1; } +} +.cx-tab--active { &::before { background-color: var(--cx-color-background-accent-5); } + &:hover::after { + opacity: 0; + } } .cx-tab ~ .cx-tab { From 2a19e1d93c4db4d3cd98312fa06714ee551c5768 Mon Sep 17 00:00:00 2001 From: frideska Date: Mon, 13 Jan 2025 09:34:24 +0100 Subject: [PATCH 10/12] Moved waveline animation to shared file --- packages/lib/components/link/link.css | 8 +------- packages/lib/components/tabs/tab-group.ts | 2 ++ packages/lib/components/tabs/tab.css | 8 +------- packages/lib/global-css/animations.css | 6 ++++++ 4 files changed, 10 insertions(+), 14 deletions(-) diff --git a/packages/lib/components/link/link.css b/packages/lib/components/link/link.css index 2f8aaec..d4f565f 100644 --- a/packages/lib/components/link/link.css +++ b/packages/lib/components/link/link.css @@ -1,9 +1,3 @@ -@keyframes waveline { - to { - background-position: 16px; - } -} - .cx-link { --line-height: 1.5rem; --underline-height: 2px; @@ -37,7 +31,7 @@ &::after { opacity: 0; - animation: waveline 0.5s linear infinite; + animation: cx-waveline 0.5s linear infinite; background-image: url('data:image/svg+xml,'); background-repeat: repeat-x; height: var(--underline-squiggle-height); diff --git a/packages/lib/components/tabs/tab-group.ts b/packages/lib/components/tabs/tab-group.ts index d870922..0933591 100644 --- a/packages/lib/components/tabs/tab-group.ts +++ b/packages/lib/components/tabs/tab-group.ts @@ -4,6 +4,7 @@ import { classMap } from 'lit/directives/class-map.js'; import { provide } from '@lit/context'; import a11yStyles from '../../global-css/a11y.css?inline'; +import animationStyles from '../../global-css/animations.css?inline'; import type { Tab } from './tab'; import { activeIndexContext } from './tab-context'; import tabStyles from './tab.css?inline'; @@ -13,6 +14,7 @@ export class TabGroup extends LitElement { static styles = [ unsafeCSS(tabStyles), unsafeCSS(a11yStyles), + unsafeCSS(animationStyles), css` :host { display: flex; diff --git a/packages/lib/components/tabs/tab.css b/packages/lib/components/tabs/tab.css index 25af7e2..8bc2331 100644 --- a/packages/lib/components/tabs/tab.css +++ b/packages/lib/components/tabs/tab.css @@ -1,9 +1,3 @@ -@keyframes waveline { - to { - background-position: 16px; - } -} - .cx-tab { --line-height: 1.5rem; --underline-squiggle-height: 7px; @@ -49,7 +43,7 @@ height: var(--underline-squiggle-height); background-size: 1rem; background-position: 0; - animation: waveline 0.5s linear infinite; + animation: cx-waveline 0.5s linear infinite; transition: all ease 0.5s; background-image: url('data:image/svg+xml,'); background-repeat: repeat-x; diff --git a/packages/lib/global-css/animations.css b/packages/lib/global-css/animations.css index 5525b99..6ef003c 100644 --- a/packages/lib/global-css/animations.css +++ b/packages/lib/global-css/animations.css @@ -80,3 +80,9 @@ background-position: 76% 38%; } } + +@keyframes cx-waveline { + to { + background-position: 16px; + } +} From 7653d011ce8a232a9479e5ea225eeb063a99fe2f Mon Sep 17 00:00:00 2001 From: frideska Date: Mon, 13 Jan 2025 09:44:47 +0100 Subject: [PATCH 11/12] Cleanup --- packages/lib/components/link/link.stories.ts | 4 ---- 1 file changed, 4 deletions(-) diff --git a/packages/lib/components/link/link.stories.ts b/packages/lib/components/link/link.stories.ts index 5ab9076..f7f6276 100644 --- a/packages/lib/components/link/link.stories.ts +++ b/packages/lib/components/link/link.stories.ts @@ -1,9 +1,5 @@ import type { Meta, StoryObj } from '@storybook/web-components'; import { html } from 'lit'; -import { addIcons } from '../icon'; -import { edit } from '../icon/iconRegistry'; - -addIcons(edit); export default { title: 'Components/Link', From a31b66040f2e47558aa94fcaf63b4f78b652644e Mon Sep 17 00:00:00 2001 From: frideska Date: Mon, 13 Jan 2025 09:51:21 +0100 Subject: [PATCH 12/12] docs(link): changelog, stories icon import --- CHANGELOG.md | 3 ++- packages/lib/components/link/link.stories.ts | 1 + packages/lib/dist/package.json | 2 +- 3 files changed, 4 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index ce8fe0a..402cebc 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,8 +1,9 @@ -# 0.0.8 - 19.12.2024 +# 0.0.8 - 13.01.2025 - Lagt til checkbox-komponent - Lagt til alert-komponent - Støtte for ikoner i knapper +- Lagt til lenker # 0.0.7 - 19.12.2024 diff --git a/packages/lib/components/link/link.stories.ts b/packages/lib/components/link/link.stories.ts index f7f6276..6d777af 100644 --- a/packages/lib/components/link/link.stories.ts +++ b/packages/lib/components/link/link.stories.ts @@ -1,5 +1,6 @@ import type { Meta, StoryObj } from '@storybook/web-components'; import { html } from 'lit'; +import '../icon'; export default { title: 'Components/Link', diff --git a/packages/lib/dist/package.json b/packages/lib/dist/package.json index 918be91..64ecb7b 100644 --- a/packages/lib/dist/package.json +++ b/packages/lib/dist/package.json @@ -1,6 +1,6 @@ { "name": "@computas/designsystem", - "version": "0.0.7", + "version": "0.0.8", "description": "The Computas design system", "type": "module", "license": "MIT",