glints-aries 4.0.321 → 4.0.322

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 (11) hide show
  1. package/es/@next/Tag/Tag.d.ts +3 -0
  2. package/es/@next/Tag/Tag.js +14 -5
  3. package/es/@next/Tag/Tag.stories.d.ts +1 -0
  4. package/es/@next/Tag/TagStyle.d.ts +1 -0
  5. package/es/@next/Tag/TagStyle.js +12 -8
  6. package/lib/@next/Tag/Tag.d.ts +3 -0
  7. package/lib/@next/Tag/Tag.js +13 -4
  8. package/lib/@next/Tag/Tag.stories.d.ts +1 -0
  9. package/lib/@next/Tag/TagStyle.d.ts +1 -0
  10. package/lib/@next/Tag/TagStyle.js +12 -7
  11. package/package.json +1 -1
package/es/@next/Tag/Tag.d.ts CHANGED
@@ -1,10 +1,13 @@
1
1
  import React from 'react';
2
+ import { IconNames } from '../Icon/icons/icons';
2
3
  export interface TagProps extends React.HTMLAttributes<HTMLDivElement> {
3
4
  children?: React.ReactNode;
4
5
  value?: string;
5
6
  onRemove?: (() => void) | null | void;
6
7
  textColor?: string;
7
8
  disabled?: boolean;
9
+ contentType?: 'neutral' | 'success' | 'warning';
10
+ iconName?: IconNames;
8
11
  }
9
12
  export declare type TagRemoveContainerProps = React.HTMLAttributes<HTMLDivElement>;
10
13
  export declare type TagContentProps = React.HTMLAttributes<HTMLSpanElement> & TagProps;
package/es/@next/Tag/Tag.js CHANGED
@@ -1,11 +1,11 @@
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", "onClick", "disabled"];
3
+ var _excluded = ["children", "onRemove", "value", "textColor", "onClick", "disabled", "contentType", "iconName"];
4
4
  import React from 'react';
5
5
  import { Icon } from '../Icon';
6
6
  import { Typography } from '../Typography';
7
7
  import { Neutral } from '../utilities/colors';
