Skip to content

Commit

Permalink
feat(countUp): intall countup package and import it in statistics
Browse files Browse the repository at this point in the history
  • Loading branch information
tarantilis committed Jun 29, 2022
1 parent 9f9ed56 commit 10ba7cf
Showing 1 changed file with 146 additions and 2 deletions.
148 changes: 146 additions & 2 deletions src/ui/Statistic/Statistic.stories.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import React from 'react';
import { Statistic, Container } from 'semantic-ui-react';
import { Statistic, Container, Button } from 'semantic-ui-react';
import CountUp, { useCountUp } from 'react-countup';

export default {
title: 'Components/Statistic',
Expand Down Expand Up @@ -146,7 +147,7 @@ const CustomTemplate = (args) => (
<Statistic.Group {...args}>
{args.elements &&
args.elements.map((element, index) => (
<a href={element.href} class="ui small statistic">
<a href={element.href} className="ui small statistic">
<div className={`value ${args.valueVariation}`}>
{element.value}
</div>
Expand Down Expand Up @@ -232,3 +233,146 @@ Custom.argTypes = {
},
},
};

////////////////////////////////// Animation Stories

const AnimationTemplate = (args) => {
const { start, reset, pauseResume } = useCountUp({
ref: 'counter',
start: args.start,
end: args.end,
delay: args.delay,
duration: args.duration,
decimals: args.decimals,
decimal: args.decimal,
prefix: args.prefix,
suffix: args.suffix,
});

return (
<Container>
<Statistic.Group {...args}>
<a href="/#" className="ui small statistic">
<div className="value secondary" id="counter"></div>
<div className="label tertiary">Count up label</div>
</a>
</Statistic.Group>
<br />
<Button secondary onClick={start}>
Start
</Button>
<Button primary onClick={reset}>
Reset
</Button>
<Button primary inverted onClick={pauseResume}>
Pause/Resume
</Button>
</Container>
);
};

export const Animation = AnimationTemplate.bind({});
Animation.args = {
start: 0,
end: 5000,
delay: 0,
duration: 5,
decimals: 0,
prefix: '',
suffix: '',
decimal: ',',
size: 'small',
horizontal: false,
};

const CountupStatistics = (args) => (
<Container>
<Statistic.Group id="counter" {...args}>
{args.elements &&
args.elements.map((element, index) => (
<a href={element.href} className="ui small statistic">
<div className={`value ${args.valueVariation}`}>
<CountUp end={element.value} />
</div>
<div className={`label ${args.labelVariation}`}>
{element.label}
</div>
<div className={`slate text-center ${args.slateVariation}`}>
{element.slate}
</div>
</a>
))}
</Statistic.Group>
</Container>
);
export const AnimationGroup = CountupStatistics.bind({});
AnimationGroup.args = {
elements: [
{
...Default.args,
label: 'label 1',
value: '50',
slate: 'Text from slate',
href: '/#',
},
{
...Default.args,
label: 'label 2',
value: '500',
slate: 'Text from slate',
href: '/#',
},
{
...Default.args,
label: 'label 3',
value: '5000',
slate: 'Text from slate',
href: '/#',
},
],
size: 'small',
widths: 'three',
inverted: false,
horizontal: false,
valueVariation: 'secondary',
labelVariation: 'tertiary',
slateVariation: 'tertiary',
};
AnimationGroup.argTypes = {
valueVariation: {
name: 'Value variation',
defaultValue: 'tertiary',
options: ['primary', 'secondary', 'tertiary'],
control: { type: 'select' },
description: 'Text color variation',
table: {
category: 'Color variations',
defaultValue: { summary: 'tertiary' },
type: { summary: 'string' },
},
},
labelVariation: {
name: 'Value variation',
defaultValue: 'tertiary',
options: ['primary', 'secondary', 'tertiary'],
control: { type: 'select' },
description: 'Text color variation',
table: {
category: 'Color variations',
defaultValue: { summary: 'tertiary' },
type: { summary: 'string' },
},
},
slateVariation: {
name: 'Slate variation',
defaultValue: 'tertiary',
options: ['primary', 'secondary', 'tertiary'],
control: { type: 'select' },
description: 'Text color variation',
table: {
category: 'Color variations',
defaultValue: { summary: 'tertiary' },
type: { summary: 'string' },
},
},
};

0 comments on commit 10ba7cf

Please sign in to comment.