Add HTML data attributes to background and hero elements (#940)

* Add HTML data attributes

We want to add HTML data attributes [1] to background and hero elements
to be able to recognize them. We are only interested in hero that have
an enhance background, so in the case that it doesn't have it, the data
attribute won't be rendered.

[1] https://developer.mozilla.org/en-US/docs/Web/HTML/How_to/Use_data_attributes

* Fix tutorial background

Add a default background-color for tutorials. Also, we want to remove
any padding or margin of tutorial background for IDEs.

Fixes rdar://149293880

Author: marinaaisa

src/components/DocumentationTopic/Hero/DocumentationHero.vue

@@ -14,6 +14,7 @@
       'documentation-hero--disabled': !enhanceBackground,
     }]"
     :style="styles"
+    :data-hero="enhanceBackground"
   >
     <div class="icon">
       <TopicTypeIcon

src/components/Tutorial.vue

@@ -9,7 +9,7 @@
 -->
 
 <template>
-  <div class="tutorial">
+  <div class="tutorial" data-background>
     <NavigationBar
       v-if="!isTargetIDE"
       :technology="metadata.category"

src/components/Tutorial/Hero.vue

@@ -14,7 +14,7 @@
     :title="sectionTitle"
     class="tutorial-hero"
   >
-    <div class="hero dark">
+    <div class="hero dark" data-hero>
       <div v-if="backgroundImageUrl" class="bg" :style="bgStyle" />
       <slot name="above-title" />
       <Row>

src/components/TutorialsOverview.vue

@@ -18,7 +18,7 @@
       {{ title }}
     </Nav>
     <main id="app-main" tabindex="0" class="main">
-      <div class="radial-gradient">
+      <div class="radial-gradient" data-hero>
         <slot name="above-hero" />
         <Hero
           v-if="heroSection"
@@ -129,13 +129,19 @@ export default {
     margin-top: -$nav-height;
     padding-top: $nav-height;
 
+    @include inTargetIde() {
+      margin-top: 0;
+      padding-top: 0;
+    }
+
     @include breakpoint(small) {
       margin-top: -$nav-height-small;
       padding-top: $nav-height-small;
     }
 
     background: var(--color-tutorials-overview-fill-secondary,
       var(--color-tutorials-overview-background));
+    background-color: var(--color-tutorials-overview-background-color);
   }
 
   // HACK - remove the gradient for firefox only

src/components/TutorialsOverview/LearningPath.vue

@@ -9,7 +9,7 @@
 -->
 
 <template>
-  <div class="learning-path" :class="classes">
+  <div class="learning-path" :class="classes" data-background>
     <div class="main-container">
       <div v-if="!isTargetIDE" class="secondary-content-container">
         <TutorialsNavigation :sections="sections" :aria-label="$t('sections.on-this-page')" />

src/styles/core/colors/_light.scss

@@ -183,7 +183,8 @@
   --color-tutorial-navbar-dropdown-background: var(--color-fill);
   --color-tutorial-navbar-dropdown-border: var(--color-fill-gray);
   --color-tutorial-quiz-border-active: var(--color-figure-blue);
-  --color-tutorials-overview-background: #{dark-color(fill-secondary)};
+  --color-tutorials-overview-background-color: #{dark-color(fill-secondary)};
+  --color-tutorials-overview-background: var(--color-tutorials-overview-background-color);
   --color-tutorials-overview-content: #{dark-color(figure-gray)};
   --color-tutorials-overview-content-alt: #{dark-color(figure-gray)};
   --color-tutorials-overview-eyebrow: #{dark-color(figure-gray-secondary)};

tests/unit/components/DocumentationTopic/Hero/DocumentationHero.spec.js

@@ -41,6 +41,8 @@ describe('DocumentationHero', () => {
     const withBackground = createWrapper();
     expect(withBackground.classes('documentation-hero')).toBe(true);
     expect(withBackground.classes('documentation-hero--disabled')).toBe(false);
+    // exposes a data-hero HTML data attribute
+    expect(withBackground.attributes('data-hero')).toBeDefined();
 
     const withoutBackground = createWrapper({
       propsData: {
@@ -49,6 +51,8 @@ describe('DocumentationHero', () => {
     });
     expect(withoutBackground.classes('documentation-hero')).toBe(true);
     expect(withoutBackground.classes('documentation-hero--disabled')).toBe(true);
+    // does not expose a data-hero HTML data attribute if there is no background
+    expect(withoutBackground.attributes('data-hero')).not.toBeDefined();
   });
 
   it('renders the DocumentationHero, enabled', () => {

tests/unit/components/Tutorial.spec.js

@@ -189,6 +189,10 @@ describe('Tutorial', () => {
     expect(wrapper.is('div.tutorial')).toBe(true);
   });
 
+  it('exposes a data-background in its background element', () => {
+    expect(wrapper.attributes('data-background')).toBeDefined();
+  });
+
   it('renders a `NavigationBar`', () => {
     const nav = wrapper.find(NavigationBar);
     expect(nav.exists()).toBe(true);

tests/unit/components/TutorialsOverview.spec.js

@@ -94,6 +94,12 @@ describe('TutorialsOverview', () => {
     expect(wrapper.contains(Nav)).toBe(false);
   });
 
+  it('exposes a data-hero HTML data attribute in the radial gradient', () => {
+    const radialGradient = wrapper.find('.radial-gradient');
+    expect(radialGradient.exists()).toBe(true);
+    expect(radialGradient.attributes('data-hero')).toBeDefined();
+  });
+
   it('renders a `Hero`', () => {
     const hero = wrapper.find(Hero);
     expect(hero.exists()).toBe(true);

tests/unit/components/TutorialsOverview/LearningPath.spec.js

@@ -53,6 +53,10 @@ describe('LearningPath', () => {
     expect(wrapper.is('.learning-path')).toBe(true);
   });
 
+  it('exposes a data-background in its background element', () => {
+    expect(wrapper.attributes('data-background')).toBeDefined();
+  });
+
   it('renders a TutorialsNavigation if in Web mode', () => {
     const navigation = wrapper.find(TutorialsNavigation);
     expect(navigation.exists()).toBe(true);