赞美 - 故事 - 促进 -

说明

这个 StoryPromo 组件被设计用于“index”页面,这些页面是链接到其他文章/故事的页面。 这种信息可以是任何节点的集合,尽管这些节点通常是标题、文本摘要和时间戳.

出口

/index-alsos - 与顶级故事有关的故事链接的组件.

安装

npm install @bbc/psammead-story-promo

故事宣传道具

头条道具

推荐摘要

索引Alsos

"索引"(英語:The Index Assolutes)是和上层故事相关的故事的链接.

内部 IndexAlsos 组件有一个可视化隐藏 第4级标题,它宣布文本作为道具通过.

当有不止一个索引时,应将其包裹在一个列表项目中 IndexAlsosLi 在未排序的列表中 IndexAlsosUl 与角色 listitem 财务报告和审定财务报表 list 页:1.

另一方面,当有一个指数时,它应该使用 IndexAlso 内容不应包含在清单中.

道具

索引阿尔索斯道具

数据属性, 例如 data-e2e 也可以通过测试.

索引AlsoUl 道具

索引AlsoLi 推进

索引辅助

使用量

此组件的典型用例如下所示. A Image 坐在宣传片的左侧,右侧有信息元素,除了引领倒转的故事. 这些信息要素通常是一个标题、文本摘要段落和时间戳。 这个 Headline 财务报告和审定财务报表 Summary 组件由本套件提供,可导入如下所示.

这一构成部分还有一个显示媒体指标的选项,该指标包括播放图标和媒体的持续时间,如果提供了数据的话.

这个 promoType 参考文献 top 可以通过600px下采用垂直卡布局. 在600px以上的断点上,保持横向布局,图像和文字摘要各占主容器的1/2.

另一方面,一个 promoType 参考文献 leading 可以在左侧和图像或组件右侧放置信息。 图像占主容器的2/3,文本摘要占1/3.

此道具必须传递到"故事宣传","标题"和"摘要"等组件.

import React, { Fragment } from 'react';
import StoryPromo, {
  Headline,
  Summary,
  Link,
  IndexAlsos,
  IndexAlso,
  IndexAlsosUl,
  IndexAlsosLi,
} from '@bbc/psammead-story-promo';
import MediaIndicator from '@bbc/psammead-media-indicator';
import { latin } from '@bbc/gel-foundations/scripts';
import LiveLabel from '@bbc/psammead-live-label';
import VisuallyHiddenText from '@bbc/psammead-visually-hidden-text';

const Image = <img src="https://foobar.com/image.jpg" />;

const IndexAlsosComponent = ({ alsoItems, script, service }) => (
  //This example doesn't show how the alsoItems are destructured to get the respective data
  <IndexAlsos offScreenText="Related content">
    {alsoItems.length > 1 ? (
      <IndexAlsosUl>
        <IndexAlsosLi
          script={script}
          service={service}
          url="https://www.bbc.co.uk/news"
          mediaIndicator={
            <MediaIndicator service={service} type="video" indexAlsos />
          }
        >
          Related text 1
        </IndexAlsosLi>
        <IndexAlsosLi
          script={script}
          service={service}
          url="https://www.bbc.co.uk/news"
        >
          Related text 2
        </IndexAlsosLi>
      </IndexAlsosUl>
    ) : (
      <IndexAlso>Related text</IndexAlso>
    )}
  </IndexAlsos>
);

const Info = ({ isLive, alsoItems }) => (
  <Fragment>
    <Headline script={latin} service="news" promoType="top">
      <Link href="https://www.bbc.co.uk/news">
        {isLive ? (
          <LiveLabel service="news" dir={dir} ariaHidden offScreenText="Live">
            The headline of the live promo
          </LiveLabel>
        ) : (
          'The headline of the promo'
        )}
      </Link>
    </Headline>
    <Summary script={latin} service="news" promoType="top">
      The summary of the promo
    </Summary>
    <time>12 March 2019</time>
    {topStory && alsoItems && (
      <IndexAlsosComponent
        alsoItems={alsoItems}
        script={latin}
        service="news"
      />
    )}
  </Fragment>
);

<StoryPromo image={Image} info={Info({ isLive: false })} promoType="top" />;

何时使用此组件

这个 StoryPromo 组件被设计在一个链接元素内使用,以使用户能够浏览另一页的故事.

无障碍说明

此组件使用完整的语义标记 Headline, (中文(简体) ), Summary,以及 Link,使用 h3, (中文(简体) ), p 财务报告和审定财务报表 a 页:1 其他无障碍因素,如图像替代文本和时间元素作为道具传入,未在此组件中明确设置.

连结在地上 h3 与Voice Over Mac和Safari合作提供更好的支持。 我们使用 faux block link 使整个块可以点击,同时使该块内嵌入的链接也能被点击.

这个 LiveLabel 上面的示例显示此组件被隐藏用于屏幕阅读器,并且有可视化的隐藏文本同时渲染。 这是为了确保屏幕阅读器正确宣布"活"字. 无需用其他语文说明.

路线图

捐款

Psammead完全开源. 我们感谢任何贡献,无论是新的组件、错误修正还是总体改进。 请参看我们的主要贡献指南,可查阅: psammead 仓库的根。 。 。 .

行为守则

我们欢迎对这项工作的反馈和帮助。 通过参与这个项目,你同意遵守 行为守则请稍候再读一下.

许可证

萨姆米德 Apache 2.0 许可。 。 。 .