change the styling of ui component stories

Author: roshni73

packages/go-ui-storybook/src/stories/Alert.stories.tsx

@@ -30,7 +30,6 @@ type Story = StoryObj<typeof meta>;
 export const Info: Story = {
     args: {
         name: 'info',
-        title: 'Information',
         type: 'info',
         nonDismissable: true,
         description: 'This alert provides informative details to the user.',
@@ -47,7 +46,6 @@ export const Info: Story = {
 export const Success: Story = {
     args: {
         name: 'success',
-        title: 'Success',
         type: 'success',
         nonDismissable: true,
         description: 'This alert indicates a successful operation or task.',
@@ -64,7 +62,6 @@ export const Success: Story = {
 export const Warning : Story = {
     args: {
         name: 'warning',
-        title: 'Warning',
         type: 'warning',
         nonDismissable: true,
         description: 'This alert warns the user about potential issues or risks.',
@@ -74,7 +71,6 @@ export const Warning : Story = {
 export const Danger : Story = {
     args: {
         name: 'danger',
-        title: 'Danger',
         type: 'danger',
         nonDismissable: true,
         description: 'This alert indicates a dangerous or potentially harmful situation.',
@@ -91,7 +87,6 @@ export const Danger : Story = {
 export const NonDismissable: Story = {
     args: {
         name: 'danger',
-        title: 'Danger',
         type: 'danger',
         description: 'This alert indicates a dangerous or potentially harmful situation.',
         nonDismissable: true,

packages/go-ui-storybook/src/stories/Button.stories.ts

@@ -138,3 +138,21 @@ export const DropdownItem: Story = {
         children: 'Dropdown Item',
     },
 };
+
+export const ProcessButtonWithIcon: Story = {
+    args: {
+        name: 'button',
+        variant: 'process',
+        children: 'Process Button',
+        // icons:<LoaderLineIcon/>
+    },
+};
+
+export const GreyTertiaryButtonWithIcon: Story = {
+    args: {
+        name: 'button',
+        variant: 'grey-tertiary',
+        children: 'Grey-Tertiary Button',
+        // icons:<LoaderLineIcon/>
+    },
+};

packages/go-ui-storybook/src/stories/List.stories.tsx

@@ -89,6 +89,15 @@ export const Filtered: Story = {
         renderer: Option,
         rendererParams,
         filtered: true,
-        filteredEmptyMessage: 'Data is not available for selected filters',
+    },
+};
+
+export const Empty: Story = {
+    args: {
+        className: 'list-story',
+        keySelector,
+        renderer: Option,
+        rendererParams,
+        errorMessage: 'Data is not available for selected filters',
     },
 };

packages/go-ui-storybook/src/stories/Table.stories.tsx

@@ -191,7 +191,12 @@ const columns = [
         'link',
         'Link',
         ({ link, title }) => (
-            <a href={link}>{title}</a>
+            <a
+                className="table-link"
+                href={link}
+            >
+                {title}
+            </a>
         ),
         (_, item) => ({ link: item.link, title: item.name }),
     ),

packages/go-ui-storybook/src/stories/index.css

@@ -170,3 +170,11 @@
     padding-top: var(--go-ui-spacing-md);
     padding-bottom: var(--go-ui-spacing-md);
 }
+
+.table-link{
+    color: var(--go-ui-color-text);
+}
+.table-link:hover {
+    color: var(--go-ui-color-primary-red);
+}
+

packages/ui/src/components/Alert/styles.module.css

@@ -1,7 +1,7 @@
 .alert {
     display: flex;
     border-radius: var(--go-ui-border-radius-md);
-    box-shadow: var(--go-ui-box-shadow-2xl);
+    box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.2);
     width: calc(14rem + 16vw);
     color: var(--go-ui-color-white);
 

packages/ui/src/components/DefaultMessage/index.tsx

@@ -83,9 +83,10 @@ function DefaultMessage(props: Props) {
             className={_cs(
                 styles.defaultMessage,
                 pending && overlayPending && styles.overlay,
+                empty && styles.emptyMessage,
                 className,
             )}
-            icon={<AnalysisIcon />}
+            icon={(!empty || filtered || errored) && <AnalysisIcon />}
             compact={compact}
             title={messageTitle}
             pending={pending}

packages/ui/src/components/DefaultMessage/styles.module.css

@@ -6,4 +6,8 @@
         width: 100%;
         height: 100%;
     }
+    &.empty-message {
+        height: 200px;
+        padding-top: 40px;
+    }
 }

packages/ui/src/components/InputContainer/styles.module.css

@@ -8,9 +8,10 @@
         border-radius: var(--go-ui-border-radius-md);
         background-color: var(--go-ui-color-element-background);
         padding: 0 var(--go-ui-spacing-sm);
-
+        
         .input {
             padding: var(--go-ui-spacing-xs) 0;
+            height: 32px;
         }
     }
 

packages/ui/src/components/InputLabel/styles.module.css

@@ -1,6 +1,5 @@
 .input-label {
     display: flex;
-    padding: 0 var(--go-ui-spacing-sm);
     color: var(--go-ui-color-gray-70);
     gap: var(--go-ui-spacing-xs);