import React from "react" ; import { action } from "@storybook/addon-actions" ; import { Tree } from ".." ; import notes from "../../README.md" ; export default { title : "Components/Tree/Features" , parameters : { notes } , } ; export const BasicUsage = ( ) => ( < Tree label = "School Activities" > < Tree label = "Performance" > < Tree label = "Band" > < Tree label = "Trumpet" / > < Tree label = "Trombone" / > < /Tree> < Tree label = "Choir" / > < Tree label = "Theater" / > < /Tree> < Tree label = "Sports" > < Tree label = "Fall" > < Tree label = "Tennis" / > < Tree label = "Badminton" / > < /Tree> < /Tree> < /Tree>); export const WithoutHover = ( ) => ( < Tree label = "School Activities" hover = { false } > < Tree label = "Performance" > < Tree label = "Band" > < Tree label = "Trumpet" / > < Tree label = "Trombone" / > < /Tree> < Tree label = "Choir" / > < Tree label = "Theater" / > < /Tree> < Tree label = "Sports" > < Tree label = "Fall" > < Tree label = "Tennis" / > < Tree label = "Badminton" / > < /Tree> < /Tree> < /Tree>); export const KeyboardControl = ( ) => ( < > < button > Before < /button> < Tree label = "School Activities" > < Tree label = "Performance" > < Tree label = "Band" > < Tree label = "Trumpet" / > < Tree label = "Trombone" / > < /Tree> < Tree label = "Choir" / > < Tree label = "Theater" / > < /Tree> < Tree label = "Sports" > < Tree label = "Fall" > < Tree label = "Tennis" / > < Tree label = "Badminton" / > < /Tree> < /Tree> < /Tree> < button > After < /button> < />); export const InsideContainer = ( ) => ( < div style = { { width : "400px" , marginLeft : "auto" , marginRight : "auto" } } > < Tree label = "School Activities" > < Tree label = "Performance" > < Tree label = "Band" > < Tree label = "Trumpet" / > < Tree label = "Trombone" / > < /Tree> < Tree label = "Choir" / > < Tree label = "Theater" / > < /Tree> < Tree label = "Sports" > < Tree label = "Fall" > < Tree label = "Tennis" / > < Tree label = "Badminton" / > < /Tree> < /Tree> < /Tree> < /div>); export const DefaultOpen = ( ) => ( < Tree open label = "School Activities" > < Tree label = "Performance" > < Tree label = "Band" > < Tree label = "Trumpet" / > < Tree label = "Trombone" / > < /Tree> < Tree label = "Choir" / > < Tree label = "Theater" / > < /Tree> < Tree label = "Sports" > < Tree label = "Fall" > < Tree label = "Tennis" / > < Tree label = "Badminton" / > < /Tree> < /Tree> < /Tree>); export const OnSelect = ( ) => { const onSelect = action ( "onSelect" ) ; return ( < Tree label = "School Activities" onSelect = { onSelect } > < Tree label = "Performance" onSelect = { onSelect } > < Tree label = "Band" onSelect = { onSelect } > < Tree label = "Trumpet" onSelect = { onSelect } / > < Tree label = "Trombone" onSelect = { onSelect } / > < /Tree> < Tree label = "Choir" / > < Tree label = "Theater" / > < /Tree> < Tree label = "Sports" > < Tree label = "Fall" > < Tree label = "Tennis" / > < Tree label = "Badminton" / > < /Tree> < /Tree> < /Tree>); } ; export const OnUpdate = ( ) => { const onUpdate = action ( "onUpdate" ) ; return ( < Tree label = "School Activities" onUpdate = { onUpdate } > < Tree label = "Performance" > < Tree label = "Band" > < Tree label = "Trumpet" / > < Tree label = "Trombone" / > < /Tree> < /Tree> < /Tree>); } ;