@mackin.com/styleguide 8.3.1 → 8.4.0

package/index.d.ts

@@ -468,6 +468,8 @@ declare const Nav: (props: {
     children?: React.ReactNode;
     responsive?: boolean | undefined;
     className?: string | undefined;
+    /** Duration of the slide animation in ms.  Defaults to `theme.timings.nav.slideMs`. */
+    slideMs?: number | undefined;
     __debug?: boolean | undefined;
 }) => JSX.Element;
 
@@ -815,6 +817,11 @@ interface MackinTheme {
         desktop: string;
         tablet: string;
     };
+    timings: {
+        nav: {
+            slideMs: number;
+        };
+    };
 }
 /** Call this on your theme after messing with the props.  It will re-build things that depend on sizes and colors. */
 declare const calcDynamicThemeProps: <T extends MackinTheme>(theme: T) => void;

package/index.js

@@ -107,7 +107,7 @@ const ICONS = {
 const Icon = (props) => {
     var _a;
     const icon = (_a = ICONS[props.id]) !== null && _a !== void 0 ? _a : ICONS['noIcon'];
-    return React__namespace.createElement(reactFontawesome.FontAwesomeIcon, { title: props.title, style: props.style, onClick: props.onClick, spin: props.spin, className: css.cx('icon', props.className), icon: icon });
+    return React__namespace.createElement(reactFontawesome.FontAwesomeIcon, { title: props.title, style: props.style, onClick: props.onClick, spin: props.spin, className: css.cx('icon', css.css({ label: 'Icon' }), props.className), icon: icon });
 };
 
 /** Call this on your theme after messing with the props.  It will re-build things that depend on sizes and colors. */
@@ -218,6 +218,11 @@ const defaultTheme = {
     mediaQueries: {
         desktop: '',
         tablet: '' // set in calcDynamicThemeProps
+    },
+    timings: {
+        nav: {
+            slideMs: 250
+        }
     }
 };
 calcDynamicThemeProps(defaultTheme);
@@ -362,6 +367,7 @@ const Button = React__namespace.forwardRef((props, ref) => {
 			display: flex;
 			justify-content: center;
 			align-items: center;
+			background-color: transparent;
 			${props.small && `
 				width: ${theme.controls.heightSmall};
 				min-width: ${theme.controls.heightSmall};
@@ -373,8 +379,10 @@ const Button = React__namespace.forwardRef((props, ref) => {
 			width: auto;
 			box-shadow: none;
 			border: none;
+			background-color: transparent;
 		`}
 		${(props.variant === 'text') && `
+			background-color: transparent;
 			font-weight: normal;
 			cursor: auto;
 			display: inline-block;
@@ -797,7 +805,7 @@ const List = React__namespace.forwardRef((props, ref) => {
     return (React__namespace.createElement("ul", Object.assign({}, listProps, { ref: ref, className: css.cx('list', listStyles, props.className) }), children));
 });
 const ListItem = (props) => {
-    const liProps = __rest(props, ["variant"]);
+    const liProps = __rest(props, ["variant", "noContentStyling"]);
     const theme = useThemeSafely();
     const itemStyles = css.css `
 		border-bottom: ${theme.controls.border};
@@ -1558,6 +1566,8 @@ const Modal = (p) => {
         }
     }, [p.show]);
     const modalBodyStyles = css.css({
+        maxHeight: p.scrollable ? undefined : '99vh',
+        overflow: 'hidden',
         zIndex: theme.zIndexes.modal,
         cursor: 'default',
         margin: '1rem',
@@ -2840,7 +2850,7 @@ const useMediaQuery = (query) => {
 };
 
 const Nav = (props) => {
-    var _a, _b;
+    var _a, _b, _c, _d;
     const nav = React__namespace.useRef(null);
     const theme = useThemeSafely();
     const totalNavOffset = `calc(${theme.layout.navWidth} + 20px)`;
@@ -2866,13 +2876,14 @@ const Nav = (props) => {
 		}
 	`;
     const classNavShowing = css.css `
-		animation: ${slideRight} 0.250s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+		animation: ${slideRight} ${(_c = props.slideMs) !== null && _c !== void 0 ? _c : theme.timings.nav.slideMs}ms cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
 	`;
     const classNavNotShowing = css.css `
-		animation: ${slideLeft} 0.250s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+		animation: ${slideLeft} ${(_d = props.slideMs) !== null && _d !== void 0 ? _d : theme.timings.nav.slideMs}ms cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
 	`;
     // the padding-top here is to offset the navs' content from the header.  the shadow creeps over it.
     const navStyles = css.css `
+		label: Nav;
 		position: fixed;
 		top: 0;
 		left: calc(${totalNavOffset} * -1);
@@ -3089,6 +3100,7 @@ const generateLinkStyles = (props, theme) => {
 		border: none;
 	`}
 	${props.variant === 'text' && `
+		font-weight: normal;
 		box-shadow: none;
 		border: none;
 		cursor: auto;
@@ -3099,6 +3111,7 @@ const generateLinkStyles = (props, theme) => {
 		border-radius: 100%;
 		width: ${theme.controls.height};
 		text-align: center;
+		font-size: 1.6rem;
 	`}
 	${props.block && `
 		display: block;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@mackin.com/styleguide",
-	"version": "8.3.1",
+	"version": "8.4.0",
 	"description": "",
 	"main": "./index.js",
 	"types": "./index.d.ts",