Profile editing: Finish image editing (#38235)

app/javascript/mastodon/components/details/details.stories.tsx

@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Details } from './index';
+
+const meta = {
+  component: Details,
+  title: 'Components/Details',
+  args: {
+    summary: 'Here is the summary title',
+    children: (
+      <p>
+        And here are the details that are hidden until you click the summary.
+      </p>
+    ),
+  },
+  render(props) {
+    return (
+      <div style={{ width: '400px' }}>
+        <Details {...props} />
+      </div>
+    );
+  },
+} satisfies Meta<typeof Details>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Plain: Story = {};

app/javascript/mastodon/components/details/index.tsx

@@ -0,0 +1,35 @@
+import { forwardRef } from 'react';
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
+
+import classNames from 'classnames';
+
+import ExpandArrowIcon from '@/material-icons/400-24px/expand_more.svg?react';
+
+import { Icon } from '../icon';
+
+import classes from './styles.module.scss';
+
+export const Details = forwardRef<
+  HTMLDetailsElement,
+  {
+    summary: ReactNode;
+    children: ReactNode;
+    className?: string;
+  } & ComponentPropsWithoutRef<'details'>
+>(({ summary, children, className, ...rest }, ref) => {
+  return (
+    <details
+      ref={ref}
+      className={classNames(classes.details, className)}
+      {...rest}
+    >
+      <summary>
+        {summary}
+        <Icon icon={ExpandArrowIcon} id='arrow' />
+      </summary>
+
+      {children}
+    </details>
+  );
+});
+Details.displayName = 'Details';

app/javascript/mastodon/components/details/styles.module.scss

@@ -0,0 +1,25 @@
+.details {
+  color: var(--color-text-secondary);
+  font-size: 13px;
+  margin-top: 8px;
+
+  summary {
+    cursor: pointer;
+    font-weight: 600;
+    list-style: none;
+    margin-bottom: 8px;
+    text-decoration: underline;
+    text-decoration-style: dotted;
+  }
+
+  :global(.icon) {
+    width: 1.4em;
+    height: 1.4em;
+    vertical-align: middle;
+    transition: transform 0.2s ease-in-out;
+  }
+
+  &[open] :global(.icon) {
+    transform: rotate(-180deg);
+  }
+}