8
- import { TagContentStyle, TagIconWrapper, TagRemoveContainerStyle, TagStyle } from './TagStyle';
8
+ import { TagContentStyle, TagIconWrapper, TagRemoveContainerStyle, TagStyle, TagContentWrapper } from './TagStyle';
9
9
  export var Tag = /*#__PURE__*/React.forwardRef(function Tag(_ref, ref) {
10
10
  var children = _ref.children,
11
11
  onRemove = _ref.onRemove,
@@ -13,6 +13,9 @@ export var Tag = /*#__PURE__*/React.forwardRef(function Tag(_ref, ref) {
13
13
  textColor = _ref.textColor,
14
14
  onClick = _ref.onClick,
15
15
  disabled = _ref.disabled,
16
+ _ref$contentType = _ref.contentType,
17
+ contentType = _ref$contentType === void 0 ? 'neutral' : _ref$contentType,
18
+ iconName = _ref.iconName,
16
19
  props = _objectWithoutPropertiesLoose(_ref, _excluded);
17
20
  var handleTextColor = function handleTextColor() {
18
21
  if (disabled) {
@@ -34,8 +37,8 @@ export var Tag = /*#__PURE__*/React.forwardRef(function Tag(_ref, ref) {
34
37
  }, /*#__PURE__*/React.createElement(Icon, {
35
38
  name: "ri-close",
36
39
  fill: Neutral.B40,
37
- height: 20,
38
- onClick: onRemove
40
+ onClick: onRemove,
41
+ className: "remove-button-icon"
39
42
  })));
40
43
  return /*#__PURE__*/React.createElement(TagStyle, _extends({
41
44
  ref: ref
@@ -43,10 +46,16 @@ export var Tag = /*#__PURE__*/React.forwardRef(function Tag(_ref, ref) {
43
46
  value: value,
44
47
  onClick: !disabled && onClick,
45
48
  "data-clickable": !!onClick,
49
+ "data-removeable": !!onRemove,
50
+ "data-content-type": contentType,
46
51
  role: !!onClick ? 'button' : undefined,
47
52
  "data-disabled": disabled,
48
53
  as: !!onClick ? 'button' : 'div'
49
54
  }), /*#__PURE__*/React.createElement(TagContentStyle, {
50
55
  "data-removeable": !!onRemove
51
- }, content), removeButton);
56
+ }, iconName && /*#__PURE__*/React.createElement(Icon, {
57
+ name: iconName,
58
+ fill: Neutral.B40,
59
+ height: 20
60
+ }), /*#__PURE__*/React.createElement(TagContentWrapper, null, content)), removeButton);
52
61
  });
package/es/@next/Tag/Tag.stories.d.ts CHANGED
@@ -2,6 +2,7 @@ import { Meta } from '@storybook/react';
2
2
  declare const _default: Meta<import("@storybook/react").Args>;
3
3
  export default _default;
4
4
  export declare const Default: any;
5
+ export declare const WithIcon: any;
5
6
  export declare const Removeable: any;
6
7
  export declare const Clickable: any;
7
8
  export declare const ClickableDisabled: any;
package/es/@next/Tag/TagStyle.d.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  /// <reference types="react" />
2
2
  import { TagProps, TagRemoveContainerProps } from './Tag';
3
3
  export declare const TagContentStyle: import("styled-components").StyledComponent<"span", any, import("react").HTMLAttributes<HTMLSpanElement> & TagProps, never>;
4
+ export declare const TagContentWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
4
5
  export declare const TagRemoveContainerStyle: import("styled-components").StyledComponent<"div", any, TagRemoveContainerProps, never>;
5
6
  export declare const TagIconWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
6
7
  export declare const TagStyle: import("styled-components").StyledComponent<"div", any, TagProps, never>;
package/es/@next/Tag/TagStyle.js CHANGED
@@ -1,21 +1,25 @@
1
1
  import styled from 'styled-components';
2
2
  import { Breakpoints } from '..';
3
3
  import { borderRadius4, borderRadiusHalf } from '../utilities/borderRadius';
4
- import { Blue, Neutral } from '../utilities/colors';
5
- import { space4, space8 } from '../utilities/spacing';
4
+ import { Blue, Green, Orange, Neutral } from '../utilities/colors';
5
+ import { space4 } from '../utilities/spacing';
6
6
  export var TagContentStyle = styled.span.withConfig({
7
7
  displayName: "TagStyle__TagContentStyle",
8
8
  componentId: "sc-r1wv7a-0"
9
- })(["padding:", " ", ";white-space:nowrap;transform:translateY(1px);&[data-removeable='true']{padding-right:0;}"], space4, space8);
9
+ })(["display:inline-flex;padding:", ";white-space:nowrap;transform:translateY(1px);&[data-removeable='true']{padding-right:0;}"], space4);
10
+ export var TagContentWrapper = styled.div.withConfig({
11
+ displayName: "TagStyle__TagContentWrapper",
12
+ componentId: "sc-r1wv7a-1"
13
+ })(["padding:0 ", ";"], space4);
10
14
  export var TagRemoveContainerStyle = styled.div.withConfig({
11
15
  displayName: "TagStyle__TagRemoveContainerStyle",
12
- componentId: "sc-r1wv7a-1"
13
- })(["padding:", ";display:flex;"], space4);
16
+ componentId: "sc-r1wv7a-2"
17
+ })(["padding:", " ", " ", " 0;display:flex;.remove-button-icon{svg{width:20px;height:20px;}}@media (max-width:", "){.remove-button-icon{svg{width:18px;height:18px;}}}"], space4, space4, space4, Breakpoints.large);
14
18
  export var TagIconWrapper = styled.div.withConfig({
15
19
  displayName: "TagStyle__TagIconWrapper",
16
- componentId: "sc-r1wv7a-2"
20
+ componentId: "sc-r1wv7a-3"
17
21
  })(["display:flex;justify-content:center;align-items:center;&:focus-visible{margin:-2px;outline:none;border:2px solid ", ";border-radius:", ";}"], Blue.S100, borderRadius4);
18
22
  export var TagStyle = styled.div.withConfig({
19
23
  displayName: "TagStyle",
20
- componentId: "sc-r1wv7a-3"
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);
24
+ componentId: "sc-r1wv7a-4"
25
+ })(["display:inline-flex;align-items:center;background-color:", ";border:0;border-radius:", ";width:fit-content;padding:0;&:not([data-removeable='true']):not([data-clickable='true']){&[data-content-type='neutral']{background-color:", ";}&[data-content-type='success']{background-color:", ";}&[data-content-type='warning']{background-color:", ";}}&[data-clickable='true']{cursor:pointer;background-color:", ";&: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;}}}& svg{padding:0;width:20px;height:20px;}& svg:hover{cursor:pointer;background-color:", ";border-radius:", ";}& svg:active{cursor:pointer;background-color:", ";fill:", ";border-radius:", ";}@media (max-width:", "){& svg{width:18px;height:18px;}}"], Blue.S08, borderRadius4, Neutral.B95, Green.B89, Orange.S21, Blue.S08, Blue.S100, Blue.S100, Blue.S100, Neutral.B100, Blue.S54, Neutral.B95, Neutral.B95, borderRadiusHalf, Neutral.B40, Neutral.B100, borderRadiusHalf, Breakpoints.large);
package/lib/@next/Tag/Tag.d.ts CHANGED
@@ -1,10 +1,13 @@
1
1
  import React from 'react';
