From df1ad0a1d464fac847ceec27d53577ce0da9342a Mon Sep 17 00:00:00 2001 From: Roberto Hernandez Date: Fri, 23 Aug 2024 12:27:12 -0600 Subject: [PATCH] feat(emulsif-301): add announcement component --- .../announcement/_announcement.scss | 82 ++++++++++++++++ .../announcement/announcement.component.yml | 98 +++++++++++++++++++ .../announcement/announcement.stories.js | 30 ++++++ src/components/announcement/announcement.twig | 47 +++++++++ .../example/announcement-icon--dark.svg | 5 + .../example/announcement-icon--light.svg | 5 + 6 files changed, 267 insertions(+) create mode 100644 src/components/announcement/_announcement.scss create mode 100644 src/components/announcement/announcement.component.yml create mode 100644 src/components/announcement/announcement.stories.js create mode 100644 src/components/announcement/announcement.twig create mode 100644 src/images/example/announcement-icon--dark.svg create mode 100644 src/images/example/announcement-icon--light.svg diff --git a/src/components/announcement/_announcement.scss b/src/components/announcement/_announcement.scss new file mode 100644 index 00000000..6218b720 --- /dev/null +++ b/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); +} diff --git a/src/components/announcement/announcement.component.yml b/src/components/announcement/announcement.component.yml new file mode 100644 index 00000000..5f1ec0a7 --- /dev/null +++ b/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' diff --git a/src/components/announcement/announcement.stories.js b/src/components/announcement/announcement.stories.js new file mode 100644 index 00000000..275f838f --- /dev/null +++ b/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) => + `
${story()}
`, + ], +}; + +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 = () => + `
${props.example + .map((data) => announcementTwig(getAnnouncementData(data))) + .join('')}
`; diff --git a/src/components/announcement/announcement.twig b/src/components/announcement/announcement.twig new file mode 100644 index 00000000..b7f65045 --- /dev/null +++ b/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') %} + +
+ {# 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 #} +
+ {% include "@components/text/headings/_heading.twig" with { + heading__level: announcement__heading__level|default('4'), + heading: announcement__title, + } %} +

{{ announcement__content }}

+
+ {# Render the action button #} + {% if announcement__button_text and announcement__button_url %} +
+ {% include "@components/button/button.twig" with { + button__content: announcement__button_text, + button__attributes: { + 'href': announcement__button_url, + } + } %} +
+ {% endif %} +
diff --git a/src/images/example/announcement-icon--dark.svg b/src/images/example/announcement-icon--dark.svg new file mode 100644 index 00000000..1da5de6f --- /dev/null +++ b/src/images/example/announcement-icon--dark.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/images/example/announcement-icon--light.svg b/src/images/example/announcement-icon--light.svg new file mode 100644 index 00000000..2016fdee --- /dev/null +++ b/src/images/example/announcement-icon--light.svg @@ -0,0 +1,5 @@ + + + + +