Whant to add some dynamics to your stories?
bool : String -> Basics.Bool -> Story (Basics.Bool -> a) -> Story a
Knob of a Bool
value.
storyButton : Bulletproof.Story
storyButton =
Bulletproof.story "Button"
(\bool ->
button
[ disabled bool ]
[ text "Sign In" ]
|> Bulletproof.fromHtml
)
|> Bulletproof.Knob.bool "disabled" True
string : String -> String -> Story (String -> a) -> Story a
Knob of a String
value.
storyButton : Bulletproof.Story
storyButton =
Bulletproof.story "Button"
(\title ->
button
[]
[ text title ]
|> Bulletproof.fromHtml
)
|> Bulletproof.Knob.string "Title" "Sign In"
Specific property to configurate numeric knobs.
min : number -> Property number
Set minimum value for numeric knobs.
Note: Default for
int
andfloat
ranges is0
storyInput : Bulletproof.Story
storyInput =
Bulletproof.story "Input"
(\int float ->
input
[ size int
, style "width" (pct float)
]
[]
|> Bulletproof.fromHtml
)
|> Bulletproof.Knob.int "Size"
200
[ Bulletproof.Knob.min 100
]
|> Bulletproof.Knob.float "Width"
0.5
[ Bulletproof.Knob.min 0.25
]
max : number -> Property number
Set maximum value for numeric knobs.
Note: Defaults for
int
andfloat
ranges are100
and1
respectively.
storyInput : Bulletproof.Story
storyInput =
Bulletproof.story "Input"
(\int float ->
input
[ size int
, style "width" (pct float)
]
[]
|> Bulletproof.fromHtml
)
|> Bulletproof.Knob.int "Size"
200
[ Bulletproof.Knob.max 1000
]
|> Bulletproof.Knob.float "Width"
0.5
[ Bulletproof.Knob.max 0.75
]
step : number -> Property number
Set step for numeric knobs.
Note: Defaults for
int
andfloat
ranges are1
and0.01
respectively.
storyInput : Bulletproof.Story
storyInput =
Bulletproof.story "Input"
(\int float ->
input
[ size int
, style "width" (pct float)
]
[]
|> Bulletproof.fromHtml
)
|> Bulletproof.Knob.int "Size"
200
[ Bulletproof.Knob.step 100
]
|> Bulletproof.Knob.float "Width"
0.5
[ Bulletproof.Knob.step 0.1
]
range : Property num
Represent numeric knob as range but not input.
storyInput : Bulletproof.Story
storyInput =
Bulletproof.story "Input"
(\int float ->
input
[ size int
, style "width" (pct float)
]
[]
|> Bulletproof.fromHtml
)
|> Bulletproof.Knob.int "Size"
10
[ Bulletproof.Knob.range
]
|> Bulletproof.Knob.float "Width"
0.5
[ Bulletproof.Knob.range
]
int : String -> Basics.Int -> List (Property Basics.Int) -> Story (Basics.Int -> a) -> Story a
Knob of a Int
value.
storyInput : Bulletproof.Story
storyInput =
Bulletproof.story "Input"
(\int ->
input
[ size int
]
[]
|> Bulletproof.fromHtml
)
|> Bulletproof.Knob.int "Size" 10 []
float : String -> Basics.Float -> List (Property Basics.Float) -> Story (Basics.Float -> a) -> Story a
Knob of a Float
value.
storyInput : Bulletproof.Story
storyInput =
Bulletproof.story "Input"
(\float ->
input
[ style "width" (pct float)
]
[]
|> Bulletproof.fromHtml
)
|> Bulletproof.Knob.float "Width" 0.5 []
radio : String -> List ( String, option ) -> Story (option -> a) -> Story a
Knob of a custom value represented as radio group. The first option is selected by default.
storyInput : Bulletproof.Story
storyInput =
Bulletproof.story "Input"
(\inputType ->
input
[ type_ (Maybe.withDefault "text" inputType)
]
[]
|> Bulletproof.fromHtml
)
|> Bulletproof.Knob.radio "Type"
[ ( "none", Nothing )
, ( "email", Just "email" )
, ( "password", Just "password" )
]
select : String -> List ( String, option ) -> Story (option -> a) -> Story a
Knob of a custom value represented as select element. The first option is selected by default.
storyInput : Bulletproof.Story
storyInput =
Bulletproof.story "Input"
(\inputType ->
input
[ type_ (Maybe.withDefault "text" inputType)
]
[]
|> Bulletproof.fromHtml
)
|> Bulletproof.Knob.select "Type"
[ ( "none", Nothing )
, ( "email", Just "email" )
, ( "password", Just "password" )
]
{ hex : String
, red : Basics.Int
, green : Basics.Int
, blue : Basics.Int
, r : Basics.Int
, g : Basics.Int
, b : Basics.Int
}
Simple shape contains both hex and rgb components.
color : String -> String -> Story (Color -> a) -> Story a
Knob of a Color
value.
storyButton : Bulletproof.Story
storyButton =
Bulletproof.story "Button"
(\bgcolor ->
button
[ style "background" bgcolor.hex ]
[ text "Sign In" ]
|> Bulletproof.fromHtml
)
|> Bulletproof.Knob.color "Background" "#444"
{ posix : Time.Posix
, year : Basics.Int
, month : Basics.Int
, day : Basics.Int
}
Simple shape contains year, month, day and Time.Posix
values.
date : String -> String -> Story (Date -> a) -> Story a
Knob of a Date
value.
storyToday : Bulletproof.Story
storyToday =
Bulletproof.story "Today"
(\date ->
div
[]
[ text "Today is: "
, text (String.fromInt date.day ++ " / ")
, text (String.fromInt date.month ++ " / ")
, text (String.fromInt date.year)
]
|> Bulletproof.fromHtml
)
|> Bulletproof.Knob.date "Date" "31-12-1999"
{ hours : Basics.Int
, minutes : Basics.Int
}
Simple shape contains hours and minutes
time : String -> String -> Story (Time -> a) -> Story a
Knob of a Time
value.
storyNow : Bulletproof.Story
storyNow =
Bulletproof.story "Now"
(\time ->
div
[]
[ text ("Minutes: " ++ String.fromInt time.minutes)
, text " | "
, text ("Hours: " String.fromInt time.hours)
]
|> Bulletproof.fromHtml
)
|> Bulletproof.Knob.time "Time" "14:01"
File
Alias for Elm File
representation.
files : String -> Story (List File -> a) -> Story a
Knob of a List File
value.
storyCountFiles : Bulletproof.Story
storyCountFiles =
Bulletproof.story "Count Files"
(\files ->
text (String.fromInt (List.length files) ++ " files are ready to upload")
|> Bulletproof.fromHtml
)
|> Bulletproof.Knob.files "Files"