chore: enable size controls for 2nd-gen components (#5933)

Author: rubencarvalho

2nd-gen/packages/swc/cem.config.js

@@ -11,7 +11,11 @@
  */
 
 export default {
-    globs: ['components/**/*.ts', '../core/components/**/*.ts'],
+    globs: [
+        'components/**/*.ts',
+        '../core/components/**/*.ts',
+        '../core/shared/**/*.ts',
+    ],
     exclude: ['**/*.stories.ts', '**/*.test.ts', '**/*.spec.ts'],
     outdir: '.storybook',
     litelement: true,

2nd-gen/packages/swc/components/badge/stories/badge.stories.ts

@@ -37,16 +37,11 @@ argTypes.fixed = {
     options: [undefined, ...Badge.FIXED_VALUES],
 };
 
-/*
- * @todo This is properly configuring the Select, but the control doesn't
- * seem to work; need to investigate.
- */
-
-// argTypes.size = {
-//     ...argTypes.size,
-//     control: { type: 'select' },
-//     options: Badge.VALID_SIZES,
-// };
+argTypes.size = {
+    ...argTypes.size,
+    control: { type: 'select' },
+    options: Badge.VALID_SIZES,
+};
 
 args['default-slot'] = 'Badge';
 

2nd-gen/packages/swc/components/divider/stories/divider.stories.ts

@@ -24,16 +24,11 @@ import '@adobe/swc/divider';
 
 const { events, args, argTypes, template } = getStorybookHelpers('swc-divider');
 
-/*
- * @todo This is properly configuring the Select, but the control doesn't
- * seem to work; need to investigate.
- */
-
-// argTypes.size = {
-//     ...argTypes.size,
-//     control: { type: 'select' },
-//     options: Divider.VALID_SIZES,
-// };
+argTypes.size = {
+    ...argTypes.size,
+    control: { type: 'select' },
+    options: Divider.VALID_SIZES,
+};
 
 argTypes['static-color'] = {
     ...argTypes['static-color'],

2nd-gen/packages/swc/components/progress-circle/stories/progress-circle.stories.ts

@@ -35,15 +35,11 @@ const { events, args, argTypes, template } = getStorybookHelpers(
 //     control: { type: 'range', min: 0, max: 100, step: 1 },
 // };
 
-/*
- * @todo This is properly configuring the Select, but the control doesn't
- * seem to work; need to investigate.
- */
-// argTypes.size = {
-//     ...argTypes.size,
-//     control: { type: 'select' },
-//     options: ProgressCircle.VALID_SIZES,
-// };
+argTypes.size = {
+    ...argTypes.size,
+    control: { type: 'select' },
+    options: ProgressCircle.VALID_SIZES,
+};
 
 argTypes['static-color'] = {
     ...argTypes['static-color'],

2nd-gen/packages/swc/components/status-light/stories/status-light.stories.ts

@@ -30,23 +30,11 @@ argTypes.variant = {
     options: StatusLight.VARIANTS,
 };
 
-/*
- * @todo This is properly configuring the Select, but the control doesn't
- * seem to work; need to investigate.
- *
- * We may have to explicitly bind the args to the component (particularly
- * helpful for the size property) so the Storybook controls work as expected.
- * 
- * i.e. render: (args) =>
-        html`<swc-status-light .size=${args.size} variant=${args.variant}
-            >${args['default-slot']}</swc-status-light
-        >`,
- */
-// argTypes.size = {
-//     ...argTypes.size,
-//     control: { type: 'select' },
-//     options: StatusLight.VALID_SIZES,
-// };
+argTypes.size = {
+    ...argTypes.size,
+    control: { type: 'select' },
+    options: StatusLight.VALID_SIZES,
+};
 
 args['default-slot'] = 'Status light';
 args.size = 'm';