feat(emulsif-301): add announcement component

src/components/announcement/_announcement.scss

@@ -0,0 +1,82 @@
+.announcement {
+  display: flex;
+  align-items: center;
+  column-gap: var(--spacing-xl);
+  padding: var(--spacing-xl);
+}
+
+.announcement__image {
+  width: 3.5rem;
+}
+
+.announcement__content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+
+  .heading {
+    @include heading-small;
+
+    margin: 0 0 var(--spacing-sm);
+    color: var(--color-primary-darker);
+  }
+
+  p {
+    margin: 0;
+    color: var(--color-text-body);
+    font-size: var(--font-size-small);
+  }
+}
+
+.announcement__action button {
+  font-size: var(--font-size-small);
+}
+
+.announcement-list {
+  display: flex;
+  flex-direction: column;
+  row-gap: var(--spacing-xl);
+}
+
+/* Variants -- Default style for announcements */
+.announcement--default {
+  background-color: var(--color-primary-lighter);
+}
+
+.announcement__content--default .heading {
+  color: var(--color-primary-darker);
+}
+
+.announcement__content--default p {
+  color: var(--color-text-body);
+}
+
+/* Variants -- Light style for announcements */
+.announcement--light {
+  background-color: var(--color-white);
+}
+
+.announcement__content--light .heading {
+  color: var(--color-primary-darker);
+}
+
+.announcement__content--light p {
+  color: var(--color-text-body);
+}
+
+/* Variants -- Dark style for announcements */
+.announcement--dark {
+  background-color: var(--color-primary-darker);
+}
+
+.announcement__content--dark p,
+.announcement__content--dark .heading {
+  color: var(--color-primary-lighter);
+}
+
+.announcement__action--dark button,
+.announcement__action--dark button:hover,
+.announcement__action--dark button:focus {
+  color: var(--color-primary-darker);
+  background-color: var(--color-primary-lighter);
+}

src/components/announcement/announcement.component.yml

@@ -0,0 +1,98 @@
+$schema: https://git.drupalcode.org/project/drupal/-/raw/10.1.x/core/modules/sdc/src/metadata.schema.json
+
+name: Announcement
+group: Components
+status: stable
+props:
+  type: object
+  required:
+    - announcement__title
+    - announcement__content
+  properties:
+    announcement__title:
+      type: string
+      title: Title
+      description: 'Specifies the title of the announcement'
+      data: 'This is an announcement title'
+    announcement__content:
+      type: string
+      title: Content
+      description: 'Specifies the main content of the announcement'
+      data: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nec vestibulum libero. Curabitur suscipit feugiat ipsum, vel auctor nunc.'
+    announcement__button_text:
+      type: string
+      title: Button Text
+      description: 'Specifies the text displayed on the button'
+      data: 'Go to site'
+    announcement__button_url:
+      type: string
+      title: Button URL
+      description: 'Specifies the URL the button will link to'
+      data: '#'
+    announcement__icon:
+      type: string
+      title: Icon
+      description: '(Optional) Specifies the URL of the icon image for the announcement'
+      data: 'https://placehold.co/60x60'
+    announcement__variant:
+      type: string
+      title: Variant
+      description: 'Specifies the style variant for the announcement component'
+      enum:
+        - default
+        - light
+        - dark
+      data: 'default'
+  example:
+    - announcement__title: 'This is an announcement title'
+      announcement__content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nec vestibulum libero. Curabitur suscipit feugiat ipsum, vel auctor nunc.'
+      announcement__button_text: 'Go to site'
+      announcement__button_url: '#'
+      announcement__icon: 'icon-dark'
+    - announcement__title: 'This is an announcement title'
+      announcement__content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nec vestibulum libero. Curabitur suscipit feugiat ipsum, vel auctor nunc.'
+      announcement__icon: 'icon-dark'
+    - announcement__title: 'This is an announcement title'
+      announcement__content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nec vestibulum libero. Curabitur suscipit feugiat ipsum, vel auctor nunc.'
+      announcement__button_text: 'Go to site'
+      announcement__button_url: '#'
+    - announcement__title: 'This is an announcement title'
+      announcement__content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nec vestibulum libero. Curabitur suscipit feugiat ipsum, vel auctor nunc.'
+
+    - announcement__title: 'This is an announcement title'
+      announcement__content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nec vestibulum libero. Curabitur suscipit feugiat ipsum, vel auctor nunc.'
+      announcement__button_text: 'Go to site'
+      announcement__button_url: '#'
+      announcement__icon: 'icon-dark'
+      announcement__variant: 'light'
+    - announcement__title: 'This is an announcement title'
+      announcement__content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nec vestibulum libero. Curabitur suscipit feugiat ipsum, vel auctor nunc.'
+      announcement__icon: 'icon-dark'
+      announcement__variant: 'light'
+    - announcement__title: 'This is an announcement title'
+      announcement__content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nec vestibulum libero. Curabitur suscipit feugiat ipsum, vel auctor nunc.'
+      announcement__button_text: 'Go to site'
+      announcement__button_url: '#'
+      announcement__variant: 'light'
+    - announcement__title: 'This is an announcement title'
+      announcement__content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nec vestibulum libero. Curabitur suscipit feugiat ipsum, vel auctor nunc.'
+      announcement__variant: 'light'
+
+    - announcement__title: 'This is an announcement title'
+      announcement__content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nec vestibulum libero. Curabitur suscipit feugiat ipsum, vel auctor nunc.'
+      announcement__button_text: 'Go to site'
+      announcement__button_url: '#'
+      announcement__icon: 'icon-light'
+      announcement__variant: 'dark'
+    - announcement__title: 'This is an announcement title'
+      announcement__content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nec vestibulum libero. Curabitur suscipit feugiat ipsum, vel auctor nunc.'
+      announcement__icon: 'icon-light'
+      announcement__variant: 'dark'
+    - announcement__title: 'This is an announcement title'
+      announcement__content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nec vestibulum libero. Curabitur suscipit feugiat ipsum, vel auctor nunc.'
+      announcement__button_text: 'Go to site'
+      announcement__button_url: '#'
+      announcement__variant: 'dark'
+    - announcement__title: 'This is an announcement title'
+      announcement__content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nec vestibulum libero. Curabitur suscipit feugiat ipsum, vel auctor nunc.'
+      announcement__variant: 'dark'

