glints-aries 4.0.184 → 4.0.185

package/es/@next/Tag/Tag.js

@@ -1,16 +1,33 @@
+import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
-var _excluded = ["children"];
+var _excluded = ["children", "onRemove", "value"];
 import React from 'react';
+import { Icon } from '../Icon';
 import { Typography } from '../Typography';
 import { Neutral } from '../utilities/colors';
-import { TagStyle } from './TagStyle';
+import { TagContentStyle, TagIconWrapper, TagRemoveContainerStyle, TagStyle } from './TagStyle';
 export var Tag = function Tag(_ref) {
   var children = _ref.children,
+    onRemove = _ref.onRemove,
+    value = _ref.value,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
   var content = typeof children === 'string' ? /*#__PURE__*/React.createElement(Typography, {
     variant: "caption",
     color: Neutral.B18,
     as: 'span'
   }, children) : children;
-  return /*#__PURE__*/React.createElement(TagStyle, props, content);
+  var removeButton = onRemove && /*#__PURE__*/React.createElement(TagRemoveContainerStyle, null, /*#__PURE__*/React.createElement(TagIconWrapper, {
+    role: "button",
+    tabIndex: 0
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "ri-close",
+    fill: Neutral.B40,
+    height: 20,
+    onClick: onRemove
+  })));
+  return /*#__PURE__*/React.createElement(TagStyle, _extends({}, props, {
+    value: value
+  }), /*#__PURE__*/React.createElement(TagContentStyle, {
+    "data-removeable": !!onRemove
+  }, content), removeButton);
 };

package/es/@next/Tag/Tag.stories.js

@@ -1,17 +1,63 @@
-import React from 'react';
+import React, { useCallback, useState } from 'react';
 import { BaseContainer } from '../../Layout/GlintsContainer/GlintsContainer';
 import { Tag } from './Tag';
 Tag.displayName = 'Tag';
-var defaultText = 'Basic Tag';
 export default {
   title: '@next/Tag',
   component: Tag,
   decorators: [function (Story) {
     return /*#__PURE__*/React.createElement(BaseContainer, null, Story());
-  }]
+  }],
+  argTypes: {
+    value: {
+      description: 'A value to supply, required when onRemove function is supplied',
+      control: {
+        type: null
+      }
+    },
+    onRemove: {
+      description: 'A function callback to pass in to when the remove icon is pressed',
+      control: {
+        type: null
+      }
+    }
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: 'Tags represent a set of interactive keywords that help label, organize, and categorize objects'
+      }
+    }
+  }
 };
