(window.webpackJsonp=window.webpackJsonp||[]).push([[27],{"408i":function(e,t,n){"use strict";n.r(t),n.d(t,"meta",(function(){return b})),n.d(t,"default",(function(){return u}));var a=n("wx14"),o=n("Ff2n"),c=n("rePB"),r=n("q1tI"),i=n.n(r),l=n("7ljp"),p=(n("cv3Q"),n("IuJO"),n("CafY"));i.a.createElement;function s(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}var b={type:"components",title:"Text"},m={meta:b},d=Object(p.a)(function(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?s(Object(n),!0).forEach((function(t){Object(c.a)(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):s(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}({},b));function u(e){var t=e.components,n=Object(o.a)(e,["components"]);return Object(l.b)(d,Object(a.a)({},m,n,{components:t,mdxType:"MDXLayout"}),Object(l.b)("p",null,Object(l.b)("inlineCode",{parentName:"p"},"Text")," renders different text styles. You get the styling through the ",Object(l.b)("inlineCode",{parentName:"p"},"type")," prop and you render the element tag with the ",Object(l.b)("inlineCode",{parentName:"p"},"as")," prop. "),Object(l.b)("p",null,"It will default to the ",Object(l.b)("inlineCode",{parentName:"p"},"span")," semantically and the ",Object(l.b)("inlineCode",{parentName:"p"},"body")," styling."),Object(l.b)("p",null,"For information on Typography style and usage guidelines, check out ",Object(l.b)("a",Object(a.a)({parentName:"p"},{href:"/design/typography"}),"Typography Design Guidelines"),"."),Object(l.b)("h3",null,"Example"),Object(l.b)("pre",null,Object(l.b)("code",Object(a.a)({parentName:"pre"},{className:"language-jsx",metastring:"live",live:!0}),"<Text>I'm a default body text</Text>\n")),Object(l.b)("h3",null,"Styling types"),Object(l.b)("pre",null,Object(l.b)("code",Object(a.a)({parentName:"pre"},{className:"language-jsx",metastring:"live",live:!0}),'<Text type="subtitle" as="p"> subtitle visually, semantically p </Text>\n<Text type="body" as="p"> body text visually, semantically p </Text>\n\n<Text type="caption" as="p"> caption visually, semantically p</Text>\n<Text type="overline" as="p"> overline visually,semantically p </Text>\n\n<Text type="alert" as="p"> use this in alerts, semantically p</Text>\n<Text type="table" as="p"> use this in tables, semantically p </Text>\n<Text type="form" as="p"> use this in forms, semantically p </Text>\n<Text type="quote" as="p">use this in quotes: "sorry I\'m late, I didn\'t want to come", semantically p</Text>\n')),Object(l.b)("h3",null,"Common Props"),Object(l.b)("p",null,Object(l.b)("inlineCode",{parentName:"p"},"Text")," includes ",Object(l.b)("inlineCode",{parentName:"p"},"COMMON")," and ",Object(l.b)("inlineCode",{parentName:"p"},"TYPOGRAPHY")," common props. Read ",Object(l.b)("a",Object(a.a)({parentName:"p"},{href:"/components/common-props"}),"Common Props")," for details and API. These common props will override component props such as the color."),Object(l.b)("h3",null,"Component Props"),Object(l.b)("table",null,Object(l.b)("thead",{parentName:"table"},Object(l.b)("tr",{parentName:"thead"},Object(l.b)("th",Object(a.a)({parentName:"tr"},{align:"left"}),"Prop name"),Object(l.b)("th",Object(a.a)({parentName:"tr"},{align:"left"}),"Type"),Object(l.b)("th",Object(a.a)({parentName:"tr"},{align:"center"}),"Default"),Object(l.b)("th",Object(a.a)({parentName:"tr"},{align:"left"}),"Description"))),Object(l.b)("tbody",{parentName:"table"},Object(l.b)("tr",{parentName:"tbody"},Object(l.b)("td",Object(a.a)({parentName:"tr"},{align:"left"}),"as"),Object(l.b)("td",Object(a.a)({parentName:"tr"},{align:"left"}),"String"),Object(l.b)("td",Object(a.a)({parentName:"tr"},{align:"center"}),Object(l.b)("inlineCode",{parentName:"td"},"h2")),Object(l.b)("td",Object(a.a)({parentName:"tr"},{align:"left"}),"sets the HTML tag for the component")),Object(l.b)("tr",{parentName:"tbody"},Object(l.b)("td",Object(a.a)({parentName:"tr"},{align:"left"}),"type"),Object(l.b)("td",Object(a.a)({parentName:"tr"},{align:"left"}),"String"),Object(l.b)("td",Object(a.a)({parentName:"tr"},{align:"center"}),Object(l.b)("inlineCode",{parentName:"td"},"h2")),Object(l.b)("td",Object(a.a)({parentName:"tr"},{align:"left"}),"sets styling of component ( ",Object(l.b)("inlineCode",{parentName:"td"},"body")," ","|"," ",Object(l.b)("inlineCode",{parentName:"td"},"caption")," ","|"," ",Object(l.b)("inlineCode",{parentName:"td"},"overline")," ","|"," ",Object(l.b)("inlineCode",{parentName:"td"},"button")," ","|"," ",Object(l.b)("inlineCode",{parentName:"td"},"buttonSmall")," ","|"," ",Object(l.b)("inlineCode",{parentName:"td"},"alert")," ","|"," ",Object(l.b)("inlineCode",{parentName:"td"},"table")," ","|"," ",Object(l.b)("inlineCode",{parentName:"td"},"form")," ","|"," ",Object(l.b)("inlineCode",{parentName:"td"},"quote")," ","|"," ",Object(l.b)("inlineCode",{parentName:"td"},"subtitle")," )")),Object(l.b)("tr",{parentName:"tbody"},Object(l.b)("td",Object(a.a)({parentName:"tr"},{align:"left"}),"theme"),Object(l.b)("td",Object(a.a)({parentName:"tr"},{align:"left"}),"Object"),Object(l.b)("td",Object(a.a)({parentName:"tr"},{align:"center"}),"Bridge Theme"),Object(l.b)("td",Object(a.a)({parentName:"tr"},{align:"left"}),"use to override default bridge theme")))))}u.isMDXComponent=!0},CafY:function(e,t,n){"use strict";var a=n("q1tI"),o=n.n(a),c=n("cv3Q"),r=Object(a.createContext)(),i=n("CoLn"),l=[{name:"Getting Started",routes:[{title:"Introduction",href:"".concat("/components")},{title:"Common Props",href:"".concat("/components","/common-props")},{title:"Theming",href:"".concat("/components","/theming")},{title:"Responsive Styling",href:"".concat("/components","/responsive")}]},{name:"Components",routes:[{title:"Alerts",href:"".concat("/components","/alerts")},{title:"Box",href:"".concat("/components","/box")},{title:"Buttons",href:"".concat("/components","/buttons")},{title:"Cards",href:"".concat("/components","/cards")},{title:"Checkbox",href:"".concat("/components","/checkbox")},{title:"Dropdown",href:"".concat("/components","/dropdown")},{title:"Flex",href:"".concat("/components","/flex")},{title:"Grid",href:"".concat("/components","/grid")},{title:"Links",href:"".concat("/components","/links")},{title:"Icons",href:"".concat("/components","/icons")},{title:"Heading",href:"".concat("/components","/heading")},{title:"Radio",href:"".concat("/components","/radio")},{title:"Tables",href:"".concat("/components","/tables")},{title:"Tags",href:"".concat("/components","/tags")},{title:"Text",href:"".concat("/components","/text")},{title:"TextField",href:"".concat("/components","/text-field")}]}],p=[{name:"Getting Started",routes:[{title:"Introduction",href:"".concat("/design")}]},{name:"Base",routes:[{title:"Colors",href:"".concat("/design","/colors")},{title:"Typography",href:"".concat("/design","/typography")},{title:"Logos",href:"".concat("/design","/logos")},{title:"Spacing",href:"".concat("/design","/spacing")},{title:"Breakpoints",href:"".concat("/design","/breakpoints")}]},{name:"UI Patterns",routes:[{title:"Alerts",href:"".concat("/design","/alerts")},{title:"Buttons",href:"".concat("/design","/buttons")},{title:"Cards",href:"".concat("/design","/cards")},{title:"File Upload",href:"".concat("/design","/file-upload")},{title:"Forms",href:"".concat("/design","/forms")},{title:"Form Selections",href:"".concat("/design","/form-selections")},{title:"Tables",href:"".concat("/design","/tables")},{title:"Tags",href:"".concat("/design","/tags")},{title:"Text Fields",href:"".concat("/design","/text-fields")}]}],s=o.a.createElement,b=function(e,t){return s(o.a.Fragment,null,s(c.Text,{type:"body",fontWeight:"700",as:"p",m:"24px 0 8px 0"},e.name),e.routes.map((function(e){return s(c.Text,{key:e.title,as:"p",m:"5px 0",fontWeight:t===e.title?"700":"500"},s(c.Link,{href:e.href},e.title))})))},m=function(e){var t=e.children,n=e.innerRef,a=e.type,o=e.title;return s(c.Flex,{flexShrink:"0",height:"100%",flexDirection:"column",ref:n,width:"280px",pb:"md",pr:"sm",pl:"sm"},t,function(e,t){return"components"===e?l.map((function(e){return b(e,t)})):"design"===e?p.map((function(e){return b(e,t)})):null}(a,o))},d=n("ZHh6"),u=n("Y5X5"),f=o.a.createElement;t.a=function(e){return function(t){var n=t.children;return f(r.Provider,{value:{label:"".concat(e.type)}},f(d.a,{title:e.title}),f(u.a,null),f(c.Flex,{flexWrap:"wrap",m:"10px auto",maxWidth:"1200px"},f(m,{type:e.type,title:e.title}),f(c.Flex,{height:"100%",paddingBottom:"lg",flexDirection:"column",width:["100%","100%","calc(100% - 300px)"],maxWidth:"800px",m:"0 20px"},f(i.a,null,f(c.Heading,{mb:"0px",mt:"0px",type:"h2"},e.title),f("main",null,n)))))}}},g1jY:function(e,t,n){(window.__NEXT_P=window.__NEXT_P||[]).push(["/components/text",function(){return n("408i")}])}},[["g1jY",0,2,5,1,3,4]]]);