[#3604] Refactor Lit components to Preact

package.json

@@ -139,7 +139,6 @@
     "raw-loader": "^4.0.2",
     "regenerator-runtime": "^0.14.1",
     "sass": "latest",
-    "sass-embedded": "^1.93.3",
     "sass-loader": "latest",
     "simulant": "latest",
     "sinon": "latest",

src/open_inwoner/cms/plugins/tests/test_zaken.py

@@ -70,7 +70,6 @@ def test_plugin_does_not_render_without_zgw_api_group_config(self):
         self.assertIn("<!-- end zaken plugin -->", html)
         # Should not contain any actual plugin content
         self.assertNotIn("oip-homepage-plugin-section", html)
-        self.assertNotIn("oip-zaken-plugin-container", html)
 
     def test_plugin_does_not_render_for_anonymous_user(self):
         ZGWApiGroupConfigFactory()
@@ -162,8 +161,6 @@ def test_htmx_content_endpoint_returns_empty_state(
         self.assertEqual(response.status_code, 200)
         content = response.content.decode("utf-8")
 
-        # Should render container with no items
-        self.assertIn("oip-zaken-plugin-container", content)
         # Should have no zaak items
         self.assertNotIn("oip-zaken-plugin-zaak-item", content)
 
@@ -225,8 +222,6 @@ def test_htmx_content_endpoint_complete_failure(self, mock_submissions, mock_cas
         self.assertEqual(response.status_code, 200)
         content = response.content.decode("utf-8")
 
-        # Should render container but with no items
-        self.assertIn("oip-zaken-plugin-container", content)
         # Should have no zaak items
         self.assertNotIn("oip-zaken-plugin-zaak-item", content)
 

src/open_inwoner/cms/plugins/views.py

@@ -12,6 +12,7 @@
 
 from open_inwoner.cms.cases.views.mixins import CaseLogMixin
 from open_inwoner.cms.cases.views.services import CaseListService
+from open_inwoner.cms.plugins.models import CMSZakenPluginConfig
 from open_inwoner.cms.plugins.models.zaken import MAX_CASES_DEFAULT, MIN_CASES
 from open_inwoner.htmx.mixins import RequiresHtmxMixin
 from open_inwoner.openzaak.types import UniformCase
@@ -27,6 +28,14 @@ class ZakenPluginContentView(RequiresHtmxMixin, CaseLogMixin, View):
     def get(self, request: HttpRequest, plugin_id: int) -> HttpResponse:
         case_service = CaseListService(request)
 
+        # Get plugin instance for title
+        try:
+            plugin_instance = CMSZakenPluginConfig.objects.get(pk=plugin_id)
+            plugin_title = plugin_instance.title
+        except CMSZakenPluginConfig.DoesNotExist:
+            logger.warning("Plugin instance not found", plugin_id=plugin_id)
+            plugin_title = _("Mijn Zaken")
+
         # determine no. of zaken to be displayed
         num_zaken = request.GET.get("num_zaken", 0)
         try:
@@ -72,6 +81,8 @@ def get(self, request: HttpRequest, plugin_id: int) -> HttpResponse:
                 "show_zaken_plugin": True,
                 "zaken": [],
                 "error_message": "We're experiencing technical difficulties showing your cases.",
+                "plugin_title": plugin_title,
+                "mijn_zaken_url": reverse("cases:index"),
             }
             return render(request, "cms/plugins/zaken/zaken.html", context)
 
@@ -117,6 +128,8 @@ def get(self, request: HttpRequest, plugin_id: int) -> HttpResponse:
             "show_zaken_plugin": True,
             "zaken": cases_for_component,
             "error_message": msg,
+            "plugin_title": plugin_title,
+            "mijn_zaken_url": reverse("cases:index"),
         }
 
         return render(request, "cms/plugins/zaken/zaken.html", context)

src/open_inwoner/react/components/HomePluginCardItem/HomePluginCardItem.scss

@@ -0,0 +1,97 @@
+.oip-home-plugin-card {
+  // TODO: to give these back to NLDS community, add these variables to OIP design-tokens package
+  --oip-plugin-card-background-color: #fff;
+  --oip-plugin-card-color: #333;
+  --oip-plugin-card-max-inline-size: 100%;
+  --oip-plugin-card-inline-size: 100%;
+  --oip-plugin-card-border-width: 1px;
+  --oip-plugin-card-border-style: solid;
+  --oip-plugin-card-border-color: #d2d2d2;
+  --oip-plugin-card-border-radius: 3px;
+  --oip-plugin-card-box-shadow: none;
+  --oip-plugin-card-display: flex;
+  --oip-plugin-card-row-gap: 24px;
+  --oip-plugin-card-heading-color: #000;
+  --oip-plugin-card-heading-padding-inline-start: 16px;
+  --oip-plugin-card-heading-padding-inline-end: 16px;
+  --oip-plugin-card-body-display: flex;
+  --oip-plugin-card-link-display: flex;
+  --oip-plugin-card-link-hover-text-decoration-thickness: 1px;
+  --oip-plugin-card-link-hover-text-decoration-line: underline;
+  --oip-plugin-card-link-hover-text-underline-offset: auto;
+  --oip-plugin-card-link-padding: 0;
+  --oip-plugin-card-content-gap: 16px;
+  --oip-plugin-card-content-padding-block-start: 16px;
+  --oip-plugin-card-content-padding-block-end: 16px;
+  --oip-plugin-card-body-padding-inline-start: 16px;
+  --oip-plugin-card-body-padding-inline-end: 16px;
+
+  cursor: pointer;
+  border: var(--oip-plugin-card-border-width)
+    var(--oip-plugin-card-border-style) var(--oip-plugin-card-border-color);
+  box-sizing: border-box;
+  position: relative;
+  background-color: var(--oip-plugin-card-background-color);
+  border-radius: var(--oip-plugin-card-border-radius);
+  box-shadow: var(--oip-plugin-card-box-shadow);
+  color: var(--oip-plugin-card-color);
+  font-family: 'Body', Arial, sans-serif;
+  display: var(--oip-plugin-card-display);
+  flex-direction: row;
+  height: 100%;
+  inline-size: var(--oip-plugin-card-inline-size);
+  max-inline-size: var(--oip-plugin-card-max-inline-size);
+  row-gap: var(--oip-plugin-card-row-gap);
+  min-width: 100%;
+  text-decoration: none;
+
+  &__content {
+    display: var(--oip-plugin-card-link-display);
+    gap: var(--oip-plugin-card-content-gap);
+    padding: var(--oip-plugin-card-content-padding-block-start)
+      var(--oip-plugin-card-content-padding-block-end);
+    width: 100%;
+    align-items: flex-end;
+  }
+
+  &__body {
+    display: var(--oip-plugin-card-body-display);
+    flex-direction: column;
+    gap: var(--oip-plugin-card-content-gap);
+    justify-content: space-between;
+    font-family: 'Body', sans-serif;
+    width: 100%;
+    height: 100%;
+    color: var(--oip-plugin-card-heading-color);
+
+    .utrecht-paragraph {
+      & + & {
+        font-weight: 400;
+      }
+
+      color: inherit;
+      font-weight: 700;
+      margin-block: 0;
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+
+      &-muted {
+        color: #676767;
+        margin-block: 0;
+        font-weight: 400;
+      }
+    }
+
+    .utrecht-heading-2 {
+      font-size: 20px;
+      margin-block: 0;
+    }
+  }
+
+  .material-icons-outlined {
+    color: var(--color-primary);
+    height: auto;
+    padding: 0;
+  }
+}

src/open_inwoner/react/components/HomePluginCardItem/HomePluginCardItem.stories.tsx

@@ -0,0 +1,37 @@
+import '@open-inwoner/design-tokens/dist/css/index.css';
+import type { Meta, StoryObj } from '@storybook/preact';
+import { withLoader } from '@react/lib/decorators/storybook';
+import { HOME_PLUGIN_CARD_ITEM_DEFINITION, HomepageCardTypes } from '.';
+import './HomePluginCardItem';
+import HomePluginCardItem from './HomePluginCardItem';
+
+const meta: Meta<HomepageCardTypes> = {
+  title: 'WebComponents/ZakenPluginZaakItem',
+  component: HomePluginCardItem,
+  parameters: {
+    layout: 'padded',
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<HomepageCardTypes>;
+
+export const Default: Story = {
+  args: {
+    description: 'Melding openbare ruimte',
+    identificatie: 'abcdef',
+    detailUrl: '/mijn-aanvragen/1/abcdef/status/',
+  },
+  decorators: [withLoader(HOME_PLUGIN_CARD_ITEM_DEFINITION.tagName)],
+  render: ({ description, identificatie, detailUrl }) => (
+    <oip-homepage-plugin-card
+      render-as-h3={false}
+      title="TEST"
+      description={description}
+      identificatie={identificatie}
+      detail-url={detailUrl}
+      render-as-heading={false}
+    />
+  ),
+};

src/open_inwoner/react/components/HomePluginCardItem/HomePluginCardItem.tsx

@@ -0,0 +1,53 @@
+import { AnyComponent as FC } from 'preact';
+import type { HomepageCardTypes } from './types';
+import './HomePluginCardItem.scss';
+import { MaterialIcon } from '../MaterialIcon';
+import clsx from 'clsx';
+import { kebabCase } from 'lodash';
+const HomePluginCardItem: FC<HomepageCardTypes> = ({
+  title,
+  description,
+  identificatie,
+  detailUrl,
+  date,
+  address,
+  renderAsHeading = false,
+}) => {
+  const Heading = String(renderAsHeading) !== 'false' ? 'h3' : 'p';
+  const addressLineFirst = title && date && address;
+  const id = 'card-' + kebabCase(identificatie);
+  return (
+    <a href={detailUrl} class="oip-home-plugin-card" aria-labelledby={id}>
+      <div class="oip-home-plugin-card__content">
+        <div class="oip-home-plugin-card__body">
+          <Heading
+            id={!addressLineFirst ? id : undefined}
+            class={clsx({
+              ['utrecht-heading-2']: !addressLineFirst,
+              ['utrecht-paragraph']: addressLineFirst,
+            })}
+          >
+            {addressLineFirst ? (
+              <>
+                {date && <span>{date}</span>}
+                {address && <span>{address}</span>}
+              </>
+            ) : (
+              title
+            )}
+          </Heading>
+          <p
+            class={clsx('utrecht-paragraph', 'utrecht-paragraph-muted')}
+            id={addressLineFirst ? id : undefined}
+          >
+            {addressLineFirst ? title : description}
+          </p>
+        </div>
+
+        <MaterialIcon name="east" />
+      </div>
+    </a>
+  );
+};
+
+export default HomePluginCardItem;

src/open_inwoner/react/components/HomePluginCardItem/constants.ts

@@ -0,0 +1,25 @@
+/**
+ * Web component configuration
+ *
+ * This is the single source of truth for the HomePluginCardItem component.
+ * The central registry is built from these definitions.
+ */
+import { WebComponentDefinition } from '@react/lib/web-component';
+import type { HomepageCardTypes } from '.';
+
+export const HOME_PLUGIN_CARD_ITEM_DEFINITION: WebComponentDefinition<
+  'oip-homepage-plugin-card',
+  HomepageCardTypes
+> = {
+  tagName: 'oip-homepage-plugin-card',
+  propNames: [
+    'description',
+    'identificatie',
+    'detailUrl',
+    'date',
+    'address',
+    'renderAsHeading',
+  ],
+  options: { shadow: false, i18n: false },
+  importer: () => import('./HomePluginCardItem'),
+};