Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Styled and updated the sections components #113

Merged
merged 6 commits into from
May 3, 2024
Merged

Styled and updated the sections components #113

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
a399350
Styled and updated the sections components
natashapl Apr 25, 2024
13f90f8
Updated the fieldset component to fix lint issue
natashapl Apr 25, 2024
e5fcec7
Removed extra styling and unneeded component
natashapl May 2, 2024
9a30907
Merge branch 'main' into style-section-components
natashapl May 2, 2024
dc02e98
Added back the register to FieldsetEdit
natashapl May 2, 2024
1af31f5
Removed the unused pattern variable
natashapl May 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
157 changes: 157 additions & 0 deletions packages/design/sass/_uswds-custom-styles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,157 @@
@use "uswds-core" as *;

html {
scroll-behavior: smooth;
}

h1 {
font-size: units(5);

span {
display: inline-block;
vertical-align: top;
margin-right: units(2.5);
}
}

h2 {
margin-top: units(4);
margin-bottom: units(2);
}

p {
line-height: units(3);
}

.hide {
display: none;
}

.show {
display: block;
}

.usa-app {
display: flex;
min-height: 100vh;
flex-direction: column;
}

main {
flex: 1;
width: 100%;
}

.usa-combo-box__input,
.usa-input,
.usa-input-group,
.usa-range,
.usa-select,
.usa-textarea {
max-width: 40rem;
height: 3rem;
}

.usa-sidenav{

.usa-sidenav__item {
.usa-current {
color: #54278f;

&:after {
background-color: rebeccapurple;
}
}
}
}

.usa-section {
padding-top: units(5);
padding-bottom: units(5);
}

.usa-checkbox {
background: none;
}

.usa-table {
width: 100%;

.column1 {
width: 50%;
}

.column2 {
width: 30%;
}

.column3 {
width: 20%;
}

.actionColumn {
span {
margin: 0 30px 0 0;

&:last-child {
margin: 0;
}
}
}
}

.usa-form--large {
max-width: 32rem;
}

.usa-legend-wrapper {
word-wrap: break-word;
hyphens: auto;
}

.usa-legend {
width: -webkit-fill-available;
}

nav {
background: #F7F9FD;
padding: 0 units(3);

>ul {
padding-top: units(5);
}
}

[contentEditable=true]:focus,
[href]:focus,
[tabindex]:focus,
iframe:focus {
outline: units(0.5) solid #783cb9;
}

.usa-step-indicator__segment {
max-width: 22rem;

&--current {

.usa-step-indicator__segment-label {
color: #783cb9;
}

&::after {
background: #783cb9;
}
}
}

.videoWrapper {
position: relative;
padding-bottom: 62.5%;
height: 0;
}

.edit-component-panel {
.usa-fieldset {
margin-top: 0;
}
}
167 changes: 1 addition & 166 deletions packages/design/sass/styles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,168 +1,3 @@
@forward "uswds-theme";
@forward "uswds";

html {
scroll-behavior: smooth;
}

h1 {
font-size: 2.5em;

span {
display: inline-block;
vertical-align: top;
margin-right: 20px;
}
}

h2 {
margin-top: 2rem;
margin-bottom: 1rem;
}

p {
line-height: 1.5rem;
}

.usa-legend {
font-size: 1.7rem;
font-weight: 700;
}


.hide {
display: none;
}

.show {
display: block;
}

.usa-app {
display: flex;
min-height: 100vh;
flex-direction: column;
}

main {
flex: 1;
width: 100%;
/*
>section {
&.grid-container {
margin: 0;
padding: 0;
}
}
*/
}

.usa-combo-box__input,
.usa-input,
.usa-input-group,
.usa-range,
.usa-select,
.usa-textarea {
max-width: 40rem;
height: 3rem;
}

.usa-sidenav{

.usa-sidenav__item {
.usa-current {
color: #54278f;

&:after {
background-color: rebeccapurple;
}
}
}
}

.usa-section {
padding-top: 2.5rem;
padding-bottom: 2.5rem;
}

.usa-checkbox {
background: none;
}

.usa-table {
width: 100%;

.column1 {
width: 50%;
}

.column2 {
width: 30%;
}

.column3 {
width: 20%;
}

.actionColumn {
span {
margin: 0 30px 0 0;

&:last-child {
margin: 0;
}
}
}
}

.usa-form--large {
max-width: 32rem;
}

.usa-legend-wrapper {
word-wrap: break-word;
hyphens: auto;
}

.usa-legend {
max-width: 100%;
font-weight: 600;
width: -webkit-fill-available;
}

nav {
background: #F7F9FD;
padding: 0 1.5rem;

>ul {
padding-top: 2.6rem;
}
}

[contentEditable=true]:focus,
[href]:focus,
[tabindex]:focus,
iframe:focus {
outline: 0.25rem solid #783cb9;
}

.usa-step-indicator__segment {
max-width: 22rem;

&--current {

.usa-step-indicator__segment-label {
color: #783cb9;
}

&::after {
background: #783cb9;
}
}
}

.videoWrapper {
position: relative;
padding-bottom: 62.5%;
height: 0;
}
@forward "uswds-custom-styles";
4 changes: 2 additions & 2 deletions packages/design/src/Form/components/Address/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,8 @@ import { type PatternComponent } from '../..';
const Address: PatternComponent<AddressComponentProps> = props => {
const { register } = useFormContext();
return (
<fieldset className="usa-fieldset">
<legend className="usa-legend usa-legend--large">Mailing address</legend>
<fieldset className="usa-fieldset width-full">
<legend className="usa-legend font-body-5 text-uppercase line-height-body-4">Mailing address</legend>
<label
className={classNames('usa-label', {
'usa-label--error': props.childProps.streetAddress.error,
Expand Down
12 changes: 2 additions & 10 deletions packages/design/src/Form/components/Fieldset/Fieldset.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,17 +8,9 @@ export default {
tags: ['autodocs'],
} satisfies Meta<typeof Fieldset>;

export const FieldsetSection1 = {
export const FieldsetSection = {
args: {
legend: 'Section 1',
type: 'fieldset',
_patternId: 'test-id',
},
} satisfies StoryObj<typeof Fieldset>;

export const FieldsetSection2 = {
args: {
legend: 'Section 2',
legend: 'Default Heading',
type: 'fieldset',
_patternId: 'test-id',
},
Expand Down
9 changes: 6 additions & 3 deletions packages/design/src/Form/components/Fieldset/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,12 @@ import { type PatternComponent } from '../../../Form';

const Fieldset: PatternComponent<FieldsetProps> = props => {
return (
<fieldset className="usa-fieldset margin-top-4">
<legend className="usa-legend">{props.legend}</legend>
{props.children}
<fieldset className="usa-fieldset width-full margin-top-4">
{props.legend !== '' && props.legend !== undefined && (
<legend className="usa-legend font-body-5 text-uppercase line-height-body-4 margin-top-2 margin-bottom-1">{props.legend}</legend>
)}

{props.children}
</fieldset>
);
};
Expand Down
4 changes: 2 additions & 2 deletions packages/design/src/Form/components/additional-fields.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,8 +106,8 @@ export const SelectField = ({ field }: { field: Field }) => {

export const RadioField = ({ field }: { field: Field }) => {
return (
<fieldset className="usa-fieldset">
<legend className="usa-legend">{field.label}</legend>
<fieldset className="usa-fieldset width-full">
<legend className="usa-legend font-body-5 text-uppercase line-height-body-4">{field.label}</legend>
{field.options?.map((option, index) => (
<div key={index} className="usa-radio">
<input
Expand Down
Loading
Loading