feat(NumberFormat): add monospace support (#3669)

Co-authored-by: Anders <[email protected]>
dnbexperience · Jun 6, 2024 · 940ddb6 · 940ddb6
1 parent 90638ce
commit 940ddb6
Show file tree

Hide file tree

Showing 10 changed files with 73 additions and 1 deletion.
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/number-format/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/components/number-format/Examples.tsx
@@ -206,3 +206,16 @@ export const NumberSpacing = () => (
     </ComponentBox>
   </Style>
 )
+
+export const NumberMonospace = () => (
+  <Style>
+    <ComponentBox data-visual-test="number-format-monospace">
+      <NumberFormat
+        value="123456"
+        locale="en-GB"
+        currency="NOK"
+        monospace
+      />
+    </ComponentBox>
+  </Style>
+)
diff --git a/...ages/dnb-design-system-portal/src/docs/uilib/components/number-format/demos.mdx b/...ages/dnb-design-system-portal/src/docs/uilib/components/number-format/demos.mdx
@@ -16,6 +16,7 @@ import {
   NumberLocales,
   NumberSpacing,
   NumberProvider,
+  NumberMonospace,
 } from 'Docs/uilib/components/number-format/Examples'
 import ChangeLocale from 'dnb-design-system-portal/src/core/ChangeLocale'
 
@@ -77,3 +78,9 @@ The NumberFormat uses `display: inline-block;` in order to make the [spacing sys
 In this example every NumberFormat will receive the Provider defined properties, including `clean_copy_value`.
 
 <NumberProvider />
+
+### Monospace
+
+By using the `monospace` prop you can set the font to [DNB Mono Regular](/quickguide-designer/fonts/#dnbmono-regular)
+
+<NumberMonospace />
diff --git a/...dnb-design-system-portal/src/docs/uilib/components/number-format/properties.mdx b/...dnb-design-system-portal/src/docs/uilib/components/number-format/properties.mdx
@@ -30,6 +30,7 @@ redirect_from:
 | `copy_selection`                        | _(optional)_ use `false` to disable the auto copy feature. Defaults to `true`.                                                                                                                                                                                                                                                                                                                        |
 | `clean_copy_value`                      | _(optional)_ if set to `true` the copy&paste value will be provided without e.g. a currency sign or a percent sign. Defaults to `false`.                                                                                                                                                                                                                                                              |
 | `link`                                  | _(optional)_ use `tel` or `sms` to enable a clickable / touchable anchor link.                                                                                                                                                                                                                                                                                                                        |
+| `monospace`                             | _(optional)_ Sets the font to [DNB Mono Regular](/quickguide-designer/fonts/#dnbmono-regular).                                                                                                                                                                                                                                                                                                        |
 | `element`                               | _(optional)_ define what HTML element should be used. Defaults to `<span>`.                                                                                                                                                                                                                                                                                                                           |
 | `options`                               | _(optional)_ accepts all [number.toLocaleString](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString) or [Intl.NumberFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat) options as an object - can also be a JSON given as the parameter e.g. `options={{ 'minimumFractionDigits': 2 }}`. |
 | `skeleton`                              | _(optional)_ if set to `true`, an overlaying skeleton with animation will be shown.                                                                                                                                                                                                                                                                                                                   |

diff --git a/packages/dnb-eufemia/src/components/number-format/NumberFormat.d.ts b/packages/dnb-eufemia/src/components/number-format/NumberFormat.d.ts
@@ -87,6 +87,10 @@ export type NumberFormatProps = {
    * Use `tel` or `sms` to enable a clickable / touchable anchor link.
    */
   link?: NumberFormatLink;
+  /**
+   * Sets font to monospace
+   */
+  monospace?: boolean;
   /**
    * Accepts all <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString">number.toLocaleString</a> or <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat">Intl.NumberFormat</a> options as an object - can also be a JSON given as the parameter e.g. `options={{ &#39;minimumFractionDigits&#39;: 2 }}`.
    */

diff --git a/packages/dnb-eufemia/src/components/number-format/NumberFormat.js b/packages/dnb-eufemia/src/components/number-format/NumberFormat.js
@@ -77,6 +77,7 @@ export default class NumberFormat extends React.PureComponent {
     // can be tel or sms
     link: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
 
+    monospace: PropTypes.bool,
     options: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
     decimals: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     selectall: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
@@ -124,6 +125,7 @@ export default class NumberFormat extends React.PureComponent {
     org: null,
     percent: null,
     link: null,
+    monospace: false,
     options: null,
     decimals: null,
     selectall: true,
@@ -270,6 +272,7 @@ export default class NumberFormat extends React.PureComponent {
       org,
       percent,
       link: _link,
+      monospace,
       tooltip,
       skeleton,
       options,
@@ -380,6 +383,7 @@ export default class NumberFormat extends React.PureComponent {
         isTrue(selectall) && 'dnb-number-format--selectall',
         this.state.selected && 'dnb-number-format--selected',
         link && 'dnb-anchor',
+        monospace && 'dnb-number-format--monospace',
         createSpacingClasses(this.props)
       ),
 

diff --git a/packages/dnb-eufemia/src/components/number-format/__tests__/NumberFormat.screenshot.test.ts b/packages/dnb-eufemia/src/components/number-format/__tests__/NumberFormat.screenshot.test.ts
@@ -83,6 +83,13 @@ describe('NumberFormat', () => {
     })
     expect(screenshot).toMatchImageSnapshot()
   })
+
+  it('have to match monospace', async () => {
+    const screenshot = await makeScreenshot({
+      selector: '[data-visual-test="number-format-monospace"]',
+    })
+    expect(screenshot).toMatchImageSnapshot()
+  })
 })
 
 describe('NumberFormat with skeleton', () => {

diff --git a/...mat/__tests__/__image_snapshots__/numberformat-have-to-match-monospace.snap.png b/...mat/__tests__/__image_snapshots__/numberformat-have-to-match-monospace.snap.png
diff --git a/...b-eufemia/src/components/number-format/__tests__/__snapshots__/NumberFormat.test.tsx.snap b/...b-eufemia/src/components/number-format/__tests__/__snapshots__/NumberFormat.test.tsx.snap
@@ -187,6 +187,9 @@ html[data-visual-test] .dnb-tooltip--hide {
   z-index: 3;
   user-select: all;
 }
+.dnb-number-format--monospace {
+  font-family: var(--font-family-monospace);
+}
 .dnb-number-format.dnb-skeleton, .dnb-skeleton .dnb-number-format {
   -webkit-text-fill-color: var(--skeleton-color);
 }"

diff --git a/packages/dnb-eufemia/src/components/number-format/stories/NumberFormat.stories.tsx b/packages/dnb-eufemia/src/components/number-format/stories/NumberFormat.stories.tsx
@@ -6,7 +6,7 @@
 import React, { useLayoutEffect } from 'react'
 import { Wrapper, Box } from 'storybook-utils/helpers'
 import styled from '@emotion/styled'
-import { P } from '../../..'
+import { H3, P } from '../../..'
 import Provider from '../../../shared/Provider'
 import NumberFormat from '../../NumberFormat'
 // import Dropdown from '../../Dropdown'
@@ -187,6 +187,35 @@ export const NumberFormatSandbox = () => {
               identification number
             </P>
           </Box>
+
+          <Box>
+            <H3>Not Monospace</H3>
+            <div>
+              <NumberFormat value="1111111.11" currency="NOK" />
+            </div>
+            <div>
+              <NumberFormat value="2222222.22" currency="AAA" />
+            </div>
+            <div>
+              <NumberFormat value="1212121.12" currency="III" />
+            </div>
+            <div>
+              <NumberFormat value="1010101.01" currency="LLL" />
+            </div>
+            <H3>Monospace</H3>
+            <div>
+              <NumberFormat monospace value="1111111.11" currency="NOK" />
+            </div>
+            <div>
+              <NumberFormat monospace value="2222222.22" currency="AAA" />
+            </div>
+            <div>
+              <NumberFormat monospace value="1212121.12" currency="III" />
+            </div>
+            <div>
+              <NumberFormat monospace value="1010101.01" currency="LLL" />
+            </div>
+          </Box>
         </Wrapper>
       </Provider>
     </CustomStyle>

diff --git a/packages/dnb-eufemia/src/components/number-format/style/dnb-number-format.scss b/packages/dnb-eufemia/src/components/number-format/style/dnb-number-format.scss
@@ -57,6 +57,10 @@
     user-select: all; // makes the "copy_selection" feature actually work
   }
 
+  &--monospace {
+    font-family: var(--font-family-monospace);
+  }
+
   &.dnb-skeleton,
   .dnb-skeleton & {
     -webkit-text-fill-color: var(--skeleton-color);