diff --git a/.changeset/small-snails-burn.md b/.changeset/small-snails-burn.md new file mode 100644 index 0000000000000..47d20011d850f --- /dev/null +++ b/.changeset/small-snails-burn.md @@ -0,0 +1,7 @@ +--- +'@rocket.chat/ui-client': minor +'@rocket.chat/meteor': minor +--- + +Restores the previous room announcement style +> This change is being tested under `Enhanced navigation experience` feature preview, in order to check it you need to enabled it diff --git a/apps/meteor/client/views/room/Announcement/Announcement.stories.tsx b/apps/meteor/client/views/room/Announcement/Announcement.stories.tsx deleted file mode 100644 index 383375a72a8b8..0000000000000 --- a/apps/meteor/client/views/room/Announcement/Announcement.stories.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import { action } from '@storybook/addon-actions'; -import type { Meta, StoryFn } from '@storybook/react'; - -import Announcement from '.'; - -export default { - title: 'Room/Announcement', - component: Announcement, -} satisfies Meta; - -export const Default: StoryFn = (args) => ; -Default.storyName = 'Announcement'; -Default.args = { - announcement: 'Lorem Ipsum Indolor', - announcementDetails: action('announcementDetails'), -}; diff --git a/apps/meteor/client/views/room/Announcement/Announcement.tsx b/apps/meteor/client/views/room/Announcement/Announcement.tsx deleted file mode 100644 index 1ccc1c5cc217f..0000000000000 --- a/apps/meteor/client/views/room/Announcement/Announcement.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import { Box } from '@rocket.chat/fuselage'; -import { useEffectEvent } from '@rocket.chat/fuselage-hooks'; -import { useSetModal } from '@rocket.chat/ui-contexts'; -import type { MouseEvent } from 'react'; -import { useTranslation } from 'react-i18next'; - -import AnnouncementComponent from './AnnouncementComponent'; -import GenericModal from '../../../components/GenericModal'; -import MarkdownText from '../../../components/MarkdownText'; - -type AnnouncementProps = { - announcement: string; - announcementDetails?: () => void; -}; - -const Announcement = ({ announcement, announcementDetails }: AnnouncementProps) => { - const { t } = useTranslation(); - const setModal = useSetModal(); - const closeModal = useEffectEvent(() => setModal(null)); - const handleClick = (e: MouseEvent): void => { - if ((e.target as HTMLAnchorElement).href) { - return; - } - - if (window?.getSelection()?.toString() !== '') { - return; - } - - announcementDetails - ? announcementDetails() - : setModal( - - - - - , - ); - }; - - return announcement ? ( - ): void => handleClick(e)}> - - - ) : null; -}; - -export default Announcement; diff --git a/apps/meteor/client/views/room/Announcement/index.tsx b/apps/meteor/client/views/room/Announcement/index.tsx deleted file mode 100644 index 396eed77f20ee..0000000000000 --- a/apps/meteor/client/views/room/Announcement/index.tsx +++ /dev/null @@ -1 +0,0 @@ -export { default } from './Announcement'; diff --git a/apps/meteor/client/views/room/RoomAnnouncement/AnnouncementComponent.tsx b/apps/meteor/client/views/room/RoomAnnouncement/AnnouncementComponent.tsx deleted file mode 100644 index 5f5c9b0519f10..0000000000000 --- a/apps/meteor/client/views/room/RoomAnnouncement/AnnouncementComponent.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import { RoomBanner, RoomBannerContent } from '@rocket.chat/ui-client'; -import type { MouseEvent, ReactNode } from 'react'; - -type AnnouncementComponentProps = { - children: ReactNode; - onClickOpen: (e: MouseEvent) => void; -}; - -const AnnouncementComponent = ({ children, onClickOpen }: AnnouncementComponentProps) => ( - - {children} - -); - -export default AnnouncementComponent; diff --git a/apps/meteor/client/views/room/RoomAnnouncement/RoomAnnouncement.stories.tsx b/apps/meteor/client/views/room/RoomAnnouncement/RoomAnnouncement.stories.tsx index da55c54b06df3..da8818dd919e1 100644 --- a/apps/meteor/client/views/room/RoomAnnouncement/RoomAnnouncement.stories.tsx +++ b/apps/meteor/client/views/room/RoomAnnouncement/RoomAnnouncement.stories.tsx @@ -1,4 +1,3 @@ -import { action } from '@storybook/addon-actions'; import type { Meta, StoryFn } from '@storybook/react'; import RoomAnnouncement from '.'; @@ -9,8 +8,6 @@ export default { } satisfies Meta; export const Default: StoryFn = (args) => ; -Default.storyName = 'Announcement'; Default.args = { announcement: 'Lorem Ipsum Indolor', - announcementDetails: action('announcementDetails'), }; diff --git a/apps/meteor/client/views/room/RoomAnnouncement/RoomAnnouncement.tsx b/apps/meteor/client/views/room/RoomAnnouncement/RoomAnnouncement.tsx index a2dcca82cd37d..e32ef2a9c4974 100644 --- a/apps/meteor/client/views/room/RoomAnnouncement/RoomAnnouncement.tsx +++ b/apps/meteor/client/views/room/RoomAnnouncement/RoomAnnouncement.tsx @@ -1,23 +1,38 @@ import { Box } from '@rocket.chat/fuselage'; import { useEffectEvent } from '@rocket.chat/fuselage-hooks'; +import { AnnouncementBanner } from '@rocket.chat/ui-client'; import { useSetModal } from '@rocket.chat/ui-contexts'; -import type { MouseEvent } from 'react'; +import type { KeyboardEvent, MouseEvent } from 'react'; import { useTranslation } from 'react-i18next'; -import AnnouncementComponent from './AnnouncementComponent'; import GenericModal from '../../../components/GenericModal'; import MarkdownText from '../../../components/MarkdownText'; type RoomAnnouncementParams = { announcement: string; - announcementDetails?: () => void; }; -const RoomAnnouncement = ({ announcement, announcementDetails }: RoomAnnouncementParams) => { +const RoomAnnouncement = ({ announcement }: RoomAnnouncementParams) => { const { t } = useTranslation(); const setModal = useSetModal(); - const closeModal = useEffectEvent(() => setModal(null)); - const handleClick = (e: MouseEvent): void => { + + const handleOpenAnnouncement = useEffectEvent(() => { + setModal( + setModal(null)} + onClose={() => setModal(null)} + > + + + + , + ); + }); + + const handleClick = (e: MouseEvent) => { if ((e.target as HTMLAnchorElement).href) { return; } @@ -26,21 +41,24 @@ const RoomAnnouncement = ({ announcement, announcementDetails }: RoomAnnouncemen return; } - announcementDetails - ? announcementDetails() - : setModal( - - - - - , - ); + handleOpenAnnouncement(); + }; + + const handleKeyDown = (e: KeyboardEvent) => { + if ((e.target as HTMLAnchorElement).href) { + return; + } + + if (e.code === 'Enter' || e.code === 'Space') { + e.preventDefault(); + handleOpenAnnouncement(); + } }; return announcement ? ( - + - + ) : null; }; diff --git a/apps/meteor/client/views/room/body/RoomBody.tsx b/apps/meteor/client/views/room/body/RoomBody.tsx index 6e4e3b3db3e80..2c5e9d3c09a16 100644 --- a/apps/meteor/client/views/room/body/RoomBody.tsx +++ b/apps/meteor/client/views/room/body/RoomBody.tsx @@ -6,17 +6,21 @@ import { memo, useCallback, useMemo, useRef } from 'react'; import DropTargetOverlay from './DropTargetOverlay'; import JumpToRecentMessageButton from './JumpToRecentMessageButton'; +import LoadingMessagesIndicator from './LoadingMessagesIndicator'; +import RetentionPolicyWarning from './RetentionPolicyWarning'; +import RoomForeword from './RoomForeword/RoomForeword'; +import UnreadMessagesIndicator from './UnreadMessagesIndicator'; +import { UploadProgressContainer, UploadProgressIndicator } from './UploadProgress'; +import { MessageList } from '../MessageList'; +import { useReadMessageWindowEvents } from './hooks/useReadMessageWindowEvents'; import { isTruthy } from '../../../../lib/isTruthy'; import { CustomScrollbars } from '../../../components/CustomScrollbars'; import { useEmbeddedLayout } from '../../../hooks/useEmbeddedLayout'; -import Announcement from '../Announcement'; import { BubbleDate } from '../BubbleDate'; -import { MessageList } from '../MessageList'; -import LoadingMessagesIndicator from './LoadingMessagesIndicator'; -import RetentionPolicyWarning from './RetentionPolicyWarning'; -import UnreadMessagesIndicator from './UnreadMessagesIndicator'; import MessageListErrorBoundary from '../MessageList/MessageListErrorBoundary'; +import RoomAnnouncement from '../RoomAnnouncement'; import ComposerContainer from '../composer/ComposerContainer'; +import { useSelectAllAndScrollToTop } from './hooks/useSelectAllAndScrollToTop'; import RoomComposer from '../composer/RoomComposer/RoomComposer'; import { useChat } from '../contexts/ChatContext'; import { useRoom, useRoomSubscription, useRoomMessages } from '../contexts/RoomContext'; @@ -24,17 +28,13 @@ import { useRoomToolbox } from '../contexts/RoomToolboxContext'; import { useDateScroll } from '../hooks/useDateScroll'; import { useMessageListNavigation } from '../hooks/useMessageListNavigation'; import { useRetentionPolicy } from '../hooks/useRetentionPolicy'; -import RoomForeword from './RoomForeword/RoomForeword'; -import { UploadProgressContainer, UploadProgressIndicator } from './UploadProgress'; import { useFileUpload } from './hooks/useFileUpload'; import { useGetMore } from './hooks/useGetMore'; import { useGoToHomeOnRemoved } from './hooks/useGoToHomeOnRemoved'; import { useHasNewMessages } from './hooks/useHasNewMessages'; import { useListIsAtBottom } from './hooks/useListIsAtBottom'; import { useQuoteMessageByUrl } from './hooks/useQuoteMessageByUrl'; -import { useReadMessageWindowEvents } from './hooks/useReadMessageWindowEvents'; import { useRestoreScrollPosition } from './hooks/useRestoreScrollPosition'; -import { useSelectAllAndScrollToTop } from './hooks/useSelectAllAndScrollToTop'; import { useHandleUnread } from './hooks/useUnreadMessages'; const RoomBody = (): ReactElement => { @@ -176,7 +176,7 @@ const RoomBody = (): ReactElement => { return ( <> - {!isLayoutEmbedded && room.announcement && } + {!isLayoutEmbedded && room.announcement && }
{ const { innerRef: getMoreInnerRef } = useGetMore(room._id, atBottomRef); - const { wrapperRef: sectionWrapperRef, hideSection, innerRef: sectionScrollRef } = useBannerSection(); - const { uploads, handleUploadFiles, @@ -126,7 +122,6 @@ const RoomBody = (): ReactElement => { restoreScrollPositionInnerRef, isAtBottomInnerRef, newMessagesScrollRef, - sectionScrollRef, unreadBarInnerRef, getMoreInnerRef, selectAndScrollRef, @@ -177,25 +172,9 @@ const RoomBody = (): ReactElement => { useReadMessageWindowEvents(); useQuoteMessageByUrl(); - const wrapperStyle = css` - position: absolute; - width: 100%; - z-index: 5; - top: 0px; - - &.animated-hidden { - top: -88px; - } - `; - return ( <> - - - {!isLayoutEmbedded && room.announcement && } - - - + {!isLayoutEmbedded && room.announcement && }
{ - const [hideSection, setHideSection] = useState(false); - - const wrapperBoxRef = useRef(null); - - const innerScrollRef = useCallback((node: HTMLElement | null) => { - if (!node) { - return; - } - let lastScrollTopRef = 0; - - wrapperBoxRef.current?.addEventListener('mouseover', () => setHideSection(false)); - - node.addEventListener( - 'scroll', - withThrottling({ wait: 100 })((event) => { - const bannerSection = wrapperBoxRef.current?.querySelector('.rcx-header-section'); - - if (bannerSection) { - if (isAtBottom(node, 0)) { - setHideSection(false); - } else if (event.target.scrollTop < lastScrollTopRef) { - setHideSection(true); - } else if (!isAtBottom(node, 100) && event.target.scrollTop > parseFloat(getComputedStyle(bannerSection).height)) { - setHideSection(true); - } - } - lastScrollTopRef = event.target.scrollTop; - }), - { passive: true }, - ); - }, []); - - return { - wrapperRef: wrapperBoxRef, - hideSection, - innerRef: innerScrollRef, - }; -}; diff --git a/apps/meteor/package.json b/apps/meteor/package.json index 20ca8f873fc7e..1d22f40b2590f 100644 --- a/apps/meteor/package.json +++ b/apps/meteor/package.json @@ -247,7 +247,7 @@ "@rocket.chat/emitter": "~0.31.25", "@rocket.chat/favicon": "workspace:^", "@rocket.chat/freeswitch": "workspace:^", - "@rocket.chat/fuselage": "~0.61.0", + "@rocket.chat/fuselage": "~0.62.0", "@rocket.chat/fuselage-hooks": "~0.35.0", "@rocket.chat/fuselage-polyfills": "~0.31.25", "@rocket.chat/fuselage-toastbar": "^0.35.0", diff --git a/apps/uikit-playground/package.json b/apps/uikit-playground/package.json index f006e38ca5720..45a2ff690ca72 100644 --- a/apps/uikit-playground/package.json +++ b/apps/uikit-playground/package.json @@ -18,7 +18,7 @@ "@lezer/highlight": "^1.2.1", "@rocket.chat/core-typings": "workspace:^", "@rocket.chat/css-in-js": "~0.31.25", - "@rocket.chat/fuselage": "~0.61.0", + "@rocket.chat/fuselage": "~0.62.0", "@rocket.chat/fuselage-hooks": "~0.35.0", "@rocket.chat/fuselage-polyfills": "~0.31.25", "@rocket.chat/fuselage-toastbar": "^0.35.0", diff --git a/ee/packages/ui-theming/package.json b/ee/packages/ui-theming/package.json index c54cc7730365b..8334489fb0931 100644 --- a/ee/packages/ui-theming/package.json +++ b/ee/packages/ui-theming/package.json @@ -4,7 +4,7 @@ "private": true, "devDependencies": { "@rocket.chat/css-in-js": "~0.31.25", - "@rocket.chat/fuselage": "~0.61.0", + "@rocket.chat/fuselage": "~0.62.0", "@rocket.chat/fuselage-hooks": "~0.35.0", "@rocket.chat/icons": "^0.42.0", "@rocket.chat/ui-contexts": "workspace:~", diff --git a/packages/fuselage-ui-kit/package.json b/packages/fuselage-ui-kit/package.json index f4cf05a166324..538643c69ba68 100644 --- a/packages/fuselage-ui-kit/package.json +++ b/packages/fuselage-ui-kit/package.json @@ -52,7 +52,7 @@ "@rocket.chat/apps-engine": "workspace:^", "@rocket.chat/core-typings": "workspace:^", "@rocket.chat/eslint-config": "workspace:^", - "@rocket.chat/fuselage": "~0.61.0", + "@rocket.chat/fuselage": "~0.62.0", "@rocket.chat/fuselage-hooks": "~0.35.0", "@rocket.chat/fuselage-polyfills": "~0.31.25", "@rocket.chat/icons": "^0.42.0", diff --git a/packages/gazzodown/package.json b/packages/gazzodown/package.json index 64f0c2ae9cb91..1d1ba98e220e2 100644 --- a/packages/gazzodown/package.json +++ b/packages/gazzodown/package.json @@ -30,7 +30,7 @@ "@babel/core": "~7.26.0", "@rocket.chat/core-typings": "workspace:^", "@rocket.chat/css-in-js": "~0.31.25", - "@rocket.chat/fuselage": "~0.61.0", + "@rocket.chat/fuselage": "~0.62.0", "@rocket.chat/fuselage-tokens": "~0.33.2", "@rocket.chat/jest-presets": "workspace:~", "@rocket.chat/message-parser": "workspace:^", diff --git a/packages/ui-avatar/package.json b/packages/ui-avatar/package.json index c6c799401595c..c9cfabdbaf666 100644 --- a/packages/ui-avatar/package.json +++ b/packages/ui-avatar/package.json @@ -4,7 +4,7 @@ "private": true, "devDependencies": { "@babel/core": "~7.26.0", - "@rocket.chat/fuselage": "~0.61.0", + "@rocket.chat/fuselage": "~0.62.0", "@rocket.chat/ui-contexts": "workspace:^", "@types/react": "~18.3.17", "@types/react-dom": "~18.3.5", diff --git a/packages/ui-client/package.json b/packages/ui-client/package.json index b1e7c5610d817..96df27eae6be1 100644 --- a/packages/ui-client/package.json +++ b/packages/ui-client/package.json @@ -21,7 +21,7 @@ "@babel/core": "~7.26.0", "@react-aria/toolbar": "^3.0.0-nightly.5042", "@rocket.chat/css-in-js": "~0.31.25", - "@rocket.chat/fuselage": "~0.61.0", + "@rocket.chat/fuselage": "~0.62.0", "@rocket.chat/fuselage-hooks": "~0.35.0", "@rocket.chat/icons": "^0.42.0", "@rocket.chat/jest-presets": "workspace:~", diff --git a/packages/ui-client/src/components/AnnouncementBanner/AnnouncementBanner.spec.tsx b/packages/ui-client/src/components/AnnouncementBanner/AnnouncementBanner.spec.tsx new file mode 100644 index 0000000000000..0c58ce6d4876a --- /dev/null +++ b/packages/ui-client/src/components/AnnouncementBanner/AnnouncementBanner.spec.tsx @@ -0,0 +1,23 @@ +import { composeStories } from '@storybook/react'; +import { render } from '@testing-library/react'; +import { axe } from 'jest-axe'; + +import * as stories from './AnnouncementBanner.stories'; + +const testCases = Object.values(composeStories(stories)).map((Story) => [Story.storyName || 'Story', Story]); + +test.each(testCases)(`renders %s without crashing`, async (_storyname, Story) => { + const tree = render(); + expect(tree.baseElement).toMatchSnapshot(); +}); + +test.each(testCases)('%s should have no a11y violations', async (_storyname, Story) => { + const { container } = render(); + + /** + ** We are disabling the rule in this case because ideally we should not have nested interactive + ** but in this case we need to open a modal when clicking in the `AnnouncementBanner` + **/ + const results = await axe(container, { rules: { 'nested-interactive': { enabled: false } } }); + expect(results).toHaveNoViolations(); +}); diff --git a/packages/ui-client/src/components/AnnouncementBanner/AnnouncementBanner.stories.tsx b/packages/ui-client/src/components/AnnouncementBanner/AnnouncementBanner.stories.tsx new file mode 100644 index 0000000000000..165c0154d3361 --- /dev/null +++ b/packages/ui-client/src/components/AnnouncementBanner/AnnouncementBanner.stories.tsx @@ -0,0 +1,28 @@ +import { action } from '@storybook/addon-actions'; +import { Meta, StoryFn } from '@storybook/react'; + +import AnnouncementBanner from './AnnouncementBanner'; + +export default { + title: 'Components/AnnouncementBanner', + component: AnnouncementBanner, + args: { + onClick: action('clicked'), + }, +} satisfies Meta; + +const Template: StoryFn = (args) => ; + +export const Default = Template.bind({}); +Default.args = { + children: 'Announcement', +}; + +export const WithLink = Template.bind({}); +WithLink.args = { + children: ( + + Announcement + + ), +}; diff --git a/apps/meteor/client/views/room/Announcement/AnnouncementComponent.tsx b/packages/ui-client/src/components/AnnouncementBanner/AnnouncementBanner.tsx similarity index 55% rename from apps/meteor/client/views/room/Announcement/AnnouncementComponent.tsx rename to packages/ui-client/src/components/AnnouncementBanner/AnnouncementBanner.tsx index 6772d1d9c6ed9..fcdd254f75853 100644 --- a/apps/meteor/client/views/room/Announcement/AnnouncementComponent.tsx +++ b/packages/ui-client/src/components/AnnouncementBanner/AnnouncementBanner.tsx @@ -1,13 +1,13 @@ import { css } from '@rocket.chat/css-in-js'; import { Box, Palette } from '@rocket.chat/fuselage'; -import type { MouseEvent, ReactNode } from 'react'; +import type { AllHTMLAttributes, ReactNode, MouseEvent } from 'react'; -type AnnouncementComponentProps = { - children?: ReactNode; - onClickOpen: (e: MouseEvent) => void; -}; +type AnnouncementBannerProps = { + children: ReactNode; + onClick?: (e: MouseEvent) => void; +} & Omit, 'is'>; -const AnnouncementComponent = ({ children, onClickOpen }: AnnouncementComponentProps) => { +const AnnouncementBanner = ({ children, className, onClick, ...props }: AnnouncementBannerProps) => { const announcementBar = css` background-color: ${Palette.status['status-background-info'].theme('announcement-background')}; color: ${Palette.text['font-pure-black'].theme('announcement-text')}; @@ -20,28 +20,32 @@ const AnnouncementComponent = ({ children, onClickOpen }: AnnouncementComponentP > * { flex: auto; } - &:hover, - &:focus { + &:hover { text-decoration: underline; } `; return ( - + {children} ); }; -export default AnnouncementComponent; +export default AnnouncementBanner; diff --git a/packages/ui-client/src/components/AnnouncementBanner/__snapshots__/AnnouncementBanner.spec.tsx.snap b/packages/ui-client/src/components/AnnouncementBanner/__snapshots__/AnnouncementBanner.spec.tsx.snap new file mode 100644 index 0000000000000..d2fc70f9f1cc3 --- /dev/null +++ b/packages/ui-client/src/components/AnnouncementBanner/__snapshots__/AnnouncementBanner.spec.tsx.snap @@ -0,0 +1,42 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`renders Default without crashing 1`] = ` + +
+
+
+ Announcement +
+
+
+ +`; + +exports[`renders WithLink without crashing 1`] = ` + +
+
+
+ + Announcement + +
+
+
+ +`; diff --git a/packages/ui-client/src/components/AnnouncementBanner/index.ts b/packages/ui-client/src/components/AnnouncementBanner/index.ts new file mode 100644 index 0000000000000..22e294d3a3e3f --- /dev/null +++ b/packages/ui-client/src/components/AnnouncementBanner/index.ts @@ -0,0 +1 @@ +export { default } from './AnnouncementBanner'; diff --git a/packages/ui-client/src/components/HeaderV2/Header.stories.tsx b/packages/ui-client/src/components/HeaderV2/Header.stories.tsx index 6121f306ea103..2438dfb90bb7a 100644 --- a/packages/ui-client/src/components/HeaderV2/Header.stories.tsx +++ b/packages/ui-client/src/components/HeaderV2/Header.stories.tsx @@ -1,5 +1,5 @@ import type { IRoom } from '@rocket.chat/core-typings'; -import { Avatar } from '@rocket.chat/fuselage'; +import { Avatar, Box } from '@rocket.chat/fuselage'; import { SettingsContext } from '@rocket.chat/ui-contexts'; import { action } from '@storybook/addon-actions'; import type { Meta } from '@storybook/react'; @@ -17,8 +17,7 @@ import { HeaderV2Title as HeaderTitle, HeaderV2State as HeaderState, } from '.'; -import { RoomBanner } from '../RoomBanner'; -import { RoomBannerContent } from '../RoomBanner/RoomBannerContent'; +import AnnouncementBanner from '../AnnouncementBanner'; const avatarUrl = 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wAARCAAoACgDASIAAhEBAxEB/8QAGwAAAgIDAQAAAAAAAAAAAAAAAAcEBgIDBQj/xAAuEAACAQQAAwcEAQUAAAAAAAABAgMABAUREiExBhMUIkFRYQcWcYGhFTJSgpH/xAAYAQADAQEAAAAAAAAAAAAAAAACAwQBAP/EAB4RAAIBBQEBAQAAAAAAAAAAAAABAgMREiExE0HR/9oADAMBAAIRAxEAPwBuXuIkhBuMe5ib/AHQP49q4L3mLitryTLTSpOiHQI5k/HzXa/qbFOEudVTu1dumWvcTaNCZYZ7vU6g6LxqjOU/24dfs1Ouh9FnkMpd3Reeyx83hAxZZEhkdV9/MBrX71WGPvJcqrJBGveKATtuXXqNU0pu02bTHXD/AGvJAluyxxRd6F4x00o+NdKoVrjbzJdvVe1t5cVLc2ck8qjnohgpPtz2v7G6JtPQ2VJwjlcw+37mchpnK6GtIuv5NFWeTsLNPvxWTvpfjvOEfwKKzEVkSct2vscS/BIzSN0YRkeX81UpPqO8masJETu7OOccY4dswYFQeftv096XV5knuJGdm2T1+agvMXj8jEaHX905QihabvcbuS7X566mLWLwSY8PuRnk/u4eZ0deTl71Ef6hY+0yM88TzeNZY4luYwpVYyduOfrvhPTnr0pXSX9y5mCsyJMdyxxvwq599em+taItqCSNc90ChvZRUruUcT0JiO18Elpk7t8v41LWzacxkBSuvjQ/FFJayjDWrCTepAQ2vUH0oo/Jk3ovpwJJeVCP5CN+lFFaaMqy+nAyuChvrTI2kN9JAsi2ZOy4IBHMnkSCP+iqBexSWdxLazoUljJVlPUH2oorkV10pRc7b1zXb/hZOzuJvM86QWEXeELxOzHSIPcmiiiunVlF2RNTpRkrs//Z'; @@ -73,6 +72,8 @@ const room: IRoom = { t: 'c', name: 'general general general general general general general general general general general general general general general general general general general', _id: 'GENERAL', + topic: 'lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum', + announcement: 'Announcement', encrypted: true, autoTranslate: true, autoTranslateLanguage: 'pt-BR', @@ -163,7 +164,7 @@ export const WithActionBadge = () => ( ); -export const WithTopicBanner = () => ( +export const WithTopic = () => ( <>
@@ -176,6 +177,7 @@ export const WithTopicBanner = () => ( + {room.topic} @@ -184,8 +186,30 @@ export const WithTopicBanner = () => (
- - Topic {room.name} - + +); + +export const WithAnnouncement = () => ( + <> +
+ + + + + + {icon && } + {room.name} + + + + + + + + + + +
+ {room.announcement} ); diff --git a/packages/ui-client/src/components/RoomBanner/RoomBanner.stories.tsx b/packages/ui-client/src/components/RoomBanner/RoomBanner.stories.tsx deleted file mode 100644 index 90e14b18b3e2a..0000000000000 --- a/packages/ui-client/src/components/RoomBanner/RoomBanner.stories.tsx +++ /dev/null @@ -1,68 +0,0 @@ -import { Avatar, Box, IconButton } from '@rocket.chat/fuselage'; -import { ComponentProps } from 'react'; - -import { RoomBanner } from './RoomBanner'; -import { RoomBannerContent } from './RoomBannerContent'; - -export default { - title: 'Components/RoomBanner', - component: RoomBanner, -}; -const avatarUrl = - 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wAARCAAoACgDASIAAhEBAxEB/8QAGwAAAgIDAQAAAAAAAAAAAAAAAAcEBgIDBQj/xAAuEAACAQQAAwcEAQUAAAAAAAABAgMABAUREiExBhMUIkFRYQcWcYGhFTJSgpH/xAAYAQADAQEAAAAAAAAAAAAAAAACAwQBAP/EAB4RAAIBBQEBAQAAAAAAAAAAAAABAgMREiExE0HR/9oADAMBAAIRAxEAPwBuXuIkhBuMe5ib/AHQP49q4L3mLitryTLTSpOiHQI5k/HzXa/qbFOEudVTu1dumWvcTaNCZYZ7vU6g6LxqjOU/24dfs1Ouh9FnkMpd3Reeyx83hAxZZEhkdV9/MBrX71WGPvJcqrJBGveKATtuXXqNU0pu02bTHXD/AGvJAluyxxRd6F4x00o+NdKoVrjbzJdvVe1t5cVLc2ck8qjnohgpPtz2v7G6JtPQ2VJwjlcw+37mchpnK6GtIuv5NFWeTsLNPvxWTvpfjvOEfwKKzEVkSct2vscS/BIzSN0YRkeX81UpPqO8masJETu7OOccY4dswYFQeftv096XV5knuJGdm2T1+agvMXj8jEaHX905QihabvcbuS7X566mLWLwSY8PuRnk/u4eZ0deTl71Ef6hY+0yM88TzeNZY4luYwpVYyduOfrvhPTnr0pXSX9y5mCsyJMdyxxvwq599em+taItqCSNc90ChvZRUruUcT0JiO18Elpk7t8v41LWzacxkBSuvjQ/FFJayjDWrCTepAQ2vUH0oo/Jk3ovpwJJeVCP5CN+lFFaaMqy+nAyuChvrTI2kN9JAsi2ZOy4IBHMnkSCP+iqBexSWdxLazoUljJVlPUH2oorkV10pRc7b1zXb/hZOzuJvM86QWEXeELxOzHSIPcmiiiunVlF2RNTpRkrs//Z'; - -const CustomAvatar = (props: Omit, 'url'>) => ; - -export const Default = () => ( - - - Plain text long long long loooooooooooooong loooong loooong loooong loooong loooong loooong teeeeeeext - - - - - Will Bell - - - - -); - -export const WithoutTopic = () => ( - - - - Add topic - - - - - - Will Bell - - - - -); - -export const TopicAndAnnouncement = () => ( -
- - - Topic long long long loooooooooooooong loooong loooong loooong loooong loooong loooong loooong loooong teeeeeeext - - - - - Will Bell - - - - - - - Announcement banner google.com - - -
-); diff --git a/packages/ui-client/src/components/RoomBanner/RoomBanner.tsx b/packages/ui-client/src/components/RoomBanner/RoomBanner.tsx deleted file mode 100644 index 8b9bda9e40207..0000000000000 --- a/packages/ui-client/src/components/RoomBanner/RoomBanner.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import { css } from '@rocket.chat/css-in-js'; -import { Box, Divider, Palette } from '@rocket.chat/fuselage'; -import { useLayout } from '@rocket.chat/ui-contexts'; -import { ComponentProps } from 'react'; - -const clickable = css` - cursor: pointer; - &:focus-visible { - outline: ${Palette.stroke['stroke-highlight']} solid 1px; - } -`; - -const style = css` - background-color: ${Palette.surface['surface-room']}; -`; - -export const RoomBanner = ({ onClick, className, ...props }: ComponentProps) => { - const { isMobile } = useLayout(); - - return ( - <> - - - - ); -}; diff --git a/packages/ui-client/src/components/RoomBanner/RoomBannerContent.tsx b/packages/ui-client/src/components/RoomBanner/RoomBannerContent.tsx deleted file mode 100644 index 36b5d74569eab..0000000000000 --- a/packages/ui-client/src/components/RoomBanner/RoomBannerContent.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import { css } from '@rocket.chat/css-in-js'; -import { Box, Palette } from '@rocket.chat/fuselage'; -import { HTMLAttributes } from 'react'; - -export const RoomBannerContent = (props: Omit, 'is'>) => ( - -); diff --git a/packages/ui-client/src/components/RoomBanner/index.ts b/packages/ui-client/src/components/RoomBanner/index.ts deleted file mode 100644 index 9c79ab469b624..0000000000000 --- a/packages/ui-client/src/components/RoomBanner/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from './RoomBanner'; -export * from './RoomBannerContent'; diff --git a/packages/ui-client/src/components/index.ts b/packages/ui-client/src/components/index.ts index 4b637518ebd5f..dd3d037772a46 100644 --- a/packages/ui-client/src/components/index.ts +++ b/packages/ui-client/src/components/index.ts @@ -11,6 +11,6 @@ export * from './Header'; export * from './HeaderV2'; export * from './MultiSelectCustom/MultiSelectCustom'; export * from './FeaturePreview'; -export * from './RoomBanner'; +export { default as AnnouncementBanner } from './AnnouncementBanner'; export { default as UserAutoComplete } from './UserAutoComplete'; export * from './GenericMenu'; diff --git a/packages/ui-composer/package.json b/packages/ui-composer/package.json index 37b9132467a60..d51540b92c5e4 100644 --- a/packages/ui-composer/package.json +++ b/packages/ui-composer/package.json @@ -21,7 +21,7 @@ "@babel/core": "~7.26.0", "@react-aria/toolbar": "^3.0.0-nightly.5042", "@rocket.chat/eslint-config": "workspace:^", - "@rocket.chat/fuselage": "~0.61.0", + "@rocket.chat/fuselage": "~0.62.0", "@rocket.chat/icons": "^0.42.0", "@storybook/addon-actions": "^8.6.4", "@storybook/addon-docs": "^8.6.4", diff --git a/packages/ui-video-conf/package.json b/packages/ui-video-conf/package.json index 5523b6be76cb5..ed5e6c4d6dfff 100644 --- a/packages/ui-video-conf/package.json +++ b/packages/ui-video-conf/package.json @@ -24,7 +24,7 @@ "@babel/core": "~7.26.0", "@rocket.chat/css-in-js": "~0.31.25", "@rocket.chat/eslint-config": "workspace:^", - "@rocket.chat/fuselage": "~0.61.0", + "@rocket.chat/fuselage": "~0.62.0", "@rocket.chat/fuselage-hooks": "~0.35.0", "@rocket.chat/icons": "^0.42.0", "@rocket.chat/jest-presets": "workspace:~", diff --git a/packages/ui-voip/package.json b/packages/ui-voip/package.json index 80cdebd0b7c5b..d997b22dcb838 100644 --- a/packages/ui-voip/package.json +++ b/packages/ui-voip/package.json @@ -29,7 +29,7 @@ "@react-spectrum/test-utils": "~1.0.0-alpha.2", "@rocket.chat/css-in-js": "~0.31.25", "@rocket.chat/eslint-config": "workspace:^", - "@rocket.chat/fuselage": "~0.61.0", + "@rocket.chat/fuselage": "~0.62.0", "@rocket.chat/fuselage-hooks": "~0.35.0", "@rocket.chat/icons": "^0.42.0", "@rocket.chat/jest-presets": "workspace:~", diff --git a/yarn.lock b/yarn.lock index f0ad9f552d329..34c6f079c747f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8183,7 +8183,7 @@ __metadata: "@rocket.chat/apps-engine": "workspace:^" "@rocket.chat/core-typings": "workspace:^" "@rocket.chat/eslint-config": "workspace:^" - "@rocket.chat/fuselage": "npm:~0.61.0" + "@rocket.chat/fuselage": "npm:~0.62.0" "@rocket.chat/fuselage-hooks": "npm:~0.35.0" "@rocket.chat/fuselage-polyfills": "npm:~0.31.25" "@rocket.chat/gazzodown": "workspace:^" @@ -8242,9 +8242,9 @@ __metadata: languageName: unknown linkType: soft -"@rocket.chat/fuselage@npm:~0.61.0": - version: 0.61.0 - resolution: "@rocket.chat/fuselage@npm:0.61.0" +"@rocket.chat/fuselage@npm:~0.62.0": + version: 0.62.0 + resolution: "@rocket.chat/fuselage@npm:0.62.0" dependencies: "@rocket.chat/css-in-js": "npm:^0.31.25" "@rocket.chat/css-supports": "npm:^0.31.25" @@ -8262,7 +8262,7 @@ __metadata: react: "*" react-dom: "*" react-virtuoso: 1.2.4 - checksum: 10/11e391d9fd8191e9e62073629430062365c13a85e406db417a2f06c24589176b83a23ec2abdbd80d5ea51bd8da87d011a9769362104ecc87f20c5eb15df072c3 + checksum: 10/493225ab219172fec6061735dab0e07f265adb991af0e66713a9771089cb917a472bd0147d4f4d48b6950002aef9e562c298288babd6118bc7083cd2681d99fe languageName: node linkType: hard @@ -8273,7 +8273,7 @@ __metadata: "@babel/core": "npm:~7.26.0" "@rocket.chat/core-typings": "workspace:^" "@rocket.chat/css-in-js": "npm:~0.31.25" - "@rocket.chat/fuselage": "npm:~0.61.0" + "@rocket.chat/fuselage": "npm:~0.62.0" "@rocket.chat/fuselage-tokens": "npm:~0.33.2" "@rocket.chat/jest-presets": "workspace:~" "@rocket.chat/message-parser": "workspace:^" @@ -8644,7 +8644,7 @@ __metadata: "@rocket.chat/eslint-config": "workspace:^" "@rocket.chat/favicon": "workspace:^" "@rocket.chat/freeswitch": "workspace:^" - "@rocket.chat/fuselage": "npm:~0.61.0" + "@rocket.chat/fuselage": "npm:~0.62.0" "@rocket.chat/fuselage-hooks": "npm:~0.35.0" "@rocket.chat/fuselage-polyfills": "npm:~0.31.25" "@rocket.chat/fuselage-toastbar": "npm:^0.35.0" @@ -9569,7 +9569,7 @@ __metadata: resolution: "@rocket.chat/ui-avatar@workspace:packages/ui-avatar" dependencies: "@babel/core": "npm:~7.26.0" - "@rocket.chat/fuselage": "npm:~0.61.0" + "@rocket.chat/fuselage": "npm:~0.62.0" "@rocket.chat/ui-contexts": "workspace:^" "@types/react": "npm:~18.3.17" "@types/react-dom": "npm:~18.3.5" @@ -9594,7 +9594,7 @@ __metadata: "@babel/core": "npm:~7.26.0" "@react-aria/toolbar": "npm:^3.0.0-nightly.5042" "@rocket.chat/css-in-js": "npm:~0.31.25" - "@rocket.chat/fuselage": "npm:~0.61.0" + "@rocket.chat/fuselage": "npm:~0.62.0" "@rocket.chat/fuselage-hooks": "npm:~0.35.0" "@rocket.chat/icons": "npm:^0.42.0" "@rocket.chat/jest-presets": "workspace:~" @@ -9650,7 +9650,7 @@ __metadata: "@babel/core": "npm:~7.26.0" "@react-aria/toolbar": "npm:^3.0.0-nightly.5042" "@rocket.chat/eslint-config": "workspace:^" - "@rocket.chat/fuselage": "npm:~0.61.0" + "@rocket.chat/fuselage": "npm:~0.62.0" "@rocket.chat/icons": "npm:^0.42.0" "@storybook/addon-actions": "npm:^8.6.4" "@storybook/addon-docs": "npm:^8.6.4" @@ -9741,7 +9741,7 @@ __metadata: resolution: "@rocket.chat/ui-theming@workspace:ee/packages/ui-theming" dependencies: "@rocket.chat/css-in-js": "npm:~0.31.25" - "@rocket.chat/fuselage": "npm:~0.61.0" + "@rocket.chat/fuselage": "npm:~0.62.0" "@rocket.chat/fuselage-hooks": "npm:~0.35.0" "@rocket.chat/icons": "npm:^0.42.0" "@rocket.chat/ui-contexts": "workspace:~" @@ -9771,7 +9771,7 @@ __metadata: "@rocket.chat/css-in-js": "npm:~0.31.25" "@rocket.chat/emitter": "npm:~0.31.25" "@rocket.chat/eslint-config": "workspace:^" - "@rocket.chat/fuselage": "npm:~0.61.0" + "@rocket.chat/fuselage": "npm:~0.62.0" "@rocket.chat/fuselage-hooks": "npm:~0.35.0" "@rocket.chat/icons": "npm:^0.42.0" "@rocket.chat/jest-presets": "workspace:~" @@ -9821,7 +9821,7 @@ __metadata: "@rocket.chat/css-in-js": "npm:~0.31.25" "@rocket.chat/emitter": "npm:~0.31.25" "@rocket.chat/eslint-config": "workspace:^" - "@rocket.chat/fuselage": "npm:~0.61.0" + "@rocket.chat/fuselage": "npm:~0.62.0" "@rocket.chat/fuselage-hooks": "npm:~0.35.0" "@rocket.chat/icons": "npm:^0.42.0" "@rocket.chat/jest-presets": "workspace:~" @@ -9880,7 +9880,7 @@ __metadata: "@lezer/highlight": "npm:^1.2.1" "@rocket.chat/core-typings": "workspace:^" "@rocket.chat/css-in-js": "npm:~0.31.25" - "@rocket.chat/fuselage": "npm:~0.61.0" + "@rocket.chat/fuselage": "npm:~0.62.0" "@rocket.chat/fuselage-hooks": "npm:~0.35.0" "@rocket.chat/fuselage-polyfills": "npm:~0.31.25" "@rocket.chat/fuselage-toastbar": "npm:^0.35.0"