@khanacademy/wonder-blocks-pill 3.1.9 → 3.1.11
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 +25 -0
- package/dist/es/index.js +3 -176
- package/dist/index.js +3 -177
- package/package.json +6 -7
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,30 @@
|
|
|
1
1
|
# @khanacademy/wonder-blocks-pill
|
|
2
2
|
|
|
3
|
+
## 3.1.11
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- Updated dependencies [b9e4946]
|
|
8
|
+
- Updated dependencies [b9e4946]
|
|
9
|
+
- @khanacademy/wonder-blocks-tokens@10.0.0
|
|
10
|
+
- @khanacademy/wonder-blocks-typography@3.2.0
|
|
11
|
+
- @khanacademy/wonder-blocks-clickable@7.0.4
|
|
12
|
+
- @khanacademy/wonder-blocks-link@9.0.4
|
|
13
|
+
- @khanacademy/wonder-blocks-core@12.2.1
|
|
14
|
+
|
|
15
|
+
## 3.1.10
|
|
16
|
+
|
|
17
|
+
### Patch Changes
|
|
18
|
+
|
|
19
|
+
- 7bbf311: Use color-mix() for active background colors
|
|
20
|
+
- Updated dependencies [2656fd4]
|
|
21
|
+
- Updated dependencies [6018552]
|
|
22
|
+
- Updated dependencies [7bbf311]
|
|
23
|
+
- Updated dependencies [7f79943]
|
|
24
|
+
- @khanacademy/wonder-blocks-tokens@9.0.0
|
|
25
|
+
- @khanacademy/wonder-blocks-clickable@7.0.3
|
|
26
|
+
- @khanacademy/wonder-blocks-link@9.0.3
|
|
27
|
+
|
|
3
28
|
## 3.1.9
|
|
4
29
|
|
|
5
30
|
### Patch Changes
|
package/dist/es/index.js
CHANGED
|
@@ -1,184 +1,11 @@
|
|
|
1
|
-
import
|
|
2
|
-
import _objectWithoutPropertiesLoose from '@babel/runtime/helpers/objectWithoutPropertiesLoose';
|
|
1
|
+
import { jsx } from 'react/jsx-runtime';
|
|
3
2
|
import * as React from 'react';
|
|
4
3
|
import { StyleSheet } from 'aphrodite';
|
|
5
4
|
import Clickable from '@khanacademy/wonder-blocks-clickable';
|
|
6
|
-
import * as tokens from '@khanacademy/wonder-blocks-tokens';
|
|
7
|
-
import { mix } from '@khanacademy/wonder-blocks-tokens';
|
|
8
5
|
import { View } from '@khanacademy/wonder-blocks-core';
|
|
9
6
|
import { LabelXSmall, Body, LabelSmall } from '@khanacademy/wonder-blocks-typography';
|
|
7
|
+
import * as tokens from '@khanacademy/wonder-blocks-tokens';
|
|
10
8
|
|
|
11
|
-
const
|
|
12
|
-
const {
|
|
13
|
-
semanticColor
|
|
14
|
-
} = tokens;
|
|
15
|
-
const PillInner = props => {
|
|
16
|
-
const {
|
|
17
|
-
children,
|
|
18
|
-
size
|
|
19
|
-
} = props;
|
|
20
|
-
if (typeof children !== "string") {
|
|
21
|
-
return children;
|
|
22
|
-
}
|
|
23
|
-
if (size === "small") {
|
|
24
|
-
return React.createElement(LabelXSmall, null, props.children);
|
|
25
|
-
}
|
|
26
|
-
if (size === "large") {
|
|
27
|
-
return React.createElement(Body, null, children);
|
|
28
|
-
}
|
|
29
|
-
return React.createElement(LabelSmall, null, children);
|
|
30
|
-
};
|
|
31
|
-
const Pill = React.forwardRef(function Pill(props, ref) {
|
|
32
|
-
const {
|
|
33
|
-
id,
|
|
34
|
-
children,
|
|
35
|
-
kind = "neutral",
|
|
36
|
-
size = "medium",
|
|
37
|
-
role,
|
|
38
|
-
onClick,
|
|
39
|
-
style,
|
|
40
|
-
tabIndex,
|
|
41
|
-
testId
|
|
42
|
-
} = props,
|
|
43
|
-
ariaProps = _objectWithoutPropertiesLoose(props, _excluded);
|
|
44
|
-
let wrapperSizeStyle;
|
|
45
|
-
switch (size) {
|
|
46
|
-
case "small":
|
|
47
|
-
wrapperSizeStyle = pillStyles.wrapperSmall;
|
|
48
|
-
break;
|
|
49
|
-
case "large":
|
|
50
|
-
wrapperSizeStyle = pillStyles.wrapperLarge;
|
|
51
|
-
break;
|
|
52
|
-
default:
|
|
53
|
-
wrapperSizeStyle = pillStyles.wrapperMedium;
|
|
54
|
-
}
|
|
55
|
-
const colorStyles = _generateColorStyles(!!onClick, kind);
|
|
56
|
-
const defaultStyles = [pillStyles.wrapper, colorStyles.pill, wrapperSizeStyle];
|
|
57
|
-
if (onClick) {
|
|
58
|
-
return React.createElement(Clickable, _extends({
|
|
59
|
-
id: id,
|
|
60
|
-
role: role,
|
|
61
|
-
onClick: onClick,
|
|
62
|
-
style: [defaultStyles, colorStyles.clickableWrapper, style],
|
|
63
|
-
testId: testId,
|
|
64
|
-
ref: ref,
|
|
65
|
-
tabIndex: tabIndex
|
|
66
|
-
}, ariaProps), () => React.createElement(PillInner, {
|
|
67
|
-
size: size
|
|
68
|
-
}, children));
|
|
69
|
-
}
|
|
70
|
-
return React.createElement(View, _extends({
|
|
71
|
-
id: id,
|
|
72
|
-
role: role,
|
|
73
|
-
style: [defaultStyles, style],
|
|
74
|
-
testId: testId,
|
|
75
|
-
ref: ref
|
|
76
|
-
}, ariaProps), React.createElement(PillInner, {
|
|
77
|
-
size: size
|
|
78
|
-
}, children));
|
|
79
|
-
});
|
|
80
|
-
const pillStyles = StyleSheet.create({
|
|
81
|
-
wrapper: {
|
|
82
|
-
display: "inline-flex",
|
|
83
|
-
width: "fit-content"
|
|
84
|
-
},
|
|
85
|
-
wrapperSmall: {
|
|
86
|
-
paddingLeft: tokens.spacing.xSmall_8,
|
|
87
|
-
paddingRight: tokens.spacing.xSmall_8,
|
|
88
|
-
borderRadius: tokens.border.radius.radius_040,
|
|
89
|
-
height: 20
|
|
90
|
-
},
|
|
91
|
-
wrapperMedium: {
|
|
92
|
-
paddingLeft: tokens.spacing.xSmall_8,
|
|
93
|
-
paddingRight: tokens.spacing.xSmall_8,
|
|
94
|
-
borderRadius: tokens.border.radius.radius_040,
|
|
95
|
-
height: tokens.spacing.large_24
|
|
96
|
-
},
|
|
97
|
-
wrapperLarge: {
|
|
98
|
-
paddingLeft: tokens.spacing.small_12,
|
|
99
|
-
paddingRight: tokens.spacing.small_12,
|
|
100
|
-
paddingTop: tokens.spacing.xxSmall_6,
|
|
101
|
-
paddingBottom: tokens.spacing.xxSmall_6,
|
|
102
|
-
borderRadius: tokens.sizing.size_240,
|
|
103
|
-
height: tokens.spacing.xLarge_32
|
|
104
|
-
}
|
|
105
|
-
});
|
|
106
|
-
const styles = {};
|
|
107
|
-
const _generateColorStyles = (clickable, kind) => {
|
|
108
|
-
const pillType = `${kind}-${clickable.toString()}`;
|
|
109
|
-
if (styles[pillType]) {
|
|
110
|
-
return styles[pillType];
|
|
111
|
-
}
|
|
112
|
-
let backgroundColor;
|
|
113
|
-
switch (kind) {
|
|
114
|
-
case "accent":
|
|
115
|
-
backgroundColor = semanticColor.status.notice.foreground;
|
|
116
|
-
break;
|
|
117
|
-
case "info":
|
|
118
|
-
backgroundColor = semanticColor.status.notice.background;
|
|
119
|
-
break;
|
|
120
|
-
case "success":
|
|
121
|
-
backgroundColor = semanticColor.status.success.background;
|
|
122
|
-
break;
|
|
123
|
-
case "warning":
|
|
124
|
-
backgroundColor = semanticColor.status.warning.background;
|
|
125
|
-
break;
|
|
126
|
-
case "critical":
|
|
127
|
-
backgroundColor = semanticColor.status.critical.background;
|
|
128
|
-
break;
|
|
129
|
-
case "transparent":
|
|
130
|
-
backgroundColor = "transparent";
|
|
131
|
-
break;
|
|
132
|
-
case "neutral":
|
|
133
|
-
default:
|
|
134
|
-
backgroundColor = semanticColor.status.neutral.background;
|
|
135
|
-
}
|
|
136
|
-
const pressColor = kind === "transparent" ? semanticColor.status.neutral.background : mix(tokens.color.offBlack32, backgroundColor);
|
|
137
|
-
const textColor = kind === "accent" ? semanticColor.text.inverse : semanticColor.text.primary;
|
|
138
|
-
const theme = {
|
|
139
|
-
default: {
|
|
140
|
-
border: kind === "transparent" ? `1px solid ${semanticColor.border.primary}` : "none",
|
|
141
|
-
background: backgroundColor,
|
|
142
|
-
foreground: textColor
|
|
143
|
-
},
|
|
144
|
-
focus: {
|
|
145
|
-
border: semanticColor.focus.outer
|
|
146
|
-
},
|
|
147
|
-
hover: {
|
|
148
|
-
border: semanticColor.action.primary.progressive.hover.border
|
|
149
|
-
},
|
|
150
|
-
press: {
|
|
151
|
-
border: semanticColor.action.primary.progressive.press.border,
|
|
152
|
-
background: pressColor
|
|
153
|
-
}
|
|
154
|
-
};
|
|
155
|
-
const colorStyles = {
|
|
156
|
-
pill: {
|
|
157
|
-
backgroundColor: theme.default.background,
|
|
158
|
-
outline: theme.default.border,
|
|
159
|
-
color: theme.default.foreground,
|
|
160
|
-
alignItems: "center",
|
|
161
|
-
justifyContent: "center"
|
|
162
|
-
},
|
|
163
|
-
clickableWrapper: {
|
|
164
|
-
outline: theme.default.border,
|
|
165
|
-
":hover": {
|
|
166
|
-
outline: `2px solid ${theme.hover.border}`,
|
|
167
|
-
outlineOffset: tokens.spacing.xxxxSmall_2
|
|
168
|
-
},
|
|
169
|
-
":active": {
|
|
170
|
-
backgroundColor: theme.press.background,
|
|
171
|
-
outline: `2px solid ${theme.press.border}`,
|
|
172
|
-
outlineOffset: tokens.spacing.xxxxSmall_2
|
|
173
|
-
},
|
|
174
|
-
":focus-visible": {
|
|
175
|
-
outline: `2px solid ${theme.focus.border}`,
|
|
176
|
-
outlineOffset: tokens.spacing.xxxxSmall_2
|
|
177
|
-
}
|
|
178
|
-
}
|
|
179
|
-
};
|
|
180
|
-
styles[pillType] = StyleSheet.create(colorStyles);
|
|
181
|
-
return styles[pillType];
|
|
182
|
-
};
|
|
9
|
+
const{semanticColor}=tokens;const PillInner=props=>{const{children,size}=props;if(typeof children!=="string"){return children}if(size==="small"){return jsx(LabelXSmall,{children:props.children})}if(size==="large"){return jsx(Body,{children:children})}return jsx(LabelSmall,{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:{paddingLeft:tokens.spacing.xSmall_8,paddingRight:tokens.spacing.xSmall_8,borderRadius:tokens.border.radius.radius_040,height:20},wrapperMedium:{paddingLeft:tokens.spacing.xSmall_8,paddingRight:tokens.spacing.xSmall_8,borderRadius:tokens.border.radius.radius_040,height:tokens.spacing.large_24},wrapperLarge:{paddingLeft:tokens.spacing.small_12,paddingRight:tokens.spacing.small_12,paddingTop:tokens.spacing.xxSmall_6,paddingBottom:tokens.spacing.xxSmall_6,borderRadius:tokens.sizing.size_240,height:tokens.spacing.xLarge_32}});const styles={};const _generateColorStyles=(clickable,kind)=>{const pillType=`${kind}-${clickable.toString()}`;if(styles[pillType]){return styles[pillType]}let backgroundColor;switch(kind){case"accent":backgroundColor=semanticColor.status.notice.foreground;break;case"info":backgroundColor=semanticColor.status.notice.background;break;case"success":backgroundColor=semanticColor.status.success.background;break;case"warning":backgroundColor=semanticColor.status.warning.background;break;case"critical":backgroundColor=semanticColor.status.critical.background;break;case"transparent":backgroundColor="transparent";break;case"neutral":default:backgroundColor=semanticColor.status.neutral.background;}const pressColor=kind==="transparent"||kind==="neutral"?tokens.color.offBlack16:kind==="accent"?tokens.color.activeBlue:`color-mix(in srgb, ${tokens.color.offBlack32}, ${backgroundColor})`;const textColor=kind==="accent"?semanticColor.text.inverse:semanticColor.text.primary;const theme={default:{border:kind==="transparent"?`1px solid ${semanticColor.border.primary}`:"none",background:backgroundColor,foreground:textColor},focus:{border:semanticColor.focus.outer},hover:{border:semanticColor.action.primary.progressive.hover.border},press:{border:semanticColor.action.primary.progressive.press.border,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:`2px solid ${theme.hover.border}`,outlineOffset:tokens.spacing.xxxxSmall_2},":active":{backgroundColor:theme.press.background,outline:`2px solid ${theme.press.border}`,outlineOffset:tokens.spacing.xxxxSmall_2},":focus-visible":{outline:`2px solid ${theme.focus.border}`,outlineOffset:tokens.spacing.xxxxSmall_2}}};styles[pillType]=StyleSheet.create(colorStyles);return styles[pillType]};
|
|
183
10
|
|
|
184
11
|
export { Pill as default };
|
package/dist/index.js
CHANGED
|
@@ -1,13 +1,12 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var
|
|
4
|
-
var _objectWithoutPropertiesLoose = require('@babel/runtime/helpers/objectWithoutPropertiesLoose');
|
|
3
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
5
4
|
var React = require('react');
|
|
6
5
|
var aphrodite = require('aphrodite');
|
|
7
6
|
var Clickable = require('@khanacademy/wonder-blocks-clickable');
|
|
8
|
-
var tokens = require('@khanacademy/wonder-blocks-tokens');
|
|
9
7
|
var wonderBlocksCore = require('@khanacademy/wonder-blocks-core');
|
|
10
8
|
var wonderBlocksTypography = require('@khanacademy/wonder-blocks-typography');
|
|
9
|
+
var tokens = require('@khanacademy/wonder-blocks-tokens');
|
|
11
10
|
|
|
12
11
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
13
12
|
|
|
@@ -29,183 +28,10 @@ function _interopNamespace(e) {
|
|
|
29
28
|
return Object.freeze(n);
|
|
30
29
|
}
|
|
31
30
|
|
|
32
|
-
var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
|
|
33
|
-
var _objectWithoutPropertiesLoose__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutPropertiesLoose);
|
|
34
31
|
var React__namespace = /*#__PURE__*/_interopNamespace(React);
|
|
35
32
|
var Clickable__default = /*#__PURE__*/_interopDefaultLegacy(Clickable);
|
|
36
33
|
var tokens__namespace = /*#__PURE__*/_interopNamespace(tokens);
|
|
37
34
|
|
|
38
|
-
const
|
|
39
|
-
const {
|
|
40
|
-
semanticColor
|
|
41
|
-
} = tokens__namespace;
|
|
42
|
-
const PillInner = props => {
|
|
43
|
-
const {
|
|
44
|
-
children,
|
|
45
|
-
size
|
|
46
|
-
} = props;
|
|
47
|
-
if (typeof children !== "string") {
|
|
48
|
-
return children;
|
|
49
|
-
}
|
|
50
|
-
if (size === "small") {
|
|
51
|
-
return React__namespace.createElement(wonderBlocksTypography.LabelXSmall, null, props.children);
|
|
52
|
-
}
|
|
53
|
-
if (size === "large") {
|
|
54
|
-
return React__namespace.createElement(wonderBlocksTypography.Body, null, children);
|
|
55
|
-
}
|
|
56
|
-
return React__namespace.createElement(wonderBlocksTypography.LabelSmall, null, children);
|
|
57
|
-
};
|
|
58
|
-
const Pill = React__namespace.forwardRef(function Pill(props, ref) {
|
|
59
|
-
const {
|
|
60
|
-
id,
|
|
61
|
-
children,
|
|
62
|
-
kind = "neutral",
|
|
63
|
-
size = "medium",
|
|
64
|
-
role,
|
|
65
|
-
onClick,
|
|
66
|
-
style,
|
|
67
|
-
tabIndex,
|
|
68
|
-
testId
|
|
69
|
-
} = props,
|
|
70
|
-
ariaProps = _objectWithoutPropertiesLoose__default["default"](props, _excluded);
|
|
71
|
-
let wrapperSizeStyle;
|
|
72
|
-
switch (size) {
|
|
73
|
-
case "small":
|
|
74
|
-
wrapperSizeStyle = pillStyles.wrapperSmall;
|
|
75
|
-
break;
|
|
76
|
-
case "large":
|
|
77
|
-
wrapperSizeStyle = pillStyles.wrapperLarge;
|
|
78
|
-
break;
|
|
79
|
-
default:
|
|
80
|
-
wrapperSizeStyle = pillStyles.wrapperMedium;
|
|
81
|
-
}
|
|
82
|
-
const colorStyles = _generateColorStyles(!!onClick, kind);
|
|
83
|
-
const defaultStyles = [pillStyles.wrapper, colorStyles.pill, wrapperSizeStyle];
|
|
84
|
-
if (onClick) {
|
|
85
|
-
return React__namespace.createElement(Clickable__default["default"], _extends__default["default"]({
|
|
86
|
-
id: id,
|
|
87
|
-
role: role,
|
|
88
|
-
onClick: onClick,
|
|
89
|
-
style: [defaultStyles, colorStyles.clickableWrapper, style],
|
|
90
|
-
testId: testId,
|
|
91
|
-
ref: ref,
|
|
92
|
-
tabIndex: tabIndex
|
|
93
|
-
}, ariaProps), () => React__namespace.createElement(PillInner, {
|
|
94
|
-
size: size
|
|
95
|
-
}, children));
|
|
96
|
-
}
|
|
97
|
-
return React__namespace.createElement(wonderBlocksCore.View, _extends__default["default"]({
|
|
98
|
-
id: id,
|
|
99
|
-
role: role,
|
|
100
|
-
style: [defaultStyles, style],
|
|
101
|
-
testId: testId,
|
|
102
|
-
ref: ref
|
|
103
|
-
}, ariaProps), React__namespace.createElement(PillInner, {
|
|
104
|
-
size: size
|
|
105
|
-
}, children));
|
|
106
|
-
});
|
|
107
|
-
const pillStyles = aphrodite.StyleSheet.create({
|
|
108
|
-
wrapper: {
|
|
109
|
-
display: "inline-flex",
|
|
110
|
-
width: "fit-content"
|
|
111
|
-
},
|
|
112
|
-
wrapperSmall: {
|
|
113
|
-
paddingLeft: tokens__namespace.spacing.xSmall_8,
|
|
114
|
-
paddingRight: tokens__namespace.spacing.xSmall_8,
|
|
115
|
-
borderRadius: tokens__namespace.border.radius.radius_040,
|
|
116
|
-
height: 20
|
|
117
|
-
},
|
|
118
|
-
wrapperMedium: {
|
|
119
|
-
paddingLeft: tokens__namespace.spacing.xSmall_8,
|
|
120
|
-
paddingRight: tokens__namespace.spacing.xSmall_8,
|
|
121
|
-
borderRadius: tokens__namespace.border.radius.radius_040,
|
|
122
|
-
height: tokens__namespace.spacing.large_24
|
|
123
|
-
},
|
|
124
|
-
wrapperLarge: {
|
|
125
|
-
paddingLeft: tokens__namespace.spacing.small_12,
|
|
126
|
-
paddingRight: tokens__namespace.spacing.small_12,
|
|
127
|
-
paddingTop: tokens__namespace.spacing.xxSmall_6,
|
|
128
|
-
paddingBottom: tokens__namespace.spacing.xxSmall_6,
|
|
129
|
-
borderRadius: tokens__namespace.sizing.size_240,
|
|
130
|
-
height: tokens__namespace.spacing.xLarge_32
|
|
131
|
-
}
|
|
132
|
-
});
|
|
133
|
-
const styles = {};
|
|
134
|
-
const _generateColorStyles = (clickable, kind) => {
|
|
135
|
-
const pillType = `${kind}-${clickable.toString()}`;
|
|
136
|
-
if (styles[pillType]) {
|
|
137
|
-
return styles[pillType];
|
|
138
|
-
}
|
|
139
|
-
let backgroundColor;
|
|
140
|
-
switch (kind) {
|
|
141
|
-
case "accent":
|
|
142
|
-
backgroundColor = semanticColor.status.notice.foreground;
|
|
143
|
-
break;
|
|
144
|
-
case "info":
|
|
145
|
-
backgroundColor = semanticColor.status.notice.background;
|
|
146
|
-
break;
|
|
147
|
-
case "success":
|
|
148
|
-
backgroundColor = semanticColor.status.success.background;
|
|
149
|
-
break;
|
|
150
|
-
case "warning":
|
|
151
|
-
backgroundColor = semanticColor.status.warning.background;
|
|
152
|
-
break;
|
|
153
|
-
case "critical":
|
|
154
|
-
backgroundColor = semanticColor.status.critical.background;
|
|
155
|
-
break;
|
|
156
|
-
case "transparent":
|
|
157
|
-
backgroundColor = "transparent";
|
|
158
|
-
break;
|
|
159
|
-
case "neutral":
|
|
160
|
-
default:
|
|
161
|
-
backgroundColor = semanticColor.status.neutral.background;
|
|
162
|
-
}
|
|
163
|
-
const pressColor = kind === "transparent" ? semanticColor.status.neutral.background : tokens.mix(tokens__namespace.color.offBlack32, backgroundColor);
|
|
164
|
-
const textColor = kind === "accent" ? semanticColor.text.inverse : semanticColor.text.primary;
|
|
165
|
-
const theme = {
|
|
166
|
-
default: {
|
|
167
|
-
border: kind === "transparent" ? `1px solid ${semanticColor.border.primary}` : "none",
|
|
168
|
-
background: backgroundColor,
|
|
169
|
-
foreground: textColor
|
|
170
|
-
},
|
|
171
|
-
focus: {
|
|
172
|
-
border: semanticColor.focus.outer
|
|
173
|
-
},
|
|
174
|
-
hover: {
|
|
175
|
-
border: semanticColor.action.primary.progressive.hover.border
|
|
176
|
-
},
|
|
177
|
-
press: {
|
|
178
|
-
border: semanticColor.action.primary.progressive.press.border,
|
|
179
|
-
background: pressColor
|
|
180
|
-
}
|
|
181
|
-
};
|
|
182
|
-
const colorStyles = {
|
|
183
|
-
pill: {
|
|
184
|
-
backgroundColor: theme.default.background,
|
|
185
|
-
outline: theme.default.border,
|
|
186
|
-
color: theme.default.foreground,
|
|
187
|
-
alignItems: "center",
|
|
188
|
-
justifyContent: "center"
|
|
189
|
-
},
|
|
190
|
-
clickableWrapper: {
|
|
191
|
-
outline: theme.default.border,
|
|
192
|
-
":hover": {
|
|
193
|
-
outline: `2px solid ${theme.hover.border}`,
|
|
194
|
-
outlineOffset: tokens__namespace.spacing.xxxxSmall_2
|
|
195
|
-
},
|
|
196
|
-
":active": {
|
|
197
|
-
backgroundColor: theme.press.background,
|
|
198
|
-
outline: `2px solid ${theme.press.border}`,
|
|
199
|
-
outlineOffset: tokens__namespace.spacing.xxxxSmall_2
|
|
200
|
-
},
|
|
201
|
-
":focus-visible": {
|
|
202
|
-
outline: `2px solid ${theme.focus.border}`,
|
|
203
|
-
outlineOffset: tokens__namespace.spacing.xxxxSmall_2
|
|
204
|
-
}
|
|
205
|
-
}
|
|
206
|
-
};
|
|
207
|
-
styles[pillType] = aphrodite.StyleSheet.create(colorStyles);
|
|
208
|
-
return styles[pillType];
|
|
209
|
-
};
|
|
35
|
+
const{semanticColor}=tokens__namespace;const PillInner=props=>{const{children,size}=props;if(typeof children!=="string"){return children}if(size==="small"){return jsxRuntime.jsx(wonderBlocksTypography.LabelXSmall,{children:props.children})}if(size==="large"){return jsxRuntime.jsx(wonderBlocksTypography.Body,{children:children})}return jsxRuntime.jsx(wonderBlocksTypography.LabelSmall,{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:{paddingLeft:tokens__namespace.spacing.xSmall_8,paddingRight:tokens__namespace.spacing.xSmall_8,borderRadius:tokens__namespace.border.radius.radius_040,height:20},wrapperMedium:{paddingLeft:tokens__namespace.spacing.xSmall_8,paddingRight:tokens__namespace.spacing.xSmall_8,borderRadius:tokens__namespace.border.radius.radius_040,height:tokens__namespace.spacing.large_24},wrapperLarge:{paddingLeft:tokens__namespace.spacing.small_12,paddingRight:tokens__namespace.spacing.small_12,paddingTop:tokens__namespace.spacing.xxSmall_6,paddingBottom:tokens__namespace.spacing.xxSmall_6,borderRadius:tokens__namespace.sizing.size_240,height:tokens__namespace.spacing.xLarge_32}});const styles={};const _generateColorStyles=(clickable,kind)=>{const pillType=`${kind}-${clickable.toString()}`;if(styles[pillType]){return styles[pillType]}let backgroundColor;switch(kind){case"accent":backgroundColor=semanticColor.status.notice.foreground;break;case"info":backgroundColor=semanticColor.status.notice.background;break;case"success":backgroundColor=semanticColor.status.success.background;break;case"warning":backgroundColor=semanticColor.status.warning.background;break;case"critical":backgroundColor=semanticColor.status.critical.background;break;case"transparent":backgroundColor="transparent";break;case"neutral":default:backgroundColor=semanticColor.status.neutral.background;}const pressColor=kind==="transparent"||kind==="neutral"?tokens__namespace.color.offBlack16:kind==="accent"?tokens__namespace.color.activeBlue:`color-mix(in srgb, ${tokens__namespace.color.offBlack32}, ${backgroundColor})`;const textColor=kind==="accent"?semanticColor.text.inverse:semanticColor.text.primary;const theme={default:{border:kind==="transparent"?`1px solid ${semanticColor.border.primary}`:"none",background:backgroundColor,foreground:textColor},focus:{border:semanticColor.focus.outer},hover:{border:semanticColor.action.primary.progressive.hover.border},press:{border:semanticColor.action.primary.progressive.press.border,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:`2px solid ${theme.hover.border}`,outlineOffset:tokens__namespace.spacing.xxxxSmall_2},":active":{backgroundColor:theme.press.background,outline:`2px solid ${theme.press.border}`,outlineOffset:tokens__namespace.spacing.xxxxSmall_2},":focus-visible":{outline:`2px solid ${theme.focus.border}`,outlineOffset:tokens__namespace.spacing.xxxxSmall_2}}};styles[pillType]=aphrodite.StyleSheet.create(colorStyles);return styles[pillType]};
|
|
210
36
|
|
|
211
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.11",
|
|
4
4
|
"design": "v1",
|
|
5
5
|
"description": "Pill components for Wonder Blocks.",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -13,19 +13,18 @@
|
|
|
13
13
|
"access": "public"
|
|
14
14
|
},
|
|
15
15
|
"dependencies": {
|
|
16
|
-
"@
|
|
17
|
-
"@khanacademy/wonder-blocks-clickable": "7.0.2",
|
|
16
|
+
"@khanacademy/wonder-blocks-clickable": "7.0.4",
|
|
18
17
|
"@khanacademy/wonder-blocks-core": "12.2.1",
|
|
19
|
-
"@khanacademy/wonder-blocks-link": "9.0.
|
|
20
|
-
"@khanacademy/wonder-blocks-tokens": "
|
|
21
|
-
"@khanacademy/wonder-blocks-typography": "3.
|
|
18
|
+
"@khanacademy/wonder-blocks-link": "9.0.4",
|
|
19
|
+
"@khanacademy/wonder-blocks-tokens": "10.0.0",
|
|
20
|
+
"@khanacademy/wonder-blocks-typography": "3.2.0"
|
|
22
21
|
},
|
|
23
22
|
"peerDependencies": {
|
|
24
23
|
"aphrodite": "^1.2.5",
|
|
25
24
|
"react": "18.2.0"
|
|
26
25
|
},
|
|
27
26
|
"devDependencies": {
|
|
28
|
-
"@khanacademy/wb-dev-build-settings": "
|
|
27
|
+
"@khanacademy/wb-dev-build-settings": "3.0.0"
|
|
29
28
|
},
|
|
30
29
|
"scripts": {
|
|
31
30
|
"test": "echo \"Error: no test specified\" && exit 1"
|