@khanacademy/wonder-blocks-toolbar 5.1.9 → 5.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.
Files changed (4) hide show
  1. package/CHANGELOG.md +19 -0
  2. package/dist/es/index.js +3 -80
  3. package/dist/index.js +3 -100
  4. package/package.json +5 -6
package/CHANGELOG.md CHANGED
@@ -1,5 +1,24 @@
1
1
  # @khanacademy/wonder-blocks-toolbar
2
2
 
3
+ ## 5.1.11
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies [28fa0c0]
8
+ - Updated dependencies [28fa0c0]
9
+ - @khanacademy/wonder-blocks-core@12.3.0
10
+ - @khanacademy/wonder-blocks-typography@3.2.1
11
+
12
+ ## 5.1.10
13
+
14
+ ### Patch Changes
15
+
16
+ - Updated dependencies [b9e4946]
17
+ - Updated dependencies [b9e4946]
18
+ - @khanacademy/wonder-blocks-tokens@10.0.0
19
+ - @khanacademy/wonder-blocks-typography@3.2.0
20
+ - @khanacademy/wonder-blocks-core@12.2.1
21
+
3
22
  ## 5.1.9
4
23
 
5
24
  ### Patch Changes
package/dist/es/index.js CHANGED
@@ -1,87 +1,10 @@
1
- import * as React from 'react';
1
+ import { jsxs, jsx } from 'react/jsx-runtime';
2
+ import 'react';
2
3
  import { StyleSheet } from 'aphrodite';
3
4
  import { View } from '@khanacademy/wonder-blocks-core';
4
5
  import { semanticColor, spacing, color } from '@khanacademy/wonder-blocks-tokens';
5
6
  import { LabelSmall, LabelLarge, HeadingSmall } from '@khanacademy/wonder-blocks-typography';
6
7
 
