@mackin.com/styleguide 7.2.1 → 7.3.0

package/index.d.ts

@@ -268,9 +268,11 @@ declare const Header: (props: {
     toggleMenu?: () => void | undefined;
     /** If true, will hide menu button on larger screens */
     responsive?: boolean;
-    rightElements?: JSX.Element;
     inline?: boolean;
     className?: string;
+    leftElements?: JSX.Element;
+    rightElements?: JSX.Element;
+    /** Elements will appear in the center of the header and slightly below. */
     centerOffsetElements?: JSX.Element;
     noMenu?: boolean;
     /** Will fill the title center aligned with wrapping. */
@@ -345,6 +347,7 @@ interface InputProps {
     debounceMs?: number;
     /** Defaults to 'off'. */
     autoComplete?: string;
+    autoFocus?: boolean;
     /** Called with debounce when the input changes. */
     onChange?: (value: InputValue, name?: string) => void;
     onFocus?: (event: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
@@ -688,6 +691,8 @@ interface MackinTheme {
     fonts: {
         family: string;
         size: string;
+        sizeSmall: string;
+        sizeLarge: string;
         headerFamily: string;
     };
     controls: {

package/index.js

@@ -108,6 +108,8 @@ const defaultTheme = {
     fonts: {
         family: 'Arial, Helvetica, sans-serif',
         size: '16px',
+        sizeSmall: '0.7rem',
+        sizeLarge: '1.3rem',
         headerFamily: 'Arial, Helvetica, sans-serif',
     },
     controls: {
@@ -567,7 +569,7 @@ const Text = (props) => {
     const styles = css.css({
         userSelect: 'text',
         label: 'Text'
-    }, tagStyles[tagChoice], alignStyles[(_a = props.align) !== null && _a !== void 0 ? _a : 'left'], props.smaller && { fontSize: '0.7rem' }, props.larger && { fontSize: '1.3rem' }, props.italics && { fontStyle: 'italic' }, props.ellipsis && {
+    }, tagStyles[tagChoice], alignStyles[(_a = props.align) !== null && _a !== void 0 ? _a : 'left'], props.smaller && { fontSize: theme.fonts.sizeSmall }, props.larger && { fontSize: theme.fonts.sizeLarge }, props.italics && { fontStyle: 'italic' }, props.ellipsis && {
         overflow: 'hidden',
         whiteSpace: 'nowrap',
         textOverflow: 'ellipsis'
@@ -800,7 +802,6 @@ const Pager = (props) => {
 			display: block;
 		}
 	`;
-    //TB: check this after fixing buttons
     const buttonStyles = css.css({
         backgroundColor: 'transparent'
     });
@@ -1636,7 +1637,6 @@ const FormColumnRow = (props) => {
         }), props.className) }, props.children));
 };
 
-//TB: have a sticky variant
 const Header = (props) => {
     const theme = useThemeSafely();
     const bodyStyles = css.css `
@@ -1696,6 +1696,12 @@ const Header = (props) => {
 		grid-auto-flow: column;
 		align-items: center;
 	`;
+    const leftElementStyles = props.leftElements && css.css({
+        display: 'grid',
+        gap: '0.5rem',
+        gridAutoFlow: 'column',
+        alignItems: 'center'
+    });
     const centerElementsStyles = props.centerOffsetElements && css.css `
 		position: absolute;
 		display: flex;
@@ -1721,6 +1727,7 @@ const Header = (props) => {
     return (React__namespace.createElement("div", { className: css.cx('header', headerStyles, props.className) },
         !props.noMenu && (React__namespace.createElement(Button, { variant: "icon", className: headerButtonStyles, onClick: toggleMenu },
             React__namespace.createElement(Icon, { id: "menu" }))),
+        props.leftElements && React__namespace.createElement("div", { className: leftElementStyles }, props.leftElements),
         title,
         props.rightElements && React__namespace.createElement("div", { className: rightElementStyles }, props.rightElements),
         props.centerOffsetElements && (React__namespace.createElement("div", { className: centerElementsStyles },
@@ -2033,15 +2040,15 @@ const Input = React__namespace.forwardRef((props, ref) => {
         };
     }
     if (props.type === 'number') {
-        inputElement = React__namespace.createElement("input", { ref: ref, name: props.name, pattern: props.pattern, style: props.style, autoComplete: autoComplete, tabIndex: props.readOnly ? -1 : undefined, readOnly: props.readOnly, 
+        inputElement = React__namespace.createElement("input", { autoFocus: props.autoFocus, ref: ref, name: props.name, pattern: props.pattern, style: props.style, autoComplete: autoComplete, tabIndex: props.readOnly ? -1 : undefined, readOnly: props.readOnly, 
             // set fixed default to defeat pasting stupid numbers
             maxLength: 50, min: props.min, max: props.max, required: props.required, disabled: props.disabled, id: props.id, className: css.cx(inputStyles, props.inputClassName), placeholder: props.placeholder, type: "number", value: localValue, onFocus: onFocus, onBlur: onBlur, onChange: localOnChange, onKeyDown: props.onKeyDown, onKeyUp: props.onKeyUp, onKeyPress: props.onKeyPress });
     }
     else if (props.type === 'date') {
-        inputElement = React__namespace.createElement("input", { ref: ref, name: props.name, pattern: props.pattern, style: props.style, autoComplete: autoComplete, tabIndex: props.readOnly ? -1 : undefined, readOnly: props.readOnly, maxLength: 10, required: props.required, disabled: props.disabled, id: props.id, className: css.cx(inputStyles, props.inputClassName), placeholder: props.placeholder, type: "text", value: localValue, onFocus: onFocus, onBlur: onBlur, onChange: localOnChange, onKeyDown: props.onKeyDown, onKeyUp: props.onKeyUp, onKeyPress: props.onKeyPress });
+        inputElement = React__namespace.createElement("input", { autoFocus: props.autoFocus, ref: ref, name: props.name, pattern: props.pattern, style: props.style, autoComplete: autoComplete, tabIndex: props.readOnly ? -1 : undefined, readOnly: props.readOnly, maxLength: 10, required: props.required, disabled: props.disabled, id: props.id, className: css.cx(inputStyles, props.inputClassName), placeholder: props.placeholder, type: "text", value: localValue, onFocus: onFocus, onBlur: onBlur, onChange: localOnChange, onKeyDown: props.onKeyDown, onKeyUp: props.onKeyUp, onKeyPress: props.onKeyPress });
     }
     else if (props.type === 'textarea') {
-        inputElement = React__namespace.createElement("textarea", { ref: ref, name: props.name, style: props.style, rows: props.rows || 10, autoComplete: autoComplete, tabIndex: props.readOnly ? -1 : undefined, readOnly: props.readOnly, maxLength: props.maxLength || DEFAULT_MAX_LENGTH, required: props.required, disabled: props.disabled, id: props.id, className: css.cx(css.css `
+        inputElement = React__namespace.createElement("textarea", { autoFocus: props.autoFocus, ref: ref, name: props.name, style: props.style, rows: props.rows || 10, autoComplete: autoComplete, tabIndex: props.readOnly ? -1 : undefined, readOnly: props.readOnly, maxLength: props.maxLength || DEFAULT_MAX_LENGTH, required: props.required, disabled: props.disabled, id: props.id, className: css.cx(css.css `
 			${inputStyles}
 			max-width: 100%;
 			min-height: ${theme.controls.height};
@@ -2050,7 +2057,7 @@ const Input = React__namespace.forwardRef((props, ref) => {
     }
     else {
         // text, password, email, and url
-        inputElement = React__namespace.createElement("input", { ref: ref, name: props.name, pattern: props.pattern, style: props.style, autoComplete: autoComplete, tabIndex: props.readOnly ? -1 : undefined, readOnly: props.readOnly, maxLength: props.maxLength || DEFAULT_MAX_LENGTH, required: props.required, disabled: props.disabled, id: props.id, className: css.cx(inputStyles, props.inputClassName), placeholder: props.placeholder, type: props.type, value: localValue, onFocus: onFocus, onBlur: onBlur, onChange: localOnChange, onKeyDown: props.onKeyDown, onKeyUp: props.onKeyUp, onKeyPress: props.onKeyPress });
+        inputElement = React__namespace.createElement("input", { autoFocus: props.autoFocus, ref: ref, name: props.name, pattern: props.pattern, style: props.style, autoComplete: autoComplete, tabIndex: props.readOnly ? -1 : undefined, readOnly: props.readOnly, maxLength: props.maxLength || DEFAULT_MAX_LENGTH, required: props.required, disabled: props.disabled, id: props.id, className: css.cx(inputStyles, props.inputClassName), placeholder: props.placeholder, type: props.type, value: localValue, onFocus: onFocus, onBlur: onBlur, onChange: localOnChange, onKeyDown: props.onKeyDown, onKeyUp: props.onKeyUp, onKeyPress: props.onKeyPress });
     }
     const inputWrapperStyles = css.css `
 		width:100%;

package/package.json

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