@helsenorge/designsystem-react 4.2.2 → 4.2.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -1,3 +1,11 @@
1
+ ## [4.2.2](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv4.2.1&targetVersion=GTv4.2.2) (2023-06-28)
2
+
3
+ ### Bug Fixes
4
+
5
+ - checkbox og radiobutton sine refs merges riktig
6
+ ([7fe16a6](https://github.com/helsenorge/designsystem/commit/7fe16a632e9a5f905474cdaa62316d2acb350ebe)), closes
7
+ [#304617](https://github.com/helsenorge/designsystem/issues/304617) [#305272](https://github.com/helsenorge/designsystem/issues/305272)
8
+
1
9
  ## [4.2.1](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv4.2.0&targetVersion=GTv4.2.1) (2023-06-26)
2
10
 
3
11
  ### Bug Fixes
@@ -773,12 +781,12 @@
773
781
 
774
782
  ### Bug Fixes
775
783
 
776
- - panel har avstand fra tittel til badge
777
- ([09034c4](https://github.com/helsenorge/designsystem/commit/09034c4844408c7cfe8f65d7a1a0d82a7828c2ef)), closes
778
- [#282359](https://github.com/helsenorge/designsystem/issues/282359)
779
784
  - økt kontrast på understreking av lenker
780
785
  ([50b7fa4](https://github.com/helsenorge/designsystem/commit/50b7fa47fb44cb7d75fb877bd53e2309b35e1e21)), closes
781
786
  [#229049](https://github.com/helsenorge/designsystem/issues/229049)
787
+ - panel har avstand fra tittel til badge
788
+ ([09034c4](https://github.com/helsenorge/designsystem/commit/09034c4844408c7cfe8f65d7a1a0d82a7828c2ef)), closes
789
+ [#282359](https://github.com/helsenorge/designsystem/issues/282359)
782
790
 
783
791
  ## [1.2.2](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv1.2.1&targetVersion=GTv1.2.2) (2022-08-31)
784
792
 
package/Label.js CHANGED
@@ -1,2 +1,2 @@
1
- import e from"react";import F from"classnames";import{AnalyticsId as S,FormMode as f}from"./constants.js";import{S as h}from"./Spacer.js";import r from"./components/Label/styles.module.scss";import{isComponent as u}from"./utils/component.js";import{S as R}from"./StatusDot.js";const z=({className:t,id:a,mode:n,sublabelTexts:l,testId:s})=>{const o=p=>l&&l.map((i,E)=>{const b=F(r.label,r["label--sublabel"],{[r["label--semibold"]]:i.type==="semibold",[r["label--on-dark"]]:n===f.ondark});return p===i.hideFromScreenReader&&e.createElement("span",{className:b,key:E},i.text)}),m=o(),c=o(!0);return e.createElement(e.Fragment,null,e.createElement(h,{size:"3xs"}),m&&e.createElement("div",{className:t,id:a,"data-testid":s,"data-analyticsid":S.Sublabel},m),c&&e.createElement("div",{className:t,"data-testid":s},c))},j=t=>{let a="";return u(t,d)&&t.props.labelTexts.forEach(n=>{a+=n.hideFromScreenReader?"":n.text}),a},q=(t,a,n,l)=>e.createElement(e.Fragment,null,t&&u(t,d)?e.cloneElement(t,{htmlFor:a,mode:n,disabled:l}):typeof t=="string"&&e.createElement(d,{labelTexts:[{text:t,type:"semibold"}],htmlFor:a,mode:n,disabled:l})),B=(t,a,n,l,s,o,m,c,p)=>e.createElement(e.Fragment,null,t&&u(t,d)?e.cloneElement(t,{htmlFor:n,mode:l,children:a,disabled:s,labelClassName:o,labelTextClassName:m,sublabelWrapperClassName:c,sublabel:p?void 0:t.props.sublabel,statusDot:p?void 0:t.props.statusDot}):typeof t=="string"&&e.createElement(d,{labelTexts:[{text:t}],htmlFor:n,mode:l,disabled:s,labelClassName:o,labelTextClassName:m,sublabelWrapperClassName:c},a)),d=({afterLabelChildren:t,children:a,className:n,disabled:l,htmlFor:s,labelClassName:o,labelTextClassName:m,labelId:c,labelTexts:p,mode:i=f.onwhite,statusDot:E,sublabel:b,sublabelWrapperClassName:g,testId:k})=>{const v=a&&typeof a<"u",L=F(r["label-wrapper"],{[r["label-wrapper--no-bottom-margin"]]:v,[r["label-wrapper--after-label-children"]]:t},n),w=()=>p.map((y,x)=>{const N=F(r.label,{[r["label--semibold"]]:y.type==="semibold",[r["label--on-dark"]]:i===f.ondark,[r["label--disabled"]]:l},m);return e.createElement("span",{"aria-hidden":y.hideFromScreenReader,className:N,key:x},y.text)});return e.createElement("div",{className:L},e.createElement("div",{className:r["label-wrapper__inner"]},e.createElement("label",{className:o,id:c,htmlFor:s,"data-testid":k,"data-analyticsid":S.Label},e.createElement("span",{className:r["label-content-wrapper"]},a,e.createElement("span",null,w()))),e.createElement("div",{className:g},b&&u(b,z)&&e.cloneElement(b,{mode:i}),E&&u(E,R)&&e.createElement(e.Fragment,null,e.createElement(h,{size:"3xs"}),e.cloneElement(E,{mode:i===f.ondark?"ondark":"onwhite"})))),t&&e.createElement("div",{className:r["after-label-children"]},t))},C=d;export{C as L,z as S,q as a,j as g,B as r};
1
+ import e from"react";import y from"classnames";import{AnalyticsId as S,FormMode as f}from"./constants.js";import{S as h}from"./Spacer.js";import r from"./components/Label/styles.module.scss";import{isComponent as u}from"./utils/component.js";import{S as R}from"./StatusDot.js";const z=({className:t,id:a,mode:n,sublabelTexts:l,testId:s})=>{const o=p=>l&&l.map((i,E)=>{const b=y(r.label,r["label--sublabel"],{[r["label--semibold"]]:i.type==="semibold",[r["label--on-dark"]]:n===f.ondark});return p===i.hideFromScreenReader&&e.createElement("span",{className:b,key:E},i.text)}),m=o(),c=o(!0);return e.createElement(e.Fragment,null,e.createElement(h,{size:"3xs"}),m&&e.createElement("div",{className:t,id:a,"data-testid":s,"data-analyticsid":S.Sublabel},m),c&&e.createElement("div",{className:t,"data-testid":s},c))},$=t=>{let a="";return u(t,d)&&t.props.labelTexts.forEach(n=>{a+=n.hideFromScreenReader?"":n.text}),a},j=(t,a,n,l)=>e.createElement(e.Fragment,null,t&&u(t,d)?e.cloneElement(t,{htmlFor:a,mode:n,disabled:l}):typeof t=="string"&&e.createElement(d,{labelTexts:[{text:t,type:"semibold"}],htmlFor:a,mode:n,disabled:l})),q=(t,a,n,l,s,o,m,c,p)=>e.createElement(e.Fragment,null,t&&u(t,d)?e.cloneElement(t,{htmlFor:n,mode:l,children:a,disabled:s,labelClassName:y(o,t.props.labelClassName),labelTextClassName:m,sublabelWrapperClassName:c,sublabel:p?void 0:t.props.sublabel,statusDot:p?void 0:t.props.statusDot}):typeof t=="string"&&e.createElement(d,{labelTexts:[{text:t}],htmlFor:n,mode:l,disabled:s,labelClassName:o,labelTextClassName:m,sublabelWrapperClassName:c},a)),d=({afterLabelChildren:t,children:a,className:n,disabled:l,htmlFor:s,labelClassName:o,labelTextClassName:m,labelId:c,labelTexts:p,mode:i=f.onwhite,statusDot:E,sublabel:b,sublabelWrapperClassName:g,testId:k})=>{const v=a&&typeof a<"u",L=y(r["label-wrapper"],{[r["label-wrapper--no-bottom-margin"]]:v,[r["label-wrapper--after-label-children"]]:t},n),w=()=>p.map((F,N)=>{const x=y(r.label,{[r["label--semibold"]]:F.type==="semibold",[r["label--on-dark"]]:i===f.ondark,[r["label--disabled"]]:l},m);return e.createElement("span",{"aria-hidden":F.hideFromScreenReader,className:x,key:N},F.text)});return e.createElement("div",{className:L},e.createElement("div",{className:r["label-wrapper__inner"]},e.createElement("label",{className:o,id:c,htmlFor:s,"data-testid":k,"data-analyticsid":S.Label},e.createElement("span",{className:r["label-content-wrapper"]},a,e.createElement("span",null,w()))),e.createElement("div",{className:g},b&&u(b,z)&&e.cloneElement(b,{mode:i}),E&&u(E,R)&&e.createElement(e.Fragment,null,e.createElement(h,{size:"3xs"}),e.cloneElement(E,{mode:i===f.ondark?"ondark":"onwhite"})))),t&&e.createElement("div",{className:r["after-label-children"]},t))},B=d;export{B as L,z as S,j as a,$ as g,q as r};
2
2
  //# sourceMappingURL=Label.js.map
package/Label.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Label.js","sources":["../src/components/Label/SubLabel.tsx","../src/components/Label/Label.tsx"],"sourcesContent":["import React from 'react';\n\nimport cn from 'classnames';\n\nimport { LabelText } from './Label';\nimport { AnalyticsId, FormMode } from '../../constants';\nimport Spacer from '../Spacer';\n\nimport styles from './styles.module.scss';\n\nexport interface SublabelProps {\n /** Adds custom classes to the element. */\n className?: string;\n /** id that is placed on the wrapper */\n id: string;\n /** Array of sublabel strings. Can be of type semibold or normal */\n mode?: FormMode;\n /** Array of sublabel strings. Can be of type semibold or normal */\n sublabelTexts?: LabelText[];\n /** Sets the data-testid attribute. */\n testId?: string;\n}\n\nexport const Sublabel: React.FC<SublabelProps> = ({ className, id, mode, sublabelTexts, testId }) => {\n const mapSublabels = (hideFromScreenReader?: boolean): React.ReactNode => {\n return (\n sublabelTexts &&\n sublabelTexts.map((sublabelText, index) => {\n const labelClasses = cn(styles.label, styles['label--sublabel'], {\n [styles['label--semibold']]: sublabelText.type === 'semibold',\n [styles['label--on-dark']]: mode === FormMode.ondark,\n });\n return (\n hideFromScreenReader === sublabelText.hideFromScreenReader && (\n <span className={labelClasses} key={index}>\n {sublabelText.text}\n </span>\n )\n );\n })\n );\n };\n\n const subLabels = mapSublabels();\n const ariaHiddenSublabels = mapSublabels(true);\n\n return (\n <>\n <Spacer size={'3xs'} />\n {subLabels && (\n <div className={className} id={id} data-testid={testId} data-analyticsid={AnalyticsId.Sublabel}>\n {subLabels}\n </div>\n )}\n {ariaHiddenSublabels && (\n <div className={className} data-testid={testId}>\n {ariaHiddenSublabels}\n </div>\n )}\n </>\n );\n};\n","import React, { FunctionComponent } from 'react';\n\nimport cn from 'classnames';\n\nimport { Sublabel, SublabelProps } from './SubLabel';\nimport { AnalyticsId, FormMode } from '../../constants';\nimport { isComponent } from '../../utils/component';\nimport Spacer from '../Spacer';\nimport StatusDot, { StatusDotProps } from '../StatusDot';\n\nimport styles from './styles.module.scss';\n\nexport type LabelText = {\n hideFromScreenReader?: boolean;\n text: string;\n type?: 'semibold' | 'normal';\n};\n\nexport interface LabelProps extends Pick<React.InputHTMLAttributes<HTMLLabelElement>, 'disabled'> {\n /** Component shown after label - discourage use of this */\n afterLabelChildren?: React.ReactNode;\n /** Adds custom classes to the element. */\n children?: React.ReactNode;\n /** Adds custom classes to the label tag. */\n labelClassName?: string;\n /** Adds custom classes to the label text. */\n labelTextClassName?: string;\n /** Adds custom classes to the element. */\n className?: string;\n /** Id that is put on the \"for\" attribute of the label */\n htmlFor?: string;\n /** Id som plasseres på <label/> */\n labelId?: string;\n /** Array of main label strings. Can be of type semibold or normal */\n labelTexts: LabelText[];\n /** Array of sublabel strings. Can be of type semibold or normal */\n mode?: keyof typeof FormMode;\n /** StatusDot placed underneath the last sublabel */\n statusDot?: React.ReactNode;\n /** Sublabel component */\n sublabel?: React.ReactNode;\n /** Adds custom classes to the div wrapping the sublabels. */\n sublabelWrapperClassName?: string;\n /** Sets the data-testid attribute. */\n testId?: string;\n}\n\nexport const getLabelText = (label: React.ReactNode): string => {\n let allLabelText = '';\n\n if (isComponent<LabelProps>(label, Label)) {\n label.props.labelTexts.forEach(labelText => {\n allLabelText += !labelText.hideFromScreenReader ? labelText.text : '';\n });\n }\n\n return allLabelText;\n};\n\nexport const renderLabel = (label: React.ReactNode, inputId: string, mode: FormMode, disabled?: boolean): React.ReactNode => {\n return (\n <>\n {label && isComponent<LabelProps>(label, Label)\n ? React.cloneElement(label, {\n htmlFor: inputId,\n mode: mode,\n disabled,\n })\n : typeof label === 'string' && (\n <Label labelTexts={[{ text: label, type: 'semibold' }]} htmlFor={inputId} mode={mode} disabled={disabled} />\n )}\n </>\n );\n};\n\nexport const renderLabelAsParent = (\n label: React.ReactNode,\n children: React.ReactNode,\n inputId: string,\n mode: FormMode,\n disabled?: boolean,\n labelClassName?: string,\n labelTextClassName?: string,\n sublabelWrapperClassName?: string,\n bigform?: boolean\n): React.ReactNode => {\n return (\n <>\n {label && isComponent<LabelProps>(label, Label)\n ? React.cloneElement(label, {\n htmlFor: inputId,\n mode: mode,\n children: children,\n disabled,\n labelClassName: labelClassName,\n labelTextClassName: labelTextClassName,\n sublabelWrapperClassName: sublabelWrapperClassName,\n sublabel: bigform ? undefined : label.props.sublabel,\n statusDot: bigform ? undefined : label.props.statusDot,\n })\n : typeof label === 'string' && (\n <Label\n labelTexts={[{ text: label }]}\n htmlFor={inputId}\n mode={mode}\n disabled={disabled}\n labelClassName={labelClassName}\n labelTextClassName={labelTextClassName}\n sublabelWrapperClassName={sublabelWrapperClassName}\n >\n {children}\n </Label>\n )}\n </>\n );\n};\n\nconst Label: FunctionComponent<LabelProps> = ({\n afterLabelChildren,\n children,\n className,\n disabled,\n htmlFor,\n labelClassName,\n labelTextClassName,\n labelId,\n labelTexts,\n mode = FormMode.onwhite,\n statusDot,\n sublabel,\n sublabelWrapperClassName,\n testId,\n}) => {\n const hasChildren = children && typeof children !== 'undefined';\n const labelWrapperClasses = cn(\n styles['label-wrapper'],\n { [styles['label-wrapper--no-bottom-margin']]: hasChildren, [styles['label-wrapper--after-label-children']]: afterLabelChildren },\n className\n );\n\n const mapLabels = (): React.ReactNode => {\n return labelTexts.map((labelText, index) => {\n const labelClasses = cn(\n styles.label,\n {\n [styles['label--semibold']]: labelText.type === 'semibold',\n [styles['label--on-dark']]: mode === FormMode.ondark,\n [styles['label--disabled']]: disabled,\n },\n labelTextClassName\n );\n return (\n <span aria-hidden={labelText.hideFromScreenReader} className={labelClasses} key={index}>\n {labelText.text}\n </span>\n );\n });\n };\n\n return (\n <div className={labelWrapperClasses}>\n <div className={styles['label-wrapper__inner']}>\n <label className={labelClassName} id={labelId} htmlFor={htmlFor} data-testid={testId} data-analyticsid={AnalyticsId.Label}>\n <span className={styles['label-content-wrapper']}>\n {children}\n <span>{mapLabels()}</span>\n </span>\n </label>\n <div className={sublabelWrapperClassName}>\n {sublabel &&\n isComponent<SublabelProps>(sublabel, Sublabel) &&\n React.cloneElement(sublabel, {\n mode: mode as FormMode,\n })}\n {statusDot && isComponent<StatusDotProps>(statusDot, StatusDot) && (\n <>\n <Spacer size={'3xs'} />\n {React.cloneElement(statusDot, {\n mode: mode === FormMode.ondark ? 'ondark' : 'onwhite',\n })}\n </>\n )}\n </div>\n </div>\n {afterLabelChildren && <div className={styles['after-label-children']}>{afterLabelChildren}</div>}\n </div>\n );\n};\n\nexport default Label;\n"],"names":["Sublabel","className","id","mode","sublabelTexts","testId","mapSublabels","hideFromScreenReader","sublabelText","index","labelClasses","cn","styles","FormMode","React","subLabels","ariaHiddenSublabels","Spacer","AnalyticsId","getLabelText","label","allLabelText","isComponent","Label","labelText","renderLabel","inputId","disabled","renderLabelAsParent","children","labelClassName","labelTextClassName","sublabelWrapperClassName","bigform","afterLabelChildren","htmlFor","labelId","labelTexts","statusDot","sublabel","hasChildren","labelWrapperClasses","mapLabels","StatusDot","Label$1"],"mappings":"qRAuBa,MAAAA,EAAoC,CAAC,CAAE,UAAAC,EAAW,GAAAC,EAAI,KAAAC,EAAM,cAAAC,EAAe,OAAAC,KAAa,CAC7F,MAAAC,EAAgBC,GAElBH,GACAA,EAAc,IAAI,CAACI,EAAcC,IAAU,CACzC,MAAMC,EAAeC,EAAGC,EAAO,MAAOA,EAAO,iBAAiB,EAAG,CAC/D,CAACA,EAAO,iBAAiB,CAAC,EAAGJ,EAAa,OAAS,WACnD,CAACI,EAAO,gBAAgB,CAAC,EAAGT,IAASU,EAAS,MAAA,CAC/C,EAEC,OAAAN,IAAyBC,EAAa,sBACnCM,EAAA,cAAA,OAAA,CAAK,UAAWJ,EAAc,IAAKD,CACjC,EAAAD,EAAa,IAChB,CAAA,CAGL,EAICO,EAAYT,IACZU,EAAsBV,EAAa,EAAI,EAG3C,OAAAQ,EAAA,cAAAA,EAAA,SAAA,KACGA,EAAA,cAAAG,EAAA,CAAO,KAAM,KAAA,CAAO,EACpBF,GACCD,EAAA,cAAC,MAAI,CAAA,UAAAb,EAAsB,GAAAC,EAAQ,cAAaG,EAAQ,mBAAkBa,EAAY,QACnF,EAAAH,CACH,EAEDC,GACEF,EAAA,cAAA,MAAA,CAAI,UAAAb,EAAsB,cAAaI,CACrC,EAAAW,CACH,CAEJ,CAEJ,ECdaG,EAAgBC,GAAmC,CAC9D,IAAIC,EAAe,GAEf,OAAAC,EAAwBF,EAAOG,CAAK,GAChCH,EAAA,MAAM,WAAW,QAAqBI,GAAA,CAC1CH,GAAiBG,EAAU,qBAAwC,GAAjBA,EAAU,IAAO,CACpE,EAGIH,CACT,EAEaI,EAAc,CAACL,EAAwBM,EAAiBvB,EAAgBwB,IAEjFb,EAAA,cAAAA,EAAA,SAAA,KACGM,GAASE,EAAwBF,EAAOG,CAAK,EAC1CT,EAAM,aAAaM,EAAO,CACxB,QAASM,EACT,KAAAvB,EACA,SAAAwB,CAAA,CACD,EACD,OAAOP,GAAU,UACdN,EAAA,cAAAS,EAAA,CAAM,WAAY,CAAC,CAAE,KAAMH,EAAO,KAAM,WAAY,EAAG,QAASM,EAAS,KAAAvB,EAAY,SAAAwB,CAAoB,CAAA,CAElH,EAISC,EAAsB,CACjCR,EACAS,EACAH,EACAvB,EACAwB,EACAG,EACAC,EACAC,EACAC,IAGEnB,EAAA,cAAAA,EAAA,SAAA,KACGM,GAASE,EAAwBF,EAAOG,CAAK,EAC1CT,EAAM,aAAaM,EAAO,CACxB,QAASM,EACT,KAAAvB,EACA,SAAA0B,EACA,SAAAF,EACA,eAAAG,EACA,mBAAAC,EACA,yBAAAC,EACA,SAAUC,EAAU,OAAYb,EAAM,MAAM,SAC5C,UAAWa,EAAU,OAAYb,EAAM,MAAM,SAC9C,CAAA,EACD,OAAOA,GAAU,UACfN,EAAA,cAACS,EAAA,CACC,WAAY,CAAC,CAAE,KAAMH,EAAO,EAC5B,QAASM,EACT,KAAAvB,EACA,SAAAwB,EACA,eAAAG,EACA,mBAAAC,EACA,yBAAAC,CAAA,EAECH,CAAA,CAGX,EAIEN,EAAuC,CAAC,CAC5C,mBAAAW,EACA,SAAAL,EACA,UAAA5B,EACA,SAAA0B,EACA,QAAAQ,EACA,eAAAL,EACA,mBAAAC,EACA,QAAAK,EACA,WAAAC,EACA,KAAAlC,EAAOU,EAAS,QAChB,UAAAyB,EACA,SAAAC,EACA,yBAAAP,EACA,OAAA3B,CACF,IAAM,CACE,MAAAmC,EAAcX,GAAY,OAAOA,EAAa,IAC9CY,EAAsB9B,EAC1BC,EAAO,eAAe,EACtB,CAAE,CAACA,EAAO,iCAAiC,CAAC,EAAG4B,EAAa,CAAC5B,EAAO,qCAAqC,CAAC,EAAGsB,CAAmB,EAChIjC,CAAA,EAGIyC,EAAY,IACTL,EAAW,IAAI,CAACb,EAAWf,IAAU,CAC1C,MAAMC,EAAeC,EACnBC,EAAO,MACP,CACE,CAACA,EAAO,iBAAiB,CAAC,EAAGY,EAAU,OAAS,WAChD,CAACZ,EAAO,gBAAgB,CAAC,EAAGT,IAASU,EAAS,OAC9C,CAACD,EAAO,iBAAiB,CAAC,EAAGe,CAC/B,EACAI,CAAA,EAGA,OAAAjB,EAAA,cAAC,OAAK,CAAA,cAAaU,EAAU,qBAAsB,UAAWd,EAAc,IAAKD,CAC9E,EAAAe,EAAU,IACb,CAAA,CAEH,EAID,OAAAV,EAAA,cAAC,OAAI,UAAW2B,CAAA,kBACb,MAAI,CAAA,UAAW7B,EAAO,sBAAsB,CAAA,kBAC1C,QAAM,CAAA,UAAWkB,EAAgB,GAAIM,EAAS,QAAAD,EAAkB,cAAa9B,EAAQ,mBAAkBa,EAAY,KAClH,EAAAJ,EAAA,cAAC,QAAK,UAAWF,EAAO,uBAAuB,CAC5C,EAAAiB,kBACA,OAAM,KAAAa,EAAA,CAAY,CACrB,CACF,kBACC,MAAI,CAAA,UAAWV,GACbO,GACCjB,EAA2BiB,EAAUvC,CAAQ,GAC7Cc,EAAM,aAAayB,EAAU,CAC3B,KAAApC,CAAA,CACD,EACFmC,GAAahB,EAA4BgB,EAAWK,CAAS,GAE1D7B,EAAA,cAAAA,EAAA,SAAA,KAAAA,EAAA,cAACG,GAAO,KAAM,KAAA,CAAO,EACpBH,EAAM,aAAawB,EAAW,CAC7B,KAAMnC,IAASU,EAAS,OAAS,SAAW,SAC7C,CAAA,CACH,CAEJ,CACF,EACCqB,GAAuBpB,EAAA,cAAA,MAAA,CAAI,UAAWF,EAAO,sBAAsB,CAAA,EAAIsB,CAAmB,CAC7F,CAEJ,EAEAU,EAAerB"}
1
+ {"version":3,"file":"Label.js","sources":["../src/components/Label/SubLabel.tsx","../src/components/Label/Label.tsx"],"sourcesContent":["import React from 'react';\n\nimport cn from 'classnames';\n\nimport { LabelText } from './Label';\nimport { AnalyticsId, FormMode } from '../../constants';\nimport Spacer from '../Spacer';\n\nimport styles from './styles.module.scss';\n\nexport interface SublabelProps {\n /** Adds custom classes to the element. */\n className?: string;\n /** id that is placed on the wrapper */\n id: string;\n /** Array of sublabel strings. Can be of type semibold or normal */\n mode?: FormMode;\n /** Array of sublabel strings. Can be of type semibold or normal */\n sublabelTexts?: LabelText[];\n /** Sets the data-testid attribute. */\n testId?: string;\n}\n\nexport const Sublabel: React.FC<SublabelProps> = ({ className, id, mode, sublabelTexts, testId }) => {\n const mapSublabels = (hideFromScreenReader?: boolean): React.ReactNode => {\n return (\n sublabelTexts &&\n sublabelTexts.map((sublabelText, index) => {\n const labelClasses = cn(styles.label, styles['label--sublabel'], {\n [styles['label--semibold']]: sublabelText.type === 'semibold',\n [styles['label--on-dark']]: mode === FormMode.ondark,\n });\n return (\n hideFromScreenReader === sublabelText.hideFromScreenReader && (\n <span className={labelClasses} key={index}>\n {sublabelText.text}\n </span>\n )\n );\n })\n );\n };\n\n const subLabels = mapSublabels();\n const ariaHiddenSublabels = mapSublabels(true);\n\n return (\n <>\n <Spacer size={'3xs'} />\n {subLabels && (\n <div className={className} id={id} data-testid={testId} data-analyticsid={AnalyticsId.Sublabel}>\n {subLabels}\n </div>\n )}\n {ariaHiddenSublabels && (\n <div className={className} data-testid={testId}>\n {ariaHiddenSublabels}\n </div>\n )}\n </>\n );\n};\n","import React, { FunctionComponent } from 'react';\n\nimport cn from 'classnames';\n\nimport { Sublabel, SublabelProps } from './SubLabel';\nimport { AnalyticsId, FormMode } from '../../constants';\nimport { isComponent } from '../../utils/component';\nimport Spacer from '../Spacer';\nimport StatusDot, { StatusDotProps } from '../StatusDot';\n\nimport styles from './styles.module.scss';\n\nexport type LabelText = {\n hideFromScreenReader?: boolean;\n text: string;\n type?: 'semibold' | 'normal';\n};\n\nexport interface LabelProps extends Pick<React.InputHTMLAttributes<HTMLLabelElement>, 'disabled'> {\n /** Component shown after label - discourage use of this */\n afterLabelChildren?: React.ReactNode;\n /** Adds custom classes to the element. */\n children?: React.ReactNode;\n /** Adds custom classes to the label tag. */\n labelClassName?: string;\n /** Adds custom classes to the label text. */\n labelTextClassName?: string;\n /** Adds custom classes to the element. */\n className?: string;\n /** Id that is put on the \"for\" attribute of the label */\n htmlFor?: string;\n /** Id som plasseres på <label/> */\n labelId?: string;\n /** Array of main label strings. Can be of type semibold or normal */\n labelTexts: LabelText[];\n /** Array of sublabel strings. Can be of type semibold or normal */\n mode?: keyof typeof FormMode;\n /** StatusDot placed underneath the last sublabel */\n statusDot?: React.ReactNode;\n /** Sublabel component */\n sublabel?: React.ReactNode;\n /** Adds custom classes to the div wrapping the sublabels. */\n sublabelWrapperClassName?: string;\n /** Sets the data-testid attribute. */\n testId?: string;\n}\n\nexport const getLabelText = (label: React.ReactNode): string => {\n let allLabelText = '';\n\n if (isComponent<LabelProps>(label, Label)) {\n label.props.labelTexts.forEach(labelText => {\n allLabelText += !labelText.hideFromScreenReader ? labelText.text : '';\n });\n }\n\n return allLabelText;\n};\n\nexport const renderLabel = (label: React.ReactNode, inputId: string, mode: FormMode, disabled?: boolean): React.ReactNode => {\n return (\n <>\n {label && isComponent<LabelProps>(label, Label)\n ? React.cloneElement(label, {\n htmlFor: inputId,\n mode: mode,\n disabled,\n })\n : typeof label === 'string' && (\n <Label labelTexts={[{ text: label, type: 'semibold' }]} htmlFor={inputId} mode={mode} disabled={disabled} />\n )}\n </>\n );\n};\n\nexport const renderLabelAsParent = (\n label: React.ReactNode,\n children: React.ReactNode,\n inputId: string,\n mode: FormMode,\n disabled?: boolean,\n labelClassName?: string,\n labelTextClassName?: string,\n sublabelWrapperClassName?: string,\n bigform?: boolean\n): React.ReactNode => {\n return (\n <>\n {label && isComponent<LabelProps>(label, Label)\n ? React.cloneElement(label, {\n htmlFor: inputId,\n mode: mode,\n children: children,\n disabled,\n labelClassName: cn(labelClassName, label.props.labelClassName),\n labelTextClassName: labelTextClassName,\n sublabelWrapperClassName: sublabelWrapperClassName,\n sublabel: bigform ? undefined : label.props.sublabel,\n statusDot: bigform ? undefined : label.props.statusDot,\n })\n : typeof label === 'string' && (\n <Label\n labelTexts={[{ text: label }]}\n htmlFor={inputId}\n mode={mode}\n disabled={disabled}\n labelClassName={labelClassName}\n labelTextClassName={labelTextClassName}\n sublabelWrapperClassName={sublabelWrapperClassName}\n >\n {children}\n </Label>\n )}\n </>\n );\n};\n\nconst Label: FunctionComponent<LabelProps> = ({\n afterLabelChildren,\n children,\n className,\n disabled,\n htmlFor,\n labelClassName,\n labelTextClassName,\n labelId,\n labelTexts,\n mode = FormMode.onwhite,\n statusDot,\n sublabel,\n sublabelWrapperClassName,\n testId,\n}) => {\n const hasChildren = children && typeof children !== 'undefined';\n const labelWrapperClasses = cn(\n styles['label-wrapper'],\n { [styles['label-wrapper--no-bottom-margin']]: hasChildren, [styles['label-wrapper--after-label-children']]: afterLabelChildren },\n className\n );\n\n const mapLabels = (): React.ReactNode => {\n return labelTexts.map((labelText, index) => {\n const labelClasses = cn(\n styles.label,\n {\n [styles['label--semibold']]: labelText.type === 'semibold',\n [styles['label--on-dark']]: mode === FormMode.ondark,\n [styles['label--disabled']]: disabled,\n },\n labelTextClassName\n );\n return (\n <span aria-hidden={labelText.hideFromScreenReader} className={labelClasses} key={index}>\n {labelText.text}\n </span>\n );\n });\n };\n\n return (\n <div className={labelWrapperClasses}>\n <div className={styles['label-wrapper__inner']}>\n <label className={labelClassName} id={labelId} htmlFor={htmlFor} data-testid={testId} data-analyticsid={AnalyticsId.Label}>\n <span className={styles['label-content-wrapper']}>\n {children}\n <span>{mapLabels()}</span>\n </span>\n </label>\n <div className={sublabelWrapperClassName}>\n {sublabel &&\n isComponent<SublabelProps>(sublabel, Sublabel) &&\n React.cloneElement(sublabel, {\n mode: mode as FormMode,\n })}\n {statusDot && isComponent<StatusDotProps>(statusDot, StatusDot) && (\n <>\n <Spacer size={'3xs'} />\n {React.cloneElement(statusDot, {\n mode: mode === FormMode.ondark ? 'ondark' : 'onwhite',\n })}\n </>\n )}\n </div>\n </div>\n {afterLabelChildren && <div className={styles['after-label-children']}>{afterLabelChildren}</div>}\n </div>\n );\n};\n\nexport default Label;\n"],"names":["Sublabel","className","id","mode","sublabelTexts","testId","mapSublabels","hideFromScreenReader","sublabelText","index","labelClasses","cn","styles","FormMode","React","subLabels","ariaHiddenSublabels","Spacer","AnalyticsId","getLabelText","label","allLabelText","isComponent","Label","labelText","renderLabel","inputId","disabled","renderLabelAsParent","children","labelClassName","labelTextClassName","sublabelWrapperClassName","bigform","afterLabelChildren","htmlFor","labelId","labelTexts","statusDot","sublabel","hasChildren","labelWrapperClasses","mapLabels","StatusDot","Label$1"],"mappings":"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"}
package/package.json CHANGED
@@ -7,7 +7,7 @@
7
7
  "url": "https://github.com/helsenorge/designsystem"
8
8
  },
9
9
  "homepage": "https://helsenorge.design",
10
- "version": "4.2.2",
10
+ "version": "4.2.3",
11
11
  "author": "Helsenorge",
12
12
  "license": "MIT",
13
13
  "peerDependencies": {