diff --git a/src/Radio/Radio.stories.tsx b/src/Radio/Radio.stories.tsx index a36b1543..1190462c 100644 --- a/src/Radio/Radio.stories.tsx +++ b/src/Radio/Radio.stories.tsx @@ -1,15 +1,6 @@ import { ComponentMeta } from '@storybook/react'; import React, { useState } from 'react'; -import { - GroupBox, - MenuList, - MenuListItem, - Radio, - ScrollView, - Separator, - Window, - WindowContent -} from 'react95'; +import { GroupBox, Radio, ScrollView, Window, WindowContent } from 'react95'; import styled from 'styled-components'; const Wrapper = styled.div` @@ -25,6 +16,7 @@ const Wrapper = styled.div` } } `; + export default { title: 'Controls/Radio', component: Radio, @@ -143,67 +135,3 @@ export function Flat() { Flat.story = { name: 'flat' }; - -export function Menu() { - const [state, setState] = useState({ - tool: 'Brush', - color: 'Black' - }); - const handleToolChange = (e: React.ChangeEvent) => - setState({ ...state, tool: e.target.value }); - const handleColorChange = (e: React.ChangeEvent) => - setState({ ...state, color: e.target.value }); - - const { tool, color } = state; - - return ( - - - - - - - - - - - - - - - - ); -} -Menu.story = { - name: 'menu' -}; diff --git a/src/Radio/Radio.tsx b/src/Radio/Radio.tsx index f49b51ca..cf9aaf34 100644 --- a/src/Radio/Radio.tsx +++ b/src/Radio/Radio.tsx @@ -8,11 +8,10 @@ import { StyledInput, StyledLabel } from '../common/SwitchBase'; -import { StyledMenuListItem } from '../MenuList/MenuList'; import { StyledScrollView } from '../ScrollView/ScrollView'; import { CommonStyledProps } from '../types'; -type RadioVariant = 'default' | 'flat' | 'menu'; +type RadioVariant = 'default' | 'flat'; type RadioProps = { checked?: boolean; @@ -78,15 +77,6 @@ const StyledFlatCheckbox = styled.div` border-radius: 50%; } `; -const StyledMenuCheckbox = styled.div` - ${sharedCheckboxStyles} - position: relative; - display: inline-block; - box-sizing: border-box; - border: none; - outline: none; - background: none; -`; type IconProps = { 'data-testid': 'checkmarkIcon'; @@ -106,34 +96,13 @@ const Icon = styled.span.attrs(() => ({ height: 6px; transform: translate(-50%, -50%); border-radius: 50%; - ${({ $disabled, theme, variant }) => - variant === 'menu' - ? css` - background: ${$disabled - ? theme.materialTextDisabled - : theme.materialText}; - filter: drop-shadow( - 1px 1px 0px - ${$disabled ? theme.materialTextDisabledShadow : 'transparent'} - ); - ` - : css` - background: ${$disabled ? theme.checkmarkDisabled : theme.checkmark}; - `} - ${StyledMenuListItem}:hover & { - ${({ $disabled, theme, variant }) => - !$disabled && - variant === 'menu' && - css` - background: ${theme.materialTextInvert}; - `}; - } + background: ${p => + p.$disabled ? p.theme.checkmarkDisabled : p.theme.checkmark}; `; const CheckboxComponents = { flat: StyledFlatCheckbox, - default: StyledCheckbox, - menu: StyledMenuCheckbox + default: StyledCheckbox }; const Radio = forwardRef(