diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index f40a4684cee..2ea4437a174 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -414,22 +414,22 @@ importers: devDependencies: '@carbon/colors': specifier: ^11.39.0 - version: 11.39.0 + version: 11.40.0 '@carbon/grid': specifier: ^11.42.0 - version: 11.42.0 + version: 11.43.0 '@carbon/layout': specifier: ^11.40.0 - version: 11.40.0 + version: 11.41.0 '@carbon/motion': specifier: ^11.34.0 - version: 11.34.0 + version: 11.35.0 '@carbon/themes': specifier: ^11.59.0 - version: 11.59.0 + version: 11.60.0 '@carbon/type': specifier: ^11.46.0 - version: 11.46.0 + version: 11.47.0 '@types/fs-extra': specifier: ^11.0.4 version: 11.0.4 @@ -490,6 +490,21 @@ importers: '@babel/plugin-proposal-decorators': specifier: ^7.27.1 version: 7.28.0(@babel/core@7.28.0) + '@carbon/grid': + specifier: ^11.43.0 + version: 11.43.0 + '@carbon/layout': + specifier: ^11.41.0 + version: 11.41.0 + '@carbon/themes': + specifier: ^11.60.0 + version: 11.60.0 + '@carbon/type': + specifier: ^11.47.0 + version: 11.47.0 + '@carbon/web-components': + specifier: ^2.38.0 + version: 2.38.0(sass@1.89.2) '@codemirror/lint': specifier: ^6.8.4 version: 6.8.5 @@ -544,6 +559,9 @@ importers: '@hashicorp/design-system-tokens': specifier: workspace:* version: link:../packages/tokens + '@ibm/plex': + specifier: ^6.4.1 + version: 6.4.1 '@nullvoxpopuli/ember-composable-helpers': specifier: ^5.2.11 version: 5.2.11(@babel/core@7.28.0)(ember-source@6.5.0(@glimmer/component@1.1.2(@babel/core@7.28.0))(rsvp@4.8.5)) @@ -1879,23 +1897,55 @@ packages: '@bundled-es-modules/memfs@4.9.4': resolution: {integrity: sha512-1XyYPUaIHwEOdF19wYVLBtHJRr42Do+3ctht17cZOHwHf67vkmRNPlYDGY2kJps4RgE5+c7nEZmEzxxvb1NZWA==} - '@carbon/colors@11.39.0': - resolution: {integrity: sha512-H1hL9NW1I1vks469KuIV/YY4zHUiDQJ/MOlJgv8iCLi0SQS4DWkDslccXAhce8U8qRtx1JPfePhiYkRBbjgKgw==} + '@carbon/colors@11.40.0': + resolution: {integrity: sha512-mzMtp8vOKQMWrGRKb34ldntpd2Z5WdHyDRLA0nfg8PgPWHQq0zI5Eznrng8OHOuy8bFurMxzA5t8OGqKEuP9cg==} + + '@carbon/colors@11.41.0': + resolution: {integrity: sha512-Rr2R4sW4QaNaL6d3jEgrhiw3EkN/odpvU6qXYBd1iTxPEUWespbjuEKQjAGBa7RkpVnZjjrlzF9BW0kF9wVfQw==} - '@carbon/grid@11.42.0': - resolution: {integrity: sha512-l91wFV7uMhaf2PX89cW1zS5iMnzrFVY2d81Xf7U9OdNu8sBTQWxUPtj1RnZyep4F7v/HG8U4DOzfa+nO5GgZeA==} + '@carbon/feature-flags@0.31.0': + resolution: {integrity: sha512-ikDGgyOc6SZIoNb7jGBTN/ieTbju7WuB4mzzSXDFA4JJKhj9EpZy+cmMiXpRE+dwK+KIFTwjtz6iDyyd52TK0Q==} - '@carbon/layout@11.40.0': - resolution: {integrity: sha512-2wIOPJZFjt5Y+TZ7NwPTf0l3zif14hBiPwv/nQo76J2Wr1i/NJrYNfBTpUnKxoq6IZEsVd0e6Ab4RLGGIP2eVA==} + '@carbon/grid@11.43.0': + resolution: {integrity: sha512-AXSCOpTRtkKwZ6qceFYwaQ9CZBFPBnBL+yzbYwCtsuYwFtx7zse3cogs/mYxWXIAMzNxc62UovMy90vGNBTd6w==} - '@carbon/motion@11.34.0': - resolution: {integrity: sha512-Gc5VcfXO70un5jeCUqlplKal8PpRLzUfxg8x8b1LwKfzjWrgxilHtNk3B4dGj190M9dyrTKVfCCrLKlVtyhEQw==} + '@carbon/grid@11.44.0': + resolution: {integrity: sha512-bB+yQ09Zw+Z0xkCNAeX+vla9PyZXUREQvzcz1WTcKqUKDwYJlAm1yxbPUM21ORy48EqfRHWUoLjTSKACi3syfg==} - '@carbon/themes@11.59.0': - resolution: {integrity: sha512-vnFuKTuThYVGQ9f8G/amO0laun6pyr8Nze1KuD6LrOJl6waEC2LPJqNz3rg4ySLievFg9+993R0GNUI9HjC2bw==} + '@carbon/layout@11.41.0': + resolution: {integrity: sha512-yDv2/ZUnTYrO8YDkK4PLbxeAIXd5zXH0akly5s6Gs5mwyHJpgzVoUffAGx2/z7ns60zsuCN+JDZFD5iYqYJ3aw==} - '@carbon/type@11.46.0': - resolution: {integrity: sha512-Xt2lhYsRuRrpEESy8BW+xjsf1TXnzv4CdxgAvjL+YSQxzdD0gbMnIhEIpJiDAyWddviqH8ZwxIdlnlfqKrA9rg==} + '@carbon/layout@11.42.0': + resolution: {integrity: sha512-+R1AxIt918TEcr73yvT+xNP/JL2+xBQfRt1qlLKwv492yAVqo7KhtISLQeku8nxNS5Osf+iBXvfUG88XX0BMUA==} + + '@carbon/motion@11.35.0': + resolution: {integrity: sha512-z6GAUF5O1d7wma51bMDe/CIYMu1/nBIpb95mmt9CBQrkRswl2sCJdpLELG74HqXV5r3+Ie7OxbWlvZMMsUC+Gw==} + + '@carbon/motion@11.36.0': + resolution: {integrity: sha512-Zc8yocsWN5H3Usa9mzHMA0nhuP+SP5+HRxhyi2RHD5U/eN69j9Tr0TKafHmL4D0WxWBk+d3LPWyMJQ73Bknuzw==} + + '@carbon/styles@1.91.0': + resolution: {integrity: sha512-B4KPWQrUpKODms7TaII0tP3NrwH2MON1c4fdVm2iszVo/f34GOfOVj0HKDpCCvo9+4xjwBX0iz3qkOjL98qo+w==} + peerDependencies: + sass: ^1.33.0 + peerDependenciesMeta: + sass: + optional: true + + '@carbon/themes@11.60.0': + resolution: {integrity: sha512-Zhtq4TwDROLgXVuvGVlNWMMrgTORdIzhc43bV/SDjpUlPaUglb1I2KfaaJ/ITjMdM4EmbhsiIbtylDTFF18CGQ==} + + '@carbon/themes@11.61.0': + resolution: {integrity: sha512-z626NnhPOBzcpocvb0On9Awrrnr/+0RXZuG7uM8ALKjc9vAYLb1cCw+GXyWHnGGkKbB9OhFTerRzL5Tx3ZU42w==} + + '@carbon/type@11.47.0': + resolution: {integrity: sha512-P2Ta59Hzvq4SD0vqrovuUh+U0MaXKk/7Gj2JgmK+7cSCQ9S+xY9bmTjTSSfWVdonF8coXE3EykSbaXOkmpgAqA==} + + '@carbon/type@11.48.0': + resolution: {integrity: sha512-zHD/od5FbuZjdP48yhfAHHnZ5wYML5OL4tyJ/s0fCmJ51rtxgby11kjOof0hKir3K5XgwKE1RzrAEZJy4Lfpqw==} + + '@carbon/web-components@2.38.0': + resolution: {integrity: sha512-/b4r14HGBgY7tYuwyIkRHbWsRpjAbJyC/NdRlc+JALNJ7FUPPThhuWBvkcZ+c9YqE/r11opXDlylU/pERPPmbw==} '@changesets/apply-release-plan@7.0.12': resolution: {integrity: sha512-EaET7As5CeuhTzvXTQCRZeBUcisoYPDDcXvgTE/2jmmypKp0RC7LxKj/yzqeh/1qFTZI7oDGFcL1PHRuQuketQ==} @@ -2873,6 +2923,37 @@ packages: resolution: {integrity: sha512-xeO57FpIu4p1Ri3Jq/EXq4ClRm86dVF2z/+kvFnyqVYRavTZmaFaUBbWCOuuTh0o/g7DSsk6kc2vrS4Vl5oPOQ==} engines: {node: '>=18.18'} + '@ibm/plex-mono@1.1.0': + resolution: {integrity: sha512-hpsdRxR3BRJkC6wGM4MZcUFD6C8M+mmK76RtAy/hlsfPro9FzpXVdIWC+G3jeQOXof109dxlUvmeKxpeKUG68A==} + + '@ibm/plex-sans-arabic@1.1.0': + resolution: {integrity: sha512-u8wIS6szLAOFvlBjCFZmtpKIqbhuIuniG2N0J+sio8vV6INH58hP0t0QNYrSl9SZtCv2Fwb4oQGuZJY3kJ4+QA==} + + '@ibm/plex-sans-devanagari@1.1.0': + resolution: {integrity: sha512-IVNV9NxXZDzcGZRao/xj+kiFwkdLkcw5vNiKwY8wEzzkpjApXJnPhJ0a7mIKNAh8oIadTIF68+iGtzRKK3nXAQ==} + + '@ibm/plex-sans-hebrew@0.0.3-alpha.0': + resolution: {integrity: sha512-sMsn1jU8kyYfSlWMfjcbvpGXJIIXGOZD+sxtBcogZz4umnCq5ys+bmsqlzkfGR25DCB49WvseD2IHbejes0/aA==} + + '@ibm/plex-sans-thai-looped@1.1.0': + resolution: {integrity: sha512-9zbDGzmtscHgBRTF88y3/92zQx6lmKjz5ZxhgcljilwOpj08BAytDc3mzUl9XGUh+DmOMl0Ql1lk6ecsEYYg2w==} + + '@ibm/plex-sans-thai@0.0.3-alpha.0': + resolution: {integrity: sha512-3RteUFhshRTmP5Swq9LYravDXmVvjxtxsZ7qeSqjn31CUgeSuZKprDWb+RzSQrO+Jg7AI4g1lolzTr/jG/LnxA==} + + '@ibm/plex-sans@1.1.0': + resolution: {integrity: sha512-WPgvO6Yfj2w5YbhyAr1tv95RUz4LRJlqN+CmYvBglabXteufP1D1E9BABMde+ZIKdRbFJDoKF5eQzfhpnbgZcQ==} + + '@ibm/plex-serif@1.1.0': + resolution: {integrity: sha512-ORIyWlK8t8mvpFI7AAfhVFH+sacink2l9AjLiKZscmAzLVSa2dqFckrPOXqx4dK/cax567gWwCpJNEYk7xWxBQ==} + + '@ibm/plex@6.0.0-next.6': + resolution: {integrity: sha512-B3uGruTn2rS5gweynLmfSe7yCawSRsJguJJQHVQiqf4rh2RNgJFu8YLE2Zd/JHV0ZXoVMOslcXP2k3hMkxKEyA==} + engines: {node: '>=14'} + + '@ibm/plex@6.4.1': + resolution: {integrity: sha512-fnsipQywHt3zWvsnlyYKMikcVI7E2fEwpiPnIHFqlbByXVfQfANAAeJk1IV4mNnxhppUIDlhU0TzwYwL++Rn2g==} + '@ibm/telemetry-js@1.10.1': resolution: {integrity: sha512-aQcDq03BKbgNnkHujHbA950wJVHtJnY0PsMHKyxgRvr3XPgInWjDfgxJQmKIp9I8Vy2wpfe0cGmduJfIX0HewQ==} hasBin: true @@ -3041,6 +3122,15 @@ packages: resolution: {integrity: sha512-F5z53uvRIF4dYfFfJP3a2Cqg+4P1dgJchJsFnsZE0eZp0LK8X7g2J0CsJHRgns+skpXOlM7n5vFGwkWCWj8qJg==} engines: {node: 12.* || >= 14} + '@lit-labs/ssr-dom-shim@1.4.0': + resolution: {integrity: sha512-ficsEARKnmmW5njugNYKipTm4SFnbik7CXtoencDZzmzo/dQ+2Q0bgkzJuoJP20Aj0F+izzJjOqsnkd6F/o1bw==} + + '@lit/context@1.1.6': + resolution: {integrity: sha512-M26qDE6UkQbZA2mQ3RjJ3Gzd8TxP+/0obMgE5HfkfLhEEyYE3Bui4A5XHiGPjy0MUGAyxB3QgVuw2ciS0kHn6A==} + + '@lit/reactive-element@2.1.1': + resolution: {integrity: sha512-N+dm5PAYdQ8e6UlywyyrgI2t++wFGXfHx+dSJ1oBrg6FAxUj40jId++EaRm80MKX5JnlH1sBsyZ5h0bcZKemCg==} + '@manypkg/find-root@1.1.0': resolution: {integrity: sha512-mki5uBvhHzO8kYYix/WRy2WX8S3B5wdVSc9D6KcU5lQNglP2yt58/VfLuAK49glRXChosY8ap2oJ1qgma3GUVA==} @@ -3769,6 +3859,9 @@ packages: '@types/tinycolor2@1.4.6': resolution: {integrity: sha512-iEN8J0BoMnsWBqjVbWH/c0G0Hh7O21lpR2/+PrvAVgWdzL7eexIFm4JN/Wn10PTcmNdtS6U67r499mlWMXOxNw==} + '@types/trusted-types@2.0.7': + resolution: {integrity: sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==} + '@types/unist@2.0.11': resolution: {integrity: sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA==} @@ -7107,6 +7200,9 @@ packages: flat-cache@6.1.12: resolution: {integrity: sha512-U+HqqpZPPXP5d24bWuRzjGqVqUcw64k4nZAbruniDwdRg0H10tvN7H6ku1tjhA4rg5B9GS3siEvwO2qjJJ6f8Q==} + flatpickr@4.6.13: + resolution: {integrity: sha512-97PMG/aywoYpB4IvbvUJi0RQi8vearvU0oov1WW3k0WZPBMrTQVqekSX5CjSG/M4Q3i6A/0FKXC7RyAoAUUSPw==} + flatted@2.0.2: resolution: {integrity: sha512-r5wGx7YeOwNWNlCA0wQ86zKyDLMQr+/RB8xy74M4hTphfmjlijTSSXGuH8rnvKZnfT9i+75zmd8jcKdMR4O6jA==} @@ -8489,6 +8585,15 @@ packages: linkify-it@5.0.0: resolution: {integrity: sha512-5aHCbzQRADcdP+ATqnDuhhJ/MRIqDkZX5pyjFHRRysS8vZ5AbqGEoFIb6pYHPZ+L/OC2Lc+xT8uHVVR5CAK/wQ==} + lit-element@4.2.1: + resolution: {integrity: sha512-WGAWRGzirAgyphK2urmYOV72tlvnxw7YfyLDgQ+OZnM9vQQBQnumQ7jUJe6unEzwGU3ahFOjuz1iz1jjrpCPuw==} + + lit-html@3.3.1: + resolution: {integrity: sha512-S9hbyDu/vs1qNrithiNyeyv64c9yqiW9l+DBgI18fL+MTvOtWoFR0FWiyq1TxaYef5wNlpEmzlXoBlZEO+WjoA==} + + lit@3.3.1: + resolution: {integrity: sha512-Ksr/8L3PTapbdXJCk+EJVB78jDodUMaP54gD24W186zGRARvwrsPfS60wae/SSCTCNZVPd1chXqio1qHQmu4NA==} + livereload-js@3.4.1: resolution: {integrity: sha512-5MP0uUeVCec89ZbNOT/i97Mc+q3SxXmiUGhRFOTmhrGPn//uWVQdCvcLJDy64MSBR5MidFdOR7B9viumoavy6g==} @@ -12888,37 +12993,107 @@ snapshots: stream: 0.0.3 util: 0.12.5 - '@carbon/colors@11.39.0': + '@carbon/colors@11.40.0': + dependencies: + '@ibm/telemetry-js': 1.10.1 + + '@carbon/colors@11.41.0': dependencies: '@ibm/telemetry-js': 1.10.1 - '@carbon/grid@11.42.0': + '@carbon/feature-flags@0.31.0': dependencies: - '@carbon/layout': 11.40.0 '@ibm/telemetry-js': 1.10.1 - '@carbon/layout@11.40.0': + '@carbon/grid@11.43.0': dependencies: + '@carbon/layout': 11.41.0 '@ibm/telemetry-js': 1.10.1 - '@carbon/motion@11.34.0': + '@carbon/grid@11.44.0': dependencies: + '@carbon/layout': 11.42.0 '@ibm/telemetry-js': 1.10.1 - '@carbon/themes@11.59.0': + '@carbon/layout@11.41.0': dependencies: - '@carbon/colors': 11.39.0 - '@carbon/layout': 11.40.0 - '@carbon/type': 11.46.0 + '@ibm/telemetry-js': 1.10.1 + + '@carbon/layout@11.42.0': + dependencies: + '@ibm/telemetry-js': 1.10.1 + + '@carbon/motion@11.35.0': + dependencies: + '@ibm/telemetry-js': 1.10.1 + + '@carbon/motion@11.36.0': + dependencies: + '@ibm/telemetry-js': 1.10.1 + + '@carbon/styles@1.91.0(sass@1.89.2)': + dependencies: + '@carbon/colors': 11.41.0 + '@carbon/feature-flags': 0.31.0 + '@carbon/grid': 11.44.0 + '@carbon/layout': 11.42.0 + '@carbon/motion': 11.36.0 + '@carbon/themes': 11.61.0 + '@carbon/type': 11.48.0 + '@ibm/plex': 6.0.0-next.6 + '@ibm/plex-mono': 1.1.0 + '@ibm/plex-sans': 1.1.0 + '@ibm/plex-sans-arabic': 1.1.0 + '@ibm/plex-sans-devanagari': 1.1.0 + '@ibm/plex-sans-hebrew': 0.0.3-alpha.0 + '@ibm/plex-sans-thai': 0.0.3-alpha.0 + '@ibm/plex-sans-thai-looped': 1.1.0 + '@ibm/plex-serif': 1.1.0 + '@ibm/telemetry-js': 1.10.1 + optionalDependencies: + sass: 1.89.2 + + '@carbon/themes@11.60.0': + dependencies: + '@carbon/colors': 11.40.0 + '@carbon/layout': 11.41.0 + '@carbon/type': 11.47.0 + '@ibm/telemetry-js': 1.10.1 + color: 4.2.3 + + '@carbon/themes@11.61.0': + dependencies: + '@carbon/colors': 11.41.0 + '@carbon/layout': 11.42.0 + '@carbon/type': 11.48.0 '@ibm/telemetry-js': 1.10.1 color: 4.2.3 - '@carbon/type@11.46.0': + '@carbon/type@11.47.0': dependencies: - '@carbon/grid': 11.42.0 - '@carbon/layout': 11.40.0 + '@carbon/grid': 11.43.0 + '@carbon/layout': 11.41.0 '@ibm/telemetry-js': 1.10.1 + '@carbon/type@11.48.0': + dependencies: + '@carbon/grid': 11.44.0 + '@carbon/layout': 11.42.0 + '@ibm/telemetry-js': 1.10.1 + + '@carbon/web-components@2.38.0(sass@1.89.2)': + dependencies: + '@carbon/styles': 1.91.0(sass@1.89.2) + '@floating-ui/dom': 1.7.3 + '@ibm/telemetry-js': 1.10.1 + '@lit/context': 1.1.6 + flatpickr: 4.6.13 + lit: 3.3.1 + lodash-es: 4.17.21 + tslib: 2.8.1 + transitivePeerDependencies: + - sass + '@changesets/apply-release-plan@7.0.12': dependencies: '@changesets/config': 3.1.1 @@ -14309,6 +14484,40 @@ snapshots: '@humanwhocodes/retry@0.4.2': {} + '@ibm/plex-mono@1.1.0': + dependencies: + '@ibm/telemetry-js': 1.10.1 + + '@ibm/plex-sans-arabic@1.1.0': + dependencies: + '@ibm/telemetry-js': 1.10.1 + + '@ibm/plex-sans-devanagari@1.1.0': + dependencies: + '@ibm/telemetry-js': 1.10.1 + + '@ibm/plex-sans-hebrew@0.0.3-alpha.0': {} + + '@ibm/plex-sans-thai-looped@1.1.0': + dependencies: + '@ibm/telemetry-js': 1.10.1 + + '@ibm/plex-sans-thai@0.0.3-alpha.0': {} + + '@ibm/plex-sans@1.1.0': + dependencies: + '@ibm/telemetry-js': 1.10.1 + + '@ibm/plex-serif@1.1.0': + dependencies: + '@ibm/telemetry-js': 1.10.1 + + '@ibm/plex@6.0.0-next.6': {} + + '@ibm/plex@6.4.1': + dependencies: + '@ibm/telemetry-js': 1.10.1 + '@ibm/telemetry-js@1.10.1': {} '@inquirer/figures@1.0.9': {} @@ -14607,6 +14816,16 @@ snapshots: tslib: 2.8.1 upath: 2.0.1 + '@lit-labs/ssr-dom-shim@1.4.0': {} + + '@lit/context@1.1.6': + dependencies: + '@lit/reactive-element': 2.1.1 + + '@lit/reactive-element@2.1.1': + dependencies: + '@lit-labs/ssr-dom-shim': 1.4.0 + '@manypkg/find-root@1.1.0': dependencies: '@babel/runtime': 7.28.2 @@ -15440,6 +15659,8 @@ snapshots: '@types/tinycolor2@1.4.6': {} + '@types/trusted-types@2.0.7': {} + '@types/unist@2.0.11': {} '@types/unist@3.0.3': {} @@ -20921,6 +21142,8 @@ snapshots: flatted: 3.3.3 hookified: 1.11.0 + flatpickr@4.6.13: {} + flatted@2.0.2: {} flatted@3.3.3: {} @@ -22676,6 +22899,22 @@ snapshots: dependencies: uc.micro: 2.1.0 + lit-element@4.2.1: + dependencies: + '@lit-labs/ssr-dom-shim': 1.4.0 + '@lit/reactive-element': 2.1.1 + lit-html: 3.3.1 + + lit-html@3.3.1: + dependencies: + '@types/trusted-types': 2.0.7 + + lit@3.3.1: + dependencies: + '@lit/reactive-element': 2.1.1 + lit-element: 4.2.1 + lit-html: 3.3.1 + livereload-js@3.4.1: {} load-json-file@4.0.0: diff --git a/showcase/app/components/page-components/badge-count/carbonization.gts b/showcase/app/components/page-components/badge-count/carbonization.gts new file mode 100644 index 00000000000..d6b29dc18f6 --- /dev/null +++ b/showcase/app/components/page-components/badge-count/carbonization.gts @@ -0,0 +1,139 @@ +import type { TemplateOnlyComponent } from '@ember/component/template-only'; +import { pageTitle } from 'ember-page-title'; +import { array } from '@ember/helper'; + +import ShwTextH1 from 'showcase/components/shw/text/h1'; +import ShwTextH2 from 'showcase/components/shw/text/h2'; +import ShwFlex from 'showcase/components/shw/flex'; +import ShwDivider from 'showcase/components/shw/divider'; +import ShwCarbonizationComparisonGrid from 'showcase/components/shw/carbonization/comparison-grid'; + +import { HdsBadgeCount } from '@hashicorp/design-system-components/components'; +import { + SIZES, + TYPES, +} from '@hashicorp/design-system-components/components/hds/badge-count/index'; + +const BadgeCountIndex: TemplateOnlyComponent = ; + +export default BadgeCountIndex; diff --git a/showcase/app/components/page-components/badge-count/index.gts b/showcase/app/components/page-components/badge-count/index.gts index f0783b3ad1d..dbe5d3eef33 100644 --- a/showcase/app/components/page-components/badge-count/index.gts +++ b/showcase/app/components/page-components/badge-count/index.gts @@ -4,7 +4,6 @@ */ import type { TemplateOnlyComponent } from '@ember/component/template-only'; - import { pageTitle } from 'ember-page-title'; import ShwTextH1 from 'showcase/components/shw/text/h1'; diff --git a/showcase/app/components/page-components/badge/carbonization.gts b/showcase/app/components/page-components/badge/carbonization.gts new file mode 100644 index 00000000000..a60cec94f89 --- /dev/null +++ b/showcase/app/components/page-components/badge/carbonization.gts @@ -0,0 +1,352 @@ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ + +import type { TemplateOnlyComponent } from '@ember/component/template-only'; +import { pageTitle } from 'ember-page-title'; +import { array } from '@ember/helper'; + +import ShwTextH1 from 'showcase/components/shw/text/h1'; +import ShwTextH2 from 'showcase/components/shw/text/h2'; +import ShwFlex from 'showcase/components/shw/flex'; +import ShwDivider from 'showcase/components/shw/divider'; +import ShwCarbonizationComparisonGrid from 'showcase/components/shw/carbonization/comparison-grid'; + +import { + HdsBadge, + HdsIcon, +} from '@hashicorp/design-system-components/components'; +import { + SIZES, + TYPES, +} from '@hashicorp/design-system-components/components/hds/badge/index'; + +const BadgeCarbonization: TemplateOnlyComponent = ; + +export default BadgeCarbonization; diff --git a/showcase/app/components/page-components/badge/sub-sections/content.gts b/showcase/app/components/page-components/badge/sub-sections/content.gts index 0f49ea5915a..2e08c5da7a1 100644 --- a/showcase/app/components/page-components/badge/sub-sections/content.gts +++ b/showcase/app/components/page-components/badge/sub-sections/content.gts @@ -6,8 +6,8 @@ import type { TemplateOnlyComponent } from '@ember/component/template-only'; import style from 'ember-style-modifier'; -import ShwFlex from 'showcase/components/shw/flex'; import ShwTextH2 from 'showcase/components/shw/text/h2'; +import ShwFlex from 'showcase/components/shw/flex'; import { HdsBadge } from '@hashicorp/design-system-components/components'; diff --git a/showcase/app/components/page-components/button/carbonization.gts b/showcase/app/components/page-components/button/carbonization.gts new file mode 100644 index 00000000000..40c5673aba7 --- /dev/null +++ b/showcase/app/components/page-components/button/carbonization.gts @@ -0,0 +1,250 @@ +import type { TemplateOnlyComponent } from '@ember/component/template-only'; +import { helper } from '@ember/component/helper'; +import { pageTitle } from 'ember-page-title'; +import { capitalize } from '@ember/string'; +import { array } from '@ember/helper'; +import style from 'ember-style-modifier'; +import { eq } from 'ember-truth-helpers'; + +import ShwTextH1 from 'showcase/components/shw/text/h1'; +import ShwTextH2 from 'showcase/components/shw/text/h2'; +import ShwTextH3 from 'showcase/components/shw/text/h3'; +import ShwTextBody from 'showcase/components/shw/text/body'; +import ShwFlex from 'showcase/components/shw/flex'; +import ShwDivider from 'showcase/components/shw/divider'; +import ShwCarbonizationComparisonGrid from 'showcase/components/shw/carbonization/comparison-grid'; + +import { + HdsButton, + HdsIcon, +} from '@hashicorp/design-system-components/components'; +import { + COLORS, + SIZES, +} from '@hashicorp/design-system-components/components/hds/button/index'; + +// these are used only for presentation purpose in the showcase +const STATES = ['default', 'hover', 'active', 'focus', 'disabled']; + +const MAPPING_HDS_COLOR_TO_CDS_KIND = { + primary: 'primary', + secondary: 'secondary', + tertiary: 'tertiary', + critical: 'danger', +} as const; + +// tried to use `HdsButtonColors` from the HdsButton types but doesn't make TS happy +type HdsButtonColors = [keyof typeof MAPPING_HDS_COLOR_TO_CDS_KIND]; + +const mapHdsColorToCdsKind = helper(function ([color]: HdsButtonColors) { + return MAPPING_HDS_COLOR_TO_CDS_KIND[color]; +}); + +const ButtonCarbonization: TemplateOnlyComponent = ; + +export default ButtonCarbonization; diff --git a/showcase/app/components/page-foundations/color/carbonization.gts b/showcase/app/components/page-foundations/color/carbonization.gts new file mode 100644 index 00000000000..938da15fa9d --- /dev/null +++ b/showcase/app/components/page-foundations/color/carbonization.gts @@ -0,0 +1,26 @@ +import Component from '@glimmer/component'; +import { pageTitle } from 'ember-page-title'; + +import ShwTextH1 from 'showcase/components/shw/text/h1'; +import ShwCarbonizationTokenPreviewColor from 'showcase/components/shw/carbonization/token-preview-color'; + +import TOKENS_RAW from '@hashicorp/design-system-tokens/dist/docs/products/tokens.json'; + +export default class ColorCarbonization extends Component { + get allColorTokens() { + return TOKENS_RAW.filter((token) => token.$type === 'color'); + } + + +} diff --git a/showcase/app/components/page-foundations/color/index.gts b/showcase/app/components/page-foundations/color/index.gts new file mode 100644 index 00000000000..ece3c576e18 --- /dev/null +++ b/showcase/app/components/page-foundations/color/index.gts @@ -0,0 +1,20 @@ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +import type { TemplateOnlyComponent } from '@ember/component/template-only'; +import { pageTitle } from 'ember-page-title'; + +import ShwTextH1 from 'showcase/components/shw/text/h1'; + +const ColorIndex: TemplateOnlyComponent = ; + +export default ColorIndex; diff --git a/showcase/app/components/page-foundations/color/sub-sections/carbonization.gts b/showcase/app/components/page-foundations/color/sub-sections/carbonization.gts new file mode 100644 index 00000000000..33ec0911562 --- /dev/null +++ b/showcase/app/components/page-foundations/color/sub-sections/carbonization.gts @@ -0,0 +1,23 @@ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ + +import Component from '@glimmer/component'; + +import ShwCarbonizationTokenPreviewColor from 'showcase/components/shw/carbonization/token-preview-color'; + +import TOKENS_RAW from '@hashicorp/design-system-tokens/dist/docs/products/tokens.json'; + +export default class SubSectionCarbonized extends Component { + get allColorTokens() { + return TOKENS_RAW.filter((token) => token.$type === 'color'); + } + + +} diff --git a/showcase/app/components/page-foundations/focus-ring/carbonization.gts b/showcase/app/components/page-foundations/focus-ring/carbonization.gts new file mode 100644 index 00000000000..d3feb5292cf --- /dev/null +++ b/showcase/app/components/page-foundations/focus-ring/carbonization.gts @@ -0,0 +1,67 @@ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +import type { TemplateOnlyComponent } from '@ember/component/template-only'; +import { pageTitle } from 'ember-page-title'; +import style from 'ember-style-modifier/modifiers/style'; + +import ShwTextH1 from 'showcase/components/shw/text/h1'; + +import ShwFlex from 'showcase/components/shw/flex'; +import ShwPlaceholder from 'showcase/components/shw/placeholder'; +import ShwCarbonizationComparisonGrid from 'showcase/components/shw/carbonization/comparison-grid'; + +const FocusRingIndex: TemplateOnlyComponent = ; + +export default FocusRingIndex; diff --git a/showcase/app/components/page-foundations/typography/carbonization.gts b/showcase/app/components/page-foundations/typography/carbonization.gts new file mode 100644 index 00000000000..02e70fc5953 --- /dev/null +++ b/showcase/app/components/page-foundations/typography/carbonization.gts @@ -0,0 +1,42 @@ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +import type { TemplateOnlyComponent } from '@ember/component/template-only'; +import { pageTitle } from 'ember-page-title'; +import { notEq } from 'ember-truth-helpers'; + +import ShwTextH1 from 'showcase/components/shw/text/h1'; + +import ShwFlex from 'showcase/components/shw/flex'; +import ShwCarbonizationComparisonGrid from 'showcase/components/shw/carbonization/comparison-grid'; + +import { STYLES_COMBINATIONS } from './sub-sections/styles'; + +const TypographyCarbonization: TemplateOnlyComponent = ; + +export default TypographyCarbonization; diff --git a/showcase/app/components/page-foundations/typography/sub-sections/styles.gts b/showcase/app/components/page-foundations/typography/sub-sections/styles.gts index a79719d9629..ff1ceb8a4f2 100644 --- a/showcase/app/components/page-foundations/typography/sub-sections/styles.gts +++ b/showcase/app/components/page-foundations/typography/sub-sections/styles.gts @@ -9,7 +9,7 @@ import ShwTextBody from 'showcase/components/shw/text/body'; import ShwTextH2 from 'showcase/components/shw/text/h2'; // we add all the allowed combinations here, per design specs -const STYLES_COMBINATIONS = { +export const STYLES_COMBINATIONS = { 'display-500': ['bold'], 'display-400': ['medium', 'semibold', 'bold'], 'display-300': ['medium', 'semibold', 'bold'], diff --git a/showcase/app/components/shw/carbonization/comparison-grid/index.gts b/showcase/app/components/shw/carbonization/comparison-grid/index.gts new file mode 100644 index 00000000000..4da8f4e6fd7 --- /dev/null +++ b/showcase/app/components/shw/carbonization/comparison-grid/index.gts @@ -0,0 +1,69 @@ +import type { TemplateOnlyComponent } from '@ember/component/template-only'; +import { eq } from 'ember-truth-helpers'; + +import ShwLabel from 'showcase/components/shw/label'; +import ShwCarbonizationComparisonGridItem from './item'; + +export interface ShwCarbonizationComparisonGridSignature { + Args: { + label?: string; + hideThemeLabels?: boolean; + }; + Blocks: { + label: []; + theming: []; + reference: []; + }; + Element: HTMLDivElement; +} + +export const THEMES = [ + 'hds', + 'cds-g0', + 'cds-g10', + 'cds-g90', + 'cds-g100', +] as const; + +export type Theme = (typeof THEMES)[number]; + +const ShwCarbonizationComparisonGrid: TemplateOnlyComponent = + ; + +export default ShwCarbonizationComparisonGrid; diff --git a/showcase/app/components/shw/carbonization/comparison-grid/item.gts b/showcase/app/components/shw/carbonization/comparison-grid/item.gts new file mode 100644 index 00000000000..6fae6cadda7 --- /dev/null +++ b/showcase/app/components/shw/carbonization/comparison-grid/item.gts @@ -0,0 +1,85 @@ +import Component from '@glimmer/component'; +import { hash } from '@ember/helper'; + +import ShwLabel from '../../label'; + +import type { ComponentLike } from '@glint/template'; +import type { ShwLabelSignature } from 'showcase/components/shw/label'; + +import type { Theme } from './index'; + +export interface ShwCarbonizationComparisonGridItemSignature { + Args: { + label?: string; + theme: Theme; + scope: 'theming' | 'reference'; + }; + Blocks: { + default: [ + { + Label?: ComponentLike; + }, + ]; + }; + Element: HTMLDivElement; +} + +export default class ShwCarbonizationComparisonGridItem extends Component { + get areaName(): string { + if (this.args.scope === 'reference') { + // `hds` is not included in the loop for the references + return this.args.theme.replace('cds', 'cwc'); + } else { + return this.args.theme; + } + } + + get classNames(): string { + const classes = ['shw-carbonization-comparison-grid__item']; + + if (this.args.scope === 'theming') { + // here we use the custom HDS theming selector + classes.push(`hds-theme-${this.args.theme}`); + } + + if (this.args.scope === 'reference') { + // here we use the web-components specific selector (see: https://github.com/carbon-design-system/carbon/blob/main/packages/web-components/docs/carbon-cdn-style-helpers.mdx#carbon-theme-zoning-classes) + let selector; + switch (this.args.theme) { + case 'cds-g100': + selector = 'cds-theme-zone-g100'; + break; + case 'cds-g90': + selector = 'cds-theme-zone-g90'; + break; + case 'cds-g10': + selector = 'cds-theme-zone-g10'; + break; + default: + selector = 'cds-theme-zone-white'; + break; + } + classes.push(selector); + } + + // add a class based on `this.area` + classes.push( + `shw-carbonization-comparison-grid__item--area-${this.areaName}`, + ); + + return classes.join(' '); + } + + +} diff --git a/showcase/app/components/shw/carbonization/token-preview-color/index.gts b/showcase/app/components/shw/carbonization/token-preview-color/index.gts new file mode 100644 index 00000000000..46601622dbb --- /dev/null +++ b/showcase/app/components/shw/carbonization/token-preview-color/index.gts @@ -0,0 +1,45 @@ +import Component from '@glimmer/component'; +import { htmlSafe } from '@ember/template'; + +import type { SafeString } from '@ember/template'; + +import ShwCarbonizationComparisonGrid from 'showcase/components/shw/carbonization/comparison-grid'; + +interface ColorTokenRaw { + name: string; + $value: string; +} + +export interface ShwCarbonizationTokenPreviewColorSignature { + Args: { + token: ColorTokenRaw; + }; +} + +export default class ShwCarbonizationTokenPreviewColor extends Component { + get shortName(): string { + return this.args.token.name.replace(/^token-/, ''); + } + + get style(): SafeString | undefined { + const styles: string[] = []; + if (this.args.token.$value) { + styles.push(`background: ${this.args.token.$value}`); + } + return styles.length > 0 ? htmlSafe(styles.join('; ')) : undefined; + } + + +} diff --git a/showcase/app/components/shw/yield.gts b/showcase/app/components/shw/yield.gts new file mode 100644 index 00000000000..2bc89c6157b --- /dev/null +++ b/showcase/app/components/shw/yield.gts @@ -0,0 +1,18 @@ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ + +import type { TemplateOnlyComponent } from '@ember/component/template-only'; + +export interface ShwYieldSignature { + Blocks: { + default?: []; + }; +} + +const ShwYield: TemplateOnlyComponent = ; + +export default ShwYield; diff --git a/showcase/app/index.html b/showcase/app/index.html index e62bd7fa867..9ee3df3661e 100644 --- a/showcase/app/index.html +++ b/showcase/app/index.html @@ -27,6 +27,42 @@ + + + + + + + + + + + + + {{content-for "head-footer"}} @@ -39,4 +75,4 @@ {{content-for "body-footer"}} - + \ No newline at end of file diff --git a/showcase/app/router.ts b/showcase/app/router.ts index c63b6c679e1..18884f9f6cc 100644 --- a/showcase/app/router.ts +++ b/showcase/app/router.ts @@ -13,9 +13,16 @@ export default class Router extends EmberRouter { Router.map(function () { this.route('page-foundations', { path: 'foundations' }, function () { - this.route('typography'); + this.route('color', function () { + this.route('carbonization'); + }); + this.route('typography', function () { + this.route('carbonization'); + }); this.route('elevation'); - this.route('focus-ring'); + this.route('focus-ring', function () { + this.route('carbonization'); + }); this.route('breakpoints', function () { this.route('frameless', function () { this.route('demo-viewport-breakpoints-visualization'); @@ -45,10 +52,16 @@ Router.map(function () { }); }); this.route('application-state'); - this.route('badge'); - this.route('badge-count'); + this.route('badge', function () { + this.route('carbonization'); + }); + this.route('badge-count', function () { + this.route('carbonization'); + }); this.route('breadcrumb'); - this.route('button'); + this.route('button', function () { + this.route('carbonization'); + }); this.route('button-set'); this.route('card'); this.route('code-block'); diff --git a/showcase/app/styles/_globals.scss b/showcase/app/styles/_globals.scss index 76695a082fc..53388c5007f 100644 --- a/showcase/app/styles/_globals.scss +++ b/showcase/app/styles/_globals.scss @@ -4,6 +4,7 @@ */ @use "./typography" as *; +@use '@carbon/type' as carbon-type; *, *::before, @@ -173,6 +174,10 @@ body { } } } + + .shw-landing-lists__vertical-divider { + border-left: 2px solid #ccc; + } } // special classes for headings with anchor links diff --git a/showcase/app/styles/app.scss b/showcase/app/styles/app.scss index c3151eb5e6e..a63a273e1f0 100644 --- a/showcase/app/styles/app.scss +++ b/showcase/app/styles/app.scss @@ -28,6 +28,11 @@ @use "./mock-components/app"; @use "./mock-components/demo/breakpoints"; +// carbonization + +@use "./showcase-components/carbonization/cds-theming"; +@use "./showcase-components/carbonization/comparison-grid"; +@use "./showcase-components/carbonization/token-preview-color"; // Notice: this list can be automatically edited by the Ember blueprint, please don't remove the start/end comments // START COMPONENT PAGES IMPORTS diff --git a/showcase/app/styles/showcase-components/carbonization/cds-theming.scss b/showcase/app/styles/showcase-components/carbonization/cds-theming.scss new file mode 100644 index 00000000000..eae41165dd7 --- /dev/null +++ b/showcase/app/styles/showcase-components/carbonization/cds-theming.scss @@ -0,0 +1,53 @@ +// inspired by: +// - https://github.com/CarloMcG/portfolio/blob/d96e73f2841bc47317318a98dc1c755a64c9eeb4/src/theme.scss +// - https://github.com/carbon-design-system/carbon/blob/b78a6bda8a594cc5f3b60ab3141edd63378d5aa6/packages/react/.storybook/styles.scss#L8-L27 + +// @use '@carbon/themes' as cds-themes with ( +// $font-path: '~@ibm/plex' +// ); +// @use '@carbon/themes' as cds-themes; +// @use '@carbon/themes/scss/themes' as *; + +// :root { +// @include cds-themes.theme($white); +// } + +// [data-carbon-theme='g0'] { +// @include cds-themes.theme($white); +// } + +// [data-carbon-theme='g10'] { +// @include cds-themes.theme($g10); +// } + +// [data-carbon-theme='g90'] { +// @include cds-themes.theme($g90); +// } + +// [data-carbon-theme='g100'] { +// @include cds-themes.theme($g100); +// } + +// TODO TEMP understand how we can set the font-family for the web components without defining it at `` level + +// these are commented for now +// [data-carbon-theme='g0'], +// [data-carbon-theme='g10'], +// [data-carbon-theme='g90'], +// [data-carbon-theme='g100'] + +// see: https://github.com/carbon-design-system/carbon/blob/main/packages/web-components/docs/carbon-cdn-style-helpers.mdx#carbon-theme-zoning-classes +.cds-theme-zone-white, +.cds-theme-zone-g10, +.cds-theme-zone-g90, +.cds-theme-zone-g100 { + font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif; + + code { + font-family: 'IBM Plex Mono', Menlo, 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace + } + + button, select, input, textarea { + font-family: inherit + } +} diff --git a/showcase/app/styles/showcase-components/carbonization/comparison-grid.scss b/showcase/app/styles/showcase-components/carbonization/comparison-grid.scss new file mode 100644 index 00000000000..9b0c34b662a --- /dev/null +++ b/showcase/app/styles/showcase-components/carbonization/comparison-grid.scss @@ -0,0 +1,76 @@ +.shw-carbonization-comparison-grid { + & + & { + margin-top: 2rem; + } + + display: grid; + grid-template-areas: + "hds cds-g0 cds-g10 cds-g90 cds-g100" + "--- cwc-g0 cwc-g10 cwc-g90 cwc-g100"; + grid-template-rows: auto auto; + grid-template-columns: repeat(5, 1fr); + row-gap: 12px; + column-gap: 8px; +} + +.shw-carbonization-comparison-grid__top-label { + margin-top: 2rem; +} + +// ITEM + +@each $area in 'hds', 'cds-g0', 'cds-g10', 'cds-g90', 'cds-g100', 'cwc-g0', 'cwc-g10', 'cwc-g90', 'cwc-g100' { + .shw-carbonization-comparison-grid__item--area-#{$area} { + grid-area: #{$area}; + } +} + +.shw-carbonization-comparison__item-label { + // override the margin since we're using `row-gap` above + margin-bottom: 0; +} + +// THEMING BACKGROUNDS + +.shw-carbonization-comparison-grid__item-content { + padding: 8px; + background-color: var(--content-background-color); +} + +.shw-carbonization-comparison-grid__item--area-hds { + --content-background-color: var(--token-color-surface-primary); +} + +// TODO replace the hex values (copied from the `--cds-background` themed variable) with CSS design tokens from our theming +.shw-carbonization-comparison-grid__item--area-cds-g0 { + --content-background-color: #fff; +} + +.shw-carbonization-comparison-grid__item--area-cds-g10 { + --content-background-color: #f4f4f4; +} + +.shw-carbonization-comparison-grid__item--area-cds-g90 { + --content-background-color: #262626; +} + +.shw-carbonization-comparison-grid__item--area-cds-g100 { + --content-background-color: #161616; +} + +.shw-carbonization-comparison-grid__item--area-cwc-g0, +.shw-carbonization-comparison-grid__item--area-cwc-g10, +.shw-carbonization-comparison-grid__item--area-cwc-g90, +.shw-carbonization-comparison-grid__item--area-cwc-g100 { + --content-background-color: var(--cds-background); +} + + +// DEBUG + +// .shw-carbonization-comparison-grid { +// outline: 1px solid blue; +// } +// .shw-carbonization-comparison-grid__item { +// outline: 1px dotted magenta; +// } diff --git a/showcase/app/styles/showcase-components/carbonization/token-preview-color.scss b/showcase/app/styles/showcase-components/carbonization/token-preview-color.scss new file mode 100644 index 00000000000..8c8adb39d5b --- /dev/null +++ b/showcase/app/styles/showcase-components/carbonization/token-preview-color.scss @@ -0,0 +1,6 @@ +.shw-carbonization-token-preview-color { + width: 100%; + height: 32px; + border-radius: 6px; + box-shadow: inset 0 0 1px 0 rgb(0, 0, 0, 25%); +} diff --git a/showcase/app/templates/index.hbs b/showcase/app/templates/index.hbs index 76a5d9969d8..760e48fa998 100644 --- a/showcase/app/templates/index.hbs +++ b/showcase/app/templates/index.hbs @@ -7,6 +7,11 @@
Foundations
    +
  1. + + Color + +
  2. Typography @@ -42,6 +47,7 @@
+
@@ -386,4 +392,44 @@
+ +
+ +
+ Carbonization +
    +
  1. + + Color + +
    2. +
  2. + + Typography + +
    3. +
  3. + + Focus-ring + +
    4. +
+
    +
  1. + + Badge + +
    2. +
  2. + + BadgeCount + +
    3. +
  3. + + Button + +
    4. +
+
\ No newline at end of file diff --git a/showcase/app/templates/page-components/badge-count/carbonization.gts b/showcase/app/templates/page-components/badge-count/carbonization.gts new file mode 100644 index 00000000000..aebdf86a67b --- /dev/null +++ b/showcase/app/templates/page-components/badge-count/carbonization.gts @@ -0,0 +1,13 @@ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +import type { TemplateOnlyComponent } from '@ember/component/template-only'; + +import BadgeCountCarbonization from 'showcase/components/page-components/badge-count/carbonization'; + +const PageComponentsBadgeCountCarbonization: TemplateOnlyComponent = ; + +export default PageComponentsBadgeCountCarbonization; diff --git a/showcase/app/templates/page-components/badge-count.gts b/showcase/app/templates/page-components/badge-count/index.gts similarity index 100% rename from showcase/app/templates/page-components/badge-count.gts rename to showcase/app/templates/page-components/badge-count/index.gts diff --git a/showcase/app/templates/page-components/badge/carbonization.gts b/showcase/app/templates/page-components/badge/carbonization.gts new file mode 100644 index 00000000000..24fa74bfc3e --- /dev/null +++ b/showcase/app/templates/page-components/badge/carbonization.gts @@ -0,0 +1,13 @@ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +import type { TemplateOnlyComponent } from '@ember/component/template-only'; + +import BadgeCarbonization from 'showcase/components/page-components/badge/carbonization'; + +const PageComponentsBadgeCarbonization: TemplateOnlyComponent = ; + +export default PageComponentsBadgeCarbonization; diff --git a/showcase/app/templates/page-components/badge.gts b/showcase/app/templates/page-components/badge/index.gts similarity index 100% rename from showcase/app/templates/page-components/badge.gts rename to showcase/app/templates/page-components/badge/index.gts diff --git a/showcase/app/templates/page-components/button/carbonization.gts b/showcase/app/templates/page-components/button/carbonization.gts new file mode 100644 index 00000000000..0e8250f863f --- /dev/null +++ b/showcase/app/templates/page-components/button/carbonization.gts @@ -0,0 +1,13 @@ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +import type { TemplateOnlyComponent } from '@ember/component/template-only'; + +import ButtonCarbonization from 'showcase/components/page-components/button/carbonization'; + +const PageComponentsButtonCarbonization: TemplateOnlyComponent = ; + +export default PageComponentsButtonCarbonization; diff --git a/showcase/app/templates/page-components/button.gts b/showcase/app/templates/page-components/button/index.gts similarity index 100% rename from showcase/app/templates/page-components/button.gts rename to showcase/app/templates/page-components/button/index.gts diff --git a/showcase/app/templates/page-foundations/color/carbonization.gts b/showcase/app/templates/page-foundations/color/carbonization.gts new file mode 100644 index 00000000000..279d97b1a0d --- /dev/null +++ b/showcase/app/templates/page-foundations/color/carbonization.gts @@ -0,0 +1,13 @@ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +import type { TemplateOnlyComponent } from '@ember/component/template-only'; + +import ColorCarbonization from 'showcase/components/page-foundations/color/carbonization'; + +const PageFoundationsColorCarbonization: TemplateOnlyComponent = ; + +export default PageFoundationsColorCarbonization; diff --git a/showcase/app/templates/page-foundations/color/index.gts b/showcase/app/templates/page-foundations/color/index.gts new file mode 100644 index 00000000000..79e5611c648 --- /dev/null +++ b/showcase/app/templates/page-foundations/color/index.gts @@ -0,0 +1,13 @@ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +import type { TemplateOnlyComponent } from '@ember/component/template-only'; + +import ColorIndex from 'showcase/components/page-foundations/color'; + +const PageFoundationsColor: TemplateOnlyComponent = ; + +export default PageFoundationsColor; diff --git a/showcase/app/templates/page-foundations/focus-ring/carbonization.gts b/showcase/app/templates/page-foundations/focus-ring/carbonization.gts new file mode 100644 index 00000000000..a9904339527 --- /dev/null +++ b/showcase/app/templates/page-foundations/focus-ring/carbonization.gts @@ -0,0 +1,13 @@ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ +import type { TemplateOnlyComponent } from '@ember/component/template-only'; + +import FocusRingCarbonization from 'showcase/components/page-foundations/focus-ring/carbonization'; + +const PageFoundationsFocusRingCarbonization: TemplateOnlyComponent = ; + +export default PageFoundationsFocusRingCarbonization; diff --git a/showcase/app/templates/page-foundations/focus-ring.gts b/showcase/app/templates/page-foundations/focus-ring/index.gts similarity index 100% rename from showcase/app/templates/page-foundations/focus-ring.gts rename to showcase/app/templates/page-foundations/focus-ring/index.gts diff --git a/showcase/app/templates/page-foundations/typography/carbonization.gts b/showcase/app/templates/page-foundations/typography/carbonization.gts new file mode 100644 index 00000000000..c567b92767f --- /dev/null +++ b/showcase/app/templates/page-foundations/typography/carbonization.gts @@ -0,0 +1,9 @@ +import type { TemplateOnlyComponent } from '@ember/component/template-only'; + +import TypographyCarbonization from 'showcase/components/page-foundations/typography/carbonization'; + +const PageFoundationsTypographyCarbonization: TemplateOnlyComponent = ; + +export default PageFoundationsTypographyCarbonization; diff --git a/showcase/app/templates/page-foundations/typography.gts b/showcase/app/templates/page-foundations/typography/index.gts similarity index 100% rename from showcase/app/templates/page-foundations/typography.gts rename to showcase/app/templates/page-foundations/typography/index.gts diff --git a/showcase/package.json b/showcase/package.json index 471363afa66..815b25ba03d 100644 --- a/showcase/package.json +++ b/showcase/package.json @@ -39,6 +39,11 @@ "@babel/core": "^7.27.1", "@babel/eslint-parser": "^7.27.1", "@babel/plugin-proposal-decorators": "^7.27.1", + "@carbon/grid": "^11.43.0", + "@carbon/layout": "^11.41.0", + "@carbon/themes": "^11.60.0", + "@carbon/type": "^11.47.0", + "@carbon/web-components": "^2.38.0", "@codemirror/lint": "^6.8.4", "@codemirror/state": "^6.5.0", "@ember/optional-features": "^2.2.0", @@ -57,6 +62,7 @@ "@glint/template": "^1.5.2", "@hashicorp/design-system-components": "workspace:*", "@hashicorp/design-system-tokens": "workspace:*", + "@ibm/plex": "^6.4.1", "@nullvoxpopuli/ember-composable-helpers": "^5.2.11", "@percy/cli": "^1.30.5", "@percy/ember": "^4.2.0",