NoRedInk/noredink-ui
1
1
Fork 0
mirror of https://github.com/NoRedInk/noredink-ui.git synced 2024-11-27 13:02:42 +03:00
Code Issues Packages Projects Releases Wiki Activity

Revert "Merge pull request #979 from NoRedInk/bat/svgs"

Browse Source 
This reverts commit f4fbe9d283, reversing
changes made to c2b5300e5f.
This commit is contained in:
Tessa Kelly 2022-07-11 10:18:08 -07:00
parent f4fbe9d283
commit da57bb4bbc
26 changed files with 1999 additions and 1027 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
src/CheckboxIcons.elm
View File

@ -5,7 +5,6 @@ module CheckboxIcons exposing
, unchecked
)
import Css
import Nri.Ui.Colors.Extra exposing (toCssString)
import Nri.Ui.Colors.V1 as Colors
import Nri.Ui.Svg.V1 exposing (Svg)
@ -22,7 +21,11 @@ unchecked idSuffix =
filterUrl =
"url(#" ++ filterId ++ ")"
in
Nri.Ui.Svg.V1.init viewBox
Svg.svg
[ SvgAttributes.width "27px"
, SvgAttributes.height "27px"
, SvgAttributes.viewBox viewBox
]
[ Svg.defs []
[ Svg.filter
[ SvgAttributes.x "-3.7%"
@ -76,8 +79,7 @@ unchecked idSuffix =
]
]
]
|> Nri.Ui.Svg.V1.withWidth (Css.px 27)
|> Nri.Ui.Svg.V1.withHeight (Css.px 27)
|> Nri.Ui.Svg.V1.fromHtml
checked : String -> Svg
@ -89,7 +91,11 @@ checked idSuffix =
filterUrl =
"url(#" ++ filterId ++ ")"
in
Nri.Ui.Svg.V1.init viewBox
Svg.svg
[ SvgAttributes.width "27px"
, SvgAttributes.height "27px"
, SvgAttributes.viewBox viewBox
]
[ Svg.defs []
[ Svg.filter
[ SvgAttributes.x "-3.7%"
@ -152,8 +158,7 @@ checked idSuffix =
]
]
]
|> Nri.Ui.Svg.V1.withWidth (Css.px 27)
|> Nri.Ui.Svg.V1.withHeight (Css.px 27)
|> Nri.Ui.Svg.V1.fromHtml
checkedPartially : String -> Svg
@ -165,7 +170,11 @@ checkedPartially idSuffix =
filterUrl =
"url(#" ++ filterId ++ ")"
in
Nri.Ui.Svg.V1.init viewBox
Svg.svg
[ SvgAttributes.width "27px"
, SvgAttributes.height "27px"
, SvgAttributes.viewBox viewBox
]
[ Svg.defs []
[ Svg.filter
[ SvgAttributes.x "-3.7%"
@ -227,8 +236,7 @@ checkedPartially idSuffix =
]
]
]
|> Nri.Ui.Svg.V1.withWidth (Css.px 27)
|> Nri.Ui.Svg.V1.withHeight (Css.px 27)
|> Nri.Ui.Svg.V1.fromHtml
viewBox : String
@ -262,7 +270,11 @@ lockOnInside idSuffix =
filterUrl =
"url(#" ++ filterId ++ ")"
in
Nri.Ui.Svg.V1.init viewBox
Svg.svg
[ SvgAttributes.width "27px"
, SvgAttributes.height "27px"
, SvgAttributes.viewBox viewBox
]
[ Svg.defs []
[ Svg.filter
[ SvgAttributes.x "-3.7%"
@ -345,5 +357,4 @@ lockOnInside idSuffix =
]
]
]
|> Nri.Ui.Svg.V1.withWidth (Css.px 27)
|> Nri.Ui.Svg.V1.withHeight (Css.px 27)
|> Nri.Ui.Svg.V1.fromHtml

3
src/Nri/Ui/Accordion/V1.elm
View File

@ -21,7 +21,6 @@ import Html.Styled.Keyed
import Nri.Ui.Colors.V1 as Colors
import Nri.Ui.DisclosureIndicator.V2 as DisclosureIndicator
import Nri.Ui.Fonts.V1 as Fonts
import Nri.Ui.Svg.V1 as Svg
{-| -}
@ -233,7 +232,6 @@ viewCaret expanded caret =
[ marginRight (px 8)
]
expanded
|> Svg.toHtml
WhiteCaret ->
DisclosureIndicator.large
@ -242,7 +240,6 @@ viewCaret expanded caret =
[ Css.Global.everything [ color Colors.white ] ]
]
expanded
|> Svg.toHtml
NoneCaret ->
text ""

197
src/Nri/Ui/AssignmentIcon/V2.elm
View File

File diff suppressed because one or more lines are too long

47
src/Nri/Ui/DisclosureIndicator/V2.elm
View File

