@backstage-community/plugin-announcements 2.7.0 → 2.8.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @backstage-community/plugin-announcements
 
+## 2.8.0
+
+### Minor Changes
+
+- daaeefa: Migrated `AnnouncementsCard` component to Backstage UI.
+
+### Patch Changes
+
+- ebf4891: Updated dependency `slugify` to `1.6.9`.
+
 ## 2.7.0
 
 ### Minor Changes

package/dist/components/AnnouncementsCard/AnnouncementsCard.esm.js

@@ -1,23 +1,13 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { DateTime } from 'luxon';
-import { Progress, InfoCard, Link } from '@backstage/core-components';
+import { Progress, InfoCard } from '@backstage/core-components';
 import { useApi, useRouteRef, useAnalytics } from '@backstage/core-plugin-api';
 import { rootRouteRef, announcementViewRouteRef, announcementAdminRouteRef } from '../../routes.esm.js';
 import { formatAnnouncementStartTime } from '../utils/announcementDateUtils.esm.js';
 import { announcementsApiRef, useAnnouncementsTranslation, useAnnouncements, useAnnouncementsPermissions } from '@backstage-community/plugin-announcements-react';
-import { makeStyles, List, ListItem, ListItemIcon, ListItemText, Box, Typography, Chip } from '@material-ui/core';
-import { Alert } from '@material-ui/lab';
-import NewReleasesIcon from '@material-ui/icons/NewReleases';
+import { Alert, List, Text, Link, ListRow, Box, Flex, TagGroup, Tag } from '@backstage/ui';
+import { RiMegaphoneLine } from '@remixicon/react';
 
