@helsenorge/designsystem-react 2.7.0 → 2.8.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 +8 -1
- package/components/HighlightBox/styles.module.scss +1 -1
- package/components/NotificationPanel/NotificationPanel.d.ts +2 -0
- package/components/NotificationPanel/NotificationPanel.d.ts.map +1 -1
- package/components/NotificationPanel/componentdata.json +1 -1
- package/components/NotificationPanel/index.js +1 -1
- package/components/NotificationPanel/index.js.map +1 -1
- package/components/Panel/styles.module.scss +3 -3
- package/components/Textarea/styles.module.scss +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,10 @@
|
|
|
1
|
+
## [2.7.0](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/branchCompare?baseVersion=GTv2.6.2&targetVersion=GTv2.7.0) (2022-11-30)
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
### Features
|
|
5
|
+
|
|
6
|
+
* oppdatert med støtte for datetime i input felt ([d01eab1](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/commit/d01eab1e976887bb7b22d27108bbc47e06e04316)), closes [#288759](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/issues/288759)
|
|
7
|
+
|
|
1
8
|
## [2.6.2](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/branchCompare?baseVersion=GTv2.6.1&targetVersion=GTv2.6.2) (2022-11-17)
|
|
2
9
|
|
|
3
10
|
|
|
@@ -172,7 +179,7 @@
|
|
|
172
179
|
|
|
173
180
|
## 2.0.0-beta.1 (2022-09-15)
|
|
174
181
|
|
|
175
|
-
## 2.0.0-beta.0 (2022-09-
|
|
182
|
+
## 2.0.0-beta.0 (2022-09-12)
|
|
176
183
|
|
|
177
184
|
|
|
178
185
|
### Features
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NotificationPanel.d.ts","sourceRoot":"","sources":["../../../src/components/NotificationPanel/NotificationPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAc1B,oBAAY,yBAAyB,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;AAC7E,oBAAY,sBAAsB,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAUlE,UAAU,sBAAsB;IAC9B,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iCAAiC;IACjC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,mEAAmE;IACnE,OAAO,CAAC,EAAE,yBAAyB,CAAC;IACpC,0DAA0D;IAC1D,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,mDAAmD;IACnD,IAAI,CAAC,EAAE,sBAAsB,CAAC;IAC9B,sFAAsF;IACtF,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IAClE,8FAA8F;IAC9F,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,6EAA6E;IAC7E,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,+CAA+C;IAC/C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8BAA8B;IAC9B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,8BAA8B;IAC9B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAiBD,QAAA,MAAM,iBAAiB,+
|
|
1
|
+
{"version":3,"file":"NotificationPanel.d.ts","sourceRoot":"","sources":["../../../src/components/NotificationPanel/NotificationPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAc1B,oBAAY,yBAAyB,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;AAC7E,oBAAY,sBAAsB,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAUlE,UAAU,sBAAsB;IAC9B,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iCAAiC;IACjC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,mEAAmE;IACnE,OAAO,CAAC,EAAE,yBAAyB,CAAC;IACpC,0DAA0D;IAC1D,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,mDAAmD;IACnD,IAAI,CAAC,EAAE,sBAAsB,CAAC;IAC9B,sFAAsF;IACtF,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IAClE,8FAA8F;IAC9F,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,6EAA6E;IAC7E,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,+CAA+C;IAC/C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8BAA8B;IAC9B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,8BAA8B;IAC9B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,gCAAgC;IAChC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAiBD,QAAA,MAAM,iBAAiB,+FAmErB,CAAC;AAEH,eAAe,iBAAiB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"props":{"className":{"defaultValue":null,"description":"Adds custom classes to the element.","name":"className","parent":{"fileName":"src/components/NotificationPanel/NotificationPanel.tsx","name":"NotificationPanelProps"},"declarations":[{"fileName":"src/components/NotificationPanel/NotificationPanel.tsx","name":"NotificationPanelProps"}],"required":false,"type":{"name":"string"}},"children":{"defaultValue":null,"description":"Adds inner child elements.","name":"children","parent":{"fileName":"src/components/NotificationPanel/NotificationPanel.tsx","name":"NotificationPanelProps"},"declarations":[{"fileName":"src/components/NotificationPanel/NotificationPanel.tsx","name":"NotificationPanelProps"}],"required":false,"type":{"name":"ReactNode"}},"variant":{"defaultValue":null,"description":"Changes the visual representation of the notification panel.","name":"variant","parent":{"fileName":"src/components/NotificationPanel/NotificationPanel.tsx","name":"NotificationPanelProps"},"declarations":[{"fileName":"src/components/NotificationPanel/NotificationPanel.tsx","name":"NotificationPanelProps"}],"required":false,"type":{"name":"enum","raw":"NotificationPanelVariants","value":[{"value":"\"info\""},{"value":"\"warn\""},{"value":"\"alert\""},{"value":"\"crisis\""}]}},"shadow":{"defaultValue":null,"description":"Adds a shadow effect around the notification panel.","name":"shadow","parent":{"fileName":"src/components/NotificationPanel/NotificationPanel.tsx","name":"NotificationPanelProps"},"declarations":[{"fileName":"src/components/NotificationPanel/NotificationPanel.tsx","name":"NotificationPanelProps"}],"required":false,"type":{"name":"boolean"}},"size":{"defaultValue":null,"description":"Sets a fixed size for the content container.","name":"size","parent":{"fileName":"src/components/NotificationPanel/NotificationPanel.tsx","name":"NotificationPanelProps"},"declarations":[{"fileName":"src/components/NotificationPanel/NotificationPanel.tsx","name":"NotificationPanelProps"}],"required":false,"type":{"name":"enum","raw":"NotificationPanelSizes","value":[{"value":"\"small\""},{"value":"\"medium\""},{"value":"\"large\""}]}},"onClick":{"defaultValue":null,"description":"Used in combination with dismissiable property to close the notification panel.","name":"onClick","parent":{"fileName":"src/components/NotificationPanel/NotificationPanel.tsx","name":"NotificationPanelProps"},"declarations":[{"fileName":"src/components/NotificationPanel/NotificationPanel.tsx","name":"NotificationPanelProps"}],"required":false,"type":{"name":"((e?: MouseEvent<HTMLElement, MouseEvent>) => void)"}},"dismissable":{"defaultValue":null,"description":"Toggles the close button in the top right corner. Will only show if there are children.","name":"dismissable","parent":{"fileName":"src/components/NotificationPanel/NotificationPanel.tsx","name":"NotificationPanelProps"},"declarations":[{"fileName":"src/components/NotificationPanel/NotificationPanel.tsx","name":"NotificationPanelProps"}],"required":false,"type":{"name":"boolean"}},"fluid":{"defaultValue":null,"description":"Enables a fluid outer container that spans the entire width of parent.","name":"fluid","parent":{"fileName":"src/components/NotificationPanel/NotificationPanel.tsx","name":"NotificationPanelProps"},"declarations":[{"fileName":"src/components/NotificationPanel/NotificationPanel.tsx","name":"NotificationPanelProps"}],"required":false,"type":{"name":"boolean"}},"label":{"defaultValue":null,"description":"Sets a label for the notification panel.","name":"label","parent":{"fileName":"src/components/NotificationPanel/NotificationPanel.tsx","name":"NotificationPanelProps"},"declarations":[{"fileName":"src/components/NotificationPanel/NotificationPanel.tsx","name":"NotificationPanelProps"}],"required":false,"type":{"name":"string"}},"ariaLabelCloseBtn":{"defaultValue":null,"description":"Close button aria-label","name":"ariaLabelCloseBtn","parent":{"fileName":"src/components/NotificationPanel/NotificationPanel.tsx","name":"NotificationPanelProps"},"declarations":[{"fileName":"src/components/NotificationPanel/NotificationPanel.tsx","name":"NotificationPanelProps"}],"required":false,"type":{"name":"string"}},"labelId":{"defaultValue":null,"description":"Custom id for the label","name":"labelId","parent":{"fileName":"src/components/NotificationPanel/NotificationPanel.tsx","name":"NotificationPanelProps"},"declarations":[{"fileName":"src/components/NotificationPanel/NotificationPanel.tsx","name":"NotificationPanelProps"}],"required":false,"type":{"name":"string"}},"testId":{"defaultValue":null,"description":"Sets the data-testid attribute.","name":"testId","parent":{"fileName":"src/components/NotificationPanel/NotificationPanel.tsx","name":"NotificationPanelProps"},"declarations":[{"fileName":"src/components/NotificationPanel/NotificationPanel.tsx","name":"NotificationPanelProps"}],"required":false,"type":{"name":"string"}}}}
|
|
1
|
+
{"props":{"className":{"defaultValue":null,"description":"Adds custom classes to the element.","name":"className","parent":{"fileName":"src/components/NotificationPanel/NotificationPanel.tsx","name":"NotificationPanelProps"},"declarations":[{"fileName":"src/components/NotificationPanel/NotificationPanel.tsx","name":"NotificationPanelProps"}],"required":false,"type":{"name":"string"}},"children":{"defaultValue":null,"description":"Adds inner child elements.","name":"children","parent":{"fileName":"src/components/NotificationPanel/NotificationPanel.tsx","name":"NotificationPanelProps"},"declarations":[{"fileName":"src/components/NotificationPanel/NotificationPanel.tsx","name":"NotificationPanelProps"}],"required":false,"type":{"name":"ReactNode"}},"variant":{"defaultValue":null,"description":"Changes the visual representation of the notification panel.","name":"variant","parent":{"fileName":"src/components/NotificationPanel/NotificationPanel.tsx","name":"NotificationPanelProps"},"declarations":[{"fileName":"src/components/NotificationPanel/NotificationPanel.tsx","name":"NotificationPanelProps"}],"required":false,"type":{"name":"enum","raw":"NotificationPanelVariants","value":[{"value":"\"info\""},{"value":"\"warn\""},{"value":"\"alert\""},{"value":"\"crisis\""}]}},"shadow":{"defaultValue":null,"description":"Adds a shadow effect around the notification panel.","name":"shadow","parent":{"fileName":"src/components/NotificationPanel/NotificationPanel.tsx","name":"NotificationPanelProps"},"declarations":[{"fileName":"src/components/NotificationPanel/NotificationPanel.tsx","name":"NotificationPanelProps"}],"required":false,"type":{"name":"boolean"}},"size":{"defaultValue":null,"description":"Sets a fixed size for the content container.","name":"size","parent":{"fileName":"src/components/NotificationPanel/NotificationPanel.tsx","name":"NotificationPanelProps"},"declarations":[{"fileName":"src/components/NotificationPanel/NotificationPanel.tsx","name":"NotificationPanelProps"}],"required":false,"type":{"name":"enum","raw":"NotificationPanelSizes","value":[{"value":"\"small\""},{"value":"\"medium\""},{"value":"\"large\""}]}},"onClick":{"defaultValue":null,"description":"Used in combination with dismissiable property to close the notification panel.","name":"onClick","parent":{"fileName":"src/components/NotificationPanel/NotificationPanel.tsx","name":"NotificationPanelProps"},"declarations":[{"fileName":"src/components/NotificationPanel/NotificationPanel.tsx","name":"NotificationPanelProps"}],"required":false,"type":{"name":"((e?: MouseEvent<HTMLElement, MouseEvent>) => void)"}},"dismissable":{"defaultValue":null,"description":"Toggles the close button in the top right corner. Will only show if there are children.","name":"dismissable","parent":{"fileName":"src/components/NotificationPanel/NotificationPanel.tsx","name":"NotificationPanelProps"},"declarations":[{"fileName":"src/components/NotificationPanel/NotificationPanel.tsx","name":"NotificationPanelProps"}],"required":false,"type":{"name":"boolean"}},"fluid":{"defaultValue":null,"description":"Enables a fluid outer container that spans the entire width of parent.","name":"fluid","parent":{"fileName":"src/components/NotificationPanel/NotificationPanel.tsx","name":"NotificationPanelProps"},"declarations":[{"fileName":"src/components/NotificationPanel/NotificationPanel.tsx","name":"NotificationPanelProps"}],"required":false,"type":{"name":"boolean"}},"label":{"defaultValue":null,"description":"Sets a label for the notification panel.","name":"label","parent":{"fileName":"src/components/NotificationPanel/NotificationPanel.tsx","name":"NotificationPanelProps"},"declarations":[{"fileName":"src/components/NotificationPanel/NotificationPanel.tsx","name":"NotificationPanelProps"}],"required":false,"type":{"name":"string"}},"ariaLabelCloseBtn":{"defaultValue":null,"description":"Close button aria-label","name":"ariaLabelCloseBtn","parent":{"fileName":"src/components/NotificationPanel/NotificationPanel.tsx","name":"NotificationPanelProps"},"declarations":[{"fileName":"src/components/NotificationPanel/NotificationPanel.tsx","name":"NotificationPanelProps"}],"required":false,"type":{"name":"string"}},"labelId":{"defaultValue":null,"description":"Custom id for the label","name":"labelId","parent":{"fileName":"src/components/NotificationPanel/NotificationPanel.tsx","name":"NotificationPanelProps"},"declarations":[{"fileName":"src/components/NotificationPanel/NotificationPanel.tsx","name":"NotificationPanelProps"}],"required":false,"type":{"name":"string"}},"role":{"defaultValue":null,"description":"Custom role for the panel","name":"role","parent":{"fileName":"src/components/NotificationPanel/NotificationPanel.tsx","name":"NotificationPanelProps"},"declarations":[{"fileName":"src/components/NotificationPanel/NotificationPanel.tsx","name":"NotificationPanelProps"}],"required":false,"type":{"name":"enum","raw":"\"alert\"","value":[{"value":"\"alert\""}]}},"testId":{"defaultValue":null,"description":"Sets the data-testid attribute.","name":"testId","parent":{"fileName":"src/components/NotificationPanel/NotificationPanel.tsx","name":"NotificationPanelProps"},"declarations":[{"fileName":"src/components/NotificationPanel/NotificationPanel.tsx","name":"NotificationPanelProps"}],"required":false,"type":{"name":"string"}}}}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import t from"react";import p from"classnames";import e from"./styles.module.scss";import{C as
|
|
1
|
+
import t from"react";import p from"classnames";import e from"./styles.module.scss";import{C as L}from"../../Close.js";import{AnalyticsId as A}from"../../constants.js";import{useUuid as S}from"../../hooks/useUuid.js";import{palette as o}from"../../theme/palette.js";import{getAriaLabelAttributes as $}from"../../utils/accessibility.js";import{Icon as r}from"../Icons/Icon.js";import P from"../Icons/InfoSignStroke.js";import h from"../Icons/AlertSignStroke.js";import v from"../Icons/AlertSignFill.js";import"../Icons/X.js";import"../../uuid.js";import"../../utils/environment.js";import"../Close/styles.module.scss";import"../../hooks/useBreakpoint.js";import"../../theme/grid.js";const F={info:t.createElement(r,{svgIcon:P,color:o.kiwi900,hoverColor:o.kiwi900}),warn:t.createElement(r,{svgIcon:h,color:"black",hoverColor:"black"}),alert:t.createElement(r,{svgIcon:v,color:o.cherry500,hoverColor:o.cherry500}),alertLabel:t.createElement(r,{svgIcon:h,color:o.cherry500,hoverColor:o.cherry500}),crisis:t.createElement(r,{svgIcon:v,color:o.banana200,hoverColor:o.banana200})},M=({fluid:l,variant:s,shadow:n,children:a})=>{if(l){const c=p(e["fluid-wrapper"],e[`fluid-wrapper--${s}`],{[e["fluid-wrapper--shadow"]]:n});return t.createElement("div",{className:c},a)}return a},Y=t.forwardRef((l,s)=>{const{children:n,variant:a="info",shadow:c=!1,dismissable:d=!1,onClick:C,label:i,fluid:b=!1,size:u,className:E,labelId:I,role:_,testId:g}=l,m=S(I),w=()=>{const k=p(e["notification-panel__content"],e[`notification-panel__content--${a}`]);return t.createElement("div",{className:k,id:i?void 0:m},i&&t.createElement("h1",{className:e["notification-panel__label"],dangerouslySetInnerHTML:{__html:i},id:m}),n)},f=!!i&&!n,y=p(e["notification-panel"],u&&e[`notification-panel--${u}`],e[`notification-panel--${a}`],{[e["notification-panel--shadow"]]:!b&&c,[e["notification-panel--has-children"]]:!!n,[e["notification-panel--label-only"]]:f,[e["notification-panel--dismissable"]]:!f&&d},E),N=$({label:i,id:m});return t.createElement(M,{fluid:b,variant:a,shadow:c},t.createElement("section",{ref:s,role:_,"data-testid":g,"data-analyticsid":A.NotificationPanel,className:y,...N},t.createElement("span",{className:e["notification-panel__icon"]},F[a==="alert"&&i&&!n?"alertLabel":a]),!f&&d&&t.createElement("span",{className:e["notification-panel__close"]},t.createElement(L,{ariaLabel:l.ariaLabelCloseBtn,onClick:C})),w()))});export{Y as default};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../src/components/NotificationPanel/NotificationPanel.tsx"],"sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\n\nimport styles from './styles.module.scss';\nimport Close from '../Close';\nimport { AnalyticsId } from '../../constants';\nimport { useUuid } from '../../hooks/useUuid';\nimport { palette } from '../../theme/palette';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport Icon from '../Icons';\nimport InfoSignStroke from '../Icons/InfoSignStroke';\nimport AlertSignStroke from '../Icons/AlertSignStroke';\nimport AlertSignFill from '../Icons/AlertSignFill';\n\nexport type NotificationPanelVariants = 'info' | 'warn' | 'alert' | 'crisis';\nexport type NotificationPanelSizes = 'small' | 'medium' | 'large';\n\nconst variantToIconMap = {\n info: <Icon svgIcon={InfoSignStroke} color={palette.kiwi900} hoverColor={palette.kiwi900} />,\n warn: <Icon svgIcon={AlertSignStroke} color=\"black\" hoverColor=\"black\" />,\n alert: <Icon svgIcon={AlertSignFill} color={palette.cherry500} hoverColor={palette.cherry500} />,\n alertLabel: <Icon svgIcon={AlertSignStroke} color={palette.cherry500} hoverColor={palette.cherry500} />,\n crisis: <Icon svgIcon={AlertSignFill} color={palette.banana200} hoverColor={palette.banana200} />,\n};\n\ninterface NotificationPanelProps {\n /** Adds custom classes to the element. */\n className?: string;\n /** Adds inner child elements. */\n children?: React.ReactNode;\n /** Changes the visual representation of the notification panel. */\n variant?: NotificationPanelVariants;\n /** Adds a shadow effect around the notification panel. */\n shadow?: boolean;\n /** Sets a fixed size for the content container. */\n size?: NotificationPanelSizes;\n /** Used in combination with dismissiable property to close the notification panel. */\n onClick?: (e?: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n /** Toggles the close button in the top right corner. Will only show if there are children. */\n dismissable?: boolean;\n /** Enables a fluid outer container that spans the entire width of parent. */\n fluid?: boolean;\n /** Sets a label for the notification panel. */\n label?: string;\n /** Close button aria-label */\n ariaLabelCloseBtn?: string;\n /** Custom id for the label */\n labelId?: string;\n /** Sets the data-testid attribute. */\n testId?: string;\n}\n\ntype WrapFluidProps = Pick<NotificationPanelProps, 'fluid' | 'variant' | 'shadow'> & {\n children: React.ReactElement;\n};\n\nconst FluidWrapper: React.FC<WrapFluidProps> = ({ fluid, variant, shadow, children }) => {\n if (fluid) {\n const fluidClasses = classNames(styles['fluid-wrapper'], styles[`fluid-wrapper--${variant}`], {\n [styles['fluid-wrapper--shadow']]: shadow,\n });\n\n return <div className={fluidClasses}>{children}</div>;\n }\n return children;\n};\n\nconst NotificationPanel = React.forwardRef<HTMLDivElement, NotificationPanelProps>((props, ref) => {\n const {\n children,\n variant = 'info',\n shadow = false,\n dismissable = false,\n onClick,\n label,\n fluid = false,\n size,\n className,\n labelId,\n testId,\n } = props;\n const uuid = useUuid(labelId);\n\n const renderContent = (): JSX.Element => {\n const contentClasses = classNames(styles['notification-panel__content'], styles[`notification-panel__content--${variant}`]);\n\n return (\n <div className={contentClasses} id={!label ? uuid : undefined}>\n {label && <h1 className={styles['notification-panel__label']} dangerouslySetInnerHTML={{ __html: label }} id={uuid} />}\n {children}\n </div>\n );\n };\n\n const labelOnly = !!label && !children;\n\n const notificationPanelClasses = classNames(\n styles['notification-panel'],\n size && styles[`notification-panel--${size}`],\n styles[`notification-panel--${variant}`],\n {\n [styles['notification-panel--shadow']]: !fluid && shadow,\n [styles['notification-panel--has-children']]: !!children,\n [styles['notification-panel--label-only']]: labelOnly,\n [styles['notification-panel--dismissable']]: !labelOnly && dismissable,\n },\n className\n );\n\n const ariaLabelAttributes = getAriaLabelAttributes({ label, id: uuid });\n\n return (\n <FluidWrapper fluid={fluid} variant={variant} shadow={shadow}>\n <section\n ref={ref}\n data-testid={testId}\n data-analyticsid={AnalyticsId.NotificationPanel}\n className={notificationPanelClasses}\n {...ariaLabelAttributes}\n >\n <span className={styles['notification-panel__icon']}>\n {variantToIconMap[variant === 'alert' && label && !children ? 'alertLabel' : variant]}\n </span>\n {!labelOnly && dismissable && (\n <span className={styles['notification-panel__close']}>\n <Close ariaLabel={props.ariaLabelCloseBtn} onClick={onClick} />\n </span>\n )}\n {renderContent()}\n </section>\n </FluidWrapper>\n );\n});\n\nexport default NotificationPanel;\n"],"names":["variantToIconMap","React","Icon","InfoSignStroke","palette","AlertSignStroke","AlertSignFill","FluidWrapper","fluid","variant","shadow","children","fluidClasses","classNames","styles","NotificationPanel","props","ref","dismissable","onClick","label","size","className","labelId","testId","uuid","useUuid","renderContent","contentClasses","labelOnly","notificationPanelClasses","ariaLabelAttributes","getAriaLabelAttributes","AnalyticsId","Close"],"mappings":"yqBAiBA,MAAMA,EAAmB,CACvB,KAAOC,EAAA,cAAAC,EAAA,CAAK,QAASC,EAAgB,MAAOC,EAAQ,QAAS,WAAYA,EAAQ,OAAA,CAAS,EAC1F,KAAOH,EAAA,cAAAC,EAAA,CAAK,QAASG,EAAiB,MAAM,QAAQ,WAAW,OAAA,CAAQ,EACvE,MAAQJ,EAAA,cAAAC,EAAA,CAAK,QAASI,EAAe,MAAOF,EAAQ,UAAW,WAAYA,EAAQ,SAAA,CAAW,EAC9F,WAAaH,EAAA,cAAAC,EAAA,CAAK,QAASG,EAAiB,MAAOD,EAAQ,UAAW,WAAYA,EAAQ,SAAA,CAAW,EACrG,OAASH,EAAA,cAAAC,EAAA,CAAK,QAASI,EAAe,MAAOF,EAAQ,UAAW,WAAYA,EAAQ,SAAA,CAAW,CACjG,
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../src/components/NotificationPanel/NotificationPanel.tsx"],"sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\n\nimport styles from './styles.module.scss';\nimport Close from '../Close';\nimport { AnalyticsId } from '../../constants';\nimport { useUuid } from '../../hooks/useUuid';\nimport { palette } from '../../theme/palette';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport Icon from '../Icons';\nimport InfoSignStroke from '../Icons/InfoSignStroke';\nimport AlertSignStroke from '../Icons/AlertSignStroke';\nimport AlertSignFill from '../Icons/AlertSignFill';\n\nexport type NotificationPanelVariants = 'info' | 'warn' | 'alert' | 'crisis';\nexport type NotificationPanelSizes = 'small' | 'medium' | 'large';\n\nconst variantToIconMap = {\n info: <Icon svgIcon={InfoSignStroke} color={palette.kiwi900} hoverColor={palette.kiwi900} />,\n warn: <Icon svgIcon={AlertSignStroke} color=\"black\" hoverColor=\"black\" />,\n alert: <Icon svgIcon={AlertSignFill} color={palette.cherry500} hoverColor={palette.cherry500} />,\n alertLabel: <Icon svgIcon={AlertSignStroke} color={palette.cherry500} hoverColor={palette.cherry500} />,\n crisis: <Icon svgIcon={AlertSignFill} color={palette.banana200} hoverColor={palette.banana200} />,\n};\n\ninterface NotificationPanelProps {\n /** Adds custom classes to the element. */\n className?: string;\n /** Adds inner child elements. */\n children?: React.ReactNode;\n /** Changes the visual representation of the notification panel. */\n variant?: NotificationPanelVariants;\n /** Adds a shadow effect around the notification panel. */\n shadow?: boolean;\n /** Sets a fixed size for the content container. */\n size?: NotificationPanelSizes;\n /** Used in combination with dismissiable property to close the notification panel. */\n onClick?: (e?: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n /** Toggles the close button in the top right corner. Will only show if there are children. */\n dismissable?: boolean;\n /** Enables a fluid outer container that spans the entire width of parent. */\n fluid?: boolean;\n /** Sets a label for the notification panel. */\n label?: string;\n /** Close button aria-label */\n ariaLabelCloseBtn?: string;\n /** Custom id for the label */\n labelId?: string;\n /** Custom role for the panel */\n role?: 'alert';\n /** Sets the data-testid attribute. */\n testId?: string;\n}\n\ntype WrapFluidProps = Pick<NotificationPanelProps, 'fluid' | 'variant' | 'shadow'> & {\n children: React.ReactElement;\n};\n\nconst FluidWrapper: React.FC<WrapFluidProps> = ({ fluid, variant, shadow, children }) => {\n if (fluid) {\n const fluidClasses = classNames(styles['fluid-wrapper'], styles[`fluid-wrapper--${variant}`], {\n [styles['fluid-wrapper--shadow']]: shadow,\n });\n\n return <div className={fluidClasses}>{children}</div>;\n }\n return children;\n};\n\nconst NotificationPanel = React.forwardRef<HTMLDivElement, NotificationPanelProps>((props, ref) => {\n const {\n children,\n variant = 'info',\n shadow = false,\n dismissable = false,\n onClick,\n label,\n fluid = false,\n size,\n className,\n labelId,\n role,\n testId,\n } = props;\n const uuid = useUuid(labelId);\n\n const renderContent = (): JSX.Element => {\n const contentClasses = classNames(styles['notification-panel__content'], styles[`notification-panel__content--${variant}`]);\n\n return (\n <div className={contentClasses} id={!label ? uuid : undefined}>\n {label && <h1 className={styles['notification-panel__label']} dangerouslySetInnerHTML={{ __html: label }} id={uuid} />}\n {children}\n </div>\n );\n };\n\n const labelOnly = !!label && !children;\n\n const notificationPanelClasses = classNames(\n styles['notification-panel'],\n size && styles[`notification-panel--${size}`],\n styles[`notification-panel--${variant}`],\n {\n [styles['notification-panel--shadow']]: !fluid && shadow,\n [styles['notification-panel--has-children']]: !!children,\n [styles['notification-panel--label-only']]: labelOnly,\n [styles['notification-panel--dismissable']]: !labelOnly && dismissable,\n },\n className\n );\n\n const ariaLabelAttributes = getAriaLabelAttributes({ label, id: uuid });\n\n return (\n <FluidWrapper fluid={fluid} variant={variant} shadow={shadow}>\n <section\n ref={ref}\n role={role}\n data-testid={testId}\n data-analyticsid={AnalyticsId.NotificationPanel}\n className={notificationPanelClasses}\n {...ariaLabelAttributes}\n >\n <span className={styles['notification-panel__icon']}>\n {variantToIconMap[variant === 'alert' && label && !children ? 'alertLabel' : variant]}\n </span>\n {!labelOnly && dismissable && (\n <span className={styles['notification-panel__close']}>\n <Close ariaLabel={props.ariaLabelCloseBtn} onClick={onClick} />\n </span>\n )}\n {renderContent()}\n </section>\n </FluidWrapper>\n );\n});\n\nexport default NotificationPanel;\n"],"names":["variantToIconMap","React","Icon","InfoSignStroke","palette","AlertSignStroke","AlertSignFill","FluidWrapper","fluid","variant","shadow","children","fluidClasses","classNames","styles","NotificationPanel","props","ref","dismissable","onClick","label","size","className","labelId","role","testId","uuid","useUuid","renderContent","contentClasses","labelOnly","notificationPanelClasses","ariaLabelAttributes","getAriaLabelAttributes","AnalyticsId","Close"],"mappings":"yqBAiBA,MAAMA,EAAmB,CACvB,KAAOC,EAAA,cAAAC,EAAA,CAAK,QAASC,EAAgB,MAAOC,EAAQ,QAAS,WAAYA,EAAQ,OAAA,CAAS,EAC1F,KAAOH,EAAA,cAAAC,EAAA,CAAK,QAASG,EAAiB,MAAM,QAAQ,WAAW,OAAA,CAAQ,EACvE,MAAQJ,EAAA,cAAAC,EAAA,CAAK,QAASI,EAAe,MAAOF,EAAQ,UAAW,WAAYA,EAAQ,SAAA,CAAW,EAC9F,WAAaH,EAAA,cAAAC,EAAA,CAAK,QAASG,EAAiB,MAAOD,EAAQ,UAAW,WAAYA,EAAQ,SAAA,CAAW,EACrG,OAASH,EAAA,cAAAC,EAAA,CAAK,QAASI,EAAe,MAAOF,EAAQ,UAAW,WAAYA,EAAQ,SAAA,CAAW,CACjG,EAmCMG,EAAyC,CAAC,CAAE,MAAAC,EAAO,QAAAC,EAAS,OAAAC,EAAQ,SAAAC,KAAe,CACvF,GAAIH,EAAO,CACT,MAAMI,EAAeC,EAAWC,EAAO,iBAAkBA,EAAO,kBAAkBL,KAAY,CAC5F,CAACK,EAAO,0BAA2BJ,CAAA,CACpC,EAED,OAAQT,EAAA,cAAA,MAAA,CAAI,UAAWW,CAAA,EAAeD,CAAS,CACjD,CACO,OAAAA,CACT,EAEMI,EAAoBd,EAAM,WAAmD,CAACe,EAAOC,IAAQ,CAC3F,KAAA,CACJ,SAAAN,EACA,QAAAF,EAAU,OACV,OAAAC,EAAS,GACT,YAAAQ,EAAc,GACd,QAAAC,EACA,MAAAC,EACA,MAAAZ,EAAQ,GACR,KAAAa,EACA,UAAAC,EACA,QAAAC,EACA,KAAAC,EACA,OAAAC,CACE,EAAAT,EACEU,EAAOC,EAAQJ,CAAO,EAEtBK,EAAgB,IAAmB,CACvC,MAAMC,EAAiBhB,EAAWC,EAAO,+BAAgCA,EAAO,gCAAgCL,IAAU,EAE1H,OACGR,EAAA,cAAA,MAAA,CAAI,UAAW4B,EAAgB,GAAKT,EAAe,OAAPM,CAAO,EACjDN,GAAUnB,EAAA,cAAA,KAAA,CAAG,UAAWa,EAAO,6BAA8B,wBAAyB,CAAE,OAAQM,CAAM,EAAG,GAAIM,CAAA,CAAM,EACnHf,CACH,CAAA,EAIEmB,EAAY,CAAC,CAACV,GAAS,CAACT,EAExBoB,EAA2BlB,EAC/BC,EAAO,sBACPO,GAAQP,EAAO,uBAAuBO,KACtCP,EAAO,uBAAuBL,KAC9B,CACE,CAACK,EAAO,+BAAgC,CAACN,GAASE,EAClD,CAACI,EAAO,qCAAsC,CAAC,CAACH,EAChD,CAACG,EAAO,mCAAoCgB,EAC5C,CAAChB,EAAO,oCAAqC,CAACgB,GAAaZ,CAC7D,EACAI,CAAA,EAGIU,EAAsBC,EAAuB,CAAE,MAAAb,EAAO,GAAIM,EAAM,EAEtE,OACGzB,EAAA,cAAAM,EAAA,CAAa,MAAAC,EAAc,QAAAC,EAAkB,OAAAC,CAAA,EAC3CT,EAAA,cAAA,UAAA,CACC,IAAAgB,EACA,KAAAO,EACA,cAAaC,EACb,mBAAkBS,EAAY,kBAC9B,UAAWH,EACV,GAAGC,CAAA,EAEH/B,EAAA,cAAA,OAAA,CAAK,UAAWa,EAAO,2BAAA,EACrBd,EAAiBS,IAAY,SAAWW,GAAS,CAACT,EAAW,aAAeF,EAC/E,EACC,CAACqB,GAAaZ,GACZjB,EAAA,cAAA,OAAA,CAAK,UAAWa,EAAO,4BAAA,EACrBb,EAAA,cAAAkC,EAAA,CAAM,UAAWnB,EAAM,kBAAmB,QAAAG,CAAA,CAAkB,CAC/D,EAEDS,EACH,CAAA,CACF,CAEJ,CAAC"}
|
|
@@ -126,7 +126,7 @@
|
|
|
126
126
|
display: flex;
|
|
127
127
|
flex-direction: column;
|
|
128
128
|
@media (min-width: map-get($grid-breakpoints, lg)) {
|
|
129
|
-
align-self: end;
|
|
129
|
+
align-self: flex-end;
|
|
130
130
|
}
|
|
131
131
|
|
|
132
132
|
&--layout3 {
|
|
@@ -134,7 +134,7 @@
|
|
|
134
134
|
align-self: initial;
|
|
135
135
|
flex-direction: column;
|
|
136
136
|
@media (min-width: map-get($grid-breakpoints, lg)) {
|
|
137
|
-
align-self: end;
|
|
137
|
+
align-self: flex-end;
|
|
138
138
|
}
|
|
139
139
|
}
|
|
140
140
|
&--padding-top {
|
|
@@ -144,7 +144,7 @@
|
|
|
144
144
|
|
|
145
145
|
&__details-btn {
|
|
146
146
|
@media (min-width: map-get($grid-breakpoints, lg)) {
|
|
147
|
-
align-self: end;
|
|
147
|
+
align-self: flex-end;
|
|
148
148
|
}
|
|
149
149
|
}
|
|
150
150
|
|
package/package.json
CHANGED