@helsenorge/designsystem-react 9.4.3 → 10.0.0-beta.0

package/Avatar.js

@@ -12,7 +12,7 @@ var AvatarSize = /* @__PURE__ */ ((AvatarSize2) => {
   return AvatarSize2;
 })(AvatarSize || {});
 const Avatar = React.forwardRef(function AvatarForwardedRef(props, ref) {
-  const { children, className = "", selected = false, variant = "normal", type = "normal", size = "small", testId } = props;
+  const { children, className = "", selected = false, color = "blueberry", variant = "square", size = "small", testId } = props;
   const truncatedName = children.charAt(0).toLocaleUpperCase() + children.substring(1, 2);
   return /* @__PURE__ */ jsx(
     "span",
@@ -20,8 +20,8 @@ const Avatar = React.forwardRef(function AvatarForwardedRef(props, ref) {
       className: classNames(
         styles.avatar,
         selected && styles["avatar--selected"],
-        variant === "black" && styles["avatar--black"],
-        type === "circle" && styles["avatar--circle"],
+        color === "black" && styles["avatar--black"],
+        variant === "circle" && styles["avatar--circle"],
         size === "xsmall" && styles["avatar--xsmall"],
         size === "small" && styles["avatar--small"],
         className
@@ -29,7 +29,7 @@ const Avatar = React.forwardRef(function AvatarForwardedRef(props, ref) {
       ref,
       "data-testid": testId,
       "data-analyticsid": AnalyticsId.Avatar,
-      children: selected ? /* @__PURE__ */ jsx(Icon, { svgIcon: Check, size: IconSize.Small, color: variant === "black" ? palette.neutral900 : palette.blueberry600 }) : truncatedName
+      children: selected ? /* @__PURE__ */ jsx(Icon, { svgIcon: Check, size: IconSize.Small, color: color === "black" ? palette.neutral900 : palette.blueberry600 }) : truncatedName
     }
   );
 });

package/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.js","sources":["../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import React from 'react';\n\nimport cn from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { palette } from '../../theme/palette';\nimport Icon, { IconSize } from '../Icon';\nimport Check from '../Icons/Check';\n\nimport styles from './styles.module.scss';\n\nexport enum AvatarSize {\n  xsmall = 'xsmall',\n  small = 'small',\n}\n\nexport interface AvatarProps {\n  /** Name to display in the avatar. Will be truncated to the first two characters. */\n  children: string;\n  /** Displays a check icon to indicated the selected state. */\n  selected?: boolean;\n  /** background and color will be determined on variant. */\n  variant?: 'normal' | 'black';\n  /** @deprecated Square or circle variant of avatar. The circle should only be used for representation of someone else. NB: This is temporary and will be renamed in v10 */\n  type?: 'normal' | 'circle';\n  /** Avatar size. Default: small */\n  size?: keyof typeof AvatarSize;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\nexport type AvatarType = React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLElement>>;\nconst Avatar: AvatarType = React.forwardRef(function AvatarForwardedRef(props: AvatarProps, ref: React.ForwardedRef<HTMLElement>) {\n  const { children, className = '', selected = false, variant = 'normal', type = 'normal', size = AvatarSize.small, testId } = props;\n  const truncatedName = children.charAt(0).toLocaleUpperCase() + children.substring(1, 2);\n  return (\n    <span\n      className={cn(\n        styles.avatar,\n        selected && styles['avatar--selected'],\n        variant === 'black' && styles['avatar--black'],\n        type === 'circle' && styles['avatar--circle'],\n        size === AvatarSize.xsmall && styles['avatar--xsmall'],\n        size === AvatarSize.small && styles['avatar--small'],\n        className\n      )}\n      ref={ref}\n      data-testid={testId}\n      data-analyticsid={AnalyticsId.Avatar}\n    >\n      {selected ? (\n        <Icon svgIcon={Check} size={IconSize.Small} color={variant === 'black' ? palette.neutral900 : palette.blueberry600} />\n      ) : (\n        truncatedName\n      )}\n    </span>\n  );\n});\n\nexport default Avatar;\n"],"names":["AvatarSize","cn"],"mappings":";;;;;;;;AAWY,IAAA,+BAAAA,gBAAL;AACLA,cAAA,QAAS,IAAA;AACTA,cAAA,OAAQ,IAAA;AAFEA,SAAAA;AAAA,GAAA,cAAA,CAAA,CAAA;AAsBZ,MAAM,SAAqB,MAAM,WAAW,SAAS,mBAAmB,OAAoB,KAAsC;AAChI,QAAM,EAAE,UAAU,YAAY,IAAI,WAAW,OAAO,UAAU,UAAU,OAAO,UAAU,OAAO,SAAkB,OAAW,IAAA;AACvH,QAAA,gBAAgB,SAAS,OAAO,CAAC,EAAE,kBAAsB,IAAA,SAAS,UAAU,GAAG,CAAC;AAEpF,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC;AAAAA,QACT,OAAO;AAAA,QACP,YAAY,OAAO,kBAAkB;AAAA,QACrC,YAAY,WAAW,OAAO,eAAe;AAAA,QAC7C,SAAS,YAAY,OAAO,gBAAgB;AAAA,QAC5C,SAAS,YAAqB,OAAO,gBAAgB;AAAA,QACrD,SAAS,WAAoB,OAAO,eAAe;AAAA,QACnD;AAAA,MACF;AAAA,MACA;AAAA,MACA,eAAa;AAAA,MACb,oBAAkB,YAAY;AAAA,MAE7B,UACC,WAAA,oBAAC,MAAK,EAAA,SAAS,OAAO,MAAM,SAAS,OAAO,OAAO,YAAY,UAAU,QAAQ,aAAa,QAAQ,cAAc,IAEpH;AAAA,IAAA;AAAA,EAEJ;AAEJ,CAAC;"}
+{"version":3,"file":"Avatar.js","sources":["../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import React from 'react';\n\nimport cn from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { palette } from '../../theme/palette';\nimport Icon, { IconSize } from '../Icon';\nimport Check from '../Icons/Check';\n\nimport styles from './styles.module.scss';\n\nexport enum AvatarSize {\n  xsmall = 'xsmall',\n  small = 'small',\n}\n\nexport interface AvatarProps {\n  /** Name to display in the avatar. Will be truncated to the first two characters. */\n  children: string;\n  /** Displays a check icon to indicated the selected state. */\n  selected?: boolean;\n  /** Sets blue or black color on avatar. */\n  color?: 'blueberry' | 'black';\n  /** Square or circle variant of avatar. The circle should only be used for representation of someone else. NB: This is temporary and will be renamed in v10 */\n  variant?: 'square' | 'circle';\n  /** Avatar size. Default: small */\n  size?: keyof typeof AvatarSize;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\nexport type AvatarType = React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLElement>>;\nconst Avatar: AvatarType = React.forwardRef(function AvatarForwardedRef(props: AvatarProps, ref: React.ForwardedRef<HTMLElement>) {\n  const { children, className = '', selected = false, color = 'blueberry', variant = 'square', size = AvatarSize.small, testId } = props;\n  const truncatedName = children.charAt(0).toLocaleUpperCase() + children.substring(1, 2);\n  return (\n    <span\n      className={cn(\n        styles.avatar,\n        selected && styles['avatar--selected'],\n        color === 'black' && styles['avatar--black'],\n        variant === 'circle' && styles['avatar--circle'],\n        size === AvatarSize.xsmall && styles['avatar--xsmall'],\n        size === AvatarSize.small && styles['avatar--small'],\n        className\n      )}\n      ref={ref}\n      data-testid={testId}\n      data-analyticsid={AnalyticsId.Avatar}\n    >\n      {selected ? (\n        <Icon svgIcon={Check} size={IconSize.Small} color={color === 'black' ? palette.neutral900 : palette.blueberry600} />\n      ) : (\n        truncatedName\n      )}\n    </span>\n  );\n});\n\nexport default Avatar;\n"],"names":["AvatarSize","cn"],"mappings":";;;;;;;;AAWY,IAAA,+BAAAA,gBAAL;AACLA,cAAA,QAAS,IAAA;AACTA,cAAA,OAAQ,IAAA;AAFEA,SAAAA;AAAA,GAAA,cAAA,CAAA,CAAA;AAsBZ,MAAM,SAAqB,MAAM,WAAW,SAAS,mBAAmB,OAAoB,KAAsC;AAChI,QAAM,EAAE,UAAU,YAAY,IAAI,WAAW,OAAO,QAAQ,aAAa,UAAU,UAAU,OAAO,SAAkB,OAAW,IAAA;AAC3H,QAAA,gBAAgB,SAAS,OAAO,CAAC,EAAE,kBAAsB,IAAA,SAAS,UAAU,GAAG,CAAC;AAEpF,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC;AAAAA,QACT,OAAO;AAAA,QACP,YAAY,OAAO,kBAAkB;AAAA,QACrC,UAAU,WAAW,OAAO,eAAe;AAAA,QAC3C,YAAY,YAAY,OAAO,gBAAgB;AAAA,QAC/C,SAAS,YAAqB,OAAO,gBAAgB;AAAA,QACrD,SAAS,WAAoB,OAAO,eAAe;AAAA,QACnD;AAAA,MACF;AAAA,MACA;AAAA,MACA,eAAa;AAAA,MACb,oBAAkB,YAAY;AAAA,MAE7B,UACC,WAAA,oBAAC,MAAK,EAAA,SAAS,OAAO,MAAM,SAAS,OAAO,OAAO,UAAU,UAAU,QAAQ,aAAa,QAAQ,cAAc,IAElH;AAAA,IAAA;AAAA,EAEJ;AAEJ,CAAC;"}