Pending Review

Pending Review from User Experience (UX)

Logo Component

Overview

The PWC Logo component provides a consistent and branded way to display product logos throughout the application. Built on Lit web components, it automatically adapts to the current theme and product context with localization support and flexible sizing options for optimal brand representation.

Core Capabilities

Dynamic Logo Loading - Automatically loads appropriate logo based on current theme and product configuration
Variant Support - Two size variants (tall and short) for different layout contexts and space constraints
Theme Integration - Seamless adaptation to light and dark themes with appropriate logo variations
Localization Ready - Built-in internationalization support for logo alt text and accessibility labels
Product Awareness - Context-aware logo selection based on current product environment
Flexible Layout - Support for flex layout properties and responsive positioning within parent containers

When to use Logo:

Brand Identity - Display primary product branding in headers, navigation, and key interface areas
Product Recognition - Establish clear product context and brand association for users
Navigation Elements - Provide visual anchor points and clickable brand elements for homepage navigation
Authentication Pages - Reinforce brand presence on login, registration, and security-related screens

When not to use Logo:

Decorative Purposes - Avoid using logos purely for decoration without functional or branding purpose
Content Areas - Don't place logos within main content areas where they might interfere with user tasks
Repetitive Display - Limit logo usage to avoid overwhelming the interface with excessive branding

Basic Implementation

React 18React 19+AngularPure JavaScript

import React, { useState, useCallback, useEffect } from 'react';
import { PwcLogo, PwcButton } from '@progress-i360/pwc-react';

function AdaptiveLogo() {
  const [logoVariant, setLogoVariant] = useState('tall');
  const [themeContext, setThemeContext] = useState('light');

  // React 18: useCallback for optimization
  const toggleVariant = useCallback(() => {
    setLogoVariant(prev => prev === 'tall' ? 'short' : 'tall');
  }, []);

  const simulateTheme = useCallback(() => {
    setThemeContext(prev => prev === 'light' ? 'dark' : 'light');
  }, []);

  // React 18: useEffect for global variable updates
  useEffect(() => {
    window.pwcTheme = themeContext;
    window.pwcProduct = 'openedge';
  }, [themeContext]);

  return (
      <div style={{ padding: '20px' }}>
        <PwcLogo variant={logoVariant} />

        <div style={{ marginTop: '16px' }}>
          <PwcButton
            label={`Switch to ${logoVariant === 'tall' ? 'Short' : 'Tall'}`}
            variant="outline"
            onPwcClick={toggleVariant}
          />
          <PwcButton
            label={`Theme: ${themeContext}`}
            variant="primary"
            onPwcClick={simulateTheme}
            style={{ marginLeft: '8px' }}
          />
        </div>
      </div>
  );
}

import { useCallback, useOptimistic, useState, startTransition } from 'react';
import '@progress-i360/progress-web-components/logo';
import '@progress-i360/progress-web-components/button';

type ProductOption = {
  name: 'openedge' | 'chef' | 'datadirect';
  active: boolean;
};

function BrandSwitcher() {
  const [products, setProducts] = useState<ProductOption[]>([
    { name: 'openedge', active: true },
    { name: 'chef', active: false },
    { name: 'datadirect', active: false }
  ]);
  const [variant, setVariant] = useState<'tall' | 'short'>('tall');

  // React 19+: Optimistic product switching
  const [optimisticProducts, switchProduct] = useOptimistic(
    products,
    (state, productName: ProductOption['name']) => state.map(product => ({
      ...product,
      active: product.name === productName
    }))
  );

  const handleProductSwitch = useCallback((productName: ProductOption['name']) => {
    switchProduct(productName);

    startTransition(() => {
      window.pwcProduct = productName;
      setProducts(prev => prev.map(product => ({
        ...product,
        active: product.name === productName
      })));
    });
  }, [setProducts, switchProduct]);

  const toggleVariant = useCallback(() => {
    setVariant(prev => (prev === 'tall' ? 'short' : 'tall'));
  }, []);

  return (
      <div style={{ padding: '20px' }}>
        <pwc-logo variant={variant}></pwc-logo>

        <div style={{ marginTop: '16px' }}>
          {optimisticProducts.map(product => (
            <pwc-button
              key={product.name}
              label={product.name}
              variant={product.active ? 'primary' : 'outline'}
              onPwcClick={() => handleProductSwitch(product.name)}
              style={{ marginRight: '8px' }}
            ></pwc-button>
          ))}

          <pwc-button
            label={`Variant: ${variant}`}
            variant="outline"
            onPwcClick={toggleVariant}
            style={{ marginTop: '8px' }}
          ></pwc-button>
        </div>
      </div>
  );
}

