7ca9e691d4
* Migrate leaderboard tests to RTL. * Remove test of default prop value. * Migrate ReportSummary tests to RTL. * Migrate ActivityCard tests to RTL. * Migrate ActivityCardPlaceholder tests to RTL. * Migrate remaining ProductType tests to RTL. * Migrate Card tests to RTL. * Update RTL and user event packages. * Migrate Date tests to RTL. * Migrate D3Legend tests to RTL. * Migrate D3Base tests to RTL. * Migrate Gravatar tests to RTL. * Migrate ImageUpload tests to RTL. * Migrate ProductImage tests to RTL. * Migrate Rating tests to RTL. * Migrate Search tests to RTL. * Migrate Plugins tests to RTL. * Migrate SelectControl tests to RTL. * Migrate Timeline tests to RTL. Remove tests that inspect DOM since there are snapshots. * Migrate DismissModal tests to RTL. * Migrate SetupNotice tests to RTL. * Migrate WelcomeCard tests to RTL. * Fix setup error reason retrieval in ShippingBanner. * Migrate ShippingBanner tests to RTL. * Migrate RecommendedExtensions tests to RTL. * Migrate KnowledgeBase tests to RTL. * Rename enzyme setup file, modify to setup RTL. * No need to import jest-dom in test files. * Remove enzyme dependency. * Use snapshot for testing Leaderboard markup. * Switch from "not to be empty" to "be in the document". * No need to waitFor() recordEvent mock. * Be specific about clicking the "hide" button. * Use toBeVisible() instead of checking style property. |
||
|---|---|---|
| .. | ||
| 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.