[react] feat: Merged Button and CopyToClipboardButton
This commit is contained in:
parent
749b6b9da7
commit
e58177dedb
14 changed files with 105 additions and 122 deletions
|
@ -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>
|
||||
)
|
||||
|
|
|
@ -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} />
|
||||
|
|
|
@ -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>
|
||||
</>
|
||||
)
|
|
@ -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>
|
||||
|
Loading…
Add table
Add a link
Reference in a new issue