@canonical/react-components 2.8.0 → 2.8.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.
Files changed (9) hide show
  1. package/dist/components/SidePanel/SidePanel.d.ts +2 -2
  2. package/dist/components/SidePanel/SidePanel.js +3 -3
  3. package/dist/components/SidePanel/SidePanel.stories.d.ts +1 -0
  4. package/dist/components/SidePanel/SidePanel.stories.js +19 -8
  5. package/dist/esm/components/SidePanel/SidePanel.d.ts +2 -2
  6. package/dist/esm/components/SidePanel/SidePanel.js +3 -3
  7. package/dist/esm/components/SidePanel/SidePanel.stories.d.ts +1 -0
  8. package/dist/esm/components/SidePanel/SidePanel.stories.js +18 -7
  9. package/package.json +1 -1
package/dist/components/SidePanel/SidePanel.d.ts CHANGED
@@ -39,9 +39,9 @@ export type Props = {
39
39
  */
40
40
  pinned?: boolean;
41
41
  /**
42
- * Whether the side panel should be wide.
42
+ * Width of the side panel, available options are wide and narrow and the default.
43
43
  */
44
- wide?: boolean;
44
+ width?: "wide" | "narrow" | "";
45
45
  };
46
46
  type SidePanelComponents = FC<Props> & {
47
47
  Header: FC<PropsWithChildren & HeaderProps>;
package/dist/components/SidePanel/SidePanel.js CHANGED
@@ -69,7 +69,7 @@ const SidePanelComponent = _ref => {
69
69
  loading = false,
70
70
  overlay,
71
71
  pinned,
72
- wide,
72
+ width = "",
73
73
  parentId = "l-application"
74
74
  } = _ref;
75
75
  const container = document.getElementById(parentId) || document.body;
@@ -79,8 +79,8 @@ const SidePanelComponent = _ref => {
79
79
  }),
80
80
  "aria-label": "Side panel",
81
81
  pinned: pinned,
