optimizely-oui/module/js/components/Tile/Tile.story.js

Optimizely's Component Library.

import React from "react";
import { storiesOf } from "@storybook/react";
import { action } from "@storybook/addon-actions";
import { withKnobs, text, boolean as _boolean } from "@storybook/addon-knobs";
import Tile from "./index";
import Col from "../Layout/Col";
import Row from "../Layout/Row";
import Container from "../Layout/Container";
import Dropdown from "../Dropdown";
var stories = storiesOf("Informational|Tile", module);
var dropdownItems = [React.createElement(Dropdown.ListItem, {
  key: 0,
  role: "separator"
}, "Percentage Rollout"), React.createElement(Dropdown.ListItem, {
  key: 1
}, React.createElement(Dropdown.BlockLink, {
  onClick: action("onClick move to top"),
  testSection: "dropdown-block-link-move"
}, React.createElement(Dropdown.BlockLinkText, {
  text: "Move to top"
}))), React.createElement(Dropdown.ListItem, {
  key: 2,
  removeBorderTop: true
}, React.createElement(Dropdown.BlockLink, {
  onClick: action("onClick duplicate"),
  testSection: "dropdown-block-link-duplicate"
}, React.createElement(Dropdown.BlockLinkText, {
  text: "Duplicate"
}))), React.createElement(Dropdown.ListItem, {
  key: 3,
  removeBorderTop: true
}, React.createElement(Dropdown.BlockLink, {
  onClick: action("onClick archive"),
  testSection: "dropdown-block-link-archive"
}, React.createElement(Dropdown.BlockLinkText, {
  text: "Archive"
}))), React.createElement(Dropdown.ListItem, {
  key: 4
}, React.createElement(Dropdown.BlockLink, {
  onClick: action("onClick delete"),
  testSection: "dropdown-block-link-delete"
}, React.createElement(Dropdown.BlockLinkText, {
  text: "Delete...",
  isDestructive: true
})))];
stories.addDecorator(withKnobs).addDecorator(function (story) {
  return React.createElement("div", {
    id: "root-preview"
  }, story());
});
stories.add("Interactive (content is a Button)", function () {
  var shouldShowWarning = _boolean("Show warningTitleAndBodyContent={[string, any]} (not actually a boolean prop, see story or component)", false);

  return React.createElement(Container, null, React.createElement(Row, null, React.createElement(Col, {
    small: 6
  }, React.createElement(Tile, {
    name: "Alpha",
    description: "ID: 123456",
    onTileClick: action("onTileClick - Alpha"),
    isSelected: _boolean("isSelected", false),
    isDraggable: _boolean("isDraggable", false),
    warningTitleAndBodyContent: shouldShowWarning ? ["This is a warning", React.createElement("p", null, "Warning details")] : [] // eslint-disable-line react/jsx-key

  })), React.createElement(Col, {
    small: 6
  }, React.createElement(Tile, {
    name: "Beta: We are buttons",
    description: "You can click us!",
    onTileClick: action("onTileClick - Beta"),
    isSelected: _boolean("isSelected", false),
    isDraggable: _boolean("isDraggable", false),
    warningTitleAndBodyContent: shouldShowWarning ? ["This is a warning", React.createElement("p", null, "Warning details")] : [] // eslint-disable-line react/jsx-key

  }))));
}).add("Static (content is not a Button)", function () {
  var shouldShowWarning = _boolean("Show warningTitleAndBodyContent={[string, any]} (not actually a boolean prop, see story or component)", false);

  return React.createElement(Tile, {
    name: "Alpha: I am not a button",
    description: "Clicking me will do nothing",
    isSelected: _boolean("isSelected", false),
    isDraggable: _boolean("isDraggable", false),
    warningTitleAndBodyContent: shouldShowWarning ? ["This is a warning", React.createElement("p", null, "Warning details")] : [] // eslint-disable-line react/jsx-key

  });
}).add("With Monospace Name", function () {
  var shouldShowWarning = _boolean("Show warningTitleAndBodyContent={[string, any]} (not actually a boolean prop, see story or component)", false);

  return React.createElement(Tile, {
    name: "amount",
    description: "double",
    usesMonospaceName: _boolean("usesMonospaceName", true),
    onTileClick: action("onTileClick"),
    isSelected: _boolean("isSelected", false),
    isDraggable: _boolean("isDraggable", false),
    warningTitleAndBodyContent: shouldShowWarning ? ["This is a warning", React.createElement("p", null, "Warning details")] : [] // eslint-disable-line react/jsx-key
    ,
    onCopy: action("onCopy called")
  });
}).add("With a warning and unsaved changes (warning overrides unsaved changes indicator)", function () {
  var shouldShowWarning = _boolean("Show warningTitleAndBodyContent={[string, any]} (not actually a boolean prop, see story or component)", true);

  return React.createElement(Tile, {
    name: "Alpha",
    description: "ID:12345678",
    onTileClick: action("onTileClick"),
    isSelected: _boolean("isSelected", false),
    isDraggable: _boolean("isDraggable", true),
    testSection: "with-warning",
    unsavedChangesText: text("unsavedChangesText", "This rule has unsaved changes"),
    warningTitleAndBodyContent: shouldShowWarning ? ["This is a warning", React.createElement("p", null, "Warning details")] : [] // eslint-disable-line react/jsx-key

  });
}).add("Draggable, with a warning", function () {
  var shouldShowWarning = _boolean("Show warningTitleAndBodyContent={[string, any]} (not actually a boolean prop, see story or component)", true);

  return React.createElement(Tile, {
    name: "Alpha",
    description: "ID:12345678",
    onTileClick: action("onTileClick"),
    isSelected: _boolean("isSelected", false),
    isDraggable: _boolean("isDraggable", true),
    warningTitleAndBodyContent: shouldShowWarning ? ["This is a warning", React.createElement("p", null, "Warning details")] : [] // eslint-disable-line react/jsx-key
    ,
    testSection: "with-warning"
  });
}).add("With unsaved changes", function () {
  var shouldShowWarning = _boolean("Show warningTitleAndBodyContent={[string, any]} (not actually a boolean prop, see story or component)", false);

  return React.createElement(Tile, {
    name: "Alpha",
    description: "ID:12345678",
    onTileClick: action("onTileClick"),
    isSelected: _boolean("isSelected", false),
    isDraggable: _boolean("isDraggable", true),
    testSection: "with-warning",
    unsavedChangesText: text("unsavedChangesText", "This rule has unsaved changes"),
    warningTitleAndBodyContent: shouldShowWarning ? ["This is a warning", React.createElement("p", null, "Warning details")] : [] // eslint-disable-line react/jsx-key

  });
}).add("With Action Items on the right", function () {
  var shouldShowWarning = _boolean("Show warningTitleAndBodyContent={[string, any]} (not actually a boolean prop, see story or component)", false);

  return React.createElement(Container, null, React.createElement(Row, null, React.createElement(Col, {
    small: 6
  }, React.createElement(Tile, {
    name: "Alpha",
    testSection: "alpha-tile",
    description: "ID:12345678",
    onTileClick: action("onTileClick"),
    isSelected: _boolean("isSelected", false),
    isDraggable: _boolean("isDraggable", false),
    warningTitleAndBodyContent: shouldShowWarning ? ["This is a warning", React.createElement("p", null, "Warning details")] : [] // eslint-disable-line react/jsx-key
    ,
    onDismiss: action("onDismiss called")
  }))), React.createElement(Row, null, React.createElement(Col, {
    small: 6
  }, React.createElement(Tile, {
    name: "Beta",
    testSection: "beta-tile",
    description: "isSelected is true here",
    onTileClick: action("onTileClick"),
    isSelected: true,
    isDraggable: _boolean("isDraggable", false),
    warningTitleAndBodyContent: shouldShowWarning ? ["This is a warning", React.createElement("p", null, "Warning details")] : [] // eslint-disable-line react/jsx-key
    ,
    status: "Archived",
    onDismiss: action("onDismiss called")
  }))), React.createElement(Row, null, React.createElement(Col, {
    small: 6
  }, React.createElement(Tile, {
    name: "Charlie",
    testSection: "charlie-tile",
    description: "ID:1357",
    onTileClick: action("onTileClick"),
    isSelected: _boolean("isSelected", false),
    isDraggable: _boolean("isDraggable", false),
    warningTitleAndBodyContent: shouldShowWarning ? ["This is a warning", React.createElement("p", null, "Warning details")] : [] // eslint-disable-line react/jsx-key
    ,
    onDismiss: action("onDismiss called"),
    onEdit: action("onEdit called")
  }))), React.createElement(Row, null, React.createElement(Col, {
    small: 6
  }, React.createElement(Tile, {
    name: "Delta",
    testSection: "delta-tile",
    description: "ID:2468",
    onTileClick: action("onTileClick"),
    isSelected: _boolean("isSelected", false),
    isDraggable: _boolean("isDraggable", false),
    warningTitleAndBodyContent: shouldShowWarning ? ["This is a warning", React.createElement("p", null, "Warning details")] : [] // eslint-disable-line react/jsx-key
    ,
    status: "Running",
    dropdownItems: dropdownItems
  }))), React.createElement(Row, null, React.createElement(Col, {
    small: 6
  }, React.createElement(Tile, {
    name: "Echo",
    testSection: "echo-tile",
    description: "Increase in unique conversions per visitor for Recurring deposit complete event",
    onTileClick: action("onTileClick"),
    isSelected: _boolean("isSelected", false),
    isDraggable: _boolean("isDraggable", false),
    warningTitleAndBodyContent: shouldShowWarning ? ["This is a warning", React.createElement("p", null, "Warning details")] : [] // eslint-disable-line react/jsx-key
    ,
    onCopy: action("onCopy called"),
    dropdownItems: dropdownItems
  }))), React.createElement(Row, null, React.createElement(Col, {
    small: 6
  }, React.createElement(Tile, {
    name: React.createElement("em", null, "Foxtrot"),
    testSection: "foxtrot-tile",
    description: "All possibilities, as an example. Don't actually do this, please",
    onTileClick: action("onTileClick"),
    isSelected: _boolean("isSelected", false),
    isDraggable: _boolean("isDraggable", true),
    warningTitleAndBodyContent: shouldShowWarning ? ["This is a warning", React.createElement("p", null, "Warning details")] : [] // eslint-disable-line react/jsx-key
    ,
    status: "Active",
    onCopy: action("onCopy called"),
    onDismiss: action("onDismiss called"),
    onEdit: action("onEdit called"),
    dropdownItems: dropdownItems,
    resultsLink: text("resultsLink", "http://google.com")
  }))));
}).add("With Ordering", function () {
  var shouldShowWarning = _boolean("Show warningTitleAndBodyContent={[string, any]} (not actually a boolean prop, see story or component)", false);

  return React.createElement(Container, null, React.createElement(Row, null, React.createElement(Col, {
    small: 6
  }, React.createElement(Tile, {
    name: "Alpha",
    testSection: "alpha-tile",
    description: "ID:12345678",
    order: 1,
    onTileClick: action("onTileClick"),
    isSelected: _boolean("isSelected", false),
    isDraggable: _boolean("isDraggable", true),
    warningTitleAndBodyContent: shouldShowWarning ? ["This is a warning", React.createElement("p", null, "Warning details")] : [] // eslint-disable-line react/jsx-key
    ,
    onDismiss: action("onDismiss called")
  }))), React.createElement(Row, null, React.createElement(Col, {
    small: 6
  }, React.createElement(Tile, {
    name: "Beta",
    testSection: "beta-tile",
    description: "isSelected is true here",
    order: 2,
    onTileClick: action("onTileClick"),
    isSelected: true,
    isDraggable: _boolean("isDraggable", true),
    warningTitleAndBodyContent: shouldShowWarning ? ["This is a warning", React.createElement("p", null, "Warning details")] : [] // eslint-disable-line react/jsx-key
    ,
    status: "Archived",
    onDismiss: action("onDismiss called")
  }))), React.createElement(Row, null, React.createElement(Col, {
    small: 6
  }, React.createElement(Tile, {
    name: "Charlie",
    testSection: "charlie-tile",
    description: "ID:1357",
    order: 3,
    onTileClick: action("onTileClick"),
    isSelected: _boolean("isSelected", false),
    isDraggable: _boolean("isDraggable", true),
    warningTitleAndBodyContent: shouldShowWarning ? ["This is a warning", React.createElement("p", null, "Warning details")] : [] // eslint-disable-line react/jsx-key
    ,
    onDismiss: action("onDismiss called"),
    onEdit: action("onEdit called")
  }))), React.createElement(Row, null, React.createElement(Col, {
    small: 6
  }, React.createElement(Tile, {
    name: "Delta",
    testSection: "delta-tile",
    description: "ID:2468",
    order: 4,
    onTileClick: action("onTileClick"),
    isSelected: _boolean("isSelected", false),
    isDraggable: _boolean("isDraggable", true),
    warningTitleAndBodyContent: shouldShowWarning ? ["This is a warning", React.createElement("p", null, "Warning details")] : [] // eslint-disable-line react/jsx-key
    ,
    status: "Running",
    dropdownItems: dropdownItems
  }))), React.createElement(Row, null, React.createElement(Col, {
    small: 6
  }, React.createElement(Tile, {
    name: React.createElement("em", null, "Zeta"),
    testSection: "zeta-tile",
    description: "Increase in unique conversions per visitor for Recurring deposit complete event",
    order: 98,
    onTileClick: action("onTileClick"),
    isSelected: _boolean("isSelected", false),
    isDraggable: _boolean("isDraggable", true),
    warningTitleAndBodyContent: shouldShowWarning ? ["This is a warning", React.createElement("p", null, "Warning details")] : [] // eslint-disable-line react/jsx-key
    ,
    onCopy: action("onCopy called"),
    dropdownItems: dropdownItems
  }))), React.createElement(Row, null, React.createElement(Col, {
    small: 6
  }, React.createElement(Tile, {
    name: "",
    testSection: "empty-name-tile",
    description: "Increase in unique conversions per visitor for Recurring deposit complete event",
    order: 99,
    onTileClick: action("onTileClick"),
    isSelected: _boolean("isSelected", false),
    isDraggable: _boolean("isDraggable", true),
    warningTitleAndBodyContent: shouldShowWarning ? ["This is a warning", React.createElement("p", null, "Warning details")] : [] // eslint-disable-line react/jsx-key
    ,
    onCopy: action("onCopy called"),
    dropdownItems: dropdownItems
  }))));
});