Mim 2054 headerlink title (#1350)

* Add support for header element for header links (wip) MIM-2054 * Fix styling and rename of size prop to headerSize MIM-2054 * Add jest test for header link MIM-2054 * Bump @statisticsnorway/ssb-component-library from 2.2.16 to 2.3.0 * Minor code refactoring; headerSize -> headingSize MIM-2054 * Minor code refactoring; Move renderLinkText function inside Link component MIM-2054 * bundle.css
statisticsnorway · Oct 31, 2024 · 7b858ea · 7b858ea
1 parent 17c258a
commit 7b858ea
Show file tree

Hide file tree

Showing 8 changed files with 80 additions and 15 deletions.
diff --git a/lib/bundle.css b/lib/bundle.css
@@ -1762,6 +1762,10 @@ a {
   font-size: 20px;
   font-weight: bold;
 }
+.ssb-link.header h1, .ssb-link.header h2, .ssb-link.header h3, .ssb-link.header h4, .ssb-link.header h5, .ssb-link.header h6 {
+  display: inherit;
+  font-size: inherit;
+}
 .ssb-link.header .link-text {
   color: #162327;
 }

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@statisticsnorway/ssb-component-library",
-  "version": "2.2.16",
+  "version": "2.3.0",
   "description": "Component library for SSB (Statistics Norway)",
   "main": "lib/bundle.js",
   "scripts": {

diff --git a/src/components/Link/README.md b/src/components/Link/README.md
@@ -78,3 +78,4 @@ Available props:
 | title      | string           | The title attribute is used to provide additional information                       |
 | onClick    | function         | Callback for anchor click                                                           |
 | standAlone | Optional boolean | Resizing of a stand alone link to meet accessibility requirements                   |
+| headingSize | Optional oneOf   | Changes header element size (1, 2, 3, 4, 5 or 6) for header link type               |
diff --git a/src/components/Link/__snapshots__/link.test.jsx.snap b/src/components/Link/__snapshots__/link.test.jsx.snap
@@ -1,38 +1,46 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Link component Matches the snapshot 1`] = `
+exports[`Link component Header link 1`] = `
 <DocumentFragment>
   <a
-    class="ssb-link"
-    href=""
+    class="ssb-link header"
+    href=" "
   >
     <span
       class="link-text"
     >
-      A regular link
+      A header link with default span
     </span>
   </a>
+  <a
+    class="ssb-link header"
+    href=" "
+  >
+    <h2
+      class="link-text"
+    >
+      A header link with heading 2
+    </h2>
+  </a>
 </DocumentFragment>
 `;
 
-exports[`Link component Toggles classNames correctly 1`] = `
+exports[`Link component Matches the snapshot 1`] = `
 <DocumentFragment>
   <a
-    class="ssb-link profiled negative mt-3"
+    class="ssb-link"
     href=""
-    rel="noopener noreferrer"
-    target="_blank"
   >
     <span
       class="link-text"
     >
-      Profile link
+      A regular link
     </span>
   </a>
 </DocumentFragment>
 `;
 
-exports[`Link component render icon 1`] = `
+exports[`Link component Render icon 1`] = `
 <DocumentFragment>
   <a
     class="ssb-link profiled with-icon"
@@ -71,3 +79,20 @@ exports[`Link component render icon 1`] = `
   </a>
 </DocumentFragment>
 `;
+
+exports[`Link component Toggles classNames correctly 1`] = `
+<DocumentFragment>
+  <a
+    class="ssb-link profiled negative mt-3"
+    href=""
+    rel="noopener noreferrer"
+    target="_blank"
+  >
+    <span
+      class="link-text"
+    >
+      Profile link
+    </span>
+  </a>
+</DocumentFragment>
+`;
diff --git a/src/components/Link/_link.scss b/src/components/Link/_link.scss
@@ -37,6 +37,11 @@ $icon-padding: 8px;
     font-size: $header-font-size;
     font-weight: bold;
 
+    h1, h2, h3, h4, h5, h6 {
+      display: inherit;
+      font-size: inherit;
+    }
+
     .link-text {
       color: $ssb-dark-6;
     }

diff --git a/src/components/Link/index.jsx b/src/components/Link/index.jsx
@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import React, { createElement, forwardRef } from 'react'
 import PropTypes from 'prop-types'
 
 const Link = forwardRef(
@@ -16,12 +16,23 @@ const Link = forwardRef(
       title,
       onClick = () => {},
       standAlone,
+      headingSize,
     },
     ref
   ) => {
     const classNames = `ssb-link${linkType ? ` ${linkType}` : ''}${standAlone ? ' stand-alone' : ''}
     ${negative ? ' negative' : ''}${icon ? ' with-icon' : ''}${className ? ` ${className}` : ''}`
 
+    const renderLinkText = () => {
+      if (children) {
+        if (linkType === 'header' && headingSize) {
+          return createElement(`h${headingSize}`, { className: 'link-text' }, children)
+        }
+        return <span className='link-text'>{children}</span>
+      }
+      return null
+    }
+
     return (
       // eslint-disable-next-line react/jsx-no-target-blank
       <a
@@ -36,7 +47,7 @@ const Link = forwardRef(
         ref={ref}
       >
         {icon && <div className='icon-wrapper'>{icon}</div>}
-        {children && <span className='link-text'>{children}</span>}
+        {renderLinkText()}
       </a>
     )
   }
@@ -55,6 +66,7 @@ Link.propTypes = {
   title: PropTypes.string,
   onClick: PropTypes.func,
   standAlone: PropTypes.bool,
+  headingSize: PropTypes.oneOf([1, 2, 3, 4, 5, 6]),
 }
 
 export default Link
diff --git a/src/components/Link/link.story.jsx b/src/components/Link/link.story.jsx
@@ -39,7 +39,12 @@ export const Header = () => (
   <div>
     <p>
       <Link href=' ' linkType='header'>
-        A header link
+        A header link with default span
+      </Link>
+    </p>
+    <p>
+      <Link href=' ' linkType='header' headingSize={2}>
+        A header link with heading 2
       </Link>
     </p>
   </div>

diff --git a/src/components/Link/link.test.jsx b/src/components/Link/link.test.jsx
@@ -16,12 +16,25 @@ describe('Link component', () => {
     )
     expect(asFragment()).toMatchSnapshot()
   })
-  test('render icon', () => {
+  test('Render icon', () => {
     const { asFragment } = render(
       <Link href=' ' linkType='profiled' icon={<ArrowRight />}>
         A profiled link with icon
       </Link>
     )
     expect(asFragment()).toMatchSnapshot()
   })
+  test('Header link', () => {
+    const { asFragment } = render(
+      <>
+        <Link href=' ' linkType='header'>
+          A header link with default span
+        </Link>
+        <Link href=' ' linkType='header' headingSize={2}>
+          A header link with heading 2
+        </Link>
+      </>
+    )
+    expect(asFragment()).toMatchSnapshot()
+  })
 })