@laerdal/life-react-components 1.6.0-dev.6 → 1.6.0-dev.7.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.
Files changed (14) hide show
  1. package/dist/Banners/Banner.cjs +21 -5
  2. package/dist/Banners/Banner.cjs.map +1 -1
  3. package/dist/Banners/Banner.js +20 -5
  4. package/dist/Banners/Banner.js.map +1 -1
  5. package/dist/HyperLink/HyperLink.cjs +3 -1
  6. package/dist/HyperLink/HyperLink.cjs.map +1 -1
  7. package/dist/HyperLink/HyperLink.d.ts +4 -0
  8. package/dist/HyperLink/HyperLink.js +1 -1
  9. package/dist/HyperLink/HyperLink.js.map +1 -1
  10. package/dist/HyperLink/styling.cjs +1 -1
  11. package/dist/HyperLink/styling.cjs.map +1 -1
  12. package/dist/HyperLink/styling.js +1 -1
  13. package/dist/HyperLink/styling.js.map +1 -1
  14. package/package.json +1 -1
package/dist/Banners/Banner.cjs CHANGED
@@ -31,6 +31,8 @@ var _typography = require("../styles/typography");
31
31
 
32
32
  var _HyperLink = require("../HyperLink");
33
33
 
34
+ var _HyperLink2 = require("../HyperLink/HyperLink");
35
+
34
36
  var _jsxRuntime = require("react/jsx-runtime");
35
37
 
36
38
  var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
@@ -39,13 +41,17 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
39
41
 
40
42
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
41
43
 
42
- var BannerContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n background: ", ";\n min-height: 48px;\n display: flex;\n color: ", ";\n margin-top: ", ";\n\n button:last-child {\n line-height: 0;\n margin: 0 0 0 8px;\n ", " {\n margin: 0 0 0 16px;\n }\n ", " {\n margin: 0 0 0 32px;\n }\n &.small {\n margin: 0 0 0 8px;\n }\n &.medium {\n margin: 0 0 0 16px;\n }\n &.large {\n margin: 0 0 0 32px;\n }\n }\n\n a {\n color: ", " !important;\n }\n"])), function (props) {
44
+ var BannerContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n background: ", ";\n min-height: 48px;\n display: flex;\n color: ", ";\n margin-top: ", ";\n\n button:last-child {\n line-height: 0;\n margin: 0 0 0 8px;\n ", " {\n margin: 0 0 0 16px;\n }\n ", " {\n margin: 0 0 0 32px;\n }\n &.small {\n margin: 0 0 0 8px;\n }\n &.medium {\n margin: 0 0 0 16px;\n }\n &.large {\n margin: 0 0 0 32px;\n }\n }\n\n ", " {\n &:link{\n color: ", ";\n }\n &:visited{\n color: ", ";\n }\n &:focus,\n &:active{\n background-color: ", ";\n color: ", ";\n }\n }\n"])), function (props) {
43
45
  return props.$type ? props.$type : _styles.COLORS.correct_100;
44
46
  }, _styles.COLORS.black, function (props) {
45
47
  return props.bottom ? 'auto' : '0';
46
- }, _styles.BREAKPOINTS.MEDIUM, _styles.BREAKPOINTS.LARGE, function (props) {
48
+ }, _styles.BREAKPOINTS.MEDIUM, _styles.BREAKPOINTS.LARGE, _HyperLink2.StyledLink, function (props) {
47
49
  return props.link;
48
- });
50
+ }, function (props) {
51
+ return props.linkVisited;
52
+ }, function (props) {
53
+ return props.linkFocused;
54
+ }, _styles.COLORS.white);
49
55
 
50
56
  var BannerCenter = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n ", "\n\n display: flex;\n width: 100%;\n margin: 0 16px;\n ", " {\n margin: 0 32px;\n }\n ", " {\n margin: 0 56px;\n }\n &.small {\n margin: 0 16px;\n }\n &.medium {\n margin: 0 32px;\n }\n &.large {\n margin: 0 56px;\n }\n\n > svg {\n flex-shrink: 0;\n margin: 12px 0;\n }\n"])), function (props) {
51
57
  return (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, props.$color);
@@ -91,7 +97,9 @@ var Banner = function Banner(_ref) {
91
97
  closeIconColor: _styles.COLORS.primary_500,
92
98
  icon: _SystemIcons.Tip,
93
99
  containerType: 'neutral',
94
- focusBgColor: _styles.COLORS.primary_200
100
+ focusBgColor: _styles.COLORS.primary_200,
101
+ linkVisited: _styles.COLORS.primary_600,
102
+ linkFocused: _styles.COLORS.primary_800
95
103
  };
96
104
  var formatTypeToLowerCase = type === null || type === void 0 ? void 0 : type.toLowerCase();
97
105
 
