Skip to content

Commit b8eec59

Browse files
Misael840Misael840
committed
fix: update documentation
1 parent e35ba83 commit b8eec59

24 files changed

+643
-685
lines changed

‎docs/buttons/active-button.mdx

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
---
2+
product: dd360-ds
3+
title: React ActiveButton component
4+
components: Button
5+
---
6+
7+
<br id='top' />
8+
<br />
9+
10+
<Label>Buttons</Label>
11+
12+
13+
# <HeaderDocCustom title="ActiveButton" pathUrl="active-button--btn-primary" />
14+
15+
The ActiveButton component in React provides a convenient way to display a button that is destined to be a redirect.
16+
17+
<br />
18+
<br />
19+
##### <span name="floating-nav">Imports</span>
20+
21+
<WindowEditor codeString="import { ActiveButton } from 'dd360-ds' " />
22+
<WindowEditor codeString="import { ActiveButton } from 'dd360-ds/ActiveButton'" />
23+
<WindowEditor codeString="import ActiveButton from 'dd360-ds/ActiveButton'" />
24+
25+
<br />
26+
<br />
27+
##### <span name="floating-nav">Usage</span>
28+
29+
Use the properties <TagDocs text='active' /> and <TagDocs text='to' /> to make the button active and redirect to the URL specified in the to property.
30+
31+
<Playground className="w-fit">
32+
<ActiveButton
33+
active
34+
to={() => alert('Redirecting...')}
35+
>
36+
Active Button
37+
</ActiveButton>
38+
</Playground>
39+
40+
<WindowEditor
41+
codeString="import { ActiveButton } from 'dd360-ds'
42+
43+
<ActiveButton
44+
active
45+
to={() => alert('Redirecting...')}
46+
>
47+
Active Button
48+
</ActiveButton>"
49+
/>
50+
51+
<br />
52+
53+
##### <span name="floating-nav">Active</span>
54+
55+
To make the button active, use the property active. When the button is active, it will redirect to the URL specified in the to property.
56+
If the to property is not specified, the button will not redirect and the style will be different.
57+
58+
<Playground className="w-fit">
59+
<ActiveButton
60+
active={false}
61+
to={() => alert('Redirecting...')}
62+
>
63+
Active Button
64+
</ActiveButton>
65+
</Playground>
66+
67+
<WindowEditor
68+
codeString="import { ActiveButton } from 'dd360-ds'
69+
70+
<ActiveButton
71+
active={false}
72+
to={() => alert('Redirecting...')}
73+
>
74+
Active Button
75+
</ActiveButton>"
76+
/>
77+
78+
79+
<br />
80+
<br />
81+
##### <span name="floating-nav">API Reference</span>
82+
83+
<CustomTableDocs
84+
dataTable={[
85+
{ title: 'active', default: 'true', types: ['boolean'] },
86+
{ title: 'to', default: null, types: ['function'] },
87+
{ title: 'children', default: null, types: ['ReactNode'] },
88+
{ title: '...', default: null, types: ['ButtonHTMLAttributes'] }
89+
]}
90+
/>
91+
92+
<BackAndForwardController />

‎docs/buttons/button-shape.mdx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -116,6 +116,8 @@ import DynamicHeroIcon from 'dd360-ds/DynamicHeroIcon'
116116
dataTable={[
117117
{ title: 'height', default: '3rem', types: ['string'] },
118118
{ title: 'icon', default: null, types: ['ReactNode'] },
119+
{ title: 'disabled', default: 'false', types: ['boolean'] },
120+
{ title: 'onClick', default: null, types: ['function'] },
119121
{ title: 'variant (BaseCircleButton exclusive prop)', default: 'circle', types: ['square', 'circle'] }
120122
]}
121123
/>

‎docs/components/badge.mdx

