Add program card component to radio-schedule #2938

EinsteinNjoroge · 2020-01-15T12:21:17Z

Resolves #2924

Overall change: The radio schedule pages are designed to show program-cards with the different states, brand titles, episode titles, summary, and duration. This PR adds and exports a ProgramCard component from the psammead-radio-schedule package. You can find the chromatic storybook builds here.

Code changes:
in this approach, we have created an entirely new component that does not extend psammead-bulletin.

Create and export the program card component.
Add snapshot tests and storybook stories.

Screenshots
live

onDemand

Next

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

Signed-off-by: Einstein <[email protected]>

packages/components/psammead-program-card/src/index.jsx

packages/components/psammead-program-card/package.json

packages/components/psammead-program-card/src/index.jsx

Signed-off-by: Einstein <[email protected]>

…radio-schedules-component' of github.com:bbc/psammead into create-radio-schedules-component � Conflicts: � package.json

Signed-off-by: Einstein <[email protected]>

packages/components/psammead-radio-schedule/src/ProgramCard/index.jsx

Signed-off-by: Einstein <[email protected]>

packages/components/psammead-radio-schedule/src/ProgramCard/__snapshots__/index.test.jsx.snap

Signed-off-by: Einstein <[email protected]>

tochwill · 2020-01-29T10:49:11Z

I'm going to pull this back into code review quickly and we can discuss the UX review process with alpha components in refinement!

tochwill · 2020-01-29T10:51:51Z

packages/components/psammead-radio-schedule/src/ProgramCard/index.jsx

+  },
+};
+
+const sentenceCase = text =>


Is this just used to capitalise the duration label? Would we be able to just pass in the translation string like this, we do that elsewhere :)

Ah it's also used below for the live label text. We have to do exactly the same in the TV and Radio bulletin I believe? Can we follow the same approach in both places?

@tochwill we're using this on the state label as well as the duration label. If the state is live, we need to display localised LIVE and have Live as a hidden text on the card. The Radio bulletin has a hardcoded hidden-text Live regardless of the service.

I think the requirement should be the same for both - if we're hardcoding Live for all cases on the Bulletin and have the requirement to only do that if the translation is 'Live' for the radio schedule, we should check that this should be the case, I imagine they should be consistent. At the moment it looks like we're always displaying 'LIVE' as the visible text for the bulletin component too.

Let's check the following for bulletin and radio schedules are true:

Scenario 1 (LTR services):

Show a visible 'LIVE' label in english

Show visually hidden text with 'Live' read in an english accent

Scenario 2 (RTL services):

Show a visible live label, in capitals, in the service language.

Show visually hidden text with the translation of live read in the service language.

This is what I understood, but as you point out, currently in Simorgh we never pass a live label translation for bulletins even in RTL languages, so it defaults to 'LIVE', and the visually hidden text is hardcoded as 'Live'.

Stupid question, but do our right to left scripts contain capital letters? I don't think arabic does?

"Show visually hidden text with the translation of live read in the service language." - this is not required for services that do not have 'live' in english. Though note, in this case the diplayed 'LIVE' (translated) could not have aria-hidden on it...

Just had a conversation with Catharine:

We only need visually hidden text for ‘Live’ in English as a hack to stop screen readers reading out ‘live’ incorrectly, we don’t need it for other languages.

We don’t want to read out ‘Live’ in English when we are using a different language, so it looks like the bulletin component is currently incorrect. We have no RTL languages using this component yet, so this won’t have impacted anyone.

We can pass in translation strings as ‘Live’ and ‘Duration’, not need the sentenceCase function, and use CSS (or toUpperCase as you are) to display the make it ‘LIVE’.

Another question, can we pass the translation of 'Live' in all cases in this format, and use text-transform: uppercase in the styles for the visible live label?

This will cause UX and accessibility issues in no-CSS browsers

I'm gonna move that function to a helper and use it in tests and stories

Could you not just pass the translations strings in sentence case? You could still use toUpperCase for the visible label

Signed-off-by: Einstein <[email protected]>

packages/components/psammead-radio-schedule/README.md

packages/components/psammead-radio-schedule/package.json

tochwill · 2020-01-30T11:52:48Z

packages/components/psammead-radio-schedule/src/ProgramCard/index.jsx

+          >
+            {`${stateLabel.toUpperCase()}`}
+          </LabelWrapper>
+          <VisuallyHiddenText {...hiddenTextProps}>


I think this is good to merge into the alpha as long as we raise tickets to:

