glints-aries 4.0.198 → 4.0.199

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 (9) hide show
  1. package/es/@next/Tag/Tag.d.ts +1 -0
  2. package/es/@next/Tag/Tag.js +19 -3
  3. package/es/@next/Tag/Tag.stories.d.ts +2 -0
  4. package/es/@next/Tag/TagStyle.js +2 -2
  5. package/lib/@next/Tag/Tag.d.ts +1 -0
  6. package/lib/@next/Tag/Tag.js +19 -3
  7. package/lib/@next/Tag/Tag.stories.d.ts +2 -0
  8. package/lib/@next/Tag/TagStyle.js +2 -2
  9. package/package.json +11 -2
package/es/@next/Tag/Tag.d.ts CHANGED
@@ -4,6 +4,7 @@ export interface TagProps extends React.HTMLAttributes<HTMLDivElement> {
4
4
  value?: string;
5
5
  onRemove?: (() => void) | null;
6
6
  textColor?: string;
7
+ disabled?: boolean;
7
8
  }
8
9
  export declare type TagRemoveContainerProps = React.HTMLAttributes<HTMLDivElement>;
9
10
  export declare type TagContentProps = React.HTMLAttributes<HTMLSpanElement> & TagProps;
package/es/@next/Tag/Tag.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import _extends from "@babel/runtime/helpers/extends";
2
2
  import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
3
- var _excluded = ["children", "onRemove", "value", "textColor"];
3
+ var _excluded = ["children", "onRemove", "value", "textColor", "onClick", "disabled"];
4
4
  import React from 'react';
5
5
  import { Icon } from '../Icon';
6
6
  import { Typography } from '../Typography';
