docs: use CodeExampleTabs from badge to button-group

[iropolo]

use CodeExampleTabs from badge to button-group

Jira ticket: https://dialpad.atlassian.net/browse/DLT-691

Implemented our new CodeExampleTabs component into:

• badge
• banner
• breadcrumbs
• button
• button-group

Images:

[github-actions]

✔️ Deploy previews ready!
😎 Dialtone preview:
https://dialtone.dialpad.com/deploy-previews/pr-185/components/badge.html
https://dialtone.dialpad.com/deploy-previews/pr-185/components/banner.html
https://dialtone.dialpad.com/deploy-previews/pr-185/components/breadcrumbs.html
https://dialtone.dialpad.com/deploy-previews/pr-185/components/button.html
https://dialtone.dialpad.com/deploy-previews/pr-185/components/button-group.html

[francisrupert]

Man, I love everything about this. A few screenshots with questions/feedback within.

[braddialpad]

Sweet! Had a quick look will review more thoroughly tomorrow.

[braddialpad]

re the 2 space indentation thing.. I was having trouble getting this working.. maybe this? https://github.com/DavidAnson/markdownlint/blob/main/doc/Rules.md#md010---hard-tabs

[iropolo]

Man, I love everything about this. A few screenshots with questions/feedback within.

Uh.. ye... I will remove it from CodeWellHeader.vue component, Im wondering the case that it was useful.

Done 👍🏼

It has 2 Tabs (4 spaces), the same as the avatar component (the first one we move it to CodeExampleTabs).
I can move it to 2 spaces. Lemme move all of them to 2 spaces.

Ye I thought that, but it is repeating a lot of code and it can be quite large.
I can add them and lets see..

[iropolo]

re the 2 space indentation thing.. I was having trouble getting this working.. maybe this? https://github.com/DavidAnson/markdownlint/blob/main/doc/Rules.md#md010---hard-tabs

sure, lemme see if I can add it quickly if it not, I will create a jira ticket to tackle it later.

[iropolo]

re the 2 space indentation thing.. I was having trouble getting this working.. maybe this? https://github.com/DavidAnson/markdownlint/blob/main/doc/Rules.md#md010---hard-tabs

sure, lemme see if I can add it quickly if it not, I will create a jira ticket to tackle it later.

Okay I added it, but seems like it does not interact inside our codeBlocks

Screen.Recording.2024-03-06.at.11.52.13.mov

To test it, im using https://www.npmjs.com/package/eslint-plugin-markdownlint
run pnpm add --save-dev eslint-plugin-markdownlint --filter dialtone-documentation
go to apps/dialtone-documentation/.eslintrc.cjs
add (my confg)

  overrides: [{
    files: ["*.md"],
    parser: "eslint-plugin-markdownlint/parser",
    extends: ["plugin:markdownlint/recommended"],
    rules: {
      "markdownlint/md033": 'off',
      "markdownlint/md013": 'off'
    }
  }],

[github-actions]

✔️ Deploy previews ready!
😎 Dialtone preview: https://dialtone.dialpad.com/deploy-previews/pr-185/

[iropolo]

Okay, should be ok to review it.
@francisrupert @braddialpad

[braddialpad]

Okay I added it, but seems like it does not interact inside our codeBlocks

Hmm yeah thought that might happen, maybe we can do a separate story for this one.

[iropolo]

Okay I added it, but seems like it does not interact inside our codeBlocks

Hmm yeah thought that might happen, maybe we can do a separate story for this one.

Jira ticket: https://dialpad.atlassian.net/browse/DLT-1600