feat(Fieldset): update styles to support new 2.0 components (#2023)

- add in new props
- update tests
- add in warnings and assertions (with tests)
- add in implementation examples for using radio buttons and checkboxes

plop-templates/Component/Component.test.ts.hbs

@@ -1,6 +1,7 @@
 import { generateSnapshots } from '@chanzuckerberg/story-utils';
 import * as stories from './{{pascalCase name}}.stories';
+import type { StoryFile } from '../../util/utility-types';
 
 describe('<{{pascalCase name}} />', () => {
-  generateSnapshots(stories);
+  generateSnapshots(stories as StoryFile);
 });

plop-templates/Component/Component.tsx.hbs

@@ -3,10 +3,13 @@ import React from 'react';
 import styles from './{{pascalCase name}}.module.css';
 
 export interface Props {
+  // Component API
   /**
    * CSS class names that can be appended to the component.
    */
   className?: string;
+  // Design API
+  // Insert props/values as defined in figma for {{pascalCase name}}
 }
 
 /**
@@ -18,13 +21,15 @@ export interface Props {
  */
 export const {{pascalCase name}} = ({
   className,
+  // Add other deferenced props to use
   ...other
 }: Props) => {
   const componentClassName = clsx(styles['{{dashCase name}}'], className);
 
   return (
     <div
       className={componentClassName}
+      // Other de-referenced props go here
       {...other}
     >
       Hello!

plopfile.js

@@ -52,37 +52,7 @@ module.exports = (plop) => {
         template:
           "export { default as {{pascalCase name}} } from './components/{{pascalCase name}}';",
       },
-      // From https://github.com/bradfrost/czi-vanilla-storybook
-      function sortIndex() {
-        process.chdir(plop.getPlopfilePath());
-
-        const fs = require('fs');
-        const indexFile = `${plop.getDestBasePath()}/src/index.ts`;
-
-        if (fs.existsSync(indexFile)) {
-          // Split the index file into lines.
-          const lines = fs.readFileSync(indexFile, 'utf8').split('\n');
-          // Only sort lines that begin with "export {" in order to ignore
-          // comments and exported types.
-          const sortableLines = lines.filter((line) =>
-            /^export {.*/g.test(line),
-          );
-          // Ignore all other lines and turn them back into a string.
-          const ignoreLines = lines
-            .filter((line) => !/^export {.*/g.test(line))
-            .join('\n');
-
-          // Sort the sortable lines.
-          const sortedLines = sortableLines
-            .sort((a, b) => a.localeCompare(b))
-            .join('\n');
-
-          // Write all of the lines back to the file.
-          fs.writeFileSync(indexFile, `${sortedLines}\n${ignoreLines}\n`);
-
-          return `index.ts lines sorted`;
-        }
-      },
+      // Removed sort to avoid removing per-version component ordering and documentation (see diff for old code)
     ],
   });
 };

src/components/Fieldset/Fieldset.module.css

@@ -1,50 +1,38 @@
-@import '../../design-tokens/mixins.css';
+.fieldset__footer {
+  display: flex;
+  justify-content: space-between;
 
-/*------------------------------------*\
-    # FIELDSET
-\*------------------------------------*/
-
-/**
- * The fieldset groups a legend and several controls.
- */
-.fieldset {
-  @mixin fieldsetStyles;
-   /* Overrides default browser styling. */
-  margin: calc(var(--eds-size-2) / 16 * 1rem);
+  margin-top: calc(var(--eds-size-3) / 16 * 1rem);
 }
 
-/*------------------------------------*\
-    # FIELDSET ITEMS
-\*------------------------------------*/
-
 /**
  * The contents of the fieldset. Spaces them apart.
  */
  .fieldset-items > :not(:last-child) {
-  margin-bottom: calc(var(--eds-size-1-and-half) / 16 * 1rem);
+  margin-bottom: calc(var(--eds-size-2) / 16 * 1rem);
 }
 
-/*------------------------------------*\
-    # FIELDSET LEGEND
-\*------------------------------------*/
-
 /**
  * A label that's rendered as a <legend> for fieldsets.
  * It contains the same characteristics as a label (ability to add flag for optional field, etc),
  * but semantically/stylistically a bit different.
  */
 .fieldset-legend {
-  /* Removes some default browser styles. */
-  @mixin legendReset;
-  font: var(--eds-theme-typography-form-label);
-  /* Adjust margin between legend and option list */
-  margin-bottom: calc(var(--eds-size-2) / 16 * 1rem);
+  margin-bottom: calc(var(--eds-size-3) / 16 * 1rem);
 }
 
 /**
  * Label flag to mark whether or not a field is required
  * or optional. Currently a flag is only present for optional fields
+ *
+ * TODO: remove as deprecated with v16 of EDS
  */
 .fieldset-legend__flag {
   font: var(--eds-theme-typography-body-sm);
 }
+
+.fieldset-legend__overline {
+  display: flex;
+  align-items: center;
+  gap: calc(var(--eds-size-half) / 16 * 1rem);
+}