kdletters
e612b13b88
为 PlatformActionButton 增加 accentSoft tone 将作品详情点赞按钮迁移到 PlatformActionButton 删除作品详情点赞按钮本地 chrome CSS 补充公共按钮和作品详情点赞断言 更新 PlatformUiKit 文档和 Hermes 决策记录
91 lines
2.6 KiB
TypeScript
91 lines
2.6 KiB
TypeScript
import { expect, test } from 'vitest';
|
|
|
|
import { getPlatformActionButtonClassName } from './platformActionButtonModel';
|
|
|
|
test('builds platform action button class names', () => {
|
|
const className = getPlatformActionButtonClassName({
|
|
surface: 'platform',
|
|
tone: 'danger',
|
|
size: 'xs',
|
|
shape: 'pill',
|
|
fullWidth: true,
|
|
});
|
|
|
|
expect(className).toContain('platform-button--danger');
|
|
expect(className).toContain('rounded-full');
|
|
expect(className).toContain('w-full');
|
|
expect(className).toContain('text-xs');
|
|
});
|
|
|
|
test('builds profile primary button class names', () => {
|
|
const className = getPlatformActionButtonClassName({
|
|
surface: 'profile',
|
|
tone: 'primary',
|
|
});
|
|
|
|
expect(className).toContain('platform-primary-button');
|
|
expect(className).toContain('rounded-2xl');
|
|
expect(className).toContain('disabled:cursor-not-allowed');
|
|
});
|
|
|
|
test('builds large form action button class names', () => {
|
|
const className = getPlatformActionButtonClassName({
|
|
size: 'lg',
|
|
});
|
|
|
|
expect(className).toContain('h-12');
|
|
expect(className).toContain('text-base');
|
|
});
|
|
|
|
test('builds left aligned action button class names', () => {
|
|
const className = getPlatformActionButtonClassName({
|
|
align: 'start',
|
|
});
|
|
|
|
expect(className).toContain('justify-start');
|
|
expect(className).toContain('text-left');
|
|
});
|
|
|
|
test('builds editor dark action button class names', () => {
|
|
const className = getPlatformActionButtonClassName({
|
|
surface: 'editorDark',
|
|
tone: 'success',
|
|
size: 'xxs',
|
|
shape: 'pill',
|
|
});
|
|
|
|
expect(className).toContain('platform-action-button--editor-dark');
|
|
expect(className).toContain('border-emerald-300/35');
|
|
expect(className).toContain('bg-emerald-400');
|
|
expect(className).toContain('text-[10px]');
|
|
expect(className).toContain('rounded-full');
|
|
});
|
|
|
|
test('builds accent action button class names', () => {
|
|
const className = getPlatformActionButtonClassName({
|
|
surface: 'editorDark',
|
|
tone: 'accent',
|
|
size: 'lg',
|
|
fullWidth: true,
|
|
});
|
|
|
|
expect(className).toContain('platform-action-button--accent');
|
|
expect(className).toContain('bg-amber-200');
|
|
expect(className).toContain('text-slate-950');
|
|
expect(className).toContain('h-12');
|
|
expect(className).toContain('w-full');
|
|
});
|
|
|
|
test('builds accent soft action button class names', () => {
|
|
const className = getPlatformActionButtonClassName({
|
|
tone: 'accentSoft',
|
|
shape: 'pill',
|
|
size: 'xs',
|
|
});
|
|
|
|
expect(className).toContain('platform-action-button--accent-soft');
|
|
expect(className).toContain('[color:var(--platform-action-accent,#c7653d)]');
|
|
expect(className).toContain('rounded-full');
|
|
expect(className).toContain('text-xs');
|
|
});
|