@westpac/ui 0.24.1 → 0.25.0

package/src/components/icon/components/circle-icon.tsx

@@ -0,0 +1,39 @@
+import React, { Fragment } from 'react';
+
+import { Icon } from '../icon.component.js';
+import { type IconProps } from '../icon.types.js';
+
+export function CircleIcon({
+  look = 'filled',
+  'aria-label': ariaLabel = 'Circle',
+  copyrightYear = '2024',
+  ...props
+}: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      {look === 'filled' ? (
+        <Fragment>
+          <svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path
+              fill-rule="evenodd"
+              clip-rule="evenodd"
+              d="M12 24c6.628 0 12-5.373 12-12S18.628 0 12 0 0 5.373 0 12s5.372 12 12 12Z"
+              fill="currentColor"
+            />
+          </svg>
+        </Fragment>
+      ) : (
+        <Fragment>
+          <svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path
+              fill-rule="evenodd"
+              clip-rule="evenodd"
+              d="M24 12c0 6.627-5.372 12-12 12S0 18.627 0 12 5.372 0 12 0s12 5.373 12 12ZM12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2Z"
+              fill="currentColor"
+            />
+          </svg>
+        </Fragment>
+      )}
+    </Icon>
+  );
+}

package/src/components/icon/components/quick-balance-icon.tsx

