sag_components 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.babelrc.json +15 -0
- package/.storybook/YourTheme.js +11 -0
- package/.storybook/main.js +30 -0
- package/.storybook/manager.js +8 -0
- package/.storybook/preview.js +14 -0
- package/.storybook/webpack.config.js +16 -0
- package/README.md +85 -0
- package/azure-pipelines.yml +50 -0
- package/babel.config.js +10 -0
- package/build/favicon.ico +0 -0
- package/build/manifest.json +25 -0
- package/build/robots.txt +3 -0
- package/dist/Dropdown.js +237 -0
- package/dist/OneColumnContainer.js +44 -0
- package/package.json +66 -0
- package/public/favicon.ico +0 -0
- package/public/index.html +52 -0
- package/public/manifest.json +25 -0
- package/public/robots.txt +3 -0
- package/src/App.css +7 -0
- package/src/App.js +55 -0
- package/src/App.test.js +8 -0
- package/src/index.css +13 -0
- package/src/index.js +22 -0
- package/src/logo.svg +1 -0
- package/src/stories/ButtonText.jsx +28 -0
- package/src/stories/ButtonText.stories.js +65 -0
- package/src/stories/ButtonText.style.js +9 -0
- package/src/stories/Dropdown.stories.jsx +238 -0
- package/src/stories/Dropdown.style.js +9 -0
- package/src/stories/InfoIcon.jsx +5 -0
- package/src/stories/Introduction.mdx +119 -0
- package/src/stories/OneColumnContainer.stories.js +20 -0
- package/src/stories/OneColumnContainer.style.js +41 -0
- package/src/stories/assets/code-brackets.svg +1 -0
- package/src/stories/assets/colors.svg +1 -0
- package/src/stories/assets/comments.svg +1 -0
- package/src/stories/assets/direction.svg +1 -0
- package/src/stories/assets/flow.svg +1 -0
- package/src/stories/assets/info.svg +1 -0
- package/src/stories/assets/plugin.svg +1 -0
- package/src/stories/assets/repo.svg +1 -0
- package/src/stories/assets/stackalt.svg +1 -0
- package/src/stories/components/Dropdown.jsx +249 -0
- package/src/stories/components/OneColumnContainer.jsx +33 -0
- package/storybook-static/256.47510a7e.iframe.bundle.js +2 -0
- package/storybook-static/256.47510a7e.iframe.bundle.js.LICENSE.txt +9 -0
- package/storybook-static/333.c94a363a.iframe.bundle.js +1 -0
- package/storybook-static/383.2aff9f43.iframe.bundle.js +1 -0
- package/storybook-static/385.7e265f0d.iframe.bundle.js +402 -0
- package/storybook-static/385.7e265f0d.iframe.bundle.js.LICENSE.txt +53 -0
- package/storybook-static/385.7e265f0d.iframe.bundle.js.map +1 -0
- package/storybook-static/433.06d7c436.iframe.bundle.js +1 -0
- package/storybook-static/446.dd9a0d77.iframe.bundle.js +1 -0
- package/storybook-static/463.60fe9b8e.iframe.bundle.js +44 -0
- package/storybook-static/463.60fe9b8e.iframe.bundle.js.map +1 -0
- package/storybook-static/537.29807a20.iframe.bundle.js +121 -0
- package/storybook-static/537.29807a20.iframe.bundle.js.map +1 -0
- package/storybook-static/55.d0744d52.iframe.bundle.js +76 -0
- package/storybook-static/55.d0744d52.iframe.bundle.js.LICENSE.txt +26 -0
- package/storybook-static/55.d0744d52.iframe.bundle.js.map +1 -0
- package/storybook-static/58.676f9d84.iframe.bundle.js +1 -0
- package/storybook-static/661.14a42934.iframe.bundle.js +1 -0
- package/storybook-static/720.f79ea110.iframe.bundle.js +1 -0
- package/storybook-static/923.47c94418.iframe.bundle.js +1 -0
- package/storybook-static/ButtonText-stories.ac096281.iframe.bundle.js +1 -0
- package/storybook-static/Dropdown-stories.825dde1a.iframe.bundle.js +8 -0
- package/storybook-static/Dropdown-stories.825dde1a.iframe.bundle.js.map +1 -0
- package/storybook-static/Introduction-mdx.f8264230.iframe.bundle.js +2 -0
- package/storybook-static/Introduction-mdx.f8264230.iframe.bundle.js.LICENSE.txt +9 -0
- package/storybook-static/OneColumnContainer-stories.65049871.iframe.bundle.js +36 -0
- package/storybook-static/OneColumnContainer-stories.65049871.iframe.bundle.js.LICENSE.txt +18 -0
- package/storybook-static/OneColumnContainer-stories.65049871.iframe.bundle.js.map +1 -0
- package/storybook-static/favicon.svg +7 -0
- package/storybook-static/iframe.html +355 -0
- package/storybook-static/index.html +138 -0
- package/storybook-static/index.json +1 -0
- package/storybook-static/main.612c6447.iframe.bundle.js +1 -0
- package/storybook-static/project.json +1 -0
- package/storybook-static/runtime~main.55585f00.iframe.bundle.js +1 -0
- package/storybook-static/sb-addons/essentials-actions-2/manager-bundle.js +4 -0
- package/storybook-static/sb-addons/essentials-actions-2/manager-bundle.js.LEGAL.txt +0 -0
- package/storybook-static/sb-addons/essentials-actions-2/manager-bundle.js.map +7 -0
- package/storybook-static/sb-addons/essentials-backgrounds-3/manager-bundle.js +13 -0
- package/storybook-static/sb-addons/essentials-backgrounds-3/manager-bundle.js.LEGAL.txt +0 -0
- package/storybook-static/sb-addons/essentials-backgrounds-3/manager-bundle.js.map +7 -0
- package/storybook-static/sb-addons/essentials-controls-1/manager-bundle.js +117 -0
- package/storybook-static/sb-addons/essentials-controls-1/manager-bundle.js.LEGAL.txt +18 -0
- package/storybook-static/sb-addons/essentials-controls-1/manager-bundle.js.map +7 -0
- package/storybook-static/sb-addons/essentials-measure-6/manager-bundle.js +4 -0
- package/storybook-static/sb-addons/essentials-measure-6/manager-bundle.js.LEGAL.txt +0 -0
- package/storybook-static/sb-addons/essentials-measure-6/manager-bundle.js.map +7 -0
- package/storybook-static/sb-addons/essentials-outline-7/manager-bundle.js +4 -0
- package/storybook-static/sb-addons/essentials-outline-7/manager-bundle.js.LEGAL.txt +0 -0
- package/storybook-static/sb-addons/essentials-outline-7/manager-bundle.js.map +7 -0
- package/storybook-static/sb-addons/essentials-toolbars-5/manager-bundle.js +4 -0
- package/storybook-static/sb-addons/essentials-toolbars-5/manager-bundle.js.LEGAL.txt +0 -0
- package/storybook-static/sb-addons/essentials-toolbars-5/manager-bundle.js.map +7 -0
- package/storybook-static/sb-addons/essentials-viewport-4/manager-bundle.js +4 -0
- package/storybook-static/sb-addons/essentials-viewport-4/manager-bundle.js.LEGAL.txt +0 -0
- package/storybook-static/sb-addons/essentials-viewport-4/manager-bundle.js.map +7 -0
- package/storybook-static/sb-addons/interactions-8/manager-bundle.js +31 -0
- package/storybook-static/sb-addons/interactions-8/manager-bundle.js.LEGAL.txt +18 -0
- package/storybook-static/sb-addons/interactions-8/manager-bundle.js.map +7 -0
- package/storybook-static/sb-addons/links-0/manager-bundle.js +4 -0
- package/storybook-static/sb-addons/links-0/manager-bundle.js.LEGAL.txt +0 -0
- package/storybook-static/sb-addons/links-0/manager-bundle.js.map +7 -0
- package/storybook-static/sb-addons/storybook-10/manager-bundle.js +4 -0
- package/storybook-static/sb-addons/storybook-10/manager-bundle.js.LEGAL.txt +0 -0
- package/storybook-static/sb-addons/storybook-10/manager-bundle.js.map +7 -0
- package/storybook-static/sb-addons/storysource-9/manager-bundle.js +23 -0
- package/storybook-static/sb-addons/storysource-9/manager-bundle.js.LEGAL.txt +14 -0
- package/storybook-static/sb-addons/storysource-9/manager-bundle.js.map +7 -0
- package/storybook-static/sb-common-assets/fonts.css +31 -0
- package/storybook-static/sb-common-assets/nunito-sans-bold-italic.woff2 +0 -0
- package/storybook-static/sb-common-assets/nunito-sans-bold.woff2 +0 -0
- package/storybook-static/sb-common-assets/nunito-sans-italic.woff2 +0 -0
- package/storybook-static/sb-common-assets/nunito-sans-regular.woff2 +0 -0
- package/storybook-static/sb-manager/GlobalScrollAreaStyles-XIHNDKUY-F4JIPIHL.js +1 -0
- package/storybook-static/sb-manager/OverlayScrollbars-VAV6LJAB-K3TMPSMY.js +6 -0
- package/storybook-static/sb-manager/WithTooltip-FBT32F6Q-7QJ37TCY.js +1 -0
- package/storybook-static/sb-manager/chunk-3FAXWWKG.js +15 -0
- package/storybook-static/sb-manager/chunk-54KM6K5Z.js +7 -0
- package/storybook-static/sb-manager/chunk-AS2AMEUR.js +1 -0
- package/storybook-static/sb-manager/chunk-F3MVQVF6.js +207 -0
- package/storybook-static/sb-manager/chunk-FENICTK6.js +1 -0
- package/storybook-static/sb-manager/chunk-GQDEE62S.js +406 -0
- package/storybook-static/sb-manager/chunk-PUVLCKJJ.js +140 -0
- package/storybook-static/sb-manager/chunk-QPL63VNK.js +1 -0
- package/storybook-static/sb-manager/formatter-S4K5WUZV-4LPR5OBX.js +156 -0
- package/storybook-static/sb-manager/globals.js +1 -0
- package/storybook-static/sb-manager/index.js +1 -0
- package/storybook-static/sb-manager/runtime.js +1 -0
- package/storybook-static/sb-manager/syntaxhighlighter-QTQ2UBB4-F5YUFYAB.js +1 -0
- package/storybook-static/sb-preview/globals.js +1 -0
- package/storybook-static/sb-preview/runtime.js +105 -0
- package/storybook-static/static/media/code-brackets.2e1112d7.svg +1 -0
- package/storybook-static/static/media/colors.a4bd0486.svg +1 -0
- package/storybook-static/static/media/comments.a3859089.svg +1 -0
- package/storybook-static/static/media/direction.b770f9af.svg +1 -0
- package/storybook-static/static/media/flow.edad2ac1.svg +1 -0
- package/storybook-static/static/media/plugin.d494b228.svg +1 -0
- package/storybook-static/static/media/repo.6d496322.svg +1 -0
- package/storybook-static/static/media/stackalt.dba9fbb3.svg +1 -0
- package/storybook-static/stories.json +1 -0
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
"use strict";(self.webpackChunksag_storybook=self.webpackChunksag_storybook||[]).push([[935],{"./src/stories/Dropdown.stories.jsx":function(__unused_webpack_module,__webpack_exports__,__webpack_require__){__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{LargeRoundWithoutIcons:function(){return LargeRoundWithoutIcons},LargeSquareWithIcons:function(){return LargeSquareWithIcons},MultiSelectLarge:function(){return MultiSelectLarge},MultiSelectSmall:function(){return MultiSelectSmall},MultiSelectWithIcons:function(){return MultiSelectWithIcons},SearchIcon:function(){return SearchIcon},SmallRound:function(){return SmallRound},SmallSquare:function(){return SmallSquare},UpDownArrowIcon:function(){return UpDownArrowIcon},__namedExportsOrder:function(){return __namedExportsOrder},default:function(){return Dropdown_stories}});var react=__webpack_require__("./node_modules/react/index.js");const DropdownContainer=__webpack_require__("./node_modules/styled-components/dist/styled-components.browser.esm.js").ZP.div`
|
|
2
|
+
width: ${props=>props.width};
|
|
3
|
+
text-align: left;
|
|
4
|
+
position: relative;
|
|
5
|
+
align-items: center;
|
|
6
|
+
justify-content: center;
|
|
7
|
+
`;var Autocomplete=__webpack_require__("./node_modules/@mui/material/Autocomplete/Autocomplete.js"),TextField=__webpack_require__("./node_modules/@mui/material/TextField/TextField.js"),Checkbox=__webpack_require__("./node_modules/@mui/material/Checkbox/Checkbox.js"),InputAdornment=__webpack_require__("./node_modules/@mui/material/InputAdornment/InputAdornment.js"),CheckBoxOutlineBlank=__webpack_require__("./node_modules/@mui/icons-material/CheckBoxOutlineBlank.js"),CheckBox=__webpack_require__("./node_modules/@mui/icons-material/CheckBox.js"),Search=__webpack_require__("./node_modules/@mui/icons-material/Search.js"),ArrowDropDown=__webpack_require__("./node_modules/@mui/icons-material/ArrowDropDown.js"),jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js");const icon=(0,jsx_runtime.jsx)(CheckBoxOutlineBlank.Z,{fontSize:"small"}),checkedIcon=(0,jsx_runtime.jsx)(CheckBox.Z,{fontSize:"small"}),Dropdown=({width:width,size:size,text:text,shape:shape,placeHolder:placeHolder,multiSelect:multiSelect,limitTagsOnMultiSelect:limitTagsOnMultiSelect,showPopupIcon:showPopupIcon,showSearchIcon:showSearchIcon,options:options,onChange:onChange,onInputChange:onInputChange})=>{const[currentInputValue,setCurrentInputValue]=(0,react.useState)(null),[currentOption,setCurrentOption]=(0,react.useState)(null);(0,react.useEffect)((()=>{const delayDebounceFn=setTimeout((()=>{onInputChange(currentInputValue)}),1e3);return()=>clearTimeout(delayDebounceFn)}),[currentInputValue]);const getTextFieldStyle=()=>"round"===shape?{"& .MuiOutlinedInput-root":{borderRadius:"50px",legend:{marginLeft:"30px"}},"& .MuiAutocomplete-inputRoot":{paddingLeft:"20px !important",borderRadius:"50px"},"& .MuiInputLabel-outlined":{paddingLeft:"20px"},"& .MuiInputLabel-shrink":{marginLeft:"20px",paddingLeft:"10px",paddingRight:0,background:"white"}}:null,onInputChangeHandler=(event,newInputValue)=>{setCurrentInputValue({syntheticBaseEvent:event,inputValue:newInputValue})},onChangeHandler=(event,newValue)=>{setCurrentOption(newValue),onChange(event,newValue)};return(0,jsx_runtime.jsx)(DropdownContainer,{width:width,children:multiSelect?(0,jsx_runtime.jsx)(Autocomplete.Z,{onChange:(event,newValue)=>{onChangeHandler(event,newValue)},onInputChange:(event,newInputValue)=>{onInputChangeHandler(event,newInputValue)},multiple:!0,limitTags:limitTagsOnMultiSelect,size:size,id:"checkboxes-tags",options:options,disableCloseOnSelect:!0,getOptionLabel:option=>option.label,popupIcon:showPopupIcon?(0,jsx_runtime.jsx)(ArrowDropDown.Z,{}):null,renderOption:(props,option,{selected:selected})=>(0,jsx_runtime.jsxs)("li",{...props,children:[(0,jsx_runtime.jsx)(Checkbox.Z,{icon:icon,checkedIcon:checkedIcon,style:{marginRight:8},checked:selected}),option.label]}),style:{width:width},renderInput:params=>showSearchIcon&&(!currentOption||currentOption&&0===currentOption.length)?(0,jsx_runtime.jsx)(TextField.Z,{...params,label:text,size:size,sx:getTextFieldStyle(),placeholder:placeHolder,InputProps:{...params.InputProps,startAdornment:(0,jsx_runtime.jsx)(InputAdornment.Z,{position:"start",children:(0,jsx_runtime.jsx)(Search.Z,{fontSize:"medium"})})}}):(0,jsx_runtime.jsx)(TextField.Z,{...params,label:text,size:size,sx:getTextFieldStyle(),placeholder:placeHolder})}):(0,jsx_runtime.jsx)(Autocomplete.Z,{onChange:(event,newValue)=>{onChangeHandler(event,newValue)},onInputChange:(event,newInputValue)=>{onInputChangeHandler(event,newInputValue)},disablePortal:!0,id:"combo-box",options:options,sx:{width:width},popupIcon:showPopupIcon?(0,jsx_runtime.jsx)(ArrowDropDown.Z,{}):null,forcePopupIcon:"auto",renderInput:params=>(0,jsx_runtime.jsx)(TextField.Z,{...params,label:text,size:size,sx:getTextFieldStyle(),placeholder:placeHolder,InputProps:{...params.InputProps,startAdornment:showSearchIcon?(0,jsx_runtime.jsx)(InputAdornment.Z,{position:"start",children:(0,jsx_runtime.jsx)(Search.Z,{fontSize:"medium"})}):null}})})})};Dropdown.displayName="Dropdown";const options=[{id:0,label:"Shufersal"},{id:1,label:"EPC"},{id:2,label:"Food Lion"},{id:3,label:"Hannaford"},{id:4,label:"Giant Food"},{id:5,label:"The Giant Company"},{id:6,label:"Stop&Shop"},{id:7,label:"Price Chopper"},{id:8,label:"South Eastern Grocers"}];var Dropdown_stories={parameters:{storySource:{source:'import React from "react";\nimport { Dropdown } from "./Dropdown";\nconst options = [{\n id: 0,\n label: "Shufersal"\n}, {\n id: 1,\n label: "EPC"\n}, {\n id: 2,\n label: "Food Lion"\n}, {\n id: 3,\n label: "Hannaford"\n}, {\n id: 4,\n label: "Giant Food"\n}, {\n id: 5,\n label: "The Giant Company"\n}, {\n id: 6,\n label: "Stop&Shop"\n}, {\n id: 7,\n label: "Price Chopper"\n}, {\n id: 8,\n label: "South Eastern Grocers"\n}];\n\n// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction\nexport default {\n title: "SAG BI/Dropdown",\n component: Dropdown,\n tags: ["autodocs"],\n argTypes: {\n width: {\n control: {\n type: "number"\n },\n description: "width of the input field",\n defaultValue: 300\n },\n size: {\n control: {\n type: "radio"\n },\n options: ["small", "large"],\n description: "size: small/large"\n },\n text: {\n name: "text",\n control: {\n type: "text"\n },\n description: "text inside of the input field",\n defaultValue: \'Search...\'\n },\n placeHolder: {\n name: "placeHolder",\n control: {\n type: "text"\n },\n description: "notify the user how to type a text",\n defaultValue: "Type..."\n },\n multiSelect: {\n name: "multiSelect",\n // control: { type: "boolean", \n // },\n control: false,\n description: "true/false - allows multi select - (switch multiSelect / singleSelect is disabled in this story)"\n },\n limitTagsOnMultiSelect: {\n name: "limitTagsOnMultiSelect",\n control: {\n type: "number"\n },\n description: "limit noumber displayed tags on multi select when not focused"\n },\n options: {\n description: "array [] of objects: {id: string1 , label: string2 } to fill dropdown options "\n },\n shape: {\n control: {\n type: "radio"\n },\n options: ["round", "square"],\n description: "shape: round/square"\n },\n showPopupIcon: {\n name: "showPopupIcon",\n control: {\n type: "boolean"\n },\n description: "show/hide popup (up/down arrow) icon"\n },\n showSearchIcon: {\n name: "showSearchIcon",\n control: {\n type: "boolean"\n },\n description: "show/hide search icon "\n },\n onChange: {\n action: "onChange",\n description: "returns an option (object) selected by the user"\n },\n onInputChange: {\n action: "onInputChange",\n description: "returns a value (string) displayed in the textbox"\n }\n }\n};\nconst Template = args => <Dropdown {...args} />;\nexport const SmallSquare = Template.bind({});\nSmallSquare.args = {\n width: 300,\n size: "small",\n text: "Retailer",\n multiSelect: false,\n limitTagsOnMultiSelect: 0,\n placeHolder: "Type...",\n shape: "square",\n showPopupIcon: false,\n showSearchIcon: false,\n options: options\n};\nexport const SmallRound = Template.bind({});\nSmallRound.args = {\n width: 300,\n size: "small",\n text: "Retailer",\n multiSelect: false,\n limitTagsOnMultiSelect: 0,\n placeHolder: "Type...",\n shape: "round",\n showPopupIcon: false,\n showSearchIcon: false,\n options: options\n};\nexport const UpDownArrowIcon = Template.bind({});\nUpDownArrowIcon.args = {\n width: 300,\n size: "small",\n text: "Retailer",\n multiSelect: false,\n limitTagsOnMultiSelect: 0,\n placeHolder: "Type...",\n shape: "round",\n showPopupIcon: true,\n showSearchIcon: false,\n options: options\n};\nexport const SearchIcon = Template.bind({});\nSearchIcon.args = {\n width: 300,\n size: "small",\n text: "Retailer",\n multiSelect: false,\n limitTagsOnMultiSelect: 0,\n placeHolder: "Type...",\n shape: "round",\n showPopupIcon: false,\n showSearchIcon: true,\n options: options\n};\nexport const MultiSelectSmall = Template.bind({});\nMultiSelectSmall.args = {\n width: 400,\n size: "small",\n text: "Retailer",\n multiSelect: true,\n limitTagsOnMultiSelect: 2,\n placeHolder: "Type...",\n shape: "square",\n showPopupIcon: false,\n showSearchIcon: false,\n options: options\n};\nexport const MultiSelectLarge = Template.bind({});\nMultiSelectLarge.args = {\n width: 500,\n size: "large",\n text: "Retailer",\n multiSelect: true,\n limitTagsOnMultiSelect: 2,\n placeHolder: "Type...",\n shape: "round",\n showPopupIcon: false,\n showSearchIcon: false,\n options: options\n};\nexport const MultiSelectWithIcons = Template.bind({});\nMultiSelectWithIcons.args = {\n width: 500,\n size: "large",\n text: "Retailer",\n multiSelect: true,\n limitTagsOnMultiSelect: 2,\n placeHolder: "Type...",\n shape: "square",\n showPopupIcon: true,\n showSearchIcon: true,\n options: options\n};\nexport const LargeRoundWithoutIcons = Template.bind({});\nLargeRoundWithoutIcons.args = {\n width: 400,\n size: "large",\n text: "Retailer",\n multiSelect: false,\n limitTagsOnMultiSelect: 0,\n placeHolder: "Type part of name...",\n shape: "round",\n showPopupIcon: false,\n showSearchIcon: false,\n options: options\n};\nexport const LargeSquareWithIcons = Template.bind({});\nLargeSquareWithIcons.args = {\n width: 400,\n size: "large",\n text: "Retailer",\n multiSelect: false,\n limitTagsOnMultiSelect: 0,\n placeHolder: "Type part of name...",\n shape: "square",\n showPopupIcon: true,\n showSearchIcon: true,\n options: options\n};\nSmallSquare.parameters = {\n ...SmallSquare.parameters,\n docs: {\n ...SmallSquare.parameters?.docs,\n source: {\n originalSource: "args => <Dropdown {...args} />",\n ...SmallSquare.parameters?.docs?.source\n }\n }\n};\nSmallRound.parameters = {\n ...SmallRound.parameters,\n docs: {\n ...SmallRound.parameters?.docs,\n source: {\n originalSource: "args => <Dropdown {...args} />",\n ...SmallRound.parameters?.docs?.source\n }\n }\n};\nUpDownArrowIcon.parameters = {\n ...UpDownArrowIcon.parameters,\n docs: {\n ...UpDownArrowIcon.parameters?.docs,\n source: {\n originalSource: "args => <Dropdown {...args} />",\n ...UpDownArrowIcon.parameters?.docs?.source\n }\n }\n};\nSearchIcon.parameters = {\n ...SearchIcon.parameters,\n docs: {\n ...SearchIcon.parameters?.docs,\n source: {\n originalSource: "args => <Dropdown {...args} />",\n ...SearchIcon.parameters?.docs?.source\n }\n }\n};\nMultiSelectSmall.parameters = {\n ...MultiSelectSmall.parameters,\n docs: {\n ...MultiSelectSmall.parameters?.docs,\n source: {\n originalSource: "args => <Dropdown {...args} />",\n ...MultiSelectSmall.parameters?.docs?.source\n }\n }\n};\nMultiSelectLarge.parameters = {\n ...MultiSelectLarge.parameters,\n docs: {\n ...MultiSelectLarge.parameters?.docs,\n source: {\n originalSource: "args => <Dropdown {...args} />",\n ...MultiSelectLarge.parameters?.docs?.source\n }\n }\n};\nMultiSelectWithIcons.parameters = {\n ...MultiSelectWithIcons.parameters,\n docs: {\n ...MultiSelectWithIcons.parameters?.docs,\n source: {\n originalSource: "args => <Dropdown {...args} />",\n ...MultiSelectWithIcons.parameters?.docs?.source\n }\n }\n};\nLargeRoundWithoutIcons.parameters = {\n ...LargeRoundWithoutIcons.parameters,\n docs: {\n ...LargeRoundWithoutIcons.parameters?.docs,\n source: {\n originalSource: "args => <Dropdown {...args} />",\n ...LargeRoundWithoutIcons.parameters?.docs?.source\n }\n }\n};\nLargeSquareWithIcons.parameters = {\n ...LargeSquareWithIcons.parameters,\n docs: {\n ...LargeSquareWithIcons.parameters?.docs,\n source: {\n originalSource: "args => <Dropdown {...args} />",\n ...LargeSquareWithIcons.parameters?.docs?.source\n }\n }\n};',locationsMap:{"small-square":{startLoc:{col:17,line:116},endLoc:{col:47,line:116},startBody:{col:17,line:116},endBody:{col:47,line:116}},"small-round":{startLoc:{col:17,line:116},endLoc:{col:47,line:116},startBody:{col:17,line:116},endBody:{col:47,line:116}},"up-down-arrow-icon":{startLoc:{col:17,line:116},endLoc:{col:47,line:116},startBody:{col:17,line:116},endBody:{col:47,line:116}},"search-icon":{startLoc:{col:17,line:116},endLoc:{col:47,line:116},startBody:{col:17,line:116},endBody:{col:47,line:116}},"multi-select-small":{startLoc:{col:17,line:116},endLoc:{col:47,line:116},startBody:{col:17,line:116},endBody:{col:47,line:116}},"multi-select-large":{startLoc:{col:17,line:116},endLoc:{col:47,line:116},startBody:{col:17,line:116},endBody:{col:47,line:116}},"multi-select-with-icons":{startLoc:{col:17,line:116},endLoc:{col:47,line:116},startBody:{col:17,line:116},endBody:{col:47,line:116}},"large-round-without-icons":{startLoc:{col:17,line:116},endLoc:{col:47,line:116},startBody:{col:17,line:116},endBody:{col:47,line:116}},"large-square-with-icons":{startLoc:{col:17,line:116},endLoc:{col:47,line:116},startBody:{col:17,line:116},endBody:{col:47,line:116}}}}},title:"SAG BI/Dropdown",component:Dropdown,tags:["autodocs"],argTypes:{width:{control:{type:"number"},description:"width of the input field",defaultValue:300},size:{control:{type:"radio"},options:["small","large"],description:"size: small/large"},text:{name:"text",control:{type:"text"},description:"text inside of the input field",defaultValue:"Search..."},placeHolder:{name:"placeHolder",control:{type:"text"},description:"notify the user how to type a text",defaultValue:"Type..."},multiSelect:{name:"multiSelect",control:!1,description:"true/false - allows multi select - (switch multiSelect / singleSelect is disabled in this story)"},limitTagsOnMultiSelect:{name:"limitTagsOnMultiSelect",control:{type:"number"},description:"limit noumber displayed tags on multi select when not focused"},options:{description:"array [] of objects: {id: string1 , label: string2 } to fill dropdown options "},shape:{control:{type:"radio"},options:["round","square"],description:"shape: round/square"},showPopupIcon:{name:"showPopupIcon",control:{type:"boolean"},description:"show/hide popup (up/down arrow) icon"},showSearchIcon:{name:"showSearchIcon",control:{type:"boolean"},description:"show/hide search icon "},onChange:{action:"onChange",description:"returns an option (object) selected by the user"},onInputChange:{action:"onInputChange",description:"returns a value (string) displayed in the textbox"}}};const Template=args=>(0,jsx_runtime.jsx)(Dropdown,{...args});Template.displayName="Template";const SmallSquare=Template.bind({});SmallSquare.args={width:300,size:"small",text:"Retailer",multiSelect:!1,limitTagsOnMultiSelect:0,placeHolder:"Type...",shape:"square",showPopupIcon:!1,showSearchIcon:!1,options:options};const SmallRound=Template.bind({});SmallRound.args={width:300,size:"small",text:"Retailer",multiSelect:!1,limitTagsOnMultiSelect:0,placeHolder:"Type...",shape:"round",showPopupIcon:!1,showSearchIcon:!1,options:options};const UpDownArrowIcon=Template.bind({});UpDownArrowIcon.args={width:300,size:"small",text:"Retailer",multiSelect:!1,limitTagsOnMultiSelect:0,placeHolder:"Type...",shape:"round",showPopupIcon:!0,showSearchIcon:!1,options:options};const SearchIcon=Template.bind({});SearchIcon.args={width:300,size:"small",text:"Retailer",multiSelect:!1,limitTagsOnMultiSelect:0,placeHolder:"Type...",shape:"round",showPopupIcon:!1,showSearchIcon:!0,options:options};const MultiSelectSmall=Template.bind({});MultiSelectSmall.args={width:400,size:"small",text:"Retailer",multiSelect:!0,limitTagsOnMultiSelect:2,placeHolder:"Type...",shape:"square",showPopupIcon:!1,showSearchIcon:!1,options:options};const MultiSelectLarge=Template.bind({});MultiSelectLarge.args={width:500,size:"large",text:"Retailer",multiSelect:!0,limitTagsOnMultiSelect:2,placeHolder:"Type...",shape:"round",showPopupIcon:!1,showSearchIcon:!1,options:options};const MultiSelectWithIcons=Template.bind({});MultiSelectWithIcons.args={width:500,size:"large",text:"Retailer",multiSelect:!0,limitTagsOnMultiSelect:2,placeHolder:"Type...",shape:"square",showPopupIcon:!0,showSearchIcon:!0,options:options};const LargeRoundWithoutIcons=Template.bind({});LargeRoundWithoutIcons.args={width:400,size:"large",text:"Retailer",multiSelect:!1,limitTagsOnMultiSelect:0,placeHolder:"Type part of name...",shape:"round",showPopupIcon:!1,showSearchIcon:!1,options:options};const LargeSquareWithIcons=Template.bind({});LargeSquareWithIcons.args={width:400,size:"large",text:"Retailer",multiSelect:!1,limitTagsOnMultiSelect:0,placeHolder:"Type part of name...",shape:"square",showPopupIcon:!0,showSearchIcon:!0,options:options},SmallSquare.parameters={...SmallSquare.parameters,docs:{...SmallSquare.parameters?.docs,source:{originalSource:"args => <Dropdown {...args} />",...SmallSquare.parameters?.docs?.source}}},SmallRound.parameters={...SmallRound.parameters,docs:{...SmallRound.parameters?.docs,source:{originalSource:"args => <Dropdown {...args} />",...SmallRound.parameters?.docs?.source}}},UpDownArrowIcon.parameters={...UpDownArrowIcon.parameters,docs:{...UpDownArrowIcon.parameters?.docs,source:{originalSource:"args => <Dropdown {...args} />",...UpDownArrowIcon.parameters?.docs?.source}}},SearchIcon.parameters={...SearchIcon.parameters,docs:{...SearchIcon.parameters?.docs,source:{originalSource:"args => <Dropdown {...args} />",...SearchIcon.parameters?.docs?.source}}},MultiSelectSmall.parameters={...MultiSelectSmall.parameters,docs:{...MultiSelectSmall.parameters?.docs,source:{originalSource:"args => <Dropdown {...args} />",...MultiSelectSmall.parameters?.docs?.source}}},MultiSelectLarge.parameters={...MultiSelectLarge.parameters,docs:{...MultiSelectLarge.parameters?.docs,source:{originalSource:"args => <Dropdown {...args} />",...MultiSelectLarge.parameters?.docs?.source}}},MultiSelectWithIcons.parameters={...MultiSelectWithIcons.parameters,docs:{...MultiSelectWithIcons.parameters?.docs,source:{originalSource:"args => <Dropdown {...args} />",...MultiSelectWithIcons.parameters?.docs?.source}}},LargeRoundWithoutIcons.parameters={...LargeRoundWithoutIcons.parameters,docs:{...LargeRoundWithoutIcons.parameters?.docs,source:{originalSource:"args => <Dropdown {...args} />",...LargeRoundWithoutIcons.parameters?.docs?.source}}},LargeSquareWithIcons.parameters={...LargeSquareWithIcons.parameters,docs:{...LargeSquareWithIcons.parameters?.docs,source:{originalSource:"args => <Dropdown {...args} />",...LargeSquareWithIcons.parameters?.docs?.source}}};const __namedExportsOrder=["SmallSquare","SmallRound","UpDownArrowIcon","SearchIcon","MultiSelectSmall","MultiSelectLarge","MultiSelectWithIcons","LargeRoundWithoutIcons","LargeSquareWithIcons"]}}]);
|
|
8
|
+
//# sourceMappingURL=Dropdown-stories.825dde1a.iframe.bundle.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Dropdown-stories.825dde1a.iframe.bundle.js","mappings":";AAGA","sources":["webpack://sag-storybook/./src/stories/Dropdown.style.js"],"sourcesContent":["import styled from \"styled-components\";\r\n\r\nexport const DropdownContainer = styled.div`\r\n width: ${(props) => props.width}; \r\n text-align: left; \r\n position: relative; \r\n align-items: center;\r\n justify-content: center;\r\n`;\r\n"],"names":[],"sourceRoot":""}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
/*! For license information please see Introduction-mdx.f8264230.iframe.bundle.js.LICENSE.txt */
|
|
2
|
+
"use strict";(self.webpackChunksag_storybook=self.webpackChunksag_storybook||[]).push([[281],{"./node_modules/@mdx-js/react/lib/index.js":function(__unused_webpack_module,__webpack_exports__,__webpack_require__){__webpack_require__.d(__webpack_exports__,{NF:function(){return withMDXComponents},Zo:function(){return MDXProvider},ah:function(){return useMDXComponents},pC:function(){return MDXContext}});var react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/react/index.js");const MDXContext=react__WEBPACK_IMPORTED_MODULE_0__.createContext({});function withMDXComponents(Component){return function boundMDXComponent(props){const allComponents=useMDXComponents(props.components);return react__WEBPACK_IMPORTED_MODULE_0__.createElement(Component,{...props,allComponents:allComponents})}}function useMDXComponents(components){const contextComponents=react__WEBPACK_IMPORTED_MODULE_0__.useContext(MDXContext);return react__WEBPACK_IMPORTED_MODULE_0__.useMemo((()=>"function"==typeof components?components(contextComponents):{...contextComponents,...components}),[contextComponents,components])}const emptyObject={};function MDXProvider({components:components,children:children,disableParentContext:disableParentContext}){let allComponents;return allComponents=disableParentContext?"function"==typeof components?components({}):components||emptyObject:useMDXComponents(components),react__WEBPACK_IMPORTED_MODULE_0__.createElement(MDXContext.Provider,{value:allComponents},children)}},"./src/stories/Introduction.mdx":function(__unused_webpack_module,__webpack_exports__,__webpack_require__){__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{default:function(){return Introduction}});__webpack_require__("./node_modules/react/index.js");var jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js"),lib=__webpack_require__("./node_modules/@mdx-js/react/lib/index.js"),dist=__webpack_require__("./node_modules/@storybook/blocks/dist/index.mjs");__webpack_require__.p,__webpack_require__.p,__webpack_require__.p,__webpack_require__.p,__webpack_require__.p,__webpack_require__.p,__webpack_require__.p,__webpack_require__.p;function _createMdxContent(props){const _components=Object.assign({h1:"h1"},(0,lib.ah)(),props.components);return(0,jsx_runtime.jsxs)(jsx_runtime.Fragment,{children:[(0,jsx_runtime.jsx)(dist.h_,{title:"SAG/Introduction"}),"\n",(0,jsx_runtime.jsx)("style",{children:"\n .subheading {\n --mediumdark: '#999999';\n font-weight: 700;\n font-size: 13px;\n color: #999;\n letter-spacing: 6px;\n line-height: 24px;\n text-transform: uppercase;\n margin-bottom: 12px;\n margin-top: 40px;\n }\n\n .link-list {\n display: grid;\n grid-template-columns: 1fr;\n grid-template-rows: 1fr 1fr;\n row-gap: 10px;\n }\n\n @media (min-width: 620px) {\n .link-list {\n row-gap: 20px;\n column-gap: 20px;\n grid-template-columns: 1fr 1fr;\n }\n }\n\n @media all and (-ms-high-contrast:none) {\n .link-list {\n display: -ms-grid;\n -ms-grid-columns: 1fr 1fr;\n -ms-grid-rows: 1fr 1fr;\n }\n }\n\n .link-item {\n display: block;\n padding: 20px;\n border: 1px solid #00000010;\n border-radius: 5px;\n transition: background 150ms ease-out, border 150ms ease-out, transform 150ms ease-out;\n color: #333333;\n display: flex;\n align-items: flex-start;\n }\n\n .link-item:hover {\n border-color: #1EA7FD50;\n transform: translate3d(0, -3px, 0);\n box-shadow: rgba(0, 0, 0, 0.08) 0 3px 10px 0;\n }\n\n .link-item:active {\n border-color: #1EA7FD;\n transform: translate3d(0, 0, 0);\n }\n\n .link-item strong {\n font-weight: 700;\n display: block;\n margin-bottom: 2px;\n }\n\n .link-item img {\n height: 40px;\n width: 40px;\n margin-right: 15px;\n flex: none;\n }\n\n .link-item span,\n .link-item p {\n margin: 0;\n font-size: 14px;\n line-height: 20px;\n }\n\n .tip {\n display: inline-block;\n border-radius: 1em;\n font-size: 11px;\n line-height: 12px;\n font-weight: 700;\n background: #E7FDD8;\n color: #66BF3C;\n padding: 4px 12px;\n margin-right: 10px;\n vertical-align: top;\n }\n\n .tip-wrapper {\n font-size: 13px;\n line-height: 20px;\n margin-top: 40px;\n margin-bottom: 40px;\n }\n\n .tip-wrapper code {\n font-size: 12px;\n display: inline-block;\n }\n "}),"\n",(0,jsx_runtime.jsx)(_components.h1,{id:"welcome-to-sagramata-storybook",children:"Welcome to Sagramata Storybook"})]})}var Introduction=function MDXContent(props={}){const{wrapper:MDXLayout}=Object.assign({},(0,lib.ah)(),props.components);return MDXLayout?(0,jsx_runtime.jsx)(MDXLayout,Object.assign({},props,{children:(0,jsx_runtime.jsx)(_createMdxContent,props)})):_createMdxContent(props)}},"./node_modules/react/cjs/react-jsx-runtime.production.min.js":function(__unused_webpack_module,exports,__webpack_require__){var f=__webpack_require__("./node_modules/react/index.js"),k=Symbol.for("react.element"),l=Symbol.for("react.fragment"),m=Object.prototype.hasOwnProperty,n=f.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,p={key:!0,ref:!0,__self:!0,__source:!0};function q(c,a,g){var b,d={},e=null,h=null;for(b in void 0!==g&&(e=""+g),void 0!==a.key&&(e=""+a.key),void 0!==a.ref&&(h=a.ref),a)m.call(a,b)&&!p.hasOwnProperty(b)&&(d[b]=a[b]);if(c&&c.defaultProps)for(b in a=c.defaultProps)void 0===d[b]&&(d[b]=a[b]);return{$$typeof:k,type:c,key:e,ref:h,props:d,_owner:n.current}}exports.Fragment=l,exports.jsx=q,exports.jsxs=q},"./node_modules/react/jsx-runtime.js":function(module,__unused_webpack_exports,__webpack_require__){module.exports=__webpack_require__("./node_modules/react/cjs/react-jsx-runtime.production.min.js")}}]);
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
/*! For license information please see OneColumnContainer-stories.65049871.iframe.bundle.js.LICENSE.txt */
|
|
2
|
+
"use strict";(self.webpackChunksag_storybook=self.webpackChunksag_storybook||[]).push([[510],{"./node_modules/@emotion/is-prop-valid/dist/emotion-is-prop-valid.esm.js":function(__unused_webpack_module,__webpack_exports__,__webpack_require__){__webpack_require__.d(__webpack_exports__,{Z:function(){return isPropValid}});var _emotion_memoize__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/@emotion/memoize/dist/emotion-memoize.esm.js"),reactPropsRegex=/^((children|dangerouslySetInnerHTML|key|ref|autoFocus|defaultValue|defaultChecked|innerHTML|suppressContentEditableWarning|suppressHydrationWarning|valueLink|abbr|accept|acceptCharset|accessKey|action|allow|allowUserMedia|allowPaymentRequest|allowFullScreen|allowTransparency|alt|async|autoComplete|autoPlay|capture|cellPadding|cellSpacing|challenge|charSet|checked|cite|classID|className|cols|colSpan|content|contentEditable|contextMenu|controls|controlsList|coords|crossOrigin|data|dateTime|decoding|default|defer|dir|disabled|disablePictureInPicture|download|draggable|encType|enterKeyHint|form|formAction|formEncType|formMethod|formNoValidate|formTarget|frameBorder|headers|height|hidden|high|href|hrefLang|htmlFor|httpEquiv|id|inputMode|integrity|is|keyParams|keyType|kind|label|lang|list|loading|loop|low|marginHeight|marginWidth|max|maxLength|media|mediaGroup|method|min|minLength|multiple|muted|name|nonce|noValidate|open|optimum|pattern|placeholder|playsInline|poster|preload|profile|radioGroup|readOnly|referrerPolicy|rel|required|reversed|role|rows|rowSpan|sandbox|scope|scoped|scrolling|seamless|selected|shape|size|sizes|slot|span|spellCheck|src|srcDoc|srcLang|srcSet|start|step|style|summary|tabIndex|target|title|translate|type|useMap|value|width|wmode|wrap|about|datatype|inlist|prefix|property|resource|typeof|vocab|autoCapitalize|autoCorrect|autoSave|color|incremental|fallback|inert|itemProp|itemScope|itemType|itemID|itemRef|on|option|results|security|unselectable|accentHeight|accumulate|additive|alignmentBaseline|allowReorder|alphabetic|amplitude|arabicForm|ascent|attributeName|attributeType|autoReverse|azimuth|baseFrequency|baselineShift|baseProfile|bbox|begin|bias|by|calcMode|capHeight|clip|clipPathUnits|clipPath|clipRule|colorInterpolation|colorInterpolationFilters|colorProfile|colorRendering|contentScriptType|contentStyleType|cursor|cx|cy|d|decelerate|descent|diffuseConstant|direction|display|divisor|dominantBaseline|dur|dx|dy|edgeMode|elevation|enableBackground|end|exponent|externalResourcesRequired|fill|fillOpacity|fillRule|filter|filterRes|filterUnits|floodColor|floodOpacity|focusable|fontFamily|fontSize|fontSizeAdjust|fontStretch|fontStyle|fontVariant|fontWeight|format|from|fr|fx|fy|g1|g2|glyphName|glyphOrientationHorizontal|glyphOrientationVertical|glyphRef|gradientTransform|gradientUnits|hanging|horizAdvX|horizOriginX|ideographic|imageRendering|in|in2|intercept|k|k1|k2|k3|k4|kernelMatrix|kernelUnitLength|kerning|keyPoints|keySplines|keyTimes|lengthAdjust|letterSpacing|lightingColor|limitingConeAngle|local|markerEnd|markerMid|markerStart|markerHeight|markerUnits|markerWidth|mask|maskContentUnits|maskUnits|mathematical|mode|numOctaves|offset|opacity|operator|order|orient|orientation|origin|overflow|overlinePosition|overlineThickness|panose1|paintOrder|pathLength|patternContentUnits|patternTransform|patternUnits|pointerEvents|points|pointsAtX|pointsAtY|pointsAtZ|preserveAlpha|preserveAspectRatio|primitiveUnits|r|radius|refX|refY|renderingIntent|repeatCount|repeatDur|requiredExtensions|requiredFeatures|restart|result|rotate|rx|ry|scale|seed|shapeRendering|slope|spacing|specularConstant|specularExponent|speed|spreadMethod|startOffset|stdDeviation|stemh|stemv|stitchTiles|stopColor|stopOpacity|strikethroughPosition|strikethroughThickness|string|stroke|strokeDasharray|strokeDashoffset|strokeLinecap|strokeLinejoin|strokeMiterlimit|strokeOpacity|strokeWidth|surfaceScale|systemLanguage|tableValues|targetX|targetY|textAnchor|textDecoration|textRendering|textLength|to|transform|u1|u2|underlinePosition|underlineThickness|unicode|unicodeBidi|unicodeRange|unitsPerEm|vAlphabetic|vHanging|vIdeographic|vMathematical|values|vectorEffect|version|vertAdvY|vertOriginX|vertOriginY|viewBox|viewTarget|visibility|widths|wordSpacing|writingMode|x|xHeight|x1|x2|xChannelSelector|xlinkActuate|xlinkArcrole|xlinkHref|xlinkRole|xlinkShow|xlinkTitle|xlinkType|xmlBase|xmlns|xmlnsXlink|xmlLang|xmlSpace|y|y1|y2|yChannelSelector|z|zoomAndPan|for|class|autofocus)|(([Dd][Aa][Tt][Aa]|[Aa][Rr][Ii][Aa]|x)-.*))$/,isPropValid=(0,_emotion_memoize__WEBPACK_IMPORTED_MODULE_0__.Z)((function(prop){return reactPropsRegex.test(prop)||111===prop.charCodeAt(0)&&110===prop.charCodeAt(1)&&prop.charCodeAt(2)<91}))},"./node_modules/@emotion/memoize/dist/emotion-memoize.esm.js":function(__unused_webpack_module,__webpack_exports__,__webpack_require__){function memoize(fn){var cache=Object.create(null);return function(arg){return void 0===cache[arg]&&(cache[arg]=fn(arg)),cache[arg]}}__webpack_require__.d(__webpack_exports__,{Z:function(){return memoize}})},"./src/stories/OneColumnContainer.stories.js":function(__unused_webpack_module,__webpack_exports__,__webpack_require__){__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Primary:function(){return Primary},__namedExportsOrder:function(){return __namedExportsOrder},default:function(){return OneColumnContainer_stories}});var react=__webpack_require__("./node_modules/react/index.js"),styled_components_browser_esm=__webpack_require__("./node_modules/styled-components/dist/styled-components.browser.esm.js");const StyledContainer=styled_components_browser_esm.ZP.div`
|
|
3
|
+
width: ${props=>props.width};
|
|
4
|
+
height: ${props=>props.height};
|
|
5
|
+
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
|
|
6
|
+
display: flex;
|
|
7
|
+
position: relative;
|
|
8
|
+
border-radius: 10px;
|
|
9
|
+
align-items: center;
|
|
10
|
+
justify-content: center;
|
|
11
|
+
overflow: hidden;
|
|
12
|
+
`,InfoTextContainer=styled_components_browser_esm.ZP.div`
|
|
13
|
+
width: ${props=>props.width};
|
|
14
|
+
height: ${props=>props.height};
|
|
15
|
+
align-items: center;
|
|
16
|
+
display: flex;
|
|
17
|
+
visibility: ${props=>props.clicked?"visible":"hidden"};
|
|
18
|
+
text-align: center;
|
|
19
|
+
justify-content: center;
|
|
20
|
+
background: rgba(16, 16, 16, .6);
|
|
21
|
+
`,InfoTextLabel=styled_components_browser_esm.ZP.div`
|
|
22
|
+
align-items: center;
|
|
23
|
+
text-align: center;
|
|
24
|
+
color: white;
|
|
25
|
+
margin: 10px;
|
|
26
|
+
justify-content: center;
|
|
27
|
+
`,IconContainer=styled_components_browser_esm.ZP.div`
|
|
28
|
+
width: 15px;
|
|
29
|
+
height: 15px;
|
|
30
|
+
position: absolute;
|
|
31
|
+
margin-top:10px;
|
|
32
|
+
margin-right:10px;
|
|
33
|
+
top: 0;
|
|
34
|
+
right: 0;
|
|
35
|
+
`;var jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js");const InfoIcon=({clicked:clicked})=>(0,jsx_runtime.jsxs)("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"none",stroke:clicked?"white":"black",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:"feather feather-info",children:[(0,jsx_runtime.jsx)("circle",{cx:"12",cy:"12",r:"10"}),(0,jsx_runtime.jsx)("line",{x1:"12",y1:"16",x2:"12",y2:"12"}),(0,jsx_runtime.jsx)("line",{x1:"12",y1:"8",x2:"12",y2:"8"})]});InfoIcon.displayName="InfoIcon";const OneColumnContainer=({width:width,height:height,infoText:infoText,...props})=>{const[clicked,setClicked]=(0,react.useState)(!1);return(0,jsx_runtime.jsxs)(StyledContainer,{width:width,height:height,children:[(0,jsx_runtime.jsx)(InfoTextContainer,{clicked:clicked,width:width,height:height,children:(0,jsx_runtime.jsx)(InfoTextLabel,{children:infoText})}),(0,jsx_runtime.jsx)(IconContainer,{onClick:()=>{setClicked(!clicked)},children:(0,jsx_runtime.jsx)(InfoIcon,{clicked:clicked})})]})};OneColumnContainer.displayName="OneColumnContainer",OneColumnContainer.propTypes={},OneColumnContainer.defaultProps={};var OneColumnContainer_stories={parameters:{storySource:{source:'import { OneColumnContainer } from \'./OneColumnContainer\';\n\n// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction\nexport default {\n title: \'Sag BI/OneColumnContainer\',\n component: OneColumnContainer,\n tags: [\'autodocs\']\n};\n\n// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args\nexport const Primary = {\n args: {\n infoText: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s",\n width: "250px",\n height: "250px"\n }\n};\nPrimary.parameters = {\n ...Primary.parameters,\n docs: {\n ...Primary.parameters?.docs,\n source: {\n originalSource: "{\\n args: {\\n infoText: \\"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s\\",\\n width: \\"250px\\",\\n height: \\"250px\\"\\n }\\n}",\n ...Primary.parameters?.docs?.source\n }\n }\n};',locationsMap:{primary:{startLoc:{col:23,line:11},endLoc:{col:1,line:17},startBody:{col:23,line:11},endBody:{col:1,line:17}}}}},title:"Sag BI/OneColumnContainer",component:OneColumnContainer,tags:["autodocs"]};const Primary={args:{infoText:"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s",width:"250px",height:"250px"}};Primary.parameters={...Primary.parameters,docs:{...Primary.parameters?.docs,source:{originalSource:'{\n args: {\n infoText: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s",\n width: "250px",\n height: "250px"\n }\n}',...Primary.parameters?.docs?.source}}};const __namedExportsOrder=["Primary"]},"./node_modules/hoist-non-react-statics/dist/hoist-non-react-statics.cjs.js":function(module,__unused_webpack_exports,__webpack_require__){var reactIs=__webpack_require__("./node_modules/hoist-non-react-statics/node_modules/react-is/index.js"),REACT_STATICS={childContextTypes:!0,contextType:!0,contextTypes:!0,defaultProps:!0,displayName:!0,getDefaultProps:!0,getDerivedStateFromError:!0,getDerivedStateFromProps:!0,mixins:!0,propTypes:!0,type:!0},KNOWN_STATICS={name:!0,length:!0,prototype:!0,caller:!0,callee:!0,arguments:!0,arity:!0},MEMO_STATICS={$$typeof:!0,compare:!0,defaultProps:!0,displayName:!0,propTypes:!0,type:!0},TYPE_STATICS={};function getStatics(component){return reactIs.isMemo(component)?MEMO_STATICS:TYPE_STATICS[component.$$typeof]||REACT_STATICS}TYPE_STATICS[reactIs.ForwardRef]={$$typeof:!0,render:!0,defaultProps:!0,displayName:!0,propTypes:!0},TYPE_STATICS[reactIs.Memo]=MEMO_STATICS;var defineProperty=Object.defineProperty,getOwnPropertyNames=Object.getOwnPropertyNames,getOwnPropertySymbols=Object.getOwnPropertySymbols,getOwnPropertyDescriptor=Object.getOwnPropertyDescriptor,getPrototypeOf=Object.getPrototypeOf,objectPrototype=Object.prototype;module.exports=function hoistNonReactStatics(targetComponent,sourceComponent,blacklist){if("string"!=typeof sourceComponent){if(objectPrototype){var inheritedComponent=getPrototypeOf(sourceComponent);inheritedComponent&&inheritedComponent!==objectPrototype&&hoistNonReactStatics(targetComponent,inheritedComponent,blacklist)}var keys=getOwnPropertyNames(sourceComponent);getOwnPropertySymbols&&(keys=keys.concat(getOwnPropertySymbols(sourceComponent)));for(var targetStatics=getStatics(targetComponent),sourceStatics=getStatics(sourceComponent),i=0;i<keys.length;++i){var key=keys[i];if(!(KNOWN_STATICS[key]||blacklist&&blacklist[key]||sourceStatics&&sourceStatics[key]||targetStatics&&targetStatics[key])){var descriptor=getOwnPropertyDescriptor(sourceComponent,key);try{defineProperty(targetComponent,key,descriptor)}catch(e){}}}}return targetComponent}},"./node_modules/hoist-non-react-statics/node_modules/react-is/cjs/react-is.production.min.js":function(__unused_webpack_module,exports){var b="function"==typeof Symbol&&Symbol.for,c=b?Symbol.for("react.element"):60103,d=b?Symbol.for("react.portal"):60106,e=b?Symbol.for("react.fragment"):60107,f=b?Symbol.for("react.strict_mode"):60108,g=b?Symbol.for("react.profiler"):60114,h=b?Symbol.for("react.provider"):60109,k=b?Symbol.for("react.context"):60110,l=b?Symbol.for("react.async_mode"):60111,m=b?Symbol.for("react.concurrent_mode"):60111,n=b?Symbol.for("react.forward_ref"):60112,p=b?Symbol.for("react.suspense"):60113,q=b?Symbol.for("react.suspense_list"):60120,r=b?Symbol.for("react.memo"):60115,t=b?Symbol.for("react.lazy"):60116,v=b?Symbol.for("react.block"):60121,w=b?Symbol.for("react.fundamental"):60117,x=b?Symbol.for("react.responder"):60118,y=b?Symbol.for("react.scope"):60119;function z(a){if("object"==typeof a&&null!==a){var u=a.$$typeof;switch(u){case c:switch(a=a.type){case l:case m:case e:case g:case f:case p:return a;default:switch(a=a&&a.$$typeof){case k:case n:case t:case r:case h:return a;default:return u}}case d:return u}}}function A(a){return z(a)===m}exports.AsyncMode=l,exports.ConcurrentMode=m,exports.ContextConsumer=k,exports.ContextProvider=h,exports.Element=c,exports.ForwardRef=n,exports.Fragment=e,exports.Lazy=t,exports.Memo=r,exports.Portal=d,exports.Profiler=g,exports.StrictMode=f,exports.Suspense=p,exports.isAsyncMode=function(a){return A(a)||z(a)===l},exports.isConcurrentMode=A,exports.isContextConsumer=function(a){return z(a)===k},exports.isContextProvider=function(a){return z(a)===h},exports.isElement=function(a){return"object"==typeof a&&null!==a&&a.$$typeof===c},exports.isForwardRef=function(a){return z(a)===n},exports.isFragment=function(a){return z(a)===e},exports.isLazy=function(a){return z(a)===t},exports.isMemo=function(a){return z(a)===r},exports.isPortal=function(a){return z(a)===d},exports.isProfiler=function(a){return z(a)===g},exports.isStrictMode=function(a){return z(a)===f},exports.isSuspense=function(a){return z(a)===p},exports.isValidElementType=function(a){return"string"==typeof a||"function"==typeof a||a===e||a===m||a===g||a===f||a===p||a===q||"object"==typeof a&&null!==a&&(a.$$typeof===t||a.$$typeof===r||a.$$typeof===h||a.$$typeof===k||a.$$typeof===n||a.$$typeof===w||a.$$typeof===x||a.$$typeof===y||a.$$typeof===v)},exports.typeOf=z},"./node_modules/hoist-non-react-statics/node_modules/react-is/index.js":function(module,__unused_webpack_exports,__webpack_require__){module.exports=__webpack_require__("./node_modules/hoist-non-react-statics/node_modules/react-is/cjs/react-is.production.min.js")},"./node_modules/react/cjs/react-jsx-runtime.production.min.js":function(__unused_webpack_module,exports,__webpack_require__){var f=__webpack_require__("./node_modules/react/index.js"),k=Symbol.for("react.element"),l=Symbol.for("react.fragment"),m=Object.prototype.hasOwnProperty,n=f.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,p={key:!0,ref:!0,__self:!0,__source:!0};function q(c,a,g){var b,d={},e=null,h=null;for(b in void 0!==g&&(e=""+g),void 0!==a.key&&(e=""+a.key),void 0!==a.ref&&(h=a.ref),a)m.call(a,b)&&!p.hasOwnProperty(b)&&(d[b]=a[b]);if(c&&c.defaultProps)for(b in a=c.defaultProps)void 0===d[b]&&(d[b]=a[b]);return{$$typeof:k,type:c,key:e,ref:h,props:d,_owner:n.current}}exports.Fragment=l,exports.jsx=q,exports.jsxs=q},"./node_modules/react/jsx-runtime.js":function(module,__unused_webpack_exports,__webpack_require__){module.exports=__webpack_require__("./node_modules/react/cjs/react-jsx-runtime.production.min.js")}}]);
|
|
36
|
+
//# sourceMappingURL=OneColumnContainer-stories.65049871.iframe.bundle.js.map
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license React
|
|
3
|
+
* react-jsx-runtime.production.min.js
|
|
4
|
+
*
|
|
5
|
+
* Copyright (c) Facebook, Inc. and its affiliates.
|
|
6
|
+
*
|
|
7
|
+
* This source code is licensed under the MIT license found in the
|
|
8
|
+
* LICENSE file in the root directory of this source tree.
|
|
9
|
+
*/
|
|
10
|
+
|
|
11
|
+
/** @license React v16.13.1
|
|
12
|
+
* react-is.production.min.js
|
|
13
|
+
*
|
|
14
|
+
* Copyright (c) Facebook, Inc. and its affiliates.
|
|
15
|
+
*
|
|
16
|
+
* This source code is licensed under the MIT license found in the
|
|
17
|
+
* LICENSE file in the root directory of this source tree.
|
|
18
|
+
*/
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"OneColumnContainer-stories.65049871.iframe.bundle.js","mappings":";;AAGA;AACA;;;;;;;;AASA;AACA;AACA;;;AAGA;;;;AAMA;;;;;;AAQA","sources":["webpack://sag-storybook/./src/stories/OneColumnContainer.style.js"],"sourcesContent":["import styled from \"styled-components\";\r\n\r\nexport const StyledContainer = styled.div`\r\n width: ${(props) =>(props.width)};\r\n height: ${(props) =>(props.height)};\r\n box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; \r\n display: flex;\r\n position: relative;\r\n border-radius: 10px;\r\n align-items: center;\r\n justify-content: center;\r\n overflow: hidden;\r\n`;\r\nexport const InfoTextContainer = styled.div`\r\n width: ${(props) =>(props.width)};\r\n height: ${(props) =>(props.height)};\r\n align-items: center;\r\n display: flex;\r\n visibility: ${(props) =>(props.clicked ? 'visible' : 'hidden')};\r\n text-align: center;\r\n justify-content: center;\r\n background: rgba(16, 16, 16, .6);\r\n`;\r\n\r\nexport const InfoTextLabel = styled.div`\r\n align-items: center;\r\n text-align: center;\r\n color: white;\r\n margin: 10px;\r\n justify-content: center;\r\n`;\r\n\r\nexport const IconContainer = styled.div`\r\n width: 15px;\r\n height: 15px;\r\n position: absolute;\r\n margin-top:10px;\r\n margin-right:10px;\r\n top: 0;\r\n right: 0;\r\n`;\r\n"],"names":[],"sourceRoot":""}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" width="164" height="164">
|
|
2
|
+
<svg width="164" height="164" viewBox="0 0 164 164" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
3
|
+
<path d="M22.467 147.762 17.5 15.402a8.062 8.062 0 0 1 7.553-8.35L137.637.016a8.061 8.061 0 0 1 8.565 8.047v144.23a8.063 8.063 0 0 1-8.424 8.054l-107.615-4.833a8.062 8.062 0 0 1-7.695-7.752Z" fill="#FF4785"></path>
|
|
4
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="m128.785.57-15.495.968-.755 18.172a1.203 1.203 0 0 0 1.928 1.008l7.06-5.354 5.962 4.697a1.202 1.202 0 0 0 1.946-.987L128.785.569Zm-12.059 60.856c-2.836 2.203-23.965 3.707-23.965.57.447-11.969-4.912-12.494-7.889-12.494-2.828 0-7.59.855-7.59 7.267 0 6.534 6.96 10.223 15.13 14.553 11.607 6.15 25.654 13.594 25.654 32.326 0 17.953-14.588 27.871-33.194 27.871-19.201 0-35.981-7.769-34.086-34.702.744-3.163 25.156-2.411 25.156 0-.298 11.114 2.232 14.383 8.633 14.383 4.912 0 7.144-2.708 7.144-7.267 0-6.9-7.252-10.973-15.595-15.657C64.827 81.933 51.53 74.468 51.53 57.34c0-17.098 11.76-28.497 32.747-28.497 20.988 0 32.449 11.224 32.449 32.584Z" fill="#fff"></path>
|
|
5
|
+
</svg>
|
|
6
|
+
<style>@media (prefers-color-scheme: light) { :root { filter: none; } }</style>
|
|
7
|
+
</svg>
|
|
@@ -0,0 +1,355 @@
|
|
|
1
|
+
<!doctype html><html lang="en"><head><meta charset="utf-8"><title>Webpack App</title><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="prefetch" href="./sb-common-assets/nunito-sans-regular.woff2" as="font" type="font/woff2" crossorigin><link rel="prefetch" href="./sb-common-assets/nunito-sans-italic.woff2" as="font" type="font/woff2" crossorigin><link rel="prefetch" href="./sb-common-assets/nunito-sans-bold.woff2" as="font" type="font/woff2" crossorigin><link rel="prefetch" href="./sb-common-assets/nunito-sans-bold-italic.woff2" as="font" type="font/woff2" crossorigin><link rel="stylesheet" href="./sb-common-assets/fonts.css"><base target="_parent"><style>/* While we aren't showing the main block yet, but still preparing, we want everything the user
|
|
2
|
+
has rendered, which may or may not be in #storybook-root, to be display none */
|
|
3
|
+
.sb-show-preparing-story:not(.sb-show-main) > :not(.sb-preparing-story) {
|
|
4
|
+
display: none;
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
.sb-show-preparing-docs:not(.sb-show-main) > :not(.sb-preparing-docs) {
|
|
8
|
+
display: none;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
/* Hide our own blocks when we aren't supposed to be showing them */
|
|
12
|
+
:not(.sb-show-preparing-story) > .sb-preparing-story,
|
|
13
|
+
:not(.sb-show-preparing-docs) > .sb-preparing-docs,
|
|
14
|
+
:not(.sb-show-nopreview) > .sb-nopreview,
|
|
15
|
+
:not(.sb-show-errordisplay) > .sb-errordisplay {
|
|
16
|
+
display: none;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.sb-show-main.sb-main-centered {
|
|
20
|
+
margin: 0;
|
|
21
|
+
display: flex;
|
|
22
|
+
align-items: center;
|
|
23
|
+
min-height: 100vh;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.sb-show-main.sb-main-centered #storybook-root {
|
|
27
|
+
box-sizing: border-box;
|
|
28
|
+
margin: auto;
|
|
29
|
+
padding: 1rem;
|
|
30
|
+
max-height: 100%; /* Hack for centering correctly in IE11 */
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
/* Vertical centering fix for IE11 */
|
|
34
|
+
@media screen and (-ms-high-contrast: none), (-ms-high-contrast: active) {
|
|
35
|
+
.sb-show-main.sb-main-centered:after {
|
|
36
|
+
content: '';
|
|
37
|
+
min-height: inherit;
|
|
38
|
+
font-size: 0;
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.sb-show-main.sb-main-fullscreen {
|
|
43
|
+
margin: 0;
|
|
44
|
+
padding: 0;
|
|
45
|
+
display: block;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.sb-show-main.sb-main-padded {
|
|
49
|
+
margin: 0;
|
|
50
|
+
padding: 1rem;
|
|
51
|
+
display: block;
|
|
52
|
+
box-sizing: border-box;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.sb-wrapper {
|
|
56
|
+
position: fixed;
|
|
57
|
+
top: 0;
|
|
58
|
+
bottom: 0;
|
|
59
|
+
left: 0;
|
|
60
|
+
right: 0;
|
|
61
|
+
padding: 20px;
|
|
62
|
+
font-family: 'Nunito Sans', -apple-system, '.SFNSText-Regular', 'San Francisco',
|
|
63
|
+
BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
|
64
|
+
-webkit-font-smoothing: antialiased;
|
|
65
|
+
overflow: auto;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
.sb-heading {
|
|
69
|
+
font-size: 14px;
|
|
70
|
+
font-weight: 600;
|
|
71
|
+
letter-spacing: 0.2px;
|
|
72
|
+
margin: 10px 0;
|
|
73
|
+
padding-right: 25px;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
.sb-nopreview {
|
|
77
|
+
display: flex;
|
|
78
|
+
align-content: center;
|
|
79
|
+
justify-content: center;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.sb-nopreview_main {
|
|
83
|
+
margin: auto;
|
|
84
|
+
padding: 30px;
|
|
85
|
+
border-radius: 10px;
|
|
86
|
+
background: rgba(0, 0, 0, 0.03);
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
.sb-nopreview_heading {
|
|
90
|
+
text-align: center;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
.sb-errordisplay {
|
|
94
|
+
border: 20px solid rgb(187, 49, 49);
|
|
95
|
+
background: #222;
|
|
96
|
+
color: #fff;
|
|
97
|
+
z-index: 999999;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
.sb-errordisplay_code {
|
|
101
|
+
padding: 10px;
|
|
102
|
+
background: #000;
|
|
103
|
+
color: #eee;
|
|
104
|
+
font-family: 'Operator Mono', 'Fira Code Retina', 'Fira Code', 'FiraCode-Retina', 'Andale Mono',
|
|
105
|
+
'Lucida Console', Consolas, Monaco, monospace;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
.sb-errordisplay pre {
|
|
109
|
+
white-space: pre-wrap;
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
@-webkit-keyframes sb-rotate360 {
|
|
113
|
+
from {
|
|
114
|
+
transform: rotate(0deg);
|
|
115
|
+
}
|
|
116
|
+
to {
|
|
117
|
+
transform: rotate(360deg);
|
|
118
|
+
}
|
|
119
|
+
}
|
|
120
|
+
@keyframes sb-rotate360 {
|
|
121
|
+
from {
|
|
122
|
+
transform: rotate(0deg);
|
|
123
|
+
}
|
|
124
|
+
to {
|
|
125
|
+
transform: rotate(360deg);
|
|
126
|
+
}
|
|
127
|
+
}
|
|
128
|
+
@-webkit-keyframes sb-glow {
|
|
129
|
+
0%,
|
|
130
|
+
100% {
|
|
131
|
+
opacity: 1;
|
|
132
|
+
}
|
|
133
|
+
50% {
|
|
134
|
+
opacity: 0.4;
|
|
135
|
+
}
|
|
136
|
+
}
|
|
137
|
+
@keyframes sb-glow {
|
|
138
|
+
0%,
|
|
139
|
+
100% {
|
|
140
|
+
opacity: 1;
|
|
141
|
+
}
|
|
142
|
+
50% {
|
|
143
|
+
opacity: 0.4;
|
|
144
|
+
}
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
/* We display the preparing loaders *over* the rendering story */
|
|
148
|
+
.sb-preparing-story,
|
|
149
|
+
.sb-preparing-docs {
|
|
150
|
+
background-color: white;
|
|
151
|
+
/* Maximum possible z-index. It would be better to use stacking contexts to ensure it's always
|
|
152
|
+
on top, but this isn't possible as it would require making CSS changes that could affect user code */
|
|
153
|
+
z-index: 2147483647;
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
.sb-loader {
|
|
157
|
+
-webkit-animation: sb-rotate360 0.7s linear infinite;
|
|
158
|
+
animation: sb-rotate360 0.7s linear infinite;
|
|
159
|
+
border-color: rgba(97, 97, 97, 0.29);
|
|
160
|
+
border-radius: 50%;
|
|
161
|
+
border-style: solid;
|
|
162
|
+
border-top-color: #646464;
|
|
163
|
+
border-width: 2px;
|
|
164
|
+
display: inline-block;
|
|
165
|
+
height: 32px;
|
|
166
|
+
left: 50%;
|
|
167
|
+
margin-left: -16px;
|
|
168
|
+
margin-top: -16px;
|
|
169
|
+
mix-blend-mode: difference;
|
|
170
|
+
overflow: hidden;
|
|
171
|
+
position: absolute;
|
|
172
|
+
top: 50%;
|
|
173
|
+
transition: all 200ms ease-out;
|
|
174
|
+
vertical-align: top;
|
|
175
|
+
width: 32px;
|
|
176
|
+
z-index: 4;
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
.sb-previewBlock {
|
|
180
|
+
background: #fff;
|
|
181
|
+
border: 1px solid rgba(0, 0, 0, 0.1);
|
|
182
|
+
border-radius: 4px;
|
|
183
|
+
box-shadow: rgba(0, 0, 0, 0.1) 0 1px 3px 0;
|
|
184
|
+
margin: 25px auto 40px;
|
|
185
|
+
max-width: 600px;
|
|
186
|
+
}
|
|
187
|
+
|
|
188
|
+
.sb-previewBlock_header {
|
|
189
|
+
align-items: center;
|
|
190
|
+
box-shadow: rgba(0, 0, 0, 0.1) 0 -1px 0 0 inset;
|
|
191
|
+
display: flex;
|
|
192
|
+
gap: 14px;
|
|
193
|
+
height: 40px;
|
|
194
|
+
padding: 0 12px;
|
|
195
|
+
}
|
|
196
|
+
|
|
197
|
+
.sb-previewBlock_icon {
|
|
198
|
+
-webkit-animation: sb-glow 1.5s ease-in-out infinite;
|
|
199
|
+
animation: sb-glow 1.5s ease-in-out infinite;
|
|
200
|
+
background: #e6e6e6;
|
|
201
|
+
height: 14px;
|
|
202
|
+
width: 14px;
|
|
203
|
+
}
|
|
204
|
+
.sb-previewBlock_icon:last-child {
|
|
205
|
+
margin-left: auto;
|
|
206
|
+
}
|
|
207
|
+
|
|
208
|
+
.sb-previewBlock_body {
|
|
209
|
+
-webkit-animation: sb-glow 1.5s ease-in-out infinite;
|
|
210
|
+
animation: sb-glow 1.5s ease-in-out infinite;
|
|
211
|
+
height: 182px;
|
|
212
|
+
position: relative;
|
|
213
|
+
}
|
|
214
|
+
|
|
215
|
+
.sb-argstableBlock {
|
|
216
|
+
border-collapse: collapse;
|
|
217
|
+
border-spacing: 0;
|
|
218
|
+
font-size: 13px;
|
|
219
|
+
line-height: 20px;
|
|
220
|
+
margin: 25px auto 40px;
|
|
221
|
+
max-width: 600px;
|
|
222
|
+
text-align: left;
|
|
223
|
+
width: 100%;
|
|
224
|
+
}
|
|
225
|
+
.sb-argstableBlock th:first-of-type,
|
|
226
|
+
.sb-argstableBlock td:first-of-type {
|
|
227
|
+
padding-left: 20px;
|
|
228
|
+
}
|
|
229
|
+
.sb-argstableBlock th:nth-of-type(2),
|
|
230
|
+
.sb-argstableBlock td:nth-of-type(2) {
|
|
231
|
+
width: 35%;
|
|
232
|
+
}
|
|
233
|
+
.sb-argstableBlock th:nth-of-type(3),
|
|
234
|
+
.sb-argstableBlock td:nth-of-type(3) {
|
|
235
|
+
width: 15%;
|
|
236
|
+
}
|
|
237
|
+
.sb-argstableBlock th:last-of-type,
|
|
238
|
+
.sb-argstableBlock td:last-of-type {
|
|
239
|
+
width: 25%;
|
|
240
|
+
padding-right: 20px;
|
|
241
|
+
}
|
|
242
|
+
.sb-argstableBlock th span,
|
|
243
|
+
.sb-argstableBlock td span {
|
|
244
|
+
-webkit-animation: sb-glow 1.5s ease-in-out infinite;
|
|
245
|
+
animation: sb-glow 1.5s ease-in-out infinite;
|
|
246
|
+
background-color: rgba(0, 0, 0, 0.1);
|
|
247
|
+
border-radius: 0;
|
|
248
|
+
box-shadow: none;
|
|
249
|
+
color: transparent;
|
|
250
|
+
}
|
|
251
|
+
.sb-argstableBlock th {
|
|
252
|
+
padding: 10px 15px;
|
|
253
|
+
}
|
|
254
|
+
|
|
255
|
+
.sb-argstableBlock-body {
|
|
256
|
+
border-radius: 4px;
|
|
257
|
+
box-shadow: rgba(0, 0, 0, 0.1) 0 1px 3px 1px, rgba(0, 0, 0, 0.065) 0 0 0 1px;
|
|
258
|
+
}
|
|
259
|
+
.sb-argstableBlock-body tr {
|
|
260
|
+
background: transparent;
|
|
261
|
+
overflow: hidden;
|
|
262
|
+
}
|
|
263
|
+
.sb-argstableBlock-body tr:not(:first-child) {
|
|
264
|
+
border-top: 1px solid #e6e6e6;
|
|
265
|
+
}
|
|
266
|
+
.sb-argstableBlock-body tr:first-child td:first-child {
|
|
267
|
+
border-top-left-radius: 4px;
|
|
268
|
+
}
|
|
269
|
+
.sb-argstableBlock-body tr:first-child td:last-child {
|
|
270
|
+
border-top-right-radius: 4px;
|
|
271
|
+
}
|
|
272
|
+
.sb-argstableBlock-body tr:last-child td:first-child {
|
|
273
|
+
border-bottom-left-radius: 4px;
|
|
274
|
+
}
|
|
275
|
+
.sb-argstableBlock-body tr:last-child td:last-child {
|
|
276
|
+
border-bottom-right-radius: 4px;
|
|
277
|
+
}
|
|
278
|
+
.sb-argstableBlock-body td {
|
|
279
|
+
background: #fff;
|
|
280
|
+
padding-bottom: 10px;
|
|
281
|
+
padding-top: 10px;
|
|
282
|
+
vertical-align: top;
|
|
283
|
+
}
|
|
284
|
+
.sb-argstableBlock-body td:not(:first-of-type) {
|
|
285
|
+
padding-left: 15px;
|
|
286
|
+
padding-right: 15px;
|
|
287
|
+
}
|
|
288
|
+
.sb-argstableBlock-body button {
|
|
289
|
+
-webkit-animation: sb-glow 1.5s ease-in-out infinite;
|
|
290
|
+
animation: sb-glow 1.5s ease-in-out infinite;
|
|
291
|
+
background-color: rgba(0, 0, 0, 0.1);
|
|
292
|
+
border: 0;
|
|
293
|
+
border-radius: 0;
|
|
294
|
+
box-shadow: none;
|
|
295
|
+
color: transparent;
|
|
296
|
+
display: inline;
|
|
297
|
+
font-size: 12px;
|
|
298
|
+
line-height: 1;
|
|
299
|
+
padding: 10px 16px;
|
|
300
|
+
}
|
|
301
|
+
|
|
302
|
+
.sb-argstableBlock-summary {
|
|
303
|
+
margin-top: 4px;
|
|
304
|
+
}
|
|
305
|
+
|
|
306
|
+
.sb-argstableBlock-code {
|
|
307
|
+
margin-right: 4px;
|
|
308
|
+
margin-bottom: 4px;
|
|
309
|
+
padding: 2px 5px;
|
|
310
|
+
}</style><script>/* globals window */
|
|
311
|
+
/* eslint-disable no-underscore-dangle */
|
|
312
|
+
try {
|
|
313
|
+
if (window.top !== window) {
|
|
314
|
+
window.__REACT_DEVTOOLS_GLOBAL_HOOK__ = window.top.__REACT_DEVTOOLS_GLOBAL_HOOK__;
|
|
315
|
+
window.__VUE_DEVTOOLS_GLOBAL_HOOK__ = window.top.__VUE_DEVTOOLS_GLOBAL_HOOK__;
|
|
316
|
+
window.top.__VUE_DEVTOOLS_CONTEXT__ = window.document;
|
|
317
|
+
}
|
|
318
|
+
} catch (e) {
|
|
319
|
+
// eslint-disable-next-line no-console
|
|
320
|
+
console.warn('unable to connect to top frame for connecting dev tools');
|
|
321
|
+
}</script><style>#storybook-root[hidden],
|
|
322
|
+
#storybook-docs[hidden] {
|
|
323
|
+
display: none !important;
|
|
324
|
+
}</style></head><body><div class="sb-preparing-story sb-wrapper"><div class="sb-loader"></div></div><div class="sb-preparing-docs sb-wrapper"><div class="sb-previewBlock"><div class="sb-previewBlock_header"><div class="sb-previewBlock_icon"></div><div class="sb-previewBlock_icon"></div><div class="sb-previewBlock_icon"></div><div class="sb-previewBlock_icon"></div></div><div class="sb-previewBlock_body"><div class="sb-loader"></div></div></div><table aria-hidden="true" class="sb-argstableBlock"><thead class="sb-argstableBlock-head"><tr><th><span>Name</span></th><th><span>Description</span></th><th><span>Default</span></th><th><span>Control</span></th></tr></thead><tbody class="sb-argstableBlock-body"><tr><td><span>propertyName</span><span title="Required">*</span></td><td><div><span>This is a short description</span></div><div class="sb-argstableBlock-summary"><div><span class="sb-argstableBlock-code">summary</span></div></div></td><td><div><span class="sb-argstableBlock-code">defaultValue</span></div></td><td><button>Set string</button></td></tr><tr><td><span>propertyName</span><span>*</span></td><td><div><span>This is a short description</span></div><div class="sb-argstableBlock-summary"><div><span class="sb-argstableBlock-code">summary</span></div></div></td><td><div><span class="sb-argstableBlock-code">defaultValue</span></div></td><td><button>Set string</button></td></tr><tr><td><span>propertyName</span><span>*</span></td><td><div><span>This is a short description</span></div><div class="sb-argstableBlock-summary"><div><span class="sb-argstableBlock-code">summary</span></div></div></td><td><div><span class="sb-argstableBlock-code">defaultValue</span></div></td><td><button>Set string</button></td></tr></tbody></table></div><div class="sb-nopreview sb-wrapper"><div class="sb-nopreview_main"><h1 class="sb-nopreview_heading sb-heading">No Preview</h1><p>Sorry, but you either have no stories or none are selected somehow.</p><ul><li>Please check the Storybook config.</li><li>Try reloading the page.</li></ul><p>If the problem persists, check the browser console, or the terminal you've run Storybook from.</p></div></div><div class="sb-errordisplay sb-wrapper"><pre id="error-message" class="sb-heading"></pre><pre class="sb-errordisplay_code"><code id="error-stack"></code></pre></div><div id="storybook-root"></div><div id="storybook-docs"></div><script>window['CONFIG_TYPE'] = "PRODUCTION";
|
|
325
|
+
|
|
326
|
+
|
|
327
|
+
|
|
328
|
+
window['LOGLEVEL'] = "info";
|
|
329
|
+
|
|
330
|
+
|
|
331
|
+
|
|
332
|
+
window['FRAMEWORK_OPTIONS'] = {"name":"@storybook/react-webpack5","options":{"legacyRootApi":true}};
|
|
333
|
+
|
|
334
|
+
|
|
335
|
+
|
|
336
|
+
|
|
337
|
+
|
|
338
|
+
window['FEATURES'] = {"warnOnLegacyHierarchySeparator":true,"buildStoriesJson":false,"storyStoreV7":true,"argTypeTargetsV7":true,"legacyDecoratorFileOrder":false};
|
|
339
|
+
|
|
340
|
+
|
|
341
|
+
|
|
342
|
+
|
|
343
|
+
|
|
344
|
+
window['STORIES'] = [{"titlePrefix":"","directory":"./src/stories","files":"**/*.mdx","importPathMatcher":"^\\.[\\\\/](?:src[\\\\/]stories(?:[\\\\/](?!\\.)(?:(?:(?!(?:^|[\\\\/])\\.).)*?)[\\\\/]|[\\\\/]|$)(?!\\.)(?=.)[^\\\\/]*?\\.mdx)$"},{"titlePrefix":"","directory":"./src/stories","files":"**/*.stories.@(js|jsx|ts|tsx)","importPathMatcher":"^\\.[\\\\/](?:src[\\\\/]stories(?:[\\\\/](?!\\.)(?:(?:(?!(?:^|[\\\\/])\\.).)*?)[\\\\/]|[\\\\/]|$)(?!\\.)(?=.)[^\\\\/]*?\\.stories\\.(js|jsx|ts|tsx))$"}];
|
|
345
|
+
|
|
346
|
+
|
|
347
|
+
|
|
348
|
+
window['DOCS_OPTIONS'] = {"defaultName":"Docs","autodocs":"tag"};</script><script type="module">import './sb-preview/runtime.js';
|
|
349
|
+
|
|
350
|
+
|
|
351
|
+
import './runtime~main.55585f00.iframe.bundle.js';
|
|
352
|
+
|
|
353
|
+
import './385.7e265f0d.iframe.bundle.js';
|
|
354
|
+
|
|
355
|
+
import './main.612c6447.iframe.bundle.js';</script></body></html>
|