renamed RecommendationTag to FeaturedTag

abusix · Jan 29, 2024 · c28f4d2 · c28f4d2
1 parent eeef154
commit c28f4d2
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 10 deletions.
diff --git a/...dation-tag/recommendation-tag.stories.tsx → ...nts/featured-tag/featured-tag.stories.tsx b/...dation-tag/recommendation-tag.stories.tsx → ...nts/featured-tag/featured-tag.stories.tsx
@@ -1,17 +1,17 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import React, { useState } from "react";
-import { RecommendationTag } from "./recommendation-tag";
+import { FeaturedTag } from "./featured-tag";
 import { Panel } from "../panel";
 import { FormField } from "../form-field";
 
-const meta: Meta<typeof RecommendationTag> = {
-    title: "Input/RecommendationTag",
-    component: RecommendationTag,
+const meta: Meta<typeof FeaturedTag> = {
+    title: "Input/FeaturedTag",
+    component: FeaturedTag,
 };
 
 export default meta;
 
-type Story = StoryObj<typeof RecommendationTag>;
+type Story = StoryObj<typeof FeaturedTag>;
 
 const RadioBoxWithRecommendationTag = () => {
     const [value, setValue] = useState("value_1");
@@ -27,7 +27,7 @@ const RadioBoxWithRecommendationTag = () => {
                     id="value"
                 >
                     <FormField.RadioBox.Option value="option_1">
-                        Option 1<RecommendationTag>Recommended!</RecommendationTag>
+                        Option 1<FeaturedTag>Recommended!</FeaturedTag>
                     </FormField.RadioBox.Option>
 
                     <FormField.RadioBox.Option value="option_2">Option 2</FormField.RadioBox.Option>
@@ -50,7 +50,7 @@ export const PanelExample: Story = {
         <div className="w-96">
             <Panel className="relative">
                 <p>This example uses a Panel component</p>
-                <RecommendationTag>Recommended!</RecommendationTag>
+                <FeaturedTag>Recommended!</FeaturedTag>
             </Panel>
         </div>
     ),

diff --git a/...recommendation-tag/recommendation-tag.tsx → src/components/featured-tag/featured-tag.tsx b/...recommendation-tag/recommendation-tag.tsx → src/components/featured-tag/featured-tag.tsx
@@ -1,16 +1,16 @@
 import React, { ReactNode } from "react";
 import { classNames } from "../../util/class-names";
 
-interface RecommendationTagProps {
+interface FeaturedTagProps {
     children: ReactNode;
     className?: string;
 }
 
-export const RecommendationTag = ({ children, className }: RecommendationTagProps) => {
+export const FeaturedTag = ({ children, className }: FeaturedTagProps) => {
     return (
         <span
             className={classNames(
-                "absolute right-6 top-0 z-10 -translate-y-1/2 rounded border border-primary-500 bg-primary-100 px-1 text-xs uppercase tracking-wide text-primary-500",
+                "absolute right-4 top-0 z-10 -translate-y-1/2 rounded border border-primary-600 bg-primary-50 px-1 text-xs font-medium uppercase tracking-wide text-primary-600",
                 className
             )}
         >