From 940ddb6c1a67c665cc7cb2e3c393f8de79b01806 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=85dne=20Rosenvinge?= <41082005+AadneRo@users.noreply.github.com> Date: Thu, 6 Jun 2024 14:32:00 +0200 Subject: [PATCH] feat(NumberFormat): add monospace support (#3669) Co-authored-by: Anders --- .../components/number-format/Examples.tsx | 13 ++++++++ .../uilib/components/number-format/demos.mdx | 7 ++++ .../components/number-format/properties.mdx | 1 + .../number-format/NumberFormat.d.ts | 4 +++ .../components/number-format/NumberFormat.js | 4 +++ .../__tests__/NumberFormat.screenshot.test.ts | 7 ++++ ...berformat-have-to-match-monospace.snap.png | Bin 0 -> 2519 bytes .../__snapshots__/NumberFormat.test.tsx.snap | 3 ++ .../stories/NumberFormat.stories.tsx | 31 +++++++++++++++++- .../style/dnb-number-format.scss | 4 +++ 10 files changed, 73 insertions(+), 1 deletion(-) create mode 100644 packages/dnb-eufemia/src/components/number-format/__tests__/__image_snapshots__/numberformat-have-to-match-monospace.snap.png 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 index d83367d91a2..a3588db8a72 100644 --- 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 = () => ( ) + +export const NumberMonospace = () => ( + +) diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/number-format/demos.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/number-format/demos.mdx index 6d8be0189d2..65b718c0beb 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/components/number-format/demos.mdx +++ b/packages/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`. + +### Monospace + +By using the `monospace` prop you can set the font to [DNB Mono Regular](/quickguide-designer/fonts/#dnbmono-regular) + + diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/number-format/properties.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/number-format/properties.mdx index 0db6097e5fb..99f91786036 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/components/number-format/properties.mdx +++ b/packages/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 ``. | | `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 index 924d58a494f..9b434d75107 100644 --- 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 number.toLocaleString or Intl.NumberFormat options as an object - can also be a JSON given as the parameter e.g. `options={{ 'minimumFractionDigits': 2 }}`. */ diff --git a/packages/dnb-eufemia/src/components/number-format/NumberFormat.js b/packages/dnb-eufemia/src/components/number-format/NumberFormat.js index 34e6c90885a..56e875dc5c9 100644 --- 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 index 2db69119659..3ceb6596eec 100644 --- 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/packages/dnb-eufemia/src/components/number-format/__tests__/__image_snapshots__/numberformat-have-to-match-monospace.snap.png b/packages/dnb-eufemia/src/components/number-format/__tests__/__image_snapshots__/numberformat-have-to-match-monospace.snap.png new file mode 100644 index 0000000000000000000000000000000000000000..3ceb70b180083a309450ea25ae14ce896e22f679 GIT binary patch literal 2519 zcmcJR`#%%jAIDu9Z4HHTDc8(G_>jvKMXqyMb6IX-pM?==v5%EY=9)|LZTN^r?rd1@ zB4onn<1QNFGscG~m&%aK#&`d~_s8!K=bXp+;hgt5&)4gm$14SiuoeNyg82COMBp|S zPQ0;#*I*}wc>PP&)d)U5U;*61%;k~y#w$QF%1bI~Dmk5r!4T7#adE}P7y_DL7%m)6 zAP|Jr!_msk(-<@%>i9T#`a|wDg8$}2+B{);9q{1~TIBbJMX#WaAO(^Am1E`G)xyTB zv8PWV#H@O$rN(G_U@XgB%ncV|pm$s66e5j(G@>hRqM@iR)g9*nel#g~j$9y;jv9)a zz;rdp*Rr;Q1FA9S$mawLc8Guqtohxu4Xj4#AJxK_VJ7Egt6l;sdWl#QH2v%6F}L2! zFij!jHU3kG(WE|ge|n(K|0u{F%V*4DCJuEBke z$~ca9Yp9=lb8zm`NWN$E@xOnG$ry%^FBm^U@|m^azm`V++H|7bX&sA>++BY`j~A}e zpFxv9l{=hYh|$q@t2JHhOJAEgQ+2zBK`jIhq%}K7OepV4CHS-xdU-s=uRxV$Dlef_dQ5mDqQs03rwITPl$(qdGG^xS0sW+%1itC$##-OQ@9k%k!X+2yBvkg^_$X743 z%eg(eB|I|M5jofzwo>|FzH_R*p^m4*6o7Ct=nTN%j@ zU7ywgv^iHG5@(N>`X!d9{fF}?2@%_?FNR*<@PV8riU5I*kv7$yEg|rh5T?rGt)=?F z303zxOyW@P73)+h4-kwbjLTv4hp+P_t6xy|krVlgRLd6$PVEi-Ya27Y}zgPStGV)rjzV zh(n$pnz_5lth(B_$$W>ZS42v$2Q%B6QkCSud{WxpcT8Ldc{fQA<#|ENGQC*COmJm+ zFbCDkA3XfZP)ry>wmVWHi$Q$roPG8}R|+?9q8xSK zK=~`9D#!Q<$8BGV-?(k&9V&HYY?3GZd4G+0XWWscO6_Y&D6KcSB9f|{wc z6Cz~kEd8L{C?mrMbJg3Sp(9G>Nq_U``VHsl|Bmkr-^deS^9Z7L#}mI z-ZR=;0F+*|RVY?7ti}^IyUO*=K&+r}DNh_~_5lrO;Uj>UdZ`ykvM0knYQyRjLJp6( zkqnP3{zH`<+r@xb(iqAn1f~vmu0@-bx$;m8IzsRcv(5Jzmrc!Zpk6>^;D*W>OB*T4 z4pCcE{W7L?&eJe|BpnV=Dq;CFIzwUn(ltrdp{XO?Knc}Kx=p-9s;O!>`>0fX->OFh zMxlZ4fz=S8;?V?QT{n8e-l3LPn+?yzcVda9zJHr*2k!_Y)X^#85SJ<;a3gj`i!Y&N zs>ajRq#^ioJ?WC8az6=@rWY_~D*fCh1SIr21cv1v>@ZGS>W71(6y6n?f-`t?XNEW1 zyW`K?c()R3JfxE4t2lmN7P<3%{s!IyD)C^hU50kwF;Jdg%cmeHSc$ zbC}7DF^aJFW5KD+Hk*iw$C_Uxb6yRDeTgJm<^JAtxoe+1G$j>C{h8SkIMN0&y}GyV zKs|-UuM4Ya0ALhFx0lIap~h0HbXf}3;uXXuMm?688JnPfQp^`5V)6DN+7^QAM5z>W z?^yEN&NR&lF7vPB>=a-j=+AZi1`l6_rKPMJ$&*ZNrVxdD<8tAd*SJ`5wSsx)X{G{8~FjNB{Oq`*v`Taf=`g-d+UwVzOS*f9#pk-NA5&G@-%M=o_{ z8HM><(pt6Cz7=E!seqvu0~13McKb{e3!(hm7IqqwckBf-ftjga$oQRTWuQgX3W4U# zN&#D~T9kze^`}3HsCnP~e6G>`s!*XH@?&^m#g{*By}ph@$3~6^vdDY+^yFLfsR#`6 zr;JmyPrzyYOoTXm$ms3|>$i>IE { identification number

+ + +

Not Monospace

+
+ +
+
+ +
+
+ +
+
+ +
+

Monospace

+
+ +
+
+ +
+
+ +
+
+ +
+ 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 index 485456cbf22..371b965f9c0 100644 --- 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);