From ea203da0c0d1ed85e713c22cc770b809f158c388 Mon Sep 17 00:00:00 2001
From: Harry-Pekka Laakso <harry-pekka.laakso@knowit.fi>
Date: Thu, 17 Aug 2023 12:07:17 +0300
Subject: [PATCH 1/5] 0.3.0

---
 package-lock.json | 4 ++--
 package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 9855e1c..6476fad 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@cybercom-finland/knowit-design-system",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@cybercom-finland/knowit-design-system",
-      "version": "0.2.0",
+      "version": "0.3.0",
       "dependencies": {
         "react-icons": "^4.10.1",
         "styled-components": "^6.0.7",
diff --git a/package.json b/package.json
index 335295d..b1d1211 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
     "type": "git",
     "url": "https://github.com/cybercom-finland/knowit-finland-design-system.git"
   },
-  "version": "0.2.0",
+  "version": "0.3.0",
   "private": false,
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

From bf71f19254274d9add57ddc6962f4b57f16801c0 Mon Sep 17 00:00:00 2001
From: Harry-Pekka Laakso <harry-pekka.laakso@knowit.fi>
Date: Thu, 17 Aug 2023 12:08:53 +0300
Subject: [PATCH 2/5] lint staged

---
 src/components/CircularLoadingIndicator/index.ts | 2 +-
 src/components/KnowitLogo/index.ts               | 2 +-
 src/components/NavBar/index.ts                   | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/CircularLoadingIndicator/index.ts b/src/components/CircularLoadingIndicator/index.ts
index acba503..37e1ef7 100644
--- a/src/components/CircularLoadingIndicator/index.ts
+++ b/src/components/CircularLoadingIndicator/index.ts
@@ -1 +1 @@
-export * from './CircularLoadingIndicator'
\ No newline at end of file
+export * from './CircularLoadingIndicator';
diff --git a/src/components/KnowitLogo/index.ts b/src/components/KnowitLogo/index.ts
index 39ca440..f4dff6a 100644
--- a/src/components/KnowitLogo/index.ts
+++ b/src/components/KnowitLogo/index.ts
@@ -1 +1 @@
-export * from './KnowitLogo'
\ No newline at end of file
+export * from './KnowitLogo';
diff --git a/src/components/NavBar/index.ts b/src/components/NavBar/index.ts
index 4092c6e..39c2067 100644
--- a/src/components/NavBar/index.ts
+++ b/src/components/NavBar/index.ts
@@ -1 +1 @@
-export * from './NavBar';
\ No newline at end of file
+export * from './NavBar';

From 3f42bc3765df9a92e1ea8b179e0a3bbbcabbc110 Mon Sep 17 00:00:00 2001
From: Harry-Pekka Laakso <harry-pekka.laakso@knowit.fi>
Date: Thu, 17 Aug 2023 12:19:26 +0300
Subject: [PATCH 3/5] Fix navbar test

---
 src/components/NavBar/NavBar.stories.tsx | 20 +++++++++-----------
 1 file changed, 9 insertions(+), 11 deletions(-)

diff --git a/src/components/NavBar/NavBar.stories.tsx b/src/components/NavBar/NavBar.stories.tsx
index 75b2bda..cd2ae5d 100644
--- a/src/components/NavBar/NavBar.stories.tsx
+++ b/src/components/NavBar/NavBar.stories.tsx
@@ -36,7 +36,7 @@ const Template: StoryFn<typeof NavBar> = (args) => <NavBar {...args} />;
 /**
  * Default Navbar
  */
-export const Navbar = Template.bind({});
+export const Default = Template.bind({});
 
 /**
  * Medium Navbar
@@ -46,17 +46,19 @@ Medium.args = {
   size: 'medium',
 };
 
+const MenuComponent = () => {
+  <IconButton size='large' aria-label='Open menu'>
+    <MdMenu />
+  </IconButton>;
+};
+
 /**
  * Navbar with logo and menu
  */
 export const LogoAndMenu = Template.bind({});
 LogoAndMenu.args = {
   logo: <KnowitLogo />,
-  menu: (
-    <IconButton size={'large'}>
-      <MdMenu />
-    </IconButton>
-  ),
+  menu: MenuComponent,
 };
 
 /**
@@ -72,9 +74,5 @@ Logo.args = {
  */
 export const Menu = Template.bind({});
 Menu.args = {
-  menu: (
-    <IconButton size={'large'}>
-      <MdMenu />
-    </IconButton>
-  ),
+  menu: MenuComponent,
 };

From 648cf1ab4cea2994936fbb8c9b5102ebbd814178 Mon Sep 17 00:00:00 2001
From: Harry-Pekka Laakso <harry-pekka.laakso@knowit.fi>
Date: Thu, 17 Aug 2023 13:21:38 +0300
Subject: [PATCH 4/5] Fix dialog test

---
 .../Dialog/Dialog/Dialog.stories.tsx          | 24 ++++++++++++-------
 src/components/Dialog/Dialog/Dialog.tsx       |  8 +++++--
 .../Dialog/DialogHeader/DialogHeader.tsx      | 11 ++-------
 src/shared/types.ts                           |  2 +-
 4 files changed, 25 insertions(+), 20 deletions(-)