7
- function Toolbar({
8
- color = "light",
9
- leftContent,
10
- rightContent,
11
- size = "medium",
12
- subtitle,
13
- title
14
- }) {
15
- const TitleComponent = subtitle ? LabelLarge : HeadingSmall;
16
- return React.createElement(View, {
17
- style: [sharedStyles.container, !title ? sharedStyles.containerWithNoTitle : typeof title === "string" ? sharedStyles.containerWithTextTitle : sharedStyles.containerWithNodeTitle, color === "dark" && sharedStyles.dark, size === "small" && sharedStyles.small]
18
- }, React.createElement(View, {
19
- style: sharedStyles.leftColumn
20
- }, leftContent), title && typeof title === "string" && React.createElement(View, {
21
- style: sharedStyles.titles
22
- }, React.createElement(TitleComponent, {
23
- id: "wb-toolbar-title"
24
- }, title), subtitle && React.createElement(LabelSmall, {
25
- style: color === "light" && sharedStyles.subtitle
26
- }, subtitle)), title && typeof title !== "string" && React.createElement(View, {
27
- style: sharedStyles.titles
28
- }, title), !title && React.createElement(View, {
29
- style: leftContent ? sharedStyles.spacer : undefined
30
- }), React.createElement(View, {
31
- style: sharedStyles.rightColumn
32
- }, rightContent));
33
- }
34
- const sharedStyles = StyleSheet.create({
35
- container: {
36
- background: semanticColor.surface.primary,
37
- border: `1px solid ${semanticColor.border.primary}`,
38
- flex: 1,
39
- display: "grid",
40
- alignItems: "center",
41
- minHeight: 66,
42
- paddingInline: spacing.medium_16,
43
- width: "100%"
44
- },
45
- containerWithTextTitle: {
46
- gridTemplateColumns: "1fr minmax(auto, 67%) 1fr"
47
- },
48
- containerWithNodeTitle: {
49
- gridTemplateColumns: "minmax(max-content, 1fr) auto minmax(max-content, 1fr)"
50
- },
51
- containerWithNoTitle: {
52
- gridTemplateColumns: "auto auto 1fr"
53
- },
54
- small: {
55
- minHeight: 50
56
- },
57
- dark: {
58
- background: semanticColor.surface.inverse,
59
- boxShadow: `0 1px 0 0 ${color.white64}`,
60
- color: semanticColor.text.inverse
61
- },
62
- leftColumn: {
63
- alignItems: "center",
64
- flexDirection: "row",
65
- justifyContent: "flex-start"
66
- },
67
- rightColumn: {
68
- alignItems: "center",
69
- flexDirection: "row",
70
- justifyContent: "flex-end",
71
- flexGrow: 1
72
- },
73
- subtitle: {
74
- color: semanticColor.text.secondary
75
- },
76
- titles: {
77
- padding: spacing.small_12,
78
- textAlign: "center",
79
- justifySelf: "center",
80
- maxWidth: "100%"
81
- },
82
- spacer: {
83
- minWidth: spacing.small_12
84
- }
85
- });
8
+ function Toolbar({color="light",leftContent,rightContent,size="medium",subtitle,title}){const TitleComponent=subtitle?LabelLarge:HeadingSmall;return jsxs(View,{style:[sharedStyles.container,!title?sharedStyles.containerWithNoTitle:typeof title==="string"?sharedStyles.containerWithTextTitle:sharedStyles.containerWithNodeTitle,color==="dark"&&sharedStyles.dark,size==="small"&&sharedStyles.small],children:[jsx(View,{style:sharedStyles.leftColumn,children:leftContent}),title&&typeof title==="string"&&jsxs(View,{style:sharedStyles.titles,children:[jsx(TitleComponent,{id:"wb-toolbar-title",children:title}),subtitle&&jsx(LabelSmall,{style:color==="light"&&sharedStyles.subtitle,children:subtitle})]}),title&&typeof title!=="string"&&jsx(View,{style:sharedStyles.titles,children:title}),!title&&jsx(View,{style:leftContent?sharedStyles.spacer:undefined}),jsx(View,{style:sharedStyles.rightColumn,children:rightContent})]})}const sharedStyles=StyleSheet.create({container:{background:semanticColor.surface.primary,border:`1px solid ${semanticColor.border.primary}`,flex:1,display:"grid",alignItems:"center",minHeight:66,paddingInline:spacing.medium_16,width:"100%"},containerWithTextTitle:{gridTemplateColumns:"1fr minmax(auto, 67%) 1fr"},containerWithNodeTitle:{gridTemplateColumns:"minmax(max-content, 1fr) auto minmax(max-content, 1fr)"},containerWithNoTitle:{gridTemplateColumns:"auto auto 1fr"},small:{minHeight:50},dark:{background:semanticColor.surface.inverse,boxShadow:`0 1px 0 0 ${color.white64}`,color:semanticColor.text.inverse},leftColumn:{alignItems:"center",flexDirection:"row",justifyContent:"flex-start"},rightColumn:{alignItems:"center",flexDirection:"row",justifyContent:"flex-end",flexGrow:1},subtitle:{color:semanticColor.text.secondary},titles:{padding:spacing.small_12,textAlign:"center",justifySelf:"center",maxWidth:"100%"},spacer:{minWidth:spacing.small_12}});
86
9
 
87
10
  export { Toolbar as default };
package/dist/index.js CHANGED
@@ -1,109 +1,12 @@
1
1
  'use strict';
2
2
 
3
- var React = require('react');
3
+ var jsxRuntime = require('react/jsx-runtime');
4
+ require('react');
4
5
  var aphrodite = require('aphrodite');
5
6
  var wonderBlocksCore = require('@khanacademy/wonder-blocks-core');
6
7
  var wonderBlocksTokens = require('@khanacademy/wonder-blocks-tokens');
7
8
  var wonderBlocksTypography = require('@khanacademy/wonder-blocks-typography');
8
9
 
