Merge branch 'develop' into feature/protoform-pages

.changeset/perfect-crabs-smash.md

@@ -0,0 +1,5 @@
+---
+'@westpac/ui': minor
+---
+
+added: x-symbol and logo

.changeset/silver-coins-press.md

@@ -0,0 +1,5 @@
+---
+'@westpac/ui': minor
+---
+
+reverted deletion of twitter icon

.changeset/tasty-ducks-grab.md

@@ -0,0 +1,5 @@
+---
+'@westpac/ui': minor
+---
+
+added: child and child-care icons

.changeset/wet-rice-love.md

@@ -0,0 +1,5 @@
+---
+'@westpac/ui': minor
+---
+
+remove: twitter symbol and icon

packages/ui/src/components/icon/components/child-care-icon.tsx

@@ -6,7 +6,7 @@ import { type IconProps } from '../icon.types.js';
 export function ChildCareIcon({
   look = 'filled',
   'aria-label': ariaLabel = 'Child Care',
-  copyrightYear = '2024',
+  copyrightYear = '2023',
   ...props
 }: IconProps) {
   return (

packages/ui/src/components/icon/components/child-icon.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { Icon } from '../icon.component.js';
 import { type IconProps } from '../icon.types.js';
 
-export function ChildIcon({ 'aria-label': ariaLabel = 'Child', copyrightYear = '2024', ...props }: IconProps) {
+export function ChildIcon({ 'aria-label': ariaLabel = 'Child', copyrightYear = '2023', ...props }: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
       <path

packages/ui/src/components/icon/components/piggy-bank-icon.tsx

@@ -0,0 +1,35 @@
+import React, { Fragment } from 'react';
+
+import { Icon } from '../icon.component.js';
+import { type IconProps } from '../icon.types.js';
+
+export function PiggyBankIcon({
+  look = 'filled',
+  'aria-label': ariaLabel = 'Piggy Bank',
+  copyrightYear = '2023',
+  ...props
+}: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      {look === 'filled' ? (
+        <path
+          fill="currentColor"
+          fillRule="evenodd"
+          d="M.99 15.975A101.66 101.66 0 0 0 3 24h6v-3h4v3h5.6l2.01-7.92L24 14.97V6.5h-2.61l-2.73-2.63c.04-.24.095-.475.165-.705.07-.23.145-.455.225-.675.04-.1.075-.21.105-.33a1.736 1.736 0 0 0-.48-1.635A1.736 1.736 0 0 0 17.4 0c-.96 0-1.855.21-2.685.63A6.098 6.098 0 0 0 12.6 2.4h-6c-1.84 0-3.4.64-4.68 1.92C.64 5.6 0 7.16 0 9c0 2.136.42 4.19.845 6.264l.145.711ZM6 7a1 1 0 0 1 1-1h5a1 1 0 1 1 0 2H7a1 1 0 0 1-1-1Zm12.5 3.25a1.25 1.25 0 1 1-2.5 0 1.25 1.25 0 0 1 2.5 0Z"
+          clipRule="evenodd"
+        />
+      ) : (
+        <Fragment>
+          <g fill="currentColor">
+            <path d="M18.5 10.25a1.25 1.25 0 1 1-2.5 0 1.25 1.25 0 0 1 2.5 0ZM7 6a1 1 0 0 0 0 2h5a1 1 0 1 0 0-2H7Z" />
+            <path
+              fillRule="evenodd"
+              d="M12.6 2.4h-6c-1.84 0-3.4.64-4.68 1.92C.64 5.6 0 7.16 0 9c0 2.136.42 4.19.845 6.264l.145.711A101.66 101.66 0 0 0 3 24h6v-3h4v3h5.6l2.01-7.92L24 14.97V6.5h-2.61l-2.73-2.63c.04-.24.095-.475.165-.705.07-.23.145-.455.225-.675.04-.1.075-.21.105-.33a1.736 1.736 0 0 0-.48-1.635A1.736 1.736 0 0 0 17.4 0c-.96 0-1.855.21-2.685.63A6.098 6.098 0 0 0 12.6 2.4ZM22 8.5h-1.417l-4.069-3.92.173-1.039c.054-.324.129-.644.225-.958.058-.193.12-.384.186-.573a3.808 3.808 0 0 0-1.48.405 4.1 4.1 0 0 0-1.428 1.198l-.6.787H6.6c-1.32 0-2.368.436-3.266 1.334C2.436 6.632 2 7.681 2 9c0 1.921.378 3.772.808 5.877l.142.702A99.66 99.66 0 0 0 4.507 22H7v-3h8v3h2.044l1.898-7.478L22 13.52V8.5Z"
+              clipRule="evenodd"
+            />
+          </g>
+        </Fragment>
+      )}
+    </Icon>
+  );
+}

packages/ui/src/components/icon/components/x-icon.tsx

@@ -3,7 +3,7 @@ import React, { Fragment } from 'react';
 import { Icon } from '../icon.component.js';
 import { type IconProps } from '../icon.types.js';
 
-export function XIcon({ look = 'filled', 'aria-label': ariaLabel = 'X', copyrightYear = '2024', ...props }: IconProps) {
+export function XIcon({ look = 'filled', 'aria-label': ariaLabel = 'X', copyrightYear = '2023', ...props }: IconProps) {
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
       {look === 'filled' ? (

packages/ui/src/components/icon/index.ts

@@ -41,6 +41,8 @@ export { CardlessCashIcon } from './components/cardless-cash-icon.js';
 export { CartIcon } from './components/cart-icon.js';
 export { ChatIcon } from './components/chat-icon.js';
 export { CheckIcon } from './components/check-icon.js';
+export { ChildCareIcon } from './components/child-care-icon.js';
+export { ChildIcon } from './components/child-icon.js';
 export { CircleIcon } from './components/circle-icon.js';
 export { ClearIcon } from './components/clear-icon.js';
 export { ClockIcon } from './components/clock-icon.js';
@@ -164,6 +166,7 @@ export { PercentIcon } from './components/percent-icon.js';
 export { PersonIcon } from './components/person-icon.js';
 export { PhoneIcon } from './components/phone-icon.js';
 export { PieChartIcon } from './components/pie-chart-icon.js';
+export { PiggyBankIcon } from './components/piggy-bank-icon.js';
 export { PizzaIcon } from './components/pizza-icon.js';
 export { PlaneIcon } from './components/plane-icon.js';
 export { PlayCircleIcon } from './components/play-circle-icon.js';
@@ -236,6 +239,7 @@ export { WindowsNewIcon } from './components/windows-new-icon.js';
 export { WineGlassIcon } from './components/wine-glass-icon.js';
 export { WordFileIcon } from './components/word-file-icon.js';
 export { WriteIcon } from './components/write-icon.js';
+export { XIcon } from './components/x-icon.js';
 export { YammerIcon } from './components/yammer-icon.js';
 export { YoutubeIcon } from './components/youtube-icon.js';
 export { ZipFileIcon } from './components/zip-file-icon.js';

packages/ui/src/components/symbol/components/symbols/x-mark-inverse-symbol.tsx

@@ -0,0 +1,28 @@
+import { clsx } from 'clsx';
+import React from 'react';
+
+import { Symbol } from '../../symbol.component.js';
+import { type SymbolProps } from '../../symbol.types.js';
+
+export const XMarkInverseSymbol = ({
+  'aria-label': ariaLabel = 'X',
+  copyrightYear = '',
+  viewBoxWidth = 32,
+  viewBoxHeight = 32,
+  className,
+  ...props
+}: SymbolProps) => (
+  <Symbol
+    className={clsx('h-[32px] w-[32px]', className)}
+    aria-label={ariaLabel}
+    copyrightYear={copyrightYear}
+    viewBoxWidth={viewBoxWidth}
+    viewBoxHeight={viewBoxHeight}
+    {...props}
+  >
+    <path
+      fill="#fff"
+      d="M44.635 32.455 72.555 0H65.94L41.696 28.18 22.333 0H0l29.28 42.614L0 76.648h6.617l25.601-29.76 20.449 29.76H75L44.634 32.455h.001ZM35.573 42.99l-2.967-4.243L9.001 4.98h10.162l19.05 27.25 2.967 4.243 24.762 35.42H55.78L35.573 42.99v-.002Z"
+    />
+  </Symbol>
+);

packages/ui/src/components/symbol/components/symbols/x-mark-symbol.tsx

@@ -0,0 +1,28 @@
+import { clsx } from 'clsx';
+import React from 'react';
+
+import { Symbol } from '../../symbol.component.js';
+import { type SymbolProps } from '../../symbol.types.js';
+
+export const XMarkSymbol = ({
+  'aria-label': ariaLabel = 'X',
+  copyrightYear = '',
+  viewBoxWidth = 32,
+  viewBoxHeight = 32,
+  className,
+  ...props
+}: SymbolProps) => (
+  <Symbol
+    className={clsx('h-[32px] w-[32px]', className)}
+    aria-label={ariaLabel}
+    copyrightYear={copyrightYear}
+    viewBoxWidth={viewBoxWidth}
+    viewBoxHeight={viewBoxHeight}
+    {...props}
+  >
+    <path
+      fill="#000"
+      d="M44.635 32.455 72.555 0H65.94L41.696 28.18 22.333 0H0l29.28 42.614L0 76.648h6.617l25.601-29.76 20.449 29.76H75L44.634 32.455h.001ZM35.573 42.99l-2.967-4.243L9.001 4.98h10.162l19.05 27.25 2.967 4.243 24.762 35.42H55.78L35.573 42.99v-.002Z"
+    />
+  </Symbol>
+);

packages/ui/src/components/symbol/components/symbols/x-symbol.tsx

@@ -0,0 +1,39 @@
+import { clsx } from 'clsx';
+import React from 'react';
+
+import { Symbol } from '../../symbol.component.js';
+import { type SymbolProps } from '../../symbol.types.js';
+
+export const XSymbol = ({
+  'aria-label': ariaLabel = 'X',
+  copyrightYear = '',
+  viewBoxWidth = 32,
+  viewBoxHeight = 32,
+  className,
+  ...props
+}: SymbolProps) => (
+  <Symbol
+    className={clsx('h-[32px] w-[32px]', className)}
+    aria-label={ariaLabel}
+    copyrightYear={copyrightYear}
+    viewBoxWidth={viewBoxWidth}
+    viewBoxHeight={viewBoxHeight}
+    {...props}
+  >
+    <g clip-path="url(#clip0_1842_16)">
+      <path
+        d="M30 0H2C0.89543 0 0 0.89543 0 2V30C0 31.1046 0.89543 32 2 32H30C31.1046 32 32 31.1046 32 30V2C32 0.89543 31.1046 0 30 0Z"
+        fill="black"
+      />
+      <path
+        d="M18.093 14.1624L26.283 4H24.3422L17.2308 12.8238L11.551 4H5L13.589 17.3432L5 28H6.94088L14.4507 18.6817L20.449 28H27L18.0925 14.1624H18.093ZM15.4347 17.4608L14.5644 16.1321L7.6402 5.55962H10.6213L16.2092 14.0919L17.0795 15.4206L24.3431 26.5113H21.3621L15.4347 17.4613V17.4608Z"
+        fill="white"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_1842_16">
+        <rect width="32" height="32" fill="white" />
+      </clipPath>
+    </defs>
+  </Symbol>
+);

packages/ui/src/components/symbol/index.ts

@@ -51,6 +51,9 @@ export { WBGInternalLogo } from './components/logos/wbg-internal-logo.js';
 export { WBGLogo } from './components/logos/wbg-logo.js';
 export { WBGMultibrandLargeLogo } from './components/logos/wbg-multibrand-large-logo.js';
 export { WBGMultibrandSmallLogo } from './components/logos/wbg-multibrand-small-logo.js';
+export { XSymbol } from './components/symbols/x-symbol.js';
+export { XMarkSymbol } from './components/symbols/x-mark-symbol.js';
+export { XMarkInverseSymbol } from './components/symbols/x-mark-inverse-symbol.js';
 export { YammerSymbol } from './components/symbols/yammer-symbol.js';
 export { YouTubeSymbol } from './components/symbols/youtube-symbol.js';