@leafygreen-ui/marketing-modal
leafyGreen UI Kit Marketing Modal
Last updated a month ago by michael.mitchell .
Apache-2.0 · Original npm · Tarball · package.json
$ cnpm install @leafygreen-ui/marketing-modal 
SYNC missed versions from official npm registry.

Marketing Modal

npm (scoped)

View on Storybook

Installation

Yarn

yarn add @leafygreen-ui/marketing-modal

NPM

npm install @leafygreen-ui/marketing-modal

Example

function Example() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <button onClick={() => setOpen(!open)}>Open Modal</button>
      <MarketingModal
        open={open}
        onButtonClick={() => setOpen(false)}
        onLinkClick={() => setOpen(false)}
        onClose={() => setOpen(false)}
        title="Introducing New Feature!"
        graphic={
          <img alt="" src="examples/DataLake.png" width={275} height={220} />
        }
        graphicStyle={ImageStyle.Center}
        buttonText="Okay"
        linkText="Cancel"
      >
        This is some description text, and it is extra long so it fills up this
        modal. Another thing about the modals here.
      </MarketingModal>
    </>
  );
}

Output HTML

<button>Open Modal</button>
<div aria-modal="true" role="dialog" tabindex="-1" class="leafygreen-ui-4ltwxx">
  <button
    tabindex="0"
    aria-disabled="false"
    aria-label="Close modal"
    class="leafygreen-ui-zndd6x"
  >
    <div class="leafygreen-ui-xhlipt">
      <svg
        class="leafygreen-ui-19fdo3o"
        height="20"
        width="20"
        viewBox="0 0 16 16"
        role="img"
      >
        <g
          id="X-Copy"
          stroke="none"
          stroke-width="1"
          fill="none"
          fill-rule="evenodd"
        >
          <path
            d="M9,7 L13.5,7 L13.5,9 L9,9 L9,13.5 L7,13.5 L7,9 L2.5,9 L2.5,7 L7,7 L7,2.5 L9,2.5 L9,7 Z"
            id="Combined-Shape-Copy"
            fill="currentColor"
            transform="translate(8.000000, 8.000000) rotate(45.000000) translate(-8.000000, -8.000000) "
          ></path>
        </g>
      </svg>
    </div>
  </button>
  <div class="leafygreen-ui-ex1gyf">
    <img alt="" src="examples/DataLake.png" width="275" height="220" />
  </div>
  <div class="leafygreen-ui-8fcqkd">
    <div class="leafygreen-ui-1dhn1u9">Introducing New Feature!</div>
    This is some description text, and it is extra long so it fills up this
    modal. Another thing about the modals here.
  </div>
  <div class="leafygreen-ui-1xfya45">
    <button type="button" class="leafygreen-ui-1p9g0i2" aria-disabled="false">
      <span class="leafygreen-ui-1cpk24m">Okay</span></button
    ><span
      target="_blank"
      class="leafygreen-ui-1ouyicz"
      data-leafygreen-ui="anchor-container"
      tabindex="0"
      ><span class="leafygreen-ui-13nqixy">Cancel</span></span
    >
  </div>
</div>

Properties

Prop Type Description Default
open boolean Determines open state of Modal component false
onButtonClick function Callback that fires when the primary button is clicked. This can be used to set the modal to be closed. () => {}
onLinkClick function Callback that fires when the secondary link is clicked. This can be used to set the modal to be closed. () => {}
onClose function Callback that fires when the cancel button, x button, or backdrop is clicked. This can be used to set the modal to be closed. () => {}
graphic React.ReactElement Element to be used as the main graphic of the modal.
graphicStyle 'center' | 'fill' Determines how the main graphic should be displayed in the modal. 'center'
children node Children that will be rendered inside <ConfirmationModal /> component.
buttonText string Text content of the confirmation button.
linkText string Text content of the alternate action link.
className string Style to be applied to the container's root node.

Current Tags

  • 2.0.5                                ...           latest (a month ago)

9 Versions

  • 2.0.5                                ...           a month ago
  • 2.0.4                                ...           a month ago
  • 2.0.3                                ...           2 months ago
  • 2.0.2                                ...           3 months ago
  • 2.0.1                                ...           3 months ago
  • 2.0.0                                ...           3 months ago
  • 1.0.2                                ...           3 months ago
  • 1.0.1                                ...           4 months ago
  • 1.0.0                                ...           4 months ago
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 27
Dev Dependencies (0)
None
Dependents (0)
None

Copyright 2014 - 2017 © taobao.org |