@dbosoft/nextjs-uicore 1.7.0 → 1.7.2
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 +109 -5
- package/eslint.config.mjs +3 -3
- package/package.json +5 -5
- package/src/subnav/partials/CtaLinks/github-stars-link/formatStarCount/index.test.js +25 -25
- package/src/subnav/partials/CtaLinks/github-stars-link/parseGithubUrl/index.test.js +25 -25
- package/src/subnav/partials/CtaLinks/icons/github.svg +3 -3
- package/src/subnav/partials/MenuItemsDefault/style.module.scss +71 -71
- package/src/subnav/partials/MenuItemsOverflow/style.module.scss +51 -51
- package/src/subnav/partials/nav-item-text/style.module.scss +19 -19
- package/src/subnav/style.module.scss +13 -13
- package/tsconfig.json +7 -7
- package/.turbo/turbo-check-types.log +0 -4
- package/.turbo/turbo-lint.log +0 -5
package/CHANGELOG.md
CHANGED
|
@@ -1,21 +1,125 @@
|
|
|
1
1
|
# @dbosoft/nextjs-uicore
|
|
2
2
|
|
|
3
|
+
## 1.7.2
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- Updated dependencies [27d5774]
|
|
8
|
+
- Updated dependencies [6781874]
|
|
9
|
+
- Updated dependencies [80043c8]
|
|
10
|
+
- @dbosoft/react-uicore@1.6.0
|
|
11
|
+
|
|
12
|
+
## 1.7.1
|
|
13
|
+
|
|
14
|
+
### Patch Changes
|
|
15
|
+
|
|
16
|
+
- Republish all packages from current main with tutorial system, tabs fixes, and surface system changes.
|
|
17
|
+
- Updated dependencies
|
|
18
|
+
- @dbosoft/react-uicore@1.5.1
|
|
19
|
+
|
|
3
20
|
## 1.7.0
|
|
4
21
|
|
|
5
22
|
### Minor Changes
|
|
6
23
|
|
|
7
|
-
-
|
|
8
|
-
|
|
9
|
-
|
|
24
|
+
- e22306c: Surface system, config-driven types, and pluggable auth.
|
|
25
|
+
|
|
26
|
+
**Surface system**
|
|
27
|
+
- 5 surface classes: `surface-base`, `surface-alt`, `surface-recede`, `surface-wash`, `surface-bold`
|
|
28
|
+
- Flat nesting — no `child-*` indirection needed
|
|
29
|
+
- Text tokens: `text-on-primary`, `text-on-secondary`, `text-on-muted`, `text-on-brand`, `text-on-link`
|
|
30
|
+
- Dark mode uses dark blue surfaces (hue 215°) with wide lightness steps
|
|
31
|
+
- WCAG AAA validated: 10 surfaces, ~50 foreground pairings, 0 FAIL
|
|
32
|
+
- **Breaking:** Removed `child-container`, `child-zone-light`, `child-zone-dark`, `child-emphasis`, `border-child`, `bg-child-*`
|
|
33
|
+
- **Breaking:** Renamed `surface-page` → `surface-base`, `surface-page-alt` → `surface-alt`, `surface-page-recede` → `surface-recede`, `surface-brand-wash` → `surface-wash`, `surface-brand-bold` → `surface-bold`
|
|
34
|
+
|
|
35
|
+
**Tabs**
|
|
36
|
+
- Dual-mode routing (path or query parameter) with configurable param name
|
|
37
|
+
- Client-only tab switching via pushState, zero re-render tab changes
|
|
38
|
+
|
|
39
|
+
**Config-driven type system**
|
|
40
|
+
- `createSiteConfig()` infers all types from config objects — no manual type declarations
|
|
41
|
+
- **Breaking:** `createLink()` removed — use `createSiteConfig()` instead
|
|
42
|
+
- **Breaking:** `useSiteConfig()` removed — pass config as props
|
|
43
|
+
- **Breaking:** `BreadcrumbSchemaClient` / `BreadcrumbSchemaLazy` exports removed
|
|
44
|
+
- **Breaking:** `GetStartedConfig` type removed
|
|
45
|
+
|
|
46
|
+
**Pluggable auth**
|
|
47
|
+
- `authSlot` prop on `HeadNav` — consumer passes their own auth UI component
|
|
48
|
+
- Framework no longer imports `next-auth` — zero auth library dependency
|
|
49
|
+
- **Breaking:** `config.auth` removed — use `HeadNav authSlot` prop + consumer-side SessionProvider
|
|
50
|
+
- **Breaking:** `AuthAdapter`, `AuthSession`, `AuthConfig` types removed
|
|
51
|
+
|
|
52
|
+
**@dbosoft/nextjs-auth (new package)**
|
|
53
|
+
- OIDC authentication with PKCE, iron-session encrypted cookies, per-scope token caching, i18n support
|
|
54
|
+
|
|
55
|
+
### Patch Changes
|
|
56
|
+
|
|
57
|
+
- Updated dependencies [e22306c]
|
|
58
|
+
- @dbosoft/react-uicore@1.5.0
|
|
59
|
+
|
|
60
|
+
## 1.7.0-pre.4
|
|
61
|
+
|
|
62
|
+
### Patch Changes
|
|
63
|
+
|
|
64
|
+
- Align pre-release versions.
|
|
65
|
+
- Updated dependencies
|
|
66
|
+
- @dbosoft/react-uicore@1.5.0-pre.4
|
|
67
|
+
|
|
68
|
+
## 1.7.0-pre.3
|
|
69
|
+
|
|
70
|
+
### Patch Changes
|
|
71
|
+
|
|
72
|
+
- Tabs: client-only tab switching via pushState, prevent Link server navigation for zero re-render tab changes.
|
|
73
|
+
- Updated dependencies
|
|
74
|
+
- @dbosoft/react-uicore@1.5.0-pre.3
|
|
75
|
+
|
|
76
|
+
## 1.7.0-pre.2
|
|
77
|
+
|
|
78
|
+
### Patch Changes
|
|
79
|
+
|
|
80
|
+
- f5e91c0: Tabs: add dual-mode routing (path or query parameter) with configurable param name for multiple tab groups on the same page.
|
|
81
|
+
- Updated dependencies [f5e91c0]
|
|
82
|
+
- @dbosoft/react-uicore@1.5.0-pre.2
|
|
83
|
+
|
|
84
|
+
## 1.7.0-pre.1
|
|
85
|
+
|
|
86
|
+
### Minor Changes
|
|
87
|
+
|
|
88
|
+
- 164d932: Surface system: WCAG-validated surface composition with flat nesting.
|
|
89
|
+
- 5 surface classes: `surface-base`, `surface-alt`, `surface-recede`, `surface-wash`, `surface-bold`
|
|
90
|
+
- Surfaces nest freely — no `child-*` indirection needed
|
|
91
|
+
- Tailwind utilities: `text-on-primary`, `text-on-secondary`, `text-on-muted`, `text-on-brand`, `text-on-link`, `decoration-on-link`, `bg-on-brand-emph`
|
|
10
92
|
- Text token migration: `text-content-primary` → `text-on-primary`, `text-content-secondary` → `text-on-secondary`, `text-content-muted` → `text-on-muted`, `text-link` → `text-on-link`
|
|
11
93
|
- Dark mode uses dark blue surfaces (hue 215°) with wide lightness steps
|
|
12
|
-
-
|
|
94
|
+
- 10 surfaces (5 light + 5 dark), ~50 foreground pairings, 0 FAIL
|
|
13
95
|
- `bg-surface-*` tokens remain valid for interactive states, overlays, dropdowns
|
|
96
|
+
- **Breaking:** Removed `child-container`, `child-zone-light`, `child-zone-dark`, `child-emphasis`, `border-child`, `bg-child-*`
|
|
97
|
+
- **Breaking:** Renamed `surface-page` → `surface-base`, `surface-page-alt` → `surface-alt`, `surface-page-recede` → `surface-recede`, `surface-brand-wash` → `surface-wash`, `surface-brand-bold` → `surface-bold`
|
|
14
98
|
|
|
15
99
|
### Patch Changes
|
|
16
100
|
|
|
17
101
|
- Updated dependencies [164d932]
|
|
18
|
-
- @dbosoft/react-uicore@1.5.0
|
|
102
|
+
- @dbosoft/react-uicore@1.5.0-pre.1
|
|
103
|
+
|
|
104
|
+
## 1.7.0-pre.0
|
|
105
|
+
|
|
106
|
+
### Minor Changes
|
|
107
|
+
|
|
108
|
+
- 164d932: Surface system: WCAG-validated surface composition with flat nesting.
|
|
109
|
+
- 5 surface classes: `surface-base`, `surface-alt`, `surface-recede`, `surface-wash`, `surface-bold`
|
|
110
|
+
- Surfaces nest freely — no `child-*` indirection needed
|
|
111
|
+
- Tailwind utilities: `text-on-primary`, `text-on-secondary`, `text-on-muted`, `text-on-brand`, `text-on-link`, `decoration-on-link`, `bg-on-brand-emph`
|
|
112
|
+
- Text token migration: `text-content-primary` → `text-on-primary`, `text-content-secondary` → `text-on-secondary`, `text-content-muted` → `text-on-muted`, `text-link` → `text-on-link`
|
|
113
|
+
- Dark mode uses dark blue surfaces (hue 215°) with wide lightness steps
|
|
114
|
+
- 10 surfaces (5 light + 5 dark), ~50 foreground pairings, 0 FAIL
|
|
115
|
+
- `bg-surface-*` tokens remain valid for interactive states, overlays, dropdowns
|
|
116
|
+
- **Breaking:** Removed `child-container`, `child-zone-light`, `child-zone-dark`, `child-emphasis`, `border-child`, `bg-child-*`
|
|
117
|
+
- **Breaking:** Renamed `surface-page` → `surface-base`, `surface-page-alt` → `surface-alt`, `surface-page-recede` → `surface-recede`, `surface-brand-wash` → `surface-wash`, `surface-brand-bold` → `surface-bold`
|
|
118
|
+
|
|
119
|
+
### Patch Changes
|
|
120
|
+
|
|
121
|
+
- Updated dependencies [164d932]
|
|
122
|
+
- @dbosoft/react-uicore@1.5.0-pre.0
|
|
19
123
|
|
|
20
124
|
## 1.6.2
|
|
21
125
|
|
package/eslint.config.mjs
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import react from '@dbosoft/eslint-config/react'
|
|
2
|
-
|
|
3
|
-
export default [...react]
|
|
1
|
+
import react from '@dbosoft/eslint-config/react'
|
|
2
|
+
|
|
3
|
+
export default [...react]
|
package/package.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"description": "DEPRECATED: Use @dbosoft/react-uicore/tabs for pure React tabs and @dbosoft/nextjs-site-core/ui/tabs for Next.js integration. All other components (head, subnav, themeselector) are replaced by @dbosoft/nextjs-site-core.",
|
|
4
4
|
"deprecated": true,
|
|
5
5
|
"author": "dbosoft",
|
|
6
|
-
"version": "1.7.
|
|
6
|
+
"version": "1.7.2",
|
|
7
7
|
"sideEffects": false,
|
|
8
8
|
"license": "MIT",
|
|
9
9
|
"exports": {
|
|
@@ -23,9 +23,9 @@
|
|
|
23
23
|
"react": "^19.0.0",
|
|
24
24
|
"react-dom": "^19.0.0",
|
|
25
25
|
"typescript": "^5.8.0",
|
|
26
|
-
"@dbosoft/
|
|
27
|
-
"@dbosoft/
|
|
28
|
-
"@dbosoft/web-types": "1.0.
|
|
26
|
+
"@dbosoft/eslint-config": "2.0.1",
|
|
27
|
+
"@dbosoft/typescript-config": "1.1.1",
|
|
28
|
+
"@dbosoft/web-types": "1.0.1"
|
|
29
29
|
},
|
|
30
30
|
"publishConfig": {
|
|
31
31
|
"access": "public"
|
|
@@ -39,7 +39,7 @@
|
|
|
39
39
|
"@heroicons/react": ">=2.1.0",
|
|
40
40
|
"clsx": ">=2.1.0",
|
|
41
41
|
"next-themes": ">=0.4.3",
|
|
42
|
-
"@dbosoft/react-uicore": "1.
|
|
42
|
+
"@dbosoft/react-uicore": "1.6.0"
|
|
43
43
|
},
|
|
44
44
|
"scripts": {
|
|
45
45
|
"check-types": "tsc --noEmit",
|
|
@@ -1,25 +1,25 @@
|
|
|
1
|
-
import formatStarCount from './index.js'
|
|
2
|
-
|
|
3
|
-
describe('<Subnav /> - formatStarCount', () => {
|
|
4
|
-
it('should return zero for an undefined, null, or zero count', () => {
|
|
5
|
-
expect(formatStarCount(undefined)).toBe(false)
|
|
6
|
-
expect(formatStarCount(null)).toBe(false)
|
|
7
|
-
expect(formatStarCount(0)).toBe(false)
|
|
8
|
-
})
|
|
9
|
-
|
|
10
|
-
it('should return numbers 1 to 999 without formatting', () => {
|
|
11
|
-
expect(formatStarCount(1)).toBe('1')
|
|
12
|
-
expect(formatStarCount(999)).toBe('999')
|
|
13
|
-
})
|
|
14
|
-
|
|
15
|
-
it('should abbreviate numbers in the tens of thousands with "k" and a single decimal point', () => {
|
|
16
|
-
expect(formatStarCount(1003)).toBe('1.0k')
|
|
17
|
-
expect(formatStarCount(1280)).toBe('1.2k')
|
|
18
|
-
expect(formatStarCount(15630)).toBe('15.6k')
|
|
19
|
-
})
|
|
20
|
-
|
|
21
|
-
it('should abbreviate numbers in the hundreds of thousands with "k" and no decimal point', () => {
|
|
22
|
-
expect(formatStarCount(100000)).toBe('100k')
|
|
23
|
-
expect(formatStarCount(156783)).toBe('156k')
|
|
24
|
-
})
|
|
25
|
-
})
|
|
1
|
+
import formatStarCount from './index.js'
|
|
2
|
+
|
|
3
|
+
describe('<Subnav /> - formatStarCount', () => {
|
|
4
|
+
it('should return zero for an undefined, null, or zero count', () => {
|
|
5
|
+
expect(formatStarCount(undefined)).toBe(false)
|
|
6
|
+
expect(formatStarCount(null)).toBe(false)
|
|
7
|
+
expect(formatStarCount(0)).toBe(false)
|
|
8
|
+
})
|
|
9
|
+
|
|
10
|
+
it('should return numbers 1 to 999 without formatting', () => {
|
|
11
|
+
expect(formatStarCount(1)).toBe('1')
|
|
12
|
+
expect(formatStarCount(999)).toBe('999')
|
|
13
|
+
})
|
|
14
|
+
|
|
15
|
+
it('should abbreviate numbers in the tens of thousands with "k" and a single decimal point', () => {
|
|
16
|
+
expect(formatStarCount(1003)).toBe('1.0k')
|
|
17
|
+
expect(formatStarCount(1280)).toBe('1.2k')
|
|
18
|
+
expect(formatStarCount(15630)).toBe('15.6k')
|
|
19
|
+
})
|
|
20
|
+
|
|
21
|
+
it('should abbreviate numbers in the hundreds of thousands with "k" and no decimal point', () => {
|
|
22
|
+
expect(formatStarCount(100000)).toBe('100k')
|
|
23
|
+
expect(formatStarCount(156783)).toBe('156k')
|
|
24
|
+
})
|
|
25
|
+
})
|
|
@@ -1,25 +1,25 @@
|
|
|
1
|
-
import parseGithubUrl from './index.js'
|
|
2
|
-
|
|
3
|
-
describe('<Subnav /> - parseGithubUrl', () => {
|
|
4
|
-
it('should gracefully handle an invalid URL', () => {
|
|
5
|
-
// Suppress console.warn for this test, we expect warnings
|
|
6
|
-
jest.spyOn(console, 'warn')
|
|
7
|
-
global.console.warn.mockImplementation(() => {})
|
|
8
|
-
expect(parseGithubUrl(undefined)).toBe(false)
|
|
9
|
-
expect(parseGithubUrl('blah-blah')).toBe(false)
|
|
10
|
-
// Restore console.warn for further tests
|
|
11
|
-
global.console.warn.mockRestore()
|
|
12
|
-
})
|
|
13
|
-
|
|
14
|
-
it('should handle a non-GitHub URL', () => {
|
|
15
|
-
expect(parseGithubUrl('https://www.example.com/dbosoft/maxback')).toBe(
|
|
16
|
-
false
|
|
17
|
-
)
|
|
18
|
-
})
|
|
19
|
-
|
|
20
|
-
it('should parse the org and repo from a GitHub URL', () => {
|
|
21
|
-
const testInput = 'https://www.github.com/dbosoft/maxback'
|
|
22
|
-
expect(parseGithubUrl(testInput).repo).toBe('maxback')
|
|
23
|
-
expect(parseGithubUrl(testInput).org).toBe('dbosoft')
|
|
24
|
-
})
|
|
25
|
-
})
|
|
1
|
+
import parseGithubUrl from './index.js'
|
|
2
|
+
|
|
3
|
+
describe('<Subnav /> - parseGithubUrl', () => {
|
|
4
|
+
it('should gracefully handle an invalid URL', () => {
|
|
5
|
+
// Suppress console.warn for this test, we expect warnings
|
|
6
|
+
jest.spyOn(console, 'warn')
|
|
7
|
+
global.console.warn.mockImplementation(() => {})
|
|
8
|
+
expect(parseGithubUrl(undefined)).toBe(false)
|
|
9
|
+
expect(parseGithubUrl('blah-blah')).toBe(false)
|
|
10
|
+
// Restore console.warn for further tests
|
|
11
|
+
global.console.warn.mockRestore()
|
|
12
|
+
})
|
|
13
|
+
|
|
14
|
+
it('should handle a non-GitHub URL', () => {
|
|
15
|
+
expect(parseGithubUrl('https://www.example.com/dbosoft/maxback')).toBe(
|
|
16
|
+
false
|
|
17
|
+
)
|
|
18
|
+
})
|
|
19
|
+
|
|
20
|
+
it('should parse the org and repo from a GitHub URL', () => {
|
|
21
|
+
const testInput = 'https://www.github.com/dbosoft/maxback'
|
|
22
|
+
expect(parseGithubUrl(testInput).repo).toBe('maxback')
|
|
23
|
+
expect(parseGithubUrl(testInput).org).toBe('dbosoft')
|
|
24
|
+
})
|
|
25
|
+
})
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
-
<title>GitHub</title>
|
|
3
|
-
<path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
|
|
1
|
+
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<title>GitHub</title>
|
|
3
|
+
<path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
|
|
4
4
|
</svg>
|
|
@@ -1,71 +1,71 @@
|
|
|
1
|
-
.root {
|
|
2
|
-
display: flex;
|
|
3
|
-
padding: 0 32px;
|
|
4
|
-
margin: 0 auto;
|
|
5
|
-
align-items: center;
|
|
6
|
-
list-style: none;
|
|
7
|
-
|
|
8
|
-
&.alignRight {
|
|
9
|
-
margin-right: 0;
|
|
10
|
-
padding-right: 16px;
|
|
11
|
-
}
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
.listItem {
|
|
15
|
-
position: relative;
|
|
16
|
-
white-space: nowrap;
|
|
17
|
-
margin: 0;
|
|
18
|
-
padding: 0;
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
.navLink {
|
|
22
|
-
composes: g-type-body-small-strong from global;
|
|
23
|
-
position: relative;
|
|
24
|
-
padding: 0 16px;
|
|
25
|
-
line-height: 2.5rem;
|
|
26
|
-
display: flex;
|
|
27
|
-
align-items: center;
|
|
28
|
-
white-space: nowrap;
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
.submenuItem {
|
|
32
|
-
composes: g-type-body-small-strong from global;
|
|
33
|
-
color: var(--black);
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
.submenuModal {
|
|
37
|
-
border-radius: 4px;
|
|
38
|
-
box-shadow: 0 8px 12px rgba(37, 38, 45, 0.08);
|
|
39
|
-
background: var(--white);
|
|
40
|
-
z-index: 1;
|
|
41
|
-
display: block;
|
|
42
|
-
position: absolute;
|
|
43
|
-
top: 100%;
|
|
44
|
-
margin: 8px 0 0 0;
|
|
45
|
-
padding: 24px;
|
|
46
|
-
left: 50%;
|
|
47
|
-
transform: translateX(-50%);
|
|
48
|
-
list-style: none;
|
|
49
|
-
|
|
50
|
-
& li {
|
|
51
|
-
& a:hover .text {
|
|
52
|
-
text-decoration: underline;
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
& + li {
|
|
56
|
-
margin-top: 6px;
|
|
57
|
-
}
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
&.isCollapsed {
|
|
61
|
-
display: none;
|
|
62
|
-
}
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
.verticalDivider {
|
|
66
|
-
background: var(--gray-5);
|
|
67
|
-
height: 1.75rem;
|
|
68
|
-
width: 1px;
|
|
69
|
-
margin: 0 8px;
|
|
70
|
-
display: block;
|
|
71
|
-
}
|
|
1
|
+
.root {
|
|
2
|
+
display: flex;
|
|
3
|
+
padding: 0 32px;
|
|
4
|
+
margin: 0 auto;
|
|
5
|
+
align-items: center;
|
|
6
|
+
list-style: none;
|
|
7
|
+
|
|
8
|
+
&.alignRight {
|
|
9
|
+
margin-right: 0;
|
|
10
|
+
padding-right: 16px;
|
|
11
|
+
}
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.listItem {
|
|
15
|
+
position: relative;
|
|
16
|
+
white-space: nowrap;
|
|
17
|
+
margin: 0;
|
|
18
|
+
padding: 0;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.navLink {
|
|
22
|
+
composes: g-type-body-small-strong from global;
|
|
23
|
+
position: relative;
|
|
24
|
+
padding: 0 16px;
|
|
25
|
+
line-height: 2.5rem;
|
|
26
|
+
display: flex;
|
|
27
|
+
align-items: center;
|
|
28
|
+
white-space: nowrap;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.submenuItem {
|
|
32
|
+
composes: g-type-body-small-strong from global;
|
|
33
|
+
color: var(--black);
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.submenuModal {
|
|
37
|
+
border-radius: 4px;
|
|
38
|
+
box-shadow: 0 8px 12px rgba(37, 38, 45, 0.08);
|
|
39
|
+
background: var(--white);
|
|
40
|
+
z-index: 1;
|
|
41
|
+
display: block;
|
|
42
|
+
position: absolute;
|
|
43
|
+
top: 100%;
|
|
44
|
+
margin: 8px 0 0 0;
|
|
45
|
+
padding: 24px;
|
|
46
|
+
left: 50%;
|
|
47
|
+
transform: translateX(-50%);
|
|
48
|
+
list-style: none;
|
|
49
|
+
|
|
50
|
+
& li {
|
|
51
|
+
& a:hover .text {
|
|
52
|
+
text-decoration: underline;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
& + li {
|
|
56
|
+
margin-top: 6px;
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
&.isCollapsed {
|
|
61
|
+
display: none;
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
.verticalDivider {
|
|
66
|
+
background: var(--gray-5);
|
|
67
|
+
height: 1.75rem;
|
|
68
|
+
width: 1px;
|
|
69
|
+
margin: 0 8px;
|
|
70
|
+
display: block;
|
|
71
|
+
}
|
|
@@ -1,51 +1,51 @@
|
|
|
1
|
-
.root {
|
|
2
|
-
position: relative;
|
|
3
|
-
margin-left: auto;
|
|
4
|
-
}
|
|
5
|
-
|
|
6
|
-
.dropdown {
|
|
7
|
-
background: var(--white);
|
|
8
|
-
border-radius: 4px;
|
|
9
|
-
box-shadow: 0 8px 12px rgba(37, 38, 45, 0.08);
|
|
10
|
-
margin-top: 8px;
|
|
11
|
-
max-height: calc(100vh - 300%);
|
|
12
|
-
overflow-y: auto;
|
|
13
|
-
padding: 12px 24px 0 24px;
|
|
14
|
-
position: absolute;
|
|
15
|
-
right: 0;
|
|
16
|
-
top: 100%;
|
|
17
|
-
width: 256px;
|
|
18
|
-
z-index: 1;
|
|
19
|
-
|
|
20
|
-
&.isCollapsed {
|
|
21
|
-
display: none;
|
|
22
|
-
}
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
.ulElem {
|
|
26
|
-
padding: 0;
|
|
27
|
-
margin: 0;
|
|
28
|
-
list-style: none;
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
.submenuTitle {
|
|
32
|
-
composes: g-type-label from global;
|
|
33
|
-
margin: 12px 0 8px 0;
|
|
34
|
-
color: var(--gray-3);
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
.divider {
|
|
38
|
-
margin: 12px 0;
|
|
39
|
-
border: 0;
|
|
40
|
-
padding: 0;
|
|
41
|
-
height: 1px;
|
|
42
|
-
background: var(--gray-5);
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
.submenuItem {
|
|
46
|
-
composes: g-type-body-small-strong from global;
|
|
47
|
-
display: block;
|
|
48
|
-
padding: 4px 0;
|
|
49
|
-
line-height: 1.6em;
|
|
50
|
-
color: var(--black);
|
|
51
|
-
}
|
|
1
|
+
.root {
|
|
2
|
+
position: relative;
|
|
3
|
+
margin-left: auto;
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
.dropdown {
|
|
7
|
+
background: var(--white);
|
|
8
|
+
border-radius: 4px;
|
|
9
|
+
box-shadow: 0 8px 12px rgba(37, 38, 45, 0.08);
|
|
10
|
+
margin-top: 8px;
|
|
11
|
+
max-height: calc(100vh - 300%);
|
|
12
|
+
overflow-y: auto;
|
|
13
|
+
padding: 12px 24px 0 24px;
|
|
14
|
+
position: absolute;
|
|
15
|
+
right: 0;
|
|
16
|
+
top: 100%;
|
|
17
|
+
width: 256px;
|
|
18
|
+
z-index: 1;
|
|
19
|
+
|
|
20
|
+
&.isCollapsed {
|
|
21
|
+
display: none;
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.ulElem {
|
|
26
|
+
padding: 0;
|
|
27
|
+
margin: 0;
|
|
28
|
+
list-style: none;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.submenuTitle {
|
|
32
|
+
composes: g-type-label from global;
|
|
33
|
+
margin: 12px 0 8px 0;
|
|
34
|
+
color: var(--gray-3);
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.divider {
|
|
38
|
+
margin: 12px 0;
|
|
39
|
+
border: 0;
|
|
40
|
+
padding: 0;
|
|
41
|
+
height: 1px;
|
|
42
|
+
background: var(--gray-5);
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.submenuItem {
|
|
46
|
+
composes: g-type-body-small-strong from global;
|
|
47
|
+
display: block;
|
|
48
|
+
padding: 4px 0;
|
|
49
|
+
line-height: 1.6em;
|
|
50
|
+
color: var(--black);
|
|
51
|
+
}
|
|
@@ -1,19 +1,19 @@
|
|
|
1
|
-
.root {
|
|
2
|
-
color: var(--black);
|
|
3
|
-
position: relative;
|
|
4
|
-
|
|
5
|
-
&::after {
|
|
6
|
-
content: '';
|
|
7
|
-
position: absolute;
|
|
8
|
-
left: 0;
|
|
9
|
-
right: 0;
|
|
10
|
-
bottom: 0;
|
|
11
|
-
height: 2px;
|
|
12
|
-
background: var(--black);
|
|
13
|
-
opacity: 0;
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
&.isActive::after {
|
|
17
|
-
opacity: 1;
|
|
18
|
-
}
|
|
19
|
-
}
|
|
1
|
+
.root {
|
|
2
|
+
color: var(--black);
|
|
3
|
+
position: relative;
|
|
4
|
+
|
|
5
|
+
&::after {
|
|
6
|
+
content: '';
|
|
7
|
+
position: absolute;
|
|
8
|
+
left: 0;
|
|
9
|
+
right: 0;
|
|
10
|
+
bottom: 0;
|
|
11
|
+
height: 2px;
|
|
12
|
+
background: var(--black);
|
|
13
|
+
opacity: 0;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
&.isActive::after {
|
|
17
|
+
opacity: 1;
|
|
18
|
+
}
|
|
19
|
+
}
|
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
.root {
|
|
2
|
-
--gray-6-transparent: rgba(174, 176, 183, 0.45);
|
|
3
|
-
position: sticky;
|
|
4
|
-
top: -1px;
|
|
5
|
-
z-index: 800;
|
|
6
|
-
border-top: 1px solid var(--gray-6-transparent);
|
|
7
|
-
border-bottom: 1px solid transparent;
|
|
8
|
-
transition: border-bottom-color 0.8s;
|
|
9
|
-
|
|
10
|
-
&.isSticky {
|
|
11
|
-
border-bottom-color: var(--gray-6-transparent);
|
|
12
|
-
}
|
|
13
|
-
}
|
|
1
|
+
.root {
|
|
2
|
+
--gray-6-transparent: rgba(174, 176, 183, 0.45);
|
|
3
|
+
position: sticky;
|
|
4
|
+
top: -1px;
|
|
5
|
+
z-index: 800;
|
|
6
|
+
border-top: 1px solid var(--gray-6-transparent);
|
|
7
|
+
border-bottom: 1px solid transparent;
|
|
8
|
+
transition: border-bottom-color 0.8s;
|
|
9
|
+
|
|
10
|
+
&.isSticky {
|
|
11
|
+
border-bottom-color: var(--gray-6-transparent);
|
|
12
|
+
}
|
|
13
|
+
}
|
package/tsconfig.json
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
{
|
|
2
|
-
"extends": "@dbosoft/typescript-config/nextjs.json",
|
|
3
|
-
"compilerOptions": {
|
|
4
|
-
"outDir": "dist"
|
|
5
|
-
},
|
|
6
|
-
"include": ["src"],
|
|
7
|
-
"exclude": ["node_modules", "dist"]
|
|
1
|
+
{
|
|
2
|
+
"extends": "@dbosoft/typescript-config/nextjs.json",
|
|
3
|
+
"compilerOptions": {
|
|
4
|
+
"outDir": "dist"
|
|
5
|
+
},
|
|
6
|
+
"include": ["src"],
|
|
7
|
+
"exclude": ["node_modules", "dist"]
|
|
8
8
|
}
|