23479: Added Progress component, Updated contrast of links in alerts (#94)

Author: lancegliser

src/components/Feedback/Alerts/Alerts.stories.tsx

@@ -1,5 +1,17 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { Alert } from "flowbite-react";
+import { Alert, AlertProps } from "flowbite-react";
+import { FC } from "react";
+import { Link } from "../../Typography";
+
+type ContentProps = { color: AlertProps["color"] };
+const Content: FC<ContentProps> = ({ color }) => {
+  return (
+    <>
+      {color}: Lorem ipsum dolor,{" "}
+      <Link href="#">sit amet consectetur adipisicing elit.</Link>
+    </>
+  );
+};
 
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
 const meta: Meta<typeof Alert> = {
@@ -15,10 +27,22 @@ const meta: Meta<typeof Alert> = {
   args: {},
   render: ({ children, ...args }) => (
     <div className="space-y-2">
-      <Alert {...args} color={"info"} children={"Info: " + children} />
-      <Alert {...args} color={"warning"} children={"Warning: " + children} />
-      <Alert {...args} color={"failure"} children={"Failure: " + children} />
-      <Alert {...args} color={"success"} children={"Success: " + children} />
+      <Alert {...args} color={"info"} children={<Content color={"info"} />} />
+      <Alert
+        {...args}
+        color={"warning"}
+        children={<Content color={"warning"} />}
+      />
+      <Alert
+        {...args}
+        color={"failure"}
+        children={<Content color={"failure"} />}
+      />
+      <Alert
+        {...args}
+        color={"success"}
+        children={<Content color={"success"} />}
+      />
     </div>
   ),
 };
@@ -29,7 +53,5 @@ type Story = StoryObj<typeof Alert>;
 // More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
 export const Message: Story = {
   // More on args: https://storybook.js.org/docs/react/writing-stories/args
-  args: {
-    children: "Lorem ipsum dolor, sit amet consectetur adipisicing elit.",
-  },
+  args: {},
 };

src/components/Feedback/Progress/Progress.stories.tsx

@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Progress } from "./Progress";
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+const meta: Meta<typeof Progress> = {
+  component: Progress,
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/7.0/react/writing-docs/docs-page
+  tags: ["autodocs"],
+  parameters: {
+    // More on Story layout: https://storybook.js.org/docs/react/configure/story-layout
+    layout: "centered",
+  },
+  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+  argTypes: {},
+  args: {
+    progress: 50,
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Progress>;
+
+// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+export const Default: Story = {
+  // More on args: https://storybook.js.org/docs/react/writing-stories/args
+  args: {
+    className: "w-[50vw]",
+  },
+};

src/components/Feedback/Progress/Progress.tsx

@@ -0,0 +1,11 @@
+import {
+  Progress as FlowbiteProgress,
+  ProgressProps as FlowbiteProgressProps,
+} from "flowbite-react";
+import { FC } from "react";
+
+export type ProgressProps = FlowbiteProgressProps;
+export const Progress: FC<ProgressProps> = ({
+  color = "primary",
+  ...props
+}) => <FlowbiteProgress {...props} color={color} />;

src/components/Feedback/Progress/index.ts

@@ -0,0 +1 @@
+export * from "./Progress";

src/components/Feedback/index.ts

@@ -9,6 +9,7 @@ export * from "./ErrorBoundary";
 export * from "./ErrorGraphic";
 export * from "./GraphicalError";
 export * from "./NoResultsAlert";
+export * from "./Progress";
 export * from "./Skeleton";
 export * from "./TextScramble";
 

src/main.css

@@ -37,3 +37,12 @@
     display: none;
   }
 }
+
+/** Components */
+
+:is(.dark [role="alert"]),
+[role="alert"] {
+  a {
+    color: inherit;
+  }
+}

src/themes/standard.ts

@@ -253,6 +253,12 @@ export const standardFlowbiteTheme: CustomFlowbiteTheme = {
       },
     },
   },
+  progress: {
+    color: {
+      default: "bg-primary-600",
+      primary: "bg-primary-600",
+    },
+  },
   select: {
     field: {
       select: {