feat(styles): added an optional Calendar legend section [ci visual]

[alexhristov14]

The styling needed for the calendar legend: SAP/fundamental-ngx#12403

Example:

[netlify]

✅ Deploy Preview for fundamental-styles ready!

Name	Link
🔨 Latest commit	7694890
🔍 Latest deploy log	https://app.netlify.com/sites/fundamental-styles/deploys/67376f9f81e943000874412e
😎 Deploy Preview	https://deploy-preview-5707--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 configuration.

[InnaAtanasova]

Screen.Recording.2024-10-21.at.2.45.31.PM.mov

On focus elements "jump". Element's states (hover, focus, active) should not affect the element's dimensions. In this case, the focus outline should be shown without a change in the element height, which causes the "jump"

[InnaAtanasova]

These class names are not following the BEM rules.
fd-calendar is the block element, because the entire element can be "extracted" from a project and used in another project, aka it's an independent unit. The elements inside this blocks have the double underscore in their class names.
For example: fd-calendar__row, fd-calendar__item, fd-calendar__date, etc.
When you look at these classes you can immediately tell that it's a row/item/date, etc. that belong to the calendar component (block).
The double dash notation is a modifier. If you have an item, or date, that are a variation of the common one, you use a modifier class to add specifics for it. For example, if the weekend dates and the work days have different background, then you do something like this:
fd-calendar__date fd-calendar__date--weekend or fd-calendar__date fd-calendar__date--work, fd-calendar__date fd-calendar__date--vacation.
When you read the class fd-calendar__date--vacation it basically says: "it's a vacation variation of date element that belongs to calendar".
If you have to read this class fd-calendar--legend__item--circle, you can't tell what is an element and what is a modifier.

[InnaAtanasova]

here's more on BEM:
https://getbem.com/introduction/
https://en.bem.info/methodology/css/
https://css-tricks.com/bem-101/

[InnaAtanasova]

if this is not part of the table, like I suggested in another comment, you can achieve this with flex. The reason to use flex here is because with modifier classes you can easily achieve different variations of the legend. It can be the way you did it, but it can also be like this:

[InnaAtanasova]

@include fd-inline-flex-center()

[InnaAtanasova]

margin-inline: 0;
margin-block: 0;

[InnaAtanasova]

absolute positioning should be your last option. Try with flex.

[InnaAtanasova]

@mixin fd-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

[InnaAtanasova]

padding-block-start: 0;

[InnaAtanasova]

padding-inline: 0.125rem;
padding-block: 0.125rem;