@veeqo/ui 14.5.0-beta-1 → 14.5.0-beta-3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -17,16 +17,17 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
17
17
  /**
18
18
  * @deprecated Use the `Action` component instead
19
19
  */
20
- const ButtonBase = React.forwardRef(({ className, children, iconSlot, variant = 'default', size = 'base', dropdown = false, loading = false, contentStyles, ...otherProps }, ref) => {
20
+ const ButtonBase = React.forwardRef(({ className, children, iconSlot, variant = 'default', size = 'base', dropdown = false, loading = false, contentStyles, as, ...otherProps }, ref) => {
21
+ const Element = (as || 'button');
21
22
  if (variant === 'unstyled') {
22
- return (React__default.default.createElement("button", { ref: ref, className: buildClassnames.buildClassnames([Button_module['unstyled-variant'], className]), ...otherProps }, children));
23
+ return (React__default.default.createElement(Element, { ref: ref, className: buildClassnames.buildClassnames([Button_module['unstyled-variant'], className]), ...otherProps }, children));
23
24
  }
24
25
  const hasChildren = children !== undefined;
25
26
  const hasIcon = !!iconSlot;
26
27
  const iconSize = hasChildren || size === 'sm' ? 'var(--sizes-base)' : 'var(--sizes-md)';
27
28
  const mainContentStyle = { ...assignCssVars.assignCssVars({ buttonIconSize: iconSize }), ...contentStyles };
28
29
  if (variant === 'link') {
29
- return (React__default.default.createElement("button", { ref: ref, className: buildClassnames.buildClassnames([Button_module['link-variant'], hasChildren && Button_module.hasText, className]), ...otherProps },
30
+ return (React__default.default.createElement(Element, { ref: ref, className: buildClassnames.buildClassnames([Button_module['link-variant'], hasChildren && Button_module.hasText, className]), ...otherProps },
30
31
  (hasChildren || hasIcon) && (React__default.default.createElement("span", { className: buildClassnames.buildClassnames([Button_module.mainContent, loading && Button_module.loading]), style: mainContentStyle },
31
32
  iconSlot && iconSlot,
32
33
  children !== undefined && children,
@@ -34,7 +35,7 @@ const ButtonBase = React.forwardRef(({ className, children, iconSlot, variant =
34
35
  loading && (React__default.default.createElement("div", { className: Button_module.loadingWrapper },
35
36
  React__default.default.createElement(Loader.Loader, null)))));
36
37
  }
37
- return (React__default.default.createElement("button", { ref: ref, className: buildClassnames.buildClassnames([
38
+ return (React__default.default.createElement(Element, { ref: ref, className: buildClassnames.buildClassnames([
38
39
  Button_module.base,
39
40
  Button_module[`${variant}-variant`],
40
41
  Button_module[`${size}-size`],
@@ -1 +1 @@
1
- {"version":3,"file":"Button.cjs","sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\n\nimport { ButtonProps } from './types';\nimport { Loader } from '../Loader';\nimport { withTokens } from '../../hoc/withTokens';\nimport { buildClassnames, assignCssVars } from '../../utils';\nimport { DropdownIcon } from '../../icons';\n\nimport styles from './Button.module.scss';\n\n/* eslint-disable react/button-has-type */\n\n/**\n * @deprecated Use the `Action` component instead\n */\nexport const ButtonBase = forwardRef<HTMLButtonElement, ButtonProps>(\n (\n {\n className,\n children,\n iconSlot,\n variant = 'default',\n size = 'base',\n dropdown = false,\n loading = false,\n contentStyles,\n ...otherProps\n }: ButtonProps,\n ref,\n ) => {\n if (variant === 'unstyled') {\n return (\n <button\n ref={ref}\n className={buildClassnames([styles['unstyled-variant'], className])}\n {...otherProps}\n >\n {children}\n </button>\n );\n }\n\n const hasChildren = children !== undefined;\n const hasIcon = !!iconSlot;\n const iconSize = hasChildren || size === 'sm' ? 'var(--sizes-base)' : 'var(--sizes-md)';\n const mainContentStyle = { ...assignCssVars({ buttonIconSize: iconSize }), ...contentStyles };\n\n if (variant === 'link') {\n return (\n <button\n ref={ref}\n className={buildClassnames([styles['link-variant'], hasChildren && styles.hasText, className])}\n {...otherProps}\n >\n {(hasChildren || hasIcon) && (\n <span className={buildClassnames([styles.mainContent, loading && styles.loading])} style={mainContentStyle}>\n {iconSlot && iconSlot}\n {children !== undefined && children}\n {dropdown && <DropdownIcon />}\n </span>\n )}\n\n {loading && (\n <div className={styles.loadingWrapper}>\n <Loader />\n </div>\n )}\n </button>\n );\n }\n\n return (\n <button\n ref={ref}\n className={buildClassnames([\n styles.base,\n styles[`${variant}-variant`],\n styles[`${size}-size`],\n hasIcon && styles.hasIcon,\n hasChildren && styles.hasText,\n dropdown && styles.hasDropdown,\n className,\n ])}\n {...otherProps}\n >\n {(hasChildren || hasIcon) && (\n <span className={buildClassnames([styles.mainContent, loading && styles.loading])} style={mainContentStyle}>\n {iconSlot && iconSlot}\n {children !== undefined && children}\n {dropdown && <DropdownIcon />}\n </span>\n )}\n\n {loading && (\n <div className={styles.loadingWrapper}>\n <Loader />\n </div>\n )}\n </button>\n );\n },\n);\n\nexport const Button = withTokens(ButtonBase);\n"],"names":["forwardRef","React","buildClassnames","styles","assignCssVars","DropdownIcon","Loader","withTokens"],"mappings":"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"}
1
+ {"version":3,"file":"Button.cjs","sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["import React, { forwardRef, ElementType } from 'react';\n\nimport { ButtonProps } from './types';\nimport { Loader } from '../Loader';\nimport { withTokens } from '../../hoc/withTokens';\nimport { buildClassnames, assignCssVars } from '../../utils';\nimport { DropdownIcon } from '../../icons';\n\nimport styles from './Button.module.scss';\n\n/* eslint-disable react/button-has-type */\n\n/**\n * @deprecated Use the `Action` component instead\n */\nexport const ButtonBase = forwardRef<HTMLButtonElement, ButtonProps>(\n (\n {\n className,\n children,\n iconSlot,\n variant = 'default',\n size = 'base',\n dropdown = false,\n loading = false,\n contentStyles,\n as,\n ...otherProps\n }: ButtonProps,\n ref,\n ) => {\n const Element = (as || 'button') as ElementType;\n\n if (variant === 'unstyled') {\n return (\n <Element\n ref={ref}\n className={buildClassnames([styles['unstyled-variant'], className])}\n {...otherProps}\n >\n {children}\n </Element>\n );\n }\n\n const hasChildren = children !== undefined;\n const hasIcon = !!iconSlot;\n const iconSize = hasChildren || size === 'sm' ? 'var(--sizes-base)' : 'var(--sizes-md)';\n const mainContentStyle = { ...assignCssVars({ buttonIconSize: iconSize }), ...contentStyles };\n\n if (variant === 'link') {\n return (\n <Element\n ref={ref}\n className={buildClassnames([styles['link-variant'], hasChildren && styles.hasText, className])}\n {...otherProps}\n >\n {(hasChildren || hasIcon) && (\n <span className={buildClassnames([styles.mainContent, loading && styles.loading])} style={mainContentStyle}>\n {iconSlot && iconSlot}\n {children !== undefined && children}\n {dropdown && <DropdownIcon />}\n </span>\n )}\n\n {loading && (\n <div className={styles.loadingWrapper}>\n <Loader />\n </div>\n )}\n </Element>\n );\n }\n\n return (\n <Element\n ref={ref}\n className={buildClassnames([\n styles.base,\n styles[`${variant}-variant`],\n styles[`${size}-size`],\n hasIcon && styles.hasIcon,\n hasChildren && styles.hasText,\n dropdown && styles.hasDropdown,\n className,\n ])}\n {...otherProps}\n >\n {(hasChildren || hasIcon) && (\n <span className={buildClassnames([styles.mainContent, loading && styles.loading])} style={mainContentStyle}>\n {iconSlot && iconSlot}\n {children !== undefined && children}\n {dropdown && <DropdownIcon />}\n </span>\n )}\n\n {loading && (\n <div className={styles.loadingWrapper}>\n <Loader />\n </div>\n )}\n </Element>\n );\n },\n);\n\nexport const Button = withTokens(ButtonBase);\n"],"names":["forwardRef","React","buildClassnames","styles","assignCssVars","DropdownIcon","Loader","withTokens"],"mappings":"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"}
@@ -10,6 +10,10 @@ export declare const ButtonBase: React.ForwardRefExoticComponent<React.ButtonHTM
10
10
  dropdown?: boolean | undefined;
11
11
  loading?: boolean | undefined;
12
12
  contentStyles?: React.CSSProperties | undefined;
13
+ as?: React.ElementType | undefined;
14
+ href?: string | undefined;
15
+ target?: string | undefined;
16
+ rel?: string | undefined;
13
17
  } & React.RefAttributes<HTMLButtonElement>>;
14
18
  export declare const Button: React.ForwardRefExoticComponent<Omit<React.ButtonHTMLAttributes<HTMLButtonElement> & import("../../hoc/withTokens").WithTokensProps & {
15
19
  children?: React.ReactNode;
@@ -19,4 +23,8 @@ export declare const Button: React.ForwardRefExoticComponent<Omit<React.ButtonHT
19
23
  dropdown?: boolean | undefined;
20
24
  loading?: boolean | undefined;
21
25
  contentStyles?: React.CSSProperties | undefined;
26
+ as?: React.ElementType | undefined;
27
+ href?: string | undefined;
28
+ target?: string | undefined;
29
+ rel?: string | undefined;
22
30
  } & React.RefAttributes<HTMLButtonElement>, "ref"> & import("../../hoc/withTokens").WithTokensProps & React.RefAttributes<HTMLButtonElement>>;
@@ -11,16 +11,17 @@ import styles from './Button.module.scss.js';
11
11
  /**
12
12
  * @deprecated Use the `Action` component instead
13
13
  */
14
- const ButtonBase = forwardRef(({ className, children, iconSlot, variant = 'default', size = 'base', dropdown = false, loading = false, contentStyles, ...otherProps }, ref) => {
14
+ const ButtonBase = forwardRef(({ className, children, iconSlot, variant = 'default', size = 'base', dropdown = false, loading = false, contentStyles, as, ...otherProps }, ref) => {
15
+ const Element = (as || 'button');
15
16
  if (variant === 'unstyled') {
16
- return (React__default.createElement("button", { ref: ref, className: buildClassnames([styles['unstyled-variant'], className]), ...otherProps }, children));
17
+ return (React__default.createElement(Element, { ref: ref, className: buildClassnames([styles['unstyled-variant'], className]), ...otherProps }, children));
17
18
  }
18
19
  const hasChildren = children !== undefined;
19
20
  const hasIcon = !!iconSlot;
20
21
  const iconSize = hasChildren || size === 'sm' ? 'var(--sizes-base)' : 'var(--sizes-md)';
21
22
  const mainContentStyle = { ...assignCssVars({ buttonIconSize: iconSize }), ...contentStyles };
22
23
  if (variant === 'link') {
23
- return (React__default.createElement("button", { ref: ref, className: buildClassnames([styles['link-variant'], hasChildren && styles.hasText, className]), ...otherProps },
24
+ return (React__default.createElement(Element, { ref: ref, className: buildClassnames([styles['link-variant'], hasChildren && styles.hasText, className]), ...otherProps },
24
25
  (hasChildren || hasIcon) && (React__default.createElement("span", { className: buildClassnames([styles.mainContent, loading && styles.loading]), style: mainContentStyle },
25
26
  iconSlot && iconSlot,
26
27
  children !== undefined && children,
@@ -28,7 +29,7 @@ const ButtonBase = forwardRef(({ className, children, iconSlot, variant = 'defau
28
29
  loading && (React__default.createElement("div", { className: styles.loadingWrapper },
29
30
  React__default.createElement(Loader, null)))));
30
31
  }
31
- return (React__default.createElement("button", { ref: ref, className: buildClassnames([
32
+ return (React__default.createElement(Element, { ref: ref, className: buildClassnames([
32
33
  styles.base,
33
34
  styles[`${variant}-variant`],
34
35
  styles[`${size}-size`],
@@ -1 +1 @@
1
- {"version":3,"file":"Button.js","sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\n\nimport { ButtonProps } from './types';\nimport { Loader } from '../Loader';\nimport { withTokens } from '../../hoc/withTokens';\nimport { buildClassnames, assignCssVars } from '../../utils';\nimport { DropdownIcon } from '../../icons';\n\nimport styles from './Button.module.scss';\n\n/* eslint-disable react/button-has-type */\n\n/**\n * @deprecated Use the `Action` component instead\n */\nexport const ButtonBase = forwardRef<HTMLButtonElement, ButtonProps>(\n (\n {\n className,\n children,\n iconSlot,\n variant = 'default',\n size = 'base',\n dropdown = false,\n loading = false,\n contentStyles,\n ...otherProps\n }: ButtonProps,\n ref,\n ) => {\n if (variant === 'unstyled') {\n return (\n <button\n ref={ref}\n className={buildClassnames([styles['unstyled-variant'], className])}\n {...otherProps}\n >\n {children}\n </button>\n );\n }\n\n const hasChildren = children !== undefined;\n const hasIcon = !!iconSlot;\n const iconSize = hasChildren || size === 'sm' ? 'var(--sizes-base)' : 'var(--sizes-md)';\n const mainContentStyle = { ...assignCssVars({ buttonIconSize: iconSize }), ...contentStyles };\n\n if (variant === 'link') {\n return (\n <button\n ref={ref}\n className={buildClassnames([styles['link-variant'], hasChildren && styles.hasText, className])}\n {...otherProps}\n >\n {(hasChildren || hasIcon) && (\n <span className={buildClassnames([styles.mainContent, loading && styles.loading])} style={mainContentStyle}>\n {iconSlot && iconSlot}\n {children !== undefined && children}\n {dropdown && <DropdownIcon />}\n </span>\n )}\n\n {loading && (\n <div className={styles.loadingWrapper}>\n <Loader />\n </div>\n )}\n </button>\n );\n }\n\n return (\n <button\n ref={ref}\n className={buildClassnames([\n styles.base,\n styles[`${variant}-variant`],\n styles[`${size}-size`],\n hasIcon && styles.hasIcon,\n hasChildren && styles.hasText,\n dropdown && styles.hasDropdown,\n className,\n ])}\n {...otherProps}\n >\n {(hasChildren || hasIcon) && (\n <span className={buildClassnames([styles.mainContent, loading && styles.loading])} style={mainContentStyle}>\n {iconSlot && iconSlot}\n {children !== undefined && children}\n {dropdown && <DropdownIcon />}\n </span>\n )}\n\n {loading && (\n <div className={styles.loadingWrapper}>\n <Loader />\n </div>\n )}\n </button>\n );\n },\n);\n\nexport const Button = withTokens(ButtonBase);\n"],"names":["React"],"mappings":"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"}
1
+ {"version":3,"file":"Button.js","sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["import React, { forwardRef, ElementType } from 'react';\n\nimport { ButtonProps } from './types';\nimport { Loader } from '../Loader';\nimport { withTokens } from '../../hoc/withTokens';\nimport { buildClassnames, assignCssVars } from '../../utils';\nimport { DropdownIcon } from '../../icons';\n\nimport styles from './Button.module.scss';\n\n/* eslint-disable react/button-has-type */\n\n/**\n * @deprecated Use the `Action` component instead\n */\nexport const ButtonBase = forwardRef<HTMLButtonElement, ButtonProps>(\n (\n {\n className,\n children,\n iconSlot,\n variant = 'default',\n size = 'base',\n dropdown = false,\n loading = false,\n contentStyles,\n as,\n ...otherProps\n }: ButtonProps,\n ref,\n ) => {\n const Element = (as || 'button') as ElementType;\n\n if (variant === 'unstyled') {\n return (\n <Element\n ref={ref}\n className={buildClassnames([styles['unstyled-variant'], className])}\n {...otherProps}\n >\n {children}\n </Element>\n );\n }\n\n const hasChildren = children !== undefined;\n const hasIcon = !!iconSlot;\n const iconSize = hasChildren || size === 'sm' ? 'var(--sizes-base)' : 'var(--sizes-md)';\n const mainContentStyle = { ...assignCssVars({ buttonIconSize: iconSize }), ...contentStyles };\n\n if (variant === 'link') {\n return (\n <Element\n ref={ref}\n className={buildClassnames([styles['link-variant'], hasChildren && styles.hasText, className])}\n {...otherProps}\n >\n {(hasChildren || hasIcon) && (\n <span className={buildClassnames([styles.mainContent, loading && styles.loading])} style={mainContentStyle}>\n {iconSlot && iconSlot}\n {children !== undefined && children}\n {dropdown && <DropdownIcon />}\n </span>\n )}\n\n {loading && (\n <div className={styles.loadingWrapper}>\n <Loader />\n </div>\n )}\n </Element>\n );\n }\n\n return (\n <Element\n ref={ref}\n className={buildClassnames([\n styles.base,\n styles[`${variant}-variant`],\n styles[`${size}-size`],\n hasIcon && styles.hasIcon,\n hasChildren && styles.hasText,\n dropdown && styles.hasDropdown,\n className,\n ])}\n {...otherProps}\n >\n {(hasChildren || hasIcon) && (\n <span className={buildClassnames([styles.mainContent, loading && styles.loading])} style={mainContentStyle}>\n {iconSlot && iconSlot}\n {children !== undefined && children}\n {dropdown && <DropdownIcon />}\n </span>\n )}\n\n {loading && (\n <div className={styles.loadingWrapper}>\n <Loader />\n </div>\n )}\n </Element>\n );\n },\n);\n\nexport const Button = withTokens(ButtonBase);\n"],"names":["React"],"mappings":"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"}
@@ -1,4 +1,4 @@
1
- import { ReactNode, ButtonHTMLAttributes, ReactElement, CSSProperties } from 'react';
1
+ import { ReactNode, ButtonHTMLAttributes, ReactElement, CSSProperties, ElementType } from 'react';
2
2
  import { WithTokensProps } from '../../hoc/withTokens/withTokens';
3
3
  export type ButtonVariant = 'default' | 'destructive' | 'primary' | 'primaryDestructive' | 'flat' | 'link' | 'unstyled';
4
4
  /**
@@ -18,4 +18,12 @@ export type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & WithTokensPr
18
18
  loading?: boolean;
19
19
  /** Additional styles for mainContent */
20
20
  contentStyles?: CSSProperties;
21
+ /** Render as a different element type (e.g. 'a' for links) */
22
+ as?: ElementType;
23
+ /** URL when rendered as an anchor (use with as="a") */
24
+ href?: string;
25
+ /** Link target (use with as="a") */
26
+ target?: string;
27
+ /** Link rel attribute (use with as="a") */
28
+ rel?: string;
21
29
  };
@@ -14,6 +14,10 @@ export declare const PaginationButton: import("styled-components").StyledCompone
14
14
  dropdown?: boolean | undefined;
15
15
  loading?: boolean | undefined;
16
16
  contentStyles?: import("react").CSSProperties | undefined;
17
+ as?: import("react").ElementType | undefined;
18
+ href?: string | undefined;
19
+ target?: string | undefined;
20
+ rel?: string | undefined;
17
21
  } & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("../../hoc/withTokens").WithTokensProps & import("react").RefAttributes<HTMLButtonElement>>, any, {}, never>;
18
22
  export declare const PageInput: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Omit<{
19
23
  rel?: string | undefined;
@@ -9,4 +9,8 @@ export declare const ButtonSC: import("styled-components").StyledComponent<impor
9
9
  dropdown?: boolean | undefined;
10
10
  loading?: boolean | undefined;
11
11
  contentStyles?: import("react").CSSProperties | undefined;
12
+ as?: import("react").ElementType | undefined;
13
+ href?: string | undefined;
14
+ target?: string | undefined;
15
+ rel?: string | undefined;
12
16
  } & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("../../hoc/withTokens").WithTokensProps & import("react").RefAttributes<HTMLButtonElement>>, any, {}, never>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@veeqo/ui",
3
- "version": "14.5.0-beta-1",
3
+ "version": "14.5.0-beta-3",
4
4
  "description": "New optimised component library for Veeqo.",
5
5
  "author": "Robert Wealthall",
6
6
  "license": "ISC",