@ -20,19 +20,21 @@ A caret that indicates that a section can expand and collapse. When `isOpen` is
-}
import Css exposing (..)
import Html.Styled exposing (..)
import Html.Styled.Attributes exposing (css)
import Nri.Ui.Colors.V1 as Colors
import Nri.Ui.Svg.V1 as Svg exposing (Svg)
import Nri.Ui.UiIcon.V1 as UiIcon
import Nri.Ui.SpriteSheet exposing (arrowLeft)
import Nri.Ui.Svg.V1 as NriSvg
{-| -}
medium : List Css.Style -> Bool -> Svg
medium : List Css.Style -> Bool -> Html msg
medium styles isOpen =
view { isOpen = isOpen, size = px 15, styles = styles }
{-| -}
large : List Css.Style -> Bool -> Svg
large : List Css.Style -> Bool -> Html msg
large styles isOpen =
view { isOpen = isOpen, size = px 17, styles = styles }
@ -43,19 +45,32 @@ view :
, size : Css.Px
, styles : List Css.Style
}
-> Svg
-> Html msg
view { styles, size, isOpen } =
UiIcon.arrowLeft
|> Svg.withColor Colors.azure
|> Svg.withWidth size
|> Svg.withHeight size
|> Svg.withCss
([ property "transition" "transform 0.1s"
, if isOpen then
transform (rotate (deg -90))
else
transform (rotate (deg -180))
div
[ css
([ Css.display Css.inlineBlock
, cursor pointer
, minWidth size
, minHeight size
, maxWidth size
, maxHeight size
]
++ styles
)
]
[ arrowLeft
|> NriSvg.withCss
[ Css.displayFlex
, Css.justifyContent Css.center
, Css.alignItems Css.center
, color Colors.azure
, property "transition" "transform 0.1s"
, if isOpen then
transform (rotate (deg -90))
else
transform (rotate (deg -180))
]
|> NriSvg.toHtml
]

7
src/Nri/Ui/Loading/V1.elm
View File

@ -78,7 +78,11 @@ spinningPencil =
{-| -}
spinningDots : Nri.Ui.Svg.V1.Svg
spinningDots =
Nri.Ui.Svg.V1.init "0 0 12.54 12.54"
Svg.svg
[ SvgAttributes.width "100%"
, SvgAttributes.height "100%"
, SvgAttributes.viewBox "0 0 12.54 12.54"
]
[ Svg.circle [ SvgAttributes.fill "#004e95", SvgAttributes.cx "6.13", SvgAttributes.cy "0.98", SvgAttributes.r "0.98" ] []
, Svg.circle [ SvgAttributes.fill "#004cc9", SvgAttributes.cx "9.95", SvgAttributes.cy "2.47", SvgAttributes.r "0.98", SvgAttributes.transform "translate(1.12 7.67) rotate(-44.43)" ] []
, Svg.circle [ SvgAttributes.fill "#146aff", SvgAttributes.cx "11.56", SvgAttributes.cy "6.24", SvgAttributes.r "0.98", SvgAttributes.transform "translate(5.09 17.67) rotate(-88.86)" ] []
@ -88,6 +92,7 @@ spinningDots =
, Svg.circle [ SvgAttributes.fill "#f5f5f5", SvgAttributes.cx "0.98", SvgAttributes.cy "6.1", SvgAttributes.r "0.98", SvgAttributes.transform "translate(-5.16 6.71) rotate(-86.57)" ] []
, Svg.circle [ SvgAttributes.fill "#fff", SvgAttributes.cx "2.69", SvgAttributes.cy "2.37", SvgAttributes.r "0.98", SvgAttributes.transform "translate(-0.9 2.35) rotate(-41)" ] []
]
|> Nri.Ui.Svg.V1.fromHtml
|> Nri.Ui.Svg.V1.withWidth (Css.px 100)
|> Nri.Ui.Svg.V1.withHeight (Css.px 100)
|> Nri.Ui.Svg.V1.withCss circlingCss

95
src/Nri/Ui/Logo/V1.elm
View File

@ -22,9 +22,6 @@ module Nri.Ui.Logo.V1 exposing
-}
import Css
import Nri.Ui.Colors.Extra exposing (toCssString)
import Nri.Ui.Colors.V1 as Colors
import Nri.Ui.Svg.V1
import Svg.Styled as Svg
import Svg.Styled.Attributes as Attributes
@ -33,13 +30,18 @@ import Svg.Styled.Attributes as Attributes
{-| -}
noredink : Nri.Ui.Svg.V1.Svg
noredink =
Nri.Ui.Svg.V1.init "0 0 109 24"
Svg.svg
[ Attributes.width "100%"
, Attributes.height "100%"
, Attributes.fill "currentcolor"
, Attributes.viewBox "0 0 109 24"
]
[ Svg.g
[ Attributes.fill "none"
, Attributes.fillRule "evenodd"
]
[ Svg.path
[ Attributes.fill (toCssString Colors.red)
[ Attributes.fill "#F3336C"
, Attributes.d "M4.29 6.03v2.048h.065c.943-1.723 2.568-2.503 4.453-2.503 2.795 0 4.453 1.527 4.453 4.972v12.97H8.776v-12.06c0-1.755-.586-2.437-1.918-2.437-1.528 0-2.373.943-2.373 2.892v11.604H0V6.03h4.29zM22.559 20.916c1.82 0 2.404-1.788 2.404-6.143 0-4.355-.584-6.143-2.404-6.143-2.21 0-2.405 2.568-2.405 6.143 0 3.575.195 6.143 2.405 6.143zm0-15.341c5.395-.098 6.89 3.12 6.89 9.198 0 5.98-1.755 9.198-6.89 9.198-5.396.098-6.89-3.12-6.89-9.198 0-5.98 1.754-9.198 6.89-9.198z"
]
[]
@ -49,29 +51,41 @@ noredink =
]
[]
, Svg.path
[ Attributes.fill (toCssString Colors.red)
[ Attributes.fill "#F3336C"
, Attributes.d "M69.336 6.03h4.486v17.486h-4.486V6.03zm0-5.981h4.486v3.835h-4.486V.05zM76.975 6.03h4.29v2.048h.065c.944-1.723 2.568-2.503 4.453-2.503 2.795 0 4.453 1.527 4.453 4.972v12.97H85.75v-12.06c0-1.755-.585-2.437-1.917-2.437-1.527 0-2.373.943-2.373 2.892v11.604h-4.485V6.03zM97.876.31v12.253h.065l4.518-6.533h4.94l-5.037 6.89 5.785 10.596h-4.94l-3.739-7.183-1.592 2.08v5.103H93.39V.31z"
]
[]
]
]
|> Nri.Ui.Svg.V1.fromHtml
{-| -}
facebook : Nri.Ui.Svg.V1.Svg
facebook =
Nri.Ui.Svg.V1.init "0 0 10 19"
Svg.svg
[ Attributes.width "100%"
, Attributes.height "100%"
, Attributes.fill "currentcolor"
, Attributes.viewBox "0 0 10 19"
]
[ Svg.path
[ Attributes.d "M10 3.1H8.2c-1.4 0-1.7.7-1.7 1.6v2.1h3.4l-.5 3.4H6.5v8.6H2.9v-8.6H0V6.9h2.9V4.4C2.9 1.6 4.7 0 7.3 0c1.3 0 2.4.1 2.7.1v3z"
]
[]
]
|> Nri.Ui.Svg.V1.fromHtml
{-| -}
clever : Nri.Ui.Svg.V1.Svg
clever =
Nri.Ui.Svg.V1.init "0 0 87 20"
Svg.svg
[ Attributes.width "100%"
, Attributes.height "100%"
, Attributes.fill "currentcolor"
, Attributes.viewBox "0 0 87 20"
]
[ Svg.g
[ Attributes.fillRule "evenodd"
]
@ -81,12 +95,17 @@ clever =
[]
]
]
|> Nri.Ui.Svg.V1.fromHtml
{-| -}
cleverC : Nri.Ui.Svg.V1.Svg
cleverC =
Nri.Ui.Svg.V1.init "0 0 39 44"
Svg.svg
[ Attributes.width "100%"
, Attributes.height "100%"
, Attributes.viewBox "0 0 39 44"
]
[ Svg.g
[ Attributes.stroke "none"
, Attributes.strokeWidth "1"
@ -100,12 +119,17 @@ cleverC =
[ Svg.path [ Attributes.d "M0,21.7580775 C0,9.74321254 8.96637318,0 21.8178825,0 C29.708078,0 34.4301716,2.63016953 38.3153078,6.45581374 L32.4575445,13.2103396 C29.2296376,10.2814579 25.9422388,8.48824593 21.7580775,8.48824593 C14.7045264,8.48824593 9.62360245,14.3460092 9.62360245,21.5188573 C9.62360245,28.8113154 14.5849163,34.7890019 21.7580775,34.7890019 C26.5399762,34.7890019 29.4688578,32.8761798 32.7565697,29.8874931 L38.614333,35.8050615 C34.3105615,40.407545 29.5286628,43.2769347 21.4590522,43.2769347 C9.1454752,43.2769347 0,33.7726293 0,21.7580775 Z" ] [] ]
]
]
|> Nri.Ui.Svg.V1.fromHtml
{-| -}
cleverLibrary : Nri.Ui.Svg.V1.Svg
cleverLibrary =
Nri.Ui.Svg.V1.init "0 0 580 198"
Svg.svg
[ Attributes.width "100%"
, Attributes.height "100%"
, Attributes.viewBox "0 0 580 198"
]
[ Svg.g [ Attributes.stroke "none", Attributes.strokeWidth "1", Attributes.fill "none", Attributes.fillRule "evenodd" ]
[ Svg.g [ Attributes.transform "translate(0.591000, 0.620000)" ]
[ Svg.rect [ Attributes.fill "#004E95", Attributes.x "0", Attributes.y "0", Attributes.width "579", Attributes.height "197", Attributes.rx "20" ] []
@ -120,23 +144,35 @@ cleverLibrary =
]
]
]
|> Nri.Ui.Svg.V1.fromHtml
{-| -}
twitter : Nri.Ui.Svg.V1.Svg
twitter =
Nri.Ui.Svg.V1.init "0 0 20 16"
Svg.svg
[ Attributes.width "100%"
, Attributes.height "100%"
, Attributes.fill "currentcolor"
, Attributes.viewBox "0 0 20 16"
]
[ Svg.path
[ Attributes.d "M17.9 4.5c0 5.3-4.1 11.4-11.6 11.4-2.3 0-4.5-.7-6.3-1.8h1c1.9 0 3.7-.6 5.1-1.7-1.8 0-3.3-1.2-3.8-2.8.3 0 .5.1.8.1.4 0 .7 0 1.1-.1C2.3 9.2.9 7.6.9 5.7c.5.2 1.1.4 1.8.4C1.6 5.4.9 4.1.9 2.7c0-.7.2-1.4.6-2 2 2.4 5 4 8.4 4.2-.2-.3-.2-.6-.2-.9 0-2.2 1.8-4 4.1-4 1.2 0 2.2.5 3 1.3.9-.2 1.8-.5 2.6-1-.3.9-.9 1.7-1.8 2.2.8-.1 1.6-.3 2.3-.6-.6.8-1.3 1.5-2 2.1v.5z"
]
[]
]
|> Nri.Ui.Svg.V1.fromHtml
{-| -}
googleClassroom : Nri.Ui.Svg.V1.Svg
googleClassroom =
Nri.Ui.Svg.V1.init "0 0 20 20"
Svg.svg
[ Attributes.width "100%"
, Attributes.height "100%"
, Attributes.fill "currentcolor"
, Attributes.viewBox "0 0 20 20"
]
[ Svg.g
[ Attributes.stroke "none"
, Attributes.strokeWidth "1"
@ -160,12 +196,14 @@ googleClassroom =
]
]
]
|> Nri.Ui.Svg.V1.fromHtml
{-| -}
googleG : Nri.Ui.Svg.V1.Svg
googleG =
Nri.Ui.Svg.V1.init "0 0 43 44"
Svg.svg
[ Attributes.viewBox "0 0 43 44" ]
[ Svg.defs []
[ Svg.style []
[ Svg.text ".googleG-icon-clip-path-class{clip-path:url(#googleG-icon-clip-path);}" ]
@ -182,12 +220,18 @@ googleG =
, Svg.g [ Attributes.class "googleG-icon-clip-path-class" ] [ Svg.path [ Attributes.fill "#34a853", Attributes.d "M-2,35,28,12l7.9,1L46-2V46H-2Z" ] [] ]
, Svg.g [ Attributes.class "googleG-icon-clip-path-class" ] [ Svg.path [ Attributes.fill "#4285f4", Attributes.d "M46,46,15,22l-4-3L46,9Z" ] [] ]
]
|> Nri.Ui.Svg.V1.fromHtml
{-| -}
canvas : Nri.Ui.Svg.V1.Svg
canvas =
Nri.Ui.Svg.V1.init "200 250 400 115"
Svg.svg
[ Attributes.viewBox "200 250 400 115"
, Attributes.width "100%"
, Attributes.height "100%"
, Attributes.fill "#E72429"
]
[ Svg.g []
[ Svg.g []
[ Svg.path [ Attributes.d "M220.1,306.8c0-7-5.2-12.7-12-13.5c-1.1,4.3-1.7,8.8-1.7,13.5c0,4.7,0.6,9.2,1.7,13.5 C214.9,319.5,220.1,313.7,220.1,306.8z" ] []
@ -217,25 +261,34 @@ canvas =
]
]
]
|> Nri.Ui.Svg.V1.withColor (Css.hex "#E72429")
|> Nri.Ui.Svg.V1.fromHtml
{-| -}
canvasCircle : Nri.Ui.Svg.V1.Svg
canvasCircle =
Nri.Ui.Svg.V1.init "0 0 200 200"
Svg.svg
[ Attributes.viewBox "0 0 200 200"
, Attributes.width "100%"
, Attributes.height "100%"
]
[ Svg.path
[ Attributes.fill "#D64027"
, Attributes.d "M29.2 100c0-14.9-11.2-26.9-25.5-28.4C1.5 80.6 0 89.6 0 100s1.5 19.4 3.7 28.4C18 126.9 29.2 114.2 29.2 100L29.2 100zM46.4 90.3c5 0 9 4 9 9s-4 9-9 9 -9-4-9-9S41.5 90.3 46.4 90.3zM170.8 100c0 14.9 11.2 26.9 25.5 28.4 2.2-9 3.7-18.7 3.7-28.4s-1.5-19.4-3.7-28.4C182 73.1 170.8 85.1 170.8 100L170.8 100zM151.3 90.3c5 0 9 4 9 9s-4 9-9 9c-5 0-9-4-9-9S146.3 90.3 151.3 90.3zM99.6 170.9c-15 0-27 11.2-28.5 25.4 9 2.2 18.7 3.7 28.5 3.7s19.5-1.5 28.5-3.7C126.6 182.1 114.6 170.9 99.6 170.9L99.6 170.9zM98.9 142.5c5 0 9 4 9 9 0 4.9-4 9-9 9 -5 0-9-4-9-9C89.9 146.5 93.9 142.5 98.9 142.5zM99.6 29.1c15 0 27-11.2 28.5-25.4 -9-2.2-18.7-3.7-28.5-3.7S80.1 1.5 71.2 3.7C72.7 17.9 84.6 29.1 99.6 29.1L99.6 29.1zM98.9 38.1c5 0 9 4 9 9s-4 9-9 9c-5 0-9-4-9-9S93.9 38.1 98.9 38.1zM149.8 150c-10.5 10.4-11.2 26.9-2.2 38.1 16.5-9.7 30.7-23.9 40.4-40.3C176.8 138.8 160.3 139.6 149.8 150L149.8 150zM136.3 127.6c5 0 9 4 9 9 0 4.9-4 9-9 9 -5 0-9-4-9-9C127.3 131.6 131.4 127.6 136.3 127.6zM49.4 50c10.5-10.4 11.2-26.9 2.2-38.1C35.2 21.6 21 35.8 11.2 52.2 22.5 61.2 39 60.4 49.4 50L49.4 50zM61.4 53c5 0 9 4 9 9s-4 9-9 9 -9-4-9-9S56.5 53 61.4 53zM149.8 50c10.5 10.4 27 11.2 38.2 2.2 -9.7-16.4-24-30.6-40.4-40.3C138.6 23.1 139.3 39.6 149.8 50L149.8 50zM136.3 53c5 0 9 4 9 9s-4 9-9 9c-5 0-9-4-9-9S131.4 53 136.3 53zM49.4 150c-10.5-10.4-27-11.2-38.2-2.2 9.7 16.4 24 30.6 40.4 40.3C60.7 176.1 59.9 160.4 49.4 150L49.4 150zM61.4 127.6c5 0 9 4 9 9 0 4.9-4 9-9 9s-9-4-9-9C52.4 131.6 56.5 127.6 61.4 127.6z"
]
[]
]
|> Nri.Ui.Svg.V1.fromHtml
{-| -}
schoology : Nri.Ui.Svg.V1.Svg
schoology =
Nri.Ui.Svg.V1.init "0 0 928 163"
Svg.svg
[ Attributes.viewBox "0 0 928 163"
, Attributes.width "100%"
, Attributes.height "100%"
]
[ Svg.g [ Attributes.fillRule "nonzero" ]
[ Svg.path
[ Attributes.d "M81.5 163C36.6 163 0 126.4 0 81.5S36.6 0 81.5 0 163 36.6 163 81.5c0 45-36.5 81.5-81.5 81.5zm0-149.4c-37.5 0-68 30.5-68 68s30.5 68 68 68 68-30.5 68-68c0-37.6-30.5-68-68-68z"
@ -252,12 +305,17 @@ schoology =
[ Svg.path [ Attributes.d "M814.9 98.5h-23v-9.2H830v43.2h-9.5v-10s1.5-1.8 0 .1c-6.9 8.1-16.8 11.7-28.9 11.7-29.7 0-40.3-22.1-40.3-42 0-23 12.2-43.7 39.1-43.7 13 0 32.1 4.6 37.4 27.1l-15.1 1.4c-.5-3.3-3.4-18.5-21.8-18.5-23.5 0-24.5 25.5-24.5 32.7 0 8.8 1.7 16.3 5.3 21.8 4.6 7.4 11.6 10.8 20.1 10.8 19.7 0 21.9-16.1 22.8-22.5l.3-2.9zM241.2 96.7c-13-3.1-29-6.7-29-23.5 0-14.8 12.5-24 31.2-24 15.4 0 31.9 7.4 34.6 26.4l-14.7 1.9c-.2-5-.5-8.9-5.8-13.1-5.3-4.1-11.5-4.8-15.6-4.8-10.7 0-16 6.3-16 11.8 0 7.7 8.7 10.1 19.4 12.7L253 86c9.6 2.2 26.9 6.4 26.9 23.3 0 13.2-11.7 25.5-33.9 25.5-9.1 0-18.5-1.9-25-6.5-2.6-1.9-10.5-8.4-12-22l15.4-2.4c-.2 3.6-.2 10.5 6 15.8 4.8 4.1 10.8 4.6 16.3 4.6 12 0 19-4.6 19-13.4 0-9.2-7-11-16.8-12.9l-7.7-1.3zM366.1 103.2c-.5 3.3-1.4 7.7-4.6 13.7-6.7 12.3-18.2 17.8-33.1 17.8-29.7 0-40.3-22.1-40.3-42 0-23 12.2-43.8 39.1-43.8 13 0 32.1 4.6 37.4 27.1l-15.1 1.4c-.5-3.3-3.4-18.5-21.8-18.5-23.5 0-24.5 25.6-24.5 32.8 0 8.7 1.7 16.3 5.3 21.8 4.6 7.4 11.7 10.8 20.1 10.8 19.7 0 21.9-16.1 22.8-22.5l14.7 1.4zM374.3 11.1h13.9v48.5C396.8 50.5 405 49 412.7 49c17.8 0 24.9 10 27.3 17.9 1.6 5.1 1.6 10.5 1.6 18.5v47h-13.9V89.7c0-10.6 0-16.8-3.3-21.8-3.4-5-8.9-6.9-14.2-6.9-8.8 0-18.2 4.8-20.9 17.3-1 4.5-1 8.8-1 14.7v39.3h-14V11.1zM494.7 134.7c-28 0-39.8-20.9-39.8-42.2 0-18 8.9-43.6 40.3-43.6 26.8 0 39.1 20.8 38.9 42.9-.1 24.6-14.7 42.9-39.4 42.9zm23.7-54.2c-3.1-15.9-13.5-20.6-22.8-20.6-18.4 0-25.7 14.2-25.7 32.8 0 17 7 31 24.7 31 22.8 0 24.5-23.7 24.7-31.9.1-5.1-.4-8.9-.9-11.3zM583.4 134.7c-28 0-39.8-20.9-39.8-42.2 0-18 8.9-43.6 40.3-43.6 26.8 0 39.1 20.8 39 42.9-.3 24.6-14.8 42.9-39.5 42.9zM607 80.5c-3.1-15.9-13.5-20.6-22.8-20.6-18.4 0-25.7 14.2-25.7 32.8 0 17 7 31 24.7 31 22.8 0 24.5-23.7 24.7-31.9.2-5.1-.3-8.9-.9-11.3zM636.7 11.2h13.2v121.1h-13.2zM703.4 134.7c-27.9 0-39.8-20.9-39.8-42.2 0-18 8.9-43.6 40.3-43.6 26.8 0 39.1 20.8 38.9 42.9-.1 24.6-14.7 42.9-39.4 42.9zm23.7-54.2c-3.1-15.9-13.6-20.6-22.8-20.6-18.4 0-25.7 14.2-25.7 32.8 0 17 7 31 24.7 31 22.8 0 24.5-23.7 24.7-31.9.1-5.1-.4-8.9-.9-11.3zM900.8 50.4h-13l-20.9 33-20.4-33h-15.1l28.9 44.4v37.5h13.1V94.8l29.5-44.4h-2.1zM927.2 58.3c0 5-4 8.9-9.1 8.9s-9.1-3.9-9.1-8.9 4.1-8.8 9.2-8.8c5-.1 9 3.8 9 8.8zm-15.9 0c0 3.9 3 7.1 6.9 7.1 3.8.1 6.7-3.1 6.7-7s-2.9-7.1-6.9-7.1c-3.8-.1-6.7 3.1-6.7 7zm5.4 4.6h-2V54c.8-.1 1.9-.3 3.4-.3 1.7 0 2.4.3 3 .7.5.4.9 1 .9 1.9 0 1.1-.8 1.8-1.8 2.1v.1c.9.3 1.3 1 1.6 2.2.3 1.3.5 1.8.6 2.2h-2.2c-.3-.3-.4-1.1-.7-2.2-.2-.9-.7-1.4-1.8-1.4h-1v3.6zm.1-5h1c1.1 0 2-.4 2-1.3 0-.8-.6-1.4-1.9-1.4-.5 0-.9.1-1.1.1v2.6z" ] []
]
]
|> Nri.Ui.Svg.V1.fromHtml
{-| -}
schoologyCircle : Nri.Ui.Svg.V1.Svg
schoologyCircle =
Nri.Ui.Svg.V1.init "0 0 163 163"
Svg.svg
[ Attributes.viewBox "0 0 163 163"
, Attributes.width "100%"
, Attributes.height "100%"
]
[ Svg.g []
[ Svg.path
[ Attributes.d "M81.5 163C36.6 163 0 126.4 0 81.5S36.6 0 81.5 0 163 36.6 163 81.5c0 45-36.5 81.5-81.5 81.5zm0-149.4c-37.5 0-68 30.5-68 68s30.5 68 68 68 68-30.5 68-68c0-37.6-30.5-68-68-68z"
@ -271,3 +329,4 @@ schoologyCircle =
[]
]
]
|> Nri.Ui.Svg.V1.fromHtml

39
src/Nri/Ui/MasteryIcon/V1.elm
View File

@ -14,51 +14,79 @@ import Svg.Styled.Attributes as Attributes
{-| -}
levelZero : Nri.Ui.Svg.V1.Svg
levelZero =
Nri.Ui.Svg.V1.init "0 0 400 400"
Svg.svg
[ Attributes.viewBox "0 0 400 400"
, Attributes.width "100%"
, Attributes.height "100%"
, Attributes.fill "currentcolor"
]
[ Svg.path [ Attributes.d "M91.6,147.8l14,28.4l2.6,5.2l5.7,0.8l31.3,4.6l-22.7,22.1l-4.1,4l1,5.7l5.4,31.2l-28-14.7l-5.1-2.7l-5.1,2.7 l-28,14.7l5.4-31.2l1-5.7l-4.2-4l-22.8-22.1l31.4-4.6l5.7-0.8l2.6-5.2L91.6,147.8 M91.5,128.1c-2,0-3.5,1.9-4.3,3.6l-19.6,39.7 l-43.8,6.4c-2.2,0.4-4.9,1.4-4.9,4c0,1.6,1.1,3.1,2.2,4.2l31.8,30.9l-7.5,43.6c-0.1,0.6-0.2,1.2-0.2,1.8c0,2.3,1.1,4.4,3.7,4.4 c1.2,0,2.4-0.4,3.5-1l39.2-20.6l39.2,20.6c1.1,0.6,2.3,1,3.5,1c2.5,0,3.6-2.1,3.6-4.4c0-0.6,0-1.2-0.1-1.8l-7.5-43.6l31.7-30.9 c1.1-1.1,2.3-2.6,2.3-4.2c0-2.6-2.8-3.7-4.9-4l-43.8-6.4l-19.6-39.7C95.1,130,93.6,128,91.5,128.1L91.5,128.1z" ] []
, Svg.path [ Attributes.d "M308.4,147.8l14,28.4l2.6,5.2l5.7,0.8l31.3,4.6l-22.7,22.1l-4.1,4l1,5.7l5.4,31.2l-28-14.7l-5.1-2.7l-5.1,2.7 l-28,14.7l5.4-31.2l1-5.7l-4.1-4l-22.7-22.1l31.4-4.6l5.7-0.8l2.6-5.2L308.4,147.8 M308.4,128.1c-2,0-3.5,1.9-4.3,3.6l-19.6,39.7 l-43.8,6.4c-2.2,0.4-4.9,1.4-4.9,4c0,1.6,1.1,3.1,2.2,4.2l31.8,30.9l-7.5,43.6c-0.1,0.6-0.2,1.2-0.2,1.8c0,2.3,1.1,4.4,3.7,4.4 c1.2,0,2.4-0.4,3.5-1l39.2-20.6l39.2,20.6c1.1,0.6,2.3,1,3.5,1c2.5,0,3.6-2.1,3.6-4.4c0-0.6,0-1.2-0.1-1.8l-7.5-43.6l31.7-30.9 c1.1-1.1,2.3-2.6,2.3-4.2c0-2.6-2.8-3.7-4.9-4l-43.8-6.4l-19.6-39.7C311.9,130,310.4,128,308.4,128.1L308.4,128.1z" ] []
, Svg.path [ Attributes.d "M200.6,264.9l14,28.4l2.6,5.2l5.7,0.8l31.3,4.6L231.6,326l-4.1,4l1,5.7l5.3,31.3l-28.1-14.8l-5.1-2.7l-5.1,2.7 L167.4,367l5.4-31.2l1-5.7l-4.1-4L146.9,304l31.4-4.6l5.7-0.8l2.6-5.2L200.6,264.9 M200.6,245.2c-2,0-3.5,1.9-4.3,3.6l-19.6,39.7 l-43.8,6.3c-2.2,0.4-4.9,1.4-4.9,4c0,1.6,1.1,3,2.2,4.2l31.8,30.9l-7.5,43.6c-0.1,0.6-0.2,1.2-0.2,1.8c0,2.3,1.1,4.4,3.7,4.4 c1.2,0,2.4-0.4,3.5-1l39.2-20.6l39.2,20.6c1.1,0.6,2.3,1,3.5,1c2.5,0,3.6-2.1,3.6-4.4c0-0.6,0-1.2-0.1-1.8l-7.5-43.6l31.7-30.9 c1.1-1.1,2.3-2.6,2.3-4.2c0-2.6-2.8-3.7-4.9-4l-43.8-6.4l-19.6-39.7C204.1,247.1,202.6,245.2,200.6,245.2L200.6,245.2z" ] []
, Svg.path [ Attributes.d "M200.1,27.1l14,28.4l2.6,5.2l5.7,0.8l31.3,4.6l-22.7,22.1l-4.1,4l1,5.7l5.4,31.2l-28-14.7l-5.1-2.7l-5.1,2.7 L167,129.1l5.4-31.2l1-5.7l-4.2-4l-22.8-22.1l31.4-4.6l5.7-0.8l2.6-5.2L200.1,27.1 M200.1,7.3c-2,0-3.5,1.9-4.3,3.6l-19.6,39.7 L132.5,57c-2.2,0.4-4.9,1.4-4.9,4c0,1.6,1.1,3.1,2.2,4.2L161.5,96l-7.5,43.6c-0.1,0.6-0.2,1.2-0.2,1.8c0,2.3,1.1,4.4,3.7,4.4 c1.2,0,2.4-0.4,3.5-1l39.2-20.6l39.2,20.6c1.1,0.6,2.3,1,3.5,1c2.5,0,3.6-2.1,3.6-4.4c0-0.6,0-1.2-0.1-1.8L238.8,96l31.7-30.9 c1.1-1.1,2.3-2.6,2.3-4.2c0-2.6-2.8-3.7-4.9-4L224,50.6l-19.6-39.7C203.6,9.3,202.2,7.3,200.1,7.3L200.1,7.3z" ] []
]
|> Nri.Ui.Svg.V1.fromHtml
{-| -}
levelOne : Nri.Ui.Svg.V1.Svg
levelOne =
Nri.Ui.Svg.V1.init "0 0 400 400"
Svg.svg
[ Attributes.viewBox "0 0 400 400"
, Attributes.width "100%"
, Attributes.height "100%"
, Attributes.fill "currentcolor"
]
[ Svg.path [ Attributes.d "M91.57,147.79l14,28.39,2.56,5.18,5.72.83,31.33,4.56-22.69,22.13-4.14,4,1,5.7,5.37,31.23L96.69,235.1l-5.12-2.69-5.12,2.69L58.4,249.84l5.37-31.23,1-5.71-4.15-4L37.87,186.76l31.39-4.56,5.72-.83,2.56-5.18,14-28.39m0-19.75c-2,0-3.49,1.92-4.27,3.58L67.67,171.31l-43.79,6.37c-2.18.35-4.88,1.4-4.88,4,0,1.57,1.13,3.05,2.18,4.19l31.75,30.88-7.5,43.61a11.94,11.94,0,0,0-.17,1.75c0,2.27,1.13,4.36,3.66,4.36a7.35,7.35,0,0,0,3.49-1l39.16-20.58,39.16,20.58a7.07,7.07,0,0,0,3.49,1c2.53,0,3.58-2.09,3.58-4.36a11.83,11.83,0,0,0-.09-1.75l-7.5-43.61,31.66-30.88c1.13-1.13,2.27-2.62,2.27-4.19,0-2.62-2.79-3.66-4.88-4l-43.79-6.37L95.84,131.62C95.06,130,93.58,128,91.57,128Z" ] []
, Svg.path [ Attributes.d "M308.43,147.79l14,28.39,2.56,5.18,5.72.83,31.33,4.56-22.69,22.13-4.14,4,1,5.7,5.37,31.23L313.55,235.1l-5.12-2.69-5.12,2.69-28.05,14.74,5.37-31.23,1-5.71-4.15-4-22.73-22.11,31.39-4.56,5.72-.83,2.56-5.18,14-28.39m0-19.75c-2,0-3.49,1.92-4.27,3.58l-19.62,39.69-43.79,6.37c-2.18.35-4.88,1.4-4.88,4,0,1.57,1.13,3.05,2.18,4.19l31.75,30.88-7.5,43.61a12,12,0,0,0-.17,1.75c0,2.27,1.13,4.36,3.66,4.36a7.35,7.35,0,0,0,3.49-1l39.16-20.58,39.16,20.58a7.07,7.07,0,0,0,3.49,1c2.53,0,3.58-2.09,3.58-4.36a11.81,11.81,0,0,0-.09-1.75l-7.5-43.61,31.66-30.88c1.13-1.13,2.27-2.62,2.27-4.19,0-2.62-2.79-3.66-4.88-4l-43.79-6.37L312.7,131.62c-.79-1.66-2.27-3.58-4.27-3.58Z" ] []
, Svg.path [ Attributes.d "M270.89,65.23,239.23,96.11l7.5,43.61a11.82,11.82,0,0,1,.09,1.75c0,2.27-1,4.36-3.58,4.36a7.07,7.07,0,0,1-3.49-1L200.59,124.2l-39.16,20.58a7.35,7.35,0,0,1-3.49,1c-2.53,0-3.66-2.09-3.66-4.36a11.94,11.94,0,0,1,.17-1.75l7.5-43.61L130.2,65.23c-1-1.13-2.18-2.62-2.18-4.19,0-2.62,2.7-3.66,4.88-4l43.79-6.37L196.31,11c.79-1.66,2.27-3.58,4.27-3.58s3.49,1.92,4.27,3.58l19.62,39.69L268.27,57c2.09.35,4.88,1.4,4.88,4C273.16,62.62,272,64.1,270.89,65.23Z" ] []
, Svg.path [ Attributes.d "M200.59,264.92l14,28.39,2.56,5.18,5.72.83,31.33,4.56L231.55,326l-4.14,4,1,5.7L233.76,367,205.7,352.23l-5.12-2.69-5.12,2.69L167.41,367l5.37-31.23,1-5.71-4.15-4-22.73-22.11,31.39-4.56,5.72-.83,2.56-5.18,14-28.39m0-19.75c-2,0-3.49,1.92-4.27,3.58l-19.62,39.69L132.9,294.8c-2.18.35-4.88,1.4-4.88,4,0,1.57,1.13,3.05,2.18,4.19l31.75,30.88-7.5,43.61a12,12,0,0,0-.17,1.75c0,2.27,1.13,4.36,3.66,4.36a7.35,7.35,0,0,0,3.49-1L200.59,362l39.16,20.58a7.07,7.07,0,0,0,3.49,1c2.53,0,3.58-2.09,3.58-4.36a11.83,11.83,0,0,0-.09-1.75l-7.5-43.61L270.89,303c1.13-1.13,2.27-2.62,2.27-4.19,0-2.62-2.79-3.66-4.88-4l-43.79-6.37-19.62-39.69c-.79-1.66-2.27-3.58-4.27-3.58Z" ] []
]
|> Nri.Ui.Svg.V1.fromHtml
{-| -}
levelTwo : Nri.Ui.Svg.V1.Svg
levelTwo =
Nri.Ui.Svg.V1.init "0 0 400 400"
Svg.svg
[ Attributes.viewBox "0 0 400 400"
, Attributes.width "100%"
, Attributes.height "100%"
, Attributes.fill "currentcolor"
]
[ Svg.path [ Attributes.d "M91.57,147.79l14,28.39,2.56,5.18,5.72.83,31.33,4.56-22.69,22.13-4.14,4,1,5.7,5.37,31.23L96.69,235.1l-5.12-2.69-5.12,2.69L58.4,249.84l5.37-31.23,1-5.71-4.15-4L37.87,186.76l31.39-4.56,5.72-.83,2.56-5.18,14-28.39m0-19.75c-2,0-3.49,1.92-4.27,3.58L67.67,171.31l-43.79,6.37c-2.18.35-4.88,1.4-4.88,4,0,1.57,1.13,3.05,2.18,4.19l31.75,30.88-7.5,43.61a11.94,11.94,0,0,0-.17,1.75c0,2.27,1.13,4.36,3.66,4.36a7.35,7.35,0,0,0,3.49-1l39.16-20.58,39.16,20.58a7.07,7.07,0,0,0,3.49,1c2.53,0,3.58-2.09,3.58-4.36a11.83,11.83,0,0,0-.09-1.75l-7.5-43.61,31.66-30.88c1.13-1.13,2.27-2.62,2.27-4.19,0-2.62-2.79-3.66-4.88-4l-43.79-6.37L95.84,131.62C95.06,130,93.58,128,91.57,128Z" ] []
, Svg.path [ Attributes.d "M378.73,185.87l-31.66,30.88,7.5,43.61a11.82,11.82,0,0,1,.09,1.75c0,2.27-1,4.36-3.58,4.36a7.07,7.07,0,0,1-3.49-1l-39.16-20.58-39.16,20.58a7.35,7.35,0,0,1-3.49,1c-2.53,0-3.66-2.09-3.66-4.36a11.94,11.94,0,0,1,.17-1.75l7.5-43.61L238,185.87c-1-1.13-2.18-2.62-2.18-4.19,0-2.62,2.7-3.66,4.88-4l43.79-6.37,19.62-39.69c.79-1.66,2.27-3.58,4.27-3.58s3.49,1.92,4.27,3.58l19.62,39.69,43.79,6.37c2.09.35,4.88,1.4,4.88,4C381,183.26,379.87,184.74,378.73,185.87Z" ] []
, Svg.path [ Attributes.d "M270.89,65.23,239.23,96.11l7.5,43.61a11.82,11.82,0,0,1,.09,1.75c0,2.27-1,4.36-3.58,4.36a7.07,7.07,0,0,1-3.49-1L200.59,124.2l-39.16,20.58a7.35,7.35,0,0,1-3.49,1c-2.53,0-3.66-2.09-3.66-4.36a11.94,11.94,0,0,1,.17-1.75l7.5-43.61L130.2,65.23c-1-1.13-2.18-2.62-2.18-4.19,0-2.62,2.7-3.66,4.88-4l43.79-6.37L196.31,11c.79-1.66,2.27-3.58,4.27-3.58s3.49,1.92,4.27,3.58l19.62,39.69L268.27,57c2.09.35,4.88,1.4,4.88,4C273.16,62.62,272,64.1,270.89,65.23Z" ] []
, Svg.path [ Attributes.d "M200.59,264.92l14,28.39,2.56,5.18,5.72.83,31.33,4.56L231.55,326l-4.14,4,1,5.7L233.76,367,205.7,352.23l-5.12-2.69-5.12,2.69L167.41,367l5.37-31.23,1-5.71-4.15-4-22.73-22.11,31.39-4.56,5.72-.83,2.56-5.18,14-28.39m0-19.75c-2,0-3.49,1.92-4.27,3.58l-19.62,39.69L132.9,294.8c-2.18.35-4.88,1.4-4.88,4,0,1.57,1.13,3.05,2.18,4.19l31.75,30.88-7.5,43.61a12,12,0,0,0-.17,1.75c0,2.27,1.13,4.36,3.66,4.36a7.35,7.35,0,0,0,3.49-1L200.59,362l39.16,20.58a7.07,7.07,0,0,0,3.49,1c2.53,0,3.58-2.09,3.58-4.36a11.83,11.83,0,0,0-.09-1.75l-7.5-43.61L270.89,303c1.13-1.13,2.27-2.62,2.27-4.19,0-2.62-2.79-3.66-4.88-4l-43.79-6.37-19.62-39.69c-.79-1.66-2.27-3.58-4.27-3.58Z" ] []
]
|> Nri.Ui.Svg.V1.fromHtml
{-| -}
levelThree : Nri.Ui.Svg.V1.Svg
levelThree =
Nri.Ui.Svg.V1.init "0 0 400 400"
Svg.svg
[ Attributes.viewBox "0 0 400 400"
, Attributes.width "100%"
, Attributes.height "100%"
, Attributes.fill "currentcolor"
]
[ Svg.path [ Attributes.d "M91.57,147.79l14,28.39,2.56,5.18,5.72.83,31.33,4.56-22.69,22.13-4.14,4,1,5.7,5.37,31.23L96.69,235.1l-5.12-2.69-5.12,2.69L58.4,249.84l5.37-31.23,1-5.71-4.15-4L37.87,186.76l31.39-4.56,5.72-.83,2.56-5.18,14-28.39m0-19.75c-2,0-3.49,1.92-4.27,3.58L67.67,171.31l-43.79,6.37c-2.18.35-4.88,1.4-4.88,4,0,1.57,1.13,3.05,2.18,4.19l31.75,30.88-7.5,43.61a11.94,11.94,0,0,0-.17,1.75c0,2.27,1.13,4.36,3.66,4.36a7.35,7.35,0,0,0,3.49-1l39.16-20.58,39.16,20.58a7.07,7.07,0,0,0,3.49,1c2.53,0,3.58-2.09,3.58-4.36a11.83,11.83,0,0,0-.09-1.75l-7.5-43.61,31.66-30.88c1.13-1.13,2.27-2.62,2.27-4.19,0-2.62-2.79-3.66-4.88-4l-43.79-6.37L95.84,131.62C95.06,130,93.58,128,91.57,128Z" ] []
, Svg.path [ Attributes.d "M378.73,185.87l-31.66,30.88,7.5,43.61a11.82,11.82,0,0,1,.09,1.75c0,2.27-1,4.36-3.58,4.36a7.07,7.07,0,0,1-3.49-1l-39.16-20.58-39.16,20.58a7.35,7.35,0,0,1-3.49,1c-2.53,0-3.66-2.09-3.66-4.36a11.94,11.94,0,0,1,.17-1.75l7.5-43.61L238,185.87c-1-1.13-2.18-2.62-2.18-4.19,0-2.62,2.7-3.66,4.88-4l43.79-6.37,19.62-39.69c.79-1.66,2.27-3.58,4.27-3.58s3.49,1.92,4.27,3.58l19.62,39.69,43.79,6.37c2.09.35,4.88,1.4,4.88,4C381,183.26,379.87,184.74,378.73,185.87Z" ] []
, Svg.path [ Attributes.d "M270.89,65.23,239.23,96.11l7.5,43.61a11.82,11.82,0,0,1,.09,1.75c0,2.27-1,4.36-3.58,4.36a7.07,7.07,0,0,1-3.49-1L200.59,124.2l-39.16,20.58a7.35,7.35,0,0,1-3.49,1c-2.53,0-3.66-2.09-3.66-4.36a11.94,11.94,0,0,1,.17-1.75l7.5-43.61L130.2,65.23c-1-1.13-2.18-2.62-2.18-4.19,0-2.62,2.7-3.66,4.88-4l43.79-6.37L196.31,11c.79-1.66,2.27-3.58,4.27-3.58s3.49,1.92,4.27,3.58l19.62,39.69L268.27,57c2.09.35,4.88,1.4,4.88,4C273.16,62.62,272,64.1,270.89,65.23Z" ] []
, Svg.path [ Attributes.d "M270.89,303l-31.66,30.88,7.5,43.61a11.82,11.82,0,0,1,.09,1.75c0,2.27-1,4.36-3.58,4.36a7.07,7.07,0,0,1-3.49-1L200.59,362l-39.16,20.58a7.35,7.35,0,0,1-3.49,1c-2.53,0-3.66-2.09-3.66-4.36a11.94,11.94,0,0,1,.17-1.75l7.5-43.61L130.2,303c-1-1.13-2.18-2.62-2.18-4.19,0-2.62,2.7-3.66,4.88-4l43.79-6.37,19.62-39.69c.79-1.66,2.27-3.58,4.27-3.58s3.49,1.92,4.27,3.58l19.62,39.69,43.79,6.37c2.09.35,4.88,1.4,4.88,4C273.16,300.38,272,301.87,270.89,303Z" ] []
]
|> Nri.Ui.Svg.V1.fromHtml
{-| -}
levelFour : Nri.Ui.Svg.V1.Svg
levelFour =
Nri.Ui.Svg.V1.init "0 0 400 400"
Svg.svg
[ Attributes.viewBox "0 0 400 400"
, Attributes.width "100%"
, Attributes.height "100%"
]
[ Svg.path
[ Attributes.fill "currentcolor"
, Attributes.d "M161.87,185.87l-31.66,30.88,7.5,43.61a11.82,11.82,0,0,1,.09,1.75c0,2.27-1,4.36-3.58,4.36a7.07,7.07,0,0,1-3.49-1L91.57,244.84,52.41,265.42a7.35,7.35,0,0,1-3.49,1c-2.53,0-3.66-2.09-3.66-4.36a11.94,11.94,0,0,1,.17-1.75l7.5-43.61L21.18,185.87c-1-1.13-2.18-2.62-2.18-4.19,0-2.62,2.7-3.66,4.88-4l43.79-6.37L87.3,131.62c.79-1.66,2.27-3.58,4.27-3.58s3.49,1.92,4.27,3.58l19.62,39.69,43.79,6.37c2.09.35,4.88,1.4,4.88,4C164.14,183.26,163,184.74,161.87,185.87Z"
@ -80,3 +108,4 @@ levelFour =
]
[]
]
|> Nri.Ui.Svg.V1.fromHtml

4
src/Nri/Ui/Message/V3.elm
View File

@ -768,6 +768,7 @@ getIcon customIcon size theme =
|> NriSvg.withHeight iconSize
|> NriSvg.withCss [ marginRight, Css.flexShrink Css.zero ]
|> NriSvg.withLabel "Error"
|> NriSvg.withNriDescription messageIconDescription
|> NriSvg.toHtml
( Nothing, Alert ) ->
@ -786,6 +787,7 @@ getIcon customIcon size theme =
|> NriSvg.withHeight iconSize
|> NriSvg.withCss [ marginRight, Css.flexShrink Css.zero ]
|> NriSvg.withLabel "Alert"
|> NriSvg.withNriDescription messageIconDescription
|> NriSvg.toHtml
( Nothing, Tip ) ->
@ -868,6 +870,7 @@ getIcon customIcon size theme =
|> NriSvg.withHeight iconSize
|> NriSvg.withCss [ marginRight, Css.flexShrink Css.zero ]
|> NriSvg.withLabel "Success"
|> NriSvg.withNriDescription messageIconDescription
|> NriSvg.toHtml
( Just icon_, _ ) ->
@ -875,6 +878,7 @@ getIcon customIcon size theme =
|> NriSvg.withWidth iconSize
|> NriSvg.withHeight iconSize
|> NriSvg.withCss [ marginRight, Css.flexShrink Css.zero ]
|> NriSvg.withNriDescription messageIconDescription
|> NriSvg.toHtml
( Nothing, Custom _ ) ->

56
src/Nri/Ui/Modal/V11.elm
View File

@ -170,7 +170,6 @@ import Css.Transitions
import Html.Styled as Root
import Html.Styled.Attributes as Attrs exposing (id)
import Html.Styled.Events exposing (onClick)
import Nri.Ui.ClickableSvg.V2 as ClickableSvg
import Nri.Ui.Colors.Extra
import Nri.Ui.Colors.V1 as Colors
import Nri.Ui.FocusTrap.V1 as FocusTrap exposing (FocusTrap)
@ -178,7 +177,8 @@ import Nri.Ui.Fonts.V1 as Fonts
import Nri.Ui.Html.Attributes.V2 as ExtraAttributes
import Nri.Ui.MediaQuery.V1 exposing (mobile)
import Nri.Ui.Shadows.V1 as Shadows
import Nri.Ui.UiIcon.V1 as UiIcon
import Nri.Ui.SpriteSheet
import Nri.Ui.Svg.V1
import Task
@ -721,32 +721,34 @@ closeButtonId =
{-| -}
viewCloseButton : msg -> Html msg
viewCloseButton closeModal =
ClickableSvg.button "Close modal"
UiIcon.x
[ ClickableSvg.id closeButtonId
, ClickableSvg.onClick closeModal
, -- TODO: trim down the unnecessary styles
ClickableSvg.css
[ -- in the upper-right corner of the modal
Css.position Css.absolute
, Css.top Css.zero
, Css.right Css.zero
button
(Aria.label "Close modal"
:: onClick closeModal
:: Attrs.css
[ -- in the upper-right corner of the modal
Css.position Css.absolute
, Css.top Css.zero
, Css.right Css.zero
-- make appear above lesson content
, Css.zIndex (Css.int 10)
, Css.backgroundColor (rgba 255 255 255 0.5)
, Css.borderRadius (pct 50)
-- make appear above lesson content
, Css.zIndex (Css.int 10)
, Css.backgroundColor (rgba 255 255 255 0.5)
, Css.borderRadius (pct 50)
-- make the hitspace extend all the way around x
, Css.width (Css.px 60)
, Css.height (Css.px 60)
, Css.padding (Css.px 20)
-- make the hitspace extend all the way around x
, Css.width (Css.px 60)
, Css.height (Css.px 60)
, Css.padding (Css.px 20)
-- apply button styles
, Css.borderWidth Css.zero
, Css.cursor Css.pointer
, Css.color Colors.azure
, Css.hover [ Css.color Colors.azureDark ]
, Css.Transitions.transition [ Css.Transitions.color 0.1 ]
]
-- apply button styles
, Css.borderWidth Css.zero
, Css.cursor Css.pointer
, Css.color Colors.azure
, Css.hover [ Css.color Colors.azureDark ]
, Css.Transitions.transition [ Css.Transitions.color 0.1 ]
]
:: Attrs.id closeButtonId
:: []
)
[ Nri.Ui.Svg.V1.toHtml Nri.Ui.SpriteSheet.xSvg
]

25
src/Nri/Ui/Pennant/V2.elm
View File

@ -6,8 +6,6 @@ module Nri.Ui.Pennant.V2 exposing (premiumFlag, disabledPremiumFlag, expiredPrem
-}
import Nri.Ui.Colors.Extra exposing (toCssString)
import Nri.Ui.Colors.V1 as Colors
import Nri.Ui.Svg.V1 exposing (Svg)
import Svg.Styled as Svg
import Svg.Styled.Attributes as Attributes
@ -16,7 +14,11 @@ import Svg.Styled.Attributes as Attributes
{-| -}
premiumFlag : Svg
premiumFlag =
Nri.Ui.Svg.V1.init "0 0 25 18"
Svg.svg
[ Attributes.width "100%"
, Attributes.height "100%"
, Attributes.viewBox "0 0 25 18"
]
[ Svg.g
[ Attributes.stroke "none"
, Attributes.strokeWidth "1"
@ -47,12 +49,17 @@ premiumFlag =
]
]
]
|> Nri.Ui.Svg.V1.fromHtml
{-| -}
disabledPremiumFlag : Nri.Ui.Svg.V1.Svg
disabledPremiumFlag =
Nri.Ui.Svg.V1.init "0 0 25 18"
Svg.svg
[ Attributes.width "100%"
, Attributes.height "100%"
, Attributes.viewBox "0 0 25 18"
]
[ Svg.g
[ Attributes.stroke "none"
, Attributes.strokeWidth "1"
@ -83,12 +90,17 @@ disabledPremiumFlag =
]
]
]
|> Nri.Ui.Svg.V1.fromHtml
{-| -}
expiredPremiumFlag : Nri.Ui.Svg.V1.Svg
expiredPremiumFlag =
Nri.Ui.Svg.V1.init "0 0 25 18"
Svg.svg
[ Attributes.width "100%"
, Attributes.height "100%"
, Attributes.viewBox "0 0 25 18"
]
[ Svg.g
[ Attributes.stroke "none"
, Attributes.strokeWidth "1"
@ -105,7 +117,7 @@ expiredPremiumFlag =
[ Attributes.transform "translate(0.000000, 446.000000)"
]
[ Svg.polygon
[ Attributes.fill (toCssString Colors.red)
[ Attributes.fill "#F3336C"
, Attributes.points "12.7757004 0 1.73472348e-16 0 1.73472348e-16 14.2404227 0 16.2706817 0 18 7.34267839 18 25 18 19.566978 9 25 0"
]
[]
@ -119,3 +131,4 @@ expiredPremiumFlag =
]
]
]
|> Nri.Ui.Svg.V1.fromHtml

9
src/Nri/Ui/RadioButton/V4.elm
View File

@ -577,7 +577,7 @@ radioInputIcon config =
unselectedSvg : Svg
unselectedSvg =
Nri.Ui.Svg.V1.init "0 0 27 27"
Svg.svg [ SvgAttributes.viewBox "0 0 27 27" ]
[ Svg.defs []
[ Svg.rect [ SvgAttributes.id "unselected-path-1", SvgAttributes.x "0", SvgAttributes.y "0", SvgAttributes.width "27", SvgAttributes.height "27", SvgAttributes.rx "13.5" ] []
, Svg.filter [ SvgAttributes.id "unselected-filter-2", SvgAttributes.x "-3.7%", SvgAttributes.y "-3.7%", SvgAttributes.width "107.4%", SvgAttributes.height "107.4%", SvgAttributes.filterUnits "objectBoundingBox" ] [ Svg.feOffset [ SvgAttributes.dx "0", SvgAttributes.dy "2", SvgAttributes.in_ "SourceAlpha", SvgAttributes.result "shadowOffsetInner1" ] [], Svg.feComposite [ SvgAttributes.in_ "shadowOffsetInner1", SvgAttributes.in2 "SourceAlpha", SvgAttributes.operator "arithmetic", SvgAttributes.k2 "-1", SvgAttributes.k3 "1", SvgAttributes.result "shadowInnerInner1" ] [], Svg.feColorMatrix [ SvgAttributes.values "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0", SvgAttributes.in_ "shadowInnerInner1" ] [] ]
@ -607,12 +607,13 @@ unselectedSvg =
]
]
]
|> Nri.Ui.Svg.V1.fromHtml
|> withImageBorder Colors.gray75
selectedSvg : Svg
selectedSvg =
Nri.Ui.Svg.V1.init "0 0 27 27"
Svg.svg [ SvgAttributes.viewBox "0 0 27 27" ]
[ Svg.defs []
[ Svg.rect [ SvgAttributes.id "selected-path-1", SvgAttributes.x "0", SvgAttributes.y "0", SvgAttributes.width "27", SvgAttributes.height "27", SvgAttributes.rx "13.5" ] []
, Svg.filter
@ -651,12 +652,13 @@ selectedSvg =
]
]
]
|> Nri.Ui.Svg.V1.fromHtml
|> withImageBorder Colors.azure
lockedSvg : Svg
lockedSvg =
Nri.Ui.Svg.V1.init "0 0 30 30"
Svg.svg [ SvgAttributes.viewBox "0 0 30 30" ]
[ Svg.defs []
[ Svg.rect [ SvgAttributes.id "locked-path-1", SvgAttributes.x "0", SvgAttributes.y "0", SvgAttributes.width "30", SvgAttributes.height "30", SvgAttributes.rx "15" ] []
, Svg.filter [ SvgAttributes.id "locked-filter-2", SvgAttributes.x "-3.3%", SvgAttributes.y "-3.3%", SvgAttributes.width "106.7%", SvgAttributes.height "106.7%", SvgAttributes.filterUnits "objectBoundingBox" ] [ Svg.feOffset [ SvgAttributes.dx "0", SvgAttributes.dy "2", SvgAttributes.in_ "SourceAlpha", SvgAttributes.result "shadowOffsetInner1" ] [], Svg.feComposite [ SvgAttributes.in_ "shadowOffsetInner1", SvgAttributes.in2 "SourceAlpha", SvgAttributes.operator "arithmetic", SvgAttributes.k2 "-1", SvgAttributes.k3 "1", SvgAttributes.result "shadowInnerInner1" ] [], Svg.feColorMatrix [ SvgAttributes.values "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0", SvgAttributes.in_ "shadowInnerInner1" ] [] ]
@ -698,6 +700,7 @@ lockedSvg =
]
]
]
|> Nri.Ui.Svg.V1.fromHtml
|> withImageBorder Colors.gray75

69
src/Nri/Ui/Select/V8.elm
View File

@ -1,7 +1,6 @@
module Nri.Ui.Select.V8 exposing
( view, generateId
, Choice, choices
, ChoicesGroup, groupedChoices
, value
, Attribute, defaultDisplayText
, hiddenLabel, visibleLabel
@ -25,7 +24,6 @@ module Nri.Ui.Select.V8 exposing
### Input types
@docs Choice, choices
@docs ChoicesGroup, groupedChoices
### Input content
@ -162,26 +160,6 @@ noMargin removeMargin =
Attribute <| \config -> { config | noMarginTop = removeMargin }
{-| Groupings of choices (will be added _after_ isolated choices.)
-}
type alias ChoicesGroup value =
{ label : String
, choices : List (Choice value)
}
{-| -}
groupedChoices : (value -> String) -> List (ChoicesGroup value) -> Attribute value
groupedChoices valueToString optgroups =
Attribute
(\config ->
{ config
| valueToString = Just valueToString
, optgroups = optgroups
}
)
{-| A single possible choice.
-}
type alias Choice value =
@ -217,7 +195,6 @@ type alias Config value =
{ id : Maybe String
, value : Maybe value
, choices : List (Choice value)
, optgroups : List (ChoicesGroup value)
, valueToString : Maybe (value -> String)
, defaultDisplayText : Maybe String
, error : ErrorState
@ -234,7 +211,6 @@ defaultConfig =
{ id = Nothing
, value = Nothing
, choices = []
, optgroups = []
, valueToString = Nothing
, defaultDisplayText = Nothing
, error = InputErrorAndGuidanceInternal.noError
@ -279,7 +255,6 @@ view label attributes =
config
, viewSelect
{ choices = config.choices
, optgroups = config.optgroups
, current = config.value
, id = id_
, custom = config.custom
@ -293,7 +268,6 @@ view label attributes =
viewSelect :
{ choices : List (Choice a)
, optgroups : List (ChoicesGroup a)
, current : Maybe a
, id : String
, valueToString : Maybe (a -> String)
@ -304,25 +278,23 @@ viewSelect :
-> Html a
viewSelect config =
let
toChoice valueToString choice =
{ label = choice.label
, idAndValue = generateId (valueToString choice.value)
, value = choice.value
}
( optionStringChoices, groupStringChoices ) =
stringChoices =
case config.valueToString of
Just valueToString ->
( List.map (toChoice valueToString) config.choices
, List.concatMap (.choices >> List.map (toChoice valueToString)) config.optgroups
)
List.map
(\choice ->
{ label = choice.label
, idAndValue = generateId (valueToString choice.value)
, value = choice.value
}
)
config.choices
Nothing ->
( [], [] )
[]
valueLookup =
optionStringChoices
++ groupStringChoices
stringChoices
|> List.map (\x -> ( x.idAndValue, x.value ))
|> Dict.fromList
@ -355,23 +327,10 @@ viewSelect config =
else
config.current
viewGroupedChoices group =
Html.optgroup [ Attributes.attribute "label" group.label ]
(case config.valueToString of
Just valueToString ->
List.map
(toChoice valueToString >> viewChoice currentVal)
group.choices
Nothing ->
[]
)
in
(defaultOption
++ List.map (viewChoice currentVal) optionStringChoices
++ List.map viewGroupedChoices config.optgroups
)
stringChoices
|> List.map (viewChoice currentVal)
|> (++) defaultOption
|> Nri.Ui.styled Html.select
"nri-select-menu"
[ -- border

184
src/Nri/Ui/SpriteSheet.elm Normal file
View File

@ -0,0 +1,184 @@
module Nri.Ui.SpriteSheet exposing
( arrowLeft
, bulb
, checkmark
, exclamationMark
, xSvg
)
{-|
@docs arrowLeft
@docs bulb
@docs checkmark
@docs exclamationMark
@docs xSvg
-}
import Html.Styled exposing (..)
import Nri.Ui.Svg.V1 as NriSvg
import Svg exposing (..)
import Svg.Attributes exposing (..)
{-| -}
exclamationMark : NriSvg.Svg
exclamationMark =
Svg.svg
[ viewBox "0 0 4 12", width "100%", height "100%" ]
[ Svg.path
[ d "M3.234 10.575a1.363 1.363 0 1 1-2.726 0 1.363 1.363 0 0 1 2.726 0zm.648-8.398a1.978 1.978 0 0 1-.007.047l-.834 5.294c-.079.53-.542.926-1.085.926h-.013a1.096 1.096 0 0 1-1.085-.926L.024 2.224A1.93 1.93 0 0 1 1.93 0h.04a1.94 1.94 0 0 1 1.912 1.663v.514z"
, fill "currentcolor"
, fillRule "evenodd"
]
[]
]
|> fromUnstyled
|> NriSvg.fromHtml
{-| -}
checkmark : NriSvg.Svg
checkmark =
Svg.svg
[ x "0px"
, y "0px"
, viewBox "0 0 21.7 17.1"
, Svg.Attributes.style "enable-background:new 0 0 21.7 17.1;"
, width "100%"
, height "100%"
]
[ Svg.path
[ fill "currentcolor"
, d "M7.6,17.1c-0.5,0-1-0.2-1.4-0.6l-5.6-5.4c-0.8-0.8-0.8-2-0.1-2.8c0.8-0.8,2-0.8,2.8-0.1l4.1,4 L18.2,0.7c0.8-0.8,2-0.9,2.8-0.1s0.9,2,0.1,2.8l-12,13C8.7,16.9,8.2,17.1,7.6,17.1C7.7,17.1,7.6,17.1,7.6,17.1"
]
[]
]
|> fromUnstyled
|> NriSvg.fromHtml
{-| -}
bulb : NriSvg.Svg
bulb =
svg
[ x "0px"
, y "0px"
, viewBox "0 0 23 25"
, Svg.Attributes.style "enable-background:new 0 0 23 25;"
, width "100%"
, height "100%"
]
[ Svg.style [] [ Svg.text ".blub-st0{fill:#FEC709;} " ]
, g []
[ g [ transform "translate(-261.000000, -371.000000)" ]
[ g
[ transform "translate(259.886945, 371.000000)"
]
[ g [ transform "translate(0.859754, 0.051946)" ]
[ g [ transform "translate(0.461538, 0.000000)" ]
[ Svg.path
[ class "blub-st0"
, d "M21.6,12.5H19c-0.3,0-0.6,0.3-0.6,0.6s0.3,0.6,0.6,0.6h2.6c0.3,0,0.6-0.3,0.6-0.6 S21.9,12.5,21.6,12.5z"
]
[]
, Svg.path
[ class "blub-st0"
, d "M18.1,9.3c0.1,0,0.2,0,0.3-0.1l2.3-1.4C20.9,7.7,21,7.3,20.8,7c-0.2-0.3-0.5-0.4-0.8-0.2 l-2.3,1.4c-0.2,0.1-0.3,0.4-0.3,0.7C17.6,9.1,17.8,9.3,18.1,9.3L18.1,9.3z"
]
[]
, Svg.path
[ class "blub-st0"
, d "M17.1,2c-0.3-0.2-0.6-0.1-0.8,0.2l-1.5,2.2h0c-0.1,0.1-0.1,0.3-0.1,0.5c0,0.2,0.1,0.3,0.2,0.4 c0.1,0.1,0.3,0.1,0.4,0.1c0.2,0,0.3-0.1,0.4-0.3l1.5-2.2C17.4,2.6,17.4,2.2,17.1,2L17.1,2z"
]
[]
, Svg.path
[ class "blub-st0"
, d "M6.7,5.4c0.2,0,0.4-0.1,0.5-0.3c0.1-0.2,0.1-0.4,0-0.6L5.7,2.2v0C5.6,2.1,5.4,2,5.3,1.9 C5.1,1.9,5,1.9,4.9,2C4.7,2.1,4.6,2.3,4.6,2.4c0,0.2,0,0.3,0.1,0.4l1.5,2.2C6.3,5.3,6.5,5.4,6.7,5.4L6.7,5.4z"
]
[]
, Svg.path
[ class "blub-st0"
, d "M4,8.2L1.7,6.8C1.5,6.7,1.1,6.8,1,7C0.8,7.3,0.9,7.6,1.2,7.8l2.3,1.4c0.1,0.1,0.3,0.1,0.4,0.1 C4,9.2,4.1,9.1,4.2,9c0.1-0.1,0.1-0.3,0.1-0.5C4.2,8.4,4.1,8.2,4,8.2L4,8.2z"
]
[]
, Svg.path
[ class "blub-st0"
, d "M20.6,17.8l-2.2-1.4c-0.3-0.2-0.6-0.1-0.8,0.2c-0.2,0.3-0.1,0.6,0.2,0.8l2.3,1.4 c0.3,0.1,0.6,0,0.7-0.2C21,18.3,20.9,18,20.6,17.8L20.6,17.8z"
]
[]
, Svg.path
[ class "blub-st0"
, d "M3.5,16.4l-2.3,1.4h0C1.1,17.8,1,18,0.9,18.1c0,0.2,0,0.3,0.1,0.5c0.1,0.1,0.2,0.2,0.4,0.3 c0.1,0,0.3,0,0.4-0.1L4,17.4c0.3-0.2,0.3-0.5,0.2-0.8C4.1,16.4,3.7,16.3,3.5,16.4L3.5,16.4z"
]
[]
, Svg.path
[ class "blub-st0"
, d "M3.7,13.1c0-0.3-0.3-0.6-0.6-0.6H0.6c-0.3,0-0.6,0.3-0.6,0.6s0.3,0.6,0.6,0.6h2.6 c0.1,0,0.3-0.1,0.4-0.2C3.7,13.4,3.7,13.2,3.7,13.1L3.7,13.1z"
]
[]
, Svg.path
[ class "blub-st0"
, d "M10.7,3.9c0.3,0,0.6-0.3,0.6-0.6V0.6C11.3,0.3,11,0,10.7,0c-0.3,0-0.6,0.3-0.6,0.6v2.7 c0,0.2,0.1,0.3,0.2,0.4S10.6,3.9,10.7,3.9L10.7,3.9z"
]
[]
, Svg.path
[ class "blub-st0"
, d "M13.4,20.2H8.9c-0.3,0-0.6,0.3-0.6,0.6c0,0.3,0.3,0.6,0.6,0.6h4.5c0.3,0,0.6-0.3,0.6-0.6 C14,20.5,13.7,20.2,13.4,20.2z"
]
[]
, Svg.path
[ class "blub-st0"
, d "M10,23.5v0.3c0,0.4,0.3,0.7,0.6,0.7h0.9c0.4,0,0.6-0.3,0.6-0.7v-0.3c0.7,0,1.3-0.7,1.3-1.4 H8.8C8.9,22.8,9.4,23.4,10,23.5L10,23.5z"
]
[]
, Svg.path
[ class "blub-st0"
, d "M11.2,6.7c-3.1,0-5.6,2.7-5.6,6v0c0,0.8,0.1,1.5,0.4,2.3c0,0.1,0.1,0.2,0.1,0.3h0 c0.2,0.6,0.6,1.1,1,1.6l1.4,2.3h5.4l1.4-2.3c0.4-0.5,0.7-1,1-1.6c0-0.1,0.1-0.2,0.1-0.3h0c0.3-0.7,0.4-1.5,0.4-2.3 C16.8,9.4,14.3,6.7,11.2,6.7L11.2,6.7z M10.9,9c-0.6,0-1.2,0.2-1.7,0.5c-1.1,0.7-1.6,1.9-1.7,3.5v0c0,0.3-0.3,0.6-0.6,0.6 c-0.1,0-0.3-0.1-0.4-0.2c-0.1-0.1-0.2-0.3-0.2-0.4c0-2.7,1.3-4,2.3-4.6c0.7-0.4,1.4-0.6,2.2-0.7c0.3,0,0.6,0.3,0.6,0.6 C11.5,8.7,11.2,9,10.9,9L10.9,9z"
]
[]
]
]
]
]
]
]
|> fromUnstyled
|> NriSvg.fromHtml
{-| -}
arrowLeft : NriSvg.Svg
arrowLeft =
svg
[ viewBox "0 0 25 25"
, width "100%"
, height "100%"
, fill "currentcolor"
]
[ Svg.path
[ fillRule "evenodd"
, d "M19.2677026,20.7322696 C20.2443584,21.7070736 20.2443584,23.2915005 19.2677026,24.2677859 C18.7788191,24.7555583 18.139567,25 17.4999444,25 C16.8603219,25 16.2210698,24.7555583 15.7321863,24.2677859 L5.73229742,14.267897 C4.7556416,13.293093 4.7556416,11.7086662 5.73229742,10.7323808 L15.7321863,0.732491861 C16.7084718,-0.244163954 18.2914171,-0.244163954 19.2677026,0.732491861 C20.2443584,1.70729584 20.2443584,3.29172268 19.2677026,4.26800813 L11.0359422,12.5001389 L19.2677026,20.7322696 Z"
]
[]
]
|> fromUnstyled
|> NriSvg.fromHtml
xSvg : NriSvg.Svg
xSvg =
svg
[ viewBox "0 0 25 25"
, width "100%"
, height "100%"
, fill "currentcolor"
]
[ Svg.path
[ d "M1.067 6.015c-1.423-1.422-1.423-3.526 0-4.948 1.422-1.423 3.526-1.423 4.948 0l6.371 6.37 6.371-6.37c1.422-1.423 3.783-1.423 5.176 0 1.423 1.422 1.423 3.782 0 5.176l-6.37 6.37 6.37 6.372c1.423 1.422 1.423 3.526 0 4.948-1.422 1.423-3.526 1.423-4.948 0l-6.371-6.37-6.371 6.37c-1.422 1.423-3.783 1.423-5.176 0-1.423-1.422-1.423-3.782 0-5.176l6.37-6.143-6.37-6.599z"
]
[]
]
|> fromUnstyled
|> NriSvg.fromHtml

105
src/Nri/Ui/Svg/V1.elm
View File

@ -1,53 +1,53 @@
module Nri.Ui.Svg.V1 exposing
( Svg
, withColor, withLabel, withWidth, withHeight, withCss, withCustom
, init, toHtml
, withColor, withLabel, withWidth, withHeight, withCss, withNriDescription
, fromHtml, toHtml
, toRawSvg
)
{-|
@docs Svg
@docs withColor, withLabel, withWidth, withHeight, withCss, withCustom
@docs init, toHtml
@docs withColor, withLabel, withWidth, withHeight, withCss, withNriDescription
@docs fromHtml, toHtml
@docs toRawSvg
-}
import Accessibility.Styled.Aria as Aria
import Accessibility.Styled.Role as Role
import Css exposing (Color)
import Html.Styled.Attributes
import Html.Styled as Html exposing (Html)
import Html.Styled.Attributes as Attributes
import Nri.Ui.Html.Attributes.V2 as AttributesExtra
import Svg.Styled
import Svg.Styled.Attributes exposing (..)
import Svg.Styled as Svg
{-| Opaque type describing a non-interactable Html element.
-}
type Svg
= Svg
{ icon : List (Svg.Styled.Svg Never)
{ icon : Html Never
, color : Maybe Color
, width : Maybe Css.Px
, height : Maybe Css.Px
, css : List Css.Style
, label : Maybe String
, viewBox : String
, attributes : List (Svg.Styled.Attribute Never)
, attributes : List (Html.Attribute Never)
}
{-| Pass through the viewbox as the first argument and the contents of the svg node as the second argument.
{-| Tag html as being an svg.
-}
init : String -> List (Svg.Styled.Svg Never) -> Svg
init viewBox icon =
fromHtml : Html Never -> Svg
fromHtml icon =
Svg
{ icon = icon
, color = Nothing
, height = Nothing
, width = Nothing
, css = [ Css.flexShrink Css.zero ]
, css = []
, label = Nothing
, viewBox = viewBox
, attributes = []
}
@ -58,11 +58,12 @@ withColor color (Svg record) =
Svg { record | color = Just color }
{-| Add a title to the svg. Note that when the label is _not_ present, the icon will be entirely hidden from screenreader users.
{-| Add a string aria-label property to the element.
Read [Carie Fisher's "Accessible Svgs"](https://www.smashingmagazine.com/2021/05/accessible-svg-patterns-comparison/) article to learn more about accessible svgs.
See [Using the aria-label attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute) for
guidelines of when and how to use this attribute.
Go through the [WCAG images tutorial](https://www.w3.org/WAI/tutorials/images/) to learn more about identifying when images are functional or decorative or something else.
Note that when the label is _not_ present, `aria-hidden` will be added. See <https://css-tricks.com/accessible-svg-icons/> for a quick summary on why.
-}
withLabel : String -> Svg -> Svg
@ -90,45 +91,49 @@ withCss css (Svg record) =
{-| -}
withCustom : List (Svg.Styled.Attribute Never) -> Svg -> Svg
withCustom : List (Html.Attribute Never) -> Svg -> Svg
withCustom attributes (Svg record) =
Svg { record | attributes = record.attributes ++ attributes }
Svg { record | attributes = attributes ++ record.attributes }
{-| render an svg.
{-| -}
withNriDescription : String -> Svg -> Svg
withNriDescription description =
withCustom [ AttributesExtra.nriDescription description ]
{-| Render an svg.
-}
toHtml : Svg -> Svg.Styled.Svg msg
toHtml : Svg -> Html msg
toHtml (Svg record) =
let
width =
Maybe.map Css.width record.width
|> Maybe.withDefault (Css.width (Css.pct 100))
css =
List.filterMap identity
[ Maybe.map Css.color record.color
, Maybe.map Css.width record.width
, Maybe.map Css.height record.height
]
++ record.css
height =
Maybe.map Css.height record.height
|> Maybe.withDefault (Css.height (Css.pct 100))
attributes =
List.filterMap identity
[ if List.isEmpty css then
Nothing
color =
Maybe.map Css.color record.color
|> Maybe.withDefault (Css.batch [])
else
Just (Attributes.css (Css.display Css.inlineBlock :: css))
, Maybe.map Aria.label record.label
|> Maybe.withDefault (Aria.hidden True)
|> Just
, Just Role.img
]
++ record.attributes
in
Svg.Styled.svg
([ viewBox record.viewBox
, fill "currentcolor"
, css (width :: height :: color :: record.css)
, Maybe.map (\_ -> AttributesExtra.none) record.label
|> Maybe.withDefault (Aria.hidden True)
, Role.img
, Html.Styled.Attributes.attribute "focusable" "false"
]
++ record.attributes
)
(case record.label of
Just label ->
Svg.Styled.title [] [ Svg.Styled.text label ]
:: record.icon
Html.map never (Html.div attributes [ record.icon ])
Nothing ->
record.icon
)
|> Svg.Styled.map never
{-| Extract an svg, dropping any attributes passed through.
-}
toRawSvg : Svg -> Svg.Svg msg
toRawSvg (Svg record) =
Html.map never record.icon

25
src/Nri/Ui/Switch/V2.elm
View File

@ -244,7 +244,19 @@ viewSwitch config =
shadowBoxId =
config.id ++ "-shadow-box"
in
Nri.Ui.Svg.V1.init "0 0 43 32"
Svg.svg
[ SvgAttributes.width "43"
, SvgAttributes.height "32"
, SvgAttributes.viewBox "0 0 43 32"
, SvgAttributes.css
[ Css.zIndex (Css.int 1)
, if config.isDisabled then
Css.opacity (Css.num 0.4)
else
Css.opacity (Css.num 1)
]
]
[ Svg.defs []
[ Svg.filter
[ SvgAttributes.id shadowFilterId
@ -354,16 +366,7 @@ viewSwitch config =
]
]
]
|> Nri.Ui.Svg.V1.withWidth (Css.px 43)
|> Nri.Ui.Svg.V1.withHeight (Css.px 32)
|> Nri.Ui.Svg.V1.withCss
[ Css.zIndex (Css.int 1)
, if config.isDisabled then
Css.opacity (Css.num 0.4)
else
Css.opacity (Css.num 1)
]
|> Nri.Ui.Svg.V1.fromHtml
stroke : Color -> Style

816
src/Nri/Ui/UiIcon/V1.elm
View File

File diff suppressed because one or more lines are too long

22
styleguide-app/Examples.elm
View File

@ -31,6 +31,7 @@ import Examples.Shadows as Shadows
import Examples.SideNav as SideNav
import Examples.SortableTable as SortableTable
import Examples.Sprite as Sprite
import Examples.Svg as Svg
import Examples.Switch as Switch
import Examples.Table as Table
import Examples.Tabs as Tabs
@ -611,6 +612,25 @@ all =
SpriteState childState ->
Just childState
_ ->
Nothing
)
, Svg.example
|> Example.wrapMsg SvgMsg
(\msg ->
case msg of
SvgMsg childMsg ->
Just childMsg
_ ->
Nothing
)
|> Example.wrapState SvgState
(\msg ->
case msg of
SvgState childState ->
Just childState
_ ->
Nothing
)
@ -819,6 +839,7 @@ type State
| SideNavState SideNav.State
| SortableTableState SortableTable.State
| SpriteState Sprite.State
| SvgState Svg.State
| SwitchState Switch.State
| TableState Table.State
| TabsState Tabs.State
@ -861,6 +882,7 @@ type Msg
| SideNavMsg SideNav.Msg
| SortableTableMsg SortableTable.Msg
| SpriteMsg Sprite.Msg
| SvgMsg Svg.Msg
| SwitchMsg Switch.Msg
| TableMsg Table.Msg
| TabsMsg Tabs.Msg

11
styleguide-app/Examples/Accordion.elm
View File

@ -87,7 +87,7 @@ example =
defaultCaret : Bool -> Html msg
defaultCaret =
DisclosureIndicator.large [ Css.marginRight (Css.px 8) ] >> Svg.toHtml
DisclosureIndicator.large [ Css.marginRight (Css.px 8) ]
{-| -}
@ -104,10 +104,7 @@ view ellieLinkConfig model =
, update = UpdateControls
, settings = model.settings
, mainType = "RootHtml.Html String"
, extraImports =
[ "import Nri.Ui.DisclosureIndicator.V2 as DisclosureIndicator"
, "import Nri.Ui.Svg.V1 as Svg"
]
, extraImports = [ "import Nri.Ui.DisclosureIndicator.V2 as DisclosureIndicator" ]
, toExampleCode =
\settings ->
[ { sectionName = "Partial example"
@ -349,8 +346,8 @@ controlIcon =
Control.choice
[ ( "DisclosureIndicator"
, Control.value
( "DisclosureIndicator.large [ Css.marginRight (Css.px 8) ] >> Svg.toHtml"
, DisclosureIndicator.large [ Css.marginRight (Css.px 8) ] >> Svg.toHtml
( "DisclosureIndicator.large [ Css.marginRight (Css.px 8) ]"
, DisclosureIndicator.large [ Css.marginRight (Css.px 8) ]
)
)
, ( "none", Control.value ( "\\_ -> text \"\"", \_ -> Html.text "" ) )

119
styleguide-app/Examples/AssignmentIcon.elm
View File

@ -6,8 +6,9 @@ module Examples.AssignmentIcon exposing (example, State, Msg)
-}
import Category exposing (Category(..))
import Example exposing (Example)
import Examples.IconExamples as IconExamples exposing (Group)
import Examples.IconExamples as IconExamples
import Nri.Ui.AssignmentIcon.V2 as AssignmentIcon
@ -24,12 +25,13 @@ type alias Msg =
{-| -}
example : Example State Msg
example =
{ moduleName = "AssignmentIcon"
{ name = "AssignmentIcon"
, version = 2
, label = "Planning Diagnostics"
, name = "planningDiagnosticCircled"
, icon = AssignmentIcon.planningDiagnosticCircled
, renderSvgCode = \name -> "AssignmentIcon." ++ name
, categories = [ Icons ]
, keyboardSupport = []
, state = IconExamples.init
, update = IconExamples.update
, subscriptions = \_ -> Sub.none
, preview =
IconExamples.preview
[ AssignmentIcon.planningDiagnosticCircled
@ -45,60 +47,53 @@ example =
, AssignmentIcon.standards
, AssignmentIcon.writing
]
, all = all
, view =
\ellieLinkConfig settings ->
let
viewExampleSection =
IconExamples.view settings
in
[ IconExamples.viewSettings settings
, viewExampleSection "Diagnostic"
[ ( "diagnostic", AssignmentIcon.diagnostic )
, ( "planningDiagnosticCircled", AssignmentIcon.planningDiagnosticCircled )
, ( "unitDiagnosticCircled", AssignmentIcon.unitDiagnosticCircled )
]
, viewExampleSection "Practice" <|
[ ( "practice", AssignmentIcon.practice )
, ( "practiceCircled", AssignmentIcon.practiceCircled )
]
, viewExampleSection "Quiz" <|
[ ( "quiz", AssignmentIcon.quiz )
, ( "quizCircled", AssignmentIcon.quizCircled )
, ( "passageQuizCircled", AssignmentIcon.passageQuizCircled )
]
, viewExampleSection "Writing" <|
[ ( "quickWrite", AssignmentIcon.quickWrite )
, ( "guidedDraft", AssignmentIcon.guidedDraft )
, ( "peerReview", AssignmentIcon.peerReview )
, ( "selfReview", AssignmentIcon.selfReview )
]
, viewExampleSection "Writing II" <|
[ ( "quickWriteCircled", AssignmentIcon.quickWriteCircled )
, ( "guidedDraftCircled", AssignmentIcon.guidedDraftCircled )
, ( "peerReviewCircled", AssignmentIcon.peerReviewCircled )
, ( "selfReviewCircled", AssignmentIcon.selfReviewCircled )
]
, viewExampleSection "Stages" <|
[ ( "submitting", AssignmentIcon.submitting )
, ( "rating", AssignmentIcon.rating )
, ( "revising", AssignmentIcon.revising )
]
, viewExampleSection "Start" <|
[ ( "startPrimary", AssignmentIcon.startPrimary )
, ( "startSecondary", AssignmentIcon.startSecondary )
]
, viewExampleSection "Activities" <|
[ ( "assessment", AssignmentIcon.assessment )
, ( "standards", AssignmentIcon.standards )
, ( "writing", AssignmentIcon.writing )
, ( "modules", AssignmentIcon.modules )
]
]
}
|> IconExamples.example
all : List Group
all =
[ ( "Diagnostic"
, [ ( "diagnostic", AssignmentIcon.diagnostic, [] )
, ( "planningDiagnosticCircled", AssignmentIcon.planningDiagnosticCircled, [] )
, ( "unitDiagnosticCircled", AssignmentIcon.unitDiagnosticCircled, [] )
]
)
, ( "Practice"
, [ ( "practice", AssignmentIcon.practice, [] )
, ( "practiceCircled", AssignmentIcon.practiceCircled, [] )
]
)
, ( "Quiz"
, [ ( "quiz", AssignmentIcon.quiz, [] )
, ( "quizCircled", AssignmentIcon.quizCircled, [] )
, ( "passageQuizCircled", AssignmentIcon.passageQuizCircled, [] )
]
)
, ( "Writing"
, [ ( "quickWrite", AssignmentIcon.quickWrite, [] )
, ( "guidedDraft", AssignmentIcon.guidedDraft, [] )
, ( "peerReview", AssignmentIcon.peerReview, [] )
, ( "selfReview", AssignmentIcon.selfReview, [] )
]
)
, ( "Writing II"
, [ ( "quickWriteCircled", AssignmentIcon.quickWriteCircled, [] )
, ( "guidedDraftCircled", AssignmentIcon.guidedDraftCircled, [] )
, ( "peerReviewCircled", AssignmentIcon.peerReviewCircled, [] )
, ( "selfReviewCircled", AssignmentIcon.selfReviewCircled, [] )
]
)
, ( "Stages"
, [ ( "submitting", AssignmentIcon.submitting, [] )
, ( "rating", AssignmentIcon.rating, [] )
, ( "revising", AssignmentIcon.revising, [] )
]
)
, ( "Start"
, [ ( "startPrimary", AssignmentIcon.startPrimary, [] )
, ( "startSecondary", AssignmentIcon.startSecondary, [] )
]
)
, ( "Activities"
, [ ( "assessment", AssignmentIcon.assessment, [] )
, ( "standards", AssignmentIcon.standards, [] )
, ( "writing", AssignmentIcon.writing, [] )
, ( "modules", AssignmentIcon.modules, [] )
]
)
]

14
styleguide-app/Examples/DisclosureIndicator.elm
View File

@ -15,7 +15,6 @@ import Example exposing (Example)
import Html.Styled as Html
import Html.Styled.Attributes exposing (css)
import Nri.Ui.DisclosureIndicator.V2 as DisclosureIndicator
import Nri.Ui.Svg.V1 as Svg
import Nri.Ui.Text.V6 as Text
@ -40,10 +39,10 @@ example =
, update = update
, subscriptions = \_ -> Sub.none
, preview =
[ DisclosureIndicator.medium [] False |> Svg.toHtml
, DisclosureIndicator.medium [] True |> Svg.toHtml
, DisclosureIndicator.large [] False |> Svg.toHtml
, DisclosureIndicator.large [] True |> Svg.toHtml
[ DisclosureIndicator.medium [] False
, DisclosureIndicator.medium [] True
, DisclosureIndicator.large [] False
, DisclosureIndicator.large [] True
]
, view =
\ellieLinkConfig state ->
@ -59,7 +58,7 @@ example =
, update = UpdateSettings
, settings = state.settings
, mainType = "RootHtml.Html msg"
, extraImports = [ "import Nri.Ui.Svg.V1 as Svg" ]
, extraImports = []
, toExampleCode =
\settings ->
let
@ -71,7 +70,6 @@ example =
++ Tuple.first settings.css
++ " "
++ Tuple.first settings.isOpen
++ " |> Svg.toHtml"
in
[ { sectionName = "Large"
, code = toCode "large"
@ -85,14 +83,12 @@ example =
[ DisclosureIndicator.large
(Tuple.second attributes.css)
(Tuple.second attributes.isOpen)
|> Svg.toHtml
, Html.text "large is a 17px caret icon."
]
, Html.div [ css [ Css.displayFlex, Css.alignItems Css.center, Css.marginBottom (Css.px 8) ] ]
[ DisclosureIndicator.medium
(Tuple.second attributes.css)
(Tuple.second attributes.isOpen)
|> Svg.toHtml
, Html.text "medium is a 15px caret icon."
]
]

289
styleguide-app/Examples/IconExamples.elm
View File

@ -1,61 +1,26 @@
module Examples.IconExamples exposing
( example
, Settings, Msg
, Group
, preview
( preview
, Settings, init, Msg, update, viewSettings
, view, viewWithCustomStyles
)
{-|
@docs example
@docs Settings, Msg
@docs Group
@docs preview
@docs Settings, init, Msg, update, viewSettings
@docs view, viewWithCustomStyles
-}
import Category exposing (Category(..))
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
import Html.Styled.Attributes exposing (css)
import Nri.Ui.Checkbox.V5 as Checkbox
import Nri.Ui.Colors.Extra exposing (fromCssColor, toCssColor)
import Nri.Ui.Colors.V1 as Colors
import Nri.Ui.Heading.V2 as Heading
import Nri.Ui.Select.V8 as Select
import Nri.Ui.Svg.V1 as Svg exposing (Svg)
import Nri.Ui.Svg.V1 as Svg
import Nri.Ui.Text.V6 as Text
import Nri.Ui.TextInput.V7 as TextInput
import SolidColor exposing (SolidColor)
type alias Config =
{ moduleName : String
, version : Int
, label : String
, name : String
, icon : Svg
, renderSvgCode : String -> String
, preview : List (Html Never)
, all : List Group
}
example : Config -> Example Settings Msg
example config =
{ name = config.moduleName
, version = config.version
, categories = [ Icons ]
, keyboardSupport = []
, state = init config
, update = update
, subscriptions = \_ -> Sub.none
, preview = config.preview
, view = \ellieLinkConfig settings -> view settings config.all
}
{-| -}
@ -78,84 +43,29 @@ preview icons =
{-| -}
type alias Settings =
{ showIconName : Bool
, iconSelectorExpanded : Bool
, color : SolidColor
, width : Float
, height : Float
, icon : ( String, Svg )
, label : String
, showBorder : Bool
, renderSvgCode : String -> String
}
{ showIconName : Bool }
{-| -}
init : Config -> Settings
init { label, name, icon, renderSvgCode } =
{ showIconName = False
, iconSelectorExpanded = False
, color = fromCssColor Colors.greenDark
, width = 100
, height = 100
, icon = ( name, icon )
, label = label
, showBorder = True
, renderSvgCode = renderSvgCode
}
init : Settings
init =
{ showIconName = False }
{-| -}
type Msg
= ShowNames Bool
| SetIcon ( String, Svg )
| SetColor (Result String SolidColor)
| SetWidth (Maybe Float)
| SetHeight (Maybe Float)
| SetLabel String
| SetBorder Bool
{-| -}
update : Msg -> Settings -> ( Settings, Cmd msg )
update msg state =
update msg settings =
case msg of
ShowNames showIconName ->
( { state | showIconName = showIconName }
( { settings | showIconName = showIconName }
, Cmd.none
)
SetIcon svg ->
( { state | icon = svg }
, Cmd.none
)
SetColor (Ok color) ->
( { state | color = color }
, Cmd.none
)
SetColor (Err err) ->
( state, Cmd.none )
SetWidth (Just width) ->
( { state | width = width }, Cmd.none )
SetWidth Nothing ->
( state, Cmd.none )
SetHeight (Just height) ->
( { state | height = height }, Cmd.none )
SetHeight Nothing ->
( state, Cmd.none )
SetLabel label ->
( { state | label = label }, Cmd.none )
SetBorder showBorder ->
( { state | showBorder = showBorder }, Cmd.none )
{-| -}
viewSettings : Settings -> Html Msg
@ -170,27 +80,20 @@ viewSettings { showIconName } =
}
type alias Group =
( String
, List ( String, Svg.Svg, List Css.Style )
)
{-| -}
view : Settings -> List Group -> List (Html Msg)
view settings groups =
view : Settings -> String -> List ( String, Svg.Svg ) -> Html msg
view settings headerText icons =
let
viewExampleSection ( group, values ) =
viewWithCustomStyles settings group values
defaultStyles =
[ Css.height (Css.px 25)
, Css.width (Css.px 25)
, Css.margin (Css.px 4)
, Css.color Colors.gray45
]
in
viewSettings settings
:: List.map viewExampleSection groups
++ [ Html.section [ css [ Css.margin2 (Css.px 30) Css.zero ] ]
[ Heading.h3 [] [ Html.text "Example Usage" ]
, viewSingularExampleSettings groups settings
, viewResults settings
]
]
viewWithCustomStyles settings
headerText
(List.map (\( name, svg ) -> ( name, svg, defaultStyles )) icons)
{-| -}
@ -226,18 +129,6 @@ viewWithCustomStyles { showIconName } headerText icons =
viewIcon : Bool -> ( String, Svg.Svg, List Css.Style ) -> Html msg
viewIcon showIconName ( name, icon, style ) =
let
iconCss =
if List.isEmpty style then
[ Css.height (Css.px 25)
, Css.width (Css.px 25)
, Css.margin (Css.px 4)
, Css.color Colors.gray45
]
else
style
in
Html.div
[ css
[ Css.displayFlex
@ -257,7 +148,7 @@ viewIcon showIconName ( name, icon, style ) =
]
]
[ icon
|> Svg.withCss iconCss
|> Svg.withCss style
|> Svg.toHtml
, Text.smallBody
[ Text.plaintext name
@ -269,133 +160,3 @@ viewIcon showIconName ( name, icon, style ) =
[ Css.display Css.none ]
]
]
viewSingularExampleSettings : List Group -> Settings -> Html.Html Msg
viewSingularExampleSettings groups state =
let
svgGroupedChoices ( groupName, items ) =
let
toEntry ( name, icon, _ ) =
Select.Choice name ( name, icon )
in
Select.ChoicesGroup groupName (List.map toEntry items)
in
Html.div
[ Attributes.css
[ Css.displayFlex
, Css.justifyContent Css.spaceBetween
, Css.alignItems Css.center
, Css.flexWrap Css.wrap
]
]
[ TextInput.view "Title"
[ TextInput.value state.label
, TextInput.text SetLabel
]
, Select.view "Icon"
[ Select.groupedChoices Tuple.first
(List.map svgGroupedChoices groups)
, Select.value (Just state.icon)
]
|> Html.map SetIcon
, Checkbox.viewWithLabel
{ identifier = "show-border"
, label = "Show border"
, setterMsg = SetBorder
, selected = Checkbox.selectedFromBool state.showBorder
, disabled = False
, theme = Checkbox.Square
}
, Html.label []
[ Html.text "Color: "
, Html.input
[ Attributes.type_ "color"
, Attributes.value (SolidColor.toHex state.color)
, Events.onInput (SetColor << SolidColor.fromHex)
]
[]
]
, Html.label []
[ Html.text "Width: "
, Html.input
[ Attributes.type_ "range"
, Attributes.min "0"
, Attributes.max "200"
, Attributes.value (String.fromFloat state.width)
, Events.onInput (SetWidth << String.toFloat)
]
[]
]
, Html.label []
[ Html.text "Height: "
, Html.input
[ Attributes.type_ "range"
, Attributes.min "0"
, Attributes.max "200"
, Attributes.value (String.fromFloat state.height)
, Events.onInput (SetHeight << String.toFloat)
]
[]
]
]
viewResults : Settings -> Html.Html Msg
viewResults state =
let
( red, green, blue ) =
SolidColor.toRGB state.color
in
Html.div [ Attributes.css [ Css.displayFlex ] ]
[ Html.pre
[ Attributes.css
[ Css.width (Css.px 400)
, Css.marginRight (Css.px 20)
]
]
[ [ "color : Css.Color\n"
, "color =\n"
, " Css.rgb " ++ String.fromFloat red ++ " " ++ String.fromFloat green ++ " " ++ String.fromFloat blue
, "\n\n\n"
, "renderedSvg : Svg\n"
, "renderedSvg =\n"
, " " ++ state.renderSvgCode (Tuple.first state.icon) ++ "\n"
, " |> Svg.withColor color\n"
, " |> Svg.withWidth (Css.px " ++ String.fromFloat state.width ++ ")\n"
, " |> Svg.withHeight (Css.px " ++ String.fromFloat state.height ++ ")\n"
, if state.showBorder then
" |> Svg.withCss [ Css.border3 (Css.px 1) Css.solid Colors.gray20 ]\n"
else
""
, if String.isEmpty state.label then
""
else
" |> Svg.withLabel \"" ++ state.label ++ "\"\n"
, " |> Svg.toHtml\n"
]
|> String.join ""
|> Html.text
]
, Tuple.second state.icon
|> Svg.withColor (toCssColor state.color)
|> Svg.withWidth (Css.px state.width)
|> Svg.withHeight (Css.px state.height)
|> (\svg ->
if state.showBorder then
Svg.withCss [ Css.border3 (Css.px 1) Css.solid Colors.gray20 ] svg
else
svg
)
|> (\svg ->
if String.isEmpty state.label then
svg
else
Svg.withLabel state.label svg
)
|> Svg.toHtml
]

170
styleguide-app/Examples/Logo.elm
View File

@ -6,9 +6,10 @@ module Examples.Logo exposing (example, State, Msg)
-}
import Category exposing (Category(..))
import Css
import Example exposing (Example)
import Examples.IconExamples as IconExamples exposing (Group)
import Examples.IconExamples as IconExamples
import Html.Styled as Html
import Html.Styled.Attributes exposing (css)
import Nri.Ui.Colors.V1 as Colors
@ -29,12 +30,13 @@ type alias Msg =
{-| -}
example : Example State Msg
example =
{ moduleName = "Logo"
{ name = "Logo"
, version = 1
, label = "NoRedInk"
, name = "noredink"
, icon = Logo.noredink
, renderSvgCode = \name -> "Logo." ++ name
, categories = [ Icons ]
, keyboardSupport = []
, state = IconExamples.init
, update = IconExamples.update
, subscriptions = \_ -> Sub.none
, preview =
Html.div [ css [ Css.marginBottom (Css.px 8) ] ] [ Svg.toHtml Logo.noredink ]
:: IconExamples.preview
@ -43,87 +45,83 @@ example =
, Logo.cleverC
, Logo.googleG
]
, all = all
, 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)
]
)
]
]
}
|> IconExamples.example
all : List Group
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

55
styleguide-app/Examples/Pennant.elm
View File

@ -6,9 +6,10 @@ module Examples.Pennant exposing (example, State, Msg)
-}
import Category exposing (Category(..))
import Css
import Example exposing (Example)
import Examples.IconExamples as IconExamples exposing (Group)
import Examples.IconExamples as IconExamples
import Nri.Ui.Pennant.V2 as Pennant
@ -25,38 +26,36 @@ type alias Msg =
{-| -}
example : Example State Msg
example =
{ moduleName = "Pennant"
{ name = "Pennant"
, version = 2
, label = "Premium"
, name = "premiumFlag"
, icon = Pennant.premiumFlag
, renderSvgCode = \name -> "Pennant." ++ name
, categories = [ Icons ]
, keyboardSupport = []
, state = IconExamples.init
, update = IconExamples.update
, subscriptions = \_ -> Sub.none
, preview =
IconExamples.preview
[ Pennant.premiumFlag
, Pennant.expiredPremiumFlag
, Pennant.disabledPremiumFlag
]
, all = all
, 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) ]
)
]
]
}
|> IconExamples.example
all : List Group
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) ]
)
]
)
]

54
styleguide-app/Examples/Sprite.elm
View File

@ -6,10 +6,13 @@ module Examples.Sprite exposing (example, State, Msg)
-}
import Category exposing (Category(..))
import Example exposing (Example)
import Examples.IconExamples as IconExamples exposing (Group)
import Examples.IconExamples as IconExamples
import Nri.Ui.Sprite.V1 as Sprite exposing (SpriteId)
import Nri.Ui.Svg.V1 as Svg exposing (Svg)
import Svg.Styled exposing (svg)
import Svg.Styled.Attributes as Attributes
{-| -}
@ -25,36 +28,39 @@ type alias Msg =
{-| -}
example : Example State Msg
example =
{ moduleName = "Sprite"
{ name = "Sprite"
, version = 1
, label = "Bold"
, name = "bold"
, icon = viewSprite Sprite.bold
, renderSvgCode = \name -> "Svg.init \"\" [ Sprite.use Sprite." ++ name ++ " ] "
, preview = IconExamples.preview (List.map (\( a, b, c ) -> b) sprites)
, all = all
, categories = List.singleton Icons
, keyboardSupport = []
, state = IconExamples.init
, 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
]
}
|> IconExamples.example
all : List Group
all =
[ ( "Rich Text Formatting", sprites )
]
sprites : List ( String, Svg, List a )
sprites : List ( String, Svg )
sprites =
[ ( "bold", viewSprite Sprite.bold, [] )
, ( "italic", viewSprite Sprite.italic, [] )
, ( "underline", viewSprite Sprite.underline, [] )
, ( "list", viewSprite Sprite.list, [] )
, ( "link", viewSprite Sprite.link, [] )
, ( "undo", viewSprite Sprite.undo, [] )
, ( "redo", viewSprite Sprite.redo, [] )
[ ( "bold", viewSprite Sprite.bold )
, ( "italic", viewSprite Sprite.italic )
, ( "underline", viewSprite Sprite.underline )
, ( "list", viewSprite Sprite.list )
, ( "link", viewSprite Sprite.link )
, ( "undo", viewSprite Sprite.undo )
, ( "redo", viewSprite Sprite.redo )
]
viewSprite : SpriteId -> Svg
viewSprite id =
Svg.init "" [ Sprite.use id ]
svg
[ Attributes.width "100%"
, Attributes.height "100%"
]
[ Sprite.use id ]
|> Svg.fromHtml

198
styleguide-app/Examples/Svg.elm Normal file
View File

@ -0,0 +1,198 @@
module Examples.Svg exposing (Msg, State, example)
{-|
@docs Msg, State, example
-}
import Category exposing (Category(..))
import Css
import Example exposing (Example)
import Html.Styled as Html
import Html.Styled.Attributes as Attributes
import Html.Styled.Events as Events
import Nri.Ui.Colors.Extra exposing (fromCssColor, toCssColor)
import Nri.Ui.Colors.V1 as Colors
import Nri.Ui.Svg.V1 as Svg
import Nri.Ui.UiIcon.V1 as UiIcon
import SolidColor exposing (SolidColor)
{-| -}
example : Example State Msg
example =
{ name = "Svg"
, version = 1
, categories = [ Icons ]
, keyboardSupport = []
, state = init
, update = update
, subscriptions = \_ -> Sub.none
, preview = []
, view =
\ellieLinkConfig state ->
[ viewSettings state
, viewResults state
]
}
viewSettings : State -> Html.Html Msg
viewSettings state =
Html.div
[ Attributes.css
[ Css.displayFlex
, Css.justifyContent Css.spaceBetween
]
]
[ Html.label []
[ Html.text "Color: "
, Html.input
[ Attributes.type_ "color"
, Attributes.value (SolidColor.toHex state.color)
, Events.onInput (SetColor << SolidColor.fromHex)
]
[]
]
, Html.label []
[ Html.text "Width: "
, Html.input
[ Attributes.type_ "range"
, Attributes.min "0"
, Attributes.max "200"
, Attributes.value (String.fromFloat state.width)
, Events.onInput (SetWidth << String.toFloat)
]
[]
]
, Html.label []
[ Html.text "Height: "
, Html.input
[ Attributes.type_ "range"
, Attributes.min "0"
, Attributes.max "200"
, Attributes.value (String.fromFloat state.height)
, Events.onInput (SetHeight << String.toFloat)
]
[]
]
, Html.label []
[ Html.text "Aria-label: "
, Html.input
[ Attributes.value state.label
, Events.onInput SetLabel
]
[]
]
]
viewResults : State -> Html.Html Msg
viewResults state =
let
( red, green, blue ) =
SolidColor.toRGB state.color
in
Html.div [ Attributes.css [ Css.displayFlex ] ]
[ Html.pre
[ Attributes.css
[ Css.width (Css.px 400)
, Css.marginRight (Css.px 20)
]
]
[ [ "color : Css.Color\n"
, "color =\n"
, " Css.rgb " ++ String.fromFloat red ++ " " ++ String.fromFloat green ++ " " ++ String.fromFloat blue
, "\n\n\n"
, "renderedSvg : Svg\n"
, "renderedSvg =\n"
, " UiIcon.newspaper\n"
, " |> Svg.withColor color\n"
, " |> Svg.withWidth (Css.px " ++ String.fromFloat state.width ++ ")\n"
, " |> Svg.withHeight (Css.px " ++ String.fromFloat state.height ++ ")\n"
, if String.isEmpty state.label then
""
else
" |> Svg.withLabel \"" ++ state.label ++ "\"\n"
, " |> Svg.toHtml\n"
]
|> String.join ""
|> Html.text
]
, Html.div
[ Attributes.css
[ Css.backgroundColor Colors.gray92
, Css.flexGrow (Css.int 2)
]
]
[ UiIcon.newspaper
|> Svg.withColor (toCssColor state.color)
|> Svg.withWidth (Css.px state.width)
|> Svg.withHeight (Css.px state.height)
|> (\svg ->
if String.isEmpty state.label then
svg
else
Svg.withLabel state.label svg
)
|> Svg.toHtml
]
]
{-| -}
type alias State =
{ color : SolidColor
, width : Float
, height : Float
, label : String
}
{-| -}
init : State
init =
{ color = fromCssColor Colors.azure
, width = 30
, height = 30
, label = "Newspaper"
}
{-| -}
type Msg
= SetColor (Result String SolidColor)
| SetWidth (Maybe Float)
| SetHeight (Maybe Float)
| SetLabel String
{-| -}
update : Msg -> State -> ( State, Cmd Msg )
update msg state =
case msg of
SetColor (Ok color) ->
( { state | color = color }
, Cmd.none
)
SetColor (Err err) ->
( state, Cmd.none )
SetWidth (Just width) ->
( { state | width = width }, Cmd.none )
SetWidth Nothing ->
( state, Cmd.none )
SetHeight (Just height) ->
( { state | height = height }, Cmd.none )
SetHeight Nothing ->
( state, Cmd.none )
SetLabel label ->
( { state | label = label }, Cmd.none )

376
styleguide-app/Examples/UiIcon.elm
View File

@ -6,8 +6,9 @@ module Examples.UiIcon exposing (example, State, Msg)
-}
import Category exposing (Category(..))
import Example exposing (Example)
import Examples.IconExamples as IconExamples exposing (Group)
import Examples.IconExamples as IconExamples
import Nri.Ui.UiIcon.V1 as UiIcon
@ -24,12 +25,13 @@ type alias Msg =
{-| -}
example : Example State Msg
example =
{ moduleName = "UiIcon"
{ name = "UiIcon"
, version = 1
, label = "Mastered"
, name = "starFilled"
, icon = UiIcon.starFilled
, renderSvgCode = \name -> "UiIcon." ++ name
, categories = List.singleton Icons
, keyboardSupport = []
, state = IconExamples.init
, update = IconExamples.update
, subscriptions = \_ -> Sub.none
, preview =
IconExamples.preview
[ UiIcon.seeMore
@ -45,199 +47,171 @@ example =
, UiIcon.checkmark
, UiIcon.equals
]
, all = all
, view =
\ellieLinkConfig settings ->
let
viewExampleSection =
IconExamples.view settings
in
[ IconExamples.viewSettings settings
, viewExampleSection "Interface"
[ ( "seeMore", UiIcon.seeMore )
, ( "openClose", UiIcon.openClose )
, ( "download", UiIcon.download )
, ( "sort", UiIcon.sort )
, ( "gear", UiIcon.gear )
]
, viewExampleSection "Archive & Unarchive"
[ ( "archive", UiIcon.archive )
, ( "unarchive", UiIcon.unarchive )
]
, viewExampleSection "Media in Circles"
[ ( "playInCircle", UiIcon.playInCircle )
, ( "pauseInCircle", UiIcon.pauseInCircle )
, ( "stopInCircle", UiIcon.stopInCircle )
]
, viewExampleSection "Media"
[ ( "play", UiIcon.play )
, ( "skip", UiIcon.skip )
]
, viewExampleSection "Actions"
[ ( "share", UiIcon.share )
, ( "preview", UiIcon.preview )
, ( "activity", UiIcon.activity )
, ( "copyToClipboard", UiIcon.copyToClipboard )
, ( "gift", UiIcon.gift )
, ( "openInNewTab", UiIcon.openInNewTab )
, ( "sync", UiIcon.sync )
]
, viewExampleSection "Guidance"
[ ( "footsteps", UiIcon.footsteps )
, ( "help", UiIcon.help )
, ( "checklist", UiIcon.checklist )
, ( "checklistComplete", UiIcon.checklistComplete )
]
, viewExampleSection "Bulbs"
[ ( "sparkleBulb", UiIcon.sparkleBulb )
, ( "baldBulb", UiIcon.baldBulb )
]
, viewExampleSection "Science & Measurement"
[ ( "compass", UiIcon.compass )
, ( "speedometer", UiIcon.speedometer )
, ( "performance", UiIcon.performance )
, ( "microscope", UiIcon.microscope )
, ( "scale", UiIcon.scale )
]
, viewExampleSection "Humans & Class"
[ ( "person", UiIcon.person )
, ( "couple", UiIcon.couple )
, ( "class", UiIcon.class )
, ( "leaderboard", UiIcon.leaderboard )
, ( "graduateCap", UiIcon.graduateCap )
]
, viewExampleSection "Time"
[ ( "emptyCalendar", UiIcon.emptyCalendar )
, ( "calendar", UiIcon.calendar )
, ( "clock", UiIcon.clock )
]
, viewExampleSection "Texts"
[ ( "missingDocument", UiIcon.missingDocument )
, ( "document", UiIcon.document )
, ( "documents", UiIcon.documents )
, ( "newspaper", UiIcon.newspaper )
, ( "openBook", UiIcon.openBook )
, ( "openBooks", UiIcon.openBooks )
]
, viewExampleSection "Communication"
[ ( "speechBalloon", UiIcon.speechBalloon )
, ( "mail", UiIcon.mail )
]
, viewExampleSection "Writing Utensils"
[ ( "edit", UiIcon.edit )
, ( "pen", UiIcon.pen )
, ( "highlighter", UiIcon.highlighter )
]
, viewExampleSection "Arrows"
[ ( "arrowTop", UiIcon.arrowTop )
, ( "arrowRight", UiIcon.arrowRight )
, ( "arrowDown", UiIcon.arrowDown )
, ( "arrowLeft", UiIcon.arrowLeft )
, ( "arrowPointingRight", UiIcon.arrowPointingRight )
, ( "arrowPointingRightThick", UiIcon.arrowPointingRightThick )
, ( "sortArrow", UiIcon.sortArrow )
, ( "sortArrowDown", UiIcon.sortArrowDown )
]
, viewExampleSection "Checks"
[ ( "checkmark", UiIcon.checkmark )
, ( "checkmarkInCircle", UiIcon.checkmarkInCircle )
, ( "checkmarkInCircleInverse", UiIcon.checkmarkInCircleInverse )
, ( "emptyCircle", UiIcon.emptyCircle )
]
, viewExampleSection "Xs"
[ ( "x", UiIcon.x )
, ( "xInCircle", UiIcon.xInCircle )
]
, viewExampleSection "Bangs"
[ ( "attention", UiIcon.attention )
, ( "exclamation", UiIcon.exclamation )
]
, viewExampleSection "Math"
[ ( "equals", UiIcon.equals )
, ( "plus", UiIcon.plus )
, ( "null", UiIcon.null )
]
, viewExampleSection "Notifs"
[ ( "flag", UiIcon.flag )
, ( "star", UiIcon.star )
, ( "starFilled", UiIcon.starFilled )
, ( "starOutline", UiIcon.starOutline )
]
, viewExampleSection "Badges & Celebration"
[ ( "badge", UiIcon.badge )
, ( "tada", UiIcon.tada )
]
, viewExampleSection "Lock & Key"
[ ( "key", UiIcon.key )
, ( "lock", UiIcon.lock )
, ( "premiumLock", UiIcon.premiumLock )
]
, viewExampleSection "Tips & Tricks"
[ ( "hat", UiIcon.hat )
, ( "keychain", UiIcon.keychain )
]
, viewExampleSection "Growth"
[ ( "sprout", UiIcon.sprout )
, ( "sapling", UiIcon.sapling )
, ( "tree", UiIcon.tree )
]
, viewExampleSection "Rich Text Formatting"
[ ( "bold", UiIcon.bold )
, ( "italic", UiIcon.italic )
, ( "underline", UiIcon.underline )
, ( "list", UiIcon.list )
, ( "link", UiIcon.link )
, ( "undo", UiIcon.undo )
, ( "redo", UiIcon.redo )
]
, viewExampleSection "Punctuation"
[ ( "openQuotationMark", UiIcon.openQuotationMark )
, ( "closeQuotationMark", UiIcon.closeQuotationMark )
]
, viewExampleSection "Navigation"
[ ( "home", UiIcon.home )
, ( "library", UiIcon.library )
]
, viewExampleSection "Search"
[ ( "search", UiIcon.search )
, ( "searchInCircle", UiIcon.searchInCicle )
]
, viewExampleSection "School Category"
[ ( "school", UiIcon.school )
, ( "highSchool", UiIcon.highSchool )
, ( "company", UiIcon.company )
, ( "homeSchool", UiIcon.homeSchool )
]
, viewExampleSection "Location"
[ ( "flagUs", UiIcon.flagUs )
, ( "globe", UiIcon.globe )
]
]
}
|> IconExamples.example
all : List Group
all =
[ ( "Interface"
, [ ( "seeMore", UiIcon.seeMore, [] )
, ( "openClose", UiIcon.openClose, [] )
, ( "download", UiIcon.download, [] )
, ( "sort", UiIcon.sort, [] )
, ( "gear", UiIcon.gear, [] )
]
)
, ( "Archive & Unarchive"
, [ ( "archive", UiIcon.archive, [] )
, ( "unarchive", UiIcon.unarchive, [] )
]
)
, ( "Media in Circles"
, [ ( "playInCircle", UiIcon.playInCircle, [] )
, ( "pauseInCircle", UiIcon.pauseInCircle, [] )
, ( "stopInCircle", UiIcon.stopInCircle, [] )
]
)
, ( "Media"
, [ ( "play", UiIcon.play, [] )
, ( "skip", UiIcon.skip, [] )
]
)
, ( "Actions"
, [ ( "share", UiIcon.share, [] )
, ( "preview", UiIcon.preview, [] )
, ( "activity", UiIcon.activity, [] )
, ( "copyToClipboard", UiIcon.copyToClipboard, [] )
, ( "gift", UiIcon.gift, [] )
, ( "openInNewTab", UiIcon.openInNewTab, [] )
, ( "sync", UiIcon.sync, [] )
]
)
, ( "Guidance"
, [ ( "footsteps", UiIcon.footsteps, [] )
, ( "help", UiIcon.help, [] )
, ( "checklist", UiIcon.checklist, [] )
, ( "checklistComplete", UiIcon.checklistComplete, [] )
]
)
, ( "Bulbs"
, [ ( "sparkleBulb", UiIcon.sparkleBulb, [] )
, ( "baldBulb", UiIcon.baldBulb, [] )
]
)
, ( "Science & Measurement"
, [ ( "compass", UiIcon.compass, [] )
, ( "speedometer", UiIcon.speedometer, [] )
, ( "performance", UiIcon.performance, [] )
, ( "microscope", UiIcon.microscope, [] )
, ( "scale", UiIcon.scale, [] )
]
)
, ( "Humans & Class"
, [ ( "person", UiIcon.person, [] )
, ( "couple", UiIcon.couple, [] )
, ( "class", UiIcon.class, [] )
, ( "leaderboard", UiIcon.leaderboard, [] )
, ( "graduateCap", UiIcon.graduateCap, [] )
]
)
, ( "Time"
, [ ( "emptyCalendar", UiIcon.emptyCalendar, [] )
, ( "calendar", UiIcon.calendar, [] )
, ( "clock", UiIcon.clock, [] )
]
)
, ( "Texts"
, [ ( "missingDocument", UiIcon.missingDocument, [] )
, ( "document", UiIcon.document, [] )
, ( "documents", UiIcon.documents, [] )
, ( "newspaper", UiIcon.newspaper, [] )
, ( "openBook", UiIcon.openBook, [] )
, ( "openBooks", UiIcon.openBooks, [] )
]
)
, ( "Communication"
, [ ( "speechBalloon", UiIcon.speechBalloon, [] )
, ( "mail", UiIcon.mail, [] )
]
)
, ( "Writing Utensils"
, [ ( "edit", UiIcon.edit, [] )
, ( "pen", UiIcon.pen, [] )
, ( "highlighter", UiIcon.highlighter, [] )
]
)
, ( "Arrows"
, [ ( "arrowTop", UiIcon.arrowTop, [] )
, ( "arrowRight", UiIcon.arrowRight, [] )
, ( "arrowDown", UiIcon.arrowDown, [] )
, ( "arrowLeft", UiIcon.arrowLeft, [] )
, ( "arrowPointingRight", UiIcon.arrowPointingRight, [] )
, ( "arrowPointingRightThick", UiIcon.arrowPointingRightThick, [] )
, ( "sortArrow", UiIcon.sortArrow, [] )
, ( "sortArrowDown", UiIcon.sortArrowDown, [] )
]
)
, ( "Checks"
, [ ( "checkmark", UiIcon.checkmark, [] )
, ( "checkmarkInCircle", UiIcon.checkmarkInCircle, [] )
, ( "checkmarkInCircleInverse", UiIcon.checkmarkInCircleInverse, [] )
, ( "emptyCircle", UiIcon.emptyCircle, [] )
]
)
, ( "Xs"
, [ ( "x", UiIcon.x, [] )
, ( "xInCircle", UiIcon.xInCircle, [] )
]
)
, ( "Bangs"
, [ ( "attention", UiIcon.attention, [] )
, ( "exclamation", UiIcon.exclamation, [] )
]
)
, ( "Math"
, [ ( "equals", UiIcon.equals, [] )
, ( "plus", UiIcon.plus, [] )
, ( "null", UiIcon.null, [] )
]
)
, ( "Notifs"
, [ ( "flag", UiIcon.flag, [] )
, ( "star", UiIcon.star, [] )
, ( "starFilled", UiIcon.starFilled, [] )
, ( "starOutline", UiIcon.starOutline, [] )
]
)
, ( "Badges & Celebration"
, [ ( "badge", UiIcon.badge, [] )
, ( "tada", UiIcon.tada, [] )
]
)
, ( "Lock & Key"
, [ ( "key", UiIcon.key, [] )
, ( "lock", UiIcon.lock, [] )
, ( "premiumLock", UiIcon.premiumLock, [] )
]
)
, ( "Tips & Tricks"
, [ ( "hat", UiIcon.hat, [] )
, ( "keychain", UiIcon.keychain, [] )
]
)
, ( "Growth"
, [ ( "sprout", UiIcon.sprout, [] )
, ( "sapling", UiIcon.sapling, [] )
, ( "tree", UiIcon.tree, [] )
]
)
, ( "Rich Text Formatting"
, [ ( "bold", UiIcon.bold, [] )
, ( "italic", UiIcon.italic, [] )
, ( "underline", UiIcon.underline, [] )
, ( "list", UiIcon.list, [] )
, ( "link", UiIcon.link, [] )
, ( "undo", UiIcon.undo, [] )
, ( "redo", UiIcon.redo, [] )
]
)
, ( "Punctuation"
, [ ( "openQuotationMark", UiIcon.openQuotationMark, [] )
, ( "closeQuotationMark", UiIcon.closeQuotationMark, [] )
]
)
, ( "Navigation"
, [ ( "home", UiIcon.home, [] )
, ( "library", UiIcon.library, [] )
]
)
, ( "Search"
, [ ( "search", UiIcon.search, [] )
, ( "searchInCircle", UiIcon.searchInCicle, [] )
]
)
, ( "School Category"
, [ ( "school", UiIcon.school, [] )
, ( "highSchool", UiIcon.highSchool, [] )
, ( "company", UiIcon.company, [] )
, ( "homeSchool", UiIcon.homeSchool, [] )
]
)
, ( "Location"
, [ ( "flagUs", UiIcon.flagUs, [] )
, ( "globe", UiIcon.globe, [] )
]
)
]