Библиотека компонентов для вертикали SDDS CS

Реализация компонентов для создания веб-приложений.

Компоненты реализованы с помощью React и поставляются в варианте на emotion.

Установка​

info

Требуются react и react-dom версии 16.13.1 или выше, а также @emotion/react и @emotion/styled версии 11 или выше.

$ npm install --save react react-dom
$ npm install --save @salutejs/sdds-cs @salutejs/sdds-themes
$ npm install --save @emotion/react @emotion/styled

Варианты поставки​

Единственный вариант поставки — emotion.

Точка входаРеализацияДополнительные зависимости
@salutejs/sdds-csemotion@emotion/react, @emotion/styled
import { Button } from '@salutejs/sdds-cs';

Beta-компоненты доступны из точки входа @salutejs/sdds-cs/beta. Подробнее — в разделе Beta.

Подключение шрифтов​

info

Для того чтобы шрифт было удобно поставлять в web-приложения, шрифт был загружен на CDN.

Типографическая система основана на фирменных шрифтах.

Для её использования, необходимо загрузить три css файла в зависимости от используемых шрифтов в теме.

info

Если в качестве основы web-приложения вы используете create-react-app, вам необходимо изменить файл ./public/index.html.

Добавить внутрь тега head.

<html>
    <head>
        <link rel="stylesheet" href="https://cdn-app.sberdevices.ru/shared-static/0.0.0/styles/SBSansText.0.2.0.css" />
        <link
            rel="stylesheet"
            href="https://cdn-app.sberdevices.ru/shared-static/0.0.0/styles/SBSansDisplay.0.2.0.css"
        />
        <link
            rel="stylesheet"
            href="https://cdn-app.sberdevices.ru/shared-static/0.0.0/styles/SBSansTextMono.0.2.0.css"
        />
        <title>Web App</title>
    </head>
    <body>
    ...
    </body>
</html>

Подключение темы​

Тема включает в себя цветовые и типографические токены и подключается один раз в корне приложения.

info

Точкой входа является корень приложения:

  • Если вы используете Create React App, делайте вызов внутри src/index.tsx.
  • Если вы используете Next.js, создайте файл pages/_app.tsx и подключите стили в нем.

Доступна светлая — sdds_cs__light.

import React from 'react';
import { Global, css } from '@emotion/react';
import { Button, BodyL } from '@salutejs/sdds-cs';
import { sdds_cs__light } from '@salutejs/sdds-themes';

const themeStyle = css(sdds_cs__light);

const App = () => {
    return (
        <>
            <Global styles={themeStyle} />
            <BodyL>Hello world</BodyL>
            <Button text="This is themed button" />
        </>
    );
};

export default App;

Использование компонентов​

Все компоненты доступны напрямую из пакета:

import { Button, BodyL } from '@salutejs/sdds-cs';

export const App = () => {
    return (
        <>
            <BodyL>Hello, SDDS CS!</BodyL>
            <Button>Кнопка</Button>
        </>
    );
};

Использование токенов​

Все css токены завернуты в js переменные для более удобного доступа:

/** Основной цвет текста */
export const textPrimary = 'var(--text-primary, #F5F5F5)';
/** Основной фон */
export const backgroundPrimary = 'var(--background-primary, #000000)';

Так же в пакете есть типографические токены, для случаев, когда необходимо точечно применить типографику к контейнеру.

/** Токены типографики для компонента DsplL */
export const dsplL = ({
    fontFamily: 'var(--plasma-typo-dspl-l-font-family)',
    fontSize: 'var(--plasma-typo-dspl-l-font-size)',
    fontStyle: 'var(--plasma-typo-dspl-l-font-style)',
    fontWeight: 'var(--plasma-typo-dspl-l-font-weight)',
    letterSpacing: 'var(--plasma-typo-dspl-l-letter-spacing)',
    lineHeight: 'var(--plasma-typo-dspl-l-line-height)',
} as unknown) as CSSObject;

Есть два пути импорта токенов:

tip

Путь @salutejs/sdds-themes/tokens/sdds_cs следует использовать, когда нужны токены, которые есть только в этой теме.

  • базовый набор — из @salutejs/sdds-themes/tokens
  • уникальные токены темы — из @salutejs/sdds-themes/tokens/sdds_cs

Пример использования:

import React from 'react';
import styled from '@emotion/styled';
import { textAccent, backgroundPrimary, textL } from '@salutejs/sdds-themes/tokens';

const AppStyled = styled.div`
    padding: 2rem;
    color: ${textAccent};
    background-color: ${backgroundPrimary};
`;

const Container = styled.div`
    ${textL};
    margin: 1rem;
`;

const App = () => {
    return (
        <AppStyled>
            <Container>
                <span>Hello world</span>
            </Container>
        </AppStyled>
    );
};

export default App;

Что дальше​

Подробные руководства собраны в разделе «Руководства»: