static,tests: create tabnav component
The tabnav component will be used on the search page
and appears in various places on go.dev
Change-Id: Ibeb96cf7ce338cbc36eb96705876e70e86c89a0b
Reviewed-on: https://go-review.googlesource.com/c/pkgsite/+/347396
Trust: Jamal Carvalho <jamal@golang.org>
Run-TryBot: Jamal Carvalho <jamal@golang.org>
Reviewed-by: Jonathan Amsterdam <jba@google.com>
diff --git a/static/shared/shared.css b/static/shared/shared.css
index 3c1e1c2..685a07e 100644
--- a/static/shared/shared.css
+++ b/static/shared/shared.css
@@ -24,6 +24,7 @@
@import url('./message/message.css');
@import url('./modal/modal.css');
@import url('./outline/tree.css');
+@import url('./tabnav/tabnav.css');
@import url('./tooltip/tooltip.css');
:root {
diff --git a/static/shared/tabnav/tabnav.css b/static/shared/tabnav/tabnav.css
new file mode 100644
index 0000000..e63f3cf
--- /dev/null
+++ b/static/shared/tabnav/tabnav.css
@@ -0,0 +1,34 @@
+/*!
+ * Copyright 2021 The Go Authors. All rights reserved.
+ * Use of this source code is governed by a BSD-style
+ * license that can be found in the LICENSE file.
+ */
+
+.go-TabNav {
+ margin: 0 0 0.5rem 0;
+}
+.go-TabNav ul {
+ display: flex;
+ gap: 2rem;
+}
+.go-TabNav li {
+ border-bottom: 0.25rem transparent solid;
+ display: inline-block;
+ font-size: 1rem;
+ padding: 0.5rem 0.25rem;
+}
+.go-TabNav li[aria-current] {
+ border-color: var(--color-brand-primary);
+}
+.go-TabNav li:hover {
+ border-color: var(--color-brand-primary);
+}
+.go-TabNav a {
+ color: var(--color-text-subtle);
+}
+.go-TabNav li:hover a {
+ text-decoration: none;
+}
+.go-TabNav li[aria-current] a {
+ color: var(--color-text);
+}
diff --git a/static/shared/tabnav/tabnav.md b/static/shared/tabnav/tabnav.md
new file mode 100644
index 0000000..1f51430
--- /dev/null
+++ b/static/shared/tabnav/tabnav.md
@@ -0,0 +1,13 @@
+## Tab Nav
+
+---
+
+```html
+<nav class="go-TabNav">
+ <ul>
+ <li aria-current="page"><a href="#nav-tab">Package</a></li>
+ <li><a href="#nav-tab">Symbol</a></li>
+ </ul>
+ <hr />
+</nav>
+```
\ No newline at end of file
diff --git a/tests/e2e/__image_snapshots__/ci/styleguide--screenshot-snap.png b/tests/e2e/__image_snapshots__/ci/styleguide--screenshot-snap.png
new file mode 100644
index 0000000..dff4cfe
--- /dev/null
+++ b/tests/e2e/__image_snapshots__/ci/styleguide--screenshot-snap.png
Binary files differ
diff --git a/tests/e2e/styleguide/config.yaml b/tests/e2e/styleguide/config.yaml
new file mode 100644
index 0000000..4b4f4ca
--- /dev/null
+++ b/tests/e2e/styleguide/config.yaml
@@ -0,0 +1,3 @@
+experiments:
+ - name: styleguide
+ rollout: 100
diff --git a/tests/e2e/styleguide/seed.txt b/tests/e2e/styleguide/seed.txt
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/tests/e2e/styleguide/seed.txt
diff --git a/tests/e2e/styleguide/styleguide.test.ts b/tests/e2e/styleguide/styleguide.test.ts
new file mode 100644
index 0000000..a070515
--- /dev/null
+++ b/tests/e2e/styleguide/styleguide.test.ts
@@ -0,0 +1,19 @@
+/**
+ * @license
+ * Copyright 2020 The Go Authors. All rights reserved.
+ * Use of this source code is governed by a BSD-style
+ * license that can be found in the LICENSE file.
+ */
+
+import * as pg from '../helpers/page';
+
+test('screenshot', async () => {
+ const page = await pg.newPage();
+ await pg.fullScreenshotTest(page, {
+ path: '/styleguide',
+ });
+});
+
+test('no page errors', () => {
+ expect(pageErrors).toHaveLength(0);
+});
