diff --git a/docs/asset-manifest.json b/docs/asset-manifest.json index 27e98d2a7..b5e5cf396 100644 --- a/docs/asset-manifest.json +++ b/docs/asset-manifest.json @@ -1,21 +1,22 @@ { "files": { - "main.css": "/react-components/main.css", - "main.js": "/react-components/main.6b4b22e79a326056e627.bundle.js", - "main.css.map": "/react-components/main.css.map", - "main.js.map": "/react-components/main.6b4b22e79a326056e627.bundle.js.map", - "runtime~main.js": "/react-components/runtime~main.6b4b22e79a326056e627.bundle.js", - "runtime~main.js.map": "/react-components/runtime~main.6b4b22e79a326056e627.bundle.js.map", - "vendors~main.js": "/react-components/vendors~main.6b4b22e79a326056e627.bundle.js", - "vendors~main.js.map": "/react-components/vendors~main.6b4b22e79a326056e627.bundle.js.map", + "main.css": "/react-components/static/css/main.b3b6a032.chunk.css", + "main.js": "/react-components/main.4f5e88df57d0dc21650d.bundle.js", + "main.css.map": "/react-components/static/css/main.b3b6a032.chunk.css.map", + "main.js.map": "/react-components/main.4f5e88df57d0dc21650d.bundle.js.map", + "runtime~main.js": "/react-components/runtime~main.4f5e88df57d0dc21650d.bundle.js", + "runtime~main.js.map": "/react-components/runtime~main.4f5e88df57d0dc21650d.bundle.js.map", + "vendors~main.js": "/react-components/vendors~main.4f5e88df57d0dc21650d.bundle.js", + "vendors~main.js.map": "/react-components/vendors~main.4f5e88df57d0dc21650d.bundle.js.map", "iframe.html": "/react-components/iframe.html", - "precache-manifest.2e99500519e549ee357c046d97242468.js": "/react-components/precache-manifest.2e99500519e549ee357c046d97242468.js", - "service-worker.js": "/react-components/service-worker.js" + "precache-manifest.b31a436375a1589a407a3ed4cf8d7f6a.js": "/react-components/precache-manifest.b31a436375a1589a407a3ed4cf8d7f6a.js", + "service-worker.js": "/react-components/service-worker.js", + "vendors~main.4f5e88df57d0dc21650d.bundle.js.LICENSE.txt": "/react-components/vendors~main.4f5e88df57d0dc21650d.bundle.js.LICENSE.txt" }, "entrypoints": [ - "runtime~main.6b4b22e79a326056e627.bundle.js", - "vendors~main.6b4b22e79a326056e627.bundle.js", - "main.css", - "main.6b4b22e79a326056e627.bundle.js" + "runtime~main.4f5e88df57d0dc21650d.bundle.js", + "vendors~main.4f5e88df57d0dc21650d.bundle.js", + "static/css/main.b3b6a032.chunk.css", + "main.4f5e88df57d0dc21650d.bundle.js" ] } \ No newline at end of file diff --git a/docs/iframe.html b/docs/iframe.html index cdb08b8df..8540f9f15 100644 --- a/docs/iframe.html +++ b/docs/iframe.html @@ -60,16 +60,17 @@ }

No Preview

Sorry, but you either have no stories or none are selected somehow.

If the problem persists, check the browser console, or the terminal you've run Storybook from.


\ No newline at end of file
+      }
No Preview
Sorry, but you either have no stories or none are selected somehow.
If the problem persists, check the browser console, or the terminal you've run Storybook from.

\ No newline at end of file
diff --git a/docs/index.html b/docs/index.html
index 0258da094..eb5e301e9 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -7,14 +7,13 @@
   }

\ No newline at end of file
+      }

