@westpac/ui 1.11.0 → 1.13.0

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

@@ -0,0 +1,47 @@
+'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 NotificationPictogram({
+  mode = 'duo',
+  viewBoxWidth = 78,
+  viewBoxHeight = 78,
+  'aria-label': ariaLabel = 'Notification',
+  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, highlight: true })} d="M15.1504 33.873H6V31.373H15.1504V33.873Z" />
+        <path className={fill({ mode, highlight: true })} d="M71.126 33.873H61.9766V31.373H71.126V33.873Z" />
+        <path
+          className={fill({ mode, highlight: true })}
+          d="M22.8906 17.125L21.124 18.8916L14.6543 12.4209L16.4219 10.6533L22.8906 17.125Z"
+        />
+        <path
+          className={fill({ mode, highlight: true })}
+          d="M62.4727 12.4219L56.0029 18.8916L54.2354 17.124L60.7051 10.6543L62.4727 12.4219Z"
+        />
+        <path className={fill({ mode, highlight: true })} d="M39.8135 11.1504H37.3135V2.00098H39.8135V11.1504Z" />
+        <path
+          className={fill({ mode, outline: true })}
+          d="M46.0968 60.9717L46.0079 60.9697C45.5887 64.6654 42.9012 67.5292 39.6534 67.5293C36.7305 67.5291 32.1257 65.5263 30.6056 61.6367C30.3517 61.1251 30.1489 60.5763 30.0001 60H16.0763C16.0763 60 15.9052 55.6887 16.0763 54.875C16.5598 52.5757 20.5344 50.6378 20.5607 50.625V40.875C20.5607 32.9538 26.2776 26.2974 34.0148 24.4102V21.75C34.0148 19.4028 36.0232 17.5 38.5001 17.5C40.9769 17.5001 42.9845 19.4028 42.9845 21.75V24.4102C50.7217 26.2974 55.4396 32.9537 55.4396 40.875V51.625C55.4845 51.6469 59.4416 53.5812 59.9239 55.875C60.0949 56.6883 59.9241 59.9964 59.9239 60H46.0968V60.9717ZM32.6066 60C33.267 61.7775 34.6746 63.0194 36.3126 63.0195C37.9517 63.0195 39.3592 61.7784 40.0187 60H32.6066ZM37.5011 27C35.6358 27 34.1219 27.3104 34.1114 27.3125C28.2648 28.8338 23.9445 34.1989 23.9445 40.584V52.3613C23.9253 52.3633 22.5523 52.5091 21.5861 53.7871C20.615 55.0716 20.556 55.9963 20.5558 56H54.4454C54.4454 56 54.4455 54.9999 53.4728 54C52.5059 53.0062 51.0743 52.3691 51.0568 52.3613V40.584C51.0568 34.1989 46.7364 28.8338 40.8898 27.3125C38.913 27.0003 39.3722 27 37.5011 27Z"
+        />
+      </g>
+    </Pictogram>
+  );
+}

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`),
+  };
+};

package/utils/build-svg-zip/index.ts

@@ -19,7 +19,7 @@ const exportZip = (zipRoot: string, zipFiles: string[], zipStoragePath: string,
     const filePath = path.resolve(file);
     const fileData = fs.readFileSync(filePath);
     const relativePath = path.relative('assets', file);
-    const zipPathInArchive = path.join(zipRoot, type, relativePath.replace(`${type}/`, ''));
+    const zipPathInArchive = path.join(zipRoot, type, relativePath.replace(`${type}${path.sep}`, ''));
     zip.addFile(zipPathInArchive, fileData);
   });