en.yml

id: test-page
fields:
  pageTitle: Test | Sitecore JSS
placeholders:
  jss-main:
  - componentName: Hero
    fields:
      image:
        src: /data/media/img/test.jpg
        alt: Hero Image
      video:
        src: /data/media/videos/test.mp4
      heading: Lorem Ipsum
      subheading: Foo Bar
      card:
        id: hero-card-default
      stats:
      - id: hero-stat-default
      - id: hero-stat-default
      - id: hero-stat-default
      disclaimer:
        id: image-disclaimer-options-shown-white-bottom-right

Hero.sitecore.js

 // eslint-disable-next-line no-unused-vars
import { CommonFieldTypes, SitecoreIcon, Manifest } from '@sitecore-jss/sitecore-jss-manifest';
import packageJson from '../../../package.json';

export default function(manifest) {
  manifest.addComponent({
    name: 'Hero',
    icon: SitecoreIcon.DocumentTag,
    fields: [
      { name: 'image', type: CommonFieldTypes.Image },
      { name: 'video', type: CommonFieldTypes.File },
      { name: 'heading', type: CommonFieldTypes.SingleLineText },
      { name: 'subheading', type: CommonFieldTypes.SingleLineText },
      { 
        //this doesn't
        name: 'card',
        type: CommonFieldTypes.ItemLink,
        source: `dataSource=/sitecore/content/${packageJson.config.appName}/Content/HeroCards`
      },
      { 
        //this works
        name: 'stats',
        type: CommonFieldTypes.ContentList,
        source: `dataSource=/sitecore/content/${packageJson.config.appName}/Content/HeroStats`
      }
    ],
    /*
    If the component implementation uses <Placeholder> or withPlaceholder to expose a placeholder,
    register it here, or components added to that placeholder will not be returned by Sitecore:
    placeholders: ['exposed-placeholder-name']
    */
  });
}

HeroCard.sitecore.js

import { CommonFieldTypes, SitecoreIcon, Manifest } from '@sitecore-jss/sitecore-jss-manifest';
import packageJson from '../../../package.json';

export default function(manifest) {
  manifest.addComponent({
    name: 'HeroCard',
    icon: SitecoreIcon.DocumentTag,
    fields: [
      { 
        name: 'stats',
        type: CommonFieldTypes.ContentList,
        source: `dataSource=/sitecore/content/${packageJson.config.appName}/Content/HeroStats`
      },
      { name: 'position', type: CommonFieldTypes.SingleLineText }
    ],
  });
}

HeroCards en.yml

id: hero-card-default
displayName: Default Hero Stat
template: HeroCard
fields:
  stats:
  - id: hero-stat-default
  - id: hero-stat-default
  - id: hero-stat-default
  position: bottom

HeroStat.sitecore.js

import { CommonFieldTypes, SitecoreIcon, Manifest } from '@sitecore-jss/sitecore-jss-manifest';
import packageJson from '../../../package.json';

export default function(manifest) {
  manifest.addComponent({
    name: 'HeroStat',
    icon: SitecoreIcon.DocumentTag,
    fields: [
      { name: 'topLabel', type: CommonFieldTypes.SingleLineText },
      { 
        name: 'topLabelDisclaimer',
        type: CommonFieldTypes.ItemLink,
        source: `dataSource=/sitecore/content/${packageJson.config.appName}/Content/Disclaimers`
      },
      { name: 'stat', type: CommonFieldTypes.SingleLineText },
      {
        name: 'statDisclaimer',
        type: CommonFieldTypes.ItemLink,
        source: `dataSource=/sitecore/content/${packageJson.config.appName}/Content/Disclaimers`
      },
      { name: 'bottomLabel', type: CommonFieldTypes.SingleLineText }
    ],
  });
}

HeroStats en.yml

id: hero-stat-default
displayName: Default Hero Stat
template: HeroStat
fields:
  topLabel: Top Label
  topLabelDisclaimer:
    id: disclaimer-default
  stat: Some Stat Value
  statDisclaimer:
    id: disclaimer-default
  bottomLabel: Bottom Label