new: Promo/flag/ribbon/special marker #48

jackreeves · 2018-06-14T13:20:30Z

Problem Statement

as a customer i would like a clear way of seeing if something is on sale or a special feature or new so that i can focus my attention

as a designer i would like a way for all teams to consistently approach flags so that we can improve user experience

Acceptance Criteria:

Ribbon should have margin of 16px above and below.
Should have inner padding of 8px top and bottom.
The ribbon should expand and contract to fit the inputted text.
Any text should be allowed as an input / prop, but should be limited to strings only.
There should only be one line of text allowed, must not wrap to two lines.
The minimum total width of the ribbon is 126px.

Recommendation

Description of the proposed solution

Designs

Meta

Willing to design solution: No
Willing to develop solution: No
Has workaround: No
Do any similar components already exist: No
Does this pattern exist already but isn’t a community component?
https://www.telus.com/en/bc/mobility/phones/?linktype=nav
Which teams/applications do you think would use this improvement?
MOB/HS/B2B
High impact: No

mike-bunce · 2019-02-08T19:41:59Z

Our team (HS R+L) will be building this component as we have a requirement for it in our current sprint.

twirlingsky · 2019-02-25T18:25:49Z

Home Solutions Ribbon:

Usage criteria: for use on a product card to signify a term length contract on an offer (e.g. 2 year term)

must:

Telus purple for ribbon colour
white text colour, medium weight
follow product / offer name
be above price block (in eyebrow position)

varunj90 · 2019-03-11T20:29:46Z

@sketchidea are you/ your team still planning to develop this component?

nicmak · 2019-03-26T22:31:06Z

Hi Everyone, our designer Francisco has new designs @twirlingsky

donnavitan · 2019-04-01T15:53:07Z

Connected with Francisco regarding "ribbon".

Please review the following file: https://invis.io/a/HJ5CGILLKWQT
Please make sure that you sync/update the file here: https://telus.invisionapp.com/d/main#/projects/prototypes/13362811/assets

I've done the following:

