From c04ec67176d69f6171f6a1ad338d942a8947935b Mon Sep 17 00:00:00 2001
From: Tilly Woodfield <22456167+tillywoodfield@users.noreply.github.com>
Date: Wed, 29 May 2024 11:12:24 +0300
Subject: [PATCH] feat: add title bar layout component

---
 src/scss/layout/_index.scss                   |  1 +
 src/scss/layout/title-bar/_title-bar.scss     | 36 +++++++++++++++++++
 .../layout/title-bar/title-bar.stories.ts     | 18 ++++++++++
 3 files changed, 55 insertions(+)
 create mode 100644 src/scss/layout/title-bar/_title-bar.scss
 create mode 100644 src/scss/layout/title-bar/title-bar.stories.ts

diff --git a/src/scss/layout/_index.scss b/src/scss/layout/_index.scss
index 5a34fe6..5413ef1 100644
--- a/src/scss/layout/_index.scss
+++ b/src/scss/layout/_index.scss
@@ -1 +1,2 @@
 @forward "header/header";
+@forward "title-bar/title-bar";
diff --git a/src/scss/layout/title-bar/_title-bar.scss b/src/scss/layout/title-bar/_title-bar.scss
new file mode 100644
index 0000000..0ee4e90
--- /dev/null
+++ b/src/scss/layout/title-bar/_title-bar.scss
@@ -0,0 +1,36 @@
+@use "../../tokens/color" as *;
+@use "../../tokens/spacing" as *;
+@use "../../base/mixins";
+
+.iati-title-bar {
+  background-color: $color-teal-90;
+
+  &__title {
+    @include mixins.page-width-container();
+    color: white;
+    font-weight: bold;
+    font-size: 2.5rem;
+    padding: 1.2em $padding-block;
+    position: relative;
+
+    &:before {
+      content: "";
+      border-left: $border-width solid $color-teal-50;
+      padding: $padding-block;
+    }
+
+    &:after {
+      content: "";
+      position: absolute;
+      top: 0px;
+      right: 0px;
+      bottom: 0px;
+      left: 0px;
+      background-image: url("http://styles.iatistandard.org/assets/svg/source/marque-white.svg");
+      background-repeat: no-repeat;
+      background-position: right center;
+      background-size: 300px;
+      opacity: 0.2;
+    }
+  }
+}
diff --git a/src/scss/layout/title-bar/title-bar.stories.ts b/src/scss/layout/title-bar/title-bar.stories.ts
new file mode 100644
index 0000000..8b5fa63
--- /dev/null
+++ b/src/scss/layout/title-bar/title-bar.stories.ts
@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from "@storybook/web-components";
+
+import { html } from "lit";
+
+const meta: Meta = {
+  title: "Layout/Title Bar",
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const TitleBar: Story = {
+  render: () => html`
+    <div class="iati-title-bar">
+      <div class="iati-title-bar__title">Title</div>
+    </div>
+  `,
+};