GW-106 Add subtle modifier for action banner

nice-digital · Jun 21, 2018 · 06b62d0 · 06b62d0
1 parent 206e2d9
commit 06b62d0
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 6 deletions.
diff --git a/server/views/components/action-banner.njk b/server/views/components/action-banner.njk
@@ -6,8 +6,30 @@
 
 	<div class="container">
 		<h1>Action banner</h1>
-	</div>
 
-	{{ actionBanner({ title: "This is a title", body: "This is some body copy", cta: { text: "Button text", href: "/button-href" } }) }}
+		<h2>Normal</h2>
+
+		{{ actionBanner({
+			title: "This is a title",
+			body: "This is some body copy",
+			cta: {
+				text: "Link text",
+				href: "/button-href",
+				modifier: "inverse"
+			}
+		}) }}
+
+		<h2>Subtle</h2>
 
+		{{ actionBanner({
+			modifier: "subtle",
+			title: "This is a title",
+			body: "This is some body copy",
+			cta: {
+				text: "Button text",
+				modifier: "secondary"
+			}
+		}) }}
+
+	</div>
 {% endblock %}
diff --git a/src/components/action-banner/_action-banner.scss b/src/components/action-banner/_action-banner.scss
@@ -4,6 +4,8 @@
 
 /// Action banner component. Used to highlight
 /// and give context to a call-to-action.
+/// Modifiers:
+/// - subtle
 ///
 /// @since 0.3.1
 .action-banner {
@@ -13,6 +15,12 @@
   margin: em($spacing-large 0);
   padding: em($spacing-small 0);
 
+  &--subtle {
+    //@include links-default;
+    background: $colour-panel-default;
+    color: $colour-text;
+  }
+
   &__container {
     @extend %container;
   }

diff --git a/src/components/action-banner/action-banner.njk b/src/components/action-banner/action-banner.njk
@@ -1,6 +1,6 @@
 {% macro actionBanner(actionBanner) %}
 
-	<section class="action-banner">
+	<section class="action-banner{% if actionBanner.modifier %} action-banner--{{ actionBanner.modifier }}{% endif %}">
 		<div class="action-banner__container">
 			<div class="action-banner__inner">
 				<div class="action-banner__text">
@@ -12,9 +12,15 @@
 					</p>
 				</div>
 				<div class="action-banner__actions">
-					<a href="{{ actionBanner.cta.href }}" class="btn btn--inverse">
-						{{ actionBanner.cta.text }}
-					</a>
+					{% if actionBanner.cta.href %}
+						<a href="{{ actionBanner.cta.href }}" class="btn{% if actionBanner.cta.modifier %} btn--{{ actionBanner.cta.modifier }}{% endif %}">
+							{{ actionBanner.cta.text }}
+						</a>
+					{% else %}
+						<button type="btn" class="btn{% if actionBanner.cta.modifier %} btn--{{ actionBanner.cta.modifier }}{% endif %}">
+							{{ actionBanner.cta.text }}
+						</button>
+					{% endif %}
 				</div>
 			</div>
 		</div>