82
- narrow: !wide,
83
- wide: wide
82
+ narrow: width === "narrow",
83
+ wide: width === "wide"
84
84
  }, loading ? /*#__PURE__*/_react.default.createElement("div", {
85
85
  className: "loading"
86
86
  }, /*#__PURE__*/_react.default.createElement(_Spinner.default, null)) : hasError ? /*#__PURE__*/_react.default.createElement("div", {
package/dist/components/SidePanel/SidePanel.stories.d.ts CHANGED
@@ -7,4 +7,5 @@ export declare const Default: Story;
7
7
  export declare const Pinned: Story;
8
8
  export declare const Loading: Story;
9
9
  export declare const Error: Story;
10
+ export declare const Narrow: Story;
10
11
  export declare const Wide: Story;
package/dist/components/SidePanel/SidePanel.stories.js CHANGED
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.default = exports.Wide = exports.Pinned = exports.Loading = exports.Error = exports.Default = void 0;
6
+ exports.default = exports.Wide = exports.Pinned = exports.Narrow = exports.Loading = exports.Error = exports.Default = void 0;
7
7
  var _react = _interopRequireWildcard(require("react"));
8
8
  var _SidePanel = _interopRequireDefault(require("./SidePanel"));
9
9
  var _Button = _interopRequireDefault(require("../Button"));
@@ -25,7 +25,6 @@ const meta = {
25
25
  var _el$parentElement, _wrapper$parentElemen;
26
26
  const wrapper = el === null || el === void 0 || (_el$parentElement = el.parentElement) === null || _el$parentElement === void 0 || (_el$parentElement = _el$parentElement.parentElement) === null || _el$parentElement === void 0 ? void 0 : _el$parentElement.parentElement;
27
27
  const parent = wrapper === null || wrapper === void 0 || (_wrapper$parentElemen = wrapper.parentElement) === null || _wrapper$parentElemen === void 0 || (_wrapper$parentElemen = _wrapper$parentElemen.parentElement) === null || _wrapper$parentElemen === void 0 ? void 0 : _wrapper$parentElemen.parentElement;
28
- console.log(wrapper);
29
28
  if (wrapper) {
30
29
  wrapper.style.setProperty("border", "0", "important");
31
30
  }
@@ -75,7 +74,7 @@ const StoryExample = args => {
75
74
  hasError: args.hasError,
76
75
  parentId: parentId,
77
76
  pinned: args.pinned,
78
- wide: args.wide,
77
+ width: args.width,
79
78
  className: "u-no-padding--top u-no-padding--bottom"
80
79
  }, /*#__PURE__*/_react.default.createElement(_SidePanel.default.Sticky, null, /*#__PURE__*/_react.default.createElement(_SidePanel.default.Header, null, /*#__PURE__*/_react.default.createElement(_SidePanel.default.HeaderTitle, null, "Edit panel"), /*#__PURE__*/_react.default.createElement(_SidePanel.default.HeaderControls, null, /*#__PURE__*/_react.default.createElement(_Button.default, {
81
80
  appearance: "base",
@@ -106,7 +105,7 @@ const Default = exports.Default = {
106
105
  pinned: false,
107
106
  loading: false,
108
107
  overlay: true,
109
- wide: false
108
+ width: ""
110
109
  },
111
110
  render: StoryExample
112
111
  };
@@ -118,7 +117,7 @@ const Pinned = exports.Pinned = {
118
117
  pinned: true,
119
118
  loading: false,
120
119
  overlay: false,
121
- wide: false
120
+ width: ""
122
121
  },
123
122
  render: StoryExample,
124
123
  parameters: {
@@ -135,7 +134,7 @@ const Loading = exports.Loading = {
135
134
  pinned: false,
136
135
  loading: true,
137
136
  overlay: true,
138
- wide: false
137
+ width: ""
139
138
  },
140
139
  render: StoryExample
141
140
  };
@@ -147,7 +146,19 @@ const Error = exports.Error = {
147
146
  pinned: false,
148
147
  loading: false,
149
148
  overlay: true,
150
- wide: false
149
+ width: ""
150
+ },
151
+ render: StoryExample
152
+ };
153
+ const Narrow = exports.Narrow = {
154
+ args: {
155
+ className: "",
156
+ hasError: false,
157
+ parentId: "l-application-narrow",
158
+ pinned: false,
159
+ loading: false,
160
+ overlay: true,
161
+ width: "narrow"
151
162
  },
152
163
  render: StoryExample
153
164
  };
@@ -159,7 +170,7 @@ const Wide = exports.Wide = {
159
170
  pinned: false,
160
171
  loading: false,
161
172
  overlay: true,
162
- wide: true
173
+ width: "wide"
163
174
  },
164
175
  render: StoryExample
165
176
  };
package/dist/esm/components/SidePanel/SidePanel.d.ts CHANGED
@@ -39,9 +39,9 @@ export type Props = {
39
39
  */
40
40
  pinned?: boolean;
41
41
  /**
42
- * Whether the side panel should be wide.
42
+ * Width of the side panel, available options are wide and narrow and the default.
43
43
  */
44
- wide?: boolean;
44
+ width?: "wide" | "narrow" | "";
45
45
  };
46
46
  type SidePanelComponents = FC<Props> & {
47
47
  Header: FC<PropsWithChildren & HeaderProps>;
package/dist/esm/components/SidePanel/SidePanel.js CHANGED
@@ -63,7 +63,7 @@ var SidePanelComponent = _ref => {
63
63
  loading = false,
64
64
  overlay,
65
65
  pinned,
66
- wide,
66
+ width = "",
67
67
  parentId = "l-application"
68
68
  } = _ref;
69
69
  var container = document.getElementById(parentId) || document.body;
@@ -73,8 +73,8 @@ var SidePanelComponent = _ref => {
73
73
  }),
74
74
  "aria-label": "Side panel",
75
75
  pinned: pinned,
76
- narrow: !wide,
77
- wide: wide
76
+ narrow: width === "narrow",
77
+ wide: width === "wide"
78
78
  }, loading ? /*#__PURE__*/React.createElement("div", {
79
79
  className: "loading"
80
80
  }, /*#__PURE__*/React.createElement(Spinner, null)) : hasError ? /*#__PURE__*/React.createElement("div", {
package/dist/esm/components/SidePanel/SidePanel.stories.d.ts CHANGED
@@ -7,4 +7,5 @@ export declare const Default: Story;
7
7
  export declare const Pinned: Story;
8
8
  export declare const Loading: Story;
9
9
  export declare const Error: Story;
10
+ export declare const Narrow: Story;
10
11
  export declare const Wide: Story;
package/dist/esm/components/SidePanel/SidePanel.stories.js CHANGED
@@ -16,7 +16,6 @@ var meta = {
16
16
  var _el$parentElement, _wrapper$parentElemen;
17
17
  var wrapper = el === null || el === void 0 || (_el$parentElement = el.parentElement) === null || _el$parentElement === void 0 || (_el$parentElement = _el$parentElement.parentElement) === null || _el$parentElement === void 0 ? void 0 : _el$parentElement.parentElement;
18
18
  var parent = wrapper === null || wrapper === void 0 || (_wrapper$parentElemen = wrapper.parentElement) === null || _wrapper$parentElemen === void 0 || (_wrapper$parentElemen = _wrapper$parentElemen.parentElement) === null || _wrapper$parentElemen === void 0 ? void 0 : _wrapper$parentElemen.parentElement;
19
- console.log(wrapper);
20
19
  if (wrapper) {
21
20
  wrapper.style.setProperty("border", "0", "important");
22
21
  }
@@ -66,7 +65,7 @@ var StoryExample = args => {
66
65
  hasError: args.hasError,
67
66
  parentId: parentId,
68
67
  pinned: args.pinned,
69
- wide: args.wide,
68
+ width: args.width,
70
69
  className: "u-no-padding--top u-no-padding--bottom"
71
70
  }, /*#__PURE__*/React.createElement(SidePanel.Sticky, null, /*#__PURE__*/React.createElement(SidePanel.Header, null, /*#__PURE__*/React.createElement(SidePanel.HeaderTitle, null, "Edit panel"), /*#__PURE__*/React.createElement(SidePanel.HeaderControls, null, /*#__PURE__*/React.createElement(Button, {
72
71
  appearance: "base",
@@ -97,7 +96,7 @@ export var Default = {
97
96
  pinned: false,
98
97
  loading: false,
99
98
  overlay: true,
100
- wide: false
99
+ width: ""
101
100
  },
102
101
  render: StoryExample
103
102
  };
@@ -109,7 +108,7 @@ export var Pinned = {
109
108
  pinned: true,
110
109
  loading: false,
111
110
  overlay: false,
112
- wide: false
111
+ width: ""
113
112
  },
114
113
  render: StoryExample,
115
114
  parameters: {
@@ -126,7 +125,7 @@ export var Loading = {
126
125
  pinned: false,
127
126
  loading: true,
128
127
  overlay: true,
129
- wide: false
128
+ width: ""
130
129
  },
131
130
  render: StoryExample
132
131
  };
@@ -138,7 +137,19 @@ export var Error = {
138
137
  pinned: false,
139
138
  loading: false,
140
139
  overlay: true,
141
- wide: false
140
+ width: ""
141
+ },
142
+ render: StoryExample
143
+ };
144
+ export var Narrow = {
145
+ args: {
146
+ className: "",
147
+ hasError: false,
148
+ parentId: "l-application-narrow",
149
+ pinned: false,
150
+ loading: false,
151
+ overlay: true,
152
+ width: "narrow"
142
153
  },
143
154
  render: StoryExample
144
155
  };
@@ -150,7 +161,7 @@ export var Wide = {
150
161
  pinned: false,
151
162
  loading: false,
152
163
  overlay: true,
153
- wide: true
164
+ width: "wide"
154
165
  },
155
166
  render: StoryExample
156
167
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@canonical/react-components",
3
- "version": "2.8.0",
3
+ "version": "2.8.1",
4
4
  "main": "dist/index.js",
5
5
  "module": "dist/index.js",
6
6
  "author": {