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
Merged

Media Indicator - Pass dir #3109

Show file tree
Hide file tree
Changes from all 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
13 changes: 7 additions & 6 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 @@ -13,11 +13,12 @@ The `MediaIndicator` component provides a 'play', 'audio' or 'camera' icon as we
<!-- prettier-ignore -->
| Argument | Type | Required | Default | Example |
| ---------- | ------- | -------- | ------- | ------------ |
| type | string | No | 'video' | 'audio' |
| type | string | no | 'video' | 'audio' |
| script | object | yes | N/A | `{ canon: { groupA: { fontSize: '28', lineHeight: '32',}, groupB: { fontSize: '32', lineHeight: '36', }, groupD: { fontSize: '44', lineHeight: '48', }, }, trafalgar: { groupA: { fontSize: '20', lineHeight: '24', }, groupB: { fontSize: '24', lineHeight: '28', }, groupD: { fontSize: '32', lineHeight: '36', }, }, }` |
| service | string | Yes | N/A | `'news'` |
| isInline | boolean | No | false | true |
| children | node | No | null | <IndexAlsos> |
| service | string | yes | N/A | `'news'` |
| dir | string | no | `'ltr'` | `'rtl'` |
| isInline | boolean | no | false | true |
| children | node | no | null | <IndexAlsos> |

### Supported `type`s

Expand All @@ -39,7 +40,7 @@ import { latin } from '@bbc/gel-foundations/scripts';
<MediaIndicator type="audio" script={latin} service="news" />;
```

When using this component ensure you add the relevant spacing.
When using this component ensure you add the relevant spacing.

E.g.

Expand All @@ -53,7 +54,7 @@ const TimeDuration = styled.time`
`;

<MediaIndicator type="audio" script={latin} service="news">
<TimeDuration datetime="PT2M15S">2:15</TimeDuration>
<TimeDuration datetime="PT2M15S">2:15</TimeDuration>
</MediaIndicator>;
```

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
8 changes: 7 additions & 1 deletion 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 @@ -364,7 +369,7 @@ exports[`MediaIndicator should render video indicator correctly when inline on R
line-height: 1rem;
display: inline-block;
vertical-align: middle;
padding-right: 0.5rem;
padding-left: 0.5rem;
}

.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="rtl"
>
<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
56 changes: 34 additions & 22 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,18 +54,17 @@ storiesOf('Components|MediaIndicator/Video', module)
)
.add(
'inline video media indicator with headline',
({ script, service }) => (
({ longText: textSnippet, script, service, dir }) => (
<>
<MediaIndicator
type="video"
script={script}
service={service}
dir={dir}
isInline={boolean('inline?', true)}
/>
<StyledHeadline script={script} service={service} promoHasImage={false}>
<Link href="https://www.bbc.co.uk/news">
{text('extra text', 'example text')}
</Link>
<Link href="https://www.bbc.co.uk/news">{textSnippet}</Link>
</StyledHeadline>
</>
),
Expand All @@ -73,15 +77,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,18 +100,17 @@ storiesOf('Components|MediaIndicator/Audio', module)
)
.add(
'inline audio media indicator with headline',
({ script, service }) => (
({ longText: textSnippet, 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

<Link href="https://www.bbc.co.uk/news">
{text('extra text', 'example text')}
</Link>
<Link href="https://www.bbc.co.uk/news">{textSnippet}</Link>
</StyledHeadline>
</>
),
Expand All @@ -115,25 +123,29 @@ 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 }) => (
({ longText: textSnippet, script, service, dir }) => (
<>
<MediaIndicator
type="photogallery"
script={script}
service={service}
dir={dir}
isInline={boolean('inline?', true)}
/>
<StyledHeadline script={script} service={service} promoHasImage={false}>
<Link href="https://www.bbc.co.uk/news">
{text('extra text', 'example text')}
</Link>
<Link href="https://www.bbc.co.uk/news">{textSnippet}</Link>
</StyledHeadline>
</>
),
Expand Down
8 changes: 7 additions & 1 deletion packages/components/psammead-media-indicator/src/index.test.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,13 @@ describe('MediaIndicator', () => {

shouldMatchSnapshot(
'should render video indicator correctly when inline on RTL',
<MediaIndicator type="video" script={arabic} service="persian" isInline />,
<MediaIndicator
type="video"
script={arabic}
service="persian"
dir="rtl"
isInline
/>,
);

shouldMatchSnapshot(
Expand Down