@mackin.com/styleguide 8.2.3 → 8.3.0

package/index.d.ts

@@ -86,7 +86,7 @@ declare const Backdrop: (p: {
     __debug?: boolean;
 }) => JSX.Element;
 
-declare type ButtonVariant = 'label' | 'circle' | 'icon' | 'link' | 'inlineLink' | 'primary' | 'secondary' | 'omg' | 'primary2' | 'positive' | 'negative';
+declare type ButtonVariant = 'label' | 'circle' | 'icon' | 'link' | 'inlineLink' | 'primary' | 'secondary' | 'omg' | 'primary2' | 'positive' | 'negative' | 'text';
 interface ButtonProps extends React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> {
     variant?: ButtonVariant;
     /** As round as can be. */
@@ -254,6 +254,7 @@ declare const ICONS: {
 };
 declare const Icon: (props: {
     id: string;
+    title?: string | undefined;
     className?: string | undefined;
     spin?: boolean | undefined;
     style?: React.CSSProperties | undefined;
@@ -432,6 +433,8 @@ declare const List: React.ForwardRefExoticComponent<Pick<ListProps, "altRowColor
 interface ListItemProps extends React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement> {
     /** For variant 'full', the content will take up the entire space of the parent (no padding applied by this component). */
     variant?: 'full';
+    /** By default (and not a good idea in hindsight), ListItem applies styles to child Button or OmniLink elements when the variant is 'full'. Use this to remove these styles. */
+    noContentStyling?: boolean;
 }
 declare const ListItem: (props: ListItemProps) => JSX.Element;
 
@@ -445,10 +448,13 @@ interface ModalProps {
     noBackground?: boolean;
     closeButton?: boolean;
     heading?: string;
+    /** Use to override default heading styling. */
+    headerClassName?: string;
     /** Selector of the element to focus on initial show. */
     focusSelector?: string;
     scrollable?: boolean;
     id?: string;
+    /** Applied to the modal body. */
     className?: string;
     __debug?: boolean;
     onClick?: () => void;
@@ -1039,7 +1045,7 @@ interface LinkProps extends LinkContentProps, React.DetailedHTMLProps<React.Anch
     /** Full width with max space between the text and the icon */
     iconBlock?: boolean;
     /** Corresponds to the button variants of the same name. */
-    variant?: 'button' | 'label' | 'icon' | 'circle' | 'primary' | 'secondary' | 'omg' | 'primary2' | 'positive' | 'negative';
+    variant?: 'button' | 'label' | 'icon' | 'circle' | 'primary' | 'secondary' | 'omg' | 'primary2' | 'positive' | 'negative' | 'text';
     /** Only for button variants. */
     round?: boolean;
     /** Only for button variants. */

package/index.js

@@ -67,7 +67,7 @@ function __rest(s, e) {
     return t;
 }
 
-//TB: will need to update.  the versions of fa are at 6 now.
+//TB: FUTURE will need to update.  the versions of fa are at 6 now.
 // major version
 const ICONS = {
     add: proSolidSvgIcons.faPlus,
@@ -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, { 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', 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. */
@@ -238,9 +238,70 @@ const useThemeSafely = () => {
     return defaultTheme;
 };
 
+const getTagStyles = (theme, tag) => {
+    switch (tag) {
+        case 'p': return {
+            marginTop: theme.controls.paragraphPadding,
+            marginBottom: theme.controls.paragraphPadding
+        };
+        case 'h1': return {
+            fontSize: theme.fonts.sizeH1
+        };
+        case 'h2': return {
+            fontSize: theme.fonts.sizeH2
+        };
+        case 'h3': return {
+            fontSize: theme.fonts.sizeH3
+        };
+        case 'h4': return {
+            fontSize: theme.fonts.sizeH4
+        };
+        default: return undefined;
+    }
+};
+const headerRegex = /h1|h2|h3|h4/;
+const alignStyles = {
+    'center': { textAlign: 'center' },
+    'left': { textAlign: 'left' },
+    'right': { textAlign: 'right' }
+};
+/** Wraps common needs for displaying text.  Use for all text-containing elements to save on duplicated styling.  */
+const Text = (props) => {
+    var _a, _b;
+    const theme = useThemeSafely();
+    const tagChoice = props.tag || 'p';
+    const style = props.style || {};
+    if (props.lineClamp) {
+        style.WebkitLineClamp = props.lineClamp;
+    }
+    if (props.leftPad) {
+        style.paddingLeft = props.leftPad;
+    }
+    const styles = css.css(getTagStyles(theme, tagChoice), {
+        userSelect: 'text',
+        label: 'Text',
+        fontSize: props.fontSize ? props.fontSize : undefined
+    }, 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'
+    }, props.lineClamp && {
+        WebkitBoxOrient: 'vertical',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        display: '-webkit-box'
+    }, props.spacedOut && { lineHeight: '1.5rem' }, props.bold && { fontWeight: 'bold' }, props.noPad && { margin: 0, padding: 0 }, headerRegex.test((_b = props.tag) !== null && _b !== void 0 ? _b : '') && {
+        fontFamily: theme.fonts.headerFamily
+    });
+    return React__namespace.createElement(tagChoice, {
+        style: style,
+        className: css.cx('text', styles, props.className)
+    }, props.children);
+};
+
 const Button = React__namespace.forwardRef((props, ref) => {
     var _a;
-    const nativeProps = __rest(props, ["variant", "round", "rightIcon", "leftIcon", "iconBlock", "small", "readOnly", "waiting", "enforceMinWidth", "controlAlign"]);
+    const { variant, round, rightIcon, leftIcon, iconBlock, small, readOnly, waiting, enforceMinWidth, controlAlign } = props, nativeProps = __rest(props, ["variant", "round", "rightIcon", "leftIcon", "iconBlock", "small", "readOnly", "waiting", "enforceMinWidth", "controlAlign"]);
     const theme = useThemeSafely();
     const buttonStyles = css.css `
 		padding-left: ${theme.controls.padding};
@@ -307,11 +368,22 @@ const Button = React__namespace.forwardRef((props, ref) => {
 				font-size: 1.3rem;
 			`}
 		`}
-		${props.variant === 'label' && `
+		${(props.variant === 'label') && `
+			display: inline-block;
+			width: auto;
+			box-shadow: none;
+			border: none;
+		`}
+		${(props.variant === 'text') && `
+			cursor: auto;
 			display: inline-block;
 			width: auto;
 			box-shadow: none;
 			border: none;
+			line-height: ${theme.controls.height};
+			&:hover:not(:disabled) {
+				filter: none;
+			}
 		`}
 		${props.variant === 'link' && `
 			padding: 0;
@@ -402,18 +474,24 @@ const Button = React__namespace.forwardRef((props, ref) => {
 		`}
 	`;
     const disabled = props.disabled || props.waiting;
-    const button = (React__namespace.createElement("button", Object.assign({}, nativeProps, { ref: ref, disabled: disabled, className: css.cx('button', styles, props.className), type: (_a = props.type) !== null && _a !== void 0 ? _a : 'button' }),
-        props.leftIcon && React__namespace.createElement("span", { className: css.css({ marginRight: '0.5rem' }) }, props.leftIcon),
-        props.waiting ? React__namespace.createElement(Icon, { id: "waiting", spin: true }) : props.children,
-        props.rightIcon && React__namespace.createElement("span", { className: css.css({ marginLeft: '0.5rem' }) }, props.rightIcon)));
+    let content;
+    if (variant === 'text') {
+        content = React__namespace.createElement(Text, { className: css.cx(styles, props.className), tag: "div" }, props.children);
+    }
+    else {
+        content = (React__namespace.createElement("button", Object.assign({}, nativeProps, { ref: ref, disabled: disabled, className: css.cx('button', styles, props.className), type: (_a = props.type) !== null && _a !== void 0 ? _a : 'button' }),
+            props.leftIcon && React__namespace.createElement("span", { className: css.css({ marginRight: '0.5rem' }) }, props.leftIcon),
+            props.waiting ? React__namespace.createElement(Icon, { id: "waiting", spin: true }) : props.children,
+            props.rightIcon && React__namespace.createElement("span", { className: css.css({ marginLeft: '0.5rem' }) }, props.rightIcon)));
+    }
     if (props.controlAlign) {
         return (React__namespace.createElement("span", { className: css.css({
                 display: 'inline-block',
                 width: '100%',
                 paddingBottom: theme.controls.inputErrorMinHeight
-            }) }, button));
+            }) }, content));
     }
-    return button;
+    return content;
 });
 
 const accordianExpandTimeMs = 250;
@@ -726,30 +804,30 @@ const ListItem = (props) => {
             border-bottom: none;
         }
 	`;
-    const contentStyle = css.css `
-		padding: calc(${theme.controls.padding} * 1.5);
-		${props.variant === 'full' && `
-			padding:0;
-			>.button {
-				padding: calc(${theme.controls.padding} * 1.5);
-				width: 100%;
-				border: none;
-			}
-			>.omniLink {
-				padding-left: calc(${theme.controls.padding} * 1.5);
-				padding-right: calc(${theme.controls.padding} * 1.5);
-				width: 100%;
-				line-height: ${theme.controls.height};
-				border: none;
-			}
-			>.button:not(:focus), >.omniLink:not(:focus) {
-				box-shadow: none;
-			}
-			>.omniLink:not(.omniLink--iconBlock){
-				display: block;
-			}
-		`}
-	`;
+    const contentStyle = css.css({
+        padding: `calc(${theme.controls.padding} * 1.5)`
+    }, props.variant === 'full' && {
+        padding: 0
+    }, !props.noContentStyling && {
+        '>.button': {
+            padding: `calc(${theme.controls.padding} * 1.5)`,
+            width: '100%',
+            border: 'none'
+        },
+        '>.omniLink': {
+            paddingLeft: `calc(${theme.controls.padding} * 1.5)`,
+            paddingRight: `calc(${theme.controls.padding} * 1.5)`,
+            width: '100%',
+            border: 'none',
+            lineHeight: theme.controls.height
+        },
+        '>.button:not(:focus), >.omniLink:not(:focus)': {
+            boxShadow: 'none',
+        },
+        '>.omniLink:not(.omniLink--iconBlock)': {
+            display: 'block'
+        }
+    });
     return (React__namespace.createElement("li", Object.assign({}, liProps, { className: css.cx('listItem', itemStyles, props.className) }),
         React__namespace.createElement("div", { className: css.css(contentStyle) }, props.children)));
 };
@@ -785,67 +863,6 @@ const TabLocker = (props) => {
         } }, props.children));
 };
 
-const getTagStyles = (theme, tag) => {
-    switch (tag) {
-        case 'p': return {
-            marginTop: theme.controls.paragraphPadding,
-            marginBottom: theme.controls.paragraphPadding
-        };
-        case 'h1': return {
-            fontSize: theme.fonts.sizeH1
-        };
-        case 'h2': return {
-            fontSize: theme.fonts.sizeH2
-        };
-        case 'h3': return {
-            fontSize: theme.fonts.sizeH3
-        };
-        case 'h4': return {
-            fontSize: theme.fonts.sizeH4
-        };
-        default: return undefined;
-    }
-};
-const headerRegex = /h1|h2|h3|h4/;
-const alignStyles = {
-    'center': { textAlign: 'center' },
-    'left': { textAlign: 'left' },
-    'right': { textAlign: 'right' }
-};
-/** Wraps common needs for displaying text.  Use for all text-containing elements to save on duplicated styling.  */
-const Text = (props) => {
-    var _a, _b;
-    const theme = useThemeSafely();
-    const tagChoice = props.tag || 'p';
-    const style = props.style || {};
-    if (props.lineClamp) {
-        style.WebkitLineClamp = props.lineClamp;
-    }
-    if (props.leftPad) {
-        style.paddingLeft = props.leftPad;
-    }
-    const styles = css.css(getTagStyles(theme, tagChoice), {
-        userSelect: 'text',
-        label: 'Text',
-        fontSize: props.fontSize ? props.fontSize : undefined
-    }, 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'
-    }, props.lineClamp && {
-        WebkitBoxOrient: 'vertical',
-        overflow: 'hidden',
-        textOverflow: 'ellipsis',
-        display: '-webkit-box'
-    }, props.spacedOut && { lineHeight: '1.5rem' }, props.bold && { fontWeight: 'bold' }, props.noPad && { margin: 0, padding: 0 }, headerRegex.test((_b = props.tag) !== null && _b !== void 0 ? _b : '') && {
-        fontFamily: theme.fonts.headerFamily
-    });
-    return React__namespace.createElement(tagChoice, {
-        style: style,
-        className: css.cx('text', styles, props.className)
-    }, props.children);
-};
-
 //TB: FUTURE will need to use the new input
 const defaultMaxShownValues = 7;
 const buttonMarkerClass = 'ListItem__button';
