From 61024704f53fc5466163ee50e5390efba210a0d3 Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Tue, 31 Mar 2020 10:56:44 -0700 Subject: [PATCH 01/17] NriModules -> Examples --- styleguide-app/{NriModules.elm => Examples.elm} | 2 +- styleguide-app/Main.elm | 10 +++++----- 2 files changed, 6 insertions(+), 6 deletions(-) rename styleguide-app/{NriModules.elm => Examples.elm} (99%) diff --git a/styleguide-app/NriModules.elm b/styleguide-app/Examples.elm similarity index 99% rename from styleguide-app/NriModules.elm rename to styleguide-app/Examples.elm index cc14ffaf..820a60a5 100644 --- a/styleguide-app/NriModules.elm +++ b/styleguide-app/Examples.elm @@ -1,4 +1,4 @@ -module NriModules exposing (ModuleStates, Msg, init, nriThemedModules, subscriptions, update) +module Examples exposing (ModuleStates, Msg, init, nriThemedModules, subscriptions, update) import Category exposing (Category(..)) import Examples.Accordion diff --git a/styleguide-app/Main.elm b/styleguide-app/Main.elm index 31d4a035..9a6b31f2 100644 --- a/styleguide-app/Main.elm +++ b/styleguide-app/Main.elm @@ -5,6 +5,7 @@ import Browser.Dom import Browser.Navigation exposing (Key) import Category import Css exposing (..) +import Examples exposing (ModuleStates, nriThemedModules) import Html as RootHtml import Html.Attributes import Html.Styled as Html exposing (Html, img) @@ -15,7 +16,6 @@ import Nri.Ui.Colors.V1 as Colors import Nri.Ui.Css.VendorPrefixed as VendorPrefixed import Nri.Ui.Fonts.V1 as Fonts import Nri.Ui.Heading.V2 as Heading -import NriModules as NriModules exposing (ModuleStates, nriThemedModules) import Routes as Routes exposing (Route(..)) import Sort.Set as Set import Task @@ -45,7 +45,7 @@ type alias Model = init : () -> Url -> Key -> ( Model, Cmd Msg ) init () url key = ( { route = Routes.fromLocation url - , moduleStates = NriModules.init + , moduleStates = Examples.init , navigationKey = key } , Cmd.none @@ -53,7 +53,7 @@ init () url key = type Msg - = UpdateModuleStates NriModules.Msg + = UpdateModuleStates Examples.Msg | OnUrlRequest Browser.UrlRequest | OnUrlChange Url | SkipToMainContent @@ -66,7 +66,7 @@ update action model = UpdateModuleStates msg -> let ( moduleStates, cmd ) = - NriModules.update msg model.moduleStates + Examples.update msg model.moduleStates in ( { model | moduleStates = moduleStates } , Cmd.map UpdateModuleStates cmd @@ -94,7 +94,7 @@ update action model = subscriptions : Model -> Sub Msg subscriptions model = - Sub.map UpdateModuleStates (NriModules.subscriptions model.moduleStates) + Sub.map UpdateModuleStates (Examples.subscriptions model.moduleStates) view : Model -> Document Msg From 72daef5d2486a504dc83c3eea74991a36dc91728 Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Tue, 31 Mar 2020 11:31:14 -0700 Subject: [PATCH 02/17] Begin refactoring to make adding new modules easier --- styleguide-app/Examples.elm | 574 ++++++++++++++------------ styleguide-app/Examples/Accordion.elm | 183 ++++---- styleguide-app/Main.elm | 8 +- 3 files changed, 413 insertions(+), 352 deletions(-) diff --git a/styleguide-app/Examples.elm b/styleguide-app/Examples.elm index 820a60a5..1510c851 100644 --- a/styleguide-app/Examples.elm +++ b/styleguide-app/Examples.elm @@ -1,7 +1,7 @@ -module Examples exposing (ModuleStates, Msg, init, nriThemedModules, subscriptions, update) +module Examples exposing (ModuleStates, Msg, init, nriThemedModules, subscriptions, update, view) import Category exposing (Category(..)) -import Examples.Accordion +import Examples.Accordion as Accordion import Examples.Alert import Examples.AssignmentIcon import Examples.BannerAlert @@ -35,155 +35,277 @@ import Examples.TextArea as TextAreaExample import Examples.TextInput as TextInputExample import Examples.Tooltip import Examples.UiIcon +import Html.Styled as Html exposing (Html) import ModuleExample exposing (ModuleExample) import Sort.Set as Set exposing (Set) +type alias Example state msg = + { name : String + , state : state + , update : msg -> state -> ( state, Cmd msg ) + , view : state -> List (Html msg) + , categories : List Category + } + + type alias ModuleStates = - { accordionExampleState : Examples.Accordion.State - , buttonExampleState : Examples.Button.State Msg - , bannerAlertExampleState : Examples.BannerAlert.State - , clickableTextExampleState : Examples.ClickableText.State - , checkboxExampleState : Examples.Checkbox.State - , dropdownState : Examples.Dropdown.State Examples.Dropdown.Value - , segmentedControlState : Examples.SegmentedControl.State - , selectState : Examples.Select.State - , tableExampleState : Examples.Table.State - , textAreaExampleState : TextAreaExample.State - , textInputExampleState : TextInputExample.State - , disclosureIndicatorExampleState : Examples.DisclosureIndicator.State - , modalExampleState : Examples.Modal.State - , slideModalExampleState : Examples.SlideModal.State - , slideExampleState : Examples.Slide.State - , sortableTableState : Examples.SortableTable.State - , svgState : Examples.Svg.State - , clickableSvgState : Examples.ClickableSvg.State - , tabsExampleState : Examples.Tabs.Tab - , tooltipExampleState : Examples.Tooltip.State + { accordion : Example Accordion.State Accordion.Msg + + --, buttonExample : { state : Examples.Button.State Msg + -- , update :Button.State Msg -> Button.State Msg -> (Button.State Msg, Cmd Button.State Msg) } + --, bannerAlertExample : { state : Examples.BannerAlert.State + -- , update :Examples.BannerAlert.Msg -> Examples.BannerAlert.State -> (Examples.BannerAlert.State, Cmd Examples.BannerAlert.Msg) } + --, clickableTextExample : { state : Examples.ClickableText.State + -- , update :Examples.ClickableText.Msg -> Examples.ClickableText.State -> (Examples.ClickableText.State, Cmd Examples.ClickableText.Msg) } + --, checkboxExample : { state : Examples.Checkbox.State + -- , update :Examples.Checkbox.Msg -> Examples.Checkbox.State -> (Examples.Checkbox.State, Cmd Examples.Checkbox.Msg) } + --, dropdowe : { state : Examples.Dropdown.State Examples.Dropdown.Value + -- , update :Examples.Dropdown.Msg -> Examples.Dropdown.Value -> (Examples.Dropdown.Value, Cmd Examples.Dropdown.Msg) } + --, segmentedControe : { state : Examples.SegmentedControl.State + -- , update :Examples.SegmentedControl.Msg -> Examples.SegmentedControl.State -> (Examples.SegmentedControl.State, Cmd Examples.SegmentedControl.Msg) } + --, selece : { state : Examples.Select.State + -- , update :Examples.Select.Msg -> Examples.Select.State -> (Examples.Select.State, Cmd Examples.Select.Msg) } + --, tableExample : { state : Examples.Table.State + -- , update :Examples.Table.Msg -> Examples.Table.State -> (Examples.Table.State, Cmd Examples.Table.Msg) } + --, textAreaExample : { state : TextAreaExample.State + -- , update : TextAreaExample.Msg -> :: TextAreaExample.State -> (: TextAreaExample.State, Cmd : TextAreaExample.Msg) } + --, textInputExample : { state : TextInputExample.State + -- , update : TextInputExample.Msg -> :: TextInputExample.State -> (: TextInputExample.State, Cmd : TextInputExample.Msg) } + --, disclosureIndicatorExample : { state : Examples.DisclosureIndicator.State + -- , update :Examples.DisclosureIndicator.Msg -> Examples.DisclosureIndicator.State -> (Examples.DisclosureIndicator.State, Cmd Examples.DisclosureIndicator.Msg) } + --, modalExample : { state : Examples.Modal.State + -- , update :Examples.Modal.Msg -> Examples.Modal.State -> (Examples.Modal.State, Cmd Examples.Modal.Msg) } + --, slideModalExample : { state : Examples.SlideModal.State + -- , update :Examples.SlideModal.Msg -> Examples.SlideModal.State -> (Examples.SlideModal.State, Cmd Examples.SlideModal.Msg) } + --, slideExample : { state : Examples.Slide.State + -- , update :Examples.Slide.Msg -> Examples.Slide.State -> (Examples.Slide.State, Cmd Examples.Slide.Msg) } + --, sortableTable : { state : Examples.SortableTable.State + -- , update :Examples.SortableTable.Msg -> Examples.SortableTable.State -> (Examples.SortableTable.State, Cmd Examples.SortableTable.Msg) } + --, sve : { state : Examples.Svg.State + -- , update :Examples.Svg.Msg -> Examples.Svg.State -> (Examples.Svg.State, Cmd Examples.Svg.Msg) } + --, clickableSve : { state : Examples.ClickableSvg.State + -- , update :Examples.ClickableSvg.Msg -> Examples.ClickableSvg.State -> (Examples.ClickableSvg.State, Cmd Examples.ClickableSvg.Msg) } + --, tabsExample : { state : Examples.Tabs.Tab + -- , update :Examples.Tabs.Msg -> Examples.Tabs.Tab -> (Examples.Tabs.Tab, Cmd Examples.Tabs.Msg) } + --, tooltipExample : { state : Examples.Tooltip.State + -- , update :Examples.Tooltip.Msg -> Examples.Tooltip.State -> (Examples.Tooltip.State, Cmd Examples.Tooltip.Msg) } } init : ModuleStates init = - { accordionExampleState = Examples.Accordion.init - , buttonExampleState = Examples.Button.init - , bannerAlertExampleState = Examples.BannerAlert.init - , clickableTextExampleState = Examples.ClickableText.init - , checkboxExampleState = Examples.Checkbox.init - , dropdownState = Examples.Dropdown.init - , segmentedControlState = Examples.SegmentedControl.init - , selectState = Examples.Select.init - , tableExampleState = Examples.Table.init - , textAreaExampleState = TextAreaExample.init - , textInputExampleState = TextInputExample.init - , disclosureIndicatorExampleState = Examples.DisclosureIndicator.init - , modalExampleState = Examples.Modal.init - , slideModalExampleState = Examples.SlideModal.init - , slideExampleState = Examples.Slide.init - , sortableTableState = Examples.SortableTable.init - , svgState = Examples.Svg.init - , clickableSvgState = Examples.ClickableSvg.init - , tabsExampleState = Examples.Tabs.First - , tooltipExampleState = Examples.Tooltip.init + { accordion = Accordion.example_ + + --, buttonExample = { state = Examples.Button.init, update = Examples.Button.init } + --, bannerAlertExample = { state = Examples.BannerAlert.init, update = Examples.BannerAlert.init } + --, clickableTextExample = { state = Examples.ClickableText.init, update = Examples.ClickableText.init } + --, checkboxExample = { state = Examples.Checkbox.init, update = Examples.Checkbox.init } + --, dropdown = { state = Examples.Dropdown.init, update = Examples.Dropdown.init } + --, segmentedControl = { state = Examples.SegmentedControl.init, update = Examples.SegmentedControl.init } + --, select = { state = Examples.Select.init, update = Examples.Select.init } + --, tableExample = { state = Examples.Table.init, update = Examples.Table.init } + --, textAreaExample = { state = TextAreaExample.init, update = = TextAreaExample.init } + --, textInputExample = { state = TextInputExample.init, update = = TextInputExample.init } + --, disclosureIndicatorExample = { state = Examples.DisclosureIndicator.init, update = Examples.DisclosureIndicator.init } + --, modalExample = { state = Examples.Modal.init, update = Examples.Modal.init } + --, slideModalExample = { state = Examples.SlideModal.init, update = Examples.SlideModal.init } + --, slideExample = { state = Examples.Slide.init, update = Examples.Slide.init } + --, sortableTable = { state = Examples.SortableTable.init, update = Examples.SortableTable.init } + --, svg = { state = Examples.Svg.init, update = Examples.Svg.init } + --, clickableSvg = { state = Examples.ClickableSvg.init, update = Examples.ClickableSvg.init } + --, tabsExample = { state = Examples.Tabs.First, update = Examples.Tabs.First } + --, tooltipExample = { state = Examples.Tooltip.init, update = Examples.Tooltip.init } } type Msg - = AccordionExampleMsg Examples.Accordion.Msg - | ButtonExampleMsg (Examples.Button.Msg Msg) - | BannerAlertExampleMsg Examples.BannerAlert.Msg - | ClickableTextExampleMsg Examples.ClickableText.Msg - | CheckboxExampleMsg Examples.Checkbox.Msg - | DropdownMsg Examples.Dropdown.Msg - | SegmentedControlMsg Examples.SegmentedControl.Msg - | SelectMsg Examples.Select.Msg + = ComponentMsg (ModuleStates -> Example Accordion.State Accordion.Msg) (Example Accordion.State Accordion.Msg -> ModuleStates -> ModuleStates) Accordion.Msg + --| ButtonExampleMsg (Examples.Button.Msg Msg) + --| BannerAlertExampleMsg Examples.BannerAlert.Msg + --| ClickableTextExampleMsg Examples.ClickableText.Msg + --| CheckboxExampleMsg Examples.Checkbox.Msg + --| DropdownMsg Examples.Dropdown.Msg + --| SegmentedControlMsg Examples.SegmentedControl.Msg + --| SelectMsg Examples.Select.Msg + --| TableExampleMsg Examples.Table.Msg + --| TextAreaExampleMsg TextAreaExample.Msg + --| TextInputExampleMsg TextInputExample.Msg + --| DisclosureIndicatorExampleMsg Examples.DisclosureIndicator.Msg + --| ModalExampleMsg Examples.Modal.Msg + --| SlideModalExampleMsg Examples.SlideModal.Msg + --| SlideExampleMsg Examples.Slide.Msg + --| SortableTableMsg Examples.SortableTable.Msg + --| SvgMsg Examples.Svg.Msg + --| ClickableSvgMsg Examples.ClickableSvg.Msg + --| TabsExampleMsg Examples.Tabs.Tab + --| TooltipExampleMsg Examples.Tooltip.Msg | ShowItWorked String String - | TableExampleMsg Examples.Table.Msg - | TextAreaExampleMsg TextAreaExample.Msg - | TextInputExampleMsg TextInputExample.Msg - | DisclosureIndicatorExampleMsg Examples.DisclosureIndicator.Msg - | ModalExampleMsg Examples.Modal.Msg - | SlideModalExampleMsg Examples.SlideModal.Msg - | SlideExampleMsg Examples.Slide.Msg - | SortableTableMsg Examples.SortableTable.Msg - | SvgMsg Examples.Svg.Msg - | ClickableSvgMsg Examples.ClickableSvg.Msg - | TabsExampleMsg Examples.Tabs.Tab - | TooltipExampleMsg Examples.Tooltip.Msg | NoOp update : Msg -> ModuleStates -> ( ModuleStates, Cmd Msg ) update outsideMsg moduleStates = case outsideMsg of - AccordionExampleMsg msg -> - ( { moduleStates - | accordionExampleState = - Examples.Accordion.update msg moduleStates.accordionExampleState - } - , Cmd.none - ) - - ButtonExampleMsg msg -> + ComponentMsg accessor updater msg -> let - ( buttonExampleState, cmd ) = - Examples.Button.update msg moduleStates.buttonExampleState + module_ = + accessor moduleStates + + ( newState, cmd ) = + module_.update msg module_.state in - ( { moduleStates | buttonExampleState = buttonExampleState } - , Cmd.map ButtonExampleMsg cmd - ) - - BannerAlertExampleMsg msg -> - ( { moduleStates - | bannerAlertExampleState = - Examples.BannerAlert.update msg moduleStates.bannerAlertExampleState - } - , Cmd.none - ) - - ClickableTextExampleMsg msg -> - let - ( clickableTextExampleState, cmd ) = - Examples.ClickableText.update msg moduleStates.clickableTextExampleState - in - ( { moduleStates | clickableTextExampleState = clickableTextExampleState } - , Cmd.map ClickableTextExampleMsg cmd - ) - - CheckboxExampleMsg msg -> - let - ( checkboxExampleState, cmd ) = - Examples.Checkbox.update msg moduleStates.checkboxExampleState - in - ( { moduleStates | checkboxExampleState = checkboxExampleState }, Cmd.map CheckboxExampleMsg cmd ) - - DropdownMsg msg -> - let - ( dropdownState, cmd ) = - Examples.Dropdown.update msg moduleStates.dropdownState - in - ( { moduleStates | dropdownState = dropdownState } - , Cmd.map DropdownMsg cmd - ) - - SegmentedControlMsg msg -> - let - ( segmentedControlState, cmd ) = - Examples.SegmentedControl.update msg moduleStates.segmentedControlState - in - ( { moduleStates | segmentedControlState = segmentedControlState } - , Cmd.map SegmentedControlMsg cmd - ) - - SelectMsg msg -> - let - ( selectState, cmd ) = - Examples.Select.update msg moduleStates.selectState - in - ( { moduleStates | selectState = selectState } - , Cmd.map SelectMsg cmd + ( updater { module_ | state = newState } moduleStates + , Cmd.map (ComponentMsg accessor updater) cmd ) + --ButtonExampleMsg msg -> + -- let + -- ( buttonExampleState, cmd ) = + -- Examples.Button.update msg moduleStates.buttonExampleState + -- in + -- ( { moduleStates | buttonExampleState = buttonExampleState } + -- , Cmd.map ButtonExampleMsg cmd + -- ) + --BannerAlertExampleMsg msg -> + -- ( { moduleStates + -- | bannerAlertExampleState = + -- Examples.BannerAlert.update msg moduleStates.bannerAlertExampleState + -- } + -- , Cmd.none + -- ) + --ClickableTextExampleMsg msg -> + -- let + -- ( clickableTextExampleState, cmd ) = + -- Examples.ClickableText.update msg moduleStates.clickableTextExampleState + -- in + -- ( { moduleStates | clickableTextExampleState = clickableTextExampleState } + -- , Cmd.map ClickableTextExampleMsg cmd + -- ) + --CheckboxExampleMsg msg -> + -- let + -- ( checkboxExampleState, cmd ) = + -- Examples.Checkbox.update msg moduleStates.checkboxExampleState + -- in + -- ( { moduleStates | checkboxExampleState = checkboxExampleState }, Cmd.map CheckboxExampleMsg cmd ) + --DropdownMsg msg -> + -- let + -- ( dropdownState, cmd ) = + -- Examples.Dropdown.update msg moduleStates.dropdownState + -- in + -- ( { moduleStates | dropdownState = dropdownState } + -- , Cmd.map DropdownMsg cmd + -- ) + --SegmentedControlMsg msg -> + -- let + -- ( segmentedControlState, cmd ) = + -- Examples.SegmentedControl.update msg moduleStates.segmentedControlState + -- in + -- ( { moduleStates | segmentedControlState = segmentedControlState } + -- , Cmd.map SegmentedControlMsg cmd + -- ) + --SelectMsg msg -> + -- let + -- ( selectState, cmd ) = + -- Examples.Select.update msg moduleStates.selectState + -- in + -- ( { moduleStates | selectState = selectState } + -- , Cmd.map SelectMsg cmd + -- ) + --SvgMsg msg -> + -- let + -- ( svgState, cmd ) = + -- Examples.Svg.update msg moduleStates.svgState + -- in + -- ( { moduleStates | svgState = svgState } + -- , Cmd.map SvgMsg cmd + -- ) + --ClickableSvgMsg msg -> + -- let + -- ( clickableSvgState, cmd ) = + -- Examples.ClickableSvg.update msg moduleStates.clickableSvgState + -- in + -- ( { moduleStates | clickableSvgState = clickableSvgState } + -- , Cmd.map ClickableSvgMsg cmd + -- ) + --TableExampleMsg msg -> + -- let + -- ( tableExampleState, cmd ) = + -- Examples.Table.update msg moduleStates.tableExampleState + -- in + -- ( { moduleStates | tableExampleState = tableExampleState } + -- , Cmd.map TableExampleMsg cmd + -- ) + --TextAreaExampleMsg msg -> + -- let + -- ( textAreaExampleState, cmd ) = + -- TextAreaExample.update msg moduleStates.textAreaExampleState + -- in + -- ( { moduleStates | textAreaExampleState = textAreaExampleState } + -- , Cmd.map TextAreaExampleMsg cmd + -- ) + --TextInputExampleMsg msg -> + -- let + -- ( textInputExampleState, cmd ) = + -- TextInputExample.update msg moduleStates.textInputExampleState + -- in + -- ( { moduleStates | textInputExampleState = textInputExampleState } + -- , Cmd.map TextInputExampleMsg cmd + -- ) + --DisclosureIndicatorExampleMsg msg -> + -- let + -- ( disclosureIndicatorExampleState, cmd ) = + -- Examples.DisclosureIndicator.update msg moduleStates.disclosureIndicatorExampleState + -- in + -- ( { moduleStates | disclosureIndicatorExampleState = disclosureIndicatorExampleState } + -- , Cmd.map DisclosureIndicatorExampleMsg cmd + -- ) + --ModalExampleMsg msg -> + -- let + -- ( modalExampleState, cmd ) = + -- Examples.Modal.update msg moduleStates.modalExampleState + -- in + -- ( { moduleStates | modalExampleState = modalExampleState } + -- , Cmd.map ModalExampleMsg cmd + -- ) + --SlideModalExampleMsg msg -> + -- let + -- ( slideModalExampleState, cmd ) = + -- Examples.SlideModal.update msg moduleStates.slideModalExampleState + -- in + -- ( { moduleStates | slideModalExampleState = slideModalExampleState } + -- , Cmd.map SlideModalExampleMsg cmd + -- ) + --SlideExampleMsg msg -> + -- let + -- ( slideExampleState, cmd ) = + -- Examples.Slide.update msg moduleStates.slideExampleState + -- in + -- ( { moduleStates | slideExampleState = slideExampleState } + -- , Cmd.map SlideExampleMsg cmd + -- ) + --SortableTableMsg msg -> + -- let + -- ( sortableTableState, cmd ) = + -- Examples.SortableTable.update msg moduleStates.sortableTableState + -- in + -- ( { moduleStates | sortableTableState = sortableTableState } + -- , Cmd.map SortableTableMsg cmd + -- ) + --TabsExampleMsg tab -> + -- ( { moduleStates | tabsExampleState = tab } + -- , Cmd.none + -- ) + --TooltipExampleMsg msg -> + -- let + -- newState = + -- Examples.Tooltip.update msg moduleStates.tooltipExampleState + -- in + -- ( { moduleStates + -- | tooltipExampleState = newState + -- } + -- , Cmd.none + -- ) ShowItWorked group message -> let _ = @@ -191,112 +313,6 @@ update outsideMsg moduleStates = in ( moduleStates, Cmd.none ) - SvgMsg msg -> - let - ( svgState, cmd ) = - Examples.Svg.update msg moduleStates.svgState - in - ( { moduleStates | svgState = svgState } - , Cmd.map SvgMsg cmd - ) - - ClickableSvgMsg msg -> - let - ( clickableSvgState, cmd ) = - Examples.ClickableSvg.update msg moduleStates.clickableSvgState - in - ( { moduleStates | clickableSvgState = clickableSvgState } - , Cmd.map ClickableSvgMsg cmd - ) - - TableExampleMsg msg -> - let - ( tableExampleState, cmd ) = - Examples.Table.update msg moduleStates.tableExampleState - in - ( { moduleStates | tableExampleState = tableExampleState } - , Cmd.map TableExampleMsg cmd - ) - - TextAreaExampleMsg msg -> - let - ( textAreaExampleState, cmd ) = - TextAreaExample.update msg moduleStates.textAreaExampleState - in - ( { moduleStates | textAreaExampleState = textAreaExampleState } - , Cmd.map TextAreaExampleMsg cmd - ) - - TextInputExampleMsg msg -> - let - ( textInputExampleState, cmd ) = - TextInputExample.update msg moduleStates.textInputExampleState - in - ( { moduleStates | textInputExampleState = textInputExampleState } - , Cmd.map TextInputExampleMsg cmd - ) - - DisclosureIndicatorExampleMsg msg -> - let - ( disclosureIndicatorExampleState, cmd ) = - Examples.DisclosureIndicator.update msg moduleStates.disclosureIndicatorExampleState - in - ( { moduleStates | disclosureIndicatorExampleState = disclosureIndicatorExampleState } - , Cmd.map DisclosureIndicatorExampleMsg cmd - ) - - ModalExampleMsg msg -> - let - ( modalExampleState, cmd ) = - Examples.Modal.update msg moduleStates.modalExampleState - in - ( { moduleStates | modalExampleState = modalExampleState } - , Cmd.map ModalExampleMsg cmd - ) - - SlideModalExampleMsg msg -> - let - ( slideModalExampleState, cmd ) = - Examples.SlideModal.update msg moduleStates.slideModalExampleState - in - ( { moduleStates | slideModalExampleState = slideModalExampleState } - , Cmd.map SlideModalExampleMsg cmd - ) - - SlideExampleMsg msg -> - let - ( slideExampleState, cmd ) = - Examples.Slide.update msg moduleStates.slideExampleState - in - ( { moduleStates | slideExampleState = slideExampleState } - , Cmd.map SlideExampleMsg cmd - ) - - SortableTableMsg msg -> - let - ( sortableTableState, cmd ) = - Examples.SortableTable.update msg moduleStates.sortableTableState - in - ( { moduleStates | sortableTableState = sortableTableState } - , Cmd.map SortableTableMsg cmd - ) - - TabsExampleMsg tab -> - ( { moduleStates | tabsExampleState = tab } - , Cmd.none - ) - - TooltipExampleMsg msg -> - let - newState = - Examples.Tooltip.update msg moduleStates.tooltipExampleState - in - ( { moduleStates - | tooltipExampleState = newState - } - , Cmd.none - ) - NoOp -> ( moduleStates, Cmd.none ) @@ -304,46 +320,70 @@ update outsideMsg moduleStates = subscriptions : ModuleStates -> Sub Msg subscriptions moduleStates = Sub.batch - [ Sub.map ModalExampleMsg (Examples.Modal.subscriptions moduleStates.modalExampleState) + [-- Sub.map ModalExampleMsg (Examples.Modal.subscriptions moduleStates.modalExampleState) ] +{-| -} +view : ModuleStates -> List (ModuleExample Msg) +view moduleStates = + [ { name = moduleStates.accordion.name + , categories = Set.fromList Category.sorter moduleStates.accordion.categories + , content = + List.map (Html.map (ComponentMsg .accordion (\state m -> { m | accordion = state }))) + (moduleStates.accordion.view moduleStates.accordion.state) + } + ] + + + +--let +-- accordion = +-- moduleStates.accordion +-- ( newState, cmd ) = +-- accordion.update msg accordion.state +-- in +-- ( { moduleStates | accordion = { accordion | state = newState } } +-- , Cmd.map ComponentMsg cmd +-- ) + + nriThemedModules : ModuleStates -> List (ModuleExample Msg) nriThemedModules model = - [ Examples.Alert.example - , Examples.Accordion.example AccordionExampleMsg model.accordionExampleState - , Examples.AssignmentIcon.example - , Examples.BannerAlert.example BannerAlertExampleMsg model.bannerAlertExampleState - , Examples.Button.example (exampleMessages ButtonExampleMsg) model.buttonExampleState - , Examples.Callout.example - , Examples.Checkbox.example CheckboxExampleMsg model.checkboxExampleState - , Examples.ClickableText.example (exampleMessages ClickableTextExampleMsg) model.clickableTextExampleState - , Examples.Colors.example - , Examples.DisclosureIndicator.example DisclosureIndicatorExampleMsg model.disclosureIndicatorExampleState - , Examples.Dropdown.example DropdownMsg model.dropdownState - , Examples.Fonts.example - , Examples.Heading.example - , Examples.Icon.example - , Examples.Logo.example - , Examples.MasteryIcon.example - , Examples.Modal.example ModalExampleMsg model.modalExampleState - , Examples.Page.example NoOp - , Examples.Pennant.example - , Examples.SegmentedControl.example SegmentedControlMsg model.segmentedControlState - , Examples.Select.example SelectMsg model.selectState - , Examples.Slide.example SlideExampleMsg model.slideExampleState - , Examples.SlideModal.example SlideModalExampleMsg model.slideModalExampleState - , Examples.SortableTable.example SortableTableMsg model.sortableTableState - , Examples.Svg.example (exampleMessages SvgMsg) model.svgState - , Examples.ClickableSvg.example (exampleMessages ClickableSvgMsg) model.clickableSvgState - , Examples.Table.example TableExampleMsg model.tableExampleState - , Examples.Tabs.example TabsExampleMsg model.tabsExampleState - , Examples.Text.example - , Examples.Text.Writing.example - , Examples.Tooltip.example TooltipExampleMsg model.tooltipExampleState - , Examples.UiIcon.example - , TextAreaExample.example TextAreaExampleMsg model.textAreaExampleState - , TextInputExample.example TextInputExampleMsg model.textInputExampleState + [--Examples.Alert.example + --Examples.Accordion.example AccordionExampleMsg model.accordion.state + --, Examples.AssignmentIcon.example + --, Examples.BannerAlert.example BannerAlertExampleMsg model.bannerAlertExampleState + --, Examples.Button.example (exampleMessages ButtonExampleMsg) model.buttonExampleState + --, Examples.Callout.example + --, Examples.Checkbox.example CheckboxExampleMsg model.checkboxExampleState + --, Examples.ClickableText.example (exampleMessages ClickableTextExampleMsg) model.clickableTextExampleState + --, Examples.Colors.example + --, Examples.DisclosureIndicator.example DisclosureIndicatorExampleMsg model.disclosureIndicatorExampleState + --, Examples.Dropdown.example DropdownMsg model.dropdownState + --, Examples.Fonts.example + --, Examples.Heading.example + --, Examples.Icon.example + --, Examples.Logo.example + --, Examples.MasteryIcon.example + --, Examples.Modal.example ModalExampleMsg model.modalExampleState + --, Examples.Page.example NoOp + --, Examples.Pennant.example + --, Examples.SegmentedControl.example SegmentedControlMsg model.segmentedControlState + --, Examples.Select.example SelectMsg model.selectState + --, Examples.Slide.example SlideExampleMsg model.slideExampleState + --, Examples.SlideModal.example SlideModalExampleMsg model.slideModalExampleState + --, Examples.SortableTable.example SortableTableMsg model.sortableTableState + --, Examples.Svg.example (exampleMessages SvgMsg) model.svgState + --, Examples.ClickableSvg.example (exampleMessages ClickableSvgMsg) model.clickableSvgState + --, Examples.Table.example TableExampleMsg model.tableExampleState + --, Examples.Tabs.example TabsExampleMsg model.tabsExampleState + --, Examples.Text.example + --, Examples.Text.Writing.example + --, Examples.Tooltip.example TooltipExampleMsg model.tooltipExampleState + --, Examples.UiIcon.example + --, TextAreaExample.example TextAreaExampleMsg model.textAreaExampleState + --, TextInputExample.example TextInputExampleMsg model.textInputExampleState ] diff --git a/styleguide-app/Examples/Accordion.elm b/styleguide-app/Examples/Accordion.elm index f8475a67..8f8aaa8b 100644 --- a/styleguide-app/Examples/Accordion.elm +++ b/styleguide-app/Examples/Accordion.elm @@ -1,6 +1,6 @@ module Examples.Accordion exposing ( example - , Msg, State, init, update + , Msg, State, example_, init, update, view ) {-| @@ -12,7 +12,7 @@ module Examples.Accordion exposing import Category exposing (Category(..)) import Css exposing (..) import Dict exposing (Dict) -import Html.Styled as Html +import Html.Styled as Html exposing (Html) import Html.Styled.Attributes exposing (css) import ModuleExample exposing (ModuleExample) import Nri.Ui.Accordion.V1 as Accordion @@ -28,86 +28,107 @@ example : (Msg -> msg) -> State -> ModuleExample msg example parentMessage model = { name = "Nri.Ui.Accordion.V1" , categories = Set.fromList Category.sorter <| List.singleton Layout - , content = - [ Heading.h3 [] [ Html.text "Accordion.view with default styles" ] - , Accordion.view - { entries = - [ { id = 1, title = "Entry 1", content = "Content for the first accordion" } - , { id = 2, title = "Entry 2", content = "Content for the second accordion" } - , { id = 3, title = "Super long entry that is very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very long", content = "Content for the third accordion" } - ] - |> List.map - (\entry -> - ( entry, Dict.get entry.id model |> Maybe.withDefault False ) - ) - , viewHeader = .title >> Html.text - , viewContent = \{ content } -> Text.smallBody [ Html.text content ] - , customStyles = Nothing - , toggle = \entry toExpand -> Toggle entry.id toExpand - , caret = Accordion.DefaultCaret - } - , Heading.h3 [] [ Html.text "Accordion.view with custom styles from peer reviews" ] - , Accordion.view - { entries = - [ { id = 4 - , title = "Firstname Lastname" - , content = - Html.div - [ css [ Fonts.baseFont, fontSize (px 13) ] - ] - [ Html.text "has not started writing" ] - } - , { id = 5 - , title = "LongFirstnameAnd EvenLongerLastname" - , content = - Html.div - [ css [ Fonts.baseFont, fontSize (px 13) ] ] - [ Html.text "has started writing" ] - } - ] - |> List.map - (\entry -> - ( entry, Dict.get entry.id model |> Maybe.withDefault False ) - ) - , viewHeader = .title >> Html.text - , viewContent = .content - , customStyles = - Just - (\_ -> - { entryStyles = - [ borderTop3 (px 1) solid Colors.gray75 - , marginBottom zero - , width (px 284) - ] - , entryExpandedStyles = [] - , entryClosedStyles = [] - , headerStyles = - [ height (px 46) - , paddingLeft (px 8) - , paddingRight (px 8) - , Css.alignItems Css.center - ] - , headerExpandedStyles = - [ backgroundColor Colors.gray96 - , borderRadius zero - ] - , headerClosedStyles = [ backgroundColor transparent ] - , contentStyles = - [ backgroundColor Colors.gray96 - , paddingLeft (px 8) - , paddingRight (px 8) - , paddingBottom (px 8) - ] - } - ) - , toggle = \entry toExpand -> Toggle entry.id toExpand - , caret = Accordion.DefaultCaret - } - ] - |> List.map (Html.map parentMessage) + , content = List.map (Html.map parentMessage) (view model) } +{-| -} +example_ : + { name : String + , state : State + , update : Msg -> State -> ( State, Cmd Msg ) + , view : State -> List (Html Msg) + , categories : List Category + } +example_ = + { name = "Nri.Ui.Accordion.V1" + , state = init + , update = update + , view = view + , categories = [ Layout ] + } + + +{-| -} +view : State -> List (Html Msg) +view model = + [ Heading.h3 [] [ Html.text "Accordion.view with default styles" ] + , Accordion.view + { entries = + [ { id = 1, title = "Entry 1", content = "Content for the first accordion" } + , { id = 2, title = "Entry 2", content = "Content for the second accordion" } + , { id = 3, title = "Super long entry that is very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very long", content = "Content for the third accordion" } + ] + |> List.map + (\entry -> + ( entry, Dict.get entry.id model |> Maybe.withDefault False ) + ) + , viewHeader = .title >> Html.text + , viewContent = \{ content } -> Text.smallBody [ Html.text content ] + , customStyles = Nothing + , toggle = \entry toExpand -> Toggle entry.id toExpand + , caret = Accordion.DefaultCaret + } + , Heading.h3 [] [ Html.text "Accordion.view with custom styles from peer reviews" ] + , Accordion.view + { entries = + [ { id = 4 + , title = "Firstname Lastname" + , content = + Html.div + [ css [ Fonts.baseFont, fontSize (px 13) ] + ] + [ Html.text "has not started writing" ] + } + , { id = 5 + , title = "LongFirstnameAnd EvenLongerLastname" + , content = + Html.div + [ css [ Fonts.baseFont, fontSize (px 13) ] ] + [ Html.text "has started writing" ] + } + ] + |> List.map + (\entry -> + ( entry, Dict.get entry.id model |> Maybe.withDefault False ) + ) + , viewHeader = .title >> Html.text + , viewContent = .content + , customStyles = + Just + (\_ -> + { entryStyles = + [ borderTop3 (px 1) solid Colors.gray75 + , marginBottom zero + , width (px 284) + ] + , entryExpandedStyles = [] + , entryClosedStyles = [] + , headerStyles = + [ height (px 46) + , paddingLeft (px 8) + , paddingRight (px 8) + , Css.alignItems Css.center + ] + , headerExpandedStyles = + [ backgroundColor Colors.gray96 + , borderRadius zero + ] + , headerClosedStyles = [ backgroundColor transparent ] + , contentStyles = + [ backgroundColor Colors.gray96 + , paddingLeft (px 8) + , paddingRight (px 8) + , paddingBottom (px 8) + ] + } + ) + , toggle = \entry toExpand -> Toggle entry.id toExpand + , caret = Accordion.DefaultCaret + } + ] + + type Msg = Toggle Int Bool @@ -130,6 +151,6 @@ type alias State = {-| -} -update : Msg -> State -> State +update : Msg -> State -> ( State, Cmd Msg ) update (Toggle id toExpanded) model = - Dict.insert id toExpanded model + ( Dict.insert id toExpanded model, Cmd.none ) diff --git a/styleguide-app/Main.elm b/styleguide-app/Main.elm index 9a6b31f2..e8437d93 100644 --- a/styleguide-app/Main.elm +++ b/styleguide-app/Main.elm @@ -5,7 +5,7 @@ import Browser.Dom import Browser.Navigation exposing (Key) import Category import Css exposing (..) -import Examples exposing (ModuleStates, nriThemedModules) +import Examples exposing (ModuleStates) import Html as RootHtml import Html.Attributes import Html.Styled as Html exposing (Html, img) @@ -122,7 +122,7 @@ view_ model = [ sectionStyles ] [] [ Heading.h2 [] [ Html.text ("Viewing " ++ doodad ++ " doodad only") ] - , nriThemedModules model.moduleStates + , Examples.view model.moduleStates |> List.filter (\m -> m.name == doodad) |> List.map (ModuleExample.view False) |> Html.div [] @@ -135,7 +135,7 @@ view_ model = [ sectionStyles ] [] [ Heading.h2 [] [ Html.text (Category.forDisplay category) ] - , nriThemedModules model.moduleStates + , Examples.view model.moduleStates |> List.filter (\doodad -> Set.memberOf doodad.categories category) |> List.map (ModuleExample.view True) |> Html.div [ id (Category.forId category) ] @@ -148,7 +148,7 @@ view_ model = [ sectionStyles ] [] [ Heading.h2 [] [ Html.text "All" ] - , nriThemedModules model.moduleStates + , Examples.view model.moduleStates |> List.map (ModuleExample.view True) |> Html.div [] |> Html.map UpdateModuleStates From 2f5fb613f2cfb4c1f7c5589eaf7eaa2748741880 Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Tue, 31 Mar 2020 12:05:56 -0700 Subject: [PATCH 03/17] Adds button example back in --- styleguide-app/Examples.elm | 275 +++-------------------------- styleguide-app/Examples/Button.elm | 108 ++++++----- 2 files changed, 86 insertions(+), 297 deletions(-) diff --git a/styleguide-app/Examples.elm b/styleguide-app/Examples.elm index 1510c851..d0bd2116 100644 --- a/styleguide-app/Examples.elm +++ b/styleguide-app/Examples.elm @@ -1,11 +1,11 @@ -module Examples exposing (ModuleStates, Msg, init, nriThemedModules, subscriptions, update, view) +module Examples exposing (ModuleStates, Msg, init, subscriptions, update, view) import Category exposing (Category(..)) import Examples.Accordion as Accordion import Examples.Alert import Examples.AssignmentIcon import Examples.BannerAlert -import Examples.Button +import Examples.Button as Button import Examples.Callout import Examples.Checkbox import Examples.ClickableSvg @@ -51,9 +51,8 @@ type alias Example state msg = type alias ModuleStates = { accordion : Example Accordion.State Accordion.Msg + , button : Example Button.State Button.Msg - --, buttonExample : { state : Examples.Button.State Msg - -- , update :Button.State Msg -> Button.State Msg -> (Button.State Msg, Cmd Button.State Msg) } --, bannerAlertExample : { state : Examples.BannerAlert.State -- , update :Examples.BannerAlert.Msg -> Examples.BannerAlert.State -> (Examples.BannerAlert.State, Cmd Examples.BannerAlert.Msg) } --, clickableTextExample : { state : Examples.ClickableText.State @@ -96,8 +95,8 @@ type alias ModuleStates = init : ModuleStates init = { accordion = Accordion.example_ + , button = Button.example_ - --, buttonExample = { state = Examples.Button.init, update = Examples.Button.init } --, bannerAlertExample = { state = Examples.BannerAlert.init, update = Examples.BannerAlert.init } --, clickableTextExample = { state = Examples.ClickableText.init, update = Examples.ClickableText.init } --, checkboxExample = { state = Examples.Checkbox.init, update = Examples.Checkbox.init } @@ -120,204 +119,33 @@ init = type Msg - = ComponentMsg (ModuleStates -> Example Accordion.State Accordion.Msg) (Example Accordion.State Accordion.Msg -> ModuleStates -> ModuleStates) Accordion.Msg - --| ButtonExampleMsg (Examples.Button.Msg Msg) - --| BannerAlertExampleMsg Examples.BannerAlert.Msg - --| ClickableTextExampleMsg Examples.ClickableText.Msg - --| CheckboxExampleMsg Examples.Checkbox.Msg - --| DropdownMsg Examples.Dropdown.Msg - --| SegmentedControlMsg Examples.SegmentedControl.Msg - --| SelectMsg Examples.Select.Msg - --| TableExampleMsg Examples.Table.Msg - --| TextAreaExampleMsg TextAreaExample.Msg - --| TextInputExampleMsg TextInputExample.Msg - --| DisclosureIndicatorExampleMsg Examples.DisclosureIndicator.Msg - --| ModalExampleMsg Examples.Modal.Msg - --| SlideModalExampleMsg Examples.SlideModal.Msg - --| SlideExampleMsg Examples.Slide.Msg - --| SortableTableMsg Examples.SortableTable.Msg - --| SvgMsg Examples.Svg.Msg - --| ClickableSvgMsg Examples.ClickableSvg.Msg - --| TabsExampleMsg Examples.Tabs.Tab - --| TooltipExampleMsg Examples.Tooltip.Msg - | ShowItWorked String String - | NoOp + = AccordionMsg Accordion.Msg + | ButtonMsg Button.Msg update : Msg -> ModuleStates -> ( ModuleStates, Cmd Msg ) -update outsideMsg moduleStates = - case outsideMsg of - ComponentMsg accessor updater msg -> +update msg moduleStates = + let + updateWith accessor updater wrapMsg childMsg = let module_ = accessor moduleStates ( newState, cmd ) = - module_.update msg module_.state + module_.update childMsg module_.state in ( updater { module_ | state = newState } moduleStates - , Cmd.map (ComponentMsg accessor updater) cmd + , Cmd.map wrapMsg cmd ) + in + case msg of + AccordionMsg exampleMsg -> + updateWith .accordion (\state m -> { m | accordion = state }) AccordionMsg exampleMsg - --ButtonExampleMsg msg -> - -- let - -- ( buttonExampleState, cmd ) = - -- Examples.Button.update msg moduleStates.buttonExampleState - -- in - -- ( { moduleStates | buttonExampleState = buttonExampleState } - -- , Cmd.map ButtonExampleMsg cmd - -- ) - --BannerAlertExampleMsg msg -> - -- ( { moduleStates - -- | bannerAlertExampleState = - -- Examples.BannerAlert.update msg moduleStates.bannerAlertExampleState - -- } - -- , Cmd.none - -- ) - --ClickableTextExampleMsg msg -> - -- let - -- ( clickableTextExampleState, cmd ) = - -- Examples.ClickableText.update msg moduleStates.clickableTextExampleState - -- in - -- ( { moduleStates | clickableTextExampleState = clickableTextExampleState } - -- , Cmd.map ClickableTextExampleMsg cmd - -- ) - --CheckboxExampleMsg msg -> - -- let - -- ( checkboxExampleState, cmd ) = - -- Examples.Checkbox.update msg moduleStates.checkboxExampleState - -- in - -- ( { moduleStates | checkboxExampleState = checkboxExampleState }, Cmd.map CheckboxExampleMsg cmd ) - --DropdownMsg msg -> - -- let - -- ( dropdownState, cmd ) = - -- Examples.Dropdown.update msg moduleStates.dropdownState - -- in - -- ( { moduleStates | dropdownState = dropdownState } - -- , Cmd.map DropdownMsg cmd - -- ) - --SegmentedControlMsg msg -> - -- let - -- ( segmentedControlState, cmd ) = - -- Examples.SegmentedControl.update msg moduleStates.segmentedControlState - -- in - -- ( { moduleStates | segmentedControlState = segmentedControlState } - -- , Cmd.map SegmentedControlMsg cmd - -- ) - --SelectMsg msg -> - -- let - -- ( selectState, cmd ) = - -- Examples.Select.update msg moduleStates.selectState - -- in - -- ( { moduleStates | selectState = selectState } - -- , Cmd.map SelectMsg cmd - -- ) - --SvgMsg msg -> - -- let - -- ( svgState, cmd ) = - -- Examples.Svg.update msg moduleStates.svgState - -- in - -- ( { moduleStates | svgState = svgState } - -- , Cmd.map SvgMsg cmd - -- ) - --ClickableSvgMsg msg -> - -- let - -- ( clickableSvgState, cmd ) = - -- Examples.ClickableSvg.update msg moduleStates.clickableSvgState - -- in - -- ( { moduleStates | clickableSvgState = clickableSvgState } - -- , Cmd.map ClickableSvgMsg cmd - -- ) - --TableExampleMsg msg -> - -- let - -- ( tableExampleState, cmd ) = - -- Examples.Table.update msg moduleStates.tableExampleState - -- in - -- ( { moduleStates | tableExampleState = tableExampleState } - -- , Cmd.map TableExampleMsg cmd - -- ) - --TextAreaExampleMsg msg -> - -- let - -- ( textAreaExampleState, cmd ) = - -- TextAreaExample.update msg moduleStates.textAreaExampleState - -- in - -- ( { moduleStates | textAreaExampleState = textAreaExampleState } - -- , Cmd.map TextAreaExampleMsg cmd - -- ) - --TextInputExampleMsg msg -> - -- let - -- ( textInputExampleState, cmd ) = - -- TextInputExample.update msg moduleStates.textInputExampleState - -- in - -- ( { moduleStates | textInputExampleState = textInputExampleState } - -- , Cmd.map TextInputExampleMsg cmd - -- ) - --DisclosureIndicatorExampleMsg msg -> - -- let - -- ( disclosureIndicatorExampleState, cmd ) = - -- Examples.DisclosureIndicator.update msg moduleStates.disclosureIndicatorExampleState - -- in - -- ( { moduleStates | disclosureIndicatorExampleState = disclosureIndicatorExampleState } - -- , Cmd.map DisclosureIndicatorExampleMsg cmd - -- ) - --ModalExampleMsg msg -> - -- let - -- ( modalExampleState, cmd ) = - -- Examples.Modal.update msg moduleStates.modalExampleState - -- in - -- ( { moduleStates | modalExampleState = modalExampleState } - -- , Cmd.map ModalExampleMsg cmd - -- ) - --SlideModalExampleMsg msg -> - -- let - -- ( slideModalExampleState, cmd ) = - -- Examples.SlideModal.update msg moduleStates.slideModalExampleState - -- in - -- ( { moduleStates | slideModalExampleState = slideModalExampleState } - -- , Cmd.map SlideModalExampleMsg cmd - -- ) - --SlideExampleMsg msg -> - -- let - -- ( slideExampleState, cmd ) = - -- Examples.Slide.update msg moduleStates.slideExampleState - -- in - -- ( { moduleStates | slideExampleState = slideExampleState } - -- , Cmd.map SlideExampleMsg cmd - -- ) - --SortableTableMsg msg -> - -- let - -- ( sortableTableState, cmd ) = - -- Examples.SortableTable.update msg moduleStates.sortableTableState - -- in - -- ( { moduleStates | sortableTableState = sortableTableState } - -- , Cmd.map SortableTableMsg cmd - -- ) - --TabsExampleMsg tab -> - -- ( { moduleStates | tabsExampleState = tab } - -- , Cmd.none - -- ) - --TooltipExampleMsg msg -> - -- let - -- newState = - -- Examples.Tooltip.update msg moduleStates.tooltipExampleState - -- in - -- ( { moduleStates - -- | tooltipExampleState = newState - -- } - -- , Cmd.none - -- ) - ShowItWorked group message -> - let - _ = - Debug.log group message - in - ( moduleStates, Cmd.none ) - - NoOp -> - ( moduleStates, Cmd.none ) + ButtonMsg exampleMsg -> + updateWith .button (\state m -> { m | button = state }) ButtonMsg exampleMsg -subscriptions : ModuleStates -> Sub Msg subscriptions moduleStates = Sub.batch [-- Sub.map ModalExampleMsg (Examples.Modal.subscriptions moduleStates.modalExampleState) @@ -327,69 +155,14 @@ subscriptions moduleStates = {-| -} view : ModuleStates -> List (ModuleExample Msg) view moduleStates = - [ { name = moduleStates.accordion.name - , categories = Set.fromList Category.sorter moduleStates.accordion.categories - , content = - List.map (Html.map (ComponentMsg .accordion (\state m -> { m | accordion = state }))) - (moduleStates.accordion.view moduleStates.accordion.state) - } + [ viewExample moduleStates.accordion AccordionMsg + , viewExample moduleStates.button ButtonMsg ] - ---let --- accordion = --- moduleStates.accordion --- ( newState, cmd ) = --- accordion.update msg accordion.state --- in --- ( { moduleStates | accordion = { accordion | state = newState } } --- , Cmd.map ComponentMsg cmd --- ) - - -nriThemedModules : ModuleStates -> List (ModuleExample Msg) -nriThemedModules model = - [--Examples.Alert.example - --Examples.Accordion.example AccordionExampleMsg model.accordion.state - --, Examples.AssignmentIcon.example - --, Examples.BannerAlert.example BannerAlertExampleMsg model.bannerAlertExampleState - --, Examples.Button.example (exampleMessages ButtonExampleMsg) model.buttonExampleState - --, Examples.Callout.example - --, Examples.Checkbox.example CheckboxExampleMsg model.checkboxExampleState - --, Examples.ClickableText.example (exampleMessages ClickableTextExampleMsg) model.clickableTextExampleState - --, Examples.Colors.example - --, Examples.DisclosureIndicator.example DisclosureIndicatorExampleMsg model.disclosureIndicatorExampleState - --, Examples.Dropdown.example DropdownMsg model.dropdownState - --, Examples.Fonts.example - --, Examples.Heading.example - --, Examples.Icon.example - --, Examples.Logo.example - --, Examples.MasteryIcon.example - --, Examples.Modal.example ModalExampleMsg model.modalExampleState - --, Examples.Page.example NoOp - --, Examples.Pennant.example - --, Examples.SegmentedControl.example SegmentedControlMsg model.segmentedControlState - --, Examples.Select.example SelectMsg model.selectState - --, Examples.Slide.example SlideExampleMsg model.slideExampleState - --, Examples.SlideModal.example SlideModalExampleMsg model.slideModalExampleState - --, Examples.SortableTable.example SortableTableMsg model.sortableTableState - --, Examples.Svg.example (exampleMessages SvgMsg) model.svgState - --, Examples.ClickableSvg.example (exampleMessages ClickableSvgMsg) model.clickableSvgState - --, Examples.Table.example TableExampleMsg model.tableExampleState - --, Examples.Tabs.example TabsExampleMsg model.tabsExampleState - --, Examples.Text.example - --, Examples.Text.Writing.example - --, Examples.Tooltip.example TooltipExampleMsg model.tooltipExampleState - --, Examples.UiIcon.example - --, TextAreaExample.example TextAreaExampleMsg model.textAreaExampleState - --, TextInputExample.example TextInputExampleMsg model.textInputExampleState - ] - - -exampleMessages : (msg -> Msg) -> String -> ModuleExample.ModuleMessages msg Msg -exampleMessages exampleMessageWrapper exampleName = - { noOp = NoOp - , showItWorked = ShowItWorked exampleName - , wrapper = exampleMessageWrapper +viewExample : Example state msg -> (msg -> Msg) -> ModuleExample Msg +viewExample example wrapperMsg = + { name = example.name + , categories = Set.fromList Category.sorter example.categories + , content = List.map (Html.map wrapperMsg) (example.view example.state) } diff --git a/styleguide-app/Examples/Button.elm b/styleguide-app/Examples/Button.elm index 46b5427e..d0b6d9c7 100644 --- a/styleguide-app/Examples/Button.elm +++ b/styleguide-app/Examples/Button.elm @@ -1,8 +1,12 @@ -module Examples.Button exposing (Msg, State, example, init, update) +module Examples.Button exposing + ( Msg, State, init, update + , example_ + ) {-| @docs Msg, State, example, init, update +@docs example_ -} @@ -19,9 +23,18 @@ import Nri.Ui.UiIcon.V1 as UiIcon import Sort.Set as Set exposing (Set) +example_ = + { name = "Nri.Ui.Button.V10" + , state = init + , update = update + , view = \state -> [ viewButtonExamples state ] + , categories = [ Buttons ] + } + + {-| -} -type State parentMsg - = State (Control (Model parentMsg)) +type State + = State (Control Model) {-| -} @@ -30,35 +43,44 @@ type ButtonType | Link -{-| -} -example : - (String -> ModuleMessages (Msg parentMsg) parentMsg) - -> State parentMsg - -> ModuleExample parentMsg -example unnamedMessages state = - let - messages = - unnamedMessages "ButtonExample" - in - { name = "Nri.Ui.Button.V10" - , categories = Set.fromList Category.sorter <| List.singleton Buttons - , content = [ viewButtonExamples messages state ] - } + +--{-| -} +--example : +-- (String -> ModuleMessages (Msg parentMsg) parentMsg) +-- -> State parentMsg +-- -> ModuleExample parentMsg +--example unnamedMessages state = +-- let +-- messages = +-- unnamedMessages "ButtonExample" +-- in +-- { name = "Nri.Ui.Button.V10" +-- , categories = Set.fromList Category.sorter <| List.singleton Buttons +-- , content = [ viewButtonExamples messages state ] +-- } {-| -} -type Msg parentMsg - = SetState (State parentMsg) +type Msg + = SetState State + | ShowItWorked String String | NoOp {-| -} -update : Msg msg -> State msg -> ( State msg, Cmd (Msg msg) ) +update : Msg -> State -> ( State, Cmd Msg ) update msg state = case msg of SetState newState -> ( newState, Cmd.none ) + ShowItWorked group message -> + let + _ = + Debug.log group message + in + ( state, Cmd.none ) + NoOp -> ( state, Cmd.none ) @@ -67,17 +89,17 @@ update msg state = -- INTERNAL -type alias Model msg = +type alias Model = { label : String , icon : Maybe Svg , buttonType : ButtonType - , width : Button.Attribute msg - , state : Button.Attribute msg + , width : Button.Attribute Msg + , state : Button.Attribute Msg } {-| -} -init : State msg +init : State init = Control.record Model |> Control.field "label" (Control.string "Label") @@ -119,40 +141,34 @@ iconChoice = ] -viewButtonExamples : - ModuleMessages (Msg parentMsg) parentMsg - -> State parentMsg - -> Html parentMsg -viewButtonExamples messages (State control) = +viewButtonExamples : State -> Html Msg +viewButtonExamples (State control) = let model = Control.currentValue control in - [ Control.view (State >> SetState >> messages.wrapper) control + [ Control.view (State >> SetState) control |> fromUnstyled - , buttons messages model - , toggleButtons messages + , buttons model + , toggleButtons , Button.delete { label = "Delete Something" - , onClick = messages.showItWorked "delete" + , onClick = ShowItWorked "ButtonExample" "delete" } , Button.link "linkExternalWithTracking" [ Button.unboundedWidth , Button.secondary , Button.linkExternalWithTracking { url = "#" - , track = messages.showItWorked "linkExternalWithTracking clicked" + , track = ShowItWorked "ButtonExample" "linkExternalWithTracking clicked" } ] ] |> div [] -buttons : - ModuleMessages (Msg parentMsg) parentMsg - -> Model parentMsg - -> Html parentMsg -buttons messages model = +buttons : Model -> Html Msg +buttons model = let sizes = [ ( Button.small, "small" ) @@ -195,7 +211,7 @@ buttons messages model = , model.width , model.state , Button.custom [ Html.Styled.Attributes.class "styleguide-button" ] - , Button.onClick (messages.showItWorked "Button clicked!") + , Button.onClick (ShowItWorked "ButtonExample" "Button clicked!") , case model.icon of Just icon -> Button.icon icon @@ -221,20 +237,20 @@ buttons messages model = |> table [] -toggleButtons : ModuleMessages (Msg parentMsg) parentMsg -> Html parentMsg -toggleButtons messages = +toggleButtons : Html Msg +toggleButtons = div [] [ Heading.h3 [] [ text "Button toggle" ] , div [ css [ Css.displayFlex, Css.marginBottom (Css.px 20) ] ] [ Button.toggleButton - { onDeselect = messages.showItWorked "onDeselect" - , onSelect = messages.showItWorked "onSelect" + { onDeselect = ShowItWorked "ButtonExample" "onDeselect" + , onSelect = ShowItWorked "ButtonExample" "onSelect" , label = "5" , pressed = False } , Button.toggleButton - { onDeselect = messages.showItWorked "onDeselect" - , onSelect = messages.showItWorked "onSelect" + { onDeselect = ShowItWorked "ButtonExample" "onDeselect" + , onSelect = ShowItWorked "ButtonExample" "onSelect" , label = "5" , pressed = True } From 267164e9cc6b8d6c2833a4d77dfff7c819a66b41 Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Tue, 31 Mar 2020 12:14:18 -0700 Subject: [PATCH 04/17] Adds banner alert example back in --- styleguide-app/Examples.elm | 22 +++-- styleguide-app/Examples/Accordion.elm | 24 +---- styleguide-app/Examples/BannerAlert.elm | 120 ++++++++++++------------ styleguide-app/Examples/Button.elm | 26 +---- 4 files changed, 83 insertions(+), 109 deletions(-) diff --git a/styleguide-app/Examples.elm b/styleguide-app/Examples.elm index d0bd2116..0a3ec633 100644 --- a/styleguide-app/Examples.elm +++ b/styleguide-app/Examples.elm @@ -4,7 +4,7 @@ import Category exposing (Category(..)) import Examples.Accordion as Accordion import Examples.Alert import Examples.AssignmentIcon -import Examples.BannerAlert +import Examples.BannerAlert as BannerAlert import Examples.Button as Button import Examples.Callout import Examples.Checkbox @@ -52,9 +52,8 @@ type alias Example state msg = type alias ModuleStates = { accordion : Example Accordion.State Accordion.Msg , button : Example Button.State Button.Msg + , bannerAlert : Example BannerAlert.State BannerAlert.Msg - --, bannerAlertExample : { state : Examples.BannerAlert.State - -- , update :Examples.BannerAlert.Msg -> Examples.BannerAlert.State -> (Examples.BannerAlert.State, Cmd Examples.BannerAlert.Msg) } --, clickableTextExample : { state : Examples.ClickableText.State -- , update :Examples.ClickableText.Msg -> Examples.ClickableText.State -> (Examples.ClickableText.State, Cmd Examples.ClickableText.Msg) } --, checkboxExample : { state : Examples.Checkbox.State @@ -94,10 +93,10 @@ type alias ModuleStates = init : ModuleStates init = - { accordion = Accordion.example_ + { accordion = Accordion.example , button = Button.example_ + , bannerAlert = BannerAlert.example - --, bannerAlertExample = { state = Examples.BannerAlert.init, update = Examples.BannerAlert.init } --, clickableTextExample = { state = Examples.ClickableText.init, update = Examples.ClickableText.init } --, checkboxExample = { state = Examples.Checkbox.init, update = Examples.Checkbox.init } --, dropdown = { state = Examples.Dropdown.init, update = Examples.Dropdown.init } @@ -121,6 +120,7 @@ init = type Msg = AccordionMsg Accordion.Msg | ButtonMsg Button.Msg + | BannerAlertMsg BannerAlert.Msg update : Msg -> ModuleStates -> ( ModuleStates, Cmd Msg ) @@ -145,6 +145,9 @@ update msg moduleStates = ButtonMsg exampleMsg -> updateWith .button (\state m -> { m | button = state }) ButtonMsg exampleMsg + BannerAlertMsg exampleMsg -> + updateWith .bannerAlert (\state m -> { m | bannerAlert = state }) BannerAlertMsg exampleMsg + subscriptions moduleStates = Sub.batch @@ -155,13 +158,14 @@ subscriptions moduleStates = {-| -} view : ModuleStates -> List (ModuleExample Msg) view moduleStates = - [ viewExample moduleStates.accordion AccordionMsg - , viewExample moduleStates.button ButtonMsg + [ viewExample AccordionMsg moduleStates.accordion + , viewExample ButtonMsg moduleStates.button + , viewExample BannerAlertMsg moduleStates.bannerAlert ] -viewExample : Example state msg -> (msg -> Msg) -> ModuleExample Msg -viewExample example wrapperMsg = +viewExample : (msg -> Msg) -> Example state msg -> ModuleExample Msg +viewExample wrapperMsg example = { name = example.name , categories = Set.fromList Category.sorter example.categories , content = List.map (Html.map wrapperMsg) (example.view example.state) diff --git a/styleguide-app/Examples/Accordion.elm b/styleguide-app/Examples/Accordion.elm index 8f8aaa8b..f1f84bca 100644 --- a/styleguide-app/Examples/Accordion.elm +++ b/styleguide-app/Examples/Accordion.elm @@ -1,11 +1,12 @@ module Examples.Accordion exposing ( example - , Msg, State, example_, init, update, view + , State, Msg ) {-| -@docs example, styles +@docs example +@docs State, Msg -} @@ -20,27 +21,10 @@ import Nri.Ui.Colors.V1 as Colors import Nri.Ui.Fonts.V1 as Fonts import Nri.Ui.Heading.V2 as Heading import Nri.Ui.Text.V4 as Text -import Sort.Set as Set exposing (Set) {-| -} -example : (Msg -> msg) -> State -> ModuleExample msg -example parentMessage model = - { name = "Nri.Ui.Accordion.V1" - , categories = Set.fromList Category.sorter <| List.singleton Layout - , content = List.map (Html.map parentMessage) (view model) - } - - -{-| -} -example_ : - { name : String - , state : State - , update : Msg -> State -> ( State, Cmd Msg ) - , view : State -> List (Html Msg) - , categories : List Category - } -example_ = +example = { name = "Nri.Ui.Accordion.V1" , state = init , update = update diff --git a/styleguide-app/Examples/BannerAlert.elm b/styleguide-app/Examples/BannerAlert.elm index b6b3a312..c2f0b089 100644 --- a/styleguide-app/Examples/BannerAlert.elm +++ b/styleguide-app/Examples/BannerAlert.elm @@ -3,12 +3,13 @@ module Examples.BannerAlert exposing (example, State, init, Msg, update) {-| @docs example, State, init, Msg, update +@docs example_ -} import Category exposing (Category(..)) import Css -import Html.Styled exposing (a, div, h3, pre, text) +import Html.Styled exposing (Html, a, div, h3, pre, text) import Html.Styled.Attributes as Attributes import ModuleExample exposing (ModuleExample) import Nri.Ui.BannerAlert.V6 as BannerAlert @@ -17,46 +18,51 @@ import Nri.Ui.Fonts.V1 as Fonts import Nri.Ui.Pennant.V2 as Pennant import Nri.Ui.Svg.V1 as Svg import Nri.Ui.UiIcon.V1 as UiIcon -import Sort.Set as Set exposing (Set) -example : (Msg -> msg) -> State -> ModuleExample msg -example parentMsg state = +example = { name = "Nri.Ui.BannerAlert.V6" - , categories = Set.fromList Category.sorter <| List.singleton Messaging - , content = - [ if state.show then - div - [] - [ h3 [] [ text "alert" ] - , BannerAlert.alert [ text "Dismiss this alert message to see a success message!" ] (Just Dismiss) - , pre [] [ text "BannerAlert.alert [ text \"Dismiss this alert message to see a success message!\" ] (Just Dismiss)" ] - ] + , state = init + , update = update + , view = view + , categories = [ Messaging ] + } - else - div - [] - [ h3 [] [ text "success" ] - , BannerAlert.success [ text "Nice! The alert message was dismissed. 👍" ] Nothing - , pre [] [ text "BannerAlert.success [ text \"Nice! The alert message was dismissed. 👍\" ] Nothing" ] - ] - , h3 [] [ text "error" ] - , BannerAlert.error [ text "This is an error message!" ] Nothing - , pre [] [ text "BannerAlert.error [ text \"This is an error message!\" ] Nothing" ] - , h3 [] [ text "neutral" ] - , BannerAlert.neutral [ text "This is a neutral message!" ] Nothing - , pre [] [ text "BannerAlert.neutral [ text \"This is a neutral message!\" ] Nothing" ] - , h3 [] [ text "custom" ] - , BannerAlert.custom - { color = Colors.aquaDark - , backgroundColor = Colors.gray92 - , icon = Pennant.premiumFlag - , content = [ text "This is a a custom message!" ] - , dismiss = Nothing - } - , pre [] - [ text - """BannerAlert.custom + +view : State -> List (Html Msg) +view state = + [ if state.show then + div + [] + [ h3 [] [ text "alert" ] + , BannerAlert.alert [ text "Dismiss this alert message to see a success message!" ] (Just Dismiss) + , pre [] [ text "BannerAlert.alert [ text \"Dismiss this alert message to see a success message!\" ] (Just Dismiss)" ] + ] + + else + div + [] + [ h3 [] [ text "success" ] + , BannerAlert.success [ text "Nice! The alert message was dismissed. 👍" ] Nothing + , pre [] [ text "BannerAlert.success [ text \"Nice! The alert message was dismissed. 👍\" ] Nothing" ] + ] + , h3 [] [ text "error" ] + , BannerAlert.error [ text "This is an error message!" ] Nothing + , pre [] [ text "BannerAlert.error [ text \"This is an error message!\" ] Nothing" ] + , h3 [] [ text "neutral" ] + , BannerAlert.neutral [ text "This is a neutral message!" ] Nothing + , pre [] [ text "BannerAlert.neutral [ text \"This is a neutral message!\" ] Nothing" ] + , h3 [] [ text "custom" ] + , BannerAlert.custom + { color = Colors.aquaDark + , backgroundColor = Colors.gray92 + , icon = Pennant.premiumFlag + , content = [ text "This is a a custom message!" ] + , dismiss = Nothing + } + , pre [] + [ text + """BannerAlert.custom { color = Colors.aquaDark , backgroundColor = Colors.gray92 , icon = Pennant.premiumFlag @@ -64,25 +70,25 @@ example parentMsg state = , dismiss = Nothing } """ - ] - , h3 [] [ text "with multi-line link and icon" ] - , BannerAlert.success - [ text "Click " - , a [ Attributes.href "http://www.noredink.com", Attributes.target "_blank" ] - [ text - """here, yes, HERE, right here on this very long success message. + ] + , h3 [] [ text "with multi-line link and icon" ] + , BannerAlert.success + [ text "Click " + , a [ Attributes.href "http://www.noredink.com", Attributes.target "_blank" ] + [ text + """here, yes, HERE, right here on this very long success message. Wow, how successful! You're the biggest success I've ever seen! You should feel great about yourself! Give yourself a very big round of applause! """ - , div [ Attributes.css [ Css.display Css.inlineBlock, Css.width (Css.px 20) ] ] - [ Svg.toHtml UiIcon.gear ] - ] - , text " to check out NoRedInk." + , div [ Attributes.css [ Css.display Css.inlineBlock, Css.width (Css.px 20) ] ] + [ Svg.toHtml UiIcon.gear ] ] - Nothing - , pre [] - [ text - """BannerAlert.success + , text " to check out NoRedInk." + ] + Nothing + , pre [] + [ text + """BannerAlert.success [ text "Click " , a [ Attributes.href "http://www.noredink.com", Attributes.target "_blank" ] [ text @@ -97,10 +103,8 @@ example parentMsg state = ] Nothing """ - ] ] - |> List.map (Html.Styled.map parentMsg) - } + ] type alias State = @@ -117,11 +121,11 @@ type Msg | Dismiss -update : Msg -> State -> State +update : Msg -> State -> ( State, Cmd Msg ) update msg state = case msg of NoOp -> - state + ( state, Cmd.none ) Dismiss -> - { state | show = False } + ( { state | show = False }, Cmd.none ) diff --git a/styleguide-app/Examples/Button.elm b/styleguide-app/Examples/Button.elm index d0b6d9c7..db5fabc3 100644 --- a/styleguide-app/Examples/Button.elm +++ b/styleguide-app/Examples/Button.elm @@ -1,12 +1,12 @@ module Examples.Button exposing - ( Msg, State, init, update - , example_ + ( Msg, State + , example_, init, update ) {-| -@docs Msg, State, example, init, update -@docs example_ +@docs example +@docs Msg, State -} @@ -20,7 +20,6 @@ import Nri.Ui.Button.V10 as Button import Nri.Ui.Heading.V2 as Heading import Nri.Ui.Svg.V1 as Svg exposing (Svg) import Nri.Ui.UiIcon.V1 as UiIcon -import Sort.Set as Set exposing (Set) example_ = @@ -43,23 +42,6 @@ type ButtonType | Link - ---{-| -} ---example : --- (String -> ModuleMessages (Msg parentMsg) parentMsg) --- -> State parentMsg --- -> ModuleExample parentMsg ---example unnamedMessages state = --- let --- messages = --- unnamedMessages "ButtonExample" --- in --- { name = "Nri.Ui.Button.V10" --- , categories = Set.fromList Category.sorter <| List.singleton Buttons --- , content = [ viewButtonExamples messages state ] --- } - - {-| -} type Msg = SetState State From dc9ed8ba7b1c2c46c77349c49cd561620af0dc8a Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Tue, 31 Mar 2020 12:43:32 -0700 Subject: [PATCH 05/17] Uncomment all the states --- styleguide-app/Examples.elm | 153 ++++++-------- styleguide-app/Examples/Button.elm | 10 +- styleguide-app/Examples/Checkbox.elm | 32 +-- styleguide-app/Examples/ClickableSvg.elm | 112 +++++----- styleguide-app/Examples/ClickableText.elm | 62 +++--- .../Examples/DisclosureIndicator.elm | 43 ++-- styleguide-app/Examples/Dropdown.elm | 31 ++- styleguide-app/Examples/Modal.elm | 73 ++++--- styleguide-app/Examples/SegmentedControl.elm | 81 ++++---- styleguide-app/Examples/Select.elm | 104 +++++----- styleguide-app/Examples/Slide.elm | 67 +++--- styleguide-app/Examples/SlideModal.elm | 23 +-- styleguide-app/Examples/SortableTable.elm | 93 +++++---- styleguide-app/Examples/Svg.elm | 41 ++-- styleguide-app/Examples/Table.elm | 174 ++++++++-------- styleguide-app/Examples/Tabs.elm | 89 ++++---- styleguide-app/Examples/TextArea.elm | 193 +++++++++--------- styleguide-app/Examples/TextInput.elm | 19 +- styleguide-app/Examples/Tooltip.elm | 170 +++++++-------- 19 files changed, 744 insertions(+), 826 deletions(-) diff --git a/styleguide-app/Examples.elm b/styleguide-app/Examples.elm index 0a3ec633..3cbf0db7 100644 --- a/styleguide-app/Examples.elm +++ b/styleguide-app/Examples.elm @@ -2,39 +2,39 @@ module Examples exposing (ModuleStates, Msg, init, subscriptions, update, view) import Category exposing (Category(..)) import Examples.Accordion as Accordion -import Examples.Alert -import Examples.AssignmentIcon +import Examples.Alert as Alert +import Examples.AssignmentIcon as AssignmentIcon import Examples.BannerAlert as BannerAlert import Examples.Button as Button -import Examples.Callout -import Examples.Checkbox -import Examples.ClickableSvg -import Examples.ClickableText -import Examples.Colors -import Examples.DisclosureIndicator -import Examples.Dropdown -import Examples.Fonts -import Examples.Heading -import Examples.Icon -import Examples.Logo -import Examples.MasteryIcon -import Examples.Modal -import Examples.Page -import Examples.Pennant -import Examples.SegmentedControl -import Examples.Select -import Examples.Slide -import Examples.SlideModal -import Examples.SortableTable -import Examples.Svg -import Examples.Table -import Examples.Tabs -import Examples.Text -import Examples.Text.Writing -import Examples.TextArea as TextAreaExample -import Examples.TextInput as TextInputExample -import Examples.Tooltip -import Examples.UiIcon +import Examples.Callout as Callout +import Examples.Checkbox as Checkbox +import Examples.ClickableSvg as ClickableSvg +import Examples.ClickableText as ClickableText +import Examples.Colors as Colors +import Examples.DisclosureIndicator as DisclosureIndicator +import Examples.Dropdown as Dropdown +import Examples.Fonts as Fonts +import Examples.Heading as Heading +import Examples.Icon as Icon +import Examples.Logo as Logo +import Examples.MasteryIcon as MasteryIcon +import Examples.Modal as Modal +import Examples.Page as Page +import Examples.Pennant as Pennant +import Examples.SegmentedControl as SegmentedControl +import Examples.Select as Select +import Examples.Slide as Slide +import Examples.SlideModal as SlideModal +import Examples.SortableTable as SortableTable +import Examples.Svg as Svg +import Examples.Table as Table +import Examples.Tabs as Tabs +import Examples.Text as Text +import Examples.Text.Writing as Writing +import Examples.TextArea as TextArea +import Examples.TextInput as TextInput +import Examples.Tooltip as Tooltip +import Examples.UiIcon as UiIcon import Html.Styled as Html exposing (Html) import ModuleExample exposing (ModuleExample) import Sort.Set as Set exposing (Set) @@ -53,67 +53,48 @@ type alias ModuleStates = { accordion : Example Accordion.State Accordion.Msg , button : Example Button.State Button.Msg , bannerAlert : Example BannerAlert.State BannerAlert.Msg - - --, clickableTextExample : { state : Examples.ClickableText.State - -- , update :Examples.ClickableText.Msg -> Examples.ClickableText.State -> (Examples.ClickableText.State, Cmd Examples.ClickableText.Msg) } - --, checkboxExample : { state : Examples.Checkbox.State - -- , update :Examples.Checkbox.Msg -> Examples.Checkbox.State -> (Examples.Checkbox.State, Cmd Examples.Checkbox.Msg) } - --, dropdowe : { state : Examples.Dropdown.State Examples.Dropdown.Value - -- , update :Examples.Dropdown.Msg -> Examples.Dropdown.Value -> (Examples.Dropdown.Value, Cmd Examples.Dropdown.Msg) } - --, segmentedControe : { state : Examples.SegmentedControl.State - -- , update :Examples.SegmentedControl.Msg -> Examples.SegmentedControl.State -> (Examples.SegmentedControl.State, Cmd Examples.SegmentedControl.Msg) } - --, selece : { state : Examples.Select.State - -- , update :Examples.Select.Msg -> Examples.Select.State -> (Examples.Select.State, Cmd Examples.Select.Msg) } - --, tableExample : { state : Examples.Table.State - -- , update :Examples.Table.Msg -> Examples.Table.State -> (Examples.Table.State, Cmd Examples.Table.Msg) } - --, textAreaExample : { state : TextAreaExample.State - -- , update : TextAreaExample.Msg -> :: TextAreaExample.State -> (: TextAreaExample.State, Cmd : TextAreaExample.Msg) } - --, textInputExample : { state : TextInputExample.State - -- , update : TextInputExample.Msg -> :: TextInputExample.State -> (: TextInputExample.State, Cmd : TextInputExample.Msg) } - --, disclosureIndicatorExample : { state : Examples.DisclosureIndicator.State - -- , update :Examples.DisclosureIndicator.Msg -> Examples.DisclosureIndicator.State -> (Examples.DisclosureIndicator.State, Cmd Examples.DisclosureIndicator.Msg) } - --, modalExample : { state : Examples.Modal.State - -- , update :Examples.Modal.Msg -> Examples.Modal.State -> (Examples.Modal.State, Cmd Examples.Modal.Msg) } - --, slideModalExample : { state : Examples.SlideModal.State - -- , update :Examples.SlideModal.Msg -> Examples.SlideModal.State -> (Examples.SlideModal.State, Cmd Examples.SlideModal.Msg) } - --, slideExample : { state : Examples.Slide.State - -- , update :Examples.Slide.Msg -> Examples.Slide.State -> (Examples.Slide.State, Cmd Examples.Slide.Msg) } - --, sortableTable : { state : Examples.SortableTable.State - -- , update :Examples.SortableTable.Msg -> Examples.SortableTable.State -> (Examples.SortableTable.State, Cmd Examples.SortableTable.Msg) } - --, sve : { state : Examples.Svg.State - -- , update :Examples.Svg.Msg -> Examples.Svg.State -> (Examples.Svg.State, Cmd Examples.Svg.Msg) } - --, clickableSve : { state : Examples.ClickableSvg.State - -- , update :Examples.ClickableSvg.Msg -> Examples.ClickableSvg.State -> (Examples.ClickableSvg.State, Cmd Examples.ClickableSvg.Msg) } - --, tabsExample : { state : Examples.Tabs.Tab - -- , update :Examples.Tabs.Msg -> Examples.Tabs.Tab -> (Examples.Tabs.Tab, Cmd Examples.Tabs.Msg) } - --, tooltipExample : { state : Examples.Tooltip.State - -- , update :Examples.Tooltip.Msg -> Examples.Tooltip.State -> (Examples.Tooltip.State, Cmd Examples.Tooltip.Msg) } + , clickableText : Example ClickableText.State ClickableText.Msg + , checkbox : Example Checkbox.State Checkbox.Msg + , dropdown : Example Dropdown.State Dropdown.Msg + , segmentedControl : Example SegmentedControl.State SegmentedControl.Msg + , select : Example Select.State Select.Msg + , table : Example Table.State Table.Msg + , textArea : Example TextArea.State TextArea.Msg + , textInput : Example TextInput.State TextInput.Msg + , disclosureIndicator : Example DisclosureIndicator.State DisclosureIndicator.Msg + , modal : Example Modal.State Modal.Msg + , slideModal : Example SlideModal.State SlideModal.Msg + , slide : Example Slide.State Slide.Msg + , sortableTable : Example SortableTable.State SortableTable.Msg + , svg : Example Svg.State Svg.Msg + , clickableSvg : Example ClickableSvg.State ClickableSvg.Msg + , tabs : Example Tabs.State Tabs.Msg + , tooltip : Example Tooltip.State Tooltip.Msg } init : ModuleStates init = { accordion = Accordion.example - , button = Button.example_ + , button = Button.example , bannerAlert = BannerAlert.example - - --, clickableTextExample = { state = Examples.ClickableText.init, update = Examples.ClickableText.init } - --, checkboxExample = { state = Examples.Checkbox.init, update = Examples.Checkbox.init } - --, dropdown = { state = Examples.Dropdown.init, update = Examples.Dropdown.init } - --, segmentedControl = { state = Examples.SegmentedControl.init, update = Examples.SegmentedControl.init } - --, select = { state = Examples.Select.init, update = Examples.Select.init } - --, tableExample = { state = Examples.Table.init, update = Examples.Table.init } - --, textAreaExample = { state = TextAreaExample.init, update = = TextAreaExample.init } - --, textInputExample = { state = TextInputExample.init, update = = TextInputExample.init } - --, disclosureIndicatorExample = { state = Examples.DisclosureIndicator.init, update = Examples.DisclosureIndicator.init } - --, modalExample = { state = Examples.Modal.init, update = Examples.Modal.init } - --, slideModalExample = { state = Examples.SlideModal.init, update = Examples.SlideModal.init } - --, slideExample = { state = Examples.Slide.init, update = Examples.Slide.init } - --, sortableTable = { state = Examples.SortableTable.init, update = Examples.SortableTable.init } - --, svg = { state = Examples.Svg.init, update = Examples.Svg.init } - --, clickableSvg = { state = Examples.ClickableSvg.init, update = Examples.ClickableSvg.init } - --, tabsExample = { state = Examples.Tabs.First, update = Examples.Tabs.First } - --, tooltipExample = { state = Examples.Tooltip.init, update = Examples.Tooltip.init } + , clickableText = ClickableText.example + , checkbox = Checkbox.example + , dropdown = Dropdown.example + , segmentedControl = SegmentedControl.example + , select = Select.example + , table = Table.example + , textArea = TextArea.example + , textInput = TextInput.example + , disclosureIndicator = DisclosureIndicator.example + , modal = Modal.example + , slideModal = SlideModal.example + , slide = Slide.example + , sortableTable = SortableTable.example + , svg = Svg.example + , clickableSvg = ClickableSvg.example + , tabs = Tabs.example + , tooltip = Tooltip.example } @@ -149,6 +130,8 @@ update msg moduleStates = updateWith .bannerAlert (\state m -> { m | bannerAlert = state }) BannerAlertMsg exampleMsg +{-| -} +subscriptions : ModuleStates -> Sub Msg subscriptions moduleStates = Sub.batch [-- Sub.map ModalExampleMsg (Examples.Modal.subscriptions moduleStates.modalExampleState) diff --git a/styleguide-app/Examples/Button.elm b/styleguide-app/Examples/Button.elm index db5fabc3..9f1365ae 100644 --- a/styleguide-app/Examples/Button.elm +++ b/styleguide-app/Examples/Button.elm @@ -1,12 +1,8 @@ -module Examples.Button exposing - ( Msg, State - , example_, init, update - ) +module Examples.Button exposing (Msg, State, example) {-| -@docs example -@docs Msg, State +@docs Msg, State, example -} @@ -22,7 +18,7 @@ import Nri.Ui.Svg.V1 as Svg exposing (Svg) import Nri.Ui.UiIcon.V1 as UiIcon -example_ = +example = { name = "Nri.Ui.Button.V10" , state = init , update = update diff --git a/styleguide-app/Examples/Checkbox.elm b/styleguide-app/Examples/Checkbox.elm index 469f447b..f4e2c570 100644 --- a/styleguide-app/Examples/Checkbox.elm +++ b/styleguide-app/Examples/Checkbox.elm @@ -1,8 +1,8 @@ -module Examples.Checkbox exposing (Msg, State, example, init, update) +module Examples.Checkbox exposing (Msg, State, example) {-| -@docs Msg, State, example, init, update +@docs Msg, State, example -} @@ -10,7 +10,6 @@ import Category exposing (Category(..)) import Css import Html.Styled as Html exposing (..) import Html.Styled.Attributes exposing (css) -import ModuleExample exposing (ModuleExample) import Nri.Ui.Checkbox.V5 as Checkbox import Nri.Ui.Data.PremiumLevel as PremiumLevel exposing (PremiumLevel(..)) import Nri.Ui.PremiumCheckbox.V6 as PremiumCheckbox @@ -31,20 +30,21 @@ type alias State = {-| -} -example : (Msg -> msg) -> State -> ModuleExample msg -example parentMessage state = +example = { name = "Nri.Ui.Checkbox.V5" - , categories = Sort.Set.fromList Category.sorter <| List.singleton Inputs - , content = - [ viewInteractableCheckbox "styleguide-checkbox-interactable" state - , viewIndeterminateCheckbox "styleguide-checkbox-indeterminate" state - , viewLockedOnInsideCheckbox "styleguide-locked-on-inside-checkbox" state - , viewDisabledCheckbox "styleguide-checkbox-disabled" state - , viewMultilineCheckboxes - , h3 [] [ text "Premium Checkboxes" ] - , viewPremiumCheckboxes state - ] - |> List.map (Html.map parentMessage) + , state = init + , update = update + , view = + \state -> + [ viewInteractableCheckbox "styleguide-checkbox-interactable" state + , viewIndeterminateCheckbox "styleguide-checkbox-indeterminate" state + , viewLockedOnInsideCheckbox "styleguide-locked-on-inside-checkbox" state + , viewDisabledCheckbox "styleguide-checkbox-disabled" state + , viewMultilineCheckboxes + , h3 [] [ text "Premium Checkboxes" ] + , viewPremiumCheckboxes state + ] + , categories = [ Inputs ] } diff --git a/styleguide-app/Examples/ClickableSvg.elm b/styleguide-app/Examples/ClickableSvg.elm index 8cfc4105..a18c47a4 100644 --- a/styleguide-app/Examples/ClickableSvg.elm +++ b/styleguide-app/Examples/ClickableSvg.elm @@ -1,18 +1,8 @@ -module Examples.ClickableSvg exposing - ( Msg - , State - , example - , init - , update - ) +module Examples.ClickableSvg exposing (Msg, State, example) {-| -@docs Msg -@docs State -@docs example -@docs init -@docs update +@docs Msg, State, example -} @@ -23,7 +13,6 @@ import Examples.IconExamples as IconExamples import Html.Styled as Html import Html.Styled.Attributes as Attributes import Html.Styled.Events as Events -import ModuleExample exposing (ModuleExample, ModuleMessages) import Nri.Ui.ClickableSvg.V1 as ClickableSvg import Nri.Ui.Colors.Extra exposing (fromCssColor, toCssColor) import Nri.Ui.Colors.V1 as Colors @@ -31,67 +20,64 @@ import Nri.Ui.Heading.V2 as Heading import Nri.Ui.Select.V6 as Select import Nri.Ui.Svg.V1 as Svg import Nri.Ui.UiIcon.V1 as UiIcon -import Sort.Set as Set exposing (Set) {-| -} -example : (String -> ModuleMessages Msg msg) -> State -> ModuleExample msg -example unnamedMessages state = - let - parentMessages = - unnamedMessages "Nri.Ui.ClickableSvg.V1" - in +example = { name = "Nri.Ui.ClickableSvg.V1" - , categories = Set.fromList Category.sorter [ Buttons, Icons ] - , content = - [ Html.div [ Attributes.css [ Css.displayFlex, Css.alignItems Css.center ] ] - [ ClickableSvg.button "Back" - UiIcon.arrowLeft - [ ClickableSvg.onClick (parentMessages.showItWorked "You clicked the back button!") ] - , viewCode - "ClickableSvg.button \"Back\" UiIcon.arrowLeft [ ClickableSvg.onClick OnClickMsg ]" - ] - , Html.div [ Attributes.css [ Css.displayFlex, Css.alignItems Css.center ] ] - [ ClickableSvg.link "Back" UiIcon.arrowLeft [ ClickableSvg.linkSpa "some_link" ] - , viewCode - "ClickableSvg.link \"Back\" UiIcon.arrowLeft [ ClickableSvg.linkSpa \"some_link\" ]" - ] - , Html.div [ Attributes.css [ Css.displayFlex, Css.alignItems Css.center ] ] - [ ClickableSvg.button "Disabled" UiIcon.arrowLeft [ ClickableSvg.disabled True ] - , viewCode - "ClickableSvg.button \"Disabled\" UiIcon.arrowLeft [ ClickableSvg.disabled True ]" - ] - , Html.div [ Attributes.css [ Css.displayFlex, Css.alignItems Css.center ] ] - [ ClickableSvg.link "Disabled" UiIcon.arrowLeft [ ClickableSvg.disabled True ] - , viewCode - "ClickableSvg.link \"Disabled\" UiIcon.arrowLeft [ ClickableSvg.disabled True ]" - ] - , Html.div [ Attributes.css [ Css.displayFlex, Css.alignItems Css.center ] ] - [ ClickableSvg.button "Go to tutorial" - UiIcon.footsteps - [ ClickableSvg.width (Css.px 80) - , ClickableSvg.height (Css.px 80) - , ClickableSvg.onClick (parentMessages.showItWorked "You clicked the tutorials button!") - , ClickableSvg.custom [ Attributes.id "clickable-svg-customized-example-id" ] - , ClickableSvg.css - [ Css.border3 (Css.px 3) Css.dashed Colors.purple - ] + , categories = [ Buttons, Icons ] + , state = init + , update = update + , view = + \state -> + [ Html.div [ Attributes.css [ Css.displayFlex, Css.alignItems Css.center ] ] + [ ClickableSvg.button "Back" + UiIcon.arrowLeft + [ ClickableSvg.onClick (ShowItWorked "You clicked the back button!") ] + , viewCode + "ClickableSvg.button \"Back\" UiIcon.arrowLeft [ ClickableSvg.onClick OnClickMsg ]" ] - , viewCode - """ + , Html.div [ Attributes.css [ Css.displayFlex, Css.alignItems Css.center ] ] + [ ClickableSvg.link "Back" UiIcon.arrowLeft [ ClickableSvg.linkSpa "some_link" ] + , viewCode + "ClickableSvg.link \"Back\" UiIcon.arrowLeft [ ClickableSvg.linkSpa \"some_link\" ]" + ] + , Html.div [ Attributes.css [ Css.displayFlex, Css.alignItems Css.center ] ] + [ ClickableSvg.button "Disabled" UiIcon.arrowLeft [ ClickableSvg.disabled True ] + , viewCode + "ClickableSvg.button \"Disabled\" UiIcon.arrowLeft [ ClickableSvg.disabled True ]" + ] + , Html.div [ Attributes.css [ Css.displayFlex, Css.alignItems Css.center ] ] + [ ClickableSvg.link "Disabled" UiIcon.arrowLeft [ ClickableSvg.disabled True ] + , viewCode + "ClickableSvg.link \"Disabled\" UiIcon.arrowLeft [ ClickableSvg.disabled True ]" + ] + , Html.div [ Attributes.css [ Css.displayFlex, Css.alignItems Css.center ] ] + [ ClickableSvg.button "Go to tutorial" + UiIcon.footsteps + [ ClickableSvg.width (Css.px 80) + , ClickableSvg.height (Css.px 80) + , ClickableSvg.onClick (ShowItWorked "You clicked the tutorials button!") + , ClickableSvg.custom [ Attributes.id "clickable-svg-customized-example-id" ] + , ClickableSvg.css + [ Css.border3 (Css.px 3) Css.dashed Colors.purple + ] + ] + , viewCode + """ ClickableSvg.button "Go to tutorial" UiIcon.footsteps [ ClickableSvg.width (Css.px 80) , ClickableSvg.height (Css.px 80) - , ClickableSvg.onClick (parentMessages.showItWorked "You clicked the tutorials button!") + , ClickableSvg.onClick (ShowItWorked "You clicked the tutorials button!") , ClickableSvg.custom [ Attributes.id "clickable-svg-customized-example-id" ] , ClickableSvg.css [ Css.border3 (Css.px 3) Css.dashed Colors.purple ] ] """ + ] ] - ] } @@ -119,10 +105,16 @@ init = {-| -} type Msg - = SetRenderStrategy String + = ShowItWorked String {-| -} update : Msg -> State -> ( State, Cmd Msg ) update msg state = - ( state, Cmd.none ) + case msg of + ShowItWorked message -> + let + _ = + Debug.log "ClickableSvg" message + in + ( state, Cmd.none ) diff --git a/styleguide-app/Examples/ClickableText.elm b/styleguide-app/Examples/ClickableText.elm index b7e6031d..0577b8da 100644 --- a/styleguide-app/Examples/ClickableText.elm +++ b/styleguide-app/Examples/ClickableText.elm @@ -1,8 +1,8 @@ -module Examples.ClickableText exposing (Msg, State, example, init, update) +module Examples.ClickableText exposing (Msg, State, example) {-| -@docs Msg, State, example, init, update +@docs Msg, State, example -} @@ -11,7 +11,6 @@ import Css exposing (middle, verticalAlign) import Debug.Control as Control exposing (Control) import Html.Styled exposing (..) import Html.Styled.Attributes exposing (css, id) -import ModuleExample exposing (ModuleExample, ModuleMessages) import Nri.Ui.ClickableText.V3 as ClickableText import Nri.Ui.Svg.V1 as Svg exposing (Svg) import Nri.Ui.Text.V4 as Text @@ -19,30 +18,18 @@ import Nri.Ui.UiIcon.V1 as UiIcon import Sort.Set as Set exposing (Set) -{-| -} -type Msg - = SetState State - - {-| -} type State = State (Control Model) {-| -} -example : - (String -> ModuleMessages Msg parentMsg) - -> State - -> ModuleExample parentMsg -example unnamedMessages state = - let - messages = - unnamedMessages "ClickableTextExample" - in +example = { name = "Nri.Ui.ClickableText.V3" - , categories = Set.fromList Category.sorter <| List.singleton Buttons - , content = - [ viewExamples messages state ] + , state = init + , update = update + , view = \state -> [ viewExamples state ] + , categories = [ Buttons ] } @@ -62,6 +49,12 @@ init = |> State +{-| -} +type Msg + = SetState State + | ShowItWorked String String + + {-| -} update : Msg -> State -> ( State, Cmd Msg ) update msg state = @@ -69,6 +62,13 @@ update msg state = SetState newState -> ( newState, Cmd.none ) + ShowItWorked group message -> + let + _ = + Debug.log group message + in + ( state, Cmd.none ) + -- INTERNAL @@ -80,18 +80,15 @@ type alias Model = } -viewExamples : - ModuleMessages Msg parentMsg - -> State - -> Html parentMsg -viewExamples messages (State control) = +viewExamples : State -> Html Msg +viewExamples (State control) = let model = Control.currentValue control in - [ Control.view (State >> SetState >> messages.wrapper) control + [ Control.view (State >> SetState) control |> fromUnstyled - , buttons messages model + , buttons model , Text.smallBody [ text "Sometimes, we'll want our clickable links: " , ClickableText.link model.label @@ -102,7 +99,7 @@ viewExamples messages (State control) = , text " and clickable buttons: " , ClickableText.button model.label [ ClickableText.small - , ClickableText.onClick (messages.showItWorked "in-line button") + , ClickableText.onClick (ShowItWorked "ClickableText" "in-line button") , Maybe.map ClickableText.icon model.icon |> Maybe.withDefault (ClickableText.custom []) ] @@ -120,11 +117,8 @@ sizes = ] -buttons : - ModuleMessages Msg parentMsg - -> Model - -> Html parentMsg -buttons messages model = +buttons : Model -> Html Msg +buttons model = let sizeRow label render = row label (List.map render sizes) @@ -144,7 +138,7 @@ buttons messages model = (\( size, sizeLabel ) -> ClickableText.button model.label [ size - , ClickableText.onClick (messages.showItWorked sizeLabel) + , ClickableText.onClick (ShowItWorked "ClickableText" sizeLabel) , Maybe.map ClickableText.icon model.icon |> Maybe.withDefault (ClickableText.custom []) ] diff --git a/styleguide-app/Examples/DisclosureIndicator.elm b/styleguide-app/Examples/DisclosureIndicator.elm index 9af540ba..8e36b84e 100644 --- a/styleguide-app/Examples/DisclosureIndicator.elm +++ b/styleguide-app/Examples/DisclosureIndicator.elm @@ -1,8 +1,8 @@ -module Examples.DisclosureIndicator exposing (Msg, State, example, init, update) +module Examples.DisclosureIndicator exposing (Msg, State, example) {-| -@docs Msg, State, example, init, update +@docs Msg, State, example -} @@ -11,12 +11,10 @@ import Css import Html.Styled as Html import Html.Styled.Attributes exposing (css) import Html.Styled.Events exposing (onClick) -import ModuleExample exposing (ModuleExample) import Nri.Ui.Button.V8 as Button import Nri.Ui.Colors.V1 as Colors import Nri.Ui.DisclosureIndicator.V2 as DisclosureIndicator import Nri.Ui.Text.V2 as Text -import Sort.Set as Set exposing (Set) {-| -} @@ -27,26 +25,27 @@ type alias State = {-| -} -example : (Msg -> msg) -> State -> ModuleExample msg -example parentMessage state = +example = { name = "Nri.Ui.DisclosureIndicator.V2" - , categories = Set.fromList Category.sorter <| List.singleton Widgets - , content = - [ Text.smallBodyGray [ Html.text "The disclosure indicator is only the caret. It is NOT a button -- you must create a button or clickabletext yourself!" ] - , Html.div [ css [ Css.displayFlex, Css.padding (Css.px 8) ] ] - [ toggleButton ToggleLarge "Toggle large indicator" - , toggleButton ToggleMedium "Toggle medium indicator" + , categories = [ Widgets ] + , state = init + , update = update + , view = + \state -> + [ Text.smallBodyGray [ Html.text "The disclosure indicator is only the caret. It is NOT a button -- you must create a button or clickabletext yourself!" ] + , Html.div [ css [ Css.displayFlex, Css.padding (Css.px 8) ] ] + [ toggleButton ToggleLarge "Toggle large indicator" + , toggleButton ToggleMedium "Toggle medium indicator" + ] + , Html.div [ css [ Css.displayFlex, Css.alignItems Css.center, Css.marginBottom (Css.px 8) ] ] + [ DisclosureIndicator.large [ Css.marginRight (Css.px 10) ] state.largeState + , Html.text "I'm a 17px caret icon." + ] + , Html.div [ css [ Css.displayFlex, Css.alignItems Css.center, Css.marginBottom (Css.px 8) ] ] + [ DisclosureIndicator.medium [ Css.paddingRight (Css.px 8) ] state.mediumState + , Html.text "I'm a 15px caret icon." + ] ] - , Html.div [ css [ Css.displayFlex, Css.alignItems Css.center, Css.marginBottom (Css.px 8) ] ] - [ DisclosureIndicator.large [ Css.marginRight (Css.px 10) ] state.largeState - , Html.text "I'm a 17px caret icon." - ] - , Html.div [ css [ Css.displayFlex, Css.alignItems Css.center, Css.marginBottom (Css.px 8) ] ] - [ DisclosureIndicator.medium [ Css.paddingRight (Css.px 8) ] state.mediumState - , Html.text "I'm a 15px caret icon." - ] - ] - |> List.map (Html.map parentMessage) } diff --git a/styleguide-app/Examples/Dropdown.elm b/styleguide-app/Examples/Dropdown.elm index eb0b6f21..53a4615f 100644 --- a/styleguide-app/Examples/Dropdown.elm +++ b/styleguide-app/Examples/Dropdown.elm @@ -1,8 +1,8 @@ -module Examples.Dropdown exposing (Msg, State, Value, example, init, update) +module Examples.Dropdown exposing (Msg, State, example) {-| -@docs Msg, State, Value, example, init, update +@docs Msg, State, example -} @@ -13,34 +13,31 @@ import Nri.Ui.Dropdown.V2 import Sort.Set as Set exposing (Set) -{-| -} -type alias Value = - String - - {-| -} type Msg = ConsoleLog String {-| -} -type alias State value = - List (Nri.Ui.Dropdown.V2.ViewOptionEntry value) +type alias State = + List (Nri.Ui.Dropdown.V2.ViewOptionEntry String) {-| -} -example : (Msg -> msg) -> State Value -> ModuleExample msg -example parentMessage state = +example = { name = "Nri.Ui.Dropdown.V2" - , categories = Set.fromList Category.sorter <| List.singleton Inputs - , content = - [ Html.Styled.map parentMessage (Nri.Ui.Dropdown.V2.view "All the foods!" state ConsoleLog) - ] + , state = init + , update = update + , view = + \state -> + [ Nri.Ui.Dropdown.V2.view "All the foods!" state ConsoleLog + ] + , categories = [ Inputs ] } {-| -} -init : State Value +init : State init = [ { isSelected = False, val = "Burrito", displayText = "Burrito" } , { isSelected = False, val = "Nacho", displayText = "Nacho" } @@ -49,7 +46,7 @@ init = {-| -} -update : Msg -> State Value -> ( State Value, Cmd Msg ) +update : Msg -> State -> ( State, Cmd Msg ) update msg state = case msg of ConsoleLog message -> diff --git a/styleguide-app/Examples/Modal.elm b/styleguide-app/Examples/Modal.elm index 18dd6f35..bb0dc472 100644 --- a/styleguide-app/Examples/Modal.elm +++ b/styleguide-app/Examples/Modal.elm @@ -1,8 +1,8 @@ -module Examples.Modal exposing (Msg, State, example, init, update, subscriptions) +module Examples.Modal exposing (Msg, State, example) {-| -@docs Msg, State, example, init, update, subscriptions +@docs Msg, State, example -} @@ -12,14 +12,12 @@ import Css exposing (..) import Css.Global import Html as Root import Html.Styled.Attributes as Attributes -import ModuleExample exposing (ModuleExample) import Nri.Ui.Button.V10 as Button import Nri.Ui.Checkbox.V5 as Checkbox import Nri.Ui.ClickableText.V3 as ClickableText import Nri.Ui.Colors.V1 as Colors import Nri.Ui.Modal.V8 as Modal import Nri.Ui.Text.V4 as Text -import Sort.Set as Set exposing (Set) {-| -} @@ -50,41 +48,42 @@ init = {-| -} -example : (Msg -> msg) -> State -> ModuleExample msg -example parentMessage state = +example = { name = "Nri.Ui.Modal.V8" - , categories = Set.fromList Category.sorter <| List.singleton Modals - , content = - [ viewSettings state - , Button.button "Launch Info Modal" - [ Button.onClick (InfoModalMsg (Modal.open "launch-info-modal")) - , Button.custom [ Attributes.id "launch-info-modal" ] - , Button.css [ Css.marginRight (Css.px 16) ] - , Button.secondary - , Button.medium + , categories = [ Modals ] + , state = init + , update = update + , view = + \state -> + [ viewSettings state + , Button.button "Launch Info Modal" + [ Button.onClick (InfoModalMsg (Modal.open "launch-info-modal")) + , Button.custom [ Attributes.id "launch-info-modal" ] + , Button.css [ Css.marginRight (Css.px 16) ] + , Button.secondary + , Button.medium + ] + , Button.button "Launch Warning Modal" + [ Button.onClick (WarningModalMsg (Modal.open "launch-warning-modal")) + , Button.custom [ Attributes.id "launch-warning-modal" ] + , Button.secondary + , Button.medium + ] + , let + params = + ( state, InfoModalMsg, Button.primary ) + in + Modal.info { title = "Modal.info", wrapMsg = InfoModalMsg, visibleTitle = state.visibleTitle } + (getFocusable params) + state.infoModal + , let + params = + ( state, WarningModalMsg, Button.danger ) + in + Modal.warning { title = "Modal.warning", wrapMsg = WarningModalMsg, visibleTitle = state.visibleTitle } + (getFocusable params) + state.warningModal ] - , Button.button "Launch Warning Modal" - [ Button.onClick (WarningModalMsg (Modal.open "launch-warning-modal")) - , Button.custom [ Attributes.id "launch-warning-modal" ] - , Button.secondary - , Button.medium - ] - , let - params = - ( state, InfoModalMsg, Button.primary ) - in - Modal.info { title = "Modal.info", wrapMsg = InfoModalMsg, visibleTitle = state.visibleTitle } - (getFocusable params) - state.infoModal - , let - params = - ( state, WarningModalMsg, Button.danger ) - in - Modal.warning { title = "Modal.warning", wrapMsg = WarningModalMsg, visibleTitle = state.visibleTitle } - (getFocusable params) - state.warningModal - ] - |> List.map (Html.map parentMessage) } diff --git a/styleguide-app/Examples/SegmentedControl.elm b/styleguide-app/Examples/SegmentedControl.elm index bb9093fe..300f1026 100644 --- a/styleguide-app/Examples/SegmentedControl.elm +++ b/styleguide-app/Examples/SegmentedControl.elm @@ -1,18 +1,12 @@ module Examples.SegmentedControl exposing - ( Msg - , State + ( Msg, State , example - , init - , update ) {-| -@docs Msg -@docs State +@docs Msg, State @docs example -@docs init -@docs update -} @@ -22,51 +16,50 @@ import Debug.Control as Control exposing (Control) import Html.Styled as Html exposing (Html) import Html.Styled.Attributes as Attr import Html.Styled.Events as Events -import ModuleExample exposing (ModuleExample) import Nri.Ui.Colors.V1 as Colors import Nri.Ui.SegmentedControl.V8 as SegmentedControl import Nri.Ui.Svg.V1 as Svg exposing (Svg) import Nri.Ui.UiIcon.V1 as UiIcon -import Sort.Set as Set exposing (Set) {-| -} -example : (Msg -> msg) -> State -> ModuleExample msg -example parentMessage state = - let - options = - Control.currentValue state.optionsControl - in +example = { name = "Nri.Ui.SegmentedControl.V8" - , categories = Set.fromList Category.sorter <| List.singleton Widgets - , content = - [ Control.view ChangeOptions state.optionsControl - |> Html.fromUnstyled - , let - viewFn = - if options.useSpa then - SegmentedControl.viewSpa Debug.toString + , state = init + , update = update + , view = + \state -> + let + options = + Control.currentValue state.optionsControl + in + [ Control.view ChangeOptions state.optionsControl + |> Html.fromUnstyled + , let + viewFn = + if options.useSpa then + SegmentedControl.viewSpa Debug.toString - else - SegmentedControl.view - in - viewFn - { onClick = Select - , options = buildOptions "" options [ UiIcon.flag, UiIcon.star, Svg.withColor Colors.greenDark UiIcon.attention ] - , selected = state.selected - , width = options.width - , content = Html.text ("[Content for " ++ Debug.toString state.selected ++ "]") - } - , Html.h3 [] [ Html.text "Toggle only view" ] - , Html.p [] [ Html.text "Used when you only need the ui element and not a page control." ] - , SegmentedControl.viewToggle - { onClick = Select - , options = buildOptions "Toggle-Only " options [ UiIcon.leaderboard, UiIcon.person, UiIcon.performance ] - , selected = state.selected - , width = options.width - } - ] - |> List.map (Html.map parentMessage) + else + SegmentedControl.view + in + viewFn + { onClick = Select + , options = buildOptions "" options [ UiIcon.flag, UiIcon.star, Svg.withColor Colors.greenDark UiIcon.attention ] + , selected = state.selected + , width = options.width + , content = Html.text ("[Content for " ++ Debug.toString state.selected ++ "]") + } + , Html.h3 [] [ Html.text "Toggle only view" ] + , Html.p [] [ Html.text "Used when you only need the ui element and not a page control." ] + , SegmentedControl.viewToggle + { onClick = Select + , options = buildOptions "Toggle-Only " options [ UiIcon.leaderboard, UiIcon.person, UiIcon.performance ] + , selected = state.selected + , width = options.width + } + ] + , categories = [ Widgets ] } diff --git a/styleguide-app/Examples/Select.elm b/styleguide-app/Examples/Select.elm index 880c7b3d..0678a84f 100644 --- a/styleguide-app/Examples/Select.elm +++ b/styleguide-app/Examples/Select.elm @@ -1,18 +1,8 @@ -module Examples.Select exposing - ( Msg - , State - , example - , init - , update - ) +module Examples.Select exposing (Msg, State, example) {-| -@docs Msg -@docs State -@docs example -@docs init -@docs update +@docs Msg, State, example -} @@ -20,62 +10,62 @@ import Category exposing (Category(..)) import Css import Html.Styled import Html.Styled.Attributes -import ModuleExample exposing (ModuleExample) import Nri.Ui.Heading.V2 as Heading import Nri.Ui.Select.V7 as Select -import Sort.Set as Set exposing (Set) {-| -} -example : (Msg -> msg) -> State -> ModuleExample msg -example parentMessage state = +example = { name = "Nri.Ui.Select.V7" - , categories = Set.fromList Category.sorter <| List.singleton Inputs - , content = - [ Html.Styled.label - [ Html.Styled.Attributes.for "tortilla-selector" ] - [ Heading.h3 [] [ Html.Styled.text "Tortilla Selector" ] ] - , Select.view - { current = Nothing - , choices = - [ { label = "Tacos", value = "Tacos" } - , { label = "Burritos", value = "Burritos" } - , { label = "Enchiladas", value = "Enchiladas" } - ] - , id = "tortilla-selector" - , valueToString = identity - , defaultDisplayText = Just "Select a tasty tortilla based treat!" - , isInError = False - } - |> Html.Styled.map (parentMessage << ConsoleLog) - , Html.Styled.label - [ Html.Styled.Attributes.for "errored-selector" ] - [ Heading.h3 [] [ Html.Styled.text "Errored Selector" ] ] - , Select.view - { current = Nothing - , choices = [] - , id = "errored-selector" - , valueToString = identity - , defaultDisplayText = Just "Please select an option" - , isInError = True - } - |> Html.Styled.map (parentMessage << ConsoleLog) - , Html.Styled.label - [ Html.Styled.Attributes.for "overflowed-selector" ] - [ Heading.h3 [] [ Html.Styled.text "Selector with Overflowed Text" ] ] - , Html.Styled.div - [ Html.Styled.Attributes.css [ Css.maxWidth (Css.px 400) ] ] - [ Select.view + , state = init + , update = update + , categories = [ Inputs ] + , view = + \state -> + [ Html.Styled.label + [ Html.Styled.Attributes.for "tortilla-selector" ] + [ Heading.h3 [] [ Html.Styled.text "Tortilla Selector" ] ] + , Select.view { current = Nothing - , choices = [] - , id = "overflowed-selector" + , choices = + [ { label = "Tacos", value = "Tacos" } + , { label = "Burritos", value = "Burritos" } + , { label = "Enchiladas", value = "Enchiladas" } + ] + , id = "tortilla-selector" , valueToString = identity - , defaultDisplayText = Just "Look at me, I design coastlines, I got an award for Norway. Where's the sense in that?" + , defaultDisplayText = Just "Select a tasty tortilla based treat!" , isInError = False } - |> Html.Styled.map (parentMessage << ConsoleLog) + |> Html.Styled.map ConsoleLog + , Html.Styled.label + [ Html.Styled.Attributes.for "errored-selector" ] + [ Heading.h3 [] [ Html.Styled.text "Errored Selector" ] ] + , Select.view + { current = Nothing + , choices = [] + , id = "errored-selector" + , valueToString = identity + , defaultDisplayText = Just "Please select an option" + , isInError = True + } + |> Html.Styled.map ConsoleLog + , Html.Styled.label + [ Html.Styled.Attributes.for "overflowed-selector" ] + [ Heading.h3 [] [ Html.Styled.text "Selector with Overflowed Text" ] ] + , Html.Styled.div + [ Html.Styled.Attributes.css [ Css.maxWidth (Css.px 400) ] ] + [ Select.view + { current = Nothing + , choices = [] + , id = "overflowed-selector" + , valueToString = identity + , defaultDisplayText = Just "Look at me, I design coastlines, I got an award for Norway. Where's the sense in that?" + , isInError = False + } + |> Html.Styled.map ConsoleLog + ] ] - ] } diff --git a/styleguide-app/Examples/Slide.elm b/styleguide-app/Examples/Slide.elm index ee2ce2bc..cdba3cdc 100644 --- a/styleguide-app/Examples/Slide.elm +++ b/styleguide-app/Examples/Slide.elm @@ -1,8 +1,8 @@ -module Examples.Slide exposing (Msg, State, example, init, update) +module Examples.Slide exposing (Msg, State, example) {-| -@docs Msg, State, example, init, update +@docs Msg, State, example -} @@ -12,11 +12,9 @@ import Css import Html.Styled.Attributes exposing (css) import Html.Styled.Keyed as Keyed import List.Zipper as Zipper exposing (Zipper) -import ModuleExample exposing (ModuleExample) import Nri.Ui.Button.V8 as Button import Nri.Ui.Colors.V1 as Colors import Nri.Ui.Slide.V1 as Slide -import Sort.Set as Set exposing (Set) {-| -} @@ -33,42 +31,43 @@ type alias State = {-| -} -example : (Msg -> msg) -> State -> ModuleExample msg -example parentMessage state = +example = { name = "Nri.Ui.Slide.V1" - , categories = Set.fromList Category.sorter <| List.singleton Animations - , content = - [ Keyed.node "div" - [ css - [ Slide.withSlidingContents - , Css.border3 (Css.px 3) Css.solid Colors.gray75 - , Css.padding (Css.px 20) - , Css.width (Css.px 600) - ] - ] - (case state.previous of - Just previousPanel -> - [ viewPanel previousPanel (Slide.animateOut state.direction) - , viewPanel (Zipper.current state.panels) (Slide.animateIn state.direction) + , categories = [ Animations ] + , state = init + , update = update + , view = + \state -> + [ Keyed.node "div" + [ css + [ Slide.withSlidingContents + , Css.border3 (Css.px 3) Css.solid Colors.gray75 + , Css.padding (Css.px 20) + , Css.width (Css.px 600) ] + ] + (case state.previous of + Just previousPanel -> + [ viewPanel previousPanel (Slide.animateOut state.direction) + , viewPanel (Zipper.current state.panels) (Slide.animateIn state.direction) + ] - Nothing -> - [ viewPanel (Zipper.current state.panels) (Css.batch []) + Nothing -> + [ viewPanel (Zipper.current state.panels) (Css.batch []) + ] + ) + , Html.div + [ css + [ Css.displayFlex + , Css.justifyContent Css.spaceBetween + , Css.marginTop (Css.px 20) + , Css.width (Css.px 300) ] - ) - , Html.div - [ css - [ Css.displayFlex - , Css.justifyContent Css.spaceBetween - , Css.marginTop (Css.px 20) - , Css.width (Css.px 300) + ] + [ triggerAnimation Slide.FromLTR "Left-to-right" + , triggerAnimation Slide.FromRTL "Right-to-left" ] ] - [ triggerAnimation Slide.FromLTR "Left-to-right" - , triggerAnimation Slide.FromRTL "Right-to-left" - ] - ] - |> List.map (Html.map parentMessage) } diff --git a/styleguide-app/Examples/SlideModal.elm b/styleguide-app/Examples/SlideModal.elm index aba93484..036557cf 100644 --- a/styleguide-app/Examples/SlideModal.elm +++ b/styleguide-app/Examples/SlideModal.elm @@ -1,8 +1,8 @@ -module Examples.SlideModal exposing (Msg, State, example, init, update) +module Examples.SlideModal exposing (Msg, State, example) {-| -@docs Msg, State, example, init, update +@docs Msg, State, example -} @@ -11,11 +11,9 @@ import Category exposing (Category(..)) import Css import Html.Styled exposing (fromUnstyled) import Html.Styled.Attributes exposing (css) -import ModuleExample exposing (ModuleExample) import Nri.Ui.Button.V8 as Button import Nri.Ui.Colors.V1 as Colors import Nri.Ui.SlideModal.V2 as SlideModal -import Sort.Set as Set exposing (Set) import Svg exposing (..) import Svg.Attributes exposing (..) @@ -31,15 +29,16 @@ type alias State = {-| -} -example : (Msg -> msg) -> State -> ModuleExample msg -example parentMessage state = +example = { name = "Nri.Ui.SlideModal.V2" - , categories = Set.fromList Category.sorter <| List.singleton Modals - , content = - [ viewModal state.modal - , modalLaunchButton - ] - |> List.map (Html.map parentMessage) + , categories = [ Modals ] + , state = init + , update = update + , view = + \state -> + [ viewModal state.modal + , modalLaunchButton + ] } diff --git a/styleguide-app/Examples/SortableTable.elm b/styleguide-app/Examples/SortableTable.elm index 669b41f3..c0be55a4 100644 --- a/styleguide-app/Examples/SortableTable.elm +++ b/styleguide-app/Examples/SortableTable.elm @@ -1,17 +1,15 @@ -module Examples.SortableTable exposing (Msg, State, example, init, update) +module Examples.SortableTable exposing (Msg, State, example) {-| - @docs Msg, State, example, init, update +@docs Msg, State, example -} import Category exposing (Category(..)) import Html.Styled as Html -import ModuleExample exposing (ModuleExample) import Nri.Ui.Heading.V2 as Heading import Nri.Ui.SortableTable.V1 as SortableTable -import Sort.Set as Set exposing (Set) type Column @@ -32,51 +30,52 @@ type alias State = {-| -} -example : (Msg -> msg) -> State -> ModuleExample msg -example parentMessage { sortState } = +example = { name = "Nri.Ui.SortableTable.V1" - , categories = Set.fromList Category.sorter <| List.singleton Tables - , content = - let - config = - { updateMsg = SetSortState - , columns = - [ SortableTable.string - { id = FirstName - , header = "First name" - , value = .firstName - , width = 125 - } - , SortableTable.string - { id = LastName - , header = "Last name" - , value = .lastName - , width = 125 - } - , SortableTable.custom - { id = Coins - , header = Html.text "Coins" - , view = .coins >> String.fromInt >> Html.text - , sorter = SortableTable.simpleSort .coins - , width = 125 - } - ] - } + , categories = [ Tables ] + , state = init + , update = update + , view = + \{ sortState } -> + let + config = + { updateMsg = SetSortState + , columns = + [ SortableTable.string + { id = FirstName + , header = "First name" + , value = .firstName + , width = 125 + } + , SortableTable.string + { id = LastName + , header = "Last name" + , value = .lastName + , width = 125 + } + , SortableTable.custom + { id = Coins + , header = Html.text "Coins" + , view = .coins >> String.fromInt >> Html.text + , sorter = SortableTable.simpleSort .coins + , width = 125 + } + ] + } - data = - [ { firstName = "First1", lastName = "Last1", coins = 1 } - , { firstName = "First2", lastName = "Last2", coins = 2 } - , { firstName = "First3", lastName = "Last3", coins = 3 } - , { firstName = "First4", lastName = "Last4", coins = 4 } - , { firstName = "First5", lastName = "Last5", coins = 5 } - ] - in - [ Heading.h3 [] [ Html.text "With sortable headers" ] - , SortableTable.view config sortState data - , Heading.h3 [] [ Html.text "Loading" ] - , SortableTable.viewLoading config sortState - ] - |> List.map (Html.map parentMessage) + data = + [ { firstName = "First1", lastName = "Last1", coins = 1 } + , { firstName = "First2", lastName = "Last2", coins = 2 } + , { firstName = "First3", lastName = "Last3", coins = 3 } + , { firstName = "First4", lastName = "Last4", coins = 4 } + , { firstName = "First5", lastName = "Last5", coins = 5 } + ] + in + [ Heading.h3 [] [ Html.text "With sortable headers" ] + , SortableTable.view config sortState data + , Heading.h3 [] [ Html.text "Loading" ] + , SortableTable.viewLoading config sortState + ] } diff --git a/styleguide-app/Examples/Svg.elm b/styleguide-app/Examples/Svg.elm index 09162fcb..1eb175e0 100644 --- a/styleguide-app/Examples/Svg.elm +++ b/styleguide-app/Examples/Svg.elm @@ -1,18 +1,8 @@ -module Examples.Svg exposing - ( Msg - , State - , example - , init - , update - ) +module Examples.Svg exposing (Msg, State, example) {-| -@docs Msg -@docs State -@docs example -@docs init -@docs update +@docs Msg, State, example -} @@ -23,30 +13,25 @@ import Examples.IconExamples as IconExamples import Html.Styled as Html import Html.Styled.Attributes as Attributes import Html.Styled.Events as Events -import ModuleExample exposing (ModuleExample, ModuleMessages) 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.V6 as Select import Nri.Ui.Svg.V1 as Svg import Nri.Ui.UiIcon.V1 as UiIcon -import Sort.Set as Set exposing (Set) {-| -} -example : (String -> ModuleMessages Msg msg) -> State -> ModuleExample msg -example unnamedMessages state = - let - parentMessages = - unnamedMessages "Nri.Ui.Svg.V1" - in +example = { name = "Nri.Ui.Svg.V1" - , categories = Set.fromList Category.sorter <| List.singleton Icons - , content = - [ viewSettings state - |> Html.map parentMessages.wrapper - , viewResults parentMessages.showItWorked state - ] + , categories = [ Icons ] + , state = init + , update = update + , view = + \state -> + [ viewSettings state + , viewResults state + ] } @@ -100,8 +85,8 @@ viewSettings state = ] -viewResults : (String -> msg) -> State -> Html.Html msg -viewResults msg state = +viewResults : State -> Html.Html Msg +viewResults state = let ( red, green, blue ) = Color.toRGB state.color diff --git a/styleguide-app/Examples/Table.elm b/styleguide-app/Examples/Table.elm index 8cf99263..5c6ee637 100644 --- a/styleguide-app/Examples/Table.elm +++ b/styleguide-app/Examples/Table.elm @@ -1,13 +1,14 @@ -module Examples.Table exposing (Msg, State, example, init, update) +module Examples.Table exposing (Msg, State, example) + +{-| + +@docs Msg, State, example -{- \ - @docs Msg, State, example, init, update -} import Category exposing (Category(..)) import Css exposing (..) import Html.Styled as Html -import ModuleExample exposing (ModuleExample) import Nri.Ui.Button.V5 as Button import Nri.Ui.Colors.V1 as Colors import Nri.Ui.Heading.V2 as Heading @@ -15,102 +16,89 @@ import Nri.Ui.Table.V5 as Table import Sort.Set as Set exposing (Set) -{-| -} -type Msg - = NoOp - - {-| -} type alias State = () {-| -} -example : (Msg -> msg) -> State -> ModuleExample msg -example parentMessage state = - { name = "Nri.Ui.Table.V5" - , categories = Set.fromList Category.sorter <| List.singleton Tables - , content = - let - columns = - [ Table.string - { header = "First Name" - , value = .firstName - , width = calc (pct 50) minus (px 250) - , cellStyles = always [] - } - , Table.string - { header = "Last Name" - , value = .lastName - , width = calc (pct 50) minus (px 250) - , cellStyles = always [] - } - , Table.string - { header = "# Submitted" - , value = .submitted >> String.fromInt - , width = px 125 - , cellStyles = - \value -> - if value.submitted < 5 then - [ backgroundColor Colors.redLight - , textAlign center - ] - - else - [ textAlign center ] - } - , Table.custom - { header = - Html.text "Actions" - , width = px 250 - , view = - \_ -> - Button.button - { size = Button.Small - , style = Button.Primary - , onClick = NoOp - , width = Button.WidthUnbounded - } - { label = "Action" - , state = Button.Enabled - , icon = Nothing - } - , cellStyles = always [] - } - ] - - data = - [ { firstName = "First1", lastName = "Last1", submitted = 10 } - , { firstName = "First2", lastName = "Last2", submitted = 0 } - , { firstName = "First3", lastName = "Last3", submitted = 3 } - , { firstName = "First4", lastName = "Last4", submitted = 15 } - , { firstName = "First5", lastName = "Last5", submitted = 8 } - ] - in - [ Heading.h3 [] [ Html.text "With header" ] - , Table.view columns data - , Heading.h3 [] [ Html.text "Without header" ] - , Table.viewWithoutHeader columns data - , Heading.h3 [] [ Html.text "With additional cell styles" ] - , Table.view columns data - , Heading.h3 [] [ Html.text "Loading" ] - , Table.viewLoading columns - , Heading.h3 [] [ Html.text "Loading without header" ] - , Table.viewLoadingWithoutHeader columns - ] - |> List.map (Html.map parentMessage) - } - - -{-| -} -init : State -init = +type alias Msg = () {-| -} -update : Msg -> State -> ( State, Cmd Msg ) -update msg state = - case msg of - NoOp -> - ( state, Cmd.none ) +example = + { name = "Nri.Ui.Table.V5" + , state = () + , update = \_ state -> ( state, Cmd.none ) + , categories = [ Tables ] + , view = + \state -> + let + columns = + [ Table.string + { header = "First Name" + , value = .firstName + , width = calc (pct 50) minus (px 250) + , cellStyles = always [] + } + , Table.string + { header = "Last Name" + , value = .lastName + , width = calc (pct 50) minus (px 250) + , cellStyles = always [] + } + , Table.string + { header = "# Submitted" + , value = .submitted >> String.fromInt + , width = px 125 + , cellStyles = + \value -> + if value.submitted < 5 then + [ backgroundColor Colors.redLight + , textAlign center + ] + + else + [ textAlign center ] + } + , Table.custom + { header = + Html.text "Actions" + , width = px 250 + , view = + \_ -> + Button.button + { size = Button.Small + , style = Button.Primary + , onClick = () + , width = Button.WidthUnbounded + } + { label = "Action" + , state = Button.Enabled + , icon = Nothing + } + , cellStyles = always [] + } + ] + + data = + [ { firstName = "First1", lastName = "Last1", submitted = 10 } + , { firstName = "First2", lastName = "Last2", submitted = 0 } + , { firstName = "First3", lastName = "Last3", submitted = 3 } + , { firstName = "First4", lastName = "Last4", submitted = 15 } + , { firstName = "First5", lastName = "Last5", submitted = 8 } + ] + in + [ Heading.h3 [] [ Html.text "With header" ] + , Table.view columns data + , Heading.h3 [] [ Html.text "Without header" ] + , Table.viewWithoutHeader columns data + , Heading.h3 [] [ Html.text "With additional cell styles" ] + , Table.view columns data + , Heading.h3 [] [ Html.text "Loading" ] + , Table.viewLoading columns + , Heading.h3 [] [ Html.text "Loading without header" ] + , Table.viewLoadingWithoutHeader columns + ] + } diff --git a/styleguide-app/Examples/Tabs.elm b/styleguide-app/Examples/Tabs.elm index a5d1baa9..e4be5057 100644 --- a/styleguide-app/Examples/Tabs.elm +++ b/styleguide-app/Examples/Tabs.elm @@ -1,67 +1,72 @@ module Examples.Tabs exposing ( example - , Tab(..) + , State, Msg ) {-| @docs example +@docs State, Msg -} import Category exposing (Category(..)) import Html.Styled as Html import List.Zipper -import ModuleExample exposing (ModuleExample) import Nri.Ui.Tabs.V4 as Tabs -import Sort.Set as Set exposing (Set) -type Tab +type State = First | Second -example : (Tab -> msg) -> Tab -> ModuleExample msg -example changeTab tab = - { name = "Nri.Ui.Tabs.V4" - , categories = Set.fromList Category.sorter <| List.singleton Layout - , content = - [ Tabs.view - { title = Nothing - , onSelect = changeTab - , tabs = - case tab of - First -> - List.Zipper.from [] - (Tabs.Tab "First tab" First) - [ Tabs.Tab "Second tab" Second ] +type alias Msg = + State - Second -> - List.Zipper.from [] - (Tabs.Tab "Second tab" Second) - [ Tabs.Tab "First tab" First ] - , content = - \id -> - case id of + +example = + { name = "Nri.Ui.Tabs.V4" + , categories = [ Layout ] + , state = First + , update = \newTab oldTab -> ( newTab, Cmd.none ) + , view = + \tab -> + [ Tabs.view + { title = Nothing + , onSelect = identity + , tabs = + case tab of First -> - Html.text "First" + List.Zipper.from [] + (Tabs.Tab "First tab" First) + [ Tabs.Tab "Second tab" Second ] Second -> - Html.text "Second" - , alignment = Tabs.Center - } - , Tabs.links - { title = Nothing - , content = Html.text "Links" - , alignment = Tabs.Left - , tabs = - List.Zipper.from - [] - (Tabs.NormalLink { label = "Nowhere", href = Nothing }) - [ Tabs.NormalLink { label = "Elm", href = Just "http://elm-lang.org" } - , Tabs.SpaLink { label = "Spa", href = "/#category/Layout", msg = changeTab Second } - ] - } - ] + List.Zipper.from [] + (Tabs.Tab "Second tab" Second) + [ Tabs.Tab "First tab" First ] + , content = + \id -> + case id of + First -> + Html.text "First" + + Second -> + Html.text "Second" + , alignment = Tabs.Center + } + , Tabs.links + { title = Nothing + , content = Html.text "Links" + , alignment = Tabs.Left + , tabs = + List.Zipper.from + [] + (Tabs.NormalLink { label = "Nowhere", href = Nothing }) + [ Tabs.NormalLink { label = "Elm", href = Just "http://elm-lang.org" } + , Tabs.SpaLink { label = "Spa", href = "/#category/Layout", msg = Second } + ] + } + ] } diff --git a/styleguide-app/Examples/TextArea.elm b/styleguide-app/Examples/TextArea.elm index 56b447fc..5b5e5039 100644 --- a/styleguide-app/Examples/TextArea.elm +++ b/styleguide-app/Examples/TextArea.elm @@ -1,20 +1,18 @@ -module Examples.TextArea exposing (Msg, State, example, init, update) +module Examples.TextArea exposing (Msg, State, example) {-| -@docs Msg, State, example, init, update +@docs Msg, State, example -} import Category exposing (Category(..)) import Dict exposing (Dict) import Html.Styled as Html -import ModuleExample exposing (ModuleExample) import Nri.Ui.AssetPath exposing (Asset(..)) import Nri.Ui.Checkbox.V5 as Checkbox import Nri.Ui.Heading.V2 as Heading import Nri.Ui.TextArea.V4 as TextArea -import Sort.Set as Set exposing (Set) {-| -} @@ -35,104 +33,105 @@ type alias State = {-| -} -example : (Msg -> msg) -> State -> ModuleExample msg -example parentMessage state = +example = { name = "Nri.Ui.TextArea.V4" - , categories = Set.fromList Category.sorter <| List.singleton Inputs - , content = - [ Heading.h1 [] [ Html.text "Textarea controls" ] - , Html.div [] - [ Checkbox.viewWithLabel - { identifier = "show-textarea-label" - , label = "Show Label" - , setterMsg = ToggleLabel - , selected = state.showLabel - , disabled = False - , theme = Checkbox.Square + , state = init + , update = update + , categories = [ Inputs ] + , view = + \state -> + [ Heading.h1 [] [ Html.text "Textarea controls" ] + , Html.div [] + [ Checkbox.viewWithLabel + { identifier = "show-textarea-label" + , label = "Show Label" + , setterMsg = ToggleLabel + , selected = state.showLabel + , disabled = False + , theme = Checkbox.Square + } + , Checkbox.viewWithLabel + { identifier = "textarea-autoresize" + , label = "Autoresize" + , setterMsg = ToggleAutoResize + , selected = state.autoResize + , disabled = False + , theme = Checkbox.Square + } + , Checkbox.viewWithLabel + { identifier = "textarea-isInError" + , label = "Show Error State" + , setterMsg = ToggleErrorState + , selected = state.isInError + , disabled = False + , theme = Checkbox.Square + } + ] + , TextArea.view + { value = Maybe.withDefault "" <| Dict.get 1 state.textValues + , autofocus = False + , onInput = InputGiven 1 + , onBlur = Nothing + , isInError = state.isInError == Checkbox.Selected + , label = "TextArea.view" + , height = + if state.autoResize == Checkbox.Selected then + TextArea.AutoResize TextArea.SingleLine + + else + TextArea.Fixed + , placeholder = "Placeholder" + , showLabel = state.showLabel == Checkbox.Selected } - , Checkbox.viewWithLabel - { identifier = "textarea-autoresize" - , label = "Autoresize" - , setterMsg = ToggleAutoResize - , selected = state.autoResize - , disabled = False - , theme = Checkbox.Square + , TextArea.writing + { value = Maybe.withDefault "" <| Dict.get 2 state.textValues + , autofocus = False + , onInput = InputGiven 2 + , onBlur = Nothing + , isInError = state.isInError == Checkbox.Selected + , label = "TextArea.writing" + , height = + if state.autoResize == Checkbox.Selected then + TextArea.AutoResize TextArea.DefaultHeight + + else + TextArea.Fixed + , placeholder = "Placeholder" + , showLabel = state.showLabel == Checkbox.Selected } - , Checkbox.viewWithLabel - { identifier = "textarea-isInError" - , label = "Show Error State" - , setterMsg = ToggleErrorState - , selected = state.isInError - , disabled = False - , theme = Checkbox.Square + , TextArea.contentCreation + { value = Maybe.withDefault "" <| Dict.get 3 state.textValues + , autofocus = False + , onInput = InputGiven 3 + , onBlur = Nothing + , isInError = state.isInError == Checkbox.Selected + , label = "TextArea.contentCreation" + , height = + if state.autoResize == Checkbox.Selected then + TextArea.AutoResize TextArea.DefaultHeight + + else + TextArea.Fixed + , placeholder = "Placeholder" + , showLabel = state.showLabel == Checkbox.Selected + } + , TextArea.writing + { value = Maybe.withDefault "" <| Dict.get 4 state.textValues + , autofocus = False + , onInput = InputGiven 4 + , onBlur = Just (InputGiven 4 "Neener neener Blur happened") + , isInError = state.isInError == Checkbox.Selected + , label = "TextArea.writing onBlur demonstration" + , height = + if state.autoResize == Checkbox.Selected then + TextArea.AutoResize TextArea.DefaultHeight + + else + TextArea.Fixed + , placeholder = "Placeholder" + , showLabel = state.showLabel == Checkbox.Selected } ] - , TextArea.view - { value = Maybe.withDefault "" <| Dict.get 1 state.textValues - , autofocus = False - , onInput = InputGiven 1 - , onBlur = Nothing - , isInError = state.isInError == Checkbox.Selected - , label = "TextArea.view" - , height = - if state.autoResize == Checkbox.Selected then - TextArea.AutoResize TextArea.SingleLine - - else - TextArea.Fixed - , placeholder = "Placeholder" - , showLabel = state.showLabel == Checkbox.Selected - } - , TextArea.writing - { value = Maybe.withDefault "" <| Dict.get 2 state.textValues - , autofocus = False - , onInput = InputGiven 2 - , onBlur = Nothing - , isInError = state.isInError == Checkbox.Selected - , label = "TextArea.writing" - , height = - if state.autoResize == Checkbox.Selected then - TextArea.AutoResize TextArea.DefaultHeight - - else - TextArea.Fixed - , placeholder = "Placeholder" - , showLabel = state.showLabel == Checkbox.Selected - } - , TextArea.contentCreation - { value = Maybe.withDefault "" <| Dict.get 3 state.textValues - , autofocus = False - , onInput = InputGiven 3 - , onBlur = Nothing - , isInError = state.isInError == Checkbox.Selected - , label = "TextArea.contentCreation" - , height = - if state.autoResize == Checkbox.Selected then - TextArea.AutoResize TextArea.DefaultHeight - - else - TextArea.Fixed - , placeholder = "Placeholder" - , showLabel = state.showLabel == Checkbox.Selected - } - , TextArea.writing - { value = Maybe.withDefault "" <| Dict.get 4 state.textValues - , autofocus = False - , onInput = InputGiven 4 - , onBlur = Just (InputGiven 4 "Neener neener Blur happened") - , isInError = state.isInError == Checkbox.Selected - , label = "TextArea.writing onBlur demonstration" - , height = - if state.autoResize == Checkbox.Selected then - TextArea.AutoResize TextArea.DefaultHeight - - else - TextArea.Fixed - , placeholder = "Placeholder" - , showLabel = state.showLabel == Checkbox.Selected - } - ] - |> List.map (Html.map parentMessage) } diff --git a/styleguide-app/Examples/TextInput.elm b/styleguide-app/Examples/TextInput.elm index aae8492d..94cbb711 100644 --- a/styleguide-app/Examples/TextInput.elm +++ b/styleguide-app/Examples/TextInput.elm @@ -1,8 +1,8 @@ -module Examples.TextInput exposing (Msg, State, example, init, update) +module Examples.TextInput exposing (Msg, State, example) {-| -@docs Msg, State, example, init, update +@docs Msg, State, example -} @@ -33,13 +33,14 @@ type alias State = {-| -} -example : (Msg -> msg) -> State -> ModuleExample msg -example parentMessage state = +example = { name = "Nri.Ui.TextInput.V5" - , categories = Set.fromList Category.sorter <| List.singleton Inputs - , content = - [ Html.map parentMessage <| - Html.div [] + , categories = [ Inputs ] + , state = init + , update = update + , view = + \state -> + [ Html.div [] [ TextInput.view { label = "Criterion" , isInError = False @@ -172,7 +173,7 @@ example parentMessage state = , showLabel = True } ] - ] + ] } diff --git a/styleguide-app/Examples/Tooltip.elm b/styleguide-app/Examples/Tooltip.elm index 49c18897..c361059c 100644 --- a/styleguide-app/Examples/Tooltip.elm +++ b/styleguide-app/Examples/Tooltip.elm @@ -1,8 +1,8 @@ -module Examples.Tooltip exposing (example, init, update, State, Msg) +module Examples.Tooltip exposing (example, State, Msg) {-| -@docs example, init, update, State, Msg +@docs example, State, Msg -} @@ -10,11 +10,9 @@ import Accessibility.Styled as Html import Category exposing (Category(..)) import Css import Html.Styled.Attributes exposing (css, href) -import ModuleExample exposing (ModuleExample) import Nri.Ui.Heading.V2 as Heading import Nri.Ui.Text.V4 as Text import Nri.Ui.Tooltip.V1 as Tooltip -import Sort.Set as Set exposing (Set) type TooltipType @@ -41,101 +39,103 @@ type Msg = ToggleTooltip TooltipType Bool -update : Msg -> State -> State +update : Msg -> State -> ( State, Cmd Msg ) update msg model = case msg of ToggleTooltip type_ isOpen -> if isOpen then - { model | openTooltip = Just type_ } + ( { model | openTooltip = Just type_ }, Cmd.none ) else - { model | openTooltip = Nothing } + ( { model | openTooltip = Nothing }, Cmd.none ) -example : (Msg -> msg) -> State -> ModuleExample msg -example msg model = +example = { name = "Nri.Ui.Tooltip.V1" - , categories = Set.fromList Category.sorter <| List.singleton Widgets - , content = - [ Text.mediumBody [ Html.text "These tooltips look similar, but serve different purposes when reading them via a screen-reader." ] - , Heading.h3 [] [ Html.text "primaryLabel" ] - , Text.smallBody - [ Html.text "A primary label is used when the tooltip content serves as the main label for its trigger content" - , Html.br [] - , Html.text "e.g. when the trigger content is an icon with no text." - ] - , Tooltip.tooltip [ Html.text "Tooltip" ] - |> Tooltip.primaryLabel - { trigger = Tooltip.OnClick - , triggerHtml = Html.text "Primary Label - OnClick Trigger" - , onTrigger = ToggleTooltip PrimaryLabelOnClick >> msg - , isOpen = model.openTooltip == Just PrimaryLabelOnClick - , id = "primary label tooltip" - , extraButtonAttrs = [] - } - , Html.br [ css [ Css.marginBottom (Css.px 20) ] ] - , Tooltip.tooltip [ Html.text "Tooltip" ] - |> Tooltip.primaryLabel - { trigger = Tooltip.OnHover - , triggerHtml = Html.text "Primary Label - OnHover Trigger" - , onTrigger = ToggleTooltip PrimaryLabelOnHover >> msg - , isOpen = model.openTooltip == Just PrimaryLabelOnHover - , id = "primary label tooltip" - , extraButtonAttrs = [] - } - , Html.br [ css [ Css.marginBottom (Css.px 20) ] ] - , Heading.h3 [] [ Html.text "auxillaryDescription" ] - , Text.smallBody - [ Html.text "An auxillary description is used when the tooltip content provides supplementary information about its trigger content" - , Html.br [] - , Html.text "e.g. when the trigger content is a word in the middle of a body of text that requires additional explanation." - ] - , Tooltip.tooltip [ Html.text "Tooltip" ] - |> Tooltip.auxillaryDescription - { trigger = Tooltip.OnClick - , triggerHtml = Html.text "Auxillary Description Trigger" - , onTrigger = ToggleTooltip AuxillaryDescription >> msg - , isOpen = model.openTooltip == Just AuxillaryDescription - , id = "Auxillary description" - , extraButtonAttrs = [] - } - , Html.br [ css [ Css.marginBottom (Css.px 20) ] ] - , Heading.h3 [] [ Html.text "toggleTip" ] - , Text.smallBody [ Html.text "A Toggle Tip is triggered by the \"?\" icon and provides supplemental information for the page." ] - , Html.div [ css [ Css.displayFlex, Css.alignItems Css.center ] ] - [ Tooltip.tooltip - [ Html.text "Tooltip On Top! " - , Html.a - [ href "/" ] - [ Html.text "Links work!" ] + , categories = [ Widgets ] + , state = init + , update = update + , view = + \model -> + [ Text.mediumBody [ Html.text "These tooltips look similar, but serve different purposes when reading them via a screen-reader." ] + , Heading.h3 [] [ Html.text "primaryLabel" ] + , Text.smallBody + [ Html.text "A primary label is used when the tooltip content serves as the main label for its trigger content" + , Html.br [] + , Html.text "e.g. when the trigger content is an icon with no text." ] - |> Tooltip.toggleTip - { onTrigger = ToggleTooltip ToggleTipTop >> msg - , isOpen = model.openTooltip == Just ToggleTipTop - , label = "More info" + , Tooltip.tooltip [ Html.text "Tooltip" ] + |> Tooltip.primaryLabel + { trigger = Tooltip.OnClick + , triggerHtml = Html.text "Primary Label - OnClick Trigger" + , onTrigger = ToggleTooltip PrimaryLabelOnClick + , isOpen = model.openTooltip == Just PrimaryLabelOnClick + , id = "primary label tooltip" , extraButtonAttrs = [] } - , Text.mediumBody - [ Html.text "This toggletip will open on top" - ] - ] - , Html.div [ css [ Css.displayFlex, Css.alignItems Css.center ] ] - [ Tooltip.tooltip - [ Html.text "Tooltip On Left! " - , Html.a - [ href "/" ] - [ Html.text "Links work!" ] - ] - |> Tooltip.withPosition Tooltip.OnLeft - |> Tooltip.toggleTip - { onTrigger = ToggleTooltip ToggleTipLeft >> msg - , isOpen = model.openTooltip == Just ToggleTipLeft - , label = "More info" + , Html.br [ css [ Css.marginBottom (Css.px 20) ] ] + , Tooltip.tooltip [ Html.text "Tooltip" ] + |> Tooltip.primaryLabel + { trigger = Tooltip.OnHover + , triggerHtml = Html.text "Primary Label - OnHover Trigger" + , onTrigger = ToggleTooltip PrimaryLabelOnHover + , isOpen = model.openTooltip == Just PrimaryLabelOnHover + , id = "primary label tooltip" , extraButtonAttrs = [] } - , Text.mediumBody - [ Html.text "This toggletip will open on the left" + , Html.br [ css [ Css.marginBottom (Css.px 20) ] ] + , Heading.h3 [] [ Html.text "auxillaryDescription" ] + , Text.smallBody + [ Html.text "An auxillary description is used when the tooltip content provides supplementary information about its trigger content" + , Html.br [] + , Html.text "e.g. when the trigger content is a word in the middle of a body of text that requires additional explanation." + ] + , Tooltip.tooltip [ Html.text "Tooltip" ] + |> Tooltip.auxillaryDescription + { trigger = Tooltip.OnClick + , triggerHtml = Html.text "Auxillary Description Trigger" + , onTrigger = ToggleTooltip AuxillaryDescription + , isOpen = model.openTooltip == Just AuxillaryDescription + , id = "Auxillary description" + , extraButtonAttrs = [] + } + , Html.br [ css [ Css.marginBottom (Css.px 20) ] ] + , Heading.h3 [] [ Html.text "toggleTip" ] + , Text.smallBody [ Html.text "A Toggle Tip is triggered by the \"?\" icon and provides supplemental information for the page." ] + , Html.div [ css [ Css.displayFlex, Css.alignItems Css.center ] ] + [ Tooltip.tooltip + [ Html.text "Tooltip On Top! " + , Html.a + [ href "/" ] + [ Html.text "Links work!" ] + ] + |> Tooltip.toggleTip + { onTrigger = ToggleTooltip ToggleTipTop + , isOpen = model.openTooltip == Just ToggleTipTop + , label = "More info" + , extraButtonAttrs = [] + } + , Text.mediumBody + [ Html.text "This toggletip will open on top" + ] + ] + , Html.div [ css [ Css.displayFlex, Css.alignItems Css.center ] ] + [ Tooltip.tooltip + [ Html.text "Tooltip On Left! " + , Html.a + [ href "/" ] + [ Html.text "Links work!" ] + ] + |> Tooltip.withPosition Tooltip.OnLeft + |> Tooltip.toggleTip + { onTrigger = ToggleTooltip ToggleTipLeft + , isOpen = model.openTooltip == Just ToggleTipLeft + , label = "More info" + , extraButtonAttrs = [] + } + , Text.mediumBody + [ Html.text "This toggletip will open on the left" + ] ] ] - ] } From de82a5c4abcf933c3eaf3fd58cf2069467023d57 Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Tue, 31 Mar 2020 12:48:26 -0700 Subject: [PATCH 06/17] Adds back in subscriptions --- styleguide-app/Examples.elm | 7 ++++++- styleguide-app/Examples/Accordion.elm | 1 + styleguide-app/Examples/BannerAlert.elm | 1 + styleguide-app/Examples/Button.elm | 1 + styleguide-app/Examples/Checkbox.elm | 1 + styleguide-app/Examples/ClickableSvg.elm | 1 + styleguide-app/Examples/ClickableText.elm | 1 + styleguide-app/Examples/DisclosureIndicator.elm | 1 + styleguide-app/Examples/Dropdown.elm | 1 + styleguide-app/Examples/Modal.elm | 1 + styleguide-app/Examples/SegmentedControl.elm | 1 + styleguide-app/Examples/Select.elm | 1 + styleguide-app/Examples/Slide.elm | 1 + styleguide-app/Examples/SlideModal.elm | 1 + styleguide-app/Examples/SortableTable.elm | 1 + styleguide-app/Examples/Svg.elm | 1 + styleguide-app/Examples/Table.elm | 1 + styleguide-app/Examples/Tabs.elm | 1 + styleguide-app/Examples/TextArea.elm | 1 + styleguide-app/Examples/TextInput.elm | 1 + styleguide-app/Examples/Tooltip.elm | 1 + 21 files changed, 26 insertions(+), 1 deletion(-) diff --git a/styleguide-app/Examples.elm b/styleguide-app/Examples.elm index 3cbf0db7..9209858a 100644 --- a/styleguide-app/Examples.elm +++ b/styleguide-app/Examples.elm @@ -44,6 +44,7 @@ type alias Example state msg = { name : String , state : state , update : msg -> state -> ( state, Cmd msg ) + , subscriptions : state -> Sub msg , view : state -> List (Html msg) , categories : List Category } @@ -102,6 +103,7 @@ type Msg = AccordionMsg Accordion.Msg | ButtonMsg Button.Msg | BannerAlertMsg BannerAlert.Msg + | ModalMsg Modal.Msg update : Msg -> ModuleStates -> ( ModuleStates, Cmd Msg ) @@ -129,12 +131,15 @@ update msg moduleStates = BannerAlertMsg exampleMsg -> updateWith .bannerAlert (\state m -> { m | bannerAlert = state }) BannerAlertMsg exampleMsg + ModalMsg exampleMsg -> + updateWith .modal (\state m -> { m | modal = state }) ModalMsg exampleMsg + {-| -} subscriptions : ModuleStates -> Sub Msg subscriptions moduleStates = Sub.batch - [-- Sub.map ModalExampleMsg (Examples.Modal.subscriptions moduleStates.modalExampleState) + [ Sub.map ModalMsg (moduleStates.modal.subscriptions moduleStates.modal.state) ] diff --git a/styleguide-app/Examples/Accordion.elm b/styleguide-app/Examples/Accordion.elm index f1f84bca..9cb18d3a 100644 --- a/styleguide-app/Examples/Accordion.elm +++ b/styleguide-app/Examples/Accordion.elm @@ -28,6 +28,7 @@ example = { name = "Nri.Ui.Accordion.V1" , state = init , update = update + , subscriptions = \_ -> Sub.none , view = view , categories = [ Layout ] } diff --git a/styleguide-app/Examples/BannerAlert.elm b/styleguide-app/Examples/BannerAlert.elm index c2f0b089..fd8ee4c5 100644 --- a/styleguide-app/Examples/BannerAlert.elm +++ b/styleguide-app/Examples/BannerAlert.elm @@ -24,6 +24,7 @@ example = { name = "Nri.Ui.BannerAlert.V6" , state = init , update = update + , subscriptions = \_ -> Sub.none , view = view , categories = [ Messaging ] } diff --git a/styleguide-app/Examples/Button.elm b/styleguide-app/Examples/Button.elm index 9f1365ae..01d7d7c0 100644 --- a/styleguide-app/Examples/Button.elm +++ b/styleguide-app/Examples/Button.elm @@ -22,6 +22,7 @@ example = { name = "Nri.Ui.Button.V10" , state = init , update = update + , subscriptions = \_ -> Sub.none , view = \state -> [ viewButtonExamples state ] , categories = [ Buttons ] } diff --git a/styleguide-app/Examples/Checkbox.elm b/styleguide-app/Examples/Checkbox.elm index f4e2c570..1d7c6469 100644 --- a/styleguide-app/Examples/Checkbox.elm +++ b/styleguide-app/Examples/Checkbox.elm @@ -34,6 +34,7 @@ example = { name = "Nri.Ui.Checkbox.V5" , state = init , update = update + , subscriptions = \_ -> Sub.none , view = \state -> [ viewInteractableCheckbox "styleguide-checkbox-interactable" state diff --git a/styleguide-app/Examples/ClickableSvg.elm b/styleguide-app/Examples/ClickableSvg.elm index a18c47a4..ab66095b 100644 --- a/styleguide-app/Examples/ClickableSvg.elm +++ b/styleguide-app/Examples/ClickableSvg.elm @@ -28,6 +28,7 @@ example = , categories = [ Buttons, Icons ] , state = init , update = update + , subscriptions = \_ -> Sub.none , view = \state -> [ Html.div [ Attributes.css [ Css.displayFlex, Css.alignItems Css.center ] ] diff --git a/styleguide-app/Examples/ClickableText.elm b/styleguide-app/Examples/ClickableText.elm index 0577b8da..16919eb7 100644 --- a/styleguide-app/Examples/ClickableText.elm +++ b/styleguide-app/Examples/ClickableText.elm @@ -28,6 +28,7 @@ example = { name = "Nri.Ui.ClickableText.V3" , state = init , update = update + , subscriptions = \_ -> Sub.none , view = \state -> [ viewExamples state ] , categories = [ Buttons ] } diff --git a/styleguide-app/Examples/DisclosureIndicator.elm b/styleguide-app/Examples/DisclosureIndicator.elm index 8e36b84e..c93fe32f 100644 --- a/styleguide-app/Examples/DisclosureIndicator.elm +++ b/styleguide-app/Examples/DisclosureIndicator.elm @@ -30,6 +30,7 @@ example = , categories = [ Widgets ] , state = init , update = update + , subscriptions = \_ -> Sub.none , view = \state -> [ Text.smallBodyGray [ Html.text "The disclosure indicator is only the caret. It is NOT a button -- you must create a button or clickabletext yourself!" ] diff --git a/styleguide-app/Examples/Dropdown.elm b/styleguide-app/Examples/Dropdown.elm index 53a4615f..77418c06 100644 --- a/styleguide-app/Examples/Dropdown.elm +++ b/styleguide-app/Examples/Dropdown.elm @@ -28,6 +28,7 @@ example = { name = "Nri.Ui.Dropdown.V2" , state = init , update = update + , subscriptions = \_ -> Sub.none , view = \state -> [ Nri.Ui.Dropdown.V2.view "All the foods!" state ConsoleLog diff --git a/styleguide-app/Examples/Modal.elm b/styleguide-app/Examples/Modal.elm index bb0dc472..ab5f1682 100644 --- a/styleguide-app/Examples/Modal.elm +++ b/styleguide-app/Examples/Modal.elm @@ -53,6 +53,7 @@ example = , categories = [ Modals ] , state = init , update = update + , subscriptions = subscriptions , view = \state -> [ viewSettings state diff --git a/styleguide-app/Examples/SegmentedControl.elm b/styleguide-app/Examples/SegmentedControl.elm index 300f1026..0096b615 100644 --- a/styleguide-app/Examples/SegmentedControl.elm +++ b/styleguide-app/Examples/SegmentedControl.elm @@ -27,6 +27,7 @@ example = { name = "Nri.Ui.SegmentedControl.V8" , state = init , update = update + , subscriptions = \_ -> Sub.none , view = \state -> let diff --git a/styleguide-app/Examples/Select.elm b/styleguide-app/Examples/Select.elm index 0678a84f..0cffa347 100644 --- a/styleguide-app/Examples/Select.elm +++ b/styleguide-app/Examples/Select.elm @@ -19,6 +19,7 @@ example = { name = "Nri.Ui.Select.V7" , state = init , update = update + , subscriptions = \_ -> Sub.none , categories = [ Inputs ] , view = \state -> diff --git a/styleguide-app/Examples/Slide.elm b/styleguide-app/Examples/Slide.elm index cdba3cdc..f958d840 100644 --- a/styleguide-app/Examples/Slide.elm +++ b/styleguide-app/Examples/Slide.elm @@ -36,6 +36,7 @@ example = , categories = [ Animations ] , state = init , update = update + , subscriptions = \_ -> Sub.none , view = \state -> [ Keyed.node "div" diff --git a/styleguide-app/Examples/SlideModal.elm b/styleguide-app/Examples/SlideModal.elm index 036557cf..1a966bd0 100644 --- a/styleguide-app/Examples/SlideModal.elm +++ b/styleguide-app/Examples/SlideModal.elm @@ -34,6 +34,7 @@ example = , categories = [ Modals ] , state = init , update = update + , subscriptions = \_ -> Sub.none , view = \state -> [ viewModal state.modal diff --git a/styleguide-app/Examples/SortableTable.elm b/styleguide-app/Examples/SortableTable.elm index c0be55a4..6e5e60ca 100644 --- a/styleguide-app/Examples/SortableTable.elm +++ b/styleguide-app/Examples/SortableTable.elm @@ -35,6 +35,7 @@ example = , categories = [ Tables ] , state = init , update = update + , subscriptions = \_ -> Sub.none , view = \{ sortState } -> let diff --git a/styleguide-app/Examples/Svg.elm b/styleguide-app/Examples/Svg.elm index 1eb175e0..cb6f066a 100644 --- a/styleguide-app/Examples/Svg.elm +++ b/styleguide-app/Examples/Svg.elm @@ -27,6 +27,7 @@ example = , categories = [ Icons ] , state = init , update = update + , subscriptions = \_ -> Sub.none , view = \state -> [ viewSettings state diff --git a/styleguide-app/Examples/Table.elm b/styleguide-app/Examples/Table.elm index 5c6ee637..d4d4c74b 100644 --- a/styleguide-app/Examples/Table.elm +++ b/styleguide-app/Examples/Table.elm @@ -31,6 +31,7 @@ example = { name = "Nri.Ui.Table.V5" , state = () , update = \_ state -> ( state, Cmd.none ) + , subscriptions = \_ -> Sub.none , categories = [ Tables ] , view = \state -> diff --git a/styleguide-app/Examples/Tabs.elm b/styleguide-app/Examples/Tabs.elm index e4be5057..96e7f4a3 100644 --- a/styleguide-app/Examples/Tabs.elm +++ b/styleguide-app/Examples/Tabs.elm @@ -30,6 +30,7 @@ example = , categories = [ Layout ] , state = First , update = \newTab oldTab -> ( newTab, Cmd.none ) + , subscriptions = \_ -> Sub.none , view = \tab -> [ Tabs.view diff --git a/styleguide-app/Examples/TextArea.elm b/styleguide-app/Examples/TextArea.elm index 5b5e5039..30e8c074 100644 --- a/styleguide-app/Examples/TextArea.elm +++ b/styleguide-app/Examples/TextArea.elm @@ -37,6 +37,7 @@ example = { name = "Nri.Ui.TextArea.V4" , state = init , update = update + , subscriptions = \_ -> Sub.none , categories = [ Inputs ] , view = \state -> diff --git a/styleguide-app/Examples/TextInput.elm b/styleguide-app/Examples/TextInput.elm index 94cbb711..5036f4a1 100644 --- a/styleguide-app/Examples/TextInput.elm +++ b/styleguide-app/Examples/TextInput.elm @@ -38,6 +38,7 @@ example = , categories = [ Inputs ] , state = init , update = update + , subscriptions = \_ -> Sub.none , view = \state -> [ Html.div [] diff --git a/styleguide-app/Examples/Tooltip.elm b/styleguide-app/Examples/Tooltip.elm index c361059c..5df35389 100644 --- a/styleguide-app/Examples/Tooltip.elm +++ b/styleguide-app/Examples/Tooltip.elm @@ -55,6 +55,7 @@ example = , categories = [ Widgets ] , state = init , update = update + , subscriptions = \_ -> Sub.none , view = \model -> [ Text.mediumBody [ Html.text "These tooltips look similar, but serve different purposes when reading them via a screen-reader." ] From 6d5184137f038410558b2060c1d8d54b1340ec6e Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Tue, 31 Mar 2020 13:20:03 -0700 Subject: [PATCH 07/17] Adds Example type annotations --- styleguide-app/Example.elm | 14 ++++++++++++++ styleguide-app/Examples.elm | 11 +---------- styleguide-app/Examples/Accordion.elm | 2 ++ styleguide-app/Examples/BannerAlert.elm | 3 +++ styleguide-app/Examples/Button.elm | 3 +++ styleguide-app/Examples/Checkbox.elm | 2 ++ styleguide-app/Examples/ClickableSvg.elm | 2 ++ styleguide-app/Examples/ClickableText.elm | 2 ++ styleguide-app/Examples/DisclosureIndicator.elm | 2 ++ styleguide-app/Examples/Dropdown.elm | 3 ++- styleguide-app/Examples/Modal.elm | 2 ++ styleguide-app/Examples/SegmentedControl.elm | 2 ++ styleguide-app/Examples/Select.elm | 2 ++ styleguide-app/Examples/Slide.elm | 2 ++ styleguide-app/Examples/SlideModal.elm | 2 ++ styleguide-app/Examples/SortableTable.elm | 2 ++ styleguide-app/Examples/Svg.elm | 2 ++ styleguide-app/Examples/Table.elm | 2 ++ styleguide-app/Examples/Tabs.elm | 2 ++ styleguide-app/Examples/TextArea.elm | 2 ++ styleguide-app/Examples/TextInput.elm | 3 ++- styleguide-app/Examples/Tooltip.elm | 2 ++ 22 files changed, 57 insertions(+), 12 deletions(-) create mode 100644 styleguide-app/Example.elm diff --git a/styleguide-app/Example.elm b/styleguide-app/Example.elm new file mode 100644 index 00000000..d9db9cd8 --- /dev/null +++ b/styleguide-app/Example.elm @@ -0,0 +1,14 @@ +module Example exposing (Example) + +import Category exposing (Category) +import Html.Styled as Html exposing (Html) + + +type alias Example state msg = + { name : String + , state : state + , update : msg -> state -> ( state, Cmd msg ) + , subscriptions : state -> Sub msg + , view : state -> List (Html msg) + , categories : List Category + } diff --git a/styleguide-app/Examples.elm b/styleguide-app/Examples.elm index 9209858a..298fdf61 100644 --- a/styleguide-app/Examples.elm +++ b/styleguide-app/Examples.elm @@ -1,6 +1,7 @@ module Examples exposing (ModuleStates, Msg, init, subscriptions, update, view) import Category exposing (Category(..)) +import Example exposing (Example) import Examples.Accordion as Accordion import Examples.Alert as Alert import Examples.AssignmentIcon as AssignmentIcon @@ -40,16 +41,6 @@ import ModuleExample exposing (ModuleExample) import Sort.Set as Set exposing (Set) -type alias Example state msg = - { name : String - , state : state - , update : msg -> state -> ( state, Cmd msg ) - , subscriptions : state -> Sub msg - , view : state -> List (Html msg) - , categories : List Category - } - - type alias ModuleStates = { accordion : Example Accordion.State Accordion.Msg , button : Example Button.State Button.Msg diff --git a/styleguide-app/Examples/Accordion.elm b/styleguide-app/Examples/Accordion.elm index 9cb18d3a..77f42db8 100644 --- a/styleguide-app/Examples/Accordion.elm +++ b/styleguide-app/Examples/Accordion.elm @@ -13,6 +13,7 @@ module Examples.Accordion exposing import Category exposing (Category(..)) import Css exposing (..) import Dict exposing (Dict) +import Example exposing (Example) import Html.Styled as Html exposing (Html) import Html.Styled.Attributes exposing (css) import ModuleExample exposing (ModuleExample) @@ -24,6 +25,7 @@ import Nri.Ui.Text.V4 as Text {-| -} +example : Example State Msg example = { name = "Nri.Ui.Accordion.V1" , state = init diff --git a/styleguide-app/Examples/BannerAlert.elm b/styleguide-app/Examples/BannerAlert.elm index fd8ee4c5..6d4a76e7 100644 --- a/styleguide-app/Examples/BannerAlert.elm +++ b/styleguide-app/Examples/BannerAlert.elm @@ -9,6 +9,7 @@ module Examples.BannerAlert exposing (example, State, init, Msg, update) import Category exposing (Category(..)) import Css +import Example exposing (Example) import Html.Styled exposing (Html, a, div, h3, pre, text) import Html.Styled.Attributes as Attributes import ModuleExample exposing (ModuleExample) @@ -20,6 +21,8 @@ import Nri.Ui.Svg.V1 as Svg import Nri.Ui.UiIcon.V1 as UiIcon +{-| -} +example : Example State Msg example = { name = "Nri.Ui.BannerAlert.V6" , state = init diff --git a/styleguide-app/Examples/Button.elm b/styleguide-app/Examples/Button.elm index 01d7d7c0..3219e190 100644 --- a/styleguide-app/Examples/Button.elm +++ b/styleguide-app/Examples/Button.elm @@ -9,6 +9,7 @@ module Examples.Button exposing (Msg, State, example) import Category exposing (Category(..)) import Css exposing (middle, verticalAlign) import Debug.Control as Control exposing (Control) +import Example exposing (Example) import Html.Styled exposing (..) import Html.Styled.Attributes exposing (css, id) import ModuleExample exposing (ModuleExample, ModuleMessages) @@ -18,6 +19,8 @@ import Nri.Ui.Svg.V1 as Svg exposing (Svg) import Nri.Ui.UiIcon.V1 as UiIcon +{-| -} +example : Example State Msg example = { name = "Nri.Ui.Button.V10" , state = init diff --git a/styleguide-app/Examples/Checkbox.elm b/styleguide-app/Examples/Checkbox.elm index 1d7c6469..8c05b042 100644 --- a/styleguide-app/Examples/Checkbox.elm +++ b/styleguide-app/Examples/Checkbox.elm @@ -8,6 +8,7 @@ module Examples.Checkbox exposing (Msg, State, example) import Category exposing (Category(..)) import Css +import Example exposing (Example) import Html.Styled as Html exposing (..) import Html.Styled.Attributes exposing (css) import Nri.Ui.Checkbox.V5 as Checkbox @@ -30,6 +31,7 @@ type alias State = {-| -} +example : Example State Msg example = { name = "Nri.Ui.Checkbox.V5" , state = init diff --git a/styleguide-app/Examples/ClickableSvg.elm b/styleguide-app/Examples/ClickableSvg.elm index ab66095b..90c5255c 100644 --- a/styleguide-app/Examples/ClickableSvg.elm +++ b/styleguide-app/Examples/ClickableSvg.elm @@ -9,6 +9,7 @@ module Examples.ClickableSvg exposing (Msg, State, example) import Category exposing (Category(..)) import Color exposing (Color) import Css +import Example exposing (Example) import Examples.IconExamples as IconExamples import Html.Styled as Html import Html.Styled.Attributes as Attributes @@ -23,6 +24,7 @@ import Nri.Ui.UiIcon.V1 as UiIcon {-| -} +example : Example State Msg example = { name = "Nri.Ui.ClickableSvg.V1" , categories = [ Buttons, Icons ] diff --git a/styleguide-app/Examples/ClickableText.elm b/styleguide-app/Examples/ClickableText.elm index 16919eb7..13dbcb9d 100644 --- a/styleguide-app/Examples/ClickableText.elm +++ b/styleguide-app/Examples/ClickableText.elm @@ -9,6 +9,7 @@ module Examples.ClickableText exposing (Msg, State, example) import Category exposing (Category(..)) import Css exposing (middle, verticalAlign) import Debug.Control as Control exposing (Control) +import Example exposing (Example) import Html.Styled exposing (..) import Html.Styled.Attributes exposing (css, id) import Nri.Ui.ClickableText.V3 as ClickableText @@ -24,6 +25,7 @@ type State {-| -} +example : Example State Msg example = { name = "Nri.Ui.ClickableText.V3" , state = init diff --git a/styleguide-app/Examples/DisclosureIndicator.elm b/styleguide-app/Examples/DisclosureIndicator.elm index c93fe32f..4abe11fd 100644 --- a/styleguide-app/Examples/DisclosureIndicator.elm +++ b/styleguide-app/Examples/DisclosureIndicator.elm @@ -8,6 +8,7 @@ module Examples.DisclosureIndicator exposing (Msg, State, example) import Category exposing (Category(..)) import Css +import Example exposing (Example) import Html.Styled as Html import Html.Styled.Attributes exposing (css) import Html.Styled.Events exposing (onClick) @@ -25,6 +26,7 @@ type alias State = {-| -} +example : Example State Msg example = { name = "Nri.Ui.DisclosureIndicator.V2" , categories = [ Widgets ] diff --git a/styleguide-app/Examples/Dropdown.elm b/styleguide-app/Examples/Dropdown.elm index 77418c06..66f665e4 100644 --- a/styleguide-app/Examples/Dropdown.elm +++ b/styleguide-app/Examples/Dropdown.elm @@ -7,8 +7,8 @@ module Examples.Dropdown exposing (Msg, State, example) -} import Category exposing (Category(..)) +import Example exposing (Example) import Html.Styled -import ModuleExample exposing (ModuleExample) import Nri.Ui.Dropdown.V2 import Sort.Set as Set exposing (Set) @@ -24,6 +24,7 @@ type alias State = {-| -} +example : Example State Msg example = { name = "Nri.Ui.Dropdown.V2" , state = init diff --git a/styleguide-app/Examples/Modal.elm b/styleguide-app/Examples/Modal.elm index ab5f1682..4afbf634 100644 --- a/styleguide-app/Examples/Modal.elm +++ b/styleguide-app/Examples/Modal.elm @@ -10,6 +10,7 @@ import Accessibility.Styled as Html exposing (Html, div, h3, h4, p, span, text) import Category exposing (Category(..)) import Css exposing (..) import Css.Global +import Example exposing (Example) import Html as Root import Html.Styled.Attributes as Attributes import Nri.Ui.Button.V10 as Button @@ -48,6 +49,7 @@ init = {-| -} +example : Example State Msg example = { name = "Nri.Ui.Modal.V8" , categories = [ Modals ] diff --git a/styleguide-app/Examples/SegmentedControl.elm b/styleguide-app/Examples/SegmentedControl.elm index 0096b615..7b2a8b0e 100644 --- a/styleguide-app/Examples/SegmentedControl.elm +++ b/styleguide-app/Examples/SegmentedControl.elm @@ -13,6 +13,7 @@ module Examples.SegmentedControl exposing import Accessibility.Styled import Category exposing (Category(..)) import Debug.Control as Control exposing (Control) +import Example exposing (Example) import Html.Styled as Html exposing (Html) import Html.Styled.Attributes as Attr import Html.Styled.Events as Events @@ -23,6 +24,7 @@ import Nri.Ui.UiIcon.V1 as UiIcon {-| -} +example : Example State Msg example = { name = "Nri.Ui.SegmentedControl.V8" , state = init diff --git a/styleguide-app/Examples/Select.elm b/styleguide-app/Examples/Select.elm index 0cffa347..9b8fb06f 100644 --- a/styleguide-app/Examples/Select.elm +++ b/styleguide-app/Examples/Select.elm @@ -8,6 +8,7 @@ module Examples.Select exposing (Msg, State, example) import Category exposing (Category(..)) import Css +import Example exposing (Example) import Html.Styled import Html.Styled.Attributes import Nri.Ui.Heading.V2 as Heading @@ -15,6 +16,7 @@ import Nri.Ui.Select.V7 as Select {-| -} +example : Example State Msg example = { name = "Nri.Ui.Select.V7" , state = init diff --git a/styleguide-app/Examples/Slide.elm b/styleguide-app/Examples/Slide.elm index f958d840..8fcb9d49 100644 --- a/styleguide-app/Examples/Slide.elm +++ b/styleguide-app/Examples/Slide.elm @@ -9,6 +9,7 @@ module Examples.Slide exposing (Msg, State, example) import Accessibility.Styled as Html import Category exposing (Category(..)) import Css +import Example exposing (Example) import Html.Styled.Attributes exposing (css) import Html.Styled.Keyed as Keyed import List.Zipper as Zipper exposing (Zipper) @@ -31,6 +32,7 @@ type alias State = {-| -} +example : Example State Msg example = { name = "Nri.Ui.Slide.V1" , categories = [ Animations ] diff --git a/styleguide-app/Examples/SlideModal.elm b/styleguide-app/Examples/SlideModal.elm index 1a966bd0..1f830635 100644 --- a/styleguide-app/Examples/SlideModal.elm +++ b/styleguide-app/Examples/SlideModal.elm @@ -9,6 +9,7 @@ module Examples.SlideModal exposing (Msg, State, example) import Accessibility.Styled as Html exposing (Html, div, h3, p, text) import Category exposing (Category(..)) import Css +import Example exposing (Example) import Html.Styled exposing (fromUnstyled) import Html.Styled.Attributes exposing (css) import Nri.Ui.Button.V8 as Button @@ -29,6 +30,7 @@ type alias State = {-| -} +example : Example State Msg example = { name = "Nri.Ui.SlideModal.V2" , categories = [ Modals ] diff --git a/styleguide-app/Examples/SortableTable.elm b/styleguide-app/Examples/SortableTable.elm index 6e5e60ca..6b810a59 100644 --- a/styleguide-app/Examples/SortableTable.elm +++ b/styleguide-app/Examples/SortableTable.elm @@ -7,6 +7,7 @@ module Examples.SortableTable exposing (Msg, State, example) -} import Category exposing (Category(..)) +import Example exposing (Example) import Html.Styled as Html import Nri.Ui.Heading.V2 as Heading import Nri.Ui.SortableTable.V1 as SortableTable @@ -30,6 +31,7 @@ type alias State = {-| -} +example : Example State Msg example = { name = "Nri.Ui.SortableTable.V1" , categories = [ Tables ] diff --git a/styleguide-app/Examples/Svg.elm b/styleguide-app/Examples/Svg.elm index cb6f066a..ce10c0cb 100644 --- a/styleguide-app/Examples/Svg.elm +++ b/styleguide-app/Examples/Svg.elm @@ -9,6 +9,7 @@ module Examples.Svg exposing (Msg, State, example) import Category exposing (Category(..)) import Color exposing (Color) import Css +import Example exposing (Example) import Examples.IconExamples as IconExamples import Html.Styled as Html import Html.Styled.Attributes as Attributes @@ -22,6 +23,7 @@ import Nri.Ui.UiIcon.V1 as UiIcon {-| -} +example : Example State Msg example = { name = "Nri.Ui.Svg.V1" , categories = [ Icons ] diff --git a/styleguide-app/Examples/Table.elm b/styleguide-app/Examples/Table.elm index d4d4c74b..e27ce1c7 100644 --- a/styleguide-app/Examples/Table.elm +++ b/styleguide-app/Examples/Table.elm @@ -8,6 +8,7 @@ module Examples.Table exposing (Msg, State, example) import Category exposing (Category(..)) import Css exposing (..) +import Example exposing (Example) import Html.Styled as Html import Nri.Ui.Button.V5 as Button import Nri.Ui.Colors.V1 as Colors @@ -27,6 +28,7 @@ type alias Msg = {-| -} +example : Example State Msg example = { name = "Nri.Ui.Table.V5" , state = () diff --git a/styleguide-app/Examples/Tabs.elm b/styleguide-app/Examples/Tabs.elm index 96e7f4a3..52ebcd80 100644 --- a/styleguide-app/Examples/Tabs.elm +++ b/styleguide-app/Examples/Tabs.elm @@ -11,6 +11,7 @@ module Examples.Tabs exposing -} import Category exposing (Category(..)) +import Example exposing (Example) import Html.Styled as Html import List.Zipper import Nri.Ui.Tabs.V4 as Tabs @@ -25,6 +26,7 @@ type alias Msg = State +example : Example State Msg example = { name = "Nri.Ui.Tabs.V4" , categories = [ Layout ] diff --git a/styleguide-app/Examples/TextArea.elm b/styleguide-app/Examples/TextArea.elm index 30e8c074..293b8cd2 100644 --- a/styleguide-app/Examples/TextArea.elm +++ b/styleguide-app/Examples/TextArea.elm @@ -8,6 +8,7 @@ module Examples.TextArea exposing (Msg, State, example) import Category exposing (Category(..)) import Dict exposing (Dict) +import Example exposing (Example) import Html.Styled as Html import Nri.Ui.AssetPath exposing (Asset(..)) import Nri.Ui.Checkbox.V5 as Checkbox @@ -33,6 +34,7 @@ type alias State = {-| -} +example : Example State Msg example = { name = "Nri.Ui.TextArea.V4" , state = init diff --git a/styleguide-app/Examples/TextInput.elm b/styleguide-app/Examples/TextInput.elm index 5036f4a1..94dccf4f 100644 --- a/styleguide-app/Examples/TextInput.elm +++ b/styleguide-app/Examples/TextInput.elm @@ -8,8 +8,8 @@ module Examples.TextInput exposing (Msg, State, example) import Category exposing (Category(..)) import Dict exposing (Dict) +import Example exposing (Example) import Html.Styled as Html -import ModuleExample exposing (ModuleExample) import Nri.Ui.Heading.V2 as Heading import Nri.Ui.TextInput.V5 as TextInput import Sort.Set as Set exposing (Set) @@ -33,6 +33,7 @@ type alias State = {-| -} +example : Example State Msg example = { name = "Nri.Ui.TextInput.V5" , categories = [ Inputs ] diff --git a/styleguide-app/Examples/Tooltip.elm b/styleguide-app/Examples/Tooltip.elm index 5df35389..b16c5abe 100644 --- a/styleguide-app/Examples/Tooltip.elm +++ b/styleguide-app/Examples/Tooltip.elm @@ -9,6 +9,7 @@ module Examples.Tooltip exposing (example, State, Msg) import Accessibility.Styled as Html import Category exposing (Category(..)) import Css +import Example exposing (Example) import Html.Styled.Attributes exposing (css, href) import Nri.Ui.Heading.V2 as Heading import Nri.Ui.Text.V4 as Text @@ -50,6 +51,7 @@ update msg model = ( { model | openTooltip = Nothing }, Cmd.none ) +example : Example State Msg example = { name = "Nri.Ui.Tooltip.V1" , categories = [ Widgets ] From 3d1d65b50860935ee556a2f60003c4ef876359db Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Tue, 31 Mar 2020 13:33:05 -0700 Subject: [PATCH 08/17] :skull: remove Module example --- styleguide-app/Example.elm | 56 ++++++- styleguide-app/Examples.elm | 25 ++- styleguide-app/Examples/Accordion.elm | 1 - styleguide-app/Examples/Alert.elm | 31 ++-- styleguide-app/Examples/AssignmentIcon.elm | 55 +++---- styleguide-app/Examples/BannerAlert.elm | 1 - styleguide-app/Examples/Button.elm | 1 - styleguide-app/Examples/Callout.elm | 75 ++++----- styleguide-app/Examples/ClickableText.elm | 1 - styleguide-app/Examples/Colors.elm | 153 +++++++++--------- styleguide-app/Examples/Dropdown.elm | 1 - styleguide-app/Examples/Fonts.elm | 33 ++-- styleguide-app/Examples/Heading.elm | 31 ++-- styleguide-app/Examples/Icon.elm | 19 ++- styleguide-app/Examples/Logo.elm | 65 ++++---- styleguide-app/Examples/MasteryIcon.elm | 25 +-- styleguide-app/Examples/Page.elm | 57 +++---- styleguide-app/Examples/Pennant.elm | 29 ++-- styleguide-app/Examples/Text.elm | 69 +++++---- styleguide-app/Examples/Text/Writing.elm | 25 +-- styleguide-app/Examples/TextInput.elm | 1 - styleguide-app/Examples/UiIcon.elm | 171 +++++++++++---------- styleguide-app/Main.elm | 18 +-- styleguide-app/ModuleExample.elm | 73 --------- 24 files changed, 513 insertions(+), 503 deletions(-) delete mode 100644 styleguide-app/ModuleExample.elm diff --git a/styleguide-app/Example.elm b/styleguide-app/Example.elm index d9db9cd8..edb6767b 100644 --- a/styleguide-app/Example.elm +++ b/styleguide-app/Example.elm @@ -1,7 +1,11 @@ -module Example exposing (Example) +module Example exposing (Example, view) import Category exposing (Category) +import Css exposing (..) import Html.Styled as Html exposing (Html) +import Html.Styled.Attributes as Attributes +import Nri.Ui.Colors.V1 exposing (..) +import Sort.Set as Set exposing (Set) type alias Example state msg = @@ -12,3 +16,53 @@ type alias Example state msg = , view : state -> List (Html msg) , categories : List Category } + + +view : Bool -> Example state msg -> Html msg +view showFocusLink example = + Html.div + [ -- this class makes the axe accessibility checking output easier to parse + String.replace "." "-" example.name + |> (++) "module-example__" + |> Attributes.class + ] + [ Html.div + [ Attributes.css + [ displayFlex + , alignItems center + , justifyContent flexStart + , flexWrap wrap + , padding (px 4) + , backgroundColor glacier + ] + ] + [ Html.styled Html.h2 + [ color gray20 + , fontFamilies [ qt "Source Code Pro", "Consolas", "Courier", "monospace" ] + , fontSize (px 20) + , marginTop zero + , marginBottom zero + ] + [] + [ Html.text example.name ] + , String.replace "." "-" example.name + |> (++) "https://package.elm-lang.org/packages/NoRedInk/noredink-ui/latest/" + |> viewLink "view docs" + , if showFocusLink then + viewLink "see only this" ("#/doodad/" ++ example.name) + + else + Html.text "" + ] + , Html.div [ Attributes.css [ padding2 (px 20) zero ] ] (example.view example.state) + ] + + +viewLink : String -> String -> Html msg +viewLink text href = + Html.a + [ Attributes.href href + , Attributes.css [ Css.display Css.block, marginLeft (px 20) ] + ] + [ Html.text text + ] diff --git a/styleguide-app/Examples.elm b/styleguide-app/Examples.elm index 298fdf61..a046a2fe 100644 --- a/styleguide-app/Examples.elm +++ b/styleguide-app/Examples.elm @@ -1,6 +1,5 @@ module Examples exposing (ModuleStates, Msg, init, subscriptions, update, view) -import Category exposing (Category(..)) import Example exposing (Example) import Examples.Accordion as Accordion import Examples.Alert as Alert @@ -37,8 +36,6 @@ import Examples.TextInput as TextInput import Examples.Tooltip as Tooltip import Examples.UiIcon as UiIcon import Html.Styled as Html exposing (Html) -import ModuleExample exposing (ModuleExample) -import Sort.Set as Set exposing (Set) type alias ModuleStates = @@ -135,17 +132,13 @@ subscriptions moduleStates = {-| -} -view : ModuleStates -> List (ModuleExample Msg) -view moduleStates = - [ viewExample AccordionMsg moduleStates.accordion - , viewExample ButtonMsg moduleStates.button - , viewExample BannerAlertMsg moduleStates.bannerAlert +view : Bool -> (Example state msg -> Bool) -> ModuleStates -> List (Html Msg) +view showFocusLink filter moduleStates = + -- TODO add the filter back in + [ Example.view showFocusLink moduleStates.accordion + |> Html.map AccordionMsg + , Example.view showFocusLink moduleStates.button + |> Html.map ButtonMsg + , Example.view showFocusLink moduleStates.bannerAlert + |> Html.map BannerAlertMsg ] - - -viewExample : (msg -> Msg) -> Example state msg -> ModuleExample Msg -viewExample wrapperMsg example = - { name = example.name - , categories = Set.fromList Category.sorter example.categories - , content = List.map (Html.map wrapperMsg) (example.view example.state) - } diff --git a/styleguide-app/Examples/Accordion.elm b/styleguide-app/Examples/Accordion.elm index 77f42db8..739f62c0 100644 --- a/styleguide-app/Examples/Accordion.elm +++ b/styleguide-app/Examples/Accordion.elm @@ -16,7 +16,6 @@ import Dict exposing (Dict) import Example exposing (Example) import Html.Styled as Html exposing (Html) import Html.Styled.Attributes exposing (css) -import ModuleExample exposing (ModuleExample) import Nri.Ui.Accordion.V1 as Accordion import Nri.Ui.Colors.V1 as Colors import Nri.Ui.Fonts.V1 as Fonts diff --git a/styleguide-app/Examples/Alert.elm b/styleguide-app/Examples/Alert.elm index e5670f5d..1733f999 100644 --- a/styleguide-app/Examples/Alert.elm +++ b/styleguide-app/Examples/Alert.elm @@ -7,27 +7,30 @@ module Examples.Alert exposing (example) -} import Category exposing (Category(..)) +import Example exposing (Example) import Html.Styled as Html -import ModuleExample exposing (ModuleExample) import Nri.Ui.Alert.V4 as Alert import Nri.Ui.Heading.V2 as Heading -import Sort.Set as Set exposing (Set) -example : ModuleExample msg +example : Example () () example = { name = "Nri.Ui.Alert.V4" - , categories = Set.fromList Category.sorter <| List.singleton Messaging - , content = - [ Heading.h3 [] [ Html.text "Markdown-supporting:" ] - , Alert.error "This is an **error**" - , Alert.warning "This is a **warning**" - , Alert.tip "This is a **tip**" - , Alert.success "This is a **success**" - , Html.hr [] [] - , Heading.h3 [] [ Html.text "Stacktraces-supporting:" ] - , Alert.somethingWentWrong exampleRailsError - ] + , categories = [ Messaging ] + , state = () + , update = \_ state -> ( state, Cmd.none ) + , subscriptions = \_ -> Sub.none + , view = + \_ -> + [ Heading.h3 [] [ Html.text "Markdown-supporting:" ] + , Alert.error "This is an **error**" + , Alert.warning "This is a **warning**" + , Alert.tip "This is a **tip**" + , Alert.success "This is a **success**" + , Html.hr [] [] + , Heading.h3 [] [ Html.text "Stacktraces-supporting:" ] + , Alert.somethingWentWrong exampleRailsError + ] } diff --git a/styleguide-app/Examples/AssignmentIcon.elm b/styleguide-app/Examples/AssignmentIcon.elm index 0ed644ed..3d129f31 100644 --- a/styleguide-app/Examples/AssignmentIcon.elm +++ b/styleguide-app/Examples/AssignmentIcon.elm @@ -2,43 +2,46 @@ module Examples.AssignmentIcon exposing (example) {-| -@docs example, styles +@docs example -} import Category exposing (Category(..)) +import Example exposing (Example) import Examples.IconExamples as IconExamples -import ModuleExample exposing (ModuleExample) import Nri.Ui.AssignmentIcon.V1 as AssignmentIcon import Nri.Ui.Icon.V5 as Icon -import Sort.Set as Set exposing (Set) {-| -} -example : ModuleExample msg +example : Example () () example = { name = "Nri.Ui.AssignmentIcon.V1" - , categories = Set.fromList Category.sorter <| List.singleton Icons - , content = - [ IconExamples.view "Quiz engine" - [ ( "diagnostic", AssignmentIcon.diagnostic ) - , ( "practice", AssignmentIcon.practice ) - , ( "quiz", AssignmentIcon.quiz ) + , categories = [ Icons ] + , state = () + , update = \_ state -> ( state, Cmd.none ) + , subscriptions = \_ -> Sub.none + , view = + \_ -> + [ IconExamples.view "Quiz engine" + [ ( "diagnostic", AssignmentIcon.diagnostic ) + , ( "practice", AssignmentIcon.practice ) + , ( "quiz", AssignmentIcon.quiz ) + ] + , IconExamples.view "Writing" + [ ( "quickWrite", AssignmentIcon.quickWrite ) + , ( "guidedDraft", AssignmentIcon.guidedDraft ) + , ( "peerReview", AssignmentIcon.peerReview ) + , ( "selfReview", AssignmentIcon.selfReview ) + ] + , IconExamples.view "Stages" + [ ( "submitting", AssignmentIcon.submitting ) + , ( "rating", AssignmentIcon.rating ) + , ( "revising", AssignmentIcon.revising ) + ] + , IconExamples.view "Start" + [ ( "startPrimary", AssignmentIcon.startPrimary ) + , ( "startSecondary", AssignmentIcon.startSecondary ) + ] ] - , IconExamples.view "Writing" - [ ( "quickWrite", AssignmentIcon.quickWrite ) - , ( "guidedDraft", AssignmentIcon.guidedDraft ) - , ( "peerReview", AssignmentIcon.peerReview ) - , ( "selfReview", AssignmentIcon.selfReview ) - ] - , IconExamples.view "Stages" - [ ( "submitting", AssignmentIcon.submitting ) - , ( "rating", AssignmentIcon.rating ) - , ( "revising", AssignmentIcon.revising ) - ] - , IconExamples.view "Start" - [ ( "startPrimary", AssignmentIcon.startPrimary ) - , ( "startSecondary", AssignmentIcon.startSecondary ) - ] - ] } diff --git a/styleguide-app/Examples/BannerAlert.elm b/styleguide-app/Examples/BannerAlert.elm index 6d4a76e7..0097c4c2 100644 --- a/styleguide-app/Examples/BannerAlert.elm +++ b/styleguide-app/Examples/BannerAlert.elm @@ -12,7 +12,6 @@ import Css import Example exposing (Example) import Html.Styled exposing (Html, a, div, h3, pre, text) import Html.Styled.Attributes as Attributes -import ModuleExample exposing (ModuleExample) import Nri.Ui.BannerAlert.V6 as BannerAlert import Nri.Ui.Colors.V1 as Colors import Nri.Ui.Fonts.V1 as Fonts diff --git a/styleguide-app/Examples/Button.elm b/styleguide-app/Examples/Button.elm index 3219e190..8a860066 100644 --- a/styleguide-app/Examples/Button.elm +++ b/styleguide-app/Examples/Button.elm @@ -12,7 +12,6 @@ import Debug.Control as Control exposing (Control) import Example exposing (Example) import Html.Styled exposing (..) import Html.Styled.Attributes exposing (css, id) -import ModuleExample exposing (ModuleExample, ModuleMessages) import Nri.Ui.Button.V10 as Button import Nri.Ui.Heading.V2 as Heading import Nri.Ui.Svg.V1 as Svg exposing (Svg) diff --git a/styleguide-app/Examples/Callout.elm b/styleguide-app/Examples/Callout.elm index 45fc0c6d..47fbb1d4 100644 --- a/styleguide-app/Examples/Callout.elm +++ b/styleguide-app/Examples/Callout.elm @@ -8,50 +8,53 @@ module Examples.Callout exposing (example) import Category exposing (Category(..)) import Css +import Example exposing (Example) import Html.Styled as Html import Html.Styled.Attributes exposing (href, title) -import ModuleExample exposing (ModuleExample) import Nri.Ui.Callout.V1 as Callout exposing (callout) -import Sort.Set as Set exposing (Set) -example : ModuleExample msg +example : Example () () example = { name = "Nri.Ui.Callout.V1" - , categories = Set.fromList Category.sorter <| List.singleton Messaging - , content = - [ -- PLAIN - Html.h3 [] [ Html.text "Originally Designed Use Case" ] - , callout - [ Callout.label (Html.text "BETA") - , Callout.custom (title "beta warning") - ] - [ Html.text "This tab is still a work in progress; some of your student's information may be missing." - , Html.br [] [] - , Html.text "To share your thoughts and help us improve the experience, " - , Html.a [ href "#" ] [ Html.text "click here" ] - , Html.text "." - ] + , categories = [ Messaging ] + , state = () + , update = \_ state -> ( state, Cmd.none ) + , subscriptions = \_ -> Sub.none + , view = + \_ -> + [ -- PLAIN + Html.h3 [] [ Html.text "Originally Designed Use Case" ] + , callout + [ Callout.label (Html.text "BETA") + , Callout.custom (title "beta warning") + ] + [ Html.text "This tab is still a work in progress; some of your student's information may be missing." + , Html.br [] [] + , Html.text "To share your thoughts and help us improve the experience, " + , Html.a [ href "#" ] [ Html.text "click here" ] + , Html.text "." + ] - -- WITH SIDE TEXT - , Html.h3 [] [ Html.text "Without side text" ] - , callout - [ Callout.custom (title "no side text") ] - [ Html.text "I feel weird without my side text!" ] + -- WITH SIDE TEXT + , Html.h3 [] [ Html.text "Without side text" ] + , callout + [ Callout.custom (title "no side text") ] + [ Html.text "I feel weird without my side text!" ] - -- WITH CSS CUSTOMIZATIONS - , Html.h3 [] [ Html.text "With CSS customizations" ] - , callout - [ Callout.containerCss [ Css.margin (Css.px 20) ] - , Callout.label (Html.text "HMMM") - , Callout.custom (title "margin") + -- WITH CSS CUSTOMIZATIONS + , Html.h3 [] [ Html.text "With CSS customizations" ] + , callout + [ Callout.containerCss [ Css.margin (Css.px 20) ] + , Callout.label (Html.text "HMMM") + , Callout.custom (title "margin") + ] + [ Html.text "My container styles are customized to add margin around the callout" ] + , callout + [ Callout.contentCss [ Css.textTransform Css.uppercase ] + , Callout.label (Html.text "WOW!") + , Callout.custom (title "yelling") + ] + [ Html.text "My content styles are customized to yell about everything" ] ] - [ Html.text "My container styles are customized to add margin around the callout" ] - , callout - [ Callout.contentCss [ Css.textTransform Css.uppercase ] - , Callout.label (Html.text "WOW!") - , Callout.custom (title "yelling") - ] - [ Html.text "My content styles are customized to yell about everything" ] - ] } diff --git a/styleguide-app/Examples/ClickableText.elm b/styleguide-app/Examples/ClickableText.elm index 13dbcb9d..7940ecaa 100644 --- a/styleguide-app/Examples/ClickableText.elm +++ b/styleguide-app/Examples/ClickableText.elm @@ -16,7 +16,6 @@ import Nri.Ui.ClickableText.V3 as ClickableText import Nri.Ui.Svg.V1 as Svg exposing (Svg) import Nri.Ui.Text.V4 as Text import Nri.Ui.UiIcon.V1 as UiIcon -import Sort.Set as Set exposing (Set) {-| -} diff --git a/styleguide-app/Examples/Colors.elm b/styleguide-app/Examples/Colors.elm index cf7964ff..7f02c352 100644 --- a/styleguide-app/Examples/Colors.elm +++ b/styleguide-app/Examples/Colors.elm @@ -9,94 +9,97 @@ module Examples.Colors exposing (example) import Category exposing (Category(..)) import Color exposing (highContrast) import Css +import Example exposing (Example) import Html.Styled as Html import Html.Styled.Attributes as Attributes exposing (css) -import ModuleExample exposing (ModuleExample) import Nri.Ui.Colors.Extra import Nri.Ui.Colors.V1 as Colors import Nri.Ui.Heading.V2 as Heading -import Sort.Set as Set exposing (Set) type alias ColorExample = ( String, Css.Color, String ) -example : ModuleExample msg +example : Example () () example = { name = "Nri.Ui.Colors.V1" - , categories = Set.fromList Category.sorter <| List.singleton Colors - , content = - [ [ ( "gray20", Colors.gray20, "Main text" ) - , ( "gray45", Colors.gray45, "Secondary text, 0-69 score" ) - , ( "gray75", Colors.gray75, "Border of form elements and tabs" ) - , ( "gray92", Colors.gray92, "Dvdrs/rules, incomplete assmt, inactive tabs/dsbld buttons" ) - , ( "gray96", Colors.gray96, "backgrounds/alternating rows" ) - , ( "navy", Colors.navy, "Headings, indented compts, labels, tooltip bckgrnds" ) - , ( "azure", Colors.azure, "Buttons, other clickable stuff, links" ) - , ( "azureDark", Colors.azureDark, "Azure button shadow" ) - , ( "frost", Colors.frost, "Blue backgrounds pairing with Navy and Azure" ) - , ( "glacier", Colors.glacier, "Blue highlights/selected elements" ) - , ( "lichen", Colors.lichen, "70-79 score" ) - , ( "grassland", Colors.grassland, "80-89 score" ) - , ( "green", Colors.green, "90-100 score" ) - , ( "greenDark", Colors.greenDark, "Green button, swathes of green" ) - , ( "greenDarkest", Colors.greenDarkest, "Green text, green button shadow" ) - , ( "greenLight", Colors.greenLight, "Green backgrounds" ) - , ( "greenLightest", Colors.greenLightest, "Green backgrounds" ) - , ( "cornflower", Colors.cornflower, "Mastery level 1" ) - , ( "cornflowerDark", Colors.cornflowerDark, "Mastery level 1 text" ) - , ( "cornflowerLight", Colors.cornflowerLight, "Background to pair with Cornflower elements" ) - , ( "aqua", Colors.aqua, "Master level 2" ) - , ( "aquaDark", Colors.aquaDark, "Text to pair with Aqua elements" ) - , ( "aquaLight", Colors.aquaLight, "Background to pair with Aqua elements" ) - , ( "turquoise", Colors.turquoise, "Master level 3, writing cycles" ) - , ( "turquoiseDark", Colors.turquoiseDark, "Text to pair with turquoise elements" ) - , ( "turquoiseLight", Colors.turquoiseLight, "Background to pair with turquoise elements" ) - , ( "purple", Colors.purple, "Wrong, form errors, diagnostics, purple button" ) - , ( "purpleDark", Colors.purpleDark, "Purple text, purple button shadow" ) - , ( "purpleLight", Colors.purpleLight, "Purple backgrounds" ) - , ( "red", Colors.red, "NoRedInk red, form warnings, practice" ) - , ( "redDark", Colors.redDark, "Red links/text, red button shadow" ) - , ( "redLight", Colors.redLight, "Red backgrounds" ) - , ( "cyan", Colors.cyan, "Blue Highlighter" ) - , ( "magenta", Colors.magenta, "Pink highlighter" ) - , ( "mustard", Colors.mustard, "Diagnostic assignments, some Premium elements" ) - , ( "ochre", Colors.ochre, "Practice assignments background color, some Premium elements" ) - , ( "ochreDark", Colors.ochreDark, "Practice assignments text color" ) - , ( "sunshine", Colors.sunshine, "Yellow highlights, tips" ) - ] - |> viewColors - , Heading.h3 [] [ Html.text "Background Highlight Colors" ] - , Html.p [] [ Html.text "Background highlights should be used as the default highlight style because they are more noticeable and readable. The dark colors should be used in the case where headings need to harmonize with highlighted containers, such as in Guided Drafts." ] - , [ ( "highlightYellow", Colors.highlightYellow, "Yellow background highlights" ) - , ( "highlightYellowDark", Colors.highlightYellowDark, "Dark yellow background highlights" ) - , ( "highlightCyan", Colors.highlightCyan, "Cyan background highlights" ) - , ( "highlightCyanDark", Colors.highlightCyanDark, "Dark cyan background highlights" ) - , ( "highlightMagenta", Colors.highlightMagenta, "Magenta background highlights" ) - , ( "highlightMagentaDark", Colors.highlightMagentaDark, "Dark magenta background highlights" ) - , ( "highlightGreen", Colors.highlightGreen, "Green background highlights" ) - , ( "highlightGreenDark", Colors.highlightGreenDark, "Dark green background highlights" ) - , ( "highlightBlue", Colors.highlightBlue, "Blue background highlights" ) - , ( "highlightBlueDark", Colors.highlightBlueDark, "Dark blue background highlights" ) - , ( "highlightPurple", Colors.highlightPurple, "Purple background highlights" ) - , ( "highlightPurpleDark", Colors.highlightPurpleDark, "Dark purple background highlights" ) - , ( "highlightBrown", Colors.highlightBrown, "Brown background highlights" ) - , ( "highlightBrownDark", Colors.highlightBrownDark, "Dark brown background highlights" ) - ] - |> viewColors - , Heading.h3 [] [ Html.text "Text Highlight Colors" ] - , Html.p [] [ Html.text "Colors for highlighting text on a white background. These colors are readable at 14px bold and bigger." ] - , [ ( "textHighlightYellow", Colors.textHighlightYellow, "Neutral text highlight #1" ) - , ( "textHighlightCyan", Colors.textHighlightCyan, "Neutral text highlight #2" ) - , ( "textHighlightMagenta", Colors.textHighlightMagenta, "Neutral text highlight #3" ) - , ( "textHighlightGreen", Colors.textHighlightGreen, "Neutral text highlight #4, Positive text highlight #1" ) - , ( "textHighlightBlue", Colors.textHighlightBlue, "Neutral text highlight #5, Positive text highlight #2" ) - , ( "textHighlightPurple", Colors.textHighlightPurple, "Negative text highlight #1" ) - , ( "textHighlightBrown", Colors.textHighlightBrown, "Negative text highlight #2" ) - ] - |> viewColors - ] + , categories = List.singleton Colors + , state = () + , update = \_ state -> ( state, Cmd.none ) + , subscriptions = \_ -> Sub.none + , view = + \_ -> + [ [ ( "gray20", Colors.gray20, "Main text" ) + , ( "gray45", Colors.gray45, "Secondary text, 0-69 score" ) + , ( "gray75", Colors.gray75, "Border of form elements and tabs" ) + , ( "gray92", Colors.gray92, "Dvdrs/rules, incomplete assmt, inactive tabs/dsbld buttons" ) + , ( "gray96", Colors.gray96, "backgrounds/alternating rows" ) + , ( "navy", Colors.navy, "Headings, indented compts, labels, tooltip bckgrnds" ) + , ( "azure", Colors.azure, "Buttons, other clickable stuff, links" ) + , ( "azureDark", Colors.azureDark, "Azure button shadow" ) + , ( "frost", Colors.frost, "Blue backgrounds pairing with Navy and Azure" ) + , ( "glacier", Colors.glacier, "Blue highlights/selected elements" ) + , ( "lichen", Colors.lichen, "70-79 score" ) + , ( "grassland", Colors.grassland, "80-89 score" ) + , ( "green", Colors.green, "90-100 score" ) + , ( "greenDark", Colors.greenDark, "Green button, swathes of green" ) + , ( "greenDarkest", Colors.greenDarkest, "Green text, green button shadow" ) + , ( "greenLight", Colors.greenLight, "Green backgrounds" ) + , ( "greenLightest", Colors.greenLightest, "Green backgrounds" ) + , ( "cornflower", Colors.cornflower, "Mastery level 1" ) + , ( "cornflowerDark", Colors.cornflowerDark, "Mastery level 1 text" ) + , ( "cornflowerLight", Colors.cornflowerLight, "Background to pair with Cornflower elements" ) + , ( "aqua", Colors.aqua, "Master level 2" ) + , ( "aquaDark", Colors.aquaDark, "Text to pair with Aqua elements" ) + , ( "aquaLight", Colors.aquaLight, "Background to pair with Aqua elements" ) + , ( "turquoise", Colors.turquoise, "Master level 3, writing cycles" ) + , ( "turquoiseDark", Colors.turquoiseDark, "Text to pair with turquoise elements" ) + , ( "turquoiseLight", Colors.turquoiseLight, "Background to pair with turquoise elements" ) + , ( "purple", Colors.purple, "Wrong, form errors, diagnostics, purple button" ) + , ( "purpleDark", Colors.purpleDark, "Purple text, purple button shadow" ) + , ( "purpleLight", Colors.purpleLight, "Purple backgrounds" ) + , ( "red", Colors.red, "NoRedInk red, form warnings, practice" ) + , ( "redDark", Colors.redDark, "Red links/text, red button shadow" ) + , ( "redLight", Colors.redLight, "Red backgrounds" ) + , ( "cyan", Colors.cyan, "Blue Highlighter" ) + , ( "magenta", Colors.magenta, "Pink highlighter" ) + , ( "mustard", Colors.mustard, "Diagnostic assignments, some Premium elements" ) + , ( "ochre", Colors.ochre, "Practice assignments background color, some Premium elements" ) + , ( "ochreDark", Colors.ochreDark, "Practice assignments text color" ) + , ( "sunshine", Colors.sunshine, "Yellow highlights, tips" ) + ] + |> viewColors + , Heading.h3 [] [ Html.text "Background Highlight Colors" ] + , Html.p [] [ Html.text "Background highlights should be used as the default highlight style because they are more noticeable and readable. The dark colors should be used in the case where headings need to harmonize with highlighted containers, such as in Guided Drafts." ] + , [ ( "highlightYellow", Colors.highlightYellow, "Yellow background highlights" ) + , ( "highlightYellowDark", Colors.highlightYellowDark, "Dark yellow background highlights" ) + , ( "highlightCyan", Colors.highlightCyan, "Cyan background highlights" ) + , ( "highlightCyanDark", Colors.highlightCyanDark, "Dark cyan background highlights" ) + , ( "highlightMagenta", Colors.highlightMagenta, "Magenta background highlights" ) + , ( "highlightMagentaDark", Colors.highlightMagentaDark, "Dark magenta background highlights" ) + , ( "highlightGreen", Colors.highlightGreen, "Green background highlights" ) + , ( "highlightGreenDark", Colors.highlightGreenDark, "Dark green background highlights" ) + , ( "highlightBlue", Colors.highlightBlue, "Blue background highlights" ) + , ( "highlightBlueDark", Colors.highlightBlueDark, "Dark blue background highlights" ) + , ( "highlightPurple", Colors.highlightPurple, "Purple background highlights" ) + , ( "highlightPurpleDark", Colors.highlightPurpleDark, "Dark purple background highlights" ) + , ( "highlightBrown", Colors.highlightBrown, "Brown background highlights" ) + , ( "highlightBrownDark", Colors.highlightBrownDark, "Dark brown background highlights" ) + ] + |> viewColors + , Heading.h3 [] [ Html.text "Text Highlight Colors" ] + , Html.p [] [ Html.text "Colors for highlighting text on a white background. These colors are readable at 14px bold and bigger." ] + , [ ( "textHighlightYellow", Colors.textHighlightYellow, "Neutral text highlight #1" ) + , ( "textHighlightCyan", Colors.textHighlightCyan, "Neutral text highlight #2" ) + , ( "textHighlightMagenta", Colors.textHighlightMagenta, "Neutral text highlight #3" ) + , ( "textHighlightGreen", Colors.textHighlightGreen, "Neutral text highlight #4, Positive text highlight #1" ) + , ( "textHighlightBlue", Colors.textHighlightBlue, "Neutral text highlight #5, Positive text highlight #2" ) + , ( "textHighlightPurple", Colors.textHighlightPurple, "Negative text highlight #1" ) + , ( "textHighlightBrown", Colors.textHighlightBrown, "Negative text highlight #2" ) + ] + |> viewColors + ] } diff --git a/styleguide-app/Examples/Dropdown.elm b/styleguide-app/Examples/Dropdown.elm index 66f665e4..2d575a7c 100644 --- a/styleguide-app/Examples/Dropdown.elm +++ b/styleguide-app/Examples/Dropdown.elm @@ -10,7 +10,6 @@ import Category exposing (Category(..)) import Example exposing (Example) import Html.Styled import Nri.Ui.Dropdown.V2 -import Sort.Set as Set exposing (Set) {-| -} diff --git a/styleguide-app/Examples/Fonts.elm b/styleguide-app/Examples/Fonts.elm index 43bc6d3b..3d212a25 100644 --- a/styleguide-app/Examples/Fonts.elm +++ b/styleguide-app/Examples/Fonts.elm @@ -7,28 +7,31 @@ module Examples.Fonts exposing (example) -} import Category exposing (Category(..)) +import Example exposing (Example) import Html.Styled as Html import Html.Styled.Attributes exposing (css) -import ModuleExample exposing (ModuleExample) import Nri.Ui.Fonts.V1 as Fonts import Nri.Ui.Heading.V2 as Heading -import Sort.Set as Set exposing (Set) {-| -} -example : ModuleExample msg +example : Example () () example = { name = "Nri.Ui.Fonts.V1" - , categories = Set.fromList Category.sorter <| List.singleton Text - , content = - [ Heading.h3 [] [ Html.text "baseFont" ] - , Html.p [ css [ Fonts.baseFont ] ] - [ Html.text "AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz" ] - , Heading.h3 [] [ Html.text "quizFont" ] - , Html.p [ css [ Fonts.quizFont ] ] - [ Html.text "AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz" ] - , Heading.h3 [] [ Html.text "ugFont" ] - , Html.p [ css [ Fonts.ugFont ] ] - [ Html.text "AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz" ] - ] + , categories = List.singleton Text + , state = () + , update = \_ state -> ( state, Cmd.none ) + , subscriptions = \_ -> Sub.none + , view = + \_ -> + [ Heading.h3 [] [ Html.text "baseFont" ] + , Html.p [ css [ Fonts.baseFont ] ] + [ Html.text "AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz" ] + , Heading.h3 [] [ Html.text "quizFont" ] + , Html.p [ css [ Fonts.quizFont ] ] + [ Html.text "AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz" ] + , Heading.h3 [] [ Html.text "ugFont" ] + , Html.p [ css [ Fonts.ugFont ] ] + [ Html.text "AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz" ] + ] } diff --git a/styleguide-app/Examples/Heading.elm b/styleguide-app/Examples/Heading.elm index 9e38fbb4..6355f4b9 100644 --- a/styleguide-app/Examples/Heading.elm +++ b/styleguide-app/Examples/Heading.elm @@ -8,26 +8,29 @@ module Examples.Heading exposing (example) import Category exposing (Category(..)) import Css +import Example exposing (Example) import Html.Styled as Html -import ModuleExample exposing (ModuleExample) import Nri.Ui.Colors.V1 as Colors import Nri.Ui.Heading.V2 as Heading -import Sort.Set as Set exposing (Set) {-| -} -example : ModuleExample msg +example : Example () () example = { name = "Nri.Ui.Heading.V2" - , categories = Set.fromList Category.sorter <| List.singleton Text - , content = - [ Heading.h1 [] [ Html.text "This is the main page heading." ] - , Heading.h2 [] [ Html.text "This is a tagline" ] - , Heading.h3 [] [ Html.text "This is a subHeading" ] - , Heading.h4 [] [ Html.text "This is a smallHeading" ] - , Heading.h2 [ Heading.style Heading.Top ] - [ Html.text "Heading.h2 [ Heading.style Heading.Top ]" ] - , Heading.h2 [ Heading.css [ Css.color Colors.highlightPurpleDark ] ] - [ Html.text "Heading.h2 [ Heading.css [ Css.color Colors.highlightPurpleDark ] ]" ] - ] + , categories = List.singleton Text + , state = () + , update = \_ state -> ( state, Cmd.none ) + , subscriptions = \_ -> Sub.none + , view = + \_ -> + [ Heading.h1 [] [ Html.text "This is the main page heading." ] + , Heading.h2 [] [ Html.text "This is a tagline" ] + , Heading.h3 [] [ Html.text "This is a subHeading" ] + , Heading.h4 [] [ Html.text "This is a smallHeading" ] + , Heading.h2 [ Heading.style Heading.Top ] + [ Html.text "Heading.h2 [ Heading.style Heading.Top ]" ] + , Heading.h2 [ Heading.css [ Css.color Colors.highlightPurpleDark ] ] + [ Html.text "Heading.h2 [ Heading.css [ Css.color Colors.highlightPurpleDark ] ]" ] + ] } diff --git a/styleguide-app/Examples/Icon.elm b/styleguide-app/Examples/Icon.elm index 9d069484..31139f2c 100644 --- a/styleguide-app/Examples/Icon.elm +++ b/styleguide-app/Examples/Icon.elm @@ -9,27 +9,30 @@ module Examples.Icon exposing (example) import Category exposing (Category(..)) import Css import Css.Global +import Example exposing (Example) import Html.Styled as Html exposing (Html) import Html.Styled.Attributes exposing (css) -import ModuleExample exposing (ModuleExample) import Nri.Ui.AssetPath as AssetPath exposing (Asset(..)) import Nri.Ui.Colors.V1 as Colors import Nri.Ui.Heading.V2 as Heading import Nri.Ui.Icon.V5 as Icon import Nri.Ui.Text.V4 as Text -import Sort.Set as Set exposing (Set) {-| -} -example : ModuleExample msg +example : Example () () example = { name = "Nri.Ui.Icon.V5" - , categories = Set.fromList Category.sorter <| List.singleton Icons - , content = - [ viewLarge "Bulbs and Tips" - [ deprecatedIcon { icon = Icon.lightBulb { hint_png = Asset "assets/images/hint.png" }, background = Colors.frost, alt = "LightBulb" } + , categories = List.singleton Icons + , state = () + , update = \_ state -> ( state, Cmd.none ) + , subscriptions = \_ -> Sub.none + , view = + \_ -> + [ viewLarge "Bulbs and Tips" + [ deprecatedIcon { icon = Icon.lightBulb { hint_png = Asset "assets/images/hint.png" }, background = Colors.frost, alt = "LightBulb" } + ] ] - ] } diff --git a/styleguide-app/Examples/Logo.elm b/styleguide-app/Examples/Logo.elm index e256c457..f62d0ca3 100644 --- a/styleguide-app/Examples/Logo.elm +++ b/styleguide-app/Examples/Logo.elm @@ -8,48 +8,51 @@ module Examples.Logo exposing (example) import Category exposing (Category(..)) import Css +import Example exposing (Example) import Examples.IconExamples as IconExamples -import ModuleExample exposing (ModuleExample) import Nri.Ui.Colors.V1 as Colors import Nri.Ui.Logo.V1 as Logo -import Sort.Set as Set exposing (Set) {-| -} -example : ModuleExample msg +example : Example () () example = { name = "Nri.Ui.Logo.V1" - , categories = Set.fromList Category.sorter <| List.singleton Icons - , content = - [ IconExamples.viewWithCustomStyles "NRI" - [ ( "noredink" - , Logo.noredink - , [ Css.height (Css.px 25) - , Css.width (Css.px 100) - , Css.margin (Css.px 4) + , categories = List.singleton Icons + , state = () + , update = \_ state -> ( state, Cmd.none ) + , subscriptions = \_ -> Sub.none + , view = + \_ -> + [ IconExamples.viewWithCustomStyles "NRI" + [ ( "noredink" + , Logo.noredink + , [ Css.height (Css.px 25) + , Css.width (Css.px 100) + , Css.margin (Css.px 4) + ] + ) ] - ) - ] - , IconExamples.viewWithCustomStyles "Social Media & SSO" - [ ( "facebook" - , Logo.facebook - , defaults - ) - , ( "twitter", Logo.twitter, defaults ) - , ( "clever" - , Logo.clever - , [ Css.height (Css.px 25) - , Css.width (Css.px 100) - , Css.margin (Css.px 4) - , Css.color Colors.azure + , IconExamples.viewWithCustomStyles "Social Media & SSO" + [ ( "facebook" + , Logo.facebook + , defaults + ) + , ( "twitter", Logo.twitter, defaults ) + , ( "clever" + , Logo.clever + , [ Css.height (Css.px 25) + , Css.width (Css.px 100) + , Css.margin (Css.px 4) + , Css.color Colors.azure + ] + ) + , ( "google classroom" + , Logo.googleClassroom + , defaults + ) ] - ) - , ( "google classroom" - , Logo.googleClassroom - , defaults - ) ] - ] } diff --git a/styleguide-app/Examples/MasteryIcon.elm b/styleguide-app/Examples/MasteryIcon.elm index 5129a3f5..762e0165 100644 --- a/styleguide-app/Examples/MasteryIcon.elm +++ b/styleguide-app/Examples/MasteryIcon.elm @@ -7,24 +7,27 @@ module Examples.MasteryIcon exposing (example) -} import Category exposing (Category(..)) +import Example exposing (Example) import Examples.IconExamples as IconExamples -import ModuleExample exposing (ModuleExample) import Nri.Ui.Colors.V1 as Colors import Nri.Ui.MasteryIcon.V1 as MasteryIcon -import Sort.Set as Set exposing (Set) {-| -} -example : ModuleExample msg +example : Example () () example = { name = "Nri.Ui.MasteryIcon.V1" - , categories = Set.fromList Category.sorter <| List.singleton Icons - , content = - [ IconExamples.view "Levels" - [ ( "levelZero", MasteryIcon.levelZero ) - , ( "levelOne", MasteryIcon.levelOne ) - , ( "levelTwo", MasteryIcon.levelTwo ) - , ( "levelThree", MasteryIcon.levelThree ) + , categories = List.singleton Icons + , state = () + , update = \_ state -> ( state, Cmd.none ) + , subscriptions = \_ -> Sub.none + , view = + \_ -> + [ IconExamples.view "Levels" + [ ( "levelZero", MasteryIcon.levelZero ) + , ( "levelOne", MasteryIcon.levelOne ) + , ( "levelTwo", MasteryIcon.levelTwo ) + , ( "levelThree", MasteryIcon.levelThree ) + ] ] - ] } diff --git a/styleguide-app/Examples/Page.elm b/styleguide-app/Examples/Page.elm index b0070d95..7cd9c234 100644 --- a/styleguide-app/Examples/Page.elm +++ b/styleguide-app/Examples/Page.elm @@ -2,46 +2,49 @@ module Examples.Page exposing (example) {-| -@docs example, styles +@docs example -} import Category exposing (Category(..)) import Css import Css.Global exposing (Snippet, adjacentSiblings, children, class, descendants, each, everything, media, selector, withClass) +import Example exposing (Example) import Html.Styled as Html exposing (Html) -import ModuleExample exposing (ModuleExample) import Nri.Ui.Heading.V2 as Heading import Nri.Ui.Page.V3 as Page -import Sort.Set as Set exposing (Set) {-| -} -example : msg -> ModuleExample msg -example noOp = +example : Example () () +example = { name = "Nri.Ui.Page.V3" - , categories = Set.fromList Category.sorter <| List.singleton Pages - , content = - [ Css.Global.global - [ Css.Global.selector "[data-page-container]" - [ Css.displayFlex - , Css.flexWrap Css.wrap + , categories = List.singleton Pages + , state = () + , update = \_ state -> ( state, Cmd.none ) + , subscriptions = \_ -> Sub.none + , view = + \_ -> + [ Css.Global.global + [ Css.Global.selector "[data-page-container]" + [ Css.displayFlex + , Css.flexWrap Css.wrap + ] ] + , Heading.h3 [] [ Html.text "Page: Not Found, recovery text: ReturnTo" ] + , Page.notFound + { link = () + , recoveryText = Page.ReturnTo "the main page" + } + , Heading.h3 [] [ Html.text "Page: Broken, recovery text: Reload" ] + , Page.broken + { link = () + , recoveryText = Page.Reload + } + , Heading.h3 [] [ Html.text "Page: No Permission, recovery text: Custom" ] + , Page.noPermission + { link = () + , recoveryText = Page.Custom "Hit the road, Jack" + } ] - , Heading.h3 [] [ Html.text "Page: Not Found, recovery text: ReturnTo" ] - , Page.notFound - { link = noOp - , recoveryText = Page.ReturnTo "the main page" - } - , Heading.h3 [] [ Html.text "Page: Broken, recovery text: Reload" ] - , Page.broken - { link = noOp - , recoveryText = Page.Reload - } - , Heading.h3 [] [ Html.text "Page: No Permission, recovery text: Custom" ] - , Page.noPermission - { link = noOp - , recoveryText = Page.Custom "Hit the road, Jack" - } - ] } diff --git a/styleguide-app/Examples/Pennant.elm b/styleguide-app/Examples/Pennant.elm index d17e2d66..77ee0caa 100644 --- a/styleguide-app/Examples/Pennant.elm +++ b/styleguide-app/Examples/Pennant.elm @@ -8,28 +8,31 @@ module Examples.Pennant exposing (example) import Category exposing (Category(..)) import Css exposing (..) +import Example exposing (Example) import Html.Styled as Html exposing (Html) import Html.Styled.Attributes exposing (css) -import ModuleExample exposing (ModuleExample) import Nri.Ui.Fonts.V1 as Fonts import Nri.Ui.Pennant.V2 as Pennant import Nri.Ui.Svg.V1 as Svg -import Sort.Set as Set exposing (Set) {-| -} -example : ModuleExample msg +example : Example () () example = { name = "Nri.Ui.Pennant.V2" - , categories = Set.fromList Category.sorter <| List.singleton Icons - , content = - [ Html.div [ css [ Css.displayFlex, Css.width (Css.px 200) ] ] - [ Pennant.premiumFlag - |> Svg.withHeight (Css.px 60) - |> Svg.toHtml - , Pennant.disabledPremiumFlag - |> Svg.withHeight (Css.px 60) - |> Svg.toHtml + , categories = List.singleton Icons + , state = () + , update = \_ state -> ( state, Cmd.none ) + , subscriptions = \_ -> Sub.none + , view = + \_ -> + [ Html.div [ css [ Css.displayFlex, Css.width (Css.px 200) ] ] + [ Pennant.premiumFlag + |> Svg.withHeight (Css.px 60) + |> Svg.toHtml + , Pennant.disabledPremiumFlag + |> Svg.withHeight (Css.px 60) + |> Svg.toHtml + ] ] - ] } diff --git a/styleguide-app/Examples/Text.elm b/styleguide-app/Examples/Text.elm index 715a41b7..b87277f8 100644 --- a/styleguide-app/Examples/Text.elm +++ b/styleguide-app/Examples/Text.elm @@ -7,48 +7,51 @@ module Examples.Text exposing (example) -} import Category exposing (Category(..)) +import Example exposing (Example) import Html.Styled as Html import Html.Styled.Attributes as Attributes -import ModuleExample exposing (ModuleExample) import Nri.Ui.Heading.V2 as Heading import Nri.Ui.Text.V4 as Text -import Sort.Set as Set exposing (Set) {-| -} -example : ModuleExample msg +example : Example () () example = { name = "Nri.Ui.Text.V4" - , categories = Set.fromList Category.sorter <| List.singleton Text - , content = - let - exampleHtml kind = - [ Html.text "This is a " - , Html.strong [] [ Html.text kind ] - , Html.text ". " - , Html.a - [ Attributes.href "http://www.noredink.com" - , Attributes.target "_blank" + , categories = List.singleton Text + , state = () + , update = \_ state -> ( state, Cmd.none ) + , subscriptions = \_ -> Sub.none + , view = + \_ -> + let + exampleHtml kind = + [ Html.text "This is a " + , Html.strong [] [ Html.text kind ] + , Html.text ". " + , Html.a + [ Attributes.href "http://www.noredink.com" + , Attributes.target "_blank" + ] + [ Html.text "The quick brown fox jumps over the lazy dog." ] + , Html.text " Be on the lookout for a new and improved assignment creation form! Soon, you'll be able to easily see a summary of the content you're assigning, as well as an estimate for how long the assignment will take." ] - [ Html.text "The quick brown fox jumps over the lazy dog." ] - , Html.text " Be on the lookout for a new and improved assignment creation form! Soon, you'll be able to easily see a summary of the content you're assigning, as well as an estimate for how long the assignment will take." - ] - exampleUGHtml kind = - [ Html.text "This is a " - , Html.strong [] [ Html.text kind ] - , Html.text ". The quick brown fox jumps over the lazy dog." - , Html.text " When I stepped out, into the bright sunlight from the darkness of the movie house, I had only two things on my mind: Paul Newman, and a ride home." - ] - in - [ Text.caption [ Html.text "NOTE: When using these styles, please read the documentation in the Elm module about \"Understanding spacing\"" ] - , Heading.h2 [ Heading.style Heading.Top ] [ Html.text "Paragraph styles" ] - , Text.mediumBody (exampleHtml "mediumBody") - , Text.smallBody (exampleHtml "smallBody") - , Text.smallBodyGray (exampleHtml "smallBodyGray") - , Text.caption (exampleHtml "caption") - , Heading.h2 [ Heading.style Heading.Top ] [ Html.text "Paragraph styles for user-authored content" ] - , Text.ugMediumBody (exampleUGHtml "ugMediumBody") - , Text.ugSmallBody (exampleUGHtml "ugSmallBody") - ] + exampleUGHtml kind = + [ Html.text "This is a " + , Html.strong [] [ Html.text kind ] + , Html.text ". The quick brown fox jumps over the lazy dog." + , Html.text " When I stepped out, into the bright sunlight from the darkness of the movie house, I had only two things on my mind: Paul Newman, and a ride home." + ] + in + [ Text.caption [ Html.text "NOTE: When using these styles, please read the documentation in the Elm module about \"Understanding spacing\"" ] + , Heading.h2 [ Heading.style Heading.Top ] [ Html.text "Paragraph styles" ] + , Text.mediumBody (exampleHtml "mediumBody") + , Text.smallBody (exampleHtml "smallBody") + , Text.smallBodyGray (exampleHtml "smallBodyGray") + , Text.caption (exampleHtml "caption") + , Heading.h2 [ Heading.style Heading.Top ] [ Html.text "Paragraph styles for user-authored content" ] + , Text.ugMediumBody (exampleUGHtml "ugMediumBody") + , Text.ugSmallBody (exampleUGHtml "ugSmallBody") + ] } diff --git a/styleguide-app/Examples/Text/Writing.elm b/styleguide-app/Examples/Text/Writing.elm index 30b1843e..c9ac6af0 100644 --- a/styleguide-app/Examples/Text/Writing.elm +++ b/styleguide-app/Examples/Text/Writing.elm @@ -7,26 +7,29 @@ module Examples.Text.Writing exposing (example) -} import Category exposing (Category(..)) +import Example exposing (Example) import Html.Styled exposing (text) -import ModuleExample exposing (ModuleExample) import Nri.Ui.Text.Writing.V1 as TextWriting -import Sort.Set as Set exposing (Set) {-| -} -example : ModuleExample msg +example : Example () () example = { name = "Nri.Ui.Text.Writing.V1" - , categories = Set.fromList Category.sorter <| List.singleton Text - , content = - let - longerBody = - """Be on the lookout for a new and improved assignment + , categories = List.singleton Text + , state = () + , update = \_ state -> ( state, Cmd.none ) + , subscriptions = \_ -> Sub.none + , view = + \_ -> + let + longerBody = + """Be on the lookout for a new and improved assignment creation form! Soon, you'll be able to easily see a summary of the content you're assigning, as well as an estimate for how long the assignment will take. """ - in - [ TextWriting.footnote [ text <| "This is a footnote. " ++ longerBody ] - ] + in + [ TextWriting.footnote [ text <| "This is a footnote. " ++ longerBody ] + ] } diff --git a/styleguide-app/Examples/TextInput.elm b/styleguide-app/Examples/TextInput.elm index 94dccf4f..06771c30 100644 --- a/styleguide-app/Examples/TextInput.elm +++ b/styleguide-app/Examples/TextInput.elm @@ -12,7 +12,6 @@ import Example exposing (Example) import Html.Styled as Html import Nri.Ui.Heading.V2 as Heading import Nri.Ui.TextInput.V5 as TextInput -import Sort.Set as Set exposing (Set) {-| -} diff --git a/styleguide-app/Examples/UiIcon.elm b/styleguide-app/Examples/UiIcon.elm index 7535632b..0c46cd8f 100644 --- a/styleguide-app/Examples/UiIcon.elm +++ b/styleguide-app/Examples/UiIcon.elm @@ -7,97 +7,100 @@ module Examples.UiIcon exposing (example) -} import Category exposing (Category(..)) +import Example exposing (Example) import Examples.IconExamples as IconExamples -import ModuleExample exposing (ModuleExample) import Nri.Ui.Colors.V1 as Colors import Nri.Ui.UiIcon.V1 as UiIcon -import Sort.Set as Set exposing (Set) {-| -} -example : ModuleExample msg +example : Example () () example = { name = "Nri.Ui.UiIcon.V1" - , categories = Set.fromList Category.sorter <| List.singleton Icons - , content = - [ IconExamples.view "Interface" - [ ( "seeMore", UiIcon.seeMore ) - , ( "openClose", UiIcon.openClose ) - , ( "download", UiIcon.download ) - , ( "sort", UiIcon.sort ) - , ( "gear", UiIcon.gear ) - , ( "sortArrow", UiIcon.sortArrow ) + , categories = List.singleton Icons + , state = () + , update = \_ state -> ( state, Cmd.none ) + , subscriptions = \_ -> Sub.none + , view = + \_ -> + [ IconExamples.view "Interface" + [ ( "seeMore", UiIcon.seeMore ) + , ( "openClose", UiIcon.openClose ) + , ( "download", UiIcon.download ) + , ( "sort", UiIcon.sort ) + , ( "gear", UiIcon.gear ) + , ( "sortArrow", UiIcon.sortArrow ) + ] + , IconExamples.view "Actions" + [ ( "unarchive", UiIcon.unarchive ) + , ( "share", UiIcon.share ) + , ( "preview", UiIcon.preview ) + , ( "activity", UiIcon.activity ) + , ( "skip", UiIcon.skip ) + , ( "copyToClipboard", UiIcon.copyToClipboard ) + , ( "gift", UiIcon.gift ) + ] + , IconExamples.view "Guidance" + [ ( "footsteps", UiIcon.footsteps ) + , ( "compass", UiIcon.compass ) + , ( "speedometer", UiIcon.speedometer ) + , ( "bulb", UiIcon.bulb ) + , ( "help", UiIcon.help ) + ] + , IconExamples.view "Humans & Class" + [ ( "person", UiIcon.person ) + , ( "class", UiIcon.class ) + , ( "leaderboard", UiIcon.leaderboard ) + , ( "performance", UiIcon.performance ) + ] + , IconExamples.view "Time" + [ ( "calendar", UiIcon.calendar ) + , ( "clock", UiIcon.clock ) + ] + , IconExamples.view "Writing & Writing Utensils" + [ ( "document", UiIcon.document ) + , ( "newspaper", UiIcon.newspaper ) + , ( "edit", UiIcon.edit ) + , ( "pen", UiIcon.pen ) + ] + , IconExamples.view "Arrows" + [ ( "arrowTop", UiIcon.arrowTop ) + , ( "arrowRight", UiIcon.arrowRight ) + , ( "arrowDown", UiIcon.arrowDown ) + , ( "arrowLeft", UiIcon.arrowLeft ) + , ( "arrowPointingRight", UiIcon.arrowPointingRight ) + ] + , IconExamples.view "Sticky things" + [ ( "checkmark", UiIcon.checkmark ) + , ( "x", UiIcon.x ) + , ( "attention", UiIcon.attention ) + , ( "exclamation", UiIcon.exclamation ) + ] + , IconExamples.view "Notifs" + [ ( "flag", UiIcon.flag ) + , ( "star", UiIcon.star ) + , ( "starOutline", UiIcon.starOutline ) + ] + , IconExamples.view "Math" + [ ( "equals", UiIcon.equals ) + , ( "plus", UiIcon.plus ) + ] + , IconExamples.view "Lock & Key" + [ ( "key", UiIcon.key ) + , ( "lock", UiIcon.lock ) + , ( "premiumLock", UiIcon.premiumLock ) + ] + , IconExamples.view "Badges & Levels" + [ ( "badge", UiIcon.badge ) + ] + , IconExamples.view "Tips & Tricks" + [ ( "hat", UiIcon.hat ) + , ( "keychain", UiIcon.keychain ) + ] + , IconExamples.view "Growth" + [ ( "sprout", UiIcon.sprout ) + , ( "sapling", UiIcon.sapling ) + , ( "tree", UiIcon.tree ) + ] ] - , IconExamples.view "Actions" - [ ( "unarchive", UiIcon.unarchive ) - , ( "share", UiIcon.share ) - , ( "preview", UiIcon.preview ) - , ( "activity", UiIcon.activity ) - , ( "skip", UiIcon.skip ) - , ( "copyToClipboard", UiIcon.copyToClipboard ) - , ( "gift", UiIcon.gift ) - ] - , IconExamples.view "Guidance" - [ ( "footsteps", UiIcon.footsteps ) - , ( "compass", UiIcon.compass ) - , ( "speedometer", UiIcon.speedometer ) - , ( "bulb", UiIcon.bulb ) - , ( "help", UiIcon.help ) - ] - , IconExamples.view "Humans & Class" - [ ( "person", UiIcon.person ) - , ( "class", UiIcon.class ) - , ( "leaderboard", UiIcon.leaderboard ) - , ( "performance", UiIcon.performance ) - ] - , IconExamples.view "Time" - [ ( "calendar", UiIcon.calendar ) - , ( "clock", UiIcon.clock ) - ] - , IconExamples.view "Writing & Writing Utensils" - [ ( "document", UiIcon.document ) - , ( "newspaper", UiIcon.newspaper ) - , ( "edit", UiIcon.edit ) - , ( "pen", UiIcon.pen ) - ] - , IconExamples.view "Arrows" - [ ( "arrowTop", UiIcon.arrowTop ) - , ( "arrowRight", UiIcon.arrowRight ) - , ( "arrowDown", UiIcon.arrowDown ) - , ( "arrowLeft", UiIcon.arrowLeft ) - , ( "arrowPointingRight", UiIcon.arrowPointingRight ) - ] - , IconExamples.view "Sticky things" - [ ( "checkmark", UiIcon.checkmark ) - , ( "x", UiIcon.x ) - , ( "attention", UiIcon.attention ) - , ( "exclamation", UiIcon.exclamation ) - ] - , IconExamples.view "Notifs" - [ ( "flag", UiIcon.flag ) - , ( "star", UiIcon.star ) - , ( "starOutline", UiIcon.starOutline ) - ] - , IconExamples.view "Math" - [ ( "equals", UiIcon.equals ) - , ( "plus", UiIcon.plus ) - ] - , IconExamples.view "Lock & Key" - [ ( "key", UiIcon.key ) - , ( "lock", UiIcon.lock ) - , ( "premiumLock", UiIcon.premiumLock ) - ] - , IconExamples.view "Badges & Levels" - [ ( "badge", UiIcon.badge ) - ] - , IconExamples.view "Tips & Tricks" - [ ( "hat", UiIcon.hat ) - , ( "keychain", UiIcon.keychain ) - ] - , IconExamples.view "Growth" - [ ( "sprout", UiIcon.sprout ) - , ( "sapling", UiIcon.sapling ) - , ( "tree", UiIcon.tree ) - ] - ] } diff --git a/styleguide-app/Main.elm b/styleguide-app/Main.elm index e8437d93..4edf8cd5 100644 --- a/styleguide-app/Main.elm +++ b/styleguide-app/Main.elm @@ -11,7 +11,6 @@ import Html.Attributes import Html.Styled as Html exposing (Html, img) import Html.Styled.Attributes as Attributes exposing (..) import Html.Styled.Events as Events -import ModuleExample as ModuleExample exposing (ModuleExample) import Nri.Ui.Colors.V1 as Colors import Nri.Ui.Css.VendorPrefixed as VendorPrefixed import Nri.Ui.Fonts.V1 as Fonts @@ -122,9 +121,7 @@ view_ model = [ sectionStyles ] [] [ Heading.h2 [] [ Html.text ("Viewing " ++ doodad ++ " doodad only") ] - , Examples.view model.moduleStates - |> List.filter (\m -> m.name == doodad) - |> List.map (ModuleExample.view False) + , Examples.view False (\m -> m.name == doodad) model.moduleStates |> Html.div [] |> Html.map UpdateModuleStates ] @@ -135,9 +132,13 @@ view_ model = [ sectionStyles ] [] [ Heading.h2 [] [ Html.text (Category.forDisplay category) ] - , Examples.view model.moduleStates - |> List.filter (\doodad -> Set.memberOf doodad.categories category) - |> List.map (ModuleExample.view True) + , Examples.view True + (\doodad -> + Set.memberOf + (Set.fromList Category.sorter doodad.categories) + category + ) + model.moduleStates |> Html.div [ id (Category.forId category) ] |> Html.map UpdateModuleStates ] @@ -148,8 +149,7 @@ view_ model = [ sectionStyles ] [] [ Heading.h2 [] [ Html.text "All" ] - , Examples.view model.moduleStates - |> List.map (ModuleExample.view True) + , Examples.view True (\_ -> True) model.moduleStates |> Html.div [] |> Html.map UpdateModuleStates ] diff --git a/styleguide-app/ModuleExample.elm b/styleguide-app/ModuleExample.elm deleted file mode 100644 index b51e7573..00000000 --- a/styleguide-app/ModuleExample.elm +++ /dev/null @@ -1,73 +0,0 @@ -module ModuleExample exposing (ModuleExample, ModuleMessages, view) - -import Category exposing (Category) -import Css exposing (..) -import Html.Styled as Html exposing (Html, img) -import Html.Styled.Attributes as Attributes -import Nri.Ui.Colors.V1 exposing (..) -import Sort.Set as Set exposing (Set) - - -type alias ModuleExample msg = - { name : String - , content : List (Html msg) - , categories : Set Category - } - - -{-| -} -type alias ModuleMessages moduleMsg parentMsg = - { noOp : parentMsg - , showItWorked : String -> parentMsg - , wrapper : moduleMsg -> parentMsg - } - - -view : Bool -> ModuleExample msg -> Html msg -view showFocusLink { name, content } = - Html.div - [ -- this class makes the axe accessibility checking output easier to parse - String.replace "." "-" name - |> (++) "module-example__" - |> Attributes.class - ] - [ Html.div - [ Attributes.css - [ displayFlex - , alignItems center - , justifyContent flexStart - , flexWrap wrap - , padding (px 4) - , backgroundColor glacier - ] - ] - [ Html.styled Html.h2 - [ color gray20 - , fontFamilies [ qt "Source Code Pro", "Consolas", "Courier", "monospace" ] - , fontSize (px 20) - , marginTop zero - , marginBottom zero - ] - [] - [ Html.text name ] - , String.replace "." "-" name - |> (++) "https://package.elm-lang.org/packages/NoRedInk/noredink-ui/latest/" - |> viewLink "view docs" - , if showFocusLink then - viewLink "see only this" ("#/doodad/" ++ name) - - else - Html.text "" - ] - , Html.div [ Attributes.css [ padding2 (px 20) zero ] ] content - ] - - -viewLink : String -> String -> Html msg -viewLink text href = - Html.a - [ Attributes.href href - , Attributes.css [ Css.display Css.block, marginLeft (px 20) ] - ] - [ Html.text text - ] From 5e879fd80136ebcb4d863b9125aaab38926016d6 Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Tue, 31 Mar 2020 14:39:34 -0700 Subject: [PATCH 09/17] Begin trying wrapped implementation --- styleguide-app/Example.elm | 26 +++++++++++++++++++++-- styleguide-app/Examples.elm | 42 ++++++++++++++++++++++++++++++------- 2 files changed, 58 insertions(+), 10 deletions(-) diff --git a/styleguide-app/Example.elm b/styleguide-app/Example.elm index edb6767b..f6f64f0a 100644 --- a/styleguide-app/Example.elm +++ b/styleguide-app/Example.elm @@ -1,4 +1,4 @@ -module Example exposing (Example, view) +module Example exposing (Example, view, wrap) import Category exposing (Category) import Css exposing (..) @@ -18,6 +18,28 @@ type alias Example state msg = } +wrap : + { wrapMsg : msg -> msg2, unwrapMsg : msg2 -> Maybe msg } + -> Example state msg + -> Example state msg2 +wrap { wrapMsg, unwrapMsg } example = + { name = example.name + , state = example.state + , update = + \msg2 state -> + case unwrapMsg msg2 of + Just msg -> + example.update msg state + |> Tuple.mapSecond (Cmd.map wrapMsg) + + Nothing -> + ( state, Cmd.none ) + , subscriptions = \state -> Sub.map wrapMsg (example.subscriptions state) + , view = \state -> List.map (Html.map wrapMsg) (example.view state) + , categories = example.categories + } + + view : Bool -> Example state msg -> Html msg view showFocusLink example = Html.div @@ -31,7 +53,7 @@ view showFocusLink example = [ displayFlex , alignItems center , justifyContent flexStart - , flexWrap wrap + , flexWrap Css.wrap , padding (px 4) , backgroundColor glacier ] diff --git a/styleguide-app/Examples.elm b/styleguide-app/Examples.elm index a046a2fe..aff48442 100644 --- a/styleguide-app/Examples.elm +++ b/styleguide-app/Examples.elm @@ -39,8 +39,8 @@ import Html.Styled as Html exposing (Html) type alias ModuleStates = - { accordion : Example Accordion.State Accordion.Msg - , button : Example Button.State Button.Msg + { accordion : Example Accordion.State Msg + , button : Example Button.State Msg , bannerAlert : Example BannerAlert.State BannerAlert.Msg , clickableText : Example ClickableText.State ClickableText.Msg , checkbox : Example Checkbox.State Checkbox.Msg @@ -64,8 +64,8 @@ type alias ModuleStates = init : ModuleStates init = - { accordion = Accordion.example - , button = Button.example + { accordion = Example.wrap { wrapMsg = AccordionMsg, unwrapMsg = getAccordionMsg } Accordion.example + , button = Example.wrap { wrapMsg = ButtonMsg, unwrapMsg = getButtonMsg } Button.example , bannerAlert = BannerAlert.example , clickableText = ClickableText.example , checkbox = Checkbox.example @@ -94,6 +94,26 @@ type Msg | ModalMsg Modal.Msg +getAccordionMsg : Msg -> Maybe Accordion.Msg +getAccordionMsg msg = + case msg of + AccordionMsg childMsg -> + Just childMsg + + _ -> + Nothing + + +getButtonMsg : Msg -> Maybe Button.Msg +getButtonMsg msg = + case msg of + ButtonMsg childMsg -> + Just childMsg + + _ -> + Nothing + + update : Msg -> ModuleStates -> ( ModuleStates, Cmd Msg ) update msg moduleStates = let @@ -108,13 +128,19 @@ update msg moduleStates = ( updater { module_ | state = newState } moduleStates , Cmd.map wrapMsg cmd ) + + update_ example = + example.update msg example.state + |> Tuple.mapFirst (\newState -> { example | state = newState }) in case msg of AccordionMsg exampleMsg -> - updateWith .accordion (\state m -> { m | accordion = state }) AccordionMsg exampleMsg + update_ moduleStates.accordion + |> Tuple.mapFirst (\accordion -> { moduleStates | accordion = accordion }) ButtonMsg exampleMsg -> - updateWith .button (\state m -> { m | button = state }) ButtonMsg exampleMsg + update_ moduleStates.button + |> Tuple.mapFirst (\button -> { moduleStates | button = button }) BannerAlertMsg exampleMsg -> updateWith .bannerAlert (\state m -> { m | bannerAlert = state }) BannerAlertMsg exampleMsg @@ -136,9 +162,9 @@ view : Bool -> (Example state msg -> Bool) -> ModuleStates -> List (Html Msg) view showFocusLink filter moduleStates = -- TODO add the filter back in [ Example.view showFocusLink moduleStates.accordion - |> Html.map AccordionMsg , Example.view showFocusLink moduleStates.button - |> Html.map ButtonMsg , Example.view showFocusLink moduleStates.bannerAlert |> Html.map BannerAlertMsg + , Example.view showFocusLink moduleStates.modal + |> Html.map ModalMsg ] From 92573874fc54d912bdff6ae3a71ac67455f0dd04 Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Tue, 31 Mar 2020 14:45:55 -0700 Subject: [PATCH 10/17] Use new implementation style --- styleguide-app/Examples.elm | 50 +++++++++++++++++++++---------------- 1 file changed, 29 insertions(+), 21 deletions(-) diff --git a/styleguide-app/Examples.elm b/styleguide-app/Examples.elm index aff48442..b05efd2e 100644 --- a/styleguide-app/Examples.elm +++ b/styleguide-app/Examples.elm @@ -41,7 +41,7 @@ import Html.Styled as Html exposing (Html) type alias ModuleStates = { accordion : Example Accordion.State Msg , button : Example Button.State Msg - , bannerAlert : Example BannerAlert.State BannerAlert.Msg + , bannerAlert : Example BannerAlert.State Msg , clickableText : Example ClickableText.State ClickableText.Msg , checkbox : Example Checkbox.State Checkbox.Msg , dropdown : Example Dropdown.State Dropdown.Msg @@ -51,7 +51,7 @@ type alias ModuleStates = , textArea : Example TextArea.State TextArea.Msg , textInput : Example TextInput.State TextInput.Msg , disclosureIndicator : Example DisclosureIndicator.State DisclosureIndicator.Msg - , modal : Example Modal.State Modal.Msg + , modal : Example Modal.State Msg , slideModal : Example SlideModal.State SlideModal.Msg , slide : Example Slide.State Slide.Msg , sortableTable : Example SortableTable.State SortableTable.Msg @@ -66,7 +66,7 @@ init : ModuleStates init = { accordion = Example.wrap { wrapMsg = AccordionMsg, unwrapMsg = getAccordionMsg } Accordion.example , button = Example.wrap { wrapMsg = ButtonMsg, unwrapMsg = getButtonMsg } Button.example - , bannerAlert = BannerAlert.example + , bannerAlert = Example.wrap { wrapMsg = BannerAlertMsg, unwrapMsg = getBannerAlertMsg } BannerAlert.example , clickableText = ClickableText.example , checkbox = Checkbox.example , dropdown = Dropdown.example @@ -76,7 +76,7 @@ init = , textArea = TextArea.example , textInput = TextInput.example , disclosureIndicator = DisclosureIndicator.example - , modal = Modal.example + , modal = Example.wrap { wrapMsg = ModalMsg, unwrapMsg = getModalMsg } Modal.example , slideModal = SlideModal.example , slide = Slide.example , sortableTable = SortableTable.example @@ -114,21 +114,29 @@ getButtonMsg msg = Nothing +getBannerAlertMsg : Msg -> Maybe BannerAlert.Msg +getBannerAlertMsg msg = + case msg of + BannerAlertMsg childMsg -> + Just childMsg + + _ -> + Nothing + + +getModalMsg : Msg -> Maybe Modal.Msg +getModalMsg msg = + case msg of + ModalMsg childMsg -> + Just childMsg + + _ -> + Nothing + + update : Msg -> ModuleStates -> ( ModuleStates, Cmd Msg ) update msg moduleStates = let - updateWith accessor updater wrapMsg childMsg = - let - module_ = - accessor moduleStates - - ( newState, cmd ) = - module_.update childMsg module_.state - in - ( updater { module_ | state = newState } moduleStates - , Cmd.map wrapMsg cmd - ) - update_ example = example.update msg example.state |> Tuple.mapFirst (\newState -> { example | state = newState }) @@ -143,17 +151,19 @@ update msg moduleStates = |> Tuple.mapFirst (\button -> { moduleStates | button = button }) BannerAlertMsg exampleMsg -> - updateWith .bannerAlert (\state m -> { m | bannerAlert = state }) BannerAlertMsg exampleMsg + update_ moduleStates.bannerAlert + |> Tuple.mapFirst (\bannerAlert -> { moduleStates | bannerAlert = bannerAlert }) ModalMsg exampleMsg -> - updateWith .modal (\state m -> { m | modal = state }) ModalMsg exampleMsg + update_ moduleStates.modal + |> Tuple.mapFirst (\modal -> { moduleStates | modal = modal }) {-| -} subscriptions : ModuleStates -> Sub Msg subscriptions moduleStates = Sub.batch - [ Sub.map ModalMsg (moduleStates.modal.subscriptions moduleStates.modal.state) + [ moduleStates.modal.subscriptions moduleStates.modal.state ] @@ -164,7 +174,5 @@ view showFocusLink filter moduleStates = [ Example.view showFocusLink moduleStates.accordion , Example.view showFocusLink moduleStates.button , Example.view showFocusLink moduleStates.bannerAlert - |> Html.map BannerAlertMsg , Example.view showFocusLink moduleStates.modal - |> Html.map ModalMsg ] From b87a61b86f5105b5a04704854b80e9b4e425c0d4 Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Tue, 31 Mar 2020 15:16:10 -0700 Subject: [PATCH 11/17] Use all module list for subscriptions and view --- styleguide-app/Example.elm | 39 +++++++++--- styleguide-app/Examples.elm | 118 ++++++++++++++++++++++++++++++------ 2 files changed, 129 insertions(+), 28 deletions(-) diff --git a/styleguide-app/Example.elm b/styleguide-app/Example.elm index f6f64f0a..1ee16745 100644 --- a/styleguide-app/Example.elm +++ b/styleguide-app/Example.elm @@ -19,23 +19,42 @@ type alias Example state msg = wrap : - { wrapMsg : msg -> msg2, unwrapMsg : msg2 -> Maybe msg } + { wrapMsg : msg -> msg2 + , unwrapMsg : msg2 -> Maybe msg + , wrapState : state -> state2 + , unwrapState : state2 -> Maybe state + } -> Example state msg - -> Example state msg2 -wrap { wrapMsg, unwrapMsg } example = + -> Example state2 msg2 +wrap { wrapMsg, unwrapMsg, wrapState, unwrapState } example = { name = example.name - , state = example.state + , state = wrapState example.state , update = - \msg2 state -> - case unwrapMsg msg2 of - Just msg -> + \msg2 state2 -> + case ( unwrapMsg msg2, unwrapState state2 ) of + ( Just msg, Just state ) -> example.update msg state + |> Tuple.mapFirst wrapState |> Tuple.mapSecond (Cmd.map wrapMsg) + _ -> + ( state2, Cmd.none ) + , subscriptions = + \state2 -> + case unwrapState state2 of + Just state -> + Sub.map wrapMsg (example.subscriptions state) + Nothing -> - ( state, Cmd.none ) - , subscriptions = \state -> Sub.map wrapMsg (example.subscriptions state) - , view = \state -> List.map (Html.map wrapMsg) (example.view state) + Sub.none + , view = + \state2 -> + case unwrapState state2 of + Just state -> + List.map (Html.map wrapMsg) (example.view state) + + Nothing -> + [] , categories = example.categories } diff --git a/styleguide-app/Examples.elm b/styleguide-app/Examples.elm index b05efd2e..c98e7f34 100644 --- a/styleguide-app/Examples.elm +++ b/styleguide-app/Examples.elm @@ -39,9 +39,9 @@ import Html.Styled as Html exposing (Html) type alias ModuleStates = - { accordion : Example Accordion.State Msg - , button : Example Button.State Msg - , bannerAlert : Example BannerAlert.State Msg + { accordion : Example State Msg + , button : Example State Msg + , bannerAlert : Example State Msg , clickableText : Example ClickableText.State ClickableText.Msg , checkbox : Example Checkbox.State Checkbox.Msg , dropdown : Example Dropdown.State Dropdown.Msg @@ -51,7 +51,7 @@ type alias ModuleStates = , textArea : Example TextArea.State TextArea.Msg , textInput : Example TextInput.State TextInput.Msg , disclosureIndicator : Example DisclosureIndicator.State DisclosureIndicator.Msg - , modal : Example Modal.State Msg + , modal : Example State Msg , slideModal : Example SlideModal.State SlideModal.Msg , slide : Example Slide.State Slide.Msg , sortableTable : Example SortableTable.State SortableTable.Msg @@ -64,9 +64,30 @@ type alias ModuleStates = init : ModuleStates init = - { accordion = Example.wrap { wrapMsg = AccordionMsg, unwrapMsg = getAccordionMsg } Accordion.example - , button = Example.wrap { wrapMsg = ButtonMsg, unwrapMsg = getButtonMsg } Button.example - , bannerAlert = Example.wrap { wrapMsg = BannerAlertMsg, unwrapMsg = getBannerAlertMsg } BannerAlert.example + { accordion = + Example.wrap + { wrapMsg = AccordionMsg + , unwrapMsg = getAccordionMsg + , wrapState = AccordionState + , unwrapState = getAccordionState + } + Accordion.example + , button = + Example.wrap + { wrapMsg = ButtonMsg + , unwrapMsg = getButtonMsg + , wrapState = ButtonState + , unwrapState = getButtonState + } + Button.example + , bannerAlert = + Example.wrap + { wrapMsg = BannerAlertMsg + , unwrapMsg = getBannerAlertMsg + , wrapState = BannerAlertState + , unwrapState = getBannerAlertState + } + BannerAlert.example , clickableText = ClickableText.example , checkbox = Checkbox.example , dropdown = Dropdown.example @@ -76,7 +97,14 @@ init = , textArea = TextArea.example , textInput = TextInput.example , disclosureIndicator = DisclosureIndicator.example - , modal = Example.wrap { wrapMsg = ModalMsg, unwrapMsg = getModalMsg } Modal.example + , modal = + Example.wrap + { wrapMsg = ModalMsg + , unwrapMsg = getModalMsg + , wrapState = ModalState + , unwrapState = getModalState + } + Modal.example , slideModal = SlideModal.example , slide = Slide.example , sortableTable = SortableTable.example @@ -87,6 +115,53 @@ init = } +type State + = AccordionState Accordion.State + | ButtonState Button.State + | BannerAlertState BannerAlert.State + | ModalState Modal.State + + +getAccordionState : State -> Maybe Accordion.State +getAccordionState msg = + case msg of + AccordionState childState -> + Just childState + + _ -> + Nothing + + +getButtonState : State -> Maybe Button.State +getButtonState msg = + case msg of + ButtonState childState -> + Just childState + + _ -> + Nothing + + +getBannerAlertState : State -> Maybe BannerAlert.State +getBannerAlertState msg = + case msg of + BannerAlertState childState -> + Just childState + + _ -> + Nothing + + +getModalState : State -> Maybe Modal.State +getModalState msg = + case msg of + ModalState childState -> + Just childState + + _ -> + Nothing + + type Msg = AccordionMsg Accordion.Msg | ButtonMsg Button.Msg @@ -162,17 +237,24 @@ update msg moduleStates = {-| -} subscriptions : ModuleStates -> Sub Msg subscriptions moduleStates = - Sub.batch - [ moduleStates.modal.subscriptions moduleStates.modal.state - ] + allExamples moduleStates + |> List.map (\example -> example.subscriptions example.state) + |> Sub.batch {-| -} -view : Bool -> (Example state msg -> Bool) -> ModuleStates -> List (Html Msg) +view : Bool -> (Example State Msg -> Bool) -> ModuleStates -> List (Html Msg) view showFocusLink filter moduleStates = - -- TODO add the filter back in - [ Example.view showFocusLink moduleStates.accordion - , Example.view showFocusLink moduleStates.button - , Example.view showFocusLink moduleStates.bannerAlert - , Example.view showFocusLink moduleStates.modal - ] + allExamples moduleStates + |> List.filter filter + |> List.map (Example.view showFocusLink) + + +allExamples : ModuleStates -> List (Example State Msg) +allExamples moduleStates = + List.map (\accessor -> accessor moduleStates) + [ .accordion + , .button + , .bannerAlert + , .modal + ] From 0501c25141ad8276e5ebe8539612de3464211a56 Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Tue, 31 Mar 2020 15:26:05 -0700 Subject: [PATCH 12/17] Change the modeling to a dict --- styleguide-app/Examples.elm | 126 ++++++++++-------------------------- 1 file changed, 34 insertions(+), 92 deletions(-) diff --git a/styleguide-app/Examples.elm b/styleguide-app/Examples.elm index c98e7f34..4657d734 100644 --- a/styleguide-app/Examples.elm +++ b/styleguide-app/Examples.elm @@ -1,5 +1,6 @@ module Examples exposing (ModuleStates, Msg, init, subscriptions, update, view) +import Dict exposing (Dict) import Example exposing (Example) import Examples.Accordion as Accordion import Examples.Alert as Alert @@ -38,81 +39,13 @@ import Examples.UiIcon as UiIcon import Html.Styled as Html exposing (Html) -type alias ModuleStates = - { accordion : Example State Msg - , button : Example State Msg - , bannerAlert : Example State Msg - , clickableText : Example ClickableText.State ClickableText.Msg - , checkbox : Example Checkbox.State Checkbox.Msg - , dropdown : Example Dropdown.State Dropdown.Msg - , segmentedControl : Example SegmentedControl.State SegmentedControl.Msg - , select : Example Select.State Select.Msg - , table : Example Table.State Table.Msg - , textArea : Example TextArea.State TextArea.Msg - , textInput : Example TextInput.State TextInput.Msg - , disclosureIndicator : Example DisclosureIndicator.State DisclosureIndicator.Msg - , modal : Example State Msg - , slideModal : Example SlideModal.State SlideModal.Msg - , slide : Example Slide.State Slide.Msg - , sortableTable : Example SortableTable.State SortableTable.Msg - , svg : Example Svg.State Svg.Msg - , clickableSvg : Example ClickableSvg.State ClickableSvg.Msg - , tabs : Example Tabs.State Tabs.Msg - , tooltip : Example Tooltip.State Tooltip.Msg - } - - -init : ModuleStates -init = - { accordion = - Example.wrap - { wrapMsg = AccordionMsg - , unwrapMsg = getAccordionMsg - , wrapState = AccordionState - , unwrapState = getAccordionState - } - Accordion.example - , button = - Example.wrap - { wrapMsg = ButtonMsg - , unwrapMsg = getButtonMsg - , wrapState = ButtonState - , unwrapState = getButtonState - } - Button.example - , bannerAlert = - Example.wrap - { wrapMsg = BannerAlertMsg - , unwrapMsg = getBannerAlertMsg - , wrapState = BannerAlertState - , unwrapState = getBannerAlertState - } - BannerAlert.example - , clickableText = ClickableText.example - , checkbox = Checkbox.example - , dropdown = Dropdown.example - , segmentedControl = SegmentedControl.example - , select = Select.example - , table = Table.example - , textArea = TextArea.example - , textInput = TextInput.example - , disclosureIndicator = DisclosureIndicator.example - , modal = - Example.wrap - { wrapMsg = ModalMsg - , unwrapMsg = getModalMsg - , wrapState = ModalState - , unwrapState = getModalState - } - Modal.example - , slideModal = SlideModal.example - , slide = Slide.example - , sortableTable = SortableTable.example - , svg = Svg.example - , clickableSvg = ClickableSvg.example - , tabs = Tabs.example - , tooltip = Tooltip.example - } +constructors : List ( String, Example State Msg ) +constructors = + [ ( "accordion", Example.wrap { wrapMsg = AccordionMsg, unwrapMsg = getAccordionMsg, wrapState = AccordionState, unwrapState = getAccordionState } Accordion.example ) + , ( "button", Example.wrap { wrapMsg = ButtonMsg, unwrapMsg = getButtonMsg, wrapState = ButtonState, unwrapState = getButtonState } Button.example ) + , ( "bannerAlert", Example.wrap { wrapMsg = BannerAlertMsg, unwrapMsg = getBannerAlertMsg, wrapState = BannerAlertState, unwrapState = getBannerAlertState } BannerAlert.example ) + , ( "modal", Example.wrap { wrapMsg = ModalMsg, unwrapMsg = getModalMsg, wrapState = ModalState, unwrapState = getModalState } Modal.example ) + ] type State @@ -212,26 +145,39 @@ getModalMsg msg = update : Msg -> ModuleStates -> ( ModuleStates, Cmd Msg ) update msg moduleStates = let - update_ example = - example.update msg example.state - |> Tuple.mapFirst (\newState -> { example | state = newState }) + update_ key = + case Dict.get key moduleStates of + Just example -> + example.update msg example.state + |> Tuple.mapFirst + (\newState -> + Dict.insert key { example | state = newState } moduleStates + ) + + Nothing -> + ( moduleStates, Cmd.none ) in case msg of AccordionMsg exampleMsg -> - update_ moduleStates.accordion - |> Tuple.mapFirst (\accordion -> { moduleStates | accordion = accordion }) + update_ "accordion" ButtonMsg exampleMsg -> - update_ moduleStates.button - |> Tuple.mapFirst (\button -> { moduleStates | button = button }) + update_ "button" BannerAlertMsg exampleMsg -> - update_ moduleStates.bannerAlert - |> Tuple.mapFirst (\bannerAlert -> { moduleStates | bannerAlert = bannerAlert }) + update_ "bannerAlert" ModalMsg exampleMsg -> - update_ moduleStates.modal - |> Tuple.mapFirst (\modal -> { moduleStates | modal = modal }) + update_ "modal" + + +type alias ModuleStates = + Dict String (Example State Msg) + + +init : ModuleStates +init = + Dict.fromList constructors {-| -} @@ -252,9 +198,5 @@ view showFocusLink filter moduleStates = allExamples : ModuleStates -> List (Example State Msg) allExamples moduleStates = - List.map (\accessor -> accessor moduleStates) - [ .accordion - , .button - , .bannerAlert - , .modal - ] + List.filterMap (\accessor -> Dict.get accessor moduleStates) + (List.map Tuple.first constructors) From 8a4b246dfa267fb4efe370c8be30c47ff8e41a31 Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Tue, 31 Mar 2020 15:31:03 -0700 Subject: [PATCH 13/17] Inline the example accessors --- styleguide-app/Examples.elm | 176 +++++++++++++++++++----------------- 1 file changed, 92 insertions(+), 84 deletions(-) diff --git a/styleguide-app/Examples.elm b/styleguide-app/Examples.elm index 4657d734..b2bc8051 100644 --- a/styleguide-app/Examples.elm +++ b/styleguide-app/Examples.elm @@ -41,10 +41,98 @@ import Html.Styled as Html exposing (Html) constructors : List ( String, Example State Msg ) constructors = - [ ( "accordion", Example.wrap { wrapMsg = AccordionMsg, unwrapMsg = getAccordionMsg, wrapState = AccordionState, unwrapState = getAccordionState } Accordion.example ) - , ( "button", Example.wrap { wrapMsg = ButtonMsg, unwrapMsg = getButtonMsg, wrapState = ButtonState, unwrapState = getButtonState } Button.example ) - , ( "bannerAlert", Example.wrap { wrapMsg = BannerAlertMsg, unwrapMsg = getBannerAlertMsg, wrapState = BannerAlertState, unwrapState = getBannerAlertState } BannerAlert.example ) - , ( "modal", Example.wrap { wrapMsg = ModalMsg, unwrapMsg = getModalMsg, wrapState = ModalState, unwrapState = getModalState } Modal.example ) + [ ( "accordion" + , Example.wrap + { wrapMsg = AccordionMsg + , unwrapMsg = + \msg -> + case msg of + AccordionMsg childMsg -> + Just childMsg + + _ -> + Nothing + , wrapState = AccordionState + , unwrapState = + \msg -> + case msg of + AccordionState childState -> + Just childState + + _ -> + Nothing + } + Accordion.example + ) + , ( "button" + , Example.wrap + { wrapMsg = ButtonMsg + , unwrapMsg = + \msg -> + case msg of + ButtonMsg childMsg -> + Just childMsg + + _ -> + Nothing + , wrapState = ButtonState + , unwrapState = + \msg -> + case msg of + ButtonState childState -> + Just childState + + _ -> + Nothing + } + Button.example + ) + , ( "bannerAlert" + , Example.wrap + { wrapMsg = BannerAlertMsg + , unwrapMsg = + \msg -> + case msg of + BannerAlertMsg childMsg -> + Just childMsg + + _ -> + Nothing + , wrapState = BannerAlertState + , unwrapState = + \msg -> + case msg of + BannerAlertState childState -> + Just childState + + _ -> + Nothing + } + BannerAlert.example + ) + , ( "modal" + , Example.wrap + { wrapMsg = ModalMsg + , unwrapMsg = + \msg -> + case msg of + ModalMsg childMsg -> + Just childMsg + + _ -> + Nothing + , wrapState = ModalState + , unwrapState = + \msg -> + case msg of + ModalState childState -> + Just childState + + _ -> + Nothing + } + Modal.example + ) ] @@ -55,46 +143,6 @@ type State | ModalState Modal.State -getAccordionState : State -> Maybe Accordion.State -getAccordionState msg = - case msg of - AccordionState childState -> - Just childState - - _ -> - Nothing - - -getButtonState : State -> Maybe Button.State -getButtonState msg = - case msg of - ButtonState childState -> - Just childState - - _ -> - Nothing - - -getBannerAlertState : State -> Maybe BannerAlert.State -getBannerAlertState msg = - case msg of - BannerAlertState childState -> - Just childState - - _ -> - Nothing - - -getModalState : State -> Maybe Modal.State -getModalState msg = - case msg of - ModalState childState -> - Just childState - - _ -> - Nothing - - type Msg = AccordionMsg Accordion.Msg | ButtonMsg Button.Msg @@ -102,46 +150,6 @@ type Msg | ModalMsg Modal.Msg -getAccordionMsg : Msg -> Maybe Accordion.Msg -getAccordionMsg msg = - case msg of - AccordionMsg childMsg -> - Just childMsg - - _ -> - Nothing - - -getButtonMsg : Msg -> Maybe Button.Msg -getButtonMsg msg = - case msg of - ButtonMsg childMsg -> - Just childMsg - - _ -> - Nothing - - -getBannerAlertMsg : Msg -> Maybe BannerAlert.Msg -getBannerAlertMsg msg = - case msg of - BannerAlertMsg childMsg -> - Just childMsg - - _ -> - Nothing - - -getModalMsg : Msg -> Maybe Modal.Msg -getModalMsg msg = - case msg of - ModalMsg childMsg -> - Just childMsg - - _ -> - Nothing - - update : Msg -> ModuleStates -> ( ModuleStates, Cmd Msg ) update msg moduleStates = let From 7d256393827439b35453d1e5d4ac675db23e97c3 Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Tue, 31 Mar 2020 15:42:25 -0700 Subject: [PATCH 14/17] Avoids manually managing the state keys --- styleguide-app/Examples.elm | 231 +++++++++++++++++------------------- 1 file changed, 106 insertions(+), 125 deletions(-) diff --git a/styleguide-app/Examples.elm b/styleguide-app/Examples.elm index b2bc8051..e93f4e7e 100644 --- a/styleguide-app/Examples.elm +++ b/styleguide-app/Examples.elm @@ -39,100 +39,92 @@ import Examples.UiIcon as UiIcon import Html.Styled as Html exposing (Html) -constructors : List ( String, Example State Msg ) -constructors = - [ ( "accordion" - , Example.wrap - { wrapMsg = AccordionMsg - , unwrapMsg = - \msg -> - case msg of - AccordionMsg childMsg -> - Just childMsg +examples : List (Example State MsgKind) +examples = + [ Example.wrap + { wrapMsg = AccordionMsg + , unwrapMsg = + \msg -> + case msg of + AccordionMsg childMsg -> + Just childMsg - _ -> - Nothing - , wrapState = AccordionState - , unwrapState = - \msg -> - case msg of - AccordionState childState -> - Just childState + _ -> + Nothing + , wrapState = AccordionState + , unwrapState = + \msg -> + case msg of + AccordionState childState -> + Just childState - _ -> - Nothing - } - Accordion.example - ) - , ( "button" - , Example.wrap - { wrapMsg = ButtonMsg - , unwrapMsg = - \msg -> - case msg of - ButtonMsg childMsg -> - Just childMsg + _ -> + Nothing + } + Accordion.example + , Example.wrap + { wrapMsg = ButtonMsg + , unwrapMsg = + \msg -> + case msg of + ButtonMsg childMsg -> + Just childMsg - _ -> - Nothing - , wrapState = ButtonState - , unwrapState = - \msg -> - case msg of - ButtonState childState -> - Just childState + _ -> + Nothing + , wrapState = ButtonState + , unwrapState = + \msg -> + case msg of + ButtonState childState -> + Just childState - _ -> - Nothing - } - Button.example - ) - , ( "bannerAlert" - , Example.wrap - { wrapMsg = BannerAlertMsg - , unwrapMsg = - \msg -> - case msg of - BannerAlertMsg childMsg -> - Just childMsg + _ -> + Nothing + } + Button.example + , Example.wrap + { wrapMsg = BannerAlertMsg + , unwrapMsg = + \msg -> + case msg of + BannerAlertMsg childMsg -> + Just childMsg - _ -> - Nothing - , wrapState = BannerAlertState - , unwrapState = - \msg -> - case msg of - BannerAlertState childState -> - Just childState + _ -> + Nothing + , wrapState = BannerAlertState + , unwrapState = + \msg -> + case msg of + BannerAlertState childState -> + Just childState - _ -> - Nothing - } - BannerAlert.example - ) - , ( "modal" - , Example.wrap - { wrapMsg = ModalMsg - , unwrapMsg = - \msg -> - case msg of - ModalMsg childMsg -> - Just childMsg + _ -> + Nothing + } + BannerAlert.example + , Example.wrap + { wrapMsg = ModalMsg + , unwrapMsg = + \msg -> + case msg of + ModalMsg childMsg -> + Just childMsg - _ -> - Nothing - , wrapState = ModalState - , unwrapState = - \msg -> - case msg of - ModalState childState -> - Just childState + _ -> + Nothing + , wrapState = ModalState + , unwrapState = + \msg -> + case msg of + ModalState childState -> + Just childState - _ -> - Nothing - } - Modal.example - ) + _ -> + Nothing + } + Modal.example ] @@ -143,68 +135,57 @@ type State | ModalState Modal.State -type Msg +type MsgKind = AccordionMsg Accordion.Msg | ButtonMsg Button.Msg | BannerAlertMsg BannerAlert.Msg | ModalMsg Modal.Msg +type Msg + = Msg String MsgKind + + update : Msg -> ModuleStates -> ( ModuleStates, Cmd Msg ) -update msg moduleStates = - let - update_ key = - case Dict.get key moduleStates of - Just example -> - example.update msg example.state - |> Tuple.mapFirst - (\newState -> - Dict.insert key { example | state = newState } moduleStates - ) +update (Msg key exampleMsg) moduleStates = + case Dict.get key moduleStates of + Just example -> + example.update exampleMsg example.state + |> Tuple.mapFirst + (\newState -> + Dict.insert key { example | state = newState } moduleStates + ) + |> Tuple.mapSecond (Cmd.map (Msg key)) - Nothing -> - ( moduleStates, Cmd.none ) - in - case msg of - AccordionMsg exampleMsg -> - update_ "accordion" - - ButtonMsg exampleMsg -> - update_ "button" - - BannerAlertMsg exampleMsg -> - update_ "bannerAlert" - - ModalMsg exampleMsg -> - update_ "modal" + Nothing -> + ( moduleStates, Cmd.none ) type alias ModuleStates = - Dict String (Example State Msg) + Dict String (Example State MsgKind) init : ModuleStates init = - Dict.fromList constructors + List.map (\example -> ( example.name, example )) examples + |> Dict.fromList {-| -} subscriptions : ModuleStates -> Sub Msg subscriptions moduleStates = - allExamples moduleStates - |> List.map (\example -> example.subscriptions example.state) + Dict.values moduleStates + |> List.map (\example -> Sub.map (Msg example.name) (example.subscriptions example.state)) |> Sub.batch {-| -} -view : Bool -> (Example State Msg -> Bool) -> ModuleStates -> List (Html Msg) +view : Bool -> (Example State MsgKind -> Bool) -> ModuleStates -> List (Html Msg) view showFocusLink filter moduleStates = - allExamples moduleStates + Dict.values moduleStates |> List.filter filter - |> List.map (Example.view showFocusLink) - - -allExamples : ModuleStates -> List (Example State Msg) -allExamples moduleStates = - List.filterMap (\accessor -> Dict.get accessor moduleStates) - (List.map Tuple.first constructors) + |> List.map + (\example -> + Example.view showFocusLink example + |> Html.map (Msg example.name) + ) From 97f237f589c540158541dcf3391a4ee831a23326 Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Tue, 31 Mar 2020 16:00:29 -0700 Subject: [PATCH 15/17] Adds remaining modules to the examples --- styleguide-app/Examples.elm | 704 ++++++++++++++++++++- styleguide-app/Examples/Alert.elm | 16 +- styleguide-app/Examples/AssignmentIcon.elm | 16 +- styleguide-app/Examples/Callout.elm | 16 +- styleguide-app/Examples/Colors.elm | 16 +- styleguide-app/Examples/Fonts.elm | 16 +- styleguide-app/Examples/Heading.elm | 16 +- styleguide-app/Examples/Icon.elm | 16 +- styleguide-app/Examples/Logo.elm | 16 +- styleguide-app/Examples/MasteryIcon.elm | 16 +- styleguide-app/Examples/Page.elm | 16 +- styleguide-app/Examples/Pennant.elm | 16 +- styleguide-app/Examples/Text.elm | 16 +- styleguide-app/Examples/Text/Writing.elm | 15 +- styleguide-app/Examples/UiIcon.elm | 16 +- 15 files changed, 878 insertions(+), 49 deletions(-) diff --git a/styleguide-app/Examples.elm b/styleguide-app/Examples.elm index e93f4e7e..e134c3e5 100644 --- a/styleguide-app/Examples.elm +++ b/styleguide-app/Examples.elm @@ -63,26 +63,47 @@ examples = } Accordion.example , Example.wrap - { wrapMsg = ButtonMsg + { wrapMsg = AlertMsg , unwrapMsg = \msg -> case msg of - ButtonMsg childMsg -> + AlertMsg childMsg -> Just childMsg _ -> Nothing - , wrapState = ButtonState + , wrapState = AlertState , unwrapState = \msg -> case msg of - ButtonState childState -> + AlertState childState -> Just childState _ -> Nothing } - Button.example + Alert.example + , Example.wrap + { wrapMsg = AssignmentIconMsg + , unwrapMsg = + \msg -> + case msg of + AssignmentIconMsg childMsg -> + Just childMsg + + _ -> + Nothing + , wrapState = AssignmentIconState + , unwrapState = + \msg -> + case msg of + AssignmentIconState childState -> + Just childState + + _ -> + Nothing + } + AssignmentIcon.example , Example.wrap { wrapMsg = BannerAlertMsg , unwrapMsg = @@ -104,6 +125,279 @@ examples = Nothing } BannerAlert.example + , Example.wrap + { wrapMsg = ButtonMsg + , unwrapMsg = + \msg -> + case msg of + ButtonMsg childMsg -> + Just childMsg + + _ -> + Nothing + , wrapState = ButtonState + , unwrapState = + \msg -> + case msg of + ButtonState childState -> + Just childState + + _ -> + Nothing + } + Button.example + , Example.wrap + { wrapMsg = CalloutMsg + , unwrapMsg = + \msg -> + case msg of + CalloutMsg childMsg -> + Just childMsg + + _ -> + Nothing + , wrapState = CalloutState + , unwrapState = + \msg -> + case msg of + CalloutState childState -> + Just childState + + _ -> + Nothing + } + Callout.example + , Example.wrap + { wrapMsg = CheckboxMsg + , unwrapMsg = + \msg -> + case msg of + CheckboxMsg childMsg -> + Just childMsg + + _ -> + Nothing + , wrapState = CheckboxState + , unwrapState = + \msg -> + case msg of + CheckboxState childState -> + Just childState + + _ -> + Nothing + } + Checkbox.example + , Example.wrap + { wrapMsg = ClickableSvgMsg + , unwrapMsg = + \msg -> + case msg of + ClickableSvgMsg childMsg -> + Just childMsg + + _ -> + Nothing + , wrapState = ClickableSvgState + , unwrapState = + \msg -> + case msg of + ClickableSvgState childState -> + Just childState + + _ -> + Nothing + } + ClickableSvg.example + , Example.wrap + { wrapMsg = ClickableTextMsg + , unwrapMsg = + \msg -> + case msg of + ClickableTextMsg childMsg -> + Just childMsg + + _ -> + Nothing + , wrapState = ClickableTextState + , unwrapState = + \msg -> + case msg of + ClickableTextState childState -> + Just childState + + _ -> + Nothing + } + ClickableText.example + , Example.wrap + { wrapMsg = ColorsMsg + , unwrapMsg = + \msg -> + case msg of + ColorsMsg childMsg -> + Just childMsg + + _ -> + Nothing + , wrapState = ColorsState + , unwrapState = + \msg -> + case msg of + ColorsState childState -> + Just childState + + _ -> + Nothing + } + Colors.example + , Example.wrap + { wrapMsg = DisclosureIndicatorMsg + , unwrapMsg = + \msg -> + case msg of + DisclosureIndicatorMsg childMsg -> + Just childMsg + + _ -> + Nothing + , wrapState = DisclosureIndicatorState + , unwrapState = + \msg -> + case msg of + DisclosureIndicatorState childState -> + Just childState + + _ -> + Nothing + } + DisclosureIndicator.example + , Example.wrap + { wrapMsg = DropdownMsg + , unwrapMsg = + \msg -> + case msg of + DropdownMsg childMsg -> + Just childMsg + + _ -> + Nothing + , wrapState = DropdownState + , unwrapState = + \msg -> + case msg of + DropdownState childState -> + Just childState + + _ -> + Nothing + } + Dropdown.example + , Example.wrap + { wrapMsg = FontsMsg + , unwrapMsg = + \msg -> + case msg of + FontsMsg childMsg -> + Just childMsg + + _ -> + Nothing + , wrapState = FontsState + , unwrapState = + \msg -> + case msg of + FontsState childState -> + Just childState + + _ -> + Nothing + } + Fonts.example + , Example.wrap + { wrapMsg = HeadingMsg + , unwrapMsg = + \msg -> + case msg of + HeadingMsg childMsg -> + Just childMsg + + _ -> + Nothing + , wrapState = HeadingState + , unwrapState = + \msg -> + case msg of + HeadingState childState -> + Just childState + + _ -> + Nothing + } + Heading.example + , Example.wrap + { wrapMsg = IconMsg + , unwrapMsg = + \msg -> + case msg of + IconMsg childMsg -> + Just childMsg + + _ -> + Nothing + , wrapState = IconState + , unwrapState = + \msg -> + case msg of + IconState childState -> + Just childState + + _ -> + Nothing + } + Icon.example + , Example.wrap + { wrapMsg = LogoMsg + , unwrapMsg = + \msg -> + case msg of + LogoMsg childMsg -> + Just childMsg + + _ -> + Nothing + , wrapState = LogoState + , unwrapState = + \msg -> + case msg of + LogoState childState -> + Just childState + + _ -> + Nothing + } + Logo.example + , Example.wrap + { wrapMsg = MasteryIconMsg + , unwrapMsg = + \msg -> + case msg of + MasteryIconMsg childMsg -> + Just childMsg + + _ -> + Nothing + , wrapState = MasteryIconState + , unwrapState = + \msg -> + case msg of + MasteryIconState childState -> + Just childState + + _ -> + Nothing + } + MasteryIcon.example , Example.wrap { wrapMsg = ModalMsg , unwrapMsg = @@ -125,21 +419,417 @@ examples = Nothing } Modal.example + , Example.wrap + { wrapMsg = PageMsg + , unwrapMsg = + \msg -> + case msg of + PageMsg childMsg -> + Just childMsg + + _ -> + Nothing + , wrapState = PageState + , unwrapState = + \msg -> + case msg of + PageState childState -> + Just childState + + _ -> + Nothing + } + Page.example + , Example.wrap + { wrapMsg = PennantMsg + , unwrapMsg = + \msg -> + case msg of + PennantMsg childMsg -> + Just childMsg + + _ -> + Nothing + , wrapState = PennantState + , unwrapState = + \msg -> + case msg of + PennantState childState -> + Just childState + + _ -> + Nothing + } + Pennant.example + , Example.wrap + { wrapMsg = SegmentedControlMsg + , unwrapMsg = + \msg -> + case msg of + SegmentedControlMsg childMsg -> + Just childMsg + + _ -> + Nothing + , wrapState = SegmentedControlState + , unwrapState = + \msg -> + case msg of + SegmentedControlState childState -> + Just childState + + _ -> + Nothing + } + SegmentedControl.example + , Example.wrap + { wrapMsg = SelectMsg + , unwrapMsg = + \msg -> + case msg of + SelectMsg childMsg -> + Just childMsg + + _ -> + Nothing + , wrapState = SelectState + , unwrapState = + \msg -> + case msg of + SelectState childState -> + Just childState + + _ -> + Nothing + } + Select.example + , Example.wrap + { wrapMsg = SlideMsg + , unwrapMsg = + \msg -> + case msg of + SlideMsg childMsg -> + Just childMsg + + _ -> + Nothing + , wrapState = SlideState + , unwrapState = + \msg -> + case msg of + SlideState childState -> + Just childState + + _ -> + Nothing + } + Slide.example + , Example.wrap + { wrapMsg = SlideModalMsg + , unwrapMsg = + \msg -> + case msg of + SlideModalMsg childMsg -> + Just childMsg + + _ -> + Nothing + , wrapState = SlideModalState + , unwrapState = + \msg -> + case msg of + SlideModalState childState -> + Just childState + + _ -> + Nothing + } + SlideModal.example + , Example.wrap + { wrapMsg = SortableTableMsg + , unwrapMsg = + \msg -> + case msg of + SortableTableMsg childMsg -> + Just childMsg + + _ -> + Nothing + , wrapState = SortableTableState + , unwrapState = + \msg -> + case msg of + SortableTableState childState -> + Just childState + + _ -> + Nothing + } + SortableTable.example + , Example.wrap + { wrapMsg = SvgMsg + , unwrapMsg = + \msg -> + case msg of + SvgMsg childMsg -> + Just childMsg + + _ -> + Nothing + , wrapState = SvgState + , unwrapState = + \msg -> + case msg of + SvgState childState -> + Just childState + + _ -> + Nothing + } + Svg.example + , Example.wrap + { wrapMsg = TableMsg + , unwrapMsg = + \msg -> + case msg of + TableMsg childMsg -> + Just childMsg + + _ -> + Nothing + , wrapState = TableState + , unwrapState = + \msg -> + case msg of + TableState childState -> + Just childState + + _ -> + Nothing + } + Table.example + , Example.wrap + { wrapMsg = TabsMsg + , unwrapMsg = + \msg -> + case msg of + TabsMsg childMsg -> + Just childMsg + + _ -> + Nothing + , wrapState = TabsState + , unwrapState = + \msg -> + case msg of + TabsState childState -> + Just childState + + _ -> + Nothing + } + Tabs.example + , Example.wrap + { wrapMsg = TextMsg + , unwrapMsg = + \msg -> + case msg of + TextMsg childMsg -> + Just childMsg + + _ -> + Nothing + , wrapState = TextState + , unwrapState = + \msg -> + case msg of + TextState childState -> + Just childState + + _ -> + Nothing + } + Text.example + , Example.wrap + { wrapMsg = WritingMsg + , unwrapMsg = + \msg -> + case msg of + WritingMsg childMsg -> + Just childMsg + + _ -> + Nothing + , wrapState = WritingState + , unwrapState = + \msg -> + case msg of + WritingState childState -> + Just childState + + _ -> + Nothing + } + Writing.example + , Example.wrap + { wrapMsg = TextAreaMsg + , unwrapMsg = + \msg -> + case msg of + TextAreaMsg childMsg -> + Just childMsg + + _ -> + Nothing + , wrapState = TextAreaState + , unwrapState = + \msg -> + case msg of + TextAreaState childState -> + Just childState + + _ -> + Nothing + } + TextArea.example + , Example.wrap + { wrapMsg = TextInputMsg + , unwrapMsg = + \msg -> + case msg of + TextInputMsg childMsg -> + Just childMsg + + _ -> + Nothing + , wrapState = TextInputState + , unwrapState = + \msg -> + case msg of + TextInputState childState -> + Just childState + + _ -> + Nothing + } + TextInput.example + , Example.wrap + { wrapMsg = TooltipMsg + , unwrapMsg = + \msg -> + case msg of + TooltipMsg childMsg -> + Just childMsg + + _ -> + Nothing + , wrapState = TooltipState + , unwrapState = + \msg -> + case msg of + TooltipState childState -> + Just childState + + _ -> + Nothing + } + Tooltip.example + , Example.wrap + { wrapMsg = UiIconMsg + , unwrapMsg = + \msg -> + case msg of + UiIconMsg childMsg -> + Just childMsg + + _ -> + Nothing + , wrapState = UiIconState + , unwrapState = + \msg -> + case msg of + UiIconState childState -> + Just childState + + _ -> + Nothing + } + UiIcon.example ] type State = AccordionState Accordion.State - | ButtonState Button.State + | AlertState Alert.State + | AssignmentIconState AssignmentIcon.State | BannerAlertState BannerAlert.State + | ButtonState Button.State + | CalloutState Callout.State + | CheckboxState Checkbox.State + | ClickableSvgState ClickableSvg.State + | ClickableTextState ClickableText.State + | ColorsState Colors.State + | DisclosureIndicatorState DisclosureIndicator.State + | DropdownState Dropdown.State + | FontsState Fonts.State + | HeadingState Heading.State + | IconState Icon.State + | LogoState Logo.State + | MasteryIconState MasteryIcon.State | ModalState Modal.State + | PageState Page.State + | PennantState Pennant.State + | SegmentedControlState SegmentedControl.State + | SelectState Select.State + | SlideState Slide.State + | SlideModalState SlideModal.State + | SortableTableState SortableTable.State + | SvgState Svg.State + | TableState Table.State + | TabsState Tabs.State + | TextState Text.State + | TextAreaState TextArea.State + | TextInputState TextInput.State + | TooltipState Tooltip.State + | UiIconState UiIcon.State + | WritingState Writing.State type MsgKind = AccordionMsg Accordion.Msg - | ButtonMsg Button.Msg + | AlertMsg Alert.Msg + | AssignmentIconMsg AssignmentIcon.Msg | BannerAlertMsg BannerAlert.Msg + | ButtonMsg Button.Msg + | CalloutMsg Callout.Msg + | CheckboxMsg Checkbox.Msg + | ClickableSvgMsg ClickableSvg.Msg + | ClickableTextMsg ClickableText.Msg + | ColorsMsg Colors.Msg + | DisclosureIndicatorMsg DisclosureIndicator.Msg + | DropdownMsg Dropdown.Msg + | FontsMsg Fonts.Msg + | HeadingMsg Heading.Msg + | IconMsg Icon.Msg + | LogoMsg Logo.Msg + | MasteryIconMsg MasteryIcon.Msg | ModalMsg Modal.Msg + | PageMsg Page.Msg + | PennantMsg Pennant.Msg + | SegmentedControlMsg SegmentedControl.Msg + | SelectMsg Select.Msg + | SlideMsg Slide.Msg + | SlideModalMsg SlideModal.Msg + | SortableTableMsg SortableTable.Msg + | SvgMsg Svg.Msg + | TableMsg Table.Msg + | TabsMsg Tabs.Msg + | TextMsg Text.Msg + | TextAreaMsg TextArea.Msg + | TextInputMsg TextInput.Msg + | TooltipMsg Tooltip.Msg + | UiIconMsg UiIcon.Msg + | WritingMsg Writing.Msg type Msg diff --git a/styleguide-app/Examples/Alert.elm b/styleguide-app/Examples/Alert.elm index 1733f999..1e26ab32 100644 --- a/styleguide-app/Examples/Alert.elm +++ b/styleguide-app/Examples/Alert.elm @@ -1,8 +1,8 @@ -module Examples.Alert exposing (example) +module Examples.Alert exposing (example, State, Msg) {-| -@docs example +@docs example, State, Msg -} @@ -13,7 +13,17 @@ import Nri.Ui.Alert.V4 as Alert import Nri.Ui.Heading.V2 as Heading -example : Example () () +type alias State = + () + + +{-| -} +type alias Msg = + () + + +{-| -} +example : Example State Msg example = { name = "Nri.Ui.Alert.V4" , categories = [ Messaging ] diff --git a/styleguide-app/Examples/AssignmentIcon.elm b/styleguide-app/Examples/AssignmentIcon.elm index 3d129f31..51ff18dc 100644 --- a/styleguide-app/Examples/AssignmentIcon.elm +++ b/styleguide-app/Examples/AssignmentIcon.elm @@ -1,8 +1,8 @@ -module Examples.AssignmentIcon exposing (example) +module Examples.AssignmentIcon exposing (example, State, Msg) {-| -@docs example +@docs example, State, Msg -} @@ -14,7 +14,17 @@ import Nri.Ui.Icon.V5 as Icon {-| -} -example : Example () () +type alias State = + () + + +{-| -} +type alias Msg = + () + + +{-| -} +example : Example State Msg example = { name = "Nri.Ui.AssignmentIcon.V1" , categories = [ Icons ] diff --git a/styleguide-app/Examples/Callout.elm b/styleguide-app/Examples/Callout.elm index 47fbb1d4..5a6e1274 100644 --- a/styleguide-app/Examples/Callout.elm +++ b/styleguide-app/Examples/Callout.elm @@ -1,8 +1,8 @@ -module Examples.Callout exposing (example) +module Examples.Callout exposing (example, State, Msg) {-| -@docs example +@docs example, State, Msg -} @@ -14,7 +14,17 @@ import Html.Styled.Attributes exposing (href, title) import Nri.Ui.Callout.V1 as Callout exposing (callout) -example : Example () () +type alias State = + () + + +{-| -} +type alias Msg = + () + + +{-| -} +example : Example State Msg example = { name = "Nri.Ui.Callout.V1" , categories = [ Messaging ] diff --git a/styleguide-app/Examples/Colors.elm b/styleguide-app/Examples/Colors.elm index 7f02c352..b33a12a0 100644 --- a/styleguide-app/Examples/Colors.elm +++ b/styleguide-app/Examples/Colors.elm @@ -1,8 +1,8 @@ -module Examples.Colors exposing (example) +module Examples.Colors exposing (example, State, Msg) {-| -@docs example +@docs example, State, Msg -} @@ -21,7 +21,17 @@ type alias ColorExample = ( String, Css.Color, String ) -example : Example () () +type alias State = + () + + +{-| -} +type alias Msg = + () + + +{-| -} +example : Example State Msg example = { name = "Nri.Ui.Colors.V1" , categories = List.singleton Colors diff --git a/styleguide-app/Examples/Fonts.elm b/styleguide-app/Examples/Fonts.elm index 3d212a25..dfcec180 100644 --- a/styleguide-app/Examples/Fonts.elm +++ b/styleguide-app/Examples/Fonts.elm @@ -1,8 +1,8 @@ -module Examples.Fonts exposing (example) +module Examples.Fonts exposing (example, State, Msg) {-| -@docs example +@docs example, State, Msg -} @@ -15,7 +15,17 @@ import Nri.Ui.Heading.V2 as Heading {-| -} -example : Example () () +type alias State = + () + + +{-| -} +type alias Msg = + () + + +{-| -} +example : Example State Msg example = { name = "Nri.Ui.Fonts.V1" , categories = List.singleton Text diff --git a/styleguide-app/Examples/Heading.elm b/styleguide-app/Examples/Heading.elm index 6355f4b9..3712ee1e 100644 --- a/styleguide-app/Examples/Heading.elm +++ b/styleguide-app/Examples/Heading.elm @@ -1,8 +1,8 @@ -module Examples.Heading exposing (example) +module Examples.Heading exposing (example, State, Msg) {-| -@docs example +@docs example, State, Msg -} @@ -15,7 +15,17 @@ import Nri.Ui.Heading.V2 as Heading {-| -} -example : Example () () +type alias State = + () + + +{-| -} +type alias Msg = + () + + +{-| -} +example : Example State Msg example = { name = "Nri.Ui.Heading.V2" , categories = List.singleton Text diff --git a/styleguide-app/Examples/Icon.elm b/styleguide-app/Examples/Icon.elm index 31139f2c..df73c612 100644 --- a/styleguide-app/Examples/Icon.elm +++ b/styleguide-app/Examples/Icon.elm @@ -1,8 +1,8 @@ -module Examples.Icon exposing (example) +module Examples.Icon exposing (example, State, Msg) {-| -@docs example, styles +@docs example, State, Msg -} @@ -20,7 +20,17 @@ import Nri.Ui.Text.V4 as Text {-| -} -example : Example () () +type alias State = + () + + +{-| -} +type alias Msg = + () + + +{-| -} +example : Example State Msg example = { name = "Nri.Ui.Icon.V5" , categories = List.singleton Icons diff --git a/styleguide-app/Examples/Logo.elm b/styleguide-app/Examples/Logo.elm index f62d0ca3..9fe22e91 100644 --- a/styleguide-app/Examples/Logo.elm +++ b/styleguide-app/Examples/Logo.elm @@ -1,8 +1,8 @@ -module Examples.Logo exposing (example) +module Examples.Logo exposing (example, State, Msg) {-| -@docs example, styles +@docs example, State, Msg -} @@ -15,7 +15,17 @@ import Nri.Ui.Logo.V1 as Logo {-| -} -example : Example () () +type alias State = + () + + +{-| -} +type alias Msg = + () + + +{-| -} +example : Example State Msg example = { name = "Nri.Ui.Logo.V1" , categories = List.singleton Icons diff --git a/styleguide-app/Examples/MasteryIcon.elm b/styleguide-app/Examples/MasteryIcon.elm index 762e0165..68e1cddb 100644 --- a/styleguide-app/Examples/MasteryIcon.elm +++ b/styleguide-app/Examples/MasteryIcon.elm @@ -1,8 +1,8 @@ -module Examples.MasteryIcon exposing (example) +module Examples.MasteryIcon exposing (example, State, Msg) {-| -@docs example, styles +@docs example, State, Msg -} @@ -14,7 +14,17 @@ import Nri.Ui.MasteryIcon.V1 as MasteryIcon {-| -} -example : Example () () +type alias State = + () + + +{-| -} +type alias Msg = + () + + +{-| -} +example : Example State Msg example = { name = "Nri.Ui.MasteryIcon.V1" , categories = List.singleton Icons diff --git a/styleguide-app/Examples/Page.elm b/styleguide-app/Examples/Page.elm index 7cd9c234..2be9957c 100644 --- a/styleguide-app/Examples/Page.elm +++ b/styleguide-app/Examples/Page.elm @@ -1,8 +1,8 @@ -module Examples.Page exposing (example) +module Examples.Page exposing (example, State, Msg) {-| -@docs example +@docs example, State, Msg -} @@ -16,7 +16,17 @@ import Nri.Ui.Page.V3 as Page {-| -} -example : Example () () +type alias State = + () + + +{-| -} +type alias Msg = + () + + +{-| -} +example : Example State Msg example = { name = "Nri.Ui.Page.V3" , categories = List.singleton Pages diff --git a/styleguide-app/Examples/Pennant.elm b/styleguide-app/Examples/Pennant.elm index 77ee0caa..5244ef9c 100644 --- a/styleguide-app/Examples/Pennant.elm +++ b/styleguide-app/Examples/Pennant.elm @@ -1,8 +1,8 @@ -module Examples.Pennant exposing (example) +module Examples.Pennant exposing (example, State, Msg) {-| -@docs example +@docs example, State, Msg -} @@ -17,7 +17,17 @@ import Nri.Ui.Svg.V1 as Svg {-| -} -example : Example () () +type alias State = + () + + +{-| -} +type alias Msg = + () + + +{-| -} +example : Example State Msg example = { name = "Nri.Ui.Pennant.V2" , categories = List.singleton Icons diff --git a/styleguide-app/Examples/Text.elm b/styleguide-app/Examples/Text.elm index b87277f8..fff1ba99 100644 --- a/styleguide-app/Examples/Text.elm +++ b/styleguide-app/Examples/Text.elm @@ -1,8 +1,8 @@ -module Examples.Text exposing (example) +module Examples.Text exposing (example, State, Msg) {-| -@docs example +@docs example, State, Msg -} @@ -15,7 +15,17 @@ import Nri.Ui.Text.V4 as Text {-| -} -example : Example () () +type alias State = + () + + +{-| -} +type alias Msg = + () + + +{-| -} +example : Example State Msg example = { name = "Nri.Ui.Text.V4" , categories = List.singleton Text diff --git a/styleguide-app/Examples/Text/Writing.elm b/styleguide-app/Examples/Text/Writing.elm index c9ac6af0..3c125fb1 100644 --- a/styleguide-app/Examples/Text/Writing.elm +++ b/styleguide-app/Examples/Text/Writing.elm @@ -1,8 +1,8 @@ -module Examples.Text.Writing exposing (example) +module Examples.Text.Writing exposing (example, State, Msg) {-| -@docs example +@docs example, State, Msg -} @@ -13,7 +13,16 @@ import Nri.Ui.Text.Writing.V1 as TextWriting {-| -} -example : Example () () +type alias State = + () + + +{-| -} +type alias Msg = + () + + +example : Example State Msg example = { name = "Nri.Ui.Text.Writing.V1" , categories = List.singleton Text diff --git a/styleguide-app/Examples/UiIcon.elm b/styleguide-app/Examples/UiIcon.elm index 0c46cd8f..ec1468a7 100644 --- a/styleguide-app/Examples/UiIcon.elm +++ b/styleguide-app/Examples/UiIcon.elm @@ -1,8 +1,8 @@ -module Examples.UiIcon exposing (example) +module Examples.UiIcon exposing (example, State, Msg) {-| -@docs example, styles +@docs example, State, Msg -} @@ -14,7 +14,17 @@ import Nri.Ui.UiIcon.V1 as UiIcon {-| -} -example : Example () () +type alias State = + () + + +{-| -} +type alias Msg = + () + + +{-| -} +example : Example State Msg example = { name = "Nri.Ui.UiIcon.V1" , categories = List.singleton Icons From 32264949c6fbc27d0cd3e3c0032f13c474d379ae Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Tue, 31 Mar 2020 16:09:09 -0700 Subject: [PATCH 16/17] Pull the example state management up a level --- styleguide-app/Examples.elm | 59 ++-------------------------- styleguide-app/Main.elm | 78 +++++++++++++++++++++++++------------ 2 files changed, 57 insertions(+), 80 deletions(-) diff --git a/styleguide-app/Examples.elm b/styleguide-app/Examples.elm index e134c3e5..c3286989 100644 --- a/styleguide-app/Examples.elm +++ b/styleguide-app/Examples.elm @@ -1,6 +1,5 @@ -module Examples exposing (ModuleStates, Msg, init, subscriptions, update, view) +module Examples exposing (Msg, State, all) -import Dict exposing (Dict) import Example exposing (Example) import Examples.Accordion as Accordion import Examples.Alert as Alert @@ -36,11 +35,10 @@ import Examples.TextArea as TextArea import Examples.TextInput as TextInput import Examples.Tooltip as Tooltip import Examples.UiIcon as UiIcon -import Html.Styled as Html exposing (Html) -examples : List (Example State MsgKind) -examples = +all : List (Example State Msg) +all = [ Example.wrap { wrapMsg = AccordionMsg , unwrapMsg = @@ -795,7 +793,7 @@ type State | WritingState Writing.State -type MsgKind +type Msg = AccordionMsg Accordion.Msg | AlertMsg Alert.Msg | AssignmentIconMsg AssignmentIcon.Msg @@ -830,52 +828,3 @@ type MsgKind | TooltipMsg Tooltip.Msg | UiIconMsg UiIcon.Msg | WritingMsg Writing.Msg - - -type Msg - = Msg String MsgKind - - -update : Msg -> ModuleStates -> ( ModuleStates, Cmd Msg ) -update (Msg key exampleMsg) moduleStates = - case Dict.get key moduleStates of - Just example -> - example.update exampleMsg example.state - |> Tuple.mapFirst - (\newState -> - Dict.insert key { example | state = newState } moduleStates - ) - |> Tuple.mapSecond (Cmd.map (Msg key)) - - Nothing -> - ( moduleStates, Cmd.none ) - - -type alias ModuleStates = - Dict String (Example State MsgKind) - - -init : ModuleStates -init = - List.map (\example -> ( example.name, example )) examples - |> Dict.fromList - - -{-| -} -subscriptions : ModuleStates -> Sub Msg -subscriptions moduleStates = - Dict.values moduleStates - |> List.map (\example -> Sub.map (Msg example.name) (example.subscriptions example.state)) - |> Sub.batch - - -{-| -} -view : Bool -> (Example State MsgKind -> Bool) -> ModuleStates -> List (Html Msg) -view showFocusLink filter moduleStates = - Dict.values moduleStates - |> List.filter filter - |> List.map - (\example -> - Example.view showFocusLink example - |> Html.map (Msg example.name) - ) diff --git a/styleguide-app/Main.elm b/styleguide-app/Main.elm index 4edf8cd5..4fce1f1f 100644 --- a/styleguide-app/Main.elm +++ b/styleguide-app/Main.elm @@ -5,7 +5,9 @@ import Browser.Dom import Browser.Navigation exposing (Key) import Category import Css exposing (..) -import Examples exposing (ModuleStates) +import Dict exposing (Dict) +import Example exposing (Example) +import Examples import Html as RootHtml import Html.Attributes import Html.Styled as Html exposing (Html, img) @@ -36,7 +38,7 @@ main = type alias Model = { -- Global UI route : Route - , moduleStates : ModuleStates + , moduleStates : Dict String (Example Examples.State Examples.Msg) , navigationKey : Key } @@ -44,7 +46,9 @@ type alias Model = init : () -> Url -> Key -> ( Model, Cmd Msg ) init () url key = ( { route = Routes.fromLocation url - , moduleStates = Examples.init + , moduleStates = + Dict.fromList + (List.map (\example -> ( example.name, example )) Examples.all) , navigationKey = key } , Cmd.none @@ -52,7 +56,7 @@ init () url key = type Msg - = UpdateModuleStates Examples.Msg + = UpdateModuleStates String Examples.Msg | OnUrlRequest Browser.UrlRequest | OnUrlChange Url | SkipToMainContent @@ -62,14 +66,23 @@ type Msg update : Msg -> Model -> ( Model, Cmd Msg ) update action model = case action of - UpdateModuleStates msg -> - let - ( moduleStates, cmd ) = - Examples.update msg model.moduleStates - in - ( { model | moduleStates = moduleStates } - , Cmd.map UpdateModuleStates cmd - ) + UpdateModuleStates key exampleMsg -> + case Dict.get key model.moduleStates of + Just example -> + example.update exampleMsg example.state + |> Tuple.mapFirst + (\newState -> + { model + | moduleStates = + Dict.insert key + { example | state = newState } + model.moduleStates + } + ) + |> Tuple.mapSecond (Cmd.map (UpdateModuleStates key)) + + Nothing -> + ( model, Cmd.none ) OnUrlRequest request -> case request of @@ -93,7 +106,9 @@ update action model = subscriptions : Model -> Sub Msg subscriptions model = - Sub.map UpdateModuleStates (Examples.subscriptions model.moduleStates) + Dict.values model.moduleStates + |> List.map (\example -> Sub.map (UpdateModuleStates example.name) (example.subscriptions example.state)) + |> Sub.batch view : Model -> Document Msg @@ -121,9 +136,14 @@ view_ model = [ sectionStyles ] [] [ Heading.h2 [] [ Html.text ("Viewing " ++ doodad ++ " doodad only") ] - , Examples.view False (\m -> m.name == doodad) model.moduleStates + , Dict.values model.moduleStates + |> List.filter (\m -> m.name == doodad) + |> List.map + (\example -> + Example.view False example + |> Html.map (UpdateModuleStates example.name) + ) |> Html.div [] - |> Html.map UpdateModuleStates ] ] @@ -132,15 +152,19 @@ view_ model = [ sectionStyles ] [] [ Heading.h2 [] [ Html.text (Category.forDisplay category) ] - , Examples.view True - (\doodad -> - Set.memberOf - (Set.fromList Category.sorter doodad.categories) - category - ) - model.moduleStates + , Dict.values model.moduleStates + |> List.filter + (\doodad -> + Set.memberOf + (Set.fromList Category.sorter doodad.categories) + category + ) + |> List.map + (\example -> + Example.view True example + |> Html.map (UpdateModuleStates example.name) + ) |> Html.div [ id (Category.forId category) ] - |> Html.map UpdateModuleStates ] ] @@ -149,9 +173,13 @@ view_ model = [ sectionStyles ] [] [ Heading.h2 [] [ Html.text "All" ] - , Examples.view True (\_ -> True) model.moduleStates + , Dict.values model.moduleStates + |> List.map + (\example -> + Example.view True example + |> Html.map (UpdateModuleStates example.name) + ) |> Html.div [] - |> Html.map UpdateModuleStates ] ] ) From 7ad8df39d49c587d36434a03de198cb895d03d48 Mon Sep 17 00:00:00 2001 From: Tessa Kelly Date: Tue, 31 Mar 2020 16:30:18 -0700 Subject: [PATCH 17/17] Separate out the wrapState and wrapMsg helpers to better emphasize what example we're looking at --- styleguide-app/Example.elm | 71 +++-- styleguide-app/Examples.elm | 544 ++++++++++++++++-------------------- 2 files changed, 279 insertions(+), 336 deletions(-) diff --git a/styleguide-app/Example.elm b/styleguide-app/Example.elm index 1ee16745..445c1a32 100644 --- a/styleguide-app/Example.elm +++ b/styleguide-app/Example.elm @@ -1,4 +1,4 @@ -module Example exposing (Example, view, wrap) +module Example exposing (Example, view, wrapMsg, wrapState) import Category exposing (Category) import Css exposing (..) @@ -18,43 +18,54 @@ type alias Example state msg = } -wrap : - { wrapMsg : msg -> msg2 - , unwrapMsg : msg2 -> Maybe msg - , wrapState : state -> state2 - , unwrapState : state2 -> Maybe state - } +wrapMsg : + (msg -> msg2) + -> (msg2 -> Maybe msg) -> Example state msg - -> Example state2 msg2 -wrap { wrapMsg, unwrapMsg, wrapState, unwrapState } example = + -> Example state msg2 +wrapMsg wrapMsg_ unwrapMsg example = { name = example.name - , state = wrapState example.state + , state = example.state , update = - \msg2 state2 -> - case ( unwrapMsg msg2, unwrapState state2 ) of - ( Just msg, Just state ) -> + \msg2 state -> + case unwrapMsg msg2 of + Just msg -> example.update msg state - |> Tuple.mapFirst wrapState - |> Tuple.mapSecond (Cmd.map wrapMsg) + |> Tuple.mapSecond (Cmd.map wrapMsg_) - _ -> + Nothing -> + ( state, Cmd.none ) + , subscriptions = \state -> Sub.map wrapMsg_ (example.subscriptions state) + , view = \state -> List.map (Html.map wrapMsg_) (example.view state) + , categories = example.categories + } + + +wrapState : + (state -> state2) + -> (state2 -> Maybe state) + -> Example state msg + -> Example state2 msg +wrapState wrapState_ unwrapState example = + { name = example.name + , state = wrapState_ example.state + , update = + \msg state2 -> + case unwrapState state2 of + Just state -> + example.update msg state + |> Tuple.mapFirst wrapState_ + + Nothing -> ( state2, Cmd.none ) , subscriptions = - \state2 -> - case unwrapState state2 of - Just state -> - Sub.map wrapMsg (example.subscriptions state) - - Nothing -> - Sub.none + unwrapState + >> Maybe.map example.subscriptions + >> Maybe.withDefault Sub.none , view = - \state2 -> - case unwrapState state2 of - Just state -> - List.map (Html.map wrapMsg) (example.view state) - - Nothing -> - [] + unwrapState + >> Maybe.map example.view + >> Maybe.withDefault [] , categories = example.categories } diff --git a/styleguide-app/Examples.elm b/styleguide-app/Examples.elm index c3286989..c88cbb89 100644 --- a/styleguide-app/Examples.elm +++ b/styleguide-app/Examples.elm @@ -39,720 +39,652 @@ import Examples.UiIcon as UiIcon all : List (Example State Msg) all = - [ Example.wrap - { wrapMsg = AccordionMsg - , unwrapMsg = - \msg -> + [ Accordion.example + |> Example.wrapMsg AccordionMsg + (\msg -> case msg of AccordionMsg childMsg -> Just childMsg _ -> Nothing - , wrapState = AccordionState - , unwrapState = - \msg -> + ) + |> Example.wrapState AccordionState + (\msg -> case msg of AccordionState childState -> Just childState _ -> Nothing - } - Accordion.example - , Example.wrap - { wrapMsg = AlertMsg - , unwrapMsg = - \msg -> + ) + , Alert.example + |> Example.wrapMsg AlertMsg + (\msg -> case msg of AlertMsg childMsg -> Just childMsg _ -> Nothing - , wrapState = AlertState - , unwrapState = - \msg -> + ) + |> Example.wrapState AlertState + (\msg -> case msg of AlertState childState -> Just childState _ -> Nothing - } - Alert.example - , Example.wrap - { wrapMsg = AssignmentIconMsg - , unwrapMsg = - \msg -> + ) + , AssignmentIcon.example + |> Example.wrapMsg AssignmentIconMsg + (\msg -> case msg of AssignmentIconMsg childMsg -> Just childMsg _ -> Nothing - , wrapState = AssignmentIconState - , unwrapState = - \msg -> + ) + |> Example.wrapState AssignmentIconState + (\msg -> case msg of AssignmentIconState childState -> Just childState _ -> Nothing - } - AssignmentIcon.example - , Example.wrap - { wrapMsg = BannerAlertMsg - , unwrapMsg = - \msg -> + ) + , BannerAlert.example + |> Example.wrapMsg BannerAlertMsg + (\msg -> case msg of BannerAlertMsg childMsg -> Just childMsg _ -> Nothing - , wrapState = BannerAlertState - , unwrapState = - \msg -> + ) + |> Example.wrapState BannerAlertState + (\msg -> case msg of BannerAlertState childState -> Just childState _ -> Nothing - } - BannerAlert.example - , Example.wrap - { wrapMsg = ButtonMsg - , unwrapMsg = - \msg -> + ) + , Button.example + |> Example.wrapMsg ButtonMsg + (\msg -> case msg of ButtonMsg childMsg -> Just childMsg _ -> Nothing - , wrapState = ButtonState - , unwrapState = - \msg -> + ) + |> Example.wrapState ButtonState + (\msg -> case msg of ButtonState childState -> Just childState _ -> Nothing - } - Button.example - , Example.wrap - { wrapMsg = CalloutMsg - , unwrapMsg = - \msg -> + ) + , Callout.example + |> Example.wrapMsg CalloutMsg + (\msg -> case msg of CalloutMsg childMsg -> Just childMsg _ -> Nothing - , wrapState = CalloutState - , unwrapState = - \msg -> + ) + |> Example.wrapState CalloutState + (\msg -> case msg of CalloutState childState -> Just childState _ -> Nothing - } - Callout.example - , Example.wrap - { wrapMsg = CheckboxMsg - , unwrapMsg = - \msg -> + ) + , Checkbox.example + |> Example.wrapMsg CheckboxMsg + (\msg -> case msg of CheckboxMsg childMsg -> Just childMsg _ -> Nothing - , wrapState = CheckboxState - , unwrapState = - \msg -> + ) + |> Example.wrapState CheckboxState + (\msg -> case msg of CheckboxState childState -> Just childState _ -> Nothing - } - Checkbox.example - , Example.wrap - { wrapMsg = ClickableSvgMsg - , unwrapMsg = - \msg -> + ) + , ClickableSvg.example + |> Example.wrapMsg ClickableSvgMsg + (\msg -> case msg of ClickableSvgMsg childMsg -> Just childMsg _ -> Nothing - , wrapState = ClickableSvgState - , unwrapState = - \msg -> + ) + |> Example.wrapState ClickableSvgState + (\msg -> case msg of ClickableSvgState childState -> Just childState _ -> Nothing - } - ClickableSvg.example - , Example.wrap - { wrapMsg = ClickableTextMsg - , unwrapMsg = - \msg -> + ) + , ClickableText.example + |> Example.wrapMsg ClickableTextMsg + (\msg -> case msg of ClickableTextMsg childMsg -> Just childMsg _ -> Nothing - , wrapState = ClickableTextState - , unwrapState = - \msg -> + ) + |> Example.wrapState ClickableTextState + (\msg -> case msg of ClickableTextState childState -> Just childState _ -> Nothing - } - ClickableText.example - , Example.wrap - { wrapMsg = ColorsMsg - , unwrapMsg = - \msg -> + ) + , Colors.example + |> Example.wrapMsg ColorsMsg + (\msg -> case msg of ColorsMsg childMsg -> Just childMsg _ -> Nothing - , wrapState = ColorsState - , unwrapState = - \msg -> + ) + |> Example.wrapState ColorsState + (\msg -> case msg of ColorsState childState -> Just childState _ -> Nothing - } - Colors.example - , Example.wrap - { wrapMsg = DisclosureIndicatorMsg - , unwrapMsg = - \msg -> + ) + , DisclosureIndicator.example + |> Example.wrapMsg DisclosureIndicatorMsg + (\msg -> case msg of DisclosureIndicatorMsg childMsg -> Just childMsg _ -> Nothing - , wrapState = DisclosureIndicatorState - , unwrapState = - \msg -> + ) + |> Example.wrapState DisclosureIndicatorState + (\msg -> case msg of DisclosureIndicatorState childState -> Just childState _ -> Nothing - } - DisclosureIndicator.example - , Example.wrap - { wrapMsg = DropdownMsg - , unwrapMsg = - \msg -> + ) + , Dropdown.example + |> Example.wrapMsg DropdownMsg + (\msg -> case msg of DropdownMsg childMsg -> Just childMsg _ -> Nothing - , wrapState = DropdownState - , unwrapState = - \msg -> + ) + |> Example.wrapState DropdownState + (\msg -> case msg of DropdownState childState -> Just childState _ -> Nothing - } - Dropdown.example - , Example.wrap - { wrapMsg = FontsMsg - , unwrapMsg = - \msg -> + ) + , Fonts.example + |> Example.wrapMsg FontsMsg + (\msg -> case msg of FontsMsg childMsg -> Just childMsg _ -> Nothing - , wrapState = FontsState - , unwrapState = - \msg -> + ) + |> Example.wrapState FontsState + (\msg -> case msg of FontsState childState -> Just childState _ -> Nothing - } - Fonts.example - , Example.wrap - { wrapMsg = HeadingMsg - , unwrapMsg = - \msg -> + ) + , Heading.example + |> Example.wrapMsg HeadingMsg + (\msg -> case msg of HeadingMsg childMsg -> Just childMsg _ -> Nothing - , wrapState = HeadingState - , unwrapState = - \msg -> + ) + |> Example.wrapState HeadingState + (\msg -> case msg of HeadingState childState -> Just childState _ -> Nothing - } - Heading.example - , Example.wrap - { wrapMsg = IconMsg - , unwrapMsg = - \msg -> + ) + , Icon.example + |> Example.wrapMsg IconMsg + (\msg -> case msg of IconMsg childMsg -> Just childMsg _ -> Nothing - , wrapState = IconState - , unwrapState = - \msg -> + ) + |> Example.wrapState IconState + (\msg -> case msg of IconState childState -> Just childState _ -> Nothing - } - Icon.example - , Example.wrap - { wrapMsg = LogoMsg - , unwrapMsg = - \msg -> + ) + , Logo.example + |> Example.wrapMsg LogoMsg + (\msg -> case msg of LogoMsg childMsg -> Just childMsg _ -> Nothing - , wrapState = LogoState - , unwrapState = - \msg -> + ) + |> Example.wrapState LogoState + (\msg -> case msg of LogoState childState -> Just childState _ -> Nothing - } - Logo.example - , Example.wrap - { wrapMsg = MasteryIconMsg - , unwrapMsg = - \msg -> + ) + , MasteryIcon.example + |> Example.wrapMsg MasteryIconMsg + (\msg -> case msg of MasteryIconMsg childMsg -> Just childMsg _ -> Nothing - , wrapState = MasteryIconState - , unwrapState = - \msg -> + ) + |> Example.wrapState MasteryIconState + (\msg -> case msg of MasteryIconState childState -> Just childState _ -> Nothing - } - MasteryIcon.example - , Example.wrap - { wrapMsg = ModalMsg - , unwrapMsg = - \msg -> + ) + , Modal.example + |> Example.wrapMsg ModalMsg + (\msg -> case msg of ModalMsg childMsg -> Just childMsg _ -> Nothing - , wrapState = ModalState - , unwrapState = - \msg -> + ) + |> Example.wrapState ModalState + (\msg -> case msg of ModalState childState -> Just childState _ -> Nothing - } - Modal.example - , Example.wrap - { wrapMsg = PageMsg - , unwrapMsg = - \msg -> + ) + , Page.example + |> Example.wrapMsg PageMsg + (\msg -> case msg of PageMsg childMsg -> Just childMsg _ -> Nothing - , wrapState = PageState - , unwrapState = - \msg -> + ) + |> Example.wrapState PageState + (\msg -> case msg of PageState childState -> Just childState _ -> Nothing - } - Page.example - , Example.wrap - { wrapMsg = PennantMsg - , unwrapMsg = - \msg -> + ) + , Pennant.example + |> Example.wrapMsg PennantMsg + (\msg -> case msg of PennantMsg childMsg -> Just childMsg _ -> Nothing - , wrapState = PennantState - , unwrapState = - \msg -> + ) + |> Example.wrapState PennantState + (\msg -> case msg of PennantState childState -> Just childState _ -> Nothing - } - Pennant.example - , Example.wrap - { wrapMsg = SegmentedControlMsg - , unwrapMsg = - \msg -> + ) + , SegmentedControl.example + |> Example.wrapMsg SegmentedControlMsg + (\msg -> case msg of SegmentedControlMsg childMsg -> Just childMsg _ -> Nothing - , wrapState = SegmentedControlState - , unwrapState = - \msg -> + ) + |> Example.wrapState SegmentedControlState + (\msg -> case msg of SegmentedControlState childState -> Just childState _ -> Nothing - } - SegmentedControl.example - , Example.wrap - { wrapMsg = SelectMsg - , unwrapMsg = - \msg -> + ) + , Select.example + |> Example.wrapMsg SelectMsg + (\msg -> case msg of SelectMsg childMsg -> Just childMsg _ -> Nothing - , wrapState = SelectState - , unwrapState = - \msg -> + ) + |> Example.wrapState SelectState + (\msg -> case msg of SelectState childState -> Just childState _ -> Nothing - } - Select.example - , Example.wrap - { wrapMsg = SlideMsg - , unwrapMsg = - \msg -> + ) + , Slide.example + |> Example.wrapMsg SlideMsg + (\msg -> case msg of SlideMsg childMsg -> Just childMsg _ -> Nothing - , wrapState = SlideState - , unwrapState = - \msg -> + ) + |> Example.wrapState SlideState + (\msg -> case msg of SlideState childState -> Just childState _ -> Nothing - } - Slide.example - , Example.wrap - { wrapMsg = SlideModalMsg - , unwrapMsg = - \msg -> + ) + , SlideModal.example + |> Example.wrapMsg SlideModalMsg + (\msg -> case msg of SlideModalMsg childMsg -> Just childMsg _ -> Nothing - , wrapState = SlideModalState - , unwrapState = - \msg -> + ) + |> Example.wrapState SlideModalState + (\msg -> case msg of SlideModalState childState -> Just childState _ -> Nothing - } - SlideModal.example - , Example.wrap - { wrapMsg = SortableTableMsg - , unwrapMsg = - \msg -> + ) + , SortableTable.example + |> Example.wrapMsg SortableTableMsg + (\msg -> case msg of SortableTableMsg childMsg -> Just childMsg _ -> Nothing - , wrapState = SortableTableState - , unwrapState = - \msg -> + ) + |> Example.wrapState SortableTableState + (\msg -> case msg of SortableTableState childState -> Just childState _ -> Nothing - } - SortableTable.example - , Example.wrap - { wrapMsg = SvgMsg - , unwrapMsg = - \msg -> + ) + , Svg.example + |> Example.wrapMsg SvgMsg + (\msg -> case msg of SvgMsg childMsg -> Just childMsg _ -> Nothing - , wrapState = SvgState - , unwrapState = - \msg -> + ) + |> Example.wrapState SvgState + (\msg -> case msg of SvgState childState -> Just childState _ -> Nothing - } - Svg.example - , Example.wrap - { wrapMsg = TableMsg - , unwrapMsg = - \msg -> + ) + , Table.example + |> Example.wrapMsg TableMsg + (\msg -> case msg of TableMsg childMsg -> Just childMsg _ -> Nothing - , wrapState = TableState - , unwrapState = - \msg -> + ) + |> Example.wrapState TableState + (\msg -> case msg of TableState childState -> Just childState _ -> Nothing - } - Table.example - , Example.wrap - { wrapMsg = TabsMsg - , unwrapMsg = - \msg -> + ) + , Tabs.example + |> Example.wrapMsg TabsMsg + (\msg -> case msg of TabsMsg childMsg -> Just childMsg _ -> Nothing - , wrapState = TabsState - , unwrapState = - \msg -> + ) + |> Example.wrapState TabsState + (\msg -> case msg of TabsState childState -> Just childState _ -> Nothing - } - Tabs.example - , Example.wrap - { wrapMsg = TextMsg - , unwrapMsg = - \msg -> + ) + , Text.example + |> Example.wrapMsg TextMsg + (\msg -> case msg of TextMsg childMsg -> Just childMsg _ -> Nothing - , wrapState = TextState - , unwrapState = - \msg -> + ) + |> Example.wrapState TextState + (\msg -> case msg of TextState childState -> Just childState _ -> Nothing - } - Text.example - , Example.wrap - { wrapMsg = WritingMsg - , unwrapMsg = - \msg -> + ) + , Writing.example + |> Example.wrapMsg WritingMsg + (\msg -> case msg of WritingMsg childMsg -> Just childMsg _ -> Nothing - , wrapState = WritingState - , unwrapState = - \msg -> + ) + |> Example.wrapState WritingState + (\msg -> case msg of WritingState childState -> Just childState _ -> Nothing - } - Writing.example - , Example.wrap - { wrapMsg = TextAreaMsg - , unwrapMsg = - \msg -> + ) + , TextArea.example + |> Example.wrapMsg TextAreaMsg + (\msg -> case msg of TextAreaMsg childMsg -> Just childMsg _ -> Nothing - , wrapState = TextAreaState - , unwrapState = - \msg -> + ) + |> Example.wrapState TextAreaState + (\msg -> case msg of TextAreaState childState -> Just childState _ -> Nothing - } - TextArea.example - , Example.wrap - { wrapMsg = TextInputMsg - , unwrapMsg = - \msg -> + ) + , TextInput.example + |> Example.wrapMsg TextInputMsg + (\msg -> case msg of TextInputMsg childMsg -> Just childMsg _ -> Nothing - , wrapState = TextInputState - , unwrapState = - \msg -> + ) + |> Example.wrapState TextInputState + (\msg -> case msg of TextInputState childState -> Just childState _ -> Nothing - } - TextInput.example - , Example.wrap - { wrapMsg = TooltipMsg - , unwrapMsg = - \msg -> + ) + , Tooltip.example + |> Example.wrapMsg TooltipMsg + (\msg -> case msg of TooltipMsg childMsg -> Just childMsg _ -> Nothing - , wrapState = TooltipState - , unwrapState = - \msg -> + ) + |> Example.wrapState TooltipState + (\msg -> case msg of TooltipState childState -> Just childState _ -> Nothing - } - Tooltip.example - , Example.wrap - { wrapMsg = UiIconMsg - , unwrapMsg = - \msg -> + ) + , UiIcon.example + |> Example.wrapMsg UiIconMsg + (\msg -> case msg of UiIconMsg childMsg -> Just childMsg _ -> Nothing - , wrapState = UiIconState - , unwrapState = - \msg -> + ) + |> Example.wrapState UiIconState + (\msg -> case msg of UiIconState childState -> Just childState _ -> Nothing - } - UiIcon.example + ) ]