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

This reverts commit 65c7cd6.

Fixes rdar://149293880

Author: marinaaisa

src/components/DocumentationTopic/Hero/DocumentationHero.vue

@@ -14,7 +14,6 @@
       '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" data-background>
+  <div class="tutorial">
     <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" data-hero>
+    <div class="hero dark">
       <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" data-hero>
+      <div class="radial-gradient">
         <slot name="above-hero" />
         <Hero
           v-if="heroSection"
@@ -129,19 +129,13 @@ 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" data-background>
+  <div class="learning-path" :class="classes">
     <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,8 +183,7 @@
   --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-color: #{dark-color(fill-secondary)};
-  --color-tutorials-overview-background: var(--color-tutorials-overview-background-color);
+  --color-tutorials-overview-background: #{dark-color(fill-secondary)};
   --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,8 +41,6 @@ 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: {
@@ -51,8 +49,6 @@ 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,10 +189,6 @@ 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,12 +94,6 @@ 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,10 +53,6 @@ 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);