documentation: Clarify description of args - Add example of args controlling more than props

docs/snippets/react/page-story-slots.js.mdx

@@ -0,0 +1,22 @@
+```js
+// Page.stories.js
+
+import React from 'react';
+import Page from './Page';
+
+export default {
+  component: Page,
+  title: 'Page',
+};
+
+const Template = (args, { argTypes }) => (
+  <Page {...args}>
+    <footer>{args.footer}</footer
+  </Page>
+);
+
+export const CustomFooter = Template.bind({});
+CustomFooter.args = {
+  footer: 'Built with Storybook',
+};
+```

docs/snippets/react/page-story-slots.ts.mdx

@@ -0,0 +1,23 @@
+```js
+// Page.stories.js
+
+import React from 'react';
+import { Story, Meta } from '@storybook/react';
+import Page from './Page';
+
+export default {
+  component: Page,
+  title: 'Page',
+} as Meta;
+
+const Template: Story<Page> = (args, { argTypes }) => (
+  <Page {...args}>
+    <footer>{args.footer}</footer
+  </Page>
+);
+
+export const CustomFooter = Template.bind({});
+CustomFooter.args = {
+  footer: 'Built with Storybook',
+};
+```

docs/snippets/vue/button-story-with-args.2.js.mdx

@@ -12,6 +12,8 @@ export default {
 const Template = (args, { argTypes }) => ({
   components: { Button },
   props: Object.keys(argTypes),
+  // Storybook provides all the args in a $props variable.
+  // Each arg is also available as their own name.
   template: '<Button v-bind="$props" v-on="$props" />',
 });
 

docs/snippets/vue/page-story-slots.2.js.mdx

@@ -0,0 +1,25 @@
+```js
+// Page.stories.js
+
+import Page from './Page.vue';
+
+export default {
+  component: Page,
+  title: 'Page',
+};
+
+const Template = (args, { argTypes }) => ({
+  components: { Page },
+  props: Object.keys(argTypes),
+  template: `
+    <page v-bind="$props">
+      <footer v-if="footer" v-slot=footer v-html="footer"/>
+    </page>
+  `,
+});
+
+export const CustomFooter = Template.bind({});
+CustomFooter.args = {
+  footer: '<a href="https://storybook.js.org/">Built with Storybook</a>',
+};
+```

docs/snippets/vue/page-story-slots.3.js.mdx

@@ -0,0 +1,27 @@
+```js
+// Page.stories.js
+
+import Page from './Page.vue';
+
+export default {
+  component: Page,
+  title: 'Page',
+};
+
+const Template = (args, { argTypes }) => ({
+  components: { Page },
+  setup() {
+    return { args };
+  },
+  template: `
+    <page v-bind="$props">
+      <footer v-if="footer" v-slot=footer v-html="footer"/>
+    </page>
+  `,
+});
+
+export const CustomFooter = Template.bind({});
+CustomFooter.args = {
+  footer: '<a href="https://storybook.js.org/">Built with Storybook</a>',
+};
+```

docs/writing-stories/args.md

@@ -2,7 +2,7 @@
 title: 'Args'
 ---
 
-A story is a component with a set of arguments (props, slots, inputs, etc). “Args” are Storybook’s mechanism for defining those arguments as a first class entity that’s machine readable. This allows Storybook and its addons to live edit components. You _do not_ need to change your underlying component code to use args.
+A story is a component with a set of arguments that define how the component is to be rendered. “Args” are Storybook’s mechanism for defining those arguments in a single JavaScript object. Args can be used to dynamically change props, slots, styles, inputs, etc. This allows Storybook and its addons to live edit components. You _do not_ need to change your underlying component code to use args.
 
 When an arg’s value is changed, the component re-renders, allowing you to interact with components in Storybook’s UI via addons that affect args.
 
@@ -100,6 +100,23 @@ Args are useful when writing stories for composite components that are assembled
 
 <!-- prettier-ignore-end -->
 
+## Args can modify any aspect of your component
+
+Args are used in story templates to configure the component appearance just as you would in an application. Here’s an example of how a `footer` arg can be used to populate a child component.
+
+<!-- prettier-ignore-start -->
+
+<CodeSnippets
+  paths={[
+    'react/page-story-slots.js.mdx',
+    'react/page-story-slots.ts.mdx',
+    'vue/page-story-slots.2.js.mdx',
+    'vue/page-story-slots.3.js.mdx',
+  ]}
+/>
+
+<!-- prettier-ignore-end -->
+
 ## Setting args through the URL
 
 Initial args for the currently active story can be overruled by setting the `args` query parameter on the URL. Typically, you would use the Controls addon to handle this automatically, but you can also manually tweak the URL if desired. An example of Storybook URL query params could look like this:
@@ -148,7 +165,7 @@ In Storybook 5 and before we passed the context as the first argument. If you’
 
 <!-- prettier-ignore-start -->
 
-<CodeSnippets 
+<CodeSnippets
   paths={[
     'common/storybook-preview-parameters-old-format.js.mdx'
   ]}
@@ -157,8 +174,8 @@ In Storybook 5 and before we passed the context as the first argument. If you’
 <!-- prettier-ignore-end -->
 
   <div class="aside">
-  
-  Note that `args` is still available as a key on the context.
-  
+
+Note that `args` is still available as a key on the context.
+
   </div>
 </details>