@salesforce/design-system-react/module/components/modal/__docs__/storybook-stories.js

Salesforce Lightning Design System for React

/* eslint-disable react/display-name */
import React from 'react';
import moment from 'moment';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import IconSettings from '../../icon-settings';
import { MODAL } from '../../../utilities/constants';
import Modal from '../../modal';
import Combobox from '../../combobox/';
import Timepicker from '../../time-picker';
import Datepicker from '../../date-picker';
import Button from '../../button';
import ComboboxBase from '../../combobox/__examples__/base';
import ModalCustomParentNode from '../__examples__/modal-custom-parent-node';
import SLDSSettings from '../../SLDSSettings';
import HeaderFooter from '../__examples__/header-footer';
import MenuContents from '../__examples__/menu-contents';
import Prompt from '../__examples__/prompt';
import Sizes from '../__examples__/sizes';
import Taglines from '../__examples__/taglines';
import { canUseDOM } from '../../../utilities/execution-environment'; // used by Modal component

if (canUseDOM && document.querySelector('#root')) {
  SLDSSettings.setAppElement('#root');
} else if (canUseDOM) {
  SLDSSettings.setAppElement(document.createElement('div'));
}

var getModal = function getModal(props) {
  return (
    /*#__PURE__*/
    React.createElement(Modal, props)
  );
};

