@redocly/theme 0.9.1 → 0.9.3

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 (15) hide show
  1. package/lib/Button/Button.js +1 -1
  2. package/lib/Catalog/Catalog.js +1 -1
  3. package/lib/Panel/PanelBody.js +2 -0
  4. package/lib/ReferenceDocs/DevOnboardingTryItSecurity.js +8 -2
  5. package/lib/Sidebar/FooterWrapper.js +5 -0
  6. package/lib/Sidebar/Sidebar.js +1 -0
  7. package/lib/globalStyle.js +8 -7
  8. package/package.json +1 -1
  9. package/src/Button/Button.tsx +1 -1
  10. package/src/Catalog/Catalog.tsx +1 -1
  11. package/src/Panel/PanelBody.ts +2 -0
  12. package/src/ReferenceDocs/DevOnboardingTryItSecurity.tsx +8 -3
  13. package/src/Sidebar/FooterWrapper.tsx +5 -0
  14. package/src/Sidebar/Sidebar.tsx +1 -0
  15. package/src/globalStyle.ts +8 -7
package/lib/Button/Button.js CHANGED
@@ -100,7 +100,7 @@ const StyledButton = styled_components_1.default.button.attrs(({ color = 'defaul
100
100
  }
101
101
 
102
102
  &:disabled {
103
- color: var(--button-disabled-background-color);
103
+ color: var(--button-disabled-color);
104
104
  background-color: transparent;
105
105
  }
106
106
  `
package/lib/Catalog/Catalog.js CHANGED
@@ -85,7 +85,7 @@ const CatalogPageContent = styled_components_1.default.main `
85
85
  `;
86
86
  const CatalogCards = styled_components_1.default.div `
87
87
  display: grid;
88
- grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
88
+ grid-template-columns: repeat(auto-fill, minmax(var(--api-catalog-card-min-width), 1fr));
89
89
  gap: 32px;
90
90
  `;
91
91
  const CatalogTitle = (0, styled_components_1.default)(H2_1.H2) `
package/lib/Panel/PanelBody.js CHANGED
@@ -42,6 +42,8 @@ exports.PanelBody = styled_components_1.default.div.attrs(() => ({
42
42
  ${({ animate }) => animate && showPanelAnimation};
43
43
  ${({ hidden }) => hidden && 'visibility: hidden'};
44
44
 
45
+ overflow: hidden;
46
+
45
47
  background-color: var(--panel-body-background-color);
46
48
 
47
49
  font-family: var(--panel-body-font-family-local);
package/lib/ReferenceDocs/DevOnboardingTryItSecurity.js CHANGED
@@ -53,6 +53,7 @@ function DevOnboardingTryItSecurity(props) {
53
53
  }
54
54
  else {
55
55
  setAppId('');
56
+ setSelectedAppSecret('');
56
57
  }
57
58
  // eslint-disable-next-line react-hooks/exhaustive-deps
58
59
  }, [props.value]);
@@ -67,8 +68,13 @@ function DevOnboardingTryItSecurity(props) {
67
68
  return res
68
69
  .json()
69
70
  .then((data) => {
71
+ var _a;
70
72
  if (res.ok) {
71
73
  setApps(data.apps);
74
+ if ((_a = data.apps[0]) === null || _a === void 0 ? void 0 : _a.id) {
75
+ setAppId(data.apps[0].id);
76
+ loadAppCredentials(data.apps[0].id);
77
+ }
72
78
  }
73
79
  else {
74
80
  setError(data.message);
@@ -112,7 +118,7 @@ function DevOnboardingTryItSecurity(props) {
112
118
  setAppId(value);
113
119
  loadAppCredentials(value);
114
120
  } }),
115
- React.createElement(UseKeyButton, { disabled: !selectedAppSecret || appLoading, color: "secondary", blinking: appLoading, onClick: () => selectedAppSecret && props.onChange(selectedAppSecret) }, "Use key"))));
121
+ React.createElement(UseKeyButton, { disabled: !selectedAppSecret || appLoading, color: "secondary", onClick: () => selectedAppSecret && props.onChange(selectedAppSecret) }, appLoading ? 'Loading...' : 'Use key'))));
116
122
  }
