@planningcenter/topbar 8.3.3-rc.1 → 8.3.3-rc.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.
- package/README.md +0 -56
- package/dist/topbar.css +1 -1
- package/dist/topbar.css.map +1 -1
- package/dist/topbar.js +1 -1
- package/dist/topbar.js.map +1 -1
- package/dist/topbar.modern.js +1 -1
- package/dist/topbar.modern.js.map +1 -1
- package/dist/topbar.module.js +1 -1
- package/dist/topbar.module.js.map +1 -1
- package/dist/topbar.umd.js +1 -1
- package/dist/topbar.umd.js.map +1 -1
- package/dist/types/index.d.ts +0 -1
- package/dist/types/index.d.ts.map +1 -1
- package/dist/types/modules/apps_provider.d.ts +13 -3
- package/dist/types/modules/apps_provider.d.ts.map +1 -1
- package/dist/types/modules/avatar.d.ts +3 -2
- package/dist/types/modules/avatar.d.ts.map +1 -1
- package/dist/types/modules/client_storage.d.ts +2 -2
- package/dist/types/modules/client_storage.d.ts.map +1 -1
- package/dist/types/modules/color_app_icon.d.ts +1 -0
- package/dist/types/modules/color_app_icon.d.ts.map +1 -1
- package/dist/types/modules/color_app_squircles.d.ts +1 -0
- package/dist/types/modules/color_app_squircles.d.ts.map +1 -1
- package/dist/types/modules/colors.d.ts +0 -3
- package/dist/types/modules/colors.d.ts.map +1 -1
- package/dist/types/modules/components/apps_button.d.ts +1 -0
- package/dist/types/modules/components/apps_button.d.ts.map +1 -1
- package/dist/types/modules/components/apps_menu.d.ts +1 -0
- package/dist/types/modules/components/apps_menu.d.ts.map +1 -1
- package/dist/types/modules/components/conditional_wrap.d.ts +1 -1
- package/dist/types/modules/components/conditional_wrap.d.ts.map +1 -1
- package/dist/types/modules/components/eyebrow.d.ts +1 -1
- package/dist/types/modules/components/eyebrow.d.ts.map +1 -1
- package/dist/types/modules/components/hoverable.d.ts +2 -2
- package/dist/types/modules/components/hoverable.d.ts.map +1 -1
- package/dist/types/modules/components/hoverable_list_item.d.ts +1 -1
- package/dist/types/modules/components/hoverable_list_item.d.ts.map +1 -1
- package/dist/types/modules/components/notification_bell.d.ts +1 -0
- package/dist/types/modules/components/notification_bell.d.ts.map +1 -1
- package/dist/types/modules/components/notification_item.d.ts +1 -0
- package/dist/types/modules/components/notification_item.d.ts.map +1 -1
- package/dist/types/modules/components/notifications_menu.d.ts +10 -2
- package/dist/types/modules/components/notifications_menu.d.ts.map +1 -1
- package/dist/types/modules/components/notifications_menu_blank_state.d.ts +2 -2
- package/dist/types/modules/components/notifications_menu_blank_state.d.ts.map +1 -1
- package/dist/types/modules/components/notifications_menu_wrapper.d.ts +1 -1
- package/dist/types/modules/components/notifications_menu_wrapper.d.ts.map +1 -1
- package/dist/types/modules/components/outsider.d.ts +1 -1
- package/dist/types/modules/components/outsider.d.ts.map +1 -1
- package/dist/types/modules/components/popover_root.d.ts +1 -1
- package/dist/types/modules/components/popover_root.d.ts.map +1 -1
- package/dist/types/modules/components/popup.d.ts +1 -1
- package/dist/types/modules/components/popup.d.ts.map +1 -1
- package/dist/types/modules/components/popup_root.d.ts +1 -1
- package/dist/types/modules/components/popup_root.d.ts.map +1 -1
- package/dist/types/modules/components/spinner.d.ts +5 -0
- package/dist/types/modules/components/spinner.d.ts.map +1 -0
- package/dist/types/modules/connected_people_provider.d.ts +6 -7
- package/dist/types/modules/connected_people_provider.d.ts.map +1 -1
- package/dist/types/modules/display_switch.d.ts +2 -2
- package/dist/types/modules/display_switch.d.ts.map +1 -1
- package/dist/types/modules/get_login_profile_path.d.ts +2 -2
- package/dist/types/modules/get_login_profile_path.d.ts.map +1 -1
- package/dist/types/modules/hooks/use_notifications.d.ts.map +1 -1
- package/dist/types/modules/hooks/use_topbar_api.d.ts +2 -2
- package/dist/types/modules/hooks/use_topbar_api.d.ts.map +1 -1
- package/dist/types/modules/mfa_status.d.ts +1 -0
- package/dist/types/modules/mfa_status.d.ts.map +1 -1
- package/dist/types/modules/mono_app_icon.d.ts +1 -0
- package/dist/types/modules/mono_app_icon.d.ts.map +1 -1
- package/dist/types/modules/mono_app_name.d.ts +1 -0
- package/dist/types/modules/mono_app_name.d.ts.map +1 -1
- package/dist/types/modules/mono_app_symbols.d.ts +1 -0
- package/dist/types/modules/mono_app_symbols.d.ts.map +1 -1
- package/dist/types/modules/mono_app_text.d.ts +1 -0
- package/dist/types/modules/mono_app_text.d.ts.map +1 -1
- package/dist/types/modules/not_small_topbar.d.ts +27 -0
- package/dist/types/modules/not_small_topbar.d.ts.map +1 -0
- package/dist/types/modules/platform_announcements.d.ts +3 -3
- package/dist/types/modules/platform_announcements.d.ts.map +1 -1
- package/dist/types/modules/product_announcement.d.ts +1 -1
- package/dist/types/modules/product_announcement.d.ts.map +1 -1
- package/dist/types/modules/small_topbar.d.ts +18 -0
- package/dist/types/modules/small_topbar.d.ts.map +1 -0
- package/dist/types/modules/styled_root.d.ts +1 -0
- package/dist/types/modules/styled_root.d.ts.map +1 -1
- package/dist/types/modules/symbols.d.ts +2 -2
- package/dist/types/modules/symbols.d.ts.map +1 -1
- package/dist/types/modules/topbar_context.d.ts +9 -0
- package/dist/types/modules/topbar_context.d.ts.map +1 -0
- package/dist/types/modules/unbutton.d.ts +1 -0
- package/dist/types/modules/unbutton.d.ts.map +1 -1
- package/dist/types/modules/utils.d.ts +0 -1
- package/dist/types/modules/utils.d.ts.map +1 -1
- package/package.json +4 -17
package/README.md
CHANGED
|
@@ -114,62 +114,6 @@ If you are passing your own Jolt client object into Topbar via props, you can co
|
|
|
114
114
|
If you are relying on Topbar to create its own Jolt connection and would like to enable logging, pass `enableJoltLogging={true}` as a prop to whichever topbar
|
|
115
115
|
you are using (`SmallTopbar`/`NotSmallTopbar`).
|
|
116
116
|
|
|
117
|
-
## Toolbar
|
|
118
|
-
|
|
119
|
-
Toolbar lives alongside Topbar on the right side of the viewport. It is responsible for the global concerns of Profile, Help Desk, Tasks, Notifications, and Core Messaging.
|
|
120
|
-
|
|
121
|
-
### Contributing
|
|
122
|
-
|
|
123
|
-
Tool implementations are self-contained modules that live in the `modules/toolbar/tools/` directory.
|
|
124
|
-
|
|
125
|
-
A tool module is required to have a named export which adheres to the following `ToolbarTool` interface.
|
|
126
|
-
|
|
127
|
-
```ts
|
|
128
|
-
interface ToolbarTool {
|
|
129
|
-
component: unknown // A React component. Stronger typing is in the works.
|
|
130
|
-
icon: string
|
|
131
|
-
name: string
|
|
132
|
-
}
|
|
133
|
-
```
|
|
134
|
-
|
|
135
|
-
- `component`: the React component that will be rendered into the drawer when the tool is selected.
|
|
136
|
-
- `icon`: the name of the [`tapestry-react` icon](https://planningcenter.github.io/tapestry-react/icon#preview-icons) that will be rendered as the button in Toolbar.
|
|
137
|
-
- `name`: the formal name of the tool. For now, this is only surfaced for accessibility concerns on the tool's toolbar `Button`.
|
|
138
|
-
|
|
139
|
-
### Example
|
|
140
|
-
|
|
141
|
-
The following example implements an example tool using the shared `DrawerHeader` and `DrawerHeading` components.
|
|
142
|
-
|
|
143
|
-
- `DrawerHeader` handles the placement and styling of the close button.
|
|
144
|
-
- `DrawerHeading` handles the styling of the drawer heading.
|
|
145
|
-
|
|
146
|
-
```ts
|
|
147
|
-
// tool_name.tsx
|
|
148
|
-
|
|
149
|
-
import { DrawerHeader, DrawerHeading } from "../components"
|
|
150
|
-
|
|
151
|
-
import { ToolbarTool } from "../types"
|
|
152
|
-
|
|
153
|
-
function ToolComponent({ closeDrawer }) {
|
|
154
|
-
return (
|
|
155
|
-
<>
|
|
156
|
-
<DrawerHeader closeDrawer={closeDrawer}>
|
|
157
|
-
<DrawerHeading>Tool name</DrawerHeading>
|
|
158
|
-
</DrawerHeader>
|
|
159
|
-
{/* Tool drawer content implementation */}
|
|
160
|
-
</>
|
|
161
|
-
)
|
|
162
|
-
}
|
|
163
|
-
|
|
164
|
-
const ToolName: ToolbarTool = {
|
|
165
|
-
component: ToolComponent,
|
|
166
|
-
icon: "general.toolbarIconName",
|
|
167
|
-
name: "Tool name",
|
|
168
|
-
}
|
|
169
|
-
|
|
170
|
-
export { ToolName }
|
|
171
|
-
```
|
|
172
|
-
|
|
173
117
|
## Migrate
|
|
174
118
|
|
|
175
119
|
These migration docs will guide you thru the process of updating to recent major releases.
|
package/dist/topbar.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
.hide-scrollbar{-ms-overflow-style:none;scrollbar-width:none}.hide-scrollbar::-webkit-scrollbar{display:none}
|
|
1
|
+
.hide-scrollbar{-ms-overflow-style:none;scrollbar-width:none}.hide-scrollbar::-webkit-scrollbar{display:none}@-webkit-keyframes spinning{to{transform:rotate(1turn)}}@keyframes spinning{to{transform:rotate(1turn)}}.spinner{align-self:center;-webkit-animation:spinning .5s linear infinite;animation:spinning .5s linear infinite;border:2px solid #f7f7f7;border-radius:50%;border-top-color:#9e9e9e;display:inline;height:16px;transform:rotate(0deg);vertical-align:middle;width:16px}
|
|
2
2
|
/*# sourceMappingURL=topbar.css.map */
|
package/dist/topbar.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["utils.css"],"names":[],"mappings":"AAAA,gBACE,uBAAwB,CACxB,oBACF,CACA,mCACE,YACF","file":"topbar.css","sourcesContent":[".hide-scrollbar {\n -ms-overflow-style: none; /* IE and Edge */\n scrollbar-width: none; /* Firefox */\n}\n.hide-scrollbar::-webkit-scrollbar {\n display: none; /* Chrome, Safari, and Opera */\n}\n"]}
|
|
1
|
+
{"version":3,"sources":["utils.css","spinner.css"],"names":[],"mappings":"AAAA,gBACE,uBAAwB,CACxB,oBACF,CACA,mCACE,YACF,CCNA,4BACE,GAEE,uBACF,CACF,CACA,oBACE,GAEE,uBACF,CACF,CAEA,SACE,iBAAkB,CAClB,8CAAyC,CAAzC,sCAAyC,CAKzC,wBAAiB,CAHjB,iBAAkB,CAGlB,wBAAiB,CACjB,cAAe,CACf,WAAY,CACZ,sBAAuB,CACvB,qBAAsB,CACtB,UACF","file":"topbar.css","sourcesContent":[".hide-scrollbar {\n -ms-overflow-style: none; /* IE and Edge */\n scrollbar-width: none; /* Firefox */\n}\n.hide-scrollbar::-webkit-scrollbar {\n display: none; /* Chrome, Safari, and Opera */\n}\n","@-webkit-keyframes spinning {\n 100% {\n -webkit-transform: rotate(360deg);\n transform: rotate(360deg);\n }\n}\n@keyframes spinning {\n 100% {\n -webkit-transform: rotate(360deg);\n transform: rotate(360deg);\n }\n}\n\n.spinner {\n align-self: center;\n animation: spinning 500ms infinite linear;\n border-color: hsl(0 0% 97%);\n border-radius: 50%;\n border-style: solid;\n border-top-color: hsl(0 0% 62%);\n border-width: 2px;\n display: inline;\n height: 16px;\n transform: rotate(0deg);\n vertical-align: middle;\n width: 16px;\n}\n"]}
|