Changed various UI components.

packages/kg-default-nodes/lib/nodes/call-to-action/CallToActionNode.js

@@ -8,15 +8,16 @@ export class CallToActionNode extends generateDecoratorNode({
     properties: [
         {name: 'layout', default: 'minimal'},
         {name: 'textValue', default: '', wordCount: true},
-        {name: 'showButton', default: false},
-        {name: 'buttonText', default: ''},
+        {name: 'showButton', default: true},
+        {name: 'buttonText', default: 'Learn more'},
         {name: 'buttonUrl', default: ''},
-        {name: 'buttonColor', default: ''},
+        {name: 'buttonColor', default: '#000000'}, // Where colour is customisable, we should use hex values
         {name: 'buttonTextColor', default: ''},
         {name: 'hasSponsorLabel', default: true},
         {name: 'sponsorLabel', default: '<p><span style="white-space: pre-wrap;">SPONSORED</span></p>'},
-        {name: 'backgroundColor', default: 'grey'},
-        {name: 'imageUrl', default: null},
+        {name: 'backgroundColor', default: 'grey'}, // Since this is one of a few fixed options, we stick to colour names.
+        {name: 'hasImage', default: false},
+        {name: 'imageUrl', default: ''},
         {name: 'imageWidth', default: null},
         {name: 'imageHeight', default: null}
     ]

packages/kg-default-nodes/test/nodes/call-to-action.test.js

@@ -81,11 +81,11 @@ describe('CallToActionNode', function () {
             callToActionNode.textValue = 'This is a cool advertisement';
             callToActionNode.textValue.should.equal('This is a cool advertisement');
 
-            callToActionNode.showButton.should.equal(false);
-            callToActionNode.showButton = true;
             callToActionNode.showButton.should.equal(true);
+            callToActionNode.showButton = false;
+            callToActionNode.showButton.should.equal(false);
 
-            callToActionNode.buttonText.should.equal('');
+            callToActionNode.buttonText.should.equal('Learn more');
             callToActionNode.buttonText = 'click me';
             callToActionNode.buttonText.should.equal('click me');
 
@@ -97,9 +97,9 @@ describe('CallToActionNode', function () {
             callToActionNode.sponsorLabel = 'This post is brought to you by our sponsors';
             callToActionNode.sponsorLabel.should.equal('This post is brought to you by our sponsors');
 
-            callToActionNode.buttonColor.should.equal('');
-            callToActionNode.buttonColor = 'red';
-            callToActionNode.buttonColor.should.equal('red');
+            callToActionNode.buttonColor.should.equal('#000000');
+            callToActionNode.buttonColor = '#ffffff';
+            callToActionNode.buttonColor.should.equal('#ffffff');
 
             callToActionNode.buttonTextColor.should.equal('');
             callToActionNode.buttonTextColor = 'black';
@@ -110,8 +110,8 @@ describe('CallToActionNode', function () {
             callToActionNode.hasSponsorLabel.should.equal(false);
 
             callToActionNode.backgroundColor.should.equal('grey');
-            callToActionNode.backgroundColor = '#654321';
-            callToActionNode.backgroundColor.should.equal('#654321');
+            callToActionNode.backgroundColor = 'red';
+            callToActionNode.backgroundColor.should.equal('red');
 
             should(callToActionNode.imageUrl).be.null();
             callToActionNode.imageUrl = 'http://blog.com/image1.jpg';

packages/koenig-lexical/src/components/ui/ButtonGroup.jsx

@@ -7,7 +7,7 @@ import {usePreviousFocus} from '../../hooks/usePreviousFocus';
 export function ButtonGroup({buttons = [], selectedName, onClick}) {
     return (
         <div className="flex">
-            <ul className="flex items-center justify-evenly gap-[.6rem] rounded-lg font-sans text-md font-normal text-white">
+            <ul className="flex items-center justify-evenly rounded-lg bg-grey-100 font-sans text-md font-normal text-white">
                 {buttons.map(({label, name, Icon, dataTestId}) => (
                     <IconButton
                         key={`${name}-${label}`}
@@ -33,7 +33,7 @@ export function IconButton({dataTestId, onClick, label, name, selectedName, Icon
         <li className="mb-0">
             <button
                 aria-label={label}
-                className={`group relative flex h-7 w-8 cursor-pointer items-center justify-center rounded-lg hover:bg-grey-150 dark:hover:bg-grey-900 ${isActive ? 'bg-grey-150 text-green-600 dark:bg-grey-900 dark:text-white' : 'text-black dark:text-white' } ${Icon ? '' : 'text-[1.3rem] font-bold'}`}
+                className={`group relative flex h-7 w-8 cursor-pointer items-center justify-center rounded-lg text-black dark:text-white dark:hover:bg-grey-900 ${isActive ? 'border border-grey-300 bg-white shadow-xs dark:bg-grey-900' : '' } ${Icon ? '' : 'text-[1.3rem] font-bold'}`}
                 data-testid={dataTestId}
                 type="button"
                 onClick={handleClick}
@@ -47,5 +47,5 @@ export function IconButton({dataTestId, onClick, label, name, selectedName, Icon
 }
 
 ButtonGroup.propTypes = {
-    selectedName: PropTypes.oneOf(['regular', 'wide', 'full', 'split', 'center', 'left', 'small', 'medium', 'large', 'grid', 'list'])
+    selectedName: PropTypes.oneOf(['regular', 'wide', 'full', 'split', 'center', 'left', 'small', 'medium', 'large', 'grid', 'list', 'minimal', 'immersive'])
 };

packages/koenig-lexical/src/components/ui/ColorOptionButtons.jsx

@@ -1,31 +1,70 @@
 import PlusIcon from '../../assets/icons/plus.svg?react';
-import React from 'react';
+import React, {useState} from 'react';
 import {Tooltip} from './Tooltip';
+import {useClickOutside} from '../../hooks/useClickOutside';
 import {usePreviousFocus} from '../../hooks/usePreviousFocus';
 
 export function ColorOptionButtons({buttons = [], selectedName, onClick}) {
+    const [isOpen, setIsOpen] = useState(false);
+    const componentRef = React.useRef(null);
+
+    const selectedButton = buttons.find(button => button.name === selectedName);
+
+    // Close the swatch popover when clicking outside of it
+    useClickOutside(isOpen, componentRef, () => setIsOpen(false));
+
     return (
-        <div className="flex">
-            <ul className="flex w-full items-center justify-between rounded-md font-sans text-md font-normal text-white">
-                {buttons.map(({label, name, color}) => (
-                    name !== 'image' ?
-                        <ColorButton
-                            key={`${name}-${label}`}
-                            color={color}
-                            label={label}
-                            name={name}
-                            selectedName={selectedName}
-                            onClick={onClick}
-                        />
-                        :
-                        <li key='background-image' className={`flex size-[3rem] cursor-pointer items-center justify-center rounded-full border-2 ${selectedName === name ? 'border-green' : 'border-transparent'}`} data-testid="background-image-color-button" type="button" onClick={() => onClick(name)}>
-                            <span className="border-1 flex size-6 items-center justify-center rounded-full border border-black/5">
-                                <PlusIcon className="size-3 stroke-grey-700 stroke-2 dark:stroke-grey-500 dark:group-hover:stroke-grey-100" />
-                            </span>
-                        </li>
+        <div ref={componentRef} className="relative">
+            <button
+                className={`relative size-6 cursor-pointer rounded-full ${selectedName ? 'p-[2px]' : 'border border-grey-200 dark:border-grey-800'}`}
+                data-testid="color-options-button"
+                type="button"
+                onClick={() => setIsOpen(!isOpen)}
+            >
+                {selectedName && (
+                    <div className="absolute inset-0 rounded-full bg-clip-content p-[3px]" style={{
+                        background: 'conic-gradient(hsl(360,100%,50%),hsl(315,100%,50%),hsl(270,100%,50%),hsl(225,100%,50%),hsl(180,100%,50%),hsl(135,100%,50%),hsl(90,100%,50%),hsl(45,100%,50%),hsl(0,100%,50%))',
+                        WebkitMask: 'linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)',
+                        WebkitMaskComposite: 'xor',
+                        mask: 'linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)',
+                        maskComposite: 'exclude'
+                    }} />
+                )}
+                <span
+                    className={`${selectedButton?.color || ''} block size-full rounded-full border-2 border-white`}
+                ></span>
+            </button>
 
-                ))}
-            </ul>
+            {/* Color options popover */}
+            {isOpen && (
+                <div className="absolute -right-3 bottom-full z-10 mb-2 rounded-lg bg-white px-3 py-2 shadow" data-testid="color-options-popover">
+                    <div className="flex">
+                        <ul className="flex w-full items-center justify-between rounded-md font-sans text-md font-normal text-white">
+                            {buttons.map(({label, name, color}) => (
+                                name !== 'image' ?
+                                    <ColorButton
+                                        key={`${name}-${label}`}
+                                        color={color}
+                                        data-testid={`color-options-${name}-button`}
+                                        label={label}
+                                        name={name}
+                                        selectedName={selectedName}
+                                        onClick={(title) => {
+                                            onClick(title);
+                                            setIsOpen(false);
+                                        }}
+                                    />
+                                    :
+                                    <li key='background-image' className={`mb-0 flex size-[3rem] cursor-pointer items-center justify-center rounded-full border-2 ${selectedName === name ? 'border-green' : 'border-transparent'}`} data-testid="background-image-color-button" type="button" onClick={() => onClick(name)}>
+                                        <span className="border-1 flex size-6 items-center justify-center rounded-full border border-black/5">
+                                            <PlusIcon className="size-3 stroke-grey-700 stroke-2 dark:stroke-grey-500 dark:group-hover:stroke-grey-100" />
+                                        </span>
+                                    </li>
+                            ))}
+                        </ul>
+                    </div>
+                </div>
+            )}
         </div>
     );
 }
@@ -35,7 +74,7 @@ export function ColorButton({onClick, label, name, color, selectedName}) {
 
     const {handleMousedown, handleClick} = usePreviousFocus(onClick, name);
     return (
-        <li>
+        <li className="mb-0">
             <button
                 aria-label={label}
                 className={`group relative flex size-6 cursor-pointer items-center justify-center rounded-full border-2 ${isActive ? 'border-green' : 'border-transparent'}`}