@laerdal/life-react-components 6.0.0-dev.1.full → 6.0.0-dev.12.full

package/dist/Button/Iconbutton.cjs

@@ -67,89 +67,151 @@ const IconButtonStyled = exports.IconButtonStyled = _styledComponents.default.bu
 `;
 const IconButtonStyledPrimary = exports.IconButtonStyledPrimary = (0, _styledComponents.default)(IconButtonStyled)`
   ${IconButtonContentStyles} {
-    background-color: ${props => props.$useTransparentBackground ? 'transparent' : _styles.COLORS.getColor('primary_500', props.theme)};
+    background-color: ${props => props.$useTransparentBackground ? 'transparent' : _styles.COLORS.generateToken({
+  componentType: 'bg-fill',
+  defaultVariant: 'primary'
+}, props.theme)};
 
     svg {
-      fill: ${props => props.$iconColor || _styles.COLORS.getColor('white', props.theme)};
+      fill: ${props => props.$iconColor || _styles.COLORS.generateToken({
+  componentType: 'icon',
+  isOnFill: true,
+  defaultVariant: 'primary'
+}, props.theme)};
       path {
-        fill: ${props => props.$iconColor || _styles.COLORS.getColor('white', props.theme)};
+        fill: ${props => props.$iconColor || _styles.COLORS.generateToken({
+  componentType: 'icon',
+  isOnFill: true,
+  defaultVariant: 'primary'
+}, props.theme)};
       }
     }
   }
   &:hover:not(:disabled),
   &.hover-state {
     ${IconButtonContentStyles} {
-      background-color: ${props => _styles.COLORS.getColor('primary_700', props.theme)};
+      background-color: ${props => _styles.COLORS.generateToken({
+  componentType: 'bg-fill',
+  state: 'hover',
+  defaultVariant: 'primary'
+}, props.theme)};
     }
     ${IconButtonContentStyles} svg path,
     ${IconButtonContentStyles} svg {
-      fill: ${props => _styles.COLORS.getColor('white', props.theme)};
+      fill: ${props => _styles.COLORS.generateToken({
+  componentType: 'icon',
+  isOnFill: true,
+  defaultVariant: 'primary'
+}, props.theme)};
     }
   }
   &:active:not(:disabled),
   &.active-state {
     ${IconButtonContentStyles} {
-      background: ${props => _styles.COLORS.getColor('primary_800', props.theme)};
+      background-color: ${props => _styles.COLORS.generateToken({
+  componentType: 'bg-fill',
+  state: 'active',
+  defaultVariant: 'primary'
+}, props.theme)};
     }
     ${IconButtonContentStyles} svg path,
     ${IconButtonContentStyles} svg {
-      fill: ${props => _styles.COLORS.getColor('white', props.theme)};
+      fill: ${props => _styles.COLORS.generateToken({
+  componentType: 'icon',
+  isOnFill: true,
+  defaultVariant: 'primary'
+}, props.theme)};
     }
   }
   &:disabled {
     ${IconButtonContentStyles} {
-      background-color: ${props => _styles.COLORS.getColor('neutral_200', props.theme)};
+      background-color: ${props => _styles.COLORS.generateToken({
+  componentType: 'bg-fill',
+  state: 'disabled'
+}, props.theme)};
     }
     svg {
       path {
-        fill: ${props => _styles.COLORS.getColor('white', props.theme)};
+        fill: ${props => _styles.COLORS.generateToken({
+  componentType: 'icon',
+  isOnFill: true,
+  defaultVariant: 'primary'
+}, props.theme)};
       }
-      fill: ${props => _styles.COLORS.getColor('white', props.theme)};
+      fill: ${props => _styles.COLORS.generateToken({
+  componentType: 'icon',
+  isOnFill: true,
+  defaultVariant: 'primary'
+}, props.theme)};
     }
   }
 `;
 const IconButtonStyledSecondary = exports.IconButtonStyledSecondary = (0, _styledComponents.default)(IconButtonStyled)`
   ${IconButtonContentStyles} {
-    background-color: ${props => props.$useTransparentBackground ? 'transparent' : _styles.COLORS.getColor('white', props.theme)};
+    background-color: transparent;
 
     svg {
-      fill: ${props => props.$iconColor || _styles.COLORS.getColor('neutral_600', props.theme)};
+      fill: ${props => props.$iconColor || _styles.COLORS.generateToken({
+  componentType: 'icon',
+  defaultVariant: 'subtle'
+}, props.theme)};
       path {
-        fill: ${props => props.$iconColor || _styles.COLORS.getColor('neutral_600', props.theme)};
+        fill: ${props => props.$iconColor || _styles.COLORS.generateToken({
+  componentType: 'icon',
+  defaultVariant: 'subtle'
+}, props.theme)};
       }
     }
   }
 
-
   &:hover:not(:disabled) {
     ${IconButtonContentStyles} {
-      background-color: ${props => _styles.COLORS.getColor('primary_20', props.theme)};
+      background-color: ${props => _styles.COLORS.generateToken({
+  componentType: 'bg-surface',
+  state: 'hover'
+}, props.theme)};
     }
     ${IconButtonContentStyles} svg path,
     ${IconButtonContentStyles} svg {
-      fill: ${props => _styles.COLORS.getColor('primary_700', props.theme)};
+      fill: ${props => _styles.COLORS.generateToken({
+  componentType: 'icon',
+  state: 'hover'
+}, props.theme)};
     }
   }
