@helsenorge/designsystem-react 5.2.0-beta.0 → 5.2.0
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 +7 -0
- package/Panel.js +1 -1
- package/Panel.js.map +1 -1
- package/StepButtons.js.map +1 -1
- package/components/Panel/Panel.d.ts.map +1 -1
- package/components/Step/Step.d.ts.map +1 -1
- package/components/Step/index.js +1 -1
- package/components/Step/index.js.map +1 -1
- package/components/Step/styles.module.scss +1 -3
- package/components/Step/styles.module.scss.d.ts +1 -1
- package/components/StepButtons/StepButtons.d.ts +1 -1
- package/components/StepButtons/StepButtons.d.ts.map +1 -1
- package/components/StepButtons/styles.module.scss +2 -2
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,10 @@
|
|
|
1
|
+
## 5.2.0-beta.0 (2023-11-02)
|
|
2
|
+
|
|
3
|
+
### Bug Fixes
|
|
4
|
+
|
|
5
|
+
- eksporter StepProps ([eb90925](https://github.com/helsenorge/designsystem/commit/eb90925e0eeb25da6bab1bed83765399b9a0c540)), closes
|
|
6
|
+
[#310680](https://github.com/helsenorge/designsystem/issues/310680)
|
|
7
|
+
|
|
1
8
|
## [5.1.4](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv5.1.3&targetVersion=GTv5.1.4) (2023-11-01)
|
|
2
9
|
|
|
3
10
|
### Bug Fixes
|
package/Panel.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import t from"react";import o from"classnames";import{AnalyticsId as
|
|
1
|
+
import t from"react";import o from"classnames";import{AnalyticsId as re,IconSize as w}from"./constants.js";import{useExpand as se}from"./hooks/useExpand.js";import{useUuid as $}from"./hooks/useUuid.js";import{palette as z}from"./theme/palette.js";import{getAriaLabelAttributes as ie}from"./utils/accessibility.js";import{B as ce}from"./Badge.js";import{B as j}from"./Button.js";import{Icon as _}from"./components/Icons/Icon.js";import pe from"./components/Icons/AlertSignFill.js";import me from"./components/Icons/ArrowRight.js";import de from"./components/Icons/Calendar.js";import ue from"./components/Icons/ChevronDown.js";import _e from"./components/Icons/ChevronUp.js";import ye from"./components/Icons/Pencil.js";import fe from"./components/Icons/Watch.js";import{T as be}from"./Title.js";import e from"./components/Panel/styles.module.scss";var Ee=(a=>(a.normal="normal",a.new="new",a.error="error",a.draft="draft",a))(Ee||{}),ge=(a=>(a.fill="fill",a.white="white",a.stroke="stroke",a.line="line",a))(ge||{}),ve=(a=>(a.layout1="layout1",a.layout2="layout2",a.layout3a="layout3a",a.layout3b="layout3b",a.layout3c="layout3c",a))(ve||{});const he=({status:a,statusMessage:r})=>{const E=()=>a==="error"?{color:z.cherry500,svgIcon:pe}:{color:z.black,svgIcon:ye},s=o(e["status-message"],{[e["status-message--new"]]:a==="new"});return(a==="error"||a==="draft")&&r?t.createElement("div",{className:s,"data-testid":"display-status"},t.createElement(_,{...E(),size:w.XSmall})," ",t.createElement("span",null,r)):null},Ce=({date:a,time:r})=>a||r?t.createElement("div",{className:e["datetime-container"],"data-testid":"datetime"},a&&t.createElement("div",{className:e["datetime-container__icon"]},t.createElement(_,{svgIcon:de,size:w.XSmall}),t.createElement("span",null,a)),r&&t.createElement("div",{className:e["datetime-container__icon"]},t.createElement(_,{svgIcon:fe,size:w.XSmall}),t.createElement("span",null,r))):null,Ie=t.forwardRef(function(r,E){const{children:s,contentA:N,contentB:l,prioritiseMetaDataInContentB:d,className:W,testId:X,title:g,titleHtmlMarkup:F="h2",url:y,target:H="_self",icon:i,iconRight:B=!1,variant:c="fill",status:p="normal",statusMessage:v,buttonText:x="Se detaljer",buttonTextClose:U="Skjul detaljer",buttonAriaLabelledById:k,buttonAriaLabel:L,layout:n="layout2",containerAsButton:h=!1,date:A,time:M,noTopBorder:O,buttonOnClick:u,buttonHtmlMarkup:q="a",expanded:G=!1,onExpand:D,renderChildrenWhenClosed:J=!1,focusable:K=!1}=r,[m,Q]=se(G,D),C=$(),f=$(),S=v&&p==="new",b=["layout3a".toString(),"layout3b".toString(),"layout3c".toString()].includes(n),Y=o(e["panel-wrapper"],W),Z=o(e.panel,{[e["panel--fill"]]:c==="fill",[e["panel--stroke"]]:c==="stroke",[e["panel--white"]]:c==="white",[e["panel--line"]]:c==="line",[e["panel--no-top-border"]]:c==="line"&&O,[e["panel--selected"]]:m,[e["panel--new"]]:p==="new",[e["panel--draft"]]:p==="draft",[e["panel--error"]]:p==="error",[e["panel--status"]]:p&&p!=="normal",[e["panel--with-icon"]]:i,[e["panel--button"]]:h,[e["panel--clickable"]]:s||y||D||u||h}),P=o({[e.panel__container]:n==="layout2"&&l,[e["panel__container--layout1"]]:n==="layout1"&&l,[e["panel__container--layout2"]]:n==="layout2"&&l,[e["panel__container--layout3"]]:b&&l,[e["panel__container--grow"]]:i,[e["panel__container--prioritiseMetaDataInContentB"]]:d}),V=o({[e["panel-content-a"]]:n==="layout2",[e["panel-content-a--layout3a"]]:n==="layout3a",[e["panel-content-a--layout3b"]]:n==="layout3b",[e["panel-content-a--layout3c"]]:n==="layout3c",[e["panel-content-a--non-prioritiseMetaDataInContentB"]]:!d}),ee=o({[e["panel__content-right--layout1"]]:l&&n==="layout1",[e["panel__content-right--layout2"]]:l&&n==="layout2",[e["panel__content-right--layout3"]]:l&&b,[e["panel__content-right--layout3a"]]:l&&n==="layout3a",[e["panel__content-right--layout3b"]]:l&&n==="layout3b",[e["panel__content-right--layout3c"]]:l&&n==="layout3c",[e["panel__content-right--prioritiseMetaDataInContentB"]]:d}),te=o(e["panel-content-b"],{[e["panel-content-b--layout1"]]:n==="layout1",[e["panel-content-b--layout2"]]:n==="layout2",[e["panel-content-b--layout3"]]:b,[e["panel-content-b--prioritiseMetaDataInContentB"]]:d}),ae=o(e["panel-content-a__title"],{[e["panel-content-a__title--badge"]]:S}),ne=()=>{const I=ie({label:L,id:k&&`${f} ${k}`||g&&C&&`${f} ${C}`,prefer:"label"}),R={onClick:u||(()=>Q(!m)),className:h?e.panel__expand:void 0,variant:"borderless",ellipsis:!0,...I};return s?t.createElement(j,{testId:"expand","aria-expanded":m,...R},t.createElement("span",{id:f},m?U:x),t.createElement(_,{svgIcon:m?_e:ue})):t.createElement(j,{testId:"url",htmlMarkup:q,href:y,target:H,...R},t.createElement("span",{id:f},x),t.createElement(_,{svgIcon:me}))},le=o(e["panel__btn-container"],{[e["panel__btn-container--layout3"]]:b,[e["panel__btn-container--no-content-b"]]:!l,[e["panel__btn-container--padding-top"]]:N||l}),oe=()=>{if(!s||!J&&!m)return null;const I=o(e["panel-details"],{[e["panel-details--open"]]:m,[e["panel-details--line"]]:c==="line",[e["panel-details--white"]]:c==="white",[e["panel-details--with-icon"]]:i});return t.createElement("div",{className:I,"data-testid":"panel-details"},t.createElement("div",null,s))},T=t.createElement("div",{className:ee},l&&t.createElement("div",{className:te},l),(s||y||A||M||u)&&t.createElement("div",{className:le},t.createElement(Ce,{date:A,time:M}),(s||y||u)&&t.createElement("div",{className:e["panel__details-btn"]},ne())));return t.createElement("div",{tabIndex:K?-1:void 0,ref:E,"data-testid":X,className:Y,"data-analyticsid":re.Panel},t.createElement("div",{className:Z},i&&!B&&t.createElement("div",{className:e.panel__icon},i),t.createElement("div",{className:P},d&&T,t.createElement("div",{className:V},t.createElement(he,{status:p,statusMessage:v}),g&&t.createElement("div",{className:e["panel-content-a__title-container"]},t.createElement(be,{appearance:"title3",htmlMarkup:F,id:C,className:ae},g),S&&t.createElement("div",{className:e.panel__badge},t.createElement(ce,{color:"blueberry",testId:"badge-status"},v))),N),!d&&T),i&&B&&t.createElement("div",{className:e["panel__icon--right"]},i)),oe())}),Le=Ie;export{Le as P,Ee as a,ge as b,ve as c};
|
|
2
2
|
//# sourceMappingURL=Panel.js.map
|
package/Panel.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Panel.js","sources":["../src/components/Panel/Panel.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnchorTarget, AnalyticsId } from '../../constants';\nimport { useExpand } from '../../hooks/useExpand';\nimport { useUuid } from '../../hooks/useUuid';\nimport { palette } from '../../theme/palette';\nimport { AriaLabelAttributes, getAriaLabelAttributes } from '../../utils/accessibility';\nimport Badge from '../Badge';\nimport Button, { ButtonProps, ButtonTags } from '../Button';\nimport Icon, { IconSize, SvgPathProps } from '../Icons';\nimport AlertSignFill from '../Icons/AlertSignFill';\nimport ArrowRight from '../Icons/ArrowRight';\nimport Calendar from '../Icons/Calendar';\nimport ChevronDown from '../Icons/ChevronDown';\nimport ChevronUp from '../Icons/ChevronUp';\nimport Pencil from '../Icons/Pencil';\nimport Watch from '../Icons/Watch';\nimport Title, { TitleTags } from '../Title';\n\nimport panelStyles from './styles.module.scss';\n\nexport enum PanelStatus {\n normal = 'normal',\n new = 'new',\n error = 'error',\n draft = 'draft',\n}\n\nexport enum PanelVariant {\n fill = 'fill',\n white = 'white',\n stroke = 'stroke',\n line = 'line',\n}\n\nexport enum PanelLayout {\n layout1 = 'layout1',\n layout2 = 'layout2',\n layout3a = 'layout3a',\n layout3b = 'layout3b',\n layout3c = 'layout3c',\n}\n\nexport interface PanelProps {\n children?: React.ReactNode;\n /** Title of the panel */\n title?: string;\n /** Changes the underlying element of the title. Default: h2 */\n titleHtmlMarkup?: TitleTags;\n /** Adds custom classes to the element. */\n className?: string;\n /** Sets the data-testid attribute. */\n testId?: string;\n /** Displays a status on the left side: defualt normal */\n status?: keyof typeof PanelStatus;\n /** Displayed on top of the panel with a status icon */\n statusMessage?: string;\n /** Changes the visual representation of the panel. */\n variant?: keyof typeof PanelVariant;\n /** Url to details, renders as a button with anchor tag */\n url?: string;\n /** target used in the button: default is _self */\n target?: AnchorTarget;\n /** Icon displayed in title */\n icon?: React.ReactNode;\n /** Display icon on right */\n iconRight?: boolean;\n /** Panel section A content */\n contentA?: React.ReactNode | string;\n /** Panel section B content*/\n contentB?: React.ReactNode | string;\n /** A version of panel that prioritises content-B visually and audibly */\n prioritiseMetaDataInContentB?: boolean;\n /** Panel button text */\n buttonText?: string;\n /** Panel button close text */\n buttonTextClose?: string;\n /** HTML markup for panel button. Default: a */\n buttonHtmlMarkup?: ButtonTags;\n /** Callback when panel button is clicked */\n buttonOnClick?: ButtonProps['onClick'];\n /** Panel button is aria-labelledby the text in the button itself + the element set in buttonAriaLabelledById. Default: auto-generated id for title (if title is set). */\n buttonAriaLabelledById?: string;\n /** Panel button aria label */\n buttonAriaLabel?: string;\n /** Show close button in bottom of Panel Expand */\n /** @deprecated Has no effect anymore due to accessbility reasons. No close button is shown in expanded content. Will be removed in 2.0.0 */\n showCloseButtonInExpand?: boolean;\n /** Layout (see description) */\n layout?: keyof typeof PanelLayout;\n /** Clicking anywhere on the container will trigger a click on the panel's button */\n containerAsButton?: boolean;\n /** Displays time with icon */\n time?: string;\n /** Displays date with icon */\n date?: string;\n /** Removes top border when variant is \"line\" */\n noTopBorder?: boolean;\n /** Opens or closes the panel */\n expanded?: boolean;\n /** Called when panel is open/closed. */\n onExpand?: (isExpanded: boolean) => void;\n /** Whether to render children when closed (in which case they are hidden with CSS). Default: false */\n renderChildrenWhenClosed?: boolean;\n /** Whether panel is focusable or not */\n focusable?: boolean;\n}\n\nconst StatusText: React.FC<{ status?: keyof typeof PanelStatus; statusMessage?: string }> = ({ status, statusMessage }) => {\n const statusIcon = (): { color: string; svgIcon: React.FC<SvgPathProps> } => {\n if (status === PanelStatus.error) {\n return { color: palette.cherry500, svgIcon: AlertSignFill };\n }\n\n return { color: palette.black, svgIcon: Pencil };\n };\n\n const statusMessageClass = classNames(panelStyles['status-message'], {\n [panelStyles['status-message--new']]: status === PanelStatus.new,\n });\n\n if ((status === PanelStatus.error || status === PanelStatus.draft) && statusMessage) {\n return (\n <div className={statusMessageClass} data-testid=\"display-status\">\n {<Icon {...statusIcon()} size={IconSize.XSmall} />} <span>{statusMessage}</span>\n </div>\n );\n }\n\n return null;\n};\n\nconst DateTime: React.FC<{ date?: string; time?: string }> = ({ date, time }) => {\n if (date || time) {\n return (\n <div className={panelStyles['datetime-container']} data-testid=\"datetime\">\n {date && (\n <div className={panelStyles['datetime-container__icon']}>\n <Icon svgIcon={Calendar} size={IconSize.XSmall} />\n <span>{date}</span>\n </div>\n )}\n {time && (\n <div className={panelStyles['datetime-container__icon']}>\n <Icon svgIcon={Watch} size={IconSize.XSmall} />\n <span>{time}</span>\n </div>\n )}\n </div>\n );\n }\n\n return null;\n};\n\nconst Panel = React.forwardRef(function PanelForwardedRef(props: PanelProps, ref: React.ForwardedRef<HTMLHeadingElement>) {\n const {\n children,\n contentA,\n contentB,\n prioritiseMetaDataInContentB,\n className,\n testId,\n title,\n titleHtmlMarkup = 'h2',\n url,\n target = '_self',\n icon,\n iconRight = false,\n variant = PanelVariant.fill,\n status = PanelStatus.normal,\n statusMessage,\n buttonText = 'Se detaljer',\n buttonTextClose = 'Skjul detaljer',\n buttonAriaLabelledById,\n buttonAriaLabel,\n layout = PanelLayout.layout2,\n containerAsButton = false,\n date,\n time,\n noTopBorder,\n buttonOnClick,\n buttonHtmlMarkup = 'a',\n expanded = false,\n onExpand,\n renderChildrenWhenClosed = false,\n focusable = false,\n } = props;\n\n const [isExpanded, setIsExpanded] = useExpand(expanded, onExpand);\n const titleId = useUuid();\n const buttonTextId = useUuid();\n const hasBadge = statusMessage && status === PanelStatus.new;\n const layout3 = [PanelLayout.layout3a.toString(), PanelLayout.layout3b.toString(), PanelLayout.layout3c.toString()].includes(layout);\n\n const panelWrapperClass = classNames(panelStyles['panel-wrapper'], className);\n\n const panelClasses = classNames(panelStyles.panel, {\n [panelStyles['panel--fill']]: variant === PanelVariant.fill,\n [panelStyles['panel--stroke']]: variant === PanelVariant.stroke,\n [panelStyles['panel--white']]: variant === PanelVariant.white,\n [panelStyles['panel--line']]: variant === PanelVariant.line,\n [panelStyles['panel--no-top-border']]: variant === PanelVariant.line && noTopBorder,\n [panelStyles['panel--selected']]: isExpanded,\n [panelStyles['panel--new']]: status === PanelStatus.new,\n [panelStyles['panel--draft']]: status === PanelStatus.draft,\n [panelStyles['panel--error']]: status === PanelStatus.error,\n [panelStyles['panel--status']]: status && status !== PanelStatus.normal,\n [panelStyles['panel--with-icon']]: icon,\n [panelStyles['panel--button']]: containerAsButton,\n [panelStyles['panel--clickable']]: children || url || onExpand || buttonOnClick || containerAsButton,\n });\n\n const panelContainer = classNames({\n [panelStyles['panel__container']]: layout === PanelLayout.layout2 && contentB,\n [panelStyles['panel__container--layout1']]: layout === PanelLayout.layout1 && contentB,\n [panelStyles['panel__container--layout2']]: layout === PanelLayout.layout2 && contentB,\n [panelStyles['panel__container--layout3']]: layout3 && contentB,\n [panelStyles['panel__container--grow']]: icon,\n [panelStyles['panel__container--prioritiseMetaDataInContentB']]: prioritiseMetaDataInContentB,\n });\n\n const panelContentLeftClass = classNames({\n [panelStyles['panel-content-a']]: layout === PanelLayout.layout2,\n [panelStyles['panel-content-a--layout3a']]: layout === PanelLayout.layout3a,\n [panelStyles['panel-content-a--layout3b']]: layout === PanelLayout.layout3b,\n [panelStyles['panel-content-a--layout3c']]: layout === PanelLayout.layout3c,\n [panelStyles['panel-content-a--non-prioritiseMetaDataInContentB']]: !prioritiseMetaDataInContentB,\n });\n\n const panelContentRightClass = classNames({\n [panelStyles['panel__content-right--layout1']]: contentB && layout === PanelLayout.layout1,\n [panelStyles['panel__content-right--layout2']]: contentB && layout === PanelLayout.layout2,\n [panelStyles['panel__content-right--layout3']]: contentB && layout3,\n [panelStyles['panel__content-right--layout3a']]: contentB && layout === PanelLayout.layout3a,\n [panelStyles['panel__content-right--layout3b']]: contentB && layout === PanelLayout.layout3b,\n [panelStyles['panel__content-right--layout3c']]: contentB && layout === PanelLayout.layout3c,\n [panelStyles['panel__content-right--prioritiseMetaDataInContentB']]: prioritiseMetaDataInContentB,\n });\n\n const panelContentBClass = classNames(panelStyles['panel-content-b'], {\n [panelStyles['panel-content-b--layout1']]: layout === PanelLayout.layout1,\n [panelStyles['panel-content-b--layout2']]: layout === PanelLayout.layout2,\n [panelStyles['panel-content-b--layout3']]: layout3,\n [panelStyles['panel-content-b--prioritiseMetaDataInContentB']]: prioritiseMetaDataInContentB,\n });\n\n const panelActionBtnClass = classNames(panelStyles['panel__details-btn']);\n const titleClasses = classNames(panelStyles['panel-content-a__title'], { [panelStyles['panel-content-a__title--badge']]: hasBadge });\n\n const renderDetailsButton = (): JSX.Element => {\n const ariaLabelAttributes = getAriaLabelAttributes({\n label: buttonAriaLabel,\n id: (buttonAriaLabelledById && `${buttonTextId} ${buttonAriaLabelledById}`) || (title && titleId && `${buttonTextId} ${titleId}`),\n prefer: 'label',\n });\n\n const commonProps: Partial<ButtonProps> & AriaLabelAttributes = {\n onClick: buttonOnClick ? buttonOnClick : (): void => setIsExpanded(!isExpanded),\n className: containerAsButton ? panelStyles['panel__expand'] : undefined,\n variant: 'borderless',\n ellipsis: true,\n ...ariaLabelAttributes,\n };\n\n if (children) {\n return (\n <Button testId=\"expand\" aria-expanded={isExpanded} {...commonProps}>\n <span id={buttonTextId}>{isExpanded ? buttonTextClose : buttonText}</span>\n <Icon svgIcon={isExpanded ? ChevronUp : ChevronDown} />\n </Button>\n );\n }\n\n return (\n <Button testId=\"url\" htmlMarkup={buttonHtmlMarkup} href={url} target={target} {...commonProps}>\n <span id={buttonTextId}>{buttonText}</span>\n <Icon svgIcon={ArrowRight} />\n </Button>\n );\n };\n\n const btnContainerClass = classNames(panelStyles['panel__btn-container'], {\n [panelStyles['panel__btn-container--layout3']]: layout3,\n [panelStyles['panel__btn-container--no-content-b']]: !contentB,\n [panelStyles['panel__btn-container--padding-top']]: contentA || contentB,\n });\n\n const renderContent = (): JSX.Element | null => {\n if (!children) {\n return null;\n }\n if (!renderChildrenWhenClosed && !isExpanded) {\n return null;\n }\n\n const panelDetailsClasses = classNames(panelStyles['panel-details'], {\n [panelStyles['panel-details--open']]: isExpanded,\n [panelStyles['panel-details--line']]: variant === PanelVariant.line,\n [panelStyles['panel-details--white']]: variant === PanelVariant.white,\n [panelStyles['panel-details--with-icon']]: icon,\n });\n\n return (\n <div className={panelDetailsClasses} data-testid=\"panel-details\">\n <div>{children}</div>\n </div>\n );\n };\n\n const contentBElement = (\n <div className={panelContentRightClass}>\n {contentB && <div className={panelContentBClass}>{contentB}</div>}\n {(children || url || date || time || buttonOnClick) && (\n <div className={btnContainerClass}>\n {<DateTime date={date} time={time} />}\n {(children || url || buttonOnClick) && <div className={panelActionBtnClass}>{renderDetailsButton()}</div>}\n </div>\n )}\n </div>\n );\n\n return (\n <div\n // eslint-disable-next-line no-constant-condition\n tabIndex={focusable ? -1 : undefined}\n ref={ref}\n data-testid={testId}\n className={panelWrapperClass}\n data-analyticsid={AnalyticsId.Panel}\n >\n <div className={panelClasses}>\n {icon && !iconRight && <div className={panelStyles.panel__icon}>{icon}</div>}\n <div className={panelContainer}>\n {prioritiseMetaDataInContentB && contentBElement}\n <div className={panelContentLeftClass}>\n <StatusText status={status} statusMessage={statusMessage} />\n {title && (\n <div className={panelStyles['panel-content-a__title-container']}>\n <Title appearance=\"title3\" htmlMarkup={titleHtmlMarkup} id={titleId} className={titleClasses}>\n {title}\n </Title>\n {hasBadge && (\n <div className={panelStyles.panel__badge}>\n <Badge color=\"blueberry\" testId=\"badge-status\">\n {statusMessage}\n </Badge>\n </div>\n )}\n </div>\n )}\n {contentA}\n </div>\n {!prioritiseMetaDataInContentB && contentBElement}\n </div>\n {icon && iconRight && <div className={panelStyles['panel__icon--right']}>{icon}</div>}\n </div>\n {renderContent()}\n </div>\n );\n});\n\nexport default Panel;\n"],"names":["PanelStatus","PanelVariant","PanelLayout","StatusText","status","statusMessage","statusIcon","palette","AlertSignFill","Pencil","statusMessageClass","classNames","panelStyles","Icon","IconSize","React","DateTime","date","time","Calendar","Watch","Panel","props","ref","children","contentA","contentB","prioritiseMetaDataInContentB","className","testId","title","titleHtmlMarkup","url","target","icon","iconRight","variant","buttonText","buttonTextClose","buttonAriaLabelledById","buttonAriaLabel","layout","containerAsButton","noTopBorder","buttonOnClick","buttonHtmlMarkup","expanded","onExpand","renderChildrenWhenClosed","focusable","isExpanded","setIsExpanded","useExpand","titleId","useUuid","buttonTextId","hasBadge","layout3","panelWrapperClass","panelClasses","panelContainer","panelContentLeftClass","panelContentRightClass","panelContentBClass","panelActionBtnClass","titleClasses","renderDetailsButton","ariaLabelAttributes","getAriaLabelAttributes","commonProps","Button","ChevronUp","ChevronDown","ArrowRight","btnContainerClass","renderContent","panelDetailsClasses","contentBElement","AnalyticsId","Title","Badge","Panel$1"],"mappings":"g1BAuBY,IAAAA,IAAAA,IACVA,EAAA,OAAS,SACTA,EAAA,IAAM,MACNA,EAAA,MAAQ,QACRA,EAAA,MAAQ,QAJEA,IAAAA,IAAA,CAAA,CAAA,EAOAC,IAAAA,IACVA,EAAA,KAAO,OACPA,EAAA,MAAQ,QACRA,EAAA,OAAS,SACTA,EAAA,KAAO,OAJGA,IAAAA,IAAA,CAAA,CAAA,EAOAC,IAAAA,IACVA,EAAA,QAAU,UACVA,EAAA,QAAU,UACVA,EAAA,SAAW,WACXA,EAAA,SAAW,WACXA,EAAA,SAAW,WALDA,IAAAA,IAAA,CAAA,CAAA,EAyEZ,MAAMC,GAAsF,CAAC,CAAE,OAAAC,EAAQ,cAAAC,KAAoB,CACzH,MAAMC,EAAa,IACbF,IAAW,QACN,CAAE,MAAOG,EAAQ,UAAW,QAASC,EAAc,EAGrD,CAAE,MAAOD,EAAQ,MAAO,QAASE,EAAO,EAG3CC,EAAqBC,EAAWC,EAAY,gBAAgB,EAAG,CACnE,CAACA,EAAY,qBAAqB,CAAC,EAAGR,IAAW,KAAA,CAClD,EAED,OAAKA,IAAW,SAAqBA,IAAW,UAAsBC,kBAEjE,MAAI,CAAA,UAAWK,EAAoB,cAAY,gBAAA,kBAC5CG,EAAM,CAAA,GAAGP,IAAc,KAAMQ,EAAS,MAAQ,CAAA,EAAG,IAAEC,EAAA,cAAA,OAAA,KAAMV,CAAc,CAC3E,EAIG,IACT,EAEMW,GAAuD,CAAC,CAAE,KAAAC,EAAM,KAAAC,KAChED,GAAQC,EAERH,EAAA,cAAC,OAAI,UAAWH,EAAY,oBAAoB,EAAG,cAAY,YAC5DK,GACCF,EAAA,cAAC,OAAI,UAAWH,EAAY,0BAA0B,CACpD,EAAAG,EAAA,cAACF,GAAK,QAASM,GAAU,KAAML,EAAS,MAAQ,CAAA,kBAC/C,OAAM,KAAAG,CAAK,CACd,EAEDC,mBACE,MAAI,CAAA,UAAWN,EAAY,0BAA0B,CACpD,EAAAG,EAAA,cAACF,GAAK,QAASO,GAAO,KAAMN,EAAS,MAAQ,CAAA,EAC5CC,EAAA,cAAA,OAAA,KAAMG,CAAK,CACd,CAEJ,EAIG,KAGHG,GAAQN,EAAM,WAAW,SAA2BO,EAAmBC,EAA6C,CAClH,KAAA,CACJ,SAAAC,EACA,SAAAC,EACA,SAAAC,EACA,6BAAAC,EACA,UAAAC,EACA,OAAAC,EACA,MAAAC,EACA,gBAAAC,EAAkB,KAClB,IAAAC,EACA,OAAAC,EAAS,QACT,KAAAC,EACA,UAAAC,EAAY,GACZ,QAAAC,EAAU,OACV,OAAAhC,EAAS,SACT,cAAAC,EACA,WAAAgC,EAAa,cACb,gBAAAC,EAAkB,iBAClB,uBAAAC,EACA,gBAAAC,EACA,OAAAC,EAAS,UACT,kBAAAC,EAAoB,GACpB,KAAAzB,EACA,KAAAC,EACA,YAAAyB,EACA,cAAAC,EACA,iBAAAC,EAAmB,IACnB,SAAAC,EAAW,GACX,SAAAC,EACA,yBAAAC,EAA2B,GAC3B,UAAAC,EAAY,EACV,EAAA3B,EAEE,CAAC4B,EAAYC,CAAa,EAAIC,GAAUN,EAAUC,CAAQ,EAC1DM,EAAUC,IACVC,EAAeD,IACfE,EAAWnD,GAAiBD,IAAW,MACvCqD,EAAU,CAAC,WAAqB,SAAA,EAAY,WAAqB,WAAY,WAAqB,SAAU,CAAA,EAAE,SAAShB,CAAM,EAE7HiB,EAAoB/C,EAAWC,EAAY,eAAe,EAAGgB,CAAS,EAEtE+B,EAAehD,EAAWC,EAAY,MAAO,CACjD,CAACA,EAAY,aAAa,CAAC,EAAGwB,IAAY,OAC1C,CAACxB,EAAY,eAAe,CAAC,EAAGwB,IAAY,SAC5C,CAACxB,EAAY,cAAc,CAAC,EAAGwB,IAAY,QAC3C,CAACxB,EAAY,aAAa,CAAC,EAAGwB,IAAY,OAC1C,CAACxB,EAAY,sBAAsB,CAAC,EAAGwB,IAAY,QAAqBO,EACxE,CAAC/B,EAAY,iBAAiB,CAAC,EAAGsC,EAClC,CAACtC,EAAY,YAAY,CAAC,EAAGR,IAAW,MACxC,CAACQ,EAAY,cAAc,CAAC,EAAGR,IAAW,QAC1C,CAACQ,EAAY,cAAc,CAAC,EAAGR,IAAW,QAC1C,CAACQ,EAAY,eAAe,CAAC,EAAGR,GAAUA,IAAW,SACrD,CAACQ,EAAY,kBAAkB,CAAC,EAAGsB,EACnC,CAACtB,EAAY,eAAe,CAAC,EAAG8B,EAChC,CAAC9B,EAAY,kBAAkB,CAAC,EAAGY,GAAYQ,GAAOe,GAAYH,GAAiBF,CAAA,CACpF,EAEKkB,EAAiBjD,EAAW,CAChC,CAACC,EAAY,gBAAmB,EAAG6B,IAAW,WAAuBf,EACrE,CAACd,EAAY,2BAA2B,CAAC,EAAG6B,IAAW,WAAuBf,EAC9E,CAACd,EAAY,2BAA2B,CAAC,EAAG6B,IAAW,WAAuBf,EAC9E,CAACd,EAAY,2BAA2B,CAAC,EAAG6C,GAAW/B,EACvD,CAACd,EAAY,wBAAwB,CAAC,EAAGsB,EACzC,CAACtB,EAAY,gDAAgD,CAAC,EAAGe,CAAA,CAClE,EAEKkC,EAAwBlD,EAAW,CACvC,CAACC,EAAY,iBAAiB,CAAC,EAAG6B,IAAW,UAC7C,CAAC7B,EAAY,2BAA2B,CAAC,EAAG6B,IAAW,WACvD,CAAC7B,EAAY,2BAA2B,CAAC,EAAG6B,IAAW,WACvD,CAAC7B,EAAY,2BAA2B,CAAC,EAAG6B,IAAW,WACvD,CAAC7B,EAAY,mDAAmD,CAAC,EAAG,CAACe,CAAA,CACtE,EAEKmC,GAAyBnD,EAAW,CACxC,CAACC,EAAY,+BAA+B,CAAC,EAAGc,GAAYe,IAAW,UACvE,CAAC7B,EAAY,+BAA+B,CAAC,EAAGc,GAAYe,IAAW,UACvE,CAAC7B,EAAY,+BAA+B,CAAC,EAAGc,GAAY+B,EAC5D,CAAC7C,EAAY,gCAAgC,CAAC,EAAGc,GAAYe,IAAW,WACxE,CAAC7B,EAAY,gCAAgC,CAAC,EAAGc,GAAYe,IAAW,WACxE,CAAC7B,EAAY,gCAAgC,CAAC,EAAGc,GAAYe,IAAW,WACxE,CAAC7B,EAAY,oDAAoD,CAAC,EAAGe,CAAA,CACtE,EAEKoC,GAAqBpD,EAAWC,EAAY,iBAAiB,EAAG,CACpE,CAACA,EAAY,0BAA0B,CAAC,EAAG6B,IAAW,UACtD,CAAC7B,EAAY,0BAA0B,CAAC,EAAG6B,IAAW,UACtD,CAAC7B,EAAY,0BAA0B,CAAC,EAAG6C,EAC3C,CAAC7C,EAAY,+CAA+C,CAAC,EAAGe,CAAA,CACjE,EAEKqC,GAAsBrD,EAAWC,EAAY,oBAAoB,CAAC,EAClEqD,GAAetD,EAAWC,EAAY,wBAAwB,EAAG,CAAE,CAACA,EAAY,+BAA+B,CAAC,EAAG4C,CAAA,CAAU,EAE7HU,GAAsB,IAAmB,CAC7C,MAAMC,EAAsBC,GAAuB,CACjD,MAAO5B,EACP,GAAKD,GAA0B,GAAGgB,CAAY,IAAIhB,CAAsB,IAAQT,GAASuB,GAAW,GAAGE,CAAY,IAAIF,CAAO,GAC9H,OAAQ,OAAA,CACT,EAEKgB,EAA0D,CAC9D,QAASzB,IAAgC,IAAYO,EAAc,CAACD,CAAU,GAC9E,UAAWR,EAAoB9B,EAAY,cAAmB,OAC9D,QAAS,aACT,SAAU,GACV,GAAGuD,CAAA,EAGL,OAAI3C,EAEAT,EAAA,cAACuD,GAAO,OAAO,SAAS,gBAAepB,EAAa,GAAGmB,CACrD,EAAAtD,EAAA,cAAC,OAAK,CAAA,GAAIwC,GAAeL,EAAaZ,EAAkBD,CAAW,EACnEtB,EAAA,cAACF,GAAK,QAASqC,EAAaqB,GAAYC,EAAA,CAAa,CACvD,EAKFzD,EAAA,cAACuD,GAAO,OAAO,MAAM,WAAYzB,EAAkB,KAAMb,EAAK,OAAAC,EAAiB,GAAGoC,GAC/EtD,EAAA,cAAA,OAAA,CAAK,GAAIwC,CAAe,EAAAlB,CAAW,EACnCtB,EAAA,cAAAF,EAAA,CAAK,QAAS4D,EAAA,CAAY,CAC7B,CAAA,EAIEC,GAAoB/D,EAAWC,EAAY,sBAAsB,EAAG,CACxE,CAACA,EAAY,+BAA+B,CAAC,EAAG6C,EAChD,CAAC7C,EAAY,oCAAoC,CAAC,EAAG,CAACc,EACtD,CAACd,EAAY,mCAAmC,CAAC,EAAGa,GAAYC,CAAA,CACjE,EAEKiD,GAAgB,IAA0B,CAI1C,GAHA,CAACnD,GAGD,CAACwB,GAA4B,CAACE,EACzB,OAAA,KAGT,MAAM0B,EAAsBjE,EAAWC,EAAY,eAAe,EAAG,CACnE,CAACA,EAAY,qBAAqB,CAAC,EAAGsC,EACtC,CAACtC,EAAY,qBAAqB,CAAC,EAAGwB,IAAY,OAClD,CAACxB,EAAY,sBAAsB,CAAC,EAAGwB,IAAY,QACnD,CAACxB,EAAY,0BAA0B,CAAC,EAAGsB,CAAA,CAC5C,EAGC,OAAAnB,EAAA,cAAC,OAAI,UAAW6D,EAAqB,cAAY,eAC/C,EAAA7D,EAAA,cAAC,MAAK,KAAAS,CAAS,CACjB,CAAA,EAIEqD,EACH9D,EAAA,cAAA,MAAA,CAAI,UAAW+C,IACbpC,GAAaX,EAAA,cAAA,MAAA,CAAI,UAAWgD,EAAA,EAAqBrC,CAAS,GACzDF,GAAYQ,GAAOf,GAAQC,GAAQ0B,IACnC7B,EAAA,cAAC,MAAI,CAAA,UAAW2D,IACZ3D,EAAA,cAAAC,GAAA,CAAS,KAAAC,EAAY,KAAAC,CAAY,CAAA,GACjCM,GAAYQ,GAAOY,IAAkB7B,EAAA,cAAC,OAAI,UAAWiD,IAAsBE,IAAsB,CACrG,CAEJ,EAIA,OAAAnD,EAAA,cAAC,MAAA,CAEC,SAAUkC,EAAY,GAAK,OAC3B,IAAA1B,EACA,cAAaM,EACb,UAAW6B,EACX,mBAAkBoB,GAAY,KAAA,kBAE7B,MAAI,CAAA,UAAWnB,CACb,EAAAzB,GAAQ,CAACC,GAAapB,EAAA,cAAC,MAAI,CAAA,UAAWH,EAAY,WAAc,EAAAsB,CAAK,EACtEnB,EAAA,cAAC,OAAI,UAAW6C,CAAA,EACbjC,GAAgCkD,kBAChC,MAAI,CAAA,UAAWhB,GACd9C,EAAA,cAACZ,IAAW,OAAAC,EAAgB,cAAAC,EAA8B,EACzDyB,mBACE,MAAI,CAAA,UAAWlB,EAAY,kCAAkC,mBAC3DmE,GAAM,CAAA,WAAW,SAAS,WAAYhD,EAAiB,GAAIsB,EAAS,UAAWY,EAAA,EAC7EnC,CACH,EACC0B,GACEzC,EAAA,cAAA,MAAA,CAAI,UAAWH,EAAY,YAAA,kBACzBoE,GAAM,CAAA,MAAM,YAAY,OAAO,gBAC7B3E,CACH,CACF,CAEJ,EAEDoB,CACH,EACC,CAACE,GAAgCkD,CACpC,EACC3C,GAAQC,mBAAc,MAAI,CAAA,UAAWvB,EAAY,oBAAoB,GAAIsB,CAAK,CACjF,EACCyC,GAAc,CAAA,CAGrB,CAAC,EAEDM,GAAe5D"}
|
|
1
|
+
{"version":3,"file":"Panel.js","sources":["../src/components/Panel/Panel.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnchorTarget, AnalyticsId } from '../../constants';\nimport { useExpand } from '../../hooks/useExpand';\nimport { useUuid } from '../../hooks/useUuid';\nimport { palette } from '../../theme/palette';\nimport { AriaLabelAttributes, getAriaLabelAttributes } from '../../utils/accessibility';\nimport Badge from '../Badge';\nimport Button, { ButtonProps, ButtonTags } from '../Button';\nimport Icon, { IconSize, SvgPathProps } from '../Icons';\nimport AlertSignFill from '../Icons/AlertSignFill';\nimport ArrowRight from '../Icons/ArrowRight';\nimport Calendar from '../Icons/Calendar';\nimport ChevronDown from '../Icons/ChevronDown';\nimport ChevronUp from '../Icons/ChevronUp';\nimport Pencil from '../Icons/Pencil';\nimport Watch from '../Icons/Watch';\nimport Title, { TitleTags } from '../Title';\n\nimport panelStyles from './styles.module.scss';\n\nexport enum PanelStatus {\n normal = 'normal',\n new = 'new',\n error = 'error',\n draft = 'draft',\n}\n\nexport enum PanelVariant {\n fill = 'fill',\n white = 'white',\n stroke = 'stroke',\n line = 'line',\n}\n\nexport enum PanelLayout {\n layout1 = 'layout1',\n layout2 = 'layout2',\n layout3a = 'layout3a',\n layout3b = 'layout3b',\n layout3c = 'layout3c',\n}\n\nexport interface PanelProps {\n children?: React.ReactNode;\n /** Title of the panel */\n title?: string;\n /** Changes the underlying element of the title. Default: h2 */\n titleHtmlMarkup?: TitleTags;\n /** Adds custom classes to the element. */\n className?: string;\n /** Sets the data-testid attribute. */\n testId?: string;\n /** Displays a status on the left side: defualt normal */\n status?: keyof typeof PanelStatus;\n /** Displayed on top of the panel with a status icon */\n statusMessage?: string;\n /** Changes the visual representation of the panel. */\n variant?: keyof typeof PanelVariant;\n /** Url to details, renders as a button with anchor tag */\n url?: string;\n /** target used in the button: default is _self */\n target?: AnchorTarget;\n /** Icon displayed in title */\n icon?: React.ReactNode;\n /** Display icon on right */\n iconRight?: boolean;\n /** Panel section A content */\n contentA?: React.ReactNode | string;\n /** Panel section B content*/\n contentB?: React.ReactNode | string;\n /** A version of panel that prioritises content-B visually and audibly */\n prioritiseMetaDataInContentB?: boolean;\n /** Panel button text */\n buttonText?: string;\n /** Panel button close text */\n buttonTextClose?: string;\n /** HTML markup for panel button. Default: a */\n buttonHtmlMarkup?: ButtonTags;\n /** Callback when panel button is clicked */\n buttonOnClick?: ButtonProps['onClick'];\n /** Panel button is aria-labelledby the text in the button itself + the element set in buttonAriaLabelledById. Default: auto-generated id for title (if title is set). */\n buttonAriaLabelledById?: string;\n /** Panel button aria label */\n buttonAriaLabel?: string;\n /** Show close button in bottom of Panel Expand */\n /** @deprecated Has no effect anymore due to accessbility reasons. No close button is shown in expanded content. Will be removed in 2.0.0 */\n showCloseButtonInExpand?: boolean;\n /** Layout (see description) */\n layout?: keyof typeof PanelLayout;\n /** Clicking anywhere on the container will trigger a click on the panel's button */\n containerAsButton?: boolean;\n /** Displays time with icon */\n time?: string;\n /** Displays date with icon */\n date?: string;\n /** Removes top border when variant is \"line\" */\n noTopBorder?: boolean;\n /** Opens or closes the panel */\n expanded?: boolean;\n /** Called when panel is open/closed. */\n onExpand?: (isExpanded: boolean) => void;\n /** Whether to render children when closed (in which case they are hidden with CSS). Default: false */\n renderChildrenWhenClosed?: boolean;\n /** Whether panel is focusable or not */\n focusable?: boolean;\n}\n\nconst StatusText: React.FC<{ status?: keyof typeof PanelStatus; statusMessage?: string }> = ({ status, statusMessage }) => {\n const statusIcon = (): { color: string; svgIcon: React.FC<SvgPathProps> } => {\n if (status === PanelStatus.error) {\n return { color: palette.cherry500, svgIcon: AlertSignFill };\n }\n\n return { color: palette.black, svgIcon: Pencil };\n };\n\n const statusMessageClass = classNames(panelStyles['status-message'], {\n [panelStyles['status-message--new']]: status === PanelStatus.new,\n });\n\n if ((status === PanelStatus.error || status === PanelStatus.draft) && statusMessage) {\n return (\n <div className={statusMessageClass} data-testid=\"display-status\">\n {<Icon {...statusIcon()} size={IconSize.XSmall} />} <span>{statusMessage}</span>\n </div>\n );\n }\n\n return null;\n};\n\nconst DateTime: React.FC<{ date?: string; time?: string }> = ({ date, time }) => {\n if (date || time) {\n return (\n <div className={panelStyles['datetime-container']} data-testid=\"datetime\">\n {date && (\n <div className={panelStyles['datetime-container__icon']}>\n <Icon svgIcon={Calendar} size={IconSize.XSmall} />\n <span>{date}</span>\n </div>\n )}\n {time && (\n <div className={panelStyles['datetime-container__icon']}>\n <Icon svgIcon={Watch} size={IconSize.XSmall} />\n <span>{time}</span>\n </div>\n )}\n </div>\n );\n }\n\n return null;\n};\n\nconst Panel = React.forwardRef(function PanelForwardedRef(props: PanelProps, ref: React.ForwardedRef<HTMLHeadingElement>) {\n const {\n children,\n contentA,\n contentB,\n prioritiseMetaDataInContentB,\n className,\n testId,\n title,\n titleHtmlMarkup = 'h2',\n url,\n target = '_self',\n icon,\n iconRight = false,\n variant = PanelVariant.fill,\n status = PanelStatus.normal,\n statusMessage,\n buttonText = 'Se detaljer',\n buttonTextClose = 'Skjul detaljer',\n buttonAriaLabelledById,\n buttonAriaLabel,\n layout = PanelLayout.layout2,\n containerAsButton = false,\n date,\n time,\n noTopBorder,\n buttonOnClick,\n buttonHtmlMarkup = 'a',\n expanded = false,\n onExpand,\n renderChildrenWhenClosed = false,\n focusable = false,\n } = props;\n\n const [isExpanded, setIsExpanded] = useExpand(expanded, onExpand);\n const titleId = useUuid();\n const buttonTextId = useUuid();\n const hasBadge = statusMessage && status === PanelStatus.new;\n const layout3 = [PanelLayout.layout3a.toString(), PanelLayout.layout3b.toString(), PanelLayout.layout3c.toString()].includes(layout);\n\n const panelWrapperClasses = classNames(panelStyles['panel-wrapper'], className);\n\n const panelClasses = classNames(panelStyles.panel, {\n [panelStyles['panel--fill']]: variant === PanelVariant.fill,\n [panelStyles['panel--stroke']]: variant === PanelVariant.stroke,\n [panelStyles['panel--white']]: variant === PanelVariant.white,\n [panelStyles['panel--line']]: variant === PanelVariant.line,\n [panelStyles['panel--no-top-border']]: variant === PanelVariant.line && noTopBorder,\n [panelStyles['panel--selected']]: isExpanded,\n [panelStyles['panel--new']]: status === PanelStatus.new,\n [panelStyles['panel--draft']]: status === PanelStatus.draft,\n [panelStyles['panel--error']]: status === PanelStatus.error,\n [panelStyles['panel--status']]: status && status !== PanelStatus.normal,\n [panelStyles['panel--with-icon']]: icon,\n [panelStyles['panel--button']]: containerAsButton,\n [panelStyles['panel--clickable']]: children || url || onExpand || buttonOnClick || containerAsButton,\n });\n\n const panelContainerClasses = classNames({\n [panelStyles['panel__container']]: layout === PanelLayout.layout2 && contentB,\n [panelStyles['panel__container--layout1']]: layout === PanelLayout.layout1 && contentB,\n [panelStyles['panel__container--layout2']]: layout === PanelLayout.layout2 && contentB,\n [panelStyles['panel__container--layout3']]: layout3 && contentB,\n [panelStyles['panel__container--grow']]: icon,\n [panelStyles['panel__container--prioritiseMetaDataInContentB']]: prioritiseMetaDataInContentB,\n });\n\n const panelContentLeftClasses = classNames({\n [panelStyles['panel-content-a']]: layout === PanelLayout.layout2,\n [panelStyles['panel-content-a--layout3a']]: layout === PanelLayout.layout3a,\n [panelStyles['panel-content-a--layout3b']]: layout === PanelLayout.layout3b,\n [panelStyles['panel-content-a--layout3c']]: layout === PanelLayout.layout3c,\n [panelStyles['panel-content-a--non-prioritiseMetaDataInContentB']]: !prioritiseMetaDataInContentB,\n });\n\n const panelContentRightClasses = classNames({\n [panelStyles['panel__content-right--layout1']]: contentB && layout === PanelLayout.layout1,\n [panelStyles['panel__content-right--layout2']]: contentB && layout === PanelLayout.layout2,\n [panelStyles['panel__content-right--layout3']]: contentB && layout3,\n [panelStyles['panel__content-right--layout3a']]: contentB && layout === PanelLayout.layout3a,\n [panelStyles['panel__content-right--layout3b']]: contentB && layout === PanelLayout.layout3b,\n [panelStyles['panel__content-right--layout3c']]: contentB && layout === PanelLayout.layout3c,\n [panelStyles['panel__content-right--prioritiseMetaDataInContentB']]: prioritiseMetaDataInContentB,\n });\n\n const panelContentBClasses = classNames(panelStyles['panel-content-b'], {\n [panelStyles['panel-content-b--layout1']]: layout === PanelLayout.layout1,\n [panelStyles['panel-content-b--layout2']]: layout === PanelLayout.layout2,\n [panelStyles['panel-content-b--layout3']]: layout3,\n [panelStyles['panel-content-b--prioritiseMetaDataInContentB']]: prioritiseMetaDataInContentB,\n });\n\n const titleClasses = classNames(panelStyles['panel-content-a__title'], { [panelStyles['panel-content-a__title--badge']]: hasBadge });\n\n const renderDetailsButton = (): JSX.Element => {\n const ariaLabelAttributes = getAriaLabelAttributes({\n label: buttonAriaLabel,\n id: (buttonAriaLabelledById && `${buttonTextId} ${buttonAriaLabelledById}`) || (title && titleId && `${buttonTextId} ${titleId}`),\n prefer: 'label',\n });\n\n const commonProps: Partial<ButtonProps> & AriaLabelAttributes = {\n onClick: buttonOnClick ? buttonOnClick : (): void => setIsExpanded(!isExpanded),\n className: containerAsButton ? panelStyles['panel__expand'] : undefined,\n variant: 'borderless',\n ellipsis: true,\n ...ariaLabelAttributes,\n };\n\n if (children) {\n return (\n <Button testId=\"expand\" aria-expanded={isExpanded} {...commonProps}>\n <span id={buttonTextId}>{isExpanded ? buttonTextClose : buttonText}</span>\n <Icon svgIcon={isExpanded ? ChevronUp : ChevronDown} />\n </Button>\n );\n }\n\n return (\n <Button testId=\"url\" htmlMarkup={buttonHtmlMarkup} href={url} target={target} {...commonProps}>\n <span id={buttonTextId}>{buttonText}</span>\n <Icon svgIcon={ArrowRight} />\n </Button>\n );\n };\n\n const btnContainerClass = classNames(panelStyles['panel__btn-container'], {\n [panelStyles['panel__btn-container--layout3']]: layout3,\n [panelStyles['panel__btn-container--no-content-b']]: !contentB,\n [panelStyles['panel__btn-container--padding-top']]: contentA || contentB,\n });\n\n const renderContent = (): JSX.Element | null => {\n if (!children || (!renderChildrenWhenClosed && !isExpanded)) {\n return null;\n }\n\n const panelDetailsClasses = classNames(panelStyles['panel-details'], {\n [panelStyles['panel-details--open']]: isExpanded,\n [panelStyles['panel-details--line']]: variant === PanelVariant.line,\n [panelStyles['panel-details--white']]: variant === PanelVariant.white,\n [panelStyles['panel-details--with-icon']]: icon,\n });\n\n return (\n <div className={panelDetailsClasses} data-testid=\"panel-details\">\n <div>{children}</div>\n </div>\n );\n };\n\n const contentBElement = (\n <div className={panelContentRightClasses}>\n {contentB && <div className={panelContentBClasses}>{contentB}</div>}\n {(children || url || date || time || buttonOnClick) && (\n <div className={btnContainerClass}>\n {<DateTime date={date} time={time} />}\n {(children || url || buttonOnClick) && <div className={panelStyles['panel__details-btn']}>{renderDetailsButton()}</div>}\n </div>\n )}\n </div>\n );\n\n return (\n <div\n // eslint-disable-next-line no-constant-condition\n tabIndex={focusable ? -1 : undefined}\n ref={ref}\n data-testid={testId}\n className={panelWrapperClasses}\n data-analyticsid={AnalyticsId.Panel}\n >\n <div className={panelClasses}>\n {icon && !iconRight && <div className={panelStyles.panel__icon}>{icon}</div>}\n <div className={panelContainerClasses}>\n {prioritiseMetaDataInContentB && contentBElement}\n <div className={panelContentLeftClasses}>\n <StatusText status={status} statusMessage={statusMessage} />\n {title && (\n <div className={panelStyles['panel-content-a__title-container']}>\n <Title appearance=\"title3\" htmlMarkup={titleHtmlMarkup} id={titleId} className={titleClasses}>\n {title}\n </Title>\n {hasBadge && (\n <div className={panelStyles.panel__badge}>\n <Badge color=\"blueberry\" testId=\"badge-status\">\n {statusMessage}\n </Badge>\n </div>\n )}\n </div>\n )}\n {contentA}\n </div>\n {!prioritiseMetaDataInContentB && contentBElement}\n </div>\n {icon && iconRight && <div className={panelStyles['panel__icon--right']}>{icon}</div>}\n </div>\n {renderContent()}\n </div>\n );\n});\n\nexport default Panel;\n"],"names":["PanelStatus","PanelVariant","PanelLayout","StatusText","status","statusMessage","statusIcon","palette","AlertSignFill","Pencil","statusMessageClass","classNames","panelStyles","Icon","IconSize","React","DateTime","date","time","Calendar","Watch","Panel","props","ref","children","contentA","contentB","prioritiseMetaDataInContentB","className","testId","title","titleHtmlMarkup","url","target","icon","iconRight","variant","buttonText","buttonTextClose","buttonAriaLabelledById","buttonAriaLabel","layout","containerAsButton","noTopBorder","buttonOnClick","buttonHtmlMarkup","expanded","onExpand","renderChildrenWhenClosed","focusable","isExpanded","setIsExpanded","useExpand","titleId","useUuid","buttonTextId","hasBadge","layout3","panelWrapperClasses","panelClasses","panelContainerClasses","panelContentLeftClasses","panelContentRightClasses","panelContentBClasses","titleClasses","renderDetailsButton","ariaLabelAttributes","getAriaLabelAttributes","commonProps","Button","ChevronUp","ChevronDown","ArrowRight","btnContainerClass","renderContent","panelDetailsClasses","contentBElement","AnalyticsId","Title","Badge","Panel$1"],"mappings":"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"}
|
package/StepButtons.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StepButtons.js","sources":["../src/components/StepButtons/StepButtons.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { ButtonProps } from '../Button';\n\nimport styles from './styles.module.scss';\n\
|
|
1
|
+
{"version":3,"file":"StepButtons.js","sources":["../src/components/StepButtons/StepButtons.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { ButtonProps } from '../Button';\n\nimport styles from './styles.module.scss';\n\nexport interface StepButtonsProps {\n /** Knapp for å gå tilbake. Vises med \"outline\" variant. */\n backButton?: React.ReactElement<ButtonProps>;\n /** Knapp for å gå videre. Vises med \"fill\" variant. */\n forwardButton?: React.ReactElement<ButtonProps>;\n /** Ekstra knapper. Valgfritt utseende. */\n additionalButtons?: React.ReactElement<ButtonProps>[];\n /** Knapp for å avbryte eller fortsette senere. Vises med \"borderless\" variant. */\n cancelButton?: React.ReactElement<ButtonProps>;\n /** Knappene vil vises sticky nederst på skjermen. Default: false */\n sticky?: boolean;\n /** Sets the data-testid attribute. */\n testId?: string;\n}\n\nexport const StepButtons: React.FC<StepButtonsProps> = props => {\n const { backButton, forwardButton, additionalButtons, cancelButton, sticky = false, testId } = props;\n\n const navigationClasses = classNames(styles.stepbuttons, sticky && styles['stepbuttons--has-sticky-buttons']);\n\n if (backButton || forwardButton || additionalButtons || cancelButton) {\n return (\n <div className={navigationClasses} data-testid={testId} data-analyticsid={AnalyticsId.StepButtons}>\n {(backButton || forwardButton) && (\n <div className={classNames(styles.stepbuttons__buttons, styles['stepbuttons__buttons--navigation'])}>\n {backButton &&\n React.cloneElement(backButton, {\n variant: 'outline',\n wrapperClassName: classNames(styles['stepbuttons__button--back']),\n })}\n {forwardButton &&\n React.cloneElement(forwardButton, {\n variant: 'fill',\n wrapperClassName: classNames(styles['stepbuttons__button--forward']),\n })}\n </div>\n )}\n {additionalButtons && (\n <div className={classNames(styles.stepbuttons__buttons, styles['stepbuttons__buttons--additional'])}>{additionalButtons}</div>\n )}\n {cancelButton && (\n <div className={styles.stepbuttons__buttons}>\n {React.cloneElement(cancelButton, {\n variant: 'borderless',\n })}\n </div>\n )}\n </div>\n );\n }\n return null;\n};\n\nexport default StepButtons;\n"],"names":["StepButtons","props","backButton","forwardButton","additionalButtons","cancelButton","sticky","testId","navigationClasses","classNames","styles","React","AnalyticsId","StepButtons$1"],"mappings":"uJAwBO,MAAMA,EAAmDC,GAAA,CACxD,KAAA,CAAE,WAAAC,EAAY,cAAAC,EAAe,kBAAAC,EAAmB,aAAAC,EAAc,OAAAC,EAAS,GAAO,OAAAC,CAAW,EAAAN,EAEzFO,EAAoBC,EAAWC,EAAO,YAAaJ,GAAUI,EAAO,iCAAiC,CAAC,EAExG,OAAAR,GAAcC,GAAiBC,GAAqBC,EAEpDM,EAAA,cAAC,MAAI,CAAA,UAAWH,EAAmB,cAAaD,EAAQ,mBAAkBK,EAAY,WAClF,GAAAV,GAAcC,IACdQ,EAAA,cAAC,OAAI,UAAWF,EAAWC,EAAO,qBAAsBA,EAAO,kCAAkC,CAAC,CAC/F,EAAAR,GACCS,EAAM,aAAaT,EAAY,CAC7B,QAAS,UACT,iBAAkBO,EAAWC,EAAO,2BAA2B,CAAC,CACjE,CAAA,EACFP,GACCQ,EAAM,aAAaR,EAAe,CAChC,QAAS,OACT,iBAAkBM,EAAWC,EAAO,8BAA8B,CAAC,CACpE,CAAA,CACL,EAEDN,GACCO,EAAA,cAAC,OAAI,UAAWF,EAAWC,EAAO,qBAAsBA,EAAO,kCAAkC,CAAC,GAAIN,CAAkB,EAEzHC,GACEM,EAAA,cAAA,MAAA,CAAI,UAAWD,EAAO,oBAAA,EACpBC,EAAM,aAAaN,EAAc,CAChC,QAAS,YACV,CAAA,CACH,CAEJ,EAGG,IACT,EAEAQ,EAAeb"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Panel.d.ts","sourceRoot":"","sources":["../../../src/components/Panel/Panel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,YAAY,EAAe,MAAM,iBAAiB,CAAC;AAM5D,OAAe,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAS5D,OAAc,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAI5C,oBAAY,WAAW;IACrB,MAAM,WAAW;IACjB,GAAG,QAAQ;IACX,KAAK,UAAU;IACf,KAAK,UAAU;CAChB;AAED,oBAAY,YAAY;IACtB,IAAI,SAAS;IACb,KAAK,UAAU;IACf,MAAM,WAAW;IACjB,IAAI,SAAS;CACd;AAED,oBAAY,WAAW;IACrB,OAAO,YAAY;IACnB,OAAO,YAAY;IACnB,QAAQ,aAAa;IACrB,QAAQ,aAAa;IACrB,QAAQ,aAAa;CACtB;AAED,MAAM,WAAW,UAAU;IACzB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,yBAAyB;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+DAA+D;IAC/D,eAAe,CAAC,EAAE,SAAS,CAAC;IAC5B,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,yDAAyD;IACzD,MAAM,CAAC,EAAE,MAAM,OAAO,WAAW,CAAC;IAClC,uDAAuD;IACvD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,sDAAsD;IACtD,OAAO,CAAC,EAAE,MAAM,OAAO,YAAY,CAAC;IACpC,0DAA0D;IAC1D,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,kDAAkD;IAClD,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,8BAA8B;IAC9B,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,4BAA4B;IAC5B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,8BAA8B;IAC9B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,MAAM,CAAC;IACpC,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,MAAM,CAAC;IACpC,yEAAyE;IACzE,4BAA4B,CAAC,EAAE,OAAO,CAAC;IACvC,wBAAwB;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,8BAA8B;IAC9B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,+CAA+C;IAC/C,gBAAgB,CAAC,EAAE,UAAU,CAAC;IAC9B,6CAA6C;IAC7C,aAAa,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IACvC,yKAAyK;IACzK,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,8BAA8B;IAC9B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,kDAAkD;IAClD,4IAA4I;IAC5I,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,+BAA+B;IAC/B,MAAM,CAAC,EAAE,MAAM,OAAO,WAAW,CAAC;IAClC,oFAAoF;IACpF,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,8BAA8B;IAC9B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,8BAA8B;IAC9B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,gDAAgD;IAChD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,gCAAgC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,wCAAwC;IACxC,QAAQ,CAAC,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,sGAAsG;IACtG,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC,wCAAwC;IACxC,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAiDD,QAAA,MAAM,KAAK,
|
|
1
|
+
{"version":3,"file":"Panel.d.ts","sourceRoot":"","sources":["../../../src/components/Panel/Panel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,YAAY,EAAe,MAAM,iBAAiB,CAAC;AAM5D,OAAe,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAS5D,OAAc,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAI5C,oBAAY,WAAW;IACrB,MAAM,WAAW;IACjB,GAAG,QAAQ;IACX,KAAK,UAAU;IACf,KAAK,UAAU;CAChB;AAED,oBAAY,YAAY;IACtB,IAAI,SAAS;IACb,KAAK,UAAU;IACf,MAAM,WAAW;IACjB,IAAI,SAAS;CACd;AAED,oBAAY,WAAW;IACrB,OAAO,YAAY;IACnB,OAAO,YAAY;IACnB,QAAQ,aAAa;IACrB,QAAQ,aAAa;IACrB,QAAQ,aAAa;CACtB;AAED,MAAM,WAAW,UAAU;IACzB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,yBAAyB;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+DAA+D;IAC/D,eAAe,CAAC,EAAE,SAAS,CAAC;IAC5B,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,yDAAyD;IACzD,MAAM,CAAC,EAAE,MAAM,OAAO,WAAW,CAAC;IAClC,uDAAuD;IACvD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,sDAAsD;IACtD,OAAO,CAAC,EAAE,MAAM,OAAO,YAAY,CAAC;IACpC,0DAA0D;IAC1D,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,kDAAkD;IAClD,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,8BAA8B;IAC9B,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,4BAA4B;IAC5B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,8BAA8B;IAC9B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,MAAM,CAAC;IACpC,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,MAAM,CAAC;IACpC,yEAAyE;IACzE,4BAA4B,CAAC,EAAE,OAAO,CAAC;IACvC,wBAAwB;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,8BAA8B;IAC9B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,+CAA+C;IAC/C,gBAAgB,CAAC,EAAE,UAAU,CAAC;IAC9B,6CAA6C;IAC7C,aAAa,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IACvC,yKAAyK;IACzK,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,8BAA8B;IAC9B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,kDAAkD;IAClD,4IAA4I;IAC5I,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,+BAA+B;IAC/B,MAAM,CAAC,EAAE,MAAM,OAAO,WAAW,CAAC;IAClC,oFAAoF;IACpF,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,8BAA8B;IAC9B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,8BAA8B;IAC9B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,gDAAgD;IAChD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,gCAAgC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,wCAAwC;IACxC,QAAQ,CAAC,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,sGAAsG;IACtG,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC,wCAAwC;IACxC,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAiDD,QAAA,MAAM,KAAK,uFAyMT,CAAC;AAEH,eAAe,KAAK,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Step.d.ts","sourceRoot":"","sources":["../../../src/components/Step/Step.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAExC,OAAO,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAI1C,MAAM,WAAW,SAAS;IACxB,gCAAgC;IAChC,OAAO,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC;IAC3C,uBAAuB;IACvB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,2DAA2D;IAC3D,UAAU,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,WAAW,CAAC,CAAC;IAC7C,uDAAuD;IACvD,aAAa,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,WAAW,CAAC,CAAC;IAChD,0CAA0C;IAC1C,iBAAiB,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,WAAW,CAAC,EAAE,CAAC;IACtD,kFAAkF;IAClF,YAAY,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,WAAW,CAAC,CAAC;IAC/C,uHAAuH;IACvH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,QAAA,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,
|
|
1
|
+
{"version":3,"file":"Step.d.ts","sourceRoot":"","sources":["../../../src/components/Step/Step.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAExC,OAAO,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAI1C,MAAM,WAAW,SAAS;IACxB,gCAAgC;IAChC,OAAO,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC;IAC3C,uBAAuB;IACvB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,2DAA2D;IAC3D,UAAU,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,WAAW,CAAC,CAAC;IAC7C,uDAAuD;IACvD,aAAa,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,WAAW,CAAC,CAAC;IAChD,0CAA0C;IAC1C,iBAAiB,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,WAAW,CAAC,EAAE,CAAC;IACtD,kFAAkF;IAClF,YAAY,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,WAAW,CAAC,CAAC;IAC/C,uHAAuH;IACvH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,QAAA,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CA2B7B,CAAC;AAEF,eAAe,IAAI,CAAC"}
|
package/components/Step/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import
|
|
1
|
+
import e from"react";import{AnalyticsId as n}from"../../constants.js";import{S as d}from"../../StepButtons.js";import i from"./styles.module.scss";import"classnames";import"../StepButtons/styles.module.scss";const f=({stepper:t,children:p,backButton:s,forwardButton:a,additionalButtons:m,cancelButton:r,stickyButtons:c=!1,testId:o})=>{const l=s||a||m||r;return e.createElement("div",{"data-testid":o,"data-analyticsid":n.Step},t&&e.createElement("div",{className:i.step__stepper},t),e.createElement("div",{className:i.step__content},p),l&&e.createElement(d,{backButton:s,forwardButton:a,additionalButtons:m,cancelButton:r,sticky:c}))},g=f;export{g as default};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../src/components/Step/Step.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { ButtonProps } from '../Button';\nimport StepButtons from '../StepButtons';\nimport { StepperProps } from '../Stepper';\n\nimport styles from './styles.module.scss';\n\nexport interface StepProps {\n /** Stepper viser fremdriften */\n stepper?: React.ReactElement<StepperProps>;\n /** Innhold i steget */\n children: React.ReactNode;\n /** Knapp for å gå tilbake. Vises med \"outline\" variant. */\n backButton?: React.ReactElement<ButtonProps>;\n /** Knapp for å gå videre. Vises med \"fill\" variant. */\n forwardButton?: React.ReactElement<ButtonProps>;\n /** Ekstra knapper. Valgfritt utseende. */\n additionalButtons?: React.ReactElement<ButtonProps>[];\n /** Knapp for å avbryte eller fortsette senere. Vises med \"borderless\" variant. */\n cancelButton?: React.ReactElement<ButtonProps>;\n /** Knappene vil vises sticky nederst på skjermen dersom innholdet i Step tar mer plass enn vinduet. Default: false */\n stickyButtons?: boolean;\n /** Sets the data-testid attribute. */\n testId?: string;\n}\n\nconst Step: React.FC<StepProps> = ({\n stepper,\n children,\n backButton,\n forwardButton,\n additionalButtons,\n cancelButton,\n stickyButtons = false,\n testId,\n}) => {\n const hasNavigation = backButton || forwardButton || additionalButtons || cancelButton;\n
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../src/components/Step/Step.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { ButtonProps } from '../Button';\nimport StepButtons from '../StepButtons';\nimport { StepperProps } from '../Stepper';\n\nimport styles from './styles.module.scss';\n\nexport interface StepProps {\n /** Stepper viser fremdriften */\n stepper?: React.ReactElement<StepperProps>;\n /** Innhold i steget */\n children: React.ReactNode;\n /** Knapp for å gå tilbake. Vises med \"outline\" variant. */\n backButton?: React.ReactElement<ButtonProps>;\n /** Knapp for å gå videre. Vises med \"fill\" variant. */\n forwardButton?: React.ReactElement<ButtonProps>;\n /** Ekstra knapper. Valgfritt utseende. */\n additionalButtons?: React.ReactElement<ButtonProps>[];\n /** Knapp for å avbryte eller fortsette senere. Vises med \"borderless\" variant. */\n cancelButton?: React.ReactElement<ButtonProps>;\n /** Knappene vil vises sticky nederst på skjermen dersom innholdet i Step tar mer plass enn vinduet. Default: false */\n stickyButtons?: boolean;\n /** Sets the data-testid attribute. */\n testId?: string;\n}\n\nconst Step: React.FC<StepProps> = ({\n stepper,\n children,\n backButton,\n forwardButton,\n additionalButtons,\n cancelButton,\n stickyButtons = false,\n testId,\n}) => {\n const hasNavigation = backButton || forwardButton || additionalButtons || cancelButton;\n\n return (\n <div data-testid={testId} data-analyticsid={AnalyticsId.Step}>\n {stepper && <div className={styles.step__stepper}>{stepper}</div>}\n <div className={styles.step__content}>{children}</div>\n {hasNavigation && (\n <StepButtons\n backButton={backButton}\n forwardButton={forwardButton}\n additionalButtons={additionalButtons}\n cancelButton={cancelButton}\n sticky={stickyButtons}\n />\n )}\n </div>\n );\n};\n\nexport default Step;\n"],"names":["Step","stepper","children","backButton","forwardButton","additionalButtons","cancelButton","stickyButtons","testId","hasNavigation","React","AnalyticsId","styles","StepButtons","Step$1"],"mappings":"gNA8BA,MAAMA,EAA4B,CAAC,CACjC,QAAAC,EACA,SAAAC,EACA,WAAAC,EACA,cAAAC,EACA,kBAAAC,EACA,aAAAC,EACA,cAAAC,EAAgB,GAChB,OAAAC,CACF,IAAM,CACE,MAAAC,EAAgBN,GAAcC,GAAiBC,GAAqBC,EAGxE,OAAAI,EAAA,cAAC,OAAI,cAAaF,EAAQ,mBAAkBG,EAAY,IAAA,EACrDV,GAAWS,EAAA,cAAC,MAAI,CAAA,UAAWE,EAAO,aAAgB,EAAAX,CAAQ,EAC1DS,EAAA,cAAA,MAAA,CAAI,UAAWE,EAAO,aAAA,EAAgBV,CAAS,EAC/CO,GACCC,EAAA,cAACG,EAAA,CACC,WAAAV,EACA,cAAAC,EACA,kBAAAC,EACA,aAAAC,EACA,OAAQC,CAAA,CAAA,CAGd,CAEJ,EAEAO,EAAed"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { ButtonProps } from '../Button';
|
|
3
|
-
interface StepButtonsProps {
|
|
3
|
+
export interface StepButtonsProps {
|
|
4
4
|
/** Knapp for å gå tilbake. Vises med "outline" variant. */
|
|
5
5
|
backButton?: React.ReactElement<ButtonProps>;
|
|
6
6
|
/** Knapp for å gå videre. Vises med "fill" variant. */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StepButtons.d.ts","sourceRoot":"","sources":["../../../src/components/StepButtons/StepButtons.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAIxC,
|
|
1
|
+
{"version":3,"file":"StepButtons.d.ts","sourceRoot":"","sources":["../../../src/components/StepButtons/StepButtons.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAIxC,MAAM,WAAW,gBAAgB;IAC/B,2DAA2D;IAC3D,UAAU,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,WAAW,CAAC,CAAC;IAC7C,uDAAuD;IACvD,aAAa,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,WAAW,CAAC,CAAC;IAChD,0CAA0C;IAC1C,iBAAiB,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,WAAW,CAAC,EAAE,CAAC;IACtD,kFAAkF;IAClF,YAAY,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,WAAW,CAAC,CAAC;IAC/C,qEAAqE;IACrE,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAoClD,CAAC;AAEF,eAAe,WAAW,CAAC"}
|