Include logic to build Language variations of Grandstand

[sareh]

Currently, Grandstand only has the CSS for latin script, used by the English language BBC sites.
The BBC News uses Grandstand and it has almost 30 other World Service sites in various languages.

Here is a map of BBC sites to their scripts:

var scriptMap = {
    "arabic": "arabic",
    "bengali": "bengali",
    "burmese": "burmese",
    "hindi": "hindi",
    "japanese": "japanese",
    "kyrgyz": "cyrillic",
    "nepali": "hindi",
    "pashto": "arabic",
    "persian": "arabic",
    "russian": "cyrillic",
    "sinhala": "sinhala",
    "tajik": "cyrillic",
    "tamil": "tamil",
    "ukchina-simp": "chinese",
    "ukchina-trad": "chinese",
    "ukrainian": "cyrillic",
    "urdu": "arabic",
    "uzbek": "cyrillic",
    "zhongwen-simp": "chinese",
    "zhongwen-trad": "chinese"
};

Glossary Service is what we call each of the different sites. e.g. http://www.bbc.co.uk/arabic is the Arabic service.

Tasks

• To have a gulp task that goes through each key of this object and then spins out a _bbc-service.scss file.
• Ensure each of the _bbc-service.scss files have the relevant variables, e.g. _bbc-pashto.scss should have $script: 'arabic'; and most likely a scaling value for the font size & line height, in rem.
• Decide on whether it is worth creating overrides for line-height and font-size for each individual type (e.g. gel-trafalgar).

e.g. in the file https://github.com/BBC-News/responsive-news/blob/develop/tabloid/webapp/static/sass/objects/_typography.scss, we have code that overrides the typography

%trafalgar {
    @include respond-to(A) {
        @include font-settings(
            get-script-value((latin 20px, tamil 18px, arabic-pashto 22px, bengali 22px, japanese 24px, chinese 24px)),
            get-script-value((latin 24px, arabic 28px, hindi 30px, tamil 26px, arabic-pashto 28px, bengali 30px, burmese 30px, japanese 30px, chinese 30px, thai 26px))
        );
    }

    @include respond-to(B) {
        @include font-settings(
            get-script-value((latin 24px, arabic 24px, tamil 18px, arabic-pashto 22px, bengali 26px, thai 22px)),
            get-script-value((latin 28px, arabic 28px, tamil 26px, hindi 36px, arabic-pashto 34px, bengali 36px, burmese 36px, japanese 30px, chinese 30px))
        );
    }

    @include respond-to(C) {
        @include font-settings(
            get-script-value((latin 36px, arabic 32px, hindi 34px, tamil 26px, arabic-pashto 32px, bengali 38px, japanese 32px, chinese 32px, thai 32px)),
            get-script-value((latin 40px, arabic 40px, latin-diacritics 42px, hindi 50px, tamil 34px, arabic-pashto 44px, bengali 50px, burmese 52px, japanese 42px, chinese 42px))
        );
    }

    @include respond-to(D) {
        @include font-settings(
            get-script-value((latin 32px, tamil 22px, sinhala 42px, bengali 38px)),
            get-script-value((latin 36px, arabic 38px, hindi 44px, arabic-pashto 38px, bengali 48px, burmese 48px, chinese 42px, tamil 30px, sinhala 46px, japanese 42px, thai 40px))
        );
    }
}

We can look at this for Typography: https://github.com/bbc/gel-typography/blob/master/lib/_settings.scss

[dgm34]

👀

[mintuz]

Hello @sareh is this issue now solved with the different variants defined here. https://github.com/bbc/grandstand/tree/master/src Just wanting to understand the problem a little further, the first two tasks you defined it feels like we already have these in place and is only the 3rd bullet point we need to try and solve?