Added buttons examples

web/html/src/components/buttons.stories.tsx

@@ -10,13 +10,9 @@ export default () => {
     <div className="form-group btn-group">
       <div className="col-lg-offset-3 offset-lg-3 col-lg-6">
         <Button
-          className="btn-primary"
+          className="btn-primary bt-sm"
           text="Submit"
         />
-        <Button
-          className="btn-default"
-          text="Clear"
-        />
       </div>
     </div>
   ];
@@ -46,7 +42,7 @@ export default () => {
   ];
   return (
     <div>
-      <h2>Variants</h2>
+      <h2>Buttons</h2>
       <p>Different button styling variants tailored for various scenarios as required.</p>
       <StripedStorySection>
         <div className="row">
@@ -68,19 +64,20 @@ export default () => {
             <h5 className="mt-5">Small</h5>
             <Button className="btn-danger btn-sm">Button</Button>
           </div>
+          <div className="col-md-1">
+            <h5>Tertiary</h5>
+            <Button className="btn-tertiary" title="Delete" icon="fa-trash"></Button>
+          </div>
         </div>
-        <h5 className="mt-5">Only icon button and button with icon and label</h5>
+        <h5 className="mt-5">Variants</h5>
         <StoryRow>
           <Button title="Add" className="btn-default" icon="fa-plus"></Button>
           <Button title="Delete" className="btn-default" icon="fa-trash"></Button>
           <Button className="btn-primary" icon="fa-plus">Primary</Button>
+          <Button className="btn-tertiary" icon="fa-plus">Tertiary</Button>
+          <Button className="btn-tertiary" icon="fa-plus"></Button>
         </StoryRow>
-        <div className="row mt-5">
-          <div className="col-md-12">
-            <h5>Unstyled</h5>
-            <Button title="Edit" className="btn-unstyled" icon="fa-edit"></Button>
-          </div>
-        </div>
+
       </StripedStorySection>
       <hr></hr>
       <h2>Choosing a button</h2>
@@ -120,9 +117,11 @@ export default () => {
             </td>
           </tr>
           <tr>
-            <td><strong>Unstyled</strong>  </td>
+            <td><strong>Tertiary</strong>  </td>
             <td>
-              Unstyled icon buttons should only be used in cards, forms, or components where they remain subtle and don't overshadow other buttons.
+              <p>Tertiary buttons are designed for less prominent actions and should not compete visually with primary or secondary buttons. </p>
+              <p>Use icon-only tertiary buttons in cards, forms, inline action or components where space is limited.</p>
+              <p>Icon-only buttons should always include a descriptive <code>title</code> attribute or an accessible label (via <code>aria-labe</code>l or <code>aria-labelledby</code>) to ensure clarity and accessibility for all users.</p>
               <p><strong>Example:</strong> Inline action buttons for editing an email address in a form.</p>
             </td>
           </tr>
@@ -138,15 +137,21 @@ export default () => {
             <Text
               name="firstname"
               label={t("First Name")}
-              labelClass="col-md-3"
+              labelClass="col-md-3 text-right"
               divClass="col-md-6"
             />
             <Text
-              name="firstname"
+              name="lastname"
               label={t("Last Name")}
-              labelClass="col-md-3"
+              labelClass="col-md-3 text-right"
               divClass="col-md-6"
             />
+            <div className="form-group">
+              <label className="control-label col-md-3 text-right">Email ID:</label>
+              <div className="col-md-6">
+                [email protected] <Button className="btn-tertiary" title="Edit Email ID" icon="fa-pencil"></Button>
+              </div>
+            </div>
           </BootstrapPanel>
         </div>
       </div>
@@ -166,6 +171,39 @@ export default () => {
           </BootstrapPanel>
         </div>
       </div>
+      <div className="row">
+        <div className="col-md-6">
+          <p>When grouping buttons aligned to the left, place the primary button at the far left, followed by the button for the next most important action.</p>
+          <p><strong>Example:</strong> Form</p>
+          <BootstrapPanel title="Forms" footer={listButtons}>
+            <Text
+              name="firstname"
+              label={t("Name")}
+              labelClass="col-md-3 text-right"
+              divClass="col-md-6"
+            />
+            <div className="form-group ">
+              <label className="control-label col-md-3 text-right">Name</label>
+              <div className="col-md-6">
+                <input
+                  className="form-control"
+                  name="firstname"
+                />
+              </div>
+              <div className="col-md-3">
+                <Button className="btn-tertiary" title="Delete" icon="fa-trash"></Button>
+              </div>
+
+            </div>
+            <div className="form-group ">
+              <label className="control-label col-md-3"></label>
+              <div className="col-md-6">
+                <Button className="btn-tertiary" icon="fa-plus">Add Name</Button>
+              </div>
+            </div>
+          </BootstrapPanel>
+        </div>
+      </div>
     </div >
   );
 };