From 327415a619d55fed4b82c53c6a05b95ab6a6e100 Mon Sep 17 00:00:00 2001 From: Drew McMillan Date: Mon, 15 Apr 2019 23:21:38 +0100 Subject: [PATCH 01/12] :rocket: Add media indicator --- .../psammead-media-indicator/CHANGELOG.md | 6 + .../psammead-media-indicator/README.md | 49 +++ .../package-lock.json | 343 ++++++++++++++++++ .../psammead-media-indicator/package.json | 39 ++ .../src/__snapshots__/index.test.jsx.snap | 39 ++ .../psammead-media-indicator/src/index.jsx | 40 ++ .../src/index.stories.jsx | 10 + .../src/index.test.jsx | 10 + 8 files changed, 536 insertions(+) create mode 100644 packages/components/psammead-media-indicator/CHANGELOG.md create mode 100644 packages/components/psammead-media-indicator/README.md create mode 100644 packages/components/psammead-media-indicator/package-lock.json create mode 100644 packages/components/psammead-media-indicator/package.json create mode 100644 packages/components/psammead-media-indicator/src/__snapshots__/index.test.jsx.snap create mode 100644 packages/components/psammead-media-indicator/src/index.jsx create mode 100644 packages/components/psammead-media-indicator/src/index.stories.jsx create mode 100644 packages/components/psammead-media-indicator/src/index.test.jsx diff --git a/packages/components/psammead-media-indicator/CHANGELOG.md b/packages/components/psammead-media-indicator/CHANGELOG.md new file mode 100644 index 0000000000..16dc2c1184 --- /dev/null +++ b/packages/components/psammead-media-indicator/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-media-indicator/README.md b/packages/components/psammead-media-indicator/README.md new file mode 100644 index 0000000000..20af74f30e --- /dev/null +++ b/packages/components/psammead-media-indicator/README.md @@ -0,0 +1,49 @@ +# psammead-media-indicator - [![Known Vulnerabilities](https://snyk.io/test/github/bbc/psammead/badge.svg?targetFile=packages%2Fcomponents%2Fpsammead-media-indicator%2Fpackage.json)](https://snyk.io/test/github/bbc/psammead?targetFile=packages%2Fcomponents%2Fpsammead-media-indicator%2Fpackage.json) [![Storybook](https://raw.githubusercontent.com/storybooks/media-indicator/master/badge/badge-storybook.svg?sanitize=true)](https://bbc.github.io/psammead/?path=/story/media-indicator--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-media-indicator.svg)](https://www.npmjs.com/package/@bbc/psammead-media-indicator) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/bbc/psammead/blob/latest/CONTRIBUTING.md) + +## Description + +The `MediaIndicator` component provides an 'play' icon as well as a duration timestamp. + +## Installation + +`npm install @bbc/psammead-media-indicator` + +## Props + +| Argument | Type | Required | Default | Example | +| --------- | ------ | -------- | ------- | ------- | +| duration | string | No | Null | '2:15' | + +## Usage + +The typical use-case of this component is ontop of images within promos for articles that contains a video asset at the top of the page. It indicates to the user that the link is to a video and how long the video is in duration. + +```jsx +import MediaIndicator from '@bbc/psammead-media-indicator'; + + +``` + +### When to use this component + +The `MediaIndicator` component is designed to be used on top of an image which is linking to a page containing a video based on that image. It tells the user to expect a video on the page as well as how long it is in duration. + + + +### Accessibility notes + +- TODO + + + +## 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-media-indicator/package-lock.json b/packages/components/psammead-media-indicator/package-lock.json new file mode 100644 index 0000000000..86e5f10184 --- /dev/null +++ b/packages/components/psammead-media-indicator/package-lock.json @@ -0,0 +1,343 @@ +{ + "name": "@bbc/psammead-media-indicator", + "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==", + "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==", + "requires": { + "@babel/types": "^7.0.0" + } + }, + "@babel/types": { + "version": "7.3.4", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.3.4.tgz", + "integrity": "sha512-WEkp8MsLftM7O/ty580wAmZzN1nDmCACc5+jFzUt+GUFNNIi3LdRlueYz0YIlmJhlZx1QYDMZL5vdWCL0fNjFQ==", + "requires": { + "esutils": "^2.0.2", + "lodash": "^4.17.11", + "to-fast-properties": "^2.0.0" + } + }, + "@bbc/gel-foundations": { + "version": "0.3.0", + "resolved": "https://registry.npmjs.org/@bbc/gel-foundations/-/gel-foundations-0.3.0.tgz", + "integrity": "sha512-YWnHJ4b7ejvKX5IvTL5ualBCwrAEc/4yfn3hNp8h8v5URnb2zQ8l7lWjbhcxjmbLbVVRqPNa97mkp75ApyxvwQ==" + }, + "@bbc/psammead-styles": { + "version": "0.3.2", + "resolved": "https://registry.npmjs.org/@bbc/psammead-styles/-/psammead-styles-0.3.2.tgz", + "integrity": "sha512-KRAcWam7ztRX0wLww+HIJa9Cif1m1kJ8hrHJn5/ftnwoya8ucSzL1PZQaG8w4OV2XkkyzN6Mv6v1guWhVJ/n/g==" + }, + "@bbc/psammead-test-helpers": { + "version": "0.3.3", + "resolved": "https://registry.npmjs.org/@bbc/psammead-test-helpers/-/psammead-test-helpers-0.3.3.tgz", + "integrity": "sha512-w/ENAOLuXZ8f2l3IJ2wYKEuNVH69xn0p4YIV6qx6GpZBYdP12n5sBi1lvGZOKD9tRa3UOGN5WZzxrZLjcUCh+w==", + "dev": true, + "requires": { + "jest-styled-components": "^6.3.1", + "react-test-renderer": "^16.6.3" + } + }, + "@bbc/psammead-visually-hidden-text": { + "version": "0.1.10", + "resolved": "https://registry.npmjs.org/@bbc/psammead-visually-hidden-text/-/psammead-visually-hidden-text-0.1.10.tgz", + "integrity": "sha512-QZ+/UWYjKeFus75L8p2/p8E876t9Vm57Gj2m0aqCrfNlCZm0K2UNmB4LDtRDyKXmtGLVAK+P9h2vK1oJvZh5mg==", + "requires": { + "styled-components": "^4.1.2" + } + }, + "@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==", + "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==" + }, + "@emotion/unitless": { + "version": "0.7.3", + "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.3.tgz", + "integrity": "sha512-4zAPlpDEh2VwXswwr/t8xGNDGg8RQiPxtxZ3qQEXyQsBV39ptTdESCjuBvGze1nLMVrxmTIKmnO/nAV8Tqjjzg==" + }, + "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==", + "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=" + }, + "camelize": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.0.tgz", + "integrity": "sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs=" + }, + "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=" + }, + "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==", + "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=" + }, + "has-flag": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", + "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=" + }, + "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==" + }, + "lodash": { + "version": "4.17.11", + "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.11.tgz", + "integrity": "sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg==" + }, + "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==", + "requires": { + "js-tokens": "^3.0.0 || ^4.0.0" + } + }, + "memoize-one": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-4.0.3.tgz", + "integrity": "sha512-QmpUu4KqDmX0plH4u+tf0riMc1KHE1+lw95cMrLlXQAFOx/xnBtwhZ52XJxd9X2O6kwKBqX32kmhbhlobD0cuw==" + }, + "object-assign": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", + "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=" + }, + "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==" + }, + "prop-types": { + "version": "15.7.2", + "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz", + "integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==", + "requires": { + "loose-envify": "^1.4.0", + "object-assign": "^4.1.1", + "react-is": "^16.8.1" + } + }, + "react": { + "version": "16.8.3", + "resolved": "https://registry.npmjs.org/react/-/react-16.8.3.tgz", + "integrity": "sha512-3UoSIsEq8yTJuSu0luO1QQWYbgGEILm+eJl2QN/VLDi7hL+EN18M3q3oVZwmVzzBJ3DkM7RMdRwBmZZ+b4IzSA==", + "dev": true, + "requires": { + "loose-envify": "^1.1.0", + "object-assign": "^4.1.1", + "prop-types": "^15.6.2", + "scheduler": "^0.13.3" + } + }, + "react-is": { + "version": "16.8.3", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.8.3.tgz", + "integrity": "sha512-Y4rC1ZJmsxxkkPuMLwvKvlL1Zfpbcu+Bf4ZigkHup3v9EfdYhAlWAaVyA19olXq2o2mGn0w+dFKvk3pVVlYcIA==" + }, + "react-test-renderer": { + "version": "16.8.5", + "resolved": "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-16.8.5.tgz", + "integrity": "sha512-/pFpHYQH4f35OqOae/DgOCXJDxBqD3K3akVfDhLgR0qYHoHjnICI/XS9QDwIhbrOFHWL7okVW9kKMaHuKvt2ng==", + "dev": true, + "requires": { + "object-assign": "^4.1.1", + "prop-types": "^15.6.2", + "react-is": "^16.8.5", + "scheduler": "^0.13.5" + }, + "dependencies": { + "react-is": { + "version": "16.8.5", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.8.5.tgz", + "integrity": "sha512-sudt2uq5P/2TznPV4Wtdi+Lnq3yaYW8LfvPKLM9BKD8jJNBkxMVyB0C9/GmVhLw7Jbdmndk/73n7XQGeN9A3QQ==", + "dev": true + }, + "scheduler": { + "version": "0.13.5", + "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.13.5.tgz", + "integrity": "sha512-K98vjkQX9OIt/riLhp6F+XtDPtMQhqNcf045vsh+pcuvHq+PHy1xCrH3pq1P40m6yR46lpVvVhKdEOtnimuUJw==", + "dev": true, + "requires": { + "loose-envify": "^1.1.0", + "object-assign": "^4.1.1" + } + } + } + }, + "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.3", + "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.13.3.tgz", + "integrity": "sha512-UxN5QRYWtpR1egNWzJcVLk8jlegxAugswQc984lD3kU7NuobsO37/sRfbpTdBjtnD5TBNFA2Q2oLV5+UmPSmEQ==", + "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.1.3", + "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-4.1.3.tgz", + "integrity": "sha512-0quV4KnSfvq5iMtT0RzpMGl/Dg3XIxIxOl9eJpiqiq4SrAmR1l1DLzNpMzoy3DyzdXVDMJS2HzROnXscWA3SEw==", + "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": "^4.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==" + }, + "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==" + }, + "supports-color": { + "version": "5.5.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", + "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==", + "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=" + }, + "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-media-indicator/package.json b/packages/components/psammead-media-indicator/package.json new file mode 100644 index 0000000000..828d7d7891 --- /dev/null +++ b/packages/components/psammead-media-indicator/package.json @@ -0,0 +1,39 @@ +{ + "name": "@bbc/psammead-media-indicator", + "version": "0.1.0", + "main": "dist/index.js", + "description": "Provides a play icon and media duration for media page promos", + "repository": { + "type": "git", + "url": "https://github.com/bbc/psammead/tree/latest/packages/components/psammead-media-indicator" + }, + "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-media-indicator/README.md", + "dependencies": { + "@bbc/gel-foundations": "^0.3.0", + "@bbc/psammead-styles": "^0.3.2", + "@bbc/psammead-visually-hidden-text": "^0.1.10" + }, + "devDependencies": { + "@bbc/psammead-test-helpers": "^0.3.3", + "react": "^16.6.3", + "styled-components": "^4.1.3" + }, + "peerDependencies": { + "react": "^16.6.3", + "styled-components": "^4.1.3" + }, + "keywords": [ + "bbc", + "media", + "indicator", + "play" + ] +} diff --git a/packages/components/psammead-media-indicator/src/__snapshots__/index.test.jsx.snap b/packages/components/psammead-media-indicator/src/__snapshots__/index.test.jsx.snap new file mode 100644 index 0000000000..25f67319f8 --- /dev/null +++ b/packages/components/psammead-media-indicator/src/__snapshots__/index.test.jsx.snap @@ -0,0 +1,39 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`MediaIndicator should render correctly 1`] = ` +.c0 { + padding: 0.5rem 0.25rem; + background-color: #FFFFFF; + display: inline-block; +} + +.c1 { + vertical-align: middle; + margin: 0 0.25rem; +} + +.c2 { + vertical-align: middle; + margin: 0 0.25rem; +} + +
+ + + + + 2:00 + +
+`; diff --git a/packages/components/psammead-media-indicator/src/index.jsx b/packages/components/psammead-media-indicator/src/index.jsx new file mode 100644 index 0000000000..db2f863e74 --- /dev/null +++ b/packages/components/psammead-media-indicator/src/index.jsx @@ -0,0 +1,40 @@ +import React from 'react'; +import styled from 'styled-components'; +import { string } from 'prop-types'; +import { C_WHITE } from '@bbc/psammead-styles/colours'; +import { GEL_SPACING, GEL_SPACING_HLF } from '@bbc/gel-foundations/spacings'; + +const MediaIndicatorWrapper = styled.div` + padding: ${GEL_SPACING} ${GEL_SPACING_HLF}; + background-color: ${C_WHITE}; + display: inline-block; +`; + +const PlayIcon = styled.svg` + vertical-align: middle; + margin: 0 ${GEL_SPACING_HLF}; +`; + +const TimeDuration = styled.span` + vertical-align: middle; + margin: 0 ${GEL_SPACING_HLF}; +`; + +const MediaIndicator = ({ duration }) => ( + + + + + {duration ? 2:00 : null} + +); + +MediaIndicator.propTypes = { + duration: string, +}; + +MediaIndicator.defaultProps = { + duration: null, +}; + +export default MediaIndicator; diff --git a/packages/components/psammead-media-indicator/src/index.stories.jsx b/packages/components/psammead-media-indicator/src/index.stories.jsx new file mode 100644 index 0000000000..c459282154 --- /dev/null +++ b/packages/components/psammead-media-indicator/src/index.stories.jsx @@ -0,0 +1,10 @@ +import React from 'react'; +import { storiesOf } from '@storybook/react'; +import notes from '../README.md'; +import MediaIndicator from './index'; + +storiesOf('MediaIndicator', module).add( + 'default', + () => , + { notes }, +); diff --git a/packages/components/psammead-media-indicator/src/index.test.jsx b/packages/components/psammead-media-indicator/src/index.test.jsx new file mode 100644 index 0000000000..0e00f75800 --- /dev/null +++ b/packages/components/psammead-media-indicator/src/index.test.jsx @@ -0,0 +1,10 @@ +import React from 'react'; +import { shouldMatchSnapshot } from '@bbc/psammead-test-helpers'; +import MediaIndicator from './index'; + +describe('MediaIndicator', () => { + shouldMatchSnapshot( + 'should render correctly', + , + ); +}); From 33c889376f1564e0139d71df90981f6cd7712712 Mon Sep 17 00:00:00 2001 From: Drew McMillan Date: Tue, 16 Apr 2019 22:41:29 +0100 Subject: [PATCH 02/12] :rocket: Lets get some a11y up in here --- .../package-lock.json | 67 +++++++++++++------ .../psammead-media-indicator/package.json | 2 +- .../src/__snapshots__/index.test.jsx.snap | 15 +---- .../psammead-media-indicator/src/index.jsx | 20 ++++-- .../src/index.stories.jsx | 8 ++- 5 files changed, 71 insertions(+), 41 deletions(-) diff --git a/packages/components/psammead-media-indicator/package-lock.json b/packages/components/psammead-media-indicator/package-lock.json index 86e5f10184..d2cb8e2f80 100644 --- a/packages/components/psammead-media-indicator/package-lock.json +++ b/packages/components/psammead-media-indicator/package-lock.json @@ -8,6 +8,7 @@ "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" } @@ -16,6 +17,7 @@ "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" } @@ -24,6 +26,7 @@ "version": "7.3.4", "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.3.4.tgz", "integrity": "sha512-WEkp8MsLftM7O/ty580wAmZzN1nDmCACc5+jFzUt+GUFNNIi3LdRlueYz0YIlmJhlZx1QYDMZL5vdWCL0fNjFQ==", + "dev": true, "requires": { "esutils": "^2.0.2", "lodash": "^4.17.11", @@ -51,17 +54,15 @@ } }, "@bbc/psammead-visually-hidden-text": { - "version": "0.1.10", - "resolved": "https://registry.npmjs.org/@bbc/psammead-visually-hidden-text/-/psammead-visually-hidden-text-0.1.10.tgz", - "integrity": "sha512-QZ+/UWYjKeFus75L8p2/p8E876t9Vm57Gj2m0aqCrfNlCZm0K2UNmB4LDtRDyKXmtGLVAK+P9h2vK1oJvZh5mg==", - "requires": { - "styled-components": "^4.1.2" - } + "version": "0.1.12", + "resolved": "https://registry.npmjs.org/@bbc/psammead-visually-hidden-text/-/psammead-visually-hidden-text-0.1.12.tgz", + "integrity": "sha512-nTgniZ9edCscJs7xDoh/bWuoCkoa6AIoVpVH2/ekMBDG2UUgj9yGJZts0Ki89l2IlQBQOBZbE/vRzgsuVDszTg==" }, "@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" } @@ -69,12 +70,14 @@ "@emotion/memoize": { "version": "0.7.1", "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.1.tgz", - "integrity": "sha512-Qv4LTqO11jepd5Qmlp3M1YEjBumoTHcHFdgPTQ+sFlIL5myi/7xu/POwP7IRu6odBdmLXdtIs1D6TuW6kbwbbg==" + "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==" + "integrity": "sha512-4zAPlpDEh2VwXswwr/t8xGNDGg8RQiPxtxZ3qQEXyQsBV39ptTdESCjuBvGze1nLMVrxmTIKmnO/nAV8Tqjjzg==", + "dev": true }, "atob": { "version": "2.1.2", @@ -86,6 +89,7 @@ "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", @@ -96,12 +100,14 @@ "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=" + "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=" + "integrity": "sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs=", + "dev": true }, "css": { "version": "2.2.4", @@ -118,12 +124,14 @@ "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=" + "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", @@ -139,12 +147,14 @@ "esutils": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.2.tgz", - "integrity": "sha1-Cr9PHKpbyx96nYrMbepPqqBLrJs=" + "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=" + "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=", + "dev": true }, "inherits": { "version": "2.0.3", @@ -164,17 +174,20 @@ "js-tokens": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", - "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==" + "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==" + "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" } @@ -182,22 +195,26 @@ "memoize-one": { "version": "4.0.3", "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-4.0.3.tgz", - "integrity": "sha512-QmpUu4KqDmX0plH4u+tf0riMc1KHE1+lw95cMrLlXQAFOx/xnBtwhZ52XJxd9X2O6kwKBqX32kmhbhlobD0cuw==" + "integrity": "sha512-QmpUu4KqDmX0plH4u+tf0riMc1KHE1+lw95cMrLlXQAFOx/xnBtwhZ52XJxd9X2O6kwKBqX32kmhbhlobD0cuw==", + "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=" + "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==" + "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", @@ -219,7 +236,8 @@ "react-is": { "version": "16.8.3", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.8.3.tgz", - "integrity": "sha512-Y4rC1ZJmsxxkkPuMLwvKvlL1Zfpbcu+Bf4ZigkHup3v9EfdYhAlWAaVyA19olXq2o2mGn0w+dFKvk3pVVlYcIA==" + "integrity": "sha512-Y4rC1ZJmsxxkkPuMLwvKvlL1Zfpbcu+Bf4ZigkHup3v9EfdYhAlWAaVyA19olXq2o2mGn0w+dFKvk3pVVlYcIA==", + "dev": true }, "react-test-renderer": { "version": "16.8.5", @@ -296,6 +314,7 @@ "version": "4.1.3", "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-4.1.3.tgz", "integrity": "sha512-0quV4KnSfvq5iMtT0RzpMGl/Dg3XIxIxOl9eJpiqiq4SrAmR1l1DLzNpMzoy3DyzdXVDMJS2HzROnXscWA3SEw==", + "dev": true, "requires": { "@babel/helper-module-imports": "^7.0.0", "@emotion/is-prop-valid": "^0.7.3", @@ -313,17 +332,20 @@ "stylis": { "version": "3.5.4", "resolved": "https://registry.npmjs.org/stylis/-/stylis-3.5.4.tgz", - "integrity": "sha512-8/3pSmthWM7lsPBKv7NXkzn2Uc9W7NotcwGNpJaa3k7WMM1XDCA4MgT5k/8BIexd5ydZdboXtU90XH9Ec4Bv/Q==" + "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==" + "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" } @@ -331,7 +353,8 @@ "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=" + "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=", + "dev": true }, "urix": { "version": "0.1.0", diff --git a/packages/components/psammead-media-indicator/package.json b/packages/components/psammead-media-indicator/package.json index 828d7d7891..bf78e2b343 100644 --- a/packages/components/psammead-media-indicator/package.json +++ b/packages/components/psammead-media-indicator/package.json @@ -19,7 +19,7 @@ "dependencies": { "@bbc/gel-foundations": "^0.3.0", "@bbc/psammead-styles": "^0.3.2", - "@bbc/psammead-visually-hidden-text": "^0.1.10" + "@bbc/psammead-visually-hidden-text": "^0.1.12" }, "devDependencies": { "@bbc/psammead-test-helpers": "^0.3.3", diff --git a/packages/components/psammead-media-indicator/src/__snapshots__/index.test.jsx.snap b/packages/components/psammead-media-indicator/src/__snapshots__/index.test.jsx.snap index 25f67319f8..326938c840 100644 --- a/packages/components/psammead-media-indicator/src/__snapshots__/index.test.jsx.snap +++ b/packages/components/psammead-media-indicator/src/__snapshots__/index.test.jsx.snap @@ -12,28 +12,19 @@ exports[`MediaIndicator should render correctly 1`] = ` margin: 0 0.25rem; } -.c2 { - vertical-align: middle; - margin: 0 0.25rem; -} -
- - 2:00 -
`; diff --git a/packages/components/psammead-media-indicator/src/index.jsx b/packages/components/psammead-media-indicator/src/index.jsx index db2f863e74..fe252f7bfd 100644 --- a/packages/components/psammead-media-indicator/src/index.jsx +++ b/packages/components/psammead-media-indicator/src/index.jsx @@ -3,6 +3,7 @@ import styled from 'styled-components'; import { string } from 'prop-types'; import { C_WHITE } from '@bbc/psammead-styles/colours'; import { GEL_SPACING, GEL_SPACING_HLF } from '@bbc/gel-foundations/spacings'; +import VisuallyHiddenText from '@bbc/psammead-visually-hidden-text'; const MediaIndicatorWrapper = styled.div` padding: ${GEL_SPACING} ${GEL_SPACING_HLF}; @@ -15,26 +16,35 @@ const PlayIcon = styled.svg` margin: 0 ${GEL_SPACING_HLF}; `; -const TimeDuration = styled.span` +const TimeDuration = styled.time` vertical-align: middle; margin: 0 ${GEL_SPACING_HLF}; `; -const MediaIndicator = ({ duration }) => ( +const MediaIndicator = ({ datetime, duration, offscreenText }) => ( - - + - {duration ? 2:00 : null} + {duration && datetime && offscreenText ? ( + + {offscreenText} + + + ) : null} ); MediaIndicator.propTypes = { + datetime: string, duration: string, + offscreenText: string, }; MediaIndicator.defaultProps = { + datetime: null, duration: null, + offscreenText: null, }; export default MediaIndicator; diff --git a/packages/components/psammead-media-indicator/src/index.stories.jsx b/packages/components/psammead-media-indicator/src/index.stories.jsx index c459282154..bd603ab214 100644 --- a/packages/components/psammead-media-indicator/src/index.stories.jsx +++ b/packages/components/psammead-media-indicator/src/index.stories.jsx @@ -5,6 +5,12 @@ import MediaIndicator from './index'; storiesOf('MediaIndicator', module).add( 'default', - () => , + () => ( + + ), { notes }, ); From 15492acf43d806a3125fe0fc5e0d81615374f95d Mon Sep 17 00:00:00 2001 From: Drew McMillan Date: Wed, 17 Apr 2019 13:06:48 +0100 Subject: [PATCH 03/12] :rocket: Update to be more a11y and improve markup --- .../package-lock.json | 12 ++--- .../psammead-media-indicator/package.json | 4 +- .../src/__snapshots__/index.test.jsx.snap | 50 +++++++++++++++++++ .../psammead-media-indicator/src/index.jsx | 25 +++++++--- .../src/index.stories.jsx | 2 + .../src/index.test.jsx | 8 ++- 6 files changed, 86 insertions(+), 15 deletions(-) diff --git a/packages/components/psammead-media-indicator/package-lock.json b/packages/components/psammead-media-indicator/package-lock.json index d2cb8e2f80..05eeeaa03e 100644 --- a/packages/components/psammead-media-indicator/package-lock.json +++ b/packages/components/psammead-media-indicator/package-lock.json @@ -34,14 +34,14 @@ } }, "@bbc/gel-foundations": { - "version": "0.3.0", - "resolved": "https://registry.npmjs.org/@bbc/gel-foundations/-/gel-foundations-0.3.0.tgz", - "integrity": "sha512-YWnHJ4b7ejvKX5IvTL5ualBCwrAEc/4yfn3hNp8h8v5URnb2zQ8l7lWjbhcxjmbLbVVRqPNa97mkp75ApyxvwQ==" + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/@bbc/gel-foundations/-/gel-foundations-1.2.0.tgz", + "integrity": "sha512-OpEJf42FSgyZRN0e9pJFm9eYmzbhfB7W7EWlrjh46fWlozyVwKA4uaTPUoGHLbXJkMOhPdpfM3gOAxbuM0FnrQ==" }, "@bbc/psammead-styles": { - "version": "0.3.2", - "resolved": "https://registry.npmjs.org/@bbc/psammead-styles/-/psammead-styles-0.3.2.tgz", - "integrity": "sha512-KRAcWam7ztRX0wLww+HIJa9Cif1m1kJ8hrHJn5/ftnwoya8ucSzL1PZQaG8w4OV2XkkyzN6Mv6v1guWhVJ/n/g==" + "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.3", diff --git a/packages/components/psammead-media-indicator/package.json b/packages/components/psammead-media-indicator/package.json index bf78e2b343..a0784fe875 100644 --- a/packages/components/psammead-media-indicator/package.json +++ b/packages/components/psammead-media-indicator/package.json @@ -17,8 +17,8 @@ }, "homepage": "https://github.com/bbc/psammead/blob/latest/packages/components/psammead-media-indicator/README.md", "dependencies": { - "@bbc/gel-foundations": "^0.3.0", - "@bbc/psammead-styles": "^0.3.2", + "@bbc/gel-foundations": "^1.2.0", + "@bbc/psammead-styles": "^0.3.3", "@bbc/psammead-visually-hidden-text": "^0.1.12" }, "devDependencies": { diff --git a/packages/components/psammead-media-indicator/src/__snapshots__/index.test.jsx.snap b/packages/components/psammead-media-indicator/src/__snapshots__/index.test.jsx.snap index 326938c840..4434889152 100644 --- a/packages/components/psammead-media-indicator/src/__snapshots__/index.test.jsx.snap +++ b/packages/components/psammead-media-indicator/src/__snapshots__/index.test.jsx.snap @@ -1,15 +1,50 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`MediaIndicator should render correctly 1`] = ` +.c3 { + -webkit-clip-path: inset(100%); + clip-path: inset(100%); + -webkit-clip: rect(1px,1px,1px,1px); + clip: rect(1px,1px,1px,1px); + height: 1px; + overflow: hidden; + position: absolute; + width: 1px; +} + .c0 { padding: 0.5rem 0.25rem; background-color: #FFFFFF; display: inline-block; + font-family: ReithSans,Helvetica,Arial,sans-serif; + font-size: 0.75rem; + line-height: 1rem; + color: #222222; } .c1 { vertical-align: middle; margin: 0 0.25rem; + fill: #222222; +} + +.c2 { + vertical-align: middle; + margin: 0 0.25rem; +} + +@media (min-width:20rem) and (max-width:37.4375rem) { + .c0 { + font-size: 0.75rem; + line-height: 1rem; + } +} + +@media (min-width:37.5rem) { + .c0 { + font-size: 0.75rem; + line-height: 1rem; + } } `; diff --git a/packages/components/psammead-media-indicator/src/index.jsx b/packages/components/psammead-media-indicator/src/index.jsx index fe252f7bfd..7fab2531c9 100644 --- a/packages/components/psammead-media-indicator/src/index.jsx +++ b/packages/components/psammead-media-indicator/src/index.jsx @@ -1,19 +1,25 @@ import React from 'react'; import styled from 'styled-components'; -import { string } from 'prop-types'; -import { C_WHITE } from '@bbc/psammead-styles/colours'; -import { GEL_SPACING, GEL_SPACING_HLF } from '@bbc/gel-foundations/spacings'; +import { string, shape } from 'prop-types'; +import { C_WHITE, C_EBON } from '@bbc/psammead-styles/colours'; import VisuallyHiddenText from '@bbc/psammead-visually-hidden-text'; +import { GEL_SPACING, GEL_SPACING_HLF } from '@bbc/gel-foundations/spacings'; +import { getMinion, GEL_FF_REITH_SANS } from '@bbc/gel-foundations/typography'; +import { scriptPropType } from '@bbc/gel-foundations/prop-types'; const MediaIndicatorWrapper = styled.div` padding: ${GEL_SPACING} ${GEL_SPACING_HLF}; background-color: ${C_WHITE}; display: inline-block; + font-family: ${GEL_FF_REITH_SANS}; + ${props => getMinion(props.script)}; + color: ${C_EBON}; `; const PlayIcon = styled.svg` vertical-align: middle; margin: 0 ${GEL_SPACING_HLF}; + fill: ${C_EBON}; `; const TimeDuration = styled.time` @@ -21,9 +27,15 @@ const TimeDuration = styled.time` margin: 0 ${GEL_SPACING_HLF}; `; -const MediaIndicator = ({ datetime, duration, offscreenText }) => ( - -