fix(feature-card): fix icon position

Fixes feature card's icon position in Safari browser, by using `<dds-feature-card-footer>` to make sure its style (that uses flex box to adjust the icon position) is in effect. Also removes the styles for the old markup structure. Refs #4055.
carbon-design-system · Nov 5, 2020 · 3f238cc · 3f238cc
1 parent fae1131
commit 3f238cc
Show file tree

Hide file tree

Showing 14 changed files with 79 additions and 47 deletions.
diff --git a/packages/web-components/examples/codesandbox/components/card/index.html b/packages/web-components/examples/codesandbox/components/card/index.html
@@ -26,7 +26,7 @@ <h1>Hello World! 👋</h1>
   <dds-card href="https://example.com">
     <slot slot="eyebrow">eyebrow text</slot>
     <slot slot="heading">Lorem ipsum dolor sit amet</slot>
-    <dds-card-footer slot="footer">
+    <dds-card-footer>
       Card cta text
       <svg
         slot="icon"

diff --git a/packages/web-components/examples/codesandbox/components/feature-card-block-large/index.html b/packages/web-components/examples/codesandbox/components/feature-card-block-large/index.html
@@ -39,18 +39,20 @@ <h1>Hello World! 👋</h1>
     <slot slot="eyebrow">This is an eyebrow</slot>
     <h3 slot="heading">Explore AI use cases in all industries</h3>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
-    <svg
-      slot="footer"
-      focusable="false"
-      preserveAspectRatio="xMidYMid meet"
-      xmlns="http://www.w3.org/2000/svg"
-      aria-hidden="true"
-      width="20"
-      height="20"
-      viewBox="0 0 20 20"
-    >
-      <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
-    </svg>
+    <dds-feature-card-footer>
+      <svg
+        slot="icon"
+        focusable="false"
+        preserveAspectRatio="xMidYMid meet"
+        xmlns="http://www.w3.org/2000/svg"
+        aria-hidden="true"
+        width="20"
+        height="20"
+        viewBox="0 0 20 20"
+      >
+        <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
+      </svg>
+    </dds-feature-card-footer>
   </dds-feature-card-block-large>
 </div>
 </body>

diff --git a/...ages/web-components/examples/codesandbox/components/feature-card-block-large/src/index.js b/...ages/web-components/examples/codesandbox/components/feature-card-block-large/src/index.js
@@ -7,4 +7,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import '@carbon/ibmdotcom-web-components/es/components/feature-card-block-large/feature-card-block-large';
+import '@carbon/ibmdotcom-web-components/es/components/feature-card/feature-card-footer.js';
+import '@carbon/ibmdotcom-web-components/es/components/image/image.js';
+import '@carbon/ibmdotcom-web-components/es/components/feature-card-block-large/feature-card-block-large.js';
diff --git a/packages/web-components/examples/codesandbox/components/feature-card/index.html b/packages/web-components/examples/codesandbox/components/feature-card/index.html
@@ -27,18 +27,20 @@ <h1>Hello World! 👋</h1>
     <dds-image slot="image" alt="Image alt text" default-src="https://dummyimage.com/672x672/ee5396/161616&text=1x1">
     </dds-image>
     <h3 slot="heading">Lorem ipsum dolor sit amet.</h3>
-    <svg
-      slot="footer"
-      focusable="false"
-      preserveAspectRatio="xMidYMid meet"
-      xmlns="http://www.w3.org/2000/svg"
-      aria-hidden="true"
-      width="20"
-      height="20"
-      viewBox="0 0 20 20"
-    >
-      <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
-    </svg>
+    <dds-feature-card-footer>
+      <svg
+        slot="icon"
+        focusable="false"
+        preserveAspectRatio="xMidYMid meet"
+        xmlns="http://www.w3.org/2000/svg"
+        aria-hidden="true"
+        width="20"
+        height="20"
+        viewBox="0 0 20 20"
+      >
+        <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
+      </svg>
+    </dds-feature-card-footer>
   </dds-feature-card>
 </div>
 </body>

