woocommerce/plugins/woocommerce-admin/docs/components
Jeff Stieler 32018506dc Generate TextControlWithAffixes documentation from the component itself. 2018-12-13 09:21:47 -07:00
..
README.md Documentation: Move topic READMEs into docs for discoverability (https://github.com/woocommerce/woocommerce-admin/pull/469) 2018-09-24 11:22:14 -04:00
_sidebar.md Generate TextControlWithAffixes documentation from the component itself. 2018-12-13 09:21:47 -07:00
animation-slider.md Docs Project: Add markdown files, docsify to render site (https://github.com/woocommerce/woocommerce-admin/pull/337) 2018-08-31 16:13:20 -04:00
calendar.md Docs Project: Add markdown files, docsify to render site (https://github.com/woocommerce/woocommerce-admin/pull/337) 2018-08-31 16:13:20 -04:00
card.md Updates docs files (https://github.com/woocommerce/woocommerce-admin/pull/769) 2018-11-04 16:25:00 -05:00
chart.md Make ChartPlaceholder have the same height than the resulting Chart (https://github.com/woocommerce/woocommerce-admin/pull/908) 2018-11-23 07:54:53 -06:00
count.md Docs Project: Add markdown files, docsify to render site (https://github.com/woocommerce/woocommerce-admin/pull/337) 2018-08-31 16:13:20 -04:00
dropdown-button.md Build: Move components to packages dir (https://github.com/woocommerce/woocommerce-admin/pull/804) 2018-11-15 13:16:23 -05:00
ellipsis-menu.md Docs Project: Add markdown files, docsify to render site (https://github.com/woocommerce/woocommerce-admin/pull/337) 2018-08-31 16:13:20 -04:00
empty-content.md Build: Update packages (https://github.com/woocommerce/woocommerce-admin/pull/434) 2018-09-18 17:37:57 -04:00
filters.md Update docs and remove reference to internal components 2018-12-11 11:27:32 +13:00
flag.md Docs Project: Add markdown files, docsify to render site (https://github.com/woocommerce/woocommerce-admin/pull/337) 2018-08-31 16:13:20 -04:00
gravatar.md Docs Project: Add markdown files, docsify to render site (https://github.com/woocommerce/woocommerce-admin/pull/337) 2018-08-31 16:13:20 -04:00
image-asset.md Build: Update packages (https://github.com/woocommerce/woocommerce-admin/pull/434) 2018-09-18 17:37:57 -04:00
link.md Docs Project: Add markdown files, docsify to render site (https://github.com/woocommerce/woocommerce-admin/pull/337) 2018-08-31 16:13:20 -04:00
order-status.md Docs Project: Add markdown files, docsify to render site (https://github.com/woocommerce/woocommerce-admin/pull/337) 2018-08-31 16:13:20 -04:00
pagination.md Docs Project: Add markdown files, docsify to render site (https://github.com/woocommerce/woocommerce-admin/pull/337) 2018-08-31 16:13:20 -04:00
product-image.md Add ProductImage to variations autocompleter (https://github.com/woocommerce/woocommerce-admin/pull/832) 2018-11-13 09:40:17 -06:00
rating.md Docs Project: Add markdown files, docsify to render site (https://github.com/woocommerce/woocommerce-admin/pull/337) 2018-08-31 16:13:20 -04:00
search.md Update docs and remove reference to internal components 2018-12-11 11:27:32 +13:00
section-header.md Updates docs files (https://github.com/woocommerce/woocommerce-admin/pull/769) 2018-11-04 16:25:00 -05:00
section.md Update `layout/*` file structure (https://github.com/woocommerce/woocommerce-admin/pull/463) 2018-09-21 11:19:05 -04:00
segmented-selection.md Docs Project: Add markdown files, docsify to render site (https://github.com/woocommerce/woocommerce-admin/pull/337) 2018-08-31 16:13:20 -04:00
split-button.md Docs Project: Add markdown files, docsify to render site (https://github.com/woocommerce/woocommerce-admin/pull/337) 2018-08-31 16:13:20 -04:00
summary.md Update docs and remove reference to internal components 2018-12-11 11:27:32 +13:00
table.md Generate TextControlWithAffixes documentation from the component itself. 2018-12-13 09:21:47 -07:00
tag.md Updates docs files (https://github.com/woocommerce/woocommerce-admin/pull/769) 2018-11-04 16:25:00 -05:00
text-control-with-affixes.md Generate TextControlWithAffixes documentation from the component itself. 2018-12-13 09:21:47 -07:00
view-more-list.md Create ViewMoreList component (https://github.com/woocommerce/woocommerce-admin/pull/503) 2018-10-12 23:29:25 +02:00

README.md

Components

This folder contains the WooCommerce-created components. These are exported onto a global, wc.components, for general use.

How to use:

For any files not imported into components/index.js (analytics/*, layout/*, dashboard/*, etc), we can use import { Card, etc … } from @woocommerce/components.

For any component/* files, we should import from component-specific paths, not from component/index.js, to prevent circular dependencies. See components/card/index.js for an example.

import { Card, Link } from '@woocommerce/components';

render: function() {
  return (
    <Card title="Card demo">
      Card content with an <Link href="/">example link.</Link>
    </Card>
  );
}

For external development

External developers will need to enqueue the components library, wc-components, and then can access them from the global.

const { Card, Link } = wc.components;

render: function() {
  return (
    <Card title="Card demo">
      Card content with an <Link href="/">example link.</Link>
    </Card>
  );
}