@laerdal/life-react-components 3.6.0-dev.1.full → 3.6.1

package/dist/Button/TextButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextButton.js","names":["React","styled","useTheme","LoadingIndicator","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","COLORS","focusStyles","invertedFocusStyles","Size","defaultOnMouseDownHandler","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","getBorderRadius","flatEdge","radius","TextButtonContentContainer","div","TextButtonBaseStyled","button","TextButtonPrimaryStyled","props","$size","Large","Bold","generateToken","componentType","isOnFill","defaultVariant","theme","Small","$flatEdge","$width","Medium","$iconOnly","state","$invertFocus","undefined","TextButtonSecondaryStyled","TextButtonInvertedSecondaryStyled","TextButtonTertiaryStyled","TextButtonPositiveStyled","getColor","TextButtonDestructiveStyled","TextButtonSecondaryDestructiveStyled","TextButton","forwardRef","_ref","ref","children","variant","type","size","invertFocus","width","testId","disabled","icon","iconPosition","_objectWithoutProperties","_excluded","loading","renderProps","_excluded2","renderIcon","className","renderContent","TextButtonStyled","_objectSpread","onMouseDown","propTypes","_pt","oneOf","bool","oneOfType","string","node"],"sources":["../../src/Button/TextButton.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled, { css, useTheme } from 'styled-components';\r\nimport { LoadingIndicator } from '../LoadingIndicator';\r\nimport { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles';\r\nimport { COLORS, focusStyles, invertedFocusStyles } from '../styles';\r\nimport { Size, Testable } from '../types';\r\nimport { defaultOnMouseDownHandler } from '../common';\r\n\r\nconst getBorderRadius = (flatEdge: string | undefined, radius: number) => {\r\n  switch (flatEdge) {\r\n    case 'left':\r\n      return `0px ${radius}px ${radius}px 0px`;\r\n\r\n    case 'right':\r\n      return `${radius}px 0px 0px ${radius}px`;\r\n\r\n    case 'none':\r\n    default:\r\n      return `${radius}px`;\r\n  }\r\n};\r\n\r\nexport const TextButtonContentContainer = styled.div`\r\n  min-width: 64px;\r\n`;\r\n\r\nconst TextButtonBaseStyled = styled.button<{$iconOnly: boolean; $size: Size; $flatEdge: string | undefined; $width: string; $invertFocus: boolean | undefined; }>``;\r\n\r\nexport const TextButtonPrimaryStyled = styled(TextButtonBaseStyled)`\r\n  border: none;\r\n  background-color: transparent;\r\n  cursor: pointer;\r\n  padding: 0;\r\n  margin: 0;\r\n  position: relative;\r\n  box-sizing: border-box;  \r\n  &.loading-state {\r\n    cursor: wait;\r\n  }\r\n  ${TextButtonContentContainer} {\r\n    ${(props) =>\r\n      props.$size === Size.Large\r\n        ? ComponentLStyling(ComponentTextStyle.Bold, COLORS.generateToken({ componentType: 'text', isOnFill: true, defaultVariant: 'primary' }, props.theme))\r\n        : props.$size === Size.Small\r\n        ? ComponentSStyling(ComponentTextStyle.Bold, COLORS.generateToken({ componentType: 'text', isOnFill: true, defaultVariant: 'primary' }, props.theme))\r\n        : ComponentMStyling(ComponentTextStyle.Bold, COLORS.generateToken({ componentType: 'text', isOnFill: true, defaultVariant: 'primary' }, props.theme))};\r\n\r\n    background-color: ${(props) => COLORS.generateToken({ componentType: 'bg-fill', defaultVariant: 'primary' }, props.theme)};\r\n    border-radius: ${(props) => getBorderRadius(props.$flatEdge, 8)};\r\n\r\n    width: ${(props) => props.$width};\r\n    position: relative;\r\n\r\n    min-height: ${(props) => (props.$size === Size.Large ? '56px' : props.$size === Size.Small ? '32px' : '40px')};\r\n\r\n    box-sizing: border-box;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    padding: ${(props) => (props.$size === Size.Large ? '14px 16px' : props.$size === Size.Small ? '6px 8px' : '8px 12px')};\r\n\r\n    span.icon:not(.loading) {\r\n      pointer-events: none;\r\n    }\r\n\r\n    span.loading {\r\n      opacity: 0;\r\n    }\r\n\r\n    .icon {\r\n      margin: ${(props) => (props.$size === Size.Medium ? props.$iconOnly ? '-2px -8px' : '' : (props.$size === Size.Small ? props.$iconOnly ? '-2px -6px' : '' : '' ))};\r\n      width: ${(props) => (props.$size === Size.Large ? '28px' : props.$size === Size.Small ? '20px' : '24px')};\r\n      height: ${(props) => (props.$size === Size.Large ? '28px' : props.$size === Size.Small ? '20px' : '24px')};\r\n      svg {\r\n        width: ${(props) => (props.$size === Size.Large ? '28px' : props.$size === Size.Small ? '20px' : '24px')} !important;\r\n        height: ${(props) => (props.$size === Size.Large ? '28px' : props.$size === Size.Small ? '20px' : '24px')} !important;\r\n      }\r\n    }\r\n\r\n    .label {\r\n      margin: 0 4px;\r\n    }\r\n\r\n    div {\r\n      position: absolute;\r\n      width: 100%;\r\n      svg {\r\n        height: ${(props) => (props.$size === Size.Large ? '28px' : props.$size === Size.Small ? '20px' : '24px')};\r\n        width: ${(props) => (props.$size === Size.Large ? '28px' : props.$size === Size.Small ? '20px' : '24px')};\r\n        path {\r\n          fill: ${(props) => COLORS.generateToken({ componentType: 'icon', isOnFill: true, defaultVariant: 'primary' }, props.theme)};\r\n        }\r\n      }\r\n    }\r\n  }\r\n  &:hover > ${TextButtonContentContainer},\r\n  &.hover-state > ${TextButtonContentContainer} {\r\n    background-color: ${(props) => COLORS.generateToken({ componentType: 'bg-fill', state: 'hover', defaultVariant: 'primary' }, props.theme)};\r\n    color: ${(props) => COLORS.generateToken({ componentType: 'text', isOnFill: true, defaultVariant: 'primary' }, props.theme)};\r\n  }\r\n  &:active > ${TextButtonContentContainer},\r\n  &.active-state > ${TextButtonContentContainer} {\r\n    background-color: ${(props) => COLORS.generateToken({ componentType: 'bg-fill', state: 'active', defaultVariant: 'primary' }, props.theme)};\r\n    color: ${(props) => COLORS.generateToken({ componentType: 'text', isOnFill: true, defaultVariant: 'primary' }, props.theme)};\r\n  }\r\n\r\n  &:focus,\r\n  &.focus-state {\r\n    ${(props) => (props.$invertFocus || (props.$invertFocus === undefined) ? invertedFocusStyles : focusStyles)}\r\n  }\r\n  &:disabled,\r\n  &.disabled-state {\r\n    cursor: not-allowed;\r\n  }\r\n  &:disabled > ${TextButtonContentContainer},\r\n  &.disabled-state > ${TextButtonContentContainer} {\r\n    pointer-events: none;\r\n    background-color: ${(props) => COLORS.generateToken({ componentType: 'bg-fill', state: 'disabled' }, props.theme)};\r\n    color: ${(props) => COLORS.generateToken({ componentType: 'text', isOnFill: true, state: 'disabled' }, props.theme)};\r\n  }\r\n`;\r\n\r\nexport const TextButtonSecondaryStyled = styled(TextButtonPrimaryStyled)`\r\n  ${TextButtonContentContainer} {\r\n    color: ${(props) => COLORS.generateToken({ componentType: 'text', defaultVariant: 'primary' }, props.theme)};\r\n    background-color: transparent;\r\n    div svg path {\r\n      fill: ${(props) => COLORS.generateToken({ componentType: 'icon', defaultVariant: 'primary' }, props.theme)};\r\n    }\r\n    box-shadow: inset 0 0 0 2px ${(props) => COLORS.generateToken({ componentType: 'border', defaultVariant: 'primary' }, props.theme)};\r\n    \r\n    padding: ${(props) => (props.$size === Size.Large ? '12px 16px' : props.$size === Size.Small ? '4px 8px' : '6px 12px')};\r\n  }\r\n\r\n  &:hover > ${TextButtonContentContainer},\r\n  &.hover-state > ${TextButtonContentContainer} {\r\n    color: ${(props) => COLORS.generateToken({ componentType: 'text', state:'hover', defaultVariant: 'primary' }, props.theme)};\r\n    box-shadow: inset 0 0 0 2px ${(props) => COLORS.generateToken({ componentType: 'border', state:'hover', defaultVariant: 'primary' }, props.theme)};\r\n    \r\n    background-color: transparent;\r\n    div {\r\n      svg {\r\n        path {\r\n          fill: ${(props) => COLORS.generateToken({ componentType: 'text', state:'hover', defaultVariant: 'primary' }, props.theme)};\r\n        }\r\n      }\r\n    }\r\n  }\r\n  &:active > ${TextButtonContentContainer},\r\n  &.active-state > ${TextButtonContentContainer} {\r\n    color: ${(props) => COLORS.generateToken({ componentType: 'text', state:'active', defaultVariant: 'primary' }, props.theme)};\r\n    box-shadow: inset 0 0 0 2px ${(props) => COLORS.generateToken({ componentType: 'border', state:'active', defaultVariant: 'primary' }, props.theme)};\r\n    \r\n    background-color: transparent;\r\n    div {\r\n      svg {\r\n        path {\r\n          fill: ${(props) => COLORS.generateToken({ componentType: 'text', state:'hover', defaultVariant: 'primary' }, props.theme)};\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  &:disabled > ${TextButtonContentContainer},\r\n  &.disabled-state > ${TextButtonContentContainer} {\r\n    background-color: transparent;\r\n    color: ${(props) => COLORS.generateToken({ componentType: 'text', state:'disabled' }, props.theme)};\r\n    box-shadow: inset 0 0 0 2px ${(props) => COLORS.generateToken({ componentType: 'border', state:'disabled' }, props.theme)};\r\n  }\r\n`;\r\n\r\n\r\nexport const TextButtonInvertedSecondaryStyled = styled(TextButtonPrimaryStyled)`\r\n  ${TextButtonContentContainer} {\r\n    color: ${(props) => COLORS.generateToken({ componentType: 'text', defaultVariant: 'inverse' }, props.theme)};\r\n    background-color: transparent;\r\n    div svg path {\r\n      fill: ${(props) => COLORS.generateToken({ componentType: 'icon', defaultVariant: 'inverse' }, props.theme)};\r\n    }\r\n    box-shadow: inset 0 0 0 2px ${(props) => COLORS.generateToken({ componentType: 'border', defaultVariant: 'inverse' }, props.theme)};\r\n    \r\n    padding: ${(props) => (props.$size === Size.Large ? '12px 16px' : props.$size === Size.Small ? '4px 8px' : '6px 12px')};\r\n  }\r\n\r\n  &:hover > ${TextButtonContentContainer},\r\n  &.hover-state > ${TextButtonContentContainer} {\r\n    color: ${(props) => COLORS.generateToken({ componentType: 'text', state:'hover', defaultVariant: 'inverse' }, props.theme)};\r\n    box-shadow: inset 0 0 0 2px ${(props) => COLORS.generateToken({ componentType: 'border', state:'hover', defaultVariant: 'inverse' }, props.theme)};\r\n\r\n    background-color: transparent;\r\n    div {\r\n      svg {\r\n        path {\r\n          fill: ${(props) => COLORS.generateToken({ componentType: 'text', state:'hover', defaultVariant: 'inverse' }, props.theme)};\r\n        }\r\n      }\r\n    }\r\n  }\r\n  &:active > ${TextButtonContentContainer},\r\n  &.active-state > ${TextButtonContentContainer} {\r\n    color: ${(props) => COLORS.generateToken({ componentType: 'text', state:'active', defaultVariant: 'inverse' }, props.theme)};\r\n    box-shadow: inset 0 0 0 2px ${(props) => COLORS.generateToken({ componentType: 'border', state:'active', defaultVariant: 'inverse' }, props.theme)};\r\n\r\n    background-color: transparent;\r\n    div {\r\n      svg {\r\n        path {\r\n          fill: ${(props) => COLORS.generateToken({ componentType: 'text', state:'hover', defaultVariant: 'inverse' }, props.theme)};\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  &:disabled > ${TextButtonContentContainer},\r\n  &.disabled-state > ${TextButtonContentContainer} {\r\n    background-color: transparent;\r\n    color: ${(props) => COLORS.generateToken({ componentType: 'text', state:'disabled', defaultVariant: 'inverse' }, props.theme)};\r\n    box-shadow: inset 0 0 0 2px ${(props) => COLORS.generateToken({ componentType: 'border', state:'disabled', defaultVariant: 'inverse' }, props.theme)};\r\n  }\r\n`;\r\n\r\nexport const TextButtonTertiaryStyled = styled(TextButtonPrimaryStyled)`\r\n${TextButtonContentContainer} {\r\n    color: ${(props) => COLORS.generateToken({ componentType: 'text', defaultVariant: 'primary' }, props.theme)};\r\n    background-color: transparent;\r\n\r\n    div svg path {\r\n      fill: ${(props) => COLORS.generateToken({ componentType: 'text', defaultVariant: 'primary' }, props.theme)};\r\n    }\r\n\r\n    padding: ${(props) => (props.$size === Size.Large ? '12px 16px' : props.$size === Size.Small ? '4px 8px' : '6px 12px')};\r\n  }\r\n\r\n  &:hover > ${TextButtonContentContainer},\r\n  &.hover-state > ${TextButtonContentContainer} {\r\n    background-color: ${(props) => COLORS.generateToken({ componentType: 'bg-surface', state:'hover' }, props.theme)};\r\n    color: ${(props) => COLORS.generateToken({ componentType: 'text', defaultVariant: 'primary' }, props.theme)};\r\n\r\n    div {\r\n      svg {\r\n        path {\r\n          fill: ${(props) => COLORS.generateToken({ componentType: 'text', defaultVariant: 'primary' }, props.theme)};\r\n        }\r\n      }\r\n    }\r\n  }\r\n  &:active > ${TextButtonContentContainer},\r\n  &.active-state > ${TextButtonContentContainer} {\r\n    background-color: ${(props) => COLORS.generateToken({ componentType: 'bg-surface', state: 'active' }, props.theme)};\r\n    color: ${(props) => COLORS.generateToken({ componentType: 'text', defaultVariant: 'primary' }, props.theme)};\r\n\r\n    div {\r\n      svg {\r\n        path {\r\n          fill: ${(props) => COLORS.generateToken({ componentType: 'text', defaultVariant: 'primary' }, props.theme)};\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  &:disabled > ${TextButtonContentContainer},\r\n  &.disabled-state > ${TextButtonContentContainer} {\r\n    background-color: transparent !important;\r\n    color: ${props => COLORS.generateToken({ componentType: 'text', isOnFill:true, state:'disabled' }, props.theme)};\r\n    border-color: transparent !important;\r\n  }\r\n`;\r\n\r\nexport const TextButtonPositiveStyled = styled(TextButtonPrimaryStyled)`\r\n  ${TextButtonContentContainer} {\r\n    color: white;\r\n    background-color: ${props => COLORS.getColor('positive_500', props.theme)};\r\n  }\r\n  &:hover > ${TextButtonContentContainer},\r\n  &.hover-state > ${TextButtonContentContainer} {\r\n    background-color: ${props => COLORS.getColor('positive_700', props.theme)};\r\n  }\r\n  &:active > ${TextButtonContentContainer},\r\n  &.active-state > ${TextButtonContentContainer} {\r\n    background-color: ${props => COLORS.getColor('positive_800', props.theme)};\r\n  }\r\n\r\n  &:disabled > ${TextButtonContentContainer},\r\n  &.disabled-state > ${TextButtonContentContainer} {\r\n    background-color: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n    color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n  }\r\n`;\r\n\r\nexport const TextButtonDestructiveStyled = styled(TextButtonPrimaryStyled)`\r\n${TextButtonContentContainer} {\r\n    color: white;\r\n    background-color: ${props => COLORS.generateToken({ componentType: 'bg-fill', defaultVariant: 'critical' }, props.theme)};\r\n  }\r\n  &:hover > ${TextButtonContentContainer},\r\n  &.hover-state > ${TextButtonContentContainer} {\r\n    background-color: ${props => COLORS.generateToken({ componentType: 'bg-fill', state:'hover', defaultVariant: 'critical' }, props.theme)};\r\n  }\r\n  &:active > ${TextButtonContentContainer},\r\n  &.active-state > ${TextButtonContentContainer} {\r\n    background-color: ${props => COLORS.generateToken({ componentType: 'bg-fill', state:'active', defaultVariant: 'critical' }, props.theme)};\r\n  }\r\n\r\n  &:disabled > ${TextButtonContentContainer},\r\n  &.disabled-state > ${TextButtonContentContainer} {\r\n    background-color: ${props => COLORS.generateToken({ componentType: 'bg-fill', state: 'disabled' }, props.theme)};\r\n    color: ${props => COLORS.generateToken({ componentType: 'text', isOnFill: true, state: 'disabled' }, props.theme)};    \r\n  }\r\n`;\r\n\r\nexport const TextButtonSecondaryDestructiveStyled = styled(TextButtonPrimaryStyled)`\r\n  ${TextButtonContentContainer} {\r\n    color: ${(props) => COLORS.generateToken({ componentType: 'text', defaultVariant: 'critical' }, props.theme)};\r\n    background-color: transparent;\r\n    div svg path {\r\n      fill: ${(props) => COLORS.generateToken({ componentType: 'icon', defaultVariant: 'critical' }, props.theme)};\r\n    }\r\n    box-shadow: inset 0 0 0 2px ${(props) => COLORS.generateToken({ componentType: 'border', defaultVariant: 'critical' }, props.theme)};\r\n    \r\n    padding: ${(props) => (props.$size === Size.Large ? '12px 16px' : props.$size === Size.Small ? '4px 8px' : '6px 12px')};\r\n  }\r\n\r\n  &:hover > ${TextButtonContentContainer},\r\n  &.hover-state > ${TextButtonContentContainer} {\r\n    color: ${(props) => COLORS.generateToken({ componentType: 'text', state:'hover', defaultVariant: 'critical' }, props.theme)};\r\n    box-shadow: inset 0 0 0 2px ${(props) => COLORS.generateToken({ componentType: 'border', state:'hover', defaultVariant: 'critical' }, props.theme)};\r\n    \r\n    background-color: transparent;\r\n    div {\r\n      svg {\r\n        path {\r\n          fill: ${(props) => COLORS.generateToken({ componentType: 'text', state:'hover', defaultVariant: 'critical' }, props.theme)};\r\n        }\r\n      }\r\n    }\r\n  }\r\n  &:active > ${TextButtonContentContainer},\r\n  &.active-state > ${TextButtonContentContainer} {\r\n    color: ${(props) => COLORS.generateToken({ componentType: 'text', state:'active', defaultVariant: 'critical' }, props.theme)};\r\n    box-shadow: inset 0 0 0 2px ${(props) => COLORS.generateToken({ componentType: 'border', state:'active', defaultVariant: 'critical' }, props.theme)};\r\n    \r\n    background-color: transparent;\r\n    div {\r\n      svg {\r\n        path {\r\n          fill: ${(props) => COLORS.generateToken({ componentType: 'text', state:'hover', defaultVariant: 'critical' }, props.theme)};\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  &:disabled > ${TextButtonContentContainer},\r\n  &.disabled-state > ${TextButtonContentContainer} {\r\n    background-color: transparent;\r\n    color: ${(props) => COLORS.generateToken({ componentType: 'text', state:'disabled' }, props.theme)};\r\n    box-shadow: inset 0 0 0 2px ${(props) => COLORS.generateToken({ componentType: 'border', state:'disabled' }, props.theme)};\r\n  }\r\n`;\r\n\r\n\r\nexport interface TextButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\r\n  /** Look and feel variant of the component. Defaults to 'primary'. */\r\n  variant?: 'primary' | 'secondary' | 'tertiary' | 'positive' | 'destructive' | 'secondaryDestructive' | 'secondaryInverse';\r\n  /** Can be used in order to remove rounded corners on right or left edge of the button. Used by 'DualFunctionButton'. Defaults to 'undefined' */\r\n  flatEdge?: 'right' | 'left' | 'none' | undefined;\r\n  /** Size of the component. Small, Medium or Large. Defaults to 'medium' */\r\n  size?: Size.Small | Size.Medium | Size.Large;\r\n  /** Allows using inverted colors for outlining focus rect. Shown when component focused by keyboard. */\r\n  invertFocus?: boolean;\r\n  /** Can be used to set custom value for width style. Value is set for 'ButtonContent' container. */\r\n  width?: 'auto' | string;\r\n  /** If set, then 'opacity' of children container will be set to 0, and loading indicator will be shown.  */\r\n  loading?: boolean;\r\n  /** TestId. Will be set to the top level button component. */\r\n  testId?: string;\r\n  /** Icon that will be shown on the left of the children. */\r\n  icon?: React.ReactNode;\r\n  /** Icon position in the button. Defaults to 'left' */\r\n  iconPosition?: 'left' | 'right';\r\n}\r\n\r\n/**\r\n * TextButton component\r\n */\r\nconst TextButton = React.forwardRef<HTMLButtonElement, TextButtonProps>(\r\n  ({ children = '', variant = 'primary', type = 'button', size = Size.Medium, invertFocus,  width: width = 'auto', testId, disabled, flatEdge, icon, iconPosition = 'left', ...props }, ref) => {\r\n    // Let's filter out properties that we don't need to render.\r\n    const { loading, ...renderProps } = props;\r\n\r\n    const theme = useTheme();\r\n    const renderIcon = () => (\r\n      <><span className={(children ? 'extramargin ' : '') + (loading ? 'icon loading' : 'icon')}>{icon}</span></>\r\n    )\r\n\r\n    const renderContent = () => (\r\n      <>\r\n        {icon && iconPosition == 'left' && renderIcon()}\r\n        {children && <span className={loading ? 'label loading' : 'label'}>{children}</span>}\r\n        {icon && iconPosition == 'right' && renderIcon()}\r\n        {loading && <LoadingIndicator />}\r\n      </>\r\n    );\r\n\r\n    let TextButtonStyled = TextButtonPrimaryStyled;\r\n    switch (variant) {\r\n      case 'secondary':\r\n        TextButtonStyled = TextButtonSecondaryStyled;\r\n        break;\r\n      case 'tertiary':\r\n        TextButtonStyled = TextButtonTertiaryStyled;\r\n        break;\r\n      case 'positive':\r\n        TextButtonStyled = TextButtonPositiveStyled;\r\n        break;\r\n      case 'destructive':\r\n        TextButtonStyled = TextButtonDestructiveStyled;\r\n        break;\r\n      case 'secondaryDestructive':\r\n        TextButtonStyled = TextButtonSecondaryDestructiveStyled;\r\n        break;\r\n      case 'secondaryInverse':\r\n        TextButtonStyled = TextButtonInvertedSecondaryStyled;\r\n        break;\r\n    }\r\n\r\n    return (\r\n      <TextButtonStyled\r\n        {...renderProps}\r\n        $size={size}\r\n        $invertFocus={invertFocus}        \r\n        ref={ref}\r\n        disabled={disabled}\r\n        $iconOnly={!children}\r\n        type={type}\r\n        $flatEdge={flatEdge}\r\n        $width={width}\r\n        data-testid={testId}\r\n        className={props.loading ? 'loading-state ' + props.className : ' ' + props.className}\r\n        onMouseDown={defaultOnMouseDownHandler}>\r\n        <TextButtonContentContainer>{renderContent()}</TextButtonContentContainer>\r\n      </TextButtonStyled>\r\n    );\r\n  },\r\n);\r\n\r\nexport default TextButton;\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 { TextButton } from '../index';
+import 'jest-styled-components';
+import { COLORS } from '../../styles';
+import { Size } from '../..';
+
+
+
+
+describe('<TextButton />', () => {
+  it('Renders primary button', async () => {
+    const { queryByText, getByTestId } = render(
+      <TextButton variant="primary" testId="TestButton" size={Size.Large}>
+        TestButton
+      </TextButton>,
+    );
+    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(
+      <TextButton variant="secondary" testId="TestButton">
+        TestButton
+      </TextButton>,
+    );
+    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(
+      <TextButton variant="tertiary" testId="TestButton">
+        TestButton
+      </TextButton>,
+    );
+    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);*/
+  });
+});

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

