From 1640d89507053939d3be7ad77731b0362f5b3bcb Mon Sep 17 00:00:00 2001
From: Anna Kosolapova <kosanna.au@gmail.com>
Date: Fri, 2 Nov 2018 09:57:18 +1100
Subject: [PATCH] feat(Highlight): Fix undefined class assigned to element
 (#572)

Due to the `[styles[tone]]: true` defaulting tone to `TONE.NEUTRAL`, by default we always get `undefined` class being assigned to the element.

This is caused by the fact that `.neutral` class does not exist in the stylesheet.

Tone is NOT a required prop from the consumer's perspective and also defaulting is a) doing nothing, b) introducing incorrect behaviour of the component.
---
 react/Highlight/Highlight.demo.js             |  2 +-
 react/Highlight/Highlight.js                  |  6 ++--
 react/Highlight/Highlight.test.js             | 22 +++++++++++++
 .../__snapshots__/Highlight.test.js.snap      | 33 +++++++++++++++++++
 4 files changed, 59 insertions(+), 4 deletions(-)
 create mode 100644 react/Highlight/Highlight.test.js
 create mode 100644 react/Highlight/__snapshots__/Highlight.test.js.snap

diff --git a/react/Highlight/Highlight.demo.js b/react/Highlight/Highlight.demo.js
index da81b2f2..2b2c43c8 100644
--- a/react/Highlight/Highlight.demo.js
+++ b/react/Highlight/Highlight.demo.js
@@ -17,7 +17,7 @@ export default {
   component: Text,
   initialProps: {
     headline: true,
-    children: renderChildren({ tone: TONE.NEUTRAL })
+    children: renderChildren({})
   },
   options: [
     {
diff --git a/react/Highlight/Highlight.js b/react/Highlight/Highlight.js
index 22c05431..506e6455 100644
--- a/react/Highlight/Highlight.js
+++ b/react/Highlight/Highlight.js
@@ -8,11 +8,11 @@ type Props = {
   children: React$Node,
   secondary?: boolean,
   className?: string,
-  tone?: typeof TONE.CRITICAL | typeof TONE.NEUTRAL
+  tone?: typeof TONE.CRITICAL
 };
 
 export default function Highlight(props: Props) {
-  const { children, secondary, tone = TONE.NEUTRAL, className, ...restProps } = props;
+  const { children, secondary, tone, className, ...restProps } = props;
 
   return (
     <mark
@@ -20,7 +20,7 @@ export default function Highlight(props: Props) {
       className={classnames({
         [styles.root]: true,
         [styles.secondaryText]: secondary,
-        [styles[tone]]: true,
+        [styles[tone]]: tone,
         ...(className ? { [className]: className } : {})
       })}>
       {children}
diff --git a/react/Highlight/Highlight.test.js b/react/Highlight/Highlight.test.js
new file mode 100644
index 00000000..dc755e98
--- /dev/null
+++ b/react/Highlight/Highlight.test.js
@@ -0,0 +1,22 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import Highlight from './Highlight';
+
+describe('Highlight:', () => {
+  it('should render with defaults', () => {
+    expect(shallow(<Highlight>text</Highlight>)).toMatchSnapshot();
+  });
+
+  it('should render with className', () => {
+    expect(shallow(<Highlight className="foo">text</Highlight>)).toMatchSnapshot();
+  });
+
+  it('should render with tone', () => {
+    expect(shallow(<Highlight tone="critical" className="foo">text</Highlight>)).toMatchSnapshot();
+  });
+
+  it('should render as secondary', () => {
+    expect(shallow(<Highlight secondary tone="critical" className="foo">text</Highlight>)).toMatchSnapshot();
+  });
+});
diff --git a/react/Highlight/__snapshots__/Highlight.test.js.snap b/react/Highlight/__snapshots__/Highlight.test.js.snap
new file mode 100644
index 00000000..6c0e4cd6
--- /dev/null
+++ b/react/Highlight/__snapshots__/Highlight.test.js.snap
@@ -0,0 +1,33 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Highlight: should render as secondary 1`] = `
+<mark
+  className="Highlight__root Highlight__secondaryText Highlight__critical foo"
+>
+  text
+</mark>
+`;
+
+exports[`Highlight: should render with className 1`] = `
+<mark
+  className="Highlight__root foo"
+>
+  text
+</mark>
+`;
+
+exports[`Highlight: should render with defaults 1`] = `
+<mark
+  className="Highlight__root"
+>
+  text
+</mark>
+`;
+
+exports[`Highlight: should render with tone 1`] = `
+<mark
+  className="Highlight__root Highlight__critical foo"
+>
+  text
+</mark>
+`;