@dnb/eufemia 10.13.0 → 10.14.0

package/cjs/shared/useTranslation.js.map

@@ -1 +1 @@
-{"version":3,"file":"useTranslation.js","names":["_react","_interopRequireDefault","require","_propTypes","_Context","_excluded","obj","__esModule","default","_objectWithoutProperties","source","excluded","target","_objectWithoutPropertiesLoose","key","i","Object","getOwnPropertySymbols","sourceSymbolKeys","length","indexOf","prototype","propertyIsEnumerable","call","sourceKeys","keys","_defineProperty","value","_toPropertyKey","defineProperty","enumerable","configurable","writable","arg","_toPrimitive","String","input","hint","prim","Symbol","toPrimitive","undefined","res","TypeError","Number","_extends","assign","bind","arguments","hasOwnProperty","apply","getTranslation","id","params","createElement","Translation","useTranslation","translation","React","useContext","Context","prepareTrans","PureComponent","render","_this$props","props","children","context","exports","process","env","NODE_ENV","propTypes","PropTypes","string","trans","str","t","replace","RegExp"],"sources":["../../../src/shared/useTranslation.js"],"sourcesContent":["/**\n * React Hook\n *\n */\n\nimport React from 'react'\nimport PropTypes from 'prop-types'\nimport Context from './Context'\n\nexport function getTranslation(id, params) {\n  return <Translation id={id} {...params} />\n}\n\nexport default function useTranslation(id, params) {\n  const { translation } = React.useContext(Context)\n  return prepareTrans(id, params, translation)\n}\n\nexport class Translation extends React.PureComponent {\n  static contextType = Context\n  static propTypes = {\n    id: PropTypes.string,\n    children: PropTypes.string,\n  }\n  static defaultProps = {\n    id: null,\n    children: null,\n  }\n\n  render() {\n    const { id, children, ...params } = this.props\n    return prepareTrans(id || children, params, this.context.translation)\n  }\n}\n\nfunction prepareTrans(id, params, trans) {\n  let str = null\n  if (trans[id]) {\n    str = trans[id]\n    for (let t in params) {\n      str = str.replace(new RegExp(`{${t}}`, 'g'), params[t])\n    }\n  }\n\n  return str\n}\n"],"mappings":"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"}
+{"version":3,"file":"useTranslation.js","names":["_react","_interopRequireDefault","require","_propTypes","_Context","_excluded","obj","__esModule","default","_objectWithoutProperties","source","excluded","target","_objectWithoutPropertiesLoose","key","i","Object","getOwnPropertySymbols","sourceSymbolKeys","length","indexOf","prototype","propertyIsEnumerable","call","sourceKeys","keys","_defineProperty","value","_toPropertyKey","defineProperty","enumerable","configurable","writable","arg","_toPrimitive","String","input","hint","prim","Symbol","toPrimitive","undefined","res","TypeError","Number","_extends","assign","bind","arguments","hasOwnProperty","apply","getTranslation","id","params","createElement","Translation","useTranslation","translation","React","useContext","Context","prepareTrans","PureComponent","render","_this$props","props","children","context","exports","process","env","NODE_ENV","propTypes","PropTypes","string","trans","str","t","replace","RegExp"],"sources":["../../../src/shared/useTranslation.js"],"sourcesContent":["/**\n * React Hook\n *\n */\n\nimport React from 'react'\nimport PropTypes from 'prop-types'\nimport Context from './Context'\n\nexport function getTranslation(id, params) {\n  return <Translation id={id} {...params} />\n}\n\nexport default function useTranslation(id, params) {\n  const { translation } = React.useContext(Context)\n  return prepareTrans(id, params, translation)\n}\n\nexport class Translation extends React.PureComponent {\n  static contextType = Context\n  static propTypes = {\n    id: PropTypes.string,\n    children: PropTypes.string,\n  }\n  static defaultProps = {\n    id: null,\n    children: null,\n  }\n\n  render() {\n    const { id, children, ...params } = this.props\n    return prepareTrans(id || children, params, this.context.translation)\n  }\n}\n\nfunction prepareTrans(id, params, trans) {\n  let str = null\n  if (trans[id]) {\n    str = trans[id]\n    for (let t in params) {\n      str = str.replace(new RegExp(`{${t}}`, 'g'), params[t])\n    }\n  }\n\n  return str\n}\n"],"mappings":";;;;;;;;;AAKA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,UAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,QAAA,GAAAH,sBAAA,CAAAC,OAAA;AAA+B,MAAAG,SAAA;AAAA,SAAAJ,uBAAAK,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAAA,SAAAG,yBAAAC,MAAA,EAAAC,QAAA,QAAAD,MAAA,yBAAAE,MAAA,GAAAC,6BAAA,CAAAH,MAAA,EAAAC,QAAA,OAAAG,GAAA,EAAAC,CAAA,MAAAC,MAAA,CAAAC,qBAAA,QAAAC,gBAAA,GAAAF,MAAA,CAAAC,qBAAA,CAAAP,MAAA,QAAAK,CAAA,MAAAA,CAAA,GAAAG,gBAAA,CAAAC,MAAA,EAAAJ,CAAA,MAAAD,GAAA,GAAAI,gBAAA,CAAAH,CAAA,OAAAJ,QAAA,CAAAS,OAAA,CAAAN,GAAA,uBAAAE,MAAA,CAAAK,SAAA,CAAAC,oBAAA,CAAAC,IAAA,CAAAb,MAAA,EAAAI,GAAA,aAAAF,MAAA,CAAAE,GAAA,IAAAJ,MAAA,CAAAI,GAAA,cAAAF,MAAA;AAAA,SAAAC,8BAAAH,MAAA,EAAAC,QAAA,QAAAD,MAAA,yBAAAE,MAAA,WAAAY,UAAA,GAAAR,MAAA,CAAAS,IAAA,CAAAf,MAAA,OAAAI,GAAA,EAAAC,CAAA,OAAAA,CAAA,MAAAA,CAAA,GAAAS,UAAA,CAAAL,MAAA,EAAAJ,CAAA,MAAAD,GAAA,GAAAU,UAAA,CAAAT,CAAA,OAAAJ,QAAA,CAAAS,OAAA,CAAAN,GAAA,kBAAAF,MAAA,CAAAE,GAAA,IAAAJ,MAAA,CAAAI,GAAA,YAAAF,MAAA;AAAA,SAAAc,gBAAApB,GAAA,EAAAQ,GAAA,EAAAa,KAAA,IAAAb,GAAA,GAAAc,cAAA,CAAAd,GAAA,OAAAA,GAAA,IAAAR,GAAA,IAAAU,MAAA,CAAAa,cAAA,CAAAvB,GAAA,EAAAQ,GAAA,IAAAa,KAAA,EAAAA,KAAA,EAAAG,UAAA,QAAAC,YAAA,QAAAC,QAAA,oBAAA1B,GAAA,CAAAQ,GAAA,IAAAa,KAAA,WAAArB,GAAA;AAAA,SAAAsB,eAAAK,GAAA,QAAAnB,GAAA,GAAAoB,YAAA,CAAAD,GAAA,2BAAAnB,GAAA,gBAAAA,GAAA,GAAAqB,MAAA,CAAArB,GAAA;AAAA,SAAAoB,aAAAE,KAAA,EAAAC,IAAA,eAAAD,KAAA,iBAAAA,KAAA,kBAAAA,KAAA,MAAAE,IAAA,GAAAF,KAAA,CAAAG,MAAA,CAAAC,WAAA,OAAAF,IAAA,KAAAG,SAAA,QAAAC,GAAA,GAAAJ,IAAA,CAAAf,IAAA,CAAAa,KAAA,EAAAC,IAAA,2BAAAK,GAAA,sBAAAA,GAAA,YAAAC,SAAA,4DAAAN,IAAA,gBAAAF,MAAA,GAAAS,MAAA,EAAAR,KAAA;AAAA,SAAAS,SAAA,IAAAA,QAAA,GAAA7B,MAAA,CAAA8B,MAAA,GAAA9B,MAAA,CAAA8B,MAAA,CAAAC,IAAA,eAAAnC,MAAA,aAAAG,CAAA,MAAAA,CAAA,GAAAiC,SAAA,CAAA7B,MAAA,EAAAJ,CAAA,UAAAL,MAAA,GAAAsC,SAAA,CAAAjC,CAAA,YAAAD,GAAA,IAAAJ,MAAA,QAAAM,MAAA,CAAAK,SAAA,CAAA4B,cAAA,CAAA1B,IAAA,CAAAb,MAAA,EAAAI,GAAA,KAAAF,MAAA,CAAAE,GAAA,IAAAJ,MAAA,CAAAI,GAAA,gBAAAF,MAAA,YAAAiC,QAAA,CAAAK,KAAA,OAAAF,SAAA;AAExB,SAASG,cAAcA,CAACC,EAAE,EAAEC,MAAM,EAAE;EACzC,OAAOrD,MAAA,CAAAQ,OAAA,CAAA8C,aAAA,CAACC,WAAW,EAAAV,QAAA;IAACO,EAAE,EAAEA;EAAG,GAAKC,MAAM,CAAG,CAAC;AAC5C;AAEe,SAASG,cAAcA,CAACJ,EAAE,EAAEC,MAAM,EAAE;EACjD,MAAM;IAAEI;EAAY,CAAC,GAAGC,cAAK,CAACC,UAAU,CAACC,gBAAO,CAAC;EACjD,OAAOC,YAAY,CAACT,EAAE,EAAEC,MAAM,EAAEI,WAAW,CAAC;AAC9C;AAEO,MAAMF,WAAW,SAASG,cAAK,CAACI,aAAa,CAAC;EAWnDC,MAAMA,CAAA,EAAG;IACP,MAAAC,WAAA,GAAoC,IAAI,CAACC,KAAK;MAAxC;QAAEb,EAAE;QAAEc;MAAoB,CAAC,GAAAF,WAAA;MAARX,MAAM,GAAA5C,wBAAA,CAAAuD,WAAA,EAAA3D,SAAA;IAC/B,OAAOwD,YAAY,CAACT,EAAE,IAAIc,QAAQ,EAAEb,MAAM,EAAE,IAAI,CAACc,OAAO,CAACV,WAAW,CAAC;EACvE;AACF;AAACW,OAAA,CAAAb,WAAA,GAAAA,WAAA;AAAA7B,eAAA,CAfY6B,WAAW,iBACDK,gBAAO;AAAAlC,eAAA,CADjB6B,WAAW,kBAMA;EACpBH,EAAE,EAAE,IAAI;EACRc,QAAQ,EAAE;AACZ,CAAC;AAAAG,OAAA,CAAAC,GAAA,CAAAC,QAAA,oBATUhB,WAAW,CAEfiB,SAAS,GAAG;EACjBpB,EAAE,EAAEqB,kBAAS,CAACC,MAAM;EACpBR,QAAQ,EAAEO,kBAAS,CAACC;AACtB,CAAC;AAYH,SAASb,YAAYA,CAACT,EAAE,EAAEC,MAAM,EAAEsB,KAAK,EAAE;EACvC,IAAIC,GAAG,GAAG,IAAI;EACd,IAAID,KAAK,CAACvB,EAAE,CAAC,EAAE;IACbwB,GAAG,GAAGD,KAAK,CAACvB,EAAE,CAAC;IACf,KAAK,IAAIyB,CAAC,IAAIxB,MAAM,EAAE;MACpBuB,GAAG,GAAGA,GAAG,CAACE,OAAO,CAAC,IAAIC,MAAM,CAAE,IAAGF,CAAE,GAAE,EAAE,GAAG,CAAC,EAAExB,MAAM,CAACwB,CAAC,CAAC,CAAC;IACzD;EACF;EAEA,OAAOD,GAAG;AACZ"}

