@skipleague/design 0.8.0 → 0.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 (3) hide show
  1. package/dist/ResponsiveShell.js +6 -1
  2. package/package.json +1 -1
  3. package/src/ResponsiveShell.tsx +6 -1
package/dist/ResponsiveShell.js CHANGED
@@ -49,6 +49,11 @@ const CSS = `
49
49
  grid-template-columns: 236px 1fr 340px;
50
50
  grid-template-areas: "top top top" "nav main detail";
51
51
  }
52
+ /* Views without a detail panel: drop the docked column (sidebar + content only). */
53
+ .skl-shell--no-detail {
54
+ grid-template-columns: 236px 1fr;
55
+ grid-template-areas: "top top" "nav main";
56
+ }
52
57
  .skl-shell__rail { display: none; }
53
58
  .skl-shell__sidebar { grid-area: nav; display: block; border-right: 1px solid var(--skl-color-border); }
54
59
  .skl-shell__detail {
@@ -77,5 +82,5 @@ const CSS = `
77
82
  * scrolls internally.
78
83
  */
79
84
  export function ResponsiveShell({ topBar, main, bottomNav, rail, sidebar, detail, detailOpen = false, id, }) {
80
- return (_jsxs("div", { className: "skl-shell", id: id, children: [_jsx("style", { children: CSS }), _jsx("div", { className: "skl-shell__top", children: topBar }), sidebar && _jsx("div", { className: "skl-shell__sidebar", children: sidebar }), rail && _jsx("div", { className: "skl-shell__rail", children: rail }), _jsx("div", { className: "skl-shell__main", children: main }), detail && _jsx("div", { className: `skl-shell__detail${detailOpen ? " is-open" : ""}`, children: detail }), bottomNav && _jsx("div", { className: "skl-shell__bottom", children: bottomNav })] }));
85
+ return (_jsxs("div", { className: `skl-shell${detail ? "" : " skl-shell--no-detail"}`, id: id, children: [_jsx("style", { children: CSS }), _jsx("div", { className: "skl-shell__top", children: topBar }), sidebar && _jsx("div", { className: "skl-shell__sidebar", children: sidebar }), rail && _jsx("div", { className: "skl-shell__rail", children: rail }), _jsx("div", { className: "skl-shell__main", children: main }), detail && _jsx("div", { className: `skl-shell__detail${detailOpen ? " is-open" : ""}`, children: detail }), bottomNav && _jsx("div", { className: "skl-shell__bottom", children: bottomNav })] }));
81
86
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@skipleague/design",
3
- "version": "0.8.0",
3
+ "version": "0.8.1",
4
4
  "description": "SkipUI — the SkipLeague design system: shared tokens and React components for every SkipLeague app.",
5
5
  "type": "module",
6
6
  "repository": {
package/src/ResponsiveShell.tsx CHANGED
@@ -70,6 +70,11 @@ const CSS = `
70
70
  grid-template-columns: 236px 1fr 340px;
71
71
  grid-template-areas: "top top top" "nav main detail";
72
72
  }
73
+ /* Views without a detail panel: drop the docked column (sidebar + content only). */
74
+ .skl-shell--no-detail {
75
+ grid-template-columns: 236px 1fr;
76
+ grid-template-areas: "top top" "nav main";
77
+ }
73
78
  .skl-shell__rail { display: none; }
74
79
  .skl-shell__sidebar { grid-area: nav; display: block; border-right: 1px solid var(--skl-color-border); }
75
80
  .skl-shell__detail {
@@ -109,7 +114,7 @@ export function ResponsiveShell({
109
114
  id,
110
115
  }: ResponsiveShellProps) {
111
116
  return (
112
- <div className="skl-shell" id={id}>
117
+ <div className={`skl-shell${detail ? "" : " skl-shell--no-detail"}`} id={id}>
113
118
  <style>{CSS}</style>
114
119
  <div className="skl-shell__top">{topBar}</div>
115
120
  {sidebar && <div className="skl-shell__sidebar">{sidebar}</div>}