Skip to content

Autodesk/hig

Repository files navigation

Weave

Greenkeeper badge

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

Getting started

Add a component to your app:

yarn add @weave-design/button

Import and render the component:

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

function MyComponent() {
  return <Button title="Hello, world!" />
}

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, 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.

React components

Basics

Components

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

  • <Accordion> - Make content-heavy pages appear less so by vertically stacking items in lists that users can expand or contract
  • <Avatar> - A visual representation of a customer's identity
  • <AvatarBundle> - Indicate a group of people who are associated with a task or information.
  • <Badge> - Visual indicators that communicate status and draw attention to an object.
  • <Banner> - An alert that requires a user action
  • <Button> - Trigger actions or changes
  • <Checkbox> - A control to select from non-exclusive options
  • <Divider> - Separate content inline or in a stack.
  • <Dropdown> - A menu to select one or many from a list
  • <Flyout> - A lightweight popup container
  • <Icons> - Represents a concept in graphical form
  • <IconButton> - Action buttons that include an icon only
  • <Label> - A caption for an item in a user interface
  • <Menu> - Display a list of choices through interaction with a button, icon or other controls
  • <Modal> - An overlay that focuses the customer's attention
  • <NotificationsFlyout> - A less intrusive way of announcing an event of potential interest to the user
  • <NotificationsToast> - Floating message boxes that appear
  • <NumericInput> - For numerical values that allows freehand text entries or toggling values up and down
  • <ProgressBar> - An indication of content loading, presented horizontally
  • <ProgressRing> - An indication of content loading, presented circularly
  • <RadioButton> - A control to select one exclusively from a list
  • <RichText> - Applies the HIG typography styles to whatever is passed to it
  • <SkeletonItem> - A placeholder for loading content
  • <Slider> - A control for selecting a single numeric value from a range
  • <Spacer> - A square of empty space, meant to add space between other components
  • <Surface> - A themable container with the appropriate background color for the current theme
  • <Table> - A collection of data in rows and columns
  • <Tabs> - Keeps related content in a single container
  • <Tag> - Compact elements that can be used to represent small blocks of information
  • <TextArea> - A control to provide a large amount of freeform text
  • <TextLink> - Directs visitors to another location
  • <Thumbnail> - Visual anchors and identifiers for objects
  • <Tile> - A themable container that display information related to a single subject or destination
  • <Timestamp> - Presents a date with humanized phrasing
  • <Toggle> - A control for a single action with a clear on/off or start/stop.
  • <Tooltip> - Provides context in a small popup container
  • <TreeView> - A way to view and manipulate a list of data
  • <Typography> - A set of components in many typographical variations

Contributing

Read our contribution guidelines here: CONTRIBUTING.md