feat: add circle-of-friends icon and branded chip component

[mariadias143]

Done

• Creates branded chip component based on figma specification
• Adds Circle of Friends icon to standard icons
• Removed design guideline that prohibits usage of chip component for branding. If this were to be updated to a "when to use" scenario, then I would need a new image and description to go with.
• Drive by: fix links in CTA section which were breaking linkchecker CI step (caused by changes in the last merged PR)

Fixes #5699

QA

• Check the implementation aligns with the design
• Open icons docs and verify p-icon--circle-of-friends has been added to the standard icons sections (standard and dark).
• Open the standard icons example and verify the circle of friends example appears as expected in all themes.
• Review updated documentation

Check if PR is ready for release

If this PR contains Vanilla SCSS or macro code changes, it should contain the following changes to make sure it's ready for the release:

• PR should have one of the following labels to automatically categorise it in release notes:
  • Feature 🎁, Breaking Change 💣, Bug 🐛, Documentation 📝, Maintenance 🔨.
• Vanilla version in package.json should be updated relative to the most recent release, following semver convention
  • if existing APIs (CSS classes & macro APIs) are not changed it can be a bugfix release (x.x.X)
  • if existing APIs (CSS classes & macro APIs) are changed/added/removed it should be a minor version (x.X.0)
  • see the wiki for more details
• Any changes to component class names (new patterns, variants, removed or added features) or macros should be listed on the what's new page.

Screenshots

[webteam-app]

Demo

Jenkins

demos.haus

[diana-stanciulescu]

@mariadias143 thanks! The icon-only version should be a perfect circle. Othewr than this, this looks great.
I assume users can change the text if needed? Product managers may have different needs too.

[mariadias143]

@mariadias143 thanks! The icon-only version should be a perfect circle. Othewr than this, this looks great. I assume users can change the text if needed? Product managers may have different needs too.

@diana-stanciulescu Yes, users can use whatever text they would like. Regarding the chip not being a perfect circle, I think one of the screenshots I added in the PR description (second one specifically) looked weird because of my monitor but it looks good on my laptop (see below). I updated the screenshot in the description as well. What do you think?

[diana-stanciulescu]

@mariadias143 thanks for checking, the circle part seems ok, but what I noticed now is the icon looks small , can you please double check:

[mariadias143]

@mariadias143 thanks for checking, the circle part seems ok, but what I noticed now is the icon looks small , can you please double check:

@diana-stanciulescu can you check again? It should be fixed now
previously:

with latest changes:

[jmuzina]

This example has the same title as your other example, so they're indistinguishable on the examples list:

[jmuzina]

We generally keep the release notes entry titles to match the name of a docs page (a component, base element, pattern, etc). Then use the url and notes to lead the user to what specifically was changed there.

Suggested change

	- component: Branded chip
	url: /docs/patterns/chip
	- component: Chip
	url: /docs/patterns/chip#branded-chip-new

("new") is included in the URL due to this issue not being solved yet