Merge pull request #3 from Applelo/dev

Add documentation, programmatic control with v-model, fix bugs
Applelo · Nov 14, 2022 · 0b8c664 · 0b8c664
2 parents 50c7f12 + 7887f31
commit 0b8c664
Show file tree

Hide file tree

Showing 47 changed files with 1,481 additions and 733 deletions.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -0,0 +1,76 @@
+name: CI
+
+on:
+  push:
+    branches:
+      - main
+
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  test:
+    runs-on: ${{ matrix.os }}
+
+    strategy:
+      matrix:
+        node-version: [14.x, 16.x]
+        os: [ubuntu-latest, windows-latest, macos-latest]
+      fail-fast: false
+
+    steps:
+      - uses: actions/checkout@v3
+
+      - uses: pnpm/action-setup@v2.2.4
+        with:
+          version: 7
+
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: pnpm
+
+      - name: Install
+        run: pnpm install
+
+      - name: Install Nuxt
+        run: pnpm run -r dev:prepare
+
+      - name: Build
+        run: pnpm run -r build
+
+      - name: Test
+        run: pnpm test
+
+  lint-test:
+    runs-on: ubuntu-latest
+    name: 'Lint: node-16, ubuntu-latest'
+
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+
+      - uses: pnpm/action-setup@v2.2.4
+        with:
+          version: 7
+
+      - name: Set node version to 16
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16
+          cache: pnpm
+
+      - name: Install
+        run: pnpm install
+
+      - name: Install Nuxt
+        run: pnpm run -r dev:prepare
+
+      - name: Build
+        run: pnpm run -r build
+
+      - name: Lint
+        run: pnpm lint
diff --git a/.github/workflows/doc.yml b/.github/workflows/doc.yml
@@ -0,0 +1,31 @@
+name: Deploy Doc
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+      - uses: pnpm/action-setup@v2.2.4
+        with:
+          version: 7
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+          cache: pnpm
+      - run: pnpm install
+
+      - name: Build
+        run: pnpm run -r docs:build
+
+      - name: Deploy
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: packages/documentation/docs/.vitepress/dist
diff --git a/.prettierignore b/.prettierignore
@@ -2,4 +2,5 @@
 node_modules/
 dist/
 LICENSE
