Skip to content

Buttons.stories.mdx

Latest commit

 

History

History
136 lines (111 loc) · 3.39 KB

Buttons.stories.mdx

File metadata and controls

136 lines (111 loc) · 3.39 KB
Raw

import * as UI from '../../src/index'

import { Canvas, Meta, Story } from '@storybook/addon-docs'; import { action } from '@storybook/addon-actions'

Button with text (no border)

{UI.widgets.button( document, undefined, "Primary", action("clicked"))} {UI.widgets.button( document, undefined, "Secondary", action("clicked"), {buttonColor: "Secondary"})}

Button with text (needs border)

{UI.widgets.button( document, undefined, "Secondary", action("clicked"), {needsBorder: true})} {UI.widgets.button( document, undefined, "Secondary", action("clicked"), {buttonColor: "Secondary", needsBorder: true})}

Continue & Cancel button

{UI.widgets.continueButton(document, action("clicked"))} {UI.widgets.cancelButton(document, action("clicked"))}

Delete button

{ () => { const div = document.createElement("div"); const result = UI.widgets.deleteButtonWithCheck( document, div, 'something', action('deleted')) return div } }

Button with icon

{ UI.widgets.button(document, 'https://solidproject.org/assets/img/solid-emblem.svg', 'test', action('clicked!')) }

File upload button

{ UI.widgets.fileUploadButtonDiv(document, action('uploaded')) }

Link button

{ () => { document.outlineManager = { GotoSubject: action('go to subject') } return UI.widgets.linkButton(document, $rdf.namedNode('http://example.com/')) } }

Link icon

{ UI.widgets.linkIcon( document, $rdf.namedNode('https://solidproject.org/') ) } { UI.widgets.linkIcon( document, $rdf.namedNode('https://solidproject.org/'), 'https://solidproject.org/favicon.ico' ) }

Remove button

{ () => { const div = document.createElement('div') const p = document.createElement('p') p.appendChild(document.createTextNode('click x to remove me')) const button = UI.widgets.removeButton(document, p) div.appendChild(p) div.appendChild(button) return div } }