@@ -12,32 +12,28 @@ export function QuickBalanceIcon({
   return (
     <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
       {look === 'filled' ? (
-        <path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d="M20.9444 22C22.8446 19.877 24 17.0734 24 14C24 7.37258 18.6274 2 12 2C5.37258 2 0 7.37258 0 14C0 17.0734 1.15541 19.877 3.05557 22H20.9444ZM5 14C5 10.134 8.13401 7 12 7C13.3679 7 14.6441 7.39234 15.7223 8.07062L17.468 6.85091C15.9523 5.6899 14.0567 5 12 5C7.02944 5 3 9.02944 3 14C3 15.6376 3.4383 17.1759 4.20465 18.5007C4.48119 18.9788 5.09292 19.1421 5.57098 18.8656C6.04904 18.5891 6.21241 17.9773 5.93586 17.4993C5.34086 16.4707 5 15.2767 5 14ZM19.1511 8.53462L17.9339 10.2849C18.6094 11.3616 19 12.6352 19 14C19 15.2767 18.6591 16.4707 18.0641 17.4993C17.7876 17.9773 17.951 18.5891 18.429 18.8656C18.9071 19.1421 19.5188 18.9788 19.7953 18.5007C20.5617 17.1759 21 15.6376 21 14C21 11.9445 20.3109 10.0499 19.1511 8.53462ZM19 7L14.235 13.8517C14.277 14.4809 14.0745 15.1132 13.5907 15.5909C12.7065 16.4639 11.2815 16.4759 10.4085 15.5909C9.53549 14.7067 9.52424 13.2817 10.4085 12.4094C10.893 11.9309 11.5492 11.7172 12.1777 11.7667L19 7Z"
-          fill="currentColor"
-        />
-      ) : (
-        <Fragment>
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none">
           <path
-            d="M6 14C6 10.6863 8.68629 8 12 8C13.0188 8 13.9783 8.25393 14.8187 8.70196L16.6024 7.45567C15.3008 6.53858 13.7133 6 12 6C7.58172 6 4 9.58172 4 14C4 15.0048 4.18573 15.9686 4.52561 16.8572C4.72291 17.3731 5.30102 17.6313 5.81686 17.434C6.3327 17.2367 6.59094 16.6586 6.39364 16.1428C6.13963 15.4786 6 14.7568 6 14Z"
-            fill="currentColor"
-          />
-          <path
-            d="M18.5477 9.40229L17.3034 11.1914C17.7481 12.0294 18 12.9853 18 14C18 14.7568 17.8604 15.4786 17.6064 16.1428C17.4091 16.6586 17.6673 17.2367 18.1831 17.434C18.699 17.6313 19.2771 17.3731 19.4744 16.8572C19.8143 15.9686 20 15.0048 20 14C20 12.2888 19.4627 10.703 18.5477 9.40229Z"
-            fill="currentColor"
-          />
-          <path
-            d="M14.235 13.8517L19 7L12.1777 11.7667C11.5492 11.7172 10.893 11.9309 10.4085 12.4094C9.52424 13.2817 9.53549 14.7067 10.4085 15.5909C11.2815 16.4759 12.7065 16.4639 13.5907 15.5909C14.0745 15.1132 14.277 14.4809 14.235 13.8517Z"
-            fill="currentColor"
-          />
-          <path
-            fillRule="evenodd"
-            clipRule="evenodd"
-            d="M24 14C24 17.0734 22.8446 19.877 20.9444 22H3.05557C1.15541 19.877 0 17.0734 0 14C0 7.37258 5.37258 2 12 2C18.6274 2 24 7.37258 24 14ZM22 14C22 16.2527 21.2572 18.3282 20.0009 20H3.99908C2.74285 18.3282 2 16.2527 2 14C2 8.47715 6.47715 4 12 4C17.5228 4 22 8.47715 22 14Z"
+            fill-rule="evenodd"
+            d="M24 14c0 3.073-1.155 5.877-3.056 8H3.056A11.955 11.955 0 0 1 0 14C0 7.373 5.373 2 12 2s12 5.373 12 12Zm-3.877-3.88-1.528 1.528c.262.735.405 1.527.405 2.352 0 1.277-.34 2.47-.936 3.5a1 1 0 0 0 1.731 1A8.963 8.963 0 0 0 21 14c0-1.39-.315-2.705-.877-3.88ZM15.88 5.877A9 9 0 0 0 4.204 18.501a1 1 0 0 0 1.732-1.002 7 7 0 0 1 8.416-10.094l1.528-1.528Zm2.827 2.83a1 1 0 0 0-1.414-1.414l-4.775 4.775a2 2 0 1 0 1.414 1.414l4.775-4.775Z"
+            clip-rule="evenodd"
             fill="currentColor"
           />
+        </svg>
+      ) : (
+        <Fragment>
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none">
+            <path
+              d="m17.797 12.446 1.57-1.57c.407.96.633 2.016.633 3.124a7.983 7.983 0 0 1-.526 2.857 1 1 0 1 1-1.868-.714A5.984 5.984 0 0 0 18 14a6.01 6.01 0 0 0-.203-1.554ZM12 6c1.108 0 2.164.225 3.124.633l-1.57 1.57a6 6 0 0 0-7.16 7.94 1 1 0 1 1-1.868.714A8 8 0 0 1 12 6ZM17.293 7.293a1 1 0 1 1 1.414 1.414l-4.775 4.775a2 2 0 1 1-1.414-1.414l4.775-4.775Z"
+              fill="currentColor"
+            />
+            <path
+              fill-rule="evenodd"
+              d="M24 14c0 3.073-1.155 5.877-3.056 8H3.056A11.955 11.955 0 0 1 0 14C0 7.373 5.373 2 12 2s12 5.373 12 12Zm-2 0a9.947 9.947 0 0 1-2 6H4a9.948 9.948 0 0 1-2-6C2 8.477 6.477 4 12 4s10 4.477 10 10Z"
+              clip-rule="evenodd"
+              fill="currentColor"
+            />
+          </svg>
         </Fragment>
       )}
     </Icon>

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

@@ -0,0 +1,30 @@
+import React from 'react';
+
+import { Icon } from '../icon.component.js';
+import { type IconProps } from '../icon.types.js';
+
+export function TargetIcon({
+  look = 'filled',
+  'aria-label': ariaLabel = 'Target',
+  copyrightYear = '2023',
+  ...props
+}: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+        <path
+          d="M16.9431 11.2432C16.9806 11.49 17 11.7427 17 12C17 14.7614 14.7614 17 12 17C9.23858 17 7 14.7614 7 12C7 9.23858 9.23858 7 12 7C12.2821 7 12.5588 7.02337 12.8282 7.06827L13.1617 5.09595C12.7838 5.03284 12.3957 5 12 5C8.13401 5 5 8.13401 5 12C5 15.866 8.13401 19 12 19C15.866 19 19 15.866 19 12C19 11.6291 18.9712 11.265 18.9156 10.9097L16.9431 11.2432Z"
+          fill="currentColor"
+        />
+        <path
+          d="M21.8742 10.4095C21.957 10.9275 22 11.4587 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C12.5662 2 13.1213 2.04705 13.6618 2.13745L13.9953 0.165126C13.3464 0.0565233 12.6798 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24C18.6274 24 24 18.6274 24 12C24 11.3451 23.9475 10.7025 23.8466 10.076L21.8742 10.4095Z"
+          fill="currentColor"
+        />
+        <path
+          d="M14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12C10 10.8954 10.8954 10 12 10C12.1791 10 12.3528 10.0236 12.518 10.0677L15.9861 6.59968L15.5146 4.24268L19.7573 0L20.3129 3.68706L24 4.24264L19.7573 8.48532L17.4003 8.01389L13.9322 11.4819C13.9764 11.6472 14 11.8208 14 12Z"
+          fill="currentColor"
+        />
+      </svg>
+    </Icon>
+  );
+}

package/src/components/icon/index.ts

@@ -31,11 +31,13 @@ export { CalculateIcon } from './components/calculate-icon.js';
 export { CalculatorIcon } from './components/calculator-icon.js';
 export { CalendarIcon } from './components/calendar-icon.js';
 export { CameraIcon } from './components/camera-icon.js';
+export { CancelCardIcon } from './components/cancel-card-icon.js';
 export { CarIcon } from './components/car-icon.js';
 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 { CircleIcon } from './components/circle-icon.js';
 export { ClearIcon } from './components/clear-icon.js';
 export { ClockIcon } from './components/clock-icon.js';
 export { CloseIcon } from './components/close-icon.js';
@@ -201,6 +203,7 @@ export { TabletIcon } from './components/tablet-icon.js';
 export { TagIcon } from './components/tag-icon.js';
 export { TakeoutCoffeeIcon } from './components/takeout-coffee-icon.js';
 export { TakeoutFoodIcon } from './components/takeout-food-icon.js';
+export { TargetIcon } from './components/target-icon.js';
 export { TelephoneIcon } from './components/telephone-icon.js';
 export { ThumbDownIcon } from './components/thumb-down-icon.js';
 export { ThumbUpIcon } from './components/thumb-up-icon.js';

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

@@ -0,0 +1,40 @@
+'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 TargetPictogram({
+  mode = 'duo',
+  viewBoxWidth = 78,
+  viewBoxHeight = 78,
+  'aria-label': ariaLabel = 'Passport',
+  copyrightYear = '2024',
+  className,
+  ...props
+}: PictogramProps) {
+  return (
+    <Pictogram
+      className={clsx('h-13 w-13', className)}
+      viewBoxWidth={viewBoxWidth}
+      viewBoxHeight={viewBoxHeight}
+      aria-label={ariaLabel}
+      copyrightYear={copyrightYear}
+      {...props}
+    >
+      <g xmlns="http://www.w3.org/2000/svg" width="78" height="78" viewBox="0 0 78 78" fill="none">
+        <path
+          className={fill({ mode, outline: true })}
+          d="M68.2174 38C68.2174 34.0195 67.4202 30.2226 65.9746 26.761C65.6783 26.0529 66.0135 25.2376 66.7217 24.9412C67.4313 24.6463 68.2466 24.9802 68.543 25.6897C70.1249 29.481 71.1901 32.0453 72 36.5C74 47.5 66.7217 70.5 40.3333 72C22.6721 72 7 57 7 38C7 20.3388 21.3388 6 39 6C43.3603 6 47.5189 6.87514 51.3103 8.45705C52.0198 8.7534 52.3537 9.56869 52.0588 10.2783C51.7624 10.9864 50.9471 11.3217 50.239 11.0254C46.7774 9.57983 42.9805 8.78261 39 8.78261C22.8748 8.78261 9.78261 21.8748 9.78261 38C9.78261 54.1252 22.8748 67.2174 39 67.2174C55.1252 67.2174 68.2174 54.1252 68.2174 38ZM57.2 39C57.2 35.8682 56.4076 32.9184 55.0118 30.3452C54.6436 29.6662 54.8956 28.815 55.5746 28.4468C56.2536 28.0786 57.1048 28.3306 57.473 29.0096C59.0844 31.9804 60 35.3838 60 39C60 50.5906 50.5906 60 39 60C27.4094 60 18 50.5906 18 39C18 27.4094 27.4094 18 39 18C42.6162 18 46.0196 18.9156 48.9904 20.527C49.6694 20.8952 49.9214 21.7464 49.5532 22.4254C49.185 23.1044 48.3338 23.3564 47.6548 22.9882C45.0816 21.5924 42.1318 20.8 39 20.8C28.955 20.8 20.8 28.955 20.8 39C20.8 49.045 28.955 57.2 39 57.2C49.045 57.2 57.2 49.045 57.2 39Z"
+        />
+        <path
+          className={fill({ mode, highlight: true })}
+          d="M58.99 22.4659L41.2427 40.2132C40.4617 40.9942 39.1953 40.9942 38.4143 40.2132C37.6332 39.4321 37.6332 38.1658 38.4143 37.3848L55.9954 19.8036L54.8491 16.4269C54.6043 15.7058 54.7902 14.9083 55.3287 14.3698L62.5564 7.14212C63.064 6.63443 63.9254 6.81131 64.192 7.47798L66 12L70.7379 13.9798C71.3943 14.254 71.5625 15.1066 71.0595 15.6096L63.7982 22.8708C63.268 23.4011 62.4856 23.5901 61.7717 23.3605L58.99 22.4659ZM45.4286 39C45.4286 42.5486 42.5486 45.4286 39 45.4286C35.4514 45.4286 32.5714 42.5486 32.5714 39C32.5714 35.4514 35.4514 32.5714 39 32.5714C39.7097 32.5714 40.2857 31.9954 40.2857 31.2857C40.2857 30.576 39.7097 30 39 30C34.0333 30 30 34.0333 30 39C30 43.9667 34.0333 48 39 48C43.9667 48 48 43.9667 48 39C48 38.2903 47.424 37.7143 46.7143 37.7143C46.0046 37.7143 45.4286 38.2903 45.4286 39Z"
+        />
+      </g>
+    </Pictogram>
+  );
+}

package/src/components/pictogram/index.ts

@@ -81,6 +81,7 @@ export { ShoppingPictogram } from './components/informative/shopping-pictogram.j
 export { SparklePictogram } from './components/informative/sparkle-pictogram.js';
 export { StarPictogram } from './components/informative/star-pictogram.js';
 export { StopwatchPictogram } from './components/informative/stopwatch-pictogram.js';
+export { TargetPictogram } from './components/informative/target-pictogram.js';
 export { TaxDocumentPictogram } from './components/informative/tax-document-pictogram.js';
 export { TelephoneCallPictogram } from './components/informative/telephone-call-pictogram.js';
 export { ThumbsUpPictogram } from './components/informative/thumbs-up-pictogram.js';