备选构件
后一出阿tin. 没有由多个产品小组开发,它们都努力实现为最终用户提供无缝、统一经验的共同目标——确保他们将这种经验视为单一而健全的产品. 这个软件包代表了这些团队中设计师和开发人员之间的协作努力,整合了共同挑战的解决方案. 它提供Altinn特有反应组件,专门满足这些特定团队的共同UI需要.
今天这些团队 Arbeidslate 团队, (中文(简体) ), 团队授权和团队门户.
请注意,该套装是专门为满足上述团队的独特需要而设计的,并非作为通用图书馆. 我们已经有惊人的 挪威公共部门的设计系统我们的目标是在它有意义的地方纳入它的内容,确保调整和利用其优势,同时适应阿尔廷的具体要求.
采用设计系统的战略
从2025年4月10日起 我们决定开始从 挪威公共部门的设计系统 视需要而定。 这些组件将使用 DS<Component> 前缀.
消费者 altinn-components 能够直接使用这些组件,而不需要 @digdir/designsystemet 作为依赖.
这种办法使我们能够:
- 在过渡阶段避免同现有组成部分相冲突.
- 实验与外观和行为相适应,以适应阿尔丁品牌.
- 逐步取代遗留部分:一次
DS<Component>已经足够定制和测试, 我们将删除DS前缀并推广到一等部件. - 发挥设计系统的优势,同时保持对解决方案视觉一致性的全面控制.
- 保持一个经过精心整理和整合的从联合国
@digdir/designsystemet与阿尔廷的外观和感觉.
这项战略与我们以前的做法自然而然地发展起来,我们没有使用来自 @digdir/designsystemet 直接但依赖其象征结构,并探索深化一体化的机会.
这种方法帮助我们更快地前进并建立了理解——现在我们准备采取下一步.
设计符号和 CSS 构建进程
这项一揽子计划以挪威公共部门的设计系统为基础,结合 上游设计标志 有 Altinn 特定的扩展和覆盖 .
为了支持这一点,我们维持一个小型的内部构建脚本:
- 从
@digdir/designsystemet - 应用 Altinn 品牌特性和上传功能(从
./lib/css/tokens/altinn-design-tokens(中文(简体) ) - 构建此库使用的最后 CSS 和令牌
如何使用
- 转到 https://them.designsystemet.no/no/ (中文(简体) )
- 选择“ 继续从配置文件” .
- 粘贴配置从
./lib/css/tokens/designsystemet.config.json并装入主题. - 做你的魔术
- 设置(cog)和"Ta i bruk tema",并将更新的内容替换为
./lib/css/tokens/designsystemet.config.json - 运行
pnpm build-tokens- 这将生成更新的符号和Csdesign-tokens-build目录.
CSS 已经装入 ./lib/css/global.css你们可以走了!
目录结构
lib/css/tokens/
base/ # Tokens originating from @digdir/designsystemet
extensions/ # Altinn-specific additions and overrides
build/ # Generated output (CSS + tokens)
## Feedback and questions
Keep in mind that this package is a work in progress and will be updated continuously.
If you have any feedback or questions, please reach out to us on Github.
## Installation
To install the package, run the following command:
```bash
# for npm users
npm install @altinn/altinn-components
# for yarn users
yarn add @altinn/altinn-components
# for pnpm users
pnpm add @altinn/altinn-components
与Node.js 20.x试验
所需资源
React >=18作为同伴的依赖关系。 还有 react-dom 如果需要的话。 我们强烈建议使用 React >=19。 。 。 .
使用量
在 RootProvider 中环绕您的应用程序, 以便在所有组件中共享上下文 。 以下是基本设置:
import { RootProvider } from "@altinn/components";
function App() {
return <RootProvider>{/* Your application here */}</RootProvider>;
}
要使用应用程序中的组件,需要从软件包中导入要使用的组件。 例如:
// example: import the Avatar component and type
import { Avatar, type AvatarVariant } from "@altinn/components";
并一次导入应用程序中的 cs 文件, 如您的 cs 文件 :
import "@altinn/altinn-components/lib/css/global.css";
用于正确和尽量减少全球重置和变量的收集.
确保您有 Inter 字体家族的字体面孔 :
<link rel="stylesheet" href="https://altinncdn.no/fonts/inter/v4.1/inter.css" integrity="sha384-OcHzc/By/OPw9uJREawUCjP2inbOGKtKb4A/I2iXxmknUfog2H8Adx71tWVZRscD" crossorigin="anonymous">
文档
有关各组成部分的文件,见本文件附件 故事书
组件由标记来装饰来显示组件的当前状态.
标记为:
@outdated- 组件与最新设计不同步.@beta- 构件在β中,更有可能有缺陷或缺失特征.@experimental- 该部分是试验性的,正在进行中。 建议不使用.@deprecated- 该部件已贬值,不应使用.
拥有标签的主要动机是减轻压力,在将标签放出供使用之前必须使一切稳定下来. 它还使我们能够在早期阶段获得关于这些组成部分的反馈.
故事书测试跑道( 可访问)
故事书测试选手的配置置于.sorybook/ test-runner.ts
首先,你需要运行的故事书:
pnpm storybook
完成此任务后, 在另一个终端中按照命令运行, 测试所有可访问的故事
pnpm test-storybook
要测试特定文件,运行...
pnpm test-storybook --watch
...并按“ p” 选择文件名过滤 。 然后开始输入故事本文件f.ex的名称. 恶作剧 帮助者将列出所有匹配您输入的文件 .
点击输入以测试文件 .
如果有更多的文件匹配您的输入, 也会被测试 .
- 如果故事书cli 运行所有测试 即使用 -- watch 旗, 或者你可以简单地运行:
pnpm test-storybook --watch 'MyComponent.stories.tsx'
- 要跳过测试, 在标记数组中添加“ skip- test” 字符串, 用于您想要排除的测试 。 此选项在测试运行器. ts 文件中定义 . 目前,故事/Demo和docs下的所有测试都排除在外,因为那里不需要无障碍测试.
屏幕截图测试
屏幕截图测试通过将组件截图与基线图像进行比较来自动捕捉视觉回归.
# Run all screenshot tests
pnpm test:screenshots
# Test specific component
pnpm test:screenshots:filter "Button"
# Delete all screenshots and generate new
pnpm test:screenshots:regenerate-all
# Regenerate only the screenshots that are currently failing
pnpm test:screenshots:regenerate-failed
跳过屏幕截图测试
有些病例无法进行截图测试. 一个例子是虚拟化的列表,我们在那里生成随机化的内容,每一个渲染。 在这种情况下,在组件/演示文稿中应该添加截图 : {跳过: 真} 参数 .
示例:虚拟化Menu.stories.tsx
export const Virtualized = () => {
const { items, groups } = useMemo(() => useRandomMenuItems(10000), []);
return <Menu virtualized searchable items={items as MenuItemProps[]} groups={groups} size="md" />;
};
Virtualized.parameters = {
//can't screenshot tests with useRandomMenuItems
screenshot: { skip: true },
};