From 12c5661535cfdc769f4853d431a3d9a697570e5f Mon Sep 17 00:00:00 2001 From: Pavel Klibani Date: Mon, 18 Sep 2023 14:27:28 +0200 Subject: [PATCH 1/3] Docs(web-react): Add Tooltip demo #DS-914 - Tooltip demo in web-react is now same as demo in web and web-twig --- .../src/components/Tooltip/demo/Tooltip.tsx | 16 ------- .../Tooltip/demo/TooltipClickable.tsx | 29 ++++++------ .../Tooltip/demo/TooltipDefault.tsx | 21 +++++++++ .../Tooltip/demo/TooltipDismissible.tsx | 20 ++++---- .../demo/TooltipDismissibleUncontrolled.tsx | 18 -------- .../Tooltip/demo/TooltipDismissibleViaJS.tsx | 30 ++++++++++++ .../Tooltip/demo/TooltipFloatingUi.tsx | 21 +++++---- .../Tooltip/demo/TooltipPlacements.tsx | 46 +++++++++++++++++++ .../Tooltip/demo/TooltipUncontrolled.tsx | 20 -------- .../src/components/Tooltip/demo/index.tsx | 38 +++++++-------- packages/web-react/src/types/tooltip.ts | 5 +- 11 files changed, 149 insertions(+), 115 deletions(-) delete mode 100644 packages/web-react/src/components/Tooltip/demo/Tooltip.tsx create mode 100644 packages/web-react/src/components/Tooltip/demo/TooltipDefault.tsx delete mode 100644 packages/web-react/src/components/Tooltip/demo/TooltipDismissibleUncontrolled.tsx create mode 100644 packages/web-react/src/components/Tooltip/demo/TooltipDismissibleViaJS.tsx create mode 100644 packages/web-react/src/components/Tooltip/demo/TooltipPlacements.tsx delete mode 100644 packages/web-react/src/components/Tooltip/demo/TooltipUncontrolled.tsx diff --git a/packages/web-react/src/components/Tooltip/demo/Tooltip.tsx b/packages/web-react/src/components/Tooltip/demo/Tooltip.tsx deleted file mode 100644 index 23bcc2586c..0000000000 --- a/packages/web-react/src/components/Tooltip/demo/Tooltip.tsx +++ /dev/null @@ -1,16 +0,0 @@ -// Because there is no `dist` directory during the CI run -/* eslint-disable import/no-extraneous-dependencies, import/extensions, import/no-unresolved */ -import React from 'react'; -import { ComponentStory } from '@storybook/react'; -import Tooltip from '../Tooltip'; -import TooltipWrapper from '../TooltipWrapper'; -import { Button } from '../../Button'; - -const Story: ComponentStory = (args) => ( - - - Hello there! - -); - -export default Story; diff --git a/packages/web-react/src/components/Tooltip/demo/TooltipClickable.tsx b/packages/web-react/src/components/Tooltip/demo/TooltipClickable.tsx index eba9797f68..ee5290356c 100644 --- a/packages/web-react/src/components/Tooltip/demo/TooltipClickable.tsx +++ b/packages/web-react/src/components/Tooltip/demo/TooltipClickable.tsx @@ -1,31 +1,28 @@ -// Because there is no `dist` directory during the CI run -/* eslint-disable import/no-extraneous-dependencies, import/extensions, import/no-unresolved */ import React, { useState } from 'react'; -import { ComponentStory } from '@storybook/react'; -import Tooltip from '../Tooltip'; -import TooltipWrapper from '../TooltipWrapper'; +import DocsBox from '../../../../docs/DocsBox'; import { Button } from '../../Button'; +import TooltipWrapper from '../TooltipWrapper'; +import Tooltip from '../Tooltip'; -const Story: ComponentStory = () => { +const TooltipClickable = () => { const [open, setOpen] = useState(false); const toggleHandler = () => setOpen(!open); return ( <> -
- -
+ + -
I have an externally-triggered tooltip
- Hello there! + I have an externally-triggered tooltip + + Hello there! + ); }; -Story.args = {}; - -export default Story; +export default TooltipClickable; diff --git a/packages/web-react/src/components/Tooltip/demo/TooltipDefault.tsx b/packages/web-react/src/components/Tooltip/demo/TooltipDefault.tsx new file mode 100644 index 0000000000..94b9a1aeda --- /dev/null +++ b/packages/web-react/src/components/Tooltip/demo/TooltipDefault.tsx @@ -0,0 +1,21 @@ +import React from 'react'; +import DocsBox from '../../../../docs/DocsBox'; +import TooltipWrapper from '../TooltipWrapper'; +import Tooltip from '../Tooltip'; + +const TooltipDefault = () => ( + + + Tooltips +
+ all day long… + + + Hello there! + Hello there! + Hello there! There is slightly more text in this tooltip. + Hello there! + +); + +export default TooltipDefault; diff --git a/packages/web-react/src/components/Tooltip/demo/TooltipDismissible.tsx b/packages/web-react/src/components/Tooltip/demo/TooltipDismissible.tsx index e0613f3600..bfcc60009a 100644 --- a/packages/web-react/src/components/Tooltip/demo/TooltipDismissible.tsx +++ b/packages/web-react/src/components/Tooltip/demo/TooltipDismissible.tsx @@ -1,26 +1,22 @@ -// Because there is no `dist` directory during the CI run -/* eslint-disable import/no-extraneous-dependencies, import/extensions, import/no-unresolved */ import React, { useState } from 'react'; -import { ComponentStory } from '@storybook/react'; -import Tooltip from '../Tooltip'; -import TooltipWrapper from '../TooltipWrapper'; import { Button } from '../../Button'; +import TooltipWrapper from '../TooltipWrapper'; +import Tooltip from '../Tooltip'; -const Story: ComponentStory = () => { +const TooltipDismissible = () => { const [open, setOpen] = useState(true); + const openHandler = () => setOpen(true); const closeHandler = () => setOpen(false); return ( - - - Hello there! + + + Close me ); }; -Story.args = {}; - -export default Story; +export default TooltipDismissible; diff --git a/packages/web-react/src/components/Tooltip/demo/TooltipDismissibleUncontrolled.tsx b/packages/web-react/src/components/Tooltip/demo/TooltipDismissibleUncontrolled.tsx deleted file mode 100644 index c1a6e5a463..0000000000 --- a/packages/web-react/src/components/Tooltip/demo/TooltipDismissibleUncontrolled.tsx +++ /dev/null @@ -1,18 +0,0 @@ -// Because there is no `dist` directory during the CI run -/* eslint-disable import/no-extraneous-dependencies, import/extensions, import/no-unresolved */ -import React from 'react'; -import { ComponentStory } from '@storybook/react'; -import UncontrolledTooltip from '../UncontrolledTooltip'; -import TooltipWrapper from '../TooltipWrapper'; -import { Button } from '../../Button'; - -const Story: ComponentStory = () => ( - - - Hello there! - -); - -Story.args = {}; - -export default Story; diff --git a/packages/web-react/src/components/Tooltip/demo/TooltipDismissibleViaJS.tsx b/packages/web-react/src/components/Tooltip/demo/TooltipDismissibleViaJS.tsx new file mode 100644 index 0000000000..5695303b75 --- /dev/null +++ b/packages/web-react/src/components/Tooltip/demo/TooltipDismissibleViaJS.tsx @@ -0,0 +1,30 @@ +import React, { useEffect, useState } from 'react'; +import { Button } from '../../Button'; +import TooltipWrapper from '../TooltipWrapper'; +import Tooltip from '../Tooltip'; + +const TooltipDismissibleViaJS = () => { + const localStorageValue = localStorage.getItem('my-tooltip-react') === 'true'; + const [open, setOpen] = useState(localStorageValue); + + const openHandler = () => setOpen(true); + const closeHandler = () => setOpen(false); + + useEffect(() => { + localStorage.setItem('my-tooltip-react', open.toString()); + }, [open]); + + return ( + <> +