-const useStyles = makeStyles({
-  newAnnouncementIcon: {
-    minWidth: "36px"
-  },
-  chipStyle: {
-    marginRight: 4,
-    marginBottom: 4
-  }
-});
 const AnnouncementsCard = ({
   title,
   max,
@@ -29,7 +19,6 @@ const AnnouncementsCard = ({
   current,
   hideStartAt
 }) => {
-  const classes = useStyles();
   const announcementsApi = useApi(announcementsApiRef);
   const announcementsLink = useRouteRef(rootRouteRef);
   const viewAnnouncementLink = useRouteRef(announcementViewRouteRef);
@@ -49,7 +38,7 @@ const AnnouncementsCard = ({
   if (loading) {
     return /* @__PURE__ */ jsx(Progress, {});
   } else if (error) {
-    return /* @__PURE__ */ jsx(Alert, { severity: "error", children: error.message });
+    return /* @__PURE__ */ jsx(Alert, { status: "danger", title: error.message });
   }
   const deepLink = {
     link: announcementsLink(),
@@ -61,67 +50,69 @@ const AnnouncementsCard = ({
       title: title || t("announcementsCard.announcements"),
       variant,
       deepLink,
-      children: /* @__PURE__ */ jsxs(List, { dense: true, children: [
-        announcements.results.map((announcement) => /* @__PURE__ */ jsxs(ListItem, { children: [
-          /* @__PURE__ */ jsx(
-            ListItemIcon,
-            {
-              className: classes.newAnnouncementIcon,
-              style: {
-                visibility: lastSeen < DateTime.fromISO(announcement.created_at) ? "visible" : "hidden"
-              },
-              title: t("announcementsCard.new"),
-              children: /* @__PURE__ */ jsx(NewReleasesIcon, {})
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            ListItemText,
+      children: /* @__PURE__ */ jsx(
+        List,
+        {
+          "aria-label": title || t("announcementsCard.announcements"),
+          items: announcements.results,
+          renderEmptyState: !permissions.create.loading && permissions.create.allowed ? () => /* @__PURE__ */ jsxs(Text, { as: "span", children: [
+            `${t("announcementsCard.noAnnouncements")} `,
+            /* @__PURE__ */ jsx(Link, { href: announcementAdminLink(), children: t("announcementsCard.addOne") }),
+            "?"
+          ] }) : void 0,
+          children: (announcement) => /* @__PURE__ */ jsx(
+            ListRow,
             {
-              primary: /* @__PURE__ */ jsx(
-                Link,
+              id: announcement.id,
+              textValue: announcement.title,
+              icon: /* @__PURE__ */ jsx(
+                Box,
                 {
-                  to: viewAnnouncementLink({ id: announcement.id }),
-                  variant: "inherit",
-                  onClick: () => analytics.captureEvent("click", announcement.title, {
-                    attributes: {
-                      announcementId: announcement.id,
-                      location: "AnnouncementsCard"
-                    }
-                  }),
-                  children: announcement.title
+                  style: {
+                    visibility: lastSeen < DateTime.fromISO(announcement.created_at) ? "visible" : "hidden"
+                  },
+                  title: t("announcementsCard.new"),
+                  children: /* @__PURE__ */ jsx(RiMegaphoneLine, { size: 20 })
                 }
               ),
-              secondary: /* @__PURE__ */ jsxs(Box, { children: [
-                /* @__PURE__ */ jsxs(Typography, { variant: "body2", color: "textSecondary", children: [
+              children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: "1", children: [
+                /* @__PURE__ */ jsx(
+                  Link,
+                  {
+                    href: viewAnnouncementLink({ id: announcement.id }),
+                    onClick: () => analytics.captureEvent("click", announcement.title, {
+                      attributes: {
+                        announcementId: announcement.id,
+                        location: "AnnouncementsCard"
+                      }
+                    }),
+                    children: announcement.title
+                  }
+                ),
+                /* @__PURE__ */ jsxs(Text, { variant: "body-small", color: "secondary", as: "span", children: [
                   DateTime.fromISO(announcement.created_at).toRelative(),
                   announcement.category && /* @__PURE__ */ jsxs(Fragment, { children: [
                     ` ${t("announcementsCard.in")} `,
                     /* @__PURE__ */ jsx(
                       Link,
                       {
-                        to: `${announcementsLink()}?category=${announcement.category.slug}`,
-                        variant: "inherit",
+                        href: `${announcementsLink()}?category=${announcement.category.slug}`,
                         children: announcement.category.title
                       }
                     )
                   ] })
                 ] }),
-                /* @__PURE__ */ jsxs(Typography, { variant: "body2", color: "textSecondary", children: [
-                  announcement.excerpt,
-                  announcement.tags && announcement.tags.length > 0 && /* @__PURE__ */ jsx(Box, { mt: 1, children: announcement.tags.map((tag) => /* @__PURE__ */ jsx(
-                    Chip,
-                    {
-                      size: "small",
-                      label: tag.title,
-                      component: Link,
-                      to: `${announcementsLink()}?tags=${tag.slug}`,
-                      clickable: true,
-                      className: classes.chipStyle
-                    },
-                    tag.slug
-                  )) })
-                ] }),
-                !hideStartAt && /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "textSecondary", children: formatAnnouncementStartTime(
+                /* @__PURE__ */ jsx(Text, { variant: "body-small", color: "secondary", children: announcement.excerpt }),
+                announcement.tags && announcement.tags.length > 0 && /* @__PURE__ */ jsx(Box, { mt: "2", children: /* @__PURE__ */ jsx(TagGroup, { children: announcement.tags.map((tag) => /* @__PURE__ */ jsx(
+                  Tag,
+                  {
+                    size: "small",
+                    href: `${announcementsLink()}?tags=${tag.slug}`,
+                    children: tag.title
+                  },
+                  tag.slug
+                )) }) }),
+                !hideStartAt && /* @__PURE__ */ jsx(Text, { variant: "body-x-small", color: "secondary", children: formatAnnouncementStartTime(
                   announcement.start_at,
                   t("announcementsCard.occurred"),
                   t("announcementsCard.scheduled"),
@@ -129,15 +120,9 @@ const AnnouncementsCard = ({
                 ) })
               ] })
             }
-          ),
-          " "
-        ] }, announcement.id)),
-        announcements.count === 0 && !permissions.create.loading && permissions.create.allowed && /* @__PURE__ */ jsx(ListItem, { children: /* @__PURE__ */ jsxs(ListItemText, { children: [
-          `${t("announcementsCard.noAnnouncements")} `,
-          /* @__PURE__ */ jsx(Link, { to: announcementAdminLink(), variant: "inherit", children: t("announcementsCard.addOne") }),
-          "?"
-        ] }) })
-      ] })
+          )
+        }
+      )
     }
   );
 };

package/dist/components/AnnouncementsCard/AnnouncementsCard.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"AnnouncementsCard.esm.js","sources":["../../../src/components/AnnouncementsCard/AnnouncementsCard.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport { DateTime } from 'luxon';\nimport {\n  InfoCard,\n  InfoCardVariants,\n  Link,\n  Progress,\n} from '@backstage/core-components';\nimport { useApi, useRouteRef, useAnalytics } from '@backstage/core-plugin-api';\nimport {\n  announcementAdminRouteRef,\n  announcementViewRouteRef,\n  rootRouteRef,\n} from '../../routes';\nimport { formatAnnouncementStartTime } from '../utils/announcementDateUtils';\nimport {\n  announcementsApiRef,\n  useAnnouncements,\n  useAnnouncementsTranslation,\n  useAnnouncementsPermissions,\n} from '@backstage-community/plugin-announcements-react';\nimport {\n  makeStyles,\n  List,\n  ListItem,\n  ListItemIcon,\n  ListItemText,\n  Typography,\n  Box,\n  Chip,\n} from '@material-ui/core';\nimport { Alert } from '@material-ui/lab';\nimport NewReleasesIcon from '@material-ui/icons/NewReleases';\n\nconst useStyles = makeStyles({\n  newAnnouncementIcon: {\n    minWidth: '36px',\n  },\n  chipStyle: {\n    marginRight: 4,\n    marginBottom: 4,\n  },\n});\n\ntype AnnouncementsCardOpts = {\n  title?: string;\n  max?: number;\n  category?: string;\n  active?: boolean;\n  variant?: InfoCardVariants;\n  sortBy?: 'created_at' | 'start_at';\n  order?: 'asc' | 'desc';\n  current?: boolean;\n  hideStartAt?: boolean;\n};\n\nexport const AnnouncementsCard = ({\n  title,\n  max,\n  category,\n  active,\n  variant = 'gridItem',\n  sortBy,\n  order,\n  current,\n  hideStartAt,\n}: AnnouncementsCardOpts) => {\n  const classes = useStyles();\n  const announcementsApi = useApi(announcementsApiRef);\n  const announcementsLink = useRouteRef(rootRouteRef);\n  const viewAnnouncementLink = useRouteRef(announcementViewRouteRef);\n  const announcementAdminLink = useRouteRef(announcementAdminRouteRef);\n  const lastSeen = announcementsApi.lastSeenDate();\n  const analytics = useAnalytics();\n  const { t } = useAnnouncementsTranslation();\n\n  const { announcements, loading, error } = useAnnouncements({\n    max: max || 5,\n    category,\n    active,\n    sortBy,\n    order,\n    current,\n  });\n\n  const permissions = useAnnouncementsPermissions();\n\n  if (loading) {\n    return <Progress />;\n  } else if (error) {\n    return <Alert severity=\"error\">{error.message}</Alert>;\n  }\n\n  const deepLink = {\n    link: announcementsLink(),\n    title: t('announcementsCard.seeAll'),\n  };\n\n  return (\n    <InfoCard\n      title={title || t('announcementsCard.announcements')}\n      variant={variant}\n      deepLink={deepLink}\n    >\n      <List dense>\n        {announcements.results.map(announcement => (\n          <ListItem key={announcement.id}>\n            <ListItemIcon\n              className={classes.newAnnouncementIcon}\n              style={{\n                visibility:\n                  lastSeen < DateTime.fromISO(announcement.created_at)\n                    ? 'visible'\n                    : 'hidden',\n              }}\n              title={t('announcementsCard.new')}\n            >\n              <NewReleasesIcon />\n            </ListItemIcon>\n            <ListItemText\n              primary={\n                <Link\n                  to={viewAnnouncementLink({ id: announcement.id })}\n                  variant=\"inherit\"\n                  onClick={() =>\n                    analytics.captureEvent('click', announcement.title, {\n                      attributes: {\n                        announcementId: announcement.id,\n                        location: 'AnnouncementsCard',\n                      },\n                    })\n                  }\n                >\n                  {announcement.title}\n                </Link>\n              }\n              secondary={\n                <Box>\n                  <Typography variant=\"body2\" color=\"textSecondary\">\n                    {DateTime.fromISO(announcement.created_at).toRelative()}\n                    {announcement.category && (\n                      <>\n                        {` ${t('announcementsCard.in')} `}\n                        <Link\n                          to={`${announcementsLink()}?category=${\n                            announcement.category.slug\n                          }`}\n                          variant=\"inherit\"\n                        >\n                          {announcement.category.title}\n                        </Link>\n                      </>\n                    )}\n                  </Typography>\n                  <Typography variant=\"body2\" color=\"textSecondary\">\n                    {announcement.excerpt}\n                    {announcement.tags && announcement.tags.length > 0 && (\n                      <Box mt={1}>\n                        {announcement.tags.map(tag => (\n                          <Chip\n                            key={tag.slug}\n                            size=\"small\"\n                            label={tag.title}\n                            component={Link}\n                            to={`${announcementsLink()}?tags=${tag.slug}`}\n                            clickable\n                            className={classes.chipStyle}\n                          />\n                        ))}\n                      </Box>\n                    )}\n                  </Typography>\n                  {!hideStartAt && (\n                    <Typography variant=\"caption\" color=\"textSecondary\">\n                      {formatAnnouncementStartTime(\n                        announcement.start_at,\n                        t('announcementsCard.occurred'),\n                        t('announcementsCard.scheduled'),\n                        t('announcementsCard.today'),\n                      )}\n                    </Typography>\n                  )}\n                </Box>\n              }\n            />{' '}\n          </ListItem>\n        ))}\n        {announcements.count === 0 &&\n          !permissions.create.loading &&\n          permissions.create.allowed && (\n            <ListItem>\n              <ListItemText>\n                {`${t('announcementsCard.noAnnouncements')} `}\n                <Link to={announcementAdminLink()} variant=\"inherit\">\n                  {t('announcementsCard.addOne')}\n                </Link>\n                ?\n              </ListItemText>\n            </ListItem>\n          )}\n      </List>\n    </InfoCard>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"AnnouncementsCard.esm.js","sources":["../../../src/components/AnnouncementsCard/AnnouncementsCard.tsx"],"sourcesContent":["/*\n * Copyright 2026 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport { DateTime } from 'luxon';\nimport {\n  InfoCard,\n  InfoCardVariants,\n  Progress,\n} from '@backstage/core-components';\nimport { useApi, useRouteRef, useAnalytics } from '@backstage/core-plugin-api';\nimport {\n  announcementAdminRouteRef,\n  announcementViewRouteRef,\n  rootRouteRef,\n} from '../../routes';\nimport { formatAnnouncementStartTime } from '../utils/announcementDateUtils';\nimport {\n  announcementsApiRef,\n  useAnnouncements,\n  useAnnouncementsTranslation,\n  useAnnouncementsPermissions,\n} from '@backstage-community/plugin-announcements-react';\nimport {\n  Alert,\n  Box,\n  Flex,\n  Link,\n  List,\n  ListRow,\n  Tag,\n  TagGroup,\n  Text,\n} from '@backstage/ui';\nimport { RiMegaphoneLine } from '@remixicon/react';\n\ntype AnnouncementsCardOpts = {\n  title?: string;\n  max?: number;\n  category?: string;\n  active?: boolean;\n  variant?: InfoCardVariants;\n  sortBy?: 'created_at' | 'start_at';\n  order?: 'asc' | 'desc';\n  current?: boolean;\n  hideStartAt?: boolean;\n};\n\nexport const AnnouncementsCard = ({\n  title,\n  max,\n  category,\n  active,\n  variant = 'gridItem',\n  sortBy,\n  order,\n  current,\n  hideStartAt,\n}: AnnouncementsCardOpts) => {\n  const announcementsApi = useApi(announcementsApiRef);\n  const announcementsLink = useRouteRef(rootRouteRef);\n  const viewAnnouncementLink = useRouteRef(announcementViewRouteRef);\n  const announcementAdminLink = useRouteRef(announcementAdminRouteRef);\n  const lastSeen = announcementsApi.lastSeenDate();\n  const analytics = useAnalytics();\n  const { t } = useAnnouncementsTranslation();\n\n  const { announcements, loading, error } = useAnnouncements({\n    max: max || 5,\n    category,\n    active,\n    sortBy,\n    order,\n    current,\n  });\n\n  const permissions = useAnnouncementsPermissions();\n\n  if (loading) {\n    return <Progress />;\n  } else if (error) {\n    return <Alert status=\"danger\" title={error.message} />;\n  }\n\n  const deepLink = {\n    link: announcementsLink(),\n    title: t('announcementsCard.seeAll'),\n  };\n\n  return (\n    <InfoCard\n      title={title || t('announcementsCard.announcements')}\n      variant={variant}\n      deepLink={deepLink}\n    >\n      <List\n        aria-label={title || t('announcementsCard.announcements')}\n        items={announcements.results}\n        renderEmptyState={\n          !permissions.create.loading && permissions.create.allowed\n            ? () => (\n                <Text as=\"span\">\n                  {`${t('announcementsCard.noAnnouncements')} `}\n                  <Link href={announcementAdminLink()}>\n                    {t('announcementsCard.addOne')}\n                  </Link>\n                  ?\n                </Text>\n              )\n            : undefined\n        }\n      >\n        {announcement => (\n          <ListRow\n            id={announcement.id}\n            textValue={announcement.title}\n            icon={\n              <Box\n                style={{\n                  visibility:\n                    lastSeen < DateTime.fromISO(announcement.created_at)\n                      ? 'visible'\n                      : 'hidden',\n                }}\n                title={t('announcementsCard.new')}\n              >\n                <RiMegaphoneLine size={20} />\n              </Box>\n            }\n          >\n            <Flex direction=\"column\" gap=\"1\">\n              <Link\n                href={viewAnnouncementLink({ id: announcement.id })}\n                onClick={() =>\n                  analytics.captureEvent('click', announcement.title, {\n                    attributes: {\n                      announcementId: announcement.id,\n                      location: 'AnnouncementsCard',\n                    },\n                  })\n                }\n              >\n                {announcement.title}\n              </Link>\n\n              <Text variant=\"body-small\" color=\"secondary\" as=\"span\">\n                {DateTime.fromISO(announcement.created_at).toRelative()}\n                {announcement.category && (\n                  <>\n                    {` ${t('announcementsCard.in')} `}\n                    <Link\n                      href={`${announcementsLink()}?category=${\n                        announcement.category.slug\n                      }`}\n                    >\n                      {announcement.category.title}\n                    </Link>\n                  </>\n                )}\n              </Text>\n\n              <Text variant=\"body-small\" color=\"secondary\">\n                {announcement.excerpt}\n              </Text>\n\n              {announcement.tags && announcement.tags.length > 0 && (\n                <Box mt=\"2\">\n                  <TagGroup>\n                    {announcement.tags.map(tag => (\n                      <Tag\n                        key={tag.slug}\n                        size=\"small\"\n                        href={`${announcementsLink()}?tags=${tag.slug}`}\n                      >\n                        {tag.title}\n                      </Tag>\n                    ))}\n                  </TagGroup>\n                </Box>\n              )}\n\n              {!hideStartAt && (\n                <Text variant=\"body-x-small\" color=\"secondary\">\n                  {formatAnnouncementStartTime(\n                    announcement.start_at,\n                    t('announcementsCard.occurred'),\n                    t('announcementsCard.scheduled'),\n                    t('announcementsCard.today'),\n                  )}\n                </Text>\n              )}\n            </Flex>\n          </ListRow>\n        )}\n      </List>\n    </InfoCard>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;AA2DO,MAAM,oBAAoB,CAAC;AAAA,EAChC,KAAA;AAAA,EACA,GAAA;AAAA,EACA,QAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAU,GAAA,UAAA;AAAA,EACV,MAAA;AAAA,EACA,KAAA;AAAA,EACA,OAAA;AAAA,EACA;AACF,CAA6B,KAAA;AAC3B,EAAM,MAAA,gBAAA,GAAmB,OAAO,mBAAmB,CAAA;AACnD,EAAM,MAAA,iBAAA,GAAoB,YAAY,YAAY,CAAA;AAClD,EAAM,MAAA,oBAAA,GAAuB,YAAY,wBAAwB,CAAA;AACjE,EAAM,MAAA,qBAAA,GAAwB,YAAY,yBAAyB,CAAA;AACnE,EAAM,MAAA,QAAA,GAAW,iBAAiB,YAAa,EAAA;AAC/C,EAAA,MAAM,YAAY,YAAa,EAAA;AAC/B,EAAM,MAAA,EAAE,CAAE,EAAA,GAAI,2BAA4B,EAAA;AAE1C,EAAA,MAAM,EAAE,aAAA,EAAe,OAAS,EAAA,KAAA,KAAU,gBAAiB,CAAA;AAAA,IACzD,KAAK,GAAO,IAAA,CAAA;AAAA,IACZ,QAAA;AAAA,IACA,MAAA;AAAA,IACA,MAAA;AAAA,IACA,KAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EAAA,MAAM,cAAc,2BAA4B,EAAA;AAEhD,EAAA,IAAI,OAAS,EAAA;AACX,IAAA,2BAAQ,QAAS,EAAA,EAAA,CAAA;AAAA,aACR,KAAO,EAAA;AAChB,IAAA,2BAAQ,KAAM,EAAA,EAAA,MAAA,EAAO,QAAS,EAAA,KAAA,EAAO,MAAM,OAAS,EAAA,CAAA;AAAA;AAGtD,EAAA,MAAM,QAAW,GAAA;AAAA,IACf,MAAM,iBAAkB,EAAA;AAAA,IACxB,KAAA,EAAO,EAAE,0BAA0B;AAAA,GACrC;AAEA,EACE,uBAAA,GAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,KAAS,IAAA,CAAA,CAAE,iCAAiC,CAAA;AAAA,MACnD,OAAA;AAAA,MACA,QAAA;AAAA,MAEA,QAAA,kBAAA,GAAA;AAAA,QAAC,IAAA;AAAA,QAAA;AAAA,UACC,YAAA,EAAY,KAAS,IAAA,CAAA,CAAE,iCAAiC,CAAA;AAAA,UACxD,OAAO,aAAc,CAAA,OAAA;AAAA,UACrB,gBACE,EAAA,CAAC,WAAY,CAAA,MAAA,CAAO,OAAW,IAAA,WAAA,CAAY,MAAO,CAAA,OAAA,GAC9C,sBACE,IAAA,CAAC,IAAK,EAAA,EAAA,EAAA,EAAG,MACN,EAAA,QAAA,EAAA;AAAA,YAAG,CAAA,EAAA,CAAA,CAAE,mCAAmC,CAAC,CAAA,CAAA,CAAA;AAAA,gCACzC,IAAK,EAAA,EAAA,IAAA,EAAM,uBACT,EAAA,QAAA,EAAA,CAAA,CAAE,0BAA0B,CAC/B,EAAA,CAAA;AAAA,YAAO;AAAA,WAAA,EAET,CAEF,GAAA,KAAA,CAAA;AAAA,UAGL,QACC,EAAA,CAAA,YAAA,qBAAA,GAAA;AAAA,YAAC,OAAA;AAAA,YAAA;AAAA,cACC,IAAI,YAAa,CAAA,EAAA;AAAA,cACjB,WAAW,YAAa,CAAA,KAAA;AAAA,cACxB,IACE,kBAAA,GAAA;AAAA,gBAAC,GAAA;AAAA,gBAAA;AAAA,kBACC,KAAO,EAAA;AAAA,oBACL,YACE,QAAW,GAAA,QAAA,CAAS,QAAQ,YAAa,CAAA,UAAU,IAC/C,SACA,GAAA;AAAA,mBACR;AAAA,kBACA,KAAA,EAAO,EAAE,uBAAuB,CAAA;AAAA,kBAEhC,QAAA,kBAAA,GAAA,CAAC,eAAgB,EAAA,EAAA,IAAA,EAAM,EAAI,EAAA;AAAA;AAAA,eAC7B;AAAA,cAGF,QAAC,kBAAA,IAAA,CAAA,IAAA,EAAA,EAAK,SAAU,EAAA,QAAA,EAAS,KAAI,GAC3B,EAAA,QAAA,EAAA;AAAA,gCAAA,GAAA;AAAA,kBAAC,IAAA;AAAA,kBAAA;AAAA,oBACC,MAAM,oBAAqB,CAAA,EAAE,EAAI,EAAA,YAAA,CAAa,IAAI,CAAA;AAAA,oBAClD,SAAS,MACP,SAAA,CAAU,YAAa,CAAA,OAAA,EAAS,aAAa,KAAO,EAAA;AAAA,sBAClD,UAAY,EAAA;AAAA,wBACV,gBAAgB,YAAa,CAAA,EAAA;AAAA,wBAC7B,QAAU,EAAA;AAAA;AACZ,qBACD,CAAA;AAAA,oBAGF,QAAa,EAAA,YAAA,CAAA;AAAA;AAAA,iBAChB;AAAA,qCAEC,IAAK,EAAA,EAAA,OAAA,EAAQ,cAAa,KAAM,EAAA,WAAA,EAAY,IAAG,MAC7C,EAAA,QAAA,EAAA;AAAA,kBAAA,QAAA,CAAS,OAAQ,CAAA,YAAA,CAAa,UAAU,CAAA,CAAE,UAAW,EAAA;AAAA,kBACrD,YAAA,CAAa,4BAET,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAI,CAAA,CAAA,EAAA,CAAA,CAAE,sBAAsB,CAAC,CAAA,CAAA,CAAA;AAAA,oCAC9B,GAAA;AAAA,sBAAC,IAAA;AAAA,sBAAA;AAAA,wBACC,MAAM,CAAG,EAAA,iBAAA,EAAmB,CAC1B,UAAA,EAAA,YAAA,CAAa,SAAS,IACxB,CAAA,CAAA;AAAA,wBAEC,uBAAa,QAAS,CAAA;AAAA;AAAA;AACzB,mBACF,EAAA;AAAA,iBAEJ,EAAA,CAAA;AAAA,oCAEC,IAAK,EAAA,EAAA,OAAA,EAAQ,cAAa,KAAM,EAAA,WAAA,EAC9B,uBAAa,OAChB,EAAA,CAAA;AAAA,gBAEC,YAAa,CAAA,IAAA,IAAQ,YAAa,CAAA,IAAA,CAAK,SAAS,CAC/C,oBAAA,GAAA,CAAC,GAAI,EAAA,EAAA,EAAA,EAAG,KACN,QAAC,kBAAA,GAAA,CAAA,QAAA,EAAA,EACE,QAAa,EAAA,YAAA,CAAA,IAAA,CAAK,IAAI,CACrB,GAAA,qBAAA,GAAA;AAAA,kBAAC,GAAA;AAAA,kBAAA;AAAA,oBAEC,IAAK,EAAA,OAAA;AAAA,oBACL,MAAM,CAAG,EAAA,iBAAA,EAAmB,CAAA,MAAA,EAAS,IAAI,IAAI,CAAA,CAAA;AAAA,oBAE5C,QAAI,EAAA,GAAA,CAAA;AAAA,mBAAA;AAAA,kBAJA,GAAI,CAAA;AAAA,iBAMZ,GACH,CACF,EAAA,CAAA;AAAA,gBAGD,CAAC,WACA,oBAAA,GAAA,CAAC,QAAK,OAAQ,EAAA,cAAA,EAAe,OAAM,WAChC,EAAA,QAAA,EAAA,2BAAA;AAAA,kBACC,YAAa,CAAA,QAAA;AAAA,kBACb,EAAE,4BAA4B,CAAA;AAAA,kBAC9B,EAAE,6BAA6B,CAAA;AAAA,kBAC/B,EAAE,yBAAyB;AAAA,iBAE/B,EAAA;AAAA,eAEJ,EAAA;AAAA;AAAA;AACF;AAAA;AAEJ;AAAA,GACF;AAEJ;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@backstage-community/plugin-announcements",
-  "version": "2.7.0",
+  "version": "2.8.0",
   "main": "./dist/index.esm.js",
   "types": "./dist/index.d.ts",
   "license": "Apache-2.0",
@@ -85,7 +85,7 @@
     "@uiw/react-md-editor": "^4.0.11",
     "luxon": "^3.2.0",
     "react-use": "^17.2.4",
-    "slugify": "1.6.8"
+    "slugify": "1.6.9"
   },
   "peerDependencies": {
     "react": "^17.0.0 || ^18.0.0",