Use updated media indicator in Story Promo and Index Alsos #3073
Conversation
…e media indicator with relevant spacing
… into use-updated-media-indicator
…our of heading below media indicator in No Image example
Co-Authored-By: Einstein Njoroge <[email protected]>
| @@ -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 | | |||
There was a problem hiding this comment.
After this PR gets merged, we have to bump the psammead-story-promo in the root package.json, to make sure these changes are applied correctly.
| @@ -75,9 +77,14 @@ Info.defaultProps = { | |||
| dir: 'ltr', | |||
| promoHasImage: true, | |||
| }; | |||
|
|
|||
| const TimeDuration = styled.time` | |||
There was a problem hiding this comment.
Shall this be like the one defined in the stories https://github.com/bbc/psammead/pull/3073/files#diff-02bd1c67c83bcf7bc0fac79c4d66fb3bR27?
…s will be added when the updated psammead-story-promo is pulled in at the top-level psammead directory to be used in stories
… into use-updated-media-indicator
| const mediaInfo = ( | ||
| <MediaIndicator duration="2:15" datetime="PT2M15S" service="news" /> | ||
| <MediaIndicator script={latin} service="news"> | ||
| <StyledTime datetime="PT2M15S">2:15</StyledTime> |
There was a problem hiding this comment.
Updating to pass in a Time component into Media Indicator in our test.
| isInline={mediaIndicatorIsInline} | ||
| > | ||
| {!mediaIndicatorIsInline && ( | ||
| <StyledTime dateTime="PT2M15S">2:15</StyledTime> |
There was a problem hiding this comment.
Updating to pass in a Time component to our Media Indicator for these stories.
| @@ -110,6 +134,9 @@ export const Headline = styled.h3` | |||
| padding-bottom: ${GEL_SPACING}; | |||
| ${({ service }) => getSerifMedium(service)} | |||
| ${({ script, promoType }) => script && headlineTypography(script)[promoType]} | |||
| ${({ promoHasImage }) => | |||
| !promoHasImage && | |||
| `display: inline;`} /* Needed for aligning Media Indicator with Headline */ | |||
There was a problem hiding this comment.
If promo does not have an image, then the headline needs to be displayed inline with the media indicator.
| ${({ displayImage }) => | ||
| !displayImage && | ||
| `>div{ display:inline-block; padding: 0; vertical-align:initial; } `} | ||
| `>div{ display:inline-block; vertical-align:initial; } | ||
| & svg{ margin: 0; }`} |
There was a problem hiding this comment.
Resetting margin on the Media Icon svg to 0 when there is no image (e.g. the media indicator is inline)
| @@ -54,24 +48,23 @@ const StyledIndexAlsosLink = styled.a` | |||
| &:visited { | |||
| color: ${C_METAL}; | |||
| } | |||
|
|
|||
| & svg { margin: 0; } /* Reset Media Indicator SVG margin */ | |||
There was a problem hiding this comment.
Setting margin on the svg within an index also to 0.
… into use-updated-media-indicator
|
Looks good to me. |
Resolves #3039
Overall change: Use updated media indicator in Story Promo Index Alsos
Update stories in Psammead Grid, Psammead Story Promo to use updated major version of Media Indicator
@bbc/psammead-media-indicator@4Storybook Story Promo with Audio story
Storybook Regular Promo No image with Video
Grid example with Story Promos with Media indicators
Note: the lack of padding here will only be fixed once the psammead-story-promo package update here is pulled into top-level psammead as a dependency.
Code changes:
@bbc/[email protected]isInlineprop to switch between block and inline versionsdisplay: inlineproperty so they wrap around the media indicator and below the icon, as per designs.Testing notes