├── .browserslistrc ├── .eslintignore ├── .storybook ├── addons.js ├── config.js └── webpack.config.js ├── .prettierrc ├── postcss.config.js ├── ui ├── img │ └── favicon-8c.png ├── public │ ├── img │ │ └── favicon-8c.png │ └── index.html ├── src │ ├── styles │ │ ├── elements │ │ │ └── _button.scss │ │ ├── main.scss │ │ ├── accessibility │ │ │ └── _sr-only.scss │ │ └── type │ │ │ ├── typography.scss │ │ │ └── font-face.scss │ ├── components │ │ ├── input.vue │ │ ├── combobox.vue │ │ └── dropdown.vue │ ├── main.js │ └── App.vue ├── _redirects ├── css │ └── app.7640e184.css └── index.html ├── .editorconfig ├── jest.config.js ├── babel.config.js ├── lerna.json ├── helper ├── getElementTagName.js └── isOutsidePath.js ├── .gitignore ├── packages ├── dropdown │ ├── yarn.lock │ ├── jest.config.js │ ├── src │ │ ├── wrapper.js │ │ └── index.vue │ ├── package.json │ ├── LICENSE │ ├── tests │ │ ├── dropdown.stories.js │ │ └── unit │ │ │ └── Dropdown.spec.js │ └── README.md ├── combobox │ ├── jest.config.js │ ├── src │ │ ├── wrapper.js │ │ ├── styles │ │ │ ├── combobox.scss │ │ │ └── combobox-list.scss │ │ ├── ComboboxList.vue │ │ └── index.vue │ ├── package.json │ ├── LICENSE │ ├── changelog.md │ ├── README.md │ └── tests │ │ └── unit │ │ └── Combobox.spec.js ├── input │ ├── jest.config.js │ ├── src │ │ ├── wrapper.js │ │ └── index.vue │ ├── LICENSE │ ├── package.json │ ├── tests │ │ ├── input.stories.js │ │ └── unit │ │ │ └── Input.spec.js │ └── README.md ├── breadcrumb │ ├── jest.config.js │ ├── src │ │ ├── wrapper.js │ │ └── index.vue │ ├── tests │ │ ├── breadcrumb.stories.js │ │ └── unit │ │ │ └── Breadcrumb.spec.js │ ├── package.json │ ├── LICENSE │ └── README.md ├── dynamic-anchor │ ├── jest.config.js │ ├── src │ │ ├── wrapper.js │ │ └── index.vue │ ├── package.json │ ├── LICENSE │ ├── README.md │ └── tests │ │ └── unit │ │ └── DynamicAnchor.spec.js ├── notification │ ├── jest.config.js │ ├── src │ │ ├── wrapper.js │ │ └── index.vue │ ├── LICENSE │ ├── package.json │ ├── tests │ │ ├── notification.stories.js │ │ └── unit │ │ │ └── Notification.spec.js │ └── README.md └── switch-button │ ├── jest.config.js │ ├── tests │ ├── switch-button.stories.js │ └── unit │ │ └── SwitchButton.spec.js │ ├── src │ ├── wrapper.js │ └── index.vue │ ├── package.json │ ├── LICENSE │ └── README.md ├── netlify.toml ├── .eslintrc.js ├── .github ├── PULL_REQUEST_TEMPLATE.md ├── workflows │ └── greetings.yml └── ISSUE_TEMPLATE │ ├── feature_request.md │ └── bug_report.md ├── jest.config.base.js ├── _build └── rollup.config.js ├── .circleci └── config.yml ├── package.json ├── CONTRIBUTING.md ├── README.md └── CODE_OF_CONDUCT.md /.browserslistrc: -------------------------------------------------------------------------------- 1 | > 1% 2 | last 2 versions 3 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | **/node_modules/ 2 | **/dist/ 3 | -------------------------------------------------------------------------------- /.storybook/addons.js: -------------------------------------------------------------------------------- 1 | import '@storybook/addon-knobs/register' 2 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "semi": false, 3 | "singleQuote": true, 4 | "useTabs": true 5 | } 6 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | autoprefixer: {} 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /ui/img/favicon-8c.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tournantdev/ui/HEAD/ui/img/favicon-8c.png -------------------------------------------------------------------------------- /ui/public/img/favicon-8c.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tournantdev/ui/HEAD/ui/public/img/favicon-8c.png -------------------------------------------------------------------------------- /ui/src/styles/elements/_button.scss: -------------------------------------------------------------------------------- 1 | button { 2 | font-size: inherit; 3 | font-family: inherit; 4 | } 5 | -------------------------------------------------------------------------------- /.storybook/config.js: -------------------------------------------------------------------------------- 1 | import { configure } from '@storybook/vue' 2 | 3 | configure(require.context('../packages', true, /\.stories\.js$/), module) 4 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root=true 2 | 3 | [*.{js,jsx,ts,tsx,vue}] 4 | indent_style = tab 5 | trim_trailing_whitespace = true 6 | insert_final_newline = true 7 | line_length = 120 -------------------------------------------------------------------------------- /jest.config.js: -------------------------------------------------------------------------------- 1 | const base = require('./jest.config.base') 2 | 3 | module.exports = { 4 | ...base, 5 | projects: ['/packages/*/jest.config.js'] 6 | } 7 | -------------------------------------------------------------------------------- /ui/src/components/input.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /ui/src/components/combobox.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /ui/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | 4 | Vue.config.productionTip = false 5 | 6 | new Vue({ 7 | render: h => h(App) 8 | }).$mount('#app') 9 | -------------------------------------------------------------------------------- /ui/src/styles/main.scss: -------------------------------------------------------------------------------- 1 | @import './type/font-face.scss'; 2 | @import './type/typography.scss'; 3 | 4 | @import './accessibility/sr-only'; 5 | 6 | @import './elements/button'; 7 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: ['@vue/app'], 3 | env: { 4 | test: { 5 | presets: [ 6 | ['@vue/babel-preset-app', { modules: 'commonjs', useBuiltIns: false }] 7 | ] 8 | } 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /ui/src/styles/accessibility/_sr-only.scss: -------------------------------------------------------------------------------- 1 | .sr-only { 2 | clip-path: inset(100%); 3 | clip: rect(0 0 0 0); 4 | height: 1px; 5 | overflow: hidden; 6 | position: absolute; 7 | white-space: nowrap; 8 | width: 1px; 9 | } 10 | -------------------------------------------------------------------------------- /ui/_redirects: -------------------------------------------------------------------------------- 1 | # These rules will change if you change your site’s custom domains or HTTPS settings 2 | 3 | # Redirect default Netlify subdomain to primary domain 4 | https://condescending-wescoff-829e17.netlify.com/* https://ui.tournant.dev/:splat 301! -------------------------------------------------------------------------------- /lerna.json: -------------------------------------------------------------------------------- 1 | { 2 | "packages": ["packages/*"], 3 | "version": "independent", 4 | "registry": "https://registry.npmjs.org/", 5 | "publishConfig": { 6 | "access": "public" 7 | }, 8 | "npmClient": "yarn", 9 | "useWorkspaces": true 10 | } 11 | -------------------------------------------------------------------------------- /helper/getElementTagName.js: -------------------------------------------------------------------------------- 1 | export default function getElementTagName(useNative, nuxt, router) { 2 | if (useNative) { 3 | return 'a' 4 | } 5 | 6 | if (nuxt) { 7 | return 'nuxt-link' 8 | } 9 | 10 | if (router) { 11 | return 'router-link' 12 | } 13 | 14 | return 'a' 15 | } 16 | -------------------------------------------------------------------------------- /ui/src/styles/type/typography.scss: -------------------------------------------------------------------------------- 1 | body { 2 | line-height: 1.6; 3 | } 4 | 5 | p { 6 | margin-top: 0; 7 | } 8 | 9 | .main-headline { 10 | font-size: 300%; 11 | } 12 | 13 | .small-headline { 14 | font-size: 92%; 15 | text-transform: uppercase; 16 | letter-spacing: 0.1em; 17 | } 18 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | dist/ 4 | 5 | # local env files 6 | .env.local 7 | .env.*.local 8 | 9 | # Log files 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | /lerna-debug.log 14 | 15 | # Editor directories and files 16 | .idea 17 | .vscode 18 | *.suo 19 | *.ntvs* 20 | *.njsproj 21 | *.sln 22 | *.sw? 23 | /coverage 24 | -------------------------------------------------------------------------------- /packages/dropdown/yarn.lock: -------------------------------------------------------------------------------- 1 | # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. 2 | # yarn lockfile v1 3 | 4 | 5 | vue@^2.6.10: 6 | version "2.6.10" 7 | resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.10.tgz#a72b1a42a4d82a721ea438d1b6bf55e66195c637" 8 | integrity sha512-ImThpeNU9HbdZL3utgMCq0oiMzAkt1mcgy3/E6zWC/G6AaQoeuFdsl9nDhTDU3X1R6FK7nsIUuRACVcjI+A2GQ== 9 | -------------------------------------------------------------------------------- /helper/isOutsidePath.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Check if the target of an event is outside of an element 3 | * 4 | * @param {Event} evt 5 | * @param {HTMLElement} element 6 | * @returns 7 | */ 8 | const isOutsidePath = (evt, element) => { 9 | return evt.composedPath 10 | ? !evt.composedPath().includes(element) 11 | : !(evt.target === element || element.contains(evt.target)) 12 | } 13 | 14 | export default isOutsidePath 15 | -------------------------------------------------------------------------------- /netlify.toml: -------------------------------------------------------------------------------- 1 | [build] 2 | # Directory to change to before starting a build. 3 | # This is where we will look for package.json/.nvmrc/etc. 4 | base = "/" 5 | 6 | # Directory (relative to root of your repo) that contains the deploy-ready 7 | # HTML files and assets generated by the build. If a base directory has 8 | # been specified, include it in the publish directory path. 9 | publish = "ui/" 10 | 11 | # Default build command. 12 | -------------------------------------------------------------------------------- /packages/combobox/jest.config.js: -------------------------------------------------------------------------------- 1 | const base = require('../../jest.config.base.js') 2 | const { name } = require('./package') 3 | 4 | // Package name is scoped to @tournant org, split @tournant/package-name for use in path matcher 5 | const folderName = name.split('/')[1] 6 | 7 | module.exports = { 8 | ...base, 9 | roots: [`/packages/${folderName}`], 10 | displayName: name, 11 | name, 12 | rootDir: '../..', 13 | modulePaths: [`/packages/${folderName}`] 14 | } 15 | -------------------------------------------------------------------------------- /packages/dropdown/jest.config.js: -------------------------------------------------------------------------------- 1 | const base = require('../../jest.config.base.js') 2 | const { name } = require('./package') 3 | 4 | // Package name is scoped to @tournant org, split @tournant/package-name for use in path matcher 5 | const folderName = name.split('/')[1] 6 | 7 | module.exports = { 8 | ...base, 9 | roots: [`/packages/${folderName}`], 10 | displayName: name, 11 | name, 12 | rootDir: '../..', 13 | modulePaths: [`/packages/${folderName}`] 14 | } 15 | -------------------------------------------------------------------------------- /packages/input/jest.config.js: -------------------------------------------------------------------------------- 1 | const base = require('../../jest.config.base.js') 2 | const { name } = require('./package') 3 | 4 | // Package name is scoped to @tournant org, split @tournant/package-name for use in path matcher 5 | const folderName = name.split('/')[1] 6 | 7 | module.exports = { 8 | ...base, 9 | roots: [`/packages/${folderName}`], 10 | displayName: name, 11 | name, 12 | rootDir: '../..', 13 | modulePaths: [`/packages/${folderName}`] 14 | } 15 | -------------------------------------------------------------------------------- /packages/breadcrumb/jest.config.js: -------------------------------------------------------------------------------- 1 | const base = require('../../jest.config.base.js') 2 | const { name } = require('./package') 3 | 4 | // Package name is scoped to @tournant org, split @tournant/package-name for use in path matcher 5 | const folderName = name.split('/')[1] 6 | 7 | module.exports = { 8 | ...base, 9 | roots: [`/packages/${folderName}`], 10 | displayName: name, 11 | name, 12 | rootDir: '../..', 13 | modulePaths: [`/packages/${folderName}`] 14 | } 15 | -------------------------------------------------------------------------------- /packages/dynamic-anchor/jest.config.js: -------------------------------------------------------------------------------- 1 | const base = require('../../jest.config.base.js') 2 | const { name } = require('./package') 3 | 4 | // Package name is scoped to @tournant org, split @tournant/package-name for use in path matcher 5 | const folderName = name.split('/')[1] 6 | 7 | module.exports = { 8 | ...base, 9 | roots: [`/packages/${folderName}`], 10 | displayName: name, 11 | name, 12 | rootDir: '../..', 13 | modulePaths: [`/packages/${folderName}`] 14 | } 15 | -------------------------------------------------------------------------------- /packages/notification/jest.config.js: -------------------------------------------------------------------------------- 1 | const base = require('../../jest.config.base.js') 2 | const { name } = require('./package') 3 | 4 | // Package name is scoped to @tournant org, split @tournant/package-name for use in path matcher 5 | const folderName = name.split('/')[1] 6 | 7 | module.exports = { 8 | ...base, 9 | roots: [`/packages/${folderName}`], 10 | displayName: name, 11 | name, 12 | rootDir: '../..', 13 | modulePaths: [`/packages/${folderName}`] 14 | } 15 | -------------------------------------------------------------------------------- /packages/switch-button/jest.config.js: -------------------------------------------------------------------------------- 1 | const base = require('../../jest.config.base.js') 2 | const { name } = require('./package') 3 | 4 | // Package name is scoped to @tournant org, split @tournant/package-name for use in path matcher 5 | const folderName = name.split('/')[1] 6 | 7 | module.exports = { 8 | ...base, 9 | roots: [`/packages/${folderName}`], 10 | displayName: name, 11 | name, 12 | rootDir: '../..', 13 | modulePaths: [`/packages/${folderName}`] 14 | } 15 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { 4 | node: true, 5 | jest: true 6 | }, 7 | extends: [ 8 | 'plugin:vue/recommended', 9 | 'eslint:recommended', 10 | 'prettier/vue', 11 | 'plugin:prettier/recommended' 12 | ], 13 | rules: { 14 | 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', 15 | 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off' 16 | }, 17 | parserOptions: { 18 | parser: 'babel-eslint' 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /.github/PULL_REQUEST_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | ### What has been added 2 | 3 | ### How can this be tested 4 | 5 | ### In which screen readers have these additions been tested 6 | 7 | - [ ] NVDA 8 | - [ ] JAWS 9 | - [ ] VoiceOver 10 | - [ ] TalkBack 11 | 12 | ### In which browsers have these additions been tested 13 | 14 | #### Mobile 15 | 16 | - [ ] Firefox 17 | - [ ] Chrome (Android) 18 | - [ ] Safari (iOS) 19 | - [ ] Samsung Internet 20 | 21 | #### Desktop 22 | 23 | - [ ] Firefox (recent) 24 | - [ ] Edge (recent) 25 | - [ ] Chrome (recent) 26 | - [ ] Safari (recent) 27 | 28 | ### Additonal remarks 29 | -------------------------------------------------------------------------------- /.github/workflows/greetings.yml: -------------------------------------------------------------------------------- 1 | name: Greetings 2 | 3 | on: [pull_request, issues] 4 | 5 | jobs: 6 | greeting: 7 | runs-on: ubuntu-latest 8 | steps: 9 | - uses: actions/first-interaction@v1 10 | with: 11 | repo-token: ${{ secrets.GITHUB_TOKEN }} 12 | issue-message: '👋 Hey there. Thanks for taking the time to open an issue. We appreciate any feedback and will get back to you as soon as possible. ' 13 | pr-message: 'Hej! You want to contribute. That’s amazing. To get this merged as soon as possible please remember to provide the necessary information in the PR. Thanks again, Tournant loves you. 💞' 14 | -------------------------------------------------------------------------------- /ui/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Tournant UI 9 | 10 | 11 | 17 |
18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature request 3 | about: Suggest an idea for this project 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Is your feature request related to a problem? Please describe.** 11 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] 12 | 13 | **Describe the solution you'd like** 14 | A clear and concise description of what you want to happen. 15 | 16 | **Describe alternatives you've considered** 17 | A clear and concise description of any alternative solutions or features you've considered. 18 | 19 | **Additional context** 20 | Add any other context or screenshots about the feature request here. 21 | -------------------------------------------------------------------------------- /packages/switch-button/tests/switch-button.stories.js: -------------------------------------------------------------------------------- 1 | import TournantSwitchButton from '../src/index.vue' 2 | 3 | export default { title: '@tournant/switch-button' } 4 | 5 | export const Basic = () => ({ 6 | components: { TournantSwitchButton }, 7 | template: `Fun mode` 8 | }) 9 | 10 | export const defaultTrue = () => ({ 11 | components: { TournantSwitchButton }, 12 | template: `Fun mode` 13 | }) 14 | 15 | export const usingPropsForLabelling = () => ({ 16 | components: { TournantSwitchButton }, 17 | template: `Kontrastmodus` 18 | }) 19 | -------------------------------------------------------------------------------- /.storybook/webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | const webpack = require('webpack') 3 | const VueLoaderPlugin = require('vue-loader/lib/plugin') 4 | 5 | module.exports = ({ config }) => { 6 | // configType has a value of 'DEVELOPMENT' or 'PRODUCTION' 7 | // You can change the configuration based on that. 8 | // 'PRODUCTION' is used when building the static version of storybook. 9 | 10 | config.module.rules.push({ 11 | test: /\.scss$/, 12 | use: ['vue-style-loader', 'css-loader', 'sass-loader'] 13 | }) 14 | 15 | config.resolve.alias = { 16 | ...(config.resolve.alias || {}), 17 | '@h': path.resolve(__dirname, '../helper'), 18 | vue$: 'vue/dist/vue.esm.js' 19 | } 20 | 21 | // Return the altered config 22 | return config 23 | } 24 | -------------------------------------------------------------------------------- /packages/combobox/src/wrapper.js: -------------------------------------------------------------------------------- 1 | import Combobox from './index.vue' 2 | 3 | // Declare install function executed by Vue.use() 4 | export function install(Vue) { 5 | if (install.installed) return 6 | install.installed = true 7 | Vue.component('TournantCombobox', Combobox) 8 | } 9 | 10 | // Create module definition for Vue.use() 11 | const plugin = { 12 | install 13 | } 14 | 15 | // Auto-install when vue is found (eg. in browser via 51 | -------------------------------------------------------------------------------- /packages/notification/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@tournant/notification", 3 | "version": "1.0.0", 4 | "description": "Screenreader friendly notification messages", 5 | "keywords": [ 6 | "accessibility", 7 | "vue", 8 | "component", 9 | "notification", 10 | "alert", 11 | "status" 12 | ], 13 | "main": "./dist/notification.ssr.js", 14 | "module": "./dist/notification.js", 15 | "unpkg": "./dist/browser.min.js", 16 | "files": [ 17 | "dist", 18 | "src/**/*.vue" 19 | ], 20 | "repository": "https://github.com/tournantdev/ui", 21 | "bugs": "https://github.com/tournantdev/ui/issues", 22 | "homepage": "https://ui.tournant.dev", 23 | "author": "Oscar Braunert", 24 | "license": "MIT", 25 | "scripts": { 26 | "build": "rollup -c ../../_build/rollup.config.js --environment BUILD:production", 27 | "lint": "vue-cli-service lint", 28 | "prepack": "yarn test && yarn build", 29 | "test": "cd ../.. && jest packages/notification --color", 30 | "watch": "rollup -c ../../_build/rollup.config.js --watch" 31 | }, 32 | "peerDependencies": { 33 | "vue": "^2.6.10" 34 | }, 35 | "gitHead": "43e18fdf87469cc6c1d1ff93729c5fb29ffee898" 36 | } 37 | -------------------------------------------------------------------------------- /packages/combobox/LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 Oscar Braunert 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Create a report to help us improve 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | --- 8 | 9 | **Describe the bug** 10 | A clear and concise description of what the bug is. 11 | 12 | **To Reproduce** 13 | Steps to reproduce the behavior: 14 | 15 | 1. Go to '...' 16 | 2. Click on '....' 17 | 3. Scroll down to '....' 18 | 4. See error 19 | 20 | **Expected behavior** 21 | A clear and concise description of what you expected to happen. 22 | 23 | **Screenshots** 24 | If applicable, add screenshots to help explain your problem. 25 | 26 | **Assistive Technology (please complete the following information):** 27 | 28 | - OS: [e.g. Windows] 29 | - AT: [e.g. NVDA] 30 | - Version [e.g. 2018.2] 31 | 32 | **Desktop (please complete the following information):** 33 | 34 | - OS: [e.g. iOS] 35 | - Browser [e.g. chrome, safari] 36 | - Version [e.g. 22] 37 | 38 | **Smartphone (please complete the following information):** 39 | 40 | - Device: [e.g. iPhone6] 41 | - OS: [e.g. iOS8.1] 42 | - Browser [e.g. stock browser, safari] 43 | - Version [e.g. 22] 44 | 45 | **Additional context** 46 | Add any other context about the problem here. 47 | -------------------------------------------------------------------------------- /packages/input/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@tournant/input", 3 | "version": "1.0.0", 4 | "description": "An accessible implementation for text-like HTML input elements.", 5 | "keywords": [ 6 | "vue", 7 | "component", 8 | "accessibility", 9 | "ui", 10 | "a11y", 11 | "aria" 12 | ], 13 | "license": "MIT", 14 | "repository": { 15 | "type": "git", 16 | "url": "https://github.com/tournantdev/ui" 17 | }, 18 | "bugs": "https://github.com/tournantdev/ui/issues", 19 | "author": { 20 | "name": "Oscar Braunert", 21 | "email": "o@ovl.design", 22 | "url": "https://www.ovl.design" 23 | }, 24 | "main": "./dist/input.ssr.js", 25 | "module": "./dist/input.js", 26 | "unpkg": "./dist/browser.min.js", 27 | "files": [ 28 | "dist", 29 | "src/**/*.vue" 30 | ], 31 | "scripts": { 32 | "build": "rollup -c ../../_build/rollup.config.js --environment BUILD:production", 33 | "lint": "vue-cli-service lint", 34 | "prepack": "yarn test && yarn build", 35 | "test": "cd ../.. && jest packages/input --color", 36 | "watch": "rollup -c ../../_build/rollup.config.js --watch" 37 | }, 38 | "dependencies": { 39 | "uuid-browser": "^3.1.0" 40 | }, 41 | "peerDependencies": { 42 | "vue": "^2.6.10" 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /packages/notification/src/index.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 58 | 59 | 66 | -------------------------------------------------------------------------------- /packages/dropdown/tests/dropdown.stories.js: -------------------------------------------------------------------------------- 1 | // import Vue from 'vue' 2 | import TournantDropdown from '../src/index.vue' 3 | 4 | export default { title: '@tournant/dropdown' } 5 | 6 | const items = `` 10 | 11 | export const Basic = () => ({ 12 | components: { TournantDropdown }, 13 | template: ` 14 | 17 | ${items} 18 | ` 19 | }) 20 | 21 | export const TabAway = () => ({ 22 | components: { TournantDropdown }, 23 | template: ` 24 |
25 |

