new | pfe-readtime

[starryeyez024]

Component name:

• pfe-readtime

This component includes a JavaScript function that calculates the number of words inside the wrapper tag, and based on the average amount of words read per minute of 250, it divides the number of words by 250 and applies a floor function to approximate the number of minutes it would take to read. 

Example, an article containing 2803 words divided by 250 is 11.212, and then rounding down using the floor function it should estimate 11 minutes.

Implementation Details

• default slot should contain "minute read" which could be translated via google translate 
• If page builder passes in a custom string, it will be used instead

<pfe-readtime>minute read</pfe-readtime>
<pfe-readtime-wrapper> {{ contents of the article }} </pfe-readtime-wrapper>

should generate:

^ probably without the hyphen though?

Design specification

https://xd.adobe.com/view/7e8cb735-cb1c-44cb-5cdb-c2b98a608a2a-08bd/screen/dddd6403-7c0e-48d9-ab2e-d17fcb6b58df/specs/

This component can use this mixin to call typography styles:

@include pfe-typography(md, $type: "text", $use-local);

Accessibility

• not sure that there are any accessibility requirements here? As long as a screen reader can read the text, we should be good

Interaction

No interaction.

Analytics

No Analytics.

[starryeyez024]

@coreyvickery @dcaryll Do we need the hyphen between the number and the words?

[coreyvickery]

@starryeyez024 Yes, we need the hyphen.

[starryeyez024]

@coreyvickery sorry I should have asked this the first time, is that true of all languages? Or is that just part of the English? So the string would be -minute read and that would get sent through translations (this is ok, just making sure). I am suggesting that keeping the hyphen in the string is good because it may not make sense in Chinese, for example.

[coreyvickery]

@starryeyez024 I would say that we should keep the hyphen for non-Asian languages, but I'm no expert. I wonder who we could ask in the meantime, if it's worth clarifying.

[castastrophe]

<pfe-readtime description="%t-minute read"></pfe-readtime> (%t representing the computed time -- really any templating syntax could work)

<pfe-readtime-wrapper> {{ contents of the article }} </pfe-readtime-wrapper> <- we shouldn't need this, just need a pointer to where the content lives via API

[castastrophe]

Suggestion target-id or something like that to point to the readtime content

[castastrophe]

Completed! https://patternflyelements.com/elements/pfe-readtime/demo/

We do need to add a docs reference for it to show up on patternflyelements.com though.