208.a620bdcb.iframe.bundle.js

"use strict";(self.webpackChunkdata_transparency_ui=self.webpackChunkdata_transparency_ui||[]).push([[208],{"./.storybook/stories/primaryButtons.stories.js":function(__unused_webpack_module,__webpack_exports__,__webpack_require__){__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Large:function(){return Large},Medium:function(){return Medium},Small:function(){return Small},__namedExportsOrder:function(){return __namedExportsOrder},largeCenterTextAlignment:function(){return largeCenterTextAlignment},largeDisabled:function(){return largeDisabled},largeIcon:function(){return largeIcon},largeLeftTextAlignment:function(){return largeLeftTextAlignment},mediumCenterTextAlignment:function(){return mediumCenterTextAlignment},mediumDisabled:function(){return mediumDisabled},mediumIcon:function(){return mediumIcon},mediumLeftTextAlignment:function(){return mediumLeftTextAlignment},smallCenterTextAlignment:function(){return smallCenterTextAlignment},smallDisabled:function(){return smallDisabled},smallIcon:function(){return smallIcon},smallLeftTextAlignment:function(){return smallLeftTextAlignment}});var react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/react/index.js"),_fortawesome_react_fontawesome__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./node_modules/@fortawesome/react-fontawesome/dist/index.js"),_components_Button__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./components/Button.jsx");__webpack_exports__.default={title:"Buttons/Primary",component:_components_Button__WEBPACK_IMPORTED_MODULE_2__.A,tags:["autodocs"]};var Small={args:{copy:"sm",buttonTitle:"Small",buttonSize:"sm",buttonType:"primary",backgroundColor:"light"}},Medium={args:{copy:"md",buttonTitle:"Medium",buttonSize:"md",buttonType:"primary",backgroundColor:"light"}},Large={args:{copy:"lg",buttonTitle:"large",buttonSize:"lg",buttonType:"primary",backgroundColor:"light"}},smallCenterTextAlignment={tags:["!dev"],args:{buttonSize:"sm",buttonTitle:"wrapping text button",copy:"This is center text alignment",backgroundColor:"light",buttonType:"primary",textAlignment:"center",maxWidth:"200px"}},mediumCenterTextAlignment={args:{buttonSize:"md",buttonTitle:"wrapping text button",copy:"This is center text alignment",backgroundColor:"light",buttonType:"primary",textAlignment:"center",maxWidth:"200px"}},largeCenterTextAlignment={tags:["!dev"],args:{buttonSize:"lg",buttonTitle:"wrapping text button",copy:"This is center text alignment",backgroundColor:"light",buttonType:"primary",textAlignment:"center",maxWidth:"200px"}},smallLeftTextAlignment={tags:["!dev"],args:{buttonSize:"sm",buttonTitle:"wrapping text button",copy:"This is left text alignment",backgroundColor:"light",buttonType:"primary",textAlignment:"left",maxWidth:"200px"}},mediumLeftTextAlignment={args:{buttonSize:"md",buttonTitle:"wrapping text button",copy:"This is left text alignment",backgroundColor:"light",buttonType:"primary",textAlignment:"left",maxWidth:"200px"}},largeLeftTextAlignment={tags:["!dev"],args:{buttonSize:"lg",buttonTitle:"wrapping text button",copy:"This is left text alignment",backgroundColor:"light",buttonType:"primary",textAlignment:"left",maxWidth:"200px"}},smallDisabled={tags:["!dev"],args:{buttonSize:"sm",buttonTitle:"disabled button",copy:"disabled sm",backgroundColor:"light",buttonType:"primary",disabled:!0}},mediumDisabled={args:{buttonSize:"md",buttonTitle:"disabled button",copy:"disabled md",backgroundColor:"light",buttonType:"primary",disabled:!0}},largeDisabled={tags:["!dev"],args:{buttonSize:"lg",buttonTitle:"disabled button",copy:"disabled lg",backgroundColor:"light",buttonType:"primary",disabled:!0}},smallIcon={tags:["!dev"],args:{buttonSize:"sm",buttonTitle:"Test",copy:"Icon",backgroundColor:"light",buttonType:"primaryIcon",imageAlignment:"left",image:react__WEBPACK_IMPORTED_MODULE_0__.createElement(_fortawesome_react_fontawesome__WEBPACK_IMPORTED_MODULE_1__.gc,{icon:"share-alt"})}},mediumIcon={args:{buttonSize:"md",buttonTitle:"Test",copy:"Icon",backgroundColor:"light",buttonType:"primaryIcon",imageAlignment:"left",image:react__WEBPACK_IMPORTED_MODULE_0__.createElement(_fortawesome_react_fontawesome__WEBPACK_IMPORTED_MODULE_1__.gc,{icon:"share-alt"})}},largeIcon={tags:["!dev"],args:{buttonSize:"large",buttonTitle:"Test",copy:"Icon",backgroundColor:"light",buttonType:"primaryIcon",imageAlignment:"left",image:react__WEBPACK_IMPORTED_MODULE_0__.createElement(_fortawesome_react_fontawesome__WEBPACK_IMPORTED_MODULE_1__.gc,{icon:"share-alt"})}};const __namedExportsOrder=["Small","Medium","Large","smallCenterTextAlignment","mediumCenterTextAlignment","largeCenterTextAlignment","smallLeftTextAlignment","mediumLeftTextAlignment","largeLeftTextAlignment","smallDisabled","mediumDisabled","largeDisabled","smallIcon","mediumIcon","largeIcon"];Small.parameters={...Small.parameters,docs:{...Small.parameters?.docs,source:{originalSource:'{\n  args: {\n    copy: "sm",\n    buttonTitle: "Small",\n    buttonSize: "sm",\n    buttonType: "primary",\n    backgroundColor: "light"\n  }\n}',...Small.parameters?.docs?.source}}},Medium.parameters={...Medium.parameters,docs:{...Medium.parameters?.docs,source:{originalSource:'{\n  args: {\n    copy: "md",\n    buttonTitle: "Medium",\n    buttonSize: "md",\n    buttonType: "primary",\n    backgroundColor: "light"\n  }\n}',...Medium.parameters?.docs?.source}}},Large.parameters={...Large.parameters,docs:{...Large.parameters?.docs,source:{originalSource:'{\n  args: {\n    copy: "lg",\n    buttonTitle: "large",\n    buttonSize: "lg",\n    buttonType: "primary",\n    backgroundColor: "light"\n  }\n}',...Large.parameters?.docs?.source}}},smallCenterTextAlignment.parameters={...smallCenterTextAlignment.parameters,docs:{...smallCenterTextAlignment.parameters?.docs,source:{originalSource:'{\n  tags: [\'!dev\'],\n  args: {\n    buttonSize: "sm",\n    buttonTitle: "wrapping text button",\n    copy: "This is center text alignment",\n    backgroundColor: "light",\n    buttonType: "primary",\n    textAlignment: "center",\n    maxWidth: "200px"\n  }\n}',...smallCenterTextAlignment.parameters?.docs?.source}}},mediumCenterTextAlignment.parameters={...mediumCenterTextAlignment.parameters,docs:{...mediumCenterTextAlignment.parameters?.docs,source:{originalSource:'{\n  args: {\n    buttonSize: "md",\n    buttonTitle: "wrapping text button",\n    copy: "This is center text alignment",\n    backgroundColor: "light",\n    buttonType: "primary",\n    textAlignment: "center",\n    maxWidth: "200px"\n  }\n}',...mediumCenterTextAlignment.parameters?.docs?.source}}},largeCenterTextAlignment.parameters={...largeCenterTextAlignment.parameters,docs:{...largeCenterTextAlignment.parameters?.docs,source:{originalSource:'{\n  tags: [\'!dev\'],\n  args: {\n    buttonSize: "lg",\n    buttonTitle: "wrapping text button",\n    copy: "This is center text alignment",\n    backgroundColor: "light",\n    buttonType: "primary",\n    textAlignment: "center",\n    maxWidth: "200px"\n  }\n}',...largeCenterTextAlignment.parameters?.docs?.source}}},smallLeftTextAlignment.parameters={...smallLeftTextAlignment.parameters,docs:{...smallLeftTextAlignment.parameters?.docs,source:{originalSource:'{\n  tags: [\'!dev\'],\n  args: {\n    buttonSize: "sm",\n    buttonTitle: "wrapping text button",\n    copy: "This is left text alignment",\n    backgroundColor: "light",\n    buttonType: "primary",\n    textAlignment: "left",\n    maxWidth: "200px"\n  }\n}',...smallLeftTextAlignment.parameters?.docs?.source}}},mediumLeftTextAlignment.parameters={...mediumLeftTextAlignment.parameters,docs:{...mediumLeftTextAlignment.parameters?.docs,source:{originalSource:'{\n  args: {\n    buttonSize: "md",\n    buttonTitle: "wrapping text button",\n    copy: "This is left text alignment",\n    backgroundColor: "light",\n    buttonType: "primary",\n    textAlignment: "left",\n    maxWidth: "200px"\n  }\n}',...mediumLeftTextAlignment.parameters?.docs?.source}}},largeLeftTextAlignment.parameters={...largeLeftTextAlignment.parameters,docs:{...largeLeftTextAlignment.parameters?.docs,source:{originalSource:'{\n  tags: [\'!dev\'],\n  args: {\n    buttonSize: "lg",\n    buttonTitle: "wrapping text button",\n    copy: "This is left text alignment",\n    backgroundColor: "light",\n    buttonType: "primary",\n    textAlignment: "left",\n    maxWidth: "200px"\n  }\n}',...largeLeftTextAlignment.parameters?.docs?.source}}},smallDisabled.parameters={...smallDisabled.parameters,docs:{...smallDisabled.parameters?.docs,source:{originalSource:'{\n  tags: [\'!dev\'],\n  args: {\n    buttonSize: "sm",\n    buttonTitle: "disabled button",\n    copy: "disabled sm",\n    backgroundColor: "light",\n    buttonType: "primary",\n    disabled: true\n  }\n}',...smallDisabled.parameters?.docs?.source}}},mediumDisabled.parameters={...mediumDisabled.parameters,docs:{...mediumDisabled.parameters?.docs,source:{originalSource:'{\n  args: {\n    buttonSize: "md",\n    buttonTitle: "disabled button",\n    copy: "disabled md",\n    backgroundColor: "light",\n    buttonType: "primary",\n    disabled: true\n  }\n}',...mediumDisabled.parameters?.docs?.source}}},largeDisabled.parameters={...largeDisabled.parameters,docs:{...largeDisabled.parameters?.docs,source:{originalSource:'{\n  tags: [\'!dev\'],\n  args: {\n    buttonSize: "lg",\n    buttonTitle: "disabled button",\n    copy: "disabled lg",\n    backgroundColor: "light",\n    buttonType: "primary",\n    disabled: true\n  }\n}',...largeDisabled.parameters?.docs?.source}}},smallIcon.parameters={...smallIcon.parameters,docs:{...smallIcon.parameters?.docs,source:{originalSource:'{\n  tags: [\'!dev\'],\n  args: {\n    buttonSize: "sm",\n    buttonTitle: "Test",\n    copy: "Icon",\n    backgroundColor: "light",\n    buttonType: "primaryIcon",\n    imageAlignment: "left",\n    image: <FontAwesomeIcon icon="share-alt" />\n  }\n}',...smallIcon.parameters?.docs?.source}}},mediumIcon.parameters={...mediumIcon.parameters,docs:{...mediumIcon.parameters?.docs,source:{originalSource:'{\n  args: {\n    buttonSize: "md",\n    buttonTitle: "Test",\n    copy: "Icon",\n    backgroundColor: "light",\n    buttonType: "primaryIcon",\n    imageAlignment: "left",\n    image: <FontAwesomeIcon icon="share-alt" />\n  }\n}',...mediumIcon.parameters?.docs?.source}}},largeIcon.parameters={...largeIcon.parameters,docs:{...largeIcon.parameters?.docs,source:{originalSource:'{\n  tags: [\'!dev\'],\n  args: {\n    buttonSize: "large",\n    buttonTitle: "Test",\n    copy: "Icon",\n    backgroundColor: "light",\n    buttonType: "primaryIcon",\n    imageAlignment: "left",\n    image: <FontAwesomeIcon icon="share-alt" />\n  }\n}',...largeIcon.parameters?.docs?.source}}}},"./components/Button.jsx":function(__unused_webpack_module,__webpack_exports__,__webpack_require__){var react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/react/index.js"),prop_types__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./node_modules/prop-types/index.js"),prop_types__WEBPACK_IMPORTED_MODULE_1___default=__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_1__);__webpack_require__("./styles/components/_buttons.scss");var propTypes={buttonSize:prop_types__WEBPACK_IMPORTED_MODULE_1___default().oneOf(["large","medium","small","lg","md","sm"]).isRequired,backgroundColor:prop_types__WEBPACK_IMPORTED_MODULE_1___default().oneOf(["light","dark"]).isRequired,buttonType:prop_types__WEBPACK_IMPORTED_MODULE_1___default().oneOf(["primary","primaryIcon","secondary","secondaryIcon","tertiary","tertiaryIcon","text","stacked","icon","inline","intext"]).isRequired,copy:prop_types__WEBPACK_IMPORTED_MODULE_1___default().string.isRequired,image:prop_types__WEBPACK_IMPORTED_MODULE_1___default().element,textAlignment:prop_types__WEBPACK_IMPORTED_MODULE_1___default().oneOf(["left","center"]),imageAlignment:prop_types__WEBPACK_IMPORTED_MODULE_1___default().oneOf(["left","right"]),additionalClassnames:prop_types__WEBPACK_IMPORTED_MODULE_1___default().string,onClick:prop_types__WEBPACK_IMPORTED_MODULE_1___default().func,onKeyUp:prop_types__WEBPACK_IMPORTED_MODULE_1___default().func,buttonTitle:prop_types__WEBPACK_IMPORTED_MODULE_1___default().string.isRequired,disabled:prop_types__WEBPACK_IMPORTED_MODULE_1___default().bool,maxWidth:prop_types__WEBPACK_IMPORTED_MODULE_1___default().string,to:prop_types__WEBPACK_IMPORTED_MODULE_1___default().string},Button=function Button(props){var classNameList="";return"large"===props.buttonSize||"lg"===props.buttonSize?classNameList+=" button__lg ":"medium"===props.buttonSize||"md"===props.buttonSize?classNameList+=" button__md ":"small"!==props.buttonSize&&"sm"!==props.buttonSize||(classNameList+=" button__sm "),"primary"===props.buttonType?classNameList+=" button-type__primary-light ":"secondary"===props.buttonType?"light"===props.backgroundColor?classNameList+=" button-type__secondary-light ":"dark"===props.backgroundColor&&(classNameList+=" button-type__secondary-dark "):"primaryIcon"===props.buttonType?"light"===props.backgroundColor&&"left"===props.imageAlignment&&(classNameList+=" button-type__primary-left-icon-light "):"secondaryIcon"===props.buttonType?"light"===props.backgroundColor?"left"===props.imageAlignment&&(classNameList+=" button-type__secondary-left-icon-light "):"dark"===props.backgroundColor&&"left"===props.imageAlignment&&(classNameList+=" button-type__secondary-left-icon-dark "):"tertiary"===props.buttonType?classNameList+=" button-type__tertiary-light ":"tertiaryIcon"===props.buttonType?"left"===props.imageAlignment&&"light"===props.backgroundColor&&(classNameList+=" button-type__tertiary-left-icon-light "):"text"===props.buttonType?"light"===props.backgroundColor?"left"===props.imageAlignment?classNameList+=" button-type__text-left-icon-light ":"right"===props.imageAlignment?classNameList+=" button-type__text-right-icon-light ":classNameList+=" button-type__text-light ":"dark"===props.backgroundColor&&("left"===props.imageAlignment?classNameList+=" button-type__text-left-icon-dark ":"right"===props.imageAlignment?classNameList+=" button-type__text-right-icon-dark ":classNameList+=" button-type__text-dark "):"stacked"===props.buttonType?"light"===props.backgroundColor?classNameList+=" button-type__stacked-icon-light ":"dark"===props.backgroundColor&&(classNameList+=" button-type__stacked-icon-dark "):"icon"===props.buttonType?"light"===props.backgroundColor?classNameList+=" button-type__icon-light ":"dark"===props.backgroundColor&&(classNameList+=" button-type__icon-dark "):"inline"===props.buttonType?"right"===props.imageAlignment&&(classNameList+=" button-type__inline-right-icon-light "):"intext"===props.buttonType&&(classNameList+=" button-type__intext-light "),"left"===props.textAlignment?classNameList+=" button-text__left-align ":"center"===props.textAlignment&&(classNameList+=" button-text__center-align "),props.additionalClassnames&&(classNameList+=" ",classNameList+=props.additionalClassnames),classNameList.includes("button-type__intext-light")?react__WEBPACK_IMPORTED_MODULE_0__.createElement("a",{"aria-label":props.buttonTitle,className:classNameList,tabIndex:"0",onKeyUp:props.onKeyUp,onClick:props.onClick,disabled:props.disabled,style:{maxWidth:props.maxWidth},target:"_blank",rel:"noopener noreferrer",href:props.to},props.copy):classNameList.includes("left-icon")?react__WEBPACK_IMPORTED_MODULE_0__.createElement("button",{type:"button","aria-label":props.buttonTitle,className:classNameList,tabIndex:"0",onClick:props.onClick,disabled:props.disabled,style:{maxWidth:props.maxWidth}},props.image,props.copy):classNameList.includes("right-icon")?react__WEBPACK_IMPORTED_MODULE_0__.createElement("button",{type:"button","aria-label":props.buttonTitle,className:classNameList,tabIndex:"0",onClick:props.onClick,disabled:props.disabled,style:{maxWidth:props.maxWidth}},props.copy,props.image):classNameList.includes("stacked-icon")?react__WEBPACK_IMPORTED_MODULE_0__.createElement("button",{type:"button","aria-label":props.buttonTitle,className:classNameList,tabIndex:"0",onClick:props.onClick,disabled:props.disabled,style:{maxWidth:props.maxWidth}},react__WEBPACK_IMPORTED_MODULE_0__.createElement("div",{className:"stacked-button__only-image"},props.image),react__WEBPACK_IMPORTED_MODULE_0__.createElement("div",{className:"stacked-button__only-text"},props.copy)):classNameList.includes("icon-light")||classNameList.includes("icon-dark")?react__WEBPACK_IMPORTED_MODULE_0__.createElement("button",{type:"button","aria-label":props.buttonTitle,className:classNameList,tabIndex:"0",onClick:props.onClick,disabled:props.disabled,style:{maxWidth:props.maxWidth}},props.image):react__WEBPACK_IMPORTED_MODULE_0__.createElement("button",{type:"button","aria-label":props.buttonTitle,className:classNameList,tabIndex:"0",onClick:props.onClick,disabled:props.disabled,style:{maxWidth:props.maxWidth}},props.copy)};Button.propTypes=propTypes,__webpack_exports__.A=Button,Button.__docgenInfo={description:"",methods:[],displayName:"Button",props:{buttonSize:{description:"",type:{name:"enum",value:[{value:"'large'",computed:!1},{value:"'medium'",computed:!1},{value:"'small'",computed:!1},{value:"'lg'",computed:!1},{value:"'md'",computed:!1},{value:"'sm'",computed:!1}]},required:!0},backgroundColor:{description:"",type:{name:"enum",value:[{value:"'light'",computed:!1},{value:"'dark'",computed:!1}]},required:!0},buttonType:{description:"",type:{name:"enum",value:[{value:"'primary'",computed:!1},{value:"'primaryIcon'",computed:!1},{value:"'secondary'",computed:!1},{value:"'secondaryIcon'",computed:!1},{value:"'tertiary'",computed:!1},{value:"'tertiaryIcon'",computed:!1},{value:"'text'",computed:!1},{value:"'stacked'",computed:!1},{value:"'icon'",computed:!1},{value:"'inline'",computed:!1},{value:"'intext'",computed:!1}]},required:!0},copy:{description:"",type:{name:"string"},required:!0},image:{description:"",type:{name:"element"},required:!1},textAlignment:{description:"",type:{name:"enum",value:[{value:"'left'",computed:!1},{value:"'center'",computed:!1}]},required:!1},imageAlignment:{description:"",type:{name:"enum",value:[{value:"'left'",computed:!1},{value:"'right'",computed:!1}]},required:!1},additionalClassnames:{description:"",type:{name:"string"},required:!1},onClick:{description:"",type:{name:"func"},required:!1},onKeyUp:{description:"",type:{name:"func"},required:!1},buttonTitle:{description:"",type:{name:"string"},required:!0},disabled:{description:"",type:{name:"bool"},required:!1},maxWidth:{description:"",type:{name:"string"},required:!1},to:{description:"",type:{name:"string"},required:!1}}}},"./styles/components/_buttons.scss":function(__unused_webpack_module,__webpack_exports__,__webpack_require__){__webpack_require__.r(__webpack_exports__)}}]);