-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathDialog-Dialog-stories.7524e9b8.iframe.bundle.js
1 lines (1 loc) · 14.8 KB
/
Dialog-Dialog-stories.7524e9b8.iframe.bundle.js
1
"use strict";(self.webpackChunkcommon_components=self.webpackChunkcommon_components||[]).push([[6964],{"./node_modules/@react-aria/dialog/dist/import.mjs":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{s:()=>$40df3f8667284809$export$d55e7ee900f34e93});var _react_aria_utils__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./node_modules/@react-aria/utils/dist/import.mjs"),_react_aria_focus__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./node_modules/@react-aria/focus/dist/import.mjs"),react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("../epi-systems-frontend/node_modules/react/index.js"),_react_aria_overlays__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./node_modules/@react-aria/overlays/dist/import.mjs");function $40df3f8667284809$export$d55e7ee900f34e93(props,ref){let{role="dialog"}=props,titleId=(0,_react_aria_utils__WEBPACK_IMPORTED_MODULE_1__.X1)();titleId=props["aria-label"]?void 0:titleId;let isRefocusing=(0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(!1);return(0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)((()=>{if(ref.current&&!ref.current.contains(document.activeElement)){(0,_react_aria_focus__WEBPACK_IMPORTED_MODULE_2__.lY)(ref.current);let timeout=setTimeout((()=>{document.activeElement===ref.current&&(isRefocusing.current=!0,ref.current&&(ref.current.blur(),(0,_react_aria_focus__WEBPACK_IMPORTED_MODULE_2__.lY)(ref.current)),isRefocusing.current=!1)}),500);return()=>{clearTimeout(timeout)}}}),[ref]),(0,_react_aria_overlays__WEBPACK_IMPORTED_MODULE_3__.Se)(),{dialogProps:{...(0,_react_aria_utils__WEBPACK_IMPORTED_MODULE_1__.$X)(props,{labelable:!0}),role,tabIndex:-1,"aria-labelledby":props["aria-labelledby"]||titleId,onBlur:e=>{isRefocusing.current&&e.stopPropagation()}},titleProps:{id:titleId}}}},"./node_modules/@react-stately/utils/dist/import.mjs":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{PW:()=>$458b0a5536c1a7cf$export$40bfa8c7b0832715,qE:()=>$9446cca9a3875146$export$7d15b64cf5a3a4c4});var react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("../epi-systems-frontend/node_modules/react/index.js");function $458b0a5536c1a7cf$export$40bfa8c7b0832715(value,defaultValue,onChange){let[stateValue,setStateValue]=(0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(value||defaultValue),isControlledRef=(0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(void 0!==value),isControlled=void 0!==value;(0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)((()=>{let wasControlled=isControlledRef.current;wasControlled!==isControlled&&console.warn(`WARN: A component changed from ${wasControlled?"controlled":"uncontrolled"} to ${isControlled?"controlled":"uncontrolled"}.`),isControlledRef.current=isControlled}),[isControlled]);let currentValue=isControlled?value:stateValue,setValue=(0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(((value,...args)=>{let onChangeCaller=(value,...onChangeArgs)=>{onChange&&(Object.is(currentValue,value)||onChange(value,...onChangeArgs)),isControlled||(currentValue=value)};if("function"==typeof value){console.warn("We can not support a function callback. See Github Issues for details https://github.com/adobe/react-spectrum/issues/2320"),setStateValue(((oldValue,...functionArgs)=>{let interceptedValue=value(isControlled?currentValue:oldValue,...functionArgs);return onChangeCaller(interceptedValue,...args),isControlled?oldValue:interceptedValue}))}else isControlled||setStateValue(value),onChangeCaller(value,...args)}),[isControlled,currentValue,onChange]);return[currentValue,setValue]}function $9446cca9a3875146$export$7d15b64cf5a3a4c4(value,min=-1/0,max=1/0){return Math.min(Math.max(value,min),max)}},"./src/Components/Dialog/Dialog.stories.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Primary:()=>Primary,__namedExportsOrder:()=>__namedExportsOrder,default:()=>__WEBPACK_DEFAULT_EXPORT__});const __WEBPACK_DEFAULT_EXPORT__={title:"Example/Dialog",parameters:{docs:{description:{component:"A dialog consists of a container element and an optional title. It can be combined with [Modal](/docs/example-modal--docs) or Popover components, to create modal dialogs, popovers, and other types of overlays."}}},component:__webpack_require__("./src/Components/Dialog/index.js").A,tags:["autodocs"]},Primary={args:{title:"Dialog Component",children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."}};Primary.parameters={...Primary.parameters,docs:{...Primary.parameters?.docs,source:{originalSource:"{\n args: {\n title: 'Dialog Component',\n children: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.'\n }\n}",...Primary.parameters?.docs?.source}}};const __namedExportsOrder=["Primary"]},"./src/Components/Dialog/index.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{A:()=>Components_Dialog});var react=__webpack_require__("../epi-systems-frontend/node_modules/react/index.js"),dist_import=__webpack_require__("./node_modules/@react-aria/dialog/dist/import.mjs"),clsx=__webpack_require__("./node_modules/clsx/dist/clsx.mjs"),prop_types=__webpack_require__("./node_modules/prop-types/index.js"),prop_types_default=__webpack_require__.n(prop_types),injectStylesIntoStyleTag=__webpack_require__("./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js"),injectStylesIntoStyleTag_default=__webpack_require__.n(injectStylesIntoStyleTag),styleDomAPI=__webpack_require__("./node_modules/style-loader/dist/runtime/styleDomAPI.js"),styleDomAPI_default=__webpack_require__.n(styleDomAPI),insertBySelector=__webpack_require__("./node_modules/style-loader/dist/runtime/insertBySelector.js"),insertBySelector_default=__webpack_require__.n(insertBySelector),setAttributesWithoutAttributes=__webpack_require__("./node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js"),setAttributesWithoutAttributes_default=__webpack_require__.n(setAttributesWithoutAttributes),insertStyleElement=__webpack_require__("./node_modules/style-loader/dist/runtime/insertStyleElement.js"),insertStyleElement_default=__webpack_require__.n(insertStyleElement),styleTagTransform=__webpack_require__("./node_modules/style-loader/dist/runtime/styleTagTransform.js"),styleTagTransform_default=__webpack_require__.n(styleTagTransform),styles=__webpack_require__("./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/Components/Dialog/styles.scss"),options={};options.styleTagTransform=styleTagTransform_default(),options.setAttributes=setAttributesWithoutAttributes_default(),options.insert=insertBySelector_default().bind(null,"head"),options.domAPI=styleDomAPI_default(),options.insertStyleElement=insertStyleElement_default();injectStylesIntoStyleTag_default()(styles.A,options);styles.A&&styles.A.locals&&styles.A.locals;var jsx_runtime=__webpack_require__("../epi-systems-frontend/node_modules/react/jsx-runtime.js");const Dialog=({className,title,children,...props})=>{let ref=(0,react.useRef)(),{dialogProps,titleProps}=(0,dist_import.s)(props,ref);return(0,jsx_runtime.jsx)("div",{...dialogProps,ref,className:(0,clsx.A)(["CC-dialog",className]),children:(0,jsx_runtime.jsxs)("div",{className:"CC-dialog__container",children:[title&&(0,jsx_runtime.jsx)("h3",{...titleProps,children:title}),children]})})};Dialog.displayName="Dialog",Dialog.propTypes={title:prop_types_default().string,children:prop_types_default().oneOfType([prop_types_default().arrayOf(prop_types_default().node),prop_types_default().node,prop_types_default().string]).isRequired,className:prop_types_default().string},Dialog.defaultProps={title:null};const Components_Dialog=Dialog;Dialog.__docgenInfo={description:"",methods:[],displayName:"Dialog",props:{title:{defaultValue:{value:"null",computed:!1},description:"Title of the dialog rendered as an \\<h3\\> element",type:{name:"string"},required:!1},children:{description:"",type:{name:"union",value:[{name:"arrayOf",value:{name:"node"}},{name:"node"},{name:"string"}]},required:!0},className:{description:"",type:{name:"string"},required:!1}}}},"./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/Components/Dialog/styles.scss":(module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{A:()=>__WEBPACK_DEFAULT_EXPORT__});var _node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/css-loader/dist/runtime/sourceMaps.js"),_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default=__webpack_require__.n(_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__),_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./node_modules/css-loader/dist/runtime/api.js"),___CSS_LOADER_EXPORT___=__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__)()(_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default());___CSS_LOADER_EXPORT___.push([module.id,".CC-dialog{display:inline-block;overflow-y:auto}.CC-dialog h3{font-family:Roboto,sans-serif;font-weight:500;color:#286fa8;margin-top:0}.CC-dialog p{font-family:Roboto,sans-serif;font-weight:100;color:#000}.CC-dialog__container{padding:10px}","",{version:3,sources:["webpack://./src/Components/Dialog/styles.scss","webpack://./src/styles/mixins.scss","webpack://./src/styles/variables.scss"],names:[],mappings:"AAGA,WACE,oBAAA,CACA,eAAA,CAEA,cCOA,6BAAA,CACA,eAAA,CDNE,aEWW,CFVX,YAAA,CAGF,aCJA,6BAAA,CACA,eAAA,CDKE,UERU,CFWZ,sBACE,YAAA",sourcesContent:["@use '../../styles/variables';\n@use '../../styles/mixins';\n\n.CC-dialog {\n display: inline-block;\n overflow-y: auto;\n\n h3 {\n @include mixins.text-medium;\n color: variables.$color-blue-3;\n margin-top: 0;\n }\n\n p {\n @include mixins.text-thin;\n color: variables.$color-black;\n }\n\n &__container {\n padding: 10px;\n }\n}\n","@use './variables';\n// ************************* FONT FAMILIES *******************\n// done this way so that if fonts don't load the will still look somewhat okay\n@mixin text-regular {\n font-family: Roboto, sans-serif;\n font-weight: 400;\n}\n\n@mixin text-thin {\n font-family: Roboto, sans-serif;\n font-weight: 100;\n}\n\n@mixin text-medium {\n font-family: Roboto, sans-serif;\n font-weight: 500;\n}\n\n@mixin text-light {\n font-family: Roboto, sans-serif;\n font-weight: 300;\n}\n\n@mixin text-bold {\n font-family: Roboto, sans-serif;\n font-weight: 700;\n}\n\n@mixin text-no-results {\n @include text-regular();\n text-align: center;\n font-size: 1.2rem;\n color: variables.$color-gray-2;\n}\n\n@mixin fontawesome {\n display: inline-block;\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n text-rendering: auto;\n font-style: normal;\n font-weight: normal;\n font-stretch: normal;\n font-variant: normal;\n font-family: 'Font Awesome 5 Free', 'FontAwesome', sans-serif;\n line-height: 1;\n}\n\n// use this to de-ellipsis overflow an element\n@mixin ut-word-wrap {\n word-wrap: break-word;\n overflow-wrap: break-word;\n white-space: normal;\n}\n\n@mixin ut-nowrap {\n white-space: nowrap;\n}\n\n@mixin zebra {\n background: variables.$color-gray-5;\n}\n\n// ************************* MEDIA QUERIES *******************\n@mixin mq-phone {\n @media (min-width: 0 ) and (max-width: #{variables.$phone-width}) {\n @content;\n }\n}\n\n@mixin mq-tablet {\n @media (min-width: #{variables.$phone-width (+1)}) and (max-width: #{variables.$tablet-width}) {\n @content;\n }\n}\n\n@mixin mq-phone-and-tablet {\n @media (min-width: 0 ) and (max-width: #{variables.$tablet-width}) {\n @content;\n }\n}\n\n@mixin mq-desktop {\n @media (min-width: #{variables.$tablet-width + 1}) {\n @content;\n }\n}\n\n// ************************* UTILITY MIXINS *******************\n@mixin ut-only-sr {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n}\n","// ********************* PATHS *********************\n$path-img: '/src/assets/images/';\n\n// ********************* COLORS *********************\n// lowest = darkest hue\n\n$color-white: #ffffff;\n$color-black: #000000;\n\n// Grays\n$color-gray-1: #333333; // Standard text color & color for all disabled text\n$color-gray-2: #767676; // Lightest allowable text; input placeholder text and helper text.\n$color-gray-3: #c4c4c4; // Form borders\n$color-gray-4: #ebebeb; // Disabled elements backgrounds\n$color-gray-5: #f6f7fb; // Page background & table zebra stripes\n$color-gray-6: #e0e6f2; // Alternative lighter color.\n\n// Blues\n$color-blue-1: #101168; // Darkerst blue\n$color-blue-2: #215295; // medium blue\n$color-blue-3: #286fa8; // lighest blue for header, footer, most headers, buttons, and links in text.\n\n// Other colors\n$color-red: #c7270f; // color for warnings, errors, or message notifications\n$color-green: #039d12; // color for finished / affirmative messages\n$color-yellow-1: #f1b33c; // active/rollover buttons or highlight location\n$color-yellow-2: #f6f0ea; // Highlight for selected rows in tables (accounting & ERVs pages)\n$color-yellow-3: #fae0aa; // tooltip bg color\n\n// the BG used for all modal overlays and the like\n$color-bg-modal: rgba(0, 0, 0, 0.75);\n\n// color for 508 focus around elements\n$color-focus: pink; // undecided. TODO: pick a color\n\n$color-divider: rgba(255, 255, 255, 0.25); //the semi-translucent dividers used in header & footer\n\n// ********************* BOX SHADOWS *********************\n$box-shadow-color-focus: 0px 0px 5px $color-focus;\n\n// ********************* BORDER RADIUS *********************\n$border-radius: 4px;\n$border-radius-forms: 0px;\n\n// ********************* STANDARD MARGINS *********************\n\n$margin-horz-desktop: 32px;\n$margin-horz-phone: 12px;\n\n$margin-vert-desktop: 24px;\n$margin-vert-phone: 12px;\n\n// ********************* VIEWPORTS FOR MEDIA QUERIES *********************\n$phone-width: 480px;\n$tablet-width: 768px;\n$desktop-width: 1024px;\n$giant-desktop-width: 1600px;\n\n// ********************* FONTS *********************\n$text-thin: 'roboto-thin', Roboto, sans-serif;\n$text-light: 'roboto-light', Roboto, sans-serif;\n$text-regular: 'roboto-regular', Roboto, sans-serif;\n$text-medium: 'roboto-medium', Roboto, sans-serif;\n$text-bold: 'roboto-bold', Roboto, sans-serif;\n\n// ********************* FORM ELEMENTS *********************\n$height-form-elements: 22px;\n"],sourceRoot:""}]);const __WEBPACK_DEFAULT_EXPORT__=___CSS_LOADER_EXPORT___}}]);