phammead - storybook - 帮助者 - 
这个软件包提供了Psammead组件在故事书中使用的共同值集合.
出口
TEXT_VARIANTS - 不同语言文本样本清单,其中包含该语言应使用的脚本和方向.
themes - 一个包含我们用的故事书主题的物体.
withServicesKnob - 函数返回一个故事本装饰器函数,该函数增加了一个 Select a service 掉到接头板上 当服务从下拉中选择时,它做两件事:
- 提供可传递为组件的装饰故事,其属性如下:
text: 所选服务语言的短串文字.longText: 所选服务语言中的一长串文字(我们可以用它来强调测试组件).dir: 所选服务的读取方向性, 例如.ltr或者说rtl。 。 。 .script:选定服务的脚本打字设置,例如字体大小和行高.service:选定服务的名称等.arabic。 。 。 .variant: 所选服务的可变值, 例如serbianLat将会有变体lat非变体服务将默认为default。 。 。 .articlePath:相关服务中一条文章的路径.selectedService: 所选服务在可提供服务的倒放中出现的名称.
- 切换选定服务的布局方向性.
这个 withServicesKnob 函数接受带有2个属性的选项参数:
defaultService(String):服务所选的默认服务,例如倒下.arabic默认为news。 。 。 .services(Array):降级将显示的服务列表. 默认是所有服务.
buildRTLSubstories - 创建故事从右到左的变体作为子故事的函数。 内部使用 withServicesKnob 将默认服务设置为 arabic。 。 。 .
这个 buildRTLSubstories 函数接受2个参数.
storyKind(String) - 这是你想从中创建RTL子故事的故事类型. 这通常是你第一次辩论storiesOf譬如说.storiesOf('Components/Paragraph', module)。需要这个参数.options(目标) - 可用的选项:include(Array) - 创建RTL子故事的具体故事名列表. 如果不提供,则所有的故事都会有RTL子故事.
安装
npm install @bbc/psammead-storybook-helpers --save-dev
使用量
文本( V)
import { select } from '@storybook/addon-knobs';
import { TEXT_VARIANTS } from '@bbc/psammead-storybook-helpers';
const label = 'Languages';
const defaultValue = 'This is a caption';
const groupIdentifier = 'CAPTION VARIANTS';
<Caption>
{select(label, TEXT_VARIANTS, TEXT_VARIANTS.news, groupIdentifier).text}
</Caption>;
使用服务器 Knob
storiesOf('Components/Paragraph', module)
.addDecorator(withKnobs)
.addDecorator(withServicesKnob()) // default selected service is `news`
.add('A paragraph with English text', ({ text, script, service }) => (
<Paragraph script={script} service={service}>
{text}
</Paragraph>
));
要设置默认服务 :
storiesOf('Components/Paragraph', module)
.addDecorator(withKnobs)
.addDecorator(
withServicesKnob({
defaultService: 'arabic',
services: ['news', 'arabic', 'amharic'],
}),
) // default selected service is `arabic` and the available services in the dropdown are `news`, `arabic`, `amharic`
.add('A paragraph with Arabic text', ({ text, script, service }) => (
<Paragraph script={script} service={service}>
{text}
</Paragraph>
));
如果你想将这个装饰器添加到一个单一的故事中,而不是上面所记载的一系列故事中,或许是因为你需要每个故事有一个不同的默认服务,那么你需要直接地来装饰每个故事,而不是使用上面所记载的一系列故事 addDecorator 方法。 下面是您如何写这个的例子:
const arabicServiceDecorator = withServicesKnob({
defaultService: 'arabic',
});
const pashtoServiceDecorator = withServicesKnob({
defaultService: 'pashto',
});
storiesOf('Components/Paragraph', module)
.addDecorator(withKnobs)
.add('A paragraph with Arabic text', () =>
arabicServiceDecorator(({ text, script, service }) => (
<Paragraph script={script} service={service}>
{text}
</Paragraph>
)),
)
.add('A paragraph with Pashto text', () =>
pashtoServiceDecorator(({ text, script, service }) => (
<Paragraph script={script} service={service}>
{text}
</Paragraph>
)),
);
您可以在相关服务和变体中包含文章链接
const BASE_URL = 'https://www.bbc.com';
storiesOf('Components/Paragraph/Link', module)
.addDecorator(withKnobs)
.addDecorator(withServicesKnob()) // default selected service is `news`
.add(
'A paragraph with an inline link to an article',
({ text, script, service, articlePath }) => (
<Paragraph script={script} service={service}>
<InlineLink href={`${BASE_URL}${articlePath}`}>{text}</InlineLink>
</Paragraph>
),
);
上述例子排除了使用 addDecorator 方法并直接装饰故事.
构建RTL 属性
import { buildRTLSubstories } from '@bbc/psammead-storybook-helpers';
// create RTL variants of all stories of a kind
buildRTLSubstories('Components/Paragraph');
import { buildRTLSubstories } from '@bbc/psammead-storybook-helpers';
// create RTL variants of specific stories of a kind
buildRTLSubstories('Components/Paragraph', {
include: ['containing an inline link'],
});
捐款
何时 添加 向此工具包新导出 出口测试 还需要更新。 何时 删除 从此工具包中导出 出口测试 软件包版本需要更新,需要作重大修改(EG:1.2.1 - > 2.0.0),因为这将被视为由于功能被去除而导致的突破性修改.
Psammead完全开源. 我们感谢任何贡献,无论是新的组件、错误修正还是总体改进。 请参看我们的主要贡献指南,可查阅: psammead 仓库的根。 。 。 .
行为守则
我们欢迎对这项工作的反馈和帮助。 通过参与这个项目,你同意遵守 行为守则请稍候再读一下.
许可证
萨姆米德 Apache 2.0 许可。 。 。 .