@khanacademy/wonder-blocks-switch 3.3.14 → 3.3.16
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 +22 -0
- package/dist/es/index.js +1 -1
- package/dist/index.js +1 -1
- package/package.json +4 -4
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
|
|
2
|
-
> @khanacademy/wonder-blocks-switch@3.3.
|
|
2
|
+
> @khanacademy/wonder-blocks-switch@3.3.16 build:css /home/runner/work/wonder-blocks/wonder-blocks/packages/wonder-blocks-switch
|
|
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-switch/dist/css
|
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,27 @@
|
|
|
1
1
|
# @khanacademy/wonder-blocks-switch
|
|
2
2
|
|
|
3
|
+
## 3.3.16
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- aa6ad92: Move away from using `foreground.inverse` and `border.inverse` tokens in favour of the new knockout tokens
|
|
8
|
+
- Updated dependencies [5a02279]
|
|
9
|
+
- Updated dependencies [aa6ad92]
|
|
10
|
+
- Updated dependencies [aa6ad92]
|
|
11
|
+
- Updated dependencies [aa6ad92]
|
|
12
|
+
- @khanacademy/wonder-blocks-tokens@12.2.0
|
|
13
|
+
- @khanacademy/wonder-blocks-styles@0.2.29
|
|
14
|
+
- @khanacademy/wonder-blocks-icon@5.2.17
|
|
15
|
+
|
|
16
|
+
## 3.3.15
|
|
17
|
+
|
|
18
|
+
### Patch Changes
|
|
19
|
+
|
|
20
|
+
- Updated dependencies [4aad557]
|
|
21
|
+
- @khanacademy/wonder-blocks-tokens@12.1.0
|
|
22
|
+
- @khanacademy/wonder-blocks-icon@5.2.16
|
|
23
|
+
- @khanacademy/wonder-blocks-styles@0.2.28
|
|
24
|
+
|
|
3
25
|
## 3.3.14
|
|
4
26
|
|
|
5
27
|
### Patch Changes
|
package/dist/es/index.js
CHANGED
|
@@ -10,6 +10,6 @@ var themeDefault = {root:{border:{radius:{default:border.radius.radius_120,hover
|
|
|
10
10
|
|
|
11
11
|
var theme = mapValuesToCssVars(themeDefault,"--wb-c-switch-");
|
|
12
12
|
|
|
13
|
-
const StyledSpan=addStyle("span");const StyledInput=addStyle("input");const focusStylesObject=focusStyles.focus[":focus-visible"];const baseStyles={color:{bg:{switch:{off:semanticColor.core.border.neutral.default,disabledOff:semanticColor.core.border.disabled.strong,activeOff:semanticColor.core.border.neutral.strong,on:semanticColor.core.background.instructive.default,disabledOn:semanticColor.core.border.instructive.subtle,activeOn:semanticColor.core.background.instructive.strong},slider:{on:semanticColor.core.foreground.
|
|
13
|
+
const StyledSpan=addStyle("span");const StyledInput=addStyle("input");const focusStylesObject=focusStyles.focus[":focus-visible"];const baseStyles={color:{bg:{switch:{off:semanticColor.core.border.neutral.default,disabledOff:semanticColor.core.border.disabled.strong,activeOff:semanticColor.core.border.neutral.strong,on:semanticColor.core.background.instructive.default,disabledOn:semanticColor.core.border.instructive.subtle,activeOn:semanticColor.core.background.instructive.strong},slider:{on:semanticColor.core.foreground.knockout.default,off:semanticColor.core.foreground.knockout.default},icon:{on:semanticColor.core.foreground.instructive.subtle,disabledOn:semanticColor.core.border.instructive.subtle,off:semanticColor.core.border.neutral.default,disabledOff:semanticColor.core.foreground.disabled.default}}}};const sharedStyles=StyleSheet.create({hidden:{opacity:0,height:0,width:0},switch:{display:"inline-flex",height:theme.root.sizing.height,width:theme.root.sizing.width,borderRadius:theme.root.border.radius.default,flexShrink:0},switchFocus:{":focus-within":focusStylesObject},disabled:{cursor:"not-allowed",":hover":{outline:"none"},":active":{outline:"none"}},disabledFocus:{":focus-within":focusStylesObject},slider:{position:"absolute",top:theme.slider.position.top,left:theme.slider.position.left,height:theme.slider.sizing.height,width:theme.slider.sizing.width,borderRadius:theme.root.border.radius.default,backgroundColor:baseStyles.color.bg.slider.on,transition:theme.slider.transform.transition},icon:{position:"absolute",top:theme.icon.position.top,left:theme.icon.position.left,zIndex:1,transition:theme.icon.transform.transition}});const Switch=React.forwardRef(function Switch(props,ref){const{"aria-label":ariaLabel,"aria-labelledby":ariaLabelledBy,"aria-describedby":ariaDescribedBy,checked,className,disabled=false,icon,id,onChange,testId}=props;const generatedUniqueId=useId();const uniqueId=id??generatedUniqueId;const handleClick=()=>{if(!disabled&&onChange){onChange(!checked);}};const handleChange=()=>{};const stateStyles=_generateStyles(checked,onChange!==undefined,disabled);const combinedStyles=[sharedStyles.switch,sharedStyles.switchFocus,stateStyles.switch,disabled&&sharedStyles.disabled,disabled&&sharedStyles.disabledFocus];let styledIcon;if(icon){styledIcon=React.cloneElement(icon,{size:"small",style:[sharedStyles.icon,stateStyles.icon],"aria-hidden":true});}return jsxs(View,{onClick:handleClick,style:combinedStyles,className:className,testId:testId,children:[jsx(StyledInput,{"aria-describedby":ariaDescribedBy,"aria-label":ariaLabel,"aria-labelledby":ariaLabelledBy,checked:checked,"aria-disabled":disabled,id:uniqueId,onChange:handleChange,ref:ref,role:"switch",style:sharedStyles.hidden,type:"checkbox"}),icon&&styledIcon,jsx(StyledSpan,{style:[sharedStyles.slider,stateStyles.slider]})]})});const styles={};const _generateStyles=(checked,clickable,disabled)=>{const checkedStyle=`${checked}-${clickable}-${disabled}`;if(styles[checkedStyle]){return styles[checkedStyle]}let newStyles={};const sharedSwitchStyles={cursor:clickable?"pointer":"auto",":hover":{...focusStylesObject,outline:clickable?focusStylesObject.outline:"none"}};if(checked){newStyles={switch:{backgroundColor:disabled?baseStyles.color.bg.switch.disabledOn:baseStyles.color.bg.switch.on,":active":{backgroundColor:!disabled&&clickable?baseStyles.color.bg.switch.activeOn:undefined,...focusStylesObject,outline:clickable?focusStylesObject.outline:"none"},...sharedSwitchStyles},slider:{transform:theme.slider.transform.default},icon:{color:disabled?baseStyles.color.bg.icon.disabledOn:baseStyles.color.bg.icon.on,transform:theme.icon.transform.default}};}else {newStyles={switch:{backgroundColor:disabled?baseStyles.color.bg.switch.disabledOff:baseStyles.color.bg.switch.off,":active":{backgroundColor:!disabled&&clickable?baseStyles.color.bg.switch.activeOff:undefined,...focusStylesObject,outline:clickable?focusStylesObject.outline:"none"},...sharedSwitchStyles},slider:{backgroundColor:baseStyles.color.bg.slider.off},icon:{color:disabled?baseStyles.color.bg.icon.disabledOff:baseStyles.color.bg.icon.off}};}styles[checkedStyle]=StyleSheet.create(newStyles);return styles[checkedStyle]};
|
|
14
14
|
|
|
15
15
|
export { Switch as default };
|
package/dist/index.js
CHANGED
|
@@ -31,6 +31,6 @@ var themeDefault = {root:{border:{radius:{default:wonderBlocksTokens.border.radi
|
|
|
31
31
|
|
|
32
32
|
var theme = wonderBlocksTokens.mapValuesToCssVars(themeDefault,"--wb-c-switch-");
|
|
33
33
|
|
|
34
|
-
const StyledSpan=wonderBlocksCore.addStyle("span");const StyledInput=wonderBlocksCore.addStyle("input");const focusStylesObject=wonderBlocksStyles.focusStyles.focus[":focus-visible"];const baseStyles={color:{bg:{switch:{off:wonderBlocksTokens.semanticColor.core.border.neutral.default,disabledOff:wonderBlocksTokens.semanticColor.core.border.disabled.strong,activeOff:wonderBlocksTokens.semanticColor.core.border.neutral.strong,on:wonderBlocksTokens.semanticColor.core.background.instructive.default,disabledOn:wonderBlocksTokens.semanticColor.core.border.instructive.subtle,activeOn:wonderBlocksTokens.semanticColor.core.background.instructive.strong},slider:{on:wonderBlocksTokens.semanticColor.core.foreground.
|
|
34
|
+
const StyledSpan=wonderBlocksCore.addStyle("span");const StyledInput=wonderBlocksCore.addStyle("input");const focusStylesObject=wonderBlocksStyles.focusStyles.focus[":focus-visible"];const baseStyles={color:{bg:{switch:{off:wonderBlocksTokens.semanticColor.core.border.neutral.default,disabledOff:wonderBlocksTokens.semanticColor.core.border.disabled.strong,activeOff:wonderBlocksTokens.semanticColor.core.border.neutral.strong,on:wonderBlocksTokens.semanticColor.core.background.instructive.default,disabledOn:wonderBlocksTokens.semanticColor.core.border.instructive.subtle,activeOn:wonderBlocksTokens.semanticColor.core.background.instructive.strong},slider:{on:wonderBlocksTokens.semanticColor.core.foreground.knockout.default,off:wonderBlocksTokens.semanticColor.core.foreground.knockout.default},icon:{on:wonderBlocksTokens.semanticColor.core.foreground.instructive.subtle,disabledOn:wonderBlocksTokens.semanticColor.core.border.instructive.subtle,off:wonderBlocksTokens.semanticColor.core.border.neutral.default,disabledOff:wonderBlocksTokens.semanticColor.core.foreground.disabled.default}}}};const sharedStyles=aphrodite.StyleSheet.create({hidden:{opacity:0,height:0,width:0},switch:{display:"inline-flex",height:theme.root.sizing.height,width:theme.root.sizing.width,borderRadius:theme.root.border.radius.default,flexShrink:0},switchFocus:{":focus-within":focusStylesObject},disabled:{cursor:"not-allowed",":hover":{outline:"none"},":active":{outline:"none"}},disabledFocus:{":focus-within":focusStylesObject},slider:{position:"absolute",top:theme.slider.position.top,left:theme.slider.position.left,height:theme.slider.sizing.height,width:theme.slider.sizing.width,borderRadius:theme.root.border.radius.default,backgroundColor:baseStyles.color.bg.slider.on,transition:theme.slider.transform.transition},icon:{position:"absolute",top:theme.icon.position.top,left:theme.icon.position.left,zIndex:1,transition:theme.icon.transform.transition}});const Switch=React__namespace.forwardRef(function Switch(props,ref){const{"aria-label":ariaLabel,"aria-labelledby":ariaLabelledBy,"aria-describedby":ariaDescribedBy,checked,className,disabled=false,icon,id,onChange,testId}=props;const generatedUniqueId=React.useId();const uniqueId=id??generatedUniqueId;const handleClick=()=>{if(!disabled&&onChange){onChange(!checked);}};const handleChange=()=>{};const stateStyles=_generateStyles(checked,onChange!==undefined,disabled);const combinedStyles=[sharedStyles.switch,sharedStyles.switchFocus,stateStyles.switch,disabled&&sharedStyles.disabled,disabled&&sharedStyles.disabledFocus];let styledIcon;if(icon){styledIcon=React__namespace.cloneElement(icon,{size:"small",style:[sharedStyles.icon,stateStyles.icon],"aria-hidden":true});}return jsxRuntime.jsxs(wonderBlocksCore.View,{onClick:handleClick,style:combinedStyles,className:className,testId:testId,children:[jsxRuntime.jsx(StyledInput,{"aria-describedby":ariaDescribedBy,"aria-label":ariaLabel,"aria-labelledby":ariaLabelledBy,checked:checked,"aria-disabled":disabled,id:uniqueId,onChange:handleChange,ref:ref,role:"switch",style:sharedStyles.hidden,type:"checkbox"}),icon&&styledIcon,jsxRuntime.jsx(StyledSpan,{style:[sharedStyles.slider,stateStyles.slider]})]})});const styles={};const _generateStyles=(checked,clickable,disabled)=>{const checkedStyle=`${checked}-${clickable}-${disabled}`;if(styles[checkedStyle]){return styles[checkedStyle]}let newStyles={};const sharedSwitchStyles={cursor:clickable?"pointer":"auto",":hover":{...focusStylesObject,outline:clickable?focusStylesObject.outline:"none"}};if(checked){newStyles={switch:{backgroundColor:disabled?baseStyles.color.bg.switch.disabledOn:baseStyles.color.bg.switch.on,":active":{backgroundColor:!disabled&&clickable?baseStyles.color.bg.switch.activeOn:undefined,...focusStylesObject,outline:clickable?focusStylesObject.outline:"none"},...sharedSwitchStyles},slider:{transform:theme.slider.transform.default},icon:{color:disabled?baseStyles.color.bg.icon.disabledOn:baseStyles.color.bg.icon.on,transform:theme.icon.transform.default}};}else {newStyles={switch:{backgroundColor:disabled?baseStyles.color.bg.switch.disabledOff:baseStyles.color.bg.switch.off,":active":{backgroundColor:!disabled&&clickable?baseStyles.color.bg.switch.activeOff:undefined,...focusStylesObject,outline:clickable?focusStylesObject.outline:"none"},...sharedSwitchStyles},slider:{backgroundColor:baseStyles.color.bg.slider.off},icon:{color:disabled?baseStyles.color.bg.icon.disabledOff:baseStyles.color.bg.icon.off}};}styles[checkedStyle]=aphrodite.StyleSheet.create(newStyles);return styles[checkedStyle]};
|
|
35
35
|
|
|
36
36
|
module.exports = Switch;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@khanacademy/wonder-blocks-switch",
|
|
3
|
-
"version": "3.3.
|
|
3
|
+
"version": "3.3.16",
|
|
4
4
|
"design": "v1",
|
|
5
5
|
"description": "Switch components for Wonder Blocks.",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -20,11 +20,11 @@
|
|
|
20
20
|
"access": "public"
|
|
21
21
|
},
|
|
22
22
|
"dependencies": {
|
|
23
|
+
"@khanacademy/wonder-blocks-icon": "5.2.17",
|
|
23
24
|
"@khanacademy/wonder-blocks-core": "12.4.0",
|
|
24
|
-
"@khanacademy/wonder-blocks-
|
|
25
|
-
"@khanacademy/wonder-blocks-styles": "0.2.27",
|
|
25
|
+
"@khanacademy/wonder-blocks-styles": "0.2.29",
|
|
26
26
|
"@khanacademy/wonder-blocks-theming": "4.0.0",
|
|
27
|
-
"@khanacademy/wonder-blocks-tokens": "12.0
|
|
27
|
+
"@khanacademy/wonder-blocks-tokens": "12.2.0"
|
|
28
28
|
},
|
|
29
29
|
"peerDependencies": {
|
|
30
30
|
"aphrodite": "^1.2.5",
|