@khanacademy/wonder-blocks-button 10.0.5 → 10.2.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/.turbo/turbo-build$colon$css.log +1 -1
- package/CHANGELOG.md +27 -0
- package/dist/components/activity-button.d.ts +47 -0
- package/dist/components/button.d.ts +6 -5
- package/dist/css/vars.css +64 -8
- package/dist/es/index.js +10 -8
- package/dist/index.d.ts +1 -0
- package/dist/index.js +11 -6
- package/dist/theme/default.d.ts +32 -6
- package/dist/theme/index.d.ts +32 -6
- package/dist/theme/thunderblocks.d.ts +100 -0
- package/dist/util/button.types.d.ts +52 -32
- package/package.json +7 -7
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
|
|
2
|
-
> @khanacademy/wonder-blocks-button@10.0
|
|
2
|
+
> @khanacademy/wonder-blocks-button@10.2.0 build:css /home/runner/work/wonder-blocks/wonder-blocks/packages/wonder-blocks-button
|
|
3
3
|
> pnpm exec wonder-blocks-tokens .
|
|
4
4
|
|
|
5
5
|
CSS variables generated successfully in: /home/runner/work/wonder-blocks/wonder-blocks/packages/wonder-blocks-button/dist/css
|
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,32 @@
|
|
|
1
1
|
# @khanacademy/wonder-blocks-button
|
|
2
2
|
|
|
3
|
+
## 10.2.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- cca3595: Adds ActivityButton component.
|
|
8
|
+
|
|
9
|
+
## 10.1.0
|
|
10
|
+
|
|
11
|
+
### Minor Changes
|
|
12
|
+
|
|
13
|
+
- 7c59ffd: Adds the `thunderblocks` theme to the `Button` component.
|
|
14
|
+
|
|
15
|
+
### Patch Changes
|
|
16
|
+
|
|
17
|
+
- Updated dependencies [8468d8d]
|
|
18
|
+
- Updated dependencies [308696e]
|
|
19
|
+
- Updated dependencies [dc34e0c]
|
|
20
|
+
- Updated dependencies [2cace08]
|
|
21
|
+
- Updated dependencies [f714517]
|
|
22
|
+
- Updated dependencies [8468d8d]
|
|
23
|
+
- @khanacademy/wonder-blocks-tokens@10.5.0
|
|
24
|
+
- @khanacademy/wonder-blocks-icon@5.2.0
|
|
25
|
+
- @khanacademy/wonder-blocks-clickable@7.1.6
|
|
26
|
+
- @khanacademy/wonder-blocks-progress-spinner@3.1.17
|
|
27
|
+
- @khanacademy/wonder-blocks-styles@0.2.13
|
|
28
|
+
- @khanacademy/wonder-blocks-typography@4.2.1
|
|
29
|
+
|
|
3
30
|
## 10.0.5
|
|
4
31
|
|
|
5
32
|
### Patch Changes
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import type { ButtonKind, ButtonRef } from "../util/button.types";
|
|
3
|
+
/**
|
|
4
|
+
* `ActivityButton` is a button that is used for actions in the context of
|
|
5
|
+
* learner activities. It uses a "chonky" design, which is a more playful and
|
|
6
|
+
* engaging design that is suitable for learner activities.
|
|
7
|
+
*
|
|
8
|
+
* ```tsx
|
|
9
|
+
* import magnifyingGlassIcon from
|
|
10
|
+
* "@phosphor-icons/core/regular/magnifying-glass.svg";
|
|
11
|
+
* import {ActivityButton} from "@khanacademy/wonder-blocks-button";
|
|
12
|
+
*
|
|
13
|
+
* <ActivityButton
|
|
14
|
+
* startIcon={magnifyingGlassIcon}
|
|
15
|
+
* onClick={(e) => console.log("Hello, world!")}
|
|
16
|
+
* >
|
|
17
|
+
* Hello, world!
|
|
18
|
+
* </ActivityButton>
|
|
19
|
+
* ```
|
|
20
|
+
*/
|
|
21
|
+
export declare const ActivityButton: React.ForwardRefExoticComponent<Partial<Omit<import("@khanacademy/wonder-blocks-core").AriaProps, "aria-disabled">> & {
|
|
22
|
+
children: string;
|
|
23
|
+
startIcon?: import("@khanacademy/wonder-blocks-icon").PhosphorIconAsset;
|
|
24
|
+
endIcon?: import("@khanacademy/wonder-blocks-icon").PhosphorIconAsset;
|
|
25
|
+
kind?: ButtonKind;
|
|
26
|
+
disabled?: boolean;
|
|
27
|
+
id?: string;
|
|
28
|
+
testId?: string;
|
|
29
|
+
rel?: string;
|
|
30
|
+
target?: "_blank";
|
|
31
|
+
tabIndex?: number;
|
|
32
|
+
skipClientNav?: boolean;
|
|
33
|
+
href?: string;
|
|
34
|
+
type?: "submit";
|
|
35
|
+
className?: string;
|
|
36
|
+
onClick?: (e: React.SyntheticEvent) => unknown;
|
|
37
|
+
beforeNav?: () => Promise<unknown>;
|
|
38
|
+
safeWithNav?: () => Promise<unknown>;
|
|
39
|
+
} & {
|
|
40
|
+
styles?: {
|
|
41
|
+
root?: import("@khanacademy/wonder-blocks-core").StyleType;
|
|
42
|
+
box?: import("@khanacademy/wonder-blocks-core").StyleType;
|
|
43
|
+
startIcon?: import("@khanacademy/wonder-blocks-core").StyleType;
|
|
44
|
+
endIcon?: import("@khanacademy/wonder-blocks-core").StyleType;
|
|
45
|
+
label?: import("@khanacademy/wonder-blocks-core").StyleType;
|
|
46
|
+
};
|
|
47
|
+
} & React.RefAttributes<ButtonRef>>;
|
|
@@ -21,10 +21,7 @@ declare const Button: React.ForwardRefExoticComponent<Partial<Omit<import("@khan
|
|
|
21
21
|
children: string;
|
|
22
22
|
startIcon?: import("@khanacademy/wonder-blocks-icon").PhosphorIconAsset;
|
|
23
23
|
endIcon?: import("@khanacademy/wonder-blocks-icon").PhosphorIconAsset;
|
|
24
|
-
spinner?: boolean;
|
|
25
|
-
actionType?: import("../util/button.types").ButtonActionType;
|
|
26
24
|
kind?: import("../util/button.types").ButtonKind;
|
|
27
|
-
size?: import("../util/button.types").ButtonSize;
|
|
28
25
|
disabled?: boolean;
|
|
29
26
|
id?: string;
|
|
30
27
|
testId?: string;
|
|
@@ -32,13 +29,17 @@ declare const Button: React.ForwardRefExoticComponent<Partial<Omit<import("@khan
|
|
|
32
29
|
target?: "_blank";
|
|
33
30
|
tabIndex?: number;
|
|
34
31
|
skipClientNav?: boolean;
|
|
35
|
-
labelStyle?: import("@khanacademy/wonder-blocks-core").StyleType;
|
|
36
|
-
style?: import("@khanacademy/wonder-blocks-core").StyleType;
|
|
37
32
|
href?: string;
|
|
38
33
|
type?: "submit";
|
|
39
34
|
className?: string;
|
|
40
35
|
onClick?: (e: React.SyntheticEvent) => unknown;
|
|
41
36
|
beforeNav?: () => Promise<unknown>;
|
|
42
37
|
safeWithNav?: () => Promise<unknown>;
|
|
38
|
+
} & {
|
|
39
|
+
actionType?: import("../util/button.types").ButtonActionType;
|
|
40
|
+
size?: import("../util/button.types").ButtonSize;
|
|
41
|
+
spinner?: boolean;
|
|
42
|
+
labelStyle?: import("@khanacademy/wonder-blocks-core").StyleType;
|
|
43
|
+
style?: import("@khanacademy/wonder-blocks-core").StyleType;
|
|
43
44
|
} & React.RefAttributes<ButtonRef>>;
|
|
44
45
|
export default Button;
|
package/dist/css/vars.css
CHANGED
|
@@ -5,27 +5,83 @@
|
|
|
5
5
|
--wb-c-button-root-border-width-secondary-hover: var(--wb-border-width-thin);
|
|
6
6
|
--wb-c-button-root-border-width-secondary-press: var(--wb-border-width-thin);
|
|
7
7
|
--wb-c-button-root-border-width-tertiary-default: var(--wb-border-width-none);
|
|
8
|
-
--wb-c-button-root-border-width-tertiary-hover: var(--wb-border-width-
|
|
9
|
-
--wb-c-button-root-border-width-tertiary-press: var(--wb-border-width-
|
|
8
|
+
--wb-c-button-root-border-width-tertiary-hover: var(--wb-border-width-none);
|
|
9
|
+
--wb-c-button-root-border-width-tertiary-press: var(--wb-border-width-none);
|
|
10
10
|
--wb-c-button-root-border-offset-primary: var(--wb-border-width-medium);
|
|
11
11
|
--wb-c-button-root-border-offset-secondary: 0;
|
|
12
12
|
--wb-c-button-root-border-offset-tertiary: 0;
|
|
13
|
-
--wb-c-button-root-border-radius-
|
|
14
|
-
--wb-c-button-root-border-radius-
|
|
15
|
-
--wb-c-button-root-border-radius-
|
|
13
|
+
--wb-c-button-root-border-radius-default: var(--wb-border-radius-radius_040);
|
|
14
|
+
--wb-c-button-root-border-radius-hover: var(--wb-border-radius-radius_040);
|
|
15
|
+
--wb-c-button-root-border-radius-press: var(--wb-border-radius-radius_040);
|
|
16
16
|
--wb-c-button-root-sizing-height-small: var(--wb-sizing-size_320);
|
|
17
17
|
--wb-c-button-root-sizing-height-medium: var(--wb-sizing-size_400);
|
|
18
18
|
--wb-c-button-root-sizing-height-large: var(--wb-sizing-size_560);
|
|
19
19
|
--wb-c-button-root-sizing-underline-hover: var(--wb-sizing-size_020);
|
|
20
20
|
--wb-c-button-root-sizing-underline-press: var(--wb-sizing-size_010);
|
|
21
|
-
--wb-c-button-root-padding-
|
|
22
|
-
--wb-c-button-root-padding-
|
|
21
|
+
--wb-c-button-root-layout-padding-inline-primary-small: var(--wb-sizing-size_160);
|
|
22
|
+
--wb-c-button-root-layout-padding-inline-primary-medium: var(--wb-sizing-size_160);
|
|
23
|
+
--wb-c-button-root-layout-padding-inline-primary-large: var(--wb-sizing-size_320);
|
|
24
|
+
--wb-c-button-root-layout-padding-inline-secondary-small: var(--wb-sizing-size_120);
|
|
25
|
+
--wb-c-button-root-layout-padding-inline-secondary-medium: var(--wb-sizing-size_160);
|
|
26
|
+
--wb-c-button-root-layout-padding-inline-secondary-large: var(--wb-sizing-size_180);
|
|
27
|
+
--wb-c-button-root-layout-padding-inline-tertiary-small: var(--wb-sizing-size_0);
|
|
28
|
+
--wb-c-button-root-layout-padding-inline-tertiary-medium: var(--wb-sizing-size_0);
|
|
29
|
+
--wb-c-button-root-layout-padding-inline-tertiary-large: var(--wb-sizing-size_0);
|
|
23
30
|
--wb-c-button-root-font-size-large: 1.8rem;
|
|
24
31
|
--wb-c-button-root-font-lineHeight-small: var(--wb-font-lineHeight-xMedium);
|
|
25
32
|
--wb-c-button-root-font-lineHeight-default: var(--wb-font-lineHeight-large);
|
|
26
33
|
--wb-c-button-root-font-lineHeight-large: 2.6rem;
|
|
27
34
|
--wb-c-button-root-font-weight-default: var(--wb-font-weight-bold);
|
|
35
|
+
--wb-c-button-root-font-decoration-hover: underline;
|
|
36
|
+
--wb-c-button-root-font-decoration-press: underline;
|
|
28
37
|
--wb-c-button-root-font-offset-default: var(--wb-sizing-size_040);
|
|
29
38
|
--wb-c-button-icon-margin-inline-inner: var(--wb-sizing-size_060);
|
|
30
39
|
--wb-c-button-icon-margin-inline-outer: calc(-1 * var(--wb-border-width-medium));
|
|
31
|
-
--wb-c-button-icon-padding: var(--wb-sizing-size_020);
|
|
40
|
+
--wb-c-button-icon-padding: var(--wb-sizing-size_020);
|
|
41
|
+
--wb-c-button-icon-sizing-small: var(--wb-sizing-size_160);
|
|
42
|
+
--wb-c-button-icon-sizing-medium: var(--wb-sizing-size_240);
|
|
43
|
+
--wb-c-button-icon-sizing-large: var(--wb-sizing-size_240);}
|
|
44
|
+
|
|
45
|
+
[data-wb-theme='thunderblocks'] {--wb-c-button-root-border-width-primary-default: var(--wb-border-width-none);
|
|
46
|
+
--wb-c-button-root-border-width-primary-hover: var(--wb-border-width-none);
|
|
47
|
+
--wb-c-button-root-border-width-primary-press: var(--wb-border-width-none);
|
|
48
|
+
--wb-c-button-root-border-width-secondary-default: var(--wb-border-width-thin);
|
|
49
|
+
--wb-c-button-root-border-width-secondary-hover: var(--wb-border-width-thin);
|
|
50
|
+
--wb-c-button-root-border-width-secondary-press: var(--wb-border-width-thin);
|
|
51
|
+
--wb-c-button-root-border-width-tertiary-default: var(--wb-border-width-none);
|
|
52
|
+
--wb-c-button-root-border-width-tertiary-hover: var(--wb-border-width-medium);
|
|
53
|
+
--wb-c-button-root-border-width-tertiary-press: var(--wb-border-width-medium);
|
|
54
|
+
--wb-c-button-root-border-offset-primary: var(--wb-border-width-medium);
|
|
55
|
+
--wb-c-button-root-border-offset-secondary: 0;
|
|
56
|
+
--wb-c-button-root-border-offset-tertiary: 0;
|
|
57
|
+
--wb-c-button-root-border-radius-default: var(--wb-border-radius-radius_080);
|
|
58
|
+
--wb-c-button-root-border-radius-hover: var(--wb-border-radius-radius_080);
|
|
59
|
+
--wb-c-button-root-border-radius-press: var(--wb-border-radius-radius_120);
|
|
60
|
+
--wb-c-button-root-sizing-height-small: var(--wb-sizing-size_260);
|
|
61
|
+
--wb-c-button-root-sizing-height-medium: var(--wb-sizing-size_400);
|
|
62
|
+
--wb-c-button-root-sizing-height-large: var(--wb-sizing-size_440);
|
|
63
|
+
--wb-c-button-root-sizing-underline-hover: var(--wb-sizing-size_0);
|
|
64
|
+
--wb-c-button-root-sizing-underline-press: var(--wb-sizing-size_0);
|
|
65
|
+
--wb-c-button-root-layout-padding-inline-primary-small: var(--wb-sizing-size_080);
|
|
66
|
+
--wb-c-button-root-layout-padding-inline-primary-medium: var(--wb-sizing-size_160);
|
|
67
|
+
--wb-c-button-root-layout-padding-inline-primary-large: var(--wb-sizing-size_180);
|
|
68
|
+
--wb-c-button-root-layout-padding-inline-secondary-small: var(--wb-sizing-size_080);
|
|
69
|
+
--wb-c-button-root-layout-padding-inline-secondary-medium: var(--wb-sizing-size_160);
|
|
70
|
+
--wb-c-button-root-layout-padding-inline-secondary-large: var(--wb-sizing-size_180);
|
|
71
|
+
--wb-c-button-root-layout-padding-inline-tertiary-small: var(--wb-sizing-size_080);
|
|
72
|
+
--wb-c-button-root-layout-padding-inline-tertiary-medium: var(--wb-sizing-size_160);
|
|
73
|
+
--wb-c-button-root-layout-padding-inline-tertiary-large: var(--wb-sizing-size_180);
|
|
74
|
+
--wb-c-button-root-font-size-large: 1.8rem;
|
|
75
|
+
--wb-c-button-root-font-lineHeight-small: var(--wb-font-lineHeight-xMedium);
|
|
76
|
+
--wb-c-button-root-font-lineHeight-default: var(--wb-font-lineHeight-large);
|
|
77
|
+
--wb-c-button-root-font-lineHeight-large: 2.6rem;
|
|
78
|
+
--wb-c-button-root-font-weight-default: var(--wb-font-weight-bold);
|
|
79
|
+
--wb-c-button-root-font-decoration-hover: none;
|
|
80
|
+
--wb-c-button-root-font-decoration-press: none;
|
|
81
|
+
--wb-c-button-root-font-offset-default: var(--wb-sizing-size_0);
|
|
82
|
+
--wb-c-button-icon-margin-inline-inner: var(--wb-sizing-size_060);
|
|
83
|
+
--wb-c-button-icon-margin-inline-outer: calc(-1 * var(--wb-border-width-medium));
|
|
84
|
+
--wb-c-button-icon-padding: var(--wb-sizing-size_020);
|
|
85
|
+
--wb-c-button-icon-sizing-small: var(--wb-sizing-size_120);
|
|
86
|
+
--wb-c-button-icon-sizing-medium: var(--wb-sizing-size_180);
|
|
87
|
+
--wb-c-button-icon-sizing-large: var(--wb-sizing-size_200);}
|
package/dist/es/index.js
CHANGED
|
@@ -1,25 +1,27 @@
|
|
|
1
|
-
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
1
|
+
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
2
2
|
import * as React from 'react';
|
|
3
3
|
import { isClientSideUrl, getClickableBehavior } from '@khanacademy/wonder-blocks-clickable';
|
|
4
4
|
import { Link, useInRouterContext } from 'react-router-dom-v5-compat';
|
|
5
5
|
import { StyleSheet } from 'aphrodite';
|
|
6
|
-
import { LabelSmall, LabelLarge } from '@khanacademy/wonder-blocks-typography';
|
|
6
|
+
import { LabelSmall, LabelLarge, BodyText } from '@khanacademy/wonder-blocks-typography';
|
|
7
7
|
import { addStyle, View } from '@khanacademy/wonder-blocks-core';
|
|
8
8
|
import { CircularSpinner } from '@khanacademy/wonder-blocks-progress-spinner';
|
|
9
9
|
import { focusStyles } from '@khanacademy/wonder-blocks-styles';
|
|
10
10
|
import { sizing, border, font, mapValuesToCssVars, semanticColor } from '@khanacademy/wonder-blocks-tokens';
|
|
11
11
|
import { PhosphorIcon } from '@khanacademy/wonder-blocks-icon';
|
|
12
12
|
|
|
13
|
-
|
|
13
|
+
const textUnderlineOffset=sizing.size_040;const theme$2={root:{border:{width:{primary:{default:border.width.none,hover:border.width.medium,press:border.width.medium},secondary:{default:border.width.thin,hover:border.width.thin,press:border.width.thin},tertiary:{default:border.width.none,hover:border.width.none,press:border.width.none}},offset:{primary:border.width.medium,secondary:0,tertiary:0},radius:{default:border.radius.radius_040,hover:border.radius.radius_040,press:border.radius.radius_040}},sizing:{height:{small:sizing.size_320,medium:sizing.size_400,large:sizing.size_560},underline:{hover:sizing.size_020,press:sizing.size_010}},layout:{padding:{inline:{primary:{small:sizing.size_160,medium:sizing.size_160,large:sizing.size_320},secondary:{small:sizing.size_120,medium:sizing.size_160,large:sizing.size_180},tertiary:{small:sizing.size_0,medium:sizing.size_0,large:sizing.size_0}}}},font:{size:{large:"1.8rem"},lineHeight:{small:font.lineHeight.xMedium,default:font.lineHeight.large,large:"2.6rem"},weight:{default:font.weight.bold},decoration:{hover:"underline",press:"underline"},offset:{default:textUnderlineOffset}}},icon:{margin:{inline:{inner:sizing.size_060,outer:`calc(-1 * ${border.width.medium})`}},padding:sizing.size_020,sizing:{small:sizing.size_160,medium:sizing.size_240,large:sizing.size_240}}};
|
|
14
14
|
|
|
15
|
-
|
|
15
|
+
var theme$1 = mapValuesToCssVars(theme$2,"--wb-c-button-");
|
|
16
16
|
|
|
17
|
-
|
|
17
|
+
function ButtonIcon({icon,size,style,testId}){const iconStyle={width:theme$1.icon.sizing[size],height:theme$1.icon.sizing[size]};const commonProps={"aria-hidden":true,color:"currentColor",style:[style,iconStyle],testId};switch(size){case"small":return jsx(PhosphorIcon,{...commonProps,size:"small",icon:icon});case"medium":default:return jsx(PhosphorIcon,{...commonProps,size:"medium",icon:icon})}}
|
|
18
18
|
|
|
19
|
-
const StyledA=addStyle("a");const StyledButton=addStyle("button");const StyledLink=addStyle(Link);const ButtonUnstyled=React.forwardRef(function ButtonUnstyled(props,ref){const{children,disabled,href,id,skipClientNav,style,testId,type,...restProps}=props;const commonProps={"data-testid":testId,id:id,role:"button",style:[styles$
|
|
19
|
+
const StyledA=addStyle("a");const StyledButton=addStyle("button");const StyledLink=addStyle(Link);const ButtonUnstyled=React.forwardRef(function ButtonUnstyled(props,ref){const{children,disabled,href,id,skipClientNav,style,testId,type,...restProps}=props;const commonProps={"data-testid":testId,id:id,role:"button",style:[styles$2.reset,style],...restProps};const inRouterContext=useInRouterContext();if(href&&!disabled){return inRouterContext&&!skipClientNav&&isClientSideUrl(href)?jsx(StyledLink,{...commonProps,to:href,ref:ref,children:children}):jsx(StyledA,{...commonProps,href:href,ref:ref,children:children})}else {return jsx(StyledButton,{type:type||"button",...commonProps,"aria-disabled":disabled,ref:ref,children:children})}});const styles$2=StyleSheet.create({reset:{position:"relative",display:"inline-flex",alignItems:"center",justifyContent:"center",margin:0,padding:0,border:"none",cursor:"pointer",outline:"none",textDecoration:"none",boxSizing:"border-box",touchAction:"manipulation",userSelect:"none",":focus":{WebkitTapHighlightColor:"rgba(0,0,0,0)"}}});
|
|
20
20
|
|
|
21
|
-
const ButtonCore=React.forwardRef(function ButtonCore(props,ref){const{children,skipClientNav,actionType,disabled:disabledProp,focused,hovered,href=undefined,kind="primary",labelStyle,pressed,size="medium",style,testId,type=undefined,spinner,startIcon,endIcon,id,waiting:_,...restProps}=props;const buttonStyles=_generateStyles(actionType,kind,size);const disabled=spinner||disabledProp;const defaultStyle=[sharedStyles.shared,startIcon&&sharedStyles.withStartIcon,endIcon&&sharedStyles.withEndIcon,buttonStyles.default,disabled&&buttonStyles.disabled,!disabled&&(pressed?buttonStyles.pressed:focused&&buttonStyles.focused),size==="small"&&sharedStyles.small,size==="large"&&sharedStyles.large];const Label=size==="small"?LabelSmall:LabelLarge;const label=jsx(Label,{style:[sharedStyles.text,size==="small"&&sharedStyles.smallText,size==="large"&&sharedStyles.largeText,labelStyle,spinner&&sharedStyles.hiddenText,kind==="tertiary"&&!disabled&&(pressed?[buttonStyles.hover,buttonStyles.active]:hovered&&buttonStyles.hover)],testId:testId?`${testId}-inner-label`:undefined,children:children});const sizeMapping={medium:"small",small:"xsmall",large:"medium"};const iconSize=size==="small"?"small":"medium";const contents=jsxs(React.Fragment,{children:[startIcon&&jsx(View,{style:sharedStyles.iconWrapper,children:jsx(ButtonIcon,{size:iconSize,icon:startIcon,style:[sharedStyles.startIcon,kind==="tertiary"&&sharedStyles.tertiaryStartIcon],testId:testId?`${testId}-start-icon`:undefined})}),label,spinner&&jsx(CircularSpinner,{style:sharedStyles.spinner,size:sizeMapping[size],light:kind==="primary",testId:`${testId||"button"}-spinner`}),endIcon&&jsx(View,{testId:testId?`${testId}-end-icon-wrapper`:undefined,style:[styles.endIcon,sharedStyles.iconWrapper,sharedStyles.endIconWrapper,kind==="tertiary"&&sharedStyles.endIconWrapperTertiary],children:jsx(ButtonIcon,{size:iconSize,icon:endIcon,testId:testId?`${testId}-end-icon`:undefined})})]});return jsx(ButtonUnstyled,{...restProps,disabled:disabled,href:href,id:id,ref:ref,skipClientNav:skipClientNav,style:[defaultStyle,style],testId:testId,tabIndex:props.tabIndex,type:type,children:contents})});const sharedStyles=StyleSheet.create({shared:{height:theme.root.sizing.height.medium,paddingBlock:0
|
|
21
|
+
const ButtonCore=React.forwardRef(function ButtonCore(props,ref){const{children,skipClientNav,actionType,disabled:disabledProp,focused,hovered,href=undefined,kind="primary",labelStyle,pressed,size="medium",style,testId,type=undefined,spinner,startIcon,endIcon,id,waiting:_,...restProps}=props;const buttonStyles=_generateStyles$1(actionType,kind,size);const disabled=spinner||disabledProp;const defaultStyle=[sharedStyles.shared,startIcon&&sharedStyles.withStartIcon,endIcon&&sharedStyles.withEndIcon,buttonStyles.default,disabled&&buttonStyles.disabled,!disabled&&(pressed?buttonStyles.pressed:focused&&buttonStyles.focused),size==="small"&&sharedStyles.small,size==="large"&&sharedStyles.large];const Label=size==="small"?LabelSmall:LabelLarge;const label=jsx(Label,{style:[sharedStyles.text,size==="small"&&sharedStyles.smallText,size==="large"&&sharedStyles.largeText,labelStyle,spinner&&sharedStyles.hiddenText,kind==="tertiary"&&!disabled&&(pressed?[buttonStyles.hover,buttonStyles.active]:hovered&&buttonStyles.hover)],testId:testId?`${testId}-inner-label`:undefined,children:children});const sizeMapping={medium:"small",small:"xsmall",large:"medium"};const iconSize=size==="small"?"small":"medium";const contents=jsxs(React.Fragment,{children:[startIcon&&jsx(View,{style:sharedStyles.iconWrapper,children:jsx(ButtonIcon,{size:iconSize,icon:startIcon,style:[sharedStyles.startIcon,kind==="tertiary"&&sharedStyles.tertiaryStartIcon],testId:testId?`${testId}-start-icon`:undefined})}),label,spinner&&jsx(CircularSpinner,{style:sharedStyles.spinner,size:sizeMapping[size],light:kind==="primary",testId:`${testId||"button"}-spinner`}),endIcon&&jsx(View,{testId:testId?`${testId}-end-icon-wrapper`:undefined,style:[styles$1.endIcon,sharedStyles.iconWrapper,sharedStyles.endIconWrapper,kind==="tertiary"&&sharedStyles.endIconWrapperTertiary],children:jsx(ButtonIcon,{size:iconSize,icon:endIcon,testId:testId?`${testId}-end-icon`:undefined})})]});return jsx(ButtonUnstyled,{...restProps,disabled:disabled,href:href,id:id,ref:ref,skipClientNav:skipClientNav,style:[defaultStyle,style],testId:testId,tabIndex:props.tabIndex,type:type,children:contents})});const sharedStyles=StyleSheet.create({shared:{height:theme$1.root.sizing.height.medium,paddingBlock:0},small:{height:theme$1.root.sizing.height.small},large:{height:theme$1.root.sizing.height.large},text:{alignItems:"center",fontWeight:theme$1.root.font.weight.default,whiteSpace:"nowrap",overflow:"hidden",lineHeight:theme$1.root.font.lineHeight.default,textOverflow:"ellipsis",display:"inline-block",pointerEvents:"none"},smallText:{lineHeight:theme$1.root.font.lineHeight.small},largeText:{fontSize:theme$1.root.font.size.large,lineHeight:theme$1.root.font.lineHeight.large},hiddenText:{visibility:"hidden"},spinner:{position:"absolute"},startIcon:{marginInlineStart:theme$1.icon.margin.inline.outer,marginInlineEnd:theme$1.icon.margin.inline.inner},tertiaryStartIcon:{marginInlineStart:0},endIcon:{marginInlineStart:theme$1.icon.margin.inline.inner},iconWrapper:{padding:theme$1.icon.padding,minWidth:"auto"},endIconWrapper:{marginInlineStart:theme$1.icon.margin.inline.inner,marginInlineEnd:theme$1.icon.margin.inline.outer},endIconWrapperTertiary:{marginInlineEnd:0}});const styles$1={};const _generateStyles$1=(actionType="progressive",kind,size)=>{const buttonType=`${actionType}-${kind}-${size}`;if(styles$1[buttonType]){return styles$1[buttonType]}const paddingInline=theme$1.root.layout.padding.inline[kind][size];const borderWidthKind=theme$1.root.border.width[kind];const outlineOffsetKind=theme$1.root.border.offset[kind];const themeVariant=semanticColor.action[kind][actionType];const disabledState=semanticColor.action[kind].disabled;const disabledStatesStyles={borderColor:disabledState.border,borderWidth:borderWidthKind.default,borderRadius:theme$1.root.border.radius.default,background:disabledState.background,color:disabledState.foreground};const disabledStatesOverrides={...disabledStatesStyles,outline:"none",boxShadow:"none",textDecoration:"none",textDecorationThickness:"unset",textUnderlineOffset:"unset"};const pressStyles={background:themeVariant.press.background,borderRadius:theme$1.root.border.radius.press,color:themeVariant.press.foreground,...kind==="primary"?{outline:`${borderWidthKind.press} solid ${themeVariant.press.border}`,outlineOffset:outlineOffsetKind}:undefined,...kind!=="primary"?{borderColor:themeVariant.press.border,boxShadow:`inset 0 0 0 ${borderWidthKind.press} ${themeVariant.press.border}`}:undefined,...kind==="tertiary"?{textUnderlineOffset:theme$1.root.font.offset.default,textDecoration:`${theme$1.root.font.decoration.press} ${theme$1.root.sizing.underline.press}`}:undefined};const newStyles={default:{borderRadius:theme$1.root.border.radius.default,paddingInline:paddingInline,borderStyle:"solid",borderWidth:borderWidthKind.default,borderColor:themeVariant.default.border,background:themeVariant.default.background,color:themeVariant.default.foreground,transition:"border-radius 0.1s ease-in-out",":hover":{background:themeVariant.hover.background,borderRadius:theme$1.root.border.radius.hover,color:themeVariant.hover.foreground,...kind==="primary"?{outline:`${borderWidthKind.hover} solid ${themeVariant.hover.border}`,outlineOffset:outlineOffsetKind}:undefined,...kind!=="primary"?{borderColor:themeVariant.hover.border,boxShadow:`inset 0 0 0 ${borderWidthKind.hover} ${themeVariant.hover.border}`}:undefined,...kind==="tertiary"?{textUnderlineOffset:theme$1.root.font.offset.default,textDecoration:`${theme$1.root.font.decoration.hover} ${theme$1.root.sizing.underline.hover}`}:undefined},["@media not (hover: hover)"]:{":hover":{backgroundColor:"transparent"}},":active":pressStyles,...focusStyles.focus,...kind==="secondary"?{":focus-visible:hover":{...focusStyles.focus[":focus-visible"],boxShadow:`inset 0 0 0 ${borderWidthKind.hover} ${themeVariant.hover.border}, ${focusStyles.focus[":focus-visible"].boxShadow}`},":focus-visible:active":{...focusStyles.focus[":focus-visible"],boxShadow:`inset 0 0 0 ${borderWidthKind.press} ${themeVariant.press.border}, ${focusStyles.focus[":focus-visible"].boxShadow}`}}:{}},pressed:pressStyles,disabled:{cursor:"not-allowed",...disabledStatesStyles,":hover":disabledStatesOverrides,":active":disabledStatesOverrides,":focus-visible":disabledStatesStyles}};styles$1[buttonType]=StyleSheet.create(newStyles);return styles$1[buttonType]};
|
|
22
22
|
|
|
23
23
|
const Button=React.forwardRef(function Button(props,ref){const{href=undefined,type=undefined,children,skipClientNav,onClick,beforeNav=undefined,safeWithNav=undefined,tabIndex,target,rel,actionType="progressive",kind="primary",size="medium",disabled=false,spinner=false,...sharedButtonCoreProps}=props;const inRouterContext=useInRouterContext();const ClickableBehavior=getClickableBehavior(href,skipClientNav,inRouterContext);const extraClickableProps=beforeNav?{beforeNav}:{target};return jsx(ClickableBehavior,{disabled:spinner||disabled,href:href,role:"button",type:type,onClick:onClick,safeWithNav:safeWithNav,rel:rel,...extraClickableProps,children:(state,restChildProps)=>jsx(ButtonCore,{...sharedButtonCoreProps,...state,...restChildProps,disabled:disabled,spinner:spinner||state.waiting,actionType:actionType,kind:kind,size:size,skipClientNav:skipClientNav,href:href,target:target,type:type,tabIndex:tabIndex,ref:ref,children:children})})});
|
|
24
24
|
|
|
25
|
-
|
|
25
|
+
const ActivityButtonCore=React.forwardRef(function ActivityButtonCore(props,ref){const{children,disabled=false,kind="primary",focused,pressed,styles:stylesProp,type=undefined,startIcon,endIcon,hovered:_,waiting:__,...restProps}=props;const buttonStyles=_generateStyles("progressive",disabled,kind);const sharedStyles=[buttonStyles.button,disabled&&buttonStyles.disabled,!disabled&&pressed&&buttonStyles.pressed,!disabled&&focused&&buttonStyles.focused,stylesProp?.root];const chonkyStyles=[buttonStyles.chonky,disabled&&buttonStyles.chonkyDisabled,!disabled&&pressed&&buttonStyles.chonkyPressed,stylesProp?.box];return jsx(ButtonUnstyled,{...restProps,disabled:disabled,ref:ref,style:sharedStyles,type:type,children:jsx(Fragment,{children:jsxs(View,{style:chonkyStyles,className:"chonky",children:[startIcon&&jsx(PhosphorIcon,{size:"medium",color:"currentColor",icon:startIcon,style:[styles.icon,stylesProp?.startIcon],"aria-hidden":"true"}),jsx(BodyText,{tag:"span",size:"medium",weight:"semi",style:[styles.label,stylesProp?.label],children:children}),endIcon&&jsx(PhosphorIcon,{size:"medium",color:"currentColor",icon:endIcon,style:[styles.icon,stylesProp?.endIcon],"aria-hidden":"true"})]})})})});const ActivityButton=React.forwardRef(function ActivityButton(props,ref){const{href=undefined,type=undefined,children,skipClientNav,onClick,beforeNav=undefined,safeWithNav=undefined,tabIndex,target,rel,kind="primary",disabled=false,...sharedButtonCoreProps}=props;const inRouterContext=useInRouterContext();const ClickableBehavior=getClickableBehavior(href,skipClientNav,inRouterContext);const extraClickableProps=beforeNav?{beforeNav}:{target};return jsx(ClickableBehavior,{disabled:disabled,href:href,role:href?"link":"button",type:type,onClick:onClick,safeWithNav:safeWithNav,rel:rel,...extraClickableProps,children:(state,restChildProps)=>jsx(ActivityButtonCore,{...sharedButtonCoreProps,...state,...restChildProps,disabled:disabled,kind:kind,skipClientNav:skipClientNav,href:href,target:target,type:type,tabIndex:tabIndex,ref:ref,children:children})})});const theme={root:{border:{width:{primary:{rest:border.width.thin,hover:border.width.thin,press:border.width.thin},secondary:{rest:border.width.thin,hover:border.width.thin,press:border.width.thin},tertiary:{rest:border.width.thin,hover:border.width.thin,press:border.width.thin}},radius:border.radius.radius_120},layout:{padding:{block:sizing.size_140,inline:sizing.size_480}},shadow:{y:{rest:"6px",hover:"8px",press:sizing.size_0}}},label:{color:{progressive:semanticColor.core.foreground.instructive.default,neutral:semanticColor.core.foreground.neutral.default,disabled:semanticColor.core.foreground.disabled.default},font:{lineHeight:sizing.size_140},layout:{padding:{blockStart:sizing.size_040,blockEnd:sizing.size_060},width:sizing.size_640}},icon:{sizing:{height:sizing.size_200,width:sizing.size_200}}};const styles={icon:{alignSelf:"center",width:theme.icon.sizing.width,height:theme.icon.sizing.height},label:{lineHeight:theme.label.font.lineHeight,paddingBlockStart:theme.label.layout.padding.blockStart,paddingBlockEnd:theme.label.layout.padding.blockEnd}};const stateStyles={};const _generateStyles=(actionType="progressive",disabled,kind)=>{const buttonType=`${actionType}-d_${disabled}-${kind}`;if(stateStyles[buttonType]){return stateStyles[buttonType]}const borderWidthKind=theme.root.border.width[kind];const themeVariant=semanticColor.chonky[actionType];const disabledState=semanticColor.chonky.disabled;const disabledStatesStyles={outline:"none",transform:"none"};const chonkyDisabled={background:disabledState.background[kind],borderWidth:borderWidthKind.rest,borderColor:disabledState.border[kind],color:disabledState.foreground[kind],boxShadow:`0 ${theme.root.shadow.y.rest} 0 0 ${disabledState.shadow[kind]}`,transform:"none"};const chonkyPressed={background:themeVariant.background[kind].press,border:`${borderWidthKind.press} solid ${themeVariant.border[kind].press}`,boxShadow:`0 ${theme.root.shadow.y.press} 0 0 ${themeVariant.shadow[kind].press}`,color:themeVariant.foreground[kind].press,transform:`translateY(${theme.root.shadow.y.rest})`};const newStyles={button:{background:"transparent",borderRadius:theme.root.border.radius,color:theme.label.color[actionType],height:"auto",flexDirection:"column",gap:sizing.size_020,alignSelf:"flex-start",justifySelf:"center",[":is(:hover) .chonky"]:{background:themeVariant.background[kind].hover,border:`${borderWidthKind.hover} solid ${themeVariant.border[kind].hover}`,boxShadow:`0 ${theme.root.shadow.y.hover} 0 0 ${themeVariant.shadow[kind].hover}`,color:themeVariant.foreground[kind].hover,transform:`translateY(calc((${theme.root.shadow.y.hover} - ${theme.root.shadow.y.rest}) * -1))`},[":is(:active) .chonky"]:chonkyPressed,...focusStyles.focus},focused:focusStyles.focus[":focus-visible"],disabled:{cursor:"not-allowed",color:theme.label.color.disabled,...disabledStatesStyles,":hover":disabledStatesStyles,":active":disabledStatesStyles,":focus-visible":{transform:"none"},[":is(:hover) .chonky"]:disabledStatesStyles,[":is(:hover) .chonky"]:chonkyDisabled,[":is(:active) .chonky"]:chonkyDisabled},pressed:{[".chonky"]:chonkyPressed},chonky:{flexDirection:"row",gap:sizing.size_080,borderRadius:theme.root.border.radius,marginBlockEnd:theme.root.shadow.y.rest,maxWidth:"100%",paddingBlock:theme.root.layout.padding.block,paddingInline:theme.root.layout.padding.inline,background:themeVariant.background[kind].rest,border:`${borderWidthKind.rest} solid ${themeVariant.border[kind].rest}`,color:themeVariant.foreground[kind].rest,boxShadow:`0 ${theme.root.shadow.y.rest} 0 0 ${themeVariant.shadow[kind].rest}`,transition:"all 0.12s ease-out",["@media not (hover: hover)"]:{transition:"none"}},chonkyPressed,chonkyDisabled};stateStyles[buttonType]=StyleSheet.create(newStyles);return stateStyles[buttonType]};
|
|
26
|
+
|
|
27
|
+
export { ActivityButton, Button as default };
|
package/dist/index.d.ts
CHANGED
package/dist/index.js
CHANGED
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
3
5
|
var jsxRuntime = require('react/jsx-runtime');
|
|
4
6
|
var React = require('react');
|
|
5
7
|
var wonderBlocksClickable = require('@khanacademy/wonder-blocks-clickable');
|
|
@@ -32,16 +34,19 @@ function _interopNamespace(e) {
|
|
|
32
34
|
|
|
33
35
|
var React__namespace = /*#__PURE__*/_interopNamespace(React);
|
|
34
36
|
|
|
35
|
-
|
|
37
|
+
const textUnderlineOffset=wonderBlocksTokens.sizing.size_040;const theme$2={root:{border:{width:{primary:{default:wonderBlocksTokens.border.width.none,hover:wonderBlocksTokens.border.width.medium,press:wonderBlocksTokens.border.width.medium},secondary:{default:wonderBlocksTokens.border.width.thin,hover:wonderBlocksTokens.border.width.thin,press:wonderBlocksTokens.border.width.thin},tertiary:{default:wonderBlocksTokens.border.width.none,hover:wonderBlocksTokens.border.width.none,press:wonderBlocksTokens.border.width.none}},offset:{primary:wonderBlocksTokens.border.width.medium,secondary:0,tertiary:0},radius:{default:wonderBlocksTokens.border.radius.radius_040,hover:wonderBlocksTokens.border.radius.radius_040,press:wonderBlocksTokens.border.radius.radius_040}},sizing:{height:{small:wonderBlocksTokens.sizing.size_320,medium:wonderBlocksTokens.sizing.size_400,large:wonderBlocksTokens.sizing.size_560},underline:{hover:wonderBlocksTokens.sizing.size_020,press:wonderBlocksTokens.sizing.size_010}},layout:{padding:{inline:{primary:{small:wonderBlocksTokens.sizing.size_160,medium:wonderBlocksTokens.sizing.size_160,large:wonderBlocksTokens.sizing.size_320},secondary:{small:wonderBlocksTokens.sizing.size_120,medium:wonderBlocksTokens.sizing.size_160,large:wonderBlocksTokens.sizing.size_180},tertiary:{small:wonderBlocksTokens.sizing.size_0,medium:wonderBlocksTokens.sizing.size_0,large:wonderBlocksTokens.sizing.size_0}}}},font:{size:{large:"1.8rem"},lineHeight:{small:wonderBlocksTokens.font.lineHeight.xMedium,default:wonderBlocksTokens.font.lineHeight.large,large:"2.6rem"},weight:{default:wonderBlocksTokens.font.weight.bold},decoration:{hover:"underline",press:"underline"},offset:{default:textUnderlineOffset}}},icon:{margin:{inline:{inner:wonderBlocksTokens.sizing.size_060,outer:`calc(-1 * ${wonderBlocksTokens.border.width.medium})`}},padding:wonderBlocksTokens.sizing.size_020,sizing:{small:wonderBlocksTokens.sizing.size_160,medium:wonderBlocksTokens.sizing.size_240,large:wonderBlocksTokens.sizing.size_240}}};
|
|
36
38
|
|
|
37
|
-
|
|
39
|
+
var theme$1 = wonderBlocksTokens.mapValuesToCssVars(theme$2,"--wb-c-button-");
|
|
38
40
|
|
|
39
|
-
|
|
41
|
+
function ButtonIcon({icon,size,style,testId}){const iconStyle={width:theme$1.icon.sizing[size],height:theme$1.icon.sizing[size]};const commonProps={"aria-hidden":true,color:"currentColor",style:[style,iconStyle],testId};switch(size){case"small":return jsxRuntime.jsx(wonderBlocksIcon.PhosphorIcon,{...commonProps,size:"small",icon:icon});case"medium":default:return jsxRuntime.jsx(wonderBlocksIcon.PhosphorIcon,{...commonProps,size:"medium",icon:icon})}}
|
|
40
42
|
|
|
41
|
-
const StyledA=wonderBlocksCore.addStyle("a");const StyledButton=wonderBlocksCore.addStyle("button");const StyledLink=wonderBlocksCore.addStyle(reactRouterDomV5Compat.Link);const ButtonUnstyled=React__namespace.forwardRef(function ButtonUnstyled(props,ref){const{children,disabled,href,id,skipClientNav,style,testId,type,...restProps}=props;const commonProps={"data-testid":testId,id:id,role:"button",style:[styles$
|
|
43
|
+
const StyledA=wonderBlocksCore.addStyle("a");const StyledButton=wonderBlocksCore.addStyle("button");const StyledLink=wonderBlocksCore.addStyle(reactRouterDomV5Compat.Link);const ButtonUnstyled=React__namespace.forwardRef(function ButtonUnstyled(props,ref){const{children,disabled,href,id,skipClientNav,style,testId,type,...restProps}=props;const commonProps={"data-testid":testId,id:id,role:"button",style:[styles$2.reset,style],...restProps};const inRouterContext=reactRouterDomV5Compat.useInRouterContext();if(href&&!disabled){return inRouterContext&&!skipClientNav&&wonderBlocksClickable.isClientSideUrl(href)?jsxRuntime.jsx(StyledLink,{...commonProps,to:href,ref:ref,children:children}):jsxRuntime.jsx(StyledA,{...commonProps,href:href,ref:ref,children:children})}else {return jsxRuntime.jsx(StyledButton,{type:type||"button",...commonProps,"aria-disabled":disabled,ref:ref,children:children})}});const styles$2=aphrodite.StyleSheet.create({reset:{position:"relative",display:"inline-flex",alignItems:"center",justifyContent:"center",margin:0,padding:0,border:"none",cursor:"pointer",outline:"none",textDecoration:"none",boxSizing:"border-box",touchAction:"manipulation",userSelect:"none",":focus":{WebkitTapHighlightColor:"rgba(0,0,0,0)"}}});
|
|
42
44
|
|
|
43
|
-
const ButtonCore=React__namespace.forwardRef(function ButtonCore(props,ref){const{children,skipClientNav,actionType,disabled:disabledProp,focused,hovered,href=undefined,kind="primary",labelStyle,pressed,size="medium",style,testId,type=undefined,spinner,startIcon,endIcon,id,waiting:_,...restProps}=props;const buttonStyles=_generateStyles(actionType,kind,size);const disabled=spinner||disabledProp;const defaultStyle=[sharedStyles.shared,startIcon&&sharedStyles.withStartIcon,endIcon&&sharedStyles.withEndIcon,buttonStyles.default,disabled&&buttonStyles.disabled,!disabled&&(pressed?buttonStyles.pressed:focused&&buttonStyles.focused),size==="small"&&sharedStyles.small,size==="large"&&sharedStyles.large];const Label=size==="small"?wonderBlocksTypography.LabelSmall:wonderBlocksTypography.LabelLarge;const label=jsxRuntime.jsx(Label,{style:[sharedStyles.text,size==="small"&&sharedStyles.smallText,size==="large"&&sharedStyles.largeText,labelStyle,spinner&&sharedStyles.hiddenText,kind==="tertiary"&&!disabled&&(pressed?[buttonStyles.hover,buttonStyles.active]:hovered&&buttonStyles.hover)],testId:testId?`${testId}-inner-label`:undefined,children:children});const sizeMapping={medium:"small",small:"xsmall",large:"medium"};const iconSize=size==="small"?"small":"medium";const contents=jsxRuntime.jsxs(React__namespace.Fragment,{children:[startIcon&&jsxRuntime.jsx(wonderBlocksCore.View,{style:sharedStyles.iconWrapper,children:jsxRuntime.jsx(ButtonIcon,{size:iconSize,icon:startIcon,style:[sharedStyles.startIcon,kind==="tertiary"&&sharedStyles.tertiaryStartIcon],testId:testId?`${testId}-start-icon`:undefined})}),label,spinner&&jsxRuntime.jsx(wonderBlocksProgressSpinner.CircularSpinner,{style:sharedStyles.spinner,size:sizeMapping[size],light:kind==="primary",testId:`${testId||"button"}-spinner`}),endIcon&&jsxRuntime.jsx(wonderBlocksCore.View,{testId:testId?`${testId}-end-icon-wrapper`:undefined,style:[styles.endIcon,sharedStyles.iconWrapper,sharedStyles.endIconWrapper,kind==="tertiary"&&sharedStyles.endIconWrapperTertiary],children:jsxRuntime.jsx(ButtonIcon,{size:iconSize,icon:endIcon,testId:testId?`${testId}-end-icon`:undefined})})]});return jsxRuntime.jsx(ButtonUnstyled,{...restProps,disabled:disabled,href:href,id:id,ref:ref,skipClientNav:skipClientNav,style:[defaultStyle,style],testId:testId,tabIndex:props.tabIndex,type:type,children:contents})});const sharedStyles=aphrodite.StyleSheet.create({shared:{height:theme.root.sizing.height.medium,paddingBlock:0
|
|
45
|
+
const ButtonCore=React__namespace.forwardRef(function ButtonCore(props,ref){const{children,skipClientNav,actionType,disabled:disabledProp,focused,hovered,href=undefined,kind="primary",labelStyle,pressed,size="medium",style,testId,type=undefined,spinner,startIcon,endIcon,id,waiting:_,...restProps}=props;const buttonStyles=_generateStyles$1(actionType,kind,size);const disabled=spinner||disabledProp;const defaultStyle=[sharedStyles.shared,startIcon&&sharedStyles.withStartIcon,endIcon&&sharedStyles.withEndIcon,buttonStyles.default,disabled&&buttonStyles.disabled,!disabled&&(pressed?buttonStyles.pressed:focused&&buttonStyles.focused),size==="small"&&sharedStyles.small,size==="large"&&sharedStyles.large];const Label=size==="small"?wonderBlocksTypography.LabelSmall:wonderBlocksTypography.LabelLarge;const label=jsxRuntime.jsx(Label,{style:[sharedStyles.text,size==="small"&&sharedStyles.smallText,size==="large"&&sharedStyles.largeText,labelStyle,spinner&&sharedStyles.hiddenText,kind==="tertiary"&&!disabled&&(pressed?[buttonStyles.hover,buttonStyles.active]:hovered&&buttonStyles.hover)],testId:testId?`${testId}-inner-label`:undefined,children:children});const sizeMapping={medium:"small",small:"xsmall",large:"medium"};const iconSize=size==="small"?"small":"medium";const contents=jsxRuntime.jsxs(React__namespace.Fragment,{children:[startIcon&&jsxRuntime.jsx(wonderBlocksCore.View,{style:sharedStyles.iconWrapper,children:jsxRuntime.jsx(ButtonIcon,{size:iconSize,icon:startIcon,style:[sharedStyles.startIcon,kind==="tertiary"&&sharedStyles.tertiaryStartIcon],testId:testId?`${testId}-start-icon`:undefined})}),label,spinner&&jsxRuntime.jsx(wonderBlocksProgressSpinner.CircularSpinner,{style:sharedStyles.spinner,size:sizeMapping[size],light:kind==="primary",testId:`${testId||"button"}-spinner`}),endIcon&&jsxRuntime.jsx(wonderBlocksCore.View,{testId:testId?`${testId}-end-icon-wrapper`:undefined,style:[styles$1.endIcon,sharedStyles.iconWrapper,sharedStyles.endIconWrapper,kind==="tertiary"&&sharedStyles.endIconWrapperTertiary],children:jsxRuntime.jsx(ButtonIcon,{size:iconSize,icon:endIcon,testId:testId?`${testId}-end-icon`:undefined})})]});return jsxRuntime.jsx(ButtonUnstyled,{...restProps,disabled:disabled,href:href,id:id,ref:ref,skipClientNav:skipClientNav,style:[defaultStyle,style],testId:testId,tabIndex:props.tabIndex,type:type,children:contents})});const sharedStyles=aphrodite.StyleSheet.create({shared:{height:theme$1.root.sizing.height.medium,paddingBlock:0},small:{height:theme$1.root.sizing.height.small},large:{height:theme$1.root.sizing.height.large},text:{alignItems:"center",fontWeight:theme$1.root.font.weight.default,whiteSpace:"nowrap",overflow:"hidden",lineHeight:theme$1.root.font.lineHeight.default,textOverflow:"ellipsis",display:"inline-block",pointerEvents:"none"},smallText:{lineHeight:theme$1.root.font.lineHeight.small},largeText:{fontSize:theme$1.root.font.size.large,lineHeight:theme$1.root.font.lineHeight.large},hiddenText:{visibility:"hidden"},spinner:{position:"absolute"},startIcon:{marginInlineStart:theme$1.icon.margin.inline.outer,marginInlineEnd:theme$1.icon.margin.inline.inner},tertiaryStartIcon:{marginInlineStart:0},endIcon:{marginInlineStart:theme$1.icon.margin.inline.inner},iconWrapper:{padding:theme$1.icon.padding,minWidth:"auto"},endIconWrapper:{marginInlineStart:theme$1.icon.margin.inline.inner,marginInlineEnd:theme$1.icon.margin.inline.outer},endIconWrapperTertiary:{marginInlineEnd:0}});const styles$1={};const _generateStyles$1=(actionType="progressive",kind,size)=>{const buttonType=`${actionType}-${kind}-${size}`;if(styles$1[buttonType]){return styles$1[buttonType]}const paddingInline=theme$1.root.layout.padding.inline[kind][size];const borderWidthKind=theme$1.root.border.width[kind];const outlineOffsetKind=theme$1.root.border.offset[kind];const themeVariant=wonderBlocksTokens.semanticColor.action[kind][actionType];const disabledState=wonderBlocksTokens.semanticColor.action[kind].disabled;const disabledStatesStyles={borderColor:disabledState.border,borderWidth:borderWidthKind.default,borderRadius:theme$1.root.border.radius.default,background:disabledState.background,color:disabledState.foreground};const disabledStatesOverrides={...disabledStatesStyles,outline:"none",boxShadow:"none",textDecoration:"none",textDecorationThickness:"unset",textUnderlineOffset:"unset"};const pressStyles={background:themeVariant.press.background,borderRadius:theme$1.root.border.radius.press,color:themeVariant.press.foreground,...kind==="primary"?{outline:`${borderWidthKind.press} solid ${themeVariant.press.border}`,outlineOffset:outlineOffsetKind}:undefined,...kind!=="primary"?{borderColor:themeVariant.press.border,boxShadow:`inset 0 0 0 ${borderWidthKind.press} ${themeVariant.press.border}`}:undefined,...kind==="tertiary"?{textUnderlineOffset:theme$1.root.font.offset.default,textDecoration:`${theme$1.root.font.decoration.press} ${theme$1.root.sizing.underline.press}`}:undefined};const newStyles={default:{borderRadius:theme$1.root.border.radius.default,paddingInline:paddingInline,borderStyle:"solid",borderWidth:borderWidthKind.default,borderColor:themeVariant.default.border,background:themeVariant.default.background,color:themeVariant.default.foreground,transition:"border-radius 0.1s ease-in-out",":hover":{background:themeVariant.hover.background,borderRadius:theme$1.root.border.radius.hover,color:themeVariant.hover.foreground,...kind==="primary"?{outline:`${borderWidthKind.hover} solid ${themeVariant.hover.border}`,outlineOffset:outlineOffsetKind}:undefined,...kind!=="primary"?{borderColor:themeVariant.hover.border,boxShadow:`inset 0 0 0 ${borderWidthKind.hover} ${themeVariant.hover.border}`}:undefined,...kind==="tertiary"?{textUnderlineOffset:theme$1.root.font.offset.default,textDecoration:`${theme$1.root.font.decoration.hover} ${theme$1.root.sizing.underline.hover}`}:undefined},["@media not (hover: hover)"]:{":hover":{backgroundColor:"transparent"}},":active":pressStyles,...wonderBlocksStyles.focusStyles.focus,...kind==="secondary"?{":focus-visible:hover":{...wonderBlocksStyles.focusStyles.focus[":focus-visible"],boxShadow:`inset 0 0 0 ${borderWidthKind.hover} ${themeVariant.hover.border}, ${wonderBlocksStyles.focusStyles.focus[":focus-visible"].boxShadow}`},":focus-visible:active":{...wonderBlocksStyles.focusStyles.focus[":focus-visible"],boxShadow:`inset 0 0 0 ${borderWidthKind.press} ${themeVariant.press.border}, ${wonderBlocksStyles.focusStyles.focus[":focus-visible"].boxShadow}`}}:{}},pressed:pressStyles,disabled:{cursor:"not-allowed",...disabledStatesStyles,":hover":disabledStatesOverrides,":active":disabledStatesOverrides,":focus-visible":disabledStatesStyles}};styles$1[buttonType]=aphrodite.StyleSheet.create(newStyles);return styles$1[buttonType]};
|
|
44
46
|
|
|
45
47
|
const Button=React__namespace.forwardRef(function Button(props,ref){const{href=undefined,type=undefined,children,skipClientNav,onClick,beforeNav=undefined,safeWithNav=undefined,tabIndex,target,rel,actionType="progressive",kind="primary",size="medium",disabled=false,spinner=false,...sharedButtonCoreProps}=props;const inRouterContext=reactRouterDomV5Compat.useInRouterContext();const ClickableBehavior=wonderBlocksClickable.getClickableBehavior(href,skipClientNav,inRouterContext);const extraClickableProps=beforeNav?{beforeNav}:{target};return jsxRuntime.jsx(ClickableBehavior,{disabled:spinner||disabled,href:href,role:"button",type:type,onClick:onClick,safeWithNav:safeWithNav,rel:rel,...extraClickableProps,children:(state,restChildProps)=>jsxRuntime.jsx(ButtonCore,{...sharedButtonCoreProps,...state,...restChildProps,disabled:disabled,spinner:spinner||state.waiting,actionType:actionType,kind:kind,size:size,skipClientNav:skipClientNav,href:href,target:target,type:type,tabIndex:tabIndex,ref:ref,children:children})})});
|
|
46
48
|
|
|
47
|
-
|
|
49
|
+
const ActivityButtonCore=React__namespace.forwardRef(function ActivityButtonCore(props,ref){const{children,disabled=false,kind="primary",focused,pressed,styles:stylesProp,type=undefined,startIcon,endIcon,hovered:_,waiting:__,...restProps}=props;const buttonStyles=_generateStyles("progressive",disabled,kind);const sharedStyles=[buttonStyles.button,disabled&&buttonStyles.disabled,!disabled&&pressed&&buttonStyles.pressed,!disabled&&focused&&buttonStyles.focused,stylesProp?.root];const chonkyStyles=[buttonStyles.chonky,disabled&&buttonStyles.chonkyDisabled,!disabled&&pressed&&buttonStyles.chonkyPressed,stylesProp?.box];return jsxRuntime.jsx(ButtonUnstyled,{...restProps,disabled:disabled,ref:ref,style:sharedStyles,type:type,children:jsxRuntime.jsx(jsxRuntime.Fragment,{children:jsxRuntime.jsxs(wonderBlocksCore.View,{style:chonkyStyles,className:"chonky",children:[startIcon&&jsxRuntime.jsx(wonderBlocksIcon.PhosphorIcon,{size:"medium",color:"currentColor",icon:startIcon,style:[styles.icon,stylesProp?.startIcon],"aria-hidden":"true"}),jsxRuntime.jsx(wonderBlocksTypography.BodyText,{tag:"span",size:"medium",weight:"semi",style:[styles.label,stylesProp?.label],children:children}),endIcon&&jsxRuntime.jsx(wonderBlocksIcon.PhosphorIcon,{size:"medium",color:"currentColor",icon:endIcon,style:[styles.icon,stylesProp?.endIcon],"aria-hidden":"true"})]})})})});const ActivityButton=React__namespace.forwardRef(function ActivityButton(props,ref){const{href=undefined,type=undefined,children,skipClientNav,onClick,beforeNav=undefined,safeWithNav=undefined,tabIndex,target,rel,kind="primary",disabled=false,...sharedButtonCoreProps}=props;const inRouterContext=reactRouterDomV5Compat.useInRouterContext();const ClickableBehavior=wonderBlocksClickable.getClickableBehavior(href,skipClientNav,inRouterContext);const extraClickableProps=beforeNav?{beforeNav}:{target};return jsxRuntime.jsx(ClickableBehavior,{disabled:disabled,href:href,role:href?"link":"button",type:type,onClick:onClick,safeWithNav:safeWithNav,rel:rel,...extraClickableProps,children:(state,restChildProps)=>jsxRuntime.jsx(ActivityButtonCore,{...sharedButtonCoreProps,...state,...restChildProps,disabled:disabled,kind:kind,skipClientNav:skipClientNav,href:href,target:target,type:type,tabIndex:tabIndex,ref:ref,children:children})})});const theme={root:{border:{width:{primary:{rest:wonderBlocksTokens.border.width.thin,hover:wonderBlocksTokens.border.width.thin,press:wonderBlocksTokens.border.width.thin},secondary:{rest:wonderBlocksTokens.border.width.thin,hover:wonderBlocksTokens.border.width.thin,press:wonderBlocksTokens.border.width.thin},tertiary:{rest:wonderBlocksTokens.border.width.thin,hover:wonderBlocksTokens.border.width.thin,press:wonderBlocksTokens.border.width.thin}},radius:wonderBlocksTokens.border.radius.radius_120},layout:{padding:{block:wonderBlocksTokens.sizing.size_140,inline:wonderBlocksTokens.sizing.size_480}},shadow:{y:{rest:"6px",hover:"8px",press:wonderBlocksTokens.sizing.size_0}}},label:{color:{progressive:wonderBlocksTokens.semanticColor.core.foreground.instructive.default,neutral:wonderBlocksTokens.semanticColor.core.foreground.neutral.default,disabled:wonderBlocksTokens.semanticColor.core.foreground.disabled.default},font:{lineHeight:wonderBlocksTokens.sizing.size_140},layout:{padding:{blockStart:wonderBlocksTokens.sizing.size_040,blockEnd:wonderBlocksTokens.sizing.size_060},width:wonderBlocksTokens.sizing.size_640}},icon:{sizing:{height:wonderBlocksTokens.sizing.size_200,width:wonderBlocksTokens.sizing.size_200}}};const styles={icon:{alignSelf:"center",width:theme.icon.sizing.width,height:theme.icon.sizing.height},label:{lineHeight:theme.label.font.lineHeight,paddingBlockStart:theme.label.layout.padding.blockStart,paddingBlockEnd:theme.label.layout.padding.blockEnd}};const stateStyles={};const _generateStyles=(actionType="progressive",disabled,kind)=>{const buttonType=`${actionType}-d_${disabled}-${kind}`;if(stateStyles[buttonType]){return stateStyles[buttonType]}const borderWidthKind=theme.root.border.width[kind];const themeVariant=wonderBlocksTokens.semanticColor.chonky[actionType];const disabledState=wonderBlocksTokens.semanticColor.chonky.disabled;const disabledStatesStyles={outline:"none",transform:"none"};const chonkyDisabled={background:disabledState.background[kind],borderWidth:borderWidthKind.rest,borderColor:disabledState.border[kind],color:disabledState.foreground[kind],boxShadow:`0 ${theme.root.shadow.y.rest} 0 0 ${disabledState.shadow[kind]}`,transform:"none"};const chonkyPressed={background:themeVariant.background[kind].press,border:`${borderWidthKind.press} solid ${themeVariant.border[kind].press}`,boxShadow:`0 ${theme.root.shadow.y.press} 0 0 ${themeVariant.shadow[kind].press}`,color:themeVariant.foreground[kind].press,transform:`translateY(${theme.root.shadow.y.rest})`};const newStyles={button:{background:"transparent",borderRadius:theme.root.border.radius,color:theme.label.color[actionType],height:"auto",flexDirection:"column",gap:wonderBlocksTokens.sizing.size_020,alignSelf:"flex-start",justifySelf:"center",[":is(:hover) .chonky"]:{background:themeVariant.background[kind].hover,border:`${borderWidthKind.hover} solid ${themeVariant.border[kind].hover}`,boxShadow:`0 ${theme.root.shadow.y.hover} 0 0 ${themeVariant.shadow[kind].hover}`,color:themeVariant.foreground[kind].hover,transform:`translateY(calc((${theme.root.shadow.y.hover} - ${theme.root.shadow.y.rest}) * -1))`},[":is(:active) .chonky"]:chonkyPressed,...wonderBlocksStyles.focusStyles.focus},focused:wonderBlocksStyles.focusStyles.focus[":focus-visible"],disabled:{cursor:"not-allowed",color:theme.label.color.disabled,...disabledStatesStyles,":hover":disabledStatesStyles,":active":disabledStatesStyles,":focus-visible":{transform:"none"},[":is(:hover) .chonky"]:disabledStatesStyles,[":is(:hover) .chonky"]:chonkyDisabled,[":is(:active) .chonky"]:chonkyDisabled},pressed:{[".chonky"]:chonkyPressed},chonky:{flexDirection:"row",gap:wonderBlocksTokens.sizing.size_080,borderRadius:theme.root.border.radius,marginBlockEnd:theme.root.shadow.y.rest,maxWidth:"100%",paddingBlock:theme.root.layout.padding.block,paddingInline:theme.root.layout.padding.inline,background:themeVariant.background[kind].rest,border:`${borderWidthKind.rest} solid ${themeVariant.border[kind].rest}`,color:themeVariant.foreground[kind].rest,boxShadow:`0 ${theme.root.shadow.y.rest} 0 0 ${themeVariant.shadow[kind].rest}`,transition:"all 0.12s ease-out",["@media not (hover: hover)"]:{transition:"none"}},chonkyPressed,chonkyDisabled};stateStyles[buttonType]=aphrodite.StyleSheet.create(newStyles);return stateStyles[buttonType]};
|
|
50
|
+
|
|
51
|
+
exports.ActivityButton = ActivityButton;
|
|
52
|
+
exports["default"] = Button;
|
package/dist/theme/default.d.ts
CHANGED
|
@@ -24,9 +24,9 @@ declare const theme: {
|
|
|
24
24
|
tertiary: number;
|
|
25
25
|
};
|
|
26
26
|
radius: {
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
27
|
+
default: string;
|
|
28
|
+
hover: string;
|
|
29
|
+
press: string;
|
|
30
30
|
};
|
|
31
31
|
};
|
|
32
32
|
sizing: {
|
|
@@ -40,9 +40,26 @@ declare const theme: {
|
|
|
40
40
|
press: string;
|
|
41
41
|
};
|
|
42
42
|
};
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
43
|
+
layout: {
|
|
44
|
+
padding: {
|
|
45
|
+
inline: {
|
|
46
|
+
primary: {
|
|
47
|
+
small: string;
|
|
48
|
+
medium: string;
|
|
49
|
+
large: string;
|
|
50
|
+
};
|
|
51
|
+
secondary: {
|
|
52
|
+
small: string;
|
|
53
|
+
medium: string;
|
|
54
|
+
large: string;
|
|
55
|
+
};
|
|
56
|
+
tertiary: {
|
|
57
|
+
small: string;
|
|
58
|
+
medium: string;
|
|
59
|
+
large: string;
|
|
60
|
+
};
|
|
61
|
+
};
|
|
62
|
+
};
|
|
46
63
|
};
|
|
47
64
|
font: {
|
|
48
65
|
size: {
|
|
@@ -56,6 +73,10 @@ declare const theme: {
|
|
|
56
73
|
weight: {
|
|
57
74
|
default: number;
|
|
58
75
|
};
|
|
76
|
+
decoration: {
|
|
77
|
+
hover: string;
|
|
78
|
+
press: string;
|
|
79
|
+
};
|
|
59
80
|
offset: {
|
|
60
81
|
default: string;
|
|
61
82
|
};
|
|
@@ -69,6 +90,11 @@ declare const theme: {
|
|
|
69
90
|
};
|
|
70
91
|
};
|
|
71
92
|
padding: string;
|
|
93
|
+
sizing: {
|
|
94
|
+
small: string;
|
|
95
|
+
medium: string;
|
|
96
|
+
large: string;
|
|
97
|
+
};
|
|
72
98
|
};
|
|
73
99
|
};
|
|
74
100
|
export default theme;
|
package/dist/theme/index.d.ts
CHANGED
|
@@ -24,9 +24,9 @@ declare const _default: {
|
|
|
24
24
|
tertiary: number;
|
|
25
25
|
};
|
|
26
26
|
radius: {
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
27
|
+
default: string;
|
|
28
|
+
hover: string;
|
|
29
|
+
press: string;
|
|
30
30
|
};
|
|
31
31
|
};
|
|
32
32
|
sizing: {
|
|
@@ -40,9 +40,26 @@ declare const _default: {
|
|
|
40
40
|
press: string;
|
|
41
41
|
};
|
|
42
42
|
};
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
43
|
+
layout: {
|
|
44
|
+
padding: {
|
|
45
|
+
inline: {
|
|
46
|
+
primary: {
|
|
47
|
+
small: string;
|
|
48
|
+
medium: string;
|
|
49
|
+
large: string;
|
|
50
|
+
};
|
|
51
|
+
secondary: {
|
|
52
|
+
small: string;
|
|
53
|
+
medium: string;
|
|
54
|
+
large: string;
|
|
55
|
+
};
|
|
56
|
+
tertiary: {
|
|
57
|
+
small: string;
|
|
58
|
+
medium: string;
|
|
59
|
+
large: string;
|
|
60
|
+
};
|
|
61
|
+
};
|
|
62
|
+
};
|
|
46
63
|
};
|
|
47
64
|
font: {
|
|
48
65
|
size: {
|
|
@@ -56,6 +73,10 @@ declare const _default: {
|
|
|
56
73
|
weight: {
|
|
57
74
|
default: number;
|
|
58
75
|
};
|
|
76
|
+
decoration: {
|
|
77
|
+
hover: string;
|
|
78
|
+
press: string;
|
|
79
|
+
};
|
|
59
80
|
offset: {
|
|
60
81
|
default: string;
|
|
61
82
|
};
|
|
@@ -69,6 +90,11 @@ declare const _default: {
|
|
|
69
90
|
};
|
|
70
91
|
};
|
|
71
92
|
padding: string;
|
|
93
|
+
sizing: {
|
|
94
|
+
small: string;
|
|
95
|
+
medium: string;
|
|
96
|
+
large: string;
|
|
97
|
+
};
|
|
72
98
|
};
|
|
73
99
|
};
|
|
74
100
|
export default _default;
|
|
@@ -0,0 +1,100 @@
|
|
|
1
|
+
declare const _default: {
|
|
2
|
+
root: {
|
|
3
|
+
border: {
|
|
4
|
+
width: {
|
|
5
|
+
primary: {
|
|
6
|
+
default: string;
|
|
7
|
+
hover: string;
|
|
8
|
+
press: string;
|
|
9
|
+
};
|
|
10
|
+
secondary: {
|
|
11
|
+
default: string;
|
|
12
|
+
hover: string;
|
|
13
|
+
press: string;
|
|
14
|
+
};
|
|
15
|
+
tertiary: {
|
|
16
|
+
default: string;
|
|
17
|
+
hover: string;
|
|
18
|
+
press: string;
|
|
19
|
+
};
|
|
20
|
+
};
|
|
21
|
+
offset: {
|
|
22
|
+
primary: string;
|
|
23
|
+
secondary: number;
|
|
24
|
+
tertiary: number;
|
|
25
|
+
};
|
|
26
|
+
radius: {
|
|
27
|
+
default: string;
|
|
28
|
+
hover: string;
|
|
29
|
+
press: string;
|
|
30
|
+
};
|
|
31
|
+
};
|
|
32
|
+
sizing: {
|
|
33
|
+
height: {
|
|
34
|
+
small: string;
|
|
35
|
+
medium: string;
|
|
36
|
+
large: string;
|
|
37
|
+
};
|
|
38
|
+
underline: {
|
|
39
|
+
hover: string;
|
|
40
|
+
press: string;
|
|
41
|
+
};
|
|
42
|
+
};
|
|
43
|
+
layout: {
|
|
44
|
+
padding: {
|
|
45
|
+
inline: {
|
|
46
|
+
primary: {
|
|
47
|
+
small: string;
|
|
48
|
+
medium: string;
|
|
49
|
+
large: string;
|
|
50
|
+
};
|
|
51
|
+
secondary: {
|
|
52
|
+
small: string;
|
|
53
|
+
medium: string;
|
|
54
|
+
large: string;
|
|
55
|
+
};
|
|
56
|
+
tertiary: {
|
|
57
|
+
small: string;
|
|
58
|
+
medium: string;
|
|
59
|
+
large: string;
|
|
60
|
+
};
|
|
61
|
+
};
|
|
62
|
+
};
|
|
63
|
+
};
|
|
64
|
+
font: {
|
|
65
|
+
size: {
|
|
66
|
+
large: string;
|
|
67
|
+
};
|
|
68
|
+
lineHeight: {
|
|
69
|
+
small: string;
|
|
70
|
+
default: string;
|
|
71
|
+
large: string;
|
|
72
|
+
};
|
|
73
|
+
weight: {
|
|
74
|
+
default: number;
|
|
75
|
+
};
|
|
76
|
+
decoration: {
|
|
77
|
+
hover: string;
|
|
78
|
+
press: string;
|
|
79
|
+
};
|
|
80
|
+
offset: {
|
|
81
|
+
default: string;
|
|
82
|
+
};
|
|
83
|
+
};
|
|
84
|
+
};
|
|
85
|
+
icon: {
|
|
86
|
+
margin: {
|
|
87
|
+
inline: {
|
|
88
|
+
inner: string;
|
|
89
|
+
outer: string;
|
|
90
|
+
};
|
|
91
|
+
};
|
|
92
|
+
padding: string;
|
|
93
|
+
sizing: {
|
|
94
|
+
small: string;
|
|
95
|
+
medium: string;
|
|
96
|
+
large: string;
|
|
97
|
+
};
|
|
98
|
+
};
|
|
99
|
+
};
|
|
100
|
+
export default _default;
|
|
@@ -3,10 +3,11 @@ import type { AriaProps, StyleType } from "@khanacademy/wonder-blocks-core";
|
|
|
3
3
|
import type { PhosphorIconAsset } from "@khanacademy/wonder-blocks-icon";
|
|
4
4
|
import { Link } from "react-router-dom-v5-compat";
|
|
5
5
|
export type ButtonActionType = "progressive" | "destructive" | "neutral";
|
|
6
|
+
export type ActivityButtonActionType = "progressive" | "neutral";
|
|
6
7
|
export type ButtonKind = "primary" | "secondary" | "tertiary";
|
|
7
8
|
export type ButtonSize = "small" | "medium" | "large";
|
|
8
9
|
export type ButtonRef = typeof Link | HTMLButtonElement | HTMLAnchorElement;
|
|
9
|
-
export type
|
|
10
|
+
export type BaseButtonProps =
|
|
10
11
|
/**
|
|
11
12
|
* aria-label should be used when `spinner={true}` to let people using screen
|
|
12
13
|
* readers that the action taken by clicking the button will take some
|
|
@@ -27,23 +28,6 @@ Partial<Omit<AriaProps, "aria-disabled">> & {
|
|
|
27
28
|
* will appear at the end of the button (right for LTR, left for RTL).
|
|
28
29
|
*/
|
|
29
30
|
endIcon?: PhosphorIconAsset;
|
|
30
|
-
/**
|
|
31
|
-
* If true, replaces the contents with a spinner.
|
|
32
|
-
*
|
|
33
|
-
* Note: setting this prop to `true` will disable the button.
|
|
34
|
-
*/
|
|
35
|
-
spinner?: boolean;
|
|
36
|
-
/**
|
|
37
|
-
* The action type/category of the button.
|
|
38
|
-
*
|
|
39
|
-
* - `progressive` is used for actions that move the user forward in a
|
|
40
|
-
* flow.
|
|
41
|
-
* - `destructive` is used for actions that have a negative impact on
|
|
42
|
-
* the user.
|
|
43
|
-
*
|
|
44
|
-
* Defaults to `progressive`.
|
|
45
|
-
*/
|
|
46
|
-
actionType?: ButtonActionType;
|
|
47
31
|
/**
|
|
48
32
|
* The kind of the button, either primary, secondary, or tertiary.
|
|
49
33
|
*
|
|
@@ -54,11 +38,6 @@ Partial<Omit<AriaProps, "aria-disabled">> & {
|
|
|
54
38
|
* - Tertiary buttons have no background or border
|
|
55
39
|
*/
|
|
56
40
|
kind?: ButtonKind;
|
|
57
|
-
/**
|
|
58
|
-
* The size of the button. "medium" = height: 40; "small" = height: 32;
|
|
59
|
-
* "large" = height: 56;
|
|
60
|
-
*/
|
|
61
|
-
size?: ButtonSize;
|
|
62
41
|
/**
|
|
63
42
|
* Whether the button is disabled.
|
|
64
43
|
*/
|
|
@@ -102,20 +81,12 @@ Partial<Omit<AriaProps, "aria-disabled">> & {
|
|
|
102
81
|
* page reload.
|
|
103
82
|
*/
|
|
104
83
|
skipClientNav?: boolean;
|
|
105
|
-
/**
|
|
106
|
-
* Optional custom styles for the inner label.
|
|
107
|
-
*/
|
|
108
|
-
labelStyle?: StyleType;
|
|
109
|
-
/**
|
|
110
|
-
* Optional custom styles.
|
|
111
|
-
*/
|
|
112
|
-
style?: StyleType;
|
|
113
84
|
/**
|
|
114
85
|
* URL to navigate to.
|
|
115
86
|
*/
|
|
116
87
|
href?: string;
|
|
117
88
|
/**
|
|
118
|
-
* Used for buttons within
|
|
89
|
+
* Used for buttons within forms.
|
|
119
90
|
*/
|
|
120
91
|
type?: "submit";
|
|
121
92
|
/**
|
|
@@ -154,3 +125,52 @@ Partial<Omit<AriaProps, "aria-disabled">> & {
|
|
|
154
125
|
*/
|
|
155
126
|
safeWithNav?: () => Promise<unknown>;
|
|
156
127
|
};
|
|
128
|
+
export type ButtonProps = BaseButtonProps & {
|
|
129
|
+
/**
|
|
130
|
+
* The action type/category of the button.
|
|
131
|
+
*
|
|
132
|
+
* - `progressive` is used for actions that move the user forward in a
|
|
133
|
+
* flow.
|
|
134
|
+
* - `destructive` is used for actions that have a negative impact on
|
|
135
|
+
* the user.
|
|
136
|
+
*
|
|
137
|
+
* Defaults to `progressive`.
|
|
138
|
+
*/
|
|
139
|
+
actionType?: ButtonActionType;
|
|
140
|
+
/**
|
|
141
|
+
* The size of the button. "medium" = height: 40; "small" = height: 32;
|
|
142
|
+
* "large" = height: 56;
|
|
143
|
+
*/
|
|
144
|
+
size?: ButtonSize;
|
|
145
|
+
/**
|
|
146
|
+
* If true, replaces the contents with a spinner.
|
|
147
|
+
*
|
|
148
|
+
* Note: setting this prop to `true` will disable the button.
|
|
149
|
+
*/
|
|
150
|
+
spinner?: boolean;
|
|
151
|
+
/**
|
|
152
|
+
* Optional custom styles for the inner label.
|
|
153
|
+
*/
|
|
154
|
+
labelStyle?: StyleType;
|
|
155
|
+
/**
|
|
156
|
+
* Optional custom styles.
|
|
157
|
+
*/
|
|
158
|
+
style?: StyleType;
|
|
159
|
+
};
|
|
160
|
+
export type ActivityButtonProps = BaseButtonProps & {
|
|
161
|
+
/**
|
|
162
|
+
* Custom styles for the elements in the Badge component.
|
|
163
|
+
* - `root`: Styles the root element (button)
|
|
164
|
+
* - `box`: Styles the "chonky" box element
|
|
165
|
+
* - `startIcon`: Styles the start icon element
|
|
166
|
+
* - `endIcon`: Styles the end icon element
|
|
167
|
+
* - `label`: Styles the text in the button
|
|
168
|
+
*/
|
|
169
|
+
styles?: {
|
|
170
|
+
root?: StyleType;
|
|
171
|
+
box?: StyleType;
|
|
172
|
+
startIcon?: StyleType;
|
|
173
|
+
endIcon?: StyleType;
|
|
174
|
+
label?: StyleType;
|
|
175
|
+
};
|
|
176
|
+
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@khanacademy/wonder-blocks-button",
|
|
3
|
-
"version": "10.0
|
|
3
|
+
"version": "10.2.0",
|
|
4
4
|
"design": "v1",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public"
|
|
@@ -20,13 +20,13 @@
|
|
|
20
20
|
"author": "",
|
|
21
21
|
"license": "MIT",
|
|
22
22
|
"dependencies": {
|
|
23
|
-
"@khanacademy/wonder-blocks-clickable": "7.1.
|
|
23
|
+
"@khanacademy/wonder-blocks-clickable": "7.1.6",
|
|
24
24
|
"@khanacademy/wonder-blocks-core": "12.3.0",
|
|
25
|
-
"@khanacademy/wonder-blocks-icon": "5.
|
|
26
|
-
"@khanacademy/wonder-blocks-progress-spinner": "3.1.
|
|
27
|
-
"@khanacademy/wonder-blocks-styles": "0.2.
|
|
28
|
-
"@khanacademy/wonder-blocks-tokens": "10.
|
|
29
|
-
"@khanacademy/wonder-blocks-typography": "4.2.
|
|
25
|
+
"@khanacademy/wonder-blocks-icon": "5.2.0",
|
|
26
|
+
"@khanacademy/wonder-blocks-progress-spinner": "3.1.17",
|
|
27
|
+
"@khanacademy/wonder-blocks-styles": "0.2.13",
|
|
28
|
+
"@khanacademy/wonder-blocks-tokens": "10.5.0",
|
|
29
|
+
"@khanacademy/wonder-blocks-typography": "4.2.1"
|
|
30
30
|
},
|
|
31
31
|
"peerDependencies": {
|
|
32
32
|
"aphrodite": "^1.2.5",
|