mirror of
https://github.com/NoRedInk/noredink-ui.git
synced 2024-12-23 21:52:05 +03:00
💀 remove atomic design elements
This commit is contained in:
parent
ebcd0cfa1a
commit
83946a6b0e
@ -1,6 +1,5 @@
|
||||
module Example exposing (Example, view, wrapMsg, wrapState)
|
||||
|
||||
import AtomicDesignType exposing (AtomicDesignType)
|
||||
import Category exposing (Category)
|
||||
import Css exposing (..)
|
||||
import Css.Global exposing (a, descendants)
|
||||
@ -21,7 +20,6 @@ type alias Example state msg =
|
||||
, subscriptions : state -> Sub msg
|
||||
, view : state -> List (Html msg)
|
||||
, categories : List Category
|
||||
, atomicDesignType : AtomicDesignType
|
||||
, keyboardSupport : List KeyboardSupport
|
||||
}
|
||||
|
||||
@ -47,7 +45,6 @@ wrapMsg wrapMsg_ unwrapMsg example =
|
||||
, subscriptions = \state -> Sub.map wrapMsg_ (example.subscriptions state)
|
||||
, view = \state -> List.map (Html.map wrapMsg_) (example.view state)
|
||||
, categories = example.categories
|
||||
, atomicDesignType = example.atomicDesignType
|
||||
, keyboardSupport = example.keyboardSupport
|
||||
}
|
||||
|
||||
@ -79,7 +76,6 @@ wrapState wrapState_ unwrapState example =
|
||||
>> Maybe.map example.view
|
||||
>> Maybe.withDefault []
|
||||
, categories = example.categories
|
||||
, atomicDesignType = example.atomicDesignType
|
||||
, keyboardSupport = example.keyboardSupport
|
||||
}
|
||||
|
||||
|
@ -11,7 +11,6 @@ module Examples.Accordion exposing
|
||||
-}
|
||||
|
||||
import Accessibility.Styled as Html exposing (Html)
|
||||
import AtomicDesignType exposing (AtomicDesignType(..))
|
||||
import Browser.Dom as Dom
|
||||
import Category exposing (Category(..))
|
||||
import Css exposing (..)
|
||||
@ -41,7 +40,6 @@ example =
|
||||
, subscriptions = \_ -> Sub.none
|
||||
, view = view
|
||||
, categories = [ Layout ]
|
||||
, atomicDesignType = Molecule
|
||||
, keyboardSupport =
|
||||
[ { keys = [ Arrow KeyboardSupport.Up ]
|
||||
, result = "Moves the focus to the previous accordion header button (wraps focus to the last header button)"
|
||||
|
@ -6,7 +6,6 @@ module Examples.AssignmentIcon exposing (example, State, Msg)
|
||||
|
||||
-}
|
||||
|
||||
import AtomicDesignType exposing (AtomicDesignType(..))
|
||||
import Category exposing (Category(..))
|
||||
import Example exposing (Example)
|
||||
import Examples.IconExamples as IconExamples
|
||||
@ -30,7 +29,6 @@ example =
|
||||
{ name = "AssignmentIcon"
|
||||
, version = 2
|
||||
, categories = [ Icons ]
|
||||
, atomicDesignType = Atom
|
||||
, keyboardSupport = []
|
||||
, state = ()
|
||||
, update = \_ state -> ( state, Cmd.none )
|
||||
|
@ -6,7 +6,6 @@ module Examples.Button exposing (Msg, State, example)
|
||||
|
||||
-}
|
||||
|
||||
import AtomicDesignType exposing (AtomicDesignType(..))
|
||||
import Category exposing (Category(..))
|
||||
import Css exposing (middle, verticalAlign)
|
||||
import Debug.Control as Control exposing (Control)
|
||||
@ -30,7 +29,6 @@ example =
|
||||
, subscriptions = \_ -> Sub.none
|
||||
, view = \state -> [ viewButtonExamples state ]
|
||||
, categories = [ Buttons ]
|
||||
, atomicDesignType = Atom
|
||||
, keyboardSupport = []
|
||||
}
|
||||
|
||||
|
@ -7,7 +7,6 @@ module Examples.Callout exposing (example, State, Msg)
|
||||
-}
|
||||
|
||||
import Accessibility.Styled exposing (text)
|
||||
import AtomicDesignType exposing (AtomicDesignType(..))
|
||||
import Category exposing (Category(..))
|
||||
import Css
|
||||
import Example exposing (Example)
|
||||
@ -33,7 +32,6 @@ example =
|
||||
{ name = "Callout"
|
||||
, version = 1
|
||||
, categories = [ Messaging ]
|
||||
, atomicDesignType = Molecule
|
||||
, keyboardSupport = []
|
||||
, state = ()
|
||||
, update = \_ state -> ( state, Cmd.none )
|
||||
|
@ -6,7 +6,6 @@ module Examples.Checkbox exposing (Msg, State, example)
|
||||
|
||||
-}
|
||||
|
||||
import AtomicDesignType exposing (AtomicDesignType(..))
|
||||
import Category exposing (Category(..))
|
||||
import Css
|
||||
import Example exposing (Example)
|
||||
@ -17,7 +16,6 @@ import Nri.Ui.Checkbox.V5 as Checkbox
|
||||
import Nri.Ui.Data.PremiumLevel as PremiumLevel exposing (PremiumLevel(..))
|
||||
import Nri.Ui.PremiumCheckbox.V6 as PremiumCheckbox
|
||||
import Set exposing (Set)
|
||||
import Sort.Set
|
||||
|
||||
|
||||
{-| -}
|
||||
@ -51,7 +49,6 @@ example =
|
||||
, viewPremiumCheckboxes state
|
||||
]
|
||||
, categories = [ Inputs ]
|
||||
, atomicDesignType = Molecule
|
||||
, keyboardSupport =
|
||||
[ { keys = [ Space ]
|
||||
, result = "Select or deselect the checkbox (may cause page scroll)"
|
||||
|
@ -6,7 +6,6 @@ module Examples.ClickableSvg exposing (Msg, State, example)
|
||||
|
||||
-}
|
||||
|
||||
import AtomicDesignType exposing (AtomicDesignType(..))
|
||||
import Category exposing (Category(..))
|
||||
import Color exposing (Color)
|
||||
import Css
|
||||
@ -34,7 +33,6 @@ example =
|
||||
{ name = "ClickableSvg"
|
||||
, version = 2
|
||||
, categories = [ Buttons, Icons ]
|
||||
, atomicDesignType = Molecule
|
||||
, keyboardSupport = []
|
||||
, state = init
|
||||
, update = update
|
||||
|
@ -6,7 +6,6 @@ module Examples.ClickableText exposing (Msg, State, example)
|
||||
|
||||
-}
|
||||
|
||||
import AtomicDesignType exposing (AtomicDesignType(..))
|
||||
import Category exposing (Category(..))
|
||||
import Css exposing (middle, verticalAlign)
|
||||
import Debug.Control as Control exposing (Control)
|
||||
@ -35,7 +34,6 @@ example =
|
||||
, subscriptions = \_ -> Sub.none
|
||||
, view = \state -> [ viewExamples state ]
|
||||
, categories = [ Buttons ]
|
||||
, atomicDesignType = Molecule
|
||||
, keyboardSupport = []
|
||||
}
|
||||
|
||||
|
@ -6,7 +6,6 @@ module Examples.Colors exposing (example, State, Msg)
|
||||
|
||||
-}
|
||||
|
||||
import AtomicDesignType exposing (AtomicDesignType(..))
|
||||
import Category exposing (Category(..))
|
||||
import Color exposing (highContrast)
|
||||
import Css
|
||||
@ -38,7 +37,6 @@ example =
|
||||
{ name = "Colors"
|
||||
, version = 1
|
||||
, categories = [ Colors ]
|
||||
, atomicDesignType = Atom
|
||||
, keyboardSupport = []
|
||||
, state = ()
|
||||
, update = \_ state -> ( state, Cmd.none )
|
||||
|
@ -6,7 +6,6 @@ module Examples.Confetti exposing (example, State, Msg)
|
||||
|
||||
-}
|
||||
|
||||
import AtomicDesignType exposing (AtomicDesignType(..))
|
||||
import Browser.Events
|
||||
import Category exposing (Category(..))
|
||||
import Css exposing (Color)
|
||||
@ -25,7 +24,6 @@ example =
|
||||
{ name = "Confetti"
|
||||
, version = 2
|
||||
, categories = [ Animations ]
|
||||
, atomicDesignType = Molecule
|
||||
, keyboardSupport = []
|
||||
, state = Confetti.init 700
|
||||
, update = update
|
||||
|
@ -6,7 +6,6 @@ module Examples.DisclosureIndicator exposing (Msg, State, example)
|
||||
|
||||
-}
|
||||
|
||||
import AtomicDesignType exposing (AtomicDesignType(..))
|
||||
import Category exposing (Category(..))
|
||||
import Css
|
||||
import Example exposing (Example)
|
||||
|
@ -6,7 +6,6 @@ module Examples.Divider exposing (Msg, State, example)
|
||||
|
||||
-}
|
||||
|
||||
import AtomicDesignType exposing (AtomicDesignType(..))
|
||||
import Category exposing (Category(..))
|
||||
import Css
|
||||
import Example exposing (Example)
|
||||
@ -32,7 +31,6 @@ example =
|
||||
{ name = "Divider"
|
||||
, version = 2
|
||||
, categories = [ Layout ]
|
||||
, atomicDesignType = Atom
|
||||
, keyboardSupport = []
|
||||
, state = {}
|
||||
, update = \_ state -> ( state, Cmd.none )
|
||||
|
@ -6,7 +6,6 @@ module Examples.Fonts exposing (example, State, Msg)
|
||||
|
||||
-}
|
||||
|
||||
import AtomicDesignType exposing (AtomicDesignType(..))
|
||||
import Category exposing (Category(..))
|
||||
import Example exposing (Example)
|
||||
import Html.Styled as Html
|
||||
@ -32,7 +31,6 @@ example =
|
||||
{ name = "Fonts"
|
||||
, version = 1
|
||||
, categories = [ Text ]
|
||||
, atomicDesignType = Atom
|
||||
, keyboardSupport = []
|
||||
, state = ()
|
||||
, update = \_ state -> ( state, Cmd.none )
|
||||
|
@ -6,7 +6,6 @@ module Examples.Heading exposing (example, State, Msg)
|
||||
|
||||
-}
|
||||
|
||||
import AtomicDesignType exposing (AtomicDesignType(..))
|
||||
import Category exposing (Category(..))
|
||||
import Css
|
||||
import Example exposing (Example)
|
||||
@ -32,7 +31,6 @@ example =
|
||||
{ name = "Heading"
|
||||
, version = 2
|
||||
, categories = [ Text, Layout ]
|
||||
, atomicDesignType = Atom
|
||||
, keyboardSupport = []
|
||||
, state = ()
|
||||
, update = \_ state -> ( state, Cmd.none )
|
||||
|
@ -6,7 +6,6 @@ module Examples.Loading exposing (example, State, Msg)
|
||||
|
||||
-}
|
||||
|
||||
import AtomicDesignType exposing (AtomicDesignType(..))
|
||||
import Browser.Events
|
||||
import Category exposing (Category(..))
|
||||
import Css
|
||||
@ -91,7 +90,6 @@ example =
|
||||
{ name = "Loading"
|
||||
, version = 1
|
||||
, categories = [ Pages ]
|
||||
, atomicDesignType = Page
|
||||
, keyboardSupport = []
|
||||
, state = init
|
||||
, update = update
|
||||
|
@ -6,7 +6,6 @@ module Examples.Logo exposing (example, State, Msg)
|
||||
|
||||
-}
|
||||
|
||||
import AtomicDesignType exposing (AtomicDesignType(..))
|
||||
import Category exposing (Category(..))
|
||||
import Css
|
||||
import Example exposing (Example)
|
||||
@ -32,7 +31,6 @@ example =
|
||||
{ name = "Logo"
|
||||
, version = 1
|
||||
, categories = [ Icons ]
|
||||
, atomicDesignType = Atom
|
||||
, keyboardSupport = []
|
||||
, state = ()
|
||||
, update = \_ state -> ( state, Cmd.none )
|
||||
|
@ -6,7 +6,6 @@ module Examples.MasteryIcon exposing (example, State, Msg)
|
||||
|
||||
-}
|
||||
|
||||
import AtomicDesignType exposing (AtomicDesignType(..))
|
||||
import Category exposing (Category(..))
|
||||
import Example exposing (Example)
|
||||
import Examples.IconExamples as IconExamples
|
||||
@ -31,7 +30,6 @@ example =
|
||||
{ name = "MasteryIcon"
|
||||
, version = 1
|
||||
, categories = [ Icons ]
|
||||
, atomicDesignType = Atom
|
||||
, keyboardSupport = []
|
||||
, state = ()
|
||||
, update = \_ state -> ( state, Cmd.none )
|
||||
|
@ -7,7 +7,6 @@ module Examples.Menu exposing (Msg, State, example)
|
||||
-}
|
||||
|
||||
import Accessibility.Styled as Html exposing (..)
|
||||
import AtomicDesignType exposing (AtomicDesignType(..))
|
||||
import Browser.Dom as Dom
|
||||
import Category exposing (Category(..))
|
||||
import Css
|
||||
@ -35,7 +34,6 @@ example =
|
||||
, update = update
|
||||
, subscriptions = \_ -> Sub.none
|
||||
, categories = [ Widgets ]
|
||||
, atomicDesignType = Molecule
|
||||
, keyboardSupport =
|
||||
[ { keys = [ Space ], result = "Opens the menu" }
|
||||
, { keys = [ Enter ], result = "Opens the menu" }
|
||||
|
@ -1,13 +1,11 @@
|
||||
module Examples.Message exposing (Msg, State, example)
|
||||
|
||||
import Accessibility.Styled as Html exposing (..)
|
||||
import AtomicDesignType exposing (AtomicDesignType(..))
|
||||
import Category exposing (Category(..))
|
||||
import CommonControls
|
||||
import Css exposing (..)
|
||||
import Debug.Control as Control exposing (Control)
|
||||
import Example exposing (Example)
|
||||
import Html.Styled exposing (styled)
|
||||
import Html.Styled.Attributes as Attributes exposing (css, href)
|
||||
import KeyboardSupport exposing (Direction(..), Key(..))
|
||||
import Nri.Ui.Colors.V1 as Colors
|
||||
@ -181,7 +179,6 @@ example =
|
||||
{ name = "Message"
|
||||
, version = 3
|
||||
, categories = [ Messaging ]
|
||||
, atomicDesignType = Molecule
|
||||
, keyboardSupport = []
|
||||
, state = init
|
||||
, update = update
|
||||
|
@ -7,7 +7,6 @@ module Examples.Modal exposing (Msg, State, example)
|
||||
-}
|
||||
|
||||
import Accessibility.Styled as Html exposing (Html, div, h3, h4, p, span, text)
|
||||
import AtomicDesignType exposing (AtomicDesignType(..))
|
||||
import Browser.Dom as Dom
|
||||
import Category exposing (Category(..))
|
||||
import Css exposing (..)
|
||||
@ -111,7 +110,6 @@ example =
|
||||
{ name = "Modal"
|
||||
, version = 11
|
||||
, categories = [ Modals ]
|
||||
, atomicDesignType = Organism
|
||||
, keyboardSupport =
|
||||
[ { keys = [ KeyboardSupport.Tab ]
|
||||
, result = "Moves focus to the next button within the modal or wraps back to the first element within the modal."
|
||||
|
@ -6,7 +6,6 @@ module Examples.Page exposing (example, State, Msg)
|
||||
|
||||
-}
|
||||
|
||||
import AtomicDesignType exposing (AtomicDesignType(..))
|
||||
import Category exposing (Category(..))
|
||||
import CommonControls
|
||||
import Css
|
||||
@ -59,7 +58,6 @@ example =
|
||||
{ name = "Page"
|
||||
, version = 3
|
||||
, categories = [ Pages ]
|
||||
, atomicDesignType = Page
|
||||
, keyboardSupport = []
|
||||
, state = { httpError = CommonControls.httpError, recoveryText = initRecoveryText }
|
||||
, update = update
|
||||
|
@ -6,7 +6,6 @@ module Examples.Pennant exposing (example, State, Msg)
|
||||
|
||||
-}
|
||||
|
||||
import AtomicDesignType exposing (AtomicDesignType(..))
|
||||
import Category exposing (Category(..))
|
||||
import Css exposing (..)
|
||||
import Example exposing (Example)
|
||||
@ -35,7 +34,6 @@ example =
|
||||
{ name = "Pennant"
|
||||
, version = 2
|
||||
, categories = [ Icons ]
|
||||
, atomicDesignType = Atom
|
||||
, keyboardSupport = []
|
||||
, state = ()
|
||||
, update = \_ state -> ( state, Cmd.none )
|
||||
|
@ -10,7 +10,6 @@ module Examples.RadioButton exposing
|
||||
|
||||
-}
|
||||
|
||||
import AtomicDesignType exposing (AtomicDesignType(..))
|
||||
import Category exposing (Category(..))
|
||||
import Css exposing (..)
|
||||
import Debug.Control as Control exposing (Control)
|
||||
@ -37,7 +36,6 @@ example =
|
||||
, subscriptions = subscriptions
|
||||
, view = view
|
||||
, categories = [ Layout ]
|
||||
, atomicDesignType = Atom
|
||||
, keyboardSupport =
|
||||
[ { keys = [ Arrow Left ]
|
||||
, result = "Move the focus & select the radio button to the left"
|
||||
|
@ -11,7 +11,6 @@ module Examples.SegmentedControl exposing
|
||||
-}
|
||||
|
||||
import Accessibility.Styled as Html exposing (Html)
|
||||
import AtomicDesignType exposing (AtomicDesignType(..))
|
||||
import Browser.Dom as Dom
|
||||
import Category exposing (Category(..))
|
||||
import Css
|
||||
@ -69,7 +68,6 @@ example =
|
||||
}
|
||||
]
|
||||
, categories = [ Widgets, Layout ]
|
||||
, atomicDesignType = Molecule
|
||||
, keyboardSupport =
|
||||
[ { keys = [ KeyboardSupport.Tab ]
|
||||
, result = "Move focus to the currently-selected Control's content"
|
||||
|
@ -6,7 +6,6 @@ module Examples.Select exposing (Msg, State, example)
|
||||
|
||||
-}
|
||||
|
||||
import AtomicDesignType exposing (AtomicDesignType(..))
|
||||
import Category exposing (Category(..))
|
||||
import Css
|
||||
import Example exposing (Example)
|
||||
@ -26,7 +25,6 @@ example =
|
||||
, update = update
|
||||
, subscriptions = \_ -> Sub.none
|
||||
, categories = [ Inputs ]
|
||||
, atomicDesignType = Molecule
|
||||
, keyboardSupport = []
|
||||
, view =
|
||||
\state ->
|
||||
|
@ -7,7 +7,6 @@ module Examples.Slide exposing (Msg, State, example)
|
||||
-}
|
||||
|
||||
import Accessibility.Styled as Html
|
||||
import AtomicDesignType exposing (AtomicDesignType(..))
|
||||
import Category exposing (Category(..))
|
||||
import Css
|
||||
import Example exposing (Example)
|
||||
@ -39,7 +38,6 @@ example =
|
||||
{ name = "Slide"
|
||||
, version = 1
|
||||
, categories = [ Animations ]
|
||||
, atomicDesignType = Atom
|
||||
, keyboardSupport = []
|
||||
, state = init
|
||||
, update = update
|
||||
|
@ -7,7 +7,6 @@ module Examples.SlideModal exposing (Msg, State, example)
|
||||
-}
|
||||
|
||||
import Accessibility.Styled as Html exposing (Html, div, h3, p, text)
|
||||
import AtomicDesignType exposing (AtomicDesignType(..))
|
||||
import Category exposing (Category(..))
|
||||
import Css
|
||||
import Example exposing (Example)
|
||||
@ -37,7 +36,6 @@ example =
|
||||
{ name = "SlideModal"
|
||||
, version = 2
|
||||
, categories = [ Modals ]
|
||||
, atomicDesignType = Organism
|
||||
, keyboardSupport = []
|
||||
, state = init
|
||||
, update = update
|
||||
|
@ -6,7 +6,6 @@ module Examples.SortableTable exposing (Msg, State, example)
|
||||
|
||||
-}
|
||||
|
||||
import AtomicDesignType exposing (AtomicDesignType(..))
|
||||
import Category exposing (Category(..))
|
||||
import Example exposing (Example)
|
||||
import Html.Styled as Html
|
||||
@ -38,7 +37,6 @@ example =
|
||||
{ name = "SortableTable"
|
||||
, version = 2
|
||||
, categories = [ Tables, Layout ]
|
||||
, atomicDesignType = Molecule
|
||||
, keyboardSupport = []
|
||||
, state = init
|
||||
, update = update
|
||||
|
@ -6,7 +6,6 @@ module Examples.Svg exposing (Msg, State, example)
|
||||
|
||||
-}
|
||||
|
||||
import AtomicDesignType exposing (AtomicDesignType(..))
|
||||
import Category exposing (Category(..))
|
||||
import Color exposing (Color)
|
||||
import Css
|
||||
@ -30,7 +29,6 @@ example =
|
||||
{ name = "Svg"
|
||||
, version = 1
|
||||
, categories = [ Icons ]
|
||||
, atomicDesignType = Atom
|
||||
, keyboardSupport = []
|
||||
, state = init
|
||||
, update = update
|
||||
|
@ -6,7 +6,6 @@ module Examples.Switch exposing (Msg, State, example)
|
||||
|
||||
-}
|
||||
|
||||
import AtomicDesignType
|
||||
import Category
|
||||
import Example exposing (Example)
|
||||
import Html.Styled as Html
|
||||
@ -68,6 +67,5 @@ example =
|
||||
]
|
||||
]
|
||||
, categories = [ Category.Inputs ]
|
||||
, atomicDesignType = AtomicDesignType.Atom
|
||||
, keyboardSupport = [{- TODO -}]
|
||||
}
|
||||
|
@ -6,7 +6,6 @@ module Examples.Table exposing (Msg, State, example)
|
||||
|
||||
-}
|
||||
|
||||
import AtomicDesignType exposing (AtomicDesignType(..))
|
||||
import Category exposing (Category(..))
|
||||
import Css exposing (..)
|
||||
import Example exposing (Example)
|
||||
@ -37,7 +36,6 @@ example =
|
||||
, update = \_ state -> ( state, Cmd.none )
|
||||
, subscriptions = \_ -> Sub.none
|
||||
, categories = [ Tables, Layout ]
|
||||
, atomicDesignType = Molecule
|
||||
, keyboardSupport = []
|
||||
, view =
|
||||
\() ->
|
||||
|
@ -10,7 +10,6 @@ module Examples.Tabs exposing
|
||||
|
||||
-}
|
||||
|
||||
import AtomicDesignType exposing (AtomicDesignType(..))
|
||||
import Browser.Dom as Dom
|
||||
import Category exposing (Category(..))
|
||||
import Css
|
||||
@ -123,7 +122,6 @@ example =
|
||||
{ name = "Tabs"
|
||||
, version = 7
|
||||
, categories = [ Layout ]
|
||||
, atomicDesignType = Molecule
|
||||
, keyboardSupport =
|
||||
[ { keys = [ KeyboardSupport.Tab ]
|
||||
, result = "Move focus to the currently-selected Tab's tab panel"
|
||||
|
@ -6,7 +6,6 @@ module Examples.Text exposing (example, State, Msg)
|
||||
|
||||
-}
|
||||
|
||||
import AtomicDesignType exposing (AtomicDesignType(..))
|
||||
import Category exposing (Category(..))
|
||||
import Css
|
||||
import Example exposing (Example)
|
||||
@ -33,7 +32,6 @@ example =
|
||||
{ name = "Text"
|
||||
, version = 5
|
||||
, categories = [ Text ]
|
||||
, atomicDesignType = Atom
|
||||
, keyboardSupport = []
|
||||
, state = ()
|
||||
, update = \_ state -> ( state, Cmd.none )
|
||||
|
@ -6,7 +6,6 @@ module Examples.Text.Writing exposing (example, State, Msg)
|
||||
|
||||
-}
|
||||
|
||||
import AtomicDesignType exposing (AtomicDesignType(..))
|
||||
import Category exposing (Category(..))
|
||||
import Example exposing (Example)
|
||||
import Html.Styled exposing (text)
|
||||
@ -29,7 +28,6 @@ example =
|
||||
{ name = "Text.Writing"
|
||||
, version = 1
|
||||
, categories = [ Text ]
|
||||
, atomicDesignType = Atom
|
||||
, keyboardSupport = []
|
||||
, state = ()
|
||||
, update = \_ state -> ( state, Cmd.none )
|
||||
|
@ -6,7 +6,6 @@ module Examples.TextArea exposing (Msg, State, example)
|
||||
|
||||
-}
|
||||
|
||||
import AtomicDesignType exposing (AtomicDesignType(..))
|
||||
import Category exposing (Category(..))
|
||||
import Dict exposing (Dict)
|
||||
import Example exposing (Example)
|
||||
@ -44,7 +43,6 @@ example =
|
||||
, update = update
|
||||
, subscriptions = \_ -> Sub.none
|
||||
, categories = [ Inputs ]
|
||||
, atomicDesignType = Molecule
|
||||
, keyboardSupport = []
|
||||
, view =
|
||||
\state ->
|
||||
|
@ -7,7 +7,6 @@ module Examples.TextInput exposing (Msg, State, example)
|
||||
-}
|
||||
|
||||
import Accessibility.Styled as Html exposing (..)
|
||||
import AtomicDesignType exposing (AtomicDesignType(..))
|
||||
import Category exposing (Category(..))
|
||||
import Css exposing (..)
|
||||
import Debug.Control as Control exposing (Control)
|
||||
@ -55,7 +54,6 @@ example =
|
||||
{ name = "TextInput"
|
||||
, version = 6
|
||||
, categories = [ Inputs ]
|
||||
, atomicDesignType = Molecule
|
||||
, keyboardSupport = []
|
||||
, state = init
|
||||
, update = update
|
||||
|
@ -7,7 +7,6 @@ module Examples.Tooltip exposing (example, State, Msg)
|
||||
-}
|
||||
|
||||
import Accessibility.Styled as Html exposing (Html)
|
||||
import AtomicDesignType exposing (AtomicDesignType(..))
|
||||
import Category exposing (Category(..))
|
||||
import Css
|
||||
import Debug.Control as Control exposing (Control)
|
||||
@ -29,7 +28,6 @@ example =
|
||||
{ name = "Tooltip"
|
||||
, version = 2
|
||||
, categories = [ Widgets ]
|
||||
, atomicDesignType = Molecule
|
||||
, keyboardSupport = []
|
||||
, state = init
|
||||
, update = update
|
||||
|
@ -6,7 +6,6 @@ module Examples.UiIcon exposing (example, State, Msg)
|
||||
|
||||
-}
|
||||
|
||||
import AtomicDesignType exposing (AtomicDesignType(..))
|
||||
import Category exposing (Category(..))
|
||||
import Example exposing (Example)
|
||||
import Examples.IconExamples as IconExamples
|
||||
@ -30,7 +29,6 @@ example =
|
||||
{ name = "UiIcon"
|
||||
, version = 1
|
||||
, categories = List.singleton Icons
|
||||
, atomicDesignType = Atom
|
||||
, keyboardSupport = []
|
||||
, state = ()
|
||||
, update = \_ state -> ( state, Cmd.none )
|
||||
|
@ -1,7 +1,6 @@
|
||||
module Main exposing (init, main)
|
||||
|
||||
import Accessibility.Styled as Html exposing (Html, img, text)
|
||||
import AtomicDesignType exposing (AtomicDesignType)
|
||||
import Browser exposing (Document, UrlRequest(..))
|
||||
import Browser.Dom
|
||||
import Browser.Navigation exposing (Key)
|
||||
@ -40,7 +39,6 @@ type alias Model =
|
||||
{ -- Global UI
|
||||
route : Route
|
||||
, moduleStates : Dict String (Example Examples.State Examples.Msg)
|
||||
, atomicDesignTypes : Set AtomicDesignType
|
||||
, navigationKey : Key
|
||||
}
|
||||
|
||||
@ -51,7 +49,6 @@ init () url key =
|
||||
, moduleStates =
|
||||
Dict.fromList
|
||||
(List.map (\example -> ( example.name, example )) Examples.all)
|
||||
, atomicDesignTypes = Set.fromList AtomicDesignType.sorter AtomicDesignType.all
|
||||
, navigationKey = key
|
||||
}
|
||||
, Cmd.none
|
||||
@ -62,7 +59,6 @@ type Msg
|
||||
= UpdateModuleStates String Examples.Msg
|
||||
| OnUrlRequest Browser.UrlRequest
|
||||
| OnUrlChange Url
|
||||
| ToggleAtomicDesignType AtomicDesignType Bool
|
||||
| SkipToMainContent
|
||||
| NoOp
|
||||
|
||||
@ -99,21 +95,6 @@ update action model =
|
||||
OnUrlChange route ->
|
||||
( { model | route = Routes.fromLocation route }, Cmd.none )
|
||||
|
||||
ToggleAtomicDesignType atomicDesignType isOpen ->
|
||||
( { model
|
||||
| atomicDesignTypes =
|
||||
(if isOpen then
|
||||
Set.insert
|
||||
|
||||
else
|
||||
Set.remove
|
||||
)
|
||||
atomicDesignType
|
||||
model.atomicDesignTypes
|
||||
}
|
||||
, Cmd.none
|
||||
)
|
||||
|
||||
SkipToMainContent ->
|
||||
( model
|
||||
, Task.attempt (\_ -> NoOp) (Browser.Dom.focus "maincontent")
|
||||
@ -141,12 +122,7 @@ view_ : Model -> Html Msg
|
||||
view_ model =
|
||||
let
|
||||
examples filterBy =
|
||||
List.filter
|
||||
(\m ->
|
||||
filterBy m
|
||||
&& Set.memberOf model.atomicDesignTypes m.atomicDesignType
|
||||
)
|
||||
(Dict.values model.moduleStates)
|
||||
List.filter (\m -> filterBy m) (Dict.values model.moduleStates)
|
||||
|
||||
mainContentHeader heading =
|
||||
Heading.h1
|
||||
@ -163,7 +139,7 @@ view_ model =
|
||||
, minHeight (vh 100)
|
||||
]
|
||||
]
|
||||
[ navigation model.route model.atomicDesignTypes
|
||||
[ navigation model.route
|
||||
, Html.main_ [ css [ flexGrow (int 1), sectionStyles ] ]
|
||||
(case model.route of
|
||||
Routes.Doodad doodad ->
|
||||
@ -209,8 +185,8 @@ view_ model =
|
||||
]
|
||||
|
||||
|
||||
navigation : Route -> Set AtomicDesignType -> Html Msg
|
||||
navigation route openAtomicDesignTypes =
|
||||
navigation : Route -> Html Msg
|
||||
navigation route =
|
||||
let
|
||||
isActive category =
|
||||
case route of
|
||||
@ -297,28 +273,9 @@ navigation route openAtomicDesignTypes =
|
||||
[ css [ margin4 zero zero (px 40) zero, padding zero ]
|
||||
, id "categories"
|
||||
]
|
||||
, Html.fieldset []
|
||||
(Html.legend [] [ text "Atomic Design type" ]
|
||||
:: List.map (checkAtomicDesignType openAtomicDesignTypes) AtomicDesignType.all
|
||||
)
|
||||
]
|
||||
|
||||
|
||||
checkAtomicDesignType : Set AtomicDesignType -> AtomicDesignType -> Html Msg
|
||||
checkAtomicDesignType openAtomicDesignTypes atomicDesignType =
|
||||
let
|
||||
isChecked =
|
||||
Set.memberOf openAtomicDesignTypes atomicDesignType
|
||||
|
||||
name =
|
||||
AtomicDesignType.toString atomicDesignType
|
||||
in
|
||||
Html.labelAfter [ css [ display block ] ] (text name) <|
|
||||
Html.checkbox name
|
||||
(Just isChecked)
|
||||
[ Events.onCheck (ToggleAtomicDesignType atomicDesignType) ]
|
||||
|
||||
|
||||
sectionStyles : Css.Style
|
||||
sectionStyles =
|
||||
Css.batch [ margin2 (px 40) zero ]
|
||||
|
Loading…
Reference in New Issue
Block a user