designsystemet
1.0.0
DesignSystemet - это коллекция важных элементов дизайна, компонентов и моделей, которые можно использовать для создания общественных услуг.
Наша цель-создать последовательный и удобный опыт в цифровых решениях для общественных услуг, что делает их более эффективными и надежными.
Справочник - предварительный просмотр компонентов React.
Storefront - Общая документация о системе проектирования.
Тема - Строитель темы.
@digdir/designsystemet - CLI для DesignSystemet.
@digdir/designsystemet-theme - Темы для DesignSystemet.
@digdir/designsystemet-css - стиль для компонентов.
@digdir/designsystemet-react - React реализация компонентов DesignSystemet.
Следуйте этим шагам, чтобы начать с компонентов React.
В зависимости от ваших потребностей и технологического стека Установите соответствующие пакеты
npm i @digdir/designsystemet
npm i @digdir/designsystemet-css
npm i @digdir/designsystemet-theme
npm i @digdir/designsystemet-react Вы можете создать свою собственную тему для использования с пакетами DesignSystemet, перейдя к нашему строителю темы.
Тема DesignSystemet определяется с использованием Design-Tokens. Это сделано для того, чтобы вы могли использовать Token Studio для синхронизации вашей темы в коде с набором пользовательского интерфейса DesignSystemet Figma, в дополнение к обеспечению будущей гибкости.
Запустите npx @digdir/designsystemet tokens build для создания файлов CSS для вашей пользовательской темы (из Design-Tokens). Используя свой собственный встроенный файл темы CSS, вы можете пропустить, используя пакет @digdir/designsystemet-theme .
Вы можете использовать любую семью Font с компонентами.
Компоненты разработаны и разработаны с использованием межвальника, поэтому могут возникнуть изменения, если используется другой шрифт.
Добавьте тег <link> в <head> и установите font-family для Inter в вашем глобальном файле CSS.
font-feature-settings добавляют хвост в нижний регистр L '.
< link
rel =" stylesheet "
href =" https://altinncdn.no/fonts/inter/inter.css "
/> body {
font-family : 'Inter' , sans-serif;
font-feature-settings : 'cv05' 1 ; /* Enable lowercase l with tail */
} Если вы решите установить шрифт по -другому, не забудьте включить веса шрифтов 400 , 500 и 600 .
import '@digdir/designsystemet-theme' ;
import '@digdir/designsystemet-css' ;
import { Button } from '@digdir/designsystemet-react' ;
< Button variant = 'secondary' > I am a button! </ Button > ; @digdir/designsystemet-theme и @digdir/designsystemet-css должен быть импортирован только один раз.
Поскольку имена цветов зависят от того, какая тема используется, вы должны добавить следующее в свой tsconfig.json , чтобы использовать все ваши цвета в компонентах, которые имеют опору data-color :
@digdir/designsystemet-theme {
// ...other settings
"compilerOptions" : {
// ...other compilerOptions
"types" : [
// ...other types
"@digdir/designsystemet-theme/colors.d.ts"
]
} ,
} Команда CLI designsystemet tokens build Command выведет файл colors.d.ts в выбранном вами выходном каталоге. В примере замените <your-path> на фактический путь, который вы использовали при выполнении команды.
{
// ...other settings
"compilerOptions" : {
// ...other compilerOptions
"types" : [
// ...other types
"<your-path>/colors.d.ts"
]
} ,
} Вы можете понадобиться подсказки редактора для атрибутов data-color и атрибутов data-size на HTML-элементах, таких как <span> или <div> , поскольку эти атрибуты могут влиять на компоненты, вложенные в эти элементы.
Это требует увеличения встроенных типов React и, следовательно, выбирается. Если вы хотите это, добавьте следующее в свой tsconfig.json :
{
// ...other settings
"compilerOptions" : {
// ...other compilerOptions
"types" : [
// ...other types
"@digdir/designsystemet-react/react-types.d.ts"
]
} ,
} Узнайте, как вы можете внести свой вклад в этот проект, прочитав наш кодекс поведения и руководство по внесению вклад.
Нам повезло, что у нас есть отличная группа людей, которые помогают с системой дизайна.
Благодаря Chromatic за предоставление платформы визуального тестирования, которая помогает нам просмотреть изменения пользовательского интерфейса и улавливать визуальные регрессии.
