@khanacademy/wonder-blocks-card 1.4.12 → 1.4.14
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 +20 -0
- package/dist/es/index.js +1 -1
- package/dist/index.js +1 -1
- package/package.json +4 -4
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,25 @@
|
|
|
1
1
|
# @khanacademy/wonder-blocks-card
|
|
2
2
|
|
|
3
|
+
## 1.4.14
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- 40cb70f: Add `require-logical-properties-for-rtl` ESLint rule to `eslint-plugin-wonder-blocks` recommended config, and migrate all Wonder Blocks component source files to use CSS logical properties for improved RTL layout support.
|
|
8
|
+
- 40cb70f: Enable RTL logical-properties ESLint rule in recommended config
|
|
9
|
+
- Updated dependencies [40cb70f]
|
|
10
|
+
- Updated dependencies [40cb70f]
|
|
11
|
+
- @khanacademy/wonder-blocks-core@12.4.4
|
|
12
|
+
- @khanacademy/wonder-blocks-icon-button@11.3.1
|
|
13
|
+
|
|
14
|
+
## 1.4.13
|
|
15
|
+
|
|
16
|
+
### Patch Changes
|
|
17
|
+
|
|
18
|
+
- Updated dependencies [44bde5e]
|
|
19
|
+
- Updated dependencies [27a211d]
|
|
20
|
+
- @khanacademy/wonder-blocks-tokens@16.5.0
|
|
21
|
+
- @khanacademy/wonder-blocks-icon-button@11.3.0
|
|
22
|
+
|
|
3
23
|
## 1.4.12
|
|
4
24
|
|
|
5
25
|
### Patch Changes
|
package/dist/es/index.js
CHANGED
|
@@ -7,7 +7,7 @@ import xIcon from '@phosphor-icons/core/bold/x-bold.svg';
|
|
|
7
7
|
import IconButton from '@khanacademy/wonder-blocks-icon-button';
|
|
8
8
|
import { focusStyles } from '@khanacademy/wonder-blocks-styles';
|
|
9
9
|
|
|
10
|
-
const DismissButton=props=>{const{onClick,style,testId,"aria-describedby":ariaDescribedBy}=props;return jsx(IconButton,{icon:xIcon,"aria-label":props["aria-label"]||"Close","aria-describedby":ariaDescribedBy,onClick:onClick,kind:"tertiary",actionType:"neutral",style:[componentStyles.root,style],testId:testId})};const componentStyles=StyleSheet.create({root:{position:"absolute",insetInlineEnd:sizing.size_080,
|
|
10
|
+
const DismissButton=props=>{const{onClick,style,testId,"aria-describedby":ariaDescribedBy}=props;return jsx(IconButton,{icon:xIcon,"aria-label":props["aria-label"]||"Close","aria-describedby":ariaDescribedBy,onClick:onClick,kind:"tertiary",actionType:"neutral",style:[componentStyles.root,style],testId:testId})};const componentStyles=StyleSheet.create({root:{position:"absolute",insetInlineEnd:sizing.size_080,insetBlockStart:sizing.size_080,zIndex:1,":focus":focusStyles.focus[":focus-visible"]}});
|
|
11
11
|
|
|
12
12
|
const Card=React.forwardRef(function Card(props,ref){const{styles,labels,tag,testId,background="base-default",borderRadius="small",paddingSize="small",elevation="none",children,onDismiss,inert,"aria-labelledby":ariaLabelledBy,"aria-busy":ariaBusy,role}=props;const isBackgroundToken=background==="base-default"||background==="base-subtle";const componentStyles=getComponentStyles({background:isBackgroundToken?background:null,borderRadius,paddingSize,elevation});return jsxs(View,{"aria-busy":ariaBusy,"aria-label":labels?.cardAriaLabel,"aria-labelledby":ariaLabelledBy,style:[componentStyles.root,!isBackgroundToken&&{background:`url(${background})`,backgroundSize:"cover"},styles?.root],ref:ref,role:role,tag:tag,testId:testId,inert:inert?"":undefined,children:[onDismiss?jsx(DismissButton,{"aria-label":labels?.dismissButtonAriaLabel||"Close","aria-describedby":labels?.dismissButtonAriaDescribedBy,onClick:e=>onDismiss?.(e),testId:testId&&`${testId}-dismiss-button`}):null,children]})});const styleMap={backgroundColor:{"base-subtle":semanticColor.core.background.base.subtle,"base-default":semanticColor.core.background.base.default},borderRadius:{small:border.radius.radius_080,medium:border.radius.radius_120},padding:{none:sizing.size_0,small:sizing.size_160,medium:sizing.size_240},elevation:{none:"none",low:boxShadow.low}};const getComponentStyles=({background="base-default",borderRadius="small",paddingSize="small",elevation="none"})=>{const bgColor=background;return StyleSheet.create({root:{backgroundColor:bgColor&&styleMap.backgroundColor[bgColor],borderColor:semanticColor.core.border.neutral.subtle,borderStyle:"solid",borderWidth:border.width.thin,fontFamily:font.family.sans,minInlineSize:sizing.size_280,position:"relative",borderRadius:styleMap.borderRadius[borderRadius],boxShadow:styleMap.elevation[elevation],padding:styleMap.padding[paddingSize]}})};
|
|
13
13
|
|
package/dist/index.js
CHANGED
|
@@ -35,7 +35,7 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
|
|
|
35
35
|
var xIcon__default = /*#__PURE__*/_interopDefaultLegacy(xIcon);
|
|
36
36
|
var IconButton__default = /*#__PURE__*/_interopDefaultLegacy(IconButton);
|
|
37
37
|
|
|
38
|
-
const DismissButton=props=>{const{onClick,style,testId,"aria-describedby":ariaDescribedBy}=props;return jsxRuntime.jsx(IconButton__default["default"],{icon:xIcon__default["default"],"aria-label":props["aria-label"]||"Close","aria-describedby":ariaDescribedBy,onClick:onClick,kind:"tertiary",actionType:"neutral",style:[componentStyles.root,style],testId:testId})};const componentStyles=aphrodite.StyleSheet.create({root:{position:"absolute",insetInlineEnd:wonderBlocksTokens.sizing.size_080,
|
|
38
|
+
const DismissButton=props=>{const{onClick,style,testId,"aria-describedby":ariaDescribedBy}=props;return jsxRuntime.jsx(IconButton__default["default"],{icon:xIcon__default["default"],"aria-label":props["aria-label"]||"Close","aria-describedby":ariaDescribedBy,onClick:onClick,kind:"tertiary",actionType:"neutral",style:[componentStyles.root,style],testId:testId})};const componentStyles=aphrodite.StyleSheet.create({root:{position:"absolute",insetInlineEnd:wonderBlocksTokens.sizing.size_080,insetBlockStart:wonderBlocksTokens.sizing.size_080,zIndex:1,":focus":wonderBlocksStyles.focusStyles.focus[":focus-visible"]}});
|
|
39
39
|
|
|
40
40
|
const Card=React__namespace.forwardRef(function Card(props,ref){const{styles,labels,tag,testId,background="base-default",borderRadius="small",paddingSize="small",elevation="none",children,onDismiss,inert,"aria-labelledby":ariaLabelledBy,"aria-busy":ariaBusy,role}=props;const isBackgroundToken=background==="base-default"||background==="base-subtle";const componentStyles=getComponentStyles({background:isBackgroundToken?background:null,borderRadius,paddingSize,elevation});return jsxRuntime.jsxs(wonderBlocksCore.View,{"aria-busy":ariaBusy,"aria-label":labels?.cardAriaLabel,"aria-labelledby":ariaLabelledBy,style:[componentStyles.root,!isBackgroundToken&&{background:`url(${background})`,backgroundSize:"cover"},styles?.root],ref:ref,role:role,tag:tag,testId:testId,inert:inert?"":undefined,children:[onDismiss?jsxRuntime.jsx(DismissButton,{"aria-label":labels?.dismissButtonAriaLabel||"Close","aria-describedby":labels?.dismissButtonAriaDescribedBy,onClick:e=>onDismiss?.(e),testId:testId&&`${testId}-dismiss-button`}):null,children]})});const styleMap={backgroundColor:{"base-subtle":wonderBlocksTokens.semanticColor.core.background.base.subtle,"base-default":wonderBlocksTokens.semanticColor.core.background.base.default},borderRadius:{small:wonderBlocksTokens.border.radius.radius_080,medium:wonderBlocksTokens.border.radius.radius_120},padding:{none:wonderBlocksTokens.sizing.size_0,small:wonderBlocksTokens.sizing.size_160,medium:wonderBlocksTokens.sizing.size_240},elevation:{none:"none",low:wonderBlocksTokens.boxShadow.low}};const getComponentStyles=({background="base-default",borderRadius="small",paddingSize="small",elevation="none"})=>{const bgColor=background;return aphrodite.StyleSheet.create({root:{backgroundColor:bgColor&&styleMap.backgroundColor[bgColor],borderColor:wonderBlocksTokens.semanticColor.core.border.neutral.subtle,borderStyle:"solid",borderWidth:wonderBlocksTokens.border.width.thin,fontFamily:wonderBlocksTokens.font.family.sans,minInlineSize:wonderBlocksTokens.sizing.size_280,position:"relative",borderRadius:styleMap.borderRadius[borderRadius],boxShadow:styleMap.elevation[elevation],padding:styleMap.padding[paddingSize]}})};
|
|
41
41
|
|
package/package.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"description": "Card component for Wonder Blocks.",
|
|
4
4
|
"author": "Khan Academy",
|
|
5
5
|
"license": "MIT",
|
|
6
|
-
"version": "1.4.
|
|
6
|
+
"version": "1.4.14",
|
|
7
7
|
"publishConfig": {
|
|
8
8
|
"access": "public"
|
|
9
9
|
},
|
|
@@ -21,9 +21,9 @@
|
|
|
21
21
|
"types": "dist/index.d.ts",
|
|
22
22
|
"source": "src/index.js",
|
|
23
23
|
"dependencies": {
|
|
24
|
-
"@khanacademy/wonder-blocks-core": "12.4.
|
|
25
|
-
"@khanacademy/wonder-blocks-icon-button": "11.
|
|
26
|
-
"@khanacademy/wonder-blocks-tokens": "16.
|
|
24
|
+
"@khanacademy/wonder-blocks-core": "12.4.4",
|
|
25
|
+
"@khanacademy/wonder-blocks-icon-button": "11.3.1",
|
|
26
|
+
"@khanacademy/wonder-blocks-tokens": "16.5.0"
|
|
27
27
|
},
|
|
28
28
|
"peerDependencies": {
|
|
29
29
|
"aphrodite": "^1.2.5",
|