2
+ import { IconNames } from '../Icon/icons/icons';
2
3
  export interface TagProps extends React.HTMLAttributes<HTMLDivElement> {
3
4
  children?: React.ReactNode;
4
5
  value?: string;
5
6
  onRemove?: (() => void) | null | void;
6
7
  textColor?: string;
7
8
  disabled?: boolean;
9
+ contentType?: 'neutral' | 'success' | 'warning';
10
+ iconName?: IconNames;
8
11
  }
9
12
  export declare type TagRemoveContainerProps = React.HTMLAttributes<HTMLDivElement>;
10
13
  export declare type TagContentProps = React.HTMLAttributes<HTMLSpanElement> & TagProps;
package/lib/@next/Tag/Tag.js CHANGED
@@ -10,7 +10,7 @@ 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", "onClick", "disabled"];
13
+ var _excluded = ["children", "onRemove", "value", "textColor", "onClick", "disabled", "contentType", "iconName"];
14
14
  var Tag = /*#__PURE__*/_react["default"].forwardRef(function Tag(_ref, ref) {
15
15
  var children = _ref.children,
16
16
  onRemove = _ref.onRemove,
@@ -18,6 +18,9 @@ var Tag = /*#__PURE__*/_react["default"].forwardRef(function Tag(_ref, ref) {
18
18
  textColor = _ref.textColor,
19
19
  onClick = _ref.onClick,
20
20
  disabled = _ref.disabled,
21
+ _ref$contentType = _ref.contentType,
22
+ contentType = _ref$contentType === void 0 ? 'neutral' : _ref$contentType,
23
+ iconName = _ref.iconName,
21
24
  props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
22
25
  var handleTextColor = function handleTextColor() {
23
26
  if (disabled) {
@@ -39,8 +42,8 @@ var Tag = /*#__PURE__*/_react["default"].forwardRef(function Tag(_ref, ref) {
39
42
  }, /*#__PURE__*/_react["default"].createElement(_Icon.Icon, {
40
43
  name: "ri-close",
41
44
  fill: _colors.Neutral.B40,
42
- height: 20,
43
- onClick: onRemove
45
+ onClick: onRemove,
46
+ className: "remove-button-icon"
44
47
  })));
45
48
  return /*#__PURE__*/_react["default"].createElement(_TagStyle.TagStyle, (0, _extends2["default"])({
46
49
  ref: ref
@@ -48,11 +51,17 @@ var Tag = /*#__PURE__*/_react["default"].forwardRef(function Tag(_ref, ref) {
48
51
  value: value,
49
52
  onClick: !disabled && onClick,
50
53
  "data-clickable": !!onClick,
54
+ "data-removeable": !!onRemove,
55
+ "data-content-type": contentType,
51
56
  role: !!onClick ? 'button' : undefined,
52
57
  "data-disabled": disabled,
53
58
  as: !!onClick ? 'button' : 'div'
54
59
  }), /*#__PURE__*/_react["default"].createElement(_TagStyle.TagContentStyle, {
55
60
  "data-removeable": !!onRemove
56
- }, content), removeButton);
61
+ }, iconName && /*#__PURE__*/_react["default"].createElement(_Icon.Icon, {
62
+ name: iconName,
63
+ fill: _colors.Neutral.B40,
64
+ height: 20
65
+ }), /*#__PURE__*/_react["default"].createElement(_TagStyle.TagContentWrapper, null, content)), removeButton);
57
66
  });
58
67
  exports.Tag = Tag;
package/lib/@next/Tag/Tag.stories.d.ts CHANGED
@@ -2,6 +2,7 @@ import { Meta } from '@storybook/react';
2
2
  declare const _default: Meta<import("@storybook/react").Args>;
3
3
  export default _default;
4
4
  export declare const Default: any;
5
+ export declare const WithIcon: any;
5
6
  export declare const Removeable: any;
6
7
  export declare const Clickable: any;
7
8
  export declare const ClickableDisabled: any;
package/lib/@next/Tag/TagStyle.d.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  /// <reference types="react" />
2
2
  import { TagProps, TagRemoveContainerProps } from './Tag';
3
3
  export declare const TagContentStyle: import("styled-components").StyledComponent<"span", any, import("react").HTMLAttributes<HTMLSpanElement> & TagProps, never>;
4
+ export declare const TagContentWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
4
5
  export declare const TagRemoveContainerStyle: import("styled-components").StyledComponent<"div", any, TagRemoveContainerProps, never>;
5
6
  export declare const TagIconWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
6
7
  export declare const TagStyle: import("styled-components").StyledComponent<"div", any, TagProps, never>;
package/lib/@next/Tag/TagStyle.js CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
4
  exports.__esModule = true;
5
- exports.TagStyle = exports.TagRemoveContainerStyle = exports.TagIconWrapper = exports.TagContentStyle = void 0;
5
+ exports.TagStyle = exports.TagRemoveContainerStyle = exports.TagIconWrapper = exports.TagContentWrapper = exports.TagContentStyle = void 0;
6
6
  var _styledComponents = _interopRequireDefault(require("styled-components"));
7
7
  var _ = require("..");
8
8
  var _borderRadius = require("../utilities/borderRadius");
@@ -11,20 +11,25 @@ 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:", " ", ";white-space:nowrap;transform:translateY(1px);&[data-removeable='true']{padding-right:0;}"], _spacing.space4, _spacing.space8);
14
+ })(["display:inline-flex;padding:", ";white-space:nowrap;transform:translateY(1px);&[data-removeable='true']{padding-right:0;}"], _spacing.space4);
15
15
  exports.TagContentStyle = TagContentStyle;
