[v1] feat(rtl-arrow): Fix arrows used for CTA's when in RTL

packages/web-components/src/component-mixins/cta/cta.ts

@@ -11,6 +11,7 @@ import { html } from 'lit-element';
 import settings from 'carbon-components/es/globals/js/settings.js';
 import ArrowDown20 from '../../internal/vendor/@carbon/web-components/icons/arrow--down/20.js';
 import ArrowRight20 from '../../internal/vendor/@carbon/web-components/icons/arrow--right/20.js';
+import ArrowLeft20 from '../../internal/vendor/@carbon/web-components/icons/arrow--left/20.js';
 import Download20 from '../../internal/vendor/@carbon/web-components/icons/download/20.js';
 import Launch20 from '../../internal/vendor/@carbon/web-components/icons/launch/20.js';
 import PlayOutline20 from '../../internal/vendor/@carbon/web-components/icons/play--outline/20.js';
@@ -33,6 +34,7 @@ const { stablePrefix: ddsPrefix } = ddsSettings;
  */
 export const icons = {
   [CTA_TYPE.LOCAL]: ArrowRight20,
+  [`${CTA_TYPE.LOCAL}-rtl`]: ArrowLeft20,
   [CTA_TYPE.DOWNLOAD]: Download20,
   [CTA_TYPE.EXTERNAL]: Launch20,
   [CTA_TYPE.NEW_TAB]: NewTab20,
@@ -118,10 +120,11 @@ const CTAMixin = <T extends Constructor<HTMLElement>>(Base: T) => {
      */
     _renderIcon() {
       const { ctaType } = this;
+      const icon = icons[`${ctaType}-${document.dir}`] ?? icons[ctaType];
       return html`
         <slot name="icon">
           <span class="bx--visually-hidden">${ariaLabels[ctaType]}</span>
-          ${icons[ctaType]?.({
+          ${icon?.({
             class: `${prefix}--card__cta ${ddsPrefix}-ce--cta__icon`,
           })}
         </slot>

packages/web-components/src/components/button-group/__stories__/button-group.stories.ts

@@ -10,6 +10,7 @@
 import { number, select, text } from '@storybook/addon-knobs';
 import { html } from 'lit-element';
 import ArrowRight20 from '../../../internal/vendor/@carbon/web-components/icons/arrow--right/20.js';
+import ArrowLeft20 from '../../../internal/vendor/@carbon/web-components/icons/arrow--left/20';
 import ArrowDown20 from '../../../internal/vendor/@carbon/web-components/icons/arrow--down/20.js';
 import Pdf20 from '../../../internal/vendor/@carbon/web-components/icons/PDF/20.js';
 import readme from './README.stories.mdx';
@@ -18,15 +19,18 @@ import textNullable from '../../../../.storybook/knob-text-nullable';
 
 const iconMap = {
   ArrowRight20: ArrowRight20({ slot: 'icon' }),
+  ArrowLeft20: ArrowLeft20({ slot: 'icon' }),
   ArrowDown20: ArrowDown20({ slot: 'icon' }),
   Pdf20: Pdf20({ slot: 'icon' }),
 };
 
-const iconOptions = {
-  Default: null,
-  'Arrow Right': 'ArrowRight20',
-  'Arrow Down': 'ArrowDown20',
-  PDF: 'Pdf20',
+const iconOptions = () => {
+  return {
+    Default: null,
+    'Arrow Inline End': document.dir === 'rtl' ? 'ArrowLeft20' : 'ArrowRight20',
+    'Arrow Down': 'ArrowDown20',
+    PDF: 'Pdf20',
+  };
 };
 
 export const Default = (args) => {
@@ -67,7 +71,7 @@ export default {
           copy: text(`Button ${i + 1}`, `Button ${i + 1}`),
           renderIcon:
             iconMap[
-              select(`Icon ${i + 1}`, iconOptions, iconOptions.Default) ?? 0
+              select(`Icon ${i + 1}`, iconOptions(), iconOptions().Default) ?? 0
             ],
         })),
       }),

packages/web-components/src/components/callout-quote/__stories__/callout-quote.stories.ts

@@ -9,7 +9,6 @@
 
 import '../index';
 import '../callout-link-with-icon';
-import ArrowRight20 from '../../../internal/vendor/@carbon/web-components/icons/arrow--right/20.js';
 import { html } from 'lit-element';
 import { select } from '@storybook/addon-knobs';
 import { QUOTE_TYPES } from '../../quote/quote';
@@ -37,8 +36,11 @@ export const Default = (args) => {
       <dds-quote-source-bottom-copy>
         ${sourceBottomCopy}
       </dds-quote-source-bottom-copy>
-      <dds-callout-link-with-icon slot="footer" href="https://example.com">
-        Link with icon ${ArrowRight20({ slot: 'icon' })}
+      <dds-callout-link-with-icon
+        slot="footer"
+        href="https://example.com"
+        cta-type="local">
+        Link with icon
       </dds-callout-link-with-icon>
     </dds-callout-quote>
   `;

packages/web-components/src/components/card-in-card/__stories__/card-in-card.stories.ts

@@ -12,7 +12,6 @@ import '../../image/image';
 import '../index';
 import '../../cta/card-cta-footer';
 import '../../cta/video-cta-container';
-import ArrowRight20 from '../../../internal/vendor/@carbon/web-components/icons/arrow--right/20.js';
 import { html } from 'lit-element';
 import ifNonNull from '../../../internal/vendor/@carbon/web-components/globals/directives/if-non-null.js';
 import { boolean } from '@storybook/addon-knobs';
@@ -40,7 +39,7 @@ export const Default = (args) => {
     `;
   }
   return html`
-    <dds-card-in-card href=${ifNonNull(href || undefined)}>
+    <dds-card-in-card href=${ifNonNull(href || undefined)} cta-type="local">
       <dds-card-in-card-image
         slot="image"
         alt="${ifNonNull(alt)}"
@@ -54,9 +53,7 @@ export const Default = (args) => {
       </dds-card-in-card-image>
       <dds-card-eyebrow>${eyebrow}</dds-card-eyebrow>
       <dds-card-heading>${heading}</dds-card-heading>
-      <dds-card-cta-footer>
-        ${ArrowRight20({ slot: 'icon' })}
-      </dds-card-cta-footer>
+      <dds-card-cta-footer></dds-card-cta-footer>
     </dds-card-in-card>
   `;
 };

packages/web-components/src/components/card-link/__stories__/card-link.stories.ts

@@ -10,6 +10,7 @@
 import { boolean } from '@storybook/addon-knobs';
 import { html } from 'lit-element';
 import ArrowRight20 from '../../../internal/vendor/@carbon/web-components/icons/arrow--right/20.js';
+import ArrowLeft20 from '../../../internal/vendor/@carbon/web-components/icons/arrow--left/20';
 import Error20 from '../../../internal/vendor/@carbon/web-components/icons/error/20.js';
 import ifNonNull from '../../../internal/vendor/@carbon/web-components/globals/directives/if-non-null.js';
 import readme from './README.stories.mdx';
@@ -23,7 +24,11 @@ export const Default = (args) => {
       <dds-card-link-heading>${heading}</dds-card-link-heading>
       ${copy ? html` <p>${copy}</p> ` : ``}
       <dds-card-footer ?disabled=${disabled}>
-        ${disabled ? Error20({ slot: 'icon' }) : ArrowRight20({ slot: 'icon' })}
+        ${disabled
+          ? Error20({ slot: 'icon' })
+          : document.dir === 'rtl'
+          ? ArrowLeft20({ slot: 'icon' })
+          : ArrowRight20({ slot: 'icon' })}
       </dds-card-footer>
     </dds-card-link>
   `;

packages/web-components/src/components/card-section-carousel/__stories__/card-section-carousel.stories.ts

@@ -10,6 +10,7 @@
 import { html } from 'lit-element';
 import ifNonNull from '../../../internal/vendor/@carbon/web-components/globals/directives/if-non-null.js';
 import ArrowRight20 from '../../../internal/vendor/@carbon/web-components/icons/arrow--right/20.js';
+import ArrowLeft20 from '../../../internal/vendor/@carbon/web-components/icons/arrow--left/20.js';
 import '../index';
 import styles from './card-section-carousel.stories.scss';
 import readme from './README.stories.mdx';
@@ -31,7 +32,11 @@ const Card = ({
   <dds-card href="${ifNonNull(href)}">
     <dds-card-heading>${heading}</dds-card-heading>
     <p>${copy}</p>
-    <dds-card-footer> ${ArrowRight20({ slot: 'icon' })} </dds-card-footer>
+    <dds-card-footer>
+      ${document.dir === 'rtl'
+        ? ArrowLeft20({ slot: 'icon' })
+        : ArrowRight20({ slot: 'icon' })}
+    </dds-card-footer>
   </dds-card>
 `;
 
@@ -45,8 +50,11 @@ export const Default = () => {
         >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et
         ultricies est.
       </dds-content-section-copy>
-      <dds-link-with-icon slot="footer" href="${ifNonNull(hrefDefault)}">
-        Link text ${ArrowRight20({ slot: 'icon' })}
+      <dds-link-with-icon
+        slot="footer"
+        href="${ifNonNull(hrefDefault)}"
+        cta-type="local">
+        Link text
       </dds-link-with-icon>
       <dds-carousel>
         ${Card()}${Card({ copy: copyOdd })}${Card()}${Card({

packages/web-components/src/components/card-section-offset/__stories__/card-section-offset.stories.ts

@@ -8,7 +8,6 @@
  */
 
 import { html } from 'lit-element';
-import ArrowRight20 from '../../../internal/vendor/@carbon/web-components/icons/arrow--right/20';
 import ifNonNull from '../../../internal/vendor/@carbon/web-components/globals/directives/if-non-null.js';
 import { select } from '@storybook/addon-knobs';
 import readme from './README.stories.mdx';
@@ -40,7 +39,7 @@ const knobNamesForType = {
 };
 
 const defaultCardGroupItem = html`
-  <dds-card-group-item href="https://example.com">
+  <dds-card-group-item href="https://example.com" cta-type="local">
     <dds-card-eyebrow>Label</dds-card-eyebrow>
     <dds-card-heading
       >Lorem ipsum dolor sit amet, pro graeco tibique an</dds-card-heading
@@ -49,9 +48,7 @@ const defaultCardGroupItem = html`
       Lorem ipsum dolor sit amet, habeo iisque eum ex. Vel postea singulis
       democritum ex. Illud ullum graecis
     </p>
-    <dds-card-cta-footer slot="footer">
-      ${ArrowRight20({ slot: 'icon' })}
-    </dds-card-cta-footer>
+    <dds-card-cta-footer></dds-card-cta-footer>
   </dds-card-group-item>
 `;
 

packages/web-components/src/components/card/__stories__/card.stories.ts

@@ -13,6 +13,7 @@ import '../../../internal/vendor/@carbon/web-components/components/tag/tag.js';
 import '../index';
 import { boolean, select } from '@storybook/addon-knobs';
 import ArrowRight20 from '../../../internal/vendor/@carbon/web-components/icons/arrow--right/20';
+import ArrowLeft20 from '../../../internal/vendor/@carbon/web-components/icons/arrow--left/20';
 import { html } from 'lit-element';
 import ifNonNull from '../../../internal/vendor/@carbon/web-components/globals/directives/if-non-null.js';
 import imgXlg4x3 from '../../../../../storybook-images/assets/1312/fpo--4x3--1312x984--003.jpg';
@@ -64,7 +65,9 @@ export const Default = (args) => {
       ${copy ? html` <p>${copy}</p> ` : ``}
       ${tagGroup ? html` ${tagGroupContent} ` : ``}
       <dds-card-footer>
-        ${footer}${ArrowRight20({ slot: 'icon' })}
+        ${footer}${document.dir === 'rtl'
+          ? ArrowLeft20({ slot: 'icon' })
+          : ArrowRight20({ slot: 'icon' })}
       </dds-card-footer>
     </dds-card>
   `;
@@ -237,7 +240,9 @@ export const Static = (args) => {
       ${cta
         ? html`
             <dds-card-footer href="https://www.example.com">
-              ${ctaCopy}${ArrowRight20({ slot: 'icon' })}
+              ${ctaCopy}${document.dir === 'rtl'
+                ? ArrowLeft20({ slot: 'icon' })
+                : ArrowRight20({ slot: 'icon' })}
             </dds-card-footer>
           `
         : ``}

packages/web-components/src/components/carousel/__stories__/carousel.stories.ts

@@ -14,6 +14,7 @@ import { html } from 'lit-element';
 // @ts-ignore
 import ifNonNull from '../../../internal/vendor/@carbon/web-components/globals/directives/if-non-null.js';
 import ArrowRight20 from '../../../internal/vendor/@carbon/web-components/icons/arrow--right/20.js';
+import ArrowLeft20 from '../../../internal/vendor/@carbon/web-components/icons/arrow--left/20.js';
 import '../../card/index';
 import '../../cta/index';
 import '../../image/index';
@@ -50,7 +51,11 @@ const Card = ({
             default-src="${image}"></dds-image>
         `
       : null}
-    <dds-card-footer> ${ArrowRight20({ slot: 'icon' })} </dds-card-footer>
+    <dds-card-footer>
+      ${document.dir === 'rtl'
+        ? ArrowLeft20({ slot: 'icon' })
+        : ArrowRight20({ slot: 'icon' })}
+    </dds-card-footer>
   </dds-card>
 `;
 
@@ -71,7 +76,11 @@ const CardWithLongHeading = ({
             default-src="${image}"></dds-image>
         `
       : null}
-    <dds-card-footer> ${ArrowRight20({ slot: 'icon' })} </dds-card-footer>
+    <dds-card-footer>
+      ${document.dir === 'rtl'
+        ? ArrowLeft20({ slot: 'icon' })
+        : ArrowRight20({ slot: 'icon' })}
+    </dds-card-footer>
   </dds-card>
 `;
 
@@ -80,7 +89,9 @@ const CardWithVideo = ({ copy = copyDefault, href = hrefDefault } = {}) => html`
     <dds-card-cta cta-type="video" href="${href}">
       <p>${copy}</p>
       <dds-card-cta-footer href="${href}">
-        ${ArrowRight20({ slot: 'icon' })}
+        ${document.dir === 'rtl'
+          ? ArrowLeft20({ slot: 'icon' })
+          : ArrowRight20({ slot: 'icon' })}
       </dds-card-cta-footer>
     </dds-card-cta>
   </dds-video-cta-container>

packages/web-components/src/components/content-block-card-static/__stories__/content-block-card-static.stories.ts

@@ -9,7 +9,8 @@
 
 import '../index';
 import { html } from 'lit-element';
-import ArrowRight20 from '../../../internal/vendor/@carbon/web-components/icons/arrow--right/20.js';
+import ArrowRight20 from '../../../internal/vendor/@carbon/web-components/icons/arrow--right/20';
+import ArrowLeft20 from '../../../internal/vendor/@carbon/web-components/icons/arrow--left/20';
 import Chat20 from '../../../internal/vendor/@carbon/web-components/icons/chat/20.js';
 // eslint-disable-next-line sort-imports
 import readme from './README.stories.mdx';
@@ -62,7 +63,10 @@ export const Default = (args) => {
           Contact us ${Chat20({ slot: 'icon' })}
         </dds-button-group-item>
         <dds-button-group-item href="${href}">
-          Free trial ${ArrowRight20({ slot: 'icon' })}
+          Free trial
+          ${document.dir === 'rtl'
+            ? ArrowLeft20({ slot: 'icon' })
+            : ArrowRight20({ slot: 'icon' })}
         </dds-button-group-item>
       </dds-button-group>
     </dds-content-block-card-static>

packages/web-components/src/components/content-block-mixed/__stories__/content-block-mixed.stories.ts

@@ -14,6 +14,7 @@ import '../../content-group-cards/index';
 import '../../content-group-pictograms/index';
 import '../../content-group-simple/index';
 import ArrowRight20 from '../../../internal/vendor/@carbon/web-components/icons/arrow--right/20';
+import ArrowLeft20 from '../../../internal/vendor/@carbon/web-components/icons/arrow--left/20';
 import { html } from 'lit-element';
 import ifNonNull from '../../../internal/vendor/@carbon/web-components/globals/directives/if-non-null.js';
 import { select } from '@storybook/addon-knobs';
@@ -166,7 +167,9 @@ export const Default = (args) => {
             eiusmod tempor incididunt ut labore et dolore magna aliqua.
           </p>
           <dds-card-footer icon-placement="left">
-            ${ArrowRight20({ slot: 'icon' })}
+            ${document.dir === 'rtl'
+              ? ArrowLeft20({ slot: 'icon' })
+              : ArrowRight20({ slot: 'icon' })}
           </dds-card-footer>
         </dds-content-group-cards-item>
         <dds-content-group-cards-item href="www.ibm.com">
@@ -179,7 +182,9 @@ export const Default = (args) => {
             eiusmod tempor incididunt ut labore et dolore magna aliqua.
           </p>
           <dds-card-footer icon-placement="left">
-            ${ArrowRight20({ slot: 'icon' })}
+            ${document.dir === 'rtl'
+              ? ArrowLeft20({ slot: 'icon' })
+              : ArrowRight20({ slot: 'icon' })}
           </dds-card-footer>
         </dds-content-group-cards-item>
       </dds-content-group-cards>
@@ -217,8 +222,11 @@ export const Default = (args) => {
                 >${itemHeading}</dds-content-item-heading
               >
               <dds-content-item-copy>${itemCopy}</dds-content-item-copy>
-              <dds-link-with-icon href="${linkWithIcon.href}" slot="footer">
-                ${linkWithIcon.copy} ${ArrowRight20({ slot: 'icon' })}
+              <dds-link-with-icon
+                href="${linkWithIcon.href}"
+                slot="footer"
+                cta-type="local">
+                ${linkWithIcon.copy}
               </dds-link-with-icon>
             </dds-pictogram-item>
           `
@@ -270,7 +278,9 @@ export const WithLinkList = (args) => {
             eiusmod tempor incididunt ut labore et dolore magna aliqua.
           </p>
           <dds-card-footer icon-placement="left">
-            ${ArrowRight20({ slot: 'icon' })}
+            ${document.dir === 'rtl'
+              ? ArrowLeft20({ slot: 'icon' })
+              : ArrowRight20({ slot: 'icon' })}
           </dds-card-footer>
         </dds-content-group-cards-item>
         <dds-content-group-cards-item href="www.ibm.com">
@@ -283,7 +293,9 @@ export const WithLinkList = (args) => {
             eiusmod tempor incididunt ut labore et dolore magna aliqua.
           </p>
           <dds-card-footer icon-placement="left">
-            ${ArrowRight20({ slot: 'icon' })}
+            ${document.dir === 'rtl'
+              ? ArrowLeft20({ slot: 'icon' })
+              : ArrowRight20({ slot: 'icon' })}
           </dds-card-footer>
         </dds-content-group-cards-item>
       </dds-content-group-cards>
@@ -321,8 +333,8 @@ export const WithLinkList = (args) => {
               </svg>
               <dds-content-item-heading>${itemHeading}</dds-content-item-heading>
               <dds-content-item-copy>${itemCopy}</dds-content-item-copy>
-              <dds-link-with-icon href="${linkWithIcon.href}" slot="footer">
-                ${linkWithIcon.copy} ${ArrowRight20({ slot: 'icon' })}
+              <dds-link-with-icon href="${linkWithIcon.href}" slot="footer" cta-type="local">
+                ${linkWithIcon.copy}
               </dds-link-with-icon>
             </dds-pictogram-item>
           `