117
123
  exports.DevOnboardingTryItSecurity = DevOnboardingTryItSecurity;
118
124
  const TryItDropdown = (0, styled_components_1.default)(Dropdown_1.Dropdown) `
@@ -152,7 +158,7 @@ const FormLabel = styled_components_1.default.label `
152
158
  const UseKeyButton = (0, styled_components_1.default)(Button_1.Button) `
153
159
  width: 100px;
154
160
  align-self: flex-end;
155
- margin-top: 16px;
161
+ margin-top: 10px;
156
162
  margin-right: 0;
157
163
  `;
158
164
  //# sourceMappingURL=DevOnboardingTryItSecurity.js.map
package/lib/Sidebar/FooterWrapper.js CHANGED
@@ -10,6 +10,11 @@ exports.FooterWrapper = styled_components_1.default.div.attrs(() => ({
10
10
  })) `
11
11
  margin: var(--sidebar-offset-top) 0 var(--sidebar-spacing-unit) var(--sidebar-offset-left);
12
12
  padding-top: var(--sidebar-spacing-unit);
13
+ padding-right: var(--sidebar-spacing-unit);
13
14
  border-top: solid 1px #daddde;
15
+
16
+ button {
17
+ margin: 0;
18
+ }
14
19
  `;
15
20
  //# sourceMappingURL=FooterWrapper.js.map
