Feat/theme handling (#109)

* Improve generated octicons doc

* Remove Theme hook

* Add phx_click_touch

* Delete dev.exs

* Remove moduledocs

* Add prompt attr phx_click_touch

* Remove ThemeSessionController and ThemeEvent

* Update Theme doc

* Build assets

* Doc phx_click_touch

* Update README.md

* Update URLs

* Minor doc updates

CHANGELOG.md

@@ -11,7 +11,10 @@
   - `radio_group`: added to slot `radio_button` the attr `label` to set a custom label
 
 ### Breaking changes
-- Renamed hook `Session` (which was erroneously documented as "ThemeMenu") to `Theme`.
+- Removed functions related to session for theme state - see `PrimerLive.Theme` for alternatives:
+  - `ThemeSessionController`
+  - `ThemeEvent`
+  - Theme hook
 - IDs of checkboxes and radio buttons have been updated to only include valid characters.
 
 ### Deprecated

README.md

@@ -1,11 +1,28 @@
 # PrimerLive
 
-PrimerLive is a collection of function components that implements <a href="https://primer.style/" target="_blank">GitHub's Primer Design System</a>. It is intended for usage in <a href="https://github.com/phoenixframework/phoenix_live_view" target="_blank">Phoenix LiveView pages</a> and regular (non-LiveView) views in Phoenix applications.
-
-PrimerLive components can be used in Phoenix LiveView pages and regular (non-LiveView) views in Phoenix applications.
+<p>
+An implementation of GitHub's <a href="https://primer.style/design/" target="blank">Primer Design System</a> for Phoenix LiveView.
+</p>
 
+<p>
 The Primer Design System provides a strong base for creating data driven applications such as rich CRUD applications with interactive forms.
+</p>
+
+<p>
+All PrimerLive components accept the <code>class</code> attribute for customisations (and often the <code>classes</code> struct to address inner elements). <a href="https://primer.style/design/foundations/css-utilities/getting-started" target="blank">Primer's utility classes</a> allow a wide range of customisations without having to write custom styles.
+</p>
+
+<p>
+PrimerLive components can be used in <a href="https://github.com/phoenixframework/phoenix_live_view" target="_blank">Phoenix LiveView pages</a> and regular (non-LiveView) views in Phoenix applications.
+</p>
+
+## Documentation
 
 - [Documentation at Hexdocs](https://hexdocs.pm/primer_live/)
-- [Storybook and examples](https://primer-live.org/)
-- [Source code](https://github.com/ArthurClemens/primer_live)
+- [Installation](doc-extra/installation.md)
+- [Usage](doc-extra/usage.md)
+
+## Resources
+
+- [PrimerLive Storybook and Demo](https://primer-live.org)
+- [Source code](https://github.com/ArthurClemens/primer_live)

assets/js/index.ts

@@ -1,2 +1,2 @@
-export * from './theme';
+
 export * from './prompt';

doc-extra/menus-and-dialogs.md

@@ -31,16 +31,17 @@ With dialogs and drawers, the toggle element is omitted - they are usually opene
 
 The following (optional) attributes are common for all menus and dialogs.
 
+- `form` - The surrounding form, if any.
+- `field` - See below at [Maintaining state in forms](#maintaining-state-in-forms).
+- `id` - Element id. Use to toggle from the outside, and to get consistent IDs in tests.
 - `is_backdrop` - Generates a backdrop background (default with medium darkness).
-- `is_light_backdrop` - Generates a light backdrop background color.
-- `is_medium_backdrop` - Generates a medium backdrop background color.
 - `is_dark_backdrop` - Generates a dark backdrop background color.
 - `is_dropdown_caret` - Adds a dropdown caret to the prompt button.
 - `is_fast` - Generates fast fade transitions for backdrop and content.
+- `is_light_backdrop` - Generates a light backdrop background color.
+- `is_medium_backdrop` - Generates a medium backdrop background color.
+- `phx_click_touch` - `phx-click` event binding to assign an event callback on clicking the touch layer.
 - `prompt_options` - JavaScript state callback functions.
-- `id` - Element id. Use to toggle from the outside, and to get consistent IDs in tests.
-- `form` - The surrounding form, if any.
-- `field` - See below at [Maintaining state in forms](#maintaining-state-in-forms).
 
 Dialog and drawer specific:
 

doc-extra/overview.md

@@ -0,0 +1,28 @@
+# Overview
+
+<p>
+An implementation of GitHub's <a href="https://primer.style/design/" target="blank">Primer Design System</a> for Phoenix LiveView.
+</p>
+
+<p>
+The Primer Design System provides a strong base for creating data driven applications such as rich CRUD applications with interactive forms.
+</p>
+
+<p>
+All PrimerLive components accept the <code>class</code> attribute for customisations (and often the <code>classes</code> struct to address inner elements). <a href="https://primer.style/design/foundations/css-utilities/getting-started" target="blank">Primer's utility classes</a> allow a wide range of customisations without having to write custom styles.
+</p>
+
+<p>
+PrimerLive components can be used in <a href="https://github.com/phoenixframework/phoenix_live_view" target="_blank">Phoenix LiveView pages</a> and regular (non-LiveView) views in Phoenix applications.
+</p>
+
+## Documentation
+
+- [Component documentation](`PrimerLive.Component`)
+- [Installation](doc-extra/installation.md)
+- [Usage](doc-extra/usage.md)
+
+## Resources
+
+- [PrimerLive Storybook and Demo](https://primer-live.org)
+- [Source code](https://github.com/ArthurClemens/primer_live)