orcs-design-system
Version:
TeamForm's Design System, aka: ORCS
670 lines • 18.8 kB
JavaScript
import React, { useState } from "react";
import Tag from ".";
import Flex from "../Flex";
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
export default {
title: "Components/Tag",
component: Tag,
decorators: [(storyFn, _ref) => {
let {
parameters
} = _ref;
// Skip decorator if excludeDecorator parameter is true
if (parameters !== null && parameters !== void 0 && parameters.excludeDecorator) {
return storyFn();
}
return /*#__PURE__*/_jsx(Flex, {
flexWrap: "wrap",
gap: "xs",
children: storyFn()
});
}]
};
export const defaultTag = () => /*#__PURE__*/_jsx(Tag, {
children: "Default Tag"
});
defaultTag.storyName = "Default";
export const Selected = () => {
const [selectedA, setSelectedA] = useState(true);
const [selectedB, setSelectedB] = useState(true);
const [selectedC, setSelectedC] = useState(true);
const [selectedD, setSelectedD] = useState(true);
return /*#__PURE__*/_jsxs(_Fragment, {
children: [/*#__PURE__*/_jsx(Tag, {
variant: selectedA ? "selected" : "default",
onClick: () => setSelectedA(!selectedA),
children: "devops"
}), /*#__PURE__*/_jsx(Tag, {
variant: selectedB ? "selected" : "default",
onClick: () => setSelectedB(!selectedB),
children: "software engineering"
}), /*#__PURE__*/_jsx(Tag, {
variant: selectedC ? "selected" : "default",
onClick: () => setSelectedC(!selectedC),
children: "product design"
}), /*#__PURE__*/_jsx(Tag, {
variant: selectedD ? "selected" : "default",
onClick: () => setSelectedD(!selectedD),
children: "digital transformation"
})]
});
};
export const showInfo = () => /*#__PURE__*/_jsxs(_Fragment, {
children: [/*#__PURE__*/_jsx(Tag, {
variant: "selected",
showInfo: true,
tagType: "Skill",
children: "devops"
}), /*#__PURE__*/_jsx(Tag, {
variant: "selected",
showInfo: true,
tagType: "Skill",
children: "software engineering"
}), /*#__PURE__*/_jsx(Tag, {
showInfo: true,
tagType: "Skill",
children: "product design"
}), /*#__PURE__*/_jsx(Tag, {
showInfo: true,
tagType: "Skill",
children: "digital transformation"
})]
});
export const showEdit = () => /*#__PURE__*/_jsxs(_Fragment, {
children: [/*#__PURE__*/_jsx(Tag, {
variant: "selected",
showEdit: true,
children: "devops"
}), /*#__PURE__*/_jsx(Tag, {
variant: "selected",
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(_Fragment, {
children: [/*#__PURE__*/_jsx(Tag, {
variant: "selected",
showRemove: true,
children: "devops"
}), /*#__PURE__*/_jsx(Tag, {
variant: "selected",
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(_Fragment, {
children: [/*#__PURE__*/_jsx(Tag, {
variant: "selected",
showEdit: true,
showRemove: true,
onSelect: () => console.log("select"),
onEdit: () => console.log("edit"),
onRemove: () => console.log("remove"),
children: "devops"
}), /*#__PURE__*/_jsx(Tag, {
variant: "selected",
showEdit: true,
showRemove: true,
children: "software engineering"
}), /*#__PURE__*/_jsx(Tag, {
showEdit: true,
showRemove: true,
onSelect: () => console.log("select"),
onEdit: () => console.log("edit"),
onRemove: () => console.log("remove"),
children: "product design"
}), /*#__PURE__*/_jsx(Tag, {
showEdit: true,
showRemove: true,
children: "digital transformation"
})]
});
export const disabled = () => /*#__PURE__*/_jsxs(_Fragment, {
children: [/*#__PURE__*/_jsx(Tag, {
variant: "disabled",
children: "devops"
}), /*#__PURE__*/_jsx(Tag, {
variant: "disabled",
children: "software engineering"
}), /*#__PURE__*/_jsx(Tag, {
variant: "disabled",
isPending: true,
children: "digital transformation"
}), /*#__PURE__*/_jsx(Tag, {
variant: "disabled",
isPending: true,
tagType: "skill",
children: "product design"
})]
});
export const strikethrough = () => /*#__PURE__*/_jsxs(_Fragment, {
children: [/*#__PURE__*/_jsx(Tag, {
showStrikeThrough: true,
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,
variant: "disabled",
tagType: "skill",
children: "digital transformation"
})]
});
export const withTagType = () => /*#__PURE__*/_jsxs(_Fragment, {
children: [/*#__PURE__*/_jsx(Tag, {
tagType: "skill",
children: "devops"
}), /*#__PURE__*/_jsx(Tag, {
tagType: "skill",
showRemove: true,
children: "devops"
}), /*#__PURE__*/_jsx(Tag, {
tagType: "skill",
showEdit: true,
children: "devops"
}), /*#__PURE__*/_jsx(Tag, {
tagType: "skill",
showRemove: true,
showEdit: true,
children: "devops"
}), /*#__PURE__*/_jsx(Tag, {
variant: "selected",
tagType: "skill",
children: "javascript"
}), /*#__PURE__*/_jsx(Tag, {
variant: "selected",
showRemove: true,
tagType: "skill",
children: "javascript"
}), /*#__PURE__*/_jsx(Tag, {
variant: "selected",
showEdit: true,
tagType: "skill",
children: "javascript"
}), /*#__PURE__*/_jsx(Tag, {
variant: "selected",
showRemove: true,
showEdit: true,
tagType: "skill",
children: "javascript"
}), /*#__PURE__*/_jsx(Tag, {
variant: "disabled",
tagType: "skill",
children: "product design"
})]
});
export const smallVariant = () => /*#__PURE__*/_jsxs(_Fragment, {
children: [/*#__PURE__*/_jsx(Tag, {
variant: "selected",
tagType: "specialist",
small: true,
children: "Agile Coach"
}), /*#__PURE__*/_jsx(Tag, {
variant: "selected",
showRemove: true,
showEdit: true,
tagType: "Project",
small: true,
children: "Infracore 2.0"
})]
});
export const highlightedVariant = () => /*#__PURE__*/_jsxs(_Fragment, {
children: [/*#__PURE__*/_jsx(Tag, {
variant: "selectedHighlighted",
showEdit: true,
showRemove: true,
tagType: "specialist",
children: "Agile Coach"
}), /*#__PURE__*/_jsx(Tag, {
variant: "highlighted",
showEdit: true,
showRemove: true,
tagType: "specialist",
children: "Agile Coach"
})]
});
export const personTag = () => /*#__PURE__*/_jsxs(_Fragment, {
children: [/*#__PURE__*/_jsx(Tag, {
variant: "disabled",
personEntity: {
avatarSrc: "https://api.dicebear.com/7.x/personas/svg?seed=maxi"
},
children: "Maximillian Dubois"
}), /*#__PURE__*/_jsx(Tag, {
variant: "disabled",
personEntity: {
initials: "MD"
},
children: "Maximillian Dubois"
}), /*#__PURE__*/_jsx(Tag, {
variant: "disabled",
personEntity: true,
children: "Maximillian Dubois"
}), /*#__PURE__*/_jsx(Tag, {
personEntity: {
avatarSrc: "https://api.dicebear.com/7.x/personas/svg?seed=maxi"
},
children: "Maximillian Dubois"
}), /*#__PURE__*/_jsx(Tag, {
personEntity: {
initials: "MD"
},
children: "Maximillian Dubois"
}), /*#__PURE__*/_jsx(Tag, {
personEntity: true,
children: "Maximillian Dubois"
}), /*#__PURE__*/_jsx(Tag, {
variant: "selected",
personEntity: {
avatarSrc: "https://api.dicebear.com/7.x/personas/svg?seed=maxi"
},
children: "Maximillian Dubois"
}), /*#__PURE__*/_jsx(Tag, {
variant: "selected",
personEntity: {
initials: "MD"
},
children: "Maximillian Dubois"
}), /*#__PURE__*/_jsx(Tag, {
variant: "selected",
personEntity: true,
children: "Maximillian Dubois"
}), /*#__PURE__*/_jsx(Tag, {
variant: "highlighted",
personEntity: {
avatarSrc: "https://api.dicebear.com/7.x/personas/svg?seed=maxi"
},
children: "Maximillian Dubois"
}), /*#__PURE__*/_jsx(Tag, {
variant: "highlighted",
personEntity: {
initials: "MD"
},
children: "Maximillian Dubois"
}), /*#__PURE__*/_jsx(Tag, {
variant: "highlighted",
personEntity: true,
children: "Maximillian Dubois"
}), /*#__PURE__*/_jsx(Tag, {
variant: "selectedHighlighted",
personEntity: {
avatarSrc: "https://api.dicebear.com/7.x/personas/svg?seed=maxi"
},
children: "Maximillian Dubois"
}), /*#__PURE__*/_jsx(Tag, {
variant: "selectedHighlighted",
personEntity: {
initials: "MD"
},
children: "Maximillian Dubois"
}), /*#__PURE__*/_jsx(Tag, {
variant: "selectedHighlighted",
personEntity: true,
children: "Maximillian Dubois"
})]
});
export const personTagSmall = () => /*#__PURE__*/_jsxs(_Fragment, {
children: [/*#__PURE__*/_jsx(Tag, {
variant: "disabled",
small: true,
personEntity: {
avatarSrc: "https://api.dicebear.com/7.x/personas/svg?seed=maxi"
},
children: "Maximillian Dubois"
}), /*#__PURE__*/_jsx(Tag, {
variant: "disabled",
small: true,
personEntity: {
initials: "MD"
},
children: "Maximillian Dubois"
}), /*#__PURE__*/_jsx(Tag, {
variant: "disabled",
small: true,
personEntity: true,
children: "Maximillian Dubois"
}), /*#__PURE__*/_jsx(Tag, {
small: true,
personEntity: {
avatarSrc: "https://api.dicebear.com/7.x/personas/svg?seed=maxi"
},
children: "Maximillian Dubois"
}), /*#__PURE__*/_jsx(Tag, {
small: true,
personEntity: {
initials: "MD"
},
children: "Maximillian Dubois"
}), /*#__PURE__*/_jsx(Tag, {
small: true,
personEntity: true,
children: "Maximillian Dubois"
}), /*#__PURE__*/_jsx(Tag, {
variant: "selected",
small: true,
personEntity: {
avatarSrc: "https://api.dicebear.com/7.x/personas/svg?seed=maxi"
},
children: "Maximillian Dubois"
}), /*#__PURE__*/_jsx(Tag, {
variant: "selected",
small: true,
personEntity: {
initials: "MD"
},
children: "Maximillian Dubois"
}), /*#__PURE__*/_jsx(Tag, {
variant: "selected",
small: true,
personEntity: true,
children: "Maximillian Dubois"
}), /*#__PURE__*/_jsx(Tag, {
variant: "highlighted",
small: true,
personEntity: {
avatarSrc: "https://api.dicebear.com/7.x/personas/svg?seed=maxi"
},
children: "Maximillian Dubois"
}), /*#__PURE__*/_jsx(Tag, {
variant: "highlighted",
small: true,
personEntity: {
initials: "MD"
},
children: "Maximillian Dubois"
}), /*#__PURE__*/_jsx(Tag, {
variant: "highlighted",
small: true,
personEntity: true,
children: "Maximillian Dubois"
}), /*#__PURE__*/_jsx(Tag, {
small: true,
variant: "selectedHighlighted",
personEntity: {
initials: "MD"
},
children: "Maximillian Dubois"
}), /*#__PURE__*/_jsx(Tag, {
small: true,
variant: "selectedHighlighted",
personEntity: true,
children: "Maximillian Dubois"
})]
});
export const AllCombinations = () => /*#__PURE__*/_jsxs(Flex, {
flexWrap: "wrap",
gap: "xs",
width: "250px",
border: "1px solid red",
children: [/*#__PURE__*/_jsx(Tag, {
children: "Digital Transformation Strategy"
}), /*#__PURE__*/_jsx(Tag, {
small: true,
children: "Digital Transformation Strategy"
}), /*#__PURE__*/_jsx(Tag, {
variant: "selected",
children: "Digital Transformation Strategy"
}), /*#__PURE__*/_jsx(Tag, {
small: true,
variant: "selected",
children: "Digital Transformation Strategy"
}), /*#__PURE__*/_jsx(Tag, {
variant: "highlighted",
children: "Digital Transformation Strategy"
}), /*#__PURE__*/_jsx(Tag, {
small: true,
variant: "highlighted",
children: "Digital Transformation Strategy"
}), /*#__PURE__*/_jsx(Tag, {
variant: "selectedHighlighted",
children: "Digital Transformation Strategy"
}), /*#__PURE__*/_jsx(Tag, {
small: true,
variant: "selectedHighlighted",
children: "Digital Transformation Strategy"
}), /*#__PURE__*/_jsx(Tag, {
variant: "disabled",
children: "Digital Transformation Strategy"
}), /*#__PURE__*/_jsx(Tag, {
small: true,
variant: "disabled",
children: "Digital Transformation Strategy"
}), /*#__PURE__*/_jsx(Tag, {
tagType: "Software Engineering Expertise",
children: "TPC3193EnterpriseArchitectureDesign"
}), /*#__PURE__*/_jsx(Tag, {
small: true,
tagType: "Software Engineering Expertise",
children: "Software Engineering Principles"
}), /*#__PURE__*/_jsx(Tag, {
variant: "selected",
tagType: "Software Engineering Expertise",
children: "Software Engineering Principles"
}), /*#__PURE__*/_jsx(Tag, {
small: true,
variant: "selected",
tagType: "Software Engineering Expertise",
children: "Software Engineering Principles"
}), /*#__PURE__*/_jsx(Tag, {
personEntity: true,
children: "Product Management Expertise"
}), /*#__PURE__*/_jsx(Tag, {
small: true,
personEntity: true,
children: "Product Management Expertise"
}), /*#__PURE__*/_jsx(Tag, {
personEntity: {
initials: "PM"
},
children: "Product Management Expertise"
}), /*#__PURE__*/_jsx(Tag, {
small: true,
personEntity: {
initials: "PM"
},
children: "Product Management Expertise"
}), /*#__PURE__*/_jsx(Tag, {
personEntity: {
avatarSrc: "https://api.dicebear.com/7.x/personas/svg?seed=product"
},
children: "Product Management Expertise"
}), /*#__PURE__*/_jsx(Tag, {
small: true,
personEntity: {
avatarSrc: "https://api.dicebear.com/7.x/personas/svg?seed=product"
},
children: "Product Management Expertise"
}), /*#__PURE__*/_jsx(Tag, {
showInfo: true,
tagType: "Enterprise Architecture Solutions",
children: "Enterprise Architecture Design"
}), /*#__PURE__*/_jsx(Tag, {
small: true,
showInfo: true,
tagType: "Enterprise Architecture Solutions",
children: "Enterprise Architecture Design"
}), /*#__PURE__*/_jsx(Tag, {
showEdit: true,
children: "Enterprise Architecture Design"
}), /*#__PURE__*/_jsx(Tag, {
small: true,
showEdit: true,
children: "Enterprise Architecture Design"
}), /*#__PURE__*/_jsx(Tag, {
showRemove: true,
children: "Enterprise Architecture Design"
}), /*#__PURE__*/_jsx(Tag, {
small: true,
showRemove: true,
children: "Enterprise Architecture Design"
}), /*#__PURE__*/_jsx(Tag, {
showEdit: true,
showRemove: true,
children: "Enterprise Architecture Design"
}), /*#__PURE__*/_jsx(Tag, {
small: true,
showEdit: true,
showRemove: true,
children: "Enterprise Architecture Design"
}), /*#__PURE__*/_jsx(Tag, {
showEdit: true,
showInfo: true,
tagType: "Enterprise Architecture Solutions",
children: "Enterprise Architecture Design"
}), /*#__PURE__*/_jsx(Tag, {
small: true,
showEdit: true,
showInfo: true,
tagType: "Enterprise Architecture Solutions",
children: "Enterprise Architecture Design"
}), /*#__PURE__*/_jsx(Tag, {
showRemove: true,
showInfo: true,
tagType: "Enterprise Architecture Solutions",
children: "Enterprise Architecture Design"
}), /*#__PURE__*/_jsx(Tag, {
small: true,
showRemove: true,
showInfo: true,
tagType: "Enterprise Architecture Solutions",
children: "Enterprise Architecture Design"
}), /*#__PURE__*/_jsx(Tag, {
showEdit: true,
showRemove: true,
showInfo: true,
tagType: "Enterprise Architecture Solutions",
children: "Enterprise Architecture Design"
}), /*#__PURE__*/_jsx(Tag, {
small: true,
showEdit: true,
showRemove: true,
showInfo: true,
tagType: "Enterprise Architecture Solutions",
children: "Enterprise Architecture Design"
}), /*#__PURE__*/_jsx(Tag, {
variant: "selectedHighlighted",
personEntity: {
initials: "DT"
},
showInfo: true,
tagType: "Data Science Implementation Strategy",
children: "Data Science Implementation"
}), /*#__PURE__*/_jsx(Tag, {
small: true,
variant: "selectedHighlighted",
personEntity: {
initials: "DT"
},
showInfo: true,
tagType: "Data Science Implementation Strategy",
children: "Data Science Implementation"
}), /*#__PURE__*/_jsx(Tag, {
variant: "selectedHighlighted",
personEntity: {
avatarSrc: "https://api.dicebear.com/7.x/personas/svg?seed=data"
},
showEdit: true,
showRemove: true,
children: "Data Science Implementation"
}), /*#__PURE__*/_jsx(Tag, {
small: true,
variant: "selectedHighlighted",
personEntity: {
avatarSrc: "https://api.dicebear.com/7.x/personas/svg?seed=data"
},
showEdit: true,
showRemove: true,
children: "Data Science Implementation"
})]
});
AllCombinations.parameters = {
excludeDecorator: true
};
AllCombinations.storyName = "All Prop Combinations";
defaultTag.__docgenInfo = {
"description": "",
"methods": [],
"displayName": "defaultTag"
};
Selected.__docgenInfo = {
"description": "",
"methods": [],
"displayName": "Selected"
};
showInfo.__docgenInfo = {
"description": "",
"methods": [],
"displayName": "showInfo"
};
showEdit.__docgenInfo = {
"description": "",
"methods": [],
"displayName": "showEdit"
};
showRemove.__docgenInfo = {
"description": "",
"methods": [],
"displayName": "showRemove"
};
showEditAndRemove.__docgenInfo = {
"description": "",
"methods": [],
"displayName": "showEditAndRemove"
};
disabled.__docgenInfo = {
"description": "",
"methods": [],
"displayName": "disabled"
};
strikethrough.__docgenInfo = {
"description": "",
"methods": [],
"displayName": "strikethrough"
};
withTagType.__docgenInfo = {
"description": "",
"methods": [],
"displayName": "withTagType"
};
smallVariant.__docgenInfo = {
"description": "",
"methods": [],
"displayName": "smallVariant"
};
highlightedVariant.__docgenInfo = {
"description": "",
"methods": [],
"displayName": "highlightedVariant"
};
personTag.__docgenInfo = {
"description": "",
"methods": [],
"displayName": "personTag"
};
personTagSmall.__docgenInfo = {
"description": "",
"methods": [],
"displayName": "personTagSmall"
};
AllCombinations.__docgenInfo = {
"description": "",
"methods": [],
"displayName": "AllCombinations"
};