1
0
Fork 0

[react] feat: Merged Button and CopyToClipboardButton

This commit is contained in:
joostdecock 2025-05-10 14:19:57 +02:00
parent 749b6b9da7
commit e58177dedb
14 changed files with 105 additions and 122 deletions

View file

@ -1,36 +1,25 @@
import React from 'react'
import { Highlight } from '@freesewing/react/components/Highlight'
import { FingerprintIcon, WarningIcon } from '@freesewing/react/components/Icon'
import { IconButton } from '@freesewing/react/components/Button'
import { CopyToClipboardButton, IconButton } from '@freesewing/react/components/Button'
import { MiniNote } from '@freesewing/react/components/Mini'
export const IconButtonExample = () => (
export const CopyToClipboardButtonExample = () => (
<>
<MiniNote>Note that this component will take up the full width made available to it.</MiniNote>
<Highlight language="js">
{[
`import { FingerprintIcon, WarningIcon } from '@freesewing/react/components/Icon'`,
`import { IconButton } from '@freesewing/react/components/Button'`,
``,
`<IconButton>`,
` <FingerprintIcon />`,
` Primary (default)`,
`</IconButton>`,
`<br />`,
`<IconButton color="warning">`,
` <WarningIcon />`,
` Warning`,
`</IconButton>`,
].join('\n')}
</Highlight>
<CopyToClipboardButton content="I am the regular example" label="Regular Example">Regular Example</CopyToClipboardButton>
<CopyToClipboardButton content="I am the sup example" label="Sup Example" sup>Sup Example</CopyToClipboardButton>
</>
)
export const IconButtonExample = () => (
<div className="tw:grid tw:gap-2 tw:grid-cols-2">
<IconButton>
<FingerprintIcon />
Primary (default)
</IconButton>
<br />
<IconButton color="warning">
<WarningIcon />
Warning
</IconButton>
</>
</div>
)

View file

@ -4,15 +4,20 @@ title: Button
import { DocusaurusDoc } from '@freesewing/react/components/Docusaurus'
import { ComponentDocs } from '@site/src/components/component-docs.js'
import { jsdocIconButton } from '@site/prebuild/jsdoc/components.button.mjs'
import { IconButtonExample } from './_examples.js'
import { jsdocCopyToClipboardButton, jsdocIconButton } from '@site/prebuild/jsdoc/components.button.mjs'
import { CopyToClipboardButtonExample, IconButtonExample } from './_examples.js'
<DocusaurusDoc>
The **Button** component family provides the following components:
- [CopyToClipboardButton](#copytoclipboardbutton)
- [IconButton](#iconbutton)
## CopyToClipboardButton
<ComponentDocs docs={jsdocCopyToClipboardButton} example={CopyToClipboardButtonExample} />
## IconButton
<ComponentDocs docs={jsdocIconButton} example={IconButtonExample} />

View file

@ -1,9 +0,0 @@
import React from 'react'
import { CopyToClipboardButton } from '@freesewing/react/components/CopyToClipboardButton'
export const CopyToClipboardButtonExample = () => (
<>
<CopyToClipboardButton content="I am the regular example" label="Regular Example">Regular Example</CopyToClipboardButton>
<CopyToClipboardButton content="I am the sup example" label="Sup Example" sup>Sup Example</CopyToClipboardButton>
</>
)

View file

@ -1,21 +0,0 @@
---
title: CopyToClipboardButton
---
import { DocusaurusDoc } from '@freesewing/react/components/Docusaurus'
import { ComponentDocs } from '@site/src/components/component-docs.js'
import { jsdocCopyToClipboardButton } from '@site/prebuild/jsdoc/components.copytoclipboardbutton.mjs'
import { CopyToClipboardButtonExample } from './_examples.js'
<DocusaurusDoc>
The **CopyToClipboardButton** component family provides the following components:
- [CopyToClipboardButton](#copytoclipboardbutton)
## CopyToClipboardButton
<ComponentDocs docs={jsdocCopyToClipboardButton} example={CopyToClipboardButtonExample} />
</DocusaurusDoc>