Amend PhaseBanner to use new liquid template

Author: gunndabad

docs/components/phase-banner.md

@@ -1,8 +1,11 @@
-# Phase banner
+<!-- Generated from src/GovUk.Frontend.AspNetCore.Docs/Templates/components/phase-banner.liquid -->
+# GOV.UK footer
 
-[GDS Phase banner component](https://design-system.service.gov.uk/components/phase-banner/)
+[GOV.UK Design System GOV.UK phase banner component](https://design-system.service.gov.uk/components/phase-banner/)
 
-## Example
+
+### Example
+<img alt="Phase banner example" src="../images/phase-banner-example.png" />
 
 ```razor
 <govuk-phase-banner>
@@ -11,16 +14,15 @@
 </govuk-phase-banner>
 ```
 
-![Phase banner](../images/phase-banner.png)
 
-## API
+### API
+
+#### `<govuk-phase-banner>`
 
-### `<govuk-phase-banner>`
 
-The content is the HTML to use within the generated component.
+#### `<govuk-phase-banner-tag>`
 
-### `<govuk-phase-banner-tag>`
+The content is the HTML to use for the tag in the phase banner.
 
-*Required*\
-The content is the HTML to use within the phase banner tag.\
 Must be inside a `<govuk-phase-banner>` element.
+

docs/images/phase-banner-example.png

@@ -11,6 +11,7 @@
 
   <ItemGroup>
     <_ContentIncludedByDefault Remove="Pages\ServiceNavigation\Default.cshtml" />
+    <_ContentIncludedByDefault Remove="Pages\PhaseBanner\PhaseBanner.cshtml" />
   </ItemGroup>
 
 </Project>

docs/images/phase-banner.png

@@ -81,7 +81,6 @@ await WriteScreenshots(new[]
             ("SummaryList/SummaryListWithActions", "summary-list-with-actions.png"),
             ("SummaryList/SummaryListWithCard", "summary-list-with-card.png"),
             ("SummaryList/SummaryListWithoutActions", "summary-list-without-actions.png"),
-            ("PhaseBanner/PhaseBanner", "phase-banner.png"),
             ("Tabs/Tabs", "tabs.png"),
             ("Tag/DefaultTag", "tag-default.png"),
             ("Tag/TagWithClass", "tag-with-class.png"),

src/GovUk.Frontend.AspNetCore.DocSamples/GovUk.Frontend.AspNetCore.DocSamples.csproj

@@ -0,0 +1,8 @@
+@page
+
+<example>
+    <govuk-phase-banner>
+        <govuk-phase-banner-tag>Alpha</govuk-phase-banner-tag>
+        This is a new service - your <a href="#" class="govuk-link">feedback</a> will help us to improve it.
+    </govuk-phase-banner>
+</example>

src/GovUk.Frontend.AspNetCore.DocSamples/Pages/PhaseBanner/PhaseBanner.cshtml

@@ -0,0 +1,16 @@
+# GOV.UK footer
+
+[GOV.UK Design System GOV.UK phase banner component](https://design-system.service.gov.uk/components/phase-banner/)
+
+
+### Example
+{{ tag_helper_example(
+  "Examples/PhaseBanner/PhaseBannerExample",
+  "phase-banner-example.png",
+  "Phase banner example") }}
+
+### API
+
+{{ tag_helper_api("PhaseBannerTagHelper") }}
+
+{{ tag_helper_api("PhaseBannerTagTagHelper") }}

src/GovUk.Frontend.AspNetCore.DocSamplesScreenshotter/Program.cs

@@ -14,6 +14,7 @@ internal static class ComponentElementTypes
         public const string Header = "header";
         public const string InsetText = "div";
         public const string Pagination = "nav";
+        public const string PhaseBanner = "div";
         public const string SkipLink = "a";
         public const string SummaryCard = "div";
         public const string SummaryList = "dl";