npm - @dnb/eufemia - Versions diffs - 10.7.0 → 10.9.0 - Mend

@dnb/eufemia 10.7.0 → 10.9.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.

Files changed (1468) hide show

package/components/breadcrumb/Breadcrumb.js CHANGED Viewed

@@ -20,7 +20,7 @@ export const defaultProps = {
   backToText: 'Back to...',
   isCollapsed: true,
   styleType: 'transparent',
-  collapsedStyleType: 'pistachio',
+  collapsedStyleType: 'info',
   spacing: false
 };
 const Breadcrumb = localProps => {
@@ -99,7 +99,7 @@ const Breadcrumb = localProps => {
     isCollapsed: false,
     noAnimation: noAnimation
   })), currentVariant === 'collapse' && React.createElement(Section, {
-    style_type: collapsedStyleType,
+    variant: collapsedStyleType,
     className: "dnb-breadcrumb__collapse"
   }, React.createElement(BreadcrumbMultiple, {
     data: data,

package/components/breadcrumb/Breadcrumb.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Breadcrumb.js","names":["React","useEffect","useState","classnames","createSkeletonClass","createSpacingClasses","Section","Button","useMediaQuery","Context","BreadcrumbItem","convertJsxToString","isTrue","validateDOMAttributes","extendPropsWithContext","BreadcrumbMultiple","defaultProps","skeleton","navText","goBackText","homeText","backToText","isCollapsed","styleType","collapsedStyleType","spacing","Breadcrumb","localProps","_context$translation","context","useContext","allProps","translation","className","children","items","variant","onClick","overrideIsCollapsed","noAnimation","data","href","props","_objectWithoutProperties","_excluded","skeletonClasses","spacingClasses","setCollapse","isSmallScreen","matchOnSSR","when","max","currentVariant","innerSpacing","createElement","_extends","style_type","text","icon","icon_position","Item"],"sources":["../../../../src/components/breadcrumb/Breadcrumb.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react'\nimport classnames from 'classnames'\n\n// Components\nimport { createSkeletonClass } from '../skeleton/SkeletonHelper'\nimport { createSpacingClasses } from '../space/SpacingHelper'\nimport Section, {\n SectionSpacing,\n SectionStyleTypes,\n} from '../section/Section'\nimport Button from '../button/Button'\n\n// Shared\nimport { useMediaQuery } from '../../shared'\nimport Context from '../../shared/Context'\nimport type { SpacingProps } from '../../shared/types'\nimport type { SkeletonShow } from '../skeleton/Skeleton'\n\n// Internal\nimport BreadcrumbItem, { BreadcrumbItemProps } from './BreadcrumbItem'\nimport {\n convertJsxToString,\n isTrue,\n validateDOMAttributes,\n extendPropsWithContext,\n} from '../../shared/component-helper'\nimport { BreadcrumbMultiple } from './BreadcrumbMultiple'\n\nexport interface BreadcrumbProps {\n /*\n Custom className on the component root\n * Default: null\n /\n className?: string\n\n /\n Skeleton should be applied when loading content\n * Default: null\n /\n skeleton?: SkeletonShow\n\n /\n Pass in a list of your pages as objects of breadcrumbitem to render them as breadcrumbitems.\n * Default: null\n /\n data?: Array<BreadcrumbItemProps>\n\n /\n The content of the component. Can be used instead of prop \"data\".\n * Default: null\n /\n children?:\n \| React.ReactElement<BreadcrumbItemProps>\n \| Array<React.ReactElement<BreadcrumbItemProps>>\n\n /\n The variant of the component.\n * Default: When children and data is not defined, it defaults to \"single\". If they are defined, the variant depends on the viewport.\n /\n variant?: 'single' \| 'multiple' \| 'collapse'\n\n /\n Handle the click event on 'single'/'collapse'\n * Default: null\n /\n onClick?: React.MouseEventHandler<HTMLButtonElement>\n\n /\n For variant 'single', use href (or onClick) to set href when clicking \"Back\"\n * Default: null\n /\n href?: string\n\n /\n Every <nav> on a page needs an unique aria-label text\n * Default: Page hierarchy\n /\n navText?: React.ReactNode\n\n /\n Add custom 'Back' text for variant 'single'\n * Default: 'Back' or defined by Context translation\n /\n goBackText?: React.ReactNode\n\n /\n Add custom 'Home' text\n * Default: 'Home' or defined by Context translation\n /\n homeText?: React.ReactNode\n\n /\n Add custom 'Back to...' text, for variant collapse\n * Default 'Back to...' or defined by Context translation\n /\n backToText?: React.ReactNode\n\n /\n If variant='collapse', you can override isCollapsed for the collapsed content by updating this value.\n * Default: null\n /\n isCollapsed?: boolean\n\n /\n Use one of the Section component style types (style_type)\n * Default: transparent\n /\n styleType?: SectionStyleTypes\n\n /\n Use one of the Section component style types (style_type)\n * Default: pistachio\n /\n collapsedStyleType?: SectionStyleTypes\n\n /\n Include spacing properties from the Section component in breadcrumb. If only `true` is given, the spacing will be `small`.\n * Default: false\n /\n spacing?: SectionSpacing\n\n /\n Will disable the height animation\n * Default: false\n */\n noAnimation?: boolean\n}\n\nexport const defaultProps = {\n skeleton: false,\n navText: 'Back',\n goBackText: 'Back',\n homeText: 'Home',\n backToText: 'Back to...',\n isCollapsed: true,\n styleType: 'transparent',\n collapsedStyleType: 'pistachio',\n spacing: false,\n}\n\nconst Breadcrumb = (localProps: BreadcrumbProps & SpacingProps) => {\n // Every component should have a context\n const context = React.useContext(Context)\n\n // Extract additional props from global context\n const allProps = extendPropsWithContext(\n localProps,\n defaultProps,\n context?.translation?.Breadcrumb,\n context?.Breadcrumb,\n { skeleton: context?.skeleton }\n )\n\n const {\n className,\n skeleton,\n children: items,\n variant,\n onClick,\n navText, // has a translation in context\n goBackText, // has a translation in context\n homeText, // eslint-disable-line\n backToText, // has a translation in context\n styleType,\n collapsedStyleType,\n isCollapsed: overrideIsCollapsed,\n spacing,\n noAnimation,\n data,\n href,\n ...props\n } = allProps\n const skeletonClasses = createSkeletonClass('font', skeleton, context)\n const spacingClasses = createSpacingClasses(props)\n\n const [isCollapsed, setCollapse] = useState(overrideIsCollapsed)\n const isSmallScreen = useMediaQuery({\n matchOnSSR: true,\n when: { max: 'medium' },\n })\n\n let currentVariant = variant\n if (!variant) {\n if (items \|\| data) {\n currentVariant = isSmallScreen ? 'collapse' : 'multiple'\n } else {\n currentVariant = 'single'\n }\n }\n\n useEffect(() => {\n setCollapse(overrideIsCollapsed)\n }, [overrideIsCollapsed])\n\n validateDOMAttributes(allProps, props)\n\n const innerSpacing = isTrue(spacing) ? 'small' : spacing\n\n return (\n <nav\n aria-label={convertJsxToString(navText)}\n className={classnames(\n 'dnb-breadcrumb',\n skeletonClasses,\n spacingClasses,\n className\n )}\n {...props}\n >\n <Section\n className=\"dnb-breadcrumb__bar\"\n style_type={styleType \|\| 'transparent'}\n spacing={innerSpacing}\n >\n {currentVariant === 'collapse' && (\n <Button\n text={backToText}\n variant=\"tertiary\"\n icon=\"chevron_left\"\n icon_position=\"left\"\n onClick={\n onClick \|\|\n (() => {\n setCollapse(!isCollapsed)\n })\n }\n aria-expanded={!isCollapsed}\n />\n )}\n\n {currentVariant === 'single' && (\n <Button\n text={goBackText}\n variant=\"tertiary\"\n icon=\"chevron_left\"\n icon_position=\"left\"\n onClick={onClick}\n href={href}\n />\n )}\n\n {currentVariant === 'multiple' && (\n <BreadcrumbMultiple\n data={data}\n items={items}\n isCollapsed={false}\n noAnimation={noAnimation}\n />\n )}\n </Section>\n\n {currentVariant === 'collapse' && (\n <Section\n style_type={collapsedStyleType}\n className=\"dnb-breadcrumb__collapse\"\n >\n <BreadcrumbMultiple\n data={data}\n items={items}\n isCollapsed={isCollapsed}\n noAnimation={noAnimation}\n />\n </Section>\n )}\n </nav>\n )\n}\n\nBreadcrumb.Item = BreadcrumbItem\n\nexport { BreadcrumbItem }\n\nexport default Breadcrumb\n"],"mappings":"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"}
1	+ {"version":3,"file":"Breadcrumb.js","names":["React","useEffect","useState","classnames","createSkeletonClass","createSpacingClasses","Section","Button","useMediaQuery","Context","BreadcrumbItem","convertJsxToString","isTrue","validateDOMAttributes","extendPropsWithContext","BreadcrumbMultiple","defaultProps","skeleton","navText","goBackText","homeText","backToText","isCollapsed","styleType","collapsedStyleType","spacing","Breadcrumb","localProps","_context$translation","context","useContext","allProps","translation","className","children","items","variant","onClick","overrideIsCollapsed","noAnimation","data","href","props","_objectWithoutProperties","_excluded","skeletonClasses","spacingClasses","setCollapse","isSmallScreen","matchOnSSR","when","max","currentVariant","innerSpacing","createElement","_extends","style_type","text","icon","icon_position","Item"],"sources":["../../../../src/components/breadcrumb/Breadcrumb.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react'\nimport classnames from 'classnames'\n\n// Components\nimport { createSkeletonClass } from '../skeleton/SkeletonHelper'\nimport { createSpacingClasses } from '../space/SpacingHelper'\nimport Section, {\n SectionSpacing,\n SectionStyleTypes,\n} from '../section/Section'\nimport Button from '../button/Button'\n\n// Shared\nimport { useMediaQuery } from '../../shared'\nimport Context from '../../shared/Context'\nimport type { SpacingProps } from '../../shared/types'\nimport type { SkeletonShow } from '../skeleton/Skeleton'\n\n// Internal\nimport BreadcrumbItem, { BreadcrumbItemProps } from './BreadcrumbItem'\nimport {\n convertJsxToString,\n isTrue,\n validateDOMAttributes,\n extendPropsWithContext,\n} from '../../shared/component-helper'\nimport { BreadcrumbMultiple } from './BreadcrumbMultiple'\n\nexport interface BreadcrumbProps {\n /*\n Custom className on the component root\n * Default: null\n /\n className?: string\n\n /\n Skeleton should be applied when loading content\n * Default: null\n /\n skeleton?: SkeletonShow\n\n /\n Pass in a list of your pages as objects of breadcrumbitem to render them as breadcrumbitems.\n * Default: null\n /\n data?: Array<BreadcrumbItemProps>\n\n /\n The content of the component. Can be used instead of prop \"data\".\n * Default: null\n /\n children?:\n \| React.ReactElement<BreadcrumbItemProps>\n \| Array<React.ReactElement<BreadcrumbItemProps>>\n\n /\n The variant of the component.\n * Default: When children and data is not defined, it defaults to \"single\". If they are defined, the variant depends on the viewport.\n /\n variant?: 'single' \| 'multiple' \| 'collapse'\n\n /\n Handle the click event on 'single'/'collapse'\n * Default: null\n /\n onClick?: React.MouseEventHandler<HTMLButtonElement>\n\n /\n For variant 'single', use href (or onClick) to set href when clicking \"Back\"\n * Default: null\n /\n href?: string\n\n /\n Every <nav> on a page needs an unique aria-label text\n * Default: Page hierarchy\n /\n navText?: React.ReactNode\n\n /\n Add custom 'Back' text for variant 'single'\n * Default: 'Back' or defined by Context translation\n /\n goBackText?: React.ReactNode\n\n /\n Add custom 'Home' text\n * Default: 'Home' or defined by Context translation\n /\n homeText?: React.ReactNode\n\n /\n Add custom 'Back to...' text, for variant collapse\n * Default 'Back to...' or defined by Context translation\n /\n backToText?: React.ReactNode\n\n /\n If variant='collapse', you can override isCollapsed for the collapsed content by updating this value.\n * Default: null\n /\n isCollapsed?: boolean\n\n /\n Use one of the Section component style types (style_type)\n * Default: transparent\n /\n styleType?: SectionStyleTypes\n\n /\n Use one of the Section component style types (style_type)\n * Default: pistachio\n /\n collapsedStyleType?: SectionStyleTypes\n\n /\n Include spacing properties from the Section component in breadcrumb. If only `true` is given, the spacing will be `small`.\n * Default: false\n /\n spacing?: SectionSpacing\n\n /\n Will disable the height animation\n * Default: false\n */\n noAnimation?: boolean\n}\n\nexport const defaultProps = {\n skeleton: false,\n navText: 'Back',\n goBackText: 'Back',\n homeText: 'Home',\n backToText: 'Back to...',\n isCollapsed: true,\n styleType: 'transparent',\n collapsedStyleType: 'info',\n spacing: false,\n}\n\nconst Breadcrumb = (localProps: BreadcrumbProps & SpacingProps) => {\n // Every component should have a context\n const context = React.useContext(Context)\n\n // Extract additional props from global context\n const allProps = extendPropsWithContext(\n localProps,\n defaultProps,\n context?.translation?.Breadcrumb,\n context?.Breadcrumb,\n { skeleton: context?.skeleton }\n )\n\n const {\n className,\n skeleton,\n children: items,\n variant,\n onClick,\n navText, // has a translation in context\n goBackText, // has a translation in context\n homeText, // eslint-disable-line\n backToText, // has a translation in context\n styleType,\n collapsedStyleType,\n isCollapsed: overrideIsCollapsed,\n spacing,\n noAnimation,\n data,\n href,\n ...props\n } = allProps\n const skeletonClasses = createSkeletonClass('font', skeleton, context)\n const spacingClasses = createSpacingClasses(props)\n\n const [isCollapsed, setCollapse] = useState(overrideIsCollapsed)\n const isSmallScreen = useMediaQuery({\n matchOnSSR: true,\n when: { max: 'medium' },\n })\n\n let currentVariant = variant\n if (!variant) {\n if (items \|\| data) {\n currentVariant = isSmallScreen ? 'collapse' : 'multiple'\n } else {\n currentVariant = 'single'\n }\n }\n\n useEffect(() => {\n setCollapse(overrideIsCollapsed)\n }, [overrideIsCollapsed])\n\n validateDOMAttributes(allProps, props)\n\n const innerSpacing = isTrue(spacing) ? 'small' : spacing\n\n return (\n <nav\n aria-label={convertJsxToString(navText)}\n className={classnames(\n 'dnb-breadcrumb',\n skeletonClasses,\n spacingClasses,\n className\n )}\n {...props}\n >\n <Section\n className=\"dnb-breadcrumb__bar\"\n style_type={styleType \|\| 'transparent'}\n spacing={innerSpacing}\n >\n {currentVariant === 'collapse' && (\n <Button\n text={backToText}\n variant=\"tertiary\"\n icon=\"chevron_left\"\n icon_position=\"left\"\n onClick={\n onClick \|\|\n (() => {\n setCollapse(!isCollapsed)\n })\n }\n aria-expanded={!isCollapsed}\n />\n )}\n\n {currentVariant === 'single' && (\n <Button\n text={goBackText}\n variant=\"tertiary\"\n icon=\"chevron_left\"\n icon_position=\"left\"\n onClick={onClick}\n href={href}\n />\n )}\n\n {currentVariant === 'multiple' && (\n <BreadcrumbMultiple\n data={data}\n items={items}\n isCollapsed={false}\n noAnimation={noAnimation}\n />\n )}\n </Section>\n\n {currentVariant === 'collapse' && (\n <Section\n variant={collapsedStyleType}\n className=\"dnb-breadcrumb__collapse\"\n >\n <BreadcrumbMultiple\n data={data}\n items={items}\n isCollapsed={isCollapsed}\n noAnimation={noAnimation}\n />\n </Section>\n )}\n </nav>\n )\n}\n\nBreadcrumb.Item = BreadcrumbItem\n\nexport { BreadcrumbItem }\n\nexport default Breadcrumb\n"],"mappings":"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"}

package/components/breadcrumb/BreadcrumbItem.js CHANGED Viewed

@@ -6,6 +6,7 @@ import Button from '../button/Button';
 import IconPrimary from '../icon-primary/IconPrimary';
 import P from '../../elements/P';
 import homeIcon from '../../icons/home';
+import { useTheme, useMediaQuery } from '../../shared';
 import Context from '../../shared/Context';
 import { extendPropsWithContext } from '../../shared/component-helper';
 const defaultProps = {
@@ -16,6 +17,17 @@ const defaultProps = {
   variant: null,
   skeleton: null
 };
+const determineSbankenIcon = (variant, isSmallScreen) => {
+  switch (variant) {
+    case 'home':
+      return homeIcon;
+    case 'single':
+    case 'collapse':
+      return 'chevron_left';
+    default:
+      return isSmallScreen ? 'chevron_left' : 'chevron_right';
+  }
+};
 const BreadcrumbItem = localProps => {
   const context = React.useContext(Context);
   const {
@@ -36,7 +48,17 @@ const BreadcrumbItem = localProps => {
       itemNr
     } = _extendPropsWithConte,
     props = _objectWithoutProperties(_extendPropsWithConte, _excluded);
-  const currentIcon = icon || variant === 'home' && homeIcon || 'chevron_left';
+  const theme = useTheme();
+  const isSmallScreen = useMediaQuery({
+    matchOnSSR: true,
+    when: {
+      max: 'medium'
+    }
+  });
+  let currentIcon = icon || variant === 'home' && homeIcon || 'chevron_left';
+  if ((theme === null || theme === void 0 ? void 0 : theme.name) === 'sbanken') {
+    currentIcon = icon || determineSbankenIcon(variant, isSmallScreen);
+  }
   const currentText = text || variant === 'home' && homeText || '';
   const isInteractive = (href || onClick) && variant !== 'current';
   const style = {
@@ -60,7 +82,7 @@ const BreadcrumbItem = localProps => {
     icon: currentIcon,
     className: "dnb-breadcrumb__item__span__icon"
   }), React.createElement(P, {
-    left: "0"
+    space: "0"
   }, currentText)));
 };
 export default BreadcrumbItem;

package/components/breadcrumb/BreadcrumbItem.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BreadcrumbItem.js","names":["React","Button","IconPrimary","P","homeIcon","Context","extendPropsWithContext","defaultProps","text","href","icon","onClick","variant","skeleton","BreadcrumbItem","localProps","context","useContext","translation","Breadcrumb","homeText","_extendPropsWithConte","itemNr","props","_objectWithoutProperties","_excluded","currentIcon","currentText","isInteractive","style","String","createElement","className","undefined","_extends","icon_position","on_click","~~left~~"],"sources":["../../../../src/components/breadcrumb/BreadcrumbItem.tsx"],"sourcesContent":["import React from 'react'\n\n// Components\nimport Button from '../button/Button'\nimport IconPrimary from '../icon-primary/IconPrimary'\nimport type { IconIcon } from '../icon/Icon'\n\n// Elements\nimport P from '../../elements/P'\n\n// Icons\nimport homeIcon from '../../icons/home'\n\n// Shared\nimport Context from '../../shared/Context'\nimport type { SkeletonShow } from '../skeleton/Skeleton'\nimport { extendPropsWithContext } from '../../shared/component-helper'\n\nexport interface BreadcrumbItemProps {\n /*\n Text displaying the title of the item's corresponding page\n * Default: If variant='home', default is \"Home\". Otherwise it is required.\n /\n text?: React.ReactNode\n\n /\n Icon displaying on the left side\n * Default: HomeIcon / chevron_left\n /\n icon?: IconIcon\n\n /\n Href should be the link to the item's corresponding page.\n * Default: null\n /\n href?: string\n\n /\n Set a custom click event. In this case, you should not define the prop href.\n * Default: null\n /\n onClick?: React.MouseEventHandler<HTMLButtonElement>\n\n /\n The component variant. Variant 'current' should correspond to the current page and 'home' to the root page.\n * Default: null\n /\n variant?: 'home' \| 'previous' \| 'current'\n\n /\n Skeleton should be applied when loading content\n * Default: null\n /\n skeleton?: SkeletonShow\n\n /* Internal */\n itemNr?: number\n}\n\nconst defaultProps = {\n text: null,\n href: null,\n icon: null,\n onClick: null,\n variant: null,\n skeleton: null,\n}\n\nconst BreadcrumbItem = (localProps: BreadcrumbItemProps) => {\n // Every component should have a context\n const context = React.useContext(Context)\n const {\n translation: {\n Breadcrumb: { homeText },\n },\n } = context\n\n // Extract additional props from global context\n const {\n text,\n href,\n icon,\n onClick,\n variant,\n skeleton,\n itemNr,\n ...props\n } = extendPropsWithContext(\n localProps,\n defaultProps,\n context?.BreadcrumbItem\n )\n\n const ~~currentIcon~~: ~~IconIcon~~ =\n icon \|\| (variant === 'home' && homeIcon) \|\| 'chevron_left'\n const currentText = text \|\| (variant === 'home' && homeText) \|\| ''\n const isInteractive = (href \|\| onClick) && variant !== 'current'\n const style = { '--delay': String(itemNr) } as React.CSSProperties\n\n return (\n <li\n className=\"dnb-breadcrumb__item\"\n aria-current={variant === 'current' ? 'page' : undefined}\n style={style}\n >\n {isInteractive ? (\n <Button\n variant=\"tertiary\"\n href={href}\n icon={currentIcon}\n icon_position=\"left\"\n on_click={onClick}\n text={currentText}\n skeleton={skeleton}\n {...props}\n />\n ) : (\n <span className=\"dnb-breadcrumb__item__span\" {...props}>\n <IconPrimary\n icon={currentIcon}\n className=\"dnb-breadcrumb__item__span__icon\"\n />\n <P ~~left~~=\"0\">{currentText}</P>\n </span>\n )}\n </li>\n )\n}\n\nexport default BreadcrumbItem\n"],"mappings":";;;AAAA,OAAOA,KAAK,MAAM,OAAO;AAGzB,OAAOC,MAAM,MAAM,kBAAkB;AACrC,OAAOC,WAAW,MAAM,6BAA6B;AAIrD,OAAOC,CAAC,MAAM,kBAAkB;AAGhC,OAAOC,QAAQ,MAAM,kBAAkB;AAGvC,OAAOC,OAAO,MAAM,sBAAsB;AAE1C,SAASC,sBAAsB,QAAQ,+BAA+B;AA2CtE,MAAMC,YAAY,GAAG;EACnBC,IAAI,EAAE,IAAI;EACVC,IAAI,EAAE,IAAI;EACVC,IAAI,EAAE,IAAI;EACVC,OAAO,EAAE,IAAI;EACbC,OAAO,EAAE,IAAI;EACbC,QAAQ,EAAE;AACZ,CAAC;AAED,MAAMC,cAAc,GAAIC,UAA+B,IAAK;EAE1D,MAAMC,OAAO,~~GAAGhB~~,KAAK,~~CAACiB~~,UAAU,~~CAACZ~~,OAAO,CAAC;EACzC,MAAM;~~IACJa~~,WAAW,EAAE;MACXC,UAAU,EAAE;QAAEC;MAAS;IACzB;EACF,CAAC,GAAGJ,OAAO;EAGX,MAAAK,qBAAA,~~GASIf~~,sBAAsB,~~CACxBS~~,UAAU,~~EACVR~~,YAAY,~~EACZS~~,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEF,cACX,CAAC;IAbK;~~MACJN~~,IAAI;MACJC,IAAI;MACJC,IAAI;MACJC,OAAO;MACPC,OAAO;MACPC,QAAQ;~~MACRS~~;IAEF,CAAC,GAAAD,qBAAA;IADIE,KAAK,GAAAC,wBAAA,CAAAH,qBAAA,EAAAI,SAAA;EAOV,MAAMC,~~WAAqB~~,~~GACzBhB~~,IAAI,IAAKE,OAAO,KAAK,MAAM,~~IAAIR~~,QAAS,IAAI,cAAc;EAC5D,~~MAAMuB~~,WAAW,~~GAAGnB~~,IAAI,IAAKI,OAAO,KAAK,MAAM,~~IAAIQ~~,QAAS,IAAI,EAAE;EAClE,~~MAAMQ~~,aAAa,GAAG,~~CAACnB~~,IAAI,IAAIE,OAAO,KAAKC,OAAO,KAAK,SAAS;EAChE,~~MAAMiB~~,KAAK,GAAG;IAAE,SAAS,EAAEC,MAAM,~~CAACR~~,MAAM;EAAE,CAAwB;EAElE,~~OACEtB~~,KAAA,~~CAAA+B~~,aAAA;IACEC,SAAS,EAAC,sBAAsB;IAChC,~~gBAAcpB~~,OAAO,KAAK,SAAS,GAAG,MAAM,~~GAAGqB~~,SAAU;IACzDJ,KAAK,EAAEA;EAAM,GAEZD,aAAa,~~GACZ5B~~,KAAA,~~CAAA+B~~,aAAA,~~CAAC9B~~,MAAM,~~EAAAiC~~,QAAA;~~IACLtB~~,OAAO,EAAC,UAAU;IAClBH,IAAI,EAAEA,IAAK;IACXC,IAAI,~~EAAEgB~~,WAAY;~~IAClBS~~,aAAa,EAAC,MAAM;IACpBC,QAAQ,~~EAAEzB~~,OAAQ;IAClBH,IAAI,~~EAAEmB~~,WAAY;~~IAClBd~~,QAAQ,EAAEA;EAAS,~~GACfU~~,KAAK,CACV,CAAC,~~GAEFvB~~,KAAA,~~CAAA+B~~,aAAA,SAAAG,QAAA;IAAMF,SAAS,EAAC;EAA4B,~~GAAKT~~,KAAK,~~GACpDvB~~,KAAA,~~CAAA+B~~,aAAA,~~CAAC7B~~,WAAW;~~IACVQ~~,IAAI,~~EAAEgB~~,WAAY;~~IAClBM~~,SAAS,EAAC;EAAkC,CAC7C,CAAC,~~EACFhC~~,KAAA,~~CAAA+B~~,aAAA,~~CAAC5B~~,CAAC;~~IAACkC~~,~~IAAI~~,EAAC;EAAG,GAAEV,WAAe,~~CACxB~~,CAEN,CAAC;AAET,CAAC;AAED,~~eAAeb~~,cAAc"}
1	+ {"version":3,"file":"BreadcrumbItem.js","names":["React","Button","IconPrimary","P","homeIcon","useTheme","useMediaQuery","Context","extendPropsWithContext","defaultProps","text","href","icon","onClick","variant","skeleton","determineSbankenIcon","isSmallScreen","BreadcrumbItem","localProps","context","useContext","translation","Breadcrumb","homeText","_extendPropsWithConte","itemNr","props","_objectWithoutProperties","_excluded","theme","matchOnSSR","when","max","currentIcon","name","currentText","isInteractive","style","String","createElement","className","undefined","_extends","icon_position","on_click","space"],"sources":["../../../../src/components/breadcrumb/BreadcrumbItem.tsx"],"sourcesContent":["import React from 'react'\n\n// Components\nimport Button from '../button/Button'\nimport IconPrimary from '../icon-primary/IconPrimary'\nimport type { IconIcon } from '../icon/Icon'\n\n// Elements\nimport P from '../../elements/P'\n\n// Icons\nimport homeIcon from '../../icons/home'\n\n// Shared\nimport { useTheme, useMediaQuery } from '../../shared'\nimport Context from '../../shared/Context'\nimport type { SkeletonShow } from '../skeleton/Skeleton'\nimport { extendPropsWithContext } from '../../shared/component-helper'\n\nexport interface BreadcrumbItemProps {\n /*\n Text displaying the title of the item's corresponding page\n * Default: If variant='home', default is \"Home\". Otherwise it is required.\n /\n text?: React.ReactNode\n\n /\n Icon displaying on the left side\n * Default: HomeIcon / chevron_left\n /\n icon?: IconIcon\n\n /\n Href should be the link to the item's corresponding page.\n * Default: null\n /\n href?: string\n\n /\n Set a custom click event. In this case, you should not define the prop href.\n * Default: null\n /\n onClick?: React.MouseEventHandler<HTMLButtonElement>\n\n /\n The component variant. Variant 'current' should correspond to the current page and 'home' to the root page.\n * Default: null\n /\n variant?: 'home' \| 'previous' \| 'current'\n\n /\n Skeleton should be applied when loading content\n * Default: null\n /\n skeleton?: SkeletonShow\n\n /* Internal */\n itemNr?: number\n}\n\nconst defaultProps = {\n text: null,\n href: null,\n icon: null,\n onClick: null,\n variant: null,\n skeleton: null,\n}\n\nconst determineSbankenIcon: IconIcon = (\n variant: string,\n isSmallScreen: boolean\n) => {\n switch (variant) {\n case 'home':\n return homeIcon\n case 'single':\n case 'collapse':\n return 'chevron_left'\n default:\n return isSmallScreen ? 'chevron_left' : 'chevron_right'\n }\n}\n\nconst BreadcrumbItem = (localProps: BreadcrumbItemProps) => {\n // Every component should have a context\n const context = React.useContext(Context)\n const {\n translation: {\n Breadcrumb: { homeText },\n },\n } = context\n\n // Extract additional props from global context\n const {\n text,\n href,\n icon,\n onClick,\n variant,\n skeleton,\n itemNr,\n ...props\n } = extendPropsWithContext(\n localProps,\n defaultProps,\n context?.BreadcrumbItem\n )\n\n const theme = useTheme()\n const isSmallScreen = useMediaQuery({\n matchOnSSR: true,\n when: { max: 'medium' },\n })\n\n let currentIcon =\n icon \|\| (variant === 'home' && homeIcon) \|\| 'chevron_left'\n if (theme?.name === 'sbanken') {\n currentIcon = icon \|\| determineSbankenIcon(variant, isSmallScreen)\n }\n const currentText = text \|\| (variant === 'home' && homeText) \|\| ''\n const isInteractive = (href \|\| onClick) && variant !== 'current'\n const style = { '--delay': String(itemNr) } as React.CSSProperties\n\n return (\n <li\n className=\"dnb-breadcrumb__item\"\n aria-current={variant === 'current' ? 'page' : undefined}\n style={style}\n >\n {isInteractive ? (\n <Button\n variant=\"tertiary\"\n href={href}\n icon={currentIcon}\n icon_position=\"left\"\n on_click={onClick}\n text={currentText}\n skeleton={skeleton}\n {...props}\n />\n ) : (\n <span className=\"dnb-breadcrumb__item__span\" {...props}>\n <IconPrimary\n icon={currentIcon}\n className=\"dnb-breadcrumb__item__span__icon\"\n />\n <P space=\"0\">{currentText}</P>\n </span>\n )}\n </li>\n )\n}\n\nexport default BreadcrumbItem\n"],"mappings":"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"}

package/components/breadcrumb/style/themes/dnb-breadcrumb-theme-sbanken.css ADDED Viewed

@@ -0,0 +1,23 @@
+/*
+* Sbanken Breadcrumb theme
+*
+*/
+/*
+ * Utilities
+ */
+.dnb-breadcrumb .dnb-button__text {
+  font-weight: var(--font-weight-medium);
+  color: var(--sb-color-text);
+}
+.dnb-breadcrumb__item__span__icon {
+  color: var(--sb-color-violet);
+}
+.dnb-breadcrumb__item__span .dnb-p {
+  color: var(--sb-color-gray-dark-3);
+}
+.dnb-breadcrumb__item:not(:last-of-type) .dnb-button.dnb-button--has-text {
+  font-weight: var(--font-weight-medium);
+}
+.dnb-breadcrumb__item:not(:last-of-type) .dnb-button.dnb-button--has-text .dnb-button__text {
+  color: var(--sb-color-text);
+}

package/components/breadcrumb/style/themes/dnb-breadcrumb-theme-sbanken.min.css ADDED Viewed

@@ -0,0 +1 @@

+ .dnb-breadcrumb .dnb-button__text{color:var(--sb-color-text);font-weight:var(--font-weight-medium)}.dnb-breadcrumb__item__span__icon{color:var(--sb-color-violet)}.dnb-breadcrumb__item__span .dnb-p{color:var(--sb-color-gray-dark-3)}.dnb-breadcrumb__item:not(:last-of-type) .dnb-button.dnb-button--has-text{font-weight:var(--font-weight-medium)}.dnb-breadcrumb__item:not(:last-of-type) .dnb-button.dnb-button--has-text .dnb-button__text{color:var(--sb-color-text)}

package/components/breadcrumb/style/themes/dnb-breadcrumb-theme-sbanken.scss ADDED Viewed

@@ -0,0 +1,33 @@
+/*
+* Sbanken Breadcrumb theme
+*
+*/
+@import '../../../../style/core/utilities.scss';
+.dnb-breadcrumb {
+  .dnb-button {
+    &__text {
+      font-weight: var(--font-weight-medium);
+      color: var(--sb-color-text);
+    }
+  }
+  &__item {
+    &__span {
+      &__icon {
+        color: var(--sb-color-violet);
+      }
+      .dnb-p {
+        color: var(--sb-color-gray-dark-3);
+      }
+    }
+  }
+  &__item:not(:last-of-type) {
+    .dnb-button.dnb-button--has-text {
+      font-weight: var(--font-weight-medium);
+      .dnb-button__text {
+        color: var(--sb-color-text);
+      }
+    }
+  }
+}

package/components/button/style/themes/dnb-button-theme-ui.scss CHANGED Viewed

@@ -77,7 +77,9 @@
       var(--color-mint-green-50)
     );
   }
-  &--secondary:not(#{&}--has-text):not(#{&}--input-button)#{&}--size-large {
+  &--secondary:not(#{&}--has-text):not(
+      #{&}--input-button
+    )#{&}--size-large {
     // Make exception for icon button as it should be smaller than the original large button
     width: calc(var(--button-width--large) - 0.5rem);
     line-height: calc(var(--button-height--large) - 0.5rem);

package/components/checkbox/Checkbox.d.ts CHANGED Viewed

@@ -82,6 +82,10 @@ export interface CheckboxProps
    */
   on_change?: (...args: any[]) => any;
   on_state_update?: (...args: any[]) => any;
+  /**
+   * By providing a React.ref we can get the internally used input element (DOM). E.g. `innerRef={myRef}` by using `React.createRef()` or `React.useRef()`.
+   */
+  innerRef?: React.Ref;
 }
 export default class Checkbox extends React.Component<CheckboxProps, any> {
   static defaultProps: object;

package/components/checkbox/Checkbox.js CHANGED Viewed

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 var _AlignmentHelper, _span;
-const _excluded = ["value", "status", "status_state", "status_props", "status_no_animation", "globalStatus", "suffix", "size", "label", "label_position", "label_sr_only", "title", "element", "disabled", "readOnly", "skeleton", "className", "class", "id", "checked", "children", "on_change", "on_state_update"],
+const _excluded = ["value", "status", "status_state", "status_props", "status_no_animation", "globalStatus", "suffix", "size", "label", "label_position", "label_sr_only", "title", "element", "disabled", "readOnly", "skeleton", "className", "class", "id", "checked", "children", "on_change", "on_state_update", "innerRef"],
   _excluded2 = ["size"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -64,7 +64,7 @@ export default class Checkbox extends React.PureComponent {
         this._refInput.current.focus();
       }
     });
-    this._refInput = React.createRef();
+    this._refInput = props.innerRef || React.createRef();
     this._id = props.id || makeUniqueId();
     this.state = {
       _listenForPropChanges: true
@@ -97,7 +97,8 @@ export default class Checkbox extends React.PureComponent {
         checked: _checked,
         children,
         on_change,
-        on_state_update
+        on_state_update,
+        innerRef
       } = props,
       rest = _objectWithoutProperties(props, _excluded);
     const {
@@ -223,7 +224,8 @@ process.env.NODE_ENV !== "production" ? Checkbox.propTypes = _objectSpread(_obje
   attributes: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
   readOnly: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   skeleton: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-  class: PropTypes.string
+  class: PropTypes.string,
+  innerRef: PropTypes.object
 }, spacingPropTypes), {}, {
   className: PropTypes.string,
   children: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),

package/components/checkbox/Checkbox.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Checkbox.js","names":["React","PropTypes","classnames","keycode","isTrue","makeUniqueId","extendPropsWithContextInClassComponent","validateDOMAttributes","getStatusState","combineDescribedBy","dispatchCustomElementEvent","AlignmentHelper","spacingPropTypes","createSpacingClasses","skeletonDOMAttributes","createSkeletonClass","includeValidProps","Context","Suffix","FormLabel","FormStatus","Checkbox","PureComponent","getDerivedStateFromProps","props","state","_listenForPropChanges","checked","_checked","parseChecked","__checked","constructor","_defineProperty","event","onChangeHandler","readOnly","preventDefault","setState","_refInput","current","focus","createRef","_id","id","render","defaultProps","skeleton","context","getTranslation","FormRow","value","status","status_state","status_props","status_no_animation","globalStatus","suffix","size","label","label_position","label_sr_only","title","element","disabled","className","class","_className","children","on_change","on_state_update","rest","_objectWithoutProperties","_excluded","showStatus","mainParams","inputParams","_objectSpread","statusComp","createElement","_extends","show","text_id","width_selector","text","no_animation","Element","for_id","sr_only","_AlignmentHelper","name","type","onChange","onKeyDown","onKeyDownHandler","ref","_span","CheckIcon","attributes","test","String","process","env","NODE_ENV","propTypes","oneOfType","string","func","node","oneOf","bool","object","shape","message","_ref","_excluded2","vB","width","height","viewBox","fill","d","stroke","strokeWidth","strokeLinecap","strokeLinejoin"],"sources":["../../../../src/components/checkbox/Checkbox.js"],"sourcesContent":["/*\n Web Checkbox Component\n \n /\n\nimport React from 'react'\nimport PropTypes from 'prop-types'\nimport classnames from 'classnames'\nimport keycode from 'keycode'\nimport {\n isTrue,\n makeUniqueId,\n extendPropsWithContextInClassComponent,\n validateDOMAttributes,\n getStatusState,\n combineDescribedBy,\n dispatchCustomElementEvent,\n} from '../../shared/component-helper'\nimport AlignmentHelper from '../../shared/AlignmentHelper'\nimport {\n spacingPropTypes,\n createSpacingClasses,\n} from '../space/SpacingHelper'\nimport {\n skeletonDOMAttributes,\n createSkeletonClass,\n} from '../skeleton/SkeletonHelper'\nimport { includeValidProps } from '../form-row/FormRowHelpers'\n\nimport Context from '../../shared/Context'\nimport Suffix from '../../shared/helpers/Suffix'\nimport FormLabel from '../form-label/FormLabel'\nimport FormStatus from '../form-status/FormStatus'\n\n/*\n The checkbox component is our enhancement of the classic checkbox button. It acts like a checkbox. Example: On/off, yes/no.\n */\nexport default class Checkbox extends React.PureComponent {\n static contextType = Context\n\n static propTypes = {\n label: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.func,\n PropTypes.node,\n ]),\n label_position: PropTypes.oneOf(['left', 'right']),\n label_sr_only: PropTypes.bool,\n title: PropTypes.string,\n element: PropTypes.node,\n checked: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n disabled: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n id: PropTypes.string,\n size: PropTypes.oneOf(['default', 'medium', 'large']),\n status: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.bool,\n PropTypes.func,\n PropTypes.node,\n ]),\n status_state: PropTypes.string,\n status_props: PropTypes.object,\n status_no_animation: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.bool,\n ]),\n globalStatus: PropTypes.shape({\n id: PropTypes.string,\n message: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),\n }),\n suffix: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.func,\n PropTypes.node,\n ]),\n value: PropTypes.string,\n attributes: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),\n readOnly: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n skeleton: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n class: PropTypes.string,\n\n ...spacingPropTypes,\n\n className: PropTypes.string,\n children: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),\n\n on_change: PropTypes.func,\n on_state_update: PropTypes.func,\n }\n\n static defaultProps = {\n label: null,\n label_position: null,\n label_sr_only: null,\n title: null,\n element: 'input',\n checked: null,\n disabled: null,\n id: null,\n size: null,\n status: null,\n status_state: 'error',\n status_props: null,\n status_no_animation: null,\n globalStatus: null,\n suffix: null,\n value: null,\n attributes: null,\n readOnly: false,\n skeleton: null,\n class: null,\n\n className: null,\n children: null,\n\n on_change: null,\n on_state_update: null,\n }\n\n static parseChecked = (state) => /true\|on/.test(String(state))\n\n static getDerivedStateFromProps(props, state) {\n if (state._listenForPropChanges) {\n if (props.checked !== state._checked) {\n state.checked = Checkbox.parseChecked(props.checked)\n }\n }\n state._listenForPropChanges = true\n\n if (state.checked !== state.__checked) {\n dispatchCustomElementEvent({ props }, 'on_state_update', {\n checked: state.checked,\n })\n }\n\n state._checked = props.checked\n state.__checked = state.checked\n\n return state\n }\n\n constructor(props) {\n super(props)\n this._refInput = React.createRef()\n this._id = props.id \|\| makeUniqueId() // cause we need an id anyway\n this.state = {\n _listenForPropChanges: true,\n }\n }\n\n onKeyDownHandler = (event) => {\n switch (keycode(event)) {\n case 'enter':\n this.onChangeHandler(event)\n break\n }\n }\n\n onChangeHandler = (event) => {\n if (isTrue(this.props.readOnly)) {\n return event.preventDefault()\n }\n const checked = !this.state.checked\n this.setState({ checked, _listenForPropChanges: false })\n dispatchCustomElementEvent(this, 'on_change', { checked, event })\n\n // help firefox and safari to have an correct state after a click\n if (this._refInput.current) {\n this._refInput.current.focus()\n }\n }\n\n render() {\n // use only the props from context, who are available here anyway\n const props = extendPropsWithContextInClassComponent(\n this.props,\n Checkbox.defaultProps,\n { skeleton: this.context && this.context.skeleton },\n this.context.getTranslation(this.props).Checkbox,\n includeValidProps(this.context.FormRow),\n this.context.Checkbox\n )\n\n const {\n value,\n status,\n status_state,\n status_props,\n status_no_animation,\n globalStatus,\n suffix,\n size,\n label,\n label_position,\n label_sr_only,\n title,\n element,\n disabled,\n readOnly,\n skeleton,\n className,\n class: _className,\n\n id: _id, // eslint-disable-line\n checked: _checked, // eslint-disable-line\n children, // eslint-disable-line\n on_change, // eslint-disable-line\n on_state_update, // eslint-disable-line\n\n ...rest\n } = props\n\n const { checked } = this.state\n\n const id = this._id\n const showStatus = getStatusState(status)\n\n const mainParams = {\n className: classnames(\n 'dnb-checkbox',\n status && `dnb-checkbox__status--${status_state}`,\n size && `dnb-checkbox--${size}`,\n label &&\n `dnb-checkbox--label-position-${label_position \|\| 'right'}`,\n 'dnb-form-component',\n createSkeletonClass(null, skeleton),\n createSpacingClasses(props),\n className,\n _className\n ),\n }\n\n const inputParams = {\n disabled,\n checked,\n ...rest,\n }\n\n if (showStatus \|\| suffix) {\n inputParams['aria-describedby'] = combineDescribedBy(\n inputParams,\n showStatus ? id + '-status' : null,\n suffix ? id + '-suffix' : null\n )\n }\n if (readOnly) {\n inputParams['aria-readonly'] = inputParams.readOnly = true\n }\n\n skeletonDOMAttributes(inputParams, skeleton, this.context)\n\n // also used for code markup simulation\n validateDOMAttributes(this.props, inputParams)\n\n const statusComp = (\n <FormStatus\n show={showStatus}\n id={id + '-form-status'}\n globalStatus={globalStatus}\n label={label}\n text_id={id + '-status'} // used for \"aria-describedby\"\n width_selector={id + ', ' + id + '-label'}\n text={status}\n state={status_state}\n no_animation={status_no_animation}\n skeleton={skeleton}\n {...status_props}\n />\n )\n\n const Element = element \|\| 'input'\n\n return (\n <span {...mainParams}>\n <span className=\"dnb-checkbox__order\">\n {label && (\n <FormLabel\n id={id + '-label'}\n for_id={id}\n text={label}\n disabled={disabled}\n skeleton={skeleton}\n sr_only={label_sr_only}\n />\n )}\n\n <span className=\"dnb-checkbox__inner\">\n <AlignmentHelper />\n {label_position === 'left' && statusComp}\n\n <span className=\"dnb-checkbox__shell\">\n <Element\n id={id}\n name={id}\n type=\"checkbox\"\n title={title}\n className=\"dnb-checkbox__input\"\n value={checked ? value \|\| '' : ''}\n disabled={isTrue(disabled)}\n {...inputParams}\n onChange={this.onChangeHandler}\n onKeyDown={this.onKeyDownHandler}\n ref={this._refInput}\n />\n\n <span\n className={classnames(\n 'dnb-checkbox__button',\n createSkeletonClass('shape', skeleton, this.context)\n )}\n aria-hidden\n >\n <span className=\"dnb-checkbox__focus\" />\n </span>\n\n <CheckIcon size={size} />\n </span>\n </span>\n\n {suffix && (\n <Suffix\n className=\"dnb-checkbox__suffix\"\n id={id + '-suffix'} // used for \"aria-describedby\"\n context={props}\n >\n {suffix}\n </Suffix>\n )}\n </span>\n\n {(label_position === 'right' \|\| !label_position) && statusComp}\n </span>\n )\n }\n}\n\n// The new checkbox has too low contrast, as it is too thin on web\nexport const CheckIcon = ({ size, ...props }) => {\n let vB = 16\n if (size === 'large') {\n vB = 24\n }\n return (\n <svg\n width={vB}\n height={vB}\n viewBox={`0 0 ${vB} ${vB}`}\n fill=\"none\"\n className=\"dnb-checkbox__gfx\"\n aria-hidden\n {...props}\n >\n <path\n d={size === 'large' ? 'M1.5 15L7.5 21L22.5 3' : 'M1 10L5 14L15 2'}\n stroke=\"currentColor\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n )\n}\nCheckIcon.propTypes = {\n size: PropTypes.string,\n}\nCheckIcon.defaultProps = {\n size: 'default',\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"Checkbox.js","names":["React","PropTypes","classnames","keycode","isTrue","makeUniqueId","extendPropsWithContextInClassComponent","validateDOMAttributes","getStatusState","combineDescribedBy","dispatchCustomElementEvent","AlignmentHelper","spacingPropTypes","createSpacingClasses","skeletonDOMAttributes","createSkeletonClass","includeValidProps","Context","Suffix","FormLabel","FormStatus","Checkbox","PureComponent","getDerivedStateFromProps","props","state","_listenForPropChanges","checked","_checked","parseChecked","__checked","constructor","_defineProperty","event","onChangeHandler","readOnly","preventDefault","setState","_refInput","current","focus","innerRef","createRef","_id","id","render","defaultProps","skeleton","context","getTranslation","FormRow","value","status","status_state","status_props","status_no_animation","globalStatus","suffix","size","label","label_position","label_sr_only","title","element","disabled","className","class","_className","children","on_change","on_state_update","rest","_objectWithoutProperties","_excluded","showStatus","mainParams","inputParams","_objectSpread","statusComp","createElement","_extends","show","text_id","width_selector","text","no_animation","Element","for_id","sr_only","_AlignmentHelper","name","type","onChange","onKeyDown","onKeyDownHandler","ref","_span","CheckIcon","attributes","test","String","process","env","NODE_ENV","propTypes","oneOfType","string","func","node","oneOf","bool","object","shape","message","_ref","_excluded2","vB","width","height","viewBox","fill","d","stroke","strokeWidth","strokeLinecap","strokeLinejoin"],"sources":["../../../../src/components/checkbox/Checkbox.js"],"sourcesContent":["/*\n Web Checkbox Component\n \n /\n\nimport React from 'react'\nimport PropTypes from 'prop-types'\nimport classnames from 'classnames'\nimport keycode from 'keycode'\nimport {\n isTrue,\n makeUniqueId,\n extendPropsWithContextInClassComponent,\n validateDOMAttributes,\n getStatusState,\n combineDescribedBy,\n dispatchCustomElementEvent,\n} from '../../shared/component-helper'\nimport AlignmentHelper from '../../shared/AlignmentHelper'\nimport {\n spacingPropTypes,\n createSpacingClasses,\n} from '../space/SpacingHelper'\nimport {\n skeletonDOMAttributes,\n createSkeletonClass,\n} from '../skeleton/SkeletonHelper'\nimport { includeValidProps } from '../form-row/FormRowHelpers'\n\nimport Context from '../../shared/Context'\nimport Suffix from '../../shared/helpers/Suffix'\nimport FormLabel from '../form-label/FormLabel'\nimport FormStatus from '../form-status/FormStatus'\n\n/*\n The checkbox component is our enhancement of the classic checkbox button. It acts like a checkbox. Example: On/off, yes/no.\n */\nexport default class Checkbox extends React.PureComponent {\n static contextType = Context\n\n static propTypes = {\n label: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.func,\n PropTypes.node,\n ]),\n label_position: PropTypes.oneOf(['left', 'right']),\n label_sr_only: PropTypes.bool,\n title: PropTypes.string,\n element: PropTypes.node,\n checked: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n disabled: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n id: PropTypes.string,\n size: PropTypes.oneOf(['default', 'medium', 'large']),\n status: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.bool,\n PropTypes.func,\n PropTypes.node,\n ]),\n status_state: PropTypes.string,\n status_props: PropTypes.object,\n status_no_animation: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.bool,\n ]),\n globalStatus: PropTypes.shape({\n id: PropTypes.string,\n message: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),\n }),\n suffix: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.func,\n PropTypes.node,\n ]),\n value: PropTypes.string,\n attributes: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),\n readOnly: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n skeleton: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n class: PropTypes.string,\n innerRef: PropTypes.object,\n\n ...spacingPropTypes,\n\n className: PropTypes.string,\n children: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),\n\n on_change: PropTypes.func,\n on_state_update: PropTypes.func,\n }\n\n static defaultProps = {\n label: null,\n label_position: null,\n label_sr_only: null,\n title: null,\n element: 'input',\n checked: null,\n disabled: null,\n id: null,\n size: null,\n status: null,\n status_state: 'error',\n status_props: null,\n status_no_animation: null,\n globalStatus: null,\n suffix: null,\n value: null,\n attributes: null,\n readOnly: false,\n skeleton: null,\n class: null,\n\n className: null,\n children: null,\n\n on_change: null,\n on_state_update: null,\n }\n\n static parseChecked = (state) => /true\|on/.test(String(state))\n\n static getDerivedStateFromProps(props, state) {\n if (state._listenForPropChanges) {\n if (props.checked !== state._checked) {\n state.checked = Checkbox.parseChecked(props.checked)\n }\n }\n state._listenForPropChanges = true\n\n if (state.checked !== state.__checked) {\n dispatchCustomElementEvent({ props }, 'on_state_update', {\n checked: state.checked,\n })\n }\n\n state._checked = props.checked\n state.__checked = state.checked\n\n return state\n }\n\n constructor(props) {\n super(props)\n this._refInput = props.innerRef \|\| React.createRef()\n\n this._id = props.id \|\| makeUniqueId() // cause we need an id anyway\n this.state = {\n _listenForPropChanges: true,\n }\n }\n\n onKeyDownHandler = (event) => {\n switch (keycode(event)) {\n case 'enter':\n this.onChangeHandler(event)\n break\n }\n }\n\n onChangeHandler = (event) => {\n if (isTrue(this.props.readOnly)) {\n return event.preventDefault()\n }\n const checked = !this.state.checked\n this.setState({ checked, _listenForPropChanges: false })\n dispatchCustomElementEvent(this, 'on_change', { checked, event })\n\n // help firefox and safari to have an correct state after a click\n if (this._refInput.current) {\n this._refInput.current.focus()\n }\n }\n\n render() {\n // use only the props from context, who are available here anyway\n const props = extendPropsWithContextInClassComponent(\n this.props,\n Checkbox.defaultProps,\n { skeleton: this.context && this.context.skeleton },\n this.context.getTranslation(this.props).Checkbox,\n includeValidProps(this.context.FormRow),\n this.context.Checkbox\n )\n\n const {\n value,\n status,\n status_state,\n status_props,\n status_no_animation,\n globalStatus,\n suffix,\n size,\n label,\n label_position,\n label_sr_only,\n title,\n element,\n disabled,\n readOnly,\n skeleton,\n className,\n class: _className,\n\n id: _id, // eslint-disable-line\n checked: _checked, // eslint-disable-line\n children, // eslint-disable-line\n on_change, // eslint-disable-line\n on_state_update, // eslint-disable-line\n innerRef, // eslint-disable-line\n\n ...rest\n } = props\n\n const { checked } = this.state\n\n const id = this._id\n const showStatus = getStatusState(status)\n\n const mainParams = {\n className: classnames(\n 'dnb-checkbox',\n status && `dnb-checkbox__status--${status_state}`,\n size && `dnb-checkbox--${size}`,\n label &&\n `dnb-checkbox--label-position-${label_position \|\| 'right'}`,\n 'dnb-form-component',\n createSkeletonClass(null, skeleton),\n createSpacingClasses(props),\n className,\n _className\n ),\n }\n\n const inputParams = {\n disabled,\n checked,\n ...rest,\n }\n\n if (showStatus \|\| suffix) {\n inputParams['aria-describedby'] = combineDescribedBy(\n inputParams,\n showStatus ? id + '-status' : null,\n suffix ? id + '-suffix' : null\n )\n }\n if (readOnly) {\n inputParams['aria-readonly'] = inputParams.readOnly = true\n }\n\n skeletonDOMAttributes(inputParams, skeleton, this.context)\n\n // also used for code markup simulation\n validateDOMAttributes(this.props, inputParams)\n\n const statusComp = (\n <FormStatus\n show={showStatus}\n id={id + '-form-status'}\n globalStatus={globalStatus}\n label={label}\n text_id={id + '-status'} // used for \"aria-describedby\"\n width_selector={id + ', ' + id + '-label'}\n text={status}\n state={status_state}\n no_animation={status_no_animation}\n skeleton={skeleton}\n {...status_props}\n />\n )\n\n const Element = element \|\| 'input'\n\n return (\n <span {...mainParams}>\n <span className=\"dnb-checkbox__order\">\n {label && (\n <FormLabel\n id={id + '-label'}\n for_id={id}\n text={label}\n disabled={disabled}\n skeleton={skeleton}\n sr_only={label_sr_only}\n />\n )}\n\n <span className=\"dnb-checkbox__inner\">\n <AlignmentHelper />\n {label_position === 'left' && statusComp}\n\n <span className=\"dnb-checkbox__shell\">\n <Element\n id={id}\n name={id}\n type=\"checkbox\"\n title={title}\n className=\"dnb-checkbox__input\"\n value={checked ? value \|\| '' : ''}\n disabled={isTrue(disabled)}\n {...inputParams}\n onChange={this.onChangeHandler}\n onKeyDown={this.onKeyDownHandler}\n ref={this._refInput}\n />\n\n <span\n className={classnames(\n 'dnb-checkbox__button',\n createSkeletonClass('shape', skeleton, this.context)\n )}\n aria-hidden\n >\n <span className=\"dnb-checkbox__focus\" />\n </span>\n\n <CheckIcon size={size} />\n </span>\n </span>\n\n {suffix && (\n <Suffix\n className=\"dnb-checkbox__suffix\"\n id={id + '-suffix'} // used for \"aria-describedby\"\n context={props}\n >\n {suffix}\n </Suffix>\n )}\n </span>\n\n {(label_position === 'right' \|\| !label_position) && statusComp}\n </span>\n )\n }\n}\n\n// The new checkbox has too low contrast, as it is too thin on web\nexport const CheckIcon = ({ size, ...props }) => {\n let vB = 16\n if (size === 'large') {\n vB = 24\n }\n return (\n <svg\n width={vB}\n height={vB}\n viewBox={`0 0 ${vB} ${vB}`}\n fill=\"none\"\n className=\"dnb-checkbox__gfx\"\n aria-hidden\n {...props}\n >\n <path\n d={size === 'large' ? 'M1.5 15L7.5 21L22.5 3' : 'M1 10L5 14L15 2'}\n stroke=\"currentColor\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n )\n}\nCheckIcon.propTypes = {\n size: PropTypes.string,\n}\nCheckIcon.defaultProps = {\n size: 'default',\n}\n"],"mappings":"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"}

package/components/checkbox/style/themes/dnb-checkbox-theme-ui.scss CHANGED Viewed

@@ -7,7 +7,9 @@
 .dnb-checkbox {
   &__gfx {
-    transition: opacity 200ms ease-out, transform 200ms ease-out;
+    transition:
+      opacity 200ms ease-out,
+      transform 200ms ease-out;
   }
   // When checkbox is ON