@@ -1556,14 +1573,14 @@ const Modal = (p) => {
             outline: 'none'
         }
     });
-    const modalHeaderStyles = css.css({
+    const modalHeaderStyles = css.cx(css.css({
         display: 'flex',
         justifyContent: 'space-between',
         alignItems: 'center',
         backgroundColor: theme.colors.header,
         padding: '1rem',
         color: theme.colors.headerFont
-    });
+    }), p.headerClassName);
     const modalContainerStyles = css.css([{
             position: 'fixed',
             height: '100%',
@@ -3070,6 +3087,11 @@ const generateLinkStyles = (props, theme) => {
 		box-shadow: none;
 		border: none;
 	`}
+	${props.variant === 'text' && `
+		box-shadow: none;
+		border: none;
+		cursor: auto;
+	`}
 	${props.variant === 'icon' && `
 		box-shadow: none;
 		border: none;
@@ -3099,10 +3121,13 @@ const generateLinkStyles = (props, theme) => {
 };
 
 const OmniLink = (props) => {
-    const linkProps = __rest(props, ["noRouter", "rightIcon", "leftIcon", "block", "iconBlock", "variant", "round", "small", "colorOverride", "children", "ref"]);
+    const { noRouter, rightIcon, leftIcon, block, iconBlock, variant, round, small, colorOverride, children, ref } = props, linkProps = __rest(props, ["noRouter", "rightIcon", "leftIcon", "block", "iconBlock", "variant", "round", "small", "colorOverride", "children", "ref"]);
     const theme = useThemeSafely();
     const linkStyles = generateLinkStyles(props, theme);
     const mainClassName = css.cx('omniLink', linkStyles, props.className);
+    if (variant === 'text') {
+        return React__namespace.createElement(Text, { className: mainClassName, tag: "div" }, props.children);
+    }
     const content = React__namespace.createElement(LinkContent, Object.assign({}, props));
     if (props.noRouter) {
         return (React__namespace.createElement("a", Object.assign({}, linkProps, { target: props.target, className: mainClassName }), content));
@@ -3110,7 +3135,6 @@ const OmniLink = (props) => {
     return (React__namespace.createElement(reactRouterDom.Link, Object.assign({}, linkProps, { className: mainClassName, to: props.href }), content));
 };
 
-//TB: test in safari with the new arrow
 const roundPxPadding = '4px';
 const Picker = (props) => {
     const selectProps = __rest(props
@@ -4603,10 +4627,13 @@ const enumToEntities = (enumObj) => {
 };
 
 const Link = (props) => {
-    const linkProps = __rest(props, ["rightIcon", "leftIcon", "block", "iconBlock", "variant", "round", "small", "colorOverride", "children", "ref"]);
+    const { rightIcon, leftIcon, block, iconBlock, variant, round, small, colorOverride, children, ref } = props, linkProps = __rest(props, ["rightIcon", "leftIcon", "block", "iconBlock", "variant", "round", "small", "colorOverride", "children", "ref"]);
     const theme = useThemeSafely();
     const linkStyles = generateLinkStyles(props, theme);
     const mainClassName = css.cx('link', linkStyles, props.className);
+    if (variant === 'text') {
+        return React__namespace.createElement(Text, { className: mainClassName, tag: "div" }, props.children);
+    }
     return (React__namespace.createElement("a", Object.assign({}, linkProps, { target: props.target, className: mainClassName }),
         React__namespace.createElement(LinkContent, Object.assign({}, props))));
 };
@@ -4629,11 +4656,11 @@ const ThemeRenderer = (p) => {
             let colorBox;
             if (/color/i.test(key)) {
                 colorBox = (React__namespace.createElement("span", { className: css.css({
-                        display: 'inline-block',
+                        display: 'block',
                         border: '1px solid black',
-                        width: 24,
+                        width: '100%',
                         height: 24,
-                        backgroundColor: value
+                        background: value
                     }) }));
             }
             return (React__namespace.createElement(Tr, { key: key },
@@ -4644,7 +4671,7 @@ const ThemeRenderer = (p) => {
                             alignItems: 'center',
                             gap: '1rem'
                         }) },
-                        value,
+                        React__namespace.createElement("span", { className: css.css({ flexShrink: 1 }) }, value),
                         " ",
                         colorBox))));
         }))));

package/package.json

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