Merge pull request #2463 from boltdesignsystem/feature/DS-567-remove-…

…button-link

DS-567 Rewrite docs and dependency tests to remove use of button

packages/core-v3.x/elements/replace-with-children/README.md

@@ -1,41 +1,17 @@
 ## `<replace-with-children>`
 
-A "helper" `custom element` in the Bolt Design System to easily remove a Web Component's initial server-side / Twig-rendered HTML when booting up and replace itself with the custom element's children; as the name implies, "Replace With Children".
+A "helper" custom element that removes a web component's initial Twig-rendered HTML and replaces itself with the custom element's children; as the name implies, "Replace With Children".
 
-A great use case of this is with the `<bolt-button>` component which might output some initial HTML similar to this (when serverside-rendered):
+For example:
 
 ```html
-<bolt-button align="center" color="primary" size="medium">
-  <button
-    class="c-bolt-button  c-bolt-button--medium  c-bolt-button--primary c-bolt-button--center"
-    is="shadow-root"
+<bolt-test-component foo="bar">
+  <replace-with-children class="c-bolt-test-component"
+    >Twig-rendered text</replace-with-children
   >
-    <replace-with-children class="c-bolt-button__item"
-      >Button w/ Icon `after` Text</replace-with-children
-    >
-    <replace-with-children class="c-bolt-button__icon">
-      <bolt-icon name="chevron-right" slot="after"></bolt-icon>
-    </replace-with-children>
-  </button>
-</bolt-button>
+</bolt-test-component>
 ```
 
-The thing is, most of this HTML isn't technically needed to render our Web Component in a clean, semantic way. In fact, most of it isn't _technically_ needed to render out the component:
+In the example above, once the web component has rendered, "Twig-rendered text" will remain but `<replace-with-children class="c-bolt-test-component">` will have been removed so that the markup around the original text can be fully controlled by the web component's own renderer.
 
-```html
-<!-- This totally works if we wanted to customize the data or attributes on the semantic `<button>` tag that lives in our custom element -->
-<bolt-button align="center" color="primary" size="medium">
-  <button is="shadow-root" type="submit" data-uuid="foo">
-    Button w/ Icon `after` Text
-    <bolt-icon name="chevron-right" slot="after"></bolt-icon>
-  </button>
-</bolt-button>
-
-<!-- But if not, this also works! -->
-<bolt-button align="center" color="primary" size="medium">
-  Button w/ Icon `after` Text
-  <bolt-icon name="chevron-right" slot="after"></bolt-icon>
-</bolt-button>
-```
-
-That's where this helper element comes in: acting as a placeholder for styling non-semantic HTML before the JS kicks in. Once it does, throw away the markup that the component doesn't need / use without losing any valuable data or content.
+This is mainly used to avoid a content shift when web component rendering replaces the original Twig-rendered content.

packages/testing/testing-utils/__tests__/dependency-map.test.js

@@ -10,10 +10,10 @@ describe('dependency mapper', () => {
     );
 
     expect(results).toStrictEqual([
-      '@x/button.twig',
-      '@x/button/button.twig',
-      '@x/icon/icon.twig',
-      'button.twig',
+      '@x/foo.twig',
+      '@x/foo/foo.twig',
+      '@x/bar/bar.twig',
+      'foo.twig',
     ]);
   });
 
@@ -22,12 +22,12 @@ describe('dependency mapper', () => {
 <div class="card">
   <h2>{{ title }}</h2>
   <footer>
-    {% include "@x/button.twig" %}
-    <div>{% include "@x/button.twig" %}</div>
-    {% include '@x/button/button.twig' %}
-    {% include '@x/icon/icon.twig' %}
-    {% include "button.twig" %}
-    {% include "@x/button.twig" with {
+    {% include "@x/foo.twig" %}
+    <div>{% include "@x/foo.twig" %}</div>
+    {% include '@x/foo/foo.twig' %}
+    {% include '@x/bar/bar.twig' %}
+    {% include "foo.twig" %}
+    {% include "@x/foo.twig" with {
       text: "Hi",
     } %}
   </footer>
@@ -37,20 +37,20 @@ describe('dependency mapper', () => {
     const results = dm.findTwigFilesUsedInString(twigString);
 
     expect(results).toStrictEqual([
-      '@x/button.twig',
-      '@x/button/button.twig',
-      '@x/icon/icon.twig',
-      'button.twig',
+      '@x/foo.twig',
+      '@x/foo/foo.twig',
+      '@x/bar/bar.twig',
+      'foo.twig',
     ]);
   });
 
   test('getTwigFilePath', async () => {
     const filePath = await dm.getTwigFilePath(
-      '@bolt-components-button/button.twig',
+      '@bolt-components-menu/menu.twig',
     );
 
     expect(filePath).toBe(
-      join(repoRoot, 'packages/components/bolt-button/src/button.twig'),
+      join(repoRoot, 'packages/components/bolt-menu/src/menu.twig'),
     );
   });
 

packages/testing/testing-utils/__tests__/fixtures/card/card.twig

@@ -1,12 +1,12 @@
 <div class="card">
   <h2>{{ title }}</h2>
   <footer>
-    {% include "@x/button.twig" %}
-    <div>{% include "@x/button.twig" %}</div>
-    {% include '@x/button/button.twig' %}
-    {% include '@x/icon/icon.twig' %}
-    {% include "button.twig" %}
-    {% include "@x/button.twig" with {
+    {% include "@x/foo.twig" %}
+    <div>{% include "@x/foo.twig" %}</div>
+    {% include '@x/foo/foo.twig' %}
+    {% include '@x/bar/bar.twig' %}
+    {% include "foo.twig" %}
+    {% include "@x/foo.twig" with {
       text: "Hi",
     } %}
   </footer>