@imfusion/web-ui 0.11.1-dev.95.g94cb131e → 0.11.1-dev.97.gf5c0e587

package/CHANGELOG.md

@@ -10,6 +10,14 @@
 
 ### Added
 
+- `ProductLogo` takes `compact` to fold into a square mark with the product's initial in place; changing it morphs the
+  logo, sliding the name into its initial as the plate closes behind it. Inside the AppShell rail the navbar folds it while
+  the rail is closed, centered on the icons.
+  [Compact](src/components/logo/product/product.stories.tsx#Compact), [Morph](src/components/logo/product/product.stories.tsx#Morph),
+  [RailProductLogo](src/components/app-shell/app-shell.stories.tsx#RailProductLogo)
+  ([WEBSDK-307](https://imfusion.atlassian.net/browse/WEBSDK-307)) — Nikolaus Brunner <brunner@imfusion.com>
+- `AppShell.Navbar` takes `mark`, a compact form for a custom logo that cannot fold, shown while the rail is closed.
+  Without one, such a logo fades out of the closed rail instead of being cut. — Nikolaus Brunner <brunner@imfusion.com>
 - `AppShell.Navbar` takes `collapse` to put the navbar away. With `"hidden"` it waits behind the page, and a panel toggle in
   a 4rem column at the start opens it; with `"rail"` that column shows its icons, each named in a tooltip, with a mark under
   the current page. Opening recedes the page to an inset card and slides the navbar in; a tap on the page, Escape, or a

package/dist/components/app-shell/app-shell.d.ts

@@ -55,6 +55,12 @@ type NavbarProps = React.ComponentProps<"nav"> & VariantProps<typeof navbarSurfa
      * shell's toggle; `rail` leaves its icon rail. Opening a collapsing navbar recedes the page in front of it.
      */
     collapse?: Collapse;
+    /**
+     * The logo's compact form, shown in place of `logo` while the rail is closed. A `ProductLogo` folds into its compact
+     * form by itself and needs none; the default logo brings the ImFusion glyph; any other logo without a mark fades
+     * out of the closed rail.
+     */
+    mark?: React.ReactNode;
     /** Accessible name of the shell's toggle while the navbar is closed. */
     openLabel?: string;
     /** Accessible name of the shell's toggle while the navbar is open, and of the page cover that closes it. */
@@ -66,7 +72,7 @@ type NavbarProps = React.ComponentProps<"nav"> & VariantProps<typeof navbarSurfa
  * color; children opt into on-color themselves. Below `md` the navbar opens as a drawer from the inline start, with its
  * close on the logo row.
  */
-declare function Navbar({ variant, open, defaultOpen, onOpenChange, logo, account, collapse, openLabel, closeLabel, children, id, ...props }: NavbarProps): import("react/jsx-runtime").JSX.Element | null;
+declare function Navbar({ variant, open, defaultOpen, onOpenChange, logo, account, mark, collapse, openLabel, closeLabel, children, id, ...props }: NavbarProps): import("react/jsx-runtime").JSX.Element | null;
 declare namespace Navbar {
     var displayName: string;
 }

package/dist/components/logo/product/compact-context.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Lets a container fold the product logos inside it, such as the AppShell rail. `claim` tells the container that a logo
+ * folds itself, so it does not have to hide or swap it.
+ */
+export declare const CompactLogoContext: import('react').Context<{
+    compact: boolean;
+    claim: () => void;
+} | null>;

package/dist/components/logo/product/marks.d.ts

@@ -9,3 +9,39 @@ export declare const productWords: {
     suite: string;
     sdk: string;
 };
+/**
+ * The plate in three pieces that fold the full logo into its compact square: the start with its chamfer, a middle that
+ * shrinks, and the end with its chamfer, which slides in by 506.82 units (`product.module.css`). The pieces overlap so no seam shows.
+ */
+export declare const productFoldPieces: {
+    start: string;
+    middle: {
+        x: number;
+        width: number;
+    };
+    end: string;
+};
+/** The compact square: the plate's chamfers on a square, for the cut-out compact form. */
+export declare const productCompactViewBox = "0 0 335.39 335.39";
+export declare const productCompactPlate = "M335.39,99.26L236.13,0L0,0L0,236.13L99.26,335.39L335.39,335.39Z";
+/** Each product's initial, where its wordmark has it; the compact form keeps only this glyph. */
+export declare const productInitials: {
+    labels: string;
+    suite: string;
+    sdk: string;
+};
+/**
+ * Where the rest of each wordmark starts: it slides in behind this edge as the logo folds, so whatever shows of it keeps
+ * the wordmark's spacing to the initial.
+ */
+export declare const productInitialEdges: {
+    labels: number;
+    suite: number;
+    sdk: number;
+};
+/** The rest of each wordmark after its initial; it rides the plate's end into the initial as the logo folds. */
+export declare const productWordRests: {
+    labels: string;
+    suite: string;
+    sdk: string;
+};

package/dist/components/logo/product/product.d.ts

@@ -5,6 +5,11 @@ type Props = Omit<React.ComponentProps<typeof Logo>, "src" | "alt" | "variant">
     product: keyof typeof productWords;
     /** Cut the product name out of the plate so the background shows through. */
     cutout?: boolean;
+    /**
+     * Fold to the square mark with the product's initial, for tight spaces. Changing it morphs the logo: the name slides
+     * into its initial as the plate closes behind it. Inside the AppShell rail the navbar sets it while the rail is closed.
+     */
+    compact?: boolean;
     /** Override the accessible label. Defaults to the product name, e.g. "ImFusion SDK". */
     alt?: string;
     variant?: Exclude<LogoVariant, "minor">;
@@ -13,5 +18,5 @@ type Props = Omit<React.ComponentProps<typeof Logo>, "src" | "alt" | "variant">
  * An ImFusion product logo (Labels, Suite, SDK) — the generic {@link Logo} primitive pre-wired
  * with the product plate. The name is filled to contrast with the plate unless `cutout` is set.
  */
-export declare function ProductLogo({ product, cutout, alt, variant, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+export declare function ProductLogo({ product, cutout, compact, alt, variant, size, height, style, className, ...props }: Props): import("react/jsx-runtime").JSX.Element;
 export {};