added alpha example

ONSdigital · Jul 23, 2021 · 3a03b8e · 3a03b8e
1 parent 19c0413
commit 3a03b8e
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 2 deletions.
diff --git a/src/components/phase-banner/examples/phase-banner-alpha/index.njk b/src/components/phase-banner/examples/phase-banner-alpha/index.njk
@@ -0,0 +1,10 @@
+---
+"fullWidth": true
+---
+{% from "components/phase-banner/_macro.njk" import onsPhaseBanner %}
+{{
+    onsPhaseBanner({
+        "badge": "Alpha",
+        "html": 'This is a new service – your <a href="#feedback">feedback</a> will help us improve it.'
+    })
+}}
diff --git a/...se-banner/examples/phase-banner/index.njk → ...nner/examples/phase-banner-beta/index.njk b/...se-banner/examples/phase-banner/index.njk → ...nner/examples/phase-banner-beta/index.njk
diff --git a/src/components/phase-banner/index.njk b/src/components/phase-banner/index.njk
@@ -8,7 +8,11 @@ title: Phase banner
 The Phase banner lets users know the service is new and still being worked on, and encourages the user to provide feedback to help improve it.
 
 {{
-    patternlibExample({"path": "components/phase-banner/examples/phase-banner/index.njk"})
+    patternlibExample({"path": "components/phase-banner/examples/phase-banner-alpha/index.njk"})
+}}
+
+{{
+    patternlibExample({"path": "components/phase-banner/examples/phase-banner-beta/index.njk"})
 }}
 
 ## When to use this component

diff --git a/src/styles/grid/index.njk b/src/styles/grid/index.njk
@@ -129,7 +129,7 @@ The example below shows the use of flexbox to create the layout for the [phase b
 
 {{
     patternlibExample({
-        "path": "components/phase-banner/examples/phase-banner/index.njk",
+        "path": "components/phase-banner/examples/phase-banner-beta/index.njk",
         "openTab": "html"
     })
 }}