@codacy/ui-components 0.67.71 → 0.68.0

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 (4) hide show
  1. package/lib/PillLabel/PillLabel.js +2 -0
  2. package/lib/PillLabel/PillLabel.styles.js +12 -8
  3. package/lib/PillLabel/PillLabel.types.d.ts +2 -0
  4. package/package.json +1 -1
package/lib/PillLabel/PillLabel.js CHANGED
@@ -25,6 +25,7 @@ const PillLabel = /*#__PURE__*/React.forwardRef(({
25
25
  children,
26
26
  status = 'default',
27
27
  invert = false,
28
+ variant = 'filled',
28
29
  inline = true,
29
30
  size = 'md',
30
31
  rightIcon,
@@ -38,6 +39,7 @@ const PillLabel = /*#__PURE__*/React.forwardRef(({
38
39
  display: inline ? 'inline-block' : 'block'
39
40
  }, props, {
40
41
  invert: invert,
42
+ variant: variant,
41
43
  ref: ref
42
44
  }), /*#__PURE__*/React.createElement(Flex, {
43
45
  alignItems: "center"
package/lib/PillLabel/PillLabel.styles.js CHANGED
@@ -7,15 +7,11 @@ export const PillLabelWrapper = /*#__PURE__*/_styled(Box, process.env.NODE_ENV =
7
7
  } : {
8
8
  target: "e15p08ax0",
9
9
  label: "codacy"
10
- })("padding:", ({
10
+ })("padding:0 ", ({
11
11
  theme
12
12
  }) => theme.space[1], ";height:", ({
13
- theme,
14
- size
15
- }) => theme.space[size === 'md' ? 5 : 4], ";align-content:center;line-height:", ({
16
- theme,
17
13
  size
18
- }) => theme.space[size === 'md' ? 4 : 2], ";", IconAndTextWrapper, ",", IconWrapper, "{svg{width:", ({
14
+ }) => size === 'md' ? '1.5rem' : '1.25rem', ";align-content:center;line-height:1;", IconWrapper, "{display:flex;align-items:center;}", IconAndTextWrapper, ",", IconWrapper, "{svg{width:", ({
19
15
  size
20
16
  }) => size === 'md' ? '0.75rem' : '0.625rem', ";height:", ({
21
17
  size
@@ -29,8 +25,16 @@ export const PillLabelWrapper = /*#__PURE__*/_styled(Box, process.env.NODE_ENV =
29
25
  }) => theme.fontSizes[size === 'md' ? 's' : 'xs'], ";", ({
30
26
  status = 'default',
31
27
  theme,
32
- invert
28
+ invert,
29
+ variant
33
30
  }) => {
31
+ if (variant === 'outline') {
32
+ return `
33
+ color: ${theme.colors[`label-${status}-text`]};
34
+ background-color: transparent;
35
+ border: 1px solid ${theme.colors['border-primary']};
36
+ `;
37
+ }
34
38
  const colors = [`label-${status}-text`, `label-${status}-background`];
35
39
  if (invert) {
36
40
  colors.reverse();
@@ -39,4 +43,4 @@ export const PillLabelWrapper = /*#__PURE__*/_styled(Box, process.env.NODE_ENV =
39
43
  color: ${theme.colors[colors[0]]};
40
44
  background-color: ${theme.colors[colors[1]]};
41
45
  `;
42
- }, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9QaWxsTGFiZWwvUGlsbExhYmVsLnN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFPMkQiLCJmaWxlIjoiLi4vLi4vc3JjL1BpbGxMYWJlbC9QaWxsTGFiZWwuc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgUGlsbExhYmVsUHJvcHMgfSBmcm9tICcuL1BpbGxMYWJlbC50eXBlcydcbmltcG9ydCB7IEJveCB9IGZyb20gJy4uL0ZsZXhib3gnXG5pbXBvcnQgeyBJY29uQW5kVGV4dFdyYXBwZXIgfSBmcm9tICcuLi9JY29uQW5kVGV4dC9JY29uQW5kVGV4dC5zdHlsZXMnXG5pbXBvcnQgeyBJY29uV3JhcHBlciB9IGZyb20gJy4uL0ljb24vSWNvbi5zdHlsZXMnXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcbmltcG9ydCB7IEFsbENvbG9yc0tleXMgfSBmcm9tICcuLi90aGVtZS9Db2xvclNjaGVtZXMvbGlnaHQnXG5cbmV4cG9ydCBjb25zdCBQaWxsTGFiZWxXcmFwcGVyID0gc3R5bGVkKEJveCk8UGlsbExhYmVsUHJvcHM+YFxuICBwYWRkaW5nOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLnNwYWNlWzFdfTtcbiAgaGVpZ2h0OiAkeyh7IHRoZW1lLCBzaXplIH0pID0+IHRoZW1lLnNwYWNlW3NpemUgPT09ICdtZCcgPyA1IDogNF19O1xuICBhbGlnbi1jb250ZW50OiBjZW50ZXI7XG4gIGxpbmUtaGVpZ2h0OiAkeyh7IHRoZW1lLCBzaXplIH0pID0+IHRoZW1lLnNwYWNlW3NpemUgPT09ICdtZCcgPyA0IDogMl19O1xuXG4gICR7SWNvbkFuZFRleHRXcmFwcGVyfSwgJHtJY29uV3JhcHBlcn0ge1xuICAgIHN2ZyB7XG4gICAgICB3aWR0aDogJHsoeyBzaXplIH0pID0+IHNpemUgPT09ICdtZCcgPyAnMC43NXJlbScgOiAnMC42MjVyZW0nfTtcbiAgICAgIGhlaWdodDogJHsoeyBzaXplIH0pID0+IHNpemUgPT09ICdtZCcgPyAnMC43NXJlbScgOiAnMC42MjVyZW0nfTtcbiAgICB9XG4gIH1cblxuICBib3JkZXItcmFkaXVzOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLnJhZGlpWzFdfTtcbiAgdGV4dC1hbGlnbjogY2VudGVyO1xuICBmb250LXdlaWdodDogJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5mb250V2VpZ2h0c1snc2VtaS1ib2xkJ119O1xuICBmb250LXNpemU6ICR7KHsgdGhlbWUsIHNpemUgfSkgPT4gdGhlbWUuZm9udFNpemVzW3NpemUgPT09ICdtZCcgPyAncycgOiAneHMnXX07XG5cbiAgJHsoeyBzdGF0dXMgPSAnZGVmYXVsdCcsIHRoZW1lLCBpbnZlcnQgfSkgPT4ge1xuICAgIGNvbnN0IGNvbG9yczogQWxsQ29sb3JzS2V5c1tdID0gW2BsYWJlbC0ke3N0YXR1c30tdGV4dGAsIGBsYWJlbC0ke3N0YXR1c30tYmFja2dyb3VuZGBdXG5cbiAgICBpZiAoaW52ZXJ0KSB7XG4gICAgICBjb2xvcnMucmV2ZXJzZSgpXG4gICAgfVxuXG4gICAgcmV0dXJuIGBcbiAgICAgIGNvbG9yOiAke3RoZW1lLmNvbG9yc1tjb2xvcnNbMF1dfTtcbiAgICAgIGJhY2tncm91bmQtY29sb3I6ICR7dGhlbWUuY29sb3JzW2NvbG9yc1sxXV19O1xuICAgIGBcbiAgfX1cbmBcbiJdfQ== */"));
46
+ }, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9QaWxsTGFiZWwvUGlsbExhYmVsLnN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFPMkQiLCJmaWxlIjoiLi4vLi4vc3JjL1BpbGxMYWJlbC9QaWxsTGFiZWwuc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgUGlsbExhYmVsUHJvcHMgfSBmcm9tICcuL1BpbGxMYWJlbC50eXBlcydcbmltcG9ydCB7IEJveCB9IGZyb20gJy4uL0ZsZXhib3gnXG5pbXBvcnQgeyBJY29uQW5kVGV4dFdyYXBwZXIgfSBmcm9tICcuLi9JY29uQW5kVGV4dC9JY29uQW5kVGV4dC5zdHlsZXMnXG5pbXBvcnQgeyBJY29uV3JhcHBlciB9IGZyb20gJy4uL0ljb24vSWNvbi5zdHlsZXMnXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcbmltcG9ydCB7IEFsbENvbG9yc0tleXMgfSBmcm9tICcuLi90aGVtZS9Db2xvclNjaGVtZXMvbGlnaHQnXG5cbmV4cG9ydCBjb25zdCBQaWxsTGFiZWxXcmFwcGVyID0gc3R5bGVkKEJveCk8UGlsbExhYmVsUHJvcHM+YFxuICBwYWRkaW5nOiAwICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuc3BhY2VbMV19O1xuICBoZWlnaHQ6ICR7KHsgc2l6ZSB9KSA9PiAoc2l6ZSA9PT0gJ21kJyA/ICcxLjVyZW0nIDogJzEuMjVyZW0nKX07XG4gIGFsaWduLWNvbnRlbnQ6IGNlbnRlcjtcbiAgbGluZS1oZWlnaHQ6IDE7XG5cbiAgJHtJY29uV3JhcHBlcn0ge1xuICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgfVxuXG4gICR7SWNvbkFuZFRleHRXcmFwcGVyfSwgJHtJY29uV3JhcHBlcn0ge1xuICAgIHN2ZyB7XG4gICAgICB3aWR0aDogJHsoeyBzaXplIH0pID0+IChzaXplID09PSAnbWQnID8gJzAuNzVyZW0nIDogJzAuNjI1cmVtJyl9O1xuICAgICAgaGVpZ2h0OiAkeyh7IHNpemUgfSkgPT4gKHNpemUgPT09ICdtZCcgPyAnMC43NXJlbScgOiAnMC42MjVyZW0nKX07XG4gICAgfVxuICB9XG5cbiAgYm9yZGVyLXJhZGl1czogJHsoeyB0aGVtZSB9KSA9PiB0aGVtZS5yYWRpaVsxXX07XG4gIHRleHQtYWxpZ246IGNlbnRlcjtcbiAgZm9udC13ZWlnaHQ6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuZm9udFdlaWdodHNbJ3NlbWktYm9sZCddfTtcbiAgZm9udC1zaXplOiAkeyh7IHRoZW1lLCBzaXplIH0pID0+IHRoZW1lLmZvbnRTaXplc1tzaXplID09PSAnbWQnID8gJ3MnIDogJ3hzJ119O1xuXG4gICR7KHsgc3RhdHVzID0gJ2RlZmF1bHQnLCB0aGVtZSwgaW52ZXJ0LCB2YXJpYW50IH0pID0+IHtcbiAgICBpZiAodmFyaWFudCA9PT0gJ291dGxpbmUnKSB7XG4gICAgICByZXR1cm4gYFxuICAgICAgICBjb2xvcjogJHt0aGVtZS5jb2xvcnNbYGxhYmVsLSR7c3RhdHVzfS10ZXh0YF19O1xuICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiB0cmFuc3BhcmVudDtcbiAgICAgICAgYm9yZGVyOiAxcHggc29saWQgJHt0aGVtZS5jb2xvcnNbJ2JvcmRlci1wcmltYXJ5J119O1xuICAgICAgYFxuICAgIH1cblxuICAgIGNvbnN0IGNvbG9yczogQWxsQ29sb3JzS2V5c1tdID0gW2BsYWJlbC0ke3N0YXR1c30tdGV4dGAsIGBsYWJlbC0ke3N0YXR1c30tYmFja2dyb3VuZGBdXG5cbiAgICBpZiAoaW52ZXJ0KSB7XG4gICAgICBjb2xvcnMucmV2ZXJzZSgpXG4gICAgfVxuXG4gICAgcmV0dXJuIGBcbiAgICAgIGNvbG9yOiAke3RoZW1lLmNvbG9yc1tjb2xvcnNbMF1dfTtcbiAgICAgIGJhY2tncm91bmQtY29sb3I6ICR7dGhlbWUuY29sb3JzW2NvbG9yc1sxXV19O1xuICAgIGBcbiAgfX1cbmBcbiJdfQ== */"));
package/lib/PillLabel/PillLabel.types.d.ts CHANGED
@@ -10,6 +10,8 @@ export interface PillLabelProps extends ContainerComponentProps, SpaceProps, Lay
10
10
  inline?: boolean;
11
11
  /** Size */
12
12
  size?: 'md' | 'sm';
13
+ /** Filled background, or no background with a border */
14
+ variant?: 'filled' | 'outline';
13
15
  /** Invert color scheme to make darker background and lighter text */
14
16
  invert?: boolean;
15
17
  /** Left icon */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@codacy/ui-components",
3
- "version": "0.67.71",
3
+ "version": "0.68.0",
4
4
  "description": "",
5
5
  "license": "ISC",
6
6
  "author": "",