Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/autodesk/hig

Autodesk's unified design system
https://github.com/autodesk/hig

Last synced: 5 days ago
JSON representation

Autodesk's unified design system

Awesome Lists containing this project

README 

        
# Weave



[![Greenkeeper badge](https://badges.greenkeeper.io/Autodesk/hig.svg)](https://greenkeeper.io/)



Weave is Autodesk's unified design system, so we can build better products faster.



- [Getting started](#getting-started)

- [Theme data and theming components](#theme-data-and-theming-components)

- [React components](#react-components)

  - [Basics](#basics)

  - [Components](#components)

- [Contributing](#contributing)



## Getting started



Add a component to your app:

```jsx

yarn add @weave-design/button

```



Import and render the component:

```jsx

import Button from '@weave-design/button';



function MyComponent() {

  return 

}

```



## Theme data and theming components

Theme data is a representation of the Weave visual design language in the form of data. With [`@weave-design/theme-data`](./packages/theme-data/README.md), we publish the data in ECMAScript module, JSON, and SCSS formats. This data includes 8 themes that can be used on any platform. There are four color schemes including...



* Light gray

* Dark gray

* Dark blue



...with two densities–high and low–for each scheme. See how to [provide a theme to components](./packages/theme-context#provide-a-theme-to-components). 



- [`@weave-design/theme-data`](./packages/theme-data/README.md) - Weave design spec as data

- [``](./packages/theme-context/README.md) - A component to ease consumption of theme data from within React components.



## React components



### Basics

- Typography - See [``](./packages/typography/README.md) and [``](./packages/rich-text/README.md)

- Layout - See [``](./packages/spacer/README.md) and [``](./packages/surface/README.md)

- Icons - See [``](./packages/icons/README.md) to easily render icons in React and the [`@weave-design/icons`](./packages/icons/README.md) package for svg data



### Components



Each Weave pattern is implemented as a set of React components. Each pattern is published to NPM individually under the @weave-design namespace.



- [``](./packages/accordion/README.md) - Make content-heavy pages appear less so by vertically stacking items in lists that users can expand or contract

- [``](./packages/avatar/README.md) - A visual representation of a customer's identity

- [``](./packages/avatar-bundle/README.md) - Indicate a group of people who are associated with a task or information.

- [``](./packages/badge/README.md) - Visual indicators that communicate status and draw attention to an object.

- [``](./packages/banner/README.md) - An alert that requires a user action

- [``](./packages/button/README.md) - Trigger actions or changes

- [``](./packages/checkbox/README.md) - A control to select from non-exclusive options

- [``](./packages/divider/README.md) - Separate content inline or in a stack. 

- [``](./packages/dropdown/README.md) - A menu to select one or many from a list

- [``](./packages/flyout/README.md) - A lightweight popup container

- [``](./packages/icons/README.md) - Represents a concept in graphical form

- [``](./packages/icon-button/README.md) - Action buttons that include an icon only

- [``](./packages/label/README.md) - A caption for an item in a user interface

- [``](./packages/menu/README.md) - Display a list of choices through interaction with a button, icon or other controls

- [``](./packages/modal/README.md) - An overlay that focuses the customer's attention

- [``](./packages/notifications-flyout/README.md) - A less intrusive way of announcing an event of potential interest to the user

- [``](./packages/notifications-toast/README.md) - Floating message boxes that appear

- [``](./packages/numeric-input/README.md) - For numerical values that allows freehand text entries or toggling values up and down

- [``](./packages/progress-bar/README.md) - An indication of content loading, presented horizontally

- [``](./packages/progress-ring/README.md) - An indication of content loading, presented circularly

- [``](./packages/radio-button/README.md) - A control to select one exclusively from a list

- [``](./packages/rich-text/README.md) - Applies the HIG typography styles to whatever is passed to it

- [``](./packages/skeleton-item/README.md) - A placeholder for loading content

- [``](./packages/slider/README.md) - A control for selecting a single numeric value from a range

- [``](./packages/spacer/README.md) - A square of empty space, meant to add space between other components

- [``](./packages/surface/README.md) - A themable container with the appropriate background color for the current theme

- [``](./packages/table/README.md) - A collection of data in rows and columns

- [``](./packages/tabs/README.md) - Keeps related content in a single container

- [``](./packages/tag/README.md) - Compact elements that can be used to represent small blocks of information

- [``](./packages/text-area/README.md) - A control to provide a large amount of freeform text

- [``](./packages/text-link/README.md) - Directs visitors to another location

- [``](./packages/thumbnail/README.md) - Visual anchors and identifiers for objects

- [``](./packages/tile/README.md) - A themable container that display information related to a single subject or destination

- [``](./packages/timestamp/README.md) - Presents a date with humanized phrasing

- [``](./packages/toggle/README.md) - A control for a single action with a clear on/off or start/stop.

- [``](./packages/tooltip/README.md) - Provides context in a small popup container

- [``](./packages/tree-view/README.md) - A way to view and manipulate a list of data

- [``](./packages/typography/README.md) - A set of components in many typographical variations



## Contributing



Read our contribution guidelines here: [CONTRIBUTING.md](CONTRIBUTING.md)