refactor(cc-homepage-template-project): use cc-block as wrapper and drop adapt-height

Replace the custom border/title wrapper with `cc-block` (title in
`header-title` slot, content in `content` slot). Remove the
`adapt-height` mode and its related styles/story — the component now
sizes naturally to its content.

Author: clara-layus-cc

src/components/cc-homepage-template-project/cc-homepage-template-project.js

@@ -4,6 +4,7 @@ import { iconRemixArrowRightSLine as iconChevron } from '../../assets/cc-remix.i
 import { fakeString } from '../../lib/fake-strings.js';
 import { skeletonStyles } from '../../styles/skeleton.js';
 import { i18n } from '../../translations/translation.js';
+import '../cc-block/cc-block.js';
 import '../cc-icon/cc-icon.js';
 import '../cc-notice/cc-notice.js';
 
@@ -22,17 +23,13 @@ const SKELETON_PROJECTS = new Array(5).fill({ name: fakeString(10), description:
 export class CcHomepageTemplateProject extends LitElement {
   static get properties() {
     return {
-      adaptHeight: { type: Boolean, attribute: 'adapt-height', reflect: true },
       state: { type: Object },
     };
   }
 
   constructor() {
     super();
 
-    /** @type {boolean} Enables adaptive height mode: rows adjust their spacing to fill available height */
-    this.adaptHeight = false;
-
     /** @type {HomepageTemplateProjectState} Sets the state of the component */
     this.state = { type: 'loading' };
   }
@@ -42,19 +39,22 @@ export class CcHomepageTemplateProject extends LitElement {
     const projects = this.state.type === 'loaded' ? this.state.projects : SKELETON_PROJECTS;
 
     return html`
-      <div class="wrapper">
-        <div class="title">${i18n('cc-homepage-template-project.title')}</div>
+      <cc-block>
+        <div slot="header-title">${i18n('cc-homepage-template-project.title')}</div>
         ${this.state.type === 'error'
-          ? html` <cc-notice intent="warning" message="${i18n('cc-homepage-template-project.error')}"></cc-notice> `
-          : ''}
-        ${this.state.type !== 'error'
           ? html`
-              <ul class="project-list ${classMap({ skeleton })}">
+              <cc-notice
+                slot="content"
+                intent="warning"
+                message="${i18n('cc-homepage-template-project.error')}"
+              ></cc-notice>
+            `
+          : html`
+              <ul slot="content" class="project-list ${classMap({ skeleton })}">
                 ${projects.map((project) => this._renderProjectRow(project))}
               </ul>
-            `
-          : ''}
-      </div>
+            `}
+      </cc-block>
     `;
   }
 
@@ -85,33 +85,16 @@ export class CcHomepageTemplateProject extends LitElement {
           display: block;
         }
 
-        .wrapper {
-          border: solid 1px var(--cc-color-border-neutral-weak, #e7e7e7);
-          border-radius: var(--cc-border-radius-default, 0.25em);
-          box-sizing: border-box;
-          display: flex;
-          flex-direction: column;
-          gap: 1.25em;
-          height: 100%;
-          padding: 2em 1.25em;
-        }
-
-        .title {
-          color: var(--cc-color-text-primary-strongest, #000);
-          font-size: 1.2em;
-          font-weight: bold;
-          margin: 0 0.75em;
+        cc-block {
+          padding: 1em;
         }
 
         .project-list {
           display: flex;
-          flex: 1;
           flex-direction: column;
           gap: 0.3em;
           list-style: none;
           margin: 0;
-          min-height: 0;
-          overflow: auto;
           padding: 0;
         }
 
@@ -120,30 +103,11 @@ export class CcHomepageTemplateProject extends LitElement {
           border-radius: var(--cc-border-radius-default, 0.25em);
           display: flex;
           gap: 1em;
+          margin-inline: 0.2em;
           padding: 0.6em 0.8em;
           text-decoration: none;
         }
 
-        /* Adaptive height mode */
-
-        :host([adapt-height]) .wrapper {
-          container-type: size;
-        }
-
-        :host([adapt-height]) .project-list {
-          gap: 0;
-        }
-
-        :host([adapt-height]) .project-list li {
-          display: flex;
-          flex: 1;
-        }
-
-        :host([adapt-height]) .project-row {
-          flex: 1;
-          padding-block: clamp(0.2em, 2cqh, 0.6em);
-        }
-
         .project-row:hover {
           background: linear-gradient(90deg, rgb(56 49 241 / 20%) 0%, rgb(135 46 237 / 20%) 100%);
         }

src/components/cc-homepage-template-project/cc-homepage-template-project.stories.js

@@ -73,18 +73,3 @@ export const error = makeStory(conf, {
     },
   ],
 });
-
-export const fixedHeight = makeStory(conf, {
-  docs: 'With `adapt-height`, the component adapts rows spacing to fill the available height.',
-  css: `cc-homepage-template-project { height: 30em; }`,
-  items: [
-    {
-      adaptHeight: true,
-      /** @type {HomepageTemplateProjectStateLoaded} */
-      state: {
-        type: 'loaded',
-        projects: PROJECTS_ITEMS,
-      },
-    },
-  ],
-});