22233: Added TraineeIcon, MINOR (#31)

src/components/Icons/TraineeIcon.tsx

@@ -0,0 +1,13 @@
+import type { FC } from "react";
+import { type IconBaseProps } from "react-icons";
+import { HiOutlineCubeTransparent } from "react-icons/hi2";
+
+/**
+ * A generic Trainee icon.
+ * Where possible, an Identicon should be used.
+ * An appropriate usage contexts would include:
+ * - Create a trainee actions
+ **/
+export const TraineeIcon: FC<IconBaseProps> = (props) => (
+  <HiOutlineCubeTransparent {...props} />
+);

src/components/Icons/icons.stories.tsx

@@ -4,6 +4,7 @@ import { IconBaseProps } from "react-icons";
 import {
   MapDependentFeatureAttributesIcon,
   TraineeDefineIcon,
+  TraineeIcon,
   TraineeLoadIcon,
   TraineeTrainIcon,
 } from ".";
@@ -22,22 +23,27 @@ const meta: Meta<IconBaseProps> = {
   args: {},
   render: (args) => (
     <div className="flex gap-4">
-      <IconWithLabel
-        label={"MapDependentFeatureAttributesIcon"}
-        Icon={<MapDependentFeatureAttributesIcon {...args} />}
-      />
-      <IconWithLabel
-        label={"TraineeLoadIcon"}
-        Icon={<TraineeLoadIcon {...args} />}
-      />
-      <IconWithLabel
-        label={"TraineeDefineIcon"}
-        Icon={<TraineeDefineIcon {...args} />}
-      />
-      <IconWithLabel
-        label={"TraineeTrainIcon"}
-        Icon={<TraineeTrainIcon {...args} />}
-      />
+      <Section title="Action">
+        <IconWithLabel
+          label={"MapDependentFeatureAttributesIcon"}
+          Icon={<MapDependentFeatureAttributesIcon {...args} />}
+        />
+        <IconWithLabel
+          label={"TraineeLoadIcon"}
+          Icon={<TraineeLoadIcon {...args} />}
+        />
+        <IconWithLabel
+          label={"TraineeDefineIcon"}
+          Icon={<TraineeDefineIcon {...args} />}
+        />
+        <IconWithLabel
+          label={"TraineeTrainIcon"}
+          Icon={<TraineeTrainIcon {...args} />}
+        />
+      </Section>
+      <Section title="Concepts">
+        <IconWithLabel label={"TraineeIcon"} Icon={<TraineeIcon {...args} />} />
+      </Section>
     </div>
   ),
 };
@@ -51,6 +57,21 @@ export const Default: Story = {
   args: {},
 };
 
+type SectionProps = {
+  title: ReactNode;
+  children: ReactNode;
+};
+const Section: FC<SectionProps> = ({ title, children }) => {
+  return (
+    <section className="my-3">
+      <header>
+        <h2 className="text-lg font-semibold">{title}</h2>
+      </header>
+      <div className="flex flex-wrap items-start gap-4">{children}</div>
+    </section>
+  );
+};
+
 type IconWithLabelProps = { label: string; Icon: ReactNode };
 const IconWithLabel: FC<IconWithLabelProps> = ({ label, Icon }) => (
   <div className="flex flex-col items-center justify-center">

src/components/Icons/index.ts

@@ -1,4 +1,5 @@
 export * from "./MapDependentFeatureAttributesIcon";
 export * from "./TraineeDefineIcon";
+export * from "./TraineeIcon";
 export * from "./TraineeLoadIcon";
 export * from "./TraineeTrainIcon";