+
   &:active:not(:disabled),
   &.active-state {
     ${IconButtonContentStyles} {
-      background: ${props => _styles.COLORS.getColor('primary_100', props.theme)};
+      background: ${props => _styles.COLORS.generateToken({
+  componentType: 'bg-surface',
+  state: 'active'
+}, props.theme)};
     }
     ${IconButtonContentStyles} svg path,
     ${IconButtonContentStyles} svg {
-      fill: ${props => _styles.COLORS.getColor('primary_800', props.theme)};
+      fill: ${props => _styles.COLORS.generateToken({
+  componentType: 'icon',
+  state: 'active'
+}, props.theme)};
     }
   }
 
   &:disabled {
     ${IconButtonContentStyles} {
-      background-color: ${props => props.$useTransparentBackground ? 'transparent' : _styles.COLORS.getColor('white', props.theme)};
+      background-color: transparent;
     }
     svg {
       path {
-        fill: ${props => _styles.COLORS.getColor('neutral_300', props.theme)};
+        fill: ${props => _styles.COLORS.generateToken({
+  componentType: 'icon',
+  state: 'disabled'
+}, props.theme)};
       }
-      fill: ${props => _styles.COLORS.getColor('neutral_300', props.theme)};
+      fill: ${props => _styles.COLORS.generateToken({
+  componentType: 'icon',
+  state: 'disabled'
+}, props.theme)};
     }
   }
 `;

package/dist/Button/Iconbutton.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Iconbutton.cjs","names":["_react","_interopRequireDefault","require","_styledComponents","_styles","_common","_TooltipWrapper","_jsxRuntime","_excluded","ownKeys","e","r","t","Object","keys","getOwnPropertySymbols","o","filter","getOwnPropertyDescriptor","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","default","getOwnPropertyDescriptors","defineProperties","defineProperty","getBorderRadius","borderRadius","getBorderRadiusStyle","flatEdge","radius","IconButtonContentStyles","exports","styled","div","IconButtonStyled","button","props","$borderRadius","$flatEdge","$unsetIconSize","$invertFocus","invertedFocusStyles","focusStyles","IconButtonStyledPrimary","$useTransparentBackground","COLORS","getColor","theme","$iconColor","IconButtonStyledSecondary","IconButton","React","forwardRef","_ref","ref","id","variant","shape","action","children","useTransparentBackground","disabled","iconColor","unsetIconSize","tabIndex","type","hidden","invertFocus","dataTestId","focusOnClick","tooltip","rest","_objectWithoutProperties2","render","ButtonVariant","jsx","onClick","event","stopPropagation","onMouseDown","defaultOnMouseDownHandler","undefined","propTypes","_propTypes","oneOf","func","isRequired","bool","string","number","node","_default"],"sources":["../../src/Button/Iconbutton.tsx"],"sourcesContent":["import React from 'react';\r\nimport styled from 'styled-components';\r\n\r\nimport { BREAKPOINTS, COLORS, focusStyles, invertedFocusStyles } from '../styles';\r\nimport { defaultOnMouseDownHandler } from '../common';\r\nimport { Testable } from '../types';\r\nimport {TooltipProps} from \"../Tooltips/TooltipTypes\";\r\nimport TooltipWrapper from \"../Tooltips/TooltipWrapper\";\r\n\r\nexport interface HeaderItemProps {\r\n  inMobileMenu?: boolean;\r\n  useTransparentBackground?: boolean;\r\n  iconColor?: string;\r\n  unsetIconSize?: boolean;\r\n  borderRadius?: number;\r\n  shape?: string;\r\n  flatEdge?: string;\r\n  invertFocus?: boolean;\r\n  shouldNotInteract?: boolean;\r\n}\r\n\r\nconst getBorderRadius = (borderRadius?: number) => (borderRadius ? `${borderRadius}px` : '4px');\r\n\r\nconst getBorderRadiusStyle = ( flatEdge?: string, borderRadius?: number ) => {\r\n  const radius = getBorderRadius(borderRadius);\r\n  switch (flatEdge) {\r\n    case 'left':\r\n      return `0px ${radius} ${radius} 0px`;\r\n\r\n    case 'right':\r\n      return `${radius} 0px 0px ${radius}`;\r\n\r\n    case 'none':\r\n    default:\r\n      return `${radius}`;\r\n  }\r\n};\r\n\r\nexport const IconButtonContentStyles = styled.div``;\r\n\r\nexport const IconButtonStyled = styled.button<{$borderRadius?: number; $flatEdge?: string; $unsetIconSize?: boolean;\r\n              $invertFocus?: boolean; $useTransparentBackground?: boolean; $iconColor?: string;}>`\r\n  border-width: 0;\r\n  cursor: pointer;\r\n  height: 48px;\r\n  width: 48px;\r\n  background: transparent;\r\n  position: relative;\r\n  display: block;\r\n\r\n  border-radius: ${(props) => (props.$borderRadius ? `${props.$borderRadius}px` : '4px')};\r\n  ${IconButtonContentStyles} {\r\n    height: 36px;\r\n    width: 36px;\r\n    border-radius: ${props => getBorderRadiusStyle(props.$flatEdge, props.$borderRadius)};\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    svg {\r\n      height: ${(props) => (props.$unsetIconSize ? 'unset' : '24px')};\r\n      width: ${(props) => (props.$unsetIconSize ? 'unset' : '24px')};\r\n      padding: 0;\r\n    }\r\n  }\r\n  &:only-child {\r\n    margin: 0;\r\n  }\r\n  &:disabled {\r\n    cursor: not-allowed;\r\n  }\r\n\r\n  &:focus {\r\n    ${(props) => (props.$invertFocus ? invertedFocusStyles : focusStyles)}\r\n  }\r\n`;\r\n\r\nexport const IconButtonStyledPrimary = styled(IconButtonStyled)`\r\n  ${IconButtonContentStyles} {\r\n    background-color: ${(props) => (props.$useTransparentBackground ? 'transparent' : COLORS.getColor('primary_500', props.theme))};\r\n\r\n    svg {\r\n      fill: ${(props) => props.$iconColor || COLORS.getColor('white', props.theme)};\r\n      path {\r\n        fill: ${(props) => props.$iconColor || COLORS.getColor('white', props.theme)};\r\n      }\r\n    }\r\n  }\r\n  &:hover:not(:disabled),\r\n  &.hover-state {\r\n    ${IconButtonContentStyles} {\r\n      background-color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n    }\r\n    ${IconButtonContentStyles} svg path,\r\n    ${IconButtonContentStyles} svg {\r\n      fill: ${props => COLORS.getColor('white', props.theme)};\r\n    }\r\n  }\r\n  &:active:not(:disabled),\r\n  &.active-state {\r\n    ${IconButtonContentStyles} {\r\n      background: ${props => COLORS.getColor('primary_800', props.theme)};\r\n    }\r\n    ${IconButtonContentStyles} svg path,\r\n    ${IconButtonContentStyles} svg {\r\n      fill: ${props => COLORS.getColor('white', props.theme)};\r\n    }\r\n  }\r\n  &:disabled {\r\n    ${IconButtonContentStyles} {\r\n      background-color: ${props => COLORS.getColor('neutral_200', props.theme)};\r\n    }\r\n    svg {\r\n      path {\r\n        fill: ${props => COLORS.getColor('white', props.theme)};\r\n      }\r\n      fill: ${props => COLORS.getColor('white', props.theme)};\r\n    }\r\n  }\r\n`;\r\n\r\nexport const IconButtonStyledSecondary = styled(IconButtonStyled)`\r\n  ${IconButtonContentStyles} {\r\n    background-color: ${(props) => (props.$useTransparentBackground ? 'transparent' : COLORS.getColor('white', props.theme))};\r\n\r\n    svg {\r\n      fill: ${(props) => props.$iconColor || COLORS.getColor('neutral_600', props.theme)};\r\n      path {\r\n        fill: ${(props) => props.$iconColor || COLORS.getColor('neutral_600', props.theme)};\r\n      }\r\n    }\r\n  }\r\n\r\n\r\n  &:hover:not(:disabled) {\r\n    ${IconButtonContentStyles} {\r\n      background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n    }\r\n    ${IconButtonContentStyles} svg path,\r\n    ${IconButtonContentStyles} svg {\r\n      fill: ${props => COLORS.getColor('primary_700', props.theme)};\r\n    }\r\n  }\r\n  &:active:not(:disabled),\r\n  &.active-state {\r\n    ${IconButtonContentStyles} {\r\n      background: ${props => COLORS.getColor('primary_100', props.theme)};\r\n    }\r\n    ${IconButtonContentStyles} svg path,\r\n    ${IconButtonContentStyles} svg {\r\n      fill: ${props => COLORS.getColor('primary_800', props.theme)};\r\n    }\r\n  }\r\n\r\n  &:disabled {\r\n    ${IconButtonContentStyles} {\r\n      background-color: ${(props) => (props.$useTransparentBackground ? 'transparent' : COLORS.getColor('white', props.theme))};\r\n    }\r\n    svg {\r\n      path {\r\n        fill: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n      }\r\n      fill: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n    }\r\n  }\r\n`;\r\n\r\nexport interface IconButtonProps extends Testable, Omit<React.ButtonHTMLAttributes<HTMLButtonElement>,  'onClick' | 'onMouseDown'> {\r\n  /** Variant of the button. Defaults to 'primary' */\r\n  variant?: 'primary' | 'secondary';\r\n  /** Shape of the button. Defaults to 'square' */\r\n  shape?: 'square' | 'circular';\r\n  /** Action that will get executed when button is clicked. */\r\n  action: (event?: React.MouseEvent<HTMLButtonElement>) => void;\r\n  /** Allows removing rounded corners on one of the edges of the button. */\r\n  flatEdge?: 'right' | 'left' | 'none' | undefined;\r\n  /** If set background filling color of the button will be transparent. */\r\n  useTransparentBackground?: boolean;\r\n  /** Custom fill color for SVG icon. */\r\n  iconColor?: string;\r\n  /** If set then the width and height of SVG icon will be set to 'unset', otherwise will be set to '24px' */\r\n  unsetIconSize?: boolean;\r\n  /** Sets border radius of the button.  */\r\n  borderRadius?: number;\r\n  /** Content (icon) to show in the button. */\r\n  children?: React.ReactNode;\r\n  /** Invert color scheme of focus framing. */\r\n  invertFocus?: boolean;\r\n  /** If this flag is set, then blurs current focus, as a result will focus current IconButton when user clicks it. */\r\n  focusOnClick?: boolean;\r\n  /** Details of the tooltip to show. */\r\n  tooltip?: Omit<TooltipProps, 'tabIndex'>;\r\n}\r\n\r\nexport const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(\r\n  (\r\n    {\r\n      id,\r\n      variant,\r\n      shape,\r\n      action,\r\n      children,\r\n      useTransparentBackground,\r\n      disabled,\r\n      iconColor,\r\n      unsetIconSize,\r\n      tabIndex,\r\n      flatEdge,\r\n      borderRadius,\r\n      type,\r\n      hidden,\r\n      invertFocus,\r\n      dataTestId,\r\n      focusOnClick,\r\n      tooltip,\r\n      ...rest\r\n    }: IconButtonProps,\r\n    ref,\r\n  ) => {\r\n\r\n    const render = () => {\r\n      // Let's render button\r\n\r\n      let ButtonVariant = IconButtonStyledPrimary;\r\n      switch (variant) {\r\n        case 'secondary':\r\n          ButtonVariant = IconButtonStyledSecondary;\r\n          break;\r\n      }\r\n\r\n      return <ButtonVariant\r\n          id={id}\r\n          type={type ?? 'button'}\r\n          data-testid={dataTestId}\r\n          $flatEdge={flatEdge}\r\n          ref={ref}\r\n          onClick={(event: React.MouseEvent<HTMLButtonElement>) => {\r\n            event.stopPropagation();\r\n            action(event);\r\n          }}\r\n          disabled={disabled}\r\n          $useTransparentBackground={useTransparentBackground}\r\n          $iconColor={iconColor}\r\n          $unsetIconSize={unsetIconSize}\r\n          tabIndex={tabIndex}\r\n          $borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\r\n          onMouseDown={!focusOnClick ? defaultOnMouseDownHandler : undefined}\r\n          hidden={hidden}\r\n          $invertFocus={invertFocus}\r\n          {...rest}>\r\n          <IconButtonContentStyles>{children}</IconButtonContentStyles>\r\n        </ButtonVariant>;\r\n      }\r\n\r\n    return !tooltip\r\n      ? render()\r\n      : (\r\n        <TooltipWrapper {...tooltip}>\r\n          {render()}\r\n        </TooltipWrapper>\r\n      );\r\n  },\r\n);\r\n\r\nexport default IconButton;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Iconbutton.cjs","names":["_react","_interopRequireDefault","require","_styledComponents","_styles","_common","_TooltipWrapper","_jsxRuntime","_excluded","ownKeys","e","r","t","Object","keys","getOwnPropertySymbols","o","filter","getOwnPropertyDescriptor","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","default","getOwnPropertyDescriptors","defineProperties","defineProperty","getBorderRadius","borderRadius","getBorderRadiusStyle","flatEdge","radius","IconButtonContentStyles","exports","styled","div","IconButtonStyled","button","props","$borderRadius","$flatEdge","$unsetIconSize","$invertFocus","invertedFocusStyles","focusStyles","IconButtonStyledPrimary","$useTransparentBackground","COLORS","generateToken","componentType","defaultVariant","theme","$iconColor","isOnFill","state","IconButtonStyledSecondary","IconButton","React","forwardRef","_ref","ref","id","variant","shape","action","children","useTransparentBackground","disabled","iconColor","unsetIconSize","tabIndex","type","hidden","invertFocus","dataTestId","focusOnClick","tooltip","rest","_objectWithoutProperties2","render","ButtonVariant","jsx","onClick","event","stopPropagation","onMouseDown","defaultOnMouseDownHandler","undefined","propTypes","_propTypes","oneOf","func","isRequired","bool","string","number","node","_default"],"sources":["../../src/Button/Iconbutton.tsx"],"sourcesContent":["import React from 'react';\r\nimport styled from 'styled-components';\r\n\r\nimport { BREAKPOINTS, COLORS, focusStyles, invertedFocusStyles } from '../styles';\r\nimport { defaultOnMouseDownHandler } from '../common';\r\nimport { Testable } from '../types';\r\nimport {TooltipProps} from \"../Tooltips/TooltipTypes\";\r\nimport TooltipWrapper from \"../Tooltips/TooltipWrapper\";\r\n\r\nexport interface HeaderItemProps {\r\n  inMobileMenu?: boolean;\r\n  useTransparentBackground?: boolean;\r\n  iconColor?: string;\r\n  unsetIconSize?: boolean;\r\n  borderRadius?: number;\r\n  shape?: string;\r\n  flatEdge?: string;\r\n  invertFocus?: boolean;\r\n  shouldNotInteract?: boolean;\r\n}\r\n\r\nconst getBorderRadius = (borderRadius?: number) => (borderRadius ? `${borderRadius}px` : '4px');\r\n\r\nconst getBorderRadiusStyle = ( flatEdge?: string, borderRadius?: number ) => {\r\n  const radius = getBorderRadius(borderRadius);\r\n  switch (flatEdge) {\r\n    case 'left':\r\n      return `0px ${radius} ${radius} 0px`;\r\n\r\n    case 'right':\r\n      return `${radius} 0px 0px ${radius}`;\r\n\r\n    case 'none':\r\n    default:\r\n      return `${radius}`;\r\n  }\r\n};\r\n\r\nexport const IconButtonContentStyles = styled.div``;\r\n\r\nexport const IconButtonStyled = styled.button<{$borderRadius?: number; $flatEdge?: string; $unsetIconSize?: boolean;\r\n              $invertFocus?: boolean; $useTransparentBackground?: boolean; $iconColor?: string;}>`\r\n  border-width: 0;\r\n  cursor: pointer;\r\n  height: 48px;\r\n  width: 48px;\r\n  background: transparent;\r\n  position: relative;\r\n  display: block;\r\n\r\n  border-radius: ${(props) => (props.$borderRadius ? `${props.$borderRadius}px` : '4px')};\r\n  ${IconButtonContentStyles} {\r\n    height: 36px;\r\n    width: 36px;\r\n    border-radius: ${props => getBorderRadiusStyle(props.$flatEdge, props.$borderRadius)};\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    svg {\r\n      height: ${(props) => (props.$unsetIconSize ? 'unset' : '24px')};\r\n      width: ${(props) => (props.$unsetIconSize ? 'unset' : '24px')};\r\n      padding: 0;\r\n    }\r\n  }\r\n  &:only-child {\r\n    margin: 0;\r\n  }\r\n  &:disabled {\r\n    cursor: not-allowed;\r\n  }\r\n\r\n  &:focus {\r\n    ${(props) => (props.$invertFocus ? invertedFocusStyles : focusStyles)}\r\n  }\r\n`;\r\n\r\nexport const IconButtonStyledPrimary = styled(IconButtonStyled)`\r\n  ${IconButtonContentStyles} {\r\n    background-color: ${(props) => (props.$useTransparentBackground ? 'transparent' : COLORS.generateToken({componentType: 'bg-fill', defaultVariant: 'primary'}, props.theme))};\r\n\r\n    svg {\r\n      fill: ${(props) => props.$iconColor || COLORS.generateToken({ componentType: 'icon', isOnFill: true, defaultVariant: 'primary'}, props.theme)};\r\n      path {\r\n        fill: ${(props) => props.$iconColor || COLORS.generateToken({ componentType: 'icon', isOnFill: true, defaultVariant: 'primary'}, props.theme)};\r\n      }\r\n    }\r\n  }\r\n  &:hover:not(:disabled),\r\n  &.hover-state {\r\n    ${IconButtonContentStyles} {\r\n      background-color: ${props => COLORS.generateToken({ componentType: 'bg-fill', state: 'hover', defaultVariant: 'primary'}, props.theme)};\r\n    }\r\n    ${IconButtonContentStyles} svg path,\r\n    ${IconButtonContentStyles} svg {\r\n      fill: ${props => COLORS.generateToken({ componentType: 'icon', isOnFill: true, defaultVariant: 'primary'}, props.theme)};\r\n    }\r\n  }\r\n  &:active:not(:disabled),\r\n  &.active-state {\r\n    ${IconButtonContentStyles} {\r\n      background-color: ${props => COLORS.generateToken({ componentType: 'bg-fill', state: 'active', defaultVariant: 'primary'}, props.theme)};\r\n    }\r\n    ${IconButtonContentStyles} svg path,\r\n    ${IconButtonContentStyles} svg {\r\n      fill: ${props => COLORS.generateToken({ componentType: 'icon', isOnFill: true, defaultVariant: 'primary'}, props.theme)};\r\n    }\r\n  }\r\n  &:disabled {\r\n    ${IconButtonContentStyles} {\r\n      background-color: ${props => COLORS.generateToken({ componentType: 'bg-fill', state: 'disabled' }, props.theme)};\r\n    }\r\n    svg {\r\n      path {\r\n        fill: ${props => COLORS.generateToken({ componentType: 'icon', isOnFill: true, defaultVariant: 'primary'}, props.theme)};\r\n      }\r\n      fill: ${props => COLORS.generateToken({ componentType: 'icon', isOnFill: true, defaultVariant: 'primary'}, props.theme)};\r\n    }\r\n  }\r\n`;\r\n\r\nexport const IconButtonStyledSecondary = styled(IconButtonStyled)`\r\n  ${IconButtonContentStyles} {\r\n    background-color: transparent;\r\n\r\n    svg {\r\n      fill: ${(props) => props.$iconColor || COLORS.generateToken({ componentType: 'icon', defaultVariant: 'subtle'}, props.theme)};\r\n      path {\r\n        fill: ${(props) => props.$iconColor || COLORS.generateToken({ componentType: 'icon', defaultVariant: 'subtle'}, props.theme)};\r\n      }\r\n    }\r\n  }\r\n\r\n  &:hover:not(:disabled) {\r\n    ${IconButtonContentStyles} {\r\n      background-color: ${props => COLORS.generateToken({ componentType: 'bg-surface', state: 'hover' }, props.theme)};\r\n    }\r\n    ${IconButtonContentStyles} svg path,\r\n    ${IconButtonContentStyles} svg {\r\n      fill: ${props => COLORS.generateToken({ componentType: 'icon', state: 'hover' }, props.theme)};\r\n    }\r\n  }\r\n\r\n  &:active:not(:disabled),\r\n  &.active-state {\r\n    ${IconButtonContentStyles} {\r\n      background: ${props => COLORS.generateToken({ componentType: 'bg-surface', state: 'active' }, props.theme)};\r\n    }\r\n    ${IconButtonContentStyles} svg path,\r\n    ${IconButtonContentStyles} svg {\r\n      fill: ${props => COLORS.generateToken({ componentType: 'icon', state: 'active' }, props.theme)};\r\n    }\r\n  }\r\n\r\n  &:disabled {\r\n    ${IconButtonContentStyles} {\r\n      background-color: transparent;\r\n    }\r\n    svg {\r\n      path {\r\n        fill: ${props => COLORS.generateToken({ componentType: 'icon', state: 'disabled' }, props.theme)};\r\n      }\r\n      fill: ${props => COLORS.generateToken({ componentType: 'icon', state: 'disabled' }, props.theme)};\r\n    }\r\n  }\r\n`;\r\n\r\nexport interface IconButtonProps extends Testable, Omit<React.ButtonHTMLAttributes<HTMLButtonElement>,  'onClick' | 'onMouseDown'> {\r\n  /** Variant of the button. Defaults to 'primary' */\r\n  variant?: 'primary' | 'secondary';\r\n  /** Shape of the button. Defaults to 'square' */\r\n  shape?: 'square' | 'circular';\r\n  /** Action that will get executed when button is clicked. */\r\n  action: (event?: React.MouseEvent<HTMLButtonElement>) => void;\r\n  /** Allows removing rounded corners on one of the edges of the button. */\r\n  flatEdge?: 'right' | 'left' | 'none' | undefined;\r\n  /** If set background filling color of the button will be transparent. */\r\n  useTransparentBackground?: boolean;\r\n  /** Custom fill color for SVG icon. */\r\n  iconColor?: string;\r\n  /** If set then the width and height of SVG icon will be set to 'unset', otherwise will be set to '24px' */\r\n  unsetIconSize?: boolean;\r\n  /** Sets border radius of the button.  */\r\n  borderRadius?: number;\r\n  /** Content (icon) to show in the button. */\r\n  children?: React.ReactNode;\r\n  /** Invert color scheme of focus framing. */\r\n  invertFocus?: boolean;\r\n  /** If this flag is set, then blurs current focus, as a result will focus current IconButton when user clicks it. */\r\n  focusOnClick?: boolean;\r\n  /** Details of the tooltip to show. */\r\n  tooltip?: Omit<TooltipProps, 'tabIndex'>;\r\n}\r\n\r\nexport const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(\r\n  (\r\n    {\r\n      id,\r\n      variant,\r\n      shape,\r\n      action,\r\n      children,\r\n      useTransparentBackground,\r\n      disabled,\r\n      iconColor,\r\n      unsetIconSize,\r\n      tabIndex,\r\n      flatEdge,\r\n      borderRadius,\r\n      type,\r\n      hidden,\r\n      invertFocus,\r\n      dataTestId,\r\n      focusOnClick,\r\n      tooltip,\r\n      ...rest\r\n    }: IconButtonProps,\r\n    ref,\r\n  ) => {\r\n\r\n    const render = () => {\r\n      // Let's render button\r\n\r\n      let ButtonVariant = IconButtonStyledPrimary;\r\n      switch (variant) {\r\n        case 'secondary':\r\n          ButtonVariant = IconButtonStyledSecondary;\r\n          break;\r\n      }\r\n\r\n      return <ButtonVariant\r\n          id={id}\r\n          type={type ?? 'button'}\r\n          data-testid={dataTestId}\r\n          $flatEdge={flatEdge}\r\n          ref={ref}\r\n          onClick={(event: React.MouseEvent<HTMLButtonElement>) => {\r\n            event.stopPropagation();\r\n            action(event);\r\n          }}\r\n          disabled={disabled}\r\n          $useTransparentBackground={useTransparentBackground}\r\n          $iconColor={iconColor}\r\n          $unsetIconSize={unsetIconSize}\r\n          tabIndex={tabIndex}\r\n          $borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\r\n          onMouseDown={!focusOnClick ? defaultOnMouseDownHandler : undefined}\r\n          hidden={hidden}\r\n          $invertFocus={invertFocus}\r\n          {...rest}>\r\n          <IconButtonContentStyles>{children}</IconButtonContentStyles>\r\n        </ButtonVariant>;\r\n      }\r\n\r\n    return !tooltip\r\n      ? render()\r\n      : (\r\n        <TooltipWrapper {...tooltip}>\r\n          {render()}\r\n        </TooltipWrapper>\r\n      );\r\n  },\r\n);\r\n\r\nexport default IconButton;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/Button/Iconbutton.js

@@ -60,89 +60,151 @@ export const IconButtonStyled = styled.button`
 `;
 export const IconButtonStyledPrimary = styled(IconButtonStyled)`
   ${IconButtonContentStyles} {
-    background-color: ${props => props.$useTransparentBackground ? 'transparent' : COLORS.getColor('primary_500', props.theme)};
+    background-color: ${props => props.$useTransparentBackground ? 'transparent' : COLORS.generateToken({
+  componentType: 'bg-fill',
+  defaultVariant: 'primary'
+}, props.theme)};
 
     svg {
-      fill: ${props => props.$iconColor || COLORS.getColor('white', props.theme)};
+      fill: ${props => props.$iconColor || COLORS.generateToken({
+  componentType: 'icon',
+  isOnFill: true,
+  defaultVariant: 'primary'
+}, props.theme)};
       path {
-        fill: ${props => props.$iconColor || COLORS.getColor('white', props.theme)};
+        fill: ${props => props.$iconColor || COLORS.generateToken({
+  componentType: 'icon',
+  isOnFill: true,
+  defaultVariant: 'primary'
+}, props.theme)};
       }
     }
   }
   &:hover:not(:disabled),
   &.hover-state {
     ${IconButtonContentStyles} {
-      background-color: ${props => COLORS.getColor('primary_700', props.theme)};
+      background-color: ${props => COLORS.generateToken({
+  componentType: 'bg-fill',
+  state: 'hover',
+  defaultVariant: 'primary'
+}, props.theme)};
     }
     ${IconButtonContentStyles} svg path,
     ${IconButtonContentStyles} svg {
-      fill: ${props => COLORS.getColor('white', props.theme)};
+      fill: ${props => COLORS.generateToken({
+  componentType: 'icon',
+  isOnFill: true,
+  defaultVariant: 'primary'
+}, props.theme)};
     }
   }
   &:active:not(:disabled),
   &.active-state {
     ${IconButtonContentStyles} {
-      background: ${props => COLORS.getColor('primary_800', props.theme)};
+      background-color: ${props => COLORS.generateToken({
+  componentType: 'bg-fill',
+  state: 'active',
+  defaultVariant: 'primary'
+}, props.theme)};
     }
     ${IconButtonContentStyles} svg path,
     ${IconButtonContentStyles} svg {
-      fill: ${props => COLORS.getColor('white', props.theme)};
+      fill: ${props => COLORS.generateToken({
+  componentType: 'icon',
+  isOnFill: true,
+  defaultVariant: 'primary'
+}, props.theme)};
     }
   }
   &:disabled {
     ${IconButtonContentStyles} {
-      background-color: ${props => COLORS.getColor('neutral_200', props.theme)};
+      background-color: ${props => COLORS.generateToken({
+  componentType: 'bg-fill',
+  state: 'disabled'
+}, props.theme)};
     }
     svg {
       path {
-        fill: ${props => COLORS.getColor('white', props.theme)};
+        fill: ${props => COLORS.generateToken({
+  componentType: 'icon',
+  isOnFill: true,
+  defaultVariant: 'primary'
+}, props.theme)};
       }
-      fill: ${props => COLORS.getColor('white', props.theme)};
+      fill: ${props => COLORS.generateToken({
+  componentType: 'icon',
+  isOnFill: true,
+  defaultVariant: 'primary'
+}, props.theme)};
     }
   }
 `;
 export const IconButtonStyledSecondary = styled(IconButtonStyled)`
   ${IconButtonContentStyles} {
-    background-color: ${props => props.$useTransparentBackground ? 'transparent' : COLORS.getColor('white', props.theme)};
+    background-color: transparent;
 
     svg {
-      fill: ${props => props.$iconColor || COLORS.getColor('neutral_600', props.theme)};
+      fill: ${props => props.$iconColor || COLORS.generateToken({
+  componentType: 'icon',
+  defaultVariant: 'subtle'
+}, props.theme)};
       path {
-        fill: ${props => props.$iconColor || COLORS.getColor('neutral_600', props.theme)};
+        fill: ${props => props.$iconColor || COLORS.generateToken({
+  componentType: 'icon',
+  defaultVariant: 'subtle'
+}, props.theme)};
       }
     }
   }
 
