🔍 FEATURE: Add justify-content prop to molecule tabs

[andresin87]

Molecule/Tabs

🚢 Ship

TASK:

Description, Motivation and Context

Background

No JIRA ticket associated with this change.

Goal

Enable flexible alignment of tab elements within the molecule tabs component by adding a configurable justify-content property. This allows consumers to align tabs to the start (default), center, or end of the container.

Implementation

• Created TABS_JUSTIFY_CONTENT configuration in components/molecule/tabs/src/config.js defining three alignment options (flex-start, center, flex-end)
• Modified components/molecule/tabs/src/components/MoleculeTabs.js to accept tabsJustifyContent prop with default value FLEX_START
• Updated component className logic to apply justify-content-{value} CSS modifier based on the prop
• Modified components/molecule/tabs/src/index.js to export TABS_JUSTIFY_CONTENT as moleculeTabsJustifyContent for consumer use
• Added SCSS variables and styles in components/molecule/tabs/src/_settings.scss and components/molecule/tabs/src/styles/index.scss to support the new alignment classes
• Created demo article in components/molecule/tabs/demo/Articles/ArticleTabsJustifyContent.js showcasing all three alignment options
• Updated test suite in components/molecule/tabs/test/index.test.js with coverage for the new prop
• Updated dependencies in package-lock.json

Further considerations

N/A

🤖 Generated with Claude Code

• 🪲 Bug fix (non-breaking change which fixes an issue)
• ✨ New feature (non-breaking change which adds functionality)
• 💥 Breaking change (fix or feature that would cause existing functionality to not work as expected)
• 🧾 Documentation
• 📷 Demo
• 🧪 Test
• 🧠 Refactor
• 💄 Styles
• 🛠️ Tool

Screenshots - Animations

[github-actions]

	STATEMENTS	BRANCHES	FUNCTIONS	LINES
≍	≍ 0＝	≍ 0.01↑	≍ 0＝	≍ 0＝
%	76.45	63.44	68.08	78.05
ABS	3511 / 4592	2133 / 3362	689 / 1012	3329 / 4265