Added : Issue 2089 - Added React support for vf-tabs

components/vf-tabs/vf-tabs.config.yml

@@ -20,6 +20,8 @@ variants:
           tab_content: Nullam at diam nec arcu suscipit auctor non a erat. Sed et magna semper, eleifend magna non, facilisis nisl. Proin et est et lorem dictum finibus ut nec turpis. Aenean nisi tortor, euismod a mauris a, mattis scelerisque tortor. Sed dolor risus, varius a nibh id, condimentum lacinia est. In lacinia cursus odio a aliquam. Curabitur tortor magna, laoreet ut rhoncus at, sodales consequat tellus.
       angular:
         <vf-tabs [tabsdata]="tabsdata"></vf-tabs>
+      react:
+        <VfTabs {...tabsData}/>
   - name: nested
     context:
       tabs:
@@ -68,6 +70,8 @@ variants:
           tab_content: Phasellus ac tristique orci. Nulla maximus <a class="vf-link" href="#">justo nec dignissim consequat</a>. Sed vehicula diam sit amet mi efficitur vehicula in in nisl. Aliquam erat volutpat. Suspendisse lorem turpis, accumsan consequat consectetur gravida, <a class="vf-link" href="#">pellentesque ac ante</a>. Aliquam in commodo ligula, sit amet mollis neque. Vestibulum at facilisis massa.
       angular:
         <vf-tabs [tabsdata]="tabsdata"></vf-tabs> //Please refer to usage section above on defining tabsdata.
+      react:
+        <VfTabs {...tabsData}/>
   - name: deep link
     context:
       tabs:
@@ -81,3 +85,5 @@ variants:
           tab_content: If you see me on page load, the deep link has worked.
       angular:
         <vf-tabs [tabsdata]="tabsdata"></vf-tabs> //Please refer to usage section above on defining tabsdata.
+      react:
+        <VfTabs {...tabsData}/>

tools/vf-component-library/CHANGELOG.md

@@ -1,3 +1,13 @@
+### 1.2.13
+
+* Documentation: Updated documentation for vf-logo [Tracking issue](https://github.com/visual-framework/vf-core/issues/1910)
+* Fixed : Row selection and highlighting issue for vf-table [Tracking issue](https://github.com/visual-framework/vf-core/issues/2087)
+* Fixed : 11ty create-vf-project script [Tracking issue](https://github.com/visual-framework/vf-core/issues/2090)
+* Added : Angular support for vf-back-to-top [Tracking issue](https://github.com/visual-framework/vf-core/issues/2088)
+* Added : React support for vf-tabs [Tracking issue](https://github.com/visual-framework/vf-core/issues/2089)
+* Updated : Made the image in news feed container clickable [Tracking issue](https://github.com/visual-framework/vf-core/issues/1750)
+* Updated : Changes to footer based on `intranet` implementation findings [Tracking issue](https://github.com/visual-framework/vf-core/issues/1978)
+
 ### 1.2.12
 
 * Documentation: Updated documentation [Tracking issue](https://github.com/visual-framework/vf-core/issues/2047)

tools/vf-component-library/src/site/_includes/layouts/components.njk

@@ -283,7 +283,7 @@ This approach is best for bare-bones Nunjucks environments, such as precompiled
 %}{% endraw %}
                 </code></pre>
               </details>
-              {% set angularComponents = "vf-badge, vf-banner, vf-hero, vf-button, vf-blockquote, vf-tabs" %}
+              {% set angularComponents = "vf-badge, vf-banner, vf-hero, vf-button, vf-blockquote, vf-tabs, vf-back-to-top" %}
               {% if component.baseHandle in angularComponents %}
               <details class="vf-details vf-box vf-box--outline">
                 <summary class="vf-details--summary">Angular syntax</summary>
@@ -304,7 +304,7 @@ This approach is best for bare-bones Nunjucks environments, such as precompiled
                 {% endif %}
               </details>
               {% endif %}
-              {% set reactComponents = "vf-card, vf-button, vf-back-to-top, vf-badge, vf-blockquote, vf-hero, vf-banner" %}
+              {% set reactComponents = "vf-card, vf-button, vf-back-to-top, vf-badge, vf-blockquote, vf-hero, vf-banner, vf-tabs" %}
               {% if component.baseHandle in reactComponents %}
               <details class="vf-details vf-box vf-box--outline">
                 <summary class="vf-details--summary">React syntax</summary>