A few days ago AWS announced through a publication on its official website the launch of Cloudscape Design System, an open source solution for building intuitive web applications.
The Cloudscape Design System consists of a comprehensive set of guidelines for building web applications, as well as design resources and front-end components to speed deployment.
“Today, we are delighted to announce the Cloudscape Design System, an open source solution for creating engaging and inclusive user experiences at scale. cloudscape
“We created it in 2016 to improve the user experience for AWS web applications and also to help teams deploy these applications faster. Since then, we have continually improved it based on customer feedback and research,” says AWS.
About Cloudscape Design System
Cloudscape is an open source design system for building web applications in order to improve the user experience in web applications that belong to AWS services and also to help teams deploy these applications faster.
Each component has a working environment where designers and developers can see how the component behaves, as well as sample code. To save you time and effort when creating, AWS provides step-by-step guidance on accessibility options and design solutions.
When you create automated tests for an application, you interact with Cloudscape components. For example, you can choose a Cloudscape button and assert that the app updates to reflect the action you associated with that button. The internal HTML structure of Cloudscape components, including CSS class names, may change at any time.
That is why AWS created test utilities for each component. The test utilities have stable APIs so you can access the relevant parts of these components without worrying about which selector to use. Cloudscape's test utilities are framework independent and can be used with any test stack (from Jest and jsdom to WebdriverIO), as well as the following:
- Unit tests, where you usually have direct access to the document object model (DOM)
- Integration testing, where it is typical to rely on string selectors. The test utilities are part of the main component package.
- A selection filter: which allows users to find specific items in a collection of resources by choosing one or two properties.
- container: With the container, you can present a group of content elements, indicating that the elements are related. For example, an array is a type of container.
- Expandable section: with it users can expand or collapse a section. Using expandable sections is recommended when you have multiple sections on a page and want to allow users to view one or more sections at a time. Expandable sections are collapsed by default.
- An access point: In the hands-on tutorials, hotspots are invisible containers that mark where hotspot icons should be placed. Hotspot icons are represented by the annotation context and are used to open and close annotation popups.
- Split pane: this is an adjustable panel that provides access to information or secondary controls. This is the main component to implement split view, a template for displaying a collection of resources with contextual resource details.
- Wizard: A multi-page form that guides the user through a complex flow or series of interrelated tasks. A wizard consists of a navigation pane, a header, a main content area, and action buttons.
Finally if you are interested in knowing more about it, you should know that the Cloudscape Design System was created for and is used by AWS products and services. It is released as open source so that anyone who builds products in the cloud can benefit from the AWS Design System.
You can check the details in the following link.