Docs(web-twig): Introduction Tooltip stories

lmc-eu · Apr 11, 2023 · 64037cb · 64037cb
1 parent f8daf72
commit 64037cb
Show file tree

Hide file tree

Showing 6 changed files with 115 additions and 1 deletion.
diff --git a/packages/web-twig/src/Resources/components/Tooltip/Tooltip.stories.twig b/packages/web-twig/src/Resources/components/Tooltip/Tooltip.stories.twig
@@ -0,0 +1,17 @@
+{% extends 'layout/default.html.twig' %}
+
+{% block content %}
+
+    {# Tooltip Default #}
+    {% include '@components/Tooltip/stories/Tooltip.twig' %}
+
+    {# Tooltip Placements #}
+    {% include '@components/Tooltip/stories/TooltipPlacements.twig' %}
+
+    {# Tooltip Clickable #}
+    {% include '@components/Tooltip/stories/TooltipClickable.twig' %}
+
+    {# Tooltip Dismissible #}
+    {% include '@components/Tooltip/stories/TooltipDismissible.twig' %}
+
+{% endblock %}
diff --git a/packages/web-twig/src/Resources/components/Tooltip/TooltipWrapper.twig b/packages/web-twig/src/Resources/components/Tooltip/TooltipWrapper.twig
@@ -5,8 +5,15 @@
 {# Class names #}
 {%- set _rootClassName = _spiritClassPrefix ~ 'TooltipWrapper' -%}
 
+{# Miscellaneous #}
 {%- set _classNames = [ _rootClassName, _class ] -%}
+{%- set _allowedAttributes = [
+    'style'
+] -%}
 
-<div {{ mainProps(props) }} {{ classProp(_classNames) }}>
+<div
+    {{ mainProps(props, _allowedAttributes) }}
+    {{ classProp(_classNames) }}
+>
     {% block content %}{% endblock %}
 </div>
diff --git a/packages/web-twig/src/Resources/components/Tooltip/stories/Tooltip.twig b/packages/web-twig/src/Resources/components/Tooltip/stories/Tooltip.twig
@@ -0,0 +1,16 @@
+<section class="docs-Section">
+
+    <h2 class="docs-Heading">Static Tooltip (No Interaction)</h2>
+
+    <TooltipWrapper style="max-width: 15rem; margin: 6rem auto;">
+        <div class="docs-Box px-600 py-500">
+            Tooltips<br />
+            all day long…
+        </div>
+        <Tooltip placement="top">Hello there!</Tooltip>
+        <Tooltip placement="right">Hello there!</Tooltip>
+        <Tooltip placement="bottom">Hello there! There is slightly more text in this tooltip.</Tooltip>
+        <Tooltip placement="left">Hello there!</Tooltip>
+    </TooltipWrapper>
+
+</section>
diff --git a/packages/web-twig/src/Resources/components/Tooltip/stories/TooltipClickable.twig b/packages/web-twig/src/Resources/components/Tooltip/stories/TooltipClickable.twig
@@ -0,0 +1,24 @@
+<section class="docs-Section">
+
+    <h2 class="docs-Heading">Tooltip on Click (JavaScript)</h2>
+
+    <div class="mb-800">
+        <Button
+            id="tooltip-trigger"
+            class="mb-800"
+            data-target="#my-js-controlled-tooltip"
+            data-toggle="tooltip"
+        >
+            Toggle tooltip
+        </Button>
+    </div>
+    <TooltipWrapper class="d-inline-block">
+        <div class="docs-Box px-600 py-500" aria-describedby="my-js-controlled-tooltip">
+            I have an externally-triggered tooltip
+        </div>
+        <Tooltip id="my-js-controlled-tooltip" class="is-hidden">
+            Hello there!
+        </Tooltip>
+    </TooltipWrapper>
+
+</section>
diff --git a/packages/web-twig/src/Resources/components/Tooltip/stories/TooltipDismissible.twig b/packages/web-twig/src/Resources/components/Tooltip/stories/TooltipDismissible.twig
@@ -0,0 +1,12 @@
+<section class="docs-Section">
+
+    <h2 class="docs-Heading">Dismissible Tooltip</h2>
+
+    <TooltipWrapper class="d-inline-block">
+        <Button aria-describedby="my-dismissible-tooltip">I have a tooltip 😎</Button>
+        <Tooltip id="my-dismissible-tooltip" placement="right" isDismissible>
+            Close me
+        </Tooltip>
+    </TooltipWrapper>
+
+</section>
diff --git a/packages/web-twig/src/Resources/components/Tooltip/stories/TooltipPlacements.twig b/packages/web-twig/src/Resources/components/Tooltip/stories/TooltipPlacements.twig
@@ -0,0 +1,38 @@
+<section class="docs-Section">
+
+    <h2 class="docs-Heading">Tooltip on Hover (Pure CSS)</h2>
+
+    <TooltipWrapper class="d-inline-block">
+        <ButtonLink href="#" aria-describedby="my-tooltip-hover-top" class="TooltipTarget">
+            Tooltip on top
+        </ButtonLink>
+        <Tooltip id="my-tooltip-hover-top" placement="top">
+            Hello there!
+        </Tooltip>
+    </TooltipWrapper>
+    <TooltipWrapper class="d-inline-block">
+        <ButtonLink href="#" aria-describedby="my-tooltip-hover-right" class="TooltipTarget">
+            Tooltip on right
+        </ButtonLink>
+        <Tooltip id="my-tooltip-hover-right" placement="right">
+            Hello there!
+        </Tooltip>
+    </TooltipWrapper>
+    <TooltipWrapper class="d-inline-block">
+        <ButtonLink href="#" aria-describedby="my-tooltip-hover-bottom" class="TooltipTarget">
+            Tooltip on bottom
+        </ButtonLink>
+        <Tooltip id="my-tooltip-hover-bottom" placement="bottom">
+            Hello there!
+        </Tooltip>
+    </TooltipWrapper>
+    <TooltipWrapper class="d-inline-block">
+        <ButtonLink href="#" aria-describedby="my-tooltip-hover-left" class="TooltipTarget">
+            Tooltip on left
+        </ButtonLink>
+        <Tooltip id="my-tooltip-hover-left" placement="left">
+            Hello there!
+        </Tooltip>
+    </TooltipWrapper>
+
+</section>