01. Styling the `Status` variants

🐇 TL;DR

• Our calendar day statuses are overlapping
• Let’s define a finite list of possible, individual statuses!

⬇️ Skip to the challenge

---

🐢 Background

The first step to simplifying our conditional logic for applying calendar day styles is to come up with a finite list of possible, individual statuses.

And by individual, I mean that a calendar day should only ever be in a single one of those statuses.

A finite list of possible states.

It really sounds like a “state chart” – to the point where I am expecting David K. 🎹 to appear in this workshop out of nowhere.

😅

Speaking of, this article by David is pretty interesting and relevant.

An inventory of possible calendar day statuses

---

Group exercise: Looking at the Calendar App, let’s try and come up with a list of possible “statuses” that a calendar day could be in.

Go ahead.

Done?

Keep scrolling

What I came up with…

Here’s a simple table representing the different statuses a calendar day can be in at a given time.

The table differentiate how a day would look on any given day versus on the current day:

This table has 4 rows only, but I’ve identified 5 different statuses.

The first 4 are DISABLED, NO_VACANCY, VACANCY, SELECTED

But looking at the Today column, and setting aside the little dot under the number, we can see that the styles for VACANCY and SELECTED are essentially the same whether the day is the current day or not.

But in the case of NO_VACANCY, the styles are quite different if the day in question is the current day.

We should probably therefore add a 5th possible status: TODAY_NO_VACANCY.

A TypeScript Status type

Let’s store these 5 possible statuses in a Status type:

type Status = 'DISABLED' | 'SELECTED' | 'NO_VACANCY' | 'TODAY_NO_VACANCY' | 'VACANCY'

These 5 statuses are actually very similar to the 5 keys defined in the dynamicClasses object in our existing code:

const dynamicClasses = {
  disabled: 'text-slate-300 pointer-events-none',
  selected: 'bg-indigo-600 text-white font-bold bg-stripes',
  candidate: 'text-slate-900 hover:bg-slate-100',
  today: 'text-indigo-600 font-bold hover:bg-slate-100',
  hasAvailability: 'bg-indigo-100 text-indigo-600 font-bold hover:bg-indigo-200',
}

I was actually not far off with my original reasoning. The only issue was that a name like candidate did not factor in the fact it could also be today, which would alter that day’s styles.

Now that we have this Status type with 5 defined statuses, let’s port over the styles from the dynamicClasses to a new statusClasses style lookup object.

Matter of fact, this is your first challenge!

---

🏆 Your challenge 🏆

In the Gitpod workspace below:

1. In src/components/calendar/availability-status.ts, rename the keys of the statusClasses style lookup object to match our 5 Status values.

Look at how those statusClasses are used in the src/components/calendar/day-status-table.astro file.

When you’re done, the “Availability Status” table should look identical to the “Reference” table in your browser.

You’ll find more hints within the project.

---

✌️ Good luck!

Open in Gitpod →