History

Kelly Dwan 29136ce44c Show real orders in the sidebar orders tab (https://github.com/woocommerce/woocommerce-admin/pull/105 ) * Add an activity list component which will fetch and display the respective tabs’ content * Add currency and order calculation helpers from Calypso * Add date support to ActivityCard * Fix the product label when there’s only 1 product * Only display the orders on the orders tab * Remove demo component * PR feedback - Switch to function components - Check isLoading for showing loading state - use v3 of WC API - Remove getOrderShippingMethod (it’s not a tax-related function) - Switch to array.reduce - Add `\|\| 0` protect to all possible API-based calculations		2018-06-07 12:05:22 -04:00
..
README.md	Add ActivityCard component (https://github.com/woocommerce/woocommerce-admin/pull/86 )	2018-05-25 15:34:35 -04:00
index.js	Show real orders in the sidebar orders tab (https://github.com/woocommerce/woocommerce-admin/pull/105 )	2018-06-07 12:05:22 -04:00
style.scss	Add CSS naming conventions following Gutenberg’s standards (https://github.com/woocommerce/woocommerce-admin/pull/99 )	2018-06-01 10:35:18 -04:00

README.md

ActivityCard

A card designed for use in the timeline/sidebar. 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
      label="Insight"
      icon={ <Dashicon icon="search" /> }
      date="30 minutes ago"
      actions={ [ <a href="/">Action link</a>, <a href="/">Action link 2</a> ] }
      image={ <Dashicon icon="palmtree" /> }
    >
      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

label: A title for this card (required).
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 used to label this activity. Defaults to "warning".
image: An image show in this card. Can be img or Dashicon (or any renderable element).
menu: A dropdown menu (EllipsisMenu) shown at the top-right of the card.