Thanks to visit codestin.com
Credit goes to github.com

Skip to content
This repository was archived by the owner on May 20, 2025. It is now read-only.

Sean / fix: added KID notice #1182

Merged
merged 2 commits into from Nov 17, 2020
Merged

Sean / fix: added KID notice #1182

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
480f59d
fix: added KID notice
Nov 4, 2020
5d9d501
fix: added padding
Nov 5, 2020
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
21 changes: 14 additions & 7 deletions src/components/elements/accordion.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,11 +64,11 @@ const AccordionWrapper = styled.div`
const TRANSITION_DURATION = 250

// TODO: keyboard events and find a way to add proper focus handling
const Accordion = ({ children, has_single_state, is_default_open }) => {
const Accordion = ({ children, has_single_state, id, is_default_open }) => {
const nodes = []

return has_single_state ? (
<SingleAccordionContent is_default_open={is_default_open} nodes={nodes}>
<SingleAccordionContent id={id} is_default_open={is_default_open} nodes={nodes}>
{children}
</SingleAccordionContent>
) : (
Expand All @@ -78,11 +78,12 @@ const Accordion = ({ children, has_single_state, is_default_open }) => {
Accordion.propTypes = {
children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
has_single_state: PropTypes.bool,
id: PropTypes.string,
is_default_open: PropTypes.bool,
nodes: PropTypes.array,
}

const ItemExpanded = ({ is_default_open, child, child_idx, nodes }) => {
const ItemExpanded = ({ is_default_open, child, child_idx, nodes, id }) => {
const getHeight = (active_idx) => {
return (
nodes[active_idx] &&
Expand All @@ -94,7 +95,7 @@ const ItemExpanded = ({ is_default_open, child, child_idx, nodes }) => {
// set height to auto to allow content that can resize inside the accordion
// reset height to content height before collapse for transition (height: auto does not support transitions)
if (is_expanded) setTimeout(() => setHeight('auto'), 200)
else setTimeout(() => setHeight(0), 50)
else setHeight(0)
})

React.useEffect(() => {
Expand All @@ -109,6 +110,7 @@ const ItemExpanded = ({ is_default_open, child, child_idx, nodes }) => {
<ResponsiveWrapper
key={child_idx}
style={child.props.parent_style}
id={id}
ref={(div) => {
nodes[child_idx] = { ref: div }
}}
Expand Down Expand Up @@ -155,11 +157,12 @@ const ItemExpanded = ({ is_default_open, child, child_idx, nodes }) => {
ItemExpanded.propTypes = {
child: PropTypes.any,
child_idx: PropTypes.any,
id: PropTypes.string,
is_default_open: PropTypes.bool,
nodes: PropTypes.any,
}

const SingleAccordionContent = ({ is_default_open = false, nodes, children }) => {
const SingleAccordionContent = ({ is_default_open = false, nodes, children, id }) => {
const render_nodes = React.Children.map(children, (child, child_idx) => {
return (
<ItemExpanded
Expand All @@ -168,6 +171,7 @@ const SingleAccordionContent = ({ is_default_open = false, nodes, children }) =>
child={child}
child_idx={child_idx}
nodes={nodes}
id={id}
/>
)
})
Expand All @@ -177,6 +181,7 @@ const SingleAccordionContent = ({ is_default_open = false, nodes, children }) =>

SingleAccordionContent.propTypes = {
children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
id: PropTypes.string,
is_default_open: PropTypes.bool,
nodes: PropTypes.array,
}
Expand Down Expand Up @@ -255,19 +260,21 @@ const AccordionContent = ({ children, nodes }) => {
AccordionContent.propTypes = {
children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
has_single_state: PropTypes.bool,
id: PropTypes.string,
nodes: PropTypes.array,
}

const AccordionItem = ({ text, children, style }) => {
const AccordionItem = ({ id, text, children, style }) => {
return (
<div style={style} header={text}>
<div style={style} header={text} id={id}>
{children}
</div>
)
}

AccordionItem.propTypes = {
children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
id: PropTypes.string,
is_showed: PropTypes.bool,
style: PropTypes.object,
text: PropTypes.string,
Expand Down
2 changes: 1 addition & 1 deletion src/pages/regulatory/_document_accordion.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -136,7 +136,7 @@ const DocumentAccordion = () => {
}

return (
<Accordion has_single_state>
<Accordion has_single_state id="kid">
<AccordionItem
header={localize('Pillar III disclosures')}
content_style={content_style}
Expand Down
72 changes: 41 additions & 31 deletions src/pages/responsible-trading/_trading-responsibly.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,15 @@ import DontBorrow from 'images/svg/dont-borrow.svg'
import FreeDemo from 'images/svg/free-demo.svg'
import SetLimitLosses from 'images/svg/set-limit-chart.svg'
import BadJudgement from 'images/svg/bad-judgement.svg'
// import Info from 'images/svg/info.svg'
import Info from 'images/svg/info.svg'
import { SectionContainer, Flex, Show } from 'components/containers'
import { Header, Text, Divider, CardStyle } from 'components/elements'
import { Header, Text, Divider, CardStyle, LocalizedLinkText } from 'components/elements'
import { localize, Localize } from 'components/localization'
import device from 'themes/device'

// const IcInfo = styled(Info)`
// margin-left: 1.5rem;
// `
const IcInfo = styled(Info)`
margin-left: 1.5rem;
`

