diff --git a/CHANGELOG.md b/CHANGELOG.md index 7088df0a7..c12b09527 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,7 +5,13 @@ All notable changes to this project will be documented in this file. The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). -## [Unreleased] +# [Unreleased] + +## [0.8.1] - 2020-07-16 + +### Changed + +Transpile both js and ts with @babel/plugin-typescript, but use tsc for generating declarations. ## [0.8.0] - 2020-07-16 diff --git a/docs/asset-manifest.json b/docs/asset-manifest.json index e8cf74407..006281c10 100644 --- a/docs/asset-manifest.json +++ b/docs/asset-manifest.json @@ -1,22 +1,22 @@ { "files": { - "main.css": "./static/css/main.36af2298.chunk.css", - "main.js": "./main.35a5a72b089e239c709e.bundle.js", - "main.css.map": "./static/css/main.36af2298.chunk.css.map", - "main.js.map": "./main.35a5a72b089e239c709e.bundle.js.map", - "runtime~main.js": "./runtime~main.35a5a72b089e239c709e.bundle.js", - "runtime~main.js.map": "./runtime~main.35a5a72b089e239c709e.bundle.js.map", - "vendors~main.js": "./vendors~main.35a5a72b089e239c709e.bundle.js", - "vendors~main.js.map": "./vendors~main.35a5a72b089e239c709e.bundle.js.map", + "main.css": "./static/css/main.36b3cc8b.chunk.css", + "main.js": "./main.16d8feb750a02722790a.bundle.js", + "main.css.map": "./static/css/main.36b3cc8b.chunk.css.map", + "main.js.map": "./main.16d8feb750a02722790a.bundle.js.map", + "runtime~main.js": "./runtime~main.16d8feb750a02722790a.bundle.js", + "runtime~main.js.map": "./runtime~main.16d8feb750a02722790a.bundle.js.map", + "vendors~main.js": "./vendors~main.16d8feb750a02722790a.bundle.js", + "vendors~main.js.map": "./vendors~main.16d8feb750a02722790a.bundle.js.map", "iframe.html": "./iframe.html", - "precache-manifest.5f26fdc8a1fc6a24eced0481ac9c6db3.js": "./precache-manifest.5f26fdc8a1fc6a24eced0481ac9c6db3.js", + "precache-manifest.6d55e040c5510fbc0731d75e2a084b58.js": "./precache-manifest.6d55e040c5510fbc0731d75e2a084b58.js", "service-worker.js": "./service-worker.js", - "vendors~main.35a5a72b089e239c709e.bundle.js.LICENSE.txt": "./vendors~main.35a5a72b089e239c709e.bundle.js.LICENSE.txt" + "vendors~main.16d8feb750a02722790a.bundle.js.LICENSE.txt": "./vendors~main.16d8feb750a02722790a.bundle.js.LICENSE.txt" }, "entrypoints": [ - "runtime~main.35a5a72b089e239c709e.bundle.js", - "vendors~main.35a5a72b089e239c709e.bundle.js", - "static/css/main.36af2298.chunk.css", - "main.35a5a72b089e239c709e.bundle.js" + "runtime~main.16d8feb750a02722790a.bundle.js", + "vendors~main.16d8feb750a02722790a.bundle.js", + "static/css/main.36b3cc8b.chunk.css", + "main.16d8feb750a02722790a.bundle.js" ] } \ No newline at end of file diff --git a/docs/iframe.html b/docs/iframe.html index d0223927e..50924c430 100644 --- a/docs/iframe.html +++ b/docs/iframe.html @@ -70,7 +70,7 @@ console.warn('unable to connect to top frame for connecting dev tools'); }

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/main.35a5a72b089e239c709e.bundle.js b/docs/main.35a5a72b089e239c709e.bundle.js
deleted file mode 100644
index 9deb7f704..000000000
--- a/docs/main.35a5a72b089e239c709e.bundle.js
+++ /dev/null
@@ -1,2 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[0],{107:function(module,__webpack_exports__,__webpack_require__){"use strict";var _Users_kit_src_canonical_local_react_components_node_modules_babel_preset_react_app_node_modules_babel_runtime_helpers_esm_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__(6),classnames__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__(7),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(_Users_kit_src_canonical_local_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",props:{children:{type:{name:"node"},required:!1,description:""},className:{type:{name:"string"},required:!1,description:""}}},__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"})},108:function(module,__webpack_exports__,__webpack_require__){"use strict";var react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__(1),react__WEBPACK_IMPORTED_MODULE_0___default=__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__),ContextualMenu=function ContextualMenu(_ref){var children=_ref.children,_ref$visible=_ref.visible,visible=void 0!==_ref$visible&&_ref$visible;return(react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div",null,react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("span",{className:"p-contextual-menu--left"},react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("span",{className:"p-contextual-menu__dropdown","aria-hidden":!visible,"aria-label":"submenu"},children))))};ContextualMenu.__docgenInfo={description:"",methods:[],displayName:"ContextualMenu",props:{visible:{defaultValue:{value:"false",computed:!1},type:{name:"bool"},required:!1,description:""},children:{type:{name:"any"},required:!1,description:""}}},__webpack_exports__.a=ContextualMenu,"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/ContextualMenu/ContextualMenu.js"]={name:"ContextualMenu",docgenInfo:ContextualMenu.__docgenInfo,path:"src/components/ContextualMenu/ContextualMenu.js"})},109:function(module,__webpack_exports__,__webpack_require__){"use strict";var react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__(1),react__WEBPACK_IMPORTED_MODULE_0___default=__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__),classnames__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__(7),classnames__WEBPACK_IMPORTED_MODULE_1___default=__webpack_require__.n(classnames__WEBPACK_IMPORTED_MODULE_1__),Spinner=(__webpack_require__(1304),function Spinner(_ref){var className=_ref.className,text=_ref.text,isLight=_ref.isLight,inline=_ref.inline;return(react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("span",{className:classnames__WEBPACK_IMPORTED_MODULE_1___default()(className,"p-spinner","p-text--default",{"p-spinner--inline":inline})},react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("i",{className:classnames__WEBPACK_IMPORTED_MODULE_1___default()("p-icon--spinner","u-animation--spin",{"is-light":isLight})}),text&&react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("span",{className:"p-icon__text"},text)))});Spinner.__docgenInfo={description:"",methods:[],displayName:"Spinner",props:{className:{type:{name:"string"},required:!1,description:""},text:{type:{name:"string"},required:!1,description:""},isLight:{type:{name:"bool"},required:!1,description:""},inline:{type:{name:"bool"},required:!1,description:""}}},__webpack_exports__.a=Spinner,"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Spinner/Spinner.js"]={name:"Spinner",docgenInfo:Spinner.__docgenInfo,path:"src/components/Spinner/Spinner.js"})},1259:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),function(module){var _storybook_react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__(454);module._StorybookPreserveDecorators=!0,Object(_storybook_react__WEBPACK_IMPORTED_MODULE_0__.configure)([__webpack_require__(1286)],module)}.call(this,__webpack_require__(1260)(module))},128:function(module,__webpack_exports__,__webpack_require__){"use strict";var objectWithoutProperties=__webpack_require__(6),classnames=__webpack_require__(7),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",props:{children:{type:{name:"node"},required:!1,description:""},className:{type:{name:"string"},required:!1,description:""},forId:{type:{name:"string"},required:!1,description:""},required:{type:{name:"bool"},required:!1,description:""}}};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",props:{labelFirst:{defaultValue:{value:"true",computed:!1},type:{name:"bool"},required:!1,description:""},caution:{type:{name:"string"},required:!1,description:""},children:{type:{name:"node"},required:!1,description:""},className:{type:{name:"string"},required:!1,description:""},error:{type:{name:"string"},required:!1,description:""},forId:{type:{name:"string"},required:!1,description:""},help:{type:{name:"string"},required:!1,description:""},isSelect:{type:{name:"bool"},required:!1,description:""},label:{type:{name:"node"},required:!1,description:""},required:{type:{name:"bool"},required:!1,description:""},stacked:{type:{name:"bool"},required:!1,description:""},success:{type:{name:"string"},required:!1,description:""}}};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}))},1286:function(module,exports,__webpack_require__){var map={"./components/Accordion/Accordion.stories.mdx":1320,"./components/ActionButton/ActionButton.stories.mdx":1326,"./components/ArticlePagination/ArticlePagination.stories.mdx":1327,"./components/Button/Button.stories.mdx":1298,"./components/Card/Card.stories.mdx":1328,"./components/Chip/Chip.stories.mdx":1299,"./components/Code/Code.stories.mdx":1329,"./components/Col/Col.stories.mdx":1301,"./components/ContextualMenu/ContextualMenu.stories.mdx":1302,"./components/Form/Form.stories.mdx":1321,"./components/Input/Input.stories.mdx":1303,"./components/Link/Link.stories.mdx":1323,"./components/List/List.stories.mdx":1330,"./components/Loader/Loader.stories.mdx":1322,"./components/MainTable/MainTable.stories.mdx":1317,"./components/Modal/Modal.stories.mdx":1331,"./components/Notification/Notification.stories.mdx":1332,"./components/Pagination/Pagination.stories.mdx":1306,"./components/Row/Row.stories.mdx":1307,"./components/SearchAndFilter/SearchAndFilter.stories.mdx":1318,"./components/SearchBox/SearchBox.stories.mdx":1310,"./components/Select/Select.stories.mdx":1311,"./components/Spinner/Spinner.stories.mdx":1312,"./components/Strip/Strip.stories.mdx":1313,"./components/Tabs/Tabs.stories.mdx":1333,"./components/Textarea/Textarea.stories.mdx":1334,"./components/Tooltip/Tooltip.stories.mdx":1324,"./docs/getting-started.stories.mdx":1315};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=1286},1297:function(module,exports,__webpack_require__){},1298:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"base",(function(){return base})),__webpack_require__.d(__webpack_exports__,"baseDisabled",(function(){return baseDisabled})),__webpack_require__.d(__webpack_exports__,"link",(function(){return link})),__webpack_require__.d(__webpack_exports__,"linkDisabled",(function(){return linkDisabled})),__webpack_require__.d(__webpack_exports__,"neutral",(function(){return neutral})),__webpack_require__.d(__webpack_exports__,"neutralDisabled",(function(){return neutralDisabled})),__webpack_require__.d(__webpack_exports__,"positive",(function(){return positive})),__webpack_require__.d(__webpack_exports__,"positiveDisabled",(function(){return positiveDisabled})),__webpack_require__.d(__webpack_exports__,"negative",(function(){return negative})),__webpack_require__.d(__webpack_exports__,"negativeDisabled",(function(){return negativeDisabled})),__webpack_require__.d(__webpack_exports__,"brand",(function(){return brand})),__webpack_require__.d(__webpack_exports__,"brandDisabled",(function(){return brandDisabled})),__webpack_require__.d(__webpack_exports__,"inline",(function(){return inline})),__webpack_require__.d(__webpack_exports__,"dense",(function(){return dense})),__webpack_require__.d(__webpack_exports__,"icon",(function(){return icon})),__webpack_require__.d(__webpack_exports__,"iconText",(function(){return iconText}));var react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__(1),react__WEBPACK_IMPORTED_MODULE_0___default=__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__),_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__(0),_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__(2),_storybook_addon_knobs__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__(3),_Button__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__(13);function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);enumerableOnly&&(symbols=symbols.filter((function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable}))),keys.push.apply(keys,symbols)}return keys}function _defineProperty(obj,key,value){return key in obj?Object.defineProperty(obj,key,{value:value,enumerable:!0,configurable:!0,writable:!0}):obj[key]=value,obj}function _extends(){return(_extends=Object.assign||function(target){for(var i=1;i=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}var layoutProps={};function MDXContent(_ref){var components=_ref.components,props=_objectWithoutProperties(_ref,["components"]);return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_2__.Meta,{title:"Button",component:_Button__WEBPACK_IMPORTED_MODULE_4__.a,decorators:[_storybook_addon_knobs__WEBPACK_IMPORTED_MODULE_3__.withKnobs],mdxType:"Meta"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("h3",{id:"button"},"Button"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("p",null,"This is a ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("a",_extends({parentName:"p"},{href:"https://reactjs.org/",target:"_blank",rel:["nofollow","noopener","noreferrer"]}),"React")," component for the Vanilla ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("a",_extends({parentName:"p"},{href:"https://docs.vanillaframework.io/patterns/buttons/",target:"_blank",rel:["nofollow","noopener","noreferrer"]}),"Button"),"."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("p",null,"Buttons are clickable elements used to perform an action, they can be used for buttons and link elements."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("h3",{id:"props"},"Props"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_2__.Props,{of:_Button__WEBPACK_IMPORTED_MODULE_4__.a,mdxType:"Props"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("h3",{id:"base"},"Base"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_2__.Preview,{mdxType:"Preview"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_2__.Story,{name:"Base",mdxType:"Story"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Button__WEBPACK_IMPORTED_MODULE_4__.a,{appearance:"base",mdxType:"Button"},"Base button"))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_2__.Preview,{mdxType:"Preview"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_2__.Story,{name:"Base disabled",mdxType:"Story"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Button__WEBPACK_IMPORTED_MODULE_4__.a,{appearance:"base",disabled:!0,mdxType:"Button"},"Base button disabled"))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("h3",{id:"link"},"Link"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_2__.Preview,{mdxType:"Preview"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_2__.Story,{name:"Link",mdxType:"Story"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Button__WEBPACK_IMPORTED_MODULE_4__.a,{element:"a",href:"#test",appearance:"base",mdxType:"Button"},"Link button"))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_2__.Preview,{mdxType:"Preview"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_2__.Story,{name:"Link disabled",mdxType:"Story"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Button__WEBPACK_IMPORTED_MODULE_4__.a,{element:"a",href:"#test",appearance:"base",disabled:!0,mdxType:"Button"},"Link button disabled"))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("h3",{id:"neutral"},"Neutral"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_2__.Preview,{mdxType:"Preview"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_2__.Story,{name:"Neutral",mdxType:"Story"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Button__WEBPACK_IMPORTED_MODULE_4__.a,{appearance:"neutral",mdxType:"Button"},"Neutral button"))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_2__.Preview,{mdxType:"Preview"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_2__.Story,{name:"Neutral disabled",mdxType:"Story"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Button__WEBPACK_IMPORTED_MODULE_4__.a,{appearance:"neutral",disabled:!0,mdxType:"Button"},"Neutral button disabled"))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("h3",{id:"positive"},"Positive"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_2__.Preview,{mdxType:"Preview"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_2__.Story,{name:"Positive",mdxType:"Story"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Button__WEBPACK_IMPORTED_MODULE_4__.a,{appearance:"positive",mdxType:"Button"},"Positive button"))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_2__.Preview,{mdxType:"Preview"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_2__.Story,{name:"Positive disabled",mdxType:"Story"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Button__WEBPACK_IMPORTED_MODULE_4__.a,{appearance:"positive",disabled:!0,mdxType:"Button"},"Positive button disabled"))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("h3",{id:"negative"},"Negative"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_2__.Preview,{mdxType:"Preview"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_2__.Story,{name:"Negative",mdxType:"Story"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Button__WEBPACK_IMPORTED_MODULE_4__.a,{appearance:"negative",mdxType:"Button"},"Negative button"))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_2__.Preview,{mdxType:"Preview"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_2__.Story,{name:"Negative disabled",mdxType:"Story"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Button__WEBPACK_IMPORTED_MODULE_4__.a,{appearance:"negative",disabled:!0,mdxType:"Button"},"Negative button disabled"))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("h3",{id:"brand"},"Brand"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_2__.Preview,{mdxType:"Preview"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_2__.Story,{name:"Brand",mdxType:"Story"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Button__WEBPACK_IMPORTED_MODULE_4__.a,{appearance:"brand",mdxType:"Button"},"Brand button"))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_2__.Preview,{mdxType:"Preview"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_2__.Story,{name:"Brand disabled",mdxType:"Story"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Button__WEBPACK_IMPORTED_MODULE_4__.a,{appearance:"brand",disabled:!0,mdxType:"Button"},"Brand button disabled"))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("h3",{id:"inline"},"Inline"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_2__.Preview,{mdxType:"Preview"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_2__.Story,{name:"Inline",mdxType:"Story"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(react__WEBPACK_IMPORTED_MODULE_0___default.a.Fragment,null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("span",null,"Everything you need to get started with Vanilla. "),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Button__WEBPACK_IMPORTED_MODULE_4__.a,{appearance:"neutral",inline:!0,mdxType:"Button"},"Inline button")))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("h3",{id:"dense"},"Dense"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_2__.Preview,{mdxType:"Preview"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_2__.Story,{name:"Dense",mdxType:"Story"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(react__WEBPACK_IMPORTED_MODULE_0___default.a.Fragment,null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("span",null,"Everything you need to get started with Vanilla. "),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Button__WEBPACK_IMPORTED_MODULE_4__.a,{dense:!0,mdxType:"Button"},"Dense button")))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("h3",{id:"icon"},"Icon"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_2__.Preview,{mdxType:"Preview"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_2__.Story,{name:"Icon",mdxType:"Story"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Button__WEBPACK_IMPORTED_MODULE_4__.a,{hasIcon:!0,mdxType:"Button"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("i",{className:"p-icon--plus"})))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_2__.Preview,{mdxType:"Preview"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_2__.Story,{name:"Icon & text",mdxType:"Story"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Button__WEBPACK_IMPORTED_MODULE_4__.a,{hasIcon:!0,mdxType:"Button"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("i",{className:"p-icon--plus"})," ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("span",null,"Button with icon & text")))))}MDXContent.isMDXComponent=!0;var base=function base(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Button__WEBPACK_IMPORTED_MODULE_4__.a,{appearance:"base"},"Base button")};base.story={},base.story.name="Base",base.story.parameters={mdxSource:''};var baseDisabled=function baseDisabled(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Button__WEBPACK_IMPORTED_MODULE_4__.a,{appearance:"base",disabled:!0},"Base button disabled")};baseDisabled.story={},baseDisabled.story.name="Base disabled",baseDisabled.story.parameters={mdxSource:''};var link=function link(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Button__WEBPACK_IMPORTED_MODULE_4__.a,{element:"a",href:"#test",appearance:"base"},"Link button")};link.story={},link.story.name="Link",link.story.parameters={mdxSource:''};var linkDisabled=function linkDisabled(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Button__WEBPACK_IMPORTED_MODULE_4__.a,{element:"a",href:"#test",appearance:"base",disabled:!0},"Link button disabled")};linkDisabled.story={},linkDisabled.story.name="Link disabled",linkDisabled.story.parameters={mdxSource:''};var neutral=function neutral(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Button__WEBPACK_IMPORTED_MODULE_4__.a,{appearance:"neutral"},"Neutral button")};neutral.story={},neutral.story.name="Neutral",neutral.story.parameters={mdxSource:''};var neutralDisabled=function neutralDisabled(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Button__WEBPACK_IMPORTED_MODULE_4__.a,{appearance:"neutral",disabled:!0},"Neutral button disabled")};neutralDisabled.story={},neutralDisabled.story.name="Neutral disabled",neutralDisabled.story.parameters={mdxSource:''};var positive=function positive(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Button__WEBPACK_IMPORTED_MODULE_4__.a,{appearance:"positive"},"Positive button")};positive.story={},positive.story.name="Positive",positive.story.parameters={mdxSource:''};var positiveDisabled=function positiveDisabled(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Button__WEBPACK_IMPORTED_MODULE_4__.a,{appearance:"positive",disabled:!0},"Positive button disabled")};positiveDisabled.story={},positiveDisabled.story.name="Positive disabled",positiveDisabled.story.parameters={mdxSource:''};var negative=function negative(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Button__WEBPACK_IMPORTED_MODULE_4__.a,{appearance:"negative"},"Negative button")};negative.story={},negative.story.name="Negative",negative.story.parameters={mdxSource:''};var negativeDisabled=function negativeDisabled(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Button__WEBPACK_IMPORTED_MODULE_4__.a,{appearance:"negative",disabled:!0},"Negative button disabled")};negativeDisabled.story={},negativeDisabled.story.name="Negative disabled",negativeDisabled.story.parameters={mdxSource:''};var brand=function brand(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Button__WEBPACK_IMPORTED_MODULE_4__.a,{appearance:"brand"},"Brand button")};brand.story={},brand.story.name="Brand",brand.story.parameters={mdxSource:''};var brandDisabled=function brandDisabled(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Button__WEBPACK_IMPORTED_MODULE_4__.a,{appearance:"brand",disabled:!0},"Brand button disabled")};brandDisabled.story={},brandDisabled.story.name="Brand disabled",brandDisabled.story.parameters={mdxSource:''};var inline=function inline(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(react__WEBPACK_IMPORTED_MODULE_0___default.a.Fragment,null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("span",null,"Everything you need to get started with Vanilla. "),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Button__WEBPACK_IMPORTED_MODULE_4__.a,{appearance:"neutral",inline:!0},"Inline button"))};inline.story={},inline.story.name="Inline",inline.story.parameters={mdxSource:'<>\n      Everything you need to get started with Vanilla. \n      \n    '};var dense=function dense(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(react__WEBPACK_IMPORTED_MODULE_0___default.a.Fragment,null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("span",null,"Everything you need to get started with Vanilla. "),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Button__WEBPACK_IMPORTED_MODULE_4__.a,{dense:!0},"Dense button"))};dense.story={},dense.story.name="Dense",dense.story.parameters={mdxSource:"<>\n      Everything you need to get started with Vanilla. \n      \n    "};var icon=function icon(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Button__WEBPACK_IMPORTED_MODULE_4__.a,{hasIcon:!0},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("i",{className:"p-icon--plus"}))};icon.story={},icon.story.name="Icon",icon.story.parameters={mdxSource:''};var iconText=function iconText(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Button__WEBPACK_IMPORTED_MODULE_4__.a,{hasIcon:!0},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("i",{className:"p-icon--plus"})," ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("span",null,"Button with icon & text"))};iconText.story={},iconText.story.name="Icon & text",iconText.story.parameters={mdxSource:''};var componentMeta={title:"Button",decorators:[_storybook_addon_knobs__WEBPACK_IMPORTED_MODULE_3__.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=function _objectSpread(target){for(var i=1;i=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}var layoutProps={};function MDXContent(_ref){var components=_ref.components,props=_objectWithoutProperties(_ref,["components"]);return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_2__.Meta,{title:"Chip",component:_Chip__WEBPACK_IMPORTED_MODULE_4__.a,decorators:[_storybook_addon_knobs__WEBPACK_IMPORTED_MODULE_3__.withKnobs],mdxType:"Meta"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("h3",{id:"chip"},"Chip"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("p",null,"This is a not an existing Vanilla component. It can be used to display a small value attached to a component."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("h3",{id:"props"},"Props"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_2__.Props,{of:_Chip__WEBPACK_IMPORTED_MODULE_4__.a,mdxType:"Props"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("h3",{id:"default"},"Default"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_2__.Preview,{mdxType:"Preview"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_2__.Story,{name:"Default",mdxType:"Story"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Chip__WEBPACK_IMPORTED_MODULE_4__.a,{value:"positive",mdxType:"Chip"}))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("h3",{id:"key-value"},"Key-value"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_2__.Preview,{mdxType:"Preview"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_2__.Story,{name:"Lead-value",mdxType:"Story"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Chip__WEBPACK_IMPORTED_MODULE_4__.a,{lead:"Owner",value:"Bob",mdxType:"Chip"}))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("h3",{id:"dismissible"},"Dismissible"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_2__.Preview,{mdxType:"Preview"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_2__.Story,{name:"Dismissible",mdxType:"Story"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Chip__WEBPACK_IMPORTED_MODULE_4__.a,{lead:"Owner",value:"Bob",onDismiss:function onDismiss(){console.log("onDismiss called")},mdxType:"Chip"}))))}MDXContent.isMDXComponent=!0;var defaultStory=function defaultStory(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Chip__WEBPACK_IMPORTED_MODULE_4__.a,{value:"positive"})};defaultStory.story={},defaultStory.story.name="Default",defaultStory.story.parameters={mdxSource:''};var leadValue=function leadValue(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Chip__WEBPACK_IMPORTED_MODULE_4__.a,{lead:"Owner",value:"Bob"})};leadValue.story={},leadValue.story.name="Lead-value",leadValue.story.parameters={mdxSource:''};var dismissible=function dismissible(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Chip__WEBPACK_IMPORTED_MODULE_4__.a,{lead:"Owner",value:"Bob",onDismiss:function onDismiss(){console.log("onDismiss called")}})};dismissible.story={},dismissible.story.name="Dismissible",dismissible.story.parameters={mdxSource:' {\n  console.log("onDismiss called");\n}} />'};var componentMeta={title:"Chip",decorators:[_storybook_addon_knobs__WEBPACK_IMPORTED_MODULE_3__.withKnobs],includeStories:["defaultStory","leadValue","dismissible"]},mdxStoryNameToKey={Default:"defaultStory","Lead-value":"leadValue",Dismissible:"dismissible"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=function _objectSpread(target){for(var i=1;i=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}var layoutProps={};function MDXContent(_ref){var components=_ref.components,props=_objectWithoutProperties(_ref,["components"]);return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_2__.Meta,{title:"Col",component:_Col__WEBPACK_IMPORTED_MODULE_4__.a,decorators:[_storybook_addon_knobs__WEBPACK_IMPORTED_MODULE_3__.withKnobs],mdxType:"Meta"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("h3",{id:"col"},"Col"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("p",null,"This is a ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("a",_extends({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_1__.mdx)("a",_extends({parentName:"p"},{href:"https://docs.vanillaframework.io/patterns/grid/",target:"_blank",rel:["nofollow","noopener","noreferrer"]}),"Grid"),"."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("p",null,"Vanilla has a responsive grid using a combination of rows and columns."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("h3",{id:"props"},"Props"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_2__.Props,{of:_Col__WEBPACK_IMPORTED_MODULE_4__.a,mdxType:"Props"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("h3",{id:"grid"},"Grid"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_2__.Preview,{mdxType:"Preview"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_2__.Story,{name:"Grid",mdxType:"Story"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("div",{className:"grid-demo"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Row__WEBPACK_IMPORTED_MODULE_5__.a,{mdxType:"Row"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_4__.a,{size:"12",mdxType:"Col"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("span",null,".col-12"))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Row__WEBPACK_IMPORTED_MODULE_5__.a,{mdxType:"Row"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_4__.a,{size:"11",mdxType:"Col"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("span",null,".col-11")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_4__.a,{size:"1",mdxType:"Col"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("span",null,".col-1"))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Row__WEBPACK_IMPORTED_MODULE_5__.a,{mdxType:"Row"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_4__.a,{size:"10",mdxType:"Col"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("span",null,".col-10")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_4__.a,{size:"2",mdxType:"Col"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("span",null,".col-2"))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Row__WEBPACK_IMPORTED_MODULE_5__.a,{mdxType:"Row"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_4__.a,{size:"9",mdxType:"Col"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("span",null,".col-9")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_4__.a,{size:"3",mdxType:"Col"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("span",null,".col-9"))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Row__WEBPACK_IMPORTED_MODULE_5__.a,{mdxType:"Row"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_4__.a,{size:"8",mdxType:"Col"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("span",null,".col-8")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_4__.a,{size:"4",mdxType:"Col"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("span",null,".col-4"))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Row__WEBPACK_IMPORTED_MODULE_5__.a,{mdxType:"Row"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_4__.a,{size:"7",mdxType:"Col"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("span",null,".col-7")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_4__.a,{size:"5",mdxType:"Col"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("span",null,".col-5"))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Row__WEBPACK_IMPORTED_MODULE_5__.a,{mdxType:"Row"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_4__.a,{size:"6",mdxType:"Col"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("span",null,".col-6")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_4__.a,{size:"6",mdxType:"Col"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("span",null,".col-6"))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Row__WEBPACK_IMPORTED_MODULE_5__.a,{mdxType:"Row"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_4__.a,{size:"5",mdxType:"Col"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("span",null,".col-5")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_4__.a,{size:"7",mdxType:"Col"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("span",null,".col-7"))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Row__WEBPACK_IMPORTED_MODULE_5__.a,{mdxType:"Row"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_4__.a,{size:"4",mdxType:"Col"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("span",null,".col-4")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_4__.a,{size:"8",mdxType:"Col"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("span",null,".col-8"))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Row__WEBPACK_IMPORTED_MODULE_5__.a,{mdxType:"Row"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_4__.a,{size:"3",mdxType:"Col"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("span",null,".col-3")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_4__.a,{size:"9",mdxType:"Col"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("span",null,".col-9"))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Row__WEBPACK_IMPORTED_MODULE_5__.a,{mdxType:"Row"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_4__.a,{size:"2",mdxType:"Col"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("span",null,".col-2")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_4__.a,{size:"10",mdxType:"Col"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("span",null,".col-10"))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Row__WEBPACK_IMPORTED_MODULE_5__.a,{mdxType:"Row"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_4__.a,{size:"1",mdxType:"Col"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("span",null,".col-1")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_4__.a,{size:"11",mdxType:"Col"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("span",null,".col-11")))))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("h3",{id:"nested-columns"},"Nested columns"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_2__.Preview,{mdxType:"Preview"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_2__.Story,{name:"Nested columns",mdxType:"Story"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("div",{className:"grid-demo"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Row__WEBPACK_IMPORTED_MODULE_5__.a,{mdxType:"Row"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_4__.a,{small:"4",medium:"6",size:"12",mdxType:"Col"},"col-small-4 .col-medium-6 .col-12",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Row__WEBPACK_IMPORTED_MODULE_5__.a,{mdxType:"Row"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_4__.a,{small:"3",medium:"3",size:"9",mdxType:"Col"},"col-small-3 .col-medium-3 .col-9",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Row__WEBPACK_IMPORTED_MODULE_5__.a,{mdxType:"Row"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_4__.a,{small:"1",medium:"1",size:"2",mdxType:"Col"},"col-small-1 col-medium-1 col-2"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_4__.a,{small:"1",medium:"1",size:"3",mdxType:"Col"},"col-small-1 col-medium-1 col-2"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_4__.a,{small:"1",medium:"1",size:"3",mdxType:"Col"},"col-small-1 col-medium-1 col-2"))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_4__.a,{small:"1",medium:"3",size:"3",mdxType:"Col"},"col-small-2 col-medium-3 col-3"))))))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("h3",{id:"empty-columns"},"Empty columns"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_2__.Preview,{mdxType:"Preview"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_2__.Story,{name:"Empty columns",mdxType:"Story"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("div",{className:"grid-demo"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Row__WEBPACK_IMPORTED_MODULE_5__.a,{mdxType:"Row"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_4__.a,{size:"8",mdxType:"Col"},".col-8"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_4__.a,{size:"4",mdxType:"Col"},".col-4")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Row__WEBPACK_IMPORTED_MODULE_5__.a,{mdxType:"Row"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_4__.a,{size:"7",mdxType:"Col"},".col-7"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_4__.a,{size:"4",mdxType:"Col"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Row__WEBPACK_IMPORTED_MODULE_5__.a,{mdxType:"Row"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_4__.a,{size:"3",emptyLarge:"2",mdxType:"Col"},"col-3 col-start-large-2 inside col-4")))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Row__WEBPACK_IMPORTED_MODULE_5__.a,{mdxType:"Row"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_4__.a,{size:"7",mdxType:"Col"},".col-7"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_4__.a,{size:"4",mdxType:"Col"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Row__WEBPACK_IMPORTED_MODULE_5__.a,{mdxType:"Row"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_4__.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_1__.mdx)("div",{className:"grid-demo"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Row__WEBPACK_IMPORTED_MODULE_5__.a,null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_4__.a,{size:"12"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("span",null,".col-12"))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Row__WEBPACK_IMPORTED_MODULE_5__.a,null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_4__.a,{size:"11"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("span",null,".col-11")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_4__.a,{size:"1"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("span",null,".col-1"))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Row__WEBPACK_IMPORTED_MODULE_5__.a,null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_4__.a,{size:"10"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("span",null,".col-10")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_4__.a,{size:"2"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("span",null,".col-2"))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Row__WEBPACK_IMPORTED_MODULE_5__.a,null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_4__.a,{size:"9"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("span",null,".col-9")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_4__.a,{size:"3"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("span",null,".col-9"))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Row__WEBPACK_IMPORTED_MODULE_5__.a,null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_4__.a,{size:"8"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("span",null,".col-8")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_4__.a,{size:"4"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("span",null,".col-4"))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Row__WEBPACK_IMPORTED_MODULE_5__.a,null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_4__.a,{size:"7"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("span",null,".col-7")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_4__.a,{size:"5"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("span",null,".col-5"))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Row__WEBPACK_IMPORTED_MODULE_5__.a,null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_4__.a,{size:"6"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("span",null,".col-6")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_4__.a,{size:"6"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("span",null,".col-6"))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Row__WEBPACK_IMPORTED_MODULE_5__.a,null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_4__.a,{size:"5"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("span",null,".col-5")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_4__.a,{size:"7"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("span",null,".col-7"))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Row__WEBPACK_IMPORTED_MODULE_5__.a,null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_4__.a,{size:"4"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("span",null,".col-4")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_4__.a,{size:"8"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("span",null,".col-8"))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Row__WEBPACK_IMPORTED_MODULE_5__.a,null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_4__.a,{size:"3"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("span",null,".col-3")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_4__.a,{size:"9"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("span",null,".col-9"))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Row__WEBPACK_IMPORTED_MODULE_5__.a,null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_4__.a,{size:"2"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("span",null,".col-2")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_4__.a,{size:"10"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("span",null,".col-10"))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Row__WEBPACK_IMPORTED_MODULE_5__.a,null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_4__.a,{size:"1"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("span",null,".col-1")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_4__.a,{size:"11"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.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_1__.mdx)("div",{className:"grid-demo"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Row__WEBPACK_IMPORTED_MODULE_5__.a,null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_4__.a,{small:"4",medium:"6",size:"12"},"col-small-4 .col-medium-6 .col-12",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Row__WEBPACK_IMPORTED_MODULE_5__.a,null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_4__.a,{small:"3",medium:"3",size:"9"},"col-small-3 .col-medium-3 .col-9",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Row__WEBPACK_IMPORTED_MODULE_5__.a,null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_4__.a,{small:"1",medium:"1",size:"2"},"col-small-1 col-medium-1 col-2"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_4__.a,{small:"1",medium:"1",size:"3"},"col-small-1 col-medium-1 col-2"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_4__.a,{small:"1",medium:"1",size:"3"},"col-small-1 col-medium-1 col-2"))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_4__.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_1__.mdx)("div",{className:"grid-demo"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Row__WEBPACK_IMPORTED_MODULE_5__.a,null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_4__.a,{size:"8"},".col-8"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_4__.a,{size:"4"},".col-4")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Row__WEBPACK_IMPORTED_MODULE_5__.a,null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_4__.a,{size:"7"},".col-7"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_4__.a,{size:"4"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Row__WEBPACK_IMPORTED_MODULE_5__.a,null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_4__.a,{size:"3",emptyLarge:"2"},"col-3 col-start-large-2 inside col-4")))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Row__WEBPACK_IMPORTED_MODULE_5__.a,null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_4__.a,{size:"7"},".col-7"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_4__.a,{size:"4"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Row__WEBPACK_IMPORTED_MODULE_5__.a,null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_4__.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_3__.withKnobs],includeStories:["grid","nestedColumns","emptyColumns"]},mdxStoryNameToKey={Grid:"grid","Nested columns":"nestedColumns","Empty columns":"emptyColumns"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=function _objectSpread(target){for(var i=1;i=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}var layoutProps={};function MDXContent(_ref){var components=_ref.components,props=_objectWithoutProperties(_ref,["components"]);return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_2__.Meta,{title:"ContextualMenu",component:_ContextualMenu__WEBPACK_IMPORTED_MODULE_4__.a,decorators:[_storybook_addon_knobs__WEBPACK_IMPORTED_MODULE_3__.withKnobs],mdxType:"Meta"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("h3",{id:"contextual-menu"},"Contextual Menu"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("p",null,"This is a ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("a",_extends({parentName:"p"},{href:"https://reactjs.org/",target:"_blank",rel:["nofollow","noopener","noreferrer"]}),"React")," component for the Vanilla ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("a",_extends({parentName:"p"},{href:"https://docs.vanillaframework.io/patterns//contextual-menu/",target:"_blank",rel:["nofollow","noopener","noreferrer"]}),"Contextual menu"),"."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("p",null,"A contextual menu can be used in conjunction with any page element to provide a contextual menu."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("h3",{id:"props"},"Props"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_2__.Props,{of:_ContextualMenu__WEBPACK_IMPORTED_MODULE_4__.a,mdxType:"Props"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("h3",{id:"default"},"Default"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("p",null,"The contextual menu will provide a visual wrapper to any provided children. Visbility can be toggled via the ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("inlineCode",{parentName:"p"},"visible")," prop."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_2__.Preview,{mdxType:"Preview"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_2__.Story,{name:"Default",mdxType:"Story"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_ContextualMenu__WEBPACK_IMPORTED_MODULE_4__.a,{visible:!0,mdxType:"ContextualMenu"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("a",{href:"#"},"Link 1"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("a",{href:"#"},"Link 2"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("a",{href:"#"},"Link 3")))))}MDXContent.isMDXComponent=!0;var defaultStory=function defaultStory(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_ContextualMenu__WEBPACK_IMPORTED_MODULE_4__.a,{visible:!0},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("a",{href:"#"},"Link 1"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("a",{href:"#"},"Link 2"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("a",{href:"#"},"Link 3"))};defaultStory.story={},defaultStory.story.name="Default",defaultStory.story.parameters={mdxSource:'\n      Link 1\n      Link 2\n      Link 3\n    '};var componentMeta={title:"ContextualMenu",decorators:[_storybook_addon_knobs__WEBPACK_IMPORTED_MODULE_3__.withKnobs],includeStories:["defaultStory"]},mdxStoryNameToKey={Default:"defaultStory"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=function _objectSpread(target){for(var i=1;i=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}var layoutProps={};function MDXContent(_ref){var components=_ref.components,props=_objectWithoutProperties(_ref,["components"]);return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_2__.Meta,{title:"Input",component:_Input__WEBPACK_IMPORTED_MODULE_4__.a,decorators:[_storybook_addon_knobs__WEBPACK_IMPORTED_MODULE_3__.withKnobs],mdxType:"Meta"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("h3",{id:"input"},"Input"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("p",null,"This is a ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("a",_extends({parentName:"p"},{href:"https://reactjs.org/",target:"_blank",rel:["nofollow","noopener","noreferrer"]}),"React")," component for the Vanilla ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("a",_extends({parentName:"p"},{href:"https://docs.vanillaframework.io/base/forms/#input",target:"_blank",rel:["nofollow","noopener","noreferrer"]}),"Input"),"."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.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_1__.mdx)("h3",{id:"props"},"Props"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_2__.Props,{of:_Input__WEBPACK_IMPORTED_MODULE_4__.a,mdxType:"Props"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("h3",{id:"text-input"},"Text input"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_2__.Preview,{mdxType:"Preview"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_2__.Story,{name:"Text input",mdxType:"Story"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Input__WEBPACK_IMPORTED_MODULE_4__.a,{type:"text",id:"exampleTextInput2",placeholder:"example@canonical.com",label:"Email address",mdxType:"Input"}))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("h3",{id:"stacked"},"Stacked"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_2__.Preview,{mdxType:"Preview"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_2__.Story,{name:"Stacked",mdxType:"Story"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Input__WEBPACK_IMPORTED_MODULE_4__.a,{type:"text",id:"exampleTextInput3",placeholder:"example@canonical.com",stacked:!0,label:"Email address",mdxType:"Input"}))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("h3",{id:"disabled"},"Disabled"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_2__.Preview,{mdxType:"Preview"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_2__.Story,{name:"Disabled",mdxType:"Story"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Input__WEBPACK_IMPORTED_MODULE_4__.a,{type:"text",id:"exampleTextInput4",placeholder:"example@canonical.com",disabled:!0,label:"Email address",mdxType:"Input"}))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("h3",{id:"error"},"Error"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_2__.Preview,{mdxType:"Preview"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_2__.Story,{name:"Error",mdxType:"Story"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Input__WEBPACK_IMPORTED_MODULE_4__.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_1__.mdx)("h3",{id:"success"},"Success"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_2__.Preview,{mdxType:"Preview"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_2__.Story,{name:"Success",mdxType:"Story"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Input__WEBPACK_IMPORTED_MODULE_4__.a,{type:"text",id:"exampleTextInput6",placeholder:"example@canonical.com",success:"Verified.",label:"Email address",mdxType:"Input"}))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("h3",{id:"caution"},"Caution"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_2__.Preview,{mdxType:"Preview"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_2__.Story,{name:"Caution",mdxType:"Story"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Input__WEBPACK_IMPORTED_MODULE_4__.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_1__.mdx)("h3",{id:"required"},"Required"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_2__.Preview,{mdxType:"Preview"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_2__.Story,{name:"Required",mdxType:"Story"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Input__WEBPACK_IMPORTED_MODULE_4__.a,{type:"text",id:"exampleTextInput8",placeholder:"example@canonical.com",required:!0,label:"Email address",mdxType:"Input"}))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("h3",{id:"checkbox"},"Checkbox"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_2__.Preview,{mdxType:"Preview"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_2__.Story,{name:"Checkbox",mdxType:"Story"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Input__WEBPACK_IMPORTED_MODULE_4__.a,{type:"checkbox",id:"checkExample12",defaultChecked:!0,label:"HTML",mdxType:"Input"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Input__WEBPACK_IMPORTED_MODULE_4__.a,{type:"checkbox",id:"checkExample22",label:"CSS",mdxType:"Input"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Input__WEBPACK_IMPORTED_MODULE_4__.a,{type:"checkbox",id:"checkExample32",disabled:"disabled",label:"PHP",mdxType:"Input"}))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("h3",{id:"radio-button"},"Radio button"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_2__.Preview,{mdxType:"Preview"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_2__.Story,{name:"Radio button",mdxType:"Story"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Input__WEBPACK_IMPORTED_MODULE_4__.a,{label:"Linux",type:"radio",name:"RadioOptions",id:"Radio12",defaultValue:"option1",defaultChecked:!0,mdxType:"Input"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Input__WEBPACK_IMPORTED_MODULE_4__.a,{label:"Mac OS",type:"radio",name:"RadioOptions",id:"Radio22",defaultValue:"option2",mdxType:"Input"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Input__WEBPACK_IMPORTED_MODULE_4__.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_1__.mdx)(_Input__WEBPACK_IMPORTED_MODULE_4__.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_1__.mdx)(_Input__WEBPACK_IMPORTED_MODULE_4__.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_1__.mdx)(_Input__WEBPACK_IMPORTED_MODULE_4__.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_1__.mdx)(_Input__WEBPACK_IMPORTED_MODULE_4__.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_1__.mdx)(_Input__WEBPACK_IMPORTED_MODULE_4__.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_1__.mdx)(_Input__WEBPACK_IMPORTED_MODULE_4__.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_1__.mdx)(_Input__WEBPACK_IMPORTED_MODULE_4__.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_1__.mdx)(_Input__WEBPACK_IMPORTED_MODULE_4__.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_1__.mdx)(_Input__WEBPACK_IMPORTED_MODULE_4__.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_3__.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=function _objectSpread(target){for(var i=1;i=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}var layoutProps={};function MDXContent(_ref){var components=_ref.components,props=_objectWithoutProperties(_ref,["components"]);return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_2__.Meta,{title:"Pagination",component:_Pagination__WEBPACK_IMPORTED_MODULE_4__.a,decorators:[_storybook_addon_knobs__WEBPACK_IMPORTED_MODULE_3__.withKnobs],mdxType:"Meta"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("h3",{id:"pagination"},"Pagination"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("p",null,"This is a ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("a",_extends({parentName:"p"},{href:"https://reactjs.org/",target:"_blank",rel:["nofollow","noopener","noreferrer"]}),"React")," component for the Vanilla ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("a",_extends({parentName:"p"},{href:"https://docs.vanillaframework.io/patterns/pagination/",target:"_blank",rel:["nofollow","noopener","noreferrer"]}),"Pagination"),"."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.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_1__.mdx)("h3",{id:"props"},"Props"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_2__.Props,{of:_Pagination__WEBPACK_IMPORTED_MODULE_4__.a,mdxType:"Props"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("h3",{id:"default"},"Default"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_2__.Preview,{mdxType:"Preview"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_2__.Story,{name:"Default",mdxType:"Story"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Pagination__WEBPACK_IMPORTED_MODULE_4__.a,{itemsPerPage:20,totalItems:100,paginate:function paginate(){},currentPage:3,mdxType:"Pagination"}))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("h3",{id:"truncated"},"Truncated"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_2__.Preview,{mdxType:"Preview"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_2__.Story,{name:"Truncated",mdxType:"Story"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Pagination__WEBPACK_IMPORTED_MODULE_4__.a,{itemsPerPage:10,totalItems:1e3,paginate:function paginate(){},currentPage:34,mdxType:"Pagination"}))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("h3",{id:"disabled-controls"},"Disabled controls"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_2__.Preview,{mdxType:"Preview"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_2__.Story,{name:"Disabled controls",mdxType:"Story"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Pagination__WEBPACK_IMPORTED_MODULE_4__.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_1__.mdx)(_Pagination__WEBPACK_IMPORTED_MODULE_4__.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_1__.mdx)(_Pagination__WEBPACK_IMPORTED_MODULE_4__.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_1__.mdx)(_Pagination__WEBPACK_IMPORTED_MODULE_4__.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_3__.withKnobs],includeStories:["defaultStory","truncated","disabledControls"]},mdxStoryNameToKey={Default:"defaultStory",Truncated:"truncated","Disabled controls":"disabledControls"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=function _objectSpread(target){for(var i=1;i=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}var layoutProps={};function MDXContent(_ref){var components=_ref.components,props=_objectWithoutProperties(_ref,["components"]);return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_2__.Meta,{title:"Row",component:_Row__WEBPACK_IMPORTED_MODULE_4__.a,decorators:[_storybook_addon_knobs__WEBPACK_IMPORTED_MODULE_3__.withKnobs],mdxType:"Meta"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("h3",{id:"row"},"Row"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("p",null,"This is a ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("a",_extends({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_1__.mdx)("a",_extends({parentName:"p"},{href:"https://docs.vanillaframework.io/patterns/grid/",target:"_blank",rel:["nofollow","noopener","noreferrer"]}),"Grid"),"."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("p",null,"Vanilla has a responsive grid using a combination of rows and columns."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("h3",{id:"props"},"Props"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_2__.Props,{of:_Row__WEBPACK_IMPORTED_MODULE_4__.a,mdxType:"Props"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("h3",{id:"row-1"},"Row"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_2__.Preview,{mdxType:"Preview"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_2__.Story,{name:"Default",mdxType:"Story"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Row__WEBPACK_IMPORTED_MODULE_4__.a,{mdxType:"Row"},"children..."))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("p",null,"See ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("a",_extends({parentName:"p"},{href:"/#/Col"}),"Col")," for grid details."))}MDXContent.isMDXComponent=!0;var defaultStory=function defaultStory(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Row__WEBPACK_IMPORTED_MODULE_4__.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_3__.withKnobs],includeStories:["defaultStory"]},mdxStoryNameToKey={Default:"defaultStory"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=function _objectSpread(target){for(var i=1;i=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}var layoutProps={};function MDXContent(_ref){var components=_ref.components,props=_objectWithoutProperties(_ref,["components"]);return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_2__.Meta,{title:"SearchBox",component:_SearchBox__WEBPACK_IMPORTED_MODULE_4__.a,decorators:[_storybook_addon_knobs__WEBPACK_IMPORTED_MODULE_3__.withKnobs],mdxType:"Meta"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("h3",{id:"searchbox"},"SearchBox"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("p",null,"This is a ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("a",_extends({parentName:"p"},{href:"https://reactjs.org/",target:"_blank",rel:["nofollow","noopener","noreferrer"]}),"React")," component for the Vanilla ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("a",_extends({parentName:"p"},{href:"https://docs.vanillaframework.io/patterns/search-box/",target:"_blank",rel:["nofollow","noopener","noreferrer"]}),"SearchBox"),"."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("p",null,"Search boxes enable search functionality on a page and are typically used in a navigation bar."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("h3",{id:"props"},"Props"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_2__.Props,{of:_SearchBox__WEBPACK_IMPORTED_MODULE_4__.a,mdxType:"Props"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("h3",{id:"default"},"Default"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_2__.Preview,{mdxType:"Preview"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_2__.Story,{name:"Default",mdxType:"Story"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_SearchBox__WEBPACK_IMPORTED_MODULE_4__.a,{mdxType:"SearchBox"}))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("h3",{id:"disabled"},"Disabled"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_2__.Preview,{mdxType:"Preview"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_2__.Story,{name:"Disabled",mdxType:"Story"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_SearchBox__WEBPACK_IMPORTED_MODULE_4__.a,{disabled:!0,mdxType:"SearchBox"}))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("h3",{id:"external-state"},"External state"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("p",null,"If you wish to control the value of the input via external state you can set\nthe ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("inlineCode",{parentName:"p"},"externallyControlled")," prop and provide an ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("inlineCode",{parentName:"p"},"onChange")," method to update the\nstate and the ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("inlineCode",{parentName:"p"},"value")," from state."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_2__.Preview,{mdxType:"Preview"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_2__.Story,{name:"External state",mdxType:"Story"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_SearchBox__WEBPACK_IMPORTED_MODULE_4__.a,{externallyControlled:!0,onChange:function onChange(){},value:"...",mdxType:"SearchBox"}))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("h3",{id:"navigation"},"Navigation"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_2__.Preview,{mdxType:"Preview"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_2__.Story,{name:"Navigation",mdxType:"Story"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("header",{id:"navigation",className:"p-navigation"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("div",{className:"p-navigation__banner"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("div",{className:"p-navigation__logo"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("a",{className:"p-navigation__link",href:"#"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("img",{className:"p-navigation__image",src:"https://assets.ubuntu.com/v1/5d6da5c4-logo-canonical-aubergine.svg",alt:"",width:"95"}))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("a",{href:"#navigation",className:"p-navigation__toggle--open",title:"menu"},"Menu"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("a",{href:"#navigation-closed",className:"p-navigation__toggle--close",title:"close menu"},"Close menu")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("nav",{className:"p-navigation__nav"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("span",{className:"u-off-screen"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("a",{href:"#main-content"},"Jump to main content")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("ul",{className:"p-navigation__links",role:"menu"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("li",{className:"p-navigation__link",role:"menuitem"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("a",{href:"#"},"Products")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("li",{className:"p-navigation__link",role:"menuitem"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("a",{href:"#"},"Services")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("li",{className:"p-navigation__link",role:"menuitem"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("a",{href:"#"},"Partners")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("li",{className:"p-navigation__link",role:"menuitem"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("a",{href:"#"},"About")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("li",{className:"p-navigation__link",role:"menuitem"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("a",{href:"#"},"Partners"))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_SearchBox__WEBPACK_IMPORTED_MODULE_4__.a,{mdxType:"SearchBox"}))))))}MDXContent.isMDXComponent=!0;var defaultStory=function defaultStory(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_SearchBox__WEBPACK_IMPORTED_MODULE_4__.a,null)};defaultStory.story={},defaultStory.story.name="Default",defaultStory.story.parameters={mdxSource:""};var disabled=function disabled(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_SearchBox__WEBPACK_IMPORTED_MODULE_4__.a,{disabled:!0})};disabled.story={},disabled.story.name="Disabled",disabled.story.parameters={mdxSource:""};var externalState=function externalState(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_SearchBox__WEBPACK_IMPORTED_MODULE_4__.a,{externallyControlled:!0,onChange:function onChange(){},value:"..."})};externalState.story={},externalState.story.name="External state",externalState.story.parameters={mdxSource:' {}} value="..." />'};var navigation=function navigation(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("header",{id:"navigation",className:"p-navigation"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("div",{className:"p-navigation__banner"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("div",{className:"p-navigation__logo"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("a",{className:"p-navigation__link",href:"#"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("img",{className:"p-navigation__image",src:"https://assets.ubuntu.com/v1/5d6da5c4-logo-canonical-aubergine.svg",alt:"",width:"95"}))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("a",{href:"#navigation",className:"p-navigation__toggle--open",title:"menu"},"Menu"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("a",{href:"#navigation-closed",className:"p-navigation__toggle--close",title:"close menu"},"Close menu")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("nav",{className:"p-navigation__nav"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("span",{className:"u-off-screen"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("a",{href:"#main-content"},"Jump to main content")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("ul",{className:"p-navigation__links",role:"menu"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("li",{className:"p-navigation__link",role:"menuitem"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("a",{href:"#"},"Products")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("li",{className:"p-navigation__link",role:"menuitem"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("a",{href:"#"},"Services")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("li",{className:"p-navigation__link",role:"menuitem"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("a",{href:"#"},"Partners")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("li",{className:"p-navigation__link",role:"menuitem"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("a",{href:"#"},"About")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("li",{className:"p-navigation__link",role:"menuitem"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("a",{href:"#"},"Partners"))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_SearchBox__WEBPACK_IMPORTED_MODULE_4__.a,null)))};navigation.story={},navigation.story.name="Navigation",navigation.story.parameters={mdxSource:''};var componentMeta={title:"SearchBox",decorators:[_storybook_addon_knobs__WEBPACK_IMPORTED_MODULE_3__.withKnobs],includeStories:["defaultStory","disabled","externalState","navigation"]},mdxStoryNameToKey={Default:"defaultStory",Disabled:"disabled","External state":"externalState",Navigation:"navigation"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=function _objectSpread(target){for(var i=1;iarr.length)&&(len=arr.length);for(var i=0,arr2=new Array(len);i=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}var layoutProps={};function MDXContent(_ref){var components=_ref.components,props=_objectWithoutProperties(_ref,["components"]);return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_2__.Meta,{title:"Select",component:_Select__WEBPACK_IMPORTED_MODULE_4__.a,decorators:[_storybook_addon_knobs__WEBPACK_IMPORTED_MODULE_3__.withKnobs],mdxType:"Meta"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("h3",{id:"select"},"Select"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("p",null,"This is a ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("a",_extends({parentName:"p"},{href:"https://reactjs.org/",target:"_blank",rel:["nofollow","noopener","noreferrer"]}),"React")," component for the Vanilla ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("a",_extends({parentName:"p"},{href:"https://docs.vanillaframework.io/base/forms/#select",target:"_blank",rel:["nofollow","noopener","noreferrer"]}),"Select"),"."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("p",null,"Use the Select component to create a drop-down list."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("h3",{id:"props"},"Props"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_2__.Props,{of:_Select__WEBPACK_IMPORTED_MODULE_4__.a,mdxType:"Props"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("h3",{id:"select-1"},"Select"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_2__.Preview,{mdxType:"Preview"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_2__.Story,{name:"Select",mdxType:"Story"},(function(){var _useState2=_slicedToArray(Object(react__WEBPACK_IMPORTED_MODULE_0__.useState)(),2),setSelectedValue=(_useState2[0],_useState2[1]);return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Select__WEBPACK_IMPORTED_MODULE_4__.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",onChange:function onChange(selected){return setSelectedValue(selected)},mdxType:"Select"})}))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("h3",{id:"select-multiple"},"Select multiple"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_2__.Preview,{mdxType:"Preview"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_2__.Story,{name:"Select multiple",mdxType:"Story"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Select__WEBPACK_IMPORTED_MODULE_4__.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(){var _useState4=_slicedToArray(Object(react__WEBPACK_IMPORTED_MODULE_0__.useState)(),2),setSelectedValue=(_useState4[0],_useState4[1]);return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Select__WEBPACK_IMPORTED_MODULE_4__.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",onChange:function onChange(selected){return setSelectedValue(selected)}})};select.story={},select.story.name="Select",select.story.parameters={mdxSource:'() => {\n  const [selectedValue, setSelectedValue] = useState();\n  return '};var componentMeta={title:"Select",decorators:[_storybook_addon_knobs__WEBPACK_IMPORTED_MODULE_3__.withKnobs],includeStories:["select","selectMultiple"]},mdxStoryNameToKey={Select:"select","Select multiple":"selectMultiple"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=function _objectSpread(target){for(var i=1;i=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}var layoutProps={};function MDXContent(_ref){var components=_ref.components,props=_objectWithoutProperties(_ref,["components"]);return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_2__.Meta,{title:"Spinner",component:_Spinner__WEBPACK_IMPORTED_MODULE_4__.a,decorators:[_storybook_addon_knobs__WEBPACK_IMPORTED_MODULE_3__.withKnobs],mdxType:"Meta"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("h3",{id:"spinner"},"Spinner"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("p",null,"This is a ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("a",_extends({parentName:"p"},{href:"https://reactjs.org/",target:"_blank",rel:["nofollow","noopener","noreferrer"]}),"React")," component for the Vanilla ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("a",_extends({parentName:"p"},{href:"https://docs.vanillaframework.io/settings/animation-settings/#spin",target:"_blank",rel:["nofollow","noopener","noreferrer"]}),"Spin")," animation."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("h3",{id:"props"},"Props"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_2__.Props,{of:_Spinner__WEBPACK_IMPORTED_MODULE_4__.a,mdxType:"Props"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("h3",{id:"default"},"Default"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_2__.Preview,{mdxType:"Preview"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_2__.Story,{name:"Default",mdxType:"Story"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Spinner__WEBPACK_IMPORTED_MODULE_4__.a,{text:"Loading...",mdxType:"Spinner"}))))}MDXContent.isMDXComponent=!0;var defaultStory=function defaultStory(){return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Spinner__WEBPACK_IMPORTED_MODULE_4__.a,{text:"Loading..."})};defaultStory.story={},defaultStory.story.name="Default",defaultStory.story.parameters={mdxSource:''};var componentMeta={title:"Spinner",decorators:[_storybook_addon_knobs__WEBPACK_IMPORTED_MODULE_3__.withKnobs],includeStories:["defaultStory"]},mdxStoryNameToKey={Default:"defaultStory"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=function _objectSpread(target){for(var i=1;i=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}var layoutProps={};function MDXContent(_ref){var components=_ref.components,props=_objectWithoutProperties(_ref,["components"]);return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_2__.Meta,{title:"Strip",component:_Strip__WEBPACK_IMPORTED_MODULE_6__.a,decorators:[_storybook_addon_knobs__WEBPACK_IMPORTED_MODULE_3__.withKnobs],mdxType:"Meta"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("h3",{id:"strip"},"Strip"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("p",null,"This is a ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("a",_extends({parentName:"p"},{href:"https://reactjs.org/",target:"_blank",rel:["nofollow","noopener","noreferrer"]}),"React")," component for the Vanilla ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("a",_extends({parentName:"p"},{href:"https://docs.vanillaframework.io/patterns/strip/",target:"_blank",rel:["nofollow","noopener","noreferrer"]}),"Strip"),"."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.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_1__.mdx)("h3",{id:"props"},"Props"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_2__.Props,{of:_Strip__WEBPACK_IMPORTED_MODULE_6__.a,mdxType:"Props"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("h3",{id:"light-strip"},"Light strip"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_2__.Preview,{mdxType:"Preview"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_2__.Story,{name:"Light strip",mdxType:"Story"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Strip__WEBPACK_IMPORTED_MODULE_6__.a,{type:"light",mdxType:"Strip"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("p",null,"This is a light row")))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("h3",{id:"dark-strip"},"Dark strip"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_2__.Preview,{mdxType:"Preview"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_2__.Story,{name:"Dark strip",mdxType:"Story"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Strip__WEBPACK_IMPORTED_MODULE_6__.a,{type:"dark",mdxType:"Strip"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("p",null,"This is a dark row")))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("h3",{id:"accent-strip"},"Accent strip"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_2__.Preview,{mdxType:"Preview"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_2__.Story,{name:"Accent strip",mdxType:"Story"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Strip__WEBPACK_IMPORTED_MODULE_6__.a,{type:"accent",element:"section",includeCol:!1,mdxType:"Strip"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_4__.a,{size:"8",mdxType:"Col"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("h1",null,"Still running Ubuntu 14.04 LTS?"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("p",null,"Learn how to maintain ongoing security compliance for your Ubuntu 14.04 LTS systems.")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_4__.a,{size:"4",mdxType:"Col"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("img",{src:"https://assets.ubuntu.com/v1/2217d1c8-Security.svg",alt:"Placeholder"}))))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("h3",{id:"image-strip"},"Image strip"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_2__.Preview,{mdxType:"Preview"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_2__.Story,{name:"Image strip",mdxType:"Story"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(react__WEBPACK_IMPORTED_MODULE_0___default.a.Fragment,null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Strip__WEBPACK_IMPORTED_MODULE_6__.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_1__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_4__.a,{size:"8",mdxType:"Col"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("h1",null,"Get started with big software, fast"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.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_1__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_4__.a,{size:"4",className:"u-hide--small u-align--center",mdxType:"Col"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("img",{src:"https://assets.ubuntu.com/v1/1abb8716-conjure-up-illustration.svg",alt:"Placeholder"}))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Strip__WEBPACK_IMPORTED_MODULE_6__.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_1__.mdx)(_Row__WEBPACK_IMPORTED_MODULE_5__.a,{className:"u-vertically-center",mdxType:"Row"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_4__.a,{size:"8",mdxType:"Col"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("h1",null,"We are Canonical"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.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_1__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_4__.a,{size:"4",className:"u-hide--small u-align--center",mdxType:"Col"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("img",{src:"https://assets.ubuntu.com/v1/9c74eb2d-logo-canonical-white.svg",alt:"Placeholder"}))))))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("h3",{id:"bordered-strip"},"Bordered strip"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_2__.Preview,{mdxType:"Preview"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_2__.Story,{name:"Bordered strip",mdxType:"Story"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Strip__WEBPACK_IMPORTED_MODULE_6__.a,{bordered:!0,colSize:"8",element:"section",mdxType:"Strip"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("h2",null,"The node lifecycle"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.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_1__.mdx)("h3",{id:"deep-strip"},"Deep strip"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_2__.Preview,{mdxType:"Preview"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_2__.Story,{name:"Deep strip",mdxType:"Story"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Strip__WEBPACK_IMPORTED_MODULE_6__.a,{deep:!0,includeCol:!1,element:"section",type:"light",rowClassName:"u-vertically-center",mdxType:"Strip"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_4__.a,{size:"8",mdxType:"Col"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("h2",null,"The fastest way to go from development to production in IoT"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("p",null,"Learn about how Ubuntu Core and snaps can help you build your connected devices.")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_4__.a,{size:"4",className:"u-hide--small u-align--center",mdxType:"Col"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("img",{src:"https://assets.ubuntu.com/v1/808a4e5b-iot.png?h=300",alt:"Placeholder"}))))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("h3",{id:"shallow-strip"},"Shallow strip"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_2__.Preview,{mdxType:"Preview"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_storybook_addon_docs_blocks__WEBPACK_IMPORTED_MODULE_2__.Story,{name:"Shallow strip",mdxType:"Story"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Strip__WEBPACK_IMPORTED_MODULE_6__.a,{shallow:!0,includeCol:!1,element:"section",type:"light",rowClassName:"u-vertically-center",mdxType:"Strip"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_4__.a,{size:"8",mdxType:"Col"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("h2",null,"The fastest way to go from development to production in IoT"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("p",null,"Learn about how Ubuntu Core and snaps can help you build your connected devices.")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_4__.a,{size:"4",className:"u-hide--small u-align--center",mdxType:"Col"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.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_1__.mdx)(_Strip__WEBPACK_IMPORTED_MODULE_6__.a,{type:"light"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.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_1__.mdx)(_Strip__WEBPACK_IMPORTED_MODULE_6__.a,{type:"dark"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.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_1__.mdx)(_Strip__WEBPACK_IMPORTED_MODULE_6__.a,{type:"accent",element:"section",includeCol:!1},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_4__.a,{size:"8"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("h1",null,"Still running Ubuntu 14.04 LTS?"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("p",null,"Learn how to maintain ongoing security compliance for your Ubuntu 14.04 LTS systems.")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_4__.a,{size:"4"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.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_1__.mdx)(react__WEBPACK_IMPORTED_MODULE_0___default.a.Fragment,null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Strip__WEBPACK_IMPORTED_MODULE_6__.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_1__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_4__.a,{size:"8"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("h1",null,"Get started with big software, fast"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.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_1__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_4__.a,{size:"4",className:"u-hide--small u-align--center"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("img",{src:"https://assets.ubuntu.com/v1/1abb8716-conjure-up-illustration.svg",alt:"Placeholder"}))),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Strip__WEBPACK_IMPORTED_MODULE_6__.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_1__.mdx)(_Row__WEBPACK_IMPORTED_MODULE_5__.a,{className:"u-vertically-center"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_4__.a,{size:"8"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("h1",null,"We are Canonical"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.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_1__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_4__.a,{size:"4",className:"u-hide--small u-align--center"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.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_1__.mdx)(_Strip__WEBPACK_IMPORTED_MODULE_6__.a,{bordered:!0,colSize:"8",element:"section"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("h2",null,"The node lifecycle"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.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_1__.mdx)(_Strip__WEBPACK_IMPORTED_MODULE_6__.a,{deep:!0,includeCol:!1,element:"section",type:"light",rowClassName:"u-vertically-center"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_4__.a,{size:"8"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("h2",null,"The fastest way to go from development to production in IoT"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("p",null,"Learn about how Ubuntu Core and snaps can help you build your connected devices.")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_4__.a,{size:"4",className:"u-hide--small u-align--center"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.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_1__.mdx)(_Strip__WEBPACK_IMPORTED_MODULE_6__.a,{shallow:!0,includeCol:!1,element:"section",type:"light",rowClassName:"u-vertically-center"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_4__.a,{size:"8"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("h2",null,"The fastest way to go from development to production in IoT"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("p",null,"Learn about how Ubuntu Core and snaps can help you build your connected devices.")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(_Col__WEBPACK_IMPORTED_MODULE_4__.a,{size:"4",className:"u-hide--small u-align--center"},Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.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_3__.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=function _objectSpread(target){for(var i=1;i=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}var 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_1__.mdx)("div",props)}}("Meta"),layoutProps={};function MDXContent(_ref){var components=_ref.components,props=_objectWithoutProperties(_ref,["components"]);return Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)(Meta,{title:"Getting started",mdxType:"Meta"}),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("p",null,"This package provides ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("a",_extends({parentName:"p"},{href:"https://reactjs.org/",target:"_blank",rel:["nofollow","noopener","noreferrer"]}),"React")," components for ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("a",_extends({parentName:"p"},{href:"http://vanillaframework.io",target:"_blank",rel:["nofollow","noopener","noreferrer"]}),"Vanilla Framework"),"."),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("h2",{id:"install"},"Install"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("pre",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("code",_extends({parentName:"pre"},{className:"language-shell"}),"yarn add @canonical/react-components\n")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("p",null,"Or if you use NPM:"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("pre",null,Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("code",_extends({parentName:"pre"},{className:"language-shell"}),"npm install @canonical/react-components\n")),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("h2",{id:"issues"},"Issues"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("p",null,"Please file any issues at ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("a",_extends({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_1__.mdx)("h2",{id:"contributing"},"Contributing"),Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("p",null,"The source can be found on ",Object(_mdx_js_react__WEBPACK_IMPORTED_MODULE_1__.mdx)("a",_extends({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=function _objectSpread(target){for(var i=1;ib.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",props:{emptyStateMsg:{defaultValue:{value:'""',computed:!1},type:{name:"node"},required:!1,description:"A state that will be shown when no rows are passed to the table."},defaultSort:{type:{name:"string"},required:!1,description:""},defaultSortDirection:{type:{name:"enum",value:[{value:'"ascending"',computed:!1},{value:'"descending"',computed:!1}]},required:!1,description:""},expanding:{type:{name:"bool"},required:!1,description:""},headers:{type:{name:"arrayOf",value:{name:"shape",value:{content:{name:"node",required:!1},className:{name:"string",required:!1},sortKey:{name:"string",required:!1}}}},required:!1,description:""},onUpdateSort:{type:{name:"func"},required:!1,description:""},paginate:{type:{name:"number"},required:!1,description:""},responsive:{type:{name:"bool"},required:!1,description:""},rows:{type:{name:"arrayOf",value:{name:"shape",value:{columns:{name:"arrayOf",value:{name:"shape",value:{children:{name:"node",required:!1},className:{name:"string",required:!1},expanding:{name:"bool",required:!1},hidden:{name:"bool",required:!1}}},required:!1},expanded:{name:"bool",required:!1},expandedContent:{name:"node",required:!1},sortData:{name:"object",required:!1}}}},required:!1,description:""},sortable:{type:{name:"bool"},required:!1,description:""},sortFunction:{type:{name:"func"},required:!1,description:""}}};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__(5),Col=__webpack_require__(14);function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);enumerableOnly&&(symbols=symbols.filter((function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable}))),keys.push.apply(keys,symbols)}return keys}function _defineProperty(obj,key,value){return key in obj?Object.defineProperty(obj,key,{value:value,enumerable:!0,configurable:!0,writable:!0}):obj[key]=value,obj}function _extends(){return(_extends=Object.assign||function(target){for(var i=1;i=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}__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=_objectWithoutProperties(_ref,["components"]);return Object(index_es.mdx)("wrapper",_extends({},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",_extends({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=function _objectSpread(target){for(var i=1;i2*chip.offsetHeight&&overflowChips++})),setOverflowCounter(overflowChips)};Object(react.useEffect)((function(){if("undefined"!=typeof ResizeObserver){var wrapperWidthObserver=new ResizeObserver((function(){updateFlowCount()})),wrapper=chipWrapper.current;wrapperWidthObserver.observe(wrapper)}else updateFlowCount()}),[]);var showAllChips=function showAllChips(){setExpanded(!0)};return(react_default.a.createElement("div",{className:"filter-panel-section","aria-expanded":expanded},heading&&react_default.a.createElement("h3",{className:"filter-panel-section__heading"},data.heading),react_default.a.createElement("div",{className:"filter-panel-section__chips",ref:chipWrapper},null==chips?void 0:chips.map((function(chip){return react_default.a.createElement(Chip.a,{lead:chip.lead,value:chip.value,key:"".concat(chip.lead,"+").concat(chip.value)})})),overflowCounter>0&&!expanded&&react_default.a.createElement("span",{className:"filter-panel-section__counter",onClick:showAllChips,onKeyPress:showAllChips,tabIndex:"0"},"+",overflowCounter))))});FilterPanelSection_FilterPanelSection.__docgenInfo={description:"",methods:[],displayName:"FilterPanelSection",props:{data:{type:{name:"shape",value:{heading:{name:"string",required:!1},chips:{name:"arrayOf",value:{name:"shape",value:{lead:{name:"string",required:!1},value:{name:"string",required:!1}}},required:!1}}},required:!1,description:""}}};var SearchAndFilter_FilterPanelSection_FilterPanelSection=FilterPanelSection_FilterPanelSection;"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/SearchAndFilter/FilterPanelSection/FilterPanelSection.js"]={name:"FilterPanelSection",docgenInfo:FilterPanelSection_FilterPanelSection.__docgenInfo,path:"src/components/SearchAndFilter/FilterPanelSection/FilterPanelSection.js"});__webpack_require__(1309);var SearchAndFilter_SearchAndFilter_SearchAndFilter=function SearchAndFilter(_ref){var _ref$externallyContro=_ref.externallyControlled,externallyControlled=void 0!==_ref$externallyContro&&_ref$externallyContro,onChange=_ref.onChange,filterPanelData=_ref.filterPanelData,_useState=Object(react.useState)(""),_useState2=Object(slicedToArray.a)(_useState,2),searchTerm=_useState2[0],setSearchTerm=_useState2[1],_useState3=Object(react.useState)(!0),_useState4=Object(slicedToArray.a)(_useState3,2),filterPanelHidden=_useState4[0],setFilterPanelHidden=_useState4[1],filterPanelRef=Object(react.useRef)(),searchOnChange=function searchOnChange(searchTerm){setSearchTerm(searchTerm),externallyControlled&&onChange&&onChange(searchTerm)};return Object(react.useEffect)((function(){var closePanel=function closePanel(){setFilterPanelHidden(!0)},mouseDown=function mouseDown(e){var _filterPanelRef$curre;(null==filterPanelRef?void 0:null===(_filterPanelRef$curre=filterPanelRef.current)||void 0===_filterPanelRef$curre?void 0:_filterPanelRef$curre.contains(e.target))||closePanel()},keyDown=function keyDown(e){"Escape"===e.code&&closePanel()};return document.addEventListener("mousedown",mouseDown),document.addEventListener("keydown",keyDown),function(){document.removeEventListener("mousedown",mouseDown),document.removeEventListener("keydown",keyDown)}}),[]),react_default.a.createElement("div",{className:"search-and-filter"},react_default.a.createElement(SearchBox.a,{autocomplete:"off",externallyControlled:externallyControlled,placeholder:"Search and filter",onChange:function onChange(searchTerm){return searchOnChange(searchTerm)},onClick:function onClick(){return setFilterPanelHidden(!1)},onFocus:function onFocus(){return setFilterPanelHidden(!1)},value:searchTerm}),filterPanelData&&react_default.a.createElement("div",{className:"search-and-filter__panel",ref:filterPanelRef,"aria-hidden":filterPanelHidden},react_default.a.createElement(ContextualMenu.a,null,filterPanelData.map((function(filterPanelSectionData){return react_default.a.createElement(SearchAndFilter_FilterPanelSection_FilterPanelSection,{data:filterPanelSectionData,key:filterPanelSectionData.id})})))))};SearchAndFilter_SearchAndFilter_SearchAndFilter.__docgenInfo={description:"",methods:[],displayName:"SearchAndFilter",props:{externallyControlled:{defaultValue:{value:"false",computed:!1},type:{name:"bool"},required:!1,description:""},filterPanelData:{type:{name:"arrayOf",value:{name:"shape",value:{heading:{name:"string",required:!1},chips:{name:"arrayOf",value:{name:"shape",value:{id:{name:"number",required:!1},lead:{name:"string",required:!1},value:{name:"string",required:!1}}},required:!1}}}},required:!1,description:""},onChange:{type:{name:"func"},required:!1,description:""},onSubmit:{type:{name:"func"},required:!1,description:""}}};var components_SearchAndFilter_SearchAndFilter=SearchAndFilter_SearchAndFilter_SearchAndFilter;function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);enumerableOnly&&(symbols=symbols.filter((function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable}))),keys.push.apply(keys,symbols)}return keys}function _defineProperty(obj,key,value){return key in obj?Object.defineProperty(obj,key,{value:value,enumerable:!0,configurable:!0,writable:!0}):obj[key]=value,obj}function _extends(){return(_extends=Object.assign||function(target){for(var i=1;i=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/SearchAndFilter/SearchAndFilter.js"]={name:"SearchAndFilter",docgenInfo:SearchAndFilter_SearchAndFilter_SearchAndFilter.__docgenInfo,path:"src/components/SearchAndFilter/SearchAndFilter.js"}),__webpack_require__.d(__webpack_exports__,"defaultStory",(function(){return SearchAndFilter_stories_defaultStory})),__webpack_require__.d(__webpack_exports__,"externalState",(function(){return SearchAndFilter_stories_externalState}));var layoutProps={};function MDXContent(_ref){var components=_ref.components,props=_objectWithoutProperties(_ref,["components"]);return Object(index_es.mdx)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(index_es.mdx)(blocks.Meta,{title:"SearchAndFilter",component:components_SearchAndFilter_SearchAndFilter,decorators:[dist.withKnobs],mdxType:"Meta"}),Object(index_es.mdx)("h3",{id:"search-and-filter"},"Search And Filter"),Object(index_es.mdx)("p",null,"This component is used to search and filter large datasets."),Object(index_es.mdx)("h3",{id:"props"},"Props"),Object(index_es.mdx)(blocks.Props,{of:components_SearchAndFilter_SearchAndFilter,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_SearchAndFilter_SearchAndFilter,{mdxType:"SearchAndFilter"}))),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 data set 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_SearchAndFilter_SearchAndFilter,{externallyControlled:!0,onChange:function onChange(searchTerm){console.log("onChange: ",searchTerm)},filterPanelData:[{id:0,heading:"Clouds",chips:[{value:"Google"},{value:"AWS"},{value:"Azure"}]},{id:1,heading:"Regions",chips:[{value:"us-east1"},{value:"us-north2"},{value:"us-south3"},{value:"us-north4"},{value:"us-east5"},{value:"us-south6"},{value:"us-east7"},{value:"us-east8"},{value:"us-east9"},{value:"us-east10"}]},{id:2,heading:"Owner",chips:[{value:"foo"},{value:"bar"},{value:"baz"}]}],mdxType:"SearchAndFilter"}))))}MDXContent.isMDXComponent=!0;var SearchAndFilter_stories_defaultStory=function defaultStory(){return Object(index_es.mdx)(components_SearchAndFilter_SearchAndFilter,null)};SearchAndFilter_stories_defaultStory.story={},SearchAndFilter_stories_defaultStory.story.name="Default",SearchAndFilter_stories_defaultStory.story.parameters={mdxSource:""};var SearchAndFilter_stories_externalState=function externalState(){return Object(index_es.mdx)(components_SearchAndFilter_SearchAndFilter,{externallyControlled:!0,onChange:function onChange(searchTerm){console.log("onChange: ",searchTerm)},filterPanelData:[{id:0,heading:"Clouds",chips:[{value:"Google"},{value:"AWS"},{value:"Azure"}]},{id:1,heading:"Regions",chips:[{value:"us-east1"},{value:"us-north2"},{value:"us-south3"},{value:"us-north4"},{value:"us-east5"},{value:"us-south6"},{value:"us-east7"},{value:"us-east8"},{value:"us-east9"},{value:"us-east10"}]},{id:2,heading:"Owner",chips:[{value:"foo"},{value:"bar"},{value:"baz"}]}]})};SearchAndFilter_stories_externalState.story={},SearchAndFilter_stories_externalState.story.name="External state",SearchAndFilter_stories_externalState.story.parameters={mdxSource:' {\n  console.log("onChange: ", searchTerm);\n}} filterPanelData={[{\n  id: 0,\n  heading: "Clouds",\n  chips: [{\n    value: "Google"\n  }, {\n    value: "AWS"\n  }, {\n    value: "Azure"\n  }]\n}, {\n  id: 1,\n  heading: "Regions",\n  chips: [{\n    value: "us-east1"\n  }, {\n    value: "us-north2"\n  }, {\n    value: "us-south3"\n  }, {\n    value: "us-north4"\n  }, {\n    value: "us-east5"\n  }, {\n    value: "us-south6"\n  }, {\n    value: "us-east7"\n  }, {\n    value: "us-east8"\n  }, {\n    value: "us-east9"\n  }, {\n    value: "us-east10"\n  }]\n}, {\n  id: 2,\n  heading: "Owner",\n  chips: [{\n    value: "foo"\n  }, {\n    value: "bar"\n  }, {\n    value: "baz"\n  }]\n}]} />'};var componentMeta={title:"SearchAndFilter",decorators:[dist.withKnobs],includeStories:["defaultStory","externalState"]},mdxStoryNameToKey={Default:"defaultStory","External state":"externalState"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=function _objectSpread(target){for(var i=1;iarr.length)&&(len=arr.length);for(var i=0,arr2=new Array(len);i=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}"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})),__webpack_require__.d(__webpack_exports__,"externalState",(function(){return Accordion_stories_externalState})),__webpack_require__.d(__webpack_exports__,"headings",(function(){return Accordion_stories_headings}));var layoutProps={};function MDXContent(_ref){var components=_ref.components,props=_objectWithoutProperties(_ref,["components"]);return Object(index_es.mdx)("wrapper",_extends({},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",_extends({parentName:"p"},{href:"https://reactjs.org/",target:"_blank",rel:["nofollow","noopener","noreferrer"]}),"React")," component for the Vanilla ",Object(index_es.mdx)("a",_extends({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"}))),Object(index_es.mdx)("h3",{id:"external-state"},"External state"),Object(index_es.mdx)("p",null,"The expanded accordion section can be controlled by external state."),Object(index_es.mdx)(blocks.Preview,{mdxType:"Preview"},Object(index_es.mdx)(blocks.Story,{name:"External state",mdxType:"Story"},(function(){var _useState2=_slicedToArray(Object(react.useState)(),2),expandedSection=_useState2[0],setExpandedSection=_useState2[1];return Object(index_es.mdx)(components_Accordion_Accordion,{expanded:expandedSection,externallyControlled:!0,onExpandedChange:setExpandedSection,sections:[{title:"Advanced topics",key:"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",key:"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",key:"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"})}))),Object(index_es.mdx)("h3",{id:"headings"},"Headings"),Object(index_es.mdx)("p",null,Object(index_es.mdx)("inlineCode",{parentName:"p"},"titleElement")," prop can be used to define heading element for section titles."),Object(index_es.mdx)(blocks.Preview,{mdxType:"Preview"},Object(index_es.mdx)(blocks.Story,{name:"Headings",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"))}],titleElement:"h3",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 Accordion_stories_externalState=function externalState(){var _useState4=_slicedToArray(Object(react.useState)(),2),expandedSection=_useState4[0],setExpandedSection=_useState4[1];return Object(index_es.mdx)(components_Accordion_Accordion,{expanded:expandedSection,externallyControlled:!0,onExpandedChange:setExpandedSection,sections:[{title:"Advanced topics",key:"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",key:"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",key:"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_externalState.story={},Accordion_stories_externalState.story.name="External state",Accordion_stories_externalState.story.parameters={mdxSource:'() => {\n  const [expandedSection, setExpandedSection] = useState();\n  return \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    key: "networking",\n    content: <>\n                  
Working offline
\n                  
Fan container networking
\n                  
Network spaces
\n                \n  }, {\n    title: "Miscellaneous",\n    key: "miscellaneous",\n    content: <>\n                  
Juju GUI
\n                  
CentOS support
\n                  
Collecting Juju metrics
\n                \n  }]} />;\n}'};var Accordion_stories_headings=function headings(){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"))}],titleElement:"h3"})};Accordion_stories_headings.story={},Accordion_stories_headings.story.name="Headings",Accordion_stories_headings.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}]} titleElement="h3" />'};var componentMeta={title:"Accordion",decorators:[dist.withKnobs],includeStories:["defaultStory","externalState","headings"]},mdxStoryNameToKey={Default:"defaultStory","External state":"externalState",Headings:"headings"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=function _objectSpread(target){for(var i=1;i=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}__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=_objectWithoutProperties(_ref,["components"]);return Object(index_es.mdx)("wrapper",_extends({},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",_extends({parentName:"p"},{href:"https://reactjs.org/",target:"_blank",rel:["nofollow","noopener","noreferrer"]}),"React")," component for the Vanilla ",Object(index_es.mdx)("a",_extends({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=function _objectSpread(target){for(var i=1;i=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Loader/Loader.js"]={name:"Loader",docgenInfo: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=_objectWithoutProperties(_ref,["components"]);return Object(index_es.mdx)("wrapper",_extends({},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,"The Loader component has been renamed to ",Object(index_es.mdx)("a",_extends({parentName:"p"},{href:"/?path=/story/spinner--default-story"}),"Spinner"),"."),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=function _objectSpread(target){for(var i=1;i=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}__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=_objectWithoutProperties(_ref,["components"]);return Object(index_es.mdx)("wrapper",_extends({},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",_extends({parentName:"p"},{href:"https://reactjs.org/",target:"_blank",rel:["nofollow","noopener","noreferrer"]}),"React")," component for the Vanilla ",Object(index_es.mdx)("a",_extends({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=function _objectSpread(target){for(var i=1;i=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Tooltip/Tooltip.js"]={name:"Tooltip",docgenInfo:Tooltip_Tooltip.__docgenInfo,path:"src/components/Tooltip/Tooltip.js"}),__webpack_require__.d(__webpack_exports__,"defaultStory",(function(){return Tooltip_stories_defaultStory}));var layoutProps={};function MDXContent(_ref){var components=_ref.components,props=_objectWithoutProperties(_ref,["components"]);return Object(index_es.mdx)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(index_es.mdx)(blocks.Meta,{title:"Tooltip",component:components_Tooltip_Tooltip,decorators:[dist.withKnobs],mdxType:"Meta"}),Object(index_es.mdx)("h3",{id:"tooltip"},"Tooltip"),Object(index_es.mdx)("p",null,"This is the ",Object(index_es.mdx)("a",_extends({parentName:"p"},{href:"https://reactjs.org/",target:"_blank",rel:["nofollow","noopener","noreferrer"]}),"React")," component for Vanilla ",Object(index_es.mdx)("a",_extends({parentName:"p"},{href:"https://vanillaframework.io/docs/patterns/tooltips",target:"_blank",rel:["nofollow","noopener","noreferrer"]}),"Tooltips"),"."),Object(index_es.mdx)("p",null,"Tooltips are text labels that appear when the user hovers over, focuses on, or touches an element on the screen."),Object(index_es.mdx)("p",null,"They can be used to provide information about concepts/terms/actions that are not self-explanatory or well known."),Object(index_es.mdx)("p",null,"An alternative use of tooltips is to provide information on a disabled actionable element, e.g. for disabled buttons, providing information about why they are disabled."),Object(index_es.mdx)("h3",{id:"props"},"Props"),Object(index_es.mdx)(blocks.Props,{of:components_Tooltip_Tooltip,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)("div",{style:{display:"flex",justifyContent:"center",padding:"3rem"}},Object(index_es.mdx)(components_Tooltip_Tooltip,{message:"Tooltip message to display.",position:Object(dist.select)("Position",["top-left","top-center","top-right","left","right","btm-left","btm-center","btm-right"]),mdxType:"Tooltip"},Object(index_es.mdx)(Button.a,{className:"u-no-margin--bottom",mdxType:"Button"},"Hover over me!"))))))}MDXContent.isMDXComponent=!0;var Tooltip_stories_defaultStory=function defaultStory(){return Object(index_es.mdx)("div",{style:{display:"flex",justifyContent:"center",padding:"3rem"}},Object(index_es.mdx)(components_Tooltip_Tooltip,{message:"Tooltip message to display.",position:Object(dist.select)("Position",["top-left","top-center","top-right","left","right","btm-left","btm-center","btm-right"])},Object(index_es.mdx)(Button.a,{className:"u-no-margin--bottom"},"Hover over me!")))};Tooltip_stories_defaultStory.story={},Tooltip_stories_defaultStory.story.name="Default",Tooltip_stories_defaultStory.story.parameters={mdxSource:'
\n      \n        \n      \n    
'};var componentMeta={title:"Tooltip",decorators:[dist.withKnobs],includeStories:["defaultStory"]},mdxStoryNameToKey={Default:"defaultStory"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=function _objectSpread(target){for(var i=1;i=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}"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=_objectWithoutProperties(_ref,["components"]);return Object(index_es.mdx)("wrapper",_extends({},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=function _objectSpread(target){for(var i=1;i=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}"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=_objectWithoutProperties(_ref,["components"]);return Object(index_es.mdx)("wrapper",_extends({},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",_extends({parentName:"p"},{href:"https://reactjs.org/",target:"_blank",rel:["nofollow","noopener","noreferrer"]}),"React")," component for the Vanilla ",Object(index_es.mdx)("a",_extends({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=function _objectSpread(target){for(var i=1;i=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}__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=_objectWithoutProperties(_ref,["components"]);return Object(index_es.mdx)("wrapper",_extends({},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",_extends({parentName:"p"},{href:"https://reactjs.org/",target:"_blank",rel:["nofollow","noopener","noreferrer"]}),"React")," component for the Vanilla ",Object(index_es.mdx)("a",_extends({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=function _objectSpread(target){for(var i=1;i=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}"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=_objectWithoutProperties(_ref,["components"]);return Object(index_es.mdx)("wrapper",_extends({},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",_extends({parentName:"p"},{href:"https://reactjs.org/",target:"_blank",rel:["nofollow","noopener","noreferrer"]}),"React")," component for the Vanilla ",Object(index_es.mdx)("a",_extends({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=function _objectSpread(target){for(var i=1;i=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}"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=_objectWithoutProperties(_ref,["components"]);return Object(index_es.mdx)("wrapper",_extends({},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",_extends({parentName:"p"},{href:"https://reactjs.org/",target:"_blank",rel:["nofollow","noopener","noreferrer"]}),"React")," component for the Vanilla ",Object(index_es.mdx)("a",_extends({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=function _objectSpread(target){for(var i=1;i=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}"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=_objectWithoutProperties(_ref,["components"]);return Object(index_es.mdx)("wrapper",_extends({},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",_extends({parentName:"p"},{href:"https://reactjs.org/",target:"_blank",rel:["nofollow","noopener","noreferrer"]}),"React")," component for the Vanilla ",Object(index_es.mdx)("a",_extends({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=function _objectSpread(target){for(var i=1;i=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}"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=_objectWithoutProperties(_ref,["components"]);return Object(index_es.mdx)("wrapper",_extends({},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",_extends({parentName:"p"},{href:"https://reactjs.org/",target:"_blank",rel:["nofollow","noopener","noreferrer"]}),"React")," component for the Vanilla ",Object(index_es.mdx)("a",_extends({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=function _objectSpread(target){for(var i=1;i=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/Tabs/Tabs.js"]={name:"Tabs",docgenInfo:Tabs_Tabs.__docgenInfo,path:"src/components/Tabs/Tabs.js"}),__webpack_require__.d(__webpack_exports__,"defaultStory",(function(){return Tabs_stories_defaultStory})),__webpack_require__.d(__webpack_exports__,"horizontallyAligned",(function(){return Tabs_stories_horizontallyAligned}));var layoutProps={};function MDXContent(_ref){var components=_ref.components,props=_objectWithoutProperties(_ref,["components"]);return Object(index_es.mdx)("wrapper",_extends({},layoutProps,props,{components:components,mdxType:"MDXLayout"}),Object(index_es.mdx)(blocks.Meta,{title:"Tabs",component:components_Tabs_Tabs,decorators:[dist.withKnobs],mdxType:"Meta"}),Object(index_es.mdx)("h3",{id:"tabs"},"Tabs"),Object(index_es.mdx)("p",null,"This is the ",Object(index_es.mdx)("a",_extends({parentName:"p"},{href:"https://reactjs.org/",target:"_blank",rel:["nofollow","noopener","noreferrer"]}),"React")," component for Vanilla ",Object(index_es.mdx)("a",_extends({parentName:"p"},{href:"https://vanillaframework.io/docs/patterns/tabs",target:"_blank",rel:["nofollow","noopener","noreferrer"]}),"Tabs"),"."),Object(index_es.mdx)("p",null,"Tabs organise and allow navigation between groups of content that are related and at the same level\nof hierarchy."),Object(index_es.mdx)("h3",{id:"props"},"Props"),Object(index_es.mdx)(blocks.Props,{of:components_Tabs_Tabs,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_Tabs_Tabs,{links:[{active:Object(dist.boolean)("Summary active",!0),label:"Summary"},{active:Object(dist.boolean)("Network active",!1),label:"Network"},{active:Object(dist.boolean)("Storage active",!1),label:"Storage"},{active:Object(dist.boolean)("Settings active",!1),label:"Settings"}],mdxType:"Tabs"}))),Object(index_es.mdx)("h3",{id:"horizontally-aligned"},"Horizontally aligned"),Object(index_es.mdx)("p",null,"To horizontally align the Tabs with other content, they can be contained within a Row component to\nprovide correct gutters."),Object(index_es.mdx)(blocks.Preview,{mdxType:"Preview"},Object(index_es.mdx)(blocks.Story,{name:"Horizontally aligned",mdxType:"Story"},Object(index_es.mdx)(Row.a,{mdxType:"Row"},Object(index_es.mdx)(components_Tabs_Tabs,{links:[{active:Object(dist.boolean)("Summary active",!0),label:"Summary"},{active:Object(dist.boolean)("Network active",!1),label:"Network"},{active:Object(dist.boolean)("Storage active",!1),label:"Storage"},{active:Object(dist.boolean)("Settings active",!1),label:"Settings"}],mdxType:"Tabs"}),Object(index_es.mdx)("p",null,"There should be gutters and the text should be horizontally aligned")))))}MDXContent.isMDXComponent=!0;var Tabs_stories_defaultStory=function defaultStory(){return Object(index_es.mdx)(components_Tabs_Tabs,{links:[{active:Object(dist.boolean)("Summary active",!0),label:"Summary"},{active:Object(dist.boolean)("Network active",!1),label:"Network"},{active:Object(dist.boolean)("Storage active",!1),label:"Storage"},{active:Object(dist.boolean)("Settings active",!1),label:"Settings"}]})};Tabs_stories_defaultStory.story={},Tabs_stories_defaultStory.story.name="Default",Tabs_stories_defaultStory.story.parameters={mdxSource:''};var Tabs_stories_horizontallyAligned=function horizontallyAligned(){return Object(index_es.mdx)(Row.a,null,Object(index_es.mdx)(components_Tabs_Tabs,{links:[{active:Object(dist.boolean)("Summary active",!0),label:"Summary"},{active:Object(dist.boolean)("Network active",!1),label:"Network"},{active:Object(dist.boolean)("Storage active",!1),label:"Storage"},{active:Object(dist.boolean)("Settings active",!1),label:"Settings"}]}),Object(index_es.mdx)("p",null,"There should be gutters and the text should be horizontally aligned"))};Tabs_stories_horizontallyAligned.story={},Tabs_stories_horizontallyAligned.story.name="Horizontally aligned",Tabs_stories_horizontallyAligned.story.parameters={mdxSource:'\n      \n      
      There should be gutters and the text should be horizontally aligned
      \n          '};var componentMeta={title:"Tabs",decorators:[dist.withKnobs],includeStories:["defaultStory","horizontallyAligned"]},mdxStoryNameToKey={Default:"defaultStory","Horizontally aligned":"horizontallyAligned"};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs=function _objectSpread(target){for(var i=1;i=0||(target[key]=source[key]);return target}(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i=0||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}"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=_objectWithoutProperties(_ref,["components"]);return Object(index_es.mdx)("wrapper",_extends({},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",_extends({parentName:"p"},{href:"https://reactjs.org/",target:"_blank",rel:["nofollow","noopener","noreferrer"]}),"React")," component for the Vanilla ",Object(index_es.mdx)("a",_extends({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:'