<KExternalLink> final fixes for icons and margins

[sairina]

@nucleogenesis - it's all fixed now! Here is a summary of what was updated:

In either LTR or RTL languages, the direction of the icon matches the language of the text of the link

English text in English	Arabic text in Arabic

Now: English text in Arabic	(Previously: English text in RTL)

If the user does not choose to open in a new tab, then the link has no left margin.

No margins, no icon - English	No margins, no icon - Arabic

If the user uses openInNewTab, icon appears correctly and has no left margin.

No margins, with icon - English	No margins, with icon - Arabic

[sairina]

Update

I realized I had deleted the icon and iconAfter props completely (instead of just adding the openInNewTab prop). So, I restored that functionality and double-checked that external page icons still appear correctly. See images below. Sorry about that!

Arabic icon	Arabic iconAfter

English icon	English iconAfter

I think this was addressed after some changes to the code - if not, I can take a look at it again!

[indirectlylit]

In both chromium and firefox on mac I see this:

for

        <KExternalLink
          text="external (google)"
          href="https://google.com"
          icon="facility"
          iconAfter="facility"
        />

[indirectlylit]

merging in so we can see everything together. Will file follow-up for cross-component consistency