const Card = styled(Flex)`
${CardStyle}
Expand Down Expand Up @@ -62,30 +62,36 @@ const ContentWrapper = styled(Flex)`
flex-direction: column;
}
`
// const StyledFlex = styled(Flex)`
// max-width: 58rem;
// max-height: 6.6rem;
// border-radius: 6rem;
// box-shadow: inset 0 -1px 0 0 #f2f3f4;
// background-color: var(--color-grey-25);
// margin-left: auto;
// margin-right: auto;
// margin-top: 4rem;
// flex-direction: row;
// justify-content: center;
// align-items: center;
const StyledFlex = styled(Flex)`
max-width: 60.4rem;
max-height: 6.6rem;
border-radius: 6rem;
box-shadow: inset 0 -1px 0 0 #f2f3f4;
background-color: var(--color-grey-25);
margin-left: auto;
margin-right: auto;
margin-top: 4rem;
padding: 1.2rem 0;
flex-direction: row;
justify-content: center;
align-items: center;

@media ${device.tabletS} {
max-height: 10rem;
padding: 1.2rem 0.6rem 1.2rem 0;
}

// @media ${device.mobileM} {
// max-height: 8rem;
// border-radius: 2rem;
// margin-bottom: 1rem;
// }
@media ${device.mobileM} {
max-height: 12rem;
border-radius: 2rem;
margin-bottom: 1rem;
padding: 2rem 0.6rem 2.5rem 0;
}

// @media ${device.mobileS} {
// max-height: 9rem;
// border-radius: 1rem;
// }
// `
@media ${device.mobileS} {
border-radius: 1rem;
}
`
const StyledHeader = styled(Header)`
@media ${device.tablet} {
text-align: center;
Expand Down Expand Up @@ -141,20 +147,24 @@ const TradingResponsibly = () => {
</StyledText>
</FlexContent>
</ContentWrapper>
{/* TOD0: Display this section once KIDs documents are ready */}
{/* <Show.Eu>
<Show.Eu>
<StyledFlex>
<IcInfo />
<Text size="1.4rem" ml="1.6rem" mr="1.5rem">
<Localize
translate_text="For more details on our products and the risks involved in online trading, read our <0>key information documents (KIDs)</0> on commodities, forex, and cryptocurrencies."
components={[
<LocalizedLinkText key={0} to="/contact-us/" color="red" />,
<LocalizedLinkText
key={0}
to="/regulatory#kid"
color="red"
size={14}
/>,
]}
/>
</Text>
</StyledFlex>
</Show.Eu> */}
</Show.Eu>
</Card>
</Flex>
</SectionContainer>
Expand Down