Height: 32px
Minimum Width: 131px
Updated typography rules (it should align with existing text/medium/* styles (but now available in medium and inverted/white)
16px at 24px line-height
Left aligned
It has a left padding of 16px
It has a right padding of 24px (including the 8px of tail)
Vertically centered visually (inspect Invision for reference) https://telus.invisionapp.com/share/5TRB1UFAD4U
Created it as a symbol so all you have to do is override the label
Will automagically expand (Anima plugin required)

Next steps:

Review as necessary
Add "ribbon" symbol to the TDS Community DSM library under "Components (not coded)"
Confirm design/dev
Add usage criteria (for DSM library)

donnavitan · 2019-04-01T17:36:08Z

Oh! If it's released in code, then:

Add "ribbon" symbol to the TDS Community DSM library under "Components (coded)"

donnavitan · 2019-04-05T14:20:23Z

Hello folks, as per my discussion with Francisco, I've added the ribbon component in TDS Community DSM library under "Components (not coded)". When dev is completed, we can move to "Components (coded)". Cheerios!

https://telus.invisionapp.com/dsm/telus/tds-community/folder/components/5ca657910cb8d13e823259f7

mike-bunce · 2019-04-05T15:54:51Z

Acceptance criteria added

nicmak · 2019-04-17T17:47:17Z

Starting Development today

adding ribbon component for clear way for customers to see sale or special feature items new: Promo/flag/ribbon/special marker #48

* new lock file * feat(community-ribbon): adding new ribbon component to tds-community adding ribbon component for clear way for customers to see sale or special feature items new: Promo/flag/ribbon/special marker #48 * fix(community-ribbon): changes to code according to PR updating usage criteria * fix(community-ribbon): changes to code according to PR updating usage criteria * fix(community-ribbon): snapshots and e2e tests updating usage criteria along with tests * fix(community-side-navigation): updating snapshots and e2e tests updating tests * fix(community-ribbon): updating tests :Skip * fix(community-side-navigation): updating e2e tests * fix(community-pagination): updating e2e tests * fix(community-testimonial): updating e2e tests * fix: Update e2e shots * fix(community-ribbon): making style adjustments * new e2e test * fix(community-ribbon): removing props in jest test :sjip

donnavitan · 2019-06-10T15:07:53Z

Adding notes for reference:

Minor update was made to the Sketch component to make it shorter in height, now at 24px as per @twirlingsky
I'll be updating it as per design QA checklist: http://bit.ly/TDSCommunityDesignChecklist

donnavitan · 2019-06-10T15:16:56Z

@twirlingsky Could you confirm if the left padding should be changed to 8px or keep 16px? Did you want to keep the 24px right padding? Did you want to keep a minimum width or just have the ribbon background expand to whatever the label is?

twirlingsky · 2019-06-10T16:08:50Z

I just gave it a double check and posted a new symbol to DSM.

Padding left: 8px
Padding right: 16 + 8px - 24 px to allow for the ribbon tail
Padding top and bottom: 4px
Minimum width of 126px is still on - the background can expand to whatever the label is

donnavitan · 2019-06-10T18:28:21Z

Hello all,

As per @twirlingsky's confirmation, here's an updated specs and examples:

Details

Height: 24px
Minimum Width: 126px
Font: Helvetica Neue
Font-size: 16px
Line-height: 16px
Weight: Medium (aka bold)
Align: Left
Colour: White #FFFFFF (aka inverted)
Vertically centered visually (inspect Invision for reference)
Left padding: 16px
Right padding: 24px (including 8px of ribbon tail)
Top margin: 8px
Bottom margin: 8px

Sketch use

Use override panel to edit the label
Will automagically expand (Anima plugin required)

https://telus.invisionapp.com/share/5TRB1UFAD4U

TDS Community DSM library has been updated accordingly.

donnavitan · 2019-06-10T18:38:02Z

Please note that the latest working file for this is: https://invis.io/a/HJ5CGILLKWQT

donnavitan · 2019-06-11T13:34:10Z

Confirmed design with @twirlingsky
Will address if dev is affected with @theetrain

mejsullivan · 2019-06-11T18:13:31Z

Are their docs to see what's been done for accessibility? Saw this was getting released! Exciting!

donnavitan · 2019-06-11T20:06:45Z

@mejsullivan Thank you for bring that up. Reaching out to you and @twirlingsky for additional context where applicable.

It's not an interactive element, but it is a visual callout - so maybe there is an opportunity to enhance the a11y experience. Unfortunately, the use is so free form that it's not limited to "sale", "offer", or "program". Maybe, the only addition is to include such term in the ribbon label?

Please advise and recommend, if folks have suggestions.

donnavitan · 2019-06-12T16:02:55Z

Just adding a note here that design a11y review has been double checked. While the opportunity to enhance the component by providing more meaningful context can be an enhancement; to be considered with @twirlingsky and design direction/CX.

varunj90 · 2019-06-13T20:27:04Z

Docs: https://tds.telus.com/community/index.html#ribbon
DSM: tds_community v.1.0.21
Release notes: https://github.com/telus/tds-community/releases/tag/%40tds%2Fcommunity-ribbon%401.0.0
npm: https://www.npmjs.com/package/@tds/community-ribbon

mejsullivan · 2019-07-04T21:53:01Z

@varunj90 @donnavitan - sorry I don't understand what was said above. Is it accessible? y/n? :)

donnavitan · 2019-07-05T12:24:40Z

@mejsullivan Yes, it's accessible! 😃

Just wanted to make a note that there's still a potential to make an accessibility enhancement that will help indicate that the ribbon is a special feature/offer/discount.

mejsullivan · 2019-07-08T22:56:46Z

Is that what the visual (the shape) is trying to tell people? Or does the text in the ribbon provide that content?

jackreeves added type: new component 🎁 New component priority: medium medium priority item status: design needed 🎨 labels Jun 14, 2018

jackreeves added this to To do in Community Backlog via automation Jun 14, 2018

invalidred mentioned this issue Jan 18, 2019

new: comparison cards #21

Closed

varunj90 moved this from To do to Design intent in Community Backlog Feb 4, 2019

varunj90 moved this from Design intent to Design queue in Community Backlog Feb 4, 2019

varunj90 moved this from Design queue to Design review in Community Backlog Mar 29, 2019

varunj90 assigned nicmak Apr 1, 2019

varunj90 added status: DPA design review needed A feature or request that requires DPA design review and removed status: design needed 🎨 labels Apr 1, 2019

varunj90 moved this from Design review to In development (code and design) in Community Backlog Apr 1, 2019

varunj90 assigned donnavitan Apr 5, 2019

varunj90 added status: DPA design approved approved design by the DPA that can be picked for development and removed status: DPA design review needed A feature or request that requires DPA design review labels Apr 5, 2019

nicmak added a commit that referenced this issue Apr 17, 2019

feat(community-ribbon): adding new ribbon component to tds-community

911d464

adding ribbon component for clear way for customers to see sale or special feature items new: Promo/flag/ribbon/special marker #48

nicmak mentioned this issue Apr 17, 2019

Feat/Community-Ribbon Component #209

Merged

3 tasks

varunj90 assigned Franimal604 and mike-bunce and unassigned donnavitan Apr 22, 2019

nicmak added a commit that referenced this issue May 6, 2019

feat(community-ribbon): adding new ribbon component to tds-community

c2320bc

adding ribbon component for clear way for customers to see sale or special feature items new: Promo/flag/ribbon/special marker #48

nicmak added a commit that referenced this issue May 7, 2019

feat(community-ribbon): adding new ribbon component to tds-community

6103234

adding ribbon component for clear way for customers to see sale or special feature items new: Promo/flag/ribbon/special marker #48

nicmak added a commit that referenced this issue May 17, 2019

feat(community-ribbon): adding new ribbon component to tds-community

8884d3b

adding ribbon component for clear way for customers to see sale or special feature items new: Promo/flag/ribbon/special marker #48

nicmak added a commit that referenced this issue May 17, 2019

feat(community-ribbon): adding new ribbon component to tds-community

db893a2

adding ribbon component for clear way for customers to see sale or special feature items new: Promo/flag/ribbon/special marker #48

nicmak added a commit that referenced this issue May 22, 2019

feat(community-ribbon): adding new ribbon component to tds-community

d4a0ed4

adding ribbon component for clear way for customers to see sale or special feature items new: Promo/flag/ribbon/special marker #48

varunj90 moved this from In development (code and design) to In QA in Community Backlog Jun 12, 2019

varunj90 assigned twirlingsky Jun 13, 2019

varunj90 closed this as completed Jun 13, 2019

varunj90 added the status: completed 💥 issue completed label Jun 13, 2019

varunj90 moved this from In QA to Released in Community Backlog Jun 13, 2019

varunj90 assigned ghost Jun 13, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

new: Promo/flag/ribbon/special marker #48

new: Promo/flag/ribbon/special marker #48

jackreeves commented Jun 14, 2018 •

edited by mike-bunce

mike-bunce commented Feb 8, 2019

twirlingsky commented Feb 25, 2019 •

edited

varunj90 commented Mar 11, 2019

nicmak commented Mar 26, 2019

donnavitan commented Apr 1, 2019 •

edited

donnavitan commented Apr 1, 2019

donnavitan commented Apr 5, 2019 •

edited

mike-bunce commented Apr 5, 2019

nicmak commented Apr 17, 2019

donnavitan commented Jun 10, 2019

donnavitan commented Jun 10, 2019

twirlingsky commented Jun 10, 2019

donnavitan commented Jun 10, 2019 •

edited

donnavitan commented Jun 10, 2019

donnavitan commented Jun 11, 2019

mejsullivan commented Jun 11, 2019

donnavitan commented Jun 11, 2019

donnavitan commented Jun 12, 2019

varunj90 commented Jun 13, 2019

mejsullivan commented Jul 4, 2019 •

edited

donnavitan commented Jul 5, 2019

mejsullivan commented Jul 8, 2019

new: Promo/flag/ribbon/special marker #48

new: Promo/flag/ribbon/special marker #48

Comments

jackreeves commented Jun 14, 2018 • edited by mike-bunce

Problem Statement

Acceptance Criteria:

Recommendation

Designs

Meta

mike-bunce commented Feb 8, 2019

twirlingsky commented Feb 25, 2019 • edited

varunj90 commented Mar 11, 2019

nicmak commented Mar 26, 2019

donnavitan commented Apr 1, 2019 • edited

donnavitan commented Apr 1, 2019

donnavitan commented Apr 5, 2019 • edited

mike-bunce commented Apr 5, 2019

nicmak commented Apr 17, 2019

donnavitan commented Jun 10, 2019

donnavitan commented Jun 10, 2019

twirlingsky commented Jun 10, 2019

donnavitan commented Jun 10, 2019 • edited

Details

Sketch use

donnavitan commented Jun 10, 2019

donnavitan commented Jun 11, 2019

mejsullivan commented Jun 11, 2019

donnavitan commented Jun 11, 2019

donnavitan commented Jun 12, 2019

varunj90 commented Jun 13, 2019

mejsullivan commented Jul 4, 2019 • edited

donnavitan commented Jul 5, 2019

mejsullivan commented Jul 8, 2019

jackreeves commented Jun 14, 2018 •

edited by mike-bunce

twirlingsky commented Feb 25, 2019 •

edited

donnavitan commented Apr 1, 2019 •

edited

donnavitan commented Apr 5, 2019 •

edited

donnavitan commented Jun 10, 2019 •

edited

mejsullivan commented Jul 4, 2019 •

edited