[DEV-11239] Prevent button render if no href, updated classname to ma…

…tch layout
prezly · Aug 11, 2023 · d88258e · d88258e
1 parent c539bb1
commit d88258e
Show file tree

Hide file tree

Showing 5 changed files with 6 additions and 8 deletions.
diff --git a/.loki/reference/chrome_iphone7_Elements_ButtonBlock_Without_Href.png b/.loki/reference/chrome_iphone7_Elements_ButtonBlock_Without_Href.png
diff --git a/.loki/reference/chrome_laptop_Elements_ButtonBlock_Without_Href.png b/.loki/reference/chrome_laptop_Elements_ButtonBlock_Without_Href.png
diff --git a/.loki/reference/chrome_narrow_Elements_ButtonBlock_Without_Href.png b/.loki/reference/chrome_narrow_Elements_ButtonBlock_Without_Href.png
diff --git a/src/elements/ButtonBlock/ButtonBlock.tsx b/src/elements/ButtonBlock/ButtonBlock.tsx
@@ -10,12 +10,15 @@ interface ButtonNodeProps {
 export function ButtonBlock({ node }: ButtonNodeProps) {
     const { href, label, layout, new_tab: newTab, variant } = node;
 
+    if (!href) {
+        return null;
+    }
+
     return (
         <a
             className={classNames('prezly-slate-button-block', {
-                'prezly-slate-button-block--disabled': !href,
                 'prezly-slate-button-block--outlined': variant === ButtonBlockNode.Variant.OUTLINE,
-                'prezly-slate-button-block--fullWidth': layout === ButtonBlockNode.Layout.WIDE,
+                'prezly-slate-button-block--wide': layout === ButtonBlockNode.Layout.WIDE,
                 'prezly-slate-button-block--right': layout === ButtonBlockNode.Layout.RIGHT,
                 'prezly-slate-button-block--left': layout === ButtonBlockNode.Layout.LEFT,
                 'prezly-slate-button-block--center': layout === ButtonBlockNode.Layout.CENTER,

diff --git a/src/elements/ButtonBlock/ButtonBlockNode.scss b/src/elements/ButtonBlock/ButtonBlockNode.scss
@@ -17,18 +17,13 @@ $white: #fff;
     line-height: $line-height;
     font-weight: 600;
 
-    &--disabled {
-        opacity: 0.5;
-        cursor: not-allowed;
-    }
-
     &--outlined {
         background-color: $white;
         color: $color-text;
         border: 1px solid $color-border;
     }
 
-    &--fullWidth {
+    &--wide {
         width: auto;
     }