@stack-spot/citric-react 0.25.1 → 0.26.0
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/Button.d.ts +1 -1
- package/dist/components/Button.js +1 -1
- package/dist/components/ButtonLink.d.ts +16 -0
- package/dist/components/ButtonLink.d.ts.map +1 -0
- package/dist/components/ButtonLink.js +35 -0
- package/dist/components/ButtonLink.js.map +1 -0
- package/dist/components/Select/index.d.ts +1 -1
- package/dist/components/Select/index.js +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +1 -0
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/src/components/Button.tsx +1 -1
- package/src/components/ButtonLink.tsx +45 -0
- package/src/components/Select/index.tsx +1 -1
- package/src/index.ts +1 -0
|
@@ -47,7 +47,7 @@ export type ButtonProps = Omit<React.JSX.IntrinsicElements['button'], 'onClick'>
|
|
|
47
47
|
*
|
|
48
48
|
* @example
|
|
49
49
|
* ```
|
|
50
|
-
* <Button>My Button</
|
|
50
|
+
* <Button>My Button</Button>
|
|
51
51
|
* ```
|
|
52
52
|
*/
|
|
53
53
|
export declare const Button: ({ appearance, size, feedback, loading, disabled, onClick, className, children, type, analytics, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -13,7 +13,7 @@ import { ProgressCircular } from './ProgressCircular.js';
|
|
|
13
13
|
*
|
|
14
14
|
* @example
|
|
15
15
|
* ```
|
|
16
|
-
* <Button>My Button</
|
|
16
|
+
* <Button>My Button</Button>
|
|
17
17
|
* ```
|
|
18
18
|
*/
|
|
19
19
|
export const Button = withRef(({ appearance, size, feedback, loading, disabled, onClick, className, children, type = 'button', analytics, ...props }) => {
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { BaseButtonProps } from './Button.js';
|
|
2
|
+
export type BaseButtonLinkProps = Omit<BaseButtonProps, 'onClick' | 'loading' | 'type'>;
|
|
3
|
+
export type ButtonLinkProps = React.JSX.IntrinsicElements['a'] & BaseButtonLinkProps;
|
|
4
|
+
/**
|
|
5
|
+
* Renders a link with the appearance of a button.
|
|
6
|
+
*
|
|
7
|
+
* Whenever a link is clicked, the function `onClickLink` of the nearest CitricController is called with the event and the value of the
|
|
8
|
+
* prop `analytics`.
|
|
9
|
+
*
|
|
10
|
+
* @example
|
|
11
|
+
* ```
|
|
12
|
+
* <ButtonLink href="#">My Button Link</ButtonLink>
|
|
13
|
+
* ```
|
|
14
|
+
*/
|
|
15
|
+
export declare const ButtonLink: ({ appearance, size, feedback, onClick, className, children, analytics, ...props }: ButtonLinkProps) => import("react/jsx-runtime").JSX.Element;
|
|
16
|
+
//# sourceMappingURL=ButtonLink.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ButtonLink.d.ts","sourceRoot":"","sources":["../../src/components/ButtonLink.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAG1C,MAAM,MAAM,mBAAmB,GAAG,IAAI,CAAC,eAAe,EAAE,SAAS,GAAG,SAAS,GAAG,MAAM,CAAC,CAAA;AACvF,MAAM,MAAM,eAAe,GAAG,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,GAAG,CAAC,GAAG,mBAAmB,CAAA;AAEpF;;;;;;;;;;GAUG;AACH,eAAO,MAAM,UAAU,sFAC8D,eAAe,4CAsBlG,CAAA"}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { listToClass } from '@stack-spot/portal-theme';
|
|
3
|
+
import { Children, useMemo } from 'react';
|
|
4
|
+
import { useCitricController } from '../context/hooks.js';
|
|
5
|
+
import { withRef } from '../utils/react.js';
|
|
6
|
+
import { asCitricProps, CitricComponent } from './CitricComponent.js';
|
|
7
|
+
/**
|
|
8
|
+
* Renders a link with the appearance of a button.
|
|
9
|
+
*
|
|
10
|
+
* Whenever a link is clicked, the function `onClickLink` of the nearest CitricController is called with the event and the value of the
|
|
11
|
+
* prop `analytics`.
|
|
12
|
+
*
|
|
13
|
+
* @example
|
|
14
|
+
* ```
|
|
15
|
+
* <ButtonLink href="#">My Button Link</ButtonLink>
|
|
16
|
+
* ```
|
|
17
|
+
*/
|
|
18
|
+
export const ButtonLink = withRef(({ appearance, size, feedback, onClick, className, children, analytics, ...props }) => {
|
|
19
|
+
const citric = useCitricController();
|
|
20
|
+
const isAllLowercase = useMemo(() => !Children.toArray(children).some(c => typeof c === 'string' && c.toLocaleLowerCase() !== c), [children]);
|
|
21
|
+
const linkProps = {
|
|
22
|
+
component: 'button',
|
|
23
|
+
className: listToClass([size, appearance, isAllLowercase && 'short-text', className]),
|
|
24
|
+
onClick: (e) => {
|
|
25
|
+
onClick?.(e);
|
|
26
|
+
citric?.onClickLink?.(e, analytics ?? false);
|
|
27
|
+
},
|
|
28
|
+
'data-feedback': feedback || undefined,
|
|
29
|
+
...props,
|
|
30
|
+
};
|
|
31
|
+
return citric?.renderLink
|
|
32
|
+
? citric.renderLink(asCitricProps({ ...linkProps, children }))
|
|
33
|
+
: _jsx(CitricComponent, { tag: "a", ...linkProps, children: children });
|
|
34
|
+
});
|
|
35
|
+
//# sourceMappingURL=ButtonLink.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ButtonLink.js","sourceRoot":"","sources":["../../src/components/ButtonLink.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAA;AACtD,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AAExC,OAAO,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAKlE;;;;;;;;;;GAUG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,OAAO,CAAC,CAChC,EAAE,UAAU,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,KAAK,EAAmB,EAClG,EAAE;IACF,MAAM,MAAM,GAAG,mBAAmB,EAAE,CAAA;IACpC,MAAM,cAAc,GAAG,OAAO,CAC5B,GAAG,EAAE,CAAC,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,OAAO,CAAC,KAAK,QAAQ,IAAI,CAAC,CAAC,iBAAiB,EAAE,KAAK,CAAC,CAAC,EACjG,CAAC,QAAQ,CAAC,CACX,CAAA;IAED,MAAM,SAAS,GAAG;QAChB,SAAS,EAAE,QAAQ;QACnB,SAAS,EAAE,WAAW,CAAC,CAAC,IAAI,EAAE,UAAU,EAAE,cAAc,IAAI,YAAY,EAAE,SAAS,CAAC,CAAC;QACrF,OAAO,EAAE,CAAC,CAAsC,EAAE,EAAE;YAClD,OAAO,EAAE,CAAC,CAAC,CAAC,CAAA;YACZ,MAAM,EAAE,WAAW,EAAE,CAAC,CAAC,EAAE,SAAS,IAAI,KAAK,CAAC,CAAA;QAC9C,CAAC;QACD,eAAe,EAAE,QAAQ,IAAI,SAAS;QACtC,GAAG,KAAK;KACA,CAAA;IAEV,OAAO,MAAM,EAAE,UAAU;QACvB,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC,aAAa,CAAC,EAAE,GAAG,SAAS,EAAE,QAAQ,EAAE,CAAC,CAAC;QAC9D,CAAC,CAAC,KAAC,eAAe,IAAC,GAAG,EAAC,GAAG,KAAK,SAAS,YAAG,QAAQ,GAAmB,CAAA;AAC1E,CAAC,CAAC,CAAA"}
|
|
@@ -7,7 +7,7 @@ export type * from './types.js';
|
|
|
7
7
|
* The default select from the browser is also rendered when `rich = true`, but it is only accessible when navigating with the keyboard
|
|
8
8
|
* (accessibility).
|
|
9
9
|
*
|
|
10
|
-
* This Select is searchable! You just need to set `
|
|
10
|
+
* This Select is searchable! You just need to set `searchable = true`.
|
|
11
11
|
*
|
|
12
12
|
* Attention: this component doesn't accept children, instead of manually writing the tag "option", use the property "options".
|
|
13
13
|
*
|
|
@@ -9,7 +9,7 @@ import { SimpleSelect } from './SimpleSelect.js';
|
|
|
9
9
|
* The default select from the browser is also rendered when `rich = true`, but it is only accessible when navigating with the keyboard
|
|
10
10
|
* (accessibility).
|
|
11
11
|
*
|
|
12
|
-
* This Select is searchable! You just need to set `
|
|
12
|
+
* This Select is searchable! You just need to set `searchable = true`.
|
|
13
13
|
*
|
|
14
14
|
* Attention: this component doesn't accept children, instead of manually writing the tag "option", use the property "options".
|
|
15
15
|
*
|
package/dist/index.d.ts
CHANGED
|
@@ -7,6 +7,7 @@ export * from './components/Badge.js';
|
|
|
7
7
|
export * from './components/Blockquote.js';
|
|
8
8
|
export * from './components/Breadcrumb.js';
|
|
9
9
|
export * from './components/Button.js';
|
|
10
|
+
export * from './components/ButtonLink.js';
|
|
10
11
|
export * from './components/Card.js';
|
|
11
12
|
export * from './components/Checkbox.js';
|
|
12
13
|
export * from './components/CheckboxGroup.js';
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAA;AACtC,cAAc,oBAAoB,CAAA;AAClC,cAAc,2BAA2B,CAAA;AACzC,cAAc,qBAAqB,CAAA;AACnC,cAAc,0BAA0B,CAAA;AACxC,cAAc,oBAAoB,CAAA;AAClC,cAAc,yBAAyB,CAAA;AACvC,cAAc,yBAAyB,CAAA;AACvC,cAAc,qBAAqB,CAAA;AACnC,cAAc,mBAAmB,CAAA;AACjC,cAAc,uBAAuB,CAAA;AACrC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,qBAAqB,CAAA;AACnC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,sBAAsB,CAAA;AACpC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,+BAA+B,CAAA;AAC7C,cAAc,uBAAuB,CAAA;AACrC,cAAc,yBAAyB,CAAA;AACvC,cAAc,mBAAmB,CAAA;AACjC,cAAc,wBAAwB,CAAA;AACtC,cAAc,mBAAmB,CAAA;AACjC,cAAc,sBAAsB,CAAA;AACpC,cAAc,uBAAuB,CAAA;AACrC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,mBAAmB,CAAA;AACjC,cAAc,0BAA0B,CAAA;AACxC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,sBAAsB,CAAA;AACpC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,yBAAyB,CAAA;AACvC,cAAc,0BAA0B,CAAA;AACxC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,yBAAyB,CAAA;AACvC,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,wBAAwB,CAAA;AACtC,cAAc,uBAAuB,CAAA;AACrC,cAAc,qBAAqB,CAAA;AACnC,cAAc,yBAAyB,CAAA;AACvC,cAAc,sBAAsB,CAAA;AACpC,cAAc,oBAAoB,CAAA;AAClC,cAAc,mBAAmB,CAAA;AACjC,cAAc,iCAAiC,CAAA;AAC/C,cAAc,yBAAyB,CAAA;AACvC,cAAc,mBAAmB,CAAA;AACjC,cAAc,uBAAuB,CAAA;AACrC,cAAc,sBAAsB,CAAA;AACpC,cAAc,0BAA0B,CAAA;AACxC,YAAY,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAC/C,cAAc,kBAAkB,CAAA;AAChC,cAAc,eAAe,CAAA;AAC7B,cAAc,yBAAyB,CAAA"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAA;AACtC,cAAc,oBAAoB,CAAA;AAClC,cAAc,2BAA2B,CAAA;AACzC,cAAc,qBAAqB,CAAA;AACnC,cAAc,0BAA0B,CAAA;AACxC,cAAc,oBAAoB,CAAA;AAClC,cAAc,yBAAyB,CAAA;AACvC,cAAc,yBAAyB,CAAA;AACvC,cAAc,qBAAqB,CAAA;AACnC,cAAc,yBAAyB,CAAA;AACvC,cAAc,mBAAmB,CAAA;AACjC,cAAc,uBAAuB,CAAA;AACrC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,qBAAqB,CAAA;AACnC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,sBAAsB,CAAA;AACpC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,+BAA+B,CAAA;AAC7C,cAAc,uBAAuB,CAAA;AACrC,cAAc,yBAAyB,CAAA;AACvC,cAAc,mBAAmB,CAAA;AACjC,cAAc,wBAAwB,CAAA;AACtC,cAAc,mBAAmB,CAAA;AACjC,cAAc,sBAAsB,CAAA;AACpC,cAAc,uBAAuB,CAAA;AACrC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,mBAAmB,CAAA;AACjC,cAAc,0BAA0B,CAAA;AACxC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,sBAAsB,CAAA;AACpC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,yBAAyB,CAAA;AACvC,cAAc,0BAA0B,CAAA;AACxC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,yBAAyB,CAAA;AACvC,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,wBAAwB,CAAA;AACtC,cAAc,uBAAuB,CAAA;AACrC,cAAc,qBAAqB,CAAA;AACnC,cAAc,yBAAyB,CAAA;AACvC,cAAc,sBAAsB,CAAA;AACpC,cAAc,oBAAoB,CAAA;AAClC,cAAc,mBAAmB,CAAA;AACjC,cAAc,iCAAiC,CAAA;AAC/C,cAAc,yBAAyB,CAAA;AACvC,cAAc,mBAAmB,CAAA;AACjC,cAAc,uBAAuB,CAAA;AACrC,cAAc,sBAAsB,CAAA;AACpC,cAAc,0BAA0B,CAAA;AACxC,YAAY,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAC/C,cAAc,kBAAkB,CAAA;AAChC,cAAc,eAAe,CAAA;AAC7B,cAAc,yBAAyB,CAAA"}
|
package/dist/index.js
CHANGED
|
@@ -7,6 +7,7 @@ export * from './components/Badge.js';
|
|
|
7
7
|
export * from './components/Blockquote.js';
|
|
8
8
|
export * from './components/Breadcrumb.js';
|
|
9
9
|
export * from './components/Button.js';
|
|
10
|
+
export * from './components/ButtonLink.js';
|
|
10
11
|
export * from './components/Card.js';
|
|
11
12
|
export * from './components/Checkbox.js';
|
|
12
13
|
export * from './components/CheckboxGroup.js';
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAA;AACtC,cAAc,oBAAoB,CAAA;AAClC,cAAc,2BAA2B,CAAA;AACzC,cAAc,qBAAqB,CAAA;AACnC,cAAc,0BAA0B,CAAA;AACxC,cAAc,oBAAoB,CAAA;AAClC,cAAc,yBAAyB,CAAA;AACvC,cAAc,yBAAyB,CAAA;AACvC,cAAc,qBAAqB,CAAA;AACnC,cAAc,mBAAmB,CAAA;AACjC,cAAc,uBAAuB,CAAA;AACrC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,qBAAqB,CAAA;AACnC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,sBAAsB,CAAA;AACpC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,+BAA+B,CAAA;AAC7C,cAAc,uBAAuB,CAAA;AACrC,cAAc,yBAAyB,CAAA;AACvC,cAAc,mBAAmB,CAAA;AACjC,cAAc,wBAAwB,CAAA;AACtC,cAAc,mBAAmB,CAAA;AACjC,cAAc,sBAAsB,CAAA;AACpC,cAAc,uBAAuB,CAAA;AACrC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,mBAAmB,CAAA;AACjC,cAAc,0BAA0B,CAAA;AACxC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,sBAAsB,CAAA;AACpC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,yBAAyB,CAAA;AACvC,cAAc,0BAA0B,CAAA;AACxC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,yBAAyB,CAAA;AACvC,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,wBAAwB,CAAA;AACtC,cAAc,uBAAuB,CAAA;AACrC,cAAc,qBAAqB,CAAA;AACnC,cAAc,yBAAyB,CAAA;AACvC,cAAc,sBAAsB,CAAA;AACpC,cAAc,oBAAoB,CAAA;AAClC,cAAc,mBAAmB,CAAA;AACjC,cAAc,iCAAiC,CAAA;AAC/C,cAAc,yBAAyB,CAAA;AACvC,cAAc,mBAAmB,CAAA;AACjC,cAAc,uBAAuB,CAAA;AACrC,cAAc,sBAAsB,CAAA;AACpC,cAAc,0BAA0B,CAAA;AAExC,cAAc,kBAAkB,CAAA;AAChC,cAAc,eAAe,CAAA;AAC7B,cAAc,yBAAyB,CAAA"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAA;AACtC,cAAc,oBAAoB,CAAA;AAClC,cAAc,2BAA2B,CAAA;AACzC,cAAc,qBAAqB,CAAA;AACnC,cAAc,0BAA0B,CAAA;AACxC,cAAc,oBAAoB,CAAA;AAClC,cAAc,yBAAyB,CAAA;AACvC,cAAc,yBAAyB,CAAA;AACvC,cAAc,qBAAqB,CAAA;AACnC,cAAc,yBAAyB,CAAA;AACvC,cAAc,mBAAmB,CAAA;AACjC,cAAc,uBAAuB,CAAA;AACrC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,qBAAqB,CAAA;AACnC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,sBAAsB,CAAA;AACpC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,+BAA+B,CAAA;AAC7C,cAAc,uBAAuB,CAAA;AACrC,cAAc,yBAAyB,CAAA;AACvC,cAAc,mBAAmB,CAAA;AACjC,cAAc,wBAAwB,CAAA;AACtC,cAAc,mBAAmB,CAAA;AACjC,cAAc,sBAAsB,CAAA;AACpC,cAAc,uBAAuB,CAAA;AACrC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,mBAAmB,CAAA;AACjC,cAAc,0BAA0B,CAAA;AACxC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,sBAAsB,CAAA;AACpC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,yBAAyB,CAAA;AACvC,cAAc,0BAA0B,CAAA;AACxC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,yBAAyB,CAAA;AACvC,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,wBAAwB,CAAA;AACtC,cAAc,uBAAuB,CAAA;AACrC,cAAc,qBAAqB,CAAA;AACnC,cAAc,yBAAyB,CAAA;AACvC,cAAc,sBAAsB,CAAA;AACpC,cAAc,oBAAoB,CAAA;AAClC,cAAc,mBAAmB,CAAA;AACjC,cAAc,iCAAiC,CAAA;AAC/C,cAAc,yBAAyB,CAAA;AACvC,cAAc,mBAAmB,CAAA;AACjC,cAAc,uBAAuB,CAAA;AACrC,cAAc,sBAAsB,CAAA;AACpC,cAAc,0BAA0B,CAAA;AAExC,cAAc,kBAAkB,CAAA;AAChC,cAAc,eAAe,CAAA;AAC7B,cAAc,yBAAyB,CAAA"}
|
package/package.json
CHANGED
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import { listToClass } from '@stack-spot/portal-theme'
|
|
2
|
+
import { Children, useMemo } from 'react'
|
|
3
|
+
import { useCitricController } from '../context/hooks'
|
|
4
|
+
import { withRef } from '../utils/react'
|
|
5
|
+
import { BaseButtonProps } from './Button'
|
|
6
|
+
import { asCitricProps, CitricComponent } from './CitricComponent'
|
|
7
|
+
|
|
8
|
+
export type BaseButtonLinkProps = Omit<BaseButtonProps, 'onClick' | 'loading' | 'type'>
|
|
9
|
+
export type ButtonLinkProps = React.JSX.IntrinsicElements['a'] & BaseButtonLinkProps
|
|
10
|
+
|
|
11
|
+
/**
|
|
12
|
+
* Renders a link with the appearance of a button.
|
|
13
|
+
*
|
|
14
|
+
* Whenever a link is clicked, the function `onClickLink` of the nearest CitricController is called with the event and the value of the
|
|
15
|
+
* prop `analytics`.
|
|
16
|
+
*
|
|
17
|
+
* @example
|
|
18
|
+
* ```
|
|
19
|
+
* <ButtonLink href="#">My Button Link</ButtonLink>
|
|
20
|
+
* ```
|
|
21
|
+
*/
|
|
22
|
+
export const ButtonLink = withRef((
|
|
23
|
+
{ appearance, size, feedback, onClick, className, children, analytics, ...props }: ButtonLinkProps,
|
|
24
|
+
) => {
|
|
25
|
+
const citric = useCitricController()
|
|
26
|
+
const isAllLowercase = useMemo(
|
|
27
|
+
() => !Children.toArray(children).some(c => typeof c === 'string' && c.toLocaleLowerCase() !== c),
|
|
28
|
+
[children],
|
|
29
|
+
)
|
|
30
|
+
|
|
31
|
+
const linkProps = {
|
|
32
|
+
component: 'button',
|
|
33
|
+
className: listToClass([size, appearance, isAllLowercase && 'short-text', className]),
|
|
34
|
+
onClick: (e: React.MouseEvent<HTMLAnchorElement>) => {
|
|
35
|
+
onClick?.(e)
|
|
36
|
+
citric?.onClickLink?.(e, analytics ?? false)
|
|
37
|
+
},
|
|
38
|
+
'data-feedback': feedback || undefined,
|
|
39
|
+
...props,
|
|
40
|
+
} as const
|
|
41
|
+
|
|
42
|
+
return citric?.renderLink
|
|
43
|
+
? citric.renderLink(asCitricProps({ ...linkProps, children }))
|
|
44
|
+
: <CitricComponent tag="a" {...linkProps}>{children}</CitricComponent>
|
|
45
|
+
})
|
|
@@ -11,7 +11,7 @@ export type * from './types'
|
|
|
11
11
|
* The default select from the browser is also rendered when `rich = true`, but it is only accessible when navigating with the keyboard
|
|
12
12
|
* (accessibility).
|
|
13
13
|
*
|
|
14
|
-
* This Select is searchable! You just need to set `
|
|
14
|
+
* This Select is searchable! You just need to set `searchable = true`.
|
|
15
15
|
*
|
|
16
16
|
* Attention: this component doesn't accept children, instead of manually writing the tag "option", use the property "options".
|
|
17
17
|
*
|
package/src/index.ts
CHANGED
|
@@ -7,6 +7,7 @@ export * from './components/Badge'
|
|
|
7
7
|
export * from './components/Blockquote'
|
|
8
8
|
export * from './components/Breadcrumb'
|
|
9
9
|
export * from './components/Button'
|
|
10
|
+
export * from './components/ButtonLink'
|
|
10
11
|
export * from './components/Card'
|
|
11
12
|
export * from './components/Checkbox'
|
|
12
13
|
export * from './components/CheckboxGroup'
|