-var Template = function Template(args) {
-  return /*#__PURE__*/React.createElement(Tag, args, defaultText);
+var DefaultTemplate = function DefaultTemplate() {
+  return /*#__PURE__*/React.createElement(Tag, null, "Basic Tag");
 };
-export var Interactive = Template.bind({});
-Interactive.args = {};
+var RemoveableTemplate = function RemoveableTemplate() {
+  var _useState = useState(['Years of Experience: 0 to 3 Years, 3 to 5 Years', 'Expected Salary: $1.000.000 to $3.000.000', 'Current Location: Agats, Indonesia']),
+    selectedTags = _useState[0],
+    setSelectedTags = _useState[1];
+  var removeTag = useCallback(function (tag) {
+    return function () {
+      setSelectedTags(function (previousTags) {
+        return previousTags.filter(function (previousTag) {
+          return previousTag !== tag;
+        });
+      });
+    };
+  }, []);
+  var tagMarkup = selectedTags.map(function (option) {
+    return /*#__PURE__*/React.createElement(Tag, {
+      style: {
+        marginRight: '4px'
+      },
+      key: option,
+      onRemove: removeTag(option)
+    }, option);
+  });
+  return /*#__PURE__*/React.createElement(React.Fragment, null, tagMarkup);
+};
+export var Default = DefaultTemplate.bind({});
+Default.args = {};
+export var Removeable = RemoveableTemplate.bind({});
+Removeable.args = {};

package/es/@next/Tag/TagStyle.js

@@ -1,9 +1,21 @@
 import styled from 'styled-components';
 import { Breakpoints } from '..';
-import { borderRadius4 } from '../utilities/borderRadius';
-import { Blue } from '../utilities/colors';
+import { borderRadius4, borderRadiusHalf } from '../utilities/borderRadius';
+import { Blue, Neutral } from '../utilities/colors';
 import { space4, space8 } from '../utilities/spacing';
+export var TagContentStyle = styled.span.withConfig({
+  displayName: "TagStyle__TagContentStyle",
+  componentId: "sc-r1wv7a-0"
+})(["padding:", " ", ";&[data-removeable='true']{padding-right:0;}"], space4, space8);
+export var TagRemoveContainerStyle = styled.div.withConfig({
+  displayName: "TagStyle__TagRemoveContainerStyle",
+  componentId: "sc-r1wv7a-1"
+})(["padding:", ";display:flex;"], space4);
+export var TagIconWrapper = styled.div.withConfig({
+  displayName: "TagStyle__TagIconWrapper",
+  componentId: "sc-r1wv7a-2"
+})(["display:flex;justify-content:center;align-items:center;&:focus-visible{margin:-2px;outline:none;border:2px solid ", ";border-radius:", ";}"], Blue.S100, borderRadius4);
 export var TagStyle = styled.div.withConfig({
   displayName: "TagStyle",
-  componentId: "sc-r1wv7a-0"
-})(["display:inline-flex;background-color:", ";width:fit-content;padding:", " ", ";border-radius:", ";@media (max-width:", "){font-size:12px;}"], Blue.S08, space4, space8, borderRadius4, Breakpoints.large);
+  componentId: "sc-r1wv7a-3"
+})(["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);

package/es/src/@next/Tag/Tag.d.ts

@@ -1,5 +1,9 @@
 import React from 'react';
 export interface TagProps extends React.HTMLAttributes<HTMLDivElement> {
     children?: React.ReactNode;
+    value?: string;
+    onRemove?: (() => void) | null;
 }
-export declare const Tag: ({ children, ...props }: TagProps) => JSX.Element;
+export declare type TagRemoveContainerProps = React.HTMLAttributes<HTMLDivElement>;
+export declare type TagContentProps = React.HTMLAttributes<HTMLSpanElement> & TagProps;
+export declare const Tag: ({ children, onRemove, value, ...props }: TagProps) => JSX.Element;

package/es/src/@next/Tag/Tag.stories.d.ts

@@ -1,4 +1,5 @@
 import { Meta } from '@storybook/react';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
-export declare const Interactive: any;
+export declare const Default: any;
+export declare const Removeable: any;

package/es/src/@next/Tag/TagStyle.d.ts

@@ -1,2 +1,6 @@
-import { TagProps } from './Tag';
+/// <reference types="react" />
+import { TagProps, TagRemoveContainerProps } from './Tag';
+export declare const TagContentStyle: import("styled-components").StyledComponent<"span", any, import("react").HTMLAttributes<HTMLSpanElement> & TagProps, never>;
+export declare const TagRemoveContainerStyle: import("styled-components").StyledComponent<"div", any, TagRemoveContainerProps, never>;
+export declare const TagIconWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const TagStyle: import("styled-components").StyledComponent<"div", any, TagProps, never>;

package/lib/@next/Tag/Tag.js

@@ -3,20 +3,37 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
 exports.Tag = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _react = _interopRequireDefault(require("react"));
+var _Icon = require("../Icon");
 var _Typography = require("../Typography");
 var _colors = require("../utilities/colors");
 var _TagStyle = require("./TagStyle");
-var _excluded = ["children"];
+var _excluded = ["children", "onRemove", "value"];
 var Tag = function Tag(_ref) {
   var children = _ref.children,
+    onRemove = _ref.onRemove,
+    value = _ref.value,
     props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
   var content = typeof children === 'string' ? /*#__PURE__*/_react["default"].createElement(_Typography.Typography, {
     variant: "caption",
     color: _colors.Neutral.B18,
     as: 'span'
   }, children) : children;
-  return /*#__PURE__*/_react["default"].createElement(_TagStyle.TagStyle, props, content);
+  var removeButton = onRemove && /*#__PURE__*/_react["default"].createElement(_TagStyle.TagRemoveContainerStyle, null, /*#__PURE__*/_react["default"].createElement(_TagStyle.TagIconWrapper, {
+    role: "button",
+    tabIndex: 0
+  }, /*#__PURE__*/_react["default"].createElement(_Icon.Icon, {
+    name: "ri-close",
+    fill: _colors.Neutral.B40,
+    height: 20,
+    onClick: onRemove
+  })));
+  return /*#__PURE__*/_react["default"].createElement(_TagStyle.TagStyle, (0, _extends2["default"])({}, props, {
+    value: value
+  }), /*#__PURE__*/_react["default"].createElement(_TagStyle.TagContentStyle, {
+    "data-removeable": !!onRemove
+  }, content), removeButton);
 };
 exports.Tag = Tag;

package/lib/@next/Tag/Tag.stories.js

@@ -1,24 +1,72 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
-exports["default"] = exports.Interactive = void 0;
-var _react = _interopRequireDefault(require("react"));
+exports["default"] = exports.Removeable = exports.Default = void 0;
+var _react = _interopRequireWildcard(require("react"));
 var _GlintsContainer = require("../../Layout/GlintsContainer/GlintsContainer");
 var _Tag = require("./Tag");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 _Tag.Tag.displayName = 'Tag';
-var defaultText = 'Basic Tag';
 var _default = {
   title: '@next/Tag',
   component: _Tag.Tag,
   decorators: [function (Story) {
     return /*#__PURE__*/_react["default"].createElement(_GlintsContainer.BaseContainer, null, Story());
-  }]
+  }],
+  argTypes: {
+    value: {
+      description: 'A value to supply, required when onRemove function is supplied',
+      control: {
+        type: null
+      }
+    },
+    onRemove: {
+      description: 'A function callback to pass in to when the remove icon is pressed',
+      control: {
+        type: null
+      }
+    }
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: 'Tags represent a set of interactive keywords that help label, organize, and categorize objects'
+      }
+    }
+  }
 };
 exports["default"] = _default;
