Merge pull request #50 from cybercom-finland/version/0.3.0

Version/0.3.0

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",

src/components/CircularLoadingIndicator/index.ts

@@ -1 +1 @@
-export * from './CircularLoadingIndicator'
+export * from './CircularLoadingIndicator';

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)

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>
+  );
 };

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';
 
 /**
@@ -21,13 +19,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>;
 };

src/components/KnowitLogo/index.ts

@@ -1 +1 @@
-export * from './KnowitLogo'
+export * from './KnowitLogo';

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 aria-label='navbar menu icon' size={'large'}>
-      <MdMenu />
-    </IconButton>
-  ),
+  menu: MenuComponent,
 };
 
 /**
@@ -72,9 +74,5 @@ Logo.args = {
  */
 export const Menu = Template.bind({});
 Menu.args = {
-  menu: (
-    <IconButton aria-label='navbar menu icon' size={'large'}>
-      <MdMenu />
-    </IconButton>
-  ),
+  menu: MenuComponent,
 };

src/components/NavBar/index.ts

@@ -1 +1 @@
-export * from './NavBar';
+export * from './NavBar';

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
    */