Skip to content

Commit ee1fe3a

Browse files
mariannuarmariannuar
authored
Merge pull request #167 from emulsify-ds/EMULSIF-387-cta-component
EMULSIF-387: new component: call to action
2 parents 2228266 + 637e48f commit ee1fe3a

4 files changed

Lines changed: 197 additions & 0 deletions

File tree

‎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+

0 commit comments

Comments
 (0)