import { Component, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
import "@progress-i360/progress-web-components/logo";
import "@progress-i360/progress-web-components/flex";
import "@progress-i360/progress-web-components/button";
import "@progress-i360/progress-web-components/body";
import "@progress-i360/progress-web-components/heading";

@Component({
  selector: 'logo-demo',
  template: `
    <pwc-flex direction="column" gap="m" padding="m">
      <pwc-heading content="Brand Logo Display" size="l"></pwc-heading>
      <pwc-flex direction="column" gap="m" align-items="flex-start">
        <pwc-flex align-items="center" gap="m">
          <pwc-body content="Header Logo:"></pwc-body>
          <pwc-logo [variant]="headerVariant"></pwc-logo>
        </pwc-flex>
        <pwc-flex align-items="center" gap="m">
          <pwc-body content="Sidebar Logo:"></pwc-body>
          <pwc-logo variant="short"></pwc-logo>
        </pwc-flex>
      </pwc-flex>
      <pwc-flex gap="s">
        <pwc-button label="Toggle Variant" variant="primary" (pwc-click)="toggleVariant()"></pwc-button>
        <pwc-button label="Simulate Theme" variant="outline" (pwc-click)="simulateTheme()"></pwc-button>
      </pwc-flex>
      <pwc-body [content]="'Header Variant: ' + headerVariant + ', Theme Changes: ' + themeChanges" color="subtle" size="xs"></pwc-body>
    </pwc-flex>
  `,
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class LogoDemo {
  headerVariant = 'tall';
  themeChanges = 0;

  toggleVariant() {
    this.headerVariant = this.headerVariant === 'tall' ? 'short' : 'tall';
  }

  simulateTheme() {
    this.themeChanges++;
    // In a real app, this would trigger theme changes
    // that would automatically update logo variants
  }
}

import '@progress-i360/progress-web-components/logo';

const headerLogo = document.createElement('pwc-logo');
headerLogo.setAttribute('variant', 'tall');

const compactLogo = document.createElement('pwc-logo');
compactLogo.setAttribute('variant', 'short');
compactLogo.setAttribute('align-self', 'center');

document.body.appendChild(headerLogo);
document.body.appendChild(compactLogo);

Usage Patterns

Header Branding - Use tall variant in main application headers and navigation bars for prominent brand presence
Compact Layouts - Implement short variant in sidebars, toolbars, and space-constrained interface areas
Theme Adaptation - Leverage automatic theme-based logo selection for consistent brand presentation across themes
Product Context - Utilize dynamic product-aware logo loading for multi-product environments and white-label solutions

Best Practices

Content Strategy Guidelines

Consistent Placement - Position logos in predictable locations to establish visual hierarchy and user orientation
Appropriate Sizing - Choose tall variant for primary branding and short variant for secondary placements
Contextual Usage - Use logos to reinforce product identity without competing with primary user tasks
Accessibility Support - Ensure logo images have meaningful alt text and proper contrast ratios

Performance Optimization

Image Optimization - Ensure logo SVG files are optimized for fast loading and minimal file size
Caching Strategy - Implement appropriate caching for logo assets to improve load performance
Lazy Loading - Consider lazy loading for logos not immediately visible in the viewport
Network Efficiency - Minimize logo-related network requests through strategic asset management

Integration Architecture

Theme Compatibility - Seamlessly integrate with PWC theme system for automatic logo variant selection
Product Configuration - Leverage dynamic product context for appropriate logo selection and branding
Layout Flexibility - Support flex layout properties for precise positioning within various container layouts
Localization Integration - Ensure proper internationalization support for global product deployments

Common Use Cases

Data Table Headers

Table Branding - Short variant logos in data table headers for subtle brand presence without overwhelming data
Export Headers - Logo inclusion in exported data reports and downloadable content for brand consistency
Dashboard Widgets - Compact logo placement in widget headers for multi-tenant or white-label environments

Search Result Sections

Result Branding - Logo display in search result headers to maintain brand context during information discovery
Category Headers - Brand identification in categorized search results for product-specific content
Filter Panels - Compact logos in filter interfaces to maintain product context during search refinement

Widget Identification - Logo placement in dashboard widgets to establish product context and ownership
Branding Integration - Consistent logo usage across multiple dashboard components for cohesive user experience
White-Label Support - Dynamic logo selection based on tenant or product configuration in multi-client environments

Troubleshooting

Common Issues

Logo Not Loading

Problem: Logo image doesn't appear or shows broken image placeholder

Solution:

Verify theme and product configuration is properly set and logo SVG files exist in expected paths

Incorrect Logo Variant

Problem: Wrong logo version displays for current theme or product context

Solution:

Check pwcTheme and pwcProduct global variables are correctly configured and logo files exist

Sizing Issues

Problem: Logo appears too large or small for the intended layout context

Solution:

Verify variant property is set correctly and CSS height values are applied properly

Layout Problems

Problem: Logo doesn't align properly within parent containers or flex layouts

Solution:

Check flex layout properties and ensure proper alignment values are set for specific use cases

Implementation Support

For detailed implementation guidance:

Theme Integration - Automatic logo selection based on current theme and product configuration
Localization Support - Built-in internationalization for logo alt text and accessibility features
Layout System - Full compatibility with PWC flex layout system and responsive design patterns

Resources

Storybook Documentation

For comprehensive API documentation, interactive examples, and testing tools: 📖 View Complete API Documentation in Storybook →

Logo Component

Overview

Core Capabilities

Basic Implementation

Usage Patterns

Best Practices

Content Strategy Guidelines

Performance Optimization

Integration Architecture

Common Use Cases

Data Table Headers

Search Result Sections

Dashboard Widget Headers

Troubleshooting

Common Issues

Logo Not Loading

Incorrect Logo Variant

Sizing Issues

Layout Problems

Implementation Support

Resources

Storybook Documentation