@patternfly/patternfly-doc-core 1.5.0 → 1.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.astro/collections/examples.schema.json +40 -0
- package/.astro/content-modules.mjs +4 -1
- package/.astro/content.d.ts +20 -1
- package/astro.config.mjs +2 -2
- package/declarations.d.ts +2 -0
- package/dist/client/_astro/LiveExample.B7IM_dLQ.css +1 -0
- package/dist/client/_astro/LiveExample.Df-EUsee.js +40 -0
- package/dist/client/_astro/Navigation.CabjIYg4.js +1 -0
- package/dist/client/_astro/PageContext.D1pNBMhh.js +9 -0
- package/dist/client/_astro/PageSidebarBody.Y-7d6zQM.js +1 -0
- package/dist/client/_astro/PageToggle.CbfM9bJB.js +1 -0
- package/dist/client/_astro/PageToggleButton.CZ3xPbcc.js +1 -0
- package/dist/client/_astro/Toolbar.9-YSFh3P.js +1 -0
- package/dist/client/_astro/ToolbarContent.BXdFKbs9.js +1 -0
- package/dist/client/_astro/_page_.B8cBYNKa.css +1 -0
- package/dist/client/_astro/_page_.CtheD08_.css +1 -0
- package/dist/client/_astro/_tab_.DxJDkZPc.css +1 -0
- package/dist/client/_astro/_tab_.YrfmckTJ.css +1 -0
- package/dist/client/_astro/client.CTJTt880.js +1 -0
- package/dist/client/_astro/divider.DjbDHO_6.js +1 -0
- package/dist/client/_astro/index.Dhi-S4Ah.js +24 -0
- package/dist/client/_astro/index.Dkaqzkgy.js +9 -0
- package/dist/client/_astro/page.CDtWFZb5.js +1 -0
- package/dist/client/components/accordion/index.html +85 -0
- package/dist/client/design-foundations/typography/index.html +10 -8
- package/dist/client/design-foundations/usage-and-behavior/index.html +10 -8
- package/dist/client/get-started/contribute/index.html +10 -8
- package/dist/client/index.html +5 -3
- package/dist/server/_@astrojs-ssr-adapter.mjs +1 -1
- package/dist/server/chunks/{PropsTables_MQNZVYdD.mjs → PropsTables_IgCNCQTX.mjs} +147 -213
- package/dist/server/chunks/{_@astrojs-ssr-adapter_8jk9s5dg.mjs → _@astrojs-ssr-adapter_CbICuCdt.mjs} +2 -2
- package/dist/server/chunks/{_astro_assets_CmxVRFAY.mjs → _astro_assets_DaYumpRZ.mjs} +2 -2
- package/dist/server/chunks/_astro_data-layer-content_Ni7IDnLe.mjs +1 -0
- package/dist/server/chunks/{angle-down-icon_BNJvzYv-.mjs → angle-down-icon_C5YQ7k8s.mjs} +163 -213
- package/dist/server/chunks/astro/{server_zRMEhmuT.mjs → server_Cl9jPh4p.mjs} +179 -89
- package/dist/server/chunks/{astro-designed-error-pages_DRBnGamN.mjs → astro-designed-error-pages_BFveJFnQ.mjs} +1 -1
- package/dist/server/chunks/content-modules_BzUEG69n.mjs +1 -0
- package/dist/server/chunks/{sharp_BAxaBZQw.mjs → sharp_CbOL3WDk.mjs} +2 -2
- package/dist/server/entry.mjs +3 -3
- package/dist/server/{manifest_7YAgSoyv.mjs → manifest_DoNTQyvZ.mjs} +3 -3
- package/dist/server/pages/_image.astro.mjs +1 -1
- package/dist/server/renderers.mjs +63 -14
- package/package.json +5 -2
- package/src/components/Content.tsx +61 -0
- package/src/components/ExampleToolbar.tsx +296 -0
- package/src/components/LiveExample.astro +7 -0
- package/src/components/LiveExample.tsx +42 -0
- package/src/content.ts +2 -1
- package/src/pages/[section]/[page]/[...tab].astro +97 -39
- package/textContent/examples/Accordion/Accordion.mdx +45 -0
- package/textContent/examples/Accordion/AccordionBordered.tsx +141 -0
- package/textContent/examples/Accordion/AccordionDefinitionList.tsx +102 -0
- package/textContent/examples/Accordion/AccordionFixedWithMultipleExpandBehavior.tsx +128 -0
- package/textContent/examples/Accordion/AccordionSingleExpandBehavior.tsx +118 -0
- package/textContent/examples/Accordion/AccordionToggleIconAtStart.tsx +118 -0
- package/dist/client/_astro/Button.C3_jB5tC.js +0 -9
- package/dist/client/_astro/Navigation.CULUlMEB.js +0 -1
- package/dist/client/_astro/PageContext.C7BqCh9N.js +0 -1
- package/dist/client/_astro/PageToggle.DDEjruql.js +0 -1
- package/dist/client/_astro/Toolbar.TAdHxLSQ.js +0 -1
- package/dist/client/_astro/_page_.CXyz_BEo.css +0 -1
- package/dist/client/_astro/_page_.DVvr_Mfl.css +0 -1
- package/dist/client/_astro/_page_.SnUmZn2y.css +0 -1
- package/dist/client/_astro/client.CeeiqVaE.js +0 -1
- package/dist/client/_astro/divider.BSD-oFoh.js +0 -1
- package/dist/client/_astro/index.CTH3fVMn.js +0 -32
- package/dist/client/_astro/page.B65lVdBS.js +0 -1
- /package/dist/server/chunks/{_astro_data-layer-content_DDGBHvtb.mjs → Accordion_CGgMUho2.mjs} +0 -0
- /package/dist/server/chunks/{content-modules_Dz-S_Wwv.mjs → Accordion_DlM2LvlF.mjs} +0 -0
|
@@ -0,0 +1,141 @@
|
|
|
1
|
+
import { useState } from 'react'
|
|
2
|
+
import {
|
|
3
|
+
Accordion,
|
|
4
|
+
AccordionItem,
|
|
5
|
+
AccordionContent,
|
|
6
|
+
AccordionToggle,
|
|
7
|
+
AccordionExpandableContentBody,
|
|
8
|
+
Button,
|
|
9
|
+
Checkbox,
|
|
10
|
+
} from '@patternfly/react-core'
|
|
11
|
+
import ArrowRightIcon from '@patternfly/react-icons/dist/esm/icons/arrow-right-icon'
|
|
12
|
+
|
|
13
|
+
export const AccordionBordered: React.FunctionComponent = () => {
|
|
14
|
+
const [expanded, setExpanded] = useState('bordered-toggle4')
|
|
15
|
+
const [isDisplayLarge, setIsDisplayLarge] = useState(false)
|
|
16
|
+
|
|
17
|
+
const displaySize = isDisplayLarge ? 'lg' : 'default'
|
|
18
|
+
const onToggle = (id: string) => {
|
|
19
|
+
if (id === expanded) {
|
|
20
|
+
setExpanded('')
|
|
21
|
+
} else {
|
|
22
|
+
setExpanded(id)
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
return (
|
|
27
|
+
<>
|
|
28
|
+
<Accordion isBordered displaySize={displaySize}>
|
|
29
|
+
<AccordionItem isExpanded={expanded === 'bordered-toggle1'}>
|
|
30
|
+
<AccordionToggle
|
|
31
|
+
onClick={() => {
|
|
32
|
+
onToggle('bordered-toggle1')
|
|
33
|
+
}}
|
|
34
|
+
id="bordered-toggle1"
|
|
35
|
+
>
|
|
36
|
+
Item one
|
|
37
|
+
</AccordionToggle>
|
|
38
|
+
<AccordionContent id="bordered-expand1">
|
|
39
|
+
<p>
|
|
40
|
+
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
|
|
41
|
+
eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
42
|
+
</p>
|
|
43
|
+
</AccordionContent>
|
|
44
|
+
</AccordionItem>
|
|
45
|
+
|
|
46
|
+
<AccordionItem isExpanded={expanded === 'bordered-toggle2'}>
|
|
47
|
+
<AccordionToggle
|
|
48
|
+
onClick={() => {
|
|
49
|
+
onToggle('bordered-toggle2')
|
|
50
|
+
}}
|
|
51
|
+
id="bordered-toggle2"
|
|
52
|
+
>
|
|
53
|
+
Item two
|
|
54
|
+
</AccordionToggle>
|
|
55
|
+
<AccordionContent id="bordered-expand2">
|
|
56
|
+
<p>
|
|
57
|
+
Vivamus et tortor sed arcu congue vehicula eget et diam. Praesent
|
|
58
|
+
nec dictum lorem. Aliquam id diam ultrices, faucibus erat id,
|
|
59
|
+
maximus nunc.
|
|
60
|
+
</p>
|
|
61
|
+
</AccordionContent>
|
|
62
|
+
</AccordionItem>
|
|
63
|
+
|
|
64
|
+
<AccordionItem isExpanded={expanded === 'bordered-toggle3'}>
|
|
65
|
+
<AccordionToggle
|
|
66
|
+
onClick={() => {
|
|
67
|
+
onToggle('bordered-toggle3')
|
|
68
|
+
}}
|
|
69
|
+
id="bordered-toggle3"
|
|
70
|
+
>
|
|
71
|
+
Item three
|
|
72
|
+
</AccordionToggle>
|
|
73
|
+
<AccordionContent id="bordered-expand3">
|
|
74
|
+
<p>
|
|
75
|
+
Morbi vitae urna quis nunc convallis hendrerit. Aliquam congue
|
|
76
|
+
orci quis ultricies tempus.
|
|
77
|
+
</p>
|
|
78
|
+
</AccordionContent>
|
|
79
|
+
</AccordionItem>
|
|
80
|
+
|
|
81
|
+
<AccordionItem isExpanded={expanded === 'bordered-toggle4'}>
|
|
82
|
+
<AccordionToggle
|
|
83
|
+
onClick={() => {
|
|
84
|
+
onToggle('bordered-toggle4')
|
|
85
|
+
}}
|
|
86
|
+
id="bordered-toggle4"
|
|
87
|
+
>
|
|
88
|
+
Item four
|
|
89
|
+
</AccordionToggle>
|
|
90
|
+
<AccordionContent id="bordered-expand4" isCustomContent>
|
|
91
|
+
<AccordionExpandableContentBody>
|
|
92
|
+
Donec vel posuere orci. Phasellus quis tortor a ex hendrerit
|
|
93
|
+
efficitur. Aliquam lacinia ligula pharetra, sagittis ex ut,
|
|
94
|
+
pellentesque diam. Vestibulum ante ipsum primis in faucibus orci
|
|
95
|
+
luctus et ultrices posuere cubilia Curae; Vestibulum ultricies
|
|
96
|
+
nulla nibh. Etiam vel dui fermentum ligula ullamcorper eleifend
|
|
97
|
+
non quis tortor. Morbi tempus ornare tempus. Orci varius natoque
|
|
98
|
+
penatibus et magnis dis parturient montes, nascetur ridiculus mus.
|
|
99
|
+
Mauris et velit neque. Donec ultricies condimentum mauris,
|
|
100
|
+
pellentesque imperdiet libero convallis convallis. Aliquam erat
|
|
101
|
+
volutpat. Donec rutrum semper tempus. Proin dictum imperdiet nibh,
|
|
102
|
+
quis dapibus nulla. Integer sed tincidunt lectus, sit amet auctor
|
|
103
|
+
eros.
|
|
104
|
+
</AccordionExpandableContentBody>
|
|
105
|
+
<AccordionExpandableContentBody>
|
|
106
|
+
<Button variant="link" size="lg" isInline>
|
|
107
|
+
Call to action <ArrowRightIcon />
|
|
108
|
+
</Button>
|
|
109
|
+
</AccordionExpandableContentBody>
|
|
110
|
+
</AccordionContent>
|
|
111
|
+
</AccordionItem>
|
|
112
|
+
<AccordionItem isExpanded={expanded === 'bordered-toggle5'}>
|
|
113
|
+
<AccordionToggle
|
|
114
|
+
onClick={() => {
|
|
115
|
+
onToggle('bordered-toggle5')
|
|
116
|
+
}}
|
|
117
|
+
id="bordered-toggle5"
|
|
118
|
+
>
|
|
119
|
+
Item five
|
|
120
|
+
</AccordionToggle>
|
|
121
|
+
<AccordionContent id="bordered-expand5">
|
|
122
|
+
<p>
|
|
123
|
+
Vivamus finibus dictum ex id ultrices. Mauris dictum neque a
|
|
124
|
+
iaculis blandit.
|
|
125
|
+
</p>
|
|
126
|
+
</AccordionContent>
|
|
127
|
+
</AccordionItem>
|
|
128
|
+
</Accordion>
|
|
129
|
+
<div style={{ marginTop: '30px' }}>
|
|
130
|
+
<Checkbox
|
|
131
|
+
label="Display size large"
|
|
132
|
+
isChecked={isDisplayLarge}
|
|
133
|
+
onChange={(_event, checked) => setIsDisplayLarge(checked)}
|
|
134
|
+
aria-label="show display large variation checkbox"
|
|
135
|
+
id="toggle-display-lg"
|
|
136
|
+
name="toggle-display-lg"
|
|
137
|
+
/>
|
|
138
|
+
</div>
|
|
139
|
+
</>
|
|
140
|
+
)
|
|
141
|
+
}
|
|
@@ -0,0 +1,102 @@
|
|
|
1
|
+
import { useState } from 'react';
|
|
2
|
+
import { Accordion, AccordionItem, AccordionContent, AccordionToggle } from '@patternfly/react-core';
|
|
3
|
+
|
|
4
|
+
export const AccordionDefinitionList: React.FunctionComponent = () => {
|
|
5
|
+
const [expanded, setExpanded] = useState('def-list-toggle2');
|
|
6
|
+
|
|
7
|
+
const onToggle = (id: string) => {
|
|
8
|
+
if (id === expanded) {
|
|
9
|
+
setExpanded('');
|
|
10
|
+
} else {
|
|
11
|
+
setExpanded(id);
|
|
12
|
+
}
|
|
13
|
+
};
|
|
14
|
+
|
|
15
|
+
return (
|
|
16
|
+
<Accordion asDefinitionList>
|
|
17
|
+
<AccordionItem isExpanded={expanded === 'def-list-toggle1'}>
|
|
18
|
+
<AccordionToggle
|
|
19
|
+
onClick={() => {
|
|
20
|
+
onToggle('def-list-toggle1');
|
|
21
|
+
}}
|
|
22
|
+
id="def-list-toggle1"
|
|
23
|
+
>
|
|
24
|
+
Item one
|
|
25
|
+
</AccordionToggle>
|
|
26
|
+
<AccordionContent id="def-list-expand1">
|
|
27
|
+
<p>
|
|
28
|
+
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
|
|
29
|
+
dolore magna aliqua.
|
|
30
|
+
</p>
|
|
31
|
+
</AccordionContent>
|
|
32
|
+
</AccordionItem>
|
|
33
|
+
|
|
34
|
+
<AccordionItem isExpanded={expanded === 'def-list-toggle2'}>
|
|
35
|
+
<AccordionToggle
|
|
36
|
+
onClick={() => {
|
|
37
|
+
onToggle('def-list-toggle2');
|
|
38
|
+
}}
|
|
39
|
+
id="def-list-toggle2"
|
|
40
|
+
>
|
|
41
|
+
Item two
|
|
42
|
+
</AccordionToggle>
|
|
43
|
+
<AccordionContent id="def-list-expand2">
|
|
44
|
+
<p>
|
|
45
|
+
Vivamus et tortor sed arcu congue vehicula eget et diam. Praesent nec dictum lorem. Aliquam id diam
|
|
46
|
+
ultrices, faucibus erat id, maximus nunc.
|
|
47
|
+
</p>
|
|
48
|
+
</AccordionContent>
|
|
49
|
+
</AccordionItem>
|
|
50
|
+
|
|
51
|
+
<AccordionItem isExpanded={expanded === 'def-list-toggle3'}>
|
|
52
|
+
<AccordionToggle
|
|
53
|
+
onClick={() => {
|
|
54
|
+
onToggle('def-list-toggle3');
|
|
55
|
+
}}
|
|
56
|
+
id="def-list-toggle3"
|
|
57
|
+
>
|
|
58
|
+
Item three
|
|
59
|
+
</AccordionToggle>
|
|
60
|
+
<AccordionContent id="def-list-expand3">
|
|
61
|
+
<p>Morbi vitae urna quis nunc convallis hendrerit. Aliquam congue orci quis ultricies tempus.</p>
|
|
62
|
+
</AccordionContent>
|
|
63
|
+
</AccordionItem>
|
|
64
|
+
|
|
65
|
+
<AccordionItem isExpanded={expanded === 'def-list-toggle4'}>
|
|
66
|
+
<AccordionToggle
|
|
67
|
+
onClick={() => {
|
|
68
|
+
onToggle('def-list-toggle4');
|
|
69
|
+
}}
|
|
70
|
+
id="def-list-toggle4"
|
|
71
|
+
>
|
|
72
|
+
Item four
|
|
73
|
+
</AccordionToggle>
|
|
74
|
+
<AccordionContent id="def-list-expand4">
|
|
75
|
+
<p>
|
|
76
|
+
Donec vel posuere orci. Phasellus quis tortor a ex hendrerit efficitur. Aliquam lacinia ligula pharetra,
|
|
77
|
+
sagittis ex ut, pellentesque diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
|
|
78
|
+
cubilia Curae; Vestibulum ultricies nulla nibh. Etiam vel dui fermentum ligula ullamcorper eleifend non quis
|
|
79
|
+
tortor. Morbi tempus ornare tempus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur
|
|
80
|
+
ridiculus mus. Mauris et velit neque. Donec ultricies condimentum mauris, pellentesque imperdiet libero
|
|
81
|
+
convallis convallis. Aliquam erat volutpat. Donec rutrum semper tempus. Proin dictum imperdiet nibh, quis
|
|
82
|
+
dapibus nulla. Integer sed tincidunt lectus, sit amet auctor eros.
|
|
83
|
+
</p>
|
|
84
|
+
</AccordionContent>
|
|
85
|
+
</AccordionItem>
|
|
86
|
+
|
|
87
|
+
<AccordionItem isExpanded={expanded === 'def-list-toggle5'}>
|
|
88
|
+
<AccordionToggle
|
|
89
|
+
onClick={() => {
|
|
90
|
+
onToggle('def-list-toggle5');
|
|
91
|
+
}}
|
|
92
|
+
id="def-list-toggle5"
|
|
93
|
+
>
|
|
94
|
+
Item five
|
|
95
|
+
</AccordionToggle>
|
|
96
|
+
<AccordionContent id="def-list-expand5">
|
|
97
|
+
<p>Vivamus finibus dictum ex id ultrices. Mauris dictum neque a iaculis blandit.</p>
|
|
98
|
+
</AccordionContent>
|
|
99
|
+
</AccordionItem>
|
|
100
|
+
</Accordion>
|
|
101
|
+
);
|
|
102
|
+
};
|
|
@@ -0,0 +1,128 @@
|
|
|
1
|
+
import { useState } from 'react'
|
|
2
|
+
import {
|
|
3
|
+
Accordion,
|
|
4
|
+
AccordionItem,
|
|
5
|
+
AccordionContent,
|
|
6
|
+
AccordionToggle,
|
|
7
|
+
} from '@patternfly/react-core'
|
|
8
|
+
|
|
9
|
+
export const AccordionFixedWithMultipleExpandBehavior: React.FunctionComponent =
|
|
10
|
+
() => {
|
|
11
|
+
const [expanded, setExpanded] = useState(['ex2-toggle4'])
|
|
12
|
+
|
|
13
|
+
const toggle = (id: string) => {
|
|
14
|
+
const index = expanded.indexOf(id)
|
|
15
|
+
const newExpanded: string[] =
|
|
16
|
+
index >= 0
|
|
17
|
+
? [
|
|
18
|
+
...expanded.slice(0, index),
|
|
19
|
+
...expanded.slice(index + 1, expanded.length),
|
|
20
|
+
]
|
|
21
|
+
: [...expanded, id]
|
|
22
|
+
setExpanded(newExpanded)
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
return (
|
|
26
|
+
<Accordion asDefinitionList={false}>
|
|
27
|
+
<AccordionItem isExpanded={expanded.includes('ex2-toggle1')}>
|
|
28
|
+
<AccordionToggle
|
|
29
|
+
onClick={() => toggle('ex2-toggle1')}
|
|
30
|
+
id="ex2-toggle1"
|
|
31
|
+
>
|
|
32
|
+
Item one
|
|
33
|
+
</AccordionToggle>
|
|
34
|
+
<AccordionContent id="ex2-expand1" isFixed>
|
|
35
|
+
<p>
|
|
36
|
+
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
|
|
37
|
+
eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
38
|
+
</p>
|
|
39
|
+
</AccordionContent>
|
|
40
|
+
</AccordionItem>
|
|
41
|
+
<AccordionItem isExpanded={expanded.includes('ex2-toggle2')}>
|
|
42
|
+
<AccordionToggle
|
|
43
|
+
onClick={() => toggle('ex2-toggle2')}
|
|
44
|
+
id="ex2-toggle2"
|
|
45
|
+
>
|
|
46
|
+
Item two
|
|
47
|
+
</AccordionToggle>
|
|
48
|
+
<AccordionContent id="ex2-expand2" isFixed>
|
|
49
|
+
<p>
|
|
50
|
+
Vivamus et tortor sed arcu congue vehicula eget et diam. Praesent
|
|
51
|
+
nec dictum lorem. Aliquam id diam ultrices, faucibus erat id,
|
|
52
|
+
maximus nunc.
|
|
53
|
+
</p>
|
|
54
|
+
</AccordionContent>
|
|
55
|
+
</AccordionItem>
|
|
56
|
+
<AccordionItem isExpanded={expanded.includes('ex2-toggle3')}>
|
|
57
|
+
<AccordionToggle
|
|
58
|
+
onClick={() => toggle('ex2-toggle3')}
|
|
59
|
+
id="ex2-toggle3"
|
|
60
|
+
>
|
|
61
|
+
Item three
|
|
62
|
+
</AccordionToggle>
|
|
63
|
+
<AccordionContent id="ex2-expand3" isFixed>
|
|
64
|
+
<p>
|
|
65
|
+
Morbi vitae urna quis nunc convallis hendrerit. Aliquam congue
|
|
66
|
+
orci quis ultricies tempus.
|
|
67
|
+
</p>
|
|
68
|
+
</AccordionContent>
|
|
69
|
+
</AccordionItem>
|
|
70
|
+
<AccordionItem isExpanded={expanded.includes('ex2-toggle4')}>
|
|
71
|
+
<AccordionToggle
|
|
72
|
+
onClick={() => toggle('ex2-toggle4')}
|
|
73
|
+
id="ex2-toggle4"
|
|
74
|
+
>
|
|
75
|
+
Item four
|
|
76
|
+
</AccordionToggle>
|
|
77
|
+
<AccordionContent
|
|
78
|
+
aria-labelledby="ex2-toggle4"
|
|
79
|
+
id="ex2-expand4"
|
|
80
|
+
isFixed
|
|
81
|
+
>
|
|
82
|
+
<p>
|
|
83
|
+
Donec vel posuere orci. Phasellus quis tortor a ex hendrerit
|
|
84
|
+
efficitur. Aliquam lacinia ligula pharetra, sagittis ex ut,
|
|
85
|
+
pellentesque diam. Vestibulum ante ipsum primis in faucibus orci
|
|
86
|
+
luctus et ultrices posuere cubilia Curae; Vestibulum ultricies
|
|
87
|
+
nulla nibh. Etiam vel dui fermentum ligula ullamcorper eleifend
|
|
88
|
+
non quis tortor. Morbi tempus ornare tempus. Orci varius natoque
|
|
89
|
+
penatibus et magnis dis parturient montes, nascetur ridiculus mus.
|
|
90
|
+
Mauris et velit neque. Donec ultricies condimentum mauris,
|
|
91
|
+
pellentesque imperdiet libero convallis convallis. Aliquam erat
|
|
92
|
+
volutpat. Donec rutrum semper tempus. Proin dictum imperdiet nibh,
|
|
93
|
+
quis dapibus nulla. Integer sed tincidunt lectus, sit amet auctor
|
|
94
|
+
eros.
|
|
95
|
+
</p>
|
|
96
|
+
<p>
|
|
97
|
+
Donec vel posuere orci. Phasellus quis tortor a ex hendrerit
|
|
98
|
+
efficitur. Aliquam lacinia ligula pharetra, sagittis ex ut,
|
|
99
|
+
pellentesque diam. Vestibulum ante ipsum primis in faucibus orci
|
|
100
|
+
luctus et ultrices posuere cubilia Curae; Vestibulum ultricies
|
|
101
|
+
nulla nibh. Etiam vel dui fermentum ligula ullamcorper eleifend
|
|
102
|
+
non quis tortor. Morbi tempus ornare tempus. Orci varius natoque
|
|
103
|
+
penatibus et magnis dis parturient montes, nascetur ridiculus mus.
|
|
104
|
+
Mauris et velit neque. Donec ultricies condimentum mauris,
|
|
105
|
+
pellentesque imperdiet libero convallis convallis. Aliquam erat
|
|
106
|
+
volutpat. Donec rutrum semper tempus. Proin dictum imperdiet nibh,
|
|
107
|
+
quis dapibus nulla. Integer sed tincidunt lectus, sit amet auctor
|
|
108
|
+
eros.
|
|
109
|
+
</p>
|
|
110
|
+
</AccordionContent>
|
|
111
|
+
</AccordionItem>
|
|
112
|
+
<AccordionItem isExpanded={expanded.includes('ex2-toggle5')}>
|
|
113
|
+
<AccordionToggle
|
|
114
|
+
onClick={() => toggle('ex2-toggle5')}
|
|
115
|
+
id="ex2-toggle5"
|
|
116
|
+
>
|
|
117
|
+
Item five
|
|
118
|
+
</AccordionToggle>
|
|
119
|
+
<AccordionContent id="ex2-expand5" isFixed>
|
|
120
|
+
<p>
|
|
121
|
+
Vivamus finibus dictum ex id ultrices. Mauris dictum neque a
|
|
122
|
+
iaculis blandit.
|
|
123
|
+
</p>
|
|
124
|
+
</AccordionContent>
|
|
125
|
+
</AccordionItem>
|
|
126
|
+
</Accordion>
|
|
127
|
+
)
|
|
128
|
+
}
|
|
@@ -0,0 +1,118 @@
|
|
|
1
|
+
import { useState } from 'react'
|
|
2
|
+
import {
|
|
3
|
+
Accordion,
|
|
4
|
+
AccordionItem,
|
|
5
|
+
AccordionContent,
|
|
6
|
+
AccordionToggle,
|
|
7
|
+
} from '@patternfly/react-core'
|
|
8
|
+
|
|
9
|
+
export const AccordionSingleExpandBehavior: React.FunctionComponent = () => {
|
|
10
|
+
const [expanded, setExpanded] = useState('ex-toggle2')
|
|
11
|
+
|
|
12
|
+
const onToggle = (id: string) => {
|
|
13
|
+
if (id === expanded) {
|
|
14
|
+
setExpanded('')
|
|
15
|
+
} else {
|
|
16
|
+
setExpanded(id)
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
return (
|
|
21
|
+
<Accordion asDefinitionList={false}>
|
|
22
|
+
<AccordionItem isExpanded={expanded === 'ex-toggle1'}>
|
|
23
|
+
<AccordionToggle
|
|
24
|
+
onClick={() => {
|
|
25
|
+
onToggle('ex-toggle1')
|
|
26
|
+
}}
|
|
27
|
+
id="ex-toggle1"
|
|
28
|
+
>
|
|
29
|
+
Item one
|
|
30
|
+
</AccordionToggle>
|
|
31
|
+
<AccordionContent id="ex-expand1">
|
|
32
|
+
<p>
|
|
33
|
+
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
|
|
34
|
+
eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
35
|
+
</p>
|
|
36
|
+
</AccordionContent>
|
|
37
|
+
</AccordionItem>
|
|
38
|
+
|
|
39
|
+
<AccordionItem isExpanded={expanded === 'ex-toggle2'}>
|
|
40
|
+
<AccordionToggle
|
|
41
|
+
onClick={() => {
|
|
42
|
+
onToggle('ex-toggle2')
|
|
43
|
+
}}
|
|
44
|
+
id="ex-toggle2"
|
|
45
|
+
>
|
|
46
|
+
Item two
|
|
47
|
+
</AccordionToggle>
|
|
48
|
+
<AccordionContent id="ex-expand2">
|
|
49
|
+
<p>
|
|
50
|
+
Vivamus et tortor sed arcu congue vehicula eget et diam. Praesent
|
|
51
|
+
nec dictum lorem. Aliquam id diam ultrices, faucibus erat id,
|
|
52
|
+
maximus nunc.
|
|
53
|
+
</p>
|
|
54
|
+
</AccordionContent>
|
|
55
|
+
</AccordionItem>
|
|
56
|
+
|
|
57
|
+
<AccordionItem isExpanded={expanded === 'ex-toggle3'}>
|
|
58
|
+
<AccordionToggle
|
|
59
|
+
onClick={() => {
|
|
60
|
+
onToggle('ex-toggle3')
|
|
61
|
+
}}
|
|
62
|
+
id="ex-toggle3"
|
|
63
|
+
>
|
|
64
|
+
Item three
|
|
65
|
+
</AccordionToggle>
|
|
66
|
+
<AccordionContent id="ex-expand3">
|
|
67
|
+
<p>
|
|
68
|
+
Morbi vitae urna quis nunc convallis hendrerit. Aliquam congue orci
|
|
69
|
+
quis ultricies tempus.
|
|
70
|
+
</p>
|
|
71
|
+
</AccordionContent>
|
|
72
|
+
</AccordionItem>
|
|
73
|
+
|
|
74
|
+
<AccordionItem isExpanded={expanded === 'ex-toggle4'}>
|
|
75
|
+
<AccordionToggle
|
|
76
|
+
onClick={() => {
|
|
77
|
+
onToggle('ex-toggle4')
|
|
78
|
+
}}
|
|
79
|
+
id="ex-toggle4"
|
|
80
|
+
>
|
|
81
|
+
Item four
|
|
82
|
+
</AccordionToggle>
|
|
83
|
+
<AccordionContent id="ex-expand4">
|
|
84
|
+
<p>
|
|
85
|
+
Donec vel posuere orci. Phasellus quis tortor a ex hendrerit
|
|
86
|
+
efficitur. Aliquam lacinia ligula pharetra, sagittis ex ut,
|
|
87
|
+
pellentesque diam. Vestibulum ante ipsum primis in faucibus orci
|
|
88
|
+
luctus et ultrices posuere cubilia Curae; Vestibulum ultricies nulla
|
|
89
|
+
nibh. Etiam vel dui fermentum ligula ullamcorper eleifend non quis
|
|
90
|
+
tortor. Morbi tempus ornare tempus. Orci varius natoque penatibus et
|
|
91
|
+
magnis dis parturient montes, nascetur ridiculus mus. Mauris et
|
|
92
|
+
velit neque. Donec ultricies condimentum mauris, pellentesque
|
|
93
|
+
imperdiet libero convallis convallis. Aliquam erat volutpat. Donec
|
|
94
|
+
rutrum semper tempus. Proin dictum imperdiet nibh, quis dapibus
|
|
95
|
+
nulla. Integer sed tincidunt lectus, sit amet auctor eros.
|
|
96
|
+
</p>
|
|
97
|
+
</AccordionContent>
|
|
98
|
+
</AccordionItem>
|
|
99
|
+
|
|
100
|
+
<AccordionItem isExpanded={expanded === 'ex-toggle5'}>
|
|
101
|
+
<AccordionToggle
|
|
102
|
+
onClick={() => {
|
|
103
|
+
onToggle('ex-toggle5')
|
|
104
|
+
}}
|
|
105
|
+
id="ex-toggle5"
|
|
106
|
+
>
|
|
107
|
+
Item five
|
|
108
|
+
</AccordionToggle>
|
|
109
|
+
<AccordionContent id="ex-expand5">
|
|
110
|
+
<p>
|
|
111
|
+
Vivamus finibus dictum ex id ultrices. Mauris dictum neque a iaculis
|
|
112
|
+
blandit.
|
|
113
|
+
</p>
|
|
114
|
+
</AccordionContent>
|
|
115
|
+
</AccordionItem>
|
|
116
|
+
</Accordion>
|
|
117
|
+
)
|
|
118
|
+
}
|
|
@@ -0,0 +1,118 @@
|
|
|
1
|
+
import { useState } from 'react'
|
|
2
|
+
import {
|
|
3
|
+
Accordion,
|
|
4
|
+
AccordionItem,
|
|
5
|
+
AccordionContent,
|
|
6
|
+
AccordionToggle,
|
|
7
|
+
} from '@patternfly/react-core'
|
|
8
|
+
|
|
9
|
+
export const AccordionToggleIconAtStart: React.FunctionComponent = () => {
|
|
10
|
+
const [expanded, setExpanded] = useState('start-toggle-toggle2')
|
|
11
|
+
|
|
12
|
+
const onToggle = (id: string) => {
|
|
13
|
+
if (id === expanded) {
|
|
14
|
+
setExpanded('')
|
|
15
|
+
} else {
|
|
16
|
+
setExpanded(id)
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
return (
|
|
21
|
+
<Accordion togglePosition="start">
|
|
22
|
+
<AccordionItem isExpanded={expanded === 'start-toggle-toggle1'}>
|
|
23
|
+
<AccordionToggle
|
|
24
|
+
onClick={() => {
|
|
25
|
+
onToggle('start-toggle-toggle1')
|
|
26
|
+
}}
|
|
27
|
+
id="start-toggle-toggle1"
|
|
28
|
+
>
|
|
29
|
+
Item one
|
|
30
|
+
</AccordionToggle>
|
|
31
|
+
<AccordionContent id="start-toggle-expand1">
|
|
32
|
+
<p>
|
|
33
|
+
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
|
|
34
|
+
eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
35
|
+
</p>
|
|
36
|
+
</AccordionContent>
|
|
37
|
+
</AccordionItem>
|
|
38
|
+
|
|
39
|
+
<AccordionItem isExpanded={expanded === 'start-toggle-toggle2'}>
|
|
40
|
+
<AccordionToggle
|
|
41
|
+
onClick={() => {
|
|
42
|
+
onToggle('start-toggle-toggle2')
|
|
43
|
+
}}
|
|
44
|
+
id="start-toggle-toggle2"
|
|
45
|
+
>
|
|
46
|
+
Item two
|
|
47
|
+
</AccordionToggle>
|
|
48
|
+
<AccordionContent id="start-toggle-expand2">
|
|
49
|
+
<p>
|
|
50
|
+
Vivamus et tortor sed arcu congue vehicula eget et diam. Praesent
|
|
51
|
+
nec dictum lorem. Aliquam id diam ultrices, faucibus erat id,
|
|
52
|
+
maximus nunc.
|
|
53
|
+
</p>
|
|
54
|
+
</AccordionContent>
|
|
55
|
+
</AccordionItem>
|
|
56
|
+
|
|
57
|
+
<AccordionItem isExpanded={expanded === 'start-toggle-toggle3'}>
|
|
58
|
+
<AccordionToggle
|
|
59
|
+
onClick={() => {
|
|
60
|
+
onToggle('start-toggle-toggle3')
|
|
61
|
+
}}
|
|
62
|
+
id="start-toggle-toggle3"
|
|
63
|
+
>
|
|
64
|
+
Item three
|
|
65
|
+
</AccordionToggle>
|
|
66
|
+
<AccordionContent id="start-toggle-expand3">
|
|
67
|
+
<p>
|
|
68
|
+
Morbi vitae urna quis nunc convallis hendrerit. Aliquam congue orci
|
|
69
|
+
quis ultricies tempus.
|
|
70
|
+
</p>
|
|
71
|
+
</AccordionContent>
|
|
72
|
+
</AccordionItem>
|
|
73
|
+
|
|
74
|
+
<AccordionItem isExpanded={expanded === 'start-toggle-toggle4'}>
|
|
75
|
+
<AccordionToggle
|
|
76
|
+
onClick={() => {
|
|
77
|
+
onToggle('start-toggle-toggle4')
|
|
78
|
+
}}
|
|
79
|
+
id="start-toggle-toggle4"
|
|
80
|
+
>
|
|
81
|
+
Item four
|
|
82
|
+
</AccordionToggle>
|
|
83
|
+
<AccordionContent id="start-toggle-expand4">
|
|
84
|
+
<p>
|
|
85
|
+
Donec vel posuere orci. Phasellus quis tortor a ex hendrerit
|
|
86
|
+
efficitur. Aliquam lacinia ligula pharetra, sagittis ex ut,
|
|
87
|
+
pellentesque diam. Vestibulum ante ipsum primis in faucibus orci
|
|
88
|
+
luctus et ultrices posuere cubilia Curae; Vestibulum ultricies nulla
|
|
89
|
+
nibh. Etiam vel dui fermentum ligula ullamcorper eleifend non quis
|
|
90
|
+
tortor. Morbi tempus ornare tempus. Orci varius natoque penatibus et
|
|
91
|
+
magnis dis parturient montes, nascetur ridiculus mus. Mauris et
|
|
92
|
+
velit neque. Donec ultricies condimentum mauris, pellentesque
|
|
93
|
+
imperdiet libero convallis convallis. Aliquam erat volutpat. Donec
|
|
94
|
+
rutrum semper tempus. Proin dictum imperdiet nibh, quis dapibus
|
|
95
|
+
nulla. Integer sed tincidunt lectus, sit amet auctor eros.
|
|
96
|
+
</p>
|
|
97
|
+
</AccordionContent>
|
|
98
|
+
</AccordionItem>
|
|
99
|
+
|
|
100
|
+
<AccordionItem isExpanded={expanded === 'start-toggle-toggle5'}>
|
|
101
|
+
<AccordionToggle
|
|
102
|
+
onClick={() => {
|
|
103
|
+
onToggle('start-toggle-toggle5')
|
|
104
|
+
}}
|
|
105
|
+
id="start-toggle-toggle5"
|
|
106
|
+
>
|
|
107
|
+
Item five
|
|
108
|
+
</AccordionToggle>
|
|
109
|
+
<AccordionContent id="start-toggle-expand5">
|
|
110
|
+
<p>
|
|
111
|
+
Vivamus finibus dictum ex id ultrices. Mauris dictum neque a iaculis
|
|
112
|
+
blandit.
|
|
113
|
+
</p>
|
|
114
|
+
</AccordionContent>
|
|
115
|
+
</AccordionItem>
|
|
116
|
+
</Accordion>
|
|
117
|
+
)
|
|
118
|
+
}
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import{a as pe,r as c,b as ge}from"./index.CTH3fVMn.js";/* empty css */var N={exports:{}},y={};/**
|
|
2
|
-
* @license React
|
|
3
|
-
* react-jsx-runtime.production.min.js
|
|
4
|
-
*
|
|
5
|
-
* Copyright (c) Facebook, Inc. and its affiliates.
|
|
6
|
-
*
|
|
7
|
-
* This source code is licensed under the MIT license found in the
|
|
8
|
-
* LICENSE file in the root directory of this source tree.
|
|
9
|
-
*/var J;function be(){if(J)return y;J=1;var e=pe(),t=Symbol.for("react.element"),n=Symbol.for("react.fragment"),a=Object.prototype.hasOwnProperty,l=e.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,r={key:!0,ref:!0,__self:!0,__source:!0};function s(i,o,f){var d,m={},v=null,p=null;f!==void 0&&(v=""+f),o.key!==void 0&&(v=""+o.key),o.ref!==void 0&&(p=o.ref);for(d in o)a.call(o,d)&&!r.hasOwnProperty(d)&&(m[d]=o[d]);if(i&&i.defaultProps)for(d in o=i.defaultProps,o)m[d]===void 0&&(m[d]=o[d]);return{$$typeof:t,type:i,key:v,ref:p,props:m,_owner:l.current}}return y.Fragment=n,y.jsx=s,y.jsxs=s,y}var H;function he(){return H||(H=1,N.exports=be()),N.exports}var Ge=he();function $(e,t){var n={};for(var a in e)Object.prototype.hasOwnProperty.call(e,a)&&t.indexOf(a)<0&&(n[a]=e[a]);if(e!=null&&typeof Object.getOwnPropertySymbols=="function")for(var l=0,a=Object.getOwnPropertySymbols(e);l<a.length;l++)t.indexOf(a[l])<0&&Object.prototype.propertyIsEnumerable.call(e,a[l])&&(n[a[l]]=e[a[l]]);return n}function h(...e){const t=[],n={}.hasOwnProperty;return e.filter(Boolean).forEach(a=>{const l=typeof a;if(l==="string"||l==="number")t.push(a);else if(Array.isArray(a)&&a.length){const r=h(...a);r&&t.push(r)}else if(l==="object")for(const r in a)n.call(a,r)&&a[r]&&t.push(r)}),t.join(" ")}const ve={value:"36rem"},xe={value:"48rem"},ye={value:"62rem"},_e={value:"75rem"},Ie={value:"90.625rem"},Ce={value:"0rem"},Ee={value:"40rem"},Oe={value:"48rem"},we={value:"60rem"},ke={value:"80rem"};let $e=0;function E({name:e,xOffset:t=0,yOffset:n=0,width:a,height:l,svgPath:r}){var s;return s=class extends c.Component{constructor(){super(...arguments),this.id=`icon-title-${$e++}`}render(){const o=this.props,{title:f,className:d}=o,m=$(o,["title","className"]),v=d?`pf-v6-svg ${d}`:"pf-v6-svg",p=!!f,R=[t,n,a,l].join(" ");return c.createElement("svg",Object.assign({className:v,viewBox:R,fill:"currentColor","aria-labelledby":p?this.id:null,"aria-hidden":p?null:!0,role:"img",width:"1em",height:"1em"},m),p&&c.createElement("title",{id:this.id},f),c.createElement("path",{d:r}))}},s.displayName=e,s}const Re={name:"CheckCircleIcon",height:512,width:512,svgPath:"M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z",yOffset:0,xOffset:0},Pe=E(Re),Be={name:"ExclamationCircleIcon",height:512,width:512,svgPath:"M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z",yOffset:0,xOffset:0},Le=E(Be),Ne={name:"ExclamationTriangleIcon",height:512,width:576,svgPath:"M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z",yOffset:0,xOffset:0},Se=E(Ne),je={name:"InfoCircleIcon",height:512,width:512,svgPath:"M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z",yOffset:0,xOffset:0},De=E(je),Ae={name:"BellIcon",height:1024,width:896,svgPath:"M448,0 C465.333333,0 480.333333,6.33333333 493,19 C505.666667,31.6666667 512,46.6666667 512,64 L512,106 L514.23,106.45 C587.89,121.39 648.48,157.24 696,214 C744,271.333333 768,338.666667 768,416 C768,500 780,568.666667 804,622 C818.666667,652.666667 841.333333,684 872,716 C873.773676,718.829136 875.780658,721.505113 878,724 C890,737.333333 896,752.333333 896,769 C896,785.666667 890,800.333333 878,813 C866,825.666667 850.666667,832 832,832 L63.3,832 C44.9533333,831.84 29.8533333,825.506667 18,813 C6,800.333333 0,785.666667 0,769 C0,752.333333 6,737.333333 18,724 L24,716 L25.06,714.9 C55.1933333,683.28 77.5066667,652.313333 92,622 C116,568.666667 128,500 128,416 C128,338.666667 152,271.333333 200,214 C248,156.666667 309.333333,120.666667 384,106 L384,63.31 C384.166667,46.27 390.5,31.5 403,19 C415.666667,6.33333333 430.666667,0 448,0 Z M576,896 L576,897.08 C575.74,932.6 563.073333,962.573333 538,987 C512.666667,1011.66667 482.666667,1024 448,1024 C413.333333,1024 383.333333,1011.66667 358,987 C332.666667,962.333333 320,932 320,896 L576,896 Z",yOffset:0,xOffset:0},Te=E(Ae);var K;(function(e){e.success="success",e.error="error",e.warning="warning",e.default="default"})(K||(K={}));const Ye={Escape:"Escape",Enter:"Enter"},_={sm:parseInt(ve.value)*16,md:parseInt(xe.value)*16,lg:parseInt(ye.value)*16,xl:parseInt(_e.value)*16,"2xl":parseInt(Ie.value)*16},I={sm:parseInt(Ce.value)*16,md:parseInt(Ee.value)*16,lg:parseInt(Oe.value)*16,xl:parseInt(we.value)*16,"2xl":parseInt(ke.value)*16},Qe={success:Pe,danger:Le,warning:Se,info:De,custom:Te};var Xe=ge();function et(e="pf"){const t=new Date().getTime()+Math.random().toString(36).slice(2);return`${e}-${t}`}function tt(e,t,n,a=!1){if(!e||!t)return!1;const l=e.getBoundingClientRect(),r=t.getBoundingClientRect(),s=Math.ceil(l.left),i=Math.floor(l.right),o=Math.ceil(r.left),f=Math.floor(r.right),d=o>=s&&f<=i,m=!a&&l.width<r.width&&(o<s&&f>s||f>i&&o<i);return d||m}const nt=(e,t,n="",a,l)=>{if(!e)return"";if(a){if(a in e)return t.modifiers[S(`${n}${e[a]}`)];const r=["2xl","xl","lg","md","sm","default"],s=r.indexOf(a);for(let i=s;i<r.length;i++)if(r[i]in e)return t.modifiers[S(`${n}${e[r[i]]}`)];return""}return Object.entries(e||{}).map(([r,s])=>`${n}${s}${r!=="default"?`-on-${r}`:""}`).map(S).map(r=>r.replace(/-?(\dxl)/gi,(s,i)=>`_${i}`)).map(r=>t.modifiers[r]).filter(Boolean).join(" ")},at=e=>e===null?null:e>=I["2xl"]?"2xl":e>=I.xl?"xl":e>=I.lg?"lg":e>=I.md?"md":e>=I.sm?"sm":"default",rt=e=>e===null?null:e>=_["2xl"]?"2xl":e>=_.xl?"xl":e>=_.lg?"lg":e>=_.md?"md":e>=_.sm?"sm":"default",ze=e=>e.toUpperCase().replace("-","").replace("_",""),S=e=>e.replace(/([-_][a-z])/gi,ze),st=!!(typeof window<"u"&&window.document&&window.document.createElement),V=(e,t)=>{const n=getComputedStyle(t),a=()=>{let s="";const i={"50%":"ultra-condensed","62.5%":"extra-condensed","75%":"condensed","87.5%":"semi-condensed","100%":"normal","112.5%":"semi-expanded","125%":"expanded","150%":"extra-expanded","200%":"ultra-expanded"};let o;return n.fontStretch in i?o=i[n.fontStretch]:o="normal",s=n.fontStyle+" "+n.fontVariant+" "+n.fontWeight+" "+o+" "+n.fontSize+"/"+n.lineHeight+" "+n.fontFamily,s},r=document.createElement("canvas").getContext("2d");return r.font=n.font||a(),r.measureText(e).width},Me=e=>{const t=getComputedStyle(e);let n=e.clientWidth,a=e.clientHeight;return a-=parseFloat(t.paddingTop)+parseFloat(t.paddingBottom),n-=parseFloat(t.paddingLeft)+parseFloat(t.paddingRight),{height:a,width:n}},it=(e,t)=>{const n=Me(e).width;let a=t;if(V(t,e)>n){for(;V(`...${a}`,e)>n;)a=a.substring(1);e.value?e.value=`...${a}`:e.innerText=`...${a}`}else e.value?e.value=t:e.innerText=t},lt=e=>{e.forEach(t=>{t.current&&clearTimeout(t.current)})},ot=(e,t="ltr")=>{if(!e)return t;const n=getComputedStyle(e).getPropertyValue("direction");return["ltr","rtl"].includes(n)?n:t};let Fe=0;const G="OUIA-Generated-",j={};function ct(e,t,n=!0){return{"data-ouia-component-type":`PF6/${e}`,"data-ouia-safe":n,"data-ouia-component-id":t}}const Ue=(e,t,n=!0,a)=>({"data-ouia-component-type":`PF6/${e}`,"data-ouia-safe":n,"data-ouia-component-id":qe(e,t,a)}),qe=(e,t,n)=>{const a=c.useMemo(()=>We(e,n),[e,n]);return t??a};function We(e,t){try{let n;return typeof window<"u"?n=`${window.location.href}-${e}-${t||""}`:n=`${e}-${t||""}`,j[n]||(j[n]=0),`${G}${e}-${t?`${t}-`:""}${++j[n]}`}catch{return`${G}${e}-${t?`${t}-`:""}${++Fe}`}}const u={button:"pf-v6-c-button",buttonCount:"pf-v6-c-button__count",buttonIcon:"pf-v6-c-button__icon",buttonProgress:"pf-v6-c-button__progress",modifiers:{primary:"pf-m-primary",unread:"pf-m-unread",secondary:"pf-m-secondary",danger:"pf-m-danger",tertiary:"pf-m-tertiary",link:"pf-m-link",inline:"pf-m-inline",displayLg:"pf-m-display-lg",warning:"pf-m-warning",control:"pf-m-control",stateful:"pf-m-stateful",read:"pf-m-read",attention:"pf-m-attention",plain:"pf-m-plain",noPadding:"pf-m-no-padding",block:"pf-m-block",small:"pf-m-small",clicked:"pf-m-clicked",disabled:"pf-m-disabled",ariaDisabled:"pf-m-aria-disabled",progress:"pf-m-progress",inProgress:"pf-m-in-progress",start:"pf-m-start",end:"pf-m-end"}},w={modifiers:{inline:"pf-m-inline",sm:"pf-m-sm",md:"pf-m-md",lg:"pf-m-lg",xl:"pf-m-xl"},spinner:"pf-v6-c-spinner",spinnerPath:"pf-v6-c-spinner__path"},Je={name:"--pf-v6-c-spinner--diameter"};var D;(function(e){e.sm="sm",e.md="md",e.lg="lg",e.xl="xl"})(D||(D={}));const Z=e=>{var{className:t="",size:n="xl","aria-valuetext":a="Loading...",diameter:l,isInline:r=!1,"aria-label":s,"aria-labelledBy":i}=e,o=$(e,["className","size","aria-valuetext","diameter","isInline","aria-label","aria-labelledBy"]);return c.createElement("svg",Object.assign({className:h(w.spinner,r?w.modifiers.inline:w.modifiers[n],t),role:"progressbar","aria-valuetext":a,viewBox:"0 0 100 100"},l&&{style:{[Je.name]:l}},s&&{"aria-label":s},i&&{"aria-labelledBy":i},!s&&!i&&{"aria-label":"Contents"},o),c.createElement("circle",{className:w.spinnerPath,cx:"50",cy:"50",r:"45",fill:"none"}))};Z.displayName="Spinner";const k={badge:"pf-v6-c-badge",modifiers:{read:"pf-m-read",unread:"pf-m-unread",disabled:"pf-m-disabled"}},Y=e=>{var{isRead:t=!1,isDisabled:n=!1,className:a="",children:l="",screenReaderText:r}=e,s=$(e,["isRead","isDisabled","className","children","screenReaderText"]);return c.createElement("span",Object.assign({},s,{className:h(k.badge,t?k.modifiers.read:k.modifiers.unread,n&&k.modifiers.disabled,a)}),l,r&&c.createElement("span",{className:"pf-v6-screen-reader"},r))};Y.displayName="Badge";var g;(function(e){e.primary="primary",e.secondary="secondary",e.tertiary="tertiary",e.danger="danger",e.warning="warning",e.link="link",e.plain="plain",e.control="control",e.stateful="stateful"})(g||(g={}));var A;(function(e){e.button="button",e.submit="submit",e.reset="reset"})(A||(A={}));var C;(function(e){e.default="default",e.sm="sm",e.lg="lg"})(C||(C={}));var T;(function(e){e.read="read",e.unread="unread",e.attention="attention"})(T||(T={}));const He=e=>{var{children:t=null,className:n="",component:a="button",isClicked:l=!1,isBlock:r=!1,isDisabled:s=!1,isAriaDisabled:i=!1,isLoading:o=null,isDanger:f=!1,spinnerAriaValueText:d,spinnerAriaLabelledBy:m,spinnerAriaLabel:v,size:p=C.default,inoperableEvents:R=["onClick","onKeyPress"],isInline:P=!1,type:X=A.button,variant:b=g.primary,state:ee=T.unread,hasNoPadding:te=!1,iconPosition:z="start","aria-label":ne=null,icon:M=null,role:ae,ouiaId:re,ouiaSafe:se=!0,tabIndex:F=null,innerRef:ie,countOptions:O}=e,le=$(e,["children","className","component","isClicked","isBlock","isDisabled","isAriaDisabled","isLoading","isDanger","spinnerAriaValueText","spinnerAriaLabelledBy","spinnerAriaLabel","size","inoperableEvents","isInline","type","variant","state","hasNoPadding","iconPosition","aria-label","icon","role","ouiaId","ouiaSafe","tabIndex","innerRef","countOptions"]);const oe=Ue(Q.displayName,re,se,b),B=a,x=B==="button",L=P&&B==="span",U=z==="end"||z==="right",ce=R.reduce((de,fe)=>Object.assign(Object.assign({},de),{[fe]:me=>{me.preventDefault()}}),{}),ue=()=>{if(s)return x?null:-1;if(i)return null;if(L)return 0},q=M&&c.createElement("span",{className:h(u.buttonIcon,t&&u.modifiers[U?"end":"start"])},M),W=t&&c.createElement("span",{className:h("pf-v6-c-button__text")},t);return c.createElement(B,Object.assign({},le,i?ce:null,{"aria-disabled":i||!x&&s,"aria-label":ne,className:h(u.button,u.modifiers[b],r&&u.modifiers.block,s&&!x&&u.modifiers.disabled,i&&u.modifiers.ariaDisabled,l&&u.modifiers.clicked,P&&b===g.link&&u.modifiers.inline,f&&(b===g.secondary||b===g.link)&&u.modifiers.danger,o!==null&&b!==g.plain&&u.modifiers.progress,o&&u.modifiers.inProgress,te&&b===g.plain&&u.modifiers.noPadding,b===g.stateful&&u.modifiers[ee],p===C.sm&&u.modifiers.small,p===C.lg&&u.modifiers.displayLg,n),disabled:x?s:null,tabIndex:F!==null?F:ue(),type:x||L?X:null,role:L?"button":ae,ref:ie},oe),o&&c.createElement("span",{className:h(u.buttonProgress)},c.createElement(Z,{size:D.md,isInline:P,"aria-valuetext":d,"aria-label":v,"aria-labelledby":m})),U?c.createElement(c.Fragment,null,W,q):c.createElement(c.Fragment,null,q,W),O&&c.createElement("span",{className:h(u.buttonCount,O.className)},c.createElement(Y,{isRead:O.isRead,isDisabled:s},O.count)))},Q=c.forwardRef((e,t)=>c.createElement(He,Object.assign({innerRef:t},e)));Q.displayName="Button";export{Q as B,Pe as C,Se as E,Ye as K,Z as S,K as V,$ as _,g as a,st as b,E as c,h as d,Le as e,We as f,et as g,ct as h,nt as i,Ge as j,Y as k,Ie as l,_e as m,ye as n,xe as o,S as p,at as q,rt as r,Qe as s,it as t,Ue as u,tt as v,ot as w,lt as x,Xe as y};
|