chore(storybook): Convert stories from storiesOf to CSF format (#6663)

* chore(storybook): convert from storiesOf to CSF format

* chore(storybook): hoist story annotations

* chore(storybook): prep experimental pagination as well

* chore(format): run formatting

Author: tw15egan

packages/react/src/components/Accordion/Accordion-story.js

@@ -78,9 +78,9 @@ export const accordion = () => (
 
 export const skeleton = () => <AccordionSkeleton open count={4} />;
 
-skeleton.story = {
-  decorators: [(story) => <div style={{ width: '500px' }}>{story()}</div>],
-};
+skeleton.decorators = [
+  (story) => <div style={{ width: '500px' }}>{story()}</div>,
+];
 
 const props = {
   onClick: action('onClick'),

packages/react/src/components/Checkbox/Checkbox-story.js

@@ -6,7 +6,6 @@
  */
 
 import React from 'react';
-import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import { withKnobs, boolean, text } from '@storybook/addon-knobs';
 import Checkbox from '../Checkbox';
@@ -25,76 +24,83 @@ const props = () => ({
   onChange: action('onChange'),
 });
 
-storiesOf('Checkbox', module)
-  .addParameters({
+export default {
+  title: 'Checkbox',
+  decorators: [withKnobs],
+
+  parameters: {
     component: Checkbox,
+
     subcomponents: {
       CheckboxSkeleton,
     },
-  })
-  .addDecorator(withKnobs)
-  .add(
-    'checked',
-    () => {
-      const checkboxProps = props();
-      return (
-        <fieldset className={`${prefix}--fieldset`}>
-          <legend className={`${prefix}--label`}>Checkbox heading</legend>
-          <Checkbox defaultChecked {...checkboxProps} id="checkbox-label-1" />
-          <Checkbox defaultChecked {...checkboxProps} id="checkbox-label-2" />
-        </fieldset>
-      );
-    },
-    {
-      info: {
-        text: `
-        Checkboxes are used when there is a list of options and the user may select multiple options, including all or none.
-        The example below shows how the Checkbox component can be used as an uncontrolled component that is initially checked
-        by setting the defaultChecked property to true. To use the component in a controlled way, you should set the
-        checked property instead.
-      `,
-      },
-    }
-  )
-  .add(
-    'unchecked',
-    () => {
-      const checkboxProps = props();
-      return (
-        <fieldset className={`${prefix}--fieldset`}>
-          <legend className={`${prefix}--label`}>Checkbox heading</legend>
-          <Checkbox {...checkboxProps} id="checkbox-label-1" />
-          <Checkbox {...checkboxProps} id="checkbox-label-2" />
-        </fieldset>
-      );
-    },
-    {
-      info: {
-        text: `
-          Checkboxes are used when there is a list of options and the user may select multiple options, including all or none.
-          The example below shows how the Checkbox component can be used as an uncontrolled component that is initially
-          unchecked. To use the component in a controlled way, you should set the checked property instead.
-        `,
-      },
-    }
-  )
-  .add(
-    'skeleton',
-    () => (
-      <div
-        aria-label="loading checkbox"
-        aria-live="assertive"
-        role="status"
-        tabIndex="0" // eslint-disable-line jsx-a11y/no-noninteractive-tabindex
-      >
-        <CheckboxSkeleton />
-      </div>
-    ),
-    {
-      info: {
-        text: `
-          Placeholder skeleton state to use when content is loading.
-        `,
-      },
-    }
+  },
+};
+
+export const Checked = () => {
+  const checkboxProps = props();
+  return (
+    <fieldset className={`${prefix}--fieldset`}>
+      <legend className={`${prefix}--label`}>Checkbox heading</legend>
+      <Checkbox defaultChecked {...checkboxProps} id="checkbox-label-1" />
+      <Checkbox defaultChecked {...checkboxProps} id="checkbox-label-2" />
+    </fieldset>
+  );
+};
+
+Checked.storyName = 'checked';
+
+Checked.parameters = {
+  info: {
+    text: `
+    Checkboxes are used when there is a list of options and the user may select multiple options, including all or none.
+    The example below shows how the Checkbox component can be used as an uncontrolled component that is initially checked
+    by setting the defaultChecked property to true. To use the component in a controlled way, you should set the
+    checked property instead.
+  `,
+  },
+};
+
+export const Unchecked = () => {
+  const checkboxProps = props();
+  return (
+    <fieldset className={`${prefix}--fieldset`}>
+      <legend className={`${prefix}--label`}>Checkbox heading</legend>
+      <Checkbox {...checkboxProps} id="checkbox-label-1" />
+      <Checkbox {...checkboxProps} id="checkbox-label-2" />
+    </fieldset>
   );
+};
+
+Unchecked.storyName = 'unchecked';
+
+Unchecked.parameters = {
+  info: {
+    text: `
+      Checkboxes are used when there is a list of options and the user may select multiple options, including all or none.
+      The example below shows how the Checkbox component can be used as an uncontrolled component that is initially
+      unchecked. To use the component in a controlled way, you should set the checked property instead.
+    `,
+  },
+};
+
+export const Skeleton = () => (
+  <div
+    aria-label="loading checkbox"
+    aria-live="assertive"
+    role="status"
+    tabIndex="0" // eslint-disable-line jsx-a11y/no-noninteractive-tabindex
+  >
+    <CheckboxSkeleton />
+  </div>
+);
+
+Skeleton.storyName = 'skeleton';
+
+Skeleton.parameters = {
+  info: {
+    text: `
+      Placeholder skeleton state to use when content is loading.
+    `,
+  },
+};