@sap-ux/ui-components/storybook/UIButton-story.b80e6772.iframe.bundle.js

SAP UI Components Library

"use strict";(()=>{var M=Object.defineProperty,z=Object.defineProperties;var j=Object.getOwnPropertyDescriptors;var N=Object.getOwnPropertySymbols;var O=Object.prototype.hasOwnProperty,W=Object.prototype.propertyIsEnumerable;var D=(p,i,u)=>i in p?M(p,i,{enumerable:!0,configurable:!0,writable:!0,value:u}):p[i]=u,h=(p,i)=>{for(var u in i||(i={}))O.call(i,u)&&D(p,u,i[u]);if(N)for(var u of N(i))W.call(i,u)&&D(p,u,i[u]);return p},B=(p,i)=>z(p,j(i));(self.webpackChunk_sap_ux_ui_components=self.webpackChunk_sap_ux_ui_components||[]).push([[685],{"./stories/UIButton.story.tsx"(p,i,u){var v=this&&this.__createBinding||(Object.create?(function(m,r,c,s){s===void 0&&(s=c);var l=Object.getOwnPropertyDescriptor(r,c);(!l||("get"in l?!r.__esModule:l.writable||l.configurable))&&(l={enumerable:!0,get:function(){return r[c]}}),Object.defineProperty(m,s,l)}):(function(m,r,c,s){s===void 0&&(s=c),m[s]=r[c]})),T=this&&this.__setModuleDefault||(Object.create?(function(m,r){Object.defineProperty(m,"default",{enumerable:!0,value:r})}):function(m,r){m.default=r}),w=this&&this.__importStar||(function(){var m=function(r){return m=Object.getOwnPropertyNames||function(c){var s=[];for(var l in c)Object.prototype.hasOwnProperty.call(c,l)&&(s[s.length]=l);return s},m(r)};return function(r){if(r&&r.__esModule)return r;var c={};if(r!=null)for(var s=m(r),l=0;l<s.length;l++)s[l]!=="default"&&v(c,r,s[l]);return T(c,r),c}})();Object.defineProperty(i,"__esModule",{value:!0}),i.defaultUsage=void 0;const t=w(u("../../node_modules/.pnpm/react@16.14.0/node_modules/react/index.js")),n=u("../../node_modules/.pnpm/@fluentui+react@8.125.6_@types+react-dom@16.9.25_@types+react@16.14.69__@types+react@16_03684c25d5c3502754322356d0aa96d9/node_modules/@fluentui/react/lib-commonjs/index.js"),e=u("./src/components/UIButton/index.tsx"),y=u("./src/components/UIContextualMenu/index.tsx"),o=u("./src/components/Icons.tsx"),b=u("./src/components/UITreeDropdown/index.tsx");(0,o.initIcons)(),i.default={title:"Basic Inputs/Buttons"};const a={childrenGap:40},_=()=>{const[m,r]=(0,t.useState)(""),[c,s]=(0,t.useState)({btn1:!0,btn2:!0,btn3:!0}),l=f=>{r(f)},S=f=>{const I=B(h({},c),{[f]:!c[f]});s(I)},d=(f,I,k)=>{const E={key:f,text:I};return k&&(E.iconProps={iconName:o.UiIcons.GuidedDevelopment}),E},x=d("option1","option 1"),P=[d("option2","option 2"),d("option3","option 3")],U=P.map(f=>B(h({},f),{iconProps:{iconName:o.UiIcons.GuidedDevelopment}})),A=[U[0],B(h({},U[1]),{iconProps:void 0})],g=()=>[d("option1","option 1"),d("rename","Simulate rename"),{key:"",itemType:y.UIContextualMenuItemType.Divider},d("option3","option 3"),d("option4","option 4"),d("option5","option 5"),{key:"",itemType:y.UIContextualMenuItemType.Header,text:"Dummy header"},d("option6","option 6"),d("option7","option 7"),d("option8","option 8"),d("option10","option 10"),d("option11","option 11"),d("option12","option 12")],[C,H]=(0,t.useState)(g());return t.default.createElement(n.Stack,{tokens:a},t.default.createElement(n.Stack,{tokens:a},t.default.createElement(n.Text,{variant:"large",className:"textColor",block:!0},"Primary Button"),t.default.createElement(n.Stack,{horizontal:!0,tokens:a},t.default.createElement(e.UIDefaultButton,{primary:!0},"Primary button"),t.default.createElement(e.UIDefaultButton,{primary:!0,disabled:!0},"Primary disabled button"),t.default.createElement(e.UIDefaultButton,{primary:!0,iconProps:{iconName:o.UiIcons.Calendar}},"Primary button with icon"),t.default.createElement(e.UIDefaultButton,{primary:!0,checked:!0},"Primary checked button"))),t.default.createElement(n.Stack,{tokens:a},t.default.createElement(n.Text,{variant:"large",className:"textColor",block:!0},"Secondary Button"),t.default.createElement(n.Stack,{horizontal:!0,tokens:a},t.default.createElement(e.UIDefaultButton,null,"Secondary button"),t.default.createElement(e.UIDefaultButton,{disabled:!0},"Secondary disabled button"),t.default.createElement(e.UIDefaultButton,{iconProps:{iconName:o.UiIcons.Calendar}},"Secondary button with icon"),t.default.createElement(e.UIDefaultButton,{checked:!0},"Secondary checked button"))),t.default.createElement(n.Stack,{tokens:a},t.default.createElement(n.Text,{variant:"large",className:"textColor",block:!0},"alert Button"),t.default.createElement(n.Stack,{horizontal:!0,tokens:a},t.default.createElement(e.UIDefaultButton,{alert:!0},"Alert button"),t.default.createElement(e.UIDefaultButton,{alert:!0,disabled:!0},"Alert disabled button"),t.default.createElement(e.UIDefaultButton,{alert:!0,iconProps:{iconName:o.UiIcons.Calendar}},"alert button with icon"),t.default.createElement(e.UIDefaultButton,{alert:!0,checked:!0},"Alert checked button"))),t.default.createElement(n.Stack,{tokens:a},t.default.createElement(n.Text,{variant:"large",className:"textColor",block:!0},"Transparent Button"),t.default.createElement(n.Stack,{horizontal:!0,tokens:a},t.default.createElement(e.UIDefaultButton,{transparent:!0},"Transparent button"),t.default.createElement(e.UIDefaultButton,{transparent:!0,disabled:!0},"Transparent disabled button"),t.default.createElement(e.UIDefaultButton,{transparent:!0,iconProps:{iconName:o.UiIcons.Calendar}},"Transparent button with icon"),t.default.createElement(e.UIDefaultButton,{transparent:!0,checked:!0},"Transparent checked button"))),t.default.createElement(n.Stack,{tokens:a},t.default.createElement(n.Text,{variant:"large",className:"textColor",block:!0},"Split Button"),t.default.createElement(n.Stack,{horizontal:!0,tokens:a},t.default.createElement(e.UISplitButton,{id:"test",callback:l.bind(this),menuItems:P,button:x}),t.default.createElement(e.UISplitButton,{id:"test2",callback:l.bind(this),menuItems:U,button:x}),t.default.createElement(e.UISplitButton,{id:"test3",callback:f=>{if(f==="rename"){const I=g(),k=I.find(E=>E.key==="rename");k&&(k.text="Renamed"),H(I)}l(f)},menuItems:C,button:x}),t.default.createElement("span",null,"selection: ",m))),t.default.createElement(n.Stack,{tokens:a},t.default.createElement(n.Text,{variant:"large",className:"textColor",block:!0},"Icon Button"),t.default.createElement(n.Stack,{horizontal:!0,tokens:a},t.default.createElement(e.UIIconButton,{id:"undo-button-action",iconProps:{iconName:o.UiIcons.Undo},title:"Undo"}),t.default.createElement(e.UIIconButton,{id:"add-button-action",iconProps:{iconName:o.UiIcons.Add},title:"Undo"}),t.default.createElement(e.UIIconButton,{id:"wide-button-action",sizeType:e.UIIconButtonSizes.Wide,iconProps:{iconName:o.UiIcons.QuestionMarkWithChevron},title:"QuestionMarkWithChevron"}),t.default.createElement(e.UIIconButton,{id:"undo-disabled-button-action",iconProps:{iconName:o.UiIcons.Source},disabled:!0,title:"Undo"}))),t.default.createElement(n.Stack,{tokens:a},t.default.createElement(n.Text,{variant:"large",className:"textColor",block:!0},"Icon Button - Checked"),t.default.createElement(n.Stack,{horizontal:!0,tokens:a},t.default.createElement(e.UIIconButton,{id:"btn1",iconProps:{iconName:o.UiIcons.Undo},checked:c.btn1,onClick:S.bind(window,"btn1"),title:"Undo"}),t.default.createElement(e.UIIconButton,{id:"btn2",checked:c.btn2,iconProps:{iconName:o.UiIcons.LayoutLeft},onClick:S.bind(window,"btn2"),title:"LayoutLeft"}),t.default.createElement(e.UIIconButton,{id:"btn3",sizeType:e.UIIconButtonSizes.Wide,checked:c.btn3,iconProps:{iconName:o.UiIcons.QuestionMarkWithChevron},onClick:S.bind(window,"btn3"),title:"Wide"}))),t.default.createElement(n.Stack,{tokens:a},t.default.createElement(n.Text,{variant:"large",className:"textColor",block:!0},"Action Button"),t.default.createElement(n.Stack,{horizontal:!0,tokens:a},t.default.createElement(e.UIActionButton,{iconProps:{iconName:o.UiIcons.Calendar}},"Standard Action"),t.default.createElement(e.UIActionButton,{disabled:!0,iconProps:{iconName:o.UiIcons.Calendar}},"Standard Action - disabled"),t.default.createElement(e.UIActionButton,{iconProps:{iconName:o.UiIcons.Bulb}},"Icon with color"),t.default.createElement(e.UIActionButton,{disabled:!0,iconProps:{iconName:o.UiIcons.Bulb}},"Icon with color - disabled")),t.default.createElement(n.Stack,{horizontal:!0,tokens:a},t.default.createElement(e.UIActionButton,{iconProps:{iconName:o.UiIcons.Bulb},menuProps:{directionalHint:b.UIDirectionalHint.bottomRightEdge,directionalHintFixed:!1,items:U}},"Button with menu"),t.default.createElement(e.UIActionButton,{iconProps:{iconName:o.UiIcons.Bulb},menuProps:{directionalHint:b.UIDirectionalHint.bottomRightEdge,directionalHintFixed:!1,items:A}},"Button with mixture menu"))),t.default.createElement(n.Stack,{tokens:a},t.default.createElement(n.Text,{variant:"large",className:"textColor",block:!0},"Small Button"),t.default.createElement(n.Stack,{horizontal:!0,tokens:a},t.default.createElement(e.UISmallButton,{primary:!0},"Clear All"))),t.default.createElement(n.Stack,{tokens:a},t.default.createElement(n.Text,{variant:"large",className:"textColor",block:!0},"Dropdown Button"),t.default.createElement(n.Stack,{horizontal:!0,tokens:a},t.default.createElement(e.UIIconButton,{iconProps:{iconName:o.UiIcons.Add},menuProps:{directionalHint:b.UIDirectionalHint.bottomRightEdge,directionalHintFixed:!1,items:P}}),t.default.createElement(e.UIIconButton,{iconProps:{iconName:o.UiIcons.Add},menuProps:{directionalHint:b.UIDirectionalHint.bottomRightEdge,directionalHintFixed:!1,items:U}}),t.default.createElement(e.UIIconButton,{iconProps:{iconName:o.UiIcons.Add},menuProps:{directionalHint:b.UIDirectionalHint.bottomRightEdge,directionalHintFixed:!1,items:C}}))))};i.defaultUsage=_}}]);})();