@@ -0,0 +1,119 @@
+import React from 'react';
+import { fireEvent, render } from '../../test-utils';
+import { DualFunctionButton } from '../index';
+import '@testing-library/jest-dom';
+import { Size, SystemIcons } from '../..';
+import 'jest-styled-components';
+
+
+
+
+describe('<DualButton />', () => {
+  it('Renders checkbox button', async () => {
+    const dropdownItems = [
+      { value: 'Item 1', icon: undefined },
+      { value: 'Item 2', icon: undefined, disabled: true },
+    ];
+    const { getByText, container, getByTestId } = render(
+      <DualFunctionButton
+        dropdownCustomizationProps={{
+          items: dropdownItems,
+          itemsType: 'checkbox',
+          multiSelect: true,
+          pinTopItem: true,
+          actionLabel: 'Custom Action',
+          action: () => {},
+          onValueUpdate: (vals) => {},
+          scrollable: true,
+        }}
+        id="test"
+        size={Size.Small}
+        variant="primary">
+        Dual button checkbox test
+      </DualFunctionButton>,
+    );
+    //expect button name defined
+    expect(getByText('Dual button checkbox test')).toBeTruthy();
+    //expect all items displayed
+    expect(getByText('Item 1')).toBeTruthy();
+    expect(getByText('Item 2')).toBeTruthy();
+
+    //check that checkbox controls are displayed
+    expect(getByText('Item 1').closest('label')).toHaveClass('checkbox-label');
+    expect(getByText('Item 2').closest('label')).toHaveClass('checkbox-label');
+
+    //expect item 2 to be disabled
+    expect(getByText('Item 2').closest('div')).toHaveAttribute('disabled');
+
+    //expect the toggle button to be defined
+    expect(getByTestId('options_toggleBtn')).toBeTruthy();
+
+    //expect select all displayed as pin top item is set as "true"
+    expect(document.body.querySelector('[id*="checkbox_selectall"]')).toBeTruthy();
+  });
+
+  it('Renders normal dual button', async () => {
+    const dropdownItems = [
+      { value: 'Item 1', icon: undefined },
+      { value: 'Item 2', icon: undefined },
+    ];
+    const { getByText, container, getByTestId } = render(
+      <DualFunctionButton
+        dropdownCustomizationProps={{
+          items: dropdownItems,
+          itemsType: 'normal',
+          multiSelect: true,
+          action: () => {},
+          onValueUpdate: (vals) => {},
+          scrollable: true,
+        }}
+        id="test"
+        size={Size.Small}
+        variant="primary">
+        Dual button test
+      </DualFunctionButton>,
+    );
+    //check that the dual button text defined
+    expect(getByText('Dual button test')).toBeTruthy();
+    expect(getByText('Item 1')).toBeTruthy();
+    expect(getByText('Item 2')).toBeTruthy();
+    //check that none of the items disabled
+    expect(getByText('Item 1').closest('div')).not.toHaveAttribute('disabled');
+    expect(getByText('Item 2').closest('div')).not.toHaveAttribute('disabled');
+    expect(getByTestId('options_toggleBtn')).toBeTruthy();
+
+    //two options available
+    expect(document.body.querySelectorAll('button[tabindex="-1"]')).toHaveLength(2);
+  });
+
+  it('Renders radio-button type dual button', async () => {
+    const dropdownItems = [
+      { value: 'Item 1', icon: undefined, disabled: true },
+      { value: 'Item 2', icon: undefined, disabled: true },
+    ];
+    const { getByText, container, getByTestId } = render(
+      <DualFunctionButton
+        dropdownCustomizationProps={{
+          items: dropdownItems,
+          itemsType: 'radio',
+          multiSelect: true,
+          action: () => {},
+          onValueUpdate: (vals) => {},
+          scrollable: true,
+        }}
+        id="test"
+        size={Size.Small}
+        variant="primary">
+        Dual button test radio
+      </DualFunctionButton>,
+    );
+    //check that the dual button text defined
+    expect(getByText('Dual button test radio')).toBeTruthy();
+    expect(getByText('Item 1')).toBeTruthy();
+    expect(getByText('Item 2')).toBeTruthy();
+
+    //check that radio buttons displayed
+    expect(getByText('Item 1').closest('div')).toHaveClass('radio-button-label');
+    expect(getByText('Item 2').closest('div')).toHaveClass('radio-button-label');
+  });
+});

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

