mirror of
https://github.com/NoRedInk/noredink-ui.git
synced 2024-12-18 11:11:38 +03:00
Add new icon version
This commit is contained in:
Tessa Kelly
parent
5cb8d4ceff
commit
00a2e94656
837
src/Nri/Ui/Icon/V3.elm
Normal file
837
src/Nri/Ui/Icon/V3.elm
Normal file
@ -0,0 +1,837 @@
|
||||
module Nri.Ui.Icon.V3
|
||||
exposing
|
||||
( IconLinkSpaModel
|
||||
, IconSize(..)
|
||||
, IconType
|
||||
, activity
|
||||
, add
|
||||
, arrowDown
|
||||
, arrowLeft
|
||||
, arrowRight
|
||||
, assignmentTypeDiagnostic
|
||||
, assignmentTypePractice
|
||||
, assignmentTypeQuiz
|
||||
, assignmentTypeWritingCycle
|
||||
, attention
|
||||
, bang
|
||||
, bulb
|
||||
, button
|
||||
, calendar
|
||||
, caret
|
||||
, checkMark
|
||||
, checkMarkSquiggily
|
||||
, checkMarkSvg
|
||||
, class
|
||||
, clever
|
||||
, clock
|
||||
, close
|
||||
, compassSvg
|
||||
, copy
|
||||
, custom
|
||||
, darkBlueCheckMark
|
||||
, decorativeIcon
|
||||
, document
|
||||
, download
|
||||
, edit
|
||||
, editWriting
|
||||
, equalitySign
|
||||
, exclamation
|
||||
, facebook
|
||||
, flag
|
||||
, flipper
|
||||
, footsteps
|
||||
, gardening
|
||||
, gear
|
||||
, greenCheckMark
|
||||
, guidedWrite
|
||||
, help
|
||||
, highFive
|
||||
, icon
|
||||
, key
|
||||
, late
|
||||
, leaderboard
|
||||
, lightBulb
|
||||
, link
|
||||
, linkExternal
|
||||
, linkSpa
|
||||
, lock
|
||||
, lockDeprecated
|
||||
, logo
|
||||
, masteryBadge
|
||||
, newspaper
|
||||
, notStarred
|
||||
, okay
|
||||
, openClose
|
||||
, peerReview
|
||||
, performance
|
||||
, personBlue
|
||||
, preview
|
||||
, quickWrite
|
||||
, rating
|
||||
, revising
|
||||
, seeMore
|
||||
, share
|
||||
, skip
|
||||
, sort
|
||||
, sortArrow
|
||||
, speedometer
|
||||
, starred
|
||||
, submitting
|
||||
, thumbsUp
|
||||
, twitter
|
||||
, unarchive
|
||||
, writingAssignment
|
||||
, x
|
||||
, xSvg
|
||||
)
|
||||
|
||||
{-|
|
||||
|
||||
@docs icon, decorativeIcon, link, linkExternal, linkSpa, button
|
||||
@docs IconType, IconSize, IconLinkSpaModel
|
||||
@docs activity
|
||||
@docs add
|
||||
@docs arrowDown
|
||||
@docs arrowLeft
|
||||
@docs arrowRight
|
||||
@docs assignmentTypeDiagnostic
|
||||
@docs assignmentTypePractice
|
||||
@docs assignmentTypeQuiz
|
||||
@docs assignmentTypeWritingCycle
|
||||
@docs attention
|
||||
@docs bang
|
||||
@docs bulb
|
||||
@docs calendar
|
||||
@docs caret
|
||||
@docs checkMark
|
||||
@docs checkMarkSquiggily
|
||||
@docs checkMarkSvg
|
||||
@docs class
|
||||
@docs clever
|
||||
@docs clock
|
||||
@docs close
|
||||
@docs copy
|
||||
@docs compassSvg
|
||||
@docs custom
|
||||
@docs darkBlueCheckMark
|
||||
@docs document
|
||||
@docs download
|
||||
@docs edit
|
||||
@docs editWriting
|
||||
@docs equalitySign
|
||||
@docs exclamation
|
||||
@docs facebook
|
||||
@docs flag
|
||||
@docs flipper
|
||||
@docs footsteps
|
||||
@docs gardening
|
||||
@docs gear
|
||||
@docs greenCheckMark
|
||||
@docs guidedWrite
|
||||
@docs help
|
||||
@docs highFive
|
||||
@docs key
|
||||
@docs late
|
||||
@docs leaderboard
|
||||
@docs lightBulb
|
||||
@docs lock
|
||||
@docs lockDeprecated
|
||||
@docs logo
|
||||
@docs masteryBadge
|
||||
@docs newspaper
|
||||
@docs notStarred
|
||||
@docs okay
|
||||
@docs openClose
|
||||
@docs peerReview
|
||||
@docs performance
|
||||
@docs personBlue
|
||||
@docs preview
|
||||
@docs quickWrite
|
||||
@docs seeMore
|
||||
@docs share
|
||||
@docs skip
|
||||
@docs sort
|
||||
@docs sortArrow
|
||||
@docs speedometer
|
||||
@docs starred
|
||||
@docs thumbsUp
|
||||
@docs twitter
|
||||
@docs unarchive
|
||||
@docs writingAssignment
|
||||
@docs x
|
||||
@docs xSvg
|
||||
@docs submitting, rating, revising
|
||||
|
||||
-}
|
||||
|
||||
import Accessibility.Role as Role
|
||||
import Accessibility.Styled exposing (..)
|
||||
import Css exposing (..)
|
||||
import EventExtras
|
||||
import Html as RootHtml
|
||||
import Html.Attributes as RootAttr exposing (..)
|
||||
import Html.Styled
|
||||
import Html.Styled.Attributes as Attributes exposing (css)
|
||||
import Html.Styled.Events as Events
|
||||
import Nri.Ui.AssetPath exposing (Asset(..))
|
||||
import Nri.Ui.Colors.V1
|
||||
import Svg exposing (svg, use)
|
||||
import Svg.Attributes exposing (xlinkHref)
|
||||
|
||||
|
||||
{-| -}
|
||||
type alias IconLinkModel =
|
||||
{ alt : String
|
||||
, url : String
|
||||
, icon : IconType
|
||||
, disabled : Bool
|
||||
, size : IconSize
|
||||
}
|
||||
|
||||
|
||||
{-| -}
|
||||
type alias IconLinkSpaModel route =
|
||||
{ alt : String
|
||||
, icon : IconType
|
||||
, disabled : Bool
|
||||
, size : IconSize
|
||||
, route : route
|
||||
}
|
||||
|
||||
|
||||
type alias IconButtonModel msg =
|
||||
{ alt : String
|
||||
, msg : msg
|
||||
, icon : IconType
|
||||
, disabled : Bool
|
||||
, size : IconSize
|
||||
}
|
||||
|
||||
|
||||
{-| An icon that can be rendered using the functions provided by this module.
|
||||
-}
|
||||
type IconType
|
||||
= ImgIcon Asset
|
||||
| SvgIcon String
|
||||
|
||||
|
||||
{-| Used for determining sizes on Icon.buttons and Icon.links
|
||||
-}
|
||||
type IconSize
|
||||
= Small
|
||||
| Medium
|
||||
|
||||
|
||||
{-| Create an icon that links to a part of NRI
|
||||
Uses our default icon styles (25 x 25 px, azure)
|
||||
-}
|
||||
link : IconLinkModel -> Html msg
|
||||
link =
|
||||
linkBase [ Attributes.target "_self" ]
|
||||
|
||||
|
||||
{-| Create an accessible icon button with an onClick handler
|
||||
Uses our default icon styles (25 x 25 px, azure)
|
||||
-}
|
||||
button : IconButtonModel msg -> Html msg
|
||||
button model =
|
||||
Accessibility.Styled.button
|
||||
[ css
|
||||
[ Css.batch
|
||||
[ backgroundColor transparent
|
||||
, border zero
|
||||
, color Nri.Ui.Colors.V1.azure
|
||||
, fontFamily inherit
|
||||
, Css.property "cursor" "pointer"
|
||||
, padding zero
|
||||
, focus
|
||||
[ backgroundColor transparent
|
||||
]
|
||||
]
|
||||
, sizeStyles model.size
|
||||
]
|
||||
, Events.onClick model.msg
|
||||
, Attributes.disabled model.disabled
|
||||
, Attributes.type_ "button"
|
||||
]
|
||||
[ icon
|
||||
{ alt = model.alt
|
||||
, icon = model.icon
|
||||
}
|
||||
]
|
||||
|
||||
|
||||
{-| -}
|
||||
icon : { alt : String, icon : IconType } -> Html msg
|
||||
icon config =
|
||||
case config.icon of
|
||||
SvgIcon iconId ->
|
||||
svg [ svgStyle ]
|
||||
[ Svg.title [] [ RootHtml.text config.alt ]
|
||||
, use [ xlinkHref ("#" ++ iconId) ] []
|
||||
]
|
||||
|> Html.Styled.fromUnstyled
|
||||
|
||||
ImgIcon assetPath ->
|
||||
img config.alt
|
||||
[ Attributes.src (Nri.Ui.AssetPath.url assetPath)
|
||||
]
|
||||
|
||||
|
||||
{-| Use this icon for purely decorative content that would be distracting
|
||||
rather than helpful on a screenreader.
|
||||
-}
|
||||
decorativeIcon : IconType -> Html msg
|
||||
decorativeIcon iconType =
|
||||
case iconType of
|
||||
SvgIcon iconId ->
|
||||
svg
|
||||
[ svgStyle
|
||||
, Role.img
|
||||
]
|
||||
[ use [ xlinkHref ("#" ++ iconId) ] []
|
||||
]
|
||||
|> Html.Styled.fromUnstyled
|
||||
|
||||
ImgIcon assetPath ->
|
||||
decorativeImg [ Attributes.src (Nri.Ui.AssetPath.url assetPath) ]
|
||||
|
||||
|
||||
{-| Use this link for routing within a single page app.
|
||||
|
||||
This will make a normal <a> tag, but change the onClick behavior to avoid reloading the page.
|
||||
|
||||
-}
|
||||
linkSpa : (route -> String) -> (route -> msg) -> IconLinkSpaModel route -> Html msg
|
||||
linkSpa toUrl toMsg config =
|
||||
linkBase
|
||||
[ EventExtras.onClickPreventDefaultForLinkWithHref (toMsg config.route)
|
||||
|> Attributes.fromUnstyled
|
||||
]
|
||||
{ alt = config.alt
|
||||
, url = toUrl config.route
|
||||
, icon = config.icon
|
||||
, disabled = config.disabled
|
||||
, size = config.size
|
||||
}
|
||||
|
||||
|
||||
{-| Create an icon that links to an external site
|
||||
Uses our default icon styles (25 x 25 px, azure)
|
||||
-}
|
||||
linkExternal : IconLinkModel -> Html msg
|
||||
linkExternal =
|
||||
linkBase [ Attributes.target "_blank" ]
|
||||
|
||||
|
||||
linkBase : List (Attribute msg) -> IconLinkModel -> Html msg
|
||||
linkBase linkAttributes model =
|
||||
span
|
||||
[]
|
||||
[ Html.Styled.a
|
||||
(linkAttributes ++ defaultLinkAttributes model)
|
||||
[ icon { alt = model.alt, icon = model.icon }
|
||||
]
|
||||
]
|
||||
|
||||
|
||||
defaultLinkAttributes : IconLinkModel -> List (Attribute msg)
|
||||
defaultLinkAttributes model =
|
||||
if model.disabled then
|
||||
[ css
|
||||
[ Css.cursor Css.notAllowed
|
||||
, linkStyles
|
||||
, sizeStyles model.size
|
||||
]
|
||||
]
|
||||
else
|
||||
[ css [ linkStyles, sizeStyles model.size ]
|
||||
, Attributes.href model.url
|
||||
]
|
||||
|
||||
|
||||
linkStyles : Style
|
||||
linkStyles =
|
||||
Css.batch
|
||||
[ color Nri.Ui.Colors.V1.azure
|
||||
, display inlineBlock
|
||||
, fontFamily inherit
|
||||
, Css.property "cursor" "pointer"
|
||||
, padding zero
|
||||
, visited [ color Nri.Ui.Colors.V1.azure ]
|
||||
]
|
||||
|
||||
|
||||
sizeStyles : IconSize -> Style
|
||||
sizeStyles size =
|
||||
Css.batch <|
|
||||
case size of
|
||||
Small ->
|
||||
[ Css.width (px 20)
|
||||
, Css.height (px 20)
|
||||
]
|
||||
|
||||
Medium ->
|
||||
[ Css.width (px 25)
|
||||
, Css.height (px 25)
|
||||
]
|
||||
|
||||
|
||||
{-| -}
|
||||
activity : { r | activity : String } -> IconType
|
||||
activity assets =
|
||||
SvgIcon assets.activity
|
||||
|
||||
|
||||
{-| -}
|
||||
add : { r | icons_plusBlue_svg : Asset } -> IconType
|
||||
add assets =
|
||||
ImgIcon assets.icons_plusBlue_svg
|
||||
|
||||
|
||||
{-| -}
|
||||
arrowDown : { r | arrowDown : String } -> IconType
|
||||
arrowDown assets =
|
||||
SvgIcon assets.arrowDown
|
||||
|
||||
|
||||
{-| -}
|
||||
arrowLeft : { r | leftArrowBlue_png : Asset } -> IconType
|
||||
arrowLeft assets =
|
||||
ImgIcon assets.leftArrowBlue_png
|
||||
|
||||
|
||||
{-| -}
|
||||
arrowRight : { r | icons_arrowRightBlue_svg : Asset } -> IconType
|
||||
arrowRight assets =
|
||||
ImgIcon assets.icons_arrowRightBlue_svg
|
||||
|
||||
|
||||
{-| -}
|
||||
assignmentTypeDiagnostic : { r | diagnostic : String } -> IconType
|
||||
assignmentTypeDiagnostic assets =
|
||||
SvgIcon assets.diagnostic
|
||||
|
||||
|
||||
{-| -}
|
||||
assignmentTypePractice : { r | practice : String } -> IconType
|
||||
assignmentTypePractice assets =
|
||||
SvgIcon assets.practice
|
||||
|
||||
|
||||
{-| -}
|
||||
assignmentTypeQuiz : { r | quiz : String } -> IconType
|
||||
assignmentTypeQuiz assets =
|
||||
SvgIcon assets.quiz
|
||||
|
||||
|
||||
{-| -}
|
||||
assignmentTypeWritingCycle : { r | writingcycle : String } -> IconType
|
||||
assignmentTypeWritingCycle assets =
|
||||
SvgIcon assets.writingcycle
|
||||
|
||||
|
||||
{-| -}
|
||||
attention : { r | attention_svg : Asset } -> IconType
|
||||
attention assets =
|
||||
ImgIcon assets.attention_svg
|
||||
|
||||
|
||||
{-| -}
|
||||
bang : { r | exclamationPoint_svg : Asset } -> IconType
|
||||
bang assets =
|
||||
ImgIcon assets.exclamationPoint_svg
|
||||
|
||||
|
||||
{-| -}
|
||||
bulb : { r | bulb : String } -> IconType
|
||||
bulb assets =
|
||||
SvgIcon assets.bulb
|
||||
|
||||
|
||||
{-| -}
|
||||
calendar : { r | calendar : String } -> IconType
|
||||
calendar assets =
|
||||
SvgIcon assets.calendar
|
||||
|
||||
|
||||
{-| -}
|
||||
caret : { r | icons_arrowDownBlue_svg : Asset } -> IconType
|
||||
caret assets =
|
||||
ImgIcon assets.icons_arrowDownBlue_svg
|
||||
|
||||
|
||||
{-| -}
|
||||
checkMark : { r | iconCheck_png : Asset } -> IconType
|
||||
checkMark assets =
|
||||
ImgIcon assets.iconCheck_png
|
||||
|
||||
|
||||
{-| -}
|
||||
checkMarkSquiggily : { r | squiggly_png : Asset } -> IconType
|
||||
checkMarkSquiggily assets =
|
||||
ImgIcon assets.squiggly_png
|
||||
|
||||
|
||||
{-| -}
|
||||
checkMarkSvg : { r | checkmark : String } -> IconType
|
||||
checkMarkSvg assets =
|
||||
SvgIcon assets.checkmark
|
||||
|
||||
|
||||
{-| -}
|
||||
class : { r | class : String } -> IconType
|
||||
class assets =
|
||||
SvgIcon assets.class
|
||||
|
||||
|
||||
{-| -}
|
||||
clever : { r | clever : String } -> IconType
|
||||
clever assets =
|
||||
SvgIcon assets.clever
|
||||
|
||||
|
||||
{-| -}
|
||||
clock : { r | clock : String } -> IconType
|
||||
clock assets =
|
||||
SvgIcon assets.clock
|
||||
|
||||
|
||||
{-| -}
|
||||
close : { r | icons_xBlue_svg : Asset } -> IconType
|
||||
close assets =
|
||||
ImgIcon assets.icons_xBlue_svg
|
||||
|
||||
|
||||
{-| -}
|
||||
copy : { r | teach_assignments_copyWhite_svg : Asset } -> IconType
|
||||
copy assets =
|
||||
ImgIcon assets.teach_assignments_copyWhite_svg
|
||||
|
||||
|
||||
{-| -}
|
||||
compassSvg : { r | compass : String } -> IconType
|
||||
compassSvg assets =
|
||||
SvgIcon assets.compass
|
||||
|
||||
|
||||
{-| -}
|
||||
custom : Asset -> IconType
|
||||
custom asset =
|
||||
ImgIcon asset
|
||||
|
||||
|
||||
{-| -}
|
||||
darkBlueCheckMark : { r | darkBlueCheckmark_svg : Asset } -> IconType
|
||||
darkBlueCheckMark assets =
|
||||
ImgIcon assets.darkBlueCheckmark_svg
|
||||
|
||||
|
||||
{-| -}
|
||||
document : { r | document : String } -> IconType
|
||||
document assets =
|
||||
SvgIcon assets.document
|
||||
|
||||
|
||||
{-| -}
|
||||
download : { r | download : String } -> IconType
|
||||
download assets =
|
||||
SvgIcon assets.download
|
||||
|
||||
|
||||
{-| -}
|
||||
edit : { r | edit : String } -> IconType
|
||||
edit assets =
|
||||
SvgIcon assets.edit
|
||||
|
||||
|
||||
{-| -}
|
||||
editWriting : { r | editWriting : String } -> IconType
|
||||
editWriting assets =
|
||||
SvgIcon assets.editWriting
|
||||
|
||||
|
||||
{-| -}
|
||||
equalitySign : { r | icons_equals_svg : Asset } -> IconType
|
||||
equalitySign assets =
|
||||
ImgIcon assets.icons_equals_svg
|
||||
|
||||
|
||||
{-| -}
|
||||
exclamation : { r | exclamation : String } -> IconType
|
||||
exclamation assets =
|
||||
SvgIcon assets.exclamation
|
||||
|
||||
|
||||
{-| -}
|
||||
facebook : { r | facebookBlue_svg : Asset } -> IconType
|
||||
facebook assets =
|
||||
ImgIcon assets.facebookBlue_svg
|
||||
|
||||
|
||||
{-| -}
|
||||
flag : { r | iconFlag_png : Asset } -> IconType
|
||||
flag assets =
|
||||
ImgIcon assets.iconFlag_png
|
||||
|
||||
|
||||
{-| -}
|
||||
flipper : { r | flipper : String } -> IconType
|
||||
flipper assets =
|
||||
SvgIcon assets.flipper
|
||||
|
||||
|
||||
{-| -}
|
||||
footsteps : { r | footsteps : String } -> IconType
|
||||
footsteps assets =
|
||||
SvgIcon assets.footsteps
|
||||
|
||||
|
||||
{-| -}
|
||||
gardening : { r | startingOffBadge_png : Asset } -> IconType
|
||||
gardening assets =
|
||||
ImgIcon assets.startingOffBadge_png
|
||||
|
||||
|
||||
{-| -}
|
||||
gear : { r | gear : String } -> IconType
|
||||
gear assets =
|
||||
SvgIcon assets.gear
|
||||
|
||||
|
||||
{-| -}
|
||||
greenCheckMark : { r | smallCheckmark_png : Asset } -> IconType
|
||||
greenCheckMark assets =
|
||||
ImgIcon assets.smallCheckmark_png
|
||||
|
||||
|
||||
{-| -}
|
||||
guidedWrite : { r | icons_guidedWrite_svg : Asset } -> IconType
|
||||
guidedWrite assets =
|
||||
ImgIcon assets.icons_guidedWrite_svg
|
||||
|
||||
|
||||
{-| -}
|
||||
help : { r | icons_helpBlue_svg : Asset } -> IconType
|
||||
help assets =
|
||||
ImgIcon assets.icons_helpBlue_svg
|
||||
|
||||
|
||||
{-| -}
|
||||
highFive : { r | level3Badge_png : Asset } -> IconType
|
||||
highFive assets =
|
||||
ImgIcon assets.level3Badge_png
|
||||
|
||||
|
||||
{-| -}
|
||||
key : { r | key : String } -> IconType
|
||||
key assets =
|
||||
SvgIcon assets.key
|
||||
|
||||
|
||||
{-| -}
|
||||
late : { r | icons_clockRed_svg : Asset } -> IconType
|
||||
late assets =
|
||||
ImgIcon assets.icons_clockRed_svg
|
||||
|
||||
|
||||
{-| -}
|
||||
leaderboard : { r | leaderboard : String } -> IconType
|
||||
leaderboard assets =
|
||||
SvgIcon assets.leaderboard
|
||||
|
||||
|
||||
{-| -}
|
||||
lightBulb : { r | hint_png : Asset } -> IconType
|
||||
lightBulb assets =
|
||||
ImgIcon assets.hint_png
|
||||
|
||||
|
||||
{-| -}
|
||||
lock : { r | lock : String } -> IconType
|
||||
lock assets =
|
||||
SvgIcon assets.lock
|
||||
|
||||
|
||||
{-| -}
|
||||
lockDeprecated : { r | premiumLock_svg : Asset } -> IconType
|
||||
lockDeprecated assets =
|
||||
ImgIcon assets.premiumLock_svg
|
||||
|
||||
|
||||
{-| -}
|
||||
logo : { r | logoRedBlack_svg : Asset } -> IconType
|
||||
logo assets =
|
||||
ImgIcon assets.logoRedBlack_svg
|
||||
|
||||
|
||||
{-| -}
|
||||
masteryBadge : { r | masteryBadge : String } -> IconType
|
||||
masteryBadge assets =
|
||||
SvgIcon assets.masteryBadge
|
||||
|
||||
|
||||
{-| -}
|
||||
newspaper : { r | newspaper : String } -> IconType
|
||||
newspaper assets =
|
||||
SvgIcon assets.newspaper
|
||||
|
||||
|
||||
{-| -}
|
||||
notStarred : { r | commentNotStarred_png : Asset } -> IconType
|
||||
notStarred assets =
|
||||
ImgIcon assets.commentNotStarred_png
|
||||
|
||||
|
||||
{-| -}
|
||||
okay : { r | level2Badge_png : Asset } -> IconType
|
||||
okay assets =
|
||||
ImgIcon assets.level2Badge_png
|
||||
|
||||
|
||||
{-| -}
|
||||
openClose : { r | openClose : String } -> IconType
|
||||
openClose assets =
|
||||
SvgIcon assets.openClose
|
||||
|
||||
|
||||
{-| -}
|
||||
peerReview : { r | icons_peerReview_svg : Asset } -> IconType
|
||||
peerReview assets =
|
||||
ImgIcon assets.icons_peerReview_svg
|
||||
|
||||
|
||||
{-| -}
|
||||
performance : { r | performance : String } -> IconType
|
||||
performance assets =
|
||||
SvgIcon assets.performance
|
||||
|
||||
|
||||
{-| -}
|
||||
personBlue : { r | personBlue_svg : Asset } -> IconType
|
||||
personBlue assets =
|
||||
ImgIcon assets.personBlue_svg
|
||||
|
||||
|
||||
{-| -}
|
||||
preview : { r | preview : String } -> IconType
|
||||
preview assets =
|
||||
SvgIcon assets.preview
|
||||
|
||||
|
||||
{-| -}
|
||||
quickWrite : { r | icons_quickWrite_svg : Asset } -> IconType
|
||||
quickWrite assets =
|
||||
ImgIcon assets.icons_quickWrite_svg
|
||||
|
||||
|
||||
{-| -}
|
||||
seeMore : { r | seemore : String } -> IconType
|
||||
seeMore assets =
|
||||
SvgIcon assets.seemore
|
||||
|
||||
|
||||
{-| -}
|
||||
share : { r | share : String } -> IconType
|
||||
share assets =
|
||||
SvgIcon assets.share
|
||||
|
||||
|
||||
{-| -}
|
||||
skip : { r | skip : String } -> IconType
|
||||
skip assets =
|
||||
SvgIcon assets.skip
|
||||
|
||||
|
||||
{-| -}
|
||||
sort : { r | sort : String } -> IconType
|
||||
sort assets =
|
||||
SvgIcon assets.sort
|
||||
|
||||
|
||||
{-| -}
|
||||
sortArrow : { r | sortArrow : String } -> IconType
|
||||
sortArrow assets =
|
||||
SvgIcon assets.sortArrow
|
||||
|
||||
|
||||
{-| -}
|
||||
speedometer : { r | speedometer : String } -> IconType
|
||||
speedometer assets =
|
||||
SvgIcon assets.speedometer
|
||||
|
||||
|
||||
{-| -}
|
||||
starred : { r | commentStarred_png : Asset } -> IconType
|
||||
starred assets =
|
||||
ImgIcon assets.commentStarred_png
|
||||
|
||||
|
||||
{-| -}
|
||||
thumbsUp : { r | level1Badge_png : Asset } -> IconType
|
||||
thumbsUp assets =
|
||||
ImgIcon assets.level1Badge_png
|
||||
|
||||
|
||||
{-| -}
|
||||
twitter : { r | twitterBlue_svg : Asset } -> IconType
|
||||
twitter assets =
|
||||
ImgIcon assets.twitterBlue_svg
|
||||
|
||||
|
||||
{-| -}
|
||||
unarchive : { r | unarchiveBlue2x_png : Asset } -> IconType
|
||||
unarchive assets =
|
||||
ImgIcon assets.unarchiveBlue2x_png
|
||||
|
||||
|
||||
{-| -}
|
||||
writingAssignment : { r | writingAssignment : String } -> IconType
|
||||
writingAssignment assets =
|
||||
SvgIcon assets.writingAssignment
|
||||
|
||||
|
||||
{-| -}
|
||||
x : { r | xWhite_svg : Asset } -> IconType
|
||||
x assets =
|
||||
ImgIcon assets.xWhite_svg
|
||||
|
||||
|
||||
{-| -}
|
||||
xSvg : { r | x : String } -> IconType
|
||||
xSvg assets =
|
||||
SvgIcon assets.x
|
||||
|
||||
|
||||
{-| -}
|
||||
submitting : { r | submitting : String } -> IconType
|
||||
submitting assets =
|
||||
SvgIcon assets.submitting
|
||||
|
||||
|
||||
{-| -}
|
||||
rating : { r | rating : String } -> IconType
|
||||
rating assets =
|
||||
SvgIcon assets.rating
|
||||
|
||||
|
||||
{-| -}
|
||||
revising : { r | revising : String } -> IconType
|
||||
revising assets =
|
||||
SvgIcon assets.revising
|
||||
|
||||
|
||||
{-| Inlining SVG styles because styles.class doesn't work on SVG elements.
|
||||
The `className` property of an SVG element isn't a string, it's an object and so
|
||||
`styles.class` causes a runtime exception by attempting to overwrite it with
|
||||
a string. Another workaround is to use the `Svg.Attributes.class` attribute but
|
||||
since `withNamespace` hides a call to `Html.Attributes.class` we can't do it
|
||||
properly.
|
||||
-}
|
||||
svgStyle : RootHtml.Attribute msg
|
||||
svgStyle =
|
||||
RootAttr.style
|
||||
[ ( "fill", "currentColor" )
|
||||
, ( "width", "100%" )
|
||||
, ( "height", "100%" )
|
||||
]
|
||||
Loading…
Reference in New Issue
Block a user