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/src/styles/2-modules/_banner.scss

@@ -1,25 +0,0 @@
-/* BANNER */
-
-.info-banner {
-    margin: 16px 0;
-    justify-content: center;
-    background: $white;
-    border: 1px solid rgba($lightgray, 0.5);
-    border-radius: 4px;
-    box-sizing: border-box;
-    padding: 16px;
-    background: $white;
-    height: auto;
-    overflow: visible;
-
-    @media screen and (max-width: 600px) {
-        text-align: center;
-    }
-
-    p, .text-body {
-        color: $darkgray;
-        line-height: 32px;
-        margin: 0;
-        text-align: center;
-    }
-}

aio/src/styles/2-modules/_modules-dir.scss

@@ -5,7 +5,6 @@
    @import 'alert';
    @import 'api-pages';
    @import 'api-list';
-   @import 'banner';
    @import 'buttons';
    @import 'callout';
    @import 'card';

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' }
+    ]);
+  });
+});

aio/tools/transforms/templates/api/class.template.html

@@ -4,7 +4,7 @@
 {% extends 'base.template.html' -%}
 
 {% block body %}
-  <p>{$ doc.whatItDoes | marked $}</p>
+  <p class="short-description">{$ doc.shortDescription | marked $}</p>
   {% include "includes/security-notes.html" %}
   {% include "includes/deprecation.html" %}
   {% block overview %}
@@ -25,5 +25,5 @@
 
     {% block annotations %}{% include "includes/annotations.html" %}{% endblock %}
   {% endblock %}
-  {% include "includes/how-to-use.html" %}
+  {% include "includes/usageNotes.html" %}
 {% endblock %}

aio/tools/transforms/templates/api/export-base.template.html

@@ -1,10 +1,10 @@
 {% extends 'base.template.html' -%}
 
 {% block body %}
-  {% include "includes/what-it-does.html" %}
+  <p class="short-description">{$ doc.shortDescription | marked $}</p>
   {% include "includes/security-notes.html" %}
   {% include "includes/deprecation.html" %}
   {% block overview %}{% endblock %}
-  {% include "includes/how-to-use.html" %}
+  {% include "includes/usageNotes.html" %}
   {% block details %}{% endblock %}
 {% endblock %}

aio/tools/transforms/templates/api/includes/class-overview.html

@@ -1,7 +1,6 @@
 {% import "lib/memberHelpers.html" as memberHelper -%}
 
 <section class="{$ doc.docType $}-overview">
-<h2>Overview</h2>
 <code-example language="ts" hideCopy="true">
 {$ doc.docType $} {$ doc.name $}{$ doc.typeParams | escape $}{$ memberHelper.renderHeritage(doc) $} {{$ memberHelper.renderMembers(doc) $}
 }

aio/tools/transforms/templates/api/includes/how-to-use.html

@@ -1,6 +0,0 @@
-{% if doc.howToUse %}
-<section class="how-to-use">
-  <h2>How To Use</h2>
-  {$ doc.howToUse | marked $}
-</section>
-{% endif %}

aio/tools/transforms/templates/api/includes/usageNotes.html

@@ -0,0 +1,6 @@
+{% if doc.usageNotes %}
+<section class="usage-notes">
+  <h2>Usage Notes</h2>
+  {$ doc.usageNotes | marked $}
+</section>
+{% endif %}

aio/tools/transforms/templates/api/includes/what-it-does.html

@@ -1,5 +0,0 @@
-{%- if doc.whatItDoes %}
-<div class="what-it-does info-banner">
-  {$ doc.whatItDoes | marked $}
-</div>
-{% endif %}