@@ -103,6 +111,8 @@ var Banner = function Banner(_ref) {
103
111
  bannerParams.icon = _SystemIcons.Help;
104
112
  bannerParams.closeIconColor = _styles.COLORS.warning_500;
105
113
  bannerParams.containerType = formatTypeToLowerCase;
114
+ bannerParams.linkVisited = _styles.COLORS.warning_600;
115
+ bannerParams.linkFocused = _styles.COLORS.warning_800;
106
116
  } else if (formatTypeToLowerCase == 'critical') {
107
117
  bannerParams.typeColor = _styles.COLORS.critical_100;
108
118
  bannerParams.accentColor = _styles.COLORS.critical_700;
@@ -111,6 +121,8 @@ var Banner = function Banner(_ref) {
111
121
  bannerParams.icon = _SystemIcons.TechnicalWarning;
112
122
  bannerParams.closeIconColor = _styles.COLORS.critical_500;
113
123
  bannerParams.containerType = formatTypeToLowerCase;
124
+ bannerParams.linkVisited = _styles.COLORS.critical_600;
125
+ bannerParams.linkFocused = _styles.COLORS.critical_800;
114
126
  } else if (formatTypeToLowerCase == 'positive') {
115
127
  bannerParams.typeColor = _styles.COLORS.correct_100;
116
128
  bannerParams.accentColor = _styles.COLORS.correct_700;
@@ -119,11 +131,15 @@ var Banner = function Banner(_ref) {
119
131
  bannerParams.icon = _SystemIcons.ThumbsUp;
120
132
  bannerParams.closeIconColor = _styles.COLORS.correct_500;
121
133
  bannerParams.containerType = formatTypeToLowerCase;
134
+ bannerParams.linkVisited = _styles.COLORS.correct_600;
135
+ bannerParams.linkFocused = _styles.COLORS.correct_800;
122
136
  }
123
137
 
124
138
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(BannerContainer, {
125
139
  "data-testid": testId,
126
140
  $type: bannerParams.typeColor,
141
+ linkFocused: bannerParams.linkFocused,
142
+ linkVisited: bannerParams.linkVisited,
127
143
  link: bannerParams.accentColor,
128
144
  hover: bannerParams.hoverColor,
129
145
  bottom: bottom,
@@ -138,7 +154,7 @@ var Banner = function Banner(_ref) {
138
154
  size: size,
139
155
  width: width,
140
156
  color: bannerParams.accentColor,
141
- children: [children, "\xA0\xA0", link && linkText && /*#__PURE__*/(0, _jsxRuntime.jsx)(_HyperLink.HyperLink, {
157
+ children: [children, "\xA0", link && linkText && /*#__PURE__*/(0, _jsxRuntime.jsx)(_HyperLink.HyperLink, {
142
158
  id: "".concat(Math.floor(Math.random() * 999999999999), "_BannerLink"),
143
159
  onClick: function onClick(e) {
144
160
  if (linkAction) {
package/dist/Banners/Banner.cjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/Banners/Banner.tsx"],"names":["BannerContainer","styled","div","props","$type","COLORS","correct_100","black","bottom","BREAKPOINTS","MEDIUM","LARGE","link","BannerCenter","ComponentTextStyle","Regular","$color","ButtonWrapper","ButtonContainer","BannerContentWrapper","Banner","size","type","children","testId","linkText","onClose","icon","noIcon","linkAction","React","useState","window","innerWidth","width","setWidth","useEffect","handleResize","addEventListener","bannerParams","typeColor","primary_100","accentColor","primary_700","hoverColor","primary_20","closeIconColor","primary_500","Tip","containerType","focusBgColor","primary_200","formatTypeToLowerCase","toLowerCase","warning_100","warning_700","warning_200","warning_20","Help","warning_500","critical_100","critical_700","critical_200","critical_20","TechnicalWarning","critical_500","correct_700","correct_200","correct_20","ThumbsUp","correct_500","Math","floor","random","e","preventDefault","hover"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport { BREAKPOINTS, COLORS, ComponentTextStyle } from '../styles';\nimport { Close, Help, TechnicalWarning, ThumbsUp, Tip } from '../icons/systemicons/SystemIcons';\nimport { IconButton } from '../Button';\nimport { getButtonStyle } from './styles';\nimport { Size } from '../types';\nimport { ComponentMStyling, ComponentResponsive } from '../styles/typography';\nimport { HyperLink } from '../HyperLink';\nimport { stringify } from 'querystring';\n\n/**\n * Styles for <Banner />\n */\ntype StyleBannerProps = BannerProps & { $type: string };\n\nconst BannerContainer = styled.div<StyleBannerProps>`\n background: ${(props: StyleBannerProps) => (props.$type ? props.$type : COLORS.correct_100)};\n min-height: 48px;\n display: flex;\n color: ${COLORS.black};\n margin-top: ${(props: StyleBannerProps) => (props.bottom ? 'auto' : '0')};\n\n button:last-child {\n line-height: 0;\n margin: 0 0 0 8px;\n ${BREAKPOINTS.MEDIUM} {\n margin: 0 0 0 16px;\n }\n ${BREAKPOINTS.LARGE} {\n margin: 0 0 0 32px;\n }\n &.small {\n margin: 0 0 0 8px;\n }\n &.medium {\n margin: 0 0 0 16px;\n }\n &.large {\n margin: 0 0 0 32px;\n }\n }\n\n a {\n color: ${(props: BannerProps) => props.link} !important;\n }\n`;\n\nconst BannerCenter = styled.div<{ $color: string }>`\n ${(props) => ComponentMStyling(ComponentTextStyle.Regular, props.$color)}\n\n display: flex;\n width: 100%;\n margin: 0 16px;\n ${BREAKPOINTS.MEDIUM} {\n margin: 0 32px;\n }\n ${BREAKPOINTS.LARGE} {\n margin: 0 56px;\n }\n &.small {\n margin: 0 16px;\n }\n &.medium {\n margin: 0 32px;\n }\n &.large {\n margin: 0 56px;\n }\n\n > svg {\n flex-shrink: 0;\n margin: 12px 0;\n }\n`;\n\nconst ButtonWrapper = styled.div`\n margin: 0 0 0 auto;\n`;\n\nconst ButtonContainer = styled.div<{ $type?: string }>`\n display: contents;\n ${(props) => (props.$type ? getButtonStyle(props.$type) : null)};\n`;\n\nconst BannerContentWrapper = styled.div`\n display: flex;\n align-items: center;\n margin: 12px 0;\n &:not(:first-child) {\n margin-left: 8px;\n }\n`;\n\ntype BannerProps = {\n size?: Size.Small | Size.Medium | Size.Large;\n type?: string;\n link?: string;\n linkText?: string;\n linkAction?: (ev: React.MouseEvent) => void;\n hover?: string;\n bottom?: boolean;\n testId?: string;\n icon?: React.ReactNode;\n onClose?: () => void;\n noIcon?: boolean;\n};\n\nconst Banner: React.FunctionComponent<BannerProps> = ({ size, type, children, bottom, testId, linkText, link, onClose, icon, noIcon, linkAction }) => {\n const [width, setWidth] = React.useState<number>(window.innerWidth);\n React.useEffect(() => {\n function handleResize() {\n setWidth(window.innerWidth);\n }\n window.addEventListener('resize', handleResize);\n });\n\n let bannerParams = {\n typeColor: COLORS.primary_100,\n accentColor: COLORS.primary_700,\n hoverColor: COLORS.primary_20,\n closeIconColor: COLORS.primary_500,\n icon: Tip,\n containerType: 'neutral',\n focusBgColor: COLORS.primary_200,\n };\n const formatTypeToLowerCase = type?.toLowerCase();\n if (formatTypeToLowerCase == 'warning') {\n bannerParams.typeColor = COLORS.warning_100;\n bannerParams.accentColor = COLORS.warning_700;\n bannerParams.focusBgColor = COLORS.warning_200;\n bannerParams.hoverColor = COLORS.warning_20;\n bannerParams.icon = Help;\n bannerParams.closeIconColor = COLORS.warning_500;\n bannerParams.containerType = formatTypeToLowerCase;\n } else if (formatTypeToLowerCase == 'critical') {\n bannerParams.typeColor = COLORS.critical_100;\n bannerParams.accentColor = COLORS.critical_700;\n bannerParams.focusBgColor = COLORS.critical_200;\n bannerParams.hoverColor = COLORS.critical_20;\n bannerParams.icon = TechnicalWarning;\n bannerParams.closeIconColor = COLORS.critical_500;\n bannerParams.containerType = formatTypeToLowerCase;\n } else if (formatTypeToLowerCase == 'positive') {\n bannerParams.typeColor = COLORS.correct_100;\n bannerParams.accentColor = COLORS.correct_700;\n bannerParams.focusBgColor = COLORS.correct_200;\n bannerParams.hoverColor = COLORS.correct_20;\n bannerParams.icon = ThumbsUp;\n bannerParams.closeIconColor = COLORS.correct_500;\n bannerParams.containerType = formatTypeToLowerCase;\n }\n\n return (\n <BannerContainer data-testid={testId} $type={bannerParams.typeColor} link={bannerParams.accentColor} hover={bannerParams.hoverColor} bottom={bottom}>\n <BannerCenter $color={bannerParams.accentColor} className={size}>\n {icon ? icon : noIcon ? null : <bannerParams.icon color={bannerParams.accentColor} size=\"24px\" />}\n <BannerContentWrapper>\n <ComponentResponsive size={size} width={width} color={bannerParams.accentColor}>\n {children}&nbsp;&nbsp;\n {link && linkText && (\n <HyperLink\n id={`${Math.floor(Math.random() * 999999999999)}_BannerLink`}\n onClick={(e) => {\n if (linkAction) {\n e.preventDefault();\n linkAction(e);\n }\n }}\n href={link}\n variant=\"default\">\n {linkText}\n </HyperLink>\n )}\n </ComponentResponsive>\n </BannerContentWrapper>\n {onClose && (\n <ButtonWrapper>\n <ButtonContainer $type={bannerParams.containerType}>\n <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground focusBackgroundColor={bannerParams.focusBgColor} action={() => onClose()}>\n <Close color={bannerParams.closeIconColor} size=\"24px\" />\n </IconButton>\n </ButtonContainer>\n </ButtonWrapper>\n )}\n </BannerCenter>\n </BannerContainer>\n );\n};\n\nexport default Banner;\n"],"file":"Banner.cjs"}
1
+ {"version":3,"sources":["../../src/Banners/Banner.tsx"],"names":["BannerContainer","styled","div","props","$type","COLORS","correct_100","black","bottom","BREAKPOINTS","MEDIUM","LARGE","StyledLink","link","linkVisited","linkFocused","white","BannerCenter","ComponentTextStyle","Regular","$color","ButtonWrapper","ButtonContainer","BannerContentWrapper","Banner","size","type","children","testId","linkText","onClose","icon","noIcon","linkAction","React","useState","window","innerWidth","width","setWidth","useEffect","handleResize","addEventListener","bannerParams","typeColor","primary_100","accentColor","primary_700","hoverColor","primary_20","closeIconColor","primary_500","Tip","containerType","focusBgColor","primary_200","primary_600","primary_800","formatTypeToLowerCase","toLowerCase","warning_100","warning_700","warning_200","warning_20","Help","warning_500","warning_600","warning_800","critical_100","critical_700","critical_200","critical_20","TechnicalWarning","critical_500","critical_600","critical_800","correct_700","correct_200","correct_20","ThumbsUp","correct_500","correct_600","correct_800","Math","floor","random","e","preventDefault","hover"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport { BREAKPOINTS, COLORS, ComponentTextStyle } from '../styles';\nimport { Close, Help, TechnicalWarning, ThumbsUp, Tip } from '../icons/systemicons/SystemIcons';\nimport { IconButton } from '../Button';\nimport { getButtonStyle } from './styles';\nimport { Size } from '../types';\nimport { ComponentMStyling, ComponentResponsive } from '../styles/typography';\nimport { HyperLink } from '../HyperLink';\nimport {StyledLink} from '../HyperLink/HyperLink';\nimport {defaultOnMouseDownHandler} from '../common';\nimport {defaultStyle} from '../HyperLink/styling';\n\n/**\n * Styles for <Banner />\n */\ntype StyleBannerProps = BannerProps & { $type: string, linkVisited: string, linkFocused: string };\n\nconst BannerContainer = styled.div<StyleBannerProps>`\n background: ${(props: StyleBannerProps) => (props.$type ? props.$type : COLORS.correct_100)};\n min-height: 48px;\n display: flex;\n color: ${COLORS.black};\n margin-top: ${(props: StyleBannerProps) => (props.bottom ? 'auto' : '0')};\n\n button:last-child {\n line-height: 0;\n margin: 0 0 0 8px;\n ${BREAKPOINTS.MEDIUM} {\n margin: 0 0 0 16px;\n }\n ${BREAKPOINTS.LARGE} {\n margin: 0 0 0 32px;\n }\n &.small {\n margin: 0 0 0 8px;\n }\n &.medium {\n margin: 0 0 0 16px;\n }\n &.large {\n margin: 0 0 0 32px;\n }\n }\n\n ${StyledLink} {\n &:link{\n color: ${(props) => props.link};\n }\n &:visited{\n color: ${(props) => props.linkVisited};\n }\n &:focus,\n &:active{\n background-color: ${(props) => props.linkFocused};\n color: ${COLORS.white};\n }\n }\n`;\n\nconst BannerCenter = styled.div<{ $color: string }>`\n ${(props) => ComponentMStyling(ComponentTextStyle.Regular, props.$color)}\n\n display: flex;\n width: 100%;\n margin: 0 16px;\n ${BREAKPOINTS.MEDIUM} {\n margin: 0 32px;\n }\n ${BREAKPOINTS.LARGE} {\n margin: 0 56px;\n }\n &.small {\n margin: 0 16px;\n }\n &.medium {\n margin: 0 32px;\n }\n &.large {\n margin: 0 56px;\n }\n\n > svg {\n flex-shrink: 0;\n margin: 12px 0;\n }\n`;\n\nconst ButtonWrapper = styled.div`\n margin: 0 0 0 auto;\n`;\n\nconst ButtonContainer = styled.div<{ $type?: string }>`\n display: contents;\n ${(props) => (props.$type ? getButtonStyle(props.$type) : null)};\n`;\n\nconst BannerContentWrapper = styled.div`\n display: flex;\n align-items: center;\n margin: 12px 0;\n &:not(:first-child) {\n margin-left: 8px;\n }\n`;\n\ntype BannerProps = {\n size?: Size.Small | Size.Medium | Size.Large;\n type?: string;\n link?: string;\n linkText?: string;\n linkAction?: (ev: React.MouseEvent) => void;\n hover?: string;\n bottom?: boolean;\n testId?: string;\n icon?: React.ReactNode;\n onClose?: () => void;\n noIcon?: boolean;\n};\n\nconst Banner: React.FunctionComponent<BannerProps> = ({ size, type, children, bottom, testId, linkText, link, onClose, icon, noIcon, linkAction }) => {\n const [width, setWidth] = React.useState<number>(window.innerWidth);\n React.useEffect(() => {\n function handleResize() {\n setWidth(window.innerWidth);\n }\n window.addEventListener('resize', handleResize);\n });\n\n let bannerParams = {\n typeColor: COLORS.primary_100,\n accentColor: COLORS.primary_700,\n hoverColor: COLORS.primary_20,\n closeIconColor: COLORS.primary_500,\n icon: Tip,\n containerType: 'neutral',\n focusBgColor: COLORS.primary_200,\n linkVisited: COLORS.primary_600,\n linkFocused: COLORS.primary_800\n };\n const formatTypeToLowerCase = type?.toLowerCase();\n if (formatTypeToLowerCase == 'warning') {\n bannerParams.typeColor = COLORS.warning_100;\n bannerParams.accentColor = COLORS.warning_700;\n bannerParams.focusBgColor = COLORS.warning_200;\n bannerParams.hoverColor = COLORS.warning_20;\n bannerParams.icon = Help;\n bannerParams.closeIconColor = COLORS.warning_500;\n bannerParams.containerType = formatTypeToLowerCase;\n bannerParams.linkVisited = COLORS.warning_600;\n bannerParams.linkFocused = COLORS.warning_800;\n } else if (formatTypeToLowerCase == 'critical') {\n bannerParams.typeColor = COLORS.critical_100;\n bannerParams.accentColor = COLORS.critical_700;\n bannerParams.focusBgColor = COLORS.critical_200;\n bannerParams.hoverColor = COLORS.critical_20;\n bannerParams.icon = TechnicalWarning;\n bannerParams.closeIconColor = COLORS.critical_500;\n bannerParams.containerType = formatTypeToLowerCase;\n bannerParams.linkVisited = COLORS.critical_600;\n bannerParams.linkFocused = COLORS.critical_800;\n } else if (formatTypeToLowerCase == 'positive') {\n bannerParams.typeColor = COLORS.correct_100;\n bannerParams.accentColor = COLORS.correct_700;\n bannerParams.focusBgColor = COLORS.correct_200;\n bannerParams.hoverColor = COLORS.correct_20;\n bannerParams.icon = ThumbsUp;\n bannerParams.closeIconColor = COLORS.correct_500;\n bannerParams.containerType = formatTypeToLowerCase;\n bannerParams.linkVisited = COLORS.correct_600;\n bannerParams.linkFocused = COLORS.correct_800;\n }\n\n return (\n <BannerContainer data-testid={testId} $type={bannerParams.typeColor} linkFocused={bannerParams.linkFocused} linkVisited={bannerParams.linkVisited} link={bannerParams.accentColor} hover={bannerParams.hoverColor} bottom={bottom}>\n <BannerCenter $color={bannerParams.accentColor} className={size}>\n {icon ? icon : noIcon ? null : <bannerParams.icon color={bannerParams.accentColor} size=\"24px\" />}\n <BannerContentWrapper>\n <ComponentResponsive size={size} width={width} color={bannerParams.accentColor}>\n {children}&nbsp;\n {link && linkText && (\n <HyperLink\n id={`${Math.floor(Math.random() * 999999999999)}_BannerLink`}\n onClick={(e) => {\n if (linkAction) {\n e.preventDefault();\n linkAction(e);\n }\n }}\n href={link}\n variant=\"default\">\n {linkText}\n </HyperLink>\n )}\n </ComponentResponsive>\n </BannerContentWrapper>\n {onClose && (\n <ButtonWrapper>\n <ButtonContainer $type={bannerParams.containerType}>\n <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground focusBackgroundColor={bannerParams.focusBgColor} action={() => onClose()}>\n <Close color={bannerParams.closeIconColor} size=\"24px\" />\n </IconButton>\n </ButtonContainer>\n </ButtonWrapper>\n )}\n </BannerCenter>\n </BannerContainer>\n );\n};\n\nexport default Banner;\n"],"file":"Banner.cjs"}
package/dist/Banners/Banner.js CHANGED
@@ -12,15 +12,20 @@ import { IconButton } from '../Button';
12
12
  import { getButtonStyle } from './styles';
13
13
  import { ComponentMStyling, ComponentResponsive } from '../styles/typography';
14
14
  import { HyperLink } from '../HyperLink';
15
+ import { StyledLink } from '../HyperLink/HyperLink';
15
16
  import { jsx as _jsx } from "react/jsx-runtime";
16
17
  import { jsxs as _jsxs } from "react/jsx-runtime";
17
- var BannerContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n background: ", ";\n min-height: 48px;\n display: flex;\n color: ", ";\n margin-top: ", ";\n\n button:last-child {\n line-height: 0;\n margin: 0 0 0 8px;\n ", " {\n margin: 0 0 0 16px;\n }\n ", " {\n margin: 0 0 0 32px;\n }\n &.small {\n margin: 0 0 0 8px;\n }\n &.medium {\n margin: 0 0 0 16px;\n }\n &.large {\n margin: 0 0 0 32px;\n }\n }\n\n a {\n color: ", " !important;\n }\n"])), function (props) {
18
+ var BannerContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n background: ", ";\n min-height: 48px;\n display: flex;\n color: ", ";\n margin-top: ", ";\n\n button:last-child {\n line-height: 0;\n margin: 0 0 0 8px;\n ", " {\n margin: 0 0 0 16px;\n }\n ", " {\n margin: 0 0 0 32px;\n }\n &.small {\n margin: 0 0 0 8px;\n }\n &.medium {\n margin: 0 0 0 16px;\n }\n &.large {\n margin: 0 0 0 32px;\n }\n }\n\n ", " {\n &:link{\n color: ", ";\n }\n &:visited{\n color: ", ";\n }\n &:focus,\n &:active{\n background-color: ", ";\n color: ", ";\n }\n }\n"])), function (props) {
18
19
  return props.$type ? props.$type : COLORS.correct_100;
19
20
  }, COLORS.black, function (props) {
20
21
  return props.bottom ? 'auto' : '0';
21
- }, BREAKPOINTS.MEDIUM, BREAKPOINTS.LARGE, function (props) {
22
+ }, BREAKPOINTS.MEDIUM, BREAKPOINTS.LARGE, StyledLink, function (props) {
22
23
  return props.link;
23
- });
24
+ }, function (props) {
25
+ return props.linkVisited;
26
+ }, function (props) {
27
+ return props.linkFocused;
28
+ }, COLORS.white);
24
29
  var BannerCenter = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n ", "\n\n display: flex;\n width: 100%;\n margin: 0 16px;\n ", " {\n margin: 0 32px;\n }\n ", " {\n margin: 0 56px;\n }\n &.small {\n margin: 0 16px;\n }\n &.medium {\n margin: 0 32px;\n }\n &.large {\n margin: 0 56px;\n }\n\n > svg {\n flex-shrink: 0;\n margin: 12px 0;\n }\n"])), function (props) {
25
30
  return ComponentMStyling(ComponentTextStyle.Regular, props.$color);
26
31
  }, BREAKPOINTS.MEDIUM, BREAKPOINTS.LARGE);
@@ -62,7 +67,9 @@ var Banner = function Banner(_ref) {
62
67
  closeIconColor: COLORS.primary_500,
63
68
  icon: Tip,
64
69
  containerType: 'neutral',
65
- focusBgColor: COLORS.primary_200
70
+ focusBgColor: COLORS.primary_200,
71
+ linkVisited: COLORS.primary_600,
72
+ linkFocused: COLORS.primary_800
66
73
  };
67
74
  var formatTypeToLowerCase = type === null || type === void 0 ? void 0 : type.toLowerCase();
68
75
 
@@ -74,6 +81,8 @@ var Banner = function Banner(_ref) {
74
81
  bannerParams.icon = Help;
75
82
  bannerParams.closeIconColor = COLORS.warning_500;
76
83
  bannerParams.containerType = formatTypeToLowerCase;
84
+ bannerParams.linkVisited = COLORS.warning_600;
85
+ bannerParams.linkFocused = COLORS.warning_800;
77
86
  } else if (formatTypeToLowerCase == 'critical') {
78
87
  bannerParams.typeColor = COLORS.critical_100;
79
88
  bannerParams.accentColor = COLORS.critical_700;
@@ -82,6 +91,8 @@ var Banner = function Banner(_ref) {
82
91
  bannerParams.icon = TechnicalWarning;
83
92
  bannerParams.closeIconColor = COLORS.critical_500;
84
93
  bannerParams.containerType = formatTypeToLowerCase;
94
+ bannerParams.linkVisited = COLORS.critical_600;
95
+ bannerParams.linkFocused = COLORS.critical_800;
85
96
  } else if (formatTypeToLowerCase == 'positive') {
86
97
  bannerParams.typeColor = COLORS.correct_100;
87
98
  bannerParams.accentColor = COLORS.correct_700;
@@ -90,11 +101,15 @@ var Banner = function Banner(_ref) {
90
101
  bannerParams.icon = ThumbsUp;
91
102
  bannerParams.closeIconColor = COLORS.correct_500;
92
103
  bannerParams.containerType = formatTypeToLowerCase;
104
+ bannerParams.linkVisited = COLORS.correct_600;
105
+ bannerParams.linkFocused = COLORS.correct_800;
93
106
  }
94
107
 
95
108
  return /*#__PURE__*/_jsx(BannerContainer, {
96
109
  "data-testid": testId,
97
110
  $type: bannerParams.typeColor,
111
+ linkFocused: bannerParams.linkFocused,
112
+ linkVisited: bannerParams.linkVisited,
98
113
  link: bannerParams.accentColor,
99
114
  hover: bannerParams.hoverColor,
100
115
  bottom: bottom,
@@ -109,7 +124,7 @@ var Banner = function Banner(_ref) {
109
124
  size: size,
110
125
  width: width,
111
126
  color: bannerParams.accentColor,
112
- children: [children, "\xA0\xA0", link && linkText && /*#__PURE__*/_jsx(HyperLink, {
127
+ children: [children, "\xA0", link && linkText && /*#__PURE__*/_jsx(HyperLink, {
113
128
  id: "".concat(Math.floor(Math.random() * 999999999999), "_BannerLink"),
114
129
  onClick: function onClick(e) {
115
130
  if (linkAction) {
package/dist/Banners/Banner.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/Banners/Banner.tsx"],"names":["React","styled","BREAKPOINTS","COLORS","ComponentTextStyle","Close","Help","TechnicalWarning","ThumbsUp","Tip","IconButton","getButtonStyle","ComponentMStyling","ComponentResponsive","HyperLink","BannerContainer","div","props","$type","correct_100","black","bottom","MEDIUM","LARGE","link","BannerCenter","Regular","$color","ButtonWrapper","ButtonContainer","BannerContentWrapper","Banner","size","type","children","testId","linkText","onClose","icon","noIcon","linkAction","useState","window","innerWidth","width","setWidth","useEffect","handleResize","addEventListener","bannerParams","typeColor","primary_100","accentColor","primary_700","hoverColor","primary_20","closeIconColor","primary_500","containerType","focusBgColor","primary_200","formatTypeToLowerCase","toLowerCase","warning_100","warning_700","warning_200","warning_20","warning_500","critical_100","critical_700","critical_200","critical_20","critical_500","correct_700","correct_200","correct_20","correct_500","Math","floor","random","e","preventDefault","hover"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport { BREAKPOINTS, COLORS, ComponentTextStyle } from '../styles';\nimport { Close, Help, TechnicalWarning, ThumbsUp, Tip } from '../icons/systemicons/SystemIcons';\nimport { IconButton } from '../Button';\nimport { getButtonStyle } from './styles';\nimport { Size } from '../types';\nimport { ComponentMStyling, ComponentResponsive } from '../styles/typography';\nimport { HyperLink } from '../HyperLink';\nimport { stringify } from 'querystring';\n\n/**\n * Styles for <Banner />\n */\ntype StyleBannerProps = BannerProps & { $type: string };\n\nconst BannerContainer = styled.div<StyleBannerProps>`\n background: ${(props: StyleBannerProps) => (props.$type ? props.$type : COLORS.correct_100)};\n min-height: 48px;\n display: flex;\n color: ${COLORS.black};\n margin-top: ${(props: StyleBannerProps) => (props.bottom ? 'auto' : '0')};\n\n button:last-child {\n line-height: 0;\n margin: 0 0 0 8px;\n ${BREAKPOINTS.MEDIUM} {\n margin: 0 0 0 16px;\n }\n ${BREAKPOINTS.LARGE} {\n margin: 0 0 0 32px;\n }\n &.small {\n margin: 0 0 0 8px;\n }\n &.medium {\n margin: 0 0 0 16px;\n }\n &.large {\n margin: 0 0 0 32px;\n }\n }\n\n a {\n color: ${(props: BannerProps) => props.link} !important;\n }\n`;\n\nconst BannerCenter = styled.div<{ $color: string }>`\n ${(props) => ComponentMStyling(ComponentTextStyle.Regular, props.$color)}\n\n display: flex;\n width: 100%;\n margin: 0 16px;\n ${BREAKPOINTS.MEDIUM} {\n margin: 0 32px;\n }\n ${BREAKPOINTS.LARGE} {\n margin: 0 56px;\n }\n &.small {\n margin: 0 16px;\n }\n &.medium {\n margin: 0 32px;\n }\n &.large {\n margin: 0 56px;\n }\n\n > svg {\n flex-shrink: 0;\n margin: 12px 0;\n }\n`;\n\nconst ButtonWrapper = styled.div`\n margin: 0 0 0 auto;\n`;\n\nconst ButtonContainer = styled.div<{ $type?: string }>`\n display: contents;\n ${(props) => (props.$type ? getButtonStyle(props.$type) : null)};\n`;\n\nconst BannerContentWrapper = styled.div`\n display: flex;\n align-items: center;\n margin: 12px 0;\n &:not(:first-child) {\n margin-left: 8px;\n }\n`;\n\ntype BannerProps = {\n size?: Size.Small | Size.Medium | Size.Large;\n type?: string;\n link?: string;\n linkText?: string;\n linkAction?: (ev: React.MouseEvent) => void;\n hover?: string;\n bottom?: boolean;\n testId?: string;\n icon?: React.ReactNode;\n onClose?: () => void;\n noIcon?: boolean;\n};\n\nconst Banner: React.FunctionComponent<BannerProps> = ({ size, type, children, bottom, testId, linkText, link, onClose, icon, noIcon, linkAction }) => {\n const [width, setWidth] = React.useState<number>(window.innerWidth);\n React.useEffect(() => {\n function handleResize() {\n setWidth(window.innerWidth);\n }\n window.addEventListener('resize', handleResize);\n });\n\n let bannerParams = {\n typeColor: COLORS.primary_100,\n accentColor: COLORS.primary_700,\n hoverColor: COLORS.primary_20,\n closeIconColor: COLORS.primary_500,\n icon: Tip,\n containerType: 'neutral',\n focusBgColor: COLORS.primary_200,\n };\n const formatTypeToLowerCase = type?.toLowerCase();\n if (formatTypeToLowerCase == 'warning') {\n bannerParams.typeColor = COLORS.warning_100;\n bannerParams.accentColor = COLORS.warning_700;\n bannerParams.focusBgColor = COLORS.warning_200;\n bannerParams.hoverColor = COLORS.warning_20;\n bannerParams.icon = Help;\n bannerParams.closeIconColor = COLORS.warning_500;\n bannerParams.containerType = formatTypeToLowerCase;\n } else if (formatTypeToLowerCase == 'critical') {\n bannerParams.typeColor = COLORS.critical_100;\n bannerParams.accentColor = COLORS.critical_700;\n bannerParams.focusBgColor = COLORS.critical_200;\n bannerParams.hoverColor = COLORS.critical_20;\n bannerParams.icon = TechnicalWarning;\n bannerParams.closeIconColor = COLORS.critical_500;\n bannerParams.containerType = formatTypeToLowerCase;\n } else if (formatTypeToLowerCase == 'positive') {\n bannerParams.typeColor = COLORS.correct_100;\n bannerParams.accentColor = COLORS.correct_700;\n bannerParams.focusBgColor = COLORS.correct_200;\n bannerParams.hoverColor = COLORS.correct_20;\n bannerParams.icon = ThumbsUp;\n bannerParams.closeIconColor = COLORS.correct_500;\n bannerParams.containerType = formatTypeToLowerCase;\n }\n\n return (\n <BannerContainer data-testid={testId} $type={bannerParams.typeColor} link={bannerParams.accentColor} hover={bannerParams.hoverColor} bottom={bottom}>\n <BannerCenter $color={bannerParams.accentColor} className={size}>\n {icon ? icon : noIcon ? null : <bannerParams.icon color={bannerParams.accentColor} size=\"24px\" />}\n <BannerContentWrapper>\n <ComponentResponsive size={size} width={width} color={bannerParams.accentColor}>\n {children}&nbsp;&nbsp;\n {link && linkText && (\n <HyperLink\n id={`${Math.floor(Math.random() * 999999999999)}_BannerLink`}\n onClick={(e) => {\n if (linkAction) {\n e.preventDefault();\n linkAction(e);\n }\n }}\n href={link}\n variant=\"default\">\n {linkText}\n </HyperLink>\n )}\n </ComponentResponsive>\n </BannerContentWrapper>\n {onClose && (\n <ButtonWrapper>\n <ButtonContainer $type={bannerParams.containerType}>\n <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground focusBackgroundColor={bannerParams.focusBgColor} action={() => onClose()}>\n <Close color={bannerParams.closeIconColor} size=\"24px\" />\n </IconButton>\n </ButtonContainer>\n </ButtonWrapper>\n )}\n </BannerCenter>\n </BannerContainer>\n );\n};\n\nexport default Banner;\n"],"file":"Banner.js"}
1
+ {"version":3,"sources":["../../src/Banners/Banner.tsx"],"names":["React","styled","BREAKPOINTS","COLORS","ComponentTextStyle","Close","Help","TechnicalWarning","ThumbsUp","Tip","IconButton","getButtonStyle","ComponentMStyling","ComponentResponsive","HyperLink","StyledLink","BannerContainer","div","props","$type","correct_100","black","bottom","MEDIUM","LARGE","link","linkVisited","linkFocused","white","BannerCenter","Regular","$color","ButtonWrapper","ButtonContainer","BannerContentWrapper","Banner","size","type","children","testId","linkText","onClose","icon","noIcon","linkAction","useState","window","innerWidth","width","setWidth","useEffect","handleResize","addEventListener","bannerParams","typeColor","primary_100","accentColor","primary_700","hoverColor","primary_20","closeIconColor","primary_500","containerType","focusBgColor","primary_200","primary_600","primary_800","formatTypeToLowerCase","toLowerCase","warning_100","warning_700","warning_200","warning_20","warning_500","warning_600","warning_800","critical_100","critical_700","critical_200","critical_20","critical_500","critical_600","critical_800","correct_700","correct_200","correct_20","correct_500","correct_600","correct_800","Math","floor","random","e","preventDefault","hover"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport { BREAKPOINTS, COLORS, ComponentTextStyle } from '../styles';\nimport { Close, Help, TechnicalWarning, ThumbsUp, Tip } from '../icons/systemicons/SystemIcons';\nimport { IconButton } from '../Button';\nimport { getButtonStyle } from './styles';\nimport { Size } from '../types';\nimport { ComponentMStyling, ComponentResponsive } from '../styles/typography';\nimport { HyperLink } from '../HyperLink';\nimport {StyledLink} from '../HyperLink/HyperLink';\nimport {defaultOnMouseDownHandler} from '../common';\nimport {defaultStyle} from '../HyperLink/styling';\n\n/**\n * Styles for <Banner />\n */\ntype StyleBannerProps = BannerProps & { $type: string, linkVisited: string, linkFocused: string };\n\nconst BannerContainer = styled.div<StyleBannerProps>`\n background: ${(props: StyleBannerProps) => (props.$type ? props.$type : COLORS.correct_100)};\n min-height: 48px;\n display: flex;\n color: ${COLORS.black};\n margin-top: ${(props: StyleBannerProps) => (props.bottom ? 'auto' : '0')};\n\n button:last-child {\n line-height: 0;\n margin: 0 0 0 8px;\n ${BREAKPOINTS.MEDIUM} {\n margin: 0 0 0 16px;\n }\n ${BREAKPOINTS.LARGE} {\n margin: 0 0 0 32px;\n }\n &.small {\n margin: 0 0 0 8px;\n }\n &.medium {\n margin: 0 0 0 16px;\n }\n &.large {\n margin: 0 0 0 32px;\n }\n }\n\n ${StyledLink} {\n &:link{\n color: ${(props) => props.link};\n }\n &:visited{\n color: ${(props) => props.linkVisited};\n }\n &:focus,\n &:active{\n background-color: ${(props) => props.linkFocused};\n color: ${COLORS.white};\n }\n }\n`;\n\nconst BannerCenter = styled.div<{ $color: string }>`\n ${(props) => ComponentMStyling(ComponentTextStyle.Regular, props.$color)}\n\n display: flex;\n width: 100%;\n margin: 0 16px;\n ${BREAKPOINTS.MEDIUM} {\n margin: 0 32px;\n }\n ${BREAKPOINTS.LARGE} {\n margin: 0 56px;\n }\n &.small {\n margin: 0 16px;\n }\n &.medium {\n margin: 0 32px;\n }\n &.large {\n margin: 0 56px;\n }\n\n > svg {\n flex-shrink: 0;\n margin: 12px 0;\n }\n`;\n\nconst ButtonWrapper = styled.div`\n margin: 0 0 0 auto;\n`;\n\nconst ButtonContainer = styled.div<{ $type?: string }>`\n display: contents;\n ${(props) => (props.$type ? getButtonStyle(props.$type) : null)};\n`;\n\nconst BannerContentWrapper = styled.div`\n display: flex;\n align-items: center;\n margin: 12px 0;\n &:not(:first-child) {\n margin-left: 8px;\n }\n`;\n\ntype BannerProps = {\n size?: Size.Small | Size.Medium | Size.Large;\n type?: string;\n link?: string;\n linkText?: string;\n linkAction?: (ev: React.MouseEvent) => void;\n hover?: string;\n bottom?: boolean;\n testId?: string;\n icon?: React.ReactNode;\n onClose?: () => void;\n noIcon?: boolean;\n};\n\nconst Banner: React.FunctionComponent<BannerProps> = ({ size, type, children, bottom, testId, linkText, link, onClose, icon, noIcon, linkAction }) => {\n const [width, setWidth] = React.useState<number>(window.innerWidth);\n React.useEffect(() => {\n function handleResize() {\n setWidth(window.innerWidth);\n }\n window.addEventListener('resize', handleResize);\n });\n\n let bannerParams = {\n typeColor: COLORS.primary_100,\n accentColor: COLORS.primary_700,\n hoverColor: COLORS.primary_20,\n closeIconColor: COLORS.primary_500,\n icon: Tip,\n containerType: 'neutral',\n focusBgColor: COLORS.primary_200,\n linkVisited: COLORS.primary_600,\n linkFocused: COLORS.primary_800\n };\n const formatTypeToLowerCase = type?.toLowerCase();\n if (formatTypeToLowerCase == 'warning') {\n bannerParams.typeColor = COLORS.warning_100;\n bannerParams.accentColor = COLORS.warning_700;\n bannerParams.focusBgColor = COLORS.warning_200;\n bannerParams.hoverColor = COLORS.warning_20;\n bannerParams.icon = Help;\n bannerParams.closeIconColor = COLORS.warning_500;\n bannerParams.containerType = formatTypeToLowerCase;\n bannerParams.linkVisited = COLORS.warning_600;\n bannerParams.linkFocused = COLORS.warning_800;\n } else if (formatTypeToLowerCase == 'critical') {\n bannerParams.typeColor = COLORS.critical_100;\n bannerParams.accentColor = COLORS.critical_700;\n bannerParams.focusBgColor = COLORS.critical_200;\n bannerParams.hoverColor = COLORS.critical_20;\n bannerParams.icon = TechnicalWarning;\n bannerParams.closeIconColor = COLORS.critical_500;\n bannerParams.containerType = formatTypeToLowerCase;\n bannerParams.linkVisited = COLORS.critical_600;\n bannerParams.linkFocused = COLORS.critical_800;\n } else if (formatTypeToLowerCase == 'positive') {\n bannerParams.typeColor = COLORS.correct_100;\n bannerParams.accentColor = COLORS.correct_700;\n bannerParams.focusBgColor = COLORS.correct_200;\n bannerParams.hoverColor = COLORS.correct_20;\n bannerParams.icon = ThumbsUp;\n bannerParams.closeIconColor = COLORS.correct_500;\n bannerParams.containerType = formatTypeToLowerCase;\n bannerParams.linkVisited = COLORS.correct_600;\n bannerParams.linkFocused = COLORS.correct_800;\n }\n\n return (\n <BannerContainer data-testid={testId} $type={bannerParams.typeColor} linkFocused={bannerParams.linkFocused} linkVisited={bannerParams.linkVisited} link={bannerParams.accentColor} hover={bannerParams.hoverColor} bottom={bottom}>\n <BannerCenter $color={bannerParams.accentColor} className={size}>\n {icon ? icon : noIcon ? null : <bannerParams.icon color={bannerParams.accentColor} size=\"24px\" />}\n <BannerContentWrapper>\n <ComponentResponsive size={size} width={width} color={bannerParams.accentColor}>\n {children}&nbsp;\n {link && linkText && (\n <HyperLink\n id={`${Math.floor(Math.random() * 999999999999)}_BannerLink`}\n onClick={(e) => {\n if (linkAction) {\n e.preventDefault();\n linkAction(e);\n }\n }}\n href={link}\n variant=\"default\">\n {linkText}\n </HyperLink>\n )}\n </ComponentResponsive>\n </BannerContentWrapper>\n {onClose && (\n <ButtonWrapper>\n <ButtonContainer $type={bannerParams.containerType}>\n <IconButton variant=\"secondary\" shape=\"circular\" useTransparentBackground focusBackgroundColor={bannerParams.focusBgColor} action={() => onClose()}>\n <Close color={bannerParams.closeIconColor} size=\"24px\" />\n </IconButton>\n </ButtonContainer>\n </ButtonWrapper>\n )}\n </BannerCenter>\n </BannerContainer>\n );\n};\n\nexport default Banner;\n"],"file":"Banner.js"}
package/dist/HyperLink/HyperLink.cjs CHANGED
@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
7
7
  Object.defineProperty(exports, "__esModule", {
8
8
  value: true
9
9
  });
10
- exports.default = void 0;
10
+ exports.default = exports.StyledLink = void 0;
11
11
 
12
12
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
13
13
 
@@ -43,6 +43,8 @@ var StyledLink = _styledComponents.default.a(_templateObject || (_templateObject
43
43
  return props.margin ? "margin: ".concat(props.margin, ";") : '';
44
44
  });
45
45
 
46
+ exports.StyledLink = StyledLink;
47
+
46
48
  var HyperLink = function HyperLink(_ref) {
47
49
  var children = _ref.children,
48
50
  _ref$target = _ref.target,
package/dist/HyperLink/HyperLink.cjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/HyperLink/HyperLink.tsx"],"names":["StyledLink","styled","a","props","variant","invertedStyle","defaultStyle","margin","HyperLink","children","target","id","href","disabled","className"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;;;;;;;;;;;;;;;AAEA,IAAMA,UAAU,GAAGC,0BAAOC,CAAV,0HAKZ,UAACC,KAAD;AAAA,SAAYA,KAAK,CAACC,OAAN,KAAkB,UAAlB,GAA+BC,sBAA/B,GAA+CC,qBAA3D;AAAA,CALY,EAMZ,UAACH,KAAD;AAAA,SAAYA,KAAK,CAACI,MAAN,qBAA0BJ,KAAK,CAACI,MAAhC,SAA4C,EAAxD;AAAA,CANY,CAAhB;;AAmBA,IAAMC,SAAkD,GAAG,SAArDA,SAAqD,OAAoF;AAAA,MAAjFC,QAAiF,QAAjFA,QAAiF;AAAA,yBAAvEC,MAAuE;AAAA,MAAvEA,MAAuE,4BAA9D,QAA8D;AAAA,0BAApDN,OAAoD;AAAA,MAApDA,OAAoD,6BAA1C,SAA0C;AAAA,MAA5BD,KAA4B;AAC7I,sBACE,qBAAC,UAAD,kCAAgBA,KAAhB;AAAuB,IAAA,OAAO,EAAEC,OAAhC;AAAyC,IAAA,MAAM,EAAEM,MAAjD;AAAyD,IAAA,GAAG,EAAC,qBAA7D;AAAA,cACGD;AADH,KADF;AAKD,CAND;;;AATEE,EAAAA,E;AACAP,EAAAA,O,4BAAS,S,EAAY,U;AACrBQ,EAAAA,I;AACAC,EAAAA,Q;AACAN,EAAAA,M;AACAE,EAAAA,Q;AACAK,EAAAA,S;;eAWaN,S","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { defaultStyle, invertedStyle } from './styling';\n\nconst StyledLink = styled.a<{\n variant: 'default' | 'inverted';\n margin?: string;\n}>`\n cursor: pointer;\n ${(props) => (props.variant === 'inverted' ? invertedStyle : defaultStyle)}\n ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n`;\n\nexport interface HyperlinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {\n id?: string;\n variant: 'default' | 'inverted';\n href: string;\n disabled?: boolean;\n margin?: string;\n children?: any;\n className?: string;\n}\n\nconst HyperLink: React.FunctionComponent<HyperlinkProps> = ({ children, target = '_blank', variant = 'default', ...props }: HyperlinkProps) => {\n return (\n <StyledLink {...props} variant={variant} target={target} rel=\"noopener noreferrer\">\n {children}\n </StyledLink>\n );\n};\n\nexport default HyperLink;\n"],"file":"HyperLink.cjs"}
1
+ {"version":3,"sources":["../../src/HyperLink/HyperLink.tsx"],"names":["StyledLink","styled","a","props","variant","invertedStyle","defaultStyle","margin","HyperLink","children","target","id","href","disabled","className"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;;;;;;;;;;;;;;;AAEO,IAAMA,UAAU,GAAGC,0BAAOC,CAAV,0HAKnB,UAACC,KAAD;AAAA,SAAYA,KAAK,CAACC,OAAN,KAAkB,UAAlB,GAA+BC,sBAA/B,GAA+CC,qBAA3D;AAAA,CALmB,EAMnB,UAACH,KAAD;AAAA,SAAYA,KAAK,CAACI,MAAN,qBAA0BJ,KAAK,CAACI,MAAhC,SAA4C,EAAxD;AAAA,CANmB,CAAhB;;;;AAmBP,IAAMC,SAAkD,GAAG,SAArDA,SAAqD,OAAoF;AAAA,MAAjFC,QAAiF,QAAjFA,QAAiF;AAAA,yBAAvEC,MAAuE;AAAA,MAAvEA,MAAuE,4BAA9D,QAA8D;AAAA,0BAApDN,OAAoD;AAAA,MAApDA,OAAoD,6BAA1C,SAA0C;AAAA,MAA5BD,KAA4B;AAC7I,sBACE,qBAAC,UAAD,kCAAgBA,KAAhB;AAAuB,IAAA,OAAO,EAAEC,OAAhC;AAAyC,IAAA,MAAM,EAAEM,MAAjD;AAAyD,IAAA,GAAG,EAAC,qBAA7D;AAAA,cACGD;AADH,KADF;AAKD,CAND;;;AATEE,EAAAA,E;AACAP,EAAAA,O,4BAAS,S,EAAY,U;AACrBQ,EAAAA,I;AACAC,EAAAA,Q;AACAN,EAAAA,M;AACAE,EAAAA,Q;AACAK,EAAAA,S;;eAWaN,S","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { defaultStyle, invertedStyle } from './styling';\n\nexport const StyledLink = styled.a<{\n variant: 'default' | 'inverted';\n margin?: string;\n}>`\n cursor: pointer;\n ${(props) => (props.variant === 'inverted' ? invertedStyle : defaultStyle)}\n ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n`;\n\nexport interface HyperlinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {\n id?: string;\n variant: 'default' | 'inverted';\n href: string;\n disabled?: boolean;\n margin?: string;\n children?: any;\n className?: string;\n}\n\nconst HyperLink: React.FunctionComponent<HyperlinkProps> = ({ children, target = '_blank', variant = 'default', ...props }: HyperlinkProps) => {\n return (\n <StyledLink {...props} variant={variant} target={target} rel=\"noopener noreferrer\">\n {children}\n </StyledLink>\n );\n};\n\nexport default HyperLink;\n"],"file":"HyperLink.cjs"}
package/dist/HyperLink/HyperLink.d.ts CHANGED
@@ -1,4 +1,8 @@
1
1
  import * as React from 'react';
2
+ export declare const StyledLink: import("styled-components").StyledComponent<"a", any, {
3
+ variant: 'default' | 'inverted';
4
+ margin?: string | undefined;
5
+ }, never>;
2
6
  export interface HyperlinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
3
7
  id?: string;
4
8
  variant: 'default' | 'inverted';
package/dist/HyperLink/HyperLink.js CHANGED
@@ -14,7 +14,7 @@ import * as React from 'react';
14
14
  import styled from 'styled-components';
15
15
  import { defaultStyle, invertedStyle } from './styling';
16
16
  import { jsx as _jsx } from "react/jsx-runtime";
17
- var StyledLink = styled.a(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n cursor: pointer;\n ", "\n ", "\n"])), function (props) {
17
+ export var StyledLink = styled.a(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n cursor: pointer;\n ", "\n ", "\n"])), function (props) {
18
18
  return props.variant === 'inverted' ? invertedStyle : defaultStyle;
19
19
  }, function (props) {
20
20
  return props.margin ? "margin: ".concat(props.margin, ";") : '';
package/dist/HyperLink/HyperLink.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/HyperLink/HyperLink.tsx"],"names":["React","styled","defaultStyle","invertedStyle","StyledLink","a","props","variant","margin","HyperLink","children","target","id","href","disabled","className"],"mappings":";;;;;;;;;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAASC,YAAT,EAAuBC,aAAvB,QAA4C,WAA5C;;AAEA,IAAMC,UAAU,GAAGH,MAAM,CAACI,CAAV,4GAKZ,UAACC,KAAD;AAAA,SAAYA,KAAK,CAACC,OAAN,KAAkB,UAAlB,GAA+BJ,aAA/B,GAA+CD,YAA3D;AAAA,CALY,EAMZ,UAACI,KAAD;AAAA,SAAYA,KAAK,CAACE,MAAN,qBAA0BF,KAAK,CAACE,MAAhC,SAA4C,EAAxD;AAAA,CANY,CAAhB;;AAmBA,IAAMC,SAAkD,GAAG,SAArDA,SAAqD,OAAoF;AAAA,MAAjFC,QAAiF,QAAjFA,QAAiF;AAAA,yBAAvEC,MAAuE;AAAA,MAAvEA,MAAuE,4BAA9D,QAA8D;AAAA,0BAApDJ,OAAoD;AAAA,MAApDA,OAAoD,6BAA1C,SAA0C;AAAA,MAA5BD,KAA4B;;AAC7I,sBACE,KAAC,UAAD,kCAAgBA,KAAhB;AAAuB,IAAA,OAAO,EAAEC,OAAhC;AAAyC,IAAA,MAAM,EAAEI,MAAjD;AAAyD,IAAA,GAAG,EAAC,qBAA7D;AAAA,cACGD;AADH,KADF;AAKD,CAND;;;AATEE,EAAAA,E;AACAL,EAAAA,O,aAAS,S,EAAY,U;AACrBM,EAAAA,I;AACAC,EAAAA,Q;AACAN,EAAAA,M;AACAE,EAAAA,Q;AACAK,EAAAA,S;;AAWF,eAAeN,SAAf","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { defaultStyle, invertedStyle } from './styling';\n\nconst StyledLink = styled.a<{\n variant: 'default' | 'inverted';\n margin?: string;\n}>`\n cursor: pointer;\n ${(props) => (props.variant === 'inverted' ? invertedStyle : defaultStyle)}\n ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n`;\n\nexport interface HyperlinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {\n id?: string;\n variant: 'default' | 'inverted';\n href: string;\n disabled?: boolean;\n margin?: string;\n children?: any;\n className?: string;\n}\n\nconst HyperLink: React.FunctionComponent<HyperlinkProps> = ({ children, target = '_blank', variant = 'default', ...props }: HyperlinkProps) => {\n return (\n <StyledLink {...props} variant={variant} target={target} rel=\"noopener noreferrer\">\n {children}\n </StyledLink>\n );\n};\n\nexport default HyperLink;\n"],"file":"HyperLink.js"}
1
+ {"version":3,"sources":["../../src/HyperLink/HyperLink.tsx"],"names":["React","styled","defaultStyle","invertedStyle","StyledLink","a","props","variant","margin","HyperLink","children","target","id","href","disabled","className"],"mappings":";;;;;;;;;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAASC,YAAT,EAAuBC,aAAvB,QAA4C,WAA5C;;AAEA,OAAO,IAAMC,UAAU,GAAGH,MAAM,CAACI,CAAV,4GAKnB,UAACC,KAAD;AAAA,SAAYA,KAAK,CAACC,OAAN,KAAkB,UAAlB,GAA+BJ,aAA/B,GAA+CD,YAA3D;AAAA,CALmB,EAMnB,UAACI,KAAD;AAAA,SAAYA,KAAK,CAACE,MAAN,qBAA0BF,KAAK,CAACE,MAAhC,SAA4C,EAAxD;AAAA,CANmB,CAAhB;;AAmBP,IAAMC,SAAkD,GAAG,SAArDA,SAAqD,OAAoF;AAAA,MAAjFC,QAAiF,QAAjFA,QAAiF;AAAA,yBAAvEC,MAAuE;AAAA,MAAvEA,MAAuE,4BAA9D,QAA8D;AAAA,0BAApDJ,OAAoD;AAAA,MAApDA,OAAoD,6BAA1C,SAA0C;AAAA,MAA5BD,KAA4B;;AAC7I,sBACE,KAAC,UAAD,kCAAgBA,KAAhB;AAAuB,IAAA,OAAO,EAAEC,OAAhC;AAAyC,IAAA,MAAM,EAAEI,MAAjD;AAAyD,IAAA,GAAG,EAAC,qBAA7D;AAAA,cACGD;AADH,KADF;AAKD,CAND;;;AATEE,EAAAA,E;AACAL,EAAAA,O,aAAS,S,EAAY,U;AACrBM,EAAAA,I;AACAC,EAAAA,Q;AACAN,EAAAA,M;AACAE,EAAAA,Q;AACAK,EAAAA,S;;AAWF,eAAeN,SAAf","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { defaultStyle, invertedStyle } from './styling';\n\nexport const StyledLink = styled.a<{\n variant: 'default' | 'inverted';\n margin?: string;\n}>`\n cursor: pointer;\n ${(props) => (props.variant === 'inverted' ? invertedStyle : defaultStyle)}\n ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n`;\n\nexport interface HyperlinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {\n id?: string;\n variant: 'default' | 'inverted';\n href: string;\n disabled?: boolean;\n margin?: string;\n children?: any;\n className?: string;\n}\n\nconst HyperLink: React.FunctionComponent<HyperlinkProps> = ({ children, target = '_blank', variant = 'default', ...props }: HyperlinkProps) => {\n return (\n <StyledLink {...props} variant={variant} target={target} rel=\"noopener noreferrer\">\n {children}\n </StyledLink>\n );\n};\n\nexport default HyperLink;\n"],"file":"HyperLink.js"}
package/dist/HyperLink/styling.cjs CHANGED
@@ -15,7 +15,7 @@ var _ = require("..");
15
15
 
16
16
  var _templateObject, _templateObject2;
17
17
 
18
- var defaultStyle = (0, _styledComponents.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n outline: none;\n padding: 2px 0;\n text-decoration-thickness: 2px;\n text-decoration-style: solid;\n text-underline-offset: 2px;\n text-decoration-line: none;\n\n &:link {\n font-weight: 700;\n color: ", ";\n }\n\n &:visited {\n color: ", ";\n }\n\n &:hover,\n &.hover-state {\n color: ", ";\n text-decoration-line: underline;\n }\n\n &:focus,\n &.focus-state {\n border-radius: 2px;\n background: ", ";\n color: ", ";\n }\n\n &:active,\n &.active-state {\n border-radius: 2px;\n background: ", ";\n color: ", ";\n }\n\n\n &:focus:hover,\n &:active:hover,\n &.active-state:hover,\n &.focus-state:hover{\n text-decoration-line: none;\n color: ", ";\n opacity: 0.9;\n }\n"])), _.COLORS.primary_500, _.COLORS.accent1_500, _.COLORS.primary_700, _.COLORS.primary_800, _.COLORS.white, _.COLORS.primary_800, _.COLORS.white, _.COLORS.white);
18
+ var defaultStyle = (0, _styledComponents.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n outline: none;\n padding: 2px 0;\n text-decoration-thickness: 2px;\n text-decoration-style: solid;\n text-underline-offset: 2px;\n text-decoration-line: none;\n\n &:link {\n font-weight: 700;\n color: ", ";\n }\n\n &:visited {\n color: ", ";\n }\n\n &:hover,\n &.hover-state {\n color: ", ";\n text-decoration-line: underline;\n }\n\n &:focus,\n &.focus-state {\n border-radius: 2px;\n background: ", ";\n color: ", ";\n }\n\n &:active,\n &.active-state {\n border-radius: 2px;\n background: ", ";\n color: ", ";\n }\n\n\n &:focus:hover,\n &:active:hover,\n &.active-state:hover,\n &.focus-state:hover{\n text-decoration-line: none;\n color: ", ";\n opacity: 0.9;\n }\n"])), _.COLORS.primary_500, _.COLORS.primary_400, _.COLORS.primary_700, _.COLORS.primary_800, _.COLORS.white, _.COLORS.primary_800, _.COLORS.white, _.COLORS.white);
19
19
  exports.defaultStyle = defaultStyle;
20
20
  var invertedStyle = (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n outline: none;\n padding: 2px 0;\n\n text-decoration-thickness: 2px;\n text-decoration-style: solid;\n text-underline-offset: 2px;\n text-decoration-line: underline;\n\n &:link {\n font-weight: 700;\n color: ", ";\n }\n\n &:visited {\n color: ", ";\n }\n\n &:focus,\n &.focus-state {\n border-radius: 2px;\n text-decoration-line: none;\n background: ", ";\n color: ", ";\n }\n\n &:hover,\n &.hover-state {\n text-decoration-line: none;\n }\n\n &:active,\n &.active-state {\n border-radius: 2px;\n text-decoration-line: none;\n background: ", ";\n color: ", ";\n }\n\n &:focus:hover,\n &:active:hover {\n text-decoration-line: none;\n color: ", ";\n opacity: 0.9;\n }\n"])), _.COLORS.white, _.COLORS.neutral_100, _.COLORS.white, _.COLORS.neutral_800, _.COLORS.white, _.COLORS.neutral_800, _.COLORS.neutral_800);
21
21
  exports.invertedStyle = invertedStyle;
package/dist/HyperLink/styling.cjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/HyperLink/styling.ts"],"names":["defaultStyle","css","COLORS","primary_500","accent1_500","primary_700","primary_800","white","invertedStyle","neutral_100","neutral_800"],"mappings":";;;;;;;;;;;AAAA;;AACA;;;;AAEO,IAAMA,YAAY,OAAGC,qBAAH,uzBAUZC,SAAOC,WAVK,EAcZD,SAAOE,WAdK,EAmBZF,SAAOG,WAnBK,EA0BPH,SAAOI,WA1BA,EA2BZJ,SAAOK,KA3BK,EAiCPL,SAAOI,WAjCA,EAkCZJ,SAAOK,KAlCK,EA2CZL,SAAOK,KA3CK,CAAlB;;AAgDA,IAAMC,aAAa,OAAGP,qBAAH,yzBAWbC,SAAOK,KAXM,EAebL,SAAOO,WAfM,EAsBRP,SAAOK,KAtBC,EAuBbL,SAAOQ,WAvBM,EAmCRR,SAAOK,KAnCC,EAoCbL,SAAOQ,WApCM,EA0CbR,SAAOQ,WA1CM,CAAnB","sourcesContent":["import { css } from 'styled-components';\nimport { COLORS } from '..';\n\nexport const defaultStyle = css`\n outline: none;\n padding: 2px 0;\n text-decoration-thickness: 2px;\n text-decoration-style: solid;\n text-underline-offset: 2px;\n text-decoration-line: none;\n\n &:link {\n font-weight: 700;\n color: ${COLORS.primary_500};\n }\n\n &:visited {\n color: ${COLORS.accent1_500};\n }\n\n &:hover,\n &.hover-state {\n color: ${COLORS.primary_700};\n text-decoration-line: underline;\n }\n\n &:focus,\n &.focus-state {\n border-radius: 2px;\n background: ${COLORS.primary_800};\n color: ${COLORS.white};\n }\n\n &:active,\n &.active-state {\n border-radius: 2px;\n background: ${COLORS.primary_800};\n color: ${COLORS.white};\n }\n\n\n &:focus:hover,\n &:active:hover,\n &.active-state:hover,\n &.focus-state:hover{\n text-decoration-line: none;\n color: ${COLORS.white};\n opacity: 0.9;\n }\n`;\n\nexport const invertedStyle = css`\n outline: none;\n padding: 2px 0;\n\n text-decoration-thickness: 2px;\n text-decoration-style: solid;\n text-underline-offset: 2px;\n text-decoration-line: underline;\n\n &:link {\n font-weight: 700;\n color: ${COLORS.white};\n }\n\n &:visited {\n color: ${COLORS.neutral_100};\n }\n\n &:focus,\n &.focus-state {\n border-radius: 2px;\n text-decoration-line: none;\n background: ${COLORS.white};\n color: ${COLORS.neutral_800};\n }\n\n &:hover,\n &.hover-state {\n text-decoration-line: none;\n }\n\n &:active,\n &.active-state {\n border-radius: 2px;\n text-decoration-line: none;\n background: ${COLORS.white};\n color: ${COLORS.neutral_800};\n }\n\n &:focus:hover,\n &:active:hover {\n text-decoration-line: none;\n color: ${COLORS.neutral_800};\n opacity: 0.9;\n }\n`;\n"],"file":"styling.cjs"}
1
+ {"version":3,"sources":["../../src/HyperLink/styling.ts"],"names":["defaultStyle","css","COLORS","primary_500","primary_400","primary_700","primary_800","white","invertedStyle","neutral_100","neutral_800"],"mappings":";;;;;;;;;;;AAAA;;AACA;;;;AAEO,IAAMA,YAAY,OAAGC,qBAAH,uzBAUZC,SAAOC,WAVK,EAcZD,SAAOE,WAdK,EAmBZF,SAAOG,WAnBK,EA0BPH,SAAOI,WA1BA,EA2BZJ,SAAOK,KA3BK,EAiCPL,SAAOI,WAjCA,EAkCZJ,SAAOK,KAlCK,EA2CZL,SAAOK,KA3CK,CAAlB;;AAgDA,IAAMC,aAAa,OAAGP,qBAAH,yzBAWbC,SAAOK,KAXM,EAebL,SAAOO,WAfM,EAsBRP,SAAOK,KAtBC,EAuBbL,SAAOQ,WAvBM,EAmCRR,SAAOK,KAnCC,EAoCbL,SAAOQ,WApCM,EA0CbR,SAAOQ,WA1CM,CAAnB","sourcesContent":["import { css } from 'styled-components';\nimport { COLORS } from '..';\n\nexport const defaultStyle = css`\n outline: none;\n padding: 2px 0;\n text-decoration-thickness: 2px;\n text-decoration-style: solid;\n text-underline-offset: 2px;\n text-decoration-line: none;\n\n &:link {\n font-weight: 700;\n color: ${COLORS.primary_500};\n }\n\n &:visited {\n color: ${COLORS.primary_400};\n }\n\n &:hover,\n &.hover-state {\n color: ${COLORS.primary_700};\n text-decoration-line: underline;\n }\n\n &:focus,\n &.focus-state {\n border-radius: 2px;\n background: ${COLORS.primary_800};\n color: ${COLORS.white};\n }\n\n &:active,\n &.active-state {\n border-radius: 2px;\n background: ${COLORS.primary_800};\n color: ${COLORS.white};\n }\n\n\n &:focus:hover,\n &:active:hover,\n &.active-state:hover,\n &.focus-state:hover{\n text-decoration-line: none;\n color: ${COLORS.white};\n opacity: 0.9;\n }\n`;\n\nexport const invertedStyle = css`\n outline: none;\n padding: 2px 0;\n\n text-decoration-thickness: 2px;\n text-decoration-style: solid;\n text-underline-offset: 2px;\n text-decoration-line: underline;\n\n &:link {\n font-weight: 700;\n color: ${COLORS.white};\n }\n\n &:visited {\n color: ${COLORS.neutral_100};\n }\n\n &:focus,\n &.focus-state {\n border-radius: 2px;\n text-decoration-line: none;\n background: ${COLORS.white};\n color: ${COLORS.neutral_800};\n }\n\n &:hover,\n &.hover-state {\n text-decoration-line: none;\n }\n\n &:active,\n &.active-state {\n border-radius: 2px;\n text-decoration-line: none;\n background: ${COLORS.white};\n color: ${COLORS.neutral_800};\n }\n\n &:focus:hover,\n &:active:hover {\n text-decoration-line: none;\n color: ${COLORS.neutral_800};\n opacity: 0.9;\n }\n`;\n"],"file":"styling.cjs"}
package/dist/HyperLink/styling.js CHANGED
@@ -4,6 +4,6 @@ var _templateObject, _templateObject2;
4
4
 
5
5
  import { css } from 'styled-components';
6
6
  import { COLORS } from '..';
7
- export var defaultStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n outline: none;\n padding: 2px 0;\n text-decoration-thickness: 2px;\n text-decoration-style: solid;\n text-underline-offset: 2px;\n text-decoration-line: none;\n\n &:link {\n font-weight: 700;\n color: ", ";\n }\n\n &:visited {\n color: ", ";\n }\n\n &:hover,\n &.hover-state {\n color: ", ";\n text-decoration-line: underline;\n }\n\n &:focus,\n &.focus-state {\n border-radius: 2px;\n background: ", ";\n color: ", ";\n }\n\n &:active,\n &.active-state {\n border-radius: 2px;\n background: ", ";\n color: ", ";\n }\n\n\n &:focus:hover,\n &:active:hover,\n &.active-state:hover,\n &.focus-state:hover{\n text-decoration-line: none;\n color: ", ";\n opacity: 0.9;\n }\n"])), COLORS.primary_500, COLORS.accent1_500, COLORS.primary_700, COLORS.primary_800, COLORS.white, COLORS.primary_800, COLORS.white, COLORS.white);
7
+ export var defaultStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n outline: none;\n padding: 2px 0;\n text-decoration-thickness: 2px;\n text-decoration-style: solid;\n text-underline-offset: 2px;\n text-decoration-line: none;\n\n &:link {\n font-weight: 700;\n color: ", ";\n }\n\n &:visited {\n color: ", ";\n }\n\n &:hover,\n &.hover-state {\n color: ", ";\n text-decoration-line: underline;\n }\n\n &:focus,\n &.focus-state {\n border-radius: 2px;\n background: ", ";\n color: ", ";\n }\n\n &:active,\n &.active-state {\n border-radius: 2px;\n background: ", ";\n color: ", ";\n }\n\n\n &:focus:hover,\n &:active:hover,\n &.active-state:hover,\n &.focus-state:hover{\n text-decoration-line: none;\n color: ", ";\n opacity: 0.9;\n }\n"])), COLORS.primary_500, COLORS.primary_400, COLORS.primary_700, COLORS.primary_800, COLORS.white, COLORS.primary_800, COLORS.white, COLORS.white);
8
8
  export var invertedStyle = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n outline: none;\n padding: 2px 0;\n\n text-decoration-thickness: 2px;\n text-decoration-style: solid;\n text-underline-offset: 2px;\n text-decoration-line: underline;\n\n &:link {\n font-weight: 700;\n color: ", ";\n }\n\n &:visited {\n color: ", ";\n }\n\n &:focus,\n &.focus-state {\n border-radius: 2px;\n text-decoration-line: none;\n background: ", ";\n color: ", ";\n }\n\n &:hover,\n &.hover-state {\n text-decoration-line: none;\n }\n\n &:active,\n &.active-state {\n border-radius: 2px;\n text-decoration-line: none;\n background: ", ";\n color: ", ";\n }\n\n &:focus:hover,\n &:active:hover {\n text-decoration-line: none;\n color: ", ";\n opacity: 0.9;\n }\n"])), COLORS.white, COLORS.neutral_100, COLORS.white, COLORS.neutral_800, COLORS.white, COLORS.neutral_800, COLORS.neutral_800);
9
9
  //# sourceMappingURL=styling.js.map
package/dist/HyperLink/styling.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/HyperLink/styling.ts"],"names":["css","COLORS","defaultStyle","primary_500","accent1_500","primary_700","primary_800","white","invertedStyle","neutral_100","neutral_800"],"mappings":";;;;AAAA,SAASA,GAAT,QAAoB,mBAApB;AACA,SAASC,MAAT,QAAuB,IAAvB;AAEA,OAAO,IAAMC,YAAY,GAAGF,GAAH,wyBAUZC,MAAM,CAACE,WAVK,EAcZF,MAAM,CAACG,WAdK,EAmBZH,MAAM,CAACI,WAnBK,EA0BPJ,MAAM,CAACK,WA1BA,EA2BZL,MAAM,CAACM,KA3BK,EAiCPN,MAAM,CAACK,WAjCA,EAkCZL,MAAM,CAACM,KAlCK,EA2CZN,MAAM,CAACM,KA3CK,CAAlB;AAgDP,OAAO,IAAMC,aAAa,GAAGR,GAAH,0yBAWbC,MAAM,CAACM,KAXM,EAebN,MAAM,CAACQ,WAfM,EAsBRR,MAAM,CAACM,KAtBC,EAuBbN,MAAM,CAACS,WAvBM,EAmCRT,MAAM,CAACM,KAnCC,EAoCbN,MAAM,CAACS,WApCM,EA0CbT,MAAM,CAACS,WA1CM,CAAnB","sourcesContent":["import { css } from 'styled-components';\nimport { COLORS } from '..';\n\nexport const defaultStyle = css`\n outline: none;\n padding: 2px 0;\n text-decoration-thickness: 2px;\n text-decoration-style: solid;\n text-underline-offset: 2px;\n text-decoration-line: none;\n\n &:link {\n font-weight: 700;\n color: ${COLORS.primary_500};\n }\n\n &:visited {\n color: ${COLORS.accent1_500};\n }\n\n &:hover,\n &.hover-state {\n color: ${COLORS.primary_700};\n text-decoration-line: underline;\n }\n\n &:focus,\n &.focus-state {\n border-radius: 2px;\n background: ${COLORS.primary_800};\n color: ${COLORS.white};\n }\n\n &:active,\n &.active-state {\n border-radius: 2px;\n background: ${COLORS.primary_800};\n color: ${COLORS.white};\n }\n\n\n &:focus:hover,\n &:active:hover,\n &.active-state:hover,\n &.focus-state:hover{\n text-decoration-line: none;\n color: ${COLORS.white};\n opacity: 0.9;\n }\n`;\n\nexport const invertedStyle = css`\n outline: none;\n padding: 2px 0;\n\n text-decoration-thickness: 2px;\n text-decoration-style: solid;\n text-underline-offset: 2px;\n text-decoration-line: underline;\n\n &:link {\n font-weight: 700;\n color: ${COLORS.white};\n }\n\n &:visited {\n color: ${COLORS.neutral_100};\n }\n\n &:focus,\n &.focus-state {\n border-radius: 2px;\n text-decoration-line: none;\n background: ${COLORS.white};\n color: ${COLORS.neutral_800};\n }\n\n &:hover,\n &.hover-state {\n text-decoration-line: none;\n }\n\n &:active,\n &.active-state {\n border-radius: 2px;\n text-decoration-line: none;\n background: ${COLORS.white};\n color: ${COLORS.neutral_800};\n }\n\n &:focus:hover,\n &:active:hover {\n text-decoration-line: none;\n color: ${COLORS.neutral_800};\n opacity: 0.9;\n }\n`;\n"],"file":"styling.js"}
1
+ {"version":3,"sources":["../../src/HyperLink/styling.ts"],"names":["css","COLORS","defaultStyle","primary_500","primary_400","primary_700","primary_800","white","invertedStyle","neutral_100","neutral_800"],"mappings":";;;;AAAA,SAASA,GAAT,QAAoB,mBAApB;AACA,SAASC,MAAT,QAAuB,IAAvB;AAEA,OAAO,IAAMC,YAAY,GAAGF,GAAH,wyBAUZC,MAAM,CAACE,WAVK,EAcZF,MAAM,CAACG,WAdK,EAmBZH,MAAM,CAACI,WAnBK,EA0BPJ,MAAM,CAACK,WA1BA,EA2BZL,MAAM,CAACM,KA3BK,EAiCPN,MAAM,CAACK,WAjCA,EAkCZL,MAAM,CAACM,KAlCK,EA2CZN,MAAM,CAACM,KA3CK,CAAlB;AAgDP,OAAO,IAAMC,aAAa,GAAGR,GAAH,0yBAWbC,MAAM,CAACM,KAXM,EAebN,MAAM,CAACQ,WAfM,EAsBRR,MAAM,CAACM,KAtBC,EAuBbN,MAAM,CAACS,WAvBM,EAmCRT,MAAM,CAACM,KAnCC,EAoCbN,MAAM,CAACS,WApCM,EA0CbT,MAAM,CAACS,WA1CM,CAAnB","sourcesContent":["import { css } from 'styled-components';\nimport { COLORS } from '..';\n\nexport const defaultStyle = css`\n outline: none;\n padding: 2px 0;\n text-decoration-thickness: 2px;\n text-decoration-style: solid;\n text-underline-offset: 2px;\n text-decoration-line: none;\n\n &:link {\n font-weight: 700;\n color: ${COLORS.primary_500};\n }\n\n &:visited {\n color: ${COLORS.primary_400};\n }\n\n &:hover,\n &.hover-state {\n color: ${COLORS.primary_700};\n text-decoration-line: underline;\n }\n\n &:focus,\n &.focus-state {\n border-radius: 2px;\n background: ${COLORS.primary_800};\n color: ${COLORS.white};\n }\n\n &:active,\n &.active-state {\n border-radius: 2px;\n background: ${COLORS.primary_800};\n color: ${COLORS.white};\n }\n\n\n &:focus:hover,\n &:active:hover,\n &.active-state:hover,\n &.focus-state:hover{\n text-decoration-line: none;\n color: ${COLORS.white};\n opacity: 0.9;\n }\n`;\n\nexport const invertedStyle = css`\n outline: none;\n padding: 2px 0;\n\n text-decoration-thickness: 2px;\n text-decoration-style: solid;\n text-underline-offset: 2px;\n text-decoration-line: underline;\n\n &:link {\n font-weight: 700;\n color: ${COLORS.white};\n }\n\n &:visited {\n color: ${COLORS.neutral_100};\n }\n\n &:focus,\n &.focus-state {\n border-radius: 2px;\n text-decoration-line: none;\n background: ${COLORS.white};\n color: ${COLORS.neutral_800};\n }\n\n &:hover,\n &.hover-state {\n text-decoration-line: none;\n }\n\n &:active,\n &.active-state {\n border-radius: 2px;\n text-decoration-line: none;\n background: ${COLORS.white};\n color: ${COLORS.neutral_800};\n }\n\n &:focus:hover,\n &:active:hover {\n text-decoration-line: none;\n color: ${COLORS.neutral_800};\n opacity: 0.9;\n }\n`;\n"],"file":"styling.js"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@laerdal/life-react-components",
3
- "version": "1.6.0-dev.6",
3
+ "version": "1.6.0-dev.7.full",
4
4
  "private": false,
5
5
  "author": "Thomas Kalve <thomas.kalve@laerdal.com>",
6
6
  "contributors": [