undp / design-system Goto Github PK
View Code? Open in Web Editor NEWUNDP Design System
Home Page: https://design.undp.org
License: MIT License
UNDP Design System
Home Page: https://design.undp.org
License: MIT License
Currently the title of an accordion panel uses letter-spacing. See example here
There should be no letter-spacing applied here.
The donate button should be an optional part of the country header.
https://design.undp.org/?path=/story/utilities-scrollbars--scrollbars
Firefox 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
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.
https://design.undp.org/?path=/story/patterns-download-modal--download-modal
Some alignments are in order:
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.
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).
The yellow progress bar appearing under the header should be removed.
https://design.undp.org/?path=/story/templates-generic-page--generic-page
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.
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.
The lightbox gallery component has several new formatting issues:
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:
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
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.
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.