\ No newline at end of file
diff --git a/docs/main.20545a4be705b2228056.bundle.js b/docs/main.20545a4be705b2228056.bundle.js
deleted file mode 100644
index 7dde91a8b..000000000
--- a/docs/main.20545a4be705b2228056.bundle.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[0],{0:function(n,o,c){c(410),c(522),c(845),n.exports=c(847)},1:function(n,o){},522:function(n,o,c){"use strict";c.r(o);c(523)}},[[0,1,2]]]);
\ No newline at end of file
diff --git a/docs/main.4f5e88df57d0dc21650d.bundle.js b/docs/main.4f5e88df57d0dc21650d.bundle.js
new file mode 100644
index 000000000..fccb22eca
--- /dev/null
+++ b/docs/main.4f5e88df57d0dc21650d.bundle.js
@@ -0,0 +1,2 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[0],{105:function(module,__webpack_exports__,__webpack_require__){"use strict";var _home_multipass_code_vanilla_react_components_node_modules_babel_preset_react_app_node_modules_babel_runtime_helpers_esm_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__(3),classnames__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__(8),classnames__WEBPACK_IMPORTED_MODULE_1___default=__webpack_require__.n(classnames__WEBPACK_IMPORTED_MODULE_1__),react__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__(1),react__WEBPACK_IMPORTED_MODULE_2___default=__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_2__),Row=function Row(_ref){var children=_ref.children,className=_ref.className,props=Object(_home_multipass_code_vanilla_react_components_node_modules_babel_preset_react_app_node_modules_babel_runtime_helpers_esm_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_0__.a)(_ref,["children","className"]);return react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement("div",Object.assign({className:classnames__WEBPACK_IMPORTED_MODULE_1___default()(className,"row")},props),children)};Row.__docgenInfo={description:"",methods:[],displayName:"Row"},__webpack_exports__.a=Row,"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Row/Row.js"]={name:"Row",docgenInfo:Row.__docgenInfo,path:"src/components/Row/Row.js"})},124:function(module,__webpack_exports__,__webpack_require__){"use strict";var objectWithoutProperties=__webpack_require__(3),classnames=__webpack_require__(8),classnames_default=__webpack_require__.n(classnames),react=__webpack_require__(1),react_default=__webpack_require__.n(react),Label_Label=function Label(_ref){var children=_ref.children,className=_ref.className,forId=_ref.forId,required=_ref.required,props=Object(objectWithoutProperties.a)(_ref,["children","className","forId","required"]);return react_default.a.createElement("label",Object.assign({className:classnames_default()(className,"p-form__label",{"is-required":required}),htmlFor:forId},props),children)};Label_Label.__docgenInfo={description:"",methods:[],displayName:"Label"};var components_Label_Label=Label_Label;"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Label/Label.js"]={name:"Label",docgenInfo:Label_Label.__docgenInfo,path:"src/components/Label/Label.js"});var Col=__webpack_require__(14),Field_generateContent=function generateContent(isSelect,children,labelFirst,labelNode,help,error,caution,success){return react_default.a.createElement("div",{className:"p-form__control u-clearfix"},isSelect?react_default.a.createElement("div",{className:"p-form-validation__select-wrapper"},children):children,!labelFirst&&labelNode,function generateHelp(help){return help&&react_default.a.createElement("p",{className:"p-form-help-text"},help)}(help),function generateError(error,caution,success){if(error||caution||success){var messageType=(error?"Error":caution&&"Caution")||success&&"Success";return react_default.a.createElement("p",{className:"p-form-validation__message"},react_default.a.createElement("strong",null,messageType,":")," ",error||caution||success)}}(error,caution,success))},Field_Field=function Field(_ref){var caution=_ref.caution,children=_ref.children,className=_ref.className,error=_ref.error,forId=_ref.forId,help=_ref.help,isSelect=_ref.isSelect,label=_ref.label,_ref$labelFirst=_ref.labelFirst,labelFirst=void 0===_ref$labelFirst||_ref$labelFirst,required=_ref.required,stacked=_ref.stacked,success=_ref.success,labelNode=(_ref.type,Object(objectWithoutProperties.a)(_ref,["caution","children","className","error","forId","help","isSelect","label","labelFirst","required","stacked","success","type"]),function generateLabel(forId,required,label,stacked){if(label){var labelNode=react_default.a.createElement(components_Label_Label,{forId:forId,required:required},label);return stacked?react_default.a.createElement(Col.a,{size:"4"},labelNode):labelNode}}(forId,required,label,stacked)),content=Field_generateContent(isSelect,children,labelFirst,labelNode,help,error,caution,success);return react_default.a.createElement("div",{className:classnames_default()("p-form__group","p-form-validation",className,{"is-error":error,"is-caution":caution,"is-success":success,row:stacked})},labelFirst&&labelNode,stacked?react_default.a.createElement(Col.a,{size:"8"},content):content)};Field_Field.__docgenInfo={description:"",methods:[],displayName:"Field"};var components_Field_Field=Field_Field;"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Field/Field.js"]={name:"Field",docgenInfo:Field_Field.__docgenInfo,path:"src/components/Field/Field.js"}),__webpack_require__.d(__webpack_exports__,"a",(function(){return components_Field_Field}))},1248:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),function(module){var _storybook_react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__(446);Object(_storybook_react__WEBPACK_IMPORTED_MODULE_0__.configure)(__webpack_require__(1275),module)}.call(this,__webpack_require__(1249)(module))},1275:function(module,exports,__webpack_require__){var map={"./components/Accordion/Accordion.stories.mdx":1299,"./components/ActionButton/ActionButton.stories.mdx":1303,"./components/ArticlePagination/ArticlePagination.stories.mdx":1304,"./components/Button/Button.stories.mdx":1305,"./components/Card/Card.stories.mdx":1306,"./components/Code/Code.stories.mdx":1307,"./components/Col/Col.stories.mdx":1287,"./components/Form/Form.stories.mdx":1300,"./components/Input/Input.stories.mdx":1288,"./components/Link/Link.stories.mdx":1301,"./components/List/List.stories.mdx":1308,"./components/Loader/Loader.stories.mdx":1309,"./components/MainTable/MainTable.stories.mdx":1297,"./components/Modal/Modal.stories.mdx":1310,"./components/Notification/Notification.stories.mdx":1311,"./components/Pagination/Pagination.stories.mdx":1291,"./components/Row/Row.stories.mdx":1292,"./components/SearchBox/SearchBox.stories.mdx":1312,"./components/Select/Select.stories.mdx":1293,"./components/Strip/Strip.stories.mdx":1294,"./components/Textarea/Textarea.stories.mdx":1313,"./docs/getting-started.stories.mdx":1295};function webpackContext(req){var id=webpackContextResolve(req);return __webpack_require__(id)}function webpackContextResolve(req){if(!__webpack_require__.o(map,req)){var e=new Error("Cannot find module '"+req+"'");throw e.code="MODULE_NOT_FOUND",e}return map[req]}webpackContext.keys=function webpackContextKeys(){return Object.keys(map)},webpackContext.resolve=webpackContextResolve,module.exports=webpackContext,webpackContext.id=1275},1286:function(module,exports,__webpack_require__){},1287:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"grid",(function(){return grid})),__webpack_require__.d(__webpack_exports__,"nestedColumns",(function(){return nestedColumns})),__webpack_require__.d(__webpack_exports__,"emptyColumns",(function(){return emptyColumns}));var _home_multipass_code_vanilla_react_components_node_modules_babel_preset_react_app_node_modules_babel_runtime_helpers_esm_objectSpread2__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__(10),_home_multipass_code_vanilla_react_components_node_modules_babel_preset_react_app_node_modules_babel_runtime_helpers_esm_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__(3),_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__=(__webpack_require__(1),__webpack_require__(0)),_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__(2),_storybook_addon_knobs__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__(5),_Col__WEBPACK_IMPORTED_MODULE_6__=__webpack_require__(4),_Row__WEBPACK_IMPORTED_MODULE_7__=__webpack_require__(6),layoutProps={};function MDXContent(_ref){var components=_ref.components,props=Object(_home_multipass_code_vanilla_react_components_node_modules_babel_preset_react_app_node_modules_babel_runtime_helpers_esm_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_1__.a)(_ref,["components"]);return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("wrapper",Object.assign({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_4__.Meta,{title:"Col",component:_Col__WEBPACK_IMPORTED_MODULE_6__.a,decorators:[_storybook_addon_knobs__WEBPACK_IMPORTED_MODULE_5__.withKnobs],mdxType:"Meta"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("h3",{id:"col"},"Col"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("p",null,"This is a ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("a",Object.assign({parentName:"p"},{href:"https://reactjs.org/",target:"_blank",rel:["nofollow","noopener","noreferrer"]}),"React")," component for use within the Vanilla ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("a",Object.assign({parentName:"p"},{href:"https://docs.vanillaframework.io/patterns/grid/",target:"_blank",rel:["nofollow","noopener","noreferrer"]}),"Grid"),"."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("p",null,"Vanilla has a responsive grid using a combination of rows and columns."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("h3",{id:"props"},"Props"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_4__.Props,{of:_Col__WEBPACK_IMPORTED_MODULE_6__.a,mdxType:"Props"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("h3",{id:"grid"},"Grid"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_4__.Preview,{mdxType:"Preview"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_4__.Story,{name:"Grid",mdxType:"Story"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("div",{className:"grid-demo"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Row__WEBPACK_IMPORTED_MODULE_7__.a,{mdxType:"Row"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_6__.a,{size:"12",mdxType:"Col"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("span",null,".col-12"))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Row__WEBPACK_IMPORTED_MODULE_7__.a,{mdxType:"Row"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_6__.a,{size:"11",mdxType:"Col"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("span",null,".col-11")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_6__.a,{size:"1",mdxType:"Col"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("span",null,".col-1"))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Row__WEBPACK_IMPORTED_MODULE_7__.a,{mdxType:"Row"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_6__.a,{size:"10",mdxType:"Col"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("span",null,".col-10")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_6__.a,{size:"2",mdxType:"Col"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("span",null,".col-2"))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Row__WEBPACK_IMPORTED_MODULE_7__.a,{mdxType:"Row"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_6__.a,{size:"9",mdxType:"Col"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("span",null,".col-9")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_6__.a,{size:"3",mdxType:"Col"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("span",null,".col-9"))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Row__WEBPACK_IMPORTED_MODULE_7__.a,{mdxType:"Row"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_6__.a,{size:"8",mdxType:"Col"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("span",null,".col-8")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_6__.a,{size:"4",mdxType:"Col"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("span",null,".col-4"))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Row__WEBPACK_IMPORTED_MODULE_7__.a,{mdxType:"Row"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_6__.a,{size:"7",mdxType:"Col"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("span",null,".col-7")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_6__.a,{size:"5",mdxType:"Col"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("span",null,".col-5"))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Row__WEBPACK_IMPORTED_MODULE_7__.a,{mdxType:"Row"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_6__.a,{size:"6",mdxType:"Col"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("span",null,".col-6")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_6__.a,{size:"6",mdxType:"Col"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("span",null,".col-6"))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Row__WEBPACK_IMPORTED_MODULE_7__.a,{mdxType:"Row"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_6__.a,{size:"5",mdxType:"Col"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("span",null,".col-5")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_6__.a,{size:"7",mdxType:"Col"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("span",null,".col-7"))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Row__WEBPACK_IMPORTED_MODULE_7__.a,{mdxType:"Row"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_6__.a,{size:"4",mdxType:"Col"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("span",null,".col-4")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_6__.a,{size:"8",mdxType:"Col"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("span",null,".col-8"))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Row__WEBPACK_IMPORTED_MODULE_7__.a,{mdxType:"Row"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_6__.a,{size:"3",mdxType:"Col"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("span",null,".col-3")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_6__.a,{size:"9",mdxType:"Col"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("span",null,".col-9"))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Row__WEBPACK_IMPORTED_MODULE_7__.a,{mdxType:"Row"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_6__.a,{size:"2",mdxType:"Col"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("span",null,".col-2")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_6__.a,{size:"10",mdxType:"Col"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("span",null,".col-10"))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Row__WEBPACK_IMPORTED_MODULE_7__.a,{mdxType:"Row"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_6__.a,{size:"1",mdxType:"Col"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("span",null,".col-1")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_6__.a,{size:"11",mdxType:"Col"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("span",null,".col-11")))))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("h3",{id:"nested-columns"},"Nested columns"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_4__.Preview,{mdxType:"Preview"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_4__.Story,{name:"Nested columns",mdxType:"Story"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("div",{className:"grid-demo"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Row__WEBPACK_IMPORTED_MODULE_7__.a,{mdxType:"Row"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_6__.a,{small:"4",medium:"6",size:"12",mdxType:"Col"},"col-small-4 .col-medium-6 .col-12",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Row__WEBPACK_IMPORTED_MODULE_7__.a,{mdxType:"Row"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_6__.a,{small:"3",medium:"3",size:"9",mdxType:"Col"},"col-small-3 .col-medium-3 .col-9",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Row__WEBPACK_IMPORTED_MODULE_7__.a,{mdxType:"Row"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_6__.a,{small:"1",medium:"1",size:"2",mdxType:"Col"},"col-small-1 col-medium-1 col-2"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_6__.a,{small:"1",medium:"1",size:"3",mdxType:"Col"},"col-small-1 col-medium-1 col-2"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_6__.a,{small:"1",medium:"1",size:"3",mdxType:"Col"},"col-small-1 col-medium-1 col-2"))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_6__.a,{small:"1",medium:"3",size:"3",mdxType:"Col"},"col-small-2 col-medium-3 col-3"))))))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("h3",{id:"empty-columns"},"Empty columns"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_4__.Preview,{mdxType:"Preview"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_4__.Story,{name:"Empty columns",mdxType:"Story"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("div",{className:"grid-demo"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Row__WEBPACK_IMPORTED_MODULE_7__.a,{mdxType:"Row"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_6__.a,{size:"8",mdxType:"Col"},".col-8"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_6__.a,{size:"4",mdxType:"Col"},".col-4")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Row__WEBPACK_IMPORTED_MODULE_7__.a,{mdxType:"Row"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_6__.a,{size:"7",mdxType:"Col"},".col-7"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_6__.a,{size:"4",mdxType:"Col"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Row__WEBPACK_IMPORTED_MODULE_7__.a,{mdxType:"Row"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_6__.a,{size:"3",emptyLarge:"2",mdxType:"Col"},"col-3 col-start-large-2 inside col-4")))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Row__WEBPACK_IMPORTED_MODULE_7__.a,{mdxType:"Row"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_6__.a,{size:"7",mdxType:"Col"},".col-7"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_6__.a,{size:"4",mdxType:"Col"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Row__WEBPACK_IMPORTED_MODULE_7__.a,{mdxType:"Row"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_6__.a,{size:"3",mdxType:"Col"},"col-3 inside col-4"))))))))}MDXContent.isMDXComponent=!0;var grid=function grid(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("div",{className:"grid-demo"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Row__WEBPACK_IMPORTED_MODULE_7__.a,null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_6__.a,{size:"12"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("span",null,".col-12"))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Row__WEBPACK_IMPORTED_MODULE_7__.a,null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_6__.a,{size:"11"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("span",null,".col-11")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_6__.a,{size:"1"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("span",null,".col-1"))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Row__WEBPACK_IMPORTED_MODULE_7__.a,null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_6__.a,{size:"10"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("span",null,".col-10")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_6__.a,{size:"2"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("span",null,".col-2"))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Row__WEBPACK_IMPORTED_MODULE_7__.a,null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_6__.a,{size:"9"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("span",null,".col-9")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_6__.a,{size:"3"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("span",null,".col-9"))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Row__WEBPACK_IMPORTED_MODULE_7__.a,null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_6__.a,{size:"8"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("span",null,".col-8")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_6__.a,{size:"4"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("span",null,".col-4"))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Row__WEBPACK_IMPORTED_MODULE_7__.a,null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_6__.a,{size:"7"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("span",null,".col-7")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_6__.a,{size:"5"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("span",null,".col-5"))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Row__WEBPACK_IMPORTED_MODULE_7__.a,null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_6__.a,{size:"6"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("span",null,".col-6")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_6__.a,{size:"6"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("span",null,".col-6"))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Row__WEBPACK_IMPORTED_MODULE_7__.a,null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_6__.a,{size:"5"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("span",null,".col-5")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_6__.a,{size:"7"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("span",null,".col-7"))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Row__WEBPACK_IMPORTED_MODULE_7__.a,null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_6__.a,{size:"4"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("span",null,".col-4")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_6__.a,{size:"8"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("span",null,".col-8"))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Row__WEBPACK_IMPORTED_MODULE_7__.a,null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_6__.a,{size:"3"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("span",null,".col-3")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_6__.a,{size:"9"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("span",null,".col-9"))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Row__WEBPACK_IMPORTED_MODULE_7__.a,null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_6__.a,{size:"2"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("span",null,".col-2")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_6__.a,{size:"10"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("span",null,".col-10"))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Row__WEBPACK_IMPORTED_MODULE_7__.a,null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_6__.a,{size:"1"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("span",null,".col-1")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_6__.a,{size:"11"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("span",null,".col-11"))))};grid.story={},grid.story.name="Grid",grid.story.parameters={mdxSource:'
\n      \n        \n          .col-12\n        \n      \n      \n        \n          .col-11\n        \n        \n          .col-1\n        \n      \n      \n        \n          .col-10\n        \n        \n          .col-2\n        \n      \n      \n        \n          .col-9\n        \n        \n          .col-9\n        \n      \n      \n        \n          .col-8\n        \n        \n          .col-4\n        \n      \n      \n        \n          .col-7\n        \n        \n          .col-5\n        \n      \n      \n        \n          .col-6\n        \n        \n          .col-6\n        \n      \n      \n        \n          .col-5\n        \n        \n          .col-7\n        \n      \n      \n        \n          .col-4\n        \n        \n          .col-8\n        \n      \n      \n        \n          .col-3\n        \n        \n          .col-9\n        \n      \n      \n        \n          .col-2\n        \n        \n          .col-10\n        \n      \n      \n        \n          .col-1\n        \n        \n          .col-11\n        \n      \n    
'};var nestedColumns=function nestedColumns(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("div",{className:"grid-demo"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Row__WEBPACK_IMPORTED_MODULE_7__.a,null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_6__.a,{small:"4",medium:"6",size:"12"},"col-small-4 .col-medium-6 .col-12",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Row__WEBPACK_IMPORTED_MODULE_7__.a,null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_6__.a,{small:"3",medium:"3",size:"9"},"col-small-3 .col-medium-3 .col-9",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Row__WEBPACK_IMPORTED_MODULE_7__.a,null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_6__.a,{small:"1",medium:"1",size:"2"},"col-small-1 col-medium-1 col-2"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_6__.a,{small:"1",medium:"1",size:"3"},"col-small-1 col-medium-1 col-2"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_6__.a,{small:"1",medium:"1",size:"3"},"col-small-1 col-medium-1 col-2"))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_6__.a,{small:"1",medium:"3",size:"3"},"col-small-2 col-medium-3 col-3")))))};nestedColumns.story={},nestedColumns.story.name="Nested columns",nestedColumns.story.parameters={mdxSource:'
\n      \n        \n          col-small-4 .col-medium-6 .col-12\n          \n            \n              col-small-3 .col-medium-3 .col-9\n              \n                \n                  col-small-1 col-medium-1 col-2\n                \n                \n                  col-small-1 col-medium-1 col-2\n                \n                \n                  col-small-1 col-medium-1 col-2\n                \n              \n            \n            \n              col-small-2 col-medium-3 col-3\n            \n          \n        \n      \n    
'};var emptyColumns=function emptyColumns(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("div",{className:"grid-demo"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Row__WEBPACK_IMPORTED_MODULE_7__.a,null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_6__.a,{size:"8"},".col-8"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_6__.a,{size:"4"},".col-4")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Row__WEBPACK_IMPORTED_MODULE_7__.a,null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_6__.a,{size:"7"},".col-7"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_6__.a,{size:"4"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Row__WEBPACK_IMPORTED_MODULE_7__.a,null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_6__.a,{size:"3",emptyLarge:"2"},"col-3 col-start-large-2 inside col-4")))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Row__WEBPACK_IMPORTED_MODULE_7__.a,null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_6__.a,{size:"7"},".col-7"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_6__.a,{size:"4"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Row__WEBPACK_IMPORTED_MODULE_7__.a,null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_6__.a,{size:"3"},"col-3 inside col-4")))))};emptyColumns.story={},emptyColumns.story.name="Empty columns",emptyColumns.story.parameters={mdxSource:'
\n      \n        .col-8\n        .col-4\n      \n      \n        .col-7\n        \n          \n            \n              col-3 col-start-large-2 inside col-4\n            \n          \n        \n      \n      \n        .col-7\n        \n          \n            col-3 inside col-4\n          \n        \n      \n    
'};var componentMeta={title:"Col",decorators:[_storybook_addon_knobs__WEBPACK_IMPORTED_MODULE_5__.withKnobs],includeStories:["grid","nestedColumns","emptyColumns"]},mdxStoryNameToKey={Grid:"grid","Nested columns":"nestedColumns","Empty columns":"emptyColumns"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object(_home_multipass_code_vanilla_react_components_node_modules_babel_preset_react_app_node_modules_babel_runtime_helpers_esm_objectSpread2__WEBPACK_IMPORTED_MODULE_0__.a)({},componentMeta.parameters.docs||{},{page:function page(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_4__.AddContext,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentMeta:componentMeta},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(MDXContent,null))}}),__webpack_exports__.default=componentMeta,grid.__docgenInfo={description:"",methods:[],displayName:"grid"},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Col/Col.stories.mdx"]={name:"grid",docgenInfo:grid.__docgenInfo,path:"src/components/Col/Col.stories.mdx"}),nestedColumns.__docgenInfo={description:"",methods:[],displayName:"nestedColumns"},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Col/Col.stories.mdx"]={name:"nestedColumns",docgenInfo:nestedColumns.__docgenInfo,path:"src/components/Col/Col.stories.mdx"}),emptyColumns.__docgenInfo={description:"",methods:[],displayName:"emptyColumns"},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Col/Col.stories.mdx"]={name:"emptyColumns",docgenInfo:emptyColumns.__docgenInfo,path:"src/components/Col/Col.stories.mdx"})},1288:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"textInput",(function(){return textInput})),__webpack_require__.d(__webpack_exports__,"stacked",(function(){return stacked})),__webpack_require__.d(__webpack_exports__,"disabled",(function(){return disabled})),__webpack_require__.d(__webpack_exports__,"error",(function(){return error})),__webpack_require__.d(__webpack_exports__,"success",(function(){return success})),__webpack_require__.d(__webpack_exports__,"caution",(function(){return caution})),__webpack_require__.d(__webpack_exports__,"required",(function(){return required})),__webpack_require__.d(__webpack_exports__,"checkbox",(function(){return checkbox})),__webpack_require__.d(__webpack_exports__,"radioButton",(function(){return radioButton}));var _home_multipass_code_vanilla_react_components_node_modules_babel_preset_react_app_node_modules_babel_runtime_helpers_esm_objectSpread2__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__(10),_home_multipass_code_vanilla_react_components_node_modules_babel_preset_react_app_node_modules_babel_runtime_helpers_esm_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__(3),_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__=(__webpack_require__(1),__webpack_require__(0)),_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__(2),_storybook_addon_knobs__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__(5),_Input__WEBPACK_IMPORTED_MODULE_6__=__webpack_require__(24),layoutProps={};function MDXContent(_ref){var components=_ref.components,props=Object(_home_multipass_code_vanilla_react_components_node_modules_babel_preset_react_app_node_modules_babel_runtime_helpers_esm_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_1__.a)(_ref,["components"]);return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("wrapper",Object.assign({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_4__.Meta,{title:"Input",component:_Input__WEBPACK_IMPORTED_MODULE_6__.a,decorators:[_storybook_addon_knobs__WEBPACK_IMPORTED_MODULE_5__.withKnobs],mdxType:"Meta"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("h3",{id:"input"},"Input"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("p",null,"This is a ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("a",Object.assign({parentName:"p"},{href:"https://reactjs.org/",target:"_blank",rel:["nofollow","noopener","noreferrer"]}),"React")," component for the Vanilla ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("a",Object.assign({parentName:"p"},{href:"https://docs.vanillaframework.io/base/forms/#input",target:"_blank",rel:["nofollow","noopener","noreferrer"]}),"Input"),"."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("p",null,"An input field where the user can enter data, which can vary in many ways, depending on the type attribute."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("h3",{id:"props"},"Props"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_4__.Props,{of:_Input__WEBPACK_IMPORTED_MODULE_6__.a,mdxType:"Props"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("h3",{id:"text-input"},"Text input"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_4__.Preview,{mdxType:"Preview"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_4__.Story,{name:"Text input",mdxType:"Story"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Input__WEBPACK_IMPORTED_MODULE_6__.a,{type:"text",id:"exampleTextInput2",placeholder:"example@canonical.com",label:"Email address",mdxType:"Input"}))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("h3",{id:"stacked"},"Stacked"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_4__.Preview,{mdxType:"Preview"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_4__.Story,{name:"Stacked",mdxType:"Story"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Input__WEBPACK_IMPORTED_MODULE_6__.a,{type:"text",id:"exampleTextInput3",placeholder:"example@canonical.com",stacked:!0,label:"Email address",mdxType:"Input"}))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("h3",{id:"disabled"},"Disabled"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_4__.Preview,{mdxType:"Preview"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_4__.Story,{name:"Disabled",mdxType:"Story"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Input__WEBPACK_IMPORTED_MODULE_6__.a,{type:"text",id:"exampleTextInput4",placeholder:"example@canonical.com",disabled:!0,label:"Email address",mdxType:"Input"}))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("h3",{id:"error"},"Error"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_4__.Preview,{mdxType:"Preview"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_4__.Story,{name:"Error",mdxType:"Story"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Input__WEBPACK_IMPORTED_MODULE_6__.a,{type:"text",id:"exampleTextInput5",placeholder:"example@canonical.com",error:"This field is required.",label:"Email address",mdxType:"Input"}))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("h3",{id:"success"},"Success"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_4__.Preview,{mdxType:"Preview"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_4__.Story,{name:"Success",mdxType:"Story"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Input__WEBPACK_IMPORTED_MODULE_6__.a,{type:"text",id:"exampleTextInput6",placeholder:"example@canonical.com",success:"Verified.",label:"Email address",mdxType:"Input"}))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("h3",{id:"caution"},"Caution"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_4__.Preview,{mdxType:"Preview"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_4__.Story,{name:"Caution",mdxType:"Story"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Input__WEBPACK_IMPORTED_MODULE_6__.a,{type:"text",id:"exampleTextInput7",placeholder:"example@canonical.com",caution:"No validation is performed in preview mode.",label:"Email address",mdxType:"Input"}))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("h3",{id:"required"},"Required"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_4__.Preview,{mdxType:"Preview"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_4__.Story,{name:"Required",mdxType:"Story"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Input__WEBPACK_IMPORTED_MODULE_6__.a,{type:"text",id:"exampleTextInput8",placeholder:"example@canonical.com",required:!0,label:"Email address",mdxType:"Input"}))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("h3",{id:"checkbox"},"Checkbox"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_4__.Preview,{mdxType:"Preview"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_4__.Story,{name:"Checkbox",mdxType:"Story"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Input__WEBPACK_IMPORTED_MODULE_6__.a,{type:"checkbox",id:"checkExample12",defaultChecked:!0,label:"HTML",mdxType:"Input"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Input__WEBPACK_IMPORTED_MODULE_6__.a,{type:"checkbox",id:"checkExample22",label:"CSS",mdxType:"Input"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Input__WEBPACK_IMPORTED_MODULE_6__.a,{type:"checkbox",id:"checkExample32",disabled:"disabled",label:"PHP",mdxType:"Input"}))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("h3",{id:"radio-button"},"Radio button"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_4__.Preview,{mdxType:"Preview"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_4__.Story,{name:"Radio button",mdxType:"Story"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Input__WEBPACK_IMPORTED_MODULE_6__.a,{label:"Linux",type:"radio",name:"RadioOptions",id:"Radio12",defaultValue:"option1",defaultChecked:!0,mdxType:"Input"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Input__WEBPACK_IMPORTED_MODULE_6__.a,{label:"Mac OS",type:"radio",name:"RadioOptions",id:"Radio22",defaultValue:"option2",mdxType:"Input"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Input__WEBPACK_IMPORTED_MODULE_6__.a,{label:"Windows",type:"radio",name:"RadioOptions",id:"Radio42",defaultValue:"option4",disabled:"disabled",mdxType:"Input"}))))}MDXContent.isMDXComponent=!0;var textInput=function textInput(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Input__WEBPACK_IMPORTED_MODULE_6__.a,{type:"text",id:"exampleTextInput2",placeholder:"example@canonical.com",label:"Email address"})};textInput.story={},textInput.story.name="Text input",textInput.story.parameters={mdxSource:''};var stacked=function stacked(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Input__WEBPACK_IMPORTED_MODULE_6__.a,{type:"text",id:"exampleTextInput3",placeholder:"example@canonical.com",stacked:!0,label:"Email address"})};stacked.story={},stacked.story.name="Stacked",stacked.story.parameters={mdxSource:''};var disabled=function disabled(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Input__WEBPACK_IMPORTED_MODULE_6__.a,{type:"text",id:"exampleTextInput4",placeholder:"example@canonical.com",disabled:!0,label:"Email address"})};disabled.story={},disabled.story.name="Disabled",disabled.story.parameters={mdxSource:''};var error=function error(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Input__WEBPACK_IMPORTED_MODULE_6__.a,{type:"text",id:"exampleTextInput5",placeholder:"example@canonical.com",error:"This field is required.",label:"Email address"})};error.story={},error.story.name="Error",error.story.parameters={mdxSource:''};var success=function success(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Input__WEBPACK_IMPORTED_MODULE_6__.a,{type:"text",id:"exampleTextInput6",placeholder:"example@canonical.com",success:"Verified.",label:"Email address"})};success.story={},success.story.name="Success",success.story.parameters={mdxSource:''};var caution=function caution(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Input__WEBPACK_IMPORTED_MODULE_6__.a,{type:"text",id:"exampleTextInput7",placeholder:"example@canonical.com",caution:"No validation is performed in preview mode.",label:"Email address"})};caution.story={},caution.story.name="Caution",caution.story.parameters={mdxSource:''};var required=function required(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Input__WEBPACK_IMPORTED_MODULE_6__.a,{type:"text",id:"exampleTextInput8",placeholder:"example@canonical.com",required:!0,label:"Email address"})};required.story={},required.story.name="Required",required.story.parameters={mdxSource:''};var checkbox=function checkbox(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Input__WEBPACK_IMPORTED_MODULE_6__.a,{type:"checkbox",id:"checkExample12",defaultChecked:!0,label:"HTML"})};checkbox.story={},checkbox.story.name="Checkbox",checkbox.story.parameters={mdxSource:''};var radioButton=function radioButton(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Input__WEBPACK_IMPORTED_MODULE_6__.a,{label:"Linux",type:"radio",name:"RadioOptions",id:"Radio12",defaultValue:"option1",defaultChecked:!0})};radioButton.story={},radioButton.story.name="Radio button",radioButton.story.parameters={mdxSource:''};var componentMeta={title:"Input",decorators:[_storybook_addon_knobs__WEBPACK_IMPORTED_MODULE_5__.withKnobs],includeStories:["textInput","stacked","disabled","error","success","caution","required","checkbox","radioButton"]},mdxStoryNameToKey={"Text input":"textInput",Stacked:"stacked",Disabled:"disabled",Error:"error",Success:"success",Caution:"caution",Required:"required",Checkbox:"checkbox","Radio button":"radioButton"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object(_home_multipass_code_vanilla_react_components_node_modules_babel_preset_react_app_node_modules_babel_runtime_helpers_esm_objectSpread2__WEBPACK_IMPORTED_MODULE_0__.a)({},componentMeta.parameters.docs||{},{page:function page(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_4__.AddContext,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentMeta:componentMeta},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(MDXContent,null))}}),__webpack_exports__.default=componentMeta,textInput.__docgenInfo={description:"",methods:[],displayName:"textInput"},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Input/Input.stories.mdx"]={name:"textInput",docgenInfo:textInput.__docgenInfo,path:"src/components/Input/Input.stories.mdx"}),stacked.__docgenInfo={description:"",methods:[],displayName:"stacked"},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Input/Input.stories.mdx"]={name:"stacked",docgenInfo:stacked.__docgenInfo,path:"src/components/Input/Input.stories.mdx"}),disabled.__docgenInfo={description:"",methods:[],displayName:"disabled"},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Input/Input.stories.mdx"]={name:"disabled",docgenInfo:disabled.__docgenInfo,path:"src/components/Input/Input.stories.mdx"}),error.__docgenInfo={description:"",methods:[],displayName:"error"},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Input/Input.stories.mdx"]={name:"error",docgenInfo:error.__docgenInfo,path:"src/components/Input/Input.stories.mdx"}),success.__docgenInfo={description:"",methods:[],displayName:"success"},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Input/Input.stories.mdx"]={name:"success",docgenInfo:success.__docgenInfo,path:"src/components/Input/Input.stories.mdx"}),caution.__docgenInfo={description:"",methods:[],displayName:"caution"},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Input/Input.stories.mdx"]={name:"caution",docgenInfo:caution.__docgenInfo,path:"src/components/Input/Input.stories.mdx"}),required.__docgenInfo={description:"",methods:[],displayName:"required"},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Input/Input.stories.mdx"]={name:"required",docgenInfo:required.__docgenInfo,path:"src/components/Input/Input.stories.mdx"}),checkbox.__docgenInfo={description:"",methods:[],displayName:"checkbox"},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Input/Input.stories.mdx"]={name:"checkbox",docgenInfo:checkbox.__docgenInfo,path:"src/components/Input/Input.stories.mdx"}),radioButton.__docgenInfo={description:"",methods:[],displayName:"radioButton"},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Input/Input.stories.mdx"]={name:"radioButton",docgenInfo:radioButton.__docgenInfo,path:"src/components/Input/Input.stories.mdx"})},1289:function(module,exports,__webpack_require__){},1290:function(module,exports,__webpack_require__){},1291:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"defaultStory",(function(){return defaultStory})),__webpack_require__.d(__webpack_exports__,"truncated",(function(){return truncated})),__webpack_require__.d(__webpack_exports__,"disabledControls",(function(){return disabledControls}));var _home_multipass_code_vanilla_react_components_node_modules_babel_preset_react_app_node_modules_babel_runtime_helpers_esm_objectSpread2__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__(10),_home_multipass_code_vanilla_react_components_node_modules_babel_preset_react_app_node_modules_babel_runtime_helpers_esm_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__(3),_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__=(__webpack_require__(1),__webpack_require__(0)),_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__(2),_storybook_addon_knobs__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__(5),_Pagination__WEBPACK_IMPORTED_MODULE_6__=__webpack_require__(66),layoutProps={};function MDXContent(_ref){var components=_ref.components,props=Object(_home_multipass_code_vanilla_react_components_node_modules_babel_preset_react_app_node_modules_babel_runtime_helpers_esm_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_1__.a)(_ref,["components"]);return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("wrapper",Object.assign({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_4__.Meta,{title:"Pagination",component:_Pagination__WEBPACK_IMPORTED_MODULE_6__.a,decorators:[_storybook_addon_knobs__WEBPACK_IMPORTED_MODULE_5__.withKnobs],mdxType:"Meta"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("h3",{id:"pagination"},"Pagination"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("p",null,"This is a ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("a",Object.assign({parentName:"p"},{href:"https://reactjs.org/",target:"_blank",rel:["nofollow","noopener","noreferrer"]}),"React")," component for the Vanilla ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("a",Object.assign({parentName:"p"},{href:"https://docs.vanillaframework.io/patterns/pagination/",target:"_blank",rel:["nofollow","noopener","noreferrer"]}),"Pagination"),"."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("p",null,"The pagination component should be used to navigate between pages of content. Depending on the length provided, the pagination component will automatically scale."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("h3",{id:"props"},"Props"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_4__.Props,{of:_Pagination__WEBPACK_IMPORTED_MODULE_6__.a,mdxType:"Props"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("h3",{id:"default"},"Default"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_4__.Preview,{mdxType:"Preview"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_4__.Story,{name:"Default",mdxType:"Story"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Pagination__WEBPACK_IMPORTED_MODULE_6__.a,{itemsPerPage:20,totalItems:100,paginate:function paginate(){},currentPage:3,mdxType:"Pagination"}))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("h3",{id:"truncated"},"Truncated"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_4__.Preview,{mdxType:"Preview"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_4__.Story,{name:"Truncated",mdxType:"Story"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Pagination__WEBPACK_IMPORTED_MODULE_6__.a,{itemsPerPage:10,totalItems:1e3,paginate:function paginate(){},currentPage:34,mdxType:"Pagination"}))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("h3",{id:"disabled-controls"},"Disabled controls"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_4__.Preview,{mdxType:"Preview"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_4__.Story,{name:"Disabled controls",mdxType:"Story"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Pagination__WEBPACK_IMPORTED_MODULE_6__.a,{itemsPerPage:20,totalItems:100,paginate:function paginate(){},currentPage:1,mdxType:"Pagination"}))))}MDXContent.isMDXComponent=!0;var defaultStory=function defaultStory(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Pagination__WEBPACK_IMPORTED_MODULE_6__.a,{itemsPerPage:20,totalItems:100,paginate:function paginate(){},currentPage:3})};defaultStory.story={},defaultStory.story.name="Default",defaultStory.story.parameters={mdxSource:" {}} currentPage={3} />"};var truncated=function truncated(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Pagination__WEBPACK_IMPORTED_MODULE_6__.a,{itemsPerPage:10,totalItems:1e3,paginate:function paginate(){},currentPage:34})};truncated.story={},truncated.story.name="Truncated",truncated.story.parameters={mdxSource:" {}} currentPage={34} />"};var disabledControls=function disabledControls(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Pagination__WEBPACK_IMPORTED_MODULE_6__.a,{itemsPerPage:20,totalItems:100,paginate:function paginate(){},currentPage:1})};disabledControls.story={},disabledControls.story.name="Disabled controls",disabledControls.story.parameters={mdxSource:" {}} currentPage={1} />"};var componentMeta={title:"Pagination",decorators:[_storybook_addon_knobs__WEBPACK_IMPORTED_MODULE_5__.withKnobs],includeStories:["defaultStory","truncated","disabledControls"]},mdxStoryNameToKey={Default:"defaultStory",Truncated:"truncated","Disabled controls":"disabledControls"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object(_home_multipass_code_vanilla_react_components_node_modules_babel_preset_react_app_node_modules_babel_runtime_helpers_esm_objectSpread2__WEBPACK_IMPORTED_MODULE_0__.a)({},componentMeta.parameters.docs||{},{page:function page(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_4__.AddContext,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentMeta:componentMeta},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(MDXContent,null))}}),__webpack_exports__.default=componentMeta,defaultStory.__docgenInfo={description:"",methods:[],displayName:"defaultStory"},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Pagination/Pagination.stories.mdx"]={name:"defaultStory",docgenInfo:defaultStory.__docgenInfo,path:"src/components/Pagination/Pagination.stories.mdx"}),truncated.__docgenInfo={description:"",methods:[],displayName:"truncated"},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Pagination/Pagination.stories.mdx"]={name:"truncated",docgenInfo:truncated.__docgenInfo,path:"src/components/Pagination/Pagination.stories.mdx"}),disabledControls.__docgenInfo={description:"",methods:[],displayName:"disabledControls"},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Pagination/Pagination.stories.mdx"]={name:"disabledControls",docgenInfo:disabledControls.__docgenInfo,path:"src/components/Pagination/Pagination.stories.mdx"})},1292:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"defaultStory",(function(){return defaultStory}));var _home_multipass_code_vanilla_react_components_node_modules_babel_preset_react_app_node_modules_babel_runtime_helpers_esm_objectSpread2__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__(10),_home_multipass_code_vanilla_react_components_node_modules_babel_preset_react_app_node_modules_babel_runtime_helpers_esm_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__(3),_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__=(__webpack_require__(1),__webpack_require__(0)),_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__(2),_storybook_addon_knobs__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__(5),_Row__WEBPACK_IMPORTED_MODULE_6__=__webpack_require__(105),layoutProps={};function MDXContent(_ref){var components=_ref.components,props=Object(_home_multipass_code_vanilla_react_components_node_modules_babel_preset_react_app_node_modules_babel_runtime_helpers_esm_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_1__.a)(_ref,["components"]);return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("wrapper",Object.assign({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_4__.Meta,{title:"Row",component:_Row__WEBPACK_IMPORTED_MODULE_6__.a,decorators:[_storybook_addon_knobs__WEBPACK_IMPORTED_MODULE_5__.withKnobs],mdxType:"Meta"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("h3",{id:"row"},"Row"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("p",null,"This is a ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("a",Object.assign({parentName:"p"},{href:"https://reactjs.org/",target:"_blank",rel:["nofollow","noopener","noreferrer"]}),"React")," component for use within the Vanilla ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("a",Object.assign({parentName:"p"},{href:"https://docs.vanillaframework.io/patterns/grid/",target:"_blank",rel:["nofollow","noopener","noreferrer"]}),"Grid"),"."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("p",null,"Vanilla has a responsive grid using a combination of rows and columns."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("h3",{id:"props"},"Props"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_4__.Props,{of:_Row__WEBPACK_IMPORTED_MODULE_6__.a,mdxType:"Props"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("h3",{id:"row-1"},"Row"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_4__.Preview,{mdxType:"Preview"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_4__.Story,{name:"Default",mdxType:"Story"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Row__WEBPACK_IMPORTED_MODULE_6__.a,{mdxType:"Row"},"children..."))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("p",null,"See ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("a",Object.assign({parentName:"p"},{href:"/#/Col"}),"Col")," for grid details."))}MDXContent.isMDXComponent=!0;var defaultStory=function defaultStory(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Row__WEBPACK_IMPORTED_MODULE_6__.a,null,"children...")};defaultStory.story={},defaultStory.story.name="Default",defaultStory.story.parameters={mdxSource:"children..."};var componentMeta={title:"Row",decorators:[_storybook_addon_knobs__WEBPACK_IMPORTED_MODULE_5__.withKnobs],includeStories:["defaultStory"]},mdxStoryNameToKey={Default:"defaultStory"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object(_home_multipass_code_vanilla_react_components_node_modules_babel_preset_react_app_node_modules_babel_runtime_helpers_esm_objectSpread2__WEBPACK_IMPORTED_MODULE_0__.a)({},componentMeta.parameters.docs||{},{page:function page(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_4__.AddContext,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentMeta:componentMeta},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(MDXContent,null))}}),__webpack_exports__.default=componentMeta,defaultStory.__docgenInfo={description:"",methods:[],displayName:"defaultStory"},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Row/Row.stories.mdx"]={name:"defaultStory",docgenInfo:defaultStory.__docgenInfo,path:"src/components/Row/Row.stories.mdx"})},1293:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"select",(function(){return select})),__webpack_require__.d(__webpack_exports__,"selectMultiple",(function(){return selectMultiple}));var _home_multipass_code_vanilla_react_components_node_modules_babel_preset_react_app_node_modules_babel_runtime_helpers_esm_objectSpread2__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__(10),_home_multipass_code_vanilla_react_components_node_modules_babel_preset_react_app_node_modules_babel_runtime_helpers_esm_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__(3),_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__=(__webpack_require__(1),__webpack_require__(0)),_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__(2),_storybook_addon_knobs__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__(5),_Select__WEBPACK_IMPORTED_MODULE_6__=__webpack_require__(81),layoutProps={};function MDXContent(_ref){var components=_ref.components,props=Object(_home_multipass_code_vanilla_react_components_node_modules_babel_preset_react_app_node_modules_babel_runtime_helpers_esm_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_1__.a)(_ref,["components"]);return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("wrapper",Object.assign({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_4__.Meta,{title:"Select",component:_Select__WEBPACK_IMPORTED_MODULE_6__.a,decorators:[_storybook_addon_knobs__WEBPACK_IMPORTED_MODULE_5__.withKnobs],mdxType:"Meta"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("h3",{id:"select"},"Select"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("p",null,"This is a ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("a",Object.assign({parentName:"p"},{href:"https://reactjs.org/",target:"_blank",rel:["nofollow","noopener","noreferrer"]}),"React")," component for the Vanilla ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("a",Object.assign({parentName:"p"},{href:"https://docs.vanillaframework.io/base/forms/#select",target:"_blank",rel:["nofollow","noopener","noreferrer"]}),"Select"),"."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("p",null,"Use the Select component to create a drop-down list."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("h3",{id:"props"},"Props"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_4__.Props,{of:_Select__WEBPACK_IMPORTED_MODULE_6__.a,mdxType:"Props"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("h3",{id:"select-1"},"Select"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_4__.Preview,{mdxType:"Preview"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_4__.Story,{name:"Select",mdxType:"Story"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Select__WEBPACK_IMPORTED_MODULE_6__.a,{name:"exampleSelect",id:"exampleSelect2",defaultValue:"",options:[{value:"",disabled:"disabled",label:"Select an option"},{value:"1",label:"Cosmic Cuttlefish"},{value:"2",label:"Bionic Beaver"},{value:"3",label:"Xenial Xerus"}],label:"Ubuntu releases",mdxType:"Select"}))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("h3",{id:"select-multiple"},"Select multiple"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_4__.Preview,{mdxType:"Preview"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_4__.Story,{name:"Select multiple",mdxType:"Story"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Select__WEBPACK_IMPORTED_MODULE_6__.a,{name:"exampleSelectMulti",id:"exampleSelectMulti2",options:[{value:"",disabled:"disabled",label:"Select..."},{value:"1",label:"Cosmic Cuttlefish"},{value:"2",label:"Bionic Beaver"},{value:"3",label:"Xenial Xerus"}],label:"Ubuntu releases",multiple:!0,mdxType:"Select"}))))}MDXContent.isMDXComponent=!0;var select=function select(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Select__WEBPACK_IMPORTED_MODULE_6__.a,{name:"exampleSelect",id:"exampleSelect2",defaultValue:"",options:[{value:"",disabled:"disabled",label:"Select an option"},{value:"1",label:"Cosmic Cuttlefish"},{value:"2",label:"Bionic Beaver"},{value:"3",label:"Xenial Xerus"}],label:"Ubuntu releases"})};select.story={},select.story.name="Select",select.story.parameters={mdxSource:''};var componentMeta={title:"Select",decorators:[_storybook_addon_knobs__WEBPACK_IMPORTED_MODULE_5__.withKnobs],includeStories:["select","selectMultiple"]},mdxStoryNameToKey={Select:"select","Select multiple":"selectMultiple"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object(_home_multipass_code_vanilla_react_components_node_modules_babel_preset_react_app_node_modules_babel_runtime_helpers_esm_objectSpread2__WEBPACK_IMPORTED_MODULE_0__.a)({},componentMeta.parameters.docs||{},{page:function page(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_4__.AddContext,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentMeta:componentMeta},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(MDXContent,null))}}),__webpack_exports__.default=componentMeta,select.__docgenInfo={description:"",methods:[],displayName:"select"},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Select/Select.stories.mdx"]={name:"select",docgenInfo:select.__docgenInfo,path:"src/components/Select/Select.stories.mdx"}),selectMultiple.__docgenInfo={description:"",methods:[],displayName:"selectMultiple"},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Select/Select.stories.mdx"]={name:"selectMultiple",docgenInfo:selectMultiple.__docgenInfo,path:"src/components/Select/Select.stories.mdx"})},1294:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"lightStrip",(function(){return lightStrip})),__webpack_require__.d(__webpack_exports__,"darkStrip",(function(){return darkStrip})),__webpack_require__.d(__webpack_exports__,"accentStrip",(function(){return accentStrip})),__webpack_require__.d(__webpack_exports__,"imageStrip",(function(){return imageStrip})),__webpack_require__.d(__webpack_exports__,"borderedStrip",(function(){return borderedStrip})),__webpack_require__.d(__webpack_exports__,"deepStrip",(function(){return deepStrip})),__webpack_require__.d(__webpack_exports__,"shallowStrip",(function(){return shallowStrip}));var _home_multipass_code_vanilla_react_components_node_modules_babel_preset_react_app_node_modules_babel_runtime_helpers_esm_objectSpread2__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__(10),_home_multipass_code_vanilla_react_components_node_modules_babel_preset_react_app_node_modules_babel_runtime_helpers_esm_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__(3),react__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__(1),react__WEBPACK_IMPORTED_MODULE_2___default=__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_2__),_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__(0),_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__(2),_storybook_addon_knobs__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__(5),_Col__WEBPACK_IMPORTED_MODULE_6__=__webpack_require__(14),_Row__WEBPACK_IMPORTED_MODULE_7__=__webpack_require__(6),_Strip__WEBPACK_IMPORTED_MODULE_8__=__webpack_require__(40),layoutProps={};function MDXContent(_ref){var components=_ref.components,props=Object(_home_multipass_code_vanilla_react_components_node_modules_babel_preset_react_app_node_modules_babel_runtime_helpers_esm_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_1__.a)(_ref,["components"]);return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("wrapper",Object.assign({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_4__.Meta,{title:"Strip",component:_Strip__WEBPACK_IMPORTED_MODULE_8__.a,decorators:[_storybook_addon_knobs__WEBPACK_IMPORTED_MODULE_5__.withKnobs],mdxType:"Meta"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("h3",{id:"strip"},"Strip"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("p",null,"This is a ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("a",Object.assign({parentName:"p"},{href:"https://reactjs.org/",target:"_blank",rel:["nofollow","noopener","noreferrer"]}),"React")," component for the Vanilla ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("a",Object.assign({parentName:"p"},{href:"https://docs.vanillaframework.io/patterns/strip/",target:"_blank",rel:["nofollow","noopener","noreferrer"]}),"Strip"),"."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("p",null,"The strip pattern provides a full width strip container in which to wrap a row."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("h3",{id:"props"},"Props"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_4__.Props,{of:_Strip__WEBPACK_IMPORTED_MODULE_8__.a,mdxType:"Props"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("h3",{id:"light-strip"},"Light strip"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_4__.Preview,{mdxType:"Preview"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_4__.Story,{name:"Light strip",mdxType:"Story"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Strip__WEBPACK_IMPORTED_MODULE_8__.a,{type:"light",mdxType:"Strip"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("p",null,"This is a light row")))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("h3",{id:"dark-strip"},"Dark strip"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_4__.Preview,{mdxType:"Preview"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_4__.Story,{name:"Dark strip",mdxType:"Story"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Strip__WEBPACK_IMPORTED_MODULE_8__.a,{type:"dark",mdxType:"Strip"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("p",null,"This is a dark row")))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("h3",{id:"accent-strip"},"Accent strip"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_4__.Preview,{mdxType:"Preview"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_4__.Story,{name:"Accent strip",mdxType:"Story"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Strip__WEBPACK_IMPORTED_MODULE_8__.a,{type:"accent",element:"section",includeCol:!1,mdxType:"Strip"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_6__.a,{size:"8",mdxType:"Col"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("h1",null,"Still running Ubuntu 14.04 LTS?"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("p",null,"Learn how to maintain ongoing security compliance for your Ubuntu 14.04 LTS systems.")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_6__.a,{size:"4",mdxType:"Col"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("img",{src:"https://assets.ubuntu.com/v1/2217d1c8-Security.svg",alt:"Placeholder"}))))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("h3",{id:"image-strip"},"Image strip"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_4__.Preview,{mdxType:"Preview"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_4__.Story,{name:"Image strip",mdxType:"Story"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(react__WEBPACK_IMPORTED_MODULE_2___default.a.Fragment,null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Strip__WEBPACK_IMPORTED_MODULE_8__.a,{background:"https://assets.ubuntu.com/sites/ubuntu/latest/u/img/backgrounds/image-background-paper.png",includeCol:!1,element:"section",light:!0,rowClassName:"u-vertically-center",type:"image",mdxType:"Strip"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_6__.a,{size:"8",mdxType:"Col"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("h1",null,"Get started with big software, fast"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("p",null,"conjure-up lets you summon up a big-software stack as a “spell” — a model of the stack, combined with extra know-how to get you from an installed stack to a fully usable one. Start using your big software instead of learning how to deploy it.")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_6__.a,{size:"4",className:"u-hide--small u-align--center",mdxType:"Col"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("img",{src:"https://assets.ubuntu.com/v1/1abb8716-conjure-up-illustration.svg",alt:"Placeholder"}))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Strip__WEBPACK_IMPORTED_MODULE_8__.a,{background:"https://assets.ubuntu.com/v1/9b68976e-Aubergine_suru_background_2.png",dark:!0,includeCol:!1,element:"section",type:"image",mdxType:"Strip"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Row__WEBPACK_IMPORTED_MODULE_7__.a,{className:"u-vertically-center",mdxType:"Row"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_6__.a,{size:"8",mdxType:"Col"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("h1",null,"We are Canonical"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("p",null,"It is our mission to make open source software available to people everywhere. We believe the best way to fuel innovation is to give the innovators the technology they need.")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_6__.a,{size:"4",className:"u-hide--small u-align--center",mdxType:"Col"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("img",{src:"https://assets.ubuntu.com/v1/9c74eb2d-logo-canonical-white.svg",alt:"Placeholder"}))))))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("h3",{id:"bordered-strip"},"Bordered strip"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_4__.Preview,{mdxType:"Preview"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_4__.Story,{name:"Bordered strip",mdxType:"Story"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Strip__WEBPACK_IMPORTED_MODULE_8__.a,{bordered:!0,colSize:"8",element:"section",mdxType:"Strip"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("h2",null,"The node lifecycle"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("p",null,"Each machine (“node”) managed by MAAS goes through a lifecycle — from its enlistment or onboarding to MAAS, through commissioning when we inventory and can setup firmware or other hardware-specific elements, then allocation to a user and deployment, and finally they are released back to the pool or retired altogether.")))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("h3",{id:"deep-strip"},"Deep strip"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_4__.Preview,{mdxType:"Preview"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_4__.Story,{name:"Deep strip",mdxType:"Story"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Strip__WEBPACK_IMPORTED_MODULE_8__.a,{deep:!0,includeCol:!1,element:"section",type:"light",rowClassName:"u-vertically-center",mdxType:"Strip"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_6__.a,{size:"8",mdxType:"Col"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("h2",null,"The fastest way to go from development to production in IoT"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("p",null,"Learn about how Ubuntu Core and snaps can help you build your connected devices.")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_6__.a,{size:"4",className:"u-hide--small u-align--center",mdxType:"Col"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("img",{src:"https://assets.ubuntu.com/v1/808a4e5b-iot.png?h=300",alt:"Placeholder"}))))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("h3",{id:"shallow-strip"},"Shallow strip"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_4__.Preview,{mdxType:"Preview"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_4__.Story,{name:"Shallow strip",mdxType:"Story"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Strip__WEBPACK_IMPORTED_MODULE_8__.a,{shallow:!0,includeCol:!1,element:"section",type:"light",rowClassName:"u-vertically-center",mdxType:"Strip"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_6__.a,{size:"8",mdxType:"Col"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("h2",null,"The fastest way to go from development to production in IoT"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("p",null,"Learn about how Ubuntu Core and snaps can help you build your connected devices.")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_6__.a,{size:"4",className:"u-hide--small u-align--center",mdxType:"Col"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("img",{src:"https://assets.ubuntu.com/v1/808a4e5b-iot.png?h=300",alt:"Placeholder"}))))))}MDXContent.isMDXComponent=!0;var lightStrip=function lightStrip(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Strip__WEBPACK_IMPORTED_MODULE_8__.a,{type:"light"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("p",null,"This is a light row"))};lightStrip.story={},lightStrip.story.name="Light strip",lightStrip.story.parameters={mdxSource:'\n      
This is a light row
\n    '};var darkStrip=function darkStrip(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Strip__WEBPACK_IMPORTED_MODULE_8__.a,{type:"dark"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("p",null,"This is a dark row"))};darkStrip.story={},darkStrip.story.name="Dark strip",darkStrip.story.parameters={mdxSource:'\n      
This is a dark row
\n    '};var accentStrip=function accentStrip(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Strip__WEBPACK_IMPORTED_MODULE_8__.a,{type:"accent",element:"section",includeCol:!1},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_6__.a,{size:"8"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("h1",null,"Still running Ubuntu 14.04 LTS?"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("p",null,"Learn how to maintain ongoing security compliance for your Ubuntu 14.04 LTS systems.")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_6__.a,{size:"4"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("img",{src:"https://assets.ubuntu.com/v1/2217d1c8-Security.svg",alt:"Placeholder"})))};accentStrip.story={},accentStrip.story.name="Accent strip",accentStrip.story.parameters={mdxSource:'\n      \n        
Still running Ubuntu 14.04 LTS?
\n        
\n          Learn how to maintain ongoing security compliance for your Ubuntu\n          14.04 LTS systems.\n        
\n      \n      \n        Placeholder\n      \n    '};var imageStrip=function imageStrip(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(react__WEBPACK_IMPORTED_MODULE_2___default.a.Fragment,null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Strip__WEBPACK_IMPORTED_MODULE_8__.a,{background:"https://assets.ubuntu.com/sites/ubuntu/latest/u/img/backgrounds/image-background-paper.png",includeCol:!1,element:"section",light:!0,rowClassName:"u-vertically-center",type:"image"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_6__.a,{size:"8"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("h1",null,"Get started with big software, fast"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("p",null,"conjure-up lets you summon up a big-software stack as a “spell” — a model of the stack, combined with extra know-how to get you from an installed stack to a fully usable one. Start using your big software instead of learning how to deploy it.")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_6__.a,{size:"4",className:"u-hide--small u-align--center"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("img",{src:"https://assets.ubuntu.com/v1/1abb8716-conjure-up-illustration.svg",alt:"Placeholder"}))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Strip__WEBPACK_IMPORTED_MODULE_8__.a,{background:"https://assets.ubuntu.com/v1/9b68976e-Aubergine_suru_background_2.png",dark:!0,includeCol:!1,element:"section",type:"image"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Row__WEBPACK_IMPORTED_MODULE_7__.a,{className:"u-vertically-center"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_6__.a,{size:"8"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("h1",null,"We are Canonical"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("p",null,"It is our mission to make open source software available to people everywhere. We believe the best way to fuel innovation is to give the innovators the technology they need.")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_6__.a,{size:"4",className:"u-hide--small u-align--center"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("img",{src:"https://assets.ubuntu.com/v1/9c74eb2d-logo-canonical-white.svg",alt:"Placeholder"})))))};imageStrip.story={},imageStrip.story.name="Image strip",imageStrip.story.parameters={mdxSource:'<>\n      \n        \n          
Get started with big software, fast
\n          
\n            conjure-up lets you summon up a big-software stack as a “spell” — a\n            model of the stack, combined with extra know-how to get you from an\n            installed stack to a fully usable one. Start using your big software\n            instead of learning how to deploy it.\n          
\n        \n        \n          Placeholder\n        \n      \n      \n        \n          \n            
We are Canonical
\n            
\n              It is our mission to make open source software available to people\n              everywhere. We believe the best way to fuel innovation is to give\n              the innovators the technology they need.\n            
\n          \n          \n            Placeholder\n          \n        \n      \n    '};var borderedStrip=function borderedStrip(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Strip__WEBPACK_IMPORTED_MODULE_8__.a,{bordered:!0,colSize:"8",element:"section"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("h2",null,"The node lifecycle"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("p",null,"Each machine (“node”) managed by MAAS goes through a lifecycle — from its enlistment or onboarding to MAAS, through commissioning when we inventory and can setup firmware or other hardware-specific elements, then allocation to a user and deployment, and finally they are released back to the pool or retired altogether."))};borderedStrip.story={},borderedStrip.story.name="Bordered strip",borderedStrip.story.parameters={mdxSource:'\n      
The node lifecycle
\n      
\n        Each machine (“node”) managed by MAAS goes through a lifecycle — from\n        its enlistment or onboarding to MAAS, through commissioning when we\n        inventory and can setup firmware or other hardware-specific elements,\n        then allocation to a user and deployment, and finally they are released\n        back to the pool or retired altogether.\n      
\n    '};var deepStrip=function deepStrip(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Strip__WEBPACK_IMPORTED_MODULE_8__.a,{deep:!0,includeCol:!1,element:"section",type:"light",rowClassName:"u-vertically-center"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_6__.a,{size:"8"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("h2",null,"The fastest way to go from development to production in IoT"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("p",null,"Learn about how Ubuntu Core and snaps can help you build your connected devices.")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_6__.a,{size:"4",className:"u-hide--small u-align--center"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("img",{src:"https://assets.ubuntu.com/v1/808a4e5b-iot.png?h=300",alt:"Placeholder"})))};deepStrip.story={},deepStrip.story.name="Deep strip",deepStrip.story.parameters={mdxSource:'\n      \n        
The fastest way to go from development to production in IoT
\n        
\n          Learn about how Ubuntu Core and snaps can help you build your\n          connected devices.\n        
\n      \n      \n        Placeholder\n      \n    '};var shallowStrip=function shallowStrip(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Strip__WEBPACK_IMPORTED_MODULE_8__.a,{shallow:!0,includeCol:!1,element:"section",type:"light",rowClassName:"u-vertically-center"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_6__.a,{size:"8"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("h2",null,"The fastest way to go from development to production in IoT"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("p",null,"Learn about how Ubuntu Core and snaps can help you build your connected devices.")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_6__.a,{size:"4",className:"u-hide--small u-align--center"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("img",{src:"https://assets.ubuntu.com/v1/808a4e5b-iot.png?h=300",alt:"Placeholder"})))};shallowStrip.story={},shallowStrip.story.name="Shallow strip",shallowStrip.story.parameters={mdxSource:'\n      \n        
The fastest way to go from development to production in IoT
\n        
\n          Learn about how Ubuntu Core and snaps can help you build your\n          connected devices.\n        
\n      \n      \n        Placeholder\n      \n    '};var componentMeta={title:"Strip",decorators:[_storybook_addon_knobs__WEBPACK_IMPORTED_MODULE_5__.withKnobs],includeStories:["lightStrip","darkStrip","accentStrip","imageStrip","borderedStrip","deepStrip","shallowStrip"]},mdxStoryNameToKey={"Light strip":"lightStrip","Dark strip":"darkStrip","Accent strip":"accentStrip","Image strip":"imageStrip","Bordered strip":"borderedStrip","Deep strip":"deepStrip","Shallow strip":"shallowStrip"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object(_home_multipass_code_vanilla_react_components_node_modules_babel_preset_react_app_node_modules_babel_runtime_helpers_esm_objectSpread2__WEBPACK_IMPORTED_MODULE_0__.a)({},componentMeta.parameters.docs||{},{page:function page(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_4__.AddContext,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentMeta:componentMeta},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(MDXContent,null))}}),__webpack_exports__.default=componentMeta,lightStrip.__docgenInfo={description:"",methods:[],displayName:"lightStrip"},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Strip/Strip.stories.mdx"]={name:"lightStrip",docgenInfo:lightStrip.__docgenInfo,path:"src/components/Strip/Strip.stories.mdx"}),darkStrip.__docgenInfo={description:"",methods:[],displayName:"darkStrip"},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Strip/Strip.stories.mdx"]={name:"darkStrip",docgenInfo:darkStrip.__docgenInfo,path:"src/components/Strip/Strip.stories.mdx"}),accentStrip.__docgenInfo={description:"",methods:[],displayName:"accentStrip"},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Strip/Strip.stories.mdx"]={name:"accentStrip",docgenInfo:accentStrip.__docgenInfo,path:"src/components/Strip/Strip.stories.mdx"}),imageStrip.__docgenInfo={description:"",methods:[],displayName:"imageStrip"},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Strip/Strip.stories.mdx"]={name:"imageStrip",docgenInfo:imageStrip.__docgenInfo,path:"src/components/Strip/Strip.stories.mdx"}),borderedStrip.__docgenInfo={description:"",methods:[],displayName:"borderedStrip"},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Strip/Strip.stories.mdx"]={name:"borderedStrip",docgenInfo:borderedStrip.__docgenInfo,path:"src/components/Strip/Strip.stories.mdx"}),deepStrip.__docgenInfo={description:"",methods:[],displayName:"deepStrip"},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Strip/Strip.stories.mdx"]={name:"deepStrip",docgenInfo:deepStrip.__docgenInfo,path:"src/components/Strip/Strip.stories.mdx"}),shallowStrip.__docgenInfo={description:"",methods:[],displayName:"shallowStrip"},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Strip/Strip.stories.mdx"]={name:"shallowStrip",docgenInfo:shallowStrip.__docgenInfo,path:"src/components/Strip/Strip.stories.mdx"})},1295:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"__page",(function(){return __page}));var _home_multipass_code_vanilla_react_components_node_modules_babel_preset_react_app_node_modules_babel_runtime_helpers_esm_objectSpread2__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__(10),_home_multipass_code_vanilla_react_components_node_modules_babel_preset_react_app_node_modules_babel_runtime_helpers_esm_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__(3),_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__=(__webpack_require__(1),__webpack_require__(0)),_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__(2),Meta=function makeShortcode(name){return function MDXDefaultShortcode(props){return console.warn("Component "+name+" was not imported, exported, or provided by MDXProvider as global scope"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("div",props)}}("Meta"),layoutProps={};function MDXContent(_ref){var components=_ref.components,props=Object(_home_multipass_code_vanilla_react_components_node_modules_babel_preset_react_app_node_modules_babel_runtime_helpers_esm_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_1__.a)(_ref,["components"]);return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("wrapper",Object.assign({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(Meta,{title:"Getting started",mdxType:"Meta"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("p",null,"This package provides ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("a",Object.assign({parentName:"p"},{href:"https://reactjs.org/",target:"_blank",rel:["nofollow","noopener","noreferrer"]}),"React")," components for ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("a",Object.assign({parentName:"p"},{href:"http://vanillaframework.io",target:"_blank",rel:["nofollow","noopener","noreferrer"]}),"Vanilla Framework"),"."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("h2",{id:"install"},"Install"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("pre",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("code",Object.assign({parentName:"pre"},{className:"language-shell"}),"yarn add @canonical/react-components\n")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("p",null,"Or if you use NPM:"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("pre",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("code",Object.assign({parentName:"pre"},{className:"language-shell"}),"npm install @canonical/react-components\n")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("h2",{id:"issues"},"Issues"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("p",null,"Please file any issues at ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("a",Object.assign({parentName:"p"},{href:"https://github.com/canonical-web-and-design/react-components/issues",target:"_blank",rel:["nofollow","noopener","noreferrer"]}),"GitHub"),"."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("h2",{id:"contributing"},"Contributing"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("p",null,"The source can be found on ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)("a",Object.assign({parentName:"p"},{href:"https://github.com/canonical-web-and-design/react-components",target:"_blank",rel:["nofollow","noopener","noreferrer"]}),"GitHub"),"."))}MDXContent.isMDXComponent=!0;var __page=function __page(){throw new Error("Docs-only story")};__page.story={parameters:{docsOnly:!0}};var componentMeta={title:"Getting started",includeStories:["__page"]},mdxStoryNameToKey={};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object(_home_multipass_code_vanilla_react_components_node_modules_babel_preset_react_app_node_modules_babel_runtime_helpers_esm_objectSpread2__WEBPACK_IMPORTED_MODULE_0__.a)({},componentMeta.parameters.docs||{},{page:function page(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_4__.AddContext,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentMeta:componentMeta},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_3__.mdx)(MDXContent,null))}}),__webpack_exports__.default=componentMeta},1297:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__);var objectSpread2=__webpack_require__(10),objectWithoutProperties=__webpack_require__(3),react=__webpack_require__(1),react_default=__webpack_require__.n(react),index_es=__webpack_require__(0),blocks=__webpack_require__(2),dist=__webpack_require__(5),slicedToArray=__webpack_require__(67),toConsumableArray=__webpack_require__(447),Pagination=__webpack_require__(66),classnames=__webpack_require__(8),classnames_default=__webpack_require__.n(classnames),Table_Table=function Table(_ref){var children=_ref.children,className=_ref.className,expanding=_ref.expanding,responsive=_ref.responsive,sortable=_ref.sortable,props=Object(objectWithoutProperties.a)(_ref,["children","className","expanding","responsive","sortable"]);return react_default.a.createElement("table",Object.assign({role:"grid",className:classnames_default()(className,{"p-table--mobile-card":responsive,"p-table--sortable":sortable,"p-table-expanding":expanding})},props),children)};Table_Table.__docgenInfo={description:"",methods:[],displayName:"Table"};var components_Table_Table=Table_Table;"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Table/Table.js"]={name:"Table",docgenInfo:Table_Table.__docgenInfo,path:"src/components/Table/Table.js"});var TableRow_TableRow=function TableRow(_ref){var children=_ref.children,props=Object(objectWithoutProperties.a)(_ref,["children"]);return react_default.a.createElement("tr",Object.assign({role:"row"},props),children)};TableRow_TableRow.__docgenInfo={description:"",methods:[],displayName:"TableRow"};var components_TableRow_TableRow=TableRow_TableRow;"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/TableRow/TableRow.js"]={name:"TableRow",docgenInfo:TableRow_TableRow.__docgenInfo,path:"src/components/TableRow/TableRow.js"});var TableHeader_TableHeader=function TableHeader(_ref){var children=_ref.children,sort=_ref.sort,props=Object(objectWithoutProperties.a)(_ref,["children","sort"]);return react_default.a.createElement("th",Object.assign({role:"columnheader","aria-sort":sort},props),children)};TableHeader_TableHeader.__docgenInfo={description:"",methods:[],displayName:"TableHeader"};var components_TableHeader_TableHeader=TableHeader_TableHeader;"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/TableHeader/TableHeader.js"]={name:"TableHeader",docgenInfo:TableHeader_TableHeader.__docgenInfo,path:"src/components/TableHeader/TableHeader.js"});var TableCell_TableCell=function TableCell(_ref){var children=_ref.children,className=_ref.className,expanding=_ref.expanding,hidden=_ref.hidden,_ref$role=_ref.role,role=void 0===_ref$role?"gridcell":_ref$role,props=Object(objectWithoutProperties.a)(_ref,["children","className","expanding","hidden","role"]);return react_default.a.createElement("td",Object.assign({role:role,"aria-hidden":hidden,className:classnames_default()(className,{"p-table-expanding__panel":expanding})},props),children)};TableCell_TableCell.__docgenInfo={description:"",methods:[],displayName:"TableCell"};var components_TableCell_TableCell=TableCell_TableCell;"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/TableCell/TableCell.js"]={name:"TableCell",docgenInfo:TableCell_TableCell.__docgenInfo,path:"src/components/TableCell/TableCell.js"});__webpack_require__(1290);var MainTable_updateSort=function updateSort(setSortKey,setSortDirection,sortKey,sortDirection){var newDirection=null;"none"===sortDirection?newDirection="ascending":"ascending"===sortDirection?newDirection="descending":sortKey=null,setSortKey(sortKey),setSortDirection(newDirection)},MainTable_MainTable_MainTable=function MainTable(_ref4){var defaultSort=_ref4.defaultSort,defaultSortDirection=_ref4.defaultSortDirection,_ref4$emptyStateMsg=_ref4.emptyStateMsg,emptyStateMsg=void 0===_ref4$emptyStateMsg?"":_ref4$emptyStateMsg,expanding=_ref4.expanding,headers=_ref4.headers,onUpdateSort=_ref4.onUpdateSort,paginate=_ref4.paginate,rows=_ref4.rows,responsive=_ref4.responsive,sortable=_ref4.sortable,sortFunction=_ref4.sortFunction,props=Object(objectWithoutProperties.a)(_ref4,["defaultSort","defaultSortDirection","emptyStateMsg","expanding","headers","onUpdateSort","paginate","rows","responsive","sortable","sortFunction"]),_useState=Object(react.useState)(defaultSort),_useState2=Object(slicedToArray.a)(_useState,2),currentSortKey=_useState2[0],setSortKey=_useState2[1],_useState3=Object(react.useState)(defaultSortDirection),_useState4=Object(slicedToArray.a)(_useState3,2),currentSortDirection=_useState4[0],setSortDirection=_useState4[1],_useState5=Object(react.useState)(1),_useState6=Object(slicedToArray.a)(_useState5,2),currentPage=_useState6[0],setCurrentPage=_useState6[1];Object(react.useEffect)((function(){setSortKey(defaultSort)}),[defaultSort]),Object(react.useEffect)((function(){setSortDirection(defaultSortDirection)}),[defaultSortDirection]);return react_default.a.createElement(react_default.a.Fragment,null,react_default.a.createElement(components_Table_Table,Object.assign({className:"p-main-table",expanding:expanding,sortable:sortable,responsive:responsive},props),headers&&function generateHeaders(currentSortKey,currentSortDirection,expanding,headers,sortable,setSortKey,setSortDirection){var headerItems=headers.map((function(_ref,index){var sortDirection,content=_ref.content,sortKey=_ref.sortKey,props=Object(objectWithoutProperties.a)(_ref,["content","sortKey"]);return sortable&&sortKey&&(sortDirection=currentSortKey===sortKey?currentSortDirection:"none"),react_default.a.createElement(components_TableHeader_TableHeader,Object.assign({key:index,sort:sortDirection,onClick:sortable&&MainTable_updateSort.bind(void 0,setSortKey,setSortDirection,sortKey,sortDirection)},props),content)}));return react_default.a.createElement("thead",null,react_default.a.createElement(components_TableRow_TableRow,null,headerItems,expanding&&react_default.a.createElement(components_TableHeader_TableHeader,{className:"u-hide"})))}(currentSortKey,currentSortDirection,expanding,headers,sortable,(function updateSort(newSort){setSortKey(newSort),onUpdateSort&&onUpdateSort(newSort)}),setSortDirection),rows&&function generateRows(currentSortDirection,currentSortKey,emptyStateMsg,expanding,paginate,rows,currentPage,setCurrentPage,sortable,sortFunction){if(0===Object.entries(rows).length&&emptyStateMsg)return react_default.a.createElement("caption",null,emptyStateMsg);var sortedRows=Object(toConsumableArray.a)(rows);sortable&¤tSortKey&&(sortFunction||(sortFunction=function sortFunction(a,b){return a.sortData&&b.sortData?a.sortData[currentSortKey]>b.sortData[currentSortKey]?"ascending"===currentSortDirection?1:-1:a.sortData[currentSortKey]rows.length&&setCurrentPage(1),slicedRows=sortedRows.slice(startIndex,startIndex+paginate)}var rowItems=slicedRows.map((function(_ref2,index){var columns=_ref2.columns,expanded=_ref2.expanded,expandedContent=_ref2.expandedContent,key=_ref2.key,rowProps=(_ref2.sortData,Object(objectWithoutProperties.a)(_ref2,["columns","expanded","expandedContent","key","sortData"])),cellItems=columns.map((function(_ref3,index){var content=_ref3.content,cellProps=Object(objectWithoutProperties.a)(_ref3,["content"]);return react_default.a.createElement(components_TableCell_TableCell,Object.assign({key:index},cellProps),content)}));return react_default.a.createElement(components_TableRow_TableRow,Object.assign({key:key||index},rowProps),cellItems,expanding&&react_default.a.createElement(components_TableCell_TableCell,{expanding:!0,hidden:!expanded},expandedContent))}));return react_default.a.createElement("tbody",null,rowItems)}(currentSortDirection,currentSortKey,emptyStateMsg,expanding,paginate,rows,currentPage,setCurrentPage,sortable,sortFunction)),paginate&&rows&&rows.length>0&&react_default.a.createElement(Pagination.a,{currentPage:currentPage,itemsPerPage:paginate,paginate:setCurrentPage,style:{marginTop:"1rem"},totalItems:rows.length}))};MainTable_MainTable_MainTable.__docgenInfo={description:"",methods:[],displayName:"MainTable"};var components_MainTable_MainTable=MainTable_MainTable_MainTable;"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/MainTable/MainTable.js"]={name:"MainTable",docgenInfo:MainTable_MainTable_MainTable.__docgenInfo,path:"src/components/MainTable/MainTable.js"});var Row=__webpack_require__(6),Col=__webpack_require__(14);__webpack_require__.d(__webpack_exports__,"defaultStory",(function(){return MainTable_stories_defaultStory})),__webpack_require__.d(__webpack_exports__,"sortable",(function(){return MainTable_stories_sortable})),__webpack_require__.d(__webpack_exports__,"expanding",(function(){return MainTable_stories_expanding})),__webpack_require__.d(__webpack_exports__,"responsive",(function(){return MainTable_stories_responsive})),__webpack_require__.d(__webpack_exports__,"paginated",(function(){return MainTable_stories_paginated})),__webpack_require__.d(__webpack_exports__,"empty",(function(){return MainTable_stories_empty}));var layoutProps={};function MDXContent(_ref){var components=_ref.components,props=Object(objectWithoutProperties.a)(_ref,["components"]);return Object(index_es.mdx)("wrapper",Object.assign({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(index_es.mdx)(blocks.Meta,{title:"MainTable",component:components_MainTable_MainTable,decorators:[dist.withKnobs],mdxType:"Meta"}),Object(index_es.mdx)("h3",{id:"maintable"},"MainTable"),Object(index_es.mdx)("p",null,"This is a ",Object(index_es.mdx)("a",Object.assign({parentName:"p"},{href:"https://reactjs.org/",target:"_blank",rel:["nofollow","noopener","noreferrer"]}),"React")," component to support many table use cases."),Object(index_es.mdx)("h3",{id:"props"},"Props"),Object(index_es.mdx)(blocks.Props,{of:components_MainTable_MainTable,mdxType:"Props"}),Object(index_es.mdx)("h3",{id:"default"},"Default"),Object(index_es.mdx)(blocks.Preview,{mdxType:"Preview"},Object(index_es.mdx)(blocks.Story,{name:"Default",mdxType:"Story"},Object(index_es.mdx)(components_MainTable_MainTable,{headers:[{content:null},{content:"Foundation Cloud"},{content:"Foundation Cloud Plus"}],rows:[{columns:[{content:"Expert delivery of an Ubuntu OpenStack cloud",role:"rowheader"},{content:"Reference architecture"},{content:"Custom architecture"}]},{columns:[{content:"Workshop and training",role:"rowheader"},{content:"2-days"},{content:"4-days"}]},{columns:[{content:"One-time price",role:"rowheader"},{content:"$75,000"},{content:"$150,000"}]}],mdxType:"MainTable"}))),Object(index_es.mdx)("h3",{id:"sortable"},"Sortable"),Object(index_es.mdx)(blocks.Preview,{mdxType:"Preview"},Object(index_es.mdx)(blocks.Story,{name:"Sortable",mdxType:"Story"},Object(index_es.mdx)(components_MainTable_MainTable,{headers:[{content:"Status",sortKey:"status"},{content:"Cores",sortKey:"cores",className:"u-align--right"},{content:"RAM",sortKey:"ram",className:"u-align--right"},{content:"Disks",sortKey:"disks",className:"u-align--right"}],rows:[{columns:[{content:"Ready",role:"rowheader"},{content:1,className:"u-align--right"},{content:"1 GiB",className:"u-align--right"},{content:2,className:"u-align--right"}],sortData:{status:"ready",cores:2,ram:1,disks:2}},{columns:[{content:"Idle",role:"rowheader"},{content:1,className:"u-align--right"},{content:"1 GiB",className:"u-align--right"},{content:2,className:"u-align--right"}],sortData:{status:"idle",cores:1,ram:1,disks:2}},{columns:[{content:"Waiting",role:"rowheader"},{content:8,className:"u-align--right"},{content:"3.9 GiB",className:"u-align--right"},{content:3,className:"u-align--right"}],sortData:{status:"waiting",cores:8,ram:3.9,disks:3}}],sortable:!0,mdxType:"MainTable"}))),Object(index_es.mdx)("h3",{id:"expanding"},"Expanding"),Object(index_es.mdx)(blocks.Preview,{mdxType:"Preview"},Object(index_es.mdx)(blocks.Story,{name:"Expanding",mdxType:"Story"},Object(index_es.mdx)(components_MainTable_MainTable,{expanding:!0,headers:[{content:"Name"},{content:"Mac address"},{content:"IP"},{content:"Rack"},{content:"Last seen"},{content:"Actions",className:"u-align--right"}],rows:[{columns:[{content:"Unknown",role:"rowheader"},{content:"2c:44:fd:80:3f:25"},{content:"10.249.0.1"},{content:"karura"},{content:"Thu, 25 Oct. 2018 13:55:21"},{content:Object(index_es.mdx)("button",{className:"u-toggle",onClick:function onClick(){return setState({expandedRow:1})}},"Show"),className:"u-align--right"}],expanded:!0,expandedContent:Object(index_es.mdx)(Row.a,{mdxType:"Row"},Object(index_es.mdx)(Col.a,{size:"8",mdxType:"Col"},Object(index_es.mdx)("h4",null,"Expanding table cell"),Object(index_es.mdx)("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur cum dicta beatae nostrum eligendi similique earum, dolorem fuga quis, sequi voluptates architecto ipsa dolorum eaque rem expedita inventore voluptas odit aspernatur alias molestias facere.")))},{columns:[{content:"Unknown",role:"rowheader"},{content:"52:54:00:3a:fe:e9"},{content:"172.16.99.191"},{content:"karura"},{content:"Wed, 3 Oct. 2018 23:08:06"},{content:Object(index_es.mdx)("button",{className:"u-toggle",onClick:function onClick(){return setState({expandedRow:2})}},"Show"),className:"u-align--right"}],expanded:!1,expandedContent:Object(index_es.mdx)(Row.a,{mdxType:"Row"},Object(index_es.mdx)(Col.a,{size:"8",mdxType:"Col"},Object(index_es.mdx)("h4",null,"Expanding table cell"),Object(index_es.mdx)("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur cum dicta beatae nostrum eligendi similique earum, dolorem fuga quis, sequi voluptates architecto ipsa dolorum eaque rem expedita inventore voluptas odit aspernatur alias molestias facere.")))},{columns:[{content:"Unknown",role:"rowheader"},{content:"52:54:00:74:c2:10"},{content:"172.16.99.192"},{content:"karura"},{content:"Wed, 17 Oct. 2018 12:18:18"},{content:Object(index_es.mdx)("button",{className:"u-toggle",onClick:function onClick(){return setState({expandedRow:3})}},"Show"),className:"u-align--right"}],expanded:!1,expandedContent:Object(index_es.mdx)(Row.a,{mdxType:"Row"},Object(index_es.mdx)(Col.a,{size:"8",mdxType:"Col"},Object(index_es.mdx)("h4",null,"Expanding table cell"),Object(index_es.mdx)("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur cum dicta beatae nostrum eligendi similique earum, dolorem fuga quis, sequi voluptates architecto ipsa dolorum eaque rem expedita inventore voluptas odit aspernatur alias molestias facere.")))}],mdxType:"MainTable"}))),Object(index_es.mdx)("h3",{id:"responsive"},"Responsive"),Object(index_es.mdx)(blocks.Preview,{mdxType:"Preview"},Object(index_es.mdx)(blocks.Story,{name:"Responsive",mdxType:"Story"},Object(index_es.mdx)(components_MainTable_MainTable,{headers:[{content:"Name"},{content:"Users",className:"u-align--right"},{content:"Units",className:"u-align--right"}],rows:[{columns:[{content:"Ready",role:"rowheader","aria-label":"Name"},{content:1,"aria-label":"Users",className:"u-align--right"},{content:"1 GiB","aria-label":"Units",className:"u-align--right"}]},{columns:[{content:"Ready",role:"rowheader","aria-label":"Name"},{content:1,"aria-label":"Users",className:"u-align--right"},{content:"1 GiB","aria-label":"Units",className:"u-align--right"}]},{columns:[{content:"Ready",role:"rowheader","aria-label":"Name"},{content:1,"aria-label":"Users",className:"u-align--right"},{content:"1 GiB","aria-label":"Units",className:"u-align--right"}]}],responsive:!0,mdxType:"MainTable"}))),Object(index_es.mdx)("h3",{id:"paginated"},"Paginated"),Object(index_es.mdx)(blocks.Preview,{mdxType:"Preview"},Object(index_es.mdx)(blocks.Story,{name:"Paginated",mdxType:"Story"},Object(index_es.mdx)(components_MainTable_MainTable,{headers:[{content:"Status"},{content:"Cores"}],paginate:5,rows:[{columns:[{content:"Ready"},{content:1}]},{columns:[{content:"Idle"},{content:4}]},{columns:[{content:"Waiting"},{content:2}]},{columns:[{content:"Ready"},{content:1}]},{columns:[{content:"Idle"},{content:4}]},{columns:[{content:"Waiting"},{content:2}]},{columns:[{content:"Ready"},{content:1}]},{columns:[{content:"Idle"},{content:4}]},{columns:[{content:"Waiting"},{content:2}]},{columns:[{content:"Ready"},{content:1}]},{columns:[{content:"Idle"},{content:4}]},{columns:[{content:"Waiting"},{content:2}]},{columns:[{content:"Ready"},{content:1}]},{columns:[{content:"Idle"},{content:4}]},{columns:[{content:"Waiting"},{content:2}]},{columns:[{content:"Ready"},{content:1}]},{columns:[{content:"Idle"},{content:4}]},{columns:[{content:"Waiting"},{content:2}]}],mdxType:"MainTable"}))),Object(index_es.mdx)("h3",{id:"empty"},"Empty"),Object(index_es.mdx)(blocks.Preview,{mdxType:"Preview"},Object(index_es.mdx)(blocks.Story,{name:"Empty",mdxType:"Story"},Object(index_es.mdx)(components_MainTable_MainTable,{headers:[{content:"Plan"},{content:"Foundation Cloud"},{content:"Foundation Cloud Plus"}],rows:[],mdxType:"MainTable"}))))}MDXContent.isMDXComponent=!0;var MainTable_stories_defaultStory=function defaultStory(){return Object(index_es.mdx)(components_MainTable_MainTable,{headers:[{content:null},{content:"Foundation Cloud"},{content:"Foundation Cloud Plus"}],rows:[{columns:[{content:"Expert delivery of an Ubuntu OpenStack cloud",role:"rowheader"},{content:"Reference architecture"},{content:"Custom architecture"}]},{columns:[{content:"Workshop and training",role:"rowheader"},{content:"2-days"},{content:"4-days"}]},{columns:[{content:"One-time price",role:"rowheader"},{content:"$75,000"},{content:"$150,000"}]}]})};MainTable_stories_defaultStory.story={},MainTable_stories_defaultStory.story.name="Default",MainTable_stories_defaultStory.story.parameters={mdxSource:''};var MainTable_stories_sortable=function sortable(){return Object(index_es.mdx)(components_MainTable_MainTable,{headers:[{content:"Status",sortKey:"status"},{content:"Cores",sortKey:"cores",className:"u-align--right"},{content:"RAM",sortKey:"ram",className:"u-align--right"},{content:"Disks",sortKey:"disks",className:"u-align--right"}],rows:[{columns:[{content:"Ready",role:"rowheader"},{content:1,className:"u-align--right"},{content:"1 GiB",className:"u-align--right"},{content:2,className:"u-align--right"}],sortData:{status:"ready",cores:2,ram:1,disks:2}},{columns:[{content:"Idle",role:"rowheader"},{content:1,className:"u-align--right"},{content:"1 GiB",className:"u-align--right"},{content:2,className:"u-align--right"}],sortData:{status:"idle",cores:1,ram:1,disks:2}},{columns:[{content:"Waiting",role:"rowheader"},{content:8,className:"u-align--right"},{content:"3.9 GiB",className:"u-align--right"},{content:3,className:"u-align--right"}],sortData:{status:"waiting",cores:8,ram:3.9,disks:3}}],sortable:!0})};MainTable_stories_sortable.story={},MainTable_stories_sortable.story.name="Sortable",MainTable_stories_sortable.story.parameters={mdxSource:''};var MainTable_stories_expanding=function expanding(){return Object(index_es.mdx)(components_MainTable_MainTable,{expanding:!0,headers:[{content:"Name"},{content:"Mac address"},{content:"IP"},{content:"Rack"},{content:"Last seen"},{content:"Actions",className:"u-align--right"}],rows:[{columns:[{content:"Unknown",role:"rowheader"},{content:"2c:44:fd:80:3f:25"},{content:"10.249.0.1"},{content:"karura"},{content:"Thu, 25 Oct. 2018 13:55:21"},{content:Object(index_es.mdx)("button",{className:"u-toggle",onClick:function onClick(){return setState({expandedRow:1})}},"Show"),className:"u-align--right"}],expanded:!0,expandedContent:Object(index_es.mdx)(Row.a,null,Object(index_es.mdx)(Col.a,{size:"8"},Object(index_es.mdx)("h4",null,"Expanding table cell"),Object(index_es.mdx)("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur cum dicta beatae nostrum eligendi similique earum, dolorem fuga quis, sequi voluptates architecto ipsa dolorum eaque rem expedita inventore voluptas odit aspernatur alias molestias facere.")))},{columns:[{content:"Unknown",role:"rowheader"},{content:"52:54:00:3a:fe:e9"},{content:"172.16.99.191"},{content:"karura"},{content:"Wed, 3 Oct. 2018 23:08:06"},{content:Object(index_es.mdx)("button",{className:"u-toggle",onClick:function onClick(){return setState({expandedRow:2})}},"Show"),className:"u-align--right"}],expanded:!1,expandedContent:Object(index_es.mdx)(Row.a,null,Object(index_es.mdx)(Col.a,{size:"8"},Object(index_es.mdx)("h4",null,"Expanding table cell"),Object(index_es.mdx)("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur cum dicta beatae nostrum eligendi similique earum, dolorem fuga quis, sequi voluptates architecto ipsa dolorum eaque rem expedita inventore voluptas odit aspernatur alias molestias facere.")))},{columns:[{content:"Unknown",role:"rowheader"},{content:"52:54:00:74:c2:10"},{content:"172.16.99.192"},{content:"karura"},{content:"Wed, 17 Oct. 2018 12:18:18"},{content:Object(index_es.mdx)("button",{className:"u-toggle",onClick:function onClick(){return setState({expandedRow:3})}},"Show"),className:"u-align--right"}],expanded:!1,expandedContent:Object(index_es.mdx)(Row.a,null,Object(index_es.mdx)(Col.a,{size:"8"},Object(index_es.mdx)("h4",null,"Expanding table cell"),Object(index_es.mdx)("p",null,"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur cum dicta beatae nostrum eligendi similique earum, dolorem fuga quis, sequi voluptates architecto ipsa dolorum eaque rem expedita inventore voluptas odit aspernatur alias molestias facere.")))}]})};MainTable_stories_expanding.story={},MainTable_stories_expanding.story.name="Expanding",MainTable_stories_expanding.story.parameters={mdxSource:' setState({\n      expandedRow: 1\n    })}>\n                  Show\n                ,\n    className: "u-align--right"\n  }],\n  expanded: true,\n  expandedContent: \n              \n                
Expanding table cell
\n                
\n                  Lorem ipsum dolor sit amet, consectetur adipisicing elit.\n                  Consequuntur cum dicta beatae nostrum eligendi similique\n                  earum, dolorem fuga quis, sequi voluptates architecto ipsa\n                  dolorum eaque rem expedita inventore voluptas odit aspernatur\n                  alias molestias facere.\n                
\n              \n            \n}, {\n  columns: [{\n    content: "Unknown",\n    role: "rowheader"\n  }, {\n    content: "52:54:00:3a:fe:e9"\n  }, {\n    content: "172.16.99.191"\n  }, {\n    content: "karura"\n  }, {\n    content: "Wed, 3 Oct. 2018 23:08:06"\n  }, {\n    content: ,\n    className: "u-align--right"\n  }],\n  expanded: false,\n  expandedContent: \n              \n                
Expanding table cell
\n                
\n                  Lorem ipsum dolor sit amet, consectetur adipisicing elit.\n                  Consequuntur cum dicta beatae nostrum eligendi similique\n                  earum, dolorem fuga quis, sequi voluptates architecto ipsa\n                  dolorum eaque rem expedita inventore voluptas odit aspernatur\n                  alias molestias facere.\n                
\n              \n            \n}, {\n  columns: [{\n    content: "Unknown",\n    role: "rowheader"\n  }, {\n    content: "52:54:00:74:c2:10"\n  }, {\n    content: "172.16.99.192"\n  }, {\n    content: "karura"\n  }, {\n    content: "Wed, 17 Oct. 2018 12:18:18"\n  }, {\n    content: ,\n    className: "u-align--right"\n  }],\n  expanded: false,\n  expandedContent: \n              \n                
Expanding table cell
\n                
\n                  Lorem ipsum dolor sit amet, consectetur adipisicing elit.\n                  Consequuntur cum dicta beatae nostrum eligendi similique\n                  earum, dolorem fuga quis, sequi voluptates architecto ipsa\n                  dolorum eaque rem expedita inventore voluptas odit aspernatur\n                  alias molestias facere.\n                
\n              \n            \n}]} />'};var MainTable_stories_responsive=function responsive(){return Object(index_es.mdx)(components_MainTable_MainTable,{headers:[{content:"Name"},{content:"Users",className:"u-align--right"},{content:"Units",className:"u-align--right"}],rows:[{columns:[{content:"Ready",role:"rowheader","aria-label":"Name"},{content:1,"aria-label":"Users",className:"u-align--right"},{content:"1 GiB","aria-label":"Units",className:"u-align--right"}]},{columns:[{content:"Ready",role:"rowheader","aria-label":"Name"},{content:1,"aria-label":"Users",className:"u-align--right"},{content:"1 GiB","aria-label":"Units",className:"u-align--right"}]},{columns:[{content:"Ready",role:"rowheader","aria-label":"Name"},{content:1,"aria-label":"Users",className:"u-align--right"},{content:"1 GiB","aria-label":"Units",className:"u-align--right"}]}],responsive:!0})};MainTable_stories_responsive.story={},MainTable_stories_responsive.story.name="Responsive",MainTable_stories_responsive.story.parameters={mdxSource:''};var MainTable_stories_paginated=function paginated(){return Object(index_es.mdx)(components_MainTable_MainTable,{headers:[{content:"Status"},{content:"Cores"}],paginate:5,rows:[{columns:[{content:"Ready"},{content:1}]},{columns:[{content:"Idle"},{content:4}]},{columns:[{content:"Waiting"},{content:2}]},{columns:[{content:"Ready"},{content:1}]},{columns:[{content:"Idle"},{content:4}]},{columns:[{content:"Waiting"},{content:2}]},{columns:[{content:"Ready"},{content:1}]},{columns:[{content:"Idle"},{content:4}]},{columns:[{content:"Waiting"},{content:2}]},{columns:[{content:"Ready"},{content:1}]},{columns:[{content:"Idle"},{content:4}]},{columns:[{content:"Waiting"},{content:2}]},{columns:[{content:"Ready"},{content:1}]},{columns:[{content:"Idle"},{content:4}]},{columns:[{content:"Waiting"},{content:2}]},{columns:[{content:"Ready"},{content:1}]},{columns:[{content:"Idle"},{content:4}]},{columns:[{content:"Waiting"},{content:2}]}]})};MainTable_stories_paginated.story={},MainTable_stories_paginated.story.name="Paginated",MainTable_stories_paginated.story.parameters={mdxSource:''};var MainTable_stories_empty=function empty(){return Object(index_es.mdx)(components_MainTable_MainTable,{headers:[{content:"Plan"},{content:"Foundation Cloud"},{content:"Foundation Cloud Plus"}],rows:[]})};MainTable_stories_empty.story={},MainTable_stories_empty.story.name="Empty",MainTable_stories_empty.story.parameters={mdxSource:''};var componentMeta={title:"MainTable",decorators:[dist.withKnobs],includeStories:["defaultStory","sortable","expanding","responsive","paginated","empty"]},mdxStoryNameToKey={Default:"defaultStory",Sortable:"sortable",Expanding:"expanding",Responsive:"responsive",Paginated:"paginated",Empty:"empty"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object(objectSpread2.a)({},componentMeta.parameters.docs||{},{page:function page(){return Object(index_es.mdx)(blocks.AddContext,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentMeta:componentMeta},Object(index_es.mdx)(MDXContent,null))}});__webpack_exports__.default=componentMeta;MainTable_stories_defaultStory.__docgenInfo={description:"",methods:[],displayName:"defaultStory"},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/MainTable/MainTable.stories.mdx"]={name:"defaultStory",docgenInfo:MainTable_stories_defaultStory.__docgenInfo,path:"src/components/MainTable/MainTable.stories.mdx"}),MainTable_stories_sortable.__docgenInfo={description:"",methods:[],displayName:"sortable"},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/MainTable/MainTable.stories.mdx"]={name:"sortable",docgenInfo:MainTable_stories_sortable.__docgenInfo,path:"src/components/MainTable/MainTable.stories.mdx"}),MainTable_stories_expanding.__docgenInfo={description:"",methods:[],displayName:"expanding"},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/MainTable/MainTable.stories.mdx"]={name:"expanding",docgenInfo:MainTable_stories_expanding.__docgenInfo,path:"src/components/MainTable/MainTable.stories.mdx"}),MainTable_stories_responsive.__docgenInfo={description:"",methods:[],displayName:"responsive"},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/MainTable/MainTable.stories.mdx"]={name:"responsive",docgenInfo:MainTable_stories_responsive.__docgenInfo,path:"src/components/MainTable/MainTable.stories.mdx"}),MainTable_stories_paginated.__docgenInfo={description:"",methods:[],displayName:"paginated"},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/MainTable/MainTable.stories.mdx"]={name:"paginated",docgenInfo:MainTable_stories_paginated.__docgenInfo,path:"src/components/MainTable/MainTable.stories.mdx"}),MainTable_stories_empty.__docgenInfo={description:"",methods:[],displayName:"empty"},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/MainTable/MainTable.stories.mdx"]={name:"empty",docgenInfo:MainTable_stories_empty.__docgenInfo,path:"src/components/MainTable/MainTable.stories.mdx"})},1299:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__);var objectSpread2=__webpack_require__(10),objectWithoutProperties=__webpack_require__(3),react=__webpack_require__(1),react_default=__webpack_require__.n(react),index_es=__webpack_require__(0),blocks=__webpack_require__(2),dist=__webpack_require__(5),slicedToArray=__webpack_require__(67),classnames=__webpack_require__(8),classnames_default=__webpack_require__.n(classnames),v4=__webpack_require__(126),v4_default=__webpack_require__.n(v4),AccordionSection_AccordionSection=function AccordionSection(_ref){var content=_ref.content,expanded=_ref.expanded,setExpanded=_ref.setExpanded,title=_ref.title,buttonId=Object(react.useRef)(v4_default()()),sectionId=Object(react.useRef)(v4_default()()),isExpanded=expanded===buttonId.current;return react_default.a.createElement("li",{className:"p-accordion__group"},react_default.a.createElement("button",{"aria-controls":"#".concat(sectionId.current),"aria-expanded":isExpanded?"true":"false",className:"p-accordion__tab",id:buttonId.current,onClick:function onClick(){return setExpanded(isExpanded?null:buttonId.current)},role:"tab",type:"button"},title),react_default.a.createElement("section",{"aria-hidden":isExpanded?"false":"true","aria-labelledby":sectionId.current,className:"p-accordion__panel",id:sectionId.current,role:"tabpanel"},content))};AccordionSection_AccordionSection.__docgenInfo={description:"",methods:[],displayName:"AccordionSection"};var components_AccordionSection_AccordionSection=AccordionSection_AccordionSection;"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/AccordionSection/AccordionSection.js"]={name:"AccordionSection",docgenInfo:AccordionSection_AccordionSection.__docgenInfo,path:"src/components/AccordionSection/AccordionSection.js"});var Accordion_Accordion=function Accordion(_ref2){var className=_ref2.className,sections=_ref2.sections,props=Object(objectWithoutProperties.a)(_ref2,["className","sections"]),_useState=Object(react.useState)(),_useState2=Object(slicedToArray.a)(_useState,2),expanded=_useState2[0],setExpanded=_useState2[1];return react_default.a.createElement("aside",Object.assign({className:classnames_default()(className,"p-accordion")},props,{role:"tablist","aria-multiselectable":"true"}),react_default.a.createElement("ul",{className:"p-accordion__list"},function generateSections(sections,setExpanded,expanded){return sections.map((function(_ref,i){var content=_ref.content,title=_ref.title;return react_default.a.createElement(components_AccordionSection_AccordionSection,{content:content,expanded:expanded,key:i,setExpanded:setExpanded,title:title})}))}(sections,setExpanded,expanded)))};Accordion_Accordion.__docgenInfo={description:"",methods:[],displayName:"Accordion"};var components_Accordion_Accordion=Accordion_Accordion;"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Accordion/Accordion.js"]={name:"Accordion",docgenInfo:Accordion_Accordion.__docgenInfo,path:"src/components/Accordion/Accordion.js"}),__webpack_require__.d(__webpack_exports__,"defaultStory",(function(){return Accordion_stories_defaultStory}));var layoutProps={};function MDXContent(_ref){var components=_ref.components,props=Object(objectWithoutProperties.a)(_ref,["components"]);return Object(index_es.mdx)("wrapper",Object.assign({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(index_es.mdx)(blocks.Meta,{title:"Accordion",component:components_Accordion_Accordion,decorators:[dist.withKnobs],mdxType:"Meta"}),Object(index_es.mdx)("h3",{id:"accordion"},"Accordion"),Object(index_es.mdx)("p",null,"This is a ",Object(index_es.mdx)("a",Object.assign({parentName:"p"},{href:"https://reactjs.org/",target:"_blank",rel:["nofollow","noopener","noreferrer"]}),"React")," component for the Vanilla ",Object(index_es.mdx)("a",Object.assign({parentName:"p"},{href:"https://docs.vanillaframework.io/patterns/accordion/",target:"_blank",rel:["nofollow","noopener","noreferrer"]}),"Accordion"),"."),Object(index_es.mdx)("p",null,"The sidebar accordion, used in listing pages or as navigation, can hold multiple navigation items or to be used as a filter for content."),Object(index_es.mdx)("h3",{id:"props"},"Props"),Object(index_es.mdx)(blocks.Props,{of:components_Accordion_Accordion,mdxType:"Props"}),Object(index_es.mdx)("h3",{id:"default"},"Default"),Object(index_es.mdx)(blocks.Preview,{mdxType:"Preview"},Object(index_es.mdx)(blocks.Story,{name:"Default",mdxType:"Story"},Object(index_es.mdx)(components_Accordion_Accordion,{sections:[{title:"Advanced topics",content:Object(index_es.mdx)(react_default.a.Fragment,null,Object(index_es.mdx)("p",null,"Charm bundles"),Object(index_es.mdx)("p",null,"Machine authentication"),Object(index_es.mdx)("p",null,"Migrating models"),Object(index_es.mdx)("p",null,"Using storage"),Object(index_es.mdx)("p",null,"Working with actions"),Object(index_es.mdx)("p",null,"Working with resources"),Object(index_es.mdx)("p",null,"Cloud image metadata"),Object(index_es.mdx)("p",null,"Tools"))},{title:"Networking",content:Object(index_es.mdx)(react_default.a.Fragment,null,Object(index_es.mdx)("p",null,"Working offline"),Object(index_es.mdx)("p",null,"Fan container networking"),Object(index_es.mdx)("p",null,"Network spaces"))},{title:"Miscellaneous",content:Object(index_es.mdx)(react_default.a.Fragment,null,Object(index_es.mdx)("p",null,"Juju GUI"),Object(index_es.mdx)("p",null,"CentOS support"),Object(index_es.mdx)("p",null,"Collecting Juju metrics"))}],mdxType:"Accordion"}))))}MDXContent.isMDXComponent=!0;var Accordion_stories_defaultStory=function defaultStory(){return Object(index_es.mdx)(components_Accordion_Accordion,{sections:[{title:"Advanced topics",content:Object(index_es.mdx)(react_default.a.Fragment,null,Object(index_es.mdx)("p",null,"Charm bundles"),Object(index_es.mdx)("p",null,"Machine authentication"),Object(index_es.mdx)("p",null,"Migrating models"),Object(index_es.mdx)("p",null,"Using storage"),Object(index_es.mdx)("p",null,"Working with actions"),Object(index_es.mdx)("p",null,"Working with resources"),Object(index_es.mdx)("p",null,"Cloud image metadata"),Object(index_es.mdx)("p",null,"Tools"))},{title:"Networking",content:Object(index_es.mdx)(react_default.a.Fragment,null,Object(index_es.mdx)("p",null,"Working offline"),Object(index_es.mdx)("p",null,"Fan container networking"),Object(index_es.mdx)("p",null,"Network spaces"))},{title:"Miscellaneous",content:Object(index_es.mdx)(react_default.a.Fragment,null,Object(index_es.mdx)("p",null,"Juju GUI"),Object(index_es.mdx)("p",null,"CentOS support"),Object(index_es.mdx)("p",null,"Collecting Juju metrics"))}]})};Accordion_stories_defaultStory.story={},Accordion_stories_defaultStory.story.name="Default",Accordion_stories_defaultStory.story.parameters={mdxSource:'\n              
Charm bundles
\n              
Machine authentication
\n              
Migrating models
\n              
Using storage
\n              
Working with actions
\n              
Working with resources
\n              
Cloud image metadata
\n              
Tools
\n            \n}, {\n  title: "Networking",\n  content: <>\n              
Working offline
\n              
Fan container networking
\n              
Network spaces
\n            \n}, {\n  title: "Miscellaneous",\n  content: <>\n              
Juju GUI
\n              
CentOS support
\n              
Collecting Juju metrics
\n            \n}]} />'};var componentMeta={title:"Accordion",decorators:[dist.withKnobs],includeStories:["defaultStory"]},mdxStoryNameToKey={Default:"defaultStory"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object(objectSpread2.a)({},componentMeta.parameters.docs||{},{page:function page(){return Object(index_es.mdx)(blocks.AddContext,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentMeta:componentMeta},Object(index_es.mdx)(MDXContent,null))}});__webpack_exports__.default=componentMeta;Accordion_stories_defaultStory.__docgenInfo={description:"",methods:[],displayName:"defaultStory"},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Accordion/Accordion.stories.mdx"]={name:"defaultStory",docgenInfo:Accordion_stories_defaultStory.__docgenInfo,path:"src/components/Accordion/Accordion.stories.mdx"})},1300:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__);var objectSpread2=__webpack_require__(10),objectWithoutProperties=__webpack_require__(3),react=__webpack_require__(1),react_default=__webpack_require__.n(react),index_es=__webpack_require__(0),blocks=__webpack_require__(2),dist=__webpack_require__(5),classnames=__webpack_require__(8),classnames_default=__webpack_require__.n(classnames),Form_Form=function Form(_ref){var children=_ref.children,className=_ref.className,inline=_ref.inline,stacked=_ref.stacked,props=Object(objectWithoutProperties.a)(_ref,["children","className","inline","stacked"]);return react_default.a.createElement("form",Object.assign({className:classnames_default()(className,{"p-form":inline||stacked,"p-form--inline":inline,"p-form--stacked":stacked})},props),children)};Form_Form.__docgenInfo={description:"",methods:[],displayName:"Form"};var components_Form_Form=Form_Form;"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Form/Form.js"]={name:"Form",docgenInfo:Form_Form.__docgenInfo,path:"src/components/Form/Form.js"});var Input=__webpack_require__(24),Select=__webpack_require__(81);__webpack_require__.d(__webpack_exports__,"defaultStory",(function(){return Form_stories_defaultStory})),__webpack_require__.d(__webpack_exports__,"fieldset",(function(){return Form_stories_fieldset})),__webpack_require__.d(__webpack_exports__,"inline",(function(){return Form_stories_inline})),__webpack_require__.d(__webpack_exports__,"stacked",(function(){return Form_stories_stacked})),__webpack_require__.d(__webpack_exports__,"disabled",(function(){return Form_stories_disabled})),__webpack_require__.d(__webpack_exports__,"validation",(function(){return Form_stories_validation})),__webpack_require__.d(__webpack_exports__,"required",(function(){return Form_stories_required}));var layoutProps={};function MDXContent(_ref){var components=_ref.components,props=Object(objectWithoutProperties.a)(_ref,["components"]);return Object(index_es.mdx)("wrapper",Object.assign({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(index_es.mdx)(blocks.Meta,{title:"Form",component:components_Form_Form,decorators:[dist.withKnobs],mdxType:"Meta"}),Object(index_es.mdx)("h3",{id:"form"},"Form"),Object(index_es.mdx)("p",null,"This is a ",Object(index_es.mdx)("a",Object.assign({parentName:"p"},{href:"https://reactjs.org/",target:"_blank",rel:["nofollow","noopener","noreferrer"]}),"React")," component for the Vanilla ",Object(index_es.mdx)("a",Object.assign({parentName:"p"},{href:"https://docs.vanillaframework.io/base/forms",target:"_blank",rel:["nofollow","noopener","noreferrer"]}),"Form"),"."),Object(index_es.mdx)("p",null,"Form controls have global styling defined at the HTML element level. Labels and most input types are 100% width of the ",Object(index_es.mdx)("inlineCode",{parentName:"p"},"
")," parent element."),Object(index_es.mdx)("h3",{id:"props"},"Props"),Object(index_es.mdx)(blocks.Props,{of:components_Form_Form,mdxType:"Props"}),Object(index_es.mdx)("h3",{id:"forms"},"Forms"),Object(index_es.mdx)(blocks.Preview,{mdxType:"Preview"},Object(index_es.mdx)(blocks.Story,{name:"Default",mdxType:"Story"},Object(index_es.mdx)(components_Form_Form,{mdxType:"Form"},Object(index_es.mdx)(Input.a,{type:"text",id:"exampleInputEmail12",placeholder:"example@canonical.com",label:"Email address",mdxType:"Input"}),Object(index_es.mdx)(Input.a,{type:"password",id:"exampleInputPassword12",placeholder:"******",label:"Password",mdxType:"Input"}),Object(index_es.mdx)(Input.a,{type:"file",id:"exampleInputFile2",label:"File input",mdxType:"Input"}),Object(index_es.mdx)(Input.a,{type:"checkbox",id:"CheckMe2",label:"I agree to receive information about Canonical’s products and services.",mdxType:"Input"})))),Object(index_es.mdx)("h3",{id:"fieldset"},"Fieldset"),Object(index_es.mdx)(blocks.Preview,{mdxType:"Preview"},Object(index_es.mdx)(blocks.Story,{name:"Fieldset",mdxType:"Story"},Object(index_es.mdx)(components_Form_Form,{mdxType:"Form"},Object(index_es.mdx)("fieldset",null,Object(index_es.mdx)(Input.a,{placeholder:"Joe",id:"list-input-12",type:"text",label:"First name",mdxType:"Input"}),Object(index_es.mdx)(Input.a,{placeholder:"Bloggs",id:"list-input-22",type:"text",label:"Last name",mdxType:"Input"}),Object(index_es.mdx)(Input.a,{placeholder:"example@canonical.com",id:"list-input-32",type:"text",label:"Email address",mdxType:"Input"}))))),Object(index_es.mdx)("h3",{id:"inline"},"Inline"),Object(index_es.mdx)(blocks.Preview,{mdxType:"Preview"},Object(index_es.mdx)(blocks.Story,{name:"Inline",mdxType:"Story"},Object(index_es.mdx)(components_Form_Form,{inline:!0,mdxType:"Form"},Object(index_es.mdx)(Input.a,{type:"text",id:"username-inline2",className:"p-form__control",label:"Username",help:"30 characters or fewer.",mdxType:"Input"}),Object(index_es.mdx)(Input.a,{type:"text",id:"address-inline22","aria-invalid":"true","aria-describedby":"input-error-message-inline",label:"Email address",error:"Please enter a valid email address.",mdxType:"Input"})))),Object(index_es.mdx)("h3",{id:"stacked"},"Stacked"),Object(index_es.mdx)(blocks.Preview,{mdxType:"Preview"},Object(index_es.mdx)(blocks.Story,{name:"Stacked",mdxType:"Story"},Object(index_es.mdx)(components_Form_Form,{stacked:!0,mdxType:"Form"},Object(index_es.mdx)(Input.a,{type:"text",id:"full-name-stacked2",label:"Full name",stacked:!0,mdxType:"Input"}),Object(index_es.mdx)(Input.a,{type:"text",id:"username-stacked2",label:"Username",stacked:!0,help:"30 characters or fewer.",mdxType:"Input"}),Object(index_es.mdx)(Input.a,{type:"text",id:"username-stacked-error2",label:"Email address",stacked:!0,error:"This field is required",mdxType:"Input"}),Object(index_es.mdx)(Input.a,{type:"text",id:"address-optional-stacked2",label:"Address line 1",stacked:!0,mdxType:"Input"}),Object(index_es.mdx)(Input.a,{type:"text",id:"address-optional-stacked3",label:"Address line 2",stacked:!0,mdxType:"Input"})))),Object(index_es.mdx)("h3",{id:"disabled"},"Disabled"),Object(index_es.mdx)(blocks.Preview,{mdxType:"Preview"},Object(index_es.mdx)(blocks.Story,{name:"Disabled",mdxType:"Story"},Object(index_es.mdx)(components_Form_Form,{mdxType:"Form"},Object(index_es.mdx)(Input.a,{label:"Email address",type:"text",id:"disabled-input2",placeholder:"example@canonical.com",disabled:"disabled",mdxType:"Input"})))),Object(index_es.mdx)("h3",{id:"validation"},"Validation"),Object(index_es.mdx)(blocks.Preview,{mdxType:"Preview"},Object(index_es.mdx)(blocks.Story,{name:"Validation",mdxType:"Story"},Object(index_es.mdx)(components_Form_Form,{mdxType:"Form"},Object(index_es.mdx)(Input.a,{type:"text",id:"exampleTextInputError2",placeholder:"example@canonical.com",label:"Email address",error:"This field is required.",mdxType:"Input"}),Object(index_es.mdx)(Input.a,{type:"text",id:"exampleTextInputCaution2",placeholder:"14",label:"Mail configuration ID",caution:"No validation is performed in preview mode.",mdxType:"Input"}),Object(index_es.mdx)(Input.a,{type:"text",id:"exampleTextInputSuccess2",placeholder:"**** **** **** ****",label:"Card number",success:"Verified.",mdxType:"Input"}),Object(index_es.mdx)(Select.a,{id:"exampleSelectInputError3",defaultValue:"",options:[{value:"",disabled:"disabled",label:"--Select an option--"},{value:"1",label:"Cosmic Cuttlefish"},{value:"2",label:"Bionic Beaver"},{value:"3",label:"Xenial Xerus"}],label:"Ubuntu releases",error:"You need to select an OS to complete your install.",mdxType:"Select"})))),Object(index_es.mdx)("h3",{id:"required"},"Required"),Object(index_es.mdx)(blocks.Preview,{mdxType:"Preview"},Object(index_es.mdx)(blocks.Story,{name:"Required",mdxType:"Story"},Object(index_es.mdx)(components_Form_Form,{mdxType:"Form"},Object(index_es.mdx)(Input.a,{type:"text",id:"exampleTextInputError3",placeholder:"e.g joe@bloggs.com",error:"This field is required.",label:"Email address",required:!0,mdxType:"Input"})))))}MDXContent.isMDXComponent=!0;var Form_stories_defaultStory=function defaultStory(){return Object(index_es.mdx)(components_Form_Form,null,Object(index_es.mdx)(Input.a,{type:"text",id:"exampleInputEmail12",placeholder:"example@canonical.com",label:"Email address"}),Object(index_es.mdx)(Input.a,{type:"password",id:"exampleInputPassword12",placeholder:"******",label:"Password"}),Object(index_es.mdx)(Input.a,{type:"file",id:"exampleInputFile2",label:"File input"}),Object(index_es.mdx)(Input.a,{type:"checkbox",id:"CheckMe2",label:"I agree to receive information about Canonical’s products and services."}))};Form_stories_defaultStory.story={},Form_stories_defaultStory.story.name="Default",Form_stories_defaultStory.story.parameters={mdxSource:'\n      \n      \n      \n      \n    
'};var Form_stories_fieldset=function fieldset(){return Object(index_es.mdx)(components_Form_Form,null,Object(index_es.mdx)("fieldset",null,Object(index_es.mdx)(Input.a,{placeholder:"Joe",id:"list-input-12",type:"text",label:"First name"}),Object(index_es.mdx)(Input.a,{placeholder:"Bloggs",id:"list-input-22",type:"text",label:"Last name"}),Object(index_es.mdx)(Input.a,{placeholder:"example@canonical.com",id:"list-input-32",type:"text",label:"Email address"})))};Form_stories_fieldset.story={},Form_stories_fieldset.story.name="Fieldset",Form_stories_fieldset.story.parameters={mdxSource:'
\n      
\n        \n        \n        \n      
\n    
'};var Form_stories_inline=function inline(){return Object(index_es.mdx)(components_Form_Form,{inline:!0},Object(index_es.mdx)(Input.a,{type:"text",id:"username-inline2",className:"p-form__control",label:"Username",help:"30 characters or fewer."}),Object(index_es.mdx)(Input.a,{type:"text",id:"address-inline22","aria-invalid":"true","aria-describedby":"input-error-message-inline",label:"Email address",error:"Please enter a valid email address."}))};Form_stories_inline.story={},Form_stories_inline.story.name="Inline",Form_stories_inline.story.parameters={mdxSource:'
\n      \n      \n    
'};var Form_stories_stacked=function stacked(){return Object(index_es.mdx)(components_Form_Form,{stacked:!0},Object(index_es.mdx)(Input.a,{type:"text",id:"full-name-stacked2",label:"Full name",stacked:!0}),Object(index_es.mdx)(Input.a,{type:"text",id:"username-stacked2",label:"Username",stacked:!0,help:"30 characters or fewer."}),Object(index_es.mdx)(Input.a,{type:"text",id:"username-stacked-error2",label:"Email address",stacked:!0,error:"This field is required"}),Object(index_es.mdx)(Input.a,{type:"text",id:"address-optional-stacked2",label:"Address line 1",stacked:!0}),Object(index_es.mdx)(Input.a,{type:"text",id:"address-optional-stacked3",label:"Address line 2",stacked:!0}))};Form_stories_stacked.story={},Form_stories_stacked.story.name="Stacked",Form_stories_stacked.story.parameters={mdxSource:'
\n      \n      \n      \n      \n      \n    
'};var Form_stories_disabled=function disabled(){return Object(index_es.mdx)(components_Form_Form,null,Object(index_es.mdx)(Input.a,{label:"Email address",type:"text",id:"disabled-input2",placeholder:"example@canonical.com",disabled:"disabled"}))};Form_stories_disabled.story={},Form_stories_disabled.story.name="Disabled",Form_stories_disabled.story.parameters={mdxSource:'
\n      \n    
'};var Form_stories_validation=function validation(){return Object(index_es.mdx)(components_Form_Form,null,Object(index_es.mdx)(Input.a,{type:"text",id:"exampleTextInputError2",placeholder:"example@canonical.com",label:"Email address",error:"This field is required."}),Object(index_es.mdx)(Input.a,{type:"text",id:"exampleTextInputCaution2",placeholder:"14",label:"Mail configuration ID",caution:"No validation is performed in preview mode."}),Object(index_es.mdx)(Input.a,{type:"text",id:"exampleTextInputSuccess2",placeholder:"**** **** **** ****",label:"Card number",success:"Verified."}),Object(index_es.mdx)(Select.a,{id:"exampleSelectInputError3",defaultValue:"",options:[{value:"",disabled:"disabled",label:"--Select an option--"},{value:"1",label:"Cosmic Cuttlefish"},{value:"2",label:"Bionic Beaver"},{value:"3",label:"Xenial Xerus"}],label:"Ubuntu releases",error:"You need to select an OS to complete your install."}))};Form_stories_validation.story={},Form_stories_validation.story.name="Validation",Form_stories_validation.story.parameters={mdxSource:'
\n      \n      \n      \n      \n    
'};var componentMeta={title:"Form",decorators:[dist.withKnobs],includeStories:["defaultStory","fieldset","inline","stacked","disabled","validation","required"]},mdxStoryNameToKey={Default:"defaultStory",Fieldset:"fieldset",Inline:"inline",Stacked:"stacked",Disabled:"disabled",Validation:"validation",Required:"required"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object(objectSpread2.a)({},componentMeta.parameters.docs||{},{page:function page(){return Object(index_es.mdx)(blocks.AddContext,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentMeta:componentMeta},Object(index_es.mdx)(MDXContent,null))}});__webpack_exports__.default=componentMeta;Form_stories_defaultStory.__docgenInfo={description:"",methods:[],displayName:"defaultStory"},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Form/Form.stories.mdx"]={name:"defaultStory",docgenInfo:Form_stories_defaultStory.__docgenInfo,path:"src/components/Form/Form.stories.mdx"}),Form_stories_fieldset.__docgenInfo={description:"",methods:[],displayName:"fieldset"},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Form/Form.stories.mdx"]={name:"fieldset",docgenInfo:Form_stories_fieldset.__docgenInfo,path:"src/components/Form/Form.stories.mdx"}),Form_stories_inline.__docgenInfo={description:"",methods:[],displayName:"inline"},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Form/Form.stories.mdx"]={name:"inline",docgenInfo:Form_stories_inline.__docgenInfo,path:"src/components/Form/Form.stories.mdx"}),Form_stories_stacked.__docgenInfo={description:"",methods:[],displayName:"stacked"},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Form/Form.stories.mdx"]={name:"stacked",docgenInfo:Form_stories_stacked.__docgenInfo,path:"src/components/Form/Form.stories.mdx"}),Form_stories_disabled.__docgenInfo={description:"",methods:[],displayName:"disabled"},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Form/Form.stories.mdx"]={name:"disabled",docgenInfo:Form_stories_disabled.__docgenInfo,path:"src/components/Form/Form.stories.mdx"}),Form_stories_validation.__docgenInfo={description:"",methods:[],displayName:"validation"},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Form/Form.stories.mdx"]={name:"validation",docgenInfo:Form_stories_validation.__docgenInfo,path:"src/components/Form/Form.stories.mdx"}),Form_stories_required.__docgenInfo={description:"",methods:[],displayName:"required"},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Form/Form.stories.mdx"]={name:"required",docgenInfo:Form_stories_required.__docgenInfo,path:"src/components/Form/Form.stories.mdx"})},1301:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__);var objectSpread2=__webpack_require__(10),objectWithoutProperties=__webpack_require__(3),react=__webpack_require__(1),react_default=__webpack_require__.n(react),index_es=__webpack_require__(0),blocks=__webpack_require__(2),dist=__webpack_require__(5),classnames=__webpack_require__(8),classnames_default=__webpack_require__.n(classnames),Link_Link=function Link(_ref){var children=_ref.children,className=_ref.className,external=_ref.external,_ref$href=_ref.href,href=void 0===_ref$href?"#":_ref$href,inverted=_ref.inverted,soft=_ref.soft,top=_ref.top,props=Object(objectWithoutProperties.a)(_ref,["children","className","external","href","inverted","soft","top"]),link=react_default.a.createElement("a",Object.assign({className:classnames_default()(className,{"p-link--external":external,"p-link--inverted":inverted,"p-link--soft":soft,"p-top__link":top}),href:href},props),children);return top?react_default.a.createElement("div",{className:"p-top"},link):link};Link_Link.__docgenInfo={description:"",methods:[],displayName:"Link"};var components_Link_Link=Link_Link;"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Link/Link.js"]={name:"Link",docgenInfo:Link_Link.__docgenInfo,path:"src/components/Link/Link.js"});var Strip=__webpack_require__(40);__webpack_require__.d(__webpack_exports__,"defaultStory",(function(){return Link_stories_defaultStory})),__webpack_require__.d(__webpack_exports__,"external",(function(){return Link_stories_external})),__webpack_require__.d(__webpack_exports__,"soft",(function(){return Link_stories_soft})),__webpack_require__.d(__webpack_exports__,"inverted",(function(){return Link_stories_inverted})),__webpack_require__.d(__webpack_exports__,"backToTop",(function(){return Link_stories_backToTop}));var layoutProps={};function MDXContent(_ref){var components=_ref.components,props=Object(objectWithoutProperties.a)(_ref,["components"]);return Object(index_es.mdx)("wrapper",Object.assign({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(index_es.mdx)(blocks.Meta,{title:"Link",component:components_Link_Link,decorators:[dist.withKnobs],mdxType:"Meta"}),Object(index_es.mdx)("h3",{id:"link"},"Link"),Object(index_es.mdx)("p",null,"This is a ",Object(index_es.mdx)("a",Object.assign({parentName:"p"},{href:"https://reactjs.org/",target:"_blank",rel:["nofollow","noopener","noreferrer"]}),"React")," component for the Vanilla ",Object(index_es.mdx)("a",Object.assign({parentName:"p"},{href:"https://docs.vanillaframework.io/patterns/links/",target:"_blank",rel:["nofollow","noopener","noreferrer"]}),"Link"),"."),Object(index_es.mdx)("p",null,"Links are used to embed actions or pathways to more information, allowing users to click their way from page to page."),Object(index_es.mdx)("h3",{id:"props"},"Props"),Object(index_es.mdx)(blocks.Props,{of:components_Link_Link,mdxType:"Props"}),Object(index_es.mdx)("h3",{id:"default"},"Default"),Object(index_es.mdx)(blocks.Preview,{mdxType:"Preview"},Object(index_es.mdx)(blocks.Story,{name:"Default",mdxType:"Story"},Object(index_es.mdx)(components_Link_Link,{mdxType:"Link"},"Fast, secure and simple, Ubuntu powers millions of PCs worldwide"))),Object(index_es.mdx)("h3",{id:"external"},"External"),Object(index_es.mdx)(blocks.Preview,{mdxType:"Preview"},Object(index_es.mdx)(blocks.Story,{name:"External",mdxType:"Story"},Object(index_es.mdx)("p",null,Object(index_es.mdx)(components_Link_Link,{external:!0,mdxType:"Link"},"Get started with Juju")))),Object(index_es.mdx)("h3",{id:"soft"},"Soft"),Object(index_es.mdx)(blocks.Preview,{mdxType:"Preview"},Object(index_es.mdx)(blocks.Story,{name:"Soft",mdxType:"Story"},Object(index_es.mdx)(components_Link_Link,{soft:!0,mdxType:"Link"},"Learn about MAAS"))),Object(index_es.mdx)("h3",{id:"inverted"},"Inverted"),Object(index_es.mdx)(blocks.Preview,{mdxType:"Preview"},Object(index_es.mdx)(blocks.Story,{name:"Inverted",mdxType:"Story"},Object(index_es.mdx)(Strip.a,{type:"dark",mdxType:"Strip"},Object(index_es.mdx)(components_Link_Link,{inverted:!0,mdxType:"Link"},"Package & publish your app")))),Object(index_es.mdx)("h3",{id:"back-to-top"},"Back to top"),Object(index_es.mdx)(blocks.Preview,{mdxType:"Preview"},Object(index_es.mdx)(blocks.Story,{name:"Back to top",mdxType:"Story"},Object(index_es.mdx)(components_Link_Link,{top:!0,mdxType:"Link"},"Back to top"))))}MDXContent.isMDXComponent=!0;var Link_stories_defaultStory=function defaultStory(){return Object(index_es.mdx)(components_Link_Link,null,"Fast, secure and simple, Ubuntu powers millions of PCs worldwide")};Link_stories_defaultStory.story={},Link_stories_defaultStory.story.name="Default",Link_stories_defaultStory.story.parameters={mdxSource:"\n      Fast, secure and simple, Ubuntu powers millions of PCs worldwide\n    "};var Link_stories_external=function external(){return Object(index_es.mdx)("p",null,Object(index_es.mdx)(components_Link_Link,{external:!0},"Get started with Juju"))};Link_stories_external.story={},Link_stories_external.story.name="External",Link_stories_external.story.parameters={mdxSource:"
\n      Get started with Juju\n    
"};var Link_stories_soft=function soft(){return Object(index_es.mdx)(components_Link_Link,{soft:!0},"Learn about MAAS")};Link_stories_soft.story={},Link_stories_soft.story.name="Soft",Link_stories_soft.story.parameters={mdxSource:"Learn about MAAS"};var Link_stories_inverted=function inverted(){return Object(index_es.mdx)(Strip.a,{type:"dark"},Object(index_es.mdx)(components_Link_Link,{inverted:!0},"Package & publish your app"))};Link_stories_inverted.story={},Link_stories_inverted.story.name="Inverted",Link_stories_inverted.story.parameters={mdxSource:'\n      Package & publish your app\n    '};var Link_stories_backToTop=function backToTop(){return Object(index_es.mdx)(components_Link_Link,{top:!0},"Back to top")};Link_stories_backToTop.story={},Link_stories_backToTop.story.name="Back to top",Link_stories_backToTop.story.parameters={mdxSource:"Back to top"};var componentMeta={title:"Link",decorators:[dist.withKnobs],includeStories:["defaultStory","external","soft","inverted","backToTop"]},mdxStoryNameToKey={Default:"defaultStory",External:"external",Soft:"soft",Inverted:"inverted","Back to top":"backToTop"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object(objectSpread2.a)({},componentMeta.parameters.docs||{},{page:function page(){return Object(index_es.mdx)(blocks.AddContext,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentMeta:componentMeta},Object(index_es.mdx)(MDXContent,null))}});__webpack_exports__.default=componentMeta;Link_stories_defaultStory.__docgenInfo={description:"",methods:[],displayName:"defaultStory"},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Link/Link.stories.mdx"]={name:"defaultStory",docgenInfo:Link_stories_defaultStory.__docgenInfo,path:"src/components/Link/Link.stories.mdx"}),Link_stories_external.__docgenInfo={description:"",methods:[],displayName:"external"},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Link/Link.stories.mdx"]={name:"external",docgenInfo:Link_stories_external.__docgenInfo,path:"src/components/Link/Link.stories.mdx"}),Link_stories_soft.__docgenInfo={description:"",methods:[],displayName:"soft"},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Link/Link.stories.mdx"]={name:"soft",docgenInfo:Link_stories_soft.__docgenInfo,path:"src/components/Link/Link.stories.mdx"}),Link_stories_inverted.__docgenInfo={description:"",methods:[],displayName:"inverted"},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Link/Link.stories.mdx"]={name:"inverted",docgenInfo:Link_stories_inverted.__docgenInfo,path:"src/components/Link/Link.stories.mdx"}),Link_stories_backToTop.__docgenInfo={description:"",methods:[],displayName:"backToTop"},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Link/Link.stories.mdx"]={name:"backToTop",docgenInfo:Link_stories_backToTop.__docgenInfo,path:"src/components/Link/Link.stories.mdx"})},1303:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__);var objectSpread2=__webpack_require__(10),objectWithoutProperties=__webpack_require__(3),react=__webpack_require__(1),react_default=__webpack_require__.n(react),index_es=__webpack_require__(0),blocks=__webpack_require__(2),dist=__webpack_require__(5),slicedToArray=__webpack_require__(67),classnames=__webpack_require__(8),classnames_default=__webpack_require__.n(classnames),ActionButton_ActionButton_ActionButton=(__webpack_require__(1286),function ActionButton(_ref){var _ref$appearance=_ref.appearance,appearance=void 0===_ref$appearance?"neutral":_ref$appearance,children=_ref.children,className=_ref.className,disabled=_ref.disabled,inline=_ref.inline,loading=_ref.loading,success=_ref.success,props=Object(objectWithoutProperties.a)(_ref,["appearance","children","className","disabled","inline","loading","success"]),_useState=Object(react.useState)(),_useState2=Object(slicedToArray.a)(_useState,2),height=_useState2[0],setHeight=_useState2[1],_useState3=Object(react.useState)(),_useState4=Object(slicedToArray.a)(_useState3,2),width=_useState4[0],setWidth=_useState4[1],_useState5=Object(react.useState)(!1),_useState6=Object(slicedToArray.a)(_useState5,2),showLoader=_useState6[0],setShowLoader=_useState6[1],_useState7=Object(react.useState)(!1),_useState8=Object(slicedToArray.a)(_useState7,2),showSuccess=_useState8[0],setShowSuccess=_useState8[1],ref=Object(react.useRef)(null);Object(react.useEffect)((function(){var loaderTimeout;return loading&&(ref.current&&ref.current.getBoundingClientRect()&&(setHeight(ref.current.getBoundingClientRect().height),setWidth(ref.current.getBoundingClientRect().width)),setShowLoader(!0)),!loading&&showLoader&&(loaderTimeout=setTimeout((function(){setShowLoader(!1),success&&setShowSuccess(!0)}),400)),function(){return clearTimeout(loaderTimeout)}}),[loading,showLoader,success]),Object(react.useEffect)((function(){var successTimeout;return showSuccess&&(successTimeout=setTimeout((function(){setHeight(),setWidth(),setShowSuccess(!1)}),2e3)),function(){return clearTimeout(successTimeout)}}),[showSuccess]);var buttonClasses=classnames_default()(className,"p-action-button","p-button--".concat(appearance),{"is-loading":showLoader,"is-success":showSuccess,"is-disabled":disabled,"is-inline":inline}),iconClasses=classnames_default()({"p-icon--spinner u-animation--spin":showLoader,"is-light":"positive"===appearance||"negative"===appearance,"p-icon--success":showSuccess&&"positive"!==appearance&&"negative"!==appearance,"p-icon--success-positive":showSuccess&&"positive"===appearance,"p-icon--success-negative":showSuccess&&"negative"===appearance});return react_default.a.createElement("button",Object.assign({className:buttonClasses,disabled:disabled,ref:ref,style:height&&width?{height:"".concat(height,"px"),width:"".concat(width,"px")}:void 0},props),showLoader||showSuccess?react_default.a.createElement("i",{className:iconClasses}):children)});ActionButton_ActionButton_ActionButton.__docgenInfo={description:"",methods:[],displayName:"ActionButton"};var components_ActionButton_ActionButton=ActionButton_ActionButton_ActionButton;"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/ActionButton/ActionButton.js"]={name:"ActionButton",docgenInfo:ActionButton_ActionButton_ActionButton.__docgenInfo,path:"src/components/ActionButton/ActionButton.js"}),__webpack_require__.d(__webpack_exports__,"defaultStory",(function(){return ActionButton_stories_defaultStory})),__webpack_require__.d(__webpack_exports__,"loading",(function(){return ActionButton_stories_loading}));var layoutProps={};function MDXContent(_ref){var components=_ref.components,props=Object(objectWithoutProperties.a)(_ref,["components"]);return Object(index_es.mdx)("wrapper",Object.assign({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(index_es.mdx)(blocks.Meta,{title:"ActionButton",component:components_ActionButton_ActionButton,decorators:[dist.withKnobs],mdxType:"Meta"}),Object(index_es.mdx)("h3",{id:"actionbutton"},"ActionButton"),Object(index_es.mdx)("p",null,"This is a not an existing Vanilla component. It can be used to display submitting states for forms or other actions."),Object(index_es.mdx)("h3",{id:"props"},"Props"),Object(index_es.mdx)(blocks.Props,{of:components_ActionButton_ActionButton,mdxType:"Props"}),Object(index_es.mdx)("h3",{id:"default"},"Default"),Object(index_es.mdx)(blocks.Preview,{mdxType:"Preview"},Object(index_es.mdx)(blocks.Story,{name:"Default",mdxType:"Story"},Object(index_es.mdx)(components_ActionButton_ActionButton,{appearance:"positive",mdxType:"ActionButton"},"Click me!"))),Object(index_es.mdx)("h3",{id:"loading"},"Loading"),Object(index_es.mdx)(blocks.Preview,{mdxType:"Preview"},Object(index_es.mdx)(blocks.Story,{name:"Loading",mdxType:"Story"},Object(index_es.mdx)(components_ActionButton_ActionButton,{appearance:"positive",loading:!0,mdxType:"ActionButton"},"Click me!"))))}MDXContent.isMDXComponent=!0;var ActionButton_stories_defaultStory=function defaultStory(){return Object(index_es.mdx)(components_ActionButton_ActionButton,{appearance:"positive"},"Click me!")};ActionButton_stories_defaultStory.story={},ActionButton_stories_defaultStory.story.name="Default",ActionButton_stories_defaultStory.story.parameters={mdxSource:'Click me!'};var ActionButton_stories_loading=function loading(){return Object(index_es.mdx)(components_ActionButton_ActionButton,{appearance:"positive",loading:!0},"Click me!")};ActionButton_stories_loading.story={},ActionButton_stories_loading.story.name="Loading",ActionButton_stories_loading.story.parameters={mdxSource:'\n      Click me!\n    '};var componentMeta={title:"ActionButton",decorators:[dist.withKnobs],includeStories:["defaultStory","loading"]},mdxStoryNameToKey={Default:"defaultStory",Loading:"loading"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object(objectSpread2.a)({},componentMeta.parameters.docs||{},{page:function page(){return Object(index_es.mdx)(blocks.AddContext,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentMeta:componentMeta},Object(index_es.mdx)(MDXContent,null))}});__webpack_exports__.default=componentMeta;ActionButton_stories_defaultStory.__docgenInfo={description:"",methods:[],displayName:"defaultStory"},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/ActionButton/ActionButton.stories.mdx"]={name:"defaultStory",docgenInfo:ActionButton_stories_defaultStory.__docgenInfo,path:"src/components/ActionButton/ActionButton.stories.mdx"}),ActionButton_stories_loading.__docgenInfo={description:"",methods:[],displayName:"loading"},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/ActionButton/ActionButton.stories.mdx"]={name:"loading",docgenInfo:ActionButton_stories_loading.__docgenInfo,path:"src/components/ActionButton/ActionButton.stories.mdx"})},1304:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__);var objectSpread2=__webpack_require__(10),objectWithoutProperties=__webpack_require__(3),react=__webpack_require__(1),react_default=__webpack_require__.n(react),index_es=__webpack_require__(0),blocks=__webpack_require__(2),dist=__webpack_require__(5),classnames=__webpack_require__(8),classnames_default=__webpack_require__.n(classnames),ArticlePagination_ArticlePagination=function ArticlePagination(_ref){var className=_ref.className,nextURL=_ref.nextURL,nextLabel=_ref.nextLabel,previousURL=_ref.previousURL,previousLabel=_ref.previousLabel,props=Object(objectWithoutProperties.a)(_ref,["className","nextURL","nextLabel","previousURL","previousLabel"]);return react_default.a.createElement("footer",Object.assign({className:classnames_default()(className,"p-article-pagination")},props),previousURL&&previousLabel&&react_default.a.createElement("a",{className:"p-article-pagination__link--previous",href:previousURL},react_default.a.createElement("span",{className:"p-article-pagination__label"},"Previous"),react_default.a.createElement("span",{className:"p-article-pagination__title"},previousLabel)),nextURL&&nextLabel&&react_default.a.createElement("a",{className:"p-article-pagination__link--next",href:nextURL},react_default.a.createElement("span",{className:"p-article-pagination__label"},"Next"),react_default.a.createElement("span",{className:"p-article-pagination__title"},nextLabel)))};ArticlePagination_ArticlePagination.__docgenInfo={description:"",methods:[],displayName:"ArticlePagination"};var components_ArticlePagination_ArticlePagination=ArticlePagination_ArticlePagination;"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/ArticlePagination/ArticlePagination.js"]={name:"ArticlePagination",docgenInfo:ArticlePagination_ArticlePagination.__docgenInfo,path:"src/components/ArticlePagination/ArticlePagination.js"}),__webpack_require__.d(__webpack_exports__,"defaultStory",(function(){return ArticlePagination_stories_defaultStory}));var layoutProps={};function MDXContent(_ref){var components=_ref.components,props=Object(objectWithoutProperties.a)(_ref,["components"]);return Object(index_es.mdx)("wrapper",Object.assign({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(index_es.mdx)(blocks.Meta,{title:"ArticlePagination",component:components_ArticlePagination_ArticlePagination,decorators:[dist.withKnobs],mdxType:"Meta"}),Object(index_es.mdx)("h3",{id:"articlepagination"},"ArticlePagination"),Object(index_es.mdx)("p",null,"This is a ",Object(index_es.mdx)("a",Object.assign({parentName:"p"},{href:"https://reactjs.org/",target:"_blank",rel:["nofollow","noopener","noreferrer"]}),"React")," component for the Vanilla ",Object(index_es.mdx)("a",Object.assign({parentName:"p"},{href:"https://docs.vanillaframework.io/patterns/article-pagination/",target:"_blank",rel:["nofollow","noopener","noreferrer"]}),"Article pagination"),"."),Object(index_es.mdx)("p",null,"The article pagination component should be used to navigate from one article to the next, or previous, in chronological order."),Object(index_es.mdx)("h3",{id:"props"},"Props"),Object(index_es.mdx)(blocks.Props,{of:components_ArticlePagination_ArticlePagination,mdxType:"Props"}),Object(index_es.mdx)("h3",{id:"default"},"Default"),Object(index_es.mdx)(blocks.Preview,{mdxType:"Preview"},Object(index_es.mdx)(blocks.Story,{name:"Default",mdxType:"Story"},Object(index_es.mdx)(components_ArticlePagination_ArticlePagination,{nextLabel:"Consectetur adipisicing elit",nextURL:"#next",previousLabel:"Lorem ipsum dolor sit amet",previousURL:"#previous",mdxType:"ArticlePagination"}))))}MDXContent.isMDXComponent=!0;var ArticlePagination_stories_defaultStory=function defaultStory(){return Object(index_es.mdx)(components_ArticlePagination_ArticlePagination,{nextLabel:"Consectetur adipisicing elit",nextURL:"#next",previousLabel:"Lorem ipsum dolor sit amet",previousURL:"#previous"})};ArticlePagination_stories_defaultStory.story={},ArticlePagination_stories_defaultStory.story.name="Default",ArticlePagination_stories_defaultStory.story.parameters={mdxSource:''};var componentMeta={title:"ArticlePagination",decorators:[dist.withKnobs],includeStories:["defaultStory"]},mdxStoryNameToKey={Default:"defaultStory"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object(objectSpread2.a)({},componentMeta.parameters.docs||{},{page:function page(){return Object(index_es.mdx)(blocks.AddContext,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentMeta:componentMeta},Object(index_es.mdx)(MDXContent,null))}});__webpack_exports__.default=componentMeta;ArticlePagination_stories_defaultStory.__docgenInfo={description:"",methods:[],displayName:"defaultStory"},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/ArticlePagination/ArticlePagination.stories.mdx"]={name:"defaultStory",docgenInfo:ArticlePagination_stories_defaultStory.__docgenInfo,path:"src/components/ArticlePagination/ArticlePagination.stories.mdx"})},1305:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__);var objectSpread2=__webpack_require__(10),objectWithoutProperties=__webpack_require__(3),react=__webpack_require__(1),react_default=__webpack_require__.n(react),index_es=__webpack_require__(0),blocks=__webpack_require__(2),dist=__webpack_require__(5),classnames=__webpack_require__(8),classnames_default=__webpack_require__.n(classnames),Button_Button=function Button(_ref){var _ref$appearance=_ref.appearance,appearance=void 0===_ref$appearance?"neutral":_ref$appearance,children=_ref.children,className=_ref.className,dense=_ref.dense,disabled=_ref.disabled,_ref$element=_ref.element,Component=void 0===_ref$element?"button":_ref$element,hasIcon=_ref.hasIcon,inline=_ref.inline,onClick=_ref.onClick,props=Object(objectWithoutProperties.a)(_ref,["appearance","children","className","dense","disabled","element","hasIcon","inline","onClick"]),classes=classnames_default()("p-button--".concat(appearance),{"has-icon":hasIcon,"is-dense":dense,"is-disabled":"button"!==Component&disabled,"is-inline":inline},className),commonProps=Object(objectSpread2.a)({},props,{className:classes,onClick:disabled?function onClickDisabled(e){return e.preventDefault()}:onClick});return"button"===Component?react_default.a.createElement("button",Object.assign({},commonProps,{disabled:disabled}),children):react_default.a.createElement(Component,Object.assign({},commonProps,{"aria-disabled":disabled}),children)};Button_Button.__docgenInfo={description:"",methods:[],displayName:"Button"};var components_Button_Button=Button_Button;"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Button/Button.js"]={name:"Button",docgenInfo:Button_Button.__docgenInfo,path:"src/components/Button/Button.js"}),__webpack_require__.d(__webpack_exports__,"base",(function(){return Button_stories_base})),__webpack_require__.d(__webpack_exports__,"baseDisabled",(function(){return Button_stories_baseDisabled})),__webpack_require__.d(__webpack_exports__,"link",(function(){return Button_stories_link})),__webpack_require__.d(__webpack_exports__,"linkDisabled",(function(){return Button_stories_linkDisabled})),__webpack_require__.d(__webpack_exports__,"neutral",(function(){return Button_stories_neutral})),__webpack_require__.d(__webpack_exports__,"neutralDisabled",(function(){return Button_stories_neutralDisabled})),__webpack_require__.d(__webpack_exports__,"positive",(function(){return Button_stories_positive})),__webpack_require__.d(__webpack_exports__,"positiveDisabled",(function(){return Button_stories_positiveDisabled})),__webpack_require__.d(__webpack_exports__,"negative",(function(){return Button_stories_negative})),__webpack_require__.d(__webpack_exports__,"negativeDisabled",(function(){return Button_stories_negativeDisabled})),__webpack_require__.d(__webpack_exports__,"brand",(function(){return Button_stories_brand})),__webpack_require__.d(__webpack_exports__,"brandDisabled",(function(){return Button_stories_brandDisabled})),__webpack_require__.d(__webpack_exports__,"inline",(function(){return Button_stories_inline})),__webpack_require__.d(__webpack_exports__,"dense",(function(){return Button_stories_dense})),__webpack_require__.d(__webpack_exports__,"icon",(function(){return Button_stories_icon})),__webpack_require__.d(__webpack_exports__,"iconText",(function(){return Button_stories_iconText}));var layoutProps={};function MDXContent(_ref){var components=_ref.components,props=Object(objectWithoutProperties.a)(_ref,["components"]);return Object(index_es.mdx)("wrapper",Object.assign({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(index_es.mdx)(blocks.Meta,{title:"Button",component:components_Button_Button,decorators:[dist.withKnobs],mdxType:"Meta"}),Object(index_es.mdx)("h3",{id:"button"},"Button"),Object(index_es.mdx)("p",null,"This is a ",Object(index_es.mdx)("a",Object.assign({parentName:"p"},{href:"https://reactjs.org/",target:"_blank",rel:["nofollow","noopener","noreferrer"]}),"React")," component for the Vanilla ",Object(index_es.mdx)("a",Object.assign({parentName:"p"},{href:"https://docs.vanillaframework.io/patterns/buttons/",target:"_blank",rel:["nofollow","noopener","noreferrer"]}),"Button"),"."),Object(index_es.mdx)("p",null,"Buttons are clickable elements used to perform an action, they can be used for buttons and link elements."),Object(index_es.mdx)("h3",{id:"props"},"Props"),Object(index_es.mdx)(blocks.Props,{of:components_Button_Button,mdxType:"Props"}),Object(index_es.mdx)("h3",{id:"base"},"Base"),Object(index_es.mdx)(blocks.Preview,{mdxType:"Preview"},Object(index_es.mdx)(blocks.Story,{name:"Base",mdxType:"Story"},Object(index_es.mdx)(components_Button_Button,{appearance:"base",mdxType:"Button"},"Base button"))),Object(index_es.mdx)(blocks.Preview,{mdxType:"Preview"},Object(index_es.mdx)(blocks.Story,{name:"Base disabled",mdxType:"Story"},Object(index_es.mdx)(components_Button_Button,{appearance:"base",disabled:!0,mdxType:"Button"},"Base button disabled"))),Object(index_es.mdx)("h3",{id:"link"},"Link"),Object(index_es.mdx)(blocks.Preview,{mdxType:"Preview"},Object(index_es.mdx)(blocks.Story,{name:"Link",mdxType:"Story"},Object(index_es.mdx)(components_Button_Button,{element:"a",href:"#test",appearance:"base",mdxType:"Button"},"Link button"))),Object(index_es.mdx)(blocks.Preview,{mdxType:"Preview"},Object(index_es.mdx)(blocks.Story,{name:"Link disabled",mdxType:"Story"},Object(index_es.mdx)(components_Button_Button,{element:"a",href:"#test",appearance:"base",disabled:!0,mdxType:"Button"},"Link button disabled"))),Object(index_es.mdx)("h3",{id:"neutral"},"Neutral"),Object(index_es.mdx)(blocks.Preview,{mdxType:"Preview"},Object(index_es.mdx)(blocks.Story,{name:"Neutral",mdxType:"Story"},Object(index_es.mdx)(components_Button_Button,{appearance:"neutral",mdxType:"Button"},"Neutral button"))),Object(index_es.mdx)(blocks.Preview,{mdxType:"Preview"},Object(index_es.mdx)(blocks.Story,{name:"Neutral disabled",mdxType:"Story"},Object(index_es.mdx)(components_Button_Button,{appearance:"neutral",disabled:!0,mdxType:"Button"},"Neutral button disabled"))),Object(index_es.mdx)("h3",{id:"positive"},"Positive"),Object(index_es.mdx)(blocks.Preview,{mdxType:"Preview"},Object(index_es.mdx)(blocks.Story,{name:"Positive",mdxType:"Story"},Object(index_es.mdx)(components_Button_Button,{appearance:"positive",mdxType:"Button"},"Positive button"))),Object(index_es.mdx)(blocks.Preview,{mdxType:"Preview"},Object(index_es.mdx)(blocks.Story,{name:"Positive disabled",mdxType:"Story"},Object(index_es.mdx)(components_Button_Button,{appearance:"positive",disabled:!0,mdxType:"Button"},"Positive button disabled"))),Object(index_es.mdx)("h3",{id:"negative"},"Negative"),Object(index_es.mdx)(blocks.Preview,{mdxType:"Preview"},Object(index_es.mdx)(blocks.Story,{name:"Negative",mdxType:"Story"},Object(index_es.mdx)(components_Button_Button,{appearance:"negative",mdxType:"Button"},"Negative button"))),Object(index_es.mdx)(blocks.Preview,{mdxType:"Preview"},Object(index_es.mdx)(blocks.Story,{name:"Negative disabled",mdxType:"Story"},Object(index_es.mdx)(components_Button_Button,{appearance:"negative",disabled:!0,mdxType:"Button"},"Negative button disabled"))),Object(index_es.mdx)("h3",{id:"brand"},"Brand"),Object(index_es.mdx)(blocks.Preview,{mdxType:"Preview"},Object(index_es.mdx)(blocks.Story,{name:"Brand",mdxType:"Story"},Object(index_es.mdx)(components_Button_Button,{appearance:"brand",mdxType:"Button"},"Brand button"))),Object(index_es.mdx)(blocks.Preview,{mdxType:"Preview"},Object(index_es.mdx)(blocks.Story,{name:"Brand disabled",mdxType:"Story"},Object(index_es.mdx)(components_Button_Button,{appearance:"brand",disabled:!0,mdxType:"Button"},"Brand button disabled"))),Object(index_es.mdx)("h3",{id:"inline"},"Inline"),Object(index_es.mdx)(blocks.Preview,{mdxType:"Preview"},Object(index_es.mdx)(blocks.Story,{name:"Inline",mdxType:"Story"},Object(index_es.mdx)(react_default.a.Fragment,null,Object(index_es.mdx)("span",null,"Everything you need to get started with Vanilla. "),Object(index_es.mdx)(components_Button_Button,{appearance:"neutral",inline:!0,mdxType:"Button"},"Inline button")))),Object(index_es.mdx)("h3",{id:"dense"},"Dense"),Object(index_es.mdx)(blocks.Preview,{mdxType:"Preview"},Object(index_es.mdx)(blocks.Story,{name:"Dense",mdxType:"Story"},Object(index_es.mdx)(react_default.a.Fragment,null,Object(index_es.mdx)("span",null,"Everything you need to get started with Vanilla. "),Object(index_es.mdx)(components_Button_Button,{dense:!0,mdxType:"Button"},"Dense button")))),Object(index_es.mdx)("h3",{id:"icon"},"Icon"),Object(index_es.mdx)(blocks.Preview,{mdxType:"Preview"},Object(index_es.mdx)(blocks.Story,{name:"Icon",mdxType:"Story"},Object(index_es.mdx)(components_Button_Button,{hasIcon:!0,mdxType:"Button"},Object(index_es.mdx)("i",{className:"p-icon--plus"})))),Object(index_es.mdx)(blocks.Preview,{mdxType:"Preview"},Object(index_es.mdx)(blocks.Story,{name:"Icon & text",mdxType:"Story"},Object(index_es.mdx)(components_Button_Button,{hasIcon:!0,mdxType:"Button"},Object(index_es.mdx)("i",{className:"p-icon--plus"})," ",Object(index_es.mdx)("span",null,"Button with icon & text")))))}MDXContent.isMDXComponent=!0;var Button_stories_base=function base(){return Object(index_es.mdx)(components_Button_Button,{appearance:"base"},"Base button")};Button_stories_base.story={},Button_stories_base.story.name="Base",Button_stories_base.story.parameters={mdxSource:''};var Button_stories_baseDisabled=function baseDisabled(){return Object(index_es.mdx)(components_Button_Button,{appearance:"base",disabled:!0},"Base button disabled")};Button_stories_baseDisabled.story={},Button_stories_baseDisabled.story.name="Base disabled",Button_stories_baseDisabled.story.parameters={mdxSource:''};var Button_stories_link=function link(){return Object(index_es.mdx)(components_Button_Button,{element:"a",href:"#test",appearance:"base"},"Link button")};Button_stories_link.story={},Button_stories_link.story.name="Link",Button_stories_link.story.parameters={mdxSource:''};var Button_stories_linkDisabled=function linkDisabled(){return Object(index_es.mdx)(components_Button_Button,{element:"a",href:"#test",appearance:"base",disabled:!0},"Link button disabled")};Button_stories_linkDisabled.story={},Button_stories_linkDisabled.story.name="Link disabled",Button_stories_linkDisabled.story.parameters={mdxSource:''};var Button_stories_neutral=function neutral(){return Object(index_es.mdx)(components_Button_Button,{appearance:"neutral"},"Neutral button")};Button_stories_neutral.story={},Button_stories_neutral.story.name="Neutral",Button_stories_neutral.story.parameters={mdxSource:''};var Button_stories_neutralDisabled=function neutralDisabled(){return Object(index_es.mdx)(components_Button_Button,{appearance:"neutral",disabled:!0},"Neutral button disabled")};Button_stories_neutralDisabled.story={},Button_stories_neutralDisabled.story.name="Neutral disabled",Button_stories_neutralDisabled.story.parameters={mdxSource:''};var Button_stories_positive=function positive(){return Object(index_es.mdx)(components_Button_Button,{appearance:"positive"},"Positive button")};Button_stories_positive.story={},Button_stories_positive.story.name="Positive",Button_stories_positive.story.parameters={mdxSource:''};var Button_stories_positiveDisabled=function positiveDisabled(){return Object(index_es.mdx)(components_Button_Button,{appearance:"positive",disabled:!0},"Positive button disabled")};Button_stories_positiveDisabled.story={},Button_stories_positiveDisabled.story.name="Positive disabled",Button_stories_positiveDisabled.story.parameters={mdxSource:''};var Button_stories_negative=function negative(){return Object(index_es.mdx)(components_Button_Button,{appearance:"negative"},"Negative button")};Button_stories_negative.story={},Button_stories_negative.story.name="Negative",Button_stories_negative.story.parameters={mdxSource:''};var Button_stories_negativeDisabled=function negativeDisabled(){return Object(index_es.mdx)(components_Button_Button,{appearance:"negative",disabled:!0},"Negative button disabled")};Button_stories_negativeDisabled.story={},Button_stories_negativeDisabled.story.name="Negative disabled",Button_stories_negativeDisabled.story.parameters={mdxSource:''};var Button_stories_brand=function brand(){return Object(index_es.mdx)(components_Button_Button,{appearance:"brand"},"Brand button")};Button_stories_brand.story={},Button_stories_brand.story.name="Brand",Button_stories_brand.story.parameters={mdxSource:''};var Button_stories_brandDisabled=function brandDisabled(){return Object(index_es.mdx)(components_Button_Button,{appearance:"brand",disabled:!0},"Brand button disabled")};Button_stories_brandDisabled.story={},Button_stories_brandDisabled.story.name="Brand disabled",Button_stories_brandDisabled.story.parameters={mdxSource:''};var Button_stories_inline=function inline(){return Object(index_es.mdx)(react_default.a.Fragment,null,Object(index_es.mdx)("span",null,"Everything you need to get started with Vanilla. "),Object(index_es.mdx)(components_Button_Button,{appearance:"neutral",inline:!0},"Inline button"))};Button_stories_inline.story={},Button_stories_inline.story.name="Inline",Button_stories_inline.story.parameters={mdxSource:'<>\n      Everything you need to get started with Vanilla. \n      \n    '};var Button_stories_dense=function dense(){return Object(index_es.mdx)(react_default.a.Fragment,null,Object(index_es.mdx)("span",null,"Everything you need to get started with Vanilla. "),Object(index_es.mdx)(components_Button_Button,{dense:!0},"Dense button"))};Button_stories_dense.story={},Button_stories_dense.story.name="Dense",Button_stories_dense.story.parameters={mdxSource:"<>\n      Everything you need to get started with Vanilla. \n      \n    "};var Button_stories_icon=function icon(){return Object(index_es.mdx)(components_Button_Button,{hasIcon:!0},Object(index_es.mdx)("i",{className:"p-icon--plus"}))};Button_stories_icon.story={},Button_stories_icon.story.name="Icon",Button_stories_icon.story.parameters={mdxSource:''};var Button_stories_iconText=function iconText(){return Object(index_es.mdx)(components_Button_Button,{hasIcon:!0},Object(index_es.mdx)("i",{className:"p-icon--plus"})," ",Object(index_es.mdx)("span",null,"Button with icon & text"))};Button_stories_iconText.story={},Button_stories_iconText.story.name="Icon & text",Button_stories_iconText.story.parameters={mdxSource:''};var componentMeta={title:"Button",decorators:[dist.withKnobs],includeStories:["base","baseDisabled","link","linkDisabled","neutral","neutralDisabled","positive","positiveDisabled","negative","negativeDisabled","brand","brandDisabled","inline","dense","icon","iconText"]},mdxStoryNameToKey={Base:"base","Base disabled":"baseDisabled",Link:"link","Link disabled":"linkDisabled",Neutral:"neutral","Neutral disabled":"neutralDisabled",Positive:"positive","Positive disabled":"positiveDisabled",Negative:"negative","Negative disabled":"negativeDisabled",Brand:"brand","Brand disabled":"brandDisabled",Inline:"inline",Dense:"dense",Icon:"icon","Icon & text":"iconText"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object(objectSpread2.a)({},componentMeta.parameters.docs||{},{page:function page(){return Object(index_es.mdx)(blocks.AddContext,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentMeta:componentMeta},Object(index_es.mdx)(MDXContent,null))}});__webpack_exports__.default=componentMeta;Button_stories_base.__docgenInfo={description:"",methods:[],displayName:"base"},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Button/Button.stories.mdx"]={name:"base",docgenInfo:Button_stories_base.__docgenInfo,path:"src/components/Button/Button.stories.mdx"}),Button_stories_baseDisabled.__docgenInfo={description:"",methods:[],displayName:"baseDisabled"},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Button/Button.stories.mdx"]={name:"baseDisabled",docgenInfo:Button_stories_baseDisabled.__docgenInfo,path:"src/components/Button/Button.stories.mdx"}),Button_stories_link.__docgenInfo={description:"",methods:[],displayName:"link"},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Button/Button.stories.mdx"]={name:"link",docgenInfo:Button_stories_link.__docgenInfo,path:"src/components/Button/Button.stories.mdx"}),Button_stories_linkDisabled.__docgenInfo={description:"",methods:[],displayName:"linkDisabled"},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Button/Button.stories.mdx"]={name:"linkDisabled",docgenInfo:Button_stories_linkDisabled.__docgenInfo,path:"src/components/Button/Button.stories.mdx"}),Button_stories_neutral.__docgenInfo={description:"",methods:[],displayName:"neutral"},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Button/Button.stories.mdx"]={name:"neutral",docgenInfo:Button_stories_neutral.__docgenInfo,path:"src/components/Button/Button.stories.mdx"}),Button_stories_neutralDisabled.__docgenInfo={description:"",methods:[],displayName:"neutralDisabled"},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Button/Button.stories.mdx"]={name:"neutralDisabled",docgenInfo:Button_stories_neutralDisabled.__docgenInfo,path:"src/components/Button/Button.stories.mdx"}),Button_stories_positive.__docgenInfo={description:"",methods:[],displayName:"positive"},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Button/Button.stories.mdx"]={name:"positive",docgenInfo:Button_stories_positive.__docgenInfo,path:"src/components/Button/Button.stories.mdx"}),Button_stories_positiveDisabled.__docgenInfo={description:"",methods:[],displayName:"positiveDisabled"},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Button/Button.stories.mdx"]={name:"positiveDisabled",docgenInfo:Button_stories_positiveDisabled.__docgenInfo,path:"src/components/Button/Button.stories.mdx"}),Button_stories_negative.__docgenInfo={description:"",methods:[],displayName:"negative"},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Button/Button.stories.mdx"]={name:"negative",docgenInfo:Button_stories_negative.__docgenInfo,path:"src/components/Button/Button.stories.mdx"}),Button_stories_negativeDisabled.__docgenInfo={description:"",methods:[],displayName:"negativeDisabled"},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Button/Button.stories.mdx"]={name:"negativeDisabled",docgenInfo:Button_stories_negativeDisabled.__docgenInfo,path:"src/components/Button/Button.stories.mdx"}),Button_stories_brand.__docgenInfo={description:"",methods:[],displayName:"brand"},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Button/Button.stories.mdx"]={name:"brand",docgenInfo:Button_stories_brand.__docgenInfo,path:"src/components/Button/Button.stories.mdx"}),Button_stories_brandDisabled.__docgenInfo={description:"",methods:[],displayName:"brandDisabled"},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Button/Button.stories.mdx"]={name:"brandDisabled",docgenInfo:Button_stories_brandDisabled.__docgenInfo,path:"src/components/Button/Button.stories.mdx"}),Button_stories_inline.__docgenInfo={description:"",methods:[],displayName:"inline"},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Button/Button.stories.mdx"]={name:"inline",docgenInfo:Button_stories_inline.__docgenInfo,path:"src/components/Button/Button.stories.mdx"}),Button_stories_dense.__docgenInfo={description:"",methods:[],displayName:"dense"},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Button/Button.stories.mdx"]={name:"dense",docgenInfo:Button_stories_dense.__docgenInfo,path:"src/components/Button/Button.stories.mdx"}),Button_stories_icon.__docgenInfo={description:"",methods:[],displayName:"icon"},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Button/Button.stories.mdx"]={name:"icon",docgenInfo:Button_stories_icon.__docgenInfo,path:"src/components/Button/Button.stories.mdx"}),Button_stories_iconText.__docgenInfo={description:"",methods:[],displayName:"iconText"},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Button/Button.stories.mdx"]={name:"iconText",docgenInfo:Button_stories_iconText.__docgenInfo,path:"src/components/Button/Button.stories.mdx"})},1306:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__);var objectSpread2=__webpack_require__(10),objectWithoutProperties=__webpack_require__(3),react=__webpack_require__(1),react_default=__webpack_require__.n(react),index_es=__webpack_require__(0),blocks=__webpack_require__(2),dist=__webpack_require__(5),classnames=__webpack_require__(8),classnames_default=__webpack_require__.n(classnames),Card_Card=function Card(_ref){var children=_ref.children,className=_ref.className,highlighted=_ref.highlighted,overlay=_ref.overlay,title=_ref.title,thumbnail=_ref.thumbnail,props=Object(objectWithoutProperties.a)(_ref,["children","className","highlighted","overlay","title","thumbnail"]);return react_default.a.createElement("div",Object.assign({className:classnames_default()(className,{"p-card":!highlighted&&!overlay,"p-card--highlighted":highlighted,"p-card--overlay":overlay})},props),thumbnail&&react_default.a.createElement(react_default.a.Fragment,null,react_default.a.createElement("img",{className:"p-card__thumbnail",src:thumbnail,alt:""}),react_default.a.createElement("hr",{className:"u-sv1"})),title&&react_default.a.createElement("h3",{className:"p-card__title"},title),react_default.a.createElement("div",{className:"p-card__content"},children))};Card_Card.__docgenInfo={description:"",methods:[],displayName:"Card"};var components_Card_Card=Card_Card;"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Card/Card.js"]={name:"Card",docgenInfo:Card_Card.__docgenInfo,path:"src/components/Card/Card.js"});var Col=__webpack_require__(14),Row=__webpack_require__(6);__webpack_require__.d(__webpack_exports__,"defaultStory",(function(){return Card_stories_defaultStory})),__webpack_require__.d(__webpack_exports__,"header",(function(){return Card_stories_header})),__webpack_require__.d(__webpack_exports__,"highlighted",(function(){return Card_stories_highlighted})),__webpack_require__.d(__webpack_exports__,"overlay",(function(){return Card_stories_overlay}));var layoutProps={};function MDXContent(_ref){var components=_ref.components,props=Object(objectWithoutProperties.a)(_ref,["components"]);return Object(index_es.mdx)("wrapper",Object.assign({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(index_es.mdx)(blocks.Meta,{title:"Card",component:components_Card_Card,decorators:[dist.withKnobs],mdxType:"Meta"}),Object(index_es.mdx)("h3",{id:"card"},"Card"),Object(index_es.mdx)("p",null,"This is a ",Object(index_es.mdx)("a",Object.assign({parentName:"p"},{href:"https://reactjs.org/",target:"_blank",rel:["nofollow","noopener","noreferrer"]}),"React")," component for the Vanilla ",Object(index_es.mdx)("a",Object.assign({parentName:"p"},{href:"https://docs.vanillaframework.io/patterns/card/",target:"_blank",rel:["nofollow","noopener","noreferrer"]}),"Card"),"."),Object(index_es.mdx)("p",null,"There are four card styles available to use in Vanilla: default, header, highlighted and overlay. Our card component will expand to fill the full width of its parent container."),Object(index_es.mdx)("h3",{id:"props"},"Props"),Object(index_es.mdx)(blocks.Props,{of:components_Card_Card,mdxType:"Props"}),Object(index_es.mdx)("h3",{id:"default"},"Default"),Object(index_es.mdx)(blocks.Preview,{mdxType:"Preview"},Object(index_es.mdx)(blocks.Story,{name:"Default",mdxType:"Story"},Object(index_es.mdx)(components_Card_Card,{title:"We'd love to have you join us as a partner.",mdxType:"Card"},"If you are an independent software vendor or bundle author, it's easy to apply. You can find out more below."))),Object(index_es.mdx)("h3",{id:"header"},"Header"),Object(index_es.mdx)(blocks.Preview,{mdxType:"Preview"},Object(index_es.mdx)(blocks.Story,{name:"Header",mdxType:"Story"},Object(index_es.mdx)(components_Card_Card,{title:"Raspberry Pi2 and Pi3",thumbnail:"https://assets.ubuntu.com/v1/dca2e4c4-raspberry-logo.png",mdxType:"Card"},"For fun, for education and for profit, the RPi makes device development personal and entertaining. With support for both the Pi2 and the new Pi3, Ubuntu Core supports the world’s most beloved board."))),Object(index_es.mdx)("h3",{id:"highlighted"},"Highlighted"),Object(index_es.mdx)(blocks.Preview,{mdxType:"Preview"},Object(index_es.mdx)(blocks.Story,{name:"Highlighted",mdxType:"Story"},Object(index_es.mdx)(components_Card_Card,{title:"We'd love to have you join us as a partner.",highlighted:!0,mdxType:"Card"},"If you are an independent software vendor or bundle author, it's easy to apply. You can find out more below."))),Object(index_es.mdx)("h3",{id:"overlay"},"Overlay"),Object(index_es.mdx)(blocks.Preview,{mdxType:"Preview"},Object(index_es.mdx)(blocks.Story,{name:"Overlay",mdxType:"Story"},Object(index_es.mdx)("section",{className:"p-strip--image is-light",style:{backgroundImage:"url('https://assets.ubuntu.com/v1/0a98afcd-screenshot_desktop.jpg')"}},Object(index_es.mdx)(Row.a,{mdxType:"Row"},Object(index_es.mdx)(Col.a,{size:"6",emptyLarge:"7",mdxType:"Col"},Object(index_es.mdx)(components_Card_Card,{title:"Web browsing",overlay:!0,mdxType:"Card"},"Renowned for speed and security, Ubuntu and Firefox make browsing the web a pleasure again. Ubuntu also includes Chrome, Opera and other browsers that can be installed from the Ubuntu Software Centre.")))))))}MDXContent.isMDXComponent=!0;var Card_stories_defaultStory=function defaultStory(){return Object(index_es.mdx)(components_Card_Card,{title:"We'd love to have you join us as a partner."},"If you are an independent software vendor or bundle author, it's easy to apply. You can find out more below.")};Card_stories_defaultStory.story={},Card_stories_defaultStory.story.name="Default",Card_stories_defaultStory.story.parameters={mdxSource:"\n      If you are an independent software vendor or bundle author, it's easy to\n      apply. You can find out more below.\n    "};var Card_stories_header=function header(){return Object(index_es.mdx)(components_Card_Card,{title:"Raspberry Pi2 and Pi3",thumbnail:"https://assets.ubuntu.com/v1/dca2e4c4-raspberry-logo.png"},"For fun, for education and for profit, the RPi makes device development personal and entertaining. With support for both the Pi2 and the new Pi3, Ubuntu Core supports the world’s most beloved board.")};Card_stories_header.story={},Card_stories_header.story.name="Header",Card_stories_header.story.parameters={mdxSource:'\n      For fun, for education and for profit, the RPi makes device development\n      personal and entertaining. With support for both the Pi2 and the new Pi3,\n      Ubuntu Core supports the world’s most beloved board.\n    '};var Card_stories_highlighted=function highlighted(){return Object(index_es.mdx)(components_Card_Card,{title:"We'd love to have you join us as a partner.",highlighted:!0},"If you are an independent software vendor or bundle author, it's easy to apply. You can find out more below.")};Card_stories_highlighted.story={},Card_stories_highlighted.story.name="Highlighted",Card_stories_highlighted.story.parameters={mdxSource:"\n      If you are an independent software vendor or bundle author, it's easy to\n      apply. You can find out more below.\n    "};var Card_stories_overlay=function overlay(){return Object(index_es.mdx)("section",{className:"p-strip--image is-light",style:{backgroundImage:"url('https://assets.ubuntu.com/v1/0a98afcd-screenshot_desktop.jpg')"}},Object(index_es.mdx)(Row.a,null,Object(index_es.mdx)(Col.a,{size:"6",emptyLarge:"7"},Object(index_es.mdx)(components_Card_Card,{title:"Web browsing",overlay:!0},"Renowned for speed and security, Ubuntu and Firefox make browsing the web a pleasure again. Ubuntu also includes Chrome, Opera and other browsers that can be installed from the Ubuntu Software Centre."))))};Card_stories_overlay.story={},Card_stories_overlay.story.name="Overlay",Card_stories_overlay.story.parameters={mdxSource:'
\n      \n        \n          \n            Renowned for speed and security, Ubuntu and Firefox make browsing\n            the web a pleasure again. Ubuntu also includes Chrome, Opera and\n            other browsers that can be installed from the Ubuntu Software\n            Centre.\n          \n        \n      \n    
'};var componentMeta={title:"Card",decorators:[dist.withKnobs],includeStories:["defaultStory","header","highlighted","overlay"]},mdxStoryNameToKey={Default:"defaultStory",Header:"header",Highlighted:"highlighted",Overlay:"overlay"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object(objectSpread2.a)({},componentMeta.parameters.docs||{},{page:function page(){return Object(index_es.mdx)(blocks.AddContext,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentMeta:componentMeta},Object(index_es.mdx)(MDXContent,null))}});__webpack_exports__.default=componentMeta;Card_stories_defaultStory.__docgenInfo={description:"",methods:[],displayName:"defaultStory"},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Card/Card.stories.mdx"]={name:"defaultStory",docgenInfo:Card_stories_defaultStory.__docgenInfo,path:"src/components/Card/Card.stories.mdx"}),Card_stories_header.__docgenInfo={description:"",methods:[],displayName:"header"},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Card/Card.stories.mdx"]={name:"header",docgenInfo:Card_stories_header.__docgenInfo,path:"src/components/Card/Card.stories.mdx"}),Card_stories_highlighted.__docgenInfo={description:"",methods:[],displayName:"highlighted"},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Card/Card.stories.mdx"]={name:"highlighted",docgenInfo:Card_stories_highlighted.__docgenInfo,path:"src/components/Card/Card.stories.mdx"}),Card_stories_overlay.__docgenInfo={description:"",methods:[],displayName:"overlay"},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Card/Card.stories.mdx"]={name:"overlay",docgenInfo:Card_stories_overlay.__docgenInfo,path:"src/components/Card/Card.stories.mdx"})},1307:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__);var objectSpread2=__webpack_require__(10),objectWithoutProperties=__webpack_require__(3),react=__webpack_require__(1),react_default=__webpack_require__.n(react),index_es=__webpack_require__(0),blocks=__webpack_require__(2),dist=__webpack_require__(5),classnames=__webpack_require__(8),classnames_default=__webpack_require__.n(classnames),Code_Code=function Code(_ref){var children=_ref.children,className=_ref.className,inline=_ref.inline,copyable=_ref.copyable,numbered=_ref.numbered,props=Object(objectWithoutProperties.a)(_ref,["children","className","inline","copyable","numbered"]),input=Object(react.useRef)(null);if(inline)return react_default.a.createElement("code",Object.assign({className:className},props),children);if(copyable){return react_default.a.createElement("div",Object.assign({className:classnames_default()(className,"p-code-copyable")},props),react_default.a.createElement("input",{className:"p-code-copyable__input",readOnly:"readonly",ref:input,value:children}),react_default.a.createElement("button",{className:"p-code-copyable__action",onClick:function handleClick(evt){input.current.focus(),input.current.select();try{document.execCommand("copy")}catch(err){console.error("Copy was unsuccessful")}}},"Copy to clipboard"))}if(numbered){var content=children.split(/\r?\n/).map((function(line,i){return react_default.a.createElement("span",{className:"p-code-numbered__line",key:i},line)}));return react_default.a.createElement("pre",Object.assign({className:classnames_default()(className,"p-code-numbered")},props),react_default.a.createElement("code",null,content))}return react_default.a.createElement("pre",Object.assign({className:className},props),react_default.a.createElement("code",null,children))};Code_Code.__docgenInfo={description:"",methods:[],displayName:"Code"};var components_Code_Code=Code_Code;"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Code/Code.js"]={name:"Code",docgenInfo:Code_Code.__docgenInfo,path:"src/components/Code/Code.js"}),__webpack_require__.d(__webpack_exports__,"inline",(function(){return Code_stories_inline})),__webpack_require__.d(__webpack_exports__,"block",(function(){return Code_stories_block})),__webpack_require__.d(__webpack_exports__,"copyable",(function(){return Code_stories_copyable})),__webpack_require__.d(__webpack_exports__,"numbered",(function(){return Code_stories_numbered}));var layoutProps={};function MDXContent(_ref){var components=_ref.components,props=Object(objectWithoutProperties.a)(_ref,["components"]);return Object(index_es.mdx)("wrapper",Object.assign({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(index_es.mdx)(blocks.Meta,{title:"Code",component:components_Code_Code,decorators:[dist.withKnobs],mdxType:"Meta"}),Object(index_es.mdx)("h3",{id:"code"},"Code"),Object(index_es.mdx)("p",null,"This is a ",Object(index_es.mdx)("a",Object.assign({parentName:"p"},{href:"https://reactjs.org/",target:"_blank",rel:["nofollow","noopener","noreferrer"]}),"React")," component for the Vanilla ",Object(index_es.mdx)("a",Object.assign({parentName:"p"},{href:"https://docs.vanillaframework.io/base/code/",target:"_blank",rel:["nofollow","noopener","noreferrer"]}),"Code"),"."),Object(index_es.mdx)("p",null,"Vanilla gives you multiple ways to display code using the standard HTML elements."),Object(index_es.mdx)("h3",{id:"props"},"Props"),Object(index_es.mdx)(blocks.Props,{of:components_Code_Code,mdxType:"Props"}),Object(index_es.mdx)("h3",{id:"inline"},"Inline"),Object(index_es.mdx)(blocks.Preview,{mdxType:"Preview"},Object(index_es.mdx)(blocks.Story,{name:"Inline",mdxType:"Story"},Object(index_es.mdx)("p",null,"The quick brown ",Object(index_es.mdx)(components_Code_Code,{inline:!0,mdxType:"Code"},"fox jumps")," over the lazy dog"))),Object(index_es.mdx)("h3",{id:"block"},"Block"),Object(index_es.mdx)(blocks.Preview,{mdxType:"Preview"},Object(index_es.mdx)(blocks.Story,{name:"Block",mdxType:"Story"},Object(index_es.mdx)(components_Code_Code,{mdxType:"Code"},"Mode: all Settings: maas_url=http://192.168.122.1:5240/MAAS"))),Object(index_es.mdx)("h3",{id:"copyable"},"Copyable"),Object(index_es.mdx)(blocks.Preview,{mdxType:"Preview"},Object(index_es.mdx)(blocks.Story,{name:"Copyable",mdxType:"Story"},Object(index_es.mdx)(components_Code_Code,{copyable:!0,mdxType:"Code"},"sudo apt-get update"))),Object(index_es.mdx)("h3",{id:"numbered"},"Numbered"),Object(index_es.mdx)(blocks.Preview,{mdxType:"Preview"},Object(index_es.mdx)(blocks.Story,{name:"Numbered",mdxType:"Story"},Object(index_es.mdx)(components_Code_Code,{numbered:!0,mdxType:"Code"},'#!/bin/bash set -eu . $CONJURE_UP_SPELLSDIR/sdk/common.sh if [[ "$JUJU_PROVIDERTYPE" == "lxd" ]]; then debug "Running pre-deploy for $CONJURE_UP_SPELL" sed "s/##MODEL##/$JUJU_MODEL/" $(scriptPath)/lxd-profile.yaml | lxc profile edit "juju-$JUJU_MODEL" || exposeResult "Failed to set profile" $? "false" fi exposeResult "Successful pre-deploy." 0 "true"'))))}MDXContent.isMDXComponent=!0;var Code_stories_inline=function inline(){return Object(index_es.mdx)("p",null,"The quick brown ",Object(index_es.mdx)(components_Code_Code,{inline:!0},"fox jumps")," over the lazy dog")};Code_stories_inline.story={},Code_stories_inline.story.name="Inline",Code_stories_inline.story.parameters={mdxSource:"
\n      The quick brown fox jumps over the lazy dog\n    
"};var Code_stories_block=function block(){return Object(index_es.mdx)(components_Code_Code,null,"Mode: all Settings: maas_url=http://192.168.122.1:5240/MAAS")};Code_stories_block.story={},Code_stories_block.story.name="Block",Code_stories_block.story.parameters={mdxSource:"Mode: all Settings: maas_url=http://192.168.122.1:5240/MAAS"};var Code_stories_copyable=function copyable(){return Object(index_es.mdx)(components_Code_Code,{copyable:!0},"sudo apt-get update")};Code_stories_copyable.story={},Code_stories_copyable.story.name="Copyable",Code_stories_copyable.story.parameters={mdxSource:"sudo apt-get update"};var Code_stories_numbered=function numbered(){return Object(index_es.mdx)(components_Code_Code,{numbered:!0},'#!/bin/bash set -eu . $CONJURE_UP_SPELLSDIR/sdk/common.sh if [[ "$JUJU_PROVIDERTYPE" == "lxd" ]]; then debug "Running pre-deploy for $CONJURE_UP_SPELL" sed "s/##MODEL##/$JUJU_MODEL/" $(scriptPath)/lxd-profile.yaml | lxc profile edit "juju-$JUJU_MODEL" || exposeResult "Failed to set profile" $? "false" fi exposeResult "Successful pre-deploy." 0 "true"')};Code_stories_numbered.story={},Code_stories_numbered.story.name="Numbered",Code_stories_numbered.story.parameters={mdxSource:'\n      #!/bin/bash set -eu . $CONJURE_UP_SPELLSDIR/sdk/common.sh if [[\n      "$JUJU_PROVIDERTYPE" == "lxd" ]]; then debug "Running pre-deploy for\n      $CONJURE_UP_SPELL" sed "s/##MODEL##/$JUJU_MODEL/"\n      $(scriptPath)/lxd-profile.yaml | lxc profile edit "juju-$JUJU_MODEL" ||\n      exposeResult "Failed to set profile" $? "false" fi exposeResult\n      "Successful pre-deploy." 0 "true"\n    '};var componentMeta={title:"Code",decorators:[dist.withKnobs],includeStories:["inline","block","copyable","numbered"]},mdxStoryNameToKey={Inline:"inline",Block:"block",Copyable:"copyable",Numbered:"numbered"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object(objectSpread2.a)({},componentMeta.parameters.docs||{},{page:function page(){return Object(index_es.mdx)(blocks.AddContext,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentMeta:componentMeta},Object(index_es.mdx)(MDXContent,null))}});__webpack_exports__.default=componentMeta;Code_stories_inline.__docgenInfo={description:"",methods:[],displayName:"inline"},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Code/Code.stories.mdx"]={name:"inline",docgenInfo:Code_stories_inline.__docgenInfo,path:"src/components/Code/Code.stories.mdx"}),Code_stories_block.__docgenInfo={description:"",methods:[],displayName:"block"},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Code/Code.stories.mdx"]={name:"block",docgenInfo:Code_stories_block.__docgenInfo,path:"src/components/Code/Code.stories.mdx"}),Code_stories_copyable.__docgenInfo={description:"",methods:[],displayName:"copyable"},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Code/Code.stories.mdx"]={name:"copyable",docgenInfo:Code_stories_copyable.__docgenInfo,path:"src/components/Code/Code.stories.mdx"}),Code_stories_numbered.__docgenInfo={description:"",methods:[],displayName:"numbered"},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Code/Code.stories.mdx"]={name:"numbered",docgenInfo:Code_stories_numbered.__docgenInfo,path:"src/components/Code/Code.stories.mdx"})},1308:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__);var objectSpread2=__webpack_require__(10),objectWithoutProperties=__webpack_require__(3),react=__webpack_require__(1),react_default=__webpack_require__.n(react),index_es=__webpack_require__(0),blocks=__webpack_require__(2),dist=__webpack_require__(5),classnames=__webpack_require__(8),classnames_default=__webpack_require__.n(classnames),List_List=function List(_ref){var className=_ref.className,detailed=_ref.detailed,divided=_ref.divided,inline=_ref.inline,items=_ref.items,middot=_ref.middot,split=_ref.split,stepped=_ref.stepped,ticked=_ref.ticked,props=Object(objectWithoutProperties.a)(_ref,["className","detailed","divided","inline","items","middot","split","stepped","ticked"]),Component=stepped?"ol":"ul";return react_default.a.createElement(Component,Object.assign({className:classnames_default()("p-list",className,{"p-list":!(divided||inline||middot||stepped),"p-list--divided":divided,"p-inline-list":inline,"p-inline-list--middot":middot,"p-stepped-list":stepped&&!detailed,"p-stepped-list--detailed":stepped&&detailed,"is-split":split})},props),function generateItems(items,ticked,inline,stepped){return items.map((function(item,i){var body,title,className,content,TitleComponent,props;if(react_default.a.isValidElement(item)||"string"==typeof item||"number"==typeof item)content=item;else{var _item=item;title=_item.title,className=_item.className,content=_item.content;var _item$titleElement=_item.titleElement;TitleComponent=void 0===_item$titleElement?"h3":_item$titleElement,props=Object(objectWithoutProperties.a)(_item,["title","className","content","titleElement"])}return body=stepped?react_default.a.createElement(react_default.a.Fragment,null,react_default.a.createElement(TitleComponent,{className:"p-stepped-list__title"},title),react_default.a.createElement("p",{className:"p-stepped-list__content"},content)):content,react_default.a.createElement("li",Object.assign({className:classnames_default()(className,{"p-list__item":!inline&&!stepped,"p-inline-list__item":inline,"p-stepped-list__item":stepped,"is-ticked":ticked}),key:i},props),body)}))}(items,ticked,inline||middot,stepped))};List_List.__docgenInfo={description:"",methods:[],displayName:"List"};var components_List_List=List_List;"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/List/List.js"]={name:"List",docgenInfo:List_List.__docgenInfo,path:"src/components/List/List.js"}),__webpack_require__.d(__webpack_exports__,"defaultStory",(function(){return List_stories_defaultStory})),__webpack_require__.d(__webpack_exports__,"ticked",(function(){return List_stories_ticked})),__webpack_require__.d(__webpack_exports__,"horizontalDivider",(function(){return List_stories_horizontalDivider})),__webpack_require__.d(__webpack_exports__,"tickedWithHorizontalDivider",(function(){return List_stories_tickedWithHorizontalDivider})),__webpack_require__.d(__webpack_exports__,"inline",(function(){return List_stories_inline})),__webpack_require__.d(__webpack_exports__,"middot",(function(){return List_stories_middot})),__webpack_require__.d(__webpack_exports__,"verticalStepped",(function(){return List_stories_verticalStepped})),__webpack_require__.d(__webpack_exports__,"horizontalStepped",(function(){return List_stories_horizontalStepped})),__webpack_require__.d(__webpack_exports__,"split",(function(){return List_stories_split}));var layoutProps={};function MDXContent(_ref){var components=_ref.components,props=Object(objectWithoutProperties.a)(_ref,["components"]);return Object(index_es.mdx)("wrapper",Object.assign({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(index_es.mdx)(blocks.Meta,{title:"List",component:components_List_List,decorators:[dist.withKnobs],mdxType:"Meta"}),Object(index_es.mdx)("h3",{id:"list"},"List"),Object(index_es.mdx)("p",null,"This is a ",Object(index_es.mdx)("a",Object.assign({parentName:"p"},{href:"https://reactjs.org/",target:"_blank",rel:["nofollow","noopener","noreferrer"]}),"React")," component for the Vanilla ",Object(index_es.mdx)("a",Object.assign({parentName:"p"},{href:"https://docs.vanillaframework.io/patterns/lists/",target:"_blank",rel:["nofollow","noopener","noreferrer"]}),"List"),"."),Object(index_es.mdx)("p",null,"If you want to display lists in a way that is more visually distinctive than the standard ",Object(index_es.mdx)("inlineCode",{parentName:"p"},"
    ")," and ",Object(index_es.mdx)("inlineCode",{parentName:"p"},"
      "),", we have 7 list styles at your disposal."),Object(index_es.mdx)("h3",{id:"props"},"Props"),Object(index_es.mdx)(blocks.Props,{of:components_List_List,mdxType:"Props"}),Object(index_es.mdx)("h3",{id:"default"},"Default"),Object(index_es.mdx)(blocks.Preview,{mdxType:"Preview"},Object(index_es.mdx)(blocks.Story,{name:"Default",mdxType:"Story"},Object(index_es.mdx)(components_List_List,{items:["Digital signage","Robotics","Gateways"],mdxType:"List"}))),Object(index_es.mdx)("h3",{id:"ticked"},"Ticked"),Object(index_es.mdx)(blocks.Preview,{mdxType:"Preview"},Object(index_es.mdx)(blocks.Story,{name:"Ticked",mdxType:"Story"},Object(index_es.mdx)(components_List_List,{items:["Hardware guidance and sizing","Fixed-price deployment","Reference architecture"],ticked:!0,mdxType:"List"}))),Object(index_es.mdx)("h3",{id:"horizontal-divider"},"Horizontal divider"),Object(index_es.mdx)(blocks.Preview,{mdxType:"Preview"},Object(index_es.mdx)(blocks.Story,{name:"Horizontal divider",mdxType:"Story"},Object(index_es.mdx)(components_List_List,{items:["Single-command install and upgrade","Postgres database for reliable state","High availability for all services"],divided:!0,mdxType:"List"}))),Object(index_es.mdx)("h3",{id:"ticked-with-horizontal-divider"},"Ticked with horizontal divider"),Object(index_es.mdx)(blocks.Preview,{mdxType:"Preview"},Object(index_es.mdx)(blocks.Story,{name:"Ticked with horizontal divider",mdxType:"Story"},Object(index_es.mdx)(components_List_List,{items:["Balance compute load in the cloud","Optimise for specific workloads","Assess overcommit ratios"],divided:!0,ticked:!0,mdxType:"List"}))),Object(index_es.mdx)("h3",{id:"inline"},"Inline"),Object(index_es.mdx)(blocks.Preview,{mdxType:"Preview"},Object(index_es.mdx)(blocks.Story,{name:"Inline",mdxType:"Story"},Object(index_es.mdx)(components_List_List,{items:["Community","Careers","Press centre"],inline:!0,mdxType:"List"}))),Object(index_es.mdx)("h3",{id:"middot"},"Middot"),Object(index_es.mdx)(blocks.Preview,{mdxType:"Preview"},Object(index_es.mdx)(blocks.Story,{name:"Middot",mdxType:"Story"},Object(index_es.mdx)(components_List_List,{items:["Legal information","Data privacy","Report a bug on this site"],middot:!0,mdxType:"List"}))),Object(index_es.mdx)("h3",{id:"vertical-stepped"},"Vertical stepped"),Object(index_es.mdx)(blocks.Preview,{mdxType:"Preview"},Object(index_es.mdx)(blocks.Story,{name:"Vertical stepped",mdxType:"Story"},Object(index_es.mdx)(components_List_List,{items:[{title:"Log in to JAAS",content:"Ensure you have an Ubuntu SSO account before contacting JAAS. Log in to JAAS now."},{title:"Configure a model",content:'Applications are contained within models and are installed via charms. Configure your model by pressing the "Start a new model" button.'},{title:"Credentials and SSH keys",content:"After having selected a cloud, a form will appear for submitting your credentials to JAAS. The below resources are available if you need help with gathering credentials."}],stepped:!0,mdxType:"List"}),Object(index_es.mdx)(components_List_List,{items:[{title:"Log in to JAAS",content:"Ensure you have an Ubuntu SSO account before contacting JAAS. Log in to JAAS now.",titleElement:"h4"},{title:"Configure a model",content:'Applications are contained within models and are installed via charms. Configure your model by pressing the "Start a new model" button.',titleElement:"h4"},{title:"Credentials and SSH keys",content:"After having selected a cloud, a form will appear for submitting your credentials to JAAS. The below resources are available if you need help with gathering credentials.",titleElement:"h4"}],stepped:!0,mdxType:"List"}))),Object(index_es.mdx)("h3",{id:"horizontal-stepped"},"Horizontal stepped"),Object(index_es.mdx)(blocks.Preview,{mdxType:"Preview"},Object(index_es.mdx)(blocks.Story,{name:"Horizontal stepped",mdxType:"Story"},Object(index_es.mdx)(components_List_List,{items:[{title:"Log in to JAAS",content:"Ensure you have an Ubuntu SSO account before contacting JAAS. Log in to JAAS now."},{title:"Configure a model",content:'Applications are contained within models and are installed via charms. Configure your model by pressing the "Start a new model" button.'}],stepped:!0,detailed:!0,mdxType:"List"}))),Object(index_es.mdx)("h3",{id:"split"},"Split"),Object(index_es.mdx)(blocks.Preview,{mdxType:"Preview"},Object(index_es.mdx)(blocks.Story,{name:"Split",mdxType:"Story"},Object(index_es.mdx)(components_List_List,{items:["Jointly shape the OpenStack architecture","We help you plan your cloud hardware requirements","We build OpenStack in your data center","We operate the cloud to an SLA","Transparent audit, logging, monitoring and management","When your team is ready, we hand over the keys"],divided:!0,split:!0,ticked:!0,mdxType:"List"}))))}MDXContent.isMDXComponent=!0;var List_stories_defaultStory=function defaultStory(){return Object(index_es.mdx)(components_List_List,{items:["Digital signage","Robotics","Gateways"]})};List_stories_defaultStory.story={},List_stories_defaultStory.story.name="Default",List_stories_defaultStory.story.parameters={mdxSource:''};var List_stories_ticked=function ticked(){return Object(index_es.mdx)(components_List_List,{items:["Hardware guidance and sizing","Fixed-price deployment","Reference architecture"],ticked:!0})};List_stories_ticked.story={},List_stories_ticked.story.name="Ticked",List_stories_ticked.story.parameters={mdxSource:''};var List_stories_horizontalDivider=function horizontalDivider(){return Object(index_es.mdx)(components_List_List,{items:["Single-command install and upgrade","Postgres database for reliable state","High availability for all services"],divided:!0})};List_stories_horizontalDivider.story={},List_stories_horizontalDivider.story.name="Horizontal divider",List_stories_horizontalDivider.story.parameters={mdxSource:''};var List_stories_tickedWithHorizontalDivider=function tickedWithHorizontalDivider(){return Object(index_es.mdx)(components_List_List,{items:["Balance compute load in the cloud","Optimise for specific workloads","Assess overcommit ratios"],divided:!0,ticked:!0})};List_stories_tickedWithHorizontalDivider.story={},List_stories_tickedWithHorizontalDivider.story.name="Ticked with horizontal divider",List_stories_tickedWithHorizontalDivider.story.parameters={mdxSource:''};var List_stories_inline=function inline(){return Object(index_es.mdx)(components_List_List,{items:["Community","Careers","Press centre"],inline:!0})};List_stories_inline.story={},List_stories_inline.story.name="Inline",List_stories_inline.story.parameters={mdxSource:''};var List_stories_middot=function middot(){return Object(index_es.mdx)(components_List_List,{items:["Legal information","Data privacy","Report a bug on this site"],middot:!0})};List_stories_middot.story={},List_stories_middot.story.name="Middot",List_stories_middot.story.parameters={mdxSource:''};var List_stories_verticalStepped=function verticalStepped(){return Object(index_es.mdx)(components_List_List,{items:[{title:"Log in to JAAS",content:"Ensure you have an Ubuntu SSO account before contacting JAAS. Log in to JAAS now."},{title:"Configure a model",content:'Applications are contained within models and are installed via charms. Configure your model by pressing the "Start a new model" button.'},{title:"Credentials and SSH keys",content:"After having selected a cloud, a form will appear for submitting your credentials to JAAS. The below resources are available if you need help with gathering credentials."}],stepped:!0})};List_stories_verticalStepped.story={},List_stories_verticalStepped.story.name="Vertical stepped",List_stories_verticalStepped.story.parameters={mdxSource:''};var List_stories_horizontalStepped=function horizontalStepped(){return Object(index_es.mdx)(components_List_List,{items:[{title:"Log in to JAAS",content:"Ensure you have an Ubuntu SSO account before contacting JAAS. Log in to JAAS now."},{title:"Configure a model",content:'Applications are contained within models and are installed via charms. Configure your model by pressing the "Start a new model" button.'}],stepped:!0,detailed:!0})};List_stories_horizontalStepped.story={},List_stories_horizontalStepped.story.name="Horizontal stepped",List_stories_horizontalStepped.story.parameters={mdxSource:''};var List_stories_split=function split(){return Object(index_es.mdx)(components_List_List,{items:["Jointly shape the OpenStack architecture","We help you plan your cloud hardware requirements","We build OpenStack in your data center","We operate the cloud to an SLA","Transparent audit, logging, monitoring and management","When your team is ready, we hand over the keys"],divided:!0,split:!0,ticked:!0})};List_stories_split.story={},List_stories_split.story.name="Split",List_stories_split.story.parameters={mdxSource:''};var componentMeta={title:"List",decorators:[dist.withKnobs],includeStories:["defaultStory","ticked","horizontalDivider","tickedWithHorizontalDivider","inline","middot","verticalStepped","horizontalStepped","split"]},mdxStoryNameToKey={Default:"defaultStory",Ticked:"ticked","Horizontal divider":"horizontalDivider","Ticked with horizontal divider":"tickedWithHorizontalDivider",Inline:"inline",Middot:"middot","Vertical stepped":"verticalStepped","Horizontal stepped":"horizontalStepped",Split:"split"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object(objectSpread2.a)({},componentMeta.parameters.docs||{},{page:function page(){return Object(index_es.mdx)(blocks.AddContext,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentMeta:componentMeta},Object(index_es.mdx)(MDXContent,null))}});__webpack_exports__.default=componentMeta;List_stories_defaultStory.__docgenInfo={description:"",methods:[],displayName:"defaultStory"},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/List/List.stories.mdx"]={name:"defaultStory",docgenInfo:List_stories_defaultStory.__docgenInfo,path:"src/components/List/List.stories.mdx"}),List_stories_ticked.__docgenInfo={description:"",methods:[],displayName:"ticked"},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/List/List.stories.mdx"]={name:"ticked",docgenInfo:List_stories_ticked.__docgenInfo,path:"src/components/List/List.stories.mdx"}),List_stories_horizontalDivider.__docgenInfo={description:"",methods:[],displayName:"horizontalDivider"},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/List/List.stories.mdx"]={name:"horizontalDivider",docgenInfo:List_stories_horizontalDivider.__docgenInfo,path:"src/components/List/List.stories.mdx"}),List_stories_tickedWithHorizontalDivider.__docgenInfo={description:"",methods:[],displayName:"tickedWithHorizontalDivider"},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/List/List.stories.mdx"]={name:"tickedWithHorizontalDivider",docgenInfo:List_stories_tickedWithHorizontalDivider.__docgenInfo,path:"src/components/List/List.stories.mdx"}),List_stories_inline.__docgenInfo={description:"",methods:[],displayName:"inline"},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/List/List.stories.mdx"]={name:"inline",docgenInfo:List_stories_inline.__docgenInfo,path:"src/components/List/List.stories.mdx"}),List_stories_middot.__docgenInfo={description:"",methods:[],displayName:"middot"},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/List/List.stories.mdx"]={name:"middot",docgenInfo:List_stories_middot.__docgenInfo,path:"src/components/List/List.stories.mdx"}),List_stories_verticalStepped.__docgenInfo={description:"",methods:[],displayName:"verticalStepped"},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/List/List.stories.mdx"]={name:"verticalStepped",docgenInfo:List_stories_verticalStepped.__docgenInfo,path:"src/components/List/List.stories.mdx"}),List_stories_horizontalStepped.__docgenInfo={description:"",methods:[],displayName:"horizontalStepped"},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/List/List.stories.mdx"]={name:"horizontalStepped",docgenInfo:List_stories_horizontalStepped.__docgenInfo,path:"src/components/List/List.stories.mdx"}),List_stories_split.__docgenInfo={description:"",methods:[],displayName:"split"},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/List/List.stories.mdx"]={name:"split",docgenInfo:List_stories_split.__docgenInfo,path:"src/components/List/List.stories.mdx"})},1309:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__);var objectSpread2=__webpack_require__(10),objectWithoutProperties=__webpack_require__(3),react=__webpack_require__(1),react_default=__webpack_require__.n(react),index_es=__webpack_require__(0),blocks=__webpack_require__(2),dist=__webpack_require__(5),classnames=__webpack_require__(8),classnames_default=__webpack_require__.n(classnames),Loader_Loader_Loader=(__webpack_require__(1289),function Loader(_ref){var className=_ref.className,text=_ref.text,isLight=_ref.isLight,inline=_ref.inline;return react_default.a.createElement("div",{className:classnames_default()(className,"p-loader","p-text--default",{"p-loader--inline":inline})},react_default.a.createElement("i",{className:classnames_default()("p-icon--spinner","u-animation--spin",{"is-light":isLight})}),text&&react_default.a.createElement("span",{className:"p-icon__text"},text))});Loader_Loader_Loader.__docgenInfo={description:"",methods:[],displayName:"Loader"};var components_Loader_Loader=Loader_Loader_Loader;"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Loader/Loader.js"]={name:"Loader",docgenInfo:Loader_Loader_Loader.__docgenInfo,path:"src/components/Loader/Loader.js"}),__webpack_require__.d(__webpack_exports__,"defaultStory",(function(){return Loader_stories_defaultStory}));var layoutProps={};function MDXContent(_ref){var components=_ref.components,props=Object(objectWithoutProperties.a)(_ref,["components"]);return Object(index_es.mdx)("wrapper",Object.assign({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(index_es.mdx)(blocks.Meta,{title:"Loader",component:components_Loader_Loader,decorators:[dist.withKnobs],mdxType:"Meta"}),Object(index_es.mdx)("h3",{id:"loader"},"Loader"),Object(index_es.mdx)("p",null,"This is a not an existing Vanilla component. It can be used to display loading states."),Object(index_es.mdx)("h3",{id:"props"},"Props"),Object(index_es.mdx)(blocks.Props,{of:components_Loader_Loader,mdxType:"Props"}),Object(index_es.mdx)("h3",{id:"default"},"Default"),Object(index_es.mdx)(blocks.Preview,{mdxType:"Preview"},Object(index_es.mdx)(blocks.Story,{name:"Default",mdxType:"Story"},Object(index_es.mdx)(components_Loader_Loader,{text:"Loading...",mdxType:"Loader"}))))}MDXContent.isMDXComponent=!0;var Loader_stories_defaultStory=function defaultStory(){return Object(index_es.mdx)(components_Loader_Loader,{text:"Loading..."})};Loader_stories_defaultStory.story={},Loader_stories_defaultStory.story.name="Default",Loader_stories_defaultStory.story.parameters={mdxSource:''};var componentMeta={title:"Loader",decorators:[dist.withKnobs],includeStories:["defaultStory"]},mdxStoryNameToKey={Default:"defaultStory"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object(objectSpread2.a)({},componentMeta.parameters.docs||{},{page:function page(){return Object(index_es.mdx)(blocks.AddContext,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentMeta:componentMeta},Object(index_es.mdx)(MDXContent,null))}});__webpack_exports__.default=componentMeta;Loader_stories_defaultStory.__docgenInfo={description:"",methods:[],displayName:"defaultStory"},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Loader/Loader.stories.mdx"]={name:"defaultStory",docgenInfo:Loader_stories_defaultStory.__docgenInfo,path:"src/components/Loader/Loader.stories.mdx"})},1310:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__);var objectSpread2=__webpack_require__(10),objectWithoutProperties=__webpack_require__(3),react=__webpack_require__(1),react_default=__webpack_require__.n(react),index_es=__webpack_require__(0),blocks=__webpack_require__(2),dist=__webpack_require__(5),v4=__webpack_require__(126),v4_default=__webpack_require__.n(v4),Modal_Modal=function Modal(_ref){var children=_ref.children,close=_ref.close,title=_ref.title,descriptionId=Object(react.useRef)(v4_default()()),titleId=Object(react.useRef)(v4_default()());return react_default.a.createElement("div",{className:"p-modal",onClick:close},react_default.a.createElement("div",{className:"p-modal__dialog",role:"dialog","aria-labelledby":titleId.current,"aria-describedby":descriptionId.current,onClick:function onClick(evt){return evt.stopPropagation()}},react_default.a.createElement("header",{className:"p-modal__header"},react_default.a.createElement("h2",{className:"p-modal__title",id:titleId.current},title),react_default.a.createElement("button",{className:"p-modal__close","aria-label":"Close active modal",onClick:close},"Close")),react_default.a.createElement("div",{id:descriptionId.current},children)))};Modal_Modal.__docgenInfo={description:"",methods:[],displayName:"Modal"};var components_Modal_Modal=Modal_Modal;"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Modal/Modal.js"]={name:"Modal",docgenInfo:Modal_Modal.__docgenInfo,path:"src/components/Modal/Modal.js"}),__webpack_require__.d(__webpack_exports__,"defaultStory",(function(){return Modal_stories_defaultStory}));var layoutProps={};function MDXContent(_ref){var components=_ref.components,props=Object(objectWithoutProperties.a)(_ref,["components"]);return Object(index_es.mdx)("wrapper",Object.assign({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(index_es.mdx)(blocks.Meta,{title:"Modal",component:components_Modal_Modal,decorators:[dist.withKnobs],mdxType:"Meta"}),Object(index_es.mdx)("h3",{id:"modal"},"Modal"),Object(index_es.mdx)("p",null,"This is a ",Object(index_es.mdx)("a",Object.assign({parentName:"p"},{href:"https://reactjs.org/",target:"_blank",rel:["nofollow","noopener","noreferrer"]}),"React")," component for the Vanilla ",Object(index_es.mdx)("a",Object.assign({parentName:"p"},{href:"https://docs.vanillaframework.io/patterns/modal/",target:"_blank",rel:["nofollow","noopener","noreferrer"]}),"Modal"),"."),Object(index_es.mdx)("p",null,"The modal component can be used to overlay an area of the screen which can contain a prompt, dialog or interaction."),Object(index_es.mdx)("h3",{id:"props"},"Props"),Object(index_es.mdx)(blocks.Props,{of:components_Modal_Modal,mdxType:"Props"}),Object(index_es.mdx)(blocks.Preview,{mdxType:"Preview"},Object(index_es.mdx)(blocks.Story,{name:"Default",mdxType:"Story"},"// This containing div is only required for the component demo.",Object(index_es.mdx)("div",{style:{height:"100vh",position:"relative"}},Object(index_es.mdx)(components_Modal_Modal,{close:function close(){},title:"Confirm delete",mdxType:"Modal"},Object(index_es.mdx)("p",null,'Are you sure you want to delete user "Simon"? This action is permanent and can not be undone.'),Object(index_es.mdx)("hr",null),Object(index_es.mdx)("div",{className:"u-align--right"},Object(index_es.mdx)("button",{onClick:function onClick(){},className:"u-no-margin--bottom"},"Cancel"),Object(index_es.mdx)("button",{className:"p-button--negative u-no-margin--bottom"},"Delete")))))))}MDXContent.isMDXComponent=!0;var Modal_stories_defaultStory=function defaultStory(){return Object(index_es.mdx)("div",{style:{height:"100vh",position:"relative"}},Object(index_es.mdx)(components_Modal_Modal,{close:function close(){},title:"Confirm delete"},Object(index_es.mdx)("p",null,'Are you sure you want to delete user "Simon"? This action is permanent and can not be undone.'),Object(index_es.mdx)("hr",null),Object(index_es.mdx)("div",{className:"u-align--right"},Object(index_es.mdx)("button",{onClick:function onClick(){},className:"u-no-margin--bottom"},"Cancel"),Object(index_es.mdx)("button",{className:"p-button--negative u-no-margin--bottom"},"Delete"))))};Modal_stories_defaultStory.story={},Modal_stories_defaultStory.story.name="Default",Modal_stories_defaultStory.story.parameters={mdxSource:'
      \n       {}} title="Confirm delete">\n        
      \n          Are you sure you want to delete user "Simon"? This action is permanent\n          and can not be undone.\n        
      \n        
      \n        
      \n          \n          \n        
      \n            \n    
      '};var componentMeta={title:"Modal",decorators:[dist.withKnobs],includeStories:["defaultStory"]},mdxStoryNameToKey={Default:"defaultStory"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object(objectSpread2.a)({},componentMeta.parameters.docs||{},{page:function page(){return Object(index_es.mdx)(blocks.AddContext,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentMeta:componentMeta},Object(index_es.mdx)(MDXContent,null))}});__webpack_exports__.default=componentMeta;Modal_stories_defaultStory.__docgenInfo={description:"",methods:[],displayName:"defaultStory"},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Modal/Modal.stories.mdx"]={name:"defaultStory",docgenInfo:Modal_stories_defaultStory.__docgenInfo,path:"src/components/Modal/Modal.stories.mdx"})},1311:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__);var objectSpread2=__webpack_require__(10),objectWithoutProperties=__webpack_require__(3),react=__webpack_require__(1),react_default=__webpack_require__.n(react),index_es=__webpack_require__(0),blocks=__webpack_require__(2),dist=__webpack_require__(5),defineProperty=__webpack_require__(42),classnames=__webpack_require__(8),classnames_default=__webpack_require__.n(classnames),Notification_Notification=function Notification(_ref){var _classNames,children=_ref.children,className=_ref.className,close=_ref.close,status=_ref.status,timeout=_ref.timeout,type=_ref.type,props=Object(objectWithoutProperties.a)(_ref,["children","className","close","status","timeout","type"]),timeoutId=Object(react.useRef)();return Object(react.useEffect)((function(){return timeout&&close&&(timeoutId.current=setTimeout((function(){return close()}),timeout)),function(){return clearTimeout(timeoutId.current)}}),[close,timeout]),react_default.a.createElement("div",Object.assign({className:classnames_default()(className,(_classNames={},Object(defineProperty.a)(_classNames,"p-notification--".concat(type),!!type),Object(defineProperty.a)(_classNames,"p-notification",!type),_classNames))},props),react_default.a.createElement("p",{className:"p-notification__response"},status&&react_default.a.createElement("span",{className:"p-notification__status"},status),children),close&&react_default.a.createElement("button",{className:"p-icon--close","aria-label":"Close notification",onClick:close},"Close"))};Notification_Notification.__docgenInfo={description:"",methods:[],displayName:"Notification"};var components_Notification_Notification=Notification_Notification;"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Notification/Notification.js"]={name:"Notification",docgenInfo:Notification_Notification.__docgenInfo,path:"src/components/Notification/Notification.js"}),__webpack_require__.d(__webpack_exports__,"defaultStory",(function(){return Notification_stories_defaultStory})),__webpack_require__.d(__webpack_exports__,"caution",(function(){return Notification_stories_caution})),__webpack_require__.d(__webpack_exports__,"negative",(function(){return Notification_stories_negative})),__webpack_require__.d(__webpack_exports__,"positive",(function(){return Notification_stories_positive})),__webpack_require__.d(__webpack_exports__,"information",(function(){return Notification_stories_information}));var layoutProps={};function MDXContent(_ref){var components=_ref.components,props=Object(objectWithoutProperties.a)(_ref,["components"]);return Object(index_es.mdx)("wrapper",Object.assign({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(index_es.mdx)(blocks.Meta,{title:"Notification",component:components_Notification_Notification,decorators:[dist.withKnobs],mdxType:"Meta"}),Object(index_es.mdx)("h3",{id:"notification"},"Notification"),Object(index_es.mdx)("p",null,"This is a ",Object(index_es.mdx)("a",Object.assign({parentName:"p"},{href:"https://reactjs.org/",target:"_blank",rel:["nofollow","noopener","noreferrer"]}),"React")," component for the Vanilla ",Object(index_es.mdx)("a",Object.assign({parentName:"p"},{href:"https://docs.vanillaframework.io/patterns/notification/",target:"_blank",rel:["nofollow","noopener","noreferrer"]}),"Notification"),"."),Object(index_es.mdx)("p",null,"Notifications are used to display global information, our notification variants consist of default, caution, negative or positive."),Object(index_es.mdx)("h3",{id:"props"},"Props"),Object(index_es.mdx)(blocks.Props,{of:components_Notification_Notification,mdxType:"Props"}),Object(index_es.mdx)("h3",{id:"default"},"Default"),Object(index_es.mdx)(blocks.Preview,{mdxType:"Preview"},Object(index_es.mdx)(blocks.Story,{name:"Default",mdxType:"Story"},Object(index_es.mdx)(components_Notification_Notification,{close:function close(){},mdxType:"Notification"},"We use cookies to improve your experience. By your continued use of this site you accept such use."))),Object(index_es.mdx)("h3",{id:"caution"},"Caution"),Object(index_es.mdx)(blocks.Preview,{mdxType:"Preview"},Object(index_es.mdx)(blocks.Story,{name:"Caution",mdxType:"Story"},Object(index_es.mdx)(components_Notification_Notification,{type:"caution",status:"Blocked:",mdxType:"Notification"},"Custom storage configuration is only supported on Ubuntu, CentOS and RHEL."))),Object(index_es.mdx)("h3",{id:"negative"},"Negative"),Object(index_es.mdx)(blocks.Preview,{mdxType:"Preview"},Object(index_es.mdx)(blocks.Story,{name:"Negative",mdxType:"Story"},Object(index_es.mdx)(components_Notification_Notification,{type:"negative",status:"Error:",mdxType:"Notification"},"Node must be connected to a network."))),Object(index_es.mdx)("h3",{id:"positive"},"Positive"),Object(index_es.mdx)(blocks.Preview,{mdxType:"Preview"},Object(index_es.mdx)(blocks.Story,{name:"Positive",mdxType:"Story"},Object(index_es.mdx)(components_Notification_Notification,{type:"positive",status:"Success:",mdxType:"Notification"},"Code successfully reformatted."))),Object(index_es.mdx)("h3",{id:"information"},"Information"),Object(index_es.mdx)(blocks.Preview,{mdxType:"Preview"},Object(index_es.mdx)(blocks.Story,{name:"Information",mdxType:"Story"},Object(index_es.mdx)(components_Notification_Notification,{type:"information",status:"Information:",mdxType:"Notification"},"Anyone with access can view your invited users."))))}MDXContent.isMDXComponent=!0;var Notification_stories_defaultStory=function defaultStory(){return Object(index_es.mdx)(components_Notification_Notification,{close:function close(){}},"We use cookies to improve your experience. By your continued use of this site you accept such use.")};Notification_stories_defaultStory.story={},Notification_stories_defaultStory.story.name="Default",Notification_stories_defaultStory.story.parameters={mdxSource:" {}}>\n      We use cookies to improve your experience. By your continued use of this\n      site you accept such use.\n    "};var Notification_stories_caution=function caution(){return Object(index_es.mdx)(components_Notification_Notification,{type:"caution",status:"Blocked:"},"Custom storage configuration is only supported on Ubuntu, CentOS and RHEL.")};Notification_stories_caution.story={},Notification_stories_caution.story.name="Caution",Notification_stories_caution.story.parameters={mdxSource:'\n      Custom storage configuration is only supported on Ubuntu, CentOS and RHEL.\n    '};var Notification_stories_negative=function negative(){return Object(index_es.mdx)(components_Notification_Notification,{type:"negative",status:"Error:"},"Node must be connected to a network.")};Notification_stories_negative.story={},Notification_stories_negative.story.name="Negative",Notification_stories_negative.story.parameters={mdxSource:'\n      Node must be connected to a network.\n    '};var Notification_stories_positive=function positive(){return Object(index_es.mdx)(components_Notification_Notification,{type:"positive",status:"Success:"},"Code successfully reformatted.")};Notification_stories_positive.story={},Notification_stories_positive.story.name="Positive",Notification_stories_positive.story.parameters={mdxSource:'\n      Code successfully reformatted.\n    '};var Notification_stories_information=function information(){return Object(index_es.mdx)(components_Notification_Notification,{type:"information",status:"Information:"},"Anyone with access can view your invited users.")};Notification_stories_information.story={},Notification_stories_information.story.name="Information",Notification_stories_information.story.parameters={mdxSource:'\n      Anyone with access can view your invited users.\n    '};var componentMeta={title:"Notification",decorators:[dist.withKnobs],includeStories:["defaultStory","caution","negative","positive","information"]},mdxStoryNameToKey={Default:"defaultStory",Caution:"caution",Negative:"negative",Positive:"positive",Information:"information"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object(objectSpread2.a)({},componentMeta.parameters.docs||{},{page:function page(){return Object(index_es.mdx)(blocks.AddContext,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentMeta:componentMeta},Object(index_es.mdx)(MDXContent,null))}});__webpack_exports__.default=componentMeta;Notification_stories_defaultStory.__docgenInfo={description:"",methods:[],displayName:"defaultStory"},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Notification/Notification.stories.mdx"]={name:"defaultStory",docgenInfo:Notification_stories_defaultStory.__docgenInfo,path:"src/components/Notification/Notification.stories.mdx"}),Notification_stories_caution.__docgenInfo={description:"",methods:[],displayName:"caution"},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Notification/Notification.stories.mdx"]={name:"caution",docgenInfo:Notification_stories_caution.__docgenInfo,path:"src/components/Notification/Notification.stories.mdx"}),Notification_stories_negative.__docgenInfo={description:"",methods:[],displayName:"negative"},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Notification/Notification.stories.mdx"]={name:"negative",docgenInfo:Notification_stories_negative.__docgenInfo,path:"src/components/Notification/Notification.stories.mdx"}),Notification_stories_positive.__docgenInfo={description:"",methods:[],displayName:"positive"},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Notification/Notification.stories.mdx"]={name:"positive",docgenInfo:Notification_stories_positive.__docgenInfo,path:"src/components/Notification/Notification.stories.mdx"}),Notification_stories_information.__docgenInfo={description:"",methods:[],displayName:"information"},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Notification/Notification.stories.mdx"]={name:"information",docgenInfo:Notification_stories_information.__docgenInfo,path:"src/components/Notification/Notification.stories.mdx"})},1312:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__);var objectSpread2=__webpack_require__(10),objectWithoutProperties=__webpack_require__(3),react=__webpack_require__(1),react_default=__webpack_require__.n(react),index_es=__webpack_require__(0),blocks=__webpack_require__(2),dist=__webpack_require__(5),classnames=__webpack_require__(8),classnames_default=__webpack_require__.n(classnames),SearchBox_SearchBox=function SearchBox(_ref){var className=_ref.className,disabled=_ref.disabled,externallyControlled=_ref.externallyControlled,_onChange=_ref.onChange,onSubmit=_ref.onSubmit,_ref$placeholder=_ref.placeholder,placeholder=void 0===_ref$placeholder?"Search":_ref$placeholder,value=_ref.value,props=Object(objectWithoutProperties.a)(_ref,["className","disabled","externallyControlled","onChange","onSubmit","placeholder","value"]),input=react_default.a.createRef();return react_default.a.createElement("form",Object.assign({className:classnames_default()("p-search-box",className),onSubmit:function submit(evt){evt.preventDefault(),onSubmit&&onSubmit(evt)}},props),react_default.a.createElement("input",{className:"p-search-box__input",disabled:disabled,name:"search",onChange:function onChange(evt){return _onChange(evt.target.value)},placeholder:placeholder,ref:input,type:"search",defaultValue:externallyControlled?void 0:value,value:externallyControlled?value:void 0}),value&&react_default.a.createElement("button",{alt:"reset",className:"p-search-box__reset",disabled:disabled,onClick:function resetInput(){_onChange&&_onChange(""),input.current.value=""},type:"reset"},react_default.a.createElement("i",{className:"p-icon--close"})),react_default.a.createElement("button",{alt:"search",className:"p-search-box__button",disabled:disabled,type:"submit"},react_default.a.createElement("i",{className:"p-icon--search"})))};SearchBox_SearchBox.__docgenInfo={description:"",methods:[],displayName:"SearchBox"};var components_SearchBox_SearchBox=SearchBox_SearchBox;"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/SearchBox/SearchBox.js"]={name:"SearchBox",docgenInfo:SearchBox_SearchBox.__docgenInfo,path:"src/components/SearchBox/SearchBox.js"}),__webpack_require__.d(__webpack_exports__,"defaultStory",(function(){return SearchBox_stories_defaultStory})),__webpack_require__.d(__webpack_exports__,"disabled",(function(){return SearchBox_stories_disabled})),__webpack_require__.d(__webpack_exports__,"externalState",(function(){return SearchBox_stories_externalState})),__webpack_require__.d(__webpack_exports__,"navigation",(function(){return SearchBox_stories_navigation}));var layoutProps={};function MDXContent(_ref){var components=_ref.components,props=Object(objectWithoutProperties.a)(_ref,["components"]);return Object(index_es.mdx)("wrapper",Object.assign({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(index_es.mdx)(blocks.Meta,{title:"SearchBox",component:components_SearchBox_SearchBox,decorators:[dist.withKnobs],mdxType:"Meta"}),Object(index_es.mdx)("h3",{id:"searchbox"},"SearchBox"),Object(index_es.mdx)("p",null,"This is a ",Object(index_es.mdx)("a",Object.assign({parentName:"p"},{href:"https://reactjs.org/",target:"_blank",rel:["nofollow","noopener","noreferrer"]}),"React")," component for the Vanilla ",Object(index_es.mdx)("a",Object.assign({parentName:"p"},{href:"https://docs.vanillaframework.io/patterns/search-box/",target:"_blank",rel:["nofollow","noopener","noreferrer"]}),"SearchBox"),"."),Object(index_es.mdx)("p",null,"Search boxes enable search functionality on a page and are typically used in a navigation bar."),Object(index_es.mdx)("h3",{id:"props"},"Props"),Object(index_es.mdx)(blocks.Props,{of:components_SearchBox_SearchBox,mdxType:"Props"}),Object(index_es.mdx)("h3",{id:"default"},"Default"),Object(index_es.mdx)(blocks.Preview,{mdxType:"Preview"},Object(index_es.mdx)(blocks.Story,{name:"Default",mdxType:"Story"},Object(index_es.mdx)(components_SearchBox_SearchBox,{mdxType:"SearchBox"}))),Object(index_es.mdx)("h3",{id:"disabled"},"Disabled"),Object(index_es.mdx)(blocks.Preview,{mdxType:"Preview"},Object(index_es.mdx)(blocks.Story,{name:"Disabled",mdxType:"Story"},Object(index_es.mdx)(components_SearchBox_SearchBox,{disabled:!0,mdxType:"SearchBox"}))),Object(index_es.mdx)("h3",{id:"external-state"},"External state"),Object(index_es.mdx)("p",null,"If you wish to control the value of the input via external state you can set\nthe ",Object(index_es.mdx)("inlineCode",{parentName:"p"},"externallyControlled")," prop and provide an ",Object(index_es.mdx)("inlineCode",{parentName:"p"},"onChange")," method to update the\nstate and the ",Object(index_es.mdx)("inlineCode",{parentName:"p"},"value")," from state."),Object(index_es.mdx)(blocks.Preview,{mdxType:"Preview"},Object(index_es.mdx)(blocks.Story,{name:"External state",mdxType:"Story"},Object(index_es.mdx)(components_SearchBox_SearchBox,{externallyControlled:!0,onChange:function onChange(){},value:"...",mdxType:"SearchBox"}))),Object(index_es.mdx)("h3",{id:"navigation"},"Navigation"),Object(index_es.mdx)(blocks.Preview,{mdxType:"Preview"},Object(index_es.mdx)(blocks.Story,{name:"Navigation",mdxType:"Story"},Object(index_es.mdx)("header",{id:"navigation",className:"p-navigation"},Object(index_es.mdx)("div",{className:"p-navigation__banner"},Object(index_es.mdx)("div",{className:"p-navigation__logo"},Object(index_es.mdx)("a",{className:"p-navigation__link",href:"#"},Object(index_es.mdx)("img",{className:"p-navigation__image",src:"https://assets.ubuntu.com/v1/5d6da5c4-logo-canonical-aubergine.svg",alt:"",width:"95"}))),Object(index_es.mdx)("a",{href:"#navigation",className:"p-navigation__toggle--open",title:"menu"},"Menu"),Object(index_es.mdx)("a",{href:"#navigation-closed",className:"p-navigation__toggle--close",title:"close menu"},"Close menu")),Object(index_es.mdx)("nav",{className:"p-navigation__nav"},Object(index_es.mdx)("span",{className:"u-off-screen"},Object(index_es.mdx)("a",{href:"#main-content"},"Jump to main content")),Object(index_es.mdx)("ul",{className:"p-navigation__links",role:"menu"},Object(index_es.mdx)("li",{className:"p-navigation__link",role:"menuitem"},Object(index_es.mdx)("a",{href:"#"},"Products")),Object(index_es.mdx)("li",{className:"p-navigation__link",role:"menuitem"},Object(index_es.mdx)("a",{href:"#"},"Services")),Object(index_es.mdx)("li",{className:"p-navigation__link",role:"menuitem"},Object(index_es.mdx)("a",{href:"#"},"Partners")),Object(index_es.mdx)("li",{className:"p-navigation__link",role:"menuitem"},Object(index_es.mdx)("a",{href:"#"},"About")),Object(index_es.mdx)("li",{className:"p-navigation__link",role:"menuitem"},Object(index_es.mdx)("a",{href:"#"},"Partners"))),Object(index_es.mdx)(components_SearchBox_SearchBox,{mdxType:"SearchBox"}))))))}MDXContent.isMDXComponent=!0;var SearchBox_stories_defaultStory=function defaultStory(){return Object(index_es.mdx)(components_SearchBox_SearchBox,null)};SearchBox_stories_defaultStory.story={},SearchBox_stories_defaultStory.story.name="Default",SearchBox_stories_defaultStory.story.parameters={mdxSource:""};var SearchBox_stories_disabled=function disabled(){return Object(index_es.mdx)(components_SearchBox_SearchBox,{disabled:!0})};SearchBox_stories_disabled.story={},SearchBox_stories_disabled.story.name="Disabled",SearchBox_stories_disabled.story.parameters={mdxSource:""};var SearchBox_stories_externalState=function externalState(){return Object(index_es.mdx)(components_SearchBox_SearchBox,{externallyControlled:!0,onChange:function onChange(){},value:"..."})};SearchBox_stories_externalState.story={},SearchBox_stories_externalState.story.name="External state",SearchBox_stories_externalState.story.parameters={mdxSource:' {}} value="..." />'};var SearchBox_stories_navigation=function navigation(){return Object(index_es.mdx)("header",{id:"navigation",className:"p-navigation"},Object(index_es.mdx)("div",{className:"p-navigation__banner"},Object(index_es.mdx)("div",{className:"p-navigation__logo"},Object(index_es.mdx)("a",{className:"p-navigation__link",href:"#"},Object(index_es.mdx)("img",{className:"p-navigation__image",src:"https://assets.ubuntu.com/v1/5d6da5c4-logo-canonical-aubergine.svg",alt:"",width:"95"}))),Object(index_es.mdx)("a",{href:"#navigation",className:"p-navigation__toggle--open",title:"menu"},"Menu"),Object(index_es.mdx)("a",{href:"#navigation-closed",className:"p-navigation__toggle--close",title:"close menu"},"Close menu")),Object(index_es.mdx)("nav",{className:"p-navigation__nav"},Object(index_es.mdx)("span",{className:"u-off-screen"},Object(index_es.mdx)("a",{href:"#main-content"},"Jump to main content")),Object(index_es.mdx)("ul",{className:"p-navigation__links",role:"menu"},Object(index_es.mdx)("li",{className:"p-navigation__link",role:"menuitem"},Object(index_es.mdx)("a",{href:"#"},"Products")),Object(index_es.mdx)("li",{className:"p-navigation__link",role:"menuitem"},Object(index_es.mdx)("a",{href:"#"},"Services")),Object(index_es.mdx)("li",{className:"p-navigation__link",role:"menuitem"},Object(index_es.mdx)("a",{href:"#"},"Partners")),Object(index_es.mdx)("li",{className:"p-navigation__link",role:"menuitem"},Object(index_es.mdx)("a",{href:"#"},"About")),Object(index_es.mdx)("li",{className:"p-navigation__link",role:"menuitem"},Object(index_es.mdx)("a",{href:"#"},"Partners"))),Object(index_es.mdx)(components_SearchBox_SearchBox,null)))};SearchBox_stories_navigation.story={},SearchBox_stories_navigation.story.name="Navigation",SearchBox_stories_navigation.story.parameters={mdxSource:''};var componentMeta={title:"SearchBox",decorators:[dist.withKnobs],includeStories:["defaultStory","disabled","externalState","navigation"]},mdxStoryNameToKey={Default:"defaultStory",Disabled:"disabled","External state":"externalState",Navigation:"navigation"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=Object(objectSpread2.a)({},componentMeta.parameters.docs||{},{page:function page(){return Object(index_es.mdx)(blocks.AddContext,{mdxStoryNameToKey:mdxStoryNameToKey,mdxComponentMeta:componentMeta},Object(index_es.mdx)(MDXContent,null))}});__webpack_exports__.default=componentMeta;SearchBox_stories_defaultStory.__docgenInfo={description:"",methods:[],displayName:"defaultStory"},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/SearchBox/SearchBox.stories.mdx"]={name:"defaultStory",docgenInfo:SearchBox_stories_defaultStory.__docgenInfo,path:"src/components/SearchBox/SearchBox.stories.mdx"}),SearchBox_stories_disabled.__docgenInfo={description:"",methods:[],displayName:"disabled"},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/SearchBox/SearchBox.stories.mdx"]={name:"disabled",docgenInfo:SearchBox_stories_disabled.__docgenInfo,path:"src/components/SearchBox/SearchBox.stories.mdx"}),SearchBox_stories_externalState.__docgenInfo={description:"",methods:[],displayName:"externalState"},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/SearchBox/SearchBox.stories.mdx"]={name:"externalState",docgenInfo:SearchBox_stories_externalState.__docgenInfo,path:"src/components/SearchBox/SearchBox.stories.mdx"}),SearchBox_stories_navigation.__docgenInfo={description:"",methods:[],displayName:"navigation"},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/SearchBox/SearchBox.stories.mdx"]={name:"navigation",docgenInfo:SearchBox_stories_navigation.__docgenInfo,path:"src/components/SearchBox/SearchBox.stories.mdx"})},1313:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__);var objectSpread2=__webpack_require__(10),objectWithoutProperties=__webpack_require__(3),react=__webpack_require__(1),react_default=__webpack_require__.n(react),index_es=__webpack_require__(0),blocks=__webpack_require__(2),dist=__webpack_require__(5),classnames=__webpack_require__(8),classnames_default=__webpack_require__.n(classnames),Field=__webpack_require__(124),Textarea_Textarea=function Textarea(_ref){var caution=_ref.caution,className=_ref.className,error=_ref.error,grow=_ref.grow,help=_ref.help,id=_ref.id,label=_ref.label,required=(_ref.onKeyUp,_ref.required),stacked=_ref.stacked,style=_ref.style,success=_ref.success,props=Object(objectWithoutProperties.a)(_ref,["caution","className","error","grow","help","id","label","onKeyUp","required","stacked","style","success"]);return react_default.a.createElement(Field.a,{caution:caution,error:error,forId:id,help:help,label:label,required:required,stacked:stacked,success:success},react_default.a.createElement("textarea",Object.assign({className:classnames_default()("p-form-validation__input",className),id:id,onKeyUp:function onKeyUp(evt){grow&&(evt.currentTarget.style.height=evt.currentTarget.scrollHeight+"px")},style:grow&&Object(objectSpread2.a)({minHeight:"5rem",resize:"none",overflow:"hidden",boxSizing:"border-box"},style)||style},props)))};Textarea_Textarea.__docgenInfo={description:"",methods:[],displayName:"Textarea"};var components_Textarea_Textarea=Textarea_Textarea;"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Textarea/Textarea.js"]={name:"Textarea",docgenInfo:Textarea_Textarea.__docgenInfo,path:"src/components/Textarea/Textarea.js"}),__webpack_require__.d(__webpack_exports__,"defaultStory",(function(){return Textarea_stories_defaultStory}));var layoutProps={};function MDXContent(_ref){var components=_ref.components,props=Object(objectWithoutProperties.a)(_ref,["components"]);return Object(index_es.mdx)("wrapper",Object.assign({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(index_es.mdx)(blocks.Meta,{title:"Textarea",component:components_Textarea_Textarea,decorators:[dist.withKnobs],mdxType:"Meta"}),Object(index_es.mdx)("h3",{id:"textarea"},"Textarea"),Object(index_es.mdx)("p",null,"This is a ",Object(index_es.mdx)("a",Object.assign({parentName:"p"},{href:"https://reactjs.org/",target:"_blank",rel:["nofollow","noopener","noreferrer"]}),"React")," component for the Vanilla ",Object(index_es.mdx)("a",Object.assign({parentName:"p"},{href:"https://docs.vanillaframework.io/base/forms/#textarea",target:"_blank",rel:["nofollow","noopener","noreferrer"]}),"Textarea"),"."),Object(index_es.mdx)("p",null,"The Textarea component defines a multi-line text input control."),Object(index_es.mdx)("h3",{id:"props"},"Props"),Object(index_es.mdx)(blocks.Props,{of:components_Textarea_Textarea,mdxType:"Props"}),Object(index_es.mdx)(blocks.Preview,{mdxType:"Preview"},Object(index_es.mdx)(blocks.Story,{name:"Default",mdxType:"Story"},Object(index_es.mdx)(components_Textarea_Textarea,{label:"Tell us about your project or interest",id:"textarea2",rows:"3",defaultValue:"Ubuntu",mdxType:"Textarea"}))))}MDXContent.isMDXComponent=!0;var Textarea_stories_defaultStory=function defaultStory(){return Object(index_es.mdx)(components_Textarea_Textarea,{label:"Tell us about your project or interest",id:"textarea2",rows:"3",defaultValue:"Ubuntu"})};Textarea_stories_defaultStory.story={},Textarea_stories_defaultStory.story.name="Default",Textarea_stories_defaultStory.story.parameters={mdxSource:'