-var Template = function Template(args) {
-  return /*#__PURE__*/_react["default"].createElement(_Tag.Tag, args, defaultText);
+var DefaultTemplate = function DefaultTemplate() {
+  return /*#__PURE__*/_react["default"].createElement(_Tag.Tag, null, "Basic Tag");
 };
-var Interactive = Template.bind({});
-exports.Interactive = Interactive;
-Interactive.args = {};
+var RemoveableTemplate = function RemoveableTemplate() {
+  var _useState = (0, _react.useState)(['Years of Experience: 0 to 3 Years, 3 to 5 Years', 'Expected Salary: $1.000.000 to $3.000.000', 'Current Location: Agats, Indonesia']),
+    selectedTags = _useState[0],
+    setSelectedTags = _useState[1];
+  var removeTag = (0, _react.useCallback)(function (tag) {
+    return function () {
+      setSelectedTags(function (previousTags) {
+        return previousTags.filter(function (previousTag) {
+          return previousTag !== tag;
+        });
+      });
+    };
+  }, []);
+  var tagMarkup = selectedTags.map(function (option) {
+    return /*#__PURE__*/_react["default"].createElement(_Tag.Tag, {
+      style: {
+        marginRight: '4px'
+      },
+      key: option,
+      onRemove: removeTag(option)
+    }, option);
+  });
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, tagMarkup);
+};
+var Default = DefaultTemplate.bind({});
+exports.Default = Default;
+Default.args = {};
+var Removeable = RemoveableTemplate.bind({});
+exports.Removeable = Removeable;
+Removeable.args = {};

