From 1307160ccb02f2262bdb8664f9c51050289f82b8 Mon Sep 17 00:00:00 2001 From: HZ991 Date: Tue, 26 Nov 2024 10:09:14 +1100 Subject: [PATCH 1/7] Add: PassCodeReview resend button clears passcode value --- .../pass-code-view.component.tsx | 24 ++++++++++++++++--- .../pass-code/pass-code.component.tsx | 24 ++++++++++++++++++- .../components/pass-code/pass-code.types.ts | 1 + 3 files changed, 45 insertions(+), 4 deletions(-) diff --git a/packages/ui/src/components/pass-code-view/pass-code-view.component.tsx b/packages/ui/src/components/pass-code-view/pass-code-view.component.tsx index f5c1b364c..25bbba175 100644 --- a/packages/ui/src/components/pass-code-view/pass-code-view.component.tsx +++ b/packages/ui/src/components/pass-code-view/pass-code-view.component.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useRef } from 'react'; import { AlertIcon, PadlockIcon } from '../icon/index.js'; import { Button, Link } from '../index.js'; @@ -31,6 +31,13 @@ export function PassCodeView({ ...props }: PassCodeViewProps) { const styles = passCodeViewStyles({}); + const passcodeRef = useRef<{ updatePasscode: (code: string) => void }>(null); + + const clearPasscode = () => { + if (passcodeRef.current) { + passcodeRef.current.updatePasscode(''); + } + }; return ( @@ -54,9 +61,20 @@ export function PassCodeView({ {errorMessage}

)} - + {resendButtonLabel && ( - )} diff --git a/packages/ui/src/components/pass-code/pass-code.component.tsx b/packages/ui/src/components/pass-code/pass-code.component.tsx index dbcd78ebf..a2f3592fe 100644 --- a/packages/ui/src/components/pass-code/pass-code.component.tsx +++ b/packages/ui/src/components/pass-code/pass-code.component.tsx @@ -1,6 +1,14 @@ 'use client'; -import React, { ChangeEvent, ClipboardEvent, KeyboardEvent, useCallback, useRef, useState } from 'react'; +import React, { + ChangeEvent, + ClipboardEvent, + KeyboardEvent, + useCallback, + useImperativeHandle, + useRef, + useState, +} from 'react'; import { Input } from '../index.js'; @@ -13,6 +21,20 @@ export function PassCode({ length, onComplete, className, ...props }: PassCodePr const styles = passCodeStyles({}); + // Expose a red to update the passcode via a ref + useImperativeHandle(props.innerRef, () => ({ + updatePasscode: (newPasscode: string) => { + const updatedPasscode = + newPasscode === '' + ? Array(length).fill('') + : newPasscode.split('').slice(0, length).concat(Array(length).fill(undefined)).slice(0, length); + setPasscode(updatedPasscode); + if (updatedPasscode.filter(passcode => !passcode).length === 0) { + onComplete(updatedPasscode.join('')); + } + }, + })); + const handleChange = useCallback( (index: number, event: ChangeEvent) => { const value = event.target.value.slice(-1); diff --git a/packages/ui/src/components/pass-code/pass-code.types.ts b/packages/ui/src/components/pass-code/pass-code.types.ts index 422e831ed..189e3b33d 100644 --- a/packages/ui/src/components/pass-code/pass-code.types.ts +++ b/packages/ui/src/components/pass-code/pass-code.types.ts @@ -4,6 +4,7 @@ import { type VariantProps } from 'tailwind-variants'; import { styles } from './pass-code.styles.js'; export type PassCodeProps = { + innerRef?: React.Ref<{ updatePasscode: (newPasscode: string) => void }>; length: number; onComplete: (passcode: string) => void; } & VariantProps & From 00d0c3594a6623ba9c0b80b42013f9f243719137 Mon Sep 17 00:00:00 2001 From: HZ991 Date: Wed, 27 Nov 2024 15:15:34 +1100 Subject: [PATCH 2/7] Added: child & child-care icons --- .changeset/tasty-ducks-grab.md | 5 +++++ packages/ui/assets/icons/filled/child-care-filled.svg | 1 + packages/ui/assets/icons/filled/child-filled.svg | 1 + packages/ui/assets/icons/outlined/child-care-outlined.svg | 1 + packages/ui/assets/icons/outlined/child-outlined.svg | 1 + .../ui/src/components/icon/components/child-care-icon.tsx | 2 +- packages/ui/src/components/icon/components/child-icon.tsx | 2 +- packages/ui/src/components/icon/index.ts | 2 ++ 8 files changed, 13 insertions(+), 2 deletions(-) create mode 100644 .changeset/tasty-ducks-grab.md create mode 100644 packages/ui/assets/icons/filled/child-care-filled.svg create mode 100644 packages/ui/assets/icons/filled/child-filled.svg create mode 100644 packages/ui/assets/icons/outlined/child-care-outlined.svg create mode 100644 packages/ui/assets/icons/outlined/child-outlined.svg diff --git a/.changeset/tasty-ducks-grab.md b/.changeset/tasty-ducks-grab.md new file mode 100644 index 000000000..4a6cbc9fb --- /dev/null +++ b/.changeset/tasty-ducks-grab.md @@ -0,0 +1,5 @@ +--- +'@westpac/ui': minor +--- + +added: child and child-care icons diff --git a/packages/ui/assets/icons/filled/child-care-filled.svg b/packages/ui/assets/icons/filled/child-care-filled.svg new file mode 100644 index 000000000..60fd6a92d --- /dev/null +++ b/packages/ui/assets/icons/filled/child-care-filled.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/ui/assets/icons/filled/child-filled.svg b/packages/ui/assets/icons/filled/child-filled.svg new file mode 100644 index 000000000..1bd56e5a7 --- /dev/null +++ b/packages/ui/assets/icons/filled/child-filled.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/ui/assets/icons/outlined/child-care-outlined.svg b/packages/ui/assets/icons/outlined/child-care-outlined.svg new file mode 100644 index 000000000..23784c00e --- /dev/null +++ b/packages/ui/assets/icons/outlined/child-care-outlined.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/ui/assets/icons/outlined/child-outlined.svg b/packages/ui/assets/icons/outlined/child-outlined.svg new file mode 100644 index 000000000..1bd56e5a7 --- /dev/null +++ b/packages/ui/assets/icons/outlined/child-outlined.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/ui/src/components/icon/components/child-care-icon.tsx b/packages/ui/src/components/icon/components/child-care-icon.tsx index 6072a8ab3..c0c028e36 100644 --- a/packages/ui/src/components/icon/components/child-care-icon.tsx +++ b/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 ( diff --git a/packages/ui/src/components/icon/components/child-icon.tsx b/packages/ui/src/components/icon/components/child-icon.tsx index b9a2a775e..765160290 100644 --- a/packages/ui/src/components/icon/components/child-icon.tsx +++ b/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 ( Date: Thu, 28 Nov 2024 15:13:13 +1100 Subject: [PATCH 3/7] add: icon and symbols for x; removed: twitter symbol and icon --- .changeset/perfect-crabs-smash.md | 5 ++ .changeset/wet-rice-love.md | 5 ++ .../ui/assets/icons/filled/twitter-filled.svg | 1 - packages/ui/assets/icons/filled/x-filled.svg | 1 + .../icons/outlined/twitter-outlined.svg | 1 - .../ui/assets/icons/outlined/x-outlined.svg | 1 + .../icon/components/twitter-icon.tsx | 49 ------------------- .../src/components/icon/components/x-icon.tsx | 2 +- packages/ui/src/components/icon/index.ts | 2 +- .../components/symbols/twitter-symbol.tsx | 31 ------------ .../symbols/x-mark-inverse-symbol.tsx | 28 +++++++++++ .../components/symbols/x-mark-symbol.tsx | 28 +++++++++++ .../symbol/components/symbols/x-symbol.tsx | 39 +++++++++++++++ packages/ui/src/components/symbol/index.ts | 4 +- 14 files changed, 112 insertions(+), 85 deletions(-) create mode 100644 .changeset/perfect-crabs-smash.md create mode 100644 .changeset/wet-rice-love.md delete mode 100644 packages/ui/assets/icons/filled/twitter-filled.svg create mode 100644 packages/ui/assets/icons/filled/x-filled.svg delete mode 100644 packages/ui/assets/icons/outlined/twitter-outlined.svg create mode 100644 packages/ui/assets/icons/outlined/x-outlined.svg delete mode 100644 packages/ui/src/components/icon/components/twitter-icon.tsx delete mode 100644 packages/ui/src/components/symbol/components/symbols/twitter-symbol.tsx create mode 100644 packages/ui/src/components/symbol/components/symbols/x-mark-inverse-symbol.tsx create mode 100644 packages/ui/src/components/symbol/components/symbols/x-mark-symbol.tsx create mode 100644 packages/ui/src/components/symbol/components/symbols/x-symbol.tsx diff --git a/.changeset/perfect-crabs-smash.md b/.changeset/perfect-crabs-smash.md new file mode 100644 index 000000000..f76a82c7f --- /dev/null +++ b/.changeset/perfect-crabs-smash.md @@ -0,0 +1,5 @@ +--- +'@westpac/ui': minor +--- + +added: x-symbol and logo diff --git a/.changeset/wet-rice-love.md b/.changeset/wet-rice-love.md new file mode 100644 index 000000000..da612d397 --- /dev/null +++ b/.changeset/wet-rice-love.md @@ -0,0 +1,5 @@ +--- +'@westpac/ui': minor +--- + +remove: twitter symbol and icon diff --git a/packages/ui/assets/icons/filled/twitter-filled.svg b/packages/ui/assets/icons/filled/twitter-filled.svg deleted file mode 100644 index c61d3ea2a..000000000 --- a/packages/ui/assets/icons/filled/twitter-filled.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/packages/ui/assets/icons/filled/x-filled.svg b/packages/ui/assets/icons/filled/x-filled.svg new file mode 100644 index 000000000..05510976b --- /dev/null +++ b/packages/ui/assets/icons/filled/x-filled.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/ui/assets/icons/outlined/twitter-outlined.svg b/packages/ui/assets/icons/outlined/twitter-outlined.svg deleted file mode 100644 index c6a4abc2b..000000000 --- a/packages/ui/assets/icons/outlined/twitter-outlined.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/packages/ui/assets/icons/outlined/x-outlined.svg b/packages/ui/assets/icons/outlined/x-outlined.svg new file mode 100644 index 000000000..7e01bc199 --- /dev/null +++ b/packages/ui/assets/icons/outlined/x-outlined.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/ui/src/components/icon/components/twitter-icon.tsx b/packages/ui/src/components/icon/components/twitter-icon.tsx deleted file mode 100644 index 9ae5a0f64..000000000 --- a/packages/ui/src/components/icon/components/twitter-icon.tsx +++ /dev/null @@ -1,49 +0,0 @@ -import React, { Fragment } from 'react'; - -import { Icon } from '../icon.component.js'; -import { type IconProps } from '../icon.types.js'; - -export function TwitterIcon({ - look = 'filled', - 'aria-label': ariaLabel = 'Twitter', - copyrightYear = '2023', - ...props -}: IconProps) { - return ( - - {look === 'filled' ? ( - - - - - - - - - - - ) : ( - - - - - - - - - - - - )} - - ); -} diff --git a/packages/ui/src/components/icon/components/x-icon.tsx b/packages/ui/src/components/icon/components/x-icon.tsx index 4dccc737b..ff1e9e871 100644 --- a/packages/ui/src/components/icon/components/x-icon.tsx +++ b/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 ( {look === 'filled' ? ( diff --git a/packages/ui/src/components/icon/index.ts b/packages/ui/src/components/icon/index.ts index de985eea4..002e7275a 100755 --- a/packages/ui/src/components/icon/index.ts +++ b/packages/ui/src/components/icon/index.ts @@ -220,7 +220,6 @@ export { TransferIcon } from './components/transfer-icon.js'; export { TransportIcon } from './components/transport-icon.js'; export { TravelExploreIcon } from './components/travel-explore-icon.js'; export { TuneIcon } from './components/tune-icon.js'; -export { TwitterIcon } from './components/twitter-icon.js'; export { UmbrellaIcon } from './components/umbrella-icon.js'; export { UploadIcon } from './components/upload-icon.js'; export { VerifiedIcon } from './components/verified-icon.js'; @@ -238,6 +237,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'; diff --git a/packages/ui/src/components/symbol/components/symbols/twitter-symbol.tsx b/packages/ui/src/components/symbol/components/symbols/twitter-symbol.tsx deleted file mode 100644 index f71cac724..000000000 --- a/packages/ui/src/components/symbol/components/symbols/twitter-symbol.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import { clsx } from 'clsx'; -import React from 'react'; - -import { Symbol } from '../../symbol.component.js'; -import { type SymbolProps } from '../../symbol.types.js'; - -export const TwitterSymbol = ({ - 'aria-label': ariaLabel = 'Twitter', - copyrightYear = '', - viewBoxWidth = 32, - viewBoxHeight = 32, - className, - ...props -}: SymbolProps) => ( - - - - - - -); diff --git a/packages/ui/src/components/symbol/components/symbols/x-mark-inverse-symbol.tsx b/packages/ui/src/components/symbol/components/symbols/x-mark-inverse-symbol.tsx new file mode 100644 index 000000000..aca91b184 --- /dev/null +++ b/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) => ( + + + +); diff --git a/packages/ui/src/components/symbol/components/symbols/x-mark-symbol.tsx b/packages/ui/src/components/symbol/components/symbols/x-mark-symbol.tsx new file mode 100644 index 000000000..c16207680 --- /dev/null +++ b/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) => ( + + + +); diff --git a/packages/ui/src/components/symbol/components/symbols/x-symbol.tsx b/packages/ui/src/components/symbol/components/symbols/x-symbol.tsx new file mode 100644 index 000000000..3f59235f1 --- /dev/null +++ b/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) => ( + + + + + + + + + + + +); diff --git a/packages/ui/src/components/symbol/index.ts b/packages/ui/src/components/symbol/index.ts index ad142f0e7..43638eb56 100644 --- a/packages/ui/src/components/symbol/index.ts +++ b/packages/ui/src/components/symbol/index.ts @@ -40,7 +40,6 @@ export { STGDragonLogo } from './components/logos/stg-dragon-logo.js'; export { STGLogo } from './components/logos/stg-logo.js'; export { STGMultibrandLargeLogo } from './components/logos/stg-multibrand-large-logo.js'; export { STGMultibrandSmallLogo } from './components/logos/stg-multibrand-small-logo.js'; -export { TwitterSymbol } from './components/symbols/twitter-symbol.js'; export { VisaBlueSymbol } from './components/symbols/visa-blue-symbol.js'; export { VisaSymbol } from './components/symbols/visa-symbol.js'; export { VisaWhiteSymbol } from './components/symbols/visa-white-symbol.js'; @@ -51,6 +50,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'; From 30c592d2dd2dc737294888eb9f565104d26ba3f6 Mon Sep 17 00:00:00 2001 From: HZ991 Date: Thu, 28 Nov 2024 16:49:09 +1100 Subject: [PATCH 4/7] fix bug: use client added to pass code view --- .../src/components/pass-code-view/pass-code-view.component.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/ui/src/components/pass-code-view/pass-code-view.component.tsx b/packages/ui/src/components/pass-code-view/pass-code-view.component.tsx index 25bbba175..55190e781 100644 --- a/packages/ui/src/components/pass-code-view/pass-code-view.component.tsx +++ b/packages/ui/src/components/pass-code-view/pass-code-view.component.tsx @@ -1,3 +1,4 @@ +'use client'; import React, { useRef } from 'react'; import { AlertIcon, PadlockIcon } from '../icon/index.js'; From 3e3438522ba80c0e1f91515797cf914dcad0ddf8 Mon Sep 17 00:00:00 2001 From: HZ991 Date: Tue, 3 Dec 2024 10:59:59 +1100 Subject: [PATCH 5/7] added: piggy bank icon --- .../assets/icons/filled/piggy-bank-filled.svg | 3 ++ .../icons/outlined/piggy-bank-outlined.svg | 6 ++++ .../icon/components/piggy-bank-icon.tsx | 35 +++++++++++++++++++ packages/ui/src/components/icon/index.ts | 1 + 4 files changed, 45 insertions(+) create mode 100644 packages/ui/assets/icons/filled/piggy-bank-filled.svg create mode 100644 packages/ui/assets/icons/outlined/piggy-bank-outlined.svg create mode 100644 packages/ui/src/components/icon/components/piggy-bank-icon.tsx diff --git a/packages/ui/assets/icons/filled/piggy-bank-filled.svg b/packages/ui/assets/icons/filled/piggy-bank-filled.svg new file mode 100644 index 000000000..b36d30a70 --- /dev/null +++ b/packages/ui/assets/icons/filled/piggy-bank-filled.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/packages/ui/assets/icons/outlined/piggy-bank-outlined.svg b/packages/ui/assets/icons/outlined/piggy-bank-outlined.svg new file mode 100644 index 000000000..083618538 --- /dev/null +++ b/packages/ui/assets/icons/outlined/piggy-bank-outlined.svg @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/packages/ui/src/components/icon/components/piggy-bank-icon.tsx b/packages/ui/src/components/icon/components/piggy-bank-icon.tsx new file mode 100644 index 000000000..d022aa9af --- /dev/null +++ b/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 ( + + {look === 'filled' ? ( + + ) : ( + + + + + + + )} + + ); +} diff --git a/packages/ui/src/components/icon/index.ts b/packages/ui/src/components/icon/index.ts index 002e7275a..bd17ab61f 100755 --- a/packages/ui/src/components/icon/index.ts +++ b/packages/ui/src/components/icon/index.ts @@ -166,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'; From a2bd63c34ebb30b8ab242465e506ffc85e21e888 Mon Sep 17 00:00:00 2001 From: HZ991 Date: Tue, 3 Dec 2024 15:45:25 +1100 Subject: [PATCH 6/7] reverted: removal of twitter icon --- .changeset/silver-coins-press.md | 5 ++ .../ui/assets/icons/filled/twitter-filled.svg | 1 + .../icons/outlined/twitter-outlined.svg | 1 + .../icon/components/twitter-icon.tsx | 49 +++++++++++++++++++ packages/ui/src/components/icon/index.ts | 1 + 5 files changed, 57 insertions(+) create mode 100644 .changeset/silver-coins-press.md create mode 100644 packages/ui/assets/icons/filled/twitter-filled.svg create mode 100644 packages/ui/assets/icons/outlined/twitter-outlined.svg create mode 100644 packages/ui/src/components/icon/components/twitter-icon.tsx diff --git a/.changeset/silver-coins-press.md b/.changeset/silver-coins-press.md new file mode 100644 index 000000000..dbea7563f --- /dev/null +++ b/.changeset/silver-coins-press.md @@ -0,0 +1,5 @@ +--- +'@westpac/ui': minor +--- + +reverted deletion of twitter icon diff --git a/packages/ui/assets/icons/filled/twitter-filled.svg b/packages/ui/assets/icons/filled/twitter-filled.svg new file mode 100644 index 000000000..c61d3ea2a --- /dev/null +++ b/packages/ui/assets/icons/filled/twitter-filled.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/ui/assets/icons/outlined/twitter-outlined.svg b/packages/ui/assets/icons/outlined/twitter-outlined.svg new file mode 100644 index 000000000..c6a4abc2b --- /dev/null +++ b/packages/ui/assets/icons/outlined/twitter-outlined.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/ui/src/components/icon/components/twitter-icon.tsx b/packages/ui/src/components/icon/components/twitter-icon.tsx new file mode 100644 index 000000000..9ae5a0f64 --- /dev/null +++ b/packages/ui/src/components/icon/components/twitter-icon.tsx @@ -0,0 +1,49 @@ +import React, { Fragment } from 'react'; + +import { Icon } from '../icon.component.js'; +import { type IconProps } from '../icon.types.js'; + +export function TwitterIcon({ + look = 'filled', + 'aria-label': ariaLabel = 'Twitter', + copyrightYear = '2023', + ...props +}: IconProps) { + return ( + + {look === 'filled' ? ( + + + + + + + + + + + ) : ( + + + + + + + + + + + + )} + + ); +} diff --git a/packages/ui/src/components/icon/index.ts b/packages/ui/src/components/icon/index.ts index bd17ab61f..a3c40d191 100755 --- a/packages/ui/src/components/icon/index.ts +++ b/packages/ui/src/components/icon/index.ts @@ -221,6 +221,7 @@ export { TransferIcon } from './components/transfer-icon.js'; export { TransportIcon } from './components/transport-icon.js'; export { TravelExploreIcon } from './components/travel-explore-icon.js'; export { TuneIcon } from './components/tune-icon.js'; +export { TwitterIcon } from './components/twitter-icon.js'; export { UmbrellaIcon } from './components/umbrella-icon.js'; export { UploadIcon } from './components/upload-icon.js'; export { VerifiedIcon } from './components/verified-icon.js'; From b018d3c36991198cda19ab047398bb90bae85f51 Mon Sep 17 00:00:00 2001 From: HZ991 Date: Tue, 3 Dec 2024 15:45:25 +1100 Subject: [PATCH 7/7] reverted: removal of twitter icon --- .changeset/silver-coins-press.md | 5 ++ .../ui/assets/icons/filled/twitter-filled.svg | 1 + .../icons/outlined/twitter-outlined.svg | 1 + .../icon/components/twitter-icon.tsx | 49 +++++++++++++++++++ packages/ui/src/components/icon/index.ts | 1 + .../components/symbols/twitter-symbol.tsx | 31 ++++++++++++ packages/ui/src/components/symbol/index.ts | 1 + 7 files changed, 89 insertions(+) create mode 100644 .changeset/silver-coins-press.md create mode 100644 packages/ui/assets/icons/filled/twitter-filled.svg create mode 100644 packages/ui/assets/icons/outlined/twitter-outlined.svg create mode 100644 packages/ui/src/components/icon/components/twitter-icon.tsx create mode 100644 packages/ui/src/components/symbol/components/symbols/twitter-symbol.tsx diff --git a/.changeset/silver-coins-press.md b/.changeset/silver-coins-press.md new file mode 100644 index 000000000..dbea7563f --- /dev/null +++ b/.changeset/silver-coins-press.md @@ -0,0 +1,5 @@ +--- +'@westpac/ui': minor +--- + +reverted deletion of twitter icon diff --git a/packages/ui/assets/icons/filled/twitter-filled.svg b/packages/ui/assets/icons/filled/twitter-filled.svg new file mode 100644 index 000000000..c61d3ea2a --- /dev/null +++ b/packages/ui/assets/icons/filled/twitter-filled.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/ui/assets/icons/outlined/twitter-outlined.svg b/packages/ui/assets/icons/outlined/twitter-outlined.svg new file mode 100644 index 000000000..c6a4abc2b --- /dev/null +++ b/packages/ui/assets/icons/outlined/twitter-outlined.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/ui/src/components/icon/components/twitter-icon.tsx b/packages/ui/src/components/icon/components/twitter-icon.tsx new file mode 100644 index 000000000..9ae5a0f64 --- /dev/null +++ b/packages/ui/src/components/icon/components/twitter-icon.tsx @@ -0,0 +1,49 @@ +import React, { Fragment } from 'react'; + +import { Icon } from '../icon.component.js'; +import { type IconProps } from '../icon.types.js'; + +export function TwitterIcon({ + look = 'filled', + 'aria-label': ariaLabel = 'Twitter', + copyrightYear = '2023', + ...props +}: IconProps) { + return ( + + {look === 'filled' ? ( + + + + + + + + + + + ) : ( + + + + + + + + + + + + )} + + ); +} diff --git a/packages/ui/src/components/icon/index.ts b/packages/ui/src/components/icon/index.ts index bd17ab61f..a3c40d191 100755 --- a/packages/ui/src/components/icon/index.ts +++ b/packages/ui/src/components/icon/index.ts @@ -221,6 +221,7 @@ export { TransferIcon } from './components/transfer-icon.js'; export { TransportIcon } from './components/transport-icon.js'; export { TravelExploreIcon } from './components/travel-explore-icon.js'; export { TuneIcon } from './components/tune-icon.js'; +export { TwitterIcon } from './components/twitter-icon.js'; export { UmbrellaIcon } from './components/umbrella-icon.js'; export { UploadIcon } from './components/upload-icon.js'; export { VerifiedIcon } from './components/verified-icon.js'; diff --git a/packages/ui/src/components/symbol/components/symbols/twitter-symbol.tsx b/packages/ui/src/components/symbol/components/symbols/twitter-symbol.tsx new file mode 100644 index 000000000..f71cac724 --- /dev/null +++ b/packages/ui/src/components/symbol/components/symbols/twitter-symbol.tsx @@ -0,0 +1,31 @@ +import { clsx } from 'clsx'; +import React from 'react'; + +import { Symbol } from '../../symbol.component.js'; +import { type SymbolProps } from '../../symbol.types.js'; + +export const TwitterSymbol = ({ + 'aria-label': ariaLabel = 'Twitter', + copyrightYear = '', + viewBoxWidth = 32, + viewBoxHeight = 32, + className, + ...props +}: SymbolProps) => ( + + + + + + +); diff --git a/packages/ui/src/components/symbol/index.ts b/packages/ui/src/components/symbol/index.ts index c36fdf88f..3a6f341e8 100644 --- a/packages/ui/src/components/symbol/index.ts +++ b/packages/ui/src/components/symbol/index.ts @@ -40,6 +40,7 @@ export { STGDragonLogo } from './components/logos/stg-dragon-logo.js'; export { STGLogo } from './components/logos/stg-logo.js'; export { STGMultibrandLargeLogo } from './components/logos/stg-multibrand-large-logo.js'; export { STGMultibrandSmallLogo } from './components/logos/stg-multibrand-small-logo.js'; +export { TwitterSymbol } from './components/symbols/twitter-symbol.js'; export { VisaBlueSymbol } from './components/symbols/visa-blue-symbol.js'; export { VisaSymbol } from './components/symbols/visa-symbol.js'; export { VisaWhiteSymbol } from './components/symbols/visa-white-symbol.js';