Skip to content
This repository has been archived by the owner on Aug 13, 2023. It is now read-only.

Commit

Permalink
Merge pull request #3073 from bbc/use-updated-media-indicator
Browse files Browse the repository at this point in the history
Use updated media indicator in Story Promo and Index Alsos
  • Loading branch information
sareh authored Feb 10, 2020
2 parents 1404241 + 713afe3 commit 7e33781
Show file tree
Hide file tree
Showing 19 changed files with 416 additions and 158 deletions.
1 change: 1 addition & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
<!-- prettier-ignore -->
| Version | Description |
|---------|-------------|
| 2.0.76 | [PR#3073](https://github.com/bbc/psammead/pull/3073) Update `@bbc/psammead-media-indicator` to major version 4 & update relevant usage in packages. |
| 2.0.75 | [PR#3105](https://github.com/bbc/psammead/pull/3105) Use Node Image with version v12.15.0 & npm version 6.13.7 |
| 2.0.74 | [PR#3104](https://github.com/bbc/psammead/pull/3104) Bumping dependencies |
| 2.0.73 | [PR#3082](https://github.com/bbc/psammead/pull/3082) Talos - Bump Dependencies - @bbc/psammead-grid, @bbc/psammead-locales, @bbc/psammead-timestamp-container |
Expand Down
8 changes: 4 additions & 4 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 2 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@bbc/psammead",
"version": "2.0.75",
"version": "2.0.76",
"description": "Core Components Library Developed & Maintained By The Articles and Reach & Languages Team",
"main": "index.js",
"private": true,
Expand Down Expand Up @@ -59,7 +59,7 @@
"@bbc/psammead-image-placeholder": "^1.2.33",
"@bbc/psammead-inline-link": "^1.3.20",
"@bbc/psammead-locales": "^4.1.2",
"@bbc/psammead-media-indicator": "^2.6.27",
"@bbc/psammead-media-indicator": "^4.0.1",
"@bbc/psammead-paragraph": "^2.2.24",
"@bbc/psammead-story-promo": "2.8.0-alpha.1",
"@bbc/psammead-storybook-helpers": "^8.2.3",
Expand Down
1 change: 1 addition & 0 deletions packages/components/psammead-grid/CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
<!-- prettier-ignore -->
| Version | Description |
|---------|-------------|
| 1.1.7 | [PR#3073](https://github.com/bbc/psammead/pull/3073) Update Grid Stories to include new major version of MediaIndicator |
| 1.1.6 | [PR#3076](https://github.com/bbc/psammead/pull/3076) Add `parentEnableGelGutters` to documentation |
| 1.1.5 | [PR#3030](https://github.com/bbc/psammead/pull/3030) Talos - Bump Dependencies - @bbc/psammead-styles |
| 1.1.4 | [PR#2978](https://github.com/bbc/psammead/pull/2978) Talos - Bump Dependencies - @bbc/gel-foundations |
Expand Down
2 changes: 1 addition & 1 deletion packages/components/psammead-grid/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion packages/components/psammead-grid/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@bbc/psammead-grid",
"version": "1.1.6",
"version": "1.1.7",
"description": "Grid component",
"main": "dist/index.js",
"module": "esm/index.js",
Expand Down
26 changes: 17 additions & 9 deletions packages/components/psammead-grid/src/index.stories.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,16 @@ import {
buildRTLSubstories,
} from '@bbc/psammead-storybook-helpers';
import Image from '@bbc/psammead-image';
import MediaIndicator from '@bbc/psammead-media-indicator';
import StoryPromo, { Headline, Summary, Link } from '@bbc/psammead-story-promo';
import IndexAlsosContainer from '../../psammead-story-promo/testHelpers/IndexAlsosContainer';
import relatedItems from '../../psammead-story-promo/testHelpers/relatedItems';
import Grid from '.';
import { ExampleImage, ExampleParagraph } from './testHelpers';
import {
ExampleImage,
ExampleParagraph,
ExampleMediaIndicator,
ExampleTime,
} from './testHelpers';
import notes from '../README.md';

const STORY_KIND = 'Components|Grid';
Expand Down Expand Up @@ -1167,13 +1171,16 @@ storiesOf(STORY_KIND, module)
({ service, script, dir, text }) => {
// eslint-disable-next-line react/prop-types
const generateStory = ({ topStory, alsoItems = null, mediaType }) => {
const MediaIndicatorComponent = type => (
<MediaIndicator
duration={type !== 'photogallery' && '2:15'}
datetime="PT2M15S"
const MediaIndicatorComponent = () => (
<ExampleMediaIndicator
script={script}
service={service}
type={type}
/>
type={mediaType}
>
{mediaType !== 'photogallery' && (
<ExampleTime dateTime="PT2M15S">2:15</ExampleTime>
)}
</ExampleMediaIndicator>
);

const Info = (
Expand Down Expand Up @@ -1210,7 +1217,8 @@ storiesOf(STORY_KIND, module)
image={Img}
info={Info}
mediaIndicator={
mediaType && MediaIndicatorComponent(mediaType, service)
mediaType &&
MediaIndicatorComponent({ script, service, mediaType })
}
topStory={topStory}
/>
Expand Down
9 changes: 8 additions & 1 deletion packages/components/psammead-grid/src/testHelpers.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,8 @@ import styled from 'styled-components';
import Paragraph from '@bbc/psammead-paragraph';
import { cyrillicAndLatin } from '@bbc/gel-foundations/scripts';
import Image from '@bbc/psammead-image';
import { GEL_SPACING } from '@bbc/gel-foundations/dist/spacings';
import { GEL_SPACING_HLF, GEL_SPACING } from '@bbc/gel-foundations/spacings';
import MediaIndicator from '@bbc/psammead-media-indicator';

export const ExampleParagraph = ({ identifier }) => (
<Paragraph script={cyrillicAndLatin} service="news">
Expand Down Expand Up @@ -38,6 +39,12 @@ export const ExampleImage = () => (
</ImageSpacing>
);

export const ExampleMediaIndicator = styled(MediaIndicator)``;

export const ExampleTime = styled.time`
padding: 0 ${GEL_SPACING_HLF};
`;

ExampleParagraph.propTypes = {
identifier: string,
};
Expand Down
1 change: 1 addition & 0 deletions packages/components/psammead-story-promo/CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
<!-- prettier-ignore -->
| Version | Description |
| ------- | ----------- |
| 4.0.0-alpha.8 | [PR#3073](https://github.com/bbc/psammead/pull/3073) Use new major version of MediaIndicator. StoryPromo has updated styling around the MediaIndicator. Index Alsos test helper now using prop `isInline` for the MediaIndicator. |
| 4.0.0-alpha.7 | [PR#3027](https://github.com/bbc/psammead/pull/3027) Use mobile and tablet stylings |
| 4.0.0-alpha.6 | [PR#3030](https://github.com/bbc/psammead/pull/3030) Talos - Bump Dependencies - @bbc/psammead-styles |
| 4.0.0-alpha.5 | [PR#3026](https://github.com/bbc/psammead/pull/3026) Apply Pica to the regular story promo headline across all breakpoints |
Expand Down
2 changes: 1 addition & 1 deletion packages/components/psammead-story-promo/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion packages/components/psammead-story-promo/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@bbc/psammead-story-promo",
"version": "4.0.0-alpha.7",
"version": "4.0.0-alpha.8",
"main": "dist/index.js",
"module": "esm/index.js",
"sideEffects": false,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,29 @@ exports[`Index Alsos should render multiple correctly 1`] = `
height: 0.75rem;
}
.c6 > svg {
margin: 0;
.c5 {
color: #222222;
background-color: #FFFFFF;
font-family: ReithSans,Helvetica,Arial,sans-serif;
font-weight: 400;
font-style: normal;
font-size: 0.75rem;
line-height: 1rem;
display: inline-block;
vertical-align: middle;
padding-right: 0.5rem;
}
.c6 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
height: 100%;
}
.c1 {
Expand Down Expand Up @@ -43,10 +64,6 @@ exports[`Index Alsos should render multiple correctly 1`] = `
margin: 0;
}
.c5 {
padding-right: 0.5rem;
}
.c8 {
display: inline;
vertical-align: middle;
Expand All @@ -73,6 +90,24 @@ exports[`Index Alsos should render multiple correctly 1`] = `
color: #6E6E73;
}
.c4 svg {
margin: 0;
}
@media (min-width:20rem) and (max-width:37.4375rem) {
.c5 {
font-size: 0.75rem;
line-height: 1rem;
}
}
@media (min-width:37.5rem) {
.c5 {
font-size: 0.75rem;
line-height: 1rem;
}
}
@media (min-width:20rem) and (max-width:37.4375rem) {
.c4 {
font-size: 0.875rem;
Expand Down Expand Up @@ -108,12 +143,11 @@ exports[`Index Alsos should render multiple correctly 1`] = `
class="c4"
href="/hausa/labarai-48916590"
>
<span
<div
aria-hidden="true"
class="c5"
dir="ltr"
>
<span
aria-hidden="true"
<div
class="c6"
>
<svg
Expand All @@ -128,8 +162,8 @@ exports[`Index Alsos should render multiple correctly 1`] = `
points="3,32 29,16 3,0"
/>
</svg>
</span>
</span>
</div>
</div>
<span
class=""
role="text"
Expand Down Expand Up @@ -177,8 +211,29 @@ exports[`Index Alsos should render one correctly 1`] = `
height: 0.75rem;
}
.c5 > svg {
margin: 0;
.c4 {
color: #222222;
background-color: #FFFFFF;
font-family: ReithSans,Helvetica,Arial,sans-serif;
font-weight: 400;
font-style: normal;
font-size: 0.75rem;
line-height: 1rem;
display: inline-block;
vertical-align: middle;
padding-right: 0.5rem;
}
.c5 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
height: 100%;
}
.c1 {
Expand All @@ -204,10 +259,6 @@ exports[`Index Alsos should render one correctly 1`] = `
padding: 0.5rem 0;
}
.c4 {
padding-right: 0.5rem;
}
.c7 {
display: inline;
vertical-align: middle;
Expand All @@ -234,6 +285,24 @@ exports[`Index Alsos should render one correctly 1`] = `
color: #6E6E73;
}
.c3 svg {
margin: 0;
}
@media (min-width:20rem) and (max-width:37.4375rem) {
.c4 {
font-size: 0.75rem;
line-height: 1rem;
}
}
@media (min-width:37.5rem) {
.c4 {
font-size: 0.75rem;
line-height: 1rem;
}
}
@media (min-width:20rem) and (max-width:37.4375rem) {
.c3 {
font-size: 0.875rem;
Expand Down Expand Up @@ -264,12 +333,11 @@ exports[`Index Alsos should render one correctly 1`] = `
class="c3"
href="/hausa/labarai-48916590"
>
<span
<div
aria-hidden="true"
class="c4"
dir="ltr"
>
<span
aria-hidden="true"
<div
class="c5"
>
<svg
Expand All @@ -284,8 +352,8 @@ exports[`Index Alsos should render one correctly 1`] = `
points="3,32 29,16 3,0"
/>
</svg>
</span>
</span>
</div>
</div>
<span
class=""
role="text"
Expand Down
Loading

0 comments on commit 7e33781

Please sign in to comment.