cozy-ui 136.3.0 → 137.0.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [137.0.0](https://github.com/cozy/cozy-ui/compare/v136.3.0...v137.0.0) (2026-03-19)
+
+
+### Features
+
+* Pass appIcon and appTextIcon instead of slug to AppTitle ([8b5c6cf](https://github.com/cozy/cozy-ui/commit/8b5c6cf))
+* Remove app text icons ([abea61b](https://github.com/cozy/cozy-ui/commit/abea61b))
+
+
+### BREAKING CHANGES
+
+* All app text icons have been changed. If you imported them, copy the code from cozy-ui to your app.
+* Replace <AppTitle slug="drive" /> by <AppTitle appIcon={DriveIcon} appTextIcon={DriveTextIcon} />. tag and children prop are also removed but were unused.
+
 # [136.3.0](https://github.com/cozy/cozy-ui/compare/v136.2.2...v136.3.0) (2026-03-18)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui",
-  "version": "136.3.0",
+  "version": "137.0.0",
   "description": "Cozy apps UI SDK",
   "main": "./index.js",
   "bin": {

package/react/AppTitle/Readme.md

@@ -1,21 +1,15 @@
-Display the app title of an app with icon, brand name and app name. Support Twake theme only.
-
-You can pass a child that will be used as default value is app is not supported.
+Display the app title of an app with app icon, brand icon and app text icon.
 
 ### Default
 
 ```jsx
 import AppTitle from 'cozy-ui/transpiled/react/AppTitle';
+import DriveIcon from 'cozy-ui/transpiled/react/Icons/Drive';
 
-const slugs = ["calendar", "chat", "contacts", "drive", "mail", "notes", "pass", "store", "photos", "home"];
+// This should be an a nice icon with "Drive" written with Twake font and gradient
+const DriveTextMock = () => <div>Drive</div>;
 
-<div class="u-flex u-flex-column">
-  {
-    slugs.map(slug => <AppTitle slug={slug} />)
-  }
-  <AppTitle slug="coachco2" />
-  <AppTitle slug="coachco2">CoachCO2</AppTitle>
-  <AppTitle>Drive</AppTitle>
+<div className="u-flex u-flex-column">
+  <AppTitle appIcon={DriveIcon} appTextIcon={DriveTextMock} />
 </div>
-
 ```

package/react/AppTitle/index.jsx

@@ -4,99 +4,20 @@ import React from 'react'
 
 import styles from './styles.styl'
 import Icon from '../Icon'
-import AITextIcon from '../Icons/AiText'
-import CalendarAppIcon from '../Icons/CalendarApp'
-import CalendarTextIcon from '../Icons/CalendarText'
-import ChatIcon from '../Icons/Chat'
-import ChatTextIcon from '../Icons/ChatText'
-import ContactsIcon from '../Icons/Contacts'
-import ContactsTextIcon from '../Icons/ContactsText'
-import DriveIcon from '../Icons/Drive'
-import DriveTextIcon from '../Icons/DriveText'
-import MailIcon from '../Icons/Mail'
-import MailTextIcon from '../Icons/MailText'
-import NotesIcon from '../Icons/Notes'
-import NotesTextIcon from '../Icons/NotesText'
-import PassIcon from '../Icons/Pass'
-import PassTextIcon from '../Icons/PassText'
-import PhotosIcon from '../Icons/Photos'
-import PhotosTextIcon from '../Icons/PhotosText'
-import StoreIcon from '../Icons/Store'
-import StoreTextIcon from '../Icons/StoreText'
 import TwakeTextIcon from '../Icons/TwakeText'
-import TwakeWorkplaceIcon from '../Icons/TwakeWorkplace'
-import WorkplaceTextIcon from '../Icons/WorkplaceText'
-import Typography from '../Typography'
 import { useCozyTheme } from '../providers/CozyTheme'
 
-const SLUG_TO_ICONS = {
-  calendar: {
-    icon: CalendarAppIcon,
-    text: CalendarTextIcon
-  },
-  chat: {
-    icon: ChatIcon,
-    text: ChatTextIcon
-  },
-  contacts: {
-    icon: ContactsIcon,
-    text: ContactsTextIcon
-  },
-  drive: {
-    icon: DriveIcon,
-    text: DriveTextIcon
-  },
-  mail: {
-    icon: MailIcon,
-    text: MailTextIcon
-  },
-  notes: {
-    icon: NotesIcon,
-    text: NotesTextIcon
-  },
-  passwords: {
-    icon: PassIcon,
-    text: PassTextIcon
-  },
-  store: {
-    icon: StoreIcon,
-    text: StoreTextIcon
-  },
-  photos: {
-    icon: PhotosIcon,
-    text: PhotosTextIcon
-  },
-  home: {
-    icon: TwakeWorkplaceIcon,
-    text: WorkplaceTextIcon
-  },
-  assistant: {
-    icon: null,
-    text: AITextIcon
-  }
-}
-
-const AppTitle = ({ slug, tag, className, children, ...otherProps }) => {
+const AppTitle = ({ appIcon, appTextIcon }) => {
   const { isLight } = useCozyTheme()
 
-  const titleData = SLUG_TO_ICONS[slug]
-
-  if (!titleData)
-    return (
-      <Typography
-        component={tag}
-        variant="h4"
-        className={cx(styles['c-apptitle'], className)}
-        {...otherProps}
-      >
-        {children}
-      </Typography>
-    )
+  if (!appIcon || !appTextIcon) {
+    return null
+  }
 
   return (
     <div className="u-flex u-flex-items-center">
       <Icon
-        icon={titleData.icon}
+        icon={appIcon}
         size="32"
         className={styles['c-apptitle-app-icon']}
       />
@@ -110,27 +31,14 @@ const AppTitle = ({ slug, tag, className, children, ...otherProps }) => {
           isLight ? styles['c-apptitle-light'] : styles['c-apptitle-dark']
         )}
       />
-      <Icon
-        icon={titleData.text}
-        width="auto"
-        height="22"
-        className={cx(
-          'u-w-auto',
-          slug === 'home' ? styles['c-apptitle-home-icon'] : undefined
-        )}
-      />
+      <Icon icon={appTextIcon} width="auto" height="22" className="u-w-auto" />
     </div>
   )
 }
 
 AppTitle.propTypes = {
-  slug: PropTypes.string,
-  tag: PropTypes.string,
-  className: PropTypes.string
-}
-
-AppTitle.defaultProps = {
-  tag: 'h1'
+  appIcon: PropTypes.func,
+  appTextIcon: PropTypes.func
 }
 
 export default AppTitle

package/react/AppTitle/styles.styl

@@ -11,9 +11,3 @@
 
 .c-apptitle-app-icon
     margin-right: 4px
-
-// We need a custom height and positioning
-// because of the 'p' that decenter the svg
-.c-apptitle-home-icon
-    margin-top: 5px
-    height: 26px

package/react/Icon/Readme.md

@@ -723,7 +723,6 @@ import DemoProvider from 'cozy-ui/docs/components/DemoProvider'
 import cx from 'classnames'
 
 import AccountIcon from 'cozy-ui/transpiled/react/Icons/Account'
-import AITextIcon from 'cozy-ui/transpiled/react/Icons/AiText'
 import AssistantColorIcon from 'cozy-ui/transpiled/react/Icons/AssistantColor'
 import BottomSelectIcon from 'cozy-ui/transpiled/react/Icons/BottomSelect'
 import CreditCardLargeIcon from 'cozy-ui/transpiled/react/Icons/CreditCardLarge'
@@ -780,7 +779,6 @@ import TwakeWorkplace from 'cozy-ui/transpiled/react/Icons/TwakeWorkplace'
 
 const icons = [
   AccountIcon,
-  AITextIcon,
   AssistantColorIcon,
   BottomSelectIcon,
   ChatIcon,

package/transpiled/react/AppTitle/index.d.ts

@@ -1,20 +1,12 @@
 export default AppTitle;
-declare function AppTitle({ slug, tag, className, children, ...otherProps }: {
-    [x: string]: any;
-    slug: any;
-    tag: any;
-    className: any;
-    children: any;
-}): JSX.Element;
+declare function AppTitle({ appIcon, appTextIcon }: {
+    appIcon: any;
+    appTextIcon: any;
+}): JSX.Element | null;
 declare namespace AppTitle {
     namespace propTypes {
-        const slug: PropTypes.Requireable<string>;
-        const tag: PropTypes.Requireable<string>;
-        const className: PropTypes.Requireable<string>;
-    }
-    namespace defaultProps {
-        const tag_1: string;
-        export { tag_1 as tag };
+        const appIcon: PropTypes.Requireable<(...args: any[]) => any>;
+        const appTextIcon: PropTypes.Requireable<(...args: any[]) => any>;
     }
 }
 import PropTypes from "prop-types";

package/transpiled/react/AppTitle/index.js

@@ -1,6 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["slug", "tag", "className", "children"];
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
@@ -8,101 +5,27 @@ var styles = {
   "c-apptitle": "styles__c-apptitle___eqV9l",
   "c-apptitle-light": "styles__c-apptitle-light___49VIZ",
   "c-apptitle-dark": "styles__c-apptitle-dark___13RM5",
-  "c-apptitle-app-icon": "styles__c-apptitle-app-icon___oQp8q",
-  "c-apptitle-home-icon": "styles__c-apptitle-home-icon___1xJsd"
+  "c-apptitle-app-icon": "styles__c-apptitle-app-icon___oQp8q"
 };
 import Icon from "cozy-ui/transpiled/react/Icon";
-import AITextIcon from "cozy-ui/transpiled/react/Icons/AiText";
-import CalendarAppIcon from "cozy-ui/transpiled/react/Icons/CalendarApp";
-import CalendarTextIcon from "cozy-ui/transpiled/react/Icons/CalendarText";
-import ChatIcon from "cozy-ui/transpiled/react/Icons/Chat";
-import ChatTextIcon from "cozy-ui/transpiled/react/Icons/ChatText";
-import ContactsIcon from "cozy-ui/transpiled/react/Icons/Contacts";
-import ContactsTextIcon from "cozy-ui/transpiled/react/Icons/ContactsText";
-import DriveIcon from "cozy-ui/transpiled/react/Icons/Drive";
-import DriveTextIcon from "cozy-ui/transpiled/react/Icons/DriveText";
-import MailIcon from "cozy-ui/transpiled/react/Icons/Mail";
-import MailTextIcon from "cozy-ui/transpiled/react/Icons/MailText";
-import NotesIcon from "cozy-ui/transpiled/react/Icons/Notes";
-import NotesTextIcon from "cozy-ui/transpiled/react/Icons/NotesText";
-import PassIcon from "cozy-ui/transpiled/react/Icons/Pass";
-import PassTextIcon from "cozy-ui/transpiled/react/Icons/PassText";
-import PhotosIcon from "cozy-ui/transpiled/react/Icons/Photos";
-import PhotosTextIcon from "cozy-ui/transpiled/react/Icons/PhotosText";
-import StoreIcon from "cozy-ui/transpiled/react/Icons/Store";
-import StoreTextIcon from "cozy-ui/transpiled/react/Icons/StoreText";
 import TwakeTextIcon from "cozy-ui/transpiled/react/Icons/TwakeText";
-import TwakeWorkplaceIcon from "cozy-ui/transpiled/react/Icons/TwakeWorkplace";
-import WorkplaceTextIcon from "cozy-ui/transpiled/react/Icons/WorkplaceText";
-import Typography from "cozy-ui/transpiled/react/Typography";
 import { useCozyTheme } from "cozy-ui/transpiled/react/providers/CozyTheme";
-var SLUG_TO_ICONS = {
-  calendar: {
-    icon: CalendarAppIcon,
-    text: CalendarTextIcon
-  },
-  chat: {
-    icon: ChatIcon,
-    text: ChatTextIcon
-  },
-  contacts: {
-    icon: ContactsIcon,
-    text: ContactsTextIcon
-  },
-  drive: {
-    icon: DriveIcon,
-    text: DriveTextIcon
-  },
-  mail: {
-    icon: MailIcon,
-    text: MailTextIcon
-  },
-  notes: {
-    icon: NotesIcon,
-    text: NotesTextIcon
-  },
-  passwords: {
-    icon: PassIcon,
-    text: PassTextIcon
-  },
-  store: {
-    icon: StoreIcon,
-    text: StoreTextIcon
-  },
-  photos: {
-    icon: PhotosIcon,
-    text: PhotosTextIcon
-  },
-  home: {
-    icon: TwakeWorkplaceIcon,
-    text: WorkplaceTextIcon
-  },
-  assistant: {
-    icon: null,
-    text: AITextIcon
-  }
-};
 
 var AppTitle = function AppTitle(_ref) {
-  var slug = _ref.slug,
-      tag = _ref.tag,
-      className = _ref.className,
-      children = _ref.children,
-      otherProps = _objectWithoutProperties(_ref, _excluded);
+  var appIcon = _ref.appIcon,
+      appTextIcon = _ref.appTextIcon;
 
   var _useCozyTheme = useCozyTheme(),
       isLight = _useCozyTheme.isLight;
 
-  var titleData = SLUG_TO_ICONS[slug];
-  if (!titleData) return /*#__PURE__*/React.createElement(Typography, _extends({
-    component: tag,
-    variant: "h4",
-    className: cx(styles['c-apptitle'], className)
-  }, otherProps), children);
+  if (!appIcon || !appTextIcon) {
+    return null;
+  }
+
   return /*#__PURE__*/React.createElement("div", {
     className: "u-flex u-flex-items-center"
   }, /*#__PURE__*/React.createElement(Icon, {
-    icon: titleData.icon,
+    icon: appIcon,
     size: "32",
     className: styles['c-apptitle-app-icon']
   }), /*#__PURE__*/React.createElement(Icon, {
@@ -111,19 +34,15 @@ var AppTitle = function AppTitle(_ref) {
     height: "22",
     className: cx('u-mr-half', 'u-w-auto', isLight ? styles['c-apptitle-light'] : styles['c-apptitle-dark'])
   }), /*#__PURE__*/React.createElement(Icon, {
-    icon: titleData.text,
+    icon: appTextIcon,
     width: "auto",
     height: "22",
-    className: cx('u-w-auto', slug === 'home' ? styles['c-apptitle-home-icon'] : undefined)
+    className: "u-w-auto"
   }));
 };
 
 AppTitle.propTypes = {
-  slug: PropTypes.string,
-  tag: PropTypes.string,
-  className: PropTypes.string
-};
-AppTitle.defaultProps = {
-  tag: 'h1'
+  appIcon: PropTypes.func,
+  appTextIcon: PropTypes.func
 };
 export default AppTitle;