storybook-addon-pseudo-states 3.0.0 → 3.0.1
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/dist/manager.mjs +2 -2
- package/dist/manager.mjs.map +1 -1
- package/package.json +1 -1
package/dist/manager.mjs
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { addons, types, useGlobals } from '@storybook/manager-api';
|
|
2
2
|
import e, { useCallback } from 'react';
|
|
3
3
|
import { WithTooltip, TooltipLinkList, IconButton } from '@storybook/components';
|
|
4
|
-
import { CheckIcon } from '@storybook/icons';
|
|
4
|
+
import { CheckIcon, ButtonIcon } from '@storybook/icons';
|
|
5
5
|
import { styled, color } from '@storybook/theming';
|
|
6
6
|
|
|
7
|
-
var r="storybook/pseudo-states",
|
|
7
|
+
var r="storybook/pseudo-states",n=`${r}/tool`,c="pseudo";var l={hover:"hover",active:"active",focusVisible:"focus-visible",focusWithin:"focus-within",focus:"focus",visited:"visited",link:"link",target:"target"};var b=styled.span(({active:o})=>({color:o?color.secondary:"inherit"})),_=styled(CheckIcon)(({active:o})=>({opacity:o?1:0,path:{fill:o?color.secondary:"inherit"}})),a=Object.keys(l).sort(),f=()=>{let[o,d]=useGlobals(),s=o[c],i=useCallback(t=>s?s[t]===!0:!1,[s]),T=useCallback(t=>()=>{d({[c]:{...s,[t]:!i(t)}});},[s]);return e.createElement(WithTooltip,{placement:"top",trigger:"click",tooltip:()=>e.createElement(TooltipLinkList,{links:a.map(t=>({id:t,title:e.createElement(b,{active:i(t)},":",l[t]),right:e.createElement(_,{width:12,height:12,active:i(t)}),onClick:T(t),active:i(t)}))})},e.createElement(IconButton,{key:"pseudo-state",title:"Select CSS pseudo states",active:a.some(i)},e.createElement(ButtonIcon,null)))};addons.register(r,()=>{addons.add(n,{type:types.TOOL,title:"CSS pseudo states",match:({viewMode:o})=>o==="story",render:f});});
|
|
8
8
|
//# sourceMappingURL=out.js.map
|
|
9
9
|
//# sourceMappingURL=manager.mjs.map
|
package/dist/manager.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/manager.ts","../src/constants.ts","../src/manager/PseudoStateTool.tsx"],"names":["addons","types","ADDON_ID","TOOL_ID","PARAM_KEY","PSEUDO_STATES","React","useCallback","IconButton","WithTooltip","TooltipLinkList","CheckIcon","useGlobals","styled","color","LinkTitle","active","LinkIcon","options","PseudoStateTool","globals","updateGlobals","pseudo","isActive","option","toggleOption","viewMode"],"mappings":"AAAA,OAAS,UAAAA,EAAQ,SAAAC,MAAa,yBCAvB,IAAMC,EAAW,0BACXC,EAAU,GAAGD,CAAQ,QACrBE,EAAY,SAQlB,IAAMC,EAAgB,CAC3B,MAAO,QACP,OAAQ,SACR,aAAc,gBACd,YAAa,eACb,MAAO,QACP,QAAS,UACT,KAAM,OACN,OAAQ,QACV,ECnBA,OAAOC,GAAS,eAAAC,MAAmB,QACnC,OAAS,cAAAC,EAAY,eAAAC,EAAa,mBAAAC,MAAuB,wBACzD,OAAS,aAAAC,
|
|
1
|
+
{"version":3,"sources":["../src/manager.ts","../src/constants.ts","../src/manager/PseudoStateTool.tsx"],"names":["addons","types","ADDON_ID","TOOL_ID","PARAM_KEY","PSEUDO_STATES","React","useCallback","IconButton","WithTooltip","TooltipLinkList","CheckIcon","ButtonIcon","useGlobals","styled","color","LinkTitle","active","LinkIcon","options","PseudoStateTool","globals","updateGlobals","pseudo","isActive","option","toggleOption","viewMode"],"mappings":"AAAA,OAAS,UAAAA,EAAQ,SAAAC,MAAa,yBCAvB,IAAMC,EAAW,0BACXC,EAAU,GAAGD,CAAQ,QACrBE,EAAY,SAQlB,IAAMC,EAAgB,CAC3B,MAAO,QACP,OAAQ,SACR,aAAc,gBACd,YAAa,eACb,MAAO,QACP,QAAS,UACT,KAAM,OACN,OAAQ,QACV,ECnBA,OAAOC,GAAS,eAAAC,MAAmB,QACnC,OAAS,cAAAC,EAAY,eAAAC,EAAa,mBAAAC,MAAuB,wBACzD,OAAS,aAAAC,EAAW,cAAAC,MAAkB,mBACtC,OAAS,cAAAC,MAAkB,yBAC3B,OAAS,UAAAC,EAAQ,SAAAC,MAAa,qBAI9B,IAAMC,EAAYF,EAAO,KAA2B,CAAC,CAAE,OAAAG,CAAO,KAAO,CACnE,MAAOA,EAASF,EAAM,UAAY,SACpC,EAAE,EAEIG,EAAWJ,EAAOH,CAAS,EAAwB,CAAC,CAAE,OAAAM,CAAO,KAAO,CACxE,QAASA,EAAS,EAAI,EACtB,KAAM,CAAE,KAAMA,EAASF,EAAM,UAAY,SAAU,CACrD,EAAE,EAEII,EAAU,OAAO,KAAKd,CAAa,EAAE,KAAK,EAEnCe,EAAkB,IAAM,CACnC,GAAM,CAACC,EAASC,CAAa,EAAIT,EAAW,EACtCU,EAASF,EAAQjB,CAAS,EAE1BoB,EAAWjB,EACdkB,GACMF,EACEA,EAAOE,CAAM,IAAM,GADN,GAGtB,CAACF,CAAM,CACT,EAEMG,EAAenB,EAClBkB,GAAuC,IAAM,CAC5CH,EAAc,CACZ,CAAClB,CAAS,EAAG,CACX,GAAGmB,EACH,CAACE,CAAM,EAAG,CAACD,EAASC,CAAM,CAC5B,CACF,CAAC,CACH,EACA,CAACF,CAAM,CACT,EAEA,OACEjB,EAAA,cAACG,EAAA,CACC,UAAU,MACV,QAAQ,QACR,QAAS,IACPH,EAAA,cAACI,EAAA,CACC,MAAOS,EAAQ,IAAKM,IAAY,CAC9B,GAAIA,EACJ,MAAOnB,EAAA,cAACU,EAAA,CAAU,OAAQQ,EAASC,CAAM,GAAG,IAAEpB,EAAcoB,CAAM,CAAE,EACpE,MAAOnB,EAAA,cAACY,EAAA,CAAS,MAAO,GAAI,OAAQ,GAAI,OAAQM,EAASC,CAAM,EAAG,EAClE,QAASC,EAAaD,CAAM,EAC5B,OAAQD,EAASC,CAAM,CACzB,EAAE,EACJ,GAGFnB,EAAA,cAACE,EAAA,CACC,IAAI,eACJ,MAAM,2BACN,OAAQW,EAAQ,KAAKK,CAAQ,GAE7BlB,EAAA,cAACM,EAAA,IAAW,CACd,CACF,CAEJ,EF/DAZ,EAAO,SAASE,EAAU,IAAM,CAC9BF,EAAO,IAAIG,EAAS,CAClB,KAAMF,EAAM,KACZ,MAAO,oBACP,MAAO,CAAC,CAAE,SAAA0B,CAAS,IAAMA,IAAa,QACtC,OAAQP,CACV,CAAC,CACH,CAAC","sourcesContent":["import { addons, types } from \"@storybook/manager-api\"\n\nimport { ADDON_ID, TOOL_ID } from \"./constants\"\nimport { PseudoStateTool } from \"./manager/PseudoStateTool\"\n\naddons.register(ADDON_ID, () => {\n addons.add(TOOL_ID, {\n type: types.TOOL,\n title: \"CSS pseudo states\",\n match: ({ viewMode }) => viewMode === \"story\",\n render: PseudoStateTool,\n })\n})\n","export const ADDON_ID = \"storybook/pseudo-states\"\nexport const TOOL_ID = `${ADDON_ID}/tool`\nexport const PARAM_KEY = \"pseudo\"\n\n// Pseudo-elements which are not allowed to have classes applied on them\n// E.g. ::-webkit-scrollbar-thumb.pseudo-hover is not a valid selector\nexport const EXCLUDED_PSEUDO_ELEMENTS = [\"::-webkit-scrollbar-thumb\", \"::-webkit-slider-thumb\"]\n\n// Dynamic pseudo-classes\n// @see https://www.w3.org/TR/2018/REC-selectors-3-20181106/#dynamic-pseudos\nexport const PSEUDO_STATES = {\n hover: \"hover\",\n active: \"active\",\n focusVisible: \"focus-visible\",\n focusWithin: \"focus-within\",\n focus: \"focus\", // must come after its alternatives\n visited: \"visited\",\n link: \"link\",\n target: \"target\",\n} as const\n\nexport type PseudoState = keyof typeof PSEUDO_STATES\n","import React, { useCallback } from \"react\"\nimport { IconButton, WithTooltip, TooltipLinkList } from \"@storybook/components\"\nimport { CheckIcon, ButtonIcon } from \"@storybook/icons\"\nimport { useGlobals } from \"@storybook/manager-api\"\nimport { styled, color } from \"@storybook/theming\"\n\nimport { PARAM_KEY, PSEUDO_STATES } from \"../constants\"\n\nconst LinkTitle = styled.span<{ active?: boolean }>(({ active }) => ({\n color: active ? color.secondary : \"inherit\",\n}))\n\nconst LinkIcon = styled(CheckIcon)<{ active?: boolean }>(({ active }) => ({\n opacity: active ? 1 : 0,\n path: { fill: active ? color.secondary : \"inherit\" },\n}))\n\nconst options = Object.keys(PSEUDO_STATES).sort() as (keyof typeof PSEUDO_STATES)[]\n\nexport const PseudoStateTool = () => {\n const [globals, updateGlobals] = useGlobals()\n const pseudo = globals[PARAM_KEY]\n\n const isActive = useCallback(\n (option: keyof typeof PSEUDO_STATES) => {\n if (!pseudo) return false\n return pseudo[option] === true\n },\n [pseudo],\n )\n\n const toggleOption = useCallback(\n (option: keyof typeof PSEUDO_STATES) => () => {\n updateGlobals({\n [PARAM_KEY]: {\n ...pseudo,\n [option]: !isActive(option),\n },\n })\n },\n [pseudo],\n )\n\n return (\n <WithTooltip\n placement=\"top\"\n trigger=\"click\"\n tooltip={() => (\n <TooltipLinkList\n links={options.map((option) => ({\n id: option,\n title: <LinkTitle active={isActive(option)}>:{PSEUDO_STATES[option]}</LinkTitle>,\n right: <LinkIcon width={12} height={12} active={isActive(option)} />,\n onClick: toggleOption(option),\n active: isActive(option),\n }))}\n />\n )}\n >\n <IconButton\n key=\"pseudo-state\"\n title=\"Select CSS pseudo states\"\n active={options.some(isActive)}\n >\n <ButtonIcon />\n </IconButton>\n </WithTooltip>\n )\n}\n"]}
|