Saves data to local storage.

+ + + + Close me + + + + ); +}; + +export default TooltipDismissibleViaJS; diff --git a/packages/web-react/src/components/Tooltip/demo/TooltipFloatingUi.tsx b/packages/web-react/src/components/Tooltip/demo/TooltipFloatingUi.tsx index a14552692c..ad9c7f37ff 100644 --- a/packages/web-react/src/components/Tooltip/demo/TooltipFloatingUi.tsx +++ b/packages/web-react/src/components/Tooltip/demo/TooltipFloatingUi.tsx @@ -1,5 +1,3 @@ -// Because there is no `dist` directory during the CI run -/* eslint-disable import/no-extraneous-dependencies, import/extensions, import/no-unresolved */ import React, { useState } from 'react'; import { autoUpdate, @@ -11,11 +9,10 @@ import { useInteractions, useRole, } from '@floating-ui/react'; -import { ComponentStory } from '@storybook/react'; -import Tooltip from '../Tooltip'; import { Button } from '../../Button'; +import Tooltip from '../Tooltip'; -const Story: ComponentStory = () => { +const TooltipFloatingUI = () => { const [open, setOpen] = useState(true); const { x, y, refs, context, placement } = useFloating({ @@ -38,8 +35,14 @@ const Story: ComponentStory = () => { The following example is using external library Floating UI.

