@redsift/design-system 11.9.3 → 11.9.4-muiv5
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.
package/_internal/ButtonLink.js
CHANGED
|
@@ -8,7 +8,7 @@ import { B as ButtonsColorPalette } from './colors.js';
|
|
|
8
8
|
import { C as ConditionalWrapper } from './ConditionalWrapper.js';
|
|
9
9
|
import { a as Icon } from './Icon2.js';
|
|
10
10
|
|
|
11
|
-
const _excluded = ["as", "children", "className", "color", "href", "isActive", "isDisabled", "isHovered", "leftIcon", "leftIconProps", "rightIcon", "rightIconProps", "target", "theme", "variant"];
|
|
11
|
+
const _excluded = ["as", "children", "className", "color", "href", "isActive", "isDisabled", "isHovered", "leftIcon", "leftIconProps", "onClick", "rightIcon", "rightIconProps", "target", "theme", "variant"];
|
|
12
12
|
const COMPONENT_NAME = 'ButtonLink';
|
|
13
13
|
const CLASSNAME = 'redsift-button-link';
|
|
14
14
|
|
|
@@ -31,6 +31,7 @@ const ButtonLink = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
31
31
|
isHovered,
|
|
32
32
|
leftIcon,
|
|
33
33
|
leftIconProps,
|
|
34
|
+
onClick,
|
|
34
35
|
rightIcon,
|
|
35
36
|
rightIconProps,
|
|
36
37
|
target,
|
|
@@ -65,6 +66,7 @@ const ButtonLink = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
65
66
|
$variant: variant,
|
|
66
67
|
className: classNames(ButtonLink.className, className),
|
|
67
68
|
href: !isDisabled ? href : undefined,
|
|
69
|
+
onClick: !isDisabled ? onClick : undefined,
|
|
68
70
|
ref: ref,
|
|
69
71
|
target: target
|
|
70
72
|
}), leftIcon ? /*#__PURE__*/React__default.createElement(Icon, _extends({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ButtonLink.js","sources":["../../src/components/button-link/ButtonLink.tsx"],"sourcesContent":["import React, { forwardRef, RefObject } from 'react';\nimport classNames from 'classnames';\nimport { Comp, ButtonsColorPalette } from '../../types';\nimport { Icon } from '../icon';\nimport { ButtonVariant, StyledButton } from '../button';\nimport { ButtonLinkProps } from './types';\nimport { useTheme } from '../theme';\nimport { ConditionalWrapper } from '../conditional-wrapper';\nimport { StyledGradientBorder } from '../gradient-border';\n\nconst COMPONENT_NAME = 'ButtonLink';\nconst CLASSNAME = 'redsift-button-link';\n\n/**\n * The ButtonLink is a semantic link that looks like a button.\n *\n * For a semantic button that looks like a button, please use the Button component.\n * For a semantic link that looks like a link, please use the Link component.\n * For a semantic button that looks like a link, please use the LinkButton component.\n */\nexport const ButtonLink: Comp<ButtonLinkProps, HTMLAnchorElement> = forwardRef((props, ref) => {\n const {\n as,\n children,\n className,\n color: propsColor,\n href,\n isActive,\n isDisabled,\n isHovered,\n leftIcon,\n leftIconProps,\n rightIcon,\n rightIconProps,\n target,\n theme: propsTheme,\n variant: propsVariant,\n ...forwardedProps\n } = props;\n\n const theme = useTheme(propsTheme);\n const color = Object.values(ButtonsColorPalette).includes(propsColor!) ? propsColor : 'primary';\n const variant = Object.values(ButtonVariant).includes(propsVariant!) ? propsVariant : 'primary';\n const isGradient = color === ButtonsColorPalette.radar;\n\n return (\n <ConditionalWrapper\n condition={isGradient && variant === ButtonVariant.secondary}\n wrapper={(children) => (\n <StyledGradientBorder\n $color={color}\n $isActive={isActive}\n $isDisabled={isDisabled}\n $isHovered={isHovered}\n $theme={theme}\n >\n {children}\n </StyledGradientBorder>\n )}\n >\n <StyledButton\n as={(as || 'a') as any}\n role=\"link\"\n tabIndex={!isDisabled ? 0 : undefined}\n {...forwardedProps}\n $color={color}\n $isActive={isActive}\n $isDisabled={isDisabled}\n $isHovered={isHovered}\n $isGradient={isGradient}\n $theme={theme}\n $variant={variant}\n className={classNames(ButtonLink.className, className)}\n href={!isDisabled ? href : undefined}\n ref={ref as RefObject<HTMLAnchorElement>}\n target={target}\n >\n {leftIcon ? <Icon icon={leftIcon} aria-hidden=\"true\" className=\"left\" {...leftIconProps} /> : null}\n <span>{children}</span>\n {rightIcon ? <Icon icon={rightIcon} aria-hidden=\"true\" className=\"right\" {...rightIconProps} /> : null}\n </StyledButton>\n </ConditionalWrapper>\n );\n});\nButtonLink.className = CLASSNAME;\nButtonLink.displayName = COMPONENT_NAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","ButtonLink","forwardRef","props","ref","as","children","className","color","propsColor","href","isActive","isDisabled","isHovered","leftIcon","leftIconProps","rightIcon","rightIconProps","target","theme","propsTheme","variant","propsVariant","forwardedProps","_objectWithoutProperties","_excluded","useTheme","Object","values","ButtonsColorPalette","includes","ButtonVariant","isGradient","radar","React","createElement","ConditionalWrapper","condition","secondary","wrapper","StyledGradientBorder","$color","$isActive","$isDisabled","$isHovered","$theme","StyledButton","_extends","role","tabIndex","undefined","$isGradient","$variant","classNames","Icon","icon","displayName"],"mappings":";;;;;;;;;;;AAUA,MAAMA,cAAc,GAAG,YAAY,CAAA;AACnC,MAAMC,SAAS,GAAG,qBAAqB,CAAA;;AAEvC;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMC,UAAoD,gBAAGC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAK;EAC7F,MAAM;MACJC,EAAE;MACFC,QAAQ;MACRC,SAAS;AACTC,MAAAA,KAAK,EAAEC,UAAU;MACjBC,IAAI;MACJC,QAAQ;MACRC,UAAU;MACVC,SAAS;MACTC,QAAQ;MACRC,aAAa;MACbC,SAAS;MACTC,cAAc;MACdC,MAAM;AACNC,MAAAA,KAAK,EAAEC,UAAU;AACjBC,MAAAA,OAAO,EAAEC,YAAAA;AAEX,KAAC,
|
|
1
|
+
{"version":3,"file":"ButtonLink.js","sources":["../../src/components/button-link/ButtonLink.tsx"],"sourcesContent":["import React, { forwardRef, RefObject } from 'react';\nimport classNames from 'classnames';\nimport { Comp, ButtonsColorPalette } from '../../types';\nimport { Icon } from '../icon';\nimport { ButtonVariant, StyledButton } from '../button';\nimport { ButtonLinkProps } from './types';\nimport { useTheme } from '../theme';\nimport { ConditionalWrapper } from '../conditional-wrapper';\nimport { StyledGradientBorder } from '../gradient-border';\n\nconst COMPONENT_NAME = 'ButtonLink';\nconst CLASSNAME = 'redsift-button-link';\n\n/**\n * The ButtonLink is a semantic link that looks like a button.\n *\n * For a semantic button that looks like a button, please use the Button component.\n * For a semantic link that looks like a link, please use the Link component.\n * For a semantic button that looks like a link, please use the LinkButton component.\n */\nexport const ButtonLink: Comp<ButtonLinkProps, HTMLAnchorElement> = forwardRef((props, ref) => {\n const {\n as,\n children,\n className,\n color: propsColor,\n href,\n isActive,\n isDisabled,\n isHovered,\n leftIcon,\n leftIconProps,\n onClick,\n rightIcon,\n rightIconProps,\n target,\n theme: propsTheme,\n variant: propsVariant,\n ...forwardedProps\n } = props;\n\n const theme = useTheme(propsTheme);\n const color = Object.values(ButtonsColorPalette).includes(propsColor!) ? propsColor : 'primary';\n const variant = Object.values(ButtonVariant).includes(propsVariant!) ? propsVariant : 'primary';\n const isGradient = color === ButtonsColorPalette.radar;\n\n return (\n <ConditionalWrapper\n condition={isGradient && variant === ButtonVariant.secondary}\n wrapper={(children) => (\n <StyledGradientBorder\n $color={color}\n $isActive={isActive}\n $isDisabled={isDisabled}\n $isHovered={isHovered}\n $theme={theme}\n >\n {children}\n </StyledGradientBorder>\n )}\n >\n <StyledButton\n as={(as || 'a') as any}\n role=\"link\"\n tabIndex={!isDisabled ? 0 : undefined}\n {...forwardedProps}\n $color={color}\n $isActive={isActive}\n $isDisabled={isDisabled}\n $isHovered={isHovered}\n $isGradient={isGradient}\n $theme={theme}\n $variant={variant}\n className={classNames(ButtonLink.className, className)}\n href={!isDisabled ? href : undefined}\n onClick={!isDisabled ? onClick : undefined}\n ref={ref as RefObject<HTMLAnchorElement>}\n target={target}\n >\n {leftIcon ? <Icon icon={leftIcon} aria-hidden=\"true\" className=\"left\" {...leftIconProps} /> : null}\n <span>{children}</span>\n {rightIcon ? <Icon icon={rightIcon} aria-hidden=\"true\" className=\"right\" {...rightIconProps} /> : null}\n </StyledButton>\n </ConditionalWrapper>\n );\n});\nButtonLink.className = CLASSNAME;\nButtonLink.displayName = COMPONENT_NAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","ButtonLink","forwardRef","props","ref","as","children","className","color","propsColor","href","isActive","isDisabled","isHovered","leftIcon","leftIconProps","onClick","rightIcon","rightIconProps","target","theme","propsTheme","variant","propsVariant","forwardedProps","_objectWithoutProperties","_excluded","useTheme","Object","values","ButtonsColorPalette","includes","ButtonVariant","isGradient","radar","React","createElement","ConditionalWrapper","condition","secondary","wrapper","StyledGradientBorder","$color","$isActive","$isDisabled","$isHovered","$theme","StyledButton","_extends","role","tabIndex","undefined","$isGradient","$variant","classNames","Icon","icon","displayName"],"mappings":"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"}
|
|
@@ -8,7 +8,7 @@ import { B as ButtonsColorPalette } from './colors.js';
|
|
|
8
8
|
import { C as ConditionalWrapper } from './ConditionalWrapper.js';
|
|
9
9
|
import { a as Icon } from './Icon2.js';
|
|
10
10
|
|
|
11
|
-
const _excluded = ["as", "className", "color", "href", "icon", "iconProps", "isActive", "isDisabled", "isHovered", "target", "theme", "variant"];
|
|
11
|
+
const _excluded = ["as", "className", "color", "href", "icon", "iconProps", "isActive", "isDisabled", "isHovered", "onClick", "target", "theme", "variant"];
|
|
12
12
|
const COMPONENT_NAME = 'IconButtonLink';
|
|
13
13
|
const CLASSNAME = 'redsift-icon-button-link';
|
|
14
14
|
|
|
@@ -30,6 +30,7 @@ const IconButtonLink = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
30
30
|
isActive,
|
|
31
31
|
isDisabled,
|
|
32
32
|
isHovered,
|
|
33
|
+
onClick,
|
|
33
34
|
target,
|
|
34
35
|
theme: propsTheme,
|
|
35
36
|
variant: propsVariant
|
|
@@ -62,6 +63,7 @@ const IconButtonLink = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
62
63
|
$variant: variant,
|
|
63
64
|
className: classNames(IconButtonLink.className, className),
|
|
64
65
|
href: !isDisabled ? href : undefined,
|
|
66
|
+
onClick: !isDisabled ? onClick : undefined,
|
|
65
67
|
ref: ref,
|
|
66
68
|
target: target
|
|
67
69
|
}), /*#__PURE__*/React__default.createElement(Icon, _extends({}, iconProps, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IconButtonLink.js","sources":["../../src/components/icon-button-link/IconButtonLink.tsx"],"sourcesContent":["import React, { forwardRef, RefObject } from 'react';\nimport classNames from 'classnames';\nimport { Comp, ButtonsColorPalette } from '../../types';\nimport { Icon } from '../icon';\nimport { IconButtonLinkProps } from './types';\nimport { useTheme } from '../theme';\nimport { ConditionalWrapper } from '../conditional-wrapper';\nimport { StyledGradientBorder } from '../gradient-border';\nimport { StyledIconButton } from '../icon-button/styles';\nimport { IconButtonVariant } from '../icon-button/types';\n\nconst COMPONENT_NAME = 'IconButtonLink';\nconst CLASSNAME = 'redsift-icon-button-link';\n\n/**\n * The IconButtonLink is a semantic link that looks like an icon button.\n *\n * For a semantic button that looks like an icon button, please use the IconButton component.\n * For a semantic link that looks like a link, please use the Link component.\n * For a semantic button that looks like a link, please use the LinkButton component.\n */\nexport const IconButtonLink: Comp<IconButtonLinkProps, HTMLAnchorElement> = forwardRef((props, ref) => {\n const {\n as,\n className,\n color: propsColor,\n href,\n icon,\n iconProps,\n isActive,\n isDisabled,\n isHovered,\n target,\n theme: propsTheme,\n variant: propsVariant,\n ...forwardedProps\n } = props;\n\n const theme = useTheme(propsTheme);\n const color = Object.values(ButtonsColorPalette).includes(propsColor!) ? propsColor : 'primary';\n const variant = Object.values(IconButtonVariant).includes(propsVariant!) ? propsVariant : 'unstyled';\n const isGradient = color === ButtonsColorPalette.radar;\n\n return (\n <ConditionalWrapper\n condition={isGradient && variant === IconButtonVariant.secondary}\n wrapper={(children) => (\n <StyledGradientBorder\n $color={color}\n $isActive={isActive}\n $isDisabled={isDisabled}\n $isHovered={isHovered}\n $theme={theme}\n >\n {children}\n </StyledGradientBorder>\n )}\n >\n <StyledIconButton\n as={(as || 'a') as any}\n role=\"link\"\n tabIndex={!isDisabled ? 0 : undefined}\n {...forwardedProps}\n $color={color}\n $isActive={isActive}\n $isDisabled={isDisabled}\n $isGradient={isGradient}\n $isHovered={isHovered}\n $theme={theme}\n $variant={variant}\n className={classNames(IconButtonLink.className, className)}\n href={!isDisabled ? href : undefined}\n ref={ref as RefObject<HTMLAnchorElement>}\n target={target}\n >\n <Icon {...iconProps} icon={icon} />\n </StyledIconButton>\n </ConditionalWrapper>\n );\n});\nIconButtonLink.className = CLASSNAME;\nIconButtonLink.displayName = COMPONENT_NAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","IconButtonLink","forwardRef","props","ref","as","className","color","propsColor","href","icon","iconProps","isActive","isDisabled","isHovered","target","theme","propsTheme","variant","propsVariant","forwardedProps","_objectWithoutProperties","_excluded","useTheme","Object","values","ButtonsColorPalette","includes","IconButtonVariant","isGradient","radar","React","createElement","ConditionalWrapper","condition","secondary","wrapper","children","StyledGradientBorder","$color","$isActive","$isDisabled","$isHovered","$theme","StyledIconButton","_extends","role","tabIndex","undefined","$isGradient","$variant","classNames","Icon","displayName"],"mappings":";;;;;;;;;;;AAWA,MAAMA,cAAc,GAAG,gBAAgB,CAAA;AACvC,MAAMC,SAAS,GAAG,0BAA0B,CAAA;;AAE5C;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMC,cAA4D,gBAAGC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAK;EACrG,MAAM;MACJC,EAAE;MACFC,SAAS;AACTC,MAAAA,KAAK,EAAEC,UAAU;MACjBC,IAAI;MACJC,IAAI;MACJC,SAAS;MACTC,QAAQ;MACRC,UAAU;MACVC,SAAS;MACTC,MAAM;AACNC,MAAAA,KAAK,EAAEC,UAAU;AACjBC,MAAAA,OAAO,EAAEC,YAAAA;AAEX,KAAC,
|
|
1
|
+
{"version":3,"file":"IconButtonLink.js","sources":["../../src/components/icon-button-link/IconButtonLink.tsx"],"sourcesContent":["import React, { forwardRef, RefObject } from 'react';\nimport classNames from 'classnames';\nimport { Comp, ButtonsColorPalette } from '../../types';\nimport { Icon } from '../icon';\nimport { IconButtonLinkProps } from './types';\nimport { useTheme } from '../theme';\nimport { ConditionalWrapper } from '../conditional-wrapper';\nimport { StyledGradientBorder } from '../gradient-border';\nimport { StyledIconButton } from '../icon-button/styles';\nimport { IconButtonVariant } from '../icon-button/types';\n\nconst COMPONENT_NAME = 'IconButtonLink';\nconst CLASSNAME = 'redsift-icon-button-link';\n\n/**\n * The IconButtonLink is a semantic link that looks like an icon button.\n *\n * For a semantic button that looks like an icon button, please use the IconButton component.\n * For a semantic link that looks like a link, please use the Link component.\n * For a semantic button that looks like a link, please use the LinkButton component.\n */\nexport const IconButtonLink: Comp<IconButtonLinkProps, HTMLAnchorElement> = forwardRef((props, ref) => {\n const {\n as,\n className,\n color: propsColor,\n href,\n icon,\n iconProps,\n isActive,\n isDisabled,\n isHovered,\n onClick,\n target,\n theme: propsTheme,\n variant: propsVariant,\n ...forwardedProps\n } = props;\n\n const theme = useTheme(propsTheme);\n const color = Object.values(ButtonsColorPalette).includes(propsColor!) ? propsColor : 'primary';\n const variant = Object.values(IconButtonVariant).includes(propsVariant!) ? propsVariant : 'unstyled';\n const isGradient = color === ButtonsColorPalette.radar;\n\n return (\n <ConditionalWrapper\n condition={isGradient && variant === IconButtonVariant.secondary}\n wrapper={(children) => (\n <StyledGradientBorder\n $color={color}\n $isActive={isActive}\n $isDisabled={isDisabled}\n $isHovered={isHovered}\n $theme={theme}\n >\n {children}\n </StyledGradientBorder>\n )}\n >\n <StyledIconButton\n as={(as || 'a') as any}\n role=\"link\"\n tabIndex={!isDisabled ? 0 : undefined}\n {...forwardedProps}\n $color={color}\n $isActive={isActive}\n $isDisabled={isDisabled}\n $isGradient={isGradient}\n $isHovered={isHovered}\n $theme={theme}\n $variant={variant}\n className={classNames(IconButtonLink.className, className)}\n href={!isDisabled ? href : undefined}\n onClick={!isDisabled ? onClick : undefined}\n ref={ref as RefObject<HTMLAnchorElement>}\n target={target}\n >\n <Icon {...iconProps} icon={icon} />\n </StyledIconButton>\n </ConditionalWrapper>\n );\n});\nIconButtonLink.className = CLASSNAME;\nIconButtonLink.displayName = COMPONENT_NAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","IconButtonLink","forwardRef","props","ref","as","className","color","propsColor","href","icon","iconProps","isActive","isDisabled","isHovered","onClick","target","theme","propsTheme","variant","propsVariant","forwardedProps","_objectWithoutProperties","_excluded","useTheme","Object","values","ButtonsColorPalette","includes","IconButtonVariant","isGradient","radar","React","createElement","ConditionalWrapper","condition","secondary","wrapper","children","StyledGradientBorder","$color","$isActive","$isDisabled","$isHovered","$theme","StyledIconButton","_extends","role","tabIndex","undefined","$isGradient","$variant","classNames","Icon","displayName"],"mappings":"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"}
|
package/_internal/Link2.js
CHANGED
|
@@ -5,7 +5,7 @@ import { S as StyledLink } from './styles3.js';
|
|
|
5
5
|
import { u as useTheme } from './useTheme.js';
|
|
6
6
|
import { a as Icon } from './Icon2.js';
|
|
7
7
|
|
|
8
|
-
const _excluded = ["as", "children", "className", "color", "href", "isDisabled", "leftIcon", "leftIconProps", "rightIcon", "rightIconProps", "theme"];
|
|
8
|
+
const _excluded = ["as", "children", "className", "color", "href", "isDisabled", "leftIcon", "leftIconProps", "onClick", "rightIcon", "rightIconProps", "theme"];
|
|
9
9
|
const COMPONENT_NAME = 'Link';
|
|
10
10
|
const CLASSNAME = 'redsift-link';
|
|
11
11
|
|
|
@@ -27,6 +27,7 @@ const Link = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
27
27
|
isDisabled,
|
|
28
28
|
leftIcon,
|
|
29
29
|
leftIconProps,
|
|
30
|
+
onClick,
|
|
30
31
|
rightIcon,
|
|
31
32
|
rightIconProps,
|
|
32
33
|
theme: propsTheme
|
|
@@ -45,6 +46,7 @@ const Link = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
45
46
|
$hasIcons: leftIcon || rightIcon,
|
|
46
47
|
className: classNames(Link.className, className),
|
|
47
48
|
href: !isDisabled ? href : undefined,
|
|
49
|
+
onClick: !isDisabled ? onClick : undefined,
|
|
48
50
|
ref: ref
|
|
49
51
|
}), leftIcon || rightIcon ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, leftIcon ? /*#__PURE__*/React__default.createElement(Icon, _extends({
|
|
50
52
|
icon: leftIcon,
|
package/_internal/Link2.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Link2.js","sources":["../../src/components/link/Link.tsx"],"sourcesContent":["import React, { forwardRef, RefObject } from 'react';\nimport classNames from 'classnames';\nimport { Comp } from '../../types';\nimport { StyledLink } from './styles';\nimport { LinkProps } from './types';\nimport { useTheme } from '../theme';\nimport { Icon } from '../icon';\n\nconst COMPONENT_NAME = 'Link';\nconst CLASSNAME = 'redsift-link';\n\n/**\n * The Link is a semantic link that looks like a link.\n * Shoud be used for internal and external navigation only.\n *\n * For a semantic link that looks like a button, please use the ButtonLink component.\n * For a semantic button that looks like a button, please use the Button component.\n * For a semantic button that looks like a link, please use the LinkButton component.\n */\nexport const Link: Comp<LinkProps, HTMLAnchorElement> = forwardRef((props, ref) => {\n const {\n as,\n children,\n className,\n color = 'primary',\n href,\n isDisabled,\n leftIcon,\n leftIconProps,\n rightIcon,\n rightIconProps,\n theme: propsTheme,\n ...forwardedProps\n } = props;\n\n const theme = useTheme(propsTheme);\n\n return (\n <StyledLink\n as={as as any}\n aria-disabled={isDisabled}\n role=\"link\"\n tabIndex={!isDisabled ? 0 : undefined}\n {...forwardedProps}\n $color={color}\n $isDisabled={isDisabled}\n $theme={theme}\n $hasIcons={leftIcon || rightIcon}\n className={classNames(Link.className, className)}\n href={!isDisabled ? href : undefined}\n ref={ref as RefObject<HTMLAnchorElement>}\n >\n {leftIcon || rightIcon ? (\n <>\n {leftIcon ? (\n <Icon icon={leftIcon} aria-hidden=\"true\" className=\"left\" size=\"xsmall\" {...leftIconProps} />\n ) : null}\n <span className=\"text\">{children}</span>\n {rightIcon ? (\n <Icon icon={rightIcon} aria-hidden=\"true\" className=\"right\" size=\"xsmall\" {...rightIconProps} />\n ) : null}\n </>\n ) : (\n children\n )}\n </StyledLink>\n );\n});\nLink.className = CLASSNAME;\nLink.displayName = COMPONENT_NAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","Link","forwardRef","props","ref","as","children","className","color","href","isDisabled","leftIcon","leftIconProps","rightIcon","rightIconProps","theme","propsTheme","forwardedProps","_objectWithoutProperties","_excluded","useTheme","React","createElement","StyledLink","_extends","role","tabIndex","undefined","$color","$isDisabled","$theme","$hasIcons","classNames","Fragment","Icon","icon","size","displayName"],"mappings":";;;;;;;;AAQA,MAAMA,cAAc,GAAG,MAAM,CAAA;AAC7B,MAAMC,SAAS,GAAG,cAAc,CAAA;;AAEhC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMC,IAAwC,gBAAGC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAK;EACjF,MAAM;MACJC,EAAE;MACFC,QAAQ;MACRC,SAAS;AACTC,MAAAA,KAAK,GAAG,SAAS;MACjBC,IAAI;MACJC,UAAU;MACVC,QAAQ;MACRC,aAAa;MACbC,SAAS;MACTC,cAAc;AACdC,MAAAA,KAAK,EAAEC,UAAAA;AAET,KAAC,
|
|
1
|
+
{"version":3,"file":"Link2.js","sources":["../../src/components/link/Link.tsx"],"sourcesContent":["import React, { forwardRef, RefObject } from 'react';\nimport classNames from 'classnames';\nimport { Comp } from '../../types';\nimport { StyledLink } from './styles';\nimport { LinkProps } from './types';\nimport { useTheme } from '../theme';\nimport { Icon } from '../icon';\n\nconst COMPONENT_NAME = 'Link';\nconst CLASSNAME = 'redsift-link';\n\n/**\n * The Link is a semantic link that looks like a link.\n * Shoud be used for internal and external navigation only.\n *\n * For a semantic link that looks like a button, please use the ButtonLink component.\n * For a semantic button that looks like a button, please use the Button component.\n * For a semantic button that looks like a link, please use the LinkButton component.\n */\nexport const Link: Comp<LinkProps, HTMLAnchorElement> = forwardRef((props, ref) => {\n const {\n as,\n children,\n className,\n color = 'primary',\n href,\n isDisabled,\n leftIcon,\n leftIconProps,\n onClick,\n rightIcon,\n rightIconProps,\n theme: propsTheme,\n ...forwardedProps\n } = props;\n\n const theme = useTheme(propsTheme);\n\n return (\n <StyledLink\n as={as as any}\n aria-disabled={isDisabled}\n role=\"link\"\n tabIndex={!isDisabled ? 0 : undefined}\n {...forwardedProps}\n $color={color}\n $isDisabled={isDisabled}\n $theme={theme}\n $hasIcons={leftIcon || rightIcon}\n className={classNames(Link.className, className)}\n href={!isDisabled ? href : undefined}\n onClick={!isDisabled ? onClick : undefined}\n ref={ref as RefObject<HTMLAnchorElement>}\n >\n {leftIcon || rightIcon ? (\n <>\n {leftIcon ? (\n <Icon icon={leftIcon} aria-hidden=\"true\" className=\"left\" size=\"xsmall\" {...leftIconProps} />\n ) : null}\n <span className=\"text\">{children}</span>\n {rightIcon ? (\n <Icon icon={rightIcon} aria-hidden=\"true\" className=\"right\" size=\"xsmall\" {...rightIconProps} />\n ) : null}\n </>\n ) : (\n children\n )}\n </StyledLink>\n );\n});\nLink.className = CLASSNAME;\nLink.displayName = COMPONENT_NAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","Link","forwardRef","props","ref","as","children","className","color","href","isDisabled","leftIcon","leftIconProps","onClick","rightIcon","rightIconProps","theme","propsTheme","forwardedProps","_objectWithoutProperties","_excluded","useTheme","React","createElement","StyledLink","_extends","role","tabIndex","undefined","$color","$isDisabled","$theme","$hasIcons","classNames","Fragment","Icon","icon","size","displayName"],"mappings":";;;;;;;;AAQA,MAAMA,cAAc,GAAG,MAAM,CAAA;AAC7B,MAAMC,SAAS,GAAG,cAAc,CAAA;;AAEhC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMC,IAAwC,gBAAGC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAK;EACjF,MAAM;MACJC,EAAE;MACFC,QAAQ;MACRC,SAAS;AACTC,MAAAA,KAAK,GAAG,SAAS;MACjBC,IAAI;MACJC,UAAU;MACVC,QAAQ;MACRC,aAAa;MACbC,OAAO;MACPC,SAAS;MACTC,cAAc;AACdC,MAAAA,KAAK,EAAEC,UAAAA;AAET,KAAC,GAAGd,KAAK;AADJe,IAAAA,cAAc,GAAAC,wBAAA,CACfhB,KAAK,EAAAiB,SAAA,CAAA,CAAA;AAET,EAAA,MAAMJ,KAAK,GAAGK,QAAQ,CAACJ,UAAU,CAAC,CAAA;AAElC,EAAA,oBACEK,cAAA,CAAAC,aAAA,CAACC,UAAU,EAAAC,QAAA,CAAA;AACTpB,IAAAA,EAAE,EAAEA,EAAU;AACd,IAAA,eAAA,EAAeK,UAAW;AAC1BgB,IAAAA,IAAI,EAAC,MAAM;AACXC,IAAAA,QAAQ,EAAE,CAACjB,UAAU,GAAG,CAAC,GAAGkB,SAAAA;AAAU,GAAA,EAClCV,cAAc,EAAA;AAClBW,IAAAA,MAAM,EAAErB,KAAM;AACdsB,IAAAA,WAAW,EAAEpB,UAAW;AACxBqB,IAAAA,MAAM,EAAEf,KAAM;IACdgB,SAAS,EAAErB,QAAQ,IAAIG,SAAU;IACjCP,SAAS,EAAE0B,UAAU,CAAChC,IAAI,CAACM,SAAS,EAAEA,SAAS,CAAE;AACjDE,IAAAA,IAAI,EAAE,CAACC,UAAU,GAAGD,IAAI,GAAGmB,SAAU;AACrCf,IAAAA,OAAO,EAAE,CAACH,UAAU,GAAGG,OAAO,GAAGe,SAAU;AAC3CxB,IAAAA,GAAG,EAAEA,GAAAA;GAEJO,CAAAA,EAAAA,QAAQ,IAAIG,SAAS,gBACpBQ,cAAA,CAAAC,aAAA,CAAAD,cAAA,CAAAY,QAAA,EACGvB,IAAAA,EAAAA,QAAQ,gBACPW,cAAA,CAAAC,aAAA,CAACY,IAAI,EAAAV,QAAA,CAAA;AAACW,IAAAA,IAAI,EAAEzB,QAAS;AAAC,IAAA,aAAA,EAAY,MAAM;AAACJ,IAAAA,SAAS,EAAC,MAAM;AAAC8B,IAAAA,IAAI,EAAC,QAAA;GAAazB,EAAAA,aAAa,CAAG,CAAC,GAC3F,IAAI,eACRU,cAAA,CAAAC,aAAA,CAAA,MAAA,EAAA;AAAMhB,IAAAA,SAAS,EAAC,MAAA;GAAQD,EAAAA,QAAe,CAAC,EACvCQ,SAAS,gBACRQ,cAAA,CAAAC,aAAA,CAACY,IAAI,EAAAV,QAAA,CAAA;AAACW,IAAAA,IAAI,EAAEtB,SAAU;AAAC,IAAA,aAAA,EAAY,MAAM;AAACP,IAAAA,SAAS,EAAC,OAAO;AAAC8B,IAAAA,IAAI,EAAC,QAAA;GAAatB,EAAAA,cAAc,CAAG,CAAC,GAC9F,IACJ,CAAC,GAEHT,QAEQ,CAAC,CAAA;AAEjB,CAAC,EAAC;AACFL,IAAI,CAACM,SAAS,GAAGP,SAAS,CAAA;AAC1BC,IAAI,CAACqC,WAAW,GAAGvC,cAAc;;;;"}
|
package/package.json
CHANGED
|
@@ -33,7 +33,7 @@
|
|
|
33
33
|
"version": "version-changelog ../../CHANGELOG.md && changelog-verify ../../CHANGELOG.md && git add ../../CHANGELOG.md"
|
|
34
34
|
},
|
|
35
35
|
"types": "index.d.ts",
|
|
36
|
-
"version": "11.9.
|
|
36
|
+
"version": "11.9.4-muiv5",
|
|
37
37
|
"dependencies": {
|
|
38
38
|
"@react-spring/web": "^9.7.1",
|
|
39
39
|
"classnames": "^2.3.1",
|
|
@@ -95,10 +95,10 @@
|
|
|
95
95
|
"version-changelog": "^3.1.1"
|
|
96
96
|
},
|
|
97
97
|
"peerDependencies": {
|
|
98
|
-
"@redsift/icons": "^11.9.
|
|
98
|
+
"@redsift/icons": "^11.9.4-0",
|
|
99
99
|
"react": ">=17",
|
|
100
100
|
"react-dom": ">=17",
|
|
101
101
|
"styled-components": "^5.3.5"
|
|
102
102
|
},
|
|
103
|
-
"gitHead": "
|
|
103
|
+
"gitHead": "ff23502c427ecd021025efcc9447231000f151ab"
|
|
104
104
|
}
|