Lines changed: 125 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
1+
---
2+
product: dd360-ds
3+
title: React Badge component
4+
components: Badge
5+
---
6+
7+
<br />
8+
<br />
9+
10+
<Label>Components</Label>
11+
12+
# <HeaderDocCustom title="Badge" pathUrl="images-avatar--with-image" />
13+
14+
The Badge component in React provides a convenient way to display a small piece of information, such as a status, in a visually appealing and attention-grabbing manner.
15+
16+
<br />
17+
18+
##### <span name="floating-nav">Imports</span>
19+
20+
<WindowEditor codeString="import { Badge } from 'dd360-ds'" />
21+
22+
##### <span name="floating-nav">Usage</span>
23+
24+
To use the Badge component, you could start by adding the properties text, classNameIcon and className.
25+
26+
Use the Badge component as shown below:
27+
28+
<Playground>
29+
<Badge text="Hello world" classNameIcon='w-4' className='p-1' />
30+
</Playground>
31+
32+
The code snippet below shows how to use the Badge component:
33+
34+
<WindowEditor
35+
codeString={`import { Badge } from 'dd360-ds'
36+
37+
<Badge text="Hello world"/>
38+
`}/>
39+
40+
<br />
41+
42+
##### <span name="floating-nav">Variant</span>
43+
44+
With the prop variant you can customize the appearance of the Badge component. Available options are: warning, infoPrimary, infoSecondary, success, primary, secondary, and error. Default uses: "infoPrimary".
45+
46+
<Playground className="flex flex-col gap-y-2">
47+
<Badge text="Hello world" classNameIcon='w-4' className='p-1 text-gray-500' variant="warning"/>
48+
<Badge text="Hello world" classNameIcon='w-4' className='p-1 text-gray-500' variant="infoPrimary"/>
49+
<Badge text="Hello world" classNameIcon='w-4' className='p-1 text-gray-500' variant="infoSecondary"/>
50+
<Badge text="Hello world" classNameIcon='w-4' className='p-1 text-gray-500' variant="success"/>
51+
<Badge text="Hello world" classNameIcon='w-4' className='p-1 text-gray-500' variant="primary"/>
52+
<Badge text="Hello world" classNameIcon='w-4' className='p-1 text-gray-500' variant="secondary"/>
53+
<Badge text="Hello world" classNameIcon='w-4' className='p-1 text-gray-500' variant="error"/>
54+
</Playground>
55+
56+
The code snippet below shows how to set a Badge component variant:
57+
58+
<WindowEditor
59+
codeString={`import { Badge } from 'dd360-ds'
60+
61+
<Badge text="Hello world" classNameIcon='w-4' className='p-1 text-gray-500' variant="warning"/>
62+
<Badge text="Hello world" classNameIcon='w-4' className='p-1 text-gray-500' variant="infoPrimary"/>
63+
<Badge text="Hello world" classNameIcon='w-4' className='p-1 text-gray-500' variant="infoSecondary"/>
64+
<Badge text="Hello world" classNameIcon='w-4' className='p-1 text-gray-500' variant="success"/>
65+
<Badge text="Hello world" classNameIcon='w-4' className='p-1 text-gray-500' variant="primary"/>
66+
<Badge text="Hello world" classNameIcon='w-4' className='p-1 text-gray-500' variant="secondary"/>
67+
<Badge text="Hello world" classNameIcon='w-4' className='p-1 text-gray-500' variant="error"/>
68+
`}/>
69+
70+
<br />
71+
72+
##### <span name="floating-nav">Icon</span>
73+
74+
With the prop icon you can customize the icon of the Badge component. Available options are: tag, clock, warning, check, success, exclamation, clipboard-copy, HomeIcon, RefreshIcon, and none. Default uses: "HomeIcon".
75+
76+
<Playground className="flex flex-col gap-y-2">
77+
<Badge text="tag" classNameIcon='w-4' className='p-1 text-gray-500' icon="tag"/>
78+
<Badge text="clock" classNameIcon='w-4' className='p-1 text-gray-500' icon="clock"/>
79+
<Badge text="warning" classNameIcon='w-4' className='p-1 text-gray-500' icon="warning"/>
80+
<Badge text="check" classNameIcon='w-4' className='p-1 text-gray-500' icon="check"/>
81+
<Badge text="success" classNameIcon='w-4' className='p-1 text-gray-500' icon="success"/>
82+
<Badge text="exclamation" classNameIcon='w-4' className='p-1 text-gray-500' icon="exclamation"/>
83+
<Badge text="clipboard-copy" classNameIcon='w-4' className='p-1 text-gray-500' icon="clipboard-copy"/>
84+
<Badge text="HomeIcon" classNameIcon='w-4' className='p-1 text-gray-500' icon="HomeIcon"/>
85+
<Badge text="RefreshIcon" classNameIcon='w-4' className='p-1 text-gray-500' icon="RefreshIcon"/>
86+
<Badge text="none" classNameIcon='w-4' className='p-1 text-gray-500' icon="none"/>
87+
</Playground>
88+
89+
The code snippet below shows how to set a Badge component icon:
90+
91+
<WindowEditor
92+
codeString={`import { Badge } from 'dd360-ds'
93+
94+
<Badge text="tag" classNameIcon='w-4' className='p-1 text-gray-500' icon="tag"/>
95+
<Badge text="clock" classNameIcon='w-4' className='p-1 text-gray-500' icon="clock"/>
96+
<Badge text="warning" classNameIcon='w-4' className='p-1 text-gray-500' icon="warning"/>
97+
<Badge text="check" classNameIcon='w-4' className='p-1 text-gray-500' icon="check"/>
98+
<Badge text="success" classNameIcon='w-4' className='p-1 text-gray-500' icon="success"/>
99+
<Badge text="exclamation" classNameIcon='w-4' className='p-1 text-gray-500' icon="exclamation"/>
100+
<Badge text="clipboard-copy" classNameIcon='w-4' className='p-1 text-gray-500' icon="clipboard-copy"/>
101+
<Badge text="HomeIcon" classNameIcon='w-4' className='p-1 text-gray-500' icon="HomeIcon"/>
102+
<Badge text="RefreshIcon" classNameIcon='w-4' className='p-1 text-gray-500' icon="RefreshIcon"/>
103+
<Badge text="none" classNameIcon='w-4' className='p-1 text-gray-500' icon="none"/>
104+
`}/>
105+
106+
<br />
107+
<br />
108+
109+
##### <span name="floating-nav">API Reference</span>
110+
111+
<CustomTableDocs
112+
dataTable={[
113+
{ title: 'variant', default: 'infoPrimary', types: ['warning', 'infoPrimary', 'infoSecondary', 'success', 'primary', 'secondary', 'error'] },
114+
{ title: 'icon', default: 'HomeIcon', types: ['tag', 'clock', 'warning', 'check', 'success', 'exclamation', 'clipboard-copy', 'HomeIcon', 'RefreshIcon', 'none'] },
115+
{ title: 'text', default: 'Home Badge', types: ['string'] },
116+
{ title: 'classNameIcon', default: null, types: ['string'] },
117+
{ title: 'classNameText', default: null, types: ['string'] },
118+
{ title: 'className', default: null, types: ['string'] }
119+
]}
120+
/>
121+
122+
Note: This documentation assumes that the audience has basic knowledge of React
123+
and how to use components in React applications.
124+
125+
<BackAndForwardController />

