@laerdal/life-react-components 1.10.3-dev.4 → 1.10.3-dev.6.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 (10) hide show
  1. package/dist/Banners/Banner.cjs +41 -49
  2. package/dist/Banners/Banner.cjs.map +1 -1
  3. package/dist/Banners/Banner.d.ts +1 -2
  4. package/dist/Banners/Banner.js +40 -48
  5. package/dist/Banners/Banner.js.map +1 -1
  6. package/dist/Tag/Tag.cjs +9 -34
  7. package/dist/Tag/Tag.cjs.map +1 -1
  8. package/dist/Tag/Tag.js +9 -34
  9. package/dist/Tag/Tag.js.map +1 -1
  10. package/package.json +1 -1
package/dist/Banners/Banner.cjs CHANGED
@@ -37,7 +37,7 @@ var _HyperLink2 = require("../HyperLink/HyperLink");
37
37
 
38
38
  var _jsxRuntime = require("react/jsx-runtime");
39
39
 
40
- var _excluded = ["size", "type", "children", "bottom", "testId", "linkText", "link", "onClose", "icon", "noIcon", "linkAction", "fullWidth", "className"];
40
+ var _excluded = ["size", "type", "children", "bottom", "testId", "linkText", "link", "onClose", "icon", "noIcon", "linkAction"];
41
41
 
42
42
  var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
43
43
 
@@ -49,7 +49,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
49
49
 
50
50
  function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
51
51
 
52
- 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 border-radius: 4px;\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 \n .full-width-banner{\n margin: 8px;\n }\n"])), function (props) {
52
+ 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) {
53
53
  return props.$type ? props.$type : _styles.COLORS.correct_100;
54
54
  }, _styles.COLORS.black, function (props) {
55
55
  return props.bottom ? 'auto' : '0';
@@ -61,9 +61,9 @@ var BannerContainer = _styledComponents.default.div(_templateObject || (_templat
61
61
  return props.linkFocused;
62
62
  }, _styles.COLORS.white);
63
63
 
64
- 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 \n .full-width-banner & {\n ", " {\n margin: 0 24px;\n }\n ", " {\n margin: 0 48px;\n }\n\n &.medium{\n margin: 0 24px;\n }\n\n &.large{\n margin: 0 48px;\n }\n }\n"])), function (props) {
64
+ 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) {
65
65
  return (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, props.$color);
66
- }, _styles.BREAKPOINTS.MEDIUM, _styles.BREAKPOINTS.LARGE, _styles.BREAKPOINTS.MEDIUM, _styles.BREAKPOINTS.LARGE);
66
+ }, _styles.BREAKPOINTS.MEDIUM, _styles.BREAKPOINTS.LARGE);
67
67
 
68
68
  var ButtonWrapper = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n margin: 0 0 0 auto;\n"])));
69
69
 
