b448ff60b7
Fixes woocommerce/woocommerce-admin#4732 This updates `@wordpress/base-styles`, and because `@wordpress/components` depends on variables from it, that must be updated as well. There are 3 major changes required as part of updating: 1. The $theme-color variable is no longer exposed by base-styles. Instead there are 3 css vars exposed. These are made available by use of a provided mixin. Situations where $theme-color was darkened using scss have been mapped as best as possible to the 2 other darkened shades of the css var that are available such as `--wp-admin-theme-color-darker-20` and `--wp-admin-theme-color-darker-10`. In some cases this means the colors are not exactly the same as before. 2. The post css `theme()` call is no longer available. All uses of this have been consolidated to use of the main theme css var `--wp-admin-theme-color`. This means that calls like `theme(secondary)` or `theme(outline)` etc have all been consolidated to the one color. 3. Many of the variables used for different shades of gray have been deprecated. These have been mapped across to the new gray variables. (Mapped according to the list described in woocommerce/woocommerce-admin#4732) |
||
|---|---|---|
| .. | ||
| test | ||
| README.md | ||
| index.js | ||
| placeholder.js | ||
| style.scss | ||
README.md
ActivityCard
A card designed for use in the activity panel. This is a very structured component, which expects at minimum a label and content. It can optionally also include a date, actions, an image, and a dropdown menu.
How to use:
import { ActivityCard } from 'components/activity-card';
render: function() {
return (
<ActivityCard
title="Insight"
icon={ <Gridicon icon="search" /> }
date="2018-07-10T00:00:00Z"
actions={ [ <a href="/">Action link</a>, <a href="/">Action link 2</a> ] }
>
Insight content goes in this area here. It will probably be a couple of lines long and may
include an accompanying image. We might consider color-coding the icon for quicker
scanning.
</ActivityCard>
);
}
Props
title: A title for this card (required).subtitle: An element rendered right under the title.children: Content used in the body of the action card (required).actions: A list of links or buttons shown in the footer of the card.date: The timestamp associated with this activity.icon: An icon or avatar used to identify this activity. Defaults to Gridicon "notice-outline".unread: If this prop is present, the card has a small red bubble indicating an "unread" item. Defaults to false.
ActivityCardPlaceholder
This component is similar to ActivityCard in output, but renders no real content, just loading placeholders. This is also hidden from any interaction with screen readers using aria-hidden.
How to use:
import { ActivityCardPlaceholder } from 'components/activity-card';
render: function() {
return (
<ActivityCardPlaceholder hasDate />
);
}
Props
hasAction: Boolean. If true, shows a placeholder block for an action. Default false.hasDate: Boolean. If true, shows a placeholder block for the date. Default false.hasSubtitle: Boolean. If true, shows a placeholder block for the subtitle. Default false.lines: Number. How many lines of placeholder content we should show. Default 1.