{"version":3,"file":"defaultButton.io3x7ltq.js","sources":["../../../wwwdev/scripts/modules/react-button/enums.ts","../../../wwwdev/scripts/modules/react-button/defaultButton.tsx"],"sourcesContent":["export enum ButtonStyle {\r\n    primary = 'primary',\r\n    secondary = 'secondary',\r\n    secondaryNegative = 'secondaryNegative',\r\n    septenary = 'septenary',\r\n    ghost = 'ghost',\r\n    ghostNegative = 'ghostNegative',\r\n    clubmatas = 'clubmatas',\r\n    live = 'live',\r\n    link = 'link',\r\n    disabled = 'disabled',\r\n    matasPlus = 'matasPlus',\r\n    brandNegative = 'brandNegative',\r\n    transparent = 'transparent'\r\n}\r\n\r\nexport enum ButtonSize {\r\n    sm = 'sm',\r\n    md = 'md',\r\n    lg = 'lg'\r\n}\r\n\r\nexport enum IconPosition {\r\n    left = 'left',\r\n    right = 'right'\r\n}\r\n","import type React from 'react';\r\nimport { forwardRef } from 'react';\r\nimport styled, { css, type RuleSet } from 'styled-components';\r\nimport { colors } from 'variables';\r\nimport { rem, em } from 'modules/helpers/style';\r\nimport {\r\n    BorderRadiusMedium,\r\n    ColorBrandBlue1,\r\n    ColorNordicGrey4,\r\n    ColorNeutralWhite,\r\n    ColorClubMatasPlus1\r\n} from 'autogen/design-tokens/tokens';\r\nimport type { ILinkButtonProps } from 'modules/react-button/linkButton';\r\nimport type { IIconButtonProps } from 'modules/react-button/withIcon';\r\nimport { ButtonStyle, type ButtonSize } from './enums';\r\nimport UAEventButton, { type IUaEventButton } from './uaEventButton';\r\n\r\nexport * from './enums';\r\n\r\nexport interface IButtonProps {\r\n    buttonSize?: ButtonSize;\r\n    buttonStyle?: ButtonStyle;\r\n    fontWeightNormal?: true;\r\n}\r\n\r\nexport interface IDefaultButtonProps extends IButtonProps, IUaEventButton {}\r\n\r\nconst fontsSize = { sm: 12, md: 14, lg: 16 };\r\nconst minHeight = { sm: 32, md: 40, lg: 48 };\r\nconst padding = {\r\n    sm: { top: 8, sides: 10, bottom: 8 },\r\n    md: { top: 13, sides: 15, bottom: 12 },\r\n    lg: { top: 16, sides: 15, bottom: 16 }\r\n};\r\n\r\nconst buttonFontSize = {\r\n    sm: rem(fontsSize.sm),\r\n    md: rem(fontsSize.md),\r\n    lg: rem(fontsSize.lg)\r\n};\r\n\r\nconst buttonHeight = {\r\n    sm: rem(minHeight.sm),\r\n    md: rem(minHeight.md),\r\n    lg: rem(minHeight.lg)\r\n};\r\n\r\nconst buttonPadding = {\r\n    sm: `${rem(padding.sm.top, fontsSize.sm)} ${rem(padding.sm.sides, fontsSize.sm)}`,\r\n    md: `${rem(padding.md.top, fontsSize.md)} ${rem(padding.md.sides, fontsSize.md)} ${rem(\r\n        padding.md.bottom,\r\n        fontsSize.md\r\n    )}`,\r\n    lg: `${rem(padding.lg.top, fontsSize.lg)} ${rem(padding.lg.sides, fontsSize.lg)}`\r\n};\r\n\r\nconst buttonPaddingWithIcon = {\r\n    sm: `${rem(7, fontsSize.sm)} ${rem(10, fontsSize.sm)}`,\r\n    md: `${rem(12, fontsSize.md)} ${rem(15, fontsSize.md)} ${rem(11, fontsSize.md)}`,\r\n    lg: `${rem(15, fontsSize.lg)} ${rem(15, fontsSize.lg)}`\r\n};\r\n\r\nconst backgroundColor = {\r\n    primary: 'var(--color-brand-blue-1)',\r\n    secondary: 'var(--color-nordic-grey-4)',\r\n    secondaryNegative: 'var(--color-neutral-white)',\r\n    septenary: colors.color6,\r\n    ghost: colors.negative,\r\n    ghostNegative: colors.transparent,\r\n    clubmatas: colors.clubmatas1,\r\n    live: colors.liveButton,\r\n    disabled: colors.transparent,\r\n    matasPlus: 'var(--color-club-matas-plus-1)',\r\n    brandNegative: colors.negative,\r\n    transparent: 'transparent'\r\n};\r\n\r\nconst fontColor = {\r\n    primary: colors.negative,\r\n    secondary: colors.positive,\r\n    secondaryNegative: colors.positive,\r\n    septenary: colors.negative,\r\n    ghost: colors.positive,\r\n    ghostNegative: colors.negative,\r\n    clubmatas: colors.negative,\r\n    live: colors.clubmatasFont,\r\n    disabled: colors.currentColor,\r\n    matasPlus: colors.negative,\r\n    brandNegative: colors.brand1,\r\n    transparent: colors.positive\r\n};\r\n\r\nconst borderColor = {\r\n    primary: ColorBrandBlue1,\r\n    secondary: ColorNordicGrey4,\r\n    secondaryNegative: ColorNeutralWhite,\r\n    septenary: colors.color6,\r\n    ghost: colors.borderQuinary,\r\n    ghostNegative: colors.negative,\r\n    clubmatas: colors.clubmatas1,\r\n    live: colors.liveButton,\r\n    disabled: colors.currentColor,\r\n    matasPlus: colors.matasPlus,\r\n    brandNegative: colors.borderSenary,\r\n    transparent: 'transparent'\r\n};\r\n\r\nconst defaultSize = 'md';\r\nconst defaultStyle = 'ghost';\r\n\r\nconst additionalDisabledStyling = css`\r\n    &:hover,\r\n    &:focus {\r\n        color: ${fontColor.disabled};\r\n        border-color: ${borderColor.disabled};\r\n    }\r\n`;\r\n\r\nexport const buttonStyling = css<IDefaultButtonProps & IIconButtonProps>`\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    position: relative;\r\n    min-height: ${({ buttonSize }): string => buttonHeight[buttonSize] || buttonHeight[defaultSize]};\r\n    font-size: ${({ buttonSize }): string => buttonFontSize[buttonSize] || buttonFontSize[defaultSize]};\r\n    border: ${({ buttonStyle }) =>\r\n        buttonStyle === ButtonStyle.ghost\r\n            ? css`\r\n                  ${em(1)} solid ${borderColor[buttonStyle] || borderColor[defaultStyle]}\r\n              `\r\n            : 0};\r\n    border-radius: ${BorderRadiusMedium};\r\n    background-color: ${({ buttonStyle }): string => backgroundColor[buttonStyle] || backgroundColor[defaultStyle]};\r\n    color: ${({ buttonStyle }): string => fontColor[buttonStyle] || fontColor[defaultStyle]};\r\n    padding: ${({ buttonSize, icon }): string =>\r\n        (icon ? buttonPaddingWithIcon[buttonSize] : buttonPadding[buttonSize]) ||\r\n        (icon ? buttonPaddingWithIcon[defaultSize] : buttonPadding[defaultSize])};\r\n    ${({ fontWeightNormal }): string => !fontWeightNormal && 'font-weight: 700;'}\r\n    line-height: 1em;\r\n\r\n    ${({ buttonStyle, disabled }): RuleSet =>\r\n        (disabled || buttonStyle === ButtonStyle.disabled) && additionalDisabledStyling};\r\n\r\n    &:hover,\r\n    &:active,\r\n    &:focus {\r\n        color: ${({ buttonStyle }): string => fontColor[buttonStyle] || fontColor[defaultStyle]};\r\n    }\r\n`;\r\n\r\nexport const linkButtonStyling = css<ILinkButtonProps>`\r\n    border: 0;\r\n    word-break: break-word;\r\n    background: none;\r\n    text-decoration: underline;\r\n    font-size: ${({ buttonSize }): string => buttonFontSize[buttonSize] || buttonFontSize[defaultSize]};\r\n\r\n    &:focus,\r\n    &:hover {\r\n        outline: none;\r\n    }\r\n`;\r\n\r\nconst Button = styled(UAEventButton)<IDefaultButtonProps>`\r\n    ${({ buttonStyle }): RuleSet<any> => {\r\n        switch (buttonStyle) {\r\n            case ButtonStyle.link:\r\n                return css`\r\n                    ${linkButtonStyling}\r\n                `;\r\n            default:\r\n                return css`\r\n                    ${buttonStyling}\r\n                `;\r\n        }\r\n    }}\r\n`;\r\n\r\nexport const ReactButton = forwardRef(\r\n    (props: IDefaultButtonProps | IIconButtonProps, ref: React.Ref<HTMLButtonElement>): JSX.Element => {\r\n        const { children, ...restProps } = props;\r\n\r\n        return (\r\n            <Button ref={ref} {...restProps}>\r\n                {children}\r\n            </Button>\r\n        );\r\n    }\r\n);\r\n\r\nexport default ReactButton;\r\nexport const buttonStylingValues = { fontsSize, minHeight, padding };\r\n"],"names":["ButtonStyle","primary","secondary","secondaryNegative","septenary","ghost","ghostNegative","clubmatas","live","link","disabled","matasPlus","brandNegative","transparent","ButtonSize","sm","md","lg","IconPosition","left","right","fontsSize","minHeight","padding","top","sides","bottom","buttonFontSize","rem","buttonHeight","buttonPadding","buttonPaddingWithIcon","backgroundColor","colors","color6","negative","clubmatas1","liveButton","fontColor","positive","clubmatasFont","currentColor","brand1","borderColor","ColorBrandBlue1","ColorNordicGrey4","ColorNeutralWhite","borderQuinary","borderSenary","defaultSize","defaultStyle","additionalDisabledStyling","css","buttonStyling","buttonSize","buttonStyle","em","BorderRadiusMedium","icon","fontWeightNormal","linkButtonStyling","Button","styled","UAEventButton","withConfig","displayName","componentId","ReactButton","forwardRef","props","ref","children","restProps","jsx","buttonStylingValues"],"mappings":"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"}