Merge pull request #795 from WestpacGEL/feature/drop-left-and-drop-ri…

…ght-icons

Feature/784 drop left and drop right icons

.changeset/neat-bananas-turn.md

@@ -0,0 +1,5 @@
+---
+'@westpac/ui': minor
+---
+
+Added left and right directions for the drop arrow icon in ui.

packages/ui/src/components/icon/components/drop-left-icon.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+import { Icon } from '../icon.component.js';
+import { type IconProps } from '../icon.types.js';
+
+export function DropLeftIcon({ 'aria-label': ariaLabel = 'Drop Left', copyrightYear = '2024', ...props }: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      <path d="m8 19 8-7-8-7v14Z" fill="currentColor" />
+    </Icon>
+  );
+}

packages/ui/src/components/icon/components/drop-right-icon.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+import { Icon } from '../icon.component.js';
+import { type IconProps } from '../icon.types.js';
+
+export function DropRightIcon({ 'aria-label': ariaLabel = 'Drop Right', copyrightYear = '2024', ...props }: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      <path d="m16 5-8 7 8 7V5Z" fill="currentColor" />
+    </Icon>
+  );
+}

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

@@ -61,6 +61,8 @@ export { DownloadIcon } from './components/download-icon.js';
 export { DragIcon } from './components/drag-icon.js';
 export { DropDownIcon } from './components/drop-down-icon.js';
 export { DropUpIcon } from './components/drop-up-icon.js';
+export { DropLeftIcon } from './components/drop-left-icon.js';
+export { DropRightIcon } from './components/drop-right-icon.js';
 export { DropboxIcon } from './components/dropbox-icon.js';
 export { EditIcon } from './components/edit-icon.js';
 export { EducationIcon } from './components/education-icon.js';