feat: make #logo component also supporting auto sizing

dnbexperience · Feb 6, 2019 · 301bf1d · 301bf1d
1 parent bd482fc
commit 301bf1d
Show file tree

Hide file tree

Showing 12 changed files with 102 additions and 30 deletions.
diff --git a/packages/dnb-design-system-portal/src/core/jest/jestSetup.js b/packages/dnb-design-system-portal/src/core/jest/jestSetup.js
@@ -3,7 +3,6 @@
  *
  */
 
-// import '@babel/polyfill' // jest v24 may have usage of this
 import { createSerializer } from 'jest-emotion'
 import fakeProps from 'react-fake-props'
 import { mount, render, shallow } from './enzyme'

diff --git a/.../src/__tests__/assets/images/Logo.test.js → ...s__/assets/images/Logo.screenshot.test.js b/.../src/__tests__/assets/images/Logo.test.js → ...s__/assets/images/Logo.screenshot.test.js
diff --git a/...-to-match-image-snapshot-1-37d94.snap.png → ...-to-match-image-snapshot-1-49ee6.snap.png b/...-to-match-image-snapshot-1-37d94.snap.png → ...-to-match-image-snapshot-1-49ee6.snap.png
diff --git a/packages/dnb-ui-lib/src/components/logo/Example.js b/packages/dnb-ui-lib/src/components/logo/Example.js
@@ -4,16 +4,27 @@
  */
 
 import React, { PureComponent, Fragment } from 'react'
