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

Add story for Media Message component & remove border #3666

Merged
merged 6 commits into from
Aug 18, 2020

Conversation

RichardPK
Copy link
Contributor

Resolves #3624

Overall change:

  • Added a Storybook component for the Media Player MediaMessage component with service & message knobs.
  • Added snapshot test for MediaMessage
  • Removed border from <strong> element within component

  • I have assigned myself to this PR and the corresponding issues
  • Automated jest tests added (for new features) or updated (for existing features)

@RichardPK RichardPK added a11y Accessibility-related task ws-media The World Service media stream labels Aug 14, 2020
@RichardPK RichardPK self-assigned this Aug 14, 2020
@rebeccamcginn rebeccamcginn merged commit e90b41f into latest Aug 18, 2020
@@ -11,6 +14,12 @@ const withDuration = {
datetime: 'PT2M30S',
};

const StyledMessageContainer = styled.div`
padding-top: 56.25%;
Copy link
Contributor

@greenc05 greenc05 Aug 18, 2020

Choose a reason for hiding this comment

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

Just wondering what 56.25% is for? This value seems unsual? Did we use this before this PR?

Copy link
Contributor Author

@RichardPK RichardPK Aug 18, 2020

Choose a reason for hiding this comment

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

It's a means of applying a 16:9 ratio to the container's padding. Where 16 is the width, 56.26% of that (9) is the height.

We use it in Simorgh as a means of pushing the other page content below the player - I'm just mocking that in the story to emulate the styling.

Screenshot 2020-08-18 at 12 28 18

Frankly it seems like a mad way to manage layout but I'm sure there's good reason for doing it.

Copy link
Contributor

Choose a reason for hiding this comment

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

Intersting, ok thanks for the explanation @RichardPK

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
a11y Accessibility-related task ws-media The World Service media stream
Projects
None yet
Development

Successfully merging this pull request may close these issues.

media-message component - Remove strong elements border bottom and add to Psammead storybook
4 participants