Skip to content

Commit

Permalink
feat(Fieldset): update styles to support new 2.0 components
Browse files Browse the repository at this point in the history
- add in new props
- update tests
- add in warnings and assertions
- add in implementation examples for using radio buttons and checkboxes
  • Loading branch information
booc0mtaco committed Jul 24, 2024
1 parent cc99f7e commit c88a967
Show file tree
Hide file tree
Showing 9 changed files with 889 additions and 173 deletions.
3 changes: 2 additions & 1 deletion plop-templates/Component/Component.test.ts.hbs
Original file line number Diff line number Diff line change
@@ -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);
});
5 changes: 5 additions & 0 deletions plop-templates/Component/Component.tsx.hbs
Original file line number Diff line number Diff line change
Expand Up @@ -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}}
}

/**
Expand All @@ -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!
Expand Down
32 changes: 1 addition & 31 deletions plopfile.js
Original file line number Diff line number Diff line change
Expand Up @@ -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)
],
});
};
40 changes: 14 additions & 26 deletions src/components/Fieldset/Fieldset.module.css
Original file line number Diff line number Diff line change
@@ -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);
}
Loading

0 comments on commit c88a967

Please sign in to comment.