@nationaldesignstudio/react 0.0.15 → 0.0.16

package/src/components/sections/faq-section/faq-section.stories.tsx

@@ -0,0 +1,453 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Accordion, AccordionItem } from "../../atoms/accordion";
+import { FaqSection } from ".";
+
+const meta = {
+	title: "Sections/FaqSection",
+	component: FaqSection,
+	parameters: {
+		layout: "fullscreen",
+	},
+	argTypes: {
+		variant: {
+			control: "select",
+			options: ["dark", "light"],
+			description: "Color variant",
+		},
+		title: {
+			control: "text",
+			description: "The title text displayed in the left column",
+		},
+	},
+} satisfies Meta<typeof FaqSection>;
+
+export default meta;
+type Story = StoryObj<typeof FaqSection>;
+
+// =============================================================================
+// Playground
+// =============================================================================
+
+export const Playground: Story = {
+	render: (args) => (
+		<FaqSection {...args}>
+			<Accordion defaultExpanded="faq-1">
+				<AccordionItem
+					id="faq-1"
+					title="What is the US Tech Force (Tech Force)?"
+				>
+					Tech Force will be an elite group of ~1,000 technology specialists
+					hired by agencies to accelerate artificial intelligence (AI)
+					implementation and solve the federal government's most critical
+					technological challenges.
+				</AccordionItem>
+				<AccordionItem
+					id="faq-2"
+					title="What are the key steps in the recruiting process?"
+				>
+					The recruiting process includes an initial application, technical
+					assessment, interviews with agency leadership, and a background check.
+					Selected candidates will receive an offer within 4-6 weeks of
+					completing all steps.
+				</AccordionItem>
+				<AccordionItem id="faq-3" title="What skills are required?">
+					We're looking for expertise in software engineering, artificial
+					intelligence, cybersecurity, data analytics, or technical project
+					management. Strong problem-solving abilities and a passion for public
+					service are essential.
+				</AccordionItem>
+			</Accordion>
+		</FaqSection>
+	),
+};
+Playground.args = {
+	variant: "dark",
+	title: "Frequently Asked Questions",
+};
+
+// =============================================================================
+// Default
+// =============================================================================
+
+export const Default: Story = {
+	render: () => (
+		<FaqSection>
+			<Accordion defaultExpanded="faq-1">
+				<AccordionItem
+					id="faq-1"
+					title="What is the US Tech Force (Tech Force)?"
+				>
+					Tech Force will be an elite group of ~1,000 technology specialists
+					hired by agencies to accelerate artificial intelligence (AI)
+					implementation and solve the federal government's most critical
+					technological challenges. Tech Force will primarily recruit
+					early-career technologists from traditional recruiting channels, along
+					with experienced engineering managers from private sector partners, to
+					serve two-year employment terms in the federal government.
+				</AccordionItem>
+				<AccordionItem
+					id="faq-2"
+					title="What are the key steps in the recruiting process?"
+				>
+					The recruiting process includes an initial application, technical
+					assessment, interviews with agency leadership, and a background check.
+					Selected candidates will receive an offer within 4-6 weeks of
+					completing all steps.
+				</AccordionItem>
+				<AccordionItem id="faq-3" title="What skills are required?">
+					We're looking for expertise in software engineering, artificial
+					intelligence, cybersecurity, data analytics, or technical project
+					management. Strong problem-solving abilities and a passion for public
+					service are essential.
+				</AccordionItem>
+			</Accordion>
+		</FaqSection>
+	),
+};
+
+// =============================================================================
+// Variants
+// =============================================================================
+
+/**
+ * Dark variant (default) - dark background with light text
+ */
+export const DarkVariant: Story = {
+	render: () => (
+		<FaqSection variant="dark">
+			<Accordion defaultExpanded="faq-1">
+				<AccordionItem
+					id="faq-1"
+					title="What is the US Tech Force (Tech Force)?"
+				>
+					Tech Force will be an elite group of ~1,000 technology specialists
+					hired by agencies to accelerate artificial intelligence (AI)
+					implementation and solve the federal government's most critical
+					technological challenges.
+				</AccordionItem>
+				<AccordionItem
+					id="faq-2"
+					title="What are the key steps in the recruiting process?"
+				>
+					The recruiting process includes an initial application, technical
+					assessment, interviews with agency leadership, and a background check.
+				</AccordionItem>
+				<AccordionItem id="faq-3" title="What skills are required?">
+					We're looking for expertise in software engineering, artificial
+					intelligence, cybersecurity, data analytics, or technical project
+					management.
+				</AccordionItem>
+			</Accordion>
+		</FaqSection>
+	),
+};
+
+/**
+ * Light variant - light background with dark text
+ */
+export const LightVariant: Story = {
+	render: () => (
+		<FaqSection variant="light">
+			<Accordion defaultExpanded="faq-1">
+				<AccordionItem
+					id="faq-1"
+					title="What is the US Tech Force (Tech Force)?"
+				>
+					Tech Force will be an elite group of ~1,000 technology specialists
+					hired by agencies to accelerate artificial intelligence (AI)
+					implementation and solve the federal government's most critical
+					technological challenges.
+				</AccordionItem>
+				<AccordionItem
+					id="faq-2"
+					title="What are the key steps in the recruiting process?"
+				>
+					The recruiting process includes an initial application, technical
+					assessment, interviews with agency leadership, and a background check.
+				</AccordionItem>
+				<AccordionItem id="faq-3" title="What skills are required?">
+					We're looking for expertise in software engineering, artificial
+					intelligence, cybersecurity, data analytics, or technical project
+					management.
+				</AccordionItem>
+			</Accordion>
+		</FaqSection>
+	),
+};
+
+// =============================================================================
+// Responsive Variants
+// =============================================================================
+
+export const Desktop: Story = {
+	render: () => (
+		<FaqSection>
+			<Accordion defaultExpanded="faq-1">
+				<AccordionItem
+					id="faq-1"
+					title="What is the US Tech Force (Tech Force)?"
+				>
+					Tech Force will be an elite group of ~1,000 technology specialists
+					hired by agencies to accelerate artificial intelligence (AI)
+					implementation and solve the federal government's most critical
+					technological challenges. Tech Force will primarily recruit
+					early-career technologists from traditional recruiting channels, along
+					with experienced engineering managers from private sector partners, to
+					serve two-year employment terms in the federal government.
+				</AccordionItem>
+				<AccordionItem
+					id="faq-2"
+					title="What are the key steps in the recruiting process?"
+				>
+					The recruiting process includes an initial application, technical
+					assessment, interviews with agency leadership, and a background check.
+					Selected candidates will receive an offer within 4-6 weeks of
+					completing all steps.
+				</AccordionItem>
+				<AccordionItem id="faq-3" title="What skills are required?">
+					We're looking for expertise in software engineering, artificial
+					intelligence, cybersecurity, data analytics, or technical project
+					management. Strong problem-solving abilities and a passion for public
+					service are essential.
+				</AccordionItem>
+			</Accordion>
+		</FaqSection>
+	),
+	globals: {
+		viewport: { value: "lg", isRotated: false },
+	},
+};
+
+export const Tablet: Story = {
+	render: () => (
+		<FaqSection>
+			<Accordion defaultExpanded="faq-1">
+				<AccordionItem
+					id="faq-1"
+					title="What is the US Tech Force (Tech Force)?"
+				>
+					Tech Force will be an elite group of ~1,000 technology specialists
+					hired by agencies to accelerate artificial intelligence (AI)
+					implementation and solve the federal government's most critical
+					technological challenges.
+				</AccordionItem>
+				<AccordionItem
+					id="faq-2"
+					title="What are the key steps in the recruiting process?"
+				>
+					The recruiting process includes an initial application, technical
+					assessment, interviews with agency leadership, and a background check.
+				</AccordionItem>
+				<AccordionItem id="faq-3" title="What skills are required?">
+					We're looking for expertise in software engineering, artificial
+					intelligence, cybersecurity, data analytics, or technical project
+					management.
+				</AccordionItem>
+			</Accordion>
+		</FaqSection>
+	),
+	globals: {
+		viewport: { value: "md", isRotated: false },
+	},
+};
+
+export const Mobile: Story = {
+	render: () => (
+		<FaqSection>
+			<Accordion defaultExpanded="faq-1">
+				<AccordionItem
+					id="faq-1"
+					title="What is the US Tech Force (Tech Force)?"
+				>
+					Tech Force will be an elite group of ~1,000 technology specialists
+					hired by agencies to accelerate artificial intelligence (AI)
+					implementation and solve the federal government's most critical
+					technological challenges.
+				</AccordionItem>
+				<AccordionItem
+					id="faq-2"
+					title="What are the key steps in the recruiting process?"
+				>
+					The recruiting process includes an initial application, technical
+					assessment, interviews with agency leadership, and a background check.
+				</AccordionItem>
+				<AccordionItem id="faq-3" title="What skills are required?">
+					We're looking for expertise in software engineering, artificial
+					intelligence, cybersecurity, data analytics, or technical project
+					management.
+				</AccordionItem>
+			</Accordion>
+		</FaqSection>
+	),
+	globals: {
+		viewport: { value: "sm", isRotated: false },
+	},
+};
+
+// =============================================================================
+// Content Variations
+// =============================================================================
+
+/**
+ * With custom title
+ */
+export const CustomTitle: Story = {
+	render: () => (
+		<FaqSection title="Common Questions">
+			<Accordion defaultExpanded="faq-1">
+				<AccordionItem
+					id="faq-1"
+					title="What is the US Tech Force (Tech Force)?"
+				>
+					Tech Force will be an elite group of ~1,000 technology specialists
+					hired by agencies to accelerate artificial intelligence (AI)
+					implementation and solve the federal government's most critical
+					technological challenges.
+				</AccordionItem>
+				<AccordionItem
+					id="faq-2"
+					title="What are the key steps in the recruiting process?"
+				>
+					The recruiting process includes an initial application, technical
+					assessment, interviews with agency leadership, and a background check.
+				</AccordionItem>
+			</Accordion>
+		</FaqSection>
+	),
+};
+
+/**
+ * Full FAQ example with all questions
+ */
+export const FullFAQ: Story = {
+	render: () => (
+		<FaqSection>
+			<Accordion defaultExpanded="faq-1">
+				<AccordionItem
+					id="faq-1"
+					title="What is the US Tech Force (Tech Force)?"
+				>
+					Tech Force will be an elite group of ~1,000 technology specialists
+					hired by agencies to accelerate artificial intelligence (AI)
+					implementation and solve the federal government's most critical
+					technological challenges. Tech Force will primarily recruit
+					early-career technologists from traditional recruiting channels, along
+					with experienced engineering managers from private sector partners, to
+					serve two-year employment terms in the federal government. Tech Force
+					will include centralized organization and programming and serve as a
+					recruiting platform post-employment.
+				</AccordionItem>
+				<AccordionItem
+					id="faq-2"
+					title="What are the key steps in the recruiting process?"
+				>
+					The recruiting process includes an initial application, technical
+					assessment, interviews with agency leadership, and a background check.
+					Selected candidates will receive an offer within 4-6 weeks of
+					completing all steps.
+				</AccordionItem>
+				<AccordionItem id="faq-3" title="What skills are required?">
+					We're looking for expertise in software engineering, artificial
+					intelligence, cybersecurity, data analytics, or technical project
+					management. Strong problem-solving abilities and a passion for public
+					service are essential.
+				</AccordionItem>
+				<AccordionItem
+					id="faq-4"
+					title="Are specific educational credentials required to participate?"
+				>
+					While we value diverse educational backgrounds, candidates should
+					demonstrate strong technical skills through their work experience,
+					projects, or certifications. A traditional degree is not strictly
+					required.
+				</AccordionItem>
+				<AccordionItem
+					id="faq-5"
+					title="Is there a minimum experience level required to apply?"
+				>
+					We welcome applications from early-career technologists with 1-3 years
+					of experience as well as experienced professionals. What matters most
+					is your ability to contribute to critical government technology
+					challenges.
+				</AccordionItem>
+				<AccordionItem id="faq-6" title="Is this a political appointment?">
+					No, Tech Force positions are not political appointments. Participants
+					are hired as federal employees based on their technical qualifications
+					and serve in non-partisan roles focused on technology implementation.
+				</AccordionItem>
+				<AccordionItem id="faq-7" title="When am I expected to start?">
+					Start dates vary by cohort. Most participants begin within 2-3 months
+					of receiving their offer, pending completion of background checks and
+					onboarding requirements.
+				</AccordionItem>
+				<AccordionItem id="faq-8" title="Where will the employment be located?">
+					Positions are primarily based in Washington, D.C., though some roles
+					may be available at agency locations across the country. Remote work
+					options vary by agency and role.
+				</AccordionItem>
+			</Accordion>
+		</FaqSection>
+	),
+};
+
+/**
+ * Short FAQ example with minimal questions
+ */
+export const ShortFAQ: Story = {
+	render: () => (
+		<FaqSection>
+			<Accordion>
+				<AccordionItem
+					id="faq-1"
+					title="What is the US Tech Force (Tech Force)?"
+				>
+					Tech Force will be an elite group of ~1,000 technology specialists
+					hired by agencies to accelerate artificial intelligence (AI)
+					implementation and solve the federal government's most critical
+					technological challenges.
+				</AccordionItem>
+				<AccordionItem id="faq-2" title="What skills are required?">
+					We're looking for expertise in software engineering, artificial
+					intelligence, cybersecurity, data analytics, or technical project
+					management.
+				</AccordionItem>
+			</Accordion>
+		</FaqSection>
+	),
+};
+
+/**
+ * With allowMultiple accordion - allows multiple items to be expanded at once
+ */
+export const AllowMultiple: Story = {
+	render: () => (
+		<FaqSection>
+			<Accordion allowMultiple defaultExpanded={["faq-1", "faq-2"]}>
+				<AccordionItem
+					id="faq-1"
+					title="What is the US Tech Force (Tech Force)?"
+				>
+					Tech Force will be an elite group of ~1,000 technology specialists
+					hired by agencies to accelerate artificial intelligence (AI)
+					implementation and solve the federal government's most critical
+					technological challenges.
+				</AccordionItem>
+				<AccordionItem
+					id="faq-2"
+					title="What are the key steps in the recruiting process?"
+				>
+					The recruiting process includes an initial application, technical
+					assessment, interviews with agency leadership, and a background check.
+					Selected candidates will receive an offer within 4-6 weeks of
+					completing all steps.
+				</AccordionItem>
+				<AccordionItem id="faq-3" title="What skills are required?">
+					We're looking for expertise in software engineering, artificial
+					intelligence, cybersecurity, data analytics, or technical project
+					management. Strong problem-solving abilities and a passion for public
+					service are essential.
+				</AccordionItem>
+			</Accordion>
+		</FaqSection>
+	),
+};

