feat(styles): update Calendar component - Horizon 2023

[droshev]

Related Issue

Closes #4369

Description

Update Calendar and Date Picker with the latest Horizon specs

BREAKING CHANGE:
complete calendar markup refactoring(item, navigation, legend). Many classes were removed.

Navigation
Before:

<header class="fd-calendar__header">
    <div class="fd-calendar__navigation">
...
    </div>
</header>

After:

<header class="fd-calendar__navigation">
...
</header>

Calendar Day
Before:

<td role="gridcell" class="fd-calendar__item">
    <span class="fd-calendar__text" role="button">8</span>
</td>

After:

<td role="gridcell" class="fd-calendar__item">
    <div class="fd-calendar__text-wrapper">
        <span class="fd-calendar__text" role="button">8</span>
    </div>
</td>

Calendar Container
Before:

<div class="fd-calendar__content fd-calendar__content--dates" id="IO0cp341">
    <table class="fd-calendar__table" role="grid">
        <thead class="fd-calendar__group">
...
    </table>
</div>

After:

<table class="fd-calendar__content" id="IO0cp341" role="grid">
    <thead class="fd-calendar__group">
...
</table

[netlify]

✅ Deploy Preview for fundamental-styles ready!

Name	Link
🔨 Latest commit	400a25b
🔍 Latest deploy log	https://app.netlify.com/sites/fundamental-styles/deploys/6491ee547a67c40008602085
😎 Deploy Preview	https://deploy-preview-4514--fundamental-styles.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[InnaAtanasova]

1. The focus outline should be on top of the special day indicator. Maybe use z-index.

2. Wrong BEM in my opinion in this case:

fd-calendar__item fd-calendar__item--weekend fd-calendar__item--current is-active fd-calendar__special-day--1

The block is fd-calendar__item and the following modifier classes modify the default behaviour: fd-calendar__item--weekend and fd-calendar__item--current, but the class fd-calendar__special-day--1 is not used properly. Here are the problems:

• fd-calendar__special-day--1 is a block and can't be used together with another block (in this case fd-calendar__item
• you need fd-calendar__special-day to have the fd-calendar__special-day--1
  But in general, I wouldn't use 2 block classes on the same element

The code is in "Days" example

3. Related to the above comment:

fd-calendar__item fd-calendar__special-day fd-calendar__special-day--2

the workaround could be to use a modifier class for fd-calendar__item, like fd-calendar__item--special-day-2

[InnaAtanasova]

RTL issues