Skip to content

Commit 4720363

Browse files
flacoman91flacoman91
authored
clean up header, left align logo (#437)
Update alignment of the logo in the responsive menu to align with the USA flag ## Changes - fixed BEM typo in tagline - removed logo padding ## How to test this PR 1. Go to Before: https://cfpb.github.io/design-system-react/?path=/docs/components-draft-page-header--overview After: https://cfpb.github.io/design-system-react/pr-previews/pr-437/?path=/docs/components-draft-page-header--overview confirm the logo aligns with the USA flag. ## Screenshots before: <img width="1087" height="383" alt="Screenshot 2026-01-09 at 9 03 38 PM" src="https://github.com/user-attachments/assets/a16d9d08-2759-40ac-9c58-4bf151bb8ffb" /> After: <img width="1105" height="359" alt="Screenshot 2026-01-09 at 9 01 49 PM" src="https://github.com/user-attachments/assets/37016cfe-1eb0-468a-8b8a-339691edacbe" /> ## Notes -
1 parent f74b8bf commit 4720363

7 files changed

Lines changed: 58 additions & 45 deletions

File tree

‎package.json‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "@cfpb/design-system-react",
33
"license": "MIT",
4-
"version": "0.0.7",
4+
"version": "0.0.8",
55
"repository": {
66
"type": "git",
77
"url": "https://github.com/cfpb/design-system-react.git"
@@ -14,13 +14,11 @@
1414
"types": "dist/index.d.ts",
1515
"exports": {
1616
".": {
17-
"require": "./dist/design-system-react.cjs",
18-
"import": "./dist/design-system-react.es.js"
17+
"types": "./dist/index.d.ts",
18+
"import": "./dist/index.mjs",
19+
"require": "./dist/index.js"
1920
},
20-
"./style.css": {
21-
"require": "./dist/style.css",
22-
"default": "./dist/style.css"
23-
}
21+
"./style.css": "./dist/assets/style.css"
2422
},
2523
"files": [
2624
"dist"

‎src/components/Buttons/Button.tsx‎

Lines changed: 40 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import type { ButtonHTMLAttributes } from 'react';
1+
import { forwardRef, type ButtonHTMLAttributes } from 'react';
22
import { Icon } from '../Icon/Icon';
33

44
interface ButtonProperties extends ButtonHTMLAttributes<HTMLButtonElement> {
@@ -48,30 +48,43 @@ const sizeStyles = {
4848
/**
4949
* Primary UI component for user interaction
5050
*/
51-
export function Button({
52-
appearance = 'primary',
53-
asLink = false,
54-
size = 'default',
55-
label,
56-
className,
57-
iconLeft,
58-
iconRight,
59-
...properties
60-
}: ButtonProperties): JSX.Element {
61-
const styles = [
62-
...baseStyles,
63-
...appearanceStyles[appearance],
64-
...sizeStyles[size]
65-
];
66-
if (asLink) styles.push('a-btn--link');
67-
if (className) styles.push(className);
68-
if (properties.disabled) styles.push('a-btn--disabled');
51+
export const Button = forwardRef<HTMLButtonElement, ButtonProperties>(
52+
(
53+
{
54+
appearance = 'primary',
55+
asLink = false,
56+
size = 'default',
57+
label,
58+
className,
59+
iconLeft,
60+
iconRight,
61+
...properties
62+
},
63+
ref, // Receive the ref as the second argument
64+
): JSX.Element => {
65+
const styles = [
66+
...baseStyles,
67+
...appearanceStyles[appearance],
68+
...sizeStyles[size],
69+
];
70+
if (asLink) styles.push('a-btn--link');
71+
if (className) styles.push(className);
72+
if (properties.disabled) styles.push('a-btn--disabled');
6973

70-
return (
71-
<button type='button' className={[...styles].join(' ')} {...properties}>
72-
{iconLeft ? <Icon name={iconLeft} /> : null }
73-
{iconLeft || iconRight ? <span>{label}</span> : label}
74-
{iconRight ? <Icon name={iconRight} /> : null }
75-
</button>
76-
);
77-
}
74+
return (
75+
<button
76+
ref={ref} // Attach the forwarded ref here
77+
type="button"
78+
className={[...styles].join(' ')}
79+
{...properties}
80+
>
81+
{iconLeft ? <Icon name={iconLeft} isPresentational /> : null}
82+
{iconLeft || iconRight ? <span>{label}</span> : label}
83+
{iconRight ? <Icon name={iconRight} isPresentational /> : null}
84+
</button>
85+
);
86+
},
87+
);
88+
89+
// Optional: Set displayName for better debugging in React DevTools
90+
Button.displayName = 'Button';

‎src/components/Link/Link.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
.a-link--jump {
2-
.a-link__text + .cf-icon-svg-wrapper,
3-
.cf-icon-svg-wrapper + .a-link__text {
2+
.a-link__text + svg,
3+
svg + .a-link__text {
44
padding-left: 0.25em;
55
}
66
}

‎src/components/Link/Link.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import ListItem from '../List/ListItem';
66
import './Link.scss';
77

88
export interface LinkProperties extends React.HTMLProps<HTMLAnchorElement> {
9+
asButton?: boolean;
910
children?: React.ReactNode;
1011
hasIcon?: boolean;
1112
href?: string;
@@ -22,6 +23,7 @@ export interface LinkProperties extends React.HTMLProps<HTMLAnchorElement> {
2223
* Source: https://cfpb.github.io/design-system/components/links
2324
*/
2425
export default function Link({
26+
asButton = false,
2527
children,
2628
hasIcon = false,
2729
href,
@@ -33,6 +35,7 @@ export default function Link({
3335
}: LinkProperties): JSXElement {
3436
const cname = [others.className];
3537

38+
if(asButton) cname.push('a-btn');
3639
if (type === 'destructive') {
3740
cname.push('a-btn a-btn--link a-btn--warning');
3841
}

‎src/components/ResponsiveMenu/responsivemenu.scss‎

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -35,11 +35,6 @@ $max-width: $breakpoint - 0.0625em;
3535

3636
.o-header__logo {
3737
min-width: 237px;
38-
padding-left: $space-sm;
39-
40-
@media (min-width: 600px) {
41-
padding-left: $space-md;
42-
}
4338

4439
@media (max-width: $max-width) {
4540
border-left: 1px solid var(--gray-40);
@@ -53,7 +48,7 @@ $max-width: $breakpoint - 0.0625em;
5348
cursor: pointer;
5449
height: 54px;
5550
width: 54px;
56-
padding: $space-sm;
51+
padding: 0 $space-sm;
5752
margin-bottom: 0;
5853
margin-right: 0;
5954
z-index: 1000; // Ensure it's above the overlay
@@ -117,7 +112,7 @@ $max-width: $breakpoint - 0.0625em;
117112
display: flex;
118113
flex-direction: column;
119114
width: 100%;
120-
padding: 0 $space-md $space-md;
115+
padding: 0 0 $space-md;
121116

122117
@media (min-width: $breakpoint) {
123118
flex-direction: row;

‎src/components/Tagline/Tagline.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ export const Tagline = ({
1616
return (
1717
<div className={classnames(baseClasses)} data-testid='tagline'>
1818
<span className='u-usa-flag' data-testid='usa-flag' />
19-
<div className='a-tagline_text'>{children}</div>
19+
<div className='a-tagline__text'>{children}</div>
2020
</div>
2121
);
2222
};

‎vite.config.ts‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import { name } from './package.json';
1212
import fs from 'fs';
1313

1414
export default defineConfig(() => ({
15+
publicDir: false,
1516
resolve: {
1617
alias: {
1718
'~': resolve(__dirname),
@@ -93,11 +94,14 @@ export default defineConfig(() => ({
9394
entry: resolve('src', 'index.ts'),
9495
name,
9596
formats: ['es', 'cjs'],
96-
fileName: (format): string => `${name}.${format}.js`
97+
fileName: (format): string => `index.${format === 'es' ? 'mjs' : 'js'}`
9798
},
9899
rollupOptions: {
99100
external: ['react', 'react-dom', 'react-router-dom'],
100101
output: {
102+
// This prevents the "flat" file explosion for icons/assets in the root
103+
assetFileNames: 'assets/[name].[ext]',
104+
chunkFileNames: 'chunks/[name]-[hash].js',
101105
globals: {
102106
react: 'React',
103107
'react-dom': 'ReactDOM',

0 commit comments

Comments
 (0)