@mrshmllw/smores-react 13.1.8 → 13.1.9
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/dist/Link/Link.js +10 -8
- package/dist/Link/Link.js.map +1 -1
- package/package.json +1 -1
package/dist/Link/Link.js
CHANGED
|
@@ -2,7 +2,7 @@ import { darken } from 'polished';
|
|
|
2
2
|
import React from 'react';
|
|
3
3
|
import styled, { css } from 'styled-components';
|
|
4
4
|
import { Icon } from '../Icon';
|
|
5
|
-
import { theme } from '../theme';
|
|
5
|
+
import { theme as oldTheme } from '../theme';
|
|
6
6
|
import { focusOutline } from '../utils/focusOutline';
|
|
7
7
|
export const Link = ({ className, href, onClick, openInNewTab, download, children, typo = 'regular', highlight = false, iconToRender = openInNewTab ? 'new-window' : undefined, isTrailingIcon = true, }) => {
|
|
8
8
|
return (React.createElement(LinkWrapper, { href: href, className: className, onClick: onClick, download: download, "$typo": typo, "$highlight": highlight, ...(openInNewTab && {
|
|
@@ -13,7 +13,7 @@ export const Link = ({ className, href, onClick, openInNewTab, download, childre
|
|
|
13
13
|
children,
|
|
14
14
|
iconToRender && isTrailingIcon && (React.createElement(Icon, { mt: { custom: '3px' }, ml: "8px", render: iconToRender, size: typo === 'regular' ? 14 : 12, color: highlight ? 'lollipop' : 'liquorice' }))));
|
|
15
15
|
};
|
|
16
|
-
const LinkWrapper = styled.a(({ $typo, $highlight }) => css `
|
|
16
|
+
const LinkWrapper = styled.a(({ $typo, $highlight, theme }) => css `
|
|
17
17
|
${focusOutline()}
|
|
18
18
|
display: inline-flex;
|
|
19
19
|
flex-direction: row;
|
|
@@ -30,26 +30,28 @@ const LinkWrapper = styled.a(({ $typo, $highlight }) => css `
|
|
|
30
30
|
line-height: 20px;
|
|
31
31
|
`}
|
|
32
32
|
|
|
33
|
-
|
|
33
|
+
font-weight: ${oldTheme.font.weight.medium};
|
|
34
34
|
text-decoration: underline;
|
|
35
|
-
color: ${$highlight
|
|
35
|
+
color: ${$highlight
|
|
36
|
+
? theme.color.interactive.primary.base
|
|
37
|
+
: theme.color.text.base};
|
|
36
38
|
|
|
37
39
|
background: none;
|
|
38
40
|
cursor: pointer;
|
|
39
41
|
|
|
40
42
|
&:hover {
|
|
41
|
-
color: ${theme.
|
|
43
|
+
color: ${theme.color.text.subtle};
|
|
42
44
|
|
|
43
45
|
path {
|
|
44
|
-
fill: ${theme.
|
|
46
|
+
fill: ${theme.color.icon.subtle};
|
|
45
47
|
}
|
|
46
48
|
}
|
|
47
49
|
|
|
48
50
|
&:active {
|
|
49
|
-
color: ${theme.
|
|
51
|
+
color: ${theme.color.text.base};
|
|
50
52
|
|
|
51
53
|
path {
|
|
52
|
-
fill: ${theme.
|
|
54
|
+
fill: ${theme.color.icon.subtle};
|
|
53
55
|
}
|
|
54
56
|
}
|
|
55
57
|
`);
|
package/dist/Link/Link.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Link.js","sourceRoot":"","sources":["../../src/Link/Link.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,OAAO,KAA2C,MAAM,OAAO,CAAA;AAC/D,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAE/C,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAE9B,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;
|
|
1
|
+
{"version":3,"file":"Link.js","sourceRoot":"","sources":["../../src/Link/Link.tsx"],"names":[],"mappings":"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","sourcesContent":["import { darken } from 'polished'\nimport React, { FC, MouseEventHandler, ReactNode } from 'react'\nimport styled, { css } from 'styled-components'\n\nimport { Icon } from '../Icon'\nimport { Icons } from '../Icon/iconsList'\nimport { theme as oldTheme } from '../theme'\nimport { focusOutline } from '../utils/focusOutline'\n\ntype LinkTypo = 'regular' | 'small'\n\nexport type LinkProps = {\n className?: string\n href: string\n onClick?: MouseEventHandler\n openInNewTab?: boolean\n children?: ReactNode\n download?: boolean\n typo?: LinkTypo\n highlight?: boolean\n iconToRender?: Icons\n isTrailingIcon?: boolean\n}\n\nexport const Link: FC<LinkProps> = ({\n className,\n href,\n onClick,\n openInNewTab,\n download,\n children,\n typo = 'regular',\n highlight = false,\n iconToRender = openInNewTab ? 'new-window' : undefined,\n isTrailingIcon = true,\n}) => {\n return (\n <LinkWrapper\n href={href}\n className={className}\n onClick={onClick}\n download={download}\n $typo={typo}\n $highlight={highlight}\n {...(openInNewTab && {\n rel: 'noopener noreferrer',\n target: '_blank',\n })}\n >\n {iconToRender && !isTrailingIcon && (\n <Icon\n mt={{ custom: '3px' }}\n mr={{ custom: '4px' }}\n render={iconToRender}\n size={typo === 'regular' ? 14 : 12}\n color={highlight ? 'lollipop' : 'liquorice'}\n />\n )}\n {children}\n {iconToRender && isTrailingIcon && (\n <Icon\n mt={{ custom: '3px' }}\n ml=\"8px\"\n render={iconToRender}\n size={typo === 'regular' ? 14 : 12}\n color={highlight ? 'lollipop' : 'liquorice'}\n />\n )}\n </LinkWrapper>\n )\n}\n\nconst LinkWrapper = styled.a<{ $typo: LinkTypo; $highlight: boolean }>(\n ({ $typo, $highlight, theme }) => css`\n ${focusOutline()}\n display: inline-flex;\n flex-direction: row;\n\n ${$typo === 'regular' &&\n css`\n font-size: 16px;\n line-height: 20px;\n `}\n\n ${$typo === 'small' &&\n css`\n font-size: 14px;\n line-height: 20px;\n `}\n\n font-weight: ${oldTheme.font.weight.medium};\n text-decoration: underline;\n color: ${$highlight\n ? theme.color.interactive.primary.base\n : theme.color.text.base};\n\n background: none;\n cursor: pointer;\n\n &:hover {\n color: ${theme.color.text.subtle};\n\n path {\n fill: ${theme.color.icon.subtle};\n }\n }\n\n &:active {\n color: ${theme.color.text.base};\n\n path {\n fill: ${theme.color.icon.subtle};\n }\n }\n `,\n)\n\n/**\n * Internal utility to override styling in other components (see Text)\n * @internal\n */\nexport const linkStyleOverride = ({ color }: { color: string }) => css`\n & ${LinkWrapper} {\n color: ${color};\n\n path {\n fill: ${color};\n }\n\n &:hover {\n color: ${darken(0.1, color)};\n\n path {\n fill: ${darken(0.1, color)};\n }\n }\n }\n`\n"]}
|