From c3cacbb0361b688183522aa5e1d4856bcccfdc15 Mon Sep 17 00:00:00 2001
From: sergue1 <serguei.strigo@gmail.com>
Date: Thu, 8 Feb 2024 12:46:05 +0100
Subject: [PATCH] Add named styles to buttons (#108)

Co-authored-by: Samuel Colvin <s@muelcolvin.com>
---
 demo/components_list.py                         | 2 ++
 src/npm-fastui-bootstrap/src/index.tsx          | 7 ++++++-
 src/npm-fastui-prebuilt/src/main.scss           | 1 +
 src/npm-fastui/src/models.d.ts                  | 2 ++
 src/python-fastui/fastui/class_name.py          | 5 ++++-
 src/python-fastui/fastui/components/__init__.py | 1 +
 6 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/demo/components_list.py b/demo/components_list.py
index b329c1b9..25c9ecf9 100644
--- a/demo/components_list.py
+++ b/demo/components_list.py
@@ -92,6 +92,8 @@ class Delivery(BaseModel):
                 c.Heading(text='Button and Modal', level=2),
                 c.Paragraph(text='The button below will open a modal with static content.'),
                 c.Button(text='Show Static Modal', on_click=PageEvent(name='static-modal')),
+                c.Button(text='Secondary Button', named_style='secondary', class_name='+ ms-2'),
+                c.Button(text='Warning Button', named_style='warning', class_name='+ ms-2'),
                 c.Modal(
                     title='Static Modal',
                     body=[c.Paragraph(text='This is some static content that was set when the modal was defined.')],
diff --git a/src/npm-fastui-bootstrap/src/index.tsx b/src/npm-fastui-bootstrap/src/index.tsx
index b4dfe0c1..b2fef51f 100644
--- a/src/npm-fastui-bootstrap/src/index.tsx
+++ b/src/npm-fastui-bootstrap/src/index.tsx
@@ -31,7 +31,12 @@ export const classNameGenerator: ClassNameGenerator = ({
     case 'Page':
       return 'container mt-80 mb-3 page'
     case 'Button':
-      return 'btn btn-primary'
+      return {
+        btn: true,
+        'btn-primary': !props.namedStyle || props.namedStyle === 'primary',
+        'btn-secondary': props.namedStyle === 'secondary',
+        'btn-warning': props.namedStyle === 'warning',
+      }
     case 'Table':
       switch (subElement) {
         case 'no-data-message':
diff --git a/src/npm-fastui-prebuilt/src/main.scss b/src/npm-fastui-prebuilt/src/main.scss
index 037ae1ac..07cbace6 100644
--- a/src/npm-fastui-prebuilt/src/main.scss
+++ b/src/npm-fastui-prebuilt/src/main.scss
@@ -1,4 +1,5 @@
 $primary: black;
+$secondary: #666;
 $link-color: #0d6efd; // bootstrap primary
 
 @import 'bootstrap/scss/bootstrap';
diff --git a/src/npm-fastui/src/models.d.ts b/src/npm-fastui/src/models.d.ts
index 1e370f1a..461118fe 100644
--- a/src/npm-fastui/src/models.d.ts
+++ b/src/npm-fastui/src/models.d.ts
@@ -55,6 +55,7 @@ export type JsonData =
       [k: string]: JsonData
     }
 export type AnyEvent = PageEvent | GoToEvent | BackEvent | AuthEvent
+export type NamedStyle = 'primary' | 'secondary' | 'warning'
 export type DisplayMode =
   | 'auto'
   | 'plain'
@@ -125,6 +126,7 @@ export interface Button {
   text: string
   onClick?: AnyEvent
   htmlType?: 'button' | 'reset' | 'submit'
+  namedStyle?: NamedStyle
   className?: ClassName
   type: 'Button'
 }
diff --git a/src/python-fastui/fastui/class_name.py b/src/python-fastui/fastui/class_name.py
index d37e58b4..7dbedc0d 100644
--- a/src/python-fastui/fastui/class_name.py
+++ b/src/python-fastui/fastui/class_name.py
@@ -1,8 +1,11 @@
 # could be renamed to something general if there's more to add
-from typing import Dict, List, Union
+from typing import Dict, List, Literal, Union
 
 from pydantic import Field
 from typing_extensions import Annotated, TypeAliasType
 
 ClassName = TypeAliasType('ClassName', Union[str, List['ClassName'], Dict[str, Union[bool, None]], None])
 ClassNameField = Annotated[ClassName, Field(serialization_alias='className')]
+
+NamedStyle = TypeAliasType('NamedStyle', Union[Literal['primary', 'secondary', 'warning'], None])
+NamedStyleField = Annotated[NamedStyle, Field(serialization_alias='namedStyle')]
diff --git a/src/python-fastui/fastui/components/__init__.py b/src/python-fastui/fastui/components/__init__.py
index d628a63e..2969a05f 100644
--- a/src/python-fastui/fastui/components/__init__.py
+++ b/src/python-fastui/fastui/components/__init__.py
@@ -153,6 +153,7 @@ class Button(_p.BaseModel, extra='forbid'):
     html_type: _t.Union[_t.Literal['button', 'reset', 'submit'], None] = _p.Field(
         default=None, serialization_alias='htmlType'
     )
+    named_style: _class_name.NamedStyleField = None
     class_name: _class_name.ClassNameField = None
     type: _t.Literal['Button'] = 'Button'