github.com/tilt-dev/tilt@v0.33.15-0.20240515162809-0a22ed45d8a0/web/src/ApiButton.stories.tsx (about)

     1  import React from "react"
     2  import { MemoryRouter } from "react-router"
     3  import styled from "styled-components"
     4  import { ApiButton } from "./ApiButton"
     5  import { OverviewButtonMixin } from "./OverviewButton"
     6  import { TiltSnackbarProvider } from "./Snackbar"
     7  import { oneUIButton, textFieldForUIButton } from "./testdata"
     8  import { UIInputSpec } from "./types"
     9  
    10  export default {
    11    title: "New UI/Shared/ApiButton",
    12    decorators: [
    13      (Story: any) => (
    14        <MemoryRouter initialEntries={["/"]}>
    15          <TiltSnackbarProvider>
    16            <Story />
    17          </TiltSnackbarProvider>
    18        </MemoryRouter>
    19      ),
    20    ],
    21  }
    22  
    23  const StyledButton = styled(ApiButton)`
    24    button {
    25      ${OverviewButtonMixin};
    26    }
    27  `
    28  
    29  export const SimpleButton = () => {
    30    const button = oneUIButton({})
    31    return <StyledButton uiButton={button} />
    32  }
    33  
    34  export const RequiresConfirmation = () => {
    35    const button = oneUIButton({ requiresConfirmation: true })
    36    return <StyledButton uiButton={button} />
    37  }
    38  
    39  export const ThreeTextInputs = () => {
    40    const inputs: UIInputSpec[] = [1, 2, 3].map((i) =>
    41      textFieldForUIButton(`text${i}`)
    42    )
    43    const button = oneUIButton({ inputSpecs: inputs })
    44    return <StyledButton uiButton={button} />
    45  }
    46  
    47  export const TextInputOptions = () => {
    48    const button = oneUIButton({
    49      inputSpecs: [
    50        textFieldForUIButton("text1", undefined, "placeholder"),
    51        textFieldForUIButton("text2", "default value"),
    52      ],
    53    })
    54    return <StyledButton uiButton={button} />
    55  }