‎docs/components/callout.mdx

Lines changed: 28 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -123,16 +123,41 @@ export default function App() {
123123
)
124124
}`} />
125125

126+
<br />
127+
128+
##### <span name="floating-nav">CallToAction</span>
129+
130+
With the prop <TagDocs text='callToAction' /> you can render a custom component in the callout, is a optional prop.
131+
132+
<Playground className="gap-y-2">
133+
<Flex gap="4">
134+
<CustomCallout title="All systems are operational" callToAction={<Button variant='secondary'>Click here</Button>} />
135+
</Flex>
136+
</Playground>
137+
138+
<WindowEditor
139+
codeString={`import { Callout, Flex } from 'dd360-ds'
140+
import { XCircleIcon } from '@heroicons/react/solid'
141+
142+
export default function App() {
143+
return (
144+
<Flex gap="4">
145+
<CustomCallout title="All systems are operational" callToAction={<Button variant='secondary'>Click here</Button>} />
146+
</Flex>
147+
)
148+
}`} />
149+
126150
<br />
127151
<br />
128152
##### <span name="floating-nav">API Reference</span>
129153

130154
<CustomTableDocs
131155
dataTable={[
132156
{ title: 'icon', types: ['React.ElementType'] },
133-
{ title: 'description', types: ['string'] },
134-
{ title: 'variant', default: 'success', types: ['info', 'warning', 'error', 'success'] },
135-
{ title: 'title', types: ['string'], required: true },
157+
{ title: 'description', types: ['string'] },
158+
{ title: 'variant', default: 'success', types: ['info', 'warning', 'error', 'success'] },
159+
{ title: 'title', types: ['string'], required: true },
160+
{ title: 'callToAction', types: ['ReactNode'], default: null }
136161
]}
137162

138163
/>

0 commit comments

Comments
 (0)