9
- function _interopNamespace(e) {
10
- if (e && e.__esModule) return e;
11
- var n = Object.create(null);
12
- if (e) {
13
- Object.keys(e).forEach(function (k) {
14
- if (k !== 'default') {
15
- var d = Object.getOwnPropertyDescriptor(e, k);
16
- Object.defineProperty(n, k, d.get ? d : {
17
- enumerable: true,
18
- get: function () { return e[k]; }
19
- });
20
- }
21
- });
22
- }
23
- n["default"] = e;
24
- return Object.freeze(n);
25
- }
26
-
27
- var React__namespace = /*#__PURE__*/_interopNamespace(React);
28
-
29
- function Toolbar({
30
- color = "light",
31
- leftContent,
32
- rightContent,
33
- size = "medium",
34
- subtitle,
35
- title
36
- }) {
37
- const TitleComponent = subtitle ? wonderBlocksTypography.LabelLarge : wonderBlocksTypography.HeadingSmall;
38
- return React__namespace.createElement(wonderBlocksCore.View, {
39
- style: [sharedStyles.container, !title ? sharedStyles.containerWithNoTitle : typeof title === "string" ? sharedStyles.containerWithTextTitle : sharedStyles.containerWithNodeTitle, color === "dark" && sharedStyles.dark, size === "small" && sharedStyles.small]
40
- }, React__namespace.createElement(wonderBlocksCore.View, {
41
- style: sharedStyles.leftColumn
42
- }, leftContent), title && typeof title === "string" && React__namespace.createElement(wonderBlocksCore.View, {
43
- style: sharedStyles.titles
44
- }, React__namespace.createElement(TitleComponent, {
45
- id: "wb-toolbar-title"
46
- }, title), subtitle && React__namespace.createElement(wonderBlocksTypography.LabelSmall, {
47
- style: color === "light" && sharedStyles.subtitle
48
- }, subtitle)), title && typeof title !== "string" && React__namespace.createElement(wonderBlocksCore.View, {
49
- style: sharedStyles.titles
50
- }, title), !title && React__namespace.createElement(wonderBlocksCore.View, {
51
- style: leftContent ? sharedStyles.spacer : undefined
52
- }), React__namespace.createElement(wonderBlocksCore.View, {
53
- style: sharedStyles.rightColumn
54
- }, rightContent));
55
- }
56
- const sharedStyles = aphrodite.StyleSheet.create({
57
- container: {
58
- background: wonderBlocksTokens.semanticColor.surface.primary,
59
- border: `1px solid ${wonderBlocksTokens.semanticColor.border.primary}`,
60
- flex: 1,
61
- display: "grid",
62
- alignItems: "center",
63
- minHeight: 66,
64
- paddingInline: wonderBlocksTokens.spacing.medium_16,
65
- width: "100%"
66
- },
67
- containerWithTextTitle: {
68
- gridTemplateColumns: "1fr minmax(auto, 67%) 1fr"
69
- },
70
- containerWithNodeTitle: {
71
- gridTemplateColumns: "minmax(max-content, 1fr) auto minmax(max-content, 1fr)"
72
- },
73
- containerWithNoTitle: {
74
- gridTemplateColumns: "auto auto 1fr"
75
- },
76
- small: {
77
- minHeight: 50
78
- },
79
- dark: {
80
- background: wonderBlocksTokens.semanticColor.surface.inverse,
81
- boxShadow: `0 1px 0 0 ${wonderBlocksTokens.color.white64}`,
82
- color: wonderBlocksTokens.semanticColor.text.inverse
83
- },
84
- leftColumn: {
85
- alignItems: "center",
86
- flexDirection: "row",
87
- justifyContent: "flex-start"
88
- },
89
- rightColumn: {
90
- alignItems: "center",
91
- flexDirection: "row",
92
- justifyContent: "flex-end",
93
- flexGrow: 1
94
- },
95
- subtitle: {
96
- color: wonderBlocksTokens.semanticColor.text.secondary
97
- },
98
- titles: {
99
- padding: wonderBlocksTokens.spacing.small_12,
100
- textAlign: "center",
101
- justifySelf: "center",
102
- maxWidth: "100%"
103
- },
104
- spacer: {
105
- minWidth: wonderBlocksTokens.spacing.small_12
106
- }
107
- });
10
+ function Toolbar({color="light",leftContent,rightContent,size="medium",subtitle,title}){const TitleComponent=subtitle?wonderBlocksTypography.LabelLarge:wonderBlocksTypography.HeadingSmall;return jsxRuntime.jsxs(wonderBlocksCore.View,{style:[sharedStyles.container,!title?sharedStyles.containerWithNoTitle:typeof title==="string"?sharedStyles.containerWithTextTitle:sharedStyles.containerWithNodeTitle,color==="dark"&&sharedStyles.dark,size==="small"&&sharedStyles.small],children:[jsxRuntime.jsx(wonderBlocksCore.View,{style:sharedStyles.leftColumn,children:leftContent}),title&&typeof title==="string"&&jsxRuntime.jsxs(wonderBlocksCore.View,{style:sharedStyles.titles,children:[jsxRuntime.jsx(TitleComponent,{id:"wb-toolbar-title",children:title}),subtitle&&jsxRuntime.jsx(wonderBlocksTypography.LabelSmall,{style:color==="light"&&sharedStyles.subtitle,children:subtitle})]}),title&&typeof title!=="string"&&jsxRuntime.jsx(wonderBlocksCore.View,{style:sharedStyles.titles,children:title}),!title&&jsxRuntime.jsx(wonderBlocksCore.View,{style:leftContent?sharedStyles.spacer:undefined}),jsxRuntime.jsx(wonderBlocksCore.View,{style:sharedStyles.rightColumn,children:rightContent})]})}const sharedStyles=aphrodite.StyleSheet.create({container:{background:wonderBlocksTokens.semanticColor.surface.primary,border:`1px solid ${wonderBlocksTokens.semanticColor.border.primary}`,flex:1,display:"grid",alignItems:"center",minHeight:66,paddingInline:wonderBlocksTokens.spacing.medium_16,width:"100%"},containerWithTextTitle:{gridTemplateColumns:"1fr minmax(auto, 67%) 1fr"},containerWithNodeTitle:{gridTemplateColumns:"minmax(max-content, 1fr) auto minmax(max-content, 1fr)"},containerWithNoTitle:{gridTemplateColumns:"auto auto 1fr"},small:{minHeight:50},dark:{background:wonderBlocksTokens.semanticColor.surface.inverse,boxShadow:`0 1px 0 0 ${wonderBlocksTokens.color.white64}`,color:wonderBlocksTokens.semanticColor.text.inverse},leftColumn:{alignItems:"center",flexDirection:"row",justifyContent:"flex-start"},rightColumn:{alignItems:"center",flexDirection:"row",justifyContent:"flex-end",flexGrow:1},subtitle:{color:wonderBlocksTokens.semanticColor.text.secondary},titles:{padding:wonderBlocksTokens.spacing.small_12,textAlign:"center",justifySelf:"center",maxWidth:"100%"},spacer:{minWidth:wonderBlocksTokens.spacing.small_12}});
108
11
 
