{"version":3,"sources":["webpack:///./src/pages/wt/layout/container/develop.js"],"names":["title","data","site","state","slug","category","changelog","updated","lastUpdated","class","to","text","code","container","sticky"],"mappings":"wHAAA,iIAce,qBACb,OACE,oCACE,kBAAC,IAAD,CACEA,MAAOC,EAAKD,MACZE,KAAMD,EAAKC,KACXC,MAAM,UACNC,KAAMH,EAAKG,KAAO,cAEpB,kBAAC,IAAD,CACEC,SAAUJ,EAAKI,SACfC,UAAWA,EAAUL,EAAKD,OAAOM,UACjCJ,KAAMD,EAAKC,KACXE,KAAMH,EAAKG,KAAO,YAClBD,MAAM,UACNH,MAAOC,EAAKD,MACZO,QAASD,EAAUL,EAAKD,OAAOQ,aAE/B,kBAAC,IAAD,KACE,+OAIa,IACX,kBAAC,OAAD,CACEC,MAAM,OACNC,GAAI,IAAMT,EAAKC,KAAO,mCAFxB,eALF,mHAeF,kBAAC,IAAD,cACA,kBAAC,IAAD,CACEA,KAAMD,EAAKC,KACXF,MAAM,YACNW,KAAK,mOACLC,KAAMA,EAAKC,WAEX,yBAAKJ,MAAM,eAAX,iFAKF,kBAAC,IAAD,oBA2HD,IAAMG,EAAO,CAClBC,UAAU,wDAGVC,OAAO,4K","file":"component---src-pages-wt-layout-container-develop-js-9819e86c93c0d07348d6.js","sourcesContent":["import React from 'react'\nimport { Link } from 'gatsby'\nimport {\n  Layout,\n  Showcase,\n  Intro,\n  Header,\n  SectionTitle,\n} from '../../../../components'\n\nimport './style.scss'\nimport data from './data.json'\nimport changelog from '../../../../data/changelog.json'\n\nexport default () => {\n  return (\n    <>\n      <Header\n        title={data.title}\n        site={data.site}\n        state=\"develop\"\n        slug={data.slug + '/develop/'}\n      />\n      <Layout\n        category={data.category}\n        changelog={changelog[data.title].changelog}\n        site={data.site}\n        slug={data.slug + '/develop/'}\n        state=\"develop\"\n        title={data.title}\n        updated={changelog[data.title].lastUpdated}\n      >\n        <Intro>\n          <p>\n            The container is the blank space within which you will design and\n            build your layout. It can be used as needed to best display a page's\n            content. The container is bounded by the breakpoints defined in\n            Currency's{' '}\n            <Link\n              class=\"link\"\n              to={'/' + data.site + '/guidelines/grid-system/develop'}\n            >\n              grid system\n            </Link>\n            . They do not contain any built-in margin or padding considerations\n            to allow for flexibility between products.\n          </p>\n        </Intro>\n        <SectionTitle>Usage</SectionTitle>\n        <Showcase\n          site={data.site}\n          title=\"Container\"\n          text=\"Use the container as needed to build the designed layout. Containers are defined as min-width attributes. Screen sizes in between two defined breakpoint dimensions will inherit all dimensions of the breakpoint one size down.\"\n          code={code.container}\n        >\n          <div class=\"l-container\">\n            The container is the blank space that constrains the elements of the\n            design.\n          </div>\n        </Showcase>\n        <SectionTitle>Variants</SectionTitle>\n        {/* <Showcase\n          site={data.site}\n          title=\"Sticky Footer\"\n          text=\"This frequently used layout structure creates consistency and predictability in how designs are presented across many M&T experiences. The standard placement of the Header and Footer patterns frames the space for body content.\"\n          code={code.sticky}\n        >\n          <div class=\"l-container\">\n            <header class=\"p-main-header\">\n              <div class=\"p-main-header__logo\">\n                <svg height=\"21px\" viewBox=\"0 0 182 33\" version=\"1.1\">\n                  <title>mtb-svg-sprite</title>\n                  <desc>Created with Sketch.</desc>\n                  <defs />\n                  <g\n                    id=\"Page-1\"\n                    stroke=\"none\"\n                    stroke-width=\"1\"\n                    fill=\"none\"\n                    fill-rule=\"evenodd\"\n                    F\n                  >\n                    <g\n                      id=\"Artboard\"\n                      transform=\"translate(-1.000000, 0.000000)\"\n                      fill-rule=\"nonzero\"\n                      fill=\"#FFFFFF\"\n                    >\n                      <g\n                        id=\"mtb-svg-sprite\"\n                        transform=\"translate(1.000000, 0.000000)\"\n                      >\n                        <g id=\"svg-mtb-logo\">\n                          <path\n                            d=\"M112.16,15.72 C115.82,14.89 118.18,12.25 118.18,8.21 C118.18,3.3 114.98,0.01 108.36,0.01 L97.66,0.01 L97.66,32.45 L108.73,32.45 C115.63,32.45 119.34,29.21 119.34,23.69 C119.34,19.28 116.7,16.46 112.16,15.72 Z M99.7,1.68 L108.32,1.68 C113.56,1.68 116.06,4.23 116.06,8.35 C116.06,12.47 113.56,14.98 108.32,14.98 L99.7,14.98 L99.7,1.68 Z M108.64,30.78 L99.7,30.78 L99.7,16.64 L108.64,16.64 C114.43,16.64 117.21,19.28 117.21,23.68 C117.21,28.13 114.43,30.78 108.64,30.78 Z M130.97,9.37 C126.71,9.37 123.65,11.73 122.54,15.16 L124.3,15.72 C125.46,12.52 127.87,10.95 130.97,10.95 C134.86,10.95 137.09,12.8 137.09,17.67 L137.09,18.97 L134.12,19.11 C124.16,19.43 121.33,22.54 121.33,26.48 C121.33,30.51 124.57,33.01 128.88,33.01 C132.68,33.01 135.6,31.2 137.08,27.96 L137.08,32.46 L139.03,32.46 L139.03,18.13 C139.04,12.06 136.07,9.37 130.97,9.37 Z M137.09,23.69 C137.09,28 134.03,31.43 129.12,31.43 C125.69,31.43 123.33,29.44 123.33,26.47 C123.33,23.32 125.51,20.82 134.22,20.54 L137.09,20.45 L137.09,23.69 Z M153.17,9.37 C149.05,9.37 145.99,12.01 144.6,15.67 L144.6,9.92 L142.61,9.92 L142.61,32.44 L144.6,32.44 L144.6,21.14 C144.6,15.16 147.94,11.04 152.8,11.04 C156.6,11.04 158.55,13.31 158.55,17.76 L158.55,32.45 L160.54,32.45 L160.54,17.34 C160.54,12.52 157.94,9.37 153.17,9.37 Z\"\n                            id=\"Shape\"\n                          />\n                          <polygon\n                            id=\"Shape\"\n                            points=\"172.5 18.77 180.6 9.92 178.2 9.92 166.1 23.27 166.1 0.01 164.11 0.01 164.11 32.44 166.1 32.44 166.1 25.68 171.2 20.16 179.63 32.44 181.9 32.44\"\n                          />\n                          <path\n                            d=\"M63.24,8.75 L65.22,8.75 C65.22,8.75 65.2,1.66 71.68,1.66 L73.65,1.66 L73.65,30.78 L70.55,30.78 C68.57,30.59 66.92,29.31 65.33,27.8 L63,25.55 C63.51,24.86 64.18,23.82 64.66,22.73 C65.2,21.5 65.59,19.18 65.83,18.6 C65.91,18.41 66,18.23 66.11,18.06 C66.42,17.58 66.93,17.17 67.46,16.94 C67.86,16.77 68.35,16.65 68.79,16.65 L69.09,16.65 L69.09,14.97 L59.38,14.97 L59.38,16.65 L60.04,16.65 C61.81,16.66 63.25,18.09 63.25,19.89 C63.25,22.2 61.52,24.1 61.52,24.1 L52.64,15.48 C56.6,14.04 59.94,12.06 59.94,8.33 C59.94,4.41 56.95,1.65 51.55,1.65 C46.07,1.65 42.42,4.68 42.42,9.57 C42.42,12.79 43.9,14.89 45.33,16.33 C40.83,18.08 38.15,20.37 38.15,24.56 C38.15,30.46 43.47,32.83 49.38,32.83 C53.26,32.83 56.53,31.66 59.05,29.8 C59.09,29.77 60.73,32.44 65.57,32.44 C65.92,32.44 84,32.43 84,32.43 L84,30.77 L80.45,30.77 L80.45,1.65 L82.42,1.65 C88.88,1.65 88.88,8.74 88.88,8.74 L90.86,8.74 L90.86,0.01 L63.24,0.01 L63.24,8.75 Z M51.35,3.31 C53.49,3.31 54.81,5.03 54.81,7.48 C54.81,10.2 53.6,12.54 51,13.94 C49.33,12.31 47.89,10.09 47.89,7.41 C47.89,4.99 49.21,3.31 51.35,3.31 Z M51.15,30.02 C47.31,30.02 44.43,27.18 44.43,23.37 C44.43,20.69 45.05,19.06 46.84,17.9 L57.56,28.42 C55.81,29.63 53.56,30.02 51.15,30.02 Z M34.85,1.66 L38.69,1.66 L38.69,0 L28.34,0 C28.34,0 19.78,21.39 19.5,22.08 C19.23,21.39 10.62,0 10.62,0 L0,0 L0,1.66 L3.84,1.66 L3.84,30.78 L0.66,30.78 L0.66,32.44 L10.03,32.44 L10.03,30.78 L5.87,30.78 L5.87,5.38 C6.36,6.61 16.31,31.71 16.31,31.71 L17.99,31.71 C17.99,31.71 27.81,6.62 28.29,5.38 C28.29,6.74 28.28,30.79 28.28,30.79 L25.02,30.79 L25.02,32.44 L38.14,32.44 L38.14,30.79 L34.86,30.79 L34.86,1.66 L34.85,1.66 Z\"\n                            id=\"Shape\"\n                          />\n                        </g>\n                      </g>\n                    </g>\n                  </g>\n                </svg>\n              </div>\n            </header>\n            <div class=\"l-container__content\">\n              <p class=\"c-text-content\">\n                Donec id elit non mi porta gravida at eget metus. Cras justo\n                odio, dapibus ac facilisis in, egestas eget quam. Cras mattis\n                consectetur purus sit amet fermentum. Maecenas sed diam eget\n                risus varius blandit sit amet non magna. Nullam id dolor id nibh\n                ultricies vehicula ut id elit. Fusce dapibus, tellus ac cursus\n                commodo, tortor mauris condimentum nibh, ut fermentum massa\n                justo sit amet risus.\n              </p>\n            </div>\n            <footer class=\"p-main-footer l-container__footer\">\n              <div class=\"p-main-footer__content\">\n                <p class=\"p-main-footer__paragraph--first\">\n                  © 2019 M&amp;T Bank. All rights reserved. Users of this\n                  website agree to be bound by the provisions of the M&amp;T\n                  website{' '}\n                  <a\n                    href=\"https://www.mtb.com/help-center/policies/terms-of-use\"\n                    target=\"_blank\"\n                    rel=\"noreferrer\"\n                    class=\"p-main-footer__link\"\n                  >\n                    Terms of Use\n                  </a>{' '}\n                  and{' '}\n                  <a\n                    href=\"https://www.mtb.com/help-center/policies/privacy-policy\"\n                    target=\"_blank\"\n                    rel=\"noreferrer\"\n                    class=\"p-main-footer__link\"\n                  >\n                    Privacy\n                  </a>\n                  .\n                </p>\n                <div class=\"p-main-footer__images\">\n                  <svg\n                    width=\"65px\"\n                    height=\"59px\"\n                    viewBox=\"0 0 65 59\"\n                    version=\"1.1\"\n                  >\n                    <g\n                      id=\"Symbols\"\n                      stroke=\"none\"\n                      stroke-width=\"1\"\n                      fill=\"none\"\n                      fill-rule=\"evenodd\"\n                    >\n                      <g id=\"Artboard\" fill=\"#787878\">\n                        <path\n                          d=\"M33.22552,15 L13,26.5103097 L13,30.6698474 L16.098522,30.6698474 L16.098522,44.9721261 L49.8451281,44.9721261 L49.8451281,30.6698474 L53,30.6698474 L53,26.6242136 L33.22552,15 Z M20.2101382,26.9697782 L33.2240751,19.3343668 L45.9565034,26.9697782 L45.9565034,41.3288884 L20.2101382,41.3288884 L20.2101382,26.9697782 Z M26.30267,32.4376449 L39.7671653,32.4376449 L39.7671653,28.9049396 L26.30267,28.9049396 L26.30267,32.4376449 Z M26.30267,37.6991361 L39.7671653,37.6991361 L39.7671653,34.1661901 L26.30267,34.1661901 L26.30267,37.6991361 Z\"\n                          id=\"Page-1-Copy\"\n                        />\n                      </g>\n                    </g>\n                  </svg>\n                </div>\n                <p class=\"p-main-footer__paragraph--last\">\n                  Equal Housing Lender. M&amp;T Bank, Member FDIC.\n                </p>\n              </div>\n            </footer>\n          </div>\n        </Showcase> */}\n      </Layout>\n    </>\n  )\n}\n\nexport const code = {\n  container: `<div class=\"l-container\">\n      Content Here\n</div>`,\n  sticky: `<div class=\"l-container\">\n  <div class=\"l-container__content\">\n    Content Here\n  </div>\n  <div class=\"l-container__footer\">\n    Footer Here\n  </div>\n</div>\n  `,\n}\n"],"sourceRoot":""}