Feature/headings list

[firestar300]

trafficstars

Dans cette PR, on a un second paramètre sur la mixin heading pour gérer les styles du composant core/heading. Par défault, nous avons que le style par défaut mais sur certains projets il est possible d'avoir un style particulier. Un exemple concret sur les h2, h3 et h4 qu'on pourrait avoir en uppercase, ça donnerait :

_heading.scss

$headings: (
    "1": (),
    "2": (
        "uppercase"
    ),
    "3": (
        "uppercase"
    ),
    "4": (
        "uppercase"
    ),
    "5": (),
    "6": (),
);

@each $i, $styles in $headings {
    h#{$i},
    .is-style-h#{$i} {
        @include heading(h#{$i});

        @each $style in $styles {
            &.is-style-#{$style} {
                @include heading(h#{$i}, $style);
            }
        }
    }

    .has-h-#{$i}-font-size {
        font-size: var(--font-size-h#{i});
    }
}

_m-heading.scss

@mixin heading($name: h1, $style: default) {
    font-family: $font-family-primary;
    font-weight: 400;

    @if $name == h1 {
        font-size: var(--heading--font-size-h1);
        line-height: var(--heading--line-height-h1);
    }

    @if $name == h2 {
        font-size: var(--heading--font-size-h2);
        line-height: var(--heading--line-height-h2);

        @if $style == uppercase {
            text-transform: uppercase;
        }
    }

    @if $name == h3 {
        font-size: var(--heading--font-size-h3);
        line-height: var(--heading--line-height-h3);

        @if $style == uppercase {
            text-transform: uppercase;
        }
    }

    @if $name == h4 {
        font-size: var(--heading--font-size-h4);
        line-height: var(--heading--line-height-h4);

        @if $style == uppercase {
            text-transform: uppercase;
        }
    }

    @if $name == h5 {
        font-size: var(--heading--font-size-h5);
        line-height: var(--heading--line-height-h5);
    }

    @if $name == h6 {
        font-size: var(--heading--font-size-h6);
        line-height: var(--heading--line-height-h6);
    }
}

Je corrige une typo sur les commentaires de certains fichiers *.scss