πŸ–± Try scrolling the example to see how Tooltip placement is updated.

-
-
+
+
@@ -62,6 +65,4 @@ const Story: ComponentStory = () => { ); }; -Story.args = {}; - -export default Story; +export default TooltipFloatingUI; diff --git a/packages/web-react/src/components/Tooltip/demo/TooltipPlacements.tsx b/packages/web-react/src/components/Tooltip/demo/TooltipPlacements.tsx new file mode 100644 index 0000000000..835d2e898c --- /dev/null +++ b/packages/web-react/src/components/Tooltip/demo/TooltipPlacements.tsx @@ -0,0 +1,46 @@ +import React from 'react'; +import { ButtonLink } from '../../Button'; +import TooltipWrapper from '../TooltipWrapper'; +import Tooltip from '../Tooltip'; + +const TooltipPlacements = () => ( + <> + + + Tooltip on top + + + Hello there! + + + + + + Tooltip on right + + + Hello there! + + + + + + Tooltip on bottom + + + Hello there! + + + + + + Tooltip on left + + + Hello there! + + + +); + +export default TooltipPlacements; diff --git a/packages/web-react/src/components/Tooltip/demo/TooltipUncontrolled.tsx b/packages/web-react/src/components/Tooltip/demo/TooltipUncontrolled.tsx deleted file mode 100644 index 73319f0e63..0000000000 --- a/packages/web-react/src/components/Tooltip/demo/TooltipUncontrolled.tsx +++ /dev/null @@ -1,20 +0,0 @@ -// Because there is no `dist` directory during the CI run -/* eslint-disable import/no-extraneous-dependencies, import/extensions, import/no-unresolved */ -import React from 'react'; -import { ComponentStory } from '@storybook/react'; -import UncontrolledTooltip from '../UncontrolledTooltip'; -import TooltipWrapper from '../TooltipWrapper'; -import { Button } from '../../Button'; - -const Story: ComponentStory = () => { - return ( - - - Hello there! - - ); -}; - -Story.args = {}; - -export default Story; diff --git a/packages/web-react/src/components/Tooltip/demo/index.tsx b/packages/web-react/src/components/Tooltip/demo/index.tsx index 52afd01938..ec350a05a5 100644 --- a/packages/web-react/src/components/Tooltip/demo/index.tsx +++ b/packages/web-react/src/components/Tooltip/demo/index.tsx @@ -5,39 +5,35 @@ import ReactDOM from 'react-dom/client'; // eslint-disable-next-line @typescript-eslint/ban-ts-comment, import/extensions, import/no-unresolved // @ts-ignore: No declaration file import icons from '@lmc-eu/spirit-icons/dist/icons'; -import { IconsProvider } from '../../../context'; import DocsSection from '../../../../docs/DocsSections'; -import Tooltip from './Tooltip'; -import TooltipDismissible from './TooltipDismissible'; +import { IconsProvider } from '../../../context'; +import TooltipDefault from './TooltipDefault'; +import TooltipPlacements from './TooltipPlacements'; import TooltipClickable from './TooltipClickable'; -import TooltipFloatingUi from './TooltipFloatingUi'; -import TooltipDismissibleFloatingUi from './TooltipDismissibleFloatingUi'; -import TooltipUncontrolled from './TooltipUncontrolled'; -import TooltipDismissibleUncontrolled from './TooltipDismissibleUncontrolled'; +import TooltipDismissible from './TooltipDismissible'; +import TooltipFloatingUI from './TooltipFloatingUi'; +import TooltipDismissibleViaJS from './TooltipDismissibleViaJS'; ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render( - - + + - - + + - + - - - - - + + - - + + - - + + , diff --git a/packages/web-react/src/types/tooltip.ts b/packages/web-react/src/types/tooltip.ts index c45929d317..c47fbc97e5 100644 --- a/packages/web-react/src/types/tooltip.ts +++ b/packages/web-react/src/types/tooltip.ts @@ -6,9 +6,10 @@ export interface TooltipHandlingProps { } export interface BaseTooltipProps extends ChildrenProps, StyleProps { - placement?: 'top' | 'right' | 'bottom' | 'left' | 'off'; - isDismissible?: boolean; closeLabel?: string; + id?: string; + isDismissible?: boolean; + placement?: 'top' | 'right' | 'bottom' | 'left' | 'off'; } export interface TooltipWrapperProps extends ChildrenProps, StyleProps {} From 86f1d05c71ac7533c4c254918a3ed2f9ef041e0e Mon Sep 17 00:00:00 2001 From: Pavel Klibani Date: Mon, 18 Sep 2023 14:28:16 +0200 Subject: [PATCH 2/3] Docs(web-twig): Add Tooltip demo #DS-914 - Tooltip demo in web-twig is now same as demo in web and web-react --- .../scripts/tooltip-dismissible-via-js.ts | 21 ++++++ apps/web-twig-demo/webpack.config.js | 1 + .../components/Tooltip/Tooltip.stories.twig | 8 +++ .../stories/TooltipDismissibleViaJS.twig | 12 ++++ .../Tooltip/stories/TooltipFloatingUI.twig | 64 +++++++++++++++++++ 5 files changed, 106 insertions(+) create mode 100644 apps/web-twig-demo/assets/scripts/tooltip-dismissible-via-js.ts create mode 100644 packages/web-twig/src/Resources/components/Tooltip/stories/TooltipDismissibleViaJS.twig create mode 100644 packages/web-twig/src/Resources/components/Tooltip/stories/TooltipFloatingUI.twig diff --git a/apps/web-twig-demo/assets/scripts/tooltip-dismissible-via-js.ts b/apps/web-twig-demo/assets/scripts/tooltip-dismissible-via-js.ts new file mode 100644 index 0000000000..c2f8014bc5 --- /dev/null +++ b/apps/web-twig-demo/assets/scripts/tooltip-dismissible-via-js.ts @@ -0,0 +1,21 @@ +import Tooltip from '@lmc-eu/spirit-web/src/js/Tooltip'; + +const myTooltipEl = document.getElementById('my-dismissible-tooltip2'); +const myTooltip = new Tooltip(myTooltipEl); + +if (!window.localStorage.getItem('my-tooltip-twig')) { + myTooltip.show(); +} + +document.getElementById('my-dismissible-button').addEventListener('click', () => { + myTooltip.show(); + window.localStorage.removeItem('my-tooltip-twig'); +}); + +document + .getElementById('my-dismissible-tooltip2') + .querySelector('button') + .addEventListener('click', () => { + myTooltip.hide(); + window.localStorage.setItem('my-tooltip-twig', 'true'); + }); diff --git a/apps/web-twig-demo/webpack.config.js b/apps/web-twig-demo/webpack.config.js index d232989c5c..099ecb5021 100644 --- a/apps/web-twig-demo/webpack.config.js +++ b/apps/web-twig-demo/webpack.config.js @@ -26,6 +26,7 @@ Encore .addEntry('app', './assets/app.ts') .addEntry('fileUploaderImagePreview', './assets/scripts/file-uploader-image-preview.ts') .addEntry('formValidations', './assets/scripts/form-validations.ts') + .addEntry('tooltipDismissibleViaJS', './assets/scripts/tooltip-dismissible-via-js.ts') // enables the Symfony UX Stimulus bridge (used in assets/bootstrap.js) // .enableStimulusBridge('./assets/controllers.json') diff --git a/packages/web-twig/src/Resources/components/Tooltip/Tooltip.stories.twig b/packages/web-twig/src/Resources/components/Tooltip/Tooltip.stories.twig index b53a8613e9..457df29f95 100644 --- a/packages/web-twig/src/Resources/components/Tooltip/Tooltip.stories.twig +++ b/packages/web-twig/src/Resources/components/Tooltip/Tooltip.stories.twig @@ -18,4 +18,12 @@ {% include '@components/Tooltip/stories/TooltipDismissible.twig' %} + + {% include '@components/Tooltip/stories/TooltipDismissibleViaJS.twig' %} + + + + {% include '@components/Tooltip/stories/TooltipFloatingUI.twig' %} + + {% endblock %} diff --git a/packages/web-twig/src/Resources/components/Tooltip/stories/TooltipDismissibleViaJS.twig b/packages/web-twig/src/Resources/components/Tooltip/stories/TooltipDismissibleViaJS.twig new file mode 100644 index 0000000000..9920a883e1 --- /dev/null +++ b/packages/web-twig/src/Resources/components/Tooltip/stories/TooltipDismissibleViaJS.twig @@ -0,0 +1,12 @@ +

