storybook: add expansion panel story (#634)

frontend/packages/core/src/panel.tsx

@@ -12,7 +12,7 @@ const FullWidthExpansionPanel = styled(MuiExpansionPanel)`
   width: 100%;
 `;
 
-interface ExpansionPanelProps {
+export interface ExpansionPanelProps {
   heading: string;
   summary: string;
   expanded?: boolean;
@@ -25,7 +25,7 @@ const ExpansionPanel: React.FC<ExpansionPanelProps> = ({
   children,
 }) => {
   return (
-    <FullWidthExpansionPanel expanded={expanded}>
+    <FullWidthExpansionPanel defaultExpanded={expanded}>
       <AccordionSummary expandIcon={<ExpandMoreIcon />}>
         <Typography>{heading}</Typography>
         <div style={{ flexGrow: 1 }} />

frontend/packages/core/src/stories/panel.stories.tsx

+import React from "react";
+import type { Meta } from "@storybook/react";
+
+import type { ExpansionPanelProps } from "../panel";
+import ExpansionPanel from "../panel";
+
+export default {
+  title: "Core/ExpansionPanel",
+  component: ExpansionPanel,
+} as Meta;
+
+const Template = (props: ExpansionPanelProps) => (
+  <ExpansionPanel {...props}>
+    <img alt="clutch logo" src="https://clutch.sh/img/navigation/logo.svg" height="100px" />
+  </ExpansionPanel>
+);
+
+export const Primary = Template.bind({});
+Primary.args = {
+  heading: "Check this out!",
+  summary: "This is an expansion panel.",
+};
+
+export const Expanded = Template.bind({});
+Expanded.args = {
+  ...Primary.args,
+  expanded: true,
+};