mirror of
https://github.com/NoRedInk/noredink-ui.git
synced 2024-11-27 13:02:42 +03:00
Apply example pattern
This commit is contained in:
Tessa Kelly
parent
9d821061d5
commit
795b01e3b9
@ -33,7 +33,12 @@ example =
|
||||
, version = 2
|
||||
, categories = [ Icons ]
|
||||
, keyboardSupport = []
|
||||
, state = IconExamples.init
|
||||
, state =
|
||||
IconExamples.init
|
||||
{ label = "Planning Diagnostics"
|
||||
, name = "planningDiagnosticCircled"
|
||||
, icon = AssignmentIcon.planningDiagnosticCircled
|
||||
}
|
||||
, update = IconExamples.update
|
||||
, subscriptions = \_ -> Sub.none
|
||||
, preview =
|
||||
|
||||
@ -1,22 +1,21 @@
|
||||
module Examples.IconExamples exposing
|
||||
( preview
|
||||
, Settings, init, Msg, update, viewSettings
|
||||
, Settings, init, Msg, update
|
||||
, viewByGroupWithSettings, IconExampleGroup
|
||||
, view, viewWithCustomStyles
|
||||
, viewByGroupWithCustomStyles, IconExampleGroupWithCustomStyles
|
||||
)
|
||||
|
||||
{-|
|
||||
|
||||
@docs preview
|
||||
@docs Settings, init, Msg, update, viewSettings
|
||||
@docs Settings, init, Msg, update
|
||||
@docs viewByGroupWithSettings, IconExampleGroup
|
||||
@docs view, viewWithCustomStyles
|
||||
@docs viewByGroupWithCustomStyles, IconExampleGroupWithCustomStyles
|
||||
|
||||
-}
|
||||
|
||||
import Css
|
||||
import Css.Global
|
||||
import Example exposing (Example)
|
||||
import Html.Styled as Html exposing (Html)
|
||||
import Html.Styled.Attributes as Attributes exposing (css)
|
||||
import Html.Styled.Events as Events
|
||||
@ -28,7 +27,6 @@ import Nri.Ui.Select.V8 as Select
|
||||
import Nri.Ui.Svg.V1 as Svg exposing (Svg)
|
||||
import Nri.Ui.Text.V6 as Text
|
||||
import Nri.Ui.TextInput.V7 as TextInput
|
||||
import Nri.Ui.UiIcon.V1 as UiIcon
|
||||
import SolidColor exposing (SolidColor)
|
||||
|
||||
|
||||
@ -64,17 +62,16 @@ type alias Settings =
|
||||
|
||||
|
||||
{-| -}
|
||||
init : Settings
|
||||
init =
|
||||
init : { label : String, name : String, icon : Svg } -> Settings
|
||||
init { label, name, icon } =
|
||||
{ showIconName = False
|
||||
, iconSelectorExpanded = False
|
||||
, color = fromCssColor Colors.greenDark
|
||||
, width = 100
|
||||
, height = 100
|
||||
, -- TODO: use an appropriate example for each icon type
|
||||
icon = ( "starFilled", UiIcon.starFilled )
|
||||
, label = "Mastered"
|
||||
, showBorder = False
|
||||
, icon = ( name, icon )
|
||||
, label = label
|
||||
, showBorder = True
|
||||
}
|
||||
|
||||
|
||||
@ -143,6 +140,12 @@ viewSettings { showIconName } =
|
||||
}
|
||||
|
||||
|
||||
type alias IconExampleGroupWithCustomStyles =
|
||||
( String
|
||||
, List ( String, Svg.Svg, List Css.Style )
|
||||
)
|
||||
|
||||
|
||||
type alias IconExampleGroup =
|
||||
( String
|
||||
, List ( String, Svg.Svg )
|
||||
@ -166,6 +169,28 @@ viewByGroupWithSettings settings groups =
|
||||
]
|
||||
|
||||
|
||||
{-| -}
|
||||
viewByGroupWithCustomStyles : Settings -> List IconExampleGroupWithCustomStyles -> List (Html Msg)
|
||||
viewByGroupWithCustomStyles settings groups =
|
||||
let
|
||||
viewExampleSection ( group, values ) =
|
||||
viewWithCustomStyles settings group values
|
||||
in
|
||||
viewSettings settings
|
||||
:: List.map viewExampleSection groups
|
||||
++ [ Html.section [ css [ Css.margin2 (Css.px 30) Css.zero ] ]
|
||||
[ Heading.h3 [] [ Html.text "Example Usage" ]
|
||||
, viewSingularExampleSettings
|
||||
(List.map
|
||||
(Tuple.mapSecond (List.map (\( name, icon, _ ) -> ( name, icon ))))
|
||||
groups
|
||||
)
|
||||
settings
|
||||
, viewResults settings
|
||||
]
|
||||
]
|
||||
|
||||
|
||||
{-| -}
|
||||
view : Settings -> String -> List ( String, Svg.Svg ) -> Html msg
|
||||
view settings headerText icons =
|
||||
|
||||
@ -10,6 +10,10 @@ import Category exposing (Category(..))
|
||||
import Css
|
||||
import Example exposing (Example)
|
||||
import Examples.IconExamples as IconExamples
|
||||
exposing
|
||||
( IconExampleGroupWithCustomStyles
|
||||
, viewByGroupWithCustomStyles
|
||||
)
|
||||
import Html.Styled as Html
|
||||
import Html.Styled.Attributes exposing (css)
|
||||
import Nri.Ui.Colors.V1 as Colors
|
||||
@ -34,7 +38,7 @@ example =
|
||||
, version = 1
|
||||
, categories = [ Icons ]
|
||||
, keyboardSupport = []
|
||||
, state = IconExamples.init
|
||||
, state = IconExamples.init { label = "NoRedInk", name = "noredink", icon = Logo.noredink }
|
||||
, update = IconExamples.update
|
||||
, subscriptions = \_ -> Sub.none
|
||||
, preview =
|
||||
@ -45,85 +49,88 @@ example =
|
||||
, Logo.cleverC
|
||||
, Logo.googleG
|
||||
]
|
||||
, view =
|
||||
\ellieLinkConfig settings ->
|
||||
let
|
||||
viewExampleSection =
|
||||
IconExamples.viewWithCustomStyles settings
|
||||
in
|
||||
[ IconExamples.viewSettings settings
|
||||
, viewExampleSection "NRI"
|
||||
[ ( "noredink"
|
||||
, Logo.noredink
|
||||
, [ Css.height (Css.px 25)
|
||||
, Css.width (Css.px 100)
|
||||
, Css.margin (Css.px 4)
|
||||
]
|
||||
)
|
||||
]
|
||||
, viewExampleSection "Social Media"
|
||||
[ ( "facebook", Logo.facebook, defaults )
|
||||
, ( "twitter", Logo.twitter, defaults )
|
||||
]
|
||||
, viewExampleSection "Clever"
|
||||
[ ( "clever"
|
||||
, Logo.clever
|
||||
, [ Css.height (Css.px 25)
|
||||
, Css.width (Css.px 100)
|
||||
, Css.margin (Css.px 4)
|
||||
, Css.color Colors.azure
|
||||
]
|
||||
)
|
||||
, ( "cleverC", Logo.cleverC, defaults )
|
||||
, ( "cleverLibrary"
|
||||
, Logo.cleverLibrary
|
||||
, [ Css.height (Css.px 25)
|
||||
, Css.width (Css.px 100)
|
||||
, Css.margin (Css.px 4)
|
||||
]
|
||||
)
|
||||
]
|
||||
, viewExampleSection "Google"
|
||||
[ ( "googleClassroom"
|
||||
, Logo.googleClassroom
|
||||
, defaults
|
||||
)
|
||||
, ( "googleG", Logo.googleG, defaults )
|
||||
]
|
||||
, viewExampleSection "LMS"
|
||||
[ ( "canvas"
|
||||
, Logo.canvas
|
||||
, [ Css.height (Css.px 25)
|
||||
, Css.width (Css.px 100)
|
||||
, Css.margin (Css.px 4)
|
||||
]
|
||||
)
|
||||
, ( "canvasCircle"
|
||||
, Logo.canvasCircle
|
||||
, [ Css.height (Css.px 25)
|
||||
, Css.width (Css.px 25)
|
||||
, Css.margin (Css.px 4)
|
||||
]
|
||||
)
|
||||
, ( "schoology"
|
||||
, Logo.schoology
|
||||
, [ Css.height (Css.px 25)
|
||||
, Css.width (Css.px 100)
|
||||
, Css.margin (Css.px 4)
|
||||
]
|
||||
)
|
||||
, ( "schoologyCircle"
|
||||
, Logo.schoologyCircle
|
||||
, [ Css.height (Css.px 25)
|
||||
, Css.width (Css.px 25)
|
||||
, Css.margin (Css.px 4)
|
||||
]
|
||||
)
|
||||
]
|
||||
]
|
||||
, view = \ellieLinkConfig settings -> viewByGroupWithCustomStyles settings all
|
||||
}
|
||||
|
||||
|
||||
all : List IconExampleGroupWithCustomStyles
|
||||
all =
|
||||
[ ( "NRI"
|
||||
, [ ( "noredink"
|
||||
, Logo.noredink
|
||||
, [ Css.height (Css.px 25)
|
||||
, Css.width (Css.px 100)
|
||||
, Css.margin (Css.px 4)
|
||||
]
|
||||
)
|
||||
]
|
||||
)
|
||||
, ( "Social Media"
|
||||
, [ ( "facebook", Logo.facebook, defaults )
|
||||
, ( "twitter", Logo.twitter, defaults )
|
||||
]
|
||||
)
|
||||
, ( "Clever"
|
||||
, [ ( "clever"
|
||||
, Logo.clever
|
||||
, [ Css.height (Css.px 25)
|
||||
, Css.width (Css.px 100)
|
||||
, Css.margin (Css.px 4)
|
||||
, Css.color Colors.azure
|
||||
]
|
||||
)
|
||||
, ( "cleverC", Logo.cleverC, defaults )
|
||||
, ( "cleverLibrary"
|
||||
, Logo.cleverLibrary
|
||||
, [ Css.height (Css.px 25)
|
||||
, Css.width (Css.px 100)
|
||||
, Css.margin (Css.px 4)
|
||||
]
|
||||
)
|
||||
]
|
||||
)
|
||||
, ( "Google"
|
||||
, [ ( "googleClassroom"
|
||||
, Logo.googleClassroom
|
||||
, defaults
|
||||
)
|
||||
, ( "googleG", Logo.googleG, defaults )
|
||||
]
|
||||
)
|
||||
, ( "LMS"
|
||||
, [ ( "canvas"
|
||||
, Logo.canvas
|
||||
, [ Css.height (Css.px 25)
|
||||
, Css.width (Css.px 100)
|
||||
, Css.margin (Css.px 4)
|
||||
]
|
||||
)
|
||||
, ( "canvasCircle"
|
||||
, Logo.canvasCircle
|
||||
, [ Css.height (Css.px 25)
|
||||
, Css.width (Css.px 25)
|
||||
, Css.margin (Css.px 4)
|
||||
]
|
||||
)
|
||||
, ( "schoology"
|
||||
, Logo.schoology
|
||||
, [ Css.height (Css.px 25)
|
||||
, Css.width (Css.px 100)
|
||||
, Css.margin (Css.px 4)
|
||||
]
|
||||
)
|
||||
, ( "schoologyCircle"
|
||||
, Logo.schoologyCircle
|
||||
, [ Css.height (Css.px 25)
|
||||
, Css.width (Css.px 25)
|
||||
, Css.margin (Css.px 4)
|
||||
]
|
||||
)
|
||||
]
|
||||
)
|
||||
]
|
||||
|
||||
|
||||
defaults : List Css.Style
|
||||
defaults =
|
||||
[ Css.height (Css.px 25)
|
||||
|
||||
@ -10,6 +10,10 @@ import Category exposing (Category(..))
|
||||
import Css
|
||||
import Example exposing (Example)
|
||||
import Examples.IconExamples as IconExamples
|
||||
exposing
|
||||
( IconExampleGroupWithCustomStyles
|
||||
, viewByGroupWithCustomStyles
|
||||
)
|
||||
import Nri.Ui.Pennant.V2 as Pennant
|
||||
|
||||
|
||||
@ -30,7 +34,7 @@ example =
|
||||
, version = 2
|
||||
, categories = [ Icons ]
|
||||
, keyboardSupport = []
|
||||
, state = IconExamples.init
|
||||
, state = IconExamples.init { label = "Premium", name = "premiumFlag", icon = Pennant.premiumFlag }
|
||||
, update = IconExamples.update
|
||||
, subscriptions = \_ -> Sub.none
|
||||
, preview =
|
||||
@ -39,23 +43,25 @@ example =
|
||||
, Pennant.expiredPremiumFlag
|
||||
, Pennant.disabledPremiumFlag
|
||||
]
|
||||
, view =
|
||||
\ellieLinkConfig settings ->
|
||||
[ IconExamples.viewSettings settings
|
||||
, IconExamples.viewWithCustomStyles settings
|
||||
"Premium Pennants"
|
||||
[ ( "premiumFlag"
|
||||
, Pennant.premiumFlag
|
||||
, [ Css.width (Css.px 80) ]
|
||||
)
|
||||
, ( "expiredPremiumFlag"
|
||||
, Pennant.expiredPremiumFlag
|
||||
, [ Css.width (Css.px 80) ]
|
||||
)
|
||||
, ( "disabledPremiumFlag"
|
||||
, Pennant.disabledPremiumFlag
|
||||
, [ Css.width (Css.px 80) ]
|
||||
)
|
||||
]
|
||||
]
|
||||
, view = \ellieLinkConfig settings -> viewByGroupWithCustomStyles settings all
|
||||
}
|
||||
|
||||
|
||||
all : List IconExampleGroupWithCustomStyles
|
||||
all =
|
||||
[ ( "Premium Pennants"
|
||||
, [ ( "premiumFlag"
|
||||
, Pennant.premiumFlag
|
||||
, [ Css.width (Css.px 80) ]
|
||||
)
|
||||
, ( "expiredPremiumFlag"
|
||||
, Pennant.expiredPremiumFlag
|
||||
, [ Css.width (Css.px 80) ]
|
||||
)
|
||||
, ( "disabledPremiumFlag"
|
||||
, Pennant.disabledPremiumFlag
|
||||
, [ Css.width (Css.px 80) ]
|
||||
)
|
||||
]
|
||||
)
|
||||
]
|
||||
|
||||
@ -9,6 +9,10 @@ module Examples.Sprite exposing (example, State, Msg)
|
||||
import Category exposing (Category(..))
|
||||
import Example exposing (Example)
|
||||
import Examples.IconExamples as IconExamples
|
||||
exposing
|
||||
( IconExampleGroup
|
||||
, viewByGroupWithSettings
|
||||
)
|
||||
import Nri.Ui.Sprite.V1 as Sprite exposing (SpriteId)
|
||||
import Nri.Ui.Svg.V1 as Svg exposing (Svg)
|
||||
|
||||
@ -30,18 +34,20 @@ example =
|
||||
, version = 1
|
||||
, categories = List.singleton Icons
|
||||
, keyboardSupport = []
|
||||
, state = IconExamples.init
|
||||
, state = IconExamples.init { label = "Bold", name = "bold", icon = viewSprite Sprite.bold }
|
||||
, update = IconExamples.update
|
||||
, subscriptions = \_ -> Sub.none
|
||||
, preview = IconExamples.preview (List.map Tuple.second sprites)
|
||||
, view =
|
||||
\ellieLinkConfig settings ->
|
||||
[ IconExamples.viewSettings settings
|
||||
, IconExamples.view settings "Rich Text Formatting" sprites
|
||||
]
|
||||
, view = \_ settings -> viewByGroupWithSettings settings all
|
||||
}
|
||||
|
||||
|
||||
all : List IconExampleGroup
|
||||
all =
|
||||
[ ( "Rich Text Formatting", sprites )
|
||||
]
|
||||
|
||||
|
||||
sprites : List ( String, Svg )
|
||||
sprites =
|
||||
[ ( "bold", viewSprite Sprite.bold )
|
||||
|
||||
@ -1,12 +1,8 @@
|
||||
module Examples.UiIcon exposing
|
||||
( example, State, Msg
|
||||
, all
|
||||
)
|
||||
module Examples.UiIcon exposing (example, State, Msg)
|
||||
|
||||
{-|
|
||||
|
||||
@docs example, State, Msg
|
||||
@docs all
|
||||
|
||||
-}
|
||||
|
||||
@ -37,7 +33,7 @@ example =
|
||||
, version = 1
|
||||
, categories = List.singleton Icons
|
||||
, keyboardSupport = []
|
||||
, state = IconExamples.init
|
||||
, state = IconExamples.init { label = "Mastered", name = "starFilled", icon = UiIcon.starFilled }
|
||||
, update = IconExamples.update
|
||||
, subscriptions = \_ -> Sub.none
|
||||
, preview =
|
||||
|
||||
Loading…
Reference in New Issue
Block a user