Move PinnedMessageBadge To Shared Components (#32768)

* refactor: move pinned message badge into shared-components * Update lint errors * Fix for Vitest issue with CI on shared components * Update related to the pr comments and requests * Prettier Fix * Update, remove view since it was just moved and not actually MVVMed * Removed view suffix since it was only moved and not mvvmed * Update snapshots * Removal of unused screenshots * Added Image that we need
2026-03-12 13:34:45 +00:00
parent a1939f69ee
commit 9fa8b34ebe
15 changed files with 100 additions and 55 deletions
@@ -47,6 +47,7 @@
        "jump_to_date": "Jump to date",
        "jump_to_date_beginning": "The beginning of the room",
        "jump_to_date_prompt": "Pick a date to jump to",
+        "pinned_message_badge": "Pinned message",
        "status_bar": {
            "delete_all": "Delete all",
            "exceeded_resource_limit_description": "Please contact your service administrator to continue using the service.",
@@ -20,6 +20,7 @@ export * from "./message-body/EventContentBody";
 export * from "./message-body/MediaBody";
 export * from "./message-body/MessageTimestampView";
 export * from "./message-body/DecryptionFailureBodyView";
+export * from "./message-body/PinnedMessageBadge";
 export * from "./message-body/ReactionsRowButtonTooltip";
 export * from "./message-body/ReactionsRowButton";
 export * from "./message-body/ReactionsRow";
@@ -0,0 +1,23 @@
+/*
+ * Copyright 2026 Element Creations Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+.pinnedMessageBadge {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: var(--cpd-space-1x);
+    padding: var(--cpd-space-1x) var(--cpd-space-3x) var(--cpd-space-1x) var(--cpd-space-1x);
+    font: var(--cpd-font-body-xs-medium);
+    background-color: var(--cpd-color-bg-subtle-secondary);
+    color: var(--cpd-color-text-secondary);
+    border: 1px solid var(--cpd-color-alpha-gray-400);
+    border-radius: 99px;
+
+    svg {
+        fill: var(--cpd-color-icon-secondary);
+    }
+}
@@ -0,0 +1,25 @@
+/*
+ * Copyright 2026 Element Creations Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { PinnedMessageBadge } from "./PinnedMessageBadge";
+
+const meta = {
+    title: "Message body/PinnedMessageBadge",
+    component: PinnedMessageBadge,
+    args: {
+        "aria-describedby": "event-tile-description",
+        "tabIndex": 0,
+    },
+    tags: ["autodocs"],
+} satisfies Meta<typeof PinnedMessageBadge>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
@@ -0,0 +1,22 @@
+/*
+ * Copyright 2026 Element Creations Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import React from "react";
+import { composeStories } from "@storybook/react-vite";
+import { describe, expect, it } from "vitest";
+import { render } from "@test-utils";
+
+import * as stories from "./PinnedMessageBadge.stories";
+
+const { Default } = composeStories(stories);
+
+describe("PinnedMessageBadge", () => {
+    it("renders the default badge", () => {
+        const { container } = render(<Default />);
+        expect(container).toMatchSnapshot();
+    });
+});
@@ -0,0 +1,27 @@
+/*
+ * Copyright 2026 Element Creations Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import React, { type HTMLAttributes, type JSX } from "react";
+import classNames from "classnames";
+import PinIcon from "@vector-im/compound-design-tokens/assets/web/icons/pin-solid";
+
+import styles from "./PinnedMessageBadge.module.css";
+import { _t } from "../../utils/i18n";
+
+export type PinnedMessageBadgeProps = HTMLAttributes<HTMLDivElement>;
+
+/**
+ * A badge indicating that a message is pinned.
+ */
+export function PinnedMessageBadge({ className, children, ...props }: Readonly<PinnedMessageBadgeProps>): JSX.Element {
+    return (
+        <div {...props} className={classNames(styles.pinnedMessageBadge, className)}>
+            <PinIcon width="16px" height="16px" />
+            {children ?? _t("room|pinned_message_badge")}
+        </div>
+    );
+}
@@ -0,0 +1,24 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`PinnedMessageBadge > renders the default badge 1`] = `
+<div>
+  <div
+    aria-describedby="event-tile-description"
+    class="pinnedMessageBadge"
+    tabindex="0"
+  >
+    <svg
+      fill="currentColor"
+      height="16px"
+      viewBox="0 0 24 24"
+      width="16px"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M5.769 2.857A.5.5 0 0 1 6.119 2h11.762a.5.5 0 0 1 .35.857L16.15 4.9a.5.5 0 0 0-.15.357v4.487a.5.5 0 0 0 .15.356l3.7 3.644a.5.5 0 0 1 .15.356v1.4a.5.5 0 0 1-.5.5H13v6a1 1 0 1 1-2 0v-6H4.5a.5.5 0 0 1-.5-.5v-1.4a.5.5 0 0 1 .15-.356l3.7-3.644A.5.5 0 0 0 8 9.744V5.257a.5.5 0 0 0-.15-.357z"
+      />
+    </svg>
+    Pinned message
+  </div>
+</div>
+`;
@@ -0,0 +1,8 @@
+/*
+ * Copyright 2026 Element Creations Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+export { PinnedMessageBadge, type PinnedMessageBadgeProps } from "./PinnedMessageBadge";
@@ -153,7 +153,11 @@ export default defineConfig({
        ],
    },
    optimizeDeps: {
-        include: ["vite-plugin-node-polyfills/shims/buffer", "vite-plugin-node-polyfills/shims/process"],
+        include: [
+            "vite-plugin-node-polyfills/shims/buffer",
+            "vite-plugin-node-polyfills/shims/process",
+            "react-virtuoso",
+        ],
    },
    resolve: {
        alias: {