diff --git a/packages/web-components/examples/codesandbox/components/feature-card/src/index.js b/packages/web-components/examples/codesandbox/components/feature-card/src/index.js
@@ -7,4 +7,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import '@carbon/ibmdotcom-web-components/es/components/feature-card/feature-card';
+import '@carbon/ibmdotcom-web-components/es/components/feature-card/feature-card-footer.js';
+import '@carbon/ibmdotcom-web-components/es/components/image/image.js';
+import '@carbon/ibmdotcom-web-components/es/components/feature-card/feature-card.js';
diff --git a/packages/web-components/src/components/card/__stories__/card.stories.ts b/packages/web-components/src/components/card/__stories__/card.stories.ts
@@ -33,7 +33,7 @@ export const Default = ({ parameters }) => {
             <p>${copy}</p>
           `
         : ``}
-      <dds-card-footer slot="footer" icon-placement="${iconPlacement}">
+      <dds-card-footer icon-placement="${iconPlacement}">
         ${footer}${ArrowRight20({ slot: 'icon' })}
       </dds-card-footer>
     </dds-card>

diff --git a/...mponents/src/components/feature-card-block-large/__stories__/README.stories.mdx b/...mponents/src/components/feature-card-block-large/__stories__/README.stories.mdx
@@ -17,13 +17,15 @@ Here's a quick example to get you started.
 ### JS
 
 ```javascript
-import '@carbon/ibmdotcom-web-components/es/components/feature-card-block-large/feature-card-block-large';
+import '@carbon/ibmdotcom-web-components/es/components/featuer-card/feature-card-footer.js';
+import '@carbon/ibmdotcom-web-components/es/components/feature-card-block-large/feature-card-block-large.js';
 ```
 
 or with [JSPM](https://jspm.org)
 
 ```html
 <script type="module">
+  import 'https://jspm.dev/@carbon/ibmdotcom-web-components@canary/es/components/feature-card/feature-card-footer.js';
   import 'https://jspm.dev/@carbon/ibmdotcom-web-components@canary/es/components/feature-card-block-large/feature-card-block-large.js';
 </script>
 ```
@@ -34,9 +36,11 @@ or with [JSPM](https://jspm.org)
 <dds-feature-card-block-large href="https://example.com">
   <img />
   <h3>Copy text</h3>
-  <svg slot="footer" focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" fill="currentColor" aria-hidden="true" width="20" height="20" viewBox="0 0 20 20">
+  <dds-feature-card-footer>
+    <svg slot="icon" focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" fill="currentColor" aria-hidden="true" width="20" height="20" viewBox="0 0 20 20">
     <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
-  </svg>
+    </svg>
+  </dds-feature-card-footer>
 </dds-feature-card-block-large>
 ```
 

diff --git a/...s/src/components/feature-card-block-large/__stories__/feature-card-block-large.stories.ts b/...s/src/components/feature-card-block-large/__stories__/feature-card-block-large.stories.ts
@@ -33,7 +33,9 @@ export const Default = ({ parameters }) => {
       <slot slot="eyebrow">${eyebrow}</slot>
       <slot slot="heading">${heading}</slot>
       <p>${copy}</p>
-      ${ArrowRight20({ slot: 'footer' })}
+      <dds-feature-card-footer>
+        ${ArrowRight20({ slot: 'icon' })}
+      </dds-feature-card-footer>
     </dds-feature-card-block-large>
   `;
 };

diff --git a/...ponents/src/components/feature-card-block-medium/__stories__/README.stories.mdx b/...ponents/src/components/feature-card-block-medium/__stories__/README.stories.mdx
@@ -17,14 +17,22 @@ Here's a quick example to get you started.
 ### JS
 
 ```javascript
-import '@carbon/ibmdotcom-web-components/es/components/feature-card-block-medium/feature-card-block-medium';
+import '@carbon/ibmdotcom-web-components/es/components/feature-card/feature-card-footer.js';
+import '@carbon/ibmdotcom-web-components/es/components/image/image.js';
+import '@carbon/ibmdotcom-web-components/es/components/feature-card-block-medium/feature-card-block-medium.js';
+import '@carbon/ibmdotcom-web-components/es/components/feature-card-block-medium/feature-card-block-medium-heading.js';
+import '@carbon/ibmdotcom-web-components/es/components/feature-card-block-medium/feature-card-block-medium-card.js';
 ```
 
 or with [JSPM](https://jspm.org)
 
 ```html
 <script type="module">
+  import 'https://jspm.dev/@carbon/ibmdotcom-web-components@canary/es/components/feature-card/feature-card-footer.js';
+  import 'https://jspm.dev/@carbon/ibmdotcom-web-components@canary/es/components/image/image.js';
   import 'https://jspm.dev/@carbon/ibmdotcom-web-components@canary/es/components/feature-card-block-medium/feature-card-block-medium.js';
+  import 'https://jspm.dev/@carbon/ibmdotcom-web-components@canary/es/components/feature-card-block-medium/feature-card-block-medium-heading.js';
+  import 'https://jspm.dev/@carbon/ibmdotcom-web-components@canary/es/components/feature-card-block-medium/feature-card-block-medium-card.js';
 </script>
 ```
 
@@ -38,9 +46,11 @@ or with [JSPM](https://jspm.org)
   <dds-feature-card-block-medium-card href="https://example.com">
     <dds-image slot="image" alt="Image alt text" default-src="https://dummyimage.com/672x672/ee5396/161616&amp;amp;text=1x1"></dds-image>
     <slot slot="heading">Explore AI use cases in all industries</slot>
-    <svg slot="footer" focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" fill="currentColor" aria-hidden="true" width="20" height="20" viewBox="0 0 20 20">
-      <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
-    </svg>
+    <dds-feature-card-footer>
+      <svg slot="footer" focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" fill="currentColor" aria-hidden="true" width="20" height="20" viewBox="0 0 20 20">
+        <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
+      </svg>
+    </dds-feature-card-footer>
   </dds-feature-card-block-medium-card>
 </dds-feature-card-block-medium>
 ```

diff --git a/...src/components/feature-card-block-medium/__stories__/feature-card-block-medium.stories.ts b/...src/components/feature-card-block-medium/__stories__/feature-card-block-medium.stories.ts
@@ -22,7 +22,10 @@ export const Default = ({ parameters }) => {
       <span slot="heading">${heading}</span>
       <span slot="eyebrow">${eyebrow}</span>
       <dds-image slot="image" alt="${ifNonNull(alt)}" default-src="${ifNonNull(defaultSrc)}"></dds-image>
-      ${copy} ${ArrowRight20({ slot: 'footer' })}
+      ${copy}
+      <dds-feature-card-footer>
+        ${ArrowRight20({ slot: 'icon' })}
+      </dds-feature-card-footer>
     </dds-feature-card-block-medium>
   `;
 };

diff --git a/packages/web-components/src/components/feature-card/__stories__/README.stories.mdx b/packages/web-components/src/components/feature-card/__stories__/README.stories.mdx
@@ -17,13 +17,15 @@ Here's a quick example to get you started.
 ### JS
 
 ```javascript
-import '@carbon/ibmdotcom-web-components/es/components/feature-card/feature-card';
+import '@carbon/ibmdotcom-web-components/es/components/feature-card/feature-card-footer.js';
+import '@carbon/ibmdotcom-web-components/es/components/feature-card/feature-card.js';
 ```
 
 or with [JSPM](https://jspm.org)
 
 ```html
 <script type="module">
+  import 'https://jspm.dev/@carbon/ibmdotcom-web-components@canary/es/components/feature-card/feature-card-footer.js';
   import 'https://jspm.dev/@carbon/ibmdotcom-web-components@canary/es/components/feature-card/feature-card.js';
 </script>
 ```
@@ -34,9 +36,11 @@ or with [JSPM](https://jspm.org)
 <dds-feature-card href="https://example.com">
   <img />
   <h3>Copy text</h3>
-  <svg slot="footer" focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" fill="currentColor" aria-hidden="true" width="20" height="20" viewBox="0 0 20 20">
-    <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
-  </svg>
+  <dds-feature-card-footer>
+    <svg slot="icon" focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" fill="currentColor" aria-hidden="true" width="20" height="20" viewBox="0 0 20 20">
+      <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
+    </svg>
+  </dds-feature-card-footer>
 </dds-feature-card>
 ```
 

diff --git a/packages/web-components/src/components/feature-card/__stories__/feature-card.stories.ts b/packages/web-components/src/components/feature-card/__stories__/feature-card.stories.ts
@@ -20,7 +20,9 @@ export const Default = ({ parameters }) => {
     <dds-feature-card href=${ifNonNull(href || undefined)}>
       <dds-image slot="image" alt="${ifNonNull(alt)}" default-src="${ifNonNull(defaultSrc)}"></dds-image>
       <slot slot="heading">${heading}</slot>
-      ${ArrowRight20({ slot: 'footer' })}
+      <dds-feature-card-footer>
+        ${ArrowRight20({ slot: 'icon' })}
+      </dds-feature-card-footer>
     </dds-feature-card>
   `;
 };

diff --git a/packages/web-components/src/components/feature-card/feature-card-footer.ts b/packages/web-components/src/components/feature-card/feature-card-footer.ts
@@ -10,6 +10,7 @@
 import { customElement } from 'lit-element';
 import ddsSettings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings';
 import DDSCardFooter from '../card/card-footer';
+import styles from './feature-card.scss';
 
 const { stablePrefix: ddsPrefix } = ddsSettings;
 
@@ -19,6 +20,8 @@ const { stablePrefix: ddsPrefix } = ddsSettings;
  * @element dds-feature-card-footer
  */
 @customElement(`${ddsPrefix}-feature-card-footer`)
-class DDSFeatureCardFooter extends DDSCardFooter {}
+class DDSFeatureCardFooter extends DDSCardFooter {
+  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
+}
 
 export default DDSFeatureCardFooter;
diff --git a/packages/web-components/src/components/feature-card/feature-card.scss b/packages/web-components/src/components/feature-card/feature-card.scss
@@ -28,8 +28,4 @@
     align-items: flex-end;
     color: $inverse-link;
   }
-
-  ::slotted(svg[slot='icon']) {
-    float: right;
-  }
 }