From 498848b61fe83ff4ada93da8aad98e8765b07cc7 Mon Sep 17 00:00:00 2001 From: Vitaly Rtishchev Date: Tue, 16 Jul 2024 18:07:47 +0400 Subject: [PATCH] [mantine.dev] Add SemiCircleProgress demos --- ...iCircleProgress.demo.emptySegmentColor.tsx | 21 +++++++++ .../SemiCircleProgress.demo.labelPosition.tsx | 31 +++++++++++++ .../SemiCircleProgress.demo.transitions.tsx | 43 +++++++++++++++++++ .../SemiCircleProgress.demo.usage.tsx | 27 ++++++++++++ .../SemiCircleProgress.demos.story.tsx | 24 +++++++++++ .../demos/core/SemiCircleProgress/index.ts | 4 ++ packages/@docs/demos/src/index.ts | 1 + .../SemiCircleProgress.module.css | 10 ++--- 8 files changed, 155 insertions(+), 6 deletions(-) create mode 100644 packages/@docs/demos/src/demos/core/SemiCircleProgress/SemiCircleProgress.demo.emptySegmentColor.tsx create mode 100644 packages/@docs/demos/src/demos/core/SemiCircleProgress/SemiCircleProgress.demo.labelPosition.tsx create mode 100644 packages/@docs/demos/src/demos/core/SemiCircleProgress/SemiCircleProgress.demo.transitions.tsx create mode 100644 packages/@docs/demos/src/demos/core/SemiCircleProgress/SemiCircleProgress.demo.usage.tsx create mode 100644 packages/@docs/demos/src/demos/core/SemiCircleProgress/SemiCircleProgress.demos.story.tsx create mode 100644 packages/@docs/demos/src/demos/core/SemiCircleProgress/index.ts diff --git a/packages/@docs/demos/src/demos/core/SemiCircleProgress/SemiCircleProgress.demo.emptySegmentColor.tsx b/packages/@docs/demos/src/demos/core/SemiCircleProgress/SemiCircleProgress.demo.emptySegmentColor.tsx new file mode 100644 index 0000000000..cf0994d978 --- /dev/null +++ b/packages/@docs/demos/src/demos/core/SemiCircleProgress/SemiCircleProgress.demo.emptySegmentColor.tsx @@ -0,0 +1,21 @@ +import { SemiCircleProgress } from '@mantine/core'; +import { MantineDemo } from '@mantinex/demo'; + +const code = ` +import { SemiCircleProgress } from '@mantine/core'; + +function Demo() { + return ; +} +`; + +function Demo() { + return ; +} + +export const emptySegmentColor: MantineDemo = { + type: 'code', + component: Demo, + code, + centered: true, +}; diff --git a/packages/@docs/demos/src/demos/core/SemiCircleProgress/SemiCircleProgress.demo.labelPosition.tsx b/packages/@docs/demos/src/demos/core/SemiCircleProgress/SemiCircleProgress.demo.labelPosition.tsx new file mode 100644 index 0000000000..1dc66251d8 --- /dev/null +++ b/packages/@docs/demos/src/demos/core/SemiCircleProgress/SemiCircleProgress.demo.labelPosition.tsx @@ -0,0 +1,31 @@ +import { SemiCircleProgress } from '@mantine/core'; +import { MantineDemo } from '@mantinex/demo'; + +const code = ` +import { SemiCircleProgress } from '@mantine/core'; + +function Demo() { + return ( + <> + + + + ); +} +`; + +function Demo() { + return ( + <> + + + + ); +} + +export const labelPosition: MantineDemo = { + type: 'code', + component: Demo, + code, + centered: true, +}; diff --git a/packages/@docs/demos/src/demos/core/SemiCircleProgress/SemiCircleProgress.demo.transitions.tsx b/packages/@docs/demos/src/demos/core/SemiCircleProgress/SemiCircleProgress.demo.transitions.tsx new file mode 100644 index 0000000000..caf4c00792 --- /dev/null +++ b/packages/@docs/demos/src/demos/core/SemiCircleProgress/SemiCircleProgress.demo.transitions.tsx @@ -0,0 +1,43 @@ +import { useState } from 'react'; +import { Button, SemiCircleProgress } from '@mantine/core'; +import { MantineDemo } from '@mantinex/demo'; + +const code = ` +import { useState } from 'react'; +import { Button, SemiCircleProgress } from '@mantine/core'; + +function Demo() { + const [value, setValue] = useState(30); + + return ( + <> + + + + + ); +} +`; + +function Demo() { + const [value, setValue] = useState(30); + + return ( + <> + + + + + ); +} + +export const transitions: MantineDemo = { + type: 'code', + component: Demo, + code, + centered: true, +}; diff --git a/packages/@docs/demos/src/demos/core/SemiCircleProgress/SemiCircleProgress.demo.usage.tsx b/packages/@docs/demos/src/demos/core/SemiCircleProgress/SemiCircleProgress.demo.usage.tsx new file mode 100644 index 0000000000..91469f366f --- /dev/null +++ b/packages/@docs/demos/src/demos/core/SemiCircleProgress/SemiCircleProgress.demo.usage.tsx @@ -0,0 +1,27 @@ +import { SemiCircleProgress } from '@mantine/core'; +import { MantineDemo } from '@mantinex/demo'; + +const code = ` +import { SemiCircleProgress } from '@mantine/core'; + +function Demo() { + return ; +} +`; + +function Wrapper(props: any) { + return ; +} + +export const usage: MantineDemo = { + type: 'configurator', + component: Wrapper, + code, + centered: true, + controls: [ + { type: 'color', prop: 'filledSegmentColor', initialValue: 'blue', libraryValue: null }, + { type: 'number', prop: 'size', min: 70, max: 270, initialValue: 200, libraryValue: null }, + { type: 'number', prop: 'thickness', min: 1, max: 20, initialValue: 12, libraryValue: null }, + { type: 'number', prop: 'value', min: 0, max: 100, initialValue: 40, libraryValue: null }, + ], +}; diff --git a/packages/@docs/demos/src/demos/core/SemiCircleProgress/SemiCircleProgress.demos.story.tsx b/packages/@docs/demos/src/demos/core/SemiCircleProgress/SemiCircleProgress.demos.story.tsx new file mode 100644 index 0000000000..4c6fe00d6a --- /dev/null +++ b/packages/@docs/demos/src/demos/core/SemiCircleProgress/SemiCircleProgress.demos.story.tsx @@ -0,0 +1,24 @@ +import { renderDemo } from '../../../render-demo'; +import * as demos from './index'; + +export default { title: 'SemiCircleProgress' }; + +export const Demo_usage = { + name: '⭐ Demo: usage', + render: renderDemo(demos.usage), +}; + +export const Demo_emptySegmentColor = { + name: '⭐ Demo: emptySegmentColor', + render: renderDemo(demos.emptySegmentColor), +}; + +export const Demo_labelPosition = { + name: '⭐ Demo: labelPosition', + render: renderDemo(demos.labelPosition), +}; + +export const Demo_transitions = { + name: '⭐ Demo: transitions', + render: renderDemo(demos.transitions), +}; diff --git a/packages/@docs/demos/src/demos/core/SemiCircleProgress/index.ts b/packages/@docs/demos/src/demos/core/SemiCircleProgress/index.ts new file mode 100644 index 0000000000..9bb23d21f0 --- /dev/null +++ b/packages/@docs/demos/src/demos/core/SemiCircleProgress/index.ts @@ -0,0 +1,4 @@ +export { usage } from './SemiCircleProgress.demo.usage'; +export { emptySegmentColor } from './SemiCircleProgress.demo.emptySegmentColor'; +export { labelPosition } from './SemiCircleProgress.demo.labelPosition'; +export { transitions } from './SemiCircleProgress.demo.transitions'; diff --git a/packages/@docs/demos/src/index.ts b/packages/@docs/demos/src/index.ts index 3534463ee1..47afa3de36 100644 --- a/packages/@docs/demos/src/index.ts +++ b/packages/@docs/demos/src/index.ts @@ -80,6 +80,7 @@ export * as RingProgressDemos from './demos/core/RingProgress'; export * as ScrollAreaDemos from './demos/core/ScrollArea'; export * as SegmentedControlDemos from './demos/core/SegmentedControl'; export * as SelectDemos from './demos/core/Select'; +export * as SemiCircleProgressDemos from './demos/core/SemiCircleProgress'; export * as SimpleGridDemos from './demos/core/SimpleGrid'; export * as SkeletonDemos from './demos/core/Skeleton'; export * as SliderDemos from './demos/core/Slider'; diff --git a/packages/@mantine/core/src/components/SemiCircleProgress/SemiCircleProgress.module.css b/packages/@mantine/core/src/components/SemiCircleProgress/SemiCircleProgress.module.css index bcaedec6ef..121e0f97be 100644 --- a/packages/@mantine/core/src/components/SemiCircleProgress/SemiCircleProgress.module.css +++ b/packages/@mantine/core/src/components/SemiCircleProgress/SemiCircleProgress.module.css @@ -22,12 +22,10 @@ } .filledSegment { - &:where([data-animate]) { - transition: - stroke-dashoffset var(--scp-transition-duration) ease, - stroke-dasharray var(--scp-transition-duration) ease, - stroke var(--scp-transition-duration); - } + transition: + stroke-dashoffset var(--scp-transition-duration) ease, + stroke-dasharray var(--scp-transition-duration) ease, + stroke var(--scp-transition-duration); } .label {