+ Saves data to local storage. +

+ + + + + Close me + + + +{{ encore_entry_script_tags('tooltipDismissibleViaJS') }} diff --git a/packages/web-twig/src/Resources/components/Tooltip/stories/TooltipFloatingUI.twig b/packages/web-twig/src/Resources/components/Tooltip/stories/TooltipFloatingUI.twig new file mode 100644 index 0000000000..3e74cacbb3 --- /dev/null +++ b/packages/web-twig/src/Resources/components/Tooltip/stories/TooltipFloatingUI.twig @@ -0,0 +1,64 @@ + + +

+ The following example is using external library Floating UI. +

+

πŸ–± Try scrolling the example to see how Tooltip placement is updated.

+ +
+
+ + + Hello there! + + +
+
+ + From 998c252bba671ebdbbc0cad0f0d6cf34cb257667 Mon Sep 17 00:00:00 2001 From: Pavel Klibani Date: Mon, 18 Sep 2023 14:29:02 +0200 Subject: [PATCH 3/3] Docs(web): Add Tooltip demo #DS-914 - Tooltip demo in web is now same as demo in web-twig and web-react --- .../Tooltip/dismissible-tooltip.mjs | 18 + .../Tooltip/floating-ui-example.mjs | 5 +- .../src/scss/components/Tooltip/index.html | 331 +++++++++--------- 3 files changed, 194 insertions(+), 160 deletions(-) create mode 100644 packages/web/src/scss/components/Tooltip/dismissible-tooltip.mjs diff --git a/packages/web/src/scss/components/Tooltip/dismissible-tooltip.mjs b/packages/web/src/scss/components/Tooltip/dismissible-tooltip.mjs new file mode 100644 index 0000000000..b03cf2a454 --- /dev/null +++ b/packages/web/src/scss/components/Tooltip/dismissible-tooltip.mjs @@ -0,0 +1,18 @@ +import Tooltip from '../../../js/Tooltip'; + +const myTooltipEl = document.getElementById('my-dismissible-tooltip2'); +const myTooltip = new Tooltip(myTooltipEl); + +if (!window.localStorage.getItem('my-tooltip')) { + myTooltip.show(); +} + +document.getElementById('my-dismissible-button').addEventListener('click', () => { + myTooltip.show(); + window.localStorage.removeItem('my-tooltip'); +}); + +document.getElementById('my-dismissible-tooltip2-button').addEventListener('click', () => { + myTooltip.hide(); + window.localStorage.setItem('my-tooltip', true); +}); diff --git a/packages/web/src/scss/components/Tooltip/floating-ui-example.mjs b/packages/web/src/scss/components/Tooltip/floating-ui-example.mjs index c26cc3f6bb..bce260c706 100644 --- a/packages/web/src/scss/components/Tooltip/floating-ui-example.mjs +++ b/packages/web/src/scss/components/Tooltip/floating-ui-example.mjs @@ -1,7 +1,7 @@ // To fully understand Floating UI and its options, please consult Floating UI docs: // @see https://floating-ui.com -import { autoUpdate, computePosition, flip } from 'https://cdn.skypack.dev/@floating-ui/dom@0.5.4'; +import { autoUpdate, computePosition, flip } from 'https://cdn.skypack.dev/@floating-ui/dom@1.5.3'; const button = document.getElementById('my-button'); const tooltip = document.getElementById('my-advanced-tooltip'); @@ -15,7 +15,8 @@ const cleanup = autoUpdate(button, tooltip, () => { top: `${y}px`, left: `${x}px`, }); - tooltip.dataset.placement = placement; + + tooltip.dataset.spiritPlacement = placement; }); }); diff --git a/packages/web/src/scss/components/Tooltip/index.html b/packages/web/src/scss/components/Tooltip/index.html index 978a5a722e..00c2df8b6b 100644 --- a/packages/web/src/scss/components/Tooltip/index.html +++ b/packages/web/src/scss/components/Tooltip/index.html @@ -4,214 +4,229 @@

