chore: update prettier and formatting

Signed-off-by: Jeremy Wilken <[email protected]>

.eslintrc.js

@@ -10,6 +10,7 @@ module.exports = {
     'plugin:@typescript-eslint/eslint-recommended',
     'plugin:@typescript-eslint/recommended',
     'prettier/@typescript-eslint',
+    'prettier',
   ],
   parser: '@typescript-eslint/parser',
   parserOptions: {

.github/ISSUE_TEMPLATE/bug-report.md

@@ -26,16 +26,16 @@ _A clear and concise description of what you expected to happen._
 
 **App**
 
-* Angular: [e.g. 6]
-* Node: [e.g. 8.10.0]
-* Clarity: [e.g. 0.12.5]
+- Angular: [e.g. 6]
+- Node: [e.g. 8.10.0]
+- Clarity: [e.g. 0.12.5]
 
 **Device:**
 
-* Type: [e.g. MacBook]
-* OS: [e.g. iOS]
-* Browser [e.g. chrome, safari]
-* Version [e.g. 22]
+- Type: [e.g. MacBook]
+- OS: [e.g. iOS]
+- Browser [e.g. chrome, safari]
+- Version [e.g. 22]
 
 ## Additional notes
 

.github/ISSUE_TEMPLATE/contribution-proposal.md

@@ -9,10 +9,10 @@ _Please review our [Contribution guide](https://github.com/vmware/clarity/blob/m
 
 _Describe the change or feature in detail. Try to answer the following questions._
 
-* What is the change?
-* Why should it go in Clarity?
-* Does this change impact existing behaviors? If so how?
-* If this change introduces a new behavior, is this behavior accessible?
+- What is the change?
+- Why should it go in Clarity?
+- Does this change impact existing behaviors? If so how?
+- If this change introduces a new behavior, is this behavior accessible?
 
 ## Use case
 
@@ -26,24 +26,24 @@ _If possible, show examples of the change. You may create one yourself, or link
 
 _Describe the intended API for the feature you want to add. This would include:_
 
-* CSS classes and DOM structure for pure static UI contribution, and inputs/outputs, components, directives, services, or anything that is exported publicly for Angular contributions.
-* Examples of code snippets using this new feature.
-* Note very clearly if anything **might** be a breaking change.
+- CSS classes and DOM structure for pure static UI contribution, and inputs/outputs, components, directives, services, or anything that is exported publicly for Angular contributions.
+- Examples of code snippets using this new feature.
+- Note very clearly if anything **might** be a breaking change.
 
 _In the case of bug fixes or internal changes, there will most likely be no API changes._
 
 ## Implementation plan
 
 _Describe how you plan to implement the feature, answering questions among the following or anything else you deem relevant._
 
-* What parts of the code are affected?
-* Will you introduce new services, components or directives?
-* Can you describe the basic flow of information between classes?
-* Does this introduce asynchronous behaviors?
-* Will you need to refactor existing Clarity code?
-* Will reasonable performance require optimizations?
-* Will it need to access native elements (and be incompatible with server-side rendering)?
-* ...
+- What parts of the code are affected?
+- Will you introduce new services, components or directives?
+- Can you describe the basic flow of information between classes?
+- Does this introduce asynchronous behaviors?
+- Will you need to refactor existing Clarity code?
+- Will reasonable performance require optimizations?
+- Will it need to access native elements (and be incompatible with server-side rendering)?
+- ...
 
 ## Conclusion
 

.github/ISSUE_TEMPLATE/feature-request.md

@@ -7,10 +7,10 @@ about: Proposal for a new feature or enhancement
 
 _Summary the request and address the questions as appropriate._
 
-* What is the change?
-* Why should it go in Clarity?
-* Does this change impact existing behaviors? If so how?
-* If this change introduces a new behavior, is this behavior accessible?
+- What is the change?
+- Why should it go in Clarity?
+- Does this change impact existing behaviors? If so how?
+- If this change introduces a new behavior, is this behavior accessible?
 
 ## Use case
 

.github/ISSUE_TEMPLATE/icon-request.md

@@ -9,9 +9,9 @@ _To help us better understand the purpose and role of icons, please provide us
 as much detail as possible. You may request an icon without specifying a specific
 shape, but please detail the purpose and use cases._
 
-* What is the icon?
-* What does the requested icon signify?
-* In which product(s) will this icon be used?
+- What is the icon?
+- What does the requested icon signify?
+- In which product(s) will this icon be used?
 
 ## Use case
 

.github/pull_request_template.md

@@ -2,25 +2,25 @@
 
 Please check if your PR fulfills the following requirements:
 
-* [ ] Tests for the changes have been added (for bug fixes / features)
-* [ ] Docs have been added / updated (for bug fixes / features)
-* [ ] If applicable, have a visual design approval
+- [ ] Tests for the changes have been added (for bug fixes / features)
+- [ ] Docs have been added / updated (for bug fixes / features)
+- [ ] If applicable, have a visual design approval
 
 ## PR Type
 
 What kind of change does this PR introduce?
 
 <!-- Please check the one that applies to this PR using "x". -->
 
-* [ ] Bugfix
-* [ ] Feature
-* [ ] Code style update (formatting, local variables)
-* [ ] Refactoring (no functional changes, no api changes)
-* [ ] Build related changes
-* [ ] CI related changes
-* [ ] Documentation content changes
-* [ ] clarity.design website / infrastructure changes
-* [ ] Other... Please describe:
+- [ ] Bugfix
+- [ ] Feature
+- [ ] Code style update (formatting, local variables)
+- [ ] Refactoring (no functional changes, no api changes)
+- [ ] Build related changes
+- [ ] CI related changes
+- [ ] Documentation content changes
+- [ ] clarity.design website / infrastructure changes
+- [ ] Other... Please describe:
 
 ## What is the current behavior?
 
@@ -32,8 +32,8 @@ Issue Number: N/A
 
 ## Does this PR introduce a breaking change?
 
-* [ ] Yes
-* [ ] No
+- [ ] Yes
+- [ ] No
 
 <!-- If this PR contains a breaking change, please describe the impact and migration path for existing applications below. -->
 

CONTRIBUTING.md

@@ -9,12 +9,12 @@ contributions to Clarity can take many forms, and each of them will correspond
 to part of the full process. Generally speaking, contributions fit into one or
 more of these categories:
 
-* Reporting a bug or feature request see [Opening Issues and Reporting Bug Fixes](/docs/CONTRIBUTING_ISSUES.md).
-* New design or update to an existing one: general patterns, components,
+- Reporting a bug or feature request see [Opening Issues and Reporting Bug Fixes](/docs/CONTRIBUTING_ISSUES.md).
+- New design or update to an existing one: general patterns, components,
   and features, see [Contributing to Design](/docs/CONTRIBUTING_DESIGN.md).
-* Implementation of an existing design and bug fixes (which might involve a
+- Implementation of an existing design and bug fixes (which might involve a
   design), see [Contributing to Development](/docs/CONTRIBUTING_DEVELOPMENT.md).
-* Documentation. See [Contributing to Documentation](/docs/CONTRIBUTING_DOCUMENTATION.md).
+- Documentation. See [Contributing to Documentation](/docs/CONTRIBUTING_DOCUMENTATION.md).
 
 Many contributions can fall into more than one of these categories at once but
 it's important to split the contribution along these steps, to make sure each of

README.md

@@ -15,21 +15,21 @@ Clarity. For complete documentation, visit the [Clarity website](https://clarity
 
 Clarity is published as four npm packages:
 
-* **[@clr/icons](https://www.npmjs.com/package/@clr/icons)** Contains the custom
+- **[@clr/icons](https://www.npmjs.com/package/@clr/icons)** Contains the custom
   element icons.
-* **[@clr/ui](https://www.npmjs.com/package/@clr/ui)** Contains the static
+- **[@clr/ui](https://www.npmjs.com/package/@clr/ui)** Contains the static
   styles for building HTML components.
-* **[@clr/angular](https://www.npmjs.com/package/@clr/angular)** Contains the
+- **[@clr/angular](https://www.npmjs.com/package/@clr/angular)** Contains the
   Angular components. This package depends on @clr/ui for styles.
-* **[@clr/core](https://www.npmjs.com/package/@clr/core).** Contains the Web
+- **[@clr/core](https://www.npmjs.com/package/@clr/core).** Contains the Web
   Components that work in any JavaScript framework.
 
 ## Installing Clarity
 
-* **[Install CSS Only](/docs/INSTALLATION.md#installing-clarity-ui)**
-* **[Install Icons](/docs/INSTALLATION.md#installing-clarity-icons)**
-* **[Install Angular Components](/docs/INSTALLATION.md#installing-clarity-angular)**
-* **[Install Web Components](/docs/INSTALLATION.md#installing-clarity-web-components)**
+- **[Install CSS Only](/docs/INSTALLATION.md#installing-clarity-ui)**
+- **[Install Icons](/docs/INSTALLATION.md#installing-clarity-icons)**
+- **[Install Angular Components](/docs/INSTALLATION.md#installing-clarity-angular)**
+- **[Install Web Components](/docs/INSTALLATION.md#installing-clarity-web-components)**
 
 ## Documentation
 
@@ -43,8 +43,8 @@ detailed information, see [CONTRIBUTING.md](CONTRIBUTING.md).
 
 ## Licenses
 
-* The Clarity Design System is licensed under the MIT license.
-* The font is licensed under the Open Font License (OFL).
+- The Clarity Design System is licensed under the MIT license.
+- The font is licensed under the Open Font License (OFL).
 
 ## Feedback
 

cypress/integration/datagrid.js

@@ -12,35 +12,20 @@ export function DatagridSpec() {
       cy.visit('/datagrid/kitchen-sink');
 
       cy.visit('/datagrid/test-cases');
-      cy
-        .get('button.btn-outline-primary')
-        .first()
-        .click();
+      cy.get('button.btn-outline-primary').first().click();
 
       cy.visit('/datagrid/pagination');
 
-      cy
-        .get('button.pagination-last')
-        .first()
-        .click();
+      cy.get('button.pagination-last').first().click();
 
       cy.visit('/datagrid/selection');
       cy.wait(1000);
 
       cy.visit('/datagrid/detail');
 
-      cy
-        .get('#simple .datagrid-detail-caret-button')
-        .first()
-        .click();
-      cy
-        .get('#change-event .datagrid-detail-caret-button')
-        .first()
-        .click();
-      cy
-        .get('#two-way .datagrid-detail-caret-button')
-        .first()
-        .click();
+      cy.get('#simple .datagrid-detail-caret-button').first().click();
+      cy.get('#change-event .datagrid-detail-caret-button').first().click();
+      cy.get('#two-way .datagrid-detail-caret-button').first().click();
 
       cy.visit('/datagrid/responsive-footer');
 

docs/ATTRIBUTION.md

@@ -2,16 +2,16 @@
 
 Clarity includes code from the following third parties:
 
-* [Bootstrap](https://github.com/twbs/bootstrap) (MIT License)
-  * Naming conventions
-  * Flex grid
-  * List group
-  * Button group
-  * Close
-  * Media
-  * Reboot
-  * Responsive embed
-  * Utilities classes
-* [Foundation](https://github.com/zurb/foundation-sites) SASS exports function (MIT License)
-* [Decimal Rounding function](https://gist.github.com/terkel/4373420) in SASS (MIT License)
-* Math functions from [sass-planifolia](https://github.com/xi/sass-planifolia) (MIT License)
+- [Bootstrap](https://github.com/twbs/bootstrap) (MIT License)
+  - Naming conventions
+  - Flex grid
+  - List group
+  - Button group
+  - Close
+  - Media
+  - Reboot
+  - Responsive embed
+  - Utilities classes
+- [Foundation](https://github.com/zurb/foundation-sites) SASS exports function (MIT License)
+- [Decimal Rounding function](https://gist.github.com/terkel/4373420) in SASS (MIT License)
+- Math functions from [sass-planifolia](https://github.com/xi/sass-planifolia) (MIT License)

docs/BUILD.md

@@ -22,10 +22,10 @@ src
 
 We have four packages:
 
-* `@clr/icons` - Clarity Icons package, which is a standalone web component library for icons
-* `@clr/ui` - Clarity UI package, which is a standalone CSS library for Clarity styles
-* `@clr/angular` - Clarity Angular package, which depends upon the other two packages to implement a set of Angular components
-* `@clr/core` - Clarity Web Components and common utilities.
+- `@clr/icons` - Clarity Icons package, which is a standalone web component library for icons
+- `@clr/ui` - Clarity UI package, which is a standalone CSS library for Clarity styles
+- `@clr/angular` - Clarity Angular package, which depends upon the other two packages to implement a set of Angular components
+- `@clr/core` - Clarity Web Components and common utilities.
 
 Each package has a slightly different build process, and this guide describes them each separately.
 Many of these commands have a corresponding `watch` command that enables watch
@@ -41,48 +41,48 @@ pass the CI build.
 
 Build Clarity Angular by running `npm run angular:build`, which calls the following tasks to build the package.
 
-* `angular:build` - Build the Angular package for production
-* `angular:start` - Run the test project for Clarity Angular Components
-* `angular:test` - Run all tests for Clarity Angular
-* `angular:test:watch` - Continually run all tests for Clarity Angular
+- `angular:build` - Build the Angular package for production
+- `angular:start` - Run the test project for Clarity Angular Components
+- `angular:test` - Run all tests for Clarity Angular
+- `angular:test:watch` - Continually run all tests for Clarity Angular
 
 ## `@clr/core`
 
 Build Clarity Core by running `npm run core:build`, which calls the following tasks to build the package.
 
-* `core:build` - Builds the Core package for production
-* `core:start` - Run the test project for Clarity Core Web Components
-* `core:test` - Run all tests for Clarity Core
-* `core:test:watch` - Continually run all tests for Clarity Core
+- `core:build` - Builds the Core package for production
+- `core:start` - Run the test project for Clarity Core Web Components
+- `core:test` - Run all tests for Clarity Core
+- `core:test:watch` - Continually run all tests for Clarity Core
 
 ## `@clr/icons`
 
 Build Clarity Icons by running `npm run icons:build`, which calls the following tasks to build the package.
 
-* `icons:build:web` - Webpack compiles and bundles the TypeScript assets
-* `icons:build:css` - Sass compiles the styles
-* `icons:build:optimize` - CSSO optimizes the CSS
-* `icons:build:package` - Copy the `package.json` into the package, and set the version number
-* `icons:build:web` - Build the raw svg files and zip directories for designers
+- `icons:build:web` - Webpack compiles and bundles the TypeScript assets
+- `icons:build:css` - Sass compiles the styles
+- `icons:build:optimize` - CSSO optimizes the CSS
+- `icons:build:package` - Copy the `package.json` into the package, and set the version number
+- `icons:build:web` - Build the raw svg files and zip directories for designers
 
 ## `@clr/ui`
 
 Build Clarity UI is by running `npm run ui:build`, which calls the following tasks to build the package.
 
-* `ui:build:css` - Sass compiles the light and dark theme files
-* `ui:build:prefix` - Autoprefixer adds prefixes to CSS properties based on browser compatibility
-* `ui:build:src` - Copy in the source files for anyone building directly
-* `ui:build:optimize` - CSSO Optimize the CSS
-* `ui:build:package` - Copy the `package.json` into the package, and set the version number
+- `ui:build:css` - Sass compiles the light and dark theme files
+- `ui:build:prefix` - Autoprefixer adds prefixes to CSS properties based on browser compatibility
+- `ui:build:src` - Copy in the source files for anyone building directly
+- `ui:build:optimize` - CSSO Optimize the CSS
+- `ui:build:package` - Copy the `package.json` into the package, and set the version number
 
 ## Globally Installed NPM packages
 
 The following packages are installed globally in the development environment. The purpose of each is listed below.
 You won't need to install these for general development but may wish to do so if you want to run specific scripts for testing or publishing that require them:
 
-* [@angular/cli](https://cli.angular.io/): The whole project uses this for build, preview, and testing.
-* [gemini](https://gemini-testing.github.io/): this is used to run cli commands to run visual diff regression tests.
-* [html-reporter](https://www.npmjs.com/package/html-reporter): plugin for Gemini to produce an HTML report of the CSS regression tests.
+- [@angular/cli](https://cli.angular.io/): The whole project uses this for build, preview, and testing.
+- [gemini](https://gemini-testing.github.io/): this is used to run cli commands to run visual diff regression tests.
+- [html-reporter](https://www.npmjs.com/package/html-reporter): plugin for Gemini to produce an HTML report of the CSS regression tests.
 
 ## Additional NPM Scripts
 
@@ -157,9 +157,9 @@ To update and test for changes against `clr-angular.d.ts`.
 
 #### How to run visual tests
 
-* You going to need Docker installed and running
-* `npm run gemini:fix` - this runs all visual tests and compare them to there snapshots. It could take a long time,
+- You going to need Docker installed and running
+- `npm run gemini:fix` - this runs all visual tests and compare them to there snapshots. It could take a long time,
   and also the changes that you made may not affect every test. A better solution is to run only the affected sets.
   `npm run gemini:fix set2 set4`
-* Verify that the screenshots which can be found modified in your git changes reflect the changes you intended.
-* Commit and push the updated screenshots. This is enough to trigger our CI builds again.
+- Verify that the screenshots which can be found modified in your git changes reflect the changes you intended.
+- Commit and push the updated screenshots. This is enough to trigger our CI builds again.