components-pressable-pressable-web-stories.47f43610.iframe.bundle.js

"use strict";(self.webpackChunk_leather_io_ui=self.webpackChunk_leather_io_ui||[]).push([[3490],{"./src/components/pressable/pressable.web.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{AlignmentExample:()=>AlignmentExample,Disabled:()=>Disabled,Pressable:()=>Pressable,WithButtons:()=>WithButtons,WithPadding:()=>WithPadding,__namedExportsOrder:()=>__namedExportsOrder,default:()=>__WEBPACK_DEFAULT_EXPORT__});var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.js"),leather_styles_jsx__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./leather-styles/jsx/index.js"),_components_button_button_web__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./src/components/button/button.web.tsx"),_components_item_layout_item_layout_with_buttons_web__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./src/components/item-layout/item-layout-with-buttons.web.tsx"),_components_item_layout_item_layout_web__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("./src/components/item-layout/item-layout.web.tsx"),_components_pressable_pressable_web__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__("./src/components/pressable/pressable.web.tsx"),_icons_copy_icon_web__WEBPACK_IMPORTED_MODULE_6__=__webpack_require__("./src/icons/copy-icon.web.tsx"),_icons_qr_code_icon_web__WEBPACK_IMPORTED_MODULE_7__=__webpack_require__("./src/icons/qr-code-icon.web.tsx"),_avatar_btc_avatar_icon_web__WEBPACK_IMPORTED_MODULE_8__=__webpack_require__("./src/components/avatar/btc-avatar-icon.web.tsx");const __WEBPACK_DEFAULT_EXPORT__={component:_components_pressable_pressable_web__WEBPACK_IMPORTED_MODULE_5__.oz,tags:["autodocs"],title:"Pressable",parameters:{controls:{include:[]}}};function ExamplePressableContent(){return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_item_layout_item_layout_web__WEBPACK_IMPORTED_MODULE_4__.E,{showChevron:!0,img:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_avatar_btc_avatar_icon_web__WEBPACK_IMPORTED_MODULE_8__.E,{}),titleLeft:"Label",captionLeft:"Caption",titleRight:"1,000.00 ABC",captionRight:"$1,000.00"})}const Pressable={parameters:{docs:{description:{story:"`Pressable` has its hover state applied with a before pseudo element, so the content aligns independently from its hover state background."}}},args:{onClick:()=>{},children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(ExamplePressableContent,{})}},Disabled={args:{disabled:!0,onClick:()=>{},children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_item_layout_item_layout_web__WEBPACK_IMPORTED_MODULE_4__.E,{showChevron:!0,img:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_avatar_btc_avatar_icon_web__WEBPACK_IMPORTED_MODULE_8__.E,{}),titleLeft:"Label",captionLeft:"Caption",titleRight:"1,000.00 ABC",captionRight:"$1,000.00"})}},WithButtons={args:{children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_item_layout_item_layout_with_buttons_web__WEBPACK_IMPORTED_MODULE_3__.F,{img:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_avatar_btc_avatar_icon_web__WEBPACK_IMPORTED_MODULE_8__.E,{}),title:"Label",caption:"Caption",buttons:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment,{children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_button_button_web__WEBPACK_IMPORTED_MODULE_2__.$,{variant:"ghost",children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_icons_copy_icon_web__WEBPACK_IMPORTED_MODULE_6__.T,{})}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_button_button_web__WEBPACK_IMPORTED_MODULE_2__.$,{variant:"ghost",children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_icons_qr_code_icon_web__WEBPACK_IMPORTED_MODULE_7__.y,{})})]})})}},AlignmentExample={parameters:{docs:{description:{story:"Demonstrates the component alignment in combination with its hover state"}}},decorators:[Story=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(leather_styles_jsx__WEBPACK_IMPORTED_MODULE_1__.I4.div,{borderLeft:"2px solid",borderColor:"red.background-secondary",py:"space.06",children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(leather_styles_jsx__WEBPACK_IMPORTED_MODULE_1__.I4.h1,{textStyle:"heading.04",mb:"space.04",children:"Left aligned header"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(Story,{})]})],args:{onClick:()=>{},children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(ExamplePressableContent,{})}},WithPadding={parameters:{docs:{description:{story:"In some layouts, it's necessary to contain the bounds of the element's pseudo element hover background. Wrap the component in a div with padding `space.03` to achieve this"}}},decorators:[Story=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(leather_styles_jsx__WEBPACK_IMPORTED_MODULE_1__.I4.div,{border:"2px solid",borderColor:"red.background-secondary",p:"space.03",children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(Story,{})})],args:{onClick:()=>{},children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(ExamplePressableContent,{})}},__namedExportsOrder=["Pressable","Disabled","WithButtons","AlignmentExample","WithPadding"]},"./src/icons/checkmark-icon.web.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{N:()=>CheckmarkIcon});var _path,jsx_runtime=__webpack_require__("../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.js"),react=__webpack_require__("../../node_modules/.pnpm/react@18.2.0/node_modules/react/index.js");function _extends(){return _extends=Object.assign?Object.assign.bind():function(n){for(var e=1;e<arguments.length;e++){var t=arguments[e];for(var r in t)({}).hasOwnProperty.call(t,r)&&(n[r]=t[r])}return n},_extends.apply(null,arguments)}const checkmark_16_16=function SvgCheckmark1616(props){return react.createElement("svg",_extends({xmlns:"http://www.w3.org/2000/svg",width:16,height:16,fill:"none",viewBox:"0 0 16 16"},props),_path||(_path=react.createElement("path",{stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:1.5,d:"M1.833 10.063 6 13.5l8.167-11"})))};var checkmark_24_24_path;function checkmark_24_24_extends(){return checkmark_24_24_extends=Object.assign?Object.assign.bind():function(n){for(var e=1;e<arguments.length;e++){var t=arguments[e];for(var r in t)({}).hasOwnProperty.call(t,r)&&(n[r]=t[r])}return n},checkmark_24_24_extends.apply(null,arguments)}const checkmark_24_24=function SvgCheckmark2424(props){return react.createElement("svg",checkmark_24_24_extends({xmlns:"http://www.w3.org/2000/svg",width:24,height:24,fill:"none",viewBox:"0 0 24 24"},props),checkmark_24_24_path||(checkmark_24_24_path=react.createElement("path",{stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"m3 15 6.294 5L21 4"})))};var icon_web=__webpack_require__("./src/icons/icon/icon.web.tsx");const CheckmarkIcon=(0,react.forwardRef)((({variant,...props},ref)=>"small"===variant?(0,jsx_runtime.jsx)(icon_web.I,{ref,...props,children:(0,jsx_runtime.jsx)(checkmark_16_16,{})}):(0,jsx_runtime.jsx)(icon_web.I,{ref,...props,children:(0,jsx_runtime.jsx)(checkmark_24_24,{})})));try{CheckmarkIcon.displayName="CheckmarkIcon",CheckmarkIcon.__docgenInfo={description:"",displayName:"CheckmarkIcon",props:{variant:{defaultValue:null,description:"",name:"variant",required:!1,type:{name:"enum",value:[{value:'"default"'},{value:'"small"'}]}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/icons/checkmark-icon.web.tsx#CheckmarkIcon"]={docgenInfo:CheckmarkIcon.__docgenInfo,name:"CheckmarkIcon",path:"src/icons/checkmark-icon.web.tsx#CheckmarkIcon"})}catch(__react_docgen_typescript_loader_error){}},"./src/icons/chevron-right-icon.web.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{v:()=>ChevronRightIcon});var _path,jsx_runtime=__webpack_require__("../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.js"),react=__webpack_require__("../../node_modules/.pnpm/react@18.2.0/node_modules/react/index.js");function _extends(){return _extends=Object.assign?Object.assign.bind():function(n){for(var e=1;e<arguments.length;e++){var t=arguments[e];for(var r in t)({}).hasOwnProperty.call(t,r)&&(n[r]=t[r])}return n},_extends.apply(null,arguments)}const chevron_right_16_16=function SvgChevronRight1616(props){return react.createElement("svg",_extends({xmlns:"http://www.w3.org/2000/svg",width:16,height:16,fill:"none",viewBox:"0 0 16 16"},props),_path||(_path=react.createElement("path",{stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:1.5,d:"m6.138 12 3.529-3.529a.667.667 0 0 0 0-.942L6.138 4"})))};var chevron_right_24_24_path;function chevron_right_24_24_extends(){return chevron_right_24_24_extends=Object.assign?Object.assign.bind():function(n){for(var e=1;e<arguments.length;e++){var t=arguments[e];for(var r in t)({}).hasOwnProperty.call(t,r)&&(n[r]=t[r])}return n},chevron_right_24_24_extends.apply(null,arguments)}const chevron_right_24_24=function SvgChevronRight2424(props){return react.createElement("svg",chevron_right_24_24_extends({xmlns:"http://www.w3.org/2000/svg",width:24,height:24,fill:"none",viewBox:"0 0 24 24"},props),chevron_right_24_24_path||(chevron_right_24_24_path=react.createElement("path",{stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"m9 4 7.293 7.293a1 1 0 0 1 0 1.414L9 20"})))};var icon_web=__webpack_require__("./src/icons/icon/icon.web.tsx");const ChevronRightIcon=(0,react.forwardRef)((({variant,...props},ref)=>"small"===variant?(0,jsx_runtime.jsx)(icon_web.I,{ref,...props,children:(0,jsx_runtime.jsx)(chevron_right_16_16,{})}):(0,jsx_runtime.jsx)(icon_web.I,{ref,...props,children:(0,jsx_runtime.jsx)(chevron_right_24_24,{})})));try{ChevronRightIcon.displayName="ChevronRightIcon",ChevronRightIcon.__docgenInfo={description:"",displayName:"ChevronRightIcon",props:{variant:{defaultValue:null,description:"",name:"variant",required:!1,type:{name:"enum",value:[{value:'"default"'},{value:'"small"'}]}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/icons/chevron-right-icon.web.tsx#ChevronRightIcon"]={docgenInfo:ChevronRightIcon.__docgenInfo,name:"ChevronRightIcon",path:"src/icons/chevron-right-icon.web.tsx#ChevronRightIcon"})}catch(__react_docgen_typescript_loader_error){}},"./src/icons/copy-icon.web.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{T:()=>CopyIcon});var _path,jsx_runtime=__webpack_require__("../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.js"),react=__webpack_require__("../../node_modules/.pnpm/react@18.2.0/node_modules/react/index.js");function _extends(){return _extends=Object.assign?Object.assign.bind():function(n){for(var e=1;e<arguments.length;e++){var t=arguments[e];for(var r in t)({}).hasOwnProperty.call(t,r)&&(n[r]=t[r])}return n},_extends.apply(null,arguments)}const copy_16_16=function SvgCopy1616(props){return react.createElement("svg",_extends({xmlns:"http://www.w3.org/2000/svg",width:16,height:16,fill:"none",viewBox:"0 0 16 16"},props),_path||(_path=react.createElement("path",{stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:1.5,d:"M5.833 5.833V2.167c0-.184.15-.333.334-.333h7.667c.184 0 .333.149.333.333v7.667c0 .184-.15.333-.333.333h-3.667m-.333-4.333H2.167a.333.333 0 0 0-.333.333v7.667c0 .184.149.333.333.333h7.667c.184 0 .333-.15.333-.333V6.167a.333.333 0 0 0-.333-.333"})))};var copy_24_24_path;function copy_24_24_extends(){return copy_24_24_extends=Object.assign?Object.assign.bind():function(n){for(var e=1;e<arguments.length;e++){var t=arguments[e];for(var r in t)({}).hasOwnProperty.call(t,r)&&(n[r]=t[r])}return n},copy_24_24_extends.apply(null,arguments)}const copy_24_24=function SvgCopy2424(props){return react.createElement("svg",copy_24_24_extends({xmlns:"http://www.w3.org/2000/svg",width:24,height:24,fill:"none",viewBox:"0 0 24 24"},props),copy_24_24_path||(copy_24_24_path=react.createElement("path",{stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M9 9V3.5a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 .5.5v11a.5.5 0 0 1-.5.5H15m-.5-6h-11a.5.5 0 0 0-.5.5v11a.5.5 0 0 0 .5.5h11a.5.5 0 0 0 .5-.5v-11a.5.5 0 0 0-.5-.5"})))};var icon_web=__webpack_require__("./src/icons/icon/icon.web.tsx");const CopyIcon=(0,react.forwardRef)((({variant,...props},ref)=>"small"===variant?(0,jsx_runtime.jsx)(icon_web.I,{ref,...props,children:(0,jsx_runtime.jsx)(copy_16_16,{})}):(0,jsx_runtime.jsx)(icon_web.I,{ref,...props,children:(0,jsx_runtime.jsx)(copy_24_24,{})})));try{CopyIcon.displayName="CopyIcon",CopyIcon.__docgenInfo={description:"",displayName:"CopyIcon",props:{variant:{defaultValue:null,description:"",name:"variant",required:!1,type:{name:"enum",value:[{value:'"default"'},{value:'"small"'}]}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/icons/copy-icon.web.tsx#CopyIcon"]={docgenInfo:CopyIcon.__docgenInfo,name:"CopyIcon",path:"src/icons/copy-icon.web.tsx#CopyIcon"})}catch(__react_docgen_typescript_loader_error){}},"./src/icons/icon/icon.web.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{I:()=>Icon});var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.js"),react__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("../../node_modules/.pnpm/react@18.2.0/node_modules/react/index.js"),leather_styles_tokens__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./leather-styles/tokens/index.js");const Icon=(0,react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)((({children,...props},ref)=>{const child=react__WEBPACK_IMPORTED_MODULE_1__.Children.only(children);return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment,{children:react__WEBPACK_IMPORTED_MODULE_1__.cloneElement(child,{color:(0,leather_styles_tokens__WEBPACK_IMPORTED_MODULE_2__.S)("colors.ink.action-primary-default"),ref,...props})})}));try{Icon.displayName="Icon",Icon.__docgenInfo={description:"",displayName:"Icon",props:{variant:{defaultValue:null,description:"",name:"variant",required:!1,type:{name:"enum",value:[{value:'"default"'},{value:'"small"'}]}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/icons/icon/icon.web.tsx#Icon"]={docgenInfo:Icon.__docgenInfo,name:"Icon",path:"src/icons/icon/icon.web.tsx#Icon"})}catch(__react_docgen_typescript_loader_error){}},"./src/icons/qr-code-icon.web.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{y:()=>QrCodeIcon});var _path,_path2,_path3,jsx_runtime=__webpack_require__("../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.js"),react=__webpack_require__("../../node_modules/.pnpm/react@18.2.0/node_modules/react/index.js");function _extends(){return _extends=Object.assign?Object.assign.bind():function(n){for(var e=1;e<arguments.length;e++){var t=arguments[e];for(var r in t)({}).hasOwnProperty.call(t,r)&&(n[r]=t[r])}return n},_extends.apply(null,arguments)}const qr_code_16_16=function SvgQrCode1616(props){return react.createElement("svg",_extends({xmlns:"http://www.w3.org/2000/svg",width:16,height:17,fill:"none",viewBox:"0 0 16 17"},props),_path||(_path=react.createElement("path",{stroke:"currentColor",strokeWidth:1.5,d:"M2.75 3.345h3.5v3.5h-3.5zm0 7h3.5v3.5h-3.5zm7-7h3.5v3.5h-3.5zm-.25 6.75v1.787h2m1.3 2.739v-2.317h1.231"})),_path2||(_path2=react.createElement("path",{fill:"currentColor",d:"M9 13.445h1.243v1.2H9z"})),_path3||(_path3=react.createElement("path",{stroke:"currentColor",strokeWidth:1.5,d:"M13.402 10.345H11.5"})))};var qr_code_24_24_path,qr_code_24_24_path2;function qr_code_24_24_extends(){return qr_code_24_24_extends=Object.assign?Object.assign.bind():function(n){for(var e=1;e<arguments.length;e++){var t=arguments[e];for(var r in t)({}).hasOwnProperty.call(t,r)&&(n[r]=t[r])}return n},qr_code_24_24_extends.apply(null,arguments)}const qr_code_24_24=function SvgQrCode2424(props){return react.createElement("svg",qr_code_24_24_extends({xmlns:"http://www.w3.org/2000/svg",width:24,height:25,fill:"none",viewBox:"0 0 24 25"},props),qr_code_24_24_path||(qr_code_24_24_path=react.createElement("path",{fill:"currentColor",fillRule:"evenodd",d:"M3 5.595a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2zm6 0H5v4h4zm-6 10a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2zm6 0H5v4h4zm4-10a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-4a2 2 0 0 1-2-2zm6 0h-4v4h4zm-5 8a1 1 0 0 1 1 1v1h1a1 1 0 1 1 0 2h-2a1 1 0 0 1-1-1v-2a1 1 0 0 1 1-1m3 1a1 1 0 0 1 1-1h2a1 1 0 1 1 0 2h-2a1 1 0 0 1-1-1m0 4a1 1 0 0 1 1-1h2a1 1 0 1 1 0 2h-1v1a1 1 0 1 1-2 0z",clipRule:"evenodd"})),qr_code_24_24_path2||(qr_code_24_24_path2=react.createElement("path",{fill:"currentColor",d:"M15 20.595a1 1 0 1 1-2 0 1 1 0 0 1 2 0"})))};var icon_web=__webpack_require__("./src/icons/icon/icon.web.tsx");const QrCodeIcon=(0,react.forwardRef)((({variant,...props},ref)=>"small"===variant?(0,jsx_runtime.jsx)(icon_web.I,{ref,...props,children:(0,jsx_runtime.jsx)(qr_code_16_16,{})}):(0,jsx_runtime.jsx)(icon_web.I,{ref,...props,children:(0,jsx_runtime.jsx)(qr_code_24_24,{})})));try{QrCodeIcon.displayName="QrCodeIcon",QrCodeIcon.__docgenInfo={description:"",displayName:"QrCodeIcon",props:{variant:{defaultValue:null,description:"",name:"variant",required:!1,type:{name:"enum",value:[{value:'"default"'},{value:'"small"'}]}}}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/icons/qr-code-icon.web.tsx#QrCodeIcon"]={docgenInfo:QrCodeIcon.__docgenInfo,name:"QrCodeIcon",path:"src/icons/qr-code-icon.web.tsx#QrCodeIcon"})}catch(__react_docgen_typescript_loader_error){}}}]);