109
12
  module.exports = Toolbar;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@khanacademy/wonder-blocks-toolbar",
3
- "version": "5.1.9",
3
+ "version": "5.1.11",
4
4
  "design": "v1",
5
5
  "publishConfig": {
6
6
  "access": "public"
@@ -12,17 +12,16 @@
12
12
  "author": "",
13
13
  "license": "MIT",
14
14
  "dependencies": {
15
- "@babel/runtime": "^7.24.5",
16
- "@khanacademy/wonder-blocks-core": "12.2.1",
17
- "@khanacademy/wonder-blocks-tokens": "9.0.0",
18
- "@khanacademy/wonder-blocks-typography": "3.1.3"
15
+ "@khanacademy/wonder-blocks-tokens": "10.0.0",
16
+ "@khanacademy/wonder-blocks-typography": "3.2.1",
17
+ "@khanacademy/wonder-blocks-core": "12.3.0"
19
18
  },
20
19
  "peerDependencies": {
21
20
  "aphrodite": "^1.2.5",
22
21
  "react": "18.2.0"
23
22
  },
24
23
  "devDependencies": {
25
- "@khanacademy/wb-dev-build-settings": "2.1.1"
24
+ "@khanacademy/wb-dev-build-settings": "3.0.0"
26
25
  },
27
26
  "scripts": {
28
27
  "test": "echo \"Error: no test specified\" && exit 1"