@veeqo/ui 13.17.0 → 13.18.1
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/components/Anchor/Anchor.cjs +11 -5
- package/dist/components/Anchor/Anchor.cjs.map +1 -1
- package/dist/components/Anchor/Anchor.d.ts +1 -1
- package/dist/components/Anchor/Anchor.js +11 -5
- package/dist/components/Anchor/Anchor.js.map +1 -1
- package/dist/components/Anchor/Anchor.module.scss.cjs +9 -0
- package/dist/components/Anchor/Anchor.module.scss.cjs.map +1 -0
- package/dist/components/Anchor/Anchor.module.scss.js +7 -0
- package/dist/components/Anchor/Anchor.module.scss.js.map +1 -0
- package/dist/components/Card/Card.cjs +3 -2
- package/dist/components/Card/Card.cjs.map +1 -1
- package/dist/components/Card/Card.d.ts +2 -1
- package/dist/components/Card/Card.js +3 -2
- package/dist/components/Card/Card.js.map +1 -1
- package/dist/components/CardHeader/CardHeader.cjs +2 -2
- package/dist/components/CardHeader/CardHeader.cjs.map +1 -1
- package/dist/components/CardHeader/CardHeader.d.ts +2 -1
- package/dist/components/CardHeader/CardHeader.js +2 -2
- package/dist/components/CardHeader/CardHeader.js.map +1 -1
- package/package.json +1 -1
- package/dist/components/Anchor/styled.cjs +0 -38
- package/dist/components/Anchor/styled.cjs.map +0 -1
- package/dist/components/Anchor/styled.d.ts +0 -10
- package/dist/components/Anchor/styled.js +0 -29
- package/dist/components/Anchor/styled.js.map +0 -1
|
@@ -3,7 +3,9 @@
|
|
|
3
3
|
var React = require('react');
|
|
4
4
|
var sizes = require('../../theme/modules/sizes.cjs');
|
|
5
5
|
var urlUtils = require('./utils/urlUtils.cjs');
|
|
6
|
-
var
|
|
6
|
+
var buildClassnames = require('../../utils/buildClassnames.cjs');
|
|
7
|
+
require('uid/secure');
|
|
8
|
+
var Anchor_module = require('./Anchor.module.scss.cjs');
|
|
7
9
|
var HelpIcon = require('../../icons/design-system/components/HelpIcon.cjs');
|
|
8
10
|
var LaunchIcon = require('../../icons/design-system/components/LaunchIcon.cjs');
|
|
9
11
|
var isExternalLink = require('./isExternalLink.cjs');
|
|
@@ -23,7 +25,7 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
|
|
|
23
25
|
* @param children - The content of the anchor
|
|
24
26
|
* @param rest - All other standard anchor HTML attributes
|
|
25
27
|
*/
|
|
26
|
-
const Anchor = React__default.default.memo(({ variant = 'base', size = 'base', href, showHelpIcon = false, leftIconSlot = null, hideExternalLinkIcon = false, allowedHostnames = [], children, target, rel, ...rest }) => {
|
|
28
|
+
const Anchor = React__default.default.memo(({ variant = 'base', size = 'base', href, showHelpIcon = false, leftIconSlot = null, hideExternalLinkIcon = false, allowedHostnames = [], children, target, rel, className, ...rest }) => {
|
|
27
29
|
// Process the URL to make it context-aware
|
|
28
30
|
const processedHref = href ? urlUtils.createContextAwareUrl(href) : undefined;
|
|
29
31
|
// Determine if link is external based on processed href
|
|
@@ -31,11 +33,15 @@ const Anchor = React__default.default.memo(({ variant = 'base', size = 'base', h
|
|
|
31
33
|
// Set security attributes for external links if not given in props
|
|
32
34
|
const secureTarget = target || (isExternal ? '_blank' : undefined);
|
|
33
35
|
const secureRel = rel || (isExternal ? 'noopener noreferrer' : undefined);
|
|
34
|
-
// Lookup the appropriate styled component based on variant
|
|
35
|
-
const AnchorComponent = styled.AnchorMapping[variant];
|
|
36
36
|
// Show icon when when link is external and/or will open new tab (and not overridden by variant or hideExternalLinkIcon)
|
|
37
37
|
const shouldShowExternalLinkIcon = (isExternal || secureTarget === '_blank') && !hideExternalLinkIcon && variant === 'base';
|
|
38
|
-
|
|
38
|
+
const classNames = buildClassnames.buildClassnames([
|
|
39
|
+
variant !== 'unstyled' && Anchor_module.anchor,
|
|
40
|
+
variant === 'inherit' && Anchor_module.inherit,
|
|
41
|
+
variant !== 'unstyled' && Anchor_module[size],
|
|
42
|
+
className,
|
|
43
|
+
]);
|
|
44
|
+
return (React__default.default.createElement("a", { href: processedHref, target: secureTarget, rel: secureRel, className: classNames, ...rest },
|
|
39
45
|
leftIconSlot,
|
|
40
46
|
showHelpIcon && !leftIconSlot && (React__default.default.createElement(HelpIcon.ReactComponent, { role: "presentation", "data-testid": "help-icon", style: { marginRight: sizes.sizes.xs } })),
|
|
41
47
|
children,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Anchor.cjs","sources":["../../../src/components/Anchor/Anchor.tsx"],"sourcesContent":["import React from 'react';\n\nimport { sizes } from 'Theme/modules/sizes';\nimport { createContextAwareUrl } from './utils/urlUtils';\nimport { AnchorProps } from './types';\nimport {
|
|
1
|
+
{"version":3,"file":"Anchor.cjs","sources":["../../../src/components/Anchor/Anchor.tsx"],"sourcesContent":["import React from 'react';\n\nimport { sizes } from 'Theme/modules/sizes';\nimport { createContextAwareUrl } from './utils/urlUtils';\nimport { AnchorProps } from './types';\nimport { buildClassnames } from '../../utils';\nimport styles from './Anchor.module.scss';\n\nimport { HelpIcon, LaunchIcon } from '../../icons';\n\nimport { isExternalLink } from './isExternalLink';\n\n/**\n * Anchor component for handling context-aware links with consistent functionality and styling options.\n *\n * https://www.figma.com/design/KFfBvJvYT4evKe9eiLEnwD/%F0%9F%8E%A8-Design-System?node-id=1170-63891&m=dev\n *\n * @param variant - The visual style variant ('base' or 'unstyled')\n * @param href - The URL the link points to (will be processed to be context-aware)\n * @param showHelpIcon - Whether to show a help icon on the left (defaults to false)\n * @param children - The content of the anchor\n * @param rest - All other standard anchor HTML attributes\n */\nexport const Anchor = React.memo(\n ({\n variant = 'base',\n size = 'base',\n href,\n showHelpIcon = false,\n leftIconSlot = null,\n hideExternalLinkIcon = false,\n allowedHostnames = [],\n children,\n target,\n rel,\n className,\n ...rest\n }: AnchorProps) => {\n // Process the URL to make it context-aware\n const processedHref = href ? createContextAwareUrl(href) : undefined;\n\n // Determine if link is external based on processed href\n const isExternal = processedHref ? isExternalLink(processedHref, allowedHostnames) : false;\n\n // Set security attributes for external links if not given in props\n const secureTarget = target || (isExternal ? '_blank' : undefined);\n const secureRel = rel || (isExternal ? 'noopener noreferrer' : undefined);\n\n // Show icon when when link is external and/or will open new tab (and not overridden by variant or hideExternalLinkIcon)\n const shouldShowExternalLinkIcon =\n (isExternal || secureTarget === '_blank') && !hideExternalLinkIcon && variant === 'base';\n\n const classNames = buildClassnames([\n variant !== 'unstyled' && styles.anchor,\n variant === 'inherit' && styles.inherit,\n variant !== 'unstyled' && styles[size],\n className,\n ]);\n\n return (\n <a\n href={processedHref}\n target={secureTarget}\n rel={secureRel}\n className={classNames}\n {...rest}\n >\n {leftIconSlot}\n {showHelpIcon && !leftIconSlot && (\n <HelpIcon role=\"presentation\" data-testid=\"help-icon\" style={{ marginRight: sizes.xs }} />\n )}\n\n {children}\n {shouldShowExternalLinkIcon && (\n <LaunchIcon\n role=\"presentation\"\n data-testid=\"external-icon\"\n style={{ marginLeft: sizes.xs }}\n />\n )}\n </a>\n );\n },\n);\n"],"names":["React","createContextAwareUrl","isExternalLink","buildClassnames","styles","HelpIcon","sizes","LaunchIcon"],"mappings":";;;;;;;;;;;;;;;;AAYA;;;;;;;;;;AAUG;MACU,MAAM,GAAGA,sBAAK,CAAC,IAAI,CAC9B,CAAC,EACC,OAAO,GAAG,MAAM,EAChB,IAAI,GAAG,MAAM,EACb,IAAI,EACJ,YAAY,GAAG,KAAK,EACpB,YAAY,GAAG,IAAI,EACnB,oBAAoB,GAAG,KAAK,EAC5B,gBAAgB,GAAG,EAAE,EACrB,QAAQ,EACR,MAAM,EACN,GAAG,EACH,SAAS,EACT,GAAG,IAAI,EACK,KAAI;;AAEhB,IAAA,MAAM,aAAa,GAAG,IAAI,GAAGC,8BAAqB,CAAC,IAAI,CAAC,GAAG,SAAS;;AAGpE,IAAA,MAAM,UAAU,GAAG,aAAa,GAAGC,6BAAc,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,KAAK;;AAG1F,IAAA,MAAM,YAAY,GAAG,MAAM,KAAK,UAAU,GAAG,QAAQ,GAAG,SAAS,CAAC;AAClE,IAAA,MAAM,SAAS,GAAG,GAAG,KAAK,UAAU,GAAG,qBAAqB,GAAG,SAAS,CAAC;;AAGzE,IAAA,MAAM,0BAA0B,GAC9B,CAAC,UAAU,IAAI,YAAY,KAAK,QAAQ,KAAK,CAAC,oBAAoB,IAAI,OAAO,KAAK,MAAM;IAE1F,MAAM,UAAU,GAAGC,+BAAe,CAAC;AACjC,QAAA,OAAO,KAAK,UAAU,IAAIC,aAAM,CAAC,MAAM;AACvC,QAAA,OAAO,KAAK,SAAS,IAAIA,aAAM,CAAC,OAAO;AACvC,QAAA,OAAO,KAAK,UAAU,IAAIA,aAAM,CAAC,IAAI,CAAC;QACtC,SAAS;AACV,KAAA,CAAC;AAEF,IAAA,QACEJ,sBACE,CAAA,aAAA,CAAA,GAAA,EAAA,EAAA,IAAI,EAAE,aAAa,EACnB,MAAM,EAAE,YAAY,EACpB,GAAG,EAAE,SAAS,EACd,SAAS,EAAE,UAAU,KACjB,IAAI,EAAA;QAEP,YAAY;QACZ,YAAY,IAAI,CAAC,YAAY,KAC5BA,qCAACK,uBAAQ,EAAA,EAAC,IAAI,EAAC,cAAc,EAAA,aAAA,EAAa,WAAW,EAAC,KAAK,EAAE,EAAE,WAAW,EAAEC,WAAK,CAAC,EAAE,EAAE,EAAA,CAAI,CAC3F;QAEA,QAAQ;QACR,0BAA0B,KACzBN,sBAAA,CAAA,aAAA,CAACO,yBAAU,EAAA,EACT,IAAI,EAAC,cAAc,EACP,aAAA,EAAA,eAAe,EAC3B,KAAK,EAAE,EAAE,UAAU,EAAED,WAAK,CAAC,EAAE,EAAE,EAC/B,CAAA,CACH,CACC;AAER,CAAC;;;;"}
|
|
@@ -11,4 +11,4 @@ import { AnchorProps } from './types';
|
|
|
11
11
|
* @param children - The content of the anchor
|
|
12
12
|
* @param rest - All other standard anchor HTML attributes
|
|
13
13
|
*/
|
|
14
|
-
export declare const Anchor: React.MemoExoticComponent<({ variant, size, href, showHelpIcon, leftIconSlot, hideExternalLinkIcon, allowedHostnames, children, target, rel, ...rest }: AnchorProps) => React.JSX.Element>;
|
|
14
|
+
export declare const Anchor: React.MemoExoticComponent<({ variant, size, href, showHelpIcon, leftIconSlot, hideExternalLinkIcon, allowedHostnames, children, target, rel, className, ...rest }: AnchorProps) => React.JSX.Element>;
|
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
import React__default from 'react';
|
|
2
2
|
import { sizes } from '../../theme/modules/sizes.js';
|
|
3
3
|
import { createContextAwareUrl } from './utils/urlUtils.js';
|
|
4
|
-
import {
|
|
4
|
+
import { buildClassnames } from '../../utils/buildClassnames.js';
|
|
5
|
+
import 'uid/secure';
|
|
6
|
+
import styles from './Anchor.module.scss.js';
|
|
5
7
|
import { ReactComponent as HelpIcon } from '../../icons/design-system/components/HelpIcon.js';
|
|
6
8
|
import { ReactComponent as LaunchIcon } from '../../icons/design-system/components/LaunchIcon.js';
|
|
7
9
|
import { isExternalLink } from './isExternalLink.js';
|
|
@@ -17,7 +19,7 @@ import { isExternalLink } from './isExternalLink.js';
|
|
|
17
19
|
* @param children - The content of the anchor
|
|
18
20
|
* @param rest - All other standard anchor HTML attributes
|
|
19
21
|
*/
|
|
20
|
-
const Anchor = React__default.memo(({ variant = 'base', size = 'base', href, showHelpIcon = false, leftIconSlot = null, hideExternalLinkIcon = false, allowedHostnames = [], children, target, rel, ...rest }) => {
|
|
22
|
+
const Anchor = React__default.memo(({ variant = 'base', size = 'base', href, showHelpIcon = false, leftIconSlot = null, hideExternalLinkIcon = false, allowedHostnames = [], children, target, rel, className, ...rest }) => {
|
|
21
23
|
// Process the URL to make it context-aware
|
|
22
24
|
const processedHref = href ? createContextAwareUrl(href) : undefined;
|
|
23
25
|
// Determine if link is external based on processed href
|
|
@@ -25,11 +27,15 @@ const Anchor = React__default.memo(({ variant = 'base', size = 'base', href, sho
|
|
|
25
27
|
// Set security attributes for external links if not given in props
|
|
26
28
|
const secureTarget = target || (isExternal ? '_blank' : undefined);
|
|
27
29
|
const secureRel = rel || (isExternal ? 'noopener noreferrer' : undefined);
|
|
28
|
-
// Lookup the appropriate styled component based on variant
|
|
29
|
-
const AnchorComponent = AnchorMapping[variant];
|
|
30
30
|
// Show icon when when link is external and/or will open new tab (and not overridden by variant or hideExternalLinkIcon)
|
|
31
31
|
const shouldShowExternalLinkIcon = (isExternal || secureTarget === '_blank') && !hideExternalLinkIcon && variant === 'base';
|
|
32
|
-
|
|
32
|
+
const classNames = buildClassnames([
|
|
33
|
+
variant !== 'unstyled' && styles.anchor,
|
|
34
|
+
variant === 'inherit' && styles.inherit,
|
|
35
|
+
variant !== 'unstyled' && styles[size],
|
|
36
|
+
className,
|
|
37
|
+
]);
|
|
38
|
+
return (React__default.createElement("a", { href: processedHref, target: secureTarget, rel: secureRel, className: classNames, ...rest },
|
|
33
39
|
leftIconSlot,
|
|
34
40
|
showHelpIcon && !leftIconSlot && (React__default.createElement(HelpIcon, { role: "presentation", "data-testid": "help-icon", style: { marginRight: sizes.xs } })),
|
|
35
41
|
children,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Anchor.js","sources":["../../../src/components/Anchor/Anchor.tsx"],"sourcesContent":["import React from 'react';\n\nimport { sizes } from 'Theme/modules/sizes';\nimport { createContextAwareUrl } from './utils/urlUtils';\nimport { AnchorProps } from './types';\nimport {
|
|
1
|
+
{"version":3,"file":"Anchor.js","sources":["../../../src/components/Anchor/Anchor.tsx"],"sourcesContent":["import React from 'react';\n\nimport { sizes } from 'Theme/modules/sizes';\nimport { createContextAwareUrl } from './utils/urlUtils';\nimport { AnchorProps } from './types';\nimport { buildClassnames } from '../../utils';\nimport styles from './Anchor.module.scss';\n\nimport { HelpIcon, LaunchIcon } from '../../icons';\n\nimport { isExternalLink } from './isExternalLink';\n\n/**\n * Anchor component for handling context-aware links with consistent functionality and styling options.\n *\n * https://www.figma.com/design/KFfBvJvYT4evKe9eiLEnwD/%F0%9F%8E%A8-Design-System?node-id=1170-63891&m=dev\n *\n * @param variant - The visual style variant ('base' or 'unstyled')\n * @param href - The URL the link points to (will be processed to be context-aware)\n * @param showHelpIcon - Whether to show a help icon on the left (defaults to false)\n * @param children - The content of the anchor\n * @param rest - All other standard anchor HTML attributes\n */\nexport const Anchor = React.memo(\n ({\n variant = 'base',\n size = 'base',\n href,\n showHelpIcon = false,\n leftIconSlot = null,\n hideExternalLinkIcon = false,\n allowedHostnames = [],\n children,\n target,\n rel,\n className,\n ...rest\n }: AnchorProps) => {\n // Process the URL to make it context-aware\n const processedHref = href ? createContextAwareUrl(href) : undefined;\n\n // Determine if link is external based on processed href\n const isExternal = processedHref ? isExternalLink(processedHref, allowedHostnames) : false;\n\n // Set security attributes for external links if not given in props\n const secureTarget = target || (isExternal ? '_blank' : undefined);\n const secureRel = rel || (isExternal ? 'noopener noreferrer' : undefined);\n\n // Show icon when when link is external and/or will open new tab (and not overridden by variant or hideExternalLinkIcon)\n const shouldShowExternalLinkIcon =\n (isExternal || secureTarget === '_blank') && !hideExternalLinkIcon && variant === 'base';\n\n const classNames = buildClassnames([\n variant !== 'unstyled' && styles.anchor,\n variant === 'inherit' && styles.inherit,\n variant !== 'unstyled' && styles[size],\n className,\n ]);\n\n return (\n <a\n href={processedHref}\n target={secureTarget}\n rel={secureRel}\n className={classNames}\n {...rest}\n >\n {leftIconSlot}\n {showHelpIcon && !leftIconSlot && (\n <HelpIcon role=\"presentation\" data-testid=\"help-icon\" style={{ marginRight: sizes.xs }} />\n )}\n\n {children}\n {shouldShowExternalLinkIcon && (\n <LaunchIcon\n role=\"presentation\"\n data-testid=\"external-icon\"\n style={{ marginLeft: sizes.xs }}\n />\n )}\n </a>\n );\n },\n);\n"],"names":["React"],"mappings":";;;;;;;;;;AAYA;;;;;;;;;;AAUG;MACU,MAAM,GAAGA,cAAK,CAAC,IAAI,CAC9B,CAAC,EACC,OAAO,GAAG,MAAM,EAChB,IAAI,GAAG,MAAM,EACb,IAAI,EACJ,YAAY,GAAG,KAAK,EACpB,YAAY,GAAG,IAAI,EACnB,oBAAoB,GAAG,KAAK,EAC5B,gBAAgB,GAAG,EAAE,EACrB,QAAQ,EACR,MAAM,EACN,GAAG,EACH,SAAS,EACT,GAAG,IAAI,EACK,KAAI;;AAEhB,IAAA,MAAM,aAAa,GAAG,IAAI,GAAG,qBAAqB,CAAC,IAAI,CAAC,GAAG,SAAS;;AAGpE,IAAA,MAAM,UAAU,GAAG,aAAa,GAAG,cAAc,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,KAAK;;AAG1F,IAAA,MAAM,YAAY,GAAG,MAAM,KAAK,UAAU,GAAG,QAAQ,GAAG,SAAS,CAAC;AAClE,IAAA,MAAM,SAAS,GAAG,GAAG,KAAK,UAAU,GAAG,qBAAqB,GAAG,SAAS,CAAC;;AAGzE,IAAA,MAAM,0BAA0B,GAC9B,CAAC,UAAU,IAAI,YAAY,KAAK,QAAQ,KAAK,CAAC,oBAAoB,IAAI,OAAO,KAAK,MAAM;IAE1F,MAAM,UAAU,GAAG,eAAe,CAAC;AACjC,QAAA,OAAO,KAAK,UAAU,IAAI,MAAM,CAAC,MAAM;AACvC,QAAA,OAAO,KAAK,SAAS,IAAI,MAAM,CAAC,OAAO;AACvC,QAAA,OAAO,KAAK,UAAU,IAAI,MAAM,CAAC,IAAI,CAAC;QACtC,SAAS;AACV,KAAA,CAAC;AAEF,IAAA,QACEA,cACE,CAAA,aAAA,CAAA,GAAA,EAAA,EAAA,IAAI,EAAE,aAAa,EACnB,MAAM,EAAE,YAAY,EACpB,GAAG,EAAE,SAAS,EACd,SAAS,EAAE,UAAU,KACjB,IAAI,EAAA;QAEP,YAAY;QACZ,YAAY,IAAI,CAAC,YAAY,KAC5BA,6BAAC,QAAQ,EAAA,EAAC,IAAI,EAAC,cAAc,EAAA,aAAA,EAAa,WAAW,EAAC,KAAK,EAAE,EAAE,WAAW,EAAE,KAAK,CAAC,EAAE,EAAE,EAAA,CAAI,CAC3F;QAEA,QAAQ;QACR,0BAA0B,KACzBA,cAAA,CAAA,aAAA,CAAC,UAAU,EAAA,EACT,IAAI,EAAC,cAAc,EACP,aAAA,EAAA,eAAe,EAC3B,KAAK,EAAE,EAAE,UAAU,EAAE,KAAK,CAAC,EAAE,EAAE,EAC/B,CAAA,CACH,CACC;AAER,CAAC;;;;"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
|
|
4
|
+
|
|
5
|
+
___$insertStyle("._anchor_1dmmh_1 {\n display: inline-flex;\n align-items: center;\n cursor: pointer;\n text-decoration: none;\n padding: 0 2px;\n}\n._anchor_1dmmh_1:focus-visible {\n outline: 0;\n border-radius: var(--radius-base);\n box-shadow: 0 0 0 2px var(--colors-secondary-blue-light);\n}\n._anchor_1dmmh_1:hover {\n text-decoration-thickness: 2px;\n}\n._anchor_1dmmh_1 svg {\n width: var(--icon-size);\n height: var(--icon-size);\n vertical-align: middle;\n flex-shrink: 0;\n}\n\n._lg_1dmmh_23 {\n --icon-size: var(--sizes-md);\n font-family: var(--text-link-large-font-family);\n font-style: var(--text-link-large-font-style);\n font-weight: var(--text-link-large-font-weight);\n font-size: var(--text-link-large-font-size);\n line-height: var(--text-link-large-line-height);\n color: var(--text-link-large-color);\n text-decoration: var(--text-link-large-text-decoration);\n letter-spacing: var(--text-link-large-letter-spacing);\n}\n\n._md_1dmmh_35 {\n --icon-size: var(--sizes-5);\n font-family: var(--text-link-medium-font-family);\n font-style: var(--text-link-medium-font-style);\n font-weight: var(--text-link-medium-font-weight);\n font-size: var(--text-link-medium-font-size);\n line-height: var(--text-link-medium-line-height);\n color: var(--text-link-medium-color);\n text-decoration: var(--text-link-medium-text-decoration);\n letter-spacing: var(--text-link-medium-letter-spacing);\n}\n\n._base_1dmmh_47 {\n --icon-size: var(--sizes-base);\n font-family: var(--text-link-font-family);\n font-style: var(--text-link-font-style);\n font-weight: var(--text-link-font-weight);\n font-size: var(--text-link-font-size);\n line-height: var(--text-link-line-height);\n color: var(--text-link-color);\n text-decoration: var(--text-link-text-decoration);\n letter-spacing: var(--text-link-letter-spacing);\n}\n\n._sm_1dmmh_59 {\n --icon-size: var(--sizes-3);\n font-family: var(--text-link-small-font-family);\n font-style: var(--text-link-small-font-style);\n font-weight: var(--text-link-small-font-weight);\n font-size: var(--text-link-small-font-size);\n line-height: var(--text-link-small-line-height);\n color: var(--text-link-small-color);\n text-decoration: var(--text-link-small-text-decoration);\n letter-spacing: var(--text-link-small-letter-spacing);\n}\n\n._inherit_1dmmh_71 {\n font-size: inherit;\n line-height: inherit;\n}");
|
|
6
|
+
var styles = {"anchor":"_anchor_1dmmh_1","lg":"_lg_1dmmh_23","md":"_md_1dmmh_35","base":"_base_1dmmh_47","sm":"_sm_1dmmh_59","inherit":"_inherit_1dmmh_71"};
|
|
7
|
+
|
|
8
|
+
module.exports = styles;
|
|
9
|
+
//# sourceMappingURL=Anchor.module.scss.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Anchor.module.scss.cjs","sources":["../../../src/components/Anchor/Anchor.module.scss"],"sourcesContent":["@use '../../theme/scss/text.module.scss' as text;\n\n.anchor {\n display: inline-flex;\n align-items: center;\n cursor: pointer;\n text-decoration: none;\n padding: 0 2px;\n\n &:focus-visible {\n outline: 0;\n border-radius: var(--radius-base);\n box-shadow: 0 0 0 2px var(--colors-secondary-blue-light);\n }\n\n &:hover {\n text-decoration-thickness: 2px;\n }\n\n svg {\n width: var(--icon-size);\n height: var(--icon-size);\n vertical-align: middle;\n flex-shrink: 0;\n }\n}\n\n.lg {\n --icon-size: var(--sizes-md);\n\n @include text.link-large;\n}\n\n.md {\n --icon-size: var(--sizes-5);\n\n @include text.link-medium;\n}\n\n.base {\n --icon-size: var(--sizes-base);\n\n @include text.link;\n}\n\n.sm {\n --icon-size: var(--sizes-3);\n\n @include text.link-small;\n}\n\n.inherit {\n font-size: inherit;\n line-height: inherit;\n}\n"],"names":[],"mappings":";;;;AAGE,eAAA,CAAA,m1EAAA;AACA,aAAA,CAAA,QAAA,CAAA,iBAAA,CAAA,IAAA,CAAA,cAAA,CAAA,IAAA,CAAA,cAAA,CAAA,MAAA,CAAA,gBAAA,CAAA,IAAA,CAAA,cAAA,CAAA,SAAA,CAAA,mBAAA;;;;"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import insertStyle from '../../_virtual/____insertStyle.js';
|
|
2
|
+
|
|
3
|
+
insertStyle("._anchor_1dmmh_1 {\n display: inline-flex;\n align-items: center;\n cursor: pointer;\n text-decoration: none;\n padding: 0 2px;\n}\n._anchor_1dmmh_1:focus-visible {\n outline: 0;\n border-radius: var(--radius-base);\n box-shadow: 0 0 0 2px var(--colors-secondary-blue-light);\n}\n._anchor_1dmmh_1:hover {\n text-decoration-thickness: 2px;\n}\n._anchor_1dmmh_1 svg {\n width: var(--icon-size);\n height: var(--icon-size);\n vertical-align: middle;\n flex-shrink: 0;\n}\n\n._lg_1dmmh_23 {\n --icon-size: var(--sizes-md);\n font-family: var(--text-link-large-font-family);\n font-style: var(--text-link-large-font-style);\n font-weight: var(--text-link-large-font-weight);\n font-size: var(--text-link-large-font-size);\n line-height: var(--text-link-large-line-height);\n color: var(--text-link-large-color);\n text-decoration: var(--text-link-large-text-decoration);\n letter-spacing: var(--text-link-large-letter-spacing);\n}\n\n._md_1dmmh_35 {\n --icon-size: var(--sizes-5);\n font-family: var(--text-link-medium-font-family);\n font-style: var(--text-link-medium-font-style);\n font-weight: var(--text-link-medium-font-weight);\n font-size: var(--text-link-medium-font-size);\n line-height: var(--text-link-medium-line-height);\n color: var(--text-link-medium-color);\n text-decoration: var(--text-link-medium-text-decoration);\n letter-spacing: var(--text-link-medium-letter-spacing);\n}\n\n._base_1dmmh_47 {\n --icon-size: var(--sizes-base);\n font-family: var(--text-link-font-family);\n font-style: var(--text-link-font-style);\n font-weight: var(--text-link-font-weight);\n font-size: var(--text-link-font-size);\n line-height: var(--text-link-line-height);\n color: var(--text-link-color);\n text-decoration: var(--text-link-text-decoration);\n letter-spacing: var(--text-link-letter-spacing);\n}\n\n._sm_1dmmh_59 {\n --icon-size: var(--sizes-3);\n font-family: var(--text-link-small-font-family);\n font-style: var(--text-link-small-font-style);\n font-weight: var(--text-link-small-font-weight);\n font-size: var(--text-link-small-font-size);\n line-height: var(--text-link-small-line-height);\n color: var(--text-link-small-color);\n text-decoration: var(--text-link-small-text-decoration);\n letter-spacing: var(--text-link-small-letter-spacing);\n}\n\n._inherit_1dmmh_71 {\n font-size: inherit;\n line-height: inherit;\n}");
|
|
4
|
+
var styles = {"anchor":"_anchor_1dmmh_1","lg":"_lg_1dmmh_23","md":"_md_1dmmh_35","base":"_base_1dmmh_47","sm":"_sm_1dmmh_59","inherit":"_inherit_1dmmh_71"};
|
|
5
|
+
|
|
6
|
+
export { styles as default };
|
|
7
|
+
//# sourceMappingURL=Anchor.module.scss.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Anchor.module.scss.js","sources":["../../../src/components/Anchor/Anchor.module.scss"],"sourcesContent":["@use '../../theme/scss/text.module.scss' as text;\n\n.anchor {\n display: inline-flex;\n align-items: center;\n cursor: pointer;\n text-decoration: none;\n padding: 0 2px;\n\n &:focus-visible {\n outline: 0;\n border-radius: var(--radius-base);\n box-shadow: 0 0 0 2px var(--colors-secondary-blue-light);\n }\n\n &:hover {\n text-decoration-thickness: 2px;\n }\n\n svg {\n width: var(--icon-size);\n height: var(--icon-size);\n vertical-align: middle;\n flex-shrink: 0;\n }\n}\n\n.lg {\n --icon-size: var(--sizes-md);\n\n @include text.link-large;\n}\n\n.md {\n --icon-size: var(--sizes-5);\n\n @include text.link-medium;\n}\n\n.base {\n --icon-size: var(--sizes-base);\n\n @include text.link;\n}\n\n.sm {\n --icon-size: var(--sizes-3);\n\n @include text.link-small;\n}\n\n.inherit {\n font-size: inherit;\n line-height: inherit;\n}\n"],"names":["___$insertStyle"],"mappings":";;AAGEA,WAAA,CAAA,m1EAAA;AACA,aAAA,CAAA,QAAA,CAAA,iBAAA,CAAA,IAAA,CAAA,cAAA,CAAA,IAAA,CAAA,cAAA,CAAA,MAAA,CAAA,gBAAA,CAAA,IAAA,CAAA,cAAA,CAAA,SAAA,CAAA,mBAAA;;;;"}
|
|
@@ -12,12 +12,13 @@ const collapseAnimationVariants = {
|
|
|
12
12
|
expanded: { height: 'auto' },
|
|
13
13
|
collapsed: { height: 0 },
|
|
14
14
|
};
|
|
15
|
-
const Card = ({ className, style, title, subtitle, headerActionSlot, action, collapsable, elevation, accent, children, onClose, renderFooter, }) => {
|
|
15
|
+
const Card = ({ className, style, title, subtitle, headerTitleSlot, headerActionSlot, action, collapsable, elevation, accent, children, onClose, renderFooter, }) => {
|
|
16
16
|
const [isCollapsed, setIsCollapsed] = React.useState(false);
|
|
17
17
|
const toggleCollapsed = () => {
|
|
18
18
|
setIsCollapsed(!isCollapsed);
|
|
19
19
|
};
|
|
20
|
-
const
|
|
20
|
+
const showHeader = title || headerTitleSlot !== undefined;
|
|
21
|
+
const headerMarkup = showHeader && (React__default.default.createElement(CardHeader.CardHeader, { title: title, subtitle: subtitle, titleSlot: headerTitleSlot, actionSlot: headerActionSlot, action: action, onClickClose: onClose, isCollapsed: isCollapsed, onClickCollapse: collapsable ? toggleCollapsed : undefined }));
|
|
21
22
|
const showBody = (collapsable && !isCollapsed) || !collapsable;
|
|
22
23
|
const bodyMarkup = (React__default.default.createElement(styled.Body, { animate: showBody ? 'expanded' : 'collapsed', variants: collapseAnimationVariants, transition: { duration: 0.3, ease: 'easeOut' } },
|
|
23
24
|
React__default.default.createElement(styled.Section, null, children)));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Card.cjs","sources":["../../../src/components/Card/Card.tsx"],"sourcesContent":["import React, { ReactNode, useState } from 'react';\n\nimport { CardHeader } from '../CardHeader';\nimport { Surface, Body, FullBleed, Footer, CardElevation, Section } from './styled';\n\nconst collapseAnimationVariants = {\n expanded: { height: 'auto' },\n collapsed: { height: 0 },\n};\n\ntype CardAction = {\n title: string;\n onClick: () => void;\n};\n\nexport type CardProps = {\n className?: string;\n style?: React.CSSProperties;\n title?: string;\n subtitle?: string;\n headerActionSlot?: React.ReactNode;\n action?: CardAction;\n collapsable?: boolean;\n elevation?: CardElevation;\n accent?: 'info' | 'success' | 'error';\n children: ReactNode;\n onClose?: () => void;\n renderFooter?: () => ReactNode;\n};\n\nexport const Card = ({\n className,\n style,\n title,\n subtitle,\n headerActionSlot,\n action,\n collapsable,\n elevation,\n accent,\n children,\n onClose,\n renderFooter,\n}: CardProps) => {\n const [isCollapsed, setIsCollapsed] = useState(false);\n\n const toggleCollapsed = () => {\n setIsCollapsed(!isCollapsed);\n };\n\n const
|
|
1
|
+
{"version":3,"file":"Card.cjs","sources":["../../../src/components/Card/Card.tsx"],"sourcesContent":["import React, { ReactNode, useState } from 'react';\n\nimport { CardHeader } from '../CardHeader';\nimport { Surface, Body, FullBleed, Footer, CardElevation, Section } from './styled';\n\nconst collapseAnimationVariants = {\n expanded: { height: 'auto' },\n collapsed: { height: 0 },\n};\n\ntype CardAction = {\n title: string;\n onClick: () => void;\n};\n\nexport type CardProps = {\n className?: string;\n style?: React.CSSProperties;\n title?: string;\n subtitle?: string;\n headerTitleSlot?: React.ReactNode;\n headerActionSlot?: React.ReactNode;\n action?: CardAction;\n collapsable?: boolean;\n elevation?: CardElevation;\n accent?: 'info' | 'success' | 'error';\n children: ReactNode;\n onClose?: () => void;\n renderFooter?: () => ReactNode;\n};\n\nexport const Card = ({\n className,\n style,\n title,\n subtitle,\n headerTitleSlot,\n headerActionSlot,\n action,\n collapsable,\n elevation,\n accent,\n children,\n onClose,\n renderFooter,\n}: CardProps) => {\n const [isCollapsed, setIsCollapsed] = useState(false);\n\n const toggleCollapsed = () => {\n setIsCollapsed(!isCollapsed);\n };\n\n const showHeader = title || headerTitleSlot !== undefined;\n const headerMarkup = showHeader && (\n <CardHeader\n title={title}\n subtitle={subtitle}\n titleSlot={headerTitleSlot}\n actionSlot={headerActionSlot}\n action={action}\n onClickClose={onClose}\n isCollapsed={isCollapsed}\n onClickCollapse={collapsable ? toggleCollapsed : undefined}\n />\n );\n\n const showBody = (collapsable && !isCollapsed) || !collapsable;\n const bodyMarkup = (\n <Body\n animate={showBody ? 'expanded' : 'collapsed'}\n variants={collapseAnimationVariants}\n transition={{ duration: 0.3, ease: 'easeOut' }}\n >\n <Section>{children}</Section>\n </Body>\n );\n\n const footerMarkup = renderFooter !== undefined && <Footer>{renderFooter()}</Footer>;\n\n return (\n <Surface className={className} style={style} elevation={elevation} accent={accent}>\n {headerMarkup}\n {bodyMarkup}\n {footerMarkup}\n </Surface>\n );\n};\n\nCard.Surface = Surface;\nCard.Section = Section;\nCard.FullBleed = FullBleed;\nCard.Footer = Footer;\n"],"names":["useState","React","CardHeader","Body","Section","Footer","Surface","FullBleed"],"mappings":";;;;;;;;;;AAKA,MAAM,yBAAyB,GAAG;AAChC,IAAA,QAAQ,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE;AAC5B,IAAA,SAAS,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE;CACzB;AAuBM,MAAM,IAAI,GAAG,CAAC,EACnB,SAAS,EACT,KAAK,EACL,KAAK,EACL,QAAQ,EACR,eAAe,EACf,gBAAgB,EAChB,MAAM,EACN,WAAW,EACX,SAAS,EACT,MAAM,EACN,QAAQ,EACR,OAAO,EACP,YAAY,GACF,KAAI;IACd,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAGA,cAAQ,CAAC,KAAK,CAAC;IAErD,MAAM,eAAe,GAAG,MAAK;AAC3B,QAAA,cAAc,CAAC,CAAC,WAAW,CAAC;AAC9B,KAAC;AAED,IAAA,MAAM,UAAU,GAAG,KAAK,IAAI,eAAe,KAAK,SAAS;IACzD,MAAM,YAAY,GAAG,UAAU,KAC7BC,sBAAC,CAAA,aAAA,CAAAC,qBAAU,EACT,EAAA,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,eAAe,EAC1B,UAAU,EAAE,gBAAgB,EAC5B,MAAM,EAAE,MAAM,EACd,YAAY,EAAE,OAAO,EACrB,WAAW,EAAE,WAAW,EACxB,eAAe,EAAE,WAAW,GAAG,eAAe,GAAG,SAAS,EAC1D,CAAA,CACH;IAED,MAAM,QAAQ,GAAG,CAAC,WAAW,IAAI,CAAC,WAAW,KAAK,CAAC,WAAW;AAC9D,IAAA,MAAM,UAAU,IACdD,sBAAA,CAAA,aAAA,CAACE,WAAI,EACH,EAAA,OAAO,EAAE,QAAQ,GAAG,UAAU,GAAG,WAAW,EAC5C,QAAQ,EAAE,yBAAyB,EACnC,UAAU,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,IAAI,EAAE,SAAS,EAAE,EAAA;AAE9C,QAAAF,sBAAA,CAAA,aAAA,CAACG,cAAO,EAAE,IAAA,EAAA,QAAQ,CAAW,CACxB,CACR;AAED,IAAA,MAAM,YAAY,GAAG,YAAY,KAAK,SAAS,IAAIH,sBAAC,CAAA,aAAA,CAAAI,aAAM,EAAE,IAAA,EAAA,YAAY,EAAE,CAAU;AAEpF,IAAA,QACEJ,sBAAC,CAAA,aAAA,CAAAK,cAAO,IAAC,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAA;QAC9E,YAAY;QACZ,UAAU;QACV,YAAY,CACL;AAEd;AAEA,IAAI,CAAC,OAAO,GAAGA,cAAO;AACtB,IAAI,CAAC,OAAO,GAAGF,cAAO;AACtB,IAAI,CAAC,SAAS,GAAGG,gBAAS;AAC1B,IAAI,CAAC,MAAM,GAAGF,aAAM;;;;"}
|
|
@@ -9,6 +9,7 @@ export type CardProps = {
|
|
|
9
9
|
style?: React.CSSProperties;
|
|
10
10
|
title?: string;
|
|
11
11
|
subtitle?: string;
|
|
12
|
+
headerTitleSlot?: React.ReactNode;
|
|
12
13
|
headerActionSlot?: React.ReactNode;
|
|
13
14
|
action?: CardAction;
|
|
14
15
|
collapsable?: boolean;
|
|
@@ -19,7 +20,7 @@ export type CardProps = {
|
|
|
19
20
|
renderFooter?: () => ReactNode;
|
|
20
21
|
};
|
|
21
22
|
export declare const Card: {
|
|
22
|
-
({ className, style, title, subtitle, headerActionSlot, action, collapsable, elevation, accent, children, onClose, renderFooter, }: CardProps): React.JSX.Element;
|
|
23
|
+
({ className, style, title, subtitle, headerTitleSlot, headerActionSlot, action, collapsable, elevation, accent, children, onClose, renderFooter, }: CardProps): React.JSX.Element;
|
|
23
24
|
Surface: import("styled-components").StyledComponent<"div", any, import("./styled").SurfaceProps, never>;
|
|
24
25
|
Section: import("styled-components").StyledComponent<"section", any, {}, never>;
|
|
25
26
|
FullBleed: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
@@ -6,12 +6,13 @@ const collapseAnimationVariants = {
|
|
|
6
6
|
expanded: { height: 'auto' },
|
|
7
7
|
collapsed: { height: 0 },
|
|
8
8
|
};
|
|
9
|
-
const Card = ({ className, style, title, subtitle, headerActionSlot, action, collapsable, elevation, accent, children, onClose, renderFooter, }) => {
|
|
9
|
+
const Card = ({ className, style, title, subtitle, headerTitleSlot, headerActionSlot, action, collapsable, elevation, accent, children, onClose, renderFooter, }) => {
|
|
10
10
|
const [isCollapsed, setIsCollapsed] = useState(false);
|
|
11
11
|
const toggleCollapsed = () => {
|
|
12
12
|
setIsCollapsed(!isCollapsed);
|
|
13
13
|
};
|
|
14
|
-
const
|
|
14
|
+
const showHeader = title || headerTitleSlot !== undefined;
|
|
15
|
+
const headerMarkup = showHeader && (React__default.createElement(CardHeader, { title: title, subtitle: subtitle, titleSlot: headerTitleSlot, actionSlot: headerActionSlot, action: action, onClickClose: onClose, isCollapsed: isCollapsed, onClickCollapse: collapsable ? toggleCollapsed : undefined }));
|
|
15
16
|
const showBody = (collapsable && !isCollapsed) || !collapsable;
|
|
16
17
|
const bodyMarkup = (React__default.createElement(Body, { animate: showBody ? 'expanded' : 'collapsed', variants: collapseAnimationVariants, transition: { duration: 0.3, ease: 'easeOut' } },
|
|
17
18
|
React__default.createElement(Section, null, children)));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Card.js","sources":["../../../src/components/Card/Card.tsx"],"sourcesContent":["import React, { ReactNode, useState } from 'react';\n\nimport { CardHeader } from '../CardHeader';\nimport { Surface, Body, FullBleed, Footer, CardElevation, Section } from './styled';\n\nconst collapseAnimationVariants = {\n expanded: { height: 'auto' },\n collapsed: { height: 0 },\n};\n\ntype CardAction = {\n title: string;\n onClick: () => void;\n};\n\nexport type CardProps = {\n className?: string;\n style?: React.CSSProperties;\n title?: string;\n subtitle?: string;\n headerActionSlot?: React.ReactNode;\n action?: CardAction;\n collapsable?: boolean;\n elevation?: CardElevation;\n accent?: 'info' | 'success' | 'error';\n children: ReactNode;\n onClose?: () => void;\n renderFooter?: () => ReactNode;\n};\n\nexport const Card = ({\n className,\n style,\n title,\n subtitle,\n headerActionSlot,\n action,\n collapsable,\n elevation,\n accent,\n children,\n onClose,\n renderFooter,\n}: CardProps) => {\n const [isCollapsed, setIsCollapsed] = useState(false);\n\n const toggleCollapsed = () => {\n setIsCollapsed(!isCollapsed);\n };\n\n const
|
|
1
|
+
{"version":3,"file":"Card.js","sources":["../../../src/components/Card/Card.tsx"],"sourcesContent":["import React, { ReactNode, useState } from 'react';\n\nimport { CardHeader } from '../CardHeader';\nimport { Surface, Body, FullBleed, Footer, CardElevation, Section } from './styled';\n\nconst collapseAnimationVariants = {\n expanded: { height: 'auto' },\n collapsed: { height: 0 },\n};\n\ntype CardAction = {\n title: string;\n onClick: () => void;\n};\n\nexport type CardProps = {\n className?: string;\n style?: React.CSSProperties;\n title?: string;\n subtitle?: string;\n headerTitleSlot?: React.ReactNode;\n headerActionSlot?: React.ReactNode;\n action?: CardAction;\n collapsable?: boolean;\n elevation?: CardElevation;\n accent?: 'info' | 'success' | 'error';\n children: ReactNode;\n onClose?: () => void;\n renderFooter?: () => ReactNode;\n};\n\nexport const Card = ({\n className,\n style,\n title,\n subtitle,\n headerTitleSlot,\n headerActionSlot,\n action,\n collapsable,\n elevation,\n accent,\n children,\n onClose,\n renderFooter,\n}: CardProps) => {\n const [isCollapsed, setIsCollapsed] = useState(false);\n\n const toggleCollapsed = () => {\n setIsCollapsed(!isCollapsed);\n };\n\n const showHeader = title || headerTitleSlot !== undefined;\n const headerMarkup = showHeader && (\n <CardHeader\n title={title}\n subtitle={subtitle}\n titleSlot={headerTitleSlot}\n actionSlot={headerActionSlot}\n action={action}\n onClickClose={onClose}\n isCollapsed={isCollapsed}\n onClickCollapse={collapsable ? toggleCollapsed : undefined}\n />\n );\n\n const showBody = (collapsable && !isCollapsed) || !collapsable;\n const bodyMarkup = (\n <Body\n animate={showBody ? 'expanded' : 'collapsed'}\n variants={collapseAnimationVariants}\n transition={{ duration: 0.3, ease: 'easeOut' }}\n >\n <Section>{children}</Section>\n </Body>\n );\n\n const footerMarkup = renderFooter !== undefined && <Footer>{renderFooter()}</Footer>;\n\n return (\n <Surface className={className} style={style} elevation={elevation} accent={accent}>\n {headerMarkup}\n {bodyMarkup}\n {footerMarkup}\n </Surface>\n );\n};\n\nCard.Surface = Surface;\nCard.Section = Section;\nCard.FullBleed = FullBleed;\nCard.Footer = Footer;\n"],"names":["React"],"mappings":";;;;AAKA,MAAM,yBAAyB,GAAG;AAChC,IAAA,QAAQ,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE;AAC5B,IAAA,SAAS,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE;CACzB;AAuBM,MAAM,IAAI,GAAG,CAAC,EACnB,SAAS,EACT,KAAK,EACL,KAAK,EACL,QAAQ,EACR,eAAe,EACf,gBAAgB,EAChB,MAAM,EACN,WAAW,EACX,SAAS,EACT,MAAM,EACN,QAAQ,EACR,OAAO,EACP,YAAY,GACF,KAAI;IACd,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;IAErD,MAAM,eAAe,GAAG,MAAK;AAC3B,QAAA,cAAc,CAAC,CAAC,WAAW,CAAC;AAC9B,KAAC;AAED,IAAA,MAAM,UAAU,GAAG,KAAK,IAAI,eAAe,KAAK,SAAS;IACzD,MAAM,YAAY,GAAG,UAAU,KAC7BA,cAAC,CAAA,aAAA,CAAA,UAAU,EACT,EAAA,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,eAAe,EAC1B,UAAU,EAAE,gBAAgB,EAC5B,MAAM,EAAE,MAAM,EACd,YAAY,EAAE,OAAO,EACrB,WAAW,EAAE,WAAW,EACxB,eAAe,EAAE,WAAW,GAAG,eAAe,GAAG,SAAS,EAC1D,CAAA,CACH;IAED,MAAM,QAAQ,GAAG,CAAC,WAAW,IAAI,CAAC,WAAW,KAAK,CAAC,WAAW;AAC9D,IAAA,MAAM,UAAU,IACdA,cAAA,CAAA,aAAA,CAAC,IAAI,EACH,EAAA,OAAO,EAAE,QAAQ,GAAG,UAAU,GAAG,WAAW,EAC5C,QAAQ,EAAE,yBAAyB,EACnC,UAAU,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,IAAI,EAAE,SAAS,EAAE,EAAA;AAE9C,QAAAA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAE,IAAA,EAAA,QAAQ,CAAW,CACxB,CACR;AAED,IAAA,MAAM,YAAY,GAAG,YAAY,KAAK,SAAS,IAAIA,cAAC,CAAA,aAAA,CAAA,MAAM,EAAE,IAAA,EAAA,YAAY,EAAE,CAAU;AAEpF,IAAA,QACEA,cAAC,CAAA,aAAA,CAAA,OAAO,IAAC,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAA;QAC9E,YAAY;QACZ,UAAU;QACV,YAAY,CACL;AAEd;AAEA,IAAI,CAAC,OAAO,GAAG,OAAO;AACtB,IAAI,CAAC,OAAO,GAAG,OAAO;AACtB,IAAI,CAAC,SAAS,GAAG,SAAS;AAC1B,IAAI,CAAC,MAAM,GAAG,MAAM;;;;"}
|
|
@@ -12,9 +12,9 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
|
|
|
12
12
|
|
|
13
13
|
var React__default = /*#__PURE__*/_interopDefaultCompat(React);
|
|
14
14
|
|
|
15
|
-
const CardHeader = ({ id, title, subtitle, headerVariant = 'headingSmall', action, actionSlot, isCollapsed, onClickCollapse, onClickClose, }) => (React__default.default.createElement(styled.Header, null,
|
|
15
|
+
const CardHeader = ({ id, title, subtitle, titleSlot, headerVariant = 'headingSmall', action, actionSlot, isCollapsed, onClickCollapse, onClickClose, }) => (React__default.default.createElement(styled.Header, null,
|
|
16
16
|
React__default.default.createElement(styled.HeaderGrid, null,
|
|
17
|
-
React__default.default.createElement(Text.Text, { id: id, variant: headerVariant }, title),
|
|
17
|
+
titleSlot || (React__default.default.createElement(Text.Text, { id: id, variant: headerVariant }, title)),
|
|
18
18
|
action && (React__default.default.createElement(Button.Button, { variant: "link", onClick: action.onClick }, action.title)),
|
|
19
19
|
actionSlot,
|
|
20
20
|
onClickCollapse && (React__default.default.createElement(Button.Button, { variant: "flat", iconSlot: isCollapsed ? React__default.default.createElement(DownArrowIcon.ReactComponent, null) : React__default.default.createElement(UpArrowIcon.ReactComponent, null), onClick: onClickCollapse })),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CardHeader.cjs","sources":["../../../src/components/CardHeader/CardHeader.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Text } from '../Text';\nimport { Button } from '../Button';\nimport { Header, HeaderGrid } from './styled';\nimport { HeaderVariant } from '../Text/types';\nimport { DownArrowIcon, UpArrowIcon, CrossIcon } from '../../icons';\n\ntype CardHeaderAction = {\n title: string;\n onClick: () => void;\n};\n\nexport interface CardHeaderProps {\n id?: string;\n title?: string;\n subtitle?: string;\n headerVariant?: HeaderVariant;\n action?: CardHeaderAction;\n actionSlot?: React.ReactNode;\n isCollapsed?: boolean;\n onClickCollapse?: () => void;\n onClickClose?: () => void;\n}\n\nexport const CardHeader = ({\n id,\n title,\n subtitle,\n headerVariant = 'headingSmall',\n action,\n actionSlot,\n isCollapsed,\n onClickCollapse,\n onClickClose,\n}: CardHeaderProps) => (\n <Header>\n <HeaderGrid>\n <Text id={id} variant={headerVariant}>\n
|
|
1
|
+
{"version":3,"file":"CardHeader.cjs","sources":["../../../src/components/CardHeader/CardHeader.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Text } from '../Text';\nimport { Button } from '../Button';\nimport { Header, HeaderGrid } from './styled';\nimport { HeaderVariant } from '../Text/types';\nimport { DownArrowIcon, UpArrowIcon, CrossIcon } from '../../icons';\n\ntype CardHeaderAction = {\n title: string;\n onClick: () => void;\n};\n\nexport interface CardHeaderProps {\n id?: string;\n title?: string;\n subtitle?: string;\n titleSlot?: React.ReactNode;\n headerVariant?: HeaderVariant;\n action?: CardHeaderAction;\n actionSlot?: React.ReactNode;\n isCollapsed?: boolean;\n onClickCollapse?: () => void;\n onClickClose?: () => void;\n}\n\nexport const CardHeader = ({\n id,\n title,\n subtitle,\n titleSlot,\n headerVariant = 'headingSmall',\n action,\n actionSlot,\n isCollapsed,\n onClickCollapse,\n onClickClose,\n}: CardHeaderProps) => (\n <Header>\n <HeaderGrid>\n {titleSlot || (\n <Text id={id} variant={headerVariant}>\n {title}\n </Text>\n )}\n {action && (\n <Button variant=\"link\" onClick={action.onClick}>\n {action.title}\n </Button>\n )}\n {actionSlot}\n {onClickCollapse && (\n <Button\n variant=\"flat\"\n iconSlot={isCollapsed ? <DownArrowIcon /> : <UpArrowIcon />}\n onClick={onClickCollapse}\n />\n )}\n {onClickClose && (\n <Button\n variant=\"flat\"\n iconSlot={<CrossIcon />}\n onClick={onClickClose}\n aria-label=\"Close\"\n type=\"button\"\n />\n )}\n </HeaderGrid>\n {subtitle && <Text variant=\"subheadingSmall\">{subtitle}</Text>}\n </Header>\n);\n"],"names":["React","Header","HeaderGrid","Text","Button","DownArrowIcon","UpArrowIcon","CrossIcon"],"mappings":";;;;;;;;;;;;;;AA0BO,MAAM,UAAU,GAAG,CAAC,EACzB,EAAE,EACF,KAAK,EACL,QAAQ,EACR,SAAS,EACT,aAAa,GAAG,cAAc,EAC9B,MAAM,EACN,UAAU,EACV,WAAW,EACX,eAAe,EACf,YAAY,GACI,MAChBA,qCAACC,aAAM,EAAA,IAAA;AACL,IAAAD,sBAAA,CAAA,aAAA,CAACE,iBAAU,EAAA,IAAA;AACR,QAAA,SAAS,KACRF,sBAAC,CAAA,aAAA,CAAAG,SAAI,IAAC,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,aAAa,EACjC,EAAA,KAAK,CACD,CACR;AACA,QAAA,MAAM,KACLH,sBAAA,CAAA,aAAA,CAACI,aAAM,EAAC,EAAA,OAAO,EAAC,MAAM,EAAC,OAAO,EAAE,MAAM,CAAC,OAAO,EAAA,EAC3C,MAAM,CAAC,KAAK,CACN,CACV;QACA,UAAU;AACV,QAAA,eAAe,KACdJ,sBAAC,CAAA,aAAA,CAAAI,aAAM,EACL,EAAA,OAAO,EAAC,MAAM,EACd,QAAQ,EAAE,WAAW,GAAGJ,sBAAA,CAAA,aAAA,CAACK,4BAAa,EAAA,IAAA,CAAG,GAAGL,sBAAA,CAAA,aAAA,CAACM,0BAAW,EAAA,IAAA,CAAG,EAC3D,OAAO,EAAE,eAAe,GACxB,CACH;QACA,YAAY,KACXN,sBAAA,CAAA,aAAA,CAACI,aAAM,EAAA,EACL,OAAO,EAAC,MAAM,EACd,QAAQ,EAAEJ,sBAAC,CAAA,aAAA,CAAAO,wBAAS,OAAG,EACvB,OAAO,EAAE,YAAY,EACV,YAAA,EAAA,OAAO,EAClB,IAAI,EAAC,QAAQ,EACb,CAAA,CACH,CACU;AACZ,IAAA,QAAQ,IAAIP,sBAAA,CAAA,aAAA,CAACG,SAAI,EAAA,EAAC,OAAO,EAAC,iBAAiB,EAAA,EAAE,QAAQ,CAAQ,CACvD;;;;"}
|
|
@@ -8,6 +8,7 @@ export interface CardHeaderProps {
|
|
|
8
8
|
id?: string;
|
|
9
9
|
title?: string;
|
|
10
10
|
subtitle?: string;
|
|
11
|
+
titleSlot?: React.ReactNode;
|
|
11
12
|
headerVariant?: HeaderVariant;
|
|
12
13
|
action?: CardHeaderAction;
|
|
13
14
|
actionSlot?: React.ReactNode;
|
|
@@ -15,5 +16,5 @@ export interface CardHeaderProps {
|
|
|
15
16
|
onClickCollapse?: () => void;
|
|
16
17
|
onClickClose?: () => void;
|
|
17
18
|
}
|
|
18
|
-
export declare const CardHeader: ({ id, title, subtitle, headerVariant, action, actionSlot, isCollapsed, onClickCollapse, onClickClose, }: CardHeaderProps) => React.JSX.Element;
|
|
19
|
+
export declare const CardHeader: ({ id, title, subtitle, titleSlot, headerVariant, action, actionSlot, isCollapsed, onClickCollapse, onClickClose, }: CardHeaderProps) => React.JSX.Element;
|
|
19
20
|
export {};
|
|
@@ -6,9 +6,9 @@ import { ReactComponent as CrossIcon } from '../../icons/design-system/component
|
|
|
6
6
|
import { ReactComponent as DownArrowIcon } from '../../icons/design-system/components/DownArrowIcon.js';
|
|
7
7
|
import { ReactComponent as UpArrowIcon } from '../../icons/design-system/components/UpArrowIcon.js';
|
|
8
8
|
|
|
9
|
-
const CardHeader = ({ id, title, subtitle, headerVariant = 'headingSmall', action, actionSlot, isCollapsed, onClickCollapse, onClickClose, }) => (React__default.createElement(Header, null,
|
|
9
|
+
const CardHeader = ({ id, title, subtitle, titleSlot, headerVariant = 'headingSmall', action, actionSlot, isCollapsed, onClickCollapse, onClickClose, }) => (React__default.createElement(Header, null,
|
|
10
10
|
React__default.createElement(HeaderGrid, null,
|
|
11
|
-
React__default.createElement(Text, { id: id, variant: headerVariant }, title),
|
|
11
|
+
titleSlot || (React__default.createElement(Text, { id: id, variant: headerVariant }, title)),
|
|
12
12
|
action && (React__default.createElement(Button, { variant: "link", onClick: action.onClick }, action.title)),
|
|
13
13
|
actionSlot,
|
|
14
14
|
onClickCollapse && (React__default.createElement(Button, { variant: "flat", iconSlot: isCollapsed ? React__default.createElement(DownArrowIcon, null) : React__default.createElement(UpArrowIcon, null), onClick: onClickCollapse })),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CardHeader.js","sources":["../../../src/components/CardHeader/CardHeader.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Text } from '../Text';\nimport { Button } from '../Button';\nimport { Header, HeaderGrid } from './styled';\nimport { HeaderVariant } from '../Text/types';\nimport { DownArrowIcon, UpArrowIcon, CrossIcon } from '../../icons';\n\ntype CardHeaderAction = {\n title: string;\n onClick: () => void;\n};\n\nexport interface CardHeaderProps {\n id?: string;\n title?: string;\n subtitle?: string;\n headerVariant?: HeaderVariant;\n action?: CardHeaderAction;\n actionSlot?: React.ReactNode;\n isCollapsed?: boolean;\n onClickCollapse?: () => void;\n onClickClose?: () => void;\n}\n\nexport const CardHeader = ({\n id,\n title,\n subtitle,\n headerVariant = 'headingSmall',\n action,\n actionSlot,\n isCollapsed,\n onClickCollapse,\n onClickClose,\n}: CardHeaderProps) => (\n <Header>\n <HeaderGrid>\n <Text id={id} variant={headerVariant}>\n
|
|
1
|
+
{"version":3,"file":"CardHeader.js","sources":["../../../src/components/CardHeader/CardHeader.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Text } from '../Text';\nimport { Button } from '../Button';\nimport { Header, HeaderGrid } from './styled';\nimport { HeaderVariant } from '../Text/types';\nimport { DownArrowIcon, UpArrowIcon, CrossIcon } from '../../icons';\n\ntype CardHeaderAction = {\n title: string;\n onClick: () => void;\n};\n\nexport interface CardHeaderProps {\n id?: string;\n title?: string;\n subtitle?: string;\n titleSlot?: React.ReactNode;\n headerVariant?: HeaderVariant;\n action?: CardHeaderAction;\n actionSlot?: React.ReactNode;\n isCollapsed?: boolean;\n onClickCollapse?: () => void;\n onClickClose?: () => void;\n}\n\nexport const CardHeader = ({\n id,\n title,\n subtitle,\n titleSlot,\n headerVariant = 'headingSmall',\n action,\n actionSlot,\n isCollapsed,\n onClickCollapse,\n onClickClose,\n}: CardHeaderProps) => (\n <Header>\n <HeaderGrid>\n {titleSlot || (\n <Text id={id} variant={headerVariant}>\n {title}\n </Text>\n )}\n {action && (\n <Button variant=\"link\" onClick={action.onClick}>\n {action.title}\n </Button>\n )}\n {actionSlot}\n {onClickCollapse && (\n <Button\n variant=\"flat\"\n iconSlot={isCollapsed ? <DownArrowIcon /> : <UpArrowIcon />}\n onClick={onClickCollapse}\n />\n )}\n {onClickClose && (\n <Button\n variant=\"flat\"\n iconSlot={<CrossIcon />}\n onClick={onClickClose}\n aria-label=\"Close\"\n type=\"button\"\n />\n )}\n </HeaderGrid>\n {subtitle && <Text variant=\"subheadingSmall\">{subtitle}</Text>}\n </Header>\n);\n"],"names":["React"],"mappings":";;;;;;;;AA0BO,MAAM,UAAU,GAAG,CAAC,EACzB,EAAE,EACF,KAAK,EACL,QAAQ,EACR,SAAS,EACT,aAAa,GAAG,cAAc,EAC9B,MAAM,EACN,UAAU,EACV,WAAW,EACX,eAAe,EACf,YAAY,GACI,MAChBA,6BAAC,MAAM,EAAA,IAAA;AACL,IAAAA,cAAA,CAAA,aAAA,CAAC,UAAU,EAAA,IAAA;AACR,QAAA,SAAS,KACRA,cAAC,CAAA,aAAA,CAAA,IAAI,IAAC,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,aAAa,EACjC,EAAA,KAAK,CACD,CACR;AACA,QAAA,MAAM,KACLA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAC,EAAA,OAAO,EAAC,MAAM,EAAC,OAAO,EAAE,MAAM,CAAC,OAAO,EAAA,EAC3C,MAAM,CAAC,KAAK,CACN,CACV;QACA,UAAU;AACV,QAAA,eAAe,KACdA,cAAC,CAAA,aAAA,CAAA,MAAM,EACL,EAAA,OAAO,EAAC,MAAM,EACd,QAAQ,EAAE,WAAW,GAAGA,cAAA,CAAA,aAAA,CAAC,aAAa,EAAA,IAAA,CAAG,GAAGA,cAAA,CAAA,aAAA,CAAC,WAAW,EAAA,IAAA,CAAG,EAC3D,OAAO,EAAE,eAAe,GACxB,CACH;QACA,YAAY,KACXA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EACL,OAAO,EAAC,MAAM,EACd,QAAQ,EAAEA,cAAC,CAAA,aAAA,CAAA,SAAS,OAAG,EACvB,OAAO,EAAE,YAAY,EACV,YAAA,EAAA,OAAO,EAClB,IAAI,EAAC,QAAQ,EACb,CAAA,CACH,CACU;AACZ,IAAA,QAAQ,IAAIA,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,OAAO,EAAC,iBAAiB,EAAA,EAAE,QAAQ,CAAQ,CACvD;;;;"}
|
package/package.json
CHANGED
|
@@ -1,38 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var styled = require('styled-components');
|
|
4
|
-
var utils = require('../../theme/utils.cjs');
|
|
5
|
-
var index = require('../../theme/index.cjs');
|
|
6
|
-
|
|
7
|
-
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
|
|
8
|
-
|
|
9
|
-
var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
|
|
10
|
-
|
|
11
|
-
const sizeMappings = {
|
|
12
|
-
lg: index.theme.sizes.md,
|
|
13
|
-
md: index.theme.sizes[5],
|
|
14
|
-
base: index.theme.sizes.base,
|
|
15
|
-
sm: index.theme.sizes[3],
|
|
16
|
-
};
|
|
17
|
-
const styleMappings = {
|
|
18
|
-
lg: 'linkLarge',
|
|
19
|
-
md: 'linkMedium',
|
|
20
|
-
base: 'link',
|
|
21
|
-
sm: 'linkSmall',
|
|
22
|
-
};
|
|
23
|
-
const UnstyledAnchor = styled__default.default.a.withConfig({ displayName: "vui--UnstyledAnchor", componentId: "vui--1af0loc" }) ``;
|
|
24
|
-
// Standard variant styling
|
|
25
|
-
const StandardAnchor = styled__default.default(UnstyledAnchor).withConfig({ displayName: "vui--StandardAnchor", componentId: "vui--k5ndq9" }) `display:inline-flex;align-items:center;cursor:pointer;transition:color 0.1s ease;text-decoration:none;padding:0 2px;${({ size }) => utils.getTextStyles(index.theme.text[styleMappings[size]])};&:focus{outline:0;border-color:${index.theme.colors.secondary.blue.dark};border-radius:${index.theme.radius.base};box-shadow:0 0 0 2px ${index.theme.colors.secondary.blue.light};}&:hover{color:${index.theme.colors.secondary.blue.dark};}svg{width:${({ size }) => sizeMappings[size]};height:${({ size }) => sizeMappings[size]};vertical-align:middle;flex-shrink:0;}`;
|
|
26
|
-
// Inherit font size and line height from parent
|
|
27
|
-
const InheritAnchor = styled__default.default(StandardAnchor).withConfig({ displayName: "vui--InheritAnchor", componentId: "vui--ut8az0" }) `font-size:inherit;line-height:inherit;`;
|
|
28
|
-
const AnchorMapping = {
|
|
29
|
-
base: StandardAnchor,
|
|
30
|
-
unstyled: UnstyledAnchor,
|
|
31
|
-
inherit: InheritAnchor,
|
|
32
|
-
};
|
|
33
|
-
|
|
34
|
-
exports.AnchorMapping = AnchorMapping;
|
|
35
|
-
exports.InheritAnchor = InheritAnchor;
|
|
36
|
-
exports.StandardAnchor = StandardAnchor;
|
|
37
|
-
exports.UnstyledAnchor = UnstyledAnchor;
|
|
38
|
-
//# sourceMappingURL=styled.cjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"styled.cjs","sources":["../../../src/components/Anchor/styled.ts"],"sourcesContent":["import styled, { StyledComponent } from 'styled-components';\nimport { getTextStyles } from '../../theme/utils';\nimport { theme } from '../../theme';\nimport { AnchorProps, AnchorSize } from './types';\n\ntype StyledAnchorProps = {\n size: AnchorSize;\n};\n\nconst sizeMappings: Record<StyledAnchorProps['size'], string> = {\n lg: theme.sizes.md,\n md: theme.sizes[5],\n base: theme.sizes.base,\n sm: theme.sizes[3],\n};\n\nconst styleMappings: Record<StyledAnchorProps['size'], string> = {\n lg: 'linkLarge',\n md: 'linkMedium',\n base: 'link',\n sm: 'linkSmall',\n};\n\nexport const UnstyledAnchor = styled.a<StyledAnchorProps>``;\n\n// Standard variant styling\nexport const StandardAnchor = styled(UnstyledAnchor)<StyledAnchorProps>`\n display: inline-flex;\n align-items: center;\n\n cursor: pointer;\n transition: color 0.1s ease;\n text-decoration: none;\n padding: 0 2px;\n\n ${({ size }) => getTextStyles(theme.text[styleMappings[size]])};\n\n &:focus {\n outline: 0;\n border-color: ${theme.colors.secondary.blue.dark};\n border-radius: ${theme.radius.base};\n box-shadow: 0 0 0 2px ${theme.colors.secondary.blue.light};\n }\n\n &:hover {\n color: ${theme.colors.secondary.blue.dark};\n }\n\n svg {\n width: ${({ size }) => sizeMappings[size]};\n height: ${({ size }) => sizeMappings[size]};\n vertical-align: middle;\n flex-shrink: 0;\n }\n`;\n\n// Inherit font size and line height from parent\nexport const InheritAnchor = styled(StandardAnchor)<StyledAnchorProps>`\n font-size: inherit;\n line-height: inherit;\n`;\n\nexport const AnchorMapping: Record<\n NonNullable<AnchorProps['variant']>,\n StyledComponent<'a', any, StyledAnchorProps>\n> = {\n base: StandardAnchor,\n unstyled: UnstyledAnchor,\n inherit: InheritAnchor,\n};\n"],"names":["theme","styled","getTextStyles"],"mappings":";;;;;;;;;;AASA,MAAM,YAAY,GAA8C;AAC9D,IAAA,EAAE,EAAEA,WAAK,CAAC,KAAK,CAAC,EAAE;AAClB,IAAA,EAAE,EAAEA,WAAK,CAAC,KAAK,CAAC,CAAC,CAAC;AAClB,IAAA,IAAI,EAAEA,WAAK,CAAC,KAAK,CAAC,IAAI;AACtB,IAAA,EAAE,EAAEA,WAAK,CAAC,KAAK,CAAC,CAAC,CAAC;CACnB;AAED,MAAM,aAAa,GAA8C;AAC/D,IAAA,EAAE,EAAE,WAAW;AACf,IAAA,EAAE,EAAE,YAAY;AAChB,IAAA,IAAI,EAAE,MAAM;AACZ,IAAA,EAAE,EAAE,WAAW;CAChB;MAEY,cAAc,GAAGC,uBAAM,CAAC,CAAC;AAEtC;AACa,MAAA,cAAc,GAAGA,uBAAM,CAAC,cAAc,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,qBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,oHAAA,EAShD,CAAC,EAAE,IAAI,EAAE,KAAKC,mBAAa,CAACF,WAAK,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,CAAC,CAAA,gCAAA,EAI5CA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,kBAC/BA,WAAK,CAAC,MAAM,CAAC,IAAI,CACV,sBAAA,EAAAA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAA,gBAAA,EAIhDA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,eAIhC,CAAC,EAAE,IAAI,EAAE,KAAK,YAAY,CAAC,IAAI,CAAC,WAC/B,CAAC,EAAE,IAAI,EAAE,KAAK,YAAY,CAAC,IAAI,CAAC;AAM9C;MACa,aAAa,GAAGC,uBAAM,CAAC,cAAc,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,oBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,sCAAA;AAKtC,MAAA,aAAa,GAGtB;AACF,IAAA,IAAI,EAAE,cAAc;AACpB,IAAA,QAAQ,EAAE,cAAc;AACxB,IAAA,OAAO,EAAE,aAAa;;;;;;;;"}
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import { StyledComponent } from 'styled-components';
|
|
2
|
-
import { AnchorProps, AnchorSize } from './types';
|
|
3
|
-
type StyledAnchorProps = {
|
|
4
|
-
size: AnchorSize;
|
|
5
|
-
};
|
|
6
|
-
export declare const UnstyledAnchor: StyledComponent<"a", any, StyledAnchorProps, never>;
|
|
7
|
-
export declare const StandardAnchor: StyledComponent<"a", any, StyledAnchorProps, never>;
|
|
8
|
-
export declare const InheritAnchor: StyledComponent<"a", any, StyledAnchorProps, never>;
|
|
9
|
-
export declare const AnchorMapping: Record<NonNullable<AnchorProps['variant']>, StyledComponent<'a', any, StyledAnchorProps>>;
|
|
10
|
-
export {};
|
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
import styled from 'styled-components';
|
|
2
|
-
import { getTextStyles } from '../../theme/utils.js';
|
|
3
|
-
import { theme } from '../../theme/index.js';
|
|
4
|
-
|
|
5
|
-
const sizeMappings = {
|
|
6
|
-
lg: theme.sizes.md,
|
|
7
|
-
md: theme.sizes[5],
|
|
8
|
-
base: theme.sizes.base,
|
|
9
|
-
sm: theme.sizes[3],
|
|
10
|
-
};
|
|
11
|
-
const styleMappings = {
|
|
12
|
-
lg: 'linkLarge',
|
|
13
|
-
md: 'linkMedium',
|
|
14
|
-
base: 'link',
|
|
15
|
-
sm: 'linkSmall',
|
|
16
|
-
};
|
|
17
|
-
const UnstyledAnchor = styled.a.withConfig({ displayName: "vui--UnstyledAnchor", componentId: "vui--1af0loc" }) ``;
|
|
18
|
-
// Standard variant styling
|
|
19
|
-
const StandardAnchor = styled(UnstyledAnchor).withConfig({ displayName: "vui--StandardAnchor", componentId: "vui--k5ndq9" }) `display:inline-flex;align-items:center;cursor:pointer;transition:color 0.1s ease;text-decoration:none;padding:0 2px;${({ size }) => getTextStyles(theme.text[styleMappings[size]])};&:focus{outline:0;border-color:${theme.colors.secondary.blue.dark};border-radius:${theme.radius.base};box-shadow:0 0 0 2px ${theme.colors.secondary.blue.light};}&:hover{color:${theme.colors.secondary.blue.dark};}svg{width:${({ size }) => sizeMappings[size]};height:${({ size }) => sizeMappings[size]};vertical-align:middle;flex-shrink:0;}`;
|
|
20
|
-
// Inherit font size and line height from parent
|
|
21
|
-
const InheritAnchor = styled(StandardAnchor).withConfig({ displayName: "vui--InheritAnchor", componentId: "vui--ut8az0" }) `font-size:inherit;line-height:inherit;`;
|
|
22
|
-
const AnchorMapping = {
|
|
23
|
-
base: StandardAnchor,
|
|
24
|
-
unstyled: UnstyledAnchor,
|
|
25
|
-
inherit: InheritAnchor,
|
|
26
|
-
};
|
|
27
|
-
|
|
28
|
-
export { AnchorMapping, InheritAnchor, StandardAnchor, UnstyledAnchor };
|
|
29
|
-
//# sourceMappingURL=styled.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"styled.js","sources":["../../../src/components/Anchor/styled.ts"],"sourcesContent":["import styled, { StyledComponent } from 'styled-components';\nimport { getTextStyles } from '../../theme/utils';\nimport { theme } from '../../theme';\nimport { AnchorProps, AnchorSize } from './types';\n\ntype StyledAnchorProps = {\n size: AnchorSize;\n};\n\nconst sizeMappings: Record<StyledAnchorProps['size'], string> = {\n lg: theme.sizes.md,\n md: theme.sizes[5],\n base: theme.sizes.base,\n sm: theme.sizes[3],\n};\n\nconst styleMappings: Record<StyledAnchorProps['size'], string> = {\n lg: 'linkLarge',\n md: 'linkMedium',\n base: 'link',\n sm: 'linkSmall',\n};\n\nexport const UnstyledAnchor = styled.a<StyledAnchorProps>``;\n\n// Standard variant styling\nexport const StandardAnchor = styled(UnstyledAnchor)<StyledAnchorProps>`\n display: inline-flex;\n align-items: center;\n\n cursor: pointer;\n transition: color 0.1s ease;\n text-decoration: none;\n padding: 0 2px;\n\n ${({ size }) => getTextStyles(theme.text[styleMappings[size]])};\n\n &:focus {\n outline: 0;\n border-color: ${theme.colors.secondary.blue.dark};\n border-radius: ${theme.radius.base};\n box-shadow: 0 0 0 2px ${theme.colors.secondary.blue.light};\n }\n\n &:hover {\n color: ${theme.colors.secondary.blue.dark};\n }\n\n svg {\n width: ${({ size }) => sizeMappings[size]};\n height: ${({ size }) => sizeMappings[size]};\n vertical-align: middle;\n flex-shrink: 0;\n }\n`;\n\n// Inherit font size and line height from parent\nexport const InheritAnchor = styled(StandardAnchor)<StyledAnchorProps>`\n font-size: inherit;\n line-height: inherit;\n`;\n\nexport const AnchorMapping: Record<\n NonNullable<AnchorProps['variant']>,\n StyledComponent<'a', any, StyledAnchorProps>\n> = {\n base: StandardAnchor,\n unstyled: UnstyledAnchor,\n inherit: InheritAnchor,\n};\n"],"names":[],"mappings":";;;;AASA,MAAM,YAAY,GAA8C;AAC9D,IAAA,EAAE,EAAE,KAAK,CAAC,KAAK,CAAC,EAAE;AAClB,IAAA,EAAE,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;AAClB,IAAA,IAAI,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI;AACtB,IAAA,EAAE,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;CACnB;AAED,MAAM,aAAa,GAA8C;AAC/D,IAAA,EAAE,EAAE,WAAW;AACf,IAAA,EAAE,EAAE,YAAY;AAChB,IAAA,IAAI,EAAE,MAAM;AACZ,IAAA,EAAE,EAAE,WAAW;CAChB;MAEY,cAAc,GAAG,MAAM,CAAC,CAAC;AAEtC;AACa,MAAA,cAAc,GAAG,MAAM,CAAC,cAAc,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,qBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,oHAAA,EAShD,CAAC,EAAE,IAAI,EAAE,KAAK,aAAa,CAAC,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,CAAC,CAAA,gCAAA,EAI5C,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,kBAC/B,KAAK,CAAC,MAAM,CAAC,IAAI,CACV,sBAAA,EAAA,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAA,gBAAA,EAIhD,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,eAIhC,CAAC,EAAE,IAAI,EAAE,KAAK,YAAY,CAAC,IAAI,CAAC,WAC/B,CAAC,EAAE,IAAI,EAAE,KAAK,YAAY,CAAC,IAAI,CAAC;AAM9C;MACa,aAAa,GAAG,MAAM,CAAC,cAAc,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,oBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,sCAAA;AAKtC,MAAA,aAAa,GAGtB;AACF,IAAA,IAAI,EAAE,cAAc;AACpB,IAAA,QAAQ,EAAE,cAAc;AACxB,IAAA,OAAO,EAAE,aAAa;;;;;"}
|