(window.webpackJsonp=window.webpackJsonp||[]).push([[8],{344:function(t,e,a){"use strict";a.r(e),a.d(e,"_frontmatter",function(){return b}),a.d(e,"default",function(){return O});a(10),a(4),a(5),a(3),a(6),a(2),a(1);var n=a(90),r=a(376);function l(){return(l=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var a=arguments[e];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t}).apply(this,arguments)}var b={},i=function(t){return function(e){return console.warn("Component "+t+" was not imported, exported, or provided by MDXProvider as global scope"),Object(n.b)("div",e)}},o=i("PageDescription"),c=i("Row"),p=i("Column"),d=i("DoDontExample"),m=i("Video"),s={_frontmatter:b},g=r.a;function O(t){var e=t.components,a=function(t,e){if(null==t)return{};var a,n,r={},l=Object.keys(t);for(n=0;n<l.length;n++)a=l[n],e.indexOf(a)>=0||(r[a]=t[a]);return r}(t,["components"]);return Object(n.b)(g,l({},s,a,{components:e,mdxType:"MDXLayout"}),Object(n.b)(o,{mdxType:"PageDescription"},Object(n.b)("p",null,"The ",Object(n.b)("inlineCode",{parentName:"p"},"<DoDontExample>")," component will generally need to be placed inside ",Object(n.b)("inlineCode",{parentName:"p"},"<Row>")," and ",Object(n.b)("inlineCode",{parentName:"p"},"<Column>")," components to align them to the grid at the correct size.")),Object(n.b)("h2",{id:"example"},"Example"),Object(n.b)(c,{mdxType:"Row"},Object(n.b)(p,{colMd:4,colLg:4,mdxType:"Column"},Object(n.b)("h4",{id:"image"},"Image"),Object(n.b)(d,{type:"do",captionTitle:"Caption title",caption:"Caption",mdxType:"DoDontExample"},Object(n.b)("span",{className:"gatsby-resp-image-wrapper",style:{position:"relative",display:"block",marginLeft:"auto",marginRight:"auto",maxWidth:"1088px"}},"\n      ",Object(n.b)("span",l({parentName:"span"},{className:"gatsby-resp-image-background-image",style:{paddingBottom:"100%",position:"relative",bottom:"0px",left:"0px",backgroundSize:"cover",display:"block"}})),"\n  ",Object(n.b)("img",l({parentName:"span"},{className:"gatsby-resp-image-image",style:{width:"100%",height:"100%",margin:"0px",verticalAlign:"middle",position:"absolute",top:"0px",left:"0px",boxShadow:"inset 0px 0px 0px 400px white"},alt:"Alt text",title:"",src:"/static/b0f40c28c5434c5a2816ef779316fdeb/9eefd/Light_theme_02.png",srcSet:["/static/b0f40c28c5434c5a2816ef779316fdeb/115db/Light_theme_02.png 293w","/static/b0f40c28c5434c5a2816ef779316fdeb/f1a3a/Light_theme_02.png 585w","/static/b0f40c28c5434c5a2816ef779316fdeb/9eefd/Light_theme_02.png 1088w"],sizes:"(max-width: 1088px) 100vw, 1088px"})),"\n    "))),Object(n.b)(p,{colMd:4,colLg:4,mdxType:"Column"},Object(n.b)("h4",{id:"text"},"Text"),Object(n.b)(d,{type:"dont",aspectRatio:"1:1",color:"dark",captionTitle:"Caption title",caption:"Caption",text:"This is some text",mdxType:"DoDontExample"}))),Object(n.b)(c,{mdxType:"Row"},Object(n.b)(p,{colLg:8,mdxType:"Column"},Object(n.b)("h4",{id:"video"},"Video"),Object(n.b)(d,{type:"do",caption:"Caption",captionTitle:"Caption title",mdxType:"DoDontExample"},Object(n.b)(m,{title:"Video example",vimeoId:"310583077",mdxType:"Video"})))),Object(n.b)("h2",{id:"code"},"Code"),Object(n.b)("h4",{id:"image-1"},"Image"),Object(n.b)("pre",null,Object(n.b)("code",l({parentName:"pre"},{}),'<DoDontExample type="do" captionTitle="Caption title" caption="Caption">\n\n![Alt text](images/Light_theme_02.png)\n\n</DoDontExample>\n')),Object(n.b)("h4",{id:"text-1"},"Text"),Object(n.b)("pre",null,Object(n.b)("code",l({parentName:"pre"},{}),'<DoDontExample type="dont" aspectRatio="1:1"  color="dark" captionTitle="Caption title" caption="Caption" text="This is some text"></DoDontExample>\n')),Object(n.b)("h4",{id:"video-1"},"Video"),Object(n.b)("pre",null,Object(n.b)("code",l({parentName:"pre"},{}),'<DoDontExample type="do" caption="Caption" captionTitle="Caption title">\n\n<Video vimeoId="310583077" />\n\n</DoDontExample>\n')),Object(n.b)("h2",{id:"props"},"Props"),Object(n.b)("table",null,Object(n.b)("thead",{parentName:"table"},Object(n.b)("tr",{parentName:"thead"},Object(n.b)("th",l({parentName:"tr"},{align:null}),"property"),Object(n.b)("th",l({parentName:"tr"},{align:null}),"propType"),Object(n.b)("th",l({parentName:"tr"},{align:null}),"required"),Object(n.b)("th",l({parentName:"tr"},{align:null}),"default"),Object(n.b)("th",l({parentName:"tr"},{align:null}),"description"))),Object(n.b)("tbody",{parentName:"table"},Object(n.b)("tr",{parentName:"tbody"},Object(n.b)("td",l({parentName:"tr"},{align:null}),"children"),Object(n.b)("td",l({parentName:"tr"},{align:null}),"node"),Object(n.b)("td",l({parentName:"tr"},{align:null})),Object(n.b)("td",l({parentName:"tr"},{align:null})),Object(n.b)("td",l({parentName:"tr"},{align:null}),"child node, expects a markdown image or ",Object(n.b)("inlineCode",{parentName:"td"},"<Video>")," component")),Object(n.b)("tr",{parentName:"tbody"},Object(n.b)("td",l({parentName:"tr"},{align:null}),"text"),Object(n.b)("td",l({parentName:"tr"},{align:null}),"string"),Object(n.b)("td",l({parentName:"tr"},{align:null})),Object(n.b)("td",l({parentName:"tr"},{align:null})),Object(n.b)("td",l({parentName:"tr"},{align:null}),"text to display inside the component instead of an image or video")),Object(n.b)("tr",{parentName:"tbody"},Object(n.b)("td",l({parentName:"tr"},{align:null}),"caption"),Object(n.b)("td",l({parentName:"tr"},{align:null}),"string"),Object(n.b)("td",l({parentName:"tr"},{align:null})),Object(n.b)("td",l({parentName:"tr"},{align:null})),Object(n.b)("td",l({parentName:"tr"},{align:null}),"caption")),Object(n.b)("tr",{parentName:"tbody"},Object(n.b)("td",l({parentName:"tr"},{align:null}),"captionTitle"),Object(n.b)("td",l({parentName:"tr"},{align:null}),"string"),Object(n.b)("td",l({parentName:"tr"},{align:null})),Object(n.b)("td",l({parentName:"tr"},{align:null})),Object(n.b)("td",l({parentName:"tr"},{align:null}),"caption title")),Object(n.b)("tr",{parentName:"tbody"},Object(n.b)("td",l({parentName:"tr"},{align:null}),"type"),Object(n.b)("td",l({parentName:"tr"},{align:null}),"string"),Object(n.b)("td",l({parentName:"tr"},{align:null})),Object(n.b)("td",l({parentName:"tr"},{align:null}),"dont"),Object(n.b)("td",l({parentName:"tr"},{align:null}),"set to ",Object(n.b)("inlineCode",{parentName:"td"},"do")," to show green check, otherwise shows pink X")),Object(n.b)("tr",{parentName:"tbody"},Object(n.b)("td",l({parentName:"tr"},{align:null}),"color"),Object(n.b)("td",l({parentName:"tr"},{align:null}),"string"),Object(n.b)("td",l({parentName:"tr"},{align:null})),Object(n.b)("td",l({parentName:"tr"},{align:null}),"light"),Object(n.b)("td",l({parentName:"tr"},{align:null}),"set to ",Object(n.b)("inlineCode",{parentName:"td"},"dark")," for dark background card")),Object(n.b)("tr",{parentName:"tbody"},Object(n.b)("td",l({parentName:"tr"},{align:null}),"aspectRatio"),Object(n.b)("td",l({parentName:"tr"},{align:null}),"string"),Object(n.b)("td",l({parentName:"tr"},{align:null})),Object(n.b)("td",l({parentName:"tr"},{align:null})),Object(n.b)("td",l({parentName:"tr"},{align:null}),"set to ",Object(n.b)("inlineCode",{parentName:"td"},"1:1")," to force square example ",Object(n.b)("br",null),Object(n.b)("em",{parentName:"td"},"(We welcome ",Object(n.b)("a",l({parentName:"em"},{href:"https://github.com/carbon-design-system/gatsby-theme-carbon/tree/master/packages/gatsby-theme-carbon/src/components/DoDontExample"}),"contributions")," to add additional aspect ratio options)"))))))}O.isMDXComponent=!0},375:function(t){t.exports={data:{site:{pathPrefix:""}}}},376:function(t,e,a){"use strict";a(22),a(16);var n=a(2),r=a(375),l=a(1),b=a.n(l),i=a(183),o=a(69),c=a.n(o),p=a(57),d=a(104),m=a(0),s=a.n(m),g=a(8),O=a.n(g),j=a(338),u=function(t){var e,a=t.children,r=t.title,l=t.tabs,b=void 0===l?[]:l,i=t.shouldHideHeader;return Object(n.b)("div",{className:O()((e={},e[j.pageHeader]=j.pageHeader,e[j.pageHeaderSticky]=b.length,e[j.pageHeaderShifted]=i,e))},Object(n.b)("div",{className:"bx--grid"},Object(n.b)("div",{className:"bx--row"},Object(n.b)("div",{className:"bx--col-lg-12"},Object(n.b)("h1",{id:"page-title",className:j.text},r)))),a)};u.propTypes={children:s.a.node,title:s.a.string};var N=u,h=a(184),x=a(20),y=a(339);var f=function(t){var e,a;function r(){return t.apply(this,arguments)||this}return a=t,(e=r).prototype=Object.create(a.prototype),e.prototype.constructor=e,e.__proto__=a,r.prototype.render=function(){var t=this.props,e=t.tabs,a=t.slug,r=a.split("/").filter(Boolean).slice(-1)[0],l=e.map(function(t){var e,l=c()(t,{lower:!0}),b=l===r,i=a.replace(r,l);return Object(n.b)("li",{key:t,className:O()((e={},e[y.selectedItem]=b,e),y.listItem)},Object(n.b)(x.Link,{className:y.link,to:""+i},t))});return Object(n.b)("div",{className:y.tabsContainer},Object(n.b)("div",{className:"bx--grid"},Object(n.b)("div",{className:"bx--row"},Object(n.b)("div",{className:"bx--col-lg-12 bx--col-no-gutter"},Object(n.b)("nav",null,Object(n.b)("ul",{className:y.list},l))))))},r}(b.a.Component);f.propTypes={tabs:s.a.array,slug:s.a.string};var v=f,w=a(185);e.a=function(t){var e=t.pageContext,a=t.children,l=t.location,b=e.frontmatter,o=void 0===b?{}:b,m=o.tabs,s=o.title,g=Object(p.c)(),O=!!m&&"down"===g,j=r.data.site.pathPrefix,u=j?l.pathname.replace(j,""):l.pathname,x=m?u.split("/").slice(-1)[0]||c()(m[0],{lower:!0}):"";return Object(n.b)(d.a,{shouldHideHeader:O,homepage:!1},Object(n.b)(N,{shouldHideHeader:O,title:s,label:"label",tabs:m},m&&Object(n.b)(v,{slug:u,tabs:m,currentTab:x})),Object(n.b)(w.a,{padded:!0},a),Object(n.b)(h.a,{pageContext:e,location:l,slug:u,tabs:m,currentTab:x}),Object(n.b)(i.a,null))}}}]);
//# sourceMappingURL=component---src-pages-components-do-dont-example-mdx-a5ba5a5548eb780b2a4c.js.map