@@ -11,10 +11,21 @@ export var Tag = /*#__PURE__*/React.forwardRef(function Tag(_ref, ref) {
11
11
  onRemove = _ref.onRemove,
12
12
  value = _ref.value,
13
13
  textColor = _ref.textColor,
14
+ onClick = _ref.onClick,
15
+ disabled = _ref.disabled,
14
16
  props = _objectWithoutPropertiesLoose(_ref, _excluded);
17
+ var handleTextColor = function handleTextColor() {
18
+ if (disabled) {
19
+ return Neutral.B85;
20
+ }
21
+ if (textColor) {
22
+ return textColor;
23
+ }
24
+ return Neutral.B18;
25
+ };
15
26
  var content = typeof children === 'string' || typeof children === 'number' ? /*#__PURE__*/React.createElement(Typography, {
16
27
  variant: "caption",
17
- color: textColor != null ? textColor : Neutral.B18,
28
+ color: handleTextColor(),
18
29
  as: 'span'
19
30
  }, children) : children;
20
31
  var removeButton = onRemove && /*#__PURE__*/React.createElement(TagRemoveContainerStyle, null, /*#__PURE__*/React.createElement(TagIconWrapper, {
@@ -29,7 +40,12 @@ export var Tag = /*#__PURE__*/React.forwardRef(function Tag(_ref, ref) {
29
40
  return /*#__PURE__*/React.createElement(TagStyle, _extends({
30
41
  ref: ref
31
42
  }, props, {
32
- value: value
43
+ value: value,
44
+ onClick: !disabled && onClick,
45
+ "data-clickable": !!onClick,
46
+ role: !!onClick ? 'button' : undefined,
47
+ "data-disabled": disabled,
48
+ as: !!onClick ? 'button' : 'div'
33
49
  }), /*#__PURE__*/React.createElement(TagContentStyle, {
34
50
  "data-removeable": !!onRemove
35
51
  }, content), removeButton);
package/es/@next/Tag/Tag.stories.d.ts CHANGED
@@ -3,3 +3,5 @@ declare const _default: Meta<import("@storybook/react").Args>;
3
3
  export default _default;
4
4
  export declare const Default: any;
5
5
  export declare const Removeable: any;
6
+ export declare const Clickable: any;
7
+ export declare const ClickableDisabled: any;
package/es/@next/Tag/TagStyle.js CHANGED
@@ -6,7 +6,7 @@ import { space4, space8 } from '../utilities/spacing';
6
6
  export var TagContentStyle = styled.span.withConfig({
7
7
  displayName: "TagStyle__TagContentStyle",
8
8
  componentId: "sc-r1wv7a-0"
9
- })(["padding:", " ", ";&[data-removeable='true']{padding-right:0;}"], space4, space8);
9
+ })(["padding:", " ", ";transform:translateY(1px);&[data-removeable='true']{padding-right:0;}"], space4, space8);
10
10
  export var TagRemoveContainerStyle = styled.div.withConfig({
11
11
  displayName: "TagStyle__TagRemoveContainerStyle",
12
12
  componentId: "sc-r1wv7a-1"
@@ -18,4 +18,4 @@ export var TagIconWrapper = styled.div.withConfig({
18
18
  export var TagStyle = styled.div.withConfig({
19
19
  displayName: "TagStyle",
20
20
  componentId: "sc-r1wv7a-3"
21
- })(["display:inline-flex;align-items:center;background-color:", ";border-radius:", ";width:fit-content;@media (max-width:", "){font-size:12px;}& svg{padding:0;}& svg:hover{cursor:pointer;background-color:", ";border-radius:", ";}& svg:active{cursor:pointer;background-color:", ";fill:", ";border-radius:", ";}"], Blue.S08, borderRadius4, Breakpoints.large, Neutral.B95, borderRadiusHalf, Neutral.B40, Neutral.B100, borderRadiusHalf);
21
+ })(["display:inline-flex;align-items:center;background-color:", ";border:0;border-radius:", ";width:fit-content;padding:0;&[data-clickable='true']{cursor:pointer;&:hover{outline:1px solid ", "E6;}&:active{outline:1px solid ", ";}&:focus-visible{outline:1px solid ", ";box-shadow:0px 0px 0px 2px ", ",0px 0px 0px 4px ", ";}&[data-disabled='true']{cursor:not-allowed;outline:none;background-color:", ";&:focus-visible{outline:none;box-shadow:none;}}}@media (max-width:", "){font-size:12px;}& svg{padding:0;}& svg:hover{cursor:pointer;background-color:", ";border-radius:", ";}& svg:active{cursor:pointer;background-color:", ";fill:", ";border-radius:", ";}"], Blue.S08, borderRadius4, Blue.S100, Blue.S100, Blue.S100, Neutral.B100, Blue.S54, Neutral.B95, Breakpoints.large, Neutral.B95, borderRadiusHalf, Neutral.B40, Neutral.B100, borderRadiusHalf);
package/lib/@next/Tag/Tag.d.ts CHANGED
@@ -4,6 +4,7 @@ export interface TagProps extends React.HTMLAttributes<HTMLDivElement> {
4
4
  value?: string;
5
5
  onRemove?: (() => void) | null;
6
6
  textColor?: string;
7
+ disabled?: boolean;
7
8
  }
8
9
  export declare type TagRemoveContainerProps = React.HTMLAttributes<HTMLDivElement>;
9
10
  export declare type TagContentProps = React.HTMLAttributes<HTMLSpanElement> & TagProps;
package/lib/@next/Tag/Tag.js CHANGED
@@ -10,16 +10,27 @@ var _Icon = require("../Icon");
10
10
  var _Typography = require("../Typography");
11
11
  var _colors = require("../utilities/colors");
12
12
  var _TagStyle = require("./TagStyle");
13
- var _excluded = ["children", "onRemove", "value", "textColor"];
13
+ var _excluded = ["children", "onRemove", "value", "textColor", "onClick", "disabled"];
14
14
  var Tag = /*#__PURE__*/_react["default"].forwardRef(function Tag(_ref, ref) {
15
15
  var children = _ref.children,
16
16
  onRemove = _ref.onRemove,
17
17
  value = _ref.value,
18
18
  textColor = _ref.textColor,
19
+ onClick = _ref.onClick,
20
+ disabled = _ref.disabled,
19
21
  props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
22
+ var handleTextColor = function handleTextColor() {
23
+ if (disabled) {
24
+ return _colors.Neutral.B85;
25
+ }
26
+ if (textColor) {
27
+ return textColor;
28
+ }
29
+ return _colors.Neutral.B18;
30
+ };
20
31
  var content = typeof children === 'string' || typeof children === 'number' ? /*#__PURE__*/_react["default"].createElement(_Typography.Typography, {
21
32
  variant: "caption",
22
- color: textColor != null ? textColor : _colors.Neutral.B18,
33
+ color: handleTextColor(),
23
34
  as: 'span'
24
35
  }, children) : children;
25
36
  var removeButton = onRemove && /*#__PURE__*/_react["default"].createElement(_TagStyle.TagRemoveContainerStyle, null, /*#__PURE__*/_react["default"].createElement(_TagStyle.TagIconWrapper, {
@@ -34,7 +45,12 @@ var Tag = /*#__PURE__*/_react["default"].forwardRef(function Tag(_ref, ref) {
34
45
  return /*#__PURE__*/_react["default"].createElement(_TagStyle.TagStyle, (0, _extends2["default"])({
35
46
  ref: ref
36
47
  }, props, {
37
- value: value
48
+ value: value,
49
+ onClick: !disabled && onClick,
50
+ "data-clickable": !!onClick,
51
+ role: !!onClick ? 'button' : undefined,
52
+ "data-disabled": disabled,
53
+ as: !!onClick ? 'button' : 'div'
38
54
  }), /*#__PURE__*/_react["default"].createElement(_TagStyle.TagContentStyle, {
39
55
  "data-removeable": !!onRemove
40
56
  }, content), removeButton);
package/lib/@next/Tag/Tag.stories.d.ts CHANGED
@@ -3,3 +3,5 @@ declare const _default: Meta<import("@storybook/react").Args>;
3
3
  export default _default;
4
4
  export declare const Default: any;
5
5
  export declare const Removeable: any;
6
+ export declare const Clickable: any;
7
+ export declare const ClickableDisabled: any;
package/lib/@next/Tag/TagStyle.js CHANGED
@@ -11,7 +11,7 @@ var _spacing = require("../utilities/spacing");
11
11
  var TagContentStyle = _styledComponents["default"].span.withConfig({
12
12
  displayName: "TagStyle__TagContentStyle",
13
13
  componentId: "sc-r1wv7a-0"
14
- })(["padding:", " ", ";&[data-removeable='true']{padding-right:0;}"], _spacing.space4, _spacing.space8);
14
+ })(["padding:", " ", ";transform:translateY(1px);&[data-removeable='true']{padding-right:0;}"], _spacing.space4, _spacing.space8);
15
15
  exports.TagContentStyle = TagContentStyle;
16
16
  var TagRemoveContainerStyle = _styledComponents["default"].div.withConfig({
17
17
  displayName: "TagStyle__TagRemoveContainerStyle",
@@ -26,5 +26,5 @@ exports.TagIconWrapper = TagIconWrapper;
26
26
  var TagStyle = _styledComponents["default"].div.withConfig({
27
27
  displayName: "TagStyle",
28
28
  componentId: "sc-r1wv7a-3"
29
- })(["display:inline-flex;align-items:center;background-color:", ";border-radius:", ";width:fit-content;@media (max-width:", "){font-size:12px;}& svg{padding:0;}& svg:hover{cursor:pointer;background-color:", ";border-radius:", ";}& svg:active{cursor:pointer;background-color:", ";fill:", ";border-radius:", ";}"], _colors.Blue.S08, _borderRadius.borderRadius4, _.Breakpoints.large, _colors.Neutral.B95, _borderRadius.borderRadiusHalf, _colors.Neutral.B40, _colors.Neutral.B100, _borderRadius.borderRadiusHalf);
29
+ })(["display:inline-flex;align-items:center;background-color:", ";border:0;border-radius:", ";width:fit-content;padding:0;&[data-clickable='true']{cursor:pointer;&:hover{outline:1px solid ", "E6;}&:active{outline:1px solid ", ";}&:focus-visible{outline:1px solid ", ";box-shadow:0px 0px 0px 2px ", ",0px 0px 0px 4px ", ";}&[data-disabled='true']{cursor:not-allowed;outline:none;background-color:", ";&:focus-visible{outline:none;box-shadow:none;}}}@media (max-width:", "){font-size:12px;}& svg{padding:0;}& svg:hover{cursor:pointer;background-color:", ";border-radius:", ";}& svg:active{cursor:pointer;background-color:", ";fill:", ";border-radius:", ";}"], _colors.Blue.S08, _borderRadius.borderRadius4, _colors.Blue.S100, _colors.Blue.S100, _colors.Blue.S100, _colors.Neutral.B100, _colors.Blue.S54, _colors.Neutral.B95, _.Breakpoints.large, _colors.Neutral.B95, _borderRadius.borderRadiusHalf, _colors.Neutral.B40, _colors.Neutral.B100, _borderRadius.borderRadiusHalf);
30
30
  exports.TagStyle = TagStyle;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "glints-aries",
3
- "version": "4.0.198",
3
+ "version": "4.0.199",
4
4
  "description": "Glints ui-kit for frontend",
5
5
  "main": "./lib/index.js",
6
6
  "module": "./es/index.js",
@@ -26,7 +26,8 @@
26
26
  "storybook": "start-storybook -p 6006",
27
27
  "storybook:build": "rm -rf .out && npm run storybook:build:assets && npm run build:icon && npm run build:next:icon && build-storybook -o .out -s dist/public",
28
28
  "storybook:build:test": "rm -rf storybook-static && npm run storybook:build:assets && npm run build:icon && npm run build:next:icon && build-storybook -o storybook-static -s dist/public",
29
- "storybook:build:assets": "webpack"
29
+ "storybook:build:assets": "webpack",
30
+ "prepare": "husky install"
30
31
  },
31
32
  "author": "Glints",
32
33
  "license": "MIT",
@@ -102,9 +103,11 @@
102
103
  "fork-ts-checker-webpack-plugin": "^1.3.4",
103
104
  "generate-changelog": "^1.7.1",
104
105
  "glob": "^7.1.6",
106
+ "husky": "^8.0.0",
105
107
  "identity-obj-proxy": "^3.0.0",
106
108
  "jest": "^27.5.1",
107
109
  "jest-styled-components": "^7.0.2",
110
+ "lint-staged": "^13.1.2",
108
111
  "lodash": "^4.17.21",
109
112
  "lodash-es": "^4.17.21",
110
113
  "prettier": "^2.8.1",
@@ -162,5 +165,11 @@
162
165
  "immer": "^9.0.6",
163
166
  "@types/react": "^17.0.37",
164
167
  "@types/react-dom": "^17.0.11"
168
+ },
169
+ "lint-staged": {
170
+ "**/*.{ts,tsx}": [
171
+ "yarn lint",
172
+ "prettier --write"
173
+ ]
165
174
  }
166
175
  }