From 3e8f2ee556dc0d1b5f2af2cbf17d55e2661f452a Mon Sep 17 00:00:00 2001 From: "Delilah C." <23665803+goplayoutside3@users.noreply.github.com> Date: Wed, 11 Dec 2024 18:13:13 -0600 Subject: [PATCH] Classifier: Clean up TaskInput styling (#6532) * Refactor styling of TaskInput and its components * Remove enzyme from InputStatus.spec --- .../tasks/components/InputIcon/InputIcon.js | 21 ++------ .../components/InputStatus/InputStatus.js | 34 ++++++------- .../InputStatus/InputStatus.spec.js | 31 ++++-------- .../tasks/components/TaskInput/TaskInput.js | 10 ++-- .../components/TaskInput/TaskInput.stories.js | 50 +++++++++++++++++++ .../TaskInputLabel/TaskInputLabel.js | 35 +++++-------- .../TaskInputLabel/TaskInputLabel.spec.js | 2 - .../helpers/doesTheLabelHaveAnImage.js | 4 -- .../components/TaskInput/helpers/index.js | 3 -- .../volumetric/components/VolumetricTask.js | 16 ++---- 10 files changed, 103 insertions(+), 103 deletions(-) create mode 100644 packages/lib-classifier/src/plugins/tasks/components/TaskInput/TaskInput.stories.js delete mode 100644 packages/lib-classifier/src/plugins/tasks/components/TaskInput/helpers/doesTheLabelHaveAnImage.js delete mode 100644 packages/lib-classifier/src/plugins/tasks/components/TaskInput/helpers/index.js diff --git a/packages/lib-classifier/src/plugins/tasks/components/InputIcon/InputIcon.js b/packages/lib-classifier/src/plugins/tasks/components/InputIcon/InputIcon.js index 731d3c3423..70dfde9021 100644 --- a/packages/lib-classifier/src/plugins/tasks/components/InputIcon/InputIcon.js +++ b/packages/lib-classifier/src/plugins/tasks/components/InputIcon/InputIcon.js @@ -1,4 +1,4 @@ -import PropTypes from 'prop-types' +import { node, string } from 'prop-types' import styled, { css } from 'styled-components' export const StyledInputIcon = styled.span` @@ -6,25 +6,18 @@ export const StyledInputIcon = styled.span` background-color: #2D2D2D; display: flex; align-items: center; - padding-left: 15px; - - &::after { - content: " "; - margin-right: 1ch; - white-space: pre; - } + padding: 15px; > svg { fill-opacity: 0.1; height: 1.5em; stroke: currentColor; stroke-width: 5; - vertical-align: bottom; width: 1.5em; } ` -export default function InputIcon ({ color, icon }) { +export default function InputIcon ({ color = 'white', icon }) { return ( {icon} @@ -32,11 +25,7 @@ export default function InputIcon ({ color, icon }) { ) } -InputIcon.defaultProps = { - color: 'white' -} - InputIcon.propTypes = { - color: PropTypes.string, - icon: PropTypes.node.isRequired + color: string, + icon: node.isRequired } diff --git a/packages/lib-classifier/src/plugins/tasks/components/InputStatus/InputStatus.js b/packages/lib-classifier/src/plugins/tasks/components/InputStatus/InputStatus.js index e23214e292..af3e9f28e5 100644 --- a/packages/lib-classifier/src/plugins/tasks/components/InputStatus/InputStatus.js +++ b/packages/lib-classifier/src/plugins/tasks/components/InputStatus/InputStatus.js @@ -1,15 +1,16 @@ -import PropTypes from 'prop-types' +import { number, shape, oneOfType, string } from 'prop-types' import { Text } from 'grommet' import styled from 'styled-components' -import { Markdownz } from '@zooniverse/react-components' import { useTranslation } from '@translations/i18n' export const StyledInputStatus = styled(Text)` + display: flex; + justify-content: end; + align-items: center; flex-grow: 1; - padding-right: 15px; ` -export default function InputStatus ({ count, tool }) { +export default function InputStatus ({ count = 0, tool = {} }) { const { t } = useTranslation('plugins') let status = t('InputStatus.drawn', { count }) const hasMin = tool.min && tool.min > 0 @@ -23,27 +24,22 @@ export default function InputStatus ({ count, tool }) { } return ( - - {status} + + {status} ) } -InputStatus.defaultProps = { - count: 0, - tool: {} -} - InputStatus.propTypes = { - count: PropTypes.number, - tool: PropTypes.shape({ - min: PropTypes.oneOfType([ - PropTypes.number, - PropTypes.string + count: number, + tool: shape({ + min: oneOfType([ + number, + string ]), - max: PropTypes.oneOfType([ - PropTypes.number, - PropTypes.string + max: oneOfType([ + number, + string ]) }) } diff --git a/packages/lib-classifier/src/plugins/tasks/components/InputStatus/InputStatus.spec.js b/packages/lib-classifier/src/plugins/tasks/components/InputStatus/InputStatus.spec.js index c47cf147c1..1dfb1a49fd 100644 --- a/packages/lib-classifier/src/plugins/tasks/components/InputStatus/InputStatus.spec.js +++ b/packages/lib-classifier/src/plugins/tasks/components/InputStatus/InputStatus.spec.js @@ -1,35 +1,26 @@ -import { shallow } from 'enzyme' -import InputStatus, { StyledInputStatus } from './InputStatus' +import { render, screen } from '@testing-library/react' +import InputStatus from './InputStatus' + /** The translation function will simply return keys in a testing env */ describe('InputStatus', function () { - it('should render without crashing', function () { - const wrapper = shallow() - expect(wrapper).to.be.ok() - }) - - it('should render a StyledInputStatus component', function () { - const wrapper = shallow() - expect(wrapper.find(StyledInputStatus)).to.have.lengthOf(1) - }) - it('should not render any requirements if props.tool.min or props.tool.max is not defined', function () { - const wrapper = shallow() - expect(wrapper.contains('InputStatus.drawn')).to.be.true() + render() + expect(screen.getByText('InputStatus.drawn')).to.be.ok() }) it('should render minimum drawing requirements if props.tool.min is defined', function () { - const wrapper = shallow() - expect(wrapper.contains('InputStatus.min')).to.be.true() + render() + expect(screen.getByText('InputStatus.min')).to.be.ok() }) it('should render maxmimum drawing requirements if props.tool.max is defined', function () { - const wrapper = shallow() - expect(wrapper.contains('InputStatus.max')).to.be.true() + render() + expect(screen.getByText('InputStatus.max')).to.be.ok() }) it('should render minimum and maxmimum drawing requirements if props.tool.min and props.tool.max are defined', function () { - const wrapper = shallow() - expect(wrapper.contains('InputStatus.maxAndMin')).to.be.true() + render() + expect(screen.getByText('InputStatus.maxAndMin')).to.be.ok() }) }) diff --git a/packages/lib-classifier/src/plugins/tasks/components/TaskInput/TaskInput.js b/packages/lib-classifier/src/plugins/tasks/components/TaskInput/TaskInput.js index e5a0f6d90e..ebc2710c36 100644 --- a/packages/lib-classifier/src/plugins/tasks/components/TaskInput/TaskInput.js +++ b/packages/lib-classifier/src/plugins/tasks/components/TaskInput/TaskInput.js @@ -37,7 +37,6 @@ function getHoverStyles (props, active = false) { } const StyledText = styled(Text)` - align-items: baseline; ${props => props.theme.dark ? css`background: transparent;` : css`background: ${props.theme.global.colors['light-1']};` @@ -46,8 +45,9 @@ const StyledText = styled(Text)` box-shadow: 1px 1px 2px 0 rgba(0,0,0,0.5); cursor: pointer; display: flex; - margin-top: .5em; - margin-bottom: .5em; + align-items: center; + min-height: 45px; + margin: 8px 0; ` const StyledLabel = styled.label` @@ -85,7 +85,7 @@ const StyledLabel = styled.label` css`border: 2px solid ${props.theme.global.colors['light-1']};` : css`border: 2px solid ${props.theme.global.colors['neutral-1']};` } - + > img:only-child, svg:only-child { background-color: inherit !important; } @@ -132,7 +132,7 @@ export function TaskInput({ type={type} value={index} /> - + diff --git a/packages/lib-classifier/src/plugins/tasks/components/TaskInput/TaskInput.stories.js b/packages/lib-classifier/src/plugins/tasks/components/TaskInput/TaskInput.stories.js new file mode 100644 index 0000000000..ba41ab6e7e --- /dev/null +++ b/packages/lib-classifier/src/plugins/tasks/components/TaskInput/TaskInput.stories.js @@ -0,0 +1,50 @@ +import { Edit } from 'grommet-icons' + +import TaskInput from './TaskInput' +import InputStatus from '../InputStatus/InputStatus.js' + +export default { + title: 'Tasks / TaskInput', + component: TaskInput, + args: { + checked: true + } +} + +export const Default = {} + +Default.args = { + label: 'Label', + index: 0, + name: 'default', + type: 'radio' +} + +export const CustomIcon = {} + +CustomIcon.args = { + label: 'Drawing a point', + labelIcon: , + index: 0, + name: 'custom-icon', + type: 'radio' +} + +export const ImageAndTextLabel = {} + +ImageAndTextLabel.args = { + label: '![alt](https://thumbnails.zooniverse.org/60x/panoptes-uploads.zooniverse.org/production/project_attached_image/1ec52a74-9e49-4579-91ff-0140eb5371e6.png) Galaxies', + index: 0, + name: 'markdownz', + type: 'checkbox' +} + +export const WithLabelStatus = {} + +WithLabelStatus.args = { + index: 0, + label: 'Do the task', + labelStatus: , + name: 'drawing', + type: 'radio' +} diff --git a/packages/lib-classifier/src/plugins/tasks/components/TaskInput/components/TaskInputLabel/TaskInputLabel.js b/packages/lib-classifier/src/plugins/tasks/components/TaskInput/components/TaskInputLabel/TaskInputLabel.js index 37baf8d832..3e3002848d 100644 --- a/packages/lib-classifier/src/plugins/tasks/components/TaskInput/components/TaskInputLabel/TaskInputLabel.js +++ b/packages/lib-classifier/src/plugins/tasks/components/TaskInput/components/TaskInputLabel/TaskInputLabel.js @@ -2,27 +2,18 @@ import PropTypes from 'prop-types' import { Box, Text } from 'grommet' import styled from 'styled-components' import { Markdownz } from '@zooniverse/react-components' -import { doesTheLabelHaveAnImage } from '../../helpers' -const StyledTaskInputLabelWrapper = styled.span` - &:first-child { - margin-top: 0; - } - - &:last-child { - margin-bottom: 0; - } -` +function doesTheLabelHaveAnImage(label) { + const imageRegex = /(?:!\[(.*?)\]\((.*?)\))/g + return label && imageRegex.test(label) +} const StyledText = styled(Text)` + display: flex; align-content: center; - padding-left: 15px; - padding-right: 15px; - - img, svg { - padding: 10px; - vertical-align: middle; - } + align-items: center; + padding: 5px 0 5px 15px; + gap: 15px; // in case there's multiple elements in the Markdown ` export default function TaskInputLabel({ @@ -36,18 +27,16 @@ export default function TaskInputLabel({ return ( - {labelIcon && - labelIcon} + {labelIcon && labelIcon} - {label} + {label} - {labelStatus && - labelStatus} + {labelStatus && labelStatus} ) } diff --git a/packages/lib-classifier/src/plugins/tasks/components/TaskInput/components/TaskInputLabel/TaskInputLabel.spec.js b/packages/lib-classifier/src/plugins/tasks/components/TaskInput/components/TaskInputLabel/TaskInputLabel.spec.js index 694f0814f6..6ebf1ec4f2 100644 --- a/packages/lib-classifier/src/plugins/tasks/components/TaskInput/components/TaskInputLabel/TaskInputLabel.spec.js +++ b/packages/lib-classifier/src/plugins/tasks/components/TaskInput/components/TaskInputLabel/TaskInputLabel.spec.js @@ -6,9 +6,7 @@ */ import { render, screen } from '@testing-library/react' -import { expect } from 'chai' import TaskInputLabel from './TaskInputLabel' -import { Markdownz } from '@zooniverse/react-components' const label = 'test label' diff --git a/packages/lib-classifier/src/plugins/tasks/components/TaskInput/helpers/doesTheLabelHaveAnImage.js b/packages/lib-classifier/src/plugins/tasks/components/TaskInput/helpers/doesTheLabelHaveAnImage.js deleted file mode 100644 index d4e19e0444..0000000000 --- a/packages/lib-classifier/src/plugins/tasks/components/TaskInput/helpers/doesTheLabelHaveAnImage.js +++ /dev/null @@ -1,4 +0,0 @@ -export default function doesTheLabelHaveAnImage (label) { - const imageRegex = /(?:!\[(.*?)\]\((.*?)\))/g - return label && imageRegex.test(label) -} diff --git a/packages/lib-classifier/src/plugins/tasks/components/TaskInput/helpers/index.js b/packages/lib-classifier/src/plugins/tasks/components/TaskInput/helpers/index.js deleted file mode 100644 index 44f6cd9634..0000000000 --- a/packages/lib-classifier/src/plugins/tasks/components/TaskInput/helpers/index.js +++ /dev/null @@ -1,3 +0,0 @@ -import doesTheLabelHaveAnImage from './doesTheLabelHaveAnImage' - -export { doesTheLabelHaveAnImage } diff --git a/packages/lib-classifier/src/plugins/tasks/experimental/volumetric/components/VolumetricTask.js b/packages/lib-classifier/src/plugins/tasks/experimental/volumetric/components/VolumetricTask.js index b77a3444df..8be639c1c0 100644 --- a/packages/lib-classifier/src/plugins/tasks/experimental/volumetric/components/VolumetricTask.js +++ b/packages/lib-classifier/src/plugins/tasks/experimental/volumetric/components/VolumetricTask.js @@ -3,7 +3,7 @@ import { Blank } from "grommet-icons" import InputStatus from "../../../components/InputStatus" import { Markdownz } from "@zooniverse/react-components" import { observer } from "mobx-react" -import PropTypes from "prop-types" +import { bool, shape, string } from "prop-types" import styled from "styled-components" import TaskInput from "../../../components/TaskInput" @@ -25,17 +25,10 @@ const StyledToolIcon = styled.div` background-color: #2d2d2d; display: flex; align-items: center; - padding-left: 15px; - - &::after { - content: " "; - margin-right: 1ch; - white-space: pre; - } + padding: 15px; > svg { height: 1.5em; - vertical-align: bottom; width: 1.5em; } ` @@ -87,8 +80,9 @@ function VolumetricTask({ disabled = false, task }) { } VolumetricTask.propTypes = { - task: PropTypes.shape({ - instruction: PropTypes.string, + disabled: bool, + task: shape({ + instruction: string, }), }