{"version":3,"sources":["webpack:///./src/pages/mt/patterns/action-group/develop.js","webpack:///./src/images/embedded-act-group.png","webpack:///./src/images/persistent-act-group.png"],"names":["props","code","site","data","slug","state","title","exclusive","complete","category","class","className","to","text","href","width","src","embedded","alt","persistent","module","exports"],"mappings":"6FAAA,8GAOe,mBAAAA,GACb,IAAMC,EACU,iZADVA,EAgBO,4RAhBPA,EA0Bc,sVA1BdA,EAsCO,iSAqBb,OACE,oCACE,kBAAC,IAAD,CACEC,KAAMC,EAAKD,KACXE,KAAMD,EAAKC,KAAO,YAClBC,MAAM,UACNC,MAAOH,EAAKG,MACZC,WAAW,IAEb,kBAAC,IAAD,CACEC,UAAU,EACVC,SAAS,WACTP,KAAMC,EAAKD,KACXE,KAAMD,EAAKC,KAAO,YAClBC,MAAM,UACNC,MAAOH,EAAKG,OAEZ,yBAAKI,MAAM,SACT,iKAEmE,IACjE,kBAAC,OAAD,CAAMC,UAAU,OAAOC,GAAG,kCAA1B,UAEQ,IALV,gBAMgB,IACd,kBAAC,OAAD,CAAMD,UAAU,OAAOC,GAAG,+BAA1B,QAPF,MAaF,kBAAC,IAAD,cAiBA,kBAAC,IAAD,CACEV,KAAMC,EAAKD,KACXI,MAAM,cACNO,KACE,+JAKFZ,KAAMA,GAEN,yBAAKS,MAAM,kBACT,yBAAKA,MAAM,oCACT,4BAAQA,MAAM,mCAAd,UACA,4BAAQA,MAAM,4CAAd,eAMN,kBAAC,IAAD,CACER,KAAMC,EAAKD,KACXI,MAAM,wBACNO,KACE,0QAQFZ,KAAMA,GAEN,yBAAKS,MAAM,kBACT,yBAAKA,MAAM,oCACT,4BAAQA,MAAM,4CAAd,cAIF,yBAAKA,MAAM,kCACT,4BAAQA,MAAM,mCAAd,iBAMN,kBAAC,IAAD,CACER,KAAMC,EAAKD,KACXI,MAAM,gBACNO,KAAK,6GACLZ,KAAMA,GAEN,yBAAKS,MAAM,kBACT,yBAAKA,MAAM,oCACT,4BAAQA,MAAM,4CAAd,cAIF,yBAAKA,MAAM,kCACT,uBAAGI,KAAK,KAAKJ,MAAM,UAAnB,iBAON,kBAAC,IAAD,CACER,KAAMC,EAAKD,KACXI,MAAM,qBACNO,KACE,0LAMFZ,KAAMA,GAEN,yBAAKS,MAAM,kBACT,yBAAKA,MAAM,oCACT,4BAAQA,MAAM,mCAAd,aACA,4BAAQA,MAAM,4CAAd,aAIF,yBAAKA,MAAM,kCACT,uBAAGI,KAAK,KAAKJ,MAAM,UAAnB,cAMN,kBAAC,IAAD,CACER,KAAMC,EAAKD,KACXI,MAAM,+BACNO,KACE,oSASFZ,KAAMA,GAEN,yBAAKS,MAAM,kBACT,yBAAKA,MAAM,oCACT,4BAAQA,MAAM,4CAAd,cAIF,yBAAKA,MAAM,kCACT,4BAAQA,MAAM,mCAAd,eAIF,yBAAKA,MAAM,kCACT,uBAAGI,KAAK,KAAKJ,MAAM,UAAnB,cAMN,6BACA,kBAAC,IAAD,2BACA,6IAE6C,IAC3C,kBAAC,OAAD,CACEC,UAAU,OACVC,GAAI,IAAMT,EAAKD,KAAO,iCAFxB,aAKQ,IARV,mJAcA,kBAAC,IAAD,CACEA,KAAMC,EAAKD,KACXI,MAAM,WACNO,KAAK,+FAEL,yBACEE,MAAM,MACNC,IAAKC,IACLC,IAAI,yCAIR,kBAAC,IAAD,CACEhB,KAAMC,EAAKD,KACXI,MAAM,aACNO,KACE,yPAIgC,IAC9B,kBAAC,OAAD,CACEH,MAAM,OACNE,GAAI,IAAMT,EAAKD,KAAO,6BAFxB,UALF,yJAiBF,yBACEa,MAAM,MACNC,IAAKG,IACLD,IAAI,2CAGR,iC,qBCxSRE,EAAOC,QAAU,IAA0B,kE,yRCA3CD,EAAOC,QAAU,IAA0B","file":"component---src-pages-mt-patterns-action-group-develop-js-57defdfe5dadbeee9ea8.js","sourcesContent":["import React from 'react'\nimport { Layout, Header, Showcase, SectionTitle } from '../../../../components'\nimport { Link } from 'gatsby'\nimport data from './data.json'\nimport persistent from '../../../../images/persistent-act-group.png'\nimport embedded from '../../../../images/embedded-act-group.png'\n\nexport default props => {\n  const code = {\n    twoButtonLink: `<div class=\"p-action-group\">\n  <div class=\"p-action-group__button-container\">\n    <button class=\"c-button p-action-group__button\">\n      Button Text\n    </button>\n  <button class=\"c-button--primary p-action-group__button\">\n      Button Text\n    </button>\n  </div>\n  <div class=\"p-action-group__link-container\">\n    <a href=\"/#\" class=\"c-link\">\n      Link Text\n    </a>\n  </div>\n</div>`,\n    dualButton: `<div class=\"p-action-group\">\n  <div class=\"p-action-group__button-container\">\n    <button class=\"c-button p-action-group__button\">\n      Button Text\n    </button>\n    <button class=\"c-button--primary p-action-group__button\">\n      Button Text\n    </button>\n  </div>\n</div>`,\n    dualButtonStacked: `<div class=\"p-action-group\">\n  <div class=\"p-action-group__button-container\">\n    <button class=\"c-button--primary p-action-group__button\">\n      Button Text\n    </button>\n  </div>\n  <div class=\"p-action-group__button-container\">\n  <button class=\"c-button p-action-group__button\">\n      Button Text\n    </button>\n  </div>\n</div>`,\n    buttonLink: `<div class=\"p-action-group\">\n  <div class=\"p-action-group__button-container\">\n      <button class=\"c-button--primary p-action-group__button\">Button Text</button>\n  </div>\n  <div class=\"p-action-group__link-container\">\n      <a href=\"\" class=\"c-link\">Link Text</a>\n  </div>\n</div>`,\n    twoButton: `<div class=\"p-action-group\">\n  <div class=\"p-action-group__button-container\">\n      <button class=\"c-button p-action-group__button\">Button Text</button>\n      <button class=\"c-button--primary p-action-group__button\">Button Text</button>\n  </div>\n</div>`,\n    button: `<div class=\"p-action-group\">\n  <div class=\"p-action-group__button-container\">\n      <button class=\"c-button--primary p-action-group__button\">Button Text</button>\n  </div>\n</div>`,\n  }\n\n  return (\n    <>\n      <Header\n        site={data.site}\n        slug={data.slug + '/develop/'}\n        state=\"develop\"\n        title={data.title}\n        exclusive={true}\n      />\n      <Layout\n        complete={true}\n        category=\"Overview\"\n        site={data.site}\n        slug={data.slug + '/develop/'}\n        state=\"develop\"\n        title={data.title}\n      >\n        <div class=\"intro\">\n          <p>\n            Action groups are a common way to present actions that apply to an\n            entire page or parent element. The pattern includes at least one{' '}\n            <Link className=\"link\" to=\"/mt/components/button/develop/\">\n              button\n            </Link>{' '}\n            and up to one{' '}\n            <Link className=\"link\" to=\"/mt/components/link/develop\">\n              link\n            </Link>\n            .\n          </p>\n        </div>\n        <SectionTitle>Usage</SectionTitle>\n\n        {/* <Showcase\n          site={data.site}\n          title=\"Single\"\n          text=\"Used when there is only one action that applies to the page or parent element.\"\n          code={code.button}\n        >\n          <div class=\"p-action-group\">\n            <div class=\"p-action-group__button-container\">\n              <button class=\"c-button--primary p-action-group__button\">\n                Button Text\n              </button>\n            </div>\n          </div>\n        </Showcase> */}\n\n        <Showcase\n          site={data.site}\n          title=\"Dual Button\"\n          text={\n            <p>\n              Used when there are two actions that apply to the page or parent\n              element and when the buttons are small enough to appear inline.\n            </p>\n          }\n          code={code.dualButton}\n        >\n          <div class=\"p-action-group\">\n            <div class=\"p-action-group__button-container\">\n              <button class=\"c-button p-action-group__button\">Cancel</button>\n              <button class=\"c-button--primary p-action-group__button\">\n                Continue\n              </button>\n            </div>\n          </div>\n        </Showcase>\n        <Showcase\n          site={data.site}\n          title=\"Dual Button (Stacked)\"\n          text={\n            <p>\n              Used when there are two actions that apply to the page or parent\n              element but button width precludes inline treatement. This variant\n              is preferred at smaller breakpoints but should not be used in\n              full-width layouts at larger breakpoints.\n            </p>\n          }\n          //note=\"Due to the height of the container, stacked action group treatments generally should not be persistent.\"\n          code={code.dualButtonStacked}\n        >\n          <div class=\"p-action-group\">\n            <div class=\"p-action-group__button-container\">\n              <button class=\"c-button--primary p-action-group__button\">\n                Apply Now\n              </button>\n            </div>\n            <div class=\"p-action-group__link-container\">\n              <button class=\"c-button p-action-group__button\">\n                Learn More\n              </button>\n            </div>\n          </div>\n        </Showcase>\n        <Showcase\n          site={data.site}\n          title=\"Button + Link\"\n          text=\"Used to present a navigational link along with a single action that applies to the page or parent element.\"\n          code={code.buttonLink}\n        >\n          <div class=\"p-action-group\">\n            <div class=\"p-action-group__button-container\">\n              <button class=\"c-button--primary p-action-group__button\">\n                Apply Now\n              </button>\n            </div>\n            <div class=\"p-action-group__link-container\">\n              <a href=\"/#\" class=\"c-link\">\n                Learn more\n              </a>\n            </div>\n          </div>\n        </Showcase>\n\n        <Showcase\n          site={data.site}\n          title=\"Dual Button + Link\"\n          text={\n            <p>\n              Used to present a navigational link along with two actions that\n              apply to the page or parent element and when the buttons are small\n              enough to appear inline.\n            </p>\n          }\n          code={code.twoButtonLink}\n        >\n          <div class=\"p-action-group\">\n            <div class=\"p-action-group__button-container\">\n              <button class=\"c-button p-action-group__button\">Edit User</button>\n              <button class=\"c-button--primary p-action-group__button\">\n                Add User\n              </button>\n            </div>\n            <div class=\"p-action-group__link-container\">\n              <a href=\"/#\" class=\"c-link\">\n                Go back\n              </a>\n            </div>\n          </div>\n        </Showcase>\n        <Showcase\n          site={data.site}\n          title=\"Dual Button + Link (Stacked)\"\n          text={\n            <p>\n              Used to present a navigational link along with two actions that\n              apply to the page or parent element but button width precludes\n              inline treatment. This variant is preferred at smaller breakpoints\n              but should not be used in full-width layouts at larger\n              breakpoints.\n            </p>\n          }\n          //note=\"Due to the height of the container, stacked action group treatments generally should not be persistent.\"\n          code={code.twoButtonLink}\n        >\n          <div class=\"p-action-group\">\n            <div class=\"p-action-group__button-container\">\n              <button class=\"c-button--primary p-action-group__button\">\n                Apply Now\n              </button>\n            </div>\n            <div class=\"p-action-group__link-container\">\n              <button class=\"c-button p-action-group__button\">\n                Learn More\n              </button>\n            </div>\n            <div class=\"p-action-group__link-container\">\n              <a href=\"/#\" class=\"c-link\">\n                Go back\n              </a>\n            </div>\n          </div>\n        </Showcase>\n        <hr />\n        <SectionTitle>Design Environment</SectionTitle>\n        <p>\n          When there is no overflow at the bottom of the screen, action groups\n          will appear embedded below and at the same{' '}\n          <Link\n            className=\"link\"\n            to={'/' + data.site + '/guidelines/elevation/develop'}\n          >\n            elevation\n          </Link>{' '}\n          as the parent content they act on. When there is overflow, the action\n          group can be displayed in either the embedded or the persistent\n          position.\n        </p>\n\n        <Showcase\n          site={data.site}\n          title=\"Embedded\"\n          text=\"Used to reveal the action group only once the user has scrolled through the parent content.\"\n        >\n          <img\n            width=\"50%\"\n            src={embedded}\n            alt=\"screenshot of embedded action group\"\n          />\n        </Showcase>\n\n        <Showcase\n          site={data.site}\n          title=\"Persistent\"\n          text={\n            <p>\n              Used to continuously show the action group on an elevated plane\n              while the user is scrolling through the parent content. The\n              container is fixed to the bottom of the parent element, fills the\n              full width, and uses a medium{' '}\n              <Link\n                class=\"link\"\n                to={'/' + data.site + '/utilities/shadow/develop'}\n              >\n                shadow\n              </Link>\n              . Consider the amount of screen space the stacked dual button and\n              stacked dual button + link variants take up before using the\n              persistent placement.\n            </p>\n          }\n        >\n          <img\n            width=\"50%\"\n            src={persistent}\n            alt=\"screenshot of persistent action group\"\n          />\n        </Showcase>\n        <hr />\n      </Layout>\n    </>\n  )\n}\n","module.exports = __webpack_public_path__ + \"static/embedded-act-group-839bee279e0d0fb26cf65e40e490d901.png\";","module.exports = __webpack_public_path__ + \"static/persistent-act-group-7af7fe958644e9711a74ea409e5077ad.png\";"],"sourceRoot":""}