Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

EMULSIF-301: Announcement component. #151

Merged
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
82 changes: 82 additions & 0 deletions src/components/announcement/_announcement.scss
Original file line number Diff line number Diff line change
@@ -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);
}
98 changes: 98 additions & 0 deletions src/components/announcement/announcement.component.yml
Original file line number Diff line number Diff line change
@@ -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'
30 changes: 30 additions & 0 deletions src/components/announcement/announcement.stories.js
Original file line number Diff line number Diff line change
@@ -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>`;
47 changes: 47 additions & 0 deletions src/components/announcement/announcement.twig
Original file line number Diff line number Diff line change
@@ -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>
2 changes: 1 addition & 1 deletion src/components/tokens/_tokens.scss
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
/**
* Do not edit directly
* Generated on Fri, 16 Aug 2024 00:39:27 GMT
* Generated on Fri, 23 Aug 2024 18:35:57 GMT
*/

:root {
Expand Down
5 changes: 5 additions & 0 deletions src/images/example/announcement-icon--dark.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
5 changes: 5 additions & 0 deletions src/images/example/announcement-icon--light.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.