From dc19d3975accb65c51c5b0fcbbaafad1f257db3a Mon Sep 17 00:00:00 2001
From: knownotunknown <78577376+knownotunknown@users.noreply.github.com>
Date: Fri, 9 Feb 2024 10:53:41 -0600
Subject: [PATCH 1/2] Implemented ConflictsWithWarning

---
 .../ConflictsWithWarning.stories.tsx          | 25 +++++++++++
 .../ConflictsWithWarning.tsx                  | 42 +++++++++++++++++++
 2 files changed, 67 insertions(+)
 create mode 100644 src/stories/components/ConflictsWithWarning.stories.tsx
 create mode 100644 src/views/components/common/ConflictsWithWarning/ConflictsWithWarning.tsx

diff --git a/src/stories/components/ConflictsWithWarning.stories.tsx b/src/stories/components/ConflictsWithWarning.stories.tsx
new file mode 100644
index 00000000..f1f9855a
--- /dev/null
+++ b/src/stories/components/ConflictsWithWarning.stories.tsx
@@ -0,0 +1,25 @@
+import { Meta, StoryObj } from '@storybook/react';
+import ConflictsWithWarning from '@views/components/common/ConflictsWithWarning/ConflictsWithWarning';
+
+const meta = {
+    title: 'Components/Common/ConflictsWithWarning',
+    component: ConflictsWithWarning,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        ConflictingCourse: { control: 'string' },
+        SectionNumber: { control: 'string' },
+    },
+} satisfies Meta<typeof ConflictsWithWarning>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {
+        ConflictingCourse: 'BVO 311C',
+        SectionNumber: '47280',
+    },
+};
\ No newline at end of file
diff --git a/src/views/components/common/ConflictsWithWarning/ConflictsWithWarning.tsx b/src/views/components/common/ConflictsWithWarning/ConflictsWithWarning.tsx
new file mode 100644
index 00000000..7d4b32f2
--- /dev/null
+++ b/src/views/components/common/ConflictsWithWarning/ConflictsWithWarning.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import Text from '../Text/Text';
+
+/**
+ * Props for PopupCourseBlock
+ */
+export interface ConflictsWithWarningProps {
+    ConflictingCourse: string;
+    SectionNumber: string;
+}
+
+/**
+ * The "course block" to be used in the extension popup.
+ *
+ * @param props ConflictsWithWarningProps
+ */
+export default function ConflictsWithWarning( { ConflictingCourse, SectionNumber }: ConflictsWithWarningProps): JSX.Element {
+    const UniqueCourseConflictText = `${ConflictingCourse} (${SectionNumber})`;
+
+    return (
+        <div className="flex w-21 min-w-21 p-2.5 flex-col items-start gap-2.5 rounded bg-[#AF2E2D]">
+            <ConflictsWithoutWarningText>
+               Conflicts With:
+            </ConflictsWithoutWarningText>
+            <ConflictsWithoutWarningText>
+                {UniqueCourseConflictText}
+            </ConflictsWithoutWarningText>
+        </div>
+    );
+}
+
+function ConflictsWithoutWarningText( {children}: {children: string} ) {
+    return (
+        <Text
+            variant='mini'
+            as='span'
+            className='text-white'
+        >
+            {children}
+        </Text>
+    );
+}

From ccf2c68340ff5ec2e8be8b0e11aec6b3419fdac3 Mon Sep 17 00:00:00 2001
From: knownotunknown <78577376+knownotunknown@users.noreply.github.com>
Date: Fri, 9 Feb 2024 11:01:42 -0600
Subject: [PATCH 2/2] Update ConflictsWithWarning.tsx

---
 .../common/ConflictsWithWarning/ConflictsWithWarning.tsx     | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/views/components/common/ConflictsWithWarning/ConflictsWithWarning.tsx b/src/views/components/common/ConflictsWithWarning/ConflictsWithWarning.tsx
index 7d4b32f2..6b9646c0 100644
--- a/src/views/components/common/ConflictsWithWarning/ConflictsWithWarning.tsx
+++ b/src/views/components/common/ConflictsWithWarning/ConflictsWithWarning.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import Text from '../Text/Text';
 
 /**
- * Props for PopupCourseBlock
+ * Props for ConflictWithWarningProps
  */
 export interface ConflictsWithWarningProps {
     ConflictingCourse: string;
@@ -10,7 +10,8 @@ export interface ConflictsWithWarningProps {
 }
 
 /**
- * The "course block" to be used in the extension popup.
+ * The ConflictsWithWarning component is used to display a warning message when a course conflicts 
+ * with another course as part of the labels and details section
  *
  * @param props ConflictsWithWarningProps
  */