feat(tabs) Add documentation

tournantdev · Jan 20, 2020 · 259922c · 259922c
1 parent 796167b
commit 259922c
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 5 deletions.
diff --git a/packages/tabs/README.md b/packages/tabs/README.md
@@ -17,24 +17,48 @@ yarn add @tournant/tabs
 Once the component is installed you need to import it wherever you want to use it.
 
 ```js
-import TournantTabs from '@tournant/tabs'
+import {  TournantTabsWidget, TournantTab, TournantTabpanel  } from '@tournant/tabs'
 ```
 
 Don’t forget to add it to the registered components (been there, done that):
 
 ```js
 components: {
-  TournantTabs,
+   TournantTabsWidget, 
+   TournantTab,
+   TournantTabpanel
   // ... all the other amazing components
 }
 ```
 
 ## Usage
 
-Insert usage guide here
+At first, use the wrapper  called `TournantTabsWidget`. Inside it establish two slot areas:
+- one named "tabs"
+- one named "panels".
+
+Inside them, place the triggers inside tabs, and the panel content inside panels, like this:
+
+```
+<tournant-tabs-widget initial="foo">
+    <template slot="tabs">
+        <tournant-tab name="foo">Item 1</tournant-tab>
+        <tournant-tab name="bar">Item 2</tournant-tab>
+        <tournant-tab name="baz">Item 3</tournant-tab>
+    </template>
+    <template slot="panels">
+        <tournant-tabpanel name="foo">Panel 1</tournant-tabpanel>
+        <tournant-tabpanel name="bar">Panel 2</tournant-tabpanel>
+        <tournant-tabpanel name="baz">Panel 3</tournant-tabpanel>
+    </template>
+</tournant-tabs-widget>
+```
+Finally, decide on the initial tab. Pass the tab/panel name into `<TournantTabsWidget>`'s initial prop.
 
 ## Bugs & Enhancements
 
+Note that this component follows the [WAI ARIA tabpanel Authoring Practice](https://www.w3.org/TR/wai-aria-practices-1.1/#tabpanel).
+
 If you found a bug, please create a [bug ticket](https://github.com/tournantdev/ui/issues/new?assignees=&labels=component:tabs&template=bug_report.md&title=).
 
 For enhancements please refer to the [contributing guidelines](https://github.com/tournantdev/ui/blob/master/CONTRIBUTING.md).
diff --git a/packages/tabs/package.json b/packages/tabs/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@tournant/tabs",
   "version": "0.1.0",
-  "description": "A",
+  "description": "An accessible implementation of a tabpanel widget",
   "keywords": [],
   "main": "./dist/tabs.ssr.js",
   "module": "./dist/tabs.js",
@@ -13,7 +13,7 @@
   "repository": "https://github.com/tournantdev/ui",
   "bugs": "https://github.com/tournantdev/ui/issues",
   "homepage": "https://ui.tournant.dev",
-  "author": "Oscar Braunert",
+  "author": "Marcus Herrmann",
   "license": "MIT",
   "scripts": {
     "build": "rollup -c ../../_build/rollup.config.js --environment BUILD:production",

diff --git a/ui/index.html b/ui/index.html
@@ -130,6 +130,24 @@ <h3 class="component-card__title">
 							>
 						</article>
 					</li>
+					<li class="component-card">
+						<article>
+							<h3 class="component-card__title">
+								<span style="font-weight: 300;">@tournant/</span>tabs
+							</h3>
+							<p>An accessible implementation of a tabpanel widget</p>
+							<a
+									href="https://www.npmjs.com/package/@tournant/tabs"
+									class="component-card__link"
+							><span class="sr-only">tabs</span> package link</a
+							>
+							<a
+									href="https://github.com/tournantdev/ui/tree/master/packages/tabs"
+									class="component-card__link"
+							><span class="sr-only">tabs</span> source code</a
+							>
+						</article>
+					</li>
 				</ul>
 			</section>
 			<section class="components">