platform-coop-toolkit / pinecone Goto Github PK

Is your feature request related to a problem? Please describe.
Noticed that the tag style in Pinecone is a bit out of date after we adjusted the visual design on the resource detail page.

Describe the solution you'd like

Fill: #E3EAE8
Text: #18514F

• Disclosure button - the downward chevron is sitting a pixel or two too low in the circle
• Disclosure button - Firefox & safari active state not there
• Default card - for focus state, the title still highlights as a bar across
• Resource card - can we move the badges up closer to the rest of the text above, same spacing as the spacing between the title and the author? And can the icon be a tiny bit bigger?
• Resource card, worker story card, platform coop card - can we move the text of the country a bit closer to the location icon? Maybe by 1/3 of the distance
• Event card - can the icons be a bit bigger by just a few pixels?
• Person card, blog with image card, story card - the spacing between the top of the tag to the image / edge of card should be the same distance as the left of the tag to the edge of the card (for some reason this isn’t an issue for the other cards)

Originally posted by @cherylhjli in #91 (comment)

Is your feature request related to a problem? Please describe.
No padding for resource library specced out

Describe the solution you'd like
Added key pages, spaced out, in PCC_ResourceLibrary_ComponentLibrary:
https://xd.adobe.com/view/5cbb2c96-51ce-4b66-4604-15c35058ee9c-2a8a/grid

The red spacing is drawn from the typography spacing, and the blue spacing is for the rest of the page elements.

Describe the bug
Search bar should have a button that triggers search upon click, so that the only trigger for search is not hitting the "enter" key.

New designers
Updated the resource library component library file, you can view the specific pages here:
https://xd.adobe.com/view/5cbb2c96-51ce-4b66-4604-15c35058ee9c-2a8a/screen/31e0fdb1-30b0-4ec3-82fa-96970d4c7c70/00-Desktop-components-10
https://xd.adobe.com/view/5cbb2c96-51ce-4b66-4604-15c35058ee9c-2a8a/screen/74ff721f-3752-4917-8820-25bfee856a0e/00-Desktop-components-11
https://xd.adobe.com/view/5cbb2c96-51ce-4b66-4604-15c35058ee9c-2a8a/screen/42cf801a-3332-4bb9-89a3-6b82a4acd073/00-Desktop-components-12

Describe the bug
When opening a Menu in mobile view, focus is placed on Close once the menu is visible. When opening the Filter dialog, focus visually disappears (unclear where focus is actually).

To Reproduce
Steps to reproduce the behavior:

1. Go to 'Filter List'
2. Resize to mobile view
3. Open Filter List
4. Notice lack of focus.
5. Go to 'Menu'
6. Resize to mobile view
7. Open Menu.
8. Notice focus is on the Close button.

Expected behavior
When opening the Filter List, if it behaves like a modal / dialog role, then focus should be on an item in the dialog. In this case I would expect focus on the Close button to be consistent with Menu, or consider focus on first item instead.

Desktop (please complete the following information):

• OS: Windows 10
• Browser Firefox
• Version 71.0

Is your feature request related to a problem? Please describe.
Add sort control for resource browse view.

Describe the solution you'd like
TK.

Describe alternatives you've considered
TK.

Additional context
TK.

Is your feature request related to a problem? Please describe.
Adding a hover and focus state for link with icon (ex. "filter")

Describe the solution you'd like
What do you think about this, Ned?

Describe alternatives you've considered
I know you initially described it as a "button", but upon looking at it again, I feel it's more akin to a link since it doesn't explicitly look like a button in the sense that there's a coloured box around it.

Is your feature request related to a problem? Please describe.
Inactive state of borderless buttons not being left aligned with the rest of the content, due to space being accommodated for the hover/active/focus state.

Describe the solution you'd like
reduce the padding on all 4 sides of the borderless button to be 28px, instead of the 40 as before. Left align the left edge of the text or icon inside the button, rather than the edge of the button itself:

Additional context
Since users only are able to hover, focus, or press one button at a time, it then makes sense to prioritize the alignment of the inactive states over the hover, focus, and pressed states.

Is your feature request related to a problem? Please describe.
Currently typography spacing needs work - creates awkward gaps on certain pages. Also lacking in tablet and mobile specs.