Above dropdown with a placeholder link.

26 | 27 | 30 | ${items} 31 | 32 |

Some more content underneath the item.

33 |

And another paragraph with a link. 34 |

35 | ` 36 | }) 37 | 38 | export const Positioning = () => ({ 39 | components: { TournantDropdown }, 40 | template: ` 41 | 44 | ${items} 45 | ` 46 | }) 47 | -------------------------------------------------------------------------------- /packages/breadcrumb/src/index.vue: -------------------------------------------------------------------------------- 1 | 36 | 37 | 60 | -------------------------------------------------------------------------------- /packages/combobox/changelog.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | 3 | ## 0.5.1 - 2018-10-23 4 | 5 | ### Fixed 6 | 7 | - Dist paths for browser and unpkg 8 | 9 | ## 0.5.0 - 2018-10-16 10 | 11 | ### Added 12 | 13 | - Add installation information to Readme 14 | - Visible label 15 | 16 | ### Fixed 17 | 18 | - Remove aria-activedescendant if no item is selected 19 | - Reset arrow position when pressing escape 20 | 21 | ## 0.4.2 - 2018-10-05 22 | 23 | ### Fixed 24 | 25 | - Remove emojis from readme 26 | 27 | ## 0.4.1 – 2018-10-05 28 | 29 | ### Fixed 30 | 31 | - Remove private flag 32 | 33 | ## 0.4.0 - 2018-10-05 34 | 35 | ### Added 36 | 37 | - Publish information 38 | - Rollup config to build dist bundle 39 | - Version tasks 40 | 41 | ### Updated 42 | 43 | - Expose BEM structured classes by default, add styling modifier if respective prop is set (Issue #6) 44 | - Move demo files out of `src` folder 45 | - Run only `lint` task in husky’s `pre-commit` hook 46 | 47 | ### Fixed 48 | 49 | - #5: Manual completion of input 50 | 51 | ## 0.3.1 - 2018-09-16 52 | 53 | ### Added 54 | 55 | - circleci config 56 | - Add husky to control git hooks 57 | 58 | ### Updated 59 | 60 | - switched to vue:recommended code style 61 | 62 | ### Removed 63 | 64 | - sample HelloWorld component 65 | 66 | ### Fixed 67 | 68 | - Click event not firing in iOS Safari 69 | 70 | ## v0.2.1 71 | 72 | ### Fixed 73 | 74 | - Move all devDependencies to dependencies to fix netlify build 75 | 76 | ## v0.2.0 - 2018-09-13 77 | 78 | ### Added 79 | 80 | - Refined keyboard handling 81 | 82 | ## v0.1.0 - 2018-09-13 83 | 84 | ### Added 85 | 86 | - Initialization and basic build 87 | -------------------------------------------------------------------------------- /packages/switch-button/tests/unit/SwitchButton.spec.js: -------------------------------------------------------------------------------- 1 | import { shallowMount } from '@vue/test-utils' 2 | 3 | import SwitchButton from '@p/switch-button/src/index.vue' 4 | 5 | describe('switch-button', () => { 6 | let wrapper 7 | let button 8 | 9 | beforeEach(() => { 10 | wrapper = shallowMount(SwitchButton, { 11 | slots: { 12 | default: 'Interact' 13 | } 14 | }) 15 | 16 | button = wrapper.find('button') 17 | }) 18 | 19 | describe('element classes', () => { 20 | test('root', () => { 21 | const rootDiv = wrapper.findAll('div').at(0) 22 | 23 | expect(rootDiv.classes()).toContain('t-ui-switch-button') 24 | }) 25 | 26 | test('label', () => { 27 | expect( 28 | wrapper 29 | .findAll('span') 30 | .at(0) 31 | .classes() 32 | ).toContain('t-ui-switch-button__label') 33 | }) 34 | }) 35 | 36 | describe('events', () => { 37 | it('changes state when clicked', () => { 38 | button.trigger('click') 39 | expect(button.attributes('aria-checked')).toBe('true') 40 | button.trigger('click') 41 | expect(button.attributes('aria-checked')).toBe('false') 42 | }) 43 | 44 | it('emits click event when clicked', () => { 45 | button.trigger('click') 46 | expect(wrapper.emitted().input).toBeTruthy() 47 | }) 48 | }) 49 | 50 | it('has a button with required aria attributes', () => { 51 | const buttonAttr = button.attributes() 52 | const slotText = wrapper.find('.t-ui-switch-button__label') 53 | 54 | expect(buttonAttr['aria-checked']).toBe('false') 55 | expect(buttonAttr['role']).toBe('switch') 56 | expect(buttonAttr['aria-labelledby']).toBe(slotText.attributes('id')) 57 | }) 58 | }) 59 | -------------------------------------------------------------------------------- /_build/rollup.config.js: -------------------------------------------------------------------------------- 1 | import resolve from 'rollup-plugin-node-resolve' 2 | import commonjs from 'rollup-plugin-commonjs' 3 | import vue from 'rollup-plugin-vue' 4 | import filesize from 'rollup-plugin-filesize' 5 | import buble from 'rollup-plugin-buble' 6 | import { terser } from 'rollup-plugin-terser' 7 | import alias from 'rollup-plugin-alias' 8 | import del from 'rollup-plugin-delete' 9 | import path from 'path' 10 | 11 | const pkg = path.basename(process.env.PWD || process.cwd()) 12 | const name = `Tournant${pkg.charAt(0).toUpperCase()}` 13 | 14 | const input = 'src/index.vue' 15 | 16 | const aliasPlugin = () => { 17 | return alias({ 18 | entries: [{ find: '@h', replacement: path.join(__dirname, '..', 'helper') }] 19 | }) 20 | } 21 | 22 | const fullPlugins = () => [ 23 | aliasPlugin(), 24 | commonjs(), 25 | resolve(), 26 | vue({ css: true }), 27 | buble({ objectAssign: 'Object.assign' }), 28 | terser({ numWorkers: 1 }), 29 | filesize() 30 | ] 31 | 32 | const external = ['vue'] 33 | 34 | export default [ 35 | { 36 | external, 37 | input, 38 | output: [ 39 | { 40 | format: 'esm', 41 | file: `dist/${pkg}.js`, 42 | exports: 'named', 43 | name 44 | }, 45 | { 46 | format: 'iife', 47 | file: 'dist/browser.min.js', 48 | exports: 'named', 49 | name 50 | } 51 | ], 52 | plugins: [del({ targets: 'dist/*' }), ...fullPlugins()] 53 | }, 54 | { 55 | external, 56 | input, 57 | output: { 58 | compact: true, 59 | format: 'cjs', 60 | name, 61 | file: `dist/${pkg}.ssr.js`, 62 | exports: 'named' 63 | }, 64 | plugins: [ 65 | aliasPlugin(), 66 | resolve(), 67 | commonjs(), 68 | vue({ template: { optimizeSSR: true } }), 69 | filesize() 70 | ] 71 | } 72 | ] 73 | -------------------------------------------------------------------------------- /ui/src/components/dropdown.vue: -------------------------------------------------------------------------------- 1 | 37 | 38 | 47 | 48 | 73 | -------------------------------------------------------------------------------- /.circleci/config.yml: -------------------------------------------------------------------------------- 1 | # Javascript Node CircleCI 2.0 configuration file 2 | # 3 | # Check https://circleci.com/docs/2.0/language-javascript/ for more details 4 | # 5 | version: 2.1 6 | 7 | defaults: &defaults 8 | working_directory: ~/tournant/ui 9 | docker: 10 | - image: vuejs/ci 11 | environment: NODE_OPTIONS=--max_old_space_size=4096 12 | 13 | jobs: 14 | install: 15 | <<: *defaults 16 | steps: 17 | - checkout 18 | # Download and cache dependencies 19 | - restore_cache: 20 | keys: 21 | - v3-tournant-ui-{{ .Branch }}-{{ checksum "yarn.lock" }} 22 | - run: yarn global add lerna 23 | - run: yarn run bootstrap 24 | - save_cache: 25 | paths: 26 | - node_modules 27 | key: v3-tournant-ui-{{ .Branch }}-{{ checksum "yarn.lock" }} 28 | - persist_to_workspace: 29 | root: ~/tournant 30 | paths: 31 | - ui 32 | test: 33 | <<: *defaults 34 | steps: 35 | - attach_workspace: 36 | at: ~/tournant 37 | - run: 38 | name: 'Run Unit Tests' 39 | command: yarn run test:ci 40 | - run: 41 | name: report coverage stats for non-PRs 42 | command: | 43 | ./node_modules/.bin/codecov 44 | build: 45 | <<: *defaults 46 | steps: 47 | - attach_workspace: 48 | at: ~/tournant 49 | - run: 50 | name: 'Building component instances' 51 | command: yarn build 52 | 53 | workflows: 54 | version: 2 55 | build_and_test: 56 | jobs: 57 | - install 58 | # - bootstrap: 59 | # requires: 60 | # - install 61 | - test: 62 | requires: 63 | - install 64 | - build: 65 | requires: 66 | - install 67 | - test 68 | -------------------------------------------------------------------------------- /packages/combobox/src/styles/combobox-list.scss: -------------------------------------------------------------------------------- 1 | @mixin t-ui-combobox__list { 2 | background-color: #fff; 3 | border: 1px solid rgb(206, 206, 206); 4 | border-color: var(--t-ui-cb-clr-light); 5 | border-radius: 0.25rem; 6 | box-shadow: ( 7 | 0 0.1em 0.14em rgba(0, 0, 0, 0.12), 8 | 0 0.1em 0.18em rgba(0, 0, 0, 0.24) 9 | ); 10 | left: 2vmin; 11 | list-style: none; 12 | margin: 0; 13 | max-height: 20rem; 14 | overflow: scroll; 15 | padding: 0.5rem; 16 | padding: var(--t-ui-cb-space); 17 | position: absolute; 18 | right: 2vmin; 19 | text-align: left; 20 | z-index: 10; 21 | z-index: var(--t-ui-cb-z-index); 22 | } 23 | 24 | @mixin t-ui-combobox__list-item { 25 | border-bottom: 2px solid rgb(206, 206, 206); 26 | border-bottom-color: var(--t-ui-cb-clr-light); 27 | padding: 0.25rem 0 0.125rem; 28 | padding: calc(var(--t-ui-cb-space) / 2) 0 calc(var(--t-ui-cb-space / 4)); 29 | position: relative; 30 | 31 | // Need to add content inside a span to allow the hover/active underline 32 | // to appear while simultaneously allow for text clipping 33 | & span { 34 | display: block; 35 | overflow: hidden; 36 | text-overflow: ellipsis; 37 | white-space: nowrap; 38 | width: 100%; 39 | } 40 | 41 | &::after { 42 | background-color: darkblue; 43 | background-color: var(--t-ui-cb-clr-dark); 44 | bottom: -2px; 45 | content: ''; 46 | height: 2px; 47 | left: 0; 48 | position: absolute; 49 | transform: scaleX(0); 50 | transform-origin: center; 51 | transition: transform 0.2s ease-out; 52 | width: 100%; 53 | } 54 | 55 | &[aria-selected='true'], 56 | &:hover { 57 | &::after { 58 | transform: scaleX(1); 59 | } 60 | } 61 | 62 | &:not(:last-child) { 63 | margin-bottom: 0.5rem; 64 | margin-bottom: var(--t-ui-cb-space); 65 | } 66 | } 67 | -------------------------------------------------------------------------------- /packages/switch-button/src/index.vue: -------------------------------------------------------------------------------- 1 | 23 | 24 | 65 | 66 | 87 | -------------------------------------------------------------------------------- /packages/notification/tests/notification.stories.js: -------------------------------------------------------------------------------- 1 | import TournantNotification from '../src/index.vue' 2 | import { withKnobs, text } from '@storybook/addon-knobs' 3 | 4 | export default { title: '@tournant/notification', decorators: [withKnobs] } 5 | 6 | export const basicExample = () => ({ 7 | components: { TournantNotification }, 8 | props: { 9 | alertMessage: { 10 | default: text('Alert message', 'This is an alert message.') 11 | } 12 | }, 13 | data: () => ({ 14 | messages: [] 15 | }), 16 | methods: { 17 | addAlert() { 18 | this.messages.push(this.alertMessage) 19 | } 20 | }, 21 | template: `
22 | 23 |
24 |
` 25 | }) 26 | 27 | export const longTimeout = () => ({ 28 | components: { TournantNotification }, 29 | props: { 30 | alertMessage: { 31 | default: text('Alert message', 'This is an alert message.') 32 | } 33 | }, 34 | data: () => ({ 35 | messages: [] 36 | }), 37 | methods: { 38 | addAlert() { 39 | this.messages.push(this.alertMessage) 40 | } 41 | }, 42 | template: `
43 | 44 |
45 |
` 46 | }) 47 | 48 | export const statusMessage = () => ({ 49 | components: { TournantNotification }, 50 | props: { 51 | alertMessage: { 52 | default: text('Status message', 'Page 4 has been loaded.') 53 | } 54 | }, 55 | data: () => ({ 56 | messages: [] 57 | }), 58 | methods: { 59 | addAlert() { 60 | this.messages.push(this.alertMessage) 61 | } 62 | }, 63 | template: `
64 |
65 | 66 |
67 | 68 |
` 69 | }) 70 | -------------------------------------------------------------------------------- /packages/combobox/src/ComboboxList.vue: -------------------------------------------------------------------------------- 1 | 33 | 34 | 63 | 64 | 94 | -------------------------------------------------------------------------------- /packages/dynamic-anchor/README.md: -------------------------------------------------------------------------------- 1 | # @tournant/dynamic-anchor 2 | 3 | A wrapper around `nuxt-link` or `router-link`, which falls back to a native `a` tag. 4 | 5 | This is probably only useful if you don’t have control over the Vue environment. 6 | 7 | ## Installation 8 | 9 | No rocket science here. Although rockets are cool, to be honest. 🚀 You can install the component using NPM or Yarn. 10 | 11 | ``` 12 | npm install @tournant/dynamic-anchor --save 13 | ``` 14 | 15 | If you use Yarn: 16 | 17 | ``` 18 | yarn add @tournant/dynamic-anchor 19 | ``` 20 | 21 | Once the component is installed you need to import it wherever you want to use it. 22 | 23 | ```js 24 | import TournantDynamicAnchor from '@tournant/dynamic-anchor' 25 | ``` 26 | 27 | Don’t forget to add it to the registered components (been there, done that): 28 | 29 | ```js 30 | components: { 31 | TournantDynamicAnchor, 32 | // ... all the other amazing components 33 | } 34 | ``` 35 | 36 | ## Usage 37 | 38 | Since our packages might be used in a lot of different circumstances, we needed an agnostic link component that fares well under differing circumstances. 39 | 40 | This component is a wrapper around Nuxt Link and Router Link. If Nuxt or @vue/router are detected it will pass the given link to `nuxt-link` or `router-link` respectively. If not, a HTML `a` element is rendered. 41 | 42 | ### Props 43 | 44 | `@tournant/dynamic-anchor` extends the Router Link component. It takes one additional prop: 45 | 46 | | Property | Required | Type | Default | 47 | | -------------------- | -------- | ------- | ------- | 48 | | useNativeLinkElement | false | Boolean | false | 49 | 50 | If `useNativeLinkElement` is set to `true` the component will skip the check for Nuxt or Vue Router and always render an `a` tag. 51 | 52 | You can use this prop if your site is gradually moving to Vue and some routes are not yet covered by your router implementation. 53 | 54 | All other added props and attributes are bound to the component or, if a specific link component is detected, forwarded. 55 | 56 | ## Bugs & Enhancements 57 | 58 | If you found a bug, please create a [bug ticket](https://github.com/tournantdev/ui/issues/new?assignees=&labels=component:dynamic-anchor&template=bug_report.md&title=). 59 | 60 | For enhancements please refer to the [contributing guidelines](https://github.com/tournantdev/ui/blob/master/CONTRIBUTING.md). 61 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@tournant/ui", 3 | "private": true, 4 | "license": "MIT", 5 | "scripts": { 6 | "bootstrap": "lerna bootstrap", 7 | "build:changed": "lerna run build --since origin/master", 8 | "build:ui": "vue-cli-service build", 9 | "build": "lerna run build", 10 | "create": "communard", 11 | "integrity": "yarn lint && yarn test", 12 | "lint": "eslint '**/*.{vue,js}' --fix", 13 | "publish:packages": "lerna publish", 14 | "publish:patch": "lerna publish patch", 15 | "serve": "vue-cli-service serve", 16 | "storybook": "start-storybook -p 9001", 17 | "test:ci": "jest --ci --coverage -i", 18 | "test:unit": "vue-cli-service test:unit", 19 | "test": "vue-cli-service test:unit" 20 | }, 21 | "dependencies": { 22 | "@babel/core": "^7.8.3", 23 | "@storybook/addon-knobs": "5.3.21", 24 | "@storybook/vue": "5.3.21", 25 | "@tournant/communard": "^2.2.0", 26 | "@vue/babel-preset-app": "^4.1.2", 27 | "@vue/cli-plugin-babel": "^4.1.2", 28 | "@vue/cli-plugin-eslint": "^4.1.2", 29 | "@vue/cli-plugin-unit-jest": "^4.1.2", 30 | "@vue/cli-service": "^4.1.2", 31 | "@vue/eslint-config-standard": "^5.1.0", 32 | "@vue/test-utils": "1.0.0-beta.29", 33 | "babel-eslint": "^10.0.1", 34 | "babel-jest": "^24.9.0", 35 | "babel-loader": "^8.1.0", 36 | "babel-preset-vue": "^2.0.2", 37 | "codecov": "^3.5.0", 38 | "eslint": "^6.7.1", 39 | "eslint-config-prettier": "^6.0.0", 40 | "eslint-plugin-prettier": "^3.0.1", 41 | "eslint-plugin-vue": "^6.0.1", 42 | "husky": "^4.0.10", 43 | "jest": "^24.9.0", 44 | "lerna": "^3.18.0", 45 | "lint-staged": "^9.0.2", 46 | "node-sass": "^4.13.0", 47 | "prettier": "^1.17.0", 48 | "rollup": "^1.27.8", 49 | "rollup-plugin-alias": "^2.0.0", 50 | "rollup-plugin-buble": "^0.19.6", 51 | "rollup-plugin-commonjs": "^10.0.0", 52 | "rollup-plugin-delete": "^1.1.0", 53 | "rollup-plugin-filesize": "^6.1.0", 54 | "rollup-plugin-node-resolve": "^5.0.2", 55 | "rollup-plugin-terser": "^5.1.3", 56 | "rollup-plugin-vue": "^5.1.4", 57 | "sass-loader": "^8.0.0", 58 | "vue": "^2.6.10", 59 | "vue-jest": "4.0.0-beta.2", 60 | "vue-template-compiler": "^2.6.10", 61 | "vuelidate": "^0.7.5" 62 | }, 63 | "husky": { 64 | "hooks": { 65 | "pre-commit": "lint-staged", 66 | "pre-push": "yarn lint && yarn test:unit" 67 | } 68 | }, 69 | "lint-staged": { 70 | "*.{js,vue}": [ 71 | "yarn lint", 72 | "git add" 73 | ] 74 | }, 75 | "workspaces": [ 76 | "packages/*" 77 | ] 78 | } 79 | -------------------------------------------------------------------------------- /packages/input/src/index.vue: -------------------------------------------------------------------------------- 1 | 44 | 45 | 109 | 110 | 111 | -------------------------------------------------------------------------------- /packages/input/tests/input.stories.js: -------------------------------------------------------------------------------- 1 | import TournantInput from '../src/index.vue' 2 | import { withKnobs, text, radios } from '@storybook/addon-knobs' 3 | 4 | // const dataNoError = { $error: false, $dirty: false } 5 | 6 | export default { title: '@tournant/input', decorators: [withKnobs] } 7 | 8 | export const withLabel = () => { 9 | return { 10 | components: { TournantInput }, 11 | props: { 12 | label: { 13 | default: text('Name', 'Name') 14 | } 15 | }, 16 | data: () => ({ 17 | validation: { $error: false, $dirty: false }, 18 | name: 'Tournant' 19 | }), 20 | template: `` 21 | } 22 | } 23 | 24 | export const typePassword = () => ({ 25 | components: { TournantInput }, 26 | data: () => ({ 27 | validation: { $error: false, $dirty: false }, 28 | password: '' 29 | }), 30 | template: `` 31 | }) 32 | 33 | export const asTextarea = () => ({ 34 | components: { TournantInput }, 35 | data: () => ({ 36 | validation: { $error: false, $dirty: false }, 37 | message: 'Hello' 38 | }), 39 | template: `` 40 | }) 41 | 42 | export const asTextareaWithError = () => ({ 43 | components: { TournantInput }, 44 | data: () => ({ 45 | validation: { $error: true, $dirty: false }, 46 | message: 'Hello' 47 | }), 48 | template: ` 49 | 50 | 53 | 54 | ` 55 | }) 56 | 57 | export const withError = () => ({ 58 | components: { TournantInput }, 59 | data: () => ({ 60 | validation: { $error: true, $dirty: true }, 61 | name: '' 62 | }), 63 | template: ` 64 | 67 | ` 68 | }) 69 | 70 | const descriptionPositions = { 71 | Top: 'top', 72 | Bottom: 'bottom' 73 | } 74 | 75 | export const withDescription = () => ({ 76 | components: { TournantInput }, 77 | props: { 78 | descriptionPosition: { 79 | default: radios( 80 | 'Description position', 81 | descriptionPositions, 82 | 'bottom', 83 | 'tuidescpos' 84 | ) 85 | } 86 | }, 87 | data: () => ({ 88 | validation: { $error: false, $dirty: false }, 89 | password: '' 90 | }), 91 | template: ` 92 | 100 | ` 101 | }) 102 | -------------------------------------------------------------------------------- /packages/switch-button/README.md: -------------------------------------------------------------------------------- 1 | # @tournant/switch-button 2 | 3 | ## Installation 4 | 5 | You can install the component using NPM or Yarn. 6 | 7 | ``` 8 | npm install @tournant/switch-button --save 9 | ``` 10 | 11 | If you use Yarn: 12 | 13 | ``` 14 | yarn add @tournant/switch-button 15 | ``` 16 | 17 | Once the component is installed you need to import it wherever you want to use it. 18 | 19 | ```js 20 | import TournantSwitchButton from '@tournant/switch-button' 21 | ``` 22 | 23 | Don’t forget to add it to the registered components (been there, done that): 24 | 25 | ```js 26 | components: { 27 | TournantSwitchButton, 28 | // ... all the other amazing components 29 | } 30 | ``` 31 | 32 | ## Usage 33 | 34 | Use this switch button, or toggle button as they are sometimes called, to implement a setting where you need literally an on-off switch (think: dark mode). [Read here more about the decision to not implement it with a checkbox input.](https://inclusive-components.design/toggle-button/#thisdoesntquitefeelright) 35 | 36 | ### Props 37 | 38 | Use the `value` prop to set the switch button's state: 39 | 40 | ```html 41 | Tournant awesomeness 42 | ``` 43 | 44 | To use `` as a controlled component, use the `v-model` attribute to bind it: 45 | 46 | ```html 47 | Notify me by carrier pidgeon 48 | ``` 49 | 50 | To supply a both visual and programmatically determined label for your switch button instance use the default slot like this: 51 | 52 | ```html 53 | Dark mode 54 | ``` 55 | 56 | Other visually perceivable texts are available: the `on-label` prop (default value: "On", type String) labels the "on" state, whereas – surprisingly – the `off-label` prop (default value: "Off", type String) labels the "off" state: 57 | 58 | ```html 59 | Kontrastmodus 60 | ``` 61 | 62 | ### Styles 63 | 64 | The component exposes the following CSS classes for its parts: 65 | 66 | | Classname | Element | 67 | | ------------------------------- | -------------------------------------------- | 68 | | t-ui-switch-button | Root | 69 | | t-ui-switch-button\_\_button | The button itself | 70 | | t-ui-switch-button\_\_label | The visual label | 71 | | t-ui-switch-button\_\text | Generic container for the visual state label | 72 | | t-ui-switch-button\_\text--on | Visual state label for "on" state | 73 | | t-ui-switch-button\_\text-off | Visual state label for "off" state | 74 | 75 | ## Bugs & Enhancements 76 | 77 | If you found a bug, please create a [bug ticket](https://github.com/tournantdev/ui/issues/new?assignees=&labels=component:switch-button&template=bug_report.md&title=). 78 | 79 | For enhancements please refer to the [contributing guidelines](https://github.com/tournantdev/ui/blob/master/CONTRIBUTING.md). 80 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing 2 | 3 | ## Bugs 4 | 5 | If you found a bug in one of our components, please open a [new bug issue](https://github.com/tournantdev/ui/issues/new?assignees=&labels=&template=bug_report.md&title=). 6 | 7 | Providing a reduced test case, e.g. in a [Codesandbox](https://codesandbox.io/), is much appreciated. 8 | 9 | ## Features & New Components 10 | 11 | You want to contribute a component or add a missing feature? That’s amazing. Before developing, though, we ask you to start with a [feature request issue](https://github.com/tournantdev/ui/issues/new?assignees=&labels=enhancement&template=feature_request.md&title=). 12 | 13 | Why’s that? Tournant UI does not try to provide _all_ UI patterns. Some may be out of the scope of this repo. By having a discussion upfront, we aim for a more targeted and productive development process. 14 | 15 | After we discussed your proposal you can go full steam ahead. For developing please follow the _Fork & Pull Request_ workflow, as [explained here](https://gist.github.com/Chaser324/ce0505fbed06b947d962 'GitHub Standard Fork & Pull Request Workflow by Chaser134'). 16 | 17 | Pull Requests _should_ contain unit tests. However, if you are not sure how to write these tests, please do not hesitate to open a request. We can figure out how to add necessary tests together. 18 | 19 | Pull Requests _must_ contain readme updates. Or a a readme for a new component that explains how to use it. We will not merge PRs that do not contain documentation. 20 | 21 | To create files for a new component use the `yarn run create` command. This will run the [@tournant/communard](https://github.com/tournantdev/communard) CLI tool. The [corresponding readme](https://github.com/tournantdev/communard/blob/master/README.md) contains usage information. 22 | 23 | Please always use this tool for new components, as it will create all config files in a standardised manner. 24 | 25 | ### Watch Mode 26 | 27 | Some components depend on each other. To keep them up-to-date when developing in sync run `yarn watch` in the respective package folders. 28 | 29 | It is, unfortunately, currently not possible to use Lerna for this. Thus, every package’s watch mode need to run in separate terminal session. 30 | 31 | ### Storybook 32 | 33 | We use [Storybook](https://storybook.js.org/) to quickly prototype new components. If you’ve never worked with it before, we recommend the [Intro to Storybook](https://www.learnstorybook.com/intro-to-storybook) guide. 34 | 35 | Stories for single components are located in the respective `tests` folder. `@tournant/communard` will create this file for you. 36 | 37 | To start Storybook run `yarn storybook`. This will open an instance with hot-reloading and so forth on port `9001`. 38 | 39 | We use [Knobs](https://github.com/storybookjs/storybook/tree/master/addons/knobs) for interactive stories. 40 | 41 | ## Website 42 | 43 | There is none just yet. Available components are listed in [ui/index.html](ui/index.html), which is deployed to Netlify. A better site is coming soon. 44 | 45 | That’s it. If there are any open questions, please do not hesitate to contact us at [team@tournant.dev](mailto:team@tournant.dev) 46 | 47 | Thanks. 💞 48 | -------------------------------------------------------------------------------- /ui/src/styles/type/font-face.scss: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'Fabrikat-Light'; 3 | font-weight: 300; 4 | src: url('https://static.tournant.dev/webfonts/30BB69_6_0.eot'); 5 | src: url('https://static.tournant.dev/webfonts/30BB69_6_0.eot?#iefix') 6 | format('embedded-opentype'), 7 | url('https://static.tournant.dev/webfonts/30BB69_6_0.woff2') format('woff2'), 8 | url('https://static.tournant.dev/webfonts/30BB69_6_0.woff') format('woff'), 9 | url('https://static.tournant.dev/webfonts/30BB69_6_0.ttf') 10 | format('truetype'); 11 | } 12 | 13 | @font-face { 14 | font-family: 'Fabrikat-LightItalic'; 15 | font-weight: 300; 16 | font-style: italic; 17 | src: url('https://static.tournant.dev/webfonts/30BB69_7_0.eot'); 18 | src: url('https://static.tournant.dev/webfonts/30BB69_7_0.eot?#iefix') 19 | format('embedded-opentype'), 20 | url('https://static.tournant.dev/webfonts/30BB69_7_0.woff2') format('woff2'), 21 | url('https://static.tournant.dev/webfonts/30BB69_7_0.woff') format('woff'), 22 | url('https://static.tournant.dev/webfonts/30BB69_7_0.ttf') 23 | format('truetype'); 24 | } 25 | 26 | @font-face { 27 | font-family: 'Fabrikat'; 28 | font-weight: normal; 29 | font-style: normal; 30 | src: url('https://static.tournant.dev/webfonts/30BB69_8_0.eot'); 31 | src: url('https://static.tournant.dev/webfonts/30BB69_8_0.eot?#iefix') 32 | format('embedded-opentype'), 33 | url('https://static.tournant.dev/webfonts/30BB69_8_0.woff2') format('woff2'), 34 | url('https://static.tournant.dev/webfonts/30BB69_8_0.woff') format('woff'), 35 | url('https://static.tournant.dev/webfonts/30BB69_8_0.ttf') 36 | format('truetype'); 37 | } 38 | 39 | @font-face { 40 | font-family: 'Fabrikat'; 41 | font-weight: normal; 42 | font-style: italic; 43 | src: url('https://static.tournant.dev/webfonts/30BB69_9_0.eot'); 44 | src: url('https://static.tournant.dev/webfonts/30BB69_9_0.eot?#iefix') 45 | format('embedded-opentype'), 46 | url('https://static.tournant.dev/webfonts/30BB69_9_0.woff2') format('woff2'), 47 | url('https://static.tournant.dev/webfonts/30BB69_9_0.woff') format('woff'), 48 | url('https://static.tournant.dev/webfonts/30BB69_9_0.ttf') 49 | format('truetype'); 50 | } 51 | 52 | @font-face { 53 | font-family: 'Fabrikat'; 54 | font-weight: bold; 55 | src: url('https://static.tournant.dev/webfonts/30BB69_0_0.eot'); 56 | src: url('https://static.tournant.dev/webfonts/30BB69_0_0.eot?#iefix') 57 | format('embedded-opentype'), 58 | url('https://static.tournant.dev/webfonts/30BB69_0_0.woff2') format('woff2'), 59 | url('https://static.tournant.dev/webfonts/30BB69_0_0.woff') format('woff'), 60 | url('https://static.tournant.dev/webfonts/30BB69_0_0.ttf') 61 | format('truetype'); 62 | } 63 | 64 | @font-face { 65 | font-family: 'Fabrikat'; 66 | font-style: italic; 67 | font-weight: bold; 68 | src: url('https://static.tournant.dev/webfonts/30BB69_5_0.eot'); 69 | src: url('https://static.tournant.dev/webfonts/30BB69_5_0.eot?#iefix') 70 | format('embedded-opentype'), 71 | url('https://static.tournant.dev/webfonts/30BB69_5_0.woff2') format('woff2'), 72 | url('https://static.tournant.dev/webfonts/30BB69_5_0.woff') format('woff'), 73 | url('https://static.tournant.dev/webfonts/30BB69_5_0.ttf') 74 | format('truetype'); 75 | } 76 | -------------------------------------------------------------------------------- /packages/notification/tests/unit/Notification.spec.js: -------------------------------------------------------------------------------- 1 | import { shallowMount } from '@vue/test-utils' 2 | 3 | import TournantNotification from '../../src/index.vue' 4 | 5 | jest.useFakeTimers() 6 | 7 | describe('notification', () => { 8 | let wrapper 9 | let $root 10 | 11 | beforeEach(() => { 12 | wrapper = shallowMount(TournantNotification, { 13 | propsData: { 14 | message: 'Test message' 15 | } 16 | }) 17 | 18 | $root = wrapper.vm.$el 19 | }) 20 | 21 | describe('Props', () => { 22 | it('allows to set a message', () => { 23 | expect(wrapper.text()).toBe('Test message') 24 | }) 25 | 26 | it('allow to set a state', () => { 27 | wrapper.setProps({ state: 'this-is-a-test' }) 28 | 29 | expect(wrapper.vm.$props.state).toBe('this-is-a-test') 30 | }) 31 | 32 | it('allows to set a custom timeout', () => { 33 | wrapper.setProps({ hideAfterSeconds: 14 }) 34 | 35 | expect(wrapper.vm.$props.hideAfterSeconds).toBe(14) 36 | }) 37 | }) 38 | 39 | describe('ARIA states and properties', () => { 40 | it('has a role of `status`', () => { 41 | expect($root.getAttribute('role')).toBe('status') 42 | }) 43 | 44 | it('changes role to `alert` if `type` is `assertive`', () => { 45 | wrapper.setProps({ type: 'assertive' }) 46 | 47 | expect(wrapper.attributes('role')).toBe('alert') 48 | }) 49 | 50 | it('sets `aria-hidden` to `false` if a message is present and the timeout has not passed', () => { 51 | wrapper.setProps({ message: 'Message no timeout' }) 52 | 53 | expect($root.getAttribute('aria-hidden')).toBe('false') 54 | }) 55 | 56 | it('sets `aria-hidden` to `true` if a message is present and the timeout has passed', () => { 57 | jest.advanceTimersByTime(5100) 58 | 59 | expect($root.getAttribute('aria-hidden')).toBe('true') 60 | }) 61 | }) 62 | 63 | describe('Timing', () => { 64 | it('clears the timeout if destroyed from the outside', () => { 65 | wrapper.destroy() 66 | 67 | expect(clearTimeout).toHaveBeenCalled() 68 | }) 69 | 70 | // skipping this currently as the timer forwarding does not seem to work 71 | it.skip('keeps the message visible if longer timeframe has been specified', () => { 72 | wrapper.setProps({ hideAfterSeconds: 10 }) 73 | 74 | jest.advanceTimersByTime(5000) 75 | 76 | expect($root.getAttribute('aria-hidden')).toBe('false') 77 | 78 | jest.advanceTimersByTime(5100) 79 | 80 | expect($root.getAttribute('aria-hidden')).toBe('true') 81 | }) 82 | 83 | it('emits an event once the timeout has passed', () => { 84 | jest.runOnlyPendingTimers() 85 | 86 | expect(wrapper.emitted('messageTimeout')).toBeTruthy() 87 | }) 88 | }) 89 | 90 | describe('CSS', () => { 91 | it('has a default class', () => { 92 | expect(wrapper.classes('t-ui-alert')).toBe(true) 93 | }) 94 | 95 | const states = [ 96 | { state: 'error', cssClass: 'is-error' }, 97 | { state: 'warning', cssClass: 'is-warning' }, 98 | { state: 'success', cssClass: 'is-success' } 99 | ] 100 | 101 | states.forEach(({ state, cssClass }) => { 102 | it(`sets state class for ${state}`, () => { 103 | wrapper.setProps({ state }) 104 | 105 | expect(wrapper.classes(cssClass)).toBe(true) 106 | }) 107 | }) 108 | }) 109 | }) 110 | -------------------------------------------------------------------------------- /packages/dynamic-anchor/tests/unit/DynamicAnchor.spec.js: -------------------------------------------------------------------------------- 1 | import { shallowMount } from '@vue/test-utils' 2 | 3 | import TournantDynamicAnchor from '../../src/index.vue' 4 | 5 | const defaultLink = { to: '/test', text: 'Test' } 6 | 7 | describe('@tournant/dynamic-anchor', () => { 8 | let wrapper 9 | 10 | beforeEach(() => { 11 | wrapper = shallowMount(TournantDynamicAnchor, { 12 | propsData: { 13 | to: defaultLink.to 14 | }, 15 | slots: { 16 | default: defaultLink.text 17 | } 18 | }) 19 | }) 20 | 21 | it('renders a link', () => { 22 | expect(wrapper.is('a')).toBe(true) 23 | }) 24 | 25 | it('renders link text', () => { 26 | expect(wrapper.text()).toBe(defaultLink.text) 27 | }) 28 | 29 | it('sets `href`', () => { 30 | expect( 31 | wrapper 32 | .findAll('a') 33 | .at(0) 34 | .attributes('href') 35 | ).toBe('/test') 36 | }) 37 | 38 | it('sets `href` if href attribute is given', () => { 39 | wrapper = shallowMount(TournantDynamicAnchor, { 40 | propsData: { 41 | href: defaultLink.to 42 | }, 43 | slots: { 44 | default: defaultLink.text 45 | } 46 | }) 47 | 48 | expect( 49 | wrapper 50 | .findAll('a') 51 | .at(0) 52 | .attributes('href') 53 | ).toBe('/test') 54 | }) 55 | }) 56 | 57 | describe('@tournant/dynamic-anchor – with @vue/router', () => { 58 | let wrapper 59 | 60 | beforeEach(() => { 61 | wrapper = shallowMount(TournantDynamicAnchor, { 62 | propsData: { 63 | to: defaultLink.to 64 | }, 65 | mocks: { 66 | parent: { 67 | $root: { 68 | router: () => '' 69 | } 70 | } 71 | }, 72 | stubs: ['router-link'] 73 | }) 74 | }) 75 | 76 | it('renders `router-link`', () => { 77 | expect(wrapper.find('router-link-stub')).toBeDefined() 78 | }) 79 | 80 | it('renders `a` if desired', () => { 81 | wrapper = shallowMount(TournantDynamicAnchor, { 82 | propsData: { 83 | to: defaultLink.to, 84 | useNativeLinkElement: true 85 | }, 86 | mocks: { 87 | parent: { 88 | $root: { 89 | router: () => '' 90 | } 91 | } 92 | }, 93 | stubs: ['router-link'] 94 | }) 95 | 96 | expect(wrapper.is('a')).toBe(true) 97 | }) 98 | 99 | it('sets `to` attribute', () => { 100 | console.log(wrapper.attributes()) 101 | 102 | expect(wrapper.attributes('to')).toBe('/test') 103 | }) 104 | }) 105 | 106 | describe.only('@tournant/dynamic-anchor – with Nuxt', () => { 107 | let wrapper 108 | 109 | beforeEach(() => { 110 | wrapper = shallowMount(TournantDynamicAnchor, { 111 | context: { 112 | props: { 113 | to: defaultLink.to 114 | }, 115 | parent: { 116 | $root: { 117 | $options: { 118 | nuxt: () => '', 119 | router: () => '' 120 | } 121 | } 122 | } 123 | }, 124 | stubs: ['nuxt-link'] 125 | }) 126 | }) 127 | 128 | it('renders `nuxt-link`', () => { 129 | expect(wrapper.find('nuxt-link-stub')).toBeDefined() 130 | }) 131 | 132 | it('renders `a` if desired', () => { 133 | wrapper = shallowMount(TournantDynamicAnchor, { 134 | propsData: { 135 | to: defaultLink.to, 136 | useNativeLinkElement: true 137 | }, 138 | mocks: { 139 | parent: { 140 | $root: { 141 | $options: { 142 | nuxt: () => '', 143 | router: () => '' 144 | } 145 | } 146 | } 147 | }, 148 | stubs: ['nuxt-link'] 149 | }) 150 | 151 | expect(wrapper.is('a')).toBe(true) 152 | }) 153 | }) 154 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Tournant UI 2 | 3 | 4 | 5 | In the kitchen, the _tournant_ is the person moving around, helping out. 6 | 7 | Tournant UI aims to be this. For User Interfaces. Tournant UI will not replace your complete UI or dictate how to you design your elements. 8 | 9 | But if you need to integrate inclusive components in your site, Tournant UI will be there. Like a helping hand. 10 | 11 | ## Note 12 | 13 | This is still in early development. Many components needed are missing. If you are able to contribute, please do! 14 | 15 | ## Components 16 | 17 | This project aims to provide common user interface patterns. It revolves around the [WAI-ARIA design patterns and examples](https://www.w3.org/TR/wai-aria-practices-1.1/#aria_ex) list. But it is not limited to it. 18 | 19 | You can track our progress and development plans in the [Component Development project](https://github.com/tournantdev/ui/projects/2). Again, if you are able to contribute one of the components, please do so. If you need one of the components but don’t feel like you can build it on your own, open a [feature request issue](https://github.com/tournantdev/ui/issues/new?assignees=&labels=enhancement&template=feature_request.md&title=). 20 | 21 | ## Acknowledgment 22 | 23 | Tournant is heavily inspired by projects such as Reach UI, Inclusive Components and Accessible App. 24 | 25 | ## Feedback & Contributions 26 | 27 | Contributions are always welcome. 28 | 29 | We have written down detailed [contribution guidelines](CONTRIBUTING.md). 30 | 31 | Please be aware that all contributions have to follow our [Code of Conduct](CODE_OF_CONDUCT.md). Contributions of any kind which to not adhere to it will be removed. No exceptions will be made. 32 | 33 | Thanks. 💞 34 | 35 | ## Development 36 | 37 | If you want to improve the component, follow these steps. 38 | 39 | Tournant UI uses [Lerna](https://lerna.js.org/). You will need to bootstrap the project folder: 40 | 41 | ``` 42 | yarn bootstrap 43 | ``` 44 | 45 | This will install all packages and hoist them to the project root folder. 46 | 47 | ### Create a Component 48 | 49 | We maintain a CLI helper tool named [Communard](https://github.com/tournantdev/communard) to quickly scaffold the folder structure needed to develop a new component. It is integrated into the project. You can start it by running `yarn run create`. 50 | 51 | To develop your components please use Storybook [as explained in the contribution documentation](CONTRIBUTING.md#storybook). 52 | 53 | ### Build packages 54 | 55 | To build all packages run: 56 | 57 | ``` 58 | yarn build 59 | ``` 60 | 61 | ### Run your tests 62 | 63 | ``` 64 | yarn run test 65 | ``` 66 | 67 | ### Lints and fixes files 68 | 69 | ``` 70 | yarn run lint 71 | ``` 72 | 73 | ### Publish Packages 74 | 75 | 💁 _Note:_ You need to have access to the npm @tournant organisation to run this command. 76 | 77 | Before you are able to use the integrated Lerna publishing flow the package needs to be on NPM already. We recommend [np](https://github.com/sindresorhus/np) for doing so. 78 | 79 | To publish everything run: 80 | 81 | ``` 82 | yarn publish:packages 83 | ``` 84 | 85 | ## Authorship 86 | 87 | Tournant UI is maintained by Marcus and Oscar. But, in reality, this project wouldn’t be possible without the amazing community that has evolved around inclusive web development. Thanks, y’all. 88 | 89 | Special thanks to Ryan Florence and the [Reach UI](https://github.com/reach/reach-ui) project, from which we blatantly copied lots of the architecutural decisions and the idea itself. 90 | 91 | Marcus Herrmann | [@marcus-herrmann](https://github.com/marcus-herrmann) | [www.marcus.io](www.marcus.io) 92 | Oscar Braunert | [@ovlb](https://github.com/ovlb) | [www.ovl.design](www.ovl.design) 93 | -------------------------------------------------------------------------------- /packages/combobox/README.md: -------------------------------------------------------------------------------- 1 | # @tournant/ui 2 | 3 | A Vue component that implements the [WAI-ARIA authoring practices for a Combobox](https://www.w3.org/TR/wai-aria-practices-1.1/#combobox). 4 | 5 | ## Preface 6 | 7 | I am no regular screenreader user. I followed the authoring practices to the best of my understanding. If something seems off, please open an [issue](https://github.com/tournantdev/ui/issues/new 'New issue form of this project'). 8 | 9 | The current implementation only covers the _List autocomplete with manual selection_ part of the authoring practices. 10 | 11 | ## Installation 12 | 13 | No rocket science here. Although rockets are cool, tbh. 🚀 Just install the component from npm. 14 | 15 | ``` 16 | npm install @tournant/combobox --save-dev 17 | ``` 18 | 19 | If you use Yarn: 20 | 21 | ``` 22 | yarn add -D @tournant/combobox 23 | ``` 24 | 25 | Once the component is installed you need to import wherever you want to use it. 26 | 27 | ```js 28 | import TournantCombobox from '@tournant/combobox' 29 | ``` 30 | 31 | Don’t forget to add it to the registered components (been there, done that): 32 | 33 | ```js 34 | components: { 35 | TournantCombobox, 36 | // ... all the other amazing components 37 | } 38 | ``` 39 | 40 | ## Demo 41 | 42 | You can find a live demo on [@tournant/ui.code.ovl.design](https://@tournant/ui.code.ovl.design/). 43 | 44 | ## API 45 | 46 | ## Props 47 | 48 | - `items`: An array of items to be displayed. The items of the array _must_ be objects that have a `title` and `id` property. If an empty array is passed, the message set in the `noResultsMessage` prop is shown. Defaults to an empty array. 49 | - `inputLabel`: The label text of the input. Required. 50 | - `isStyled`: Whether or not default styles should be applied. Defaults to false. See section [Styles](#styles) below. 51 | - `noResultsMessage`: Text that should be shown if no results can be passed. Required. 52 | 53 | ## Emitted events 54 | 55 | - `input`: The component emits an input event if the value of the textbox changes. Please note that this is not debounced or throttled. 56 | - `foundResult`: `keyup.enter` or `click` on an item emit the ID of the result. 57 | 58 | ## Styles 59 | 60 | The combobox exposes the following CSS classes for its parts: 61 | 62 | | Classname | Element | 63 | | -------------------------- | ------------ | 64 | | t-ui-combobox | Root | 65 | | t-ui-combobox\_\_input | Text field | 66 | | t-ui-combobox\_\_list | List element | 67 | | t-ui-combobox\_\_list-item | List items | 68 | 69 | By default no styles will be attached to these classes. 70 | 71 | Setting the `isStyled` prop to `true` will enable some default styles. Those are scoped by adding the `--is-styled` modifier to the respective element. 72 | These styles add some little helpers (e.g. limiting the width, removing list styles, add `position: absolute` to the list) and some minor styling. 73 | 74 | You can adapt spacing and color of the component by accessing the following Custom Properties ([supporting browsers](https://caniuse.com/#search=custom%20prop 'Support table for CSS Custom Properties')): 75 | 76 | | Property | Default | 77 | | ------------------- | ------------------ | 78 | | --t-ui-cb-space | 0.5rem | 79 | | --t-ui-cb-clr-light | rgb(206, 206, 206) | 80 | | --t-ui-cb-clr-dark | darkblue | 81 | | --t-ui-cb-z-index | 10 | 82 | 83 | ## Bugs & Enhancements 84 | 85 | If you found a bug, please create a [bug ticket](https://github.com/tournantdev/ui/issues/new?assignees=&labels=component:combobox&template=bug_report.md&title=). 86 | 87 | For enhancements please refer to the [contributing guidelines](https://github.com/tournantdev/ui/blob/master/CONTRIBUTING.md). 88 | 89 | ## License 90 | 91 | This project is licensed under the [MIT license](LICENSE). 92 | -------------------------------------------------------------------------------- /packages/breadcrumb/tests/unit/Breadcrumb.spec.js: -------------------------------------------------------------------------------- 1 | import { shallowMount } from '@vue/test-utils' 2 | import TournantDynamicAnchor from '@tournant/dynamic-anchor' 3 | 4 | import TournantBreadcrumb from '../../src/index.vue' 5 | 6 | import { itemData, noLastLinkData } from '../breadcrumb.stories' 7 | 8 | describe('@tournant/breadcrumb', () => { 9 | let wrapper 10 | 11 | beforeEach(() => { 12 | wrapper = shallowMount(TournantBreadcrumb, { 13 | propsData: { 14 | links: itemData 15 | }, 16 | stubs: ['tournant-dynamic-anchor'] 17 | }) 18 | }) 19 | 20 | it('renders a `nav element`', () => { 21 | expect(wrapper.find('nav')).toBeDefined() 22 | }) 23 | 24 | it('sets an `aria-label` to the nav element', () => { 25 | expect(wrapper.attributes('aria-label')).toBe('Breadcrumb') 26 | }) 27 | 28 | it('allows to change the label text', () => { 29 | wrapper.setProps({ labelText: 'Brotkrume' }) 30 | 31 | expect(wrapper.attributes('aria-label')).toBe('Brotkrume') 32 | }) 33 | 34 | it('allows to set `aria-labelledby`', () => { 35 | wrapper = shallowMount(TournantBreadcrumb, { 36 | propsData: { 37 | links: itemData, 38 | labelledBy: 'test-id' 39 | } 40 | }) 41 | 42 | expect(wrapper.attributes('aria-labelledby')).toBe('test-id') 43 | expect(wrapper.attributes('aria-label')).not.toBeDefined() 44 | }) 45 | 46 | it('allows to render a label inside the nav', () => { 47 | wrapper = shallowMount(TournantBreadcrumb, { 48 | propsData: { 49 | links: itemData, 50 | labelledBy: 'test-id' 51 | }, 52 | slots: { 53 | label: '

Custom label

' 54 | } 55 | }) 56 | 57 | expect(wrapper.find('nav>h3').text()).toBe('Custom label') 58 | }) 59 | 60 | it('renders `aria-current`', () => { 61 | const $links = wrapper.findAll(TournantDynamicAnchor) 62 | const $last = $links.at($links.length - 1) 63 | 64 | expect($last.attributes('aria-current')).toBe('page') 65 | }) 66 | 67 | it('does not render `aria-current` if the last item has no link', () => { 68 | wrapper.setProps({ links: noLastLinkData }) 69 | 70 | const $links = wrapper.findAll(TournantDynamicAnchor) 71 | const $last = $links.at($links.length - 1) 72 | 73 | expect($last.attributes('aria-current')).toBeUndefined() 74 | }) 75 | 76 | describe('Microdata', () => { 77 | it('marks the list as BreadcrumbList', () => { 78 | const $list = wrapper.find('ol') 79 | const { itemscope, itemtype } = $list.attributes() 80 | 81 | expect(itemscope).toBeDefined() 82 | expect(itemtype).toBe('https://schema.org/BreadcrumbList') 83 | }) 84 | 85 | it('marks list items as itemListElement', () => { 86 | const $li = wrapper.findAll('li').at(0) 87 | const { itemscope, itemtype, itemprop } = $li.attributes() 88 | 89 | expect(itemscope).toBeDefined() 90 | expect(itemtype).toBe('https://schema.org/ListItem') 91 | expect(itemprop).toBe('itemListElement') 92 | }) 93 | 94 | it('marks links as itemListElement', () => { 95 | const $link = wrapper.findAll(TournantDynamicAnchor).at(0) 96 | const { itemtype, itemprop } = $link.attributes() 97 | 98 | expect(itemtype).toBe('https://schema.org/Thing') 99 | expect(itemprop).toBe('item') 100 | }) 101 | 102 | it('adds the name of list items', () => { 103 | const $li = wrapper 104 | .findAll(TournantDynamicAnchor) 105 | .at(0) 106 | .find('span') 107 | const { itemprop } = $li.attributes() 108 | 109 | expect(itemprop).toBe('name') 110 | }) 111 | 112 | it('adds the position in the link element', () => { 113 | const $meta = wrapper 114 | .findAll('li') 115 | .at(0) 116 | .find('meta') 117 | const { itemprop, content } = $meta.attributes() 118 | 119 | expect(content).toBe('1') 120 | expect(itemprop).toBe('position') 121 | }) 122 | }) 123 | }) 124 | -------------------------------------------------------------------------------- /packages/breadcrumb/README.md: -------------------------------------------------------------------------------- 1 | # @tournant/breadcrumb 2 | 3 | A trail of links to let users find their place within a website. 4 | 5 | ## Installation 6 | 7 | No rocket science here. Although rockets are cool, to be honest. 🚀 You can install the component using NPM or Yarn. 8 | 9 | ``` 10 | npm install @tournant/breadcrumb --save 11 | ``` 12 | 13 | If you use Yarn: 14 | 15 | ``` 16 | yarn add @tournant/breadcrumb 17 | ``` 18 | 19 | Once the component is installed you need to import it wherever you want to use it. 20 | 21 | ```js 22 | import TournantBreadcrumb from '@tournant/breadcrumb' 23 | ``` 24 | 25 | Don’t forget to add it to the registered components (been there, done that): 26 | 27 | ```js 28 | components: { 29 | TournantBreadcrumb, 30 | // ... all the other amazing components 31 | } 32 | ``` 33 | 34 | ## Usage 35 | 36 | The breadcrumb renders an ordered list of links. The last item in the list is marked with `aria-current`. 37 | 38 | ### Props 39 | 40 | - `links`: Array. Required. The links in the path you want to render. Consisting of items which are structured as follow: 41 | - `item`: Object. Needs to have the properties `to` and `text`. If used with Nuxt or @vue/router `exact` can also be set. 42 | - `labelText`: String. Default: «Breadcrumb». A breadcrumb navigation _has_ to have an `aria-label`, you can change it with this prop. 43 | - `labelledBy`: You can provide the ID of an element on the page to label the navigation. If you use `labelledBy`, `aria-label` will _not_ be added. 44 | 45 | ### Basic Example 46 | 47 | ```html 48 | 49 | 56 | 57 | 58 | 67 | ``` 68 | 69 | #### aria-current 70 | 71 | You can omit `to` for the last item. In which case `aria-current` will not be set. 72 | 73 | ### Labelling 74 | 75 | A label can be either provided by passing a `labelText` or linking an element via ID using `labelledBy`. The linked element can be included in the component by using the `label` slot. 76 | 77 | ```html 78 | 79 | 82 | 83 | ``` 84 | 85 | ### Framework Detection 86 | 87 | By default, all links are rendered as simple `a` tags. However, if you use Nuxt or @vue/router this is automatically detected and the links are rendered as `nuxt-link` or `router-link` respectively. 88 | 89 | Under the hood it makes use of [@tournant/dynamic-anchor](https://www.npmjs.com/package/@tournant/dynamic-anchor). 90 | 91 | ### CSS 92 | 93 | | Classname | Element | 94 | | ----------------------- | ----------------------------------------- | 95 | | t-ui-breadcrumb | Root | 96 | | t-ui-breadcrumb\_\_list | The `ol` containing list items with links | 97 | | t-ui-breadcrumb\_\_item | `li` containing a link | 98 | | t-ui-breadcrumb\_\_link | `a` to the actual item | 99 | 100 | ### Microdata 101 | 102 | Schema.org compatible [BreadcrumbList microdata](https://schema.org/BreadcrumbList) is embedded into the markup. Hence this breadcrumb is discoverable by third parties and they are able to use this data, e.g. in displaying it in a search results page. 103 | 104 | ### Events 105 | 106 | If a user clicks on a link in the breadcrumb it emits a custom event named `itemClick`. The payload is the `index` of the clicked item. 107 | 108 | ## Bugs & Enhancements 109 | 110 | If you found a bug, please create a [bug ticket](https://github.com/tournantdev/ui/issues/new?assignees=&labels=component:breadcrumb&template=bug_report.md&title=). 111 | 112 | For enhancements please refer to the [contributing guidelines](https://github.com/tournantdev/ui/blob/master/CONTRIBUTING.md). 113 | -------------------------------------------------------------------------------- /packages/combobox/src/index.vue: -------------------------------------------------------------------------------- 1 | 49 | 50 | 155 | 156 | 198 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | We as members, contributors, and leaders pledge to make participation in our community a harassment-free experience for everyone, regardless of age, body size, visible or invisible disability, ethnicity, sex characteristics, gender identity and expression, level of experience, education, socio-economic status, nationality, personal appearance, race, religion, or sexual identity and orientation. 6 | 7 | We pledge to act and interact in ways that contribute to an open, welcoming, diverse, inclusive, and healthy community. 8 | 9 | ## Our Standards 10 | 11 | Examples of behavior that contributes to a positive environment for our community include: 12 | 13 | - Demonstrating empathy and kindness toward other people 14 | - Being respectful of differing opinions, viewpoints, and experiences 15 | - Giving and gracefully accepting constructive feedback 16 | - Accepting responsibility and apologizing to those affected by our mistakes, and learning from the experience 17 | - Focusing on what is best not just for us as individuals, but for the overall community 18 | 19 | Examples of unacceptable behavior include: 20 | 21 | - The use of sexualized language or imagery, and sexual attention or 22 | advances of any kind 23 | - Trolling, insulting or derogatory comments, and personal or political attacks 24 | - Public or private harassment 25 | - Publishing others' private information, such as a physical or email 26 | address, without their explicit permission 27 | - Other conduct which could reasonably be considered inappropriate in a 28 | professional setting 29 | 30 | ## Enforcement Responsibilities 31 | 32 | Community leaders are responsible for clarifying and enforcing our standards of acceptable behavior and will take appropriate and fair corrective action in response to any behavior that they deem inappropriate, threatening, offensive, or harmful. 33 | 34 | Community leaders have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, and will communicate reasons for moderation decisions when appropriate. 35 | 36 | ## Scope 37 | 38 | This Code of Conduct applies within all community spaces, and also applies when an individual is officially representing the community in public spaces. Examples of representing our community include using an official e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. 39 | 40 | ## Enforcement 41 | 42 | Instances of abusive, harassing, or otherwise unacceptable behavior may be reported to the community leaders responsible for enforcement at [team@tournant.dev](mailto:team@tournant.dev). All complaints will be reviewed and investigated promptly and fairly. 43 | 44 | All community leaders are obligated to respect the privacy and security of the reporter of any incident. 45 | 46 | ## Enforcement Guidelines 47 | 48 | Community leaders will follow these Community Impact Guidelines in determining the consequences for any action they deem in violation of this Code of Conduct: 49 | 50 | ### 1. Correction 51 | 52 | **Community Impact**: Use of inappropriate language or other behavior deemed unprofessional or unwelcome in the community. 53 | 54 | **Consequence**: A private, written warning from community leaders, providing clarity around the nature of the violation and an explanation of why the behavior was inappropriate. A public apology may be requested. 55 | 56 | ### 2. Warning 57 | 58 | **Community Impact**: A violation through a single incident or series of actions. 59 | 60 | **Consequence**: A warning with consequences for continued behavior. No interaction with the people involved, including unsolicited interaction with those enforcing the Code of Conduct, for a specified period of time. This includes avoiding interactions in community spaces as well as external channels like social media. Violating these terms may lead to a temporary or permanent ban. 61 | 62 | ### 3. Temporary Ban 63 | 64 | **Community Impact**: A serious violation of community standards, including sustained inappropriate behavior. 65 | 66 | **Consequence**: A temporary ban from any sort of interaction or public communication with the community for a specified period of time. No public or private interaction with the people involved, including unsolicited interaction with those enforcing the Code of Conduct, is allowed during this period. Violating these terms may lead to a permanent ban. 67 | 68 | ### 4. Permanent Ban 69 | 70 | **Community Impact**: Demonstrating a pattern of violation of community standards, including sustained inappropriate behavior, harassment of an individual, or aggression toward or disparagement of classes of individuals. 71 | 72 | **Consequence**: A permanent ban from any sort of public interaction within the project community. 73 | 74 | ## Attribution 75 | 76 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 2.0, 77 | available at https://www.contributor-covenant.org/version/2/0/code_of_conduct.html. 78 | 79 | Community Impact Guidelines were inspired by [Mozilla's code of conduct enforcement ladder](https://github.com/mozilla/diversity). 80 | 81 | [homepage]: https://www.contributor-covenant.org 82 | 83 | For answers to common questions about this code of conduct, see the FAQ at 84 | https://www.contributor-covenant.org/faq. Translations are available at https://www.contributor-covenant.org/translations. 85 | -------------------------------------------------------------------------------- /packages/notification/README.md: -------------------------------------------------------------------------------- 1 | # @tournant/notification 2 | 3 | Notification messages that can be picked up by screenreaders. Implements the [status role](https://www.w3.org/TR/wai-aria-1.1/#status) by default. But can also be used as an [alert widget](https://www.w3.org/TR/wai-aria-1.1/#alert). 4 | 5 | ## Installation 6 | 7 | We are following standard package procedures. You can install the component using NPM or Yarn. 8 | 9 | ``` 10 | npm install @tournant/notification --save 11 | ``` 12 | 13 | If you use Yarn: 14 | 15 | ``` 16 | yarn add @tournant/notification 17 | ``` 18 | 19 | Once the component is installed you need to import it wherever you want to use it. 20 | 21 | ```js 22 | import TournantNotification from '@tournant/notification' 23 | ``` 24 | 25 | Don’t forget to add it to the registered components (been there, done that): 26 | 27 | ```js 28 | components: { 29 | TournantNotification, 30 | // ... all the other amazing components 31 | } 32 | ``` 33 | 34 | ## Usage 35 | 36 | The default usage of this component is the implementation of the `status` role. This role sets `aria-live` to `polite`, meaning that the text content of the component will be read after the screenreader has finished its current output. 37 | 38 | If you need to announce something important, change the prop `type` to be `assertive`. This will render the component with a role of `alert` and interrupt a screen reader in its current output. 39 | 40 | ### Usage as a status message 41 | 42 | A status message is a message that will be announced after the current output. It is useful if, say, a new page has been loaded. This is the default behaviour. 43 | 44 | ```html 45 | 46 | 47 | 48 | 49 |
Page 4 has been loaded
50 | > 51 | ``` 52 | 53 | ### Usage as an alert message 54 | 55 | An alert will be announced immdiately. It is useful if, say, a critical error has occured. 56 | 57 | ```html 58 | 59 | 63 | 64 | 65 | 68 | > 69 | ``` 70 | 71 | ### Props 72 | 73 | The following props can be used to control the component: 74 | 75 | - `message`: _Required_. A string that should be added to page and read out by screen readers. 76 | - `state`: Default: `info`. A state level, with which you can control visual representation. See section [#css](CSS) below. 77 | - `type`: Default: `polite`. Controls the announcement by a screen reader. Must be either `assertive` or `polite`. 78 | - `hideAfterSeconds`: Default: `5`. The time which should pass before the message is hidden. 79 | 80 | ### Timeout 81 | 82 | Alerts are only status messages. As such, they do not require user interaction. The spec is pretty clear: 83 | 84 | > Neither authors nor user agents are required to set or manage focus to them in order for them to be processed. Since alerts are not required to receive focus, content authors **SHOULD NOT** require users to close an alert. 85 | 86 | That’s why it is important to clear messages after a while. The while depends on the length of your messages. We use a default value of five seconds. But you are free to change to this with the `hideAfterSeconds` prop. 87 | 88 | Note: It is named _hideAfterSeconds_. We multiply the value by 1,000 in the component. Do not pass miliseconds as a value. 89 | 90 | Once the timeout elapses, the component sets `aria-hidden` to `true` and `display: none`. We do this to make it easier to comply with the ARIA requirements. You should, nonetheless, take care of discarding old messages in your app yourself. 91 | 92 | ### TalkBack Usage Notes 93 | 94 | From our testing it seems as if TalkBack on Android reads alert content twice. 95 | 96 | ### CSS 97 | 98 | The component exposes the `t-ui-alert` class by default. Additionally it will set the current state prepended by «is» as its class. Some examples: 99 | 100 | ```html 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 |
200 OK
110 | ``` 111 | 112 | States can be whatever you want: 113 | 114 | ```html 115 | 116 | 117 | 118 |
418 I’m a Teapot
119 | ``` 120 | 121 | These can act as a helper to style the component matching the state. 122 | 123 | ### Hiding messages 124 | 125 | If the timeout elapsed and the message has not been removed from the outside, `aria-hidden` will be set to true. To keep the UI in sync, `display: none` is added to the root element. 126 | 127 | The component will emit the event `messageTimeout` as soon as the timeout elapses. You can use this event to run a clean-up task in your app. 128 | 129 | ## Bugs & Enhancements 130 | 131 | If you found a bug, please create a [bug ticket](https://github.com/tournantdev/ui/issues/new?assignees=&labels=component:alert&template=bug_report.md&title=). 132 | 133 | For enhancements please refer to the [contributing guidelines](https://github.com/tournantdev/ui/blob/master/CONTRIBUTING.md). 134 | -------------------------------------------------------------------------------- /packages/combobox/tests/unit/Combobox.spec.js: -------------------------------------------------------------------------------- 1 | import { shallowMount } from '@vue/test-utils' 2 | import Combobox from '@p/combobox/src/index.vue' 3 | 4 | const items = [ 5 | { id: 1, title: 'test title 2' }, 6 | { id: 2, title: 'test title 2' }, 7 | { id: 3, title: 'test title 3' }, 8 | { id: 4, title: 'test title 4' } 9 | ] 10 | const inputLabel = 'Search for item' 11 | const noResultsMessage = 'Sorry, no results' 12 | const descendantIdBase = 'vCbItem_' 13 | 14 | describe('Combobox.vue', () => { 15 | let wrapper 16 | 17 | beforeEach(() => { 18 | wrapper = shallowMount(Combobox, { 19 | propsData: { 20 | items, 21 | inputLabel, 22 | noResultsMessage 23 | }, 24 | attachToDocument: true 25 | }) 26 | }) 27 | 28 | it('has a required inputLabel', () => { 29 | expect(wrapper.vm.$options.props.inputLabel.required).toBeTruthy() 30 | }) 31 | 32 | it('has a required noResultsMessage prop', () => { 33 | expect(wrapper.vm.$options.props.noResultsMessage.required).toBeTruthy() 34 | }) 35 | 36 | it('has an input with required aria attributes', () => { 37 | const $input = wrapper.find('input') 38 | const inputAttr = $input.attributes() 39 | 40 | expect(inputAttr['aria-autocomplete']).toBe('list') 41 | expect(inputAttr['role']).toBe('searchbox') 42 | }) 43 | 44 | it('sets the correct aria-label', () => { 45 | const $label = wrapper.find('label') 46 | 47 | expect($label.text()).toBe(inputLabel) 48 | }) 49 | 50 | it('has a method to define the id of a list item', () => { 51 | expect(wrapper.vm.getId).toBeDefined() 52 | }) 53 | 54 | it('creates the correct id', () => { 55 | expect(wrapper.vm.getId(1)).toBe(`${descendantIdBase}1`) 56 | }) 57 | 58 | it('starts at arrow position of `-1', () => { 59 | expect(wrapper.vm.$data.arrowPosition).toBe(-1) 60 | }) 61 | 62 | it('has no active descendant by default', () => { 63 | const $input = wrapper.find('input') 64 | const inputAttr = $input.attributes() 65 | 66 | expect(inputAttr['aria-activedescendant']).toBeUndefined() 67 | }) 68 | 69 | it('updates `aria-activedescendant` based on arrowPosition', () => { 70 | const arrowPosition = 1 71 | wrapper.setData({ arrowPosition }) 72 | const $input = wrapper.find('input') 73 | const inputAttr = $input.attributes() 74 | 75 | expect(inputAttr['aria-activedescendant']).toBe( 76 | `${descendantIdBase}${arrowPosition}` 77 | ) 78 | }) 79 | 80 | describe('arrow keys', () => { 81 | it('calls onKeyDown if pressing the down arrow key', () => { 82 | const stub = jest.fn() 83 | const $input = wrapper.find('input') 84 | 85 | wrapper.setMethods({ onKeyDown: stub }) 86 | 87 | $input.trigger('keyup.down') 88 | 89 | expect(wrapper.vm.onKeyDown).toBeCalled() 90 | }) 91 | 92 | it('calls onKeyUp if pressing the up arrow key', () => { 93 | const stub = jest.fn() 94 | const $input = wrapper.find('input') 95 | 96 | wrapper.setMethods({ onKeyUp: stub }) 97 | 98 | $input.trigger('keyup.up') 99 | 100 | expect(wrapper.vm.onKeyUp).toBeCalled() 101 | }) 102 | 103 | it('changes nothing when pressing arrow keys if the list is hidden (default state)', () => { 104 | wrapper.vm.onKeyDown() 105 | expect(wrapper.vm.arrowPosition).toBe(-1) 106 | wrapper.vm.onKeyUp() 107 | expect(wrapper.vm.arrowPosition).toBe(-1) 108 | }) 109 | 110 | it('increments the value if the list is visible', () => { 111 | wrapper.setData({ inputValue: 'sa', hasFocus: true, arrowPosition: -1 }) 112 | wrapper.vm.onKeyDown() 113 | 114 | expect(wrapper.vm.arrowPosition).toBe(0) 115 | }) 116 | 117 | it('does not increment the value further than the length of the list', () => { 118 | wrapper.setData({ 119 | inputValue: 'sa', 120 | hasFocus: true, 121 | arrowPosition: items.length 122 | }) 123 | wrapper.vm.onKeyDown() 124 | 125 | expect(wrapper.vm.arrowPosition).toBe(items.length) 126 | }) 127 | 128 | it('decrements the value if the list is visible', () => { 129 | wrapper.setData({ inputValue: 'sa', hasFocus: true, arrowPosition: 2 }) 130 | wrapper.vm.onKeyUp() 131 | 132 | expect(wrapper.vm.arrowPosition).toBe(1) 133 | }) 134 | 135 | it('activates the last item in the list if the beginning is reached', () => { 136 | wrapper.setData({ inputValue: 'sa', hasFocus: true, arrowPosition: -1 }) 137 | wrapper.vm.onKeyUp() 138 | 139 | expect(wrapper.vm.arrowPosition).toBe(items.length - 1) 140 | }) 141 | }) 142 | 143 | describe('enter key', () => { 144 | it('calls onEnter', () => { 145 | const stub = jest.fn() 146 | const $input = wrapper.find('input') 147 | 148 | wrapper.setMethods({ onEnter: stub }) 149 | $input.trigger('keyup.enter') 150 | 151 | expect(wrapper.vm.onEnter).toBeCalled() 152 | }) 153 | 154 | it('sets the input value to the title of the currently selected item', () => { 155 | const $input = wrapper.find('input') 156 | wrapper.setData({ arrowPosition: 1 }) 157 | $input.trigger('keyup.enter') 158 | 159 | expect(wrapper.vm.inputValue).toBe(items[1].title) 160 | }) 161 | }) 162 | 163 | describe('escape key', () => { 164 | it('calls onEscape', () => { 165 | const stub = jest.fn() 166 | const $input = wrapper.find('input') 167 | 168 | wrapper.setMethods({ onEscape: stub }) 169 | $input.trigger('keyup.esc') 170 | 171 | expect(wrapper.vm.onEscape).toBeCalled() 172 | }) 173 | 174 | it('clears the input data', () => { 175 | wrapper.setData({ inputValue: 'test' }) 176 | wrapper.vm.onEscape() 177 | 178 | expect(wrapper.vm.inputValue).toBe('') 179 | }) 180 | 181 | it('resets the arrow position', () => { 182 | wrapper.setData({ inputValue: 'test' }) 183 | wrapper.vm.onEscape() 184 | 185 | expect(wrapper.vm.arrowPosition).toBe(-1) 186 | }) 187 | }) 188 | }) 189 | -------------------------------------------------------------------------------- /ui/src/App.vue: -------------------------------------------------------------------------------- 1 | 65 | 66 | 94 | 95 | 223 | -------------------------------------------------------------------------------- /packages/dropdown/README.md: -------------------------------------------------------------------------------- 1 | # @tournant/dropdown 2 | 3 | A flexible, accessible dropdown menu. 4 | 5 | --- 6 | 7 | [![NPM version](https://img.shields.io/npm/v/@tournant/dropdown.svg?style=flat)](https://www.npmjs.com/package/@tournant/dropdown) 8 | [![GitHub license](https://img.shields.io/github/license/ovlb/@tournant/dropdown.svg)](https://github.com/ovlb/@tournant/dropdown/blob/master/LICENSE) 9 | 10 | ## 💁‍ Read Before Use 11 | 12 | This component implements a dropdown menu using the ARIA `menu` role. It’s a a dropdown menu. 13 | 14 | «Fine,» you might think, «I need to implement a nested navigation and need a dropdown.» If so, this component is not the right choice. Technically speaking, a `menu` is no `navigation`. I highly encourage reading [Menu & Menu Buttons](https://inclusive-components.design/menus-menu-buttons/) of Heydon Pickering’s [Inclusive Components blog](https://inclusive-components.design/) or Adrian Roselli’s post [Don’t Use ARIA Menu Roles for Site Nav](http://adrianroselli.com/2017/10/dont-use-aria-menu-roles-for-site-nav.html). 15 | 16 | ## Installation 17 | 18 | You can install the component using NPM or Yarn. 19 | 20 | ``` 21 | npm install @tournant/dropdown --save 22 | ``` 23 | 24 | If you use Yarn: 25 | 26 | ``` 27 | yarn add @tournant/dropdown 28 | ``` 29 | 30 | Once the component is installed you need to import it wherever you want to use it. 31 | 32 | ```js 33 | import TournantDropdown from '@tournant/dropdown' 34 | ``` 35 | 36 | Don’t forget to add it to the registered components (been there, done that): 37 | 38 | ```js 39 | components: { 40 | TournantDropdown, 41 | // ... all the other amazing components 42 | } 43 | ``` 44 | 45 | ## API 46 | 47 | This is just a quick overview. For an in-depth guide how to use the component check the section Usage below. 48 | 49 | ### Props 50 | 51 | - `yPosition`: Default: `bottom`. Must be `top` or `bottom`. Controls vertical positioning. 52 | - `xPosition`: Default: `left`. Must be `left` or `right`. Controls horizontal positioning. 53 | - `ariaLabel`: Optional. Add the `aria-label` attribute on a button. Can be used if it not viable to put text inside of the button. For other options see the article [Accessible Icon Buttons](https://www.sarasoueidan.com/blog/accessible-icon-buttons/) from Sara Soueidan. 54 | 55 | ### Slots 56 | 57 | - `button-text`: Text inside of the button. If you just add an icon, ensure to give the button an accessible name. Either via the `ariaLabel` prop or one of the other techniques explained by Sara Soueidan. 58 | - `items`: Items of the menu. All elements in here must have a role of `menuitem` and a `tabindex="-1"`. 59 | 60 | ### Styles 61 | 62 | The component exposes the following CSS classes for its parts: 63 | 64 | | Classname | Element | 65 | | ----------------------- | --------------------------------- | 66 | | t-ui-dropdown | Root | 67 | | t-ui-dropdown\_\_toggle | The button to open/close the menu | 68 | | t-ui-dropdown\_\_menu | `div` containing the menu buttons | 69 | 70 | The component comes with some default styles, e.g. it is setting `position: absolute` on the menu container as well as `z-index: 10`. 71 | 72 | #### Positioning 73 | 74 | Depending on use the menu might have to appear in different places. This happens through the `yPosition` and `xPosition` props. Depending on the respective value, a modifier class is added. You can use these classes to apply more styling and adapt the positioning further. 75 | 76 | The following table shows an overview of these: 77 | 78 | | Position | Modifier Class | 79 | | -------- | -------------- | 80 | | left | -is-left | 81 | | right | -is-right | 82 | | bottom | -is-bottom | 83 | | top | -is-top | 84 | 85 | ## Usage 86 | 87 | ### Labeling the Toggle Button 88 | 89 | Text can be added inside of the menu using the `button-text` slot: 90 | 91 | ```html 92 | 95 | ``` 96 | 97 | If it isn’t possible to add a word inside of the button read the article [Accessible Icon Buttons](https://www.sarasoueidan.com/blog/accessible-icon-buttons/) from Sara Soueidan. In it she describes multiple options to ensure that Icon Buttons are accessible. If you opt for using `aria-label` you can use the `ariaLabel` prop to add it to the element. 98 | 99 | 💁‍ Once the component is mounted, it will check some values to determine if the button has accessible text. It will warn you in the browser console if it couldn’t detect any. 100 | 101 | ### Opening and Closing the Menu 102 | 103 | The menu gets toggled between open and closed state by triggering a click event on the button. As it uses a `button` element, this can also happen via the ENTER or SPACE keys. Additionally, ↓ can be used. 104 | 105 | To close the menu, the user can click outside of it, Tab↹ away or use the ESC key. While the menu button is focussed ↑ will close the menu, too. 106 | 107 | ### Menu Items 108 | 109 | Items inside of the menu can be added via the `items` slot. 110 | 111 | ```html 112 | 116 | ``` 117 | 118 | Make sure to add `role="menuitem"` and `tabindex="-1"` to the items you add. The `role` helps assistive technology to make sense of the items and override any native role the elements might have. Since keyboard navigation inside of the menu happens with ↓ and ↑ the items need to be taken out of the focus order. 119 | 120 | #### Querying for Menu Items 121 | 122 | Once the menu opens the component uses `querySelectorAll('[role=menuitem]:not([disabled])')` to construct an Array of all enabled items in the menu. 123 | 124 | ## Bugs & Enhancements 125 | 126 | If you found a bug, please create a [bug ticket](https://github.com/tournantdev/ui/issues/new?assignees=&labels=component:dropdown&template=bug_report.md&title=). 127 | 128 | For enhancements please refer to the [contributing guidelines](https://github.com/tournantdev/ui/blob/master/CONTRIBUTING.md). 129 | -------------------------------------------------------------------------------- /packages/input/tests/unit/Input.spec.js: -------------------------------------------------------------------------------- 1 | import { shallowMount } from '@vue/test-utils' 2 | 3 | import Input from '@p/input/src/index.vue' 4 | 5 | const defaultProps = { 6 | label: 'Test label', 7 | value: 'Say hello', 8 | type: 'password', 9 | validation: { 10 | $error: true, 11 | $dirty: false 12 | }, 13 | required: false 14 | } 15 | 16 | describe('Input', () => { 17 | let wrapper 18 | 19 | beforeEach(() => { 20 | wrapper = shallowMount(Input, { 21 | propsData: defaultProps, 22 | slots: { 23 | 'label-text': ' required', 24 | feedback: '

Input is required

' 25 | } 26 | }) 27 | }) 28 | 29 | describe('props', () => { 30 | it('has a required label prop', () => { 31 | expect(wrapper.vm.$options.props.label.required).toBeTruthy() 32 | }) 33 | 34 | it('renders the `required` attribute if `required` prop is set', () => { 35 | wrapper.setProps({ required: true }) 36 | 37 | const input = wrapper.find('input') 38 | 39 | expect(input.attributes('required')).toBeDefined() 40 | }) 41 | 42 | it('has a validation prop', () => { 43 | expect(wrapper.vm.$options.props.validation).toBeDefined() 44 | }) 45 | }) 46 | 47 | it('links the label to the input', () => { 48 | const label = wrapper.find('label') 49 | const input = wrapper.find('input') 50 | const id = input.attributes('id') 51 | const labelFor = label.attributes('for') 52 | 53 | expect(labelFor).toBe(id) 54 | }) 55 | 56 | it('sets the inputType on the input element', () => { 57 | const input = wrapper.find('input') 58 | const type = input.attributes('type') 59 | 60 | expect(type).toBe('password') 61 | }) 62 | 63 | it('renders an input element by default', () => { 64 | const input = wrapper.find('[data-test="input"]') 65 | 66 | expect(input.element.tagName).toBe('INPUT') 67 | }) 68 | 69 | it('renders a textarea if instructed', () => { 70 | wrapper.setProps({ isTextarea: true }) 71 | 72 | const input = wrapper.find('[data-test="input"]') 73 | 74 | expect(input.element.tagName).toBe('TEXTAREA') 75 | }) 76 | 77 | describe('`v-model` compatibility', () => { 78 | it('sets the value prop on the input', () => { 79 | const $input = wrapper.find('input') 80 | 81 | expect($input.element.value).toBe('Say hello') 82 | }) 83 | 84 | it('emits the value on change', () => { 85 | const $input = wrapper.find('input') 86 | $input.setValue('Wave goodbye') 87 | const emittedInput = wrapper.emitted().input 88 | 89 | expect(emittedInput).toBeTruthy() 90 | expect(emittedInput[0]).toEqual(['Wave goodbye']) 91 | }) 92 | }) 93 | 94 | describe('aria attributes invalid state', () => { 95 | beforeEach(() => { 96 | wrapper.setProps({ 97 | validation: { 98 | $error: true, 99 | $dirty: true 100 | } 101 | }) 102 | }) 103 | 104 | it('sets `aria-invalid`', () => { 105 | const input = wrapper.find('input') 106 | 107 | expect(input.attributes('aria-invalid')).toBe('true') 108 | }) 109 | 110 | it('sets `aria-describedby` to the id of the feedback message container', () => { 111 | const input = wrapper.find('input') 112 | const feedbackMessages = wrapper.find('.t-ui-input__feedback') 113 | const feedbackId = feedbackMessages.attributes('id') 114 | 115 | expect(input.attributes('aria-describedby')).toBe(feedbackId) 116 | }) 117 | }) 118 | 119 | describe('input description', () => { 120 | it('has the ability to set a description', () => { 121 | expect(wrapper.vm.$options.props.description).toBeDefined() 122 | }) 123 | 124 | it('links the description in `aria-describedby` if set', () => { 125 | wrapper.setProps({ 126 | description: 'This is a description', 127 | validation: { $error: false } 128 | }) 129 | 130 | const input = wrapper.find('input') 131 | const descriptionMessage = wrapper.find('.t-ui-input__description') 132 | const id = descriptionMessage.attributes('id') 133 | 134 | expect(input.attributes('aria-describedby')).toBe(id) 135 | }) 136 | 137 | it('links to description and feedback message if an error is present', () => { 138 | wrapper.setProps({ 139 | description: 'This is a description', 140 | validation: { $error: true } 141 | }) 142 | 143 | const input = wrapper.find('input') 144 | const descriptionMessage = wrapper.find('.t-ui-input__description') 145 | const feedbackMessages = wrapper.find('.t-ui-input__feedback') 146 | const feedbackId = feedbackMessages.attributes('id') 147 | const descId = descriptionMessage.attributes('id') 148 | 149 | expect(input.attributes('aria-describedby')).toBe( 150 | `${feedbackId} ${descId}` 151 | ) 152 | }) 153 | 154 | it('positions the description text underneath the input by default', () => { 155 | wrapper.setProps({ 156 | description: 'This is a description', 157 | validation: { $error: true } 158 | }) 159 | 160 | const description = wrapper.find('[data-test="description-bottom"]') 161 | 162 | expect(description.exists()).toBe(true) 163 | }) 164 | 165 | it('allows to position the description text above the input', () => { 166 | wrapper.setProps({ 167 | description: 'This is a description', 168 | descriptionPosition: 'top', 169 | validation: { $error: true } 170 | }) 171 | 172 | const description = wrapper.find('[data-test="description-top"]') 173 | 174 | expect(description.exists()).toBe(true) 175 | }) 176 | }) 177 | 178 | describe('slots', () => { 179 | it('renders label text', () => { 180 | wrapper.setProps({ required: true }) 181 | 182 | const label = wrapper.find('label') 183 | const labelText = label.text() 184 | 185 | expect(labelText.includes('required')).toBeTruthy() 186 | }) 187 | 188 | it('hides the input messages if valid', () => { 189 | const feedbackMessages = wrapper.find('.t-ui-input__feedback') 190 | 191 | wrapper.setProps({ validation: { $error: false, $dirty: true } }) 192 | 193 | expect(feedbackMessages.isVisible()).toBeFalsy() 194 | }) 195 | 196 | it('renders feedback messages if value is invalid', () => { 197 | const feedbackMessages = wrapper.find('.t-ui-input__feedback') 198 | 199 | wrapper.setProps({ validation: { $error: true, $dirty: true } }) 200 | 201 | expect(feedbackMessages.contains('p')).toBeTruthy() 202 | }) 203 | }) 204 | 205 | it.skip('matches html structure', () => { 206 | expect(wrapper.vm.$el).toMatchSnapshot() 207 | }) 208 | }) 209 | -------------------------------------------------------------------------------- /packages/dropdown/src/index.vue: -------------------------------------------------------------------------------- 1 | 31 | 32 | 199 | 200 | 251 | -------------------------------------------------------------------------------- /ui/css/app.7640e184.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: Fabrikat-Light; 3 | font-weight: 300; 4 | src: url(https://static.tournant.dev/webfonts/30BB69_6_0.eot); 5 | src: url(https://static.tournant.dev/webfonts/30BB69_6_0.eot#iefix) 6 | format('embedded-opentype'), 7 | url(https://static.tournant.dev/webfonts/30BB69_6_0.woff2) format('woff2'), 8 | url(https://static.tournant.dev/webfonts/30BB69_6_0.woff) format('woff'), 9 | url(https://static.tournant.dev/webfonts/30BB69_6_0.ttf) format('truetype'); 10 | } 11 | @font-face { 12 | font-family: Fabrikat-LightItalic; 13 | font-weight: 300; 14 | font-style: italic; 15 | src: url(https://static.tournant.dev/webfonts/30BB69_7_0.eot); 16 | src: url(https://static.tournant.dev/webfonts/30BB69_7_0.eot#iefix) 17 | format('embedded-opentype'), 18 | url(https://static.tournant.dev/webfonts/30BB69_7_0.woff2) format('woff2'), 19 | url(https://static.tournant.dev/webfonts/30BB69_7_0.woff) format('woff'), 20 | url(https://static.tournant.dev/webfonts/30BB69_7_0.ttf) format('truetype'); 21 | } 22 | @font-face { 23 | font-family: Fabrikat; 24 | font-weight: 400; 25 | font-style: normal; 26 | src: url(https://static.tournant.dev/webfonts/30BB69_8_0.eot); 27 | src: url(https://static.tournant.dev/webfonts/30BB69_8_0.eot#iefix) 28 | format('embedded-opentype'), 29 | url(https://static.tournant.dev/webfonts/30BB69_8_0.woff2) format('woff2'), 30 | url(https://static.tournant.dev/webfonts/30BB69_8_0.woff) format('woff'), 31 | url(https://static.tournant.dev/webfonts/30BB69_8_0.ttf) format('truetype'); 32 | } 33 | @font-face { 34 | font-family: Fabrikat; 35 | font-weight: 400; 36 | font-style: italic; 37 | src: url(https://static.tournant.dev/webfonts/30BB69_9_0.eot); 38 | src: url(https://static.tournant.dev/webfonts/30BB69_9_0.eot#iefix) 39 | format('embedded-opentype'), 40 | url(https://static.tournant.dev/webfonts/30BB69_9_0.woff2) format('woff2'), 41 | url(https://static.tournant.dev/webfonts/30BB69_9_0.woff) format('woff'), 42 | url(https://static.tournant.dev/webfonts/30BB69_9_0.ttf) format('truetype'); 43 | } 44 | @font-face { 45 | font-family: Fabrikat; 46 | font-weight: 700; 47 | src: url(https://static.tournant.dev/webfonts/30BB69_0_0.eot); 48 | src: url(https://static.tournant.dev/webfonts/30BB69_0_0.eot#iefix) 49 | format('embedded-opentype'), 50 | url(https://static.tournant.dev/webfonts/30BB69_0_0.woff2) format('woff2'), 51 | url(https://static.tournant.dev/webfonts/30BB69_0_0.woff) format('woff'), 52 | url(https://static.tournant.dev/webfonts/30BB69_0_0.ttf) format('truetype'); 53 | } 54 | @font-face { 55 | font-family: Fabrikat; 56 | font-style: italic; 57 | font-weight: 700; 58 | src: url(https://static.tournant.dev/webfonts/30BB69_5_0.eot); 59 | src: url(https://static.tournant.dev/webfonts/30BB69_5_0.eot#iefix) 60 | format('embedded-opentype'), 61 | url(https://static.tournant.dev/webfonts/30BB69_5_0.woff2) format('woff2'), 62 | url(https://static.tournant.dev/webfonts/30BB69_5_0.woff) format('woff'), 63 | url(https://static.tournant.dev/webfonts/30BB69_5_0.ttf) format('truetype'); 64 | } 65 | body { 66 | line-height: 1.6; 67 | } 68 | p { 69 | margin-top: 0; 70 | } 71 | .main-headline { 72 | font-size: 300%; 73 | } 74 | .small-headline { 75 | font-size: 92%; 76 | text-transform: uppercase; 77 | letter-spacing: 0.1em; 78 | } 79 | .sr-only { 80 | -webkit-clip-path: inset(100%); 81 | clip-path: inset(100%); 82 | clip: rect(0 0 0 0); 83 | height: 1px; 84 | overflow: hidden; 85 | position: absolute; 86 | white-space: nowrap; 87 | width: 1px; 88 | } 89 | button { 90 | font-size: inherit; 91 | font-family: inherit; 92 | } 93 | *, 94 | :after, 95 | :before { 96 | -webkit-box-sizing: border-box; 97 | box-sizing: border-box; 98 | } 99 | :root { 100 | --tournant-color-dark: #007a7c; 101 | --tournant-color-light: #f0f7ed; 102 | } 103 | html { 104 | font-family: Fabrikat, sans-serif; 105 | font-size: 100%; 106 | } 107 | @media (min-width: 600px) { 108 | html { 109 | font-size: 105%; 110 | } 111 | } 112 | @media (min-width: 900px) { 113 | html { 114 | font-size: 111%; 115 | } 116 | } 117 | body { 118 | background-color: var(--tournant-color-light); 119 | color: var(--tournant-color-dark); 120 | } 121 | #app { 122 | -webkit-font-smoothing: antialiased; 123 | -moz-osx-font-smoothing: grayscale; 124 | min-height: 100vh; 125 | padding: 5vmin; 126 | max-width: 1000px; 127 | margin-left: 5vmin; 128 | } 129 | a { 130 | color: #000; 131 | } 132 | a:focus { 133 | outline: 2px solid var(--tournant-color-dark); 134 | } 135 | .banner { 136 | background-color: #fff; 137 | border: 2px solid var(--tournant-color-dark); 138 | border-radius: 0.25em; 139 | padding: 0.75rem 0.5rem; 140 | display: -webkit-box; 141 | display: -ms-flexbox; 142 | display: flex; 143 | -webkit-box-pack: center; 144 | -ms-flex-pack: center; 145 | justify-content: center; 146 | -webkit-box-align: center; 147 | -ms-flex-align: center; 148 | align-items: center; 149 | max-width: 100ch; 150 | margin: 0 auto; 151 | } 152 | .banner p { 153 | margin: 0; 154 | } 155 | .component-list { 156 | display: -webkit-box; 157 | display: -ms-flexbox; 158 | display: flex; 159 | -webkit-box-orient: horizontal; 160 | -webkit-box-direction: normal; 161 | -ms-flex-flow: row wrap; 162 | flex-flow: row wrap; 163 | list-style: none; 164 | padding-left: 0; 165 | } 166 | @supports (display: grid) { 167 | .component-list { 168 | display: grid; 169 | grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); 170 | grid-gap: 4vmin; 171 | } 172 | .component-list > * { 173 | margin: 0 !important; 174 | } 175 | } 176 | .component-list > :not(:last-child) { 177 | margin-right: 0.5rem; 178 | } 179 | .intro { 180 | max-width: 50ch; 181 | } 182 | .component-card { 183 | background-color: #f2f2f2; 184 | background-image: linear-gradient( 185 | 176deg, 186 | #f0f7ed, 187 | #f0f7ed 35%, 188 | #f2f2f2 0, 189 | #f2f2f2 190 | ); 191 | -webkit-box-shadow: -2px -3px 0 1px #fff; 192 | box-shadow: -2px -3px 0 1px #fff; 193 | -webkit-box-flex: 0; 194 | -ms-flex: 0 0 20rem; 195 | flex: 0 0 20rem; 196 | margin-bottom: 1rem; 197 | overflow: hidden; 198 | padding: 2vmin; 199 | position: relative; 200 | } 201 | .component-card__link:not(:last-child) { 202 | margin-right: 1rem; 203 | } 204 | section { 205 | margin-bottom: 2rem; 206 | } 207 | 208 | .main-footer { 209 | margin-top: 3rem; 210 | } 211 | 212 | .main-footer > nav ul { 213 | display: flex; 214 | list-style: none; 215 | padding: 0; 216 | } 217 | 218 | .main-footer > nav li + li { 219 | margin-left: 1rem; 220 | } 221 | 222 | .icon-link { 223 | display: block; 224 | max-width: 2rem; 225 | } 226 | .icon-link svg { 227 | fill: currentColor; 228 | width: 100%; 229 | } 230 | :first-child { 231 | margin-top: 0; 232 | } 233 | :last-child { 234 | margin-bottom: 0; 235 | } 236 | -------------------------------------------------------------------------------- /ui/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Tournant UI 10 | 11 | 12 |
13 | 20 |

21 | tournantui 23 |

24 |
25 |

26 | In the kitchen, the tournant is the person moving around, 27 | helping out. 28 |

29 |

30 | Tournant UI aims to be this. For User Interfaces. Tournant UI will not 31 | replace your complete UI or dictate how to you design your elements. 32 |

33 |

34 | But if you need to integrate inclusive components in your site, 35 | Tournant UI will be there. Like a helping hand. 36 |

37 |
38 |
39 |

UI Components

40 | 149 |
150 |
151 |

Helper Components

152 |
    153 |
  • 154 | 173 |
    • 174 |
175 |
176 |
177 | 192 |
193 |
194 | 195 | 196 | -------------------------------------------------------------------------------- /packages/dropdown/tests/unit/Dropdown.spec.js: -------------------------------------------------------------------------------- 1 | import { shallowMount, createLocalVue } from '@vue/test-utils' 2 | 3 | import Dropdown from '@p/dropdown/src/index.vue' 4 | 5 | document.body.innerHTML = ` 6 |
7 | 8 | 9 | 10 | test 11 |
12 | ` 13 | 14 | const localVue = createLocalVue() 15 | 16 | describe('Dropdown', () => { 17 | let wrapper 18 | let button 19 | let menu 20 | 21 | beforeEach(() => { 22 | wrapper = shallowMount(Dropdown, { 23 | slots: { 24 | 'button-text': 'Options', 25 | items: ` 26 | 27 | ` 28 | }, 29 | localVue, 30 | attachToDocument: true 31 | }) 32 | 33 | button = wrapper.find('button') 34 | }) 35 | 36 | describe('Events', () => { 37 | let firstMenuItem 38 | 39 | it('@click - open and close menu', async () => { 40 | button.trigger('click') 41 | await wrapper.vm.$nextTick() 42 | expect(wrapper.vm.$refs.menu).toBeDefined() 43 | 44 | button.trigger('click') 45 | await wrapper.vm.$nextTick() 46 | expect(wrapper.vm.isVisible).toBeFalsy() 47 | }) 48 | 49 | it('@keydown.down - open menu', async () => { 50 | button.trigger('keydown.down') 51 | 52 | await wrapper.vm.$nextTick() 53 | 54 | expect(wrapper.vm.$refs.menu).toBeDefined() 55 | }) 56 | 57 | it('@keydown.down > @keydown.up - opens and closes the menu', async () => { 58 | await button.trigger('keydown.down') 59 | await wrapper.vm.$nextTick() 60 | expect(wrapper.vm.$refs.menu).toBeDefined() 61 | 62 | button.trigger('keydown.up') 63 | await wrapper.vm.$nextTick() 64 | expect(wrapper.vm.$refs.menu).toBeUndefined() 65 | }) 66 | 67 | it('@keydown.down - focuses first menu item', async () => { 68 | button.trigger('keydown.down') 69 | 70 | await wrapper.vm.$nextTick() 71 | 72 | firstMenuItem = wrapper.findAll('[role="menuitem"]').at(0) 73 | 74 | expect(firstMenuItem.element).toBe(document.activeElement) 75 | }) 76 | 77 | it('@keydown.down - loops through items', async () => { 78 | // open 79 | button.trigger('keydown.down') 80 | 81 | const { length } = wrapper.findAll('[role="menuitem"]') 82 | 83 | for (let i = 0; i < length; i++) { 84 | button.trigger('keydown.down') 85 | } 86 | 87 | firstMenuItem = wrapper.findAll('[role="menuitem"]').at(0) 88 | 89 | await wrapper.vm.$nextTick() 90 | 91 | expect(firstMenuItem.element).toBe(document.activeElement) 92 | }) 93 | 94 | it('@keydown.up - focusses last item if at the beginning', async () => { 95 | // open 96 | button.trigger('keydown.down') 97 | 98 | await wrapper.vm.$nextTick() 99 | 100 | menu = wrapper.find('[role="menu"]') 101 | menu.trigger('keydown.up') 102 | 103 | const { length } = wrapper.findAll('[role="menuitem"]') 104 | const lastItem = wrapper.findAll('[role="menuitem"]').at(length - 1) 105 | 106 | expect(lastItem.element).toBe(document.activeElement) 107 | }) 108 | 109 | it('closes the menu if click happens outside of it', async () => { 110 | button.trigger('keydown.down') 111 | 112 | await wrapper.vm.$nextTick() 113 | 114 | document.getElementById('test-link').click() 115 | 116 | await wrapper.vm.$nextTick() 117 | 118 | expect(wrapper.vm.$refs.menu).toBeUndefined() 119 | }) 120 | }) 121 | 122 | describe('Menu toggle button', () => { 123 | it('exists', () => { 124 | expect(button).toBeDefined() 125 | }) 126 | 127 | it('has `aria-haspopup`', () => { 128 | expect(button.attributes('aria-haspopup')).toBeTruthy() 129 | }) 130 | 131 | it('changes its `aria-expanded` attribute', async () => { 132 | button.trigger('click') 133 | await wrapper.vm.$nextTick() 134 | expect(button.attributes('aria-expanded')).toBe('true') 135 | 136 | button.trigger('click') 137 | await wrapper.vm.$nextTick() 138 | expect(button.attributes('aria-expanded')).toBe('false') 139 | }) 140 | }) 141 | 142 | describe('element classes', () => { 143 | test('root', () => { 144 | const root = wrapper.find('div') 145 | 146 | expect(root.classes()).toContain('t-ui-dropdown') 147 | }) 148 | 149 | test('toggle', () => { 150 | expect(button.classes()).toContain('t-ui-dropdown__toggle') 151 | }) 152 | 153 | describe('menu', () => { 154 | let menu 155 | 156 | beforeEach(() => { 157 | // open the menu to be able to find it 158 | button.trigger('click') 159 | menu = wrapper.find('.t-ui-dropdown__menu') 160 | }) 161 | 162 | test('base class', () => { 163 | expect(menu).toBeDefined() 164 | }) 165 | 166 | test('default positioning', () => { 167 | expect(menu.classes()).toContain('-is-left') 168 | expect(menu.classes()).toContain('-is-bottom') 169 | }) 170 | 171 | test('change y position', () => { 172 | wrapper.setProps({ yPosition: 'top' }) 173 | 174 | expect(menu.classes()).not.toContain('-is-bottom') 175 | expect(menu.classes()).toContain('-is-top') 176 | }) 177 | 178 | test('change x position', () => { 179 | wrapper.setProps({ xPosition: 'right' }) 180 | 181 | expect(menu.classes()).not.toContain('-is-left') 182 | expect(menu.classes()).toContain('-is-right') 183 | }) 184 | }) 185 | }) 186 | 187 | describe('accessible name', () => { 188 | let spy 189 | // this asserts that the no text warning gets printed. as it is called from the mounted hook, we don't need to use the var 190 | // eslint-disable-next-line no-unused-vars 191 | let wrapperNoName 192 | 193 | beforeEach(() => { 194 | spy = jest.spyOn(console, 'warn').mockImplementation() 195 | 196 | wrapperNoName = shallowMount(Dropdown, { 197 | slots: { 198 | 'button-text': '' 199 | } 200 | }) 201 | }) 202 | 203 | afterEach(() => { 204 | spy.mockRestore() 205 | }) 206 | 207 | test('warns if button has no name', () => { 208 | expect(spy).toHaveBeenCalled() 209 | }) 210 | }) 211 | }) 212 | 213 | describe('Dropdown – menuitemcheckbox', () => { 214 | let wrapper 215 | let button 216 | 217 | beforeEach(() => { 218 | wrapper = shallowMount(Dropdown, { 219 | slots: { 220 | 'button-text': 'Options', 221 | items: ` 222 | 223 | ` 224 | }, 225 | localVue, 226 | attachToDocument: true 227 | }) 228 | 229 | button = wrapper.find('button') 230 | }) 231 | 232 | it('detects `menuitemradio` button', async () => { 233 | button.trigger('click') 234 | 235 | await wrapper.vm.$nextTick() 236 | 237 | expect(wrapper.vm.items).toHaveLength(2) 238 | }) 239 | }) 240 | 241 | describe('Dropdown – menuitemradio', () => { 242 | let wrapper 243 | let button 244 | 245 | beforeEach(() => { 246 | wrapper = shallowMount(Dropdown, { 247 | slots: { 248 | 'button-text': 'Options', 249 | items: ` 250 | 251 | ` 252 | }, 253 | localVue, 254 | attachToDocument: true 255 | }) 256 | 257 | button = wrapper.find('button') 258 | }) 259 | 260 | it('detects `menuitemradio` button', async () => { 261 | button.trigger('click') 262 | 263 | await wrapper.vm.$nextTick() 264 | 265 | expect(wrapper.vm.items).toHaveLength(2) 266 | }) 267 | }) 268 | -------------------------------------------------------------------------------- /packages/input/README.md: -------------------------------------------------------------------------------- 1 | # @tournant/input 2 | 3 | A component for text-like inputs. Accessible and versatile. 4 | 5 | --- 6 | 7 | [![NPM version](https://img.shields.io/npm/v/@tournant/input.svg?style=flat)](https://www.npmjs.com/package/@tournant/input) 8 | [![GitHub license](https://img.shields.io/github/license/ovlb/@tournant/input.svg)](https://github.com/ovlb/@tournant/input/blob/master/LICENSE) 9 | 10 | ## Installation 11 | 12 | You can install the component using NPM or Yarn. 13 | 14 | ``` 15 | npm install @tournant/input --save 16 | ``` 17 | 18 | If you use Yarn: 19 | 20 | ``` 21 | yarn add @tournant/input 22 | ``` 23 | 24 | Once the component is installed you need to import wherever you want to use it. 25 | 26 | ```js 27 | import TournantInput from '@tournant/input' 28 | ``` 29 | 30 | Don’t forget to add it to the registered components (been there, done that): 31 | 32 | ```js 33 | components: { 34 | TournantInput, 35 | // ... all the other amazing components 36 | } 37 | ``` 38 | 39 | ## API 40 | 41 | This is just a quick overview. For an in-depth guide how to use the component check the section Usage below. 42 | 43 | ### Props 44 | 45 | - `value`: The value shown inside of the input. 46 | - `label`: The label text of the input. Required. 47 | - `validation`: A vuelidate-like object, must contain properties named `$error` and `$dirty`. Required. 48 | - `description`: Descriptive text giving a user more context on what form their input has to have. Optional. 49 | - `descriptionPosition`: Controls if the position should be displayed underneath the input or between label and input; defaults to `bottom`. 50 | - `isTextarea`: Render a textarea instead of an input element. Default to `false`. 51 | 52 | ### Styles 53 | 54 | The component exposes the following CSS classes for its parts: 55 | 56 | | Classname | Element | 57 | | ------------------------- | ----------------------------------- | 58 | | t-ui-input | Root | 59 | | t-ui-input\_\_input | Text field | 60 | | t-ui-input\_\_description | Descriptive text | 61 | | t-ui-input\_\_feedback | Container to show feedback messages | 62 | 63 | By default no styles will be attached to these classes. 64 | 65 | ## Usage 66 | 67 | This component was built to accept all text-like input formats. These are, for example, `password`, `email` or `date`. 68 | 69 | Attributes you add when adding the component to your template are bound to the input element. 70 | 71 | Say you want to add a password input to a form. If you add `type="password"` the component will take the type and apply it to the input element. 72 | 73 | ```html 74 | 75 | ``` 76 | 77 | `@tournant/input` is [v-model](https://vuejs.org/v2/guide/forms.html) compliant. 78 | 79 | ```html 80 | 81 | ``` 82 | 83 | Ths will result in the following input: 84 | 85 | ```html 86 | 93 | ``` 94 | 95 | 💁‍ _Note:_ You do not need to pass in a `id`. A unique ID for every instance of the component is automatically generated. 96 | 97 | ### Textarea 98 | 99 | ``s and ` 121 | ``` 122 | 123 | ### Label 124 | 125 | Input elements [must have a linked label](https://www.w3.org/TR/WCAG20-TECHS/H44.html) to give the input an accessible name. 126 | 127 | To do so, pass in the `label` prop when using the component. 128 | 129 | ```html 130 | 136 | ``` 137 | 138 | 💁 _Note:_ `label` is required. 139 | 140 | ### Description 141 | 142 | Sometimes it is useful to describe expected conditions. For example, a user has to enter a password that is at least eight characters long. 143 | 144 | To add a description, pass in the prop named, you might have guessed it, `description`. 145 | 146 | ```html 147 | 154 | ``` 155 | 156 | This will render the description in a `p` element which is linked to the `input` via the [`aria-describedby` attribute](https://www.w3.org/TR/WCAG20-TECHS/ARIA1.html). 157 | 158 | ### Required inputs 159 | 160 | In addition to binding the `required` attribute on the input element the component exposes a slot inside of its `label` element to add a visual clue that the user has to fill in data. 161 | 162 | Bear in mind that the popular \* might not be enough to indicate a required field. For further reading I recommend the article [Required Fields](https://a11y-101.com/development/required) on a11y-101.com 163 | 164 | ```html 165 | 172 | 175 | 176 | ``` 177 | 178 | 💁 _Note:_ This example uses the named slot syntax introduced in Vue 2.6. [Take a look in the docs](https://vuejs.org/v2/guide/components-slots.html#Named-Slots) for usage examples and how to use named slots in versions prior to 2.6. 179 | 180 | 💁 _Note:_ You can add any text you want. If you mark optional fields instead of required ones, this is also possible. 181 | 182 | ### Validation 183 | 184 | No input without validation, right? 185 | 186 | You will have to take care of this yourself, though. The component can and should not know what value is expected inside of it. 187 | 188 | Nonetheless, we tried to make it as easy as possible to use the component along existing solutions like [Vuelidate](https://vuelidate.netlify.com/). 189 | 190 | In fact, if you are already using Vuelidate, you are good to go. 191 | 192 | `@tournant/input` expects a vuelidate-like validation object. Namely the properties `$error` and `$dirty`. 193 | 194 | For our password example the Vuelidate config might look something like this: 195 | 196 | ```js 197 | import { required, minLength } from 'vuelidate/lib/validators' 198 | 199 | export default { 200 | // […] Component context omitted for brevity 201 | validations: { 202 | password: { 203 | required, 204 | minLength: minLength(8) 205 | } 206 | } 207 | } 208 | ``` 209 | 210 | You can use `$v.password` as the prop for the input component without the need to change anything. 211 | 212 | ```html 213 | 222 | 225 | 226 | ``` 227 | 228 | `aria-invalid` is set based on `validation.$error`, to let screen readers know if the entered value is correct. 229 | 230 | This attribute could also be used to add styles based on the validated state. 231 | 232 | ```css 233 | .tournant-input__input[aria-invalid='true'] { 234 | border-color: red; 235 | } 236 | ``` 237 | 238 | ### Feedback Messages 239 | 240 | Relying on styling is not enough to convey errors to users. `@tournant/input` exposes a `feedback` slot to render detailed feedback for the users. 241 | 242 | ```html 243 | 252 | 255 | 260 | 261 | ``` 262 | 263 | If `validation.$error` equals `true` the ID of the feedback container will be added to `aria-describedby` and as thus read by screen readers. 264 | 265 | ## Bugs & Enhancements 266 | 267 | If you found a bug, please create a [bug ticket](https://github.com/tournantdev/ui/issues/new?assignees=&labels=component:input&template=bug_report.md&title=). 268 | 269 | For enhancements please refer to the [contributing guidelines](https://github.com/tournantdev/ui/blob/master/CONTRIBUTING.md). 270 | --------------------------------------------------------------------------------