woocommerce/plugins/woocommerce-blocks/assets/js/extensions/shipping-methods/shared-components/settings-section/index.tsx

68 lines
1.2 KiB
TypeScript
Raw Normal View History

/**
* External dependencies
*/
import React from '@wordpress/element';
import styled from '@emotion/styled';
const StyledSectionWrapper = styled.div`
display: flex;
flex-flow: column;
margin-bottom: 24px;
&:last-child {
margin-bottom: 0;
}
@media ( min-width: 800px ) {
flex-flow: row;
}
.components-base-control {
label {
text-transform: none !important;
}
}
`;
const StyledDescriptionWrapper = styled.div`
flex: 0 1 auto;
margin-bottom: 24px;
@media ( min-width: 800px ) {
flex: 0 0 250px;
margin: 0 32px 0 0;
}
h2 {
font-size: 16px;
line-height: 24px;
}
p {
font-size: 13px;
line-height: 17.89px;
margin: 12px 0;
}
> :last-child {
margin-bottom: 0;
}
`;
const StyledSectionControls = styled.div`
flex: 1 1 auto;
margin-bottom: 12px;
`;
const SettingsSection = ( {
Description = () => null,
children,
...props
}: {
// eslint-disable-next-line @typescript-eslint/naming-convention
Description?: () => JSX.Element | null;
children: React.ReactNode;
} ): JSX.Element => (
<StyledSectionWrapper { ...props }>
<StyledDescriptionWrapper>
<Description />
</StyledDescriptionWrapper>
<StyledSectionControls>{ children }</StyledSectionControls>
</StyledSectionWrapper>
);
export default SettingsSection;