Create TextWithIcon component (#3590)

webkom · Feb 22, 2023 · ac747ac · ac747ac
1 parent b4b43eb
commit ac747ac
Show file tree

Hide file tree

Showing 9 changed files with 160 additions and 131 deletions.
diff --git a/app/components/EventItem/index.tsx b/app/components/EventItem/index.tsx
@@ -6,7 +6,7 @@ import Pill from 'app/components/Pill';
 import Tag from 'app/components/Tags/Tag';
 import Time from 'app/components/Time';
 import Tooltip from 'app/components/Tooltip';
-import type { Event, EventTime } from 'app/models';
+import type { Event } from 'app/models';
 import { colorForEvent } from 'app/routes/events/utils';
 import { eventAttendanceAbsolute } from 'app/utils/eventStatus';
 import styles from './styles.css';
@@ -69,10 +69,9 @@ const Attendance = ({ event }) => {
 
 type TimeStampProps = {
   event: Event;
-  loggedIn: boolean;
 };
 
-const TimeStamp = ({ event }) => {
+const TimeStamp = ({ event }: TimeStampProps) => {
   return (
     <div className={styles.eventTime}>
       <Flex alignItems="center">
@@ -95,8 +94,8 @@ const TimeStamp = ({ event }) => {
   );
 };
 
-const RegistrationIcon = ({ event, loggedIn }: TimeStampProps) => {
-  const iconStyle = eventStatusObject(event, loggedIn);
+const RegistrationIcon = ({ event }: TimeStampProps) => {
+  const iconStyle = eventStatusObject(event);
   return (
     <Flex justifyContent="center" alignItems="center">
       <Tooltip content={iconStyle.tooltip}>
@@ -112,17 +111,13 @@ const RegistrationIcon = ({ event, loggedIn }: TimeStampProps) => {
 
 type EventItemProps = {
   event: Event;
-  field?: EventTime;
   showTags?: boolean;
-  loggedIn: boolean;
   eventStyle?: EventStyle;
 };
 
 const EventItem = ({
   event,
-  field,
   showTags = true,
-  loggedIn = false,
   eventStyle,
 }: EventItemProps): ReactNode => {
   switch (eventStyle) {
@@ -170,27 +165,19 @@ const EventItem = ({
                     <Image
                       src={event.cover}
                       placeholder={event.coverPlaceholder}
+                      alt={`Event cover image - ${event.title}`}
                     />
                   </Link>
                 )}
               </Flex>
             </Flex>
-            <Flex
-              display="flex"
-              justifyContent="flex-start"
-              column="true"
-              width="25%"
-            >
+            <Flex justifyContent="flex-start" column={true} width="25%">
               <Flex width="100%" justifyContent="flex-start">
-                <RegistrationIcon
-                  event={event}
-                  field={field}
-                  loggedIn={loggedIn}
-                />
+                <RegistrationIcon event={event} />
                 <Attendance event={event} />
               </Flex>
 
-              <TimeStamp event={event} field={field} loggedIn={loggedIn} />
+              <TimeStamp event={event} />
             </Flex>
           </Flex>
           {showTags && (
@@ -216,7 +203,7 @@ const EventItem = ({
               <h3 className={styles.eventItemTitle}>{event.title}</h3>
               {event.totalCapacity > 0 && <Attendance event={event} />}
             </Link>
-            <TimeStamp event={event} loggedIn={loggedIn} />
+            <TimeStamp event={event} />
             {showTags && (
               <Flex wrap>
                 {event.tags.map((tag, index) => (

diff --git a/app/components/TextWithIcon/TextWithIcon.css b/app/components/TextWithIcon/TextWithIcon.css
@@ -0,0 +1,5 @@
+.infoIcon {
+  min-width: 26px;
+  justify-content: center;
+  padding-right: 0.2em;
+}
diff --git a/app/components/TextWithIcon/index.tsx b/app/components/TextWithIcon/index.tsx
@@ -0,0 +1,48 @@
+import Icon from '../Icon';
+import { Flex } from '../Layout';
+import Tooltip from '../Tooltip';
+import styles from './TextWithIcon.css';
+import type { ReactElement } from 'react';
+
+type Props = {
+  iconName: string;
+  className?: string;
+  content: ReactElement | string;
+  tooltipContentIcon?: ReactElement;
+  iconRight?: boolean;
+  size?: number;
+};
+
+const TextWithIcon = ({
+  iconName,
+  className,
+  content,
+  tooltipContentIcon,
+  iconRight = false,
+  size,
+}: Props) => {
+  return (
+    <Flex alignItems="center" className={className}>
+      {iconRight ? <>{content}</> : <></>}
+      {tooltipContentIcon ? (
+        <Tooltip content={tooltipContentIcon}>
+          <Icon
+            name={iconName}
+            className={styles.infoIcon}
+            size={size ? size : undefined}
+          />
+        </Tooltip>
+      ) : (
+        <Icon
+          name={iconName}
+          className={styles.infoIcon}
+          size={size ? size : undefined}
+        />
+      )}
+
+      {iconRight ? <></> : <>{content}</>}
+    </Flex>
+  );
+};
+
+export default TextWithIcon;
diff --git a/app/routes/company/components/Company.css b/app/routes/company/components/Company.css
@@ -1,12 +1,5 @@
 @import url('~app/styles/variables.css');
 
-.infoIcon {
-  min-width: 26px;
-  display: flex;
-  justify-content: center;
-  padding-right: 0.2em;
-}
-
 .sectionHeader {
   font-size: 20px;
   margin-top: 20px;

diff --git a/app/routes/company/components/CompanyDetail.tsx b/app/routes/company/components/CompanyDetail.tsx
@@ -15,6 +15,7 @@ import JoblistingItem from 'app/components/JoblistingItem';
 import { Flex } from 'app/components/Layout';
 import LoadingIndicator from 'app/components/LoadingIndicator';
 import NavigationTab from 'app/components/NavigationTab';
+import TextWithIcon from 'app/components/TextWithIcon';
 import type { Event } from 'app/models';
 import type { DetailedCompany } from 'app/store/models/Company';
 import type { ListJoblisting } from 'app/store/models/Joblisting';
@@ -147,14 +148,17 @@ const CompanyDetail = ({
           {companyInfo.map(
             (info) =>
               info.text && (
-                <Flex key={info.text}>
-                  <Icon name={info.icon} className={styles.infoIcon} />
-                  {info.link ? (
-                    <a href={info.text}>{company.name}</a>
-                  ) : (
-                    info.text
-                  )}
-                </Flex>
+                <TextWithIcon
+                  key={info.text}
+                  iconName={info.icon}
+                  content={
+                    info.link ? (
+                      <a href={info.text}>{company.name}</a>
+                    ) : (
+                      info.text
+                    )
+                  }
+                />
               )
           )}
         </ContentSidebar>

diff --git a/app/routes/events/components/Calendar.css b/app/routes/events/components/Calendar.css
@@ -86,17 +86,8 @@
   line-height: 1.3;
 }
 
-.iconWithText {
+.textWithIcon {
   font-size: 14px;
-  display: flex;
-  align-items: center;
-}
-
-.infoIcon {
-  width: 25px;
-  display: flex;
-  justify-content: center;
-  padding-right: 0.2em;
 }
 
 .weekdayHeading {

diff --git a/app/routes/events/components/CalendarCell.tsx b/app/routes/events/components/CalendarCell.tsx
@@ -3,9 +3,9 @@ import moment from 'moment-timezone';
 import { connect } from 'react-redux';
 import { Link } from 'react-router-dom';
 import { createSelector } from 'reselect';
-import Icon from 'app/components/Icon';
 import Pill from 'app/components/Pill';
 import Popover from 'app/components/Popover';
+import TextWithIcon from 'app/components/TextWithIcon';
 import { FromToTime } from 'app/components/Time';
 import type { Event } from 'app/models';
 import { colorForEvent, textColorForEvent } from '../utils';
@@ -57,24 +57,28 @@ const renderEvent = (event: Event) => {
         )}
       </h3>
       <p className={styles.popoverEventDescription}>{description}</p>
-      <div className={styles.iconWithText}>
-        <Icon name="time-outline" className={styles.infoIcon} />
-        <strong>
-          {moment.duration(endTime.diff(startTime)) <
-          moment.duration(1, 'days') ? (
-            <span>
-              <time>{startTime.format('HH:mm')}</time> -{' '}
-              <time>{endTime.format('HH:mm')}</time>
-            </span>
-          ) : (
-            <FromToTime from={event.startTime} to={event.endTime} />
-          )}
-        </strong>
-      </div>
-      <div className={styles.iconWithText}>
-        <Icon name="location-outline" className={styles.infoIcon} />
-        <strong>{event.location}</strong>
-      </div>
+      <TextWithIcon
+        iconName="time-outline"
+        content={
+          <strong>
+            {moment.duration(endTime.diff(startTime)) <
+            moment.duration(1, 'days') ? (
+              <span>
+                <time>{startTime.format('HH:mm')}</time> -{' '}
+                <time>{endTime.format('HH:mm')}</time>
+              </span>
+            ) : (
+              <FromToTime from={event.startTime} to={event.endTime} />
+            )}
+          </strong>
+        }
+        className={styles.textWithIcon}
+      />
+      <TextWithIcon
+        iconName="location-outline"
+        content={<strong>{event.location}</strong>}
+        className={styles.textWithIcon}
+      />
     </Popover>
   );
 };

diff --git a/app/routes/events/components/EventDetail/EventDetail.css b/app/routes/events/components/EventDetail/EventDetail.css
@@ -43,18 +43,6 @@
   }
 }
 
-.iconWithText {
-  display: flex;
-  align-items: center;
-}
-
-.infoIcon {
-  min-width: 26px;
-  display: flex;
-  justify-content: center;
-  padding-right: 0.2em;
-}
-
 .infoIconLocation {
   display: flex;
   flex-wrap: wrap;