diff --git a/packages/pancake-uikit/src/components/Slider/Slider.tsx b/packages/pancake-uikit/src/components/Slider/Slider.tsx index 76f8aa5f2..139b2b776 100644 --- a/packages/pancake-uikit/src/components/Slider/Slider.tsx +++ b/packages/pancake-uikit/src/components/Slider/Slider.tsx @@ -1,14 +1,8 @@ import React, { ChangeEvent } from "react"; -import styled from "styled-components"; -import { Box, BoxProps } from "../Box"; -import { BunnySlider, BarBackground, BarProgress, StyledInput, SliderLabel } from "./styles"; -import BunnyButt from "./svg/BunnyButt"; +import { Box } from "../Box"; +import { BunnySlider, BarBackground, BarProgress, BunnyButt, StyledInput, SliderLabel } from "./styles"; import SliderProps from "./types"; -const StyledSlider = styled(Box)<{ isDisabled: SliderProps["isDisabled"] & BoxProps }>` - opacity: ${({ isDisabled }) => (isDisabled ? ".5" : 1)}; -`; - // We need to adjust the offset as the percentage increases, as 100% really is 100% - label width. // The number 10 is arbitrary, but seems to work... const LABEL_OFFSET = 10; @@ -21,7 +15,7 @@ const Slider: React.FC = ({ onValueChanged, valueLabel, step = "any", - isDisabled = false, + disabled = false, ...props }) => { const handleChange = ({ target }: ChangeEvent) => { @@ -30,19 +24,15 @@ const Slider: React.FC = ({ const progressPercentage = (value / max) * 100; const isMax = value === max; - + const progressWidth = isMax ? "calc(100% - 16px)" : `${progressPercentage}%`; const labelOffset = progressPercentage - progressPercentage / LABEL_OFFSET; return ( - - + + - - + + = ({ step={step} onChange={handleChange} isMax={isMax} - disabled={isDisabled} + disabled={disabled} /> {valueLabel && {valueLabel}} - + ); }; diff --git a/packages/pancake-uikit/src/components/Slider/index.stories.tsx b/packages/pancake-uikit/src/components/Slider/index.stories.tsx index 39e0fdf3e..3458238db 100644 --- a/packages/pancake-uikit/src/components/Slider/index.stories.tsx +++ b/packages/pancake-uikit/src/components/Slider/index.stories.tsx @@ -14,7 +14,7 @@ export default { const Col = styled(Flex)` flex-direction: column; - width: 300px; + width: 420px; `; const SliderVariant = ({ initialValue }: { initialValue: number }) => { @@ -53,7 +53,7 @@ export const Variants: React.FC = () => { return ( - + ); }; diff --git a/packages/pancake-uikit/src/components/Slider/styles.ts b/packages/pancake-uikit/src/components/Slider/styles.ts index 0bae53877..1b2567470 100644 --- a/packages/pancake-uikit/src/components/Slider/styles.ts +++ b/packages/pancake-uikit/src/components/Slider/styles.ts @@ -3,6 +3,7 @@ import styled from "styled-components"; import Text from "../Text/Text"; import bunnyHeadMain from "./svg/bunnyhead-main.svg"; import bunnyHeadMax from "./svg/bunnyhead-max.svg"; +import bunnyButt from "./svg/bunnybutt.svg"; interface SliderLabelProps { progress: number; @@ -12,6 +13,29 @@ interface StyledInputProps extends InputHTMLAttributes { isMax: boolean; } +interface DisabledProp { + disabled?: boolean; +} + +const getCursorStyle = ({ disabled = false }: DisabledProp) => { + return disabled ? "not-allowed" : "cursor"; +}; + +const getBaseThumbStyles = ({ isMax, disabled }: StyledInputProps) => ` + -webkit-appearance: none; + background-image: url(${isMax ? bunnyHeadMax : bunnyHeadMain}); + cursor: ${getCursorStyle}; + width: 24px; + height: 32px; + filter: ${disabled ? "grayscale(100%)" : "none"}; + transform: translate(-2px, -2px); + transition: 200ms transform; + + &:hover { + transform: ${disabled ? "scale(1) translate(-2px, -2px)" : "scale(1.1) translate(-3px, -3px)"}; + } +`; + export const SliderLabel = styled(Text)` bottom: 0; font-size: 12px; @@ -20,32 +44,22 @@ export const SliderLabel = styled(Text)` margin-left: 16px; // offset the bunny butt width `; -export const BunnyButt = styled.img` +export const BunnyButt = styled.div` + background: url(${bunnyButt}) no-repeat; + height: 32px; + filter: ${({ disabled }) => (disabled ? "grayscale(100%)" : "none")}; position: absolute; + width: 15px; `; export const BunnySlider = styled.div` position: absolute; left: 14px; - width: 100%; -`; - -const getBaseThumbStyles = ({ isMax }: StyledInputProps) => ` --webkit-appearance: none; - background-image: url(${isMax ? bunnyHeadMax : bunnyHeadMain}); - width: 24px; - height: 32px; - cursor: pointer; - transform: translate(-2px, -2px); - transition: 0.1s all; - - :hover { - transform: scale(1.1) translate(-3px, -3px); - } + width: calc(100% - 14px); `; export const StyledInput = styled.input` - cursor: pointer; + cursor: ${getCursorStyle}; height: 32px; position: relative; @@ -53,6 +67,7 @@ export const StyledInput = styled.input` -webkit-appearance: none; ${getBaseThumbStyles} } + ::-moz-range-thumb { ${getBaseThumbStyles} @@ -65,18 +80,18 @@ export const StyledInput = styled.input` } `; -export const BarBackground = styled.div` - position: absolute; - width: 100%; +export const BarBackground = styled.div` + background-color: ${({ theme, disabled }) => theme.colors[disabled ? "textDisabled" : "inputSecondary"]}; height: 2px; + position: absolute; top: 18px; - background-color: ${({ theme }) => theme.colors.inputSecondary}; + width: 100%; `; -export const BarProgress = styled.div<{ progress: number; isMax: boolean }>` - position: absolute; +export const BarProgress = styled.div` + background-color: ${({ theme }) => theme.colors.primary}; + filter: ${({ disabled }) => (disabled ? "grayscale(100%)" : "none")}; height: 10px; + position: absolute; top: 18px; - - background: ${({ theme }) => theme.colors.primary}; `; diff --git a/packages/pancake-uikit/src/components/Slider/svg/BunnyButt.tsx b/packages/pancake-uikit/src/components/Slider/svg/BunnyButt.tsx deleted file mode 100644 index 867902d63..000000000 --- a/packages/pancake-uikit/src/components/Slider/svg/BunnyButt.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import React from "react"; -import { Svg, SvgProps } from "../../Svg"; - -const Icon: React.FC = (props) => { - return ( - - - - - - - ); -}; - -export default Icon; diff --git a/packages/pancake-uikit/src/components/Slider/types.ts b/packages/pancake-uikit/src/components/Slider/types.ts index 4616f10ce..0d0b9a83c 100644 --- a/packages/pancake-uikit/src/components/Slider/types.ts +++ b/packages/pancake-uikit/src/components/Slider/types.ts @@ -8,5 +8,5 @@ export default interface SliderProps extends BoxProps { step?: number | "any"; onValueChanged: (newValue: number) => void; valueLabel?: string; - isDisabled?: boolean; + disabled?: boolean; }