summaryrefslogtreecommitdiffstats
path: root/src/components/Tooltip
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/Tooltip')
-rw-r--r--src/components/Tooltip/Tooltip.module.scss120
-rw-r--r--src/components/Tooltip/Tooltip.tsx59
2 files changed, 0 insertions, 179 deletions
diff --git a/src/components/Tooltip/Tooltip.module.scss b/src/components/Tooltip/Tooltip.module.scss
deleted file mode 100644
index 34fa23d..0000000
--- a/src/components/Tooltip/Tooltip.module.scss
+++ /dev/null
@@ -1,120 +0,0 @@
-@use "@styles/abstracts/functions" as fun;
-@use "@styles/abstracts/mixins" as mix;
-
-.title {
- padding: var(--spacing-2xs) var(--spacing-xs);
- position: absolute;
- top: calc(var(--spacing-sm) * -1);
- left: var(--spacing-lg);
- background: var(--color-bg);
- border: fun.convert-px(1) solid var(--color-primary-dark);
- box-shadow: fun.convert-px(1) fun.convert-px(1) 0 0 var(--color-shadow);
- color: var(--color-primary-darker);
- font-size: var(--font-size-sm);
- font-variant: small-caps;
- font-weight: 500;
-
- @include mix.media("screen") {
- @include mix.dimensions(null, "2xs", "height") {
- top: 0;
- }
-
- @include mix.dimensions("md") {
- left: var(--spacing-md);
- }
- }
-
- &::before {
- content: "?";
- padding: var(--spacing-2xs);
- position: absolute;
- top: fun.convert-px(-1);
- bottom: fun.convert-px(-1);
- right: 100%;
- background: var(--color-primary-dark);
- border: fun.convert-px(1) solid var(--color-primary-dark);
- box-shadow: fun.convert-px(1) fun.convert-px(1) 0 0 var(--color-shadow);
- color: var(--color-fg-inverted);
- font-weight: 600;
- }
-}
-
-.message {
- transition: all 0.5s ease-in-out 0;
-}
-
-.wrapper {
- padding: 9% 6% var(--spacing-sm) 6%;
- position: absolute;
- bottom: 30%;
- left: fun.convert-px(15);
- right: fun.convert-px(15);
- background: var(--color-bg);
- border: fun.convert-px(2) solid var(--color-primary-dark);
- border-radius: fun.convert-px(3);
- box-shadow: fun.convert-px(1) fun.convert-px(1) 0 0 var(--color-shadow),
- fun.convert-px(2) fun.convert-px(2) fun.convert-px(1) fun.convert-px(1)
- var(--color-shadow-light);
- transform-origin: bottom;
-
- @include mix.media("screen") {
- @include mix.dimensions(null, "2xs", "height") {
- overflow-y: auto;
- top: 18%;
- }
-
- @include mix.dimensions("sm") {
- bottom: unset;
- left: fun.convert-px(15);
- right: fun.convert-px(15);
- top: 100%;
- transform-origin: top;
- }
- }
-
- ul,
- p {
- margin: 0;
- padding: 0;
- }
-}
-
-.hidden {
- visibility: hidden;
- opacity: 0;
- transition: all 0.5s ease-in-out 0s, opacity 0.3s ease-in-out 0.2s;
- transform: scaleY(0);
-
- .message,
- .title {
- opacity: 0;
- }
-
- .message {
- transition: all 0.3s ease-in-out 0s;
- }
-
- .title {
- transition: all 0.2s ease-in-out 0.2s;
- }
-}
-
-.visible {
- visibility: visible;
- opacity: 1;
- transform: scaleY(1);
- transition: all 0.8s ease-in-out 0s, opacity 0.7s ease-in-out 0.2s;
-
- .message,
- .title {
- opacity: 1;
- }
-
- .message {
- transition: all 0.5s ease-in-out 0.2s;
- }
-
- .title {
- transition: all 0.4s ease-in-out 0s;
- }
-}
diff --git a/src/components/Tooltip/Tooltip.tsx b/src/components/Tooltip/Tooltip.tsx
deleted file mode 100644
index 56a87ab..0000000
--- a/src/components/Tooltip/Tooltip.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import { ButtonHelp } from '@components/Buttons';
-import { useState } from 'react';
-import { useIntl } from 'react-intl';
-import styles from './Tooltip.module.scss';
-
-const Tooltip = ({
- message,
- title,
-}: {
- message: string | string[];
- title: string;
-}) => {
- const intl = useIntl();
- const [isOpen, setIsOpen] = useState<boolean>(false);
-
- const getMessageFromArray = (strings: string[]) => {
- let keyIndex = 0;
- return (
- <ul>
- {strings.map((string) => {
- keyIndex = keyIndex + 1;
- return <li key={`message-${keyIndex}`}>{string}</li>;
- })}
- </ul>
- );
- };
-
- const buttonTitle = isOpen
- ? intl.formatMessage({
- defaultMessage: 'Close help',
- description: 'Tooltip: button title',
- id: '9kx83j',
- })
- : intl.formatMessage({
- defaultMessage: 'Show help',
- description: 'Tooltip: button title',
- id: 'A5n+C9',
- });
-
- const wrapperModifier = isOpen ? styles.visible : styles.hidden;
-
- return (
- <div>
- <ButtonHelp
- showHelp={isOpen}
- setShowHelp={setIsOpen}
- title={buttonTitle}
- />
- <div className={`${styles.wrapper} ${wrapperModifier}`}>
- <div className={styles.title}>{title}</div>
- <div className={styles.message}>
- {Array.isArray(message) ? getMessageFromArray(message) : message}
- </div>
- </div>
- </div>
- );
-};
-
-export default Tooltip;