fix(Widget): add support headerActions prop functional for compact ty…

…pe (#57)
softconstruct · Feb 1, 2024 · 4210d35 · 4210d35
1 parent f3a10a9
commit 4210d35
Show file tree

Hide file tree

Showing 6 changed files with 56 additions and 42 deletions.
diff --git a/configs/.stylelintrc.json b/configs/.stylelintrc.json
@@ -25,5 +25,5 @@
         "scss/operator-no-newline-after": null,
         "color-function-notation": "legacy"
     },
-    "ignoreFiles": ["../coverage/**/*.css"]
+    "ignoreFiles": ["../coverage/**/*.css", "../storybook-static/**/*.css"]
 }
diff --git a/src/lib/molecules/Widget/index.js b/src/lib/molecules/Widget/index.js
@@ -34,7 +34,6 @@ function Widget({
     keyValues,
     ...restProps
 }) {
-    const isCompact = type === widgetConfig.type[1];
     const showKeyValues = useMemo(() => !!keyValues.length && size === widgetConfig.size[2], [size, keyValues]);
 
     return (
@@ -91,7 +90,11 @@ function Widget({
                 </>
             ) : (
                 <>
-                    <li className="image">{img && <img src={img} alt="" />}</li>
+                    {img && (
+                        <li className="image">
+                            <img src={img} alt="" />
+                        </li>
+                    )}
                     <li className="head">
                         <ModuleTitle
                             title={title}
@@ -101,7 +104,7 @@ function Widget({
                             titleIcon={titleIcon}
                             {...titleProps}
                         >
-                            {!isCompact && headerActions}
+                            {headerActions}
                         </ModuleTitle>
                     </li>
                     <li
@@ -172,7 +175,8 @@ Widget.propTypes = {
      */
     color: PropTypes.string,
     /**
-     * Header of widget can have actions, so with this prop can be set actions
+     * The prop allows you to specify actions for the widget's header.
+     * It works only for types `default` and `compact`
      */
     headerActions: PropTypes.node,
     /**

diff --git a/src/lib/molecules/Widget/index.scss b/src/lib/molecules/Widget/index.scss
@@ -44,7 +44,7 @@
         grid-template-areas: 'image head' 'image text';
 
         &.t-default {
-            @include rtl(padding, 0 rem(20) 0 0, 0 0 0 rem(20));
+            padding-inline: rem(20);
 
             .module-title {
                 font-size: rem(12);
@@ -55,23 +55,23 @@
             }
 
             .image {
-                padding: 0 rem(35);
+                padding-inline-end: rem(35);
 
                 img {
                     width: rem(50);
                     height: rem(50);
                 }
                 @at-root {
                     .s-small#{&} {
-                        padding: 0 rem(15);
+                        padding-inline-end: rem(15);
 
                         img {
                             width: rem(34);
                             height: rem(34);
                         }
                     }
                     .s-medium#{&} {
-                        padding: 0 rem(20);
+                        padding-inline-end: rem(20);
 
                         img {
                             width: rem(48);
@@ -106,7 +106,7 @@
             grid-template-rows: auto 1fr;
 
             .image {
-                padding: 0 rem(15);
+                padding-inline-end: rem(15);
 
                 img {
                     width: rem(48);
@@ -117,13 +117,16 @@
                         display: none;
                     }
                     .s-medium#{&} {
-                        padding: 0 rem(20);
+                        padding-inline: rem(20);
 
                         img {
                             width: rem(30);
                             height: rem(30);
                         }
                     }
+                    .s-big#{&} {
+                        padding-inline: rem(20);
+                    }
                 }
             }
 

diff --git a/stories/assets/storybook.globals.js b/stories/assets/storybook.globals.js
@@ -1,3 +1,5 @@
+// TODO: This object will be removed after refactoring
+// all stories to use `propCategory` instead of `category`
 export const category = {
     functionality: 'Functionality',
     validation: 'Validation',
@@ -8,6 +10,18 @@ export const category = {
     others: 'Others'
 };
 
+// TODO: This comment can be removed after refactoring
+// all stories to use this object instead of `category`
+export const propCategory = {
+    functionality: { category: 'Functionality' },
+    validation: { category: 'Validation' },
+    appearance: { category: 'Appearance' },
+    content: { category: 'Content' },
+    action: { category: 'Actions' },
+    states: { category: 'States' },
+    others: { category: 'Others' }
+};
+
 export const args = (obj) => {
     const { control, options, category, condition, defaultValue, truthy, name, action, ...rest } = obj;
     return {

diff --git a/stories/introduction.mdx b/stories/introduction.mdx
@@ -188,14 +188,6 @@ Our team will review your issue and respond as soon as possible. We prioritize i
 Thank you for your contributions and feedback. We value your input and strive to make our design system the best it can be.
 <br />
 
-<br />
-## Supported browsers
-<p>
-    We actively support the following browsers on desktop and mobile devices. <b>For each, we support the current and
-    previous major releases only.</b>
-</p>
-<img src={browsersSupport} />
-<br />
 ## Supported browsers
 <p>
     We actively support the following browsers on desktop and mobile devices. <b>For each, we support the current and

diff --git a/stories/molecules/Widget/Widget.stories.jsx b/stories/molecules/Widget/Widget.stories.jsx
@@ -2,42 +2,43 @@ import React from 'react';
 
 import WidgetComponent from 'src/lib/molecules/Widget';
 import Button from 'src/lib/atoms/Button';
-import { args, category } from '../../assets/storybook.globals';
+import { args, propCategory } from '../../assets/storybook.globals';
 import { widgetConfig } from '../../../src/configs';
 
 const keyValues = [
     { label: 'label 1', value: 'value 1' },
     { label: 'label 2', value: 'value 2' },
     { label: 'label 3', value: 'value 3' }
 ];
-const headerActions = <Button appearance="minimal" size="default" color="default" icon="bc-icon-calendar" />;
 
-const others = { category: category.others };
-const content = { category: category.content };
-const appearance = { category: category.appearance };
+const headerActions = <Button appearance="minimal" size="default" color="default" icon="bc-icon-calendar" />;
 
 export default {
     title: 'Molecules/Widget',
     component: WidgetComponent,
     argTypes: {
-        img: args({ control: 'text', ...content }),
-        text: args({ control: 'text', ...content }),
-        title: args({ control: 'text', ...content }),
-        noData: args({ control: 'text', ...content }),
-        className: args({ control: false, ...others }),
-        color: args({ control: 'color', ...appearance }),
-        titleProps: args({ control: false, ...content }),
-        titleIcon: args({ control: 'text', ...content }),
-        noDataText: args({ control: 'text', ...content }),
-        keyValues: args({ control: 'object', ...content }),
-        headerActions: args({ control: 'text', ...content }),
-        comparisonText: args({ control: 'text', ...content }),
-        withShadow: args({ control: 'boolean', ...appearance }),
-        withBorder: args({ control: 'boolean', ...appearance }),
-        showComparisonIcons: args({ control: 'boolean', ...content }),
-        size: args({ control: 'select', options: widgetConfig.size, ...appearance }),
-        type: args({ control: 'select', options: widgetConfig.type, ...appearance }),
-        comparisonStatus: args({ control: 'select', options: widgetConfig.comparisonStatus, ...appearance })
+        img: args({ control: 'text', ...propCategory.content }),
+        text: args({ control: 'text', ...propCategory.content }),
+        title: args({ control: 'text', ...propCategory.content }),
+        noData: args({ control: 'text', ...propCategory.content }),
+        className: args({ control: false, ...propCategory.others }),
+        color: args({ control: 'color', ...propCategory.appearance }),
+        titleProps: args({ control: false, ...propCategory.content }),
+        titleIcon: args({ control: 'text', ...propCategory.content }),
+        noDataText: args({ control: 'text', ...propCategory.content }),
+        keyValues: args({ control: 'object', ...propCategory.content }),
+        headerActions: args({ control: 'text', ...propCategory.content }),
+        comparisonText: args({ control: 'text', ...propCategory.content }),
+        withShadow: args({ control: 'boolean', ...propCategory.appearance }),
+        withBorder: args({ control: 'boolean', ...propCategory.appearance }),
+        showComparisonIcons: args({ control: 'boolean', ...propCategory.content }),
+        size: args({ control: 'select', options: widgetConfig.size, ...propCategory.appearance }),
+        type: args({ control: 'select', options: widgetConfig.type, ...propCategory.appearance }),
+        comparisonStatus: args({
+            control: 'select',
+            options: widgetConfig.comparisonStatus,
+            ...propCategory.appearance
+        })
     },
     args: {
         noData: false,