patternfly-react/packages/code-connect/components/ProgressBar/ProgressBar.figma.tsx at 6749eb2fb84cbde626eba263798aa4cfc6a0f767 · patternfly/patternfly-react · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
import figma from '@figma/code-connect';
import { ProgressBar, ProgressMeasureLocation } from '@patternfly/react-core';

// Documentation for ProgressBar can be found at https://www.patternfly.org/components/progress-bar
const sharedProps = {
  helperText: figma.boolean('Show helper text', {
    true: 'This is a helper text',
    false: undefined
  }),
  size: figma.enum('Size', {
    Default: 'md',
    Small: 'sm',
    Large: 'lg'
  }),
  title: figma.string('Title'),
  measureLocation: {
    outside: figma.boolean('Show outside percentage', {
      true: 'outside',
      false: undefined
    }),
    inside: figma.boolean('Show main percentage', {
      true: 'inside',
      false: undefined
    })
  },
  variant: figma.enum('State', {
    Success: 'success',
    Warning: 'warning',
    Danger: 'danger'
  })
};

figma.connect(
  ProgressBar,
  'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=7644-38395',
  {
    variant: { 'Show outside percentage': true },
    props: {
      ...sharedProps
    },
    example: (props) => (
      <ProgressBar
        aria-describedby="progress-bar-example-helper-text"
        helperText={props.helperText}
        id="progress-bar-example"
        measureLocation={ProgressMeasureLocation.outside}
        size={props.size}
        title={props.title}
        value={50}
        variant={props.variant}
      />
    )
  }
);

figma.connect(
  ProgressBar,
  'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=7644-38395',
  {
    variant: { 'Show main percentage': true },
    props: {
      ...sharedProps
    },
    example: (props) => (
      <ProgressBar
        aria-describedby="progress-bar-example-helper-text"
        helperText={props.helperText}
        id="progress-bar-example"
        measureLocation={ProgressMeasureLocation.inside}
        size={props.size}
        title={props.title}
        value={50}
        variant={props.variant}
      />
    )
  }
);

// Base ProgressBar
figma.connect(
  ProgressBar,
  'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=7644-38395',
  {
    props: {
      ...sharedProps
    },
    example: (props) => (
      <ProgressBar
        aria-describedby="progress-bar-example-helper-text"
        helperText={props.helperText}
        id="progress-bar-example"
        measureLocation={ProgressMeasureLocation.none}
        size={props.size}
        title={props.title}
        value={50}
        variant={props.variant}
      />
    )
  }
);