@@ -75,8 +75,7 @@ var BannerContentWrapper = _styledComponents.default.div(_templateObject5 || (_t
75
75
 
76
76
  var Banner = function Banner(_ref) {
77
77
  var size = _ref.size,
78
- _ref$type = _ref.type,
79
- type = _ref$type === void 0 ? 'neutral' : _ref$type,
78
+ type = _ref.type,
80
79
  children = _ref.children,
81
80
  bottom = _ref.bottom,
82
81
  testId = _ref.testId,
@@ -86,8 +85,6 @@ var Banner = function Banner(_ref) {
86
85
  icon = _ref.icon,
87
86
  noIcon = _ref.noIcon,
88
87
  linkAction = _ref.linkAction,
89
- fullWidth = _ref.fullWidth,
90
- className = _ref.className,
91
88
  rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
92
89
 
93
90
  var _React$useState = React.useState(window.innerWidth),
@@ -108,48 +105,45 @@ var Banner = function Banner(_ref) {
108
105
  hoverColor: _styles.COLORS.primary_20,
109
106
  closeIconColor: _styles.COLORS.primary_500,
110
107
  icon: _SystemIcons.Tip,
111
- containerType: type,
108
+ containerType: 'neutral',
112
109
  focusBgColor: _styles.COLORS.primary_200,
113
110
  linkVisited: _styles.COLORS.primary_600,
114
111
  linkFocused: _styles.COLORS.primary_800
115
112
  };
116
-
117
- switch (type) {
118
- case 'warning':
119
- bannerParams.typeColor = _styles.COLORS.warning_100;
120
- bannerParams.accentColor = _styles.COLORS.warning_700;
121
- bannerParams.focusBgColor = _styles.COLORS.warning_200;
122
- bannerParams.hoverColor = _styles.COLORS.warning_20;
123
- bannerParams.icon = _SystemIcons.Help;
124
- bannerParams.closeIconColor = _styles.COLORS.warning_500;
125
- bannerParams.linkVisited = _styles.COLORS.warning_800;
126
- bannerParams.linkFocused = _styles.COLORS.warning_800;
127
- break;
128
-
129
- case 'critical':
130
- bannerParams.typeColor = _styles.COLORS.critical_100;
131
- bannerParams.accentColor = _styles.COLORS.critical_700;
132
- bannerParams.focusBgColor = _styles.COLORS.critical_200;
133
- bannerParams.hoverColor = _styles.COLORS.critical_20;
134
- bannerParams.icon = _SystemIcons.TechnicalWarning;
135
- bannerParams.closeIconColor = _styles.COLORS.critical_500;
136
- bannerParams.linkVisited = _styles.COLORS.critical_800;
137
- bannerParams.linkFocused = _styles.COLORS.critical_800;
138
- break;
139
-
140
- case 'positive':
141
- bannerParams.typeColor = _styles.COLORS.correct_100;
142
- bannerParams.accentColor = _styles.COLORS.correct_700;
143
- bannerParams.focusBgColor = _styles.COLORS.correct_200;
144
- bannerParams.hoverColor = _styles.COLORS.correct_20;
145
- bannerParams.icon = _SystemIcons.ThumbsUp;
146
- bannerParams.closeIconColor = _styles.COLORS.correct_500;
147
- bannerParams.linkVisited = _styles.COLORS.correct_800;
148
- bannerParams.linkFocused = _styles.COLORS.correct_800;
149
- break;
113
+ var formatTypeToLowerCase = type === null || type === void 0 ? void 0 : type.toLowerCase();
114
+
115
+ if (formatTypeToLowerCase == 'warning') {
116
+ bannerParams.typeColor = _styles.COLORS.warning_100;
117
+ bannerParams.accentColor = _styles.COLORS.warning_700;
118
+ bannerParams.focusBgColor = _styles.COLORS.warning_200;
119
+ bannerParams.hoverColor = _styles.COLORS.warning_20;
120
+ bannerParams.icon = _SystemIcons.Help;
121
+ bannerParams.closeIconColor = _styles.COLORS.warning_500;
122
+ bannerParams.containerType = formatTypeToLowerCase;
123
+ bannerParams.linkVisited = _styles.COLORS.warning_800;
124
+ bannerParams.linkFocused = _styles.COLORS.warning_800;
125
+ } else if (formatTypeToLowerCase == 'critical') {
126
+ bannerParams.typeColor = _styles.COLORS.critical_100;
127
+ bannerParams.accentColor = _styles.COLORS.critical_700;
128
+ bannerParams.focusBgColor = _styles.COLORS.critical_200;
129
+ bannerParams.hoverColor = _styles.COLORS.critical_20;
130
+ bannerParams.icon = _SystemIcons.TechnicalWarning;
131
+ bannerParams.closeIconColor = _styles.COLORS.critical_500;
132
+ bannerParams.containerType = formatTypeToLowerCase;
133
+ bannerParams.linkVisited = _styles.COLORS.critical_800;
134
+ bannerParams.linkFocused = _styles.COLORS.critical_800;
135
+ } else if (formatTypeToLowerCase == 'positive') {
136
+ bannerParams.typeColor = _styles.COLORS.correct_100;
137
+ bannerParams.accentColor = _styles.COLORS.correct_700;
138
+ bannerParams.focusBgColor = _styles.COLORS.correct_200;
139
+ bannerParams.hoverColor = _styles.COLORS.correct_20;
140
+ bannerParams.icon = _SystemIcons.ThumbsUp;
141
+ bannerParams.closeIconColor = _styles.COLORS.correct_500;
142
+ bannerParams.containerType = formatTypeToLowerCase;
143
+ bannerParams.linkVisited = _styles.COLORS.correct_800;
144
+ bannerParams.linkFocused = _styles.COLORS.correct_800;
150
145
  }
151
146
 
152
- var cls = "".concat(className !== null && className !== void 0 ? className : '', " ").concat(fullWidth ? 'full-width-banner' : '');
153
147
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(BannerContainer, _objectSpread(_objectSpread({
154
148
  "data-testid": testId,
155
149
  $type: bannerParams.typeColor,
@@ -157,8 +151,7 @@ var Banner = function Banner(_ref) {
157
151
  linkVisited: bannerParams.linkVisited,
158
152
  link: bannerParams.accentColor,
159
153
  hover: bannerParams.hoverColor,
160
- bottom: bottom,
161
- className: cls
154
+ bottom: bottom
162
155
  }, rest), {}, {
163
156
  children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(BannerCenter, {
164
157
  $color: bannerParams.accentColor,
@@ -207,7 +200,7 @@ var Banner = function Banner(_ref) {
207
200
  };
208
201
 
209
202
  Banner.propTypes = {
210
- type: _propTypes.default.oneOf(['warning', 'critical', 'positive', 'neutral']),
203
+ type: _propTypes.default.string,
211
204
  link: _propTypes.default.string,
212
205
  linkText: _propTypes.default.string,
213
206
  linkAction: _propTypes.default.func,
@@ -216,8 +209,7 @@ Banner.propTypes = {
216
209
  testId: _propTypes.default.string,
217
210
  icon: _propTypes.default.node,
218
211
  onClose: _propTypes.default.func,
219
- noIcon: _propTypes.default.bool,
220
- fullWidth: _propTypes.default.bool
212
+ noIcon: _propTypes.default.bool
221
213
  };
222
214
  var _default = Banner;
223
215
  exports.default = _default;
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","StyledLink","link","linkVisited","linkFocused","white","BannerCenter","ComponentTextStyle","Regular","$color","ButtonWrapper","ButtonContainer","BannerContentWrapper","Banner","size","type","children","testId","linkText","onClose","icon","noIcon","linkAction","fullWidth","className","rest","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","warning_100","warning_700","warning_200","warning_20","Help","warning_500","warning_800","critical_100","critical_700","critical_200","critical_20","TechnicalWarning","critical_500","critical_800","correct_700","correct_200","correct_20","ThumbsUp","correct_500","correct_800","cls","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';\nimport { HyperLink } from '../HyperLink';\nimport {StyledLink} from '../HyperLink/HyperLink';\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 border-radius: 4px;\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 .full-width-banner{\n margin: 8px;\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 .full-width-banner & {\n ${BREAKPOINTS.MEDIUM} {\n margin: 0 24px;\n }\n ${BREAKPOINTS.LARGE} {\n margin: 0 48px;\n }\n\n &.medium{\n margin: 0 24px;\n }\n\n &.large{\n margin: 0 48px;\n }\n }\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 = React.HTMLAttributes<HTMLDivElement> & {\n size?: Size.Small | Size.Medium | Size.Large;\n type?: 'warning' | 'critical' | 'positive' | 'neutral';\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 fullWidth?: boolean;\n};\n\nconst Banner: React.FunctionComponent<BannerProps> = ({\n size,\n type = 'neutral',\n children,\n bottom,\n testId,\n linkText,\n link,\n onClose,\n icon,\n noIcon,\n linkAction,\n fullWidth,\n className,\n ...rest\n }) => {\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: type,\n focusBgColor: COLORS.primary_200,\n linkVisited: COLORS.primary_600,\n linkFocused: COLORS.primary_800\n };\n switch (type) {\n case '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.linkVisited = COLORS.warning_800;\n bannerParams.linkFocused = COLORS.warning_800;\n break;\n case '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.linkVisited = COLORS.critical_800;\n bannerParams.linkFocused = COLORS.critical_800;\n break;\n case '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.linkVisited = COLORS.correct_800;\n bannerParams.linkFocused = COLORS.correct_800;\n break;\n }\n \n const cls = `${className ?? ''} ${fullWidth ? 'full-width-banner' : ''}`;\n\n return (\n <BannerContainer data-testid={testId}\n $type={bannerParams.typeColor}\n linkFocused={bannerParams.linkFocused}\n linkVisited={bannerParams.linkVisited}\n link={bannerParams.accentColor}\n hover={bannerParams.hoverColor}\n bottom={bottom}\n className={cls}\n {...rest}>\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"}
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","rest","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_800","critical_100","critical_700","critical_200","critical_20","TechnicalWarning","critical_500","critical_800","correct_700","correct_200","correct_20","ThumbsUp","correct_500","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';\nimport { HyperLink } from '../HyperLink';\nimport {StyledLink} from '../HyperLink/HyperLink';\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 = React.HTMLAttributes<HTMLDivElement> & {\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> = ({\n size,\n type,\n children,\n bottom,\n testId,\n linkText,\n link,\n onClose,\n icon,\n noIcon,\n linkAction,\n ...rest\n }) => {\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_800;\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_800;\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_800;\n bannerParams.linkFocused = COLORS.correct_800;\n }\n\n return (\n <BannerContainer data-testid={testId}\n $type={bannerParams.typeColor}\n linkFocused={bannerParams.linkFocused}\n linkVisited={bannerParams.linkVisited}\n link={bannerParams.accentColor}\n hover={bannerParams.hoverColor}\n bottom={bottom}\n {...rest}>\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.d.ts CHANGED
@@ -2,7 +2,7 @@ import * as React from 'react';
2
2
  import { Size } from '../types';
3
3
  declare type BannerProps = React.HTMLAttributes<HTMLDivElement> & {
4
4
  size?: Size.Small | Size.Medium | Size.Large;
5
- type?: 'warning' | 'critical' | 'positive' | 'neutral';
5
+ type?: string;
6
6
  link?: string;
7
7
  linkText?: string;
8
8
  linkAction?: (ev: React.MouseEvent) => void;
@@ -12,7 +12,6 @@ declare type BannerProps = React.HTMLAttributes<HTMLDivElement> & {
12
12
  icon?: React.ReactNode;
13
13
  onClose?: () => void;
14
14
  noIcon?: boolean;
15
- fullWidth?: boolean;
16
15
  };
17
16
  declare const Banner: React.FunctionComponent<BannerProps>;
18
17
  export default Banner;
package/dist/Banners/Banner.js CHANGED
@@ -3,7 +3,7 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
3
3
  import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
4
4
  import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
5
5
  import _pt from "prop-types";
6
- var _excluded = ["size", "type", "children", "bottom", "testId", "linkText", "link", "onClose", "icon", "noIcon", "linkAction", "fullWidth", "className"];
6
+ var _excluded = ["size", "type", "children", "bottom", "testId", "linkText", "link", "onClose", "icon", "noIcon", "linkAction"];
7
7
 
8
8
  var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
9
9
 
@@ -26,7 +26,7 @@ import { StyledLink } from '../HyperLink/HyperLink';
26
26
 
27
27
  import { jsx as _jsx } from "react/jsx-runtime";
28
28
  import { jsxs as _jsxs } from "react/jsx-runtime";
29
- var BannerContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n background: ", ";\n min-height: 48px;\n display: flex;\n color: ", ";\n margin-top: ", ";\n border-radius: 4px;\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 \n .full-width-banner{\n margin: 8px;\n }\n"])), function (props) {
29
+ 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) {
30
30
  return props.$type ? props.$type : COLORS.correct_100;
31
31
  }, COLORS.black, function (props) {
32
32
  return props.bottom ? 'auto' : '0';
@@ -37,9 +37,9 @@ var BannerContainer = styled.div(_templateObject || (_templateObject = _taggedTe
37
37
  }, function (props) {
38
38
  return props.linkFocused;
39
39
  }, COLORS.white);
40
- 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 \n .full-width-banner & {\n ", " {\n margin: 0 24px;\n }\n ", " {\n margin: 0 48px;\n }\n\n &.medium{\n margin: 0 24px;\n }\n\n &.large{\n margin: 0 48px;\n }\n }\n"])), function (props) {
40
+ 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) {
41
41
  return ComponentMStyling(ComponentTextStyle.Regular, props.$color);
42
- }, BREAKPOINTS.MEDIUM, BREAKPOINTS.LARGE, BREAKPOINTS.MEDIUM, BREAKPOINTS.LARGE);
42
+ }, BREAKPOINTS.MEDIUM, BREAKPOINTS.LARGE);
43
43
  var ButtonWrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n margin: 0 0 0 auto;\n"])));
44
44
  var ButtonContainer = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n display: contents;\n ", ";\n"])), function (props) {
45
45
  return props.$type ? getButtonStyle(props.$type) : null;
@@ -48,8 +48,7 @@ var BannerContentWrapper = styled.div(_templateObject5 || (_templateObject5 = _t
48
48
 
49
49
  var Banner = function Banner(_ref) {
50
50
  var size = _ref.size,
51
- _ref$type = _ref.type,
52
- type = _ref$type === void 0 ? 'neutral' : _ref$type,
51
+ type = _ref.type,
53
52
  children = _ref.children,
54
53
  bottom = _ref.bottom,
55
54
  testId = _ref.testId,
@@ -59,8 +58,6 @@ var Banner = function Banner(_ref) {
59
58
  icon = _ref.icon,
60
59
  noIcon = _ref.noIcon,
61
60
  linkAction = _ref.linkAction,
62
- fullWidth = _ref.fullWidth,
63
- className = _ref.className,
64
61
  rest = _objectWithoutProperties(_ref, _excluded);
65
62
 
66
63
  var _React$useState = React.useState(window.innerWidth),
@@ -81,48 +78,45 @@ var Banner = function Banner(_ref) {
81
78
  hoverColor: COLORS.primary_20,
82
79
  closeIconColor: COLORS.primary_500,
83
80
  icon: Tip,
84
- containerType: type,
81
+ containerType: 'neutral',
85
82
  focusBgColor: COLORS.primary_200,
86
83
  linkVisited: COLORS.primary_600,
87
84
  linkFocused: COLORS.primary_800
88
85
  };
86
+ var formatTypeToLowerCase = type === null || type === void 0 ? void 0 : type.toLowerCase();
89
87
 
90
- switch (type) {
91
- case 'warning':
92
- bannerParams.typeColor = COLORS.warning_100;
93
- bannerParams.accentColor = COLORS.warning_700;
94
- bannerParams.focusBgColor = COLORS.warning_200;
95
- bannerParams.hoverColor = COLORS.warning_20;
96
- bannerParams.icon = Help;
97
- bannerParams.closeIconColor = COLORS.warning_500;
98
- bannerParams.linkVisited = COLORS.warning_800;
99
- bannerParams.linkFocused = COLORS.warning_800;
100
- break;
101
-
102
- case 'critical':
103
- bannerParams.typeColor = COLORS.critical_100;
104
- bannerParams.accentColor = COLORS.critical_700;
105
- bannerParams.focusBgColor = COLORS.critical_200;
106
- bannerParams.hoverColor = COLORS.critical_20;
107
- bannerParams.icon = TechnicalWarning;
108
- bannerParams.closeIconColor = COLORS.critical_500;
109
- bannerParams.linkVisited = COLORS.critical_800;
110
- bannerParams.linkFocused = COLORS.critical_800;
111
- break;
112
-
113
- case 'positive':
114
- bannerParams.typeColor = COLORS.correct_100;
115
- bannerParams.accentColor = COLORS.correct_700;
116
- bannerParams.focusBgColor = COLORS.correct_200;
117
- bannerParams.hoverColor = COLORS.correct_20;
118
- bannerParams.icon = ThumbsUp;
119
- bannerParams.closeIconColor = COLORS.correct_500;
120
- bannerParams.linkVisited = COLORS.correct_800;
121
- bannerParams.linkFocused = COLORS.correct_800;
122
- break;
88
+ if (formatTypeToLowerCase == 'warning') {
89
+ bannerParams.typeColor = COLORS.warning_100;
90
+ bannerParams.accentColor = COLORS.warning_700;
91
+ bannerParams.focusBgColor = COLORS.warning_200;
92
+ bannerParams.hoverColor = COLORS.warning_20;
93
+ bannerParams.icon = Help;
94
+ bannerParams.closeIconColor = COLORS.warning_500;
95
+ bannerParams.containerType = formatTypeToLowerCase;
96
+ bannerParams.linkVisited = COLORS.warning_800;
97
+ bannerParams.linkFocused = COLORS.warning_800;
98
+ } else if (formatTypeToLowerCase == 'critical') {
99
+ bannerParams.typeColor = COLORS.critical_100;
100
+ bannerParams.accentColor = COLORS.critical_700;
101
+ bannerParams.focusBgColor = COLORS.critical_200;
102
+ bannerParams.hoverColor = COLORS.critical_20;
103
+ bannerParams.icon = TechnicalWarning;
104
+ bannerParams.closeIconColor = COLORS.critical_500;
105
+ bannerParams.containerType = formatTypeToLowerCase;
106
+ bannerParams.linkVisited = COLORS.critical_800;
107
+ bannerParams.linkFocused = COLORS.critical_800;
108
+ } else if (formatTypeToLowerCase == 'positive') {
109
+ bannerParams.typeColor = COLORS.correct_100;
110
+ bannerParams.accentColor = COLORS.correct_700;
111
+ bannerParams.focusBgColor = COLORS.correct_200;
112
+ bannerParams.hoverColor = COLORS.correct_20;
113
+ bannerParams.icon = ThumbsUp;
114
+ bannerParams.closeIconColor = COLORS.correct_500;
115
+ bannerParams.containerType = formatTypeToLowerCase;
116
+ bannerParams.linkVisited = COLORS.correct_800;
117
+ bannerParams.linkFocused = COLORS.correct_800;
123
118
  }
124
119
 
125
- var cls = "".concat(className !== null && className !== void 0 ? className : '', " ").concat(fullWidth ? 'full-width-banner' : '');
126
120
  return /*#__PURE__*/_jsx(BannerContainer, _objectSpread(_objectSpread({
127
121
  "data-testid": testId,
128
122
  $type: bannerParams.typeColor,
@@ -130,8 +124,7 @@ var Banner = function Banner(_ref) {
130
124
  linkVisited: bannerParams.linkVisited,
131
125
  link: bannerParams.accentColor,
132
126
  hover: bannerParams.hoverColor,
133
- bottom: bottom,
134
- className: cls
127
+ bottom: bottom
135
128
  }, rest), {}, {
136
129
  children: /*#__PURE__*/_jsxs(BannerCenter, {
137
130
  $color: bannerParams.accentColor,
@@ -180,7 +173,7 @@ var Banner = function Banner(_ref) {
180
173
  };
181
174
 
182
175
  Banner.propTypes = {
183
- type: _pt.oneOf(['warning', 'critical', 'positive', 'neutral']),
176
+ type: _pt.string,
184
177
  link: _pt.string,
185
178
  linkText: _pt.string,
186
179
  linkAction: _pt.func,
@@ -189,8 +182,7 @@ Banner.propTypes = {
189
182
  testId: _pt.string,
190
183
  icon: _pt.node,
191
184
  onClose: _pt.func,
192
- noIcon: _pt.bool,
193
- fullWidth: _pt.bool
185
+ noIcon: _pt.bool
194
186
  };
195
187
  export default Banner;
196
188
  //# sourceMappingURL=Banner.js.map
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","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","fullWidth","className","rest","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","warning_100","warning_700","warning_200","warning_20","warning_500","warning_800","critical_100","critical_700","critical_200","critical_20","critical_500","critical_800","correct_700","correct_200","correct_20","correct_500","correct_800","cls","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';\nimport { HyperLink } from '../HyperLink';\nimport {StyledLink} from '../HyperLink/HyperLink';\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 border-radius: 4px;\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 .full-width-banner{\n margin: 8px;\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 .full-width-banner & {\n ${BREAKPOINTS.MEDIUM} {\n margin: 0 24px;\n }\n ${BREAKPOINTS.LARGE} {\n margin: 0 48px;\n }\n\n &.medium{\n margin: 0 24px;\n }\n\n &.large{\n margin: 0 48px;\n }\n }\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 = React.HTMLAttributes<HTMLDivElement> & {\n size?: Size.Small | Size.Medium | Size.Large;\n type?: 'warning' | 'critical' | 'positive' | 'neutral';\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 fullWidth?: boolean;\n};\n\nconst Banner: React.FunctionComponent<BannerProps> = ({\n size,\n type = 'neutral',\n children,\n bottom,\n testId,\n linkText,\n link,\n onClose,\n icon,\n noIcon,\n linkAction,\n fullWidth,\n className,\n ...rest\n }) => {\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: type,\n focusBgColor: COLORS.primary_200,\n linkVisited: COLORS.primary_600,\n linkFocused: COLORS.primary_800\n };\n switch (type) {\n case '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.linkVisited = COLORS.warning_800;\n bannerParams.linkFocused = COLORS.warning_800;\n break;\n case '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.linkVisited = COLORS.critical_800;\n bannerParams.linkFocused = COLORS.critical_800;\n break;\n case '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.linkVisited = COLORS.correct_800;\n bannerParams.linkFocused = COLORS.correct_800;\n break;\n }\n \n const cls = `${className ?? ''} ${fullWidth ? 'full-width-banner' : ''}`;\n\n return (\n <BannerContainer data-testid={testId}\n $type={bannerParams.typeColor}\n linkFocused={bannerParams.linkFocused}\n linkVisited={bannerParams.linkVisited}\n link={bannerParams.accentColor}\n hover={bannerParams.hoverColor}\n bottom={bottom}\n className={cls}\n {...rest}>\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"}
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","rest","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_800","critical_100","critical_700","critical_200","critical_20","critical_500","critical_800","correct_700","correct_200","correct_20","correct_500","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';\nimport { HyperLink } from '../HyperLink';\nimport {StyledLink} from '../HyperLink/HyperLink';\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 = React.HTMLAttributes<HTMLDivElement> & {\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> = ({\n size,\n type,\n children,\n bottom,\n testId,\n linkText,\n link,\n onClose,\n icon,\n noIcon,\n linkAction,\n ...rest\n }) => {\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_800;\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_800;\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_800;\n bannerParams.linkFocused = COLORS.correct_800;\n }\n\n return (\n <BannerContainer data-testid={testId}\n $type={bannerParams.typeColor}\n linkFocused={bannerParams.linkFocused}\n linkVisited={bannerParams.linkVisited}\n link={bannerParams.accentColor}\n hover={bannerParams.hoverColor}\n bottom={bottom}\n {...rest}>\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/Tag/Tag.cjs CHANGED
@@ -25,7 +25,7 @@ var _ = require("..");
25
25
 
26
26
  var _jsxRuntime = require("react/jsx-runtime");
27
27
 
28
- var _excluded = ["label", "icon", "variant"];
28
+ var _excluded = ["label", "icon", "variant", "className"];
29
29
 
30
30
  var _templateObject, _templateObject2, _templateObject3;
31
31
 
@@ -37,53 +37,28 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
37
37
 
38
38
  function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
39
39
 
40
- var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n height: 24px;\n width: calc(100%);\n max-width: fit-content;\n min-width: ", ";\n border-radius: 2px;\n background: ", ";\n"])), function (props) {
40
+ var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n height: 24px;\n width: calc(100%);\n max-width: fit-content;\n min-width: ", ";\n border-radius: 2px;\n\n &.neutral {\n background-color: ", ";\n color: ", ";\n }\n &.positive {\n background-color: ", ";\n color: ", ";\n }\n &.warning {\n background-color: ", ";\n color: ", ";\n }\n &.critical {\n background-color: ", ";\n color: ", ";\n }\n &.accent1 {\n background-color: ", ";\n color: ", ";\n }\n &.accent2 {\n background-color: ", ";\n color: ", ";\n }\n\n"])), function (props) {
41
41
  return props.isLabelPresent ? '64px' : '';
42
- }, function (props) {
43
- return getBackgroundColor(props.variant);
44
- });
42
+ }, _.COLORS.neutral_100, _.COLORS.neutral_600, _.COLORS.correct_100, _.COLORS.correct_600, _.COLORS.warning_100, _.COLORS.warning_600, _.COLORS.critical_100, _.COLORS.critical_600, _.COLORS.accent1_100, _.COLORS.accent1_600, _.COLORS.accent2_100, _.COLORS.accent2_600);
45
43
 
46
- var IconContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n border-radius: 2px;\n margin: 4px;\n svg {\n width: 16px;\n height: 16px;\n color: ", ";\n }\n"])), function (props) {
47
- return props.variant === 'neutral' ? _.COLORS.neutral_600 : _.COLORS.white;
48
- });
44
+ var IconContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n border-radius: 2px;\n margin: 4px;\n svg {\n width: 16px;\n height: 16px;\n }\n"])));
49
45
 
50
- var TextContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n color: ", ";\n border-radius: 2px;\n margin: ", ";\n height: 16px;\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden; \n ", "\n"])), function (props) {
51
- return props.variant === 'neutral' ? _.COLORS.neutral_600 : _.COLORS.white;
52
- }, function (props) {
46
+ var TextContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n border-radius: 2px;\n margin: ", ";\n height: 16px;\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden; \n ", "\n"])), function (props) {
53
47
  return props.icon ? "4px 8px 4px 0" : "4px 8px";
54
48
  }, (0, _.ComponentXSStyling)(_.ComponentTextStyle.Bold, null));
55
49
 
56
- var getBackgroundColor = function getBackgroundColor(variant) {
57
- switch (variant) {
58
- case 'positive':
59
- return _.COLORS.correct_500;
60
-
61
- case 'warning':
62
- return _.COLORS.warning_500;
63
-
64
- case 'critical':
65
- return _.COLORS.critical_500;
66
-
67
- case 'accent1':
68
- return _.COLORS.accent1_500;
69
-
70
- case 'accent2':
71
- return _.COLORS.accent2_500;
72
-
73
- default:
74
- return _.COLORS.neutral_100;
75
- }
76
- };
77
-
78
50
  var Tag = function Tag(_ref) {
79
51
  var label = _ref.label,
80
52
  icon = _ref.icon,
81
53
  _ref$variant = _ref.variant,
82
54
  variant = _ref$variant === void 0 ? 'neutral' : _ref$variant,
55
+ className = _ref.className,
83
56
  rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
57
+ var cls = "".concat(className !== null && className !== void 0 ? className : '', " ").concat(variant);
84
58
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Container, _objectSpread(_objectSpread({
85
59
  variant: variant,
86
- isLabelPresent: !!label
60
+ isLabelPresent: !!label,
61
+ className: cls
87
62
  }, rest), {}, {
88
63
  children: [icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(IconContainer, {
89
64
  variant: variant,
package/dist/Tag/Tag.cjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/Tag/Tag.tsx"],"names":["Container","styled","div","props","isLabelPresent","getBackgroundColor","variant","IconContainer","COLORS","neutral_600","white","TextContainer","icon","ComponentTextStyle","Bold","correct_500","warning_500","critical_500","accent1_500","accent2_500","neutral_100","Tag","label","rest"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;;;;;;;;;;;;;;;AAEA,IAAMA,SAAS,GAAGC,0BAAOC,GAAV,0OAKA,UAAAC,KAAK;AAAA,SAAEA,KAAK,CAACC,cAAN,GAAuB,MAAvB,GAAgC,EAAlC;AAAA,CALL,EAOC,UAAAD,KAAK;AAAA,SAAGE,kBAAkB,CAACF,KAAK,CAACG,OAAP,CAArB;AAAA,CAPN,CAAf;;AAUA,IAAMC,aAAa,GAAGN,0BAAOC,GAAV,oMAMN,UAAAC,KAAK;AAAA,SAAGA,KAAK,CAACG,OAAN,KAAkB,SAAlB,GAA8BE,SAAOC,WAArC,GAAmDD,SAAOE,KAA7D;AAAA,CANC,CAAnB;;AAUA,IAAMC,aAAa,GAAGV,0BAAOC,GAAV,oPACR,UAAAC,KAAK;AAAA,SAAGA,KAAK,CAACG,OAAN,KAAkB,SAAlB,GAA8BE,SAAOC,WAArC,GAAmDD,SAAOE,KAA7D;AAAA,CADG,EAGP,UAAAP,KAAK;AAAA,SAAGA,KAAK,CAACS,IAAN,8BAAH;AAAA,CAHE,EAQf,0BAAmBC,qBAAmBC,IAAtC,EAA4C,IAA5C,CARe,CAAnB;;AAWA,IAAMT,kBAAkB,GAAG,SAArBA,kBAAqB,CAACC,OAAD,EAA0B;AACnD,UAAOA,OAAP;AACE,SAAK,UAAL;AAAiB,aAAOE,SAAOO,WAAd;;AACjB,SAAK,SAAL;AAAiB,aAAOP,SAAOQ,WAAd;;AACjB,SAAK,UAAL;AAAiB,aAAOR,SAAOS,YAAd;;AACjB,SAAK,SAAL;AAAgB,aAAOT,SAAOU,WAAd;;AAChB,SAAK,SAAL;AAAgB,aAAOV,SAAOW,WAAd;;AAChB;AAAS,aAAOX,SAAOY,WAAd;AANX;AAQD,CATD;;AAmBA,IAAMC,GAAsC,GAAG,SAAzCA,GAAyC,OAA+C;AAAA,MAA7CC,KAA6C,QAA7CA,KAA6C;AAAA,MAAtCV,IAAsC,QAAtCA,IAAsC;AAAA,0BAAhCN,OAAgC;AAAA,MAAhCA,OAAgC,6BAAxB,SAAwB;AAAA,MAAViB,IAAU;AAC5F,sBACE,sBAAC,SAAD;AAAW,IAAA,OAAO,EAAEjB,OAApB;AAA6B,IAAA,cAAc,EAAE,CAAC,CAACgB;AAA/C,KAA0DC,IAA1D;AAAA,eACGX,IAAI,iBAAI,qBAAC,aAAD;AAAe,MAAA,OAAO,EAAEN,OAAxB;AAAiC,qBAAa,eAA9C;AAAA,gBACJM;AADI,MADX,EAKGU,KAAK,iBAAI,qBAAC,aAAD;AAAe,MAAA,OAAO,EAAEhB,OAAxB;AAAiC,MAAA,IAAI,EAAEM,IAAvC;AAAA,gBACLU;AADK,MALZ;AAAA,KADF;AAYD,CAbD;;;AALEA,EAAAA,K;AACAV,EAAAA,I;AACAN,EAAAA,O,4BALwB,S,EAAY,U,EAAa,S,EAAY,U,EAAa,S,EAAY,S;;eAuBzEe,G","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { COLORS, ComponentTextStyle, ComponentXSStyling } from '..';\n\nconst Container = styled.div<{variant: TagVariants, isLabelPresent: boolean}>`\n display: flex;\n height: 24px;\n width: calc(100%);\n max-width: fit-content;\n min-width: ${props=>props.isLabelPresent ? '64px' : ''};\n border-radius: 2px;\n background: ${props=> getBackgroundColor(props.variant)};\n`;\n\nconst IconContainer = styled.div<{variant: TagVariants}>`\n border-radius: 2px;\n margin: 4px;\n svg {\n width: 16px;\n height: 16px;\n color: ${props=> props.variant === 'neutral' ? COLORS.neutral_600 : COLORS.white};\n }\n`;\n\nconst TextContainer = styled.div<{variant: TagVariants, icon: React.ReactNode}>`\n color: ${props=> props.variant === 'neutral' ? COLORS.neutral_600 : COLORS.white};\n border-radius: 2px;\n margin: ${props=> props.icon ? `4px 8px 4px 0` : `4px 8px`};\n height: 16px;\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden; \n ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\n`;\n\nconst getBackgroundColor = (variant: TagVariants) => {\n switch(variant){\n case 'positive': return COLORS.correct_500;\n case 'warning' : return COLORS.warning_500;\n case 'critical': return COLORS.critical_500;\n case 'accent1': return COLORS.accent1_500;\n case 'accent2': return COLORS.accent2_500;\n default: return COLORS.neutral_100;\n }\n}\n\nexport type TagVariants = 'neutral' | 'positive' | 'warning' | 'critical' | 'accent1' | 'accent2';\n\ntype TagProps = React.HTMLAttributes<HTMLDivElement> & {\n label?: string;\n icon?: React.ReactNode;\n variant?: TagVariants;\n}\n\nconst Tag: React.FunctionComponent<TagProps> = ({label, icon, variant='neutral', ...rest}) => {\n return ( \n <Container variant={variant} isLabelPresent={!!label} {...rest}>\n {icon && <IconContainer variant={variant} data-testid={'iconContainer'}>\n {icon}\n </IconContainer>\n }\n {label && <TextContainer variant={variant} icon={icon}>\n {label}\n </TextContainer>\n }\n </Container>\n );\n};\n\nexport default Tag;\n"],"file":"Tag.cjs"}
1
+ {"version":3,"sources":["../../src/Tag/Tag.tsx"],"names":["Container","styled","div","props","isLabelPresent","COLORS","neutral_100","neutral_600","correct_100","correct_600","warning_100","warning_600","critical_100","critical_600","accent1_100","accent1_600","accent2_100","accent2_600","IconContainer","TextContainer","icon","ComponentTextStyle","Bold","Tag","label","variant","className","rest","cls"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;;;;;;;;;;;;;;;AAEA,IAAMA,SAAS,GAAGC,0BAAOC,GAAV,6mBAKA,UAAAC,KAAK;AAAA,SAAEA,KAAK,CAACC,cAAN,GAAuB,MAAvB,GAAgC,EAAlC;AAAA,CALL,EASSC,SAAOC,WAThB,EAUFD,SAAOE,WAVL,EAaSF,SAAOG,WAbhB,EAcFH,SAAOI,WAdL,EAiBSJ,SAAOK,WAjBhB,EAkBFL,SAAOM,WAlBL,EAqBSN,SAAOO,YArBhB,EAsBFP,SAAOQ,YAtBL,EAyBSR,SAAOS,WAzBhB,EA0BFT,SAAOU,WA1BL,EA6BSV,SAAOW,WA7BhB,EA8BFX,SAAOY,WA9BL,CAAf;;AAmCA,IAAMC,aAAa,GAAGjB,0BAAOC,GAAV,iLAAnB;;AASA,IAAMiB,aAAa,GAAGlB,0BAAOC,GAAV,oOAEP,UAAAC,KAAK;AAAA,SAAGA,KAAK,CAACiB,IAAN,8BAAH;AAAA,CAFE,EAOf,0BAAmBC,qBAAmBC,IAAtC,EAA4C,IAA5C,CAPe,CAAnB;;AAmBA,IAAMC,GAAsC,GAAG,SAAzCA,GAAyC,OAA0D;AAAA,MAAxDC,KAAwD,QAAxDA,KAAwD;AAAA,MAAjDJ,IAAiD,QAAjDA,IAAiD;AAAA,0BAA3CK,OAA2C;AAAA,MAA3CA,OAA2C,6BAAnC,SAAmC;AAAA,MAAxBC,SAAwB,QAAxBA,SAAwB;AAAA,MAAVC,IAAU;AACvG,MAAMC,GAAG,aAAMF,SAAN,aAAMA,SAAN,cAAMA,SAAN,GAAmB,EAAnB,cAAyBD,OAAzB,CAAT;AACA,sBACE,sBAAC,SAAD;AAAW,IAAA,OAAO,EAAEA,OAApB;AAA6B,IAAA,cAAc,EAAE,CAAC,CAACD,KAA/C;AAAsD,IAAA,SAAS,EAAEI;AAAjE,KAA0ED,IAA1E;AAAA,eACGP,IAAI,iBAAI,qBAAC,aAAD;AAAe,MAAA,OAAO,EAAEK,OAAxB;AAAiC,qBAAa,eAA9C;AAAA,gBACJL;AADI,MADX,EAKGI,KAAK,iBAAI,qBAAC,aAAD;AAAe,MAAA,OAAO,EAAEC,OAAxB;AAAiC,MAAA,IAAI,EAAEL,IAAvC;AAAA,gBACLI;AADK,MALZ;AAAA,KADF;AAYD,CAdD;;;AALEA,EAAAA,K;AACAJ,EAAAA,I;AACAK,EAAAA,O,4BALwB,S,EAAY,U,EAAa,S,EAAY,U,EAAa,S,EAAY,S;;eAwBzEF,G","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { COLORS, ComponentTextStyle, ComponentXSStyling } from '..';\n\nconst Container = styled.div<{variant: TagVariants, isLabelPresent: boolean}>`\n display: flex;\n height: 24px;\n width: calc(100%);\n max-width: fit-content;\n min-width: ${props=>props.isLabelPresent ? '64px' : ''};\n border-radius: 2px;\n\n &.neutral {\n background-color: ${COLORS.neutral_100};\n color: ${COLORS.neutral_600};\n }\n &.positive {\n background-color: ${COLORS.correct_100};\n color: ${COLORS.correct_600};\n }\n &.warning {\n background-color: ${COLORS.warning_100};\n color: ${COLORS.warning_600};\n }\n &.critical {\n background-color: ${COLORS.critical_100};\n color: ${COLORS.critical_600};\n }\n &.accent1 {\n background-color: ${COLORS.accent1_100};\n color: ${COLORS.accent1_600};\n }\n &.accent2 {\n background-color: ${COLORS.accent2_100};\n color: ${COLORS.accent2_600};\n }\n\n`;\n\nconst IconContainer = styled.div<{variant: TagVariants}>`\n border-radius: 2px;\n margin: 4px;\n svg {\n width: 16px;\n height: 16px;\n }\n`;\n\nconst TextContainer = styled.div<{variant: TagVariants, icon: React.ReactNode}>`\n border-radius: 2px;\n margin: ${props=> props.icon ? `4px 8px 4px 0` : `4px 8px`};\n height: 16px;\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden; \n ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\n`;\n\n\nexport type TagVariants = 'neutral' | 'positive' | 'warning' | 'critical' | 'accent1' | 'accent2';\n\ntype TagProps = React.HTMLAttributes<HTMLDivElement> & {\n label?: string;\n icon?: React.ReactNode;\n variant?: TagVariants;\n}\n\nconst Tag: React.FunctionComponent<TagProps> = ({label, icon, variant='neutral', className, ...rest}) => {\n const cls = `${className ?? ''} ${variant}`;\n return ( \n <Container variant={variant} isLabelPresent={!!label} className={cls} {...rest}>\n {icon && <IconContainer variant={variant} data-testid={'iconContainer'}>\n {icon}\n </IconContainer>\n }\n {label && <TextContainer variant={variant} icon={icon}>\n {label}\n </TextContainer>\n }\n </Container>\n );\n};\n\nexport default Tag;\n"],"file":"Tag.cjs"}
package/dist/Tag/Tag.js CHANGED
@@ -2,7 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
2
2
  import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
3
3
  import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
4
4
  import _pt from "prop-types";
5
- var _excluded = ["label", "icon", "variant"];
5
+ var _excluded = ["label", "icon", "variant", "className"];
6
6
 
7
7
  var _templateObject, _templateObject2, _templateObject3;
8
8
 
@@ -15,52 +15,27 @@ import styled from 'styled-components';
15
15
  import { COLORS, ComponentTextStyle, ComponentXSStyling } from '..';
16
16
  import { jsx as _jsx } from "react/jsx-runtime";
17
17
  import { jsxs as _jsxs } from "react/jsx-runtime";
18
- var Container = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n height: 24px;\n width: calc(100%);\n max-width: fit-content;\n min-width: ", ";\n border-radius: 2px;\n background: ", ";\n"])), function (props) {
18
+ var Container = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n height: 24px;\n width: calc(100%);\n max-width: fit-content;\n min-width: ", ";\n border-radius: 2px;\n\n &.neutral {\n background-color: ", ";\n color: ", ";\n }\n &.positive {\n background-color: ", ";\n color: ", ";\n }\n &.warning {\n background-color: ", ";\n color: ", ";\n }\n &.critical {\n background-color: ", ";\n color: ", ";\n }\n &.accent1 {\n background-color: ", ";\n color: ", ";\n }\n &.accent2 {\n background-color: ", ";\n color: ", ";\n }\n\n"])), function (props) {
19
19
  return props.isLabelPresent ? '64px' : '';
20
- }, function (props) {
21
- return getBackgroundColor(props.variant);
22
- });
23
- var IconContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n border-radius: 2px;\n margin: 4px;\n svg {\n width: 16px;\n height: 16px;\n color: ", ";\n }\n"])), function (props) {
24
- return props.variant === 'neutral' ? COLORS.neutral_600 : COLORS.white;
25
- });
26
- var TextContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n color: ", ";\n border-radius: 2px;\n margin: ", ";\n height: 16px;\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden; \n ", "\n"])), function (props) {
27
- return props.variant === 'neutral' ? COLORS.neutral_600 : COLORS.white;
28
- }, function (props) {
20
+ }, COLORS.neutral_100, COLORS.neutral_600, COLORS.correct_100, COLORS.correct_600, COLORS.warning_100, COLORS.warning_600, COLORS.critical_100, COLORS.critical_600, COLORS.accent1_100, COLORS.accent1_600, COLORS.accent2_100, COLORS.accent2_600);
21
+ var IconContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n border-radius: 2px;\n margin: 4px;\n svg {\n width: 16px;\n height: 16px;\n }\n"])));
22
+ var TextContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n border-radius: 2px;\n margin: ", ";\n height: 16px;\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden; \n ", "\n"])), function (props) {
29
23
  return props.icon ? "4px 8px 4px 0" : "4px 8px";
30
24
  }, ComponentXSStyling(ComponentTextStyle.Bold, null));
31
25
 
32
- var getBackgroundColor = function getBackgroundColor(variant) {
33
- switch (variant) {
34
- case 'positive':
35
- return COLORS.correct_500;
36
-
37
- case 'warning':
38
- return COLORS.warning_500;
39
-
40
- case 'critical':
41
- return COLORS.critical_500;
42
-
43
- case 'accent1':
44
- return COLORS.accent1_500;
45
-
46
- case 'accent2':
47
- return COLORS.accent2_500;
48
-
49
- default:
50
- return COLORS.neutral_100;
51
- }
52
- };
53
-
54
26
  var Tag = function Tag(_ref) {
55
27
  var label = _ref.label,
56
28
  icon = _ref.icon,
57
29
  _ref$variant = _ref.variant,
58
30
  variant = _ref$variant === void 0 ? 'neutral' : _ref$variant,
31
+ className = _ref.className,
59
32
  rest = _objectWithoutProperties(_ref, _excluded);
60
33
 
34
+ var cls = "".concat(className !== null && className !== void 0 ? className : '', " ").concat(variant);
61
35
  return /*#__PURE__*/_jsxs(Container, _objectSpread(_objectSpread({
62
36
  variant: variant,
63
- isLabelPresent: !!label
37
+ isLabelPresent: !!label,
38
+ className: cls
64
39
  }, rest), {}, {
65
40
  children: [icon && /*#__PURE__*/_jsx(IconContainer, {
66
41
  variant: variant,
package/dist/Tag/Tag.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/Tag/Tag.tsx"],"names":["React","styled","COLORS","ComponentTextStyle","ComponentXSStyling","Container","div","props","isLabelPresent","getBackgroundColor","variant","IconContainer","neutral_600","white","TextContainer","icon","Bold","correct_500","warning_500","critical_500","accent1_500","accent2_500","neutral_100","Tag","label","rest"],"mappings":";;;;;;;;;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAASC,MAAT,EAAiBC,kBAAjB,EAAqCC,kBAArC,QAA+D,IAA/D;;;AAEA,IAAMC,SAAS,GAAGJ,MAAM,CAACK,GAAV,4NAKA,UAAAC,KAAK;AAAA,SAAEA,KAAK,CAACC,cAAN,GAAuB,MAAvB,GAAgC,EAAlC;AAAA,CALL,EAOC,UAAAD,KAAK;AAAA,SAAGE,kBAAkB,CAACF,KAAK,CAACG,OAAP,CAArB;AAAA,CAPN,CAAf;AAUA,IAAMC,aAAa,GAAGV,MAAM,CAACK,GAAV,sLAMN,UAAAC,KAAK;AAAA,SAAGA,KAAK,CAACG,OAAN,KAAkB,SAAlB,GAA8BR,MAAM,CAACU,WAArC,GAAmDV,MAAM,CAACW,KAA7D;AAAA,CANC,CAAnB;AAUA,IAAMC,aAAa,GAAGb,MAAM,CAACK,GAAV,sOACR,UAAAC,KAAK;AAAA,SAAGA,KAAK,CAACG,OAAN,KAAkB,SAAlB,GAA8BR,MAAM,CAACU,WAArC,GAAmDV,MAAM,CAACW,KAA7D;AAAA,CADG,EAGP,UAAAN,KAAK;AAAA,SAAGA,KAAK,CAACQ,IAAN,8BAAH;AAAA,CAHE,EAQfX,kBAAkB,CAACD,kBAAkB,CAACa,IAApB,EAA0B,IAA1B,CARH,CAAnB;;AAWA,IAAMP,kBAAkB,GAAG,SAArBA,kBAAqB,CAACC,OAAD,EAA0B;AACnD,UAAOA,OAAP;AACE,SAAK,UAAL;AAAiB,aAAOR,MAAM,CAACe,WAAd;;AACjB,SAAK,SAAL;AAAiB,aAAOf,MAAM,CAACgB,WAAd;;AACjB,SAAK,UAAL;AAAiB,aAAOhB,MAAM,CAACiB,YAAd;;AACjB,SAAK,SAAL;AAAgB,aAAOjB,MAAM,CAACkB,WAAd;;AAChB,SAAK,SAAL;AAAgB,aAAOlB,MAAM,CAACmB,WAAd;;AAChB;AAAS,aAAOnB,MAAM,CAACoB,WAAd;AANX;AAQD,CATD;;AAmBA,IAAMC,GAAsC,GAAG,SAAzCA,GAAyC,OAA+C;AAAA,MAA7CC,KAA6C,QAA7CA,KAA6C;AAAA,MAAtCT,IAAsC,QAAtCA,IAAsC;AAAA,0BAAhCL,OAAgC;AAAA,MAAhCA,OAAgC,6BAAxB,SAAwB;AAAA,MAAVe,IAAU;;AAC5F,sBACE,MAAC,SAAD;AAAW,IAAA,OAAO,EAAEf,OAApB;AAA6B,IAAA,cAAc,EAAE,CAAC,CAACc;AAA/C,KAA0DC,IAA1D;AAAA,eACGV,IAAI,iBAAI,KAAC,aAAD;AAAe,MAAA,OAAO,EAAEL,OAAxB;AAAiC,qBAAa,eAA9C;AAAA,gBACJK;AADI,MADX,EAKGS,KAAK,iBAAI,KAAC,aAAD;AAAe,MAAA,OAAO,EAAEd,OAAxB;AAAiC,MAAA,IAAI,EAAEK,IAAvC;AAAA,gBACLS;AADK,MALZ;AAAA,KADF;AAYD,CAbD;;;AALEA,EAAAA,K;AACAT,EAAAA,I;AACAL,EAAAA,O,aALwB,S,EAAY,U,EAAa,S,EAAY,U,EAAa,S,EAAY,S;;AAuBxF,eAAea,GAAf","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { COLORS, ComponentTextStyle, ComponentXSStyling } from '..';\n\nconst Container = styled.div<{variant: TagVariants, isLabelPresent: boolean}>`\n display: flex;\n height: 24px;\n width: calc(100%);\n max-width: fit-content;\n min-width: ${props=>props.isLabelPresent ? '64px' : ''};\n border-radius: 2px;\n background: ${props=> getBackgroundColor(props.variant)};\n`;\n\nconst IconContainer = styled.div<{variant: TagVariants}>`\n border-radius: 2px;\n margin: 4px;\n svg {\n width: 16px;\n height: 16px;\n color: ${props=> props.variant === 'neutral' ? COLORS.neutral_600 : COLORS.white};\n }\n`;\n\nconst TextContainer = styled.div<{variant: TagVariants, icon: React.ReactNode}>`\n color: ${props=> props.variant === 'neutral' ? COLORS.neutral_600 : COLORS.white};\n border-radius: 2px;\n margin: ${props=> props.icon ? `4px 8px 4px 0` : `4px 8px`};\n height: 16px;\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden; \n ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\n`;\n\nconst getBackgroundColor = (variant: TagVariants) => {\n switch(variant){\n case 'positive': return COLORS.correct_500;\n case 'warning' : return COLORS.warning_500;\n case 'critical': return COLORS.critical_500;\n case 'accent1': return COLORS.accent1_500;\n case 'accent2': return COLORS.accent2_500;\n default: return COLORS.neutral_100;\n }\n}\n\nexport type TagVariants = 'neutral' | 'positive' | 'warning' | 'critical' | 'accent1' | 'accent2';\n\ntype TagProps = React.HTMLAttributes<HTMLDivElement> & {\n label?: string;\n icon?: React.ReactNode;\n variant?: TagVariants;\n}\n\nconst Tag: React.FunctionComponent<TagProps> = ({label, icon, variant='neutral', ...rest}) => {\n return ( \n <Container variant={variant} isLabelPresent={!!label} {...rest}>\n {icon && <IconContainer variant={variant} data-testid={'iconContainer'}>\n {icon}\n </IconContainer>\n }\n {label && <TextContainer variant={variant} icon={icon}>\n {label}\n </TextContainer>\n }\n </Container>\n );\n};\n\nexport default Tag;\n"],"file":"Tag.js"}
1
+ {"version":3,"sources":["../../src/Tag/Tag.tsx"],"names":["React","styled","COLORS","ComponentTextStyle","ComponentXSStyling","Container","div","props","isLabelPresent","neutral_100","neutral_600","correct_100","correct_600","warning_100","warning_600","critical_100","critical_600","accent1_100","accent1_600","accent2_100","accent2_600","IconContainer","TextContainer","icon","Bold","Tag","label","variant","className","rest","cls"],"mappings":";;;;;;;;;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAASC,MAAT,EAAiBC,kBAAjB,EAAqCC,kBAArC,QAA+D,IAA/D;;;AAEA,IAAMC,SAAS,GAAGJ,MAAM,CAACK,GAAV,+lBAKA,UAAAC,KAAK;AAAA,SAAEA,KAAK,CAACC,cAAN,GAAuB,MAAvB,GAAgC,EAAlC;AAAA,CALL,EASSN,MAAM,CAACO,WAThB,EAUFP,MAAM,CAACQ,WAVL,EAaSR,MAAM,CAACS,WAbhB,EAcFT,MAAM,CAACU,WAdL,EAiBSV,MAAM,CAACW,WAjBhB,EAkBFX,MAAM,CAACY,WAlBL,EAqBSZ,MAAM,CAACa,YArBhB,EAsBFb,MAAM,CAACc,YAtBL,EAyBSd,MAAM,CAACe,WAzBhB,EA0BFf,MAAM,CAACgB,WA1BL,EA6BShB,MAAM,CAACiB,WA7BhB,EA8BFjB,MAAM,CAACkB,WA9BL,CAAf;AAmCA,IAAMC,aAAa,GAAGpB,MAAM,CAACK,GAAV,mKAAnB;AASA,IAAMgB,aAAa,GAAGrB,MAAM,CAACK,GAAV,sNAEP,UAAAC,KAAK;AAAA,SAAGA,KAAK,CAACgB,IAAN,8BAAH;AAAA,CAFE,EAOfnB,kBAAkB,CAACD,kBAAkB,CAACqB,IAApB,EAA0B,IAA1B,CAPH,CAAnB;;AAmBA,IAAMC,GAAsC,GAAG,SAAzCA,GAAyC,OAA0D;AAAA,MAAxDC,KAAwD,QAAxDA,KAAwD;AAAA,MAAjDH,IAAiD,QAAjDA,IAAiD;AAAA,0BAA3CI,OAA2C;AAAA,MAA3CA,OAA2C,6BAAnC,SAAmC;AAAA,MAAxBC,SAAwB,QAAxBA,SAAwB;AAAA,MAAVC,IAAU;;AACvG,MAAMC,GAAG,aAAMF,SAAN,aAAMA,SAAN,cAAMA,SAAN,GAAmB,EAAnB,cAAyBD,OAAzB,CAAT;AACA,sBACE,MAAC,SAAD;AAAW,IAAA,OAAO,EAAEA,OAApB;AAA6B,IAAA,cAAc,EAAE,CAAC,CAACD,KAA/C;AAAsD,IAAA,SAAS,EAAEI;AAAjE,KAA0ED,IAA1E;AAAA,eACGN,IAAI,iBAAI,KAAC,aAAD;AAAe,MAAA,OAAO,EAAEI,OAAxB;AAAiC,qBAAa,eAA9C;AAAA,gBACJJ;AADI,MADX,EAKGG,KAAK,iBAAI,KAAC,aAAD;AAAe,MAAA,OAAO,EAAEC,OAAxB;AAAiC,MAAA,IAAI,EAAEJ,IAAvC;AAAA,gBACLG;AADK,MALZ;AAAA,KADF;AAYD,CAdD;;;AALEA,EAAAA,K;AACAH,EAAAA,I;AACAI,EAAAA,O,aALwB,S,EAAY,U,EAAa,S,EAAY,U,EAAa,S,EAAY,S;;AAwBxF,eAAeF,GAAf","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { COLORS, ComponentTextStyle, ComponentXSStyling } from '..';\n\nconst Container = styled.div<{variant: TagVariants, isLabelPresent: boolean}>`\n display: flex;\n height: 24px;\n width: calc(100%);\n max-width: fit-content;\n min-width: ${props=>props.isLabelPresent ? '64px' : ''};\n border-radius: 2px;\n\n &.neutral {\n background-color: ${COLORS.neutral_100};\n color: ${COLORS.neutral_600};\n }\n &.positive {\n background-color: ${COLORS.correct_100};\n color: ${COLORS.correct_600};\n }\n &.warning {\n background-color: ${COLORS.warning_100};\n color: ${COLORS.warning_600};\n }\n &.critical {\n background-color: ${COLORS.critical_100};\n color: ${COLORS.critical_600};\n }\n &.accent1 {\n background-color: ${COLORS.accent1_100};\n color: ${COLORS.accent1_600};\n }\n &.accent2 {\n background-color: ${COLORS.accent2_100};\n color: ${COLORS.accent2_600};\n }\n\n`;\n\nconst IconContainer = styled.div<{variant: TagVariants}>`\n border-radius: 2px;\n margin: 4px;\n svg {\n width: 16px;\n height: 16px;\n }\n`;\n\nconst TextContainer = styled.div<{variant: TagVariants, icon: React.ReactNode}>`\n border-radius: 2px;\n margin: ${props=> props.icon ? `4px 8px 4px 0` : `4px 8px`};\n height: 16px;\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden; \n ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\n`;\n\n\nexport type TagVariants = 'neutral' | 'positive' | 'warning' | 'critical' | 'accent1' | 'accent2';\n\ntype TagProps = React.HTMLAttributes<HTMLDivElement> & {\n label?: string;\n icon?: React.ReactNode;\n variant?: TagVariants;\n}\n\nconst Tag: React.FunctionComponent<TagProps> = ({label, icon, variant='neutral', className, ...rest}) => {\n const cls = `${className ?? ''} ${variant}`;\n return ( \n <Container variant={variant} isLabelPresent={!!label} className={cls} {...rest}>\n {icon && <IconContainer variant={variant} data-testid={'iconContainer'}>\n {icon}\n </IconContainer>\n }\n {label && <TextContainer variant={variant} icon={icon}>\n {label}\n </TextContainer>\n }\n </Container>\n );\n};\n\nexport default Tag;\n"],"file":"Tag.js"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@laerdal/life-react-components",
3
- "version": "1.10.3-dev.4",
3
+ "version": "1.10.3-dev.6.full",
4
4
  "private": false,
5
5
  "author": "Thomas Kalve <thomas.kalve@laerdal.com>",
6
6
  "contributors": [