From 13a4654fa0854accfaabbbd2f21d2e0a1c90442d Mon Sep 17 00:00:00 2001 From: Emil Nikov Date: Mon, 6 Dec 2021 09:50:14 +0100 Subject: [PATCH] Marketing: add link components (#1807) * Initial setup for marketing links * Create short-pugs-press.md * Rename .mktg-link to .link-mktg * Update the link underline style * Update the usage examples * Clean up the SCSS * Add animated octicon-chevrow * Add underline-pale variant * Improve docs * Lint ignore the use of currentColor * Reduce the examples, refactor the chevrow animation * Refactor the octicon chevrow positioning and sizing * Less absolute positioning * Update the docs * Document link colors * Define underline offset with ems * Update marketing-links.md * Update chevrow position animation * Rename underline-pale to link-emphasis-mktg * Fix stylelint errors * Reduce the :active state chevrow position * Fix stylelint-disable comments * Obey the stylelint! * Rename octicon-chevrow to link-arrow-mktg * Extract the animated arrow as utility * Stylelint auto-fixes * Remove markdown leftover * Fix positioning in marketing buttons and links * Stylelint ignore marketing button line-height * Stylelint auto-fixes * Expand the arrow-target-mktg selector to cover btn-mktg and link-mktg Co-authored-by: Tobias Ahlin * Update the btn-mktg line height * Revert the btn-mktg padding changes * Remove stylelint ignore rule * Expand the changelog * Improve the link-emphasis-mktg docs * Add prefers-reduced-motion media queries * Stylelint disable max-nesting-depth Co-authored-by: Tobias Ahlin Co-authored-by: Actions Auto Build --- .changeset/short-pugs-press.md | 7 ++ docs/content/components/marketing-buttons.md | 38 ++++++++++ docs/content/components/marketing-links.md | 76 +++++++++++++++++++ .../src/@primer/gatsby-theme-doctocat/nav.yml | 2 + src/marketing/index.scss | 1 + src/marketing/links/index.scss | 3 + src/marketing/links/link.scss | 50 ++++++++++++ src/marketing/utilities/animations.scss | 42 ++++++++++ 8 files changed, 219 insertions(+) create mode 100644 .changeset/short-pugs-press.md create mode 100644 docs/content/components/marketing-links.md create mode 100644 src/marketing/links/index.scss create mode 100644 src/marketing/links/link.scss diff --git a/.changeset/short-pugs-press.md b/.changeset/short-pugs-press.md new file mode 100644 index 00000000..4bed8471 --- /dev/null +++ b/.changeset/short-pugs-press.md @@ -0,0 +1,7 @@ +--- +"@primer/css": minor +--- + +Marketing: Add link components +Marketing: Add animated arrow utility +Marketing: Document button components with arrows \ No newline at end of file diff --git a/docs/content/components/marketing-buttons.md b/docs/content/components/marketing-buttons.md index d0752e21..6e09b376 100644 --- a/docs/content/components/marketing-buttons.md +++ b/docs/content/components/marketing-buttons.md @@ -43,3 +43,41 @@ Marketing buttons can be set to three different sizes: ``` + +## Animated arrow symbol + +Marketing buttons can include an animated arrow symbol, by adding a class `arrow-target-mktg` and including the SVG symbol: + +```html live + + + + + + + +``` diff --git a/docs/content/components/marketing-links.md b/docs/content/components/marketing-links.md new file mode 100644 index 00000000..3832f9f6 --- /dev/null +++ b/docs/content/components/marketing-links.md @@ -0,0 +1,76 @@ +--- +title: Marketing links +path: components/marketing-links +status: Beta +source: 'https://github.com/primer/css/tree/main/src/marketing/links' +bundle: marketing-links +--- + +Marketing links can be produced by combining the base class `link-mktg` with a set of modifier classes to control the size and color. + + +## Link sizes + +The marketing link size is defined with utility classes and come in large (`.f3-mktg`) and small (`.f4-mktg`): + +```html live + + Call to action + + + + + + +``` + +```html live + + Call to action + + + + + + +``` + +## Link with emphasis + +Add class `link-emphasis-mktg` to the link, to give it a pale underline, that will fill up on hover. + +```html live + + Call to action + + + + + + +``` + + +## Link colors + +The link color is controlled with the [Primer color classes](/utilities/colors), while the symbol and underline styling will follow: + +```html live + + Call to action + + + + + + + + + Call to action + + + + + + +``` \ No newline at end of file diff --git a/docs/src/@primer/gatsby-theme-doctocat/nav.yml b/docs/src/@primer/gatsby-theme-doctocat/nav.yml index fe4ed608..72a76979 100644 --- a/docs/src/@primer/gatsby-theme-doctocat/nav.yml +++ b/docs/src/@primer/gatsby-theme-doctocat/nav.yml @@ -93,6 +93,8 @@ url: /components/markdown - title: Marketing buttons url: /components/marketing-buttons + - title: Marketing links + url: /components/marketing-links - title: Navigation url: /components/navigation - title: Pagination diff --git a/src/marketing/index.scss b/src/marketing/index.scss index cd476792..3055ae84 100755 --- a/src/marketing/index.scss +++ b/src/marketing/index.scss @@ -11,4 +11,5 @@ // marketing specific css modules @import './type/index.scss'; @import './buttons/index.scss'; +@import './links/index.scss'; @import './utilities/index.scss'; diff --git a/src/marketing/links/index.scss b/src/marketing/links/index.scss new file mode 100644 index 00000000..f5dd4620 --- /dev/null +++ b/src/marketing/links/index.scss @@ -0,0 +1,3 @@ +// support files +@import '../support/index.scss'; +@import './link.scss'; diff --git a/src/marketing/links/link.scss b/src/marketing/links/link.scss new file mode 100644 index 00000000..13dd30aa --- /dev/null +++ b/src/marketing/links/link.scss @@ -0,0 +1,50 @@ +.link-mktg { + position: relative; + display: inline-block; + + &:hover { + text-decoration: none; + } + + &:active { + outline: none; + } + + &::after, + &.link-emphasis-mktg::before { + position: absolute; + bottom: -0.15em; + left: 0; + width: calc(100% - 1em); + height: 2px; + pointer-events: none; + content: ''; + // stylelint-disable-next-line primer/colors + background-color: currentColor; + transform: scaleX(0); + transform-origin: 0 0; + + @media screen and (prefers-reduced-motion: no-preference) { + transition: transform 0.3s ease; + } + } + + &.link-emphasis-mktg::before { + opacity: 0.2; + transform: scaleX(1); + } + + &:hover, + &:focus, + &:active { + &::after { + transform: scaleX(1); + } + } + + &.arrow-target-mktg { + .arrow-symbol-mktg { + margin-left: -$em-spacer-3; + } + } +} diff --git a/src/marketing/utilities/animations.scss b/src/marketing/utilities/animations.scss index 49061405..1a362bc1 100644 --- a/src/marketing/utilities/animations.scss +++ b/src/marketing/utilities/animations.scss @@ -7,3 +7,45 @@ transform: scale3d(1.025, 1.025, 1.025); } } + +// Animated arrow symbol, used in marketing links, buttons, etc. +.btn-mktg, +.link-mktg, +.arrow-target-mktg { + .octicon { + width: 1em; + height: 1em; + } + + .arrow-symbol-mktg { + transition: transform 0.2s; + transform: translateX(0); + + // stylelint-disable-next-line selector-max-type + path:last-child { + stroke-dasharray: 10; + stroke-dashoffset: 10; + transition: stroke-dashoffset 0.2s; + } + } + + @media screen and (prefers-reduced-motion: no-preference) { + &:hover, + &:focus { + .arrow-symbol-mktg { + transform: translateX(4px); + + // stylelint-disable-next-line selector-max-type, selector-max-specificity, max-nesting-depth + path:last-child { + stroke-dashoffset: 20; + } + } + } + + &:active { + .arrow-symbol-mktg { + transform: translateX(6px); + } + } + } +}