-
   &:hover:not(:disabled) {
     ${IconButtonContentStyles} {
-      background-color: ${props => COLORS.getColor('primary_20', props.theme)};
+      background-color: ${props => COLORS.generateToken({
+  componentType: 'bg-surface',
+  state: 'hover'
+}, props.theme)};
     }
     ${IconButtonContentStyles} svg path,
     ${IconButtonContentStyles} svg {
-      fill: ${props => COLORS.getColor('primary_700', props.theme)};
+      fill: ${props => COLORS.generateToken({
+  componentType: 'icon',
+  state: 'hover'
+}, props.theme)};
     }
   }
+
   &:active:not(:disabled),
   &.active-state {
     ${IconButtonContentStyles} {
-      background: ${props => COLORS.getColor('primary_100', props.theme)};
+      background: ${props => COLORS.generateToken({
+  componentType: 'bg-surface',
+  state: 'active'
+}, props.theme)};
     }
     ${IconButtonContentStyles} svg path,
     ${IconButtonContentStyles} svg {
-      fill: ${props => COLORS.getColor('primary_800', props.theme)};
+      fill: ${props => COLORS.generateToken({
+  componentType: 'icon',
+  state: 'active'
+}, props.theme)};
     }
   }
 
   &:disabled {
     ${IconButtonContentStyles} {
-      background-color: ${props => props.$useTransparentBackground ? 'transparent' : COLORS.getColor('white', props.theme)};
+      background-color: transparent;
     }
     svg {
       path {
-        fill: ${props => COLORS.getColor('neutral_300', props.theme)};
+        fill: ${props => COLORS.generateToken({
+  componentType: 'icon',
+  state: 'disabled'
+}, props.theme)};
       }
-      fill: ${props => COLORS.getColor('neutral_300', props.theme)};
+      fill: ${props => COLORS.generateToken({
+  componentType: 'icon',
+  state: 'disabled'
+}, props.theme)};
     }
   }
 `;

package/dist/Button/Iconbutton.js.map

@@ -1 +1 @@
-{"version":3,"file":"Iconbutton.js","names":["React","styled","COLORS","focusStyles","invertedFocusStyles","defaultOnMouseDownHandler","TooltipWrapper","jsx","_jsx","getBorderRadius","borderRadius","getBorderRadiusStyle","flatEdge","radius","IconButtonContentStyles","div","IconButtonStyled","button","props","$borderRadius","$flatEdge","$unsetIconSize","$invertFocus","IconButtonStyledPrimary","$useTransparentBackground","getColor","theme","$iconColor","IconButtonStyledSecondary","IconButton","forwardRef","_ref","ref","id","variant","shape","action","children","useTransparentBackground","disabled","iconColor","unsetIconSize","tabIndex","type","hidden","invertFocus","dataTestId","focusOnClick","tooltip","rest","_objectWithoutProperties","_excluded","render","ButtonVariant","_objectSpread","onClick","event","stopPropagation","onMouseDown","undefined","propTypes","_pt","oneOf","func","isRequired","bool","string","number","node"],"sources":["../../src/Button/Iconbutton.tsx"],"sourcesContent":["import React from 'react';\r\nimport styled from 'styled-components';\r\n\r\nimport { BREAKPOINTS, COLORS, focusStyles, invertedFocusStyles } from '../styles';\r\nimport { defaultOnMouseDownHandler } from '../common';\r\nimport { Testable } from '../types';\r\nimport {TooltipProps} from \"../Tooltips/TooltipTypes\";\r\nimport TooltipWrapper from \"../Tooltips/TooltipWrapper\";\r\n\r\nexport interface HeaderItemProps {\r\n  inMobileMenu?: boolean;\r\n  useTransparentBackground?: boolean;\r\n  iconColor?: string;\r\n  unsetIconSize?: boolean;\r\n  borderRadius?: number;\r\n  shape?: string;\r\n  flatEdge?: string;\r\n  invertFocus?: boolean;\r\n  shouldNotInteract?: boolean;\r\n}\r\n\r\nconst getBorderRadius = (borderRadius?: number) => (borderRadius ? `${borderRadius}px` : '4px');\r\n\r\nconst getBorderRadiusStyle = ( flatEdge?: string, borderRadius?: number ) => {\r\n  const radius = getBorderRadius(borderRadius);\r\n  switch (flatEdge) {\r\n    case 'left':\r\n      return `0px ${radius} ${radius} 0px`;\r\n\r\n    case 'right':\r\n      return `${radius} 0px 0px ${radius}`;\r\n\r\n    case 'none':\r\n    default:\r\n      return `${radius}`;\r\n  }\r\n};\r\n\r\nexport const IconButtonContentStyles = styled.div``;\r\n\r\nexport const IconButtonStyled = styled.button<{$borderRadius?: number; $flatEdge?: string; $unsetIconSize?: boolean;\r\n              $invertFocus?: boolean; $useTransparentBackground?: boolean; $iconColor?: string;}>`\r\n  border-width: 0;\r\n  cursor: pointer;\r\n  height: 48px;\r\n  width: 48px;\r\n  background: transparent;\r\n  position: relative;\r\n  display: block;\r\n\r\n  border-radius: ${(props) => (props.$borderRadius ? `${props.$borderRadius}px` : '4px')};\r\n  ${IconButtonContentStyles} {\r\n    height: 36px;\r\n    width: 36px;\r\n    border-radius: ${props => getBorderRadiusStyle(props.$flatEdge, props.$borderRadius)};\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    svg {\r\n      height: ${(props) => (props.$unsetIconSize ? 'unset' : '24px')};\r\n      width: ${(props) => (props.$unsetIconSize ? 'unset' : '24px')};\r\n      padding: 0;\r\n    }\r\n  }\r\n  &:only-child {\r\n    margin: 0;\r\n  }\r\n  &:disabled {\r\n    cursor: not-allowed;\r\n  }\r\n\r\n  &:focus {\r\n    ${(props) => (props.$invertFocus ? invertedFocusStyles : focusStyles)}\r\n  }\r\n`;\r\n\r\nexport const IconButtonStyledPrimary = styled(IconButtonStyled)`\r\n  ${IconButtonContentStyles} {\r\n    background-color: ${(props) => (props.$useTransparentBackground ? 'transparent' : COLORS.getColor('primary_500', props.theme))};\r\n\r\n    svg {\r\n      fill: ${(props) => props.$iconColor || COLORS.getColor('white', props.theme)};\r\n      path {\r\n        fill: ${(props) => props.$iconColor || COLORS.getColor('white', props.theme)};\r\n      }\r\n    }\r\n  }\r\n  &:hover:not(:disabled),\r\n  &.hover-state {\r\n    ${IconButtonContentStyles} {\r\n      background-color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n    }\r\n    ${IconButtonContentStyles} svg path,\r\n    ${IconButtonContentStyles} svg {\r\n      fill: ${props => COLORS.getColor('white', props.theme)};\r\n    }\r\n  }\r\n  &:active:not(:disabled),\r\n  &.active-state {\r\n    ${IconButtonContentStyles} {\r\n      background: ${props => COLORS.getColor('primary_800', props.theme)};\r\n    }\r\n    ${IconButtonContentStyles} svg path,\r\n    ${IconButtonContentStyles} svg {\r\n      fill: ${props => COLORS.getColor('white', props.theme)};\r\n    }\r\n  }\r\n  &:disabled {\r\n    ${IconButtonContentStyles} {\r\n      background-color: ${props => COLORS.getColor('neutral_200', props.theme)};\r\n    }\r\n    svg {\r\n      path {\r\n        fill: ${props => COLORS.getColor('white', props.theme)};\r\n      }\r\n      fill: ${props => COLORS.getColor('white', props.theme)};\r\n    }\r\n  }\r\n`;\r\n\r\nexport const IconButtonStyledSecondary = styled(IconButtonStyled)`\r\n  ${IconButtonContentStyles} {\r\n    background-color: ${(props) => (props.$useTransparentBackground ? 'transparent' : COLORS.getColor('white', props.theme))};\r\n\r\n    svg {\r\n      fill: ${(props) => props.$iconColor || COLORS.getColor('neutral_600', props.theme)};\r\n      path {\r\n        fill: ${(props) => props.$iconColor || COLORS.getColor('neutral_600', props.theme)};\r\n      }\r\n    }\r\n  }\r\n\r\n\r\n  &:hover:not(:disabled) {\r\n    ${IconButtonContentStyles} {\r\n      background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n    }\r\n    ${IconButtonContentStyles} svg path,\r\n    ${IconButtonContentStyles} svg {\r\n      fill: ${props => COLORS.getColor('primary_700', props.theme)};\r\n    }\r\n  }\r\n  &:active:not(:disabled),\r\n  &.active-state {\r\n    ${IconButtonContentStyles} {\r\n      background: ${props => COLORS.getColor('primary_100', props.theme)};\r\n    }\r\n    ${IconButtonContentStyles} svg path,\r\n    ${IconButtonContentStyles} svg {\r\n      fill: ${props => COLORS.getColor('primary_800', props.theme)};\r\n    }\r\n  }\r\n\r\n  &:disabled {\r\n    ${IconButtonContentStyles} {\r\n      background-color: ${(props) => (props.$useTransparentBackground ? 'transparent' : COLORS.getColor('white', props.theme))};\r\n    }\r\n    svg {\r\n      path {\r\n        fill: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n      }\r\n      fill: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n    }\r\n  }\r\n`;\r\n\r\nexport interface IconButtonProps extends Testable, Omit<React.ButtonHTMLAttributes<HTMLButtonElement>,  'onClick' | 'onMouseDown'> {\r\n  /** Variant of the button. Defaults to 'primary' */\r\n  variant?: 'primary' | 'secondary';\r\n  /** Shape of the button. Defaults to 'square' */\r\n  shape?: 'square' | 'circular';\r\n  /** Action that will get executed when button is clicked. */\r\n  action: (event?: React.MouseEvent<HTMLButtonElement>) => void;\r\n  /** Allows removing rounded corners on one of the edges of the button. */\r\n  flatEdge?: 'right' | 'left' | 'none' | undefined;\r\n  /** If set background filling color of the button will be transparent. */\r\n  useTransparentBackground?: boolean;\r\n  /** Custom fill color for SVG icon. */\r\n  iconColor?: string;\r\n  /** If set then the width and height of SVG icon will be set to 'unset', otherwise will be set to '24px' */\r\n  unsetIconSize?: boolean;\r\n  /** Sets border radius of the button.  */\r\n  borderRadius?: number;\r\n  /** Content (icon) to show in the button. */\r\n  children?: React.ReactNode;\r\n  /** Invert color scheme of focus framing. */\r\n  invertFocus?: boolean;\r\n  /** If this flag is set, then blurs current focus, as a result will focus current IconButton when user clicks it. */\r\n  focusOnClick?: boolean;\r\n  /** Details of the tooltip to show. */\r\n  tooltip?: Omit<TooltipProps, 'tabIndex'>;\r\n}\r\n\r\nexport const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(\r\n  (\r\n    {\r\n      id,\r\n      variant,\r\n      shape,\r\n      action,\r\n      children,\r\n      useTransparentBackground,\r\n      disabled,\r\n      iconColor,\r\n      unsetIconSize,\r\n      tabIndex,\r\n      flatEdge,\r\n      borderRadius,\r\n      type,\r\n      hidden,\r\n      invertFocus,\r\n      dataTestId,\r\n      focusOnClick,\r\n      tooltip,\r\n      ...rest\r\n    }: IconButtonProps,\r\n    ref,\r\n  ) => {\r\n\r\n    const render = () => {\r\n      // Let's render button\r\n\r\n      let ButtonVariant = IconButtonStyledPrimary;\r\n      switch (variant) {\r\n        case 'secondary':\r\n          ButtonVariant = IconButtonStyledSecondary;\r\n          break;\r\n      }\r\n\r\n      return <ButtonVariant\r\n          id={id}\r\n          type={type ?? 'button'}\r\n          data-testid={dataTestId}\r\n          $flatEdge={flatEdge}\r\n          ref={ref}\r\n          onClick={(event: React.MouseEvent<HTMLButtonElement>) => {\r\n            event.stopPropagation();\r\n            action(event);\r\n          }}\r\n          disabled={disabled}\r\n          $useTransparentBackground={useTransparentBackground}\r\n          $iconColor={iconColor}\r\n          $unsetIconSize={unsetIconSize}\r\n          tabIndex={tabIndex}\r\n          $borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\r\n          onMouseDown={!focusOnClick ? defaultOnMouseDownHandler : undefined}\r\n          hidden={hidden}\r\n          $invertFocus={invertFocus}\r\n          {...rest}>\r\n          <IconButtonContentStyles>{children}</IconButtonContentStyles>\r\n        </ButtonVariant>;\r\n      }\r\n\r\n    return !tooltip\r\n      ? render()\r\n      : (\r\n        <TooltipWrapper {...tooltip}>\r\n          {render()}\r\n        </TooltipWrapper>\r\n      );\r\n  },\r\n);\r\n\r\nexport default IconButton;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Iconbutton.js","names":["React","styled","COLORS","focusStyles","invertedFocusStyles","defaultOnMouseDownHandler","TooltipWrapper","jsx","_jsx","getBorderRadius","borderRadius","getBorderRadiusStyle","flatEdge","radius","IconButtonContentStyles","div","IconButtonStyled","button","props","$borderRadius","$flatEdge","$unsetIconSize","$invertFocus","IconButtonStyledPrimary","$useTransparentBackground","generateToken","componentType","defaultVariant","theme","$iconColor","isOnFill","state","IconButtonStyledSecondary","IconButton","forwardRef","_ref","ref","id","variant","shape","action","children","useTransparentBackground","disabled","iconColor","unsetIconSize","tabIndex","type","hidden","invertFocus","dataTestId","focusOnClick","tooltip","rest","_objectWithoutProperties","_excluded","render","ButtonVariant","_objectSpread","onClick","event","stopPropagation","onMouseDown","undefined","propTypes","_pt","oneOf","func","isRequired","bool","string","number","node"],"sources":["../../src/Button/Iconbutton.tsx"],"sourcesContent":["import React from 'react';\r\nimport styled from 'styled-components';\r\n\r\nimport { BREAKPOINTS, COLORS, focusStyles, invertedFocusStyles } from '../styles';\r\nimport { defaultOnMouseDownHandler } from '../common';\r\nimport { Testable } from '../types';\r\nimport {TooltipProps} from \"../Tooltips/TooltipTypes\";\r\nimport TooltipWrapper from \"../Tooltips/TooltipWrapper\";\r\n\r\nexport interface HeaderItemProps {\r\n  inMobileMenu?: boolean;\r\n  useTransparentBackground?: boolean;\r\n  iconColor?: string;\r\n  unsetIconSize?: boolean;\r\n  borderRadius?: number;\r\n  shape?: string;\r\n  flatEdge?: string;\r\n  invertFocus?: boolean;\r\n  shouldNotInteract?: boolean;\r\n}\r\n\r\nconst getBorderRadius = (borderRadius?: number) => (borderRadius ? `${borderRadius}px` : '4px');\r\n\r\nconst getBorderRadiusStyle = ( flatEdge?: string, borderRadius?: number ) => {\r\n  const radius = getBorderRadius(borderRadius);\r\n  switch (flatEdge) {\r\n    case 'left':\r\n      return `0px ${radius} ${radius} 0px`;\r\n\r\n    case 'right':\r\n      return `${radius} 0px 0px ${radius}`;\r\n\r\n    case 'none':\r\n    default:\r\n      return `${radius}`;\r\n  }\r\n};\r\n\r\nexport const IconButtonContentStyles = styled.div``;\r\n\r\nexport const IconButtonStyled = styled.button<{$borderRadius?: number; $flatEdge?: string; $unsetIconSize?: boolean;\r\n              $invertFocus?: boolean; $useTransparentBackground?: boolean; $iconColor?: string;}>`\r\n  border-width: 0;\r\n  cursor: pointer;\r\n  height: 48px;\r\n  width: 48px;\r\n  background: transparent;\r\n  position: relative;\r\n  display: block;\r\n\r\n  border-radius: ${(props) => (props.$borderRadius ? `${props.$borderRadius}px` : '4px')};\r\n  ${IconButtonContentStyles} {\r\n    height: 36px;\r\n    width: 36px;\r\n    border-radius: ${props => getBorderRadiusStyle(props.$flatEdge, props.$borderRadius)};\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    svg {\r\n      height: ${(props) => (props.$unsetIconSize ? 'unset' : '24px')};\r\n      width: ${(props) => (props.$unsetIconSize ? 'unset' : '24px')};\r\n      padding: 0;\r\n    }\r\n  }\r\n  &:only-child {\r\n    margin: 0;\r\n  }\r\n  &:disabled {\r\n    cursor: not-allowed;\r\n  }\r\n\r\n  &:focus {\r\n    ${(props) => (props.$invertFocus ? invertedFocusStyles : focusStyles)}\r\n  }\r\n`;\r\n\r\nexport const IconButtonStyledPrimary = styled(IconButtonStyled)`\r\n  ${IconButtonContentStyles} {\r\n    background-color: ${(props) => (props.$useTransparentBackground ? 'transparent' : COLORS.generateToken({componentType: 'bg-fill', defaultVariant: 'primary'}, props.theme))};\r\n\r\n    svg {\r\n      fill: ${(props) => props.$iconColor || COLORS.generateToken({ componentType: 'icon', isOnFill: true, defaultVariant: 'primary'}, props.theme)};\r\n      path {\r\n        fill: ${(props) => props.$iconColor || COLORS.generateToken({ componentType: 'icon', isOnFill: true, defaultVariant: 'primary'}, props.theme)};\r\n      }\r\n    }\r\n  }\r\n  &:hover:not(:disabled),\r\n  &.hover-state {\r\n    ${IconButtonContentStyles} {\r\n      background-color: ${props => COLORS.generateToken({ componentType: 'bg-fill', state: 'hover', defaultVariant: 'primary'}, props.theme)};\r\n    }\r\n    ${IconButtonContentStyles} svg path,\r\n    ${IconButtonContentStyles} svg {\r\n      fill: ${props => COLORS.generateToken({ componentType: 'icon', isOnFill: true, defaultVariant: 'primary'}, props.theme)};\r\n    }\r\n  }\r\n  &:active:not(:disabled),\r\n  &.active-state {\r\n    ${IconButtonContentStyles} {\r\n      background-color: ${props => COLORS.generateToken({ componentType: 'bg-fill', state: 'active', defaultVariant: 'primary'}, props.theme)};\r\n    }\r\n    ${IconButtonContentStyles} svg path,\r\n    ${IconButtonContentStyles} svg {\r\n      fill: ${props => COLORS.generateToken({ componentType: 'icon', isOnFill: true, defaultVariant: 'primary'}, props.theme)};\r\n    }\r\n  }\r\n  &:disabled {\r\n    ${IconButtonContentStyles} {\r\n      background-color: ${props => COLORS.generateToken({ componentType: 'bg-fill', state: 'disabled' }, props.theme)};\r\n    }\r\n    svg {\r\n      path {\r\n        fill: ${props => COLORS.generateToken({ componentType: 'icon', isOnFill: true, defaultVariant: 'primary'}, props.theme)};\r\n      }\r\n      fill: ${props => COLORS.generateToken({ componentType: 'icon', isOnFill: true, defaultVariant: 'primary'}, props.theme)};\r\n    }\r\n  }\r\n`;\r\n\r\nexport const IconButtonStyledSecondary = styled(IconButtonStyled)`\r\n  ${IconButtonContentStyles} {\r\n    background-color: transparent;\r\n\r\n    svg {\r\n      fill: ${(props) => props.$iconColor || COLORS.generateToken({ componentType: 'icon', defaultVariant: 'subtle'}, props.theme)};\r\n      path {\r\n        fill: ${(props) => props.$iconColor || COLORS.generateToken({ componentType: 'icon', defaultVariant: 'subtle'}, props.theme)};\r\n      }\r\n    }\r\n  }\r\n\r\n  &:hover:not(:disabled) {\r\n    ${IconButtonContentStyles} {\r\n      background-color: ${props => COLORS.generateToken({ componentType: 'bg-surface', state: 'hover' }, props.theme)};\r\n    }\r\n    ${IconButtonContentStyles} svg path,\r\n    ${IconButtonContentStyles} svg {\r\n      fill: ${props => COLORS.generateToken({ componentType: 'icon', state: 'hover' }, props.theme)};\r\n    }\r\n  }\r\n\r\n  &:active:not(:disabled),\r\n  &.active-state {\r\n    ${IconButtonContentStyles} {\r\n      background: ${props => COLORS.generateToken({ componentType: 'bg-surface', state: 'active' }, props.theme)};\r\n    }\r\n    ${IconButtonContentStyles} svg path,\r\n    ${IconButtonContentStyles} svg {\r\n      fill: ${props => COLORS.generateToken({ componentType: 'icon', state: 'active' }, props.theme)};\r\n    }\r\n  }\r\n\r\n  &:disabled {\r\n    ${IconButtonContentStyles} {\r\n      background-color: transparent;\r\n    }\r\n    svg {\r\n      path {\r\n        fill: ${props => COLORS.generateToken({ componentType: 'icon', state: 'disabled' }, props.theme)};\r\n      }\r\n      fill: ${props => COLORS.generateToken({ componentType: 'icon', state: 'disabled' }, props.theme)};\r\n    }\r\n  }\r\n`;\r\n\r\nexport interface IconButtonProps extends Testable, Omit<React.ButtonHTMLAttributes<HTMLButtonElement>,  'onClick' | 'onMouseDown'> {\r\n  /** Variant of the button. Defaults to 'primary' */\r\n  variant?: 'primary' | 'secondary';\r\n  /** Shape of the button. Defaults to 'square' */\r\n  shape?: 'square' | 'circular';\r\n  /** Action that will get executed when button is clicked. */\r\n  action: (event?: React.MouseEvent<HTMLButtonElement>) => void;\r\n  /** Allows removing rounded corners on one of the edges of the button. */\r\n  flatEdge?: 'right' | 'left' | 'none' | undefined;\r\n  /** If set background filling color of the button will be transparent. */\r\n  useTransparentBackground?: boolean;\r\n  /** Custom fill color for SVG icon. */\r\n  iconColor?: string;\r\n  /** If set then the width and height of SVG icon will be set to 'unset', otherwise will be set to '24px' */\r\n  unsetIconSize?: boolean;\r\n  /** Sets border radius of the button.  */\r\n  borderRadius?: number;\r\n  /** Content (icon) to show in the button. */\r\n  children?: React.ReactNode;\r\n  /** Invert color scheme of focus framing. */\r\n  invertFocus?: boolean;\r\n  /** If this flag is set, then blurs current focus, as a result will focus current IconButton when user clicks it. */\r\n  focusOnClick?: boolean;\r\n  /** Details of the tooltip to show. */\r\n  tooltip?: Omit<TooltipProps, 'tabIndex'>;\r\n}\r\n\r\nexport const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(\r\n  (\r\n    {\r\n      id,\r\n      variant,\r\n      shape,\r\n      action,\r\n      children,\r\n      useTransparentBackground,\r\n      disabled,\r\n      iconColor,\r\n      unsetIconSize,\r\n      tabIndex,\r\n      flatEdge,\r\n      borderRadius,\r\n      type,\r\n      hidden,\r\n      invertFocus,\r\n      dataTestId,\r\n      focusOnClick,\r\n      tooltip,\r\n      ...rest\r\n    }: IconButtonProps,\r\n    ref,\r\n  ) => {\r\n\r\n    const render = () => {\r\n      // Let's render button\r\n\r\n      let ButtonVariant = IconButtonStyledPrimary;\r\n      switch (variant) {\r\n        case 'secondary':\r\n          ButtonVariant = IconButtonStyledSecondary;\r\n          break;\r\n      }\r\n\r\n      return <ButtonVariant\r\n          id={id}\r\n          type={type ?? 'button'}\r\n          data-testid={dataTestId}\r\n          $flatEdge={flatEdge}\r\n          ref={ref}\r\n          onClick={(event: React.MouseEvent<HTMLButtonElement>) => {\r\n            event.stopPropagation();\r\n            action(event);\r\n          }}\r\n          disabled={disabled}\r\n          $useTransparentBackground={useTransparentBackground}\r\n          $iconColor={iconColor}\r\n          $unsetIconSize={unsetIconSize}\r\n          tabIndex={tabIndex}\r\n          $borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\r\n          onMouseDown={!focusOnClick ? defaultOnMouseDownHandler : undefined}\r\n          hidden={hidden}\r\n          $invertFocus={invertFocus}\r\n          {...rest}>\r\n          <IconButtonContentStyles>{children}</IconButtonContentStyles>\r\n        </ButtonVariant>;\r\n      }\r\n\r\n    return !tooltip\r\n      ? render()\r\n      : (\r\n        <TooltipWrapper {...tooltip}>\r\n          {render()}\r\n        </TooltipWrapper>\r\n      );\r\n  },\r\n);\r\n\r\nexport default IconButton;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/Button/__tests__/BackButton.test.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import {act, render} from '../../test-utils';
+import {BackButton} from '../index';
+import {Size} from '../../types'
+import 'jest-styled-components';
+
+
+
+
+describe('<BackButton />', () => {
+  it('should render back button', function () {
+    const {queryByText} = render(<BackButton size={Size.Small}>Back Button</BackButton>);
+    expect(queryByText('Back Button')).toBeDefined();
+  });
+  it('should call action on click', function () {
+    const clickMock = jest.fn(() => {});
+    const component = render(<BackButton size={Size.Small} onClick={clickMock}>Back Button</BackButton>);
+    act(() => {
+      component.getByText('Back Button').click();
+    });
+    expect(clickMock).toBeCalled();
+  });
+  it('should not call action on click when disabled', function () {
+    const clickMock = jest.fn(() => {});
+    const component = render(<BackButton size={Size.Small} disabled={true} onClick={clickMock}>Back Button</BackButton>);
+    act(() => {
+      component.getByText('Back Button').click();
+    });
+    expect(clickMock).toBeCalledTimes(0);
+  });
+
+});

package/dist/Button/__tests__/Button.test.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { render } from '../../test-utils';
+import { Button } from '../index';
+import 'jest-styled-components';
+import { COLORS } from '../../styles';
+import { Size } from '../..';
+
+
+
+
+describe('<Button />', () => {
+  it('Renders primary button', async () => {
+    const { queryByText, getByTestId } = render(
+      <Button variant="primary" testId="TestButton" size={Size.Large}>
+        TestButton
+      </Button>,
+    );
+    expect(queryByText('TestButton')).toBeDefined();
+    /*expect(getByTestId('TestButton')).toHaveStyleRule('background-color', COLORS.primary);
+    expect(getByTestId('TestButton')).toHaveStyleRule('cursor', 'pointer');
+    expect(getByTestId('TestButton')).toHaveStyleRule('color', 'white');*/
+  });
+  it('Renders secondary button', async () => {
+    const { queryByText, getByTestId } = render(
+      <Button variant="secondary" testId="TestButton">
+        TestButton
+      </Button>,
+    );
+    expect(queryByText('TestButton')).toBeDefined();
+    /*expect(getByTestId('TestButton')).toHaveStyleRule('color', COLORS.primary);
+    expect(getByTestId('TestButton')).toHaveStyleRule('border-color', COLORS.primary);
+    expect(getByTestId('TestButton')).toHaveStyleRule('background-color', 'white');*/
+  });
+  it('Renders tertiary button', async () => {
+    const { queryByText, getByTestId } = render(
+      <Button variant="tertiary" testId="TestButton">
+        TestButton
+      </Button>,
+    );
+    expect(queryByText('TestButton')).toBeDefined();
+    /*expect(getByTestId('TestButton')).toHaveStyleRule('background-color', 'white');
+    expect(getByTestId('TestButton')).toHaveStyleRule('border-color', COLORS.neutral_100);
+    expect(getByTestId('TestButton')).toHaveStyleRule('color', COLORS.primary);*/
+  });
+});