feat(accordion): update size prop types for v11 (#10509)

* chore(Accordion): updated size prop types

* chore(accordion): updated another test

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap

@@ -3,9 +3,6 @@
 exports[`Public API should only change with a semver change 1`] = `
 Map {
   "Accordion" => Object {
-    "defaultProps": Object {
-      "align": "end",
-    },
     "propTypes": Object {
       "align": Object {
         "args": Array [

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

@@ -9,13 +9,14 @@ import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix';
 import PropTypes from 'prop-types';
 import React from 'react';
+import * as FeatureFlags from '@carbon/feature-flags';
 
 function Accordion({
-  align,
+  align = 'end',
   children,
   className: customClassName,
-  disabled,
-  size,
+  disabled = false,
+  size = 'md',
   ...rest
 }) {
   const prefix = usePrefix();
@@ -34,10 +35,6 @@ function Accordion({
   );
 }
 
-Accordion.defaultProps = {
-  align: 'end',
-};
-
 Accordion.propTypes = {
   /**
    * Specify the alignment of the accordion heading title and chevron.
@@ -60,10 +57,11 @@ Accordion.propTypes = {
   disabled: PropTypes.bool,
 
   /**
-   * Specify the size of the Accordion. Currently supports either `sm`, 'md' (default) or 'lg` as an option.
-   * TODO V11: remove `xl` (replaced with lg)
+   * Specify the size of the Accordion. Currently supports the following:
    */
-  size: PropTypes.oneOf(['sm', 'md', 'lg', 'xl']),
+  size: FeatureFlags.enabled('enable-v11-release')
+    ? PropTypes.oneOf(['sm', 'md', 'lg'])
+    : PropTypes.oneOf(['sm', 'md', 'lg', 'xl']),
 };
 
 export default Accordion;

packages/react/src/components/Accordion/__tests__/__snapshots__/Accordion-test.js.snap

@@ -3,7 +3,7 @@
 exports[`Accordion should render 1`] = `
 <DocumentFragment>
   <ul
-    class="bx--accordion extra-class bx--accordion--end"
+    class="bx--accordion extra-class bx--accordion--end bx--accordion--md"
   >
     <li
       class="bx--accordion__item child"

packages/react/src/components/Accordion/next/Accordion.stories.js

@@ -0,0 +1,163 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/* eslint-disable no-console */
+
+import React from 'react';
+import { action } from '@storybook/addon-actions';
+import {
+  withKnobs,
+  boolean,
+  number,
+  select,
+  text,
+} from '@storybook/addon-knobs';
+import {
+  default as Accordion,
+  AccordionItem,
+  AccordionSkeleton,
+} from '../../Accordion';
+import Button from '../../Button';
+import mdx from '../Accordion.mdx';
+
+export default {
+  title: 'Components/Accordion',
+  component: Accordion,
+  subcomponents: {
+    AccordionItem,
+    AccordionSkeleton,
+  },
+  decorators: [withKnobs],
+  parameters: {
+    docs: {
+      page: mdx,
+    },
+  },
+};
+
+export const AccordionStory = () => (
+  <Accordion>
+    <AccordionItem title="Section 1 title">
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+        commodo consequat.
+      </p>
+    </AccordionItem>
+    <AccordionItem title="Section 2 title">
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+        commodo consequat.
+      </p>
+    </AccordionItem>
+    <AccordionItem title="Section 3 title">
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+        commodo consequat.
+      </p>
+    </AccordionItem>
+    <AccordionItem title="Section 4 title">
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+        commodo consequat.
+      </p>
+    </AccordionItem>
+  </Accordion>
+);
+
+AccordionStory.storyName = 'Accordion';
+
+export const Skeleton = () => <AccordionSkeleton open count={4} />;
+
+Skeleton.decorators = [
+  (story) => <div style={{ width: '500px' }}>{story()}</div>,
+];
+
+const props = {
+  onClick: action('onClick'),
+  onHeadingClick: action('onHeadingClick'),
+};
+
+const sizes = {
+  'Small  (sm)': 'sm',
+  'Medium (md) - default': undefined,
+  'Large  (lg)': 'lg',
+};
+
+export const Playground = () => (
+  <Accordion
+    disabled={boolean('Disable entire Accordion (disabled)', false)}
+    size={
+      select('Accordion heading size (size)', sizes, undefined) || undefined
+    }
+    align={select(
+      'Accordion heading alignment (align)',
+      ['start', 'end'],
+      'end'
+    )}>
+    <AccordionItem
+      title={text('The title (title)', 'Section 1 title')}
+      open={boolean('Open the section (open)', false)}
+      {...props}>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+        commodo consequat.
+      </p>
+    </AccordionItem>
+    <AccordionItem title="Section 2 title" {...props}>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+        commodo consequat.
+      </p>
+    </AccordionItem>
+    <AccordionItem
+      title="Section 3 title"
+      {...props}
+      disabled={boolean('Disable Section 3 (disabled)', true)}>
+      <Button>This is a button.</Button>
+    </AccordionItem>
+    <AccordionItem
+      title={
+        <span>
+          Section 4 title (<em>the title can be a node</em>)
+        </span>
+      }
+      {...props}>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+        commodo consequat.
+      </p>
+    </AccordionItem>
+  </Accordion>
+);
+
+export const SkeletonPlayground = () => (
+  <div style={{ width: '500px' }}>
+    <AccordionSkeleton
+      align={select(
+        'Accordion heading alignment (align)',
+        ['start', 'end'],
+        'end'
+      )}
+      open={boolean('Show first item opened (open)', true)}
+      count={number('Set number of items (count)', 4)}
+    />
+  </div>
+);