refactor: rename iconAlign -> iconPosition, and iconVerticalAlign -> iconVerticalAlignment

Author: SpyZzey

pages/action-card/simple.page.tsx

@@ -20,24 +20,24 @@ export default function ActionCardSimplePage() {
               header={<b>EC2 access to S3</b>}
               description="A description of the template/icebreaker"
               iconName="angle-right"
-              iconAlign="right"
-              iconVerticalAlign="top"
+              iconPosition="right"
+              iconVerticalAlignment="top"
               onClick={() => setClickedCard('Basic')}
             ></ActionCard>
             <ActionCard
               header={<b>EC2 access to S3</b>}
               description="A description of the template/icebreaker"
               iconName="arrow-right"
-              iconAlign="right"
-              iconVerticalAlign="top"
+              iconPosition="right"
+              iconVerticalAlignment="top"
               onClick={() => setClickedCard('Basic')}
             ></ActionCard>
             <ActionCard
               header={<b>Account alias (111112222233333)</b>}
               description="Dev/john.doe@amazon.com"
               iconName="angle-right"
-              iconAlign="right"
-              iconVerticalAlign="top"
+              iconPosition="right"
+              iconVerticalAlignment="top"
               onClick={() => setClickedCard('Basic')}
             >
               Logged in 1 minute ago

src/action-card/interfaces.ts

@@ -87,16 +87,16 @@ export interface ActionCardProps extends BaseComponentProps {
   iconAlt?: string;
 
   /**
-   * Specifies the horizontal alignment of the icon.
+   * Specifies the horizontal position of the icon.
    * @default 'left'
    */
-  iconAlign?: ActionCardProps.IconAlign;
+  iconPosition?: ActionCardProps.IconAlign;
 
   /**
    * Specifies the vertical alignment of the icon.
    * @default 'top'
    */
-  iconVerticalAlign?: ActionCardProps.IconVerticalAlign;
+  iconVerticalAlignment?: ActionCardProps.IconVerticalAlign;
 }
 
 export namespace ActionCardProps {

src/action-card/internal.tsx

@@ -27,8 +27,8 @@ const InternalActionCard = React.forwardRef(
       iconUrl,
       iconSvg,
       iconAlt,
-      iconAlign = 'left',
-      iconVerticalAlign = 'top',
+      iconPosition = 'left',
+      iconVerticalAlignment = 'top',
       ...rest
     }: InternalActionCardPropsWithRef,
     ref: React.Ref<ActionCardProps.Ref>
@@ -84,8 +84,8 @@ const InternalActionCard = React.forwardRef(
           styles.root,
           disabled && styles.disabled,
           hasIcon && styles['has-icon'],
-          hasIcon && styles[`icon-align-${iconAlign}`],
-          hasIcon && styles[`icon-vertical-align-${iconVerticalAlign}`],
+          hasIcon && styles[`icon-align-${iconPosition}`],
+          hasIcon && styles[`icon-vertical-align-${iconVerticalAlignment}`],
           baseProps.className
         )}
         onClick={handleClick}
@@ -95,9 +95,9 @@ const InternalActionCard = React.forwardRef(
         aria-disabled={disabled}
         disabled={disabled}
       >
-        {iconAlign === 'left' && iconElement}
+        {iconPosition === 'left' && iconElement}
         {contentElement}
-        {iconAlign === 'right' && iconElement}
+        {iconPosition === 'right' && iconElement}
       </button>
     );
   }