@codacy/ui-components 0.67.71 → 0.68.1

package/lib/PillLabel/PillLabel.js

@@ -8,14 +8,16 @@ const IconComponent = ({
   color,
   size,
   direction,
+  hasText,
   onClick
 }) => /*#__PURE__*/React.createElement(Icon, {
+  "data-pill-icon": true,
   onClick: onClick,
   icon: icon,
   size: size,
   color: color,
-  ml: direction === 'left' ? 0 : 1,
-  mr: direction === 'right' ? 0 : 1
+  ml: hasText && direction === 'right' ? 1 : 0,
+  mr: hasText && direction === 'left' ? 1 : 0
 });
 
 /**
@@ -25,6 +27,7 @@ const PillLabel = /*#__PURE__*/React.forwardRef(({
   children,
   status = 'default',
   invert = false,
+  variant = 'filled',
   inline = true,
   size = 'md',
   rightIcon,
@@ -32,26 +35,32 @@ const PillLabel = /*#__PURE__*/React.forwardRef(({
   onClickIcon,
   ...props
 }, ref) => {
+  const hasText = React.Children.toArray(children).length > 0;
+  const iconColor = invert ? `label-${status}-background` : `label-${status}-icon`;
   return /*#__PURE__*/React.createElement(PillLabelWrapper, _extends({
     status: status,
     size: size,
     display: inline ? 'inline-block' : 'block'
   }, props, {
     invert: invert,
+    variant: variant,
     ref: ref
   }), /*#__PURE__*/React.createElement(Flex, {
-    alignItems: "center"
+    alignItems: "center",
+    justifyContent: "center"
   }, leftIcon && /*#__PURE__*/React.createElement(IconComponent, {
     icon: leftIcon,
-    color: `label-${status}-icon`,
+    color: iconColor,
     size: size,
     direction: "left",
+    hasText: hasText,
     onClick: onClickIcon
   }), children, rightIcon && /*#__PURE__*/React.createElement(IconComponent, {
     icon: rightIcon,
-    color: `label-${status}-icon`,
+    color: iconColor,
     size: size,
     direction: "right",
+    hasText: hasText,
     onClick: onClickIcon
   })));
 });

package/lib/PillLabel/PillLabel.styles.js

@@ -7,15 +7,19 @@ export const PillLabelWrapper = /*#__PURE__*/_styled(Box, process.env.NODE_ENV =
 } : {
   target: "e15p08ax0",
   label: "codacy"
-})("padding:", ({
+})("padding:0 ", ({
   theme
 }) => theme.space[1], ";height:", ({
-  theme,
   size
-}) => theme.space[size === 'md' ? 5 : 4], ";align-content:center;line-height:", ({
-  theme,
+}) => size === 'md' ? '1.5rem' : '1.25rem', ";min-width:", ({
   size
-}) => theme.space[size === 'md' ? 4 : 2], ";", IconAndTextWrapper, ",", IconWrapper, "{svg{width:", ({
+}) => size === 'md' ? '1.5rem' : '1.25rem', ";align-content:center;line-height:1;&>*>[data-pill-icon]{display:flex;align-items:center;justify-content:center;width:", ({
+  size
+}) => size === 'md' ? '0.75rem' : '0.625rem', ";height:", ({
+  size
+}) => size === 'md' ? '0.75rem' : '0.625rem', ";}", IconAndTextWrapper, "{gap:", ({
+  theme
+}) => theme.space[1], ";>", IconWrapper, "{margin:0;}}", IconAndTextWrapper, ",", IconWrapper, "{svg{width:", ({
   size
 }) => size === 'md' ? '0.75rem' : '0.625rem', ";height:", ({
   size
@@ -29,8 +33,16 @@ export const PillLabelWrapper = /*#__PURE__*/_styled(Box, process.env.NODE_ENV =
 }) => theme.fontSizes[size === 'md' ? 's' : 'xs'], ";", ({
   status = 'default',
   theme,
-  invert
+  invert,
+  variant
 }) => {
+  if (variant === 'outline') {
+    return `
+        color: ${theme.colors[`label-${status}-text`]};
+        background-color: transparent;
+        border: 1px solid ${theme.colors['border-primary']};
+      `;
+  }
   const colors = [`label-${status}-text`, `label-${status}-background`];
   if (invert) {
     colors.reverse();
@@ -39,4 +51,4 @@ export const PillLabelWrapper = /*#__PURE__*/_styled(Box, process.env.NODE_ENV =
       color: ${theme.colors[colors[0]]};
       background-color: ${theme.colors[colors[1]]};
     `;
-}, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9QaWxsTGFiZWwvUGlsbExhYmVsLnN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFPMkQiLCJmaWxlIjoiLi4vLi4vc3JjL1BpbGxMYWJlbC9QaWxsTGFiZWwuc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgUGlsbExhYmVsUHJvcHMgfSBmcm9tICcuL1BpbGxMYWJlbC50eXBlcydcbmltcG9ydCB7IEJveCB9IGZyb20gJy4uL0ZsZXhib3gnXG5pbXBvcnQgeyBJY29uQW5kVGV4dFdyYXBwZXIgfSBmcm9tICcuLi9JY29uQW5kVGV4dC9JY29uQW5kVGV4dC5zdHlsZXMnXG5pbXBvcnQgeyBJY29uV3JhcHBlciB9IGZyb20gJy4uL0ljb24vSWNvbi5zdHlsZXMnXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcbmltcG9ydCB7IEFsbENvbG9yc0tleXMgfSBmcm9tICcuLi90aGVtZS9Db2xvclNjaGVtZXMvbGlnaHQnXG5cbmV4cG9ydCBjb25zdCBQaWxsTGFiZWxXcmFwcGVyID0gc3R5bGVkKEJveCk8UGlsbExhYmVsUHJvcHM+YFxuICBwYWRkaW5nOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLnNwYWNlWzFdfTtcbiAgaGVpZ2h0OiAkeyh7IHRoZW1lLCBzaXplIH0pID0+IHRoZW1lLnNwYWNlW3NpemUgPT09ICdtZCcgPyA1IDogNF19O1xuICBhbGlnbi1jb250ZW50OiBjZW50ZXI7XG4gIGxpbmUtaGVpZ2h0OiAkeyh7IHRoZW1lLCBzaXplIH0pID0+IHRoZW1lLnNwYWNlW3NpemUgPT09ICdtZCcgPyA0IDogMl19O1xuXG4gICR7SWNvbkFuZFRleHRXcmFwcGVyfSwgJHtJY29uV3JhcHBlcn0ge1xuICAgIHN2ZyB7XG4gICAgICB3aWR0aDogJHsoeyBzaXplIH0pID0+IHNpemUgPT09ICdtZCcgPyAnMC43NXJlbScgOiAnMC42MjVyZW0nfTtcbiAgICAgIGhlaWdodDogJHsoeyBzaXplIH0pID0+IHNpemUgPT09ICdtZCcgPyAnMC43NXJlbScgOiAnMC42MjVyZW0nfTtcbiAgICB9XG4gIH1cblxuICBib3JkZXItcmFkaXVzOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLnJhZGlpWzFdfTtcbiAgdGV4dC1hbGlnbjogY2VudGVyO1xuICBmb250LXdlaWdodDogJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5mb250V2VpZ2h0c1snc2VtaS1ib2xkJ119O1xuICBmb250LXNpemU6ICR7KHsgdGhlbWUsIHNpemUgfSkgPT4gdGhlbWUuZm9udFNpemVzW3NpemUgPT09ICdtZCcgPyAncycgOiAneHMnXX07XG5cbiAgJHsoeyBzdGF0dXMgPSAnZGVmYXVsdCcsIHRoZW1lLCBpbnZlcnQgfSkgPT4ge1xuICAgIGNvbnN0IGNvbG9yczogQWxsQ29sb3JzS2V5c1tdID0gW2BsYWJlbC0ke3N0YXR1c30tdGV4dGAsIGBsYWJlbC0ke3N0YXR1c30tYmFja2dyb3VuZGBdXG5cbiAgICBpZiAoaW52ZXJ0KSB7XG4gICAgICBjb2xvcnMucmV2ZXJzZSgpXG4gICAgfVxuXG4gICAgcmV0dXJuIGBcbiAgICAgIGNvbG9yOiAke3RoZW1lLmNvbG9yc1tjb2xvcnNbMF1dfTtcbiAgICAgIGJhY2tncm91bmQtY29sb3I6ICR7dGhlbWUuY29sb3JzW2NvbG9yc1sxXV19O1xuICAgIGBcbiAgfX1cbmBcbiJdfQ== */"));
+}, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9QaWxsTGFiZWwvUGlsbExhYmVsLnN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFPMkQiLCJmaWxlIjoiLi4vLi4vc3JjL1BpbGxMYWJlbC9QaWxsTGFiZWwuc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgUGlsbExhYmVsUHJvcHMgfSBmcm9tICcuL1BpbGxMYWJlbC50eXBlcydcbmltcG9ydCB7IEJveCB9IGZyb20gJy4uL0ZsZXhib3gnXG5pbXBvcnQgeyBJY29uQW5kVGV4dFdyYXBwZXIgfSBmcm9tICcuLi9JY29uQW5kVGV4dC9JY29uQW5kVGV4dC5zdHlsZXMnXG5pbXBvcnQgeyBJY29uV3JhcHBlciB9IGZyb20gJy4uL0ljb24vSWNvbi5zdHlsZXMnXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcbmltcG9ydCB7IEFsbENvbG9yc0tleXMgfSBmcm9tICcuLi90aGVtZS9Db2xvclNjaGVtZXMvbGlnaHQnXG5cbmV4cG9ydCBjb25zdCBQaWxsTGFiZWxXcmFwcGVyID0gc3R5bGVkKEJveCk8UGlsbExhYmVsUHJvcHM+YFxuICBwYWRkaW5nOiAwICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuc3BhY2VbMV19O1xuICBoZWlnaHQ6ICR7KHsgc2l6ZSB9KSA9PiAoc2l6ZSA9PT0gJ21kJyA/ICcxLjVyZW0nIDogJzEuMjVyZW0nKX07XG4gIG1pbi13aWR0aDogJHsoeyBzaXplIH0pID0+IChzaXplID09PSAnbWQnID8gJzEuNXJlbScgOiAnMS4yNXJlbScpfTtcbiAgYWxpZ24tY29udGVudDogY2VudGVyO1xuICBsaW5lLWhlaWdodDogMTtcblxuICAmID4gKiA+IFtkYXRhLXBpbGwtaWNvbl0ge1xuICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcbiAgICB3aWR0aDogJHsoeyBzaXplIH0pID0+IChzaXplID09PSAnbWQnID8gJzAuNzVyZW0nIDogJzAuNjI1cmVtJyl9O1xuICAgIGhlaWdodDogJHsoeyBzaXplIH0pID0+IChzaXplID09PSAnbWQnID8gJzAuNzVyZW0nIDogJzAuNjI1cmVtJyl9O1xuICB9XG5cbiAgJHtJY29uQW5kVGV4dFdyYXBwZXJ9IHtcbiAgICBnYXA6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuc3BhY2VbMV19O1xuXG4gICAgPiAke0ljb25XcmFwcGVyfSB7XG4gICAgICBtYXJnaW46IDA7XG4gICAgfVxuICB9XG5cbiAgJHtJY29uQW5kVGV4dFdyYXBwZXJ9LCAke0ljb25XcmFwcGVyfSB7XG4gICAgc3ZnIHtcbiAgICAgIHdpZHRoOiAkeyh7IHNpemUgfSkgPT4gKHNpemUgPT09ICdtZCcgPyAnMC43NXJlbScgOiAnMC42MjVyZW0nKX07XG4gICAgICBoZWlnaHQ6ICR7KHsgc2l6ZSB9KSA9PiAoc2l6ZSA9PT0gJ21kJyA/ICcwLjc1cmVtJyA6ICcwLjYyNXJlbScpfTtcbiAgICB9XG4gIH1cblxuICBib3JkZXItcmFkaXVzOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLnJhZGlpWzFdfTtcbiAgdGV4dC1hbGlnbjogY2VudGVyO1xuICBmb250LXdlaWdodDogJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5mb250V2VpZ2h0c1snc2VtaS1ib2xkJ119O1xuICBmb250LXNpemU6ICR7KHsgdGhlbWUsIHNpemUgfSkgPT4gdGhlbWUuZm9udFNpemVzW3NpemUgPT09ICdtZCcgPyAncycgOiAneHMnXX07XG5cbiAgJHsoeyBzdGF0dXMgPSAnZGVmYXVsdCcsIHRoZW1lLCBpbnZlcnQsIHZhcmlhbnQgfSkgPT4ge1xuICAgIGlmICh2YXJpYW50ID09PSAnb3V0bGluZScpIHtcbiAgICAgIHJldHVybiBgXG4gICAgICAgIGNvbG9yOiAke3RoZW1lLmNvbG9yc1tgbGFiZWwtJHtzdGF0dXN9LXRleHRgXX07XG4gICAgICAgIGJhY2tncm91bmQtY29sb3I6IHRyYW5zcGFyZW50O1xuICAgICAgICBib3JkZXI6IDFweCBzb2xpZCAke3RoZW1lLmNvbG9yc1snYm9yZGVyLXByaW1hcnknXX07XG4gICAgICBgXG4gICAgfVxuXG4gICAgY29uc3QgY29sb3JzOiBBbGxDb2xvcnNLZXlzW10gPSBbYGxhYmVsLSR7c3RhdHVzfS10ZXh0YCwgYGxhYmVsLSR7c3RhdHVzfS1iYWNrZ3JvdW5kYF1cblxuICAgIGlmIChpbnZlcnQpIHtcbiAgICAgIGNvbG9ycy5yZXZlcnNlKClcbiAgICB9XG5cbiAgICByZXR1cm4gYFxuICAgICAgY29sb3I6ICR7dGhlbWUuY29sb3JzW2NvbG9yc1swXV19O1xuICAgICAgYmFja2dyb3VuZC1jb2xvcjogJHt0aGVtZS5jb2xvcnNbY29sb3JzWzFdXX07XG4gICAgYFxuICB9fVxuYFxuIl19 */"));

package/lib/PillLabel/PillLabel.types.d.ts

@@ -10,6 +10,8 @@ export interface PillLabelProps extends ContainerComponentProps, SpaceProps, Lay
     inline?: boolean;
     /** Size */
     size?: 'md' | 'sm';
+    /** Filled background, or no background with a border */
+    variant?: 'filled' | 'outline';
     /** Invert color scheme to make darker background and lighter text */
     invert?: boolean;
     /** Left icon */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codacy/ui-components",
-  "version": "0.67.71",
+  "version": "0.68.1",
   "description": "",
   "license": "ISC",
   "author": "",