src/components/announcement/announcement.stories.js

@@ -0,0 +1,30 @@
+import announcementTwig from './announcement.twig';
+import { props } from './announcement.component.yml';
+import announcementDarkIcon from '../../images/example/announcement-icon--dark.svg';
+import announcementLightIcon from '../../images/example/announcement-icon--light.svg';
+
+export default {
+  title: 'Components/Announcement',
+  decorators: [
+    (story) =>
+      `<div style="max-width: 1121px; margin: 0 auto;">${story()}</div>`,
+  ],
+};
+
+const icons = {
+  'icon-light': announcementLightIcon,
+  'icon-dark': announcementDarkIcon,
+}
+
+function getAnnouncementData(data) {
+  const newData = Object.assign({}, data);
+  if (data && typeof data === 'object' && 'announcement__icon' in data) {
+    newData.announcement__icon = icons[data.announcement__icon];
+  }
+  return newData;
+}
+
+export const Announcement = () =>
+  `<div class="announcement-list">${props.example
+    .map((data) => announcementTwig(getAnnouncementData(data)))
+    .join('')}</div>`;

src/components/announcement/announcement.twig

@@ -0,0 +1,47 @@
+{#
+/**
+ * Available Variables:
+ * - announcement__title: The title of the announcement.
+ * - announcement__content: The main content of the announcement.
+ * - announcement__button_text: The text displayed on the announcement button.
+ * - announcement__button_url: The URL that the announcement button links to.
+ * - announcement__icon: (Optional) The URL of the icon image for the announcement.
+ * - announcement__modifiers: An array of modifier classes to apply to the announcement container.
+ * - additional_attributes: Additional HTML attributes for the announcement container.
+ */
+#}
+
+{% set announcement__base_class = 'announcement' %}
+{% set additional_attributes = additional_attributes|default() %}
+{% set announcement__variant = announcement__variant|default('default') %}
+
+<div {{ bem(announcement__base_class, [announcement__variant]) }} {{ add_attributes(additional_attributes) }}>
+  {# Render the icon if provided #}
+  {% if announcement__icon %}
+    {% include "@components/images/image/responsive-image.twig" with {
+      image_alt: 'icon',
+      output_image_tag: true,
+      image_src: announcement__icon,
+      responsive_image_blockname: announcement__base_class,
+    } %}
+  {% endif %}
+  {# Render the main content #}
+  <div {{ bem('content', [announcement__variant], announcement__base_class) }}>
+    {% include "@components/text/headings/_heading.twig" with {
+      heading__level: announcement__heading__level|default('4'),
+      heading: announcement__title,
+    } %}
+    <p>{{ announcement__content }}</p>
+  </div>
+  {# Render the action button #}
+  {% if announcement__button_text and announcement__button_url %}
+    <div {{ bem('action', [announcement__variant], announcement__base_class) }}>
+      {% include "@components/button/button.twig" with {
+        button__content: announcement__button_text,
+        button__attributes: {
+          'href': announcement__button_url,
+        }
+      } %}
+    </div>
+  {% endif %}
+</div>