diff --git a/src/signals/incident-management/containers/IncidentSplitContainer/components/IncidentSplitForm/IncidentSplitForm.tsx b/src/signals/incident-management/containers/IncidentSplitContainer/components/IncidentSplitForm/IncidentSplitForm.tsx index ced38a9b2f..18ca1fb7cd 100644 --- a/src/signals/incident-management/containers/IncidentSplitContainer/components/IncidentSplitForm/IncidentSplitForm.tsx +++ b/src/signals/incident-management/containers/IncidentSplitContainer/components/IncidentSplitForm/IncidentSplitForm.tsx @@ -19,7 +19,7 @@ import { ThinLabel, StyledMainContainer, StyledButtonContainer, -} from '../../styled' +} from './styled' import IncidentSplitFormIncident from '../IncidentSplitFormIncident' import IncidentSplitRadioInput from '../IncidentSplitRadioInput' diff --git a/src/signals/incident-management/containers/IncidentSplitContainer/components/IncidentSplitForm/styled.js b/src/signals/incident-management/containers/IncidentSplitContainer/components/IncidentSplitForm/styled.js new file mode 100644 index 0000000000..2b20e1786b --- /dev/null +++ b/src/signals/incident-management/containers/IncidentSplitContainer/components/IncidentSplitForm/styled.js @@ -0,0 +1,69 @@ +// SPDX-License-Identifier: MPL-2.0 +// Copyright (C) 2020 - 2023 Gemeente Amsterdam + +import { Button, breakpoint, themeColor, themeSpacing } from '@amsterdam/asc-ui' +import styled from 'styled-components' + +export const StyledMainContainer = styled.div` + display: grid; + grid-column: span 1; + row-gap: ${themeSpacing(8)}; + padding-bottom: ${themeSpacing(8)}; +` + +export const StyledForm = styled.form` + display: grid; + padding-top: ${themeSpacing(8)}; + width: 100%; + + @media ${breakpoint('min-width', 'tabletM')} { + column-gap: ${({ theme }) => theme.layouts.large.gutter}px; + grid-template-columns: 7fr 5fr; + } +` + +export const StyledDefinitionList = styled.dl` + margin: 0; + display: grid; + grid-row-gap: 0; + padding-bottom: ${themeSpacing(4)}; + + @media ${breakpoint('min-width', 'tabletM')} { + grid-template-columns: 3fr 3fr; + } + + @media ${breakpoint('min-width', 'laptop')} { + grid-template-columns: 3fr 2fr; + } + + dt, + dd { + @media ${breakpoint('min-width', 'tabletM')} { + padding: ${themeSpacing(2)} 0; + } + } + + dt { + color: ${themeColor('tint', 'level5')}; + margin: 0; + font-weight: 400; + } + + dd { + padding-bottom: ${themeSpacing(2)}; + font-weight: 600; + width: 100%; + } +` + +export const ThinLabel = styled.span` + font-weight: 400; +` + +export const StyledButtonContainer = styled.div` + grid-column: span 1; +` + +export const StyledSubmitButton = styled(Button)` + margin-right: ${themeSpacing(5)}; +` diff --git a/src/signals/incident-management/containers/IncidentSplitContainer/components/IncidentSplitFormIncident/IncidentSplitFormIncident.tsx b/src/signals/incident-management/containers/IncidentSplitContainer/components/IncidentSplitFormIncident/IncidentSplitFormIncident.tsx index da52bb98f1..1b5c8b509d 100644 --- a/src/signals/incident-management/containers/IncidentSplitContainer/components/IncidentSplitFormIncident/IncidentSplitFormIncident.tsx +++ b/src/signals/incident-management/containers/IncidentSplitContainer/components/IncidentSplitFormIncident/IncidentSplitFormIncident.tsx @@ -23,7 +23,7 @@ import { StyledHeadingWrapper, StyledExtraIncidentButtonContainer, StyledAddNote, -} from '../../styled' +} from './styled' import type { ParentIncident } from '../IncidentSplitForm' import IncidentSplitRadioInput from '../IncidentSplitRadioInput' import IncidentSplitSelectInput from '../IncidentSplitSelectInput' diff --git a/src/signals/incident-management/containers/IncidentSplitContainer/components/IncidentSplitFormIncident/styled.js b/src/signals/incident-management/containers/IncidentSplitContainer/components/IncidentSplitFormIncident/styled.js new file mode 100644 index 0000000000..29286b1bca --- /dev/null +++ b/src/signals/incident-management/containers/IncidentSplitContainer/components/IncidentSplitFormIncident/styled.js @@ -0,0 +1,67 @@ +// SPDX-License-Identifier: MPL-2.0 +// Copyright (C) 2020 - 2023 Gemeente Amsterdam + +import { + Button, + breakpoint, + Heading, + themeColor, + themeSpacing, +} from '@amsterdam/asc-ui' +import styled from 'styled-components' + +import AddNote from 'components/AddNote' + +export const StyledFieldset = styled.fieldset` + background-color: ${themeColor('tint', 'level2')}; + scroll-margin-top: ${themeSpacing(15)}; + padding: ${themeSpacing(5)}; + margin-inline: -${themeSpacing(5)}; + display: grid; + row-gap: ${themeSpacing(8)}; + margin-bottom: ${themeSpacing(8)}; + + @media ${breakpoint('min-width', 'tabletM')} { + column-gap: ${({ theme }) => theme.layouts.large.gutter}px; + grid-column: span 2; + grid-template-columns: 7fr 5fr; + } +` + +export const StyledHeadingWrapper = styled.div` + display: flex; + justify-content: space-between; + + @media ${breakpoint('min-width', 'tabletM')} { + grid-column: span 2; + } +` + +export const StyledHeading = styled(Heading)` + margin-bottom: 0; +` + +export const StyledWrapper = styled.div` + padding-top: ${themeSpacing(6)}; + padding-bottom: ${themeSpacing(6)}; +` + +export const StyledAddNote = styled(AddNote)` + grid-row-start: 3; +` + +export const StyledExtraIncidentButtonContainer = styled.div` + border-bottom: 2px solid ${themeColor('tint', 'level3')}; + padding-bottom: ${themeSpacing(8)}; + margin-bottom: ${themeSpacing(2)}; + + @media ${breakpoint('min-width', 'tabletM')} { + grid-column: span 2; + } +` + +export const RemoveButton = styled(Button)` + justify-content: center; + height: 44px; + width: 44px; +` diff --git a/src/signals/incident-management/containers/IncidentSplitContainer/components/IncidentSplitRadioInput/IncidentSplitRadioInput.js b/src/signals/incident-management/containers/IncidentSplitContainer/components/IncidentSplitRadioInput/IncidentSplitRadioInput.js index 4fb33af0dc..b141fff8d6 100644 --- a/src/signals/incident-management/containers/IncidentSplitContainer/components/IncidentSplitRadioInput/IncidentSplitRadioInput.js +++ b/src/signals/incident-management/containers/IncidentSplitContainer/components/IncidentSplitRadioInput/IncidentSplitRadioInput.js @@ -5,7 +5,7 @@ import { useCallback, useState } from 'react' import { RadioGroup, Radio } from '@amsterdam/asc-ui' import PropTypes from 'prop-types' -import { StyledInfoText, StyledRadioLabel, StyledLabel } from '../../styled' +import { StyledInfoText, StyledRadioLabel, StyledLabel } from './styled' const getSelectedOption = (options, value) => options.find(({ key }) => key === value) diff --git a/src/signals/incident-management/containers/IncidentSplitContainer/components/IncidentSplitRadioInput/styled.js b/src/signals/incident-management/containers/IncidentSplitContainer/components/IncidentSplitRadioInput/styled.js new file mode 100644 index 0000000000..9704c1b35f --- /dev/null +++ b/src/signals/incident-management/containers/IncidentSplitContainer/components/IncidentSplitRadioInput/styled.js @@ -0,0 +1,25 @@ +// SPDX-License-Identifier: MPL-2.0 +// Copyright (C) 2020 - 2023 Gemeente Amsterdam + +import { Label, themeSpacing } from '@amsterdam/asc-ui' +import styled from 'styled-components' + +import InfoText from 'components/InfoText' + +export const StyledInfoText = styled(InfoText)` + margin: ${themeSpacing(2, 0, 0)}; +` + +export const StyledLabel = styled(Label)` + > span { + margin-top: 0; + } +` + +export const StyledRadioLabel = styled(Label)` + align-self: baseline; + + * { + font-weight: normal; + } +` diff --git a/src/signals/incident-management/containers/IncidentSplitContainer/components/IncidentSplitSelectInput/IncidentSplitSelectInput.tsx b/src/signals/incident-management/containers/IncidentSplitContainer/components/IncidentSplitSelectInput/IncidentSplitSelectInput.tsx index e711a3dbe2..5c3928c30a 100644 --- a/src/signals/incident-management/containers/IncidentSplitContainer/components/IncidentSplitSelectInput/IncidentSplitSelectInput.tsx +++ b/src/signals/incident-management/containers/IncidentSplitContainer/components/IncidentSplitSelectInput/IncidentSplitSelectInput.tsx @@ -7,7 +7,7 @@ import type { Group } from 'components/Select' import Select from 'components/Select' import type { SubCategoryOption } from 'models/categories/selectors' -import { StyledInfoText, StyledSelect } from '../../styled' +import { StyledInfoText, StyledSelect } from './styled' interface IncidentSplitSelectInputProps { id: string diff --git a/src/signals/incident-management/containers/IncidentSplitContainer/components/IncidentSplitSelectInput/styled.js b/src/signals/incident-management/containers/IncidentSplitContainer/components/IncidentSplitSelectInput/styled.js new file mode 100644 index 0000000000..c1fc66432a --- /dev/null +++ b/src/signals/incident-management/containers/IncidentSplitContainer/components/IncidentSplitSelectInput/styled.js @@ -0,0 +1,19 @@ +// SPDX-License-Identifier: MPL-2.0 +// Copyright (C) 2020 - 2023 Gemeente Amsterdam + +import { themeSpacing } from '@amsterdam/asc-ui' +import styled from 'styled-components' + +import InfoText from 'components/InfoText' + +export const StyledInfoText = styled(InfoText)` + margin: ${themeSpacing(2, 0, 0)}; +` + +export const StyledSelect = styled.div` + max-width: 420px; + + strong { + font-size: 1rem; + } +` diff --git a/src/signals/incident-management/containers/IncidentSplitContainer/styled.js b/src/signals/incident-management/containers/IncidentSplitContainer/styled.js deleted file mode 100644 index 8b30148f0d..0000000000 --- a/src/signals/incident-management/containers/IncidentSplitContainer/styled.js +++ /dev/null @@ -1,163 +0,0 @@ -// SPDX-License-Identifier: MPL-2.0 -// Copyright (C) 2020 - 2023 Gemeente Amsterdam -import { - Heading, - Label, - RadioGroup, - breakpoint, - themeColor, - themeSpacing, -} from '@amsterdam/asc-ui' -import { Button } from '@amsterdam/asc-ui' -import styled from 'styled-components' - -import AddNote from 'components/AddNote' -import InfoText from 'components/InfoText' - -export const ThinLabel = styled.span` - font-weight: 400; -` - -export const StyledDefinitionList = styled.dl` - margin: 0; - display: grid; - grid-row-gap: 0; - padding-bottom: ${themeSpacing(4)}; - - @media ${breakpoint('min-width', 'tabletM')} { - grid-template-columns: 3fr 3fr; - } - - @media ${breakpoint('min-width', 'laptop')} { - grid-template-columns: 3fr 2fr; - } - - dt, - dd { - @media ${breakpoint('min-width', 'tabletM')} { - padding: ${themeSpacing(2)} 0; - } - } - - dt { - color: ${themeColor('tint', 'level5')}; - margin: 0; - font-weight: 400; - } - - dd { - padding-bottom: ${themeSpacing(2)}; - font-weight: 600; - width: 100%; - } -` - -export const StyledSubmitButton = styled(Button)` - margin-right: ${themeSpacing(5)}; -` - -export const StyledRadioGroup = styled(RadioGroup)` - display: inline-flex; -` - -export const StyledRadioLabel = styled(Label)` - align-self: baseline; - - * { - font-weight: normal; - } -` - -export const StyledLabel = styled(Label)` - > span { - margin-top: 0; - } -` - -export const StyledMainContainer = styled.div` - display: grid; - grid-column: span 1; - row-gap: ${themeSpacing(8)}; - padding-bottom: ${themeSpacing(8)}; -` - -export const StyledButtonContainer = styled.div` - grid-column: span 1; -` - -export const StyledFieldset = styled.fieldset` - background-color: ${themeColor('tint', 'level2')}; - scroll-margin-top: ${themeSpacing(15)}; - padding: ${themeSpacing(5)}; - margin-inline: -${themeSpacing(5)}; - display: grid; - row-gap: ${themeSpacing(8)}; - margin-bottom: ${themeSpacing(8)}; - - @media ${breakpoint('min-width', 'tabletM')} { - column-gap: ${({ theme }) => theme.layouts.large.gutter}px; - grid-column: span 2; - grid-template-columns: 7fr 5fr; - } -` - -export const StyledHeading = styled(Heading)` - margin-bottom: 0; -` - -export const StyledWrapper = styled.div` - padding-top: ${themeSpacing(6)}; - padding-bottom: ${themeSpacing(6)}; -` - -export const StyledAddNote = styled(AddNote)` - grid-row-start: 3; -` - -export const StyledSelect = styled.div` - max-width: 420px; - - strong { - font-size: 1rem; - } -` - -export const StyledInfoText = styled(InfoText)` - margin: ${themeSpacing(2, 0, 0)}; -` - -export const StyledForm = styled.form` - display: grid; - padding-top: ${themeSpacing(8)}; - width: 100%; - - @media ${breakpoint('min-width', 'tabletM')} { - column-gap: ${({ theme }) => theme.layouts.large.gutter}px; - grid-template-columns: 7fr 5fr; - } -` - -export const StyledHeadingWrapper = styled.div` - display: flex; - justify-content: space-between; - - @media ${breakpoint('min-width', 'tabletM')} { - grid-column: span 2; - } -` - -export const StyledExtraIncidentButtonContainer = styled.div` - border-bottom: 2px solid ${themeColor('tint', 'level3')}; - padding-bottom: ${themeSpacing(8)}; - margin-bottom: ${themeSpacing(2)}; - - @media ${breakpoint('min-width', 'tabletM')} { - grid-column: span 2; - } -` - -export const RemoveButton = styled(Button)` - justify-content: center; - height: 44px; - width: 44px; -`