From 5eb6224eb3dbca696d420a791fdb9783378bc574 Mon Sep 17 00:00:00 2001 From: alex_ Date: Tue, 26 Nov 2024 17:37:10 +0100 Subject: [PATCH 01/27] link refactor Refs: #7036 --- .../src/components/link/component.tsx | 17 +++-- .../components/src/components/link/shadow.tsx | 46 ++++++------ .../themes/default/src/components/link.scss | 2 +- packages/themes/default/src/mixins/link.scss | 73 ++++++++++--------- 4 files changed, 73 insertions(+), 65 deletions(-) diff --git a/packages/components/src/components/link/component.tsx b/packages/components/src/components/link/component.tsx index a6c628cab6..559c6c1ae7 100644 --- a/packages/components/src/components/link/component.tsx +++ b/packages/components/src/components/link/component.tsx @@ -52,6 +52,7 @@ import { KolIconTag, KolTooltipWcTag } from '../../core/component-names'; import { translate } from '../../i18n'; import { validateAccessAndShortKey } from '../../schema/validators/access-and-short-key'; import { KolSpanFc } from '../../functional-components'; +import clsx from 'clsx'; /** * @internal @@ -128,7 +129,7 @@ export class KolLinkWc implements LinkAPI, FocusableElement { const hasAriaDescription = Boolean(this.state._ariaDescription?.trim()?.length); return ( - + {isExternal && ( + + ); } diff --git a/packages/themes/default/src/components/link.scss b/packages/themes/default/src/components/link.scss index 47c3428892..a874a432d6 100644 --- a/packages/themes/default/src/components/link.scss +++ b/packages/themes/default/src/components/link.scss @@ -1,7 +1,7 @@ @import '../mixins/link'; @layer kol-theme-component { - :host { + .kol-link { font-family: inherit; } diff --git a/packages/themes/default/src/mixins/link.scss b/packages/themes/default/src/mixins/link.scss index 5f7ab2f842..c0f0e46bfe 100644 --- a/packages/themes/default/src/mixins/link.scss +++ b/packages/themes/default/src/mixins/link.scss @@ -1,44 +1,51 @@ @import './rem'; @mixin kol-link { - :is(a, button) { - color: var(--color-primary); - font-style: normal; - font-weight: 400; - line-height: 1; - } - - :is(a, button):focus { - outline: none; - } + .kol-link { + $root: &; - :is(a, button):focus kol-span-wc { - border-radius: var(--border-radius); - outline: var(--border-width) solid; - } + &__url { + color: var(--color-primary); + font-style: normal; + font-weight: 400; + line-height: 1; - a:is(:focus, :hover):not([aria-disabled]), - button:is(:focus, :hover):not([disabled]) { - .kol-span-wc .span-label { - text-decoration-thickness: 0.25em; + &:focus { + outline: none; + } + &:visited { + color: var(--visited); + } } - } - :is(a, button):visited { - color: var(--visited); - } + &__text { + @at-root #{$root}__url:focus { + border-radius: var(--border-radius); + outline: var(--border-width) solid; + } - .skip { - left: rem(-99999); - overflow: hidden; - position: absolute; - z-index: 9999999; - line-height: 1; - } + .span-label { + @at-root #{$root}__url:is(:focus, :hover):not([aria-disabled]) { + text-decoration-thickness: 0.25em; + } + @at-root #{$root}__url:is(:focus, :hover):not([disabled]) { + text-decoration-thickness: 0.25em; + } + } + } - .skip:focus { - background-color: white; - left: unset; - position: unset; + .skip { + left: rem(-99999); + overflow: hidden; + position: absolute; + z-index: 9999999; + line-height: 1; + } + + .skip:focus { + background-color: white; + left: unset; + position: unset; + } } } From e0bac4c46db74f7c91924136782cf2bfa866d33f Mon Sep 17 00:00:00 2001 From: alex_ Date: Wed, 27 Nov 2024 10:33:51 +0100 Subject: [PATCH 02/27] link refactor Refs: #7036 --- packages/components/src/components/link.scss | 69 ++++++++-------- .../themes/default/src/components/form.scss | 8 +- .../themes/default/src/components/link.scss | 4 +- .../ecl/src/ecl-ec/components/form.scss | 5 +- .../ecl/src/ecl-ec/components/link.scss | 4 +- .../themes/ecl/src/ecl-ec/mixins/link.scss | 19 ++--- .../ecl/src/ecl-eu/components/form.scss | 5 +- .../ecl/src/ecl-eu/components/link.scss | 4 +- .../themes/ecl/src/ecl-eu/mixins/link.scss | 19 ++--- .../themes/itzbund/src/components/form.scss | 4 +- packages/themes/itzbund/src/mixins/link.scss | 79 +++++++++---------- 11 files changed, 109 insertions(+), 111 deletions(-) diff --git a/packages/components/src/components/link.scss b/packages/components/src/components/link.scss index 7656e3fe54..9efd8d816d 100644 --- a/packages/components/src/components/link.scss +++ b/packages/components/src/components/link.scss @@ -1,48 +1,49 @@ @import './@shared/mixins'; -@import '../tooltip/style.scss'; +@import './tooltip/style.scss'; @layer kol-component { - :host { + .kol-link { + $root: &; + display: inline-block; font-size: rem(16); - } - :is(a, button) { - align-items: baseline; - display: inline-flex; - place-items: center; - text-align: left; - text-decoration-line: none; + &__url { + align-items: baseline; + display: inline-flex; + place-items: center; + text-align: left; + text-decoration-line: none; - .kol-span-wc .span-label { - text-decoration-line: underline; - } - } + .skip { + left: rem(-99999); + overflow: hidden; + position: absolute; + z-index: 9999999; + line-height: 1; - a:is(:focus, :hover):not([aria-disabled]), - button:is(:focus, :hover):not([disabled]) { - .kol-span-wc .span-label { - text-decoration-thickness: 0.2em; + &:focus { + background-color: #fff; + left: unset; + padding: 1em; + position: unset; + } + } } - } - .skip { - left: rem(-99999); - overflow: hidden; - position: absolute; - z-index: 9999999; - line-height: 1; - } + &__text { + .span-label { + text-decoration-line: underline; - .skip:focus { - background-color: #fff; - left: unset; - padding: 1em; - position: unset; - } + @at-root #{$root}__url:is(:focus, :hover):not([aria-disabled]) { + text-decoration-line: underline; + } + } + } - .kol-icon.external-link-icon { - display: inline-flex; - margin-left: rem(8); + .kol-icon.external-link-icon { + display: inline-flex; + margin-left: rem(8); + } } } diff --git a/packages/themes/default/src/components/form.scss b/packages/themes/default/src/components/form.scss index dccf1433a0..6abf191f45 100644 --- a/packages/themes/default/src/components/form.scss +++ b/packages/themes/default/src/components/form.scss @@ -3,18 +3,18 @@ @import '../mixins/link'; @layer kol-theme-component { + @include kol-alert-theme; + @include kol-link; + :host { font-family: var(--font-family); } - .kol-link-wc { - @include kol-link; + .kol-link { display: inline-block; } .mandatory-fields-hint { @include indented-text; } - - @include kol-alert-theme; } diff --git a/packages/themes/default/src/components/link.scss b/packages/themes/default/src/components/link.scss index a874a432d6..546baf64e9 100644 --- a/packages/themes/default/src/components/link.scss +++ b/packages/themes/default/src/components/link.scss @@ -1,9 +1,9 @@ @import '../mixins/link'; @layer kol-theme-component { + @include kol-link; + .kol-link { font-family: inherit; } - - @include kol-link; } diff --git a/packages/themes/ecl/src/ecl-ec/components/form.scss b/packages/themes/ecl/src/ecl-ec/components/form.scss index 85f1140d0c..e385dd8f28 100644 --- a/packages/themes/ecl/src/ecl-ec/components/form.scss +++ b/packages/themes/ecl/src/ecl-ec/components/form.scss @@ -3,14 +3,15 @@ @import '../mixins/link'; @layer kol-theme-component { + @include kol-link; + :host { font-family: var(--font-family); width: 100%; @include kol-alert-theme; } - .kol-link-wc { - @include kol-link; + .kol-link { display: inline-block; } diff --git a/packages/themes/ecl/src/ecl-ec/components/link.scss b/packages/themes/ecl/src/ecl-ec/components/link.scss index a612e4a58d..103f3db105 100644 --- a/packages/themes/ecl/src/ecl-ec/components/link.scss +++ b/packages/themes/ecl/src/ecl-ec/components/link.scss @@ -1,9 +1,9 @@ @import '../mixins/link'; @layer kol-theme-component { + @include kol-link; + :host { font-family: var(--font-family); } - - @include kol-link; } diff --git a/packages/themes/ecl/src/ecl-ec/mixins/link.scss b/packages/themes/ecl/src/ecl-ec/mixins/link.scss index 66e4307a33..b58caf0e1b 100644 --- a/packages/themes/ecl/src/ecl-ec/mixins/link.scss +++ b/packages/themes/ecl/src/ecl-ec/mixins/link.scss @@ -1,12 +1,13 @@ @mixin kol-link { - a, - button { - appearance: none; - color: var(--color-blue); - line-height: 1.2; - } - a:hover, - button:hover { - color: var(--color-blue-130); + .kol-link { + &__url { + appearance: none; + color: var(--color-blue); + line-height: 1.2; + + &:hover { + color: var(--color-blue-130); + } + } } } diff --git a/packages/themes/ecl/src/ecl-eu/components/form.scss b/packages/themes/ecl/src/ecl-eu/components/form.scss index 85f1140d0c..e385dd8f28 100644 --- a/packages/themes/ecl/src/ecl-eu/components/form.scss +++ b/packages/themes/ecl/src/ecl-eu/components/form.scss @@ -3,14 +3,15 @@ @import '../mixins/link'; @layer kol-theme-component { + @include kol-link; + :host { font-family: var(--font-family); width: 100%; @include kol-alert-theme; } - .kol-link-wc { - @include kol-link; + .kol-link { display: inline-block; } diff --git a/packages/themes/ecl/src/ecl-eu/components/link.scss b/packages/themes/ecl/src/ecl-eu/components/link.scss index a612e4a58d..103f3db105 100644 --- a/packages/themes/ecl/src/ecl-eu/components/link.scss +++ b/packages/themes/ecl/src/ecl-eu/components/link.scss @@ -1,9 +1,9 @@ @import '../mixins/link'; @layer kol-theme-component { + @include kol-link; + :host { font-family: var(--font-family); } - - @include kol-link; } diff --git a/packages/themes/ecl/src/ecl-eu/mixins/link.scss b/packages/themes/ecl/src/ecl-eu/mixins/link.scss index 66e4307a33..b58caf0e1b 100644 --- a/packages/themes/ecl/src/ecl-eu/mixins/link.scss +++ b/packages/themes/ecl/src/ecl-eu/mixins/link.scss @@ -1,12 +1,13 @@ @mixin kol-link { - a, - button { - appearance: none; - color: var(--color-blue); - line-height: 1.2; - } - a:hover, - button:hover { - color: var(--color-blue-130); + .kol-link { + &__url { + appearance: none; + color: var(--color-blue); + line-height: 1.2; + + &:hover { + color: var(--color-blue-130); + } + } } } diff --git a/packages/themes/itzbund/src/components/form.scss b/packages/themes/itzbund/src/components/form.scss index d398605896..3dc2e181a5 100644 --- a/packages/themes/itzbund/src/components/form.scss +++ b/packages/themes/itzbund/src/components/form.scss @@ -4,9 +4,9 @@ @layer kol-theme-component { @include kol-alert-theme; + @include kol-link; - .kol-link-wc { - @include kol-link; + .kol-link { display: inline-block; } diff --git a/packages/themes/itzbund/src/mixins/link.scss b/packages/themes/itzbund/src/mixins/link.scss index bd4c9ad97a..3c7f71de5c 100644 --- a/packages/themes/itzbund/src/mixins/link.scss +++ b/packages/themes/itzbund/src/mixins/link.scss @@ -1,52 +1,45 @@ @import './rem'; @mixin kol-link { - .kol-link-wc a, - .kol-button-wc button { - text-decoration-line: none; - } - - a, - button { - background-image: repeating-linear-gradient(to right, #66ddec, #66ddec); - background-repeat: no-repeat; - background-position: left 0 bottom 0; - background-size: 25% 0.25ex; - border-radius: var(--spacing); - color: var(--color-petrol); - font-family: var(--font-family-sans); - font-size: inherit; - /* text-transform: uppercase; */ - transition-delay: 0; - transition-timing-function: ease-in-out; - transition-duration: 0.5s; - transition-property: background, color, border-color; - } + .kol-link { + &__url { + text-decoration-line: none; + background-image: repeating-linear-gradient(to right, #66ddec, #66ddec); + background-repeat: no-repeat; + background-position: left 0 bottom 0; + background-size: 25% 0.25ex; + border-radius: var(--spacing); + color: var(--color-petrol); + font-family: var(--font-family-sans); + font-size: inherit; + /* text-transform: uppercase; */ + transition-delay: 0ms; + transition-timing-function: ease-in-out; + transition-duration: 0.5s; + transition-property: background, color, border-color; - a:focus, - a:hover, - button:focus, - button:hover { - background-size: 100% 0.25ex; - color: var(--color-achat); - } + .skip { + left: rem(-99999); + overflow: hidden; + position: absolute; + z-index: 9999999; - a > .kol-span-wc, - button > .kol-span-wc { - gap: 0.25em; - } + &:focus { + background-color: white; + box-shadow: 0 0 rem(8) rem(8) white; + left: unset; + position: unset; + } + } - a.skip { - left: rem(-99999); - overflow: hidden; - position: absolute; - z-index: 9999999; - } + &:hover { + background-size: 100% 0.25ex; + color: var(--color-achat); + } + } - a.skip:focus { - background-color: white; - box-shadow: 0 0 rem(8) rem(8) white; - left: unset; - position: unset; + &__text { + gap: 0.25em; + } } } From 420f05301dce30f1779464c802409a5dc575a0d0 Mon Sep 17 00:00:00 2001 From: alex_ Date: Wed, 27 Nov 2024 14:39:06 +0100 Subject: [PATCH 03/27] changed kol lik to mixin Refs: #7036 --- .../src/components/button-link/style.scss | 4 +++ packages/components/src/components/link.scss | 8 ++--- .../src/components/link/component.tsx | 2 +- .../components/src/components/link/style.scss | 2 ++ packages/themes/default/src/mixins/link.scss | 36 +++++++++---------- .../themes/ecl/src/ecl-ec/mixins/link.scss | 2 +- .../themes/ecl/src/ecl-eu/mixins/link.scss | 2 +- packages/themes/itzbund/src/mixins/link.scss | 2 +- 8 files changed, 32 insertions(+), 26 deletions(-) diff --git a/packages/components/src/components/button-link/style.scss b/packages/components/src/components/button-link/style.scss index ed99740474..b6d007fd5f 100644 --- a/packages/components/src/components/button-link/style.scss +++ b/packages/components/src/components/button-link/style.scss @@ -1,3 +1,7 @@ @import '../@shared/mixins'; @import '../style'; @import '../link'; + +@layer kol-component { + @include kol-link('kol-button'); +} diff --git a/packages/components/src/components/link.scss b/packages/components/src/components/link.scss index 9efd8d816d..fce5bade63 100644 --- a/packages/components/src/components/link.scss +++ b/packages/components/src/components/link.scss @@ -1,14 +1,14 @@ @import './@shared/mixins'; @import './tooltip/style.scss'; -@layer kol-component { - .kol-link { +@mixin kol-link($block-classname) { + .#{$block-classname} { $root: &; display: inline-block; font-size: rem(16); - &__url { + &__element { align-items: baseline; display: inline-flex; place-items: center; @@ -35,7 +35,7 @@ .span-label { text-decoration-line: underline; - @at-root #{$root}__url:is(:focus, :hover):not([aria-disabled]) { + @at-root #{$root}__element:is(:focus, :hover):not([aria-disabled]) { text-decoration-line: underline; } } diff --git a/packages/components/src/components/link/component.tsx b/packages/components/src/components/link/component.tsx index 559c6c1ae7..999d8b827c 100644 --- a/packages/components/src/components/link/component.tsx +++ b/packages/components/src/components/link/component.tsx @@ -144,7 +144,7 @@ export class KolLinkWc implements LinkAPI, FocusableElement { ? `${this.state._label}${isExternal ? ` (${translate('kol-open-link-in-tab')})` : ''}` : undefined } - class={clsx('kol-link__url', { + class={clsx('kol-link__element', { 'kol-link--disabled': this.state._disabled === true, 'kol-link--external-link': isExternal, 'kol-link--hide-label': this.state._hideLabel === true, diff --git a/packages/components/src/components/link/style.scss b/packages/components/src/components/link/style.scss index ed99740474..2dbe0aa0a5 100644 --- a/packages/components/src/components/link/style.scss +++ b/packages/components/src/components/link/style.scss @@ -1,3 +1,5 @@ @import '../@shared/mixins'; @import '../style'; @import '../link'; + +@include kol-link('kol-link'); diff --git a/packages/themes/default/src/mixins/link.scss b/packages/themes/default/src/mixins/link.scss index c0f0e46bfe..c877086ef3 100644 --- a/packages/themes/default/src/mixins/link.scss +++ b/packages/themes/default/src/mixins/link.scss @@ -4,7 +4,7 @@ .kol-link { $root: &; - &__url { + &__element { color: var(--color-primary); font-style: normal; font-weight: 400; @@ -16,36 +16,36 @@ &:visited { color: var(--visited); } + + .skip { + left: rem(-99999); + overflow: hidden; + position: absolute; + z-index: 9999999; + line-height: 1; + + &:focus { + background-color: white; + left: unset; + position: unset; + } + } } &__text { - @at-root #{$root}__url:focus { + @at-root #{$root}__element:focus { border-radius: var(--border-radius); outline: var(--border-width) solid; } .span-label { - @at-root #{$root}__url:is(:focus, :hover):not([aria-disabled]) { + @at-root #{$root}__element:is(:focus, :hover):not([aria-disabled]) { text-decoration-thickness: 0.25em; } - @at-root #{$root}__url:is(:focus, :hover):not([disabled]) { + @at-root #{$root}__element:is(:focus, :hover):not([disabled]) { text-decoration-thickness: 0.25em; } } } - - .skip { - left: rem(-99999); - overflow: hidden; - position: absolute; - z-index: 9999999; - line-height: 1; - } - - .skip:focus { - background-color: white; - left: unset; - position: unset; - } } } diff --git a/packages/themes/ecl/src/ecl-ec/mixins/link.scss b/packages/themes/ecl/src/ecl-ec/mixins/link.scss index b58caf0e1b..ba292d4983 100644 --- a/packages/themes/ecl/src/ecl-ec/mixins/link.scss +++ b/packages/themes/ecl/src/ecl-ec/mixins/link.scss @@ -1,6 +1,6 @@ @mixin kol-link { .kol-link { - &__url { + &__element { appearance: none; color: var(--color-blue); line-height: 1.2; diff --git a/packages/themes/ecl/src/ecl-eu/mixins/link.scss b/packages/themes/ecl/src/ecl-eu/mixins/link.scss index b58caf0e1b..ba292d4983 100644 --- a/packages/themes/ecl/src/ecl-eu/mixins/link.scss +++ b/packages/themes/ecl/src/ecl-eu/mixins/link.scss @@ -1,6 +1,6 @@ @mixin kol-link { .kol-link { - &__url { + &__element { appearance: none; color: var(--color-blue); line-height: 1.2; diff --git a/packages/themes/itzbund/src/mixins/link.scss b/packages/themes/itzbund/src/mixins/link.scss index 3c7f71de5c..92aefe997c 100644 --- a/packages/themes/itzbund/src/mixins/link.scss +++ b/packages/themes/itzbund/src/mixins/link.scss @@ -2,7 +2,7 @@ @mixin kol-link { .kol-link { - &__url { + &__element { text-decoration-line: none; background-image: repeating-linear-gradient(to right, #66ddec, #66ddec); background-repeat: no-repeat; From 1afe37e46ec4e1b6400b15f668c93fda4c764391 Mon Sep 17 00:00:00 2001 From: alex_ Date: Mon, 2 Dec 2024 15:02:56 +0100 Subject: [PATCH 04/27] kol-link as mixin Refs: #7036 --- .../components/@shared/_kol-link-mixin.scss | 36 +++++++++++++ .../src/components/button-link/style.scss | 6 +-- .../components/src/components/form/style.scss | 2 +- packages/components/src/components/link.scss | 49 ------------------ .../src/components/link/component.tsx | 4 +- .../components/src/components/link/style.scss | 4 +- packages/themes/default/src/mixins/link.scss | 39 +++++---------- .../themes/ecl/src/ecl-ec/mixins/link.scss | 12 ++--- .../themes/ecl/src/ecl-eu/mixins/link.scss | 12 ++--- packages/themes/itzbund/src/mixins/link.scss | 50 +++++++------------ 10 files changed, 82 insertions(+), 132 deletions(-) create mode 100644 packages/components/src/components/@shared/_kol-link-mixin.scss delete mode 100644 packages/components/src/components/link.scss diff --git a/packages/components/src/components/@shared/_kol-link-mixin.scss b/packages/components/src/components/@shared/_kol-link-mixin.scss new file mode 100644 index 0000000000..3994c1e43c --- /dev/null +++ b/packages/components/src/components/@shared/_kol-link-mixin.scss @@ -0,0 +1,36 @@ +@import 'mixins'; +@import '../tooltip/style'; + +@mixin kol-link-styles($block-classname) { + @layer kol-component { + :host { + display: inline-block; + } + + .#{$block-classname} { + $root: &; + + font-size: rem(16); + align-items: baseline; + display: inline-flex; + place-items: center; + text-align: left; + text-decoration-line: none; + + &__text { + .span-label { + text-decoration-line: underline; + + @at-root #{$root}:is(:focus, :hover):not([aria-disabled]) { + text-decoration-line: underline; + } + } + } + + .kol-icon.external-link-icon { + display: inline-flex; + margin-left: rem(8); + } + } + } +} diff --git a/packages/components/src/components/button-link/style.scss b/packages/components/src/components/button-link/style.scss index b6d007fd5f..9a8e01b7c8 100644 --- a/packages/components/src/components/button-link/style.scss +++ b/packages/components/src/components/button-link/style.scss @@ -1,7 +1,5 @@ @import '../@shared/mixins'; @import '../style'; -@import '../link'; +@import '../@shared/kol-link-mixin'; -@layer kol-component { - @include kol-link('kol-button'); -} +@include kol-link-styles('kol-button'); diff --git a/packages/components/src/components/form/style.scss b/packages/components/src/components/form/style.scss index 3c0fe03826..6c18485424 100644 --- a/packages/components/src/components/form/style.scss +++ b/packages/components/src/components/form/style.scss @@ -1,7 +1,7 @@ @import '../@shared/mixins'; @import '../style'; @import '../input-line'; -@import '../link'; +@import '../@shared/kol-link-mixin'; @include kol-alert-styles; diff --git a/packages/components/src/components/link.scss b/packages/components/src/components/link.scss deleted file mode 100644 index fce5bade63..0000000000 --- a/packages/components/src/components/link.scss +++ /dev/null @@ -1,49 +0,0 @@ -@import './@shared/mixins'; -@import './tooltip/style.scss'; - -@mixin kol-link($block-classname) { - .#{$block-classname} { - $root: &; - - display: inline-block; - font-size: rem(16); - - &__element { - align-items: baseline; - display: inline-flex; - place-items: center; - text-align: left; - text-decoration-line: none; - - .skip { - left: rem(-99999); - overflow: hidden; - position: absolute; - z-index: 9999999; - line-height: 1; - - &:focus { - background-color: #fff; - left: unset; - padding: 1em; - position: unset; - } - } - } - - &__text { - .span-label { - text-decoration-line: underline; - - @at-root #{$root}__element:is(:focus, :hover):not([aria-disabled]) { - text-decoration-line: underline; - } - } - } - - .kol-icon.external-link-icon { - display: inline-flex; - margin-left: rem(8); - } - } -} diff --git a/packages/components/src/components/link/component.tsx b/packages/components/src/components/link/component.tsx index 999d8b827c..dc6db93d96 100644 --- a/packages/components/src/components/link/component.tsx +++ b/packages/components/src/components/link/component.tsx @@ -129,7 +129,7 @@ export class KolLinkWc implements LinkAPI, FocusableElement { const hasAriaDescription = Boolean(this.state._ariaDescription?.trim()?.length); return ( - + Date: Mon, 2 Dec 2024 15:03:18 +0100 Subject: [PATCH 05/27] snapshot update Refs: #7036 --- .../test/__snapshots__/snapshot.spec.tsx.snap | 84 +++++++++---------- 1 file changed, 42 insertions(+), 42 deletions(-) diff --git a/packages/components/src/components/link/test/__snapshots__/snapshot.spec.tsx.snap b/packages/components/src/components/link/test/__snapshots__/snapshot.spec.tsx.snap index 736121b04b..f74127b8a1 100644 --- a/packages/components/src/components/link/test/__snapshots__/snapshot.spec.tsx.snap +++ b/packages/components/src/components/link/test/__snapshots__/snapshot.spec.tsx.snap @@ -1,12 +1,12 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`kol-link should render with _href="https://example.com" _icons="codicon codicon-home" _label="Label" _target="self" _tooltipAlign="bottom" 1`] = ` - + `; exports[`kol-link should render with _href="https://example.com" _icons="codicon codicon-home" _label="Label" _target="self" _tooltipAlign="left" 1`] = ` - + `; exports[`kol-link should render with _href="https://example.com" _icons="codicon codicon-home" _label="Label" _target="self" _tooltipAlign="right" 1`] = ` - + `; exports[`kol-link should render with _href="https://example.com" _icons="codicon codicon-home" _label="Label" _target="self" _tooltipAlign="top" _hideLabel=true 1`] = ` - + `; exports[`kol-link should render with _href="https://example.com" _icons="codicon codicon-home" _label="Label" _target="self" _tooltipAlign="top" 1`] = ` - + `; exports[`kol-link should render with _href="https://example.com" _icons="codicon codicon-home" _label="Label" _target="self" 1`] = ` - + `; exports[`kol-link should render with _label="Label" _href="" _download="download-file.zip" _target="blank" 1`] = ` - + From efc5ea0ec8459e6ee338e4c776f1b00f3dfd049b Mon Sep 17 00:00:00 2001 From: alex_ Date: Mon, 2 Dec 2024 16:07:42 +0100 Subject: [PATCH 06/27] themes update Refs: #7036 --- .../src/components/link-button/shadow.tsx | 8 +- .../default/src/components/link-button.scss | 269 +++++++++--------- .../src/ecl-ec/components/link-button.scss | 20 +- .../src/ecl-eu/components/link-button.scss | 234 ++++++++------- 4 files changed, 259 insertions(+), 272 deletions(-) diff --git a/packages/components/src/components/link-button/shadow.tsx b/packages/components/src/components/link-button/shadow.tsx index 3b13b0729b..d272470cab 100644 --- a/packages/components/src/components/link-button/shadow.tsx +++ b/packages/components/src/components/link-button/shadow.tsx @@ -19,6 +19,7 @@ import type { import type { JSX } from '@stencil/core'; import { Component, h, Host, Method, Prop } from '@stencil/core'; import { KolLinkWcTag } from '../../core/component-names'; +import clsx from 'clsx'; @Component({ tag: 'kol-link-button', @@ -54,11 +55,10 @@ export class KolLinkButton implements LinkButtonProps, FocusableElement { 0, - }} + })} _accessKey={this._accessKey} _ariaCurrentValue={this._ariaCurrentValue} _ariaDescription={this._ariaDescription} diff --git a/packages/themes/default/src/components/link-button.scss b/packages/themes/default/src/components/link-button.scss index 136f781e92..0bc563ed5b 100644 --- a/packages/themes/default/src/components/link-button.scss +++ b/packages/themes/default/src/components/link-button.scss @@ -5,143 +5,136 @@ font-family: var(--font-family); } - :is(a, button):focus { - outline: none; - } - - :is(a, button):focus .kol-span-wc { - outline-color: var(--color-primary-variant); - outline-offset: rem(2); - outline-style: solid; - outline-width: calc(var(--border-width) * 2); - transition: outline-offset 0.2s linear; - } - - :is(a, button) > .kol-span-wc { - font-weight: 700; - border-radius: var(--a11y-min-size); - border-style: solid; - outline-width: calc(var(--border-width) * 2); - min-height: var(--a11y-min-size); - min-width: var(--a11y-min-size); - padding: rem(8) rem(14); - text-align: center; - transition-duration: 0.5s; - transition-property: background-color, color, border-color; - } - - .primary :is(a, button) > .kol-span-wc, - .primary :is(a, button):disabled:hover > .kol-span-wc { - background-color: var(--color-primary); - border-color: var(--color-primary); - color: var(--color-light); - } - - .secondary :is(a, button) > .kol-span-wc, - .secondary :is(a, button):disabled:hover > .kol-span-wc, - .normal :is(a, button) > .kol-span-wc, - .normal :is(a, button):disabled:hover > .kol-span-wc { - background-color: var(--color-light); - border-color: var(--color-primary); - color: var(--color-primary); - } - - .danger :is(a, button) > .kol-span-wc, - .danger :is(a, button):disabled:hover > .kol-span-wc { - background-color: var(--color-danger); - border-color: var(--color-danger); - color: var(--color-light); - } - - .ghost :is(a, button) > .kol-span-wc, - .ghost :is(a, button):disabled:hover > .kol-span-wc { - border-color: var(--color-light); - background-color: var(--color-light); - box-shadow: none; - color: var(--color-primary); - } - - /*-----------*/ - .primary :is(a, button):active > .kol-span-wc, - .primary :is(a, button):hover > .kol-span-wc, - .secondary :is(a, button):active > .kol-span-wc, - .secondary :is(a, button):hover > .kol-span-wc, - .normal :is(a, button):active > .kol-span-wc, - .normal :is(a, button):hover > .kol-span-wc, - .danger :is(a, button):active > .kol-span-wc, - .danger :is(a, button):hover > .kol-span-wc, - .ghost :is(a, button):active > .kol-span-wc, - .ghost :is(a, button):hover > .kol-span-wc { - background-color: var(--color-primary-variant); - border-color: var(--color-primary-variant); - box-shadow: 0 rem(2) rem(8) rem(2) rgba(8, 35, 48, 0.24); - color: var(--color-light); - } - - .danger :is(a, button):active > .kol-span-wc, - .danger :is(a, button):hover > .kol-span-wc { - background-color: var(--color-danger); - border-color: var(--color-danger); - } - - :is(a, button):disabled:hover > .kol-span-wc, - :is(a, button):focus:hover > .kol-span-wc { - box-shadow: none; - } - - .primary :is(a, button):active > .kol-span-wc, - .secondary :is(a, button):active > .kol-span-wc, - .normal :is(a, button):active > .kol-span-wc, - .danger :is(a, button):active > .kol-span-wc, - .ghost :is(a, button):active > .kol-span-wc { - border-color: var(--color-light); - box-shadow: none; - outline: none; - } - - :is(a, button).hide-label > .kol-span-wc { - padding: rem(12.8); - width: unset; - } - - :is(a, button).hide-label > .kol-span-wc > span > span { - display: none; - } - - :is(a, button).loading > .kol-span-wc .kol-icon { - animation: spin 5s infinite linear; - } - - /** small ghost button */ - .ghost :is(a, button).small > .kol-span-wc { - border: none; - background-color: transparent; - box-shadow: none; - } - - .ghost :is(a, button).small > .kol-span-wc > span { - border-radius: 1.5em; - border-style: solid; - border-width: var(--border-width); - border-color: var(--color-light); - background-color: var(--color-light); - } - - .ghost :is(a, button).small:active > .kol-span-wc > span, - .ghost :is(a, button).small:hover > .kol-span-wc > span, - .ghost :is(a, button).small.transparent:active > .kol-span-wc > span, - .ghost :is(a, button).small.transparent:hover > .kol-span-wc > span { - background-color: var(--color-primary-variant); - border-color: var(--color-primary-variant); - box-shadow: 0 rem(2) rem(8) rem(2) rgba(8, 35, 48, 0.24); - color: var(--color-light); - } - - /** :is(a,button) with transparent background */ - :is(a, button).transparent > .kol-span-wc > span, - .ghost :is(a, button).small.transparent > .kol-span-wc > span, - :is(a, button).transparent > .kol-span-wc { - background-color: transparent; - border-color: transparent; + .kol-link { + $root: &; + + &:focus { + outline: none; + } + + &__text { + font-weight: 700; + border-radius: var(--a11y-min-size); + border-style: solid; + outline-width: calc(var(--border-width) * 2); + min-height: var(--a11y-min-size); + min-width: var(--a11y-min-size); + padding: rem(8) rem(14); + text-align: center; + transition-duration: 0.5s; + transition-property: background-color, color, border-color; + + background-color: var(--background-color); + border-color: var(--border-color); + color: var(--color); + box-shadow: var(--box-shadow); + outline: var(--outline); + + @at-root #{$root}:focus & { + outline-color: var(--color-primary-variant); + outline-offset: rem(2); + outline-style: solid; + outline-width: calc(var(--border-width) * 2); + transition: outline-offset 0.2s linear; + } + + @at-root #{$root}--hide-label & { + padding: rem(12.8); + width: unset; + + .span-container { + display: none; + } + } + + @at-root #{$root}:disabled:hover & { + box-shadow: none; + } + + @at-root #{$root}:focus:hover & { + box-shadow: none; + } + } + + &--primary { + --background-color: var(--color-primary); + --border-color: var(--color-primary); + --color: var(--color-light); + + &:active { + --border-color: var(--color-light); + --box-shadow: none; + --outline: none; + } + + &:active, + &:hover { + --background-color: var(--color-primary-variant); + --border-color: var(--color-primary-variant); + --box-shadow: #{0 rem(2) rem(8) rem(2) rgba(8, 35, 48, 0.24)}; + --color: var(--color-light); + } + } + + &--secondary, + &--normal { + --background-color: var(--color-light); + --border-color: var(--color-primary); + --color: var(--color-primary); + + &:active { + --border-color: var(--color-light); + --box-shadow: none; + --outline: none; + } + &:active, + &:hover { + --background-color: var(--color-primary-variant); + --border-color: var(--color-primary-variant); + --box-shadow: #{0 rem(2) rem(8) rem(2) rgba(8, 35, 48, 0.24)}; + --color: var(--color-light); + } + } + + &--danger { + --background-color: var(--color-danger); + --border-color: var(--color-danger); + --color: var(--color-light); + + &:active { + --border-color: var(--color-light); + --box-shadow: none; + --outline: none; + } + + &:active, + &:hover { + --background-color: var(--color-danger); + --border-color: var(--color-danger); + --box-shadow: #{0 rem(2) rem(8) rem(2) rgba(8, 35, 48, 0.24)}; + --color: var(--color-light); + } + } + + &--ghost { + --background-color: var(--color-light); + --border-color: var(--color-light); + --color: var(--color-primary); + --box-shadow: none; + + &:active { + --border-color: var(--color-light); + --box-shadow: none; + --outline: none; + } + + &:active, + &:hover { + --background-color: var(--color-primary-variant); + --border-color: var(--color-primary-variant); + --box-shadow: #{0 rem(2) rem(8) rem(2) rgba(8, 35, 48, 0.24)}; + --color: var(--color-light); + } + } } } diff --git a/packages/themes/ecl/src/ecl-ec/components/link-button.scss b/packages/themes/ecl/src/ecl-ec/components/link-button.scss index 44ce9cf8a0..cbaf053b97 100644 --- a/packages/themes/ecl/src/ecl-ec/components/link-button.scss +++ b/packages/themes/ecl/src/ecl-ec/components/link-button.scss @@ -1,19 +1,17 @@ @import '../../mixins/rem'; @layer kol-theme-component { - :host { + .kol-link-button { --kolibri-spacing: #{rem(4)}; - } - a, - button { - appearance: none; - color: var(--color-blue); - text-decoration: underline; - } + .kol-link { + appearance: none; + color: var(--color-blue); + text-decoration: underline; - a:hover, - button:hover { - color: var(--color-blue-130); + &:hover { + color: var(--color-blue-130); + } + } } } diff --git a/packages/themes/ecl/src/ecl-eu/components/link-button.scss b/packages/themes/ecl/src/ecl-eu/components/link-button.scss index 5c4a5414ff..05402ec33a 100644 --- a/packages/themes/ecl/src/ecl-eu/components/link-button.scss +++ b/packages/themes/ecl/src/ecl-eu/components/link-button.scss @@ -1,132 +1,128 @@ @import '../../mixins/rem'; @layer kol-theme-component { - :host { + .kol-link-button { --kolibri-spacing: #{rem(4)}; font-family: var(--font-family); } - a, - button { + .kol-link { + $root: &; + appearance: none; border-radius: rem(4); text-decoration: none; - } - - a:focus, - button:focus { - outline: none; - } - - a > .kol-span-wc, - button > .kol-span-wc { - min-height: rem(44); - min-width: rem(44); - border-radius: rem(4); - font: - normal normal 400 rem(16) / rem(20) arial, - sans-serif; - font-weight: 400; - margin: 0; - padding: rem(12); - } - - a:focus-visible > .kol-span-wc, - button:focus-visible > .kol-span-wc { - outline-offset: rem(-4); - outline-style: solid; - outline-width: rem(2); - } - - a:active > .kol-span-wc, - button:active > .kol-span-wc, - a:hover > .kol-span-wc, - button:hover > .kol-span-wc { - box-shadow: - 0 rem(2) rem(4) rgb(9 49 142 / 8%), - 0 0 rem(10) rgb(9 49 142 / 4%), - 0 rem(4) rem(5) rgb(9 49 142 / 4%), - 0 rem(-4) rem(4) rgb(9 49 142 / 4%); - } - - .primary a > .kol-span-wc, - .primary button > .kol-span-wc { - background-color: #0e47cb; - color: #fff; - } - - .primary a:focus-visible > .kol-span-wc, - .primary button:focus-visible > .kol-span-wc { - outline-color: #fff; - } - - .primary a:hover > .kol-span-wc, - .primary button:hover > .kol-span-wc { - background-color: #3e6cd5; - } - - .secondary a > .kol-span-wc, - .secondary button > .kol-span-wc { - background-color: #fff; - border: rem(2) solid #0e47cb; - color: #0e47cb; - padding: calc(rem(12) - rem(2)) calc(rem(16) - rem(2)); - } - - .secondary a:focus-visible > .kol-span-wc, - .secondary button:focus-visible > .kol-span-wc { - box-shadow: inset 0 0 0 rem(4) #0e47cb; - outline-color: #fff; - } - - .secondary a:hover > .kol-span-wc, - .secondary button:hover > .kol-span-wc { - border-color: #0e47cb; - color: #0e47cb; - } - - .normal a > .kol-span-wc, - .normal button > .kol-span-wc { - background-color: #fc0; - color: #171a22; - } - - .normal a:focus-visible > .kol-span-wc, - .normal button:focus-visible > .kol-span-wc { - outline-color: #000; - } - - .normal a:hover > .kol-span-wc, - .normal button:hover > .kol-span-wc { - background-color: #fc0; - border-color: #fc0; - } - - .danger a .kol-span-wc, - .danger button .kol-span-wc { - background-color: var(--color-red); - border-color: var(--color-red); - color: var(--color-white); - } - - .danger a:hover .kol-span-wc, - .danger button:hover .kol-span-wc { - background-color: var(--color-red); - border-color: var(--color-red); - } - - .ghost a > .kol-span-wc, - .ghost button > .kol-span-wc { - color: #0e47cb; - } - - .ghost a:focus-visible > .kol-span-wc, - .ghost button:focus-visible > .kol-span-wc { - outline-color: #0e47cb; - } - .ghost a:hover > .kol-span-wc, - .ghost button:hover > .kol-span-wc { - color: #0e47cb; + &:focus { + outline: none; + } + + &__text { + min-height: rem(44); + min-width: rem(44); + border-radius: rem(4); + font: + normal normal 400 rem(16) / rem(20) arial, + sans-serif; + font-weight: 400; + margin: 0; + padding: rem(12); + + background-color: var(--background-color); + color: var(--color); + outline-color: var(--outline-color); + border: var(--border); + + @at-root #{$root}:focus-visible & { + outline-offset: rem(-4); + outline-style: solid; + outline-width: rem(2); + } + + @at-root #{$root}:active & { + box-shadow: + 0 rem(2) rem(4) rgb(9 49 142 / 8%), + 0 0 rem(10) rgb(9 49 142 / 4%), + 0 rem(4) rem(5) rgb(9 49 142 / 4%), + 0 rem(-4) rem(4) rgb(9 49 142 / 4%); + } + @at-root #{$root}:hover & { + box-shadow: + 0 rem(2) rem(4) rgb(9 49 142 / 8%), + 0 0 rem(10) rgb(9 49 142 / 4%), + 0 rem(4) rem(5) rgb(9 49 142 / 4%), + 0 rem(-4) rem(4) rgb(9 49 142 / 4%); + } + + @at-root #{$root}--secondary & { + padding: calc(rem(12) - rem(2)) calc(rem(16) - rem(2)); + } + } + + &--primary { + --background-color: #0e47cb; + --color: #fff; + + &:focus-visible { + --outline-color: #fff; + } + + &:hover { + --background-color: #3e6cd5; + } + } + + &--secondary { + --background-color: #fff; + --border: #{rem(2) solid #0e47cb}; + --color: #0e47cb; + + &:focus-visible { + --box-shadow: inset 0 0 0 rem(4) #0e47cb; + --outline-color: #fff; + } + + &:hover { + --border-color: #0e47cb; + --color: #0e47cb; + } + } + + &--normal { + --background-color: #fc0; + --color: #171a22; + + &:focus-visible { + --outline-color: #000; + } + + &:hover { + --background-color: #fc0; + --border-color: #fc0; + } + } + + &--danger { + --background-color: var(--color-red); + --border-color: var(--color-red); + --color: var(--color-white); + + &:hover { + --background-color: var(--color-red); + --border-color: var(--color-red); + } + } + + &--ghost { + --color: #0e47cb; + + &:focus-visible { + --outline-color: #0e47cb; + } + + &:hover { + --color: #0e47cb; + } + } } } From e895fc8a9ddd93d0f34646cc9cd3895696408cac Mon Sep 17 00:00:00 2001 From: alex_ Date: Mon, 2 Dec 2024 16:11:03 +0100 Subject: [PATCH 07/27] test snapshot update Refs: #7036 --- .../test/__snapshots__/snapshot.spec.tsx.snap | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/components/src/components/link-button/test/__snapshots__/snapshot.spec.tsx.snap b/packages/components/src/components/link-button/test/__snapshots__/snapshot.spec.tsx.snap index cfa08290d9..57f31833df 100644 --- a/packages/components/src/components/link-button/test/__snapshots__/snapshot.spec.tsx.snap +++ b/packages/components/src/components/link-button/test/__snapshots__/snapshot.spec.tsx.snap @@ -3,7 +3,7 @@ exports[`kol-link-button should render with _href="https://example.com" _icons="codicon codicon-home" _label="Label" _target="self" _tooltipAlign="bottom" 1`] = ` @@ -13,7 +13,7 @@ exports[`kol-link-button should render with _href="https://example.com" _icons=" exports[`kol-link-button should render with _href="https://example.com" _icons="codicon codicon-home" _label="Label" _target="self" _tooltipAlign="left" 1`] = ` @@ -23,7 +23,7 @@ exports[`kol-link-button should render with _href="https://example.com" _icons=" exports[`kol-link-button should render with _href="https://example.com" _icons="codicon codicon-home" _label="Label" _target="self" _tooltipAlign="right" 1`] = ` @@ -33,7 +33,7 @@ exports[`kol-link-button should render with _href="https://example.com" _icons=" exports[`kol-link-button should render with _href="https://example.com" _icons="codicon codicon-home" _label="Label" _target="self" _tooltipAlign="top" _hideLabel=true 1`] = ` @@ -43,7 +43,7 @@ exports[`kol-link-button should render with _href="https://example.com" _icons=" exports[`kol-link-button should render with _href="https://example.com" _icons="codicon codicon-home" _label="Label" _target="self" _tooltipAlign="top" 1`] = ` @@ -53,7 +53,7 @@ exports[`kol-link-button should render with _href="https://example.com" _icons=" exports[`kol-link-button should render with _href="https://example.com" _icons="codicon codicon-home" _label="Label" _target="self" 1`] = ` @@ -63,7 +63,7 @@ exports[`kol-link-button should render with _href="https://example.com" _icons=" exports[`kol-link-button should render with _label="Label" _href="" _download="download-file.zip" _target="blank" 1`] = ` From 1303c23b5b594d21cec684a220aae7b19561e130 Mon Sep 17 00:00:00 2001 From: alex_ Date: Tue, 3 Dec 2024 08:56:52 +0100 Subject: [PATCH 08/27] changed kol-link-wc to kol-link Refs: #7036 --- .../src/components/skip-nav/style.scss | 12 +++--- .../themes/default/src/components/nav.scss | 2 +- .../default/src/components/skip-nav.scss | 24 ++++++----- .../themes/ecl/src/ecl-ec/components/nav.scss | 8 ++-- .../ecl/src/ecl-ec/components/skip-nav.scss | 26 ++++++------ .../themes/ecl/src/ecl-eu/components/nav.scss | 8 ++-- .../ecl/src/ecl-eu/components/skip-nav.scss | 18 +++++---- .../itzbund/src/components/button-link.scss | 40 +++++++++---------- .../themes/itzbund/src/components/nav.scss | 16 ++++---- .../itzbund/src/components/skip-nav.scss | 22 +++++----- .../themes/itzbund/src/mixins/button.scss | 40 +++++++++---------- 11 files changed, 112 insertions(+), 104 deletions(-) diff --git a/packages/components/src/components/skip-nav/style.scss b/packages/components/src/components/skip-nav/style.scss index 4e1fcb9ae1..ccb9a39505 100644 --- a/packages/components/src/components/skip-nav/style.scss +++ b/packages/components/src/components/skip-nav/style.scss @@ -16,17 +16,17 @@ height: 0; } - .kol-link-wc a { + .kol-link { left: rem(-99999); overflow: hidden; position: absolute; z-index: 9999999; line-height: 1; - } - .kol-link-wc a:focus { - background-color: #fff; - left: unset; - position: unset; + &:focus { + background-color: #fff; + left: unset; + position: unset; + } } } diff --git a/packages/themes/default/src/components/nav.scss b/packages/themes/default/src/components/nav.scss index 3c7813a7d0..4e89208bcb 100644 --- a/packages/themes/default/src/components/nav.scss +++ b/packages/themes/default/src/components/nav.scss @@ -14,7 +14,7 @@ list-style: none; } - .kol-link-wc { + .kol-link { display: flex; } diff --git a/packages/themes/default/src/components/skip-nav.scss b/packages/themes/default/src/components/skip-nav.scss index 61cfc7d623..6e75e5bc76 100644 --- a/packages/themes/default/src/components/skip-nav.scss +++ b/packages/themes/default/src/components/skip-nav.scss @@ -5,16 +5,18 @@ font-family: var(--font-family); } - .kol-link-wc > a > .kol-span-wc { - border-radius: var(--a11y-min-size); - border-style: solid; - border-width: var(--border-width); - gap: calc(var(--spacing) * 2); - line-height: 1; - padding: rem(8) rem(14); - background-color: var(--color-primary-variant); - border-color: var(--color-primary-variant); - color: var(--color-light); - cursor: pointer; + .kol-link { + &__text { + border-radius: var(--a11y-min-size); + border-style: solid; + border-width: var(--border-width); + gap: calc(var(--spacing) * 2); + line-height: 1; + padding: rem(8) rem(14); + background-color: var(--color-primary-variant); + border-color: var(--color-primary-variant); + color: var(--color-light); + cursor: pointer; + } } } diff --git a/packages/themes/ecl/src/ecl-ec/components/nav.scss b/packages/themes/ecl/src/ecl-ec/components/nav.scss index dcbfce6619..b03f54cc47 100644 --- a/packages/themes/ecl/src/ecl-ec/components/nav.scss +++ b/packages/themes/ecl/src/ecl-ec/components/nav.scss @@ -21,7 +21,7 @@ } .entry .kol-button-wc:first-child, - .entry .kol-link-wc, + .entry .kol-link, .entry .kol-span-wc { flex-grow: 1; } @@ -66,12 +66,12 @@ text-decoration: none; } - :is(.kol-button-wc, .kol-link-wc):focus-within .kol-span-wc { + :is(.kol-button-wc, .kol-link):focus-within .kol-span-wc { border-color: var(--color-white); } - :is(.kol-button-wc, .kol-link-wc):focus-within .kol-span-wc, - :is(.kol-button-wc, .kol-link-wc):hover .kol-span-wc { + :is(.kol-button-wc, .kol-link):focus-within .kol-span-wc, + :is(.kol-button-wc, .kol-link):hover .kol-span-wc { text-decoration: underline; } diff --git a/packages/themes/ecl/src/ecl-ec/components/skip-nav.scss b/packages/themes/ecl/src/ecl-ec/components/skip-nav.scss index 83deaea53d..3cd4a539da 100644 --- a/packages/themes/ecl/src/ecl-ec/components/skip-nav.scss +++ b/packages/themes/ecl/src/ecl-ec/components/skip-nav.scss @@ -5,17 +5,19 @@ font-family: var(--font-family); } - .kol-link-wc > a > .kol-span-wc { - border-radius: 0; - border-style: solid; - border-width: rem(2); - font-weight: var(--font-weight-bold); - gap: rem(8); - line-height: 1; - padding: 0.25em 0.75em; - background-color: var(--color-blue); - border-color: var(--color-blue); - color: var(--color-white); - cursor: pointer; + .kol-link { + &__text { + border-radius: 0; + border-style: solid; + border-width: rem(2); + font-weight: var(--font-weight-bold); + gap: rem(8); + line-height: 1; + padding: 0.25em 0.75em; + background-color: var(--color-blue); + border-color: var(--color-blue); + color: var(--color-white); + cursor: pointer; + } } } diff --git a/packages/themes/ecl/src/ecl-eu/components/nav.scss b/packages/themes/ecl/src/ecl-eu/components/nav.scss index dcbfce6619..b03f54cc47 100644 --- a/packages/themes/ecl/src/ecl-eu/components/nav.scss +++ b/packages/themes/ecl/src/ecl-eu/components/nav.scss @@ -21,7 +21,7 @@ } .entry .kol-button-wc:first-child, - .entry .kol-link-wc, + .entry .kol-link, .entry .kol-span-wc { flex-grow: 1; } @@ -66,12 +66,12 @@ text-decoration: none; } - :is(.kol-button-wc, .kol-link-wc):focus-within .kol-span-wc { + :is(.kol-button-wc, .kol-link):focus-within .kol-span-wc { border-color: var(--color-white); } - :is(.kol-button-wc, .kol-link-wc):focus-within .kol-span-wc, - :is(.kol-button-wc, .kol-link-wc):hover .kol-span-wc { + :is(.kol-button-wc, .kol-link):focus-within .kol-span-wc, + :is(.kol-button-wc, .kol-link):hover .kol-span-wc { text-decoration: underline; } diff --git a/packages/themes/ecl/src/ecl-eu/components/skip-nav.scss b/packages/themes/ecl/src/ecl-eu/components/skip-nav.scss index d92e5470fd..5943f74b13 100644 --- a/packages/themes/ecl/src/ecl-eu/components/skip-nav.scss +++ b/packages/themes/ecl/src/ecl-eu/components/skip-nav.scss @@ -5,13 +5,15 @@ font-family: var(--font-family); } - .kol-link-wc > a > .kol-span-wc { - border-radius: rem(4); - gap: rem(8); - line-height: 1; - padding: rem(12); - background-color: #0e47cb; - color: #fff; - cursor: pointer; + .kol-link { + &__text { + border-radius: rem(4); + gap: rem(8); + line-height: 1; + padding: rem(12); + background-color: #0e47cb; + color: #fff; + cursor: pointer; + } } } diff --git a/packages/themes/itzbund/src/components/button-link.scss b/packages/themes/itzbund/src/components/button-link.scss index 5603d8fa7e..90b4767dd5 100644 --- a/packages/themes/itzbund/src/components/button-link.scss +++ b/packages/themes/itzbund/src/components/button-link.scss @@ -35,8 +35,8 @@ transition-property: background, color, border-color; } - .kol-link-wc.primary > a > .kol-span-wc, - .kol-link-wc.primary > a:disabled:hover > .kol-span-wc, + .kol-link.primary > a > .kol-span-wc, + .kol-link.primary > a:disabled:hover > .kol-span-wc, button.primary > .kol-span-wc, button.primary:disabled:hover > .kol-span-wc { background-color: var(--color-petrol); @@ -44,16 +44,16 @@ color: var(--color-weiss); } - .kol-link-wc.primary > a:hover > .kol-span-wc, - .kol-link-wc.primary > a:focus > .kol-span-wc, + .kol-link.primary > a:hover > .kol-span-wc, + .kol-link.primary > a:focus > .kol-span-wc, button.primary:hover > .kol-span-wc, button.primary:focus > .kol-span-wc { background-color: var(--color-achat); border-color: var(--color-achat); } - .kol-link-wc.secondary > a > .kol-span-wc, - .kol-link-wc.secondary > a:disabled:hover > .kol-span-wc, + .kol-link.secondary > a > .kol-span-wc, + .kol-link.secondary > a:disabled:hover > .kol-span-wc, button.secondary > .kol-span-wc, button.secondary:disabled:hover > .kol-span-wc { background-color: var(--color-weiss); @@ -61,8 +61,8 @@ color: var(--color-petrol); } - .kol-link-wc.secondary > a:hover > .kol-span-wc, - .kol-link-wc.secondary > a:focus > .kol-span-wc, + .kol-link.secondary > a:hover > .kol-span-wc, + .kol-link.secondary > a:focus > .kol-span-wc, button.secondary:hover > .kol-span-wc, button.secondary:focus > .kol-span-wc { background-color: var(--color-petrol); @@ -70,8 +70,8 @@ color: var(--color-weiss); } - .kol-link-wc.normal > a > .kol-span-wc, - .kol-link-wc.normal > a:disabled:hover > .kol-span-wc, + .kol-link.normal > a > .kol-span-wc, + .kol-link.normal > a:disabled:hover > .kol-span-wc, button.normal > .kol-span-wc, button.normal:disabled:hover > .kol-span-wc { background-color: var(--color-weiss); @@ -79,8 +79,8 @@ color: var(--color-anthrazit); } - .kol-link-wc.normal > a:hover > .kol-span-wc, - .kol-link-wc.normal > a:focus > .kol-span-wc, + .kol-link.normal > a:hover > .kol-span-wc, + .kol-link.normal > a:focus > .kol-span-wc, button.normal:hover > .kol-span-wc, button.normal:focus > .kol-span-wc { background-color: var(--color-anthrazit); @@ -88,8 +88,8 @@ color: var(--color-weiss); } - .kol-link-wc.danger > a > .kol-span-wc, - .kol-link-wc.danger > a:disabled:hover > .kol-span-wc, + .kol-link.danger > a > .kol-span-wc, + .kol-link.danger > a:disabled:hover > .kol-span-wc, button.danger > .kol-span-wc, button.danger:disabled:hover > .kol-span-wc { background-color: var(--color-weiss); @@ -97,8 +97,8 @@ color: var(--color-blut); } - .kol-link-wc.danger > a:hover > .kol-span-wc, - .kol-link-wc.danger > a:focus > .kol-span-wc, + .kol-link.danger > a:hover > .kol-span-wc, + .kol-link.danger > a:focus > .kol-span-wc, button.danger:hover > .kol-span-wc, button.danger:focus > .kol-span-wc { background-color: var(--color-blut); @@ -106,8 +106,8 @@ color: var(--color-weiss); } - .kol-link-wc.ghost > a > .kol-span-wc, - .kol-link-wc.ghost > a:disabled:hover > .kol-span-wc, + .kol-link.ghost > a > .kol-span-wc, + .kol-link.ghost > a:disabled:hover > .kol-span-wc, button.ghost > .kol-span-wc, button.ghost:disabled:hover > .kol-span-wc { background-color: var(--color-ghost); @@ -115,8 +115,8 @@ color: var(--color-anthrazit); } - .kol-link-wc.ghost > a:hover > .kol-span-wc, - .kol-link-wc.ghost > a:focus > .kol-span-wc, + .kol-link.ghost > a:hover > .kol-span-wc, + .kol-link.ghost > a:focus > .kol-span-wc, button.ghost:hover > .kol-span-wc, button.ghost:focus > .kol-span-wc { background-color: var(--color-ghost); diff --git a/packages/themes/itzbund/src/components/nav.scss b/packages/themes/itzbund/src/components/nav.scss index ae81dd595f..a7516361ab 100644 --- a/packages/themes/itzbund/src/components/nav.scss +++ b/packages/themes/itzbund/src/components/nav.scss @@ -37,13 +37,13 @@ height: 100%; } - :host > div > nav .kol-link-wc { + :host > div > nav .kol-link { width: 100%; /*height: 100%;font-weight: 600;*/ display: block; } - :host > div > nav .kol-link-wc a { + :host > div > nav .kol-link a { border-radius: var(--border-radius); background-color: var(--color-petrol); border: rem(1) solid transparent; @@ -59,21 +59,21 @@ text-decoration: inherit; } - :host > div > nav .kol-link-wc[exportparts*='selected'] a { + :host > div > nav .kol-link[exportparts*='selected'] a { background-color: var(--color-achat); font-weight: 700; } - :host > div > nav .kol-link-wc a .kol-icon.mr-2 { + :host > div > nav .kol-link a .kol-icon.mr-2 { margin-right: calc(2 * 2 * var(--spacing)); } - :host > div > nav .kol-link-wc a .kol-icon.ml-2 { + :host > div > nav .kol-link a .kol-icon.ml-2 { margin-left: calc(2 * 2 * var(--spacing)); } - :host > div > nav .kol-link-wc a:focus, - :host > div > nav .kol-link-wc a:hover { + :host > div > nav .kol-link a:focus, + :host > div > nav .kol-link a:hover { border: rem(1) solid white; background-color: var(--color-fluorit); color: var(--color-anthrazit); @@ -86,7 +86,7 @@ text-align: center; } - :host > div > nav .kol-link-wc a.text-center { + :host > div > nav .kol-link a.text-center { display: grid; align-items: center; justify-items: center; diff --git a/packages/themes/itzbund/src/components/skip-nav.scss b/packages/themes/itzbund/src/components/skip-nav.scss index 2567def78d..320134db3c 100644 --- a/packages/themes/itzbund/src/components/skip-nav.scss +++ b/packages/themes/itzbund/src/components/skip-nav.scss @@ -1,15 +1,17 @@ @import '../mixins/rem'; @layer kol-theme-component { - .kol-link-wc > a > .kol-span-wc { - border-radius: rem(32); - border-style: solid; - gap: rem(8); - line-height: 1; - padding: 0 rem(16); - background-color: var(--color-petrol); - border-color: var(--color-petrol); - color: var(--color-weiss); - cursor: pointer; + .kol-link { + &__text { + border-radius: rem(32); + border-style: solid; + gap: rem(8); + line-height: 1; + padding: 0 rem(16); + background-color: var(--color-petrol); + border-color: var(--color-petrol); + color: var(--color-weiss); + cursor: pointer; + } } } diff --git a/packages/themes/itzbund/src/mixins/button.scss b/packages/themes/itzbund/src/mixins/button.scss index ac5779ded8..b3086469ec 100644 --- a/packages/themes/itzbund/src/mixins/button.scss +++ b/packages/themes/itzbund/src/mixins/button.scss @@ -19,8 +19,8 @@ transition-property: background, color, border-color; } - .kol-link-wc.primary > a > .kol-span-wc, - .kol-link-wc.primary > a:disabled:hover > .kol-span-wc, + .kol-link.primary > a > .kol-span-wc, + .kol-link.primary > a:disabled:hover > .kol-span-wc, button.primary > .kol-span-wc, button.primary:disabled:hover > .kol-span-wc { background-color: var(--color-petrol); @@ -28,16 +28,16 @@ color: var(--color-weiss); } - .kol-link-wc.primary > a:hover > .kol-span-wc, - .kol-link-wc.primary > a:focus > .kol-span-wc, + .kol-link.primary > a:hover > .kol-span-wc, + .kol-link.primary > a:focus > .kol-span-wc, button.primary:hover > .kol-span-wc, button.primary:focus > .kol-span-wc { background-color: var(--color-achat); border-color: var(--color-achat); } - .kol-link-wc.secondary > a > .kol-span-wc, - .kol-link-wc.secondary > a:disabled:hover > .kol-span-wc, + .kol-link.secondary > a > .kol-span-wc, + .kol-link.secondary > a:disabled:hover > .kol-span-wc, button.secondary > .kol-span-wc, button.secondary:disabled:hover > .kol-span-wc { background-color: var(--color-weiss); @@ -45,8 +45,8 @@ color: var(--color-petrol); } - .kol-link-wc.secondary > a:hover > .kol-span-wc, - .kol-link-wc.secondary > a:focus > .kol-span-wc, + .kol-link.secondary > a:hover > .kol-span-wc, + .kol-link.secondary > a:focus > .kol-span-wc, button.secondary:hover > .kol-span-wc, button.secondary:focus > .kol-span-wc { background-color: var(--color-petrol); @@ -54,8 +54,8 @@ color: var(--color-weiss); } - .kol-link-wc.normal > a > .kol-span-wc, - .kol-link-wc.normal > a:disabled:hover > .kol-span-wc, + .kol-link.normal > a > .kol-span-wc, + .kol-link.normal > a:disabled:hover > .kol-span-wc, button.normal > .kol-span-wc, button.normal:disabled:hover > .kol-span-wc { background-color: var(--color-weiss); @@ -63,8 +63,8 @@ color: var(--color-anthrazit); } - .kol-link-wc.normal > a:hover > .kol-span-wc, - .kol-link-wc.normal > a:focus > .kol-span-wc, + .kol-link.normal > a:hover > .kol-span-wc, + .kol-link.normal > a:focus > .kol-span-wc, button.normal:hover > .kol-span-wc, button.normal:focus > .kol-span-wc { background-color: var(--color-anthrazit); @@ -72,8 +72,8 @@ color: var(--color-weiss); } - .kol-link-wc.danger > a > .kol-span-wc, - .kol-link-wc.danger > a:disabled:hover > .kol-span-wc, + .kol-link.danger > a > .kol-span-wc, + .kol-link.danger > a:disabled:hover > .kol-span-wc, button.danger > .kol-span-wc, button.danger:disabled:hover > .kol-span-wc { background-color: var(--color-weiss); @@ -81,8 +81,8 @@ color: var(--color-blut); } - .kol-link-wc.danger > a:hover > .kol-span-wc, - .kol-link-wc.danger > a:focus > .kol-span-wc, + .kol-link.danger > a:hover > .kol-span-wc, + .kol-link.danger > a:focus > .kol-span-wc, button.danger:hover > .kol-span-wc, button.danger:focus > .kol-span-wc { background-color: var(--color-blut); @@ -90,8 +90,8 @@ color: var(--color-weiss); } - .kol-link-wc.ghost > a > .kol-span-wc, - .kol-link-wc.ghost > a:disabled:hover > .kol-span-wc, + .kol-link.ghost > a > .kol-span-wc, + .kol-link.ghost > a:disabled:hover > .kol-span-wc, button.ghost > .kol-span-wc, button.ghost:disabled:hover > .kol-span-wc { background-color: var(--color-ghost); @@ -99,8 +99,8 @@ color: var(--color-anthrazit); } - .kol-link-wc.ghost > a:hover > .kol-span-wc, - .kol-link-wc.ghost > a:focus > .kol-span-wc, + .kol-link.ghost > a:hover > .kol-span-wc, + .kol-link.ghost > a:focus > .kol-span-wc, button.ghost:hover > .kol-span-wc, button.ghost:focus > .kol-span-wc { background-color: var(--color-ghost); From bc47a5c6c15e9dee728a6845adb7e54ff0a70988 Mon Sep 17 00:00:00 2001 From: alex_ Date: Tue, 3 Dec 2024 10:23:36 +0100 Subject: [PATCH 09/27] fixed link on breadcrumb Refs: #7036 --- .../components/src/components/@shared/_kol-link-mixin.scss | 4 ++-- packages/themes/default/src/mixins/link.scss | 7 ++----- 2 files changed, 4 insertions(+), 7 deletions(-) diff --git a/packages/components/src/components/@shared/_kol-link-mixin.scss b/packages/components/src/components/@shared/_kol-link-mixin.scss index 3994c1e43c..ebdbc9c090 100644 --- a/packages/components/src/components/@shared/_kol-link-mixin.scss +++ b/packages/components/src/components/@shared/_kol-link-mixin.scss @@ -21,8 +21,8 @@ .span-label { text-decoration-line: underline; - @at-root #{$root}:is(:focus, :hover):not([aria-disabled]) { - text-decoration-line: underline; + @at-root #{$root}:is(:focus, :hover):not([aria-disabled], [disabled]) & { + text-decoration-thickness: 0.2em; } } } diff --git a/packages/themes/default/src/mixins/link.scss b/packages/themes/default/src/mixins/link.scss index c0d1ea2f66..d33162dccf 100644 --- a/packages/themes/default/src/mixins/link.scss +++ b/packages/themes/default/src/mixins/link.scss @@ -18,16 +18,13 @@ } &__text { - @at-root #{$root}:focus { + @at-root #{$root}:focus & { border-radius: var(--border-radius); outline: var(--border-width) solid; } .span-label { - @at-root #{$root}:is(:focus, :hover):not([aria-disabled]) { - text-decoration-thickness: 0.25em; - } - @at-root #{$root}:is(:focus, :hover):not([disabled]) { + @at-root #{$root}:is(:focus, :hover):not([aria-disabled], [disabled]) & { text-decoration-thickness: 0.25em; } } From 3b5c1cafd0d0947db644dc58a37f4b94e871dd45 Mon Sep 17 00:00:00 2001 From: alex_ Date: Tue, 3 Dec 2024 11:41:38 +0100 Subject: [PATCH 10/27] fixed link in form Refs: #7036 --- packages/components/src/components/@shared/_kol-link-mixin.scss | 2 +- packages/components/src/components/form/shadow.tsx | 1 + packages/components/src/components/form/style.scss | 1 + packages/themes/default/src/components/form.scss | 2 +- packages/themes/ecl/src/ecl-ec/components/form.scss | 2 +- packages/themes/ecl/src/ecl-eu/components/form.scss | 2 +- packages/themes/itzbund/src/components/form.scss | 2 +- 7 files changed, 7 insertions(+), 5 deletions(-) diff --git a/packages/components/src/components/@shared/_kol-link-mixin.scss b/packages/components/src/components/@shared/_kol-link-mixin.scss index ebdbc9c090..c879e4228a 100644 --- a/packages/components/src/components/@shared/_kol-link-mixin.scss +++ b/packages/components/src/components/@shared/_kol-link-mixin.scss @@ -5,12 +5,12 @@ @layer kol-component { :host { display: inline-block; + font-size: rem(16); } .#{$block-classname} { $root: &; - font-size: rem(16); align-items: baseline; display: inline-flex; place-items: center; diff --git a/packages/components/src/components/form/shadow.tsx b/packages/components/src/components/form/shadow.tsx index a97fa70186..f8fca3d001 100644 --- a/packages/components/src/components/form/shadow.tsx +++ b/packages/components/src/components/form/shadow.tsx @@ -59,6 +59,7 @@ export class KolForm implements FormAPI { {errorList?.map((error, index) => (
  • Date: Tue, 3 Dec 2024 14:08:46 +0100 Subject: [PATCH 11/27] link host fix Refs: #7036 --- packages/themes/default/src/components/link.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/themes/default/src/components/link.scss b/packages/themes/default/src/components/link.scss index 546baf64e9..b8311e0ed8 100644 --- a/packages/themes/default/src/components/link.scss +++ b/packages/themes/default/src/components/link.scss @@ -3,7 +3,7 @@ @layer kol-theme-component { @include kol-link; - .kol-link { + :host { font-family: inherit; } } From ec32d6be8b0a6c946b21301755e180dce447fa7b Mon Sep 17 00:00:00 2001 From: alex_ Date: Tue, 3 Dec 2024 14:33:43 +0100 Subject: [PATCH 12/27] temp button fix Refs: #7036 --- packages/components/src/components/button/component.tsx | 3 ++- packages/components/src/components/button/shadow.tsx | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/components/src/components/button/component.tsx b/packages/components/src/components/button/component.tsx index b49afa60a3..6e112bf64a 100644 --- a/packages/components/src/components/button/component.tsx +++ b/packages/components/src/components/button/component.tsx @@ -121,6 +121,7 @@ export class KolButtonWc implements ButtonAPI, FocusableElement { aria-label={this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined} aria-selected={mapStringOrBoolean2String(this.state._ariaSelected)} class={{ + 'kol-button': true, button: true, disabled: this.state._disabled === true, [this.state._variant as string]: this.state._variant !== 'custom', @@ -138,7 +139,7 @@ export class KolButtonWc implements ButtonAPI, FocusableElement { type={this.state._type} > + Date: Tue, 3 Dec 2024 14:46:42 +0100 Subject: [PATCH 13/27] temp button snapshot Refs: #7036 --- .../test/__snapshots__/snapshot.spec.tsx.snap | 60 +++++++++---------- 1 file changed, 30 insertions(+), 30 deletions(-) diff --git a/packages/components/src/components/button/test/__snapshots__/snapshot.spec.tsx.snap b/packages/components/src/components/button/test/__snapshots__/snapshot.spec.tsx.snap index f427d59358..91962b02b7 100644 --- a/packages/components/src/components/button/test/__snapshots__/snapshot.spec.tsx.snap +++ b/packages/components/src/components/button/test/__snapshots__/snapshot.spec.tsx.snap @@ -1,12 +1,12 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`kol-button should render with _label="Label" _ariaDescription="Aria Description" 1`] = ` - +