docs(badge): integrate stories into badge

src/stories/Badge.js

@@ -0,0 +1,78 @@
+const classNames = ["font-semibold"];
+
+const getColorClassNames = (color) => {
+ switch (color) {
+ case "default":
+ return ["bg-blue-100 text-blue-800 dark:bg-blue-200 dark:text-blue-800"];
+ case "dark":
+ return ["bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300"];
+ case "red":
+ return ["bg-red-100 text-red-800 dark:bg-red-200 dark:text-red-9000"];
+ case "green":
+ return [
+ "bg-green-100 text-green-800 dark:bg-green-200 dark:text-green-900",
+ ];
+ case "yellow":
+ return [
+ "bg-yellow-100 text-yellow-800 dark:bg-yellow-200 dark:text-yellow-900",
+ ];
+ case "indigo":
+ return [
+ "bg-indigo-100 text-indigo-800 dark:bg-indigo-200 dark:text-indigo-900",
+ ];
+ case "purple":
+ return [
+ "bg-purple-100 text-purple-800 dark:bg-purple-200 dark:text-purple-900",
+ ];
+ case "pink":
+ return ["bg-pink-100 text-pink-800 dark:bg-pink-200 dark:text-pink-900"];
+ }
+};
+
+const getLargerClassNames = (larger) => {
+ return larger ? ["text-sm font-medium"] : ["text-xs"];
+};
+
+const getIconClassNames = (icon) => {
+ return icon ? ["inline-flex items-center"] : [];
+};
+
+const getOnlyIconClassNames = (onlyIcon) => {
+ return onlyIcon
+ ? ["inline-flex items-center p-1 text-sm font-semibold text rounded-full "]
+ : ["rounded px-2.5 py-0.5"];
+};
+
+export const createBadge = ({
+ color = "default",
+ label = "Default",
+ larger = false,
+ href = null,
+ displayMode,
+}) => {
+ const badge = document.createElement(href ? "a" : "span");
+
+ if (href) {
+ badge.href = href;
+ }
+
+ if (displayMode === "icon" || displayMode === "icon + text") {
+ badge.innerHTML = `<svg class="w-3 h-3" mr-1 fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>`;
+ }
+
+ if (displayMode === "text" || displayMode === "icon + text") {
+ badge.append(label);
+ }
+
+ const onlyIcon = displayMode == "icon";
+ const icon = displayMode != "text";
+
+ badge.className = [
+ ...classNames,
+ ...getColorClassNames(color),
+ ...getLargerClassNames(larger),
+ ...getIconClassNames(icon),
+ ...getOnlyIconClassNames(onlyIcon),
+ ].join(" ");
+ return badge;
+};

src/stories/Badge.stories.js

@@ -0,0 +1,93 @@
+import { createBadge } from "./Badge";
+
+export default {
+ title: "Example/Badge",
+ argTypes: {
+ label: {
+ control: {
+ type: "text",
+ },
+ defaultValue: {
+ summary: "Default",
+ },
+ },
+ color: {
+ control: "select",
+ options: [
+ "default",
+ "dark",
+ "red",
+ "green",
+ "yellow",
+ "indigo",
+ "purple",
+ "pink",
+ ],
+ },
+ larger: {
+ control: "boolean",
+ description:
+ "Use the `text-sm` to create a larger variant of the badges.",
+ defaultValue: {
+ summary: "false",
+ },
+ },
+ href: {
+ description: "Use badges as anchor `a` element to link to another page",
+ control: {
+ type: "text",
+ },
+ },
+ displayMode: {
+ control: "radio",
+ options: ["text", "icon", "icon + text"],
+ description: "Use `SVG` icons inside the badge elements",
+ defaultValue: {
+ summary: "Default",
+ },
+ },
+ },
+};
+
+const Template = ({ label, ...args }) => {
+ return createBadge({ label, ...args });
+};
+
+export const Default = Template.bind({});
+Default.storyName = "Default";
+Default.args = {
+ color: "default",
+ label: "Default",
+ displayMode: "text",
+};
+
+export const Larger = Template.bind({});
+Larger.storyName = "Larger";
+Larger.args = {
+ label: "Default",
+ larger: true,
+ displayMode: "text",
+};
+
+export const WithLink = Template.bind({});
+WithLink.storyName = "WithLink";
+WithLink.args = {
+ label: "Default",
+ larger: false,
+ displayMode: "text",
+ href: "http://flowbite.com",
+};
+
+export const WithIcon = Template.bind({});
+WithIcon.storyName = "WithIcon";
+WithIcon.args = {
+ label: "default",
+ displayMode: "icon + text",
+};
+
+export const OnlyIcon = Template.bind({});
+OnlyIcon.storyName = "OnlyIcon";
+OnlyIcon.args = {
+ label: "default",
+ displayMode: "icon",
+};