Fix the dang JSS

Author: mdarens

docs/demos/themed/description.md

@@ -1,7 +1,7 @@
 To customize the theme of an `Alert`, wrap it in a [react-jss](https://github.com/cssinjs/react-jss) higher-order component
-or provide it with a `classes` prop shaped like the one react-jss provides:
+or provide it with a `sheet` prop shaped like the one react-jss provides:
 ```
-{
+classes: {
     [className]: String
 }
 ```

src/alert-list.jsx

@@ -15,8 +15,14 @@ import Alert, { PropTypes as AlertPropTypes } from "./alert-timer";
 import AlertTransition from "./alert-transition";
 import styles from "./container/styles";
 
-const AlertList = ({ position, alerts, onDismiss, ...props }) => (
-	<Container position={position}>
+const AlertList = ({
+	position,
+	alerts,
+	onDismiss,
+	sheet: { classes },
+	...props
+}) => (
+	<Container position={position} className={classes.container}>
 		<TransitionGroup>
 			{alerts.map(item => {
 				const dismiss = onDismiss ? () => onDismiss(item) : null;

src/alert-transition.jsx

@@ -6,7 +6,7 @@ import useSheet from "react-jss";
 
 const timeout = { enter: ENTER_TIMEOUT, exit: EXIT_TIMEOUT };
 
-const AlertTransition = ({ classes, ...props }) =>
+const AlertTransition = ({ sheet: { classes }, ...props }) =>
 	props && props.children ? (
 		<CSSTransition timeout={timeout} classNames={classes} {...props} />
 	) : null;

src/alert/index.jsx

@@ -9,7 +9,7 @@ const Alert = ({
 	headline,
 	onDismiss,
 	dismissTitle = "Dismiss",
-	classes,
+	sheet: { classes },
 	showIcon = true
 }) => {
 	const isDismissable = !!onDismiss;

src/alert/styles.js

@@ -1,7 +1,9 @@
 import { bootstrap } from "toetag";
 import useSheet from "react-jss";
+import { transitionStyles } from "../alert-transition";
 
 export default useSheet({
+	...transitionStyles,
 	alert: {
 		composes: "alert",
 		marginBottom: bootstrap.paddingBaseVertical,

src/container/index.jsx

@@ -7,7 +7,11 @@ import styles from "./styles";
 export const ENTER_TIMEOUT = 500;
 export const EXIT_TIMEOUT = 300;
 
-const AlertContainer = ({ position = "top-right", children, classes }) => {
+const AlertContainer = ({
+	position = "top-right",
+	children,
+	sheet: { classes }
+}) => {
 	return (
 		<div className={`${classes.container} ${classes[position]}`}>
 			<TransitionGroup>