fix: edge case where suffix is a node (#646)

* fix: suffix being node edge case * docs(abbreviation): make examples better * test(abbr suffix): fix tests * style: removed out commented ugly if
nordnet · Oct 4, 2018 · 6f93da2 · 6f93da2
1 parent 9a9d5fe
commit 6f93da2
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 5 deletions.
diff --git a/src/components/currency/currency.md b/src/components/currency/currency.md
@@ -32,7 +32,7 @@ Basic examples:
         />
       </span>
       <span style={{marginRight: '2rem'}} title="Million abbreviation for large values">
-        <Currency value={9200000} currency="EUR" abbreviation="million"/>
+        <Currency value={9200000} currency="SEK" abbreviation="million"/>
       </span>
     </div>
 

diff --git a/src/components/number/number.jsx b/src/components/number/number.jsx
@@ -65,7 +65,13 @@ function NumberComponent({
   const ariaSign = value < 0 ? '−' : '';
   const sign = value < 0 ? <span dangerouslySetInnerHTML={{ __html: '&ndash; ' }} /> : null;
 
-  const suffix = (rawSuffix || abbreviation) && `${abbreviationSuffix}${rawSuffix || ''}`;
+  const suffix = (rawSuffix || abbreviation) && (
+    <React.Fragment>
+      {abbreviationSuffix}
+      {rawSuffix || ''}
+    </React.Fragment>
+  );
+
   return (
     <span title={formattedNumber} {...rest} className={classes} style={styles}>
       <Addon addon={prefix} className={prefixClass} position="left" separator={prefixSeparator} style={prefixStyle} />

diff --git a/src/components/value/value.md b/src/components/value/value.md
@@ -20,7 +20,7 @@ Simple examples:
         <Value useDashForInvalidValues value={ Number.NEGATIVE_INFINITY } />
       </span>
       <span style={{marginRight: '2rem'}} title="Abbreviations">
-        <Value value={ -1.4444 } abbreviation="million"/>
+        <Value value={ 1420000 } abbreviation="million"/>
       </span>
     </div>
 

diff --git a/test/components/number.test.js b/test/components/number.test.js
@@ -175,7 +175,12 @@ describe('<Number />', () => {
   it('should be possible to add a suffix', () => {
     const suffix = '987654321';
     const component = shallow(<Number.WrappedComponent intl={intl} value={1} suffix={suffix} />);
-    expect(component.find('Addon[position="right"]').prop('addon')).to.equal(suffix);
+    expect(
+      component
+        .find('Addon[position="right"]')
+        .render()
+        .text(),
+    ).to.equal(suffix);
   });
 
   it('should be possible to add a prefix and a suffix', () => {
@@ -265,7 +270,12 @@ describe('<Number />', () => {
     it('should add M abbreviation suffix for million', () => {
       const suffix = 'SEK';
       const component = shallow(<Number.WrappedComponent intl={intl} value={9} suffix={suffix} abbreviation="million" />);
-      expect(component.find('Addon[position="right"]').prop('addon')).to.equal(`M${suffix}`);
+      expect(
+        component
+          .find('Addon[position="right"]')
+          .render()
+          .text(),
+      ).to.equal(`M${suffix}`);
     });
 
     it('should transform 10,000,000 to 10 M', () => {