undp / design-system Goto Github PK

Currently the title of an accordion panel uses letter-spacing. See example here

There should be no letter-spacing applied here.

Firefox doesn't display the backdrop-filter CSS property. To ensure proper contrast browsers not supporting this property should have less opacity than those that support the blur.

Screenshot of Chrome vs. Firefox

Font size, color, and weight are incorrect for the default <h4> element.

See Storybook vs. Figma

The donate button should be an optional part of the country header.

https://design.undp.org/?path=/story/utilities-scrollbars--scrollbars
Firefox rendering:

Correct rendering:

When long names are added to the "author card" component they extend beyond their container. Long names also change the shape of the author image from a circle to a narrow ellipse.

This issue is similar to #510

Sohne doesn't support cyrillic, need to implement Noto font and update stylesheets

https://design.undp.org/?path=/story/components-navigation-components-main-navigation-country-header--country-header
https://design.undp.org/?path=/story/components-navigation-components-main-navigation-global-header--global-header

Widget: https://design.undp.org/?path=/story/components-ui-components-tabs--tabs

Space on the screenshot below is top margin of the content, but component should have its own padding.

Currently the headers lose the mega menu hover effect and switch to the collapsed menu with hamburger icon when the browser is <1440px. This should happen only for browser width <1024px. For everything >=1024px the full menu with mega menu hover effect should be used.

UPDATE: flexible top level menu is separated to its own issue: #1098 based on the agreement with Chapter 3

Font size is too small when links are used in a blockquote.

Live example:
https://codepen.io/theadamparker/pen/gOoymae

https://design.undp.org/?path=/story/components-ui-components-cards-bio-card--bio-card

When the text within this card animates from left to right it visibly overflows the card container. Correct behavior is that the text shouldn't be visible outside of its container.

Disclaimer: this requires further deliberation and a bit of conceptual thinking.

Update Content Landing page template to increase content importance in "above the fold" area. Currently it only shows Hero image and page title, to get to the content user has to browse to the bottom of the page.

Figma: https://www.figma.com/file/U6HtgMaCzkhXgTpKNz2Ial/UNDP-Global-Site?node-id=153%3A18293

https://design.undp.org/?path=/story/patterns-download-modal--download-modal
Some alignments are in order:

1. Dropdown should occupy entire width, right border should be aligned with the scrollbars
2. Links list should use entire available height of the widget, currently it is a bit shorter
   

The scrollbar is not visible, images are stacked not displayed in a carousel.

It is not possible to have more or fewer cards in this component. It is very rigid in its approach and prevents sites from using only 4 cards, or more than 6 cards.

See Codepen example

When long names are added to the "author summary" component they extend beyond their container and into the bio area. Long names also change the shape of the author image from a circle to a narrow ellipse.

Currently the line height is "1rem." Line height should not use a unit, and the correct line height is 1.142 (sorry it's not a nice round number @Jura but this matches the specs in Figma).

Current implementation looks like this:

The yellow progress bar appearing under the header should be removed.
https://design.undp.org/?path=/story/templates-generic-page--generic-page

Image element, immediately followed by text should have a bottom margin to prevent this:

Currently the accent color (yellow, green, red, or azure) used in hover effects, stats cards, etc. is set at the component level. This allows a page to use a mix of colors when there should only be one accent color applied consistently throughout a website.

Creating a global variable would allow site creators to define the accent color in a single place and have that color be inherited by all components using an accent color. This would eliminate the mix-and-match effect that can currently being created.

This 'menu' button should only be visible at the mobile breakpoint. Currently it is visible for all screen sizes.

The bio card component uses a portrait image above text in a gray container. The width of the image should match the width of the container beneath it.

Currently the image and container are misaligned.

The lightbox gallery component has several new formatting issues:

1. Image caption is collapsed to a single line, and overlapping itself
2. Images have excess padding seen on hover
3. The blurred background is missing when the lightbox is open

Hovering from the menu item (e.g. who we are, what we do) to the mega menu panel should be a seamless experience. However it is experiencing bugginess and begins to collapse while moving the cursor from one position to the next. See screen capture for a better explanation.

Correct behavior is for the mega menu not to collape when moving from menu item to mega menu panel, or when moving from menu item to menu item. There should be significant padding around the hoverable area to create a smooth and forgiving hovering experience.

Tested on MacOS 10.14.6 Chrome 99.0.4844.84

Introduced by #887

Following components including hyperlink markup and they are affected by introducing default underlined treatment with hover effect:

• Content card
• Image reveal card
• Author card
• Download card -> Card module
• Breadcrumbs
• Logo in the footer

https://design.undp.org/?path=/story/components-ui-components-gallery-lightbox-gallery--lightbox-gallery

Design: https://xd.adobe.com/view/53a0e7a0-fc5d-4644-be4c-a9b183836241-06f3/specs/

Current implementation

Dear UNDP-Team,

we have built the WFP UI-Kit which is a design system used by the World Food Programme (https://github.com/wfp/ui).
At the moment we are working with other UN organizations on a reusable core for a design system with html/twig/react implementation. It can be transformed to the needs and corporate identity of the specific organization.
Since we saw that you also plan on building a design system we are curious if you would be open for an exchange of ideas?

Best regards,

Robert

5 items breaks the layout.

Type Expanding Arrow differs from Type Shape in its form. Both should be the same shape as the standard chevron.

Compiled version of the filter-search-bar.js script is not firing same event on checkboxes clearance trough the dropdown and clicking on chips below select box. It was working before webpack library updates.

Link to the commit displaying differences in compiled file: https://dev.azure.com/undp-online-digital/Acquia/_git/Acquia/commit/26a8dbcc08199d791c2a8ddb1eeab2504b61f76a?refName=refs%2Fheads%2Fdev

Currently the default link shows no visual distinction from plain text. It should have a red underline.

https://design.undp.org/?path=/story/components-ui-components-footer--footer&args=variant:simple

Report Fraud, Abuse, Misconduct, Submit Social Or Environmental Complaint, Scam Alert should be removed. Only Terms Of Use should be included.

While selecting categories in the filter and search sidebar component the selected categories appear as chips at the bottom of the sidebar. However the styling of these chips is incorrect. The gray background with box shadow and border radius are not visible—only the text can be seen.

https://design.undp.org/?path=/story/components-ui-components-hero-page--page-hero-full-width

After implementing automatic alphabetical sorting of Storybook menu items Getting started is showing Browser support section by default while it has to be Intro

https://design.undp.org/?path=/story/components-forms-dropdown-custom-select--custom-select

The gap seen here should not be present.

Current implementation of Medium and Portrait images are based on limiting their size relatively to the container, which is incorrect.
Medium image should only be capped in width to certain amount. @theadamparker , can you suggest the right number?
Portrait oriented image should only be limited if there are captions and credits present, otherwise it has to span entire container's size