mirror of
https://github.com/NoRedInk/noredink-ui.git
synced 2024-12-18 11:11:38 +03:00
Merge pull request #79 from NoRedInk/ink__start-buttons
Ink start buttons
This commit is contained in:
Tessa
GitHub
commit
d595402d82
@ -23,6 +23,7 @@
|
||||
"Nri.Ui.Fonts.V1",
|
||||
"Nri.Ui.Icon.V1",
|
||||
"Nri.Ui.Icon.V2",
|
||||
"Nri.Ui.Icon.V3",
|
||||
"Nri.Ui.InputStyles",
|
||||
"Nri.Ui.Modal.V1",
|
||||
"Nri.Ui.Outline.V1",
|
||||
|
||||
853
src/Nri/Ui/Icon/V3.elm
Normal file
853
src/Nri/Ui/Icon/V3.elm
Normal file
@ -0,0 +1,853 @@
|
||||
module Nri.Ui.Icon.V3
|
||||
exposing
|
||||
( IconLinkSpaModel
|
||||
, IconSize(..)
|
||||
, IconType
|
||||
, activity
|
||||
, add
|
||||
, arrowDown
|
||||
, arrowLeft
|
||||
, arrowRight
|
||||
, assignmentStartButtonPrimary
|
||||
, assignmentStartButtonSecondary
|
||||
, 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 assignmentStartButtonPrimary
|
||||
@docs assignmentStartButtonSecondary
|
||||
@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
|
||||
|
||||
|
||||
{-| -}
|
||||
assignmentStartButtonPrimary : { r | assignmentStartButtonPrimary_svg : Asset } -> IconType
|
||||
assignmentStartButtonPrimary assets =
|
||||
ImgIcon assets.assignmentStartButtonPrimary_svg
|
||||
|
||||
|
||||
{-| -}
|
||||
assignmentStartButtonSecondary : { r | assignmentStartButtonSecondary_svg : Asset } -> IconType
|
||||
assignmentStartButtonSecondary assets =
|
||||
ImgIcon assets.assignmentStartButtonSecondary_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%" )
|
||||
]
|
||||
@ -9,6 +9,8 @@ type alias Assets =
|
||||
, attention_svg : Asset
|
||||
, bulb : String
|
||||
, calendar : String
|
||||
, assignmentStartButtonPrimary_svg : Asset
|
||||
, assignmentStartButtonSecondary_svg : Asset
|
||||
, checkboxCheckedPartially_svg : Asset
|
||||
, checkboxChecked_svg : Asset
|
||||
, checkboxLockOnInside_svg : Asset
|
||||
@ -94,6 +96,8 @@ assets =
|
||||
, attention_svg = Asset "assets/images/attention.svg"
|
||||
, bulb = "icon-bulb"
|
||||
, calendar = "icon-calendar"
|
||||
, assignmentStartButtonPrimary_svg = Asset "assets/images/assignment-start-button-primary.svg"
|
||||
, assignmentStartButtonSecondary_svg = Asset "assets/images/assignment-start-button-secondary.svg"
|
||||
, checkboxCheckedPartially_svg = Asset "assets/images/checkbox_checkedPartially.svg"
|
||||
, checkboxChecked_svg = Asset "assets/images/checkbox_checked.svg"
|
||||
, checkboxLockOnInside_svg = Asset "assets/images/checkbox_lock_on_inside.svg"
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
module Examples.Icon exposing (example, styles)
|
||||
module Examples.Icon exposing (example)
|
||||
|
||||
{-|
|
||||
|
||||
@ -6,174 +6,199 @@ module Examples.Icon exposing (example, styles)
|
||||
|
||||
-}
|
||||
|
||||
import Assets exposing (assets)
|
||||
import Assets exposing (Assets, assets)
|
||||
import Css
|
||||
import Css.Foreign exposing (Snippet, adjacentSiblings, children, class, descendants, each, everything, media, selector, withClass)
|
||||
import Headings
|
||||
import Html exposing (Html)
|
||||
import Html.Attributes exposing (style, title)
|
||||
import Css.Foreign
|
||||
import Html.Styled as Html exposing (Html)
|
||||
import Html.Styled.Attributes exposing (css, style, title)
|
||||
import ModuleExample exposing (Category(..), ModuleExample)
|
||||
import Nri.Ui.Colors.V1 exposing (..)
|
||||
import Nri.Ui.Icon.V2 as Icon
|
||||
import Nri.Ui.Styles.V1
|
||||
import Nri.Ui.Icon.V3 as Icon
|
||||
import Nri.Ui.Text.V2 as Text
|
||||
|
||||
|
||||
{-| -}
|
||||
example : ModuleExample msg
|
||||
example =
|
||||
{ filename = "Nri/Ui/Icon/V1.elm"
|
||||
{ filename = "ui/src/Nri/Icon.elm"
|
||||
, category = Icons
|
||||
, content =
|
||||
[ Headings.h3 [ Html.text "Icon" ]
|
||||
, Headings.h4 [ Html.text "Images" ]
|
||||
, Html.div [ styles.class [ Container ] ]
|
||||
(List.map viewIcon imageIcons)
|
||||
, Headings.h4 [ Html.text "Scalable Vector Graphics (SVGs)" ]
|
||||
, Html.div [ styles.class [ Container ] ]
|
||||
(List.map viewIcon svgIcons)
|
||||
, Headings.h5 [ Html.text "Assignment Types" ]
|
||||
, Html.div [ styles.class [ Container ] ]
|
||||
(List.map viewIcon assignmentTypeSvgIcons)
|
||||
[ viewIconSection "Mastery Icons"
|
||||
[ { icon = Icon.gardening, background = Dark, alt = "Gardening" }
|
||||
, { icon = Icon.highFive, background = Dark, alt = "HighFive" }
|
||||
, { icon = Icon.okay, background = Dark, alt = "Okay" }
|
||||
, { icon = Icon.thumbsUp, background = Dark, alt = "ThumbsUp" }
|
||||
, { icon = Icon.masteryBadge, background = Light, alt = "Badge " }
|
||||
]
|
||||
, viewIconSection "Stars and Flags"
|
||||
[ { icon = Icon.starred, background = Light, alt = "Starred" }
|
||||
, { icon = Icon.notStarred, background = Light, alt = "NotStarred" }
|
||||
, { icon = Icon.flag, background = Light, alt = "Flag" }
|
||||
]
|
||||
, viewIconSection "Assignment Types"
|
||||
[ { icon = Icon.assignmentTypeDiagnostic, background = Light, alt = "Diagnostic" }
|
||||
, { icon = Icon.assignmentTypePractice, background = Light, alt = "Practice" }
|
||||
, { icon = Icon.assignmentTypeQuiz, background = Light, alt = "Quiz" }
|
||||
, { icon = Icon.assignmentTypeWritingCycle, background = Light, alt = "WritingCycle" }
|
||||
, { icon = Icon.peerReview, background = Light, alt = "PeerReview" }
|
||||
, { icon = Icon.submitting, background = Light, alt = "Submitting" }
|
||||
, { icon = Icon.rating, background = Light, alt = "Rating" }
|
||||
, { icon = Icon.revising, background = Light, alt = "Revising" }
|
||||
, { icon = Icon.quickWrite, background = Light, alt = "QuickWrite" }
|
||||
|
||||
--, { icon = Icon.guidedWrite, background = Light, alt = "GuidedWrite" }
|
||||
, { icon = Icon.writingAssignment, background = Light, alt = "WritingAssignment" }
|
||||
]
|
||||
, viewIconSection "Student Assignment Actions"
|
||||
[ { icon = Icon.assignmentStartButtonPrimary, background = Light, alt = "Start primary" }
|
||||
, { icon = Icon.assignmentStartButtonSecondary, background = Light, alt = "Start secondary" }
|
||||
]
|
||||
, viewIconSection "Teacher Assignment Actions"
|
||||
[ { icon = Icon.unarchive, background = Light, alt = "Unarchive" }
|
||||
, { icon = Icon.share, background = Light, alt = "Share" }
|
||||
, { icon = Icon.seeMore, background = Light, alt = "See More" }
|
||||
, { icon = Icon.preview, background = Light, alt = "Preview" }
|
||||
, { icon = Icon.performance, background = Light, alt = "Performance" }
|
||||
, { icon = Icon.openClose, background = Light, alt = "OpenClose" }
|
||||
]
|
||||
, viewIconSection "Edit"
|
||||
[ { icon = Icon.edit, background = Light, alt = "Edit" }
|
||||
, { icon = Icon.editWriting, background = Light, alt = "EditWriting" }
|
||||
]
|
||||
, viewIconSection "Humans"
|
||||
[ { icon = Icon.class, background = Light, alt = "Class" }
|
||||
, { icon = Icon.leaderboard, background = Light, alt = "Leaderboard" }
|
||||
, { icon = Icon.personBlue, background = Light, alt = "PersonBlue" }
|
||||
]
|
||||
, viewIconSection "Social Media"
|
||||
[ { icon = Icon.facebook, background = Light, alt = "Facebook" }
|
||||
, { icon = Icon.twitter, background = Light, alt = "Twitter" }
|
||||
, { icon = Icon.clever, background = Light, alt = "Clever" }
|
||||
]
|
||||
, viewIconSection "Arrows and Carets"
|
||||
[ { icon = Icon.arrowDown, background = Light, alt = "ArrowDown" }
|
||||
, { icon = Icon.sortArrow, background = Light, alt = "SortArrow" }
|
||||
, { icon = Icon.arrowLeft, background = Light, alt = "ArrowLeft" }
|
||||
, { icon = Icon.arrowRight, background = Light, alt = "ArrowRight" }
|
||||
, { icon = Icon.caret, background = Light, alt = "Caret" }
|
||||
]
|
||||
, viewIconSection "Checkmarks"
|
||||
[ { icon = Icon.checkMarkSvg, background = Light, alt = "CheckMarkSvg" }
|
||||
, { icon = Icon.darkBlueCheckMark, background = Light, alt = "DarkBlueCheckMark" }
|
||||
, { icon = Icon.checkMark, background = Dark, alt = "CheckMark" }
|
||||
, { icon = Icon.checkMarkSquiggily, background = Dark, alt = "CheckMarkSquiggily" }
|
||||
, { icon = Icon.greenCheckMark, background = Light, alt = "GreenCheckMark" }
|
||||
]
|
||||
, viewIconSection "Xs"
|
||||
[ { icon = Icon.xSvg, background = Light, alt = "XSvg" }
|
||||
, { icon = Icon.x, background = Dark, alt = "X" }
|
||||
, { icon = Icon.close, background = Light, alt = "Close" }
|
||||
]
|
||||
, viewIconSection "Bangs"
|
||||
[ { icon = Icon.exclamation, background = Light, alt = "Exclamation" }
|
||||
, { icon = Icon.attention, background = Dark, alt = "Attention" }
|
||||
, { icon = Icon.bang, background = Dark, alt = "Bang" }
|
||||
]
|
||||
, viewIconSection "Bulbs and Tips"
|
||||
[ { icon = Icon.bulb, background = Light, alt = "Bulb" }
|
||||
, { icon = Icon.lightBulb, background = Light, alt = "LightBulb" }
|
||||
, { icon = Icon.help, background = Light, alt = "Help" }
|
||||
]
|
||||
, viewIconSection "Locks and keys"
|
||||
[ { icon = Icon.key, background = Light, alt = "Key" }
|
||||
, { icon = Icon.lock, background = Light, alt = "Lock" }
|
||||
, { icon = Icon.lockDeprecated, background = Light, alt = "LockDeprecated" }
|
||||
]
|
||||
, viewIconSection "Time"
|
||||
[ { icon = Icon.calendar, background = Light, alt = "Calendar" }
|
||||
, { icon = Icon.clock, background = Light, alt = "Clock" }
|
||||
, { icon = Icon.late, background = Light, alt = "Late" }
|
||||
]
|
||||
, viewIconSection "Save helpers"
|
||||
[ { icon = Icon.copy, background = Dark, alt = "Copy" }
|
||||
, { icon = Icon.download, background = Light, alt = "Download" }
|
||||
]
|
||||
, viewIconSection "Uncategorized (SVGs)"
|
||||
[ { icon = Icon.activity, background = Light, alt = "Activity" }
|
||||
, { icon = Icon.compassSvg, background = Light, alt = "CompassSvg" }
|
||||
, { icon = Icon.document, background = Light, alt = "Document" }
|
||||
, { icon = Icon.flipper, background = Light, alt = "Flipper" }
|
||||
, { icon = Icon.footsteps, background = Light, alt = "Footsteps" }
|
||||
, { icon = Icon.gear, background = Light, alt = "Gear" }
|
||||
, { icon = Icon.newspaper, background = Light, alt = "Newspaper" }
|
||||
, { icon = Icon.sort, background = Light, alt = "Sort" }
|
||||
, { icon = Icon.speedometer, background = Light, alt = "Speedometer" }
|
||||
]
|
||||
, viewIconSection "Uncategorized Images"
|
||||
[ { icon = Icon.add, background = Light, alt = "Add" }
|
||||
, { icon = Icon.equalitySign, background = Light, alt = "EqualitySign" }
|
||||
, { icon = Icon.logo, background = Light, alt = "Logo" }
|
||||
]
|
||||
]
|
||||
|> List.map Html.toUnstyled
|
||||
}
|
||||
|
||||
|
||||
{-| -}
|
||||
styles : Nri.Ui.Styles.V1.Styles id class msg
|
||||
styles =
|
||||
Nri.Ui.Styles.V1.styles "Examples-Icon-"
|
||||
[ Css.Foreign.class Container
|
||||
[ Css.displayFlex
|
||||
, Css.flexWrap Css.wrap
|
||||
]
|
||||
, Css.Foreign.class (Cell Dark)
|
||||
(cellStyles blue)
|
||||
, Css.Foreign.class (Cell Light)
|
||||
(cellStyles frost)
|
||||
viewIconSection :
|
||||
String
|
||||
-> List { alt : String, background : Background, icon : Assets -> Icon.IconType }
|
||||
-> Html msg
|
||||
viewIconSection headerText icons =
|
||||
Html.section []
|
||||
[ Text.subHeading [ Html.text headerText ]
|
||||
, Html.div [ css [ Css.displayFlex, Css.flexWrap Css.wrap ] ]
|
||||
(List.map viewIcon icons)
|
||||
]
|
||||
|
||||
|
||||
|
||||
-- INTERNAL
|
||||
|
||||
|
||||
type CssClasses
|
||||
= Container
|
||||
| Cell Background
|
||||
|
||||
|
||||
type Background
|
||||
= Light
|
||||
| Dark
|
||||
|
||||
|
||||
viewIcon : { alt : String, background : Background, icon : Icon.IconType } -> Html msg
|
||||
toColor : Background -> Css.Color
|
||||
toColor background =
|
||||
case background of
|
||||
Dark ->
|
||||
blue
|
||||
|
||||
Light ->
|
||||
frost
|
||||
|
||||
|
||||
viewIcon : { alt : String, background : Background, icon : Assets -> Icon.IconType } -> Html msg
|
||||
viewIcon { alt, background, icon } =
|
||||
Html.div [ styles.class [ Cell background ], title alt ] [ Icon.icon { alt = alt, icon = icon } ]
|
||||
|
||||
|
||||
imageIcons : List { alt : String, background : Background, icon : Icon.IconType }
|
||||
imageIcons =
|
||||
[ { icon = Icon.add assets, background = Light, alt = "Add" }
|
||||
, { icon = Icon.arrowLeft assets, background = Light, alt = "ArrowLeft" }
|
||||
, { icon = Icon.arrowRight assets, background = Light, alt = "ArrowRight" }
|
||||
, { icon = Icon.attention assets, background = Dark, alt = "Attention" }
|
||||
, { icon = Icon.bang assets, background = Dark, alt = "Bang" }
|
||||
, { icon = Icon.caret assets, background = Light, alt = "Caret" }
|
||||
, { icon = Icon.checkMark assets, background = Dark, alt = "CheckMark" }
|
||||
, { icon = Icon.checkMarkSquiggily assets, background = Dark, alt = "CheckMarkSquiggily" }
|
||||
, { icon = Icon.close assets, background = Light, alt = "Close" }
|
||||
, { icon = Icon.copy assets, background = Dark, alt = "Copy" }
|
||||
, { icon = Icon.darkBlueCheckMark assets, background = Light, alt = "DarkBlueCheckMark" }
|
||||
, { icon = Icon.equalitySign assets, background = Light, alt = "EqualitySign" }
|
||||
, { icon = Icon.facebook assets, background = Light, alt = "Facebook" }
|
||||
, { icon = Icon.flag assets, background = Light, alt = "Flag" }
|
||||
, { icon = Icon.gardening assets, background = Dark, alt = "Gardening" }
|
||||
, { icon = Icon.greenCheckMark assets, background = Light, alt = "GreenCheckMark" }
|
||||
, { icon = Icon.help assets, background = Light, alt = "Help" }
|
||||
, { icon = Icon.highFive assets, background = Dark, alt = "HighFive" }
|
||||
, { icon = Icon.late assets, background = Light, alt = "Late" }
|
||||
, { icon = Icon.lightBulb assets, background = Light, alt = "LightBulb" }
|
||||
, { icon = Icon.lockDeprecated assets, background = Light, alt = "LockDeprecated" }
|
||||
, { icon = Icon.logo assets, background = Light, alt = "Logo" }
|
||||
, { icon = Icon.notStarred assets, background = Light, alt = "NotStarred" }
|
||||
, { icon = Icon.okay assets, background = Dark, alt = "Okay" }
|
||||
, { icon = Icon.personBlue assets, background = Light, alt = "PersonBlue" }
|
||||
, { icon = Icon.starred assets, background = Light, alt = "Starred" }
|
||||
, { icon = Icon.thumbsUp assets, background = Dark, alt = "ThumbsUp" }
|
||||
, { icon = Icon.twitter assets, background = Light, alt = "Twitter" }
|
||||
, { icon = Icon.unarchive assets, background = Light, alt = "Unarchive" }
|
||||
, { icon = Icon.x assets, background = Dark, alt = "X" }
|
||||
]
|
||||
|
||||
|
||||
svgIcons : List { alt : String, background : Background, icon : Icon.IconType }
|
||||
svgIcons =
|
||||
[ { icon = Icon.activity assets, background = Light, alt = "Activity" }
|
||||
, { icon = Icon.arrowDown assets, background = Light, alt = "ArrowDown" }
|
||||
, { icon = Icon.bulb assets, background = Light, alt = "Bulb" }
|
||||
, { icon = Icon.calendar assets, background = Light, alt = "Calendar" }
|
||||
, { icon = Icon.checkMarkSvg assets, background = Light, alt = "CheckMarkSvg" }
|
||||
, { icon = Icon.class assets, background = Light, alt = "Class" }
|
||||
, { icon = Icon.clever assets, background = Light, alt = "Clever" }
|
||||
, { icon = Icon.clock assets, background = Light, alt = "Clock" }
|
||||
, { icon = Icon.compassSvg assets, background = Light, alt = "CompassSvg" }
|
||||
, { icon = Icon.document assets, background = Light, alt = "Document" }
|
||||
, { icon = Icon.download assets, background = Light, alt = "Download" }
|
||||
, { icon = Icon.edit assets, background = Light, alt = "Edit" }
|
||||
, { icon = Icon.editWriting assets, background = Light, alt = "EditWriting" }
|
||||
, { icon = Icon.exclamation assets, background = Light, alt = "Exclamation" }
|
||||
, { icon = Icon.flipper assets, background = Light, alt = "Flipper" }
|
||||
, { icon = Icon.footsteps assets, background = Light, alt = "Footsteps" }
|
||||
, { icon = Icon.gear assets, background = Light, alt = "Gear" }
|
||||
, { icon = Icon.key assets, background = Light, alt = "Key" }
|
||||
, { icon = Icon.leaderboard assets, background = Light, alt = "Leaderboard" }
|
||||
, { icon = Icon.lock assets, background = Light, alt = "Lock" }
|
||||
, { icon = Icon.masteryBadge assets, background = Light, alt = "Mastery Badge" }
|
||||
, { icon = Icon.newspaper assets, background = Light, alt = "Newspaper" }
|
||||
, { icon = Icon.openClose assets, background = Light, alt = "OpenClose" }
|
||||
, { icon = Icon.performance assets, background = Light, alt = "Performance" }
|
||||
, { icon = Icon.preview assets, background = Light, alt = "Preview" }
|
||||
, { icon = Icon.seeMore assets, background = Light, alt = "See More" }
|
||||
, { icon = Icon.share assets, background = Light, alt = "Share" }
|
||||
, { icon = Icon.skip assets, background = Light, alt = "Skip" }
|
||||
, { icon = Icon.sort assets, background = Light, alt = "Sort" }
|
||||
, { icon = Icon.sortArrow assets, background = Light, alt = "SortArrow" }
|
||||
, { icon = Icon.speedometer assets, background = Light, alt = "Speedometer" }
|
||||
, { icon = Icon.writingAssignment assets, background = Light, alt = "WritingAssignment" }
|
||||
, { icon = Icon.xSvg assets, background = Light, alt = "XSvg" }
|
||||
]
|
||||
|
||||
|
||||
assignmentTypeSvgIcons : List { alt : String, background : Background, icon : Icon.IconType }
|
||||
assignmentTypeSvgIcons =
|
||||
[ { alt = "Diagnostic", background = Light, icon = Icon.assignmentTypeDiagnostic assets }
|
||||
, { alt = "Practice", background = Light, icon = Icon.assignmentTypePractice assets }
|
||||
, { alt = "Quiz", background = Light, icon = Icon.assignmentTypeQuiz assets }
|
||||
, { alt = "WritingCycle", background = Light, icon = Icon.assignmentTypeWritingCycle assets }
|
||||
, { alt = "PeerReview", background = Light, icon = Icon.peerReview assets }
|
||||
, { alt = "QuickWrite", background = Light, icon = Icon.quickWrite assets }
|
||||
, { alt = "submitting", background = Light, icon = Icon.submitting assets }
|
||||
, { alt = "rating", background = Light, icon = Icon.rating assets }
|
||||
, { alt = "revising", background = Light, icon = Icon.revising assets }
|
||||
]
|
||||
|
||||
|
||||
cellStyles : Css.Color -> List Css.Style
|
||||
cellStyles backgroundColor =
|
||||
[ Css.width (Css.px 80)
|
||||
, Css.height (Css.px 80)
|
||||
, Css.margin (Css.px 10)
|
||||
, Css.displayFlex
|
||||
, Css.boxShadow4 (Css.px 10) (Css.px 5) (Css.px 5) navy
|
||||
, Css.color azure
|
||||
, Css.alignItems Css.center
|
||||
, Css.justifyContent Css.center
|
||||
, Css.backgroundColor backgroundColor
|
||||
, Css.Foreign.descendants
|
||||
[ Css.Foreign.img
|
||||
[ Css.maxWidth (Css.pct 100)
|
||||
, Css.maxHeight (Css.pct 100)
|
||||
Html.div
|
||||
[ css
|
||||
[ Css.margin (Css.px 10)
|
||||
, Css.width (Css.px 160)
|
||||
, Css.boxShadow4 (Css.px 10) (Css.px 5) (Css.px 5) navy
|
||||
, Css.displayFlex
|
||||
, Css.flexDirection Css.column
|
||||
, Css.alignItems Css.center
|
||||
, Css.justifyContent Css.flexStart
|
||||
]
|
||||
]
|
||||
]
|
||||
[ Html.div
|
||||
[ css
|
||||
[ Css.displayFlex
|
||||
, Css.alignItems Css.center
|
||||
, Css.justifyContent Css.center
|
||||
, Css.backgroundColor (toColor background)
|
||||
, Css.height (Css.px 80)
|
||||
, Css.width (Css.px 80)
|
||||
, Css.margin (Css.px 10)
|
||||
, Css.color azure
|
||||
, Css.Foreign.descendants
|
||||
[ Css.Foreign.img
|
||||
[ Css.maxWidth (Css.pct 100)
|
||||
, Css.maxHeight (Css.pct 100)
|
||||
]
|
||||
]
|
||||
]
|
||||
, title alt
|
||||
]
|
||||
[ Icon.icon { alt = alt, icon = icon assets }
|
||||
]
|
||||
, Text.mediumBody [ Html.text alt ]
|
||||
]
|
||||
|
||||
@ -210,7 +210,6 @@ styles =
|
||||
[ -- NOTE: these will go away as the modules' styles are integrated with Nri.Css.Site.elm
|
||||
[ ModuleExample.styles
|
||||
]
|
||||
, (Examples.Icon.styles |> .css) ()
|
||||
, (Examples.Page.styles |> .css) ()
|
||||
, (Examples.SegmentedControl.styles |> .css) ()
|
||||
, (Button.styles |> .css) assets
|
||||
|
||||
@ -0,0 +1,3 @@
|
||||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:2ce4ad40a09adb025b699c90a1ebc3506f02d73279f3cc8fac8f4bf03049ea9d
|
||||
size 1645
|
||||
@ -0,0 +1,3 @@
|
||||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:ae90c41df731bd31325e30383b53995fa5c809b88f2844300dfa964f80f022ac
|
||||
size 2264
|
||||
Loading…
Reference in New Issue
Block a user