monday-ui-react-core/src/components/TextWithHighlight/__stories__/textWithHighlight.stories.js

Official monday.com UI resources for application development in React.js

import React from "react";
import { action } from "@storybook/addon-actions";
import { text, boolean, number, select } from "@storybook/addon-knobs";
import { withPerformance } from "storybook-addon-performance";
import TextWithHighlight from "../TextWithHighlight";
import {
  StoryStateRow,
  StoryStateColumn,
  ComponentStateDescription,
  FlexLayout,
  Divider
} from "../../storybook-helpers";
import DarkThemeContainer from "../../../StoryBookComponents/DarkThemeContainer/DarkThemeContainer";
import StoryWrapper from "../../../StoryBookComponents/StoryWrapper/StoryWrapper";

export const Sandbox = () => (
  <div
    style={{
      width: 500,
      height: 200,
      border: "1px solid black",
      display: "flex",
      alignItems: "center",
      justifyContent: "center"
    }}
  >
    <TextWithHighlight
      id="Knobs"
      text={text("Text", "The quick brown fox jumps over the lazy dog")}
      highlightTerm={text("highlightTerm", "the")}
      limit={number("limit", null)}
      linesToClamp={2}
    />
  </div>
);

export default {
  title: "Components|TextWithHighlight",
  component: TextWithHighlight,
  decorators: [withPerformance]
};