diff --git a/src/components/Dialog/Dialog/Dialog.stories.tsx b/src/components/Dialog/Dialog/Dialog.stories.tsx
index 27c1042..79f91a4 100644
--- a/src/components/Dialog/Dialog/Dialog.stories.tsx
+++ b/src/components/Dialog/Dialog/Dialog.stories.tsx
@@ -1,12 +1,14 @@
 import React from 'react';
 import { Meta, StoryFn } from '@storybook/react';
 import { withDesign } from 'storybook-addon-designs';
-import { Dialog, DialogProps } from './Dialog';
+import { Dialog } from './Dialog';
 import { Label } from '../../Label/Label';
 import { DialogHeader } from '../DialogHeader/DialogHeader';
 import { DialogContent } from '../DialogContent/DialogContent';
 import { DialogFooter } from '../DialogFooter/DialogFooter';
 import { Button } from '../../Button';
+import { IconButton } from '../../IconButton';
+import { MdClose } from 'react-icons/md';
 
 export default {
   title: 'Components/Dialog',
@@ -31,28 +33,34 @@ export default {
 /*
  * Example Dialog story
  */
-const ExampleDialog = ({ ...restProps }: DialogProps) => {
+const ExampleDialog = () => {
   return (
-    <Dialog>
+    <Dialog aria-label='Example dialog'>
       <DialogHeader>
         <Label>Title</Label>
+        <IconButton size='large' aria-label='Close'>
+          <MdClose />
+        </IconButton>
       </DialogHeader>
       <DialogContent>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque et
         odio sed est pellentesque gravida sit amet at orci.
       </DialogContent>
       <DialogFooter>
-        <Button size='large' label='Button' />
-        <Button variant='text' size='large' label='Button' />
+        <Button size='large' label='Button' aria-label='Button' />
+        <Button
+          variant='text'
+          size='large'
+          label='Button'
+          aria-label='Button'
+        />
       </DialogFooter>
     </Dialog>
   );
 };
 
 // More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Template: StoryFn<typeof Dialog> = (args) => (
-  <ExampleDialog {...args}></ExampleDialog>
-);
+const Template: StoryFn<typeof Dialog> = () => <ExampleDialog />;
 
 /**
  * Default variant (not specified)
diff --git a/src/components/Dialog/Dialog/Dialog.tsx b/src/components/Dialog/Dialog/Dialog.tsx
index fb62594..8f479d1 100644
--- a/src/components/Dialog/Dialog/Dialog.tsx
+++ b/src/components/Dialog/Dialog/Dialog.tsx
@@ -12,6 +12,10 @@ export interface DialogProps extends ComponentBaseProps<HTMLDivElement> {
   children?: React.ReactNode;
 }
 
-export const Dialog = ({ children }: DialogProps) => {
-  return <div role='dialog'>{children}</div>;
+export const Dialog = ({ children, ...restProps }: DialogProps) => {
+  return (
+    <div role='dialog' {...restProps}>
+      {children}
+    </div>
+  );
 };
diff --git a/src/components/Dialog/DialogHeader/DialogHeader.tsx b/src/components/Dialog/DialogHeader/DialogHeader.tsx
index 1a93768..a3d7bc4 100644
--- a/src/components/Dialog/DialogHeader/DialogHeader.tsx
+++ b/src/components/Dialog/DialogHeader/DialogHeader.tsx
@@ -21,13 +21,6 @@ const DialogHeaderWrapper = styled.div`
   padding: ${dialogHeaderDimensions.padding};
 `;
 
-export const DialogHeader = ({ children }: DialogProps) => {
-  return (
-    <DialogHeaderWrapper>
-      <div>{children}</div>
-      <IconButton size='large'>
-        <MdClose />
-      </IconButton>
-    </DialogHeaderWrapper>
-  );
+export const DialogHeader = ({ children, ...restProps }: DialogProps) => {
+  return <DialogHeaderWrapper {...restProps}>{children}</DialogHeaderWrapper>;
 };
diff --git a/src/shared/types.ts b/src/shared/types.ts
index 8a203aa..68d89ba 100644
--- a/src/shared/types.ts
+++ b/src/shared/types.ts
@@ -7,7 +7,7 @@ export type InputVariant = Exclude<Variant, 'text'>;
 /**
  * Base props for components
  */
-export interface ComponentBaseProps<T> {
+export interface ComponentBaseProps<T> extends React.AriaAttributes {
   /**
    * Component id
    */

From a42d5a83cfb2faf7bb232cce81a43c218646b6a1 Mon Sep 17 00:00:00 2001
From: Harry-Pekka Laakso <harry-pekka.laakso@knowit.fi>
Date: Thu, 17 Aug 2023 13:25:29 +0300
Subject: [PATCH 5/5] Remove unused

---
 src/components/Dialog/DialogHeader/DialogHeader.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/components/Dialog/DialogHeader/DialogHeader.tsx b/src/components/Dialog/DialogHeader/DialogHeader.tsx
index a3d7bc4..a402242 100644
--- a/src/components/Dialog/DialogHeader/DialogHeader.tsx
+++ b/src/components/Dialog/DialogHeader/DialogHeader.tsx
@@ -1,8 +1,6 @@
 import React from 'react';
 import { pxToRem } from '../../../shared';
 import styled from 'styled-components';
-import { MdClose } from 'react-icons/md';
-import { IconButton } from '../../IconButton';
 import { DialogProps } from '../Dialog/Dialog';
 
 /**