woocommerce/plugins/woocommerce-admin/client/activity-panel/activity-card
Joshua T Flowers 7aeb0a19d2 Migrate header items to slot fills (https://github.com/woocommerce/woocommerce-admin/pull/7805)
* Add SlotFill area to header

* Add activity panel fill

* Move activity panel to root client folder

* Move activity panel registration to its own folder

* Add navigation fill

* Add page title slotfill

* Slot fill the back button

* Move mobile banner to slot fill

* Fix navigation fill on embed pages

* Add changelog entry

* Allow order prop to header item fill

* Split header into before and after

* Fix header title gaps

* Fix nav and mobile app banner placement

* Fix display options import

* Only use last item for page header title fill

* Use function to pass fill props instead of bind

* Rename header slots

* Fix mobile banner dismissal check

* Fix up inbox panel rename

* Update task title in tests

* Fix up task status retrieval
2021-12-14 11:56:42 -05:00
..
test Migrate header items to slot fills (https://github.com/woocommerce/woocommerce-admin/pull/7805) 2021-12-14 11:56:42 -05:00
README.md Migrate header items to slot fills (https://github.com/woocommerce/woocommerce-admin/pull/7805) 2021-12-14 11:56:42 -05:00
index.js Migrate header items to slot fills (https://github.com/woocommerce/woocommerce-admin/pull/7805) 2021-12-14 11:56:42 -05:00
placeholder.js Migrate header items to slot fills (https://github.com/woocommerce/woocommerce-admin/pull/7805) 2021-12-14 11:56:42 -05:00
style.scss Migrate header items to slot fills (https://github.com/woocommerce/woocommerce-admin/pull/7805) 2021-12-14 11:56:42 -05:00

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.