@helsenorge/designsystem-react 2.6.2 → 2.8.0

package/components/NotificationPanel/index.js.map

@@ -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,EAiCMG,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,OAAAC,CACE,EAAAR,EACES,EAAOC,EAAQH,CAAO,EAEtBI,EAAgB,IAAmB,CACvC,MAAMC,EAAiBf,EAAWC,EAAO,+BAAgCA,EAAO,gCAAgCL,IAAU,EAE1H,OACGR,EAAA,cAAA,MAAA,CAAI,UAAW2B,EAAgB,GAAKR,EAAe,OAAPK,CAAO,EACjDL,GAAUnB,EAAA,cAAA,KAAA,CAAG,UAAWa,EAAO,6BAA8B,wBAAyB,CAAE,OAAQM,CAAM,EAAG,GAAIK,CAAA,CAAM,EACnHd,CACH,CAAA,EAIEkB,EAAY,CAAC,CAACT,GAAS,CAACT,EAExBmB,EAA2BjB,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,mCAAoCe,EAC5C,CAACf,EAAO,oCAAqC,CAACe,GAAaX,CAC7D,EACAI,CAAA,EAGIS,EAAsBC,EAAuB,CAAE,MAAAZ,EAAO,GAAIK,EAAM,EAEtE,OACGxB,EAAA,cAAAM,EAAA,CAAa,MAAAC,EAAc,QAAAC,EAAkB,OAAAC,CAAA,EAC3CT,EAAA,cAAA,UAAA,CACC,IAAAgB,EACA,cAAaO,EACb,mBAAkBS,EAAY,kBAC9B,UAAWH,EACV,GAAGC,CAAA,EAEH9B,EAAA,cAAA,OAAA,CAAK,UAAWa,EAAO,2BAAA,EACrBd,EAAiBS,IAAY,SAAWW,GAAS,CAACT,EAAW,aAAeF,EAC/E,EACC,CAACoB,GAAaX,GACZjB,EAAA,cAAA,OAAA,CAAK,UAAWa,EAAO,4BAAA,EACrBb,EAAA,cAAAiC,EAAA,CAAM,UAAWlB,EAAM,kBAAmB,QAAAG,CAAA,CAAkB,CAC/D,EAEDQ,EACH,CAAA,CACF,CAEJ,CAAC"}
+{"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"}

package/components/Panel/styles.module.scss

@@ -126,7 +126,7 @@
     display: flex;
     flex-direction: column;
     @media (min-width: map-get($grid-breakpoints, lg)) {
-      align-self: end;
+      align-self: flex-end;
     }
 
     &--layout3 {
@@ -134,7 +134,7 @@
       align-self: initial;
       flex-direction: column;
       @media (min-width: map-get($grid-breakpoints, lg)) {
-        align-self: end;
+        align-self: flex-end;
       }
     }
     &--padding-top {
@@ -144,7 +144,7 @@
 
   &__details-btn {
     @media (min-width: map-get($grid-breakpoints, lg)) {
-      align-self: end;
+      align-self: flex-end;
     }
   }
 

package/components/Textarea/styles.module.scss

@@ -21,7 +21,7 @@
 
   &__counter-wrapper {
     display: flex;
-    justify-content: end;
+    justify-content: flex-end;
     padding-top: getSpacer(2xs);
     padding-right: 2px;
     font-size: $font-size-sm;

package/package.json

@@ -3,7 +3,7 @@
   "type": "module",
   "description": "The official design system for Helsenorge built with React.",
   "homepage": "https://helsenorge.design",
-  "version": "2.6.2",
+  "version": "2.8.0",
   "author": "Helsenorge",
   "license": "MIT",
   "peerDependencies": {