Static Tooltip (No Interaction)

-
-
- Tooltips
- all day long… -
-
- Hello there! - -
-
- Hello there! - -
-
- Hello there! There is slightly more text in this tooltip. - -
-
- Hello there! - +
+ +
+
+ Tooltips
+ all day long… +
+
+ Hello there! + +
+
+ Hello there! + +
+
+ Hello there! There is slightly more text in this tooltip. + +
+
+ Hello there! + +
+
+

Tooltip on Hover (Pure CSS)

-
- -
- Hello there! - +
+ +
+ +
+ Hello there! + +
-
-
- -
- Hello there! - +
+ +
+ Hello there! + +
-
-
- -
- Hello there! - +
+ +
+ Hello there! + +
-
-
- -
- Hello there! - +
+ +
+ Hello there! + +
+
+

Tooltip on Click (JavaScript)

-
+
+ -
-
-
- I have an externally-triggered tooltip -
-
+

Dismissible Tooltip

-
- -
- Close me - - +
+ +
+ +
+ Close me + + +
+
+

Dismissible Tooltip via JS API

-

- Saves data to local storage. -

- -
- - -
- - + +
+ + +
- document.getElementById('my-dismissible-tooltip2-button').addEventListener('click', () => { - myTooltip.hide(); - window.localStorage.setItem('my-tooltip', true); - }); - +
+
-

Advanced Positioning

- -

- The following example is using external library Floating UI. -

- -

- πŸ–± Try scrolling the example to see how Tooltip placement is updated. -

- - - - - -
-
- -
- Hello there! - +

Advanced Positioning

+ +
+ +

+ The following example is using external library Floating UI. +

+ +

+ πŸ–± Try scrolling the example to see how Tooltip placement is updated. +

+ + + + + +
+
+ +
+ Hello there! + +
+