orcs-design-system 2.0.70 → 2.0.71

package/es/components/Tag/Tag.stories.js

@@ -1,6 +1,7 @@
 import React from "react";
 import Tag from ".";
 import Flex from "../Flex";
+import Spacer from "../Spacer";
 import mdx from "./Tag.mdx";
 export default {
   title: "Components/Tag",
@@ -12,7 +13,7 @@ export default {
   },
   decorators: [function (storyFn) {
     return /*#__PURE__*/React.createElement(Flex, {
-      center: true
+      flexWrap: "wrap"
     }, storyFn());
   }]
 };
@@ -21,23 +22,67 @@ export var defaultTag = function defaultTag() {
 };
 defaultTag.storyName = "Default";
 export var selected = function selected() {
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Tag, {
+  return /*#__PURE__*/React.createElement(Spacer, {
+    m: "2px"
+  }, /*#__PURE__*/React.createElement(Tag, {
     selected: true
   }, "devops"), /*#__PURE__*/React.createElement(Tag, {
     selected: true
   }, "software engineering"), /*#__PURE__*/React.createElement(Tag, null, "product design"), /*#__PURE__*/React.createElement(Tag, null, "digital transformation"));
 };
-export var noCross = function noCross() {
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Tag, {
+export var showEdit = function showEdit() {
+  return /*#__PURE__*/React.createElement(Spacer, {
+    m: "2px"
+  }, /*#__PURE__*/React.createElement(Tag, {
     selected: true,
-    hideCross: true
+    showEdit: true
   }, "devops"), /*#__PURE__*/React.createElement(Tag, {
     selected: true,
-    hideCross: true
-  }, "software engineering"), /*#__PURE__*/React.createElement(Tag, null, "product design"), /*#__PURE__*/React.createElement(Tag, null, "digital transformation"));
+    showEdit: true
+  }, "software engineering"), /*#__PURE__*/React.createElement(Tag, {
+    showEdit: true
+  }, "product design"), /*#__PURE__*/React.createElement(Tag, {
+    showEdit: true
+  }, "digital transformation"));
+};
+export var showRemove = function showRemove() {
+  return /*#__PURE__*/React.createElement(Spacer, {
+    m: "2px"
+  }, /*#__PURE__*/React.createElement(Tag, {
+    selected: true,
+    showRemove: true
+  }, "devops"), /*#__PURE__*/React.createElement(Tag, {
+    selected: true,
+    showRemove: true
+  }, "software engineering"), /*#__PURE__*/React.createElement(Tag, {
+    showRemove: true
+  }, "product design"), /*#__PURE__*/React.createElement(Tag, {
+    showRemove: true
+  }, "digital transformation"));
+};
+export var showEditAndRemove = function showEditAndRemove() {
+  return /*#__PURE__*/React.createElement(Spacer, {
+    m: "2px"
+  }, /*#__PURE__*/React.createElement(Tag, {
+    selected: true,
+    showEdit: true,
+    showRemove: true
+  }, "devops"), /*#__PURE__*/React.createElement(Tag, {
+    selected: true,
+    showEdit: true,
+    showRemove: true
+  }, "software engineering"), /*#__PURE__*/React.createElement(Tag, {
+    showEdit: true,
+    showRemove: true
+  }, "product design"), /*#__PURE__*/React.createElement(Tag, {
+    showEdit: true,
+    showRemove: true
+  }, "digital transformation"));
 };
 export var disabled = function disabled() {
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Tag, {
+  return /*#__PURE__*/React.createElement(Spacer, {
+    m: "2px"
+  }, /*#__PURE__*/React.createElement(Tag, {
     disabled: true
   }, "devops"), /*#__PURE__*/React.createElement(Tag, {
     disabled: true
@@ -47,6 +92,42 @@ export var disabled = function disabled() {
     disabled: true
   }, "digital transformation"));
 };
+export var withTagType = function withTagType() {
+  return /*#__PURE__*/React.createElement(Spacer, {
+    m: "2px"
+  }, /*#__PURE__*/React.createElement(Tag, {
+    tagType: "skill"
+  }, "devops"), /*#__PURE__*/React.createElement(Tag, {
+    tagType: "skill",
+    showRemove: true
+  }, "devops"), /*#__PURE__*/React.createElement(Tag, {
+    tagType: "skill",
+    showEdit: true
+  }, "devops"), /*#__PURE__*/React.createElement(Tag, {
+    tagType: "skill",
+    showRemove: true,
+    showEdit: true
+  }, "devops"), /*#__PURE__*/React.createElement(Tag, {
+    selected: true,
+    tagType: "skill"
+  }, "javascript"), /*#__PURE__*/React.createElement(Tag, {
+    selected: true,
+    showRemove: true,
+    tagType: "skill"
+  }, "javascript"), /*#__PURE__*/React.createElement(Tag, {
+    selected: true,
+    showEdit: true,
+    tagType: "skill"
+  }, "javascript"), /*#__PURE__*/React.createElement(Tag, {
+    selected: true,
+    showRemove: true,
+    showEdit: true,
+    tagType: "skill"
+  }, "javascript"), /*#__PURE__*/React.createElement(Tag, {
+    disabled: true,
+    tagType: "skill"
+  }, "product design"));
+};
 defaultTag.__docgenInfo = {
   "description": "",
   "methods": [],
@@ -57,13 +138,28 @@ selected.__docgenInfo = {
   "methods": [],
   "displayName": "selected"
 };
-noCross.__docgenInfo = {
+showEdit.__docgenInfo = {
   "description": "",
   "methods": [],
-  "displayName": "noCross"
+  "displayName": "showEdit"
+};
+showRemove.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "showRemove"
+};
+showEditAndRemove.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "showEditAndRemove"
 };
 disabled.__docgenInfo = {
   "description": "",
   "methods": [],
   "displayName": "disabled"
+};
+withTagType.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "withTagType"
 };

package/es/components/Tag/index.js

@@ -1,38 +1,66 @@
-import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import React from "react";
 import styled, { css, ThemeProvider } from "styled-components";
 import PropTypes from "prop-types";
 import systemtheme from "../../systemtheme";
 import { space, layout } from "styled-system";
+import Icon from "../Icon";
 import { themeGet } from "@styled-system/theme-get";
-var TagWrapper = styled.button.withConfig({
+var TagWrapper = styled.div.withConfig({
   displayName: "Tag__TagWrapper",
   componentId: "sc-1dh2aa8-0"
-})(["", " ", " -moz-appearance:none;-webkit-appearance:none;appearance:none;box-shadow:none;font-family:\"Open Sans\",\"Helvetica Neue\",Helvetica,Arial,sans-serif;display:block;border-radius:13px;font-size:1.4rem;font-weight:600;margin:3px;white-space:nowrap;position:relative;transition:", ";cursor:", ";border:solid 1px ", ";padding:", ";background:", ";color:", ";", " &:focus{outline:0;box-shadow:", ";}", ""], space, layout, themeGet("transition.transitionDefault"), function (props) {
+})(["", " ", " display:flex;align-items:center;justify-content:center;"], space, layout);
+var TagValue = styled.button.withConfig({
+  displayName: "Tag__TagValue",
+  componentId: "sc-1dh2aa8-1"
+})(["-moz-appearance:none;-webkit-appearance:none;appearance:none;box-shadow:none;font-family:\"Open Sans\",\"Helvetica Neue\",Helvetica,Arial,sans-serif;display:flex;align-items:center;flex-wrap:nowrap;font-size:1.4rem;font-weight:600;white-space:nowrap;position:relative;z-index:1;transition:", ";cursor:", ";border-radius:", ";border:solid 1px ", ";padding:", ";background-color:", ";color:", ";", " &:focus{outline:0;z-index:2;box-shadow:", ";}"], themeGet("transition.transitionDefault"), function (props) {
   return props.disabled ? "default" : "pointer";
+}, function (props) {
+  return props.showEdit || props.showRemove ? "15px 0 0 15px" : "15px";
 }, function (props) {
   return props.disabled ? themeGet("colors.greyDark") : themeGet("colors.primary");
 }, function (props) {
-  return props.hideCross ? "3px 12px 4px 12px;" : props.selected ? "3px 25px 4px 12px;" : "3px 12px 4px 12px;";
+  return props.showEdit || props.showRemove ? "3px 6px 4px 12px" : "3px 12px 4px 12px";
 }, function (props) {
   return props.selected ? themeGet("colors.primary") : props.disabled ? themeGet("colors.greyDark") : themeGet("colors.white");
 }, function (props) {
   return props.selected ? themeGet("colors.white") : props.disabled ? themeGet("colors.white") : themeGet("colors.primary");
 }, function (props) {
-  return props.disabled ? css([""]) : css(["&:hover{border:solid 1px ", ";color:", ";background:", ";}"], themeGet("colors.primaryDark"), function (props) {
+  return props.disabled ? css([""]) : css(["&:hover{border:solid 1px ", ";color:", ";background-color:", ";div{color:", ";}}"], themeGet("colors.primaryDark"), function (props) {
     return props.selected ? themeGet("colors.white") : themeGet("colors.primaryDark");
   }, function (props) {
     return props.selected ? themeGet("colors.primaryDark") : themeGet("colors.white");
+  }, function (props) {
+    return props.selected ? themeGet("colors.white") : themeGet("colors.primaryDark");
   });
 }, function (props) {
   return themeGet("shadows.thinOutline")(props) + " " + themeGet("colors.primary30")(props);
+});
+var TagEdit = styled(TagValue).withConfig({
+  displayName: "Tag__TagEdit",
+  componentId: "sc-1dh2aa8-2"
+})(["border-radius:", ";padding:2px 10px 5px 10px;&:focus{z-index:2;box-shadow:-0.5px 0 0 3.5px ", ";}", ""], function (props) {
+  return props.showRemove ? "0" : "0 15px 15px 0";
+}, themeGet("colors.primary30"), function (props) {
+  return props.selected ? css(["border-left:solid 1px ", ";&:hover{border-left:solid 1px ", ";}&:focus{box-shadow:", ";}"], themeGet("colors.primaryDark"), themeGet("colors.primaryDark"), function (props) {
+    return themeGet("shadows.thinOutline")(props) + " " + themeGet("colors.primary30")(props);
+  }) : css(["border-left:0;&:hover{border-left:0;}"]);
+});
+var TagRemove = styled(TagValue).withConfig({
+  displayName: "Tag__TagRemove",
+  componentId: "sc-1dh2aa8-3"
+})(["border-radius:0 15px 15px 0;padding:2px 12px 5px 12px;&:focus{z-index:2;box-shadow:-0.5px 0 0 3.5px ", ";}", ""], themeGet("colors.primary30"), function (props) {
+  return props.selected ? css(["border-left:solid 1px ", ";&:hover{border-left:solid 1px ", ";}&:focus{box-shadow:", ";}"], themeGet("colors.primaryDark"), themeGet("colors.primaryDark"), function (props) {
+    return themeGet("shadows.thinOutline")(props) + " " + themeGet("colors.primary30")(props);
+  }) : css(["border-left:0;&:hover{border-left:0;}"]);
+});
+var TagType = styled.div.withConfig({
+  displayName: "Tag__TagType",
+  componentId: "sc-1dh2aa8-4"
+})(["text-transform:uppercase;margin-left:", ";padding:3px;line-height:1;border-radius:", ";font-size:", ";background-color:", ";color:", ";"], themeGet("space.s"), themeGet("radii.1"), themeGet("fontSizes.0"), function (props) {
+  return props.selected ? themeGet("colors.primaryDark") : props.disabled ? themeGet("colors.greyDarker") : themeGet("colors.primaryLightest");
 }, function (props) {
-  return props.hideCross ? css([""]) : css(["&::after{content:\"+\";display:block;position:absolute;right:7px;top:1px;font-family:\"Open Sans\",\"Helvetica Neue\",Helvetica,Arial,sans-serif;font-size:1.8rem;font-weight:600;transform-origin:50% 50%;color:", ";transition:", ";opacity:", ";transform:", ";}"], themeGet("colors.white"), themeGet("transition.transitionDefault"), function (props) {
-    return props.selected ? 1 : 0;
-  }, function (props) {
-    return props.selected ? "rotate(45deg) scale(1)" : "rotate(45deg) scale(0)";
-  });
+  return props.selected ? themeGet("colors.white") : props.disabled ? themeGet("colors.white") : themeGet("colors.primary");
 });
 /**
  * The top two rows are an example of how tags should be used when they are selectable/unselectable. There is the option to display the cross icon or not.
@@ -43,35 +71,62 @@ var TagWrapper = styled.button.withConfig({
 export default function Tag(_ref) {
   var selected = _ref.selected,
       disabled = _ref.disabled,
-      hideCross = _ref.hideCross,
+      showRemove = _ref.showRemove,
       theme = _ref.theme,
-      props = _objectWithoutProperties(_ref, ["selected", "disabled", "hideCross", "theme"]);
+      tagType = _ref.tagType,
+      showEdit = _ref.showEdit,
+      children = _ref.children,
+      props = _objectWithoutProperties(_ref, ["selected", "disabled", "showRemove", "theme", "tagType", "showEdit", "children"]);
 
   return /*#__PURE__*/React.createElement(ThemeProvider, {
     theme: theme
-  }, /*#__PURE__*/React.createElement(TagWrapper, _extends({
+  }, /*#__PURE__*/React.createElement(TagWrapper, props, /*#__PURE__*/React.createElement(TagValue, {
+    selected: selected,
+    disabled: disabled,
+    showEdit: showEdit,
+    showRemove: showRemove
+  }, children, tagType ? /*#__PURE__*/React.createElement(TagType, {
+    selected: selected,
+    disabled: disabled
+  }, tagType) : null), showEdit ? /*#__PURE__*/React.createElement(TagEdit, {
     selected: selected,
     disabled: disabled,
-    hideCross: hideCross
-  }, props)));
+    showRemove: showRemove
+  }, /*#__PURE__*/React.createElement(Icon, {
+    icon: ["fas", "pen"],
+    size: "xs"
+  })) : null, showRemove ? /*#__PURE__*/React.createElement(TagRemove, {
+    selected: selected,
+    disabled: disabled
+  }, /*#__PURE__*/React.createElement(Icon, {
+    icon: ["fas", "times"],
+    size: "xs"
+  })) : null));
 }
 Tag.propTypes = {
   /** Adds selected styling to tag */
   selected: PropTypes.bool,
 
+  /** Shows the remove button */
+  showRemove: PropTypes.bool,
+
+  /** Shows edit button */
+  showEdit: PropTypes.bool,
+
+  /** Can add a type to a tag as text */
+  tagType: PropTypes.string,
+
   /** Adds disabled attribute and styling to tag */
   disabled: PropTypes.bool,
 
-  /** Hides the cross icon */
-  hideCross: PropTypes.bool,
-
   /** Specifies the design theme */
   theme: PropTypes.object
 };
 Tag.defaultProps = {
   selected: false,
   disabled: false,
-  hideCross: false,
+  showEdit: false,
+  showRemove: false,
   theme: systemtheme
 };
 Tag.__docgenInfo = {
@@ -101,7 +156,7 @@ Tag.__docgenInfo = {
       "required": false,
       "description": "Adds disabled attribute and styling to tag"
     },
-    "hideCross": {
+    "showEdit": {
       "defaultValue": {
         "value": "false",
         "computed": false
@@ -110,7 +165,18 @@ Tag.__docgenInfo = {
         "name": "bool"
       },
       "required": false,
-      "description": "Hides the cross icon"
+      "description": "Shows edit button"
+    },
+    "showRemove": {
+      "defaultValue": {
+        "value": "false",
+        "computed": false
+      },
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": "Shows the remove button"
     },
     "theme": {
       "defaultValue": {
@@ -122,6 +188,13 @@ Tag.__docgenInfo = {
       },
       "required": false,
       "description": "Specifies the design theme"
+    },
+    "tagType": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": "Can add a type to a tag as text"
     }
   }
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "orcs-design-system",
-  "version": "2.0.70",
+  "version": "2.0.71",
   "description": "Orchestrated's Design System, aka: ORCS",
   "keywords": [
     "design",