[StudyBox]: New styles

[RiinaKuu]

https://funidata.atlassian.net/browse/DS-572

POC for study box styles.
During the development, issues arised because current study boxes (in Sisu) contain styles which are not present in Fudis.

• Designers will discuss what to do:
  • Add the missing styles to Fudis
  • Redesign with existing style options
  • Something in between the two above
  • Not adding study box styles to Fudis at all

Note: This PR will be on hold as long as designers contact us.

[RiinaKuu]

Designers have informed us that they will rethink and redesign the boxes later on. Let's hold this PR until then and refactor accordingly.

[MayaMarjut]

I would set some min height, for each of the sections 'heading', 'content', 'notification' and action, since now the height is altered only by size of a icon. Note that 'heading' section is now smaller, caused by the smaller font size. It should be set to $heading-xxs-font-size = 14px;

Also I wish that the classes would follow the same BEM syntax and would have the same prefix (fudis-box --> fudis-study-realisation-box), but no need to do anything now since this pull request is on hold.

[RiinaKuu]

Agreed. I was stuggling with the naming, since fudis-study-box and fudis-realisation-box does not have a common prefix, I just named the outermost article to fudis-box, but then thought it would be somewhat repetitive to use fudis-box__study-box and fudis-box__study-realisation-box. But hindsight, maybe it would be better to name it that way anyway.

[RiinaKuu]

Adding min-height and spotting the wrong typography are something to remember when we revisit this PR, in addition to BEM naming 👍

And also as a reminder, we have to consider how to make each "block" so that it allows the consuming application to be able to position the elements as they will - so we have to be mindful with all the additional alignments of the elements.