add About to help tray

Author: thedannywahl

src/components/HelpTray.tsx

@@ -5,6 +5,7 @@ import { IconInfoLine, IconXSolid } from "@instructure/ui-icons";
 import { Tray } from "@instructure/ui-tray";
 import { View } from "@instructure/ui-view";
 import type React from "react";
+import HelpTraySectionAbout from "./HelpTraySectionAbout";
 import HelpTraySectionFeatures from "./HelpTraySectionFeatures";
 import HelpTraySectionStages from "./HelpTraySectionStages";
 
@@ -51,6 +52,7 @@ const HelpTray: React.FC<HelpTrayProps> = ({ isTrayOpen, setIsTrayOpen }) => {
 			<View as="div" padding="small">
 				{TrayHeader}
 				<Flex direction="column" gap="small" padding="small">
+					<HelpTraySectionAbout />
 					<HelpTraySectionStages />
 					<HelpTraySectionFeatures />
 				</Flex>

src/components/HelpTraySectionAbout.tsx

@@ -0,0 +1,33 @@
+import { Flex } from "@instructure/ui-flex";
+import { Heading } from "@instructure/ui-heading";
+import { Text } from "@instructure/ui-text";
+import { ToggleDetails } from "@instructure/ui-toggle-details";
+import type { FC } from "react";
+
+const HelpTraySectionAbout: FC = () => {
+	const toggleHeader = (
+		<Heading as="h3" level="h4">
+			About
+		</Heading>
+	);
+
+	return (
+		<Flex.Item>
+			<ToggleDetails fluidWidth size="large" summary={toggleHeader}>
+				<Text as="p" size="small">
+					This site lets you indicate your interest in Instructure's upcoming
+					features. Depending on the feature, development stage, and your role
+					you may or may not be invited to participate in product testing.
+				</Text>
+				<Text as="p" size="small">
+					Please note that many of these features are in early stages of
+					development may change substantially before release, or may not be
+					released at all. More information on product development stages is
+					provided below.
+				</Text>
+			</ToggleDetails>
+		</Flex.Item>
+	);
+};
+
+export default HelpTraySectionAbout;

src/components/HelpTraySectionStages.tsx

@@ -4,7 +4,7 @@ import { Heading } from "@instructure/ui-heading";
 import { Link } from "@instructure/ui-link";
 import { Popover } from "@instructure/ui-popover";
 import { Text } from "@instructure/ui-text";
-import { ToggleDetails, ToggleGroup } from "@instructure/ui-toggle-details";
+import { ToggleDetails } from "@instructure/ui-toggle-details";
 import { View } from "@instructure/ui-view";
 import type { FC } from "react";
 import { useState } from "react";