package/lib/Sidebar/Sidebar.js CHANGED
@@ -23,6 +23,7 @@ exports.Sidebar = styled_components_1.default.aside.attrs(() => ({
23
23
  width: 100%;
24
24
  -webkit-font-smoothing: antialiased;
25
25
  top: var(--navbar-height);
26
+ height: calc(100vh - var(--navbar-height));
26
27
 
27
28
  ${({ opened, animate }) => `
28
29
  opacity: ${opened ? '1' : '0'};
package/lib/globalStyle.js CHANGED
@@ -1093,19 +1093,19 @@ const apiReferencePanels = (0, styled_components_1.css) `
1093
1093
 
1094
1094
  --panel-try-it-action-button-width: auto;
1095
1095
  --panel-try-it-action-button-font-family: var(--panel-font-family); // @presenter FontFamily
1096
- --panel-try-it-action-button-font-weight: var(--panel-font-weight); // @presenter FontWeight
1096
+ --panel-try-it-action-button-font-weight: var(--font-weight-bold); // @presenter FontWeight
1097
1097
  --panel-try-it-action-button-font-size: var(--panel-font-size); // @presenter FontSize
1098
1098
  --panel-try-it-action-button-text-color: var(--text-color-inverse); // @presenter Color
1099
1099
  --panel-try-it-action-button-background-color: var(--color-primary-500); // @presenter Color
1100
1100
  --panel-try-it-action-button-border-color: transparent; // @presenter Color
1101
1101
 
1102
- --panel-try-it-action-button-active-text-color: var(--color-emphasis-900); // @presenter Color
1103
- --panel-try-it-action-button-active-background-color: var(--color-emphasis-700); // @presenter Color
1104
- --panel-try-it-action-button-active-border-color: var(--color-emphasis-700); // @presenter Color
1102
+ --panel-try-it-action-button-active-text-color: var(--text-color-inverse); // @presenter Color
1103
+ --panel-try-it-action-button-active-background-color: var(--color-primary-700); // @presenter Color
1104
+ --panel-try-it-action-button-active-border-color: var(--color-primary-700); // @presenter Color
1105
1105
 
1106
- --panel-try-it-action-button-hover-background-color: var(--color-emphasis-600); // @presenter Color
1107
- --panel-try-it-action-button-hover-text-color: var(--color-emphasis-800); // @presenter Color
1108
- --panel-try-it-action-button-hover-border-color: var(--color-emphasis-600); // @presenter Color
1106
+ --panel-try-it-action-button-hover-text-color: var(--text-color-inverse); // @presenter Color
1107
+ --panel-try-it-action-button-hover-background-color: var(--color-primary-600); // @presenter Color
1108
+ --panel-try-it-action-button-hover-border-color: var(--color-primary-600); // @presenter Color
1109
1109
 
1110
1110
  /**
1111
1111
  * @tokens Panel samples other styles
@@ -1984,6 +1984,7 @@ exports.styles = (0, styled_components_1.css) `
1984
1984
  ${modal}
1985
1985
 
1986
1986
  --api-onboarding-table-text-color: #4e5356;
1987
+ --api-catalog-card-min-width: 250px;
1987
1988
 
1988
1989
  background-color: var(--background-color);
1989
1990
  color: var(--text-color);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@redocly/theme",
3
- "version": "0.9.1",
3
+ "version": "0.9.3",
4
4
  "description": "Shared UI components lib",
5
5
  "author": "team@redocly.com",
6
6
  "license": "SEE LICENSE IN LICENSE",
package/src/Button/Button.tsx CHANGED
@@ -99,7 +99,7 @@ const StyledButton = styled.button.attrs(
99
99
  }
100
100
 
101
101
  &:disabled {
102
- color: var(--button-disabled-background-color);
102
+ color: var(--button-disabled-color);
103
103
  background-color: transparent;
104
104
  }
105
105
  `
package/src/Catalog/Catalog.tsx CHANGED
@@ -113,7 +113,7 @@ const CatalogPageContent = styled.main`
113
113
 
114
114
  const CatalogCards = styled.div`
115
115
  display: grid;
116
- grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
116
+ grid-template-columns: repeat(auto-fill, minmax(var(--api-catalog-card-min-width), 1fr));
117
117
  gap: 32px;
118
118
  `;
119
119
 
package/src/Panel/PanelBody.ts CHANGED
@@ -24,6 +24,8 @@ export const PanelBody = styled.div.attrs(() => ({
24
24
  ${({ animate }) => animate && showPanelAnimation};
25
25
  ${({ hidden }) => hidden && 'visibility: hidden'};
26
26
 
27
+ overflow: hidden;
28
+
27
29
  background-color: var(--panel-body-background-color);
28
30
 
29
31
  font-family: var(--panel-body-font-family-local);
package/src/ReferenceDocs/DevOnboardingTryItSecurity.tsx CHANGED
@@ -32,6 +32,7 @@ export function DevOnboardingTryItSecurity(props: TryItSecurityAppsProps) {
32
32
  setAcceptValueUpdate(false);
33
33
  } else {
34
34
  setAppId('');
35
+ setSelectedAppSecret('');
35
36
  }
36
37
  // eslint-disable-next-line react-hooks/exhaustive-deps
37
38
  }, [props.value]);
@@ -49,6 +50,11 @@ export function DevOnboardingTryItSecurity(props: TryItSecurityAppsProps) {
49
50
  .then((data: any) => {
50
51
  if (res.ok) {
51
52
  setApps(data.apps);
53
+
54
+ if (data.apps[0]?.id) {
55
+ setAppId(data.apps[0].id);
56
+ loadAppCredentials(data.apps[0].id);
57
+ }
52
58
  } else {
53
59
  setError(data.message);
54
60
  }
@@ -105,10 +111,9 @@ export function DevOnboardingTryItSecurity(props: TryItSecurityAppsProps) {
105
111
  <UseKeyButton
106
112
  disabled={!selectedAppSecret || appLoading}
107
113
  color="secondary"
108
- blinking={appLoading}
109
114
  onClick={() => selectedAppSecret && props.onChange(selectedAppSecret)}
110
115
  >
111
- Use key
116
+ {appLoading ? 'Loading...' : 'Use key'}
112
117
  </UseKeyButton>
113
118
  </FormControl>
114
119
  </>
@@ -156,6 +161,6 @@ const FormLabel = styled.label<{ required?: boolean }>`
156
161
  const UseKeyButton = styled(Button)`
157
162
  width: 100px;
158
163
  align-self: flex-end;
159
- margin-top: 16px;
164
+ margin-top: 10px;
160
165
  margin-right: 0;
161
166
  `;
package/src/Sidebar/FooterWrapper.tsx CHANGED
@@ -5,5 +5,10 @@ export const FooterWrapper = styled.div.attrs(() => ({
5
5
  }))`
6
6
  margin: var(--sidebar-offset-top) 0 var(--sidebar-spacing-unit) var(--sidebar-offset-left);
7
7
  padding-top: var(--sidebar-spacing-unit);
8
+ padding-right: var(--sidebar-spacing-unit);
8
9
  border-top: solid 1px #daddde;
10
+
11
+ button {
12
+ margin: 0;
13
+ }
9
14
  `;
package/src/Sidebar/Sidebar.tsx CHANGED
@@ -23,6 +23,7 @@ export const Sidebar = styled.aside.attrs(() => ({
23
23
  width: 100%;
24
24
  -webkit-font-smoothing: antialiased;
25
25
  top: var(--navbar-height);
26
+ height: calc(100vh - var(--navbar-height));
26
27
 
27
28
  ${({ opened, animate }) => `
28
29
  opacity: ${opened ? '1' : '0'};
package/src/globalStyle.ts CHANGED
@@ -1101,19 +1101,19 @@ const apiReferencePanels = css`
1101
1101
 
1102
1102
  --panel-try-it-action-button-width: auto;
1103
1103
  --panel-try-it-action-button-font-family: var(--panel-font-family); // @presenter FontFamily
1104
- --panel-try-it-action-button-font-weight: var(--panel-font-weight); // @presenter FontWeight
1104
+ --panel-try-it-action-button-font-weight: var(--font-weight-bold); // @presenter FontWeight
1105
1105
  --panel-try-it-action-button-font-size: var(--panel-font-size); // @presenter FontSize
1106
1106
  --panel-try-it-action-button-text-color: var(--text-color-inverse); // @presenter Color
1107
1107
  --panel-try-it-action-button-background-color: var(--color-primary-500); // @presenter Color
1108
1108
  --panel-try-it-action-button-border-color: transparent; // @presenter Color
1109
1109
 
1110
- --panel-try-it-action-button-active-text-color: var(--color-emphasis-900); // @presenter Color
1111
- --panel-try-it-action-button-active-background-color: var(--color-emphasis-700); // @presenter Color
1112
- --panel-try-it-action-button-active-border-color: var(--color-emphasis-700); // @presenter Color
1110
+ --panel-try-it-action-button-active-text-color: var(--text-color-inverse); // @presenter Color
1111
+ --panel-try-it-action-button-active-background-color: var(--color-primary-700); // @presenter Color
1112
+ --panel-try-it-action-button-active-border-color: var(--color-primary-700); // @presenter Color
1113
1113
 
1114
- --panel-try-it-action-button-hover-background-color: var(--color-emphasis-600); // @presenter Color
1115
- --panel-try-it-action-button-hover-text-color: var(--color-emphasis-800); // @presenter Color
1116
- --panel-try-it-action-button-hover-border-color: var(--color-emphasis-600); // @presenter Color
1114
+ --panel-try-it-action-button-hover-text-color: var(--text-color-inverse); // @presenter Color
1115
+ --panel-try-it-action-button-hover-background-color: var(--color-primary-600); // @presenter Color
1116
+ --panel-try-it-action-button-hover-border-color: var(--color-primary-600); // @presenter Color
1117
1117
 
1118
1118
  /**
1119
1119
  * @tokens Panel samples other styles
@@ -2012,6 +2012,7 @@ export const styles = css`
2012
2012
  ${modal}
2013
2013
 
2014
2014
  --api-onboarding-table-text-color: #4e5356;
2015
+ --api-catalog-card-min-width: 250px;
2015
2016
 
2016
2017
  background-color: var(--background-color);
2017
2018
  color: var(--text-color);