From 20aaa806268b4641e7932a4a782abacbbf9c32a9 Mon Sep 17 00:00:00 2001
From: Fabian Stamm <dev@fabianstamm.de>
Date: Fri, 10 Apr 2020 20:08:21 +0200
Subject: [PATCH] Allow using classname and class

---
 package.json       |  2 +-
 src/Button.tsx     |  2 +-
 src/Card.tsx       |  5 ++++-
 src/Container.tsx  |  5 ++++-
 src/Fab.tsx        |  5 ++++-
 src/Header.tsx     |  5 ++++-
 src/IconButton.tsx |  7 ++++++-
 src/List.tsx       |  4 +---
 src/Modal.tsx      | 24 ++++++++++++++++++++----
 src/Table.tsx      |  5 ++++-
 src/Theme.tsx      |  4 ++--
 11 files changed, 51 insertions(+), 17 deletions(-)

diff --git a/package.json b/package.json
index a3918d4..6f561bf 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
    "name": "@hibas123/theme-preact",
-   "version": "1.0.4",
+   "version": "1.0.5",
    "description": "",
    "main": "out/index.js",
    "dependencies": {
diff --git a/src/Button.tsx b/src/Button.tsx
index 55f938c..19aefa5 100644
--- a/src/Button.tsx
+++ b/src/Button.tsx
@@ -20,7 +20,7 @@ export default function Button({
 }: IButtonProps) {
    let cl = "ht-btn";
 
-   if (className) cl += " " + (className || "");
+   if (className) cl += " " + (className || "") + (props.class || "");
 
    switch (format) {
       case ButtonFormats.DEFAULT:
diff --git a/src/Card.tsx b/src/Card.tsx
index 2eacdb3..145f838 100644
--- a/src/Card.tsx
+++ b/src/Card.tsx
@@ -5,7 +5,10 @@ export default function Card({
    ...props
 }: JSX.HTMLAttributes<HTMLDivElement>) {
    return (
-      <div className={"ht-card " + (className || "")} {...props}>
+      <div
+         className={"ht-card " + (className || "") + (props.class || "")}
+         {...props}
+      >
          {children}
       </div>
    );
diff --git a/src/Container.tsx b/src/Container.tsx
index 66ebcf1..73eaaf3 100644
--- a/src/Container.tsx
+++ b/src/Container.tsx
@@ -5,7 +5,10 @@ export default function Container({
    ...props
 }: JSX.HTMLAttributes<HTMLDivElement>) {
    return (
-      <div className={"ht-container " + (className || "")} {...props}>
+      <div
+         className={"ht-container " + (className || "") + (props.class || "")}
+         {...props}
+      >
          {children}
       </div>
    );
diff --git a/src/Fab.tsx b/src/Fab.tsx
index a4635d6..f1bd30e 100644
--- a/src/Fab.tsx
+++ b/src/Fab.tsx
@@ -9,7 +9,10 @@ export default function Fab({
    let cl = "ht-fab " + (alignLeft ? "ht-fab-left " : "");
 
    return (
-      <button className={cl + (className || "")} {...props}>
+      <button
+         className={cl + (className || "") + (props.class || "")}
+         {...props}
+      >
          {children}
       </button>
    );
diff --git a/src/Header.tsx b/src/Header.tsx
index a69f182..3dc4190 100644
--- a/src/Header.tsx
+++ b/src/Header.tsx
@@ -8,7 +8,10 @@ export default function Header({
    ...props
 }: JSX.HTMLAttributes<HTMLDivElement>) {
    return (
-      <header className={"ht-header " + (className || "")} {...props}>
+      <header
+         className={"ht-header " + (className || "") + (props.class || "")}
+         {...props}
+      >
          {children}
       </header>
    );
diff --git a/src/IconButton.tsx b/src/IconButton.tsx
index a64b176..f296edb 100644
--- a/src/IconButton.tsx
+++ b/src/IconButton.tsx
@@ -5,7 +5,12 @@ export default function IconButton({
    ...props
 }: JSX.HTMLAttributes<HTMLButtonElement>) {
    return (
-      <button className={"ht-btn ht-btn-icon " + (className || "")} {...props}>
+      <button
+         className={
+            "ht-btn ht-btn-icon " + (className || "") + (props.class || "")
+         }
+         {...props}
+      >
          {children}
       </button>
    );
diff --git a/src/List.tsx b/src/List.tsx
index 1a9b034..77bf5bf 100644
--- a/src/List.tsx
+++ b/src/List.tsx
@@ -17,10 +17,8 @@ export default function List({
 
    if (divider) cl += "ht-list-divider ";
 
-   cl += className || "";
-
    return (
-      <ul className={cl} {...props}>
+      <ul className={cl + (className || "") + (props.class || "")} {...props}>
          {children}
       </ul>
    );
diff --git a/src/Modal.tsx b/src/Modal.tsx
index 493ed4c..4365e41 100644
--- a/src/Modal.tsx
+++ b/src/Modal.tsx
@@ -9,7 +9,10 @@ export function Modal({
    return (
       <div
          className={
-            "ht-modal " + (className || "") + (hidden ? "ht-modal-hidden" : "")
+            "ht-modal " +
+            (className || "") +
+            (props.class || "") +
+            (hidden ? "ht-modal-hidden" : "")
          }
          {...props}
       >
@@ -24,7 +27,10 @@ export function ModalTitle({
    ...props
 }: JSX.HTMLAttributes<HTMLDivElement>) {
    return (
-      <div className={"ht-modal-title " + (className || "")} {...props}>
+      <div
+         className={"ht-modal-title " + (className || "") + (props.class || "")}
+         {...props}
+      >
          {children}
       </div>
    );
@@ -36,7 +42,12 @@ export function ModalContent({
    ...props
 }: JSX.HTMLAttributes<HTMLDivElement>) {
    return (
-      <div className={"ht-modal-content " + (className || "")} {...props}>
+      <div
+         className={
+            "ht-modal-content " + (className || "") + (props.class || "")
+         }
+         {...props}
+      >
          {children}
       </div>
    );
@@ -48,7 +59,12 @@ export function ModalActions({
    ...props
 }: JSX.HTMLAttributes<HTMLDivElement>) {
    return (
-      <div className={"ht-modal-action " + (className || "")} {...props}>
+      <div
+         className={
+            "ht-modal-action " + (className || "") + (props.class || "")
+         }
+         {...props}
+      >
          {children}
       </div>
    );
diff --git a/src/Table.tsx b/src/Table.tsx
index 819b31f..5490dca 100644
--- a/src/Table.tsx
+++ b/src/Table.tsx
@@ -6,7 +6,10 @@ export default function Table({
    ...props
 }: JSX.HTMLAttributes<HTMLDivElement>) {
    return (
-      <div className={"ht-table " + (className || "")} {...props}>
+      <div
+         className={"ht-table " + (className || "") + (props.class || "")}
+         {...props}
+      >
          {children}
       </div>
    );
diff --git a/src/Theme.tsx b/src/Theme.tsx
index 17aea41..b49caf4 100644
--- a/src/Theme.tsx
+++ b/src/Theme.tsx
@@ -4,7 +4,7 @@ import { useEffect, useState, useMemo } from "preact/hooks";
 export enum ThemeModes {
    AUTO,
    LIGHT,
-   DARK
+   DARK,
 }
 
 export interface IThemeProps {
@@ -95,7 +95,7 @@ export default function Theme({ mode, children, ...colors }: IThemeProps) {
       colors.onPrimary,
       colors.onSecondary,
       colors.onError,
-      colors.onSuccess
+      colors.onSuccess,
    ]);
 
    return (