From 3cc171bd83a1df735d5fb5e09b98cde9afdf14de Mon Sep 17 00:00:00 2001 From: Denis Hernandez Date: Tue, 30 Apr 2019 12:38:31 +0100 Subject: [PATCH 01/10] Create story promo list component --- .../psammead-story-promo-list/CHANGELOG.md | 6 + .../psammead-story-promo-list/README.md | 75 ++++ .../package-lock.json | 373 ++++++++++++++++++ .../psammead-story-promo-list/package.json | 43 ++ .../src/__snapshots__/index.test.jsx.snap | 155 ++++++++ .../psammead-story-promo-list/src/index.jsx | 32 ++ .../src/index.stories.jsx | 51 +++ .../src/index.test.jsx | 26 ++ .../testHelpers/fixtureData.js | 63 +++ 9 files changed, 824 insertions(+) create mode 100644 packages/components/psammead-story-promo-list/CHANGELOG.md create mode 100644 packages/components/psammead-story-promo-list/README.md create mode 100644 packages/components/psammead-story-promo-list/package-lock.json create mode 100644 packages/components/psammead-story-promo-list/package.json create mode 100644 packages/components/psammead-story-promo-list/src/__snapshots__/index.test.jsx.snap create mode 100644 packages/components/psammead-story-promo-list/src/index.jsx create mode 100644 packages/components/psammead-story-promo-list/src/index.stories.jsx create mode 100644 packages/components/psammead-story-promo-list/src/index.test.jsx create mode 100644 packages/components/psammead-story-promo-list/testHelpers/fixtureData.js diff --git a/packages/components/psammead-story-promo-list/CHANGELOG.md b/packages/components/psammead-story-promo-list/CHANGELOG.md new file mode 100644 index 0000000000..16dc2c1184 --- /dev/null +++ b/packages/components/psammead-story-promo-list/CHANGELOG.md @@ -0,0 +1,6 @@ +# Psammead Media Indicator Changelog + + +| Version | Description | +| ------- | ----------- | +| 0.1.0 | [PR#XXX](https://github.com/BBC-News/psammead/pull/XXX) Create initial package. | diff --git a/packages/components/psammead-story-promo-list/README.md b/packages/components/psammead-story-promo-list/README.md new file mode 100644 index 0000000000..e9d0dc6c99 --- /dev/null +++ b/packages/components/psammead-story-promo-list/README.md @@ -0,0 +1,75 @@ +# psammead-story-promo-list - [![Known Vulnerabilities](https://snyk.io/test/github/bbc/psammead/badge.svg?targetFile=packages%2Fcomponents%2Fpsammead-story-promo-list%2Fpackage.json)](https://snyk.io/test/github/bbc/psammead?targetFile=packages%2Fcomponents%2Fpsammead-story-promo-list%2Fpackage.json) [![Storybook](https://raw.githubusercontent.com/storybooks/story-promo-list/master/badge/badge-storybook.svg?sanitize=true)](https://bbc.github.io/psammead/?path=/story/story-promo-list--default) [![GitHub license](https://img.shields.io/badge/license-Apache%202.0-blue.svg)](https://github.com/bbc/psammead/blob/latest/LICENSE) [![npm version](https://img.shields.io/npm/v/@bbc/psammead-story-promo-list.svg)](https://www.npmjs.com/package/@bbc/psammead-story-promo-list) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/bbc/psammead/blob/latest/CONTRIBUTING.md) + +## Description + +The `@bbc/psammead-story-promo-list` package is a set of two components, `StoryPromoUl` and `StoryPromoLi`. They use a `ul` and `li` HTML element respectively. + +## Installation + +`npm install @bbc/psammead-story-promo-list` + +## Props + +| Argument | Type | Required | Default | Example | +| --------- | ---- | -------- | ------- | ------- | +| No props. | | | | | + +## Usage + +Commonly used alongside [`psammead-story-promo`](https://github.com/BBC-News/psammead/tree/latest/packages/components/psammead-story-promo). + +```jsx +import React, { Fragment } from 'react'; +import StoryPromo, { Headline, Summary } from '@bbc/psammead-story-promo'; +import { StoryPromoLi, StoryPromoUl } from '@bbc/psammead-story-promo-list'; +import { latin } from '@bbc/gel-foundations/scripts'; + +const Image = ( + +); + +const Info = ( + + The headline of the promo + The summary of the promo + + +); + + + + + + ; + + + ; + + + +``` + +### When to use this component + +This component is designed to be used with story promos on 'index' pages. + + + + + + + +## Contributing + +Psammead is completely open source. We are grateful for any contributions, whether they be new components, bug fixes or general improvements. Please see our primary contributing guide which can be found at [the root of the Psammead respository](https://github.com/bbc/psammead/blob/latest/CONTRIBUTING.md). + +### [Code of Conduct](https://github.com/bbc/psammead/blob/latest/CODE_OF_CONDUCT.md) + +We welcome feedback and help on this work. By participating in this project, you agree to abide by the [code of conduct](https://github.com/bbc/psammead/blob/latest/CODE_OF_CONDUCT.md). Please take a moment to read it. + +### License + +Psammead is [Apache 2.0 licensed](https://github.com/bbc/psammead/blob/latest/LICENSE). diff --git a/packages/components/psammead-story-promo-list/package-lock.json b/packages/components/psammead-story-promo-list/package-lock.json new file mode 100644 index 0000000000..45c2a42281 --- /dev/null +++ b/packages/components/psammead-story-promo-list/package-lock.json @@ -0,0 +1,373 @@ +{ + "name": "@bbc/psammead-story-promo-list", + "version": "0.1.0", + "lockfileVersion": 1, + "requires": true, + "dependencies": { + "@babel/helper-annotate-as-pure": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.0.0.tgz", + "integrity": "sha512-3UYcJUj9kvSLbLbUIfQTqzcy5VX7GRZ/CCDrnOaZorFFM01aXp1+GJwuFGV4NDDoAS+mOUyHcO6UD/RfqOks3Q==", + "dev": true, + "requires": { + "@babel/types": "^7.0.0" + } + }, + "@babel/helper-module-imports": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.0.0.tgz", + "integrity": "sha512-aP/hlLq01DWNEiDg4Jn23i+CXxW/owM4WpDLFUbpjxe4NS3BhLVZQ5i7E0ZrxuQ/vwekIeciyamgB1UIYxxM6A==", + "dev": true, + "requires": { + "@babel/types": "^7.0.0" + } + }, + "@babel/types": { + "version": "7.4.4", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.4.4.tgz", + "integrity": "sha512-dOllgYdnEFOebhkKCjzSVFqw/PmmB8pH6RGOWkY4GsboQNd47b1fBThBSwlHAq9alF9vc1M3+6oqR47R50L0tQ==", + "dev": true, + "requires": { + "esutils": "^2.0.2", + "lodash": "^4.17.11", + "to-fast-properties": "^2.0.0" + } + }, + "@bbc/gel-foundations": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/@bbc/gel-foundations/-/gel-foundations-1.2.0.tgz", + "integrity": "sha512-OpEJf42FSgyZRN0e9pJFm9eYmzbhfB7W7EWlrjh46fWlozyVwKA4uaTPUoGHLbXJkMOhPdpfM3gOAxbuM0FnrQ==" + }, + "@bbc/psammead-image": { + "version": "0.3.5", + "resolved": "https://registry.npmjs.org/@bbc/psammead-image/-/psammead-image-0.3.5.tgz", + "integrity": "sha512-HPIdHvQjDJdpiq9c0+w4FNYgYWEAnDoRgHlLXzYQ5C1THJJ9RSIyvHUR+dQe7Iarif4f+p7Otd4DYfd+p86CUg==", + "dev": true + }, + "@bbc/psammead-story-promo": { + "version": "0.1.1", + "resolved": "https://registry.npmjs.org/@bbc/psammead-story-promo/-/psammead-story-promo-0.1.1.tgz", + "integrity": "sha512-h0e/xUKhZUK2XrU+b9HxrB5sN9cwI7VzmAc3H75aHK4vuSkS+f1IO8JMclGFlMuRSb+qZYiQqoNahKpYZomM2w==", + "requires": { + "@bbc/gel-foundations": "^1.2.0", + "@bbc/psammead-styles": "^0.3.3" + } + }, + "@bbc/psammead-storybook-helpers": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/@bbc/psammead-storybook-helpers/-/psammead-storybook-helpers-1.1.1.tgz", + "integrity": "sha512-sG74G0cMMtb+rQ4AELptwBjBIAGL5hRY7BokAlv1B3G0v6X7LGj3yw+2ct91AibDjDIQURa7uTZJX4cX7L6dBQ==", + "dev": true + }, + "@bbc/psammead-styles": { + "version": "0.3.3", + "resolved": "https://registry.npmjs.org/@bbc/psammead-styles/-/psammead-styles-0.3.3.tgz", + "integrity": "sha512-9SG698tmq8o7Ja6sFQ6WwHpVEJtCbP99Z80wSnnB4ZWryfasd+EaRXtvGwGvWG2U9oA34S27syJQIh062Mkztw==" + }, + "@bbc/psammead-test-helpers": { + "version": "0.3.4", + "resolved": "https://registry.npmjs.org/@bbc/psammead-test-helpers/-/psammead-test-helpers-0.3.4.tgz", + "integrity": "sha512-dDFCigLdarSRM3tJk+yx3DLRVPYw5CXL/OBXwjUNUHDulmlRff9KaYdS+XpEySQHYp6Mo+vlqD/EDHbHAYdD5A==", + "dev": true, + "requires": { + "jest-styled-components": "^6.3.1", + "react-test-renderer": "^16.6.3" + } + }, + "@bbc/psammead-timestamp": { + "version": "0.1.0", + "resolved": "https://registry.npmjs.org/@bbc/psammead-timestamp/-/psammead-timestamp-0.1.0.tgz", + "integrity": "sha512-FWOXj8oaA54djm46jQILd4kXOg/ILEM6nTs4ytxsuDpCYFTGnUxrBOkevrZztu43psSK/CwwTg2lYwH0D/xBTA==", + "dev": true, + "requires": { + "@bbc/gel-foundations": "^1.0.0" + } + }, + "@emotion/is-prop-valid": { + "version": "0.7.3", + "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.7.3.tgz", + "integrity": "sha512-uxJqm/sqwXw3YPA5GXX365OBcJGFtxUVkB6WyezqFHlNe9jqUWH5ur2O2M8dGBz61kn1g3ZBlzUunFQXQIClhA==", + "dev": true, + "requires": { + "@emotion/memoize": "0.7.1" + } + }, + "@emotion/memoize": { + "version": "0.7.1", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.1.tgz", + "integrity": "sha512-Qv4LTqO11jepd5Qmlp3M1YEjBumoTHcHFdgPTQ+sFlIL5myi/7xu/POwP7IRu6odBdmLXdtIs1D6TuW6kbwbbg==", + "dev": true + }, + "@emotion/unitless": { + "version": "0.7.3", + "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.3.tgz", + "integrity": "sha512-4zAPlpDEh2VwXswwr/t8xGNDGg8RQiPxtxZ3qQEXyQsBV39ptTdESCjuBvGze1nLMVrxmTIKmnO/nAV8Tqjjzg==", + "dev": true + }, + "atob": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz", + "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==", + "dev": true + }, + "babel-plugin-styled-components": { + "version": "1.10.0", + "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-1.10.0.tgz", + "integrity": "sha512-sQVKG8irFXx14ZfaK1bBePirfkacl3j8nZwSZK+ZjsbnadRHKQTbhXbe/RB1vT6Vgkz45E+V95LBq4KqdhZUNw==", + "dev": true, + "requires": { + "@babel/helper-annotate-as-pure": "^7.0.0", + "@babel/helper-module-imports": "^7.0.0", + "babel-plugin-syntax-jsx": "^6.18.0", + "lodash": "^4.17.10" + } + }, + "babel-plugin-syntax-jsx": { + "version": "6.18.0", + "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz", + "integrity": "sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY=", + "dev": true + }, + "camelize": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.0.tgz", + "integrity": "sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs=", + "dev": true + }, + "css": { + "version": "2.2.4", + "resolved": "https://registry.npmjs.org/css/-/css-2.2.4.tgz", + "integrity": "sha512-oUnjmWpy0niI3x/mPL8dVEI1l7MnG3+HHyRPHf+YFSbK+svOhXpmSOcDURUh2aOCgl2grzrOPt1nHLuCVFULLw==", + "dev": true, + "requires": { + "inherits": "^2.0.3", + "source-map": "^0.6.1", + "source-map-resolve": "^0.5.2", + "urix": "^0.1.0" + } + }, + "css-color-keywords": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz", + "integrity": "sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU=", + "dev": true + }, + "css-to-react-native": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-2.3.0.tgz", + "integrity": "sha512-IhR7bNIrCFwbJbKZOAjNDZdwpsbjTN6f1agXeELHDqg1wHPA8c2QLruttKOW7hgMGetkfraRJCIEMrptifBfVw==", + "dev": true, + "requires": { + "camelize": "^1.0.0", + "css-color-keywords": "^1.0.0", + "postcss-value-parser": "^3.3.0" + } + }, + "decode-uri-component": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.0.tgz", + "integrity": "sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU=", + "dev": true + }, + "esutils": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.2.tgz", + "integrity": "sha1-Cr9PHKpbyx96nYrMbepPqqBLrJs=", + "dev": true + }, + "has-flag": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", + "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=", + "dev": true + }, + "inherits": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz", + "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=", + "dev": true + }, + "jest-styled-components": { + "version": "6.3.1", + "resolved": "https://registry.npmjs.org/jest-styled-components/-/jest-styled-components-6.3.1.tgz", + "integrity": "sha512-zie3ajvJbwlbHCAq8/Bv5jdbcYCz0ZMRNNX6adL7wSRpkCVPQtiJigv1140JN1ZOJIODPn8VKrjeFCN+jlPa7w==", + "dev": true, + "requires": { + "css": "^2.2.4" + } + }, + "js-tokens": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", + "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==", + "dev": true + }, + "lodash": { + "version": "4.17.11", + "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.11.tgz", + "integrity": "sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg==", + "dev": true + }, + "loose-envify": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", + "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==", + "dev": true, + "requires": { + "js-tokens": "^3.0.0 || ^4.0.0" + } + }, + "memoize-one": { + "version": "5.0.4", + "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.0.4.tgz", + "integrity": "sha512-P0z5IeAH6qHHGkJIXWw0xC2HNEgkx/9uWWBQw64FJj3/ol14VYdfVGWWr0fXfjhhv3TKVIqUq65os6O4GUNksA==", + "dev": true + }, + "object-assign": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", + "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=", + "dev": true + }, + "postcss-value-parser": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz", + "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==", + "dev": true + }, + "prop-types": { + "version": "15.7.2", + "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz", + "integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==", + "dev": true, + "requires": { + "loose-envify": "^1.4.0", + "object-assign": "^4.1.1", + "react-is": "^16.8.1" + } + }, + "react": { + "version": "16.8.6", + "resolved": "https://registry.npmjs.org/react/-/react-16.8.6.tgz", + "integrity": "sha512-pC0uMkhLaHm11ZSJULfOBqV4tIZkx87ZLvbbQYunNixAAvjnC+snJCg0XQXn9VIsttVsbZP/H/ewzgsd5fxKXw==", + "dev": true, + "requires": { + "loose-envify": "^1.1.0", + "object-assign": "^4.1.1", + "prop-types": "^15.6.2", + "scheduler": "^0.13.6" + } + }, + "react-is": { + "version": "16.8.6", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.8.6.tgz", + "integrity": "sha512-aUk3bHfZ2bRSVFFbbeVS4i+lNPZr3/WM5jT2J5omUVV1zzcs1nAaf3l51ctA5FFvCRbhrH0bdAsRRQddFJZPtA==", + "dev": true + }, + "react-test-renderer": { + "version": "16.8.6", + "resolved": "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-16.8.6.tgz", + "integrity": "sha512-H2srzU5IWYT6cZXof6AhUcx/wEyJddQ8l7cLM/F7gDXYyPr4oq+vCIxJYXVGhId1J706sqziAjuOEjyNkfgoEw==", + "dev": true, + "requires": { + "object-assign": "^4.1.1", + "prop-types": "^15.6.2", + "react-is": "^16.8.6", + "scheduler": "^0.13.6" + } + }, + "resolve-url": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz", + "integrity": "sha1-LGN/53yJOv0qZj/iGqkIAGjiBSo=", + "dev": true + }, + "scheduler": { + "version": "0.13.6", + "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.13.6.tgz", + "integrity": "sha512-IWnObHt413ucAYKsD9J1QShUKkbKLQQHdxRyw73sw4FN26iWr3DY/H34xGPe4nmL1DwXyWmSWmMrA9TfQbE/XQ==", + "dev": true, + "requires": { + "loose-envify": "^1.1.0", + "object-assign": "^4.1.1" + } + }, + "source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "dev": true + }, + "source-map-resolve": { + "version": "0.5.2", + "resolved": "https://registry.npmjs.org/source-map-resolve/-/source-map-resolve-0.5.2.tgz", + "integrity": "sha512-MjqsvNwyz1s0k81Goz/9vRBe9SZdB09Bdw+/zYyO+3CuPk6fouTaxscHkgtE8jKvf01kVfl8riHzERQ/kefaSA==", + "dev": true, + "requires": { + "atob": "^2.1.1", + "decode-uri-component": "^0.2.0", + "resolve-url": "^0.2.1", + "source-map-url": "^0.4.0", + "urix": "^0.1.0" + } + }, + "source-map-url": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/source-map-url/-/source-map-url-0.4.0.tgz", + "integrity": "sha1-PpNdfd1zYxuXZZlW1VEo6HtQhKM=", + "dev": true + }, + "styled-components": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-4.2.0.tgz", + "integrity": "sha512-L/LzkL3ZbBhqIVHdR7DbYujy4tqvTNRfc+4JWDCYyhTatI+8CRRQUmdaR0+ARl03DWsfKLhjewll5uNLrqrl4A==", + "dev": true, + "requires": { + "@babel/helper-module-imports": "^7.0.0", + "@emotion/is-prop-valid": "^0.7.3", + "@emotion/unitless": "^0.7.0", + "babel-plugin-styled-components": ">= 1", + "css-to-react-native": "^2.2.2", + "memoize-one": "^5.0.0", + "prop-types": "^15.5.4", + "react-is": "^16.6.0", + "stylis": "^3.5.0", + "stylis-rule-sheet": "^0.0.10", + "supports-color": "^5.5.0" + } + }, + "stylis": { + "version": "3.5.4", + "resolved": "https://registry.npmjs.org/stylis/-/stylis-3.5.4.tgz", + "integrity": "sha512-8/3pSmthWM7lsPBKv7NXkzn2Uc9W7NotcwGNpJaa3k7WMM1XDCA4MgT5k/8BIexd5ydZdboXtU90XH9Ec4Bv/Q==", + "dev": true + }, + "stylis-rule-sheet": { + "version": "0.0.10", + "resolved": "https://registry.npmjs.org/stylis-rule-sheet/-/stylis-rule-sheet-0.0.10.tgz", + "integrity": "sha512-nTbZoaqoBnmK+ptANthb10ZRZOGC+EmTLLUxeYIuHNkEKcmKgXX1XWKkUBT2Ac4es3NybooPe0SmvKdhKJZAuw==", + "dev": true + }, + "supports-color": { + "version": "5.5.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", + "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==", + "dev": true, + "requires": { + "has-flag": "^3.0.0" + } + }, + "to-fast-properties": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz", + "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=", + "dev": true + }, + "urix": { + "version": "0.1.0", + "resolved": "https://registry.npmjs.org/urix/-/urix-0.1.0.tgz", + "integrity": "sha1-2pN/emLiH+wf0Y1Js1wpNQZ6bHI=", + "dev": true + } + } +} diff --git a/packages/components/psammead-story-promo-list/package.json b/packages/components/psammead-story-promo-list/package.json new file mode 100644 index 0000000000..dfbf4369af --- /dev/null +++ b/packages/components/psammead-story-promo-list/package.json @@ -0,0 +1,43 @@ +{ + "name": "@bbc/psammead-story-promo-list", + "version": "0.1.0", + "main": "dist/index.js", + "description": "List of story promos", + "repository": { + "type": "git", + "url": "https://github.com/bbc/psammead/tree/latest/packages/components/psammead-story-promo-list" + }, + "author": { + "name": "Psammead Maintainers", + "email": "PsammeadMaintainers@bbc.co.uk" + }, + "license": "Apache-2.0", + "bugs": { + "url": "https://github.com/bbc/psammead/issues" + }, + "homepage": "https://github.com/bbc/psammead/blob/latest/packages/components/psammead-story-promo-list/README.md", + "dependencies": { + "@bbc/gel-foundations": "^1.2.0", + "@bbc/psammead-story-promo": "^0.1.1", + "@bbc/psammead-styles": "^0.3.3" + }, + "devDependencies": { + "@bbc/psammead-image": "^0.3.5", + "@bbc/psammead-storybook-helpers": "^1.1.1", + "@bbc/psammead-test-helpers": "^0.3.3", + "@bbc/psammead-timestamp": "^0.1.0", + "react": "^16.6.3", + "styled-components": "^4.1.3" + }, + "peerDependencies": { + "react": "^16.6.3", + "styled-components": "^4.1.3", + "prop-types": "^15.7.2" + }, + "keywords": [ + "bbc", + "story", + "promo", + "list" + ] +} diff --git a/packages/components/psammead-story-promo-list/src/__snapshots__/index.test.jsx.snap b/packages/components/psammead-story-promo-list/src/__snapshots__/index.test.jsx.snap new file mode 100644 index 0000000000..58c13f645c --- /dev/null +++ b/packages/components/psammead-story-promo-list/src/__snapshots__/index.test.jsx.snap @@ -0,0 +1,155 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`StoryPromo should render correctly 1`] = ` +.c2 { + display: grid; + grid-template-columns: repeat(6,1fr); + grid-column-gap: 0.5rem; +} + +.c3 { + grid-column: 1 / span 2; +} + +.c4 { + grid-column: 3 / span 4; +} + +.c5 { + font-size: 1.125rem; + line-height: 1.375rem; + color: #3F3F42; + font-family: ReithSerif,Helvetica,Arial,sans-serif; + margin: 0; + padding-bottom: 0.5rem; + font-weight: 700; +} + +.c6 { + font-size: 0.9375rem; + line-height: 1.125rem; + color: #3F3F42; + font-family: ReithSans,Helvetica,Arial,sans-serif; + margin: 0; + padding-bottom: 0.5rem; +} + +.c1 { + border-bottom: 0.0625rem solid #F2F2F2; + padding: 1rem 0 0.5rem; +} + +.c1:last-child { + border: none; +} + +.c0 { + list-style-type: none; + margin: 0; + padding: 0; +} + +@media (min-width:37.5rem) { + .c2 { + grid-column-gap: 1rem; + } +} + +@media (min-width:80rem) { + .c2 { + grid-template-columns: repeat(12,1fr); + } +} + +@media (min-width:80rem) { + .c3 { + grid-column: 1 / span 4; + } +} + +@media (min-width:80rem) { + .c4 { + grid-column: 5 / span 8; + } +} + +@media (min-width:20rem) and (max-width:37.4375rem) { + .c5 { + font-size: 1.125rem; + line-height: 1.375rem; + } +} + +@media (min-width:37.5rem) { + .c5 { + font-size: 1.25rem; + line-height: 1.5rem; + } +} + +@media (min-width:20rem) and (max-width:37.4375rem) { + .c6 { + font-size: 0.9375rem; + line-height: 1.125rem; + } +} + +@media (min-width:37.5rem) { + .c6 { + font-size: 0.875rem; + line-height: 1.125rem; + } +} + +@media (min-width:37.5rem) { + .c1 { + padding: 1rem 0 1rem; + } +} + +@media (min-width:63rem) { + .c1 { + padding: 1.5rem 0 1.5rem; + } +} + + +`; diff --git a/packages/components/psammead-story-promo-list/src/index.jsx b/packages/components/psammead-story-promo-list/src/index.jsx new file mode 100644 index 0000000000..686b563a64 --- /dev/null +++ b/packages/components/psammead-story-promo-list/src/index.jsx @@ -0,0 +1,32 @@ +import styled from 'styled-components'; +import { C_LUNAR } from '@bbc/psammead-styles/colours'; +import { + GEL_SPACING, + GEL_SPACING_DBL, + GEL_SPACING_TRPL, +} from '@bbc/gel-foundations/spacings'; +import { + GEL_GROUP_3_SCREEN_WIDTH_MIN, + GEL_GROUP_4_SCREEN_WIDTH_MIN, +} from '@bbc/gel-foundations/breakpoints'; + +export const StoryPromoLi = styled.li` + border-bottom: 0.0625rem solid ${C_LUNAR}; + padding: ${GEL_SPACING_DBL} 0 ${GEL_SPACING}; + @media (min-width: ${GEL_GROUP_3_SCREEN_WIDTH_MIN}) { + padding: ${GEL_SPACING_DBL} 0 ${GEL_SPACING_DBL}; + } + @media (min-width: ${GEL_GROUP_4_SCREEN_WIDTH_MIN}) { + padding: ${GEL_SPACING_TRPL} 0 ${GEL_SPACING_TRPL}; + } + + &:last-child { + border: none; + } +`; + +export const StoryPromoUl = styled.ul` + list-style-type: none; + margin: 0; + padding: 0; +`; diff --git a/packages/components/psammead-story-promo-list/src/index.stories.jsx b/packages/components/psammead-story-promo-list/src/index.stories.jsx new file mode 100644 index 0000000000..4fd32f4d01 --- /dev/null +++ b/packages/components/psammead-story-promo-list/src/index.stories.jsx @@ -0,0 +1,51 @@ +import React, { Fragment } from 'react'; +import { storiesOf } from '@storybook/react'; +import nanoid from 'nanoid'; +import Timestamp from '@bbc/psammead-timestamp'; +import Image from '@bbc/psammead-image'; +import { latin } from '@bbc/gel-foundations/scripts'; +import StoryPromo, { Headline, Summary } from '@bbc/psammead-story-promo'; +import { StoryPromoLi, StoryPromoUl } from './index'; +import storyPromoData from '../testHelpers/fixtureData'; +import notes from '../README.md'; + +// eslint-disable-next-line react/prop-types +const ImageComponent = ({ alt, src }) => ( + {alt} +); + +// eslint-disable-next-line react/prop-types +const InfoComponent = ({ headlineText, summaryText }) => ( + + {headlineText} + {summaryText} + 12 March 2019 + +); + +storiesOf('StoryPromoList', module).add( + 'default', + () => ( + + {storyPromoData.map(item => { + const ImagePromo = ( + + ); + + const InfoPromo = ( + + ); + + return ( + + + + ); + })} + + ), + { notes }, +); diff --git a/packages/components/psammead-story-promo-list/src/index.test.jsx b/packages/components/psammead-story-promo-list/src/index.test.jsx new file mode 100644 index 0000000000..b02c991db7 --- /dev/null +++ b/packages/components/psammead-story-promo-list/src/index.test.jsx @@ -0,0 +1,26 @@ +import React, { Fragment } from 'react'; +import { shouldMatchSnapshot } from '@bbc/psammead-test-helpers'; +import { latin } from '@bbc/gel-foundations/scripts'; +import StoryPromo, { Headline, Summary } from '@bbc/psammead-story-promo'; +import { StoryPromoLi, StoryPromoUl } from './index'; + +const Image = Alt text; + +const Info = ( + + The headline of the promo + The summary of the promo + + +); + +describe('StoryPromo', () => { + shouldMatchSnapshot( + 'should render correctly', + + + + + , + ); +}); diff --git a/packages/components/psammead-story-promo-list/testHelpers/fixtureData.js b/packages/components/psammead-story-promo-list/testHelpers/fixtureData.js new file mode 100644 index 0000000000..da7b171d85 --- /dev/null +++ b/packages/components/psammead-story-promo-list/testHelpers/fixtureData.js @@ -0,0 +1,63 @@ +const storyPromoData = [ + { + image: { + alt: 'Thanos', + src: + 'https://www.log.com.tr/wp-content/uploads/2018/08/avengers-infinity.jpg', + }, + info: { + headline: 'Thanos', + summary: 'Josh Brolin', + time: '2019-03-01T14:00+00:00', + }, + }, + { + image: { + alt: 'Iron Man', + src: 'https://www.log.com.tr/wp-content/uploads/2019/02/iron-man.jpg', + }, + info: { + headline: 'Iron Man', + summary: 'Robert Downey', + time: '2019-03-01T14:00+00:00', + }, + }, + { + image: { + alt: 'Captain American', + src: + 'https://znews-photo.zadn.vn/w660/Uploaded/rotntt/2013_10_17/chris.jpg', + }, + info: { + headline: 'Captain American', + summary: 'Chris Evans', + time: '2019-03-01T14:00+00:00', + }, + }, + { + image: { + alt: 'Thor', + src: + 'https://multimedia.larepublica.pe/660x392/larepublica/imagen/2019/04/29/noticia-1556577358-portadatres.png', + }, + info: { + headline: 'Thor', + summary: 'Chris Hemsworth', + time: '2019-03-01T14:00+00:00', + }, + }, + { + image: { + alt: 'Captain Marvel', + src: + 'https://cms-static.wehaacdn.com/illinoistimes-com/images/film.25327.widea.0.jpg', + }, + info: { + headline: 'Captain Marvel', + summary: 'Brie Larson', + time: '2019-03-01T14:00+00:00', + }, + }, +]; + +export default storyPromoData; From d60d20aba935e120ab93d943d18ffe0ecdeb3ace Mon Sep 17 00:00:00 2001 From: Denis Hernandez Date: Tue, 30 Apr 2019 12:43:17 +0100 Subject: [PATCH 02/10] Update PR number --- packages/components/psammead-story-promo-list/CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/psammead-story-promo-list/CHANGELOG.md b/packages/components/psammead-story-promo-list/CHANGELOG.md index 16dc2c1184..4e8b8a0f44 100644 --- a/packages/components/psammead-story-promo-list/CHANGELOG.md +++ b/packages/components/psammead-story-promo-list/CHANGELOG.md @@ -3,4 +3,4 @@ | Version | Description | | ------- | ----------- | -| 0.1.0 | [PR#XXX](https://github.com/BBC-News/psammead/pull/XXX) Create initial package. | +| 0.1.0 | [PR#486](https://github.com/BBC-News/psammead/pull/486) Create initial package. | From 33767c9bdc53c2e752b896addf563a5c350ef537 Mon Sep 17 00:00:00 2001 From: Denis Hernandez Date: Tue, 30 Apr 2019 14:40:01 +0100 Subject: [PATCH 03/10] Update data with more representative stories --- .../testHelpers/fixtureData.js | 51 +++++++++---------- 1 file changed, 24 insertions(+), 27 deletions(-) diff --git a/packages/components/psammead-story-promo-list/testHelpers/fixtureData.js b/packages/components/psammead-story-promo-list/testHelpers/fixtureData.js index da7b171d85..0da5e734bc 100644 --- a/packages/components/psammead-story-promo-list/testHelpers/fixtureData.js +++ b/packages/components/psammead-story-promo-list/testHelpers/fixtureData.js @@ -1,60 +1,57 @@ const storyPromoData = [ { image: { - alt: 'Thanos', + alt: 'Diosdado Cabello', src: - 'https://www.log.com.tr/wp-content/uploads/2018/08/avengers-infinity.jpg', + 'https://ichef.bbci.co.uk/news/660/cpsprodpb/AF0F/production/_106651844_cabello.jpg', }, info: { - headline: 'Thanos', - summary: 'Josh Brolin', + headline: + 'Gobierno de Venezuela condena enérgicamente un "intento de golpe" de Juan Guaidó y Leopoldo López', + summary: + 'El liberado Leopoldo López y Juan Guaidó llaman a la "fase final" contra el gobierno de Nicolás Maduro', time: '2019-03-01T14:00+00:00', }, }, { image: { - alt: 'Iron Man', - src: 'https://www.log.com.tr/wp-content/uploads/2019/02/iron-man.jpg', - }, - info: { - headline: 'Iron Man', - summary: 'Robert Downey', - time: '2019-03-01T14:00+00:00', - }, - }, - { - image: { - alt: 'Captain American', + alt: 'El emperador Akihito en su traje de ceremonia, en 1990.', src: - 'https://znews-photo.zadn.vn/w660/Uploaded/rotntt/2013_10_17/chris.jpg', + 'https://ichef.bbci.co.uk/news/660/cpsprodpb/5D2E/production/_106645832_sqgettyimages-146949399.jpg', }, info: { - headline: 'Captain American', - summary: 'Chris Evans', + headline: + 'Abdicación de Akihito en Japón: el emperador que dejó atrás los "pecados" de su padre y es el primero en abdicar en 200 años', + summary: + 'Qué es Reiwa y por qué significa el inicio de una nueva era imperial para Japón', time: '2019-03-01T14:00+00:00', }, }, { image: { - alt: 'Thor', + alt: 'Leopoldo López', src: - 'https://multimedia.larepublica.pe/660x392/larepublica/imagen/2019/04/29/noticia-1556577358-portadatres.png', + 'https://ichef.bbci.co.uk/news/660/cpsprodpb/5037/production/_106653502_hi053657116.jpg', }, info: { - headline: 'Thor', - summary: 'Chris Hemsworth', + headline: + 'Qué significa para la crisis política en Venezuela que Leopoldo López haya sido liberado', + summary: + 'Qué papel juega Leopoldo López en la crisis política de Venezuela a 5 años de su arresto', time: '2019-03-01T14:00+00:00', }, }, { image: { - alt: 'Captain Marvel', + alt: 'Arya Stark', src: - 'https://cms-static.wehaacdn.com/illinoistimes-com/images/film.25327.widea.0.jpg', + 'https://ichef.bbci.co.uk/news/660/cpsprodpb/2E26/production/_106641811_872e4518-d1e3-4bfa-86a6-fb2806a9fb21.jpg', }, info: { - headline: 'Captain Marvel', - summary: 'Brie Larson', + headline: + 'La batalla de Invernalia: por qué no cumplió con las enormes expectativas de los fans más exigentes de "Juego de Tronos"', + summary: + 'Era el momento que los fanáticos de "Juego de Tronos" habían estado esperando durante mucho tiempo: la batalla entre los vivos y los muertos. ', time: '2019-03-01T14:00+00:00', }, }, From 73a18909434ae4faf653b5fc1f166b832d21ead4 Mon Sep 17 00:00:00 2001 From: Denis Hernandez Date: Tue, 30 Apr 2019 15:00:53 +0100 Subject: [PATCH 04/10] Remove padding on first and last list item --- packages/components/psammead-story-promo-list/src/index.jsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/components/psammead-story-promo-list/src/index.jsx b/packages/components/psammead-story-promo-list/src/index.jsx index 686b563a64..1263294b94 100644 --- a/packages/components/psammead-story-promo-list/src/index.jsx +++ b/packages/components/psammead-story-promo-list/src/index.jsx @@ -20,7 +20,12 @@ export const StoryPromoLi = styled.li` padding: ${GEL_SPACING_TRPL} 0 ${GEL_SPACING_TRPL}; } + &:first-child { + padding-top: 0; + } + &:last-child { + padding-bottom: 0; border: none; } `; From 1063c575fb5d60769cda697772fcd97670328463 Mon Sep 17 00:00:00 2001 From: Denis Hernandez Date: Tue, 30 Apr 2019 15:43:04 +0100 Subject: [PATCH 05/10] Update component to allow to pass children and props --- .../components/psammead-story-promo-list/README.md | 6 +++--- .../src/__snapshots__/index.test.jsx.snap | 5 +++++ .../psammead-story-promo-list/src/index.jsx | 14 +++++++++++++- .../src/index.stories.jsx | 5 ++--- 4 files changed, 23 insertions(+), 7 deletions(-) diff --git a/packages/components/psammead-story-promo-list/README.md b/packages/components/psammead-story-promo-list/README.md index e9d0dc6c99..8bf2b5b015 100644 --- a/packages/components/psammead-story-promo-list/README.md +++ b/packages/components/psammead-story-promo-list/README.md @@ -10,9 +10,9 @@ The `@bbc/psammead-story-promo-list` package is a set of two components, `StoryP ## Props -| Argument | Type | Required | Default | Example | -| --------- | ---- | -------- | ------- | ------- | -| No props. | | | | | +| Argument | Type | Required | Default | Example | +| -------- | ---- | -------- | ------- | -------------- | +| children | node | Yes | N/A | `` | ## Usage diff --git a/packages/components/psammead-story-promo-list/src/__snapshots__/index.test.jsx.snap b/packages/components/psammead-story-promo-list/src/__snapshots__/index.test.jsx.snap index 58c13f645c..b278a329b5 100644 --- a/packages/components/psammead-story-promo-list/src/__snapshots__/index.test.jsx.snap +++ b/packages/components/psammead-story-promo-list/src/__snapshots__/index.test.jsx.snap @@ -39,7 +39,12 @@ exports[`StoryPromo should render correctly 1`] = ` padding: 1rem 0 0.5rem; } +.c1:first-child { + padding-top: 0; +} + .c1:last-child { + padding-bottom: 0; border: none; } diff --git a/packages/components/psammead-story-promo-list/src/index.jsx b/packages/components/psammead-story-promo-list/src/index.jsx index 1263294b94..9ae2d138b7 100644 --- a/packages/components/psammead-story-promo-list/src/index.jsx +++ b/packages/components/psammead-story-promo-list/src/index.jsx @@ -1,4 +1,6 @@ +import React from 'react'; import styled from 'styled-components'; +import { node } from 'prop-types'; import { C_LUNAR } from '@bbc/psammead-styles/colours'; import { GEL_SPACING, @@ -30,8 +32,18 @@ export const StoryPromoLi = styled.li` } `; -export const StoryPromoUl = styled.ul` +const StyledUnorderedList = styled.ul` list-style-type: none; margin: 0; padding: 0; `; + +export const StoryPromoUl = ({ children, ...props }) => ( + + {children} + +); + +StoryPromoUl.propTypes = { + children: node.isRequired, +}; diff --git a/packages/components/psammead-story-promo-list/src/index.stories.jsx b/packages/components/psammead-story-promo-list/src/index.stories.jsx index 4fd32f4d01..eb2bf6e9ae 100644 --- a/packages/components/psammead-story-promo-list/src/index.stories.jsx +++ b/packages/components/psammead-story-promo-list/src/index.stories.jsx @@ -1,6 +1,5 @@ import React, { Fragment } from 'react'; import { storiesOf } from '@storybook/react'; -import nanoid from 'nanoid'; import Timestamp from '@bbc/psammead-timestamp'; import Image from '@bbc/psammead-image'; import { latin } from '@bbc/gel-foundations/scripts'; @@ -26,7 +25,7 @@ const InfoComponent = ({ headlineText, summaryText }) => ( storiesOf('StoryPromoList', module).add( 'default', () => ( - + {storyPromoData.map(item => { const ImagePromo = ( @@ -40,7 +39,7 @@ storiesOf('StoryPromoList', module).add( ); return ( - + ); From 60fd4e1f8cc51bdd2a918d48d5bced37a9948e05 Mon Sep 17 00:00:00 2001 From: Denis Hernandez Date: Thu, 2 May 2019 07:41:45 +0100 Subject: [PATCH 06/10] Create StoryPromoLi compoment with role listitem --- .../psammead-story-promo-list/src/index.jsx | 12 +++++++++++- .../psammead-story-promo-list/src/index.stories.jsx | 2 +- 2 files changed, 12 insertions(+), 2 deletions(-) diff --git a/packages/components/psammead-story-promo-list/src/index.jsx b/packages/components/psammead-story-promo-list/src/index.jsx index 9ae2d138b7..58b8de374b 100644 --- a/packages/components/psammead-story-promo-list/src/index.jsx +++ b/packages/components/psammead-story-promo-list/src/index.jsx @@ -12,7 +12,7 @@ import { GEL_GROUP_4_SCREEN_WIDTH_MIN, } from '@bbc/gel-foundations/breakpoints'; -export const StoryPromoLi = styled.li` +const StyledListItem = styled.li` border-bottom: 0.0625rem solid ${C_LUNAR}; padding: ${GEL_SPACING_DBL} 0 ${GEL_SPACING}; @media (min-width: ${GEL_GROUP_3_SCREEN_WIDTH_MIN}) { @@ -44,6 +44,16 @@ export const StoryPromoUl = ({ children, ...props }) => ( ); +export const StoryPromoLi = ({ children, ...props }) => ( + + {children} + +); + StoryPromoUl.propTypes = { children: node.isRequired, }; + +StoryPromoLi.propTypes = { + children: node.isRequired, +}; diff --git a/packages/components/psammead-story-promo-list/src/index.stories.jsx b/packages/components/psammead-story-promo-list/src/index.stories.jsx index eb2bf6e9ae..619b937905 100644 --- a/packages/components/psammead-story-promo-list/src/index.stories.jsx +++ b/packages/components/psammead-story-promo-list/src/index.stories.jsx @@ -39,7 +39,7 @@ storiesOf('StoryPromoList', module).add( ); return ( - + ); From 1450959415cf181d3962673cc8d5e0711925ded1 Mon Sep 17 00:00:00 2001 From: Denis Hernandez Date: Thu, 2 May 2019 13:18:12 +0100 Subject: [PATCH 07/10] Add datetime and dateformat --- .../psammead-story-promo-list/src/index.jsx | 2 ++ .../psammead-story-promo-list/src/index.stories.jsx | 6 ++++-- .../testHelpers/fixtureData.js | 12 ++++++++---- 3 files changed, 14 insertions(+), 6 deletions(-) diff --git a/packages/components/psammead-story-promo-list/src/index.jsx b/packages/components/psammead-story-promo-list/src/index.jsx index 58b8de374b..9191d522ef 100644 --- a/packages/components/psammead-story-promo-list/src/index.jsx +++ b/packages/components/psammead-story-promo-list/src/index.jsx @@ -15,9 +15,11 @@ import { const StyledListItem = styled.li` border-bottom: 0.0625rem solid ${C_LUNAR}; padding: ${GEL_SPACING_DBL} 0 ${GEL_SPACING}; + @media (min-width: ${GEL_GROUP_3_SCREEN_WIDTH_MIN}) { padding: ${GEL_SPACING_DBL} 0 ${GEL_SPACING_DBL}; } + @media (min-width: ${GEL_GROUP_4_SCREEN_WIDTH_MIN}) { padding: ${GEL_SPACING_TRPL} 0 ${GEL_SPACING_TRPL}; } diff --git a/packages/components/psammead-story-promo-list/src/index.stories.jsx b/packages/components/psammead-story-promo-list/src/index.stories.jsx index 619b937905..3794d5647f 100644 --- a/packages/components/psammead-story-promo-list/src/index.stories.jsx +++ b/packages/components/psammead-story-promo-list/src/index.stories.jsx @@ -14,11 +14,11 @@ const ImageComponent = ({ alt, src }) => ( ); // eslint-disable-next-line react/prop-types -const InfoComponent = ({ headlineText, summaryText }) => ( +const InfoComponent = ({ headlineText, summaryText, datetime, dateformat }) => ( {headlineText} {summaryText} - 12 March 2019 + {dateformat} ); @@ -35,6 +35,8 @@ storiesOf('StoryPromoList', module).add( ); diff --git a/packages/components/psammead-story-promo-list/testHelpers/fixtureData.js b/packages/components/psammead-story-promo-list/testHelpers/fixtureData.js index 0da5e734bc..d64b17d758 100644 --- a/packages/components/psammead-story-promo-list/testHelpers/fixtureData.js +++ b/packages/components/psammead-story-promo-list/testHelpers/fixtureData.js @@ -10,7 +10,8 @@ const storyPromoData = [ 'Gobierno de Venezuela condena enérgicamente un "intento de golpe" de Juan Guaidó y Leopoldo López', summary: 'El liberado Leopoldo López y Juan Guaidó llaman a la "fase final" contra el gobierno de Nicolás Maduro', - time: '2019-03-01T14:00+00:00', + datetime: '2019-03-12T14:00+00:00', + dateformat: '12 March 2019', }, }, { @@ -24,7 +25,8 @@ const storyPromoData = [ 'Abdicación de Akihito en Japón: el emperador que dejó atrás los "pecados" de su padre y es el primero en abdicar en 200 años', summary: 'Qué es Reiwa y por qué significa el inicio de una nueva era imperial para Japón', - time: '2019-03-01T14:00+00:00', + datetime: '2019-04-20T14:00+00:00', + dateformat: '20 April 2019', }, }, { @@ -38,7 +40,8 @@ const storyPromoData = [ 'Qué significa para la crisis política en Venezuela que Leopoldo López haya sido liberado', summary: 'Qué papel juega Leopoldo López en la crisis política de Venezuela a 5 años de su arresto', - time: '2019-03-01T14:00+00:00', + datetime: '2019-05-05T14:00+00:00', + dateformat: '5 May 2019', }, }, { @@ -52,7 +55,8 @@ const storyPromoData = [ 'La batalla de Invernalia: por qué no cumplió con las enormes expectativas de los fans más exigentes de "Juego de Tronos"', summary: 'Era el momento que los fanáticos de "Juego de Tronos" habían estado esperando durante mucho tiempo: la batalla entre los vivos y los muertos. ', - time: '2019-03-01T14:00+00:00', + datetime: '2019-06-30T14:00+00:00', + dateformat: '30 June 2019', }, }, ]; From 0e4ae383bc2eb31db17a24c3036e9a949f9ba2f7 Mon Sep 17 00:00:00 2001 From: Denis Hernandez Date: Wed, 8 May 2019 10:01:03 +0100 Subject: [PATCH 08/10] Remove role from test --- .../components/psammead-story-promo-list/src/index.test.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/components/psammead-story-promo-list/src/index.test.jsx b/packages/components/psammead-story-promo-list/src/index.test.jsx index b02c991db7..1a25dfe0e3 100644 --- a/packages/components/psammead-story-promo-list/src/index.test.jsx +++ b/packages/components/psammead-story-promo-list/src/index.test.jsx @@ -17,8 +17,8 @@ const Info = ( describe('StoryPromo', () => { shouldMatchSnapshot( 'should render correctly', - - + + , From 691b692c04954bc2a408d18cef2ef3b0797045a3 Mon Sep 17 00:00:00 2001 From: Denis Hernandez Date: Wed, 8 May 2019 20:33:22 +0100 Subject: [PATCH 09/10] Add alpha version and a11 notes --- .../components/psammead-story-promo-list/CHANGELOG.md | 2 +- packages/components/psammead-story-promo-list/README.md | 9 ++++++++- .../psammead-story-promo-list/package-lock.json | 2 +- .../components/psammead-story-promo-list/package.json | 7 +++++-- 4 files changed, 15 insertions(+), 5 deletions(-) diff --git a/packages/components/psammead-story-promo-list/CHANGELOG.md b/packages/components/psammead-story-promo-list/CHANGELOG.md index 4e8b8a0f44..230f503c22 100644 --- a/packages/components/psammead-story-promo-list/CHANGELOG.md +++ b/packages/components/psammead-story-promo-list/CHANGELOG.md @@ -3,4 +3,4 @@ | Version | Description | | ------- | ----------- | -| 0.1.0 | [PR#486](https://github.com/BBC-News/psammead/pull/486) Create initial package. | +| 0.1.0-alpha.0 | [PR#486](https://github.com/BBC-News/psammead/pull/486) Create initial package. | diff --git a/packages/components/psammead-story-promo-list/README.md b/packages/components/psammead-story-promo-list/README.md index 8bf2b5b015..3ed121d9fc 100644 --- a/packages/components/psammead-story-promo-list/README.md +++ b/packages/components/psammead-story-promo-list/README.md @@ -1,3 +1,6 @@ +# ⛔️ This is an alpha component ⛔️ +This component is currently tagged as alpha and is not suitable for production use. Following the passing of an accessibility review this component will be marked as ready for production and the alpha tag removed. + # psammead-story-promo-list - [![Known Vulnerabilities](https://snyk.io/test/github/bbc/psammead/badge.svg?targetFile=packages%2Fcomponents%2Fpsammead-story-promo-list%2Fpackage.json)](https://snyk.io/test/github/bbc/psammead?targetFile=packages%2Fcomponents%2Fpsammead-story-promo-list%2Fpackage.json) [![Storybook](https://raw.githubusercontent.com/storybooks/story-promo-list/master/badge/badge-storybook.svg?sanitize=true)](https://bbc.github.io/psammead/?path=/story/story-promo-list--default) [![GitHub license](https://img.shields.io/badge/license-Apache%202.0-blue.svg)](https://github.com/bbc/psammead/blob/latest/LICENSE) [![npm version](https://img.shields.io/npm/v/@bbc/psammead-story-promo-list.svg)](https://www.npmjs.com/package/@bbc/psammead-story-promo-list) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/bbc/psammead/blob/latest/CONTRIBUTING.md) ## Description @@ -58,7 +61,11 @@ This component is designed to be used with story promos on 'index' pages. - +### Accessibility notes + +We have added the role `list` and `listitem` to the corresponding list items due to a VoiceOver bug to reinstate the list semantics. + +We haven't yet thoroughly looked at cross device browser AT testing yet, this is in-progress. We will update with a11y notes when carrying out a proper release. diff --git a/packages/components/psammead-story-promo-list/package-lock.json b/packages/components/psammead-story-promo-list/package-lock.json index 45c2a42281..6f9123a0c6 100644 --- a/packages/components/psammead-story-promo-list/package-lock.json +++ b/packages/components/psammead-story-promo-list/package-lock.json @@ -1,6 +1,6 @@ { "name": "@bbc/psammead-story-promo-list", - "version": "0.1.0", + "version": "0.1.0-alpha.0", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/packages/components/psammead-story-promo-list/package.json b/packages/components/psammead-story-promo-list/package.json index dfbf4369af..622d8cf580 100644 --- a/packages/components/psammead-story-promo-list/package.json +++ b/packages/components/psammead-story-promo-list/package.json @@ -1,6 +1,6 @@ { "name": "@bbc/psammead-story-promo-list", - "version": "0.1.0", + "version": "0.1.0-alpha.0", "main": "dist/index.js", "description": "List of story promos", "repository": { @@ -39,5 +39,8 @@ "story", "promo", "list" - ] + ], + "publishConfig": { + "tag": "alpha" + } } From 673ae4e83858f38a4a18378aaebad425ed6eeb04 Mon Sep 17 00:00:00 2001 From: Denis Hernandez <46446236+DenisBBC@users.noreply.github.com> Date: Thu, 9 May 2019 10:07:51 +0100 Subject: [PATCH 10/10] Update packages/components/psammead-story-promo-list/README.md Co-Authored-By: sadickisaac <48688870+sadickisaac@users.noreply.github.com> --- packages/components/psammead-story-promo-list/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/psammead-story-promo-list/README.md b/packages/components/psammead-story-promo-list/README.md index 3ed121d9fc..6b7b7c18df 100644 --- a/packages/components/psammead-story-promo-list/README.md +++ b/packages/components/psammead-story-promo-list/README.md @@ -5,7 +5,7 @@ This component is currently tagged as alpha and is not suitable for production u ## Description -The `@bbc/psammead-story-promo-list` package is a set of two components, `StoryPromoUl` and `StoryPromoLi`. They use a `ul` and `li` HTML element respectively. +The `@bbc/psammead-story-promo-list` package is a set of two components, `StoryPromoUl` and `StoryPromoLi`. They use `ul` and `li` HTML elements respectively. ## Installation