Add tags to embed snippets in docs

src/walkthrough/components/pages/basicPage/basicPage.container.js

@@ -1,7 +1,10 @@
 // Copyright (c) Microsoft. All rights reserved.
+// <container>
 
 import { translate } from 'react-i18next';
 
 import { BasicPage } from './basicPage';
 
 export const BasicPageContainer = translate()(BasicPage);
+
+// </container>

src/walkthrough/components/pages/basicPage/basicPage.js

@@ -1,5 +1,6 @@
 // Copyright (c) Microsoft. All rights reserved.
 
+// <page>
 import React, { Component } from 'react';
 
 import { PageContent } from 'components/shared';
@@ -16,3 +17,5 @@ export class BasicPage extends Component {
     );
   }
 }
+
+// </page>

src/walkthrough/components/pages/basicPage/basicPage.scss

@@ -1,7 +1,9 @@
 // Copyright (c) Microsoft. All rights reserved.
 
+// <styles>
 @import 'src/styles/variables';
 @import 'src/styles/mixins';
 @import 'src/styles/themes';
 
 .basic-page-container { padding: $baseContentPadding; }
+// </styles>

src/walkthrough/components/pages/basicPage/basicPage.test.js

@@ -1,5 +1,6 @@
 // Copyright (c) Microsoft. All rights reserved.
 
+// <test>
 import React from 'react';
 import { shallow } from 'enzyme';
 import 'polyfills';
@@ -18,3 +19,5 @@ describe('BasicPage Component', () => {
     );
   });
 });
+
+// </test>

src/walkthrough/components/pages/dashboard/panels/examplePanel/examplePanel.js

@@ -1,5 +1,6 @@
 // Copyright (c) Microsoft. All rights reserved.
 
+// <panel>
 import React, { Component } from 'react';
 
 import {
@@ -33,3 +34,4 @@ export class ExamplePanel extends Component {
     );
   }
 }
+// </panel>

src/walkthrough/components/pages/pageWithFlyout/flyouts/exampleFlyout/exampleFlyout.container.js

@@ -1,7 +1,10 @@
 // Copyright (c) Microsoft. All rights reserved.
 
+// <flyoutcontainer>
 import { translate } from 'react-i18next';
 
 import { ExampleFlyout } from './exampleFlyout';
 
 export const ExampleFlyoutContainer = translate()(ExampleFlyout);
+
+// </flyoutcontainer>

src/walkthrough/components/pages/pageWithFlyout/flyouts/exampleFlyout/exampleFlyout.js

@@ -1,5 +1,6 @@
 // Copyright (c) Microsoft. All rights reserved.
 
+// <flyout>
 import React, { Component } from 'react';
 
 import { ExampleService } from 'walkthrough/services';
@@ -140,3 +141,4 @@ export class ExampleFlyout extends Component {
     );
   }
 }
+// </flyout>

src/walkthrough/components/pages/pageWithGrid/exampleGrid/exampleGrid.js

@@ -1,5 +1,7 @@
 // Copyright (c) Microsoft. All rights reserved.
 
+// <grid>
+
 import React, { Component } from 'react';
 import { Btn, PcsGrid } from 'components/shared';
 import { exampleColumnDefs, defaultExampleGridProps } from './exampleGridConfig';
@@ -122,3 +124,4 @@ export class ExampleGrid extends Component {
     );
   }
 }
+// </grid>

src/walkthrough/components/pages/pageWithGrid/exampleGrid/exampleGridConfig.js

@@ -1,5 +1,7 @@
 // Copyright (c) Microsoft. All rights reserved.
 
+// <gridconfig>
+
 import Config from 'app.config';
 import { SoftSelectLinkRenderer } from 'components/shared/cellRenderers';
 
@@ -28,3 +30,5 @@ export const defaultExampleGridProps = {
   paginationPageSize: Config.paginationPageSize,
   rowSelection: 'multiple'
 };
+
+// </gridconfig>

src/walkthrough/services/exampleService.js

@@ -1,5 +1,7 @@
 // Copyright (c) Microsoft. All rights reserved.
 
+// <service>
+
 import { Observable } from 'rxjs';
 import { toExampleItemModel, toExampleItemsModel } from './models';
 
@@ -43,3 +45,4 @@ export class ExampleService {
     return this.getExampleItems().delay(2000);
   }
 }
+// </service>

src/walkthrough/services/models/exampleModels.js

@@ -1,5 +1,6 @@
 // Copyright (c) Microsoft. All rights reserved.
 
+// <models>
 import { camelCaseReshape, getItems } from 'utilities';
 
 /**
@@ -15,3 +16,5 @@ export const toExampleItemModel = (data = {}) => camelCaseReshape(data, {
 
 export const toExampleItemsModel = (response = {}) => getItems(response)
   .map(toExampleItemModel);
+
+// </models>

src/walkthrough/store/reducers/exampleReducer.js

@@ -1,5 +1,6 @@
 // Copyright (c) Microsoft. All rights reserved.
 
+// <reducer>
 import 'rxjs';
 import { Observable } from 'rxjs';
 import moment from 'moment';
@@ -81,3 +82,5 @@ export const getExamples = createSelector(
   (entities, items) => items.map(id => entities[id])
 );
 // ========================= Selectors - END
+
+// </reducer>