@laerdal/life-react-components 6.0.0-dev.26.full → 6.0.0-dev.27.full
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -1
- package/dist/Button/DualFunctionButton.cjs +4 -4
- package/dist/Button/DualFunctionButton.cjs.map +1 -1
- package/dist/Button/DualFunctionButton.d.ts +2 -2
- package/dist/Button/DualFunctionButton.js +4 -4
- package/dist/Button/DualFunctionButton.js.map +1 -1
- package/dist/Button/{Button.cjs → TextButton.cjs} +179 -92
- package/dist/Button/TextButton.cjs.map +1 -0
- package/dist/Button/TextButton.d.ts +70 -0
- package/dist/Button/{Button.js → TextButton.js} +178 -91
- package/dist/Button/TextButton.js.map +1 -0
- package/dist/Button/__tests__/Button.test.tsx +8 -8
- package/dist/Button/__tests__/TextButton.test.tsx +45 -0
- package/dist/Button/index.cjs +11 -11
- package/dist/Button/index.cjs.map +1 -1
- package/dist/Button/index.d.ts +2 -2
- package/dist/Button/index.js +2 -2
- package/dist/Button/index.js.map +1 -1
- package/dist/Card/VerticalCard/{Card.cjs → VerticalCard.cjs} +20 -20
- package/dist/Card/VerticalCard/VerticalCard.cjs.map +1 -0
- package/dist/Card/VerticalCard/VerticalCard.d.ts +25 -0
- package/dist/Card/VerticalCard/{Card.js → VerticalCard.js} +19 -19
- package/dist/Card/VerticalCard/VerticalCard.js.map +1 -0
- package/dist/Card/VerticalCard/{CardBottomSection.cjs → VerticalCardBottomSection.cjs} +21 -21
- package/dist/Card/VerticalCard/VerticalCardBottomSection.cjs.map +1 -0
- package/dist/Card/VerticalCard/VerticalCardBottomSection.d.ts +53 -0
- package/dist/Card/VerticalCard/{CardBottomSection.js → VerticalCardBottomSection.js} +21 -21
- package/dist/Card/VerticalCard/VerticalCardBottomSection.js.map +1 -0
- package/dist/Card/VerticalCard/{CardMiddleSection.cjs → VerticalCardMiddleSection.cjs} +16 -16
- package/dist/Card/VerticalCard/VerticalCardMiddleSection.cjs.map +1 -0
- package/dist/Card/VerticalCard/VerticalCardMiddleSection.d.ts +42 -0
- package/dist/Card/VerticalCard/{CardMiddleSection.js → VerticalCardMiddleSection.js} +15 -15
- package/dist/Card/VerticalCard/VerticalCardMiddleSection.js.map +1 -0
- package/dist/Card/VerticalCard/{CardTopSection.cjs → VerticalCardTopSection.cjs} +15 -15
- package/dist/Card/VerticalCard/VerticalCardTopSection.cjs.map +1 -0
- package/dist/Card/VerticalCard/{CardTopSection.d.ts → VerticalCardTopSection.d.ts} +8 -8
- package/dist/Card/VerticalCard/{CardTopSection.js → VerticalCardTopSection.js} +14 -14
- package/dist/Card/VerticalCard/VerticalCardTopSection.js.map +1 -0
- package/dist/Card/{HorizontalCard → VerticalCard}/__tests__/VerticalCard.test.tsx +15 -15
- package/dist/Card/VerticalCard/index.cjs +25 -25
- package/dist/Card/VerticalCard/index.cjs.map +1 -1
- package/dist/Card/VerticalCard/index.d.ts +7 -7
- package/dist/Card/VerticalCard/index.js +7 -7
- package/dist/Card/VerticalCard/index.js.map +1 -1
- package/dist/Dropdown/DropdownContent.cjs +2 -2
- package/dist/Dropdown/DropdownContent.cjs.map +1 -1
- package/dist/Dropdown/DropdownContent.js +2 -2
- package/dist/Dropdown/DropdownContent.js.map +1 -1
- package/dist/GlobalNavigationBar/desktop/RightSideNav.cjs +2 -2
- package/dist/GlobalNavigationBar/desktop/RightSideNav.cjs.map +1 -1
- package/dist/GlobalNavigationBar/desktop/RightSideNav.js +3 -3
- package/dist/GlobalNavigationBar/desktop/RightSideNav.js.map +1 -1
- package/dist/GlobalNavigationBar/desktop/UserMenu.cjs +1 -1
- package/dist/GlobalNavigationBar/desktop/UserMenu.cjs.map +1 -1
- package/dist/GlobalNavigationBar/desktop/UserMenu.js +2 -2
- package/dist/GlobalNavigationBar/desktop/UserMenu.js.map +1 -1
- package/dist/GlobalNavigationBar/mobile/MobileActionContainer.cjs +1 -1
- package/dist/GlobalNavigationBar/mobile/MobileActionContainer.cjs.map +1 -1
- package/dist/GlobalNavigationBar/mobile/MobileActionContainer.js +2 -2
- package/dist/GlobalNavigationBar/mobile/MobileActionContainer.js.map +1 -1
- package/dist/GlobalNavigationBar/types.cjs.map +1 -1
- package/dist/GlobalNavigationBar/types.d.ts +2 -2
- package/dist/GlobalNavigationBar/types.js.map +1 -1
- package/dist/Modals/ModalContent.cjs +2 -2
- package/dist/Modals/ModalContent.cjs.map +1 -1
- package/dist/Modals/ModalContent.js +3 -3
- package/dist/Modals/ModalContent.js.map +1 -1
- package/dist/Modals/ModalDialog.cjs +2 -2
- package/dist/Modals/ModalDialog.cjs.map +1 -1
- package/dist/Modals/ModalDialog.js +3 -3
- package/dist/Modals/ModalDialog.js.map +1 -1
- package/dist/Modals/ModalTypes.cjs.map +1 -1
- package/dist/Modals/ModalTypes.d.ts +3 -3
- package/dist/Modals/ModalTypes.js.map +1 -1
- package/dist/Popover/Popover.cjs +1 -1
- package/dist/Popover/Popover.cjs.map +1 -1
- package/dist/Popover/Popover.js +2 -2
- package/dist/Popover/Popover.js.map +1 -1
- package/dist/SideMenu/SideMenuFooter.cjs +1 -1
- package/dist/SideMenu/SideMenuFooter.cjs.map +1 -1
- package/dist/SideMenu/SideMenuFooter.js +2 -2
- package/dist/SideMenu/SideMenuFooter.js.map +1 -1
- package/dist/SideMenu/types.cjs.map +1 -1
- package/dist/SideMenu/types.d.ts +2 -2
- package/dist/SideMenu/types.js.map +1 -1
- package/dist/Table/TableBody.cjs +1 -1
- package/dist/Table/TableBody.cjs.map +1 -1
- package/dist/Table/TableBody.js +2 -2
- package/dist/Table/TableBody.js.map +1 -1
- package/dist/Table/TableTypes.cjs.map +1 -1
- package/dist/Table/TableTypes.d.ts +2 -2
- package/dist/Table/TableTypes.js.map +1 -1
- package/dist/Tile/TileCommonItems.cjs +1 -1
- package/dist/Tile/TileCommonItems.cjs.map +1 -1
- package/dist/Tile/TileCommonItems.js +2 -2
- package/dist/Tile/TileCommonItems.js.map +1 -1
- package/dist/Tile/TileTypes.cjs.map +1 -1
- package/dist/Tile/TileTypes.d.ts +2 -2
- package/dist/Tile/TileTypes.js.map +1 -1
- package/dist/Toasters/Toast.cjs +1 -2
- package/dist/Toasters/Toast.cjs.map +1 -1
- package/dist/Toasters/Toast.js +2 -3
- package/dist/Toasters/Toast.js.map +1 -1
- package/package.json +1 -1
- package/dist/Button/Button.cjs.map +0 -1
- package/dist/Button/Button.d.ts +0 -70
- package/dist/Button/Button.js.map +0 -1
- package/dist/Card/VerticalCard/Card.cjs.map +0 -1
- package/dist/Card/VerticalCard/Card.d.ts +0 -25
- package/dist/Card/VerticalCard/Card.js.map +0 -1
- package/dist/Card/VerticalCard/CardBottomSection.cjs.map +0 -1
- package/dist/Card/VerticalCard/CardBottomSection.d.ts +0 -53
- package/dist/Card/VerticalCard/CardBottomSection.js.map +0 -1
- package/dist/Card/VerticalCard/CardMiddleSection.cjs.map +0 -1
- package/dist/Card/VerticalCard/CardMiddleSection.d.ts +0 -42
- package/dist/Card/VerticalCard/CardMiddleSection.js.map +0 -1
- package/dist/Card/VerticalCard/CardTopSection.cjs.map +0 -1
- package/dist/Card/VerticalCard/CardTopSection.js.map +0 -1
- package/dist/Card/__tests__/Card.test.tsx +0 -146
|
@@ -0,0 +1 @@
|
|
|
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","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\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';\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 }\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":[]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { render } from '../../test-utils';
|
|
3
|
-
import {
|
|
3
|
+
import { TextButton } from '../index';
|
|
4
4
|
import 'jest-styled-components';
|
|
5
5
|
import { COLORS } from '../../styles';
|
|
6
6
|
import { Size } from '../..';
|
|
@@ -8,12 +8,12 @@ import { Size } from '../..';
|
|
|
8
8
|
|
|
9
9
|
|
|
10
10
|
|
|
11
|
-
describe('<
|
|
11
|
+
describe('<TextButton />', () => {
|
|
12
12
|
it('Renders primary button', async () => {
|
|
13
13
|
const { queryByText, getByTestId } = render(
|
|
14
|
-
<
|
|
14
|
+
<TextButton variant="primary" testId="TestButton" size={Size.Large}>
|
|
15
15
|
TestButton
|
|
16
|
-
</
|
|
16
|
+
</TextButton>,
|
|
17
17
|
);
|
|
18
18
|
expect(queryByText('TestButton')).toBeDefined();
|
|
19
19
|
/*expect(getByTestId('TestButton')).toHaveStyleRule('background-color', COLORS.primary);
|
|
@@ -22,9 +22,9 @@ describe('<Button />', () => {
|
|
|
22
22
|
});
|
|
23
23
|
it('Renders secondary button', async () => {
|
|
24
24
|
const { queryByText, getByTestId } = render(
|
|
25
|
-
<
|
|
25
|
+
<TextButton variant="secondary" testId="TestButton">
|
|
26
26
|
TestButton
|
|
27
|
-
</
|
|
27
|
+
</TextButton>,
|
|
28
28
|
);
|
|
29
29
|
expect(queryByText('TestButton')).toBeDefined();
|
|
30
30
|
/*expect(getByTestId('TestButton')).toHaveStyleRule('color', COLORS.primary);
|
|
@@ -33,9 +33,9 @@ describe('<Button />', () => {
|
|
|
33
33
|
});
|
|
34
34
|
it('Renders tertiary button', async () => {
|
|
35
35
|
const { queryByText, getByTestId } = render(
|
|
36
|
-
<
|
|
36
|
+
<TextButton variant="tertiary" testId="TestButton">
|
|
37
37
|
TestButton
|
|
38
|
-
</
|
|
38
|
+
</TextButton>,
|
|
39
39
|
);
|
|
40
40
|
expect(queryByText('TestButton')).toBeDefined();
|
|
41
41
|
/*expect(getByTestId('TestButton')).toHaveStyleRule('background-color', 'white');
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { render } from '../../test-utils';
|
|
3
|
+
import { TextButton } from '../index';
|
|
4
|
+
import 'jest-styled-components';
|
|
5
|
+
import { COLORS } from '../../styles';
|
|
6
|
+
import { Size } from '../..';
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
describe('<TextButton />', () => {
|
|
12
|
+
it('Renders primary button', async () => {
|
|
13
|
+
const { queryByText, getByTestId } = render(
|
|
14
|
+
<TextButton variant="primary" testId="TestButton" size={Size.Large}>
|
|
15
|
+
TestButton
|
|
16
|
+
</TextButton>,
|
|
17
|
+
);
|
|
18
|
+
expect(queryByText('TestButton')).toBeDefined();
|
|
19
|
+
/*expect(getByTestId('TestButton')).toHaveStyleRule('background-color', COLORS.primary);
|
|
20
|
+
expect(getByTestId('TestButton')).toHaveStyleRule('cursor', 'pointer');
|
|
21
|
+
expect(getByTestId('TestButton')).toHaveStyleRule('color', 'white');*/
|
|
22
|
+
});
|
|
23
|
+
it('Renders secondary button', async () => {
|
|
24
|
+
const { queryByText, getByTestId } = render(
|
|
25
|
+
<TextButton variant="secondary" testId="TestButton">
|
|
26
|
+
TestButton
|
|
27
|
+
</TextButton>,
|
|
28
|
+
);
|
|
29
|
+
expect(queryByText('TestButton')).toBeDefined();
|
|
30
|
+
/*expect(getByTestId('TestButton')).toHaveStyleRule('color', COLORS.primary);
|
|
31
|
+
expect(getByTestId('TestButton')).toHaveStyleRule('border-color', COLORS.primary);
|
|
32
|
+
expect(getByTestId('TestButton')).toHaveStyleRule('background-color', 'white');*/
|
|
33
|
+
});
|
|
34
|
+
it('Renders tertiary button', async () => {
|
|
35
|
+
const { queryByText, getByTestId } = render(
|
|
36
|
+
<TextButton variant="tertiary" testId="TestButton">
|
|
37
|
+
TestButton
|
|
38
|
+
</TextButton>,
|
|
39
|
+
);
|
|
40
|
+
expect(queryByText('TestButton')).toBeDefined();
|
|
41
|
+
/*expect(getByTestId('TestButton')).toHaveStyleRule('background-color', 'white');
|
|
42
|
+
expect(getByTestId('TestButton')).toHaveStyleRule('border-color', COLORS.neutral_100);
|
|
43
|
+
expect(getByTestId('TestButton')).toHaveStyleRule('color', COLORS.primary);*/
|
|
44
|
+
});
|
|
45
|
+
});
|
package/dist/Button/index.cjs
CHANGED
|
@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
var _exportNames = {
|
|
7
7
|
IconButton: true,
|
|
8
|
-
|
|
8
|
+
TextButton: true,
|
|
9
9
|
BackButton: true,
|
|
10
10
|
DualFunctionButton: true
|
|
11
11
|
};
|
|
@@ -15,12 +15,6 @@ Object.defineProperty(exports, "BackButton", {
|
|
|
15
15
|
return _BackButton.default;
|
|
16
16
|
}
|
|
17
17
|
});
|
|
18
|
-
Object.defineProperty(exports, "Button", {
|
|
19
|
-
enumerable: true,
|
|
20
|
-
get: function () {
|
|
21
|
-
return _Button.default;
|
|
22
|
-
}
|
|
23
|
-
});
|
|
24
18
|
Object.defineProperty(exports, "DualFunctionButton", {
|
|
25
19
|
enumerable: true,
|
|
26
20
|
get: function () {
|
|
@@ -33,6 +27,12 @@ Object.defineProperty(exports, "IconButton", {
|
|
|
33
27
|
return _Iconbutton.default;
|
|
34
28
|
}
|
|
35
29
|
});
|
|
30
|
+
Object.defineProperty(exports, "TextButton", {
|
|
31
|
+
enumerable: true,
|
|
32
|
+
get: function () {
|
|
33
|
+
return _TextButton.default;
|
|
34
|
+
}
|
|
35
|
+
});
|
|
36
36
|
var _Iconbutton = _interopRequireWildcard(require("./Iconbutton"));
|
|
37
37
|
Object.keys(_Iconbutton).forEach(function (key) {
|
|
38
38
|
if (key === "default" || key === "__esModule") return;
|
|
@@ -45,15 +45,15 @@ Object.keys(_Iconbutton).forEach(function (key) {
|
|
|
45
45
|
}
|
|
46
46
|
});
|
|
47
47
|
});
|
|
48
|
-
var
|
|
49
|
-
Object.keys(
|
|
48
|
+
var _TextButton = _interopRequireWildcard(require("./TextButton"));
|
|
49
|
+
Object.keys(_TextButton).forEach(function (key) {
|
|
50
50
|
if (key === "default" || key === "__esModule") return;
|
|
51
51
|
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
|
|
52
|
-
if (key in exports && exports[key] ===
|
|
52
|
+
if (key in exports && exports[key] === _TextButton[key]) return;
|
|
53
53
|
Object.defineProperty(exports, key, {
|
|
54
54
|
enumerable: true,
|
|
55
55
|
get: function () {
|
|
56
|
-
return
|
|
56
|
+
return _TextButton[key];
|
|
57
57
|
}
|
|
58
58
|
});
|
|
59
59
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","names":["_Iconbutton","_interopRequireWildcard","require","Object","keys","forEach","key","prototype","hasOwnProperty","call","_exportNames","exports","defineProperty","enumerable","get","
|
|
1
|
+
{"version":3,"file":"index.cjs","names":["_Iconbutton","_interopRequireWildcard","require","Object","keys","forEach","key","prototype","hasOwnProperty","call","_exportNames","exports","defineProperty","enumerable","get","_TextButton","_BackButton","_DualFunctionButton","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","n","__proto__","a","getOwnPropertyDescriptor","u","i","set"],"sources":["../../src/Button/index.ts"],"sourcesContent":["export { default as IconButton } from './Iconbutton';\r\nexport * from './Iconbutton';\r\nexport { default as TextButton } from './TextButton';\r\nexport * from './TextButton';\r\nexport { default as BackButton } from './BackButton';\r\nexport * from './BackButton';\r\nexport { default as DualFunctionButton } from './DualFunctionButton';\r\nexport * from './DualFunctionButton';\r\n"],"mappings":"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","ignoreList":[]}
|
package/dist/Button/index.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
export { default as IconButton } from './Iconbutton';
|
|
2
2
|
export * from './Iconbutton';
|
|
3
|
-
export { default as
|
|
4
|
-
export * from './
|
|
3
|
+
export { default as TextButton } from './TextButton';
|
|
4
|
+
export * from './TextButton';
|
|
5
5
|
export { default as BackButton } from './BackButton';
|
|
6
6
|
export * from './BackButton';
|
|
7
7
|
export { default as DualFunctionButton } from './DualFunctionButton';
|
package/dist/Button/index.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
export { default as IconButton } from './Iconbutton';
|
|
2
2
|
export * from './Iconbutton';
|
|
3
|
-
export { default as
|
|
4
|
-
export * from './
|
|
3
|
+
export { default as TextButton } from './TextButton';
|
|
4
|
+
export * from './TextButton';
|
|
5
5
|
export { default as BackButton } from './BackButton';
|
|
6
6
|
export * from './BackButton';
|
|
7
7
|
export { default as DualFunctionButton } from './DualFunctionButton';
|
package/dist/Button/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["default","IconButton","
|
|
1
|
+
{"version":3,"file":"index.js","names":["default","IconButton","TextButton","BackButton","DualFunctionButton"],"sources":["../../src/Button/index.ts"],"sourcesContent":["export { default as IconButton } from './Iconbutton';\r\nexport * from './Iconbutton';\r\nexport { default as TextButton } from './TextButton';\r\nexport * from './TextButton';\r\nexport { default as BackButton } from './BackButton';\r\nexport * from './BackButton';\r\nexport { default as DualFunctionButton } from './DualFunctionButton';\r\nexport * from './DualFunctionButton';\r\n"],"mappings":"AAAA,SAASA,OAAO,IAAIC,UAAU,QAAQ,cAAc;AACpD,cAAc,cAAc;AAC5B,SAASD,OAAO,IAAIE,UAAU,QAAQ,cAAc;AACpD,cAAc,cAAc;AAC5B,SAASF,OAAO,IAAIG,UAAU,QAAQ,cAAc;AACpD,cAAc,cAAc;AAC5B,SAASH,OAAO,IAAII,kBAAkB,QAAQ,sBAAsB;AACpE,cAAc,sBAAsB","ignoreList":[]}
|
|
@@ -4,15 +4,15 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
|
|
|
4
4
|
Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
|
-
exports.default = exports.
|
|
7
|
+
exports.default = exports.VerticalCardTopLevelContainerStyles = exports.VerticalCardLink = exports.VerticalCardContainerStyles = void 0;
|
|
8
8
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
9
9
|
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
10
10
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
11
11
|
var React = _interopRequireWildcard(require("react"));
|
|
12
12
|
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
13
|
-
var
|
|
14
|
-
var
|
|
15
|
-
var
|
|
13
|
+
var _VerticalCardTopSection = _interopRequireDefault(require("./VerticalCardTopSection"));
|
|
14
|
+
var _VerticalCardMiddleSection = _interopRequireDefault(require("./VerticalCardMiddleSection"));
|
|
15
|
+
var _VerticalCardBottomSection = _interopRequireDefault(require("./VerticalCardBottomSection"));
|
|
16
16
|
var _index = require("../../index");
|
|
17
17
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
18
18
|
const _excluded = ["onCardClicked", "topSectionProps", "middleSectionProps", "bottomSectionProps", "disabled", "variant", "className", "id", "maxWidth"];
|
|
@@ -20,7 +20,7 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
|
|
|
20
20
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
21
21
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
22
22
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
23
|
-
const
|
|
23
|
+
const VerticalCardTopLevelContainerStyles = exports.VerticalCardTopLevelContainerStyles = _styledComponents.default.div`
|
|
24
24
|
background-color: ${props => _index.COLORS.generateToken({
|
|
25
25
|
componentType: 'bg-surface',
|
|
26
26
|
defaultVariant: 'default'
|
|
@@ -49,7 +49,7 @@ const CardTopLevelContainerStyles = exports.CardTopLevelContainerStyles = _style
|
|
|
49
49
|
`;
|
|
50
50
|
|
|
51
51
|
// Full-card link that covers the entire card area
|
|
52
|
-
const
|
|
52
|
+
const VerticalCardLink = exports.VerticalCardLink = _styledComponents.default.a`
|
|
53
53
|
position: absolute;
|
|
54
54
|
top: 0;
|
|
55
55
|
left: 0;
|
|
@@ -69,14 +69,14 @@ const CardLink = exports.CardLink = _styledComponents.default.a`
|
|
|
69
69
|
${_index.focusStyles}
|
|
70
70
|
}
|
|
71
71
|
`;
|
|
72
|
-
const
|
|
72
|
+
const VerticalCardContainerStyles = exports.VerticalCardContainerStyles = _styledComponents.default.div`
|
|
73
73
|
&.interactive:not(.disabled) {
|
|
74
74
|
&:focus {
|
|
75
75
|
${_index.focusStyles}
|
|
76
76
|
}
|
|
77
77
|
|
|
78
78
|
&:not(.action-within) {
|
|
79
|
-
${
|
|
79
|
+
${VerticalCardTopLevelContainerStyles} {
|
|
80
80
|
&:hover {
|
|
81
81
|
background-color: ${props => _index.COLORS.generateToken({
|
|
82
82
|
componentType: 'bg-surface',
|
|
@@ -94,7 +94,7 @@ const CardContainerStyles = exports.CardContainerStyles = _styledComponents.defa
|
|
|
94
94
|
}
|
|
95
95
|
|
|
96
96
|
&.elevated:not(.action-within) {
|
|
97
|
-
${
|
|
97
|
+
${VerticalCardTopLevelContainerStyles} {
|
|
98
98
|
&:hover {
|
|
99
99
|
box-shadow: ${_index.BOXSHADOWS.BOXSHADOW_L3};
|
|
100
100
|
}
|
|
@@ -108,7 +108,7 @@ const CardContainerStyles = exports.CardContainerStyles = _styledComponents.defa
|
|
|
108
108
|
|
|
109
109
|
&.disabled {
|
|
110
110
|
cursor: not-allowed;
|
|
111
|
-
${
|
|
111
|
+
${VerticalCardTopLevelContainerStyles}{
|
|
112
112
|
border: 1px solid ${props => _index.COLORS.generateToken({
|
|
113
113
|
componentType: 'border',
|
|
114
114
|
state: 'disabled'
|
|
@@ -116,7 +116,7 @@ const CardContainerStyles = exports.CardContainerStyles = _styledComponents.defa
|
|
|
116
116
|
}
|
|
117
117
|
}
|
|
118
118
|
`;
|
|
119
|
-
const
|
|
119
|
+
const VerticalCard = _ref => {
|
|
120
120
|
let {
|
|
121
121
|
onCardClicked,
|
|
122
122
|
topSectionProps,
|
|
@@ -141,7 +141,7 @@ const Card = _ref => {
|
|
|
141
141
|
onCardClicked();
|
|
142
142
|
}
|
|
143
143
|
};
|
|
144
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsx)(
|
|
144
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(VerticalCardContainerStyles, _objectSpread(_objectSpread({
|
|
145
145
|
ref: containerRef,
|
|
146
146
|
role: "group",
|
|
147
147
|
className: cls,
|
|
@@ -150,24 +150,24 @@ const Card = _ref => {
|
|
|
150
150
|
onKeyDown: e => e.key === 'Enter' && !disabled && onCardClicked && onCardClicked(),
|
|
151
151
|
"data-testid": 'card-wrapper'
|
|
152
152
|
}, rest), {}, {
|
|
153
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(
|
|
153
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(VerticalCardTopLevelContainerStyles, {
|
|
154
154
|
style: {
|
|
155
155
|
maxWidth: maxWidth
|
|
156
156
|
},
|
|
157
|
-
children: [onCardClicked && !disabled && /*#__PURE__*/(0, _jsxRuntime.jsx)(
|
|
157
|
+
children: [onCardClicked && !disabled && /*#__PURE__*/(0, _jsxRuntime.jsx)(VerticalCardLink, {
|
|
158
158
|
href: '#',
|
|
159
159
|
"data-testid": 'card-link',
|
|
160
160
|
onClick: handleCardClick,
|
|
161
161
|
"aria-labelledby": `${autoId}-title`,
|
|
162
162
|
tabIndex: -1
|
|
163
|
-
}), topSectionProps && /*#__PURE__*/(0, _jsxRuntime.jsx)(
|
|
163
|
+
}), topSectionProps && /*#__PURE__*/(0, _jsxRuntime.jsx)(_VerticalCardTopSection.default, _objectSpread(_objectSpread({
|
|
164
164
|
ref: checkBoxRef
|
|
165
165
|
}, topSectionProps), {}, {
|
|
166
166
|
disabled: disabled
|
|
167
|
-
})), middleSectionProps && /*#__PURE__*/(0, _jsxRuntime.jsx)(
|
|
167
|
+
})), middleSectionProps && /*#__PURE__*/(0, _jsxRuntime.jsx)(_VerticalCardMiddleSection.default, _objectSpread(_objectSpread({}, middleSectionProps), {}, {
|
|
168
168
|
componentId: autoId,
|
|
169
169
|
disabled: disabled
|
|
170
|
-
})), bottomSectionProps && /*#__PURE__*/(0, _jsxRuntime.jsx)(
|
|
170
|
+
})), bottomSectionProps && /*#__PURE__*/(0, _jsxRuntime.jsx)(_VerticalCardBottomSection.default, _objectSpread(_objectSpread({
|
|
171
171
|
ref: instance => {
|
|
172
172
|
setActionsRefs(instance ?? []);
|
|
173
173
|
}
|
|
@@ -177,11 +177,11 @@ const Card = _ref => {
|
|
|
177
177
|
})
|
|
178
178
|
}));
|
|
179
179
|
};
|
|
180
|
-
|
|
180
|
+
VerticalCard.propTypes = {
|
|
181
181
|
onCardClicked: _propTypes.default.func,
|
|
182
182
|
disabled: _propTypes.default.bool,
|
|
183
183
|
maxWidth: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
|
|
184
184
|
variant: _propTypes.default.oneOf(['outline', 'elevated'])
|
|
185
185
|
};
|
|
186
|
-
var _default = exports.default =
|
|
187
|
-
//# sourceMappingURL=
|
|
186
|
+
var _default = exports.default = VerticalCard;
|
|
187
|
+
//# sourceMappingURL=VerticalCard.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"VerticalCard.cjs","names":["React","_interopRequireWildcard","require","_styledComponents","_interopRequireDefault","_VerticalCardTopSection","_VerticalCardMiddleSection","_VerticalCardBottomSection","_index","_jsxRuntime","_excluded","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ownKeys","keys","getOwnPropertySymbols","o","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","VerticalCardTopLevelContainerStyles","exports","styled","div","props","COLORS","generateToken","componentType","defaultVariant","theme","BOXSHADOWS","BOXSHADOW_L1","VerticalCardLink","focusStyles","VerticalCardContainerStyles","state","BOXSHADOW_L3","BOXSHADOW_L2","VerticalCard","_ref","onCardClicked","topSectionProps","middleSectionProps","bottomSectionProps","disabled","variant","className","id","maxWidth","rest","_objectWithoutProperties2","actionsRefs","setActionsRefs","useState","checkBoxRef","useRef","containerRef","autoId","useId","useActionWithin","cls","handleCardClick","preventDefault","jsx","ref","role","tabIndex","onKeyDown","key","children","jsxs","style","href","onClick","componentId","instance","propTypes","_propTypes","func","bool","oneOfType","number","string","oneOf","_default"],"sources":["../../../src/Card/VerticalCard/VerticalCard.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport VerticalCardTopSection, {VerticalCardTopSectionProps} from './VerticalCardTopSection';\r\nimport VerticalCardMiddleSection, {VerticalCardMiddleSectionProps} from './VerticalCardMiddleSection';\r\nimport VerticalCardBottomSection, {VerticalCardBottomSectionProps} from './VerticalCardBottomSection';\r\nimport {BOXSHADOWS, COLORS, defaultOnMouseDownHandler, focusStyles, useActionWithin} from '../../index';\r\n\r\nexport const VerticalCardTopLevelContainerStyles = styled.div`\r\n background-color: ${props => COLORS.generateToken({componentType:'bg-surface', defaultVariant:'default'}, props.theme)};\r\n min-width: 240px;\r\n overflow: hidden;\r\n\r\n border-radius: 8px;\r\n\r\n background-clip: padding-box;\r\n box-sizing: border-box;\r\n display: flex;\r\n flex-direction: column;\r\n position: relative;\r\n\r\n .elevated & {\r\n box-shadow: ${BOXSHADOWS.BOXSHADOW_L1};\r\n }\r\n\r\n .outline & {\r\n border: 1px solid ${props => COLORS.generateToken({componentType:'border', defaultVariant: 'subtle'}, props.theme)};\r\n }\r\n`;\r\n\r\n// Full-card link that covers the entire card area\r\nexport const VerticalCardLink = styled.a`\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n z-index: 100;\r\n text-decoration: none;\r\n color: inherit;\r\n pointer-events: auto;\r\n cursor: pointer;\r\n \r\n &:focus {\r\n outline: none;\r\n }\r\n \r\n &:focus-visible {\r\n ${focusStyles}\r\n }\r\n`;\r\n\r\nexport const VerticalCardContainerStyles = styled.div`\r\n &.interactive:not(.disabled) {\r\n &:focus {\r\n ${focusStyles}\r\n }\r\n\r\n &:not(.action-within) {\r\n ${VerticalCardTopLevelContainerStyles} {\r\n &:hover {\r\n background-color: ${props => COLORS.generateToken({componentType:'bg-surface', state:'hover'}, props.theme)};\r\n }\r\n\r\n &:active, &.active-state {\r\n background-color: ${props => COLORS.generateToken({componentType:'bg-surface', state:'active'}, props.theme)};\r\n }\r\n }\r\n }\r\n\r\n &.elevated:not(.action-within) {\r\n ${VerticalCardTopLevelContainerStyles} {\r\n &:hover {\r\n box-shadow: ${BOXSHADOWS.BOXSHADOW_L3};\r\n }\r\n\r\n &:active, &.active-state {\r\n box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};\r\n }\r\n }\r\n }\r\n }\r\n\r\n &.disabled {\r\n cursor: not-allowed;\r\n ${VerticalCardTopLevelContainerStyles}{\r\n border: 1px solid ${props => COLORS.generateToken({componentType:'border', state:'disabled'}, props.theme)};\r\n }\r\n }\r\n`;\r\n\r\n\r\nexport interface VerticalCardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'onMouseDown' | 'onKeyDown' | 'onClick'> {\r\n /** Action to be executed when Card is clicked. */\r\n onCardClicked?: () => void;\r\n /** If disabled then users can not click on the card, also styles are greyed out.*/\r\n disabled?: boolean;\r\n /** Maximum width of the card. */\r\n maxWidth?: number | string;\r\n /** Properties of Card top section. */\r\n topSectionProps?: VerticalCardTopSectionProps;\r\n /** Properties of Card middle section. */\r\n middleSectionProps?: VerticalCardMiddleSectionProps;\r\n /** Properties of Card bottom section. */\r\n bottomSectionProps?: VerticalCardBottomSectionProps;\r\n /** Card container style variant. */\r\n variant?: 'outline' | 'elevated';\r\n}\r\n\r\nconst VerticalCard: React.FunctionComponent<VerticalCardProps> = ({\r\n onCardClicked,\r\n topSectionProps,\r\n middleSectionProps,\r\n bottomSectionProps,\r\n disabled,\r\n variant = 'elevated',\r\n className,\r\n id,\r\n maxWidth = 560,\r\n ...rest\r\n }: VerticalCardProps) => {\r\n\r\n\r\n const [actionsRefs, setActionsRefs] = React.useState<React.RefObject<HTMLElement | null>[]>([]);\r\n const checkBoxRef = React.useRef<HTMLDivElement>(null);\r\n const containerRef = React.useRef<HTMLDivElement>(null);\r\n const autoId = React.useId();\r\n\r\n useActionWithin(containerRef, [...actionsRefs, checkBoxRef]);\r\n\r\n const cls = `${!!onCardClicked ? 'interactive' : ''} ${disabled ? 'disabled' : ''} ${variant} ${className || ''}`;\r\n\r\n const handleCardClick = (e: React.MouseEvent) => {\r\n e.preventDefault();\r\n if (!disabled && onCardClicked) {\r\n onCardClicked();\r\n }\r\n };\r\n\r\n return (\r\n <VerticalCardContainerStyles ref={containerRef}\r\n role=\"group\"\r\n className={cls}\r\n aria-labelledby={`${autoId}-title`}\r\n tabIndex={!!onCardClicked && !disabled ? 0 : -1}\r\n onKeyDown={e => e.key === 'Enter' && !disabled && onCardClicked && onCardClicked()}\r\n data-testid={'card-wrapper'}\r\n {...rest}>\r\n <VerticalCardTopLevelContainerStyles style={{maxWidth: maxWidth}}>\r\n {/* Full-card link for accessibility */}\r\n {onCardClicked && !disabled && (\r\n <VerticalCardLink\r\n href={'#'}\r\n data-testid={'card-link'}\r\n onClick={handleCardClick}\r\n aria-labelledby={`${autoId}-title`}\r\n tabIndex={-1}\r\n />\r\n )}\r\n \r\n {\r\n topSectionProps &&\r\n <VerticalCardTopSection ref={checkBoxRef}\r\n {...topSectionProps} disabled={disabled}/>\r\n }\r\n {\r\n middleSectionProps &&\r\n <VerticalCardMiddleSection {...middleSectionProps} componentId={autoId} disabled={disabled}/>\r\n }\r\n {\r\n bottomSectionProps &&\r\n <VerticalCardBottomSection ref={instance => {\r\n setActionsRefs(instance ?? []);\r\n }}\r\n {...bottomSectionProps} disabled={disabled}/>\r\n }\r\n </VerticalCardTopLevelContainerStyles>\r\n </VerticalCardContainerStyles>\r\n );\r\n};\r\n\r\nexport default VerticalCard;\r\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { VerticalCardTopSectionProps } from './VerticalCardTopSection';
|
|
3
|
+
import { VerticalCardMiddleSectionProps } from './VerticalCardMiddleSection';
|
|
4
|
+
import { VerticalCardBottomSectionProps } from './VerticalCardBottomSection';
|
|
5
|
+
export declare const VerticalCardTopLevelContainerStyles: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
|
6
|
+
export declare const VerticalCardLink: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, never>> & string;
|
|
7
|
+
export declare const VerticalCardContainerStyles: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
|
8
|
+
export interface VerticalCardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'onMouseDown' | 'onKeyDown' | 'onClick'> {
|
|
9
|
+
/** Action to be executed when Card is clicked. */
|
|
10
|
+
onCardClicked?: () => void;
|
|
11
|
+
/** If disabled then users can not click on the card, also styles are greyed out.*/
|
|
12
|
+
disabled?: boolean;
|
|
13
|
+
/** Maximum width of the card. */
|
|
14
|
+
maxWidth?: number | string;
|
|
15
|
+
/** Properties of Card top section. */
|
|
16
|
+
topSectionProps?: VerticalCardTopSectionProps;
|
|
17
|
+
/** Properties of Card middle section. */
|
|
18
|
+
middleSectionProps?: VerticalCardMiddleSectionProps;
|
|
19
|
+
/** Properties of Card bottom section. */
|
|
20
|
+
bottomSectionProps?: VerticalCardBottomSectionProps;
|
|
21
|
+
/** Card container style variant. */
|
|
22
|
+
variant?: 'outline' | 'elevated';
|
|
23
|
+
}
|
|
24
|
+
declare const VerticalCard: React.FunctionComponent<VerticalCardProps>;
|
|
25
|
+
export default VerticalCard;
|
|
@@ -6,12 +6,12 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
|
|
|
6
6
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
7
7
|
import * as React from 'react';
|
|
8
8
|
import styled from 'styled-components';
|
|
9
|
-
import
|
|
10
|
-
import
|
|
11
|
-
import
|
|
9
|
+
import VerticalCardTopSection from './VerticalCardTopSection';
|
|
10
|
+
import VerticalCardMiddleSection from './VerticalCardMiddleSection';
|
|
11
|
+
import VerticalCardBottomSection from './VerticalCardBottomSection';
|
|
12
12
|
import { BOXSHADOWS, COLORS, focusStyles, useActionWithin } from '../../index';
|
|
13
13
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
14
|
-
export const
|
|
14
|
+
export const VerticalCardTopLevelContainerStyles = styled.div`
|
|
15
15
|
background-color: ${props => COLORS.generateToken({
|
|
16
16
|
componentType: 'bg-surface',
|
|
17
17
|
defaultVariant: 'default'
|
|
@@ -40,7 +40,7 @@ export const CardTopLevelContainerStyles = styled.div`
|
|
|
40
40
|
`;
|
|
41
41
|
|
|
42
42
|
// Full-card link that covers the entire card area
|
|
43
|
-
export const
|
|
43
|
+
export const VerticalCardLink = styled.a`
|
|
44
44
|
position: absolute;
|
|
45
45
|
top: 0;
|
|
46
46
|
left: 0;
|
|
@@ -60,14 +60,14 @@ export const CardLink = styled.a`
|
|
|
60
60
|
${focusStyles}
|
|
61
61
|
}
|
|
62
62
|
`;
|
|
63
|
-
export const
|
|
63
|
+
export const VerticalCardContainerStyles = styled.div`
|
|
64
64
|
&.interactive:not(.disabled) {
|
|
65
65
|
&:focus {
|
|
66
66
|
${focusStyles}
|
|
67
67
|
}
|
|
68
68
|
|
|
69
69
|
&:not(.action-within) {
|
|
70
|
-
${
|
|
70
|
+
${VerticalCardTopLevelContainerStyles} {
|
|
71
71
|
&:hover {
|
|
72
72
|
background-color: ${props => COLORS.generateToken({
|
|
73
73
|
componentType: 'bg-surface',
|
|
@@ -85,7 +85,7 @@ export const CardContainerStyles = styled.div`
|
|
|
85
85
|
}
|
|
86
86
|
|
|
87
87
|
&.elevated:not(.action-within) {
|
|
88
|
-
${
|
|
88
|
+
${VerticalCardTopLevelContainerStyles} {
|
|
89
89
|
&:hover {
|
|
90
90
|
box-shadow: ${BOXSHADOWS.BOXSHADOW_L3};
|
|
91
91
|
}
|
|
@@ -99,7 +99,7 @@ export const CardContainerStyles = styled.div`
|
|
|
99
99
|
|
|
100
100
|
&.disabled {
|
|
101
101
|
cursor: not-allowed;
|
|
102
|
-
${
|
|
102
|
+
${VerticalCardTopLevelContainerStyles}{
|
|
103
103
|
border: 1px solid ${props => COLORS.generateToken({
|
|
104
104
|
componentType: 'border',
|
|
105
105
|
state: 'disabled'
|
|
@@ -107,7 +107,7 @@ export const CardContainerStyles = styled.div`
|
|
|
107
107
|
}
|
|
108
108
|
}
|
|
109
109
|
`;
|
|
110
|
-
const
|
|
110
|
+
const VerticalCard = _ref => {
|
|
111
111
|
let {
|
|
112
112
|
onCardClicked,
|
|
113
113
|
topSectionProps,
|
|
@@ -132,7 +132,7 @@ const Card = _ref => {
|
|
|
132
132
|
onCardClicked();
|
|
133
133
|
}
|
|
134
134
|
};
|
|
135
|
-
return /*#__PURE__*/_jsx(
|
|
135
|
+
return /*#__PURE__*/_jsx(VerticalCardContainerStyles, _objectSpread(_objectSpread({
|
|
136
136
|
ref: containerRef,
|
|
137
137
|
role: "group",
|
|
138
138
|
className: cls,
|
|
@@ -141,24 +141,24 @@ const Card = _ref => {
|
|
|
141
141
|
onKeyDown: e => e.key === 'Enter' && !disabled && onCardClicked && onCardClicked(),
|
|
142
142
|
"data-testid": 'card-wrapper'
|
|
143
143
|
}, rest), {}, {
|
|
144
|
-
children: /*#__PURE__*/_jsxs(
|
|
144
|
+
children: /*#__PURE__*/_jsxs(VerticalCardTopLevelContainerStyles, {
|
|
145
145
|
style: {
|
|
146
146
|
maxWidth: maxWidth
|
|
147
147
|
},
|
|
148
|
-
children: [onCardClicked && !disabled && /*#__PURE__*/_jsx(
|
|
148
|
+
children: [onCardClicked && !disabled && /*#__PURE__*/_jsx(VerticalCardLink, {
|
|
149
149
|
href: '#',
|
|
150
150
|
"data-testid": 'card-link',
|
|
151
151
|
onClick: handleCardClick,
|
|
152
152
|
"aria-labelledby": `${autoId}-title`,
|
|
153
153
|
tabIndex: -1
|
|
154
|
-
}), topSectionProps && /*#__PURE__*/_jsx(
|
|
154
|
+
}), topSectionProps && /*#__PURE__*/_jsx(VerticalCardTopSection, _objectSpread(_objectSpread({
|
|
155
155
|
ref: checkBoxRef
|
|
156
156
|
}, topSectionProps), {}, {
|
|
157
157
|
disabled: disabled
|
|
158
|
-
})), middleSectionProps && /*#__PURE__*/_jsx(
|
|
158
|
+
})), middleSectionProps && /*#__PURE__*/_jsx(VerticalCardMiddleSection, _objectSpread(_objectSpread({}, middleSectionProps), {}, {
|
|
159
159
|
componentId: autoId,
|
|
160
160
|
disabled: disabled
|
|
161
|
-
})), bottomSectionProps && /*#__PURE__*/_jsx(
|
|
161
|
+
})), bottomSectionProps && /*#__PURE__*/_jsx(VerticalCardBottomSection, _objectSpread(_objectSpread({
|
|
162
162
|
ref: instance => {
|
|
163
163
|
setActionsRefs(instance ?? []);
|
|
164
164
|
}
|
|
@@ -168,11 +168,11 @@ const Card = _ref => {
|
|
|
168
168
|
})
|
|
169
169
|
}));
|
|
170
170
|
};
|
|
171
|
-
|
|
171
|
+
VerticalCard.propTypes = {
|
|
172
172
|
onCardClicked: _pt.func,
|
|
173
173
|
disabled: _pt.bool,
|
|
174
174
|
maxWidth: _pt.oneOfType([_pt.number, _pt.string]),
|
|
175
175
|
variant: _pt.oneOf(['outline', 'elevated'])
|
|
176
176
|
};
|
|
177
|
-
export default
|
|
178
|
-
//# sourceMappingURL=
|
|
177
|
+
export default VerticalCard;
|
|
178
|
+
//# sourceMappingURL=VerticalCard.js.map
|