tycho-components 0.18.1 → 0.18.2

package/dist/Header/HeaderApps/style.scss

@@ -133,6 +133,10 @@
       .header-profile-apps {
         display: block;
         margin-left: auto;
+
+        > .profile-container {
+          display: flex;
+        }
       }
     }
 

package/dist/Header/HeaderButtons/HeaderButtons.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { IconButton } from 'tycho-storybook';
@@ -14,5 +14,5 @@ export default function HeaderButtons({ hideKeyboard, notifications, keyboardLay
     const { getCorpus } = useCorpusUtils();
     const { isLogged } = useLoggedUtils();
     const [openKeyboard, setOpenKeyboard] = useState(false);
-    return (_jsxs(_Fragment, { children: [!hideKeyboard && (_jsx(IconButton, { onClick: () => setOpenKeyboard(!openKeyboard), name: "keyboard", size: "medium", title: t('tooltip.keyboard'), mode: mobile ? 'outlined' : 'filled' })), _jsx(HelpButton, { helpActions: helpActions, mobile: mobile }), notifications && isLogged() && (_jsx(HeaderNotifications, { uid: notifications.ref, mode: notifications.mode, mobile: mobile })), _jsx(LanguageSelector, { openToTop: mobile ? true : false, mobile: mobile }), openKeyboard && (_jsx(VirtualKeyboard, { onClose: () => setOpenKeyboard(false), closeLabel: t('button.close'), defaultLayout: keyboardLayout || getCorpus().keyboardLayout || 'english' }))] }));
+    return (_jsxs("div", { className: "header-buttons", children: [!hideKeyboard && (_jsx(IconButton, { onClick: () => setOpenKeyboard(!openKeyboard), name: "keyboard", size: "medium", title: t('tooltip.keyboard'), mode: mobile ? 'outlined' : 'filled' })), _jsx(HelpButton, { helpActions: helpActions, mobile: mobile }), notifications && isLogged() && (_jsx(HeaderNotifications, { uid: notifications.ref, mode: notifications.mode, mobile: mobile })), _jsx(LanguageSelector, { openToTop: mobile ? true : false, mobile: mobile }), openKeyboard && (_jsx(VirtualKeyboard, { onClose: () => setOpenKeyboard(false), closeLabel: t('button.close'), defaultLayout: keyboardLayout || getCorpus().keyboardLayout || 'english' }))] }));
 }

package/dist/Header/HeaderButtons/styles.scss

@@ -0,0 +1,11 @@
+.header-buttons {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+@media (max-width: 768px) {
+  .header-buttons {
+    display: none;
+  }
+}

package/dist/Header/HeaderUser/HeaderUser.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Button, Icon, ProfileDropdown } from 'tycho-storybook';
+import { Avatar, Button, Icon } from 'tycho-storybook';
 import { useLoggedUtils } from '../../configs/useLoggedUtils';
 import './style.scss';
 export default function HeaderUser({ navigateLogout, navigateNotLogged, }) {
@@ -12,7 +12,7 @@ export default function HeaderUser({ navigateLogout, navigateNotLogged, }) {
         setOpen(false);
         window.open(import.meta.env.VITE_APP_RESERVED_URL, '_blank');
     };
-    return (_jsxs("div", { className: "profile-container", children: [isLogged() ? (_jsx(ProfileDropdown, { src: getLogged()?.picture, title: getLogged()?.name || getLogged()?.sub, onClick: (b) => setOpen(b) })) : (_jsx(Button, { text: t('button.sign.in'), size: "small", onClick: navigateNotLogged })), open && isLogged() && (_jsxs("div", { className: "ds-dropdown-list", children: [_jsx("div", { className: "ds-dropdown-itemlist", children: _jsx("span", { className: "label", children: `${t('profile.label.hello')} ${getLogged()?.name || getLogged()?.sub}` }) }), _jsxs("div", { className: "ds-dropdown-itemlist d-none", children: [_jsx(Icon, { name: "colors", size: "x-small" }), _jsx("span", { className: "label", children: t('profile.label.theme') })] }), _jsxs("div", { className: "ds-dropdown-itemlist", onClick: handleProfile, children: [_jsx(Icon, { name: "person", size: "x-small" }), _jsx("span", { className: "label", children: t('profile.label.home') })] }), _jsxs("div", { className: "ds-dropdown-itemlist", children: [_jsx(Icon, { name: "live_help", size: "x-small" }), _jsx("span", { className: "label", children: t('profile.label.help') })] }), _jsxs("div", { className: "ds-dropdown-itemlist", onClick: () => {
+    return (_jsxs("div", { className: "profile-container", children: [isLogged() ? (_jsx("div", { onClick: () => setOpen(!open), children: _jsx(Avatar, { size: "small", src: getLogged()?.picture, title: getLogged()?.name || getLogged()?.sub }) })) : (_jsx(Button, { text: t('button.sign.in'), size: "small", onClick: navigateNotLogged })), open && isLogged() && (_jsxs("div", { className: "ds-dropdown-list", children: [_jsx("div", { className: "ds-dropdown-itemlist", children: _jsx("span", { className: "label", children: `${t('profile.label.hello')} ${getLogged()?.name || getLogged()?.sub}` }) }), _jsxs("div", { className: "ds-dropdown-itemlist d-none", children: [_jsx(Icon, { name: "colors", size: "x-small" }), _jsx("span", { className: "label", children: t('profile.label.theme') })] }), _jsxs("div", { className: "ds-dropdown-itemlist", onClick: handleProfile, children: [_jsx(Icon, { name: "person", size: "x-small" }), _jsx("span", { className: "label", children: t('profile.label.home') })] }), _jsxs("div", { className: "ds-dropdown-itemlist", children: [_jsx(Icon, { name: "live_help", size: "x-small" }), _jsx("span", { className: "label", children: t('profile.label.help') })] }), _jsxs("div", { className: "ds-dropdown-itemlist", onClick: () => {
                             setOpen(false);
                             navigateLogout && navigateLogout();
                         }, children: [_jsx(Icon, { name: "logout", size: "x-small" }), _jsx("span", { className: "label", children: t('profile.label.logout') })] })] }))] }));

package/dist/Header/HeaderUser/style.scss

@@ -24,3 +24,9 @@
     }
   }
 }
+
+@media (max-width: 767px) {
+  .profile-container {
+    display: none;
+  }
+}

package/dist/Header/styles.scss

@@ -35,7 +35,7 @@
     align-items: center;
     justify-content: flex-end;
     padding-right: var(--spacing-150);
-    gap: 4px;
+    gap: 8px;
   }
 }
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "tycho-components",
   "private": false,
-  "version": "0.18.1",
+  "version": "0.18.2",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {
@@ -49,7 +49,7 @@
     "react-hook-form": "^7.45.2",
     "react-i18next": "^13.0.2",
     "react-router-dom": "^6.14.2",
-    "tycho-storybook": "0.6.3",
+    "tycho-storybook": "0.6.4",
     "yup": "^1.2.0"
   },
   "devDependencies": {