💀 remove atomic design elements

This commit is contained in:
Tessa Kelly 2021-05-27 18:23:07 -07:00
parent ebcd0cfa1a
commit 83946a6b0e
39 changed files with 4 additions and 126 deletions

View File

@ -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
}

View File

@ -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)"

View File

@ -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 )

View File

@ -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 = []
}

View File

@ -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 )

View File

@ -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)"

View File

@ -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

View File

@ -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 = []
}

View File

@ -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 )

View File

@ -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

View File

@ -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)

View File

@ -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 )

View File

@ -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 )

View File

@ -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 )

View File

@ -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

View File

@ -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 )

View File

@ -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 )

View File

@ -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" }

View File

@ -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

View File

@ -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."

View File

@ -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

View File

@ -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 )

View File

@ -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"

View File

@ -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"

View File

@ -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 ->

View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -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 -}]
}

View File

@ -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 =
\() ->

View File

@ -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"

View File

@ -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 )

View File

@ -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 )

View File

@ -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 ->

View File

@ -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

View File

@ -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

View File

@ -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 )

View File

@ -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 ]