feat: add MaterialButtonProps (#112)

Author: gioboa

packages/material/src/components/button/button.tsx

@@ -1,14 +1,45 @@
 import { component$, QwikIntrinsicElements, Slot } from '@builder.io/qwik';
 import { Button as HeadlessButton } from '@qwik-ui/headless';
+import { clsq } from '@qwik-ui/shared';
 
-export type ButtonProps = QwikIntrinsicElements['button'];
-
-export const Button = component$(
-  (props: ButtonProps) => {
-    return (
-      <HeadlessButton class="waves-effect waves-light btn-large" {...props}>
-        <Slot />
-      </HeadlessButton>
-    );
-  }
-);
+export type HTMLButtonProps = QwikIntrinsicElements['button'];
+
+export type MaterialButtonProps = {
+  disabled?: boolean;
+  floating?: boolean;
+  flat?: boolean;
+  size?: 'small' | 'medium' | 'large';
+};
+
+export type ButtonProps = HTMLButtonProps & MaterialButtonProps;
+
+export const Button = component$((props: ButtonProps) => {
+  const {
+    class: cls,
+    disabled,
+    floating,
+    flat,
+    size = 'medium',
+    ...rest
+  } = props;
+
+  return (
+    <HeadlessButton
+      {...rest}
+      class={clsq(
+        {
+          disabled: disabled,
+          'btn-floating': floating,
+          'btn-flat': flat,
+          // size
+          'btn-small': size === 'small',
+          btn: size === 'medium',
+          'btn-large': size === 'large',
+        },
+        cls
+      )}
+    >
+      <Slot />
+    </HeadlessButton>
+  );
+});

packages/website/src/components/material/material-provider/material-provider.tsx

@@ -1,7 +1,9 @@
 import { component$, Slot, useStyles$ } from '@builder.io/qwik';
 import material from '../styles/materialize.scss?inline';
+import materialIcons from '../styles/material-icons.css?inline';
 
 export const MaterialProvider = component$(() => {
   useStyles$(material);
+  useStyles$(materialIcons);
   return <Slot />;
 });

packages/website/src/components/material/styles/material-icons.css

@@ -0,0 +1,23 @@
+/* fallback */
+@font-face {
+  font-family: 'Material Icons';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/materialicons/v139/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2) format('woff2');
+}
+
+.material-icons {
+  font-family: 'Material Icons';
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  -webkit-font-feature-settings: 'liga';
+  -webkit-font-smoothing: antialiased;
+}

packages/website/src/routes/docs/material/button/index.tsx

@@ -1,19 +1,46 @@
-import { component$, $ } from '@builder.io/qwik';
+import { component$, $, useStylesScoped$ } from '@builder.io/qwik';
 import { Button } from '@qwik-ui/material';
 import { MaterialContext } from '../../../../../src/components/material';
 
-
 export default component$(() => {
+  useStylesScoped$(`
+    .panel {
+      display: flex;
+      gap: 8px;
+      flex-wrap: wrap;
+    }`);
+
   return (
     <>
       <h2>This is the documentation for the Button</h2>
+
       <div class="flex flex-col gap-8 mt-4">
-        <div>
-          <h2>Basic Example</h2>
-          <MaterialContext>
-            <Button onClick$={$(() => alert('Material'))}>SIMPLE BUTTON</Button>
-          </MaterialContext>
-        </div>
+        <h2>Raised</h2>
+        <MaterialContext>
+          <Button>Raised</Button>
+        </MaterialContext>
+        <h2>Disabled</h2>
+        <MaterialContext>
+          <Button disabled>Disabled</Button>
+        </MaterialContext>
+        <h2>Floating</h2>
+        <MaterialContext>
+          <Button floating size='large'>
+            <i class="material-icons">add</i>
+          </Button>
+        </MaterialContext>
+        <h2>Flat</h2>
+        <MaterialContext>
+          <Button flat>Flat</Button>
+        </MaterialContext>
+        <h2>Size: default medium</h2>
+        <MaterialContext>
+          <div class="panel">
+            <Button size={'small'}>Small</Button>
+            <Button size={'medium'}>Medium</Button>
+            <Button size={'large'}>Large</Button>
+          </div>
+        </MaterialContext>
       </div>
     </>
   );