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

- add in new props
- update tests
- add in warnings and assertions
- 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);
+}