-import Logo from './Logo'
+import ComponentBox from '../../../../dnb-design-system-portal/src/shared/inlineTags/ComponentBox'
 
 class Example extends PureComponent {
   render() {
     return (
       <Fragment>
-        <div className="example-box">
-          <Logo height="200" />
-          <p className="example-caption">SVG logo</p>
-        </div>
+        <ComponentBox caption="SVG logo">
+          {/* @jsx */ `
+<Logo height="200" />
+          `}
+        </ComponentBox>
+        <ComponentBox>
+          {/* @jsx */ `
+<h1>
+  H1 with the DNB Logo <Logo size="auto" />
+</h1>
+<p>
+  Text with the DNB Logo <Logo />
+</p>
+          `}
+        </ComponentBox>
       </Fragment>
     )
   }

diff --git a/packages/dnb-ui-lib/src/components/logo/Logo.js b/packages/dnb-ui-lib/src/components/logo/Logo.js
@@ -58,13 +58,16 @@ export default class Logo extends PureComponent {
     } = this.props
 
     const rootParams = {
-      className: classnames('dnb-logo', className, _className)
+      className: classnames('dnb-logo', className, _className),
+      role: 'img',
+      alt: 'DNB Logo',
+      ['data-ratio']: ratio,
+      ['aria-hidden']: true,
+      ...rest
     }
 
     const svgParams = {
-      viewBox: '0 0 93.0362 64', // theese size are set to me assiosated with the svg path point values
-      alt: 'DNB Logo',
-      ...rest
+      viewBox: '0 0 93.0362 64' // theese size are set to me assiosated with the svg path point values
     }
 
     if (parseFloat(size) > -1 && width === null && height === null) {
@@ -83,6 +86,7 @@ export default class Logo extends PureComponent {
     return (
       <span {...rootParams}>
         <svg {...svgParams}>
+          <title>DNB Logo</title>
           <path d="M89.668 31.9442a10.6487 10.6487 0 0 0-1.8465-1.2184l-.178-.0887.1554-.1337a8.7063 8.7063 0 0 0 2.7652-6.848c-.006-3.3331-1.1437-5.82-3.413-7.3936-1.9135-1.3528-4.5588-2.0142-8.092-2.0079l-10.1326.0182a1.081 1.081 0 0 0-1.0645 1.0685l.0597 33.2203a1.0667 1.0667 0 0 0 1.0685 1.0646l11.577-.0208c3.644-.0065 6.5758-.7897 8.684-2.3266a8.6558 8.6558 0 0 0 2.7937-3.4054 11.2675 11.2675 0 0 0 .9913-4.868 8.967 8.967 0 0 0-3.3681-7.0605zM71.1547 17.5795l7.9106-.0142q4.1997-.0076 6.202 1.3885c.8454.5985 2.003 1.752 2.0083 4.7074.0095 5.2883-4.1672 5.7179-5.4338 5.7201l-10.6659.0192zm9.4066 28.7366l-9.355.0168-.0244-13.6438 10.6659-.0191c4.6219-.0083 7.8707 2.6072 7.8774 6.3407.0033 1.8.0131 7.289-9.1639 7.3054z" />
           <path d="M22.4948 19.6221a14.0642 14.0642 0 0 0-5.5848-4.101 16.8443 16.8443 0 0 0-6.2238-1.1443l-9.6215.0173A1.086 1.086 0 0 0 0 15.4853L.0597 48.683a1.0668 1.0668 0 0 0 1.0686 1.0646l9.6214-.0173a16.3939 16.3939 0 0 0 6.2197-1.1667 13.8015 13.8015 0 0 0 5.57-4.0994c3.3924-4.1833 3.894-9.4508 3.889-12.2284-.0043-2.3544-.3927-8.2876-3.9336-12.6136zm-2.5144 22.758a11.615 11.615 0 0 1-9.2366 4.0615l-7.3773.0133-.0516-28.7535 7.3772-.0132a11.5412 11.5412 0 0 1 9.2512 4.0271c2.9396 3.5948 3.1714 8.9716 3.1742 10.5264.0042 2.3338-.3878 6.7559-3.137 10.1384z" />
           <path d="M59.9016 0l.0877 48.7976a.9801.9801 0 0 1-.6872.956.7852.7852 0 0 1-.311.0678 1.011 1.011 0 0 1-.8229-.4217L36.3643 21.7303l.076 42.2638L33.1294 64l-.0879-48.9083a.9989.9989 0 0 1 .7094-.956.706.706 0 0 1 .311-.045 1.0218 1.0218 0 0 1 .8229.3978l21.8038 27.6922L56.6128.0059z" />

diff --git a/packages/dnb-ui-lib/src/components/logo/__tests__/Logo.screenshot.test.js b/packages/dnb-ui-lib/src/components/logo/__tests__/Logo.screenshot.test.js
@@ -0,0 +1,20 @@
+/**
+ * Screenshot Test
+ * This file will not run on "test:staged" because we dont require any related files
+ */
+
+import {
+  setupPageScreenshot,
+  testPageScreenshot
+} from '../../../core/jest/jestSetup'
+
+describe('Logo screenshot', () => {
+  setupPageScreenshot()
+  it('have to match the screenshot snapshot', async () => {
+    const screenshot = await testPageScreenshot({
+      url: '/uilib/components/logo?fullscreen',
+      selector: '.example-box .dnb-logo:nth-child(1)'
+    })
+    expect(screenshot).toMatchImageSnapshot()
+  })
+})
diff --git a/packages/dnb-ui-lib/src/components/logo/__tests__/__snapshots__/Logo.test.js.snap b/packages/dnb-ui-lib/src/components/logo/__tests__/__snapshots__/Logo.test.js.snap
@@ -11,15 +11,21 @@ exports[`Logo component have to match default logo snapshot 1`] = `
   width={1}
 >
   <span
+    alt="DNB Logo"
+    aria-hidden={true}
     className="dnb-logo className class"
+    data-ratio={1}
+    role="img"
   >
     <svg
-      alt="DNB Logo"
       color="color"
       height={80}
       viewBox="0 0 93.0362 64"
       width={1}
     >
+      <title>
+        DNB Logo
+      </title>
       <path
         d="M89.668 31.9442a10.6487 10.6487 0 0 0-1.8465-1.2184l-.178-.0887.1554-.1337a8.7063 8.7063 0 0 0 2.7652-6.848c-.006-3.3331-1.1437-5.82-3.413-7.3936-1.9135-1.3528-4.5588-2.0142-8.092-2.0079l-10.1326.0182a1.081 1.081 0 0 0-1.0645 1.0685l.0597 33.2203a1.0667 1.0667 0 0 0 1.0685 1.0646l11.577-.0208c3.644-.0065 6.5758-.7897 8.684-2.3266a8.6558 8.6558 0 0 0 2.7937-3.4054 11.2675 11.2675 0 0 0 .9913-4.868 8.967 8.967 0 0 0-3.3681-7.0605zM71.1547 17.5795l7.9106-.0142q4.1997-.0076 6.202 1.3885c.8454.5985 2.003 1.752 2.0083 4.7074.0095 5.2883-4.1672 5.7179-5.4338 5.7201l-10.6659.0192zm9.4066 28.7366l-9.355.0168-.0244-13.6438 10.6659-.0191c4.6219-.0083 7.8707 2.6072 7.8774 6.3407.0033 1.8.0131 7.289-9.1639 7.3054z"
       />
@@ -189,12 +195,15 @@ exports[`Logo scss have to match snapshot 1`] = `
  */
 .dnb-logo {
   display: inline;
-  width: auto;
-  height: 100%;
-  font-size: 0;
-  color: var(--color-sea-green);
-  fill: currentColor; }
+  vertical-align: baseline;
+  font-size: inherit;
+  line-height: 0;
+  width: calc(1em * attr(data-ratio));
+  height: 1em;
+  color: var(--color-sea-green); }
   .dnb-logo svg {
+    fill: currentColor; }
+  .dnb-logo svg:not([width]):not([height]) {
     width: inherit;
     height: inherit; }
 "

diff --git a/...-test-js-logo-screenshot-have-to-match-the-screenshot-snapshot-1-4da8b.snap.png b/...-test-js-logo-screenshot-have-to-match-the-screenshot-snapshot-1-4da8b.snap.png
diff --git a/packages/dnb-ui-lib/src/components/logo/details.md b/packages/dnb-ui-lib/src/components/logo/details.md
@@ -1,6 +1,6 @@
-| Properties | Description                                                                                          |
-| ---------- | ---------------------------------------------------------------------------------------------------- |
-| `size`     | _(optional)_ define the size of the logo. Sets the height. The width will be calculated by the ratio |
-| `color`    | _(optional)_ define the color of the logo                                                            |
-| `width`    | _(optional)_ define either the width of the logo                                                     |
-| `height`   | _(optional)_ or define the height of the logo                                                        |
+| Properties | Description                                                                                                              |
+| ---------- | ------------------------------------------------------------------------------------------------------------------------ |
+| `size`     | _(optional)_ define the size of the logo. Sets the height. The width will be calculated by the ratio. Defaults to `auto` |
+| `color`    | _(optional)_ define the color of the logo                                                                                |
+| `width`    | _(optional)_ define either the width of the logo                                                                         |
+| `height`   | _(optional)_ or define the height of the logo                                                                            |
diff --git a/packages/dnb-ui-lib/src/components/logo/style/_logo.scss b/packages/dnb-ui-lib/src/components/logo/style/_logo.scss
@@ -5,14 +5,19 @@
 
 .dnb-logo {
   display: inline;
-  width: auto;
-  height: 100%;
+  vertical-align: baseline;
+  font-size: inherit;
+  line-height: 0;
+
+  width: calc(1em * attr(data-ratio));
+  height: 1em;
 
-  font-size: 0;
   color: var(--color-sea-green);
-  fill: currentColor;
 
   svg {
+    fill: currentColor;
+  }
+  svg:not([width]):not([height]) {
     width: inherit;
     height: inherit;
   }

diff --git a/packages/dnb-ui-lib/src/core/jest/jestSetup.js b/packages/dnb-ui-lib/src/core/jest/jestSetup.js
@@ -3,12 +3,9 @@
  *
  */
 
-// import '@babel/polyfill' // jest v24 may have usage of this
 import { axe, toHaveNoViolations } from 'jest-axe'
 import fakeProps from 'react-fake-props'
 import { mount, render, shallow } from './enzyme'
-
-// import * as reactDocs from 'react-docgen'
 import ReactDOMServer from 'react-dom/server'
 import fs from 'fs-extra'
 import onceImporter from 'node-sass-once-importer'
@@ -59,7 +56,11 @@ export const startScreenshotServer = () =>
     // }, 1e3)
   })
 
-export const testPageScreenshot = ({ selector, url }) =>
+export const testPageScreenshot = ({
+  selector,
+  url,
+  transformElement = null
+} = {}) =>
   new Promise(async (resolve, reject) => {
     try {
       await startScreenshotServer()
@@ -68,6 +69,9 @@ export const testPageScreenshot = ({ selector, url }) =>
       )
       await global.page.waitForSelector(selector)
       const element = await global.page.$(selector)
+      if (transformElement) {
+        await transformElement(element)
+      }
       const screenshot = await element.screenshot()
 
       resolve(screenshot)

diff --git a/packages/dnb-ui-lib/stories/componentsStories.js b/packages/dnb-ui-lib/stories/componentsStories.js
@@ -15,6 +15,7 @@ import {
   IconPrimary,
   Modal,
   Dropdown,
+  Logo,
   StepIndicator
 } from '../src/components'
 
@@ -52,6 +53,25 @@ stories.push([
   )
 ])
 
+stories.push([
+  'Logo',
+  () => (
+    <Wrapper>
+      <Box>
+        <Logo size="80" style={{ color: 'var(--color-cherry-red)' }} />
+      </Box>
+      <Box>
+        <h1>
+          H1 with the DNB Logo <Logo size="auto" />
+        </h1>
+        <p>
+          Text with the DNB Logo <Logo />
+        </p>
+      </Box>
+    </Wrapper>
+  )
+])
+
 const tablistDataWithContent = [
   { title: 'First', key: 'first', content: <h2>First</h2> },
   { title: 'Second', key: 'second', content: () => <h2>Second</h2> }