@@ -0,0 +1,45 @@
+import React from 'react';
+import { render } from '../../test-utils';
+import { TextButton } from '../index';
+import 'jest-styled-components';
+import { COLORS } from '../../styles';
+import { Size } from '../..';
+
+
+
+
+describe('<TextButton />', () => {
+  it('Renders primary button', async () => {
+    const { queryByText, getByTestId } = render(
+      <TextButton variant="primary" testId="TestButton" size={Size.Large}>
+        TestButton
+      </TextButton>,
+    );
+    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(
+      <TextButton variant="secondary" testId="TestButton">
+        TestButton
+      </TextButton>,
+    );
+    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(
+      <TextButton variant="tertiary" testId="TestButton">
+        TestButton
+      </TextButton>,
+    );
+    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);*/
+  });
+});

package/dist/Card/HorizontalCard/__tests__/HorizontalCard.test.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import {act, render} from '../../../test-utils';
+import {
+  HorizontalCard,
+  HorizontalCardDropdownButton,
+  HorizontalCardIconButton, HorizontalCardLinearProgression, HorizontalCardTag,
+  HorizontalCardToggleButton
+} from '../index';
+import {SystemIcons} from '../../../icons';
+
+
+
+describe('HorizontalCard', () => {
+  const action = jest.fn();
+
+  const actions: (HorizontalCardIconButton | HorizontalCardToggleButton | HorizontalCardDropdownButton)[] = [
+    {componentType: 'icon', action: action, icon: <SystemIcons.Share/>},
+    {componentType: 'icon', action: action, icon: <SystemIcons.OpenNewWindow/>}
+  ]
+
+  const tags: HorizontalCardTag[] = [{label: 'label 1'}, {label: 'label 2'}, {label: 'label 3'}];
+
+  const progress: HorizontalCardLinearProgression = {max: 100, value: 30};
+
+  beforeEach(() => {
+    action.mockReset();
+  });
+
+  it('should render title', async () => {
+    const {queryByText} = render(<HorizontalCard title={'title'}/>)
+
+    expect(queryByText('title')).toBeDefined()
+  });
+
+  it('should render tags', async () => {
+
+    const {queryByText} = render(<HorizontalCard title={'title'} tags={tags}/>)
+
+    expect(queryByText('label 1')).toBeDefined()
+    expect(queryByText('label 2')).toBeDefined()
+    expect(queryByText('label 3')).toBeDefined()
+  });
+
+  it('should render actions', async () => {
+    const {container} = render(<HorizontalCard title={'title'} actions={actions}/>)
+
+    expect(container.querySelectorAll('button')).toHaveLength(2)
+  });
+
+  it('should call action on component click', async () => {
+    const {container} = render(<HorizontalCard title={'title'} action={action}/>)
+
+    act(() => {
+      // @ts-ignore
+      container.querySelector('.clickable').click();
+    });
+
+    expect(action).toHaveBeenCalled()
+  });
+
+  it('should call action on button press', async () => {
+    const {container} = render(<HorizontalCard title={'title'} actions={actions}/>)
+
+    act(() => {
+      container.querySelectorAll('button').forEach(a => a.click());
+    });
+
+    expect(action).toHaveBeenCalledTimes(2)
+  });
+
+});

