up buttons stories

airwatch/src/app/buttons/main-button/main-button.scss

@@ -9,19 +9,27 @@
   font-family: Barlow;
 
 
+  .pipe {
+    margin-left: 10px;
+    margin-right: 10px;
+  }
+
   button {
-    //background: shadows.$primary-color;
+
+    background: transparent;
     color: shadows.$neutral-white;
     border-radius: shadows.$radius-main;
-    padding: 1rem 2rem;
+    padding: 17px 24px;
     cursor: pointer;
     transition: all 0.25s ease;
     border: 0;
     width: 100%;
     margin-top: 8px;
+    font-size: 18px;
 
     i {
-      margin-right: 1rem;
+      width: 16px;
+      height: 16px;
     }
 
     &:hover, &:active, &:focus {
@@ -72,6 +80,11 @@
       }
     }
 
+    &.is-disabled {
+      background-color: #BED7EE;
+      color: white;
+    }
+
     &.is-primary {
       background: var(--Gradient, linear-gradient(77deg, #073A7C -4.23%, #1767AD 51.8%, #255B8E 87.72%));
       color: variables.$neutral-white;
@@ -81,15 +94,24 @@
         background: var(--Hover, linear-gradient(70deg, #073A7C 43.99%, #1767AD 94.38%, #255B8E 126.68%));
       }
 
+      &:focus {
+        border: 3px solid var(--Colors-Principal-100, #96BEE4);
+        background: var(--Gradient, linear-gradient(77deg, #073A7C -4.23%, #1767AD 51.8%, #255B8E 87.72%));
+      }
+
       &.is-disabled {
-        background-color: #BED7EE;
+        background-color: #BED7EE !important;
         color: white;
       }
     }
 
+
     &.is-secondary {
-      background-color: variables.$neutral-white;
+      //background: variables.$neutral-white;
+      background: white;
+      border: solid 1px #255B8E;
       color: variables.$neutral-white;
+      color: #255B8E;
 
       &.is-disabled {
         background-color: #BED7EE;
@@ -111,6 +133,10 @@
         color: #BED7EE;
       }
 
+      &:hover {
+        background: #dedede;
+      }
+
     }
 
     &.is-link {
@@ -118,6 +144,11 @@
       color: #255B8E;
       border: 0;
 
+      &:hover {
+        background: #dedede;
+      }
+      
+
       .label {
         text-decoration: underline;
         text-decoration-color: variables.$primary-color;
@@ -129,5 +160,6 @@
       }
     }
 
+
   }
 }

airwatch/src/app/buttons/main-button/main-button.stories.ts

@@ -15,6 +15,16 @@ const meta: Meta<MainButton> = {
     size: {control: 'select', options: ['', 'large', 'medium', 'small', 'extrasm']},
     kind: {control: 'select', options: ['', 'primary', 'secondary', 'ghost', 'link']},
   },
+  parameters: {
+    docs: {
+      description: {
+        component: 'Main button component with various states including hover and focus.' +
+          '<br/>This component combines a semantic, a size, and visual guides with icons.' +
+          '<br/>We have '
+
+      }
+    }
+  },
 };
 
 export default meta;
@@ -25,7 +35,7 @@ export const Default: Story = {
   args: {
     label: 'Call to action',
     kind: 'primary',
-    size: 'large',
+    size: '',
     disabled: false,
     divider: true,
     icon: 'arrow-right-line',
@@ -69,6 +79,59 @@ export const Ghost: Story = {
   },
 };
 
+
+export const GhostHover: Story = {
+  args: {
+    ...Ghost.args,
+    label: 'Ghost Button (Hover)',
+  },
+  parameters: {
+    pseudo: {hover: true},
+    docs: {
+      description: {
+        story: 'Ghost button in hover state.'
+      }
+    },
+    decorators: [() => ({
+      template: `
+        <style>
+          button.is-ghost {
+            background: linear-gradient(77deg, #073A7C -4.23%, #1767AD 51.8%, #255B8E 87.72%) !important;
+            color: white !important;
+          }
+        </style>
+        <story />
+      `
+    })],
+  }
+};
+export const GhostFocus: Story = {
+  args: {
+    ...Ghost.args,
+    label: 'Ghost Button (Focus)',
+  },
+  parameters: {
+    pseudo: {focus: true},
+    docs: {
+      description: {
+        story: 'Ghost button in focus state.'
+      }
+    },
+    decorators: [() => ({
+      template: `
+        <style>
+          button.is-ghost {
+            outline: 3px solid rgba(23, 103, 173, 0.5) !important;
+            outline-offset: 2px !important;
+            background: white !important;
+          }
+        </style>
+        <story />
+      `
+    })],
+  }
+};
+
 export const Link: Story = {
   args: {
     label: 'Link Button',
@@ -164,3 +227,163 @@ export const ExtraSmall: Story = {
     inconPosition: 'left',
   },
 };
+
+// Hover state stories
+export const PrimaryHover: Story = {
+  args: {
+    ...Primary.args,
+    label: 'Primary Button (Hover)',
+  },
+  parameters: {
+    pseudo: {hover: true},
+    docs: {
+      description: {
+        story: 'Primary button in hover state.'
+      }
+    },
+    decorators: [() => ({
+      template: `
+        <style>
+          .container {
+            background: linear-gradient(70deg, #073A7C 43.99%, #1767AD 94.38%, #255B8E 126.68%) !important;
+          }
+        </style>
+        <div class="container">
+
+        <story />
+</div>
+      `
+    })],
+  }
+};
+
+export const SecondaryHover: Story = {
+  args: {
+    ...Secondary.args,
+    label: 'Secondary Button (Hover)',
+  },
+  parameters: {
+    pseudo: {hover: true},
+    docs: {
+      description: {
+        story: 'Secondary button in hover state.'
+      }
+    },
+    decorators: [() => ({
+      template: `
+        <style>
+          button.is-secondary {
+            background: linear-gradient(77deg, #073A7C -4.23%, #1767AD 51.8%, #255B8E 87.72%) !important;
+            color: white !important;
+          }
+        </style>
+        <story />
+      `
+    })],
+  }
+};
+
+
+export const LinkHover: Story = {
+  args: {
+    ...Link.args,
+    label: 'Link Button (Hover)',
+  },
+  parameters: {
+    pseudo: {hover: true},
+    docs: {
+      description: {
+        story: 'Link button in hover state.'
+      }
+    },
+    decorators: [() => ({
+      template: `
+        <style>
+          button.is-link {
+            background: linear-gradient(77deg, #073A7C -4.23%, #1767AD 51.8%, #255B8E 87.72%) !important;
+            color: white !important;
+          }
+        </style>
+        <story />
+      `
+    })],
+  }
+};
+
+// Focus state stories
+export const PrimaryFocus: Story = {
+  args: {
+    ...Primary.args,
+    label: 'Primary Button (Focus)',
+  },
+  parameters: {
+    pseudo: {focus: true},
+    docs: {
+      description: {
+        story: 'Primary button in focus state.'
+      }
+    },
+    decorators: [() => ({
+      template: `
+        <style>
+          button.is-primary {
+            outline: 3px solid rgba(23, 103, 173, 0.5) !important;
+            outline-offset: 2px !important;
+          }
+        </style>
+        <story />
+      `
+    })],
+  }
+};
+
+export const SecondaryFocus: Story = {
+  args: {
+    ...Secondary.args,
+    label: 'Secondary Button (Focus)',
+  },
+  parameters: {
+    pseudo: {focus: true},
+    docs: {
+      description: {
+        story: 'Secondary button in focus state.'
+      }
+    },
+    decorators: [() => ({
+      template: `
+        <style>
+          button.is-secondary {
+            outline: 3px solid rgba(23, 103, 173, 0.5) !important;
+            outline-offset: 2px !important;
+          }
+        </style>
+        <story />
+      `
+    })],
+  }
+};
+export const LinkFocus: Story = {
+  args: {
+    ...Link.args,
+    label: 'Link Button (Focus)',
+  },
+  parameters: {
+    pseudo: {focus: true},
+    docs: {
+      description: {
+        story: 'Link button in focus state.'
+      }
+    },
+    decorators: [() => ({
+      template: `
+        <style>
+          button.is-link {
+            outline: 3px solid rgba(23, 103, 173, 0.5) !important;
+            outline-offset: 2px !important;
+          }
+        </style>
+        <story />
+      `
+    })],
+  }
+};

my-workspace/projects/sae-lib/buttons/main-button/main-button.scss

@@ -5,135 +5,4 @@
 
 
 :host {
-  display: inline-block;
-  font-family: Barlow;
-
-
-  button {
-
-    background: transparent;
-    color: shadows.$neutral-white;
-    border-radius: shadows.$radius-main;
-    padding: 1rem 2rem;
-    cursor: pointer;
-    transition: all 0.25s ease;
-    border: 0;
-    width: 100%;
-    margin-top: 8px;
-
-    i {
-      margin-right: 1rem;
-    }
-
-    &:hover, &:active, &:focus {
-      transition: all 0.25s ease;
-    }
-
-    &:hover {
-      background: var(--Gradient, linear-gradient(77deg, #073A7C -4.23%, #1767AD 51.8%, #255B8E 87.72%));
-    }
-
-    &.is-size {
-      &-large {
-        padding: 17px 24px;
-
-        font-size: 18px;
-        font-weight: 600;
-        line-height: 26px;
-      }
-
-      &-medium {
-        padding: 14px 18px;
-        border-radius: var(--radius-2, 8px);
-
-        font-size: 16px;
-        font-weight: 600;
-        line-height: 20px;
-      }
-
-      &-small {
-        padding: 14px 10px;
-        border-radius: var(--radius-2, 8px);
-
-        font-size: 14px;
-        font-weight: 600;
-        line-height: 20px;
-
-      }
-
-      &-extrasm {
-        padding: 10px 10px;
-        border-radius: var(--radius-2, 4px);
-        color: var(--Colors-Blanc, #FFF);
-
-
-        font-size: 12px;
-        font-weight: 600;
-        line-height: 18px;
-      }
-    }
-
-    &.is-primary {
-      background: var(--Gradient, linear-gradient(77deg, #073A7C -4.23%, #1767AD 51.8%, #255B8E 87.72%));
-      color: variables.$neutral-white;
-      border-color: color.adjust(variables.$primary-color, $lightness: - 10%);
-
-      &:hover {
-        background: var(--Hover, linear-gradient(70deg, #073A7C 43.99%, #1767AD 94.38%, #255B8E 126.68%));
-      }
-
-      &:focus {
-        border: 3px solid var(--Colors-Principal-100, #96BEE4);
-        background: var(--Gradient, linear-gradient(77deg, #073A7C -4.23%, #1767AD 51.8%, #255B8E 87.72%));
-      }
-
-      &.is-disabled {
-        background-color: #BED7EE;
-        color: white;
-      }
-    }
-
-    &.is-secondary {
-      background-color: variables.$neutral-white;
-      color: variables.$neutral-white;
-
-      &.is-disabled {
-        background-color: #BED7EE;
-        color: white;
-      }
-    }
-
-    &.is-ghost {
-      background: variables.$neutral-white;
-      color: #255B8E;
-      border: 0;
-
-      &:focus {
-        background: variables.$neutral-white;
-      }
-
-      &.is-disabled {
-        background-color: #BED7EE;
-        color: #BED7EE;
-      }
-
-    }
-
-    &.is-link {
-      background: variables.$neutral-white;
-      color: #255B8E;
-      border: 0;
-
-      .label {
-        text-decoration: underline;
-        text-decoration-color: variables.$primary-color;
-      }
-
-      &.is-disabled {
-        background-color: #BED7EE;
-        color: #BED7EE;
-      }
-    }
-
-  }
 }