├── .browserslistrc ├── .circleci └── config.yml ├── .editorconfig ├── .eslintignore ├── .eslintrc.js ├── .github ├── ISSUE_TEMPLATE │ ├── bug_report.md │ └── feature_request.md ├── PULL_REQUEST_TEMPLATE.md └── workflows │ └── greetings.yml ├── .gitignore ├── .prettierrc ├── .storybook ├── addons.js ├── config.js └── webpack.config.js ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── README.md ├── _build └── rollup.config.js ├── babel.config.js ├── helper ├── getElementTagName.js └── isOutsidePath.js ├── jest.config.base.js ├── jest.config.js ├── lerna.json ├── netlify.toml ├── package.json ├── packages ├── breadcrumb │ ├── LICENSE │ ├── README.md │ ├── jest.config.js │ ├── package.json │ ├── src │ │ ├── index.vue │ │ └── wrapper.js │ └── tests │ │ ├── breadcrumb.stories.js │ │ └── unit │ │ └── Breadcrumb.spec.js ├── combobox │ ├── LICENSE │ ├── README.md │ ├── changelog.md │ ├── jest.config.js │ ├── package.json │ ├── src │ │ ├── ComboboxList.vue │ │ ├── index.vue │ │ ├── styles │ │ │ ├── combobox-list.scss │ │ │ └── combobox.scss │ │ └── wrapper.js │ └── tests │ │ └── unit │ │ └── Combobox.spec.js ├── dropdown │ ├── LICENSE │ ├── README.md │ ├── jest.config.js │ ├── package.json │ ├── src │ │ ├── index.vue │ │ └── wrapper.js │ ├── tests │ │ ├── dropdown.stories.js │ │ └── unit │ │ │ └── Dropdown.spec.js │ └── yarn.lock ├── dynamic-anchor │ ├── LICENSE │ ├── README.md │ ├── jest.config.js │ ├── package.json │ ├── src │ │ ├── index.vue │ │ └── wrapper.js │ └── tests │ │ └── unit │ │ └── DynamicAnchor.spec.js ├── input │ ├── LICENSE │ ├── README.md │ ├── jest.config.js │ ├── package.json │ ├── src │ │ ├── index.vue │ │ └── wrapper.js │ └── tests │ │ ├── input.stories.js │ │ └── unit │ │ └── Input.spec.js ├── notification │ ├── LICENSE │ ├── README.md │ ├── jest.config.js │ ├── package.json │ ├── src │ │ ├── index.vue │ │ └── wrapper.js │ └── tests │ │ ├── notification.stories.js │ │ └── unit │ │ └── Notification.spec.js └── switch-button │ ├── LICENSE │ ├── README.md │ ├── jest.config.js │ ├── package.json │ ├── src │ ├── index.vue │ └── wrapper.js │ └── tests │ ├── switch-button.stories.js │ └── unit │ └── SwitchButton.spec.js ├── postcss.config.js ├── ui ├── _redirects ├── css │ └── app.7640e184.css ├── img │ └── favicon-8c.png ├── index.html ├── public │ ├── img │ │ └── favicon-8c.png │ └── index.html └── src │ ├── App.vue │ ├── components │ ├── combobox.vue │ ├── dropdown.vue │ └── input.vue │ ├── main.js │ └── styles │ ├── accessibility │ └── _sr-only.scss │ ├── elements │ └── _button.scss │ ├── main.scss │ └── type │ ├── font-face.scss │ └── typography.scss └── yarn.lock /.browserslistrc: -------------------------------------------------------------------------------- 1 | > 1% 2 | last 2 versions 3 | -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /.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 -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | **/node_modules/ 2 | **/dist/ 3 | -------------------------------------------------------------------------------- /.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/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 | -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "semi": false, 3 | "singleQuote": true, 4 | "useTabs": true 5 | } 6 | -------------------------------------------------------------------------------- /.storybook/addons.js: -------------------------------------------------------------------------------- 1 | import '@storybook/addon-knobs/register' 2 | -------------------------------------------------------------------------------- /.storybook/config.js: -------------------------------------------------------------------------------- 1 | import { configure } from '@storybook/vue' 2 | 3 | configure(require.context('../packages', true, /\.stories\.js$/), module) 4 | -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /_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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /jest.config.base.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | moduleFileExtensions: ['js', 'jsx', 'json', 'vue'], 3 | transform: { 4 | '^.+\\.vue$': 'vue-jest', 5 | '.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$': 6 | 'jest-transform-stub', 7 | '^.+\\.jsx?$': 'babel-jest' 8 | }, 9 | transformIgnorePatterns: ['node_modules'], 10 | moduleNameMapper: { 11 | '^@/(.*)$': '/src/$1', 12 | '^@h/(.*)$': '/helper/$1', 13 | '^@p/(.*)$': '/packages/$1' 14 | }, 15 | moduleDirectories: ['node_modules'], 16 | snapshotSerializers: ['jest-serializer-vue'], 17 | testMatch: ['**/tests/unit/**/*.spec.js'], 18 | collectCoverage: true, 19 | collectCoverageFrom: ['/packages/**/src/**/*.vue'], 20 | coveragePathIgnorePatterns: ['node_modules'], 21 | testURL: 'http://localhost/', 22 | watchPlugins: [ 23 | 'jest-watch-typeahead/filename', 24 | 'jest-watch-typeahead/testname' 25 | ] 26 | } 27 | -------------------------------------------------------------------------------- /jest.config.js: -------------------------------------------------------------------------------- 1 | const base = require('./jest.config.base') 2 | 3 | module.exports = { 4 | ...base, 5 | projects: ['/packages/*/jest.config.js'] 6 | } 7 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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/breadcrumb/LICENSE: -------------------------------------------------------------------------------- 1 | Copyright 2019 Oscar Braunert 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 4 | 5 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 6 | 7 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. -------------------------------------------------------------------------------- /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/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/breadcrumb/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@tournant/breadcrumb", 3 | "version": "1.0.1", 4 | "description": "A trail of links to let users find their place within a website.", 5 | "keywords": [], 6 | "main": "./dist/breadcrumb.ssr.js", 7 | "module": "./dist/breadcrumb.js", 8 | "unpkg": "./dist/browser.min.js", 9 | "files": [ 10 | "dist", 11 | "src/**/*.vue" 12 | ], 13 | "repository": "https://github.com/tournantdev/ui", 14 | "bugs": "https://github.com/tournantdev/ui/issues", 15 | "homepage": "https://ui.tournant.dev", 16 | "author": "Oscar Braunert", 17 | "license": "MIT", 18 | "scripts": { 19 | "build": "rollup -c ../../_build/rollup.config.js --environment BUILD:production", 20 | "lint": "vue-cli-service lint", 21 | "prepack": "yarn test && yarn build", 22 | "test": "cd ../.. && jest packages/breadcrumb --color", 23 | "watch": "rollup -c ../../_build/rollup.config.js --watch" 24 | }, 25 | "peerDependencies": { 26 | "vue": "^2.6.10" 27 | }, 28 | "dependencies": { 29 | "@tournant/dynamic-anchor": "^0.0.2" 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /packages/breadcrumb/src/index.vue: -------------------------------------------------------------------------------- 1 | 36 | 37 | 60 | -------------------------------------------------------------------------------- /packages/breadcrumb/src/wrapper.js: -------------------------------------------------------------------------------- 1 | import TournantComponent 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('TournantBreadcrumb', TournantComponent) 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 63 | 64 | 94 | -------------------------------------------------------------------------------- /packages/combobox/src/index.vue: -------------------------------------------------------------------------------- 1 | 49 | 50 | 155 | 156 | 198 | -------------------------------------------------------------------------------- /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/combobox/src/styles/combobox.scss: -------------------------------------------------------------------------------- 1 | @mixin t-ui-combobox { 2 | margin: 0 auto; 3 | max-width: 30rem; 4 | padding: 1rem; 5 | padding: calc(var(--t-ui-cb-space) * 2); 6 | position: relative; 7 | width: 100%; 8 | } 9 | 10 | @mixin t-ui-combobox__label { 11 | display: block; 12 | padding-bottom: 0.25rem; 13 | padding-bottom: calc(var(--t-ui-cb-space) / 2); 14 | } 15 | 16 | @mixin t-ui-combobox__input { 17 | border-radius: 0.25rem 0.25rem 0 0; 18 | border: 1px solid rgb(206, 206, 206); 19 | border-bottom: 2px solid rgb(206, 206, 206); 20 | font-size: inherit; 21 | font-family: inherit; 22 | padding: 0.25rem 0.5rem; 23 | padding: calc(var(--t-ui-cb-space) / 2) var(--t-ui-cb-space); 24 | width: 100%; 25 | 26 | &:focus { 27 | border-bottom-color: darkblue; 28 | border-bottom-color: var(--t-ui-cb-clr-dark); 29 | outline: 0; 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /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 199 | 200 | 251 | -------------------------------------------------------------------------------- /packages/dropdown/src/wrapper.js: -------------------------------------------------------------------------------- 1 | import TournantDropdown 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('TournantDropdown', TournantDropdown) 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/dynamic-anchor/src/wrapper.js: -------------------------------------------------------------------------------- 1 | import TournantComponent 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('TournantDynamicAnchor', TournantComponent) 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 109 | 110 | 111 | -------------------------------------------------------------------------------- /packages/input/src/wrapper.js: -------------------------------------------------------------------------------- 1 | import TournantInput 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('TournantInput', TournantInput) 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 58 | 59 | 66 | -------------------------------------------------------------------------------- /packages/notification/src/wrapper.js: -------------------------------------------------------------------------------- 1 | import TournantComponent 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('TournantNotification', TournantComponent) 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 65 | 66 | 87 | -------------------------------------------------------------------------------- /packages/switch-button/src/wrapper.js: -------------------------------------------------------------------------------- 1 | import TournantComponent 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('TournantSwitchButton', TournantComponent) 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 94 | 95 | 223 | -------------------------------------------------------------------------------- /ui/src/components/combobox.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /ui/src/components/dropdown.vue: -------------------------------------------------------------------------------- 1 | 37 | 38 | 47 | 48 | 73 | -------------------------------------------------------------------------------- /ui/src/components/input.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/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/src/styles/elements/_button.scss: -------------------------------------------------------------------------------- 1 | button { 2 | font-size: inherit; 3 | font-family: inherit; 4 | } 5 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | --------------------------------------------------------------------------------