Merge remote-tracking branch 'origin/next' into kasper/context-prop

docs/_snippets/add-localize-package-to-polyfills.md

@@ -0,0 +1,4 @@
+```ts filename="src/polyfills.ts" renderer="angular" language="ts"
+import '@angular/localize/init';
+```
+

docs/_snippets/addon-actions-action-function.md

@@ -0,0 +1,94 @@
+```ts filename="Button.stories.ts" renderer="angular" language="ts"
+import type { Meta } from '@storybook/angular';
+import { action } from '@storybook/addon-actions';
+
+import Button from './button.component';
+
+const meta: Meta<Button> {
+  component: Button,
+  args: {
+    // 👇 Create an action that appears when the onClick event is fired
+    onClick: action('on-click'),
+  },
+};
+
+export default meta;
+```
+
+```js filename="Button.stories.js" renderer="common" language="js"
+import { action } from '@storybook/addon-actions';
+
+import Button from './Button';
+
+export default {
+  component: Button,
+  args: {
+    // 👇 Create an action that appears when the onClick event is fired
+    onClick: action('on-click'),
+  },
+};
+```
+
+```ts filename="Button.stories.ts" renderer="common" language="ts-4-9"
+// Replace your-framework with the name of your framework
+import type { Meta } from '@storybook/your-framework';
+import { action } from '@storybook/addon-actions';
+
+import Button from './Button';
+
+const meta {
+  component: Button,
+  args: {
+    // 👇 Create an action that appears when the onClick event is fired
+    onClick: action('on-click'),
+  },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+```
+
+```ts filename="Button.stories.ts" renderer="common" language="ts"
+// Replace your-framework with the name of your framework
+import type { Meta } from '@storybook/your-framework';
+import { action } from '@storybook/addon-actions';
+
+import Button from './Button';
+
+const meta: Meta<typeof Button> {
+  component: Button,
+  args: {
+    // 👇 Create an action that appears when the onClick event is fired
+    onClick: action('on-click'),
+  },
+};
+
+export default meta;
+```
+
+```ts filename="Button.stories.js" renderer="web-components" language="js"
+import { action } from '@storybook/addon-actions';
+
+export default {
+  component: 'demo-button',
+  args: {
+    // 👇 Create an action that appears when the onClick event is fired
+    onClick: action('on-click'),
+  },
+};
+```
+
+```ts filename="Button.stories.ts" renderer="web-components" language="ts"
+import type { Meta } from '@storybook/angular';
+import { action } from '@storybook/addon-actions';
+
+const meta: Meta {
+  component: 'demo-button',
+  args: {
+    // 👇 Create an action that appears when the onClick event is fired
+    onClick: action('on-click'),
+  },
+};
+
+export default meta;
+```
+

docs/_snippets/addon-consume-and-update-globaltype.md

@@ -0,0 +1,41 @@
+```js filename="your-addon-register-file.js" renderer="common" language="js"
+import React, { useCallback } from 'react';
+
+import { FORCE_RE_RENDER } from '@storybook/core-events';
+import { useGlobals } from '@storybook/manager-api';
+
+import { IconButton } from '@storybook/components';
+import { OutlineIcon } from '@storybook/icons';
+
+import { addons } from '@storybook/preview-api';
+
+const ExampleToolbar = () => {
+  const [globals, updateGlobals] = useGlobals();
+
+  const isActive = globals['my-param-key'] || false;
+
+  // Function that will update the global value and trigger a UI refresh.
+  const refreshAndUpdateGlobal = () => {
+    // Updates Storybook global value
+    updateGlobals({
+      ['my-param-key']: !isActive,
+    }),
+      // Invokes Storybook's addon API method (with the FORCE_RE_RENDER) event to trigger a UI refresh
+      addons.getChannel().emit(FORCE_RE_RENDER);
+  };
+
+  const toggleOutline = useCallback(() => refreshAndUpdateGlobal(), [isActive]);
+
+  return (
+    <IconButton
+      key="Example"
+      active={isActive}
+      title="Show a Storybook toolbar"
+      onClick={toggleOutline}
+    >
+      <OutlineIcon />
+    </IconButton>
+  );
+};
+```
+

docs/_snippets/addon-consume-globaltype.md

@@ -0,0 +1,41 @@
+```js filename="your-addon-register-file.js" renderer="common" language="js"
+import React from 'react';
+
+import { useGlobals } from '@storybook/manager-api';
+
+import { AddonPanel, Placeholder, Separator, Source, Spaced, Title } from '@storybook/components';
+
+import { MyThemes } from '../my-theme-folder/my-theme-file';
+
+// Function to obtain the intended theme
+const getTheme = (themeName) => {
+  return MyThemes[themeName];
+};
+
+const ThemePanel = (props) => {
+  const [{ theme: themeName }] = useGlobals();
+
+  const selectedTheme = getTheme(themeName);
+
+  return (
+    <AddonPanel {...props}>
+      {selectedTheme ? (
+        <Spaced row={3} outer={1}>
+          <Title>{selectedTheme.name}</Title>
+          <p>The full theme object</p>
+          <Source
+            code={JSON.stringify(selectedTheme, null, 2)}
+            language="js"
+            copyable
+            padded
+            showLineNumbers
+          />
+        </Spaced>
+      ) : (
+        <Placeholder>No theme selected</Placeholder>
+      )}
+    </AddonPanel>
+  );
+};
+```
+