Feature/v3 tag

src/components/common/v3/Tag/Tag.stories.tsx

@@ -0,0 +1,88 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { Tag } from ".";
+import { BottleneckIcon } from "../../icons/BottleneckIcon";
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
+const meta: Meta<typeof Tag> = {
+  title: "common/v3/Tag",
+  component: Tag,
+  parameters: {
+    // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout
+    layout: "fullscreen"
+  }
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    content: <BottleneckIcon size={16} />
+  },
+  parameters: {
+    design: {
+      type: "figma"
+    }
+  }
+};
+
+export const HighlightString: Story = {
+  args: {
+    type: "highlight",
+    content: <span>~30ms</span>
+  },
+  parameters: {
+    design: {
+      type: "figma"
+    }
+  }
+};
+
+export const HighSeverity: Story = {
+  args: {
+    type: "highSeverity",
+    content: <span>input</span>
+  },
+  parameters: {
+    design: {
+      type: "figma"
+    }
+  }
+};
+
+export const MediumSeverity: Story = {
+  args: {
+    type: "mediumSeverity",
+    content: <span>input</span>
+  },
+  parameters: {
+    design: {
+      type: "figma"
+    }
+  }
+};
+
+export const LowSeverity: Story = {
+  args: {
+    type: "lowSeverity",
+    content: <span>Input</span>
+  },
+  parameters: {
+    design: {
+      type: "figma"
+    }
+  }
+};
+
+export const Success: Story = {
+  args: {
+    type: "success",
+    content: <span>10ms</span>
+  },
+  parameters: {
+    design: {
+      type: "figma"
+    }
+  }
+};

src/components/common/v3/Tag/index.tsx

@@ -0,0 +1,10 @@
+import * as s from "./styles";
+import { TagProps } from "./types";
+
+export const Tag = (props: TagProps) => {
+  return (
+    <s.Container $type={props.type}>
+      <s.ValueContainer>{props.content}</s.ValueContainer>
+    </s.Container>
+  );
+};

src/components/common/v3/Tag/styles.ts

@@ -0,0 +1,62 @@
+import styled from "styled-components";
+import { DefaultTheme } from "styled-components/dist/types";
+import { ContainerProps, TagType } from "./types";
+
+const getTagTheme = (
+  theme: DefaultTheme,
+  type?: TagType
+): { text: string; background: string } => {
+  const typeMap = {
+    default: {
+      text: theme.colors.v3.text.secondary,
+      background: theme.colors.v3.surface.primary
+    },
+    highlight: {
+      text: theme.colors.v3.text.secondary,
+      background: theme.colors.v3.surface.highlight
+    },
+    highSeverity: {
+      text: theme.colors.v3.status.high,
+      background: theme.colors.v3.status.backgroundHigh
+    },
+    mediumSeverity: {
+      text: theme.colors.v3.status.medium,
+      background: theme.colors.v3.status.backgroundMedium
+    },
+    lowSeverity: {
+      text: theme.colors.v3.status.low,
+      background: theme.colors.v3.status.backgroundLow
+    },
+    success: {
+      text: theme.colors.v3.status.success,
+      background: theme.colors.v3.status.backgroundSuccess
+    }
+  };
+
+  if (!type) {
+    return typeMap.default;
+  }
+
+  return typeMap[type];
+};
+
+export const Container = styled.div<ContainerProps>`
+  font-size: 14px;
+  font-weight: normal;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 4px;
+  min-width: 24px;
+  max-width: fit-content;
+  color: ${({ theme, $type }) => getTagTheme(theme, $type).text};
+  background: ${({ theme, $type }) => getTagTheme(theme, $type).background};
+`;
+
+export const ValueContainer = styled.span`
+  display: flex;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  padding: 4px;
+`;

src/components/common/v3/Tag/types.ts

@@ -0,0 +1,18 @@
+import React from "react";
+
+export type TagType =
+  | "highSeverity"
+  | "mediumSeverity"
+  | "lowSeverity"
+  | "success"
+  | "highlight"
+  | "default";
+
+export interface TagProps {
+  content: React.ReactNode;
+  type?: TagType;
+}
+
+export interface ContainerProps {
+  $type?: TagType;
+}