@khanacademy/wonder-blocks-icon-button 11.0.0 → 11.1.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.
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
|
|
2
|
-
> @khanacademy/wonder-blocks-icon-button@11.
|
|
2
|
+
> @khanacademy/wonder-blocks-icon-button@11.1.0 build:css /home/runner/work/wonder-blocks/wonder-blocks/packages/wonder-blocks-icon-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-icon-button/dist/css
|
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,23 @@
|
|
|
1
1
|
# @khanacademy/wonder-blocks-icon-button
|
|
2
2
|
|
|
3
|
+
## 11.1.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- 2f842b1: NodeIconButton: Adds a new `tokens` prop to support overriding component-level tokens
|
|
8
|
+
- 59aba89: Adds a new `NodeIconButton` component for learning path.
|
|
9
|
+
|
|
10
|
+
## 11.0.1
|
|
11
|
+
|
|
12
|
+
### Patch Changes
|
|
13
|
+
|
|
14
|
+
- Updated dependencies [70d6c08]
|
|
15
|
+
- @khanacademy/wonder-blocks-tokens@14.1.3
|
|
16
|
+
- @khanacademy/wonder-blocks-clickable@8.0.5
|
|
17
|
+
- @khanacademy/wonder-blocks-icon@5.3.5
|
|
18
|
+
- @khanacademy/wonder-blocks-styles@0.2.37
|
|
19
|
+
- @khanacademy/wonder-blocks-typography@4.2.27
|
|
20
|
+
|
|
3
21
|
## 11.0.0
|
|
4
22
|
|
|
5
23
|
### Major Changes
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { Link } from "react-router-dom-v5-compat";
|
|
3
|
+
import { StyleType } from "@khanacademy/wonder-blocks-core";
|
|
4
|
+
import type { BaseIconButtonProps } from "../util/icon-button.types";
|
|
5
|
+
type Props = Omit<BaseIconButtonProps, "kind" | "style"> & {
|
|
6
|
+
/**
|
|
7
|
+
* The action type of the button. This determines the visual style of
|
|
8
|
+
* the button. Defaults to `notStarted`.
|
|
9
|
+
*
|
|
10
|
+
* - `complete` is used for buttons that indicate a complete action.
|
|
11
|
+
*/
|
|
12
|
+
actionType?: "notStarted" | "attempted" | "complete";
|
|
13
|
+
/**
|
|
14
|
+
* The alternative text for the icon button. Required for accessibility.
|
|
15
|
+
*/
|
|
16
|
+
"aria-label": string;
|
|
17
|
+
/**
|
|
18
|
+
* The size of the icon button.
|
|
19
|
+
* One of `small` (24) or `large` (68).
|
|
20
|
+
* Defaults to `large`.
|
|
21
|
+
*/
|
|
22
|
+
size?: "small" | "large";
|
|
23
|
+
/**
|
|
24
|
+
* Custom styles for the elements in the NodeIconButton component.
|
|
25
|
+
* - `root`: Styles the root element (button)
|
|
26
|
+
* - `box`: Styles the "chonky" box element
|
|
27
|
+
* - `icon`: Styles the icon element
|
|
28
|
+
*/
|
|
29
|
+
styles?: {
|
|
30
|
+
root?: StyleType;
|
|
31
|
+
box?: StyleType;
|
|
32
|
+
icon?: StyleType;
|
|
33
|
+
};
|
|
34
|
+
/**
|
|
35
|
+
* The token object that contains the CSS variables that can be overridden
|
|
36
|
+
* to customize the appearance of the NodeIconButton component.
|
|
37
|
+
*/
|
|
38
|
+
tokens?: {
|
|
39
|
+
boxForeground?: string;
|
|
40
|
+
boxBackground?: string;
|
|
41
|
+
boxShadowColor?: string;
|
|
42
|
+
boxPadding?: string | number;
|
|
43
|
+
boxShadowYRest?: string | number;
|
|
44
|
+
boxShadowYHover?: string | number;
|
|
45
|
+
boxShadowYPress?: string | number;
|
|
46
|
+
iconSize?: string | number;
|
|
47
|
+
};
|
|
48
|
+
};
|
|
49
|
+
/**
|
|
50
|
+
* Node buttons are visual representations of activities along in a Learning
|
|
51
|
+
* Path. When a represented Node is a button that launches the activity. Nodes
|
|
52
|
+
* use the Chonky shadow style.
|
|
53
|
+
*
|
|
54
|
+
* ```tsx
|
|
55
|
+
* import pencilSimpleIcon from "@phosphor-icons/core/regular/pencil-simple.svg";
|
|
56
|
+
* import {NodeIconButton} from "@khanacademy/wonder-blocks-icon-button";
|
|
57
|
+
*
|
|
58
|
+
* <NodeIconButton
|
|
59
|
+
* icon={pencilSimpleIcon}
|
|
60
|
+
* aria-label="Edit"
|
|
61
|
+
* onClick={(e) => console.log("Hello, world!")}
|
|
62
|
+
* />
|
|
63
|
+
* ```
|
|
64
|
+
*/
|
|
65
|
+
export declare const NodeIconButton: React.ForwardRefExoticComponent<Props & React.RefAttributes<typeof Link | HTMLButtonElement | HTMLAnchorElement>>;
|
|
66
|
+
export {};
|
package/dist/es/index.js
CHANGED
|
@@ -13,12 +13,16 @@ var themeDefault = {iconButton:{root:{border:{offset:{primary:border.width.mediu
|
|
|
13
13
|
|
|
14
14
|
var iconButtonTheme = mapValuesToCssVars(themeDefault,"--wb-c-icon-button-");
|
|
15
15
|
|
|
16
|
-
const StyledA=addStyle("a");const StyledButton=addStyle("button");const StyledLink=addStyle(Link);const IconButtonUnstyled=React.forwardRef(function IconButtonUnstyled(props,ref){const{children,disabled,href,onPress,skipClientNav,style,testId,type="button",...restProps}=props;const inRouterContext=useInRouterContext();const handleKeyDown=React.useCallback(e=>{const key=e.key;if(!href&&(key===keys.enter||key===keys.space)){e.preventDefault();onPress?.(true);}},[href,onPress]);const handleKeyUp=React.useCallback(e=>{const key=e.key;if(!href&&(key===keys.enter||key===keys.space)){if(restProps.onClick){restProps.onClick(e);}onPress?.(false);}},[href,onPress,restProps]);const commonProps={"data-testid":testId,style:[styles$
|
|
16
|
+
const StyledA=addStyle("a");const StyledButton=addStyle("button");const StyledLink=addStyle(Link);const IconButtonUnstyled=React.forwardRef(function IconButtonUnstyled(props,ref){const{children,disabled,href,onPress,skipClientNav,style,testId,type="button",...restProps}=props;const inRouterContext=useInRouterContext();const handleKeyDown=React.useCallback(e=>{const key=e.key;if(!href&&(key===keys.enter||key===keys.space)){e.preventDefault();onPress?.(true);}},[href,onPress]);const handleKeyUp=React.useCallback(e=>{const key=e.key;if(!href&&(key===keys.enter||key===keys.space)){if(restProps.onClick){restProps.onClick(e);}onPress?.(false);}},[href,onPress,restProps]);const commonProps={"data-testid":testId,style:[styles$4.shared,style],onKeyDown:handleKeyDown,onKeyUp:handleKeyUp,...restProps};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,...commonProps,onClick:disabled?undefined:restProps.onClick,"aria-disabled":disabled,ref:ref,children:children})}});const styles$4=StyleSheet.create({shared:{position:"relative",display:"inline-flex",alignItems:"center",justifyContent:"center",boxSizing:"border-box",padding:0,cursor:"pointer",border:"none",outline:"none",textDecoration:"none",background:"none",margin:0,touchAction:"manipulation"}});
|
|
17
17
|
|
|
18
|
-
const theme$2=iconButtonTheme.iconButton;function IconChooser({icon,size}){const iconStyle={width:theme$2.icon.sizing[size],height:theme$2.icon.sizing[size]};if(typeof icon!=="string"){return React.cloneElement(icon,{style:[iconStyle]})}switch(size){case"small":return jsx(PhosphorIcon,{size:"small",color:"currentColor",icon:icon,style:iconStyle});case"medium":default:return jsx(PhosphorIcon,{size:"medium",color:"currentColor",icon:icon,style:iconStyle})}}const IconButton=React.forwardRef(function IconButton(props,ref){const{actionType="progressive",disabled=false,icon,kind="primary",size="medium",style,type="button",...restProps}=props;const[pressed,setPressed]=React.useState(false);const buttonStyles=_generateStyles$2(actionType,!!disabled,kind,size);const styles=[buttonStyles.default,disabled&&buttonStyles.disabled,pressed&&buttonStyles.pressed,style];const handlePress=React.useCallback(isPressing=>{setPressed(isPressing);},[]);return jsx(IconButtonUnstyled,{...restProps,disabled:disabled,onPress:handlePress,ref:ref,style:styles,type:type,children:jsx(IconChooser,{size:size,icon:icon})})});const styles$
|
|
18
|
+
const theme$2=iconButtonTheme.iconButton;function IconChooser({icon,size}){const iconStyle={width:theme$2.icon.sizing[size],height:theme$2.icon.sizing[size]};if(typeof icon!=="string"){return React.cloneElement(icon,{style:[iconStyle]})}switch(size){case"small":return jsx(PhosphorIcon,{size:"small",color:"currentColor",icon:icon,style:iconStyle});case"medium":default:return jsx(PhosphorIcon,{size:"medium",color:"currentColor",icon:icon,style:iconStyle})}}const IconButton=React.forwardRef(function IconButton(props,ref){const{actionType="progressive",disabled=false,icon,kind="primary",size="medium",style,type="button",...restProps}=props;const[pressed,setPressed]=React.useState(false);const buttonStyles=_generateStyles$2(actionType,!!disabled,kind,size);const styles=[buttonStyles.default,disabled&&buttonStyles.disabled,pressed&&buttonStyles.pressed,style];const handlePress=React.useCallback(isPressing=>{setPressed(isPressing);},[]);return jsx(IconButtonUnstyled,{...restProps,disabled:disabled,onPress:handlePress,ref:ref,style:styles,type:type,children:jsx(IconChooser,{size:size,icon:icon})})});const styles$3={};const _generateStyles$2=(actionType="progressive",disabled,kind,size)=>{const buttonType=`${actionType}-d_${disabled}-${kind}-${size}`;if(styles$3[buttonType]){return styles$3[buttonType]}const borderWidthKind=theme$2.root.border.width[kind];const outlineOffsetKind=theme$2.root.border.offset[kind];const themeVariant=semanticColor.action[kind][actionType];const disabledState=semanticColor.action[kind].disabled;const disabledStatesStyles={borderColor:disabledState.border,borderWidth:borderWidthKind.default,background:disabledState.background,color:disabledState.foreground};const pressStyles={outline:kind==="primary"?`${borderWidthKind.press} solid ${themeVariant.press.border}`:"none",outlineOffset:kind==="primary"?outlineOffsetKind:undefined,border:kind!=="primary"?`${borderWidthKind.press} solid ${themeVariant.press.border}`:"none",background:themeVariant.press.background,borderRadius:theme$2.root.border.radius.press,color:themeVariant.press.foreground,transition:"border-radius 0.1s ease-in-out"};const newStyles={default:{height:theme$2.root.sizing[size],width:theme$2.root.sizing[size],borderRadius:theme$2.root.border.radius.default,borderStyle:"solid",borderWidth:borderWidthKind.default,borderColor:themeVariant.default.border,background:themeVariant.default.background,color:themeVariant.default.foreground,":hover":{background:themeVariant.hover.background,borderRadius:theme$2.root.border.radius.hover,color:themeVariant.hover.foreground,outline:kind==="primary"?`${borderWidthKind.hover} solid ${themeVariant.hover.border}`:undefined,outlineOffset:kind==="primary"?outlineOffsetKind:undefined,border:kind!=="primary"?`${borderWidthKind.hover} solid ${themeVariant.hover.border}`:undefined},["@media not (hover: hover)"]:{":hover":{backgroundColor:"transparent"}},":active":pressStyles,...focusStyles.focus},disabled:{cursor:"not-allowed",...disabledStatesStyles,":hover":{...disabledStatesStyles,outline:"none",borderRadius:theme$2.root.border.radius.default},":active":{...disabledStatesStyles,outline:"none",borderRadius:theme$2.root.border.radius.default},":focus-visible":disabledStatesStyles},pressed:pressStyles};styles$3[buttonType]=StyleSheet.create(newStyles);return styles$3[buttonType]};
|
|
19
19
|
|
|
20
|
-
const ActivityIconButton=React.forwardRef(function ActivityIconButton(props,ref){const{actionType="progressive",disabled=false,icon,kind="primary",styles:stylesProp,type="button","aria-label":ariaLabel,label,...restProps}=props;const[pressed,setPressed]=React.useState(false);const buttonStyles=_generateStyles$1(actionType,!!disabled,kind);const styles=[buttonStyles.button,disabled&&buttonStyles.disabled,!disabled&&pressed&&buttonStyles.pressed,stylesProp?.root];const chonkyStyles=[buttonStyles.chonky,disabled&&buttonStyles.chonkyDisabled,!disabled&&pressed&&buttonStyles.chonkyPressed,stylesProp?.box];const handlePress=React.useCallback(isPressing=>{setPressed(isPressing);},[]);const hasVisibleLabel=label!==undefined&&label!=="";const iconElement=React.useMemo(()=>{if(typeof icon==="string"){return jsx(PhosphorIcon,{size:"medium",color:"currentColor",icon:icon})}return icon},[icon]);return jsx(IconButtonUnstyled,{...restProps,disabled:disabled,onPress:handlePress,ref:ref,style:styles,type:type,...!hasVisibleLabel?{"aria-label":ariaLabel}:{},children:jsxs(Fragment,{children:[jsx(View,{style:chonkyStyles,className:"chonky",children:iconElement}),hasVisibleLabel&&jsx(BodyText,{tag:"span",size:"medium",weight:"semi",style:[buttonStyles.label,stylesProp?.label],children:label})]})})});const theme$1={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_200}},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},layout:{inlineSize:sizing.size_640}}};const styles$
|
|
20
|
+
const ActivityIconButton=React.forwardRef(function ActivityIconButton(props,ref){const{actionType="progressive",disabled=false,icon,kind="primary",styles:stylesProp,type="button","aria-label":ariaLabel,label,...restProps}=props;const[pressed,setPressed]=React.useState(false);const buttonStyles=_generateStyles$1(actionType,!!disabled,kind);const styles=[buttonStyles.button,disabled&&buttonStyles.disabled,!disabled&&pressed&&buttonStyles.pressed,stylesProp?.root];const chonkyStyles=[buttonStyles.chonky,disabled&&buttonStyles.chonkyDisabled,!disabled&&pressed&&buttonStyles.chonkyPressed,stylesProp?.box];const handlePress=React.useCallback(isPressing=>{setPressed(isPressing);},[]);const hasVisibleLabel=label!==undefined&&label!=="";const iconElement=React.useMemo(()=>{if(typeof icon==="string"){return jsx(PhosphorIcon,{size:"medium",color:"currentColor",icon:icon})}return icon},[icon]);return jsx(IconButtonUnstyled,{...restProps,disabled:disabled,onPress:handlePress,ref:ref,style:styles,type:type,...!hasVisibleLabel?{"aria-label":ariaLabel}:{},children:jsxs(Fragment,{children:[jsx(View,{style:chonkyStyles,className:"chonky",children:iconElement}),hasVisibleLabel&&jsx(BodyText,{tag:"span",size:"medium",weight:"semi",style:[buttonStyles.label,stylesProp?.label],children:label})]})})});const theme$1={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_200}},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},layout:{inlineSize:sizing.size_640}}};const styles$2={};const _generateStyles$1=(actionType="progressive",disabled,kind)=>{const buttonType=`${actionType}-d_${disabled}-${kind}`;if(styles$2[buttonType]){return styles$2[buttonType]}const borderWidthKind=theme$1.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$1.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$1.root.shadow.y.press} 0 0 ${themeVariant.shadow[kind].press}`,color:themeVariant.foreground[kind].press,transform:`translateY(${theme$1.root.shadow.y.rest})`};const newStyles={button:{borderRadius:theme$1.root.border.radius,color:theme$1.label.color[actionType],flexDirection:"column",gap:sizing.size_020,maxInlineSize:200,alignSelf:"flex-start",justifySelf:"center",[":is(:hover) .chonky"]:{background:themeVariant.background[kind].hover,border:`${borderWidthKind.hover} solid ${themeVariant.border[kind].hover}`,boxShadow:`0 ${theme$1.root.shadow.y.hover} 0 0 ${themeVariant.shadow[kind].hover}`,color:themeVariant.foreground[kind].hover,transform:`translateY(calc((${theme$1.root.shadow.y.hover} - ${theme$1.root.shadow.y.rest}) * -1))`},[":is(:active) .chonky"]:chonkyPressed,...focusStyles.focus},disabled:{cursor:"not-allowed",color:theme$1.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:{borderRadius:theme$1.root.border.radius,marginBlockEnd:theme$1.root.shadow.y.rest,paddingBlock:theme$1.root.layout.padding.block,paddingInline:theme$1.root.layout.padding.inline,inlineSize:theme$1.label.layout.inlineSize,justifyContent:"center",alignItems:"center",background:themeVariant.background[kind].rest,border:`${borderWidthKind.rest} solid ${themeVariant.border[kind].rest}`,color:themeVariant.foreground[kind].rest,boxShadow:`0 ${theme$1.root.shadow.y.rest} 0 0 ${themeVariant.shadow[kind].rest}`,transition:"all 0.12s ease-out",["@media not (hover: hover)"]:{transition:"none"}},chonkyPressed,chonkyDisabled,label:{margin:0,textAlign:"center",display:"-webkit-box",WebkitBoxOrient:"vertical",WebkitLineClamp:"2",overflow:"hidden",wordBreak:"break-word"}};styles$2[buttonType]=StyleSheet.create(newStyles);return styles$2[buttonType]};
|
|
21
21
|
|
|
22
|
-
const ConversationIconButton=React.forwardRef(function ConversationIconButton(props,ref){const{actionType="progressive",disabled=false,icon,kind="primary",style,type="button",...restProps}=props;const[pressed,setPressed]=React.useState(false);const buttonStyles=_generateStyles(actionType,!!disabled,kind);const styles=[buttonStyles.default,disabled&&buttonStyles.disabled,pressed&&buttonStyles.pressed,style];const handlePress=React.useCallback(isPressing=>{setPressed(isPressing);},[]);return jsx(IconButtonUnstyled,{...restProps,disabled:disabled,onPress:handlePress,ref:ref,style:styles,type:type,children:typeof icon!=="string"?React.cloneElement(icon,{style:[staticStyles.icon]}):jsx(PhosphorIcon,{size:"small",color:"currentColor",icon:icon})})});const staticStyles=StyleSheet.create({icon:{width:sizing.size_160,height:sizing.size_160}});const styles={};const theme={root:{border:{radius:border.radius.radius_full,width:{primary:{default:border.width.thin,hover:border.width.thin,press:border.width.medium},secondary:{default:border.width.thin,hover:border.width.thin,press:border.width.medium},tertiary:{default:border.width.thin,hover:border.width.thin,press:border.width.medium}}},layout:{padding:sizing.size_100},sizing:{default:sizing.size_360}}};const _generateStyles=(actionType="progressive",disabled,kind)=>{const buttonType=`${actionType}-d_${disabled}-${kind}`;if(styles[buttonType]){return styles[buttonType]}const borderWidthKind=theme.root.border.width[kind];const themeVariant=semanticColor.action[kind][actionType];const disabledState=semanticColor.action[kind].disabled;const disabledStatesStyles={padding:theme.root.layout.padding,borderColor:disabledState.border,borderWidth:borderWidthKind.default,background:disabledState.background,color:disabledState.foreground};const pressStyles={border:`${borderWidthKind.press} solid ${themeVariant.press.border}`,background:themeVariant.press.background,color:themeVariant.press.foreground,padding:`calc(${theme.root.layout.padding} - 1px)`};const newStyles={default:{borderRadius:theme.root.border.radius,padding:theme.root.layout.padding,alignSelf:"center",justifySelf:"center",borderStyle:"solid",borderWidth:borderWidthKind.default,borderColor:themeVariant.default.border,background:themeVariant.default.background,color:themeVariant.default.foreground,":hover":{padding:theme.root.layout.padding,background:themeVariant.hover.background,color:themeVariant.hover.foreground,border:`${borderWidthKind.hover} solid ${themeVariant.hover.border}`},["@media not (hover: hover)"]:{":hover":{backgroundColor:"transparent"}},":active":pressStyles,...focusStyles.focus},disabled:{cursor:"not-allowed",...disabledStatesStyles,":hover":{...disabledStatesStyles,outline:"none"},":active":{...disabledStatesStyles,outline:"none"},":focus-visible":disabledStatesStyles},pressed:pressStyles};styles[buttonType]=StyleSheet.create(newStyles);return styles[buttonType]};
|
|
22
|
+
const ConversationIconButton=React.forwardRef(function ConversationIconButton(props,ref){const{actionType="progressive",disabled=false,icon,kind="primary",style,type="button",...restProps}=props;const[pressed,setPressed]=React.useState(false);const buttonStyles=_generateStyles(actionType,!!disabled,kind);const styles=[buttonStyles.default,disabled&&buttonStyles.disabled,pressed&&buttonStyles.pressed,style];const handlePress=React.useCallback(isPressing=>{setPressed(isPressing);},[]);return jsx(IconButtonUnstyled,{...restProps,disabled:disabled,onPress:handlePress,ref:ref,style:styles,type:type,children:typeof icon!=="string"?React.cloneElement(icon,{style:[staticStyles.icon]}):jsx(PhosphorIcon,{size:"small",color:"currentColor",icon:icon})})});const staticStyles=StyleSheet.create({icon:{width:sizing.size_160,height:sizing.size_160}});const styles$1={};const theme={root:{border:{radius:border.radius.radius_full,width:{primary:{default:border.width.thin,hover:border.width.thin,press:border.width.medium},secondary:{default:border.width.thin,hover:border.width.thin,press:border.width.medium},tertiary:{default:border.width.thin,hover:border.width.thin,press:border.width.medium}}},layout:{padding:sizing.size_100},sizing:{default:sizing.size_360}}};const _generateStyles=(actionType="progressive",disabled,kind)=>{const buttonType=`${actionType}-d_${disabled}-${kind}`;if(styles$1[buttonType]){return styles$1[buttonType]}const borderWidthKind=theme.root.border.width[kind];const themeVariant=semanticColor.action[kind][actionType];const disabledState=semanticColor.action[kind].disabled;const disabledStatesStyles={padding:theme.root.layout.padding,borderColor:disabledState.border,borderWidth:borderWidthKind.default,background:disabledState.background,color:disabledState.foreground};const pressStyles={border:`${borderWidthKind.press} solid ${themeVariant.press.border}`,background:themeVariant.press.background,color:themeVariant.press.foreground,padding:`calc(${theme.root.layout.padding} - 1px)`};const newStyles={default:{borderRadius:theme.root.border.radius,padding:theme.root.layout.padding,alignSelf:"center",justifySelf:"center",borderStyle:"solid",borderWidth:borderWidthKind.default,borderColor:themeVariant.default.border,background:themeVariant.default.background,color:themeVariant.default.foreground,":hover":{padding:theme.root.layout.padding,background:themeVariant.hover.background,color:themeVariant.hover.foreground,border:`${borderWidthKind.hover} solid ${themeVariant.hover.border}`},["@media not (hover: hover)"]:{":hover":{backgroundColor:"transparent"}},":active":pressStyles,...focusStyles.focus},disabled:{cursor:"not-allowed",...disabledStatesStyles,":hover":{...disabledStatesStyles,outline:"none"},":active":{...disabledStatesStyles,outline:"none"},":focus-visible":disabledStatesStyles},pressed:pressStyles};styles$1[buttonType]=StyleSheet.create(newStyles);return styles$1[buttonType]};
|
|
23
23
|
|
|
24
|
-
|
|
24
|
+
function mapTokensToVariables(tokens,prefix){return Object.entries(tokens).reduce((acc,[key,value])=>{const kebabKey=key.replace(/([A-Z])/g,"-$1").toLowerCase();acc[`${prefix}${kebabKey}`]=value;return acc},{})}
|
|
25
|
+
|
|
26
|
+
const VAR_PREFIX="--wb-c-node-icon-button--";const DEFAULT_TOKENS={"--wb-c-node-icon-button--box-padding":sizing.size_100,"--wb-c-node-icon-button--box-shadow-y-rest":"6px","--wb-c-node-icon-button--box-shadow-y-hover":"8px","--wb-c-node-icon-button--box-shadow-y-press":sizing.size_0,"--wb-c-node-icon-button--icon-size":sizing.size_480,"--wb-c-node-icon-button--box-foreground":semanticColor.learning.foreground.progress.notStarted.strong,"--wb-c-node-icon-button--box-background":semanticColor.learning.background.progress.notStarted.default,"--wb-c-node-icon-button--box-shadow-color":semanticColor.learning.shadow.progress.notStarted.default};const NodeIconButton=React.forwardRef(function NodeIconButton(props,ref){const{actionType="notStarted",disabled=false,icon,size="large",styles:stylesProp,tokens,type="button","aria-label":ariaLabel,...restProps}=props;const[pressed,setPressed]=React.useState(false);const buttonStyles=React.useMemo(()=>[styles.button,disabled&&styles.disabled,!disabled&&pressed&&styles.pressed,variants.size[size],variants.actionType[actionType],stylesProp?.root,tokens&&mapTokensToVariables(tokens,VAR_PREFIX)],[actionType,disabled,pressed,size,stylesProp?.root,tokens]);const chonkyStyles=[styles.chonky,!disabled&&pressed&&styles.chonkyPressed,stylesProp?.box,disabled&&styles.chonkyDisabled];const handlePress=React.useCallback(isPressing=>{setPressed(isPressing);},[]);const iconElement=React.useMemo(()=>{if(typeof icon==="string"){return jsx(PhosphorIcon,{style:[styles.icon,stylesProp?.icon],color:"currentColor",icon:icon})}return React.cloneElement(icon,{style:[styles.icon,stylesProp?.icon]})},[icon,stylesProp?.icon]);return jsx(IconButtonUnstyled,{...restProps,disabled:disabled,onPress:handlePress,ref:ref,style:buttonStyles,type:type,"aria-label":ariaLabel,children:jsx(Fragment,{children:jsx(View,{style:chonkyStyles,className:"chonky",children:iconElement})})})});const variants={size:{large:{"--wb-c-node-icon-button--icon-size":sizing.size_480,"--wb-c-node-icon-button--box-padding":sizing.size_100,"--wb-c-node-icon-button--box-shadow-y-rest":"6px","--wb-c-node-icon-button--box-shadow-y-hover":"8px","--wb-c-node-icon-button--box-shadow-y-press":sizing.size_0},small:{"--wb-c-node-icon-button--icon-size":sizing.size_240,"--wb-c-node-icon-button--box-padding":sizing.size_0,"--wb-c-node-icon-button--box-shadow-y-rest":"2px","--wb-c-node-icon-button--box-shadow-y-hover":"4px","--wb-c-node-icon-button--box-shadow-y-press":sizing.size_0}},actionType:{notStarted:{"--wb-c-node-icon-button--box-foreground":semanticColor.learning.foreground.progress.notStarted.strong,"--wb-c-node-icon-button--box-background":semanticColor.learning.background.progress.notStarted.default,"--wb-c-node-icon-button--box-shadow-color":semanticColor.learning.shadow.progress.notStarted.default},attempted:{"--wb-c-node-icon-button--box-foreground":semanticColor.learning.foreground.progress.attempted.strong,"--wb-c-node-icon-button--box-background":semanticColor.learning.background.progress.attempted.default,"--wb-c-node-icon-button--box-shadow-color":semanticColor.learning.shadow.progress.attempted.default},complete:{"--wb-c-node-icon-button--box-foreground":semanticColor.learning.foreground.progress.complete.strong,"--wb-c-node-icon-button--box-background":semanticColor.learning.background.progress.complete.default,"--wb-c-node-icon-button--box-shadow-color":semanticColor.learning.shadow.progress.complete.default}}};const disabledStatesStyles={outline:"none",transform:"none"};const chonkyDisabled={background:semanticColor.chonky.disabled.background.primary,color:semanticColor.chonky.disabled.foreground.primary,boxShadow:`0 var(--wb-c-node-icon-button--box-shadow-y-rest) 0 0 ${semanticColor.chonky.disabled.shadow.primary}`,transform:"none"};const chonkyPressed={boxShadow:`0 var(--wb-c-node-icon-button--box-shadow-y-press) 0 0 var(--wb-c-node-icon-button--box-shadow-color)`,transform:`translateY(var(--wb-c-node-icon-button--box-shadow-y-rest))`};const styles=StyleSheet.create({button:{borderRadius:border.radius.radius_full,flexDirection:"column",alignSelf:"flex-start",justifySelf:"center",gap:sizing.size_020,...DEFAULT_TOKENS,[":is(:hover) .chonky"]:{boxShadow:`0 var(--wb-c-node-icon-button--box-shadow-y-hover) 0 0 var(--wb-c-node-icon-button--box-shadow-color)`,transform:`translateY(calc((var(--wb-c-node-icon-button--box-shadow-y-hover) - var(--wb-c-node-icon-button--box-shadow-y-rest)) * -1))`},[":is(:active) .chonky"]:chonkyPressed,...focusStyles.focus},disabled:{cursor:"not-allowed",...disabledStatesStyles,":hover":disabledStatesStyles,":active":disabledStatesStyles,":focus-visible":{transform:"none"},[":is(:hover) .chonky"]:{...chonkyDisabled,...disabledStatesStyles}},pressed:{[".chonky"]:chonkyPressed},chonky:{borderRadius:border.radius.radius_full,justifyContent:"center",alignItems:"center",padding:"var(--wb-c-node-icon-button--box-padding)",width:"100%",height:"100%",background:"var(--wb-c-node-icon-button--box-background)",color:"var(--wb-c-node-icon-button--box-foreground)",marginBlockEnd:"var(--wb-c-node-icon-button--box-shadow-y-rest)",boxShadow:`0 var(--wb-c-node-icon-button--box-shadow-y-rest) 0 0 var(--wb-c-node-icon-button--box-shadow-color)`,transition:"0.12s ease-out",transitionProperty:"box-shadow, transform, margin-block-end",["@media not (hover: hover)"]:{transition:"none"}},chonkyPressed,chonkyDisabled,icon:{inlineSize:"var(--wb-c-node-icon-button--icon-size)",blockSize:"var(--wb-c-node-icon-button--icon-size)"}});
|
|
27
|
+
|
|
28
|
+
export { ActivityIconButton, ConversationIconButton, NodeIconButton, IconButton as default };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
1
|
export { IconButton as default } from "./components/icon-button";
|
|
2
2
|
export { ActivityIconButton } from "./components/activity-icon-button";
|
|
3
3
|
export { ConversationIconButton } from "./components/conversation-icon-button";
|
|
4
|
+
export { NodeIconButton } from "./components/node-icon-button";
|
package/dist/index.js
CHANGED
|
@@ -37,14 +37,19 @@ var themeDefault = {iconButton:{root:{border:{offset:{primary:wonderBlocksTokens
|
|
|
37
37
|
|
|
38
38
|
var iconButtonTheme = wonderBlocksTokens.mapValuesToCssVars(themeDefault,"--wb-c-icon-button-");
|
|
39
39
|
|
|
40
|
-
const StyledA=wonderBlocksCore.addStyle("a");const StyledButton=wonderBlocksCore.addStyle("button");const StyledLink=wonderBlocksCore.addStyle(reactRouterDomV5Compat.Link);const IconButtonUnstyled=React__namespace.forwardRef(function IconButtonUnstyled(props,ref){const{children,disabled,href,onPress,skipClientNav,style,testId,type="button",...restProps}=props;const inRouterContext=reactRouterDomV5Compat.useInRouterContext();const handleKeyDown=React__namespace.useCallback(e=>{const key=e.key;if(!href&&(key===wonderBlocksCore.keys.enter||key===wonderBlocksCore.keys.space)){e.preventDefault();onPress?.(true);}},[href,onPress]);const handleKeyUp=React__namespace.useCallback(e=>{const key=e.key;if(!href&&(key===wonderBlocksCore.keys.enter||key===wonderBlocksCore.keys.space)){if(restProps.onClick){restProps.onClick(e);}onPress?.(false);}},[href,onPress,restProps]);const commonProps={"data-testid":testId,style:[styles$
|
|
40
|
+
const StyledA=wonderBlocksCore.addStyle("a");const StyledButton=wonderBlocksCore.addStyle("button");const StyledLink=wonderBlocksCore.addStyle(reactRouterDomV5Compat.Link);const IconButtonUnstyled=React__namespace.forwardRef(function IconButtonUnstyled(props,ref){const{children,disabled,href,onPress,skipClientNav,style,testId,type="button",...restProps}=props;const inRouterContext=reactRouterDomV5Compat.useInRouterContext();const handleKeyDown=React__namespace.useCallback(e=>{const key=e.key;if(!href&&(key===wonderBlocksCore.keys.enter||key===wonderBlocksCore.keys.space)){e.preventDefault();onPress?.(true);}},[href,onPress]);const handleKeyUp=React__namespace.useCallback(e=>{const key=e.key;if(!href&&(key===wonderBlocksCore.keys.enter||key===wonderBlocksCore.keys.space)){if(restProps.onClick){restProps.onClick(e);}onPress?.(false);}},[href,onPress,restProps]);const commonProps={"data-testid":testId,style:[styles$4.shared,style],onKeyDown:handleKeyDown,onKeyUp:handleKeyUp,...restProps};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,...commonProps,onClick:disabled?undefined:restProps.onClick,"aria-disabled":disabled,ref:ref,children:children})}});const styles$4=aphrodite.StyleSheet.create({shared:{position:"relative",display:"inline-flex",alignItems:"center",justifyContent:"center",boxSizing:"border-box",padding:0,cursor:"pointer",border:"none",outline:"none",textDecoration:"none",background:"none",margin:0,touchAction:"manipulation"}});
|
|
41
41
|
|
|
42
|
-
const theme$2=iconButtonTheme.iconButton;function IconChooser({icon,size}){const iconStyle={width:theme$2.icon.sizing[size],height:theme$2.icon.sizing[size]};if(typeof icon!=="string"){return React__namespace.cloneElement(icon,{style:[iconStyle]})}switch(size){case"small":return jsxRuntime.jsx(wonderBlocksIcon.PhosphorIcon,{size:"small",color:"currentColor",icon:icon,style:iconStyle});case"medium":default:return jsxRuntime.jsx(wonderBlocksIcon.PhosphorIcon,{size:"medium",color:"currentColor",icon:icon,style:iconStyle})}}const IconButton=React__namespace.forwardRef(function IconButton(props,ref){const{actionType="progressive",disabled=false,icon,kind="primary",size="medium",style,type="button",...restProps}=props;const[pressed,setPressed]=React__namespace.useState(false);const buttonStyles=_generateStyles$2(actionType,!!disabled,kind,size);const styles=[buttonStyles.default,disabled&&buttonStyles.disabled,pressed&&buttonStyles.pressed,style];const handlePress=React__namespace.useCallback(isPressing=>{setPressed(isPressing);},[]);return jsxRuntime.jsx(IconButtonUnstyled,{...restProps,disabled:disabled,onPress:handlePress,ref:ref,style:styles,type:type,children:jsxRuntime.jsx(IconChooser,{size:size,icon:icon})})});const styles$
|
|
42
|
+
const theme$2=iconButtonTheme.iconButton;function IconChooser({icon,size}){const iconStyle={width:theme$2.icon.sizing[size],height:theme$2.icon.sizing[size]};if(typeof icon!=="string"){return React__namespace.cloneElement(icon,{style:[iconStyle]})}switch(size){case"small":return jsxRuntime.jsx(wonderBlocksIcon.PhosphorIcon,{size:"small",color:"currentColor",icon:icon,style:iconStyle});case"medium":default:return jsxRuntime.jsx(wonderBlocksIcon.PhosphorIcon,{size:"medium",color:"currentColor",icon:icon,style:iconStyle})}}const IconButton=React__namespace.forwardRef(function IconButton(props,ref){const{actionType="progressive",disabled=false,icon,kind="primary",size="medium",style,type="button",...restProps}=props;const[pressed,setPressed]=React__namespace.useState(false);const buttonStyles=_generateStyles$2(actionType,!!disabled,kind,size);const styles=[buttonStyles.default,disabled&&buttonStyles.disabled,pressed&&buttonStyles.pressed,style];const handlePress=React__namespace.useCallback(isPressing=>{setPressed(isPressing);},[]);return jsxRuntime.jsx(IconButtonUnstyled,{...restProps,disabled:disabled,onPress:handlePress,ref:ref,style:styles,type:type,children:jsxRuntime.jsx(IconChooser,{size:size,icon:icon})})});const styles$3={};const _generateStyles$2=(actionType="progressive",disabled,kind,size)=>{const buttonType=`${actionType}-d_${disabled}-${kind}-${size}`;if(styles$3[buttonType]){return styles$3[buttonType]}const borderWidthKind=theme$2.root.border.width[kind];const outlineOffsetKind=theme$2.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,background:disabledState.background,color:disabledState.foreground};const pressStyles={outline:kind==="primary"?`${borderWidthKind.press} solid ${themeVariant.press.border}`:"none",outlineOffset:kind==="primary"?outlineOffsetKind:undefined,border:kind!=="primary"?`${borderWidthKind.press} solid ${themeVariant.press.border}`:"none",background:themeVariant.press.background,borderRadius:theme$2.root.border.radius.press,color:themeVariant.press.foreground,transition:"border-radius 0.1s ease-in-out"};const newStyles={default:{height:theme$2.root.sizing[size],width:theme$2.root.sizing[size],borderRadius:theme$2.root.border.radius.default,borderStyle:"solid",borderWidth:borderWidthKind.default,borderColor:themeVariant.default.border,background:themeVariant.default.background,color:themeVariant.default.foreground,":hover":{background:themeVariant.hover.background,borderRadius:theme$2.root.border.radius.hover,color:themeVariant.hover.foreground,outline:kind==="primary"?`${borderWidthKind.hover} solid ${themeVariant.hover.border}`:undefined,outlineOffset:kind==="primary"?outlineOffsetKind:undefined,border:kind!=="primary"?`${borderWidthKind.hover} solid ${themeVariant.hover.border}`:undefined},["@media not (hover: hover)"]:{":hover":{backgroundColor:"transparent"}},":active":pressStyles,...wonderBlocksStyles.focusStyles.focus},disabled:{cursor:"not-allowed",...disabledStatesStyles,":hover":{...disabledStatesStyles,outline:"none",borderRadius:theme$2.root.border.radius.default},":active":{...disabledStatesStyles,outline:"none",borderRadius:theme$2.root.border.radius.default},":focus-visible":disabledStatesStyles},pressed:pressStyles};styles$3[buttonType]=aphrodite.StyleSheet.create(newStyles);return styles$3[buttonType]};
|
|
43
43
|
|
|
44
|
-
const ActivityIconButton=React__namespace.forwardRef(function ActivityIconButton(props,ref){const{actionType="progressive",disabled=false,icon,kind="primary",styles:stylesProp,type="button","aria-label":ariaLabel,label,...restProps}=props;const[pressed,setPressed]=React__namespace.useState(false);const buttonStyles=_generateStyles$1(actionType,!!disabled,kind);const styles=[buttonStyles.button,disabled&&buttonStyles.disabled,!disabled&&pressed&&buttonStyles.pressed,stylesProp?.root];const chonkyStyles=[buttonStyles.chonky,disabled&&buttonStyles.chonkyDisabled,!disabled&&pressed&&buttonStyles.chonkyPressed,stylesProp?.box];const handlePress=React__namespace.useCallback(isPressing=>{setPressed(isPressing);},[]);const hasVisibleLabel=label!==undefined&&label!=="";const iconElement=React__namespace.useMemo(()=>{if(typeof icon==="string"){return jsxRuntime.jsx(wonderBlocksIcon.PhosphorIcon,{size:"medium",color:"currentColor",icon:icon})}return icon},[icon]);return jsxRuntime.jsx(IconButtonUnstyled,{...restProps,disabled:disabled,onPress:handlePress,ref:ref,style:styles,type:type,...!hasVisibleLabel?{"aria-label":ariaLabel}:{},children:jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx(wonderBlocksCore.View,{style:chonkyStyles,className:"chonky",children:iconElement}),hasVisibleLabel&&jsxRuntime.jsx(wonderBlocksTypography.BodyText,{tag:"span",size:"medium",weight:"semi",style:[buttonStyles.label,stylesProp?.label],children:label})]})})});const theme$1={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_200}},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},layout:{inlineSize:wonderBlocksTokens.sizing.size_640}}};const styles$
|
|
44
|
+
const ActivityIconButton=React__namespace.forwardRef(function ActivityIconButton(props,ref){const{actionType="progressive",disabled=false,icon,kind="primary",styles:stylesProp,type="button","aria-label":ariaLabel,label,...restProps}=props;const[pressed,setPressed]=React__namespace.useState(false);const buttonStyles=_generateStyles$1(actionType,!!disabled,kind);const styles=[buttonStyles.button,disabled&&buttonStyles.disabled,!disabled&&pressed&&buttonStyles.pressed,stylesProp?.root];const chonkyStyles=[buttonStyles.chonky,disabled&&buttonStyles.chonkyDisabled,!disabled&&pressed&&buttonStyles.chonkyPressed,stylesProp?.box];const handlePress=React__namespace.useCallback(isPressing=>{setPressed(isPressing);},[]);const hasVisibleLabel=label!==undefined&&label!=="";const iconElement=React__namespace.useMemo(()=>{if(typeof icon==="string"){return jsxRuntime.jsx(wonderBlocksIcon.PhosphorIcon,{size:"medium",color:"currentColor",icon:icon})}return icon},[icon]);return jsxRuntime.jsx(IconButtonUnstyled,{...restProps,disabled:disabled,onPress:handlePress,ref:ref,style:styles,type:type,...!hasVisibleLabel?{"aria-label":ariaLabel}:{},children:jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx(wonderBlocksCore.View,{style:chonkyStyles,className:"chonky",children:iconElement}),hasVisibleLabel&&jsxRuntime.jsx(wonderBlocksTypography.BodyText,{tag:"span",size:"medium",weight:"semi",style:[buttonStyles.label,stylesProp?.label],children:label})]})})});const theme$1={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_200}},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},layout:{inlineSize:wonderBlocksTokens.sizing.size_640}}};const styles$2={};const _generateStyles$1=(actionType="progressive",disabled,kind)=>{const buttonType=`${actionType}-d_${disabled}-${kind}`;if(styles$2[buttonType]){return styles$2[buttonType]}const borderWidthKind=theme$1.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$1.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$1.root.shadow.y.press} 0 0 ${themeVariant.shadow[kind].press}`,color:themeVariant.foreground[kind].press,transform:`translateY(${theme$1.root.shadow.y.rest})`};const newStyles={button:{borderRadius:theme$1.root.border.radius,color:theme$1.label.color[actionType],flexDirection:"column",gap:wonderBlocksTokens.sizing.size_020,maxInlineSize:200,alignSelf:"flex-start",justifySelf:"center",[":is(:hover) .chonky"]:{background:themeVariant.background[kind].hover,border:`${borderWidthKind.hover} solid ${themeVariant.border[kind].hover}`,boxShadow:`0 ${theme$1.root.shadow.y.hover} 0 0 ${themeVariant.shadow[kind].hover}`,color:themeVariant.foreground[kind].hover,transform:`translateY(calc((${theme$1.root.shadow.y.hover} - ${theme$1.root.shadow.y.rest}) * -1))`},[":is(:active) .chonky"]:chonkyPressed,...wonderBlocksStyles.focusStyles.focus},disabled:{cursor:"not-allowed",color:theme$1.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:{borderRadius:theme$1.root.border.radius,marginBlockEnd:theme$1.root.shadow.y.rest,paddingBlock:theme$1.root.layout.padding.block,paddingInline:theme$1.root.layout.padding.inline,inlineSize:theme$1.label.layout.inlineSize,justifyContent:"center",alignItems:"center",background:themeVariant.background[kind].rest,border:`${borderWidthKind.rest} solid ${themeVariant.border[kind].rest}`,color:themeVariant.foreground[kind].rest,boxShadow:`0 ${theme$1.root.shadow.y.rest} 0 0 ${themeVariant.shadow[kind].rest}`,transition:"all 0.12s ease-out",["@media not (hover: hover)"]:{transition:"none"}},chonkyPressed,chonkyDisabled,label:{margin:0,textAlign:"center",display:"-webkit-box",WebkitBoxOrient:"vertical",WebkitLineClamp:"2",overflow:"hidden",wordBreak:"break-word"}};styles$2[buttonType]=aphrodite.StyleSheet.create(newStyles);return styles$2[buttonType]};
|
|
45
45
|
|
|
46
|
-
const ConversationIconButton=React__namespace.forwardRef(function ConversationIconButton(props,ref){const{actionType="progressive",disabled=false,icon,kind="primary",style,type="button",...restProps}=props;const[pressed,setPressed]=React__namespace.useState(false);const buttonStyles=_generateStyles(actionType,!!disabled,kind);const styles=[buttonStyles.default,disabled&&buttonStyles.disabled,pressed&&buttonStyles.pressed,style];const handlePress=React__namespace.useCallback(isPressing=>{setPressed(isPressing);},[]);return jsxRuntime.jsx(IconButtonUnstyled,{...restProps,disabled:disabled,onPress:handlePress,ref:ref,style:styles,type:type,children:typeof icon!=="string"?React__namespace.cloneElement(icon,{style:[staticStyles.icon]}):jsxRuntime.jsx(wonderBlocksIcon.PhosphorIcon,{size:"small",color:"currentColor",icon:icon})})});const staticStyles=aphrodite.StyleSheet.create({icon:{width:wonderBlocksTokens.sizing.size_160,height:wonderBlocksTokens.sizing.size_160}});const styles={};const theme={root:{border:{radius:wonderBlocksTokens.border.radius.radius_full,width:{primary:{default:wonderBlocksTokens.border.width.thin,hover:wonderBlocksTokens.border.width.thin,press:wonderBlocksTokens.border.width.medium},secondary:{default:wonderBlocksTokens.border.width.thin,hover:wonderBlocksTokens.border.width.thin,press:wonderBlocksTokens.border.width.medium},tertiary:{default:wonderBlocksTokens.border.width.thin,hover:wonderBlocksTokens.border.width.thin,press:wonderBlocksTokens.border.width.medium}}},layout:{padding:wonderBlocksTokens.sizing.size_100},sizing:{default:wonderBlocksTokens.sizing.size_360}}};const _generateStyles=(actionType="progressive",disabled,kind)=>{const buttonType=`${actionType}-d_${disabled}-${kind}`;if(styles[buttonType]){return styles[buttonType]}const borderWidthKind=theme.root.border.width[kind];const themeVariant=wonderBlocksTokens.semanticColor.action[kind][actionType];const disabledState=wonderBlocksTokens.semanticColor.action[kind].disabled;const disabledStatesStyles={padding:theme.root.layout.padding,borderColor:disabledState.border,borderWidth:borderWidthKind.default,background:disabledState.background,color:disabledState.foreground};const pressStyles={border:`${borderWidthKind.press} solid ${themeVariant.press.border}`,background:themeVariant.press.background,color:themeVariant.press.foreground,padding:`calc(${theme.root.layout.padding} - 1px)`};const newStyles={default:{borderRadius:theme.root.border.radius,padding:theme.root.layout.padding,alignSelf:"center",justifySelf:"center",borderStyle:"solid",borderWidth:borderWidthKind.default,borderColor:themeVariant.default.border,background:themeVariant.default.background,color:themeVariant.default.foreground,":hover":{padding:theme.root.layout.padding,background:themeVariant.hover.background,color:themeVariant.hover.foreground,border:`${borderWidthKind.hover} solid ${themeVariant.hover.border}`},["@media not (hover: hover)"]:{":hover":{backgroundColor:"transparent"}},":active":pressStyles,...wonderBlocksStyles.focusStyles.focus},disabled:{cursor:"not-allowed",...disabledStatesStyles,":hover":{...disabledStatesStyles,outline:"none"},":active":{...disabledStatesStyles,outline:"none"},":focus-visible":disabledStatesStyles},pressed:pressStyles};styles[buttonType]=aphrodite.StyleSheet.create(newStyles);return styles[buttonType]};
|
|
46
|
+
const ConversationIconButton=React__namespace.forwardRef(function ConversationIconButton(props,ref){const{actionType="progressive",disabled=false,icon,kind="primary",style,type="button",...restProps}=props;const[pressed,setPressed]=React__namespace.useState(false);const buttonStyles=_generateStyles(actionType,!!disabled,kind);const styles=[buttonStyles.default,disabled&&buttonStyles.disabled,pressed&&buttonStyles.pressed,style];const handlePress=React__namespace.useCallback(isPressing=>{setPressed(isPressing);},[]);return jsxRuntime.jsx(IconButtonUnstyled,{...restProps,disabled:disabled,onPress:handlePress,ref:ref,style:styles,type:type,children:typeof icon!=="string"?React__namespace.cloneElement(icon,{style:[staticStyles.icon]}):jsxRuntime.jsx(wonderBlocksIcon.PhosphorIcon,{size:"small",color:"currentColor",icon:icon})})});const staticStyles=aphrodite.StyleSheet.create({icon:{width:wonderBlocksTokens.sizing.size_160,height:wonderBlocksTokens.sizing.size_160}});const styles$1={};const theme={root:{border:{radius:wonderBlocksTokens.border.radius.radius_full,width:{primary:{default:wonderBlocksTokens.border.width.thin,hover:wonderBlocksTokens.border.width.thin,press:wonderBlocksTokens.border.width.medium},secondary:{default:wonderBlocksTokens.border.width.thin,hover:wonderBlocksTokens.border.width.thin,press:wonderBlocksTokens.border.width.medium},tertiary:{default:wonderBlocksTokens.border.width.thin,hover:wonderBlocksTokens.border.width.thin,press:wonderBlocksTokens.border.width.medium}}},layout:{padding:wonderBlocksTokens.sizing.size_100},sizing:{default:wonderBlocksTokens.sizing.size_360}}};const _generateStyles=(actionType="progressive",disabled,kind)=>{const buttonType=`${actionType}-d_${disabled}-${kind}`;if(styles$1[buttonType]){return styles$1[buttonType]}const borderWidthKind=theme.root.border.width[kind];const themeVariant=wonderBlocksTokens.semanticColor.action[kind][actionType];const disabledState=wonderBlocksTokens.semanticColor.action[kind].disabled;const disabledStatesStyles={padding:theme.root.layout.padding,borderColor:disabledState.border,borderWidth:borderWidthKind.default,background:disabledState.background,color:disabledState.foreground};const pressStyles={border:`${borderWidthKind.press} solid ${themeVariant.press.border}`,background:themeVariant.press.background,color:themeVariant.press.foreground,padding:`calc(${theme.root.layout.padding} - 1px)`};const newStyles={default:{borderRadius:theme.root.border.radius,padding:theme.root.layout.padding,alignSelf:"center",justifySelf:"center",borderStyle:"solid",borderWidth:borderWidthKind.default,borderColor:themeVariant.default.border,background:themeVariant.default.background,color:themeVariant.default.foreground,":hover":{padding:theme.root.layout.padding,background:themeVariant.hover.background,color:themeVariant.hover.foreground,border:`${borderWidthKind.hover} solid ${themeVariant.hover.border}`},["@media not (hover: hover)"]:{":hover":{backgroundColor:"transparent"}},":active":pressStyles,...wonderBlocksStyles.focusStyles.focus},disabled:{cursor:"not-allowed",...disabledStatesStyles,":hover":{...disabledStatesStyles,outline:"none"},":active":{...disabledStatesStyles,outline:"none"},":focus-visible":disabledStatesStyles},pressed:pressStyles};styles$1[buttonType]=aphrodite.StyleSheet.create(newStyles);return styles$1[buttonType]};
|
|
47
|
+
|
|
48
|
+
function mapTokensToVariables(tokens,prefix){return Object.entries(tokens).reduce((acc,[key,value])=>{const kebabKey=key.replace(/([A-Z])/g,"-$1").toLowerCase();acc[`${prefix}${kebabKey}`]=value;return acc},{})}
|
|
49
|
+
|
|
50
|
+
const VAR_PREFIX="--wb-c-node-icon-button--";const DEFAULT_TOKENS={"--wb-c-node-icon-button--box-padding":wonderBlocksTokens.sizing.size_100,"--wb-c-node-icon-button--box-shadow-y-rest":"6px","--wb-c-node-icon-button--box-shadow-y-hover":"8px","--wb-c-node-icon-button--box-shadow-y-press":wonderBlocksTokens.sizing.size_0,"--wb-c-node-icon-button--icon-size":wonderBlocksTokens.sizing.size_480,"--wb-c-node-icon-button--box-foreground":wonderBlocksTokens.semanticColor.learning.foreground.progress.notStarted.strong,"--wb-c-node-icon-button--box-background":wonderBlocksTokens.semanticColor.learning.background.progress.notStarted.default,"--wb-c-node-icon-button--box-shadow-color":wonderBlocksTokens.semanticColor.learning.shadow.progress.notStarted.default};const NodeIconButton=React__namespace.forwardRef(function NodeIconButton(props,ref){const{actionType="notStarted",disabled=false,icon,size="large",styles:stylesProp,tokens,type="button","aria-label":ariaLabel,...restProps}=props;const[pressed,setPressed]=React__namespace.useState(false);const buttonStyles=React__namespace.useMemo(()=>[styles.button,disabled&&styles.disabled,!disabled&&pressed&&styles.pressed,variants.size[size],variants.actionType[actionType],stylesProp?.root,tokens&&mapTokensToVariables(tokens,VAR_PREFIX)],[actionType,disabled,pressed,size,stylesProp?.root,tokens]);const chonkyStyles=[styles.chonky,!disabled&&pressed&&styles.chonkyPressed,stylesProp?.box,disabled&&styles.chonkyDisabled];const handlePress=React__namespace.useCallback(isPressing=>{setPressed(isPressing);},[]);const iconElement=React__namespace.useMemo(()=>{if(typeof icon==="string"){return jsxRuntime.jsx(wonderBlocksIcon.PhosphorIcon,{style:[styles.icon,stylesProp?.icon],color:"currentColor",icon:icon})}return React__namespace.cloneElement(icon,{style:[styles.icon,stylesProp?.icon]})},[icon,stylesProp?.icon]);return jsxRuntime.jsx(IconButtonUnstyled,{...restProps,disabled:disabled,onPress:handlePress,ref:ref,style:buttonStyles,type:type,"aria-label":ariaLabel,children:jsxRuntime.jsx(jsxRuntime.Fragment,{children:jsxRuntime.jsx(wonderBlocksCore.View,{style:chonkyStyles,className:"chonky",children:iconElement})})})});const variants={size:{large:{"--wb-c-node-icon-button--icon-size":wonderBlocksTokens.sizing.size_480,"--wb-c-node-icon-button--box-padding":wonderBlocksTokens.sizing.size_100,"--wb-c-node-icon-button--box-shadow-y-rest":"6px","--wb-c-node-icon-button--box-shadow-y-hover":"8px","--wb-c-node-icon-button--box-shadow-y-press":wonderBlocksTokens.sizing.size_0},small:{"--wb-c-node-icon-button--icon-size":wonderBlocksTokens.sizing.size_240,"--wb-c-node-icon-button--box-padding":wonderBlocksTokens.sizing.size_0,"--wb-c-node-icon-button--box-shadow-y-rest":"2px","--wb-c-node-icon-button--box-shadow-y-hover":"4px","--wb-c-node-icon-button--box-shadow-y-press":wonderBlocksTokens.sizing.size_0}},actionType:{notStarted:{"--wb-c-node-icon-button--box-foreground":wonderBlocksTokens.semanticColor.learning.foreground.progress.notStarted.strong,"--wb-c-node-icon-button--box-background":wonderBlocksTokens.semanticColor.learning.background.progress.notStarted.default,"--wb-c-node-icon-button--box-shadow-color":wonderBlocksTokens.semanticColor.learning.shadow.progress.notStarted.default},attempted:{"--wb-c-node-icon-button--box-foreground":wonderBlocksTokens.semanticColor.learning.foreground.progress.attempted.strong,"--wb-c-node-icon-button--box-background":wonderBlocksTokens.semanticColor.learning.background.progress.attempted.default,"--wb-c-node-icon-button--box-shadow-color":wonderBlocksTokens.semanticColor.learning.shadow.progress.attempted.default},complete:{"--wb-c-node-icon-button--box-foreground":wonderBlocksTokens.semanticColor.learning.foreground.progress.complete.strong,"--wb-c-node-icon-button--box-background":wonderBlocksTokens.semanticColor.learning.background.progress.complete.default,"--wb-c-node-icon-button--box-shadow-color":wonderBlocksTokens.semanticColor.learning.shadow.progress.complete.default}}};const disabledStatesStyles={outline:"none",transform:"none"};const chonkyDisabled={background:wonderBlocksTokens.semanticColor.chonky.disabled.background.primary,color:wonderBlocksTokens.semanticColor.chonky.disabled.foreground.primary,boxShadow:`0 var(--wb-c-node-icon-button--box-shadow-y-rest) 0 0 ${wonderBlocksTokens.semanticColor.chonky.disabled.shadow.primary}`,transform:"none"};const chonkyPressed={boxShadow:`0 var(--wb-c-node-icon-button--box-shadow-y-press) 0 0 var(--wb-c-node-icon-button--box-shadow-color)`,transform:`translateY(var(--wb-c-node-icon-button--box-shadow-y-rest))`};const styles=aphrodite.StyleSheet.create({button:{borderRadius:wonderBlocksTokens.border.radius.radius_full,flexDirection:"column",alignSelf:"flex-start",justifySelf:"center",gap:wonderBlocksTokens.sizing.size_020,...DEFAULT_TOKENS,[":is(:hover) .chonky"]:{boxShadow:`0 var(--wb-c-node-icon-button--box-shadow-y-hover) 0 0 var(--wb-c-node-icon-button--box-shadow-color)`,transform:`translateY(calc((var(--wb-c-node-icon-button--box-shadow-y-hover) - var(--wb-c-node-icon-button--box-shadow-y-rest)) * -1))`},[":is(:active) .chonky"]:chonkyPressed,...wonderBlocksStyles.focusStyles.focus},disabled:{cursor:"not-allowed",...disabledStatesStyles,":hover":disabledStatesStyles,":active":disabledStatesStyles,":focus-visible":{transform:"none"},[":is(:hover) .chonky"]:{...chonkyDisabled,...disabledStatesStyles}},pressed:{[".chonky"]:chonkyPressed},chonky:{borderRadius:wonderBlocksTokens.border.radius.radius_full,justifyContent:"center",alignItems:"center",padding:"var(--wb-c-node-icon-button--box-padding)",width:"100%",height:"100%",background:"var(--wb-c-node-icon-button--box-background)",color:"var(--wb-c-node-icon-button--box-foreground)",marginBlockEnd:"var(--wb-c-node-icon-button--box-shadow-y-rest)",boxShadow:`0 var(--wb-c-node-icon-button--box-shadow-y-rest) 0 0 var(--wb-c-node-icon-button--box-shadow-color)`,transition:"0.12s ease-out",transitionProperty:"box-shadow, transform, margin-block-end",["@media not (hover: hover)"]:{transition:"none"}},chonkyPressed,chonkyDisabled,icon:{inlineSize:"var(--wb-c-node-icon-button--icon-size)",blockSize:"var(--wb-c-node-icon-button--icon-size)"}});
|
|
47
51
|
|
|
48
52
|
exports.ActivityIconButton = ActivityIconButton;
|
|
49
53
|
exports.ConversationIconButton = ConversationIconButton;
|
|
54
|
+
exports.NodeIconButton = NodeIconButton;
|
|
50
55
|
exports["default"] = IconButton;
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
type TokenValue = string | number;
|
|
2
|
+
/**
|
|
3
|
+
* Converts a kebab-case string to a camelCase string.
|
|
4
|
+
*
|
|
5
|
+
* @example
|
|
6
|
+
* type CamelCaseString = KebabToCamelCase<"box-foreground">;
|
|
7
|
+
* // CamelCaseString = "boxForeground";
|
|
8
|
+
*/
|
|
9
|
+
type KebabToCamelCase<S extends string> = S extends `${infer T}-${infer U}` ? `${T}${Capitalize<KebabToCamelCase<U>>}` : S;
|
|
10
|
+
/**
|
|
11
|
+
* The type containing the keys using the camelCase format.
|
|
12
|
+
*
|
|
13
|
+
* @example
|
|
14
|
+
* type TokensAsJsVariable = {
|
|
15
|
+
* boxForeground: string;
|
|
16
|
+
*/
|
|
17
|
+
export type TokensAsJsVariable<K extends string> = {
|
|
18
|
+
[key in KebabToCamelCase<K>]: string | number | boolean;
|
|
19
|
+
};
|
|
20
|
+
/**
|
|
21
|
+
* Maps a object of camel-cased tokens to a object of kebab-cased CSS variables.
|
|
22
|
+
*
|
|
23
|
+
* @param tokens The object of camel-cased tokens to map.
|
|
24
|
+
* @param prefix The prefix to use for the CSS variables.
|
|
25
|
+
* @returns The object of kebab-cased CSS variables.
|
|
26
|
+
*/
|
|
27
|
+
export declare function mapTokensToVariables<T extends string, P extends string>(tokens: Partial<TokensAsJsVariable<T>>, prefix: P): Record<`${P}${T}`, TokenValue>;
|
|
28
|
+
export {};
|
package/package.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"description": "",
|
|
4
4
|
"author": "Khan Academy",
|
|
5
5
|
"license": "MIT",
|
|
6
|
-
"version": "11.
|
|
6
|
+
"version": "11.1.0",
|
|
7
7
|
"publishConfig": {
|
|
8
8
|
"access": "public"
|
|
9
9
|
},
|
|
@@ -28,13 +28,13 @@
|
|
|
28
28
|
"./styles.css": "./dist/css/vars.css"
|
|
29
29
|
},
|
|
30
30
|
"dependencies": {
|
|
31
|
-
"@khanacademy/wonder-blocks-clickable": "8.0.
|
|
31
|
+
"@khanacademy/wonder-blocks-clickable": "8.0.5",
|
|
32
32
|
"@khanacademy/wonder-blocks-core": "12.4.2",
|
|
33
|
-
"@khanacademy/wonder-blocks-icon": "5.3.
|
|
34
|
-
"@khanacademy/wonder-blocks-styles": "0.2.
|
|
33
|
+
"@khanacademy/wonder-blocks-icon": "5.3.5",
|
|
34
|
+
"@khanacademy/wonder-blocks-styles": "0.2.37",
|
|
35
35
|
"@khanacademy/wonder-blocks-theming": "4.0.2",
|
|
36
|
-
"@khanacademy/wonder-blocks-tokens": "14.1.
|
|
37
|
-
"@khanacademy/wonder-blocks-typography": "4.2.
|
|
36
|
+
"@khanacademy/wonder-blocks-tokens": "14.1.3",
|
|
37
|
+
"@khanacademy/wonder-blocks-typography": "4.2.27"
|
|
38
38
|
},
|
|
39
39
|
"peerDependencies": {
|
|
40
40
|
"aphrodite": "^1.2.5",
|