package/lib/@next/Tag/TagStyle.js

@@ -2,14 +2,29 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
-exports.TagStyle = void 0;
+exports.TagStyle = exports.TagRemoveContainerStyle = exports.TagIconWrapper = exports.TagContentStyle = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _ = require("..");
 var _borderRadius = require("../utilities/borderRadius");
 var _colors = require("../utilities/colors");
 var _spacing = require("../utilities/spacing");
+var TagContentStyle = _styledComponents["default"].span.withConfig({
+  displayName: "TagStyle__TagContentStyle",
+  componentId: "sc-r1wv7a-0"
+})(["padding:", " ", ";&[data-removeable='true']{padding-right:0;}"], _spacing.space4, _spacing.space8);
+exports.TagContentStyle = TagContentStyle;
+var TagRemoveContainerStyle = _styledComponents["default"].div.withConfig({
+  displayName: "TagStyle__TagRemoveContainerStyle",
+  componentId: "sc-r1wv7a-1"
+})(["padding:", ";display:flex;"], _spacing.space4);
+exports.TagRemoveContainerStyle = TagRemoveContainerStyle;
+var TagIconWrapper = _styledComponents["default"].div.withConfig({
+  displayName: "TagStyle__TagIconWrapper",
+  componentId: "sc-r1wv7a-2"
+})(["display:flex;justify-content:center;align-items:center;&:focus-visible{margin:-2px;outline:none;border:2px solid ", ";border-radius:", ";}"], _colors.Blue.S100, _borderRadius.borderRadius4);
+exports.TagIconWrapper = TagIconWrapper;
 var TagStyle = _styledComponents["default"].div.withConfig({
   displayName: "TagStyle",
-  componentId: "sc-r1wv7a-0"
-})(["display:inline-flex;background-color:", ";width:fit-content;padding:", " ", ";border-radius:", ";@media (max-width:", "){font-size:12px;}"], _colors.Blue.S08, _spacing.space4, _spacing.space8, _borderRadius.borderRadius4, _.Breakpoints.large);
+  componentId: "sc-r1wv7a-3"
+})(["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);
 exports.TagStyle = TagStyle;

package/lib/src/@next/Tag/Tag.d.ts

@@ -1,5 +1,9 @@
 import React from 'react';
 export interface TagProps extends React.HTMLAttributes<HTMLDivElement> {
     children?: React.ReactNode;
+    value?: string;
+    onRemove?: (() => void) | null;
 }
-export declare const Tag: ({ children, ...props }: TagProps) => JSX.Element;
+export declare type TagRemoveContainerProps = React.HTMLAttributes<HTMLDivElement>;
+export declare type TagContentProps = React.HTMLAttributes<HTMLSpanElement> & TagProps;
+export declare const Tag: ({ children, onRemove, value, ...props }: TagProps) => JSX.Element;

package/lib/src/@next/Tag/Tag.stories.d.ts

@@ -1,4 +1,5 @@
 import { Meta } from '@storybook/react';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
-export declare const Interactive: any;
+export declare const Default: any;
+export declare const Removeable: any;

package/lib/src/@next/Tag/TagStyle.d.ts

@@ -1,2 +1,6 @@
-import { TagProps } from './Tag';
+/// <reference types="react" />
+import { TagProps, TagRemoveContainerProps } from './Tag';
+export declare const TagContentStyle: import("styled-components").StyledComponent<"span", any, import("react").HTMLAttributes<HTMLSpanElement> & TagProps, never>;
+export declare const TagRemoveContainerStyle: import("styled-components").StyledComponent<"div", any, TagRemoveContainerProps, never>;
+export declare const TagIconWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const TagStyle: import("styled-components").StyledComponent<"div", any, TagProps, never>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "glints-aries",
-  "version": "4.0.184",
+  "version": "4.0.185",
   "description": "Glints ui-kit for frontend",
   "main": "./lib/index.js",
   "module": "./es/index.js",