package/cjs/style/dnb-ui-components.css

@@ -5044,10 +5044,39 @@ html[data-visual-test] .dnb-progress-indicator__bar-transition {
   --radio-width--large: 2rem;
   --radio-height--large: 2rem;
   --radio-border-width: 0.125rem;
+  --radio-color-dot-on: black;
+  --radio-color-background-on: white;
+  --radio-color-border-on: black;
+  --radio-color-background-off: white;
+  --radio-color-border-off: black;
+  --radio-color-dot-on--disabled: lightgrey;
+  --radio-color-border-on--disabled: lightgrey;
+  --radio-color-border-off--disabled: lightgrey;
+  --radio-color-dot-on--active: lightgrey;
+  --radio-color-border-on--active: lightgrey;
+  --radio-color-background-off--active: lightgrey;
+  --radio-color-border-off--active: transparent;
+  --radio-color-dot-on--hover: lightgrey;
+  --radio-color-background-off--hover: lightgrey;
+  --radio-color-background-on--focus: var(--color-white);
+  --radio-color-background-off--focus: lightgrey;
+  --radio-color-dot-on--error: red;
+  --radio-color-border-on--error: red;
+  --radio-color-background-off--error: lavenderblush;
+  --radio-color-dot-on--error-hover: lavenderblush;
   display: inline-flex;
   flex-direction: column;
   font-size: var(--font-size-small);
   line-height: var(--line-height-basis);
+  /*
+   * Color scheme
+   */
+  /** Normal state **/
+  /** Disabled state **/
+  /** Active state **/
+  /** Hover state **/
+  /** Focus state **/
+  /** Error state **/
 }
 .dnb-radio__inner {
   display: inline-flex;
@@ -5095,6 +5124,8 @@ html[data-whatinput=keyboard] .dnb-radio__focus {
   width: calc(var(--radio-width--medium) - 0.75rem);
   height: calc(var(--radio-height--medium) - 0.75rem);
   border-radius: 50%;
+  background-color: var(--radio-color-dot-on);
+  transition: opacity 200ms ease-out, transform 200ms ease-out;
 }
 .dnb-radio--large .dnb-radio__dot {
   width: calc(var(--radio-width--large) - 0.875rem);
@@ -5180,6 +5211,9 @@ html[data-whatinput=keyboard] .dnb-radio__focus {
   margin-top: 0.5rem;
   margin-bottom: 1rem;
 }
+.dnb-radio > .dnb-form-status {
+  transform: translateY(0.25rem); /* 4/16 */
+}
 .dnb-radio-group {
   --radio-group-margin-bottom: 0.5rem;
   --radio-group-margin-right: 1rem;
@@ -5221,6 +5255,78 @@ html[data-whatinput=keyboard] .dnb-radio__focus {
 .dnb-skeleton .dnb-radio__input[disabled] ~ .dnb-radio__button {
   border-color: var(--skeleton-color);
 }
+.dnb-radio__input:checked ~ .dnb-radio__button, .dnb-radio__input[data-checked=true] ~ .dnb-radio__button {
+  background-color: var(--radio-color-background-on);
+  border-color: var(--radio-color-border-on);
+}
+.dnb-radio__input:checked ~ .dnb-radio__dot, .dnb-radio__input[data-checked=true] ~ .dnb-radio__dot {
+  opacity: 1;
+  transform: scale(1);
+}
+.dnb-radio__input:not(:checked):not([data-checked=true]) ~ .dnb-radio__dot {
+  opacity: 0;
+  transform: scale(0.8);
+}
+.dnb-radio__input:not(:checked):not([data-checked=true]) ~ .dnb-radio__button {
+  background-color: var(--radio-color-background-off);
+  border-color: var(--radio-color-border-off);
+}
+.dnb-radio__input[disabled]:checked ~ .dnb-radio__button, .dnb-radio__input[disabled][data-checked=true] ~ .dnb-radio__button {
+  border-color: var(--radio-color-border-on--disabled);
+}
+.dnb-radio__input[disabled]:checked ~ .dnb-radio__dot, .dnb-radio__input[disabled][data-checked=true] ~ .dnb-radio__dot {
+  background-color: var(--radio-color-dot-on--disabled);
+}
+.dnb-radio__input[disabled]:not(:checked):not([data-checked=true]) ~ .dnb-radio__button {
+  border-color: var(--radio-color-border-off--disabled);
+}
+.dnb-radio__input:not([disabled]):checked:active ~ .dnb-radio__button, .dnb-radio__input:not([disabled])[data-checked=true]:active ~ .dnb-radio__button {
+  border-color: var(--radio-color-border-on--active);
+}
+.dnb-radio__input:not([disabled]):checked:active ~ .dnb-radio__dot, .dnb-radio__input:not([disabled])[data-checked=true]:active ~ .dnb-radio__dot {
+  background-color: var(--radio-color-dot-on--active);
+}
+.dnb-radio__input:not([disabled]):not(:checked):not([data-checked=true]):active ~ .dnb-radio__button {
+  background-color: var(--radio-color-background-off--active);
+  border-color: var(--radio-color-border-off--active);
+}
+.dnb-radio__input:not([disabled]):not(:focus):checked:hover ~ .dnb-radio__dot, .dnb-radio__input:not([disabled]):not(:focus)[data-checked=true]:hover ~ .dnb-radio__dot {
+  background-color: var(--radio-color-dot-on--hover);
+}
+.dnb-radio__input:not([disabled]):not(:focus):not(:checked):not([data-checked=true]):hover ~ .dnb-radio__button {
+  background-color: var(--radio-color-background-off--hover);
+}
+html[data-whatinput=keyboard] .dnb-radio__input:not([disabled]):focus ~ .dnb-radio__button {
+  border: none;
+}
+.dnb-radio__input:not([disabled]):focus ~ .dnb-radio__focus, .dnb-radio__input:not([disabled]):active ~ .dnb-radio__focus {
+  display: block;
+}
+.dnb-radio__input:not([disabled]):not(:active):not(:hover):checked:focus ~ .dnb-radio__button, .dnb-radio__input:not([disabled]):not(:active):not(:hover)[data-checked=true]:focus ~ .dnb-radio__button {
+  background-color: var(--radio-color-background-on--focus);
+}
+html[data-whatinput=keyboard] .dnb-radio__input:not([disabled]):not(:checked):not([data-checked=true]):focus ~ .dnb-radio__button {
+  background-color: var(--radio-color-background-off--focus);
+}
+.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active) ~ .dnb-radio__button {
+  border: none;
+}
+.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active) ~ .dnb-radio__focus {
+  display: block;
+  --border-color: var(--radio-color-border-on--error);
+  --border-width: var(--focus-ring-width);
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+}
+.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active):not(:hover):checked ~ .dnb-radio__dot, .dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active):not(:hover)[data-checked=true] ~ .dnb-radio__dot {
+  background-color: var(--radio-color-dot-on--error);
+}
+.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active):checked:hover ~ .dnb-radio__dot, .dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active)[data-checked=true]:hover ~ .dnb-radio__dot {
+  background-color: var(--radio-color-dot-on--error-hover);
+}
+.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:checked):not([data-checked=true]):hover ~ .dnb-radio__button {
+  background-color: var(--radio-color-background-off--error);
+}
 
 /*
  * Section component