fix(eslint): address lint issues

CONTRIBUTING.md

@@ -140,6 +140,8 @@ You can use any editor you like, but if you use [Visual Studio Code](https://cod
 
 To enable correct validation and to fix lint/style errors on save, add this to your VSCode `settings.json`:
 
+<!-- eslint-disable -->
+
 ```json
   "css.validate": false,
   "scss.validate": false,
@@ -153,6 +155,8 @@ To enable correct validation and to fix lint/style errors on save, add this to y
   "editor.formatOnSave": true,
 ```
 
+<!-- eslint-enable -->
+
 </details>
 
 ### Run storybook
@@ -196,7 +200,7 @@ The copyright holder for all files created by people working for the City of Ams
 If you use code from other EUPL-1.2 or higher licensed files that have a copyright notice, don’t forget to add this copyright notice as well.
 So, for a file with code written by someone working for the City of Amsterdam in 2023, but also containing code from another EUPL-1.2 or higher licensed file written by John Doe in 2021, the header would look like this:
 
-```javascript
+```js
 /**
  * @license EUPL-1.2+
  * Copyright (c) 2021 John Doe
@@ -208,7 +212,7 @@ All documentation files should also start with a license header.
 We use the Creative Commons Zero (CC0) license for this.
 The license header looks like this:
 
-```md
+```html
 <!-- @license CC0-1.0 -->
 ```
 

documentation/storybook.md

@@ -74,7 +74,7 @@ For example, when the child is a simple string (like in the default Button compo
 
 To do this, you can override the default like so:
 
-```js
+```txt
 argTypes: {
   children: {
     table: { disable: false },

packages/css/README.md

@@ -35,7 +35,7 @@ Other communities only need to overwrite design tokens to use our components wit
 Import the main stylesheet and use the class names in your markup.
 
 <!-- prettier-ignore -->
-```ts
+```jsx
 import "@amsterdam/design-system-assets/font/index.css"
 import "@amsterdam/design-system-css/dist/index.css"
 import "@amsterdam/design-system-tokens/dist/index.css"

packages/react/README.md

@@ -32,7 +32,7 @@ Import the stylesheets for the fonts, tokens, and components.
 Then import and use the components in your JSX.
 
 <!-- prettier-ignore -->
-```ts
+```jsx
 import "@amsterdam/design-system-assets/font/index.css"
 import "@amsterdam/design-system-css/dist/index.css"
 import "@amsterdam/design-system-tokens/dist/index.css"

packages/react/babel.config.js

@@ -1,4 +1,3 @@
-// eslint-disable-next-line no-undef
 module.exports = {
   presets: ['@babel/preset-env', '@babel/preset-react'],
 }

packages/react/src/ImageSlider/ImageSliderContext.tsx

@@ -11,7 +11,6 @@ export type ImageSliderContextValue = {
   isAtEnd: boolean
   goToNextSlide: () => void
   goToPreviousSlide: () => void
-  // eslint-disable-next-line no-unused-vars
   goToSlideId: (id: number) => void
 }
 

packages/react/src/Pagination/Pagination.tsx

@@ -17,7 +17,6 @@ export type PaginationProps = {
   /** The accessible name for the next page-button. */
   nextVisuallyHiddenLabel?: string
   /** A function to run when the page number changes. */
-  // eslint-disable-next-line no-unused-vars
   onPageChange?: (page: number) => void
   /** The current page number. */
   page?: number

packages/react/src/Tabs/TabsContext.tsx

@@ -11,7 +11,6 @@ export type TabsContextValue = {
   /** The identifier of the tab set. */
   tabsId: string
   /** A function to update the active tab. */
-  // eslint-disable-next-line no-unused-vars
   updateTab: (tab: number) => void
 }
 

packages/react/src/common/useKeyboardFocus.test.tsx

@@ -8,7 +8,6 @@ describe('use focus with arrows', () => {
   const onFocusThreeMock = jest.fn()
 
   const getComponent = (rotate: boolean | undefined = undefined) =>
-    // eslint-disable-next-line react/display-name
     function () {
       const ref = useRef<HTMLDivElement>(null)
       const { keyDown } = useKeyboardFocus(ref, {

proprietary/assets/svgo.config.js

@@ -1,4 +1,3 @@
-/* eslint-disable no-undef */
 module.exports = {
   plugins: [
     'removeDimensions',

proprietary/react-icons/README.md

@@ -19,13 +19,11 @@ npm install @amsterdam/design-system-react-icons
 
 Import the component for the icon you need, as well as the generic Icon component, and use them in your JSX.
 
-```ts
-import { Icon } from '@amsterdam/design-system-react'
-import { SearchIcon } from '@amsterdam/design-system-react-icons'
+```js
+import { Icon } from "@amsterdam/design-system-react";
+import { SearchIcon } from "@amsterdam/design-system-react-icons";
 
-export const App = () => (
-  <Icon svg={SearchIcon} />
-)
+export const App = () => <Icon svg={SearchIcon} />;
 ```
 
 ## Updating

storybook/src/components/FieldSet/FieldSet.docs.mdx

@@ -72,11 +72,7 @@ but we think that is preferable to missing the description entirely.
 Add an `id` to the Field Set and the description, and add both to the `aria-labelledby` attribute of Field Set, like so:
 
 ```jsx
-<Fieldset
-  aria-labelledby="fieldset description"
-  id="fieldset"
-  legend="Label"
->
+<FieldSet aria-labelledby="fieldset description" id="fieldset" legend="Label">
   <Paragraph id="description">Description</Paragraph>
   ...
 </FieldSet>
@@ -93,11 +89,7 @@ we add the Error Message text to the label as well.
 Add an `id` to the Field Set and the Error Message, and add both to the `aria-labelledby` attribute of Field Set, like so:
 
 ```jsx
-<Fieldset
-  aria-labelledby="fieldset error"
-  id="fieldset"
-  legend="Label"
->
+<FieldSet aria-labelledby="fieldset error" id="fieldset" legend="Label">
   <ErrorMessage id="error">Error message</ErrorMessage>
   ...
 </FieldSet>

storybook/src/components/SearchField/SearchField.stories.tsx

@@ -75,7 +75,6 @@ export const Controlled: any = {
           const value = formData.get('search-box')
           // search actions should not be triggered without a value
           if (value) {
-            // eslint-disable-next-line no-alert
             alert(`Gezocht op '${value}'`)
           }
         }}

storybook/src/docs/developer-guide/getting-started.docs.mdx

@@ -16,7 +16,7 @@ npm install @amsterdam/design-system-assets @amsterdam/design-system-css @amster
 
 Import the components and stylesheets you need, for example:
 
-```javascript
+```js
 import "@amsterdam/design-system-assets/font/index.css";
 import "@amsterdam/design-system-css/dist/index.css";
 import "@amsterdam/design-system-tokens/dist/index.css";
@@ -35,7 +35,7 @@ For applications, the large text and ample white space of the theme can be count
 That’s why there is a compact mode.
 To use the compact mode, import the compact CSS **after** the theme CSS, like so:
 
-```javascript
+```js
 import "@amsterdam/design-system-tokens/dist/index.css";
 import "@amsterdam/design-system-tokens/dist/compact.css";
 ```