feat(Logo): add inherit_color prop (#1578)

dnbexperience · Sep 22, 2022 · 0983343 · 0983343
1 parent 3388abd
commit 0983343
Show file tree

Hide file tree

Showing 10 changed files with 104 additions and 32 deletions.
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/logo/Examples.js b/packages/dnb-design-system-portal/src/docs/uilib/components/logo/Examples.js
@@ -0,0 +1,53 @@
+/**
+ * UI lib Component Example
+ *
+ */
+
+import React from 'react'
+import ComponentBox from 'dnb-design-system-portal/src/shared/tags/ComponentBox'
+
+export const LogoDefaultExample = () => (
+  <ComponentBox data-visual-test="logo-default">
+    {
+      /* jsx */ `
+<Logo height="192" />
+`
+    }
+  </ComponentBox>
+)
+
+export const LogoAutoSizeExample = () => (
+  <ComponentBox data-visual-test="logo-auto-size">
+    {
+      /* jsx */ `
+<span style={{ fontSize: '12rem' }}>
+  <Logo size="auto" />
+</span>
+`
+    }
+  </ComponentBox>
+)
+
+export const LogoInheritSizeExample = () => (
+  <ComponentBox data-visual-test="logo-inherit-size">
+    {
+      /* jsx */ `
+<span style={{ height: '12rem' }}>
+  <Logo size="inherit" />
+</span>
+`
+    }
+  </ComponentBox>
+)
+
+export const LogoInheritColorExample = () => (
+  <ComponentBox data-visual-test="logo-inherit-color">
+    {
+      /* jsx */ `
+<span style={{ color: 'tomato' }}>
+  <Logo height="192" inherit_color />
+</span>
+`
+    }
+  </ComponentBox>
+)
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/logo/demos.md b/packages/dnb-design-system-portal/src/docs/uilib/components/logo/demos.md
@@ -2,40 +2,33 @@
 showTabs: true
 ---
 
-import ComponentBox from 'dnb-design-system-portal/src/shared/tags/ComponentBox'
+import {
+LogoAutoSizeExample,
+LogoInheritSizeExample,
+LogoDefaultExample,
+LogoInheritColorExample,
+} from 'Docs/uilib/components/logo/Examples'
 
 ## Demos
 
 ### DNB Logo with dynamic height
 
- <ComponentBox data-visual-test="logo-auto-size">
-	{
-	/* jsx */ `
-<span style={{fontSize: '12rem'}}>
-  <Logo size="auto" />
-</span>
-	`
-	}
-</ComponentBox>
+The height will be set based on the inherited `font-size`.
+
+<LogoAutoSizeExample />
 
 ### DNB Logo with dynamic height
 
-<ComponentBox data-visual-test="logo-inherit-size">
-	{
-	/* jsx */ `
-<span style={{height: '12rem'}}>
-  <Logo size="inherit" />
-</span>
-	`
-	}
-</ComponentBox>
+The height will be set based on the parent, inherited `height`.
+
+<LogoInheritSizeExample />
 
 ### DNB Logo with fixed height
 
-<ComponentBox data-visual-test="logo-default">
-	{
-	/* jsx */ `
-<Logo height="192" />
-`
-	}
-</ComponentBox>
+<LogoDefaultExample />
+
+### DNB Logo and inherit color
+
+The color will be set based on the parent, inherited `color` by using `currentColor`.
+
+<LogoInheritColorExample />
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/logo/properties.md b/packages/dnb-design-system-portal/src/docs/uilib/components/logo/properties.md
@@ -8,6 +8,7 @@ showTabs: true
 | ------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `size`                                      | _(optional)_ define the size of the logo. Sets the height. The width will be calculated by the ratio. Also, `inherit` will use the inherited height. Defaults to `auto` |
 | `color`                                     | _(optional)_ define the color of the logo                                                                                                                               |
+| `inherit_color`                             | _(optional)_ set to `true` if you do not want to inherit the color by `currentColor`. Default to `false`.                                                               |
 | `width`                                     | _(optional)_ define either the width of the logo                                                                                                                        |
 | `height`                                    | _(optional)_ or define the height of the logo                                                                                                                           |
 | [Space](/uilib/components/space/properties) | _(optional)_ spacing properties like `top` or `bottom` are supported.                                                                                                   |
diff --git a/packages/dnb-eufemia/src/components/input/__tests__/__snapshots__/Input.test.js.snap b/packages/dnb-eufemia/src/components/input/__tests__/__snapshots__/Input.test.js.snap
@@ -460,8 +460,10 @@ exports[`Input component have to match type="search" snapshot 1`] = `
                             xmlns="http://www.w3.org/2000/svg"
                           >
                             <path
-                              d="M12.03 10.97a.75.75 0 1 0-1.06 1.06l1.06-1.06Zm2.44 4.56a.75.75 0 1 0 1.06-1.06l-1.06 1.06Zm-3.5-3.5 3.5 3.5 1.06-1.06-3.5-3.5-1.06 1.06Zm.098-5.62a4.66 4.66 0 0 1-4.659 4.658v1.5a6.16 6.16 0 0 0 6.16-6.159h-1.5ZM6.41 11.067A4.66 4.66 0 0 1 1.75 6.41H.25a6.16 6.16 0 0 0 6.16 6.16v-1.5ZM1.75 6.41a4.66 4.66 0 0 1 4.66-4.66V.25A6.16 6.16 0 0 0 .25 6.41h1.5Zm4.66-4.66a4.66 4.66 0 0 1 4.658 4.66h1.5A6.16 6.16 0 0 0 6.41.25v1.5Z"
-                              fill="#000"
+                              d="M11.5 11.5 15 15m-3.182-8.59A5.41 5.41 0 1 1 1 6.41a5.41 5.41 0 0 1 10.818 0Z"
+                              stroke="#000"
+                              strokeLinecap="round"
+                              strokeWidth={1.5}
                             />
                           </svg>
                         </loupe>

diff --git a/packages/dnb-eufemia/src/components/logo/Logo.js b/packages/dnb-eufemia/src/components/logo/Logo.js
@@ -28,6 +28,7 @@ export default class Logo extends React.PureComponent {
     height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     alt: PropTypes.string,
     color: PropTypes.string,
+    inherit_color: PropTypes.bool,
     class: PropTypes.string,
 
     ...spacingPropTypes,
@@ -42,8 +43,8 @@ export default class Logo extends React.PureComponent {
     height: null,
     alt: 'DNB Logo',
     color: null,
+    inherit_color: null,
     class: null,
-
     className: null,
   }
 
@@ -67,6 +68,7 @@ export default class Logo extends React.PureComponent {
       width,
       height,
       color,
+      inherit_color,
       alt,
       className,
       class: _className,
@@ -88,8 +90,9 @@ export default class Logo extends React.PureComponent {
         className,
         _className,
         createSpacingClasses(props),
-        (width > 0 || height > 0) && `dnb-logo--has-size`,
-        size === 'inherit' && `dnb-logo--inherit-size`
+        (width > 0 || height > 0) && 'dnb-logo--has-size',
+        size === 'inherit' && 'dnb-logo--inherit-size',
+        inherit_color && 'dnb-logo--inherit-color'
       ),
       role: 'img',
       alt,

diff --git a/packages/dnb-eufemia/src/components/logo/__tests__/Logo.screenshot.test.js b/packages/dnb-eufemia/src/components/logo/__tests__/Logo.screenshot.test.js
@@ -31,4 +31,11 @@ describe('Logo screenshot', () => {
     })
     expect(screenshot).toMatchImageSnapshot()
   })
+
+  it('have to match the inherited color', async () => {
+    const screenshot = await testPageScreenshot({
+      selector: '[data-visual-test="logo-inherit-color"]',
+    })
+    expect(screenshot).toMatchImageSnapshot()
+  })
 })
diff --git a/packages/dnb-eufemia/src/components/logo/__tests__/Logo.test.js b/packages/dnb-eufemia/src/components/logo/__tests__/Logo.test.js
@@ -22,6 +22,13 @@ describe('Logo component', () => {
     const Comp = mount(<Component {...props} />)
     expect(toJson(Comp)).toMatchSnapshot()
   })
+
+  it('should inherit color and vice versa when inherit_color is false', () => {
+    const Comp = mount(<Component inherit_color />)
+    expect(
+      Comp.find('.dnb-logo').hasClass('dnb-logo--inherit-color')
+    ).toBe(true)
+  })
 })
 
 describe('Logo scss', () => {

diff --git a/packages/dnb-eufemia/src/components/logo/__tests__/__snapshots__/Logo.test.js.snap b/packages/dnb-eufemia/src/components/logo/__tests__/__snapshots__/Logo.test.js.snap
@@ -7,14 +7,15 @@ exports[`Logo component have to match default logo snapshot 1`] = `
   className="className"
   color="color"
   height={80}
+  inherit_color={true}
   ratio={1}
   size={1}
   width={1}
 >
   <span
     alt="alt"
     aria-hidden={true}
-    className="dnb-logo className class dnb-logo--has-size"
+    className="dnb-logo className class dnb-logo--has-size dnb-logo--inherit-color"
     data-ratio={1}
     role="img"
   >
@@ -116,6 +117,8 @@ exports[`Logo scss have to match snapshot 1`] = `
   line-height: var(--line-height-xx-small--em);
   color: var(--color-sea-green);
   height: 1em; }
+  .dnb-logo--inherit-color {
+    color: currentColor; }
   .dnb-logo svg {
     fill: currentColor;
     shape-rendering: geometricPrecision; }

diff --git a/...shot-test-js-logo-screenshot-have-to-match-the-inherited-color-1-0acbf.snap.png b/...shot-test-js-logo-screenshot-have-to-match-the-inherited-color-1-0acbf.snap.png
diff --git a/packages/dnb-eufemia/src/components/logo/style/_logo.scss b/packages/dnb-eufemia/src/components/logo/style/_logo.scss
@@ -12,6 +12,9 @@
   ); // for vertical alignment, we have to have no line-height
 
   color: var(--color-sea-green);
+  &--inherit-color {
+    color: currentColor;
+  }
   svg {
     fill: currentColor;
     shape-rendering: geometricPrecision;