@helsenorge/designsystem-react 5.2.0-beta.0 → 5.3.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/Close.js.map +1 -1
- package/Panel.js +1 -1
- package/Panel.js.map +1 -1
- package/StepButtons.js.map +1 -1
- package/components/Close/Close.d.ts +1 -1
- package/components/Close/Close.d.ts.map +1 -1
- package/components/Close/componentdata.json +1 -1
- package/components/Label/componentdata.json +1 -1
- package/components/Panel/Panel.d.ts +42 -40
- package/components/Panel/Panel.d.ts.map +1 -1
- package/components/Panel/componentdata.json +1 -1
- package/components/Panel/styles.module.scss +137 -191
- package/components/Panel/styles.module.scss.d.ts +24 -31
- package/components/PopMenu/PopMenu.d.ts.map +1 -1
- package/components/PopMenu/index.js +1 -1
- package/components/PopMenu/index.js.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
|
@@ -1,30 +1,33 @@
|
|
|
1
1
|
export type Styles = {
|
|
2
2
|
'datetime-container': string;
|
|
3
3
|
'datetime-container__icon': string;
|
|
4
|
+
'header-container': string;
|
|
4
5
|
panel: string;
|
|
5
6
|
panel__badge: string;
|
|
6
7
|
'panel__btn-container': string;
|
|
7
|
-
'panel__btn-container--
|
|
8
|
+
'panel__btn-container--no-button': string;
|
|
8
9
|
'panel__btn-container--no-content-b': string;
|
|
9
|
-
'panel__btn-container--padding-top': string;
|
|
10
|
-
panel__container: string;
|
|
11
|
-
'panel__container--grow': string;
|
|
12
|
-
'panel__container--layout1': string;
|
|
13
|
-
'panel__container--layout2': string;
|
|
14
|
-
'panel__container--layout3': string;
|
|
15
|
-
'panel__container--prioritiseMetaDataInContentB': string;
|
|
16
|
-
'panel__content-left--flex': string;
|
|
17
|
-
'panel__content-right--layout1': string;
|
|
18
|
-
'panel__content-right--layout2': string;
|
|
19
|
-
'panel__content-right--layout3': string;
|
|
20
|
-
'panel__content-right--layout3a': string;
|
|
21
|
-
'panel__content-right--layout3b': string;
|
|
22
|
-
'panel__content-right--layout3c': string;
|
|
23
|
-
'panel__content-right--prioritiseMetaDataInContentB': string;
|
|
24
10
|
'panel__details-btn': string;
|
|
25
11
|
panel__expand: string;
|
|
26
12
|
panel__icon: string;
|
|
27
|
-
'panel__icon--
|
|
13
|
+
'panel__icon--layout-1': string;
|
|
14
|
+
'panel__icon--layout-2': string;
|
|
15
|
+
'panel__icon--layout-3': string;
|
|
16
|
+
'panel__icon--no-content': string;
|
|
17
|
+
'panel__layout-1': string;
|
|
18
|
+
'panel__layout-1__content-a': string;
|
|
19
|
+
'panel__layout-1--with-icon': string;
|
|
20
|
+
'panel__layout-2': string;
|
|
21
|
+
'panel__layout-2__content-a': string;
|
|
22
|
+
'panel__layout-2__last-column': string;
|
|
23
|
+
'panel__layout-2--with-icon': string;
|
|
24
|
+
'panel__layout-3': string;
|
|
25
|
+
'panel__layout-3__last-column': string;
|
|
26
|
+
'panel__layout-3__last-column__content-b': string;
|
|
27
|
+
'panel__layout-3--a': string;
|
|
28
|
+
'panel__layout-3--b': string;
|
|
29
|
+
'panel__layout-3--c': string;
|
|
30
|
+
'panel__layout-3--with-icon': string;
|
|
28
31
|
'panel--button': string;
|
|
29
32
|
'panel--clickable': string;
|
|
30
33
|
'panel--draft': string;
|
|
@@ -38,27 +41,17 @@ export type Styles = {
|
|
|
38
41
|
'panel--stroke': string;
|
|
39
42
|
'panel--white': string;
|
|
40
43
|
'panel--with-icon': string;
|
|
41
|
-
'panel-content-a': string;
|
|
42
|
-
'panel-content-a__title': string;
|
|
43
|
-
'panel-content-a__title--badge': string;
|
|
44
|
-
'panel-content-a__title-container': string;
|
|
45
|
-
'panel-content-a--layout3a': string;
|
|
46
|
-
'panel-content-a--layout3b': string;
|
|
47
|
-
'panel-content-a--layout3c': string;
|
|
48
|
-
'panel-content-a--prioritiseMetaDataInContentB': string;
|
|
49
|
-
'panel-content-b': string;
|
|
50
|
-
'panel-content-b--layout1': string;
|
|
51
|
-
'panel-content-b--layout2': string;
|
|
52
|
-
'panel-content-b--layout3': string;
|
|
53
|
-
'panel-content-b--prioritiseMetaDataInContentB': string;
|
|
54
44
|
'panel-details': string;
|
|
55
45
|
'panel-details--line': string;
|
|
56
46
|
'panel-details--open': string;
|
|
57
47
|
'panel-details--white': string;
|
|
58
|
-
'panel-details--with-icon': string;
|
|
59
48
|
'panel-wrapper': string;
|
|
60
49
|
'status-message': string;
|
|
61
50
|
'status-message--new': string;
|
|
51
|
+
'title-container': string;
|
|
52
|
+
'title-container__title': string;
|
|
53
|
+
'title-container__title--badge': string;
|
|
54
|
+
'title-container--no-content-a': string;
|
|
62
55
|
};
|
|
63
56
|
|
|
64
57
|
export type ClassNames = keyof Styles;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PopMenu.d.ts","sourceRoot":"","sources":["../../../src/components/PopMenu/PopMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAchD,OAAiB,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAKtD,oBAAY,cAAc;IACxB,OAAO,aAAa;IACpB,MAAM,YAAY;IAClB,WAAW,iBAAiB;CAC7B;AAED,MAAM,WAAW,YAAY;IAC3B,2DAA2D;IAC3D,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,aAAa,CAAC,CAAC;IAC5C,kDAAkD;IAClD,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,0CAA0C;IAC1C,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,yDAAyD;IACzD,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,gEAAgE;IAChE,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,iEAAiE;IACjE,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,sDAAsD;IACtD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,yDAAyD;IACzD,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,0DAA0D;IAC1D,oBAAoB,CAAC,EAAE,MAAM,CAAC;CAC/B;AAED,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,
|
|
1
|
+
{"version":3,"file":"PopMenu.d.ts","sourceRoot":"","sources":["../../../src/components/PopMenu/PopMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAchD,OAAiB,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAKtD,oBAAY,cAAc;IACxB,OAAO,aAAa;IACpB,MAAM,YAAY;IAClB,WAAW,iBAAiB;CAC7B;AAED,MAAM,WAAW,YAAY;IAC3B,2DAA2D;IAC3D,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,aAAa,CAAC,CAAC;IAC5C,kDAAkD;IAClD,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,0CAA0C;IAC1C,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,yDAAyD;IACzD,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,gEAAgE;IAChE,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,iEAAiE;IACjE,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,sDAAsD;IACtD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,yDAAyD;IACzD,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,0DAA0D;IAC1D,oBAAoB,CAAC,EAAE,MAAM,CAAC;CAC/B;AAED,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CA6E1C,CAAC;AAEF,eAAe,OAAO,CAAC"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import
|
|
1
|
+
import e,{useRef as p,useState as w}from"react";import n from"classnames";import{IconSize as C,AnalyticsId as H}from"../../constants.js";import{useBreakpoint as _}from"../../hooks/useBreakpoint.js";import{useHover as z}from"../../hooks/useHover.js";import{useOutsideEvent as A}from"../../hooks/useOutsideEvent.js";import{getColor as M}from"../../theme/currys/color.js";import{breakpoints as P}from"../../theme/grid.js";import{isComponent as T}from"../../utils/component.js";import{C as $}from"../../Close.js";import{Icon as x}from"../Icons/Icon.js";import D from"../Icons/VerticalDots.js";import{L as G}from"../../LinkList.js";import{a as W}from"../../PopOver.js";import r from"./styles.module.scss";import"../../hooks/usePseudoClasses.js";import"../../theme/index.js";import"../../theme/palette.js";import"../../theme/spacers.js";import"../../utils/refs.js";import"../Icons/X.js";import"../../hooks/useUuid.js";import"../../uuid.js";import"../../utils/environment.js";import"../Close/styles.module.scss";import"../Icons/ChevronRight.js";import"../../ListHeader.js";import"../../ListHeaderText.js";import"../../StatusDot.js";import"../Icons/Attachment.js";import"../Icons/Group.js";import"../Icons/NoAccess.js";import"../Icons/Undo.js";import"../StatusDot/styles.module.scss";import"../ListHeader/styles.module.scss";import"../../Avatar.js";import"../Icons/Check.js";import"../Avatar/styles.module.scss";import"../../Badge.js";import"../Badge/styles.module.scss";import"../LinkList/styles.module.scss";import"../../hooks/useInterval.js";import"../../hooks/useIsVisible.js";import"../../hooks/useIntersectionObserver.js";import"../../hooks/useLayoutEvent.js";import"../../utils/debounce.js";import"../../hooks/useSize.js";import"../PopOver/styles.module.scss";var X=(o=>(o.onWhite="on-white",o.onGray="on-gray",o.onBlueberry="on-blueberry",o))(X||{});const j=o=>{const i=p(null),s=p(null),a=p(null),[m,l]=w(!1),{children:c,popOverClassName:I,popMenuClassName:k,openButtonTestId:B,closeButtonTestId:N,popOverTestId:y,popMenuVariant:u="on-white",openButtonAriaLabel:O,closeButtonAriaLabel:h}=o,f=n(r["pop-menu-button"],{[r[`pop-menu-button--${u}`]]:u}),d=_()<P.md;A(a,()=>l(!m));const{isHovered:E}=z(s),L=d?C.XSmall:C.Small,R=()=>{if(T(c,G))return e.createElement(W,{testId:y,className:n(r["pop-menu__pop-over"],I),arrowClassName:r["pop-menu__pop-over-arrow"],controllerRef:i,popOverRef:a},c)},b=(t,v)=>{v&&v.stopPropagation(),l(t)},S=e.createElement("button",{ref:s,"data-testid":B,className:f,"aria-label":O||"Se mer",onClick:t=>b(!0,t),type:"button"},e.createElement(x,{svgIcon:D,className:"test",color:M("black"),size:L,isHovered:E})),g=e.createElement($,{ariaLabel:h,color:"black",className:f,testId:N,ref:i,onClick:t=>b(!1,t),small:d});return e.createElement("div",{className:n(r["pop-menu-button"],k),"data-analyticsid":H.PopMenu},m?g:S,m&&R())},Go=j;export{j as PopMenu,X as PopMenuVariant,Go as default};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../src/components/PopMenu/PopMenu.tsx"],"sourcesContent":["import React, { useRef, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, IconSize } from '../../constants';\nimport { useBreakpoint } from '../../hooks/useBreakpoint';\nimport { useHover } from '../../hooks/useHover';\nimport { useOutsideEvent } from '../../hooks/useOutsideEvent';\nimport { getColor } from '../../theme/currys';\nimport { breakpoints } from '../../theme/grid';\nimport { isComponent } from '../../utils/component';\nimport Close from '../Close';\nimport Icon from '../Icons';\nimport VerticalDots from '../Icons/VerticalDots';\nimport LinkList, { LinkListProps } from '../LinkList';\nimport PopOver from '../PopOver';\n\nimport styles from './styles.module.scss';\n\nexport enum PopMenuVariant {\n onWhite = 'on-white',\n onGray = 'on-gray',\n onBlueberry = 'on-blueberry',\n}\n\nexport interface PopMenuProps {\n /** Content shown inside PopOver. Can only be a LinkList */\n children: React.ReactElement<LinkListProps>;\n /** Adds custom classes to the popover element. */\n popOverClassName?: string;\n /** Adds custom classes to the element. */\n popMenuClassName?: string;\n /** Changes responsive design for the trigger buttons. */\n popMenuVariant?: PopMenuVariant;\n /** Sets the data-testid attribute for the button that opens. */\n openButtonTestId?: string;\n /** Sets the data-testid attribute for the button that closes. */\n closeButtonTestId?: string;\n /** Sets the data-testid attribute for the popover. */\n popOverTestId?: string;\n /** Sets the arial-label attribute for the openButton. */\n openButtonAriaLabel?: string;\n /** Sets the arial-label attribute for the closeButton. */\n closeButtonAriaLabel?: string;\n}\n\nexport const PopMenu: React.FC<PopMenuProps> = (props: PopMenuProps) => {\n const closeRef = useRef<HTMLButtonElement>(null);\n const openRef = useRef<HTMLButtonElement>(null);\n const popOverRef = useRef<HTMLDivElement>(null);\n const [isOpen, setIsOpen] = useState(false);\n const {\n children,\n popOverClassName,\n popMenuClassName,\n openButtonTestId,\n closeButtonTestId,\n popOverTestId,\n popMenuVariant = PopMenuVariant.onWhite,\n openButtonAriaLabel,\n closeButtonAriaLabel,\n } = props;\n const buttonClasses = classNames(styles['pop-menu-button'], {\n [styles[`pop-menu-button--${popMenuVariant}`]]: popMenuVariant,\n });\n const breakpoint = useBreakpoint();\n const mobile = breakpoint < breakpoints.md;\n useOutsideEvent(popOverRef, () => setIsOpen(!isOpen));\n const { isHovered: openButtonIsHovered } = useHover(openRef);\n const mobileIconSize = mobile ? IconSize.XSmall : IconSize.Small;\n\n const renderChildren = () => {\n if (isComponent<LinkListProps>(children, LinkList)) {\n return (\n <PopOver\n testId={popOverTestId}\n className={classNames(styles['pop-menu__pop-over'], popOverClassName)}\n arrowClassName={styles['pop-menu__pop-over-arrow']}\n controllerRef={closeRef}\n popOverRef={popOverRef}\n >\n {children}\n </PopOver>\n );\n }\n };\n\n const openButton = (\n <button\n ref={openRef}\n data-testid={openButtonTestId}\n className={buttonClasses}\n aria-label={openButtonAriaLabel || 'Se mer'}\n onClick={()
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../src/components/PopMenu/PopMenu.tsx"],"sourcesContent":["import React, { useRef, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, IconSize } from '../../constants';\nimport { useBreakpoint } from '../../hooks/useBreakpoint';\nimport { useHover } from '../../hooks/useHover';\nimport { useOutsideEvent } from '../../hooks/useOutsideEvent';\nimport { getColor } from '../../theme/currys';\nimport { breakpoints } from '../../theme/grid';\nimport { isComponent } from '../../utils/component';\nimport Close from '../Close';\nimport Icon from '../Icons';\nimport VerticalDots from '../Icons/VerticalDots';\nimport LinkList, { LinkListProps } from '../LinkList';\nimport PopOver from '../PopOver';\n\nimport styles from './styles.module.scss';\n\nexport enum PopMenuVariant {\n onWhite = 'on-white',\n onGray = 'on-gray',\n onBlueberry = 'on-blueberry',\n}\n\nexport interface PopMenuProps {\n /** Content shown inside PopOver. Can only be a LinkList */\n children: React.ReactElement<LinkListProps>;\n /** Adds custom classes to the popover element. */\n popOverClassName?: string;\n /** Adds custom classes to the element. */\n popMenuClassName?: string;\n /** Changes responsive design for the trigger buttons. */\n popMenuVariant?: PopMenuVariant;\n /** Sets the data-testid attribute for the button that opens. */\n openButtonTestId?: string;\n /** Sets the data-testid attribute for the button that closes. */\n closeButtonTestId?: string;\n /** Sets the data-testid attribute for the popover. */\n popOverTestId?: string;\n /** Sets the arial-label attribute for the openButton. */\n openButtonAriaLabel?: string;\n /** Sets the arial-label attribute for the closeButton. */\n closeButtonAriaLabel?: string;\n}\n\nexport const PopMenu: React.FC<PopMenuProps> = (props: PopMenuProps) => {\n const closeRef = useRef<HTMLButtonElement>(null);\n const openRef = useRef<HTMLButtonElement>(null);\n const popOverRef = useRef<HTMLDivElement>(null);\n const [isOpen, setIsOpen] = useState(false);\n const {\n children,\n popOverClassName,\n popMenuClassName,\n openButtonTestId,\n closeButtonTestId,\n popOverTestId,\n popMenuVariant = PopMenuVariant.onWhite,\n openButtonAriaLabel,\n closeButtonAriaLabel,\n } = props;\n const buttonClasses = classNames(styles['pop-menu-button'], {\n [styles[`pop-menu-button--${popMenuVariant}`]]: popMenuVariant,\n });\n const breakpoint = useBreakpoint();\n const mobile = breakpoint < breakpoints.md;\n useOutsideEvent(popOverRef, () => setIsOpen(!isOpen));\n const { isHovered: openButtonIsHovered } = useHover(openRef);\n const mobileIconSize = mobile ? IconSize.XSmall : IconSize.Small;\n\n const renderChildren = () => {\n if (isComponent<LinkListProps>(children, LinkList)) {\n return (\n <PopOver\n testId={popOverTestId}\n className={classNames(styles['pop-menu__pop-over'], popOverClassName)}\n arrowClassName={styles['pop-menu__pop-over-arrow']}\n controllerRef={closeRef}\n popOverRef={popOverRef}\n >\n {children}\n </PopOver>\n );\n }\n };\n\n const handleOnClick = (isOpen: boolean, e?: React.MouseEvent<HTMLElement, MouseEvent>): void => {\n e && e.stopPropagation();\n setIsOpen(isOpen);\n };\n\n const openButton = (\n <button\n ref={openRef}\n data-testid={openButtonTestId}\n className={buttonClasses}\n aria-label={openButtonAriaLabel || 'Se mer'}\n onClick={(e?: React.MouseEvent<HTMLElement, MouseEvent>) => handleOnClick(true, e)}\n type=\"button\"\n >\n <Icon svgIcon={VerticalDots} className=\"test\" color={getColor('black')} size={mobileIconSize} isHovered={openButtonIsHovered} />\n </button>\n );\n\n const closeButton = (\n <Close\n ariaLabel={closeButtonAriaLabel}\n color=\"black\"\n className={buttonClasses}\n testId={closeButtonTestId}\n ref={closeRef}\n onClick={(e?: React.MouseEvent<HTMLElement, MouseEvent>) => handleOnClick(false, e)}\n small={mobile}\n />\n );\n\n return (\n <div className={classNames(styles['pop-menu-button'], popMenuClassName)} data-analyticsid={AnalyticsId.PopMenu}>\n {!isOpen ? openButton : closeButton}\n {isOpen && renderChildren()}\n </div>\n );\n};\n\nexport default PopMenu;\n"],"names":["PopMenuVariant","PopMenu","props","closeRef","useRef","openRef","popOverRef","isOpen","setIsOpen","useState","children","popOverClassName","popMenuClassName","openButtonTestId","closeButtonTestId","popOverTestId","popMenuVariant","openButtonAriaLabel","closeButtonAriaLabel","buttonClasses","classNames","styles","mobile","useBreakpoint","breakpoints","useOutsideEvent","openButtonIsHovered","useHover","mobileIconSize","IconSize","renderChildren","isComponent","LinkList","React","PopOver","handleOnClick","e","openButton","Icon","VerticalDots","getColor","closeButton","Close","AnalyticsId","PopMenu$1"],"mappings":"+tDAmBY,IAAAA,GAAAA,IACVA,EAAA,QAAU,WACVA,EAAA,OAAS,UACTA,EAAA,YAAc,eAHJA,IAAAA,GAAA,CAAA,CAAA,EA2BC,MAAAC,EAAmCC,GAAwB,CAChE,MAAAC,EAAWC,EAA0B,IAAI,EACzCC,EAAUD,EAA0B,IAAI,EACxCE,EAAaF,EAAuB,IAAI,EACxC,CAACG,EAAQC,CAAS,EAAIC,EAAS,EAAK,EACpC,CACJ,SAAAC,EACA,iBAAAC,EACA,iBAAAC,EACA,iBAAAC,EACA,kBAAAC,EACA,cAAAC,EACA,eAAAC,EAAiB,WACjB,oBAAAC,EACA,qBAAAC,CACE,EAAAhB,EACEiB,EAAgBC,EAAWC,EAAO,iBAAiB,EAAG,CAC1D,CAACA,EAAO,oBAAoBL,CAAc,EAAE,CAAC,EAAGA,CAAA,CACjD,EAEKM,EADaC,IACSC,EAAY,GACxCC,EAAgBnB,EAAY,IAAME,EAAU,CAACD,CAAM,CAAC,EACpD,KAAM,CAAE,UAAWmB,CAAoB,EAAIC,EAAStB,CAAO,EACrDuB,EAAiBN,EAASO,EAAS,OAASA,EAAS,MAErDC,EAAiB,IAAM,CACvB,GAAAC,EAA2BrB,EAAUsB,CAAQ,EAE7C,OAAAC,EAAA,cAACC,EAAA,CACC,OAAQnB,EACR,UAAWK,EAAWC,EAAO,oBAAoB,EAAGV,CAAgB,EACpE,eAAgBU,EAAO,0BAA0B,EACjD,cAAelB,EACf,WAAAG,CAAA,EAECI,CAAA,CAGP,EAGIyB,EAAgB,CAAC5B,EAAiB6B,IAAwD,CAC9FA,GAAKA,EAAE,kBACP5B,EAAUD,CAAM,CAAA,EAGZ8B,EACJJ,EAAA,cAAC,SAAA,CACC,IAAK5B,EACL,cAAaQ,EACb,UAAWM,EACX,aAAYF,GAAuB,SACnC,QAAUmB,GAAkDD,EAAc,GAAMC,CAAC,EACjF,KAAK,QAAA,EAEJH,EAAA,cAAAK,EAAA,CAAK,QAASC,EAAc,UAAU,OAAO,MAAOC,EAAS,OAAO,EAAG,KAAMZ,EAAgB,UAAWF,EAAqB,CAAA,EAI5He,EACJR,EAAA,cAACS,EAAA,CACC,UAAWxB,EACX,MAAM,QACN,UAAWC,EACX,OAAQL,EACR,IAAKX,EACL,QAAUiC,GAAkDD,EAAc,GAAOC,CAAC,EAClF,MAAOd,CAAA,CAAA,EAIX,uBACG,MAAI,CAAA,UAAWF,EAAWC,EAAO,iBAAiB,EAAGT,CAAgB,EAAG,mBAAkB+B,EAAY,SACnGpC,EAAsBkC,EAAbJ,EACV9B,GAAUuB,GACb,CAEJ,EAEAc,GAAe3C"}
|
|
@@ -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"}
|