feat: Add title to privacy indicator

Closes #25
null2264 · Sep 23, 2023 · ae65328 · ae65328
1 parent 8a4e28e
commit ae65328
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 7 deletions.
diff --git a/app/soapbox/components/statuses/status-info.tsx b/app/soapbox/components/statuses/status-info.tsx
@@ -1,10 +1,19 @@
 import clsx from 'clsx';
 import React from 'react';
+import { useIntl, defineMessages } from 'react-intl';
 
 import { HStack, Icon, Text } from '../ui';
 
 import type { StatusVisibility } from 'soapbox/normalizers/status';
 
+const messages = defineMessages({
+  direct: { id: 'privacy.direct.short', defaultMessage: 'Direct' },
+  private: { id: 'privacy.private.short', defaultMessage: 'Followers-only' },
+  public: { id: 'privacy.public.short', defaultMessage: 'Public' },
+  local: { id: 'privacy.local.short', defaultMessage: 'Local-only' },
+  unlisted: { id: 'privacy.unlisted.short', defaultMessage: 'Unlisted' },
+});
+
 interface IStatusInfo {
   avatarSize?: number
   icon?: React.ReactNode
@@ -13,6 +22,7 @@ interface IStatusInfo {
 }
 
 const StatusInfo = (props: IStatusInfo) => {
+  const intl = useIntl();
   const { avatarSize, icon, text, visibility } = props;
 
   const onClick = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
@@ -48,22 +58,22 @@ const StatusInfo = (props: IStatusInfo) => {
       </HStack>
 
       {
-        visibility === 'public' && <Icon aria-hidden src={require('@tabler/icons/world.svg')} className='h-5 w-5 shrink-0 text-gray-400 dark:text-gray-600' />
+        visibility === 'public' && <Icon aria-hidden title={intl.formatMessage(messages.public)} src={require('@tabler/icons/world.svg')} className='h-5 w-5 shrink-0 text-gray-400 dark:text-gray-600' />
       }
       {
-        visibility === 'unlisted' && <Icon aria-hidden src={require('@tabler/icons/eye-off.svg')} className='h-5 w-5 shrink-0 text-gray-400 dark:text-gray-600' />
+        visibility === 'unlisted' && <Icon aria-hidden title={intl.formatMessage(messages.unlisted)} src={require('@tabler/icons/eye-off.svg')} className='h-5 w-5 shrink-0 text-gray-400 dark:text-gray-600' />
       }
       {
-        visibility === 'local' && <Icon aria-hidden src={require('@tabler/icons/home.svg')} className='h-5 w-5 shrink-0 text-gray-400 dark:text-gray-600' />
+        visibility === 'local' && <Icon aria-hidden title={intl.formatMessage(messages.local)} src={require('@tabler/icons/home.svg')} className='h-5 w-5 shrink-0 text-gray-400 dark:text-gray-600' />
       }
       {
-        visibility === 'private' && <Icon aria-hidden src={require('@tabler/icons/lock.svg')} className='h-5 w-5 shrink-0 text-gray-400 dark:text-gray-600' />
+        visibility === 'private' && <Icon aria-hidden title={intl.formatMessage(messages.private)} src={require('@tabler/icons/lock.svg')} className='h-5 w-5 shrink-0 text-gray-400 dark:text-gray-600' />
       }
       {
-        visibility === 'direct' && <Icon aria-hidden src={require('@tabler/icons/mail.svg')} className='h-5 w-5 shrink-0 text-gray-400 dark:text-gray-600' />
+        visibility === 'direct' && <Icon aria-hidden title={intl.formatMessage(messages.direct)} src={require('@tabler/icons/mail.svg')} className='h-5 w-5 shrink-0 text-gray-400 dark:text-gray-600' />
       }
       {
-        visibility === 'placeholder' && <Icon aria-hidden src={require('@tabler/icons/circle-filled.svg')} className='h-5 w-5 shrink-0 text-primary-50 dark:text-primary-800' />
+        visibility === 'placeholder' && <Icon aria-hidden title='Placeholder' src={require('@tabler/icons/circle-filled.svg')} className='h-5 w-5 shrink-0 text-primary-50 dark:text-primary-800' />
       }
     </div>
   );

diff --git a/app/soapbox/components/ui/icon/icon.tsx b/app/soapbox/components/ui/icon/icon.tsx
@@ -19,13 +19,15 @@ interface IIcon extends Pick<React.SVGAttributes<SVGAElement>, 'strokeWidth'> {
   size?: number
   /** Override the data-testid */
   'data-testid'?: string
+  title?: string
 }
 
 /** Renders and SVG icon with optional counter. */
-const Icon: React.FC<IIcon> = ({ src, alt, count, size, countMax, ...filteredProps }): JSX.Element => (
+const Icon: React.FC<IIcon> = ({ src, alt, count, size, countMax, title, ...filteredProps }): JSX.Element => (
   <div
     className='relative flex shrink-0 flex-col'
     data-testid={filteredProps['data-testid'] || 'icon'}
+    title={title}
   >
     {count ? (
       <span className='absolute -right-3 -top-2 flex h-5 min-w-[20px] shrink-0 items-center justify-center whitespace-nowrap break-words'>