-pnpm-lock.yaml
+pnpm-lock.yaml
+.nuxt
diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
-# Zoom Avant
+![Version](https://img.shields.io/github/package-json/v/applelo/zoom-avant) ![node-current (scoped)](https://img.shields.io/node/v/@zoom-avant/vue)
 
-> Currently in _alpha_
+# Zoom Avant
 
 **Zoom Avant** (pronounced /zum a.vɑ̃/) is a drilldown component for VueJS 3.
 
@@ -44,7 +44,7 @@ For **VueJS 3**, import all the components and css styles.
 
 ```vue
 <script setup lang="ts">
-import { ZAvant, ZAvantMenu, ZAvantMenuItem } from '@zoom-avant/vue'
+import { ZAvant, ZAvantMenu, ZAvantItem } from '@zoom-avant/vue'
 import '@zoom-avant/vue/css'
 </script>
 ```
@@ -64,19 +64,19 @@ In your template, add the ZoomAvant structure :
 ```vue
 <template>
   <ZAvant :dynamic-height="true">
-    <ZAvantMenuItem>
+    <ZAvantItem>
       <ZAvantMenu next="Next 1">
-        <ZAvantMenuItem>Hello</ZAvantMenuItem>
-        <ZAvantMenuItem>world</ZAvantMenuItem>
-        <ZAvantMenuItem>Bonjour</ZAvantMenuItem>
+        <ZAvantItem>Hello</ZAvantItem>
+        <ZAvantItem>world</ZAvantItem>
+        <ZAvantItem>Bonjour</ZAvantItem>
       </ZAvantMenu>
-    </ZAvantMenuItem>
-    <ZAvantMenuItem>
+    </ZAvantItem>
+    <ZAvantItem>
       <ZAvantMenu next="Next 2" back="Next 2">
-        <ZAvantMenuItem>Cheese</ZAvantMenuItem>
-        <ZAvantMenuItem>Fromage</ZAvantMenuItem>
-        <ZAvantMenuItem>Brie</ZAvantMenuItem>
-        <ZAvantMenuItem>
+        <ZAvantItem>Cheese</ZAvantItem>
+        <ZAvantItem>Fromage</ZAvantItem>
+        <ZAvantItem>Brie</ZAvantItem>
+        <ZAvantItem>
           <ZAvantMenu>
             <template #next>
               <span>Bonjour le monde</span>
@@ -85,20 +85,20 @@ In your template, add the ZoomAvant structure :
               <span>Retour</span>
             </template>
             <template #default>
-              <ZAvantMenuItem>
+              <ZAvantItem>
                 <a href="#">Hello</a>
-              </ZAvantMenuItem>
-              <ZAvantMenuItem>
+              </ZAvantItem>
+              <ZAvantItem>
                 <a href="#">world</a>
-              </ZAvantMenuItem>
+              </ZAvantItem>
             </template>
           </ZAvantMenu>
-        </ZAvantMenuItem>
+        </ZAvantItem>
       </ZAvantMenu>
-    </ZAvantMenuItem>
-    <ZAvantMenuItem>
+    </ZAvantItem>
+    <ZAvantItem>
       <a href="#">Bonjour le monde</a>
-    </ZAvantMenuItem>
+    </ZAvantItem>
   </ZAvant>
 </template>
 ```

diff --git a/package.json b/package.json
@@ -5,7 +5,7 @@
   "workspaces": [
     "packages/*"
   ],
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "",
   "type": "module",
   "engines": {
@@ -22,17 +22,10 @@
   "author": "",
   "license": "GPL-3.0",
   "devDependencies": {
-    "@testing-library/vue": "^6.6.1",
-    "happy-dom": "^7.6.6",
+    "@vue/test-utils": "^2.2.2",
+    "happy-dom": "^7.7.0",
     "prettier": "^2.7.1",
-    "vitest": "^0.24.5",
-    "vue": "^3.2.41"
-  },
-  "pnpm": {
-    "peerDependencyRules": {
-      "ignoreMissing": [
-        "@algolia/client-search"
-      ]
-    }
+    "vitest": "^0.25.2",
+    "vue": "^3.2.45"
   }
 }
diff --git a/packages/documentation/docs/.vitepress/config.js b/packages/documentation/docs/.vitepress/config.js
@@ -3,18 +3,33 @@ import { defineConfig } from 'vitepress'
 export default defineConfig({
   title: 'Zoom Avant',
   description: 'A drilldown component for VueJS',
+  base:
+    process.env.npm_lifecycle_event === 'docs:dev' ? undefined : '/zoom-avant/',
   themeConfig: {
     footer: {
       message: 'Released under the GPL3 License.'
     },
     socialLinks: [
       { icon: 'github', link: 'https://github.com/Applelo/zoom-avant' }
     ],
+    // TODO: After docs publish, apply for https://docsearch.algolia.com/
+    // algolia: {
+    //   indexName: 'zavant',
+    //   appId: '',
+    //   apiKey: ''
+    // },
     sidebar: {
-      '/introduction/': [
+      '/guide/': [
         {
           text: 'Introduction',
-          items: [{ text: 'Installation', link: '/introduction/installation' }]
+          items: [
+            { text: 'Getting started', link: '/guide/' },
+            { text: 'Usage', link: '/guide/usage' },
+            { text: 'Components', link: '/guide/components' },
+            { text: 'Styles', link: '/guide/styles' },
+            { text: 'Nuxt', link: '/guide/nuxt' },
+            { text: 'Accessibility', link: '/guide/accessibility' }
+          ]
         }
       ]
     }

diff --git a/packages/documentation/docs/.vitepress/theme/custom.css b/packages/documentation/docs/.vitepress/theme/custom.css
@@ -2,7 +2,7 @@
 :root {
   --main-color: #4831d4;
   --light-color: #604ed4;
-  --highlight-color: #ccf381;
+  --highlight-color: #95e205;
 
   --vp-c-brand: var(--main-color);
   --vp-c-brand-light: var(--light-color);
@@ -27,10 +27,14 @@
 
 .dark body {
   /*Body*/
-  --vp-c-bg: #1c1c1c;
-  --vp-c-bg-alt: #2a2929;
+  --vp-c-bg: #000000;
+  --vp-c-bg-alt: #060606;
 }
 
 .dark .VPNav.no-sidebar {
   background-color: transparent !important;
 }
+
+.dark .VPNavBar.has-sidebar.has-sidebar .content {
+  background: rgba(0, 0, 0, 0.7);
+}
diff --git a/packages/documentation/docs/guide/accessibility.md b/packages/documentation/docs/guide/accessibility.md
@@ -0,0 +1,45 @@
+# Accessibility
+
+The component was build with accessibility in mind. It uses the right HTML element (`ul`, `li`, `nav`, `button`) to be SEO friendly and so, accessibility friendly.
+
+The structure respects the ARIA Menu pattern and ARIA recommendations. Current menu is only focusable thanks of the use of `tabindex="-1"` attribute on non active menu elements. Also, `role` attributes `menu`, `menuitem` and `none` are use.
+
+> Feel free to make a PR or an issue if something is wrong about accessibility. It's really important to make the web accessible to everyone.
+
+## Recommendations
+
+It's primordial to label the **ZoomAvant** drilldown. To do that, add an `aria-label` attribute to the root element like this:
+
+```vue-html
+<ZAvant aria-label="Mobile menu">
+</ZAvant>
+```
+
+If you have a title which describe the menu, you can use the `aria-labelledby` attribute.
+
+```vue-html
+<div>
+  <p id="mobile-menu-label">Mobile menu</p>
+  <ZAvant aria-labelledby="mobile-menu-label">
+  </ZAvant>
+</div>
+```
+
+## Keyboard controls
+
+You can control **ZoomAvant** with your keyboard.
+
+- Arrow Up / Tab + Shift: Go to the item element
+- Arrow Down / Tab: Go to the item element
+- Enter / Space :
+  - Access to the next menu if you are on the Next button
+  - Access to the previous menu if you are on the Back button
+- Escape: Return to the previous menu
+- A letter: Focus on the first item with first letter
+- Home:
+  - If focus is on a button, and it is not the first button, moves focus to the first button.
+  - If focus is on a link, and it is not the first link, moves focus to the first link.
+- End:
+  - If focus is on a button, and it is not the last button, moves focus to the last button.
+  - If focus is on a link, and it is not the last link, moves focus to the last link.
+- Any key that corresponds to a printable character: Move focus to the next item in the current menu whose label begins with that printable character.