From 5d1becdf38db87f690dd94b5924b49b4c03a5bc6 Mon Sep 17 00:00:00 2001
From: Mroczko <mrocm@l32956meu.rpega.com>
Date: Fri, 2 Dec 2022 14:26:02 +0100
Subject: [PATCH 1/3] DS-893: Add test page

---
 .../00-notifications-long-strings.twig        | 73 +++++++++++++++++++
 1 file changed, 73 insertions(+)
 create mode 100644 docs-site/src/pages/pattern-lab/_patterns/999-tests/notifications/00-notifications-long-strings.twig

diff --git a/docs-site/src/pages/pattern-lab/_patterns/999-tests/notifications/00-notifications-long-strings.twig b/docs-site/src/pages/pattern-lab/_patterns/999-tests/notifications/00-notifications-long-strings.twig
new file mode 100644
index 0000000000..cae6c1e35c
--- /dev/null
+++ b/docs-site/src/pages/pattern-lab/_patterns/999-tests/notifications/00-notifications-long-strings.twig
@@ -0,0 +1,73 @@
+{% set icon_announce %}
+  {% include '@bolt-elements-icon/icon.twig' with {
+    name: 'pega-announce',
+    size: 'medium',
+  } only %}
+{% endset %}
+{% set header_actions %}
+  {% include '@bolt-components-notifications/notifications-header-action.twig' with {
+    icon: icon_check_circle,
+    label: 'Mark all as read',
+    attributes: {
+      type: 'button',
+    },
+  } only %}
+  {% include '@bolt-components-notifications/notifications-header-action.twig' with {
+    icon: icon_pega_setting,
+    label: 'Notification settings',
+    attributes: {
+      href: '#!',
+    },
+  } only %}
+{% endset %}
+{% set content %}
+  {% set list_content %}
+    {% include '@bolt-components-notifications/notifications-list-heading-divider.twig' with {
+      content: 'Latest',
+    } only %}
+    {% include '@bolt-components-notifications/notifications-list-item.twig' with {
+      signifier: icon_announce,
+      site_name: 'Community',
+      timestamp: '5 min ago',
+      message: {
+        content: 'This a test how it will behave when we have a very long string without spaces for example in the URL like this one: <em>http://www.this-is/a/very-long/pega-link/withoutanyspacesitsfortestingthebehaviourofwrappingaverylongstrings.com</em>.',
+        attributes: {
+          href: '#!',
+        },
+      },
+    } only %}
+    {% include '@bolt-components-notifications/notifications-list-item.twig' with {
+      signifier: icon_announce,
+      site_name: 'Collaboration Center',
+      timestamp: '10 min ago',
+      message: {
+        content: 'This is a <em>read notification</em>.',
+        attributes: {
+          href: '#!',
+        },
+      },
+      read: true,
+    } only %}
+  {% endset %}
+
+  {% include '@bolt-components-notifications/notifications-list.twig' with {
+    content: list_content,
+  } only %}
+{% endset %}
+{% set footer_content %}
+  {% include '@bolt-elements-text-link/text-link.twig' with {
+    content: 'View all notifications',
+    reversed_underline: true,
+    expand_click_target: true,
+    attributes: {
+      href: '#!',
+    }
+  } only %}
+{% endset %}
+
+{% include '@bolt-components-notifications/notifications.twig' with {
+  content: content,
+  footer: {
+    content: footer_content,
+  },
+} only %}

From 4a4c775795032e0e8a65d40122b030d8474d87b9 Mon Sep 17 00:00:00 2001
From: Mroczko <mrocm@l32956meu.rpega.com>
Date: Fri, 2 Dec 2022 14:26:18 +0100
Subject: [PATCH 2/3] DS-893: Update CSS

---
 packages/components/bolt-notifications/src/notifications.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/components/bolt-notifications/src/notifications.scss b/packages/components/bolt-notifications/src/notifications.scss
index 1cb72918be..7e8bc87247 100644
--- a/packages/components/bolt-notifications/src/notifications.scss
+++ b/packages/components/bolt-notifications/src/notifications.scss
@@ -98,6 +98,7 @@
   justify-content: space-between;
   gap: var(--bolt-spacing-x-xsmall);
   row-gap: var(--bolt-spacing-y-xsmall);
+  word-break: break-word;
 
   > * {
     font-weight: inherit;

From d0a3d20997fcac4630d733e1277b9b12573f4d5b Mon Sep 17 00:00:00 2001
From: Mroczko <mrocm@l32956meu.rpega.com>
Date: Fri, 2 Dec 2022 15:32:57 +0100
Subject: [PATCH 3/3] DS-893: Update test page

---
 .../999-tests/notifications/00-notifications-long-strings.twig  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs-site/src/pages/pattern-lab/_patterns/999-tests/notifications/00-notifications-long-strings.twig b/docs-site/src/pages/pattern-lab/_patterns/999-tests/notifications/00-notifications-long-strings.twig
index cae6c1e35c..f4aa8a8aae 100644
--- a/docs-site/src/pages/pattern-lab/_patterns/999-tests/notifications/00-notifications-long-strings.twig
+++ b/docs-site/src/pages/pattern-lab/_patterns/999-tests/notifications/00-notifications-long-strings.twig
@@ -30,7 +30,7 @@
       site_name: 'Community',
       timestamp: '5 min ago',
       message: {
-        content: 'This a test how it will behave when we have a very long string without spaces for example in the URL like this one: <em>http://www.this-is/a/very-long/pega-link/withoutanyspacesitsfortestingthebehaviourofwrappingaverylongstrings.com</em>.',
+        content: 'This a test how it will behave when we have a very long stringstringstringstringstringstringstringstringstringstring without spaces and for example the URL like this one: <em>http://www.this-is/a/very-long/pega-link/WithoutAnySpacesItsForTestingTheBehaviourOfWrappingVeryLongStrings.com</em>.',
         attributes: {
           href: '#!',
         },