diff --git a/packages/strapi-plugin-content-type-builder/admin/src/components/BooleanBox/CT.js b/packages/strapi-plugin-content-type-builder/admin/src/components/BooleanBox/CT.js new file mode 100644 index 0000000000..ea2cc34d3d --- /dev/null +++ b/packages/strapi-plugin-content-type-builder/admin/src/components/BooleanBox/CT.js @@ -0,0 +1,21 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import CTSelected from './icons/CTSelected'; +import CTUnselected from './icons/CTUnselected'; + +const CT = ({ selected }) => + selected ? ( + + ) : ( + + ); + +CT.defaultProps = { + selected: false, +}; + +CT.propTypes = { + selected: PropTypes.bool, +}; + +export default CT; diff --git a/packages/strapi-plugin-content-type-builder/admin/src/components/BooleanBox/ST.js b/packages/strapi-plugin-content-type-builder/admin/src/components/BooleanBox/ST.js new file mode 100644 index 0000000000..e3078eee4a --- /dev/null +++ b/packages/strapi-plugin-content-type-builder/admin/src/components/BooleanBox/ST.js @@ -0,0 +1,21 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import STSelected from './icons/STSelected'; +import STUnselected from './icons/STUnselected'; + +const ST = ({ selected }) => + selected ? ( + + ) : ( + + ); + +ST.defaultProps = { + selected: false, +}; + +ST.propTypes = { + selected: PropTypes.bool, +}; + +export default ST; diff --git a/packages/strapi-plugin-content-type-builder/admin/src/components/BooleanBox/icons/CTSelected.js b/packages/strapi-plugin-content-type-builder/admin/src/components/BooleanBox/icons/CTSelected.js new file mode 100644 index 0000000000..7eeb59b91b --- /dev/null +++ b/packages/strapi-plugin-content-type-builder/admin/src/components/BooleanBox/icons/CTSelected.js @@ -0,0 +1,136 @@ +/* eslint-disable */ +import React from 'react'; + +const CTSelected = props => ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +); + +export default CTSelected; diff --git a/packages/strapi-plugin-content-type-builder/admin/src/components/BooleanBox/icons/CTUnselected.js b/packages/strapi-plugin-content-type-builder/admin/src/components/BooleanBox/icons/CTUnselected.js new file mode 100644 index 0000000000..03c58bf8f0 --- /dev/null +++ b/packages/strapi-plugin-content-type-builder/admin/src/components/BooleanBox/icons/CTUnselected.js @@ -0,0 +1,136 @@ +/* eslint-disable */ +import React from 'react'; + +const CTUnSelected = props => ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +); + +export default CTUnSelected; diff --git a/packages/strapi-plugin-content-type-builder/admin/src/components/BooleanBox/icons/STSelected.js b/packages/strapi-plugin-content-type-builder/admin/src/components/BooleanBox/icons/STSelected.js new file mode 100644 index 0000000000..1ba2080d85 --- /dev/null +++ b/packages/strapi-plugin-content-type-builder/admin/src/components/BooleanBox/icons/STSelected.js @@ -0,0 +1,80 @@ +/* eslint-disable */ +import React from 'react'; + +const STSelected = props => ( + + + + + + + + + + + + + + + + + + + + + + + + + + + +); + +export default STSelected; diff --git a/packages/strapi-plugin-content-type-builder/admin/src/components/BooleanBox/icons/STUnselected.js b/packages/strapi-plugin-content-type-builder/admin/src/components/BooleanBox/icons/STUnselected.js new file mode 100644 index 0000000000..5433e92195 --- /dev/null +++ b/packages/strapi-plugin-content-type-builder/admin/src/components/BooleanBox/icons/STUnselected.js @@ -0,0 +1,76 @@ +/* eslint-disable */ +import React from 'react'; + +const STUnselected = props => ( + + + + + + + + + + + + + + + + + + + + + + + + + + + +); + +export default STUnselected; diff --git a/packages/strapi-plugin-content-type-builder/admin/src/components/BooleanBox/index.js b/packages/strapi-plugin-content-type-builder/admin/src/components/BooleanBox/index.js index d29e9e9029..da00027402 100644 --- a/packages/strapi-plugin-content-type-builder/admin/src/components/BooleanBox/index.js +++ b/packages/strapi-plugin-content-type-builder/admin/src/components/BooleanBox/index.js @@ -1,11 +1,29 @@ import React from 'react'; import PropTypes from 'prop-types'; import { useGlobalContext } from 'strapi-helper-plugin'; +import { Flex } from '@buffetjs/core'; +import styled from 'styled-components'; +import CTIcon from './CT'; +import STIcon from './ST'; import CustomLabel from './Label'; import Enumeration from './Enumeration'; import EnumerationWrapper from './EnumerationWrapper'; import Wrapper from './Wrapper'; +/** + * TODO: Those should not exist, remove with design system + */ +const CTHackSpan = styled.span` + margin-left: -1rem; + margin-right: 1rem; + margin-top: -1.3rem; +`; +const STHackSpan = styled.span` + margin-left: -1rem; + margin-right: 1rem; + margin-top: -0.5rem; +`; + const BooleanBox = ({ label, name, onChange, onChangeCallback, options, value }) => { const { formatMessage } = useGlobalContext(); @@ -31,17 +49,37 @@ const BooleanBox = ({ label, name, onChange, onChangeCallback, options, value }) value={option.value} /> ))} - {options.map(option => ( - - - {formatMessage({ id: option.headerId })} -

{formatMessage({ id: option.descriptionId })}

- - ))} + {options.map(option => { + const isST = option.value === 'singleType'; + const isCT = option.value === 'collectionType'; + + return ( + + + {isST && ( + + + + )} + {isCT && ( + + + + )} + +
+ + {formatMessage({ id: option.headerId })} +

{formatMessage({ id: option.descriptionId })}

+
+ + + ); + })} ); diff --git a/packages/strapi-plugin-content-type-builder/admin/src/components/BooleanBox/tests/BooleanBox.test.js b/packages/strapi-plugin-content-type-builder/admin/src/components/BooleanBox/tests/BooleanBox.test.js new file mode 100644 index 0000000000..d14525950d --- /dev/null +++ b/packages/strapi-plugin-content-type-builder/admin/src/components/BooleanBox/tests/BooleanBox.test.js @@ -0,0 +1,112 @@ +import React from 'react'; +import { render, screen } from '@testing-library/react'; +import { ThemeProvider } from 'styled-components'; +import defaultThemes from '../../../../../../strapi-admin/admin/src/themes'; +import BooleanBox from ".."; + +jest.mock('strapi-helper-plugin', () => ({ + useGlobalContext: () => ({ formatMessage: ({ id }) => id }), +})); + +describe('BooleanBox', () => { + it('has single type selected by default and verifies the other states', () => { + const options = [ + { + headerId: 'menu.section.models.name.singular', + descriptionId: 'form.button.collection-type.description', + value: 'collectionType', + }, + { + headerId: 'menu.section.single-types.name.singular', + descriptionId: 'form.button.single-type.description', + value: 'singleType', + }, + ]; + + render( + + null} + onChangeCallback={() => null} + options={options} + value="singleType" + /> + + ); + + expect(screen.getByTestId('st-selected')).toBeVisible(); + expect(screen.getByTestId('ct-unselected')).toBeVisible(); + + expect(screen.queryByTestId('ct-selected')).toBeFalsy(); + expect(screen.queryByTestId('st-unselected')).toBeFalsy(); + }); + + it('has collection type selected by default and verifies the other states', () => { + const options = [ + { + headerId: 'menu.section.models.name.singular', + descriptionId: 'form.button.collection-type.description', + value: 'collectionType', + }, + { + headerId: 'menu.section.single-types.name.singular', + descriptionId: 'form.button.single-type.description', + value: 'singleType', + }, + ]; + + render( + + null} + onChangeCallback={() => null} + options={options} + value="collectionType" + /> + + ); + + expect(screen.getByTestId('ct-selected')).toBeVisible(); + expect(screen.getByTestId('st-unselected')).toBeVisible(); + + expect(screen.queryByTestId('st-selected')).toBeFalsy(); + expect(screen.queryByTestId('ct-unselected')).toBeFalsy(); + }); + + it('does not show the ST and CT icons for other types', () => { + const options = [ + { + headerId: 'menu.section.models.name.singular', + descriptionId: 'form.button.collection-type.description', + value: 'text', + }, + { + headerId: 'menu.section.single-types.name.singular', + descriptionId: 'form.button.single-type.description', + value: 'string', + }, + ]; + + render( + + null} + onChangeCallback={() => null} + options={options} + value="collectionType" + /> + + ); + + expect(screen.queryByTestId('ct-selected')).toBeFalsy(); + expect(screen.queryByTestId('st-unselected')).toBeFalsy(); + expect(screen.queryByTestId('st-selected')).toBeFalsy(); + expect(screen.queryByTestId('ct-unselected')).toBeFalsy(); + }); +});