@uncinc/uncinc-react-kitchen-sink 2.6.5 → 2.6.6

package/dist/components/Tag/index.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import './style.scss';
+export interface TagProps {
+    name: string;
+    removable?: boolean;
+    stretchClickableArea?: boolean;
+    deleteButtonAriaLabel?: string;
+    className?: string;
+    onDelete?: (name: string) => void;
+}
+declare const Tag: React.FC<TagProps>;
+export default Tag;

package/dist/components/Tag/index.js

@@ -0,0 +1,43 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _reactI18next = require("react-i18next");
+require("./style.scss");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var Tag = function Tag(props) {
+  var _useTranslation = (0, _reactI18next.useTranslation)(),
+    t = _useTranslation.t;
+  var name = props.name,
+    removable = props.removable,
+    stretchClickableArea = props.stretchClickableArea,
+    deleteButtonAriaLabel = props.deleteButtonAriaLabel,
+    className = props.className,
+    onDelete = props.onDelete;
+  var classNames = (0, _classnames.default)('Tag', {
+    'Tag--stretch-clickable-area': stretchClickableArea
+  }, className);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: classNames
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "Tag__name"
+  }, name), removable && onDelete && /*#__PURE__*/_react.default.createElement("button", {
+    className: "Tag__delete-button icon-after icon-cross icon-variant-1",
+    type: "button",
+    "aria-label": deleteButtonAriaLabel || t('atoms.tag.delete'),
+    onClick: function onClick() {
+      return onDelete(name);
+    }
+  }));
+};
+Tag.defaultProps = {
+  removable: true,
+  stretchClickableArea: true,
+  onDelete: function onDelete() {}
+};
+var _default = Tag;
+exports.default = _default;

package/dist/components/Tag/style.scss

@@ -0,0 +1,27 @@
+@import '../../styles/assets/mixins';
+
+.Tag {
+  position: relative;
+  display: inline-flex;
+  flex-wrap: nowrap;
+  align-items: center; 
+
+  &__delete-button {
+    // Expanding the clickable area by adding padding,
+    // and compensating this, using negative margin.
+    margin: -10px;
+    border: 0;
+    padding: 10px;
+    background-color: transparent;
+    cursor: pointer;
+  }
+
+  &--stretch-clickable-area .Tag__delete-button {
+    margin: 0;
+    padding: 0;
+    
+    &:before {
+      @include block-content;
+    }
+  }
+}

package/dist/config/i18next/locales/en.json

@@ -26,6 +26,11 @@
   "searchkit": {
     "reset_search": "Reconfigure search"
   },
+  "atoms": {
+    "tag": {
+      "delete": "Delete tag"
+    }
+  },
   "organisms": {
     "media_player": {
       "not_supported_message": "The current file cannot be played."

package/dist/config/i18next/locales/nl.json

@@ -26,6 +26,11 @@
   "searchkit": {
     "reset_search": "Zoeken opnieuw instellen"
   },
+  "atoms": {
+    "tag": {
+      "delete": "Verwijder tag"
+    }
+  },
   "organisms": {
     "media_player": {
       "not_supported_message": "Het huidige bestand kan niet worden afgespeeld."

package/dist/index.d.ts

@@ -8,6 +8,7 @@ export { default as Image } from "./components/Image";
 export { default as ImageBackground } from "./components/Image/Background";
 export { default as Lottie } from "./components/Lottie";
 export { default as LottieAnimationWithMousePosition } from "./components/Lottie/LottieAnimationWithMousePosition";
+export { default as Tag } from "./components/Tag";
 export { default as WysiwygField } from "./components/WysiwygField";
 export { default as CallToAction } from "./components/CallToAction";
 export { default as ChipFacet } from "./components/SearchKit/Facets/ChipFacet";

package/dist/index.js

@@ -345,6 +345,12 @@ Object.defineProperty(exports, "TableRender", {
     return _TableRender.default;
   }
 });
+Object.defineProperty(exports, "Tag", {
+  enumerable: true,
+  get: function get() {
+    return _Tag.default;
+  }
+});
 Object.defineProperty(exports, "Text", {
   enumerable: true,
   get: function get() {
@@ -469,6 +475,7 @@ var _Image = _interopRequireDefault(require("./components/Image"));
 var _Background = _interopRequireDefault(require("./components/Image/Background"));
 var _Lottie = _interopRequireDefault(require("./components/Lottie"));
 var _LottieAnimationWithMousePosition = _interopRequireDefault(require("./components/Lottie/LottieAnimationWithMousePosition"));
+var _Tag = _interopRequireDefault(require("./components/Tag"));
 var _WysiwygField = _interopRequireDefault(require("./components/WysiwygField"));
 var _CallToAction = _interopRequireDefault(require("./components/CallToAction"));
 var _ChipFacet = _interopRequireDefault(require("./components/SearchKit/Facets/ChipFacet"));

package/dist/styles/assets/_mixins.scss

@@ -103,3 +103,12 @@
     line-height: $desktop--line-height--body--large;
   }
 }
+
+// Other mixins
+
+// Useful for stretching the clickable area of links or buttons around its parent block.
+@mixin block-content {
+  content: '';
+  position: absolute;
+  inset: 0;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uncinc/uncinc-react-kitchen-sink",
-  "version": "2.6.5",
+  "version": "2.6.6",
   "description": "Default React components that are easily extended.",
   "author": "uncinc",
   "license": "MIT",