Skip to content

Commit cde94e1

Browse files
mariannuarmariannuar
committed
Merge branch 'main' of github.com:emulsify-ds/emulsify-ui-kit into gallery
2 parents 2880d87 + ee1fe3a commit cde94e1

14 files changed

Lines changed: 245 additions & 25 deletions

File tree

‎src/components/accordion/accordion.js‎

Lines changed: 14 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -5,19 +5,23 @@ Drupal.behaviors.accordion = {
55
const controls = context.querySelectorAll('.accordion__controls__item');
66
// Classes
77
const itemToggle = '.js-accordion-item__toggle';
8+
const itemContent = '.accordion-item__content';
89
const itemState = 'data-accordion-expanded';
910
const buttonState = 'aria-expanded';
11+
const contentState = 'aria-hidden';
1012

1113
// Function to expand an accordion item.
12-
const expand = (item, button) => {
14+
const expand = (item, button, content) => {
1315
item.setAttribute(itemState, 'true');
1416
button.setAttribute(buttonState, 'true');
17+
content.setAttribute(contentState, 'false');
1518
};
1619

1720
// Function to collapse an accordion item.
18-
const collapse = (item, button) => {
21+
const collapse = (item, button, content) => {
1922
item.setAttribute(itemState, 'false');
2023
button.setAttribute(buttonState, 'false');
24+
content.setAttribute(contentState, 'true');
2125
};
2226

2327
/* eslint-disable */
@@ -50,16 +54,17 @@ Drupal.behaviors.accordion = {
5054
// Toggle accordion content when toggle is activated.
5155
items.forEach((item) => {
5256
const button = item.querySelector(itemToggle);
57+
const content = item.querySelector(itemContent);
5358

5459
const anchor = item.id;
5560
// eslint-disable-next-line
5661
const newUrl = `${getUrl()}` + '#' + `${anchor}`;
5762

5863
// Hide all accordion content sections if JavaScript is enabled.
59-
collapse(item, button);
64+
collapse(item, button, content);
6065

6166
if (item.getAttribute('id') && item.getAttribute('id') === getAnchor()) {
62-
expand(item, button);
67+
expand(item, button, content);
6368
}
6469

6570
button.addEventListener('click', () => {
@@ -74,8 +79,8 @@ Drupal.behaviors.accordion = {
7479
}
7580
// Toggle the item's state.
7681
return button.getAttribute(buttonState) === 'true'
77-
? collapse(item, button)
78-
: expand(item, button);
82+
? collapse(item, button, content)
83+
: expand(item, button, content);
7984
});
8085
});
8186

@@ -96,11 +101,12 @@ Drupal.behaviors.accordion = {
96101
// Iterate over
97102
allItems.forEach((item) => {
98103
const button = item.querySelector(itemToggle);
104+
const content = item.querySelector(itemContent);
99105

100106
if (action === false) {
101-
collapse(item, button);
107+
collapse(item, button, content);
102108
} else {
103-
expand(item, button);
109+
expand(item, button, content);
104110
}
105111
});
106112
});

‎src/components/call-to-action/call-to-action.component.yml‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
$schema: https://git.drupalcode.org/project/drupal/-/raw/10.1.x/core/modules/sdc/src/metadata.schema.json
2+
3+
name: Call To Action
4+
group: Components
5+
status: stable
6+
props:
7+
type: object
8+
properties:
9+
call_to_action__overline:
10+
type: string
11+
title: Title
12+
call_to_action__heading:
13+
type: string
14+
title: Title
15+
description: The heading of the call to action.
16+
data: 'This is a call to take action heading'
17+
call_to_action__text:
18+
type: string
19+
title: Content
20+
description: 'Specifies the main content of the text with image'
21+
data: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nec vestibulum libero. Curabitur suscipit feugiat ipsum, vel auctor nunc.'
22+
call_to_action__button__text:
23+
type: string
24+
title: Button Text
25+
description: 'Specifies the link label'
26+
data: 'Student Research Opportunities'
27+
call_to_action__button__url:
28+
type: string
29+
title: Button URL
30+
description: 'Specifies the URL the link will link to'
31+
data: '#'

‎src/components/call-to-action/call-to-action.scss‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
@use '../../foundation/breakpoints/breakpoints' as *;
2+
@use '../../foundation/typography/typography' as *;
3+
4+
.call-to-action {
5+
text-align: center;
6+
padding: var(--spacing-2xl);
7+
margin-block: var(--spacing-2xl);
8+
9+
&[data-component-theme='light-blue-bg'] {
10+
background-color: var(--cta-background);
11+
}
12+
}
13+
14+
.call-to-action__overline {
15+
text-transform: uppercase;
16+
font-weight: var(--font-weight-primary-bold);
17+
color: var(--cta-color-eyebrow);
18+
}
19+
20+
.call-to-action__heading {
21+
@include h2;
22+
23+
margin: 0;
24+
color: var(--cta-color-heading);
25+
}
26+
27+
.call-to-action__content {
28+
display: flex;
29+
flex-flow: column nowrap;
30+
gap: 1rem;
31+
color: var(--cta-color-body);
32+
width: 100%;
33+
margin: 0 auto;
34+
max-width: 76ch;
35+
}
36+
37+
38+
.call-to-action__text {
39+
@include h4;
40+
41+
font-weight: var(--font-weight-primary-regular);
42+
line-height: var(--line-height-normal);
43+
}

‎src/components/call-to-action/call-to-action.stories.js‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
// Twig templates
2+
import callToActionTwig from './call-to-action.twig';
3+
// Data files
4+
import { props } from './call-to-action.component.yml';
5+
const callToActionData = props.properties;
6+
7+
/**
8+
* Storybook Definition.
9+
*/
10+
export default {
11+
title: 'Components/Call To Action',
12+
argTypes: {
13+
eyebrow: {
14+
name: 'Eyebrow',
15+
type: 'string',
16+
},
17+
heading: {
18+
name: 'Heading',
19+
type: 'string',
20+
},
21+
text: {
22+
name: 'Text',
23+
type: 'string',
24+
},
25+
buttonContent: {
26+
name: 'Link Content (optional)',
27+
type: 'string',
28+
},
29+
theme: {
30+
name: 'Component Theme',
31+
control: { type: 'select' },
32+
options: {
33+
White: 'white-bg',
34+
LightBlue: 'light-blue-bg',
35+
},
36+
},
37+
},
38+
args: {
39+
theme: 'white-bg',
40+
eyebrow: 'Eyebrow here',
41+
heading: callToActionData.call_to_action__heading.data,
42+
text: callToActionData.call_to_action__text.data,
43+
buttonContent: callToActionData.call_to_action__button__text.data,
44+
},
45+
};
46+
47+
export const callToAction = ({
48+
theme,
49+
eyebrow,
50+
heading,
51+
text,
52+
buttonContent,
53+
}) =>
54+
callToActionTwig({
55+
call_to_action__theme: theme,
56+
call_to_action__overline: eyebrow,
57+
call_to_action__heading: heading,
58+
call_to_action__text: text,
59+
call_to_action__button__text: buttonContent,
60+
call_to_action__button__url:
61+
callToActionData.call_to_action__button__url.data,
62+
});

‎src/components/call-to-action/call-to-action.twig‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
{#
2+
# Available Props:
3+
# - call_to_action__theme: white-bg (default), light-blue-bg
4+
#
5+
# Available variables:
6+
# - call_to_action__heading
7+
# - call_to_action__overline(optional)
8+
# - call_to_action__text
9+
# - call_to_action__button__text
10+
# - call_to_action__button__url
11+
#}
12+
13+
{% set call_to_action__base_class = 'call-to-action' %}
14+
15+
{% set call_to_action__attributes = {
16+
'data-component-theme': call_to_action__theme|default('white-bg'),
17+
'class': bem(call_to_action__base_class, call_to_action__modifiers, call_to_action__blockname)
18+
} %}
19+
20+
<div {{ add_attributes(call_to_action__attributes) }}>
21+
{# Content #}
22+
<div {{ bem('content', [], call_to_action__base_class) }}>
23+
{# Text overline #}
24+
{% if call_to_action__overline %}
25+
{% include "@components/typography/text/text.twig" with {
26+
text__content: call_to_action__overline,
27+
text__blockname: call_to_action__base_class,
28+
text__base_class: 'overline',
29+
} %}
30+
{% endif %}
31+
{# Heading #}
32+
{% if call_to_action__heading %}
33+
{% include "@components/typography/heading/heading.twig" with {
34+
heading: call_to_action__heading,
35+
heading__level: '2',
36+
heading__blockname: call_to_action__base_class,
37+
} %}
38+
{% endif %}
39+
{# Text #}
40+
{% if call_to_action__text %}
41+
{% include "@components/typography/text/text.twig" with {
42+
text__content: call_to_action__text,
43+
text__blockname: call_to_action__base_class,
44+
} %}
45+
{% endif %}
46+
{# optional link #}
47+
{# Render the action button #}
48+
{% if call_to_action__button__text and call_to_action__button__url %}
49+
<div {{ bem('action', [call_to_action__variant], call_to_action__base_class) }}>
50+
{% include "@components/button/button.twig" with {
51+
button__content: call_to_action__button__text,
52+
button__style: 'primary',
53+
button__attributes: {
54+
'href': call_to_action__button__url,
55+
}
56+
} %}
57+
</div>
58+
{% endif %}
59+
</div>
60+
</div>
61+

‎src/components/navigation/base/_menu-item.twig‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
{% endif %}
2424

2525
{% set site_url = path("<current>") %}
26-
{% if site_url|render == item.url|render or item.is_active %}
26+
{% if site_url|render == item.url|render or item.is_active or item.url is empty %}
2727
{% set link__attributes = link__attributes|merge({
2828
'aria-current': 'page',
2929
}) %}

‎src/components/navigation/base/menu.twig‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -40,9 +40,18 @@
4040
{% set menu__attributes = menu__attributes|merge({
4141
'id': menu__base_class,
4242
'class': bem(menu__base_class, menu__modifiers, menu__blockname, menu__additional_classes),
43-
'aria-labelledby': menu__base_class ~ '__label',
4443
}) %}
4544

45+
{% if menu_is_breadcrumb %}
46+
{% set menu__attributes = menu__attributes|merge({
47+
'aria-label': menu__name,
48+
}) %}
49+
{% else %}
50+
{% set menu__attributes = menu__attributes|merge({
51+
'aria-labelledby': menu__base_class ~ '__label',
52+
}) %}
53+
{% endif %}
54+
4655
{# Create a unique ID for each accordion item #}
4756
{% set unique_id = random('1234567890') ~ random('1234567890') ~ random('1234567890') ~ random('1234567890') %}
4857
{% set menu__toggle__id = menu__base_class ~ '-' ~ unique_id %}
@@ -88,7 +97,9 @@
8897
{% import _self as menus %}
8998

9099
<nav {{ add_attributes(menu__attributes) }}>
91-
<h2 id="{{ menu__attributes['aria-labelledby'] }}" {{ bem('visually-hidden') }}>{{ menu__name }}</h2>
100+
{% if menu_is_breadcrumb != 'true' %}
101+
<h2 id="{{ menu__attributes['aria-labelledby'] }}" {{ bem('visually-hidden') }}>{{ menu__name }}</h2>
102+
{% endif %}
92103
{% block menu_prefix %}{% endblock %}
93104
{% if menu__toggle is defined %}
94105
{{ menu_toggle }}

‎src/components/navigation/breadcrumbs/breadcrumbs.twig‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,7 @@
6868
menu__name: 'Breadcrumb',
6969
menu__list__type: 'ol',
7070
menu__attributes: breadcrumbs__attributes,
71+
menu_is_breadcrumb: 'true',
7172
} %}
7273
{% block menu_prefix %}
7374
{{ scroll_left }}

‎src/components/navigation/main/_main-link.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -123,7 +123,7 @@
123123
.main-nav__link--level-1,
124124
.main-nav__link--level-2 {
125125
& {
126-
font-size: var(--font-size-h6);
126+
font-size: var(--font-size-body);
127127
}
128128

129129
@include breakpoint('small-down') {

‎src/components/navigation/pager/pager.scss‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,9 @@
2828
}
2929

3030
&.is-active {
31+
padding: 0.35rem 0.75rem;
3132
color: var(--pager-color-text-focus);
33+
border: 2px solid var(--pager-color-fill-hover);
3234

3335
&:hover,
3436
&:focus {

0 commit comments

Comments
 (0)