build(aio): split the description property in API docs (#22401)

* The first paragraph is now split off into the `shortDescription` property.
* Usage of `howToUse` and `whatItDoes` have been updated.
* The "Overview" heading for class is removed as it is self-evident
* The original horizontal rule styling below the main heading is removed as not part of the new design

Closes #22385

PR Close #22401

aio/tools/transforms/angular-api-package/index.js

@@ -15,6 +15,7 @@ module.exports = new Package('angular-api', [basePackage, typeScriptPackage])
 
   // Register the processors
   .processor(require('./processors/migrateLegacyJSDocTags'))
+  .processor(require('./processors/splitDescription'))
   .processor(require('./processors/convertPrivateClassesToInterfaces'))
   .processor(require('./processors/generateApiListDoc'))
   .processor(require('./processors/addNotYetDocumentedProperty'))
@@ -91,6 +92,10 @@ module.exports = new Package('angular-api', [basePackage, typeScriptPackage])
         parseTagsProcessor.tagDefinitions.concat(getInjectables(requireFolder(__dirname, './tag-defs')));
   })
 
+  .config(function(splitDescription, EXPORT_DOC_TYPES) {
+    // Only split the description on the API docs
+    splitDescription.docTypes = EXPORT_DOC_TYPES;
+  })
 
   .config(function(computePathsProcessor, EXPORT_DOC_TYPES, generateApiListDoc) {
 

aio/tools/transforms/angular-api-package/processors/splitDescription.js

@@ -0,0 +1,28 @@
+/**
+ * Split the descripton (of selected docs) into:
+ * * `shortDescription`: the first paragraph
+ * * `description`: the rest of the paragraphs
+ */
+module.exports = function splitDescription() {
+  return {
+    $runAfter: ['tags-extracted', 'migrateLegacyJSDocTags'],
+    $runBefore: ['processing-docs'],
+    docTypes: [],
+    $process(docs) {
+      docs.forEach(doc => {
+        if (this.docTypes.indexOf(doc.docType) !== -1 && doc.description !== undefined) {
+          const description = doc.description.trim();
+          const endOfParagraph = description.search(/\n\s*\n/);
+          if (endOfParagraph === -1) {
+            doc.shortDescription = description;
+            doc.description = '';
+          } else {
+            doc.shortDescription = description.substr(0, endOfParagraph).trim();
+            doc.description = description.substr(endOfParagraph).trim();
+          }
+        }
+      });
+    }
+  };
+};
+

aio/tools/transforms/angular-api-package/processors/splitDescription.spec.js

@@ -0,0 +1,71 @@
+const testPackage = require('../../helpers/test-package');
+const processorFactory = require('./splitDescription');
+const Dgeni = require('dgeni');
+
+describe('splitDescription processor', () => {
+
+  it('should be available on the injector', () => {
+    const dgeni = new Dgeni([testPackage('angular-api-package')]);
+    const injector = dgeni.configureInjector();
+    const processor = injector.get('splitDescription');
+    expect(processor.$process).toBeDefined();
+  });
+
+  it('should run before the correct processor', () => {
+    const processor = processorFactory();
+    expect(processor.$runBefore).toEqual(['processing-docs']);
+  });
+
+  it('should run after the correct processor', () => {
+    const processor = processorFactory();
+    expect(processor.$runAfter).toEqual(['tags-extracted', 'migrateLegacyJSDocTags']);
+  });
+
+  it('should split the `description` property into the first paragraph and other paragraphs', () => {
+    const processor = processorFactory();
+    processor.docTypes = ['test'];
+    const docs = [
+      { docType: 'test' },
+      { docType: 'test', description: '' },
+      { docType: 'test', description: 'abc' },
+      { docType: 'test', description: 'abc\n' },
+      { docType: 'test', description: 'abc\n\n' },
+      { docType: 'test', description: 'abc\ncde' },
+      { docType: 'test', description: 'abc\ncde\n' },
+      { docType: 'test', description: 'abc\n\ncde' },
+      { docType: 'test', description: 'abc\n  \ncde' },
+      { docType: 'test', description: 'abc\n\n\ncde' },
+      { docType: 'test', description: 'abc\n\ncde\nfgh' },
+      { docType: 'test', description: 'abc\n\ncde\n\nfgh' },
+    ];
+    processor.$process(docs);
+    expect(docs).toEqual([
+      { docType: 'test' },
+      { docType: 'test', shortDescription: '', description: '' },
+      { docType: 'test', shortDescription: 'abc', description: '' },
+      { docType: 'test', shortDescription: 'abc', description: '' },
+      { docType: 'test', shortDescription: 'abc', description: '' },
+      { docType: 'test', shortDescription: 'abc\ncde', description: '' },
+      { docType: 'test', shortDescription: 'abc\ncde', description: '' },
+      { docType: 'test', shortDescription: 'abc', description: 'cde' },
+      { docType: 'test', shortDescription: 'abc', description: 'cde' },
+      { docType: 'test', shortDescription: 'abc', description: 'cde' },
+      { docType: 'test', shortDescription: 'abc', description: 'cde\nfgh' },
+      { docType: 'test', shortDescription: 'abc', description: 'cde\n\nfgh' },
+    ]);
+  });
+
+  it('should ignore docs that do not match the specified doc types', () => {
+    const processor = processorFactory();
+    processor.docTypes = ['test'];
+    const docs = [
+      { docType: 'test', description: 'abc\n\ncde' },
+      { docType: 'other', description: 'abc\n\ncde' }
+    ];
+    processor.$process(docs);
+    expect(docs).toEqual([
+      { docType: 'test', shortDescription: 'abc', description: 'cde' },
+      { docType: 'other', description: 'abc\n\ncde' }
+    ]);
+  });
+});