Profile redesign: Additional badges (#37683)

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

@@ -0,0 +1,64 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import CelebrationIcon from '@/material-icons/400-24px/celebration-fill.svg?react';
+
+import * as badges from './badge';
+
+const meta = {
+  component: badges.Badge,
+  title: 'Components/Badge',
+  args: {
+    label: 'Example',
+  },
+} satisfies Meta<typeof badges.Badge>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const Domain: Story = {
+  args: {
+    domain: 'example.com',
+  },
+};
+
+export const CustomIcon: Story = {
+  args: {
+    icon: <CelebrationIcon />,
+  },
+};
+
+export const Admin: Story = {
+  args: {
+    roleId: '1',
+  },
+  render(args) {
+    return <badges.AdminBadge {...args} />;
+  },
+};
+
+export const Group: Story = {
+  render(args) {
+    return <badges.GroupBadge {...args} />;
+  },
+};
+
+export const Automated: Story = {
+  render(args) {
+    return <badges.AutomatedBadge {...args} />;
+  },
+};
+
+export const Muted: Story = {
+  render(args) {
+    return <badges.MutedBadge {...args} />;
+  },
+};
+
+export const Blocked: Story = {
+  render(args) {
+    return <badges.BlockedBadge {...args} />;
+  },
+};

app/javascript/mastodon/components/badge.tsx

@@ -4,17 +4,28 @@ import { FormattedMessage } from 'react-intl';
 
 import classNames from 'classnames';
 
+import AdminIcon from '@/images/icons/icon_admin.svg?react';
+import BlockIcon from '@/material-icons/400-24px/block.svg?react';
 import GroupsIcon from '@/material-icons/400-24px/group.svg?react';
 import PersonIcon from '@/material-icons/400-24px/person.svg?react';
 import SmartToyIcon from '@/material-icons/400-24px/smart_toy.svg?react';
+import VolumeOffIcon from '@/material-icons/400-24px/volume_off.svg?react';
 
-export const Badge: FC<{
+interface BadgeProps {
   label: ReactNode;
   icon?: ReactNode;
   className?: string;
   domain?: ReactNode;
   roleId?: string;
-}> = ({ icon = <PersonIcon />, label, className, domain, roleId }) => (
+}
+
+export const Badge: FC<BadgeProps> = ({
+  icon = <PersonIcon />,
+  label,
+  className,
+  domain,
+  roleId,
+}) => (
   <div
     className={classNames('account-role', className)}
     data-account-role-id={roleId}
@@ -25,13 +36,23 @@ export const Badge: FC<{
   </div>
 );
 
-export const GroupBadge: FC<{ className?: string }> = ({ className }) => (
+export const AdminBadge: FC<Partial<BadgeProps>> = (props) => (
+  <Badge
+    icon={<AdminIcon />}
+    label={
+      <FormattedMessage id='account.badges.admin' defaultMessage='Admin' />
+    }
+    {...props}
+  />
+);
+
+export const GroupBadge: FC<Partial<BadgeProps>> = (props) => (
   <Badge
     icon={<GroupsIcon />}
     label={
       <FormattedMessage id='account.badges.group' defaultMessage='Group' />
     }
-    className={className}
+    {...props}
   />
 );
 
@@ -44,3 +65,23 @@ export const AutomatedBadge: FC<{ className?: string }> = ({ className }) => (
     className={className}
   />
 );
+
+export const MutedBadge: FC<Partial<BadgeProps>> = (props) => (
+  <Badge
+    icon={<VolumeOffIcon />}
+    label={
+      <FormattedMessage id='account.badges.muted' defaultMessage='Muted' />
+    }
+    {...props}
+  />
+);
+
+export const BlockedBadge: FC<Partial<BadgeProps>> = (props) => (
+  <Badge
+    icon={<BlockIcon />}
+    label={
+      <FormattedMessage id='account.badges.blocked' defaultMessage='Blocked' />
+    }
+    {...props}
+  />
+);