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

Inline Media Indicator #3029

Merged
merged 26 commits into from
Feb 4, 2020
Merged

Inline Media Indicator #3029

Show file tree
Hide file tree
Changes from 16 commits
Commits
Show all changes
26 commits
Select commit Hold shift + click to select a range
652ff96
inline media indicator
Jan 29, 2020
cb06b2a
further changes
Jan 29, 2020
0cf4498
use a prop instead
Jan 29, 2020
62ea26c
add stories for all types
Jan 29, 2020
8344bda
:camera:
Jan 29, 2020
9b9cce7
package.json package-lock and CHANGELOG update
Jan 29, 2020
fd6f8f9
Merge branch 'latest' of github.com:bbc/psammead into inline-media-in…
Jan 29, 2020
6761bd4
remove extra semi-colon
Jan 30, 2020
909e80d
Merge branch 'latest' into inline-media-indicator
Jan 30, 2020
c56d2b0
vertical align for IE11
Jan 30, 2020
41d434f
Merge branch 'inline-media-indicator' of github.com:bbc/psammead into…
Jan 30, 2020
6e91f86
add tests for inline
Jan 30, 2020
1268a19
Merge branch 'latest' into inline-media-indicator
Jan 30, 2020
63d2ffc
Merge branch 'latest' into inline-media-indicator
Jan 30, 2020
d285b40
update README
Jan 31, 2020
009af95
Merge branch 'latest' into inline-media-indicator
Jan 31, 2020
a8f619e
Update packages/components/psammead-media-indicator/CHANGELOG.md
Feb 3, 2020
f8537de
do not display duration when inline, add children
Feb 3, 2020
4f437da
remove old test - new ones exist
Feb 3, 2020
4876fd2
:camera:
Feb 3, 2020
f725a7c
remove IndexAlsos prop
Feb 3, 2020
138ce80
update stories
Feb 3, 2020
3b69848
remove unused props
Feb 3, 2020
ed0dd14
Merge branch 'latest' into inline-media-indicator
amywalkerdev Feb 3, 2020
1bab9a3
Merge branch 'latest' into inline-media-indicator
DenisHdz Feb 4, 2020
f8bba97
Merge branch 'latest' into inline-media-indicator
PriyaKR Feb 4, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/components/psammead-media-indicator/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
<!-- prettier-ignore -->
| Version | Description |
| ------- | ----------- |
| 3.0.0 | [PR#3029](https://github.com/bbc/psammead/pull/3029) Add prop for displaying media indicator inline |
j-pendlebury marked this conversation as resolved.
Show resolved Hide resolved
| 2.6.27 | [PR#3030](https://github.com/bbc/psammead/pull/3030) Talos - Bump Dependencies - @bbc/psammead-styles, @bbc/psammead-assets |
| 2.6.26 | [PR#2996](https://github.com/bbc/psammead/pull/2996) Talos - Bump Dependencies - @bbc/psammead-assets |
| 2.6.25 | [PR#2990](https://github.com/bbc/psammead/pull/2990) Use `GEL_SPACING_QUAD` in `MediaIndicatorWrapper` |
Expand Down
4 changes: 2 additions & 2 deletions packages/components/psammead-media-indicator/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ The `MediaIndicator` component provides a 'play', 'audio' or 'camera' icon as we
| type | string | No | 'video' | 'audio' |
| topStory | boolean | No | false | true |
| service | string | Yes | N/A | `'news'` |
| indexAlsos | boolean | No | N/A | true |
| isInline | boolean | No | false | true |

### Supported `type`s

Expand All @@ -33,7 +33,7 @@ The typical use-case of this component is on top of images within promos for art

For top story promos, we should pass the `topStory` prop to the `Media Indicator` to keep the same padding, otherwise this will be modified under 400px.

Top story promos can also have related stories links called `Index Alsos`. When an Index Also item is a video, audio or photogallery, an icon should be displayed with the content using the `MediaIndicator` component passing the `indexAlsos` prop.
Top story promos can also have related stories links called `Index Alsos`. When an Index Also item is a video, audio or photogallery, an icon should be displayed with the content using the `MediaIndicator` component passing the `isInline` prop.

```jsx
import MediaIndicator from '@bbc/psammead-media-indicator';
Expand Down
2 changes: 1 addition & 1 deletion packages/components/psammead-media-indicator/package-lock.json
View file
Open in desktop

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-media-indicator/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@bbc/psammead-media-indicator",
"version": "2.6.27",
"version": "3.0.0",
"main": "dist/index.js",
"module": "esm/index.js",
"sideEffects": false,
Expand Down
218 changes: 203 additions & 15 deletions packages/components/psammead-media-indicator/src/__snapshots__/index.test.jsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@ exports[`MediaIndicator - Top Story should render a top story audio promo render
`;

exports[`MediaIndicator should render Index Also video indicator correctly 1`] = `
.c1 {
.c2 {
vertical-align: middle;
margin: 0 0.25rem;
color: #222222;
Expand All @@ -82,27 +82,59 @@ exports[`MediaIndicator should render Index Also video indicator correctly 1`] =
height: 0.75rem;
}

.c0 > svg {
margin: 0;
.c0 {
padding: 0.5rem 0.25rem;
background-color: #FFFFFF;
display: block;
font-family: ReithSans,Helvetica,Arial,sans-serif;
font-weight: 400;
font-style: normal;
font-size: 0.75rem;
line-height: 1rem;
color: #222222;
height: 2rem;
}

.c1 {
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%;
}

@media (max-width:24.9375rem) {
.c0 {
height: 1.25rem;
padding: 0.25rem 0.25rem 0;
}
}

<span
<div
aria-hidden="true"
class="c0"
>
<svg
aria-hidden="true"
<div
class="c1"
focusable="false"
height="12px"
viewBox="0 0 32 32"
width="12px"
>
<polygon
points="3,32 29,16 3,0"
/>
</svg>
</span>
<svg
aria-hidden="true"
class="c2"
focusable="false"
height="12px"
viewBox="0 0 32 32"
width="12px"
>
<polygon
points="3,32 29,16 3,0"
/>
</svg>
</div>
</div>
`;

exports[`MediaIndicator should render audio correctly without duration details 1`] = `
Expand Down Expand Up @@ -527,3 +559,159 @@ exports[`MediaIndicator should render video indicator correctly 1`] = `
</div>
</div>
`;

exports[`MediaIndicator should render video indicator correctly when inline 1`] = `
.c2 {
vertical-align: middle;
margin: 0 0.25rem;
color: #222222;
fill: currentColor;
width: 0.75rem;
height: 0.75rem;
}

.c0 {
padding: 0.5rem 0.25rem;
background-color: #FFFFFF;
display: block;
font-family: ReithSans,Helvetica,Arial,sans-serif;
font-weight: 400;
font-style: normal;
font-size: 0.75rem;
line-height: 1rem;
color: #222222;
height: 2rem;
display: inline-block;
vertical-align: middle;
}

.c1 {
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%;
}

.c3 {
vertical-align: middle;
margin: 0 0.25rem;
}

@media (max-width:24.9375rem) {
.c0 {
height: 1.25rem;
padding: 0.25rem 0.25rem 0;
}
}

<div
aria-hidden="true"
class="c0"
>
<div
class="c1"
>
<svg
aria-hidden="true"
class="c2"
focusable="false"
height="12px"
viewBox="0 0 32 32"
width="12px"
>
<polygon
points="3,32 29,16 3,0"
/>
</svg>
<time
class="c3"
datetime="PT2M15S"
>
2:15
</time>
</div>
</div>
`;

exports[`MediaIndicator should render video indicator correctly when inline on RTL 1`] = `
.c2 {
vertical-align: middle;
margin: 0 0.25rem;
color: #222222;
fill: currentColor;
width: 0.75rem;
height: 0.75rem;
}

.c0 {
padding: 0.5rem 0.25rem;
background-color: #FFFFFF;
display: block;
font-family: "BBC Nassim Persian",Arial,Verdana,Geneva,Helvetica,sans-serif;
font-weight: 400;
font-style: normal;
font-size: 0.75rem;
line-height: 1rem;
color: #222222;
height: 2rem;
display: inline-block;
vertical-align: middle;
}

.c1 {
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%;
}

.c3 {
vertical-align: middle;
margin: 0 0.25rem;
}

@media (max-width:24.9375rem) {
.c0 {
height: 1.25rem;
padding: 0.25rem 0.25rem 0;
}
}

<div
aria-hidden="true"
class="c0"
>
<div
class="c1"
>
<svg
aria-hidden="true"
class="c2"
focusable="false"
height="12px"
viewBox="0 0 32 32"
width="12px"
>
<polygon
points="3,32 29,16 3,0"
/>
</svg>
<time
class="c3"
datetime="PT2M15S"
>
2:15
</time>
</div>
</div>
`;
51 changes: 24 additions & 27 deletions packages/components/psammead-media-indicator/src/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,13 @@ const MediaIndicatorWrapper = styled.div`
color: ${C_EBON};
height: ${GEL_SPACING_QUAD};

${({ isInline }) =>
isInline &&
css`
display: inline-block;
vertical-align: middle;
`}

${({ topStory }) =>
!topStory &&
css`
Expand All @@ -42,54 +49,44 @@ const TimeDuration = styled.time`
margin: 0 ${GEL_SPACING_HLF};
`;

const IndexAlsosMediaIndicator = styled.span`
Copy link
Contributor

@DenisHdz DenisHdz Jan 30, 2020 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We will have to also update the IndexAlsos straight after to use the MediaIndicatorWrapper with the isInline prop instead since this IndexAlsosMediaIndicator won't exist anymore.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Created Psammead and Simorgh issues 👍

& > svg {
margin: 0;
}
`;

const MediaIndicator = ({
datetime,
duration,
type,
topStory,
service,
indexAlsos,
}) =>
indexAlsos ? (
<IndexAlsosMediaIndicator aria-hidden="true">
isInline,
}) => (
<MediaIndicatorWrapper
aria-hidden="true"
topStory={topStory}
service={service}
isInline={isInline}
>
<FlexWrapper>
{mediaIcons[type]}
</IndexAlsosMediaIndicator>
) : (
<MediaIndicatorWrapper
aria-hidden="true"
topStory={topStory}
service={service}
>
<FlexWrapper>
{mediaIcons[type]}
{duration && datetime && (
<TimeDuration dateTime={datetime}>{duration}</TimeDuration>
)}
</FlexWrapper>
</MediaIndicatorWrapper>
);
{duration && datetime && (
<TimeDuration dateTime={datetime}>{duration}</TimeDuration>
sareh marked this conversation as resolved.
Show resolved Hide resolved
)}
</FlexWrapper>
j-pendlebury marked this conversation as resolved.
Show resolved Hide resolved
</MediaIndicatorWrapper>
);

MediaIndicator.propTypes = {
datetime: string,
duration: string,
type: oneOf(['video', 'audio', 'photogallery']),
topStory: bool,
service: string.isRequired,
indexAlsos: bool,
isInline: bool,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should include a small update to the README if we're adding or removing props 😃

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

All done 👍

};

MediaIndicator.defaultProps = {
datetime: null,
duration: null,
type: 'video',
topStory: false,
indexAlsos: false,
isInline: false,
};

export default MediaIndicator;
Loading