From c28f4d268bb8f8dc73a359b4c7f8ecd0ea61b046 Mon Sep 17 00:00:00 2001
From: coderwelsch <joseph.ribbe@abusix.com>
Date: Mon, 29 Jan 2024 21:29:55 +0100
Subject: [PATCH] renamed RecommendationTag to FeaturedTag

---
 .../featured-tag.stories.tsx}                      | 14 +++++++-------
 .../featured-tag.tsx}                              |  6 +++---
 2 files changed, 10 insertions(+), 10 deletions(-)
 rename src/components/{recommendation-tag/recommendation-tag.stories.tsx => featured-tag/featured-tag.stories.tsx} (78%)
 rename src/components/{recommendation-tag/recommendation-tag.tsx => featured-tag/featured-tag.tsx} (51%)

diff --git a/src/components/recommendation-tag/recommendation-tag.stories.tsx b/src/components/featured-tag/featured-tag.stories.tsx
similarity index 78%
rename from src/components/recommendation-tag/recommendation-tag.stories.tsx
rename to src/components/featured-tag/featured-tag.stories.tsx
index ee216287..5700c838 100644
--- a/src/components/recommendation-tag/recommendation-tag.stories.tsx
+++ b/src/components/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/src/components/recommendation-tag/recommendation-tag.tsx b/src/components/featured-tag/featured-tag.tsx
similarity index 51%
rename from src/components/recommendation-tag/recommendation-tag.tsx
rename to src/components/featured-tag/featured-tag.tsx
index ac77efdf..5fbb81ee 100644
--- a/src/components/recommendation-tag/recommendation-tag.tsx
+++ b/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
             )}
         >