var modalFooter = [
/*#__PURE__*/
React.createElement(Button, {
  key: "modalBCancel",
  label: "Cancel"
}),
/*#__PURE__*/
React.createElement(Button, {
  key: "modalBSave",
  label: "Save",
  variant: "brand"
})];
var leadSourceTypes = [{
  id: 1,
  label: 'Third Party Program',
  value: 'A0'
}, {
  id: 2,
  label: 'Cold Call',
  value: 'B0'
}, {
  id: 3,
  label: 'LinkedIn',
  value: 'C0'
}, {
  id: 4,
  label: 'Direct Mail',
  value: 'D0'
}, {
  id: 5,
  label: 'Other',
  value: 'E0'
}];
var modalContent =
/*#__PURE__*/
React.createElement("section", {
  className: "slds-p-around_large"
},
/*#__PURE__*/
React.createElement("div", {
  className: "slds-form-element slds-m-bottom_large"
},
/*#__PURE__*/
React.createElement("label", {
  className: "slds-form-element__label",
  htmlFor: "opptyName"
}, "Opportunity Name"),
/*#__PURE__*/
React.createElement("div", {
  className: "slds-form-element__control"
},
/*#__PURE__*/
React.createElement("input", {
  id: "opptyName",
  className: "slds-input",
  type: "text",
  placeholder: "Enter name"
}))),
/*#__PURE__*/
React.createElement("div", {
  className: "slds-form-element slds-m-bottom_large"
},
/*#__PURE__*/
React.createElement("label", {
  className: "slds-form-element__label",
  htmlFor: "description"
}, "Opportunity Description"),
/*#__PURE__*/
React.createElement("div", {
  className: "slds-form-element__control"
},
/*#__PURE__*/
React.createElement("textarea", {
  id: "description",
  className: "slds-textarea",
  placeholder: "Enter description"
}))),
/*#__PURE__*/
React.createElement("div", {
  className: "slds-form-element slds-m-vertical_large"
},
/*#__PURE__*/
React.createElement("label", {
  className: "slds-form-element__label",
  htmlFor: "amount"
}, "Amount"),
/*#__PURE__*/
React.createElement("div", {
  className: "slds-form-element__control"
},
/*#__PURE__*/
React.createElement("input", {
  id: "amount",
  className: "slds-input",
  type: "text",
  placeholder: "Enter Amount"
}))),
/*#__PURE__*/
React.createElement("div", {
  className: "slds-form-element slds-m-vertical_large"
},
/*#__PURE__*/
React.createElement("label", {
  className: "slds-form-element__label",
  htmlFor: "amount"
}, "Amount"),
/*#__PURE__*/
React.createElement("div", {
  className: "slds-form-element__control"
},
/*#__PURE__*/
React.createElement("input", {
  id: "amount",
  className: "slds-input",
  type: "text",
  placeholder: "Enter Amount"
}))),
/*#__PURE__*/
React.createElement("div", {
  className: "slds-m-bottom_large"
},
/*#__PURE__*/
React.createElement(Datepicker, {
  onDateChange: function onDateChange() {
    action('date is selected');
  },
  formatter: function formatter(date) {
    return date ? moment(date).format('M/D/YYYY') : '';
  },
  parser: function parser(dateString) {
    return moment(dateString, 'MM-DD-YYYY').toDate();
  }
})),
/*#__PURE__*/
React.createElement("div", {
  className: "slds-form-element slds-m-bottom_large"
},
/*#__PURE__*/
React.createElement(ComboboxBase, null)),
/*#__PURE__*/
React.createElement("div", {
  className: "slds-m-bottom_large"
},
/*#__PURE__*/
React.createElement(Combobox, {
  events: {
    onSelect: function onSelect(event, data) {
      return action('selected: ', data.selection[0].label);
    }
  },
  labels: {
    label: 'Lead Source',
    placeholder: 'Select Lead Source'
  },
  menuPosition: "relative",
  options: leadSourceTypes,
  selection: [leadSourceTypes[1]],
  variant: "readonly"
})),
/*#__PURE__*/
React.createElement("div", {
  className: "slds-m-bottom_large"
},
/*#__PURE__*/
React.createElement(Timepicker, {
  onDateChange: function onDateChange() {
    action('time is selected');
  }
})),
/*#__PURE__*/
React.createElement("div", {
  className: "slds-form-element slds-m-vertical_large"
},
/*#__PURE__*/
React.createElement("label", {
  className: "slds-form-element__label",
  htmlFor: "amount"
}, "Amount"),
/*#__PURE__*/
React.createElement("div", {
  className: "slds-form-element__control"
},
/*#__PURE__*/
React.createElement("input", {
  id: "amount",
  className: "slds-input",
  type: "text",
  placeholder: "Enter Amount"
}))),
/*#__PURE__*/
React.createElement("div", {
  className: "slds-form-element slds-m-vertical_large"
},
/*#__PURE__*/
React.createElement("label", {
  className: "slds-form-element__label",
  htmlFor: "amount"
}, "Amount"),
/*#__PURE__*/
React.createElement("div", {
  className: "slds-form-element__control"
},
/*#__PURE__*/
React.createElement("input", {
  id: "amount",
  className: "slds-input",
  type: "text",
  placeholder: "Enter Amount"
}))),
/*#__PURE__*/
React.createElement("div", {
  className: "slds-form-element slds-m-vertical_large"
},
/*#__PURE__*/
React.createElement("label", {
  className: "slds-form-element__label",
  htmlFor: "amount"
}, "Amount"),
/*#__PURE__*/
React.createElement("div", {
  className: "slds-form-element__control"
},
/*#__PURE__*/
React.createElement("input", {
  id: "amount",
  className: "slds-input",
  type: "text",
  placeholder: "Enter Amount"
}))),
/*#__PURE__*/
React.createElement("div", {
  className: "slds-form-element slds-m-vertical_large"
},
/*#__PURE__*/
React.createElement("label", {
  className: "slds-form-element__label",
  htmlFor: "amount"
}, "Amount"),
/*#__PURE__*/
React.createElement("div", {
  className: "slds-form-element__control"
},
/*#__PURE__*/
React.createElement("input", {
  id: "amount",
  className: "slds-input",
  type: "text",
  placeholder: "Enter Amount"
}))),
/*#__PURE__*/
React.createElement("div", {
  className: "slds-form-element slds-m-vertical_large"
},
/*#__PURE__*/
React.createElement("label", {
  className: "slds-form-element__label",
  htmlFor: "amount"
}, "Amount"),
/*#__PURE__*/
React.createElement("div", {
  className: "slds-form-element__control"
},
/*#__PURE__*/
React.createElement("input", {
  id: "amount",
  className: "slds-input",
  type: "text",
  placeholder: "Enter Amount"
}))));
storiesOf(MODAL, module).addDecorator(function (getStory) {
  return (
    /*#__PURE__*/
    React.createElement("div", {
      className: "slds-p-around_medium"
    },
    /*#__PURE__*/
    React.createElement(IconSettings, {
      iconPath: "/assets/icons"
    }, getStory()))
  );
}).add('Modal with Custom Parent Node', function () {
  return (
    /*#__PURE__*/
    React.createElement(ModalCustomParentNode, null)
  );
}).add('Small', function () {
  return getModal({
    assistiveText: {
      closeButton: 'Exit'
    },
    isOpen: true,
    tagline: 'Enter in details below',
    heading: 'New Opportunity',
    children: modalContent,
    onRequestClose: action('modal closed'),
    portalClassName: 'portal-class-name-test'
  });
}).add('Small with footer, not dismissible', function () {
  return getModal({
    disableClose: true,
    isOpen: true,
    tagline: 'Enter in details below',
    heading: 'New Opportunity',
    children: modalContent,
    onRequestClose: action('modal closed'),
    footer: modalFooter
  });
}).add('Small with custom footer', function () {
  return getModal({
    directional: true,
    isOpen: true,
    tagline: 'Enter in details below',
    heading: 'New Opportunity',
    children: modalContent,
    onRequestClose: action('modal closed'),
    footer:
    /*#__PURE__*/
    React.createElement("div", null,
    /*#__PURE__*/
    React.createElement(Button, {
      label: "cancel"
    }), " and some random text in here", ' ',
    /*#__PURE__*/
    React.createElement(Button, {
      label: "update"
    }),
    /*#__PURE__*/
    React.createElement(Button, {
      label: "run"
    }))
  });
}).add('Small no header', function () {
  return getModal({
    isOpen: true,
    children: modalContent,
    onRequestClose: action('modal closed'),
    portalClassName: 'portal-class-name-test'
  });
}).add('Small no header and custom footer', function () {
  return getModal({
    isOpen: true,
    children: modalContent,
    onRequestClose: action('modal closed'),
    portalClassName: 'portal-class-name-test',
    footer: modalFooter
  });
}).add('Large with directional footer', function () {
  return getModal({
    directional: true,
    isOpen: true,
    tagline: 'Enter in details below',
    heading: 'New Opportunity',
    children: modalContent,
    onRequestClose: action('modal closed'),
    footer: modalFooter,
    size: 'large'
  });
}).add('Prompt', function () {
  return getModal({
    isOpen: true,
    heading: 'Delete state - Default',
    children:
    /*#__PURE__*/
    React.createElement("div", {
      className: "slds-p-around_medium"
    }, "Are you sure you want to delete the Default State? This action cannot be undone. Are you sure you want to delete the Default State? This action cannot be undone. Are you sure you want to delete the Default State? This action cannot be undone.", ' ',
    /*#__PURE__*/
    React.createElement(Button, {
      className: "slds-m-around_medium"
    }, "Ok, got it!")),
    // eslint-disable-line max-len
    prompt: 'error',
    onRequestClose: action('modal closed')
  });
}).add('Docs site HeaderFooter', function () {
  return (
    /*#__PURE__*/
    React.createElement(HeaderFooter, null)
  );
}).add('Docs site MenuContents', function () {
  return (
    /*#__PURE__*/
    React.createElement(MenuContents, null)
  );
}).add('Docs site Prompt', function () {
  return (
    /*#__PURE__*/
    React.createElement(Prompt, null)
  );
}).add('Docs site Sizes', function () {
  return (
    /*#__PURE__*/
    React.createElement(Sizes, null)
  );
}).add('Docs site Taglines', function () {
  return (
    /*#__PURE__*/
    React.createElement(Taglines, null)
  );
});
//# sourceMappingURL=storybook-stories.js.map