Merge pull request #3 from weltraumpirat/master

Bugfixes: Allow base props "className" and "style" to work on all components, fix some event listener issues.

Author: Justin Wilkerson

.gitignore

@@ -3,4 +3,5 @@
 node_modules
 .cache
 dist
-storybook-static
+storybook-static
+jest.config.js

src/WiredButton.tsx

@@ -26,6 +26,8 @@ export interface WiredButtonProps extends BaseProps {
 }
 
 export const WiredButton = ({
+  className,
+  style,
   onClick,
   elevation = 1,
   disabled = false,
@@ -34,10 +36,18 @@ export const WiredButton = ({
   const customValues = useMemo(() => {
     return {
       attributes: { disabled, elevation },
-      methods: { click: onClick },
     };
-  }, [elevation, disabled, onClick]);
+  }, [elevation, disabled]);
 
   const register = useCustomElement(customValues);
-  return <wired-button ref={register}>{children}</wired-button>;
+  return (
+    <wired-button
+      onClick={onClick}
+      class={className}
+      style={style}
+      ref={register}
+    >
+      {children}
+    </wired-button>
+  );
 };

src/WiredCalendar.tsx

@@ -78,6 +78,8 @@ export const WiredCalendar = ({
   selectedColor = 'red',
   dimmedColor = 'gray',
   onSelect,
+  className,
+  style,
 }: WiredCalendarProps) => {
   const customValues = useMemo(() => {
     return {
@@ -118,7 +120,13 @@ export const WiredCalendar = ({
   ]);
 
   const register = useCustomElement(customValues);
-  return <wired-calendar ref={register}></wired-calendar>;
+  return (
+    <wired-calendar
+      class={className}
+      style={style}
+      ref={register}
+    ></wired-calendar>
+  );
 };
 
 /*

src/WiredCard.tsx

@@ -29,6 +29,8 @@ export const WiredCard = ({
   elevation,
   fill,
   children,
+  className,
+  style,
 }: WiredCardProps) => {
   const customValues = useMemo(() => {
     return {
@@ -39,5 +41,9 @@ export const WiredCard = ({
 
   const register = useCustomElement(customValues);
 
-  return <wired-card ref={register}>{children}</wired-card>;
+  return (
+    <wired-card class={className} style={style} ref={register}>
+      {children}
+    </wired-card>
+  );
 };

src/WiredCheckBox.tsx

@@ -30,6 +30,8 @@ export const WiredCheckBox = ({
   color = 'currentColor',
   disabled = false,
   onChange,
+  className,
+  style,
 }: WiredCheckBoxProps) => {
   const customValues = useMemo(() => {
     return {
@@ -41,5 +43,5 @@ export const WiredCheckBox = ({
 
   const register = useCustomElement(customValues);
 
-  return <wired-checkbox ref={register} />;
+  return <wired-checkbox class={className} style={style} ref={register} />;
 };

src/WiredCombo.tsx

@@ -42,6 +42,8 @@ export const WiredCombo = ({
   onSelect,
   popupBgColor = 'white',
   selectedBgColor = 'gray',
+  className,
+  style,
 }: WiredComboProps) => {
   const customValues = useMemo(() => {
     return {
@@ -55,5 +57,9 @@ export const WiredCombo = ({
   }, [disabled, value, onSelect, popupBgColor, selectedBgColor]);
 
   const register = useCustomElement(customValues);
-  return <wired-combo ref={register}>{children}</wired-combo>;
+  return (
+    <wired-combo class={className} style={style} ref={register}>
+      {children}
+    </wired-combo>
+  );
 };

src/WiredDialog.tsx

@@ -30,6 +30,8 @@ export const WiredDialog = ({
   elevation = 1,
   open = false,
   zIndex = 1,
+  className,
+  style,
 }: WiredDialogProps) => {
   const customValues = useMemo(() => {
     return {
@@ -39,5 +41,9 @@ export const WiredDialog = ({
   }, [elevation, open, zIndex]);
 
   const register = useCustomElement(customValues);
-  return <wired-dialog ref={register}>{children}</wired-dialog>;
+  return (
+    <wired-dialog class={className} style={style} ref={register}>
+      {children}
+    </wired-dialog>
+  );
 };

src/WiredDivider.tsx

@@ -11,7 +11,11 @@ export interface WiredDividerProps extends BaseProps {
   elevation?: 1 | 2 | 3 | 4 | 5;
 }
 
-export const WiredDivider = ({ elevation = 1 }: WiredDividerProps) => {
+export const WiredDivider = ({
+  elevation = 1,
+  className,
+  style,
+}: WiredDividerProps) => {
   const customValues = useMemo(() => {
     return {
       attributes: { elevation },
@@ -20,5 +24,11 @@ export const WiredDivider = ({ elevation = 1 }: WiredDividerProps) => {
 
   const register = useCustomElement(customValues);
 
-  return <wired-divider ref={register}></wired-divider>;
+  return (
+    <wired-divider
+      class={className}
+      style={style}
+      ref={register}
+    ></wired-divider>
+  );
 };

src/WiredFab.tsx

@@ -42,6 +42,8 @@ export const WiredFab = ({
   icon = 'favorite',
   onClick,
   children,
+  className,
+  style,
 }: WiredFabProps) => {
   const customValues = useMemo(() => {
     return {
@@ -53,7 +55,7 @@ export const WiredFab = ({
 
   const register = useCustomElement(customValues);
   return (
-    <wired-fab ref={register}>
+    <wired-fab class={className} style={style} ref={register}>
       <span>
         {children || (
           <span className="material-icons" style={{ color: iconColor }}>

src/WiredIconButton.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { BaseProps } from './types';
 import { useCustomElement } from './utils/useCustomElement';
 import { Icon } from './utils/icons';
+
 const { useMemo } = React;
 
 export interface WiredIconButtonProps extends BaseProps {
@@ -30,10 +31,12 @@ export interface WiredIconButtonProps extends BaseProps {
    * @default favorite
    */
   icon?: Icon;
+
   /**
    * Event fired when button is clicked/submitted
    */
   onClick?(e: MouseEvent): void;
+
   /**
    * The children. Optionally pass in your own icon.
    */
@@ -48,18 +51,24 @@ export const WiredIconButton = ({
   iconSize = 24,
   onClick,
   children,
+  className,
+  style,
 }: WiredIconButtonProps) => {
   const customValues = useMemo(() => {
     return {
       attributes: { disabled },
-      methods: { click: onClick },
       css: { color: lineColor, '--mdc-icon-size': iconSize },
     };
-  }, [disabled, lineColor, iconSize, onClick]);
+  }, [disabled, lineColor, iconSize]);
 
   const register = useCustomElement(customValues);
   return (
-    <wired-icon-button ref={register}>
+    <wired-icon-button
+      onClick={onClick}
+      class={className}
+      style={style}
+      ref={register}
+    >
       <div style={{ height: '24px', width: '24px' }}>
         {children || (
           <span