@westpac/ui 1.11.0 → 1.12.0

package/src/components/pictogram/components/tablet-pictogram.tsx

@@ -0,0 +1,41 @@
+'use client';
+
+import { clsx } from 'clsx';
+import React from 'react';
+
+import { Pictogram } from '../pictogram.component.js';
+import { fill } from '../pictogram.styles.js';
+import { type PictogramProps } from '../pictogram.types.js';
+
+export function TabletPictogram({
+  mode = 'duo',
+  viewBoxWidth = 78,
+  viewBoxHeight = 78,
+  'aria-label': ariaLabel = 'Tablet',
+  copyrightYear = '2026',
+  className,
+  ...props
+}: PictogramProps) {
+  return (
+    <Pictogram
+      className={clsx('size-13', className)}
+      viewBoxWidth={viewBoxWidth}
+      viewBoxHeight={viewBoxHeight}
+      aria-label={ariaLabel}
+      copyrightYear={copyrightYear}
+      {...props}
+    >
+      <g fill="none" fillRule="evenodd">
+        <path
+          className={fill({ mode, outline: true })}
+          d="M56.4102 5.98633C57.7769 5.98644 58.8896 7.03957 58.8896 8.33203V65.6396C58.8896 66.9321 57.7769 67.9862 56.4102 67.9863H17.3691C16.0023 67.9863 14.8896 66.9322 14.8896 65.6396V8.33203C14.8896 7.0395 16.0023 5.98633 17.3691 5.98633H56.4102ZM18.4316 65.2354H55.5625V8.73633H18.4316V65.2354Z"
+        />
+        <path
+          className={fill({ mode, outline: true })}
+          d="M58.0312 2C58.9684 2.00005 59.8424 2.19118 60.6328 2.50195C60.8104 2.55358 61.0289 2.6471 61.2891 2.78906C61.326 2.80891 61.3644 2.82584 61.4014 2.84668C61.4149 2.85461 61.4257 2.85926 61.4404 2.86816C64.5433 4.67301 66.3253 7.47727 66.3379 7.49707C66.3379 7.49707 66.3143 7.50483 66.3057 7.50684C66.7336 8.16917 67 8.91062 67 9.70801V70.1992C66.9997 72.8464 64.3247 75 61.0371 75H18.9678C17.4326 75 16.0514 74.5166 15.002 73.7441C12.2531 71.9617 10.6807 69.5254 10.6807 69.5254C10.6807 69.5254 10.6991 69.5196 10.7041 69.5176C10.2639 68.8533 10 68.1003 10 67.293V6.80176C10.0003 4.1536 12.6753 2 15.9629 2H58.0312ZM15.8662 4.48242C14.2793 4.48249 12.9876 5.523 12.9873 6.80176V67.293C12.9873 68.5719 14.2791 69.6122 15.8662 69.6123H57.9346C59.5217 69.6123 60.8145 68.572 60.8145 67.293V6.80176C60.8142 5.52296 59.5215 4.48242 57.9346 4.48242H15.8662Z"
+        />
+        <rect className={fill({ mode, highlight: true })} x="33" y="12" width="8" height="3" rx="1.5" />
+      </g>
+    </Pictogram>
+  );
+}

package/src/components/pictogram/components/target-pictogram.tsx

