{"version":3,"sources":["webpack:///./src/pages/mt/components/text-content/design.js"],"names":["site","data","slug","state","title","exclusive","className","class","code"],"mappings":"mbAAA,yGAMe,qBACb,OACE,oCACE,kBAAC,IAAD,CACEA,KAAMC,EAAKD,KACXE,KAAMD,EAAKC,KAAO,WAClBC,MAAM,SACNC,MAAOH,EAAKG,MACZC,WAAW,IAEb,kBAAC,IAAD,CACEL,KAAMC,EAAKD,KACXE,KAAMD,EAAKC,KAAO,WAClBC,MAAM,SACNC,MAAOH,EAAKG,OAEZ,kBAAC,IAAD,KACE,kLAMF,kBAAC,IAAD,iBACA,yBAAKE,UAAU,yCAAf,kBAGA,2IAIA,2BAAOC,MAAM,kBACX,+BACE,iCACA,sCACA,qCACA,2CACA,sCAEF,+BACE,4BACE,4BACE,uBAAGA,MAAM,+BAAT,2BAIF,6CACA,oCACA,wBAAIA,MAAM,+BAAV,cACa,wCACX,6BAFF,gBAGe,yCAEf,wBAAIA,MAAM,yBAAV,6CAIF,wBAAIA,MAAM,4BACR,4BACE,uBAAGA,MAAM,8BAAT,0BAEF,6CACA,oCACA,wBAAIA,MAAM,+BAAV,cACa,wCACX,6BAFF,gBAGe,yCAEf,wBAAIA,MAAM,yBAAV,+DAMN,yBAAKD,UAAU,yCAAf,QACA,0DACA,2BAAOC,MAAM,kBACX,+BACE,4BACE,4BACE,uBAAGA,MAAM,+BAAT,kBAEF,wCACA,oCACA,wBAAIA,MAAM,+BAAV,cACa,wCACX,6BAFF,gBAGe,yCAEf,wBAAIA,MAAM,yBAAV,uCAIF,wBAAIA,MAAM,4BACR,4BACE,uBAAGA,MAAM,8BAAT,iBAEF,wCACA,oCACA,wBAAIA,MAAM,+BAAV,cACa,wCACX,6BAFF,gBAGe,yCAEf,wBAAIA,MAAM,yBAAV,yDAMN,yBAAKD,UAAU,yCAAf,WACA,wHAIA,2BAAOC,MAAM,kBACX,+BACE,4BACE,4BACE,uBAAGA,MAAM,kCAAT,qBAEF,wCACA,oCACA,wBAAIA,MAAM,+BAAV,cACa,wCACX,6BAFF,gBAGe,yCAEf,wBAAIA,MAAM,yBAAV,sCAIF,wBAAIA,MAAM,4BACR,4BACE,uBAAGA,MAAM,kCAAT,qBAEF,wCACA,uCACA,wBAAIA,MAAM,+BAAV,cACa,wCACX,6BAFF,gBAGe,yCAEf,wBAAIA,MAAM,yBAAV,qCAIF,wBAAIA,MAAM,8BACR,4BACE,uBAAGA,MAAM,iCAAT,oBAEF,wCACA,oCACA,wBAAIA,MAAM,+BAAV,cACa,wCACX,6BAFF,gBAGe,yCAEf,wBAAIA,MAAM,yBAAV,wDAMN,6BACA,kBAAC,IAAD,2BACA,2TAYD,IAAMC,EAAO,I","file":"component---src-pages-mt-components-text-content-design-js-fd9b07bc20b2a6b914e0.js","sourcesContent":["import React from 'react'\n\nimport './style.scss'\nimport data from './data.json'\nimport { Layout, SectionTitle, Intro, Header } from '../../../../components'\n\nexport default () => {\n  return (\n    <>\n      <Header\n        site={data.site}\n        slug={data.slug + '/design/'}\n        state=\"design\"\n        title={data.title}\n        exclusive={true}\n      />\n      <Layout\n        site={data.site}\n        slug={data.slug + '/design/'}\n        state=\"design\"\n        title={data.title}\n      >\n        <Intro>\n          <p>\n            Text content communicates the main information in any given layout.\n            It can be used for anything from a couple of words to long\n            description fields.\n          </p>\n        </Intro>\n        <SectionTitle>Variants</SectionTitle>\n        <div className=\"showcase__title l-margin-top--xxlarge\">\n          Lead Paragraph\n        </div>\n        <p>\n          Use to emphasize the opening paragraph of a page that summarizes its\n          main ideas. Appears only once per page.\n        </p>\n        <table class=\"showcase-table\">\n          <thead>\n            <th> </th>\n            <th>Weight</th>\n            <th>Color</th>\n            <th>Font Values</th>\n            <th>Usage</th>\n          </thead>\n          <tbody>\n            <tr>\n              <td>\n                <p class=\"c-text-content-lead--normal\">\n                  LeadParagraph / Normal\n                </p>\n              </td>\n              <td>SemiLight 200</td>\n              <td>#333</td>\n              <td class=\"showcase-table__font-values\">\n                font-size: <strong>20px</strong>\n                <br />\n                line-height: <strong>30px</strong>\n              </td>\n              <td class=\"showcase-table__usage\">\n                For lead paragraphs on light backgrounds\n              </td>\n            </tr>\n            <tr class=\"showcase-table__dark-row\">\n              <td>\n                <p class=\"c-text-content-lead--light\">LeadParagraph / Light</p>\n              </td>\n              <td>SemiLight 200</td>\n              <td>#FFF</td>\n              <td class=\"showcase-table__font-values\">\n                font-size: <strong>20px</strong>\n                <br />\n                line-height: <strong>30px</strong>\n              </td>\n              <td class=\"showcase-table__usage\">\n                For lead paragraphs on dark or primary green backgrounds\n              </td>\n            </tr>\n          </tbody>\n        </table>\n        <div className=\"showcase__title l-margin-top--xxlarge\">Body</div>\n        <p>Use for standard body copy.</p>\n        <table class=\"showcase-table\">\n          <tbody>\n            <tr>\n              <td>\n                <p class=\"c-text-content-body--normal\">Body / Normal</p>\n              </td>\n              <td>Book 300</td>\n              <td>#333</td>\n              <td class=\"showcase-table__font-values\">\n                font-size: <strong>16px</strong>\n                <br />\n                line-height: <strong>24px</strong>\n              </td>\n              <td class=\"showcase-table__usage\">\n                For body copy on light backgrounds\n              </td>\n            </tr>\n            <tr class=\"showcase-table__dark-row\">\n              <td>\n                <p class=\"c-text-content-body--light\">Body / Light</p>\n              </td>\n              <td>Book 300</td>\n              <td>#FFF</td>\n              <td class=\"showcase-table__font-values\">\n                font-size: <strong>16px</strong>\n                <br />\n                line-height: <strong>24px</strong>\n              </td>\n              <td class=\"showcase-table__usage\">\n                For body copy on dark or primary green backgrounds\n              </td>\n            </tr>\n          </tbody>\n        </table>\n        <div className=\"showcase__title l-margin-top--xxlarge\">Caption</div>\n        <p>\n          Use for styling secondary or supporting information, especially in\n          forms and disclaimers.\n        </p>\n        <table class=\"showcase-table\">\n          <tbody>\n            <tr>\n              <td>\n                <p class=\"c-text-content-caption--normal\">Caption / Normal</p>\n              </td>\n              <td>Book 300</td>\n              <td>#333</td>\n              <td class=\"showcase-table__font-values\">\n                font-size: <strong>12px</strong>\n                <br />\n                line-height: <strong>18px</strong>\n              </td>\n              <td class=\"showcase-table__usage\">\n                For captions on light backgrounds\n              </td>\n            </tr>\n            <tr class=\"showcase-table__dark-row\">\n              <td>\n                <p class=\"c-text-content-caption--subtle\">Caption / Subtle</p>\n              </td>\n              <td>Book 300</td>\n              <td>#D7D7D7</td>\n              <td class=\"showcase-table__font-values\">\n                font-size: <strong>12px</strong>\n                <br />\n                line-height: <strong>18px</strong>\n              </td>\n              <td class=\"showcase-table__usage\">\n                For captions on dark backgrounds\n              </td>\n            </tr>\n            <tr class=\"showcase-table__darker-row\">\n              <td>\n                <p class=\"c-text-content-caption--light\">Caption / Light</p>\n              </td>\n              <td>Book 300</td>\n              <td>#FFF</td>\n              <td class=\"showcase-table__font-values\">\n                font-size: <strong>12px</strong>\n                <br />\n                line-height: <strong>18px</strong>\n              </td>\n              <td class=\"showcase-table__usage\">\n                For captions on dark or primary green backgrounds\n              </td>\n            </tr>\n          </tbody>\n        </table>\n        <hr />\n        <SectionTitle>Design Environment</SectionTitle>\n        <p>\n          All text should be left-aligned. In desktop, set the parent container\n          for text blocks to a width that will allow between 60 and 100\n          characters per line. In mobile, text elements should always span 100%\n          of the parent container. Keep a margin of 32px between consecutive\n          text blocks.\n        </p>\n      </Layout>\n    </>\n  )\n}\n\nexport const code = {\n  /*\n  text: `<p class=\"c-text-content\">Lorem ipsum dolor ...</p>\n`,\n  subtle: `<p class=\"c-text-content--subtle\">Lorem ipsum dolor ...</p>\n`,\n  attention: `<p class=\"c-text-content--attention\">Lorem ipsum dolor ...</p>\n`,\n  disclaimer: `<p class=\"c-text-content--disclaimer\">Lorem ipsum dolor ...</p>\n`,*/\n}\n"],"sourceRoot":""}