@ -5,7 +5,13 @@ import ActionButton from '../components/action-buttons/ActionButton';
@@ -5,7 +5,13 @@ import ActionButton from '../components/action-buttons/ActionButton';
exportdefault{
title:'owncast/Action Buttons/Single button',
component: ActionButton,
parameters:{},
parameters:{
docs:{
description:{
component:`An **Action Button** or **External Action Button** is a button that is used to trigger either an internal or external action. Many will show a modal, but they can also open a new tab to allow navigating to external pages. They are rendered horizontally within the Action Button Row.`,
component:`This is a horizontal row of buttons that could be statically created by the Owncast application (such as Notify, Follow) or are user-generated external actions (Donate, Learn more, etc).
@ -11,7 +12,23 @@ const Example = () => (
@@ -11,7 +12,23 @@ const Example = () => (
exportdefault{
title:'owncast/Modals/Browser Notifications',
component: BrowserNotifyModal,
parameters:{},
parameters:{
design:{
type:'image',
url: BrowserNotifyModalMock,
scale: 0.5,
},
docs:{
description:{
component:`The notify modal allows an end user to get notified when the stream goes live via [Browser Push Notifications](https://developers.google.com/web/ilt/pwa/introduction-to-push-notifications) It must:
@ -16,6 +16,7 @@ Visit the [UIv2 milestone](https://github.com/owncast/owncast/milestone/18) on G
@@ -16,6 +16,7 @@ Visit the [UIv2 milestone](https://github.com/owncast/owncast/milestone/18) on G
- Standardize styling across the project by using a single design language and style guide.
- Allows more people to contribute to the project if we use popular frameworks.
@ -25,6 +26,21 @@ Visit the [UIv2 milestone](https://github.com/owncast/owncast/milestone/18) on G
@@ -25,6 +26,21 @@ Visit the [UIv2 milestone](https://github.com/owncast/owncast/milestone/18) on G
- [React](https://reactjs.org/)
- [Ant Design](https://ant.design/)
## Contributing
1. Find a component that hasn't yet been worked on by looking through the [UIv2 milestone](https://github.com/owncast/owncast/milestone/18)
and the sidebar of components to the left.
1. See if you can have an example of this functionality in action via the [Owncast Demo Server](https://watch.owncast.online) or [Owncast Nightly Build](https://nightly.owncast.online) so you know how it's supposed to work if it's interactive.
1. Visit the `Docs` tab to read any specific documentation that may have been written about how this component works.
1. Go to the `Canvas` tab of the component you selected and see if there's a Design attached to it.
1. If there is a design, then that's a starting point you can use to start building out the component.
1. If there isn't, then visit the [Owncast Demo Server](https://watch.owncast.online), the [Owncast Nightly Build](https://nightly.owncast.online), or the proposed [v2 design](https://www.figma.com/file/B6ICOn1J3dyYeoZM5kPM2A/Owncast---Review?node-id=0%3A1) for some ways to start.
1. If no design exists, then you can ask around the Owncast chat for help, for come up with your own ideas!
1. No designs are stuck in stone, and we're using this as an opportunity to level up the UI of Owncast, so all ideas are welcome.
## How?
This rewrite is a large project, but like anything else, breaking it into pieces and working on one thing at a time will eventually get us to the finish line.
@ -45,9 +61,3 @@ For example a button may have a disabled state that requires a specific scenario
@@ -45,9 +61,3 @@ For example a button may have a disabled state that requires a specific scenario
but here we you can just toggle the state to verify things are working as expected.
This means [new components should have a corresponding story added](https://storybook.js.org/docs/react/get-started/whats-a-story) to make it easier to maintain the project.
## Contributing
This is a standard React project so it makes it easy for **anybody to help!**
@ -5,7 +5,13 @@ import Modal from '../components/ui/Modal/Modal';
@@ -5,7 +5,13 @@ import Modal from '../components/ui/Modal/Modal';
exportdefault{
title:'owncast/Modals/Container',
component: Modal,
parameters:{},
parameters:{
docs:{
description:{
component:`This is the popup modal container that all modal content is rendered inside. It can be passed content nodes to render, or a URL to show an iframe.`,
Gabe Kangas
3 years ago
