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

Media Indicator - Pass dir #3109

Merged
merged 5 commits into from
Feb 11, 2020
+62 −33
Merged

Media Indicator - Pass dir #3109

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
07750fa
Pass dir prop to Media Indicator
DenisHdz Feb 11, 2020
4f6e4e9
Update PR number
DenisHdz Feb 11, 2020
8fa330e
Use localised text
DenisHdz Feb 11, 2020
7a53cdd
Pass dir to rtl test
DenisHdz Feb 11, 2020
dd15ffc
Update README
DenisHdz Feb 11, 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 |
| ------- | ----------- |
| 4.0.2 | [PR#3109](https://github.com/bbc/psammead/pull/3109) Pass `dir` to the `MediaIndicator`|
| 4.0.1 | [PR#3075](https://github.com/bbc/psammead/pull/3075) Pass `script` to the `MediaIndicator`|
| 4.0.0 | [PR#3062](https://github.com/bbc/psammead/pull/3062) Pass Time element as a child and remove spacing from the `MediaIndicatorWrapper`|
| 3.0.0 | [PR#3029](https://github.com/bbc/psammead/pull/3029) Add prop `isInline` for displaying media indicator inline. Remove boolean prop `indexAlsos` since it should be replaced with `isInline` |
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": "4.0.1",
"version": "4.0.2",
"main": "dist/index.js",
"module": "esm/index.js",
"sideEffects": false,
Expand Down
6 changes: 6 additions & 0 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 @@ -50,6 +50,7 @@ exports[`MediaIndicator should render audio indicator correctly 1`] = `
<div
aria-hidden="true"
class="c0"
dir="ltr"
>
<div
class="c1"
Expand Down Expand Up @@ -123,6 +124,7 @@ exports[`MediaIndicator should render photogallery correctly 1`] = `
<div
aria-hidden="true"
class="c0"
dir="ltr"
>
<div
class="c1"
Expand Down Expand Up @@ -182,6 +184,7 @@ exports[`MediaIndicator should render video by default 1`] = `
<div
aria-hidden="true"
class="c0"
dir="ltr"
>
<div
class="c1"
Expand Down Expand Up @@ -252,6 +255,7 @@ exports[`MediaIndicator should render video indicator correctly 1`] = `
<div
aria-hidden="true"
class="c0"
dir="ltr"
>
<div
class="c1"
Expand Down Expand Up @@ -324,6 +328,7 @@ exports[`MediaIndicator should render video indicator correctly when inline 1`]
<div
aria-hidden="true"
class="c0"
dir="ltr"
>
<div
class="c1"
Expand Down Expand Up @@ -396,6 +401,7 @@ exports[`MediaIndicator should render video indicator correctly when inline on R
<div
aria-hidden="true"
class="c0"
dir="ltr"
DenisHdz marked this conversation as resolved.
Show resolved Hide resolved
>
<div
class="c1"
Expand Down
5 changes: 4 additions & 1 deletion 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 @@ -35,11 +35,12 @@ const FlexWrapper = styled.div`
height: 100%;
`;

const MediaIndicator = ({ type, script, service, isInline, children }) => (
const MediaIndicator = ({ type, script, service, dir, isInline, children }) => (
<StyledMediaIndicator
aria-hidden="true"
script={script}
service={service}
dir={dir}
isInline={isInline}
>
<FlexWrapper>
Expand All @@ -53,12 +54,14 @@ MediaIndicator.propTypes = {
type: oneOf(['video', 'audio', 'photogallery']),
script: shape(scriptPropType).isRequired,
service: string.isRequired,
dir: oneOf(['ltr', 'rtl']),
isInline: bool,
children: node,
};

MediaIndicator.defaultProps = {
type: 'video',
dir: 'ltr',
isInline: false,
children: null,
};
Expand Down
44 changes: 31 additions & 13 deletions packages/components/psammead-media-indicator/src/index.stories.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,15 +31,20 @@ storiesOf('Components|MediaIndicator/Video', module)
.addDecorator(withServicesKnob())
.add(
'video without duration',
({ script, service }) => (
<MediaIndicator type="video" script={script} service={service} />
({ script, service, dir }) => (
<MediaIndicator
type="video"
script={script}
dir={dir}
service={service}
/>
),
{ notes },
)
.add(
'video with duration',
({ script, service }) => (
<MediaIndicator type="video" script={script} service={service}>
({ script, service, dir }) => (
<MediaIndicator type="video" script={script} service={service} dir={dir}>
<TimeDuration dateTime={text('datetime', 'PT2M15S')}>
{text('duration', '2:15')}
</TimeDuration>
Expand All @@ -49,12 +54,13 @@ storiesOf('Components|MediaIndicator/Video', module)
)
.add(
'inline video media indicator with headline',
({ script, service }) => (
({ script, service, dir }) => (
<>
<MediaIndicator
type="video"
script={script}
service={service}
dir={dir}
isInline={boolean('inline?', true)}
/>
<StyledHeadline script={script} service={service} promoHasImage={false}>
Expand All @@ -73,15 +79,20 @@ storiesOf('Components|MediaIndicator/Audio', module)
.addDecorator(withServicesKnob())
.add(
'audio without duration',
({ script, service }) => (
<MediaIndicator type="audio" script={script} service={service} />
({ script, service, dir }) => (
<MediaIndicator
type="audio"
script={script}
service={service}
dir={dir}
/>
),
{ notes },
)
.add(
'audio with duration',
({ script, service }) => (
<MediaIndicator type="audio" script={script} service={service}>
({ script, service, dir }) => (
<MediaIndicator type="audio" script={script} service={service} dir={dir}>
<time dateTime={text('datetime', 'PT2M15S')}>
{text('duration', '2:15')}
</time>
Expand All @@ -91,12 +102,13 @@ storiesOf('Components|MediaIndicator/Audio', module)
)
.add(
'inline audio media indicator with headline',
({ script, service }) => (
({ script, service, dir }) => (
<>
<MediaIndicator
type="audio"
script={script}
service={service}
dir={dir}
isInline={boolean('inline?', true)}
/>
<StyledHeadline script={script} service={service} promoHasImage={false}>
Copy link
Contributor

Choose a reason for hiding this comment

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

Could you please also update the text 'example text' to use the localised text from Storybook helpers? It'd particularly be useful when looking at RTL services. https://github.com/bbc/psammead/blob/4f6e4e9f621d3c917cfbeeb7b7727468b703f608/packages/components/psammead-media-indicator/src/index.stories.jsx#L116

Expand All @@ -115,19 +127,25 @@ storiesOf('Components|MediaIndicator/Photo', module)
.addDecorator(withServicesKnob())
.add(
'photogallery',
({ script, service }) => (
<MediaIndicator type="photogallery" script={script} service={service} />
({ script, service, dir }) => (
<MediaIndicator
type="photogallery"
script={script}
service={service}
dir={dir}
/>
),
{ notes },
)
.add(
'inline photogallery with headline',
({ script, service }) => (
({ script, service, dir }) => (
<>
<MediaIndicator
type="photogallery"
script={script}
service={service}
dir={dir}
isInline={boolean('inline?', true)}
/>
<StyledHeadline script={script} service={service} promoHasImage={false}>
Expand Down