16
+ var TagContentWrapper = _styledComponents["default"].div.withConfig({
17
+ displayName: "TagStyle__TagContentWrapper",
18
+ componentId: "sc-r1wv7a-1"
19
+ })(["padding:0 ", ";"], _spacing.space4);
20
+ exports.TagContentWrapper = TagContentWrapper;
16
21
  var TagRemoveContainerStyle = _styledComponents["default"].div.withConfig({
17
22
  displayName: "TagStyle__TagRemoveContainerStyle",
18
- componentId: "sc-r1wv7a-1"
19
- })(["padding:", ";display:flex;"], _spacing.space4);
23
+ componentId: "sc-r1wv7a-2"
24
+ })(["padding:", " ", " ", " 0;display:flex;.remove-button-icon{svg{width:20px;height:20px;}}@media (max-width:", "){.remove-button-icon{svg{width:18px;height:18px;}}}"], _spacing.space4, _spacing.space4, _spacing.space4, _.Breakpoints.large);
20
25
  exports.TagRemoveContainerStyle = TagRemoveContainerStyle;
21
26
  var TagIconWrapper = _styledComponents["default"].div.withConfig({
22
27
  displayName: "TagStyle__TagIconWrapper",
23
- componentId: "sc-r1wv7a-2"
28
+ componentId: "sc-r1wv7a-3"
24
29
  })(["display:flex;justify-content:center;align-items:center;&:focus-visible{margin:-2px;outline:none;border:2px solid ", ";border-radius:", ";}"], _colors.Blue.S100, _borderRadius.borderRadius4);
25
30
  exports.TagIconWrapper = TagIconWrapper;
26
31
  var TagStyle = _styledComponents["default"].div.withConfig({
27
32
  displayName: "TagStyle",
28
- componentId: "sc-r1wv7a-3"
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);
33
+ componentId: "sc-r1wv7a-4"
34
+ })(["display:inline-flex;align-items:center;background-color:", ";border:0;border-radius:", ";width:fit-content;padding:0;&:not([data-removeable='true']):not([data-clickable='true']){&[data-content-type='neutral']{background-color:", ";}&[data-content-type='success']{background-color:", ";}&[data-content-type='warning']{background-color:", ";}}&[data-clickable='true']{cursor:pointer;background-color:", ";&: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;}}}& svg{padding:0;width:20px;height:20px;}& svg:hover{cursor:pointer;background-color:", ";border-radius:", ";}& svg:active{cursor:pointer;background-color:", ";fill:", ";border-radius:", ";}@media (max-width:", "){& svg{width:18px;height:18px;}}"], _colors.Blue.S08, _borderRadius.borderRadius4, _colors.Neutral.B95, _colors.Green.B89, _colors.Orange.S21, _colors.Blue.S08, _colors.Blue.S100, _colors.Blue.S100, _colors.Blue.S100, _colors.Neutral.B100, _colors.Blue.S54, _colors.Neutral.B95, _colors.Neutral.B95, _borderRadius.borderRadiusHalf, _colors.Neutral.B40, _colors.Neutral.B100, _borderRadius.borderRadiusHalf, _.Breakpoints.large);
30
35
  exports.TagStyle = TagStyle;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "glints-aries",
3
- "version": "4.0.321",
3
+ "version": "4.0.322",
4
4
  "description": "Glints ui-kit for frontend",
5
5
  "main": "./lib/index.js",
6
6
  "module": "./es/index.js",