@x4b/banner 28.4.0

package/README.MD

@@ -0,0 +1,76 @@
+# X4B Banner
+
+This project provides a React component for the banner
+
+It also includes a Provider and a hook to manage your App authentication.
+
+## Install
+
+The library requires React>=16.8
+
+-   Install the peer dependencies
+
+```sh
+npm install @x4b/design-system
+# or
+yarn add @x4b/design-system
+```
+
+-   Install the banner package
+
+```sh
+npm install @x4b/banner
+# or
+yarn add @x4b/banner
+```
+
+-   Install the fonts
+
+By default, the banner uses the open sans font.
+In the head of the HTML file, add the following code:
+
+```html
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600&display=swap" />
+```
+
+## Example
+
+Wrap the Banner component inside an AuthProvider to use the X4B authentication.
+Here's a code example:
+
+```javascript
+function App() {
+    return (
+        <>
+            <AuthProvider appsServiceUrl="https://x4b.dev.xcomponent.com/apps">
+                <AppContent />
+            </AuthProvider>
+            <GlobalStyle />
+        </>
+    );
+}
+
+function AppContent() {
+    const [lang, setLang] = React.useState(() => getDefaultLanguage());
+    const { getBannerProps, authResult } = useAuth();
+
+    React.useEffect(() => {
+        console.debug('token', authResult?.token);
+    }, [authResult]);
+
+    return (
+        <Banner
+            {...getBannerProps({
+                application: 'scenario',
+                notificationCount: 2,
+                onNotificationClick: () => console.debug('notification button clicked'),
+                onToggleMenuClick: isMenuOpen => console.debug(`Menu open: ${isMenuOpen}`),
+                language: lang,
+                languages: ['en', 'fr'],
+                onLanguageChange: setLang,
+                version: 'dev-test',
+            })}
+        />
+    );
+}
+```