package/src/components/sections/faq-section/faq-section.tsx

@@ -0,0 +1,84 @@
+import * as React from "react";
+import type { VariantProps } from "tailwind-variants";
+import { cn } from "@/lib/utils";
+import { TwoColumnSection } from "../two-column-section";
+import type { twoColumnSectionVariants } from "../two-column-section/two-column-section";
+
+export interface FaqSectionProps
+	extends Omit<React.HTMLAttributes<HTMLElement>, "title">,
+		VariantProps<typeof twoColumnSectionVariants> {
+	/**
+	 * The title text displayed in the left column
+	 * @default "Frequently Asked Questions"
+	 */
+	title?: string;
+	/**
+	 * The FAQ content - typically an Accordion with AccordionItems
+	 */
+	children: React.ReactNode;
+}
+
+/**
+ * FaqSection component for displaying FAQ content in a two-column layout.
+ *
+ * Wraps TwoColumnSection with FAQ-specific defaults and typography.
+ *
+ * Layout:
+ * - Mobile/Tablet: Stacked (title above content)
+ * - Desktop (lg+): Title left (~40%), FAQ content right (~60%)
+ *
+ * @example
+ * ```tsx
+ * <FaqSection>
+ *   <Accordion defaultExpanded="faq-1">
+ *     <AccordionItem id="faq-1" title="What is the US Tech Force?">
+ *       Tech Force will be an elite group of technology specialists...
+ *     </AccordionItem>
+ *     <AccordionItem id="faq-2" title="What skills are required?">
+ *       We're looking for expertise in software engineering...
+ *     </AccordionItem>
+ *   </Accordion>
+ * </FaqSection>
+ *
+ * // With custom title
+ * <FaqSection title="Common Questions" variant="light">
+ *   ...
+ * </FaqSection>
+ * ```
+ */
+const FaqSection = React.forwardRef<HTMLElement, FaqSectionProps>(
+	(
+		{
+			className,
+			variant = "dark",
+			title = "Frequently Asked Questions",
+			children,
+			layout,
+			...props
+		},
+		ref,
+	) => {
+		return (
+			<TwoColumnSection
+				ref={ref}
+				variant={variant}
+				layout={layout ?? undefined}
+				title={title}
+				className={cn(
+					// Override title typography to be larger
+					"[&_h2]:typography-subheading-large",
+					// Accordion typography overrides
+					"[&_button]:typography-body-large [&_button]:md:typography-subheading-small",
+					"[&_[data-accordion-panel]]:typography-body-medium [&_[data-accordion-panel]]:md:typography-body-large",
+					className,
+				)}
+				{...props}
+			>
+				{children}
+			</TwoColumnSection>
+		);
+	},
+);
+FaqSection.displayName = "FaqSection";
+
+export { FaqSection };

package/src/components/sections/faq-section/index.ts

@@ -0,0 +1,2 @@
+export type { FaqSectionProps } from "./faq-section";
+export { FaqSection } from "./faq-section";