Jhernandez has uploaded a new change for review. (
https://gerrit.wikimedia.org/r/379739 )
Change subject: Chore: Add Header component to be used as chrome header
......................................................................
Chore: Add Header component to be used as chrome header
Based on the design specs on zeplin for the Branding improvements on
MobileFrontend.
* Added Header component
* It features an extra center section that is not used now, but will
be used for the search input on desktop layouts in the future
* Added style guide example to be tested
Will be used in the application chrome next.
Bug: T173022
Change-Id: Id4096d7552afb8b3376e4835d8c84484c7af81f2
---
A src/common/components/header/header.css
A src/common/components/header/header.tsx
M src/common/pages/style-guide.tsx
3 files changed, 64 insertions(+), 0 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/marvin refs/changes/39/379739/1
diff --git a/src/common/components/header/header.css
b/src/common/components/header/header.css
new file mode 100644
index 0000000..fe36b98
--- /dev/null
+++ b/src/common/components/header/header.css
@@ -0,0 +1,35 @@
+.Header {
+ /* Header height set by design spec */
+ height: 60px;
+
+ /* Evenly space out placeholders and vertically align them */
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+
+ /* Spacing */
+ padding: 0 var(--space);
+}
+
+/* Vertically align placeholder's contents too */
+.Header-left,
+.Header-right,
+.Header-center {
+ display: flex;
+ align-items: center;
+}
+
+.Header-left > * {
+ /* Contained items on the left part are spaced to the right */
+ margin-right: var(--space);
+}
+.Header-right > * {
+ /* Contained items on the right part are spaced to the left */
+ margin-left: var(--space);
+}
+
+.Header-wordmark {
+ /* Per design specs, wordmark needs extra separation between the menu icon
and
+ itself */
+ margin-left: var(--half-space);
+}
diff --git a/src/common/components/header/header.tsx
b/src/common/components/header/header.tsx
new file mode 100644
index 0000000..3d05091
--- /dev/null
+++ b/src/common/components/header/header.tsx
@@ -0,0 +1,24 @@
+import { h } from "preact";
+import Icon, { menu, search } from "../icon/icon";
+import Wordmark from "../wordmark/wordmark";
+import Link from "../link";
+
+import "./header.css";
+
+export default function Header(): JSX.Element {
+ return (
+ <div className="Header">
+ <div className="Header-left">
+ <Icon svg={menu} />
+ <Link href="/" class="Header-wordmark">
+ <Wordmark />
+ </Link>
+ </div>
+ {/* The center placeholder will be used later for desktop sizes */}
+ <div className="Header-center" />
+ <div className="Header-right">
+ <Icon svg={search} />
+ </div>
+ </div>
+ );
+}
diff --git a/src/common/pages/style-guide.tsx b/src/common/pages/style-guide.tsx
index 37d02bd..6d584af 100644
--- a/src/common/pages/style-guide.tsx
+++ b/src/common/pages/style-guide.tsx
@@ -4,6 +4,7 @@
import Page from "../components/page/page";
import Content from "../components/content/content";
import Separator from "../components/separator/separator";
+import Header from "../components/header/header";
const lorem = `
Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident quisquam
@@ -16,6 +17,10 @@
<h1 style={{ margin: "var(--double-space)", textAlign: "center" }}>
Style guide
</h1>
+
+ <Card header={<h3>Header</h3>}>
+ <Header />
+ </Card>
<Card header={<h3>Card</h3>}>
<p>{lorem}</p>
</Card>
--
To view, visit https://gerrit.wikimedia.org/r/379739
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: Id4096d7552afb8b3376e4835d8c84484c7af81f2
Gerrit-PatchSet: 1
Gerrit-Project: marvin
Gerrit-Branch: master
Gerrit-Owner: Jhernandez <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
