@instructure/ui-billboard 8.17.1-snapshot.21 → 8.17.1-snapshot.71

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 (6) hide show
  1. package/es/Billboard/index.js +23 -27
  2. package/es/Billboard/theme.js +21 -21
  3. package/lib/Billboard/index.js +23 -27
  4. package/lib/Billboard/theme.js +21 -21
  5. package/package.json +13 -13
  6. package/tsconfig.build.tsbuildinfo +1 -1
package/es/Billboard/index.js CHANGED
@@ -69,25 +69,21 @@ let Billboard = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_
69
69
  }
70
70
 
71
71
  componentDidMount() {
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);
72
+ this.props.makeStyles?.();
75
73
  }
76
74
 
77
75
  componentDidUpdate() {
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);
76
+ this.props.makeStyles?.();
81
77
  }
82
78
 
83
79
  renderHeading() {
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;
80
+ const _this$props2 = this.props,
81
+ headingLevel = _this$props2.headingLevel,
82
+ headingAs = _this$props2.headingAs,
83
+ heading = _this$props2.heading,
84
+ styles = _this$props2.styles;
89
85
  return jsx("span", {
90
- css: styles === null || styles === void 0 ? void 0 : styles.heading
86
+ css: styles?.heading
91
87
  }, jsx(Heading, {
92
88
  level: headingLevel,
93
89
  as: headingAs,
@@ -116,27 +112,27 @@ let Billboard = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_
116
112
  }
117
113
 
118
114
  renderContent() {
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;
115
+ const _this$props3 = this.props,
116
+ heading = _this$props3.heading,
117
+ message = _this$props3.message,
118
+ hero = _this$props3.hero,
119
+ styles = _this$props3.styles;
124
120
  return jsx("span", {
125
- css: styles === null || styles === void 0 ? void 0 : styles.content
121
+ css: styles?.content
126
122
  }, hero && jsx("span", {
127
- css: styles === null || styles === void 0 ? void 0 : styles.hero
123
+ css: styles?.hero
128
124
  }, this.renderHero()), heading && this.renderHeading(), message && jsx("span", {
129
- css: styles === null || styles === void 0 ? void 0 : styles.message
125
+ css: styles?.message
130
126
  }, callRenderProp(message)));
131
127
  }
132
128
 
133
129
  render() {
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;
130
+ const _this$props4 = this.props,
131
+ href = _this$props4.href,
132
+ disabled = _this$props4.disabled,
133
+ readOnly = _this$props4.readOnly,
134
+ margin = _this$props4.margin,
135
+ styles = _this$props4.styles;
140
136
  const Element = getElementType(Billboard, this.props);
141
137
  return jsx(View, {
142
138
  as: "div",
@@ -145,7 +141,7 @@ let Billboard = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_
145
141
  type: Element === 'button' ? 'button' : void 0,
146
142
  as: Element,
147
143
  elementRef: this.handleRef,
148
- css: styles === null || styles === void 0 ? void 0 : styles.billboard,
144
+ css: styles?.billboard,
149
145
  href: href,
150
146
  onClick: this.handleClick,
151
147
  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 === 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,
46
+ fontFamily: typography?.fontFamily,
47
+ paddingSmall: spacing?.small,
48
+ paddingMedium: spacing?.medium,
49
+ paddingLarge: spacing?.medium,
50
+ iconColor: colors?.textDark,
51
+ mediumMargin: spacing?.small,
52
+ largeMargin: spacing?.medium,
53
+ iconHoverColor: colors?.textLink,
54
+ backgroundColor: colors?.backgroundLightest,
55
+ iconHoverColorInverse: colors?.textLightest,
56
+ buttonBorderWidth: borders?.widthMedium,
57
+ buttonBorderRadius: borders?.radiusLarge,
58
+ messageColor: colors?.textDark,
59
+ messageColorClickable: colors?.textLink,
60
+ messageColorInverse: colors?.textLight,
61
+ messageFontSizeSmall: typography?.fontSizeSmall,
62
+ messageFontSizeMedium: typography?.fontSizeMedium,
63
+ messageFontSizeLarge: typography?.fontSizeLarge,
64
+ clickableActiveBg: colors?.backgroundBrand,
65
+ clickableActiveText: colors?.textLightest,
66
+ buttonBorderStyle: borders?.style,
67
67
  buttonHoverBorderStyle: 'dashed'
68
68
  };
69
69
  return { ...componentVariables,
package/lib/Billboard/index.js CHANGED
@@ -64,25 +64,21 @@ let Billboard = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default)
64
64
  }
65
65
 
66
66
  componentDidMount() {
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);
67
+ this.props.makeStyles?.();
70
68
  }
71
69
 
72
70
  componentDidUpdate() {
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);
71
+ this.props.makeStyles?.();
76
72
  }
77
73
 
78
74
  renderHeading() {
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;
75
+ const _this$props2 = this.props,
76
+ headingLevel = _this$props2.headingLevel,
77
+ headingAs = _this$props2.headingAs,
78
+ heading = _this$props2.heading,
79
+ styles = _this$props2.styles;
84
80
  return (0, _emotion.jsx)("span", {
85
- css: styles === null || styles === void 0 ? void 0 : styles.heading
81
+ css: styles?.heading
86
82
  }, (0, _emotion.jsx)(_Heading.Heading, {
87
83
  level: headingLevel,
88
84
  as: headingAs,
@@ -111,27 +107,27 @@ let Billboard = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default)
111
107
  }
112
108
 
113
109
  renderContent() {
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;
110
+ const _this$props3 = this.props,
111
+ heading = _this$props3.heading,
112
+ message = _this$props3.message,
113
+ hero = _this$props3.hero,
114
+ styles = _this$props3.styles;
119
115
  return (0, _emotion.jsx)("span", {
120
- css: styles === null || styles === void 0 ? void 0 : styles.content
116
+ css: styles?.content
121
117
  }, hero && (0, _emotion.jsx)("span", {
122
- css: styles === null || styles === void 0 ? void 0 : styles.hero
118
+ css: styles?.hero
123
119
  }, this.renderHero()), heading && this.renderHeading(), message && (0, _emotion.jsx)("span", {
124
- css: styles === null || styles === void 0 ? void 0 : styles.message
120
+ css: styles?.message
125
121
  }, (0, _callRenderProp.callRenderProp)(message)));
126
122
  }
127
123
 
128
124
  render() {
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;
125
+ const _this$props4 = this.props,
126
+ href = _this$props4.href,
127
+ disabled = _this$props4.disabled,
128
+ readOnly = _this$props4.readOnly,
129
+ margin = _this$props4.margin,
130
+ styles = _this$props4.styles;
135
131
  const Element = (0, _getElementType.getElementType)(Billboard, this.props);
136
132
  return (0, _emotion.jsx)(_View.View, {
137
133
  as: "div",
@@ -140,7 +136,7 @@ let Billboard = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default)
140
136
  type: Element === 'button' ? 'button' : void 0,
141
137
  as: Element,
142
138
  elementRef: this.handleRef,
143
- css: styles === null || styles === void 0 ? void 0 : styles.billboard,
139
+ css: styles?.billboard,
144
140
  href: href,
145
141
  onClick: this.handleClick,
146
142
  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 === 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,
53
+ fontFamily: typography?.fontFamily,
54
+ paddingSmall: spacing?.small,
55
+ paddingMedium: spacing?.medium,
56
+ paddingLarge: spacing?.medium,
57
+ iconColor: colors?.textDark,
58
+ mediumMargin: spacing?.small,
59
+ largeMargin: spacing?.medium,
60
+ iconHoverColor: colors?.textLink,
61
+ backgroundColor: colors?.backgroundLightest,
62
+ iconHoverColorInverse: colors?.textLightest,
63
+ buttonBorderWidth: borders?.widthMedium,
64
+ buttonBorderRadius: borders?.radiusLarge,
65
+ messageColor: colors?.textDark,
66
+ messageColorClickable: colors?.textLink,
67
+ messageColorInverse: colors?.textLight,
68
+ messageFontSizeSmall: typography?.fontSizeSmall,
69
+ messageFontSizeMedium: typography?.fontSizeMedium,
70
+ messageFontSizeLarge: typography?.fontSizeLarge,
71
+ clickableActiveBg: colors?.backgroundBrand,
72
+ clickableActiveText: colors?.textLightest,
73
+ buttonBorderStyle: 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.17.1-snapshot.21+79d490548",
3
+ "version": "8.17.1-snapshot.71+34dfb2442",
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.17.1-snapshot.21+79d490548",
27
- "@instructure/ui-color-utils": "8.17.1-snapshot.21+79d490548",
28
- "@instructure/ui-icons": "8.17.1-snapshot.21+79d490548",
29
- "@instructure/ui-test-utils": "8.17.1-snapshot.21+79d490548",
30
- "@instructure/ui-themes": "8.17.1-snapshot.21+79d490548"
26
+ "@instructure/ui-babel-preset": "8.17.1-snapshot.71+34dfb2442",
27
+ "@instructure/ui-color-utils": "8.17.1-snapshot.71+34dfb2442",
28
+ "@instructure/ui-icons": "8.17.1-snapshot.71+34dfb2442",
29
+ "@instructure/ui-test-utils": "8.17.1-snapshot.71+34dfb2442",
30
+ "@instructure/ui-themes": "8.17.1-snapshot.71+34dfb2442"
31
31
  },
32
32
  "dependencies": {
33
33
  "@babel/runtime": "^7.13.10",
34
- "@instructure/emotion": "8.17.1-snapshot.21+79d490548",
35
- "@instructure/shared-types": "8.17.1-snapshot.21+79d490548",
36
- "@instructure/ui-heading": "8.17.1-snapshot.21+79d490548",
37
- "@instructure/ui-img": "8.17.1-snapshot.21+79d490548",
38
- "@instructure/ui-react-utils": "8.17.1-snapshot.21+79d490548",
39
- "@instructure/ui-view": "8.17.1-snapshot.21+79d490548",
34
+ "@instructure/emotion": "8.17.1-snapshot.71+34dfb2442",
35
+ "@instructure/shared-types": "8.17.1-snapshot.71+34dfb2442",
36
+ "@instructure/ui-heading": "8.17.1-snapshot.71+34dfb2442",
37
+ "@instructure/ui-img": "8.17.1-snapshot.71+34dfb2442",
38
+ "@instructure/ui-react-utils": "8.17.1-snapshot.71+34dfb2442",
39
+ "@instructure/ui-view": "8.17.1-snapshot.71+34dfb2442",
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": "79d490548a0736feb2a7232bf5918857317b178b"
49
+ "gitHead": "34dfb2442c7ddce048d78ab1ecd5f3cbb78ee8d6"
50
50
  }