@@ -11,7 +11,7 @@ export function TargetPictogram({
   mode = 'duo',
   viewBoxWidth = 78,
   viewBoxHeight = 78,
-  'aria-label': ariaLabel = 'Passport',
+  'aria-label': ariaLabel = 'Target',
   copyrightYear = '2025',
   className,
   ...props

package/src/components/pictogram/index.ts

@@ -54,12 +54,14 @@ export { HeartPictogram } from './components/heart-pictogram.js';
 export { HousePictogram } from './components/house-pictogram.js';
 export { LightBulbPictogram } from './components/light-bulb-pictogram.js';
 export { LoopPictogram } from './components/loop-pictogram.js';
+export { MapPinPictogram } from './components/map-pin-pictogram.js';
 export { MedicareCardPictogram } from './components/medicare-card-pictogram.js';
 export { MobileDevicePictogram } from './components/mobile-device-pictogram.js';
 export { MoneyInPictogram } from './components/money-in-pictogram.js';
 export { MoneyOutPictogram } from './components/money-out-pictogram.js';
 export { MovieTicketsPictogram } from './components/movie-tickets-pictogram.js';
 export { NestEggPictogram } from './components/nest-egg-pictogram.js';
+export { NotificationPictogram } from './components/notification-pictogram.js';
 export { NoodlesPictogram } from './components/noodles-pictogram.js';
 export { Number1Pictogram } from './components/number-1-pictogram.js';
 export { Number2Pictogram } from './components/number-2-pictogram.js';
@@ -81,6 +83,7 @@ export { ShoppingPictogram } from './components/shopping-pictogram.js';
 export { SparklePictogram } from './components/sparkle-pictogram.js';
 export { StarPictogram } from './components/star-pictogram.js';
 export { StopwatchPictogram } from './components/stopwatch-pictogram.js';
+export { TabletPictogram } from './components/tablet-pictogram.js';
 export { TargetPictogram } from './components/target-pictogram.js';
 export { TaxDocumentPictogram } from './components/tax-document-pictogram.js';
 export { TelephoneCallPictogram } from './components/telephone-call-pictogram.js';

package/utils/build-pictogram-assets/index.ts

@@ -0,0 +1,85 @@
+// Generates static SVG assets for each brand from an existing pictogram component.
+
+import { writeFile } from 'fs/promises';
+
+import { type ComponentType, createElement } from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
+
+import { type PictogramProps } from '../../src/components/pictogram/pictogram.types.js';
+
+import { getPictogramColors, pictogramBrands, type PictogramColors } from './pictogram-colors.js';
+
+type PictogramComponent = ComponentType<PictogramProps>;
+
+// Render the component as SVG markup.
+const renderPictogram = (component: PictogramComponent, mode: 'base' | 'duo' | 'mono', colours: PictogramColors) => {
+  let svg = renderToStaticMarkup(
+    createElement(component, {
+      mode,
+      width: 78,
+      height: 78,
+      copyrightYear: '',
+      fill: 'none',
+    }),
+  );
+
+  // Replace theme-dependent colour fill classes with static brand colouring.
+  svg = svg
+    .replace(/ class="fill-surface-pictogram-base"/g, ` fill="${colours.base}"`)
+    .replace(/ class="fill-surface-pictogram-accent"/g, ` fill="${colours.accent}"`)
+    .replace(/ class="fill-surface-mono"/g, ` fill="${colours.mono}"`);
+
+  if (svg.includes('fill-surface-')) {
+    throw new Error('Generated SVG contains an unresolved fill class.');
+  }
+
+  // Remove unnecessary props svg will not need
+  svg = svg.replace(/\s(?:class|role|focusable|aria-label)="[^"]*"/g, '');
+
+  return `${svg}\n`;
+};
+
+// Write the SVG to its brand and colouring folder.
+const writePictogram = async (folder: string, name: string, svg: string) => {
+  const file = `assets/pictograms/${folder}/${name}.svg`;
+  await writeFile(file, svg);
+  /* eslint-disable no-console */
+  console.log(`Written: ${file}`);
+};
+
+const main = async () => {
+  const fileNames = process.argv.slice(2);
+
+  if (!fileNames.length) {
+    throw new Error('Provide a pictogram component file name, for example: mobile-device-pictogram');
+  }
+
+  for (const fileName of fileNames) {
+    const pictogramModule = (await import(`../../src/components/pictogram/components/${fileName}.js`)) as Record<
+      string,
+      unknown
+    >;
+
+    const pictogramExport = Object.entries(pictogramModule).find(
+      ([name, component]) => name.endsWith('Pictogram') && typeof component === 'function',
+    );
+
+    if (!pictogramExport) {
+      throw new Error(`${fileName}.tsx does not export a pictogram component.`);
+    }
+
+    const [name, component] = pictogramExport as [string, PictogramComponent];
+
+    for (const brand of pictogramBrands) {
+      const colours = getPictogramColors(brand);
+
+      await writePictogram(`${brand}/Dark`, name, renderPictogram(component, 'base', colours));
+
+      await writePictogram(`${brand}/DUO`, name, renderPictogram(component, 'duo', colours));
+    }
+
+    await writePictogram('Light', name, renderPictogram(component, 'mono', getPictogramColors('WBC')));
+  }
+};
+
+void main();

package/utils/build-pictogram-assets/pictogram-colors.ts

@@ -0,0 +1,57 @@
+import { readFileSync } from 'fs';
+
+// Load the latest GEL brand colours when the script runs.
+const allBrands: unknown = JSON.parse(readFileSync('../style-config/src/tokens/w3c/all-brands.json', 'utf8'));
+
+export const pictogramBrands = ['WBC', 'BOM', 'BSA', 'STG'] as const;
+export type PictogramBrand = (typeof pictogramBrands)[number];
+
+export type PictogramColors = {
+  base: string;
+  accent: string;
+  mono: string;
+};
+
+type TokenObject = {
+  $value?: unknown;
+  [key: string]: unknown;
+};
+
+// Match each asset folder name to the brand name used in the GEL colour file.
+const brandTokenNames: Record<PictogramBrand, string> = {
+  WBC: 'Westpac',
+  BOM: 'Bank of Melbourne',
+  BSA: 'Bank SA',
+  STG: 'StGeorge',
+};
+
+// Some colours point to other GEL colours instead of a hex value.
+// Follow the references until final colour is found.
+const resolveToken = (tokenPath: string): string => {
+  const token = tokenPath.split('.').reduce<unknown>((currentValue, key) => {
+    if (!currentValue || typeof currentValue !== 'object' || !(key in currentValue)) {
+      throw new Error(`Could not find GEL token: ${tokenPath}`);
+    }
+    return (currentValue as TokenObject)[key];
+  }, allBrands);
+
+  const value = (token as TokenObject).$value;
+
+  if (typeof value !== 'string') {
+    throw new Error(`GEL token does not contain a string value: ${tokenPath}`);
+  }
+
+  const reference = /^\{(.+)\}$/.exec(value);
+  return reference ? resolveToken(reference[1]) : value;
+};
+
+// Get the base, accent and mono colours used to build a brands SVG files.
+export const getPictogramColors = (brand: PictogramBrand): PictogramColors => {
+  const tokenPath = `Tokens.${brandTokenNames[brand]}.light-mode.color`;
+
+  return {
+    base: resolveToken(`${tokenPath}.pictogram.surface-pictogram-base`),
+    accent: resolveToken(`${tokenPath}.pictogram.surface-pictogram-accent`),
+    mono: resolveToken(`${tokenPath}.surface.surface-mono`),
+  };
+};