Skip to content

Commit

Permalink
Replace font awesome icons on appt list and request list page (#29504)
Browse files Browse the repository at this point in the history 
* Replace font awesome icons on list page

* change icon default assignment
  • Loading branch information
@jenniemc
jenniemc committed May 2, 2024
1 parent dac3447 commit 2fdb9e8
Show file tree
Hide file tree
Showing 4 changed files with 61 additions and 45 deletions.
47 changes: 29 additions & 18 deletions ...pplications/vaos/appointment-list/components/AppointmentsPage/AppointmentColumnLayout.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -153,37 +153,48 @@ export default function AppointmentColumnLayout({
<AppointmentColumn
padding="0"
size="2"
className="vads-u-font-weight--bold vaos-appts__display--table vaos-appts__text--truncate"
className="vads-u-font-weight--bold vaos-appts__display--table"
canceled={isCanceled}
aria-label={typeOfCareAriaLabel}
>
<span className={classNames('vaos-appts__display--table-cell')}>
<span
className={classNames(
'vaos-appts__display--table-cell',
'vaos-appts__text--truncate',
)}
>
{appointmentLocality}
</span>
</AppointmentColumn>

<AppointmentColumn
padding="0"
size="3"
className="vaos-appts__display--table vaos-appts__text--truncate"
className="vaos-appts__display--table"
canceled={isCanceled}
aria-label={modalityAriaLabel}
>
<span className="vaos-appts__display--table-cell">
<i
aria-hidden="true"
className={classNames(
'fas',
'vads-u-margin-right--1',
'vads-u-color--gray',
modalityIcon,
{
'vaos-appts__text--line-through':
isCanceled && !isCommunityCare,
},
)}
/>
{`${modalityText}`}
<span className="vaos-appts__display--table-cell vads-u-display--flex vads-u-align-items--top">
{!isCommunityCare && (
<span
className={classNames(
'vads-u-color--gray',
'icon-width',
{
'vaos-appts__text--line-through': isCanceled,
},
)}
>
<va-icon
icon={modalityIcon}
size="3"
aria-hidden="true"
/>
</span>
)}
<span className="vaos-appts__text--truncate">
{modalityText}
</span>
</span>
</AppointmentColumn>
</AppointmentRow>
Expand Down
40 changes: 22 additions & 18 deletions ...plications/vaos/appointment-list/components/AppointmentsPage/RequestAppointmentLayout.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ export default function RequestAppointmentLayout({ appointment }) {
>
<AppointmentRow className="vaos-appts__column-gap--3 small-screen:vads-u-flex-direction--row">
<AppointmentColumn size="1" className="vads-u-flex--4">
<AppointmentRow className="vaos-appts__column-gap--3 vaos-appts__display--table vaos-appts__text--truncate xsmall-screen:vads-u-flex-direction--column small-screen:vads-u-flex-direction--row">
<AppointmentRow className="vaos-appts__column-gap--3 vaos-appts__display--table xsmall-screen:vads-u-flex-direction--column small-screen:vads-u-flex-direction--row">
<AppointmentColumn
padding="0"
size="1"
Expand All @@ -71,30 +71,34 @@ export default function RequestAppointmentLayout({ appointment }) {
className="vaos-appts__display--table"
canceled={isCanceled}
>
<span className="vaos-appts__display--table-cell">
<i
className={classNames(
'fas',
'vads-u-margin-right--1',
'vads-u-color--gray',
modalityIcon,
{
'vaos-appts__text--line-through':
isCanceled && !isCommunityCare,
},
)}
/>

{`${modality}`}
<span className="vaos-appts__display--table-cell vads-u-display--flex vads-u-align-items--top">
{!isCommunityCare && (
<span
className={classNames(
'vads-u-color--gray',
'icon-width',
{
'vaos-appts__text--line-through': isCanceled,
},
)}
>
<va-icon
icon={modalityIcon}
size="3"
aria-hidden="true"
/>
</span>
)}
{modality}
</span>
</AppointmentColumn>
<AppointmentColumn
padding="0"
size="1"
className="vaos-appts__display--table vaos-appts__text--truncate"
className="vaos-appts__display--table"
canceled={isCanceled}
>
<span className="vaos-appts__display--table-cell">
<span className="vaos-appts__display--table-cell vaos-appts__text--truncate">
{appointmentLocality}
</span>
</AppointmentColumn>
Expand Down
11 changes: 4 additions & 7 deletions src/applications/vaos/appointment-list/redux/selectors.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -703,21 +703,18 @@ export function selectModalityAriaText(appointment) {
}

export function selectModalityIcon(appointment) {
const isCommunityCare = selectIsCommunityCare(appointment);
const isInPerson = selectIsInPerson(appointment);
const isPhone = selectIsPhone(appointment);
const isVideoAtlas = selectIsAtlasVideo(appointment);
const isVideoClinic = selectIsClinicVideo(appointment);
const isVideoHome = selectIsHomeVideo(appointment);
const isVideoVADevice = selectIsGFEVideo(appointment);

let icon = 'fa-blank';

if (isInPerson || isVideoAtlas || isVideoClinic) icon = 'fa-building';
if (isVideoHome || isVideoVADevice) icon = 'fa-video';
let icon = '';

if (isPhone) icon = 'fa-phone-alt';
if (isCommunityCare) icon = 'fa-blank';
if (isInPerson || isVideoAtlas || isVideoClinic) icon = 'location_city';
if (isVideoHome || isVideoVADevice) icon = 'videocam';
if (isPhone) icon = 'phone';

return icon;
}
Expand Down
8 changes: 6 additions & 2 deletions src/applications/vaos/appointment-list/sass/styles.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -231,7 +231,7 @@ div[id^="vaos-appts__detail-"] {
display: table-cell;
}

.vaos-appts__text--truncate > * {
.vaos-appts__text--truncate {
@include media($small-screen) {
white-space: nowrap;
overflow: hidden !important;
Expand All @@ -245,7 +245,7 @@ div[id^="vaos-appts__detail-"] {
.vaos-appts__text--line-through::after {
content: "";
display: block;
width: 25px;
width: 100%;
height: 1px;
background-color: var(--vads-color-base);
position: absolute;
Expand Down Expand Up @@ -300,3 +300,7 @@ div[id^="vaos-appts__detail-"] {
outline-offset: 2px;
}
}

.icon-width {
min-width: 32px !important;
}

0 comments on commit 2fdb9e8

Please sign in to comment.