Describe the solution you'd like
Updated the typography spacing in the PCC_ComponentLibrary file, as well as here:
Desktop: https://xd.adobe.com/view/c23a06b5-530d-4823-6e76-b968b88ad95c-b40b/screen/b80cf480-e8cd-4926-bdc1-48a7a035b1e2/01-Style-Guide-Icons-Dividers-1/
Tablet: https://xd.adobe.com/view/c23a06b5-530d-4823-6e76-b968b88ad95c-b40b/screen/798dc8a7-25f3-46a7-8483-ae37f8c2f704/01-Style-Guide-Icons-Dividers-2
Mobile: https://xd.adobe.com/view/c23a06b5-530d-4823-6e76-b968b88ad95c-b40b/screen/67d9aef4-c04c-469f-a44d-adb10626eb04/01-Style-Guide-Icons-Dividers-3

Is your feature request related to a problem? Please describe.

Add saved search molecule.

Describe the solution you'd like

Implementation of pattern as found in XD (Resource Library Core Screens).

Describe alternatives you've considered

Not applicable.

Additional context

Depends on #150.

Describe the bug
When opening a submenu in the Menu component on mobile, the first submenu item appears to have focus, but focus is actually on the parent menu item.

To Reproduce
Steps to reproduce the behavior:

1. Go to 'Menu'
2. Resize window to mobile.
3. Open menu.
4. Using mouse or keyboard, open a submenu
5. Notice two focus styles appear - one on the parent of the submenu, and one on the first item of the submenu.

Expected behavior
When opening the sub menu, there should not be focus styling (or styling that would misunderstood as focus styling) on the first item.

Screenshots

Desktop (please complete the following information):

• OS: Windows 10
• Browser Firefox
• Version 71.0

Used for "Sort by" menu and "Share" menu.

Describe the bug

Badges lack sufficient contrast, according to axe:

Element has insufficient color contrast of 4.31 (foreground color: #707070, background color: #f0efef, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1

Is your feature request related to a problem? Please describe.
As per design, with some modifications: https://xd.adobe.com/view/20bf01bb-13f4-4682-54ba-046ad4288da1-568e/

Describe the solution you'd like
TK.

Describe alternatives you've considered
TK.

Additional context
TK.

Is your feature request related to a problem? Please describe.
We need a component for inline notifications (Success, Warning, Error).

Describe the solution you'd like
Examples:

• https://www.duetds.com/components/alert/
• https://polaris.shopify.com/components/feedback-indicators/banner#all-examples

Describe alternatives you've considered
Not applicable.

Additional context
Add any other context or screenshots about the feature request here.

The default button (https://pinecone.platform.coop/components/preview/button.html) needs a variant for dark backgrounds.

Is your feature request related to a problem? Please describe.
While working on typography spacing, found a few updates that were needed for the typestack in order for the system to work together cohesively.

Describe the solution you'd like
Tablet H2 changed to 28/40
https://xd.adobe.com/view/c23a06b5-530d-4823-6e76-b968b88ad95c-b40b/screen/b76b2824-d007-4c76-a901-91da046fd56c/01-Style-Guide-Typography-Tablet

Mobile H4 changed to 18/26 (still bold)
Mobile pull quotes changed to 18/26 (semibold italic)
https://xd.adobe.com/view/c23a06b5-530d-4823-6e76-b968b88ad95c-b40b/screen/1204e4ef-deae-46a2-99f1-40d7b31986e7/01-Style-Guide-Typography-Mobile

Is your feature request related to a problem? Please describe.

Add the site brand to the banner, with variants for home page (dark background), titled and untitled brands.

Describe the solution you'd like

See XD (Resource Library Core Screens, PCC).

Describe alternatives you've considered

Not applicable.

Additional context

Blocks platform-coop-toolkit/coop-library#117.

Used for "Report broken link".

Is your feature request related to a problem? Please describe.

We should add:

• axe-cli
• BackstopJS
• Lighthouse CI

Describe the solution you'd like

Catch low-hanging accessibility and performance issues on each PR.

Describe alternatives you've considered

Not applicable.

Additional context

https://24ways.org/2019/twelve-days-of-front-end-testing/

Is your feature request related to a problem? Please describe.

Add disclosure button molecule.

Describe the solution you'd like

Implement disclosure button as found in saved search (XD, Resource Core Screens).

Describe alternatives you've considered

Not applicable.

Additional context

Blocks #151.

Is your feature request related to a problem? Please describe.
These need to be at the top level of each filter group.

Describe the solution you'd like
TK.

Describe alternatives you've considered
TK.

Additional context
TK.

Add documentation for installing, developing, and using Pinecone.