Create the timestamp correctly, using the same timestamp that is used in the start time indicator (will be easier to do when they're both merged in)

Get requirements for duration formatting and refactor that in here based on what they are

Make sure the visually hidden live label has the same logic in here, story promos, bulletins (and anywhere else it will be used). We can merge it in as is to the alpha and then pull it out and share it across each?

#3036
#3037

Co-Authored-By: Tom Williams <[email protected]>

Signed-off-by: Einstein <[email protected]>

Create radio schedule package

f67dc2f

Signed-off-by: Einstein <[email protected]>

EinsteinNjoroge self-assigned this Jan 15, 2020

EinsteinNjoroge added radio-schedules ws-home Tasks for the WS Home Team labels Jan 15, 2020

EinsteinNjoroge and others added 5 commits January 15, 2020 16:28

Add element styling and storybook story

fdb80bb

Signed-off-by: Einstein <[email protected]>

added duration wrapper and some edits

3df4c3e

Merge branch 'latest' into create-radio-schedules-component

b2f2bda

Rename package to psammead-program-card

022525d

Signed-off-by: Einstein <[email protected]>

Fix header padding

e58013d

Signed-off-by: Einstein <[email protected]>

EinsteinNjoroge mentioned this pull request Jan 16, 2020

Add KINGFISHER to psammead-styles color #2942

Closed

1 task

EinsteinNjoroge changed the title ~~Create radio schedule package~~ Create program card component Jan 16, 2020

Update psammead-styles

179208f

Signed-off-by: Einstein <[email protected]>

itimirichard self-assigned this Jan 17, 2020

itimirichard and others added 3 commits January 17, 2020 09:25

styling programe card

b054d00

Merge branch 'latest' into create-radio-schedules-component

395bacd

make whole program card a link

979bb99

tochwill reviewed Jan 17, 2020

View reviewed changes

itimirichard and others added 12 commits January 20, 2020 08:57

Merge branch 'latest' into create-radio-schedules-component

bbef4e3

wrap header with Link

48e8b6f

changed DateWrapper to TitleWrapper

b21dae2

Add prop-type validation

ceb596b

Signed-off-by: Einstein <[email protected]>

Create radio-schedule component package

cf3eefb

Signed-off-by: Einstein <[email protected]>

Merge branch 'latest' into create-radio-schedule-component-package

757a12a

Update packages/components/psammead-radio-schedule/CHANGELOG.md

9f90dc2

Merge branches 'create-radio-schedule-component-package' and 'create-…

a88f105

…radio-schedules-component' of github.com:bbc/psammead into create-radio-schedules-component � Conflicts: � package.json

Move program card to radio-schedule package, add snapshot tests

12015bf

Signed-off-by: Einstein <[email protected]>

Remove program-card package

2cd9e98

Signed-off-by: Einstein <[email protected]>

Merge branch 'latest' into create-radio-schedules-component

d199fbe

Add documentation

e4c5213

Signed-off-by: Einstein <[email protected]>

EinsteinNjoroge added 3 commits January 28, 2020 18:25

Show state label's hidden text on live only

8c15ead

Signed-off-by: Einstein <[email protected]>

merge pull

657de62

Show state label's hidden text on live only

7d7ed10

Signed-off-by: Einstein <[email protected]>

OlgaLyubin reviewed Jan 28, 2020

View reviewed changes

packages/components/psammead-radio-schedule/src/ProgramCard/index.jsx Outdated Show resolved Hide resolved

Fix hidden text in non-css view

77abc2a

Signed-off-by: Einstein <[email protected]>

greenc05 reviewed Jan 28, 2020

View reviewed changes

packages/components/psammead-radio-schedule/src/ProgramCard/__snapshots__/index.test.jsx.snap Outdated Show resolved Hide resolved

Fix aria-hidden for state label

bf8b40c

Signed-off-by: Einstein <[email protected]>

EinsteinNjoroge force-pushed the create-radio-schedules-component branch from 81e3ad9 to bf8b40c Compare January 28, 2020 17:52

tochwill reviewed Jan 29, 2020

View reviewed changes

EinsteinNjoroge added 6 commits January 29, 2020 14:36

Merge branch 'latest' into create-radio-schedules-component

eaf1e07

Move sentenceCase to helper

94de47d

Signed-off-by: Einstein <[email protected]>

Merge branch 'latest' into create-radio-schedules-component

d64a8b3

Merge branch 'latest' into create-radio-schedules-component

d04cb80

Merge branch 'latest' into create-radio-schedules-component

0e9d46e

Merge branch 'latest' into create-radio-schedules-component

175322a

tochwill reviewed Jan 30, 2020

View reviewed changes

EinsteinNjoroge and others added 3 commits January 30, 2020 15:04

Update packages/components/psammead-radio-schedule/README.md

ac0bd41

Co-Authored-By: Tom Williams <[email protected]>

Merge branch 'latest' into create-radio-schedules-component

1d0f729

Update package.json

d116eb1

Signed-off-by: Einstein <[email protected]>

EinsteinNjoroge mentioned this pull request Jan 30, 2020

Format hidden start time in program-card for Radio Schedules #3036

Closed

1 task

Merge branch 'latest' into create-radio-schedules-component

5a5faac

EinsteinNjoroge merged commit 6cde596 into latest Jan 30, 2020

sareh deleted the create-radio-schedules-component branch February 21, 2020 12:30

snyk-bot mentioned this pull request Apr 24, 2023

[Snyk] Upgrade ramda from 0.28.0 to 0.29.0 #4661

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add program card component to radio-schedule #2938

Add program card component to radio-schedule #2938

EinsteinNjoroge commented Jan 15, 2020 •

edited by itimirichard

Loading

tochwill commented Jan 29, 2020

tochwill Jan 29, 2020

tochwill Jan 29, 2020

EinsteinNjoroge Jan 29, 2020 •

edited

Loading

tochwill Jan 29, 2020

tochwill Jan 29, 2020

greenc05 Jan 29, 2020 •

edited

Loading

tochwill Jan 29, 2020

EinsteinNjoroge Jan 29, 2020

EinsteinNjoroge Jan 29, 2020

tochwill Jan 29, 2020

tochwill Jan 30, 2020

EinsteinNjoroge Jan 30, 2020

Add program card component to radio-schedule #2938

Add program card component to radio-schedule #2938

Conversation

EinsteinNjoroge commented Jan 15, 2020 • edited by itimirichard Loading

tochwill commented Jan 29, 2020

Choose a reason for hiding this comment

Choose a reason for hiding this comment

EinsteinNjoroge Jan 29, 2020 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

greenc05 Jan 29, 2020 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

EinsteinNjoroge commented Jan 15, 2020 •

edited by itimirichard

Loading

EinsteinNjoroge Jan 29, 2020 •

edited

Loading

greenc05 Jan 29, 2020 •

edited

Loading