@khanacademy/wonder-blocks-pill 3.1.36 → 3.1.38
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/CHANGELOG.md +27 -0
- package/dist/es/index.js +1 -1
- package/dist/index.js +1 -1
- package/package.json +6 -6
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,32 @@
|
|
|
1
1
|
# @khanacademy/wonder-blocks-pill
|
|
2
2
|
|
|
3
|
+
## 3.1.38
|
|
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-clickable@7.1.23
|
|
14
|
+
- @khanacademy/wonder-blocks-styles@0.2.29
|
|
15
|
+
- @khanacademy/wonder-blocks-link@9.2.1
|
|
16
|
+
- @khanacademy/wonder-blocks-typography@4.2.19
|
|
17
|
+
|
|
18
|
+
## 3.1.37
|
|
19
|
+
|
|
20
|
+
### Patch Changes
|
|
21
|
+
|
|
22
|
+
- Updated dependencies [4aad557]
|
|
23
|
+
- Updated dependencies [4aad557]
|
|
24
|
+
- @khanacademy/wonder-blocks-link@9.2.0
|
|
25
|
+
- @khanacademy/wonder-blocks-tokens@12.1.0
|
|
26
|
+
- @khanacademy/wonder-blocks-clickable@7.1.22
|
|
27
|
+
- @khanacademy/wonder-blocks-styles@0.2.28
|
|
28
|
+
- @khanacademy/wonder-blocks-typography@4.2.18
|
|
29
|
+
|
|
3
30
|
## 3.1.36
|
|
4
31
|
|
|
5
32
|
### Patch Changes
|
package/dist/es/index.js
CHANGED
|
@@ -7,6 +7,6 @@ import { BodyText } from '@khanacademy/wonder-blocks-typography';
|
|
|
7
7
|
import { sizing, border, semanticColor, color } from '@khanacademy/wonder-blocks-tokens';
|
|
8
8
|
import { focusStyles } from '@khanacademy/wonder-blocks-styles';
|
|
9
9
|
|
|
10
|
-
const PillInner=props=>{const{children,size}=props;if(typeof children!=="string"){return children}if(size==="small"){return jsx(BodyText,{size:"xsmall",tag:"span",children:props.children})}if(size==="large"){return jsx(BodyText,{tag:"span",children:children})}return jsx(BodyText,{size:"small",tag:"span",children:children})};const Pill=React.forwardRef(function Pill(props,ref){const{id,children,kind="neutral",size="medium",role,onClick,style,tabIndex,testId,...ariaProps}=props;let wrapperSizeStyle;switch(size){case"small":wrapperSizeStyle=pillStyles.wrapperSmall;break;case"large":wrapperSizeStyle=pillStyles.wrapperLarge;break;default:wrapperSizeStyle=pillStyles.wrapperMedium;}const colorStyles=_generateColorStyles(!!onClick,kind);const defaultStyles=[pillStyles.wrapper,colorStyles.pill,wrapperSizeStyle];if(onClick){return jsx(Clickable,{id:id,role:role,onClick:onClick,style:[defaultStyles,colorStyles.clickableWrapper,style],testId:testId,ref:ref,tabIndex:tabIndex,...ariaProps,children:()=>jsx(PillInner,{size:size,children:children})})}return jsx(View,{id:id,role:role,style:[defaultStyles,style],testId:testId,ref:ref,...ariaProps,children:jsx(PillInner,{size:size,children:children})})});const pillStyles=StyleSheet.create({wrapper:{display:"inline-flex",width:"fit-content"},wrapperSmall:{paddingInline:sizing.size_080,borderRadius:border.radius.radius_040,height:sizing.size_200},wrapperMedium:{paddingInline:sizing.size_080,borderRadius:border.radius.radius_040,height:sizing.size_240},wrapperLarge:{paddingInline:sizing.size_120,paddingBlock:sizing.size_060,borderRadius:border.radius.radius_240,height:sizing.size_320}});const styles={};const _generateColorStyles=(clickable,kind)=>{const pillType=`${kind}-${clickable.toString()}`;if(styles[pillType]){return styles[pillType]}let backgroundColor;let textColor;switch(kind){case"accent":backgroundColor=semanticColor.core.background.instructive.default;textColor=semanticColor.core.foreground.
|
|
10
|
+
const PillInner=props=>{const{children,size}=props;if(typeof children!=="string"){return children}if(size==="small"){return jsx(BodyText,{size:"xsmall",tag:"span",children:props.children})}if(size==="large"){return jsx(BodyText,{tag:"span",children:children})}return jsx(BodyText,{size:"small",tag:"span",children:children})};const Pill=React.forwardRef(function Pill(props,ref){const{id,children,kind="neutral",size="medium",role,onClick,style,tabIndex,testId,...ariaProps}=props;let wrapperSizeStyle;switch(size){case"small":wrapperSizeStyle=pillStyles.wrapperSmall;break;case"large":wrapperSizeStyle=pillStyles.wrapperLarge;break;default:wrapperSizeStyle=pillStyles.wrapperMedium;}const colorStyles=_generateColorStyles(!!onClick,kind);const defaultStyles=[pillStyles.wrapper,colorStyles.pill,wrapperSizeStyle];if(onClick){return jsx(Clickable,{id:id,role:role,onClick:onClick,style:[defaultStyles,colorStyles.clickableWrapper,style],testId:testId,ref:ref,tabIndex:tabIndex,...ariaProps,children:()=>jsx(PillInner,{size:size,children:children})})}return jsx(View,{id:id,role:role,style:[defaultStyles,style],testId:testId,ref:ref,...ariaProps,children:jsx(PillInner,{size:size,children:children})})});const pillStyles=StyleSheet.create({wrapper:{display:"inline-flex",width:"fit-content"},wrapperSmall:{paddingInline:sizing.size_080,borderRadius:border.radius.radius_040,height:sizing.size_200},wrapperMedium:{paddingInline:sizing.size_080,borderRadius:border.radius.radius_040,height:sizing.size_240},wrapperLarge:{paddingInline:sizing.size_120,paddingBlock:sizing.size_060,borderRadius:border.radius.radius_240,height:sizing.size_320}});const styles={};const _generateColorStyles=(clickable,kind)=>{const pillType=`${kind}-${clickable.toString()}`;if(styles[pillType]){return styles[pillType]}let backgroundColor;let textColor;switch(kind){case"accent":backgroundColor=semanticColor.core.background.instructive.default;textColor=semanticColor.core.foreground.knockout.default;break;case"info":backgroundColor=semanticColor.feedback.info.subtle.background;textColor=semanticColor.feedback.info.subtle.text;break;case"success":backgroundColor=semanticColor.feedback.success.subtle.background;textColor=semanticColor.feedback.success.subtle.text;break;case"warning":backgroundColor=semanticColor.feedback.warning.subtle.background;textColor=semanticColor.feedback.warning.subtle.text;break;case"critical":backgroundColor=semanticColor.feedback.critical.subtle.background;textColor=semanticColor.feedback.critical.subtle.text;break;case"transparent":backgroundColor=semanticColor.core.transparent;textColor=semanticColor.core.foreground.neutral.strong;break;case"neutral":default:backgroundColor=semanticColor.status.neutral.background;textColor=semanticColor.core.foreground.neutral.strong;}const pressColor=kind==="transparent"||kind==="neutral"?color.offBlack16:kind==="accent"?semanticColor.core.background.instructive.strong:`color-mix(in srgb, ${color.offBlack32}, ${backgroundColor})`;const theme={default:{border:kind==="transparent"?`${border.width.thin} solid ${semanticColor.core.border.neutral.subtle}`:"none",background:backgroundColor,foreground:textColor},hover:{border:semanticColor.core.border.instructive.default},press:{border:semanticColor.core.border.instructive.strong,background:pressColor}};const colorStyles={pill:{backgroundColor:theme.default.background,outline:theme.default.border,color:theme.default.foreground,alignItems:"center",justifyContent:"center"},clickableWrapper:{outline:theme.default.border,":hover":{outline:`${border.width.medium} solid ${theme.hover.border}`,outlineOffset:sizing.size_020},":active":{backgroundColor:theme.press.background,outline:`${border.width.medium} solid ${theme.press.border}`,outlineOffset:sizing.size_020},...focusStyles.focus}};styles[pillType]=StyleSheet.create(colorStyles);return styles[pillType]};
|
|
11
11
|
|
|
12
12
|
export { Pill as default };
|
package/dist/index.js
CHANGED
|
@@ -32,6 +32,6 @@ function _interopNamespace(e) {
|
|
|
32
32
|
var React__namespace = /*#__PURE__*/_interopNamespace(React);
|
|
33
33
|
var Clickable__default = /*#__PURE__*/_interopDefaultLegacy(Clickable);
|
|
34
34
|
|
|
35
|
-
const PillInner=props=>{const{children,size}=props;if(typeof children!=="string"){return children}if(size==="small"){return jsxRuntime.jsx(wonderBlocksTypography.BodyText,{size:"xsmall",tag:"span",children:props.children})}if(size==="large"){return jsxRuntime.jsx(wonderBlocksTypography.BodyText,{tag:"span",children:children})}return jsxRuntime.jsx(wonderBlocksTypography.BodyText,{size:"small",tag:"span",children:children})};const Pill=React__namespace.forwardRef(function Pill(props,ref){const{id,children,kind="neutral",size="medium",role,onClick,style,tabIndex,testId,...ariaProps}=props;let wrapperSizeStyle;switch(size){case"small":wrapperSizeStyle=pillStyles.wrapperSmall;break;case"large":wrapperSizeStyle=pillStyles.wrapperLarge;break;default:wrapperSizeStyle=pillStyles.wrapperMedium;}const colorStyles=_generateColorStyles(!!onClick,kind);const defaultStyles=[pillStyles.wrapper,colorStyles.pill,wrapperSizeStyle];if(onClick){return jsxRuntime.jsx(Clickable__default["default"],{id:id,role:role,onClick:onClick,style:[defaultStyles,colorStyles.clickableWrapper,style],testId:testId,ref:ref,tabIndex:tabIndex,...ariaProps,children:()=>jsxRuntime.jsx(PillInner,{size:size,children:children})})}return jsxRuntime.jsx(wonderBlocksCore.View,{id:id,role:role,style:[defaultStyles,style],testId:testId,ref:ref,...ariaProps,children:jsxRuntime.jsx(PillInner,{size:size,children:children})})});const pillStyles=aphrodite.StyleSheet.create({wrapper:{display:"inline-flex",width:"fit-content"},wrapperSmall:{paddingInline:wonderBlocksTokens.sizing.size_080,borderRadius:wonderBlocksTokens.border.radius.radius_040,height:wonderBlocksTokens.sizing.size_200},wrapperMedium:{paddingInline:wonderBlocksTokens.sizing.size_080,borderRadius:wonderBlocksTokens.border.radius.radius_040,height:wonderBlocksTokens.sizing.size_240},wrapperLarge:{paddingInline:wonderBlocksTokens.sizing.size_120,paddingBlock:wonderBlocksTokens.sizing.size_060,borderRadius:wonderBlocksTokens.border.radius.radius_240,height:wonderBlocksTokens.sizing.size_320}});const styles={};const _generateColorStyles=(clickable,kind)=>{const pillType=`${kind}-${clickable.toString()}`;if(styles[pillType]){return styles[pillType]}let backgroundColor;let textColor;switch(kind){case"accent":backgroundColor=wonderBlocksTokens.semanticColor.core.background.instructive.default;textColor=wonderBlocksTokens.semanticColor.core.foreground.
|
|
35
|
+
const PillInner=props=>{const{children,size}=props;if(typeof children!=="string"){return children}if(size==="small"){return jsxRuntime.jsx(wonderBlocksTypography.BodyText,{size:"xsmall",tag:"span",children:props.children})}if(size==="large"){return jsxRuntime.jsx(wonderBlocksTypography.BodyText,{tag:"span",children:children})}return jsxRuntime.jsx(wonderBlocksTypography.BodyText,{size:"small",tag:"span",children:children})};const Pill=React__namespace.forwardRef(function Pill(props,ref){const{id,children,kind="neutral",size="medium",role,onClick,style,tabIndex,testId,...ariaProps}=props;let wrapperSizeStyle;switch(size){case"small":wrapperSizeStyle=pillStyles.wrapperSmall;break;case"large":wrapperSizeStyle=pillStyles.wrapperLarge;break;default:wrapperSizeStyle=pillStyles.wrapperMedium;}const colorStyles=_generateColorStyles(!!onClick,kind);const defaultStyles=[pillStyles.wrapper,colorStyles.pill,wrapperSizeStyle];if(onClick){return jsxRuntime.jsx(Clickable__default["default"],{id:id,role:role,onClick:onClick,style:[defaultStyles,colorStyles.clickableWrapper,style],testId:testId,ref:ref,tabIndex:tabIndex,...ariaProps,children:()=>jsxRuntime.jsx(PillInner,{size:size,children:children})})}return jsxRuntime.jsx(wonderBlocksCore.View,{id:id,role:role,style:[defaultStyles,style],testId:testId,ref:ref,...ariaProps,children:jsxRuntime.jsx(PillInner,{size:size,children:children})})});const pillStyles=aphrodite.StyleSheet.create({wrapper:{display:"inline-flex",width:"fit-content"},wrapperSmall:{paddingInline:wonderBlocksTokens.sizing.size_080,borderRadius:wonderBlocksTokens.border.radius.radius_040,height:wonderBlocksTokens.sizing.size_200},wrapperMedium:{paddingInline:wonderBlocksTokens.sizing.size_080,borderRadius:wonderBlocksTokens.border.radius.radius_040,height:wonderBlocksTokens.sizing.size_240},wrapperLarge:{paddingInline:wonderBlocksTokens.sizing.size_120,paddingBlock:wonderBlocksTokens.sizing.size_060,borderRadius:wonderBlocksTokens.border.radius.radius_240,height:wonderBlocksTokens.sizing.size_320}});const styles={};const _generateColorStyles=(clickable,kind)=>{const pillType=`${kind}-${clickable.toString()}`;if(styles[pillType]){return styles[pillType]}let backgroundColor;let textColor;switch(kind){case"accent":backgroundColor=wonderBlocksTokens.semanticColor.core.background.instructive.default;textColor=wonderBlocksTokens.semanticColor.core.foreground.knockout.default;break;case"info":backgroundColor=wonderBlocksTokens.semanticColor.feedback.info.subtle.background;textColor=wonderBlocksTokens.semanticColor.feedback.info.subtle.text;break;case"success":backgroundColor=wonderBlocksTokens.semanticColor.feedback.success.subtle.background;textColor=wonderBlocksTokens.semanticColor.feedback.success.subtle.text;break;case"warning":backgroundColor=wonderBlocksTokens.semanticColor.feedback.warning.subtle.background;textColor=wonderBlocksTokens.semanticColor.feedback.warning.subtle.text;break;case"critical":backgroundColor=wonderBlocksTokens.semanticColor.feedback.critical.subtle.background;textColor=wonderBlocksTokens.semanticColor.feedback.critical.subtle.text;break;case"transparent":backgroundColor=wonderBlocksTokens.semanticColor.core.transparent;textColor=wonderBlocksTokens.semanticColor.core.foreground.neutral.strong;break;case"neutral":default:backgroundColor=wonderBlocksTokens.semanticColor.status.neutral.background;textColor=wonderBlocksTokens.semanticColor.core.foreground.neutral.strong;}const pressColor=kind==="transparent"||kind==="neutral"?wonderBlocksTokens.color.offBlack16:kind==="accent"?wonderBlocksTokens.semanticColor.core.background.instructive.strong:`color-mix(in srgb, ${wonderBlocksTokens.color.offBlack32}, ${backgroundColor})`;const theme={default:{border:kind==="transparent"?`${wonderBlocksTokens.border.width.thin} solid ${wonderBlocksTokens.semanticColor.core.border.neutral.subtle}`:"none",background:backgroundColor,foreground:textColor},hover:{border:wonderBlocksTokens.semanticColor.core.border.instructive.default},press:{border:wonderBlocksTokens.semanticColor.core.border.instructive.strong,background:pressColor}};const colorStyles={pill:{backgroundColor:theme.default.background,outline:theme.default.border,color:theme.default.foreground,alignItems:"center",justifyContent:"center"},clickableWrapper:{outline:theme.default.border,":hover":{outline:`${wonderBlocksTokens.border.width.medium} solid ${theme.hover.border}`,outlineOffset:wonderBlocksTokens.sizing.size_020},":active":{backgroundColor:theme.press.background,outline:`${wonderBlocksTokens.border.width.medium} solid ${theme.press.border}`,outlineOffset:wonderBlocksTokens.sizing.size_020},...wonderBlocksStyles.focusStyles.focus}};styles[pillType]=aphrodite.StyleSheet.create(colorStyles);return styles[pillType]};
|
|
36
36
|
|
|
37
37
|
module.exports = Pill;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@khanacademy/wonder-blocks-pill",
|
|
3
|
-
"version": "3.1.
|
|
3
|
+
"version": "3.1.38",
|
|
4
4
|
"design": "v1",
|
|
5
5
|
"description": "Pill components for Wonder Blocks.",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -13,12 +13,12 @@
|
|
|
13
13
|
"access": "public"
|
|
14
14
|
},
|
|
15
15
|
"dependencies": {
|
|
16
|
-
"@khanacademy/wonder-blocks-clickable": "7.1.
|
|
16
|
+
"@khanacademy/wonder-blocks-clickable": "7.1.23",
|
|
17
17
|
"@khanacademy/wonder-blocks-core": "12.4.0",
|
|
18
|
-
"@khanacademy/wonder-blocks-link": "9.1
|
|
19
|
-
"@khanacademy/wonder-blocks-styles": "0.2.
|
|
20
|
-
"@khanacademy/wonder-blocks-tokens": "12.0
|
|
21
|
-
"@khanacademy/wonder-blocks-typography": "4.2.
|
|
18
|
+
"@khanacademy/wonder-blocks-link": "9.2.1",
|
|
19
|
+
"@khanacademy/wonder-blocks-styles": "0.2.29",
|
|
20
|
+
"@khanacademy/wonder-blocks-tokens": "12.2.0",
|
|
21
|
+
"@khanacademy/wonder-blocks-typography": "4.2.19"
|
|
22
22
|
},
|
|
23
23
|
"peerDependencies": {
|
|
24
24
|
"aphrodite": "^1.2.5",
|