FAB, List

src/components/FloatingActionButton.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import { createComponent } from '@lit/react';
+import { MdFab as MdFabWebComponent } from '@material/web/fab/fab';
+import { MdBrandedFab as MdBrandedFabWebComponent } from '@material/web/fab/branded-fab';
+
+const MdFab = createComponent({
+	react: React,
+	tagName: 'md-fab',
+	elementClass: MdFabWebComponent,
+});
+
+type FABProps = {
+	children: React.ReactNode;
+	className?: string;
+	id?: string;
+	ariaLabel?: string;
+	variant?: 'surface' | 'primary' | 'secondary' | 'tertiary';
+	size?: 'medium' | 'large';
+	label?: string;
+	lowered?: boolean;
+}
+
+export const FAB = (props: FABProps) => {
+	const { children, className, ...rest } = props;
+
+	const variant = props.variant || 'surface';
+	const size = props.size || 'medium';
+	const label = props.label || '';
+	const lowered = props.lowered || false;
+
+	return (
+		<MdFab {...rest} className={className} variant={variant} size={size} label={label} lowered={lowered}>
+			{children}
+		</MdFab>
+	)
+}
+
+const MdBrandedFab = createComponent({
+	react: React,
+	tagName: 'md-branded-fab',
+	elementClass: MdBrandedFabWebComponent,
+});
+
+type BrandedFABProps = {
+	children: React.ReactNode;
+	className?: string;
+	id?: string;
+	ariaLabel?: string;
+	variant?: 'surface' | 'primary' | 'secondary' | 'tertiary';
+	size?: 'medium' | 'large';
+	label?: string;
+	lowered?: boolean;
+}
+
+export const BrandedFAB = (props: BrandedFABProps) => {
+	const { children, className, ...rest } = props;
+
+	const variant = props.variant || 'surface';
+	const size = props.size || 'medium';
+	const label = props.label || '';
+	const lowered = props.lowered || false;
+
+	return (
+		<MdBrandedFab {...rest} className={className} variant={variant} size={size} label={label} lowered={lowered}>
+			{children}
+		</MdBrandedFab>
+	)
+}

src/components/List.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { createComponent } from '@lit/react';
+import { MdList as MdListWebComponent } from '@material/web/list/list';
+import { MdListItem as MdListItemWebComponent } from '@material/web/list/list-item';
+
+const MdList = createComponent({
+	react: React,
+	tagName: 'md-list',
+	elementClass: MdListWebComponent,
+});
+
+type ListProps = {
+	children: React.ReactNode;
+}
+
+export const List = (props: ListProps) => {
+	const { children, ...rest } = props;
+
+	return (
+		<MdList {...rest}>
+			{children}
+		</MdList>
+	);
+}
+
+const MdListItem = createComponent({
+	react: React,
+	tagName: 'md-list-item',
+	elementClass: MdListItemWebComponent,
+});
+
+type ListItemProps = {
+	children: React.ReactNode;
+	className?: string;
+	id?: string;
+	ariaLabel?: string;
+	disabled?: boolean;
+	type?: 'text' | 'link' | 'button';
+	href?: string;
+	target?: '_blank' | '_self' | '_parent' | '_top';
+}
+
+export const ListItem = (props: ListItemProps) => {
+	const { children, ...rest } = props;
+
+	const type = props.type || 'text';
+
+	return (
+		<MdListItem {...rest} type={type}>
+			{children}
+		</MdListItem>
+	)
+}

src/hooks/useTheme.tsx

@@ -3,6 +3,8 @@ import React from "react";
 import { createContext, useContext } from "react";
 import { useScheme } from "./useScheme";
 
+import '../../fonts/roboto.css';
+
 const ThemeContext = createContext<Theme | undefined>(undefined);
 
 export function ThemeProvider({ children, theme, scheme }: { children: React.ReactNode, theme: Theme, scheme: 'dark' | 'light' }) {

src/index.tsx

@@ -11,6 +11,10 @@ import { FormLabel } from "./components/Forms";
 import { Paper } from "./components/Paper";
 import { AssistChip, InputChip } from "./components/Chip";
 import { Dialog, DialogActions, DialogContent, DialogTitle } from "./components/Dialog";
+import { IconButton } from "./components/IconButton";
+import { BrandedFAB } from "./components/FloatingActionButton";
+import { List, ListItem } from "./components/List";
+
 const mountApp = async () => {
 	const rootContainer = document.getElementById('root');
 
@@ -24,28 +28,17 @@ const mountApp = async () => {
 	const root = createRoot(rootContainer);
 	root.render(
 		<ThemeProvider theme={theme} scheme='dark'>
-			<Typography variant='h1'>Hello</Typography>
+			<List>
-			<Button onClick={() => alert('Hello')} variant='filled'>Hello</Button>
+				<ListItem type='button'>
-			<Checkbox />
+					Item 1
-			<Switch />
+				</ListItem>
-			<Typography variant='p'>Hello</Typography>
+				<ListItem type='button'>
-			<FormLabel>
+					Item 2
-				<Switch />
+				</ListItem>
-				<Typography variant='h6'>Hello</Typography>
+				<ListItem type='button'>
-			</FormLabel>
+					Item 3
-			<Paper display="flex" gap='18px' justifyContent="center" alignItems="center">
+				</ListItem>
-				<Typography variant='h6'>Hello</Typography>
+			</List>
-				<Switch />
-			</Paper>
-			<AssistChip label="Hello" />
-			<InputChip label="Hello" />
-			<Dialog open={true}>
-				<DialogTitle>Hello</DialogTitle>
-				<DialogContent>Hello</DialogContent>
-				<DialogActions>
-					<Button variant='text'>Close</Button>
-				</DialogActions>
-			</Dialog>
 		</ThemeProvider>
 	);
 };