diff --git a/docs-site/src/pages/pattern-lab/_patterns/40-components/floating-action-buttons/-05a-floating-action-buttons-demo.twig b/docs-site/src/pages/pattern-lab/_patterns/40-components/floating-action-buttons/-05a-floating-action-buttons-demo.twig new file mode 100644 index 0000000000..9816fc4b07 --- /dev/null +++ b/docs-site/src/pages/pattern-lab/_patterns/40-components/floating-action-buttons/-05a-floating-action-buttons-demo.twig @@ -0,0 +1,89 @@ +{% extends '@pl/_site-layout-template.twig' %} + +{% block main_content %} + {% set layout_items %} + {% set banner %} + {% include '@bolt-components-banner/banner.twig' with { + content: 'This demo shows the usage of basic floating action buttons. In this particular case, a scroll to top button is utilized.', + align: 'start', + } only %} + {% endset %} + {% include '@bolt-layouts-layout/layout-item.twig' with { + content: banner, + } only %} + {% include '@bolt-layouts-layout/layout-item.twig' with { + content: 'Bacon ipsum dolor amet burgdoggen beef rump sausage. Chislic beef hamburger turducken pork chop. Shank drumstick biltong, landjaeger ham hock meatloaf swine flank. Swine tenderloin shank, sirloin pork chicken jerky chislic ball tip.', + } only %} + {% include '@bolt-layouts-layout/layout-item.twig' with { + content: 'Ground round kielbasa meatloaf, bacon flank rump pancetta. Burgdoggen hamburger jowl turducken chicken, jerky flank kielbasa pork belly beef ribs fatback boudin shankle rump turkey. Fatback andouille chicken ground round beef, tail buffalo pastrami capicola chislic sausage leberkas short ribs. Kielbasa jowl jerky, swine porchetta boudin drumstick andouille chicken flank ribeye.', + } only %} + {% include '@bolt-layouts-layout/layout-item.twig' with { + content: 'Picanha biltong salami pork chop capicola t-bone jowl tongue. Cow pork chop jowl capicola, doner pork jerky short loin spare ribs turducken frankfurter shankle sausage. Spare ribs pork biltong, chicken alcatra cow picanha brisket drumstick tongue prosciutto shank beef tail pig. Kielbasa t-bone venison chislic, tongue pork tenderloin capicola chuck pastrami jerky.', + } only %} + {% include '@bolt-layouts-layout/layout-item.twig' with { + content: 'Hamburger pastrami short loin pork belly salami pig. Spare ribs sausage t-bone ham hock turkey pork chop tri-tip picanha. Venison turducken beef ribs cow, corned beef swine spare ribs pork chop. Turducken venison pork chop short ribs, fatback tri-tip turkey leberkas t-bone pig andouille ham brisket tongue. Meatloaf bresaola frankfurter pork loin chicken doner, flank beef ground round biltong beef ribs landjaeger pastrami leberkas.', + } only %} + {% include '@bolt-layouts-layout/layout-item.twig' with { + content: 'Short loin andouille ball tip, filet mignon beef ribs chicken cupim ground round pork chop beef tongue. Swine flank jerky pastrami kielbasa short loin tenderloin short ribs prosciutto turkey sirloin turducken jowl. Salami ribeye ball tip, buffalo kielbasa tail doner burgdoggen leberkas meatball. Rump buffalo salami chislic venison landjaeger boudin, ribeye tongue.', + } only %} + {% include '@bolt-layouts-layout/layout-item.twig' with { + content: 'Bacon ipsum dolor amet burgdoggen beef rump sausage. Chislic beef hamburger turducken pork chop. Shank drumstick biltong, landjaeger ham hock meatloaf swine flank. Swine tenderloin shank, sirloin pork chicken jerky chislic ball tip.', + } only %} + {% include '@bolt-layouts-layout/layout-item.twig' with { + content: 'Ground round kielbasa meatloaf, bacon flank rump pancetta. Burgdoggen hamburger jowl turducken chicken, jerky flank kielbasa pork belly beef ribs fatback boudin shankle rump turkey. Fatback andouille chicken ground round beef, tail buffalo pastrami capicola chislic sausage leberkas short ribs. Kielbasa jowl jerky, swine porchetta boudin drumstick andouille chicken flank ribeye.', + } only %} + {% include '@bolt-layouts-layout/layout-item.twig' with { + content: 'Picanha biltong salami pork chop capicola t-bone jowl tongue. Cow pork chop jowl capicola, doner pork jerky short loin spare ribs turducken frankfurter shankle sausage. Spare ribs pork biltong, chicken alcatra cow picanha brisket drumstick tongue prosciutto shank beef tail pig. Kielbasa t-bone venison chislic, tongue pork tenderloin capicola chuck pastrami jerky.', + } only %} + {% include '@bolt-layouts-layout/layout-item.twig' with { + content: 'Hamburger pastrami short loin pork belly salami pig. Spare ribs sausage t-bone ham hock turkey pork chop tri-tip picanha. Venison turducken beef ribs cow, corned beef swine spare ribs pork chop. Turducken venison pork chop short ribs, fatback tri-tip turkey leberkas t-bone pig andouille ham brisket tongue. Meatloaf bresaola frankfurter pork loin chicken doner, flank beef ground round biltong beef ribs landjaeger pastrami leberkas.', + } only %} + {% include '@bolt-layouts-layout/layout-item.twig' with { + content: 'Short loin andouille ball tip, filet mignon beef ribs chicken cupim ground round pork chop beef tongue. Swine flank jerky pastrami kielbasa short loin tenderloin short ribs prosciutto turkey sirloin turducken jowl. Salami ribeye ball tip, buffalo kielbasa tail doner burgdoggen leberkas meatball. Rump buffalo salami chislic venison landjaeger boudin, ribeye tongue.', + } only %} + {% endset %} + {% set fab %} + {% set scroll_to_top_button %} + {% set trigger %} + {% set icon_chevron_up %} + {% include '@bolt-components-icon/icon.twig' with { + name: 'chevron-up', + } only %} + {% endset %} + {% include '@bolt-elements-button/button.twig' with { + content: 'Back to top', + border_radius: 'full', + icon_only: icon_chevron_up, + attributes: { + href: '#top', + }, + } only %} + {% endset %} + {% include '@bolt-components-tooltip/tooltip.twig' with { + content: 'Back to top', + placement: 'left', + trigger: trigger, + } only %} + {% endset %} + + {% set fab_list_items %} + {% include '@bolt-components-floating-action-buttons/floating-action-buttons-li.twig' with { + content: scroll_to_top_button, + } only %} + {% endset %} + + {% set fab_list %} + {% include '@bolt-components-floating-action-buttons/floating-action-buttons-ul.twig' with { + content: fab_list_items, + } only %} + {% endset %} + + {% include '@bolt-components-floating-action-buttons/floating-action-buttons.twig' with { + content: fab_list, + } only %} + {% endset %} + + {% include '@bolt-layouts-layout/layout.twig' with { + content: layout_items ~ fab, + } only %} +{% endblock %} diff --git a/docs-site/src/pages/pattern-lab/_patterns/40-components/floating-action-buttons/-10a-floating-action-buttons-demo-show-on-scroll-selector.twig b/docs-site/src/pages/pattern-lab/_patterns/40-components/floating-action-buttons/-10a-floating-action-buttons-demo-show-on-scroll-selector.twig new file mode 100644 index 0000000000..0b8dea8dbc --- /dev/null +++ b/docs-site/src/pages/pattern-lab/_patterns/40-components/floating-action-buttons/-10a-floating-action-buttons-demo-show-on-scroll-selector.twig @@ -0,0 +1,170 @@ +{% extends '@pl/_site-layout-template.twig' %} + +{% block main_content %} + {% set layout_items %} + {% set banner %} + {% include '@bolt-components-banner/banner.twig' with { + content: 'This demo shows individual floating action buttons to show on scroll. Once the user scrolls past Article Title, the buttons appear.', + align: 'start', + } only %} + {% endset %} + {% include '@bolt-layouts-layout/layout-item.twig' with { + content: banner, + } only %} + + {% set title %} + {% include '@bolt-components-headline/headline.twig' with { + text: 'Article Title', + attributes: { + id: 'main-title' + }, + } only %} + {% endset %} + {% include '@bolt-layouts-layout/layout-item.twig' with { + content: title, + } only %} + + {% include '@bolt-layouts-layout/layout-item.twig' with { + content: 'Bacon ipsum dolor amet burgdoggen beef rump sausage. Chislic beef hamburger turducken pork chop. Shank drumstick biltong, landjaeger ham hock meatloaf swine flank. Swine tenderloin shank, sirloin pork chicken jerky chislic ball tip.', + } only %} + {% include '@bolt-layouts-layout/layout-item.twig' with { + content: 'Ground round kielbasa meatloaf, bacon flank rump pancetta. Burgdoggen hamburger jowl turducken chicken, jerky flank kielbasa pork belly beef ribs fatback boudin shankle rump turkey. Fatback andouille chicken ground round beef, tail buffalo pastrami capicola chislic sausage leberkas short ribs. Kielbasa jowl jerky, swine porchetta boudin drumstick andouille chicken flank ribeye.', + } only %} + {% include '@bolt-layouts-layout/layout-item.twig' with { + content: 'Picanha biltong salami pork chop capicola t-bone jowl tongue. Cow pork chop jowl capicola, doner pork jerky short loin spare ribs turducken frankfurter shankle sausage. Spare ribs pork biltong, chicken alcatra cow picanha brisket drumstick tongue prosciutto shank beef tail pig. Kielbasa t-bone venison chislic, tongue pork tenderloin capicola chuck pastrami jerky.', + } only %} + {% include '@bolt-layouts-layout/layout-item.twig' with { + content: 'Hamburger pastrami short loin pork belly salami pig. Spare ribs sausage t-bone ham hock turkey pork chop tri-tip picanha. Venison turducken beef ribs cow, corned beef swine spare ribs pork chop. Turducken venison pork chop short ribs, fatback tri-tip turkey leberkas t-bone pig andouille ham brisket tongue. Meatloaf bresaola frankfurter pork loin chicken doner, flank beef ground round biltong beef ribs landjaeger pastrami leberkas.', + } only %} + {% include '@bolt-layouts-layout/layout-item.twig' with { + content: 'Short loin andouille ball tip, filet mignon beef ribs chicken cupim ground round pork chop beef tongue. Swine flank jerky pastrami kielbasa short loin tenderloin short ribs prosciutto turkey sirloin turducken jowl. Salami ribeye ball tip, buffalo kielbasa tail doner burgdoggen leberkas meatball. Rump buffalo salami chislic venison landjaeger boudin, ribeye tongue.', + } only %} + {% include '@bolt-layouts-layout/layout-item.twig' with { + content: 'Bacon ipsum dolor amet burgdoggen beef rump sausage. Chislic beef hamburger turducken pork chop. Shank drumstick biltong, landjaeger ham hock meatloaf swine flank. Swine tenderloin shank, sirloin pork chicken jerky chislic ball tip.', + } only %} + {% include '@bolt-layouts-layout/layout-item.twig' with { + content: 'Ground round kielbasa meatloaf, bacon flank rump pancetta. Burgdoggen hamburger jowl turducken chicken, jerky flank kielbasa pork belly beef ribs fatback boudin shankle rump turkey. Fatback andouille chicken ground round beef, tail buffalo pastrami capicola chislic sausage leberkas short ribs. Kielbasa jowl jerky, swine porchetta boudin drumstick andouille chicken flank ribeye.', + } only %} + {% include '@bolt-layouts-layout/layout-item.twig' with { + content: 'Picanha biltong salami pork chop capicola t-bone jowl tongue. Cow pork chop jowl capicola, doner pork jerky short loin spare ribs turducken frankfurter shankle sausage. Spare ribs pork biltong, chicken alcatra cow picanha brisket drumstick tongue prosciutto shank beef tail pig. Kielbasa t-bone venison chislic, tongue pork tenderloin capicola chuck pastrami jerky.', + } only %} + {% include '@bolt-layouts-layout/layout-item.twig' with { + content: 'Hamburger pastrami short loin pork belly salami pig. Spare ribs sausage t-bone ham hock turkey pork chop tri-tip picanha. Venison turducken beef ribs cow, corned beef swine spare ribs pork chop. Turducken venison pork chop short ribs, fatback tri-tip turkey leberkas t-bone pig andouille ham brisket tongue. Meatloaf bresaola frankfurter pork loin chicken doner, flank beef ground round biltong beef ribs landjaeger pastrami leberkas.', + } only %} + {% include '@bolt-layouts-layout/layout-item.twig' with { + content: 'Short loin andouille ball tip, filet mignon beef ribs chicken cupim ground round pork chop beef tongue. Swine flank jerky pastrami kielbasa short loin tenderloin short ribs prosciutto turkey sirloin turducken jowl. Salami ribeye ball tip, buffalo kielbasa tail doner burgdoggen leberkas meatball. Rump buffalo salami chislic venison landjaeger boudin, ribeye tongue.', + } only %} + {% include '@bolt-layouts-layout/layout-item.twig' with { + content: 'Bacon ipsum dolor amet burgdoggen beef rump sausage. Chislic beef hamburger turducken pork chop. Shank drumstick biltong, landjaeger ham hock meatloaf swine flank. Swine tenderloin shank, sirloin pork chicken jerky chislic ball tip.', + } only %} + {% include '@bolt-layouts-layout/layout-item.twig' with { + content: 'Ground round kielbasa meatloaf, bacon flank rump pancetta. Burgdoggen hamburger jowl turducken chicken, jerky flank kielbasa pork belly beef ribs fatback boudin shankle rump turkey. Fatback andouille chicken ground round beef, tail buffalo pastrami capicola chislic sausage leberkas short ribs. Kielbasa jowl jerky, swine porchetta boudin drumstick andouille chicken flank ribeye.', + } only %} + {% include '@bolt-layouts-layout/layout-item.twig' with { + content: 'Picanha biltong salami pork chop capicola t-bone jowl tongue. Cow pork chop jowl capicola, doner pork jerky short loin spare ribs turducken frankfurter shankle sausage. Spare ribs pork biltong, chicken alcatra cow picanha brisket drumstick tongue prosciutto shank beef tail pig. Kielbasa t-bone venison chislic, tongue pork tenderloin capicola chuck pastrami jerky.', + } only %} + {% include '@bolt-layouts-layout/layout-item.twig' with { + content: 'Hamburger pastrami short loin pork belly salami pig. Spare ribs sausage t-bone ham hock turkey pork chop tri-tip picanha. Venison turducken beef ribs cow, corned beef swine spare ribs pork chop. Turducken venison pork chop short ribs, fatback tri-tip turkey leberkas t-bone pig andouille ham brisket tongue. Meatloaf bresaola frankfurter pork loin chicken doner, flank beef ground round biltong beef ribs landjaeger pastrami leberkas.', + } only %} + {% include '@bolt-layouts-layout/layout-item.twig' with { + content: 'Short loin andouille ball tip, filet mignon beef ribs chicken cupim ground round pork chop beef tongue. Swine flank jerky pastrami kielbasa short loin tenderloin short ribs prosciutto turkey sirloin turducken jowl. Salami ribeye ball tip, buffalo kielbasa tail doner burgdoggen leberkas meatball. Rump buffalo salami chislic venison landjaeger boudin, ribeye tongue.', + } only %} + {% endset %} + {% set fab %} + {% set scroll_to_top_button %} + {% set trigger %} + {% set icon_chevron_up %} + {% include '@bolt-components-icon/icon.twig' with { + name: 'chevron-up', + } only %} + {% endset %} + {% include '@bolt-elements-button/button.twig' with { + content: 'Back to top', + border_radius: 'full', + icon_only: icon_chevron_up, + attributes: { + href: '#top', + }, + } only %} + {% endset %} + {% include '@bolt-components-tooltip/tooltip.twig' with { + content: 'Back to top', + placement: 'left', + trigger: trigger, + } only %} + {% endset %} + + {% set download_button %} + {% set trigger %} + {% set icon_download %} + {% include '@bolt-components-icon/icon.twig' with { + name: 'download', + } only %} + {% endset %} + {% include '@bolt-elements-button/button.twig' with { + content: 'Download', + border_radius: 'full', + icon_only: icon_download, + attributes: { + href: 'https://google.com', + }, + } only %} + {% endset %} + {% include '@bolt-components-tooltip/tooltip.twig' with { + content: 'Download', + placement: 'left', + trigger: trigger, + } only %} + {% endset %} + + {% set placeholder_button %} + {% set icon_link %} + {% include '@bolt-elements-icon/icon.twig' with { + name: 'external-link', + } only %} + {% endset %} + {% include '@bolt-components-tooltip/tooltip.twig' with { + content: 'Go to Google', + placement: 'left', + trigger: include('@bolt-elements-button/button.twig', { + content: 'Go to Google', + border_radius: 'full', + icon_only: icon_link, + attributes: { + href: 'https://www.google.com', + rel: 'noopener', + target: '_blank' + }, + }), + } only %} + {% endset %} + + {% set fab_list_items %} + {% include '@bolt-components-floating-action-buttons/floating-action-buttons-li.twig' with { + content: scroll_to_top_button, + show_on_scroll_selector: '#main-title' + } only %} + {% include '@bolt-components-floating-action-buttons/floating-action-buttons-li.twig' with { + content: download_button, + show_on_scroll_selector: '#main-title' + } only %} + {% include '@bolt-components-floating-action-buttons/floating-action-buttons-li.twig' with { + content: placeholder_button, + } only %} + {% endset %} + + {% set fab_list %} + {% include '@bolt-components-floating-action-buttons/floating-action-buttons-ul.twig' with { + content: fab_list_items, + } only %} + {% endset %} + + {% include '@bolt-components-floating-action-buttons/floating-action-buttons.twig' with { + content: fab_list, + } only %} + {% endset %} + + {% include '@bolt-layouts-layout/layout.twig' with { + content: layout_items ~ fab, + } only %} +{% endblock %} diff --git a/docs-site/src/pages/pattern-lab/_patterns/40-components/floating-action-buttons/-15a-floating-action-buttons-demo-toggle-button.twig b/docs-site/src/pages/pattern-lab/_patterns/40-components/floating-action-buttons/-15a-floating-action-buttons-demo-toggle-button.twig new file mode 100644 index 0000000000..385f63f035 --- /dev/null +++ b/docs-site/src/pages/pattern-lab/_patterns/40-components/floating-action-buttons/-15a-floating-action-buttons-demo-toggle-button.twig @@ -0,0 +1,201 @@ +{% extends '@pl/_site-layout-template.twig' %} + +{% block main_content %} + {% set layout_items %} + {% set banner %} + {% include '@bolt-components-banner/banner.twig' with { + content: 'This demo shows the usage of the toggle button. In this particular case, the toggle button is used to show more actions (a list of secondary action buttons).', + align: 'start', + } only %} + {% endset %} + {% include '@bolt-layouts-layout/layout-item.twig' with { + content: banner, + } only %} + {% include '@bolt-layouts-layout/layout-item.twig' with { + content: 'Bacon ipsum dolor amet burgdoggen beef rump sausage. Chislic beef hamburger turducken pork chop. Shank drumstick biltong, landjaeger ham hock meatloaf swine flank. Swine tenderloin shank, sirloin pork chicken jerky chislic ball tip.', + } only %} + {% include '@bolt-layouts-layout/layout-item.twig' with { + content: 'Ground round kielbasa meatloaf, bacon flank rump pancetta. Burgdoggen hamburger jowl turducken chicken, jerky flank kielbasa pork belly beef ribs fatback boudin shankle rump turkey. Fatback andouille chicken ground round beef, tail buffalo pastrami capicola chislic sausage leberkas short ribs. Kielbasa jowl jerky, swine porchetta boudin drumstick andouille chicken flank ribeye.', + } only %} + {% include '@bolt-layouts-layout/layout-item.twig' with { + content: 'Picanha biltong salami pork chop capicola t-bone jowl tongue. Cow pork chop jowl capicola, doner pork jerky short loin spare ribs turducken frankfurter shankle sausage. Spare ribs pork biltong, chicken alcatra cow picanha brisket drumstick tongue prosciutto shank beef tail pig. Kielbasa t-bone venison chislic, tongue pork tenderloin capicola chuck pastrami jerky.', + } only %} + {% include '@bolt-layouts-layout/layout-item.twig' with { + content: 'Hamburger pastrami short loin pork belly salami pig. Spare ribs sausage t-bone ham hock turkey pork chop tri-tip picanha. Venison turducken beef ribs cow, corned beef swine spare ribs pork chop. Turducken venison pork chop short ribs, fatback tri-tip turkey leberkas t-bone pig andouille ham brisket tongue. Meatloaf bresaola frankfurter pork loin chicken doner, flank beef ground round biltong beef ribs landjaeger pastrami leberkas.', + } only %} + {% include '@bolt-layouts-layout/layout-item.twig' with { + content: 'Short loin andouille ball tip, filet mignon beef ribs chicken cupim ground round pork chop beef tongue. Swine flank jerky pastrami kielbasa short loin tenderloin short ribs prosciutto turkey sirloin turducken jowl. Salami ribeye ball tip, buffalo kielbasa tail doner burgdoggen leberkas meatball. Rump buffalo salami chislic venison landjaeger boudin, ribeye tongue.', + } only %} + {% include '@bolt-layouts-layout/layout-item.twig' with { + content: 'Bacon ipsum dolor amet burgdoggen beef rump sausage. Chislic beef hamburger turducken pork chop. Shank drumstick biltong, landjaeger ham hock meatloaf swine flank. Swine tenderloin shank, sirloin pork chicken jerky chislic ball tip.', + } only %} + {% include '@bolt-layouts-layout/layout-item.twig' with { + content: 'Ground round kielbasa meatloaf, bacon flank rump pancetta. Burgdoggen hamburger jowl turducken chicken, jerky flank kielbasa pork belly beef ribs fatback boudin shankle rump turkey. Fatback andouille chicken ground round beef, tail buffalo pastrami capicola chislic sausage leberkas short ribs. Kielbasa jowl jerky, swine porchetta boudin drumstick andouille chicken flank ribeye.', + } only %} + {% include '@bolt-layouts-layout/layout-item.twig' with { + content: 'Picanha biltong salami pork chop capicola t-bone jowl tongue. Cow pork chop jowl capicola, doner pork jerky short loin spare ribs turducken frankfurter shankle sausage. Spare ribs pork biltong, chicken alcatra cow picanha brisket drumstick tongue prosciutto shank beef tail pig. Kielbasa t-bone venison chislic, tongue pork tenderloin capicola chuck pastrami jerky.', + } only %} + {% include '@bolt-layouts-layout/layout-item.twig' with { + content: 'Hamburger pastrami short loin pork belly salami pig. Spare ribs sausage t-bone ham hock turkey pork chop tri-tip picanha. Venison turducken beef ribs cow, corned beef swine spare ribs pork chop. Turducken venison pork chop short ribs, fatback tri-tip turkey leberkas t-bone pig andouille ham brisket tongue. Meatloaf bresaola frankfurter pork loin chicken doner, flank beef ground round biltong beef ribs landjaeger pastrami leberkas.', + } only %} + {% include '@bolt-layouts-layout/layout-item.twig' with { + content: 'Short loin andouille ball tip, filet mignon beef ribs chicken cupim ground round pork chop beef tongue. Swine flank jerky pastrami kielbasa short loin tenderloin short ribs prosciutto turkey sirloin turducken jowl. Salami ribeye ball tip, buffalo kielbasa tail doner burgdoggen leberkas meatball. Rump buffalo salami chislic venison landjaeger boudin, ribeye tongue.', + } only %} + {% endset %} + {% set fab %} + {% set share_button %} + {% set share_menu %} + {% include '@bolt-components-share/share.twig' with { + display: 'menu', + text: 'Share this content', + size: 'small', + sources: [ + { + name: 'linkedin', + attributes: { + href: 'https://www.linkedin.com/shareArticle?url=https://google.com' + } + }, + { + name: 'email', + attributes: { + href: 'mailto:?&body=Sample%20Text%20--%20https%3A//mail.com' + } + } + ], + copy_to_clipboard: { + text_to_copy: 'https://google.com', + }, + } only %} + {% endset %} + {% set share_popover_trigger %} + {% set icon_share %} + {% include '@bolt-elements-icon/icon.twig' with { + name: 'share', + } only %} + {% endset %} + {% include '@bolt-elements-button/button.twig' with { + content: 'Share this page', + border_radius: 'full', + icon_only: icon_share, + attributes: { + type: 'button' + } + } only %} + {% endset %} + {% include '@bolt-components-popover/popover.twig' with { + trigger: share_popover_trigger, + content: share_menu, + spacing: 'none', + trigger_event: 'hover', + placement: 'left-end', + } only %} + {% endset %} + + {% set scroll_to_top_button %} + {% set trigger %} + {% set icon_chevron_up %} + {% include '@bolt-components-icon/icon.twig' with { + name: 'chevron-up', + } only %} + {% endset %} + {% include '@bolt-elements-button/button.twig' with { + content: 'Back to top', + border_radius: 'full', + icon_only: icon_chevron_up, + attributes: { + href: '#top', + }, + } only %} + {% endset %} + {% include '@bolt-components-tooltip/tooltip.twig' with { + content: 'Back to top', + placement: 'left', + trigger: trigger, + } only %} + {% endset %} + + {% set more_button %} + {% include '@bolt-components-floating-action-buttons/floating-action-buttons-toggle-button.twig' with { + content: 'More actions', + border_radius: 'full', + attributes: { + type: 'button', + } + } only %} + {% endset %} + + {% set more_actions_list_items %} + {% set placeholder_button %} + {% set icon_link %} + {% include '@bolt-elements-icon/icon.twig' with { + name: 'external-link', + } only %} + {% endset %} + {% include '@bolt-components-tooltip/tooltip.twig' with { + content: 'Go to Google', + placement: 'left', + trigger: include('@bolt-elements-button/button.twig', { + content: 'Go to Google', + size: 'small', + border_radius: 'full', + icon_only: icon_link, + hierarchy: 'secondary', + attributes: { + href: 'https://www.google.com', + rel: 'noopener', + target: '_blank' + }, + }), + } only %} + {% endset %} + {% include '@bolt-components-floating-action-buttons/floating-action-buttons-li.twig' with { + content: placeholder_button, + } only %} + {% include '@bolt-components-floating-action-buttons/floating-action-buttons-li.twig' with { + content: placeholder_button, + } only %} + {% include '@bolt-components-floating-action-buttons/floating-action-buttons-li.twig' with { + content: placeholder_button, + } only %} + {% include '@bolt-components-floating-action-buttons/floating-action-buttons-li.twig' with { + content: placeholder_button, + } only %} + {% include '@bolt-components-floating-action-buttons/floating-action-buttons-li.twig' with { + content: placeholder_button, + } only %} + {% endset %} + {% set more_actions_list %} + {% include '@bolt-components-floating-action-buttons/floating-action-buttons-ul.twig' with { + content: more_actions_list_items, + } only %} + {% endset %} + + {% set fab_list_items %} + {% include '@bolt-components-floating-action-buttons/floating-action-buttons-li.twig' with { + content: scroll_to_top_button, + } only %} + {% include '@bolt-components-floating-action-buttons/floating-action-buttons-li.twig' with { + content: share_button, + } only %} + {% include '@bolt-components-floating-action-buttons/floating-action-buttons-li.twig' with { + content: more_button, + children: more_actions_list + } only %} + {% endset %} + + {% set fab_list %} + {% include '@bolt-components-floating-action-buttons/floating-action-buttons-ul.twig' with { + content: fab_list_items, + } only %} + {% endset %} + + {% include '@bolt-components-floating-action-buttons/floating-action-buttons.twig' with { + content: fab_list, + } only %} + {% endset %} + + {% include '@bolt-layouts-layout/layout.twig' with { + content: layout_items ~ fab, + } only %} +{% endblock %} diff --git a/docs-site/src/pages/pattern-lab/_patterns/40-components/floating-action-buttons/-999a-floating-action-buttons-demo-use-case-offsets.twig b/docs-site/src/pages/pattern-lab/_patterns/40-components/floating-action-buttons/-999a-floating-action-buttons-demo-use-case-offsets.twig new file mode 100644 index 0000000000..1d561b181f --- /dev/null +++ b/docs-site/src/pages/pattern-lab/_patterns/40-components/floating-action-buttons/-999a-floating-action-buttons-demo-use-case-offsets.twig @@ -0,0 +1,92 @@ +{% extends '@pl/_site-layout-template.twig' %} + +{% block main_content %} + {% set layout_items %} + {% set banner %} + {% include '@bolt-components-banner/banner.twig' with { + content: 'This demo shows using offsets to further adjust the placement of FAB.', + align: 'start', + } only %} + {% endset %} + {% include '@bolt-layouts-layout/layout-item.twig' with { + content: banner, + } only %} + {% include '@bolt-layouts-layout/layout-item.twig' with { + content: 'Bacon ipsum dolor amet burgdoggen beef rump sausage. Chislic beef hamburger turducken pork chop. Shank drumstick biltong, landjaeger ham hock meatloaf swine flank. Swine tenderloin shank, sirloin pork chicken jerky chislic ball tip.', + } only %} + {% include '@bolt-layouts-layout/layout-item.twig' with { + content: 'Ground round kielbasa meatloaf, bacon flank rump pancetta. Burgdoggen hamburger jowl turducken chicken, jerky flank kielbasa pork belly beef ribs fatback boudin shankle rump turkey. Fatback andouille chicken ground round beef, tail buffalo pastrami capicola chislic sausage leberkas short ribs. Kielbasa jowl jerky, swine porchetta boudin drumstick andouille chicken flank ribeye.', + } only %} + {% include '@bolt-layouts-layout/layout-item.twig' with { + content: 'Picanha biltong salami pork chop capicola t-bone jowl tongue. Cow pork chop jowl capicola, doner pork jerky short loin spare ribs turducken frankfurter shankle sausage. Spare ribs pork biltong, chicken alcatra cow picanha brisket drumstick tongue prosciutto shank beef tail pig. Kielbasa t-bone venison chislic, tongue pork tenderloin capicola chuck pastrami jerky.', + } only %} + {% include '@bolt-layouts-layout/layout-item.twig' with { + content: 'Hamburger pastrami short loin pork belly salami pig. Spare ribs sausage t-bone ham hock turkey pork chop tri-tip picanha. Venison turducken beef ribs cow, corned beef swine spare ribs pork chop. Turducken venison pork chop short ribs, fatback tri-tip turkey leberkas t-bone pig andouille ham brisket tongue. Meatloaf bresaola frankfurter pork loin chicken doner, flank beef ground round biltong beef ribs landjaeger pastrami leberkas.', + } only %} + {% include '@bolt-layouts-layout/layout-item.twig' with { + content: 'Short loin andouille ball tip, filet mignon beef ribs chicken cupim ground round pork chop beef tongue. Swine flank jerky pastrami kielbasa short loin tenderloin short ribs prosciutto turkey sirloin turducken jowl. Salami ribeye ball tip, buffalo kielbasa tail doner burgdoggen leberkas meatball. Rump buffalo salami chislic venison landjaeger boudin, ribeye tongue.', + } only %} + {% include '@bolt-layouts-layout/layout-item.twig' with { + content: 'Bacon ipsum dolor amet burgdoggen beef rump sausage. Chislic beef hamburger turducken pork chop. Shank drumstick biltong, landjaeger ham hock meatloaf swine flank. Swine tenderloin shank, sirloin pork chicken jerky chislic ball tip.', + } only %} + {% include '@bolt-layouts-layout/layout-item.twig' with { + content: 'Ground round kielbasa meatloaf, bacon flank rump pancetta. Burgdoggen hamburger jowl turducken chicken, jerky flank kielbasa pork belly beef ribs fatback boudin shankle rump turkey. Fatback andouille chicken ground round beef, tail buffalo pastrami capicola chislic sausage leberkas short ribs. Kielbasa jowl jerky, swine porchetta boudin drumstick andouille chicken flank ribeye.', + } only %} + {% include '@bolt-layouts-layout/layout-item.twig' with { + content: 'Picanha biltong salami pork chop capicola t-bone jowl tongue. Cow pork chop jowl capicola, doner pork jerky short loin spare ribs turducken frankfurter shankle sausage. Spare ribs pork biltong, chicken alcatra cow picanha brisket drumstick tongue prosciutto shank beef tail pig. Kielbasa t-bone venison chislic, tongue pork tenderloin capicola chuck pastrami jerky.', + } only %} + {% include '@bolt-layouts-layout/layout-item.twig' with { + content: 'Hamburger pastrami short loin pork belly salami pig. Spare ribs sausage t-bone ham hock turkey pork chop tri-tip picanha. Venison turducken beef ribs cow, corned beef swine spare ribs pork chop. Turducken venison pork chop short ribs, fatback tri-tip turkey leberkas t-bone pig andouille ham brisket tongue. Meatloaf bresaola frankfurter pork loin chicken doner, flank beef ground round biltong beef ribs landjaeger pastrami leberkas.', + } only %} + {% include '@bolt-layouts-layout/layout-item.twig' with { + content: 'Short loin andouille ball tip, filet mignon beef ribs chicken cupim ground round pork chop beef tongue. Swine flank jerky pastrami kielbasa short loin tenderloin short ribs prosciutto turkey sirloin turducken jowl. Salami ribeye ball tip, buffalo kielbasa tail doner burgdoggen leberkas meatball. Rump buffalo salami chislic venison landjaeger boudin, ribeye tongue.', + } only %} + {% endset %} + {% set fab %} + {% set scroll_to_top_button %} + {% set trigger %} + {% set icon_chevron_up %} + {% include '@bolt-components-icon/icon.twig' with { + name: 'chevron-up', + } only %} + {% endset %} + {% include '@bolt-elements-button/button.twig' with { + content: 'Back to top', + border_radius: 'full', + icon_only: icon_chevron_up, + attributes: { + href: '#top', + }, + } only %} + {% endset %} + {% include '@bolt-components-tooltip/tooltip.twig' with { + content: 'Back to top', + placement: 'left', + trigger: trigger, + } only %} + {% endset %} + + {% set fab_list_items %} + {% include '@bolt-components-floating-action-buttons/floating-action-buttons-li.twig' with { + content: scroll_to_top_button, + } only %} + {% endset %} + + {% set fab_list %} + {% include '@bolt-components-floating-action-buttons/floating-action-buttons-ul.twig' with { + content: fab_list_items, + } only %} + {% endset %} + + {% include '@bolt-components-floating-action-buttons/floating-action-buttons.twig' with { + content: fab_list, + attributes: { + style: '--c-bolt-floating-action-buttons-offset-x: 5vw; --c-bolt-floating-action-buttons-offset-y: 5vh;', + } + } only %} + {% endset %} + + {% include '@bolt-layouts-layout/layout.twig' with { + content: layout_items ~ fab, + } only %} +{% endblock %} diff --git a/docs-site/src/pages/pattern-lab/_patterns/40-components/floating-action-buttons/00-floating-action-buttons-docs.twig b/docs-site/src/pages/pattern-lab/_patterns/40-components/floating-action-buttons/00-floating-action-buttons-docs.twig new file mode 100644 index 0000000000..659e860054 --- /dev/null +++ b/docs-site/src/pages/pattern-lab/_patterns/40-components/floating-action-buttons/00-floating-action-buttons-docs.twig @@ -0,0 +1,47 @@ +{% set usage %}{% verbatim %} +{# Assemble the button(s) as list item(s) #} +{% set scroll_to_top_button %} + {% set trigger %} + {% set icon_chevron_up %} + {% include '@bolt-components-icon/icon.twig' with { + name: 'chevron-up', + } only %} + {% endset %} + {% include '@bolt-elements-button/button.twig' with { + content: 'Back to top', + border_radius: 'full', + icon_only: icon_chevron_up, + attributes: { + href: '#top', + }, + } only %} + {% endset %} + {% include '@bolt-components-tooltip/tooltip.twig' with { + content: 'Back to top', + placement: 'left', + trigger: trigger, + } only %} +{% endset %} +{% set fab_list_items %} + {% include '@bolt-components-floating-action-buttons/floating-action-buttons-li.twig' with { + content: scroll_to_top_button, + } only %} +{% endset %} + +{# Pass the list items into the list template #} +{% set fab_list %} + {% include '@bolt-components-floating-action-buttons/floating-action-buttons-ul.twig' with { + content: fab_list_items, + } only %} +{% endset %} + +{# Pass the list into the main template #} +{% include '@bolt-components-floating-action-buttons/floating-action-buttons.twig' with { + content: fab_list, +} only %} +{% endverbatim %}{% endset %} + +{% include '@utils/docs.twig' with { + componentName: 'floating-action-buttons', + usage: usage +} only %} diff --git a/docs-site/src/pages/pattern-lab/_patterns/40-components/floating-action-buttons/05-floating-action-buttons.md b/docs-site/src/pages/pattern-lab/_patterns/40-components/floating-action-buttons/05-floating-action-buttons.md new file mode 100644 index 0000000000..bfe13e3927 --- /dev/null +++ b/docs-site/src/pages/pattern-lab/_patterns/40-components/floating-action-buttons/05-floating-action-buttons.md @@ -0,0 +1,3 @@ +--- +title: "Basic FAB" +--- \ No newline at end of file diff --git a/docs-site/src/pages/pattern-lab/_patterns/40-components/floating-action-buttons/05-floating-action-buttons.twig b/docs-site/src/pages/pattern-lab/_patterns/40-components/floating-action-buttons/05-floating-action-buttons.twig new file mode 100644 index 0000000000..1706215ea9 --- /dev/null +++ b/docs-site/src/pages/pattern-lab/_patterns/40-components/floating-action-buttons/05-floating-action-buttons.twig @@ -0,0 +1,79 @@ +{% set description %} + Floating action buttons (FAB) are a list of fixed positioned buttons placed on the right side of the screen. +{% endset %} + +{% set notes %} + + One or many action buttons can be used. + The most common use case is a “back to top” button. + When using a Button element as FAB, it is recommended to use an icon-only button with tooltip. Set placement of tooltip to left to avoid clashing with other buttons. + +{% endset %} + +{% set demo %} + {% set icon_external_link %} + {% include '@bolt-elements-icon/icon.twig' with { + name: 'external-link', + } only %} + {% endset %} + {% include '@bolt-elements-text-link/text-link.twig' with { + content: 'View full page demo', + icon_after: icon_external_link, + attributes: { + href: link['components-floating-action-buttons-demo'], + target: '_blank', + rel: 'noopener' + } + } only %} +{% endset %} + +{% set twig_markup %}{% verbatim %} +{# Assemble the button(s) as list item(s) #} +{% set scroll_to_top_button %} + {% set trigger %} + {% set icon_chevron_up %} + {% include '@bolt-components-icon/icon.twig' with { + name: 'chevron-up', + } only %} + {% endset %} + {% include '@bolt-elements-button/button.twig' with { + content: 'Back to top', + border_radius: 'full', + icon_only: icon_chevron_up, + attributes: { + href: '#top', + }, + } only %} + {% endset %} + {% include '@bolt-components-tooltip/tooltip.twig' with { + content: 'Back to top', + placement: 'left', + trigger: trigger, + } only %} +{% endset %} +{% set fab_list_items %} + {% include '@bolt-components-floating-action-buttons/floating-action-buttons-li.twig' with { + content: scroll_to_top_button, + } only %} +{% endset %} + +{# Pass the list items into the list template #} +{% set fab_list %} + {% include '@bolt-components-floating-action-buttons/floating-action-buttons-ul.twig' with { + content: fab_list_items, + } only %} +{% endset %} + +{# Pass the list into the main template #} +{% include '@bolt-components-floating-action-buttons/floating-action-buttons.twig' with { + content: fab_list, +} only %} +{% endverbatim %}{% endset %} + +{% include '@utils/pattern-doc-page.twig' with { + title: 'Basic floating action buttons', + description: description, + notes: notes, + demo: demo, + twig_markup: twig_markup, +} only %} diff --git a/docs-site/src/pages/pattern-lab/_patterns/40-components/floating-action-buttons/05a-floating-action-buttons-demo.md b/docs-site/src/pages/pattern-lab/_patterns/40-components/floating-action-buttons/05a-floating-action-buttons-demo.md new file mode 100644 index 0000000000..8b8328aa74 --- /dev/null +++ b/docs-site/src/pages/pattern-lab/_patterns/40-components/floating-action-buttons/05a-floating-action-buttons-demo.md @@ -0,0 +1,3 @@ +--- +title: "Demo: Basic FAB" +--- \ No newline at end of file diff --git a/docs-site/src/pages/pattern-lab/_patterns/40-components/floating-action-buttons/10-floating-action-buttons-show-on-scroll-selector.md b/docs-site/src/pages/pattern-lab/_patterns/40-components/floating-action-buttons/10-floating-action-buttons-show-on-scroll-selector.md new file mode 100644 index 0000000000..c7e768d24f --- /dev/null +++ b/docs-site/src/pages/pattern-lab/_patterns/40-components/floating-action-buttons/10-floating-action-buttons-show-on-scroll-selector.md @@ -0,0 +1,3 @@ +--- +title: 'Show On Scroll Selector' +--- diff --git a/docs-site/src/pages/pattern-lab/_patterns/40-components/floating-action-buttons/10-floating-action-buttons-show-on-scroll-selector.twig b/docs-site/src/pages/pattern-lab/_patterns/40-components/floating-action-buttons/10-floating-action-buttons-show-on-scroll-selector.twig new file mode 100644 index 0000000000..9cb15b1e65 --- /dev/null +++ b/docs-site/src/pages/pattern-lab/_patterns/40-components/floating-action-buttons/10-floating-action-buttons-show-on-scroll-selector.twig @@ -0,0 +1,43 @@ +{% set description %} + Each individual floating action button can be shown based on what element on the page has been scrolled past. +{% endset %} + +{% set notes %} + + The show_on_scroll_selector prop accepts CSS selector names (eg. #main-title, .book-name, etc.). + The selector indicates the element that must be scrolled past to reveal a floating action button. + To avoid animation jump, please only use this on the first item in a FAB (top of the list). + +{% endset %} + +{% set demo %} + {% set icon_external_link %} + {% include '@bolt-elements-icon/icon.twig' with { + name: 'external-link', + } only %} + {% endset %} + {% include '@bolt-elements-text-link/text-link.twig' with { + content: 'View full page demo', + icon_after: icon_external_link, + attributes: { + href: link['components-floating-action-buttons-demo-show-on-scroll-selector'], + target: '_blank', + rel: 'noopener' + } + } only %} +{% endset %} + +{% set twig_markup %}{% verbatim %} +{% include '@bolt-components-floating-action-buttons/floating-action-buttons-li.twig' with { + content: content, + show_on_scroll_selector: '#main-title' +} only %} +{% endverbatim %}{% endset %} + +{% include '@utils/pattern-doc-page.twig' with { + title: 'Show FAB on scroll', + description: description, + notes: notes, + demo: demo, + twig_markup: twig_markup, +} only %} diff --git a/docs-site/src/pages/pattern-lab/_patterns/40-components/floating-action-buttons/10a-floating-action-buttons-demo-show-on-scroll-selector.md b/docs-site/src/pages/pattern-lab/_patterns/40-components/floating-action-buttons/10a-floating-action-buttons-demo-show-on-scroll-selector.md new file mode 100644 index 0000000000..8d600bb6f1 --- /dev/null +++ b/docs-site/src/pages/pattern-lab/_patterns/40-components/floating-action-buttons/10a-floating-action-buttons-demo-show-on-scroll-selector.md @@ -0,0 +1,3 @@ +--- +title: 'Demo: Show On Scroll Selector' +--- diff --git a/docs-site/src/pages/pattern-lab/_patterns/40-components/floating-action-buttons/15-floating-action-buttons-toggle-button.md b/docs-site/src/pages/pattern-lab/_patterns/40-components/floating-action-buttons/15-floating-action-buttons-toggle-button.md new file mode 100644 index 0000000000..918b90eed2 --- /dev/null +++ b/docs-site/src/pages/pattern-lab/_patterns/40-components/floating-action-buttons/15-floating-action-buttons-toggle-button.md @@ -0,0 +1,3 @@ +--- +title: "Toggle Button" +--- \ No newline at end of file diff --git a/docs-site/src/pages/pattern-lab/_patterns/40-components/floating-action-buttons/15-floating-action-buttons-toggle-button.twig b/docs-site/src/pages/pattern-lab/_patterns/40-components/floating-action-buttons/15-floating-action-buttons-toggle-button.twig new file mode 100644 index 0000000000..890c0fdb33 --- /dev/null +++ b/docs-site/src/pages/pattern-lab/_patterns/40-components/floating-action-buttons/15-floating-action-buttons-toggle-button.twig @@ -0,0 +1,116 @@ +{% set description %} + A toggle button can toggle on/off a secondary list of action buttons. This specific button comes with the FAB component. +{% endset %} + +{% set notes %} + + The floating-action-buttons-toggle-button.twig template renders the toggle button. + The toogle button is recommended if there is a total of more than 3 action buttons. + Reference the schema for all options. + +{% endset %} + +{% set demo %} + {% set icon_external_link %} + {% include '@bolt-elements-icon/icon.twig' with { + name: 'external-link', + } only %} + {% endset %} + {% include '@bolt-elements-text-link/text-link.twig' with { + content: 'View full page demo', + icon_after: icon_external_link, + attributes: { + href: link['components-floating-action-buttons-demo-toggle-button'], + target: '_blank', + rel: 'noopener' + } + } only %} +{% endset %} + +{% set twig_markup %}{% verbatim %} +{# Set up the toggle button #} +{% set more_button %} + {% include '@bolt-components-floating-action-buttons/floating-action-buttons-toggle-button.twig' with { + content: 'More actions', + border_radius: 'full', + attributes: { + type: 'button', + } + } only %} +{% endset %} + +{# Set up the children list the button is going to toggle #} +{% set more_actions_list_items %} + {% set placeholder_button %} + {% set icon_link %} + {% include '@bolt-elements-icon/icon.twig' with { + name: 'external-link', + } only %} + {% endset %} + {% include '@bolt-components-tooltip/tooltip.twig' with { + content: 'Go to Google', + placement: 'left', + trigger: include('@bolt-elements-button/button.twig', { + content: 'Go to Google', + size: 'small', + border_radius: 'full', + icon_only: icon_link, + hierarchy: 'secondary', + attributes: { + href: 'https://www.google.com', + rel: 'noopener', + target: '_blank' + }, + }), + } only %} + {% endset %} + {% include '@bolt-components-floating-action-buttons/floating-action-buttons-li.twig' with { + content: placeholder_button, + } only %} + {% include '@bolt-components-floating-action-buttons/floating-action-buttons-li.twig' with { + content: placeholder_button, + } only %} + {% include '@bolt-components-floating-action-buttons/floating-action-buttons-li.twig' with { + content: placeholder_button, + } only %} + {% include '@bolt-components-floating-action-buttons/floating-action-buttons-li.twig' with { + content: placeholder_button, + } only %} + {% include '@bolt-components-floating-action-buttons/floating-action-buttons-li.twig' with { + content: placeholder_button, + } only %} +{% endset %} +{% set more_actions_list %} + {% include '@bolt-components-floating-action-buttons/floating-action-buttons-ul.twig' with { + content: more_actions_list_items, + } only %} +{% endset %} + +{# Assemble the toggle button and the children list #} +{% set fab_list_items %} + {% include '@bolt-components-floating-action-buttons/floating-action-buttons-li.twig' with { + content: more_button, + children: more_actions_list + } only %} +{% endset %} + +{# Pass the list items into the list template #} +{% set fab_list %} + {% include '@bolt-components-floating-action-buttons/floating-action-buttons-ul.twig' with { + content: fab_list_items, + } only %} +{% endset %} + +{# Pass the list into the main template #} +{% include '@bolt-components-floating-action-buttons/floating-action-buttons.twig' with { + content: fab_list, +} only %} +{% endverbatim %}{% endset %} + +{% include '@utils/pattern-doc-page.twig' with { + title: 'Toggle on/off more buttons', + description: description, + notes: notes, + demo: demo, + twig_markup: twig_markup, +} only %} diff --git a/docs-site/src/pages/pattern-lab/_patterns/40-components/floating-action-buttons/15a-floating-action-buttons-demo-toggle-button.md b/docs-site/src/pages/pattern-lab/_patterns/40-components/floating-action-buttons/15a-floating-action-buttons-demo-toggle-button.md new file mode 100644 index 0000000000..70a734f489 --- /dev/null +++ b/docs-site/src/pages/pattern-lab/_patterns/40-components/floating-action-buttons/15a-floating-action-buttons-demo-toggle-button.md @@ -0,0 +1,3 @@ +--- +title: "Demo: Toggle Button" +--- \ No newline at end of file diff --git a/docs-site/src/pages/pattern-lab/_patterns/40-components/floating-action-buttons/999-floating-action-buttons-use-case-offsets.md b/docs-site/src/pages/pattern-lab/_patterns/40-components/floating-action-buttons/999-floating-action-buttons-use-case-offsets.md new file mode 100644 index 0000000000..5449f9cc45 --- /dev/null +++ b/docs-site/src/pages/pattern-lab/_patterns/40-components/floating-action-buttons/999-floating-action-buttons-use-case-offsets.md @@ -0,0 +1,3 @@ +--- +title: "X and Y Offsets" +--- \ No newline at end of file diff --git a/docs-site/src/pages/pattern-lab/_patterns/40-components/floating-action-buttons/999-floating-action-buttons-use-case-offsets.twig b/docs-site/src/pages/pattern-lab/_patterns/40-components/floating-action-buttons/999-floating-action-buttons-use-case-offsets.twig new file mode 100644 index 0000000000..6ea60c30bf --- /dev/null +++ b/docs-site/src/pages/pattern-lab/_patterns/40-components/floating-action-buttons/999-floating-action-buttons-use-case-offsets.twig @@ -0,0 +1,49 @@ +{% set description %} + There are 2 CSS custom properties available for use to further customize the placement of floating action buttons. +{% endset %} + +{% set notes %} + + + --c-bolt-floating-action-buttons-offset-x: the distance between the FAB and the right side of the screen. + + + --c-bolt-floating-action-buttons-offset-y: the distance between the FAB and the bottom of the screen. + + The value can use any CSS unit (px, rem, em, vw, vh, etc.). + +{% endset %} + +{% set demo %} + {% set icon_external_link %} + {% include '@bolt-elements-icon/icon.twig' with { + name: 'external-link', + } only %} + {% endset %} + {% include '@bolt-elements-text-link/text-link.twig' with { + content: 'View full page demo', + icon_after: icon_external_link, + attributes: { + href: link['components-floating-action-buttons-demo-use-case-offsets'], + target: '_blank', + rel: 'noopener' + } + } only %} +{% endset %} + +{% set twig_markup %}{% verbatim %} +{% include '@bolt-components-floating-action-buttons/floating-action-buttons.twig' with { + content: _content, + attributes: { + style: '--c-bolt-floating-action-buttons-offset-x: 5vw; --c-bolt-floating-action-buttons-offset-y: 5vh;' + } +} only %} +{% endverbatim %}{% endset %} + +{% include '@utils/pattern-doc-page.twig' with { + title: 'Customize FAB placement with X and Y offsets', + description: description, + notes: notes, + demo: demo, + twig_markup: twig_markup, +} only %} diff --git a/docs-site/src/pages/pattern-lab/_patterns/40-components/floating-action-buttons/999a-floating-action-buttons-demo-use-case-offsets.md b/docs-site/src/pages/pattern-lab/_patterns/40-components/floating-action-buttons/999a-floating-action-buttons-demo-use-case-offsets.md new file mode 100644 index 0000000000..4d9d0fb198 --- /dev/null +++ b/docs-site/src/pages/pattern-lab/_patterns/40-components/floating-action-buttons/999a-floating-action-buttons-demo-use-case-offsets.md @@ -0,0 +1,3 @@ +--- +title: "Demo: X and Y Offsets" +--- \ No newline at end of file diff --git a/docs-site/src/templates/_site-head.twig b/docs-site/src/templates/_site-head.twig index 88e294e4d5..daa8df79b7 100644 --- a/docs-site/src/templates/_site-head.twig +++ b/docs-site/src/templates/_site-head.twig @@ -104,4 +104,4 @@ patternLabFoot is not defined ? 'c-bds-layout' : '', patternLabFoot is not defined ? ('c-bds-layout--' ~ urlChunks | length >= 2 ? urlChunks|first : 'c-bds-layout--parent') : '', ] %} - + diff --git a/packages/base-starter-kit/.boltrc.js b/packages/base-starter-kit/.boltrc.js index e7629840ea..890c5b59a1 100644 --- a/packages/base-starter-kit/.boltrc.js +++ b/packages/base-starter-kit/.boltrc.js @@ -23,18 +23,19 @@ module.exports = { '@bolt/components-banner', '@bolt/components-blockquote', '@bolt/components-breadcrumb', - '@bolt/components-button-group', '@bolt/components-button', + '@bolt/components-button-group', '@bolt/components-card-replacement', '@bolt/components-carousel', - '@bolt/components-chip-list', '@bolt/components-chip', + '@bolt/components-chip-list', '@bolt/components-code-snippet', '@bolt/components-content-pagination', '@bolt/components-copy-to-clipboard', '@bolt/components-device-viewer', '@bolt/components-editor', '@bolt/components-figure', + '@bolt/components-floating-action-buttons', '@bolt/components-form', '@bolt/components-grid', '@bolt/components-headline', @@ -52,13 +53,14 @@ module.exports = { '@bolt/components-navbar', '@bolt/components-notifications', '@bolt/components-ol', - '@bolt/components-pagination', - '@bolt/components-page-header', '@bolt/components-page-footer', + '@bolt/components-page-header', + '@bolt/components-pagination', '@bolt/components-placeholder', '@bolt/components-popover', '@bolt/components-profile', '@bolt/components-progress-bar', + '@bolt/components-ratio', '@bolt/components-share', '@bolt/components-side-nav', '@bolt/components-site', @@ -66,7 +68,6 @@ module.exports = { '@bolt/components-stack', '@bolt/components-sticky', '@bolt/components-switch-button', - '@bolt/components-ratio', '@bolt/components-table', '@bolt/components-tabs', '@bolt/components-teaser', diff --git a/packages/base-starter-kit/package.json b/packages/base-starter-kit/package.json index 11efc58ef3..baea0b426e 100644 --- a/packages/base-starter-kit/package.json +++ b/packages/base-starter-kit/package.json @@ -32,6 +32,7 @@ "@bolt/components-device-viewer": "^5.0.0", "@bolt/components-editor": "^5.0.0", "@bolt/components-figure": "^5.0.0", + "@bolt/components-floating-action-buttons": "^5.3.0", "@bolt/components-form": "^5.3.0", "@bolt/components-grid": "^5.3.0", "@bolt/components-headline": "^5.3.0", diff --git a/packages/components/bolt-floating-action-buttons/README.md b/packages/components/bolt-floating-action-buttons/README.md new file mode 100644 index 0000000000..d37912af5c --- /dev/null +++ b/packages/components/bolt-floating-action-buttons/README.md @@ -0,0 +1,7 @@ +A sticky list container for action buttons. + +###### Install via NPM + +``` +npm install @bolt/components-floating-action-buttons +``` diff --git a/packages/components/bolt-floating-action-buttons/__tests__/__snapshots__/floating-action-buttons.js.snap b/packages/components/bolt-floating-action-buttons/__tests__/__snapshots__/floating-action-buttons.js.snap new file mode 100644 index 0000000000..5e0e4d3f96 --- /dev/null +++ b/packages/components/bolt-floating-action-buttons/__tests__/__snapshots__/floating-action-buttons.js.snap @@ -0,0 +1,99 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Bolt Floating Action Buttons default 1`] = ` +
+ +
+`; diff --git a/packages/components/bolt-floating-action-buttons/__tests__/floating-action-buttons.js b/packages/components/bolt-floating-action-buttons/__tests__/floating-action-buttons.js new file mode 100644 index 0000000000..a6be276cee --- /dev/null +++ b/packages/components/bolt-floating-action-buttons/__tests__/floating-action-buttons.js @@ -0,0 +1,113 @@ +import { render, stopServer } from '../../../testing/testing-helpers'; +let page, fixtures; + +afterAll(async () => { + await stopServer(); + await page.close(); +}, 100); + +beforeEach(async () => { + await page.evaluate(() => { + document.body.innerHTML = ''; + }); +}); + +beforeAll(async () => { + page = await global.__BROWSER__.newPage(); + await page.goto('http://127.0.0.1:4444/', { + timeout: 0, + }); + + const exampleIcon = await render('@bolt-elements-icon/icon.twig', { + name: 'rocket', + }); + + const primaryButton = await render('@bolt-elements-button/button.twig', { + content: 'This is a button', + icon_only: exampleIcon.html, + attributes: { + type: 'button', + }, + }); + + const secondaryButton = await render('@bolt-elements-button/button.twig', { + content: 'This is a button', + heirarch: ' secondary', + icon_only: exampleIcon.html, + attributes: { + type: 'button', + }, + }); + + const secondaryListItem = await render( + '@bolt-components-floating-action-buttons/floating-action-buttons-li.twig', + { + content: secondaryButton.html, + }, + ); + + let secondaryContent = ''; + for (let i = 0; i < 3; i++) { + secondaryContent = secondaryContent.concat(secondaryListItem.html); + } + + const secondaryList = await render( + '@bolt-components-floating-action-buttons/floating-action-buttons-ul.twig', + { + content: secondaryContent.html, + }, + ); + + const primaryListItem = await render( + '@bolt-components-floating-action-buttons/floating-action-buttons-li.twig', + { + content: primaryButton.html, + }, + ); + + const toggleButton = await render( + '@bolt-components-floating-action-buttons/floating-action-buttons-toggle-button.twig', + { + content: 'Toggle Menu', + attributes: { + type: 'button', + }, + }, + ); + + const toggleButtonListItem = await render( + '@bolt-components-floating-action-buttons/floating-action-buttons-li.twig', + { + content: toggleButton.html, + children: secondaryList.html, + }, + ); + + let primaryContent = primaryListItem.html; + primaryContent = primaryContent.concat(primaryListItem.html); + primaryContent = primaryContent.concat(toggleButtonListItem.html); + + const primaryList = await render( + '@bolt-components-floating-action-buttons/floating-action-buttons-ul.twig', + { + content: primaryContent, + }, + ); + + fixtures = { + primaryList, + }; +}); + +describe('Bolt Floating Action Buttons', () => { + test('default', async () => { + const results = await render( + '@bolt-components-floating-action-buttons/floating-action-buttons.twig', + { + content: fixtures.primaryList.html, + }, + ); + expect(results.ok).toBe(true); + expect(results.html).toMatchSnapshot(); + }); +}); diff --git a/packages/components/bolt-floating-action-buttons/floating-action-buttons-li.schema.js b/packages/components/bolt-floating-action-buttons/floating-action-buttons-li.schema.js new file mode 100644 index 0000000000..d688778608 --- /dev/null +++ b/packages/components/bolt-floating-action-buttons/floating-action-buttons-li.schema.js @@ -0,0 +1,27 @@ +module.exports = { + $schema: 'http://json-schema.org/draft-04/schema#', + title: 'Floating Action Buttons LI', + type: 'object', + properties: { + attributes: { + type: 'object', + description: + 'A Drupal attributes object. Applies extra HTML attributes to the parent element.', + }, + content: { + type: 'any', + description: + 'Renders a button (icon-only button with tooltip is recommended). Use the Button element or the floating-action-buttons-toggle-button.twig template.', + }, + children: { + type: 'any', + description: + 'Renders a list of secondary buttons. Use the floating-action-buttons-ul.twig template to render a list. Only use this prop if the floating-action-buttons-toggle-button.twig template is used for the content prop.', + }, + show_on_scroll_selector: { + type: 'string', + description: + 'Select an element (usually a page title) which when scrolled offscreen will show/hide the list-item. Must be a valid CSS selector.', + }, + }, +}; diff --git a/packages/components/bolt-floating-action-buttons/floating-action-buttons-toggle-button.schema.js b/packages/components/bolt-floating-action-buttons/floating-action-buttons-toggle-button.schema.js new file mode 100644 index 0000000000..6762a2257e --- /dev/null +++ b/packages/components/bolt-floating-action-buttons/floating-action-buttons-toggle-button.schema.js @@ -0,0 +1,19 @@ +const buttonSchema = require('@bolt/elements-button/button.schema'); + +module.exports = { + $schema: 'http://json-schema.org/draft-04/schema#', + title: 'Floating Action Buttons Toggle Button', + type: 'object', + required: ['content'], + properties: { + attributes: { + type: 'object', + description: + 'A Drupal attributes object. Applies extra HTML attributes to the parent element.', + }, + content: buttonSchema.properties.content, + hierarchy: buttonSchema.properties.hierarchy, + size: buttonSchema.properties.size, + border_radius: buttonSchema.properties.border_radius, + }, +}; diff --git a/packages/components/bolt-floating-action-buttons/floating-action-buttons-ul.schema.js b/packages/components/bolt-floating-action-buttons/floating-action-buttons-ul.schema.js new file mode 100644 index 0000000000..2e31746450 --- /dev/null +++ b/packages/components/bolt-floating-action-buttons/floating-action-buttons-ul.schema.js @@ -0,0 +1,17 @@ +module.exports = { + $schema: 'http://json-schema.org/draft-04/schema#', + title: 'Floating Action Buttons UL', + type: 'object', + properties: { + attributes: { + type: 'object', + description: + 'A Drupal attributes object. Applies extra HTML attributes to the parent element.', + }, + content: { + type: 'any', + description: + 'Renders a list of buttons. Use the floating-action-buttons-li.twig template to render each list item.', + }, + }, +}; diff --git a/packages/components/bolt-floating-action-buttons/floating-action-buttons.schema.js b/packages/components/bolt-floating-action-buttons/floating-action-buttons.schema.js new file mode 100644 index 0000000000..84e01f6d84 --- /dev/null +++ b/packages/components/bolt-floating-action-buttons/floating-action-buttons.schema.js @@ -0,0 +1,17 @@ +module.exports = { + $schema: 'http://json-schema.org/draft-04/schema#', + title: 'Floating Action Buttons', + type: 'object', + properties: { + attributes: { + type: 'object', + description: + 'A Drupal attributes object. Applies extra HTML attributes to the parent element.', + }, + content: { + type: 'any', + description: + 'Renders a list of buttons. Use the floating-action-buttons-ul.twig template to render a list.', + }, + }, +}; diff --git a/packages/components/bolt-floating-action-buttons/index.js b/packages/components/bolt-floating-action-buttons/index.js new file mode 100644 index 0000000000..3ba1d970da --- /dev/null +++ b/packages/components/bolt-floating-action-buttons/index.js @@ -0,0 +1,13 @@ +const floatingActionButtons = document.querySelectorAll( + '.c-bolt-floating-action-buttons', +); + +if (floatingActionButtons.length) { + import( + /* webpackChunkName: 'bolt-floating-action-buttons' */ './src/floating-action-buttons' + ).then(({ BoltFloatingActionButtons }) => { + floatingActionButtons.forEach(el => { + const floatingActionButtonsComponent = new BoltFloatingActionButtons(el); + }); + }); +} diff --git a/packages/components/bolt-floating-action-buttons/index.scss b/packages/components/bolt-floating-action-buttons/index.scss new file mode 100644 index 0000000000..41f57833e3 --- /dev/null +++ b/packages/components/bolt-floating-action-buttons/index.scss @@ -0,0 +1 @@ +@import 'src/floating-action-buttons.scss'; diff --git a/packages/components/bolt-floating-action-buttons/package.json b/packages/components/bolt-floating-action-buttons/package.json new file mode 100644 index 0000000000..caaab52b21 --- /dev/null +++ b/packages/components/bolt-floating-action-buttons/package.json @@ -0,0 +1,33 @@ +{ + "name": "@bolt/components-floating-action-buttons", + "version": "5.3.0", + "description": "A sticky list container for action buttons.", + "keywords": [ + "bolt design system" + ], + "homepage": "https://boltdesignsystem.com", + "bugs": { + "url": "https://github.com/bolt-design-system/bolt/issues" + }, + "repository": { + "type": "git", + "url": "https://github.com/bolt-design-system/bolt/tree/master/packages/components/bolt-floating-action-buttons" + }, + "license": "MIT", + "author": "CJ White ", + "main": "index.js", + "style": "index.scss", + "dependencies": { + "@bolt/core-v3.x": "^5.0.0" + }, + "publishConfig": { + "access": "public" + }, + "schema": [ + "floating-action-buttons.schema.js", + "floating-action-buttons-ul.schema.js", + "floating-action-buttons-li.schema.js", + "floating-action-buttons-toggle-button.schema.js" + ], + "twig": "src/floating-action-buttons.twig" +} diff --git a/packages/components/bolt-floating-action-buttons/src/floating-action-buttons-li.twig b/packages/components/bolt-floating-action-buttons/src/floating-action-buttons-li.twig new file mode 100644 index 0000000000..8d7b2b6c1a --- /dev/null +++ b/packages/components/bolt-floating-action-buttons/src/floating-action-buttons-li.twig @@ -0,0 +1,26 @@ +{% set schema = bolt.data.components['@bolt-components-floating-action-buttons'].schema['floating-action-buttons-li'] %} +{% if enable_json_schema_validation %} + {{ validate_data_schema(schema, _self)|raw }} +{% endif %} + +{# Variables #} +{% set this = init(schema) %} +{% set attributes = create_attribute(attributes|default({})) %} + +{# Array of classes based on the defined + default props #} +{% set classes = [ + 'c-bolt-floating-action-buttons__list-item', + 'js-bolt-floating-action-buttons-list-item', + children ? 'c-bolt-floating-action-buttons__list-item--has-children', + show_on_scroll_selector ? 'c-bolt-floating-action-buttons__list-item--hidden', +] %} + +
  • + {{ content }} + + {% if children %} + {{ children }} + {% endif %} +
    • diff --git a/packages/components/bolt-floating-action-buttons/src/floating-action-buttons-toggle-button.twig b/packages/components/bolt-floating-action-buttons/src/floating-action-buttons-toggle-button.twig new file mode 100644 index 0000000000..db9a1ff339 --- /dev/null +++ b/packages/components/bolt-floating-action-buttons/src/floating-action-buttons-toggle-button.twig @@ -0,0 +1,37 @@ +{# Schema Validation #} +{% set schema = bolt.data.components['@bolt-components-floating-action-buttons'].schema['floating-action-buttons-toggle-button'] %} +{% if enable_json_schema_validation %} + {{ validate_data_schema(schema, _self)|raw }} +{% endif %} + +{# Variables #} +{% set this = init(schema) %} +{% set attributes = create_attribute(attributes|default({})) %} + +{% set _content %} + + {% include '@bolt-elements-icon/icon.twig' with { + name: 'more' + } only %} + + + {% include '@bolt-elements-icon/icon.twig' with { + name: 'close' + } only %} + +{% endset %} + +{% set attributes = attributes.setAttribute("aria-expanded", "false") %} +{% set attributes = attributes.setAttribute("class", "e-bolt-button--icon-only js-bolt-floating-action-buttons-toggle") %} + +{% include '@bolt-components-tooltip/tooltip.twig' with { + content: content, + placement: 'left', + trigger: include('@bolt-elements-button/button.twig', { + content: _content, + hierarchy: this.data.hierarchy.value, + border_radius: this.data.border_radius.value, + size: this.data.size.value, + attributes: attributes + }), +} only %} diff --git a/packages/components/bolt-floating-action-buttons/src/floating-action-buttons-ul.twig b/packages/components/bolt-floating-action-buttons/src/floating-action-buttons-ul.twig new file mode 100644 index 0000000000..0a8231be2c --- /dev/null +++ b/packages/components/bolt-floating-action-buttons/src/floating-action-buttons-ul.twig @@ -0,0 +1,13 @@ +{% set schema = bolt.data.components['@bolt-components-floating-action-buttons'].schema['floating-action-buttons-ul'] %} +{% if enable_json_schema_validation %} + {{ validate_data_schema(schema, _self)|raw }} +{% endif %} + +{# Variables #} +{% set this = init(schema) %} +{% set attributes = create_attribute(attributes|default({})) %} + +{# hidden class only styled for child list. this prevents a flash of unstyled content. #} + diff --git a/packages/components/bolt-floating-action-buttons/src/floating-action-buttons.js b/packages/components/bolt-floating-action-buttons/src/floating-action-buttons.js new file mode 100644 index 0000000000..6cb7ffc226 --- /dev/null +++ b/packages/components/bolt-floating-action-buttons/src/floating-action-buttons.js @@ -0,0 +1,126 @@ +export class BoltFloatingActionButtons { + constructor(el) { + if (!el) return; + this.el = el; + this.init(); + } + + init() { + this.primaryList = this.el.querySelector( + '.js-bolt-floating-action-buttons-list', + ); + this.secondaryList = this.primaryList.querySelector( + '.js-bolt-floating-action-buttons-list', + ); + this.toggleButton = this.primaryList.querySelector( + '.js-bolt-floating-action-buttons-toggle', + ); + this.hiddenListItems = this.el.querySelectorAll( + '[data-show-on-scroll-selector]', + ); + this.isOpen = false; + + if (this.secondaryList) { + this.secondaryListItems = this.secondaryList.querySelectorAll( + '.js-bolt-floating-action-buttons-list-item', + ); + + // hide secondary list items + Array.from(this.secondaryListItems).forEach(el => { + el.classList.add('c-bolt-floating-action-buttons__list-item--hidden'); + }); + } + + if (this.toggleButton) { + this.toggleButton.addEventListener('click', () => { + this.toggleSecondaryList(); + }); + } + + if (this.hiddenListItems) { + Array.from(this.hiddenListItems).forEach(el => { + this.addScrollHandler(el); + }); + } + + this.show(); + this.el.setAttribute('data-bolt-ready', ''); + } + + show() { + this.el.classList.remove('c-bolt-floating-action-buttons--hidden'); + } + + hide() { + this.el.classList.add('c-bolt-floating-action-buttons--hidden'); + } + + toggleSecondaryList() { + if (this.isOpen) { + // close this + this.isOpen = false; + this.toggleButton.setAttribute('aria-expanded', 'false'); + if (this.secondaryList) { + this.secondaryList.classList.add( + 'c-bolt-floating-action-buttons__list--hidden', + ); + Array.from(this.secondaryListItems).forEach(el => { + setTimeout(() => { + el.classList.add( + 'c-bolt-floating-action-buttons__list-item--hidden', + ); + }, 200); + }); + } + } else { + // open this + this.isOpen = true; + this.toggleButton.setAttribute('aria-expanded', 'true'); + if (this.secondaryList) { + this.secondaryList.classList.remove( + 'c-bolt-floating-action-buttons__list--hidden', + ); + Array.from(this.secondaryListItems).forEach((el, index) => { + setTimeout(() => { + el.classList.remove( + 'c-bolt-floating-action-buttons__list-item--hidden', + ); + }, index * 50); + }); + } + } + } + + addScrollHandler(el) { + const observerElement = document.querySelector( + el.dataset.showOnScrollSelector, + ); + + if (!observerElement) return; + + const callback = entries => { + entries.forEach(entry => { + const isIntersectingTop = + entry.intersectionRect.top >= entry.boundingClientRect.top; + const isLeaving = entry.intersectionRatio === 0; + + if (isIntersectingTop) { + if (isLeaving) { + // leaving + el.classList.remove( + 'c-bolt-floating-action-buttons__list-item--hidden', + ); + } else { + // entering + el.classList.add( + 'c-bolt-floating-action-buttons__list-item--hidden', + ); + } + } + }); + }; + + const observer = new IntersectionObserver(callback); + observer.observe(observerElement); + } +} diff --git a/packages/components/bolt-floating-action-buttons/src/floating-action-buttons.scss b/packages/components/bolt-floating-action-buttons/src/floating-action-buttons.scss new file mode 100644 index 0000000000..32580c4f8b --- /dev/null +++ b/packages/components/bolt-floating-action-buttons/src/floating-action-buttons.scss @@ -0,0 +1,135 @@ +/* ------------------------------------ *\ + Floating Action Buttons +\* ------------------------------------ */ + +@import '@bolt/core-v3.x'; + +$_bolt-fab-list-gap: var(--bolt-spacing-y-xsmall); + +.c-bolt-floating-action-buttons { + --c-bolt-floating-action-buttons-offset-x: var(--bolt-spacing-x-small); + --c-bolt-floating-action-buttons-offset-y: var(--bolt-spacing-y-small); + + visibility: visible; + position: fixed; + right: var(--c-bolt-floating-action-buttons-offset-x); + bottom: var(--c-bolt-floating-action-buttons-offset-y); + z-index: bolt-z-index('fab'); + transition: opacity var(--bolt-transition), visibility var(--bolt-transition); + transition-delay: var( + --bolt-transition-timing + ); // Allow children elements to transition first, and then fade in the entire container. + + &.c-bolt-floating-action-buttons--hidden { + visibility: hidden; + opacity: 0; + } +} + +.c-bolt-floating-action-buttons__list { + display: flex; + flex-direction: column; + align-items: center; + gap: $_bolt-fab-list-gap; + margin: 0; + padding: 0; + list-style: none; +} + +.c-bolt-floating-action-buttons__list-item { + visibility: visible; + opacity: 1; + margin: 0; + padding: 0; + transition: opacity var(--bolt-transition), visibility var(--bolt-transition), + transform var(--bolt-transition); + + &.c-bolt-floating-action-buttons__list-item--hidden { + visibility: hidden; + opacity: 0; + } +} + +.c-bolt-floating-action-buttons__list-item--has-children { + display: flex; + flex-direction: column-reverse; + + // Animate "more icon" and "close icon" in toggle button + .e-bolt-button[aria-expanded] { + z-index: 1; // Raises the toggle button's stacking context higher than children list. + > * { + transition: opacity var(--bolt-transition), + transform var(--bolt-transition); + } + } + + .e-bolt-button[aria-expanded='true'] { + > *:nth-child(1) { + visibility: hidden; + opacity: 0; + transform: translate3d(-50%, -50%, 0) rotate(360deg); + } + + > *:nth-child(2) { + visibility: visible; + opacity: 1; + transform: translate3d(-50%, -50%, 0) rotate(0deg); + } + } + + .e-bolt-button[aria-expanded='false'] { + > *:nth-child(1) { + visibility: visible; + opacity: 1; + transform: translate3d(-50%, -50%, 0) rotate(0deg); + } + + > *:nth-child(2) { + visibility: hidden; + opacity: 0; + transform: translate3d(-50%, -50%, 0) rotate(360deg); + } + } + + // Animate children list + .c-bolt-floating-action-buttons__list { + opacity: 1; + max-height: 50vh; + transition: max-height calc(var(--bolt-transition-timing) * 2) + var(--bolt-transition-ease), + opacity calc(var(--bolt-transition-timing) * 2) + var(--bolt-transition-ease); + } + + .c-bolt-floating-action-buttons__list--hidden { + visibility: hidden; + opacity: 0; + max-height: 0; + margin: 0; + transition: max-height var(--bolt-transition); + } + + .c-bolt-floating-action-buttons__list-item { + transform: translate3d(0, 0, 0); + + &:first-of-type { + margin-top: $_bolt-fab-list-gap; + } + + &:last-of-type { + margin-bottom: calc(#{$_bolt-fab-list-gap} * 2); + } + } + + .c-bolt-floating-action-buttons__list-item--hidden { + transform: translate3d(0, 100%, 0); + } +} + +// Remove transitions when @media (prefers-reduced-motion) {} is true. +@media (prefers-reduced-motion) { + .c-bolt-floating-action-buttons, + .c-bolt-floating-action-buttons * { + transition: none !important; + } +} diff --git a/packages/components/bolt-floating-action-buttons/src/floating-action-buttons.twig b/packages/components/bolt-floating-action-buttons/src/floating-action-buttons.twig new file mode 100644 index 0000000000..bcb2e6c960 --- /dev/null +++ b/packages/components/bolt-floating-action-buttons/src/floating-action-buttons.twig @@ -0,0 +1,21 @@ +{% set schema = bolt.data.components['@bolt-components-floating-action-buttons'].schema['floating-action-buttons'] %} +{% if enable_json_schema_validation %} + {{ validate_data_schema(schema, _self)|raw }} +{% endif %} + +{# Variables #} +{% set this = init(schema) %} +{% set attributes = create_attribute(attributes|default({})) %} + +{# Array of classes based on the defined + default props #} +{% set classes = [ + 'c-bolt-floating-action-buttons', +] %} + +
    + {% spaceless %} + {{ content }} + {% endspaceless %} +
    diff --git a/packages/core-v3.x/styles/01-settings/settings-z-index/_settings-z-index.scss b/packages/core-v3.x/styles/01-settings/settings-z-index/_settings-z-index.scss index a02dd96c6a..f7c0a668d4 100644 --- a/packages/core-v3.x/styles/01-settings/settings-z-index/_settings-z-index.scss +++ b/packages/core-v3.x/styles/01-settings/settings-z-index/_settings-z-index.scss @@ -13,12 +13,12 @@ /// @see bolt-z-index $bolt-z-indexes: ( sets: ( - fab: 300, modal: 200, modalBG: 180, navFixed: 160, tooltip: 140, popover: 120, + fab: 110, nav: 100, contentTop: 80, content: 60, diff --git a/packages/elements/bolt-button/src/button.scss b/packages/elements/bolt-button/src/button.scss index 73853a603b..b8521d91f9 100644 --- a/packages/elements/bolt-button/src/button.scss +++ b/packages/elements/bolt-button/src/button.scss @@ -195,7 +195,7 @@ $_bolt-button-hierarchy: primary, secondary, tertiary, transparent; --e-bolt-button-padding-x: var(--bolt-spacing-x-#{$size-name}); } - @if $size-name == xsmall { + @if $size-name == xsmall or $size-name == small { --e-bolt-button-font-size: var(--bolt-type-font-size-xsmall); --e-bolt-button-line-height: var(--bolt-type-line-height-xsmall); --e-bolt-button-icon-only-size: 1.1em;