From f914ff8376dd91c4f6f8ca149e1cb6becb622d88 Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Mon, 2 Oct 2023 18:45:30 +0200 Subject: refactor(components): rewrite Link component * rename `external` prop to `isExternal` * rename `download` prop to `isDownload` * rewrite CSS to reduce code length and complexity * move link styles in Sass placeholders to avoid repeats because of WordPress articles * move NavLink component to molecules --- src/components/atoms/links/link/link.module.scss | 70 ++++++++++++++++++++++++ 1 file changed, 70 insertions(+) create mode 100644 src/components/atoms/links/link/link.module.scss (limited to 'src/components/atoms/links/link/link.module.scss') diff --git a/src/components/atoms/links/link/link.module.scss b/src/components/atoms/links/link/link.module.scss new file mode 100644 index 0000000..8f94a54 --- /dev/null +++ b/src/components/atoms/links/link/link.module.scss @@ -0,0 +1,70 @@ +@use "../../../../styles/abstracts/placeholders"; + +.link { + color: var(--color-primary); + + &--regular { + @extend %link; + } + + &[hreflang], + &--download, + &--external { + @extend %link-with-icon; + } + + &[hreflang]:not(#{&}--download):not(#{&}--external) { + --is-icon-hidden: ""; + } + + &[hreflang] { + @extend %link-with-lang; + } + + &--download { + @extend %download-link; + } + + &--external { + @extend %external-link; + } + + &--download, + &--external { + &:not([hreflang]) { + --is-lang-hidden: ""; + } + } + + &--external#{&}--download { + @extend %external-download-link; + } +} + +:global([data-theme="light"]) { + :local { + .link { + &--download { + @extend %light-download-link; + } + + &--external { + @extend %light-external-link; + } + } + } +} + +:global([data-theme="dark"]) { + :local { + .link { + &--download { + @extend %dark-download-link; + } + + &--external { + @extend %dark-external-link; + } + } + } +} -- cgit v1.2.3