orcs-design-system 3.2.4 → 3.2.6

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

@@ -1,338 +1,368 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { useState } from "react";
 import Tag from ".";
 import Flex from "../Flex";
 import Spacer from "../Spacer";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export default {
   title: "Components/Tag",
   component: Tag,
-  decorators: [function (storyFn) {
-    return /*#__PURE__*/React.createElement(Flex, {
-      flexWrap: "wrap"
-    }, storyFn());
-  }]
-};
-export var defaultTag = function defaultTag() {
-  return /*#__PURE__*/React.createElement(Tag, null, "Default Tag");
+  decorators: [storyFn => /*#__PURE__*/_jsx(Flex, {
+    flexWrap: "wrap",
+    children: storyFn()
+  })]
 };
+export const defaultTag = () => /*#__PURE__*/_jsx(Tag, {
+  children: "Default Tag"
+});
 defaultTag.storyName = "Default";
-export var Selected = function Selected() {
-  var _useState = useState(true),
-    _useState2 = _slicedToArray(_useState, 2),
-    selectedA = _useState2[0],
-    setSelectedA = _useState2[1];
-  var _useState3 = useState(true),
-    _useState4 = _slicedToArray(_useState3, 2),
-    selectedB = _useState4[0],
-    setSelectedB = _useState4[1];
-  return /*#__PURE__*/React.createElement(Spacer, {
-    m: "2px"
-  }, /*#__PURE__*/React.createElement(Tag, {
-    selected: selectedA,
-    onClick: function onClick() {
-      return setSelectedA(!selectedA);
-    }
-  }, "devops"), /*#__PURE__*/React.createElement(Tag, {
-    selected: selectedB,
-    onClick: function onClick() {
-      return setSelectedB(!selectedB);
-    }
-  }, "software engineering"), /*#__PURE__*/React.createElement(Tag, null, "product design"), /*#__PURE__*/React.createElement(Tag, null, "digital transformation"));
+export const Selected = () => {
+  const [selectedA, setSelectedA] = useState(true);
+  const [selectedB, setSelectedB] = useState(true);
+  return /*#__PURE__*/_jsxs(Spacer, {
+    m: "2px",
+    children: [/*#__PURE__*/_jsx(Tag, {
+      selected: selectedA,
+      onClick: () => setSelectedA(!selectedA),
+      children: "devops"
+    }), /*#__PURE__*/_jsx(Tag, {
+      selected: selectedB,
+      onClick: () => setSelectedB(!selectedB),
+      children: "software engineering"
+    }), /*#__PURE__*/_jsx(Tag, {
+      children: "product design"
+    }), /*#__PURE__*/_jsx(Tag, {
+      children: "digital transformation"
+    })]
+  });
 };
-export var showInfo = function showInfo() {
-  return /*#__PURE__*/React.createElement(Spacer, {
-    m: "2px"
-  }, /*#__PURE__*/React.createElement(Tag, {
+export const showInfo = () => /*#__PURE__*/_jsxs(Spacer, {
+  m: "2px",
+  children: [/*#__PURE__*/_jsx(Tag, {
     selected: true,
     showInfo: true,
-    tagType: "Skill"
-  }, "devops"), /*#__PURE__*/React.createElement(Tag, {
+    tagType: "Skill",
+    children: "devops"
+  }), /*#__PURE__*/_jsx(Tag, {
     selected: true,
     showInfo: true,
-    tagType: "Skill"
-  }, "software engineering"), /*#__PURE__*/React.createElement(Tag, {
+    tagType: "Skill",
+    children: "software engineering"
+  }), /*#__PURE__*/_jsx(Tag, {
     showInfo: true,
-    tagType: "Skill"
-  }, "product design"), /*#__PURE__*/React.createElement(Tag, {
+    tagType: "Skill",
+    children: "product design"
+  }), /*#__PURE__*/_jsx(Tag, {
     showInfo: true,
-    tagType: "Skill"
-  }, "digital transformation"));
-};
-export var showEdit = function showEdit() {
-  return /*#__PURE__*/React.createElement(Spacer, {
-    m: "2px"
-  }, /*#__PURE__*/React.createElement(Tag, {
+    tagType: "Skill",
+    children: "digital transformation"
+  })]
+});
+export const showEdit = () => /*#__PURE__*/_jsxs(Spacer, {
+  m: "2px",
+  children: [/*#__PURE__*/_jsx(Tag, {
     selected: true,
-    showEdit: true
-  }, "devops"), /*#__PURE__*/React.createElement(Tag, {
+    showEdit: true,
+    children: "devops"
+  }), /*#__PURE__*/_jsx(Tag, {
     selected: true,
-    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, {
+    showEdit: true,
+    children: "software engineering"
+  }), /*#__PURE__*/_jsx(Tag, {
+    showEdit: true,
+    children: "product design"
+  }), /*#__PURE__*/_jsx(Tag, {
+    showEdit: true,
+    children: "digital transformation"
+  })]
+});
+export const showRemove = () => /*#__PURE__*/_jsxs(Spacer, {
+  m: "2px",
+  children: [/*#__PURE__*/_jsx(Tag, {
     selected: true,
-    showRemove: true
-  }, "devops"), /*#__PURE__*/React.createElement(Tag, {
+    showRemove: true,
+    children: "devops"
+  }), /*#__PURE__*/_jsx(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, {
+    showRemove: true,
+    children: "software engineering"
+  }), /*#__PURE__*/_jsx(Tag, {
+    showRemove: true,
+    children: "product design"
+  }), /*#__PURE__*/_jsx(Tag, {
+    showRemove: true,
+    children: "digital transformation"
+  })]
+});
+export const showEditAndRemove = () => /*#__PURE__*/_jsxs(Spacer, {
+  m: "2px",
+  children: [/*#__PURE__*/_jsx(Tag, {
     selected: true,
     showEdit: true,
     showRemove: true,
-    onSelect: function onSelect() {
-      return console.log("select");
-    },
-    onEdit: function onEdit() {
-      return console.log("edit");
-    },
-    onRemove: function onRemove() {
-      return console.log("remove");
-    }
-  }, "devops"), /*#__PURE__*/React.createElement(Tag, {
+    onSelect: () => console.log("select"),
+    onEdit: () => console.log("edit"),
+    onRemove: () => console.log("remove"),
+    children: "devops"
+  }), /*#__PURE__*/_jsx(Tag, {
     selected: true,
     showEdit: true,
-    showRemove: true
-  }, "software engineering"), /*#__PURE__*/React.createElement(Tag, {
+    showRemove: true,
+    children: "software engineering"
+  }), /*#__PURE__*/_jsx(Tag, {
     showEdit: true,
     showRemove: true,
-    onSelect: function onSelect() {
-      return console.log("select");
-    },
-    onEdit: function onEdit() {
-      return console.log("edit");
-    },
-    onRemove: function onRemove() {
-      return console.log("remove");
-    }
-  }, "product design"), /*#__PURE__*/React.createElement(Tag, {
+    onSelect: () => console.log("select"),
+    onEdit: () => console.log("edit"),
+    onRemove: () => console.log("remove"),
+    children: "product design"
+  }), /*#__PURE__*/_jsx(Tag, {
     showEdit: true,
-    showRemove: true
-  }, "digital transformation"));
-};
-export var disabled = function disabled() {
-  return /*#__PURE__*/React.createElement(Spacer, {
-    m: "2px"
-  }, /*#__PURE__*/React.createElement(Tag, {
-    disabled: true
-  }, "devops"), /*#__PURE__*/React.createElement(Tag, {
-    disabled: true
-  }, "software engineering"), /*#__PURE__*/React.createElement(Tag, {
+    showRemove: true,
+    children: "digital transformation"
+  })]
+});
+export const disabled = () => /*#__PURE__*/_jsxs(Spacer, {
+  m: "2px",
+  children: [/*#__PURE__*/_jsx(Tag, {
+    disabled: true,
+    children: "devops"
+  }), /*#__PURE__*/_jsx(Tag, {
     disabled: true,
-    isPending: true
-  }, "digital transformation"), /*#__PURE__*/React.createElement(Tag, {
+    children: "software engineering"
+  }), /*#__PURE__*/_jsx(Tag, {
     disabled: true,
     isPending: true,
-    tagType: "skill"
-  }, "product design"));
-};
-export var strikethrough = function strikethrough() {
-  return /*#__PURE__*/React.createElement(Spacer, {
-    m: "2px"
-  }, /*#__PURE__*/React.createElement(Tag, {
-    showStrikeThrough: true
-  }, "devops"), /*#__PURE__*/React.createElement(Tag, {
-    showStrikeThrough: true
-  }, "software engineering"), /*#__PURE__*/React.createElement(Tag, {
+    children: "digital transformation"
+  }), /*#__PURE__*/_jsx(Tag, {
+    disabled: true,
+    isPending: true,
+    tagType: "skill",
+    children: "product design"
+  })]
+});
+export const strikethrough = () => /*#__PURE__*/_jsxs(Spacer, {
+  m: "2px",
+  children: [/*#__PURE__*/_jsx(Tag, {
     showStrikeThrough: true,
-    tagType: "skill"
-  }, "product design"), /*#__PURE__*/React.createElement(Tag, {
+    children: "devops"
+  }), /*#__PURE__*/_jsx(Tag, {
+    showStrikeThrough: true,
+    children: "software engineering"
+  }), /*#__PURE__*/_jsx(Tag, {
+    showStrikeThrough: true,
+    tagType: "skill",
+    children: "product design"
+  }), /*#__PURE__*/_jsx(Tag, {
     showStrikeThrough: true,
     disabled: true,
-    tagType: "skill"
-  }, "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, {
+    children: "digital transformation"
+  })]
+});
+export const withTagType = () => /*#__PURE__*/_jsxs(Spacer, {
+  m: "2px",
+  children: [/*#__PURE__*/_jsx(Tag, {
+    tagType: "skill",
+    children: "devops"
+  }), /*#__PURE__*/_jsx(Tag, {
+    tagType: "skill",
+    showRemove: true,
+    children: "devops"
+  }), /*#__PURE__*/_jsx(Tag, {
     tagType: "skill",
-    showEdit: true
-  }, "devops"), /*#__PURE__*/React.createElement(Tag, {
+    showEdit: true,
+    children: "devops"
+  }), /*#__PURE__*/_jsx(Tag, {
     tagType: "skill",
     showRemove: true,
-    showEdit: true
-  }, "devops"), /*#__PURE__*/React.createElement(Tag, {
+    showEdit: true,
+    children: "devops"
+  }), /*#__PURE__*/_jsx(Tag, {
     selected: true,
-    tagType: "skill"
-  }, "javascript"), /*#__PURE__*/React.createElement(Tag, {
+    tagType: "skill",
+    children: "javascript"
+  }), /*#__PURE__*/_jsx(Tag, {
     selected: true,
     showRemove: true,
-    tagType: "skill"
-  }, "javascript"), /*#__PURE__*/React.createElement(Tag, {
+    tagType: "skill",
+    children: "javascript"
+  }), /*#__PURE__*/_jsx(Tag, {
     selected: true,
     showEdit: true,
-    tagType: "skill"
-  }, "javascript"), /*#__PURE__*/React.createElement(Tag, {
+    tagType: "skill",
+    children: "javascript"
+  }), /*#__PURE__*/_jsx(Tag, {
     selected: true,
     showRemove: true,
     showEdit: true,
-    tagType: "skill"
-  }, "javascript"), /*#__PURE__*/React.createElement(Tag, {
+    tagType: "skill",
+    children: "javascript"
+  }), /*#__PURE__*/_jsx(Tag, {
     disabled: true,
-    tagType: "skill"
-  }, "product design"));
-};
-export var smallVariant = function smallVariant() {
-  return /*#__PURE__*/React.createElement(Tag, {
-    selected: true,
-    tagType: "specialist",
-    small: true
-  }, "Agile Coach");
-};
-export var highlightedVariant = function highlightedVariant() {
-  return /*#__PURE__*/React.createElement(Tag, {
-    selected: true,
-    highlighted: true,
-    tagType: "specialist"
-  }, "Agile Coach");
-};
-export var personTag = function personTag() {
-  return /*#__PURE__*/React.createElement(Spacer, {
-    m: "2px"
-  }, /*#__PURE__*/React.createElement(Tag, {
+    tagType: "skill",
+    children: "product design"
+  })]
+});
+export const smallVariant = () => /*#__PURE__*/_jsx(Tag, {
+  selected: true,
+  tagType: "specialist",
+  small: true,
+  children: "Agile Coach"
+});
+export const highlightedVariant = () => /*#__PURE__*/_jsx(Tag, {
+  selected: true,
+  highlighted: true,
+  tagType: "specialist",
+  children: "Agile Coach"
+});
+export const personTag = () => /*#__PURE__*/_jsxs(Spacer, {
+  m: "2px",
+  children: [/*#__PURE__*/_jsx(Tag, {
     disabled: true,
     personEntity: {
       avatarSrc: "https://api.dicebear.com/7.x/personas/svg?seed=maxi"
-    }
-  }, "Maximillian Dubois"), /*#__PURE__*/React.createElement(Tag, {
+    },
+    children: "Maximillian Dubois"
+  }), /*#__PURE__*/_jsx(Tag, {
     disabled: true,
     personEntity: {
       initials: "MD"
-    }
-  }, "Maximillian Dubois"), /*#__PURE__*/React.createElement(Tag, {
+    },
+    children: "Maximillian Dubois"
+  }), /*#__PURE__*/_jsx(Tag, {
     disabled: true,
-    personEntity: true
-  }, "Maximillian Dubois"), /*#__PURE__*/React.createElement(Tag, {
+    personEntity: true,
+    children: "Maximillian Dubois"
+  }), /*#__PURE__*/_jsx(Tag, {
     personEntity: {
       avatarSrc: "https://api.dicebear.com/7.x/personas/svg?seed=maxi"
-    }
-  }, "Maximillian Dubois"), /*#__PURE__*/React.createElement(Tag, {
+    },
+    children: "Maximillian Dubois"
+  }), /*#__PURE__*/_jsx(Tag, {
     personEntity: {
       initials: "MD"
-    }
-  }, "Maximillian Dubois"), /*#__PURE__*/React.createElement(Tag, {
-    personEntity: true
-  }, "Maximillian Dubois"), /*#__PURE__*/React.createElement(Tag, {
+    },
+    children: "Maximillian Dubois"
+  }), /*#__PURE__*/_jsx(Tag, {
+    personEntity: true,
+    children: "Maximillian Dubois"
+  }), /*#__PURE__*/_jsx(Tag, {
     selected: true,
     personEntity: {
       avatarSrc: "https://api.dicebear.com/7.x/personas/svg?seed=maxi"
-    }
-  }, "Maximillian Dubois"), /*#__PURE__*/React.createElement(Tag, {
+    },
+    children: "Maximillian Dubois"
+  }), /*#__PURE__*/_jsx(Tag, {
     selected: true,
     personEntity: {
       initials: "MD"
-    }
-  }, "Maximillian Dubois"), /*#__PURE__*/React.createElement(Tag, {
+    },
+    children: "Maximillian Dubois"
+  }), /*#__PURE__*/_jsx(Tag, {
     selected: true,
-    personEntity: true
-  }, "Maximillian Dubois"), /*#__PURE__*/React.createElement(Tag, {
+    personEntity: true,
+    children: "Maximillian Dubois"
+  }), /*#__PURE__*/_jsx(Tag, {
     selected: true,
     highlighted: true,
     personEntity: {
       avatarSrc: "https://api.dicebear.com/7.x/personas/svg?seed=maxi"
-    }
-  }, "Maximillian Dubois"), /*#__PURE__*/React.createElement(Tag, {
+    },
+    children: "Maximillian Dubois"
+  }), /*#__PURE__*/_jsx(Tag, {
     selected: true,
     highlighted: true,
     personEntity: {
       initials: "MD"
-    }
-  }, "Maximillian Dubois"), /*#__PURE__*/React.createElement(Tag, {
+    },
+    children: "Maximillian Dubois"
+  }), /*#__PURE__*/_jsx(Tag, {
     selected: true,
     highlighted: true,
-    personEntity: true
-  }, "Maximillian Dubois"));
-};
-export var personTagSmall = function personTagSmall() {
-  return /*#__PURE__*/React.createElement(Spacer, {
-    m: "2px"
-  }, /*#__PURE__*/React.createElement(Tag, {
+    personEntity: true,
+    children: "Maximillian Dubois"
+  })]
+});
+export const personTagSmall = () => /*#__PURE__*/_jsxs(Spacer, {
+  m: "2px",
+  children: [/*#__PURE__*/_jsx(Tag, {
     small: true,
     disabled: true,
     personEntity: {
       avatarSrc: "https://api.dicebear.com/7.x/personas/svg?seed=maxi"
-    }
-  }, "Maximillian Dubois"), /*#__PURE__*/React.createElement(Tag, {
+    },
+    children: "Maximillian Dubois"
+  }), /*#__PURE__*/_jsx(Tag, {
     small: true,
     disabled: true,
     personEntity: {
       initials: "MD"
-    }
-  }, "Maximillian Dubois"), /*#__PURE__*/React.createElement(Tag, {
+    },
+    children: "Maximillian Dubois"
+  }), /*#__PURE__*/_jsx(Tag, {
     small: true,
     disabled: true,
-    personEntity: true
-  }, "Maximillian Dubois"), /*#__PURE__*/React.createElement(Tag, {
+    personEntity: true,
+    children: "Maximillian Dubois"
+  }), /*#__PURE__*/_jsx(Tag, {
     small: true,
     personEntity: {
       avatarSrc: "https://api.dicebear.com/7.x/personas/svg?seed=maxi"
-    }
-  }, "Maximillian Dubois"), /*#__PURE__*/React.createElement(Tag, {
+    },
+    children: "Maximillian Dubois"
+  }), /*#__PURE__*/_jsx(Tag, {
     small: true,
     personEntity: {
       initials: "MD"
-    }
-  }, "Maximillian Dubois"), /*#__PURE__*/React.createElement(Tag, {
+    },
+    children: "Maximillian Dubois"
+  }), /*#__PURE__*/_jsx(Tag, {
     small: true,
-    personEntity: true
-  }, "Maximillian Dubois"), /*#__PURE__*/React.createElement(Tag, {
+    personEntity: true,
+    children: "Maximillian Dubois"
+  }), /*#__PURE__*/_jsx(Tag, {
     small: true,
     selected: true,
     personEntity: {
       avatarSrc: "https://api.dicebear.com/7.x/personas/svg?seed=maxi"
-    }
-  }, "Maximillian Dubois"), /*#__PURE__*/React.createElement(Tag, {
+    },
+    children: "Maximillian Dubois"
+  }), /*#__PURE__*/_jsx(Tag, {
     small: true,
     selected: true,
     personEntity: {
       initials: "MD"
-    }
-  }, "Maximillian Dubois"), /*#__PURE__*/React.createElement(Tag, {
+    },
+    children: "Maximillian Dubois"
+  }), /*#__PURE__*/_jsx(Tag, {
     small: true,
     selected: true,
-    personEntity: true
-  }, "Maximillian Dubois"), /*#__PURE__*/React.createElement(Tag, {
+    personEntity: true,
+    children: "Maximillian Dubois"
+  }), /*#__PURE__*/_jsx(Tag, {
     small: true,
     selected: true,
     highlighted: true,
     personEntity: {
       avatarSrc: "https://api.dicebear.com/7.x/personas/svg?seed=maxi"
-    }
-  }, "Maximillian Dubois"), /*#__PURE__*/React.createElement(Tag, {
+    },
+    children: "Maximillian Dubois"
+  }), /*#__PURE__*/_jsx(Tag, {
     small: true,
     selected: true,
     highlighted: true,
     personEntity: {
       initials: "MD"
-    }
-  }, "Maximillian Dubois"), /*#__PURE__*/React.createElement(Tag, {
+    },
+    children: "Maximillian Dubois"
+  }), /*#__PURE__*/_jsx(Tag, {
     small: true,
     selected: true,
     highlighted: true,
-    personEntity: true
-  }, "Maximillian Dubois"));
-};
+    personEntity: true,
+    children: "Maximillian Dubois"
+  })]
+});
 defaultTag.__docgenInfo = {
   "description": "",
   "methods": [],