Button titles (#156)

Greater-London-Authority · Nov 15, 2023 · 71bb3e8 · 71bb3e8
1 parent d65aea5
commit 71bb3e8
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 21 deletions.
diff --git a/.changeset/button-tippy-titles.md b/.changeset/button-tippy-titles.md
@@ -0,0 +1,5 @@
+---
+'@ldn-viz/ui': minor
+---
+
+ADDED - `title` property to `Button` component so that quick accessible tooltips can be added.
diff --git a/packages/eslint-config-custom/index.js b/packages/eslint-config-custom/index.js
@@ -1,20 +1,19 @@
 module.exports = {
   parser: '@typescript-eslint/parser',
   extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'turbo', 'prettier'],
-	plugins: ['svelte', '@typescript-eslint'],
+  plugins: ['svelte', '@typescript-eslint'],
   ignorePatterns: ['*.cjs'],
-	overrides: [
-		{
-			files: ['*.svelte'],
-			parser: 'svelte-eslint-parser',
-			// Parse the `<script>` in `.svelte` as TypeScript by adding the following configuration.
-			parserOptions: {
-			  parser: '@typescript-eslint/parser'
-			}
-		}
-	],
-  settings: {
-  },
+  overrides: [
+    {
+      files: ['*.svelte'],
+      parser: 'svelte-eslint-parser',
+      // Parse the `<script>` in `.svelte` as TypeScript by adding the following configuration.
+      parserOptions: {
+        parser: '@typescript-eslint/parser'
+      }
+    }
+  ],
+  settings: {},
   parserOptions: {
     sourceType: 'module',
     ecmaVersion: 2020

diff --git a/packages/ui/src/lib/button/Button.stories.svelte b/packages/ui/src/lib/button/Button.stories.svelte
@@ -144,23 +144,23 @@
 </Story>
 
 <Story name="Square">
-	<Button variant="square"
-		><Icon src={ArrowDownCircle} theme="solid" class="w-6 h-6" aria-hidden="true" /></Button
-	>
-	<Button variant="square" emphasis="secondary">
+	<Button variant="square" title="Down">
+    <Icon src={ArrowDownCircle} theme="solid" class="w-6 h-6" aria-hidden="true" />
+  </Button>
+	<Button variant="square" emphasis="secondary" title="Down">
 		<Icon src={ArrowDownCircle} theme="solid" class="w-6 h-6" aria-hidden="true" />
 	</Button>
-	<Button variant="square" disabled>
+	<Button variant="square" disabled title="Down">
 		<Icon src={ArrowDownCircle} theme="solid" class="w-6 h-6" aria-hidden="true" />
 	</Button>
 
-	<Button variant="square" size="sm">
+	<Button variant="square" size="sm" title="Down">
 		<Icon src={ArrowDownCircle} theme="solid" class="w-6 h-6" aria-hidden="true" />
 	</Button>
-	<Button variant="square" size="md">
+	<Button variant="square" size="md" title="Down">
 		<Icon src={ArrowDownCircle} theme="solid" class="w-6 h-6" aria-hidden="true" />
 	</Button>
-	<Button variant="square" size="lg">
+	<Button variant="square" size="lg" title="Down">
 		<Icon src={ArrowDownCircle} theme="solid" class="w-6 h-6 mb-1" aria-hidden="true" />
 		Large
 	</Button>

diff --git a/packages/ui/src/lib/button/Button.svelte b/packages/ui/src/lib/button/Button.svelte
@@ -22,6 +22,7 @@
 	export let disabled = false;
 	export let href = '';
 	export let type: 'button' | 'submit' = 'button';
+	export let title: undefined | string = undefined;
 	import { classNames } from '../utils/classNames';
 
 	const styleClasses: ButtonStyle = {
@@ -147,6 +148,7 @@
 	type={href ? undefined : type}
 	{href}
 	{disabled}
+	{title}
 	class={buttonClass}
 	on:click
 	on:change