@instructure/ui-billboard 8.17.1-snapshot.82 → 8.18.1-snapshot.1
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 +4 -0
- package/es/Billboard/index.js +27 -23
- package/es/Billboard/theme.js +21 -21
- package/lib/Billboard/index.js +27 -23
- package/lib/Billboard/theme.js +21 -21
- package/package.json +13 -13
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,10 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
# [8.18.0](https://github.com/instructure/instructure-ui/compare/v8.17.0...v8.18.0) (2022-02-23)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @instructure/ui-billboard
|
|
9
|
+
|
|
6
10
|
# [8.17.0](https://github.com/instructure/instructure-ui/compare/v8.16.0...v8.17.0) (2022-02-07)
|
|
7
11
|
|
|
8
12
|
### Bug Fixes
|
package/es/Billboard/index.js
CHANGED
|
@@ -69,21 +69,25 @@ let Billboard = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_
|
|
|
69
69
|
}
|
|
70
70
|
|
|
71
71
|
componentDidMount() {
|
|
72
|
-
|
|
72
|
+
var _this$props$makeStyle, _this$props2;
|
|
73
|
+
|
|
74
|
+
(_this$props$makeStyle = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props2);
|
|
73
75
|
}
|
|
74
76
|
|
|
75
77
|
componentDidUpdate() {
|
|
76
|
-
|
|
78
|
+
var _this$props$makeStyle2, _this$props3;
|
|
79
|
+
|
|
80
|
+
(_this$props$makeStyle2 = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props3);
|
|
77
81
|
}
|
|
78
82
|
|
|
79
83
|
renderHeading() {
|
|
80
|
-
const _this$
|
|
81
|
-
headingLevel = _this$
|
|
82
|
-
headingAs = _this$
|
|
83
|
-
heading = _this$
|
|
84
|
-
styles = _this$
|
|
84
|
+
const _this$props4 = this.props,
|
|
85
|
+
headingLevel = _this$props4.headingLevel,
|
|
86
|
+
headingAs = _this$props4.headingAs,
|
|
87
|
+
heading = _this$props4.heading,
|
|
88
|
+
styles = _this$props4.styles;
|
|
85
89
|
return jsx("span", {
|
|
86
|
-
css: styles
|
|
90
|
+
css: styles === null || styles === void 0 ? void 0 : styles.heading
|
|
87
91
|
}, jsx(Heading, {
|
|
88
92
|
level: headingLevel,
|
|
89
93
|
as: headingAs,
|
|
@@ -112,27 +116,27 @@ let Billboard = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_
|
|
|
112
116
|
}
|
|
113
117
|
|
|
114
118
|
renderContent() {
|
|
115
|
-
const _this$
|
|
116
|
-
heading = _this$
|
|
117
|
-
message = _this$
|
|
118
|
-
hero = _this$
|
|
119
|
-
styles = _this$
|
|
119
|
+
const _this$props5 = this.props,
|
|
120
|
+
heading = _this$props5.heading,
|
|
121
|
+
message = _this$props5.message,
|
|
122
|
+
hero = _this$props5.hero,
|
|
123
|
+
styles = _this$props5.styles;
|
|
120
124
|
return jsx("span", {
|
|
121
|
-
css: styles
|
|
125
|
+
css: styles === null || styles === void 0 ? void 0 : styles.content
|
|
122
126
|
}, hero && jsx("span", {
|
|
123
|
-
css: styles
|
|
127
|
+
css: styles === null || styles === void 0 ? void 0 : styles.hero
|
|
124
128
|
}, this.renderHero()), heading && this.renderHeading(), message && jsx("span", {
|
|
125
|
-
css: styles
|
|
129
|
+
css: styles === null || styles === void 0 ? void 0 : styles.message
|
|
126
130
|
}, callRenderProp(message)));
|
|
127
131
|
}
|
|
128
132
|
|
|
129
133
|
render() {
|
|
130
|
-
const _this$
|
|
131
|
-
href = _this$
|
|
132
|
-
disabled = _this$
|
|
133
|
-
readOnly = _this$
|
|
134
|
-
margin = _this$
|
|
135
|
-
styles = _this$
|
|
134
|
+
const _this$props6 = this.props,
|
|
135
|
+
href = _this$props6.href,
|
|
136
|
+
disabled = _this$props6.disabled,
|
|
137
|
+
readOnly = _this$props6.readOnly,
|
|
138
|
+
margin = _this$props6.margin,
|
|
139
|
+
styles = _this$props6.styles;
|
|
136
140
|
const Element = getElementType(Billboard, this.props);
|
|
137
141
|
return jsx(View, {
|
|
138
142
|
as: "div",
|
|
@@ -141,7 +145,7 @@ let Billboard = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_
|
|
|
141
145
|
type: Element === 'button' ? 'button' : void 0,
|
|
142
146
|
as: Element,
|
|
143
147
|
elementRef: this.handleRef,
|
|
144
|
-
css: styles
|
|
148
|
+
css: styles === null || styles === void 0 ? void 0 : styles.billboard,
|
|
145
149
|
href: href,
|
|
146
150
|
onClick: this.handleClick,
|
|
147
151
|
disabled: disabled,
|
package/es/Billboard/theme.js
CHANGED
|
@@ -43,27 +43,27 @@ const generateComponentTheme = theme => {
|
|
|
43
43
|
}
|
|
44
44
|
};
|
|
45
45
|
const componentVariables = {
|
|
46
|
-
fontFamily: typography
|
|
47
|
-
paddingSmall: spacing
|
|
48
|
-
paddingMedium: spacing
|
|
49
|
-
paddingLarge: spacing
|
|
50
|
-
iconColor: colors
|
|
51
|
-
mediumMargin: spacing
|
|
52
|
-
largeMargin: spacing
|
|
53
|
-
iconHoverColor: colors
|
|
54
|
-
backgroundColor: colors
|
|
55
|
-
iconHoverColorInverse: colors
|
|
56
|
-
buttonBorderWidth: borders
|
|
57
|
-
buttonBorderRadius: borders
|
|
58
|
-
messageColor: colors
|
|
59
|
-
messageColorClickable: colors
|
|
60
|
-
messageColorInverse: colors
|
|
61
|
-
messageFontSizeSmall: typography
|
|
62
|
-
messageFontSizeMedium: typography
|
|
63
|
-
messageFontSizeLarge: typography
|
|
64
|
-
clickableActiveBg: colors
|
|
65
|
-
clickableActiveText: colors
|
|
66
|
-
buttonBorderStyle: borders
|
|
46
|
+
fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
|
|
47
|
+
paddingSmall: spacing === null || spacing === void 0 ? void 0 : spacing.small,
|
|
48
|
+
paddingMedium: spacing === null || spacing === void 0 ? void 0 : spacing.medium,
|
|
49
|
+
paddingLarge: spacing === null || spacing === void 0 ? void 0 : spacing.medium,
|
|
50
|
+
iconColor: colors === null || colors === void 0 ? void 0 : colors.textDark,
|
|
51
|
+
mediumMargin: spacing === null || spacing === void 0 ? void 0 : spacing.small,
|
|
52
|
+
largeMargin: spacing === null || spacing === void 0 ? void 0 : spacing.medium,
|
|
53
|
+
iconHoverColor: colors === null || colors === void 0 ? void 0 : colors.textLink,
|
|
54
|
+
backgroundColor: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
|
|
55
|
+
iconHoverColorInverse: colors === null || colors === void 0 ? void 0 : colors.textLightest,
|
|
56
|
+
buttonBorderWidth: borders === null || borders === void 0 ? void 0 : borders.widthMedium,
|
|
57
|
+
buttonBorderRadius: borders === null || borders === void 0 ? void 0 : borders.radiusLarge,
|
|
58
|
+
messageColor: colors === null || colors === void 0 ? void 0 : colors.textDark,
|
|
59
|
+
messageColorClickable: colors === null || colors === void 0 ? void 0 : colors.textLink,
|
|
60
|
+
messageColorInverse: colors === null || colors === void 0 ? void 0 : colors.textLight,
|
|
61
|
+
messageFontSizeSmall: typography === null || typography === void 0 ? void 0 : typography.fontSizeSmall,
|
|
62
|
+
messageFontSizeMedium: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
|
|
63
|
+
messageFontSizeLarge: typography === null || typography === void 0 ? void 0 : typography.fontSizeLarge,
|
|
64
|
+
clickableActiveBg: colors === null || colors === void 0 ? void 0 : colors.backgroundBrand,
|
|
65
|
+
clickableActiveText: colors === null || colors === void 0 ? void 0 : colors.textLightest,
|
|
66
|
+
buttonBorderStyle: borders === null || borders === void 0 ? void 0 : borders.style,
|
|
67
67
|
buttonHoverBorderStyle: 'dashed'
|
|
68
68
|
};
|
|
69
69
|
return { ...componentVariables,
|
package/lib/Billboard/index.js
CHANGED
|
@@ -64,21 +64,25 @@ let Billboard = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default)
|
|
|
64
64
|
}
|
|
65
65
|
|
|
66
66
|
componentDidMount() {
|
|
67
|
-
|
|
67
|
+
var _this$props$makeStyle, _this$props2;
|
|
68
|
+
|
|
69
|
+
(_this$props$makeStyle = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props2);
|
|
68
70
|
}
|
|
69
71
|
|
|
70
72
|
componentDidUpdate() {
|
|
71
|
-
|
|
73
|
+
var _this$props$makeStyle2, _this$props3;
|
|
74
|
+
|
|
75
|
+
(_this$props$makeStyle2 = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props3);
|
|
72
76
|
}
|
|
73
77
|
|
|
74
78
|
renderHeading() {
|
|
75
|
-
const _this$
|
|
76
|
-
headingLevel = _this$
|
|
77
|
-
headingAs = _this$
|
|
78
|
-
heading = _this$
|
|
79
|
-
styles = _this$
|
|
79
|
+
const _this$props4 = this.props,
|
|
80
|
+
headingLevel = _this$props4.headingLevel,
|
|
81
|
+
headingAs = _this$props4.headingAs,
|
|
82
|
+
heading = _this$props4.heading,
|
|
83
|
+
styles = _this$props4.styles;
|
|
80
84
|
return (0, _emotion.jsx)("span", {
|
|
81
|
-
css: styles
|
|
85
|
+
css: styles === null || styles === void 0 ? void 0 : styles.heading
|
|
82
86
|
}, (0, _emotion.jsx)(_Heading.Heading, {
|
|
83
87
|
level: headingLevel,
|
|
84
88
|
as: headingAs,
|
|
@@ -107,27 +111,27 @@ let Billboard = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default)
|
|
|
107
111
|
}
|
|
108
112
|
|
|
109
113
|
renderContent() {
|
|
110
|
-
const _this$
|
|
111
|
-
heading = _this$
|
|
112
|
-
message = _this$
|
|
113
|
-
hero = _this$
|
|
114
|
-
styles = _this$
|
|
114
|
+
const _this$props5 = this.props,
|
|
115
|
+
heading = _this$props5.heading,
|
|
116
|
+
message = _this$props5.message,
|
|
117
|
+
hero = _this$props5.hero,
|
|
118
|
+
styles = _this$props5.styles;
|
|
115
119
|
return (0, _emotion.jsx)("span", {
|
|
116
|
-
css: styles
|
|
120
|
+
css: styles === null || styles === void 0 ? void 0 : styles.content
|
|
117
121
|
}, hero && (0, _emotion.jsx)("span", {
|
|
118
|
-
css: styles
|
|
122
|
+
css: styles === null || styles === void 0 ? void 0 : styles.hero
|
|
119
123
|
}, this.renderHero()), heading && this.renderHeading(), message && (0, _emotion.jsx)("span", {
|
|
120
|
-
css: styles
|
|
124
|
+
css: styles === null || styles === void 0 ? void 0 : styles.message
|
|
121
125
|
}, (0, _callRenderProp.callRenderProp)(message)));
|
|
122
126
|
}
|
|
123
127
|
|
|
124
128
|
render() {
|
|
125
|
-
const _this$
|
|
126
|
-
href = _this$
|
|
127
|
-
disabled = _this$
|
|
128
|
-
readOnly = _this$
|
|
129
|
-
margin = _this$
|
|
130
|
-
styles = _this$
|
|
129
|
+
const _this$props6 = this.props,
|
|
130
|
+
href = _this$props6.href,
|
|
131
|
+
disabled = _this$props6.disabled,
|
|
132
|
+
readOnly = _this$props6.readOnly,
|
|
133
|
+
margin = _this$props6.margin,
|
|
134
|
+
styles = _this$props6.styles;
|
|
131
135
|
const Element = (0, _getElementType.getElementType)(Billboard, this.props);
|
|
132
136
|
return (0, _emotion.jsx)(_View.View, {
|
|
133
137
|
as: "div",
|
|
@@ -136,7 +140,7 @@ let Billboard = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default)
|
|
|
136
140
|
type: Element === 'button' ? 'button' : void 0,
|
|
137
141
|
as: Element,
|
|
138
142
|
elementRef: this.handleRef,
|
|
139
|
-
css: styles
|
|
143
|
+
css: styles === null || styles === void 0 ? void 0 : styles.billboard,
|
|
140
144
|
href: href,
|
|
141
145
|
onClick: this.handleClick,
|
|
142
146
|
disabled: disabled,
|
package/lib/Billboard/theme.js
CHANGED
|
@@ -50,27 +50,27 @@ const generateComponentTheme = theme => {
|
|
|
50
50
|
}
|
|
51
51
|
};
|
|
52
52
|
const componentVariables = {
|
|
53
|
-
fontFamily: typography
|
|
54
|
-
paddingSmall: spacing
|
|
55
|
-
paddingMedium: spacing
|
|
56
|
-
paddingLarge: spacing
|
|
57
|
-
iconColor: colors
|
|
58
|
-
mediumMargin: spacing
|
|
59
|
-
largeMargin: spacing
|
|
60
|
-
iconHoverColor: colors
|
|
61
|
-
backgroundColor: colors
|
|
62
|
-
iconHoverColorInverse: colors
|
|
63
|
-
buttonBorderWidth: borders
|
|
64
|
-
buttonBorderRadius: borders
|
|
65
|
-
messageColor: colors
|
|
66
|
-
messageColorClickable: colors
|
|
67
|
-
messageColorInverse: colors
|
|
68
|
-
messageFontSizeSmall: typography
|
|
69
|
-
messageFontSizeMedium: typography
|
|
70
|
-
messageFontSizeLarge: typography
|
|
71
|
-
clickableActiveBg: colors
|
|
72
|
-
clickableActiveText: colors
|
|
73
|
-
buttonBorderStyle: borders
|
|
53
|
+
fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
|
|
54
|
+
paddingSmall: spacing === null || spacing === void 0 ? void 0 : spacing.small,
|
|
55
|
+
paddingMedium: spacing === null || spacing === void 0 ? void 0 : spacing.medium,
|
|
56
|
+
paddingLarge: spacing === null || spacing === void 0 ? void 0 : spacing.medium,
|
|
57
|
+
iconColor: colors === null || colors === void 0 ? void 0 : colors.textDark,
|
|
58
|
+
mediumMargin: spacing === null || spacing === void 0 ? void 0 : spacing.small,
|
|
59
|
+
largeMargin: spacing === null || spacing === void 0 ? void 0 : spacing.medium,
|
|
60
|
+
iconHoverColor: colors === null || colors === void 0 ? void 0 : colors.textLink,
|
|
61
|
+
backgroundColor: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
|
|
62
|
+
iconHoverColorInverse: colors === null || colors === void 0 ? void 0 : colors.textLightest,
|
|
63
|
+
buttonBorderWidth: borders === null || borders === void 0 ? void 0 : borders.widthMedium,
|
|
64
|
+
buttonBorderRadius: borders === null || borders === void 0 ? void 0 : borders.radiusLarge,
|
|
65
|
+
messageColor: colors === null || colors === void 0 ? void 0 : colors.textDark,
|
|
66
|
+
messageColorClickable: colors === null || colors === void 0 ? void 0 : colors.textLink,
|
|
67
|
+
messageColorInverse: colors === null || colors === void 0 ? void 0 : colors.textLight,
|
|
68
|
+
messageFontSizeSmall: typography === null || typography === void 0 ? void 0 : typography.fontSizeSmall,
|
|
69
|
+
messageFontSizeMedium: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
|
|
70
|
+
messageFontSizeLarge: typography === null || typography === void 0 ? void 0 : typography.fontSizeLarge,
|
|
71
|
+
clickableActiveBg: colors === null || colors === void 0 ? void 0 : colors.backgroundBrand,
|
|
72
|
+
clickableActiveText: colors === null || colors === void 0 ? void 0 : colors.textLightest,
|
|
73
|
+
buttonBorderStyle: borders === null || borders === void 0 ? void 0 : borders.style,
|
|
74
74
|
buttonHoverBorderStyle: 'dashed'
|
|
75
75
|
};
|
|
76
76
|
return { ...componentVariables,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@instructure/ui-billboard",
|
|
3
|
-
"version": "8.
|
|
3
|
+
"version": "8.18.1-snapshot.1+669aa5892",
|
|
4
4
|
"description": "A UI component to display empty states, 404 pages, redirects, etc.",
|
|
5
5
|
"author": "Instructure, Inc. Engineering and Product Design",
|
|
6
6
|
"module": "./es/index.js",
|
|
@@ -23,20 +23,20 @@
|
|
|
23
23
|
},
|
|
24
24
|
"license": "MIT",
|
|
25
25
|
"devDependencies": {
|
|
26
|
-
"@instructure/ui-babel-preset": "8.
|
|
27
|
-
"@instructure/ui-color-utils": "8.
|
|
28
|
-
"@instructure/ui-icons": "8.
|
|
29
|
-
"@instructure/ui-test-utils": "8.
|
|
30
|
-
"@instructure/ui-themes": "8.
|
|
26
|
+
"@instructure/ui-babel-preset": "8.18.1-snapshot.1+669aa5892",
|
|
27
|
+
"@instructure/ui-color-utils": "8.18.1-snapshot.1+669aa5892",
|
|
28
|
+
"@instructure/ui-icons": "8.18.1-snapshot.1+669aa5892",
|
|
29
|
+
"@instructure/ui-test-utils": "8.18.1-snapshot.1+669aa5892",
|
|
30
|
+
"@instructure/ui-themes": "8.18.1-snapshot.1+669aa5892"
|
|
31
31
|
},
|
|
32
32
|
"dependencies": {
|
|
33
33
|
"@babel/runtime": "^7.13.10",
|
|
34
|
-
"@instructure/emotion": "8.
|
|
35
|
-
"@instructure/shared-types": "8.
|
|
36
|
-
"@instructure/ui-heading": "8.
|
|
37
|
-
"@instructure/ui-img": "8.
|
|
38
|
-
"@instructure/ui-react-utils": "8.
|
|
39
|
-
"@instructure/ui-view": "8.
|
|
34
|
+
"@instructure/emotion": "8.18.1-snapshot.1+669aa5892",
|
|
35
|
+
"@instructure/shared-types": "8.18.1-snapshot.1+669aa5892",
|
|
36
|
+
"@instructure/ui-heading": "8.18.1-snapshot.1+669aa5892",
|
|
37
|
+
"@instructure/ui-img": "8.18.1-snapshot.1+669aa5892",
|
|
38
|
+
"@instructure/ui-react-utils": "8.18.1-snapshot.1+669aa5892",
|
|
39
|
+
"@instructure/ui-view": "8.18.1-snapshot.1+669aa5892",
|
|
40
40
|
"prop-types": "^15"
|
|
41
41
|
},
|
|
42
42
|
"peerDependencies": {
|
|
@@ -46,5 +46,5 @@
|
|
|
46
46
|
"access": "public"
|
|
47
47
|
},
|
|
48
48
|
"sideEffects": false,
|
|
49
|
-
"gitHead": "
|
|
49
|
+
"gitHead": "669aa58926b123028bcb9e39427d36910b78b0d1"
|
|
50
50
|
}
|