@helsenorge/designsystem-react 2.16.0 → 2.16.1
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,18 @@
|
|
|
1
|
+
## [2.16.0](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/branchCompare?baseVersion=GTv2.15.0&targetVersion=GTv2.16.0) (2023-02-15)
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
### Features
|
|
5
|
+
|
|
6
|
+
* tabell har mulighet for flere responsive visninger ([6b0f202](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/commit/6b0f202af5009f79d6c035aab16ff6ca7cf903bb)), closes [#288929](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/issues/288929)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Bug Fixes
|
|
10
|
+
|
|
11
|
+
* fixer bruk av Formgroup i storybook ([61bddf7](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/commit/61bddf795d86e56ada7d39de30127434745c4ed4)), closes [#292556](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/issues/292556)
|
|
12
|
+
* fjern klasse som ikke brukes ([8544a30](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/commit/8544a304383cac0b3b586bb74097ee64bb9e6dee)), closes [#294599](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/issues/294599)
|
|
13
|
+
* panelactionbtn er plassert i lik linje med datetime ([7b1fc4d](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/commit/7b1fc4d33ccc430dad760e7e0f3f2f051932c2d5)), closes [#292669](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/issues/292669)
|
|
14
|
+
* styling specificity ([cb35c03](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/commit/cb35c03e173b2ae6896844f2f1f370eca6659688)), closes [#292556](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/issues/292556)
|
|
15
|
+
|
|
1
16
|
## [2.15.0](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/branchCompare?baseVersion=GTv2.14.0&targetVersion=GTv2.15.0) (2023-02-09)
|
|
2
17
|
|
|
3
18
|
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import t from"react";import
|
|
1
|
+
import t from"react";import u from"classnames";import o from"./styles.module.scss";import{AnalyticsId as w}from"../../constants.js";import{S as B}from"../../Spacer.js";import"../Spacer/styles.module.scss";const D=c=>{const{format:n="formatted",boldColumn:a=n==="non-formatted"?"none":"first",description:d,separator:r=": ",term:l}=c,p=a==="first",f=a==="second",e=n==="non-formatted",C=u(o.duolist__dt,{[o["duolist__dt--bold"]]:p,[o["duolist__dt--non-formatted"]]:e}),_=u(o.duolist__dd,{[o["duolist__dd--bold"]]:f,[o["duolist__dd--non-formatted"]]:e}),s=()=>t.createElement(t.Fragment,null,t.createElement("dt",{"data-separator":e?r:void 0,className:C},l),t.createElement("dd",{className:_},d));return e?t.createElement("div",null,s()):t.createElement(t.Fragment,null,s())},L=c=>{const{boldColumn:n,border:a="no-border",descriptionWidth:d,label:r,format:l="formatted",separator:p,variant:f="normal",children:e,className:C,testId:_}=c,s=a==="border",b=f==="line",v=s&&(r||b),E=l==="non-formatted",F=u(o["duolist-wrapper"],{[o["duolist-wrapper--border"]]:s,[o["duolist-wrapper--extra-padding-top"]]:v},C),x=u(o.duolist,{[o["duolist--line"]]:b,[o["duolist--non-formatted"]]:E}),S=d?d+"%":"minmax(60%, 1fr)";return t.createElement("div",{className:F,"data-testid":_,"data-analyticsid":w.Duolist},r&&t.createElement(t.Fragment,null,r,t.createElement(B,null)),t.createElement("dl",{style:E?void 0:{gridTemplateColumns:`auto ${S}`},className:x},t.Children.map(e,m=>{var N,y,g;if(m===null||typeof m>"u")return;const i=m;if(i.type===D)return t.cloneElement(m,{boldColumn:(N=i.props.boldColumn)!=null?N:n,format:(y=i.props.format)!=null?y:l,separator:(g=i.props.separator)!=null?g:p})})))};export{L as Duolist,D as DuolistGroup,L as default};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../src/components/Duolist/Duolist.tsx"],"sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\n\nimport duolistStyles from './styles.module.scss';\nimport { AnalyticsId } from '../../constants';\nimport { TitleProps } from '../Title';\nimport Spacer from '../Spacer';\n\nexport type DuolistVariants = 'normal' | 'line';\nexport type BoldColumn = 'first' | 'second' | 'none';\nexport type Border = 'no-border' | 'border';\nexport type Formats = 'formatted' | 'non-formatted';\n\ninterface DuolistProps {\n /** Determines which column is bold */\n boldColumn?: BoldColumn;\n /** Label of the Duolist */\n border?: Border;\n /** Label of the Duolist */\n label?: TitleProps;\n /** Formatted or non-formatted visual variants */\n format?: Formats;\n /** Character separator for non-formatted format */\n separator?: string;\n /** Sets the visual variant of the Duolist. */\n variant?: DuolistVariants;\n /** Sets the content of the Duolist. */\n children: React.ReactNode;\n /** Adds custom classes to the element. */\n className?: string;\n /** Sets the data-testid attribute. */\n testId?: string;\n /** Width of the description column in percentage */\n descriptionWidth?: number;\n}\n\ninterface DuolistGroupProps {\n /** Determines which column is bold */\n boldColumn?: BoldColumn;\n /** Sets content of the <dd> tag. */\n description: React.ReactNode;\n /** Formatted or non-formatted visual variants */\n format?: Formats;\n /** Character separator for non-formatted format */\n separator?: string;\n /** Sets content of the <dt> tag. */\n term: React.ReactNode;\n}\n\nexport const DuolistGroup: React.FC<DuolistGroupProps> = props => {\n const { format = 'formatted', boldColumn = format === 'non-formatted' ? 'none' : 'first', description, separator = ': ', term } = props;\n\n const firstBold = boldColumn === 'first';\n const secondBold = boldColumn === 'second';\n const nonFormatted = format === 'non-formatted';\n\n const dtClassNames = classNames(duolistStyles['duolist__dt'], {\n [duolistStyles['duolist__dt--bold']]: firstBold,\n [duolistStyles['duolist__dt--non-formatted']]: nonFormatted,\n });\n const ddClassNames = classNames(duolistStyles['duolist__dd'], {\n [duolistStyles['duolist__dd--bold']]: secondBold,\n [duolistStyles['duolist__dd--non-formatted']]: nonFormatted,\n });\n\n const renderContent = () => {\n return (\n <>\n <dt data-separator={nonFormatted ? separator : undefined} className={dtClassNames}>\n {term}\n </dt>\n <dd className={ddClassNames}>{description}</dd>\n </>\n );\n };\n\n return nonFormatted ? <div
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../src/components/Duolist/Duolist.tsx"],"sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\n\nimport duolistStyles from './styles.module.scss';\nimport { AnalyticsId } from '../../constants';\nimport { TitleProps } from '../Title';\nimport Spacer from '../Spacer';\n\nexport type DuolistVariants = 'normal' | 'line';\nexport type BoldColumn = 'first' | 'second' | 'none';\nexport type Border = 'no-border' | 'border';\nexport type Formats = 'formatted' | 'non-formatted';\n\ninterface DuolistProps {\n /** Determines which column is bold */\n boldColumn?: BoldColumn;\n /** Label of the Duolist */\n border?: Border;\n /** Label of the Duolist */\n label?: TitleProps;\n /** Formatted or non-formatted visual variants */\n format?: Formats;\n /** Character separator for non-formatted format */\n separator?: string;\n /** Sets the visual variant of the Duolist. */\n variant?: DuolistVariants;\n /** Sets the content of the Duolist. */\n children: React.ReactNode;\n /** Adds custom classes to the element. */\n className?: string;\n /** Sets the data-testid attribute. */\n testId?: string;\n /** Width of the description column in percentage */\n descriptionWidth?: number;\n}\n\ninterface DuolistGroupProps {\n /** Determines which column is bold */\n boldColumn?: BoldColumn;\n /** Sets content of the <dd> tag. */\n description: React.ReactNode;\n /** Formatted or non-formatted visual variants */\n format?: Formats;\n /** Character separator for non-formatted format */\n separator?: string;\n /** Sets content of the <dt> tag. */\n term: React.ReactNode;\n}\n\nexport const DuolistGroup: React.FC<DuolistGroupProps> = props => {\n const { format = 'formatted', boldColumn = format === 'non-formatted' ? 'none' : 'first', description, separator = ': ', term } = props;\n\n const firstBold = boldColumn === 'first';\n const secondBold = boldColumn === 'second';\n const nonFormatted = format === 'non-formatted';\n\n const dtClassNames = classNames(duolistStyles['duolist__dt'], {\n [duolistStyles['duolist__dt--bold']]: firstBold,\n [duolistStyles['duolist__dt--non-formatted']]: nonFormatted,\n });\n const ddClassNames = classNames(duolistStyles['duolist__dd'], {\n [duolistStyles['duolist__dd--bold']]: secondBold,\n [duolistStyles['duolist__dd--non-formatted']]: nonFormatted,\n });\n\n const renderContent = () => {\n return (\n <>\n <dt data-separator={nonFormatted ? separator : undefined} className={dtClassNames}>\n {term}\n </dt>\n <dd className={ddClassNames}>{description}</dd>\n </>\n );\n };\n\n return nonFormatted ? <div>{renderContent()}</div> : <>{renderContent()}</>;\n};\n\nexport const Duolist: React.FC<DuolistProps> = props => {\n const {\n boldColumn,\n border = 'no-border',\n descriptionWidth,\n label,\n format = 'formatted',\n separator,\n variant = 'normal',\n children,\n className,\n testId,\n } = props;\n\n const hasBorder = border === 'border';\n const hasLines = variant === 'line';\n const extraPaddingTop = hasBorder && (label || hasLines);\n const nonFormatted = format === 'non-formatted';\n\n const duolistWrapperClasses = classNames(\n duolistStyles['duolist-wrapper'],\n {\n [duolistStyles['duolist-wrapper--border']]: hasBorder,\n [duolistStyles['duolist-wrapper--extra-padding-top']]: extraPaddingTop,\n },\n className\n );\n\n const duolistClasses = classNames(duolistStyles.duolist, {\n [duolistStyles['duolist--line']]: hasLines,\n [duolistStyles['duolist--non-formatted']]: nonFormatted,\n });\n const duolistColumnStyle = descriptionWidth ? descriptionWidth + '%' : 'minmax(60%, 1fr)';\n\n return (\n <div className={duolistWrapperClasses} data-testid={testId} data-analyticsid={AnalyticsId.Duolist}>\n {label && (\n <>\n {label}\n <Spacer />\n </>\n )}\n <dl style={!nonFormatted ? { gridTemplateColumns: `auto ${duolistColumnStyle}` } : undefined} className={duolistClasses}>\n {React.Children.map(children, (child: React.ReactNode | React.ReactElement<DuolistGroupProps>) => {\n if (child === null || typeof child === 'undefined') return;\n const duolistGroup = child as React.ReactElement<DuolistGroupProps>;\n if (duolistGroup.type === DuolistGroup) {\n return React.cloneElement(child as React.ReactElement<DuolistGroupProps>, {\n boldColumn: duolistGroup.props.boldColumn ?? boldColumn,\n format: duolistGroup.props.format ?? format,\n separator: duolistGroup.props.separator ?? separator,\n });\n }\n })}\n </dl>\n </div>\n );\n};\n\nexport default Duolist;\n"],"names":["DuolistGroup","props","format","boldColumn","description","separator","term","firstBold","secondBold","nonFormatted","dtClassNames","classNames","duolistStyles","ddClassNames","renderContent","React","Duolist","border","descriptionWidth","label","variant","children","className","testId","hasBorder","hasLines","extraPaddingTop","duolistWrapperClasses","duolistClasses","duolistColumnStyle","AnalyticsId","Spacer","child","duolistGroup","_a","_b","_c"],"mappings":"6MAiDO,MAAMA,EAAqDC,GAAA,CAChE,KAAM,CAAE,OAAAC,EAAS,YAAa,WAAAC,EAAaD,IAAW,gBAAkB,OAAS,QAAS,YAAAE,EAAa,UAAAC,EAAY,KAAM,KAAAC,CAAA,EAASL,EAE5HM,EAAYJ,IAAe,QAC3BK,EAAaL,IAAe,SAC5BM,EAAeP,IAAW,gBAE1BQ,EAAeC,EAAWC,EAAc,YAAgB,CAC5D,CAACA,EAAc,sBAAuBL,EACtC,CAACK,EAAc,+BAAgCH,CAAA,CAChD,EACKI,EAAeF,EAAWC,EAAc,YAAgB,CAC5D,CAACA,EAAc,sBAAuBJ,EACtC,CAACI,EAAc,+BAAgCH,CAAA,CAChD,EAEKK,EAAgB,oCAGfC,EAAA,cAAA,KAAA,CAAG,iBAAgBN,EAAeJ,EAAY,OAAW,UAAWK,CAClE,EAAAJ,CACH,EACCS,EAAA,cAAA,KAAA,CAAG,UAAWF,CAAA,EAAeT,CAAY,CAC5C,EAIG,OAAAK,kBAAgB,MAAK,KAAAK,EAAgB,CAAA,EAASC,EAAA,cAAAA,EAAA,SAAA,KAAGD,EAAgB,CAAA,CAC1E,EAEaE,EAA2Cf,GAAA,CAChD,KAAA,CACJ,WAAAE,EACA,OAAAc,EAAS,YACT,iBAAAC,EACA,MAAAC,EACA,OAAAjB,EAAS,YACT,UAAAG,EACA,QAAAe,EAAU,SACV,SAAAC,EACA,UAAAC,EACA,OAAAC,CACE,EAAAtB,EAEEuB,EAAYP,IAAW,SACvBQ,EAAWL,IAAY,OACvBM,EAAkBF,IAAcL,GAASM,GACzChB,EAAeP,IAAW,gBAE1ByB,EAAwBhB,EAC5BC,EAAc,mBACd,CACE,CAACA,EAAc,4BAA6BY,EAC5C,CAACZ,EAAc,uCAAwCc,CACzD,EACAJ,CAAA,EAGIM,EAAiBjB,EAAWC,EAAc,QAAS,CACvD,CAACA,EAAc,kBAAmBa,EAClC,CAACb,EAAc,2BAA4BH,CAAA,CAC5C,EACKoB,EAAqBX,EAAmBA,EAAmB,IAAM,mBAEvE,OACGH,EAAA,cAAA,MAAA,CAAI,UAAWY,EAAuB,cAAaJ,EAAQ,mBAAkBO,EAAY,OAAA,EACvFX,GAEIJ,EAAA,cAAAA,EAAA,SAAA,KAAAI,kBACAY,EAAO,IAAA,CACV,EAEDhB,EAAA,cAAA,KAAA,CAAG,MAAQN,EAAuE,OAAxD,CAAE,oBAAqB,QAAQoB,GAAyB,EAAW,UAAWD,CAAA,EACtGb,EAAM,SAAS,IAAIM,EAAWW,GAAmE,WAC5F,GAAAA,IAAU,MAAQ,OAAOA,EAAU,IAAa,OACpD,MAAMC,EAAeD,EACjB,GAAAC,EAAa,OAASjC,EACjB,OAAAe,EAAM,aAAaiB,EAAgD,CACxE,YAAYE,EAAAD,EAAa,MAAM,aAAnB,KAAAC,EAAiC/B,EAC7C,QAAQgC,EAAAF,EAAa,MAAM,SAAnB,KAAAE,EAA6BjC,EACrC,WAAWkC,EAAAH,EAAa,MAAM,YAAnB,KAAAG,EAAgC/B,CAAA,CAC5C,CAEJ,CAAA,CACH,CACF,CAEJ"}
|
package/package.json
CHANGED