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 <[email protected]> * 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 <[email protected]> Co-authored-by: Actions Auto Build <[email protected]>
primer · Dec 6, 2021 · 13a4654 · 13a4654
1 parent 4abb1af
commit 13a4654
Show file tree

Hide file tree

Showing 8 changed files with 219 additions and 0 deletions.
diff --git a/.changeset/short-pugs-press.md 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
diff --git 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:
 <button class="btn-mktg btn-subtle-mktg btn-large-mktg mr-3" type="button">Contact us</button>
 <button class="btn-mktg btn-signup-mktg btn-large-mktg" type="button">Sign up</button>
 ```
+
+## 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
+<button class="btn-mktg arrow-target-mktg mr-3" type="button">
+    Get started
+    <svg xmlns="http://www.w3.org/2000/svg" class="octicon arrow-symbol-mktg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+        <path fill="currentColor" d="M7.28033 3.21967C6.98744 2.92678 6.51256 2.92678 6.21967 3.21967C5.92678 3.51256 5.92678 3.98744 6.21967 4.28033L7.28033 3.21967ZM11 8L11.5303 8.53033C11.8232 8.23744 11.8232 7.76256 11.5303 7.46967L11 8ZM6.21967 11.7197C5.92678 12.0126 5.92678 12.4874 6.21967 12.7803C6.51256 13.0732 6.98744 13.0732 7.28033 12.7803L6.21967 11.7197ZM6.21967 4.28033L10.4697 8.53033L11.5303 7.46967L7.28033 3.21967L6.21967 4.28033ZM10.4697 7.46967L6.21967 11.7197L7.28033 12.7803L11.5303 8.53033L10.4697 7.46967Z"></path>
+        <path stroke="currentColor" d="M1.75 8H11" stroke-width="1.5" stroke-linecap="round"></path>
+    </svg>
+</button>
+
+<button class="btn-mktg arrow-target-mktg btn-muted-mktg mr-3" type="button">
+    Learn more
+    <svg xmlns="http://www.w3.org/2000/svg" class="octicon arrow-symbol-mktg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+        <path fill="currentColor" d="M7.28033 3.21967C6.98744 2.92678 6.51256 2.92678 6.21967 3.21967C5.92678 3.51256 5.92678 3.98744 6.21967 4.28033L7.28033 3.21967ZM11 8L11.5303 8.53033C11.8232 8.23744 11.8232 7.76256 11.5303 7.46967L11 8ZM6.21967 11.7197C5.92678 12.0126 5.92678 12.4874 6.21967 12.7803C6.51256 13.0732 6.98744 13.0732 7.28033 12.7803L6.21967 11.7197ZM6.21967 4.28033L10.4697 8.53033L11.5303 7.46967L7.28033 3.21967L6.21967 4.28033ZM10.4697 7.46967L6.21967 11.7197L7.28033 12.7803L11.5303 8.53033L10.4697 7.46967Z"></path>
+        <path stroke="currentColor" d="M1.75 8H11" stroke-width="1.5" stroke-linecap="round"></path>
+    </svg>
+</button>
+
+<button class="btn-mktg arrow-target-mktg btn-subtle-mktg mr-3" type="button">
+    Contact us
+    <svg xmlns="http://www.w3.org/2000/svg" class="octicon arrow-symbol-mktg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+        <path fill="currentColor" d="M7.28033 3.21967C6.98744 2.92678 6.51256 2.92678 6.21967 3.21967C5.92678 3.51256 5.92678 3.98744 6.21967 4.28033L7.28033 3.21967ZM11 8L11.5303 8.53033C11.8232 8.23744 11.8232 7.76256 11.5303 7.46967L11 8ZM6.21967 11.7197C5.92678 12.0126 5.92678 12.4874 6.21967 12.7803C6.51256 13.0732 6.98744 13.0732 7.28033 12.7803L6.21967 11.7197ZM6.21967 4.28033L10.4697 8.53033L11.5303 7.46967L7.28033 3.21967L6.21967 4.28033ZM10.4697 7.46967L6.21967 11.7197L7.28033 12.7803L11.5303 8.53033L10.4697 7.46967Z"></path>
+        <path stroke="currentColor" d="M1.75 8H11" stroke-width="1.5" stroke-linecap="round"></path>
+    </svg>
+</button>
+
+<button class="btn-mktg arrow-target-mktg btn-signup-mktg" type="button">
+    Sign up
+    <svg xmlns="http://www.w3.org/2000/svg" class="octicon arrow-symbol-mktg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+        <path fill="currentColor" d="M7.28033 3.21967C6.98744 2.92678 6.51256 2.92678 6.21967 3.21967C5.92678 3.51256 5.92678 3.98744 6.21967 4.28033L7.28033 3.21967ZM11 8L11.5303 8.53033C11.8232 8.23744 11.8232 7.76256 11.5303 7.46967L11 8ZM6.21967 11.7197C5.92678 12.0126 5.92678 12.4874 6.21967 12.7803C6.51256 13.0732 6.98744 13.0732 7.28033 12.7803L6.21967 11.7197ZM6.21967 4.28033L10.4697 8.53033L11.5303 7.46967L7.28033 3.21967L6.21967 4.28033ZM10.4697 7.46967L6.21967 11.7197L7.28033 12.7803L11.5303 8.53033L10.4697 7.46967Z"></path>
+        <path stroke="currentColor" d="M1.75 8H11" stroke-width="1.5" stroke-linecap="round"></path>
+    </svg>
+</button>
+```
diff --git a/docs/content/components/marketing-links.md 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
+<a href="#" class="link-mktg arrow-target-mktg text-semibold f3-mktg">
+    Call to action
+
+    <svg xmlns="http://www.w3.org/2000/svg" class="octicon arrow-symbol-mktg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+        <path fill="currentColor" d="M7.28033 3.21967C6.98744 2.92678 6.51256 2.92678 6.21967 3.21967C5.92678 3.51256 5.92678 3.98744 6.21967 4.28033L7.28033 3.21967ZM11 8L11.5303 8.53033C11.8232 8.23744 11.8232 7.76256 11.5303 7.46967L11 8ZM6.21967 11.7197C5.92678 12.0126 5.92678 12.4874 6.21967 12.7803C6.51256 13.0732 6.98744 13.0732 7.28033 12.7803L6.21967 11.7197ZM6.21967 4.28033L10.4697 8.53033L11.5303 7.46967L7.28033 3.21967L6.21967 4.28033ZM10.4697 7.46967L6.21967 11.7197L7.28033 12.7803L11.5303 8.53033L10.4697 7.46967Z"></path>
+        <path stroke="currentColor" d="M1.75 8H11" stroke-width="1.5" stroke-linecap="round"></path>
+    </svg>
+</a>
+```
+
+```html live
+<a href="#" class="link-mktg arrow-target-mktg text-semibold f4-mktg">
+    Call to action
+
+    <svg xmlns="http://www.w3.org/2000/svg" class="octicon arrow-symbol-mktg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+        <path fill="currentColor" d="M7.28033 3.21967C6.98744 2.92678 6.51256 2.92678 6.21967 3.21967C5.92678 3.51256 5.92678 3.98744 6.21967 4.28033L7.28033 3.21967ZM11 8L11.5303 8.53033C11.8232 8.23744 11.8232 7.76256 11.5303 7.46967L11 8ZM6.21967 11.7197C5.92678 12.0126 5.92678 12.4874 6.21967 12.7803C6.51256 13.0732 6.98744 13.0732 7.28033 12.7803L6.21967 11.7197ZM6.21967 4.28033L10.4697 8.53033L11.5303 7.46967L7.28033 3.21967L6.21967 4.28033ZM10.4697 7.46967L6.21967 11.7197L7.28033 12.7803L11.5303 8.53033L10.4697 7.46967Z"></path>
+        <path stroke="currentColor" d="M1.75 8H11" stroke-width="1.5" stroke-linecap="round"></path>
+    </svg>
+</a>
+```
+
+## 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
+<a href="#" class="link-mktg arrow-target-mktg link-emphasis-mktg text-semibold f3-mktg">
+    Call to action
+
+    <svg xmlns="http://www.w3.org/2000/svg" class="octicon arrow-symbol-mktg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+        <path fill="currentColor" d="M7.28033 3.21967C6.98744 2.92678 6.51256 2.92678 6.21967 3.21967C5.92678 3.51256 5.92678 3.98744 6.21967 4.28033L7.28033 3.21967ZM11 8L11.5303 8.53033C11.8232 8.23744 11.8232 7.76256 11.5303 7.46967L11 8ZM6.21967 11.7197C5.92678 12.0126 5.92678 12.4874 6.21967 12.7803C6.51256 13.0732 6.98744 13.0732 7.28033 12.7803L6.21967 11.7197ZM6.21967 4.28033L10.4697 8.53033L11.5303 7.46967L7.28033 3.21967L6.21967 4.28033ZM10.4697 7.46967L6.21967 11.7197L7.28033 12.7803L11.5303 8.53033L10.4697 7.46967Z"></path>
+        <path stroke="currentColor" d="M1.75 8H11" stroke-width="1.5" stroke-linecap="round"></path>
+    </svg>
+</a>
+```
+
+
+## Link colors
+
+The link color is controlled with the [Primer color classes](/utilities/colors), while the symbol and underline styling will follow:
+
+```html live
+<a href="#" class="link-mktg arrow-target-mktg text-semibold f3-mktg color-fg-default mr-4">
+    Call to action
+
+    <svg xmlns="http://www.w3.org/2000/svg" class="octicon arrow-symbol-mktg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+        <path fill="currentColor" d="M7.28033 3.21967C6.98744 2.92678 6.51256 2.92678 6.21967 3.21967C5.92678 3.51256 5.92678 3.98744 6.21967 4.28033L7.28033 3.21967ZM11 8L11.5303 8.53033C11.8232 8.23744 11.8232 7.76256 11.5303 7.46967L11 8ZM6.21967 11.7197C5.92678 12.0126 5.92678 12.4874 6.21967 12.7803C6.51256 13.0732 6.98744 13.0732 7.28033 12.7803L6.21967 11.7197ZM6.21967 4.28033L10.4697 8.53033L11.5303 7.46967L7.28033 3.21967L6.21967 4.28033ZM10.4697 7.46967L6.21967 11.7197L7.28033 12.7803L11.5303 8.53033L10.4697 7.46967Z"></path>
+        <path stroke="currentColor" d="M1.75 8H11" stroke-width="1.5" stroke-linecap="round"></path>
+    </svg>
+</a>
+
+<a href="#" class="link-mktg arrow-target-mktg link-emphasis-mktg text-semibold f4-mktg color-fg-default">
+    Call to action
+
+    <svg xmlns="http://www.w3.org/2000/svg" class="octicon arrow-symbol-mktg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+        <path fill="currentColor" d="M7.28033 3.21967C6.98744 2.92678 6.51256 2.92678 6.21967 3.21967C5.92678 3.51256 5.92678 3.98744 6.21967 4.28033L7.28033 3.21967ZM11 8L11.5303 8.53033C11.8232 8.23744 11.8232 7.76256 11.5303 7.46967L11 8ZM6.21967 11.7197C5.92678 12.0126 5.92678 12.4874 6.21967 12.7803C6.51256 13.0732 6.98744 13.0732 7.28033 12.7803L6.21967 11.7197ZM6.21967 4.28033L10.4697 8.53033L11.5303 7.46967L7.28033 3.21967L6.21967 4.28033ZM10.4697 7.46967L6.21967 11.7197L7.28033 12.7803L11.5303 8.53033L10.4697 7.46967Z"></path>
+        <path stroke="currentColor" d="M1.75 8H11" stroke-width="1.5" stroke-linecap="round"></path>
+    </svg>
+</a>
+```
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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);
+      }
+    }
+  }
+}