✨ Add todo panels

src/components/panels/Box.stories.jsx

@@ -15,6 +15,9 @@ export default {
         disabled: {
             control: {type: "boolean"},
         },
+        todo: {
+            defaultValue: false,
+        },
     },
 }
 
@@ -59,3 +62,9 @@ export const NestedMultiple = props => (
 NestedMultiple.args = {
     disabled: false,
 }
+
+
+export const Todo = Default.bind({})
+Todo.args = {
+    todo: true,
+}

src/components/panels/Box.tsx

@@ -8,8 +8,12 @@ import mergeClassNames from "classnames"
 export interface BoxProps extends PanelProps {}
 
 
-export function Box({...props}: BoxProps): JSX.Element {
+export function Box({todo, ...props}: BoxProps): JSX.Element {
-    props.bluelibClassNames = mergeClassNames(props.bluelibClassNames, "panel-box")
+    if(todo) {
+        console.warn(`TODO: ${props.children}`)
+    }
+
+    props.bluelibClassNames = mergeClassNames(props.bluelibClassNames, "panel-box", todo ? "todo" : "")
 
     return (
         <Panel {...props}/>

src/components/panels/Dialog.stories.jsx

@@ -15,6 +15,9 @@ export default {
         disabled: {
             control: {type: "boolean"},
         },
+        todo: {
+            defaultValue: false,
+        },
     },
 }
 
@@ -59,3 +62,9 @@ export const NestedMultiple = props => (
 NestedMultiple.args = {
     disabled: false,
 }
+
+
+export const Todo = Default.bind({})
+Todo.args = {
+    todo: true,
+}

src/components/panels/Dialog.tsx

@@ -8,8 +8,12 @@ import mergeClassNames from "classnames"
 export interface DialogProps extends PanelProps {}
 
 
-export function Dialog({...props}: DialogProps): JSX.Element {
+export function Dialog({todo, ...props}: DialogProps): JSX.Element {
-    props.bluelibClassNames = mergeClassNames(props.bluelibClassNames, "panel-dialog")
+    if(todo) {
+        console.warn(`TODO: ${props.children}`)
+    }
+
+    props.bluelibClassNames = mergeClassNames(props.bluelibClassNames, "panel-dialog", todo ? "todo" : "")
 
     return (
         <Panel {...props}/>

src/components/panels/Panel.stories.jsx

@@ -15,6 +15,9 @@ export default {
         disabled: {
             control: {type: "boolean"},
         },
+        todo: {
+            defaultValue: false,
+        },
     },
 }
 
@@ -59,3 +62,9 @@ export const NestedMultiple = props => (
 NestedMultiple.args = {
     disabled: false,
 }
+
+
+export const Todo = Default.bind({})
+Todo.args = {
+    todo: true,
+}

src/components/panels/Panel.tsx

@@ -5,11 +5,17 @@ import {BaseElement} from "../BaseElement"
 import mergeClassNames from "classnames"
 
 
-export interface PanelProps extends Types.BluelibHTMLProps<HTMLElement> {}
+export interface PanelProps extends Types.BluelibHTMLProps<HTMLElement> {
+    todo?: boolean,
+}
 
 
-export function Panel({...props}: PanelProps): JSX.Element {
+export function Panel({todo, ...props}: PanelProps): JSX.Element {
-    props.bluelibClassNames = mergeClassNames(props.bluelibClassNames, "panel")
+    if(todo) {
+        console.warn(`TODO: ${props.children}`)
+    }
+
+    props.bluelibClassNames = mergeClassNames(props.bluelibClassNames, "panel", todo ? "todo" : "")
 
     return (
         <BaseElement kind={"section"} {...props}/>

src/components/panels/Parenthesis.stories.jsx

@@ -15,6 +15,9 @@ export default {
         disabled: {
             control: {type: "boolean"},
         },
+        todo: {
+            defaultValue: false,
+        },
     },
 }
 
@@ -59,3 +62,9 @@ export const NestedMultiple = props => (
 NestedMultiple.args = {
     disabled: false,
 }
+
+
+export const Todo = Default.bind({})
+Todo.args = {
+    todo: true,
+}

src/components/panels/Parenthesis.tsx

@@ -8,8 +8,12 @@ import mergeClassNames from "classnames"
 export interface ParenthesisProps extends PanelProps {}
 
 
-export function Parenthesis({...props}: ParenthesisProps): JSX.Element {
+export function Parenthesis({todo, ...props}: ParenthesisProps): JSX.Element {
-    props.bluelibClassNames = mergeClassNames(props.bluelibClassNames, "panel-parenthesis")
+    if(todo) {
+        console.warn(`TODO: ${props.children}`)
+    }
+
+    props.bluelibClassNames = mergeClassNames(props.bluelibClassNames, "panel-parenthesis", todo ? "todo" : "")
 
     return (
         <Panel {...props}/>