docs(Tooltip): add temporary test story

carbon-design-system · May 18, 2021 · 7c140b7 · 7c140b7
1 parent 4b94ba7
commit 7c140b7
Showing 1 changed file with 116 additions and 0 deletions.
diff --git a/packages/react/src/components/Tooltip/Tooltip-story.js b/packages/react/src/components/Tooltip/Tooltip-story.js
@@ -17,6 +17,7 @@ import {
 import Tooltip from '../Tooltip';
 import { Tooltip as OGTooltip } from './Tooltip';
 import Button from '../Button';
+import TextInput from '../TextInput';
 import { OverflowMenuVertical16 } from '@carbon/icons-react';
 import mdx from './Tooltip.mdx';
 
@@ -271,3 +272,118 @@ OnlyCustomIcon.parameters = {
 export const UncontrolledTooltip = () => <UncontrolledTooltipExample />;
 
 UncontrolledTooltip.storyName = 'uncontrolled tooltip';
+
+export const App = () => (
+  <div>
+    <Tooltip
+      className="view-example-tooltip"
+      triggerClassName="view-example-tooltip-trigger"
+      triggerText={
+        <div className="view-example-text">
+          <span>example1</span>
+        </div>
+      }
+      align="start"
+      direction="bottom"
+      showIcon={false}>
+      <div>
+        <div className="bx--snippet">
+          <div className="bx--snippet-container">
+            <code>
+              <pre>
+                <span>This is the first message.</span>
+              </pre>
+            </code>
+          </div>
+          <Button />
+        </div>
+      </div>
+    </Tooltip>
+    <Tooltip
+      className="view-example-tooltip2"
+      triggerClassName="view-example-tooltip-trigger2"
+      triggerText={
+        <div className="view-example-text2">
+          <span>example2</span>
+        </div>
+      }
+      align="start"
+      direction="bottom"
+      showIcon={false}>
+      <div className="bx--snippet">
+        <div className="bx--snippet-container">
+          <code>
+            <pre>
+              <span>This is the second message.</span>
+            </pre>
+          </code>
+        </div>
+        <Button />
+      </div>
+    </Tooltip>
+  </div>
+);
+
+export const App2 = () => {
+  const getTooltip = (id, label, includeId, withButton) => (
+    <Tooltip
+      tooltipId={(id && `tooltip-${id}`) || undefined}
+      triggerText={label}>
+      <p>
+        This is some tooltip text. This box shows the maximum amount of text
+        that should appear inside. If more room is needed please use a modal
+        instead.
+      </p>
+      <div className={`${prefix}--tooltip__footer`}>
+        {withButton && (
+          <a href="/" className={`${prefix}--link`}>
+            Learn More
+          </a>
+        )}
+        {withButton && <Button size="small">Create</Button>}
+      </div>
+    </Tooltip>
+  );
+  const getTextInput = (id, label, includeId, withButton) => (
+    <TextInput
+      style={{ marginBottom: 20 }}
+      id={id}
+      labelText={getTooltip(`tooltip-${id}`, label, includeId, withButton)}
+    />
+  );
+
+  return (
+    <div className="app">
+      {getTextInput('bad-text-input-1', 'Text input (tooltip with id) 1', true)}
+      {getTextInput(
+        'bad-text-input-2',
+        'Text input (tooltip with id) 2',
+        true,
+        true
+      )}
+      {getTextInput(
+        'bad-text-input-3',
+        'Text input (tooltip with id) 3',
+        true,
+        true
+      )}
+      {getTextInput(
+        'good-text-input-1',
+        'Text input (tooltip with no id) 1',
+        false
+      )}
+      {getTextInput(
+        'good-text-input-2',
+        'Text input (tooltip with no id) 2',
+        false,
+        true
+      )}
+      {getTextInput(
+        'good-text-input-3',
+        'Text input (tooltip with no id) 3',
+        false,
+        true
+      )}
+    </div>
+  );
+};