Skip to content

Commit

Permalink
Merge pull request #2539 from boltdesignsystem/hotfix/v5.7.3
Browse files Browse the repository at this point in the history 
Hotfix v5.7.3
  • Loading branch information
@danielamorse
danielamorse committed Sep 7, 2022
2 parents 7bdc7f7 + 83d8b19 commit f5a7b53
Show file tree
Hide file tree
Showing 3 changed files with 224 additions and 3 deletions.
224 changes: 222 additions & 2 deletions docs-site/src/pages/pattern-lab/_patterns/999-tests/profile/00-profile-edit.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,13 +17,233 @@
}
} only %}
{% endset %}


{% set icon_facebook %}
{% include '@bolt-elements-icon/icon.twig' with {
name: 'facebook-solid',
} only %}
{% endset %}
{% set icon_twitter %}
{% include '@bolt-elements-icon/icon.twig' with {
name: 'twitter-solid',
} only %}
{% endset %}
{% set icon_linkedin %}
{% include '@bolt-elements-icon/icon.twig' with {
name: 'linkedin-solid',
} only %}
{% endset %}
{% set icon_email %}
{% include '@bolt-elements-icon/icon.twig' with {
name: 'email',
} only %}
{% endset %}
{% set icon_more %}
{% include '@bolt-elements-icon/icon.twig' with {
name: 'more',
} only %}
{% endset %}
{% set icon_pencil %}
{% include '@bolt-elements-icon/icon.twig' with {
name: 'pencil',
} only %}
{% endset %}
{% set icon_share %}
{% include '@bolt-elements-icon/icon.twig' with {
name: 'share',
} only %}
{% endset %}
{% set icon_pega_setting %}
{% include '@bolt-elements-icon/icon.twig' with {
name: 'pega-setting',
} only %}
{% endset %}

{% set avatar %}
{% include '@bolt-elements-image/image.twig' with {
attributes: {
src: '/images/placeholders/500x500.jpg',
width: 500,
height: 500,
alt: 'First Last',
loading: 'eager',
},
} only %}
{% endset %}

{% set cover %}
{% include '@bolt-elements-image/image.twig' with {
background: true,
attributes: {
src: '/images/content/promos/promo-shape-1.jpg',
width: 480,
height: 480,
alt: '',
loading: 'eager',
},
} only %}
{% endset %}

{% set actions %}
{% set popover_trigger %}
{% include '@bolt-elements-button/button.twig' with {
content: 'Share profile',
icon_only: icon_share,
hierarchy: 'tertiary',
border_radius: 'full',
size: 'xsmall',
attributes: {
type: 'button',
}
} only %}
{% endset %}
{% set popover_menu %}
{% include '@bolt-components-menu/menu.twig' with {
title: 'Share profile',
items: [
{
content: 'Facebook',
icon_before: icon_facebook,
url: 'https://www.facebook.com/sharer/sharer.php?u=https://boltdesignsystem.com&src=sdkpreparse',
attributes: {
target: '_blank',
rel: 'noopener',
}
},
{
content: 'Twitter',
icon_before: icon_twitter,
url: 'https://twitter.com/intent/tweet?url=https://boltdesignsystem.com&text=Sample%20Share%20Text&via=pega&hashtags=boltDesignSystemRocks!',
attributes: {
target: '_blank',
rel: 'noopener',
}
},
{
content: 'LinkedIn',
icon_before: icon_linkedin,
url: 'https://www.linkedin.com/shareArticle?url=https://boltdesignsystem.com',
attributes: {
target: '_blank',
rel: 'noopener',
}
},
{
content: 'Email',
icon_before: icon_email,
url: 'mailto:?&body=Sample%20Text%20--%20https%3A//boltdesignsystem.com',
attributes: {
target: '_blank',
rel: 'noopener'
}
},
]
} only %}
{% endset %}
{% include '@bolt-components-popover/popover.twig' with {
trigger: popover_trigger,
content: popover_menu,
spacing: 'none',
placement: 'bottom-end',
trigger_event: 'hover',
} only %}

{% set popover_trigger %}
{% include '@bolt-elements-button/button.twig' with {
content: 'More options',
icon_only: icon_more,
hierarchy: 'tertiary',
border_radius: 'full',
size: 'xsmall',
attributes: {
type: 'button',
}
} only %}
{% endset %}
{% set popover_menu %}
{% include '@bolt-components-menu/menu.twig' with {
title: 'More options',
items: [
{
content: 'Edit profile',
icon_before: icon_pencil,
},
{
content: 'Settings',
icon_before: icon_pega_setting,
},
]
} only %}
{% endset %}
{% include '@bolt-components-popover/popover.twig' with {
trigger: popover_trigger,
content: popover_menu,
spacing: 'none',
placement: 'bottom-end',
trigger_event: 'hover',
} only %}
{% endset %}

{% set chips %}
{% include '@bolt-components-chip/chip.twig' with {
text: 'Member since 2017',
size: 'xsmall',
border_radius: 'small',
} only %}
{% include '@bolt-components-chip/chip.twig' with {
text: 'Designer',
color: 'orange',
size: 'xsmall',
border_radius: 'small',
} only %}
{% include '@bolt-components-chip/chip.twig' with {
text: 'Available for hire',
color: 'teal',
size: 'xsmall',
border_radius: 'small',
} only %}
{% endset %}

{% include '@bolt-components-profile/profile.twig' with {
avatar: avatar,
avatar_edit_button: edit_button,
cover: cover,
name: {
content: '<strong>First Last</strong> (@username)',
tag: 'h2',
},
job_title: 'Lead System Architect',
location: 'United States',
avatar_edit_button: edit_button,
actions: actions,
chips: chips,
stats: [
{
number: '15',
label: 'Achievements',
attributes: {
href: '#!',
},
},
{
number: '3k',
label: 'Contributions',
attributes: {
href: '#!',
},
},
],
message: {
label: 'Send message',
attributes: {
href: '#!',
},
},
full_bleed: true,
attributes: {
class: [
't-bolt-white',
'u-bolt-shadow-level-20',
],
},
} only %}

1 change: 1 addition & 0 deletions packages/components/bolt-profile/src/profile.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,7 @@
}

.c-bolt-profile__avatar {
z-index: 1; // Fixes bug where "action" block covers up bottom half of avatar edit button
width: var(--c-bolt-profile-header-avatar-size);
height: var(--c-bolt-profile-header-avatar-size);
overflow: hidden;
Expand Down
2 changes: 1 addition & 1 deletion packages/components/bolt-profile/src/profile.twig
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
{% set schema = bolt.data.components['@bolt-components-profile'].schema %}
{% set schema = bolt.data.components['@bolt-components-profile'].schema['profile'] %}
{% if enable_json_schema_validation %}
{{ validate_data_schema(schema, _self)|raw }}
{% endif %}
Expand Down

0 comments on commit f5a7b53

Please sign in to comment.