package/dist/Card/HorizontalCard/__tests__/VerticalCard.test.tsx

@@ -0,0 +1,124 @@
+import React from 'react';
+import { fireEvent, render } from '../../../test-utils';
+import 'jest-styled-components';
+import { Card } from '../..';
+import { COLORS } from '../../../styles';
+import { SystemIcons } from '../../../icons';
+
+
+describe('<Card />',()=>{
+    it('renders top section', async () => {
+        const{getByTestId} = render(
+            <Card topSectionProps={{disabled: false}} disabled/>
+        );
+
+        expect(getByTestId('card-topSection')).toBeDefined();
+    });
+
+    it('renders middle section', async () => {
+        const{getByTestId} = render(
+            <Card middleSectionProps={{title:'title',disabled:false}} disabled/>
+        );
+
+        expect(getByTestId('card-middleSection')).toBeDefined();
+    });
+
+    it('renders bottom section', async () => {
+        const{getByTestId} = render(
+            <Card bottomSectionProps={{disabled:false}} disabled/>
+        );
+
+        expect(getByTestId('card-bottomSection')).toBeDefined();
+    });
+
+    it('fires card clicked event on click', async () => {
+        const cardClicked = jest.fn();
+        const{getByTestId} = render(
+            <Card bottomSectionProps={{disabled:false}} disabled={false} onCardClicked={cardClicked}/>
+        );
+
+        fireEvent.click(getByTestId('card-link'));
+        expect(cardClicked).toHaveBeenCalled();
+    });
+
+    it('fires card clicked event on keyDown', async () => {
+        const cardClicked = jest.fn();
+        const{getByTestId} = render(
+            <Card bottomSectionProps={{disabled:false}} disabled={false} onCardClicked={cardClicked}/>
+        );
+
+        fireEvent.keyDown(getByTestId('card-wrapper'), {key: 'Enter', code: 'Enter', charCode: 13});
+        expect(cardClicked).toHaveBeenCalled();
+    });
+
+    it('renders tag in top section', async () => {
+        const{getByText} = render(
+            <Card topSectionProps={{disabled: false, tagLabel:'test_label'}} disabled/>
+        );
+
+        expect(getByText('test_label')).toBeDefined();
+    });
+
+    it('renders checkbox in top section', async () => {
+        const{getByTestId} = render(
+            <Card topSectionProps={{disabled: false, selected: true}} disabled/>
+        );
+
+        expect(getByTestId('card-topSection-checkbox')).toBeDefined();
+    });
+
+    it('renders highlight ribbon in top section', async () => {
+        const{getByTestId, getByText} = render(
+            <Card topSectionProps={{disabled: false, highlightRibbonText:'testRibbon', highlightRibbonBgColor:'red'}} disabled={false}/>
+        );
+
+        expect(getByText('testRibbon')).toBeDefined();
+        expect(getByTestId('card-topSection-ribbon')).toHaveStyleRule('background-color','red');
+    });
+
+    it('renders title ,description and category label in middle section', async () => {
+        const{getByText} = render(
+            <Card middleSectionProps={{title:'testTitle', disabled: false, description:'testDescription', categoryLabel:'testCatLabel'}} disabled={false}/>
+        );
+
+        expect(getByText('testTitle')).toBeDefined();
+        expect(getByText('testDescription')).toBeDefined();
+        expect(getByText('testCatLabel')).toBeDefined();
+    });
+
+    it('renders tags in middle section', async () => {
+        const{getByText} = render(
+            <Card middleSectionProps={{title:'testTitle', disabled: false, tags:[{label:'testTag'}], row2Tags:[{label:'testTag2'}]}} disabled={false}/>
+        );
+
+        expect(getByText('testTitle')).toBeDefined();
+        expect(getByText('testTag2')).toBeDefined();
+    });
+
+    it('renders note text in bottom section', async () => {
+        const{getByText} = render(
+            <Card bottomSectionProps={{disabled: false, noteLeft:'leftNote', noteRight:'rightNote'}} disabled={false}/>
+        );
+
+        expect(getByText('leftNote')).toBeDefined();
+        expect(getByText('rightNote')).toBeDefined();
+    });
+
+    it('renders author in bottom section', async () => {
+        const{getByText,getByTestId} = render(
+            <Card bottomSectionProps={{disabled: true, authorName:'testAuthor'}} disabled={true}/>
+        );
+
+        expect(getByText('testAuthor')).toBeDefined();
+        expect(getByTestId('card-bottomSection-author')).toBeDefined();
+    });
+
+    it('renders actions in bottom section', async () => {
+        const{getByText,getByTestId} = render(
+            <Card bottomSectionProps={{disabled: true, authorName:'testAuthor', actions:[{icon:<SystemIcons.Add/>,onClick:()=>{}}]}} disabled={true}/>
+        );
+
+        expect(getByText('testAuthor')).toBeDefined();
+        expect(getByTestId('card-bottomSection-author')).toBeDefined();
+    });
+})