diff --git a/Components/Calculation/config/elements-render/override.tsx b/Components/Calculation/config/elements-render/override.tsx index a8a7498..506120e 100644 --- a/Components/Calculation/config/elements-render/override.tsx +++ b/Components/Calculation/config/elements-render/override.tsx @@ -19,6 +19,7 @@ const defaultLinkProps: ComponentProps = { const overrideRender: Partial> = { selectLead: { render: () => { + const elementName = 'selectLead'; const title = titles.selectLead; const valueName = map.selectLead; const Component = components.selectLead; @@ -26,7 +27,7 @@ const overrideRender: Partial> = { const builder = builders.selectLead; const Element = builder(Component, { - elementName: 'selectLead', + elementName, valueName, }); @@ -36,9 +37,13 @@ const overrideRender: Partial> = { }); return ( - - } /> - + + } + /> + ); }, @@ -46,6 +51,7 @@ const overrideRender: Partial> = { selectOpportunity: { render: () => { + const elementName = 'selectOpportunity'; const title = titles.selectOpportunity; const valueName = map.selectOpportunity; const Component = components.selectOpportunity; @@ -53,7 +59,7 @@ const overrideRender: Partial> = { const builder = builders.selectOpportunity; const Element = builder(Component, { - elementName: 'selectOpportunity', + elementName, valueName, }); @@ -63,9 +69,13 @@ const overrideRender: Partial> = { }); return ( - - } /> - + + } + /> + ); }, @@ -73,6 +83,7 @@ const overrideRender: Partial> = { selectQuote: { render: () => { + const elementName = 'selectQuote'; const title = titles.selectQuote; const valueName = map.selectQuote; const Component = components.selectQuote; @@ -80,7 +91,7 @@ const overrideRender: Partial> = { const builder = builders.selectQuote; const Element = builder(Component, { - elementName: 'selectQuote', + elementName, valueName, }); @@ -90,9 +101,13 @@ const overrideRender: Partial> = { }); return ( - - } /> - + + } + /> + ); }, @@ -100,6 +115,7 @@ const overrideRender: Partial> = { tbxVehicleTaxInYear: { render: () => { + const elementName = 'tbxVehicleTaxInYear'; const title = titles.tbxVehicleTaxInYear; const valueName = map.tbxVehicleTaxInYear; const Component = components.tbxVehicleTaxInYear; @@ -107,15 +123,15 @@ const overrideRender: Partial> = { const builder = builders.tbxVehicleTaxInYear; const Element = builder(Component, { - elementName: 'tbxVehicleTaxInYear', + elementName, valueName, }); return ( - - + + ); @@ -124,6 +140,7 @@ const overrideRender: Partial> = { selectHighSeasonStart: { render: () => { + const elementName = 'selectHighSeasonStart'; const title = titles.selectHighSeasonStart; const valueName = map.selectHighSeasonStart; const Component = components.selectHighSeasonStart; @@ -131,15 +148,15 @@ const overrideRender: Partial> = { const builder = builders.selectHighSeasonStart; const Element = builder(Component, { - elementName: 'selectHighSeasonStart', + elementName, valueName, }); return ( - - + + ); diff --git a/Components/Calculation/config/elements-render/render.jsx b/Components/Calculation/config/elements-render/render.jsx index 40cc729..2fee6d3 100644 --- a/Components/Calculation/config/elements-render/render.jsx +++ b/Components/Calculation/config/elements-render/render.jsx @@ -21,8 +21,8 @@ const render = Object.keys(map).reduce((acc, elementName) => { acc[elementName] = { render: () => ( - - + + ), }; diff --git a/Components/Layout/Element.tsx b/Components/Layout/Element.tsx index b7c869d..0d7570a 100644 --- a/Components/Layout/Element.tsx +++ b/Components/Layout/Element.tsx @@ -3,7 +3,7 @@ import styled from 'styled-components'; import { Flex } from 'UIKit/grid'; import { min } from 'UIKit/mq'; -const ElementTitle = styled.h5` +const ElementTitle = styled.label` color: rgba(0, 0, 0, 0.75); font-weight: 600; font-size: 13px; @@ -18,10 +18,18 @@ const ElementTitle = styled.h5` } `; -export function Head({ title, addon }: { title: string; addon?: ReactNode }) { +export function Head({ + title, + addon, + htmlFor, +}: { + title: string; + addon?: ReactNode; + htmlFor: string; +}) { return ( - {title} + {title} {addon} );