Skip to content
This repository has been archived by the owner on Jun 5, 2023. It is now read-only.

Commit

Permalink
feat: New Meter component
Browse files Browse the repository at this point in the history
diondiondion committed Aug 30, 2019
1 parent 0f78209 commit 59f51d6
Showing 3 changed files with 97 additions and 1 deletion.
26 changes: 26 additions & 0 deletions src/Meter/README.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
---
name: Meter
menu: Components
---

import {Playground, Props} from 'docz';

import Meter from './';

# Meter

A stand-in for the native `<meter>` HTML element built to ensure consistent visuals across browsers.

## Examples

<Playground>
<Meter value={0.3} max={1} />
<br />
<Meter value={39} min={-100} max={100} high={33} />
<br />
<Meter value={80} min={0} max={100} color="links" />
</Playground>

## Props

<Props of={Meter} />
71 changes: 71 additions & 0 deletions src/Meter/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
import React from 'react';
import styled from 'styled-components';
import PropTypes from 'prop-types';

import {getColorBlock} from '../utils/colors';

import VisuallyHidden from '../VisuallyHidden';

function getMeterColor({value, low, high, min, max, theme}) {
if (value === null) {
return null;
}
if (value <= low || value === min) {
return getColorBlock('negative', theme);
} else if (value >= high || value === max) {
return getColorBlock('positive', theme);
} else {
return getColorBlock('neutral', theme);
}
}

function getMeterWidth({value, min = 0, max = 1, visualMin = 0}) {
if (value === null || value === undefined) return '0%';

const difference = max - min;
const clampedValue = Math.max(value, visualMin);
const fraction = (clampedValue - min) / difference;

return `${fraction * 100}%`;
}

const Wrapper = styled.div.attrs({
role: 'presentation',
})`
width: 100%;
height: 0.3rem;
background-color: rgba(0, 0, 0, 0.1);
`;

const MockMeter = styled.div.attrs({
role: 'presentation',
'aria-hidden': 'true',
})`
width: ${getMeterWidth};
height: 0.3rem;
background: ${p =>
p.color ? getColorBlock(p.color, p.theme) : getMeterColor(p)};
transition: width 300ms ease-out;
`;

const Meter = ({...props}) => {
return (
<Wrapper>
<MockMeter {...props} />
<VisuallyHidden as="meter" {...props} />
</Wrapper>
);
};

Meter.propTypes = {
value: PropTypes.number,
max: PropTypes.number,
high: PropTypes.number,
low: PropTypes.number,
min: PropTypes.number,
optimum: PropTypes.number,
visualMin: PropTypes.number,
};

export default Meter;
1 change: 0 additions & 1 deletion src/ViewMoreText/README.mdx
Original file line number Diff line number Diff line change
@@ -5,7 +5,6 @@ menu: Components

import {Playground, Props} from 'docz';

import InlineList from '../InlineList';
import ViewMoreText from './';

# ViewMoreText

0 comments on commit 59f51d6

Please sign in to comment.