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/index.ts | 1 - src/components/atoms/links/link.module.scss | 220 --------------------- src/components/atoms/links/link.stories.tsx | 180 ----------------- src/components/atoms/links/link.test.tsx | 10 - src/components/atoms/links/link.tsx | 55 ------ src/components/atoms/links/link/index.ts | 1 + src/components/atoms/links/link/link.module.scss | 70 +++++++ src/components/atoms/links/link/link.stories.tsx | 178 +++++++++++++++++ src/components/atoms/links/link/link.test.tsx | 47 +++++ src/components/atoms/links/link/link.tsx | 90 +++++++++ src/components/atoms/links/nav-link.module.scss | 45 ----- src/components/atoms/links/nav-link.stories.tsx | 55 ------ src/components/atoms/links/nav-link.test.tsx | 13 -- src/components/atoms/links/nav-link.tsx | 32 --- src/components/molecules/layout/branding.tsx | 3 +- src/components/molecules/layout/meta.tsx | 2 +- src/components/molecules/nav/index.ts | 1 + src/components/molecules/nav/nav-link/index.ts | 1 + .../molecules/nav/nav-link/nav-link.module.scss | 61 ++++++ .../molecules/nav/nav-link/nav-link.stories.tsx | 79 ++++++++ .../molecules/nav/nav-link/nav-link.test.tsx | 28 +++ src/components/molecules/nav/nav-link/nav-link.tsx | 44 +++++ src/components/molecules/nav/nav-list.module.scss | 10 + src/components/molecules/nav/nav-list.tsx | 5 +- .../organisms/layout/comment.module.scss | 46 ++++- .../organisms/layout/summary.module.scss | 78 ++++++++ src/components/organisms/layout/summary.tsx | 8 +- src/content | 2 +- src/pages/cv.tsx | 4 +- src/styles/abstracts/_placeholders.scss | 1 + src/styles/abstracts/functions/_encode.scss | 2 +- src/styles/abstracts/placeholders/_links.scss | 102 ++++++++++ src/styles/base/_typography.scss | 27 --- src/styles/pages/article.module.scss | 37 ++++ src/styles/pages/partials/_article-links.scss | 202 ++----------------- 35 files changed, 905 insertions(+), 835 deletions(-) delete mode 100644 src/components/atoms/links/link.module.scss delete mode 100644 src/components/atoms/links/link.stories.tsx delete mode 100644 src/components/atoms/links/link.test.tsx delete mode 100644 src/components/atoms/links/link.tsx create mode 100644 src/components/atoms/links/link/index.ts create mode 100644 src/components/atoms/links/link/link.module.scss create mode 100644 src/components/atoms/links/link/link.stories.tsx create mode 100644 src/components/atoms/links/link/link.test.tsx create mode 100644 src/components/atoms/links/link/link.tsx delete mode 100644 src/components/atoms/links/nav-link.module.scss delete mode 100644 src/components/atoms/links/nav-link.stories.tsx delete mode 100644 src/components/atoms/links/nav-link.test.tsx delete mode 100644 src/components/atoms/links/nav-link.tsx create mode 100644 src/components/molecules/nav/nav-link/index.ts create mode 100644 src/components/molecules/nav/nav-link/nav-link.module.scss create mode 100644 src/components/molecules/nav/nav-link/nav-link.stories.tsx create mode 100644 src/components/molecules/nav/nav-link/nav-link.test.tsx create mode 100644 src/components/molecules/nav/nav-link/nav-link.tsx create mode 100644 src/styles/abstracts/placeholders/_links.scss (limited to 'src') diff --git a/src/components/atoms/links/index.ts b/src/components/atoms/links/index.ts index ad8824e..619f05c 100644 --- a/src/components/atoms/links/index.ts +++ b/src/components/atoms/links/index.ts @@ -1,4 +1,3 @@ export * from './link'; -export * from './nav-link'; export * from './sharing-link'; export * from './social-link'; diff --git a/src/components/atoms/links/link.module.scss b/src/components/atoms/links/link.module.scss deleted file mode 100644 index 4980a1c..0000000 --- a/src/components/atoms/links/link.module.scss +++ /dev/null @@ -1,220 +0,0 @@ -@use "../../../styles/abstracts/functions" as fun; -@use "../../../styles/abstracts/variables" as var; - -/* stylelint-disable no-descending-specificity */ -.link { - &[hreflang] { - &::after { - display: inline-block; - - /* Prettier is removing spacing between content parts. */ - - /* prettier-ignore */ - content: "\0000a0[" attr(hreflang) "]"; - font-size: var(--font-size-sm); - } - } - - &--download { - &::after { - display: inline-block; - - /* Prettier is removing spacing between content parts. */ - - /* prettier-ignore */ - content: "\0000a0" url(fun.encode-svg('')); - } - - &:focus:not(:active)::after { - /* Prettier is removing spacing between content parts. */ - - /* prettier-ignore */ - content: "\0000a0" url(fun.encode-svg('')); - } - - &[hreflang] { - &::after { - /* Prettier is removing spacing between content parts. */ - - /* prettier-ignore */ - content: "\0000a0[" attr(hreflang) "]\0000a0" url(fun.encode-svg('')); - } - - &:focus:not(:active)::after { - /* Prettier is removing spacing between content parts. */ - - /* prettier-ignore */ - content: "\0000a0[" attr(hreflang) "]\0000a0" url(fun.encode-svg('')); - } - } - } - - &--external { - &::after { - display: inline-block; - - /* Prettier is removing spacing between content parts. */ - - /* prettier-ignore */ - content: "\0000a0" url(fun.encode-svg('')); - } - - &:focus:not(:active)::after { - /* Prettier is removing spacing between content parts. */ - - /* prettier-ignore */ - content: "\0000a0" url(fun.encode-svg('')); - } - - &[hreflang] { - &::after { - /* Prettier is removing spacing between content parts. */ - - /* prettier-ignore */ - content: "\0000a0[" attr(hreflang) "]\0000a0" url(fun.encode-svg('')); - } - - &:focus:not(:active)::after { - /* Prettier is removing spacing between content parts. */ - - /* prettier-ignore */ - content: "\0000a0[" attr(hreflang) "]\0000a0" url(fun.encode-svg('')); - } - } - } - - &--external#{&}--download { - &::after { - /* Prettier is removing spacing between content parts. */ - - /* prettier-ignore */ - content: "\0000a0" url(fun.encode-svg('')) "\0000a0" url(fun.encode-svg('')); - } - - &:focus:not(:active)::after { - /* Prettier is removing spacing between content parts. */ - - /* prettier-ignore */ - content: "\0000a0" url(fun.encode-svg('')) "\0000a0" url(fun.encode-svg('')); - } - - &[hreflang] { - &::after { - /* Prettier is removing spacing between content parts. */ - - /* prettier-ignore */ - content: "\0000a0[" attr(hreflang) "]\0000a0" url(fun.encode-svg('')) "\0000a0" url(fun.encode-svg('')); - } - - &:focus:not(:active)::after { - /* Prettier is removing spacing between content parts. */ - - /* prettier-ignore */ - content: "\0000a0[" attr(hreflang) "]\0000a0" url(fun.encode-svg('')) "\0000a0" url(fun.encode-svg('')); - } - } - } -} - -:global([data-theme="dark"]) { - :local { - .link { - &--download { - &::after { - /* Prettier is removing spacing between content parts. */ - - /* prettier-ignore */ - content: "\0000a0" url(fun.encode-svg('')); - } - - &:focus:not(:active)::after { - /* Prettier is removing spacing between content parts. */ - - /* prettier-ignore */ - content: "\0000a0" url(fun.encode-svg('')); - } - - &[hreflang] { - &::after { - /* Prettier is removing spacing between content parts. */ - - /* prettier-ignore */ - content: "\0000a0[" attr(hreflang) "]\0000a0" url(fun.encode-svg('')); - } - - &:focus:not(:active)::after { - /* Prettier is removing spacing between content parts. */ - - /* prettier-ignore */ - content: "\0000a0[" attr(hreflang) "]\0000a0" url(fun.encode-svg('')); - } - } - } - - &--external { - &::after { - /* Prettier is removing spacing between content parts. */ - - /* prettier-ignore */ - content: "\0000a0" url(fun.encode-svg('')); - } - - &:focus:not(:active)::after { - /* Prettier is removing spacing between content parts. */ - - /* prettier-ignore */ - content: "\0000a0" url(fun.encode-svg('')); - } - - &[hreflang] { - &::after { - /* Prettier is removing spacing between content parts. */ - - /* prettier-ignore */ - content: "\0000a0[" attr(hreflang) "]\0000a0" url(fun.encode-svg('')); - } - - &:focus:not(:active)::after { - /* Prettier is removing spacing between content parts. */ - - /* prettier-ignore */ - content: "\0000a0[" attr(hreflang) "]\0000a0" url(fun.encode-svg('')); - } - } - } - - &--external.link--download { - &::after { - /* Prettier is removing spacing between content parts. */ - - /* prettier-ignore */ - content: "\0000a0" url(fun.encode-svg('')) "\0000a0" url(fun.encode-svg('')); - } - - &:focus:not(:active)::after { - /* Prettier is removing spacing between content parts. */ - - /* prettier-ignore */ - content: "\0000a0" url(fun.encode-svg('')) "\0000a0" url(fun.encode-svg('')); - } - - &[hreflang] { - &::after { - /* Prettier is removing spacing between content parts. */ - - /* prettier-ignore */ - content: "\0000a0[" attr(hreflang) "]\0000a0" url(fun.encode-svg('')) "\0000a0" url(fun.encode-svg('')); - } - - &:focus:not(:active)::after { - /* Prettier is removing spacing between content parts. */ - - /* prettier-ignore */ - content: "\0000a0[" attr(hreflang) "]\0000a0" url(fun.encode-svg('')) "\0000a0" url(fun.encode-svg('')); - } - } - } - } - } -} -/* stylelint-enable no-descending-specificity */ diff --git a/src/components/atoms/links/link.stories.tsx b/src/components/atoms/links/link.stories.tsx deleted file mode 100644 index 8351de7..0000000 --- a/src/components/atoms/links/link.stories.tsx +++ /dev/null @@ -1,180 +0,0 @@ -import { ComponentMeta, ComponentStory } from '@storybook/react'; -import { Link } from './link'; - -/** - * Link - Storybook Meta - */ -export default { - title: 'Atoms/Typography/Links', - component: Link, - argTypes: { - children: { - control: { - type: 'text', - }, - description: 'The link body.', - type: { - name: 'string', - required: true, - }, - }, - className: { - control: { - type: 'text', - }, - description: 'Set additional classnames.', - table: { - category: 'Styles', - }, - type: { - name: 'string', - required: false, - }, - }, - download: { - control: { - type: 'boolean', - }, - description: 'Determine if the link purpose is to download a file.', - table: { - category: 'Options', - defaultValue: { summary: false }, - }, - type: { - name: 'boolean', - required: false, - }, - }, - external: { - control: { - type: 'boolean', - }, - description: 'Determine if the link is external of the current website.', - table: { - category: 'Options', - defaultValue: { summary: false }, - }, - type: { - name: 'boolean', - required: false, - }, - }, - href: { - control: { - type: 'text', - }, - description: 'The link target.', - type: { - name: 'string', - required: true, - }, - }, - lang: { - control: { - type: 'text', - }, - table: { - category: 'Options', - }, - description: 'The target language as code language.', - type: { - name: 'string', - required: false, - }, - }, - }, -} as ComponentMeta; - -const Template: ComponentStory = (args) => ; - -/** - * Links Stories - Default - */ -export const Default = Template.bind({}); -Default.args = { - children: 'A link', - href: '#', - download: false, - external: false, -}; - -/** - * Links Stories - Download - */ -export const Download = Template.bind({}); -Download.args = { - children: 'A link to a file', - href: '#', - download: true, - external: false, -}; - -/** - * Links Stories - DownloadWithLang - */ -export const DownloadWithLang = Template.bind({}); -DownloadWithLang.args = { - children: 'A link to a file', - href: '#', - download: true, - external: false, - lang: 'en', -}; - -/** - * Links Stories - External - */ -export const External = Template.bind({}); -External.args = { - children: 'A link', - href: '#', - download: false, - external: true, -}; - -/** - * Links Stories - External download - */ -export const ExternalDownload = Template.bind({}); -ExternalDownload.args = { - children: 'A link', - href: '#', - download: true, - external: true, -}; - -/** - * Links Stories - External With Lang - */ -export const ExternalWithLang = Template.bind({}); -ExternalWithLang.args = { - children: 'A link', - href: '#', - download: false, - external: true, - lang: 'en', -}; - -/** - * Links Stories - External download with lang - */ -export const ExternalDownloadWithLang = Template.bind({}); -ExternalDownloadWithLang.args = { - children: 'A link', - href: '#', - download: true, - external: true, - lang: 'en', -}; - -/** - * Links Stories - With Lang - */ -export const WithLang = Template.bind({}); -WithLang.args = { - children: 'A link', - href: '#', - download: false, - external: false, - lang: 'en', -}; diff --git a/src/components/atoms/links/link.test.tsx b/src/components/atoms/links/link.test.tsx deleted file mode 100644 index 9829c1b..0000000 --- a/src/components/atoms/links/link.test.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import { describe, expect, it } from '@jest/globals'; -import { render, screen } from '../../../../tests/utils'; -import { Link } from './link'; - -describe('Link', () => { - it('render a link', () => { - render(A link); - expect(screen.getByRole('link')).toHaveTextContent('A link'); - }); -}); diff --git a/src/components/atoms/links/link.tsx b/src/components/atoms/links/link.tsx deleted file mode 100644 index 1765bb5..0000000 --- a/src/components/atoms/links/link.tsx +++ /dev/null @@ -1,55 +0,0 @@ -import NextLink from 'next/link'; -import { AnchorHTMLAttributes, FC, ReactNode } from 'react'; -import styles from './link.module.scss'; - -export type LinkProps = AnchorHTMLAttributes & { - /** - * The link body. - */ - children: ReactNode; - /** - * True if it is a download link. Default: false. - */ - download?: boolean; - /** - * True if it is an external link. Default: false. - */ - external?: boolean; - /** - * The link target. - */ - href: string; - /** - * The link target code language. - */ - lang?: string; -}; - -/** - * Link Component - * - * Render a link. - */ -export const Link: FC = ({ - children, - className = '', - download = false, - external = false, - href, - lang, - ...props -}) => { - const downloadClass = download ? styles['link--download'] : ''; - const linkClass = `${styles.link} ${downloadClass} ${className}`; - const externalLinkClass = `${linkClass} ${styles['link--external']}`; - - return external ? ( - - {children} - - ) : ( - - {children} - - ); -}; diff --git a/src/components/atoms/links/link/index.ts b/src/components/atoms/links/link/index.ts new file mode 100644 index 0000000..e33728e --- /dev/null +++ b/src/components/atoms/links/link/index.ts @@ -0,0 +1 @@ +export * from './link'; 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; + } + } + } +} diff --git a/src/components/atoms/links/link/link.stories.tsx b/src/components/atoms/links/link/link.stories.tsx new file mode 100644 index 0000000..0a6a6c5 --- /dev/null +++ b/src/components/atoms/links/link/link.stories.tsx @@ -0,0 +1,178 @@ +import type { ComponentMeta, ComponentStory } from '@storybook/react'; +import { Link } from './link'; + +/** + * Link - Storybook Meta + */ +export default { + title: 'Atoms/Links/Link', + component: Link, + argTypes: { + children: { + control: { + type: 'text', + }, + description: 'The link body.', + type: { + name: 'string', + required: true, + }, + }, + className: { + control: { + type: 'text', + }, + description: 'Set additional classnames.', + table: { + category: 'Styles', + }, + type: { + name: 'string', + required: false, + }, + }, + href: { + control: { + type: 'text', + }, + description: 'The link target.', + type: { + name: 'string', + required: true, + }, + }, + isDownload: { + control: { + type: 'boolean', + }, + description: 'Determine if the link purpose is to download a file.', + table: { + category: 'Options', + defaultValue: { summary: false }, + }, + type: { + name: 'boolean', + required: false, + }, + }, + isExternal: { + control: { + type: 'boolean', + }, + description: 'Determine if the link is external of the current website.', + table: { + category: 'Options', + defaultValue: { summary: false }, + }, + type: { + name: 'boolean', + required: false, + }, + }, + lang: { + control: { + type: 'text', + }, + table: { + category: 'Options', + }, + description: 'The target language as code language.', + type: { + name: 'string', + required: false, + }, + }, + }, +} as ComponentMeta; + +const Template: ComponentStory = (args) => ; + +/** + * Links Stories - Default + */ +export const Default = Template.bind({}); +Default.args = { + children: 'A link', + href: '#', +}; + +/** + * Links Stories - Download + */ +export const DownloadLink = Template.bind({}); +DownloadLink.args = { + children: 'A link to a file', + href: '#', + isDownload: true, + isExternal: false, +}; + +/** + * Links Stories - Download link with lang + */ +export const DownloadLinkWithLang = Template.bind({}); +DownloadLinkWithLang.args = { + children: 'A link to a file', + href: '#', + isDownload: true, + isExternal: false, + lang: 'en', +}; + +/** + * Links Stories - External + */ +export const ExternalLink = Template.bind({}); +ExternalLink.args = { + children: 'A link', + href: '#', + isDownload: false, + isExternal: true, +}; + +/** + * Links Stories - External download link + */ +export const ExternalDownload = Template.bind({}); +ExternalDownload.args = { + children: 'A link', + href: '#', + isDownload: true, + isExternal: true, +}; + +/** + * Links Stories - External link with Lang + */ +export const ExternalLinkWithLang = Template.bind({}); +ExternalLinkWithLang.args = { + children: 'A link', + href: '#', + isDownload: false, + isExternal: true, + lang: 'en', +}; + +/** + * Links Stories - External download with lang + */ +export const ExternalDownloadWithLang = Template.bind({}); +ExternalDownloadWithLang.args = { + children: 'A link', + href: '#', + isDownload: true, + isExternal: true, + lang: 'en', +}; + +/** + * Links Stories - With Lang + */ +export const LinkLang = Template.bind({}); +LinkLang.args = { + children: 'A link', + href: '#', + isDownload: false, + isExternal: false, + lang: 'en', +}; diff --git a/src/components/atoms/links/link/link.test.tsx b/src/components/atoms/links/link/link.test.tsx new file mode 100644 index 0000000..ad1951d --- /dev/null +++ b/src/components/atoms/links/link/link.test.tsx @@ -0,0 +1,47 @@ +import { describe, expect, it } from '@jest/globals'; +import { render, screen as rtlScreen } from '@testing-library/react'; +import { Link } from './link'; + +describe('Link', () => { + it('renders a link', () => { + const anchor = 'porro'; + const target = '/tempora'; + + render({anchor}); + + expect(rtlScreen.getByRole('link', { name: anchor })).toHaveAttribute( + 'href', + target + ); + }); + + it('can render an external link', () => { + const anchor = 'accusamus'; + const target = 'https://www.example.com'; + + render( + + {anchor} + + ); + + expect(rtlScreen.getByRole('link', { name: anchor })).toHaveClass( + 'link--external' + ); + }); + + it('can render a download link', () => { + const anchor = 'dolor'; + const target = '/officiis.pdf'; + + render( + + {anchor} + + ); + + expect(rtlScreen.getByRole('link', { name: anchor })).toHaveClass( + 'link--download' + ); + }); +}); diff --git a/src/components/atoms/links/link/link.tsx b/src/components/atoms/links/link/link.tsx new file mode 100644 index 0000000..e88cc7c --- /dev/null +++ b/src/components/atoms/links/link/link.tsx @@ -0,0 +1,90 @@ +import NextLink from 'next/link'; +import { + forwardRef, + type AnchorHTMLAttributes, + type ForwardRefRenderFunction, + type ReactNode, +} from 'react'; +import styles from './link.module.scss'; + +export type LinkProps = Omit< + AnchorHTMLAttributes, + 'children' | 'download' | 'hrefLang' | 'lang' +> & { + /** + * The link body. + */ + children: ReactNode; + /** + * Should we disable the default transition on links? + * + * @default false + */ + disableTransition?: boolean; + /** + * True if it is a download link. + * + * @default false + */ + isDownload?: boolean; + /** + * True if it is an external link. + * + * @default false + */ + isExternal?: boolean; + /** + * The link target. + */ + href: string; + /** + * The link target code language. + */ + lang?: string; +}; + +const LinkWithRef: ForwardRefRenderFunction = ( + { + children, + className = '', + disableTransition = false, + isDownload = false, + isExternal = false, + href, + lang, + rel = '', + ...props + }, + ref +) => { + const LinkComponent = isExternal ? 'a' : NextLink; + const linkClass = [ + styles.link, + styles[disableTransition ? '' : 'link--regular'], + styles[isDownload ? 'link--download' : ''], + styles[isExternal ? 'link--external' : ''], + className, + ].join(' '); + const linkRel = + isExternal && !rel.includes('external') ? `external ${rel}` : rel; + + return ( + + {children} + + ); +}; + +/** + * Link Component + * + * Render a link. + */ +export const Link = forwardRef(LinkWithRef); diff --git a/src/components/atoms/links/nav-link.module.scss b/src/components/atoms/links/nav-link.module.scss deleted file mode 100644 index e72885a..0000000 --- a/src/components/atoms/links/nav-link.module.scss +++ /dev/null @@ -1,45 +0,0 @@ -@use "../../../styles/abstracts/functions" as fun; -@use "../../../styles/abstracts/mixins" as mix; -@use "../../../styles/abstracts/placeholders"; - -.link { - --draw-border-thickness: #{fun.convert-px(4)}; - --draw-border-color1: var(--color-primary-light); - --draw-border-color2: var(--color-primary-lighter); - - display: inline-flex; - flex-flow: column nowrap; - place-items: center; - place-content: center; - row-gap: var(--spacing-2xs); - min-width: var(--link-min-width, fun.convert-px(85)); - padding: var(--spacing-xs); - background: inherit; - font-size: var(--font-size-sm); - font-variant: small-caps; - font-weight: 600; - line-height: 1; - text-decoration: none; - - @include mix.media("screen") { - @include mix.dimensions("md") { - border-radius: 8%; - } - } - - &:hover, - &:focus { - @extend %draw-borders; - } - - &:focus { - color: var(--color-primary-light); - } - - &:active { - --draw-border-color1: var(--color-primary-dark); - --draw-border-color2: var(--color-primary-light); - - @extend %draw-borders; - } -} diff --git a/src/components/atoms/links/nav-link.stories.tsx b/src/components/atoms/links/nav-link.stories.tsx deleted file mode 100644 index 7fca926..0000000 --- a/src/components/atoms/links/nav-link.stories.tsx +++ /dev/null @@ -1,55 +0,0 @@ -import { ComponentMeta, ComponentStory } from '@storybook/react'; -import { NavLink as NavLinkComponent } from './nav-link'; - -/** - * NavLink - Storybook Meta - */ -export default { - title: 'Atoms/Typography/Links', - component: NavLinkComponent, - argTypes: { - href: { - control: { - type: 'text', - }, - description: 'The link target.', - type: { - name: 'string', - required: true, - }, - }, - label: { - control: { - type: 'text', - }, - description: 'The link label.', - type: { - name: 'string', - required: true, - }, - }, - logo: { - control: { - type: null, - }, - description: 'The link logo.', - type: { - name: 'string', - required: true, - }, - }, - }, -} as ComponentMeta; - -const Template: ComponentStory = (args) => ( - -); - -/** - * Links Stories - Nav Link - */ -export const NavLink = Template.bind({}); -NavLink.args = { - href: '#', - label: 'A nav link', -}; diff --git a/src/components/atoms/links/nav-link.test.tsx b/src/components/atoms/links/nav-link.test.tsx deleted file mode 100644 index acf3225..0000000 --- a/src/components/atoms/links/nav-link.test.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import { describe, expect, it } from '@jest/globals'; -import { render, screen } from '../../../../tests/utils'; -import { NavLink } from './nav-link'; - -describe('NavLink', () => { - it('renders a nav link to blog page', () => { - render(); - expect(screen.getByRole('link', { name: 'Blog' })).toHaveAttribute( - 'href', - '/blog' - ); - }); -}); diff --git a/src/components/atoms/links/nav-link.tsx b/src/components/atoms/links/nav-link.tsx deleted file mode 100644 index 109529c..0000000 --- a/src/components/atoms/links/nav-link.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import Link from 'next/link'; -import { FC, ReactNode } from 'react'; -import styles from './nav-link.module.scss'; - -export type NavLinkProps = { - /** - * Link target. - */ - href: string; - /** - * Link label. - */ - label: string; - /** - * Link logo. - */ - logo?: ReactNode; -}; - -/** - * NavLink component - * - * Render a navigation link. - */ -export const NavLink: FC = ({ href, label, logo }) => { - return ( - - {logo} - {label} - - ); -}; diff --git a/src/components/molecules/layout/branding.tsx b/src/components/molecules/layout/branding.tsx index 981da74..dceee5e 100644 --- a/src/components/molecules/layout/branding.tsx +++ b/src/components/molecules/layout/branding.tsx @@ -1,8 +1,7 @@ -import Link from 'next/link'; import { type FC, useRef } from 'react'; import { useIntl } from 'react-intl'; import { useStyles } from '../../../utils/hooks'; -import { Heading } from '../../atoms'; +import { Heading, Link } from '../../atoms'; import { FlippingLogo, type FlippingLogoProps } from '../images'; import styles from './branding.module.scss'; diff --git a/src/components/molecules/layout/meta.tsx b/src/components/molecules/layout/meta.tsx index 094c420..63909a4 100644 --- a/src/components/molecules/layout/meta.tsx +++ b/src/components/molecules/layout/meta.tsx @@ -336,7 +336,7 @@ export const Meta: FC = ({ ); case 'website': return typeof value === 'string' ? ( - + {value} ) : null; diff --git a/src/components/molecules/nav/index.ts b/src/components/molecules/nav/index.ts index 9c46050..fe7cd0b 100644 --- a/src/components/molecules/nav/index.ts +++ b/src/components/molecules/nav/index.ts @@ -1,3 +1,4 @@ export * from './breadcrumb'; +export * from './nav-link'; export * from './nav-list'; export * from './pagination'; diff --git a/src/components/molecules/nav/nav-link/index.ts b/src/components/molecules/nav/nav-link/index.ts new file mode 100644 index 0000000..f1b68c2 --- /dev/null +++ b/src/components/molecules/nav/nav-link/index.ts @@ -0,0 +1 @@ +export * from './nav-link'; diff --git a/src/components/molecules/nav/nav-link/nav-link.module.scss b/src/components/molecules/nav/nav-link/nav-link.module.scss new file mode 100644 index 0000000..8a7d371 --- /dev/null +++ b/src/components/molecules/nav/nav-link/nav-link.module.scss @@ -0,0 +1,61 @@ +@use "../../../../styles/abstracts/functions" as fun; +@use "../../../../styles/abstracts/placeholders"; + +.link { + --draw-border-thickness: #{fun.convert-px(4)}; + --draw-border-color1: var(--color-primary-light); + --draw-border-color2: var(--color-primary-lighter); + + display: flex; + flex-flow: row wrap; + place-items: center; + place-content: center; + row-gap: var(--spacing-2xs); + min-width: var(--link-min-width, fun.convert-px(80)); + padding: var(--spacing-xs) var(--spacing-xs) var(--spacing-2xs); + background: none; + border-radius: 8%; + font-size: var(--font-size-sm); + font-variant: small-caps; + font-weight: 600; + text-align: center; + text-decoration: none; + + &--inline { + width: fit-content; + + .logo { + margin-right: var(--spacing-xs); + } + } + + &--stack { + .logo { + flex: 0 0 100%; + display: flex; + place-content: center; + } + } + + &:hover, + &:focus { + @extend %draw-borders; + } + + &:hover { + color: var(--color-primary-light); + } + + &:focus { + color: var(--color-primary-light); + } + + &:active { + --draw-border-color1: var(--color-primary-dark); + --draw-border-color2: var(--color-primary-light); + + color: var(--color-primary-dark); + + @extend %draw-borders; + } +} diff --git a/src/components/molecules/nav/nav-link/nav-link.stories.tsx b/src/components/molecules/nav/nav-link/nav-link.stories.tsx new file mode 100644 index 0000000..4e8400f --- /dev/null +++ b/src/components/molecules/nav/nav-link/nav-link.stories.tsx @@ -0,0 +1,79 @@ +import type { ComponentMeta, ComponentStory } from '@storybook/react'; +import { Icon } from '../../../atoms'; +import { NavLink as NavLinkComponent } from './nav-link'; + +/** + * NavLink - Storybook Meta + */ +export default { + title: 'Molecules/Nav/NavLink', + component: NavLinkComponent, + argTypes: { + href: { + control: { + type: 'text', + }, + description: 'The link target.', + type: { + name: 'string', + required: true, + }, + }, + label: { + control: { + type: 'text', + }, + description: 'The link label.', + type: { + name: 'string', + required: true, + }, + }, + logo: { + control: { + type: null, + }, + description: 'The link logo.', + type: { + name: 'string', + required: true, + }, + }, + }, +} as ComponentMeta; + +const Template: ComponentStory = (args) => ( +
+ +
+); + +/** + * NavLink Stories - Default + */ +export const Default = Template.bind({}); +Default.args = { + href: '#', + label: 'A nav link', +}; + +/** + * NavLink Stories - StackWithLogo + */ +export const StackWithLogo = Template.bind({}); +StackWithLogo.args = { + href: '#example', + label: 'A nav link', + logo: , +}; + +/** + * NavLink Stories - InlineWithLogo + */ +export const InlineWithLogo = Template.bind({}); +InlineWithLogo.args = { + href: '#example', + isInline: true, + label: 'A nav link', + logo: , +}; diff --git a/src/components/molecules/nav/nav-link/nav-link.test.tsx b/src/components/molecules/nav/nav-link/nav-link.test.tsx new file mode 100644 index 0000000..aa9b557 --- /dev/null +++ b/src/components/molecules/nav/nav-link/nav-link.test.tsx @@ -0,0 +1,28 @@ +import { describe, expect, it } from '@jest/globals'; +import { render, screen as rtlScreen } from '@testing-library/react'; +import { NavLink } from './nav-link'; + +describe('NavLink', () => { + it('renders a link', () => { + const label = 'eius'; + const target = '#harum'; + + render(); + + expect(rtlScreen.getByRole('link', { name: label })).toHaveAttribute( + 'href', + target + ); + }); + + it('can render a nav link with inlined contents', () => { + const label = 'eius'; + const target = '#harum'; + + render(); + + expect(rtlScreen.getByRole('link', { name: label })).toHaveClass( + 'link--inline' + ); + }); +}); diff --git a/src/components/molecules/nav/nav-link/nav-link.tsx b/src/components/molecules/nav/nav-link/nav-link.tsx new file mode 100644 index 0000000..f9fc529 --- /dev/null +++ b/src/components/molecules/nav/nav-link/nav-link.tsx @@ -0,0 +1,44 @@ +import { + type ForwardRefRenderFunction, + forwardRef, + type ReactNode, +} from 'react'; +import { Link, type LinkProps } from '../../../atoms'; +import styles from './nav-link.module.scss'; + +export type NavLinkProps = Omit & { + /** + * Should the logo and label be inlined? + * + * @default false + */ + isInline?: boolean; + /** + * The link label. + */ + label: string; + /** + * The link logo. + */ + logo?: ReactNode; +}; + +const NavLinkWithRef: ForwardRefRenderFunction< + HTMLAnchorElement, + NavLinkProps +> = ({ className = '', isInline = false, label, logo, ...props }, ref) => { + const linkClass = [ + styles.link, + styles[isInline ? 'link--inline' : 'link--stack'], + className, + ].join(' '); + + return ( + + {logo ? {logo} : null} + {label} + + ); +}; + +export const NavLink = forwardRef(NavLinkWithRef); diff --git a/src/components/molecules/nav/nav-list.module.scss b/src/components/molecules/nav/nav-list.module.scss index ff99581..316638e 100644 --- a/src/components/molecules/nav/nav-list.module.scss +++ b/src/components/molecules/nav/nav-list.module.scss @@ -1,4 +1,14 @@ .nav { + &--main { + width: fit-content; + } + + &--main & { + &__item { + flex: 1; + } + } + &--footer & { &__item:not(:first-child) { &::before { diff --git a/src/components/molecules/nav/nav-list.tsx b/src/components/molecules/nav/nav-list.tsx index 55c2aa9..b3c7138 100644 --- a/src/components/molecules/nav/nav-list.tsx +++ b/src/components/molecules/nav/nav-list.tsx @@ -1,5 +1,6 @@ import type { FC, ReactNode } from 'react'; -import { Link, List, ListItem, Nav, NavLink, type NavProps } from '../../atoms'; +import { Link, List, ListItem, Nav, type NavProps } from '../../atoms'; +import { NavLink } from './nav-link'; import styles from './nav-list.module.scss'; export type NavItem = { @@ -49,7 +50,7 @@ export const NavList: FC = ({ ...props }) => { const kindClass = `nav--${kind}`; - const navClass = `${styles[kindClass]} ${className}`; + const navClass = `${styles.nav} ${styles[kindClass]} ${className}`; /** * Get the nav items. diff --git a/src/components/organisms/layout/comment.module.scss b/src/components/organisms/layout/comment.module.scss index f645354..bf8aada 100644 --- a/src/components/organisms/layout/comment.module.scss +++ b/src/components/organisms/layout/comment.module.scss @@ -1,11 +1,13 @@ @use "../../../styles/abstracts/functions" as fun; @use "../../../styles/abstracts/mixins" as mix; +@use "../../../styles/abstracts/placeholders"; .wrapper { padding: var(--spacing-md); background: var(--color-bg); border: fun.convert-px(1) solid var(--color-border); - box-shadow: fun.convert-px(3) fun.convert-px(3) 0 0 var(--color-shadow-light), + box-shadow: + fun.convert-px(3) fun.convert-px(3) 0 0 var(--color-shadow-light), fun.convert-px(4) fun.convert-px(4) fun.convert-px(3) fun.convert-px(-2) var(--color-shadow); @@ -50,7 +52,8 @@ height: fun.convert-px(85); position: relative; border-radius: fun.convert-px(3); - box-shadow: 0 0 0 fun.convert-px(1) var(--color-shadow-light), + box-shadow: + 0 0 0 fun.convert-px(1) var(--color-shadow-light), fun.convert-px(2) fun.convert-px(2) 0 fun.convert-px(1) var(--color-shadow); @@ -80,6 +83,45 @@ .body { overflow-wrap: break-word; + + :global { + a { + @extend %link; + + &[hreflang], + &.download, + &.external { + @extend %link-with-icon; + } + + &[hreflang] { + @extend %link-with-lang; + } + + &[hreflang]:not(.download, .external) { + --is-icon-hidden: ""; + } + + &.download { + @extend %download-link; + } + + &.external { + @extend %external-link; + } + + &.download, + &.external { + &:not([hreflang]) { + --is-lang-hidden: ""; + } + } + + &.external.download { + @extend %external-download-link; + } + } + } } .footer { diff --git a/src/components/organisms/layout/summary.module.scss b/src/components/organisms/layout/summary.module.scss index 5052f73..b6cb4f4 100644 --- a/src/components/organisms/layout/summary.module.scss +++ b/src/components/organisms/layout/summary.module.scss @@ -1,5 +1,6 @@ @use "../../../styles/abstracts/functions" as fun; @use "../../../styles/abstracts/mixins" as mix; +@use "../../../styles/abstracts/placeholders"; .wrapper { display: grid; @@ -118,3 +119,80 @@ } } } + +.intro { + :global { + a { + @extend %link; + + &[hreflang], + &.download, + &.external { + @extend %link-with-icon; + } + + &[hreflang] { + @extend %link-with-lang; + } + + &[hreflang]:not(.download, .external) { + --is-icon-hidden: ""; + } + + &.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 { + .intro { + :global { + a { + &.download { + @extend %light-download-link; + } + + &.external { + @extend %light-external-link; + } + } + } + } + } +} + +:global([data-theme="dark"]) { + :local { + .intro { + :global { + a { + &.download { + @extend %dark-download-link; + } + + &.external { + @extend %dark-external-link; + } + } + } + } + } +} diff --git a/src/components/organisms/layout/summary.tsx b/src/components/organisms/layout/summary.tsx index d66af75..e21e4c7 100644 --- a/src/components/organisms/layout/summary.tsx +++ b/src/components/organisms/layout/summary.tsx @@ -117,9 +117,11 @@ export const Summary: FC = ({
- {/* eslint-disable-next-line react/no-danger -- Not safe but intro can - * contains links or formatting so we need it. */} -
+
<> {readMore} diff --git a/src/content b/src/content index c7236df..0a5267c 160000 --- a/src/content +++ b/src/content @@ -1 +1 @@ -Subproject commit c7236df956a4f9e242126540c175ac5dfd0b9c72 +Subproject commit 0a5267ca7df1b6600741aa172ffdfe7b4f762d9a diff --git a/src/pages/cv.tsx b/src/pages/cv.tsx index 5882ff6..b23c7a2 100644 --- a/src/pages/cv.tsx +++ b/src/pages/cv.tsx @@ -38,7 +38,7 @@ const ExternalLink = ({ href = '', ...props }: AnchorHTMLAttributes) => ( - + {children} ); @@ -172,7 +172,7 @@ const CVPage: NextPageWithLayout = () => { }, { link: (chunks: ReactNode) => ( - + {chunks} ), diff --git a/src/styles/abstracts/_placeholders.scss b/src/styles/abstracts/_placeholders.scss index c978f96..04522d7 100644 --- a/src/styles/abstracts/_placeholders.scss +++ b/src/styles/abstracts/_placeholders.scss @@ -3,4 +3,5 @@ @forward "./placeholders/clearfix"; @forward "./placeholders/headings"; @forward "./placeholders/layout"; +@forward "./placeholders/links"; @forward "./placeholders/lists"; diff --git a/src/styles/abstracts/functions/_encode.scss b/src/styles/abstracts/functions/_encode.scss index 4350185..388d106 100644 --- a/src/styles/abstracts/functions/_encode.scss +++ b/src/styles/abstracts/functions/_encode.scss @@ -4,7 +4,7 @@ /// @param {String} $svg A complete svg (`...`). /// @return The encoded svg, ready to use for background-image. @function encode-svg($svg) { - $svg-encoding: (("<", "%3C"), (">", "%3E"), ("#", "%23")); + $svg-encoding: (('"', "'"), ("<", "%3C"), (">", "%3E"), ("#", "%23")); @each $char, $encoded in $svg-encoding { $svg: fun.str-replace($svg, $char, $encoded); diff --git a/src/styles/abstracts/placeholders/_links.scss b/src/styles/abstracts/placeholders/_links.scss new file mode 100644 index 0000000..a230e70 --- /dev/null +++ b/src/styles/abstracts/placeholders/_links.scss @@ -0,0 +1,102 @@ +@use "../../abstracts/functions" as fun; +@use "../../abstracts/variables" as var; + +%link { + background: linear-gradient(to top, var(--color-primary) 50%, transparent 50%) + 0 0 / 100% 201% no-repeat; + color: var(--color-primary); + text-decoration-thickness: 0.15em; + text-underline-offset: 20%; + transition: + all 0.3s linear 0s, + text-decoration 0.18s ease-in-out 0s; + + &:hover { + color: var(--color-primary-light); + text-decoration-thickness: 0.25em; + } + + &:focus { + background-position: 0 100%; + color: var(--color-fg-inverted); + } + + &:active { + background-position: 0 0; + color: var(--color-primary-dark); + text-decoration-thickness: 18%; + } +} + +%link-with-icon { + &::after { + display: inline-block; + content: var(--is-lang-hidden, "\0000a0" var(--lang-icon, "")) + var(--is-icon-hidden, "\0000a0" var(--link-icon, "")); + font-size: var(--font-size-sm); + } +} + +%link-with-lang { + --lang-icon: "[" attr(hreflang) "]"; +} + +%light-download-link { + // Prettier is removing spacing between attributes. + // prettier-ignore + --download-icon: url('#{fun.encode-svg('')}'); + + &:focus:not(:active) { + // Prettier is removing spacing between attributes. + // prettier-ignore + --download-icon: url('#{fun.encode-svg('')}'); + } +} + +%dark-download-link { + // Prettier is removing spacing between attributes. + // prettier-ignore + --download-icon: url('#{fun.encode-svg('')}'); + + &:focus:not(:active) { + // Prettier is removing spacing between attributes. + // prettier-ignore + --download-icon: url('#{fun.encode-svg('')}'); + } +} + +%light-external-link { + // Prettier is removing spacing between attributes. + // prettier-ignore + --external-icon: url('#{fun.encode-svg('')}'); + + &:focus:not(:active) { + // Prettier is removing spacing between attributes. + // prettier-ignore + --external-icon: url('#{fun.encode-svg('')}'); + } +} + +%dark-external-link { + // Prettier is removing spacing between attributes. + // prettier-ignore + --external-icon: url('#{fun.encode-svg('')}'); + + &:focus:not(:active) { + // Prettier is removing spacing between attributes. + // prettier-ignore + --external-icon: url('#{fun.encode-svg('')}'); + } +} + +%download-link { + --link-icon: var(--download-icon); +} + +%external-link { + --link-icon: var(--external-icon); +} + +%external-download-link { + --link-icon: var(--download-icon) "\0000a0" var(--external-icon); +} diff --git a/src/styles/base/_typography.scss b/src/styles/base/_typography.scss index c98533e..170f246 100644 --- a/src/styles/base/_typography.scss +++ b/src/styles/base/_typography.scss @@ -9,33 +9,6 @@ small { font-size: var(--font-size-sm); } -a { - background: linear-gradient(to top, var(--color-primary) 50%, transparent 50%) - 0 0 / 100% 201% no-repeat; - color: var(--color-primary); - text-decoration-thickness: 0.15em; - text-underline-offset: 20%; - transition: - all 0.3s linear 0s, - text-decoration 0.18s ease-in-out 0s; - - &:hover { - color: var(--color-primary-light); - text-decoration-thickness: 0.25em; - } - - &:focus { - background-position: 0 100%; - color: var(--color-fg-inverted); - } - - &:active { - background-position: 0 0; - color: var(--color-primary-dark); - text-decoration-thickness: 18%; - } -} - button, input, optgroup, diff --git a/src/styles/pages/article.module.scss b/src/styles/pages/article.module.scss index 088718f..068826f 100644 --- a/src/styles/pages/article.module.scss +++ b/src/styles/pages/article.module.scss @@ -1,5 +1,6 @@ @use "../abstracts/functions" as fun; @use "../abstracts/mixins" as mix; +@use "../abstracts/placeholders"; @use "partials/article-headings"; @use "partials/article-links"; @use "partials/article-lists"; @@ -28,6 +29,42 @@ } } +:global([data-theme="light"]) { + :local { + .body { + :global { + a { + &.download { + @extend %light-download-link; + } + + &.external { + @extend %light-external-link; + } + } + } + } + } +} + +:global([data-theme="dark"]) { + :local { + .body { + :global { + a { + &.download { + @extend %dark-download-link; + } + + &.external { + @extend %dark-external-link; + } + } + } + } + } +} + .widget { @include mix.media("screen") { @include mix.dimensions("md") { diff --git a/src/styles/pages/partials/_article-links.scss b/src/styles/pages/partials/_article-links.scss index e88b81e..1627220 100644 --- a/src/styles/pages/partials/_article-links.scss +++ b/src/styles/pages/partials/_article-links.scss @@ -1,204 +1,40 @@ -@use "../../abstracts/functions" as fun; -@use "../../abstracts/variables" as var; +@use "../../abstracts/placeholders"; @mixin styles { a { - &[hreflang] { - &::after { - display: inline-block; - - /* Prettier is removing spacing between content parts. */ + @extend %link; - /* prettier-ignore */ - content: "\0000a0[" attr(hreflang) "]"; - font-size: var(--font-size-sm); - } - } - } - - /* stylelint-disable no-descending-specificity */ - a.download { - &::after { - display: inline-block; - - /* Prettier is removing spacing between content parts. */ - - /* prettier-ignore */ - content: "\0000a0" url(fun.encode-svg('')); - } - - &:focus:not(:active)::after { - /* Prettier is removing spacing between content parts. */ - - /* prettier-ignore */ - content: "\0000a0" url(fun.encode-svg('')); + &[hreflang], + &.download, + &.external { + @extend %link-with-icon; } &[hreflang] { - &::after { - /* Prettier is removing spacing between content parts. */ - - /* prettier-ignore */ - content: "\0000a0[" attr(hreflang) "]\0000a0" url(fun.encode-svg('')); - } - } - } - - a.external { - &::after { - display: inline-block; - - /* Prettier is removing spacing between content parts. */ - - /* prettier-ignore */ - content: "\0000a0" url(fun.encode-svg('')); + @extend %link-with-lang; } - &:focus:not(:active)::after { - /* Prettier is removing spacing between content parts. */ - - /* prettier-ignore */ - content: "\0000a0" url(fun.encode-svg('')); + &[hreflang]:not(.download, .external) { + --is-icon-hidden: ""; } - &[hreflang] { - &::after { - /* Prettier is removing spacing between content parts. */ - - /* prettier-ignore */ - content: "\0000a0[" attr(hreflang) "]\0000a0" url(fun.encode-svg('')); - } - - &:focus:not(:active)::after { - /* Prettier is removing spacing between content parts. */ - - /* prettier-ignore */ - content: "\0000a0[" attr(hreflang) "]\0000a0" url(fun.encode-svg('')); - } + &.download { + @extend %download-link; } - } - a.external.download { - &::after { - /* Prettier is removing spacing between content parts. */ - - /* prettier-ignore */ - content: "\0000a0" url(fun.encode-svg('')) "\0000a0" url(fun.encode-svg('')); + &.external { + @extend %external-link; } - &[hreflang] { - &::after { - /* Prettier is removing spacing between content parts. */ - - /* prettier-ignore */ - content: "\0000a0[" attr(hreflang) "]\0000a0" url(fun.encode-svg('')) "\0000a0" url(fun.encode-svg('')); - } - - &:focus:not(:active)::after { - /* Prettier is removing spacing between content parts. */ - - /* prettier-ignore */ - content: "\0000a0[" attr(hreflang) "]\0000a0" url(fun.encode-svg('')) "\0000a0" url(fun.encode-svg('')); + &.download, + &.external { + &:not([hreflang]) { + --is-lang-hidden: ""; } } - } - - [data-theme="dark"] { - a.download { - &::after { - /* Prettier is removing spacing between content parts. */ - /* prettier-ignore */ - content: "\0000a0" url(fun.encode-svg('')); - } - - &:focus:not(:active)::after { - /* Prettier is removing spacing between content parts. */ - - /* prettier-ignore */ - content: "\0000a0" url(fun.encode-svg('')); - } - - &[hreflang] { - &::after { - /* Prettier is removing spacing between content parts. */ - - /* prettier-ignore */ - content: "\0000a0[" attr(hreflang) "]\0000a0" url(fun.encode-svg('')); - } - - &:focus:not(:active)::after { - /* Prettier is removing spacing between content parts. */ - - /* prettier-ignore */ - content: "\0000a0[" attr(hreflang) "]\0000a0" url(fun.encode-svg('')); - } - } - } - - a.external { - &::after { - /* Prettier is removing spacing between content parts. */ - - /* prettier-ignore */ - content: "\0000a0" url(fun.encode-svg('')); - } - - &:focus:not(:active)::after { - /* Prettier is removing spacing between content parts. */ - - /* prettier-ignore */ - content: "\0000a0" url(fun.encode-svg('')); - } - - &[hreflang] { - &::after { - /* Prettier is removing spacing between content parts. */ - - /* prettier-ignore */ - content: "\0000a0[" attr(hreflang) "]\0000a0" url(fun.encode-svg('')); - } - - &:focus:not(:active)::after { - /* Prettier is removing spacing between content parts. */ - - /* prettier-ignore */ - content: "\0000a0[" attr(hreflang) "]\0000a0" url(fun.encode-svg('')); - } - } - } - - a.external.download { - &::after { - /* Prettier is removing spacing between content parts. */ - - /* prettier-ignore */ - content: "\0000a0" url(fun.encode-svg('')) "\0000a0" url(fun.encode-svg('')); - } - - &:focus:not(:active)::after { - /* Prettier is removing spacing between content parts. */ - - /* prettier-ignore */ - content: "\0000a0" url(fun.encode-svg('')) "\0000a0" url(fun.encode-svg('')); - } - - &[hreflang] { - &::after { - /* Prettier is removing spacing between content parts. */ - - /* prettier-ignore */ - content: "\0000a0[" attr(hreflang) "]\0000a0" url(fun.encode-svg('')) "\0000a0" url(fun.encode-svg('')); - } - - &:focus:not(:active)::after { - /* Prettier is removing spacing between content parts. */ - - /* prettier-ignore */ - content: "\0000a0[" attr(hreflang) "]\0000a0" url(fun.encode-svg('')) "\0000a0" url(fun.encode-svg('')); - } - } + &.external.download { + @extend %external-download-link; } } } -/* stylelint-enable no-descending-specificity */ -- cgit v1.2.3